/* SHELA GLASS DESIGN SYSTEM v1 — 2026-04-21
   Manus-inspired glass morphism base.
   Loaded BEFORE shela-mobile-emergency.css; both use `html` prefix
   to beat dynamically injected <style> tags from other patches.
*/

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════ */
:root {
  --glass-bg:            rgba(20, 20, 30, 0.55);
  --glass-bg-strong:     rgba(20, 20, 30, 0.82);
  --glass-bg-soft:       rgba(255, 255, 255, 0.03);
  --glass-border:        rgba(255, 255, 255, 0.08);
  --glass-border-hover:  rgba(255, 255, 255, 0.18);
  --glass-border-active: rgba(139, 92, 246, 0.45);
  --glass-blur:          blur(24px) saturate(180%);
  --glass-blur-strong:   blur(32px) saturate(200%);

  --pill-radius:   999px;
  --card-radius:   16px;
  --modal-radius:  20px;

  --gap-xs:  4px;
  --gap-sm:  8px;
  --gap-md:  12px;
  --gap-lg:  16px;
  --gap-xl:  24px;

  --z-header:    50;
  --z-drawer:    90;
  --z-backdrop:  80;
  --z-modal:    100;
  --z-fab:       40;

  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --font-body:    -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif;

  --violet-1: #7c3aed;
  --violet-2: #a78bfa;
  --violet-3: #6366f1;
  --online-green: #10b981;
}

/* Ambient gradient bg — subtle purple/blue glow */
html body {
  background:
    radial-gradient(ellipse 1100px 600px at 85% -10%, rgba(139, 92, 246, 0.14), transparent 55%),
    radial-gradient(ellipse 900px 500px at 15% 105%, rgba(99, 102, 241, 0.10), transparent 55%),
    #08080f !important;
  background-attachment: fixed !important;
  font-family: var(--font-body);
}

/* ═══════════════════════════════════════════════════════════════
   SUPPRESS OLD HEADER CHROME (replaced by .shela-header-v2)
   Keep the container rendered but invisible — model-switcher and
   domains patches both ANCHOR into #shela-auth-bar to find their home.
   ═══════════════════════════════════════════════════════════════ */
html #shela-beta-banner { display: none !important; }

/* NUCLEAR: hide the whole old auth-bar + every chrome-ish injected element
   that pre-dates v2. Elements stay in the DOM (model-switcher, domains etc.
   need to find #shela-auth-bar by querySelector — that still works when
   display:none). When the user opens "Model" from our dropdown, we re-parent
   the #shela-model-bar to <body> so display:none on the parent doesn't bite.
*/
html body.shela-v2-active #shela-auth-bar {
  display: none !important;
}

/* Kill the old "Ready" progress bar — v2 UI shows agent progress in-message.
   #shela-overlay-bar (Code + Preview pair) is KEPT on desktop because it's the
   actually-working preview path. It is hidden on mobile (where the React
   Computer panel goes full-screen and provides Preview natively). */
html body.shela-v2-active #shela-progress-bar {
  display: none !important;
}

/* React's native sidebar toggle (title="Show/Hide sidebar") is a floating
   pill on the left edge. Our PanelLeft button triggers it programmatically —
   we visually hide the React button but keep it clickable via dispatchEvent.
   NOTE: the workspace toggle `button.size-8.hidden.md\:flex` is NO LONGER
   hidden here — on DESKTOP we want React's native fold/unfold visible. */
html body.shela-v2-active button[title="Show sidebar"],
html body.shela-v2-active button[title="Hide sidebar"],
html body.shela-v2-active button[class*="bg-sidebar"][class*="rounded-r-lg"] {
  visibility: hidden !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  opacity: 0 !important;
}

/* On MOBILE the React workspace toggle is useless (panel is display:none).
   Hide it there only. Desktop keeps its native fold toggle. */
@media (max-width: 767px) {
  html body.shela-v2-active button.size-8.hidden.md\:flex {
    display: none !important;
  }
}

/* Our monitor icon in the header is MOBILE-ONLY — desktop uses #hv2-computer-toggle. */
@media (min-width: 768px) {
  html #hv2-workspace {
    display: none !important;
  }
}

/* #hv2-computer-toggle is DESKTOP-ONLY — mobile uses #hv2-workspace (FAB-driven).
   Highlight when the React Computer panel is currently open. */
