:root {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --border: #e5e7eb;
  --text: #111827;
  --muted: #6b7280;
  --soft: #f9fafb;
  --brand: #10b981;
  --brand-dark: #059669;
  --brand-soft: #d1fae5;
  --side: #0f172a;
  --side-2: #1e293b;
  --danger: #ef4444;
  --warn: #f59e0b;
  --info: #6366f1;
  --bubble-in: #ffffff;
  --bubble-out: #dcfce7;
  --chat-bg: #eef2f0;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: Inter, system-ui, sans-serif; font-size: 14px; color: var(--text); background: var(--bg); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand-dark); }
.hidden { display: none !important; }

/* ---------- Botões e formulários */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--panel); padding: 8px 14px; border-radius: 8px; cursor: pointer; font-weight: 500; white-space: nowrap; }
.btn:hover { background: var(--soft); }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-danger { color: var(--danger); }
.btn-danger:hover { background: #fef2f2; }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.icon-btn { border: 0; background: transparent; padding: 6px; border-radius: 6px; cursor: pointer; color: var(--muted); display: inline-flex; }
.icon-btn:hover { background: var(--soft); color: var(--text); }
.icon-btn svg { width: 18px; height: 18px; }
label.field { display: block; margin-bottom: 14px; }
label.field > span { display: block; font-weight: 500; margin-bottom: 6px; font-size: 13px; }
.input, select.input, textarea.input { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; outline: none; }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.hint { color: var(--muted); font-size: 12px; margin-top: 4px; }
.row { display: flex; gap: 10px; align-items: center; }
.grow { flex: 1; }

/* ---------- Login */
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; }
.logo-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--brand); display: grid; place-items: center; color: #fff; }
.logo-mark svg { width: 20px; height: 20px; }

