/*
 * orb-shell.css — shared site shell for ANV-Gyro marketing pages.
 *   · Theme tokens (dark + light) and FOUC-safe data-theme switching
 *   · Top nav skeleton + lang pills + theme toggle
 *   · Footer skeleton
 *   · Orb dock (floating chat + advisor canvas + lasso button)
 *   · Page-wide lasso overlay (orb sphere intentionally OMITTED — lives in
 *     the chat header now per user feedback "ten orb v lasse se točil")
 *   · i18n via CSS-driven visibility: html[lang="x"] hides spans of other langs
 *
 * Each marketing page links this once; the .js file is the matching JS.
 * Pages keep their own page-specific styles INLINE (hero/sections/etc.).
 *
 * The @import below pulls in the additive Design System foundation
 * (radii ladder, elevation, motion, spacing, semantic typo classes,
 * refined Apple themes) from Claude Design's anv-gyro-design-system bundle.
 * Token aliases mean both --text2/--text3 and --text-2/--text-3 work.
 */

@import url("design-system.css");

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

/* ── DARK PALETTE (default) ── */
:root, :root[data-theme="dark"]{
  --bg-deep:    #0a0e14;
  --bg-surface: #111820;
  --bg-elevated:#182230;
  --bg-input:   #131b26;
  --text:       #d4dbe4;
  --text2:      #7a8a9e;
  --text3:      #4a5a6e;
  --blue:       #5BA4D9;
  --blue-glow:  rgba(91,164,217,.15);
  --blue-dim:   #2A5F8F;
  --teal:       #4A9E8E;
  --teal-glow:  rgba(74,158,142,.18);
  --purple:     #7F77DD;
  --purple-glow:rgba(127,119,221,.16);
  --orange:     #D4874A;
  --danger:     #E24B4A;
  --success:    #4A9E6E;
  --red-glow:   rgba(226,75,74,.18);
  --border:     rgba(91,164,217,.12);
  --border-active: rgba(91,164,217,.35);
  --shadow:     0 12px 32px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.4);
  --grid-line:  rgba(91,164,217,.08);
}

/* ── LIGHT PALETTE ── */
:root[data-theme="light"]{
  --bg-deep:    #f5f7fb;
  --bg-surface: #ffffff;
  --bg-elevated:#fafbfd;
  --bg-input:   #f1f3f7;
  --text:       #15181d;
  --text2:      #5a6273;
  --text3:      #9098a7;
  --blue:       #2A6FBB;
  --blue-glow:  rgba(42,111,187,.10);
  --blue-dim:   #1f4e87;
  --teal:       #2D7A6E;
  --teal-glow:  rgba(45,122,110,.12);
  --purple:     #5E55C4;
  --purple-glow:rgba(94,85,196,.12);
  --orange:     #B96A29;
  --danger:     #C33A39;
  --success:    #2D7A4E;
  --red-glow:   rgba(195,58,57,.10);
  --border:     rgba(42,111,187,.16);
  --border-active: rgba(42,111,187,.42);
  --shadow:     0 12px 32px rgba(20,30,50,.10), 0 2px 4px rgba(20,30,50,.06);
  --grid-line:  rgba(42,111,187,.08);
}

html{scroll-behavior:smooth}
body{
  font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;
  background:var(--bg-deep);color:var(--text);
  overflow-x:hidden;line-height:1.6;
  transition:background-color .35s ease, color .35s ease;
}
a{color:inherit;text-decoration:none}
code,pre{font-family:'JetBrains Mono',monospace}

/* Smooth crossfade when toggling theme */
html.theme-swap, html.theme-swap *, html.theme-swap *::before, html.theme-swap *::after{
  transition:background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease !important;
}

