/* ==========================================================================
   Central de Atendimento — identidade Fixwash
   Marinho para estrutura, ciano #40BBFB para destaques, azul para ações.
   ========================================================================== */
:root {
  --navy: #0E2A47;
  --navy-2: #163A5F;
  --cyan: #40BBFB;
  --cyan-soft: #E4F5FE;
  --blue: #0B7BC1;
  --blue-dark: #09649D;
  --canvas: #EEF3F8;
  --panel: #FFFFFF;
  --ink: #12263D;
  --ink-2: #33475E;
  --muted: #61748A;
  --line: #DCE4EE;
  --line-soft: #EDF2F7;
  --hover: #F4F8FC;
  --select: #E6F4FD;
  --bubble-out: #DDF1FD;
  --bubble-bot: #ECE9FC;
  --note: #FFF4D6;
  --note-line: #EDC36A;
  --ok: #15803D;
  --ok-soft: #DCF5E5;
  --wait: #B45309;
  --wait-soft: #FEF0D7;
  --bot: #6A4FD8;
  --bot-soft: #ECE9FC;
  --danger: #C62828;
  --danger-soft: #FDE7E7;
  --warn: #B45309;
  /* compatibilidade com telas antigas */
  --accent: var(--blue);
  --accent-ink: #fff;
  --accent-soft: var(--cyan-soft);
  --bg: var(--canvas);
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --shadow-1: 0 1px 2px rgba(14, 42, 71, .06), 0 1px 1px rgba(14, 42, 71, .04);
  --shadow-2: 0 8px 28px rgba(14, 42, 71, .14), 0 2px 6px rgba(14, 42, 71, .06);
  --shadow: var(--shadow-1);
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.5 var(--font); color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; font-feature-settings: 'tnum' 0; }
.hidden { display: none !important; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea {
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 11px; background: #fff; width: 100%; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
select { padding-right: 30px; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2361748A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center / 16px; cursor: pointer; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(64, 187, 251, .28); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
input[type=color] { padding: 3px; height: 40px; cursor: pointer; }
label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
code { background: var(--line-soft); padding: 1px 6px; border-radius: 5px; font-size: 12.5px; }
.muted { color: var(--muted); }
.hint { font-size: 12.5px; color: var(--muted); margin: 0; }
h1, h2, h3 { color: var(--navy); letter-spacing: -.01em; }

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); background: #fff; border-radius: var(--r-sm);
  padding: 8px 14px; cursor: pointer; font-weight: 600; font-size: 13.5px; white-space: nowrap; color: var(--ink-2); transition: background .15s, border-color .15s, color .15s; }
.btn svg { width: 17px; height: 17px; }
.btn:hover { background: var(--hover); border-color: #c9d5e3; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn.danger { color: var(--danger); }
.btn.danger:hover { background: var(--danger-soft); border-color: #f3c2c2; }
.btn.sm { padding: 6px 11px; font-size: 13px; }
.btn.lg { padding: 11px 18px; font-size: 15px; }
.btn.round { border-radius: 999px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .55; cursor: default; }
.btn.link { border: 0; background: none; color: var(--blue); padding: 0; align-self: flex-start; font-weight: 600; }
a.btn { text-decoration: none; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm); border: 0; background: transparent; cursor: pointer; color: var(--muted); flex: none; transition: background .15s, color .15s; }
.icon-btn:hover { background: var(--line-soft); color: var(--ink); }

/* ---------- Login: veja "Tela de entrada" no fim do arquivo ---------- */
.form-error { color: var(--danger); margin: 0; min-height: 1.2em; font-size: 13px; }
.brand-dot { display: none; }

/* ---------- Estrutura ---------- */
.app { display: flex; height: 100vh; }
.view { flex: 1; min-width: 0; }
.inbox { display: flex; }

/* Barra lateral */
.rail { width: 78px; background: var(--navy); color: #9fb6cc; display: flex; flex-direction: column; align-items: center; padding: 14px 0 12px; gap: 2px; flex: none; z-index: 5; }
.rail-logo { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; background: var(--cyan); color: var(--navy); overflow: hidden; }
.rail-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.rail-logo img + .rail-mark { display: none; }
.rail-mark { width: 22px; height: 22px; stroke-width: 2.2; }
.rail-btn { position: relative; width: 66px; padding: 9px 0 7px; border: 0; background: transparent; color: inherit; border-radius: 12px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 500; transition: background .15s, color .15s; }
.rail-btn svg { width: 22px; height: 22px; }
.rail-btn:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.rail-btn.active { background: rgba(64, 187, 251, .16); color: #fff; }
.rail-btn.active::before { content: ''; position: absolute; left: -6px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--cyan); }
.rail-badge { position: absolute; top: 3px; right: 9px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--cyan); color: var(--navy); font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; }
.rail-badge:empty { display: none; }
.rail-spacer { flex: 1; }
.wa-pill { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; padding: 8px 0; width: 66px; text-align: center; border: 0; background: none; color: inherit; border-radius: 10px; cursor: default; }
.wa-pill i { width: 10px; height: 10px; border-radius: 50%; background: #7d8fa3; }
.wa-pill.connected i { background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .2); }
.wa-pill.qr i, .wa-pill.connecting i { background: #fbbf24; box-shadow: 0 0 0 4px rgba(251, 191, 36, .2); }
.wa-pill.disconnected i { background: #f87171; box-shadow: 0 0 0 4px rgba(248, 113, 113, .2); }
.me-wrap { position: relative; margin-top: 6px; }
.me-btn { border: 0; background: none; padding: 3px; border-radius: 50%; cursor: pointer; }
.me-btn .avatar { box-shadow: 0 0 0 2px var(--navy), 0 0 0 4px rgba(64, 187, 251, .5); }
.me-menu { position: absolute; left: 58px; bottom: 0; width: 240px; background: #fff; color: var(--ink); border-radius: var(--r); box-shadow: var(--shadow-2); padding: 8px; z-index: 40; }
.me-card { display: flex; gap: 10px; align-items: center; padding: 8px; border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; }
.me-card small { display: block; color: var(--muted); font-size: 12px; }
.menu-item { display: flex; width: 100%; align-items: center; gap: 8px; border: 0; background: none; padding: 9px 10px; border-radius: var(--r-sm); cursor: pointer; text-align: left; color: var(--ink-2); font-weight: 500; }
.menu-item:hover { background: var(--hover); }
.menu-item svg { width: 18px; height: 18px; }

/* ---------- Avatares ---------- */
.avatar { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; color: #fff; flex: none; font-size: 15px;
  background: hsl(var(--h, 205) 42% 46%); overflow: hidden; letter-spacing: .02em; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar.xs { width: 22px; height: 22px; font-size: 9.5px; }
.avatar.sm { width: 34px; height: 34px; font-size: 12.5px; }
.avatar.md { width: 40px; height: 40px; font-size: 14px; }
.avatar.lg { width: 64px; height: 64px; font-size: 22px; }
.avatar.xl { width: 84px; height: 84px; font-size: 28px; }

/* ---------- Lista de conversas ---------- */
.list-pane { width: 392px; flex: none; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.list-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 10px 20px; }
.list-head h1 { margin: 0; font-size: 21px; font-weight: 700; }
.head-actions { display: flex; gap: 4px; align-items: center; }
.search-box { position: relative; margin: 0 16px; }
.search-box svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
.search-box input { padding-left: 36px; background: var(--canvas); border-color: transparent; border-radius: 10px; }
.search-box input:focus { background: #fff; }
.tabs { display: flex; gap: 2px; margin: 12px 16px 0; padding: 3px; background: var(--canvas); border-radius: 11px; overflow-x: auto; scrollbar-width: none; }
.tabs button { flex: 1 0 auto; border: 0; background: none; padding: 7px 6px; cursor: pointer; color: var(--muted); font-weight: 600; font-size: 12px; border-radius: 8px;
  white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 5px; transition: background .15s, color .15s; }
.tabs button:hover { color: var(--ink); }
.tabs button.active { background: #fff; color: var(--navy); box-shadow: var(--shadow-1); }
.tabs b { background: var(--line); color: var(--ink-2); font-size: 10.5px; padding: 0 5px; border-radius: 9px; min-width: 18px; line-height: 17px; text-align: center; }
.tabs b:empty { display: none; }
.tabs b.hot { background: var(--cyan); color: var(--navy); }
.filters { display: flex; gap: 6px; padding: 10px 16px 10px; border-bottom: 1px solid var(--line-soft); }
.filters select { font-size: 12.5px; padding: 6px 28px 6px 10px; border-radius: 999px; background-color: #fff; color: var(--ink-2); flex: 1; min-width: 0; }
.conv-list { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; flex: 1; }
.conv { display: flex; gap: 12px; padding: 11px 16px 11px 18px; cursor: pointer; position: relative; transition: background .12s; }
.conv + .conv::before { content: ''; position: absolute; top: 0; left: 74px; right: 16px; border-top: 1px solid var(--line-soft); }
.conv:hover { background: var(--hover); }
.conv.active { background: var(--select); }
.conv.active::after { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cyan); }
.conv.active + .conv::before, .conv:hover + .conv::before { border-color: transparent; }
.conv-main { flex: 1; min-width: 0; }
.conv-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.conv-top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14.5px; color: var(--ink); }
.conv-top time { color: var(--muted); font-size: 11.5px; flex: none; font-variant-numeric: tabular-nums; }
.conv.has-unread .conv-top time { color: var(--blue); font-weight: 600; }
.conv-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; }
.conv-preview { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.conv.has-unread .conv-preview { color: var(--ink-2); font-weight: 500; }
.unread { background: var(--cyan); color: var(--navy); border-radius: 10px; font-size: 11px; font-weight: 700; padding: 0 7px; line-height: 19px; flex: none; }
.conv-meta { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 7px; align-items: center; }
.conv-meta .who-mini { margin-left: auto; display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); }
.assignee { font-size: 11.5px; color: var(--muted); }
.list-empty { padding: 48px 28px; text-align: center; color: var(--muted); }
.list-empty b { display: block; color: var(--navy); font-size: 15px; margin-bottom: 4px; }

/* Etiquetas e selos */
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; padding: 1px 8px 1px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--c) 11%, white); color: color-mix(in srgb, var(--c) 72%, black); line-height: 19px; }
.tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 1px 9px; border-radius: 999px; background: var(--line-soft); color: var(--ink-2); line-height: 19px; }
.pill.on { background: var(--ok-soft); color: var(--ok); }
.pill.off { background: var(--danger-soft); color: var(--danger); }
.pill.bot { background: var(--bot-soft); color: var(--bot); }
.status-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 1px 9px; border-radius: 999px; margin-left: 8px; line-height: 19px; }
.status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-badge.waiting { background: var(--wait-soft); color: var(--wait); }
.status-badge.open { background: var(--ok-soft); color: var(--ok); }
.status-badge.closed { background: var(--line-soft); color: var(--muted); }
.status-badge.bot { background: var(--bot-soft); color: var(--bot); }

/* ---------- Conversa ---------- */
.chat-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative;
  background-color: #EAF3FA; background-image: var(--drops); background-size: 132px 132px; }
:root { --drops: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132' viewBox='0 0 132 132'%3E%3Cg fill='%2340BBFB' fill-opacity='.13'%3E%3Cpath d='M30 18c6 9 10 15 10 20a10 10 0 0 1-20 0c0-5 4-11 10-20z'/%3E%3Cpath d='M96 70c4 6 7 10 7 13.5a7 7 0 0 1-14 0C89 80 92 76 96 70z'/%3E%3Cpath d='M58 98c3 4.5 5 7.5 5 10a5 5 0 0 1-10 0c0-2.5 2-5.5 5-10z'/%3E%3Cpath d='M110 12c2.4 3.6 4 6 4 8a4 4 0 0 1-8 0c0-2 1.6-4.4 4-8z'/%3E%3C/g%3E%3C/svg%3E"); }
.empty-chat { margin: auto; padding: 24px; }
.empty-card { background: rgba(255, 255, 255, .92); border-radius: var(--r-lg); padding: 32px 36px; text-align: center; max-width: 380px; box-shadow: var(--shadow-1); }
.empty-card h2 { margin: 16px 0 6px; font-size: 19px; }
.empty-card p { margin: 0 0 16px; color: var(--muted); }
.empty-illus { width: 64px; height: 64px; border-radius: 18px; margin: 0 auto; background: var(--navy); display: grid; place-items: center; color: var(--cyan); }
.empty-illus svg { width: 30px; height: 30px; }
.chat { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line); min-height: 66px; }
.chat-who { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 150px; border: 0; background: none; padding: 4px; margin: -4px; border-radius: 10px; cursor: pointer; text-align: left; }
.chat-who:hover { background: var(--hover); }
.chat-title { min-width: 0; }
.chat-title strong { display: flex; align-items: center; min-width: 0; font-size: 15.5px; color: var(--navy); }
.chat-title strong > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-title strong .status-badge { flex: none; }
.sub-extra::before { content: ''; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; margin: 0 7px 3px; }
.chat-title small { color: var(--muted); display: flex; align-items: center; white-space: nowrap; overflow: hidden; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.chat-actions { display: flex; gap: 6px; align-items: center; }
.chat-actions .btn { padding: 7px 12px; }
.back-btn { display: none; }
.chat-tags { display: flex; gap: 5px; flex-wrap: wrap; padding: 7px 16px; background: rgba(255, 255, 255, .9); border-bottom: 1px solid var(--line-soft); }
.chat-tags:empty { display: none; }

.messages { flex: 1; overflow-y: auto; padding: 18px 7% 12px; display: flex; flex-direction: column; gap: 3px; }
.day-sep { align-self: center; background: rgba(255, 255, 255, .95); color: var(--ink-2); font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: 999px; margin: 12px 0 8px; box-shadow: var(--shadow-1); }
.sys { align-self: center; font-size: 12px; color: var(--ink-2); background: rgba(255, 255, 255, .8); border: 1px solid var(--line); padding: 3px 12px; border-radius: 999px; margin: 6px 0; text-align: center; }
.bubble { max-width: min(560px, 76%); padding: 7px 10px 5px; border-radius: 14px; background: #fff; box-shadow: 0 1px 1.5px rgba(14, 42, 71, .1); align-self: flex-start; word-wrap: break-word; position: relative; font-size: 14.2px; line-height: 1.45; }
.bubble.in { border-top-left-radius: 4px; }
.bubble.out { background: var(--bubble-out); align-self: flex-end; border-top-right-radius: 4px; }
.bubble.out.robot { background: var(--bubble-bot); }
.bubble .txt { white-space: pre-wrap; }
.bubble .who { font-size: 12px; font-weight: 600; color: var(--blue-dark); margin-bottom: 2px; }
.bubble .who.bot { color: var(--bot); }
.bubble .foot { display: flex; justify-content: flex-end; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); margin-top: 1px; font-variant-numeric: tabular-nums; }
.bubble .foot svg { width: 14px; height: 14px; }
.bubble.out .foot svg { color: var(--blue); }
.bubble.failed { box-shadow: 0 0 0 1.5px #f3a5a5; }
.bubble.note { background: var(--note); box-shadow: 0 0 0 1px var(--note-line) inset; align-self: flex-end; border-radius: 12px; }
.bubble.note .who { color: #8a5a00; }
.retry { color: var(--danger); border: 0; background: none; cursor: pointer; font-size: 11px; font-weight: 700; padding: 0; text-decoration: underline; }
.bubble img.media, .bubble video.media { display: block; max-width: 100%; max-height: 320px; border-radius: 9px; margin: 2px 0 4px; cursor: zoom-in; }
.bubble img.sticker { max-width: 140px; background: transparent; }
.bubble audio { width: 270px; max-width: 100%; display: block; margin: 2px 0; }
.doc { display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: rgba(14, 42, 71, .05); border-radius: 9px; text-decoration: none; color: inherit; margin: 2px 0 4px; font-weight: 500; }
.doc svg { color: var(--blue); }
.doc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bubble a { color: var(--blue-dark); }
.load-more { align-self: center; margin-bottom: 8px; }

.banner { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; text-align: center; padding: 10px 16px; font-size: 13.5px;
  background: #fff; border-top: 1px solid var(--line); color: var(--ink-2); }
.banner::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; }
.composer { display: flex; align-items: flex-end; gap: 8px; padding: 10px 14px 12px; background: var(--panel); border-top: 1px solid var(--line); position: relative; }
.composer-box { flex: 1; display: flex; align-items: flex-end; gap: 2px; background: var(--canvas); border: 1px solid transparent; border-radius: 22px; padding: 3px 4px; transition: border-color .15s, background .15s; }
.composer-box:focus-within { background: #fff; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(64, 187, 251, .25); }
.composer-box .icon-btn { width: 36px; height: 36px; border-radius: 50%; }
.composer-box textarea { resize: none; max-height: 160px; border: 0; background: transparent; box-shadow: none !important; padding: 8px 8px; border-radius: 0; line-height: 1.45; }
.composer.note-mode .composer-box { background: var(--note); border-color: var(--note-line); box-shadow: none; }
#noteToggle.on { background: var(--note-line); color: #fff; }
.send-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--blue); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; transition: background .15s; }
.send-btn:hover { background: var(--blue-dark); }
.send-btn:disabled { opacity: .5; cursor: default; }
.send-btn svg { width: 19px; height: 19px; margin-left: -2px; }
.qr-popup { position: absolute; left: 14px; right: 66px; bottom: 100%; margin-bottom: 6px; background: #fff; border-radius: var(--r); box-shadow: var(--shadow-2); max-height: 270px; overflow-y: auto; padding: 4px; }
.qr-item { padding: 8px 12px; cursor: pointer; border-radius: var(--r-sm); }
.qr-item.sel, .qr-item:hover { background: var(--select); }
.qr-item b { color: var(--blue-dark); }
.qr-item div { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-preview { position: absolute; left: 14px; bottom: 100%; margin-bottom: 6px; background: #fff; border-radius: var(--r); box-shadow: var(--shadow-2); padding: 10px; display: flex; gap: 10px; align-items: center; max-width: calc(100% - 28px); }
.attach-preview img { max-height: 80px; border-radius: 8px; }
.attach-preview span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Detalhes do contato ---------- */
.details-pane { width: 320px; flex: none; background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; overflow-y: auto; }
.det-head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 18px 18px; text-align: center; border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--cyan-soft), #fff 70%); }
.det-head .icon-btn { position: absolute; top: 8px; right: 8px; }
.det-head .avatar { margin-bottom: 8px; box-shadow: 0 0 0 4px #fff; }
.det-head strong { font-size: 16.5px; color: var(--navy); }
.det-head small { color: var(--muted); font-variant-numeric: tabular-nums; }
.details-body { padding: 4px 18px 24px; display: flex; flex-direction: column; }
.det-sec { padding: 16px 0; border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 10px; }
.det-sec:last-child { border-bottom: 0; }
.det-sec h3 { margin: 0; font-size: 13.5px; font-weight: 700; }
.row { display: flex; gap: 6px; }
.kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.kv span { color: var(--muted); }
.kv b { font-weight: 600; text-align: right; word-break: break-word; color: var(--ink-2); }
.fields { display: flex; flex-direction: column; gap: 10px; }
.tag-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-pick { border: 1px dashed var(--line); background: #fff; border-radius: 999px; padding: 3px 10px 3px 8px; font-size: 12px; font-weight: 500; color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: all .12s; }
.tag-pick::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); opacity: .45; }
.tag-pick:hover { border-color: var(--c); color: var(--ink-2); }
.tag-pick.on { border-style: solid; border-color: transparent; background: color-mix(in srgb, var(--c) 14%, white); color: color-mix(in srgb, var(--c) 72%, black); }
.tag-pick.on::before { opacity: 1; }
.section-title { font-weight: 700; margin-top: 8px; color: var(--navy); font-size: 13.5px; }
.section-title small { font-weight: 400; }

/* ---------- Páginas ---------- */
.page { overflow-y: auto; }
.page-inner { max-width: 940px; margin: 0 auto; padding: 32px 24px 64px; }
.page-inner.wide { max-width: 1180px; }
.page-inner.narrow { max-width: 580px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.page-head.spaced { margin-top: 40px; }
.page-head h1 { font-size: 26px; margin: 0 0 4px; font-weight: 700; }
.page-head .count { font-size: 15px; font-weight: 600; color: var(--muted); margin-left: 4px; font-variant-numeric: tabular-nums; }
.page-head p { margin: 0; max-width: 64ch; }
.page-actions { display: flex; gap: 8px; flex: none; }
.card { background: var(--panel); border-radius: var(--r); box-shadow: var(--shadow-1); border: 1px solid var(--line-soft); padding: 18px; margin-bottom: 16px; }
.card.flush { padding: 0; overflow: hidden; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; align-items: end; }
.form-grid .span2 { grid-column: 1 / -1; }
.form-actions { display: flex; justify-content: flex-end; grid-column: 1 / -1; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table th { font-size: 12.5px; color: var(--muted); font-weight: 600; background: #FAFCFE; }
.table tbody tr:hover td, .table tr:hover td { background: var(--hover); }
.table td.actions { text-align: right; white-space: nowrap; }
.table .pre { white-space: pre-wrap; color: var(--ink-2); }
.table td.muted { padding: 28px 16px; text-align: center; }
.toolbar { display: flex; gap: 10px; margin-bottom: 14px; align-items: center; }
.toolbar .search-box { flex: 1; margin: 0; }
.toolbar .search-box input { background: #fff; border-color: var(--line); }
.toolbar select { width: 230px; }
.contacts td { padding: 10px 16px; }
.c-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.c-who b { display: block; font-weight: 600; color: var(--ink); }
.c-who small { color: var(--muted); font-size: 12px; }
.c-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.contacts tr[data-cid] { cursor: pointer; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-2); }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.pager div { display: flex; gap: 6px; }

/* WhatsApp */
.wa-card { text-align: center; padding: 32px; }
.wa-card img { width: 280px; max-width: 100%; border-radius: var(--r); border: 1px solid var(--line); padding: 8px; background: #fff; }
.wa-card ol { text-align: left; max-width: 380px; margin: 18px auto; color: var(--ink-2); line-height: 1.8; }
.wa-big { font-size: 19px; font-weight: 700; margin: 12px 0 4px; color: var(--navy); }
.wa-icon { width: 68px; height: 68px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; }
.wa-icon svg { width: 32px; height: 32px; stroke-width: 2.2; }
.wa-icon.ok { background: var(--ok-soft); color: var(--ok); }
.wa-icon.wait { background: var(--wait-soft); color: var(--wait); }
.spinner { width: 30px; height: 30px; border: 3px solid var(--line); border-top-color: var(--cyan); border-radius: 50%; animation: spin 1s linear infinite; margin: 24px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Robôs */
.dropzone { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 20px; border: 1.5px dashed #b9cbe0; box-shadow: none; cursor: pointer; color: var(--ink-2); font-weight: 400; flex-direction: row; background: #FAFCFE; }
.dropzone svg { width: 24px; height: 24px; color: var(--blue); }
.dropzone.over, .dropzone:hover { border-color: var(--blue); background: var(--cyan-soft); }
.report p { margin: 4px 0; }
.warn { color: var(--warn); }
.bot-card { padding: 20px; }
.bot-card h3 { margin: 0; font-size: 17px; }
.bot-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.bot-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.map-grid { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(160px, 1.4fr); gap: 6px 12px; align-items: center; margin-top: 6px; }
.media-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; }
.media-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-row .btn { flex-direction: row; }
.switch { flex-direction: row; align-items: center; gap: 9px; cursor: pointer; font-weight: 600; white-space: nowrap; color: var(--ink-2); }
.switch input { display: none; }
.switch span { width: 42px; height: 24px; border-radius: 999px; background: #c8d3df; position: relative; transition: background .2s; }
.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.switch input:checked + span { background: var(--ok); }
.switch input:checked + span::after { left: 21px; }
.bot-pick { display: flex; flex-direction: column; gap: 6px; }
.bot-pick .btn { justify-content: flex-start; gap: 8px; padding: 11px 14px; }
.bot-pick .btn small { font-weight: 400; }
label.btn { flex-direction: row; }

/* ---------- Modal / aviso ---------- */
.modal { position: fixed; inset: 0; background: rgba(14, 42, 71, .45); display: grid; place-items: center; padding: 16px; z-index: 50; }
.modal-box { background: #fff; border-radius: var(--r-lg); padding: 22px; width: 100%; max-width: 440px; box-shadow: 0 24px 60px rgba(14, 42, 71, .3); display: flex; flex-direction: column; gap: 14px; max-height: 90vh; overflow: auto; }
.modal-box h3 { margin: 0; font-size: 18px; }
.modal-box .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.modal-box img.full { max-width: 100%; border-radius: var(--r); }
.modal.image .modal-box { max-width: 920px; background: transparent; box-shadow: none; padding: 0; align-items: center; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--navy); color: #fff; padding: 11px 18px; border-radius: var(--r); z-index: 60; box-shadow: var(--shadow-2); max-width: calc(100% - 32px); font-weight: 500; }
.toast.error { background: var(--danger); }

/* Com o painel de detalhes aberto, os botões da conversa ficam só com ícone */
.details-open .chat-actions .btn span { display: none; }
@media (max-width: 1320px) { .chat-actions .btn span { display: none; } }

/* ---------- Telas menores ---------- */
@media (max-width: 1180px) {
  .details-pane { position: fixed; right: 0; top: 0; bottom: 0; z-index: 30; box-shadow: -12px 0 32px rgba(14, 42, 71, .16); }
}
@media (max-width: 900px) {
  .chat-actions .btn span { display: none; }
}
@media (max-width: 760px) {
  .app { flex-direction: column-reverse; height: 100dvh; }
  .rail { width: 100%; flex-direction: row; height: 62px; padding: 0 4px; justify-content: space-around; gap: 0; }
  .rail-logo, .rail-spacer, .wa-pill, .me-wrap { display: none; }
  .rail-btn { width: auto; flex: 1; font-size: 10px; padding: 6px 0; }
  .rail-btn.active::before { left: 25%; right: 25%; top: -0px; bottom: auto; width: auto; height: 3px; }
  .rail-btn.admin-only:not([data-view=bots]) { display: none; }
  .view { min-height: 0; }
  .list-pane { width: 100%; border-right: 0; }
  .inbox.chat-open .list-pane { display: none; }
  .inbox:not(.chat-open) .chat-pane { display: none; }
  .back-btn { display: inline-grid; }
  .messages { padding: 12px; }
  .chat-head { padding: 8px; gap: 6px; flex-wrap: wrap; }
  .chat-who { flex: 1 1 calc(100% - 100px); }
  .chat-actions { order: 3; width: 100%; justify-content: flex-end; }
  .chat-head .avatar { width: 34px; height: 34px; font-size: 12px; }
  .status-badge { display: none; }
  .chat-actions .btn { padding: 6px 9px; }
  .details-pane { width: 100%; }
  .bubble { max-width: 88%; }
  .page-inner { padding: 22px 16px 48px; }
  .page-head { flex-direction: column; align-items: stretch; }
  .toolbar { flex-wrap: wrap; }
  .toolbar select { width: 100%; }
  .contacts .hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ==========================================================================
   Caixa de mensagem com barra de ferramentas
   ========================================================================== */
.composer { align-items: flex-end; padding: 10px 14px 12px; }
.composer-card { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; transition: border-color .15s, box-shadow .15s; }
.composer-card:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(64, 187, 251, .22); }
.composer-card textarea { display: block; resize: none; max-height: 180px; border: 0; box-shadow: none !important; padding: 11px 14px 4px; background: transparent; line-height: 1.45; border-radius: 16px 16px 0 0; }
.composer-bar { display: flex; align-items: center; gap: 2px; padding: 4px 6px 6px; }
.cbtn { height: 32px; min-width: 32px; padding: 0 7px; border: 0; background: none; border-radius: 8px; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; font-size: 12.5px; font-weight: 600; flex-direction: row; }
.cbtn svg { width: 19px; height: 19px; }
.cbtn:hover { background: var(--line-soft); color: var(--ink); }
.cbtn.on { background: var(--note); color: #8a5a00; }
#signToggle.on { background: var(--cyan-soft); color: var(--blue-dark); }
.cbar-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.cbar-hint { margin-left: auto; font-size: 11.5px; color: var(--muted); padding-right: 6px; white-space: nowrap; }
.composer.note-mode .composer-card { background: var(--note); border-color: var(--note-line); box-shadow: none; }
.composer.note-mode .composer-card textarea { background: transparent; }
.composer .send-btn { width: 46px; height: 46px; margin-bottom: 2px; }
.emoji-pop { position: absolute; left: 14px; bottom: 100%; margin-bottom: 6px; width: 340px; max-width: calc(100% - 28px); background: #fff; border-radius: var(--r); box-shadow: var(--shadow-2); padding: 10px; z-index: 6; }
.emoji-pop .eg { display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; }
.emoji-pop button { border: 0; background: none; font-size: 21px; line-height: 1; padding: 6px 0; border-radius: 8px; cursor: pointer; }
.emoji-pop button:hover { background: var(--hover); }
.emoji-pop .et { font-size: 11.5px; font-weight: 600; color: var(--muted); margin: 6px 4px 4px; }

/* ---------- Painel lateral (finalizar) ---------- */
.drawer-wrap { position: fixed; inset: 0; background: rgba(14, 42, 71, .35); z-index: 45; display: flex; justify-content: flex-end; }
.drawer { width: 440px; max-width: 100%; height: 100%; background: #fff; display: flex; flex-direction: column; box-shadow: -16px 0 40px rgba(14, 42, 71, .2); animation: drawerIn .2s ease-out; }
@keyframes drawerIn { from { transform: translateX(30px); opacity: .4; } }
.drawer header { display: flex; align-items: center; gap: 8px; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); }
.drawer header h3 { margin: 0; font-size: 18px; }
.drawer-who { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.drawer-who b { display: block; color: var(--navy); font-size: 15px; }
.drawer-who small { color: var(--muted); }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.drawer footer { padding: 16px 20px; border-top: 1px solid var(--line-soft); }
.opt-card { display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--line); border-radius: 12px; padding: 14px; cursor: pointer; flex-direction: row; font-weight: 500; color: var(--ink); }
.opt-card:hover { border-color: #b9cbe0; }
.opt-card.on { border-color: var(--blue); background: var(--cyan-soft); }
.opt-card input { width: auto; margin-top: 3px; }
.opt-card .oc-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--canvas); color: var(--blue); display: grid; place-items: center; flex: none; }
.opt-card.on .oc-ico { background: #fff; }
.opt-card b { display: block; color: var(--navy); }
.opt-card small { color: var(--muted); font-weight: 400; }
.opt-extra { margin: -2px 0 6px 48px; display: flex; flex-direction: column; gap: 8px; }
.info-note { display: flex; gap: 8px; align-items: center; background: var(--cyan-soft); color: var(--blue-dark); border-radius: 10px; padding: 10px 12px; font-size: 13px; font-weight: 500; }
.info-note svg { width: 17px; height: 17px; }

/* ---------- Biblioteca de mídias ---------- */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.lib-card { background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-1); display: flex; flex-direction: column; position: relative; }
.lib-thumb { aspect-ratio: 4 / 3; background: var(--canvas); display: grid; place-items: center; overflow: hidden; cursor: pointer; }
.lib-thumb img, .lib-thumb video { width: 100%; height: 100%; object-fit: cover; }
.lib-thumb .ftype { width: 64px; height: 76px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .02em; position: relative; }
.lib-thumb .ftype::after { content: ''; position: absolute; top: 0; right: 0; border-width: 0 16px 16px 0; border-style: solid; border-color: var(--canvas) rgba(255, 255, 255, .45); }
.lib-meta { padding: 9px 11px 10px; display: flex; align-items: center; gap: 6px; }
.lib-meta div { flex: 1; min-width: 0; }
.lib-meta b { display: block; font-size: 12.8px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.lib-meta small { color: var(--muted); font-size: 11.5px; }
.lib-empty { grid-column: 1 / -1; text-align: center; padding: 50px 20px; color: var(--muted); background: #fff; border: 1.5px dashed #b9cbe0; border-radius: 14px; }
.lib-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; max-height: 52vh; overflow-y: auto; padding: 2px; }
.lib-pick .lib-card { cursor: pointer; }
.lib-pick .lib-card.on { box-shadow: 0 0 0 2.5px var(--blue); }
.lib-pick .lib-meta { padding: 6px 8px; }
.modal-box.wide { max-width: 680px; }

/* ---------- Relatórios ---------- */
.rep-filters { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.rep-filters label { min-width: 150px; }
.rep-filters label:last-child { min-width: 220px; }
.seg { display: inline-flex; background: var(--canvas); border-radius: 10px; padding: 3px; gap: 2px; align-self: flex-end; }
.seg button { border: 0; background: none; padding: 8px 13px; border-radius: 8px; font-weight: 600; font-size: 13px; color: var(--muted); cursor: pointer; }
.seg button.on { background: #fff; color: var(--navy); box-shadow: var(--shadow-1); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 16px; }
.kpi { background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow-1); }
.kpi .k-lbl { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.kpi .k-lbl svg { width: 17px; height: 17px; color: var(--blue); }
.kpi .k-val { font-size: 28px; font-weight: 700; color: var(--navy); margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi .k-sub { font-size: 12px; color: var(--muted); }
.charts { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin-bottom: 14px; }
.chart-card { background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow-1); min-width: 0; }
.chart-card h3 { margin: 0 0 2px; font-size: 15px; }
.chart-card > p { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); }
.chart-svg { width: 100%; height: 220px; display: block; overflow: visible; }
.chart-svg text { font: 11px var(--font); fill: var(--muted); }
.hbars { display: flex; flex-direction: column; gap: 9px; }
.hbar { display: grid; grid-template-columns: 130px 1fr 44px; gap: 10px; align-items: center; font-size: 13px; }
.hbar span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.hbar .track { height: 12px; background: var(--canvas); border-radius: 6px; overflow: hidden; }
.hbar .fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.hbar b { text-align: right; font-variant-numeric: tabular-nums; color: var(--navy); }
.agent-table td, .agent-table th { padding: 10px 12px; }
.heat { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; align-items: end; height: 120px; }
.heat div { background: linear-gradient(180deg, var(--cyan), var(--blue)); border-radius: 4px 4px 0 0; min-height: 2px; position: relative; }
.heat-axis { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; font-size: 10.5px; color: var(--muted); text-align: center; margin-top: 4px; }

/* ---------- Ajustes ---------- */
.set-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 18px; align-items: start; }
.set-card { padding: 24px 26px; }
.set-card h2 { margin: 0 0 2px; font-size: 19px; }
.set-card > .muted { margin: 0 0 6px; font-size: 13px; }
.set-block { padding: 16px 0; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 10px; }
.set-block:first-of-type { border-top: 0; }
.set-block h3 { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.set-block h3 svg { width: 18px; height: 18px; color: var(--blue); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tiles button { border: 1.5px solid var(--line); background: #fff; border-radius: 12px; padding: 16px 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); cursor: pointer; }
.tiles button svg { width: 22px; height: 22px; color: var(--muted); }
.tiles button small { font-weight: 400; color: var(--muted); font-size: 11.5px; }
.tiles button.on { border-color: var(--blue); background: var(--cyan-soft); }
.tiles button.on svg { color: var(--blue); }
.radios { display: flex; flex-direction: column; gap: 4px; }
.radios label { flex-direction: row; align-items: center; gap: 10px; font-weight: 500; color: var(--ink); padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.radios label:hover { background: var(--hover); }
.radios input { width: 17px; height: 17px; accent-color: var(--blue); }
.set-switch { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; font-weight: 500; color: var(--ink); cursor: pointer; padding: 4px 0; }
.set-switch .switch span { flex: none; }
.set-actions { display: flex; justify-content: flex-end; padding-top: 6px; }

/* Barra lateral com mais itens */
.rail { overflow-y: auto; scrollbar-width: none; }
.rail-btn { padding: 7px 0 6px; }
@media (max-height: 820px) { .rail-btn span { display: none; } .rail-btn { padding: 10px 0; } }
@media (max-width: 1100px) { .charts { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .rail { overflow: visible; }
  .rail-btn[data-view=library], .rail-btn[data-view=tags], .rail-btn[data-view=quick] { display: none; }
  .rail-btn span { display: block !important; }
  .set-grid { grid-template-columns: 1fr; }
  .cbar-hint, .cbtn.label span { display: none; }
  .drawer { width: 100%; }
  .hbar { grid-template-columns: 90px 1fr 36px; }
}

.set-switch .switch { display: inline-flex; flex: none; }
.switch > span { display: inline-block; flex: none; }
.chart-svg { height: auto; aspect-ratio: 640 / 220; }
.chart-svg { stroke: none; stroke-width: 0; width: 100%; }
.chart-svg text { stroke: none; }

/* ==========================================================================
   Tela de entrada (limpa, centralizada, com a logo original)
   ========================================================================== */
.login { position: relative; min-height: 100%; display: grid; place-items: center; padding: 32px 16px 120px; overflow: hidden;
  background: radial-gradient(900px 420px at 50% -10%, #E4F5FE 0%, rgba(228, 245, 254, 0) 70%), #fff; }
.login-wrap { position: relative; z-index: 1; width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; }
.login-brand { min-height: 64px; display: flex; align-items: center; justify-content: center; }
.login-logo { max-width: 260px; max-height: 72px; object-fit: contain; }
.login-fallback { display: none; font-size: 26px; font-weight: 700; color: var(--navy); letter-spacing: -.02em; }
.login-brand.no-logo .login-fallback { display: block; }
.login-sub { margin: 14px 0 34px; color: #4b5d72; font-size: 16px; text-align: center; }
.login-form { width: 100%; display: flex; flex-direction: column; gap: 18px; }
.login-form > label { font-size: 14px; font-weight: 500; color: var(--ink); gap: 8px; padding-left: 4px; }
.login-form input[type=email], .login-form input[type=password], .login-form input[type=text] {
  height: 46px; border-radius: 14px; border: 1.5px solid #d7dfe8; padding: 0 16px; font-size: 15px; margin-left: -4px; width: calc(100% + 4px); background: #fff; }
.login-form input:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(64, 187, 251, .22); }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 48px !important; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: none; border-radius: 10px; color: #8193a7; cursor: pointer; display: grid; place-items: center; }
.pw-eye:hover { background: var(--hover); color: var(--navy); }
.pw-eye.on { color: var(--blue); }
.pw-eye svg { width: 19px; height: 19px; }
.login-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: -4px; flex-wrap: wrap; }
.login-check { flex-direction: row; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-2); cursor: pointer; font-weight: 400; }
.login-check input { width: 18px; height: 18px; accent-color: var(--blue); margin: 0; }
.login-link { border: 0; background: none; color: var(--blue); font-size: 14px; cursor: pointer; padding: 0; }
.login-link:hover { text-decoration: underline; }
.login-form .form-error { margin: -8px 0 -6px; text-align: center; }
.login-btn { height: 48px; border: 0; border-radius: 999px; background: var(--blue); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 18px rgba(11, 123, 193, .28); transition: background .15s, transform .1s, box-shadow .15s; }
.login-btn:hover { background: var(--blue-dark); box-shadow: 0 8px 22px rgba(11, 123, 193, .34); }
.login-btn:active { transform: translateY(1px); }
.login-btn:disabled { opacity: .7; cursor: default; }
.login-foot { margin: 34px 0 0; color: #8193a7; font-size: 13px; text-align: center; }
.login-waves { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 200px; pointer-events: none; }
.stack { display: flex; flex-direction: column; gap: 12px; }

/* ==========================================================================
   Fundos da área de conversa
   ========================================================================== */
.chat-pane { background-size: auto; }
.chat-pane.bg-liso, .bg-sw.bg-liso { background-color: #EEF3F8; background-image: none; }
.chat-pane.bg-gotas, .bg-sw.bg-gotas { background-color: #EAF3FA; background-image: var(--drops); background-size: 132px 132px; }
.chat-pane.bg-ondas, .bg-sw.bg-ondas { background-color: #EFF7FD;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0 190c160-60 330-70 520-20s380 80 560 20 260-90 360-80V320H0z' fill='%2340BBFB' fill-opacity='.10'/%3E%3Cpath d='M0 240c200-50 400-40 600 5s400 50 580-5 220-50 260-45V320H0z' fill='%2340BBFB' fill-opacity='.13'/%3E%3Cpath d='M0 285c240-30 460-20 680 5s420 15 580-10 150-20 180-15V320H0z' fill='%230B7BC1' fill-opacity='.09'/%3E%3C/svg%3E"),
    radial-gradient(700px 380px at 92% 0%, rgba(64, 187, 251, .16), rgba(64, 187, 251, 0) 70%),
    radial-gradient(520px 300px at 0% 30%, rgba(11, 123, 193, .06), rgba(11, 123, 193, 0) 70%);
  background-repeat: no-repeat; background-position: bottom center, top right, left center; background-size: 100% 260px, auto, auto; }
.chat-pane.bg-bolhas, .bg-sw.bg-bolhas { background-color: #EEF7FD;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cg fill='%2340BBFB'%3E%3Ccircle cx='40' cy='52' r='22' fill-opacity='.09'/%3E%3Ccircle cx='72' cy='30' r='7' fill-opacity='.12'/%3E%3Ccircle cx='210' cy='90' r='34' fill-opacity='.07'/%3E%3Ccircle cx='258' cy='54' r='10' fill-opacity='.11'/%3E%3Ccircle cx='120' cy='190' r='15' fill-opacity='.10'/%3E%3Ccircle cx='280' cy='236' r='24' fill-opacity='.08'/%3E%3Ccircle cx='60' cy='272' r='9' fill-opacity='.12'/%3E%3Ccircle cx='180' cy='290' r='5' fill-opacity='.14'/%3E%3C/g%3E%3Cg fill='none' stroke='%2340BBFB' stroke-opacity='.22' stroke-width='1.5'%3E%3Ccircle cx='40' cy='52' r='22'/%3E%3Ccircle cx='210' cy='90' r='34'/%3E%3Ccircle cx='280' cy='236' r='24'/%3E%3Ccircle cx='120' cy='190' r='15'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='.7'%3E%3Cellipse cx='32' cy='42' rx='6' ry='3.5' transform='rotate(-35 32 42)'/%3E%3Cellipse cx='198' cy='74' rx='9' ry='5' transform='rotate(-35 198 74)'/%3E%3Cellipse cx='272' cy='224' rx='6.5' ry='3.8' transform='rotate(-35 272 224)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px; }
.chat-pane.bg-ceu, .bg-sw.bg-ceu { background-color: #F3F9FE;
  background-image: radial-gradient(600px 320px at 15% 10%, rgba(64, 187, 251, .20), rgba(64, 187, 251, 0) 70%),
    radial-gradient(520px 300px at 85% 80%, rgba(124, 92, 224, .10), rgba(124, 92, 224, 0) 70%),
    radial-gradient(420px 260px at 70% 20%, rgba(21, 160, 106, .07), rgba(21, 160, 106, 0) 70%);
  background-repeat: no-repeat; }
.chat-pane.bg-foto { background-color: #EEF3F8; background-size: cover; background-position: center; }
.bg-picks { display: flex; flex-wrap: wrap; gap: 10px; }
.bg-pick { border: 2px solid transparent; background: none; padding: 4px; border-radius: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.bg-pick:hover { background: var(--hover); }
.bg-pick.on { border-color: var(--blue); color: var(--navy); }
.bg-sw { width: 96px; height: 64px; border-radius: 10px; border: 1px solid var(--line); display: block; background-size: cover !important; background-position: center; }
.bg-sw.bg-ondas { background-size: 100% 40px, auto, auto !important; background-position: bottom, top right, left !important; }
.bg-sw.bg-bolhas, .bg-sw.bg-gotas { background-size: 110px 110px !important; }
.bg-upload { align-self: flex-start; cursor: pointer; }

/* ==========================================================================
   Tela inicial das conversas (resumo do dia)
   ========================================================================== */
.empty-chat { margin: auto; padding: 32px 28px; width: 100%; max-width: 760px; overflow-y: auto; }
.welcome { display: flex; flex-direction: column; gap: 18px; }
.welcome-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.welcome-head h2 { margin: 0; font-size: 28px; font-weight: 700; color: var(--navy); }
.welcome-head p { margin: 2px 0 0; color: var(--muted); font-size: 14.5px; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi-card { --k: var(--blue); text-align: left; border: 1px solid rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .88); backdrop-filter: blur(6px); border-radius: 16px; padding: 16px 16px 14px; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px; box-shadow: 0 1px 2px rgba(14, 42, 71, .05), 0 6px 18px rgba(14, 42, 71, .06); transition: transform .15s, box-shadow .15s, border-color .15s; position: relative; overflow: hidden; }
.kpi-card::after { content: ''; position: absolute; right: -24px; top: -24px; width: 80px; height: 80px; border-radius: 50%; background: color-mix(in srgb, var(--k) 10%, transparent); }
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(14, 42, 71, .06), 0 12px 26px rgba(14, 42, 71, .10); }
.kpi-card.on { border-color: var(--k); }
.kpi-card.k-wait { --k: #E08A0B; } .kpi-card.k-mine { --k: var(--blue); } .kpi-card.k-open { --k: #15A06A; } .kpi-card.k-bot { --k: #6A4FD8; }
.kpi-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--k) 14%, white); color: var(--k); margin-bottom: 10px; }
.kpi-ico svg { width: 18px; height: 18px; stroke-width: 2; }
.kpi-card b { font-size: 30px; line-height: 1.05; color: var(--navy); font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi-card > span:not(.kpi-ico) { font-weight: 600; color: var(--ink); font-size: 14px; }
.kpi-card small { color: var(--muted); font-size: 12px; }
.welcome-row { display: grid; grid-template-columns: 1fr 1.3fr; gap: 12px; }
.w-card { background: rgba(255, 255, 255, .88); backdrop-filter: blur(6px); border-radius: 16px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(14, 42, 71, .05), 0 6px 18px rgba(14, 42, 71, .06); }
.wa-card-mini { display: flex; align-items: center; gap: 12px; }
.wa-card-mini[role=button] { cursor: pointer; }
.wa-card-mini b { display: block; color: var(--navy); font-size: 14px; }
.wa-card-mini small { color: var(--muted); font-size: 12.5px; }
.wa-card-mini > div { flex: 1; min-width: 0; }
.wa-dot { width: 12px; height: 12px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 0 5px rgba(251, 191, 36, .2); flex: none; margin: 0 4px; }
.wa-card-mini.connected .wa-dot { background: #22c55e; box-shadow: 0 0 0 5px rgba(34, 197, 94, .18); }
.wa-card-mini.qr .wa-dot, .wa-card-mini.disconnected .wa-dot { background: #ef4444; box-shadow: 0 0 0 5px rgba(239, 68, 68, .16); }
.w-go { color: var(--blue); font-weight: 600; font-size: 13px; white-space: nowrap; }
.shortcuts { display: flex; gap: 6px; padding: 8px; }
.shortcuts button { flex: 1; border: 0; background: none; border-radius: 12px; padding: 8px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.shortcuts button svg { width: 20px; height: 20px; color: var(--blue); }
.shortcuts button:hover { background: var(--select); color: var(--navy); }
.welcome-tip { margin: 0; color: var(--ink-2); font-size: 13.5px; text-align: center; }
.welcome-tip b { color: #B45309; }
@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } .welcome-row { grid-template-columns: 1fr; } }

/* ==========================================================================
   Toques de cor no layout
   ========================================================================== */
.rail { background: linear-gradient(180deg, #0E2A47 0%, #0C2440 100%); }
.rail-btn.active { background: var(--cyan); color: var(--navy); font-weight: 700; box-shadow: 0 6px 16px rgba(64, 187, 251, .28); }
.rail-btn.active::before { display: none; }
.rail-btn.active .rail-badge { background: var(--navy); color: #fff; }
.list-head h1 { font-size: 22px; }
.tabs button[data-tab="waiting"].active { color: #B45309; }
.tabs button[data-tab="mine"].active { color: var(--blue); }
.tabs button[data-tab="open"].active { color: #15803D; }
.tabs button[data-tab="bot"].active { color: #6A4FD8; }
.conv { margin: 2px 8px; padding: 11px 10px 11px 12px; border-radius: 12px; }
.conv + .conv::before { left: 66px; right: 10px; top: -2px; }
.conv.active { background: var(--select); box-shadow: inset 0 0 0 1px #bfe3fb; }
.conv.active::after { left: -8px; }
.conv.has-unread { background: #F5FBFF; }
.conv.has-unread.active { background: var(--select); }
.login-waves { stroke: none; }
@media (max-width: 600px) { .login-sub { font-size: 14.5px; margin-bottom: 24px; } .login-logo { max-width: 210px; } .login-waves { height: 120px; } }

/* Entrada e conversas: visual limpo */
.login { background: #fff; padding-bottom: 32px; }
.login-logo { max-width: 300px; max-height: 76px; }
.chat-pane.bg-liso, .bg-sw.bg-liso { background-color: #F3F6FA; background-image: none; }
.rail-logo { background: #fff; padding: 6px; }
.rail-logo img { background: transparent; }

/* ==========================================================================
   Páginas: cabeçalho com ícone, cartões e listas mais caprichados
   ========================================================================== */
.page { background: #F3F6FA; }
.page-inner { max-width: 1180px; padding: 28px 28px 64px; }
.page-inner.narrow { max-width: 640px; }
.page-head { position: relative; align-items: center; justify-content: flex-start; gap: 16px; background: #fff; border: 1px solid #E5EBF2; border-radius: 18px;
  padding: 18px 22px; margin-bottom: 18px; box-shadow: 0 1px 2px rgba(14, 42, 71, .04); overflow: hidden; }
.page-head::after { content: ''; position: absolute; right: -60px; top: -80px; width: 260px; height: 220px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(64, 187, 251, .14), rgba(64, 187, 251, 0)); pointer-events: none; }
.page-head > div:not(.page-actions) { flex: 1; min-width: 0; }
.page-head .page-actions { position: relative; z-index: 1; }
.ph-ico { width: 50px; height: 50px; border-radius: 14px; background: linear-gradient(135deg, #E4F5FE, #CDEBFD); color: var(--blue); display: grid; place-items: center; flex: none; }
.ph-ico svg { width: 25px; height: 25px; stroke-width: 1.9; }
.page-head h1 { font-size: 24px; margin: 0 0 2px; }
.page-head p { font-size: 13.5px; }
.card { border-radius: 16px; border: 1px solid #E5EBF2; box-shadow: 0 1px 2px rgba(14, 42, 71, .04); }
.form-grid[data-title]::before { content: attr(data-title); grid-column: 1 / -1; font-weight: 700; color: var(--navy); font-size: 15px; margin-bottom: -4px; }
.table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: #7A8CA0; background: #F8FAFC; padding-top: 10px; padding-bottom: 10px; }
.table td { padding-top: 13px; padding-bottom: 13px; }
.table tbody tr:hover td, .table tr:hover td { background: #F7FBFE; }
.who-cell { display: flex; align-items: center; gap: 11px; }
.role { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--line-soft); color: var(--ink-2); }
.role.admin { background: #E4F5FE; color: var(--blue-dark); }
.shortcut { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 13px; font-weight: 600; color: var(--blue-dark); background: #E9F6FE; border: 1px solid #CDEBFD; padding: 2px 9px; border-radius: 7px; white-space: nowrap; }

/* Etiquetas e setores lado a lado */
.split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: start; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 6px; }
.panel-head h2 { margin: 0; font-size: 16px; }
.panel-head .count { font-size: 12px; font-weight: 700; color: var(--blue-dark); background: #E4F5FE; border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: 2px; }
.panel-head .count:empty { display: none; }
.inline-add { display: flex; gap: 8px; padding: 10px 18px 14px; border-bottom: 1px solid var(--line-soft); align-items: center; }
.inline-add input:not(.swatch-in) { flex: 1; }
.row-list { list-style: none; margin: 0; padding: 6px 8px 10px; }
.row-list li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; min-height: 46px; }
.row-list li:hover { background: #F7FBFE; }
.row-list .icon-btn { width: 32px; height: 32px; opacity: .55; }
.row-list li:hover .icon-btn { opacity: 1; }
.row-list .icon-btn svg { width: 17px; height: 17px; }
.row-list .icon-btn.del:hover { background: var(--danger-soft); color: var(--danger); }
.row-list .tag { font-size: 13px; padding: 3px 11px 3px 9px; }
.row-fill { flex: 1; }
.row-name { flex: 1; color: var(--ink); }
.row-ico { width: 32px; height: 32px; border-radius: 9px; background: #EEF3F8; color: var(--blue); display: grid; place-items: center; flex: none; }
.row-ico svg { width: 17px; height: 17px; }
.row-empty { color: var(--muted); justify-content: center; text-align: center; padding: 26px 10px !important; }
.swatch-in { width: 30px !important; height: 30px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: none !important; cursor: pointer; flex: none; overflow: hidden; box-shadow: none !important; }
.swatch-in::-webkit-color-swatch-wrapper { padding: 0; }
.swatch-in::-webkit-color-swatch { border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #d5dee8; }
.swatch-in::-moz-color-swatch { border: 3px solid #fff; border-radius: 50%; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .page-inner { padding: 16px 12px 48px; } .page-head { padding: 14px; } .ph-ico { width: 40px; height: 40px; } }

/* Robôs: cartões */
#botList .card { padding: 18px 20px; }
.dropzone { border: 1.5px dashed #b9cbe0 !important; background: #fff; }
.dropzone:hover { border-color: var(--blue) !important; background: #F5FBFF; }
.lib-empty { border-radius: 16px; }

/* ==========================================================================
   Configurações (estilo Umbler): menu lateral + páginas limpas
   ========================================================================== */
.cfg-nav { width: 258px; flex: none; background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.cfg-search { position: relative; margin: 16px 14px 6px; }
.cfg-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.cfg-search input { border-radius: 999px; padding: 9px 14px 9px 36px; border: 1.5px solid #dbe3ec; }
.cfg-scroll { overflow-y: auto; padding: 4px 10px 20px; }
.cfg-group { padding-top: 12px; }
.cfg-group > small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #7a8ca0; padding: 0 12px 6px; }
.cfg-item { display: flex; align-items: center; gap: 11px; width: 100%; border: 0; background: none; text-align: left; padding: 9px 12px; border-radius: 10px; cursor: pointer; color: var(--ink-2); font-weight: 500; font-size: 14px; }
.cfg-item svg { width: 18px; height: 18px; color: #6b7f95; }
.cfg-item:hover { background: var(--hover); color: var(--navy); }
.cfg-item.active { background: #E4F5FE; color: var(--navy); font-weight: 600; }
.cfg-item.active svg { color: var(--blue); }
.cfg-item.filtered, .cfg-group.filtered { display: none; }

/* Cabeçalho das páginas: título grande e subtítulo, sem caixa */
.page { background: #F2F6FB; }
.page-head { background: none; border: 0; box-shadow: none; padding: 8px 2px 4px; margin-bottom: 20px; align-items: flex-end; justify-content: space-between; }
.page-head::after { display: none; }
.page-head h1 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 4px; }
.page-head p { font-size: 14px; max-width: 80ch; }
.ph-ico { display: none; }
.page-inner.wide { max-width: 1240px; }

/* Cartões e tabelas */
.card { border-radius: 20px; border-color: #e6edf5; box-shadow: 0 1px 3px rgba(14, 42, 71, .04); }
.tbl-card { padding: 0; overflow: hidden; }
.tbl-tools { display: flex; align-items: center; gap: 16px; padding: 20px 22px 14px; flex-wrap: wrap; }
.tbl-tools .grow { flex: 1; }
.search-pill { position: relative; width: 260px; max-width: 100%; }
.search-pill svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.search-pill input { border-radius: 999px; padding: 9px 14px 9px 36px; border: 1.5px solid #dbe3ec; }
.chk { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.chk input { width: 17px; height: 17px; accent-color: var(--blue); margin: 0; }
.btn.pill { border-radius: 999px; padding: 9px 18px; }
.btn.pill.lg { padding: 12px 22px; }
.tbl-card .table th { background: #fff; text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--ink); font-weight: 600; border-bottom: 1px solid #e6edf5; padding: 12px 22px; }
.tbl-card .table td { padding: 14px 22px; border-bottom: 1px solid #eef2f7; }
.tbl-card .table tr:last-child td { border-bottom: 0; }
.table th.r { text-align: right; }
.table td.clip { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.table td.nowrap { white-space: nowrap; }
.empty-cell { text-align: center; color: var(--muted); padding: 40px 20px !important; }
.icon-btn.act { width: 34px; height: 34px; color: #5f7389; }
.icon-btn.act svg { width: 18px; height: 18px; }
.icon-btn.act:hover { background: #E4F5FE; color: var(--blue); }
.icon-btn.act.del:hover { background: var(--danger-soft); color: var(--danger); }
.def-label { color: #9aa9b9; font-size: 13px; margin-right: 8px; }
.table .btn.link { display: inline-flex; margin-right: 8px; vertical-align: middle; }
.who-txt { display: flex; flex-direction: column; line-height: 1.3; }
.who-txt small { color: var(--muted); font-size: 12.5px; }
.you { font-size: 11px; font-weight: 600; color: #7C5CE0; border: 1px solid #c9bdf3; background: #f4f1fe; border-radius: 999px; padding: 0 8px; margin-left: 6px; vertical-align: 1px; }
.off-row td { opacity: .55; }
.avatar .dot { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: #b8c3cf; border: 2px solid #fff; z-index: 1; }
.avatar .dot.on { background: #22c55e; }
.avatar img + .dot, .avatar .dot { pointer-events: none; }
.pill-select { width: auto; min-width: 190px; border-radius: 999px; border: 1.5px solid #dbe3ec; font-weight: 600; padding: 8px 34px 8px 14px; }
.pill-select:disabled { opacity: .7; cursor: default; }
.pill.warn { background: var(--wait-soft); color: var(--wait); }
.type-chip { font-size: 12px; font-weight: 600; background: #eef3f8; color: var(--ink-2); padding: 2px 10px; border-radius: 999px; }
.chan-ico { width: 34px; height: 34px; border-radius: 50%; background: #dcf8e7; color: #16a34a; display: grid; place-items: center; }
.chan-ico svg { width: 19px; height: 19px; }
.qr-card { display: flex; gap: 28px; align-items: center; padding: 26px 30px; margin-top: 18px; }
.qr-card img { width: 250px; border: 1px solid var(--line); border-radius: 14px; padding: 8px; background: #fff; flex: none; }
.qr-card h2 { margin: 0 0 6px; font-size: 19px; }
.qr-card ol { padding-left: 18px; line-height: 1.9; color: var(--ink-2); margin: 8px 0; }
.qr-card .spinner { flex: none; }

/* Formulários das configurações */
.cfg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.cfg-card { padding: 26px 28px; }
.cfg-card h2 { margin: 0 0 14px; font-size: 19px; }
.cfg-card > .muted { margin: -8px 0 14px; font-size: 13.5px; }
.cfg-card label { font-size: 13.5px; }
.cfg-card input:not([type=checkbox]):not([type=radio]):not([type=color]), .cfg-card select, .cfg-card textarea { border-radius: 12px; border: 1.5px solid #dbe3ec; padding: 10px 14px; }
.wide-card { max-width: none; }
.wide-card .set-block h3 { font-size: 15px; color: var(--navy); }
.req { color: var(--danger); }
.cfg-card .hint { font-weight: 400; }
.info-box { display: flex; gap: 10px; align-items: flex-start; background: #E9F5FE; color: #1b4f7a; border-radius: 12px; padding: 11px 14px; font-size: 13px; line-height: 1.45; }
.info-box svg { width: 17px; height: 17px; color: var(--blue); margin-top: 1px; }
.dim { opacity: .5; }
.set-actions { display: flex; justify-content: flex-end; }
.save-bar { display: flex; justify-content: flex-end; margin-top: 18px; }
.inline-num { flex-direction: row; align-items: center; gap: 10px; font-weight: 500; }
.inline-num input { width: 90px !important; text-align: center; }
.set-switch .sw-title { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.set-switch .sw-title svg { width: 18px; height: 18px; color: var(--blue); }
.switch input:checked + span { background: var(--blue); }

/* Perfil */
.prof-top { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; }
.prof-photo { position: relative; }
.prof-photo .avatar.xl { width: 104px; height: 104px; font-size: 34px; }
.prof-cam { position: absolute; right: -2px; bottom: -2px; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1.5px solid #dbe3ec; display: grid; place-items: center; cursor: pointer; color: var(--ink-2); box-shadow: var(--shadow-1); }
.prof-cam:hover { color: var(--blue); border-color: var(--blue); }
.prof-cam svg { width: 18px; height: 18px; }
.prof-id { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.prof-id b { font-size: 18px; color: var(--navy); }
.prof-id span:not(.role) { color: var(--muted); font-size: 13.5px; }

/* Preferências */
.opt-list { display: flex; flex-direction: column; gap: 10px; }
.opt-list button { display: flex; gap: 14px; align-items: center; text-align: left; border: 1.5px solid #dbe3ec; background: #fff; border-radius: 14px; padding: 13px 16px; cursor: pointer; }
.opt-list button svg { width: 20px; height: 20px; color: var(--muted); }
.opt-list button b { display: block; color: var(--ink); font-size: 14px; }
.opt-list button small { color: var(--muted); font-size: 12.5px; }
.opt-list button.on { border-color: var(--blue); background: #F5FBFF; box-shadow: 0 0 0 1px var(--blue); }
.opt-list button.on svg { color: var(--blue); }
.tiles button.on { box-shadow: 0 0 0 1px var(--blue); }
.sign-tiles button { padding: 16px 12px 12px; gap: 10px; }
.wa-prev { display: block; background: #DCF8C6; border-radius: 10px 2px 10px 10px; padding: 7px 10px 5px; text-align: left; font-weight: 400; font-size: 13px; color: var(--ink); box-shadow: 0 1px 1px rgba(0, 0, 0, .08); min-width: 140px; }
.wa-prev b { font-weight: 700; }
.wa-prev time { display: block; text-align: right; font-size: 10px; color: #6b8a77; margin-top: 2px; }
.wa-prev.big { font-size: 14px; padding: 12px 14px; margin: 6px 0 4px; line-height: 1.5; }

/* Horários */
.week { display: flex; flex-direction: column; }
.day-row { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid #eef2f7; }
.day-row:last-child { border-bottom: 0; }
.day-row b { width: 120px; color: var(--ink); font-weight: 600; }
.day-times { display: flex; align-items: center; gap: 8px; }
.day-times input { width: 112px !important; padding: 7px 10px !important; }
.day-times i { font-style: normal; color: var(--muted); font-size: 13px; }
.day-closed { display: none; color: var(--muted); font-size: 13.5px; }
.day-row.closed .day-times { display: none; }
.day-row.closed .day-closed { display: inline; }
.day-row.closed b { color: var(--muted); }

/* Cores das etiquetas */
.color-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.color-row > span { width: 100%; }
.c-dot { position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--c); cursor: pointer; flex-direction: row; }
.c-dot input[type=radio] { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.c-dot:has(input:checked) { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c); }
.c-dot.custom { background: conic-gradient(#f43f5e, #f59e0b, #22c55e, #06b6d4, #6366f1, #d946ef, #f43f5e); overflow: hidden; }
.c-dot.custom input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; padding: 0; border: 0; }

@media (max-width: 1100px) { .cfg-cols { grid-template-columns: 1fr; } .cfg-nav { width: 220px; } }
@media (max-width: 760px) {
  .cfg-nav { width: 100%; border-right: 0; border-bottom: 1px solid var(--line); flex: none; }
  .cfg-search { display: none; }
  .cfg-scroll { display: flex; overflow-x: auto; padding: 8px 10px; gap: 4px; }
  .cfg-group { display: contents; }
  .cfg-group > small { display: none; }
  .cfg-item { width: auto; white-space: nowrap; flex: none; padding: 7px 12px; font-size: 13px; }
  .cfg-item svg { display: none; }
  .cfg-nav { order: 2; }
  .page-head h1 { font-size: 24px; }
  .tbl-tools { padding: 14px; }
  .search-pill { width: 100%; }
  .tbl-card { overflow-x: auto; }
  .qr-card { flex-direction: column; text-align: center; }
  .day-row { flex-wrap: wrap; }
}
.qr-card .spinner { margin: 0; }

/* Aviso de WhatsApp desconectado */
.app { position: relative; }
.wa-down { position: fixed; top: 0; left: 78px; right: 0; z-index: 30; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 16px;
  background: #D93636; color: #fff; font-weight: 600; font-size: 14px; box-shadow: 0 4px 14px rgba(217, 54, 54, .3); }
.wa-down svg { width: 19px; height: 19px; }
.wa-down .btn { background: #fff; color: #B42323; border-color: #fff; border-radius: 999px; }
.wa-down.soft { background: #E08A0B; box-shadow: 0 4px 14px rgba(224, 138, 11, .3); }
.wa-down.soft .btn { color: #9a5b00; }
.app.has-wa-down > .view, .app.has-wa-down > .cfg-nav { padding-top: 42px; }
.app.has-wa-down > .view.inbox { padding-top: 0; margin-top: 42px; height: calc(100vh - 42px); }
.wa-lock { display: flex; align-items: center; gap: 8px; margin: 0 16px -4px; padding: 8px 12px; border-radius: 10px 10px 0 0; background: #FDE7E7; color: #9b1c1c; font-size: 13px; font-weight: 600; }
.wa-lock svg { width: 16px; height: 16px; }
.composer.locked textarea { background: #f6f7f9; }
.composer.locked .send-btn { background: #c7ced8; cursor: not-allowed; box-shadow: none; }

/* Canais */
.api-strip { display: flex; align-items: center; gap: 12px; background: #EAFBF0; border: 1px solid #c9f0d6; border-radius: 16px; padding: 12px 18px; margin-bottom: 16px; font-size: 13.5px; color: #1f5135; }
.api-strip b { color: #146c38; }
.api-strip .btn.link { margin-left: auto; white-space: nowrap; color: #146c38; }
.chan-ico.api { background: #16a34a; color: #fff; }
.chan-ico.big { width: 56px; height: 56px; }
.chan-ico.big svg { width: 30px; height: 30px; }
.chan-hint { margin-top: 14px; }
.modal-box.wide { width: min(860px, 94vw); max-width: none; }
.chan-choices { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-top: 6px; }
.chan-choice { border: 1.5px solid #dbe3ec; border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.chan-choice.main { border-color: #b7e8c8; background: #FAFFFB; }
.cc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cc-head b { font-size: 17px; color: var(--navy); }
.cc-head em { font-style: normal; color: #16a34a; }
.chan-choice p { margin: 0; color: var(--ink-2); font-size: 13.5px; }
.chan-choice ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 13.5px; line-height: 1.8; flex: 1; }
.api-modal { text-align: left; }
.api-modal h3 { margin: 12px 0 4px; }
.check-list { padding-left: 20px; line-height: 1.7; color: var(--ink-2); font-size: 14px; }
@media (max-width: 760px) { .wa-down { left: 0; font-size: 12.5px; flex-wrap: wrap; } .chan-choices { grid-template-columns: 1fr; } }

/* Contato compartilhado */
.vcard { min-width: 250px; max-width: 320px; background: rgba(255, 255, 255, .7); border-radius: 10px; overflow: hidden; margin: 2px 0 4px; border: 1px solid rgba(14, 42, 71, .08); }
.vc-top { display: flex; gap: 11px; align-items: center; padding: 10px 12px; }
.vc-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.vc-txt b { color: var(--navy); font-size: 14.5px; }
.vc-txt span { color: var(--ink-2); font-size: 13px; }
.vc-actions { display: flex; border-top: 1px solid rgba(14, 42, 71, .1); }
.vc-actions button { flex: 1; border: 0; background: none; padding: 9px 6px; color: var(--blue); font-weight: 600; font-size: 13px; cursor: pointer; }
.vc-actions button + button { border-left: 1px solid rgba(14, 42, 71, .1); }
.vc-actions button:hover { background: rgba(64, 187, 251, .1); }
.vcard + .vcard { margin-top: 6px; }

/* Ações da mensagem ao passar o mouse */
.bubble { position: relative; }
.msg-acts { position: absolute; top: 50%; transform: translateY(-50%); display: none; gap: 2px; background: #fff; border-radius: 999px; padding: 3px 5px;
  box-shadow: 0 2px 10px rgba(14, 42, 71, .16); border: 1px solid #e6edf5; z-index: 3; white-space: nowrap; }
.bubble.in .msg-acts { left: calc(100% + 8px); }
.bubble.out .msg-acts { right: calc(100% + 8px); }
.bubble:hover .msg-acts, .msg-acts:hover { display: flex; }
.bubble::after { content: ''; position: absolute; top: 0; bottom: 0; width: 14px; }
.bubble.in::after { left: 100%; }
.bubble.out::after { right: 100%; }
.msg-acts button { width: 32px; height: 32px; border: 0; background: none; border-radius: 50%; display: grid; place-items: center; color: #4c5f75; cursor: pointer; }
.msg-acts button:hover { background: #E4F5FE; color: var(--blue); }
.msg-acts svg { width: 18px; height: 18px; }
.foot .ts { cursor: default; }
.reacts { position: absolute; bottom: -13px; background: #fff; border-radius: 999px; padding: 1px 6px; font-size: 14px; line-height: 20px; box-shadow: 0 1px 4px rgba(14, 42, 71, .18); border: 1px solid #e6edf5; cursor: default; }
.bubble.in .reacts { left: 10px; }
.bubble.out .reacts { right: 10px; }
.bubble.has-react { margin-bottom: 16px; }
.fwd { display: flex; align-items: center; gap: 4px; font-size: 11.5px; font-style: italic; color: var(--muted); margin-bottom: 2px; }
.fwd svg { width: 13px; height: 13px; }
.quote { display: flex; flex-direction: column; gap: 1px; background: rgba(14, 42, 71, .05); border-left: 4px solid var(--cyan); border-radius: 7px; padding: 5px 9px; margin: 2px 0 5px; cursor: pointer; min-width: 160px; }
.quote.q-in { border-left-color: #7C5CE0; }
.quote b { font-size: 12px; color: var(--blue-dark); }
.quote.q-in b { color: #6a4fd8; }
.quote span { font-size: 12.5px; color: var(--ink-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: pre-wrap; }
.bubble.flash { animation: flash 1.4s ease; }
@keyframes flash { 0%, 60% { box-shadow: 0 0 0 4px rgba(64, 187, 251, .55); } 100% { box-shadow: none; } }
.reply-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; background: #fff; border: 1px solid #dbe3ec; border-radius: 12px; padding: 6px 6px 6px 8px; }
.reply-bar .quote { flex: 1; margin: 0; cursor: default; }
.react-bar { position: fixed; z-index: 60; display: flex; gap: 2px; background: #fff; border-radius: 999px; padding: 5px 7px; box-shadow: 0 8px 26px rgba(14, 42, 71, .2); border: 1px solid #e6edf5; }
.react-bar button { width: 38px; height: 38px; border: 0; background: none; border-radius: 50%; font-size: 22px; cursor: pointer; transition: transform .1s; }
.react-bar button:hover { transform: scale(1.2); background: #f2f6fb; }
.react-bar .more { font-size: 20px; color: var(--muted); background: #f2f6fb; }
.fw-list { max-height: 330px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 4px -6px; }
.fw-item { flex-direction: row; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; cursor: pointer; font-weight: 400; }
.fw-item:hover { background: var(--hover); }
.fw-item input { width: 18px; height: 18px; accent-color: var(--blue); margin: 0; }
.fw-item span { display: flex; flex-direction: column; line-height: 1.3; }
.fw-item b { color: var(--ink); font-size: 14px; }
.fw-item small { color: var(--muted); font-size: 12px; }
.fwd-prev { cursor: default; }

/* Seletor de emoji */
.emoji-picker { position: fixed; z-index: 70; width: 370px; max-width: calc(100vw - 16px); height: 420px; background: #fff; border-radius: 16px; box-shadow: 0 14px 40px rgba(14, 42, 71, .24); border: 1px solid #e6edf5; display: flex; flex-direction: column; padding: 12px 12px 0; }
.ep-head { display: flex; justify-content: space-between; align-items: center; padding: 0 2px 8px; }
.ep-head b { font-size: 15px; color: var(--navy); }
.ep-search { position: relative; }
.ep-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); }
.ep-search input { border-radius: 12px; border: 1.5px solid #c9d8ea; padding: 9px 12px 9px 36px; }
.ep-search input:focus { border-color: var(--blue); }
.ep-tabs { display: flex; margin: 10px 0 4px; border: 1px solid #dbe3ec; border-radius: 10px; overflow: hidden; }
.ep-tabs button { flex: 1; border: 0; background: #fff; padding: 7px 0; cursor: pointer; color: #5f7389; display: grid; place-items: center; }
.ep-tabs button + button { border-left: 1px solid #dbe3ec; }
.ep-tabs button:hover { background: #E4F5FE; color: var(--blue); }
.ep-tabs svg { width: 17px; height: 17px; }
.ep-body { flex: 1; overflow-y: auto; padding-bottom: 10px; }
.ep-cat { font-weight: 700; font-size: 13px; color: var(--ink); margin: 10px 2px 4px; }
.ep-grid { display: grid; grid-template-columns: repeat(8, 1fr); }
.ep-grid button { border: 0; background: none; font-size: 23px; height: 40px; border-radius: 8px; cursor: pointer; }
.ep-grid button:hover { background: #f2f6fb; }
.ep-none { text-align: center; margin-top: 30px; }

/* Assinatura na caixa de mensagem */
.composer-bar { position: relative; }
.sign-ctl { display: flex; align-items: center; gap: 7px; margin-left: 10px; position: relative; flex: none; }
.switch.sm span { width: 34px; height: 20px; }
.switch.sm span::after { width: 14px; height: 14px; }
.switch.sm input:checked + span::after { left: 17px; }
.sign-lbl { font-size: 12.5px; color: var(--ink-2); font-weight: 600; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sign-ctl.off .sign-lbl { color: var(--muted); font-weight: 500; }
.sign-ctl .cbtn { width: 30px; height: 30px; }
.sign-pop { position: absolute; right: -8px; bottom: calc(100% + 14px); width: 290px; background: #fff; border-radius: 16px; padding: 16px; box-shadow: 0 12px 34px rgba(14, 42, 71, .22); border: 1px solid #e6edf5; display: flex; flex-direction: column; gap: 8px; z-index: 40; }
.sign-pop b { color: var(--navy); font-size: 14px; }
.sign-pop input { border-radius: 12px; border: 1.5px solid #c9d8ea; padding: 9px 12px; }
.sign-meta { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); }
.sign-btns { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 4px; }
.sign-btns .btn.link { color: var(--ink-2); font-weight: 500; align-self: center; }
@media (max-width: 760px) { .sign-lbl { display: none; } .cbar-hint { display: none; } }
.txt .sig { color: var(--navy); }
.who.quiet { color: var(--muted); font-weight: 500; font-size: 11px; }
.wa-down.outdated { background: #7C3AED; }

/* Painel de transferir */
.tr-drawer { width: 480px; }
.tr-drawer header { border-bottom: 0; padding: 22px 22px 6px; }
.tr-drawer header h3 { font-size: 21px; }
.tr-tabs { display: flex; gap: 26px; padding: 8px 26px 0; border-bottom: 1px solid #e6edf5; }
.tr-tabs button { display: flex; align-items: center; gap: 7px; border: 0; background: none; padding: 12px 2px; font-size: 15px; font-weight: 600; color: var(--ink-2); cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
.tr-tabs button svg { width: 18px; height: 18px; }
.tr-tabs button.on { color: var(--blue); border-bottom-color: var(--blue); }
.tr-search { position: relative; margin: 18px 22px 8px; }
.tr-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted); }
.tr-search input { border-radius: 999px; border: 1.5px solid #c9d8ea; padding: 11px 16px 11px 40px; font-size: 14.5px; }
.tr-list { flex: 1; overflow-y: auto; padding: 4px 0; }
.tr-item { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 22px; border: 0; background: none; text-align: left; cursor: pointer; border-bottom: 1px solid #eef2f7; }
.tr-item:hover { background: #F5FAFE; }
.tr-item.on { background: #E9F5FE; }
.tr-ico { position: relative; width: 46px; height: 46px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; flex: none; }
.tr-ico svg { width: 22px; height: 22px; }
.tr-ico .dot { position: absolute; right: 2px; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; }
.tr-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.tr-txt b { color: var(--ink); font-size: 14.5px; }
.tr-txt small { color: var(--muted); font-size: 12.5px; }
.tr-online { font-size: 12.5px; color: #16a34a; font-weight: 600; white-space: nowrap; }
.tr-online.off { color: var(--muted); font-weight: 500; }
.tr-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #9fb1c4; flex: none; position: relative; }
.tr-radio.on { border-color: var(--blue); }
.tr-radio.on::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--blue); }
.tr-empty { padding: 24px; text-align: center; }
.tr-foot { display: flex; flex-direction: column; gap: 12px; padding: 18px 22px 22px; border-top: 0; }
.tr-foot textarea { border-radius: 14px; border: 1.5px solid #c9d8ea; padding: 12px 14px; resize: vertical; }
.tr-foot .btn:disabled { background: #e9eef4; border-color: #e9eef4; color: #9fb1c4; }

/* Filtros da lista de conversas */
.search-row { display: flex; gap: 8px; align-items: center; margin: 0 16px; }
.search-row .search-box { margin: 0; flex: 1; }
.flt-btn { position: relative; width: 42px; height: 40px; border-radius: 10px; border: 0; background: var(--canvas); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; flex: none; }
.flt-btn svg { width: 19px; height: 19px; }
.flt-btn:hover { color: var(--blue); }
.flt-btn.on { color: var(--blue); background: #E4F5FE; }
.flt-btn b { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; border-radius: 10px; background: var(--blue); color: #fff; font-size: 11px; line-height: 19px; text-align: center; padding: 0 5px; }
.flt-btn b:empty { display: none; }
.flt-summary { display: flex; align-items: center; gap: 6px; margin: 10px 16px 6px; background: #F2F7FC; border: 1px solid #e3ecf5; border-radius: 12px; padding: 7px 6px 7px 12px; font-size: 12.5px; color: var(--ink-2); }
.flt-summary > svg { width: 15px; height: 15px; color: var(--blue); flex: none; }
.flt-summary > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flt-summary b { color: var(--navy); }
.flt-summary .btn.link { align-self: center; }
.flt-summary .icon-btn { width: 28px; height: 28px; }
.flt-summary .icon-btn svg { width: 15px; height: 15px; }
.inbox { position: relative; }
.flt-panel { position: absolute; left: 0; top: 0; bottom: 0; width: 392px; background: #fff; z-index: 8; display: flex; flex-direction: column; border-right: 1px solid var(--line); box-shadow: 10px 0 30px rgba(14, 42, 71, .12); animation: fltIn .18s ease-out; }
@keyframes fltIn { from { transform: translateX(-20px); opacity: 0; } to { transform: none; opacity: 1; } }
.flt-panel header { display: flex; justify-content: space-between; align-items: center; padding: 18px 16px 6px 20px; }
.flt-panel header h2 { margin: 0; font-size: 20px; }
.flt-top { display: flex; justify-content: space-between; align-items: center; padding: 4px 20px 12px; border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size: 13px; }
.flt-body { flex: 1; overflow-y: auto; }
.f-sec { padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.f-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.f-h > span { flex: 1; display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); font-size: 14px; }
.f-h svg { width: 17px; height: 17px; color: var(--ink-2); }
.f-h small { color: var(--muted); font-size: 12.5px; }
.f-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.f-chip { --c: #64748B; display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid #d5dee8; background: #fff; border-radius: 999px; padding: 4px 12px; font-size: 13px; color: var(--ink-2); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-chip[style] { border-color: color-mix(in srgb, var(--c) 45%, white); background: color-mix(in srgb, var(--c) 10%, white); color: color-mix(in srgb, var(--c) 75%, black); }
.f-chip:hover { border-color: var(--blue); }
.f-chip.on { border-color: var(--blue); background: #E4F5FE; color: var(--blue-dark); font-weight: 600; box-shadow: 0 0 0 1px var(--blue); }
.f-chip[style].on { border-color: var(--c); box-shadow: 0 0 0 2px var(--c); background: color-mix(in srgb, var(--c) 18%, white); }
.f-chip.fixed { cursor: default; }
.f-chip svg { width: 14px; height: 14px; color: #16a34a; }
.f-sec .btn.link { margin-top: 8px; }
.f-people { display: flex; flex-wrap: wrap; gap: 10px; }
.f-person { border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 58px; }
.f-person .avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 3px transparent; transition: box-shadow .12s; }
.f-person.on .avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--blue); }
.f-person small { font-size: 11px; color: var(--ink-2); max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-person.on small { color: var(--blue-dark); font-weight: 600; }
.f-person.none .avatar { background: #fff; border: 1.5px dashed #9fb1c4; color: #7a8ca0; }
.f-person.none .avatar svg { width: 18px; height: 18px; }
.f-range { display: flex; gap: 10px; margin-top: 10px; }
.f-range label { flex: 1; font-size: 12.5px; }
.flt-panel footer { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-top: 1px solid var(--line-soft); }
@media (max-width: 760px) { .flt-panel { width: 100%; } }

/* Tabela de chatbots */
.bot-table th.c, .bot-table td.c { text-align: center; }
.bot-ico { width: 38px; height: 38px; border-radius: 11px; background: #eef3f8; color: #6b7f95; display: grid; place-items: center; flex: none; }
.bot-ico svg { width: 20px; height: 20px; }
.bot-ico.on { background: #E4F5FE; color: var(--blue); }
.bot-name { color: var(--ink); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.bot-name:hover { color: var(--blue); text-decoration: underline; }
.warn-txt { color: #B45309; font-weight: 600; cursor: pointer; }
.type-chip.start { background: #DCF5E5; color: #15803D; }
.type-chip.manual { background: #EDE9FE; color: #6A4FD8; }
a.icon-btn.act { display: inline-grid; }
.pill-select.sm { min-width: 0; padding: 8px 34px 8px 14px; font-weight: 500; }
#botDrop { position: relative; }
.drop-hint { display: none; position: absolute; inset: 0; background: rgba(228, 245, 254, .92); border: 2px dashed var(--blue); border-radius: 20px; color: var(--blue-dark); font-weight: 700; font-size: 16px; place-items: center; z-index: 2; }
#botDrop.over .drop-hint { display: grid; }
.map-list { display: flex; flex-direction: column; gap: 8px; }
.map-row { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.map-row > span { flex: 1; font-weight: 500; color: var(--ink); }
.map-row select { width: 220px; }
.report { position: relative; }

/* Respostas rápidas com anexo */
.modal-box.wide-md { width: min(640px, 94vw); max-width: none; }
.qe-box { border: 1.5px solid #c9d8ea; border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: #fff; }
.qe-box:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(64, 187, 251, .2); }
.qe-box textarea { border: 0; box-shadow: none !important; padding: 4px; resize: vertical; min-height: 110px; }
.qe-att { position: relative; align-self: flex-start; }
.qe-x { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #dbe3ec; background: #fff; color: var(--ink-2); cursor: pointer; font-size: 15px; line-height: 1; box-shadow: var(--shadow-1); }
.qe-x:hover { background: var(--danger-soft); color: var(--danger); }
.qatt { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 92px; }
.qatt img { width: 92px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid #e3e9ef; }
.qatt-ico { width: 72px; height: 72px; border-radius: 12px; background: #7C3AED; color: #fff; display: grid; place-items: center; align-content: center; gap: 2px; }
.qatt-ico svg { width: 26px; height: 26px; }
.qatt-ico small { font-size: 11px; font-weight: 700; }
.qatt-name { font-size: 11px; color: var(--ink-2); max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qe-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qe-tools .grow { flex: 1; }
.btn.pill.sm { padding: 6px 13px; }
.att-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--blue-dark); background: #E9F6FE; border-radius: 999px; padding: 2px 10px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-chip svg { width: 14px; height: 14px; flex: none; }
.qview-att { display: block; margin: 6px 0; }
.qview-att img { max-width: 100%; max-height: 320px; border-radius: 12px; }
.qr-clip { font-size: 12px; }
#qeAtt .qe-att { display: inline-block; }

/* ---------- Menu da minha conta (foto no canto) ---------- */
.me-menu { position: fixed !important; width: 300px; padding: 0 0 6px; border-radius: 16px; box-shadow: 0 12px 40px rgba(14, 42, 71, .22); z-index: 200; overflow: hidden; }
.me-menu .me-card { flex-direction: column; text-align: center; gap: 4px; padding: 22px 16px 16px; margin: 0 0 6px; border-bottom: 1px solid var(--line-soft); }
.me-menu .me-card strong { font-size: 16px; margin-top: 6px; }
.me-menu .avatar.xl { width: 64px; height: 64px; font-size: 22px; }
.me-menu .menu-item { padding: 10px 18px; border-radius: 0; font-size: 14px; }
.me-org { border-top: 1px solid var(--line-soft); margin-top: 6px; padding: 12px 14px 10px; }
.me-org small { display: block; color: var(--muted); font-size: 12px; margin: 0 4px 8px; }
.me-org div { display: flex; align-items: center; gap: 10px; background: #eef3ff; border-radius: 12px; padding: 8px 12px; font-weight: 600; color: var(--ink); }
.me-org img { width: 26px; height: 26px; border-radius: 50%; background: #fff; object-fit: contain; padding: 3px; }
.me-menu .menu-item.logout { justify-content: center; color: #d93636; border-top: 1px solid var(--line-soft); margin-top: 6px; padding-top: 14px; }
.me-menu .menu-item.logout:hover { background: #fff1f1; }

/* ---------- Etiquetas no topo da conversa (como na Umbler) ---------- */
#chatSub { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; overflow: hidden; margin-top: 4px; min-width: 0; }
.h-tag { display: inline-flex; align-items: center; gap: 5px; max-width: 180px; flex: none; padding: 2px 9px 2px 3px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: color-mix(in srgb, var(--c) 16%, white); color: color-mix(in srgb, var(--c) 70%, black); border: 1px solid color-mix(in srgb, var(--c) 55%, white); }
.h-tag i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); display: grid; place-items: center; flex: none; }
.h-tag i svg { width: 11px; height: 11px; stroke: #fff; fill: none; stroke-width: 2.4; }
.h-tag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-more { flex: none; font-size: 11.5px; font-weight: 700; color: #b45309; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 999px; padding: 1px 8px; }
.h-sector { flex: none; font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px; background: #fff; }
.h-who, .h-phone { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; }
.h-phone { overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
@media (max-width: 760px) { .h-who, .h-phone { display: none; } .h-tag { max-width: 110px; } }
.media-wait { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: rgba(14, 42, 71, .05); border-radius: 10px; margin: 2px 0 4px; min-width: 200px; }
.media-wait span { font-weight: 600; flex: 1; }
.media-wait small { color: var(--muted); font-size: 11.5px; }
.media-wait .btn svg { width: 15px; height: 15px; }
/* Confirmação de entrega (como no WhatsApp) */
.bubble .foot .ack { display: inline-flex; align-items: center; gap: 3px; color: #8696a8; }
.bubble .foot .ack svg { width: 16px; height: 14px; color: inherit !important; stroke: currentColor; fill: none; stroke-width: 2; }
.bubble .foot .ack:not(:has(svg[viewBox="0 0 28 24"])) svg { width: 14px; }
.bubble .foot .ack.read { color: #34B7F1; font-weight: 600; font-size: 10.5px; }
.lnk-btn { border: 0; background: none; padding: 0; font: inherit; color: var(--blue); font-weight: 600; cursor: pointer; text-decoration: underline; }
.lnk-btn.danger { color: #c62828; }
.row-btns { display: flex; gap: 8px; margin-top: 12px; }
.danger-zone { margin-top: 18px; border: 1px solid #f3c2c2; }
.danger-zone h3 { color: var(--danger); margin: 0 0 6px; }
.danger-zone .btn.danger { margin-top: 10px; border: 1px solid #f3c2c2; }
/* Busca em todas as conversas */
.sr-head { padding: 8px 16px 4px; font-size: 12px; color: var(--muted); list-style: none; }
.sr-title { list-style: none; padding: 12px 16px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); display: flex; gap: 6px; align-items: center; }
.sr-title span { background: var(--line-soft); color: var(--muted); border-radius: 99px; padding: 0 7px; font-size: 11px; }
.sr-snip { font-size: 13px; color: var(--muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }
.sr-snip mark, .bubble mark { background: #fff1a8; color: inherit; border-radius: 3px; padding: 0 1px; }
.bubble.found, [data-mid].found { animation: foundFlash 2.6s ease; }
@keyframes foundFlash { 0%, 60% { box-shadow: 0 0 0 3px #f5c400, 0 0 0 7px rgba(245, 196, 0, .25); } 100% { box-shadow: none; } }
/* Caixa de mensagem mais alta (3x) — cresce até ~12 linhas enquanto digita */
.composer-card textarea { min-height: 100px; max-height: 280px; }
@media (max-width: 760px) { .composer-card textarea { min-height: 64px; max-height: 180px; } }

/* ---------- Preferências: foto e tema ---------- */
.pref-photo { display: flex; align-items: center; gap: 16px; }
.pref-photo .avatar.xl { width: 72px; height: 72px; font-size: 24px; }
.pref-photo-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pref-photo-btns small { flex-basis: 100%; font-size: 12px; }
.pref-photo-btns label.btn { cursor: pointer; }
.theme-tiles { grid-template-columns: repeat(3, 1fr); }
.th-prev { display: block; width: 100%; max-width: 110px; height: 56px; border-radius: 10px; border: 1px solid var(--line); position: relative; overflow: hidden; margin: 0 auto 8px; }
.th-prev i { position: absolute; left: 0; top: 0; bottom: 0; width: 18px; }
.th-prev b { position: absolute; left: 26px; right: 8px; top: 10px; height: 10px; border-radius: 5px; box-shadow: 0 16px 0 0 currentColor; }
.th-prev.light { background: #EEF3F8; color: #fff; } .th-prev.light i { background: #0E2A47; } .th-prev.light b { background: #fff; }
.th-prev.dark { background: #0E1A28; color: #15243A; } .th-prev.dark i { background: #0A1626; } .th-prev.dark b { background: #15243A; }
.th-prev.auto { background: linear-gradient(135deg, #EEF3F8 50%, #0E1A28 50%); color: #8FA3B9; } .th-prev.auto i { background: #0E2A47; } .th-prev.auto b { background: #8FA3B9; }
/* ---------- Cadeado da conversa ---------- */
.lock-btn svg { width: 15px; height: 15px; }
.lock-btn.on { background: #FEF3C7; border-color: #F5C451; color: #92400E; }
.lock-btn.on:hover { background: #FDE68A; }
.lock-btn:disabled { opacity: .85; cursor: default; }
.conv-lock { display: inline-flex; margin-left: 5px; color: #B45309; vertical-align: -2px; }
.conv-lock svg { width: 13px; height: 13px; }
.conv-lock-bar { background: #FEF3C7; color: #92400E; }
.composer.conv-locked textarea { background: #f6f7f9; }
.composer.conv-locked .send-btn { background: #c7ced8; cursor: not-allowed; box-shadow: none; }
html.dark .lock-btn.on { background: #3D2C12; border-color: #8D6F22; color: #F5C451; }
html.dark .conv-lock-bar { background: #3D2C12; color: #F5C451; }
html.dark .composer.conv-locked textarea { background: var(--panel-2); }