/* WhatsApp Team CRM — stylesheet.

   Everything here is driven by SEMANTIC tokens (--panel, --sel-bg, --info …)
   rather than raw colours. That is not tidiness for its own sake: the dark
   theme used to be a short list of patches over a light-coloured base, so any
   component whose colour was written literally kept its light value — which is
   how a near-white "selected chat" row ended up under near-white text, and how
   blue translation text landed on a dark-green bubble. A component that only
   ever names tokens cannot break that way: both themes are defined once, at the
   top, and every surface is declared together with the ink that sits on it. */

:root {
  color-scheme: light;

  /* --- surfaces & ink --- */
  --bg: #eef2f6;            /* app background            */
  --panel: #ffffff;         /* cards, bars, popovers     */
  --panel-2: #f6f8fb;       /* inset / raised-on-panel   */
  --line: #e3e8ee;          /* borders & separators      */
  --line-strong: #cbd5e1;
  --text: #0f172a;
  --muted: #64748b;
  --hover: #f2f6fa;         /* row / item hover          */
  --sel-bg: #e6f6ef;        /* selected row              */
  --sel-ink: #0f172a;       /* ink ON the selected row   */

  /* --- brand --- */
  --green: #16a34a;
  --green-dark: #128c7e;
  --wa: #25d366;
  --accent: #128c7e;
  --accent-ink: #ffffff;
  --accent-soft: rgba(18, 140, 126, .12);

  /* --- semantic states: every soft background ships with the ink for it --- */
  --danger: #ef4444;
  --danger-soft: #fee2e2;
  --danger-ink: #b91c1c;
  --amber: #f59e0b;
  --warn-soft: #fef3c7;
  --warn-line: #fcd34d;
  --warn-ink: #92400e;
  --ok-soft: #dcfce7;
  --ok-ink: #166534;
  --info: #0369a1;          /* translated text, links    */

  /* --- chat --- */
  --chat-bg: #eae6df;
  --chat-pattern: rgba(15, 23, 42, .035);
  --bubble-in: #ffffff;
  --bubble-in-ink: #0f172a;
  --bubble-out: #d9fdd3;
  --bubble-out-ink: #0f172a;
  --ghost-bg: rgba(217, 253, 211, .5);
  --ghost-ink: #334155;

  /* --- sidebar: its own scale, dark in BOTH themes --- */
  --sidebar: #0b141a;
  --sidebar-2: #1f2c34;
  --sidebar-text: #aebac1;
  --sidebar-active: #1f6f54;

  /* --- board --- */
  --col-bg: #e6ebf1;
  --card-bg: #ffffff;

  /* --- elevation & motion --- */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, .07);
  --shadow-2: 0 4px 14px rgba(15, 23, 42, .10);
  --shadow-3: 0 14px 34px rgba(15, 23, 42, .14);
  --ring: 0 0 0 3px rgba(18, 140, 126, .30);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --radius: 12px;
  --radius-lg: 16px;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0a1014;
  --panel: #111b21;
  --panel-2: #16232b;
  --line: #26343d;
  --line-strong: #3a4a54;
  --text: #e6edf3;
  --muted: #8b98a5;
  --hover: #18262e;
  --sel-bg: #16353b;        /* deep teal — never near-white */
  --sel-ink: #eafff6;

  --green: #22c55e;
  --green-dark: #1eae95;
  --accent: #1eae95;
  --accent-ink: #04231e;
  --accent-soft: rgba(37, 211, 102, .14);

  --danger: #f05252;
  --danger-soft: #2a1618;
  --danger-ink: #fca5a5;
  --amber: #fbbf24;
  --warn-soft: #33280a;
  --warn-line: #6b5410;
  --warn-ink: #fde68a;
  --ok-soft: #10301f;
  --ok-ink: #86efac;
  --info: #7dd3fc;          /* light blue: readable on dark surfaces */

  --chat-bg: #0a0f13;
  --chat-pattern: rgba(255, 255, 255, .022);
  --bubble-in: #202c33;
  --bubble-in-ink: #e6edf3;
  --bubble-out: #005c4b;
  --bubble-out-ink: #e9fff7;
  --ghost-bg: rgba(0, 92, 75, .30);
  --ghost-ink: #cbd5e1;

  --col-bg: #142027;
  --card-bg: #1c2b33;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, .45);
  --shadow-3: 0 14px 34px rgba(0, 0, 0, .55);
  --ring: 0 0 0 3px rgba(37, 211, 102, .32);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg); color: var(--text); font-size: 14px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