@media (max-width: 767px) {
  html #hv2-computer-toggle {
    display: none !important;
  }
}
html #hv2-computer-toggle.open {
  background: rgba(167, 139, 250, 0.18) !important;
  border-color: rgba(167, 139, 250, 0.45) !important;
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE: unhide the React sidebar when "open"
   React hardcodes `hidden md:block w-64 border-r shrink-0` on the
   sidebar div when Xsb=true (so visible ONLY on desktop). We override
   the `hidden` on mobile and style it as a slide-in drawer.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  html body.shela-v2-active div[class*="md:block"][class*="w-64"][class*="border-r"][class*="shrink-0"] {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 86vw !important;
    max-width: 340px !important;
    height: 100dvh !important;
    z-index: 95 !important;
    background: #08080f !important;
    border-right: 1px solid var(--glass-border) !important;
    box-shadow: 10px 0 32px rgba(0, 0, 0, 0.5) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    overflow-y: auto !important;
    animation: hv2SidebarIn 240ms cubic-bezier(0.2, 0, 0, 1);
  }
  @keyframes hv2SidebarIn {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
  }

  /* Backdrop overlay — click to close */
  html body.shela-v2-active.hv2-sidebar-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 94;
    animation: hv2BackdropIn 200ms ease;
  }
  @keyframes hv2BackdropIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* ═══════════════════════════════════════════════════════════════
   KILL THE REAL REACT HEADER (preserves Computer toggle button)
   Found by grep in index-v5clean.js. These are the Tailwind class
   strings React ChatLayout uses for its own top header — the one
   Gregor sees pulling down under our floating glass header.

   IMPORTANT: do NOT use display:none on the .h-12 header — it contains
   the React "Show/Hide Computer" toggle button that Gregor needs on
   desktop. Instead, collapse its visual chrome (height/border/bg) but
   keep child controls clickable. JS (#hv2-workspace mapping) will then
   move the toggle into the glass header where appropriate.
   ═══════════════════════════════════════════════════════════════ */
html body.shela-v2-active div[class*="h-14"][class*="sticky"][class*="top-0"][class*="border-b"],
html body.shela-v2-active div[class*="h-14"][class*="bg-card"][class*="backdrop-blur"],
html body.shela-v2-active header[class*="h-14"][class*="sticky"],
html body.shela-v2-active header[class*="h-12"][class*="bg-card"] {
  display: none !important;
}

/* The chat-pane h-12 header is now FULLY hidden — its functionality (balance pill +
   Computer toggle) has been migrated into the glass header (#hv2-computer-toggle).
   This avoids the floating-pill that was overlapping the Computer panel tabs row. */
html body.shela-v2-active div[class*="h-12"][class*="border-b"][class*="bg-card"][class*="backdrop-blur"] {
  display: none !important;
}

/* When the user opens "Model", we RE-PARENT #shela-model-bar to body (via JS)
   and add .hv2-model-floating class to fly it into a floating glass pill.
   This escapes every parent stacking context AND the display:none on parent.
*/
html body.shela-v2-active #shela-model-bar.hv2-model-floating {
  /* display:flex overrides any inherited display:none from previous parent */
  display: flex !important;
  pointer-events: auto !important;
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 66px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  z-index: 2000 !important;
  padding: 5px 8px !important;
  background: var(--glass-bg-strong) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--pill-radius) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
  gap: 6px !important;
  animation: hv2ModelBarIn 180ms ease-out;
}
@keyframes hv2ModelBarIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Model dropdown itself — force fixed + max z-index (escapes any stacking issues) */
html body.shela-v2-active #shela-model-bar.hv2-model-floating .shela-model-dropdown.open {
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 110px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  min-width: 280px !important;
  max-width: calc(100vw - 24px) !important;
  z-index: 2001 !important;
  background: var(--glass-bg-strong) !important;
  backdrop-filter: var(--glass-blur-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur-strong) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important;
}

/* Root no longer needs the 68px push — v2 header is fixed-positioned. */
html body.shela-v2-active #root {
  margin-top: 0 !important;
  height: 100vh !important;
}

