/* ==========================================================================
   ChatBiz247 — design system
   Tokens mirror the reference tenant theme (oklch chat-* palette).
   ========================================================================== */

:root {
  /* brand */
  --brand: #0f9d76;
  --brand-deep: #0b7f5f;
  --brand-ink: #06463a;
  --wa: #25d366;

  /* neutrals (light surface — matches IDE light theme) */
  --ink: #0d1b17;
  --ink-2: #33443f;
  --ink-3: #5d706a;
  --ink-4: #8b9a95;
  --line: #e3e9e7;
  --line-2: #eef2f1;
  --surface: #ffffff;
  --surface-2: #f7faf9;
  --surface-3: #eef4f2;

  /* visitor chat tokens (from reference stylesheet) */
  --chat-canvas: oklch(97.2% .008 120);
  --chat-surface: oklch(100% 0 0);
  --chat-bubble-in: oklch(100% 0 0);
  --chat-bubble-in-foreground: oklch(26% .02 250);
  --chat-bubble-out: oklch(93% .055 155);
  --chat-bubble-out-foreground: oklch(24% .03 160);
  --chat-line: oklch(91% .008 250);
  --chat-muted: oklch(58% .015 250);
  --chat-notice: oklch(96% .035 95);
  --chat-notice-foreground: oklch(42% .09 75);
  --chat-accent: oklch(56% .11 168);

  --space-2: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(13,27,23,.06), 0 1px 3px rgba(13,27,23,.04);
  --shadow: 0 4px 12px rgba(13,27,23,.07), 0 1px 3px rgba(13,27,23,.05);
  --shadow-lg: 0 18px 48px rgba(13,27,23,.13), 0 4px 12px rgba(13,27,23,.06);
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Space Grotesk', var(--font);
  --header-h: 64px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--surface);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
svg { display: block; }
[hidden] { display: none !important; }

::selection { background: color-mix(in srgb, var(--brand) 20%, transparent); }

/* ---------- Global scrollbar (brand-tinted, thin) ----------
   Intentionally low specificity: rails that must stay invisible
   (.reply-chips, .quick-row, .tabs, .chat-doodles) keep their own
   `display:none` rules, which win over these. Firefox uses the
   scrollbar-width/color pair; Chromium/Safari use the pseudo-elements. */
* { scrollbar-width: thin; scrollbar-color: var(--brand) transparent; }
/* Chromium's standard scrollbar colors override the WebKit styling, including
   the hidden arrow buttons. Use that styling where supported; keep the thin
   standard scrollbar as the Firefox fallback. */
@supports selector(::-webkit-scrollbar) {
  * { scrollbar-width:auto; scrollbar-color:auto; }
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--brand-deep); border: 3px solid transparent; background-clip: padding-box; }
/* Never render scrollbar arrow buttons — they break the pill look. */
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
/* No page scrollbar behind an open popup (it would paint over the edge). */
body.modal-open { overflow: hidden; }

