/* Pyre live support widget (public/support-widget.js), shared by the three
   shells. The shells name their tokens differently (Pyre.Stream and Pyre.Chat
   use omni-ui.css, Pyre.Bot its own --pb-* set), so the widget reads them
   through its own --sw-* aliases, first the omni-ui token, then the Pyre.Bot
   one. No raw colors here: every color is a shell token. */

.sw-root,
.sw-help{
  --sw-bg:var(--bg, var(--pb-bg));
  --sw-surface:var(--surface, var(--pb-surface));
  --sw-raised:var(--surface-raised, var(--pb-raised));
  --sw-inset:var(--surface-inset, var(--pb-inset));
  --sw-line:var(--border, var(--pb-line));
  --sw-line-accent:var(--border-accent, var(--pb-line-accent));
  --sw-accent:var(--accent, var(--pb-accent));
  --sw-wash:var(--accent-wash, var(--pb-wash));
  --sw-on-accent:var(--on-strong, var(--pb-on-strong));
  --sw-ink:var(--text, var(--pb-ink));
  --sw-dim:var(--text-dim, var(--pb-dim));
  --sw-faint:var(--text-faint, var(--pb-faint));
  --sw-danger:var(--danger, var(--pb-danger));
  --sw-display:var(--font-display, var(--pb-display));
  --sw-mono:var(--font-mono, var(--pb-mono));
  --sw-r:var(--r, var(--pb-r));
  --sw-r-sm:var(--r-sm, var(--pb-r-sm));
  --sw-r-pill:var(--r-pill, var(--pb-r-lg));
  --sw-shadow:var(--shadow-modal, var(--pb-shadow-modal));
  --sw-safe-bottom:env(safe-area-inset-bottom, 0px);
  --sw-lift:0px;
  /* The live height of the shell's toast stack plus a gap, set by the widget
     (liftForToasts): the bubble rides above the toasts instead of under them. */
  --sw-toast:0px;
  --sw-z:110;
}

/* Stacking, per shell. The widget sits above the page content but UNDER
   each shell's modals and menus:
   - Pyre.Stream: 110. Under .sec-modal (120), .cmdk (130), the phone sidebar
     and its scrim (130 to 140) and the tab bar (120); over the toasts
     (.sec-toast-wrap, 60), which it rides above anyway.
   - Pyre.Bot: 15. Under .veil (20), the switcher and modal layer; its toasts
     (.pb-toast-region, 60) stay on top and the bubble rides above them.
   - Pyre.Chat: 150. Under #toast-container (200) and the settings overlays. */
.sw-root[data-product="stream"],
.sw-help[data-product="stream"]{--sw-z:110}
.sw-root[data-product="bot"],
.sw-help[data-product="bot"]{--sw-z:15}
.sw-root[data-product="chat"],
.sw-help[data-product="chat"]{--sw-z:140}
.sw-root[hidden],
.sw-help[hidden],
.sw-bubble[hidden],
.sw-panel[hidden],
.sw-pane[hidden],
.sw-dot[hidden],
.sw-sr[hidden],
.sw-err[hidden]{display:none !important}

/* ── the top-bar Help button ── */
.sw-help{
  position:relative; display:inline-flex; align-items:center; gap:6px; flex:none;
  font-family:var(--sw-mono); font-size:11px; font-weight:700; line-height:1;
  border:1px solid var(--sw-line); border-radius:var(--sw-r-pill);
  padding:6px 11px; margin-right:8px; min-height:30px;
  color:var(--sw-dim); background:var(--sw-inset); cursor:pointer;
}
.sw-help:hover{color:var(--sw-ink); border-color:var(--sw-line-accent)}
.sw-help[aria-expanded="true"]{color:var(--sw-accent); border-color:var(--sw-line-accent); background:var(--sw-wash)}
.sw-help-mark{font-size:12px}
.sw-help .sw-dot{position:absolute; top:-2px; right:-2px}

.sw-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--sw-danger); box-shadow:0 0 0 2px var(--sw-surface);
}

/* ── the floating bubble ── */
.sw-bubble{
  position:fixed; z-index:var(--sw-z);
  right:max(16px, env(safe-area-inset-right, 0px));
  bottom:calc(max(16px, var(--sw-safe-bottom)) + var(--sw-lift) + var(--sw-toast));
}
.sw-bubble-open{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sw-display); font-size:12.5px; font-weight:700;
  background:var(--sw-accent); color:var(--sw-on-accent);
  border:0; border-radius:var(--sw-r-pill); padding:9px 14px 9px 10px;
  box-shadow:var(--sw-shadow); cursor:pointer;
}
.sw-bubble-mark{
  width:22px; height:22px; border-radius:50%; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--sw-on-accent); color:var(--sw-accent);
  font-family:var(--sw-mono); font-size:12px;
}
.sw-bubble-text{white-space:nowrap}
.sw-bubble-open .sw-dot{position:absolute; top:-2px; right:10px; box-shadow:0 0 0 2px var(--sw-bg)}
.sw-bubble-x{
  position:absolute; top:-9px; right:-6px; width:20px; height:20px; padding:0;
  border-radius:50%; border:1px solid var(--sw-line);
  background:var(--sw-surface); color:var(--sw-dim);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; line-height:1; cursor:pointer;
}
.sw-bubble-x:hover{color:var(--sw-ink)}

/* Above the app's own bottom bars: Pyre.Stream's tab bar (shown at 860px and
   below) and Pyre.Chat's message input (always at the bottom of the feed).
   Pyre.Chat's value is the fallback only: the widget measures the input live
   (liftForBar) and sets --sw-lift inline to its height plus a gap, so the
   bubble and the panel sit over the messages, never over the input. */