/* The glass header is position:fixed at top:10px height:48px, so its bottom
   edge sits at ~58px. Without compensation it overlaps whatever is at the top
   of the chat layout — most visibly the Computer panel's tabs row (Terminal/
   Files/Plan/Board) which sits at y≈0 inside the panel. Push the entire
   ChatLayout root down by 64px so nothing slips under the floating header.
   (Gregor 2026-04-22 "header prekriva vrstico kjer pise terminal, files...") */
html body.shela-v2-active #root > div[class*="h-screen"][class*="bg-background"] {
  height: calc(100vh - 64px) !important;
  margin-top: 64px !important;
}

/* ═══════════════════════════════════════════════════════════════
   GLASS HEADER v2 (single pill)
   ═══════════════════════════════════════════════════════════════ */
html .shela-header-v2 {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 12px;
  right: 12px;
  z-index: var(--z-header);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-md);
  padding: 6px 10px 6px 6px;
  height: 48px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--pill-radius);
  color: #fff;
  font-family: var(--font-display);
  font-size: 13px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
  transition: border-color 200ms ease;
}
html .shela-header-v2:hover {
  border-color: var(--glass-border-hover);
}

html .shela-header-v2 .hv2-left,
html .shela-header-v2 .hv2-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

html .shela-header-v2 .hv2-icon-btn,
html .shela-header-v2 .hv2-hamburger {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  padding: 0;
  transition: background 150ms, border-color 150ms;
}
html .shela-header-v2 .hv2-icon-btn:hover,
html .shela-header-v2 .hv2-hamburger:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--glass-border-hover);
}
html .shela-header-v2 .hv2-icon-btn.active {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(139, 92, 246, 0.45);
  color: #c4b5fd;
}
html .shela-header-v2 .hv2-icon-btn svg,
html .shela-header-v2 .hv2-hamburger svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html .shela-header-v2 .hv2-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
  text-decoration: none;
  color: #fff;
}
html .shela-header-v2 .hv2-brand .hv2-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--online-green);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.55);
  animation: hv2DotPulse 3s ease-in-out infinite;
}
@keyframes hv2DotPulse {
  0%, 100% { opacity: 0.85; box-shadow: 0 0 8px rgba(16, 185, 129, 0.4); }
  50%      { opacity: 1;    box-shadow: 0 0 14px rgba(16, 185, 129, 0.7); }
}
html .shela-header-v2 .hv2-brand .hv2-name {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.2px;
}

html .shela-header-v2 .hv2-menu {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: var(--pill-radius);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: background 150ms, border-color 150ms;
}
html .shela-header-v2 .hv2-menu:hover,
html .shela-header-v2 .hv2-menu.active {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--glass-border-hover);
}
html .shela-header-v2 .hv2-menu .hv2-tokens {
  color: rgba(255, 255, 255, 0.85);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
html .shela-header-v2 .hv2-menu .hv2-tokens.low      { color: #fbbf24; }
html .shela-header-v2 .hv2-menu .hv2-tokens.critical { color: #fb7185; }
html .shela-header-v2 .hv2-menu .hv2-divider {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.12);
}
html .shela-header-v2 .hv2-menu .hv2-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.25);
  color: #c4b5fd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
html .shela-header-v2 .hv2-menu .hv2-chev {
  width: 12px;
  height: 12px;
  opacity: 0.6;
  transition: transform 200ms;
}
html .shela-header-v2 .hv2-menu.active .hv2-chev {
  transform: rotate(180deg);
}

/* ═══════════════════════════════════════════════════════════════
   HEADER DROPDOWN PANEL
   ═══════════════════════════════════════════════════════════════ */
html .hv2-dropdown {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 66px);
  right: 12px;
  min-width: 260px;
  max-width: calc(100vw - 24px);
  z-index: calc(var(--z-header) + 1);
  padding: 6px;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--card-radius);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
}
html .hv2-dropdown.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

html .hv2-dropdown .hv2-section {
  padding: 4px;
}
html .hv2-dropdown .hv2-row,
html .hv2-dropdown .hv2-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  font-size: 13px;
  cursor: pointer;
  transition: background 150ms, color 150ms;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
