/* Melhorias da tela de Conversas (app/conversas.js). O layout de cards/lista + gaveta é mantido. */

:root { --tzc-drawer-w: clamp(420px, 40vw, 640px); }

/* ---------- Tela dividida: a conversa abre ao lado dos cards, sem cobrir nem escurecer ---------- */
@media (min-width: 1000px) {
  .drawer { top: var(--tzc-top, 60px); width: var(--tzc-drawer-w); box-shadow: -1px 0 0 var(--line), -14px 0 30px #1720330d; }
  .open .backdrop { opacity: 0 !important; pointer-events: none !important; }
  .content { transition: padding-right .25s; }
  body.open .content { padding-right: calc(var(--tzc-drawer-w) + 20px); }
  body.open .conversations,
  body.open .conversations.compact { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
  body.open .list .card { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 12px; }
  body.open .list .preview { width: 100%; }
  body.open .toolbar { flex-wrap: wrap; }
}

/* ---------- Cada linha da grade com a altura do próprio conteúdo ----------
   A grade tem altura fixa (rola por dentro) e, com linhas "auto", o navegador comprimia as linhas para caber: com a conversa
   aberta (3 colunas, textos quebrando) o cartão ficava com 147 px e o conteúdo de 173 px vazava por cima do de baixo
   (revisão de 21/10/2026). Com max-content a linha cresce e a grade rola. */
.conversations:not(.list) { grid-auto-rows: max-content; }

/* ---------- Rolagem da lista/grade ----------
   O index.html usava overflow:hidden no modo lista, o que impedia rolar até os últimos atendimentos. */
@media (min-width: 761px) {
  .content .conversations,
  .content .conversations.list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
  .content .conversations.list { align-self: stretch; }
}

/* ---------- Barra de ferramentas mais enxuta ---------- */
.toolbar.tzc-toolbar .themes,
.toolbar.tzc-toolbar .switch,
.toolbar.tzc-toolbar .density { display: none !important; }
.content .stats { display: none !important; }
#waitThreshold { width: 52px !important; min-width: 52px; padding: 0 6px !important; text-align: center; }
.team-filter.tzc-late-filter .dot { background: #dc5656; }
.team-filter.tzc-late-filter.active { border-color: #dc5656; color: #b83232; background: #fde2e2; }
.conversations.tzc-late-only .card:not([data-late]) { display: none; }
.tzc-menu { position: fixed; z-index: 1000; min-width: 190px; padding: 4px; background: var(--surface, #fff); color: var(--ink); border: 1px solid var(--tz-outline-container); border-radius: var(--tz-r-md); box-shadow: 0 12px 30px #0f172a26; font-size: 12px; }
.tzc-menu button { display: flex; align-items: center; gap: 6px; width: 100%; padding: 7px 10px; border: 0; border-radius: 7px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.tzc-menu button:hover { background: var(--blue2); color: var(--blue); }
.tzc-menu .sp { display: inline-block; width: 12px; }
.tzc-menu hr { border: 0; border-top: 1px solid var(--tz-outline-divider); margin: 4px 0; }

/* ---------- Cards ---------- */
.tzc-who { font-weight: 700; color: var(--ink); opacity: .78; }
.tzc-ticks { font-size: 11px; letter-spacing: -2px; color: var(--muted); white-space: nowrap; }
.tzc-ticks.read { color: #1d9bf0; }
.tzc-ticks.failed { color: #d14343; letter-spacing: 0; }
.tzc-chip { display: inline-flex; align-self: flex-start; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 20px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.tzc-chip.warn { background: var(--amber2, #fff3d7); color: var(--amber, #b97608); }
.tzc-chip.muted { background: var(--line); color: var(--muted); }
.tzc-mention { background: var(--blue2); color: var(--blue); border-radius: 4px; padding: 0 3px; font-weight: 700; }
.preview a { color: var(--blue); }

/* ---------- Gaveta ---------- */
.drawer-body > .day { display: none; }                       /* data fixa antiga do HTML */
body.tzc-has-window-banner .drawer-body > .internal { display: none; } /* responsável agora fica no aviso da janela */
.tzc-badge { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 10px; background: var(--panel); color: var(--muted); }

/* ---------- Aceitar atendimento (app/conversas.js) ---------- */
.tzc-accept-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 16px; border-top: 1px solid var(--tz-outline-divider); background: var(--amber2, #fff3d7); color: var(--ink); font-size: 13px; }
.tzc-accept-bar.other { background: var(--panel); color: var(--muted); padding-bottom: 8px; font-size: 12px; }
.tzc-accept-bar button { border: 0; border-radius: 9px; background: var(--blue); color: #fff; font-weight: 700; font-size: 13px; padding: 8px 14px; cursor: pointer; }
.tzc-accept-bar button:disabled { opacity: .6; }
@media (max-width: 760px) { .tzc-accept-bar { padding: 8px 10px; } .tzc-accept-bar button { flex: 1 1 100%; padding: 10px; } }

/* ---------- Respostas rápidas (/) e menções (@) ---------- */
.composer { position: relative; }
.tzc-popup { position: absolute; left: 12px; right: 12px; bottom: calc(100% + 4px); z-index: 30; max-height: 260px; overflow-y: auto; padding: 4px; background: var(--surface, #fff); color: var(--ink); border: 1px solid var(--tz-outline-container); border-radius: var(--tz-r-md); box-shadow: 0 12px 30px #0f172a26; }
.tzc-popup-title { padding: 6px 10px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.tzc-popup button { display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: 7px; background: transparent; color: inherit; font-size: 13px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.tzc-popup button.on, .tzc-popup button:hover { background: var(--blue2); color: var(--blue); }

/* ---------- Ações nas mensagens (app/mensagens.js) ---------- */
#historyFeed .bubble { position: relative; }
.tzm-actions { position: absolute; top: -14px; right: 8px; display: none; gap: 2px; padding: 2px; border: 1px solid var(--tz-outline-container); border-radius: var(--tz-r-md); background: var(--surface); box-shadow: 0 4px 12px #0f172a1f; z-index: 3; }
.tzm-actions button { width: 28px; height: 26px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; font-size: 14px; }
.tzm-actions button:hover { background: var(--blue2); }
@media (hover: hover) { #historyFeed .bubble:hover > .tzm-actions { display: flex; } }
#historyFeed .bubble.tzm-show > .tzm-actions { display: flex; }
.tzm-quote { display: flex; flex-direction: column; gap: 1px; width: 100%; margin: 2px 0 6px; padding: 5px 8px; border: 0; border-left: 3px solid var(--blue); border-radius: 6px; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); text-align: left; font: inherit; font-size: 12px; cursor: pointer; }
.tzm-quote b { font-size: 11.5px; color: var(--blue); }
.tzm-quote span { color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tzm-reacts { position: absolute; bottom: -12px; right: 10px; display: flex; gap: 1px; padding: 1px 5px; border: 1px solid var(--tz-outline-container); border-radius: var(--tz-r-md); background: var(--surface); font-size: 13px; }
#historyFeed .bubble:has(.tzm-reacts) { margin-bottom: 18px; }
.tzm-deleted-text { font-style: italic; color: var(--muted); font-size: 12.5px; }
.tzm-flash { animation: tzm-flash 1.2s; }
@keyframes tzm-flash { 0%, 60% { box-shadow: 0 0 0 3px var(--blue); } 100% { box-shadow: none; } }
.tzm-picker { position: fixed; z-index: 3000; display: flex; gap: 2px; padding: 4px; border: 1px solid var(--tz-outline-container); border-radius: var(--tz-r-md); background: var(--surface); box-shadow: 0 10px 26px #0f172a33; }
.tzm-picker button { width: 34px; height: 34px; border: 0; border-radius: 999px; background: transparent; font-size: 19px; cursor: pointer; }
.tzm-picker button.on, .tzm-picker button:hover { background: var(--blue2); }
.tzm-reply-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--tz-outline-divider); border-left: 4px solid var(--blue); background: var(--panel); font-size: 12.5px; }
.tzm-reply-bar div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tzm-reply-bar b { color: var(--blue); }
.tzm-reply-bar span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tzm-reply-bar button { border: 0; background: none; cursor: pointer; font-size: 15px; color: var(--muted); }
#historyFeed .media-image { cursor: zoom-in; }
.tzm-viewer { position: fixed; inset: 0; z-index: 4000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; background: #0b1020e6; }
.tzm-viewer img { max-width: 100%; max-height: calc(100dvh - 90px); object-fit: contain; border-radius: 8px; }
.tzm-viewer-bar { display: flex; gap: 10px; }
.tzm-viewer-bar a, .tzm-viewer-bar button { padding: 9px 14px; border: 0; border-radius: 9px; background: #fff; color: #172033; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.tzm-file-hidden { position: fixed !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }

/* Barra de envio acima da caixa de mensagem (app/arquivos.js) */
.tzup { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--tz-outline-divider); background: var(--surface); font-size: 12.5px; color: var(--ink); }
.tzup[hidden] { display: none; }
.tzup-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tzup-track { position: relative; flex: 1; min-width: 80px; height: 6px; overflow: hidden; border-radius: 99px; background: var(--line); }
.tzup-track i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 99px; background: var(--blue, var(--blue)); transition: width .2s; }
.tzup.busy .tzup-track i { width: 35% !important; animation: tzup-slide 1.1s ease-in-out infinite; }
@keyframes tzup-slide { from { left: -35%; } to { left: 100%; } }
.tzup-cancel { padding: 4px 10px; border: 1px solid var(--tz-outline-container); border-radius: var(--tz-r-md); background: transparent; color: var(--ink); font-size: 12px; font-weight: 700; cursor: pointer; }
.tzup-cancel[hidden] { display: none; }

/* Mensagem enviando (🕓) / não enviada (⚠) na gaveta (app/arquivos.js e app/conversas.js) */
.bubble.tzsend-temp { opacity: .75; }
.bubble.tzsend-temp.failed { opacity: 1; border: 1px solid #f1b5b5; }
.bubble.tzsend-temp time { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
.tzsend-fail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed #f1b5b5; color: #b83232; font-size: 12px; font-weight: 600; }
.tzsend-fail span { flex: 1 1 100%; }
.tzsend-fail button { padding: 4px 10px; border: 1px solid #f1b5b5; border-radius: 7px; background: #fff; color: #b83232; font-size: 12px; font-weight: 700; cursor: pointer; }
.tzsend-fail button:first-of-type { background: #b83232; border-color: #b83232; color: #fff; }

/* Prévia antes de enviar: escolher arquivo, Ctrl+V ou arrastar (app/arquivos.js) */
.tzpv { width: min(560px, 100%); outline: none; }
.tzpv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 55vh; overflow-y: auto; margin-bottom: 10px; }
.tzpv-item { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--tz-outline-container); border-radius: var(--tz-r-md); background: var(--panel); }
.tzpv-item img, .tzpv-item video { width: 100%; height: 130px; object-fit: contain; background: #0f172a0d; }
.tzpv-icon { display: grid; place-items: center; height: 130px; font-size: 44px; }
.tzpv-name { padding: 6px 8px; font-size: 12px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tzpv-name small { display: block; color: var(--muted); font-weight: 500; }
.tzf-modal .tzpv-remove { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; padding: 0; border-radius: 50%; background: #0f172acc; color: #fff; font-size: 12px; }
body.tzpv-drag .drawer { outline: 3px dashed var(--blue, var(--blue)); outline-offset: -8px; }

/* Etiquetas com a cor cadastrada (tela Tags) e filtro por etiqueta (app/conversas.js) */
.chip.tzc-tag { background: color-mix(in srgb, var(--tag) 14%, var(--surface, #fff)); color: color-mix(in srgb, var(--tag) 75%, #000); border: 1px solid color-mix(in srgb, var(--tag) 45%, transparent); }
.chip.tzc-tag::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: var(--tag); vertical-align: 1px; }
body[data-theme="graphite"] .chip.tzc-tag { color: color-mix(in srgb, var(--tag) 55%, #fff); background: color-mix(in srgb, var(--tag) 22%, transparent); }
.card.tzc-tag-hidden { display: none !important; }
.team-filter.tzc-tag-filter { max-width: 200px; padding-right: 8px; cursor: pointer; }
/* Respostas rápidas com anexo (app/respostas.js) */
.tzqr-attach { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
.tzqr-file { font-size: 12px; font-weight: 700; color: var(--blue, var(--blue)); max-width: 180px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* "Fulano está vendo / digitando" (app/conversas.js) */
.tzc-presence { padding: 6px 14px; background: color-mix(in srgb, var(--blue, var(--blue)) 9%, var(--surface, #fff)); color: var(--ink); font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--tz-outline-divider); }
.tzc-presence.typing { background: color-mix(in srgb, #f59e0b 14%, var(--surface, #fff)); }
.tzc-viewing { margin-left: auto; padding: 1px 7px; border-radius: 99px; background: color-mix(in srgb, var(--blue, var(--blue)) 12%, transparent); color: var(--blue, var(--blue)); font-size: 10.5px; font-weight: 800; white-space: nowrap; }

/* Contador da janela de 24 h fica fixo no topo da conversa ao rolar as mensagens */
#customerWindowBannerTomZap { position: sticky; top: 0; z-index: 4; box-shadow: 0 4px 10px #0f172a14; }

/* Linha do tempo: atendimentos anteriores (app/conversas.js) */
.tzc-old-wrap { display: flex; flex-direction: column; gap: 10px; }
.tzc-old-more { align-self: center; padding: 8px 16px; border: 1px solid var(--tz-outline-container); border-radius: var(--tz-r-md); background: var(--surface); color: var(--ink); font-size: 12.5px; font-weight: 800; letter-spacing: .02em; cursor: pointer; box-shadow: 0 1px 2px #0f172a14; }
.tzc-old-more:disabled { opacity: .6; cursor: default; }
.bubble.tzc-old { opacity: .85; }
.tzc-old-sep { align-self: center; max-width: 92%; padding: 4px 12px; border-radius: 99px; background: color-mix(in srgb, var(--blue, var(--blue)) 10%, var(--surface, #fff)); color: var(--ink); font-size: 11.5px; font-weight: 700; text-align: center; }
.tzc-old-sep.now { background: color-mix(in srgb, #16a34a 14%, var(--surface, #fff)); }