/* ═══════════════════════════════════════════════════════════════
   ZUBILANT · zubi-chat.css — "Ask Zubi" messenger, bottom-right, sitewide.
   r2 · 21 Aug 2026 · Intercom-style: Home / Messages / Help + bottom tabs.
   Tokens, type and radii from site-v9 (Master Brief v3.0).
   Namespace .zbc-* — never .zc-* (owned by the homepage Trending fan).
   ═══════════════════════════════════════════════════════════════ */

.zbc-root{position:fixed;right:20px;bottom:20px;z-index:160;font-family:Overpass,system-ui,-apple-system,sans-serif;
  font-size:14px;color:var(--ink900,#16211F);line-height:1.45;-webkit-font-smoothing:antialiased;
  transition:bottom var(--t-move,220ms cubic-bezier(.2,.7,.3,1))}
.zbc-root *,.zbc-root *::before,.zbc-root *::after{box-sizing:border-box}
.zbc-root button{font-family:inherit;cursor:pointer;color:inherit}
.zbc-root h2,.zbc-root h3,.zbc-root p,.zbc-root ul{margin:0;padding:0;list-style:none}
.zbc-root svg{width:20px;height:20px;flex:none}
.zbc-root.zbc-lift{bottom:calc(88px + env(safe-area-inset-bottom,0px))}

/* avatar */
.zbc-av{border-radius:50%;background:var(--sand,#F7F6F3);display:grid;place-items:center;flex:none;overflow:hidden;width:44px;height:44px}
.zbc-av img{width:78%;height:78%;object-fit:contain;display:block}

/* ── Launcher: 56px circle ── */
.zbc-launch{position:relative;width:56px;height:56px;border:0;border-radius:50%;background:var(--teal900,#00272B);color:#fff;
  display:grid;place-items:center;box-shadow:0 4px 8px rgba(22,33,31,.08),0 18px 40px rgba(22,33,31,.16);
  transition:transform var(--t-move,220ms),box-shadow var(--t-move,220ms),background var(--t-colour,160ms)}
.zbc-launch:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 8px 22px rgba(243,107,33,.3);background:var(--orange500,#F36B21)}
.zbc-launch:focus-visible{outline:3px solid var(--orange500,#F36B21);outline-offset:3px}
.zbc-li{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .2s,transform .25s}
.zbc-li .zbc-av{width:44px;height:44px;background:var(--sand,#F7F6F3)}
.zbc-li-close{opacity:0;transform:rotate(-90deg) scale(.6)}
.zbc-li-close svg{width:26px;height:26px}
.zbc-root.zbc-open .zbc-li-open{opacity:0;transform:rotate(90deg) scale(.6)}
.zbc-root.zbc-open .zbc-li-close{opacity:1;transform:none}

/* unread badge: Notion/WhatsApp pattern. Red pill pinned to the launcher's
   top-right corner, white count, paper ring so it reads as sitting on the
   circle. Count semantics live in zubi-chat.js setUnread(). */
.zbc-badge{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#E4000F;color:#fff;
  font-size:12px;font-weight:700;line-height:20px;text-align:center;border:2px solid var(--paper,#FFFFFF);box-sizing:content-box;
  box-shadow:0 2px 6px rgba(0,0,0,.25);animation:zbc-pop .3s cubic-bezier(.3,1.4,.5,1)}
.zbc-badge[hidden]{display:none}
@keyframes zbc-pop{from{transform:scale(.4)}to{transform:scale(1)}}
.zbc-root.zbc-open .zbc-badge{display:none}
.zbc-root.zbc-hidden{display:none}
.zbc-continue{border-color:var(--teal300,#7FC4CA);background:var(--teal50,#F0F8F9)}
.zbc-continue[hidden]{display:none}
.zbc-continue em{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zbc-send.is-off{background:var(--lineStrong,#C9D0CE);cursor:default;transform:none}

/* nudge bubble */
.zbc-nudge{position:absolute;right:0;bottom:calc(100% + 12px);width:max-content;max-width:min(260px,calc(100vw - 32px));background:var(--paper,#fff);
  border:1px solid var(--lineSoft,#E2E6E5);border-radius:14px;border-bottom-right-radius:5px;padding:11px 38px 11px 14px;font-size:13.5px;
  box-shadow:0 2px 4px rgba(22,33,31,.06),0 12px 28px rgba(22,33,31,.09);cursor:pointer;
  opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .26s,transform .26s}
.zbc-nudge.show{opacity:1;transform:none;pointer-events:auto}
.zbc-nudge b{color:var(--teal700,#00545C)}
.zbc-nudge button{position:absolute;top:5px;right:5px;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:var(--ink500,#5C6968);font-size:18px;line-height:1}
.zbc-nudge button:hover{background:var(--sand,#F7F6F3);color:var(--ink900,#16211F)}

/* ── Panel ── */
.zbc-panel{display:none;position:absolute;right:0;bottom:calc(100% + 14px);width:380px;max-width:calc(100vw - 40px);height:min(680px,calc(100vh - 110px));
  background:var(--paper,#fff);border-radius:16px;overflow:hidden;flex-direction:column;
  box-shadow:0 4px 8px rgba(22,33,31,.07),0 24px 56px rgba(22,33,31,.18);transform-origin:100% 100%}
.zbc-root.zbc-open .zbc-panel{display:flex;animation:zbc-in .28s cubic-bezier(.2,.7,.3,1)}
@keyframes zbc-in{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.zbc-panel:focus{outline:none}
.zbc-view{flex:1;min-height:0;display:flex;flex-direction:column}
.zbc-view[hidden]{display:none}

/* icon buttons */
.zbc-ib,.zbc-x{width:36px;height:36px;border:0;border-radius:50%;background:transparent;display:grid;place-items:center;flex:none;transition:background var(--t-colour,160ms)}
.zbc-ib:hover,.zbc-x:hover{background:rgba(0,0,0,.06)}
.zbc-ib:focus-visible,.zbc-x:focus-visible{outline:2px solid var(--orange500,#F36B21);outline-offset:2px}

/* ── Home ── */
.zbc-home{overflow-y:auto;overscroll-behavior:contain;background:var(--sand,#F7F6F3)}
.zbc-hero{flex:none;padding:18px 22px 64px;color:#fff;
  background:radial-gradient(120% 90% at 100% 0%,rgba(243,107,33,.35),transparent 55%),linear-gradient(160deg,var(--teal900,#00272B),var(--teal700,#00545C))}
.zbc-hero-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.zbc-logo{height:22px;width:auto;display:block}
.zbc-hero .zbc-x{color:#fff}
.zbc-hero .zbc-x:hover{background:rgba(255,255,255,.14)}
.zbc-hero h2{font-size:24px;line-height:1.15;letter-spacing:-.015em;font-weight:700}
.zbc-hero p{font-size:24px;line-height:1.15;letter-spacing:-.015em;font-weight:700;color:rgba(255,255,255,.62)}
.zbc-home-body{padding:0 14px 16px;margin-top:-44px;display:flex;flex-direction:column;gap:12px}

.zbc-card{background:var(--paper,#fff);border:1px solid var(--lineSoft,#E2E6E5);border-radius:12px;box-shadow:0 1px 2px rgba(22,33,31,.05),0 2px 8px rgba(22,33,31,.05)}
.zbc-start{display:flex;align-items:center;gap:12px;padding:12px 14px;text-align:left;width:100%;transition:box-shadow var(--t-move,220ms),transform var(--t-move,220ms),border-color var(--t-colour,160ms)}
.zbc-start:hover{transform:translateY(-1px);border-color:var(--teal300,#7FC4CA);box-shadow:0 8px 22px rgba(22,33,31,.1)}
.zbc-start .zbc-av{width:40px;height:40px;background:var(--teal50,#F0F8F9)}
.zbc-start > span:not(.zbc-av){flex:1;min-width:0}
.zbc-start b{display:block;font-size:14.5px}
.zbc-start em{display:block;font-style:normal;font-size:12.5px;color:var(--ink500,#5C6968);margin-top:2px}
.zbc-start i{color:var(--teal600,#006C76);display:grid}

.zbc-search{display:flex;align-items:center;gap:8px;background:var(--paper,#fff);border:1px solid var(--lineSoft,#E2E6E5);border-radius:12px;padding:0 12px;min-height:44px;
  box-shadow:0 1px 2px rgba(22,33,31,.05)}
.zbc-search:focus-within{border-color:var(--teal600,#006C76);box-shadow:0 0 0 2px var(--teal100,#DCEFF1)}
.zbc-sico{color:var(--ink500,#5C6968);display:grid}
.zbc-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:14px;color:var(--ink900,#16211F);outline:none;padding:10px 0}
.zbc-search input::-webkit-search-cancel-button{-webkit-appearance:none}

.zbc-block{background:var(--paper,#fff);border:1px solid var(--lineSoft,#E2E6E5);border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(22,33,31,.05)}
.zbc-block h3{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink500,#5C6968);padding:12px 14px 6px}

/* rows (home list + help list) */
.zbc-list li{border-top:1px solid var(--lineSoft,#E2E6E5)}
.zbc-list li:first-child{border-top:0}
.zbc-block .zbc-list li:first-child{border-top:1px solid var(--lineSoft,#E2E6E5)}
.zbc-list > li > button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:0;padding:11px 12px 11px 14px;min-height:44px;transition:background var(--t-colour,160ms)}
.zbc-list > li > button:hover{background:var(--teal50,#F0F8F9)}
.zbc-list > li > button:focus-visible{outline:2px solid var(--orange500,#F36B21);outline-offset:-2px}
.zbc-list > li > button > span{flex:1;min-width:0}
.zbc-list b{display:block;font-size:14px;font-weight:600;line-height:1.3}
.zbc-list em{display:block;font-style:normal;font-size:12.5px;color:var(--ink500,#5C6968)}
.zbc-list i{color:var(--ink500,#5C6968);display:grid;transition:transform var(--t-move,220ms),color var(--t-colour,160ms)}
.zbc-list > li > button:hover i{transform:translateX(2px);color:var(--orange500,#F36B21)}
.zbc-list > li > button[aria-expanded="true"] i{transform:rotate(90deg)}

/* ── Bars (Messages / Help) ── */
.zbc-bar{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 6px;border-bottom:1px solid var(--lineSoft,#E2E6E5);background:var(--paper,#fff);flex:none;min-height:56px}
.zbc-bar-help{padding-left:16px}
.zbc-bar .zbc-av{width:30px;height:30px;background:var(--teal50,#F0F8F9)}
.zbc-who{flex:1;min-width:0}
.zbc-who b{display:block;font-size:15px;line-height:1.2}
.zbc-who span{display:block;font-size:12px;color:var(--ink500,#5C6968);margin-top:1px}
.zbc-who span i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#2E7D5B;margin-right:5px;vertical-align:1px;font-style:normal}

/* ── Messages ── */
.zbc-log{flex:1;overflow-y:auto;padding:16px 14px 6px;background:var(--paper,#fff);overscroll-behavior:contain}
.zbc-msg{display:flex;gap:8px;margin:0 0 8px;animation:zbc-msg .2s ease-out}
@keyframes zbc-msg{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.zbc-msg.zbc-me{justify-content:flex-end}
.zbc-msg .zbc-av{width:24px;height:24px;align-self:flex-end;border:1px solid var(--lineSoft,#E2E6E5)}
.zbc-b{max-width:84%;padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.5;word-wrap:break-word}
.zbc-msg.zbc-bot .zbc-b{background:var(--sand,#F7F6F3);border-bottom-left-radius:4px}
.zbc-msg.zbc-me .zbc-b{background:var(--teal900,#00272B);color:#fff;border-bottom-right-radius:4px}
.zbc-b p{margin:0 0 7px;font-size:14px;line-height:1.5}
.zbc-b p:last-child{margin-bottom:0}
.zbc-b a{color:var(--teal700,#00545C);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.zbc-b a:hover{color:var(--orange600,#E85F14)}

.zbc-cards{display:flex;flex-direction:column;gap:6px;margin:2px 0 8px 32px}
.zbc-jcard{display:flex;gap:10px;align-items:center;background:var(--paper,#fff);border:1px solid var(--lineSoft,#E2E6E5);border-radius:12px;padding:7px 10px 7px 7px;text-decoration:none;color:inherit;
  transition:border-color var(--t-colour,160ms),transform var(--t-move,220ms),box-shadow var(--t-move,220ms)}
.zbc-jcard:hover{border-color:var(--orange500,#F36B21);transform:translateY(-1px);box-shadow:0 8px 22px rgba(243,107,33,.14)}
.zbc-jcard img{width:64px;height:48px;border-radius:8px;object-fit:cover;flex:none}
.zbc-jcard span{flex:1;min-width:0}
.zbc-jcard b{display:block;font-size:13.5px;line-height:1.25;font-weight:600}
.zbc-jcard em{display:block;font-style:normal;font-size:12px;color:var(--ink500,#5C6968);margin-top:2px}
.zbc-jcard i{color:var(--ink500,#5C6968);display:grid}
.zbc-jcard:hover i{color:var(--orange500,#F36B21)}
.zbc-links{margin:0 0 8px 32px;display:flex;flex-direction:column;gap:4px}
.zbc-more{font-size:13px;font-weight:600;color:var(--teal700,#00545C);text-decoration:none}
.zbc-more::after{content:" →"}
.zbc-more:hover{color:var(--orange600,#E85F14);text-decoration:underline}

.zbc-chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 10px 32px}
.zbc-chip{border:1px solid var(--teal600,#006C76);background:var(--paper,#fff);color:var(--teal700,#00545C);border-radius:999px;padding:7px 12px;font-size:13px;font-weight:600;line-height:1.2;min-height:34px;text-align:left;
  transition:background var(--t-colour,160ms),color var(--t-colour,160ms),border-color var(--t-colour,160ms)}
.zbc-chip:hover{background:var(--teal900,#00272B);border-color:var(--teal900,#00272B);color:#fff}
.zbc-chip:focus-visible{outline:2px solid var(--orange500,#F36B21);outline-offset:2px}

.zbc-form{margin:2px 0 10px 32px;background:var(--sand,#F7F6F3);border-radius:12px;padding:12px}
.zbc-form label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink500,#5C6968);margin:0 0 4px}
.zbc-form input,.zbc-form select{width:100%;min-height:42px;border:1px solid var(--lineStrong,#C9D0CE);border-radius:8px;padding:8px 11px;font:inherit;font-size:14px;color:var(--ink900,#16211F);background:#fff;margin-bottom:9px}
.zbc-form input:focus,.zbc-form select:focus{outline:2px solid var(--teal600,#006C76);outline-offset:1px;border-color:var(--teal600,#006C76)}
.zbc-form .zbc-go{width:100%;min-height:44px;border:0;border-radius:999px;background:var(--teal900,#00272B);color:#fff;font-weight:700;font-size:14px;transition:background var(--t-colour,160ms),transform var(--t-move,220ms)}
.zbc-form .zbc-go:hover{background:var(--orange500,#F36B21);transform:translateY(-1px)}
.zbc-form .zbc-err{color:var(--error,#B3261E);font-size:12.5px;margin:-4px 0 8px;display:none}
.zbc-form.zbc-bad .zbc-err{display:block}

.zbc-typing .zbc-b{display:flex;gap:4px;align-items:center;padding:12px 14px}
.zbc-typing .zbc-b i{width:6px;height:6px;border-radius:50%;background:var(--ink500,#5C6968);opacity:.5;animation:zbc-dots 1s infinite}
.zbc-typing .zbc-b i:nth-child(2){animation-delay:.15s}.zbc-typing .zbc-b i:nth-child(3){animation-delay:.3s}
@keyframes zbc-dots{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-3px);opacity:1}}

.zbc-in{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--lineSoft,#E2E6E5);background:var(--paper,#fff);flex:none}
.zbc-in input{flex:1;min-width:0;min-height:42px;border:1px solid var(--lineStrong,#C9D0CE);border-radius:999px;padding:9px 14px;font:inherit;font-size:14px;color:var(--ink900,#16211F)}
.zbc-in input:focus{outline:2px solid var(--teal600,#006C76);outline-offset:1px;border-color:var(--teal600,#006C76)}
.zbc-send{width:42px;height:42px;flex:none;border:0;border-radius:50%;background:var(--orange500,#F36B21);color:#fff;display:grid;place-items:center;transition:background var(--t-colour,160ms),transform var(--t-move,220ms)}
.zbc-send:hover{background:var(--orange600,#E85F14);transform:translateY(-1px)}
.zbc-send:focus-visible{outline:2px solid var(--teal900,#00272B);outline-offset:2px}

/* ── Help ── */
.zbc-help-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:12px 12px 16px;background:var(--paper,#fff)}
.zbc-help-body .zbc-search{margin-bottom:8px;background:var(--sand,#F7F6F3);box-shadow:none}
.zbc-faqlist{border:1px solid var(--lineSoft,#E2E6E5);border-radius:12px;overflow:hidden}
.zbc-ans{padding:2px 14px 14px 14px;font-size:14px;line-height:1.5;color:var(--ink700,#3E4C4B);background:var(--sand,#F7F6F3)}
.zbc-ans p{margin:10px 0 0}
.zbc-ans .zbc-more{display:inline-block;margin:10px 12px 0 0}
.zbc-askthis{display:block;margin-top:12px;border:1px solid var(--teal600,#006C76);background:var(--paper,#fff);color:var(--teal700,#00545C);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;min-height:36px;transition:background var(--t-colour,160ms),color var(--t-colour,160ms)}
.zbc-askthis:hover{background:var(--teal900,#00272B);color:#fff;border-color:var(--teal900,#00272B)}
.zbc-none{padding:18px 6px;color:var(--ink500,#5C6968);font-size:13.5px}

/* ── Tabs ── */
.zbc-tabs{flex:none;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--lineSoft,#E2E6E5);background:var(--paper,#fff);padding-bottom:env(safe-area-inset-bottom,0px)}
.zbc-tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px 9px;min-height:56px;border:0;background:transparent;color:var(--ink500,#5C6968);font-size:11.5px;font-weight:600;transition:color var(--t-colour,160ms)}
.zbc-tab svg{width:22px;height:22px}
.zbc-tab:hover{color:var(--teal700,#00545C)}
.zbc-tab.is-on{color:var(--teal900,#00272B)}
.zbc-tab.is-on svg{color:var(--orange500,#F36B21)}
.zbc-tab:focus-visible{outline:2px solid var(--orange500,#F36B21);outline-offset:-2px}

/* ── Phone: full-height sheet, launcher hidden while open ── */
@media (max-width:640px){
  .zbc-root{right:16px;bottom:16px}
  .zbc-root.zbc-open{right:0;bottom:0;left:0;top:0}
  .zbc-root.zbc-open .zbc-launch,.zbc-root.zbc-open .zbc-nudge{display:none}
  .zbc-panel{position:absolute;inset:0;width:100%;max-width:none;height:100%;border-radius:0;bottom:0}
  .zbc-hero{padding-top:calc(14px + env(safe-area-inset-top,0px))}
  .zbc-b{max-width:88%}
}

@media (prefers-reduced-motion:reduce){
  .zbc-root,.zbc-launch,.zbc-panel,.zbc-msg,.zbc-jcard,.zbc-chip,.zbc-nudge,.zbc-li,.zbc-start{animation:none!important;transition:none!important}
}
@media print{.zbc-root{display:none!important}}