html .hv2-dropdown .hv2-link:hover,
html .hv2-dropdown .hv2-row:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
html .hv2-dropdown .hv2-row .hv2-row-key {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  font-weight: 500;
}
html .hv2-dropdown .hv2-row .hv2-row-val {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
html .hv2-dropdown .hv2-divider {
  height: 1px;
  margin: 4px 6px;
  background: rgba(255, 255, 255, 0.06);
}
html .hv2-dropdown .hv2-link .hv2-ic {
  width: 18px;
  text-align: center;
  font-size: 14px;
  opacity: 0.85;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html .hv2-dropdown .hv2-link .hv2-label {
  flex: 1;
  margin-left: 4px;
}
html .hv2-dropdown .hv2-model-select {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  color: #fff;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
}
html .hv2-dropdown .hv2-model-select:focus {
  border-color: var(--glass-border-active);
}

/* ═══════════════════════════════════════════════════════════════
   CHAT HISTORY DRAWER (mobile)
   ═══════════════════════════════════════════════════════════════ */
html .hv2-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  z-index: var(--z-backdrop);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
html .hv2-drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* When drawer is open, fade header so it doesn't clash visually */
html body.hv2-drawer-open .shela-header-v2 {
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

/* ═══════════════════════════════════════════════════════════════
   COMPOSER GLASS TREATMENT
   Style the React chat input wrapper directly.
   ═══════════════════════════════════════════════════════════════ */
html [class*="max-w-3xl"]:has(> textarea[placeholder*="Ask anything"]),
html [class*="max-w-3xl"]:has(textarea[placeholder*="Ask anything"]) {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 22px !important;
  padding: 10px 12px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  transition: border-color 180ms ease;
}
html [class*="max-w-3xl"]:has(textarea[placeholder*="Ask anything"]):focus-within {
  border-color: var(--glass-border-active) !important;
}

/* ═══════════════════════════════════════════════════════════════
   FLOATING BRAIN — keep visible, size up on mobile per Gregor feedback
   ═══════════════════════════════════════════════════════════════ */
html .size-16.shela-glow img {
  width: 140px !important;
}
@media (max-width: 767px) {
  html .size-16.shela-glow img { width: 120px !important; }
  /* Push the whole welcome (brain + title + subtitle + cards) below the
     floating glass header so the brain isn't cut off at the top. */
  html body.shela-v2-active [class*="flex-col"][class*="items-center"][class*="justify-center"][class*="h-full"] {
    padding-top: calc(env(safe-area-inset-top, 0px) + 64px) !important;
    box-sizing: border-box;
  }
  /* Fallback target: the brain element itself gets top margin if the
     container selector above misses on some routes. */
  html body.shela-v2-active .size-16.shela-glow {
    margin-top: 40px !important;
  }
}
@media (max-width: 500px) {
  html .size-16.shela-glow img { width: 108px !important; }
  html body.shela-v2-active [class*="flex-col"][class*="items-center"][class*="justify-center"][class*="h-full"] {
    padding-top: calc(env(safe-area-inset-top, 0px) + 56px) !important;
  }
}
@media (max-width: 380px) {
  html .size-16.shela-glow img { width: 96px !important; }
}

/* Recolor the "alive" purple dot beside brain to green (online signal) */
html .shela-alive-dot,
html [class*="animate-ping"][class*="rounded-full"] {
  background: var(--online-green) !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.65) !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE HEADER + DRAWER + MODAL RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  html .shela-header-v2 {
    top: calc(env(safe-area-inset-top, 0px) + 6px);
    left: 8px;
    right: 8px;
    height: 44px;
    padding: 4px 8px 4px 4px;
    gap: 6px;
  }
  html .shela-header-v2 .hv2-brand .hv2-name {
    display: none;
  }
  html .shela-header-v2 .hv2-icon-btn,
  html .shela-header-v2 .hv2-hamburger {
    width: 34px;
    height: 34px;
  }
  html .shela-header-v2 .hv2-icon-btn svg,
  html .shela-header-v2 .hv2-hamburger svg {
    width: 17px;
    height: 17px;
  }
  html .shela-header-v2 .hv2-menu {
    padding: 5px 10px 5px 12px;
    gap: 8px;
  }
  html .shela-header-v2 .hv2-menu .hv2-tokens {
    display: none; /* token count moves into dropdown */
  }
  html .shela-header-v2 .hv2-menu .hv2-divider {
    display: none;
  }
  html .hv2-dropdown {
    top: calc(env(safe-area-inset-top, 0px) + 58px);
    right: 8px;
    left: 8px;
    min-width: 0;
    max-width: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE WORKSPACE MODAL — v3 fix:
   - raise z-index ABOVE backdrop (9998) so tabs & close are clickable
   - KILL the backdrop on mobile entirely (panel is full-screen already)
   - make panel nearly opaque — no frosted/blurry look
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Kill the backdrop — it was the layer blocking tab clicks */
  html #shela-mobile-backdrop {
    display: none !important;
  }

  html #shela-mobile-panel {
    height: 100vh !important;
    height: 100dvh !important;
    bottom: 0 !important;
    border-radius: 0 !important;
    border-top: none !important;
    /* Opaque bg — no glass blur on panel so tabs/content are crisp + clickable */
    background: #08080f !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    /* Above backdrop (9998) and FAB (9999) */
    z-index: 10001 !important;
  }

  /* Tab bar inside mobile panel: glass pill row */
  html #shela-mobile-panel .mobile-panel-tabs {
    padding: 8px 12px !important;
    gap: 6px !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    border-bottom: 1px solid var(--glass-border);
  }
  html #shela-mobile-panel .mobile-panel-tabs::-webkit-scrollbar { display: none; }
  html #shela-mobile-panel .mobile-tab-btn {
    flex-shrink: 0 !important;
    padding: 7px 14px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
  }
  html #shela-mobile-panel .mobile-tab-btn.active {
    background: rgba(139, 92, 246, 0.22) !important;
    border-color: rgba(139, 92, 246, 0.55) !important;
    color: #fff !important;
  }

  /* Explicit X close on right of the tab bar */
  html #shela-mobile-panel .ws-close-btn {
    position: absolute !important;
    top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    right: 12px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid var(--glass-border) !important;
    color: #fff !important;
    font-size: 16px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    z-index: 10 !important;
  }

  /* Kill the dragged-1mm React side panel — it's replaced by the modal */
  html .hidden.md\:block.border-l.overflow-hidden {
    display: none !important;
  }

  /* Laptop FAB: make it the Workspace button — bigger + premium */
  html #shela-mobile-computer-fab {
    width: 52px !important;
    height: 52px !important;
    font-size: 22px !important;
    bottom: calc(116px + env(safe-area-inset-bottom, 0px)) !important;
    right: 14px !important;
    background: linear-gradient(135deg, var(--violet-1), var(--violet-3)) !important;
    border: 1px solid rgba(167, 139, 250, 0.5) !important;
    box-shadow: 0 10px 28px rgba(139, 92, 246, 0.45) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Close the old mobile terminal X (from shela-mobile-terminal.js) —
   replaced by #shela-mobile-panel .ws-close-btn above
   ═══════════════════════════════════════════════════════════════ */