/* ── i18n: show only spans matching the current html[lang] ── */
[data-i18n] > [lang]{display:none}
html[lang="en"] [data-i18n] > [lang="en"],
html[lang="cs"] [data-i18n] > [lang="cs"],
html[lang="de"] [data-i18n] > [lang="de"]{display:inline}
html[lang="en"] [data-i18n][data-block] > [lang="en"],
html[lang="cs"] [data-i18n][data-block] > [lang="cs"],
html[lang="de"] [data-i18n][data-block] > [lang="de"]{display:block}
/* Fallback: if user's lang has no translation yet, fall back to EN */
[data-i18n] > [lang="en"]{display:inline}
html[lang="cs"] [data-i18n] > [lang="en"]:not(:only-child),
html[lang="de"] [data-i18n] > [lang="en"]:not(:only-child){display:none}

/* ── NAV ── */
nav.orb-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:.6rem 1.8rem;height:52px;
  background:color-mix(in srgb, var(--bg-surface) 88%, transparent);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
nav.orb-nav::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--blue),transparent);opacity:.3;
}
.orb-nav-brand{display:flex;align-items:center;gap:.6rem}
.orb-nav-orb{width:28px;height:28px;border-radius:50%;object-fit:cover;opacity:.7;flex-shrink:0}
.orb-nav-name{font-size:13px;font-weight:500;letter-spacing:.03em;color:var(--text)}
.orb-nav-name span{color:var(--blue)}
.orb-nav-tag{
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);
  font-family:'JetBrains Mono',monospace;margin-left:6px;
}
.orb-nav-links{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.orb-nav-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:500;color:var(--blue);
  border:1px solid var(--border);
  padding:6px 12px;border-radius:20px;background:transparent;
  transition:all .2s;font-family:'DM Sans',sans-serif;
}
.orb-nav-link:hover{border-color:var(--border-active);background:var(--blue-glow)}
.orb-nav-link.primary{background:var(--blue-glow);color:var(--text)}

/* Language pills + theme toggle in nav */
.orb-lang-pills{
  display:inline-flex;align-items:center;
  border:1px solid var(--border);border-radius:99px;
  padding:2px;background:var(--bg-elevated);
  font-family:'JetBrains Mono',monospace;
}
.orb-lang-pills button{
  background:transparent;border:none;cursor:pointer;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  color:var(--text3);padding:5px 10px;border-radius:99px;
  transition:all .15s;font-family:'JetBrains Mono',monospace;
}
.orb-lang-pills button:hover{color:var(--text2)}
.orb-lang-pills button.active{background:var(--blue);color:#fff}

.orb-theme-toggle{
  background:transparent;border:1px solid var(--border);
  width:30px;height:30px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text2);cursor:pointer;transition:all .2s;
  font-size:13px;line-height:1;
}
.orb-theme-toggle:hover{color:var(--text);border-color:var(--border-active);background:var(--blue-glow)}

/* ── FOOTER ── */
footer.orb-footer{
  background:var(--bg-surface);border-top:1px solid var(--border);
  padding:1.5rem 1.8rem;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.8rem;
  font-size:10.5px;color:var(--text3);font-family:'JetBrains Mono',monospace;letter-spacing:.04em;position:relative;
}
footer.orb-footer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--blue),transparent);opacity:.3;
}
.orb-foot-brand{color:var(--text2)}
.orb-foot-brand a{color:var(--blue);text-decoration:none}
.orb-foot-brand a:hover{text-decoration:underline}
.orb-foot-links{display:flex;gap:1.2rem;flex-wrap:wrap}
.orb-foot-links a{color:var(--text3);transition:color .2s;text-decoration:none}
.orb-foot-links a:hover{color:var(--blue)}

/* ── ORB DOCK (floating chat) ── */
.orb-dock{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:200;
  pointer-events:none;
}
.orb-dock-fab, .orb-dock-panel{pointer-events:auto}

.orb-dock-fab{
  width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%, var(--blue) 0%, var(--blue-dim) 45%, transparent 70%);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  box-shadow:0 0 26px var(--blue-glow), var(--shadow);
  transition:transform .25s ease, opacity .25s ease;
}
.orb-dock-fab:hover{transform:scale(1.04)}
.orb-dock-fab img{
  width:48px;height:48px;border-radius:50%;object-fit:cover;
  opacity:.65;pointer-events:none;
}
.orb-dock-fab::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--blue);opacity:.5;
  animation:orb-fab-ring 3.5s ease-in-out infinite;
}
@keyframes orb-fab-ring{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.12);opacity:1}}