@media (max-width:860px){
  .sw-root[data-product="stream"]{--sw-lift:64px}
}
.sw-root[data-product="chat"]{--sw-lift:64px}
/* The Android Pyre.Stream app (?embedded) hides the top bar AND the tab bar:
   no lift, the bubble sits on the corner. */
.sw-root[data-product][data-in-app]{--sw-lift:0px}

/* Visually hidden, read by screen readers (the bubble's "New reply"). */
.sw-sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ── the panel ── */
.sw-panel{
  position:fixed; z-index:var(--sw-z);
  right:max(16px, env(safe-area-inset-right, 0px));
  bottom:calc(max(16px, var(--sw-safe-bottom)) + var(--sw-lift));
  width:min(380px, calc(100vw - 32px));
  /* The lift (Pyre.Chat's emote bar + input, up to ~300px) comes off the height
     at every width: without it the header and its close button sat above the
     viewport on short screens (owner report 2026-11-05). */
  height:min(560px, calc(100dvh - 96px - var(--sw-lift)));
  display:flex; flex-direction:column;
  background:var(--sw-surface); color:var(--sw-ink);
  border:1px solid var(--sw-line); border-radius:var(--sw-r);
  box-shadow:var(--sw-shadow); font-family:var(--sw-display); font-size:13px; line-height:1.45;
  overflow:hidden;
}
.sw-head{display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-bottom:1px solid var(--sw-line)}
.sw-head-text{flex:1; min-width:0}
.sw-title{display:block; font-size:14px}
.sw-sub{display:block; font-size:11px; color:var(--sw-faint)}
.sw-close{
  flex:none; width:28px; height:28px; padding:0; border-radius:var(--sw-r-sm);
  border:1px solid var(--sw-line); background:var(--sw-inset); color:var(--sw-dim);
  font-size:15px; line-height:1; cursor:pointer;
}
.sw-close:hover{color:var(--sw-ink)}

.sw-tabs{display:flex; gap:2px; padding:0 10px; border-bottom:1px solid var(--sw-line)}
.sw-tab{
  padding:9px 10px; margin-bottom:-1px; font:inherit; font-size:12px; cursor:pointer;
  color:var(--sw-faint); background:transparent; border:0; border-bottom:2px solid transparent;
}
.sw-tab:hover{color:var(--sw-ink)}
.sw-tab.on{color:var(--sw-accent); border-bottom-color:var(--sw-accent)}

.sw-pane{flex:1; min-height:0; display:flex; flex-direction:column}
.sw-msgs{flex:1; min-height:0; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:8px}
.sw-empty{margin:0; color:var(--sw-faint); font-size:12.5px}
.sw-msg{max-width:86%; padding:8px 11px; border-radius:12px; font-size:12.5px; overflow-wrap:anywhere; white-space:pre-wrap}
.sw-me{align-self:flex-end; background:var(--sw-wash); border:1px solid var(--sw-line-accent); border-bottom-right-radius:4px}
.sw-them{align-self:flex-start; background:var(--sw-inset); border:1px solid var(--sw-line); border-bottom-left-radius:4px}
.sw-body{display:block}
.sw-meta{display:block; margin-top:3px; font-family:var(--sw-mono); font-size:10px; color:var(--sw-faint); white-space:normal}

.sw-topics{display:flex; flex-wrap:wrap; gap:6px; padding:0 12px 10px}
.sw-topic{
  font:inherit; font-size:11px; cursor:pointer; padding:4px 10px;
  border:1px solid var(--sw-line); border-radius:var(--sw-r-pill);
  background:transparent; color:var(--sw-dim);
}
.sw-topic:hover{color:var(--sw-ink); border-color:var(--sw-line-accent)}
.sw-err{margin:0; padding:0 14px 8px; font-size:12px; color:var(--sw-danger)}

.sw-compose{display:flex; gap:8px; align-items:flex-end; padding:10px 12px; border-top:1px solid var(--sw-line)}
.sw-input{
  flex:1; min-width:0; resize:none; max-height:120px;
  font:inherit; font-size:12.5px; color:var(--sw-ink);
  background:var(--sw-inset); border:1px solid var(--sw-line); border-radius:var(--sw-r-sm); padding:8px 10px;
}
.sw-input:focus{outline:none; border-color:var(--sw-line-accent)}
.sw-send{
  flex:none; cursor:pointer; padding:8px 14px;
  font-family:var(--sw-mono); font-size:11px; font-weight:700;
  background:var(--sw-accent); color:var(--sw-on-accent);
  border:1px solid var(--sw-accent); border-radius:var(--sw-r-sm);
}
.sw-send:disabled{opacity:.6; cursor:default}

.sw-guides{overflow-y:auto; padding:12px 14px; gap:8px}
.sw-guides-intro{margin:0; color:var(--sw-faint); font-size:12px}
.sw-guide{
  display:block; padding:10px 12px; text-decoration:none; color:var(--sw-ink);
  background:var(--sw-inset); border:1px solid var(--sw-line); border-radius:var(--sw-r-sm);
}
.sw-guide:hover{border-color:var(--sw-line-accent)}
.sw-guide-name{display:block; font-size:12.5px}
.sw-guide-line{display:block; font-size:12px; color:var(--sw-dim)}

/* Phones: the label leaves the top bar, the panel takes the full width. */
@media (max-width:639px){
  .sw-help{padding:6px 9px; margin-right:6px}
  .sw-help-label{display:none}
  .sw-panel{
    left:max(8px, env(safe-area-inset-left, 0px)); right:max(8px, env(safe-area-inset-right, 0px)); width:auto;
    bottom:calc(8px + var(--sw-safe-bottom) + var(--sw-lift));
    height:min(560px, calc(100dvh - 72px - var(--sw-lift)));
  }
}