/* ==========================================================================
   Wasel — design system (RTL, Arabic-first)
   ========================================================================== */
:root {
  --brand: #2F6FED;
  --brand-2: #1D4ED8;
  --brand-soft: #EAF1FE;
  --ink: #111827;
  --ink-2: #374151;
  --muted: #6B7280;
  --line: #E5E7EB;
  --line-2: #F1F2F4;
  --bg: #F7F7F8;
  --surface: #FFFFFF;
  --danger: #D92D20;
  --danger-soft: #FEECEB;
  --warn: #B54708;
  --warn-soft: #FFF4E5;
  --ok: #067647;
  --ok-soft: #E7F6EE;
  --note: #FFF7D6;
  --note-line: #F2DF8C;
  --radius: 10px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(17, 24, 39, .04);
  --shadow-lg: 0 16px 40px rgba(17, 24, 39, .16);
  --side-w: 232px;
  --brand-ink: #2563EB;      /* brand used as text / icon colour */
  --brand-hover: #2058C9;
  --field-line: #D1D5DB;
  --subtle: #F9FAFB;         /* faint fill: table heads, hovers, read-only fields */
  --chat-bg: #F7F7F8;
  --bubble-out: #E3EDFF;
  --float: rgba(255, 255, 255, .8);
  --violet: #6941C6;
  --violet-soft: #F4F0FF;
  --info: #3538CD;
  --info-soft: #EEF4FF;
  --side-bg: #FFFFFF;
  --font: "Cairo", "Segoe UI", Tahoma, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); font-size: 14.5px; line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; line-height: 1.35; font-weight: 700; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; background: var(--line-2); padding: 1px 6px; border-radius: 5px; word-break: break-all; }
.muted { color: var(--muted); }
.sm, .small { font-size: 12.5px; }
.center { text-align: center; }
.grow { flex: 1; }
.row { display: flex; align-items: center; gap: 8px; }
.row.between { justify-content: space-between; }
.ic { flex: none; vertical-align: middle; }
[hidden] { display: none !important; }