/* ---------- Layout */
.layout { display: grid; grid-template-columns: 232px 1fr; height: 100vh; }
.sidebar { background: var(--side); color: #cbd5e1; display: flex; flex-direction: column; padding: 18px 12px; }
.sidebar .logo { color: #fff; padding: 0 8px 18px; font-size: 16px; }
.sidebar .empresa { padding: 0 8px 16px; font-size: 12px; color: #94a3b8; border-bottom: 1px solid var(--side-2); margin-bottom: 12px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: #cbd5e1; text-decoration: none; margin-bottom: 2px; font-weight: 500; }
.nav a svg { width: 18px; height: 18px; flex: none; }
.nav a:hover { background: var(--side-2); color: #fff; }
.nav a.active { background: var(--brand); color: #fff; }
.nav .badge { margin-left: auto; }
.sidebar .me { margin-top: auto; border-top: 1px solid var(--side-2); padding: 12px 8px 0; display: flex; align-items: center; gap: 10px; }
.sidebar .me .me-info { flex: 1; min-width: 0; }
.sidebar .me .nome { color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .me .papel { font-size: 12px; color: #94a3b8; }
.sidebar .me .icon-btn { color: #94a3b8; }
.sidebar .me .icon-btn:hover { background: var(--side-2); color: #fff; }
.main { overflow: auto; min-width: 0; }
.page { padding: 28px 32px; max-width: 1200px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: 22px; }
.page-head p { margin: 4px 0 0; color: var(--muted); }

/* ---------- Componentes */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 18px; }
.card h3 { margin: 0 0 14px; font-size: 15px; }
.grid { display: grid; gap: 16px; }
.kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 16px; }
.kpi { padding: 16px 18px; }
.kpi .label { color: var(--muted); font-size: 13px; }
.kpi .value { font-size: 28px; font-weight: 700; margin-top: 6px; }
.kpi .value.warn { color: var(--warn); }
.kpi .value.ok { color: var(--brand-dark); }
.two { grid-template-columns: 1fr 1fr; }
table.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--soft); }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table-wrap { overflow-x: auto; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--soft); color: var(--muted); border: 1px solid var(--border); white-space: nowrap; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.green { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.pill.yellow { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.pill.red { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.pill.blue { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 2px 8px; border-radius: 6px; background: var(--soft); border: 1px solid var(--border); margin: 2px 4px 2px 0; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.badge.gray { background: #e5e7eb; color: #374151; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; color: #fff; flex: none; font-size: 14px; }
.avatar.sm { width: 32px; height: 32px; font-size: 12px; }
.empty { text-align: center; color: var(--muted); padding: 48px 16px; }
.empty svg { width: 40px; height: 40px; color: #cbd5e1; margin-bottom: 10px; }
.bar { height: 8px; border-radius: 4px; background: var(--soft); overflow: hidden; border: 1px solid var(--border); }
.bar > div { height: 100%; }
.setor-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.setor-card { padding: 18px; border-top: 4px solid var(--brand); }
.setor-card h4 { margin: 0 0 6px; font-size: 16px; }
.setor-card p { margin: 0 0 14px; color: var(--muted); min-height: 20px; }
.colors { display: flex; gap: 8px; flex-wrap: wrap; }
.colors button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.colors button.sel { border-color: var(--text); box-shadow: 0 0 0 2px #fff inset; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.checks label { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.conn-card { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.conn-card .top { display: flex; align-items: center; gap: 12px; }
.conn-card .icon { width: 42px; height: 42px; border-radius: 10px; background: #ecfdf5; color: var(--brand-dark); display: grid; place-items: center; }
.conn-card .icon svg { width: 22px; height: 22px; }
.conn-card .nome { font-weight: 600; font-size: 15px; }
.conn-card .num { color: var(--muted); font-size: 13px; }
.conn-card .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.qr-box { display: grid; place-items: center; min-height: 280px; }
.qr-box img { width: 264px; height: 264px; }
.steps { color: var(--muted); padding-left: 18px; margin: 0 0 12px; }

/* ---------- Modal e toasts */
.modal-bg { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { background: #fff; border-radius: 12px; width: 100%; max-width: 480px; max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.modal header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal header h3 { margin: 0; font-size: 16px; }
.modal .body { padding: 20px; }
.modal footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--soft); border-radius: 0 0 12px 12px; }
#toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
.toast { background: #111827; color: #fff; padding: 11px 16px; border-radius: 8px; box-shadow: var(--shadow); max-width: 360px; animation: up .2s ease; }
.toast.err { background: #b91c1c; }
.toast.ok { background: #047857; }
@keyframes up { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Atendimento */
.inbox { display: grid; grid-template-columns: 340px 1fr 280px; height: 100vh; }
.inbox.no-info { grid-template-columns: 340px 1fr; }
.conv-list { border-right: 1px solid var(--border); background: var(--panel); display: flex; flex-direction: column; min-height: 0; }
.conv-list .head { padding: 16px 14px 0; }
.conv-list .head h2 { margin: 0 0 12px; font-size: 18px; }
.search { position: relative; margin-bottom: 10px; }
.search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); }
.search .input { padding-left: 34px; }
.tabs { scrollbar-width: none; display: flex; gap: 0; border-bottom: 1px solid var(--border); margin: 0 -14px; padding: 0 10px; overflow-x: auto; }
.tabs button { font-size: 13px; border: 0; background: transparent; padding: 10px 6px; cursor: pointer; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.tabs button.active { color: var(--brand-dark); border-bottom-color: var(--brand); }
.tabs .badge { height: 18px; min-width: 18px; font-size: 10px; }
.tabs button:not(.active) .badge { background: #e5e7eb; color: #374151; }
.tabs button.alert:not(.active) .badge { background: var(--warn); color: #fff; }
.list-filter { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.list-filter select { padding: 6px 10px; font-size: 13px; }
.convs { overflow-y: auto; flex: 1; }
.conv { display: flex; gap: 11px; padding: 12px 14px; border-bottom: 1px solid #f1f5f9; cursor: pointer; }
.conv:hover { background: var(--soft); }
.conv.active { background: #ecfdf5; box-shadow: inset 3px 0 0 var(--brand); }
.conv .c-body { flex: 1; min-width: 0; }
.conv .c-top { display: flex; justify-content: space-between; gap: 8px; }
.conv .c-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv .c-time { color: var(--muted); font-size: 12px; flex: none; }
.conv .c-last { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.conv .c-meta { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.conv .c-meta .chip { margin: 0; }
.conv.unread .c-last { color: var(--text); font-weight: 500; }

.chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--chat-bg); }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--panel); border-bottom: 1px solid var(--border); }
.chat-head .who { flex: 1; min-width: 0; }
.chat-head .who .n { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head .who .s { color: var(--muted); font-size: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chat-head .acts { display: flex; gap: 8px; }
.back-btn { display: none; }
.msgs { flex: 1; overflow-y: auto; padding: 18px 6%; display: flex; flex-direction: column; gap: 6px; }
.msg { max-width: 68%; padding: 8px 12px 6px; border-radius: 10px; box-shadow: 0 1px 1px rgba(0,0,0,.06); word-wrap: break-word; line-height: 1.4; }
.msg.in { background: var(--bubble-in); align-self: flex-start; border-top-left-radius: 2px; }
.msg.out { background: var(--bubble-out); align-self: flex-end; border-top-right-radius: 2px; }
.msg .who { font-size: 12px; font-weight: 600; color: var(--brand-dark); margin-bottom: 2px; }
.msg .meta { font-size: 11px; color: var(--muted); text-align: right; margin-top: 3px; display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.msg.err { background: #fee2e2; }
.msg .meta.err { color: var(--danger); }
.sys { align-self: center; background: rgba(255,255,255,.75); color: var(--muted); font-size: 12px; padding: 4px 12px; border-radius: 999px; margin: 6px 0; }
.day { align-self: center; background: #fff; color: var(--muted); font-size: 12px; padding: 4px 12px; border-radius: 6px; margin: 10px 0 4px; box-shadow: 0 1px 1px rgba(0,0,0,.05); }
.composer { background: var(--panel); border-top: 1px solid var(--border); padding: 12px 16px; }
.composer .banner { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; padding: 8px 12px; border-radius: 8px; margin-bottom: 10px; font-size: 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.composer .line { display: flex; gap: 10px; align-items: flex-end; }
.composer textarea { overflow-y: auto; scrollbar-width: thin; flex: 1; resize: none; max-height: 140px; min-height: 42px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; outline: none; }
.composer textarea:focus { border-color: var(--brand); }
.composer .opts { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); font-size: 12px; }
.composer .opts label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.send { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--brand); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.send:hover { background: var(--brand-dark); }
.send svg { width: 18px; height: 18px; }
.chat-empty { flex: 1; display: grid; place-items: center; text-align: center; color: var(--muted); }
.chat-empty svg { width: 56px; height: 56px; color: #a7f3d0; }
.info { border-left: 1px solid var(--border); background: var(--panel); overflow-y: auto; padding: 22px 18px; }
.info .center { text-align: center; margin-bottom: 18px; }
.info .avatar { width: 64px; height: 64px; font-size: 22px; margin: 0 auto 10px; }
.info .nm { font-weight: 600; font-size: 16px; }
.info dl { margin: 0; }
.info dt { font-size: 12px; color: var(--muted); margin-top: 14px; }
.info dd { margin: 3px 0 0; font-weight: 500; }

/* ---------- Responsivo */
@media (max-width: 1100px) { .inbox { grid-template-columns: 320px 1fr; } .info { display: none; } }
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .sidebar { flex-direction: row; align-items: center; padding: 8px 10px; gap: 6px; overflow-x: auto; }
  .sidebar .logo, .sidebar .empresa { display: none; }
  .nav { display: flex; gap: 2px; }
  .nav a span.lbl { display: none; }
  .sidebar .me { margin: 0 0 0 auto; border: 0; padding: 0; }
  .sidebar .me .me-info, .sidebar .me .avatar { display: none; }
  .inbox, .inbox.no-info { grid-template-columns: 1fr; height: calc(100vh - 54px); }
  .inbox .chat { display: none; }
  .inbox.chat-open .conv-list { display: none; }
  .inbox.chat-open .chat { display: flex; }
  .back-btn { display: inline-flex; }
  .msg { max-width: 85%; }
  .msgs { padding: 14px 10px; }
  .page { padding: 20px 16px; }
  .two { grid-template-columns: 1fr; }
  .chat-head .acts .btn .lbl { display: none; }
  .checks { grid-template-columns: 1fr; }
}

/* ---------- Áudio: player estilo WhatsApp */
.aud { display: flex; align-items: center; gap: 10px; min-width: 250px; padding: 2px 0; }
.aud-play { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 0; background: transparent; color: #54656f; cursor: pointer; display: grid; place-items: center; }
.aud-play:hover { background: rgba(0,0,0,.05); }
.aud-play svg { width: 22px; height: 22px; }
.aud-mid { flex: 1; min-width: 0; }
.aud-time { font-size: 11px; color: var(--muted); margin-top: 3px; }
.aud-bar { --p: 0%; -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; margin: 8px 0 0; cursor: pointer;
  background: linear-gradient(to right, #8696a0 var(--p), #d1d7db var(--p)); outline: none; }
.msg.out .aud-bar { background: linear-gradient(to right, #4b9e7a var(--p), #b5d9c4 var(--p)); }
.aud-bar::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: #34b7f1; border: 0; }
.aud-bar::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: #34b7f1; border: 0; }
.msg.out .aud-bar::-webkit-slider-thumb { background: var(--brand-dark); }
.aud-vel { flex: none; border: 0; border-radius: 12px; background: rgba(0,0,0,.08); color: #3b4a54; font-size: 12px; font-weight: 700; padding: 4px 9px; cursor: pointer; min-width: 42px; }
.aud-vel:hover { background: rgba(0,0,0,.14); }
.aud.tocando .aud-vel { background: #3b4a54; color: #fff; }

/* ---------- Gravador */
.rec-line { align-items: center !important; }
.rec-lixo { color: var(--danger); }
.rec-lixo:hover { background: #fef2f2; color: var(--danger); }
.rec-status { flex: 1; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border-radius: 10px; background: var(--soft); border: 1px solid var(--border); color: var(--muted); }
.rec-status b { color: var(--text); font-variant-numeric: tabular-nums; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: pulsa 1s infinite; }
@keyframes pulsa { 50% { opacity: .25; } }
.rec-stop { background: var(--danger); }
.rec-stop:hover { background: #dc2626; }
.rec-previa { flex: 1; min-width: 0; background: var(--soft); border: 1px solid var(--border); border-radius: 10px; padding: 2px 10px 2px 4px; }
.rec-previa .aud { min-width: 0; }
.spin { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

.msg .txt { white-space: pre-wrap; }

/* ---------- Anexos */
.anexo-wrap { position: relative; align-self: flex-end; }
.anexo-btn { width: 42px; height: 42px; justify-content: center; align-items: center; }
.anexo-btn svg { width: 22px; height: 22px; }
.anexo-menu { position: absolute; bottom: 50px; left: 0; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.15); padding: 6px; min-width: 180px; z-index: 20; animation: up .15s ease; }
.anexo-menu button { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: transparent; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-weight: 500; text-align: left; }
.anexo-menu button:hover { background: var(--soft); }
.anexo-menu .ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.anexo-menu .ic svg { width: 17px; height: 17px; }
.ic.roxo { background: #7c3aed; } .ic.rosa { background: #db2777; } .ic.azul { background: #2563eb; }
.m-img { display: block; max-width: 300px; max-height: 320px; width: 100%; object-fit: cover; border-radius: 8px; cursor: zoom-in; margin: 2px 0 4px; background: #f1f5f9; min-height: 80px; }
.m-vid { display: block; max-width: 320px; width: 100%; max-height: 320px; border-radius: 8px; background: #000; margin: 2px 0 4px; }
.m-doc { display: flex; align-items: center; gap: 10px; min-width: 240px; max-width: 320px; padding: 10px; border-radius: 8px; background: rgba(0,0,0,.05); color: inherit; text-decoration: none; margin: 2px 0 4px; }
.m-doc:hover { background: rgba(0,0,0,.08); }
.m-doc-ic { position: relative; width: 36px; height: 42px; flex: none; color: #64748b; display: grid; place-items: center; }
.m-doc-ic svg { width: 36px; height: 42px; stroke-width: 1.4; }
.m-doc-ic b { position: absolute; bottom: 7px; font-size: 8px; color: #fff; background: #ef4444; padding: 1px 3px; border-radius: 2px; }
.m-doc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m-doc-nome { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-doc-tam { font-size: 12px; color: var(--muted); }
.m-doc-dl { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #cbd5e1; display: grid; place-items: center; color: #64748b; flex: none; }
.m-doc-dl svg { width: 16px; height: 16px; }
.pv-lista { display: grid; gap: 10px; max-height: 50vh; overflow: auto; }
.pv-lista.imagem { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pv-img { width: 100%; height: 150px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.pv-lista.imagem.um { grid-template-columns: 1fr; }
.pv-lista.imagem.um .pv-img { height: auto; max-height: 50vh; object-fit: contain; background: var(--soft); }
.pv-vid { width: 100%; max-height: 50vh; border-radius: 8px; background: #000; }
.pv-doc { max-width: none; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 60; display: grid; place-items: center; padding: 40px 16px; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 80px); border-radius: 4px; }
.lb-acts { position: fixed; top: 12px; right: 12px; display: flex; gap: 6px; }
.lb-acts .icon-btn { color: #fff; background: rgba(255,255,255,.12); }
.lb-acts .icon-btn:hover { background: rgba(255,255,255,.25); color: #fff; }

/* ---------- Histórico */
.hist-mais { display: flex; justify-content: center; margin: 4px 0 10px; }
.hist-mais .btn { background: rgba(255,255,255,.9); }
.hist-fim { align-self: center; color: var(--muted); font-size: 12px; margin: 4px 0 10px; }
.hist-sep { display: flex; align-items: center; gap: 10px; margin: 16px 0 6px; color: var(--muted); font-size: 12px; }
.hist-sep::before, .hist-sep::after { content: ''; flex: 1; height: 1px; background: #cbd5e1; }
.hist-sep span { background: #e2e8f0; padding: 4px 12px; border-radius: 999px; text-align: center; }
.hist-sep.atual span { background: var(--brand-soft); color: #047857; }

/* ---------- Etiquetas */
.etq { --c: #8b5cf6; display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 999px;
  color: color-mix(in srgb, var(--c) 75%, #000); background: color-mix(in srgb, var(--c) 18%, #fff); border: 1px solid color-mix(in srgb, var(--c) 45%, #fff); white-space: nowrap; }
.etq button { border: 0; background: transparent; padding: 0; margin-right: -3px; cursor: pointer; color: inherit; display: inline-flex; opacity: .7; }
.etq button:hover { opacity: 1; }
.etq button svg { width: 12px; height: 12px; }
.info-etq { position: relative; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.info-etq-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 12px; color: var(--muted); }
.info-etq-head span { display: flex; align-items: center; gap: 6px; }
.info-etq-head svg { width: 14px; height: 14px; }
.info-etq-head .btn { padding: 3px 7px; }
#etq-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.etq-pop { position: absolute; right: 0; top: 44px; z-index: 15; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.15); padding: 6px; width: 230px; max-height: 300px; overflow: auto; }
.etq-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.etq-opt:hover { background: var(--soft); }
.etq-nova { display: flex; gap: 6px; padding: 6px 4px 2px; border-top: 1px solid var(--border); margin-top: 4px; }
.etq-nova .input { padding: 6px 8px; font-size: 13px; }

/* ---------- Painel de filtros */
.conv-list { position: relative; }
.filtro-btn { padding: 8px 10px; position: relative; }
.filtro-btn.ativo { border-color: var(--brand); color: var(--brand-dark); background: #ecfdf5; }
.filtro-btn .badge { position: absolute; top: -7px; right: -7px; height: 18px; min-width: 18px; font-size: 10px; }
.filtros-ativos { display: flex; justify-content: space-between; padding: 8px 14px; font-size: 12px; color: var(--muted); background: #f0fdf4; border-bottom: 1px solid var(--border); }
.filtros-ativos a, .f-sub a, .f-tit a { color: #3b82f6; cursor: pointer; font-weight: 500; }
.filtros-painel { position: absolute; inset: 0; z-index: 12; background: #fff; display: flex; flex-direction: column; border-left: 3px solid #3b82f6; animation: entra .18s ease; }
@keyframes entra { from { transform: translateX(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
.f-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 10px; }
.f-head h3 { margin: 0; font-size: 20px; }
.f-sub { display: flex; justify-content: space-between; padding: 6px 18px 14px; color: var(--muted); border-bottom: 1px solid var(--border); }
.f-corpo { overflow-y: auto; flex: 1; }
.f-sec { padding: 14px 18px 16px; border-bottom: 1px solid var(--border); }
.f-tit { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 15px; }
.f-tit > span:first-child { display: flex; align-items: center; gap: 8px; flex: 1; }
.f-tit svg { width: 17px; height: 17px; color: #475569; }
.f-cont { color: var(--muted); font-size: 13px; }
.f-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.f-chips.col { flex-direction: column; align-items: flex-start; }
.f-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d1d5db; background: #fff; border-radius: 999px; padding: 5px 13px; cursor: pointer; font-size: 14px; color: #374151; }
.f-chip:hover { background: var(--soft); }
.f-chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.f-chip.on { border-color: #3b82f6; color: #2563eb; box-shadow: 0 0 0 1px #3b82f6 inset; background: #eff6ff; }
.f-chip[data-etq] { --c: #8b5cf6; color: color-mix(in srgb, var(--c) 75%, #000); background: color-mix(in srgb, var(--c) 18%, #fff); border-color: color-mix(in srgb, var(--c) 50%, #fff); }
.f-chip[data-etq].on { box-shadow: 0 0 0 2px var(--c); border-color: var(--c); }
.f-wa { width: 20px; height: 20px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; }
.f-wa.of { background: #128c7e; }
.f-wa svg { width: 12px; height: 12px; }
.f-avs { display: flex; flex-wrap: wrap; gap: 10px; }
.f-av { border: 2px solid transparent; border-radius: 50%; padding: 2px; background: transparent; cursor: pointer; }
.f-av .avatar { width: 40px; height: 40px; }
.f-av.on { border-color: #3b82f6; }
.f-av.sem { width: 48px; height: 48px; display: grid; place-items: center; border: 2px solid #cbd5e1; color: #64748b; }
.f-av.sem svg { width: 18px; height: 18px; }
.f-av.sem.on { border-color: #3b82f6; color: #2563eb; }
.c-meta .etq { font-size: 11px; padding: 1px 7px; }

/* ---------- Contatos */
.page-wide { max-width: 1400px; }
.h-count { color: #94a3b8; font-weight: 700; margin-left: 6px; }
.ct-card { padding: 18px 20px 6px; }
.ct-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.ct-busca { width: 320px; max-width: 100%; margin: 0; }
.ct-busca .input, .ct-sel { border-radius: 999px; }
.ct-sel { width: auto; min-width: 150px; padding: 9px 14px; }
.ct-toolbar .btn-primary { border-radius: 999px; padding: 9px 18px; }
.kebab { width: 38px; height: 38px; border-radius: 50%; justify-content: center; align-items: center; background: var(--soft); }
.kebab svg { width: 18px; height: 18px; }
.dd-wrap { position: relative; }
.dd { position: absolute; top: calc(100% + 6px); left: 0; z-index: 25; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.14); padding: 6px; min-width: 220px; max-height: 340px; overflow: auto; }
.dd-right { left: auto; right: 0; }
.dd > button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; padding: 9px 12px; border-radius: 8px; cursor: pointer; text-align: left; font-size: 14px; }
.dd > button:hover { background: var(--soft); }
.dd > button svg { width: 16px; height: 16px; color: var(--muted); }
.link { color: #3b82f6; cursor: pointer; font-weight: 500; }
.ct-lote { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.ct-table th { background: transparent; text-transform: none; font-size: 13px; color: var(--text); letter-spacing: 0; }
.ct-table tr.sel td { background: #f0f9ff; }
.ct-table tbody tr:hover td { background: var(--soft); }
.ct-nome { font-weight: 600; }
.ct-nome mark { background: #fef08a; border-radius: 2px; padding: 0 1px; }
.ct-etqs { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.ct-etqs .etq { font-size: 11px; padding: 1px 7px; }
.nowrap { white-space: nowrap; }
.ct-rodape { display: flex; justify-content: space-between; align-items: center; padding: 12px 4px; color: var(--muted); font-size: 13px; }
.etq-pick { display: flex; flex-wrap: wrap; gap: 10px; }
.etq-pick label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.vc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.vc-grid dt { font-size: 12px; color: var(--muted); }
.vc-grid dd { margin: 2px 0 0; font-weight: 500; }
.vc-obs { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 10px 12px; white-space: pre-wrap; margin-top: 10px; }
.vc-ats { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; }
.vc-at { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.vc-at:hover { background: var(--soft); }
.vc-last { color: var(--muted); font-size: 13px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drop { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 34px 20px; border: 2px dashed #cbd5e1; border-radius: 12px; cursor: pointer; color: var(--muted); }
.drop b { color: var(--text); }
.drop:hover, .drop.over { border-color: var(--brand); background: #f0fdf4; }
.imp-arq { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--soft); border-radius: 8px; flex-wrap: wrap; }
.imp-arq svg { width: 18px; height: 18px; color: var(--muted); }
.imp-arq .link { margin-left: auto; }
.imp-h { margin: 18px 0 10px; font-size: 14px; }
.imp-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.imp-map label span { display: block; font-size: 12px; font-weight: 500; margin-bottom: 4px; }
.imp-map select { padding: 7px 10px; }
.imp-pv { margin-top: 6px; border: 1px solid var(--border); border-radius: 8px; }
.imp-pv td { padding: 8px 12px; font-size: 13px; }
.imp-pv td.erro { color: var(--danger); text-decoration: line-through; }
.imp-dest { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.radio-card { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.radio-card:has(input:checked) { border-color: var(--brand); background: #f0fdf4; }
.radio-card b { display: block; }
.radio-card span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.imp-res { text-align: center; }
.imp-ok { width: 56px; height: 56px; border-radius: 50%; background: #d1fae5; color: #047857; display: grid; place-items: center; margin: 0 auto 8px; }
.imp-ok svg { width: 28px; height: 28px; }
.imp-erros { text-align: left; max-height: 180px; overflow: auto; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 10px 12px; font-size: 13px; color: #991b1b; }
@media (max-width: 900px) { .imp-dest, .vc-grid { grid-template-columns: 1fr; } .ct-busca { width: 100%; } }
.ct-toolbar .ct-sel { width: auto; flex: none; } .ct-toolbar .ct-busca { flex: none; }

/* ---------- Agendamento (painel lateral) */
.ag-btn { position: relative; padding: 5px 9px; }
.ag-btn .badge { position: absolute; top: -7px; right: -7px; height: 17px; min-width: 17px; font-size: 10px; background: #3b82f6; }
.drawer-bg { position: fixed; inset: 0; background: rgba(15,23,42,.35); z-index: 45; display: flex; justify-content: flex-end; }
.drawer { width: 100%; max-width: 560px; height: 100%; background: #fff; display: flex; flex-direction: column; box-shadow: -10px 0 40px rgba(0,0,0,.15); animation: dr .2s ease; }
@keyframes dr { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.dr-head { display: flex; align-items: center; gap: 12px; padding: 22px 24px 10px; }
.dr-head h3 { margin: 0; font-size: 21px; }
.dr-contato { display: flex; align-items: center; gap: 10px; padding: 10px 24px 6px; font-size: 15px; }
.dr-tabs { display: flex; border-bottom: 1px solid var(--border); padding: 0 16px; overflow-x: auto; }
.dr-tabs button { border: 0; background: transparent; padding: 14px 14px; font-size: 15px; display: flex; gap: 8px; align-items: center; cursor: pointer; color: #374151; border-bottom: 2px solid transparent; white-space: nowrap; }
.dr-tabs button svg { width: 17px; height: 17px; }
.dr-tabs button.on { color: #3b82f6; border-bottom-color: #3b82f6; font-weight: 600; }
.dr-corpo { flex: 1; overflow-y: auto; padding: 20px 24px; }
.ag-aviso { display: flex; gap: 10px; align-items: flex-start; background: #fffbeb; border-radius: 10px; padding: 12px 14px; margin-bottom: 18px; color: #374151; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.ag-aviso svg { width: 18px; height: 18px; color: #f59e0b; flex: none; margin-top: 1px; }
.ag-info { display: flex; align-items: center; gap: 8px; background: #e0ecff; color: #1e3a8a; border-radius: 10px; padding: 10px 14px; margin: -6px 0 12px; }
.ag-info svg { width: 16px; height: 16px; color: #3b82f6; }
.ag-info.erro { background: #fee2e2; color: #991b1b; }
.ag-info.erro svg { color: var(--danger); }
.ag-atalhos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.ag-atalhos .f-chip { font-size: 13px; padding: 4px 11px; }
.ag-toggle { display: flex; align-items: center; gap: 10px; font-weight: 600; margin-bottom: 16px; cursor: pointer; }
.ag-toggle input { display: none; }
.ag-toggle .sw { width: 46px; height: 26px; border-radius: 13px; background: #cbd5e1; position: relative; transition: .2s; }
.ag-toggle .sw::after { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.ag-toggle input:checked + .sw { background: #3b82f6; }
.ag-toggle input:checked + .sw::after { left: 23px; }
.dr-acoes { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.dr-btn { justify-content: center; border-radius: 999px; padding: 12px; font-size: 15px; }
.dr-btn.btn-primary { background: #3b82f6; border-color: #3b82f6; }
.dr-btn.btn-primary:hover { background: #2563eb; }
.ag-item { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.ag-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.ag-data { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 13px; }
.ag-data svg { width: 14px; height: 14px; }
.ag-txt { white-space: pre-wrap; background: var(--soft); border-radius: 8px; padding: 9px 11px; }
.ag-erro { color: #b91c1c; font-size: 13px; margin-top: 6px; }
.ag-rod { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; color: var(--muted); font-size: 12px; flex-wrap: wrap; }

/* Detalhes do contato: só quando aberto pelo botão */
.ag-btn.on { background: #eff6ff; border-color: #93c5fd; color: #2563eb; }
.info-top { display: flex; align-items: center; justify-content: space-between; margin: -8px 0 14px; }
.info-top b { font-size: 14px; }
@media (max-width: 1100px) {
  .info:not(.hidden) { display: block; position: fixed; right: 0; top: 0; bottom: 0; width: 300px; z-index: 30; box-shadow: -10px 0 30px rgba(0,0,0,.15); }
}

/* ---------- Divisória arrastável lista | chat */
.inbox { grid-template-columns: var(--lista-w, 340px) 1fr 280px; }
.inbox.no-info { grid-template-columns: var(--lista-w, 340px) 1fr; }
@media (max-width: 1100px) { .inbox { grid-template-columns: var(--lista-w, 320px) 1fr; } }
.divisoria { position: absolute; top: 0; bottom: 0; right: -4px; width: 8px; cursor: col-resize; z-index: 14; touch-action: none; }
.divisoria::after { content: ''; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: transparent; transition: background .15s; }
.divisoria:hover::after, .divisoria.ativa::after { background: #3b82f6; }
body.arrastando { cursor: col-resize !important; user-select: none; }
body.arrastando iframe, body.arrastando video { pointer-events: none; }
@media (max-width: 900px) { .divisoria { display: none; } .inbox, .inbox.no-info { grid-template-columns: 1fr !important; } }

/* ---------- Menu lateral recolhível */
.layout { transition: grid-template-columns .2s ease; }
.sidebar { overflow: hidden; }
.sidebar .logo { position: relative; }
.menu-toggle { margin-left: auto; width: 30px; height: 30px; border-radius: 8px; border: 0; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; transition: background .15s; }
.menu-toggle:hover { background: rgba(255,255,255,.22); }
.menu-toggle svg { width: 16px; height: 16px; transition: transform .2s; }
.layout.menu-mini { grid-template-columns: 72px 1fr; }
.menu-mini .sidebar { padding: 18px 10px; }
.menu-mini .sidebar .logo { flex-direction: column; gap: 12px; padding: 0 0 16px; }
.menu-mini .logo-txt, .menu-mini .sidebar .empresa, .menu-mini .nav .lbl, .menu-mini .sidebar .me .me-info { display: none; }
.menu-mini .menu-toggle { margin: 0; }
.menu-mini .menu-toggle svg { transform: rotate(180deg); }
.menu-mini .nav a { justify-content: center; padding: 10px 0; position: relative; }
.menu-mini .nav .badge { position: absolute; top: 2px; right: 4px; height: 16px; min-width: 16px; font-size: 10px; padding: 0 4px; }
.menu-mini .sidebar .me { flex-direction: column; gap: 10px; padding: 12px 0 0; }
@media (max-width: 900px) { .menu-toggle { display: none; } .layout.menu-mini { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .menu-mini .sidebar { padding: 8px 10px; } .menu-mini .sidebar .me { flex-direction: row; padding: 0; } .menu-mini .nav a { padding: 9px 10px; } }

/* ---------- Botão de perfil no rodapé do menu */
button.me { border: 0; background: transparent; color: inherit; font: inherit; text-align: left; width: 100%; cursor: pointer; border-radius: 10px; padding: 10px 8px !important; margin-top: auto; border-top: 0 !important; }
button.me:hover { background: var(--side-2); }
.sidebar { position: relative; }
.sidebar > button.me { box-shadow: 0 -1px 0 var(--side-2); border-radius: 0 0 10px 10px; }
.me-av { position: relative; flex: none; display: inline-flex; }
.me-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #94a3b8; border: 2px solid var(--side); }
.me-dot.on { background: var(--brand); }
.me-chev { color: #94a3b8; display: inline-flex; transform: rotate(90deg); }
.me-chev svg { width: 16px; height: 16px; }
img.avatar { object-fit: cover; background: #e5e7eb; }
.menu-mini .me-chev { display: none; }
.menu-mini button.me { justify-content: center; }

.perfil-pop { position: fixed; left: 12px; bottom: 76px; width: 360px; max-width: calc(100vw - 24px); max-height: calc(100vh - 96px); overflow: auto; z-index: 60;
  background: var(--panel); color: var(--text); border-radius: 18px; box-shadow: 0 20px 50px rgba(0,0,0,.28); display: flex; flex-direction: column; animation: up .18s ease; }
.pp-head { text-align: center; padding: 22px 20px 8px; }
.pp-foto { position: relative; display: inline-block; cursor: pointer; }
.pp-foto .avatar { width: 72px; height: 72px; font-size: 26px; }
.pp-cam { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; background: #3b82f6; color: #fff; display: grid; place-items: center; border: 2px solid var(--panel); }
.pp-cam svg { width: 13px; height: 13px; }
.pp-nome { font-weight: 700; font-size: 17px; margin-top: 10px; }
.pp-tabs { display: flex; justify-content: center; gap: 4px; border-bottom: 1px solid var(--border); padding: 0 12px; }
.pp-tabs button { border: 0; background: transparent; padding: 12px 14px; display: flex; gap: 7px; align-items: center; cursor: pointer; font-size: 15px; color: var(--text); border-bottom: 2px solid transparent; }
.pp-tabs button svg { width: 17px; height: 17px; }
.pp-tabs button.on { color: #3b82f6; border-bottom-color: #3b82f6; font-weight: 600; }
.pp-corpo { padding: 18px 20px; flex: 1; }
.pp-sec { margin-bottom: 18px; }
.pp-tit { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 10px; }
.pp-help { width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid #3b82f6; color: #3b82f6; font-size: 11px; font-weight: 700; display: grid; place-items: center; cursor: help; }
.seg { display: flex; background: #eef2ff; border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; background: transparent; padding: 9px 8px; border-radius: 999px; cursor: pointer; font-size: 14px; color: #374151; }
.seg button svg { width: 17px; height: 17px; }
.seg button.on { background: #3b82f6; color: #fff; box-shadow: 0 2px 6px rgba(59,130,246,.35); }
.seg button:not(.on):hover { background: rgba(59,130,246,.1); }
.pp-linha { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.pp-linha span { color: var(--muted); }
.pp-sair { width: 100%; justify-content: center; margin-top: 16px; }
.pp-rodape { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; border-top: 1px solid var(--border); color: var(--muted); text-decoration: none; }
.pp-rodape:hover { color: var(--text); }
.pp-rodape svg { width: 15px; height: 15px; }
@media (max-width: 900px) { .perfil-pop { left: auto; right: 12px; top: 60px; bottom: auto; } }

/* ---------- Tema escuro */
html[data-tema="escuro"] {
  --bg: #0b1220; --panel: #111827; --border: #263042; --text: #e5e7eb; --muted: #94a3b8; --soft: #1a2333;
  --brand-soft: #064e3b; --bubble-in: #1f2937; --bubble-out: #064e3b; --chat-bg: #0d1520; --side: #060b16; --side-2: #172033;
  color-scheme: dark;
}
html[data-tema="escuro"] .input, html[data-tema="escuro"] .btn:not(.btn-primary), html[data-tema="escuro"] .modal,
html[data-tema="escuro"] .dd, html[data-tema="escuro"] .anexo-menu, html[data-tema="escuro"] .etq-pop, html[data-tema="escuro"] .drawer,
html[data-tema="escuro"] .filtros-painel, html[data-tema="escuro"] .f-chip:not(.on):not([data-etq]), html[data-tema="escuro"] .composer textarea,
html[data-tema="escuro"] .day, html[data-tema="escuro"] .hist-mais .btn { background: var(--panel); color: var(--text); border-color: var(--border); }
html[data-tema="escuro"] .modal footer { background: var(--soft); }
html[data-tema="escuro"] .btn:not(.btn-primary):hover, html[data-tema="escuro"] .dd > button:hover, html[data-tema="escuro"] .anexo-menu button:hover { background: var(--soft); }
html[data-tema="escuro"] .conv { border-bottom-color: var(--border); }
html[data-tema="escuro"] .conv.active { background: #0f2a22; }
html[data-tema="escuro"] .sys, html[data-tema="escuro"] .hist-sep span { background: #1e293b; color: var(--muted); }
html[data-tema="escuro"] .hist-sep.atual span { background: #064e3b; color: #a7f3d0; }
html[data-tema="escuro"] .seg { background: #1a2333; }
html[data-tema="escuro"] .seg button { color: var(--text); }
html[data-tema="escuro"] .ag-aviso, html[data-tema="escuro"] .composer .banner, html[data-tema="escuro"] .vc-obs { background: #2a2210; color: #fde68a; border-color: #4a3a12; }
html[data-tema="escuro"] .ag-info { background: #172554; color: #bfdbfe; }
html[data-tema="escuro"] .filtros-ativos, html[data-tema="escuro"] .radio-card:has(input:checked), html[data-tema="escuro"] .drop:hover { background: #0f2a22; }
html[data-tema="escuro"] .ct-lote, html[data-tema="escuro"] .f-chip.on { background: #172554; border-color: #1e40af; color: #bfdbfe; }
html[data-tema="escuro"] .ct-table tr.sel td { background: #172033; }
html[data-tema="escuro"] .aud-play, html[data-tema="escuro"] .aud-vel { color: var(--text); }
html[data-tema="escuro"] .aud-vel { background: rgba(255,255,255,.1); }
html[data-tema="escuro"] .aud-bar { background: linear-gradient(to right, #94a3b8 var(--p), #334155 var(--p)); }
html[data-tema="escuro"] .msg.out .aud-bar { background: linear-gradient(to right, #6ee7b7 var(--p), #14532d var(--p)); }
html[data-tema="escuro"] .m-doc { background: rgba(255,255,255,.06); }
html[data-tema="escuro"] .pill { background: var(--soft); border-color: var(--border); }
html[data-tema="escuro"] .pill.green { background: #052e1f; color: #6ee7b7; border-color: #065f46; }
html[data-tema="escuro"] .pill.yellow { background: #2a2210; color: #fcd34d; border-color: #4a3a12; }
html[data-tema="escuro"] .pill.red { background: #2a0f12; color: #fca5a5; border-color: #7f1d1d; }
html[data-tema="escuro"] .pill.blue { background: #172554; color: #93c5fd; border-color: #1e3a8a; }
html[data-tema="escuro"] .etq, html[data-tema="escuro"] .f-chip[data-etq] { color: color-mix(in srgb, var(--c) 70%, #fff); background: color-mix(in srgb, var(--c) 22%, #111827); border-color: color-mix(in srgb, var(--c) 45%, #111827); }
html[data-tema="escuro"] .table th { background: var(--soft); }
html[data-tema="escuro"] .ct-table th { background: transparent; }
html[data-tema="escuro"] .badge.gray, html[data-tema="escuro"] .tabs button:not(.active) .badge { background: #334155; color: #e5e7eb; }
html[data-tema="escuro"] .ct-nome mark { background: #854d0e; color: #fff; }
html[data-tema="escuro"] .kebab { background: var(--soft); }

/* ---------- Perfil: aba "Minha conta" enxuta */
.pp-corpo-conta { padding: 8px 0 0; display: flex; flex-direction: column; min-height: 300px; }
.pp-menu { padding: 6px 12px 12px; border-bottom: 1px solid var(--border); }
.pp-menu button { display: flex; align-items: center; gap: 14px; width: 100%; border: 0; background: transparent; padding: 11px 12px; border-radius: 10px; cursor: pointer; font-size: 16px; color: var(--text); text-align: left; }
.pp-menu button:hover { background: var(--soft); }
.pp-menu svg { width: 21px; height: 21px; stroke-width: 1.7; }
.pp-org { padding: 18px 16px; }
.pp-org-tit { font-size: 18px; margin: 0 6px 14px; }
.pp-org-item { display: flex; align-items: center; gap: 12px; background: #e8edfb; border-radius: 999px; padding: 6px 8px 6px 6px; font-size: 16px; }
.pp-org-av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #f97316, #c2410c); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.pp-org-item .icon-btn svg { width: 18px; height: 18px; }
.pp-sair-link { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 16px; color: #e11d48 !important; width: 100%; margin-top: auto; }
.pp-sair-link svg { width: 18px; height: 18px; }
.pp-sair-link:hover { background: #fff1f2; }
.mp-foto { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.mp-sep { font-weight: 600; font-size: 13px; margin: 4px 0 8px; padding-top: 14px; border-top: 1px solid var(--border); }
html[data-tema="escuro"] .pp-org-item { background: #1e293b; }
html[data-tema="escuro"] .pp-sair-link:hover { background: #2a0f12; }

/* ---------- Item da lista de conversas (clean) */
.conv { gap: 12px; padding: 13px 14px; align-items: flex-start; }
.c-av { position: relative; flex: none; }
.c-av .avatar { width: 46px; height: 46px; font-size: 15px; }
.c-wa { position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; border: 2px solid var(--panel); }
.c-wa svg { width: 11px; height: 11px; }
.conv .c-name { font-size: 15px; font-weight: 500; }
.conv.unread .c-name { font-weight: 700; }
.conv .c-time { font-size: 12px; }
.conv.unread .c-time { color: var(--text); font-weight: 600; }
.c-mid { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.c-mid .c-last { flex: 1; min-width: 0; margin: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-mid .c-last b { color: var(--text); font-weight: 600; }
.conv.unread .c-mid .c-last { color: var(--text); }
.c-badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #22a046; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.c-bot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; min-height: 24px; }
.c-etqs { display: flex; gap: 4px; min-width: 0; overflow: hidden; }
.c-etq { --c: #8b5cf6; font-size: 11px; padding: 1px 7px; border-radius: 999px; white-space: nowrap; color: color-mix(in srgb, var(--c) 75%, #000); background: color-mix(in srgb, var(--c) 16%, #fff); }
html[data-tema="escuro"] .c-etq { color: color-mix(in srgb, var(--c) 70%, #fff); background: color-mix(in srgb, var(--c) 22%, #111827); }
.c-sem-etq { width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed #cbd5e1; color: #94a3b8; display: grid; place-items: center; }
.c-sem-etq svg { width: 12px; height: 12px; }
.c-dir { display: flex; align-items: center; gap: 6px; flex: none; max-width: 65%; }
.avatar.xs { width: 24px; height: 24px; font-size: 10px; }
.c-at { display: inline-flex; border-radius: 50%; box-shadow: 0 0 0 2px var(--panel); }
.c-setor { font-size: 12px; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.conv.active { background: #eef4ff; box-shadow: inset 3px 0 0 #3b82f6; }
html[data-tema="escuro"] .conv.active { background: #172033; }
.msg .who.cel { color: var(--muted); font-weight: 500; }
.girando svg { animation: gira 1s linear infinite; }

/* ---------- Conectar WhatsApp: estados e sucesso */
.qr-estado { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: var(--muted); }
.qr-estado b { color: var(--text); }
.spin.escuro { width: 30px; height: 30px; border: 3px solid #d1fae5; border-top-color: var(--brand); }
.qr-ok { text-align: center; padding: 6px 4px; }
.qr-ok-ic { width: 78px; height: 78px; border-radius: 50%; background: #d1fae5; color: #047857; display: grid; place-items: center; margin: 0 auto 14px; animation: pop .35s cubic-bezier(.2,1.6,.4,1); }
.qr-ok-ic svg { width: 40px; height: 40px; stroke-width: 2.6; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.qr-ok h3 { margin: 0 0 6px; font-size: 20px; color: #047857; }
.qr-num { font-weight: 600; font-size: 16px; margin-bottom: 10px; }
.qr-ok p { color: var(--muted); margin: 0 0 14px; line-height: 1.5; }
.qr-fecha { font-size: 13px; color: var(--muted); }
html[data-tema="escuro"] .qr-ok-ic { background: #064e3b; color: #6ee7b7; }
html[data-tema="escuro"] .qr-ok h3 { color: #6ee7b7; }

/* ---------- Respostas rápidas */
.composer { position: relative; }
.rr-pop { position: absolute; left: 16px; right: 16px; bottom: calc(100% - 6px); background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 -8px 30px rgba(0,0,0,.14); padding: 6px; z-index: 22; max-height: 320px; overflow: auto; }
.rr-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px 8px; font-size: 13px; font-weight: 600; }
.rr-head span:first-child { display: flex; align-items: center; gap: 6px; }
.rr-head svg { width: 14px; height: 14px; }
.rr-item { display: flex; gap: 12px; padding: 9px 10px; border-radius: 8px; cursor: pointer; align-items: baseline; }
.rr-item b { color: #3b82f6; flex: none; min-width: 90px; }
.rr-item span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-item.on, .rr-item:hover { background: #eff6ff; }
html[data-tema="escuro"] .rr-item.on, html[data-tema="escuro"] .rr-item:hover { background: #172554; }
.rr-vazio { padding: 12px; color: var(--muted); }
.rr-atalho { font-weight: 600; color: #3b82f6; font-family: ui-monospace, monospace; }
.rr-texto { white-space: pre-wrap; max-height: 64px; overflow: hidden; color: var(--muted); }
.rr-atalho-input { display: flex; align-items: center; gap: 6px; }
.rr-atalho-input b { font-size: 18px; color: #3b82f6; }
.var-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: -6px; }
.var-chips .f-chip { font-size: 12px; padding: 3px 9px; font-family: ui-monospace, monospace; }

/* ---------- Mensagem | Nota interna */
.cmp-modos { display: flex; justify-content: flex-end; gap: 4px; margin: -4px 0 8px; }
.cmp-modos button { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 999px; padding: 5px 13px; cursor: pointer; font-size: 13px; }
.cmp-modos button svg { width: 15px; height: 15px; }
.cmp-modos button.on { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.cmp-modos button[data-modo="nota"].on { background: #f59e0b; border-color: #f59e0b; }
.composer.modo-nota textarea { background: #fffbeb; border-color: #fcd34d; }
html[data-tema="escuro"] .composer.modo-nota textarea { background: #2a2210; border-color: #4a3a12; }
.msg.nota { align-self: center; max-width: 80%; background: #fef9c3; border: 1px dashed #facc15; box-shadow: none; }
.msg.nota .who { color: #a16207; display: flex; align-items: center; gap: 5px; }
.msg.nota .meta { color: #a16207; }
html[data-tema="escuro"] .msg.nota { background: #2a2210; border-color: #854d0e; }
.msg.bot { background: #e0f2fe; }
.msg.bot .who { color: #0369a1; }
html[data-tema="escuro"] .msg.bot { background: #0c2a3f; }

/* ---------- Automações e avaliação */
.cfg-card { margin-bottom: 16px; }
.cfg-tit { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 12px; }
.cfg-tit h3 { margin: 0 0 4px; }
.cfg-tit p { margin: 0; }
.cfg-agora { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 13px; margin-bottom: 12px; }
.cfg-agora.dentro { background: #ecfdf5; color: #047857; }
.cfg-agora.fora { background: #eef2ff; color: #4338ca; }
.cfg-dias { display: flex; flex-direction: column; gap: 6px; }
.cfg-dia { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cfg-dia .input[type=time] { width: 120px; padding: 6px 10px; }
.estrelas { color: #f59e0b; letter-spacing: 1px; font-size: 13px; white-space: nowrap; }
.estrelas i { color: #d1d5db; font-style: normal; }
.av-geral { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.av-geral b { font-size: 34px; }
.av-geral .estrelas { font-size: 20px; }

/* ---------- IA no chat */
.composer .line { position: relative; }
.ia-btn { font-size: 18px; }
.ia-dd { position: absolute; bottom: 50px; left: 40px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.15); padding: 6px; z-index: 22; min-width: 260px; animation: up .15s ease; }
.ia-dd button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--text); }
.ia-dd button:hover { background: var(--soft); }
.ia-aviso { padding: 8px 12px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); margin-top: 4px; }
.ia-carregando { display: flex; align-items: center; gap: 12px; color: var(--muted); padding: 10px 0; }
.ia-resumo { white-space: pre-wrap; line-height: 1.55; background: var(--soft); border-radius: 10px; padding: 14px 16px; }
.ia-btn.girando { animation: pulsa 1s infinite; }

/* ---------- Funil de vendas */
.funil-page { height: 100vh; display: flex; flex-direction: column; }
.funil-board { flex: 1; display: flex; gap: 14px; overflow-x: auto; padding: 4px 24px 20px; align-items: flex-start; }
.fun-col { flex: 0 0 280px; background: var(--soft); border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; max-height: 100%; }
.fun-col-head { padding: 12px 14px; border-top: 4px solid var(--c); border-radius: 12px 12px 0 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fun-col-head b { font-size: 14px; }
.fun-total { font-size: 12px; font-weight: 600; color: var(--muted); }
.fun-cards { padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 60px; border-radius: 0 0 12px 12px; transition: background .15s; }
.fun-cards.sobre { background: rgba(59,130,246,.08); }
.fun-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; cursor: grab; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.fun-card:hover { border-color: #93c5fd; }
.fun-card.arrastando { opacity: .45; }
.fun-tit { font-weight: 600; margin-bottom: 6px; }
.fun-ct { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; }
.fun-ct span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fun-rod { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; }
.fun-valor { font-weight: 700; color: #047857; font-size: 13px; }
html[data-tema="escuro"] .fun-valor { color: #6ee7b7; }
.fun-add { border: 1px dashed #cbd5e1; background: transparent; color: var(--muted); border-radius: 8px; padding: 8px; cursor: pointer; display: flex; align-items: center; gap: 6px; justify-content: center; font-size: 13px; }
.fun-add:hover { background: var(--panel); color: var(--text); }
.fun-add svg { width: 14px; height: 14px; }
.op-ct-sel { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--soft); border-radius: 8px; }
.op-ct-sel .link { margin-left: auto; }
.op-res { margin-top: 6px; border: 1px solid var(--border); border-radius: 8px; max-height: 200px; overflow: auto; }
.op-res:empty { display: none; }
.op-res-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; }
.op-res-item:hover { background: var(--soft); }
.et-linha { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.et-linha input[type=color] { width: 36px; height: 36px; border: 0; background: none; padding: 0; cursor: pointer; }

/* ---------- Menu automático */
.menu-op { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.menu-num { width: 28px; height: 28px; border-radius: 50%; background: #3b82f6; color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; font-size: 13px; }
.menu-previa { margin-top: 14px; padding: 14px; background: var(--chat-bg); border-radius: 10px; display: flex; flex-direction: column; }
.menu-previa .msg { max-width: 100%; align-self: flex-start; }
@media (max-width: 900px) { .menu-op { flex-wrap: wrap; } .menu-op select { width: 100% !important; } .funil-page { height: calc(100vh - 54px); } }

/* ---------- SaaS: assinatura, planos, plataforma */
.aviso-ass { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 9px 16px; font-size: 14px; background: #eff6ff; color: #1e3a8a; border-bottom: 1px solid #bfdbfe; position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
.aviso-ass.atrasada { background: #fffbeb; color: #92400e; border-color: #fde68a; }
html[data-tema="escuro"] .aviso-ass { background: #172554; color: #bfdbfe; border-color: #1e3a8a; }
.bloq { background: #fef2f2; border-color: #fecaca; color: #991b1b; margin-bottom: 16px; line-height: 1.5; }
.planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.plano { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 22px 20px; display: flex; flex-direction: column; gap: 8px; }
.plano.destaque { border: 2px solid #3b82f6; box-shadow: 0 10px 30px rgba(59,130,246,.15); }
.plano.atual { outline: 2px dashed var(--brand); outline-offset: 3px; }
.plano-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #3b82f6; color: #fff; font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 999px; }
.plano-nome { font-weight: 700; font-size: 18px; }
.plano-preco { font-size: 30px; font-weight: 800; }
.plano-preco span { font-size: 14px; font-weight: 500; color: var(--muted); }
.plano ul { list-style: none; padding: 0; margin: 4px 0 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.plano li.nao { color: var(--muted); text-decoration: line-through; }
.upg { text-align: center; }
.upg-ic { font-size: 44px; }
.upg p { margin: 8px 0 0; line-height: 1.5; }
.plat-row { cursor: pointer; }
.plat-row:hover td { background: var(--soft); }

/* ---------- Alerta de WhatsApp desconectado e backup */
.alerta-con { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 9px 16px; background: #fef2f2; color: #991b1b; border-bottom: 1px solid #fecaca; font-size: 14px; position: sticky; top: 0; z-index: 6; }
html[data-tema="escuro"] .alerta-con { background: #2a0f12; color: #fca5a5; border-color: #7f1d1d; }
.bk-status { margin: -4px 0 14px; }
.etq-pick { margin-bottom: 4px; } .field + .field, .etq-pick + .field { margin-top: 4px; } .modal .etq-pick { padding-bottom: 10px; }

/* ===== Formulários modernos nos modais ===== */
.modal { border-radius: 18px; }
.modal header { padding: 20px 24px; }
.modal header h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.modal .body { padding: 22px 24px; }
.modal .body label:not(.etq-pick label) { font-size: 12.5px; font-weight: 600; color: #475569; letter-spacing: .01em; }
.modal .body input:not([type=checkbox]):not([type=radio]):not([type=file]),
.modal .body select,
.modal .body textarea {
  width: 100%; box-sizing: border-box;
  background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 12px;
  padding: 11px 14px; font-size: 14.5px; color: #0f172a;
  transition: border-color .15s, box-shadow .15s, background .15s;
  outline: none; font-family: inherit;
}
.modal .body input:hover, .modal .body select:hover, .modal .body textarea:hover { border-color: #cbd5e1; background: #fff; }
.modal .body input:focus, .modal .body select:focus, .modal .body textarea:focus {
  border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(16,185,129,.15);
}
.modal .body input::placeholder, .modal .body textarea::placeholder { color: #94a3b8; }
.modal .body input:disabled { background: #f1f5f9; color: #64748b; border-style: dashed; cursor: not-allowed; }
.modal .body select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.modal .body textarea { min-height: 90px; resize: vertical; }
.modal .body small, .modal .body .hint { color: #94a3b8; font-size: 12px; }
.modal footer { padding: 16px 24px; border-radius: 0 0 18px 18px; }
.modal .etq-pick label { padding: 4px 8px 4px 6px; border-radius: 10px; transition: background .15s; }
.modal .etq-pick label:hover { background: #f1f5f9; }
.modal .etq-pick input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; }

/* ===== Chatbot visual ===== */
.flx-lista { display: grid; gap: 10px; }
.flx-card { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.flx-card-ic { width: 42px; height: 42px; border-radius: 12px; background: #ecfdf5; display: grid; place-items: center; font-size: 22px; }
.flx-editor { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.flx-top { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: #fff; flex-wrap: wrap; }
.flx-nome { border: 1.5px solid transparent; border-radius: 10px; padding: 6px 10px; font-size: 16px; font-weight: 700; background: transparent; min-width: 160px; }
.flx-nome:hover, .flx-nome:focus { border-color: #e2e8f0; background: #f8fafc; outline: none; }
.flx-status { font-size: 13px; color: #64748b; display: inline-flex; align-items: center; gap: 6px; }
.dot-warn, .dot-ok { width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; display: inline-block; } .dot-ok { background: var(--brand); }
.flx-corpo { position: relative; flex: 1; display: flex; min-height: 0; }
.flx-paleta { width: 220px; flex-shrink: 0; overflow: auto; padding: 14px; border-right: 1px solid var(--border); background: #fff; }
.flx-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--border); border-left: 4px solid var(--c); border-radius: 12px; margin-bottom: 8px; cursor: grab; background: #fff; transition: box-shadow .15s, transform .15s; }
.flx-item:hover { box-shadow: 0 4px 14px rgba(15,23,42,.08); transform: translateY(-1px); }
.flx-item span { font-size: 18px; } .flx-item b { display: block; font-size: 13px; } .flx-item small { color: #94a3b8; font-size: 11.5px; }
.flx-canvas { flex: 1; position: relative; overflow: hidden; background-color: #f5f7fb; background-image: radial-gradient(#cbd5e1 1px, transparent 1px); background-size: 18px 18px; }
.flx-zoom { position: absolute; bottom: 16px; left: calc(220px + 50% - 110px); display: flex; gap: 8px; }
.flx-zoom .icon-btn { width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,.06); font-size: 18px; }
.flx-canvas .drawflow .drawflow-node { width: 260px; padding: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 4px 18px rgba(15,23,42,.07); }
.flx-canvas .drawflow .drawflow-node.selected { background: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(16,185,129,.2); }
.flx-canvas .drawflow .drawflow-node .drawflow_content_node { width: 100%; }
.nb-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-weight: 700; font-size: 13.5px; border-bottom: 1px solid #f1f5f9; border-top: 4px solid var(--c); border-radius: 16px 16px 0 0; }
.nb-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.nb-body label { font-size: 11.5px; font-weight: 600; color: #64748b; margin-top: 4px; }
.nb-body input, .nb-body select, .nb-body textarea { width: 100%; box-sizing: border-box; border: 1.5px solid #e2e8f0; background: #f8fafc; border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 13px; resize: vertical; }
.nb-body input:focus, .nb-body select:focus, .nb-body textarea:focus { outline: none; border-color: var(--brand); background: #fff; }
.nb-hint { font-size: 12.5px; color: #64748b; }
.nb-saidas { display: flex; justify-content: flex-end; flex-direction: column; align-items: flex-end; font-size: 11px; color: #64748b; gap: 2px; }
.flx-canvas .drawflow .drawflow-node .input, .flx-canvas .drawflow .drawflow-node .output { width: 16px; height: 16px; border: 3px solid #fff; background: #6366f1; box-shadow: 0 0 0 1px #c7d2fe; }
.flx-canvas .drawflow .drawflow-node .output { background: #94a3b8; } .flx-canvas .drawflow .drawflow-node .output:hover { background: var(--brand); }
.flx-canvas .drawflow .connection .main-path { stroke: #94a3b8; stroke-width: 3px; }
.flx-canvas .drawflow .connection .main-path:hover, .flx-canvas .drawflow .connection .main-path.selected { stroke: var(--brand); }
.flx-canvas .drawflow-delete { background: #ef4444; border: 2px solid #fff; line-height: 26px; }
@media (max-width: 800px) { .flx-paleta { width: 150px; } }
.ordem-btn { display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: #475569; }
.ordem-btn .ord-ic { font-size: 15px; color: var(--brand); }
.layout .lista-estreita .ordem-btn .ord-tx { display: none; }
.bk-cripto { border: 1.5px solid #fde68a; background: #fffbeb; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.bk-cripto.on { border-color: #a7f3d0; background: #ecfdf5; }
.plat-row.vol-alto { background: #fef2f2; }
.plat-row.vol-alto:hover { background: #fee2e2; }
.plat-row.vol-alto td:first-child { box-shadow: inset 4px 0 0 #ef4444; }
.txt-red { color: #dc2626 !important; font-weight: 600; }
.ab-box { border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; background: #f8fafc; }
.ab-box.alto { border-color: #fecaca; background: #fef2f2; }
.ab-seg { display: flex; gap: 6px; margin: 10px 0 6px; flex-wrap: wrap; }
.ab-seg button { flex: 1; min-width: 120px; padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 10px; background: #fff; cursor: pointer; font-weight: 600; font-size: 13px; color: #475569; }
.ab-seg button.on { border-color: var(--brand); background: #ecfdf5; color: #047857; }
html[data-tema="escuro"] .plat-row.vol-alto, html[data-tema="escuro"] .ab-box.alto { background: #2a0f12; }
html[data-tema="escuro"] .ab-box { background: transparent; }
html[data-tema="escuro"] .ab-seg button { background: transparent; color: inherit; }
.chat.soltar { position: relative; }
.chat.soltar::after { content: '📎 Solte aqui para enviar'; position: absolute; inset: 10px; border: 3px dashed var(--brand); border-radius: 16px;
  background: rgba(16,185,129,.08); display: grid; place-items: center; font-size: 20px; font-weight: 700; color: #047857; z-index: 30; pointer-events: none; backdrop-filter: blur(1px); }
.dup-grupo { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
.dup-motivo { font-size: 12.5px; font-weight: 600; color: #64748b; margin-bottom: 6px; }
.dup-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; cursor: pointer; }
.dup-item:hover { background: #f8fafc; }
.dup-item input { accent-color: var(--brand); width: 17px; height: 17px; }
html[data-tema="escuro"] .dup-item:hover { background: rgba(255,255,255,.04); }
.flx-hist { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: #fff; font-size: 17px; }
.flx-hist:disabled { opacity: .35; cursor: default; }
html[data-tema="escuro"] .flx-hist { background: transparent; }
.chat.soltar.soltar-nao::after { content: '🚫 Não é possível enviar arquivos nesta conversa'; border-color: #ef4444; background: rgba(239,68,68,.06); color: #b91c1c; }

/* ===== Reações e ações nas mensagens ===== */
.msg { position: relative; }
.msg.com-reacao { margin-bottom: 12px; }
.m-acoes { position: absolute; top: -15px; display: none; gap: 2px; z-index: 3; background: var(--panel); border-radius: 999px; padding: 2px; box-shadow: 0 2px 8px rgba(15,23,42,.15); }
.msg.in .m-acoes { right: 6px; }
.msg.out .m-acoes { left: 6px; }
.msg:hover .m-acoes, .m-acoes:focus-within { display: flex; }
.m-ac { width: 28px; height: 28px; border: 0; background: transparent; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1; color: #64748b; }
.m-ac:hover { background: #f1f5f9; }
.m-reacoes { position: absolute; bottom: -14px; display: flex; align-items: center; gap: 1px; background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 1px 6px; font-size: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.msg.in .m-reacoes { left: 8px; }
.msg.out .m-reacoes { right: 8px; }
.m-reacoes small { font-size: 11px; color: #64748b; margin-left: 3px; }
.msg.apagada .txt, .msg.apagada .m-img, .msg.apagada .m-vid, .msg.apagada .m-doc, .msg.apagada .aud { opacity: .45; }
.msg.apagada .txt { text-decoration: line-through; }
.m-apagada { font-size: 11.5px; font-style: italic; color: #b91c1c; margin-bottom: 3px; }
.pop-msg { position: fixed; z-index: 300; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 10px 30px rgba(15,23,42,.18); padding: 6px; }
.pop-emojis { display: flex; gap: 2px; }
.pop-emojis button { font-size: 22px; width: 40px; height: 40px; border: 0; background: transparent; border-radius: 10px; cursor: pointer; transition: transform .1s; }
.pop-emojis button:hover { background: #f1f5f9; transform: scale(1.15); }
.pop-emojis button.on { background: #dcfce7; }
.pop-menu { display: flex; flex-direction: column; min-width: 210px; }
.pop-menu button { text-align: left; border: 0; background: transparent; padding: 9px 12px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 14px; color: inherit; }
.pop-menu button:hover:not(:disabled) { background: #f1f5f9; }
.pop-menu button:disabled { color: #94a3b8; cursor: default; }
html[data-tema="escuro"] .m-ac:hover, html[data-tema="escuro"] .pop-emojis button:hover, html[data-tema="escuro"] .pop-menu button:hover:not(:disabled) { background: rgba(255,255,255,.06); }

.tp-barra { height: 12px; background: #e2e8f0; border-radius: 999px; overflow: hidden; margin: 16px 0 8px; }
.tp-barra > div { height: 100%; background: linear-gradient(90deg, var(--brand), #34d399); border-radius: 999px; transition: width .6s ease; }
.tp-resumo { margin: 16px 0; padding-left: 20px; line-height: 1.9; }
html[data-tema="escuro"] .tp-barra { background: rgba(255,255,255,.1); }


/* ===== Menu do botão direito e seleção de conversas ===== */
.c-check { width: 20px; height: 20px; flex-shrink: 0; align-self: center; border-radius: 6px; border: 2px solid #cbd5e1; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; background: var(--panel); transition: all .12s; }
.conv.marcada { background: #eef2ff; }
.conv.marcada .c-check { background: var(--brand); border-color: var(--brand); }
.c-pin { margin-right: 4px; font-size: 12px; }




html[data-tema="escuro"] .conv.marcada { background: rgba(99,102,241,.15); }
html[data-tema="escuro"] .sel-bar { background: transparent; }

/* ===== Plataforma: lista de empresas ===== */
.pe-lista { border-top: 1px solid var(--border); }
.pe-item { display: grid; grid-template-columns: minmax(240px, 2.2fr) .9fr 1.25fr 1.35fr 1.2fr 1.1fr .85fr 18px; gap: 14px; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; }
.pe-item:hover { background: #f8fafc; }
.pe-item:last-child { border-bottom: 0; }
.pe-emp { display: flex; gap: 12px; align-items: center; min-width: 0; }
.pe-emp .avatar { width: 40px; height: 40px; flex-shrink: 0; }
.pe-nome { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14.5px; }
.pe-nome .pill { font-size: 11px; padding: 1px 8px; }
.pe-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.pe-col { min-width: 0; font-size: 13.5px; }
.pe-col .hint { font-size: 12px; margin-top: 3px; }
.pe-rot { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; font-weight: 700; margin-bottom: 4px; }
.pe-usos { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; font-size: 13px; white-space: nowrap; }
.pe-uso { height: 5px; background: #e2e8f0; border-radius: 999px; overflow: hidden; min-width: 40px; }
.pe-uso > div { height: 100%; background: var(--brand); border-radius: 999px; }
.pe-ab { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; white-space: nowrap; }
.pe-ab.on { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.pe-ab.perigo { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.pe-seta { font-size: 22px; color: #cbd5e1; text-align: right; }
.pe-item:hover .pe-seta { color: var(--brand); }
.pe-item.vol-alto { background: #fef2f2; box-shadow: inset 4px 0 0 #ef4444; }
.pe-item.vol-alto:hover { background: #fee2e2; }
html[data-tema="escuro"] .pe-item:hover { background: rgba(255,255,255,.03); }
html[data-tema="escuro"] .pe-item.vol-alto { background: #2a0f12; }
html[data-tema="escuro"] .pe-uso { background: rgba(255,255,255,.1); }
html[data-tema="escuro"] .pe-ab { background: transparent; color: inherit; }
@media (max-width: 1300px) {
  .pe-item { grid-template-columns: minmax(200px, 2fr) .9fr 1.25fr 1.3fr 1.15fr 1.1fr 18px; }
  .pe-acesso { display: none; }
}
@media (max-width: 900px) {
  .pe-item { grid-template-columns: 1fr 1fr; }
  .pe-emp { grid-column: 1 / -1; }
  .pe-seta { display: none; }
}
.pe-cab { display: grid; grid-template-columns: minmax(240px, 2.2fr) .9fr 1.25fr 1.35fr 1.2fr 1.1fr .85fr 18px; gap: 14px; padding: 10px 18px; background: var(--soft);
  border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #64748b; }
.pe-rot { display: none; }
.pe-on { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); margin-left: 6px; vertical-align: middle; box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
.pe-on.off { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.18); }
@media (max-width: 1300px) { .pe-cab { grid-template-columns: minmax(200px, 2fr) .9fr 1.25fr 1.3fr 1.15fr 1.1fr 18px; } }
@media (max-width: 900px) { .pe-cab { display: none; } .pe-rot { display: block; } }

.sel-bar { padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--panel); }
.sel-top { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-bottom: 10px; }
.sel-top b { flex: 1; }
.sel-mestre { cursor: pointer; display: inline-flex; }
.c-check.cheia, .c-check.parcial { background: var(--brand); border-color: var(--brand); }
.sel-acoes { display: flex; gap: 8px; }
.sel-acoes select { flex: 1; border-radius: 999px; padding: 8px 14px; }
.sel-acoes .btn { border-radius: 999px; padding: 0 18px; }
.conv.selecionando { cursor: pointer; gap: 10px; }
.conv.selecionando:hover { background: #f8fafc; }
.sel-btn { font-size: 17px; padding: 0 10px; }
.sel-btn.on { background: #ecfdf5; border-color: var(--brand); color: var(--brand-dark); }

/* ===== Agendamento (novo layout) ===== */
.drawer { max-width: 520px; background: var(--panel); }
.dr-head { justify-content: space-between; padding: 20px 22px 12px; border-bottom: 1px solid var(--border); }
.dr-tit { display: flex; gap: 12px; align-items: center; }
.dr-tit h3 { font-size: 18px; margin: 0; }
.dr-ic { width: 40px; height: 40px; border-radius: 12px; background: #ecfdf5; color: var(--brand-dark); display: grid; place-items: center; }
.dr-ic svg { width: 20px; height: 20px; }
.dr-contato { margin: 14px 22px 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; gap: 10px; font-size: 14px; background: var(--soft); }
.dr-contato .hint { font-size: 12px; }
.dr-wa { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #64748b; white-space: nowrap; }
.dr-wa i { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; }
.dr-wa i.on { background: var(--brand); box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
.dr-tabs { margin: 12px 22px 0; padding: 4px; gap: 4px; border: 0; background: #f1f5f9; border-radius: 12px; }
.dr-tabs button { flex: 1; justify-content: center; padding: 8px 10px; border-radius: 9px; border: 0 !important; font-size: 14px; color: #475569; }
.dr-tabs button.on { background: var(--panel); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(15,23,42,.1); }
.dr-n { margin-left: 6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #e2e8f0; font-size: 11.5px; display: inline-grid; place-items: center; }
.dr-tabs button.on .dr-n { background: var(--brand); color: #fff; }
.dr-corpo { padding: 16px 22px 20px; }
.ag-sec { border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 14px; }
.ag-sec-t { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #64748b; margin-bottom: 10px; }
.ag-rapidos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; margin-bottom: 12px; }
.ag-rap { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--panel); cursor: pointer; font: inherit; font-size: 13px; color: inherit; transition: all .12s; }
.ag-rap:hover { border-color: #a7f3d0; background: #f0fdf4; }
.ag-rap.on { border-color: var(--brand); background: #ecfdf5; color: #047857; font-weight: 600; }
.ag-quando { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; }
.ag-quando .field { margin-bottom: 10px; }
.ag-resumo { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #ecfdf5; border: 1px solid #a7f3d0; }
.ag-resumo b { font-size: 14px; }
.ag-resumo .hint { font-size: 12.5px; color: #047857; }
.ag-resumo.erro { background: #fef2f2; border-color: #fecaca; }
.ag-resumo.erro .hint { color: #b91c1c; }
.ag-res-ic { font-size: 22px; }
.ag-rr { width: auto; max-width: 230px; padding: 5px 30px 5px 10px; font-size: 12.5px; text-transform: none; letter-spacing: 0; font-weight: 500; border-radius: 999px; }
.ag-msg textarea { resize: vertical; min-height: 110px; }
.ag-msg-rod { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.ag-assina { margin: 0; font-weight: 500; font-size: 13.5px; }
.ag-assina .sw { transform: scale(.85); }
.ag-toggle input:checked + .sw { background: var(--brand); }
.ag-previa-t { font-size: 11.5px; color: #94a3b8; margin: 14px 0 6px; }
.ag-previa { background: #efeae2; border-radius: 12px; padding: 12px; display: flex; justify-content: flex-end; }
.ag-bolha { background: #d9fdd3; border-radius: 10px 2px 10px 10px; padding: 7px 10px 5px; max-width: 85%; white-space: pre-wrap; word-wrap: break-word; font-size: 14px; box-shadow: 0 1px 1px rgba(0,0,0,.08); color: #111b21; }
.ag-bolha-h { display: block; text-align: right; font-size: 10.5px; color: #667781; margin-top: 2px; }
.ag-nota { font-size: 12.5px; color: #64748b; background: var(--soft); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; }
.dr-acoes { flex-direction: row; position: sticky; bottom: -20px; background: var(--panel); padding: 12px 0 4px; }
.dr-acoes .dr-btn { flex: 1; }
.dr-acoes .dr-btn.btn-primary { flex: 2; background: var(--brand); border-color: var(--brand); display: inline-flex; gap: 8px; align-items: center; }
.dr-acoes .dr-btn.btn-primary:hover { background: var(--brand-dark); }
.dr-acoes .dr-btn.btn-primary svg { width: 17px; height: 17px; }
.ag-card { display: flex; gap: 12px; border: 1px solid var(--border); border-radius: 14px; padding: 12px; margin-bottom: 10px; }
.ag-card.erro { border-color: #fecaca; background: #fffafa; }
.ag-card.cancelada { opacity: .7; }
.ag-cal { width: 62px; flex-shrink: 0; border-radius: 12px; background: #ecfdf5; color: #047857; text-align: center; padding: 8px 4px; display: flex; flex-direction: column; gap: 1px; align-self: flex-start; }
.ag-card.erro .ag-cal { background: #fef2f2; color: #b91c1c; }
.ag-cal small { font-size: 10.5px; text-transform: uppercase; font-weight: 700; opacity: .8; }
.ag-cal b { font-size: 16px; }
.ag-cal span { font-size: 12px; font-weight: 600; }
.ag-card-c { flex: 1; min-width: 0; }
.ag-card .ag-txt { max-height: 96px; overflow: auto; font-size: 13.5px; }
.ag-bts { display: flex; gap: 6px; }
.ag-vazio { text-align: center; padding: 40px 16px; }
.ag-vazio-ic { font-size: 40px; margin-bottom: 8px; }
html[data-tema="escuro"] .dr-tabs { background: rgba(255,255,255,.05); }
html[data-tema="escuro"] .dr-n { background: rgba(255,255,255,.1); }
html[data-tema="escuro"] .ag-resumo, html[data-tema="escuro"] .dr-ic, html[data-tema="escuro"] .ag-cal { background: rgba(16,185,129,.12); }
html[data-tema="escuro"] .ag-previa { background: #0b141a; }
html[data-tema="escuro"] .ag-bolha { background: #005c4b; color: #e9edef; }
html[data-tema="escuro"] .ag-rap { background: transparent; }

/* =====================================================================
   ATENDIMENTO — layout revisado (lista, topo, mensagens, campo de envio)
   ===================================================================== */
/* ---- lista de conversas ---- */
.conv { padding: 11px 14px; gap: 11px; border-bottom: 1px solid #f1f5f9; transition: background .1s; }
.c-av .avatar { width: 44px; height: 44px; }
.conv .c-name { font-size: 14.5px; }
.c-mid { margin-top: 2px; }
.c-mid .c-last { font-size: 13.5px; }
.c-mid .c-last b { font-weight: 600; color: #334155; }
.c-mid .c-last .pv-bot { font-weight: 400; }
.c-bot { margin-top: 6px; min-height: 0; }
.conv.active { background: #ecfdf5; box-shadow: inset 3px 0 0 var(--brand); }
.conv.active:hover { background: #e3f9ef; }
.c-badge { background: var(--brand); }
.c-setor { display: inline-flex; align-items: center; gap: 5px; border: 0; padding: 0; font-size: 11.5px; color: #64748b; max-width: 110px; }
.c-setor i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.c-etq-mais { font-size: 11px; color: #64748b; padding: 1px 4px; }
.c-espera { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.c-espera.ok { background: #ecfdf5; color: #047857; }
.c-espera.atencao { background: #fffbeb; color: #b45309; }
.c-espera.urgente { background: #fef2f2; color: #b91c1c; animation: pulsar 2s infinite; }
@keyframes pulsar { 50% { opacity: .65; } }

/* ---- topo da conversa ---- */
.chat-head { padding: 10px 16px; gap: 10px; min-height: 64px; }
.ch-contato { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; border: 0; background: transparent; text-align: left; padding: 6px 8px; margin: -6px -8px; border-radius: 12px; cursor: pointer; font: inherit; color: inherit; }
.ch-contato:hover { background: var(--soft); }
.ch-contato.on { background: #ecfdf5; }
.ch-contato .avatar { width: 42px; height: 42px; flex-shrink: 0; }
.chat-head .who .n { font-size: 15.5px; display: flex; align-items: center; gap: 6px; }
.chat-head .who .s { margin-top: 3px; gap: 6px; font-size: 12.5px; }
.ch-st { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.ch-st.pendente { background: #fffbeb; color: #b45309; }
.ch-st.aberta { background: #ecfdf5; color: #047857; }
.ch-st.fechada { background: #f1f5f9; color: #475569; }
.ch-info { display: inline-flex; align-items: center; gap: 5px; color: #64748b; white-space: nowrap; }
.ch-info + .ch-info::before, .ch-st + .ch-info::before, .c-espera + .ch-info::before { content: '·'; margin-right: 6px; color: #cbd5e1; }
.ch-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.chat-head .acts { align-items: center; gap: 6px; }
.ch-tool { width: 38px; height: 38px; border-radius: 10px; font-size: 20px; line-height: 1; position: relative; color: #475569; }
.ch-tool:hover { background: var(--soft); }
.ch-tool .badge { position: absolute; top: -4px; right: -4px; height: 17px; min-width: 17px; font-size: 10px; background: var(--brand); }
.ch-sep { width: 1px; height: 26px; background: var(--border); margin: 0 4px; }
.ch-sec, .ch-pri { height: 38px; border-radius: 10px; padding: 0 14px; font-weight: 600; gap: 6px; }
.ch-pri { padding: 0 18px; box-shadow: 0 2px 8px rgba(16,185,129,.25); }
.ch-mais-wrap { position: relative; }
.ch-mais-menu { position: absolute; right: 0; top: 44px; z-index: 40; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 32px rgba(15,23,42,.16); padding: 6px; min-width: 250px; }

/* ---- área de mensagens ---- */
.chat { position: relative; }
.msgs { padding: 16px 7% 20px; gap: 3px; background-color: #efeae2;
  background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px); background-size: 16px 16px; }
.msg { padding: 7px 11px 5px; border-radius: 12px; font-size: 14.2px; line-height: 1.45; margin-top: 6px; max-width: min(68%, 620px); }
.msg.cont { margin-top: 1px; }
.msg.in { border-top-left-radius: 4px; }
.msg.out { border-top-right-radius: 4px; }
.msg.cont.in { border-top-left-radius: 12px; }
.msg.cont.out { border-top-right-radius: 12px; }
.msg .who { font-size: 12.5px; margin-bottom: 1px; }
.msg .txt a { color: #027eb5; text-decoration: underline; word-break: break-all; }
.msg .txt code { background: rgba(0,0,0,.06); border-radius: 4px; padding: 1px 4px; font-size: 13px; }
.msg.bot { background: #e7f3ff; }
.msg.bot .who { color: #2563eb; font-size: 11.5px; }
.msg.nota { background: #fff8db; border: 1px dashed #f0c84b; }
.day { position: sticky; top: 6px; z-index: 2; background: #fff; font-weight: 600; font-size: 11.5px; color: #54656f; box-shadow: 0 1px 2px rgba(0,0,0,.1); border-radius: 8px; }
.sys { background: rgba(255,255,255,.88); color: #54656f; font-size: 12px; box-shadow: 0 1px 1px rgba(0,0,0,.06); border-radius: 8px; display: inline-flex; gap: 2px; align-items: center; max-width: 80%; text-align: center; }
.hist-sep span { background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.ir-fim { position: absolute; right: 22px; bottom: 150px; z-index: 5; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--panel); box-shadow: 0 4px 14px rgba(0,0,0,.18); font-size: 20px; cursor: pointer; color: #475569; }
.ir-fim:hover { color: var(--brand-dark); }

/* ---- campo de envio ---- */
.composer { padding: 10px 16px 12px; border-top: 1px solid var(--border); }
.cmp-aviso { display: flex; align-items: center; gap: 12px; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; font-size: 13px; line-height: 1.4; }
.cmp-aviso > div { flex: 1; }
.cmp-aviso-ic { font-size: 20px; }
.cmp-aviso.espera { background: #fffbeb; border: 1px solid #fde68a; color: #78350f; }
.cmp-aviso.outro { background: #f1f5f9; border: 1px solid #e2e8f0; color: #334155; }
.cmp-aviso.fechado { background: #f8fafc; border: 1px solid var(--border); color: #334155; margin: 0; }
.cmp-aviso .btn { flex-shrink: 0; }
.cmp-box { border: 1.5px solid var(--border); border-radius: 16px; background: var(--panel); transition: border-color .15s, box-shadow .15s; overflow: visible; }
.cmp-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(16,185,129,.12); }
.composer.modo-nota .cmp-box { border-color: #f0c84b; background: #fffdf3; }
.composer.modo-nota .cmp-box:focus-within { box-shadow: 0 0 0 4px rgba(240,200,75,.18); }
.cmp-modos { display: flex; align-items: center; gap: 4px; margin: 0; padding: 8px 10px 0; justify-content: flex-start; }
.cmp-modos button { padding: 4px 11px; font-size: 12.5px; border-radius: 8px; border: 0; background: transparent; color: #64748b; font-weight: 600; }
.cmp-modos button:hover { background: var(--soft); }
.cmp-modos button.on { background: #ecfdf5; color: #047857; }
.cmp-modos button[data-modo="nota"].on { background: #fef3c7; color: #92400e; }
.cmp-modo-dica { margin-left: auto; font-size: 11.5px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer .line#linha-texto { display: block; }
.composer textarea { display: block; width: 100%; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 8px 14px 4px; min-height: 44px; max-height: 160px; font-size: 14.5px; outline: none; }
.cmp-barra { display: flex; align-items: center; gap: 2px; padding: 4px 8px 8px; }
.cmp-ic { width: 36px; height: 36px; border-radius: 10px; font-size: 18px; color: #64748b; display: grid; place-items: center; }
.cmp-ic:hover:not(:disabled) { background: var(--soft); color: var(--text); }
.cmp-ic svg { width: 20px; height: 20px; }
.cmp-assina { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: #64748b; margin-left: 8px; cursor: pointer; white-space: nowrap; }
.cmp-assina input { accent-color: var(--brand); }
.cmp-dica { margin-left: auto; margin-right: 10px; font-size: 11.5px; color: #94a3b8; white-space: nowrap; }
.cmp-barra .send { width: 40px; height: 40px; }
.composer .rec-line { padding: 8px; }
.composer .anexo-menu { bottom: 44px; }
.composer .ia-dd { bottom: 52px; left: 110px; }
.composer .rr-pop { left: 0; right: 0; bottom: calc(100% + 6px); }
.composer .opts { display: none; }
.pop-emojis.grade { display: grid; grid-template-columns: repeat(10, 34px); gap: 2px; max-width: 360px; }
.pop-emojis.grade button { width: 34px; height: 34px; font-size: 20px; }
@media (max-width: 1100px) { .cmp-dica, .cmp-modo-dica { display: none; } .ch-sec .lbl { display: none; } }

/* ---- tema escuro ---- */
html[data-tema="escuro"] .msgs { background-color: #0b141a; background-image: radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px); }
html[data-tema="escuro"] .day, html[data-tema="escuro"] .sys, html[data-tema="escuro"] .hist-sep span { background: #1f2c33; color: #aebac1; }
html[data-tema="escuro"] .conv.active { background: rgba(16,185,129,.12); }
html[data-tema="escuro"] .msg.bot { background: #11314a; }
html[data-tema="escuro"] .msg.nota { background: #3a3214; }
html[data-tema="escuro"] .cmp-aviso.espera { background: #2a2210; border-color: #5c4813; color: #fde68a; }
html[data-tema="escuro"] .cmp-aviso.outro, html[data-tema="escuro"] .cmp-aviso.fechado { background: rgba(255,255,255,.04); color: inherit; border-color: var(--border); }
html[data-tema="escuro"] .composer.modo-nota .cmp-box { background: #2a2512; }
html[data-tema="escuro"] .ch-st.pendente { background: #2a2210; color: #fcd34d; }
html[data-tema="escuro"] .ch-st.aberta, html[data-tema="escuro"] .cmp-modos button.on, html[data-tema="escuro"] .c-espera.ok { background: rgba(16,185,129,.15); color: #6ee7b7; }
html[data-tema="escuro"] .c-espera.atencao { background: #2a2210; color: #fcd34d; }
html[data-tema="escuro"] .c-espera.urgente { background: #2a0f12; color: #fca5a5; }

/* ===== Ações da mensagem fora do balão (não cobrem nome/áudio) ===== */
.m-acoes { position: absolute; top: 50%; transform: translateY(-50%); display: none; padding: 0 6px; background: transparent !important; box-shadow: none !important; border-radius: 0; z-index: 3; }
.msg.in .m-acoes { left: 100%; right: auto; }
.msg.out .m-acoes { right: 100%; left: auto; }
.msg:hover .m-acoes, .m-acoes:focus-within { display: block; }
.m-acoes-in { display: flex; gap: 1px; background: var(--panel); border-radius: 999px; padding: 2px; box-shadow: 0 2px 8px rgba(15,23,42,.15); }
.msg.out .m-acoes-in { flex-direction: row-reverse; }
.m-ac { width: 30px; height: 30px; font-size: 15px; }
/* citação */
.m-cit { display: block; border-left: 4px solid var(--brand); background: rgba(0,0,0,.05); border-radius: 8px; padding: 5px 9px; margin: 1px 0 5px; cursor: pointer; font-size: 12.8px; max-width: 100%; }
.m-cit.cli { border-left-color: #6366f1; }
.m-cit b { display: block; font-size: 12px; color: #047857; }
.m-cit.cli b { color: #4f46e5; }
.m-cit span { display: block; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-cit:hover { background: rgba(0,0,0,.08); }
.m-enc { font-size: 11.5px; font-style: italic; color: #64748b; margin-bottom: 2px; }
.msg.piscar { animation: piscarMsg 1.6s ease; }
@keyframes piscarMsg { 0%, 60% { box-shadow: 0 0 0 4px rgba(16,185,129,.45); } 100% { box-shadow: 0 1px 1px rgba(0,0,0,.06); } }
/* respondendo (acima do campo) */
.cmp-resp { display: flex; align-items: center; gap: 8px; margin: 8px 10px 0; }
.cmp-resp .m-cit { flex: 1; margin: 0; cursor: default; background: var(--soft); }
/* encaminhar */
.enc-prev { background: var(--soft); border-radius: 10px; padding: 10px 12px; }
.enc-prev div { white-space: pre-wrap; margin-top: 3px; max-height: 80px; overflow: auto; }
.enc-sel { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.enc-chip { display: inline-flex; align-items: center; gap: 4px; background: #ecfdf5; color: #047857; border-radius: 999px; padding: 3px 4px 3px 10px; font-size: 12.5px; font-weight: 600; }
.enc-chip button { border: 0; background: transparent; cursor: pointer; font-size: 15px; color: #047857; }
.enc-lista { max-height: 260px; overflow: auto; border: 1px solid var(--border); border-radius: 12px; }
.enc-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #f1f5f9; }
.enc-item:hover { background: var(--soft); }
.enc-item input { accent-color: var(--brand); width: 17px; height: 17px; }
html[data-tema="escuro"] .m-cit { background: rgba(255,255,255,.06); }
html[data-tema="escuro"] .enc-chip { background: rgba(16,185,129,.15); color: #6ee7b7; }

/* datas do histórico: sem "grudar" no topo (os rótulos se sobrepunham) */
.day { position: static; }

/* ===== Mini player de áudio (quando a conversa do áudio não está na tela) ===== */
.mini-player { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 500; display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 6px 8px 6px 6px; box-shadow: 0 10px 30px rgba(15,23,42,.2);
  width: min(560px, calc(100vw - 32px)); animation: mpEntra .2s ease; }
@keyframes mpEntra { from { opacity: 0; transform: translate(-50%, -10px); } }
.mini-player button { border: 0; background: transparent; cursor: pointer; color: inherit; font: inherit; }
.mp-play { width: 38px; height: 38px; border-radius: 50%; background: var(--brand) !important; color: #fff !important; display: grid; place-items: center; flex-shrink: 0; }
.mp-play svg { width: 18px; height: 18px; }
.mini-player.pausado .mp-play { background: #64748b !important; }
.mp-info { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 170px; text-align: left; padding: 2px 6px !important; border-radius: 10px; }
.mp-info:hover { background: var(--soft) !important; }
.mp-info b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mp-info span { font-size: 11.5px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mp-bar { flex: 1; min-width: 60px; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(to right, var(--brand) var(--p, 0%), #e2e8f0 var(--p, 0%)); }
.mp-bar::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--brand-dark); }
.mp-tempo { font-size: 11.5px; color: #64748b; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mp-vel { font-size: 12px; font-weight: 700; padding: 4px 8px !important; border-radius: 999px; background: var(--soft) !important; }
.mp-x { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #64748b !important; }
.mp-x:hover { background: #fee2e2 !important; color: #b91c1c !important; }
.mp-x svg { width: 16px; height: 16px; }
@media (max-width: 600px) { .mp-tempo, .mp-vel { display: none; } }
.mini-player.na-lista { position: static; transform: none; width: auto; margin: 10px 10px 0; border-radius: 14px; flex-wrap: wrap; row-gap: 4px; animation: none;
  background: #ecfdf5; border-color: #a7f3d0; box-shadow: none; padding: 8px 8px 8px 8px; }
.mini-player.na-lista .mp-info { flex: 1; max-width: none; }
.mini-player.na-lista .mp-bar { order: 5; flex-basis: calc(100% - 90px); margin-left: 4px; }
.mini-player.na-lista .mp-tempo { order: 6; }
html[data-tema="escuro"] .mini-player.na-lista { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.3); }

/* ---- Verificação em duas etapas */
.tf-ic { font-size: 34px; margin-bottom: 6px; }
.tf-cod { font-size: 26px; letter-spacing: 10px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.tf-rec { font-size: 18px; letter-spacing: 3px; text-align: center; text-transform: uppercase; font-family: ui-monospace, monospace; }
.tf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 14px; font-size: 13px; }
.tf-links a { color: var(--brand); cursor: pointer; }
.tf-links a:hover { text-decoration: underline; }
.tf-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tf-lista code { background: var(--bg, #f1f5f9); border: 1px dashed var(--border); border-radius: 8px; padding: 8px; text-align: center; font-size: 15px; letter-spacing: 1px; }
.tf-box { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; border: 1px solid #fde68a; background: #fffbeb; }
.tf-box.on { border-color: #a7f3d0; background: #ecfdf5; }
.tf-box-ic { font-size: 22px; }
html[data-tema="escuro"] .tf-box { background: #2a2108; border-color: #713f12; }
html[data-tema="escuro"] .tf-box.on { background: #052e1f; border-color: #065f46; }
#tf-aviso-topo { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 900; display: flex; align-items: center; gap: 10px;
  background: var(--panel, #fff); border: 1px solid #fecaca; box-shadow: 0 10px 30px rgba(0,0,0,.15); border-radius: 14px; padding: 10px 12px 10px 16px; font-size: 13.5px; max-width: calc(100vw - 32px); }

/* ---- Mostrar/ocultar senha e "esqueci minha senha" */
.senha-wrap { position: relative; display: block; flex: 1 1 0; min-width: 0; width: 100%; }
.row > .senha-wrap { width: auto; }
.senha-wrap > input { width: 100%; padding-right: 42px !important; }
.senha-olho { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--muted, #64748b); border-radius: 8px; cursor: pointer; padding: 0; }
.senha-olho:hover { background: rgba(100,116,139,.12); color: var(--text, #0f172a); }


/* =====================================================================
   TELA DE LOGIN (entrar, criar conta, código, esqueci a senha)
   ===================================================================== */
.auth { --a-verde: #10b981; --a-verde2: #059669; --a-tinta: #0b1220;
  min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--bg); }

/* ---- Lado esquerdo */
.auth-hero { position: relative; overflow: hidden; isolation: isolate; color: #d1fae5; padding: 40px clamp(32px, 5vw, 72px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  background: radial-gradient(120% 90% at 0% 0%, #065f46 0%, #053b2f 38%, #071a1f 70%, #0b1220 100%); }
.ah-luz { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; z-index: -1; animation: ahFlutua 16s ease-in-out infinite alternate; }
.ah-luz.l1 { width: 420px; height: 420px; background: #10b981; top: -140px; right: -120px; }
.ah-luz.l2 { width: 360px; height: 360px; background: #0ea5e9; bottom: -160px; left: -100px; opacity: .28; animation-delay: -6s; }
.ah-grade { position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%); }
@keyframes ahFlutua { to { transform: translate(-40px, 50px) scale(1.12); } }
.ah-logo { display: inline-flex; align-items: center; gap: 12px; font-size: 21px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.ah-logo .logo-mark, .auth-mob .logo-mark { box-shadow: 0 8px 24px rgba(16,185,129,.45); }
.ah-meio { max-width: 540px; }
.ah-selo { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
  color: #a7f3d0; background: rgba(16,185,129,.12); border: 1px solid rgba(110,231,183,.25); backdrop-filter: blur(6px); }
.ah-pulso { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52,211,153,.7); animation: ahPulso 2s infinite; }
@keyframes ahPulso { 70% { box-shadow: 0 0 0 9px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
.auth-hero h1 { font-size: clamp(30px, 3.3vw, 46px); line-height: 1.08; letter-spacing: -.03em; font-weight: 700; color: #fff; margin: 18px 0 14px; }
.ah-real { background: linear-gradient(92deg, #6ee7b7, #34d399 45%, #a5f3fc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-hero p { color: rgba(209,250,229,.78); font-size: 16px; line-height: 1.6; margin: 0; max-width: 470px; }

/* mini conversa de exemplo */
.ah-demo { position: relative; margin: 30px 0 26px; max-width: 400px; padding: 14px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transform: rotate(-1.2deg); animation: ahSobe .9s cubic-bezier(.2,.8,.2,1) both .15s; }
@keyframes ahSobe { from { opacity: 0; transform: translateY(18px) rotate(-1.2deg); } }
.ahd-top { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.09); }
.ahd-top b { display: block; color: #fff; font-size: 13.5px; }
.ahd-top small { color: #6ee7b7; font-size: 11.5px; }
.ahd-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #f472b6, #f59e0b); }
.ahd-tag { margin-left: auto; font-size: 11px; padding: 3px 9px; border-radius: 999px; background: rgba(16,185,129,.18); color: #6ee7b7; border: 1px solid rgba(110,231,183,.25); }
.ahd-msg { width: fit-content; max-width: 82%; padding: 8px 12px; border-radius: 14px; font-size: 13px; line-height: 1.4; margin-bottom: 8px; opacity: 0; animation: ahMsg .5s ease both; }
.ahd-msg.in { background: rgba(255,255,255,.92); color: #0f172a; border-bottom-left-radius: 4px; animation-delay: .6s; }
.ahd-msg.out { margin-left: auto; background: linear-gradient(135deg, #10b981, #059669); color: #fff; border-bottom-right-radius: 4px; animation-delay: 1.2s; }
.ahd-msg.out span { font-size: 11px; opacity: .8; margin-left: 4px; color: #bae6fd; }
.ahd-msg.ahd-dig { display: flex; gap: 4px; padding: 11px 13px; animation-delay: 1.8s; margin-bottom: 0; }
.ahd-dig i { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; animation: ahDig 1.2s infinite; }
.ahd-dig i:nth-child(2) { animation-delay: .15s; } .ahd-dig i:nth-child(3) { animation-delay: .3s; }
@keyframes ahMsg { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ahDig { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.ahd-chip { position: absolute; right: -18px; bottom: -16px; display: flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 12px; font-size: 12px; font-weight: 600;
  color: #0f172a; background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.35); transform: rotate(2deg); animation: ahMsg .5s ease both 2.2s; opacity: 0; }
.ahd-dot { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px #d1fae5; }
.ah-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ah-lista li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 12px; font-size: 13.5px; color: #e2e8f0;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.ah-rodape { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(209,250,229,.6); }
.ah-rodape svg { width: 16px; height: 16px; color: #34d399; flex: none; }

/* ---- Lado direito (formulário) */
.auth-box { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px 28px; gap: 22px;
  background: radial-gradient(800px 400px at 100% 0%, rgba(16,185,129,.07), transparent 60%), var(--bg); }
.auth-mob { display: none; }
.auth-card { width: 100%; max-width: 420px; padding: 38px 36px 30px; border-radius: 22px; background: var(--panel);
  border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 24px 48px -16px rgba(16,24,40,.14);
  animation: acEntra .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes acEntra { from { opacity: 0; transform: translateY(12px); } }
.auth-card.tremer { animation: acTreme .4s; }
@keyframes acTreme { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.auth-card h2 { margin: 0 0 6px; font-size: 25px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.auth-card .sub { color: var(--muted); margin: 0 0 26px; font-size: 14.5px; line-height: 1.55; }
.auth-campo { display: block; margin-bottom: 16px; }
.auth-rot { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 7px; }
.auth-ctl { position: relative; display: block; }
.auth-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: #94a3b8; pointer-events: none; z-index: 1; transition: color .15s; }
.auth-ic svg { width: 100%; height: 100%; display: block; }
.auth-card .input { height: 48px; border-radius: 12px; font-size: 15px; background: var(--soft); border: 1.5px solid var(--border);
  transition: border-color .15s, box-shadow .15s, background .15s; }
.auth-ctl .input { padding-left: 44px; }
.auth-card .input::placeholder { color: #a0aab8; }
.auth-card .input:hover { border-color: #cbd5e1; }
.auth-card .input:focus { outline: none; background: var(--panel); border-color: var(--a-verde); box-shadow: 0 0 0 4px rgba(16,185,129,.14); }
.auth-ctl:focus-within .auth-ic { color: var(--a-verde2); }
.auth-campo.erro .input { border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.12); }
.auth-campo.erro .auth-ic { color: #ef4444; }
.auth-card input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--soft) inset; -webkit-text-fill-color: var(--text); }
.auth-esqueci { text-align: right; margin: -6px 0 20px; font-size: 13px; }
.auth-esqueci a, .auth-switch a, .tf-links a { color: var(--a-verde2); font-weight: 600; cursor: pointer; text-decoration: none; }
.auth-esqueci a:hover, .auth-switch a:hover, .tf-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth-btn, .auth-card .btn-primary { position: relative; width: 100%; height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 12px; cursor: pointer; font-size: 15.5px; font-weight: 600; color: #fff; letter-spacing: .01em;
  background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 10px 24px -8px rgba(5,150,105,.6), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .15s, box-shadow .15s, filter .15s; }
.auth-btn:hover, .auth-card .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 14px 28px -10px rgba(5,150,105,.7), inset 0 1px 0 rgba(255,255,255,.18); }
.auth-btn:active, .auth-card .btn-primary:active { transform: translateY(0); }
.auth-btn:focus-visible, .auth-card .btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(16,185,129,.3); }
.auth-btn:disabled, .auth-card .btn-primary:disabled { cursor: default; filter: saturate(.8); transform: none; }
.ab-ic { width: 18px; height: 18px; transition: transform .2s; } .ab-ic svg { width: 100%; height: 100%; display: block; }
.auth-btn:hover .ab-ic { transform: translateX(3px); }
.ab-spin { display: none; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: abGira .7s linear infinite; }
.auth-btn.carregando .ab-txt, .auth-btn.carregando .ab-ic { display: none; }
.auth-btn.carregando .ab-spin { display: block; }
@keyframes abGira { to { transform: rotate(360deg); } }
.auth-sep { display: flex; align-items: center; gap: 12px; margin: 24px 0 14px; color: var(--muted); font-size: 12.5px; }
.auth-sep::before, .auth-sep::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-switch { text-align: center; font-size: 14px; }
.auth-switch a { display: block; padding: 11px; border-radius: 12px; border: 1.5px solid var(--border); transition: border-color .15s, background .15s; }
.auth-switch a:hover { text-decoration: none; border-color: var(--a-verde); background: rgba(16,185,129,.05); }
.auth-legal { font-size: 12px; color: var(--muted); }

/* telas de código / esqueci a senha dentro do mesmo cartão */
.auth-card .tf-ic { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; margin-bottom: 16px;
  background: linear-gradient(135deg, #d1fae5, #ecfeff); box-shadow: inset 0 0 0 1px rgba(16,185,129,.2); }
.auth-card .field { display: block; margin-bottom: 16px; }
.auth-card .field > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; color: var(--text); }
.auth-card .tf-links { margin-top: 18px; gap: 8px 18px; }
.auth-card .tf-cod { height: 60px; font-size: 28px; }

/* ---- Celular e telas menores */
@media (max-width: 1100px) { .ahd-chip { right: 8px; } }
@media (max-width: 900px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-hero { display: none; }
  .auth-box { min-width: 0; width: 100%; justify-content: flex-start; padding: 0 0 24px; gap: 0;
    background: linear-gradient(180deg, #064e3b 0, #053b2f 210px, var(--bg) 210px); }
  .auth-mob { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 19px; font-weight: 700; padding: 34px 20px 26px; width: 100%; max-width: 460px; }
  .auth-card { width: calc(100% - 32px); max-width: 460px; padding: 28px 20px 24px; border-radius: 20px; margin-bottom: 20px; }
  .auth-mob { padding-left: 24px; padding-right: 24px; }
  .auth-card h2 { font-size: 22px; }
  .auth-card .input { font-size: 16px; } /* 16px: o iPhone não dá zoom ao tocar no campo */
}
@media (prefers-reduced-motion: reduce) { .auth *, .auth *::before, .auth *::after { animation: none !important; opacity: 1 !important; } }

/* ---- Tema escuro */
html[data-tema="escuro"] .auth-box { background: radial-gradient(800px 400px at 100% 0%, rgba(16,185,129,.10), transparent 60%), var(--bg); }
html[data-tema="escuro"] .auth-card { box-shadow: 0 24px 48px -16px rgba(0,0,0,.6); }
html[data-tema="escuro"] .auth-card .tf-ic { background: linear-gradient(135deg, #064e3b, #0c4a6e); }
html[data-tema="escuro"] .auth-card .input:hover { border-color: #475569; }
@media (max-width: 900px) { html[data-tema="escuro"] .auth-box { background: linear-gradient(180deg, #064e3b 0, #053b2f 210px, var(--bg) 210px); } }
/* telas baixas (notebook): tudo cabe sem rolar */
@media (min-width: 901px) and (max-height: 860px) {
  .auth-hero { padding-top: 28px; padding-bottom: 26px; gap: 18px; }
  .auth-hero h1 { font-size: clamp(28px, 2.6vw, 38px); margin: 14px 0 10px; }
  .auth-hero p { font-size: 15px; }
  .ah-demo { margin: 20px 0 0; padding: 12px; }
  .ahd-top { padding-bottom: 9px; margin-bottom: 9px; }
  .ah-lista { display: none; }
  .auth-box { padding: 20px 24px 14px; gap: 12px; }
  .auth-card { padding: 28px 32px 24px; }
  .auth-card .sub { margin-bottom: 18px; }
  .auth-campo { margin-bottom: 13px; }
  .auth-sep { margin: 16px 0 10px; }
}
@media (min-width: 901px) and (max-height: 640px) { .ah-demo { display: none; } }

@media (max-width: 360px) { .auth-card { width: calc(100% - 24px); padding: 24px 16px 20px; } .auth-card h2 { font-size: 20px; } .auth-mob { padding: 26px 18px 20px; } }

/* ---- Compositor no celular: só anexo à vista; o resto no botão ⋯ */
.cmp-mais { display: none !important; }
.cmp-mais svg { width: 20px; height: 20px; }
.cmp-mais-menu { position: absolute; left: 8px; bottom: 52px; z-index: 30; min-width: 260px; max-width: calc(100vw - 32px); padding: 6px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--border); box-shadow: 0 16px 40px rgba(15,23,42,.18); animation: cmEntra .14s ease-out; }
@keyframes cmEntra { from { opacity: 0; transform: translateY(6px); } }
.cmp-mais-menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; background: transparent; border-radius: 10px;
  font-size: 14.5px; color: var(--text); text-align: left; cursor: pointer; }
.cmp-mais-menu button:active, .cmp-mais-menu button:hover { background: var(--soft); }
.cmp-mais-menu .ic { width: 22px; display: grid; place-items: center; font-size: 18px; color: #64748b; }
.cmp-mais-menu .ic svg { width: 19px; height: 19px; }
.cm-sw { margin-left: auto; width: 36px; height: 20px; border-radius: 999px; background: #cbd5e1; position: relative; transition: background .15s; flex: none; }
.cm-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.cm-sw.on { background: var(--brand); } .cm-sw.on::after { transform: translateX(16px); }
.composer .line#linha-texto { position: relative; }
@media (max-width: 700px) {
  .cmp-mais { display: grid !important; }
  #emoji-btn, #rr-btn, #ia-btn, .cmp-assina, .cmp-dica, .cmp-modo-dica { display: none !important; }
  .cmp-barra { padding: 2px 6px 6px; gap: 0; }
  .cmp-barra .send { margin-left: auto; width: 42px; height: 42px; }
  .cmp-modos { padding: 6px 8px 0; }
  .cmp-modos button { padding: 4px 9px; font-size: 12px; }
  .composer textarea { font-size: 16px; padding: 6px 12px 2px; min-height: 40px; }
  .composer .ia-dd { left: 8px; right: 8px; }
  .pop-emojis.grade { grid-template-columns: repeat(8, 36px); max-width: calc(100vw - 24px); }
}
.cmp-mais-menu button { white-space: nowrap; }

/* ---- Topo da conversa no celular: nome do cliente sempre visível */
.so-mob { display: none !important; }
.ch-mob-sep { height: 1px; background: var(--border); margin: 4px 6px; }
@media (max-width: 700px) {
  .chat-head { padding: 8px 10px 8px 4px; gap: 4px; min-height: 58px; }
  .chat-head .back-btn { flex: none; width: 36px; height: 36px; }
  .ch-contato { gap: 9px; padding: 4px 6px; margin: 0; }
  .ch-contato .avatar { width: 38px; height: 38px; }
  .chat-head .who .n { display: block; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chat-head .who .n .ch-av { display: none; }
  .chat-head .who .s { display: none; }
  #agendar, .ch-sep, .chat-head .ch-sec { display: none !important; }
  .chat-head .acts { gap: 4px; flex: none; }
  .ch-tool { width: 36px; height: 36px; }
  .ch-pri { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 12px; }
  .ch-pri .lbl { display: none; }
  .so-mob { display: flex !important; }
  .ch-mob-sep.so-mob { display: block !important; }
  .ch-mais-menu { right: -44px; min-width: 240px; max-width: calc(100vw - 20px); }
  .ch-mais-menu .badge { margin-left: auto; }
}

img.avatar { object-fit: cover; background: #e2e8f0; }

/* ---- IPs de saída (Plataforma) */
.ips-resumo { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 14px; }
.ips-chip { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--soft); min-width: 190px; }
.ips-chip b { font-size: 13.5px; } .ips-chip span { font-size: 12.5px; color: var(--muted); }

/* ---- Sistema e atualizações (Plataforma) */
.sis-aviso { padding: 12px 14px; border-radius: 12px; background: #fffbeb; border: 1px solid #fde68a; font-size: 13.5px; line-height: 1.7; }
.sis-aviso code, .sis-versao code { background: rgba(0,0,0,.06); padding: 2px 6px; border-radius: 6px; font-size: 12.5px; }
.sis-versao { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--soft); }
.sis-versao > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sis-acoes { display: flex; align-items: center; gap: 10px; }
.sis-novo { margin-top: 12px; padding: 14px; border-radius: 12px; border: 1px solid #a7f3d0; background: #ecfdf5; }
.sis-novo-tit { font-weight: 700; color: #047857; margin-bottom: 6px; }
.sis-novo ul { margin: 0 0 12px; padding-left: 18px; font-size: 13.5px; line-height: 1.7; }
.sis-ok { margin-top: 12px; color: #047857; font-weight: 600; font-size: 13.5px; }
.sis-erro { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 13px; }
.sis-prog { margin-top: 12px; padding: 14px; border-radius: 12px; border: 1px solid var(--border); }
.sis-prog-txt { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 13.5px; }
.sis-barra { height: 8px; border-radius: 99px; background: var(--soft); overflow: hidden; margin-bottom: 8px; }
.sis-barra i { display: block; height: 100%; background: linear-gradient(90deg, #10b981, #059669); border-radius: 99px; transition: width .6s; }
.sis-hist { display: flex; flex-direction: column; gap: 6px; }
.sis-h { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); font-size: 13px; }
.sis-h b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sis-h-ic { font-size: 16px; }
html[data-tema="escuro"] .sis-novo { background: #052e1f; border-color: #065f46; }
html[data-tema="escuro"] .sis-aviso { background: #2a2108; border-color: #713f12; }
html[data-tema="escuro"] .sis-erro { background: #2a0f0f; border-color: #7f1d1d; color: #fca5a5; }

.tf-confiar { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; font-size: 13.5px; color: var(--text); cursor: pointer; flex-wrap: wrap; }
.tf-confiar input { accent-color: var(--brand); width: 16px; height: 16px; }
.tf-confiar select { border: 1px solid var(--border); border-radius: 8px; padding: 3px 6px; background: var(--panel); font-size: 13px; }
.tf-confiar-dica { font-size: 12px; color: var(--muted); margin: 0 0 14px 24px; }