/* Guia visual — Fase B: tela de Conversas (21/10/2026). Usa só os tokens de app/base-visual.css.
   Seletores com #conversations / .drawer porque o index.html injeta estilos antigos durante a execução (vêm depois deste
   arquivo e venceriam com a mesma força). O modo Lista (body.tzl, app/lista.css) mantém o layout dele; aqui só cor e letra. */

/* ---------- Cartão (grade) ---------- */
#conversations:not(.list) .card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: 8px 10px;
  min-height: 0 !important; padding: 12px 14px !important;
  border: 1px solid var(--tz-outline-container) !important; border-radius: var(--tz-r-md);
  background: var(--tz-n0); box-shadow: var(--tz-shadow-sm); transform: none !important;
}
#conversations:not(.list) .card > * { grid-column: 1 / -1; min-width: 0; }
#conversations:not(.list) .card > .card-top { grid-row: 1; }
#conversations:not(.list) .card > .preview { grid-row: 2; }
/* o selo do atraso fica no canto de cima, no lugar da hora (a hora continua na dica do cartão) */
#conversations:not(.list) .card .card-top:has(.waiting-time) > .time { display: none; }
#conversations:not(.list) .card:hover { border-top-color: var(--tz-n300) !important; border-right-color: var(--tz-n300) !important; border-bottom-color: var(--tz-n300) !important; }
#conversations:not(.list) .card.selected { border-top-color: var(--tz-primary) !important; border-right-color: var(--tz-primary) !important; border-bottom-color: var(--tz-primary) !important; box-shadow: 0 0 0 3px var(--tz-primary-soft); }
#conversations .card:focus-visible { outline: 3px solid var(--tz-primary); outline-offset: 2px; }
#conversations:not(.list) .card.closed { background: var(--tz-n25); }

/* Faixa da situação no canto do cartão (pedido do Tom ao ver a prévia do Lote 2, 21/10/2026): situação num relance.
   verde = atendendo e a última palavra foi nossa; amarelo = o cliente falou e ainda não respondemos;
   vermelho = esperando há mais que a meta de resposta (settings.slaMinutes); cinza = finalizada. Vale na grade e na Lista. */
#conversations .card { --tz-tone: var(--tz-n300); }
#conversations .card.attending { --tz-tone: var(--tz-success); }
#conversations .card.waiting { --tz-tone: var(--tz-warning-bar); }
#conversations .card.overdue { --tz-tone: var(--tz-danger); }
#conversations .card.overdue:not(.selected) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tz-danger) 24%, transparent), var(--tz-shadow-sm); }
#conversations .card.closed { --tz-tone: var(--tz-n300); }
#conversations .card { position: relative; }
#conversations:not(.list) .card { border-left: 4px solid var(--tz-tone) !important; }
body.tzl #conversations.list .card { border-left: 4px solid var(--tz-tone) !important; }
#conversations .card:has(.tzv-queue) { border-left-style: dashed !important; }
#conversations .card .tzc-status-strip { position: absolute; z-index: 2; left: -4px; top: 0; bottom: 0; width: 4px; background: transparent; cursor: inherit; }