/* FAB label + arrow are MOBILE-ONLY (the bottom-pill affordance). On
 * desktop the FAB is a 64×64 circular orb icon — text would crowd it.
 * Default hidden; the @media (max-width: 768px) block at the bottom
 * of this file re-shows them. */
.orb-dock-fab-label, .orb-dock-fab-arrow{display:none}

.orb-dock-panel{
  position:absolute;right:0;bottom:0;
  width:min(460px, calc(100vw - 2rem));
  max-height:min(680px, calc(100vh - 100px));
  background:var(--bg-surface);
  border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow);
  display:none;flex-direction:column;overflow:hidden;
  transform-origin:bottom right;
}
.orb-dock.open .orb-dock-panel{display:flex;animation:orb-dock-pop .22s cubic-bezier(.2,.8,.2,1) both}
.orb-dock.open .orb-dock-fab{opacity:0;pointer-events:none}
@keyframes orb-dock-pop{from{transform:translateY(8px) scale(.96);opacity:0}to{transform:none;opacity:1}}
/* Used by the mobile bottom-sheet (@media (max-width: 768px) further down).
 * Defined here at top level rather than inside the @media block because
 * some browsers silently fail to register @keyframes scoped to a media
 * query, leaving the animation stuck at frame 0 (panel translated 100%
 * below the viewport — chat invisible to the user). */
@keyframes orb-dock-sheet-in{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}

.orb-dock-head{
  position:relative;
  display:flex;align-items:center;gap:.55rem;padding:.6rem .9rem;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--bg-elevated) 96%, transparent) 0%,
    color-mix(in srgb, var(--bg-elevated) 86%, transparent) 60%,
    color-mix(in srgb, var(--bg-elevated) 0%, transparent) 100%);
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text2);user-select:none;
  z-index:3;margin-bottom:-14px;
}
.orb-dock-head-grip{color:var(--text3);font-size:14px;line-height:1;letter-spacing:0;cursor:grab}
.orb-dock-head-glyph{
  width:18px;height:18px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--blue);font-size:13px;line-height:1;
  border:1px solid var(--blue);
}
.orb-dock-head-name{flex:1;font-weight:500;color:var(--text);letter-spacing:.18em}

/* "Lasso anywhere" button — pulsing, attention-grabbing */
.orb-dock-lasso{
  position:relative;
  background:linear-gradient(135deg, var(--blue-dim), var(--blue));
  border:1px solid var(--blue);
  width:30px;height:30px;border-radius:50%;cursor:pointer;
  color:#fff;font-size:15px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  letter-spacing:0;transition:transform .2s, filter .2s;
  box-shadow:0 0 12px var(--blue-glow);flex-shrink:0;
}
.orb-dock-lasso:hover{transform:scale(1.08);filter:brightness(1.15)}
.orb-dock-lasso:active{transform:scale(.95)}
.orb-dock-lasso::before, .orb-dock-lasso::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:2px solid var(--blue);pointer-events:none;opacity:0;
}
.orb-dock-lasso::before{animation:orb-lasso-pulse 1.8s ease-out infinite}
.orb-dock-lasso::after{animation:orb-lasso-pulse 1.8s ease-out .9s infinite}
@keyframes orb-lasso-pulse{
  0%{transform:scale(.95);opacity:.85}
  100%{transform:scale(1.7);opacity:0}
}
.orb-dock-lasso.dismissed::before,
.orb-dock-lasso.dismissed::after{animation:none;opacity:0}