/* ---------- buttons & inputs ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 600; font-size: 14px;
  padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  cursor: pointer; text-decoration: none !important; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s; }
.btn:hover { background: var(--line-2); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-hover); }
.btn.danger { color: var(--danger); border-color: #F5C6C2; }
.btn.danger:hover { background: var(--danger-soft); }
.btn.success { background: var(--ok-soft); color: var(--ok); border-color: #B7E4CB; }
.btn.sm { padding: 5px 11px; font-size: 13px; }
.btn.block { width: 100%; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; flex: none; }
.icon-btn:hover { background: var(--line-2); color: var(--ink); }
.icon-btn.on { color: var(--brand-ink); background: var(--brand-soft); }
.linkish { background: none; border: 0; color: var(--brand-ink); font: inherit; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; }

input, select, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--radius-sm); padding: 8px 11px; width: 100%; outline: none; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(47, 111, 237, .18); }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--brand); }
textarea { resize: vertical; }
input.saved, select.saved, textarea.saved { border-color: var(--ok); box-shadow: 0 0 0 3px rgba(6, 118, 71, .15); }
.form { display: flex; flex-direction: column; gap: 14px; }
.form label, label.fld { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 13px; color: var(--ink-2); }
.form label small, .hint { font-weight: 400; color: var(--muted); font-size: 12px; }
.form h3 { font-size: 15px; margin-top: 6px; }
label.check { flex-direction: row !important; align-items: center; gap: 8px !important; font-weight: 500 !important; cursor: pointer; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.form-actions { display: flex; gap: 8px; justify-content: flex-start; flex-wrap: wrap; }

/* ---------- alerts, pills, toast ---------- */
.alert { padding: 11px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; border: 1px solid transparent; font-weight: 500; }
.alert.ok { background: var(--ok-soft); color: var(--ok); border-color: #B7E4CB; }
.alert.err { background: var(--danger-soft); color: #B42318; border-color: #F9C9C4; }
.alert.warn { background: var(--warn-soft); color: var(--warn); border-color: #F9DDB5; }
.alert.info { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 28%, transparent); }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--line-2); color: var(--ink-2); white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.bad { background: var(--danger-soft); color: var(--danger); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.brand { background: var(--brand-soft); color: var(--brand-2); }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 10px; box-shadow: var(--shadow-lg); z-index: 9999; font-weight: 500; max-width: calc(100vw - 32px); }
.toast.err { background: #B42318; }
.toast.ok { background: var(--ok); }
.spinner { width: 28px; height: 28px; border: 3px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; margin: 20px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- avatar & channel badge ---------- */
.avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-weight: 700; object-fit: cover; flex: none; background: var(--line-2); color: var(--ink-2); font-size: 15px; }
.ch-badge { display: inline-grid; place-items: center; border-radius: 50%; background: var(--c); color: #fff; flex: none; box-shadow: 0 0 0 2px var(--surface); }
.av-wrap { position: relative; flex: none; display: inline-flex; }
.av-wrap .ch-badge { position: absolute; bottom: -2px; left: -2px; }
.logo-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 700; font-size: 19px; flex: none; }

/* ---------- shell ---------- */
.shell { display: flex; min-height: 100vh; }
.side { width: var(--side-w); flex: none; background: var(--side-bg); color: #C9D4DD; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 50; }
a.brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; color: #fff; font-weight: 700; font-size: 18px; text-decoration: none !important; }
.side nav { flex: 1; overflow-y: auto; padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; }
.side nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; color: #B4C1CC; font-weight: 500; text-decoration: none !important; position: relative; }
.side nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.side nav a.on { background: var(--brand-soft); color: #fff; }
.side nav a.on::before { content: ""; position: absolute; right: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--brand); }
.nav-count { margin-inline-start: auto; background: #E5484D; color: #fff; font-style: normal; font-size: 11.5px; font-weight: 700; min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; padding: 0 6px; }
.side-foot { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid rgba(255, 255, 255, .08); }
.side-foot .me { color: inherit; text-decoration: none !important; display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.side-foot .me b { display: block; color: #fff; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-foot .me small { display: block; color: #8797A5; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-foot .logout { color: #8797A5; padding: 6px; border-radius: 8px; }
.side-foot .logout:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.side-backdrop { display: none; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 16px 28px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.topbar h1 { font-size: 19px; flex: 1; }
.top-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.content { padding: 24px 28px 48px; max-width: 1320px; width: 100%; margin-inline: auto; }
.imp-bar { background: #FEF0C7; color: #7A2E0E; text-align: center; padding: 7px; font-size: 13px; position: relative; z-index: 60; }
.only-mobile { display: none !important; }

/* ---------- cards, tables, stats ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); margin-bottom: 18px; }
.card > h3 { font-size: 16px; margin-bottom: 12px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head h3 { font-size: 16px; }
.section-title { font-size: 17px; margin: 26px 0 12px; }
.stat { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.stat small { color: var(--muted); font-weight: 500; }
.stat b { font-size: 26px; font-weight: 700; letter-spacing: -.3px; }
.stat b.sm { font-size: 15px; }
.stat .delta { font-size: 12px; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.table-wrap { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th { text-align: start; font-weight: 600; color: var(--muted); font-size: 12.5px; padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--subtle); }
table.t td { padding: 11px 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t tr:hover td { background: var(--subtle); }
table.t .actions { white-space: nowrap; text-align: end; }
.cell-user { display: flex; align-items: center; gap: 10px; }
.cell-user b { display: block; }
.cell-user small { color: var(--muted); }
.empty { text-align: center; padding: 42px 16px; color: var(--muted); }
.empty .ic { color: #B7C0C9; margin-bottom: 8px; }
.pager { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 16px; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar input, .toolbar select { width: auto; min-width: 150px; }
.toolbar .grow { flex: 1; }
.bar { height: 8px; background: var(--line-2); border-radius: 4px; overflow: hidden; min-width: 60px; }
.bar i { display: block; height: 100%; background: var(--brand); border-radius: 4px; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.copy-field { display: flex; gap: 6px; }
.copy-field input { direction: ltr; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; background: var(--subtle); }

/* ---------- tags ---------- */
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; font-size: 12.5px; font-weight: 600;
  color: var(--t); background: color-mix(in srgb, var(--t) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--t) 28%, var(--surface)); }
.tag button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; opacity: .6; }
.tag button:hover { opacity: 1; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #C3CBD3; }
.dot.on { background: #12B76A; box-shadow: 0 0 0 3px rgba(18, 183, 106, .18); }

/* ---------- auth ---------- */
.auth-body { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(1200px 600px at 100% 0%, #E3EDFF 0%, transparent 60%), var(--bg); }
.auth-split { display: grid; grid-template-columns: 1.1fr 1fr; max-width: 960px; width: 100%; background: var(--surface); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.auth-pitch { background: linear-gradient(160deg, #2F6FED 0%, #1E3A8A 100%); color: #E8EEFF; padding: 44px 40px; display: flex; flex-direction: column; gap: 16px; }
.auth-pitch h2 { font-size: 30px; color: #fff; line-height: 1.35; }
.auth-pitch p { margin: 0; opacity: .9; }
.pitch-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 10px; }
.pitch-list li { display: flex; align-items: center; gap: 10px; }
.pitch-list .ic { background: rgba(255, 255, 255, .14); border-radius: 8px; padding: 6px; width: 30px; height: 30px; }
.auth-card { padding: 40px; display: flex; flex-direction: column; gap: 16px; justify-content: center; background: var(--surface); }
.auth-card h1 { font-size: 22px; }
.auth-card.solo, .auth-card.wide { max-width: 480px; width: 100%; border-radius: 20px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.auth-card.wide { max-width: 680px; }
.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-brand h1 { font-size: 20px; }
.auth-brand p { margin: 0; }
.auth-brand.light { color: #fff; font-size: 20px; }
.auth-brand.light .logo-mark { background: rgba(255, 255, 255, .16); }
.checks { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- plans ---------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 18px; }
.plan { margin: 0; }
.plan.current { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.plan h3 { font-size: 17px; }
.plan .price { font-size: 22px; font-weight: 700; margin: 6px 0 10px; }
.plan .price small { font-size: 13px; color: var(--muted); font-weight: 500; }
.plan ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; color: var(--ink-2); }

/* ---------- channels ---------- */
.ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.ch-card { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.ch-card .top { display: flex; align-items: center; gap: 12px; }
.ch-card .top b { display: block; font-size: 15px; }
.ch-card .top small { color: var(--muted); }
.ch-add { border: 1px dashed #C9D1D9; background: var(--subtle); text-align: start; cursor: pointer; font: inherit; color: var(--ink); }
.ch-add:hover { border-color: var(--brand); background: var(--brand-soft); }
.steps { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); }
details.help { background: var(--subtle); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; }
details.help summary { cursor: pointer; font-weight: 600; }
details.help[open] summary { margin-bottom: 8px; }

/* ---------- automations ---------- */
.rule { display: flex; gap: 14px; align-items: flex-start; }
.rule .ic-wrap { width: 40px; height: 40px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-ink); display: grid; place-items: center; flex: none; }
.rule-body { flex: 1; min-width: 0; }
.rule-body h4 { font-size: 15px; }
.flow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.flow .step { background: var(--line-2); border-radius: 7px; padding: 3px 9px; font-size: 12.5px; color: var(--ink-2); }
.flow .arrow { color: var(--muted); }
.action-row { display: grid; grid-template-columns: 170px 1fr 36px; gap: 8px; align-items: start; background: var(--subtle); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px; }
.switch { position: relative; width: 40px; height: 22px; flex: none; display: inline-block; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: #C9D1D9; border-radius: 22px; transition: .2s; cursor: pointer; }
.switch span::after { content: ""; position: absolute; width: 16px; height: 16px; top: 3px; right: 3px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.switch input:checked + span { background: var(--brand); }
.switch input:checked + span::after { transform: translateX(-18px); }

/* ---------- modal & lightbox ---------- */
.modal { position: fixed; inset: 0; background: rgba(15, 27, 36, .5); display: grid; place-items: center; z-index: 200; padding: 16px; }
.modal-box { background: var(--surface); border-radius: 16px; padding: 22px; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 12px; }
.lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, .85); display: grid; place-items: center; z-index: 300; cursor: zoom-out; padding: 20px; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.tpl-list { display: flex; flex-direction: column; gap: 10px; }
.tpl { border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.tpl p { margin: 0; white-space: pre-wrap; color: var(--ink-2); font-size: 13.5px; background: var(--subtle); padding: 8px; border-radius: 8px; }
.tpl .btn { align-self: flex-start; }

/* ==========================================================================
   Inbox
   ========================================================================== */
body.page-full { overflow: hidden; }
body.page-full .main { height: 100vh; }
.inbox { display: grid; grid-template-columns: 210px 330px minmax(0, 1fr) 300px; height: 100vh; min-height: 0; }
body:has(.imp-bar) .inbox { height: calc(100vh - 34px); }
.ib-list { min-width: 0; background: var(--surface); border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.ib-list-head { padding: 14px 14px 10px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.ib-list-head h2 { font-size: 18px; flex: 1; }
.ib-tabs { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--line-2); border-radius: 9px; padding: 3px; gap: 2px; }
.ib-tabs button { white-space: nowrap; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 5px 4px; border-radius: 7px; cursor: pointer; }
.ib-tabs button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.ib-search { display: flex; align-items: center; gap: 6px; position: relative; flex-wrap: wrap; }
.ib-search > .ic { position: absolute; right: 10px; top: 10px; color: var(--muted); pointer-events: none; }
.ib-search input { padding-right: 32px; flex: 1 1 100%; background: var(--subtle); }
.ib-search select { flex: 1; font-size: 13px; padding: 5px 8px; background: var(--subtle); }
.ib-items { flex: 1; overflow-y: auto; }
.ib-empty { padding: 40px 20px; text-align: center; color: var(--muted); display: flex; flex-direction: column; gap: 10px; align-items: center; }
.ib-item { display: flex; gap: 11px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); color: var(--ink); text-decoration: none !important; position: relative; }
.ib-item:hover { background: var(--subtle); }
.ib-item.on { background: var(--brand-soft); }
.ib-item.on::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: var(--brand); }
.ib-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ib-item-body b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.ib-item.unread b { font-weight: 700; }
.ib-item time { font-size: 11.5px; color: var(--muted); flex: none; }
.ib-item .pv { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.ib-item.unread .pv { color: var(--ink); font-weight: 500; }
.ib-item .you { color: var(--muted); }
.ib-item .count { background: var(--brand); color: #fff; font-style: normal; font-size: 11px; font-weight: 700; min-width: 19px; height: 19px; border-radius: 10px; display: grid; place-items: center; padding: 0 5px; flex: none; }
.ib-item .meta { display: flex; gap: 6px; margin-top: 3px; font-size: 11.5px; }
.ib-item .who { color: var(--ink-2); background: var(--line-2); padding: 0 7px; border-radius: 5px; }
.ib-item .who.none { color: var(--warn); background: var(--warn-soft); }
.adtag { display: inline-flex; align-items: center; gap: 3px; color: var(--violet); background: var(--violet-soft); padding: 0 6px; border-radius: 5px; }
.closed-tag { color: var(--muted); background: var(--line-2); padding: 0 6px; border-radius: 5px; }
.more-btn { margin: 12px auto; width: calc(100% - 28px); }

.ib-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--chat-bg); position: relative; }
.ib-placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #9AA6B1; text-align: center; padding: 20px; }
.ib-placeholder h3 { color: var(--ink-2); }
.chat-head { display: flex; align-items: center; gap: 11px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line); min-height: 62px; }
.ch-title { flex: 1; min-width: 0; }
.ch-title b { display: block; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-title small { color: var(--muted); font-size: 12.5px; }
.chat-actions { display: flex; align-items: center; gap: 6px; }
.chat-actions .assign { width: auto; max-width: 170px; padding: 5px 8px; font-size: 13px; }
.chip { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12.5px; font-weight: 600; border: 1px solid var(--line); background: var(--surface); color: var(--muted); padding: 4px 10px; border-radius: 99px; cursor: pointer; }
.chip.on { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 30%, transparent); background: var(--violet-soft); }

.msgs { flex: 1; overflow-y: auto; padding: 18px 22px 10px; display: flex; flex-direction: column; gap: 4px; }
.day { text-align: center; margin: 12px 0 6px; }
.day span { background: var(--float); color: var(--muted); font-size: 12px; padding: 3px 12px; border-radius: 99px; box-shadow: var(--shadow); }
.evt { text-align: center; margin: 4px 0; }
.evt span { font-size: 12px; color: var(--muted); background: var(--float); padding: 2px 10px; border-radius: 99px; display: inline-block; }
.msg { display: flex; margin: 2px 0; }
.msg.in { justify-content: flex-start; }
.msg.out, .msg.note { justify-content: flex-end; }
.bubble { max-width: min(560px, 78%); padding: 7px 11px 5px; border-radius: 14px; box-shadow: 0 1px 1px rgba(16, 24, 40, .06); word-wrap: break-word; overflow-wrap: anywhere; }
.msg.in .bubble { background: var(--surface); border-top-right-radius: 4px; }
.msg.out .bubble, .bubble.out { background: var(--bubble-out); border-top-left-radius: 4px; }
.msg.note .bubble { background: var(--note); border: 1px dashed var(--note-line); border-top-left-radius: 4px; }
.msg.failed .bubble { background: var(--danger-soft); }
.m-who { font-size: 11.5px; font-weight: 600; color: var(--brand-2); margin-bottom: 2px; display: flex; align-items: center; gap: 4px; }
.msg.note .m-who { color: #8A6A00; }
.m-text { white-space: pre-wrap; font-size: 14.5px; }
.m-text a { word-break: break-all; }
.m-meta { font-size: 11px; color: var(--muted); display: flex; gap: 4px; align-items: center; justify-content: flex-end; margin-top: 1px; }
.st { display: inline-flex; color: #8B98A5; }
.st.read { color: #2E90FA; }
.st.fail { color: #fff; background: var(--danger); width: 15px; height: 15px; border-radius: 50%; font-weight: 700; font-size: 11px; justify-content: center; align-items: center; }
.m-err { font-size: 12px; color: #B42318; margin-top: 3px; }
.m-img { max-width: 280px; max-height: 320px; width: auto; border-radius: 10px; display: block; margin-bottom: 4px; cursor: zoom-in; }
.m-video { max-width: 300px; border-radius: 10px; display: block; margin-bottom: 4px; }
.bubble audio { max-width: 260px; display: block; margin-bottom: 4px; }
.m-file { display: inline-flex; align-items: center; gap: 6px; background: var(--float); padding: 6px 10px; border-radius: 8px; margin-bottom: 4px; font-weight: 500; }
.older { align-self: center; margin-bottom: 8px; }
.win-note { font-size: 13px; background: var(--info-soft); color: var(--info); padding: 7px 16px; display: flex; align-items: center; gap: 6px; }
.win-note.warn { background: var(--warn-soft); color: var(--warn); }

.composer { background: var(--surface); border-top: 1px solid var(--line); padding: 8px 14px 10px; display: flex; flex-direction: column; gap: 6px; }
.composer.noting { background: #FFFCEB; }
.composer.noting textarea { background: #FFFCEB; }
.comp-tabs { display: flex; gap: 4px; }
.comp-tabs button { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); padding: 3px 10px; border-radius: 7px; cursor: pointer; }
.comp-tabs button.on { background: var(--brand-soft); color: var(--brand-2); }
.composer.noting .comp-tabs button.on { background: var(--note); color: #8A6A00; }
.composer textarea { border: 0; box-shadow: none !important; padding: 6px 2px; resize: none; max-height: 180px; font-size: 15px; background: transparent; }
.comp-bar { display: flex; align-items: center; gap: 2px; }
.comp-file { display: flex; align-items: center; gap: 6px; background: var(--line-2); padding: 5px 10px; border-radius: 8px; font-size: 13px; align-self: flex-start; }
#aiBtn { color: var(--violet); }
#aiBtn.busy { animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.qr-pop { position: absolute; bottom: 118px; right: 14px; left: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); max-height: 280px; overflow-y: auto; z-index: 10; padding: 4px; }
.qr { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: start; border: 0; background: none; font: inherit; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.qr span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.qr.on, .qr:hover { background: var(--brand-soft); }

.ib-info { background: var(--surface); border-inline-start: 1px solid var(--line); overflow-y: auto; min-height: 0; }
.ib-info:empty { display: none; }
@media (min-width: 1181px) { .inbox:has(.ib-info:empty) { grid-template-columns: 210px 330px minmax(0, 1fr); } }
.info-head { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px 16px; border-bottom: 1px solid var(--line); position: relative; text-align: center; }
.info-head h3 { font-size: 16px; }
.info-head #infoClose { position: absolute; top: 8px; left: 8px; display: none; }
.info-sec { padding: 14px 16px; border-bottom: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 9px; }
.info-sec h4 { font-size: 13px; color: var(--muted); font-weight: 600; }
.info-sec label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); font-weight: 600; }
.info-sec input, .info-sec select, .info-sec textarea { padding: 6px 9px; font-size: 13.5px; }
.tag-add input { padding: 5px 9px; font-size: 13px; }
.other { display: flex; align-items: center; gap: 6px; color: var(--ink); font-size: 13.5px; }
.adsrc { display: flex; align-items: center; gap: 6px; color: var(--violet); font-weight: 600; font-size: 13px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 1181px) { .ib-tabs { display: none; } }
@media (max-width: 1180px) {
  .ib-nav { display: none; }
  .inbox { grid-template-columns: 320px minmax(0, 1fr); }
  .ib-info { position: fixed; top: 0; bottom: 0; left: 0; width: 320px; max-width: 90vw; z-index: 90; box-shadow: var(--shadow-lg); transform: translateX(-105%); transition: transform .2s; }
  body.show-info .ib-info { transform: none; }
  .info-head #infoClose { display: grid; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  :root { --side-w: 260px; }
  .only-mobile { display: inline-grid !important; }
  .side { position: fixed; right: 0; transform: translateX(105%); transition: transform .2s; box-shadow: var(--shadow-lg); z-index: 150; }
  body.nav-open .side { transform: none; }
  body.nav-open .side-backdrop { display: block; position: fixed; inset: 0; background: rgba(15, 27, 36, .45); z-index: 140; }
  .topbar { padding: 12px 16px; }
  .topbar h1 { font-size: 17px; }
  .content { padding: 16px 16px 40px; }
  .grid2, .grid3, .grid4 { grid-template-columns: 1fr; }
  .auth-split { grid-template-columns: 1fr; }
  .auth-pitch { display: none; }
  .auth-card { padding: 26px 22px; }
  .inbox { grid-template-columns: minmax(0, 1fr); height: 100dvh; }
  .ib-chat { display: none; }
  body.show-chat .ib-list { display: none; }
  body.show-chat .ib-chat { display: flex; height: 100dvh; }
  .chat-head { padding: 8px 10px; gap: 8px; }
  .chat-actions .btn span, .chip span { display: none; }
  .chat-actions .assign { max-width: 110px; }
  .msgs { padding: 12px 10px 8px; }
  .bubble { max-width: 88%; }
  .m-img, .m-video { max-width: 220px; }
  .action-row { grid-template-columns: 1fr 36px; }
  .action-row > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dd { margin-bottom: 8px; }
  .toolbar input, .toolbar select { flex: 1 1 140px; }
  table.t.stack thead { display: none; }
  table.t.stack tr { display: block; border-bottom: 1px solid var(--line); padding: 8px 0; }
  table.t.stack td { display: flex; justify-content: space-between; gap: 10px; border: 0; padding: 4px 0; }
  table.t.stack td[data-l]::before { content: attr(data-l); color: var(--muted); font-size: 12.5px; }
  table.t.stack .actions { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat b { font-size: 21px; }
  .card { padding: 16px; }
}

/* Facebook connect */
.fb-btn { background: #1877F2; border-color: #1877F2; color: #fff; padding: 10px 16px; font-size: 15px; }
.fb-btn:hover { background: #0F65D8; }
.pick-list { display: flex; flex-direction: column; }
.pick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.pick-item { display: flex !important; flex-direction: row !important; align-items: center; gap: 12px !important; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-weight: 500 !important; color: var(--ink) !important; }
.pick-item:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.pick-item b { display: block; font-size: 14.5px; }
.pick-item small { display: block; }
.pick-item input { width: 18px; height: 18px; }
@media (max-width: 900px) { .pick-row { grid-template-columns: 1fr; } }

/* ==========================================================================
   Workflows — list + visual editor
   ========================================================================== */
.wf-list { display: flex; flex-direction: column; gap: 10px; }
.wf-row { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.wf-row-main { display: flex; align-items: flex-start; gap: 12px; flex: 1; min-width: 0; color: inherit; text-decoration: none !important; }
.wf-trig { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--brand-soft); color: var(--brand-2); flex: none; }
.wf-row-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wf-row-text b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-row-main:hover b { color: var(--brand-ink); }
.wf-row-text small { color: var(--muted); }
.wf-mini { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; margin-top: 6px; }
.wf-mini span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: color-mix(in srgb, var(--c) 16%, var(--surface)); color: color-mix(in srgb, var(--c) 72%, var(--ink)); }
.wf-mini i { width: 8px; height: 2px; background: var(--line); border-radius: 2px; }
.wf-mini em { font-style: normal; font-size: 12px; color: var(--muted); }
.wf-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.wf-row-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.wf-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.wf-tpl { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px dashed #C9D1D9; border-radius: var(--radius); padding: 16px; color: inherit; text-decoration: none !important; transition: border-color .15s, box-shadow .15s; }
.wf-tpl:hover { border-color: var(--brand); border-style: solid; box-shadow: var(--shadow); }
.wf-tpl span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-2); margin-bottom: 6px; }
.wf-tpl small { color: var(--muted); line-height: 1.5; }

.wf-ed { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; }
.wf-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line); flex: none; }
.wf-name { flex: 0 1 340px; min-width: 0; font-size: 16px; font-weight: 700; border-color: transparent; background: transparent; padding: 6px 9px; }
.wf-name:hover { border-color: var(--line); }
.wf-body { flex: 1; display: flex; min-height: 0; }
.wf-canvas { flex: 1; min-width: 0; overflow: auto; background-color: #0F1B24; background-image: radial-gradient(#243543 1.2px, transparent 1.2px); background-size: 22px 22px; padding: 30px 16px 120px; }
.wf-flow { display: flex; flex-direction: column; align-items: center; width: 340px; max-width: 100%; margin: 0 auto; }
.wf-cap { font-size: 12px; font-weight: 600; color: #7E92A3; margin-bottom: 8px; letter-spacing: .2px; }
.wf-node { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: start; font: inherit; color: #E8EEF3; background: #17252F; border: 1.5px solid #283B4A; border-radius: 14px; padding: 13px 14px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.wf-node:hover { border-color: #40586B; }
.wf-node.sel { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.wf-node.bad { border-color: #F87171; box-shadow: 0 0 0 4px rgba(248, 113, 113, .14); }
.wf-node.wait { width: auto; min-width: 210px; padding: 9px 14px; border-radius: 99px; align-items: center; }
.wf-node.wait .wf-ico { width: 30px; height: 30px; border-radius: 99px; }
.wf-node.wait .wf-node-body b { display: none; }
.wf-node.wait .wf-node-body small { color: #D5DEE6; font-size: 14px; font-weight: 600; }
.wf-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; flex: none; background: color-mix(in srgb, var(--c) 20%, transparent); color: var(--c); }
.wf-ico.sm { width: 30px; height: 30px; border-radius: 9px; }
.wf-ico.sm .ic { width: 17px; height: 17px; }
.wf-node-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.wf-node-body b { font-size: 14.5px; font-weight: 600; }
.wf-node-body b em, .wf-p-head h3 em { display: inline-block; direction: ltr; margin-inline-start: 4px; font-style: normal; font-weight: 500; color: #7E92A3; font-size: 12.5px; }
.wf-node-body small { color: #9FB0BF; font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wf-node-body img { margin-top: 8px; width: 100%; max-height: 150px; object-fit: cover; border-radius: 9px; background: #0F1B24; }
.wf-err { font-style: normal; font-size: 12.5px; color: #FCA5A5; margin-top: 2px; }
.wf-link { position: relative; display: grid; place-items: center; width: 100%; height: 44px; }
.wf-link::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #2B3F4F; }
.wf-link.last { height: auto; padding-top: 22px; }
.wf-link.last::before { bottom: auto; height: 22px; }
.wf-add { position: relative; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 99px; border: 1.5px solid #3A5163; background: #17252F; color: #9FB0BF; cursor: pointer; padding: 0; transition: background .15s, color .15s, border-color .15s, transform .15s; }
.wf-add:hover, .wf-link.open .wf-add { background: var(--brand); border-color: var(--brand); color: #fff; transform: scale(1.12); }
.wf-add.big { width: auto; height: auto; display: inline-flex; gap: 6px; font: inherit; font-weight: 600; font-size: 13.5px; padding: 8px 16px; border-style: dashed; color: #C6D2DC; }
.wf-add.big:hover, .wf-link.open .wf-add.big { transform: none; }
.wf-menu { position: absolute; top: calc(100% - 4px); left: 50%; transform: translateX(-50%); z-index: 30; width: 250px; background: var(--surface); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .4); padding: 5px; display: flex; flex-direction: column; }
.wf-link.last .wf-menu { top: calc(100% + 6px); }
.wf-menu button { display: flex; align-items: center; gap: 10px; border: 0; background: none; font: inherit; font-weight: 500; color: var(--ink); padding: 6px 8px; border-radius: 8px; cursor: pointer; text-align: start; }
.wf-menu button:hover { background: var(--line-2); }
.wf-menu .wf-ico { background: color-mix(in srgb, var(--c) 16%, var(--surface)); color: color-mix(in srgb, var(--c) 72%, var(--ink)); }
.wf-end { margin-top: 18px; font-size: 12px; color: #6F8496; }

.wf-panel { width: 360px; flex: none; background: var(--surface); border-inline-start: 1px solid var(--line); overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.wf-p-head { display: flex; align-items: center; gap: 10px; }
.wf-p-head h3 { font-size: 16px; flex: 1; }
.wf-p-head .wf-ico { background: color-mix(in srgb, var(--c) 16%, var(--surface)); color: color-mix(in srgb, var(--c) 72%, var(--ink)); }
.wf-p-close { display: none; }
.wf-panel p { margin: 0; }
.wf-trigs { display: flex; flex-direction: column; gap: 8px; }
.wf-trig-opt { display: flex; align-items: flex-start; gap: 10px; text-align: start; font: inherit; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: 11px; padding: 10px 12px; cursor: pointer; }
.wf-trig-opt .ic { color: var(--muted); margin-top: 3px; }
.wf-trig-opt span { display: flex; flex-direction: column; }
.wf-trig-opt small { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.wf-trig-opt:hover { border-color: #C2CCD5; }
.wf-trig-opt.on { border-color: var(--brand); background: var(--brand-soft); }
.wf-trig-opt.on .ic { color: var(--brand-ink); }
.wf-vars { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; }
.wf-vars button { font: inherit; font-size: 12.5px; font-weight: 600; border: 1px solid var(--line); background: var(--line-2); color: var(--ink-2); padding: 2px 10px; border-radius: 99px; cursor: pointer; }
.wf-vars button:hover { border-color: var(--brand); color: var(--brand-2); background: var(--brand-soft); }
.wf-drop { display: flex !important; flex-direction: column; align-items: center !important; gap: 4px !important; text-align: center; border: 1.5px dashed #C2CCD5; border-radius: 12px; padding: 22px 14px; cursor: pointer; color: var(--ink-2); }
.wf-drop:hover { border-color: var(--brand); background: var(--brand-soft); }
.wf-drop.busy, .wf-media.busy { opacity: .5; pointer-events: none; }
.wf-media { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.wf-media img, .wf-file { width: 76px; height: 76px; border-radius: 9px; object-fit: cover; flex: none; background: var(--line-2); display: grid; place-items: center; color: var(--muted); }
.wf-media div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wf-media b { font-size: 13.5px; overflow-wrap: anywhere; }
.wf-media label { font-size: 13px; }
.wf-p-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-2); }
.wf-help { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--ink-2); }

.win-note.wf-note { background: var(--brand-soft); color: var(--brand-2); justify-content: space-between; }
.wf-note span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
#wfBtn { color: #B8860B; }
.qr.wf { flex-direction: row; align-items: center; gap: 10px; }
.qr.wf b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr.wf .ic { color: #B8860B; }
.qr.wf-empty { cursor: default; gap: 4px; padding: 14px; align-items: flex-start; background: none !important; }
.qr.wf-empty .ic { color: #B8860B; }
.qr.wf-empty span { white-space: normal; }
.qr.wf-empty .btn { margin-top: 8px; }
.qr-title { font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 10px 2px; }

@media (max-width: 900px) {
  .wf-row { flex-wrap: wrap; }
  .wf-row-main { flex-basis: 100%; }
  .wf-row-side { flex-direction: row; align-items: center; gap: 8px; flex: 1; }
  .wf-bar { padding: 8px 10px; gap: 6px; flex-wrap: wrap; }
  .wf-name { flex: 1 1 120px; font-size: 15px; }
  .wf-bar .grow { display: none; }
  .wf-bar .btn { padding: 7px 11px; font-size: 13px; }
  .wf-canvas { padding: 22px 12px 160px; }
  .wf-panel { position: fixed; inset-inline: 0; bottom: 0; width: auto; max-height: 72dvh; border: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .35); z-index: 60; transform: translateY(105%); transition: transform .2s; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  body.wf-open .wf-panel { transform: none; }
  .wf-p-close { display: inline-grid; }
  .wf-p-actions { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .wf-node, .wf-add, .wf-panel { transition: none; } }

/* ==========================================================================
   Navigation rail (desktop): icons only, expands over the page on hover
   ========================================================================== */
.theme-btn { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 12px; border-radius: 9px; border: 0; background: none; font: inherit; font-weight: 500; color: #B4C1CC; cursor: pointer; text-align: start; white-space: nowrap; }
.theme-btn:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.theme-btn .sun, .theme-btn .t-light { display: none; }
.side-tools { padding: 6px 10px; }
@media (min-width: 901px) {
  :root { --side-w: 66px; --side-open: 236px; }
  .side { overflow: hidden; transition: width .16s ease, margin .16s ease, box-shadow .16s ease; }
  .side:hover, .side:has(:focus-visible) { width: var(--side-open); margin-inline-end: calc(var(--side-w) - var(--side-open)); box-shadow: -14px 0 40px rgba(0, 0, 0, .28); transition-delay: .14s; z-index: 120; }
  .side .brand { padding: 16px 16px 12px; white-space: nowrap; }
  .side nav { padding: 6px 11px; overflow-x: hidden; }
  .side nav a { padding: 10px 12px; white-space: nowrap; }
  .side nav a.on::before { right: -11px; }
  .side-tools { padding: 6px 11px; }
  .theme-btn { padding: 10px 12px; }
  .side .brand-name, .side nav a > span, .theme-btn > span, .side-foot .me > div, .side-foot .logout { opacity: 0; transition: opacity .12s; }
  .side:hover .brand-name, .side:hover nav a > span, .side:hover .theme-btn > span, .side:hover .side-foot .me > div, .side:hover .side-foot .logout,
  .side:has(:focus-visible) .brand-name, .side:has(:focus-visible) nav a > span, .side:has(:focus-visible) .theme-btn > span, .side:has(:focus-visible) .side-foot .me > div, .side:has(:focus-visible) .side-foot .logout { opacity: 1; transition-delay: .14s; }
  .side-foot { padding: 12px 17px; white-space: nowrap; }
  .side .nav-count { position: absolute; top: 3px; right: 24px; min-width: 17px; height: 17px; font-size: 10.5px; padding: 0 4px; box-shadow: 0 0 0 2px var(--side-bg); }
}

/* ==========================================================================
   Inbox folders (desktop): all / mine / unassigned / lifecycle stages
   ========================================================================== */
.ib-nav { background: var(--surface); border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; overflow-y: auto; min-height: 0; }
.ib-nav h2 { font-size: 17px; padding: 2px 8px 10px; }
.ib-nav h5 { margin: 14px 0 4px; padding: 0 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.ib-nav button { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink-2); padding: 7px 8px; border-radius: 8px; cursor: pointer; text-align: start; }
.ib-nav button:hover { background: var(--line-2); }
.ib-nav button.on { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.ib-nav button .ic { flex: none; color: var(--muted); }
.ib-nav button.on .ic { color: inherit; }
.ib-nav button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-nav button em { font-style: normal; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.ib-nav button.on em { color: inherit; }
@media (max-width: 1180px) { .ib-nav { display: none; } }
@media (min-width: 1181px) and (max-width: 1400px) {
  .inbox { grid-template-columns: 178px 300px minmax(0, 1fr) 272px; }
  .inbox:has(.ib-info:empty) { grid-template-columns: 178px 300px minmax(0, 1fr); }
}
.ib-nav .lc { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; margin: 0 4px; }

/* ==========================================================================
   Instant page switches (prerendered on hover) with a short cross-fade
   ========================================================================== */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .11s; }
.side { view-transition-name: side; }
::view-transition-group(side) { animation: none; }
::view-transition-old(side) { display: none; }
::view-transition-new(side) { animation: none; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ==========================================================================
   Dark theme
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand: #3B82F6;
  --brand-2: #93B4FF;
  --brand-hover: #2F6FE0;
  --brand-ink: #6EA0FF;
  --brand-soft: rgba(59, 130, 246, .16);
  --ink: #ECECEE;
  --ink-2: #C4C4CC;
  --muted: #8E8E99;
  --line: #2A2A31;
  --line-2: #212127;
  --bg: #111114;
  --surface: #18181C;
  --danger: #F97066;
  --danger-soft: rgba(240, 68, 56, .17);
  --warn: #FDB022;
  --warn-soft: rgba(247, 144, 9, .16);
  --ok: #47CD89;
  --ok-soft: rgba(23, 178, 106, .17);
  --note: #332C12;
  --note-line: #6E5D20;
  --shadow: none;
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, .6);
  --field-line: #34343C;
  --subtle: #1E1E23;
  --chat-bg: #111114;
  --bubble-out: #1F3B70;
  --float: rgba(255, 255, 255, .06);
  --violet: #B7A2FF;
  --violet-soft: rgba(141, 110, 255, .17);
  --info: #A4BCFD;
  --info-soft: rgba(97, 114, 243, .17);
  --side-bg: #18181C;
}
[data-theme="dark"] .tag { color: color-mix(in srgb, var(--t) 50%, #fff); background: color-mix(in srgb, var(--t) 20%, var(--surface)); border-color: color-mix(in srgb, var(--t) 40%, var(--surface)); }
[data-theme="dark"] .side { border-inline-end: 1px solid var(--line-2); }
[data-theme="dark"] .theme-btn .sun, [data-theme="dark"] .theme-btn .t-light { display: inline; }
[data-theme="dark"] .theme-btn .moon, [data-theme="dark"] .theme-btn .t-dark { display: none; }
[data-theme="dark"] input.wf-name { background: transparent; }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: #141418; }
[data-theme="dark"] .composer textarea { background: transparent; }
[data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus { border-color: var(--brand-ink); box-shadow: 0 0 0 3px rgba(59, 130, 246, .22); }
[data-theme="dark"] ::placeholder { color: #66666F; }
[data-theme="dark"] .btn:hover { background: #24242A; }
[data-theme="dark"] .btn.primary:hover { background: var(--brand-hover); }
[data-theme="dark"] .btn.danger, [data-theme="dark"] .btn.success, [data-theme="dark"] .alert { border-color: transparent; }
[data-theme="dark"] .btn.danger:hover { background: var(--danger-soft); }
[data-theme="dark"] .alert.err, [data-theme="dark"] .m-err { color: #FDA29B; }
[data-theme="dark"] .toast { background: #2A2A31; }
[data-theme="dark"] .toast.ok { background: #067647; }
[data-theme="dark"] .toast.err { background: #B42318; }
[data-theme="dark"] .empty .ic, [data-theme="dark"] .ib-placeholder { color: #55555E; }
[data-theme="dark"] .dot { background: #4A4A53; }
[data-theme="dark"] .ch-add, [data-theme="dark"] .wf-tpl, [data-theme="dark"] .wf-drop { border-color: #3A3A42; }
[data-theme="dark"] .wf-trig-opt:hover { border-color: #45454E; }
[data-theme="dark"] .switch span { background: #3A3A42; }
[data-theme="dark"] .composer.noting, [data-theme="dark"] .composer.noting textarea { background: #272210; }
[data-theme="dark"] .msg.note .m-who, [data-theme="dark"] .composer.noting .comp-tabs button.on { color: #F1D56B; }
[data-theme="dark"] .msg.in .bubble { background: #222228; }
[data-theme="dark"] .bubble { box-shadow: none; }
[data-theme="dark"] .st { color: #85858F; }
[data-theme="dark"] .st.read { color: #53B1FD; }
[data-theme="dark"] .win-note.wf-note { background: var(--brand-soft); color: var(--brand-2); }
[data-theme="dark"] #wfBtn, [data-theme="dark"] .qr.wf .ic, [data-theme="dark"] .qr.wf-empty .ic { color: #F5C451; }
[data-theme="dark"] .imp-bar { background: #4A3A10; color: #FDE7A8; }
[data-theme="dark"] .imp-bar a { color: #FFF; }
[data-theme="dark"] .avatar[style] { filter: saturate(.75) brightness(.86); }
[data-theme="dark"] .wf-canvas { background-color: #0F0F12; }
[data-theme="dark"] .wf-menu { border: 1px solid var(--line); }
[data-theme="dark"] .lightbox { background: rgba(0, 0, 0, .92); }
[data-theme="dark"] .modal { background: rgba(0, 0, 0, .6); }
[data-theme="dark"] .plan.current { box-shadow: 0 0 0 2px var(--brand-soft); }
[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #33333B; border-radius: 6px; border: 2px solid var(--bg); }
[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }

/* Ask for browser notifications (inbox) */
.notify-ask { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-ink); font-size: 12.5px; line-height: 1.5; }
.notify-ask span { flex: 1; }
.notify-ask .btn { flex: none; }

/* ==========================================================================
   Contact fields (page «حقول جهات الاتصال» + inbox info panel)
   ========================================================================== */
.vis-form { display: inline; }
.vis { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--muted); padding: 4px 6px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.vis:hover { background: var(--line-2); }
.vis.fixed { cursor: default; background: none; }
.vis i { width: 26px; height: 15px; border-radius: 99px; background: var(--line); position: relative; flex: none; transition: background .15s; }
.vis i::after { content: ""; position: absolute; top: 2px; right: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; transition: right .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.vis.on { color: var(--ink-2); }
.vis.on i { background: var(--brand); }
.vis.on i::after { right: 13px; }
.vis.fixed.on i { opacity: .55; }
.fields-t tr.sys td { background: var(--subtle); }
.fields-t td code { font-size: 12.5px; }
.icon-btn.danger-ic:hover { color: var(--danger); background: var(--danger-soft); }
.cf-sec h4 { display: flex; align-items: center; justify-content: space-between; }
.cf-manage { font-size: 12px; font-weight: 500; }
.cf-empty a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.cf-check { flex-direction: row !important; align-items: center; gap: 8px; }
#info .bad { border-color: var(--danger) !important; box-shadow: 0 0 0 3px var(--danger-soft); }

/* ==========================================================================
   Lifecycle (dashboard cards, management page, history, inbox folders, report)
   ========================================================================== */
.lc-dash-head { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; flex-wrap: wrap; }
.lc-dash-head h3 { font-size: 16px; }
.lc-dash-head .btn { margin-inline-start: auto; }
.lc-dash { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px; scroll-snap-type: x proximity; }
.lc-card { flex: 0 0 186px; margin: 0; display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none !important; padding: 14px 16px; scroll-snap-align: start; transition: border-color .15s, transform .15s; }
.lc-card:hover { border-color: var(--brand); transform: translateY(-1px); }
.lc-card small { color: var(--ink-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-card b { font-size: 24px; font-weight: 700; letter-spacing: -.3px; }
.lc-card .delta { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lc-card.lost { background: linear-gradient(0deg, var(--danger-soft), var(--danger-soft)), var(--surface); }
.lc-card.lost:hover { border-color: var(--danger); }
.lc-chg { font-weight: 700; padding: 1px 6px; border-radius: 6px; background: var(--line-2); color: var(--muted); }
.lc-chg:empty { display: none; }
.lc-chg.up { background: var(--ok-soft); color: var(--ok); }
.lc-chg.down { background: var(--danger-soft); color: var(--danger); }

.lc-list { display: flex; flex-direction: column; gap: 8px; min-height: 20px; }
.lc-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.lc-row:hover { border-color: var(--line-3, var(--muted)); }
.lc-move { display: flex; flex-direction: column; }
.lc-move .icon-btn { padding: 0 4px; height: 16px; font-size: 12px; line-height: 1; }
.lc-row input.lc-emoji { width: 46px; text-align: center; font-size: 18px; padding: 6px 4px; flex: none; }
.lc-row input.lc-name { flex: 1; min-width: 0; }
.lc-n { font-size: 12px; white-space: nowrap; flex: none; }
.lc-palette { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.lc-palette button { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 18px; cursor: pointer; }
.lc-palette button:hover { border-color: var(--brand); background: var(--brand-soft); }
.lc-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 10px; }
.lc-ev { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.lc-ev:last-child { border-bottom: 0; }
.ib-nav .lc-emo { font-style: normal; width: 18px; text-align: center; flex: none; font-size: 14px; }
.ib-nav h5 { display: flex; align-items: center; justify-content: space-between; }
.ib-nav h5 a { font-weight: 500; font-size: 11.5px; }
.bar.bad i { background: var(--danger); }
table.t tr.lc-sep td { background: var(--danger-soft); color: var(--danger); font-weight: 600; font-size: 13px; }
@media (max-width: 700px) { .lc-card { flex-basis: 160px; } }

/* Workflow editor: stage checklists (lifecycle trigger filter / condition step) */
.wf-stages { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; max-height: 240px; overflow-y: auto; }
.wf-stages label.check { padding: 5px 4px; border-radius: 6px; font-size: 13.5px; }
.wf-stages label.check:hover { background: var(--line-2); }
.wf-stages label.check.lost { color: var(--danger); }

/* ==========================================================================
   v2 look: icon rail, compact header, flat cards, blue accent
   (loaded last, so it refines the components above without rewriting them)
   ========================================================================== */
:root { --rail: 60px; --side-ink: #6B7280; --side-ink-hover: #111827; --side-hover: #F3F4F6; --tip-bg: #111827; }
:root[data-theme="dark"] { --side-ink: #9A9AA5; --side-ink-hover: #FFFFFF; --side-hover: #24242A; --tip-bg: #2E2E36; }
body { font-size: 14px; }
h1, h2, h3, h4 { font-weight: 600; }

/* ---- side rail ---- */
.side { color: var(--side-ink); border-inline-end: 1px solid var(--line); }
a.brand { color: var(--ink); }
.logo-mark { background: linear-gradient(135deg, #4C8DFF 0%, #2F6FED 55%, #1E4FC7 100%); border-radius: 10px; box-shadow: 0 2px 6px rgba(47, 111, 237, .35); }
.side nav a { color: var(--side-ink); }
.side nav a:hover { background: var(--side-hover); color: var(--side-ink-hover); }
.side nav a.on { background: var(--brand-soft); color: var(--brand-ink); }
.side nav a.on::before { background: var(--brand); }
.theme-btn { color: var(--side-ink); }
.theme-btn:hover { background: var(--side-hover); color: var(--side-ink-hover); }
.side-foot { border-top-color: var(--line); }
.side-foot .me b { color: var(--ink); }
.side-foot .me small, .side-foot .logout { color: var(--muted); }
.side-foot .logout:hover { background: var(--side-hover); color: var(--ink); }
.nav-count { background: #F04438; }

@media (min-width: 901px) {
  :root { --side-w: var(--rail); }
  .side, .side:hover, .side:has(:focus-visible) { width: var(--rail); margin-inline-end: 0; box-shadow: none; overflow: visible; transition: none; }
  .side .brand { padding: 14px 0 12px; justify-content: center; }
  .side .brand-name { display: none; }
  .side nav { padding: 4px 0; overflow: visible; align-items: center; gap: 4px; }
  .side nav a { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 10px; }
  .side nav a.on::before { right: -10px; top: 9px; bottom: 9px; }
  .side-tools { padding: 4px 0; display: flex; justify-content: center; }
  .theme-btn { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 10px; }
  .side-foot { flex-direction: column; padding: 10px 0 12px; gap: 6px; }
  .side-foot .me { flex: none; }
  .side-foot .me > div { display: none; }
  .side .nav-count { top: 2px; right: 2px; box-shadow: 0 0 0 2px var(--side-bg); }
  /* labels become tooltips shown beside the rail */
  .side nav a > span, .theme-btn > span, .side-foot .logout::after {
    position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); opacity: 0; pointer-events: none;
    background: var(--tip-bg); color: #fff; font-size: 12.5px; font-weight: 500; padding: 5px 10px; border-radius: 7px; white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18); transition: opacity .1s; z-index: 300;
  }
  .theme-btn { position: relative; }
  .side:hover nav a > span, .side:hover .theme-btn > span, .side:has(:focus-visible) nav a > span, .side:has(:focus-visible) .theme-btn > span { opacity: 0; transition-delay: 0s; }
  .side nav a:hover > span, .side nav a:focus-visible > span, .theme-btn:hover > span, .theme-btn:focus-visible > span { opacity: 1; }
  .side-foot .logout { opacity: 1 !important; position: relative; }
  .side .theme-btn .t-dark, .side .theme-btn .t-light { display: none; }
  .side .theme-btn:hover .t-dark { display: inline; }
  [data-theme="dark"] .side .theme-btn:hover .t-dark { display: none; }
  [data-theme="dark"] .side .theme-btn:hover .t-light { display: inline; }
}

/* ---- header & page ---- */
.topbar { padding: 0 24px; min-height: 56px; gap: 10px; }
.topbar h1 { font-size: 17px; font-weight: 700; }
.content { padding: 20px 24px 48px; max-width: 1480px; }
.section-title { font-size: 16px; }

/* ---- surfaces ---- */
.card { box-shadow: none; padding: 18px 20px; }
.card > h3, .card-head h3 { font-size: 15px; }
.stats { gap: 12px; }
.stat small { font-size: 13px; }
.stat b { font-size: 24px; }
.modal-box { border-radius: 14px; }
.wf-row, .wf-tpl { box-shadow: none; }
.wf-trig, .wf-tpl span, .rule .ic-wrap { background: var(--brand-soft); color: var(--brand-ink); }

/* ---- buttons & fields ---- */
.btn { font-weight: 500; font-size: 13.5px; padding: 0 14px; height: 36px; border-color: var(--field-line); }
.btn.sm { height: 30px; padding: 0 10px; font-size: 12.5px; }
.btn.primary { border-color: transparent; box-shadow: 0 1px 2px rgba(47, 111, 237, .25); }
.btn.success { border-color: transparent; }
.btn.danger { border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.fb-btn { height: 40px; }
input, select { min-height: 36px; }
.info-sec input, .info-sec select, .ib-search select, .chat-actions .assign, .toolbar input, .toolbar select { min-height: 32px; }
input[type=checkbox], input[type=radio] { min-height: 0; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(47, 111, 237, .18); }
.icon-btn { border-radius: 8px; width: 34px; height: 34px; }
.pill { border-radius: 6px; padding: 2px 8px; font-weight: 500; }
.pill.brand { color: var(--brand-ink); }

/* ---- tables ---- */
table.t { font-size: 13.5px; }
table.t th { padding: 10px 14px; font-size: 12.5px; font-weight: 500; background: var(--subtle); border-bottom: 1px solid var(--line); }
table.t td { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.card > .table-wrap:first-child, .card > table.t:first-child { margin-top: -6px; }

/* ---- inbox ---- */
.ib-nav { padding: 12px 8px; }
.ib-nav h2 { font-size: 16px; font-weight: 700; padding: 4px 8px 12px; }
.ib-nav button { padding: 7px 10px; font-size: 13.5px; }
.ib-nav button.on { background: var(--brand-soft); color: var(--brand-ink); }
.ib-list-head { padding: 12px; }
.ib-list-head h2 { font-size: 16px; font-weight: 700; }
.ib-items { padding: 4px 6px; }
.ib-item { border-bottom: 0; border-radius: 10px; padding: 11px 10px; margin: 1px 0; }
.ib-item:hover { background: var(--subtle); }
.ib-item.on { background: var(--brand-soft); }
.ib-item.on::before { display: none; }
.ib-item .count { background: var(--brand); }
.chat-head { min-height: 56px; padding: 8px 16px; }
.msgs { padding: 18px 24px 10px; }
.bubble { border-radius: 12px; box-shadow: none; padding: 8px 12px 6px; }
.msg.in .bubble { border: 1px solid var(--line); }
.msg.out .bubble { border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent); }
[data-theme="dark"] .msg.in .bubble { border-color: transparent; }
[data-theme="dark"] .msg.out .bubble { border-color: transparent; color: #F2F6FF; }
.m-who { color: var(--brand-ink); }
.composer { margin: 0 14px 14px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 8px; }
.composer:focus-within { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); box-shadow: 0 0 0 3px var(--brand-soft); }
.comp-tabs button.on { color: var(--brand-ink); }
.info-head { padding: 20px 16px 14px; }
.info-sec h4 { font-size: 12.5px; text-transform: none; }
.qr.on, .qr:hover { background: var(--brand-soft); }

/* ---- auth ---- */
.auth-split, .auth-card.solo, .auth-card.wide { border-radius: 16px; }
.pitch-list .ic { background: rgba(255, 255, 255, .16); }
@media (min-width: 901px) {
  .side-foot .logout::after { content: attr(title); }
  .side-foot .logout:hover::after { opacity: 1; }
}
@media (max-width: 900px) { .composer { margin: 0 8px 8px; } }

/* ==========================================================================
   v2.1 polish: logo, greeting, charts, funnel, empty states, skeletons, motion
   ========================================================================== */
.brand-logo { flex: none; display: block; filter: drop-shadow(0 2px 5px rgba(47, 111, 237, .3)); }
.auth-brand.light .brand-logo { filter: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* greeting */
.hello { margin: -4px 0 18px; }
.hello h2 { font-size: 21px; font-weight: 700; }
.hello p { margin: 2px 0 0; }

/* charts (drawn by W.renderCharts) */
.chart { position: relative; width: 100%; min-height: 120px; }
.chart svg { display: block; overflow: visible; }
.ch-grid { stroke: var(--line); stroke-width: 1; }
.ch-tick { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.ch-area { fill: var(--brand); opacity: .1; }
.ch-line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ch-dot { fill: var(--brand); stroke: var(--surface); stroke-width: 2; }
.ch-end { fill: var(--ink); font-size: 12px; font-weight: 700; font-family: var(--font); }
.ch-cross { stroke: var(--muted); stroke-width: 1; opacity: .5; }
.ch-tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--surface); border-radius: 8px; padding: 5px 10px; font-size: 12.5px; white-space: nowrap; box-shadow: var(--shadow-lg); z-index: 5; }
.ch-tip small { display: block; opacity: .75; font-size: 11.5px; }
[data-theme="dark"] .ch-tip { background: #2E2E36; color: #fff; }

/* lifecycle funnel (reports) */
.funnel { display: flex; flex-direction: column; gap: 10px; margin: 2px 0 18px; }
.fn-row { display: grid; grid-template-columns: minmax(110px, 160px) 1fr 56px 44px; align-items: center; gap: 12px; }
.fn-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-track { height: 22px; display: flex; }
.fn-track i { display: block; height: 100%; background: var(--brand); border-radius: 4px 0 0 4px; transition: width .4s ease; }
.fn-row.lost .fn-track i { background: color-mix(in srgb, var(--danger) 75%, var(--surface)); }
.fn-val { font-size: 14px; text-align: end; }
.fn-pct { text-align: end; }
@media (max-width: 700px) { .fn-row { grid-template-columns: 90px 1fr 44px; } .fn-pct { display: none; } }

/* empty states */
.empty > .ic:first-child { display: block; margin: 0 auto 12px; width: 56px; height: 56px; padding: 15px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); }
.empty > .ic:first-child + br { display: none; }
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 48px 22px; color: var(--muted); }
.empty-state .es-ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); margin-bottom: 6px; }
.empty-state b { color: var(--ink); font-size: 15px; }
.empty-state p { margin: 0 0 8px; font-size: 13px; max-width: 260px; line-height: 1.6; }
.ib-placeholder { gap: 10px; }
.ph-art { position: relative; width: 150px; height: 110px; margin-bottom: 8px; }
.ph-bubble { position: absolute; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.ph-bubble.a { width: 92px; height: 38px; top: 6px; right: 0; border-top-right-radius: 4px; }
.ph-bubble.b { width: 110px; height: 38px; top: 52px; left: 0; background: var(--brand); border-color: transparent; border-top-left-radius: 4px; opacity: .9; }
.ph-bubble.c { width: 58px; height: 30px; top: 78px; right: 18px; display: flex; align-items: center; justify-content: center; gap: 4px; border-top-right-radius: 4px; }
.ph-bubble.c i, .st.sending i, .pm-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: dot 1.2s infinite ease-in-out; }
.ph-bubble.c i:nth-child(2), .st.sending i:nth-child(2), .pm-typing i:nth-child(2) { animation-delay: .15s; }
.ph-bubble.c i:nth-child(3), .st.sending i:nth-child(3), .pm-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-3px); opacity: 1; } }
.ph-tips { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; font-size: 12.5px; color: var(--muted); margin-top: 6px; }
kbd { font-family: inherit; font-size: 11.5px; background: var(--surface); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 6px; color: var(--ink-2); }

/* skeletons */
.sk { display: block; height: 11px; border-radius: 6px; background: linear-gradient(90deg, var(--line-2) 0%, var(--line) 50%, var(--line-2) 100%); background-size: 200% 100%; animation: shimmer 1.3s infinite linear; }
.sk.sm { height: 9px; margin-top: 7px; }
.sk-av { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.sk-item { display: flex; align-items: center; gap: 11px; padding: 12px 10px; }
.sk-item > span { flex: 1; }
.sk-msgs { gap: 10px; }
.sk-b { height: 38px; border-radius: 12px; }
.sk-b.out { align-self: flex-end; }
.chat-head .sk-av { width: 38px; height: 38px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* messages: grouping, entry, sending */
.msg.cont { margin-top: -1px; }
.msg.in.cont .bubble { border-top-right-radius: 5px; }
.msg.out.cont .bubble, .msg.note.cont .bubble { border-top-left-radius: 5px; }
.msg.in:has(+ .msg.in.cont) .bubble { border-bottom-right-radius: 5px; }
.msg.out:has(+ .msg.out.cont) .bubble { border-bottom-left-radius: 5px; }
.msg.enter { animation: msgIn .24s cubic-bezier(.2, .8, .3, 1); }
.evt.enter { animation: msgIn .24s ease-out; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.msg.pending .bubble { opacity: .78; }
.st.sending { gap: 2px; align-items: center; height: 12px; }
.st.sending i { width: 4px; height: 4px; background: currentColor; }
.ib-item.flash { animation: flash 1.6s ease-out; }
@keyframes flash { 0% { background: color-mix(in srgb, var(--brand) 28%, transparent); } 100% { background: transparent; } }
.ib-item.on.flash { animation: none; }

/* channel badges in their official colours */
.ch-badge { box-shadow: 0 0 0 2px var(--surface); }
.ch-messenger { background: linear-gradient(45deg, #0099FF, #A033FF 60%, #FF5280 90%) !important; }
.ch-instagram { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%) !important; }
.ch-whatsapp { background: #25D366 !important; }
.ch-telegram { background: linear-gradient(180deg, #2AABEE, #229ED9) !important; }
.ch-webchat { background: var(--brand) !important; }

/* login: product picture */
.pitch-mock { display: grid; grid-template-columns: 1fr 1.15fr; gap: 8px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); border-radius: 14px; padding: 10px; margin: 6px 0 4px; }
.pm-list { display: flex; flex-direction: column; gap: 4px; }
.pm-item { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 9px; position: relative; }
.pm-item.on { background: rgba(255, 255, 255, .16); }
.pm-item b { display: block; font-size: 12px; color: #fff; }
.pm-item small { display: block; font-size: 10.5px; opacity: .8; white-space: nowrap; }
.pm-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; background: hsl(var(--h) 70% 92%); color: hsl(var(--h) 50% 35%); }
.pitch-mock .ch-dot { position: absolute; top: 24px; right: 24px; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px #2557D6; }
.pm-chat { background: rgba(255, 255, 255, .95); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 5px; }
.pm-msg { font-size: 11px; line-height: 1.5; padding: 5px 8px; border-radius: 10px; max-width: 88%; }
.pm-msg.in { background: #F1F2F4; color: #111827; align-self: flex-start; border-top-right-radius: 3px; }
.pm-msg.out { background: #2F6FED; color: #fff; align-self: flex-end; border-top-left-radius: 3px; }
.pm-typing { align-self: flex-start; display: flex; gap: 3px; background: #F1F2F4; padding: 7px 9px; border-radius: 10px; }
.pm-typing i { background: #9CA3AF; }
.pitch-list.compact { gap: 6px; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .msg.enter, .evt.enter, .ib-item.flash, .sk, .ph-bubble.c i, .st.sending i, .pm-typing i { animation: none !important; }
}

/* Cards with buttons (workflow step) shown inside the conversation */
.m-cards { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 4px; max-width: min(620px, 70vw); }
.m-card { flex: 0 0 200px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; color: var(--ink); }
.m-card img { width: 100%; height: 112px; object-fit: cover; display: block; }
.m-card b { padding: 8px 10px 0; font-size: 13.5px; }
.m-card small { padding: 2px 10px 6px; color: var(--muted); font-size: 12px; }
.m-card-btn { border-top: 1px solid var(--line-2); padding: 7px 10px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--brand-ink); }
.msg .bubble:has(.m-cards) { background: transparent; border: 0; padding: 0; }

/* Workflow editor: cards with buttons */
.wf-card { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 9px; background: var(--subtle); }
.wf-card-head { display: flex; align-items: center; gap: 2px; }
.wf-card-head .icon-btn { width: 28px; height: 28px; }
.wf-card-img { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.wf-card-img img { width: 100%; max-height: 140px; object-fit: cover; border-radius: 10px; }
.wf-drop.sm { padding: 12px; gap: 2px; }
.wf-btn { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px dashed var(--field-line); border-radius: 10px; background: var(--surface); }
.wf-btn .row input { flex: 1; }

/* ==========================================================================
   Integrations page
   ========================================================================== */
.tabs-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 18px; overflow-x: auto; }
.tabs-bar a { padding: 9px 14px; color: var(--muted); font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none !important; display: inline-flex; align-items: center; gap: 6px; }
.tabs-bar a:hover { color: var(--ink); }
.tabs-bar a.on { color: var(--brand-ink); border-bottom-color: var(--brand); }
.int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-bottom: 18px; }
.int-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; color: inherit; text-decoration: none !important; transition: border-color .15s, transform .15s; }
.int-card:hover { border-color: var(--brand); transform: translateY(-1px); }
.int-card b { font-size: 15px; }
.int-card small { line-height: 1.6; flex: 1; }
.int-logo { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: var(--c); color: #fff; font-weight: 800; font-size: 17px; margin-bottom: 4px; box-shadow: 0 3px 8px color-mix(in srgb, var(--c) 35%, transparent); }
.int-hook { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.int-hook:last-child { border-bottom: 0; }
.int-hook.off { opacity: .6; }
.int-events { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.int-events code { color: var(--muted); }
pre.code { background: var(--subtle); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 12.5px; line-height: 1.55; overflow-x: auto; white-space: pre; margin: 8px 0 0; text-align: left; }
.help-card summary { cursor: pointer; }
.api-ep { padding: 12px 0; border-bottom: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 3px; }
.api-ep:last-child { border-bottom: 0; }
.api-m { display: inline-block; min-width: 54px; text-align: center; font-size: 11.5px; font-weight: 700; padding: 2px 6px; border-radius: 6px; font-family: ui-monospace, Menlo, monospace; }
.api-m.get { background: var(--ok-soft); color: var(--ok); }
.api-m.post { background: var(--brand-soft); color: var(--brand-ink); }
.api-m.patch { background: var(--warn-soft); color: var(--warn); }
.wf-adv { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.wf-adv summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.wf-adv[open] summary { margin-bottom: 8px; }
.wf-adv label { margin-bottom: 8px; }

/* ==========================================================================
   Installable app + phone layout: bottom navigation, voice recording
   ========================================================================== */
.bottom-nav { display: none; }
.install-btn .ic { color: var(--brand-ink); }
.rec-bar { display: flex; align-items: center; gap: 8px; padding: 6px 2px; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: pulse 1s infinite; flex: none; }
#micBtn:hover { color: var(--danger); }
@media (max-width: 900px) {
  .bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 130; background: var(--surface); border-top: 1px solid var(--line); padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); justify-content: space-around; box-shadow: 0 -4px 16px rgba(0, 0, 0, .05); }
  .bottom-nav a, .bottom-nav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0 4px; border: 0; background: none; font: inherit; font-size: 11px; font-weight: 600; color: var(--muted); text-decoration: none !important; position: relative; border-radius: 10px; cursor: pointer; }
  .bottom-nav a.on { color: var(--brand-ink); }
  .bottom-nav a.on .ic { background: var(--brand-soft); border-radius: 99px; padding: 2px 14px; width: auto; box-sizing: content-box; }
  .bottom-nav .nav-count { position: absolute; top: 2px; right: calc(50% - 22px); min-width: 17px; height: 17px; font-size: 10.5px; padding: 0 4px; box-shadow: 0 0 0 2px var(--surface); }
  body:not(.page-full) .main { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.page-full .ib-list { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  body.show-chat .bottom-nav, body.nav-open .bottom-nav { display: none; }
  body.show-chat .ib-chat { padding-bottom: env(safe-area-inset-bottom); }
}
/* Installed app: respect the phone notch / home bar */
.standalone .topbar { padding-top: env(safe-area-inset-top); }
.standalone .chat-head, .standalone .ib-list-head { padding-top: max(8px, env(safe-area-inset-top)); }

/* ==========================================================================
   v3 look: soft gradient backdrop, floating rounded panels, glass rail,
   dark primary buttons, folders menu, airy chat. Loaded last: refines all of the above.
   ========================================================================== */
:root {
  --page-grad:
    radial-gradient(1100px 650px at 100% -5%, #C9EEEC 0%, transparent 60%),
    radial-gradient(900px 700px at -5% 30%, #E4E1FA 0%, transparent 60%),
    radial-gradient(1000px 600px at 45% 115%, #FBE2D8 0%, transparent 60%),
    radial-gradient(800px 600px at 90% 80%, #DCE8FB 0%, transparent 60%),
    #EEF2F7;
  --panel: #FFFFFF;
  --glass: rgba(255, 255, 255, .55);
  --glass-strong: rgba(255, 255, 255, .78);
  --glass-line: rgba(255, 255, 255, .75);
  --panel-shadow: 0 10px 40px rgba(30, 41, 59, .08), 0 1px 2px rgba(30, 41, 59, .04);
  --ink-btn: #111827;
  --ink-btn-hover: #1F2937;
  --bubble-in: #F1F2F4;
  --bubble-out-v3: #4F7DF3;
  --r-xl: 24px;
}
:root[data-theme="dark"] {
  --page-grad:
    radial-gradient(1100px 650px at 100% -5%, #0F2A2C 0%, transparent 60%),
    radial-gradient(900px 700px at -5% 30%, #1C1B3A 0%, transparent 60%),
    radial-gradient(1000px 600px at 45% 115%, #2A1A1C 0%, transparent 60%),
    radial-gradient(800px 600px at 90% 80%, #14213A 0%, transparent 60%),
    #0D0E12;
  --panel: #17171B;
  --glass: rgba(28, 28, 34, .55);
  --glass-strong: rgba(28, 28, 34, .82);
  --glass-line: rgba(255, 255, 255, .06);
  --panel-shadow: 0 10px 40px rgba(0, 0, 0, .45);
  --ink-btn: #F3F4F6;
  --ink-btn-hover: #FFFFFF;
  --bubble-in: #24242B;
  --bubble-out-v3: #3B6FE8;
}
body { background: var(--page-grad); background-attachment: fixed; }

/* ---- primary actions: ink buttons ---- */
.btn.primary { background: var(--ink-btn); border-color: transparent; color: var(--panel); box-shadow: 0 2px 6px rgba(17, 24, 39, .18); border-radius: 10px; }
.btn.primary:hover { background: var(--ink-btn-hover); }
[data-theme="dark"] .btn.primary { color: #111827; }
[data-theme="dark"] .btn.primary:hover { background: #fff; }
.btn { border-radius: 10px; }
.icon-btn { border-radius: 10px; }

/* ---- logo: ink tile ---- */
.side .brand-logo rect, .auth-v3 .brand-logo rect { fill: #111827; }
.side .brand-logo, .auth-v3 .brand-logo { filter: none; }
[data-theme="dark"] .side .brand-logo rect { fill: #F3F4F6; }
[data-theme="dark"] .side .brand-logo path:first-of-type { fill: #111827; }

@media (min-width: 901px) {
  .shell { padding: 14px; gap: 14px; min-height: 100vh; }
  /* glass rail */
  .side { position: sticky; top: 14px; height: calc(100vh - 28px); border-radius: var(--r-xl); background: var(--glass); border: 1px solid var(--glass-line);
    backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); box-shadow: 0 8px 30px rgba(30, 41, 59, .06); }
  .side nav a, .theme-btn { border-radius: 13px; width: 42px; height: 42px; }
  .side nav a:hover, .theme-btn:hover { background: var(--glass-strong); }
  .side nav a.on { background: var(--panel); color: var(--ink); box-shadow: 0 2px 10px rgba(30, 41, 59, .1); }
  .side nav a.on::before { display: none; }
  .side-foot { border-top: 0; }
  /* the page sits on a floating panel */
  .main { background: var(--panel); border-radius: var(--r-xl); box-shadow: var(--panel-shadow); border: 1px solid var(--glass-line); overflow: clip; min-height: calc(100vh - 28px); }
  body.page-full .main { height: calc(100vh - 28px); }
  body:has(.imp-bar).page-full .main { height: calc(100vh - 62px); }
  .inbox { height: 100%; }
}
.topbar { background: transparent; border-bottom: 1px solid var(--line-2); }
.content { padding: 22px 26px 48px; }
.card { border-radius: 18px; border-color: var(--line-2); }
.modal-box { border-radius: 20px; }
.modal { backdrop-filter: blur(3px); }
.lc-card, .int-card, .wf-row, .wf-tpl { border-radius: 18px; }
table.t th { background: transparent; }
table.t { border-radius: 12px; }

/* ==========================================================================
   Inbox v3
   ========================================================================== */
@media (min-width: 901px) {
  body.page-full .main { background: var(--glass); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); }
}
.inbox { grid-template-columns: 340px minmax(0, 1fr) 300px; position: relative; }
@media (min-width: 1181px) { .inbox:has(.ib-info:empty) { grid-template-columns: 340px minmax(0, 1fr); } }
@media (min-width: 1181px) and (max-width: 1400px) {
  .inbox { grid-template-columns: 310px minmax(0, 1fr) 272px; }
  .inbox:has(.ib-info:empty) { grid-template-columns: 310px minmax(0, 1fr); }
}
.ib-list { background: transparent; border-inline-end: 1px solid var(--glass-line); }
.ib-list-head { border-bottom: 0; padding: 16px 14px 8px; }
.folder-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer; padding: 4px 6px; border-radius: 10px; margin-inline-start: -6px; flex: 1; min-width: 0; }
.folder-btn h2 { font-size: 20px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.folder-btn:hover { background: var(--glass-strong); }
.folder-btn .ic { flex: none; color: var(--muted); transition: transform .15s; }
body.ib-menu-open .folder-btn .ic { transform: rotate(180deg); }
.ib-search input, .ib-search select { background: var(--glass-strong); border-color: var(--glass-line); border-radius: 12px; }
.ib-items { padding: 4px 8px; }
.ib-item { border-radius: 14px; }
.ib-item:hover { background: var(--glass-strong); }
.ib-item.on { background: var(--panel); box-shadow: 0 2px 12px rgba(30, 41, 59, .08); }
.ib-item .count { background: var(--bubble-out-v3); }
.ib-item.unread::after { content: ""; position: absolute; left: 10px; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--bubble-out-v3); display: none; }

/* folders menu (all widths) */
.ib-nav { display: flex !important; position: absolute; top: 62px; right: 12px; width: 280px; max-height: min(70vh, 560px); z-index: 60; background: var(--panel);
  border: 1px solid var(--line-2); border-radius: 18px; box-shadow: 0 18px 50px rgba(30, 41, 59, .18); padding: 8px; opacity: 0; transform: translateY(-6px) scale(.98);
  pointer-events: none; transition: opacity .14s, transform .14s; }
body.ib-menu-open .ib-nav { opacity: 1; transform: none; pointer-events: auto; }
.ib-nav h5 { margin: 10px 0 2px; padding: 6px 10px 2px; border-top: 1px solid var(--line-2); font-size: 11.5px; }
.ib-nav button { padding: 8px 10px; border-radius: 10px; font-size: 14px; position: relative; }
.ib-nav button.on { background: var(--line-2); color: var(--ink); font-weight: 600; }
.ib-nav button > span { order: 1; }
.ib-nav button em { order: 2; margin: 0; min-width: 18px; text-align: center; }
.ib-nav button .tick { order: 3; }
.ib-nav button .tick { color: var(--bubble-out-v3); display: inline-flex; margin-inline-start: 2px; }
.ib-nav .mini-av { position: relative; display: inline-flex; flex: none; }
.ib-nav .mini-av .avatar { font-size: 10px; }
.ib-nav .on-dot { position: absolute; bottom: -1px; left: -1px; width: 7px; height: 7px; border-radius: 50%; background: #12B76A; box-shadow: 0 0 0 2px var(--panel); }
@media (max-width: 900px) { .ib-nav { top: 56px; right: 8px; left: 8px; width: auto; } }

/* chat panel: white sheet */
.ib-chat { background: var(--panel); }
.chat-head { background: transparent; border-bottom: 1px solid var(--line-2); min-height: 64px; padding: 10px 20px; }
.ch-title b { font-size: 16px; }
#closeBtn { background: var(--ink-btn); color: var(--panel); border-color: transparent; border-radius: 10px; }
[data-theme="dark"] #closeBtn { color: #111827; }
.msgs { padding: 22px 28px 12px; background: var(--panel); }
.day span, .evt span { box-shadow: none; background: none; }
.day, .evt { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.day::before, .day::after, .evt::before, .evt::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.evt span { font-size: 12px; padding: 0; }
.bubble { border-radius: 18px; padding: 9px 14px 6px; }
.msg.in .bubble { background: var(--bubble-in); border: 0; }
.msg.out .bubble { background: var(--bubble-out-v3); color: #fff; border: 0; }
.msg.out .m-who { color: rgba(255, 255, 255, .85); }
.msg.out .m-meta, .msg.out .st { color: rgba(255, 255, 255, .78); }
.msg.out .st.read { color: #fff; }
.msg.out .m-text a { color: #fff; text-decoration: underline; }
.msg.note .bubble { background: #FEF7DC; border: 1px solid #F3E2A3; }
[data-theme="dark"] .msg.note .bubble { background: #2C2611; border-color: #4D4318; }
.msg.failed .bubble { background: var(--danger-soft); color: var(--ink); }
.msg.in.cont .bubble { border-top-right-radius: 6px; }
.msg.out.cont .bubble { border-top-left-radius: 6px; }
.msg.in:has(+ .msg.in.cont) .bubble { border-bottom-right-radius: 6px; }
.msg.out:has(+ .msg.out.cont) .bubble { border-bottom-left-radius: 6px; }
/* floating composer */
.composer { margin: 0 24px 20px; border: 1px solid var(--line-2); border-radius: 20px; padding: 10px 14px 10px; background: var(--panel); box-shadow: 0 8px 28px rgba(30, 41, 59, .08); }
.composer:focus-within { border-color: var(--line); box-shadow: 0 10px 32px rgba(30, 41, 59, .12); }
.comp-tabs button { border: 1px solid transparent; border-radius: 10px; padding: 4px 12px; }
.comp-tabs button.on { background: var(--panel); color: var(--ink); border-color: var(--line); box-shadow: 0 1px 3px rgba(30, 41, 59, .08); }
.composer.noting { background: #FFFDF2; }
#sendBtn { background: #A1A6B0; box-shadow: none; color: #fff; border-radius: 12px; }
#sendBtn.ready { background: var(--ink-btn); color: var(--panel); }
[data-theme="dark"] #sendBtn { background: #3A3A42; color: #9A9AA5; }
[data-theme="dark"] #sendBtn.ready { background: #F3F4F6; color: #111827; }
.win-note { margin: 0 24px 8px; border-radius: 12px; }
/* info panel */
.ib-info { background: var(--panel); border-inline-start: 1px solid var(--line-2); }

/* ==========================================================================
   Login v3: two floating panels on the gradient
   ========================================================================== */
.auth-v3 { background: var(--page-grad); background-attachment: fixed; min-height: 100vh; display: grid; place-items: center; padding: 28px; }
.auth-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; max-width: 1040px; min-height: min(640px, calc(100vh - 56px)); }
.auth-form, .auth-show { border-radius: 26px; border: 1px solid var(--glass-line); background: var(--glass); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: var(--panel-shadow); display: flex; flex-direction: column; justify-content: center; padding: 48px; }
.auth-form-in { width: 100%; max-width: 340px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.auth-logo { display: inline-flex; align-self: center; margin-bottom: 8px; }
.auth-form h1 { font-size: 24px; text-align: center; }
.auth-form-in > p.muted { text-align: center; margin: -4px 0 16px; font-size: 13.5px; }
.auth-form input { background: var(--glass-strong); border-color: var(--glass-line); border-radius: 12px; height: 44px; }
.auth-go { height: 46px; border-radius: 12px; margin-top: 6px; font-size: 14.5px; }
.auth-foot { text-align: center; font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
.auth-show { align-items: center; text-align: center; gap: 14px; }
.float-cards { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 330px; margin-bottom: 18px; }
.fc { display: flex; align-items: center; gap: 12px; background: var(--panel); border-radius: 16px; padding: 12px 16px; box-shadow: 0 12px 30px rgba(30, 41, 59, .1); text-align: start;
  width: 86%; animation: floaty 6s ease-in-out infinite; }
.fc.shift { margin-inline-start: 14%; animation-delay: -3s; }
.fc b { display: block; font-size: 13px; }
.fc small { display: block; font-size: 12px; color: var(--muted); }
.fc .ch-badge { width: 26px; height: 26px; flex: none; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.auth-show h2 { font-size: 22px; }
.auth-show p { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13.5px; }
@media (max-width: 860px) {
  .auth-wrap { grid-template-columns: 1fr; min-height: 0; }
  .auth-show { display: none; }
  .auth-form { padding: 34px 22px; }
}
@media (prefers-reduced-motion: reduce) { .fc { animation: none; } }

/* phones: panels go edge to edge */
@media (max-width: 900px) {
  .bottom-nav { background: var(--glass-strong); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
  .ib-chat, .msgs { background: var(--panel); }
  .composer { margin: 0 8px 8px; border-radius: 18px; }
}
.auth-body { background: var(--page-grad); background-attachment: fixed; }
.auth-card.solo, .auth-card.wide { background: var(--glass-strong); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-color: var(--glass-line); border-radius: 26px; }

/* Exact colours of the reference design (sampled from it) */
:root {
  --page-grad:
    radial-gradient(60% 42% at 88% -4%, rgba(164, 236, 233, .95) 0%, rgba(164, 236, 233, 0) 72%),
    radial-gradient(45% 34% at 45% -6%, rgba(181, 232, 253, .85) 0%, rgba(181, 232, 253, 0) 72%),
    radial-gradient(34% 52% at -4% 50%, rgba(221, 202, 248, .9) 0%, rgba(221, 202, 248, 0) 72%),
    radial-gradient(58% 40% at 42% 104%, rgba(238, 213, 206, .95) 0%, rgba(238, 213, 206, 0) 72%),
    radial-gradient(40% 40% at 100% 100%, rgba(238, 215, 225, .95) 0%, rgba(238, 215, 225, 0) 72%),
    radial-gradient(28% 40% at 100% 50%, rgba(220, 244, 240, .7) 0%, rgba(220, 244, 240, 0) 72%),
    #FFFFFF;
  --panel: #FCFDFF;
  --glass: rgba(255, 255, 255, .5);
  --glass-strong: rgba(255, 255, 255, .8);
  --ink: #0E0F11;
  --ink-btn: #1C1C1E;
  --ink-btn-hover: #2C2C2E;
  --bubble-in: #E9EAEC;
  --bubble-out-v3: #3B74DB;
  --line-2: #EEEFF2;
}
.msg.note .bubble { background: #FFF5D1; border-color: #F3E1A2; }
#sendBtn { background: #A0A09E; }
.comp-tabs button.on { background: #F6F6F6; }
.ib-item .count, .ib-nav button .tick { color: #3B74DB; }
.ib-item .count { background: #3B74DB; color: #fff; }

/* Ads page + «came from an ad» card */
.ads-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.ad-card { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.ad-top { display: flex; gap: 14px; align-items: flex-start; }
.ad-img { width: 88px; height: 88px; border-radius: 14px; object-fit: cover; flex: none; background: var(--line-2); }
.ad-img.ph { display: grid; place-items: center; color: var(--muted); }
.ad-head { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ad-head b { font-size: 15px; }
.ad-body { line-height: 1.6; }
.ad-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ad-stats > * { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 12px; background: var(--subtle); color: inherit; text-decoration: none !important; }
.ad-stats > a:hover { background: var(--brand-soft); }
.ad-stats b { font-size: 20px; }
.ad-stats small { color: var(--muted); font-size: 12px; }
.ad-lc { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-form { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line-2); padding-top: 12px; }
.ad-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ad-form label small { font-weight: 400; color: var(--muted); }
.ad-form label.check { flex-direction: row; font-weight: 500; }
.ad-mini { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border: 1px solid var(--line-2); border-radius: 12px; color: inherit; text-decoration: none !important; }
.ad-mini:hover { border-color: var(--line); background: var(--subtle); }
.ad-mini img, .ad-mini .ad-ph { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex: none; background: var(--line-2); display: grid; place-items: center; color: var(--muted); }
.ad-mini b { display: block; font-size: 13px; }
.ad-mini small { display: block; font-size: 12px; color: var(--muted); line-height: 1.5; }
.ad-mini .ad-id { font-family: ui-monospace, Menlo, monospace; font-size: 11px; }
.info-sec h4 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ads-connect { margin-bottom: 16px; }
.ad-agents { display: flex; flex-direction: column; gap: 6px; }
.ad-agents b small { font-weight: 400; }
.ad-agent-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-agent { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border: 1px solid var(--line); border-radius: 99px; font-size: 12.5px; font-weight: 500; cursor: pointer; background: var(--surface); }
.ad-agent input { display: none; }
.ad-agent.on { border-color: var(--bubble-out-v3, var(--brand)); background: color-mix(in srgb, var(--bubble-out-v3, var(--brand)) 10%, var(--surface)); color: var(--ink); }
.ad-agent .avatar { font-size: 10px; }

/* ---- Google Sheets (integrations) */
.int-logo.sm{width:34px;height:34px;font-size:16px;border-radius:10px;flex:none}
.sheet-steps{display:flex;gap:8px;flex-wrap:wrap;list-style:none;padding:0;margin:0 0 14px}
.sheet-steps li{padding:6px 12px;border-radius:999px;background:var(--line-2,#f1f2f4);color:var(--muted,#6b7280);font-size:13px}
.sheet-steps li.on{background:#0F9D58;color:#fff}
.sheet-steps li.done{background:#E6F4EA;color:#137333}
.sheet-list{display:flex;flex-direction:column;gap:6px}
.sheet-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line,#e5e7eb);border-radius:12px;color:inherit;text-decoration:none;background:var(--panel,#fff)}
.sheet-item:hover{border-color:#0F9D58;background:#F3FBF6}
.sheet-item small{display:block}
.sheet-col{display:inline-grid;place-items:center;min-width:30px;height:26px;padding:0 6px;border-radius:7px;background:#E6F4EA;color:#137333;font-weight:700;font-family:ui-monospace,monospace;font-size:13px}
.sheet-map select{width:100%}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sheet-item:hover{background:rgba(15,157,88,.12)}:root:not([data-theme="light"]) .sheet-steps li.done,:root:not([data-theme="light"]) .sheet-col{background:rgba(15,157,88,.18);color:#81C995}}
:root[data-theme="dark"] .sheet-item:hover{background:rgba(15,157,88,.12)}
:root[data-theme="dark"] .sheet-steps li.done,:root[data-theme="dark"] .sheet-col{background:rgba(15,157,88,.18);color:#81C995}

/* ---- Orders & delivery */
.pill[style*="--p"]{background:color-mix(in srgb,var(--p) 14%,transparent);color:var(--p)}
.ord-btn{gap:4px}
.ord-box{width:min(720px,100%);max-height:92vh;overflow:auto}
.ord-loading{padding:40px;text-align:center;color:var(--muted)}
.ord-top{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.ord-ai{white-space:nowrap;background:linear-gradient(135deg,#EEF2FF,#FDF2F8);border-color:#C7D2FE}
.ord-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ord-grid .span2{grid-column:span 2}
.ord-items{border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px}
.ord-items-head{display:flex;justify-content:space-between;align-items:center}
.ord-item{display:grid;grid-template-columns:1fr 70px 110px 32px;gap:6px;align-items:center}
.ord-items .btn{align-self:flex-start}
.ord-rsearch{margin-bottom:4px}
.ord-err{background:var(--danger-soft);color:#B42318;border-radius:10px;padding:8px 12px;font-weight:600}
.ord-sec h4{display:flex;justify-content:space-between;align-items:center}
.ord-mini{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px;margin-bottom:6px;color:inherit;text-decoration:none}
.ord-mini:hover{border-color:var(--brand,#2563EB)}
.ord-mini small{flex-basis:100%;color:var(--muted)}
.ord-mini .ord-bad{color:#B42318}
.ord-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:14px}
.ord-stats .card{display:flex;flex-direction:column;gap:2px;padding:12px 14px;margin:0;text-decoration:none;color:inherit;border-top:3px solid var(--p,var(--brand,#2563EB))}
.ord-stats .card b{font-size:22px}
.ord-stats .card.on{box-shadow:0 0 0 2px var(--p)}
.ord-list{display:flex;flex-direction:column;gap:8px}
.ord-row{padding:0;margin:0}
.ord-row summary{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;list-style:none}
.ord-row summary::-webkit-details-marker{display:none}
.ord-no{font-family:ui-monospace,monospace;color:var(--muted)}
.ord-amt{font-weight:800;white-space:nowrap}
.ord-detail{padding:0 16px 14px;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line-2)}
.ord-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-top:12px}
.ord-cols b{display:block}
.carrier-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.carrier-opt{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px;cursor:pointer}
.carrier-opt:has(input:checked){border-color:var(--brand,#2563EB);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand,#2563EB) 25%,transparent)}
.carrier-opt input{display:none}
.carrier-opt small{display:block}
.acc-edit summary{list-style:none}
.acc-edit[open]{flex-basis:100%}
@media (max-width:760px){
  .ord-grid{grid-template-columns:1fr 1fr}.ord-grid .span2{grid-column:1/-1}
  .ord-item{grid-template-columns:1fr 54px 84px 28px}
  .ord-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ord-cols{grid-template-columns:1fr}
  .ord-row summary{flex-wrap:wrap}
  .ord-btn span{display:none}
}

/* ---- inbox columns on tablets and phones (the redesigned 3-column grid above must not apply there) */
@media (max-width: 1180px) { .inbox, .inbox:has(.ib-info:empty) { grid-template-columns: 320px minmax(0, 1fr); } }
@media (max-width: 900px) { .inbox, .inbox:has(.ib-info:empty) { grid-template-columns: minmax(0, 1fr); } }
/* phone chat header: the customer's name keeps room, the actions get compact */
@media (max-width: 600px) {
  .chat-head .ch-title { min-width: 70px; flex: 1 1 auto; overflow: hidden; }
  .chat-head .ch-title b, .chat-head .ch-title small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-head .chat-actions { gap: 4px; flex: 0 1 auto; min-width: 0; }
  .chat-head #assignSel { max-width: 86px; min-width: 0; padding-inline: 6px; font-size: 12px; }
}