/* ---------- Shared primitives ---------- */
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 22px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: 999px;
  font-weight: 600; font-size: 15px; white-space: nowrap;
  transition: transform .15s ease, background .18s ease, border-color .18s;
}
.btn:active { transform: scale(.975); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-deep); }
.btn-ghost { border: 1.5px solid var(--line); color: var(--ink); background: var(--surface); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-dark { background: var(--brand-ink); color: #fff; }
.btn-dark:hover { background: #0a2f27; }
.btn-danger { background: #b42318; color: #fff; }
.btn-danger:hover { background: #912018; color: #fff; }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--surface-3); color: var(--brand-deep);
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }

h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -.022em; line-height: 1.12; font-weight: 700; }
.sec-title { font-size: clamp(29px, 4vw, 44px); }
.sec-sub { color: var(--ink-3); font-size: 17px; max-width: 640px; }
.center { text-align: center; }
.center .sec-sub { margin-inline: auto; }

section { padding: 88px 0; }
section.tight { padding: 64px 0; }

/* ==========================================================================
   LANDING
   ========================================================================== */
/* Clip horizontal landing overflow without creating a non-scrolling ancestor
   that captures the sticky navigation away from the document viewport. */
body[data-route="landing"],body[data-route="landing"] #app { overflow-x:clip; overflow-y:visible; }
body[data-route="landing"] #app>section[id] { scroll-margin-top:calc(var(--header-h) + 16px); }
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.88); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(25,52,44,.06);
  box-shadow: 0 3px 12px rgba(25,52,44,.045);
}
.topbar .wrap { display: flex; align-items: center; gap: 26px; height: var(--header-h); }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 18px; }
.logo-mark {
  width: 32px; height: 32px; border-radius: 9px; background: var(--brand);
  display: grid; place-items: center; color: #fff; flex-shrink: 0;
}
.logo-mark svg { width: 18px; height: 18px; }
.nav { display: flex; gap: 24px; margin-left: 8px; }
.nav a { font-size: 14.5px; font-weight: 500; color: var(--ink-3); }
.nav a:hover { color: var(--brand); }
.topbar .actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-caption { display:none; }
.burger { display:none; width:44px; height:44px; padding:0; flex-shrink:0; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); cursor:pointer; transition:background .2s ease,border-color .2s ease; }
.burger:hover,.burger[aria-expanded="true"] { background:var(--surface-2); border-color:var(--brand); color:var(--brand); }
.burger-lines { position:relative; width:22px; height:20px; }
.burger-lines span { position:absolute; left:0; top:9px; width:22px; height:2px; border-radius:2px; background:currentColor; transition:transform .25s ease,opacity .15s ease; }
.burger-lines span:first-child { transform:translateY(-7px); }
.burger-lines span:last-child { transform:translateY(7px); }
.burger[aria-expanded="true"] .burger-lines span:first-child { transform:rotate(45deg); }
.burger[aria-expanded="true"] .burger-lines span:nth-child(2) { opacity:0; transform:scaleX(.5); }
.burger[aria-expanded="true"] .burger-lines span:last-child { transform:rotate(-45deg); }
.landing-whatsapp { position:fixed; right:24px; bottom:calc(24px + env(safe-area-inset-bottom)); z-index:55; display:flex; align-items:center; gap:10px; min-height:54px; padding:0 18px; border-radius:12px; border:1px solid var(--brand-deep); background:var(--brand); color:#fff; font-size:15px; font-weight:600; }
.landing-whatsapp svg { width:26px; height:26px; }
.landing-whatsapp:hover { background:var(--brand-deep); }
.contact-mode { margin-bottom:8px; }
.guest-controls { position:relative; flex-shrink:0; }
.guest-controls summary { list-style:none; cursor:pointer; }
.guest-controls summary::-webkit-details-marker { display:none; }
.guest-controls-menu { position:absolute; right:0; top:calc(100% + 8px); z-index:50; width:min(252px,calc(100vw - 24px)); padding:8px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); box-shadow:0 6px 18px rgba(25,52,44,.08); }
.guest-controls-menu p { padding:6px 10px; margin:0; color:var(--ink-3); font-size:12px; }
.guest-controls-menu button { display:block; width:100%; min-height:52px; padding:10px; border-radius:8px; text-align:left; font-size:15px; font-weight:600; }
.guest-controls-menu button:hover { background:var(--surface-2); }
.guest-controls-menu small { display:block; margin-top:3px; color:var(--ink-3); font-size:12px; font-weight:400; }
.guest-controls-menu .danger { color:#b42318; }
.guest-control-notice,.visitor-blocked-notice { margin:0; padding:12px 16px; background:#fff4f2; color:#923127; font-size:14px; line-height:1.5; }
.visitor-control-badge.blocked { background:#fff0ed; color:#b42318; }
@media(max-width:560px) { .landing-whatsapp { right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); width:54px; padding:0; justify-content:center; } .landing-whatsapp span { display:none; } }
@media(prefers-reduced-motion:reduce) { .burger,.burger-lines span,.topbar .nav,.topbar .nav a { transition:none!important; } }

.hero { padding: 78px 0 70px; position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: -220px -10% auto -10%; height: 620px;
  background: radial-gradient(50% 60% at 50% 40%, color-mix(in srgb, var(--brand) 15%, transparent), transparent 70%);
  pointer-events: none;
}
.hero .wrap { position: relative; text-align: center; }
.hero h1 { font-size: clamp(36px, 6vw, 62px); max-width: 15ch; margin: 22px auto 0; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero .lede { margin: 22px auto 0; font-size: 18px; color: var(--ink-3); max-width: 620px; }
.hero-cta { display: flex; gap: 12px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.hero-checks { display: flex; gap: 10px 26px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.hero-checks span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-3); font-weight: 500; }
.hero-checks svg { width: 16px; height: 16px; color: var(--brand); flex-shrink: 0; }

/* hero device mock */
.hero-mock { margin-top: 54px; display: flex; justify-content: center; }
.phone {
  width: 330px; border-radius: 30px; background: var(--surface);
  box-shadow: var(--shadow-lg); border: 1px solid var(--line); overflow: hidden;
}
.phone-bar { height: 26px; display: grid; place-items: center; background: var(--surface-3); }
.phone-bar i { width: 60px; height: 5px; border-radius: 99px; background: var(--ink-4); opacity: .45; }
.mini { display: flex; flex-direction: column; height: 380px; background: var(--chat-canvas); }
.mini-head { background: #008064; padding: 12px 14px; display: flex; align-items: center; gap: 10px; color: #fff; }
.mini-head .av { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.25); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.mini-head b { font-size: 14px; display: block; }
.mini-head small { font-size: 11px; opacity: .9; }
.mini-body { flex: 1; padding: 14px 12px; display: flex; flex-direction: column; gap: 9px; overflow: hidden; }

/* generic chat bubble (shared by mock + visitor page) */
.bub { max-width: 82%; padding: 8px 12px; border-radius: 16px; font-size: 13.5px; box-shadow: var(--shadow-sm); line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.bub-in { background: var(--chat-bubble-in); color: var(--chat-bubble-in-foreground); border-bottom-left-radius: 5px; align-self: flex-start; }
.bub-out { background: var(--chat-bubble-out); color: var(--chat-bubble-out-foreground); border-bottom-right-radius: 5px; align-self: flex-end; }
.bub .t { font-size: 10px; opacity: .55; text-align: right; margin-top: 3px; }

/* logo strip */
.strip { border-block: 1px solid var(--line-2); padding: 26px 0; background: var(--surface-2); }
.strip .wrap { display: flex; align-items: center; justify-content: center; gap: 14px 40px; flex-wrap: wrap; }
.strip span { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }

/* problem grid */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px; box-shadow: var(--shadow-sm); transition: box-shadow .2s, transform .2s, border-color .2s;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card h3 { font-size: 17px; margin-bottom: 8px; }
.card p { font-size: 14.5px; color: var(--ink-3); }
.card .ico {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--surface-3); color: var(--brand-deep); margin-bottom: 16px;
}
.card .ico svg { width: 21px; height: 21px; }
.card.alert .ico { background: #fdeced; color: #c0392b; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; counter-reset: s; }
.step { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 22px; }
.step .n {
  width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: #fff;
  display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 16px; margin-bottom: 16px;
}
.step h3 { font-size: 16px; margin-bottom: 7px; }
.step p { font-size: 14px; color: var(--ink-3); }

/* comparison */
.cmp { margin-top: 40px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.cmp table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.cmp th, .cmp td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line-2); }
.cmp thead th { background: var(--surface-2); font-family: var(--display); font-size: 14px; }
.cmp thead th:last-child { background: color-mix(in srgb, var(--brand) 9%, white); color: var(--brand-deep); }
.cmp td:last-child { background: color-mix(in srgb, var(--brand) 4.5%, white); font-weight: 600; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp tbody th { font-weight: 500; color: var(--ink-2); }
.cmp .yes { color: var(--brand-deep); font-weight: 600; }
.cmp .no { color: #c0392b; }
.cmp .mid { color: var(--ink-3); }

/* pricing */
.prices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; align-items: start; }
.price { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 22px; }
.price.best { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent), var(--shadow); position: relative; }
.price .tag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--brand); color: #fff; font-size: 11.5px; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; letter-spacing: .03em; white-space: nowrap;
}
.price .name { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.price .amt { font-family: var(--display); font-size: 34px; font-weight: 700; margin: 12px 0 2px; }
.price .amt small { font-size: 14px; font-weight: 500; color: var(--ink-4); }
.price .per { font-size: 13px; color: var(--ink-4); }
.price ul { list-style: none; margin: 18px 0; display: grid; gap: 9px; }
.price li { display: flex; gap: 9px; font-size: 13.5px; color: var(--ink-2); }
.price li svg { width: 15px; height: 15px; color: var(--brand); flex-shrink: 0; margin-top: 3px; }

/* faq */
.faq { margin-top: 36px; max-width: 800px; margin-inline: auto; }
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative;
  font-family: var(--display); font-weight: 600; font-size: 16.5px;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ''; position: absolute; right: 8px; top: 26px; width: 9px; height: 9px;
  border-right: 2px solid var(--ink-4); border-bottom: 2px solid var(--ink-4);
  transform: rotate(45deg); transition: transform .2s;
}
.qa[open] summary::after { transform: rotate(-135deg); }
.qa p { font-size: 15px; color: var(--ink-3); padding: 0 40px 22px 0; }

/* final cta + footer */
.cta-band {
  background: linear-gradient(135deg, var(--brand-ink), #0d6b56 70%);
  border-radius: 28px; padding: 60px 44px; text-align: center; color: #fff;
}
.cta-band h2 { font-size: clamp(28px,4vw,40px); color: #fff; }
.cta-band p { color: rgba(255,255,255,.82); margin: 14px auto 28px; max-width: 520px; }
.cta-band .btn-primary { background: #fff; color: var(--brand-ink); box-shadow: none; }
.cta-band .btn-primary:hover { background: #eafaf4; }
.cta-band .btn-ghost { border-color: rgba(255,255,255,.4); color: #fff; background: transparent; }
.cta-band .btn-ghost:hover { border-color: #fff; color: #fff; }

footer { border-top: 1px solid var(--line); padding: 52px 0 34px; background: var(--surface-2); }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.foot-grid h4 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 14px; font-family: var(--font); font-weight: 700; }
.foot-grid a { display: block; font-size: 14.5px; color: var(--ink-3); padding: 5px 0; }
.foot-grid a:hover { color: var(--brand); }
.foot-grid p { font-size: 14px; color: var(--ink-3); max-width: 34ch; margin-top: 12px; }
.foot-bottom {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--ink-4);
}

/* ==========================================================================
   VISITOR CHAT  (replica of /venky)
   ========================================================================== */
body[data-route="chat"] { background: var(--chat-canvas); }
.chat-shell {
  position: fixed; inset: 0 0 auto 0; top: 0; height: 100dvh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--chat-canvas); color: var(--chat-bubble-in-foreground);
}
@media (min-width: 768px) {
  .chat-shell {
    left: 50%; transform: translateX(-50%); max-width: 768px;
    border-inline: 1px solid var(--chat-line); box-shadow: var(--shadow-lg);
  }
}
.chat-head {
  display: flex; min-height: 56px; flex-shrink: 0; align-items: center; gap: 10px;
  padding: max(env(safe-area-inset-top), 8px) 12px 8px;
  color: #fff; box-shadow: var(--shadow-sm);
}
.chat-head .ava { position: relative; flex-shrink: 0; }
.chat-head .ava .img {
  width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  background: #f8fafc; color: #134e4a; border: 1px solid rgba(15,23,42,.18);
  box-shadow: 0 1px 4px rgba(0,0,0,.12); display: grid; place-items: center;
  font-size: 14px; font-weight: 700;
}
.chat-head .ava img { width: 100%; height: 100%; object-fit: cover; }
.chat-head .ava .on {
  position: absolute; bottom: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%;
  background: #22c55e; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.18);
}
.chat-head .who { min-width: 0; flex: 1; line-height: 1.25; }
.chat-head .who b { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; overflow: hidden; white-space: nowrap; }
.chat-head .who span { font-size: 11.5px; opacity: .9; }
.chat-head .who .business-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: inherit; opacity: 1; }
.chat-head .who .business-badge { display: block; width: 18px; height: 18px; flex-shrink: 0; }
.hbtn {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: rgba(255,255,255,.1); transition: transform .15s, background .18s;
}
.hbtn svg { width: 18px; height: 18px; }
.hbtn:active { transform: scale(.94); }
.hbtn:hover { background: rgba(255,255,255,.22); }
.hbtn[disabled] { opacity: .55; cursor: not-allowed; }
.hbtn-wa { background: var(--wa); box-shadow: var(--shadow-sm); }
.hbtn-wa:hover { background: #1eb85a; }
.hbtn-tg { background: #229ed9; box-shadow: var(--shadow-sm); }
.hbtn-tg:hover { background: #1686bb; }
/* The paper-plane path extends farther right than left inside its viewBox. */
.hbtn-tg svg { display:block; width:22px; height:22px; fill:currentColor; stroke:none; transform:translateX(-1px); }
.hbtn-save {
  display: inline-flex; flex-direction: row; flex-wrap: nowrap;
  align-items: center; justify-content: center;
  width: auto; height: 42px; padding: 0 14px; gap: 7px;
  font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
  background: rgba(255,255,255,.2); border-radius: 999px;
}
.hbtn-save svg { flex: 0 0 18px; }
.hbtn-save span { display: block; line-height: 1; }
.hbtn-save:hover { background: rgba(255,255,255,.3); }

.name-bar {
  display: grid; flex-shrink: 0; grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid var(--chat-line); background: var(--chat-surface);
}
@media (min-width: 640px) { .name-bar { grid-template-columns: auto auto minmax(0,1fr) auto; } }
.name-bar svg { width: 16px; height: 16px; color: var(--chat-muted); flex-shrink: 0; }
.name-bar label { display: none; font-size: 12px; font-weight: 500; color: var(--chat-muted); }
@media (min-width: 640px) { .name-bar label { display: block; } }
.name-bar input {
  height: 32px; min-width: 0; border-radius: 999px; border: 1px solid var(--chat-line);
  background: var(--chat-canvas); padding: 0 12px; font-size: 16px; outline: none;
}
@media (min-width: 640px) { .name-bar input { font-size: 14px; } }
.name-bar button {
  height: 32px; padding: 0 16px; border-radius: 999px; color: #fff;
  font-size: 13px; font-weight: 600;
}
.name-bar button[disabled] { opacity: .4; }

.chat-doodles {
  min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 10px; scrollbar-width: none;
  background-color: var(--chat-canvas);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23000000' stroke-opacity='0.022' stroke-width='2'%3E%3Ccircle cx='20' cy='20' r='9'/%3E%3Cpath d='M52 14h20v14H60l-6 6v-6h-2z'/%3E%3Cpath d='M96 18l6 6-6 6-6-6z'/%3E%3Cpath d='M14 62c6-8 16-8 22 0'/%3E%3Crect x='60' y='56' width='18' height='14' rx='3'/%3E%3Cpath d='M96 60v14M89 67h14'/%3E%3Cpath d='M18 100h16l4 8 4-8h6'/%3E%3Ccircle cx='72' cy='104' r='8'/%3E%3Cpath d='M100 96l8 16'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  -webkit-overflow-scrolling: touch;
}
.chat-doodles::-webkit-scrollbar { display: none; }
.thread { margin: 0 auto; display: flex; max-width: 672px; flex-direction: column; gap: 8px; }

.pill {
  margin: 0 auto; display: flex; max-width: 85%; align-items: center; gap: 6px;
  border-radius: 8px; background: color-mix(in oklab, var(--chat-notice) 70%, transparent);
  padding: 4px 12px; text-align: center; font-size: 10.5px; line-height: 1.35;
  color: var(--chat-notice-foreground);
}
.pill svg { width: 12px; height: 12px; flex-shrink: 0; }
.wa-note {
  margin: 0 auto; display: flex; max-width: 85%; align-items: center; gap: 8px;
  border-radius: 12px; background: color-mix(in oklab, var(--chat-notice) 60%, transparent);
  padding: 8px 12px; font-size: 12px; line-height: 1.4; color: var(--chat-bubble-in-foreground);
}
.wa-note svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--wa); }

.row { display: flex; align-items: flex-end; gap: 6px; }
.row.out { justify-content: flex-end; }
.row .av {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; font-size: 10px; font-weight: 600; color: #fff;
}
.row .av img { width: 100%; height: 100%; object-fit: cover; }
.msg { max-width: 82%; border-radius: 16px; padding: 8px 12px; box-shadow: var(--shadow-sm); }
@media (min-width: 768px) { .msg { max-width: 68%; } }
.msg.in { background: var(--chat-bubble-in); color: var(--chat-bubble-in-foreground); border-bottom-left-radius: 5px; }
.msg.out { background: var(--chat-bubble-out); color: var(--chat-bubble-out-foreground); border-bottom-right-radius: 5px; }
.msg .txt { white-space: pre-wrap; font-size: 14px; line-height: 1.45; word-wrap: break-word; }
.msg .meta { margin-top: 2px; display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 10px; color: var(--chat-muted); }
.msg .meta svg { width: 13px; height: 13px; }
.msg img.att { border-radius: 10px; max-width: 240px; margin-bottom: 4px; }
.msg audio { max-width: 230px; height: 36px; }
.msg .who { font-size: 11px; font-weight: 600; color: var(--chat-accent); margin-bottom: 2px; }

.typing { display: flex; align-items: center; gap: 4px; padding: 11px 14px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--chat-muted); animation: blink 1.3s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,60%,100% { opacity: .28; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.chat-input { flex-shrink: 0; border-top: 1px solid var(--chat-line); background: var(--chat-surface); padding: 6px 8px 8px; }
.chat-input .inner { margin: 0 auto; display: flex; max-width: 672px; align-items: flex-end; gap: 6px; }
.chat-input .ibtn { width: 36px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 999px; color: var(--chat-muted); }
.chat-input .ibtn:hover { background: rgba(0,0,0,.05); }
.chat-input .ibtn svg { width: 21px; height: 21px; }
.chat-input .field {
  display: flex; flex: 1; align-items: flex-end; gap: 8px; border-radius: 999px;
  border: 1px solid var(--chat-line); background: var(--chat-canvas); padding: 6px 14px;
}
.chat-input textarea {
  max-height: 96px; flex: 1; resize: none; border: 0; outline: none; background: transparent;
  padding: 4px 0; font-size: 16px; line-height: 1.5; color: inherit;
}
@media (min-width: 640px) { .chat-input textarea { font-size: 14px; } }
.chat-input textarea::placeholder { color: var(--chat-muted); }
.chat-input .msg .bname, .thread .msg .bname { font-size: 12px; font-weight: 700; color: var(--chat-accent); margin-bottom: 2px; }
/* save-chat nudge card (after automation ends) */
.save-card { position: relative; background: #fff; border: 1px solid var(--chat-line); border-radius: 16px; padding: 14px 16px 12px; margin: 10px 0; box-shadow: var(--shadow-sm); }
.save-card .save-x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--chat-muted); }
.save-card .save-x:hover { background: rgba(0,0,0,.05); }
.save-card .save-x svg { width: 15px; height: 15px; }
.save-card .save-head { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.save-card .save-head svg { width: 17px; height: 17px; color: var(--chat-accent); flex-shrink: 0; }
.save-card p { font-size: 13px; color: var(--ink-3); margin: 6px 0 10px; }
.save-card .save-actions { display: flex; align-items: center; gap: 12px; }
.save-card .save-later { font-size: 13px; font-weight: 600; color: var(--ink-3); padding: 8px 4px; }
.save-card .save-later:hover { color: var(--ink); }
/* clickable URLs inside chat bubbles */
.thread .msg .txt a, .thread .msg a, .po-bub a { color: var(--brand-deep); text-decoration: underline; overflow-wrap: anywhere; word-break: break-word; }
.chat-input .send {
  width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 50%; background: var(--chat-accent); color: #fff;
  transition: transform .15s;
}
.chat-input .send:active { transform: scale(.93); }
.chat-input .send[disabled] { opacity: .5; }
.chat-input .send svg { width: 20px; height: 20px; }
.reply-chips { margin: 0 auto 6px; display: flex; max-width: 672px; gap: 7px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.reply-chips::-webkit-scrollbar { display: none; }
.reply-chips button {
  flex-shrink: 0; border: 1px solid var(--chat-line); background: var(--chat-surface);
  color: var(--chat-accent); font-size: 13px; font-weight: 600;
  padding: 7px 14px; border-radius: 999px;
}
.reply-chips button:hover { background: var(--surface-3); }
.chat-input.quick-band { background: var(--surface); border-top: 1px solid var(--line); padding: 8px 12px; }
.chat-input.quick-band .reply-chips { margin-bottom: 0; padding-bottom: 0; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.chat-input.quick-band .reply-chips button,
.chat-input.quick-band .reply-chips .quick-option { font-size: 12.5px; font-weight: 600; color: var(--brand-deep); background: var(--surface-3); border: 0; padding: 6px 13px; }
.chat-input.quick-band .reply-chips button:hover,
.chat-input.quick-band .reply-chips .quick-option:hover { background: color-mix(in srgb, var(--brand) 12%, white); }
.chat-input.quick-band:has(> #quickChips:empty) { display: none; }
.notify-wrap:empty { display: none; }
.chat-intro { max-width: 672px; margin: 0 auto 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.chat-intro > .pill { margin: 0; }
.notify-wrap { display: flex; justify-content: center; width: 100%; padding: 0 8px; }
.notify-card { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 420px; min-height: 50px; background: #fff; border: 1px solid #dce3e8; border-radius: 14px; box-shadow: 0 1px 3px rgba(15,23,42,.14); padding: 6px 8px 6px 12px; font-size: 12.5px; line-height: 18px; color: #082947; }
.notify-card > svg { color: #006b57; }
.notify-card > span { flex: 1; min-width: 0; max-width: 280px; }
.notify-toggle { flex-shrink: 0; margin-left: auto; border: 0; border-radius: 999px; background: #006b57; color: #fff; padding: 4px 12px; font-size: 12px; line-height: 18px; font-weight: 700; white-space: nowrap; }
.notify-toggle:disabled { background: #7fb1a6; cursor: wait; }
.notify-card svg { width: 16px; height: 16px; flex-shrink: 0; }
.notify-card .notify-x { background: none; border: 0; color: #78818c; cursor: pointer; padding: 4px; flex-shrink: 0; }
.notify-pill { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #dce3e8; border-radius: 999px; padding: 5px 10px 5px 14px; font-size: 13px; line-height: 20px; color: #78818c; box-shadow: 0 1px 3px rgba(15,23,42,.18); }
.notify-pill > svg { width: 16px; height: 16px; color: #006b57; }
.notify-pill .notify-mute { display: grid; place-items: center; border: 0; background: transparent; color: #78818c; padding: 3px; cursor: pointer; }
.notify-pill .notify-mute:disabled { cursor: wait; opacity: .5; }
.notify-pill .notify-mute svg { width: 16px; height: 16px; }
@media (max-width: 400px) {
  .notify-wrap { padding: 0; }
  .notify-card { gap: 7px; padding-left: 10px; padding-right: 8px; }
  .notify-toggle { padding-left: 10px; padding-right: 10px; }
}
.emoji-pop {
  position: absolute; bottom: calc(100% + 8px); left: 10px; z-index: 30;
  background: var(--chat-surface); border: 1px solid var(--chat-line); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 10px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(36px, 1fr)); gap: 3px;
  width: min(336px, calc(100% - 20px));
}
.emoji-pop button { min-width: 0; display: grid; place-items: center; font-size: 20px; line-height: 1; padding: 6px 4px; border-radius: 8px; }
.emoji-pop button:hover { background: var(--surface-3); }
.offline-note { text-align: center; font-size: 12px; color: var(--chat-muted); padding: 6px 0 2px; }

/* call overlay (shared) */
.call-veil {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(6,25,21,.82); backdrop-filter: blur(6px); padding: 20px;
}
.call-card {
  width: min(380px, 100%); background: var(--surface); border-radius: 26px;
  padding: 36px 26px 26px; text-align: center; box-shadow: var(--shadow-lg);
}
.call-card .ring {
  width: 92px; height: 92px; border-radius: 50%; margin: 0 auto 18px;
  display: grid; place-items: center; background: var(--brand); color: #fff;
  font-family: var(--display); font-size: 30px; font-weight: 700; position: relative;
}
.call-card .ring::after {
  content: ''; position: absolute; inset: -8px; border-radius: 50%;
  border: 2px solid var(--brand); opacity: .45; animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(.9); opacity: .6; } 100% { transform: scale(1.25); opacity: 0; } }
.call-card h3 { font-size: 21px; }
.call-card .st { font-size: 14px; color: var(--ink-3); margin-top: 6px; min-height: 21px; }
.call-card .timer { font-family: var(--display); font-size: 15px; color: var(--ink-4); margin-top: 4px; }
.call-actions { display: flex; gap: 10px; justify-content: center; margin-top: 26px; }
.call-round { min-width: 54px; height: 54px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #fff; font-weight: 700; font-size: 13px; transition: transform .15s ease, filter .15s ease; }
.call-round:hover { filter: brightness(.94); transform: translateY(-1px); }
.call-round svg { width: 23px; height: 23px; flex: 0 0 23px; }
.call-round.end { background: #e5484d; min-width: 126px; height: 56px; padding: 0 20px; }
.call-round.end .call-label { display: inline; }
.call-round.end svg { width: 24px; height: 24px; stroke-width: 2.25; }
.call-round.end .call-end-icon { transform: rotate(135deg); }
.tutorial-step { text-align:center; padding:12px 20px 8px; animation: tutorialIn .28s ease both; }
.tutorial-icon { width:64px; height:64px; margin:0 auto 12px; border-radius:20px; display:grid; place-items:center; color:#008064; background:#e4f7f1; }
.tutorial-icon svg { width:30px; height:30px; }
.tutorial-progress { color:#008064; font-size:11px; font-weight:800; letter-spacing:.12em; }
.tutorial-step h3 { margin:10px 0 6px; font-size:22px; }
.tutorial-step p { max-width:560px; margin:0 auto; color:var(--ink-3); line-height:1.65; }
.tutorial-dots { display:flex; justify-content:center; gap:7px; margin-top:20px; }
.tutorial-dots span { width:7px; height:7px; border-radius:50%; background:#cbd8d4; transition:.2s; }
.tutorial-dots span.on { width:22px; border-radius:9px; background:#008064; }
@keyframes tutorialIn { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:none; } }
.guide-veil { position:fixed; inset:0; z-index:99990; pointer-events:none; }
.guide-veil::before { content:''; position:fixed; inset:0; background:rgba(0,0,0,.10); pointer-events:none; z-index:0; }
.guide-card { pointer-events:auto; position:fixed; z-index:2; width:min(360px,calc(100vw - 48px)); max-height:calc(100dvh - 32px); overflow:auto; padding:20px; border-radius:18px; background:rgba(255,255,255,.98); box-shadow:0 18px 55px rgba(4,35,29,.25),0 0 0 2px rgba(33,181,139,.22); border:1px solid #bfe8da; animation:tutorialIn .25s ease both; }
.guide-card::before { content:''; position:absolute; inset:-8px; border-radius:24px; pointer-events:none; }
.guide-kicker { color:#008064; font-weight:800; font-size:11px; letter-spacing:.12em; }
.guide-card h3 { margin:8px 0 6px; font-size:19px; }
.guide-card p { margin:0; color:var(--ink-3); line-height:1.55; }
.guide-actions { display:flex; align-items:center; gap:8px; margin-top:18px; }
.guide-target { position:relative !important; z-index:99999 !important; outline:3px solid #21b58b !important; outline-offset:4px; border-radius:12px !important; box-shadow:0 0 0 7px rgba(33,181,139,.2) !important; }
@media (max-width:720px) {
  .guide-card { left:12px !important; right:12px !important; bottom:max(12px, env(safe-area-inset-bottom)) !important; top:auto !important; width:auto; max-height:min(58dvh, 360px); padding:16px; border-radius:16px; }
  .guide-card h3 { font-size:18px; margin:6px 0 4px; }
  .guide-card p { line-height:1.4; font-size:14px; }
  .guide-actions { margin-top:12px; flex-wrap:wrap; }
  .guide-actions .btn { min-height:40px; }
  .guide-target { z-index:99999 !important; }
}
.call-round.mute { background: var(--surface-3); color: var(--ink-2); }
.call-round.mute.active { background: var(--ink-2); color: #fff; }
.call-round.accept { background: #16a34a; }
.call-video { width: 100%; height: 200px; border-radius: 16px; background: #0b1a16; object-fit: cover; margin-bottom: 16px; }

/* ==========================================================================
   AUTH
   ========================================================================== */
.auth-wrap { min-height: 100dvh; display: grid; grid-template-columns: 1.05fr .95fr; }
.auth-aside {
  background: linear-gradient(160deg, var(--brand-ink), #0c7a60 78%);
  color: #fff; padding: 54px 48px; display: flex; flex-direction: column;
}
.auth-aside .quote { margin-top: auto; }
.auth-aside h2 { font-size: clamp(26px,3vw,36px); color: #fff; margin-top: 40px; }
.auth-aside p { color: rgba(255,255,255,.78); margin-top: 14px; max-width: 42ch; }
.auth-aside ul { list-style: none; display: grid; gap: 12px; margin-top: 28px; }
.auth-aside li { display: flex; gap: 10px; font-size: 14.5px; color: rgba(255,255,255,.92); }
.auth-aside li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; }
.auth-main { display: grid; place-items: center; padding: 40px 26px; background: var(--surface-2); }
.auth-card { width: min(410px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px 30px; box-shadow: var(--shadow); }
.auth-card h1 { font-size: 25px; }
.auth-card .sub { font-size: 14.5px; color: var(--ink-3); margin-top: 7px; }
.field-row { margin-top: 18px; }
.field-row label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }
.input {
  width: 100%; height: 46px; border-radius: 12px; border: 1px solid var(--line);
  padding: 0 14px; font-size: 15px; outline: none; background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent); }
.input:disabled { opacity: .65; cursor: not-allowed; background: var(--surface-2); }
.field-row > .input + .input { margin-top: var(--space-2); }
.swatch:disabled { cursor: not-allowed; opacity: .75; }
.switch input:disabled + .sl { opacity: .55; cursor: not-allowed; }
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d706a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 38px; }
.auth-note { margin-top: 18px; font-size: 13px; color: var(--ink-4); text-align: center; }
.demo-hint {
  margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--surface-3);
  font-size: 13px; color: var(--ink-2); line-height: 1.5;
}
.auth-switch { margin-top: 20px; text-align: center; font-size: 14px; color: var(--ink-3); }
.auth-switch a { color: var(--brand); font-weight: 600; }
.alert-box {
  margin-top: 16px; padding: 11px 14px; border-radius: 11px; font-size: 13.5px;
  background: #fdeced; color: #b4342a; border: 1px solid #f8d3d0;
}

/* ==========================================================================
   AGENT PORTAL
   ========================================================================== */
body[data-route="portal"] { background: var(--surface-2); }
body[data-route="portal"] #app { height:100dvh; display:flex; flex-direction:column; }
body[data-route="portal"] #app > .plan-strip { flex-shrink:0; }
body[data-route="portal"] #app > .po-shell { flex:1; min-height:0; height:auto; }
.po-shell { display: grid; grid-template-rows: 58px 1fr; height: 100dvh; overflow: hidden; }
.po-top {
  display: flex; align-items: center; gap: 14px; padding: 0 18px;
  background: var(--surface); border-bottom: 1px solid var(--line); z-index: 20;
}
.po-top .brand { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 700; }
.po-top .brand .logo-mark { width: 28px; height: 28px; border-radius: 8px; }
.po-top .brand .logo-mark svg { width: 15px; height: 15px; }
.po-top .spacer { flex: 1; }
.po-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px;
  border-radius: 999px; background: var(--surface-3); font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.po-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.po-chip.off .dot { background: var(--ink-4); }
.po-chip.clickable { cursor: pointer; }
.po-chip.clickable:hover { background: #e4ece9; }
.po-user {
  display: flex; align-items: center; gap: 9px; padding-left: 14px; margin-left: 4px;
  border-left: 1px solid var(--line); cursor: pointer;
}
.po-user .av {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand); color: #fff; font-size: 12px; font-weight: 700;
}
.po-user b { font-size: 13.5px; display: block; line-height: 1.2; }
.po-user small { font-size: 11.5px; color: var(--ink-4); }

.po-body { display: grid; grid-template-columns: 248px 316px 1fr 300px; min-height: 0; }
.po-body.no-info { grid-template-columns: 248px 316px 1fr; }
/* `.po-body` is a grid row that is already `1fr` tall, but grid rows default to
   stretching their items — without `stretch` + a bounded height the columns grow to
   fit their content and can end up taller than the viewport, which leaves the list
   column's background ending above the fold and reads as a dead gap under the
   header. Pinning the columns to the row height keeps every column's header flush
   with the top of the body. */
.po-body { align-items: stretch; height: 100%; min-height: 0; }
.po-col { min-height: 0; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--line); align-self: stretch; }
.po-col:last-child { border-right: 0; }

.po-rail { background: var(--surface-2); padding: 14px 12px; gap: 4px; }
.rail-item {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px;
  font-size: 14px; font-weight: 500; color: var(--ink-2); cursor: pointer; width: 100%; text-align: left;
}
.rail-item:hover { background: var(--surface-3); }
.rail-item.on { background: var(--brand); color: #fff; font-weight: 600; }
.rail-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.rail-item .cnt {
  margin-left: auto; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px;
  background: var(--surface-3); color: var(--ink-2); font-size: 11.5px; font-weight: 700;
  display: grid; place-items: center;
}
.rail-item.on .cnt { background: rgba(255,255,255,.28); color: #fff; }
.rail-sep { height: 1px; background: var(--line); margin: 10px 6px; }
.rail-label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-4); padding: 8px 12px 4px; }

.po-list { background: var(--surface-2); }
/* Header heights are pinned so the list, chat and info columns all start their
   first row at exactly the same y — an unpinned header whose content is shorter
   than its neighbours is what produced a visible band of empty space above the
   list header. */
.col-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line);
  background: var(--surface); flex-shrink: 0; min-height: 56px; box-sizing: border-box;
}
.col-head h3 { font-size: 14.5px; font-family: var(--font); font-weight: 700; }
.col-head .badge { font-size: 11.5px; font-weight: 700; color: var(--ink-4); }
.col-head .grow { flex: 1; }
.icon-btn { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--ink-3); }
.icon-btn:hover { background: var(--surface-3); }
.icon-btn svg { width: 17px; height: 17px; }
.search-mini { padding: 10px 12px; border-bottom: 1px solid var(--line-2); background: var(--surface); }
.search-mini .box {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px;
  border-radius: 999px; background: var(--surface-3);
}
.search-mini input { flex: 1; border: 0; outline: none; background: transparent; font-size: 13.5px; }
.search-mini svg { width: 15px; height: 15px; color: var(--ink-4); }
.conv-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.conv {
  display: flex; gap: 11px; padding: 12px 14px; cursor: pointer; border-bottom: 1px solid var(--line-2);
  background: var(--surface); position: relative; text-align: left; width: 100%;
}
.conv:hover { background: var(--surface-2); }
.conv.on { background: color-mix(in srgb, var(--brand) 8%, white); }
.conv.on::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--brand); }
.conv .av {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: color-mix(in srgb, var(--brand) 8%, white); color: var(--brand-deep); font-weight: 700; font-size: 15px; position: relative;
  background-size: cover; background-position: center;
}
.conv .av:not([style*="background-image"]) { /* initials circle background stays flat */ }
.conv .av .d { position: absolute; bottom: 2px; right: 2px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--surface); background: #34d399; }
.conv .mid { min-width: 0; flex: 1; }
.conv .mid .r1 { display: flex; align-items: baseline; gap: 8px; }
.conv .conv-name { display:flex; align-items:center; gap:6px; min-width:0; flex:1; }
.conv .conv-app-badge { flex-shrink:0; padding:2px 6px; border:1px solid #bde3d5; border-radius:6px; background:#e7f5ef; color:#00785f; font-size:11px; line-height:18px; font-weight:600; white-space:nowrap; }
.conv .mid b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.conv .mid time { font-size: 11px; color: var(--ink-4); flex-shrink: 0; }
.conv .mid p { font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.conv .unread {
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--brand);
  color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; align-self: center;
}
.conv .tags { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.tag-chip { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface-3); color: var(--ink-3); }
.tag-chip.new { background: color-mix(in srgb, var(--brand) 13%, white); color: var(--brand-deep); }
.tag-chip.hot { background: #fdeced; color: #c0392b; }
.empty-pane { flex: 1; display: grid; place-items: center; text-align: center; padding: 30px; color: var(--ink-4); }
.empty-pane svg { width: 40px; height: 40px; margin: 0 auto 12px; opacity: .5; }
.empty-pane p { font-size: 13.5px; max-width: 30ch; }

.po-chat { display: flex; flex-direction: column; min-height: 0; background: var(--chat-canvas); }
.po-chat-head { position:relative;
  display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: var(--brand, #008064); color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.12); flex-shrink: 0; min-height: 76px; box-sizing: border-box;
}
.po-chat-head .av { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 16px; }
.po-chat-head .inf { min-width: 0; flex: 1; }
.po-chat-head b { font-size: 18px; display: block; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-chat-head .inf > span { display: block; font-size: 13px; color: rgba(255,255,255,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-chat-head .icon-btn { color: #fff; flex-shrink: 0; border-radius: 50%; }
.po-chat-head .icon-btn:hover { background: rgba(255,255,255,.16); }
.po-msgs { flex: 1; overflow-y: auto; padding: 16px 18px; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.po-msgs .day { margin: 8px auto; font-size: 11px; font-weight: 700; color: var(--ink-4); background: var(--surface); padding: 3px 12px; border-radius: 999px; }
.po-bub { max-width: 66%; padding: 9px 13px; border-radius: 15px; font-size: 14px; box-shadow: var(--shadow-sm); }
.po-bub .txt { white-space: pre-wrap; line-height: 1.45; word-wrap: break-word; overflow-wrap: anywhere; }
.po-bub.in { align-self: flex-start; background: var(--surface); border-bottom-left-radius: 5px; }
.po-bub.out { align-self: flex-end; background: color-mix(in srgb, var(--brand) 16%, white); border-bottom-right-radius: 5px; }
.po-bub .meta { font-size: 10.5px; color: var(--ink-4); margin-top: 3px; display: flex; gap: 5px; align-items: center; justify-content: flex-end; }
.po-bub .meta svg { width: 12px; height: 12px; }
.message-failed { color: #b42318; white-space: normal; overflow-wrap: anywhere; }
.po-bub img.att { border-radius: 9px; max-width: 230px; margin-bottom: 5px; }
.po-bub audio { max-width: 220px; height: 34px; }
.po-composer { flex-shrink: 0; border-top: 1px solid var(--line); background: var(--surface); padding: 10px 14px 12px; }
.quick-row { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.quick-row::-webkit-scrollbar { display: none; }
.quick-row button {
  flex-shrink: 0; font-size: 12.5px; font-weight: 600; color: var(--brand-deep);
  background: var(--surface-3); padding: 6px 13px; border-radius: 999px; transition: background-color .15s ease, color .15s ease;
}
.quick-row button:hover { background: color-mix(in srgb, var(--brand) 12%, white); }
.po-input-row #poSend { cursor:pointer; }
.po-input-row { display: flex; align-items: flex-end; gap: 8px; }
.po-input-row .field {
  flex: 1; display: flex; align-items: flex-end; gap: 8px; border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px; background: var(--surface-2);
}
.po-input-row textarea {
  flex: 1; border: 0; outline: none; background: transparent; resize: none; max-height: 110px;
  font-size: 14px; padding: 5px 0; line-height: 1.5; min-height:24px; height:24px; overflow:hidden;
}
.po-input-row textarea::placeholder { white-space:nowrap; }
.tick-delivered { color:#73828a; vertical-align:middle; }
.tick-read { color:#1687e8; vertical-align:middle; }

.po-info { background: var(--surface-2); overflow-y: auto; min-height: 0; }
.info-block { background: var(--surface); border-bottom: 1px solid var(--line); padding: 16px; }
.info-block h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-4); margin-bottom: 12px; font-family: var(--font); font-weight: 700; }
.info-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 6px 0; }
.info-row span { color: var(--ink-4); }
.info-row b { font-weight: 600; text-align: right; word-break: break-word; }
.info-actions { display: grid; gap: 8px; }
.info-actions button { display:flex; align-items:center; gap:9px; width:100%; }
.info-actions button svg { width:17px; height:17px; flex:0 0 17px; }
.visitor-name-line { display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0; }
.visitor-name-line > div { flex-basis:100%; }
.visitor-name-line input { width:150px; padding:7px 9px; border:1px solid var(--line); border-radius:8px; }
/* Stable edit state: fixed-size input + button so the row never stretches
   or shrinks when switching from the static name. */
.visitor-name-line .inline-name-input { width:150px; flex:0 0 auto; }
.visitor-name-line #saveInlineName { flex:0 0 auto; white-space:nowrap; }
/* Name-line edit (pencil) icon: bigger + clearer so it aligns crisply with
   the name instead of rendering as a tiny, faint 17px stroke. */
.visitor-name-line .icon-btn { width:26px; height:26px; border-radius:7px; color:#8a939b; }
.visitor-name-line .icon-btn svg { width:17px; height:17px; }
/* Right-inspector (info column) visitor avatar — force a guaranteed square
   so border-radius:50% renders a perfect circle and never an ellipse, even
   with an uploaded photo or wrapped name line-height. */
.po-info .info-block > div > span.av {
  aspect-ratio: 1 / 1; flex: 0 0 auto; line-height: 1;
  background-position: center !important; background-size: cover !important;
}
.notes-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }
.info-actions button {
  display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px; border-radius: 11px;
  background: var(--surface-2); border: 1px solid var(--line); font-size: 13.5px; font-weight: 500; text-align: left;
}
.info-actions button:hover { border-color: var(--brand); color: var(--brand-deep); }
.info-actions button svg { width: 16px; height: 16px; flex-shrink: 0; }
.notes-area { width: 100%; min-height: 84px; border: 1px solid var(--line); border-radius: 11px; padding: 10px; font-size: 13.5px; resize: vertical; outline: none; }
.notes-area:focus { border-color: var(--brand); }
.chip-toggle { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-toggle button {
  font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-3);
}
.chip-toggle button.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* settings / automations panel */
.modal-veil {
  position: fixed; inset: 0; z-index: 150; background: rgba(6,25,21,.5);
  backdrop-filter: blur(3px); display: grid; place-items: center; padding: 20px;
}
.modal {
  width: min(680px, 100%); max-height: 88dvh; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
/* The body scrolls between the pinned head and foot, so no scrollbar ever
   rides over the popup's rounded corners. */
.modal > .modal-body { flex: 1; min-height: 0; overflow-y: auto; }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 2; }
.modal-head h3 { font-size: 18px; flex: 1; }
.modal-body { padding: 22px 24px; }
.modal-foot { padding: 16px 24px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; position: sticky; bottom: 0; background: var(--surface); }
.auto-row {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line);
  border-radius: 14px; margin-bottom: 10px; background: var(--surface-2);
}
/* A settings input directly above a toggle card would otherwise touch it:
   .field-row only spaces downward via margin-top and .auto-row only via
   margin-bottom, leaving a 0 gap at this adjacency. */
.field-row + .auto-row { margin-top: 14px; }
.auto-row .drag { color: var(--ink-4); cursor: grab; padding-top: 6px; }
.auto-row .grow { flex: 1; display: grid; gap: 9px; }
.auto-row .r1 { display: flex; gap: 9px; align-items: center; }
.auto-row .r1 input[type=number] { width: 78px; }
.auto-row .r1 .lbl { font-size: 12.5px; color: var(--ink-3); }
.auto-row textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font-size: 13.5px; resize: vertical; min-height: 62px; outline: none; }
.auto-row textarea:focus { border-color: var(--brand); }
.switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .sl { position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: .2s; }
.switch .sl::before { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: .2s; box-shadow: var(--shadow-sm); }
.switch input:checked + .sl { background: var(--brand); }
.switch input:checked + .sl::before { transform: translateX(18px); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); padding: 0 24px; position: sticky; top: 69px; background: var(--surface); z-index: 2; overflow-x: auto; scrollbar-width: none; }
/* Inside popups the scroll container is the modal body and the header no
   longer scrolls, so the tabs must stick flush to the top. Two things make
   that airtight: (1) no top padding on a wrapper that starts with tabs —
   a sticky element cannot leave its parent's content box, so any top
   padding stays visible as a band of scrolled content above it; (2) the
   tabs bleed full-width, otherwise the side padding gutters leak scrolled
   content too. Tab text stays aligned via the tabs' own side padding. */
.modal > .modal-body:has(> .tabs:first-child) { padding-top: 0; }
.modal .tabs { top: 0; margin: 0 -24px; }
/* Give every settings pane breathing room below the pinned tab divider. */
.modal > .modal-body > [data-pane] { padding-top: 20px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  padding: 13px 14px; font-size: 13.5px; font-weight: 600; color: var(--ink-4);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs button.on { color: var(--brand-deep); border-bottom-color: var(--brand); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.form-grid .full { grid-column: 1 / -1; }
.swatch-row { display: flex; gap: 9px; flex-wrap: wrap; }
.swatch { width: 34px; height: 34px; border-radius: 10px; border: 2px solid transparent; }
.swatch.on { border-color: var(--ink); box-shadow: 0 0 0 2px #fff inset; }
.help { font-size: 12.5px; color: var(--ink-4); margin-top: 6px; line-height: 1.5; }
.toast-stack { position: fixed; bottom: 22px; right: 22px; z-index: 400; display: grid; gap: 10px; }
.toast {
  background: var(--ink); color: #fff; padding: 13px 18px; border-radius: 13px;
  font-size: 14px; box-shadow: var(--shadow-lg); display: flex; gap: 10px; align-items: center;
  animation: slideIn .25s ease;
}
.toast svg { width: 17px; height: 17px; color: #4ade80; flex-shrink: 0; }
@keyframes slideIn { from { opacity: 0; transform: translateY(12px); } }

/* install banner */
.install-bar {
  position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 180;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-lg); padding: 13px 15px; display: flex; align-items: center; gap: 12px;
  max-width: 500px; margin: 0 auto;
}
.install-bar .ic { width: 40px; height: 40px; border-radius: 11px; background: var(--brand); display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.install-bar .ic svg { width: 20px; height: 20px; }
.install-bar .tx { flex: 1; min-width: 0; }
.install-bar b { font-size: 14px; display: block; }
.install-bar small { font-size: 12.5px; color: var(--ink-3); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1280px) {
  .po-body { grid-template-columns: 220px 300px minmax(0,1fr); }
  .po-body .po-info { display:none; }
}
@media (max-width: 1080px) {
  .po-body { grid-template-columns: 210px 280px 1fr; }
  .po-body .po-info { position: fixed; right: 0; top: 58px; bottom: 0; width: 320px; z-index: 40; box-shadow: var(--shadow-lg); border-left: 1px solid var(--line); }
  .po-body.no-info .po-info { display: none; }
  .prices { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .topbar .wrap { position:relative; }
  .topbar .nav { display:flex; position:absolute; top:calc(100% + 8px); left:14px; right:14px; margin:0; z-index:80; flex-direction:column; align-items:stretch; gap:0; padding:8px; max-height:calc(100dvh - var(--header-h) - 24px); overflow-y:auto; overscroll-behavior:contain; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 8px 24px rgba(20,45,38,.08); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-10px); transform-origin:top; transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s; }
  .topbar .nav.open { opacity:1; visibility:visible; pointer-events:auto; transform:none; transition-delay:0s; }
  .nav .nav-caption { display:block; padding:12px 14px 10px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
  .topbar .nav a { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:52px; padding:12px 14px; border-radius:8px; font-size:16px; font-weight:600; color:var(--ink); transition:background .15s ease,color .15s ease; }
  .topbar .nav a+a { border-top:1px solid var(--line-2); }
  .topbar .nav a::after { content:''; width:7px; height:7px; margin-right:4px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:rotate(45deg); color:var(--brand); }
  .topbar .nav a:hover,.topbar .nav a:focus-visible { background:var(--surface-2); color:var(--brand); }
  .burger { display: grid; place-items: center; }
  .grid-3, .steps { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .po-body { grid-template-columns: 280px minmax(0,1fr); }
  .po-body .po-rail { display:none; }
  .po-body .po-info { display: none; }
}
@media (max-width: 850px) and (min-width: 721px) {
  .po-body { grid-template-columns: 280px minmax(0,1fr); }
  .po-body .po-rail { display:none; }
  .po-body .po-info { display:none; }
  .po-list, .po-chat { min-width:0; }
}
@media (max-width: 560px) {
  .topbar .wrap { padding:10px 14px; gap:8px; }
  .logo { font-size:18px; }
  .actions { gap:6px; }
  .actions .btn { padding:9px 12px; font-size:12px; }
  .actions .btn-primary { display:none; }
}
@media (max-width: 720px) {
  section { padding: 60px 0; }
  .grid-3, .steps { grid-template-columns: 1fr; }
  .cmp { overflow-x: auto; }
  .cmp table { min-width: 620px; }
  .po-body { grid-template-columns: 1fr; }
  .po-rail { display: none; }
  .po-body.list-view .po-chat { display: none; }
  .po-body:not(.list-view) .po-list { display: none; }
  #backToList { display:grid !important; }
  .po-top .brand span { display: none; }
  html, body, #app, .po-shell { width:100%; max-width:100%; overflow-x:hidden; }
  .po-body, .po-list, .po-chat, .po-chat-head, .po-msgs, .po-composer { min-width:0; max-width:100%; overflow-x:hidden; }
  /* The portal header packs 2 chips + icon buttons + the user block; below
     tablet widths their combined min-content overflows the viewport and the
     overflow-x guard above clips the right side. Compress and let the user
     name truncate instead of forcing width. */
  .po-top { gap: 8px; padding: 0 12px; }
  .po-chip { flex-shrink: 0; white-space: nowrap; height: 32px; padding: 0 10px; font-size: 12.5px; }
  .po-top .icon-btn { flex-shrink: 0; }
  .po-user { min-width: 0; flex-shrink: 1; padding-left: 8px; margin-left: 0; }
  .po-user > div { min-width: 0; }
  .po-user b, .po-user small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .po-chat-head { padding-left:12px; padding-right:8px; overflow:visible; z-index:2; }
  .po-chat-head .actions { flex-shrink:0; gap:2px; }
  .po-chat-head .icon-btn { width:34px; height:34px; }
  .po-composer { padding-left:10px; padding-right:10px; }
  .quick-row { width:100%; max-width:100%; overflow-x:auto; }
  .po-input-row { min-width:0; width:100%; }
  .po-input-row .field { min-width:0; }
  .po-input-row textarea { min-width:0; }
}
/* Very small phones: the live-visitors chip is supplementary — hiding it
   keeps the header (presence toggle + actions + user) fully on screen. */
@media (max-width: 480px) {
  #liveChip { display: none; }
}
@media (max-width: 560px) {
  .hero-copy-hide { display: none; }
  .prices { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Admin console — Team & agents
   ========================================================================== */
.tm-intro {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--ink-3, #6b7280);
  line-height: 1.55;
}
.tm-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 2px 12px;
  border-bottom: 1px solid var(--line, #eceff3);
  margin-bottom: 6px;
}
.tm-head-txt { font-size: 13px; color: var(--ink-3, #6b7280); }
.tm-head-txt b { color: var(--ink-1, #111827); }

.tm-list { display: grid; gap: 2px; max-height: 46vh; overflow-y: auto; }

.tm-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 10px;
  border-radius: 12px;
  transition: background .13s ease;
}
.tm-row + .tm-row { border-top: 1px solid var(--line, #f1f3f6); }
.tm-row:hover { background: var(--surface-2, #fafbfc); }

.tm-av {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 14px;
  letter-spacing: .2px;
}
.tm-main { flex: 1; min-width: 0; }
.tm-name {
  display: flex; align-items: center; gap: 7px;
  font-weight: 650; font-size: 14.5px;
  color: var(--ink-1, #111827);
  flex-wrap: wrap;
}
.tm-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

.tm-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  background: var(--surface-3, #f1f3f6);
  color: var(--ink-3, #6b7280);
}
.tm-tag.admin { background: #e8edff; color: #3352cc; }
.tm-tag.you   { background: color-mix(in srgb, var(--brand) 8%, white); color: var(--brand-deep, #0b7a5b); }

.tm-sub {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ink-3, #6b7280);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tm-sub b { color: #c2410c; }

.tm-link {
  display: flex; align-items: center; gap: 6px;
  margin-top: 7px;
  font-size: 12px;
  color: var(--ink-4, #9ca3af);
  min-width: 0;
}
.tm-link svg { flex: none; width: 13px; height: 13px; }
.tm-link code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  background: var(--surface-3, #f4f6f8);
  padding: 2px 7px;
  border-radius: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-2, #374151);
}

.tm-actions { display: flex; gap: 3px; flex: none; padding-top: 2px; }
.tm-actions .icon-btn.danger:hover { color: #dc2626; background: #fef2f2; }

.tm-note {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 16px; padding: 11px 13px;
  background: var(--surface-2, #f7f9fa);
  border: 1px solid var(--line, #e9edf1);
  border-radius: 11px;
  font-size: 12.5px;
  color: var(--ink-3, #6b7280);
  line-height: 1.5;
}
.tm-note svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--brand, #0f9d76); }
.tm-note code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: #fff; padding: 1px 6px; border-radius: 5px;
  border: 1px solid var(--line, #e9edf1);
}

@media (max-width: 560px) {
  .tm-actions { flex-wrap: wrap; max-width: 84px; justify-content: flex-end; }
  .tm-row { padding: 12px 6px; }
}

/* Workspace sections must not inherit marketing-page spacing. */
.po-body > .po-col { padding: 0; min-width: 0; }
.po-body > .po-rail { padding: 14px 12px; overflow-y: auto; }
.po-shell { grid-template-rows: 58px minmax(0,1fr); }
.btn svg, .auto-row .drag svg { width: 18px; height: 18px; flex: 0 0 18px; }
.auto-row .grow { min-width:0; }
.auto-row .r1 { flex-wrap:wrap; }
.chat-head { min-height:76px; flex-shrink:0; color:#fff; background:var(--chat-accent, #075e50); box-shadow:0 2px 8px #0002; z-index:10; }
.chat-head .who b { font-size:18px; }
.chat-head .who span { font-size:13px; opacity:1; }
.chat-head .hbtn { color:#fff; flex-shrink:0; min-width:42px; min-height:42px; }
.mobile-profile { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:rgba(8,25,22,.42); }
.mobile-profile-card { position:relative; width:min(420px,100%); max-height:90vh; overflow:auto; padding:28px 22px 22px; border-radius:22px; background:#fff; box-shadow:0 22px 70px rgba(0,0,0,.25); text-align:center; }
.profile-close { position:absolute; top:12px; right:12px; }
.profile-avatar { width:68px; height:68px; margin:0 auto 10px; display:grid; place-items:center; border-radius:50%; background:var(--brand); color:#fff; font-size:22px; font-weight:800; }
.mobile-profile-card h2 { margin:0; font-size:22px; }
.mobile-profile-card p { margin:5px 0 20px; color:var(--ink-3); }
.mobile-profile-card label { display:grid; gap:7px; text-align:left; font-size:12px; font-weight:700; color:var(--ink-3); }
.mobile-profile-card input { width:100%; box-sizing:border-box; padding:11px 12px; border:1px solid var(--line); border-radius:10px; outline:none; font-size:14px; }
.mobile-profile-card #profileSave { width:100%; margin-top:12px; }
.profile-actions { display:grid; gap:8px; margin-top:20px; border-top:1px solid var(--line); padding-top:16px; }
.profile-actions button { padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); text-align:left; }
.mobile-bottom-nav { display:none; }
@media (max-width:767px) {
  .settings-section .form-grid { grid-template-columns:minmax(0,1fr); }
  .po-shell:has(.po-body:not(.list-view) .po-chat-head) { grid-template-rows: minmax(0,1fr); }
  .po-shell:has(.po-body:not(.list-view) .po-chat-head) > .po-top { display: none; }
  .po-chat-head { gap: 8px; }
  .mobile-bottom-nav { position:fixed; display:flex; left:0; right:0; bottom:0; z-index:60; height:58px; background:rgba(255,255,255,.98); border-top:1px solid var(--line); justify-content:space-around; padding-bottom:env(safe-area-inset-bottom); }
  .mobile-bottom-nav button { border:0; background:none; color:var(--ink-3); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:10px; font-weight:700; min-width:0; flex:1; min-height:44px; }
.mobile-bottom-nav button svg { width:19px; height:19px; }
.mobile-more-menu { position:fixed; right:12px; bottom:66px; z-index:80; display:grid; gap:3px; min-width:200px; padding:8px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); }
.mobile-more-menu button { display:flex; align-items:center; gap:12px; width:100%; border:0; background:transparent; text-align:left; padding:12px 14px; min-height:48px; border-radius:8px; font-size:14px; font-weight:600; }
.mobile-more-menu button svg { width:20px; height:20px; flex-shrink:0; color:var(--ink-3); }
.mobile-more-menu button:hover { background:var(--surface-2); }
.mobile-more-menu .mm-sep { height:1px; background:var(--line); margin:5px 6px; }
.mobile-more-menu button.danger, .mobile-more-menu button.danger svg { color:#b42318; }
  .po-shell { padding-bottom:58px; }
}
.admin-shell { min-height:100dvh; background:var(--surface-2); }
.chat-review-tools { padding:12px 14px; display:flex; gap:8px; flex-wrap:wrap; border-bottom:1px solid var(--line); background:var(--surface); flex-shrink:0; }
.chat-review-tools .btn { flex:1 1 auto; min-height:40px; font-size:13px; padding:8px 10px; white-space:normal; border-radius:9px; }
.chat-review-tools p { width:100%; margin:0; color:var(--ink-3); font-size:12px; line-height:1.5; }
.requests-shortcut span { border-radius:6px; padding:1px 6px; background:var(--surface-3); }
.chat-request-notice { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px; background:#eef8f5; border-bottom:1px solid var(--line); flex-shrink:0; }
.chat-request-notice[hidden],.chat-request-actions[hidden],.visitor-request-notice[hidden] { display:none; }
.chat-request-notice strong { font-size:16px; }
.chat-request-notice p { margin:6px 0; font-size:14px; line-height:1.5; color:var(--ink-2); }
.chat-request-notice small { color:var(--ink-3); font-size:12px; }
.chat-request-actions { display:flex; gap:12px; flex-shrink:0; }
.chat-request-actions .btn { min-height:44px; border-radius:9px; white-space:nowrap; }
.visitor-request-notice { margin:0; padding:12px 16px; background:#eef8f5; color:var(--ink-2); font-size:14px; line-height:1.5; flex-shrink:0; }
@media(max-width:1023px) { .chat-request-notice { flex-direction:column; align-items:stretch; gap:12px; }.chat-request-actions .btn { flex:1; }.chat-review-tools .btn { min-height:44px; font-size:14px; } }
.admin-top { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:80px; padding:16px 24px; background:var(--surface); border-bottom:1px solid var(--line); }
.admin-brand { display:flex; align-items:center; gap:12px; min-width:0; }
.admin-brand .logo-mark { width:40px; height:40px; border-radius:12px; flex-shrink:0; }
.admin-brand .logo-mark svg { width:22px; height:22px; }
.admin-brand-copy { display:grid; gap:3px; }
.admin-brand-copy strong { font-family:var(--font); font-size:19px; line-height:1.3; letter-spacing:-.3px; }
.admin-brand-copy small { color:var(--ink-3); font-size:12px; line-height:1.4; font-weight:500; }
.admin-top-actions { display:flex; align-items:center; gap:10px; }
.admin-main { max-width:1100px; margin:auto; padding:36px 22px; }
.admin-actions { display:flex; gap:12px; flex-wrap:wrap; margin:24px 0; }
.admin-roster { background:white; border:1px solid var(--line); border-radius:16px; padding:16px; }
.admin-roster a { color:var(--brand-deep); overflow-wrap:anywhere; }
.admin-shell .btn { border-radius:9px; box-shadow:none; }
.admin-roster { border-radius:10px; padding:8px 16px; }
.admin-roster .tm-row { align-items:center; padding:20px 0; }
.admin-roster .tm-main h3 { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 8px; font-family:var(--font); font-size:17px; line-height:1.4; overflow-wrap:anywhere; }
.admin-roster .plan-badge { margin:0; flex-shrink:0; }
.admin-roster .tm-main p { margin:0 0 8px; font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.admin-roster .tm-main > a { display:block; font-size:14px; line-height:1.5; }
.admin-agent-actions { display:flex; gap:8px; flex-shrink:0; flex-wrap:wrap; }
@media(max-width:767px) {
 .admin-top { padding:16px; gap:16px; flex-direction:column; align-items:stretch; }
 .admin-top-actions { display:grid; grid-template-columns:1.2fr 1fr; gap:10px; }
 .admin-main { padding:24px 12px; }
 .admin-main h1 { font-size:24px; line-height:1.3; }
 .admin-main > p { font-size:14px; line-height:1.5; }
 .admin-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:20px 0; }
 .admin-shell .btn { min-height:44px; height:auto; padding:10px 12px; font-size:14px; }
 .admin-actions .btn { white-space:normal; text-align:center; }
 .admin-actions #adminWebsiteContact { grid-column:1/-1; }
 .admin-roster { padding:0 16px; }
 .admin-roster .tm-row { flex-direction:column; align-items:stretch; gap:16px; }
 .admin-roster .tm-main { width:100%; }
 .admin-agent-actions { width:100%; padding-top:12px; border-top:1px solid var(--line); }
 .admin-agent-actions .btn { flex:1 1 110px; }
}
@media(max-width:760px) { .po-body.no-info { grid-template-columns:1fr; } .chat-head { gap:8px; padding-left:12px; padding-right:12px; } .hbtn-save { padding:0 10px; gap:6px; } }

.auto-row label:not(.switch) { display:grid; gap:6px; font-size:13px; }
.auto-row select, .auto-row input[data-label], .auto-row input[data-url] { width:100%; min-width:0; }
.reply-chips .quick-option { display:inline-flex; align-items:center; padding:8px 14px; border:1px solid var(--chat-line); border-radius:999px; background:white; color:var(--brand-deep); font-size:13px; font-weight:600; white-space:nowrap; flex-shrink:0; }

/* Support flow editor */
.flow-step{padding:18px;margin:16px 0;border:1px solid var(--border,#dce4e0);border-radius:12px}.flow-step label,.flow-grid label{display:block;font-size:13px;font-weight:600;margin-bottom:12px}.flow-step .input,.flow-grid .input{display:block;width:100%;margin-top:6px}.flow-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.flow-option{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center;margin-bottom:12px}.flow-option [data-choice-url]{grid-column:1/-1}.flow-option [data-remove-option]{grid-column:1/-1;justify-self:end}.flow-toggle{display:flex;gap:8px;margin:18px 0}.flow-actions{display:flex;gap:10px;flex-wrap:wrap}.flow-step textarea{resize:vertical;min-height:90px}#flowError{color:#b42318}
.flow-step.flow-error{border:1px solid #e5484d;box-shadow:0 0 0 2px rgba(229,72,77,.18)}
.flow-step.flow-error [data-key].bad,.flow-step.flow-error .bad{border-color:#e5484d !important}#infoCol dd{margin:4px 0 12px;overflow-wrap:anywhere}@media(max-width:600px){.flow-grid,.flow-option{grid-template-columns:1fr}}

/* ---- fix pack: unified brand, focus, modal a11y, guide highlight ---- */
:root { --brand-unified: #0f9d76; --focus: #0f9d76; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
textarea:focus { outline: none; }
textarea:focus-visible { outline: none; }
.chat-input .field:focus-within { border-color: var(--chat-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--chat-accent) 22%, transparent); }
.po-input-row .field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 18%, transparent); }
.chat-input textarea, .po-input-row textarea { outline: none !important; box-shadow: none !important; }

/* Shared visitor and agent footer, matching the reference composer. */
.message-footer { position: relative; overflow: visible; background: #fff; border-top: 1px solid #dce3e8; padding: 8px 12px 6px; }
.message-footer .message-composer { display: flex; align-items: center; gap: 8px; min-width: 0; }
.message-composer > .ibtn, .message-composer > .icon-btn {
  display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 44px;
  padding: 0; border: 0; border-radius: 999px; background: transparent; color: #78818c;
}
.message-composer > .ibtn svg, .message-composer > .icon-btn svg { width: 26px; height: 26px; stroke-width: 2; }
.message-composer .field {
  flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center;
  padding: 8px 18px; border: 1px solid #dce3e8; border-radius: 29px; background: #f5f7f2;
}
.message-composer .field:focus-within { border-color: #dce3e8; box-shadow: none; }
.message-composer .field textarea {
  display: block; width: 100%; min-width: 0; min-height: 22px; height: 22px; max-height: 110px;
  padding: 0; margin: 0; border: 0; resize: none; background: transparent;
  font-size: 14px; font-weight: 400; line-height: 22px; color: #111b21; overflow-y: hidden;
}
.message-composer .field textarea::placeholder { color: #78818c; opacity: 1; }
.message-composer > .composer-action {
  display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 50%; background: #006b57; color: #fff; cursor: pointer;
}
.message-composer > .composer-action svg { width: 26px; height: 26px; stroke-width: 2; }
.message-composer > .composer-action:hover { background: #005d4b; }
.message-composer > .composer-action:active { transform: scale(.95); }
.message-footer .quick-row:empty { display: none; }
@media (max-width: 400px) {
  .message-footer { padding-left: 6px; padding-right: 8px; }
  .message-footer .message-composer { gap: 4px; }
  .message-composer > .ibtn, .message-composer > .icon-btn { flex-basis: 34px; width: 34px; }
  .message-composer .field { padding-left: 14px; padding-right: 14px; }
  .message-composer .field textarea { font-size: 14px; }
  .message-composer > .composer-action { flex-basis: 44px; width: 44px; height: 44px; }
}
.modal-veil { background: rgba(6,25,21,.55); }
.modal { box-shadow: var(--shadow-lg); }
.empty-pane { text-align: center; color: var(--ink-3); padding: 32px 18px; }
.empty-pane svg { width: 34px; height: 34px; margin: 0 auto 10px; color: var(--ink-4); }
.tutorial-step { text-align: center; padding: 8px 4px; }
.tutorial-step .tutorial-icon { width: 52px; height: 52px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 14px; background: var(--surface-3); color: var(--brand-deep); }
.tutorial-step .tutorial-icon svg { width: 26px; height: 26px; }

/* ---- agent plan notices: full-width top strip + roster badges ---- */
.plan-strip { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 14px; background: var(--brand-ink, #0c3b32); color: #fff; font-size: 13.5px; font-weight: 500; letter-spacing: .01em; line-height: 1.5; text-align: center; }
.plan-text { flex: 1; min-width: 0; text-align: center; }
.plan-dismiss { flex-shrink: 0; border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; border-radius: 999px; width: 26px; height: 26px; font-size: 12px; cursor: pointer; }
.plan-dismiss:hover { background: rgba(255,255,255,.15); }
.plan-badge { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 8%, white); color: var(--brand-ink, #0c3b32); font-size: 12px; font-weight: 700; vertical-align: middle; }
.plan-badge.expired { background: #fde8e8; color: #b42318; }
.tm-tag.deactivated { background: #fde8e8; color: #b42318; border: 1px solid #f3c2c0; }
.plan-blocked { max-width: 560px; margin: 72px auto; padding: 32px 26px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.plan-blocked h2 { margin: 0 0 10px; }
.plan-blocked p { color: var(--ink-3); }
/* Agent-owned business profile photo and visitor profile card. */
.business-profile-trigger { padding:0; border:0; background:transparent; color:inherit; cursor:pointer; flex-shrink:0; }
.business-profile-trigger:focus-visible { outline:3px solid #fff; outline-offset:5px; border-radius:50%; }
.profile-photo-editor { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.profile-photo-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.profile-photo-preview { width:88px; height:88px; flex-shrink:0; border:0; padding:0; cursor:pointer; border-radius:16px; overflow:hidden; display:grid; place-items:center; background:#edf6f3; color:#134e4a; font-size:28px; font-weight:700; }
.profile-photo-preview:focus-visible { outline:3px solid var(--brand,#008064); outline-offset:3px; }
.profile-photo-preview img { width:100%; height:100%; object-fit:cover; }

/* All settings shares the inbox rail and uses the entire remaining workspace. */
.po-body.settings-view { grid-template-columns:248px minmax(0,1fr); }
.po-page { min-width:0; min-height:0; overflow-y:auto; padding:26px 24px; background:var(--surface); }
.po-page-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.po-page-head h1 { font-size:23px; line-height:1.3; margin:0 0 5px; }
.po-page-head p { font-size:13px; color:var(--ink-3); margin:0; }
.settings-top-tabs { display:flex; border-bottom:1px solid var(--line); margin-bottom:16px; gap:12px; }
.settings-top-tabs button { display:flex; justify-content:center; align-items:center; gap:12px; flex:1; padding:14px 12px; border-bottom:3px solid transparent; color:var(--ink-2); font-size:13px; white-space:nowrap; cursor:pointer; }
.settings-top-tabs button svg { width:18px; height:18px; }
.settings-top-tabs button.on { color:var(--brand); border-bottom-color:var(--brand); font-weight:700; }
.settings-top-tabs button:hover { background:var(--surface-2); }
.settings-section { border:0; border-radius:0; padding:16px 0; box-shadow:none; }
.settings-section h2 { font-size:16px; margin:0 0 4px; }
.settings-section > .help { margin:0 0 24px; }
.desk-settings-layout { display:grid; grid-template-columns:160px minmax(0,1fr); gap:28px; align-items:start; }
.desk-settings-layout #setTabs { display:flex; flex-direction:column; position:static; padding:0; gap:4px; border:0; border-left:3px solid var(--line); overflow:visible; background:transparent; }
.desk-settings-layout #setTabs button { font-size:13px; padding:12px 16px; border:0; border-left:3px solid transparent; margin-left:-3px; text-align:left; border-radius:0 7px 7px 0; }
.desk-settings-layout #setTabs button.on { background:linear-gradient(90deg,#edf7f4,#f1f7fc); color:var(--brand); border-left-color:var(--brand); font-weight:700; }
.desk-settings-content { min-width:0; }
.desk-settings-content [data-pane="brand"] { display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,.85fr); gap:28px; align-items:start; }
.desk-settings-content [data-pane="brand"] > .help { grid-column:1/-1; margin:0; }
.desk-settings-content [data-pane="brand"] > .form-grid { gap:18px 14px; }
.settings-section [hidden] { display:none !important; }
.settings-section .field-row label { font-size:12px; }
.settings-section .input { border-radius:10px; min-width:0; }
.settings-section .form-actions { padding-top:18px; margin-top:22px; border-top:1px solid var(--line); }
.brand-preview { background:linear-gradient(135deg,#f0faf6,#eef7f5); padding:20px 18px; border-radius:10px; min-width:0; }
.brand-preview > b { font-size:12px; }
.brand-preview > .help { font-size:12px; margin:5px 0 14px; }
.brand-preview-card { display:flex; align-items:center; gap:12px; padding:16px; background:var(--surface); border-radius:16px; box-shadow:0 10px 24px rgba(0,90,67,.09); }
.brand-preview-card > div { flex:1; min-width:0; }
.brand-preview-card b { display:block; overflow-wrap:anywhere; font-size:15px; }
.brand-preview-card p { color:var(--ink-3); margin:4px 0 0; font-size:13px; }
.brand-preview-avatar { position:relative; width:54px; height:54px; flex-shrink:0; border-radius:16px; background:var(--surface-3); display:grid; place-items:center; overflow:hidden; color:var(--brand); font-weight:700; }
.brand-preview-avatar img { width:100%; height:100%; object-fit:cover; }
.brand-preview-chat { display:grid; place-items:center; border-radius:50%; background:#00c853; color:white; width:46px; height:46px; flex-shrink:0; }
.brand-preview-chat svg { width:26px; height:26px; }
.settings-subtabs { display:flex; gap:8px; margin-bottom:18px; }
.settings-subtabs button { padding:9px 16px; border-radius:8px; cursor:pointer; color:var(--ink-3); }
.settings-subtabs button.on { color:var(--brand); background:var(--surface-3); font-weight:600; }
.ad-link-layout { display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:32px; align-items:start; }
.ad-link-layout label { display:block; font-size:13px; font-weight:600; margin-bottom:8px; }
.ad-link-copy { display:flex; gap:10px; }
.ad-link-copy input { flex:1; width:0; }
.ad-qr { text-align:center; padding:16px; background:var(--surface-2); border-radius:12px; }
.ad-qr img { width:190px; max-width:100%; aspect-ratio:1; border-radius:8px; }
.workspace-tools { margin-top:28px; border-top:1px solid var(--line); padding-top:20px; display:flex; gap:12px; flex-wrap:wrap; }
.workspace-tools h3 { width:100%; font-size:14px; margin:0; }
#railSettings > svg:last-child { margin-left:auto; width:15px; }
@media (max-width:1400px) {
  .desk-settings-content [data-pane="brand"] { grid-template-columns:minmax(0,1fr) 280px; gap:20px; }
  .desk-settings-layout { grid-template-columns:140px minmax(0,1fr); gap:20px; }
}
@media (max-width:1200px) {
  .po-body.settings-view { grid-template-columns:220px minmax(0,1fr); }
  .desk-settings-content [data-pane="brand"] { grid-template-columns:minmax(0,1fr); }
  .brand-preview { max-width:420px; }
}
@media (max-width:960px) {
  .po-body.settings-view { grid-template-columns:minmax(0,1fr); }
  .settings-view > .po-rail { display:none; }
  .po-page { padding:20px 16px; }
}
@media (max-width:600px) {
  .po-page { padding:18px 12px; }
  .po-page-head { align-items:flex-start; gap:10px; }
  .po-page-head h1 { font-size:21px; }
  .po-page-head p { font-size:12px; }
  .settings-top-tabs { gap:0; overflow-x:auto; }
  .settings-top-tabs button { padding:12px 6px; gap:6px; font-size:12px; flex-direction:column; white-space:normal; min-width:0; }
.settings-section { padding:12px 0; }
  .desk-settings-layout { grid-template-columns:minmax(0,1fr); gap:18px; }
  .desk-settings-layout #setTabs { flex-direction:row; border-left:0; border-bottom:1px solid var(--line); overflow-x:auto; }
  .desk-settings-layout #setTabs button { white-space:nowrap; border-left:0; margin:0; padding:10px 12px; }
  .ad-link-layout { grid-template-columns:minmax(0,1fr); }
  .ad-qr { max-width:260px; }
}
.business-profile { text-align:center; padding:8px 0; }
.settings-overview-back { display:none; }
.flow-entry-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:8px 0 16px; border-bottom:1px solid var(--line); margin-bottom:16px; font-size:13px; }
.auto-flow-entry { display:flex; align-items:center; gap:14px; margin-top:20px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.auto-flow-entry .help { margin:0; }
.auto-rule-help { font-size:12px; color:var(--ink-3); margin:12px 0 6px; }
.auto-rule-help summary { cursor:pointer; }
.auto-rule-help .help { margin:10px 0; }
.auto-list-toolbar { display:flex; align-items:center; gap:12px; margin:20px 0 8px; }
.auto-list-toolbar h3 { margin:0; }
#autoDraftStatus { color:var(--ink-3); font-size:12px; margin-left:auto; }
.auto-rule-summary { display:flex; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); min-width:0; }
.auto-rule-copy { flex:1; min-width:0; }
.auto-rule-copy b { font-size:14px; }
.auto-rule-meta { display:flex; flex-wrap:wrap; gap:5px 14px; margin-top:6px; color:var(--ink-3); font-size:12px; }
.auto-rule-copy p { font-size:13px; line-height:1.5; color:var(--ink-2); margin:8px 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.auto-rule-url { display:block; font-size:11px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:5px; }
.auto-save-error:not(:empty) { margin:12px 0; padding:10px 12px; color:#b42318; background:#fff2f1; border-radius:8px; font-size:13px; }
.auto-empty { padding:24px 0; color:var(--ink-3); font-size:13px; }
.auto-rule-editor { position:fixed; top:76px; right:24px; bottom:24px; width:400px; z-index:65; display:flex; flex-direction:column; background:white; border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 36px #173e3524; }
.auto-editor-head { display:flex; gap:12px; align-items:flex-start; padding:18px; border-bottom:1px solid var(--line); }
.auto-editor-head > div { flex:1; min-width:0; }
.auto-editor-head h3 { margin:0; font-size:16px; }
.auto-editor-head p { margin:6px 0 0; font-size:12px; color:var(--ink-3); }
.auto-editor-fields { overflow-y:auto; flex:1; padding:18px; min-height:0; display:flex; flex-direction:column; gap:16px; }
.auto-editor-fields > label { font-size:12px; font-weight:600; display:block; }
.auto-editor-fields .input { display:block; width:100%; margin-top:7px; }
.auto-editor-fields textarea { resize:vertical; min-height:140px; }
.auto-editor-delay { display:flex; align-items:center; gap:12px; }
.auto-editor-delay input { max-width:120px; }
.auto-editor-delay span { color:var(--ink-3); font-weight:400; }
.auto-editor-fields .auto-editor-enabled { display:flex; justify-content:space-between; align-items:center; }
.auto-editor-foot { display:flex; justify-content:space-between; gap:12px; padding:16px 18px; border-top:1px solid var(--line); }
@media (min-width:1280px) { #autoMessagesBody.has-auto-editor { padding-right:440px; } }
@media (max-width:767px) {
  .auto-list-toolbar { flex-wrap:wrap; gap:10px; }
  .auto-list-toolbar #autoAdd { min-height:44px; }
  .auto-rule-summary { gap:10px; }
  .auto-rule-summary [data-edit] { min-height:44px; }
  .auto-flow-entry { align-items:flex-start; flex-direction:column; gap:8px; }
  .auto-rule-editor { inset:58px 0 58px; width:auto; border-radius:0; border-left:0; border-right:0; }
  .auto-editor-head .icon-btn { min-width:44px; min-height:44px; }
  .auto-editor-foot .btn { min-height:44px; }
  .auto-editor-fields .input { min-height:44px; }
  .auto-editor-fields textarea.input { min-height:140px; }
  .auto-rule-summary .switch { height:44px; width:44px; display:flex; align-items:center; }
  .auto-rule-summary .switch .sl { inset:10px 1px; }
}
.auto-rule-summary .switch:has(input:focus-visible) { outline:2px solid var(--brand); outline-offset:3px; border-radius:8px; }
/* Settings workspace: one readable scale and bounded, flat form sections. */
.po-page:not(.flow-builder-mode) { --settings-muted:#596b70; }
.po-page:not(.flow-builder-mode) .po-page-head h1 { font-family:var(--font); font-size:26px; font-weight:650; line-height:1.3; }
.po-page:not(.flow-builder-mode) .po-page-head p { font-size:14px; line-height:1.5; color:var(--settings-muted); }
.po-page:not(.flow-builder-mode) .btn { height:42px; min-height:42px; border-radius:9px; padding:0 16px; font-size:14px; box-shadow:none; }
.po-page:not(.flow-builder-mode) .settings-top-tabs { gap:8px; margin-bottom:12px; }
.po-page:not(.flow-builder-mode) .settings-top-tabs button { flex:0 1 auto; padding:12px 20px; font-size:14px; gap:9px; }
.po-page:not(.flow-builder-mode) .settings-section { padding:16px 0 0; }
.po-page:not(.flow-builder-mode) .settings-section h2 { font-family:var(--font); font-size:18px; font-weight:650; line-height:1.4; }
.po-page:not(.flow-builder-mode) .settings-section h3 { font-family:var(--font); font-size:16px; font-weight:600; line-height:1.4; margin-bottom:14px; }
.po-page:not(.flow-builder-mode) .settings-section > .help { margin:4px 0 20px; }
.po-page:not(.flow-builder-mode) .settings-section .help { font-size:13px; line-height:1.55; color:var(--settings-muted); }
.po-page:not(.flow-builder-mode) .settings-section label { font-size:14px; font-weight:500; line-height:1.4; }
.po-page:not(.flow-builder-mode) .settings-section .input { font-size:15px; min-height:42px; height:42px; border-radius:9px; padding:9px 12px; }
.po-page:not(.flow-builder-mode) .settings-section textarea.input { height:auto; min-height:96px; resize:vertical; }
.po-page:not(.flow-builder-mode) .settings-section .form-grid { gap:20px 16px; align-items:start; }
.po-page:not(.flow-builder-mode) .brand-fields > .form-grid > h3 { margin:0; }
.po-page:not(.flow-builder-mode) .settings-contact { padding-bottom:0; }
.po-page:not(.flow-builder-mode) #settings-panel-other > .form-actions { border-top:0; margin-top:0; }
.po-page:not(.flow-builder-mode) .settings-section .form-actions { margin-top:20px; padding-top:16px; }
.po-page:not(.flow-builder-mode) .desk-settings-layout { grid-template-columns:144px minmax(0,1fr); gap:24px; }
.po-page:not(.flow-builder-mode) .desk-settings-layout #setTabs button { font-size:14px; padding:11px 14px; }
.po-page:not(.flow-builder-mode) .desk-settings-layout #setTabs button.on { background:#edf7f4; }
.po-page:not(.flow-builder-mode) .desk-settings-content [data-pane="brand"] { grid-template-columns:minmax(0,600px) minmax(260px,340px); gap:20px 24px; }
.po-page:not(.flow-builder-mode) .desk-settings-content [data-pane="channels"],
.po-page:not(.flow-builder-mode) .desk-settings-content [data-pane="account"],
.po-page:not(.flow-builder-mode) .desk-settings-content > .form-actions { max-width:600px; }
.po-page:not(.flow-builder-mode) .brand-preview { background:#f1f8f5; padding:16px; border-radius:10px; }
.po-page:not(.flow-builder-mode) .brand-preview > b { font-size:14px; }
.po-page:not(.flow-builder-mode) .brand-preview-message { font-size:14px; margin:12px 0; padding:12px; }
.po-page:not(.flow-builder-mode) .brand-preview-card { padding:12px; }
.po-page:not(.flow-builder-mode) .profile-photo-preview { width:72px; height:72px; border-radius:10px; }
.po-page:not(.flow-builder-mode) #otherSettingsFields,
.po-page:not(.flow-builder-mode) #settings-panel-other > .form-actions,
.po-page:not(.flow-builder-mode) #settings-panel-other > .settings-group { max-width:720px; }
.po-page:not(.flow-builder-mode) .settings-group { padding:16px 0; }
.po-page:not(.flow-builder-mode) .settings-group summary { font-size:16px; line-height:1.4; font-weight:600; }
.po-page:not(.flow-builder-mode) .settings-group .auto-row { padding:12px 0; border:0; border-radius:0; background:transparent; }
.po-page:not(.flow-builder-mode) .workspace-tools { margin-top:14px; padding-top:0; border-top:0; }
.other-settings-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; max-width:720px; margin:0 0 16px; }
.po-page:not(.flow-builder-mode) .other-settings-picker .btn { justify-content:flex-start; text-align:left; white-space:normal; height:auto; min-height:44px; padding:10px 12px; line-height:1.4; }
.other-settings-picker .btn.on { background:#e5f4ee; border-color:#008064; color:#00785f; font-weight:600; }
.po-page:not(.flow-builder-mode) .other-settings-panel { border-bottom:0; padding:0; }
.other-settings-panel > .form-grid { padding-top:0; }
.po-page:not(.flow-builder-mode) .ad-link-layout { max-width:960px; }
.po-page:not(.flow-builder-mode) .auto-rule-meta { font-size:13px; color:var(--settings-muted); }
.po-page:not(.flow-builder-mode) .auto-rule-copy p { font-size:14px; }
.auto-rule-editor .auto-editor-fields > label { font-size:14px; }
.auto-rule-editor .btn { border-radius:9px; box-shadow:none; font-size:14px; min-height:42px; }
.auto-rule-editor .input { font-size:15px; border-radius:9px; min-height:42px; }
.auto-rule-editor .auto-editor-head p { font-size:13px; color:#596b70; line-height:1.5; }
@media(max-width:1279px) {
 .po-page:not(.flow-builder-mode) .desk-settings-content [data-pane="brand"] { grid-template-columns:minmax(0,1fr); }
 .po-page:not(.flow-builder-mode) .brand-fields { max-width:600px; }
 .po-page:not(.flow-builder-mode) .brand-preview { max-width:420px; }
}
@media(max-width:767px) {
 .po-page:not(.flow-builder-mode):not(.settings-overview) .po-page-head { display:none; }
 .po-page:not(.flow-builder-mode) .po-page-head h1 { font-size:24px; }
 .po-page:not(.flow-builder-mode) .btn { min-height:44px; height:44px; }
 .po-page:not(.flow-builder-mode) .settings-section .input { font-size:16px; min-height:44px; height:44px; }
 .po-page:not(.flow-builder-mode) .desk-settings-layout { grid-template-columns:minmax(0,1fr); gap:16px; }
 .po-page:not(.flow-builder-mode) .settings-top-tabs button { flex:1; min-height:56px; }
 .po-page:not(.flow-builder-mode) .brand-preview { max-width:none; }
 .po-page:not(.flow-builder-mode) .settings-section .form-grid { grid-template-columns:minmax(0,1fr); }
}
.preview-toggle { display:none; }
.desk-settings-content [data-pane="channels"] .auto-row { padding:12px 0; margin:0; border:0; border-bottom:1px solid var(--line); border-radius:0; }
.settings-section h3 { font-size:14px; margin:0 0 16px; }
.brand-fields { min-width:0; }
.brand-fields > .form-grid > h3 { grid-column:1/-1; margin:0; }
.settings-contact { margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.settings-group { border-bottom:1px solid var(--line); padding:16px 0; }
.settings-group summary { cursor:pointer; font-size:14px; font-weight:600; }
.settings-group > .form-grid { padding-top:18px; }
.settings-group .auto-row { grid-column:1/-1; margin:0; }
.brand-preview-card { border-radius:10px; padding:12px; box-shadow:none; }
.brand-preview-message { background:white; border-radius:10px; margin:16px 0 12px; padding:14px; font-size:12px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
.brand-preview-replies { display:flex; flex-wrap:wrap; gap:6px; }
.brand-preview-replies span { border-radius:20px; background:white; color:var(--brand); padding:7px 10px; font-size:11px; overflow-wrap:anywhere; max-width:100%; }
.brand-preview-composer { display:flex; align-items:center; gap:12px; margin-top:14px; padding:12px; background:white; border-radius:10px; color:var(--ink-3); font-size:12px; }
.brand-preview-composer span { flex:1; }
.brand-preview-composer svg { width:18px; height:18px; }
.sharing-actions { display:flex; gap:8px; flex-wrap:wrap; }
.ad-qr .sharing-actions { justify-content:center; }
#linkPreview { margin-top:18px; }
.mobile-bottom-nav button.on { color:var(--brand); }
@media (max-width:767px) {
  .preview-toggle { display:block; font-weight:600; color:var(--brand); min-height:44px; cursor:pointer; }
  .brand-preview:not(.preview-expanded) > :not(.preview-toggle) { display:none; }
  .brand-preview { max-width:none; }
  .po-page:not(.settings-overview) .settings-overview-back { display:inline-flex; margin-bottom:12px; }
  .po-page:not(.settings-overview) .settings-top-tabs { display:none; }
  .settings-overview .settings-top-tabs { flex-direction:column; gap:8px; border:0; }
  .settings-overview .settings-top-tabs button { flex-direction:row; justify-content:flex-start; border:1px solid var(--line); border-radius:10px; padding:18px 16px; min-height:64px; font-size:14px; }
  .settings-overview .settings-top-tabs button::after { content:''; display:block; flex:0 0 24px; width:24px; height:24px; margin-left:auto; background:currentColor; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 5 7 7-7 7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
  .settings-overview [data-settings-section] { display:none !important; }
  .desk-settings-layout { grid-template-columns:minmax(0,1fr); gap:18px; }
  .desk-settings-layout #setTabs { flex-direction:row; border-left:0; border-bottom:1px solid var(--line); overflow-x:auto; }
  .desk-settings-layout #setTabs button { white-space:nowrap; border-left:0; margin:0; padding:10px 12px; }
}
.business-profile-photo { width:min(100%,320px); aspect-ratio:1; margin:0 auto 20px; border-radius:20px; overflow:hidden; display:grid; place-items:center; background:#edf6f3; color:#134e4a; font-size:80px; font-weight:700; }
.business-profile-photo img { width:100%; height:100%; object-fit:cover; }
.business-profile h2 { display:flex; align-items:center; justify-content:center; gap:8px; overflow-wrap:anywhere; }
.business-profile-description { margin:16px 0; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--ink-2); }
.business-profile-links { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:20px; }
.chat-photo { display:block; max-width:100%; padding:0; border:0; border-radius:10px; background:transparent; cursor:zoom-in; line-height:0; }
.chat-photo:focus-visible { outline:3px solid var(--brand); outline-offset:3px; }
.chat-photo img { display:block; max-width:100%; }
body.photo-viewer-open { overflow:hidden; }
.photo-viewer { position:fixed; inset:0; z-index:10000; display:flex; flex-direction:column; background:#0b1220f5; color:#fff; padding:max(12px,env(safe-area-inset-top)) 12px max(8px,env(safe-area-inset-bottom)); }
.photo-toolbar { display:flex; align-items:center; justify-content:center; gap:10px; flex-shrink:0; padding-bottom:12px; }
.photo-toolbar > span { margin-right:auto; font-weight:600; }
.photo-toolbar button { min-width:44px; min-height:44px; display:grid; place-items:center; flex-shrink:0; padding:8px 12px; border:1px solid #ffffff4d; border-radius:10px; background:#ffffff14; color:#fff; font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.photo-toolbar button svg { width:26px; height:26px; }
.photo-toolbar button:disabled { opacity:.35; cursor:default; }
.photo-toolbar button:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.photo-toolbar output { width:55px; text-align:center; font-variant-numeric:tabular-nums; }
.photo-stage { flex:1; min-height:0; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; touch-action:none; user-select:none; }
.photo-stage img { flex:none; max-width:none; max-height:none; object-fit:contain; transform-origin:center; pointer-events:none; }
.photo-stage.zoomed { cursor:grab; }
.photo-stage.zoomed:active { cursor:grabbing; }
.photo-hint { flex-shrink:0; text-align:center; margin:10px 0 0; font-size:12px; color:#cbd5e1; }
@media(max-width:600px) {
  .photo-toolbar { gap:6px; }
  .photo-toolbar button { min-width:48px; min-height:48px; padding:8px; }
  .photo-toolbar button svg { width:28px; height:28px; }
  .photo-toolbar output { width:50px; flex-shrink:0; font-size:14px; font-weight:600; }
  .photo-toolbar > span { display:none; }
}
.password-control { position:relative; width:100%; }
.password-control .input { padding-right:54px; }
.password-toggle { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:10px; display:grid; place-items:center; color:var(--ink-3); }
.password-toggle svg { width:22px; height:22px; }
.password-toggle:hover { background:var(--surface-3); color:var(--brand); }
.password-toggle:focus-visible { outline:2px solid var(--brand); outline-offset:1px; }
.tg-note { background:#e7f3ff; color:#16639c; }
/* Private flow library: compact rows within the settings workspace. */
.flow-library-toolbar,.flow-library-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--border,#e3e9eb)}
.flow-library-tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--border,#e3e9eb);padding:8px 0}.flow-library-tabs [aria-pressed=true]{color:var(--accent,#008064);background:#eaf6f2}
.flow-search{display:block;max-width:320px;margin:12px 0}.flow-record{display:grid;gap:4px;text-align:left;background:none;border:0;color:inherit;cursor:pointer}.flow-record span{font-size:12px;color:#627784}.flow-record-actions{display:flex;flex-wrap:wrap;gap:4px}.flow-library-form{display:flex;gap:8px;align-items:end;padding:12px 0}.flow-library-legacy{margin-top:16px}.flow-library h3{margin:0}
.flow-library-row.flow-saved-row { margin:12px 0; padding:16px; border:1px solid var(--line); border-radius:10px; background:var(--surface); gap:16px; }
.flow-saved-row .flow-record { display:flex; align-items:center; gap:16px; min-width:0; flex:1; padding:0; }
.flow-record .flow-record-thumbnail { display:flex; align-items:center; justify-content:center; width:104px; height:88px; flex:0 0 104px; border:1px solid #dce9e3; border-radius:8px; background:#f4f9f7; padding:8px; }
.flow-record-thumbnail svg { display:block; width:100%; height:100%; }
.flow-record .flow-thumbnail-empty { font-size:12px; text-align:center; line-height:1.5; }
.flow-record .flow-record-details { display:flex; flex-direction:column; gap:8px; min-width:0; }
.flow-record-details strong { font-size:16px; line-height:1.4; overflow-wrap:anywhere; color:var(--ink); }
.flow-record .flow-record-summary { font-size:13px; line-height:1.7; color:#596b70; }
.flow-record-status { display:inline-block; padding:1px 7px; border-radius:5px; font-size:12px; font-weight:600; background:#edf1f4; color:#46575e; }
.flow-record-status.flow-status-active { background:#e0f4ec; color:#00785f; }
.flow-record-status.flow-status-published { background:#e8efff; color:#2851a0; }
.flow-record .flow-record-open { display:flex; align-items:center; gap:4px; font-size:14px; font-weight:600; color:var(--brand); }
.flow-record-open svg { width:18px; height:18px; }
.flow-saved-row .flow-record-actions { gap:8px; }
.flow-saved-row:has(.flow-record:hover) { border-color:#8dbeb0; }
@media(max-width:767px){.flow-library-row{align-items:flex-start;flex-direction:column}.flow-library-toolbar{align-items:flex-start}.flow-library-form{flex-wrap:wrap}.flow-record-actions{width:100%}.flow-search{max-width:none}
 .flow-saved-row .flow-record { width:100%; gap:12px; }
 .flow-record .flow-record-thumbnail { width:80px; height:88px; flex-basis:80px; }
 .flow-saved-row .flow-record-actions { border-top:1px solid var(--line); padding-top:12px; }
 .flow-saved-row .flow-record-actions .btn { flex:1 1 auto; min-width:0; padding:0 10px; }
}
.flow-editor-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}.flow-editor-heading h3{margin:0}.flow-editor-actions{display:flex;flex-wrap:wrap;gap:6px}.flow-editor-workspace{display:grid;min-width:0}.flow-editor-workspace main{min-width:0}.flow-canvas-toolbar{display:flex;gap:4px;flex-wrap:wrap;padding:8px;border-bottom:1px solid #e3e9eb}.flow-canvas-viewport{position:relative;height:560px;min-height:300px;overflow:hidden;background-color:#fbfdfd;background-image:radial-gradient(#d9e6e6 .8px,transparent .8px);background-size:14px 14px;touch-action:none;outline-offset:-2px}.flow-canvas-world{position:relative;transform-origin:0 0}.flow-connectors{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}.flow-connectors>path{stroke:#718b94;stroke-width:1.5;fill:none}.flow-connectors text{font-size:12px;fill:#425e67;paint-order:stroke;stroke:#fbfdfd;stroke-width:5px;stroke-linejoin:round}.flow-node{position:absolute;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:12px 14px;border:1px solid #abd8cc;border-radius:9px;background:#f1faf7;color:#133b33;text-align:left;cursor:pointer}.flow-node span{font-size:12px;line-height:1.3;color:#52716a;max-height:32px;overflow:hidden}.flow-node.selected{border-color:#008064;outline:2px solid #00806433}.flow-node-terminal{align-items:center;background:#008064;color:white}.flow-node.disconnected{border-style:dashed;background:#f6f8f9;color:#627784}.flow-node small{font-size:10px}
@media(max-width:767px){.flow-editor-heading{flex-wrap:wrap}.flow-editor-actions{width:100%}.flow-canvas-viewport{height:450px}}
.flow-editor-workspace{grid-template-columns:180px minmax(280px,1fr) 290px;align-items:start;border-top:1px solid #e3e9eb}.flow-editor-workspace>[data-palette]{padding:12px;border-right:1px solid #e3e9eb}.flow-editor-workspace>[data-inspector]{padding:12px;border-left:1px solid #e3e9eb;max-height:660px;overflow:auto}.flow-editor-workspace h4{margin:0 0 12px}.flow-palette-action{display:block;width:100%;text-align:left;margin-bottom:4px}.flow-palette-settings{margin-top:16px;padding-top:12px;border-top:1px solid #e3e9eb}.flow-editor-workspace label{display:block;font-size:12px;margin-bottom:12px}.flow-editor-workspace .input{width:100%;margin-top:5px;min-width:0}.flow-inspector-choice{padding:12px 0;border-bottom:1px solid #e3e9eb}.flow-inspector-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.flow-node-connections{display:flex;gap:12px;flex-wrap:wrap;padding:12px}.flow-delete-confirm{padding:12px 0;border-top:1px solid #e3e9eb}
@media(min-width:768px) and (max-width:1279px){.flow-editor-workspace{grid-template-columns:150px minmax(260px,1fr)}.flow-editor-workspace>[data-inspector]{grid-column:1/-1;border-left:0;border-top:1px solid #e3e9eb;max-height:460px}.flow-editor-workspace>[data-inspector] form{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}}
@media(max-width:767px){.flow-editor-workspace{display:block}.flow-editor-workspace>[data-palette]{border-right:0;display:flex;flex-wrap:wrap;gap:4px}.flow-palette-action{width:auto}.flow-palette-settings{width:100%}.flow-editor-workspace>[data-inspector]{border-left:0;border-top:1px solid #e3e9eb}.flow-inspector-actions button{min-height:44px}}
.flow-preview-sheet{position:fixed;z-index:120;right:16px;top:72px;bottom:16px;width:min(390px,calc(100vw - 32px));padding:16px;background:#fff;border:1px solid #d7e7e2;border-radius:10px;box-shadow:0 6px 24px #163b3326;overflow:auto}.flow-preview-header{display:flex;justify-content:space-between;align-items:center;gap:8px}.flow-preview-header>div{display:flex;gap:4px}.flow-preview-messages{max-height:42vh;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:12px 0}.flow-preview-bubble{align-self:flex-start;max-width:90%;padding:10px 12px;background:#eef8f4;border-radius:8px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px}.flow-preview-bubble.customer{align-self:flex-end;background:#f0f3f6}.flow-preview-choices{display:flex;gap:6px;flex-wrap:wrap}.flow-preview-choices .help{width:100%;overflow-wrap:anywhere}.flow-preview-sheet form{display:flex;gap:8px;align-items:end}.flow-preview-sheet form label{flex:1;min-width:0}.flow-preview-sheet dl{font-size:12px}.flow-preview-sheet dd{margin:0 0 8px;overflow-wrap:anywhere}.flow-node.preview-visited{border-color:#5ab899}.flow-node.preview-current{outline:3px solid #00a37b66}
@media(max-width:767px){.flow-preview-sheet{inset:0;width:auto;border-radius:0;padding:16px}.flow-preview-sheet button{min-height:44px}}
.flow-sheet-close,.flow-journey-controls,[data-mobile-journey]{display:none}
.flow-journey-controls{gap:8px;padding:8px 0;flex-wrap:wrap}
.flow-journey-terminal{display:table;margin:10px auto;padding:8px 18px;background:#e7f6f0;border-radius:8px;color:#006b55;font-size:13px;font-weight:600}
.flow-journey-step{min-width:0;padding:4px 0}
.flow-journey-node{display:flex;flex-direction:column;gap:6px;width:100%;min-height:76px;padding:12px;text-align:left;border:1px solid #c6ded7;border-radius:9px;background:#f8fcfa;color:#153e34;overflow-wrap:anywhere}
.flow-journey-node.selected{border-color:#008064;outline:2px solid #00806422}.flow-journey-node>span:last-child{font-size:13px;color:#58716b}.flow-journey-type{font-size:11px;color:#00785f}.flow-journey-path{margin:8px 0 8px 12px;padding-left:14px;border-left:1px solid #c6dcd6;min-width:0}.flow-journey-branch{display:table;padding:5px 9px;background:#edf3f6;border-radius:6px;font-size:12px;font-weight:600}.flow-journey-reference{display:block;width:100%;min-height:44px;border:0;background:transparent;text-align:left;color:#00785f;font-size:13px;padding:10px 4px;overflow-wrap:anywhere}.flow-journey-unconnected{display:block;padding:12px 0;color:#887035;font-size:13px}
@media(max-width:1279px){
 .flow-journey-controls{display:flex}.flow-sheet-close{display:block;margin-bottom:12px;min-height:44px}.flow-editor-workspace{grid-template-columns:minmax(0,1fr)}
 .flow-editor-workspace>[data-palette],.flow-editor-workspace>[data-inspector]{display:none}
 .flow-editor-workspace>[data-palette].flow-palette-open,.flow-editor-workspace>[data-inspector].flow-inspector-open{display:block;position:fixed;inset:0 0 0 auto;z-index:80;width:min(430px,100%);max-height:none;background:#fff;border-left:1px solid #dae5e4;padding:16px;overflow:auto;overscroll-behavior:contain;box-shadow:-12px 0 36px #14382b18}
 .flow-editor-workspace>[data-palette].flow-palette-open{left:0;right:auto;width:min(320px,100%)}
 .flow-editor-workspace>[data-inspector] form{display:block}.flow-palette-action{width:100%;min-height:44px}.flow-editor-actions button,.flow-journey-controls button{min-height:44px}.flow-editor-workspace input,.flow-editor-workspace select{min-height:44px}
}
@media(max-width:767px){
 [data-mobile-journey]{display:block;padding:12px 2px}.flow-editor-workspace>[data-canvas]{display:none}.flow-editor-workspace>[data-inspector].flow-inspector-open,.flow-editor-workspace>[data-palette].flow-palette-open{inset:0;width:100%;border:0;box-shadow:none;padding:16px}
 .flow-editor-heading{align-items:flex-start}.flow-editor-actions{gap:4px}.flow-editor-actions .btn{font-size:12px;padding:8px 10px}.flow-editor-heading h3{font-size:20px}
}
.flow-editor-heading .btn,.flow-editor-workspace .btn,.flow-journey-controls .btn{border-radius:8px;box-shadow:none}.flow-editor-workspace .input{border-radius:8px}.flow-editor-heading,.flow-editor-workspace,.flow-journey-controls{font-family:Arial,sans-serif}.flow-journey-path{margin:8px 0;padding:0;border:0}.flow-journey-path::before{content:'';display:block;height:14px;width:1px;margin:0 auto 8px;background:#bfd6cf}.flow-journey-branch{margin:8px 0;max-width:100%;overflow-wrap:anywhere}.flow-canvas-toolbar .btn{padding:7px 10px;font-size:12px}.flow-palette-action{padding:8px 10px;font-size:13px}
.flow-library{padding:0}.flow-library .btn,.flow-preview-sheet .btn{border-radius:8px;box-shadow:none}.flow-library-toolbar h3{margin:0 0 4px}.flow-editor-heading h3{font-size:18px;margin:0 0 4px}.flow-editor-heading>div:first-child{flex:0 0 auto;max-width:230px}.flow-template-form{display:flex;align-items:end;gap:8px;flex-wrap:wrap;padding:12px 0;border-top:1px solid #e3e9eb}.flow-template-form label{max-width:320px}.flow-template-form .input{margin-top:6px}
@media(max-width:767px){.flow-editor-heading>div:first-child{max-width:none;width:100%}}

/* Focus the settings workspace on the journey while editing. */
.flow-builder-mode>.po-page-head,.flow-builder-mode>.settings-top-tabs,.flow-builder-mode>.settings-overview-back,.flow-builder-mode #settings-panel-automations>h2,.flow-builder-mode #settings-panel-automations>p.help,.flow-builder-mode #settings-panel-automations>.settings-subtabs{display:none}
.flow-builder-mode #settings-panel-automations{padding-top:0}
/* Builder composition: compact tools, readable journey, independent editing panels. */
.flow-editor-heading,.flow-editor-workspace,.flow-journey-controls{font-family:'DM Sans',Arial,sans-serif}
.flow-editor-heading{padding:10px 0;gap:16px;position:relative;z-index:5}
.flow-editor-heading>div.flow-editor-identity{display:flex;align-items:center;gap:10px;flex:1;min-width:0;max-width:none}
.flow-editor-identity [data-flow-title]{min-width:0}
.flow-editor-heading h3{font-size:16px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 3px}
.flow-editor-heading [data-draft-status]{font-size:12px;display:inline;color:#778983}
.flow-publication-status{display:inline;margin:0 0 0 8px;font-size:12px;font-weight:600;color:#00856b}
.flow-editor-actions{flex:0 0 auto;align-items:center;gap:6px;flex-wrap:nowrap}
.flow-editor-actions>.btn{font-size:14px;padding:8px 12px;min-height:38px;box-shadow:none;border-radius:8px}
.flow-editor-actions .flow-save{border-color:#91c7b8;color:#007c63;background:white}
.flow-editor-actions>[data-preview-flow]{border-color:transparent;background:transparent}
.flow-back{border:0!important;background:transparent!important;width:32px;min-width:32px;padding:6px!important;border-radius:6px!important}
.flow-back svg,.flow-secondary-actions summary svg{width:20px;height:20px;display:block}
.flow-back svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.flow-secondary-actions{display:block;position:relative}
.flow-secondary-actions summary{display:flex;align-items:center;justify-content:center;list-style:none;cursor:pointer;border:1px solid #e1e9e6;border-radius:7px;width:36px;height:36px;background:#fff;color:#53675f}
.flow-secondary-actions summary::-webkit-details-marker{display:none}
.flow-secondary-actions summary svg{fill:currentColor}
.flow-secondary-actions .flow-actions-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:90;display:flex;flex-direction:column;gap:2px;width:180px;background:white;border:1px solid #dfe8e4;border-radius:9px;padding:6px;box-shadow:0 5px 18px #1f413912}
.flow-actions-menu .btn{text-align:left;border:0;background:transparent;box-shadow:none;padding:9px 10px;font-size:12px;border-radius:5px}
.flow-actions-menu .btn:hover{background:#f0f7f4}
.flow-editor-workspace{grid-template-columns:160px minmax(260px,1fr) 260px}
.flow-editor-workspace>[data-palette]{padding:14px 10px;background:#fff}
.flow-editor-workspace>[data-inspector]{padding:14px;background:#fff}
.flow-editor-workspace h4{font-size:13px;font-weight:700;margin:0 0 12px;color:#233d34}
.flow-palette-list{display:flex;flex-direction:column;gap:2px}
.flow-editor-workspace .flow-palette-action{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;min-height:42px;padding:6px 4px;margin:0;border:0;background:transparent;box-shadow:none;border-radius:7px;font-size:14px;font-weight:500;white-space:normal;line-height:1.25;text-align:left}
.flow-palette-action:hover{background:#eef7f3!important}
.flow-palette-settings{padding-top:16px;margin-top:16px}
.flow-palette-settings h5,.flow-inspector-group h5{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:#788980;margin:0 0 12px;font-weight:700}
.flow-editor-workspace label{font-size:13px;font-weight:500;line-height:1.4;margin-bottom:12px;color:#43574e}
.flow-editor-workspace .input{font-size:14px;min-height:38px;padding:8px 9px;border:1px solid #e1e9e5;border-radius:7px;background:#fff;box-shadow:none}
.flow-editor-workspace .input:focus{border-color:#63b29b;outline:2px solid #00856b16}
.flow-palette-settings .input{font-size:13px;padding:7px}
.flow-inspector-heading{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid #e7eeea;margin-bottom:16px}
.flow-inspector-heading h4{margin:0 0 3px;font-size:16px}
.flow-inspector-heading p{font-size:13px;line-height:1.4;color:#7a8b82;margin:0}
.flow-inspector-heading .flow-type-icon{width:34px;height:34px}
.flow-inspector-empty{padding:16px 2px}
.flow-inspector-empty h4{margin-bottom:7px;font-size:14px}
.flow-inspector-empty p{font-size:14px;line-height:1.6;color:#7a8b82;margin:0}
.flow-inspector-group{padding-bottom:4px}
.flow-inspector-routing{padding-top:14px;border-top:1px solid #e7eeea;margin-top:4px}
.flow-inspector-footer{padding-top:12px;border-top:1px solid #e7eeea}
.flow-inspector-footer>[data-update-step]{width:100%;font-size:14px;padding:9px;min-height:38px}
.flow-inspector-actions{justify-content:space-between;gap:6px;margin-top:8px}
.flow-inspector-actions .btn{border:0;background:transparent;padding:6px 0;font-size:11px;min-height:30px}
.flow-inspector-actions [data-delete-step]{color:#b54555}
.flow-inspector-choice{padding:12px 0}
.flow-canvas-toolbar{justify-content:space-between;align-items:center;background:#f8fbf9;padding:6px 10px}
.flow-canvas-toolbar>div{display:flex;align-items:center;gap:3px}
.flow-canvas-toolbar .btn{border:1.5px solid var(--line);color:var(--ink);background:var(--surface);padding:0 12px;height:38px;min-height:38px;font-size:14px}
.flow-canvas-toolbar .btn:hover{border-color:var(--brand);color:var(--brand)}
.flow-canvas-toolbar output{font-size:14px;color:var(--ink-3);min-width:48px;text-align:center}
.flow-layout-menu{position:relative;font-size:11px;color:#5c7067}
.flow-layout-menu summary{cursor:pointer;padding:0 12px;list-style:none}
.flow-layout-menu summary::-webkit-details-marker{display:none}
.flow-layout-menu>div{position:absolute;right:0;top:100%;z-index:15;min-width:130px;padding:5px;background:white;border:1px solid #e1e9e5;border-radius:7px}
.flow-layout-menu button{display:block;width:100%;text-align:left}
.flow-canvas-viewport{background-color:#f8fbfa;background-image:radial-gradient(#d5e4dd .7px,transparent .7px);background-size:18px 18px}
.flow-node{flex-direction:row;align-items:flex-start;justify-content:flex-start;gap:10px;padding:12px;border-color:#b8dbcf;border-radius:9px;background:#fff;box-shadow:0 2px 4px #29473906}
.flow-node .flow-node-copy{display:flex;flex-direction:column;gap:3px;min-width:0;max-height:none;flex:1}
.flow-node strong{font-size:15px;line-height:1.35;font-weight:700;color:#203a30;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flow-node .flow-node-meta{font-size:12px;line-height:1.3;color:#6e8378;max-height:none}
.flow-node .flow-node-preview{font-size:13px;line-height:1.4;color:#4d675b;max-height:37px;overflow:hidden}
.flow-node .flow-node-unconnected{font-size:9px;color:#8a938f}
.flow-node.selected{border-color:#00856b;outline:2px solid #00856b14;background:#f5fcf8}
.flow-node-question,.flow-node-save{border-color:#c9daf1}
.flow-node-choice{border-color:#dacff0}
.flow-node-condition{border-color:#eadbbd}
.flow-node-handoff,.flow-node-end{border-color:#eccdd3}
.flow-node-terminal{align-items:center;justify-content:center;background:#f1faf5;color:#00856b}
.flow-node-terminal .flow-node-copy{flex:0 1 auto}
.flow-node.disconnected{background:#fcfdfd;border-style:dashed}
.flow-connection-handle{position:absolute;width:12px;height:12px;padding:0;transform:translate(-50%,-50%);border:2px solid #fff;border-radius:50%;background:#64a88f;box-shadow:0 0 0 1px #82b7a4;cursor:pointer;z-index:2}
.flow-connection-handle:hover,.flow-connection-handle:focus-visible{background:#00856b;outline:3px solid #00856b22}
.flow-connectors>path{stroke:#8da7a2;stroke-width:1.4}
.flow-edge-label rect{fill:#fff;stroke:#dce8e1;stroke-width:1}
.flow-edge-label text{font-size:13px;fill:#3e6452;stroke:none;paint-order:normal}
.flow-type-icon{display:inline-flex;position:relative;flex:0 0 auto;width:28px;height:28px;align-items:center;justify-content:center;border-radius:7px;background:#e8f6ef;color:#00856b;overflow:hidden}
.flow-type-icon svg{width:21px;height:21px;display:block}
.flow-node>.flow-type-icon{max-height:none;width:30px;height:30px}
.flow-type-question,.flow-type-save{background:#edf3ff;color:#2875de}
.flow-type-choice{background:#f3edfc;color:#7856d8}
.flow-type-condition{background:#fbf5e8;color:#b67b16}
.flow-type-handoff{background:#fceef1;color:#bf4762}
.flow-type-end{background:#fceeee;color:#c64b4b}
.flow-node>.flow-type-icon{color:#00856b}
.flow-node>.flow-type-question,.flow-node>.flow-type-save{color:#2875de}
.flow-node>.flow-type-choice{color:#7856d8}
.flow-node>.flow-type-condition{color:#b67b16}
.flow-node>.flow-type-handoff{color:#bf4762}
.flow-node>.flow-type-end{color:#c64b4b}
.flow-icon-animation{position:absolute;inset:3px;display:none}
.flow-icon-animation svg{width:100%!important;height:100%!important}
.lottie-ready .flow-icon-static{visibility:hidden}
.lottie-ready .flow-icon-animation{display:block}
.flow-journey-node{position:relative;padding-left:54px!important;background:#fff}
.flow-journey-node>.flow-type-icon{position:absolute;left:12px;top:14px}
@media(min-width:768px) and (max-width:1279px){.flow-editor-workspace{grid-template-columns:minmax(0,1fr)}.flow-editor-heading h3{font-size:15px}.flow-editor-actions>.btn{min-height:44px}.flow-secondary-actions summary{width:44px;height:44px}.flow-journey-controls{gap:8px;padding-bottom:8px}.flow-editor-workspace .flow-palette-action,.flow-editor-workspace .input,.flow-editor-workspace .btn{min-height:44px}}
@media(max-width:767px){.flow-editor-heading{gap:8px;padding:8px 0;flex-wrap:wrap}.flow-editor-heading>.flow-editor-identity{width:100%;flex:1 0 100%}.flow-editor-heading h3{font-size:15px}.flow-editor-actions{width:100%;gap:4px}.flow-editor-actions>.btn{padding:8px 9px;font-size:12px;min-height:44px;flex:1}.flow-secondary-actions summary{width:44px;height:44px}.flow-back{height:44px}.flow-editor-workspace .input,.flow-editor-workspace .flow-palette-action,.flow-inspector-footer .btn{min-height:44px}.flow-editor-workspace .flow-palette-action{font-size:13px}.flow-inspector-actions .btn{font-size:12px;padding:8px}.flow-journey-controls{padding-bottom:8px}.flow-journey-node strong{font-size:13px}.flow-journey-node .flow-journey-type{font-size:10px}.flow-publication-status{font-size:10px}}
@media(prefers-reduced-motion:reduce){.flow-icon-animation{display:none!important}.flow-icon-static{visibility:visible!important}}
@media(min-width:768px){
 .po-page.flow-builder-mode{display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
 .flow-builder-mode #settings-panel-automations{display:flex;flex-direction:column;flex:1;min-height:0;padding-bottom:0}
 .flow-builder-mode #poPageBody{display:flex;flex-direction:column;flex:1;min-height:0}
 .flow-builder-mode .flow-editor-heading,.flow-builder-mode .flow-journey-controls,.flow-builder-mode .flow-template-form{flex-shrink:0}
 .flow-builder-mode [data-journey-issues]{max-height:25%;overflow:auto;flex-shrink:0}
 .flow-builder-mode .flow-editor-workspace{flex:1;min-height:0;align-items:stretch;overflow:hidden}
 .flow-builder-mode [data-canvas]{display:flex;flex-direction:column;min-height:0}
 .flow-builder-mode .flow-canvas-toolbar{flex-shrink:0}
 .flow-builder-mode .flow-canvas-viewport{flex:1;min-height:0;height:auto}
 .flow-builder-mode [data-layout-issues]:empty{display:none}
 .flow-builder-mode .flow-editor-workspace>[data-palette],.flow-builder-mode .flow-editor-workspace>[data-inspector]{min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain}
}
@media(min-width:768px) and (max-height:600px){
 .flow-builder-mode .flow-editor-heading{flex-wrap:wrap;padding:6px 0;gap:6px}
 .flow-builder-mode .flow-editor-heading>div:first-child{display:flex;align-items:center;flex-wrap:wrap;gap:8px;width:100%;max-width:none}
 .flow-builder-mode .flow-editor-heading h3,.flow-builder-mode [data-publication-state]{margin:0}
 .flow-builder-mode .flow-editor-actions{width:100%}
}


/* Keep step deletion choices distinct, including narrow editing sheets. */
.flow-delete-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.flow-delete-actions .btn{min-height:44px}

.flow-library-create-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.flow-library-form{column-gap:10px;row-gap:10px}

.flow-library-form[data-import-confirm]{flex-wrap:wrap}
.flow-library-form[data-import-confirm]>.help{flex-basis:100%;margin:0}
@media(max-width:767px){.flow-library-toolbar{flex-wrap:wrap}.flow-library-create-actions .btn{min-height:44px}}

/* One calm workspace when no conversation is selected. */
.po-body>.inbox-welcome{background:#fff;overflow-y:auto;justify-content:center;padding:32px}
.inbox-welcome-content{width:100%;max-width:640px;margin:auto}
.inbox-welcome-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:10px;background:#e7f5ef;color:#008064;margin-bottom:20px}
.inbox-welcome-icon svg{width:26px;height:26px}
.inbox-welcome-eyebrow{margin:0 0 8px;color:#627784;font-size:13px;font-weight:600}
.inbox-welcome h2{margin:0 0 12px;font-size:28px;line-height:1.25;color:var(--ink)}
.inbox-welcome-description{max-width:52ch;margin:0;color:#526770;font-size:15px;line-height:1.65}
.inbox-welcome-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:28px 0;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.inbox-welcome-stats dt{color:#526770;font-size:13px;line-height:1.5}
.inbox-welcome-stats dd{margin:8px 0 0;font-size:24px;line-height:1.2;font-weight:600;color:var(--ink)}
.inbox-welcome-actions{display:flex;gap:12px;flex-wrap:wrap}
.inbox-welcome-actions .btn{border-radius:9px;min-height:44px;box-shadow:none;font-size:14px}
.inbox-welcome-status{margin:12px 0 0;font-size:13px;line-height:1.5;color:#00785f}
.inbox-welcome-status:empty{display:none}
.inbox-welcome-note{margin:20px 0 0;color:#627784;font-size:13px;line-height:1.5}
@media(min-width:901px){.po-body.inbox-idle>.inbox-welcome{grid-column:3/-1}}
@media(min-width:768px) and (max-width:900px){.po-body.inbox-idle>.inbox-welcome{grid-column:2/-1}}
@media(min-width:768px) and (max-width:1080px){.po-body>.inbox-welcome{padding:24px}.inbox-welcome h2{font-size:24px}}
@media(max-width:767px){.po-body.inbox-idle{grid-template-columns:1fr}.po-body.inbox-idle>.inbox-welcome{display:none}}

/* Flat button surfaces across every screen and state, including tutorial targets.
   Keep keyboard focus outlines and structural panel shadows independent. */
:is(button,.btn,[role="button"],input[type="button"],input[type="submit"],input[type="reset"]){box-shadow:none!important}

.skip-link{position:fixed;top:8px;left:8px;z-index:10000;padding:12px 16px;background:#fff;color:#008064;transform:translateY(-150%)}
.skip-link:focus{transform:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Flow removal: explicit destructive action, compact readable confirmation. */
.flow-library-form.flow-delete-confirmation{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px;margin:16px 0 20px;border:1px solid #f0d9d5;border-radius:14px;background:#fff9f8}
.flow-delete-heading{display:flex;align-items:flex-start;gap:14px;min-width:0}
.flow-delete-icon{display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;border-radius:12px;background:#fce8e5;color:#b42318}
.flow-delete-icon svg{width:22px;height:22px}
.flow-delete-heading h4{margin:0 0 6px;font-size:16px;font-weight:600;line-height:1.4;overflow-wrap:anywhere;color:#263b35}
.flow-delete-heading p{margin:0;max-width:62ch;font-size:14px;line-height:1.6;color:#62716c}
.flow-delete-actions{display:flex;flex-shrink:0;gap:12px;align-items:center}
.flow-delete-actions .btn{min-height:44px;border-radius:9px;white-space:nowrap}
@media(max-width:767px){.flow-library-form.flow-delete-confirmation{flex-direction:column;align-items:stretch;gap:18px;padding:18px}.flow-delete-actions{justify-content:flex-end}.flow-delete-actions .btn{flex:1}}

/* Keep mobile focus from triggering Safari input zoom. */
@media (max-width:767px), (pointer:coarse) {
  .message-composer .field textarea { font-size:16px; }
}
.voice-player { display:flex; align-items:center; gap:8px; width:280px; max-width:100%; min-width:0; }
.voice-play { display:grid; place-items:center; flex:0 0 40px; width:40px; height:40px; padding:8px; border:0; border-radius:50%; background:var(--brand); color:#fff; cursor:pointer; }
.voice-play svg { width:22px; height:22px; }
.voice-seek { min-width:0; flex:1; width:60px; accent-color:var(--brand); }
.voice-time { flex-shrink:0; font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums; }