.orb-dock-tip{
  position:absolute;top:calc(100% + 10px);right:38px;
  background:var(--bg-elevated);border:1px solid var(--blue);color:var(--text);
  font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;
  padding:.5rem .85rem;border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.35), 0 0 16px var(--blue-glow);
  white-space:nowrap;z-index:5;
  animation:orb-tip-bob 2.4s ease-in-out infinite, orb-tip-in .35s ease both;
  pointer-events:none;display:flex;align-items:center;gap:.45rem;
}
.orb-dock-tip strong{color:var(--blue);font-weight:600}
.orb-dock-tip::after{
  content:'';position:absolute;top:-6px;right:14px;
  width:10px;height:10px;background:var(--bg-elevated);
  border-top:1px solid var(--blue);border-right:1px solid var(--blue);
  transform:rotate(-45deg);
}
.orb-dock-tip.gone{animation:orb-tip-out .25s ease forwards}
@keyframes orb-tip-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes orb-tip-out{to{opacity:0;transform:translateY(-4px) scale(.95)}}
@keyframes orb-tip-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}

.orb-dock-close{
  background:transparent;border:1px solid transparent;color:var(--text3);
  width:28px;height:28px;border-radius:50%;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:16px;line-height:1;transition:all .2s;
}
.orb-dock-close:hover{color:var(--text);border-color:var(--border);background:var(--bg-deep)}

