/* ===========================================================
   TECNOVA Digital — aspeto da conversa cliente ⇄ Wesley
   Usa as variáveis já existentes em cada página.
   =========================================================== */
.ch{display:flex;flex-direction:column;border:1px solid rgba(217,178,110,.2);border-radius:18px;overflow:hidden;background:rgba(0,0,0,.18)}
.ch-topo{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid rgba(217,178,110,.16);background:rgba(217,178,110,.06)}
.ch-topo b{display:block;font-size:.95rem;color:var(--cream,#f6efe2)}
.ch-topo span{display:block;font-size:.75rem;color:var(--cream-dim,#c9bda6)}
/* `.ch-topo span{display:block}` acima é mais específico do que `.ch-av`,
   por isso o avatar leva o seletor mais forte para não perder a centragem. */
.ch .ch-av,.ch-topo .ch-av,.ch-item .ch-av{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,var(--gold-soft,#e8cf9e),var(--gold,#d9b26e));color:var(--ink,#16100b);font-weight:800;font-family:'Playfair Display',serif;font-size:1rem;line-height:1;overflow:hidden}
.ch-item .ch-av.sm,.ch-topo .ch-av.sm{width:34px;height:34px;font-size:.88rem}

.ch-corpo{min-height:230px;max-height:430px;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.ch-vazio,.ch-corpo .empty{color:var(--cream-dim,#c9bda6);font-size:.86rem;text-align:center;margin:auto}
.ch-msg{display:flex}
.ch-msg.meu{justify-content:flex-end}
.ch-bolha{max-width:78%;padding:11px 15px 22px;border-radius:16px;font-size:.89rem;line-height:1.55;position:relative;word-break:break-word}
.ch-msg.dele .ch-bolha{background:rgba(255,255,255,.07);border:1px solid rgba(217,178,110,.16);color:var(--cream,#f6efe2);border-bottom-left-radius:5px}
.ch-msg.meu .ch-bolha{background:linear-gradient(135deg,var(--gold-soft,#e8cf9e),var(--gold,#d9b26e));color:var(--ink,#16100b);border-bottom-right-radius:5px}
.ch-hora{position:absolute;right:12px;bottom:6px;font-size:.63rem;opacity:.62;font-weight:600}

.ch-envio{display:flex;gap:10px;padding:12px;border-top:1px solid rgba(217,178,110,.16);background:rgba(0,0,0,.2)}
.ch-envio textarea{flex:1;resize:none;min-height:50px;overflow-y:auto;background:var(--ink,#16100b);border:1px solid rgba(217,178,110,.22);border-radius:12px;padding:12px 14px;color:var(--cream,#f6efe2);font-family:inherit;font-size:16px;line-height:1.4;max-height:130px}
.ch-envio textarea:focus{outline:none;border-color:var(--gold,#d9b26e)}
.ch-envio .btn{flex:none;align-self:flex-end;padding:12px 22px;font-size:.85rem;border-radius:999px;cursor:pointer;border:none;font-family:inherit;font-weight:800;background:linear-gradient(135deg,var(--gold-soft,#e8cf9e),var(--gold,#d9b26e));color:var(--ink,#16100b)}

/* ---- lado do administrador ---- */
.ch-admin{display:grid;grid-template-columns:290px 1fr;gap:16px;align-items:start}
.ch-lista{border:1px solid rgba(217,178,110,.16);border-radius:16px;overflow:hidden;max-height:520px;overflow-y:auto;background:rgba(0,0,0,.18)}
.ch-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:13px 14px;background:none;border:none;border-bottom:1px solid rgba(217,178,110,.1);cursor:pointer;font:inherit;color:inherit}
.ch-item:hover{background:rgba(217,178,110,.06)}
.ch-item.on{background:rgba(217,178,110,.12)}
.ch-item-txt{flex:1;min-width:0}
.ch-item-txt b{display:block;font-size:.88rem;color:var(--cream,#f6efe2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-item-txt span{display:block;font-size:.75rem;color:var(--cream-dim,#c9bda6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-item-dir{flex:none;text-align:right}
.ch-item-dir i{display:block;font-style:normal;font-size:.66rem;color:var(--cream-dim,#c9bda6)}
.ch-badge{display:inline-block;margin-top:4px;font-style:normal;background:var(--gold,#d9b26e);color:var(--ink,#16100b);font-size:.66rem;font-weight:800;padding:1px 7px;border-radius:999px}
.ch-painel{border:1px solid rgba(217,178,110,.16);border-radius:16px;overflow:hidden;background:rgba(0,0,0,.18);display:flex;flex-direction:column;min-height:300px}
.ch-painel .empty{margin:auto;color:var(--cream-dim,#c9bda6);font-size:.86rem}
.ch-painel .ch-envio .btn{background:transparent;border:1px solid var(--gold-dim,#8a7350);color:var(--gold-soft,#e8cf9e)}

@media(max-width:820px){
  .ch-admin{grid-template-columns:1fr}
  .ch-lista{max-height:260px}
  .ch-bolha{max-width:88%}
}