/* Barra de escrever no pe da conversa, como no WhatsApp, e o rascunho da IA como baloes tracejados no fim do chat. */
#compositor { position:relative; display:flex; align-items:flex-end; gap:8px; padding:10px 14px 12px; border-top:1px solid var(--b); background:var(--card); }
#compositor .campo { flex:1; display:flex; align-items:flex-end; gap:4px; background:var(--bg2); border:1px solid var(--b2); border-radius:22px; padding:4px 6px 4px 4px; transition:border-color .15s, box-shadow .15s; }
#compositor .campo:focus-within { border-color:var(--azul); box-shadow:0 0 0 3px color-mix(in srgb, var(--azul) 18%, transparent); }
#compositor textarea { flex:1; border:0; background:transparent; box-shadow:none !important; resize:none; min-height:38px; max-height:160px; padding:9px 6px; line-height:1.4; font-size:14px; overflow-y:auto; }
#compositor textarea:focus { box-shadow:none; }
#compositor .ico-c { width:38px; height:38px; flex:none; border-radius:50%; padding:0; display:grid; place-items:center; background:transparent; border-color:transparent; color:var(--m); font-size:20px; }
#compositor .ico-c:hover { color:var(--t); transform:none; background:var(--card2); }
#compositor .enviar-c { width:46px; height:46px; flex:none; border-radius:50%; padding:0; display:grid; place-items:center; border:0; color:#fff;
  background:linear-gradient(135deg, var(--azul), var(--azulb)); box-shadow:var(--glow); }
#compositor .enviar-c svg { width:20px; height:20px; fill:currentColor; margin-left:2px; }
#compositor .enviar-c:disabled { opacity:.45; box-shadow:none; }
#compositor .enviar-c:not(:disabled):hover { transform:scale(1.05); }
#compositor.bloqueado .campo { opacity:.6; }
#compositor .emojis { position:absolute; bottom:64px; left:14px; z-index:6; width:300px; display:none; grid-template-columns:repeat(8, 1fr); gap:2px; padding:8px;
  background:var(--card); border:1px solid var(--b2); border-radius:14px; box-shadow:var(--sombra); }
#compositor .emojis.aberto { display:grid; animation: entra .15s ease-out both; }
#compositor .emojis button { padding:4px 0; font-size:20px; background:transparent; border-color:transparent; border-radius:8px; }
#compositor .emojis button:hover { background:var(--card2); transform:none; }
#compositor .dica-c { position:absolute; right:78px; bottom:1px; font-size:10px; color:var(--m2); pointer-events:none; opacity:.8; }

/* rascunho da IA no fim da conversa */
.fantasmas { align-self:flex-end; max-width:76%; display:flex; flex-direction:column; align-items:flex-end; gap:5px; margin-top:6px; }
.fantasmas .rot { font-size:11px; color:var(--m2); font-weight:600; letter-spacing:.3px; display:flex; align-items:center; gap:6px; }
.fantasmas .b.fantasma { opacity:.82; border-style:dashed; border-color:color-mix(in srgb, var(--azul) 55%, transparent); cursor:pointer; position:relative; max-width:100%; animation:none; }
.fantasmas .b.fantasma:hover { opacity:1; }
.fantasmas .b.fantasma::after { content:"✎ editar"; position:absolute; left:-62px; top:50%; transform:translateY(-50%); font-size:11px; color:var(--m); opacity:0; transition:opacity .15s; white-space:nowrap; }
.fantasmas .b.fantasma:hover::after { opacity:1; }
.fantasmas .acoes-f { display:flex; gap:6px; }
.fantasmas .acoes-f button { padding:4px 10px; font-size:12px; }
.b.pendente { opacity:.7; }
.b.pendente .h::after { content:" 🕓"; }
/* WhatsApp novo: gravacao de audio, tiques, atalho do QR */
#compositor .grav-c { flex:1; display:flex; align-items:center; gap:10px; min-height:46px; padding:4px 8px; background:var(--bg2); border:1px solid var(--b2); border-radius:22px; }
#compositor .grav-c #c_grav_t { font-variant-numeric:tabular-nums; font-weight:600; }
#compositor .ponto-c { width:10px; height:10px; border-radius:50%; background:#e5484d; animation:pisca-c 1s ease-in-out infinite; }
@keyframes pisca-c { 50% { opacity:.25; } }
.b .h .tq { margin-left:3px; letter-spacing:-2px; color:var(--m2); }
.b .h .tq.lido { color:#34b7f1; }
.whats-c { font-size:20px; text-decoration:none; padding:0 6px; }
@media (max-width:700px) { #compositor { padding:8px; } #compositor .dica-c { display:none; } .fantasmas { max-width:88%; } .fantasmas .b.fantasma::after { display:none; } }