button { font: inherit; cursor: pointer; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
a { color: var(--accent); }

/* One visible focus style for the whole app — keyboard users could not see
   where they were. Mouse clicks never trigger it (:focus-visible). */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: none; box-shadow: var(--ring); border-radius: 8px;
}

/* Scrollbars that belong to the theme, instead of the OS's light default
   punched through every dark panel. */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- layout ---------- */
#app { display: flex; height: 100vh; overflow: hidden; }
.sidebar {
  width: 232px; background: var(--sidebar); color: var(--sidebar-text);
  display: flex; flex-direction: column; flex-shrink: 0;
}
.sidebar .brand {
  padding: 18px 16px; color: #fff; font-weight: 700; font-size: 16px;
  display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--sidebar-2);
  letter-spacing: -.2px;
}
.brand .logo {
  width: 32px; height: 32px; background: linear-gradient(145deg, var(--wa), #128c7e);
  border-radius: 10px; display: grid; place-items: center; color: #04281a; font-size: 17px;
  box-shadow: 0 4px 12px rgba(37, 211, 102, .35); flex-shrink: 0;
}
.nav { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.nav a {
  position: relative; color: var(--sidebar-text); text-decoration: none; padding: 10px 12px;
  border-radius: 9px; display: flex; align-items: center; gap: 11px; font-weight: 500;
  transition: background .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
}
.nav a .ic { width: 18px; flex-shrink: 0; display: grid; place-items: center; }
.nav a .ic svg { width: 17px; height: 17px; display: block; }
.nav a:hover { background: var(--sidebar-2); color: #fff; transform: translateX(2px); }
.nav a.active { background: var(--sidebar-active); color: #fff; font-weight: 600; }
/* the accent bar that marks where you are */
.nav a.active::before {
  content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--wa);
}
.nav .badge { margin-left: auto; background: var(--danger); color: #fff; border-radius: 99px; font-size: 11px; padding: 1px 7px; font-weight: 700; }
.sidebar .foot { padding: 12px; border-top: 1px solid var(--sidebar-2); font-size: 12px; }
.sidebar .foot .conn { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.dot.on { background: var(--wa); box-shadow: 0 0 0 3px rgba(37, 211, 102, .18); }
.dot.warn { background: var(--amber); } .dot.off { background: var(--danger); }
.foot button { width: 100%; background: var(--sidebar-2); border: 0; color: var(--sidebar-text); padding: 9px; border-radius: 8px; transition: background .16s, color .16s; }
.foot button:hover { background: #2a3b45; color: #fff; }

.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.topbar {
  background: var(--panel); border-bottom: 1px solid var(--line);
  padding: 12px 22px; display: flex; align-items: center; gap: 14px;
}
.topbar h1 { font-size: 17px; letter-spacing: -.3px; }
.topbar .spacer { flex: 1; }
.content { flex: 1; overflow-y: auto; padding: 22px; }
/* every page fades in, so switching sections never snaps */
.content > * { animation: page-in .32s var(--ease) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- widgets ---------- */
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 18px; box-shadow: var(--shadow-1);
  transition: box-shadow .2s var(--ease);
}
.card:hover { box-shadow: var(--shadow-2); }
.card h3 { letter-spacing: -.2px; }
.grid { display: grid; gap: 14px; }
.stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.stat .num { font-size: 26px; font-weight: 800; }
.stat .lbl { color: var(--muted); font-size: 12px; margin-top: 3px; }

.btn {
  background: var(--accent); color: var(--accent-ink); border: 0; padding: 9px 16px;
  border-radius: 9px; font-weight: 600; box-shadow: var(--shadow-1);
  transition: filter .15s, transform .12s var(--ease), box-shadow .15s;
}
.btn:hover { filter: brightness(1.08); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(1px); box-shadow: var(--shadow-1); }
.btn.secondary { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); box-shadow: none; }
.btn.secondary:hover { background: var(--hover); border-color: var(--line-strong); }
.btn.danger { background: var(--danger); color: #fff; }
.btn.sm { padding: 5px 10px; font-size: 12px; border-radius: 7px; }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn-active { outline: 2px solid var(--accent); outline-offset: 1px; }

input[type=text], input[type=password], input[type=number], input[type=date],
input[type=datetime-local], input[type=file], textarea, select {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel-2); color: var(--text);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input:hover:not(:disabled), textarea:hover:not(:disabled), select:hover:not(:disabled) { border-color: var(--line-strong); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); background: var(--panel); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .85; }
input[type=color] { padding: 2px; height: 30px; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: auto; }
textarea { resize: vertical; }
label.fld { display: block; margin-bottom: 12px; font-weight: 600; font-size: 13px; }
label.fld > span { display: block; margin-bottom: 5px; }
code { background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; font-size: .92em; }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; color: #fff; }
.muted { color: var(--muted); }
.row { display: flex; align-items: center; gap: 10px; }
.right { margin-left: auto; }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; padding: 9px 10px; border-bottom: 1px solid var(--line); font-weight: 700; }
td { padding: 11px 10px; border-bottom: 1px solid var(--line); }
tbody tr { transition: background .14s; }
tr:hover td { background: var(--hover); }
tbody tr:last-child td { border-bottom: 0; }

/* ---------- toggle ---------- */
.toggle { position: relative; width: 42px; height: 23px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 100%; height: 100%; position: absolute; margin: 0; cursor: pointer; z-index: 2; }
.toggle .tk { position: absolute; inset: 0; background: var(--line-strong); border-radius: 99px; transition: background .18s var(--ease); }
.toggle .tk::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px;
  background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: left .18s var(--ease);
}
.toggle input:checked + .tk { background: var(--wa); }
.toggle input:checked + .tk::after { left: 22px; }
.toggle input:focus-visible + .tk { box-shadow: var(--ring); }

/* ---------- conversations ---------- */
.conv-wrap { display: flex; height: 100%; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--panel); box-shadow: var(--shadow-1); }
.conv-list { width: 330px; border-right: 1px solid var(--line); display: flex; flex-direction: column; flex-shrink: 0; }
.conv-list .search { padding: 10px; border-bottom: 1px solid var(--line); }
.conv-items { flex: 1; overflow-y: auto; }
.conv-item {
  position: relative; padding: 11px 14px; border-bottom: 1px solid var(--line); cursor: pointer;
  transition: background .14s var(--ease);
}
.conv-item:hover { background: var(--hover); }
/* The selected row and the ink on it are declared TOGETHER — this is the pair
   that used to collapse into white-on-white when the theme changed. */
.conv-item.sel { background: var(--sel-bg); color: var(--sel-ink); }
.conv-item.sel .name { color: var(--sel-ink); }
.conv-item.sel::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent);
}
.conv-item .row-main { display: flex; gap: 10px; align-items: center; }
.conv-item .row-main > .who-col { min-width: 0; flex: 1; }
.conv-item .top { display: flex; align-items: center; gap: 8px; }
.conv-item .name { font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-item .prev { color: var(--muted); font-size: 12px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-item.sel .prev { color: color-mix(in srgb, var(--sel-ink) 62%, transparent); }
.conv-item .unread { background: var(--wa); color: #04281a; font-size: 11px; font-weight: 800; border-radius: 99px; padding: 1px 7px; }
.flag { color: var(--amber); font-size: 15px; }
/* initials disc, so a list of names is scannable instead of a wall of text */
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 800; letter-spacing: .3px; color: #fff; text-transform: uppercase;
  box-shadow: var(--shadow-1);
}
.avatar.sm { width: 26px; height: 26px; font-size: 10.5px; }

.chat {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  background:
    radial-gradient(circle at 18% 22%, var(--chat-pattern) 0 2px, transparent 2px),
    radial-gradient(circle at 68% 72%, var(--chat-pattern) 0 2px, transparent 2px),
    var(--chat-bg);
  background-size: 34px 34px, 34px 34px, auto;
}
.chat-head { background: var(--panel); border-bottom: 1px solid var(--line); padding: 10px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chat-head .who { font-weight: 700; letter-spacing: -.2px; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.bubble {
  max-width: 68%; padding: 8px 12px; border-radius: 12px; font-size: 13.5px;
  white-space: pre-wrap; word-wrap: break-word; box-shadow: var(--shadow-1);
}
/* Only a message that genuinely just arrived slides in (see appendMsg). Putting
   this on .bubble itself meant every redraw of the list replayed it on every
   bubble, and the whole chat flashed. */
.bubble.fresh { animation: bubble-in .22s var(--ease) both; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(6px) scale(.99); } to { opacity: 1; transform: none; } }
.bubble.in { background: var(--bubble-in); color: var(--bubble-in-ink); align-self: flex-start; border-top-left-radius: 3px; }
.bubble.out { background: var(--bubble-out); color: var(--bubble-out-ink); align-self: flex-end; border-top-right-radius: 3px; }
.bubble .meta { display: block; font-size: 10.5px; color: color-mix(in srgb, currentColor 58%, transparent); margin-top: 4px; text-align: right; }
.bubble .meta .bot-tag { font-weight: 700; opacity: .95; }
.bubble .meta .ai-reply,
.bubble .ai-reply {
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: inherit; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  cursor: pointer; transition: opacity .15s, background .15s;
}
.bubble .meta .ai-reply { opacity: .62; }
.bubble:hover .meta .ai-reply { opacity: 1; }
.bubble .meta .ai-reply:hover,
.bubble .ai-reply:hover { background: color-mix(in srgb, currentColor 22%, transparent); }
.bubble .meta .ai-reply:disabled { cursor: wait; opacity: .6; }

/* The translated line under a message. It sits INSIDE a bubble whose colour
   changes with the theme, so it derives its ink from that bubble rather than
   naming one — a fixed blue was unreadable on the dark-green outgoing bubble. */
.bubble .tr-line {
  margin-top: 5px; padding-top: 5px; font-size: 12.5px;
  border-top: 1px dashed color-mix(in srgb, currentColor 30%, transparent);
}
.bubble.in .tr-line { color: var(--info); }
.bubble.out .tr-line { color: color-mix(in srgb, var(--bubble-out-ink) 80%, var(--info)); font-style: italic; }
.bubble .tr-line.pending { color: color-mix(in srgb, currentColor 60%, transparent); font-style: normal; }
.bubble .tr-line.failed { color: var(--amber); font-style: normal; }

/* ---------- live bot activity ----------
   A translucent, dashed "ghost" bubble at the end of the chat showing what the
   bot is doing right now. It is never a real message — nothing is stored. */
.bubble.ghost {
  background: var(--ghost-bg); border: 1px dashed var(--accent);
  box-shadow: none; color: var(--ghost-ink); animation: ghost-in .18s ease-out;
}
@keyframes ghost-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.bubble.ghost .act-head { font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.bubble.ghost .act-text { margin-top: 5px; font-size: 13.5px; color: var(--text); opacity: .88; white-space: pre-wrap; }
.bubble.ghost .act-note { margin-top: 4px; font-size: 12px; color: var(--muted); }
.bubble.ghost .act-chips { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 5px; }
.bubble.ghost .act-chip {
  font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
}
.bubble.ghost .act-chip.run { background: var(--warn-soft); color: var(--warn-ink); border-color: var(--warn-line); }
.bubble.ghost .act-chip.ok { background: var(--ok-soft); color: var(--ok-ink); border-color: transparent; }
.bubble.ghost .act-chip.refused { background: var(--danger-soft); color: var(--danger-ink); border-color: transparent; text-decoration: line-through; }
/* Stop button on the ghost — pushed to the far end of the head row so it reads
   as an action on the whole indicator, not as part of the phase label. */
.bubble.ghost .act-stop {
  margin-left: auto; border: 1px solid var(--danger); background: var(--danger-soft); color: var(--danger-ink);
  font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; cursor: pointer;
  transition: filter .15s;
}
.bubble.ghost .act-stop:hover { filter: brightness(1.12); }
.bubble.ghost .act-stop:disabled { opacity: .55; cursor: default; }

/* The reminder the bot promised this client, in the chat side panel. */
.reminder-card {
  border: 1px solid var(--line); border-left: 3px solid #14b8a6; border-radius: 10px;
  background: var(--panel-2); padding: 9px 11px; font-size: 13px;
}

/* The message an action is about, quoted inside a dialog. */
.quote-box {
  border-left: 3px solid var(--accent); background: var(--panel-2);
  padding: 8px 11px; border-radius: 0 9px 9px 0; margin-bottom: 12px;
  font-size: 13px; white-space: pre-wrap; max-height: 130px; overflow-y: auto;
}

/* three bouncing dots, reused by the ghost bubble and the conversations list */
.dots { display: inline-flex; gap: 3px; align-items: center; }
.dots i {
  width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .45;
  animation: dot-bounce 1.05s infinite ease-in-out;
}
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-3px); opacity: 1; } }
.conv-item .botbusy { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--accent); }