/* Particle canvas — the AdvisorOrb live presence */
.orb-dock-canvas-wrap{
  position:relative;height:170px;flex-shrink:0;
  background:radial-gradient(ellipse 80% 70% at 50% 50%, #11254f 0%, #0a1632 55%, #060e22 100%);
  overflow:hidden;z-index:1;
  -webkit-mask-image:linear-gradient(to bottom,
    transparent 0, black 30px, black calc(100% - 22px), transparent 100%);
  mask-image:linear-gradient(to bottom,
    transparent 0, black 30px, black calc(100% - 22px), transparent 100%);
}
[data-theme="light"] .orb-dock-canvas-wrap{
  background:radial-gradient(ellipse 80% 70% at 50% 50%, #0e2147 0%, #081530 55%, #04091e 100%);
}
.orb-dock-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.orb-dock-canvas-status{
  position:absolute;right:.9rem;top:.7rem;
  font-family:'JetBrains Mono',monospace;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(150,190,235,.6);z-index:2;pointer-events:none;
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.2rem .55rem;border-radius:99px;
  background:rgba(8,18,38,.55);
  border:1px solid rgba(150,190,235,.18);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.orb-dock-canvas-status strong{color:rgba(220,240,255,.95);font-weight:600;letter-spacing:.16em}
.orb-dock-canvas-status::before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:rgba(150,190,235,.6);
}
.orb-dock-canvas-wrap.thinking .orb-dock-canvas-status::before{
  background:var(--teal);box-shadow:0 0 8px var(--teal);
  animation:orb-blink 1.2s ease-in-out infinite;
}
.orb-dock-canvas-wrap.thinking .orb-dock-canvas-status{
  color:rgba(120,255,200,.85);border-color:rgba(74,158,142,.4);background:rgba(10,30,28,.6);
}
@keyframes orb-blink{0%,100%{opacity:.3}50%{opacity:1}}

.orb-dock-body{
  flex:1;min-height:140px;overflow-y:auto;
  padding:1.1rem 1rem .9rem;display:flex;flex-direction:column;gap:.65rem;
  background:var(--bg-surface);
  margin-top:-14px;position:relative;z-index:2;
}
.orb-dock-body::-webkit-scrollbar{width:4px}
.orb-dock-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

.orb-msg{display:flex;max-width:92%}
.orb-msg-bubble{
  font-size:.82rem;line-height:1.6;
  padding:.65rem .85rem;border-radius:12px;
  background:var(--bg-elevated);color:var(--text);
  border:1px solid var(--border);
  white-space:pre-wrap;word-wrap:break-word;
}
.orb-msg.user{align-self:flex-end}
.orb-msg.user .orb-msg-bubble{
  background:linear-gradient(135deg,var(--blue-dim),var(--blue));
  color:#fff;border-color:var(--blue-dim);
}
.orb-msg.assistant .orb-msg-bubble.streaming::after{
  content:'▋';color:var(--blue);
  animation:orb-caret 1s steps(1) infinite;margin-left:2px;
}
@keyframes orb-caret{50%{opacity:0}}
.orb-msg.error .orb-msg-bubble{
  background:rgba(212,135,74,.08);color:var(--orange);
  border-color:rgba(212,135,74,.25);
}

.orb-dock-suggest{
  display:flex;flex-wrap:wrap;gap:.35rem;padding:.7rem 1rem;
  border-top:1px solid var(--border);background:var(--bg-surface);
}
.orb-suggest-pill{
  font-size:11px;color:var(--blue);
  border:1px solid var(--border);background:transparent;
  padding:.3rem .7rem;border-radius:99px;cursor:pointer;transition:all .15s;
  font-family:'DM Sans',sans-serif;
}
.orb-suggest-pill:hover{border-color:var(--border-active);background:var(--blue-glow)}

.orb-dock-input-row{
  display:flex;gap:.5rem;padding:.7rem;
  border-top:1px solid var(--border);background:var(--bg-elevated);
}
.orb-dock-input{
  flex:1;background:var(--bg-input);border:1px solid var(--border);
  border-radius:8px;padding:.6rem .8rem;color:var(--text);
  font-family:'DM Sans',sans-serif;font-size:.82rem;
  resize:none;outline:none;transition:border-color .2s;
  min-height:38px;max-height:120px;line-height:1.5;
}
.orb-dock-input:focus{border-color:var(--border-active);box-shadow:0 0 0 3px var(--blue-glow)}
.orb-dock-input::placeholder{color:var(--text3)}
.orb-dock-send{
  background:linear-gradient(135deg,var(--blue-dim),var(--blue));
  color:#fff;border:1px solid var(--blue-dim);
  border-radius:8px;padding:0 1rem;font-size:.8rem;font-weight:500;
  cursor:pointer;font-family:'DM Sans',sans-serif;transition:filter .2s;
}
.orb-dock-send:hover:not(:disabled){filter:brightness(1.1)}
.orb-dock-send:disabled{opacity:.45;cursor:not-allowed}
.orb-dock-foot{
  padding:.55rem 1rem;font-size:10px;color:var(--text3);
  font-family:'JetBrains Mono',monospace;letter-spacing:.04em;
  border-top:1px solid var(--border);background:var(--bg-surface);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.4rem;
}
.orb-dock-foot a{color:var(--blue);text-decoration:none}
.orb-dock-foot a:hover{text-decoration:underline}

/* ── PAGE-WIDE LASSO OVERLAY ── */
.orb-lasso-overlay{
  position:fixed;inset:0;z-index:500;
  cursor:crosshair;background:rgba(10,14,20,.18);
  -webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);
  user-select:none;animation:orb-lasso-fade .25s ease both;
}
@keyframes orb-lasso-fade{from{opacity:0}to{opacity:1}}
.orb-lasso-overlay svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.orb-lasso-hint{
  position:fixed;top:78px;left:50%;transform:translateX(-50%);
  background:var(--bg-elevated);border:1px solid var(--border-active);
  border-radius:99px;padding:.55rem 1.2rem;
  font-size:12px;color:var(--text);box-shadow:var(--shadow);
  z-index:501;pointer-events:none;
  font-family:'DM Sans',sans-serif;
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  max-width:calc(100vw - 2rem);
}
.orb-lasso-hint::before{
  content:'';width:8px;height:8px;border-radius:50%;
  background:var(--blue);animation:orb-blink 1.4s ease-in-out infinite;
}
.orb-lasso-hint kbd{
  padding:2px 7px;border-radius:5px;
  border:1px solid var(--border);
  font-family:'JetBrains Mono',monospace;
  font-size:11px;color:var(--text2);background:var(--bg-deep);
}
.orb-lasso-hint .sep{color:var(--text3);margin:0 .15rem}
body.lasso-active{cursor:crosshair}
body.lasso-active *{user-select:none}

/* ── Scrollbar polish (shared) ── */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-track{background:transparent}

@media(max-width:600px){
  .orb-nav-tag{display:none}
  .orb-nav-links{gap:.25rem}
  .orb-nav-link{padding:4px 8px;font-size:10.5px}
}

/* ═══════════════════════════════════════════════════════════════════════
 * MOBILE DOCK (≤ 768px) — bottom-pill collapsed, slide-up sheet on tap.
 * ═══════════════════════════════════════════════════════════════════════
 * Why this exists: the desktop dock auto-opens to a 460×680 floating panel
 * 900ms after load (so visitors immediately see the orb in action). On a
 * 375-wide phone that means ~85% of the viewport is covered before the
 * visitor has read a single sentence of the marketing copy. Mobile gets a
 * 52px bottom pill instead — visible, but out of the way until tapped.
 *
 * Also: the lasso UI is unreachable on touch (mousemove + mouseup, no
 * touchmove handlers) so we hide it on mobile rather than show a broken
 * affordance.
 */
@media (max-width: 768px) {
  /* Dock spans the full bottom edge */
  .orb-dock { right: 0; bottom: 0; left: 0 }

  /* FAB → horizontal pill with orb icon + label + chevron */
  .orb-dock-fab {
    width: 100%; height: 54px; border-radius: 0;
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--bg-elevated) 92%, transparent) 0%,
      color-mix(in srgb, var(--bg-elevated) 96%, transparent) 100%);
    border-top: 1px solid var(--border-active);
    box-shadow: 0 -10px 28px rgba(0,0,0,.35);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    display: flex; align-items: center; gap: .75rem;
    padding: 0 1.1rem;
  }
  /* No circular halo on mobile */
  .orb-dock-fab::after { display: none }
  .orb-dock-fab:hover { transform: none }
  .orb-dock-fab img { width: 30px; height: 30px; opacity: .85 }
  .orb-dock-fab-label {
    display: inline-block;
    flex: 1; text-align: left;
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px; font-weight: 500;
    letter-spacing: .01em;
  }
  .orb-dock-fab-arrow {
    display: inline-block;
    color: var(--blue);
    font-size: 22px; line-height: 1; padding-right: .25rem;
  }

  /* Panel → full-width bottom-sheet. We keep the SAME show/hide model as
   * desktop (display: none when closed, display: flex when .open) — that
   * way the closed state has zero rendering cost and there's no risk of
   * the off-screen panel intercepting touches. The slide-in animation is
   * applied via a transform on .open only; entry is instant on mobile
   * (a snappy "tap → sheet appears" feels more app-like than a slow
   * slide-up anyway, and bypasses the keyframes-stuck-at-FROM edge case
   * that the prior animation-based attempt hit). */
  .orb-dock-panel {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    max-height: 90vh; max-height: 90dvh; /* dvh for iOS Safari URL bar */
    border-radius: 18px 18px 0 0;
    transform-origin: bottom center;
    /* Reset desktop animation/transform so they can't override mobile state */
    animation: none !important;
    transform: none !important;
  }

  /* Drag handle (purely decorative — visually signals "this can slide") */
  .orb-dock-panel::before {
    content: '';
    position: absolute;
    top: 8px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 4px;
    background: var(--border-active); opacity: .65;
    z-index: 10; pointer-events: none;
  }

  /* Smaller canvas — 170px on a 6-inch phone eats too much message space */
  .orb-dock-canvas-wrap { height: 120px }

  /* Tip tooltip hidden on mobile — its absolute positioning targets the
   * desktop dock layout and reads awkwardly in the bottom-sheet header. */
  .orb-dock-tip { display: none }
  /* Lasso button stays visible on mobile — the lasso uses pointer events
   * (pointerdown / pointermove / pointerup) which DO fire on touch. The
   * button click handler in orb-shell.js closes the dock first on mobile
   * so the page is visible under the lasso overlay (the bottom sheet
   * occupies 90vh — without closing first, the user can't see what they're
   * lassoing). */

  /* Give the drag handle some breathing room above the header */
  .orb-dock-head { padding-top: 1.1rem }

  /* Slightly tighter body padding to claw back some vertical space */
  .orb-dock-body { padding: .9rem .85rem .75rem }

  /* Suggest pills wrap rather than overflow */
  .orb-dock-suggest { padding: .55rem .85rem }
}