html .shela-mobile-close {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   COMPUTER TAB POLISH — five tabs (Terminal, Files, Plan, Board, Preview)
   must all be visible and not overflow. The bundle's TabsList uses
   `gap-0.5` and tabs default to width:auto — when the right panel is
   ~45% wide on a 1366px laptop that's ~600px, which still fits.
   On narrower viewports we allow horizontal scroll instead of clipping
   so Board never disappears.
   ═══════════════════════════════════════════════════════════════ */
html [role="tablist"][class*="h-9"][class*="bg-transparent"] {
  overflow-x: auto !important;
  scrollbar-width: thin;
  flex-wrap: nowrap !important;
}
html [role="tablist"][class*="h-9"][class*="bg-transparent"]::-webkit-scrollbar {
  height: 3px;
}
html [role="tablist"][class*="h-9"][class*="bg-transparent"] [role="tab"] {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* The legitimate enhance-v11 Code+Preview overlay sits BELOW the React Radix tabs row.
   KEPT on mobile too so `Code` remains reachable (Radix tabs don't include Code).
   On mobile the React Computer panel is a full-screen overlay — the overlay-bar
   naturally ends up as a strip between tabs row and tab content, which is exactly
   where it sits on desktop. */
@media (max-width: 767px) {
  html body.shela-v2-active #shela-overlay-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    background-color: #0b0b0f !important;
  }
  html body.shela-v2-active #shela-overlay-bar .overlay-btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  html body.shela-v2-active #shela-overlay-container {
    background-color: #0b0b0f !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE: kill the enhance-v11 #shela-mobile-panel (cloning approach)
   and use the REAL React Computer panel as a full-screen overlay instead.
   The React panel wires natively to Terminal/Files/Plan/Board/Preview, so
   we don't have to clone DOM (which broke BoardCanvas + dropdowns).
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* enhance-v11's mobile FAB + panel + backdrop are no longer used.
     The glass-v1 #hv2-workspace button now opens the React panel directly. */
  html body.shela-v2-active #shela-mobile-computer-fab,
  html body.shela-v2-active #shela-mobile-panel,
  html body.shela-v2-active #shela-mobile-backdrop {
    display: none !important;
  }

  /* The React Computer panel is wrapped in framer-motion `<motion.div
     className="hidden md:block border-l overflow-hidden">`. On mobile it
     would normally be hidden (Tailwind `hidden`). When `showComputer=true`
     React still renders it; we override the Tailwind hiding and inflate it
     to a full-screen overlay so Terminal/Files/Plan/Board/Preview all work. */
  html body.shela-v2-active div.hidden.md\:block.border-l.overflow-hidden {
    display: block !important;
    position: fixed !important;
    inset: 64px 0 0 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(100vh - 64px) !important;
    z-index: 95 !important;
    /* Solid opaque fallback — plain #0b0b0f so no chat text bleeds through
       even if the CSS variable isn't resolved on this subtree. */
    background-color: #0b0b0f !important;
    background: #0b0b0f !important;
    border-left: 0 !important;
  }
  /* The React panel's immediate child renders with `bg-card/50` (50% alpha),
     which is exactly what was letting chat text from behind bleed through
     the Terminal on mobile. Force it fully opaque. */
  html body.shela-v2-active div.hidden.md\:block.border-l.overflow-hidden > div {
    background-color: #0b0b0f !important;
  }
  /* And inside the tabs: any `bg-card/XX`, `bg-transparent`, or otherwise
     transparent background must not expose the underlying chat. */
  html body.shela-v2-active div.hidden.md\:block.border-l.overflow-hidden [role="tabpanel"],
  html body.shela-v2-active div.hidden.md\:block.border-l.overflow-hidden #shela-preview-panel {
    background-color: #0b0b0f !important;
  }

  /* ── TABS ROW — force visible on mobile.
     The React Computer panel contains a Radix TabsList
     (`[role="tablist"].h-9.bg-transparent`). It SHOULD render Terminal /
     Files / Plan / Board / Preview. Enforce visibility and wrap it so it
     can't get squeezed to 0 width inside `overflow-hidden`. */
  html body.shela-v2-active div.hidden.md\:block.border-l.overflow-hidden [role="tablist"][class*="h-9"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    background: transparent !important;
  }
  html body.shela-v2-active div.hidden.md\:block.border-l.overflow-hidden [role="tab"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  html body.shela-v2-active div.hidden.md\:block.border-l.overflow-hidden [role="tab"][data-state="active"] {
    color: #ffffff !important;
    background: rgba(167, 139, 250, 0.18) !important;
  }

  /* Floating close X for the React Computer panel (mobile only). Injected
     by glass-v1.js wireMobileComputerOverlay. Sits top-right, fires synthetic
     click on the React Computer toggle to set showComputer=false. */
  html #shela-react-computer-close {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    right: 12px !important;
    z-index: 100 !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(20, 18, 38, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    font-size: 18px !important;
    line-height: 1 !important;
    display: none !important; /* shown by JS only when panel is open */
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
  }
  html #shela-react-computer-close.visible {
    display: flex !important;
  }
}

/* Mobile Preview tab needs to fit in the fullscreen overlay tabs row. The
   horizontal scroll rule above already ensures it. */

/* The actually-broken duplicate is the React Radix "Preview" tab itself —
   on DESKTOP the v11 Preview overlay-bar (under the tabs) provides preview
   already, so the Preview Radix tab would be a duplicate. Hide it on desktop
   only. On mobile the React panel goes full-screen and Preview is the ONLY
   way to see previews (overlay-bar is hidden on mobile), so keep it visible. */
@media (min-width: 768px) {
  html body.shela-v2-active [role="tablist"][class*="h-9"][class*="bg-transparent"] [role="tab"][data-shela-tab="preview"] {
    display: none !important;
  }
}
