/* ZapSet - Admin UI (Design System)
   Paleta oficial:
   - Tech Blue: #1F3C88
   - Zap Green: #2ECC71
   - Teal Tech: #16A085
   - Neutros: dark #0F172A | gray #334155 | light #F8FAFC | border #E2E8F0
*/
:root{
  --primary:#1F3C88;
  --secondary:#2ECC71;
  --teal:#16A085;
  --danger:#EF4444;

  --link: var(--primary);

  --radius:10px;

  --bg:#F8FAFC;
  --surface:#FFFFFF;
  --surface2:#F1F5F9;
  --text:#0F172A;
  --muted:#475569;
  --border:#E2E8F0;

  --shadow: 0 10px 28px rgba(15, 23, 42, .08);
  --shadow-sm: 0 6px 18px rgba(15, 23, 42, .06);

  --focus: 0 0 0 3px rgba(46, 204, 113, .25);
}

html[data-theme="dark"]{
  --link:#93C5FD;
  --bg:#0F172A;
  --surface:#020617;
  --surface2:#162037;
  --text:#E5E7EB;
  --muted:#94A3B8;
  --border:#1E293B;

  --shadow: 0 10px 28px rgba(0,0,0,.35);
  --shadow-sm: 0 6px 18px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 15% 0%, rgba(46,204,113,.20), transparent 60%),
    radial-gradient(900px 520px at 85% 0%, rgba(31,60,136,.18), transparent 55%),
    var(--bg);
}

/* Links */
a{color:inherit}
.link{
  color: var(--link);
  text-decoration: none;
}
.link:hover{text-decoration: underline}

/* Topbar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  background: color-mix(in srgb, var(--surface), transparent 6%);
  backdrop-filter: blur(10px);
}

.brandLink{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
}
.brandIcon{
  width:34px;
  height:34px;
  display:block;
}
html[data-theme="dark"] .brandIcon{
  filter: brightness(0) invert(1);
}
.brandText{
  font-weight: 700;
  letter-spacing: .2px;
}

.right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
  text-align:right;
}

.muted{color:var(--muted)}
.small{font-size:12px}

/* Layout */
.grid{
  display:grid;
  grid-template-columns: 1fr 1.4fr;
  gap:14px;
  padding:14px;
}
@media (max-width: 980px){
  .grid{grid-template-columns: 1fr}
}
.col{display:flex;flex-direction:column;gap:14px}

/* Cards */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding:16px;
  box-shadow: var(--shadow-sm);
}
.card2{
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding:14px;
}
.h1{font-size:22px;font-weight:700;margin:0 0 6px}
.h2{font-size:16px;font-weight:700;margin:0 0 4px}
.h3{font-size:14px;font-weight:700;margin:0 0 10px}

/* Controls */
input,select,textarea{
  width: 100%;
  background: var(--surface);
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 12px;
  border-radius: var(--radius);
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea{min-height:84px;resize:vertical}
input:focus,select:focus,textarea:focus{
  border-color: var(--border);
  box-shadow: var(--focus);
}

.inline{display:inline-flex;gap:8px;align-items:center}
.actions{display:flex;gap:8px;flex-wrap:wrap}

/*
  Icon buttons
  -------------
  IMPORTANT:
  - .btn é um botão "primário" (ex.: Salvar / Assumir / Enviar)
  - .iconBtn (e .btn2/.pill quando usados como ícone) são botões quadrados 34x34
  Durante melhorias anteriores, .btn acabou herdando o estilo de ícone, e
  botões de ação na dashboard ficaram "quadradinhos" (texto sumindo).
*/
.btn2,.pill,.iconBtn{
  width: 34px;
  height: 34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease, opacity .15s ease;
}

/*
  Botão primário (padrão "Salvar")
  - Mantém compatibilidade com o sistema todo sem criar novas classes.
  - Não interfere nos ícones porque eles usam .iconBtn.
*/
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: auto;
  height: auto;
  padding: 14px 22px;
  border-radius: 14px;

  background: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary), #000 10%);
  color: #fff;
  font-weight: 800;
  letter-spacing: .2px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, opacity .15s ease;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  filter: brightness(1.03);
}
.btn:active{
  transform: translateY(0);
  box-shadow: none;
}
.btn:focus-visible{
  outline: none;
  box-shadow: var(--focus);
}
.btn:disabled{
  opacity: .65;
  cursor: not-allowed;
}
.iconBtn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: color-mix(in srgb, var(--teal), var(--border) 65%);
  background: var(--surface2);
}
.iconBtn:active{
  transform: translateY(0);
  box-shadow: none;
}
.iconBtn:focus-visible{
  outline: none;
  box-shadow: var(--focus);
}
.icon{
  width:18px;
  height:18px;
  display:block;
}

/* Lists */
.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  margin-bottom:8px;
  background: color-mix(in srgb, var(--surface), var(--teal) 2%);
}

.ticket{
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  margin-bottom:8px;
  background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.ticket:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: color-mix(in srgb, var(--primary), var(--border) 65%);
}
.ticketLink{text-decoration:none;color:inherit;display:block}

/* =============================
   Tickets (fila) - layout compacto (Outlook-like)
   Objetivo: alta densidade de informação, responsivo
============================= */
.card.card-tickets .ticket{
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 12px;
}
.card.card-tickets .ticket:hover{
  transform: none; /* evita “pular” e gastar espaço visual */
}

/* quebra inteligente: se não couber, vai pra linha de baixo (desktop e mobile) */
.zs-ticketRow{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* conteúdo principal ocupa o máximo e pode quebrar */
.zs-ticketMain{
  flex: 1 1 320px; /* cresce, encolhe, e quebra se precisar */
  min-width: 0;
}

/* Meta da direita: permite quebra do nome do atendente em linha de baixo quando necessário */
.zs-ticketMeta{
  display: flex;            /* não inline-flex */
  flex-direction: row;
  flex-wrap: wrap;          /* permite quebrar */
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  margin-left: auto;        /* mantém à direita quando cabe */
  max-width: 42%;           /* limita a coluna da direita em telas médias */
  min-width: 220px;         /* evita ficar pequeno demais */
}

/* Nome do atendente: pode quebrar pra linha de baixo */
.zs-ticketAttendant{
  flex: 1 1 140px;          /* deixa “cair” quando precisar */
  min-width: 0;
  white-space: nowrap;      /* mantém 1 linha */

  text-overflow: ellipsis;  /* se for muito grande */
}

/* Badge do status: não quebra */
.zs-ticketStatus{
  flex: 0 0 auto;
}


.zs-ticketTop{
  display: flex;
  flex-wrap: wrap;        /* <- permite pular para baixo */
  gap: 8px;
  align-items: baseline;
  min-width: 0;
}


.zs-ticketId{
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
}
.zs-ticketPhone{
  font-weight: 600;
  white-space: nowrap;
}
.zs-ticketReason{
  color: var(--muted);
  font-size: 12px;
  min-width: 0;

  /* permite cair pra linha de baixo sem “encavalar” */
  flex: 1 1 240px;

  /* mantém 1 linha com ellipsis, mesmo quando vira a linha de baixo */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;

}


.zs-ticketBottom{
  margin-top: 2px;
  display:flex;
  gap: 8px;
  align-items:center;
  min-width:0;
}
.zs-slaLabel{
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.zs-slaOk{color: color-mix(in srgb, var(--teal), var(--text) 35%);}
.zs-slaOver{color: var(--danger);}
.zs-slaDetail{
  font-size: 12px;
  color: var(--muted);
  min-width:0;
  white-space: nowrap;

  text-overflow: ellipsis;
}


.zs-statusPill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface), var(--primary) 4%);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  text-transform: lowercase;
}
.zs-attName{
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

/* Status variants (safe default) */
.zs-st--open{
  border-color: color-mix(in srgb, var(--teal), var(--border) 50%);
  background: color-mix(in srgb, var(--surface), var(--teal) 10%);
}
.zs-st--assigned{
  border-color: color-mix(in srgb, var(--primary), var(--border) 55%);
  background: color-mix(in srgb, var(--surface), var(--primary) 10%);
}
.zs-st--closed{
  opacity: .75;
}

@media (max-width: 680px){
  .zs-ticketRow{grid-template-columns: 1fr}
  .zs-ticketMeta{justify-content:flex-start}
  .zs-slaDetail{max-width:100%}
}

/* Chat */
.chat{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:55vh;
  overflow:auto;
  padding-right:6px;
}
.bubble{
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  background: var(--surface);
}
.bubble.user{border-left:4px solid var(--primary)}
.bubble.assistant{border-left:4px solid var(--secondary)}
.bubble.system{border-left:4px solid #F59E0B}

.send{display:flex;gap:10px;margin-top:10px}
.send textarea{flex:1}
/* Attachments (composer) */
.zs-attachBtn{
  border-color: var(--border);
}
.zs-attachBtn:hover{
  border-color: color-mix(in srgb, var(--primary), var(--border) 60%);
  background: color-mix(in srgb, var(--surface), var(--primary) 6%);
}
.zs-attachPreview{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}
.zs-attachItem{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  border-radius:14px;
  padding:6px 8px;
  background: color-mix(in srgb, var(--surface), var(--primary) 3%);
  max-width:100%;
}
.zs-attachThumb{
  width:32px;
  height:32px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid var(--border);
  flex:0 0 auto;
}
.zs-attachFileIcon{
  width:32px;
  height:32px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--surface), var(--secondary) 6%);
  flex:0 0 auto;
  font-size:16px;
}
.zs-attachMeta{min-width:0}
.zs-attachName{
  font-size:12px;
  font-weight:600;
  line-height:1.1;
  max-width:240px;
  white-space:nowrap;

  text-overflow:ellipsis;
}
.zs-attachSize{
  font-size:11px;
  opacity:.75;
  margin-top:2px;
}
.zs-attachRemove{
  border:1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  width:26px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex:0 0 auto;
}
.zs-attachRemove:hover{
  border-color: color-mix(in srgb, var(--danger), var(--border) 60%);
  background: color-mix(in srgb, var(--surface), var(--danger) 6%);
}

/* SLA */
.ticketOverdue{
  border-color: color-mix(in srgb, var(--danger), var(--border) 45%) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .10);
}
.ticketOverdue:hover{
  border-color: color-mix(in srgb, var(--danger), var(--border) 30%) !important;
}

/* Toast */
.toast{
  position: fixed;
  right: 16px;
  bottom: 16px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  max-width: calc(100vw - 32px);
}
.toast.show{
  opacity: 1;
  transform: translateY(0);
}


/* ================================
   STATUS ATENDENTE – DARK MODE
================================ */

[data-theme="dark"] .status-btn {
  background-color: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

/* DISPONÍVEL */
[data-theme="dark"] .status-btn.available {
  border-color: #2ECC71;
  color: #2ECC71;
}

/* INDISPONÍVEL */
[data-theme="dark"] .status-btn.unavailable {
  border-color: #EF4444;
  color: #EF4444;
}

[data-theme="dark"] .status-btn.unavailable:hover {
  background: rgba(239, 68, 68, 0.12);
}

/* =========================================
   Status badge (Atendentes) - pill with dot
   (Used on dashboard attendants availability)
========================================= */
.status-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-weight:600;
  line-height:1;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.status-badge::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(31,60,136,.08);
}
.status-badge:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.status-badge:active{
  transform: translateY(0);
  box-shadow: none;
}
.status-badge.available{
  color: var(--secondary);
  border-color: rgba(46, 204, 113, .45);
  background: rgba(46, 204, 113, .08);
}
.status-badge.unavailable{
  color: var(--danger);
  border-color: rgba(239, 68, 68, .45);
  background: rgba(239, 68, 68, .08);
}