#conversations:not(.list) .card .card-top { display: flex; align-items: center; gap: 10px; }
#conversations:not(.list) .card .person { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
#conversations:not(.list) .card .person > div:not(.avatar) { min-width: 0; }
#conversations:not(.list) .card .avatar { width: 36px !important; height: 36px !important; flex: none; font-size: 12px !important; font-weight: 600; }
#conversations:not(.list) .card .name { font-size: 14px !important; font-weight: 600; color: var(--tz-n900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#conversations:not(.list) .card .sub { display: none; }
#conversations:not(.list) .card .time { flex: none; font-size: 12px !important; color: var(--tz-n500); }
#conversations:not(.list) .card .preview { min-height: 0 !important; font-size: 13px !important; line-height: 1.45; color: var(--tz-n700); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* quem atende, número e setor */
.card .owner { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; font-size: 12px; color: var(--tz-n600); }
.card .owner strong { font-weight: 500; color: var(--tz-n800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.card .owner .person-dot { display: none; }
.tzv-av { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--tz-primary-soft); color: var(--tz-primary-ink); font-size: 10px; font-weight: 600; flex: none; }
.tzv-queue { padding: 1px 8px; border-radius: var(--tz-r-pill); background: var(--tz-warning-soft); color: var(--tz-warning); font-weight: 500; }
.tzv-state { padding: 1px 8px; border-radius: var(--tz-r-pill); background: var(--tz-n100); color: var(--tz-n600); font-weight: 500; }
.tzv-sector { color: var(--tz-n500); }
.tzv-sector::before { content: '·'; margin-right: 6px; }
.card .owner .tznum-num { margin-left: 0; }

/* selo do atraso */
#conversations .card .waiting-time { display: inline-flex; align-items: center; gap: 4px; justify-self: end; width: auto; padding: 2px 8px; border-radius: var(--tz-r-pill); font-size: 12px !important; font-weight: 600; white-space: nowrap; background: var(--tz-warning-soft); color: var(--tz-warning); border: 0; }
#conversations .card .waiting-time.near { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tz-warning) 35%, transparent); }
#conversations .card .waiting-time.overdue { background: var(--tz-danger-soft); color: var(--tz-danger); }

/* rodapé: etiquetas e não lidas */
#conversations:not(.list) .card .bottom { display: flex; align-items: center; gap: 6px; min-height: 0; }
#conversations:not(.list) .card .bottom:not(:has(.chip)):not(:has(.unread)) { display: none; }
#conversations .card .chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
#conversations .card .chip { padding: 1px 8px !important; border-radius: var(--tz-r-pill) !important; font-size: 12px !important; font-weight: 500 !important; line-height: 18px; border: 0 !important; }
#conversations .card .chip.tzc-tag { background: color-mix(in srgb, var(--tag, var(--tz-primary)) 12%, transparent) !important; color: color-mix(in srgb, var(--tag, var(--tz-primary)) 80%, #000) !important; }
#conversations .card .chip.tzc-tag::before { display: none !important; }
#conversations .card .unread { margin-left: auto; min-width: 20px !important; height: 20px !important; padding: 0 6px; border-radius: var(--tz-r-pill); display: inline-grid; place-items: center; background: var(--tz-primary) !important; color: #fff; font-size: 11px !important; font-weight: 600; }

/* ---------- Modo Lista: mesmas cores e selos ---------- */
body.tzl #conversations.list .card .name { font-weight: 600; }
body.tzl #conversations.list .card .preview { color: var(--tz-n700); }
body.tzl #conversations.list .card .waiting-time { justify-self: start; }

/* ---------- Conversa aberta: cabeçalho ---------- */
.drawer .drawer-head { padding-top: 14px; padding-bottom: 12px; }
.drawer .drawer-head .name { font-size: 16px; font-weight: 600; color: var(--tz-n900); }
.drawer .drawer-head .sub { font-size: 12px; color: var(--tz-n600); }
.drawer .tzbc-chip { border-radius: var(--tz-r-pill); font-size: 12px; font-weight: 500; }
.drawer .drawer-actions .finish { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; height: 34px; padding: 0 14px; border-radius: var(--tz-r-sm); border: 1px solid var(--tz-n300); background: var(--tz-n0); color: var(--tz-success); font-weight: 600; font-size: 13px; }
.drawer .drawer-actions .finish:hover { background: var(--tz-success-soft); border-color: var(--tz-success); }
.drawer .drawer-actions .round, .drawer .tzbc-star { width: 34px; height: 34px; border-radius: var(--tz-r-md); border: 1px solid var(--tz-outline-container); background: var(--tz-n0); color: var(--tz-n600); }
/* barra de ações: "Mais" sempre por último */
.drawer .drawer-toolbar .drawer-tool { font-size: 13px; font-weight: 500; color: var(--tz-n700); }
.drawer .drawer-toolbar .drawer-tool:hover { color: var(--tz-primary); }
.drawer .drawer-toolbar .tzbc-more { order: 99; }

/* ---------- Mensagens: balões de conversa ---------- */
.drawer .drawer-body { background: var(--tz-n50); }
.drawer .bubble { border: 0 !important; box-shadow: none !important; font-size: 14px; line-height: 1.45; padding: 8px 12px !important; }
.drawer .bubble .sender-name { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; color: var(--tz-n600); }
.drawer .bubble time { display: block; margin-top: 2px; text-align: right; font-size: 11px !important; color: var(--tz-n500); }
/* Quebras de linha digitadas aparecem como vão ao WhatsApp (03/11/2026; na Lista a linha larga juntava tudo). */
.drawer .bubble > div:not([class]) { white-space: pre-wrap; overflow-wrap: anywhere; }
.drawer .bubble.client { background: var(--tz-n0) !important; color: var(--tz-n900) !important; border-radius: var(--tz-r-md) 14px 14px 4px !important; box-shadow: var(--tz-shadow-sm) !important; }
.drawer .bubble.agent, .drawer .bubble.mine { background: #dcebff !important; color: var(--tz-n900) !important; border-radius: var(--tz-r-md) 14px 4px 14px !important; }
.drawer .bubble.agent .sender-name, .drawer .bubble.mine .sender-name { color: var(--tz-primary-ink); }
.drawer .bubble.note:not(.tzm-auto) { background: var(--tz-warning-soft) !important; color: #7a3e06 !important; border-radius: var(--tz-r-sm) !important; }
.drawer .bubble.note:not(.tzm-auto) .sender-name { color: var(--tz-warning); }

/* ---------- Caixa de escrever ---------- */
.drawer .composer { gap: 6px; border-top: 1px solid var(--tz-outline-divider); background: var(--tz-n0); }
.drawer .composer .round, .drawer .composer .quick-reply, .drawer .composer .audio-button, .drawer .composer .tzas-btn { width: 36px; height: 36px; border-radius: var(--tz-r-sm) !important; border: 0 !important; background: transparent !important; color: var(--tz-n600) !important; }
.drawer .composer .round:hover, .drawer .composer .quick-reply:hover, .drawer .composer .audio-button:hover, .drawer .composer .tzas-btn:hover { background: var(--tz-n100) !important; color: var(--tz-n900) !important; }
.drawer .composer .tzas-btn[aria-pressed="true"] { color: var(--tz-primary) !important; }
.drawer .composer .composer-mode { height: 30px; padding: 0 10px; border-radius: var(--tz-r-pill) !important; border: 1px solid var(--tz-n300) !important; background: var(--tz-n0) !important; color: var(--tz-n700) !important; font-size: 12px; font-weight: 500; white-space: nowrap; }
.drawer .composer .composer-mode.internal-mode { border-color: #f2c97d !important; background: var(--tz-warning-soft) !important; color: var(--tz-warning) !important; }
.drawer .composer textarea { border: 1px solid var(--tz-n300) !important; border-radius: var(--tz-r-md) !important; background: var(--tz-n0) !important; font-size: 14px; }
.drawer .composer textarea:focus { border-color: var(--tz-primary) !important; outline: 3px solid var(--tz-primary-soft); }
.drawer .composer .send { width: 40px; height: 40px; border-radius: 50% !important; background: var(--tz-primary) !important; color: #fff !important; }
.drawer .composer .send:hover { background: var(--tz-primary-hover) !important; }

/* ---------- Celular: um cartão por linha ----------
   Com dois por linha, o selo do atraso espremia o nome do cliente até "C... A..." (revisão de usabilidade, item 17). */
@media (max-width: 760px) {
  #conversations:not(.list) { grid-template-columns: 1fr !important; }
  #conversations:not(.list) .card .name { white-space: nowrap !important; display: block !important; -webkit-line-clamp: unset !important; }
  /* cabeçalho da conversa: selos quebram linha em vez de cortar; o convite "Ligar a uma empresa" fica no Cadastro */
  .drawer .tzbc-chips .tzbc-chip.ghost { display: none !important; }
  .drawer .tzbc-chips .tznum-phone, .drawer .tzbc-chips .tznum-label { display: none; }
}

/* ---------- Tema escuro (Grafite): balões e cartões com as cores do tema ---------- */
body[data-theme="graphite"] #conversations .card .chip.tzc-tag { background: color-mix(in srgb, var(--tag, var(--tz-primary)) 24%, transparent) !important; color: color-mix(in srgb, var(--tag, var(--tz-primary)) 45%, #fff) !important; }
body[data-theme="graphite"] .drawer .drawer-head .name { color: var(--ink); }
body[data-theme="graphite"] .drawer .drawer-head .sub, body[data-theme="graphite"] .drawer .drawer-toolbar .drawer-tool { color: var(--muted); }
body[data-theme="graphite"] .drawer .bubble .sender-name, body[data-theme="graphite"] .drawer .bubble time { color: var(--muted); }
body[data-theme="graphite"] .drawer .bubble.agent .sender-name, body[data-theme="graphite"] .drawer .bubble.mine .sender-name { color: #9cc6ff; }
body[data-theme="graphite"] .tzv-av { background: #1f3b63; color: #cfe2ff; }
body[data-theme="graphite"] .card .owner { color: var(--muted); }
body[data-theme="graphite"] #conversations:not(.list) .card { background: var(--surface); border-top-color: var(--line) !important; border-right-color: var(--line) !important; border-bottom-color: var(--line) !important; }
body[data-theme="graphite"] #conversations:not(.list) .card .name { color: var(--ink); }
body[data-theme="graphite"] #conversations:not(.list) .card .preview, body[data-theme="graphite"] .card .owner strong { color: var(--ink); }
body[data-theme="graphite"] .drawer .drawer-body { background: var(--bg); }
body[data-theme="graphite"] .drawer .bubble.client { background: var(--surface) !important; color: var(--ink) !important; }
body[data-theme="graphite"] .drawer .bubble.agent, body[data-theme="graphite"] .drawer .bubble.mine { background: #1f3b63 !important; color: var(--ink) !important; }
body[data-theme="graphite"] .drawer .composer, body[data-theme="graphite"] .drawer .composer textarea, body[data-theme="graphite"] .drawer .composer .composer-mode { background: var(--surface) !important; color: var(--ink) !important; border-color: var(--line) !important; }
body[data-theme="graphite"] .drawer .drawer-actions .finish, body[data-theme="graphite"] .drawer .drawer-actions .round, body[data-theme="graphite"] .drawer .tzbc-star { background: var(--surface); border-color: var(--line); }