/* spinner shown while a message is being translated */
.spin {
  display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px;
  border: 2px solid color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor;
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.chat-input { background: var(--panel); border-top: 1px solid var(--line); padding: 10px 14px; display: flex; gap: 10px; align-items: flex-end; }
.chat-input textarea { flex: 1; max-height: 120px; min-height: 40px; border-radius: 12px; }
.chat-side { width: 272px; border-left: 1px solid var(--line); background: var(--panel); padding: 14px; overflow-y: auto; flex-shrink: 0; }
.chat-side h3 { font-size: 12px; margin: 16px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.chat-side h3:first-child { margin-top: 0; }
.human-banner { background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--warn-ink); padding: 9px 12px; border-radius: 10px; font-size: 12.5px; margin-bottom: 6px; }
.human-banner a { color: inherit; }

/* ---------- pipeline board ---------- */
.board { display: flex; gap: 12px; overflow-x: auto; align-items: flex-start; padding-bottom: 10px; height: 100%; }
.col {
  background: var(--col-bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
  width: 262px; flex-shrink: 0; max-height: 100%; display: flex; flex-direction: column;
  transition: background .15s, outline-color .15s;
}
.col-head {
  padding: 11px 12px; font-weight: 700; display: flex; align-items: center; gap: 8px; font-size: 13px;
  border-bottom: 1px solid var(--line);
}
.col-head .cnt {
  color: var(--muted); font-weight: 700; margin-left: auto; background: var(--panel);
  border: 1px solid var(--line); border-radius: 99px; padding: 0 8px; font-size: 11.5px;
}
.col-cards { padding: 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 44px; }
.kcard {
  background: var(--card-bg); border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px;
  box-shadow: var(--shadow-1); cursor: grab;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.kcard .nm { font-weight: 700; font-size: 13px; }
.kcard .ph { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.kcard.dragging { opacity: .45; transform: rotate(1.5deg) scale(.98); }
.kcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.kcard:active { cursor: grabbing; }
.col.dragover { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--accent-soft); }

/* ---------- login ---------- */
.login-wrap { height: 100vh; display: grid; place-items: center; background: linear-gradient(160deg, #06121a 0%, #0d5f56 55%, #128c7e 100%); }
.login-card {
  background: var(--panel); color: var(--text); border-radius: 18px; padding: 34px; width: 372px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45); animation: page-in .4s var(--ease) both;
}
.login-card h1 { font-size: 20px; margin-bottom: 4px; letter-spacing: -.4px; }
.login-card p { color: var(--muted); margin-bottom: 20px; }

/* ---------- misc ---------- */
.qr-box { display: grid; place-items: center; padding: 20px; background: #fff; border-radius: var(--radius); }
#toast { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 99; }
.toast-item {
  background: #0f172a; color: #fff; padding: 11px 16px; border-radius: 11px; font-size: 13px;
  box-shadow: var(--shadow-3); max-width: 380px; animation: toast-in .25s var(--ease) both;
  border-left: 3px solid var(--wa);
}
.toast-item.err { background: #7f1d1d; border-left-color: #f87171; }
@keyframes toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.perm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin: 10px 0; }
.perm-grid label { display: flex; gap: 8px; align-items: center; font-weight: 500; font-size: 13px; }
.modal-bg { position: fixed; inset: 0; background: rgba(2, 8, 15, .62); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 50; animation: fade-in .16s ease both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px; width: 480px; max-width: 94vw; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-3); animation: modal-in .22s var(--ease) both;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.modal h2 { font-size: 17px; margin-bottom: 16px; letter-spacing: -.3px; }

/* ═══════════ RESPONSIVE ═══════════
   Three shapes, not one: a desktop with everything visible, a laptop where the
   sidebar becomes an icon rail and the chat gives up its side panel, and a
   phone where the sidebar is a drawer and the conversation list and the chat
   take turns instead of sharing 375px. */

/* Panels that should fill what is left under the top bar. 100dvh (not 100vh)
   because mobile browsers count their own collapsing address bar in vh, which
   pushes the message input off the bottom of the screen. */
.fill-height { height: calc(100vh - 110px); height: calc(100dvh - 110px); }

/* Shown only where the layout collapses (drawer button, chat Back). */
.icon-btn {
  background: transparent; border: 1px solid var(--line); color: var(--text);
  border-radius: 9px; padding: 5px 10px; font-size: 16px; line-height: 1; flex-shrink: 0;
}
.icon-btn:hover { background: var(--panel-2); }
.nav-only { display: none; }
.nav-scrim { display: none; }

/* ---- laptops / small desktops ---- */
@media (max-width: 1180px) {
  .chat-side { width: 240px; padding: 12px; }
  .conv-list { width: 290px; }
  .content { padding: 18px; }
}

/* ---- narrow laptops & tablets: the sidebar becomes an icon rail ---- */
@media (max-width: 1024px) {
  .sidebar { width: 64px; }
  .sidebar .brand span, .nav a span.t, .sidebar .foot .lbl, .foot select, .foot button span { display: none; }
  .nav a { justify-content: center; padding: 11px 0; }
  .nav a.active::before { left: -10px; }
  .chat-side { display: none; }
  .conv-list { width: 265px; }
  .fcard-grid { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
}

/* ---- phones and small tablets ---- */
@media (max-width: 820px) {
  .nav-only { display: inline-flex; align-items: center; justify-content: center; }

  /* The sidebar slides over the content instead of taking a column of it. */
  .sidebar {
    position: fixed; z-index: 60; top: 0; bottom: 0; left: 0; width: 244px;
    transform: translateX(-100%); transition: transform .22s var(--ease);
    box-shadow: var(--shadow-3);
  }
  #app.nav-open .sidebar { transform: none; }
  .sidebar .brand span, .nav a span.t, .sidebar .foot .lbl, .foot select, .foot button span { display: revert; }
  .nav a { justify-content: flex-start; padding: 11px 12px; }
  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 55; background: rgba(2, 8, 15, .5);
    opacity: 0; pointer-events: none; transition: opacity .22s var(--ease);
  }
  #app.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }

  .topbar { padding: 10px 12px; gap: 10px; }
  .topbar h1 { font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .content { padding: 12px; }
  .fill-height { height: calc(100dvh - 92px); }

  /* One pane at a time: the list, or the conversation. */
  .conv-wrap { border-radius: var(--radius); }
  .conv-list { width: 100%; border-right: 0; }
  .conv-wrap .chat { display: none; }
  .conv-wrap.chat-open .conv-list { display: none; }
  .conv-wrap.chat-open .chat { display: flex; }
  .chat-side { display: none; }
  .bubble { max-width: 86%; }
  .chat-msgs { padding: 12px; }
  /* The message box gets a row of its own: sharing one line with five buttons
     left it about 90px wide, with the placeholder clipped mid-word. */
  .chat-input { padding: 8px 10px; gap: 7px; flex-wrap: wrap; }
  .chat-input textarea { flex: 1 1 100%; order: -1; }
  .chat-input .btn:last-child { margin-left: auto; }
  .chat-head { padding: 9px 10px; gap: 8px; }

  /* Any two-column page grid becomes one column. The templates are written
     inline at ~a dozen call sites (2fr 1fr, 3fr 2fr, 1fr 1fr…), so this is
     deliberately a blanket override: a column pair that does not fit is never
     what is wanted here, including in code added later. */
  .grid { grid-template-columns: 1fr !important; }
  .perm-grid { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 10px; }
  .kpi { padding: 13px; gap: 11px; }
  .kpi .ico { width: 40px; height: 40px; font-size: 19px; border-radius: 12px; }
  .kpi .v { font-size: 22px; }
  .fcard-grid { grid-template-columns: 1fr; }
  .modal { padding: 18px; border-radius: 14px; }

  /* A table cannot reflow, so let it scroll inside its own card rather than
     stretching the page sideways. */
  .card { padding: 14px; overflow-x: auto; }
  table { min-width: 520px; }
  .col { width: 84vw; max-width: 300px; }
}

/* ---- very small phones ---- */
@media (max-width: 400px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .bubble { max-width: 92%; }
  .chat-head .who { font-size: 13.5px; }
}

/* ═══════════ DASHBOARD & CHARTS ═══════════ */
@keyframes kpi-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes rise   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.dash-in { animation: rise .5s var(--ease) both; }

/* KPI tiles */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 14px; }
.kpi {
  position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 16px 18px; display: flex; align-items: center; gap: 14px;
  box-shadow: var(--shadow-1);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
  animation: kpi-in .5s var(--ease) both;
}
.kpi:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.kpi::after { content: ''; position: absolute; right: -28px; top: -28px; width: 96px; height: 96px; border-radius: 50%; background: var(--kc); opacity: .10; }
.kpi .ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; flex-shrink: 0; background: var(--kc-soft); }
.kpi .v { font-size: 27px; font-weight: 800; line-height: 1; letter-spacing: -.6px; }
.kpi .v .suf { font-size: 15px; font-weight: 700; opacity: .7; }
.kpi .k { color: var(--muted); font-size: 12px; margin-top: 6px; }
.kpi.warn .v { color: var(--amber); }
/* accent palette */
.kpi.a-blue   { --kc:#3b82f6; --kc-soft:rgba(59,130,246,.14); }
.kpi.a-green  { --kc:#22c55e; --kc-soft:rgba(34,197,94,.14); }
.kpi.a-teal   { --kc:#14b8a6; --kc-soft:rgba(20,184,166,.14); }
.kpi.a-violet { --kc:#8b5cf6; --kc-soft:rgba(139,92,246,.16); }
.kpi.a-amber  { --kc:#f59e0b; --kc-soft:rgba(245,158,11,.16); }
.kpi.a-rose   { --kc:#f43f5e; --kc-soft:rgba(244,63,94,.15); }
.kpi.a-slate  { --kc:#64748b; --kc-soft:rgba(100,116,139,.16); }

/* chart bars */
.chart-bars { display: flex; align-items: flex-end; gap: 5px; height: 150px; }
.chart-bars .bar {
  flex: 1; position: relative; cursor: pointer;
  background: linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%);
  border-radius: 6px 6px 3px 3px; min-height: 3px;
  transition: height .65s var(--ease), filter .12s, box-shadow .12s, opacity .12s;
}
.chart-bars .bar:hover { filter: brightness(1.14) saturate(1.1); }
.chart-bars .bar.sel { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--green); }
.chart-bars .bar.dim { opacity: .45; }
.chart-bars .bar span { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 9.5px; color: var(--muted); font-weight: 600; }

/* day-detail tiles with icon chips */
.day-detail { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 14px; }
.dd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: 10px; margin-top: 12px; }
.dd-tile { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 10px; animation: rise .4s ease both; }
.dd-tile .di { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; background: var(--kc-soft, rgba(100,116,139,.14)); flex-shrink: 0; }
.dd-tile.a-blue{--kc-soft:rgba(59,130,246,.14)} .dd-tile.a-green{--kc-soft:rgba(34,197,94,.14)}
.dd-tile.a-teal{--kc-soft:rgba(20,184,166,.14)} .dd-tile.a-violet{--kc-soft:rgba(139,92,246,.16)}
.dd-tile.a-amber{--kc-soft:rgba(245,158,11,.16)} .dd-tile.a-slate{--kc-soft:rgba(100,116,139,.16)}
.dd-tile .n { font-size: 19px; font-weight: 800; line-height: 1; }
.dd-tile .l { color: var(--muted); font-size: 11px; margin-top: 3px; }
.mini-bar { height: 9px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 8px; }
.mini-bar > span { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--green), var(--wa)); transition: width .8s var(--ease); }

/* pipeline mini-rows on the dashboard */
.pl-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.pl-row .bar2 { flex: 1; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.pl-row .bar2 > span { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .8s var(--ease); }

/* ---------- theme toggle button ---------- */
#themeBtn { background: transparent; border: 1px solid var(--line); color: var(--text); border-radius: 9px; padding: 6px 10px; font-size: 15px; line-height: 1; transition: background .15s, border-color .15s; }
#themeBtn:hover { background: var(--panel-2); border-color: var(--line-strong); }

/* ---------- empty states ---------- */
.empty { display: grid; place-items: center; gap: 8px; padding: 34px 16px; color: var(--muted); text-align: center; }
.empty .em-ic { font-size: 30px; opacity: .55; }

/* ---------- funnels: a card per funnel ----------
   A funnel owns numbers, a script, a language, a clock and a client base; a
   table squeezed all of that into fixed-width cells and read as dead weight. */
.fcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.fcard {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 16px; box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 12px;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), opacity .18s;
  animation: kpi-in .45s var(--ease) both;
}
.fcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }
.fcard.off { opacity: .62; }
.fcard-head { display: flex; align-items: center; gap: 11px; }
.fcard-name { font-weight: 800; font-size: 15px; letter-spacing: -.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcard-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.fcard-facts .fact {
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 99px; padding: 3px 9px;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.fcard-facts .fact b { color: var(--text); }
.fcard-nums { border-top: 1px solid var(--line); padding-top: 10px; }
.num-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.num-label { font-size: 12.5px; font-weight: 600; }
.num-state { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.num-state.connected { background: var(--wa); box-shadow: 0 0 0 3px rgba(37, 211, 102, .18); }
.num-state.connecting { background: var(--amber); animation: pulse-dot 1.4s ease-in-out infinite; }
.num-state.simulator { background: #8b5cf6; }
.num-state.disconnected { background: var(--danger); }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.fcard-actions { display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: auto; }

/* an empty pipeline column should still look like somewhere you can drop a card */
.col-cards:empty::after,
.col-cards .empty {
  content: 'Drop a client here';
  display: grid; place-items: center; min-height: 64px; border: 1px dashed var(--line-strong);
  border-radius: 10px; color: var(--muted); font-size: 12px; text-align: center;
}

/* ---------- loading placeholder ----------
   Opening a section or a chat empties it immediately, so nothing of the
   previous one is left on screen while the next one is fetched. The spinner
   waits .16s before fading in: a fast load then shows no flicker at all, and
   only a slow connection actually gets a visible loader. Declared after
   `.content > *` so it wins over the page-in animation. */
.loading-pane {
  flex: 1; margin: auto; min-height: 160px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: var(--muted); font-size: 13px;
  animation: fade-in .25s ease .16s both;
}
.loading-pane .spin {
  width: 22px; height: 22px; margin: 0; vertical-align: 0;
  border-width: 2.5px; color: var(--accent);
}