/* Dark mode tuning */
[data-theme="dark"] .status-badge{
  background: rgba(255,255,255,.03);
  border-color: rgba(226,232,240,.14);
}
[data-theme="dark"] .status-badge.available{
  border-color: rgba(46, 204, 113, .55);
  background: rgba(46, 204, 113, .10);
}
[data-theme="dark"] .status-badge.unavailable{
  border-color: rgba(239, 68, 68, .55);
  background: rgba(239, 68, 68, .10);
}


/* =========================================================
   ZapSet Auth Pages (login/forgot/reset) – FIX (scoped)
   - This block is SAFE to append at the END of style.css
   - Scoped to .auth-page to avoid affecting dashboard/admin UI
   ========================================================= */

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg, #F8FAFC);
  color: var(--text, #0F172A);
}

.auth-page .auth-center {
  width: 100%;
  max-width: 600px; /* matches public/index.php card feel */
}

.auth-page .auth-card {
  width: 100%;
  border: 1px solid var(--border, #E2E8F0);
  border-radius: 16px;
  background: var(--card, #FFFFFF);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
  padding: clamp(18px, 3vw, 28px);
}


.auth-page .auth-logo {
  display: flex;
  justify-content: center;
  margin: 0 0 16px 0;
}

.auth-page .auth-logo img {
  width: 100%;
  max-width: 200px;
  height: auto;
}


.auth-page .auth-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 8px 0 14px;
  text-align: center;
}

.auth-page .auth-subtitle {
  text-align: center;
  color: var(--muted, #475569);
  margin-bottom: 14px;
}

.auth-page form {
  display: grid;
  gap: 12px;
}

.auth-page input[type="text"],
.auth-page input[type="email"],
.auth-page input[type="password"],
.auth-page input[type="tel"]{
  width: 100%;
  border: 1px solid var(--border, #E2E8F0);
  border-radius: 10px;
  padding: 12px 12px;
  font-size: 0.98rem;
  background: #fff;
}

.auth-page .btnPrimary,
.auth-page button[type="submit"],
.auth-page .btn {
  border-radius: 10px;
}

/* Alerts (errors highlighted in red + bold) */
.alert {
  border: 1px solid var(--border, #E2E8F0);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 0 12px;
  font-weight: 600;
}

.alert--error {
  border-color: rgba(239, 68, 68, 0.45);
  color: #B91C1C;
  background: rgba(239, 68, 68, 0.10);
}

/* Dark theme support for auth pages */
[data-theme="dark"] .auth-page {
  background: var(--bg, #0F172A);
  color: var(--text, #E5E7EB);
}

[data-theme="dark"] .auth-page .auth-card {
  background: var(--card, #020617);
  border-color: rgba(148, 163, 184, 0.18);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .auth-page input[type="text"],
[data-theme="dark"] .auth-page input[type="email"],
[data-theme="dark"] .auth-page input[type="password"],
[data-theme="dark"] .auth-page input[type="tel"]{
  background: rgba(15, 23, 42, 0.65);
  border-color: rgba(148, 163, 184, 0.18);
  color: var(--text, #E5E7EB);
}

[data-theme="dark"] .auth-page input::placeholder {
  color: rgba(226, 232, 240, 0.55);
}

[data-theme="dark"] .alert--error {
  color: #FCA5A5;
  border-color: rgba(239, 68, 68, 0.55);
  background: rgba(239, 68, 68, 0.12);
}


/* --- Fix definitivo do tamanho do logo nas telas de auth --- */
.auth-page .auth-logo img,
.auth-page img.auth-logo {
  width: 100% !important;
  max-width: 200px !important; /* teste 180px se quiser menor */
  height: auto !important;
}

/* Se por acaso o container também estiver “esticando” */
.auth-page .auth-logo {
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
}


/* Ticket ativo (forçado para funcionar no mobile também) */
.ticketLink.isActive{
  display: block !important;
  width: 100% !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;

  border-left: 4px solid var(--accent, #4f7cff) !important;
  background: rgba(79, 124, 255, 0.12) !important;

  /* deixa MUITO visível mesmo em telas pequenas */
  box-shadow: 0 0 0 1px rgba(79, 124, 255, 0.25) inset !important;
}

/* Tema escuro */
html[data-theme="dark"] .ticketLink.isActive,
body[data-theme="dark"] .ticketLink.isActive{
  background: rgba(79, 124, 255, 0.18) !important;
  border-left-color: var(--accent, #7aa2ff) !important;
}


/* Encerrar ticket — igual ao "Indisponível", sem dot */
.status-badge.ticket-close{
  background: transparent !important;
  border: 1.5px solid var(--danger) !important;
  color: var(--danger) !important;

  font-weight: 600;
  border-radius: 999px;
  padding: 6px 14px;

  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: 100%;
  white-space: nowrap;
  justify-content: center;
  gap: 8px;

  cursor: pointer;
  transition: all .2s ease;
}

/* Hover */
.status-badge.ticket-close:hover{
  background: rgba(229, 83, 83, 0.12) !important;
  border-color: color-mix(in srgb, var(--danger), white 22%) !important;
  color: color-mix(in srgb, var(--danger), white 22%) !important;
}

/* Tema escuro */
html[data-theme="dark"] .status-badge.ticket-close,
body[data-theme="dark"] .status-badge.ticket-close{
  border-color: color-mix(in srgb, var(--danger), white 22%) !important;
  color: color-mix(in srgb, var(--danger), white 22%) !important;
}

html[data-theme="dark"] .status-badge.ticket-close:hover,
body[data-theme="dark"] .status-badge.ticket-close:hover{
  background: rgba(255, 107, 107, 0.15) !important;
}

/* REMOVE QUALQUER DOT herdado */
.status-badge.ticket-close::before,
.status-badge.ticket-close::after{
  content: none !important;
  display: none !important;
}


/* =========================================================
   ZapSet UI – Buttons (namespaced)
   - Only ADDITIONS (safe). Does not change existing classes.
   Usage examples:
     <button class="zs-pill md zs-outline-danger zs-no-dot">Encerrar ticket</button>
     <button class="zs-pill md zs-outline-success"><span class="zs-dot success"></span>Disponível</button>
   ========================================================= */

:root{
  --zs-radius-pill: 999px;
  --zs-radius-md: 12px;

  /* map to existing theme tokens when possible */
  --zs-primary: var(--primary);
  --zs-success: var(--secondary);
  --zs-teal: var(--teal);
  --zs-danger: var(--danger);

  /* derived */
  --zs-accent: var(--zs-primary);
  --zs-focus: var(--focus);
}

/* Base */
.zs-pill{
  appearance: none;
  border: 1.5px solid transparent;
  border-radius: var(--zs-radius-pill);
  padding: 6px 14px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: 100%;
  white-space: nowrap;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .05s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.zs-pill:active{ transform: translateY(1px); }
.zs-pill:disabled{ opacity:.65; cursor:not-allowed; }

/* Sizes */
.zs-pill.sm{ padding: 5px 12px; font-size: 13px; }
.zs-pill.md{ padding: 6px 14px; font-size: 14px; }
.zs-pill.lg{ padding: 8px 16px; font-size: 15px; }

/* Focus */
.zs-pill:focus-visible{
  outline: none;
  box-shadow: var(--zs-focus);
}

/* Outline variants */
.zs-outline-primary{
  background: transparent;
  border-color: color-mix(in srgb, var(--zs-accent), transparent 55%);
  color: var(--zs-accent);
}
.zs-outline-primary:hover{
  background: color-mix(in srgb, var(--zs-accent), transparent 88%);
  border-color: color-mix(in srgb, var(--zs-accent), transparent 35%);
}

.zs-outline-success{
  background: transparent;
  border-color: color-mix(in srgb, var(--zs-success), transparent 55%);
  color: var(--zs-success);
}
.zs-outline-success:hover{
  background: color-mix(in srgb, var(--zs-success), transparent 88%);
  border-color: color-mix(in srgb, var(--zs-success), transparent 35%);
}

.zs-outline-danger{
  background: transparent;
  border-color: color-mix(in srgb, var(--zs-danger), transparent 55%);
  color: var(--zs-danger);
}
.zs-outline-danger:hover{
  background: color-mix(in srgb, var(--zs-danger), transparent 88%);
  border-color: color-mix(in srgb, var(--zs-danger), transparent 35%);
}

/* Solid variant (use sparingly) */
.zs-solid-primary{
  background: var(--zs-accent);
  border-color: var(--zs-accent);
  color: var(--zs-tip-fg);
}
.zs-solid-primary:hover{ filter: brightness(1.04); }


/* ===== ZapSet UI – CTA quadrado (Enviar / Entrar / ação principal) ===== */
.zs-cta{
  border-radius: 12px !important;   /* menos pill, mais "card" */
  padding: 14px 22px !important;    /* mais alto */
  font-size: 15px;
  font-weight: 700;
}
.zs-cta.lg{
  padding: 16px 26px !important;
  font-size: 16px;
}

/* Optional dot (status, not actions) */
.zs-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(31,60,136,.08);
}
.zs-dot.success{ color: var(--zs-success); }
.zs-dot.danger{ color: var(--zs-danger); }
.zs-dot.primary{ color: var(--zs-accent); }

/* Helper: remove any inherited pseudo dots */
.zs-no-dot::before,
.zs-no-dot::after{
  content: none !important;
  display: none !important;
}

/* Hard override for forms that set button{width:100%} */
button.zs-pill{
  display: inline-flex !important;
  width: auto !important;
}


/* Override do legado: não esticar botões do design system */
button.zs-pill{
  width: auto !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
}


/* ===== ZapSet Auth: evitar botão "esticado" dentro do grid ===== */
.auth-page form button.zs-pill,
.auth-page form a.zs-pill{
  justify-self: start !important;   /* grid inline axis */
  align-self: start !important;     /* grid block axis */
  width: auto !important;
}


/* =========================================================
   ZapSet UI – Forms (Enterprise)
   - Only ADDITIONS (safe). Apply by adding zs-* classes.
   ========================================================= */

/* Field wrapper */
.zs-field{ display: grid; gap: 6px; margin: 0 0 12px; }

/* Label */
.zs-label{
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2px;
  color: rgba(255,255,255,.85);
}
html[data-theme="light"] .zs-label,
body[data-theme="light"] .zs-label{
  color: rgba(0,0,0,.78);
}

/* Inputs */
.zs-input, .zs-textarea, .zs-select{
  width: 100%;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

html[data-theme="light"] .zs-input,
html[data-theme="light"] .zs-textarea,
html[data-theme="light"] .zs-select,
body[data-theme="light"] .zs-input,
body[data-theme="light"] .zs-textarea,
body[data-theme="light"] .zs-select{
  color: rgba(0,0,0,.86);
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.14);
}

.zs-input:focus, .zs-textarea:focus, .zs-select:focus{
  /* border-color: color-mix(in srgb, var(--zs-accent, var(--primary)), transparent 35%); */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--zs-accent, var(--primary)), transparent 70%);
  background: color-mix(in srgb, var(--zs-accent, var(--primary)), transparent 92%);
}

.zs-input::placeholder, .zs-textarea::placeholder{
  color: rgba(255,255,255,.45);
}
html[data-theme="light"] .zs-input::placeholder,
html[data-theme="light"] .zs-textarea::placeholder,
body[data-theme="light"] .zs-input::placeholder,
body[data-theme="light"] .zs-textarea::placeholder{
  color: rgba(0,0,0,.40);
}

/* Helpers */
.zs-help{ font-size: 12px; color: rgba(255,255,255,.60); }
html[data-theme="light"] .zs-help,
body[data-theme="light"] .zs-help{ color: rgba(0,0,0,.55); }

/* Inline actions row */
.zs-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* Make auth forms look tight */
.auth-page .zs-field{ margin-bottom: 14px; }


/* ===== ZapSet UI – Forms (Light theme ultra clean) ===== */
html[data-theme="light"] .zs-input,
html[data-theme="light"] .zs-textarea,
html[data-theme="light"] .zs-select{
  border-color: rgb(255,255,255);          /* linha branca */
  background: rgb(255,255,255);
  box-shadow: 0 1px 0 rgba(15,23,42,.04);  /* delimitação sutil */
}

html[data-theme="light"] .zs-input:focus,
html[data-theme="light"] .zs-textarea:focus,
html[data-theme="light"] .zs-select:focus{
  border-color: rgb(255,255,255) !important;     /* continua branca */
  background: rgba(47,184,109,.04) !important;   /* tint leve */
  box-shadow: 0 0 0 3px rgba(47,184,109,.20),
              0 1px 0 rgba(15,23,42,.04) !important;
}


/* =========================================================
   ZapSet UI – Forms (Dark theme: foco com o azul do ticket ativo)
   ========================================================= */
html[data-theme="dark"] .zs-input:focus,
html[data-theme="dark"] .zs-textarea:focus,
html[data-theme="dark"] .zs-select:focus,
body[data-theme="dark"] .zs-input:focus,
body[data-theme="dark"] .zs-textarea:focus,
body[data-theme="dark"] .zs-select:focus{
  /* mesmo tom do destaque do ticket ativo */
  background: color-mix(in srgb, var(--primary), transparent 78%);
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary), transparent 70%);
}

/* =========================================================
   ZapSet UI – Chat textarea (name="message")
   - aplica o mesmo “Enterprise input” + foco azul do ticket no dark
   ========================================================= */

/* Base do textarea do chat */
textarea[name="message"]{
  width: 100%;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

/* Placeholder */
textarea[name="message"]::placeholder{
  color: rgba(255,255,255,.45);
}

/* Tema claro: borda verde do branding (igual zs-input) */
html[data-theme="light"] textarea[name="message"],
body[data-theme="light"] textarea[name="message"]{
  color: rgba(0,0,0,.86);
  background: rgba(0,0,0,.03);
  border-color: color-mix(in srgb, var(--zs-success, #2fb86d), transparent 40%);
}
html[data-theme="light"] textarea[name="message"]::placeholder,
body[data-theme="light"] textarea[name="message"]::placeholder{
  color: rgba(0,0,0,.40);
}

/* Focus no claro */
html[data-theme="light"] textarea[name="message"]:focus,
body[data-theme="light"] textarea[name="message"]:focus{
  border-color: var(--zs-success, #2fb86d);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--zs-success, #2fb86d), transparent 70%);
  background: color-mix(in srgb, var(--zs-success, #2fb86d), transparent 92%);
}

/* Focus no dark: azul do ticket ativo */
html[data-theme="dark"] textarea[name="message"]:focus,
body[data-theme="dark"] textarea[name="message"]:focus{
  background: color-mix(in srgb, var(--primary), transparent 78%);
  border-color: color-mix(in srgb, var(--primary), transparent 35%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary), transparent 70%);
}

/* =========================================================
   ZapSet UI – Chat textarea
   Usa EXATAMENTE o mesmo fundo do ticket ativo
   ========================================================= */

/* ---------- Tema CLARO ---------- */
html[data-theme="light"] textarea[name="message"]:focus,
body[data-theme="light"] textarea[name="message"]:focus{
  /* mesmo fundo do ticket selecionado (light) */
  background: color-mix(
    in srgb,
    var(--primary),
    transparent 88%
  );

  border-color: color-mix(
    in srgb,
    var(--primary),
    transparent 45%
  );

  box-shadow: none; /* igual ao card */
}

/* ---------- Tema ESCURO ---------- */
html[data-theme="dark"] textarea[name="message"]:focus,
body[data-theme="dark"] textarea[name="message"]:focus{
  /* mesmo fundo do ticket selecionado (dark) */
  background: color-mix(
    in srgb,
    var(--primary),
    transparent 78%
  );

  border-color: color-mix(
    in srgb,
    var(--primary),
    transparent 35%
  );

  box-shadow: none; /* igual ao card */
}


/* =========================================================
   ZapSet UI – Chat textarea highlight (ticket ativo)
   Dashboard usa <textarea id="msg"> (sem name).
   Aplica ao focar e ao digitar (quando não vazio).
   ========================================================= */

html[data-theme="light"] textarea#msg:focus,
body[data-theme="light"] textarea#msg:focus,
html[data-theme="light"] textarea#msg:not(:placeholder-shown),
body[data-theme="light"] textarea#msg:not(:placeholder-shown){
  background: rgba(79, 124, 255, 0.12) !important; /* igual ticket ativo */
  border-color: rgba(79, 124, 255, 0.25) !important;
  box-shadow: 0 0 0 1px rgba(79, 124, 255, 0.25) inset !important;
}

html[data-theme="dark"] textarea#msg:focus,
body[data-theme="dark"] textarea#msg:focus,
html[data-theme="dark"] textarea#msg:not(:placeholder-shown),
body[data-theme="dark"] textarea#msg:not(:placeholder-shown){
  background: rgba(79, 124, 255, 0.18) !important; /* igual ticket ativo (dark) */
  border-color: rgba(79, 124, 255, 0.30) !important;
  box-shadow: 0 0 0 1px rgba(79, 124, 255, 0.25) inset !important;
}

/* fallback: se existir textarea name="message" em outras telas */
html[data-theme="light"] textarea[name="message"]:focus,
body[data-theme="light"] textarea[name="message"]:focus,
html[data-theme="light"] textarea[name="message"]:not(:placeholder-shown),
body[data-theme="light"] textarea[name="message"]:not(:placeholder-shown){
  background: rgba(79, 124, 255, 0.12) !important;
  border-color: rgba(79, 124, 255, 0.25) !important;
  box-shadow: 0 0 0 1px rgba(79, 124, 255, 0.25) inset !important;
}

html[data-theme="dark"] textarea[name="message"]:focus,
body[data-theme="dark"] textarea[name="message"]:focus,
html[data-theme="dark"] textarea[name="message"]:not(:placeholder-shown),
body[data-theme="dark"] textarea[name="message"]:not(:placeholder-shown){
  background: rgba(79, 124, 255, 0.18) !important;
  border-color: rgba(79, 124, 255, 0.30) !important;
  box-shadow: 0 0 0 1px rgba(79, 124, 255, 0.25) inset !important;
}


/* =========================================================
   ZapSet UI – Forms: páginas sem seletor de tema (sempre claro)
   - Por padrão, zs-input deve ficar igual ao settings.php (borda verde no focus)
   - Tema escuro só aplica quando data-theme="dark" existir
   ========================================================= */

/* DEFAULT (claro) */
.zs-label{ color: rgba(0,0,0,.78) !important; }

.zs-input, .zs-textarea, .zs-select{
  color: rgba(0,0,0,.86) !important;
  background: rgba(0,0,0,.03) !important;
  border-color: rgba(0,0,0,.14) !important;
}

.zs-input::placeholder, .zs-textarea::placeholder{
  color: rgba(0,0,0,.40) !important;
}

/* Focus default no claro: verde do branding (igual settings.php) */
.zs-input:focus, .zs-textarea:focus, .zs-select:focus{
  border-color: var(--zs-success, #2fb86d) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--zs-success, #2fb86d), transparent 70%) !important;
  background: color-mix(in srgb, var(--zs-success, #2fb86d), transparent 92%) !important;
}

/* DARK (somente quando tema escuro está ativo) */
html[data-theme="dark"] .zs-label,
body[data-theme="dark"] .zs-label{
  color: rgba(255,255,255,.85) !important;
}

html[data-theme="dark"] .zs-input,
html[data-theme="dark"] .zs-textarea,
html[data-theme="dark"] .zs-select,
body[data-theme="dark"] .zs-input,
body[data-theme="dark"] .zs-textarea,
body[data-theme="dark"] .zs-select{
  color: rgba(255,255,255,.92) !important;
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.18) !important;
}

html[data-theme="dark"] .zs-input::placeholder,
html[data-theme="dark"] .zs-textarea::placeholder,
body[data-theme="dark"] .zs-input::placeholder,
body[data-theme="dark"] .zs-textarea::placeholder{
  color: rgba(255,255,255,.45) !important;
}

/* Focus no dark: azul do ticket ativo */
html[data-theme="dark"] .zs-input:focus,
html[data-theme="dark"] .zs-textarea:focus,
html[data-theme="dark"] .zs-select:focus,
body[data-theme="dark"] .zs-input:focus,
body[data-theme="dark"] .zs-textarea:focus,
body[data-theme="dark"] .zs-select:focus{
  background: rgba(79, 124, 255, 0.18) !important;
  border-color: rgba(79, 124, 255, 0.30) !important;
  box-shadow: 0 0 0 1px rgba(79, 124, 255, 0.25) inset !important;
}

/* =========================================================
   ZapSet UI – Alinhamento vertical (inputs x CTA)
   ========================================================= */

/* Altura base única */
:root{
  --zs-control-height: 48px;
}

/* Inputs */
.zs-input,
.zs-textarea,
.zs-select{
  min-height: var(--zs-control-height) !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  line-height: 1.2;
}

/* CTA principal */
.zs-pill.zs-cta{
  min-height: var(--zs-control-height) !important;
  padding: 0 22px !important; /* remove variação vertical */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
}

/* =========================================================
   ZapSet UI – Async Button (GLOBAL)
   Busy state runner (liquid comet) – SOFT RED variant (approved)
   - Applies to any .zs-pill when JS adds .zs-busy
   - Safe with zs-no-dot (we override ::after)
   - Does NOT change existing button styling; only adds busy runner
   ========================================================= */

:root{
  --zs-busy-pad: 2px;
  --zs-busy-border: 2px;

  /* Runner geometry */
  --zs-busy-cap-w: 24px;
  --zs-busy-cap-h: 3px;
  --zs-busy-cap-blur: .9px;

  /* Soft red palette */
  --zs-busy-red-strong: rgba(255, 120, 120, .75);
  --zs-busy-red-soft:   rgba(255, 120, 120, .35);
}

@keyframes zs-busy-cap-run{
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

/* Busy lock (behavioral) */
button.zs-pill.zs-busy{
  pointer-events: none;
  cursor: progress;
  position: relative;
  overflow: visible !important;

  /* keep a subtle danger outline, consistent with existing zs-outline-danger */
  border-color: color-mix(in srgb, var(--zs-danger, var(--danger, #EF4444)), transparent 25%) !important;

  /* keep your existing feedback */
  opacity: .92;
}

/* Runner (uses ::after because ::before is reserved, and zs-no-dot disables pseudos) */
button.zs-pill.zs-busy::after{
  content: "" !important;
  display: block !important;
  position: absolute !important;

  /* Path runs through the CENTER of the border */
  inset: calc(-1 * (var(--zs-busy-pad) + (var(--zs-busy-border) * 0.5))) !important;

  pointer-events: none;
  z-index: 3;

  offset-path: inset(0 round 999px) !important;
  offset-rotate: auto 0deg;
  animation: zs-busy-cap-run 1.35s linear infinite !important;

  width: var(--zs-busy-cap-w);
  height: var(--zs-busy-cap-h);
  border-radius: 999px;

  background:
    linear-gradient(90deg,
      rgba(255,120,120,0) 0%,
      var(--zs-busy-red-soft) 18%,
      var(--zs-busy-red-strong) 52%,
      var(--zs-busy-red-soft) 82%,
      rgba(255,120,120,0) 100%
    );

  box-shadow:
    -22px 0 24px rgba(255,120,120,.18),
    -12px 0 14px rgba(255,120,120,.22);

  filter: blur(var(--zs-busy-cap-blur));
}

/* Explicit override when zs-no-dot is present */
button.zs-pill.zs-busy.zs-no-dot::after{
  content: "" !important;
  display: block !important;
  offset-path: inset(0 round 999px) !important;
  animation: zs-busy-cap-run 1.35s linear infinite !important;
}

@media (prefers-reduced-motion: reduce){
  button.zs-pill.zs-busy::after{
    animation: none !important;
    offset-distance: 25%;
  }
}


/* Dashboard card title links (Tickets / Chat) - hover/focus matches active ticket highlight */
.zs-ticketTitleLink{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.zs-ticketTitleLink:hover,
.zs-ticketTitleLink:focus-visible{
  border-color: rgba(79, 124, 255, 0.35);
  background: rgba(79, 124, 255, 0.12);
  box-shadow: 0 0 0 1px rgba(79, 124, 255, 0.25);
}


/* --- Chat composer extras: autoresize + typing indicator --- */
textarea[data-zs-autoresize]{
  resize: none;
  overflow-y: hidden;
  min-height: 44px; /* keep aligned with buttons */
  line-height: 1.35;
}

.zs-typing{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin: 0 0 8px 0;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
  color: inherit;
  font-size: 12px;
}

/* Ensure hidden attribute works even with .zs-typing display rules */
.zs-typing[hidden]{
  display: none !important;
}

html[data-theme="dark"] .zs-typing{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

.zs-typingDots{
  display: inline-flex;
  gap: 4px;
}

.zs-typingDots span{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .35;
  animation: zsTypingBlink 1.1s infinite ease-in-out;
}

.zs-typingDots span:nth-child(2){ animation-delay: .15s; }
.zs-typingDots span:nth-child(3){ animation-delay: .30s; }

@keyframes zsTypingBlink{
  0%, 80%, 100% { transform: translateY(0); opacity: .25; }
  40% { transform: translateY(-2px); opacity: .75; }
}


/* =========================================================
   ZapSet – "digitando..." abaixo do textarea (DENTRO do card)
   HTML atual:
   .chat
   .zs-typing
   #sendBox.send
   ========================================================= */

/* 1) Garante que o card do chat seja a âncora do absolute (fica dentro do bloco) */
.card:has(#sendBox.send){
  position: relative;
}

/* 2) Reserva espaço no composer para o indicador ficar "abaixo" do textarea */
#sendBox.send{
  position: relative;
  padding-bottom: 36px; /* espaço do "digitando..." + respiro */
}

/* 3) Posiciona o indicador na área reservada, dentro do mesmo card */
.card:has(#sendBox.send) .zs-typing[data-zs-typing-for="#msg"]{
  position: absolute;
  left: 16px;
  right: 16px;

  /* coloca na parte de baixo do composer */
  bottom: 12px;

  margin: 0;
  pointer-events: none;
  z-index: 2;
}

/* 4) Mantém hidden funcionando sempre */
.zs-typing[hidden]{
  display: none !important;
}


/* ---------------- System messages (friendly rendering) ---------------- */
.bubble.system .zs-sysmsg{
  margin-top:6px;
  padding:10px 12px;
  border:1px dashed var(--border);
  background:var(--surface2);
  border-radius:12px;
}
.zs-sysmsg-title{
  font-weight:800;
  margin-bottom:6px;
}
.zs-sysmsg-body{display:flex;flex-direction:column;gap:4px}
.zs-sysmsg-line{line-height:1.35}
.zs-sysmsg-details{margin-top:8px}
.zs-sysmsg-details summary{
  cursor:pointer;
  user-select:none;
  font-weight:700;
}
.zs-sysmsg-details pre{
  margin-top:8px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface);
  overflow:auto;
  font-size:12px;
  line-height:1.35;
}


/* ---------------- Close ticket confirmation (below button) ---------------- */
.zs-close-confirm{
  width: fit-content;
  min-width: 500px;             /* garante texto em uma linha */
  max-width: 100%;
  margin-top:10px;
  margin-right:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  background:var(--surface2);
  border-radius:14px;

  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  flex-wrap:nowrap;
}

.zs-close-confirm-text{
  font-weight:700;
  white-space:nowrap;           /* impede quebra do texto */
}

.zs-close-confirm-actions{
  display:flex;
  gap:10px;
  align-items:center;
}

/* Mobile: permitir quebra e ocupar melhor a largura sem estragar desktop */
@media (max-width: 640px){
  .zs-close-confirm{
    min-width: auto;        /* remove o mínimo fixo do desktop */
    width: 100%;            /* usa a largura do chat no mobile */
    margin-right: 0;        /* não precisa do truque de quebra no mobile */
    flex-wrap: wrap;        /* permite layout fluido */
  }

  .zs-close-confirm-text{
    white-space: normal;    /* permite quebrar a frase no mobile */
    flex: 1 1 100%;         /* texto em cima */
  }

  .zs-close-confirm-actions{
    width: 100%;            /* botões embaixo, alinhados à esquerda */
    justify-content: flex-start;
  }
}


/* Auth: o grid gap já controla espaçamento; remove sobra do zs-field */
.auth-page form .zs-field{ margin-bottom: 0; }

/* Auth: aproxima link e botão */
.auth-page .auth-actions{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;      /* link → botão */
  margin-top: 10px; /* senha → link */
}


/* =========================================================
   ZapSet Dashboard – Layout sem rolagem geral (desktop)
   - Mantém o topo fixo e cria scroll interno em cada seção
   - Em telas pequenas (<=980px) volta ao comportamento normal (scroll da página)
   ========================================================= */

body{
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Desktop/tablet: trava rolagem geral e usa scroll por seção */
@media (min-width: 981px){
  body{ overflow: hidden; }
  .grid{
    flex: 1;
    min-height: 0; /* CRÍTICO para permitir overflow interno */
  }
  .col{ min-height: 0; }
  .card{
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* Conteúdo rolável dentro do card */
  .cardScroll{
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding-right: 6px; /* espaço p/ scrollbar não colar no conteúdo */
  }

  /* Chat: ocupa o espaço restante do card e rola só nas mensagens */
  .chat{
    flex: 1;
    min-height: 0;
    max-height: none; /* substitui max-height:55vh no desktop */
  }
}

/* Mobile/stacked: comportamento natural (scroll da página) */
@media (max-width: 980px){
  body{ overflow: auto; }
  .card{ display: block; }
  .cardScroll{
    overflow: visible;
    padding-right: 0;
  }
  .chat{
    max-height: 55vh; /* mantém a UX do chat no mobile */
  }
}


/* ============================
   Dashboard: proporção + resizer + foco (desktop)
   ============================ */

@media (min-width: 1024px) {
  /* Grid: esquerda + gutter + direita */
  .grid.zs-dashboard {
    display: grid;
    /* proporção padrão: 60% (esq) | 40% (chat) + handle fino no meio */
    grid-template-columns: var(--zs-left, 60%) 12px 1fr;
    gap: 0px;
    align-items: stretch;
  }

  
  /* FIX (HD/colapso): permite colunas encolherem sem invadir a outra */
  .grid.zs-dashboard > *{ min-width: 0; }
  #dashLeft, #dashRight{ min-width: 0; }
/* Coluna esquerda em 2 blocos verticais */
  .col.left-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
  }

  .card.card-attendants {
    flex: 0 0 30%;
    min-height: 180px;
    display: flex;
    flex-direction: column;
  }

  .card.card-tickets {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  /* Chat ocupa altura total da coluna direita */
  .card.chat-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
  }

  .chat.chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  .send.chat-composer {
    flex-shrink: 0;
  }

  /* Gutter de resize */
  .zs-gutter {
    width: 12px;
    cursor: col-resize;
    user-select: none;
    touch-action: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: transparent;
    position: relative;
  }

    /* Zona de aproximação (aumenta a área de hover sem engrossar o layout) */
  .zs-gutter::after{
    content:"";
    position:absolute;
    top:0; bottom:0;
    left:-10px; right:-10px; /* área invisível maior */
    background: rgba(0,0,0,0.001); /* precisa “pintar” para pegar hover */
  }

/* Handle visual (igual ao splitter horizontal) */
  .zs-gutter::before{
    content:"";
    width:4px;
    height:64px;
    border-radius:999px;
    background: rgba(0,0,0,.14);
    opacity: 0;
    transform: scaleY(.85);
    transition: opacity .15s ease, transform .15s ease, background .15s ease;
  }

  .zs-gutter:hover::before{ background: rgba(0,0,0,.22); opacity:1; transform: scaleY(1); }
  body.zs-resizing .zs-gutter::before{ background: rgba(0,0,0,.28); opacity:1; transform: scaleY(1); }

  :root[data-theme="dark"] .zs-gutter::before{
    background: rgba(255,255,255,.18);
  }
  :root[data-theme="dark"] .zs-gutter:hover::before{
    background: rgba(255,255,255,.26);
  }
  :root[data-theme="dark"] body.zs-resizing .zs-gutter::before{
    background: rgba(255,255,255,.32);
  }

  /* Modo foco: esconde coluna esquerda */
  /* (removido) Modo foco antigo - ver bloco FIX: Modo foco mais abaixo */
  /* During drag */
  body.zs-resizing { cursor: col-resize; }
  body.zs-resizing, body.zs-resizing * { user-select: none !important; }
}

/* Gutter não aparece em mobile */
@media (max-width: 1023px) {
  .zs-gutter { display: none; }
}


/* ===== Dashboard layout: divisória vertical + horizontal (ajuste de proporção) ===== */
@media (min-width: 1024px) {
  /* Coluna esquerda vira grid: Atendentes | splitter | Tickets */
  #dashLeft.left-column{
    /* padrão: 30% atendentes | 70% tickets (ajustável via JS) */
    --zs-att-pct: 30%;
    display: grid;
    grid-template-rows: minmax(180px, var(--zs-att-pct)) 12px 1fr;
    gap: 0;
    height: 100%;
    min-height: 0;
  }

  /* garante que os cards preencham suas linhas sem estourar */
  #dashLeft.left-column > .card{
    height: 100%;
    min-height: 0;
    margin: 0;
  }

  /* Barra horizontal de ajuste */
  .zs-split-h{
    cursor: row-resize;
    user-select: none;
    touch-action: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: transparent;
    position: relative;
  }
    /* Zona de aproximação (aumenta a área de hover sem aumentar espaçamento) */
  .zs-split-h::after{
    content:"";
    position:absolute;
    left:0; right:0;
    top:-10px; bottom:-10px;
    background: rgba(0,0,0,0.001);
  }

.zs-split-h::before{
    content: "";
    width: 64px;
    height: 4px;
    border-radius: 999px;
    background: rgba(0,0,0,.14);
    opacity: 0;
    transform: scaleX(.85);
    transition: opacity .15s ease, transform .15s ease, background .15s ease;
  }

  /* feedback leve no hover/drag */
  .zs-split-h:hover::before{ background: rgba(0,0,0,.22); opacity:1; transform: scaleX(1); }
  body.zs-resizing .zs-split-h::before{ background: rgba(0,0,0,.28); opacity:1; transform: scaleX(1); }
}

/* Tema escuro: handle mais visível */
:root[data-theme="dark"] .zs-split-h::before{
  background: rgba(255,255,255,.18);
}
:root[data-theme="dark"] .zs-split-h:hover::before{
  background: rgba(255,255,255,.26);
  opacity:1;
  transform: scaleX(1);
}
:root[data-theme="dark"] body.zs-resizing .zs-split-h::before{
  background: rgba(255,255,255,.32);
  opacity:1;
  transform: scaleX(1);
}


/* =========================================================
   FIX: Modo foco (Chat) preencher 100% da largura
   - Evita colapso caso o .col da direita não esteja no 3º track
   - Mantém o gutter/coluna esquerda ocultos
   ========================================================= */
@media (min-width: 1024px){
  body.zs-focus-chat .grid.zs-dashboard{
    /* força layout 1 coluna no foco */
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  body.zs-focus-chat #dashRight{
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.zs-focus-chat #dashLeft{
    display: none !important;
  }
  body.zs-focus-chat #dashGutter{
    display: none !important;
  }

}


/* Mobile: quando a meta cair pra linha de baixo, alinhar à esquerda */
@media (max-width: 640px){
  .zs-ticketMeta{
    margin-left: 0;              /* remove o empurrão pra direita */
    justify-content: flex-start; /* alinha badge + atendente à esquerda */
    width: 100%;                 /* garante que ocupe a linha toda ao quebrar */
  }

  /* opcional: dá um respiro quando a meta vira “segunda linha” */
  .zs-ticketMeta{
    margin-top: 2px;
  }
}


/* Mobile: SLA (Notificado) sempre na linha de baixo */
@media (max-width: 640px){
  .zs-ticketBottom{
    align-items: flex-start;
  }

  .zs-slaDetail{
    white-space: pre-line;  /* respeita \n do PHP */
    overflow: visible;      /* não cortar */
    text-overflow: clip;    /* sem ellipsis */
  }
}


@media (max-width: 640px){
  .zs-ticketBottom{ flex-wrap: wrap; }
}


/* =========================================================
   FIX: HD (1366/1280) - status + atendente quebrar sem encavalar
   - Mantém badge na linha quando couber
   - Se faltar espaço, o nome do atendente desce para a linha de baixo
   ========================================================= */
.zs-attName{
  min-width: 0;

  text-overflow: ellipsis;
}


/* SLA: permitir quebrar em 2 linhas quando o painel ficar apertado (ex.: 1280/1366) */

/* ===== ZapSet Tickets: meta mais permissiva (sem @media 1366) =====
   Objetivo:
   - Manter "status + atendente" na mesma linha sempre que possível
   - Só quebrar para baixo quando realmente faltar espaço (ex.: splitter apertado)
   - Sem encavalamento entre SLA/Notificado e meta
*/
.zs-ticketMeta{
  /* manter alinhado à direita quando couber */
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  /* permite cair para baixo apenas em último caso */
  flex-wrap: wrap;

  /* não limitar agressivamente: deixa a coluna direita usar o que precisar */
  max-width: none;
  min-width: 0;
}

.zs-attName{
  /* deixa o nome "encolher" antes de quebrar (mais permissivo) */
  flex: 1 1 160px;
  min-width: 0;

  white-space: nowrap;

  text-overflow: ellipsis;
}

/* A linha do SLA precisa poder encolher/rolar sem invadir a meta */
.zs-ticketBottom{
  min-width: 0;
  flex-wrap: wrap; /* permite quebrar o SLA quando necessário */
}

.zs-slaDetail{
  min-width: 0;
}

/* Mobile: meta alinhada à esquerda (como já validado) */
@media (max-width: 640px){
  .zs-ticketMeta{
    margin-left: 0;
    justify-content: flex-start;
    width: 100%;
  }
  .zs-attName{
    flex: 1 1 100%;
    text-align: left;
  }
}

/* =========================================================
   ZapSet – PATCH (não remove nada)
   Objetivo:
   1) Desktop: status + atendente alinhados à direita e juntos
   2) Mobile: status + atendente na MESMA linha (compacto)
   3) Preservar todo o restante do CSS existente (sem regressão)
   ========================================================= */

/* ---- Tickets: meta (status + atendente) ---- */
/* Mantém o bloco da direita alinhado à direita quando couber */
.zs-ticketRow .zs-ticketMeta{
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  min-width: 0 !important;
}

/* Desktop: tente manter em 1 linha; se não couber, o nome pode cair para baixo (sem encavalar) */
.zs-ticketRow .zs-ticketMeta{
  flex-wrap: wrap !important;
}
.zs-ticketRow .zs-ticketStatus{
  flex: 0 0 auto !important;
}
.zs-ticketRow .zs-attName{
  min-width: 0 !important;
  max-width: 260px !important;   /* controla o quanto pode ocupar */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  /* só desce em último caso */
  flex: 1 1 160px !important;
  text-align: right !important;
}

/* Mobile: status + nome na mesma linha (economiza altura) */
@media (max-width: 640px){
  .zs-ticketRow .zs-ticketMeta{
    margin-left: 0 !important;
    width: auto !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }
  .zs-ticketRow .zs-attName{
    flex: 0 1 auto !important;
    max-width: 55vw !important;
    text-align: left !important;
  }
}

/* Mobile: SLA/Notificado respeita quebra (mantém o que já estava funcionando) */
@media (max-width: 640px){
  .zs-ticketRow .zs-ticketBottom{
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }
  .zs-ticketRow .zs-slaDetail{
    white-space: pre-line !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}


/* ===== Guard: remove qualquer dot legado em ticketLink.hasUpdate (lado direito) ===== */
.ticketLink.hasUpdate::before,
.ticketLink.hasUpdate::after{
  content: none !important;
}
/* ===== Dot de atualização (atividade recente)
   Alinhado com o ID do ticket (#287) ===== */
a.ticketLink.hasUpdate{
  position: relative;
}

/* remove qualquer dot antigo */
a.ticketLink.hasUpdate::after{
  content: none !important;
}

/* dot novo antes do ID */
a.ticketLink.hasUpdate::before{
  content: '';
  position: absolute;

  left: 14px;   /* alinhado à esquerda do ID */
  top: 18px;    /* alinhado verticalmente com a linha do ID */

  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #3b82f6;
}


/* ===== Pulse discreto para tickets OPEN ===== */
@keyframes zsPulseSoft {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(16,185,129,0);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 0 0 6px rgba(16,185,129,0.15);
  }
}

/* seletor correto do badge OPEN */
.zs-statusPill.zs-st--open{
  animation: zsPulseSoft 1.6s ease-in-out infinite;
}


/* ===== Mobile: botão de foco não se aplica ===== */
@media (max-width: 640px){
  #dashFocusToggle{
    display: none !important;
  }
}


/* ===== Avatar do contato (header do chat) =====
   Usa o MESMO tooltip (data-tooltip) e o MESMO hover dos ícones (iconBtn).
   Importante: o botão NÃO pode ter overflow:hidden, senão corta o tooltip. */
.zs-chatHeaderContact{display:flex;align-items:center;gap:10px;}

.zs-avatarBtn.iconBtn{
  width:50px;height:50px;flex:0 0 50px;
  border-radius:999px;
  overflow:visible;
  padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:50px;min-height:50px;
}

.zs-avatarClip{
  width:50px;height:50px;
  border-radius:999px;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}

.zs-avatarBtn.iconBtn[aria-disabled='true']{ cursor:default; opacity:.78; }
.zs-avatarImg{width:100%;height:100%;object-fit:cover;display:block;}
.zs-avatarFallback{font-weight:700;font-size:16px;letter-spacing:.5px;opacity:.85;}
.zs-chatHeaderContactMain{min-width:0;}

/* ===== Lightbox (visualizar imagem em tamanho original) ===== */
.zs-imgViewer{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.72);
  padding:24px;
}
.zs-imgViewer[hidden]{display:none;}
.zs-imgViewer img{
  max-width:min(92vw, 980px);
  max-height:92vh;
  border-radius:18px;
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  background:#fff;
}



/* ===== Tooltip tokens (theme-aware) ===== */
/*
  Tooltip tokens (theme-aware)
  Observação:
  - No tema claro, tooltip com fundo branco sobre cards claros parecia "transparente".
  - Para manter consistência com os tooltips dos ícones (tickets/topbar),
    usamos um fundo escuro também no tema claro.
*/
:root{
  /* Tooltip oficial (data-tooltip)
     - Precisa ter fundo visível no tema claro (não pode “sumir” em cards claros)
     - Deve respeitar o tema (o atributo data-theme pode estar no <html> OU <body>)
  */
  /*
    IMPORTANTE:
    - O tooltip nao pode ter fundo com alpha baixo (ex.: 0.18), porque em cards claros
      ele "some" e parece transparente.
    - Mantemos o mesmo tooltip (data-tooltip) e o mesmo estilo para TODO o sistema.
  */
  /* Tema claro: tooltip CLARO (igual ao restante da UI no light)
     - Fundo SÓLIDO (sem alpha) para não “sumir” em cards claros
     - Borda/sombra garantem contraste */
  --zs-tip-bg: rgb(255,255,255);
  --zs-tip-fg: rgb(15, 23, 42);
  --zs-tip-shadow: 0 14px 30px rgba(15,23,42,.18);
  --zs-tip-border: rgba(15,23,42,.18);
}

/* Tema escuro: usa os mesmos tokens, só troca as variáveis.
   Importante: o atributo de tema deve ser GLOBAL (html/body).
   Evita conflito com componentes que possam usar data-theme para outros fins. */
html[data-theme="dark"],
body[data-theme="dark"]{
  --zs-tip-bg: rgb(2, 6, 23);              /* solido no dark também */
  --zs-tip-fg: rgba(255,255,255,.96);
  --zs-tip-shadow: 0 14px 30px rgba(0,0,0,.45);
  --zs-tip-border: rgba(255,255,255,.12);
}


/* ===== Premium tooltip (CSS-only) ===== */
[data-tooltip]{ position: relative; }

[data-tooltip]::after{
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%) translateY(-4px);
  padding: 7px 11px;
  border-radius: 12px;
  background: var(--zs-tip-bg);
  color: var(--zs-tip-fg);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  max-width: min(280px, 70vw);

  text-overflow: ellipsis;

  border: 1px solid var(--zs-tip-border);
  box-shadow: var(--zs-tip-shadow);

  opacity: 0;
  pointer-events: none;
  /*
    IMPORTANTE (sem transparência):
    - Sem fade (opacity transition) para evitar qualquer estado semi-transparente.
    - Mantém apenas micro-movimento (transform).
  */
  transition: transform .15s ease;
  z-index: 9999;
}

[data-tooltip]::before{
  content: '';
  position: absolute;
  left: 50%;
  top: calc(100% + 4px);
  transform: translateX(-50%) translateY(-4px);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--zs-tip-bg);
  opacity: 0;
  pointer-events: none;
  /* Sem fade (mesmo motivo do ::after) */
  transition: transform .15s ease;
  z-index: 9999;
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::after,
[data-tooltip]:focus-visible::before{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Layer: garante tooltip sempre acima do header/chat */
.zs-avatarBtn{ position: relative; z-index: 25000; }
.zs-avatarBtn[data-tooltip]::before,
.zs-avatarBtn[data-tooltip]::after{ z-index: 25001; }

/* Mobile: desativa tooltip (evita atrapalhar toque) */
@media (max-width: 640px){
  [data-tooltip]::before,
  [data-tooltip]::after{
    display: none !important;
  }
}





/* ===== Tickets filters: estado ativo (igual ícone de foco) ===== */
#ticketsFilters .iconBtn[aria-pressed="true"]{
  background: rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.35);
}
html[data-theme="dark"] #ticketsFilters .iconBtn[aria-pressed="true"]{
  background: rgba(59,130,246,.18);
  border-color: rgba(59,130,246,.40);
}

/* ===== Tooltip layering fix (Tickets filters vs phone tooltip) =====
   Garante que tooltips dos ícones (ex.: filtros) fiquem acima do texto/tooltip do telefone. */
.card-tickets .iconBtn{
  position: relative;
  z-index: 20000;
}
.card-tickets .iconBtn[data-tooltip]::before,
.card-tickets .iconBtn[data-tooltip]::after{
  z-index: 20001;
}

/* =========================================================
   ZapSet – Tooltip (Rascunho): badge proporcional ao texto
   - Mantém a "skin" premium do tooltip
   - Aumenta a largura máxima para prévia do rascunho
   - Sem impactar tooltips pequenos dos ícones do topo
   ========================================================= */
.zs-draft-inline[data-tooltip]::after{
  /* deixa o balão acompanhar melhor a prévia */
  max-width: min(560px, 86vw);
  padding: 8px 12px;
  line-height: 1.25;
}

/* mantém o triângulo alinhado com o balão (herda cor/posição padrão) */
.zs-draft-inline[data-tooltip]::before{
  /* nada a sobrescrever aqui por enquanto; deixado explícito para futuras iterações */
}

/* ===== Micro-anim no SVG (engrenagem) ===== */
.iconBtn[data-icon="settings"] .icon{
  transition: transform .18s ease;
  transform-origin: 50% 50%;
}
.iconBtn[data-icon="settings"]:hover .icon{
  transform: rotate(-14deg);
}

/* ===== Estado ativo (visual) ===== */
/* Foco ativo */
body.zs-focus-chat #dashFocusToggle{
  background: rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.35);
}

/* Tema escuro ativo */
[data-theme="dark"] #themeToggle{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}

/* ===== Tooltip: evita cortar nas bordas (topbar direita) ===== */
.topbar .right .iconBtn[data-tooltip]:last-child::after,
.topbar .right .iconBtn[data-tooltip]:nth-last-child(2)::after{
  left: auto;
  right: 0;
  transform: translateY(-4px);
}

.topbar .right .iconBtn[data-tooltip]:last-child::before,
.topbar .right .iconBtn[data-tooltip]:nth-last-child(2)::before{
  left: auto;
  right: 12px;
  transform: translateY(-4px);
}

/* =========================================================
   ZapSet – FIX: texto branco nos botões "primários" (fundo azul)
   Motivo: .btn e .zs-solid-primary estavam herdando --zs-tip-fg (tooltip),
   que muda conforme o tema e deixava o texto preto no tema claro.
   ========================================================= */
:root{
  --zs-btn-fg: #fff;
}

/* Botão primário legado (fundo var(--primary)) */
.btn{
  color: var(--zs-btn-fg) !important;
}

/* Botão primário do design system (zs-solid-primary) */
.zs-solid-primary{
  color: var(--zs-btn-fg) !important;
}

/* =========================================================
   ZapSet – Chat "VÉU" (mensagens com fundo premium)
   Objetivo:
   - Evitar aparência "auto-contraste" (mensagens transparentes demais)
   - System continua diferenciado, mas com fundo mais suave
   - Atendente (assistant) ganha véu diferente do system
   - Cliente (user) ganha véu ainda mais leve
   (SAFE: somente overrides de .chat/.bubble)
   ========================================================= */

:root{
  /* Chat area background (veil) */
  --zs-chat-veil: color-mix(in srgb, var(--surface2), transparent 35%);

  /* Bubble veils (LIGHT) */
  --zs-bubble-user:      color-mix(in srgb, var(--surface), var(--primary) 4%);
  --zs-bubble-assistant: color-mix(in srgb, var(--surface), var(--secondary) 5%);
  --zs-bubble-system:    color-mix(in srgb, var(--surface), #F59E0B 7%);

  /* Inner highlight */
  --zs-bubble-inset: 0 0 0 1px color-mix(in srgb, var(--border), transparent 35%) inset;

  /* Extra polish */
  --zs-bubble-glow-user:      0 0 0 1px color-mix(in srgb, var(--primary), transparent 78%) inset;
  --zs-bubble-glow-assistant: 0 0 0 1px color-mix(in srgb, var(--secondary), transparent 78%) inset;
  --zs-bubble-glow-system:    0 0 0 1px color-mix(in srgb, #F59E0B, transparent 80%) inset;
}

/* Dark tuning */
html[data-theme="dark"]{
  --zs-chat-veil: color-mix(in srgb, var(--surface2), transparent 55%);

  --zs-bubble-user:      color-mix(in srgb, var(--surface), var(--primary) 10%);
  --zs-bubble-assistant: color-mix(in srgb, var(--surface), var(--secondary) 10%);
  --zs-bubble-system:    color-mix(in srgb, var(--surface), #F59E0B 12%);

  --zs-bubble-inset: 0 0 0 1px rgba(255,255,255,.06) inset;

  --zs-bubble-glow-user:      0 0 0 1px color-mix(in srgb, var(--primary), transparent 70%) inset;
  --zs-bubble-glow-assistant: 0 0 0 1px color-mix(in srgb, var(--secondary), transparent 70%) inset;
  --zs-bubble-glow-system:    0 0 0 1px color-mix(in srgb, #F59E0B, transparent 74%) inset;
}

/* 1) Chat area gets a subtle "panel" so messages stand out from the card */
.chat.chat-messages{
  background: var(--zs-chat-veil);
  border: 1px solid color-mix(in srgb, var(--border), transparent 25%);
  border-radius: 14px;
  padding: 12px;
}

/* Keep scrollbar spacing */
.chat.chat-messages{ padding-right: 12px; }

/* 2) Base bubble polish (glass-ish but readable) */
.bubble{
  background: color-mix(in srgb, var(--surface), transparent 2%);
  box-shadow: var(--zs-bubble-inset);
  border-color: color-mix(in srgb, var(--border), transparent 10%);
}

/* Optional glass blur (supported browsers only) */
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))){
  .bubble{
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

/* 3) Per-type veils (different from system) */
.bubble.user{
  background: color-mix(in srgb, var(--surface), var(--primary) 18%);
  box-shadow: var(--zs-bubble-inset), var(--zs-bubble-glow-user);
  border-left-color: color-mix(in srgb, var(--primary), transparent 35%);
}
.bubble.assistant{
  background: color-mix(in srgb, var(--surface), var(--secondary) 18%);
  box-shadow: var(--zs-bubble-inset), var(--zs-bubble-glow-assistant);
  border-left-color: color-mix(in srgb, var(--secondary), transparent 30%);
}
.bubble.system{
  background: var(--zs-bubble-system);
  box-shadow: var(--zs-bubble-inset), var(--zs-bubble-glow-system);
  border-left-color: color-mix(in srgb, #F59E0B, transparent 28%);
}

/* 4) System payload box blends with new bubble veil (less “auto-contraste”) */
.bubble.system .zs-sysmsg{
  background: color-mix(in srgb, var(--surface2), #F59E0B 6%);
  border-color: color-mix(in srgb, var(--border), #F59E0B 22%);
}
html[data-theme="dark"] .bubble.system .zs-sysmsg{
  background: color-mix(in srgb, var(--surface2), #F59E0B 10%);
  border-color: color-mix(in srgb, rgba(255,255,255,.10), #F59E0B 28%);
}

/* 5) Micro hover: gives "product" feel without jumping */
.bubble{
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.bubble:hover{
  border-color: color-mix(in srgb, var(--primary), var(--border) 70%);
}
.bubble.user:hover{
  background: var(--zs-bubble-user) !important;
  box-shadow: var(--zs-bubble-inset),
    0 0 0 1px color-mix(in srgb, var(--primary), transparent 62%) inset;
}
.bubble.assistant:hover{
  background: var(--zs-bubble-assistant) !important;
  box-shadow: var(--zs-bubble-inset),
    0 0 0 1px color-mix(in srgb, var(--secondary), transparent 60%) inset;
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .bubble{ transition: none; }
}


/* =========================================================
   ZapSet – Chat container: REMOVE "VÉU" do painel (transparente)
   Mantém APENAS o véu por tipo de mensagem (user/assistant/system).
   Motivo: evitar aspecto "encardido" por camadas (double veil).
   ========================================================= */

.chat.chat-messages{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  /* volta o espaçamento padrão do chat */
  padding-right: 6px !important;
}


/* =========================================================
   ZapSet – HOVER FINAL (STRICT MODE)
   Objetivo:
   - Eliminar QUALQUER tonalidade azul genérica no hover
   - Hover reage EXCLUSIVAMENTE à cor do tipo da mensagem
   - Nenhuma borda, nenhum glow, nenhum box-shadow colorido
   ========================================================= */

/* Base: não permitir herança visual no hover */
.bubble:hover{
  border-color: var(--border) !important;
  box-shadow: none !important;
}

/* USER (cliente) – azul próprio, apenas mais fechado */
.bubble.user:hover{
  background: var(--zs-bubble-user) !important;
  box-shadow: var(--zs-bubble-inset),
    0 0 0 1px color-mix(in srgb, var(--primary), transparent 62%) inset;
}

/* ASSISTANT (atendente) – verde próprio, apenas mais fechado */
.bubble.assistant:hover{
  background: var(--zs-bubble-assistant) !important;
  box-shadow: var(--zs-bubble-inset),
    0 0 0 1px color-mix(in srgb, var(--secondary), transparent 60%) inset;
}

/* SYSTEM – âmbar próprio, apenas mais fechado */


/* Dark mode – mesma lógica, só aumenta presença */
html[data-theme="dark"] .bubble.user{
  background: color-mix(
    in srgb,
    var(--surface),
    var(--primary) 26%
  ) !important;
}

html[data-theme="dark"] .bubble.assistant{
  background: color-mix(
    in srgb,
    var(--surface),
    var(--secondary) 26%
  ) !important;
}

html[data-theme="dark"] 


/* =========================================================
   ZapSet – Hover: destaque da BORDA ESQUERDA por tipo
   Objetivo:
   - Aumentar a presença visual da borda no hover
   - Usar APENAS a cor do tipo (sem azul genérico)
   - Funciona junto com o hover de background já aprovado
   ========================================================= */

/* Transição suave da borda esquerda */
.bubble{
  transition:
    background-color .18s ease,
    border-left-color .18s ease,
    border-left-width .18s ease;
}

/* USER – azul mais fechado */
.bubble.user:hover{
  background: var(--zs-bubble-user) !important;
  box-shadow: var(--zs-bubble-inset),
    0 0 0 1px color-mix(in srgb, var(--primary), transparent 62%) inset;
}

/* ASSISTANT – verde mais fechado */
.bubble.assistant:hover{
  background: var(--zs-bubble-assistant) !important;
  box-shadow: var(--zs-bubble-inset),
    0 0 0 1px color-mix(in srgb, var(--secondary), transparent 60%) inset;
}

/* SYSTEM – âmbar mais fechado */


/* Dark mode: um pouco mais de contraste */
html[data-theme="dark"] .bubble.user:hover{
  background: var(--zs-bubble-user) !important;
  }
html[data-theme="dark"] .bubble.assistant:hover{
  background: var(--zs-bubble-assistant) !important;
  }
html[data-theme="dark"] 


/* =========================================================
   PATCH: Chat bubbles - bordas mais finas (sem hover)
   Objetivo:
   - Remover "dupla borda" causada por inset/box-shadow
   - Deixar a borda padrão igual aos demais cards do projeto
   - Manter a borda esquerda colorida por tipo (user/assistant/system)
   ========================================================= */

/* Base: sem inset/halo (parecia borda grossa) */
.bubble{
  box-shadow: none !important;
  border-width: 1px !important;
}

/* Tipos: remove qualquer glow acumulado */
.bubble.user,
.bubble.assistant,
.bubble.system{
  box-shadow: none !important;
}

/* Borda esquerda um pouco mais discreta no estado normal */
.bubble.user,
.bubble.assistant,
.bubble.system{
  border-left-width: 3px !important;
}

/* Mantém cores da borda esquerda (só garante consistência) */
.bubble.user{ border-left-color: var(--primary) !important; }
.bubble.assistant{ border-left-color: var(--secondary) !important; }
.bubble.system{ border-left-color: #F59E0B !important; }


.chat-message{transition: background-color 160ms ease;}


/* garante que align-self funcione (já é flex, mas fica explícito) */
.chat{
  display: flex;
  flex-direction: column;
}

/* Base: bolha no tamanho do conteúdo, com teto de 70% */
.chat .bubble{
  display: inline-block;
  width: fit-content;
  max-width: 70%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Cliente (user) – esquerda */
.chat .bubble.user{
  align-self: flex-start;
}

/* Atendente (assistant) – direita */
.chat .bubble.assistant{
  align-self: flex-end;
  text-align: left; /* mantém leitura natural mesmo alinhando a bolha */
}

/* System: mantém layout atual (ocupa toda a largura) */
.chat .bubble.system{
  width: 100%;
  max-width: 100%;
  align-self: stretch;
}


/* =========================================================
   Refinos do chat (UX)
   - Agrupamento de mensagens consecutivas (mesmo autor)
   - Estado :active / :focus-visible (acessibilidade)
   ========================================================= */

/* Espaçamento padrão entre mensagens */
.chat .bubble{
  margin-top: 3px;
}

/* Agrupa mensagens consecutivas do mesmo autor (WhatsApp-like) */
.chat .bubble.assistant + .bubble.assistant,
.chat .bubble.user + .bubble.user{
  margin-top: 1px;
}

/* System mantém um respiro maior */
.chat .bubble.system{
  margin-top: 12px;
}

/* Feedback de interação (clique / teclado) */
.chat .bubble:active{
  transform: translateY(0.5px);
}

/* Se algum elemento interno for focável (links/botões), dá realce ao container */
.chat .bubble:focus-within{
  outline: 2px solid color-mix(in srgb, var(--primary), transparent 55%);
  outline-offset: 2px;
}

/* Evita “pulo” em usuários que preferem menos animação */
@media (prefers-reduced-motion: reduce){
  .chat .bubble,
  .chat .bubble:active{
    transition: none !important;
    transform: none !important;
  }
}


/* Remove margens internas que empurram a bolha */
.bubble .meta,
.bubble .header,
.bubble .bubble-header{
  margin-bottom: 2px !important;
}

/* Quando mensagens são consecutivas do mesmo autor,
   reduz ainda mais o espaço interno superior */
.chat .bubble.assistant + .bubble.assistant .meta,
.chat .bubble.user + .bubble.user .meta{
  margin-top: 0 !important;
}

/* Espaçamento externo REAL entre bolhas */
.chat .bubble{
  margin-top: 3px;
}

.chat .bubble.assistant + .bubble.assistant,
.chat .bubble.user + .bubble.user{
  margin-top: 1px;
}


.chat .bubble.assistant + .bubble.assistant .meta,
.chat .bubble.assistant + .bubble.assistant .header,
.chat .bubble.assistant + .bubble.assistant .bubble-header,
.chat .bubble.user + .bubble.user .meta,
.chat .bubble.user + .bubble.user .header,
.chat .bubble.user + .bubble.user .bubble-header{
  display: none !important;
}


/* Estrutura com .bubble */
.chat .bubble.assistant + .bubble.assistant .meta,
.chat .bubble.assistant + .bubble.assistant .header,
.chat .bubble.assistant + .bubble.assistant .bubble-header,
.chat .bubble.user + .bubble.user .meta,
.chat .bubble.user + .bubble.user .header,
.chat .bubble.user + .bubble.user .bubble-header{
  display: none !important;
}

/* Estrutura alternativa com .chat-message */
.chat .chat-message.assistant + .chat-message.assistant .meta,
.chat .chat-message.assistant + .chat-message.assistant .header,
.chat .chat-message.assistant + .chat-message.assistant .bubble-header,
.chat .chat-message.user + .chat-message.user .meta,
.chat .chat-message.user + .chat-message.user .header,
.chat .chat-message.user + .chat-message.user .bubble-header{
  display: none !important;
}


/* =========================================================
   Agrupamento: ocultar cabeçalho (direction • data) em mensagens consecutivas
   Estrutura real do dashboard.php:
   <div class="bubble assistant|user|system">
     <div class="small muted">...</div>
     ...
   ========================================================= */

/* Esconde o cabeçalho quando a próxima bolha é do mesmo autor */
.chat .bubble.assistant + .bubble.assistant > .small.muted,
.chat .bubble.user + .bubble.user > .small/* Remove respiro extra quando o cabeçalho está oculto */
.chat .bubble.assistant + .bubble.assistant,
.chat .bubble.user + .bubble.user{
  padding-top: 0 !important;
}


/* =========================================================
   Ajuste de alinhamento vertical do conteúdo da bolha
   ========================================================= */

/* Garante respiro vertical equilibrado */
.chat .bubble{
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Quando header (small.muted) está oculto em mensagens agrupadas,
   mantém o texto centralizado verticalmente */
.chat .bubble .small.muted{
  margin-bottom: 6px;
}


/* Bolhas humanas: padding base */
.chat .bubble:not(.system){
  padding-top: 10px;
  padding-bottom: 12px;
}

/* Header da mensagem (quando visível) cria o respiro “bonito” */
.chat .bubble > .small.muted{
  display: block;
  line-height: 1.2;
  margin: 0 0 10px 0;
}

/* Quando é consecutiva do mesmo autor, esconde o header */
.chat .bubble.assistant + .bubble.assistant > .small.muted,
.chat .bubble.user + .bubble.user > .small.muted{
  display: none;
}

/* Compensa a ausência do header: mais respiro no topo */
.chat .bubble.assistant + .bubble.assistant,
.chat .bubble.user + .bubble.user{
  padding-top: 16px;
}

/* Bolhas humanas com respiro vertical mais confortável */
.chat .bubble:not(.system){
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Header da mensagem */
.chat .bubble > .small.muted{
  display: block;
  line-height: 1.2;
  margin: 0 0 8px 0; /* mais “respiro” antes do texto */
}

/* Quando é consecutiva do mesmo autor, esconde o header */
.chat .bubble.assistant + .bubble.assistant > .small.muted,
.chat .bubble.user + .bubble.user > .small.muted{
  display: none;
}

/* Mesmo quando o header some, mantém o texto bem centralizado */
.chat .bubble.assistant + .bubble.assistant,
.chat .bubble.user + .bubble.user{
  padding-top: 12px;
}


/* =========================================================
   Chat bubbles (WhatsApp-like)
   - Cliente (user) à esquerda
   - Atendente (assistant) à direita
   - Bolha com largura do conteúdo (não 100%)
   - Mensagens longas: máximo 70% da área do chat
   - System permanece como está (full width)
   ========================================================= */

/* =========================================================
   Correção real de espaçamento entre mensagens consecutivas
   O espaço vinha do padding/margin interno do header (.meta)
   ========================================================= */

/* =========================================================
   Chat (WhatsApp-like) – ajustes finais
   - Header (small.muted) some em mensagens consecutivas (mesmo autor)
   - Quando o header some, adiciona mais respiro no topo (não fica colado)
   ========================================================= */


/* =========================================================
   Fundo do painel de mensagens (preencher sem poluir)
   - Gradiente sutil + textura mais visível (pontilhado leve)
   - Funciona em tema claro e escuro
   ========================================================= */

:root{
  --chat-bg: #f7f9fb;
  --chat-bg2: #f2f6fa;
  /* um pouco mais visível */
  --chat-dot: rgba(0,0,0,0.045);
}

html[data-theme="dark"]{
  --chat-bg: #0f172a;
  --chat-bg2: #0c1528;
  --chat-dot: rgba(255,255,255,0.06);
}

/* Aplica no container real do scroll do chat */
#chatMessages.chat-messages,
#chatMessages,
.chat-messages{
  background:
    /* pontilhado */
    radial-gradient(circle at 1px 1px, var(--chat-dot) 1.2px, transparent 1.9px),
    /* micro-gradiente (quebra o “vazio”) */
    linear-gradient(to bottom, var(--chat-bg), var(--chat-bg2)) !important;
  background-size: 10px 10px, 100% 100% !important;
  background-position: 0 0, 0 0 !important;
  background-attachment: scroll, scroll !important;
  background-color: var(--chat-bg) !important;
}


/* =========================================================
   Refino do fundo pontilhado no topo
   - evita “faixa” vazia logo abaixo do botão/toolbar
   ========================================================= */

#chatMessages.chat-messages,
#chatMessages,
.chat-messages{
  position: relative;
  padding-top: 10px; /* dá um respiro e reduz “vazio” */
}

/* “Tampa” sutil no topo para não aparecer o pontilhado em área vazia */
#chatMessages.chat-messages::before,
#chatMessages::before,
.chat-messages::before{
  content: "";
  position: sticky;
  top: 0;
  display: block;
  height: 26px;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    var(--chat-bg) 0%,
    rgba(0,0,0,0) 100%
  );
}

/* No tema escuro, usa a mesma ideia com a cor base */
html[data-theme="dark"] #chatMessages.chat-messages::before,
html[data-theme="dark"] #chatMessages::before,
html[data-theme="dark"] .chat-messages::before{
  background: linear-gradient(
    to bottom,
    var(--chat-bg) 0%,
    rgba(0,0,0,0) 100%
  );
}

/* Remove margem extra do primeiro item para não criar faixa vazia */
#chatMessages .bubble:first-child,
.chat-messages .bubble:first-child{
  margin-top: 0 !important;
}


/* Tema claro: bordas escurecem muito sutilmente (aparece mesmo em fundo claro) */
#chatMessages.chat-messages::after,
#chatMessages::after,
.chat-messages::after{
  content: "";
  position: absolute;
  inset: -70px; /* amplia bastante o fade */
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(ellipse at center,
      rgba(0,0,0,0) 60%,
      rgba(0,0,0,0.035) 82%,
      rgba(0,0,0,0.06) 100%),
    linear-gradient(to right,
      rgba(0,0,0,0.05) 0%,
      rgba(0,0,0,0) 22%,
      rgba(0,0,0,0) 78%,
      rgba(0,0,0,0.05) 100%);
}

/* Tema escuro: vinheta um pouco mais “profunda” */
html[data-theme="dark"] #chatMessages.chat-messages::after,
html[data-theme="dark"] #chatMessages::after,
html[data-theme="dark"] .chat-messages::after{
  background:
    radial-gradient(ellipse at center,
      rgba(0,0,0,0) 58%,
      rgba(0,0,0,0.22) 83%,
      rgba(0,0,0,0.34) 100%),
    linear-gradient(to right,
      rgba(0,0,0,0.26) 0%,
      rgba(0,0,0,0) 22%,
      rgba(0,0,0,0) 78%,
      rgba(0,0,0,0.26) 100%);
}

/* Camada de vignette */
#chatMessages.chat-messages::after,
#chatMessages::after,
.chat-messages::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(
    ellipse at center,
    rgba(255,255,255,0) 55%,
    rgba(255,255,255,0.06) 75%,
    rgba(255,255,255,0.10) 100%
  );
}

/* Tema escuro */
html[data-theme="dark"] #chatMessages.chat-messages::after,
html[data-theme="dark"] #chatMessages::after,
html[data-theme="dark"] .chat-messages::after{
  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,0.35) 80%,
    rgba(0,0,0,0.55) 100%
  );
}


/* =========================================================
   FIX: rolagem do chat (scrollbar)
   ========================================================= */
#chatMessages.chat-messages,
#chatMessages,
.chat-messages{
  overflow-y: auto !important;
  overflow-x: hidden;
}


/* Container real do scroll do chat */
#chatMessages.chat-messages,
#chatMessages,
.chat-messages{
  /* mantém scroll */
  overflow-y: auto !important;
  overflow-x: hidden;

  /* camadas: dots + vignette + base */
  background:
    radial-gradient(circle at 1px 1px, var(--chat-dot) 1.2px, transparent 1.9px),
    radial-gradient(ellipse at center, var(--chat-vig-1) 58%, var(--chat-vig-2) 84%, var(--chat-vig-3) 100%),
    linear-gradient(to bottom, var(--chat-bg), var(--chat-bg2)) !important;

  background-size: 10px 10px, 100% 100%, 100% 100% !important;
  background-position: 0 0, 0 0, 0 0 !important;
  background-attachment: scroll, scroll, scroll !important;
  background-color: var(--chat-bg) !important;
}


/* =========================================================
   Vignette via box-shadow (estável no scroll)
   - Não depende de pseudo-elemento nem de background-size
   - Mantém o fundo atual e “dissolve” as bordas
   ========================================================= */

:root{
  --chat-vignette: rgba(0,0,0,0.06);
  --chat-vignette-strong: rgba(0,0,0,0.09);
}

html[data-theme="dark"]{
  --chat-vignette: rgba(0,0,0,0.28);
  --chat-vignette-strong: rgba(0,0,0,0.40);
}

/* Aplica no container real do scroll do chat */
#chatMessages.chat-messages,
#chatMessages,
.chat-messages{
  /* garante rolagem */
  overflow-y: auto !important;
  overflow-x: hidden;

  /* dissolve bordas (vignette) */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.02),
    inset 0 0 90px var(--chat-vignette),
    inset 0 0 160px var(--chat-vignette-strong);
}


/* =========================================================
   Chat background final override (fix scroll artifacts + keep dots)
   - Remove pseudo-element overlays that caused banding
   - Keep dotted pattern + subtle base gradient
   - Add stable vignette via inset box-shadow
   ========================================================= */

:root{
  --chat-bg: #f7f9fb;
  --chat-bg2: #f2f6fa;
  --chat-dot: rgba(0,0,0,0.040);

  /* vignette (tema claro): escurece bordas bem sutil */
  --chat-vignette-soft: rgba(0,0,0,0.05);
  --chat-vignette-strong: rgba(0,0,0,0.08);
}

html[data-theme="dark"]{
  --chat-bg: #0f172a;
  --chat-bg2: #0c1528;
  --chat-dot: rgba(255,255,255,0.055);

  /* vignette (tema escuro): mais profunda, mas suave */
  --chat-vignette-soft: rgba(0,0,0,0.28);
  --chat-vignette-strong: rgba(0,0,0,0.40);
}

/* Container real do scroll do chat */
#chatMessages.chat-messages,
#chatMessages,
.chat-messages{
  position: relative;
  overflow-y: auto !important;
  overflow-x: hidden;

  /* Base: pontilhado + gradiente sutil */
  background:
    radial-gradient(circle at 1px 1px, var(--chat-dot) 1.2px, transparent 1.9px),
    linear-gradient(to bottom, var(--chat-bg), var(--chat-bg2)) !important;

  background-size: 10px 10px, 100% 100% !important;
  background-position: 0 0, 0 0 !important;
  background-attachment: scroll, scroll !important;
  background-color: var(--chat-bg) !important;

  /* Vinheta estável (não quebra no scroll) */
  box-shadow:
    inset 0 0 90px var(--chat-vignette-soft),
    inset 0 0 160px var(--chat-vignette-strong);
}

/* Desliga overlays antigos (evita “faixas” e vinheta quebrando) */
#chatMessages.chat-messages::before,
#chatMessages::before,
.chat-messages::before,
#chatMessages.chat-messages::after,
#chatMessages::after,
.chat-messages::after{
  display: none !important;
  background: none !important;
}


/* =========================================================
   FIX: remover borda cinza escura nos detalhes do system
   ========================================================= */

/* Remove borda e sombra do bloco de detalhes (system) */
.chat .bubble.system .details,
.chat .bubble.system pre,
.chat .bubble.system code,
.chat .bubble.system .details-content{
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background-clip: padding-box;
}

/* Garante que o container expandido não desenhe contorno */
.chat .bubble.system:focus,
.chat .bubble.system:focus-within{
  outline: none !important;
  box-shadow: none !important;
}

/* =========================================================
   ZapSet – FINAL PATCH (chat background + system details)
   Motivos:
   1) Tema claro: remover borda/vinheta escura (fade parte do branco)
   2) System > "Detalhes": remover contornos/cinza escuro ao expandir
   (SAFE: somente overrides, no fim do arquivo)
   ========================================================= */

/* ---------- 1) CHAT BACKGROUND: tema claro com fade a partir do branco ---------- */
/* Seu tema claro não define data-theme="light" sempre, então usamos "não-dark" */
html:not([data-theme="dark"]) {
  /* bordas “somem” no branco (sem escurecer) */
  --chat-vignette-soft: rgba(255,255,255,.60);
  --chat-vignette-strong: rgba(255,255,255,.92);

  /* opcional: pontilhado ligeiramente mais suave no claro */
  --chat-dot: rgba(0,0,0,0.032);
}

/* Mantém o pontilhado + gradiente, mas dissolve as bordas com “luz” (não sombra) */
html:not([data-theme="dark"]) #chatMessages.chat-messages,
html:not([data-theme="dark"]) #chatMessages,
html:not([data-theme="dark"]) .chat-messages{
  box-shadow:
    inset 0 0 120px var(--chat-vignette-soft),
    inset 0 0 220px var(--chat-vignette-strong) !important;
}

/* ---------- 2) SYSTEM DETAILS: remover borda/outline estranho ---------- */
.chat .bubble.system .zs-sysmsg-details,
.chat .bubble.system details{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Summary não pode ganhar outline do browser */
.chat .bubble.system .zs-sysmsg-details summary,
.chat .bubble.system details summary{
  outline: none !important;
}
.chat .bubble.system .zs-sysmsg-details summary:focus,
.chat .bubble.system .zs-sysmsg-details summary:focus-visible,
.chat .bubble.system details summary:focus,
.chat .bubble.system details summary:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* Evita que o “focus ring” global (outline) aplique no system */
.chat .bubble.system:focus-within{
  outline: none !important;
  box-shadow: none !important;
}

/* O conteúdo do detalhes (pre) continua legível, sem borda pesada */
.chat .bubble.system .zs-sysmsg-details pre{
  border: 1px solid color-mix(in srgb, var(--border), transparent 35%) !important; /* bem mais sutil */
  box-shadow: none !important;
  max-width: 100%;
  overflow: auto;
}

/* Se preferir SEM borda nenhuma no pre, descomente:
.chat .bubble.system .zs-sysmsg-details pre{ border: 0 !important; }
*/


/* =========================================================
   ZapSet – Guard: native browser tooltips OFF
   - Tooltip oficial do sistema é o premium (data-tooltip)
   - Qualquer title remanescente não deve renderizar UI própria
   ========================================================= */
[title]{
  /* evita cursores estranhos; tooltip nativo é neutralizado via JS */
}


/* =========================================================
   ZapSet – Tooltip cleanup (rev3)
   - Remove tooltip legado do rascunho gerado por pseudo-elementos
   - Mantém APENAS o tooltip premium baseado em [data-tooltip]
   ========================================================= */
/* rev3 */

/* rev7 */

/* rev8 */

/* ===== ZapSet – Copy icon on chat bubble hover | rev9 ===== */
.bubble{ position: relative; }
.zs-copy{
  position:absolute;
  top:8px;
  right:8px;
  width:28px;
  height:28px;
  border-radius:8px;
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition: opacity .12s ease, transform .12s ease;
}
.bubble:hover .zs-copy{
  opacity:1;
  pointer-events:auto;
  transform: translateY(-1px);
}
.zs-copy:hover{
  color: var(--text);
}

/* ===== ZapSet – FIX tooltip z-index over chat bubble | rev10 ===== */
.bubble{ z-index: 1; }
.bubble:hover{ z-index: 5; }

/* garante que o tooltip do copiar fique sempre à frente */
.zs-copy{
  z-index: 6;
}
.zs-copy[data-tooltip]::after,
.zs-copy[data-tooltip]::before{
  z-index: 99999 !important;
}

/* rev10 */

/* rev11 */

/* rev12 */

/* rev13 */

/* rev14 */

/* rev15 */

/* rev16 */

/* rev17 */

/* rev18 */

/* rev19 */


/* rev21: inline attendant name in ticket reason */
.zs-ticketReason b{font-weight:800;color:inherit;}

/* Chat header layout (responsivo e limpo) */
.zs-chatHeader { display:flex; flex-direction:column; gap:6px; }

.zs-chatHeaderTop {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}

.zs-chatHeaderTicket {
  font-weight:700;
  font-size:15px;
}

.zs-chatHeaderContact {
  font-size:13px;
  color: var(--zs-text-muted);
}

.zs-chatHeaderMeta {
  display:flex; align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;              /* mobile: quebra */
  font-size:13px;
}

.zs-chatHeaderMetaLeft,
.zs-chatHeaderMetaRight {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}

.zs-chatHeaderMetaRight { color: var(--zs-text-muted); }

/* Deixa a pill menor só no header */
.zs-chatHeader .zs-statusPill {
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1;
}

/* ===== ZapSet – Settings layout (SLA/Telefone) | rev25 ===== */
/*
  Observação:
  - Tudo é namespaced em .zs-* para não afetar o resto do sistema.
  - Mantém responsividade: 2 colunas no desktop, 1 coluna no mobile.
*/

.zs-settingsWrap{ max-width:1180px; margin:0 auto; padding:14px; }
.zs-settingsStack{ display:flex; flex-direction:column; gap:14px; }

.zs-settingsGrid{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
@media (max-width: 980px){
  .zs-settingsGrid{ grid-template-columns: 1fr; }
}

/* Header + body de card (sem dependência de markup específico) */
.zs-cardHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.zs-cardBody{ display:flex; flex-direction:column; gap:12px; }

/* Notice do topo do card (feedback de “Configuração salva”) */
.zs-sectionNotice{
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface), var(--teal) 4%);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}
html[data-theme="dark"] .zs-sectionNotice,
body[data-theme="dark"] .zs-sectionNotice{
  background: color-mix(in srgb, var(--surface), var(--teal) 6%);
}

.zs-okBadge{ display:inline-flex; align-items:center; gap:10px; font-weight:700; }
.zs-okIcon{
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: #22c55e;
  color: #0b1220;
  font-size: 16px;
  line-height: 1;
}

/* Grupo de opções (radio) */
.zs-radioGrid{ display:flex; flex-direction:column; gap:12px; margin-top:12px; }

.zs-radioItem{
  display:grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items:center;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface), transparent 2%);
}

.zs-radioItem input[type="radio"]{
  width: 18px;
  height: 18px;
  margin: 0;
}

.zs-radioText{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.zs-radioTitle{ font-weight:800; font-size:18px; line-height:1.15; }
.zs-radioSub{ color: var(--zs-text-muted, #64748b); }

.zs-radioPreview{ justify-self:end; text-align:right; font-weight:700; }
.zs-radioPreview.zs-muted{ color: var(--zs-text-muted, #64748b); font-weight:700; }

.zs-optPreviewImg{
  width: 38px; 
  height: 38px;
  border-radius: 10px;
  display:block;
}

/* Realce do item selecionado (progressivo – funciona em Edge/Chrome atuais) */
.zs-radioItem:has(input:checked){
  border-color: color-mix(in srgb, var(--primary), var(--border) 55%);
  background: color-mix(in srgb, var(--surface), var(--primary) 6%);
}

/* Mobile: mantém preview à direita, mas controla tamanho/respiração */
@media (max-width: 520px){
  .zs-radioItem{ grid-template-columns: 24px 1fr auto; padding: 12px 14px; }
  .zs-radioTitle{ font-size: 17px; }
  .zs-optPreviewImg{ width: 32px; height: 32px; border-radius: 9px; }
}

/* ===== /rev25 ===== */