/* ============================================================
   AgenticIDE � Premium Dark Theme
   Glassmorphism � Neon Accents � Smooth Animations
   ============================================================ */

/* --- CSS VARIABLES --- */
:root {
  /* Surfaces */
  --bg-void: #0a0a0f;
  --bg-primary: #0f1019;
  --bg-secondary: #13141f;
  --bg-tertiary: #1a1b2e;
  --bg-elevated: #1e1f35;
  --bg-hover: rgba(27, 58, 92, 0.15);
  --bg-active: rgba(27, 58, 92, 0.25);
  --bg-input: rgba(255, 255, 255, 0.04);
  --bg-input-focus: rgba(255, 255, 255, 0.07);

  /* Glass */
  --glass-bg: rgba(15, 16, 25, 0.75);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-blur: 20px;
  /* Chrome glass — tinted background applied to titlebar, tab-bar, sidebars,
     statusbar, modals etc. by the `:root:not([data-theme="light"])` override
     block at the bottom of this file. Themes override this so the chrome
     visibly retints with the current theme. */
  --chrome-glass-bg: rgba(18, 26, 42, 0.55);
  --chrome-glass-border: rgba(255, 255, 255, 0.08);

  /* Text */
  --text-primary: #e2e4f0;
  --text-secondary: #8b8fa8;
  --text-muted: #505370;
  --text-bright: #ffffff;

  /* Accent Palette — Navy Blue */
  --accent: #1b3a5c;
  --accent-light: #2a5a8c;
  --accent-glow: rgba(27, 58, 92, 0.4);
  --accent-gradient: linear-gradient(135deg, #0d2137, #2a5a8c);
  --accent-gradient-h: linear-gradient(90deg, #0d2137, #2a5a8c);

  /* Status */
  --success: #22c55e;
  --success-glow: rgba(34, 197, 94, 0.25);
  --warning: #f59e0b;
  --warning-glow: rgba(245, 158, 11, 0.2);
  --danger: #ef4444;
  --danger-glow: rgba(239, 68, 68, 0.2);
  --info: #38bdf8;
  --info-glow: rgba(56, 189, 248, 0.2);

  /* Borders */
  --border: rgba(255, 255, 255, 0.06);
  --border-light: rgba(255, 255, 255, 0.1);
  --border-accent: rgba(27, 58, 92, 0.5);

  /* Scrollbar — thin themed bar. Per-theme thumb color is overridden in the
     theme blocks further down so the bar tints with whatever theme is active.
     --sb-size controls width (vertical) and height (horizontal). */
  --sb-size: 4px;
  --sb-track-color: #232e33;
  --sb-thumb-color: #6baf8d;
  /* Legacy aliases — kept so anything still referencing the old names works */
  --scrollbar-thumb: var(--sb-thumb-color);
  --scrollbar-track: var(--sb-track-color);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 20px var(--accent-glow);

  /* Layout — multiplied by --ui-scale (set per data-text-size further below)
     so the activity bar, titlebar, tabs, statusbar all grow/shrink in lockstep
     with the Text Size setting. Base values stay the same at scale = 1. */
  --ui-scale: 1;
  --titlebar-height:     calc(42px  * var(--ui-scale));
  --statusbar-height:    calc(26px  * var(--ui-scale));
  --activity-bar-width:  calc(52px  * var(--ui-scale));
  --sidebar-width:       calc(350px * var(--ui-scale));   /* minimum-resizable floor; see _initSidebarResize */
  --ai-panel-width:      calc(350px * var(--ui-scale));   /* AI side-dock; aligned with sidebar bounds (350-600) */
  --tab-height:          calc(28px  * var(--ui-scale));
  --bottom-panel-height: calc(260px * var(--ui-scale));

  /* Scaled spacing tokens — usable anywhere padding/margin/gap needs to
     scale with Text Size. Not yet wired into every rule, but adding new
     chrome should reference these. */
  --sp-1: calc(2px  * var(--ui-scale));
  --sp-2: calc(4px  * var(--ui-scale));
  --sp-3: calc(6px  * var(--ui-scale));
  --sp-4: calc(8px  * var(--ui-scale));
  --sp-5: calc(10px * var(--ui-scale));
  --sp-6: calc(12px * var(--ui-scale));
  --sp-8: calc(16px * var(--ui-scale));

  /* Fonts */
  --font-code: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', monospace;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 150ms var(--ease-out);
  --transition-normal: 250ms var(--ease-out);
  --transition-slow: 400ms var(--ease-out);

  /* Radii — also scale so 14px-rounded buttons stay proportional at XL */
  --radius-sm: calc(6px  * var(--ui-scale));
  --radius-md: calc(10px * var(--ui-scale));
  --radius-lg: calc(14px * var(--ui-scale));
  --radius-xl: calc(20px * var(--ui-scale));
}

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

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-primary);
  background: var(--bg-void);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* App-wide thin themed scrollbar. Width/height pull from --sb-size; the
   thumb/track colors are themed via --sb-thumb-color / --sb-track-color so
   the bar tints with whatever theme is selected. */
::-webkit-scrollbar { width: var(--sb-size); height: var(--sb-size); }
::-webkit-scrollbar-track { background: var(--sb-track-color); border-radius: 1px; }
::-webkit-scrollbar-thumb { background: var(--sb-thumb-color); border-radius: 1px; }
::-webkit-scrollbar-thumb:hover { filter: brightness(1.15); }

/* Firefox + browsers without ::-webkit-scrollbar support */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-color: var(--sb-thumb-color) var(--sb-track-color); scrollbar-width: thin; }
}

::selection { background: rgba(27, 58, 92, 0.4); color: #fff; }

/* ============================================================
   Pro Icon Polish — global treatment for every Font Awesome icon
   (and inline SVGs). Goal: consistent rhythm, soft rest state,
   crisp hover/active, subtle depth on selection. The .ai-icon-img
   class (the user's GIF + PNG logos) is excluded so the brand art
   stays untouched.
   ============================================================ */
i.fas, i.far, i.fab, i.fa-solid, i.fa-regular, i.fa-brands,
button > svg, .menu-item > svg {
  display: inline-block;
  line-height: 1;                            /* removes top/bottom slop so icons sit on the optical baseline */
  vertical-align: middle;
  opacity: 0.82;                             /* soft rest state — pulls focus to active items */
  transition:
    opacity   180ms var(--ease-out),
    transform 180ms var(--ease-out),
    color     180ms var(--ease-out),
    filter    220ms var(--ease-out);
  -webkit-font-smoothing: antialiased;       /* sharper edges on dark backgrounds */
  text-rendering: geometricPrecision;
}

/* Hover lifts icon to full opacity with a barely-there scale — feels alive without being twitchy */
button:hover > i.fas, button:hover > i.far, button:hover > i.fab,
.menu-item:hover > i,
.tree-item:hover > i,
.activity-btn:hover > i,
.tab:hover > i {
  opacity: 1;
  transform: translateY(-0.5px);
}

/* Active / selected state — full opacity + soft glow drop-shadow that takes the theme accent.
   Drop-shadow on the icon (not box-shadow) means only the glyph silhouette glows, not the whole button box. */
button.active > i.fas, button.active > i.far, button.active > i.fab,
.activity-btn.active > i,
.tab.active > i,
.bottom-tab.active > i,
.menu-item.active > i,
.mode-btn.active > i {
  opacity: 1;
  filter: drop-shadow(0 0 6px var(--accent-glow));
}

/* Pressed state — quick subtle press-down for tactile feedback */
button:active > i.fas, button:active > i.far, button:active > i.fab {
  transform: translateY(0) scale(0.94);
  transition-duration: 80ms;
}

/* Disabled buttons should NOT animate their icons */
button:disabled > i { opacity: 0.35; transform: none !important; filter: none !important; }

/* Brand art is exempt from all polish — leave the GIF/PNG alone */
.ai-icon-img { opacity: 1 !important; filter: none !important; transform: none !important; }

/* ============================================================
   Pro-grade icon depth — simulates FA Pro's duotone/sharp finish
   on the Free font by layering text-shadow. Two-layer recipe:
     1. Hairline white highlight on top edge (catches light)
     2. Soft dark shadow below (drops into the surface)
   The result looks engraved — same trick used by app icons in
   macOS / Material Design. Active state adds a colored halo so
   the icon glows with the active theme's accent color.
   ============================================================ */
i.fas, i.far, i.fab, i.fa-solid, i.fa-regular, i.fa-brands {
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: geometricPrecision;
  text-shadow:
    0 0.5px 0 rgba(255, 255, 255, 0.06),
    0 1px 1.5px rgba(0, 0, 0, 0.35);
}

/* Light theme — flip the highlight direction so icons read on light bg */
html[data-theme="light"] i.fas,
html[data-theme="light"] i.far,
html[data-theme="light"] i.fab {
  text-shadow:
    0 -0.5px 0 rgba(255, 255, 255, 0.6),
    0 1px 1px rgba(0, 0, 0, 0.15);
}

/* Active icons take the theme's scrollbar/accent color + a soft colored inner glow.
   --sb-thumb-color is set per theme — reusing it here means the active icon glow
   tints with the same palette as the rest of the chrome. */
.activity-btn.active > i.fas, .activity-btn.active > i.far,
.tab.active > i.fas, .tab.active > i.far,
.bottom-tab.active > i.fas, .bottom-tab.active > i.far,
.menu-item.active > i.fas,
.mode-btn.active > i.fas, .mode-btn.active > i.far,
button.active > i.fas, button.active > i.far {
  color: var(--sb-thumb-color);
  text-shadow:
    0 0 8px var(--accent-glow),
    0 0 1.5px color-mix(in srgb, var(--sb-thumb-color) 60%, transparent);
}
/* Override for activity-bar specifically — the active tile background is the
   accent color, so colouring the icon with --sb-thumb-color (also accent)
   makes it invisible. Force white for contrast, keep the glow. */
#activity-bar .activity-btn.active > i.fas,
#activity-bar .activity-btn.active > i.far,
#activity-bar .activity-btn.active > i.fab {
  color: #fff;
}

/* ============================================================
   Lucide icon polish — primary icon system.
   Replaces FA across most of the app. Visually bolder than FA's
   default (stroke-width 2.25 + 18px) so icons read clearly at the
   small chrome sizes an IDE uses.
   ============================================================ */
svg.lucide {
  width:  18px;
  height: 18px;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.92;
  vertical-align: middle;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 0.5px rgba(0, 0, 0, 0.4));   /* subtle engraved depth */
  transition:
    opacity 180ms var(--ease-out),
    transform 180ms var(--ease-out),
    color 180ms var(--ease-out),
    filter 220ms var(--ease-out);
}

/* Activity bar icons read larger — they're the IDE's primary nav. */
.activity-btn > svg.lucide { width: 20px; height: 20px; stroke-width: 2.25; }

/* GLOBAL: icons inside any button must never capture pointer events. The
   click should always land on the parent <button> so its handler fires
   regardless of whether the user clicks the icon glyph, an SVG path, or
   the surrounding padding. Fixes "clicking the icon does nothing but
   clicking the side works" across activity bar, title bar buttons
   (Live Preview, theme, mode switcher), and panel-action buttons. */
button > svg,
button > i,
button > img { pointer-events: none; }

/* Small icons in compact areas (status bar, dropdown shortcuts) */
.btn-icon-sm > svg.lucide,
.dropdown-item > svg.lucide,
#status-bar svg.lucide { width: 14px; height: 14px; stroke-width: 2; }

/* Hover */
button:hover > svg.lucide,
.menu-item:hover > svg.lucide,
.tree-item:hover > svg.lucide,
.activity-btn:hover > svg.lucide {
  opacity: 1;
  transform: translateY(-0.5px);
}

/* Active — full color via current theme accent + glow halo */
.activity-btn.active > svg.lucide,
.tab.active > svg.lucide,
.bottom-tab.active > svg.lucide,
.menu-item.active > svg.lucide,
.mode-btn.active > svg.lucide,
button.active > svg.lucide {
  opacity: 1;
  color: var(--sb-thumb-color);
  stroke: var(--sb-thumb-color);
  stroke-width: 2.5;
  filter:
    drop-shadow(0 0 6px var(--accent-glow))
    drop-shadow(0 0 1.5px color-mix(in srgb, var(--sb-thumb-color) 60%, transparent));
}

/* Activity bar override: the active tile already has a cyan background, so
   the icon needs to be WHITE to read clearly against it. Drop the accent
   color/glow for these specifically. */
#activity-bar .activity-btn.active > svg.lucide,
#activity-bar .activity-btn.active > i.fas,
#activity-bar .activity-btn.active > i.far,
#activity-bar .activity-btn.active > i.fab {
  color: #fff !important;
  stroke: #fff !important;
  filter: none;
}

/* Pressed */
button:active > svg.lucide { transform: translateY(0) scale(0.94); transition-duration: 80ms; }

/* Disabled — keep static */
button:disabled > svg.lucide { opacity: 0.35; transform: none; filter: none; }

/* Pre-hydration: reserve space so unconverted <i data-lucide> doesn't cause layout shift */
i[data-lucide] { display: inline-block; width: 18px; height: 18px; }

/* Light theme — softer stroke + flipped highlight */
html[data-theme="light"] svg.lucide {
  filter: drop-shadow(0 -0.5px 0.5px rgba(255, 255, 255, 0.6)) drop-shadow(0 0.5px 0.5px rgba(0, 0, 0, 0.15));
}

/* Hover icons get a brief tint without committing to the active state */
button:not(.active):hover > i.fas,
button:not(.active):hover > i.far,
.activity-btn:not(.active):hover > i.fas,
.menu-item:not(.active):hover > i.fas {
  color: color-mix(in srgb, var(--sb-thumb-color) 45%, currentColor);
}

/* Brand art is exempt from every text-shadow / color tint too */
.ai-icon-img { text-shadow: none !important; }

/* --- ANIMATIONS --- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes glow {
  0%, 100% { box-shadow: 0 0 5px var(--accent-glow); }
  50%      { box-shadow: 0 0 20px var(--accent-glow), 0 0 40px rgba(99,102,241,0.15); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* --- APP SHELL --- */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  background: var(--bg-primary);
  position: relative;
}
#app::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse at 15% 10%, rgba(13, 33, 55, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 80%, rgba(27, 58, 92, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(42, 90, 140, 0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ====== TITLEBAR ====== */
#titlebar {
  height: var(--titlebar-height);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  /* border-bottom removed per user request — was the thin line below the
     menu bar / dev pill / Copilot toggle. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 0 4px;
  user-select: none;
  flex-shrink: 0;
  position: relative;
  z-index: 100;
}
.titlebar-left, .titlebar-center, .titlebar-right { display: flex; align-items: center; gap: 10px; }
.logo {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.3px;
  margin-right: 16px;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo i {
  -webkit-text-fill-color: unset;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  font-size: 16px;
}
.menu-bar { display: flex; gap: 2px; align-items: center; }
.menu-item {
  height: 28px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}
.menu-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.project-name { font-size: 12px; color: var(--text-muted); letter-spacing: 0.5px; }

/* Buttons */
.btn-icon {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  transition: all var(--transition-fast);
  position: relative;
}
.btn-icon:hover { color: var(--text-primary); background: var(--bg-hover); }
.btn-icon.active { color: var(--accent-light); background: var(--bg-active); }
.btn-icon .notif-dot {
  position: absolute;
  top: 4px; right: 6px;
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 2s infinite;
}
.btn-icon-sm {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  transition: all var(--transition-fast);
}
.btn-icon-sm:hover { color: var(--text-primary); background: var(--bg-hover); }

#collabUsers { display: flex; gap: 4px; }
.collab-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  color: #fff;
  cursor: pointer;
  border: 2px solid var(--bg-primary);
  transition: transform var(--transition-fast);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1);
}
.collab-avatar:hover { transform: scale(1.15); z-index: 1; }

/* ====== MAIN LAYOUT ====== */
#main-layout {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
  z-index: 1;
  transition: margin-right 0.35s var(--ease-out);
}
/* (Legacy #main-layout.ai-panel-open margin rules removed — the chat panel
   is now a flex child of #main-layout via aiChat.js relocation, so opening
   it naturally takes flex width without needing margin pushes.) */

/* ====== ACTIVITY BAR — "curved navigation" pattern ======
   A vertical cyan stripe runs down the right edge. The active icon's tile
   extends to that stripe with rounded LEFT corners; two pseudo circles above
   and below the active tile paint concave curve cutouts where the stripe
   meets the tile. CSS-only, no JS, no SVG.

   Critical numeric invariant: stripe width === curve box-shadow offset === 4px.
   If you change one, change all three. */
#activity-bar {
  width: var(--activity-bar-width);
  background: var(--bg-secondary);
  border-right: none;                          /* dropped — stripe replaces it */
  position: relative;                          /* anchor for the right-edge stripe pseudo */
  display: flex;
  flex-direction: column;
  align-items: stretch;                        /* stretch so buttons fill the bar width */
  flex-shrink: 0;
  overflow: visible;                           /* don't clip curve pseudos */
  z-index: 5;
}
/* Resize handle on the right edge of the activity bar. 5px wide
   transparent strip overlapping the bar's right edge — same UX as the
   AI panel resize handle. JS wires the drag in app.js _initActivityBarResize. */
.activity-resize-handle {
  position: absolute;
  top: 0; bottom: 0;
  right: -2px;
  width: 5px;
  cursor: col-resize;
  z-index: 20;
  background: transparent;
  transition: background 0.15s ease;
}
.activity-resize-handle:hover,
.activity-resize-handle.dragging {
  background: var(--accent);
}
/* Always-on cyan stripe down the right edge */
#activity-bar::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 4px;
  background: #38bdf8;
  pointer-events: none;
  z-index: 1;
}

.activity-btn {
  width: 100%;                                  /* span full bar width */
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: #fff;                                  /* all activity icons white for visibility */
  cursor: pointer;
  font-size: 18px;
  margin: 0 0 4px 0;
  position: relative;                           /* anchor for curve pseudos */
  padding-right: 4px;                           /* visually re-center icon in the 48px area left of stripe */
  overflow: visible;                            /* don't clip the -12px pseudo curves */
  transition: color var(--transition-fast), background var(--transition-fast);
}
.activity-btn:hover { color: #fff; background: rgba(255,255,255,0.06); }
/* Explorer keeps the original muted treatment so it visually differs
   from the rest of the always-white icons. */
.activity-btn[data-panel="explorer"]:not(.active) { color: var(--text-muted); }
.activity-btn[data-panel="explorer"]:not(.active):hover { color: var(--text-secondary); }

/* Active tile — rounded LEFT only, flush right so it meets the stripe. */
.activity-btn.active {
  color: #fff;
  background: #38bdf8;
  border-radius: 14px 0 0 14px !important;
  transform: none;
  z-index: 3;                                   /* above stripe (z 1) so tile + stripe read continuous */
}
/* Top curve cutout — circle filled with bar bg, box-shadow paints accent
   corner. z-index 4 puts it above stripe AND tile so the cutout-with-shadow
   cleanly carves the stripe and bridges into the tile. */
.activity-btn.active::before {
  content: '';
  position: absolute;
  top: -12px;
  right: 4px;
  width: 12px; height: 12px;
  background: var(--bg-secondary);
  border-radius: 50% !important;
  box-shadow: 4px 4px 0 #38bdf8;
  pointer-events: none;
  display: block;
  visibility: visible;
  opacity: 1;
  z-index: 10;
}
/* Bottom curve cutout — mirrors top, shadow goes upward. */
.activity-btn.active::after {
  content: '';
  position: absolute;
  bottom: -12px;
  right: 4px;
  width: 12px; height: 12px;
  background: var(--bg-secondary);
  border-radius: 50% !important;
  box-shadow: 4px -4px 0 #38bdf8;
  pointer-events: none;
  display: block;
  visibility: visible;
  opacity: 1;
  z-index: 10;
}
.activity-btn.ai-glow { animation: glow 3s ease-in-out infinite; }
.activity-btn .badge-count {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 16px; height: 16px;
  background: var(--accent);
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}
.activity-spacer { flex: 1; }

/* ====== SIDEBAR ====== */
#sidebar {
  width: var(--sidebar-width);
  background: var(--bg-secondary);
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
  /* Disable slide-in animation for instant, lag-free navigation toggling */
}
/* 4px-wide drag handle between sidebar and editor — lights up cyan on
   hover/drag. Width:0 area is also pointer-target via the 4px gutter. */
.sidebar-resize-handle {
  width: 2px;
  flex-shrink: 0;
  background: rgb(56 189 248 / 0%);
  cursor: col-resize;
  transition: background 0.15s ease;
  z-index: 6;
}
.sidebar-resize-handle:hover,
.sidebar-resize-handle.dragging { background: var(--accent, #38bdf8); }
.sidebar-panel { display: none; height: 100%; flex-direction: column; min-width: 0; }
.sidebar-panel.active { display: flex; animation: fadeIn 0.2s var(--ease-out); }

/* Global responsiveness defense for the activity-bar sidebar panels.
   The sidebar is narrow (~280px), so anything inside that has a long unbroken
   string (file paths, URLs, project refs, code tokens, hashes) must be told
   to wrap or the panel overflows horizontally — visible bleed past the
   right edge or text getting forced into vertical columns by inline flex
   parents. Two rules cover the vast majority of cases:
     - any descendant: wrap at any character if needed
     - any flex/grid descendant: allow shrinking below intrinsic content width
*/
.sidebar-panel * {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}
/* Code and pre keep monospace + intra-string break opportunity for paths/URLs. */
.sidebar-panel code,
.sidebar-panel pre {
  white-space: normal;
  word-break: break-all;
}
/* Re-allow scrolling for explicit code blocks where horizontal scroll is
   preferable to break-all (terminal output, JSON dumps). Opt-in via class. */
.sidebar-panel pre.code-block-scroll { white-space: pre; overflow-x: auto; }
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.panel-actions { display: flex; gap: 4px; }

/* File Tree */
/* Project / workspace switcher in the Explorer panel header. */
.project-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}
.project-switcher > svg { width: 14px; height: 14px; opacity: 0.7; flex-shrink: 0; }
.project-select {
  flex: 1;
  min-width: 0;
  background: var(--bg-elevated, #1e1f35);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 4px);
  padding: 4px 6px;
  font-size: 12px;
  outline: none;
  cursor: pointer;
}
.project-select:focus { border-color: var(--accent); }
.file-tree { flex: 1; overflow-y: auto; padding: 6px 0; }
.tree-item {
  display: flex;
  align-items: center;
  padding: 4px 10px 4px calc(var(--depth, 0) * 16px + 10px);
  cursor: pointer;
  font-size: 13px;
  gap: 7px;
  user-select: none;
  border-radius: var(--radius-sm);
  margin: 0 4px;
  transition: all var(--transition-fast);
}
.tree-item:hover { background: var(--bg-hover); }
.tree-item.active { background: var(--bg-active); color: var(--text-bright); }
.tree-item .tree-icon { width: 16px; text-align: center; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.tree-item .tree-icon svg.lucide { width: 14px; height: 14px; stroke-width: 2; }
.tree-item .tree-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-item.directory .tree-icon { color: var(--accent-light); }
.tree-item.file .tree-icon { color: var(--text-muted); }

/* File-type colored icons — Lucide stroke takes currentColor */
.tree-icon .icon-js,
.tree-icon svg.lucide.icon-js     { color: #f7df1e; }   /* yellow */
.tree-icon .icon-ts,
.tree-icon svg.lucide.icon-ts     { color: #3178c6; }   /* blue */
.tree-icon .icon-py,
.tree-icon svg.lucide.icon-py     { color: #3776ab; }
.tree-icon .icon-rb,
.tree-icon svg.lucide.icon-rb     { color: #cc342d; }
.tree-icon .icon-html,
.tree-icon svg.lucide.icon-html   { color: #e34c26; }
.tree-icon .icon-css,
.tree-icon svg.lucide.icon-css    { color: #2965f1; }
.tree-icon .icon-json,
.tree-icon svg.lucide.icon-json   { color: #cbcb41; }
.tree-icon .icon-md,
.tree-icon svg.lucide.icon-md     { color: #519aba; }
.tree-icon .icon-go,
.tree-icon svg.lucide.icon-go     { color: #00add8; }
.tree-icon .icon-default,
.tree-icon svg.lucide.icon-default { color: var(--text-muted); }

/* Tree chevron — small toggle arrow before the folder icon */
.tree-chevron, svg.lucide.tree-chevron { width: 10px; height: 10px; stroke-width: 2.5; color: var(--text-muted); flex-shrink: 0; }
.tree-chevron-spacer { width: 10px; flex-shrink: 0; display: inline-block; }

/* Search */
.search-container { padding: 10px 14px; flex: 1; overflow-y: auto; }
.search-input, .git-commit-input, .debug-eval-input, .chat-input, .setting-input {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 12.5px;
  font-family: var(--font-ui);
  outline: none;
  transition: all var(--transition-fast);
  /* Tell the browser to use dark-mode native widgets for the dropdown menu
     (otherwise <option> elements render with light-mode contrast and look
     unreadable on dark themes). */
  color-scheme: dark;
}
/* Native <option> list — the browser renders these outside our DOM so we
   can't reach them with the parent's styles. Pin explicit dark colors so
   they're readable on all themes, not just whichever browser default. */
.setting-input option,
select.setting-input option {
  background-color: #1e1e1e;
  color: #e2e4f0;
  padding: 6px 10px;
}
.setting-input option:checked,
.setting-input option:hover {
  background-color: var(--accent, #0078d4);
  color: #ffffff;
}
.search-input:focus, .git-commit-input:focus, .debug-eval-input:focus,
.chat-input:focus, .setting-input:focus {
  border-color: var(--accent);
  background: var(--bg-input-focus);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.search-results { margin-top: 10px; }
.search-result-item {
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}
.search-result-item:hover { background: var(--bg-hover); }

/* Git */
.git-container { padding: 10px 14px; flex: 1; overflow-y: auto; }
.git-branch {
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  font-size: 12px;
  border: 1px solid var(--border);
}
.git-actions { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.git-commit-input { margin-bottom: 10px; }
.git-changes { font-size: 12px; }
.git-change {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}
.git-change:hover { background: var(--bg-hover); }
.git-change .badge {
  font-size: 9px; padding: 2px 6px;
  border-radius: var(--radius-sm); font-weight: 700;
  letter-spacing: 0.5px;
}
.badge-modified { background: var(--warning-glow); color: var(--warning); }
.badge-added { background: var(--success-glow); color: var(--success); }
.badge-deleted { background: var(--danger-glow); color: var(--danger); }

/* Buttons */
.btn-sm {
  padding: 5px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  transition: all var(--transition-fast);
}
.btn-sm:hover { background: var(--bg-elevated); border-color: var(--border-light); }
.btn-success { border-color: rgba(34,197,94,0.3); color: var(--success); }
.btn-success:hover { background: var(--success-glow); }
.btn-danger { border-color: rgba(239,68,68,0.3); color: var(--danger); }
.btn-danger:hover { background: var(--danger-glow); }
.btn-accent {
  padding: 6px 16px;
  background: var(--accent-gradient);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-weight: 600;
  font-family: var(--font-ui);
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition-fast);
}
.btn-accent:hover { box-shadow: var(--shadow-glow); transform: translateY(-1px); }

/* Debug */
.debug-container { padding: 10px 14px; flex: 1; overflow-y: auto; }
.debug-select {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  font-size: 12px;
  outline: none;
}
.debug-select:focus { border-color: var(--accent); }
/* Wrap so buttons stack to a 2nd row when the sidebar is narrow,
   instead of the rightmost (Stop) getting clipped off-edge. */
.debug-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.debug-actions > .btn-sm { flex: 0 1 auto; min-width: 0; }
.debug-variables, .debug-breakpoints, .debug-console { margin-bottom: 14px; }
#debugOutput {
  max-height: 160px; overflow-y: auto;
  font-family: var(--font-code); font-size: 11px;
  padding: 8px; background: var(--bg-tertiary); border-radius: var(--radius-sm);
  margin-bottom: 6px;
  border: 1px solid var(--border);
}
.section-label {
  font-size: 10px; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

/* Collab / Chat */
.collab-container { padding: 10px 14px; display: flex; flex-direction: column; height: 100%; }
#onlineUsers { margin-bottom: 10px; }
.online-user {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 8px; font-size: 12px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}
.online-user:hover { background: var(--bg-hover); }
.user-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 6px; }
.chat-messages {
  flex: 1; overflow-y: auto;
  padding: 8px; min-height: 100px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  border: 1px solid var(--border);
}
.chat-msg { padding: 6px 0; font-size: 12px; }
.chat-msg .chat-user { font-weight: 600; }
.chat-msg .chat-time { color: var(--text-muted); font-size: 10px; margin-left: 6px; }
.chat-input-container { display: flex; gap: 6px; }

/* Settings */
.settings-container { padding: 14px; }
.setting-group { margin-bottom: 14px; }
.setting-group label {
  display: block; font-size: 12px;
  color: var(--text-secondary); margin-bottom: 5px; font-weight: 500;
}

/* Resize Handles */
.resize-handle {
  width: 4px;
  cursor: col-resize;
  background: var(--bg-primary);
  flex-shrink: 0;
  transition: background var(--transition-fast);
}
.resize-handle:hover, .resize-handle.dragging {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}
.resize-handle-h {
  height: 4px;
  cursor: row-resize;
  background: var(--bg-primary);
  flex-shrink: 0;
  transition: background var(--transition-fast);
}
.resize-handle-h:hover, .resize-handle-h.dragging {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

/* ====== EDITOR AREA ====== */
#editor-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  background: var(--bg-primary);
}
/* Tab Bar */
.tab-bar {
  height: var(--tab-height);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  flex-shrink: 0;
}
.tab-bar::-webkit-scrollbar { height: 0; }
.tabs { display: flex; min-width: 0; }
/* Compact text-only tabs (file icon hidden — toggle .show-tab-icons on
   .tab-bar to bring them back). Active = colored text + 2px underline,
   no background fill. Hover = brighter text only. Close × only on hover. */
.tab {
  border-top-right-radius: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  height: 100%;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
  user-select: none;
  max-width: 125px;
  position: relative;
  color: var(--text-secondary);
  background: transparent;
  transition: color var(--transition-fast);
}
.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--text-bright); background: transparent; }
.tab.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 8px; right: 8px;   /* slight inset for a more refined underline */
  height: 2px;
  background: var(--accent-gradient-h);
  border-radius: 2px 2px 0 0;
}
.tab .tab-icon { display: none; }   /* hidden by default; .tab-bar.show-tab-icons opts in */
.tab-bar.show-tab-icons .tab .tab-icon { display: inline-flex; font-size: 11px; }
.tab .tab-name { overflow: hidden; text-overflow: ellipsis; }
.tab .tab-close {
  opacity: 0;
  /* Size proportionally to the tab's height so the × stays balanced with the
     toolbar toggle chevron next to it, and both scale together at XS/S/M/L/XL
     Text Size (because --tab-height already multiplies through --ui-scale). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--tab-height) * 0.7);
  height: calc(var(--tab-height) * 0.7);
  font-size: calc(var(--tab-height) * 0.5);
  line-height: 1;
  padding: 0;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
.tab:hover .tab-close { opacity: 0.55; }
.tab .tab-close:hover { opacity: 1; background: var(--bg-active); }
.tab.modified .tab-name::after { content: ' '; color: var(--warning); font-size: 10px; }

/* Breadcrumb */
.breadcrumb {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 26px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 11px;
  color: var(--text-muted);
  z-index: 5;
}
.breadcrumb span { cursor: pointer; transition: color var(--transition-fast); }
.breadcrumb span:hover { color: var(--accent-light); }
.breadcrumb .sep { margin: 0 5px; opacity: 0.4; }

.editor-split { flex: 1; display: flex; overflow: hidden; position: relative; }
.editor-container { flex: 1; position: relative; overflow: hidden; }
#editor { position: absolute; top: 26px; left: 0; right: 0; bottom: 0; font-family: var(--font-code); }

/* Welcome Screen */
.welcome-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  gap: 16px;
  animation: fadeIn 0.5s var(--ease-out);
}
.welcome-screen .welcome-logo {
  font-size: 56px;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: float 3s ease-in-out infinite;
}
.welcome-screen i { font-size: 56px; opacity: 0.3; }
.welcome-screen h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}
.welcome-screen .subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 400px;
  text-align: center;
  line-height: 1.6;
}
.welcome-screen .shortcuts {
  font-size: 12px;
  text-align: left;
  margin-top: 20px;
  display: grid;
  grid-template-columns: auto auto;
  gap: 8px 24px;
}
.welcome-screen .shortcuts div { display: contents; }
.welcome-screen kbd {
  background: var(--bg-tertiary);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  border: 1px solid var(--border-light);
  font-family: var(--font-code);
  color: var(--text-secondary);
}

/* Preview */
.preview-container { flex: 1; display: flex; flex-direction: column; border-left: 1px solid var(--border); }
.preview-container.hidden { display: none; }
.preview-toolbar {
  height: 34px;
  display: flex; align-items: center;
  padding: 0 14px; gap: 10px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--text-secondary);
  transition: height 0.18s ease, padding 0.18s ease, background 0.18s ease;
  overflow: hidden;
}
.preview-toolbar span { flex: 1; }
/* Collapsed: hide the toolbar entirely — the editor TAB has its own
   chevron that triggers re-expand, so the toolbar doesn't need to keep
   any of itself visible. */
.preview-toolbar.collapsed {
  height: 0;
  padding: 0;
  border-bottom: none;
}

/* Chevron toggle inside the preview editor tab. Lives between the tab
   name and the close ×. Click flips collapsed state of .preview-toolbar.
   Uses the lucide chevron icon (SVG with rounded line caps) — small and
   refined instead of a sharp Unicode triangle. */
.tab-toolbar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Size proportionally to the tab's height — matches .tab-close so the two
     buttons read as a pair and scale together when Text Size changes. */
  width: calc(var(--tab-height) * 0.7);
  height: calc(var(--tab-height) * 0.7);
  margin-left: 3px;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, color 0.12s;
}
.tab-toolbar-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}
.tab-toolbar-toggle svg {
  /* Inner icon is half the tab height — gives ~14px at default scale, ~16px
     at L Text Size, etc. Matches the visual weight of the × close glyph. */
  width: calc(var(--tab-height) * 0.5);
  height: calc(var(--tab-height) * 0.5);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* IMPORTANT: click-anywhere fix. By default an inline SVG only captures
     clicks on the painted path strokes — clicks in the empty space inside
     the chevron's bounding box pass straight through to whatever's behind
     (the editor tab area), so the toggle handler never fires. Disabling
     pointer-events on the SVG lets every click in the container land on
     the parent .tab-toolbar-toggle span where the handler lives. */
  pointer-events: none;
}

.preview-frame-wrap { flex: 1; position: relative; display: flex; }
#previewFrame { flex: 1; border: none; background: #fff; }

/* Sits over the iframe during cold dev-server compilation so the user sees
   feedback instead of staring at a blank white box. Removed via .hidden once
   the iframe fires `load` (plus a small grace period for React to mount). */
.preview-loading {
  position: absolute; inset: 0;
  background: var(--bg-primary, #0f1019);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  color: var(--text-secondary, #8b8fa8);
  font-family: system-ui, -apple-system, sans-serif;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.preview-loading.hidden { display: none; }
/* Reusable IDE loading indicator. Same animated logo gif as the AI chat
   button so loading states feel coherent. Drop in anywhere with:
     <img class="aide-loader" src="styles/ailogo.gif" alt="" />
   Always renders as a perfect circle — !important on radius + overflow
   defeats any stale browser cache or inherited rules that flatten corners.
   inline-block + aspect-ratio:1 protects against parent flex stretching.
   Outer glow gives the orb a "sphere" feel like the chat avatar.        */
.aide-loader {
  width: 48px !important;
  height: 48px !important;
  aspect-ratio: 1 / 1;
  border-radius: 50% !important;
  overflow: hidden !important;
  object-fit: cover;
  display: inline-block;
  user-select: none;
  -webkit-user-drag: none;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.45);
}
.preview-loading .aide-loader { width: 64px !important; height: 64px !important; }
.preview-loading-label { font-size: 14px; font-weight: 500; }
.preview-loading-sublabel { font-size: 12px; opacity: 0.7; max-width: 320px; text-align: center; }
.preview-reconnect-btn {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--accent, #0078d4);
  color: #fff;
  border: 1px solid var(--accent, #0078d4);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.05s ease;
}
.preview-reconnect-btn:hover { filter: brightness(1.15); }
.preview-reconnect-btn:active { transform: translateY(1px); }
.preview-reconnect-btn:disabled { opacity: 0.5; cursor: wait; }
.preview-reconnect-btn i { width: 13px; height: 13px; }

/* Floating reconnect button overlaid on the preview iframe — always visible,
   even when the preview is loading a working app. Faded by default so it
   doesn't fight with the rendered app's UI; brightens on hover. Click =
   same hard-reload + immediate probe as the in-overlay button. */
.preview-floating-reconnect {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 20, 28, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  opacity: 0.45;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.15s ease, background 0.15s ease, transform 0.05s ease;
}
.preview-floating-reconnect:hover {
  opacity: 1;
  background: var(--accent, #0078d4);
  border-color: var(--accent, #0078d4);
}
.preview-floating-reconnect:active { transform: scale(0.94); }
.preview-floating-reconnect:disabled { opacity: 0.3; cursor: wait; }
.preview-floating-reconnect i { width: 14px; height: 14px; }
/* While the reconnect is actively spinning, animate the icon. */
.preview-floating-reconnect.spinning i {
  animation: preview-reconnect-spin 0.8s linear infinite;
}
@keyframes preview-reconnect-spin {
  to { transform: rotate(360deg); }
}

/* ====== LOGIN GATE ====== */
/* Full-viewport overlay shown by firebaseAuth.js before the IDE boots.
   Uses the same design tokens as the rest of the IDE so the modal feels
   native and there's no jarring style switch. */
.login-gate {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg-primary);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.login-gate.hidden { display: none; }
.login-card {
  width: 100%; max-width: 380px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  font-family: inherit; color: var(--text-primary);
}
.login-brand {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 22px;
}
.login-brand-mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent, #5b9eff) 0%, #8e5bff 100%);
}
.login-brand-name { font-size: 18px; font-weight: 600; }
.login-title { margin: 0 0 6px; font-size: 22px; font-weight: 600; }
.login-sub { margin: 0 0 24px; color: var(--text-secondary); font-size: 14px; }
.login-google {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 16px;
  background: #fff; color: #1f1f1f;
  border: 1px solid #dadce0;
  border-radius: 8px;
  font-size: 15px; font-weight: 500;
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.login-google:hover { box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3); }
.login-google:disabled { opacity: 0.6; cursor: progress; }
.login-google img { width: 18px; height: 18px; }
.login-err {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(255, 80, 80, 0.1);
  border: 1px solid rgba(255, 80, 80, 0.3);
  color: #ff9494;
  border-radius: 6px;
  font-size: 13px;
  display: none;
}
.login-err.show { display: block; }
.login-foot {
  margin-top: 22px;
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.5;
}

/* ====== BOTTOM PANEL ====== */
.bottom-panel {
  height: var(--bottom-panel-height);
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.bottom-tabs {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding: 0 10px;
  flex-shrink: 0;
}
.bottom-tab {
  padding: 7px 14px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast);
  font-weight: 500;
}
.bottom-tab:hover { color: var(--text-secondary); }
.bottom-tab.active { color: var(--text-primary); border-bottom-color: var(--accent); }
.bottom-tab-actions { margin-left: auto; display: flex; gap: 4px; }
.bottom-content { display: none; flex: 1; overflow: hidden; }
.bottom-content.active { display: flex; flex-direction: column; }

#bottom-terminal { overflow: hidden; }
.terminal-tabs {
  display: flex;
  gap: 4px;
  padding: 5px 10px;
  font-size: 11px;
  flex-shrink: 0;
}
.terminal-tab {
  padding: 4px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  display: flex; align-items: center; gap: 7px;
  font-size: 11px;
  transition: all var(--transition-fast);
}
.terminal-tab:hover { background: var(--bg-elevated); }
.terminal-tab.active {
  background: var(--bg-active);
  color: var(--text-primary);
  border-color: var(--border-accent);
}
.terminal-tab .close-term { font-size: 10px; opacity: 0.4; }
.terminal-tab .close-term:hover { opacity: 1; }
#terminal { flex: 1; padding: 4px; min-height: 0; overflow: hidden; }
#terminal .xterm { height: 100%; }
#terminal .xterm-viewport { overflow-y: auto; }

#bottom-output, #bottom-problems { padding: 10px 14px; overflow-y: auto; }
#outputContent { font-family: var(--font-code); font-size: 12px; white-space: pre-wrap; }
#problemsList { font-size: 12px; }
.problem-item {
  padding: 4px 8px; display: flex; align-items: center; gap: 7px;
  cursor: pointer; border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}
.problem-item:hover { background: var(--bg-hover); }
.problem-error { color: var(--danger); }
.problem-warning { color: var(--warning); }

/* ====== STATUS BAR ====== */
#statusbar {
  height: var(--statusbar-height);
  background: var(--accent-gradient-h);
  color: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  font-size: 11px;
  flex-shrink: 0;
  position: relative;
  z-index: 100;
  font-weight: 500;
}
.status-left, .status-right { display: flex; gap: 14px; }
.status-item {
  display: flex; align-items: center; gap: 5px;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
.status-item:hover { opacity: 0.8; }

/* Live host-metric items in the status bar (CPU/RAM/Net/Disk). Stay
   compact + monospace so they don't jiggle as values change. Color shifts
   to amber at ≥70% and red at ≥90% so spikes are visible at a glance. */
.status-item.sys-stat {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-code);
  font-size: 11px;
  gap: 4px;
}
.status-item.sys-stat i { width: 12px; height: 12px; opacity: 0.75; }
.status-item.sys-stat.warn  { color: #f59e0b; }
.status-item.sys-stat.danger{ color: #ef4444; }
.status-item.sys-stat.warn  i,
.status-item.sys-stat.danger i { opacity: 1; }

/* ====== CONTEXT MENU ====== */
.context-menu {
  position: fixed;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 5px 0;
  z-index: 10000;
  min-width: 190px;
  backdrop-filter: blur(20px);
  animation: fadeIn 0.15s var(--ease-out);
}
.context-menu.hidden { display: none; }
.context-item {
  padding: 7px 18px;
  cursor: pointer;
  font-size: 12px;
  transition: all var(--transition-fast);
  display: flex; align-items: center; gap: 10px;
}
.context-item:hover { background: var(--accent); color: #fff; }
.context-separator { height: 1px; background: var(--border); margin: 4px 8px; }

/* Dropdown */
.dropdown-menu {
  position: fixed;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 5px 0;
  z-index: 10000;
  min-width: 230px;
  backdrop-filter: blur(20px);
  animation: fadeIn 0.15s var(--ease-out);
}
.dropdown-menu.hidden { display: none; }
.dropdown-item {
  padding: 7px 18px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all var(--transition-fast);
}
.dropdown-item:hover { background: var(--accent); color: #fff; }
.dropdown-item .shortcut { font-size: 11px; color: var(--text-muted); font-family: var(--font-code); }
.dropdown-item:hover .shortcut { color: rgba(255,255,255,0.6); }
.dropdown-separator { height: 1px; background: var(--border); margin: 4px 8px; }

/* ====== AI CHAT PANEL (Pinnable to Right) ====== */
/* VS Code-style chat panel: a FLEX CHILD of #main-layout (relocated there
   by aiChat.js init), not a position:fixed overlay. Opening/closing/resizing
   reflows the editor naturally. No body-class margin hacks, no z-index war,
   no DOM-ordering tricks needed because we just appendChild/insertBefore. */
/* Hidden: collapse flex column AND fade out smoothly. display:none would
   pop in/out without animation — width:0 + opacity:0 + overflow:hidden
   gives a clean slide-collapse. pointer-events:none ensures the invisible
   panel doesn't intercept clicks. */
.ai-panel.hidden {
  width: 0 !important;
  opacity: 0;
  pointer-events: none;
  border: none;
  box-shadow: none;
}
/* Sidebar panel does not have transition to keep navigation instant and lag-free */
#sidebar {
  transition: none !important;
}
/* AI Panel has no width/opacity transitions to ensure instantaneous panel toggles without flexbox reflow lag */
.ai-panel {
  position: relative;
  width: var(--ai-panel-width, 380px);
  flex-shrink: 0;
  background: rgba(10, 10, 15, 0.92);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  /* No border by default; pin-left / pin-right rules below put the 5px
     divider on whichever edge faces the editor. Other edge stays clean. */
  border-left: none;
  border-right: none;
  border-radius: 0;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 1;
  transition: none !important;
}
/* Docked LEFT — panel sits LEFT of the editor, so its RIGHT edge is the divider. */
.ai-panel.pin-left {
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
  border-right: 2px solid rgb(56, 189, 248) !important;
}
/* Docked RIGHT — panel sits RIGHT of the editor, so its LEFT edge is the divider. */
.ai-panel.pin-right {
  border-left: 2px solid rgb(56, 189, 248) !important;
}
/* Visible state is implicit (no .hidden). Keep .visible class as a no-op
   alias so existing JS that adds/removes it doesn't break. */
.ai-panel.visible { /* no-op — :not(.hidden) is the actual signal */ }
/* Pin button in header */
.ai-pin-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-pin-btn:hover {
  color: var(--accent-light);
  background: rgba(27, 58, 92, 0.2);
}
.ai-pin-btn.active {
  color: var(--accent, #38bdf8);
  background: rgba(56, 189, 248, 0.12);
}

/* Eldar permission-mode selector — pill button with letter badge + popover.
   Lives next to the send button at the bottom of the chat panel, so the
   popover opens UPWARD (`bottom: calc(100% + 6px)`). */
.ai-mode-wrap { position: relative; display: inline-flex; }
.ai-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 4px 8px;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.ai-mode-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-primary); }
.ai-mode-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.ai-mode-btn[data-mode="plan"]              { color: #94a3b8; }
.ai-mode-btn[data-mode="default"]           { color: #38bdf8; }
.ai-mode-btn[data-mode="acceptEdits"]       { color: #fbbf24; }
.ai-mode-btn[data-mode="bypassPermissions"] { color: #f87171; }

.ai-mode-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  min-width: 280px;
  background: rgba(15, 32, 53, 0.96);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(56, 189, 248, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  padding: 6px;
  z-index: 99999;
}
.ai-mode-popover.hidden { display: none; }
.ai-mode-popover-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 6px 10px 4px;
}
.ai-mode-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  background: none;
  border: 0;
  color: var(--text-secondary);
  text-align: left;
  padding: 8px 10px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.ai-mode-option > i {
  margin-top: 2px;
  width: 14px;
  text-align: center;
  color: var(--text-muted);
}
.ai-mode-option:hover { background: rgba(56, 189, 248, 0.08); color: var(--text-primary); }
.ai-mode-option:hover > i { color: var(--accent, #38bdf8); }
.ai-mode-option.active {
  background: rgba(56, 189, 248, 0.14);
  color: var(--text-primary);
}
.ai-mode-option.active > i { color: var(--accent, #38bdf8); }
.ai-mode-option-name {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 2px;
}
.ai-mode-option-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
}
.ai-mode-option-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-radius: 999px;
  background: var(--accent, #0078d4);
  color: #fff;
  vertical-align: 1px;
}

/* AI Panel Resize Handle — sits on the OPPOSITE edge from the dock side.
   Docked RIGHT (default) → handle on the LEFT edge (resize toward editor).
   Docked LEFT             → handle on the RIGHT edge (resize toward editor). */
.ai-resize-handle {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  cursor: col-resize;
  z-index: 10;
  background: transparent;
  transition: background 0.15s ease;
}
.ai-panel.pin-left .ai-resize-handle { left: auto; right: 0; }
.ai-resize-handle:hover,
.ai-resize-handle.dragging {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}
/* Disable transitions while resizing */
.ai-panel.resizing {
  transition: none !important;
}

/* Responsive AI Panel */
@media (max-width: 1200px) {
  .ai-panel { width: 340px; }
}
@media (max-width: 900px) {
  .ai-panel {
    width: 100%;
    max-width: 100vw;
    right: 0;
    border-left: none;
    border-top: 2px solid var(--accent);
    top: auto;
    bottom: var(--statusbar-height);
    height: 55vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .ai-panel.hidden {
    transform: translateY(100%);
  }
  .ai-panel.visible {
    transform: translateY(0);
  }
  .ai-panel.pinned {
    top: auto;
    bottom: var(--statusbar-height);
    height: 55vh;
    border-left: none;
    border-top: 2px solid var(--accent-light);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
}
@media (max-width: 480px) {
  .ai-panel {
    height: 70vh;
  }
  .ai-panel .ai-msg-bubble { max-width: 95%; font-size: 12px; }
  .ai-panel-header { padding: 10px 12px; }
  .ai-input-area { padding: 8px 10px; }
}

.ai-panel-header {
  display: flex;
  align-items: center;
  padding: 3px 16px;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  /* Match the editor's .tab-bar so the two stay visually aligned. The tab-bar uses
     `height: var(--tab-height)` with default content-box; mirror it exactly. */
  height: var(--tab-height);
}
.ai-panel-header .ai-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent-gradient);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #fff;
  flex-shrink: 0;
  position: relative;
}
.ai-panel-header .ai-avatar::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--accent-gradient);
  z-index: -1;
  opacity: 0.3;
  animation: pulse 2s infinite;
}
.ai-panel-header .ai-info { flex: 1; }
.ai-panel-header .ai-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--accent-light);
  letter-spacing: -0.2px;
}
.ai-panel-header .ai-status {
  font-size: 11px;
  color: var(--success);
  display: flex; align-items: center; gap: 4px;
}
.ai-panel-header .ai-status::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--success);
  border-radius: 50%;
  display: inline-block;
}
.ai-panel-actions { display: flex; gap: 4px; }

/* ============================================================
   AI tab strip — multiple Eldar chat sessions in one panel.
   Max 4 tabs. Triggered by the [+] button next to history icon.
   ============================================================ */
.ai-tab-strip {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 4px 6px 0 6px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary, rgba(0,0,0,0.15));
  overflow-x: auto;
  scrollbar-width: thin;
}
.ai-tab-strip.hidden { display: none; }
.ai-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 10px;
  font-size: 11px;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  cursor: pointer;
  max-width: 160px;
  min-width: 70px;
  position: relative;
  top: 1px;
  user-select: none;
  white-space: nowrap;
}
.ai-tab:hover { background: var(--bg-hover, rgba(255,255,255,0.04)); color: var(--text-primary); }
.ai-tab.active {
  background: var(--bg-primary, #14152a);
  color: var(--text-primary);
  border-color: var(--border);
  border-bottom-color: var(--bg-primary, #14152a);
  z-index: 2;
}
.ai-tab-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  color: var(--text-tertiary, rgba(255,255,255,0.4));
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0;
}
.ai-tab-close:hover {
  background: var(--bg-hover, rgba(255,255,255,0.1));
  color: var(--text-primary);
}
.ai-tab-contents { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ai-tab-contents .ai-messages { flex: 1; }
.ai-tab-contents .ai-messages[hidden] { display: none !important; }

/* ============================================================
   Chat tabs host + per-tab containers — Eldar chats docked into
   the editor's tab bar. Each chat editor tab creates its OWN
   .chat-tab-container inside #chatTabsHost (with its own
   messages, toolbar clone, input, send button). Width matches
   the side AI panel default so chats feel like the same surface,
   just relocated to the tab bar.
   ============================================================ */
.chat-tabs-host {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  overflow-x: auto;   /* if N * 380px > editor area width, scroll sideways */
  overflow-y: hidden;
}
.chat-tabs-host.hidden { display: none !important; }
.chat-tab-container {
  display: flex;
  flex-direction: column;
  width: var(--ai-panel-width, 380px);
  min-width: var(--ai-panel-width, 380px);
  max-width: var(--ai-panel-width, 380px);
  height: 100%;
  min-height: 0;
  background: rgba(10, 10, 15, 0.92);
  border-right: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-tab-container.hidden { display: none !important; }
/* The chat tab the user last clicked in the editor tab bar gets a subtle
   accent border to mark it as "focused" — all panels stay visible, this
   just shows which one the tab-bar click currently highlights. */
.chat-tab-container.chat-tab-focused {
  box-shadow: inset 0 2px 0 0 var(--accent, #38bdf8);
}
.chat-tab-messages-host {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.chat-tab-messages-host .ai-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 2px;
  display: flex;
  flex-direction: column;
}
.chat-tab-messages-host .ai-messages[hidden] { display: none !important; }
/* The .ai-input-area and .ai-model-bar nodes are MOVED into this container
   when a chat tab activates (and moved back when leaving). No duplication —
   the same DOM nodes (with all their wired-up event handlers) just relocate.
   The fallback #chatTabInput / #btnChatTabSend stay as a minimal input row
   for the brief window before the toolbar is moved in. */
.chat-tab-input-wrap {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  background: var(--bg-secondary, rgba(0,0,0,0.18));
  flex-shrink: 0;
}
.chat-tab-input {
  flex: 1;
  resize: none;
  min-height: 36px;
  max-height: 200px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-primary);
  background: var(--bg-elevated, #1e1f35);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  outline: none;
}
.chat-tab-input:focus { border-color: var(--accent); }
.btn-chat-tab-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--accent-gradient, linear-gradient(135deg, #38bdf8, #6366f1));
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
}
.btn-chat-tab-send:hover { filter: brightness(1.1); }
.btn-chat-tab-send:disabled { opacity: 0.5; cursor: not-allowed; }
/* Hide the fallback chat-tab input row whenever the real toolbar has been
   moved in (signaled by the parent having a .has-real-toolbar class). */
.chat-tab-container.has-real-toolbar .chat-tab-input-wrap { display: none; }
.tab.tab-chat .tab-icon { color: var(--accent, #38bdf8); }

/* ============================================================
   AI Chat History popover — opened by the panel-left-open icon
   next to the Pin button. Anchored beneath the AI panel header,
   lists Firebase-persisted chat sessions grouped by UTC date.
   ============================================================ */
.ai-history-popover {
  position: absolute;
  top: calc(var(--titlebar-height) + 4px);
  right: 6px;
  width: 280px;
  max-height: 60vh;
  background: var(--bg-elevated, #1e1f35);
  border: 1px solid var(--border-light, rgba(255,255,255,0.1));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ai-history-popover.hidden { display: none; }
.ai-history-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.ai-history-popover-body { overflow-y: auto; padding: 6px; flex: 1; min-height: 0; }
.ai-history-day { margin-bottom: 10px; }
.ai-history-day-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 4px 8px;
}
.ai-history-day-sessions { display: flex; flex-direction: column; gap: 2px; }
.ai-history-session {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 0.12s ease, color 0.12s ease;
}
.ai-history-session:hover { background: var(--bg-hover); color: var(--text-primary); }
.ai-history-session-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
}
.ai-history-session-when { color: var(--text-primary); }
.ai-history-session-turns { color: var(--text-muted); font-size: 10px; }
.ai-history-session-model {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 2px;
  font-family: var(--font-code);
}
.ai-history-empty,
.ai-history-empty-small {
  padding: 14px 12px;
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}
.ai-history-empty-small { padding: 6px; }

/* AI Context Chips */
.ai-context-bar {
  display: flex;
  gap: 6px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  flex-shrink: 0;
}
.ai-context-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  background: var(--bg-active);
  border-radius: 20px;
  font-size: 11px;
  color: var(--accent-light);
  border: 1px solid var(--border-accent);
}
.ai-context-chip i { font-size: 10px; }
.ai-context-chip .remove-chip { cursor: pointer; opacity: 0.6; font-size: 10px; }
.ai-context-chip .remove-chip:hover { opacity: 1; }

/* AI Messages */
.ai-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;          /* no horizontal scrollbar at the panel level */
  /* Aggressive trim: 4px vertical, 2px horizontal — almost no padding.
     Bubble + scroll thumb still keep visual edges from touching chrome. */
  padding: 4px 2px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Allow long content (URLs, no-space tokens, paths) to wrap inside the
   bubble instead of pushing the layout wide. `pre` keeps its own
   overflow-x: auto so code blocks still scroll independently. */
.ai-msg-bubble,
.ai-msg-bubble p,
.ai-msg-bubble li,
.ai-msg-bubble a {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ai-msg-bubble { min-width: 0; }
.ai-msg {
  display: flex;
  gap: 10px;
  animation: fadeIn 0.3s var(--ease-out);
}
.ai-msg.user { flex-direction: row-reverse; }
.ai-msg-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.ai-msg.assistant .ai-msg-avatar { background: var(--accent-gradient); color: #fff; }
.ai-msg.user .ai-msg-avatar {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.ai-msg-bubble {
  /* 100% bubble cap (was 95%, originally 85%) — bubble fills the available
     row width entirely. The panel-level 4px 2px padding on .ai-messages is
     now the only edge-spacing between bubble and panel chrome. */
  max-width: 100%;
  /* Inner padding trimmed to 6px 8px — text starts ~6px from bubble edge,
     bubble bottom ~6px below last line. Anything thinner = text reads as
     touching the bubble border (no breathing room). */
  padding: 6px 8px;
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.55;
  /* Defense against horizontal overflow when the model emits long inline
     code/values (CSS tokens, file paths, hashes). `overflow-wrap: anywhere`
     lets the browser break inside long unbroken strings; `min-width: 0`
     keeps the bubble from refusing to shrink inside its flex parent. */
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}
.ai-msg.assistant .ai-msg-bubble {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-primary);
}
.ai-msg.user .ai-msg-bubble {
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-md) var(--radius-md) 4px var(--radius-md);
}
.ai-msg-bubble code {
  background: rgba(0,0,0,0.3);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-code);
  font-size: 12px;
  /* Inline code with long unbroken values (e.g. CSS tokens, hashes) must
     wrap rather than push the bubble's right edge out of the column. */
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
.ai-msg-bubble pre {
  background: var(--bg-void);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin: 8px 0;
  overflow-x: auto;
  font-family: var(--font-code);
  font-size: 12px;
  line-height: 1.5;
  /* Code BLOCKS keep horizontal scroll (so indentation stays readable);
     just constrain the width so the block can never push the bubble out. */
  max-width: 100%;
}
.ai-msg-bubble pre code {
  /* Inside <pre> we want code to preserve newlines/whitespace as written —
     undo the inline-code wrapping rules so multi-line blocks render right. */
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
}
.ai-msg-actions { display: flex; gap: 6px; margin-top: 8px; }

/* File-path list rendered under Copy/Insert showing which files the AI
   actually touched during this turn (Read, Edited, Wrote, Listed, etc.).
   Populated from response.toolsUsed returned by the server. Wrapped in
   .ai-logs-wrap with a toggleable checkbox labeled "Logs" — ticked by
   default; uncheck to collapse the list. */
.ai-logs-wrap {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-light);
}
.ai-logs-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-family: var(--font-ui);
  color: var(--text-secondary, #8b8fa8);
  cursor: pointer;
  user-select: none;
  padding: 2px 0;
  margin-bottom: 4px;
}
/* iOS-style toggle switch in place of a checkbox. Off = neutral pill, on =
   accent-tinted pill with the knob slid right. The native <input> is hidden
   visually but kept for accessibility (role=switch, focus, screen readers). */
.ai-logs-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 28px;
  height: 16px;
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
  margin: 0;
}
.ai-logs-checkbox::before {
  content: '';
  position: absolute;
  top: 1px; left: 1px;
  width: 12px; height: 12px;
  background: var(--text-secondary, #8b8fa8);
  border-radius: 50%;
  transition: transform 0.15s ease, background 0.15s ease;
}
.ai-logs-checkbox:checked {
  background: var(--accent, #0078d4);
  border-color: var(--accent, #0078d4);
}
.ai-logs-checkbox:checked::before {
  transform: translateX(12px);
  background: #fff;
}
.ai-logs-checkbox:hover { border-color: var(--accent-light, var(--accent)); }
.ai-logs-checkbox:focus-visible {
  outline: 2px solid var(--accent-light, var(--accent));
  outline-offset: 2px;
}
.ai-logs-label {
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-size: 10px;
}
.ai-logs-count {
  color: var(--text-muted, #505370);
  font-size: 10px;
}
.ai-tools-used {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  font-family: var(--font-code);
}

/* Stats block (token + pricing) shown at the top of the Logs list. */
.ai-stats-block {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 2px;
  padding: 6px 8px;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-family: var(--font-code);
}
.ai-stat-row {
  display: contents;
}
.ai-stat-key {
  color: var(--text-muted, #505370);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-family: var(--font-ui);
  font-weight: 600;
}
.ai-stat-val {
  color: var(--text-primary, #e2e4f0);
  font-size: 11px;
}
.ai-stat-sub {
  color: var(--text-muted, #505370);
  font-size: 10px;
  margin-left: 4px;
}
.ai-tool-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--text-muted, #505370);
  word-break: break-all;
}
.ai-tool-verb {
  display: inline-block;
  min-width: 50px;
  color: var(--accent-light, #38bdf8);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  opacity: 0.85;
}
.ai-tool-path {
  color: var(--text-secondary, #8b8fa8);
  background: transparent;
  padding: 0;
}
.ai-action-btn {
  padding: 4px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 11px;
  transition: all var(--transition-fast);
  display: flex; align-items: center; gap: 5px;
}
.ai-action-btn:hover {
  background: var(--bg-active);
  color: var(--text-primary);
  border-color: var(--border-accent);
}

/* Typing Indicator */
.ai-typing { display: flex; gap: 4px; padding: 8px 14px; }
.ai-typing-dot {
  width: 6px; height: 6px;
  background: var(--accent-light);
  border-radius: 50%;
  animation: pulse 1.4s infinite;
}
.ai-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.ai-typing-dot:nth-child(3) { animation-delay: 0.4s; }

/* AI Input Area */
.ai-input-area {
  /* padding: 8px 10px; */
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
/* Two-row stacked container: textarea on top, toolbar (left tools + right
   actions) on bottom. Flat — no border, no border-radius — per design. */
.ai-input-wrapper {
  display: flex;
  flex-direction: column;
  /* gap: 4px; */
  background: var(--bg-input);
  border: none;
  /* padding: 8px 10px; */
  position: relative;                          /* anchor for the shimmer line */
  transition: background var(--transition-fast);
}
.ai-input-wrapper:focus-within { background: rgba(255, 255, 255, 0.04); }
/* Shimmering white sheen across the TOP edge of the textbox while focused.
   A 2px line with a sliding bright-spot gradient — animates only when the
   textarea has focus and pauses immediately on blur. */
.ai-input-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 30%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0.15) 70%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-position: -100% 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.ai-input-wrapper:focus-within::before {
  opacity: 1;
  /* alternate => slides left→right, then right→left, repeating; ease-in-out
     softens the turnaround at each edge for a gentler back-and-forth. */
  animation: ai-input-shimmer 4.5s ease-in-out infinite alternate;
}
@keyframes ai-input-shimmer {
  0%   { background-position: -50% 0;  }
  100% { background-position: 150% 0;  }
}
/* Textarea row — mic icon is absolutely positioned INSIDE the textarea at
   the top-right. Textarea reserves right-padding so typed text doesn't run
   under the icon. */
.ai-input-text-row {
  position: relative;
}
.ai-input-text-row .ai-input-field { padding-right: 24px; }
/* Mic sits at top-right INSIDE the textarea, sized to match the text
   line. Padding + font-size scale with the Text Size setting so the icon
   stays visually centered on the first line of typed content at every
   size (XS through XL). */
.ai-mic-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  height: auto;
  padding: 4px 6px;
  font-size: calc(var(--ui-text-size, 13px) - 1px);
  line-height: 1.5;
  color: var(--text-secondary);
  opacity: 0.9;
  cursor: not-allowed;
}
.ai-mic-btn:hover { background: none; color: var(--text-primary); opacity: 1; }
.ai-input-field {
  width: 100%;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 13px;
  font-family: var(--font-ui);
  outline: none;
  resize: none;
  /* No min-height — textarea hugs content height so the gap below the
     text matches the gap above (both zero). Padding is symmetric. */
  max-height: 320px;
  line-height: 1.5;
  padding: 6px 2px;
  display: block;
  overflow-y: auto;
}
.ai-input-field::placeholder { color: var(--text-muted); line-height: 1.5; }
.ai-input-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.ai-input-toolbar-left {
  display: flex;
  align-items: center;
  gap: 2px;
}
.ai-input-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
/* Generic left-toolbar icon button — flat, square, no radius. */
.ai-tool-btn {
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.ai-tool-btn:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); }
.ai-tool-btn.active { color: var(--accent, #38bdf8); background: rgba(56, 189, 248, 0.12); }
.ai-tool-btn-slash { font-size: 14px; }
/* Broadcast strategy chip — a tiny text pill (Collab/Fight/Parallel) that
   appears next to the broadcast button only when broadcast is ON. */
.ai-broadcast-mode { width: auto; padding: 0 8px; border-radius: 10px; }
.ai-broadcast-mode.hidden { display: none; }
.ai-broadcast-mode .ai-bc-mode-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
/* Send: flat square with up-arrow, accent-colored. No radius. */
.ai-send-btn {
  width: 30px; height: 30px;
  background: var(--accent, #38bdf8);
  border: none;
  color: #fff;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: background var(--transition-fast), opacity var(--transition-fast);
  flex-shrink: 0;
  padding: 0;
}
.ai-send-btn:hover { background: var(--accent-light, #7dd3fc); }
.ai-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* Stop state: the same button flips into a danger-tinted Stop while a chat
   turn is in-flight. Icon and title are swapped from JS. */
.ai-send-btn.is-stop { background: var(--danger, #ef4444); }
.ai-send-btn.is-stop:hover { background: #f87171; }

/* Utility */
.hidden { display: none !important; }

/* Remote cursor */
.remote-cursor { position: absolute; width: 2px; z-index: 100; pointer-events: none; }
.remote-cursor-label {
  position: absolute; top: -18px; left: 0;
  font-size: 10px; padding: 1px 7px;
  border-radius: 4px; color: #fff;
  white-space: nowrap; pointer-events: none; font-weight: 600;
}

/* File icons */
.icon-js { color: #f7df1e; }
.icon-ts { color: #3178c6; }
.icon-py { color: #3572a5; }
.icon-rb { color: #cc342d; }
.icon-java { color: #b07219; }
.icon-c { color: #555555; }
.icon-cs { color: #178600; }
.icon-php { color: #4f5d95; }
.icon-go { color: #00add8; }
.icon-html { color: #e34c26; }
.icon-css { color: #1572b6; }
.icon-json { color: #f7df1e; }
.icon-md { color: #083fa1; }
.icon-folder { color: var(--accent-light); }
.icon-default { color: var(--text-muted); }

/* Toast Notifications */
/* Notification toast — centered horizontally near the top of the screen
   so it's hard to miss. JS animates opacity + translateY for the
   slide-in; translateX(-50%) is preserved across states via the
   .toast--visible / default offset transform. */
.toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translate(-50%, -10px);
  z-index: 99999;
  padding: 12px 44px 12px 22px;       /* extra right padding for the X */
  border-radius: var(--radius-md);
  font-size: 13px;
  color: #fff;
  max-width: 560px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  opacity: 0;
}
.toast.toast--visible { transform: translate(-50%, 0); opacity: 1; }
.toast.info    { background: rgba(27, 58, 92, 0.95); }
.toast.success { background: rgba(34, 197, 94, 0.9); }
.toast.warning { background: rgba(245, 158, 11, 0.9); }
.toast.error   { background: rgba(239, 68, 68, 0.9); }
.toast-close {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: 0.8;
  transition: background 0.15s, opacity 0.15s;
}
.toast-close:hover { background: rgba(255, 255, 255, 0.22); opacity: 1; }
/* Inline action button (e.g. Cancel) shown in toasts that aren't auto-only. */
.toast-action {
  margin-right: 36px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.toast-action:hover { background: rgba(255, 255, 255, 0.28); border-color: rgba(255, 255, 255, 0.4); }
.toast--autostart .toast-msg code {
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
}

/* Command Palette */
.command-palette-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  justify-content: center;
  padding-top: 15vh;
  animation: fadeIn 0.15s var(--ease-out);
}
.command-palette-overlay.hidden { display: none; }
.command-palette {
  width: 560px;
  max-height: 400px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: slideInUp 0.2s var(--ease-out);
}
.command-palette-input {
  width: 100%;
  padding: 14px 18px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 15px;
  outline: none;
  font-family: var(--font-ui);
}
.command-palette-input::placeholder { color: var(--text-muted); }
.command-palette-results {
  max-height: 340px;
  overflow-y: auto;
  padding: 6px;
}
.command-palette-item {
  padding: 8px 14px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background var(--transition-fast);
}
.command-palette-item:hover, .command-palette-item.selected { background: var(--bg-active); }
.command-palette-item i { width: 20px; text-align: center; color: var(--text-muted); }

/* ============================================================
   MODE SWITCHER & MODE STATES
   ============================================================ */

/* --- Mode Switcher in titlebar --- */
.mode-switcher {
  display: flex;
  gap: 2px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
}
.mode-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.mode-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.mode-btn.active {
  background: var(--accent-gradient);
  color: var(--text-bright);
  box-shadow: var(--shadow-glow);
}
.mode-btn i { font-size: 11px; }

/* --- Mode visibility helpers --- */
.copilot-only, .autopilot-only, .autoagent-only { display: none !important; }
.mode-copilot .copilot-only { display: inline-flex !important; }
.mode-autopilot .autopilot-only { display: inline-flex !important; }
.mode-autoagent .autoagent-only { display: inline-flex !important; }

/* --- Mode badges in titlebar --- */
.mode-badge {
  display: none !important;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-approvals {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}
.badge-approvals i { font-size: 10px; }
.mode-autopilot .badge-approvals { display: inline-flex !important; }

.badge-ai-active {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}
.badge-ai-active i { font-size: 8px; animation: pulse 2s infinite; }
.mode-autoagent .badge-ai-active { display: inline-flex !important; }

/* Dev server status pill — visibility driven by .state-* classes set from JS,
   not the body-mode scheme like the other badges. Click-to-focus, so it's a
   <button> with reset styling. */
.badge-dev {
  background: none;
  cursor: pointer;
  font-family: inherit;
}
.badge-dev i { font-size: 8px; }
.badge-dev.state-starting {
  display: inline-flex !important;
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.badge-dev.state-starting i { animation: pulse 1.2s infinite; }
.badge-dev.state-running {
  display: inline-flex !important;
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}
.badge-dev.state-running i { animation: pulse 2s infinite; }
.badge-dev.state-failed {
  display: inline-flex !important;
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.35);
}
.badge-dev:hover { filter: brightness(1.15); }

/* --- Status bar mode indicator --- */
.status-center {
  display: flex;
  align-items: center;
  gap: 8px;
}
#statusMode {
  background: var(--accent-gradient);
  color: var(--text-bright);
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* --- Status bar action buttons --- */
.status-action-btn {
  padding: 3px 14px;
  border: none;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition-fast);
  font-family: var(--font-ui);
}
.status-action-btn:not(.status-btn-danger) {
  background: rgba(99, 102, 241, 0.8);
  color: #fff;
}
.status-action-btn:not(.status-btn-danger):hover {
  background: rgba(99, 102, 241, 1);
}
.status-btn-danger {
  background: rgba(239, 68, 68, 0.8);
  color: #fff;
}
.status-btn-danger:hover {
  background: rgba(239, 68, 68, 1);
}

/* --- Mode overlay panels (prompt box only) --- */
.mode-overlay-panel {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 560px;
  max-width: 90vw;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 800;
  overflow: hidden;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.mode-overlay-panel.panel-hide { display: none !important; }
.mode-overlay-panel.panel-show { display: block; animation: slideInUp 0.25s var(--ease-out); }

.overlay-panel-header {
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.overlay-panel-header i { color: var(--accent-light); }
.overlay-close { margin-left: auto; }

.prompt-box-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prompt-box-content textarea {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-code);
  font-size: 13px;
  padding: 12px;
  resize: vertical;
  outline: none;
  transition: border-color var(--transition-fast);
}
.prompt-box-content textarea:focus { border-color: var(--accent-light); }

/* ============================================================
   AUTOPILOT MODE — Flow Panel & Diff/Test View
   ============================================================ */

/* Panel sub-tabs (Flow / Code) */
.panel-sub-tabs {
  display: flex;
  gap: 0;
  width: 100%;
}
.panel-sub-tab {
  flex: 1;
  padding: 8px 12px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-ui);
  text-align: center;
}
.panel-sub-tab:hover { color: var(--text-secondary); }
.panel-sub-tab.active { color: var(--text-primary); border-bottom-color: var(--accent); }

/* Autopilot flow content */
.autopilot-flow-content {
  padding: 16px 10px;
  overflow-y: auto;
  height: calc(100% - 40px);
}

/* Flow chart */
.flow-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.flow-node {
  padding: 8px 20px;
  border: 2px solid var(--border-light);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  min-width: 100px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.flow-terminal { border-radius: 20px; background: var(--bg-secondary); }
.flow-process { border-color: var(--border-light); }
.flow-success { border-color: #22c55e; color: #22c55e; }
.flow-error { border-color: #ef4444; color: #ef4444; }
.flow-arrow { color: var(--text-muted); font-size: 14px; padding: 2px 0; }
.flow-branch { display: flex; gap: 16px; padding: 4px 0; }
.flow-path { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.flow-label { font-size: 10px; font-style: italic; }
.flow-label.true { color: #22c55e; }
.flow-label.false { color: #ef4444; }

/* Autopilot editor view (Diff review & Tests) */
#autopilotEditorView {
  display: none;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-primary);
}

.ap-view-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  background: var(--bg-secondary);
  flex-shrink: 0;
}
.ap-view-tab {
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-ui);
}
.ap-view-tab:hover { color: var(--text-secondary); }
.ap-view-tab.active { color: var(--text-primary); border-bottom-color: var(--accent); }

.ap-view-content {
  display: none;
  flex-direction: column;
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}
.ap-view-content.active { display: flex; }

.ap-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

/* Diff lines */
.diff-lines { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.diff-line {
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 3px solid;
}
.diff-add {
  background: rgba(34, 197, 94, 0.08);
  border-left-color: #22c55e;
  color: #22c55e;
}
.diff-remove {
  background: rgba(239, 68, 68, 0.08);
  border-left-color: #ef4444;
  color: #ef4444;
}
.diff-sign { font-weight: 700; font-size: 15px; min-width: 14px; }

/* Accept / Reject buttons */
.ap-diff-actions { display: flex; gap: 10px; margin-bottom: 24px; }
.btn-ap-accept, .btn-ap-reject {
  padding: 8px 20px;
  border: 2px solid;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--transition-fast);
  font-family: var(--font-ui);
}
.btn-ap-accept {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}
.btn-ap-accept:hover { background: rgba(34, 197, 94, 0.2); }
.btn-ap-reject {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}
.btn-ap-reject:hover { background: rgba(239, 68, 68, 0.2); }

/* Test results */
.test-results-list { display: flex; flex-direction: column; gap: 8px; }
.test-result {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}
.test-pass { color: #22c55e; }
.test-pass i { color: #22c55e; }
.test-new { color: #f59e0b; }
.test-new i { color: #f59e0b; }

/* ============================================================
   AUTOAGENT MODE — Task Panel & Progress Timeline
   ============================================================ */

.autoagent-task-area {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.task-prompt-section {
  padding: 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.task-description {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-primary);
  margin-bottom: 16px;
  font-weight: 500;
}
.btn-execute {
  background: #22c55e;
  color: #fff;
  border: none;
  padding: 10px 28px;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-family: var(--font-ui);
  transition: all var(--transition-fast);
}
.btn-execute:hover { background: #16a34a; transform: translateY(-1px); }

/* Progress timeline */
.task-timeline {
  padding: 20px 20px 20px 36px;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}
.timeline-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 0;
  border-left: 2px solid var(--border);
  margin-left: 0;
  padding-left: 24px;
  position: relative;
}
.timeline-step.completed { border-left-color: #22c55e; }
.timeline-step.running { border-left-color: #3b82f6; }

.step-number {
  position: absolute;
  left: -14px;
  top: 12px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: 2px solid var(--border);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.timeline-step.completed .step-number {
  background: #22c55e;
  border-color: #22c55e;
  color: #fff;
}
.timeline-step.running .step-number {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
  animation: pulse 1.5s infinite;
}

.step-info { flex: 1; }
.step-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.step-time {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 12px;
  margin-left: 6px;
}
.step-detail {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ============================================================
   BOTTOM PANEL — Integrated panels & mode tabs
   ============================================================ */

.integrated-panel-content {
  padding: 10px 14px;
  height: 100%;
  overflow-y: auto;
}
.approval-list { max-height: 100%; overflow-y: auto; }
.approval-empty, .audit-empty {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.approval-empty i, .audit-empty i { font-size: 24px; opacity: 0.3; }

.audit-log-content {
  max-height: 100%;
  overflow-y: auto;
  font-family: var(--font-code);
  font-size: 12px;
}
.audit-entry {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  display: flex;
  gap: 8px;
}
.audit-entry .audit-time { color: var(--text-muted); min-width: 70px; }
.audit-entry .audit-action { color: var(--accent-light); }

/* Mode tabs in bottom panel */
.bottom-tab.mode-tab {
  display: flex;
  align-items: center;
  gap: 5px;
}
.bottom-tab.mode-tab i { font-size: 10px; color: var(--accent-light); }

/* Agent overlay (kept for optional use) */
.agent-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 20, 0.92);
  z-index: 10;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--text-secondary);
  animation: fadeIn 0.3s var(--ease-out);
}
.agent-overlay.active { display: flex; }
.agent-overlay i.overlay-icon {
  font-size: 48px;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: float 3s ease-in-out infinite;
}
.agent-overlay h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}
.agent-overlay p {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 320px;
  text-align: center;
  line-height: 1.6;
}

/* ============================================================
   Modal — promise-based dialog system (replaces alert/prompt/confirm)
   ============================================================ */
.ai-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 14, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ai-modal-overlay.open { opacity: 1; }
.ai-modal-overlay.closing { opacity: 0; }

.ai-modal {
  background: linear-gradient(180deg, var(--bg-elevated, #1e1f35), var(--bg-secondary, #13141f));
  border: 1px solid var(--border-light, rgba(255,255,255,0.1));
  border-radius: 16px;
  min-width: 380px;
  max-width: 520px;
  width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 80px rgba(27, 58, 92, 0.25);
  transform: translateY(12px) scale(0.97);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.18s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.ai-modal-overlay.open .ai-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.ai-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(27, 58, 92, 0.18), transparent 50%);
  pointer-events: none;
  border-radius: inherit;
}

.ai-modal-icon {
  font-size: 28px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px auto 0;
  background: rgba(27, 58, 92, 0.18);
  color: var(--info, #38bdf8);
  box-shadow: 0 0 0 6px rgba(27, 58, 92, 0.08);
  position: relative;
  z-index: 1;
}
.ai-modal-success .ai-modal-icon { color: var(--success, #22c55e); background: rgba(34,197,94,0.15); box-shadow: 0 0 0 6px rgba(34,197,94,0.08); }
.ai-modal-warning .ai-modal-icon { color: var(--warning, #f59e0b); background: rgba(245,158,11,0.15); box-shadow: 0 0 0 6px rgba(245,158,11,0.08); }
.ai-modal-error   .ai-modal-icon { color: var(--danger, #ef4444);  background: rgba(239,68,68,0.15);  box-shadow: 0 0 0 6px rgba(239,68,68,0.08); }
.ai-modal-question .ai-modal-icon { color: var(--info, #38bdf8); }
.ai-modal-edit .ai-modal-icon    { color: #c084fc; background: rgba(192,132,252,0.15); box-shadow: 0 0 0 6px rgba(192,132,252,0.08); }

.ai-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 0;
  position: relative;
  z-index: 1;
}
.ai-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #e2e4f0);
  letter-spacing: -0.2px;
  text-align: center;
  flex: 1;
}
.ai-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-muted, #505370);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.15s ease;
}
.ai-modal-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary, #e2e4f0);
}

.ai-modal-body {
  padding: 16px 28px 4px;
  color: var(--text-secondary, #8b8fa8);
  font-size: 14px;
  line-height: 1.55;
  text-align: center;
  position: relative;
  z-index: 1;
  overflow-y: auto;
}
.ai-modal-message {
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-modal-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  text-align: left;
}
.ai-modal-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, #8b8fa8);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-bottom: -6px;
}
.ai-modal-input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text-primary, #e2e4f0);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: all 0.15s ease;
  width: 100%;
  box-sizing: border-box;
}
.ai-modal-input::placeholder { color: var(--text-muted, #505370); }
.ai-modal-input:focus {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--accent-light, #2a5a8c);
  box-shadow: 0 0 0 3px rgba(27, 58, 92, 0.35);
}
.ai-modal-input.error {
  border-color: var(--danger, #ef4444);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
  animation: ai-modal-shake 0.35s ease;
}
.ai-modal-textarea {
  resize: vertical;
  min-height: 80px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  line-height: 1.5;
}

.ai-modal-actions {
  display: flex;
  gap: 10px;
  padding: 20px 24px 22px;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.ai-modal-btn {
  flex: 1;
  max-width: 180px;
  padding: 10px 20px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary, #e2e4f0);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.2px;
}
.ai-modal-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-light, rgba(255,255,255,0.16));
  transform: translateY(-1px);
}
.ai-modal-btn:active { transform: translateY(0); }
.ai-modal-btn.primary {
  background: var(--accent-gradient, linear-gradient(135deg, #0d2137, #2a5a8c));
  border-color: transparent;
  color: white;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(27, 58, 92, 0.4);
}
.ai-modal-btn.primary:hover {
  filter: brightness(1.15);
  box-shadow: 0 6px 20px rgba(27, 58, 92, 0.55);
}
.ai-modal-btn.danger {
  background: linear-gradient(135deg, #b91c1c, #ef4444);
  border-color: transparent;
  color: white;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3);
}
.ai-modal-btn.danger:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.45);
}
.ai-modal-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.5);
}

/* ============================================================
   GitHub clone modal — Connect button + repo picker. Built on
   the existing .ai-modal* primitives, with GitHub-specific chrome.
   ============================================================ */
.gh-clone-modal, .gh-picker-modal {
  min-width: 480px;
  max-width: 560px;
}
.gh-picker-modal { max-width: 640px; }

.gh-connect-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: #24292f;
  color: #fff;
  border: 0;
  border-radius: 8px !important;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms var(--ease-out), transform 80ms var(--ease-out);
  margin-bottom: 12px;
}
.gh-connect-btn:hover:not(:disabled) { background: #2f363d; transform: translateY(-1px); }
.gh-connect-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.gh-connect-btn i { font-size: 18px; }

.gh-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 12px;
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.gh-divider::before, .gh-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.gh-disconnect {
  color: var(--text-muted);
  text-decoration: underline;
  font-size: 11px;
}
.gh-disconnect:hover { color: var(--danger, #ef4444); }

.gh-filter { margin-bottom: 8px; }

.gh-repo-list {
  max-height: 360px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 4px;
}
.gh-repo-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 6px !important;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: background 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.gh-repo-row:hover {
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.4);
}
.gh-repo-icon {
  width: 24px;
  text-align: center;
  color: var(--text-muted);
  flex-shrink: 0;
  padding-top: 2px;
}
.gh-repo-icon .fa-lock { color: var(--warning, #f59e0b); }
.gh-repo-meta { flex: 1; min-width: 0; }
.gh-repo-name {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gh-repo-desc {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gh-repo-stats {
  display: flex;
  gap: 12px;
  font-size: 10px;
  color: var(--text-muted);
}
.gh-repo-stats span { display: inline-flex; align-items: center; gap: 4px; }
.gh-empty {
  text-align: center;
  padding: 32px;
  color: var(--text-muted);
  font-size: 13px;
}

@keyframes ai-modal-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@media (max-width: 480px) {
  .ai-modal { min-width: 0; width: calc(100vw - 32px); }
  .ai-modal-actions { flex-direction: column-reverse; }
  .ai-modal-btn { max-width: none; }
}

/* -------- MCP Connector modal -------- */
.mcp-modal { width: 560px; max-width: calc(100vw - 32px); }
.mcp-modal .ai-modal-title i { margin-right: 6px; opacity: 0.85; }

.mcp-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--text-secondary, #94a3b8);
}
.mcp-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mcp-badge-ok   { background: rgba(34,197,94,0.15);  color: #4ade80; }
.mcp-badge-warn { background: rgba(245,158,11,0.15); color: #fbbf24; }
.mcp-badge-off  { background: rgba(148,163,184,0.15); color: #94a3b8; }
.mcp-project    { margin-left: auto; font-size: 12px; }
.mcp-project code { font-family: var(--font-mono, monospace); }

.mcp-row { margin-bottom: 14px; }
.mcp-row > label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #94a3b8);
  margin-bottom: 4px;
}
.mcp-input-group {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--border, #2a3344);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-input, #0f1521);
}
.mcp-input-group input {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--text, #e2e8f0);
  padding: 8px 10px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12.5px;
  outline: none;
}
.mcp-icon-btn {
  background: rgba(255,255,255,0.04);
  border: 0;
  border-left: 1px solid var(--border, #2a3344);
  color: var(--text-secondary, #94a3b8);
  padding: 0 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.mcp-icon-btn:hover  { background: rgba(255,255,255,0.08); color: var(--text, #e2e8f0); }
.mcp-icon-btn.copied { color: #4ade80; }

.mcp-help {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 6px;
  background: rgba(148,163,184,0.08);
  font-size: 12.5px;
  color: var(--text-secondary, #94a3b8);
  margin-bottom: 14px;
  line-height: 1.55;
}
/* Icon stays at natural size; everything else fills remaining width */
.mcp-help > i { flex-shrink: 0; padding-top: 2px; }
.mcp-help > .mcp-help-content,
.mcp-help > ol { flex: 1; min-width: 0; }
.mcp-help-content { display: block; }
.mcp-help-content ol { margin: 8px 0 0 18px; padding: 0; }
.mcp-help-content li { margin-bottom: 6px; word-break: break-word; }
.mcp-help-content li:last-child { margin-bottom: 0; }
.mcp-help code { background: rgba(0,0,0,0.25); padding: 1px 5px; border-radius: 3px; font-size: 12px; word-break: break-all; }
.mcp-help-warn { background: rgba(245,158,11,0.10); color: #fbbf24; }
.mcp-help-warn code { background: rgba(0,0,0,0.3); color: #fde68a; }
.mcp-help-text { font-size: 12px; color: var(--text-secondary, #94a3b8); margin: 6px 0; }

.mcp-steps {
  margin: 12px 0 4px;
  padding-left: 22px;
  font-size: 13px;
  color: var(--text, #e2e8f0);
  line-height: 1.7;
}
.mcp-steps li { margin-bottom: 6px; }
.mcp-steps code {
  background: rgba(0,0,0,0.3);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12px;
  font-family: var(--font-mono, ui-monospace, monospace);
}

.mcp-details { margin-top: 8px; }
.mcp-details summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-secondary, #94a3b8);
  padding: 6px 0;
}
.mcp-details summary:hover { color: var(--text, #e2e8f0); }
.mcp-codeblock {
  position: relative;
  border: 1px solid var(--border, #2a3344);
  border-radius: 6px;
  background: var(--bg-input, #0f1521);
  margin-top: 6px;
}
.mcp-codeblock pre {
  margin: 0;
  padding: 10px 12px;
  max-height: 200px;
  overflow: auto;
  font-size: 12px;
}
.mcp-codeblock code { font-family: var(--font-mono, ui-monospace, monospace); color: var(--text, #e2e8f0); }
.mcp-codeblock-copy {
  position: absolute;
  top: 4px;
  right: 4px;
  border-left: 0 !important;
  background: rgba(0,0,0,0.4) !important;
  border-radius: 4px;
}

/* ============================================================
   Searchable combobox — wraps the native #aiModelSelect with a
   click-to-open popup that has a search field + filtered list.
   Native <select> stays in the DOM (hidden) so existing code that
   reads .value / listens to 'change' keeps working unchanged.
   ============================================================ */
.ss-wrap {
  position: relative;
  display: inline-flex;
  flex: 1;
  min-width: 0;
}
.ss-native-hidden {
  /* Keep the select selectable to assistive tech but visually gone —
     CSS-tricks "screen-reader-only" pattern. */
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  pointer-events: none;
}
.ss-button {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  min-width: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  border-radius: 8px;
  color: var(--text-primary, #e2e4f0);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  outline: none;
  transition: background-color 0.15s, border-color 0.15s;
}
.ss-button:hover {
  background-color: rgba(255,255,255,0.07);
  border-color: var(--border-light, rgba(255,255,255,0.18));
}
.ss-button .ss-value {
  flex: 1;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.ss-button .ss-chevron {
  opacity: 0.6;
  font-size: 10px;
  flex-shrink: 0;
}
.ss-popup {
  position: absolute;
  /* Anchor to the BOTTOM of the trigger and grow upward — the model bar
     sits near the bottom of the AI panel, so growing downward gets clipped
     by the chat input. Negative-bottom puts the popup ABOVE the button. */
  bottom: calc(100% + 4px);
  /* Anchor left edge to the trigger and grow rightward up to 280px so the
     full model name fits on one line (per the red-box-width target in user
     feedback). max-width clamps to viewport so it never escapes the page
     entirely. The popup CAN extend past the AI panel's right edge into the
     editor area — user explicitly wants that for readability. */
  left: 0;
  min-width: 280px;
  max-width: calc(100vw - 24px);
  width: max-content;
  z-index: 9999;
  background: var(--bg-elevated, #1e1f35);
  border: 1px solid var(--border, rgba(255,255,255,0.16));
  border-radius: 8px;
  box-shadow: 0 -12px 32px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  max-height: 360px;
  overflow: hidden;
}
.ss-popup[hidden] { display: none; }
.ss-search {
  margin: 8px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  border-radius: 6px;
  color: var(--text-primary, #e2e4f0);
  font: inherit;
  font-size: 12px;
  outline: none;
}
.ss-search:focus {
  border-color: var(--accent-light, #2a5a8c);
  box-shadow: 0 0 0 2px rgba(27,58,92,0.3);
}
.ss-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0 8px;
}
.ss-group {
  padding: 6px 12px 2px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-secondary, #8b8fa8);
  background: rgba(255,255,255,0.02);
}
.ss-item {
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.35;
  cursor: pointer;
  color: var(--text-primary, #e2e4f0);
  /* Wrap long names to a 2nd line instead of truncating with … */
  white-space: normal;
  word-break: break-word;
}
.ss-item:hover { background: rgba(91,158,255,0.10); }
.ss-item.ss-selected { background: rgba(91,158,255,0.18); color: var(--accent, #5b9eff); font-weight: 600; }
.ss-hidden { display: none !important; }

/* ============================================================
   AI Model Selector Bar (provider + model + refresh row beneath header)
   ============================================================ */
.ai-model-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
  background: rgba(255, 255, 255, 0.02);
  font-size: 12px;
}
.ai-model-bar > i {
  color: var(--accent-light, #2a5a8c);
  font-size: 12px;
}
.ai-model-select {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--text-primary, #e2e4f0);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  outline: none;
  transition: all 0.15s ease;
  text-overflow: ellipsis;
  min-width: 0;
}
.ai-model-select:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--border-light, rgba(255,255,255,0.16));
}
.ai-model-select:focus {
  border-color: var(--accent-light, #2a5a8c);
  box-shadow: 0 0 0 2px rgba(27, 58, 92, 0.3);
}
.ai-model-select optgroup {
  background: var(--bg-secondary, #13141f);
  color: var(--text-secondary, #8b8fa8);
  font-style: normal;
  font-weight: 600;
}
.ai-model-select option {
  background: var(--bg-elevated, #1e1f35);
  color: var(--text-primary, #e2e4f0);
  padding: 4px;
}

/* ============================================================
   Project switcher (titlebar)
   ============================================================ */
.project-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;
  margin-left: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 8px;
  height: 28px;
}
.project-switcher > i {
  color: var(--accent-light, #2a5a8c);
  font-size: 11px;
}
.project-select {
  background: transparent;
  border: none;
  color: var(--text-primary, #e2e4f0);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  max-width: 200px;
  text-overflow: ellipsis;
}
.project-select:focus { color: var(--text-bright, #ffffff); }
.project-select option {
  background: var(--bg-elevated, #1e1f35);
  color: var(--text-primary, #e2e4f0);
  padding: 4px;
}
#btnDeleteProject {
  font-size: 10px;
  opacity: 0.5;
  transition: all 0.15s ease;
}
#btnDeleteProject:hover {
  opacity: 1;
  color: var(--danger, #ef4444);
}

/* ============================================================
   Preview URL bar
   ============================================================ */
.preview-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-secondary, #13141f);
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
}
.preview-url-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 6px;
  padding: 5px 10px;
  color: var(--text-primary, #e2e4f0);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 12px;
  outline: none;
  transition: all 0.15s ease;
  min-width: 0;
}
.preview-url-input::placeholder { color: var(--text-muted, #505370); }
.preview-url-input:focus {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--accent-light, #2a5a8c);
  box-shadow: 0 0 0 2px rgba(27, 58, 92, 0.3);
}

/* ============================================================
   AI tool-call approval card
   ============================================================ */
.ai-approval-card .ai-msg-bubble {
  background: linear-gradient(180deg, rgba(192,132,252,0.10), rgba(56,189,248,0.06));
  border: 1px solid rgba(192,132,252,0.25);
  padding: 12px 14px;
  border-radius: 12px;
}
.ai-approval-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary, #8b8fa8);
  margin-bottom: 8px;
}
.ai-approval-head i { color: #c084fc; }
.ai-approval-head strong {
  color: var(--text-primary, #e2e4f0);
  font-weight: 600;
  font-size: 13px;
}
.ai-approval-head code {
  background: rgba(0,0,0,0.25);
  border-radius: 6px;
  padding: 2px 8px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px;
  color: var(--info, #38bdf8);
}
.ai-approval-summary {
  font-size: 12px;
  color: var(--text-secondary, #8b8fa8);
  margin-bottom: 10px;
  line-height: 1.5;
}
.ai-approval-diff {
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 8px;
  padding: 8px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 12px;
  max-height: 240px;
  overflow: auto;
  margin-bottom: 12px;
}
.ai-diff-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 2px 4px;
  border-radius: 4px;
}
.ai-diff-row-old { background: rgba(239, 68, 68, 0.10); }
.ai-diff-row-new { background: rgba(34, 197, 94, 0.10); }
.ai-diff-row pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-primary, #e2e4f0);
  font-size: 12px;
  flex: 1;
}
.ai-diff-marker {
  font-weight: 700;
  width: 10px;
  flex: 0 0 auto;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
}
.ai-diff-row-old .ai-diff-marker { color: var(--danger, #ef4444); }
.ai-diff-row-new .ai-diff-marker { color: var(--success, #22c55e); }
.ai-approval-write pre {
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 8px;
  padding: 10px;
  font-size: 12px;
  max-height: 240px;
  overflow: auto;
  color: var(--text-primary, #e2e4f0);
  margin: 0 0 12px 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-approval-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.ai-approval-actions .ai-modal-btn {
  flex: 0 0 auto;
  max-width: none;
  padding: 6px 14px;
  font-size: 12px;
}
.ai-approval-result {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ai-approval-result.approved {
  background: rgba(34, 197, 94, 0.15);
  color: var(--success, #22c55e);
}
.ai-approval-result.rejected {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger, #ef4444);
}

/* ============================================================
   AI thinking / loading — magical wand + cycling spell text
   ============================================================ */
.ai-wand-avatar {
  position: relative;
  background: radial-gradient(circle at 30% 30%, rgba(192,132,252,0.30), rgba(56,189,248,0.10) 70%);
  color: #c084fc;
  overflow: visible;
}
.ai-wand-avatar i {
  display: inline-block;
  animation: ai-wand-wave 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(192, 132, 252, 0.6));
}
@keyframes ai-wand-wave {
  0%, 100% { transform: rotate(-12deg) scale(1); }
  50%      { transform: rotate(18deg)  scale(1.08); }
}
.ai-spark {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #fde68a;
  box-shadow: 0 0 8px #fde68a, 0 0 16px rgba(192,132,252,0.5);
  opacity: 0;
  animation: ai-spark-pop 2.4s ease-in-out infinite;
}
.ai-spark-1 { top: 4px;  right: 6px;  animation-delay: 0s; }
.ai-spark-2 { bottom: 4px; right: 12px; animation-delay: 0.8s; }
.ai-spark-3 { top: 50%;  left: 4px;   animation-delay: 1.6s; background: #c084fc; }
@keyframes ai-spark-pop {
  0%, 100%   { opacity: 0; transform: scale(0.5); }
  10%, 30%   { opacity: 1; transform: scale(1.2); }
  60%        { opacity: 0; transform: scale(0.3) translateY(-8px); }
}

.ai-thinking-bubble {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(120deg, rgba(192,132,252,0.10), rgba(56,189,248,0.08));
  border: 1px solid rgba(192,132,252,0.20);
}

/* Stacked thinking layout: orb on top, spell text underneath, centered.
   !important on flex-direction because the parent .ai-msg sets row layout. */
.ai-thinking-stacked {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px;
  padding: 4px 0;
}
.ai-thinking-stacked .ai-thinking-orb {
  position: relative;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  /* Outer halo: scaled down proportionally with the smaller orb so the glow
     still reads as a halo and not a separate light source. */
  box-shadow:
    0 0 0 1px rgba(192, 132, 252, 0.25),
    0 0 14px 3px rgba(139, 92, 246, 0.35),
    0 0 36px 8px rgba(139, 92, 246, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  animation: ai-orb-pulse 3.6s ease-in-out infinite;
}
.ai-thinking-stacked .ai-orb-img {
  width: 100%; height: 100%;
  object-fit: cover;          /* fill the circle edge-to-edge, no letterboxing */
  object-position: center;
  display: block;
  /* Float independently of the container's pulse so the motion feels alive */
  animation: ai-orb-float 4.2s ease-in-out infinite;
}
@keyframes ai-orb-float {
  0%, 100% { transform: translateY(0)    scale(1);    }
  50%      { transform: translateY(-2px) scale(1.02); }
}
@keyframes ai-orb-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(192, 132, 252, 0.25),
      0 0 14px 3px rgba(139, 92, 246, 0.35),
      0 0 36px 8px rgba(139, 92, 246, 0.18),
      inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(192, 132, 252, 0.45),
      0 0 20px 5px rgba(139, 92, 246, 0.55),
      0 0 48px 14px rgba(139, 92, 246, 0.28),
      inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  }
}
.ai-thinking-stacked .ai-thinking-bubble {
  background: transparent;
  border: 0;
  padding: 0;
  /* Stack the spell line and the live path line vertically, centered. */
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
/* The "spell + dots" line stays inline as one row inside the column. */
.ai-thinking-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ai-thinking-text {
  font-size: 11px;
  color: var(--text-secondary, #8b8fa8);
  font-style: italic;
  letter-spacing: 0.2px;
  transition: opacity 0.18s ease;
  opacity: 1;
  background: linear-gradient(90deg, #c084fc, #38bdf8, #c084fc);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ai-shimmer 3s linear infinite;
}
.ai-thinking-text.ai-thinking-fading { opacity: 0; }

/* Live tool-call line under the rotating spell. Shows the file the AI is
   currently reading/editing/searching, or just the tool name when no path
   is available. Empty by default; the chat polls /api/ai/progress while
   the loader is visible and fills this in. Sits centered BELOW the spell
   row inside the stacked bubble. */
.ai-thinking-action {
  font-size: 10px;
  font-family: var(--font-code);
  color: var(--text-muted, #505370);
  opacity: 0.85;
  word-break: break-all;
  letter-spacing: 0.2px;
  text-align: center;
  max-width: 300px;
  line-height: 1.3;
}
.ai-thinking-action:empty { display: none; }
.ai-thinking-text.ai-thinking-stalled {
  color: #f59e0b;
  -webkit-text-fill-color: #f59e0b;
  background: none;
  animation: none;
}
@keyframes ai-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.ai-thinking-dots {
  display: inline-flex;
  gap: 3px;
}
.ai-thinking-dots > span {
  width: 5px; height: 5px; border-radius: 50%;
  background: #c084fc;
  opacity: 0.25;
  animation: ai-tdot 1.2s infinite;
}
.ai-thinking-dots > span:nth-child(2) { animation-delay: 0.15s; }
.ai-thinking-dots > span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-tdot {
  0%,80%,100% { opacity: 0.25; transform: translateY(0); }
  40%         { opacity: 1;    transform: translateY(-4px); }
}

/* ============================================================
   AI markdown — readable code blocks, lists, headers, paragraphs
   ============================================================ */
.ai-msg-bubble {
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.ai-msg.assistant .ai-msg-bubble {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-primary, #e2e4f0);
}
.ai-msg-bubble p {
  margin: 0 0 10px 0;
}
.ai-msg-bubble p:last-child { margin-bottom: 0; }
.ai-msg-bubble h1,
.ai-msg-bubble h2,
.ai-msg-bubble h3,
.ai-msg-bubble h4 {
  margin: 14px 0 8px 0;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--text-bright, #ffffff);
  line-height: 1.3;
}
.ai-msg-bubble h1 { font-size: 17px; }
.ai-msg-bubble h2 { font-size: 15px; }
.ai-msg-bubble h3 { font-size: 14px; color: #c084fc; }
.ai-msg-bubble h4 { font-size: 13px; color: #38bdf8; }
.ai-msg-bubble h1:first-child,
.ai-msg-bubble h2:first-child,
.ai-msg-bubble h3:first-child,
.ai-msg-bubble h4:first-child { margin-top: 0; }

.ai-msg-bubble ul,
.ai-msg-bubble ol {
  margin: 0 0 10px 0;
  padding-left: 22px;
}
.ai-msg-bubble li {
  margin: 3px 0;
  line-height: 1.5;
}
.ai-msg-bubble ul li::marker { color: var(--accent-light, #2a5a8c); }
.ai-msg-bubble ol li::marker { color: #c084fc; font-weight: 600; }

.ai-msg-bubble strong { color: var(--text-bright, #ffffff); font-weight: 600; }
.ai-msg-bubble em     { color: var(--text-secondary, #8b8fa8); }

.ai-msg-bubble a {
  color: #38bdf8;
  text-decoration: none;
  border-bottom: 1px dashed rgba(56,189,248,0.5);
}
.ai-msg-bubble a:hover { color: #7dd3fc; border-bottom-color: #7dd3fc; }

.ai-inline-code {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #fde68a;
  padding: 1px 6px;
  border-radius: 5px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 12px;
  white-space: nowrap;
}

.ai-code-block {
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  margin: 10px 0;
  overflow: hidden;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}
.ai-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px 4px 12px;
  background: rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 10.5px;
}
.ai-code-lang {
  color: var(--text-muted, #505370);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}
.ai-code-copy {
  background: transparent;
  border: none;
  color: var(--text-muted, #505370);
  cursor: pointer;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 5px;
  transition: all 0.15s ease;
}
.ai-code-copy:hover { color: var(--text-bright, #fff); background: rgba(255,255,255,0.06); }
.ai-code-copy.copied { color: var(--success, #22c55e); }
.ai-code-block pre {
  margin: 0;
  padding: 10px 12px;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-primary, #e2e4f0);
  white-space: pre;
}
.ai-code-block pre code {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  white-space: pre !important;
  color: inherit !important;
}

/* ============================================================
   AI markdown tables
   ============================================================ */
.ai-msg-bubble .ai-table {
  border-collapse: collapse;
  margin: 12px 0;
  width: 100%;
  font-size: 12.5px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.22);
}
.ai-msg-bubble .ai-table thead {
  background: linear-gradient(180deg, rgba(192,132,252,0.18), rgba(192,132,252,0.08));
}
.ai-msg-bubble .ai-table th {
  color: var(--text-bright, #ffffff);
  font-weight: 600;
  text-align: left;
  padding: 8px 12px;
  letter-spacing: 0.3px;
  border-bottom: 1px solid rgba(192, 132, 252, 0.25);
  white-space: nowrap;
}
.ai-msg-bubble .ai-table td {
  padding: 7px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text-primary, #e2e4f0);
  vertical-align: top;
  line-height: 1.5;
}
.ai-msg-bubble .ai-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.025);
}
.ai-msg-bubble .ai-table tbody tr:hover {
  background: rgba(56, 189, 248, 0.06);
}
.ai-msg-bubble .ai-table code,
.ai-msg-bubble .ai-table .ai-inline-code {
  font-size: 11.5px;
  padding: 0 4px;
  white-space: normal;
}

/* ============================================================
   Flat / squared design override — no curves anywhere
   ============================================================ */
*,
*::before,
*::after {
  border-radius: 0 !important;
}

/* Exception: every AI orb / avatar image stays circular (otherwise the
   global no-curves rule above would render them as hard-edged squares).
   Covers: thinking-state big orb, activity-bar button, titlebar toggle,
   and per-message assistant avatars. */
.ai-thinking-orb,
.ai-thinking-orb .ai-orb-img,
.ai-icon-img,
.ai-avatar,
.ai-msg-avatar,
.ai-wand-avatar {
  border-radius: 50% !important;
}

/* Ensure the small avatar containers actually clip their image to a circle */
.ai-avatar,
.ai-msg-avatar,
.ai-wand-avatar {
  overflow: hidden !important;
}

/* Exception: active activity-bar tile keeps rounded LEFT corners; the curve
   cutout pseudo-elements stay circular. Must override the earlier 12px rule
   AND the global no-curves wipe. */
.activity-btn.active {
  border-radius: 14px 0 0 14px !important;
}
.activity-btn.active::before,
.activity-btn.active::after {
  border-radius: 50% !important;
}

/* Make the activity-bar opaque (override the glassmorphism rule) and have
   the curve-cutout circles read from the same CSS variable as the bar so
   they always blend invisibly — across every theme (Dark, Midnight, Ocean,
   Forest, Purple, Pink). Each theme overrides --bg-secondary, so this
   automatically tracks the active theme. */
:root:not([data-theme="light"]) #activity-bar {
  background: var(--bg-secondary) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
:root:not([data-theme="light"]) .activity-btn.active::before,
:root:not([data-theme="light"]) .activity-btn.active::after {
  background: var(--bg-secondary) !important;
}

/* Hide tab-bar and breadcrumb when they have no real content. Defends against
   any code path that sets `style.display = ''` and would otherwise reveal an
   empty bar at the top of the editor area. */
#tabBar:not(:has(.tab)) { display: none !important; }
#breadcrumb:empty       { display: none !important; }

/* ============================================================
   Theme button + popover (titlebar, beside Copilot mode switcher)
   ============================================================ */
.theme-wrap { position: relative; margin-right: 8px; }
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.theme-toggle-btn:hover {
  background: var(--bg-active);
  color: var(--text-primary);
  border-color: var(--accent-light);
}
.theme-toggle-btn i { font-size: 13px; }
.theme-toggle-btn .theme-caret { font-size: 9px; opacity: 0.7; }
.theme-toggle-btn .theme-label { font-weight: 500; }

.theme-popover {
  position: fixed;                /* escape any parent stacking context */
  top: 48px;                      /* sit just below the titlebar */
  right: 12px;
  z-index: 99999;                 /* on top of everything — including modals */
  width: 290px;
  padding: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6);
  flex-direction: column;
  gap: 12px;
  display: none;                  /* hidden by default — JS adds .open to show */
}
.theme-popover.open { display: flex !important; }
.tp-section { display: flex; flex-direction: column; gap: 6px; }
.tp-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #94a3b8);
}
.tp-swatches { display: flex; flex-wrap: nowrap; gap: 5px; justify-content: space-between; }
.tp-swatch {
  width: 30px; height: 30px;
  flex-shrink: 0;
  border: 2px solid var(--border);
  cursor: pointer;
  position: relative;
  padding: 0;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.tp-swatch:hover { transform: scale(1.08); border-color: var(--accent-light); }
.tp-swatch.active { border-color: var(--accent); border-width: 2px; }
.tp-swatch .tp-check {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 16px; height: 16px;
  background: rgba(56, 189, 248, 0.95);
  color: #fff;
  font-size: 8px;
  display: none;
  align-items: center;
  justify-content: center;
}
.tp-swatch.active .tp-check { display: flex; }

.tp-sizes {
  display: flex;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  overflow: hidden;
}
.tp-size-btn {
  flex: 1;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}
.tp-size-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.tp-size-btn.active { background: var(--accent); color: #fff; }

/* Collapsible Settings sections — uses native <details>/<summary>. JS in
   app.js _initAccordions() rebinds toggle events to persist state in
   localStorage so each section's expand/collapse survives a page reload. */
.setting-accordion {
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
  margin: 0;
  padding: 0;
}
.setting-accordion[open] {
  background: rgba(255,255,255,0.015);
}
.setting-accordion-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  /* Remove default <summary> triangle */
}
.setting-accordion-header::-webkit-details-marker { display: none; }
.setting-accordion-header > span { flex: 1; }
.setting-accordion-header:hover { background: rgba(255,255,255,0.04); }
.setting-accordion-chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.18s ease;
  opacity: 0.6;
}
.setting-accordion[open] > .setting-accordion-header > .setting-accordion-chevron {
  transform: rotate(180deg);
}
.setting-accordion-body {
  padding: 6px 14px 14px 14px;
}
.setting-accordion-body .setting-group {
  margin-bottom: 10px;
}
.setting-accordion-body .setting-group:last-child { margin-bottom: 0; }

/* Connections panel — list of AI providers (Claude, Gemini, Bedrock) with
   OAuth/connection status + a Connect button that launches the CLI auth
   command in a new terminal tab. Same compact row look as the Account
   section above it so the Settings panel feels consistent. */
.connections-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.connection-loading {
  font-size: 11px;
  opacity: 0.6;
  padding: 8px 0;
  text-align: center;
}
.connection-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 6px;
}
.connection-row .conn-icon {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.connection-row .conn-icon.conn-claude   { background: #c8784f; }
.connection-row .conn-icon.conn-gemini   { background: #4285f4; }
.connection-row .conn-icon.conn-agy      { background: #8e51ff; font-size: 9px; }
.connection-row .conn-icon.conn-bedrock  { background: #ff9900; color: #1c1c1c; }
.connection-row .conn-meta {
  flex: 1;
  min-width: 0;
}
.connection-row .conn-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.connection-row .conn-detail {
  font-size: 10px;
  opacity: 0.7;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.connection-row .conn-status {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  flex-shrink: 0;
}
.connection-row .conn-status.ok   { background: rgba(52, 199, 89, 0.18); color: #34c759; }
.connection-row .conn-status.no   { background: rgba(255, 159, 10, 0.18); color: #ff9f0a; }
.connection-row .conn-status.miss { background: rgba(255, 69, 58, 0.18);  color: #ff453a; }
.connection-row .conn-btn {
  background: var(--accent, #5b9eff);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: filter 0.15s;
}
.connection-row .conn-btn:hover { filter: brightness(1.1); }
.connection-row .conn-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.connection-row .conn-btn.secondary {
  background: transparent;
  border: 1px solid var(--border, rgba(255,255,255,0.16));
  color: var(--text-primary, #e2e4f0);
}

/* Appearance toggle + Text Size buttons inside the Settings panel.
   Match the visual style of the original popover so muscle memory carries
   over, just laid out as full-width rows inside .setting-group. */
.appearance-toggle, .text-size-row {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
}
.appearance-btn, .size-btn {
  flex: 1;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  border-radius: calc(var(--radius-sm) - 2px);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-ui);
  transition: background 0.15s ease, color 0.15s ease;
}
.appearance-btn:hover, .size-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.appearance-btn.active, .size-btn.active {
  background: var(--accent);
  color: #fff;
}

/* ============================================================
   DATABASES panel — tile browser (sidebar-panel#panel-supabase)
   Two views co-exist: #dbBrowser (collapsible categorized grid)
   and #dbServiceView (shown when a tile is clicked).
   ============================================================ */
.db-container { padding: 8px; height: 100%; overflow-y: auto; }
.db-search {
  position: relative;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.db-search > i {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  pointer-events: none;
}
.db-search input {
  width: 100%;
  padding: 6px 10px 6px 30px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 12px;
  font-family: var(--font-ui);
  outline: none;
  transition: border-color 0.15s ease;
}
.db-search input:focus { border-color: var(--accent); }
.db-search input::placeholder { color: var(--text-muted); }
/* Native search-input clear button (X) — kept but lightly themed */
.db-search input::-webkit-search-cancel-button { cursor: pointer; }
.db-section { margin-bottom: 14px; }
.db-section-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: var(--font-ui);
  transition: color 0.15s ease;
}
.db-section-header:hover { color: var(--text-primary); }
.db-section-header .db-chev {
  width: 12px; height: 12px;
  transition: transform 0.15s ease;
}
.db-section.collapsed .db-chev { transform: rotate(-90deg); }
.db-section.collapsed .db-tiles { display: none; }

.db-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 4px;
  padding: 0 2px;
}
.db-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 10px;
  font-weight: 500;
  font-family: var(--font-ui);
  padding: 6px 4px;
  transition: all 0.15s ease;
  overflow: hidden;
}
.db-tile i { width: 22px; height: 22px; }
.db-tile span {
  width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-tile:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}

/* Tinted gradient backgrounds — distinct color per service like the
   user's reference screenshot. Each uses a soft gradient overlay so
   the foreground icon + label stay legible on every theme. */
.db-tile-emerald { background: linear-gradient(135deg, rgba(52,211,153,0.22), rgba(16,185,129,0.10)); border-color: rgba(52,211,153,0.30); }
.db-tile-emerald i { color: #34d399; }
.db-tile-steel { background: linear-gradient(135deg, rgba(148,163,184,0.22), rgba(100,116,139,0.10)); border-color: rgba(148,163,184,0.30); }
.db-tile-steel i { color: #cbd5e1; }
.db-tile-amber { background: linear-gradient(135deg, rgba(251,146,60,0.25), rgba(234,88,12,0.10)); border-color: rgba(251,146,60,0.30); }
.db-tile-amber i { color: #fb923c; }
.db-tile-orange { background: linear-gradient(135deg, rgba(249,115,22,0.25), rgba(234,88,12,0.10)); border-color: rgba(249,115,22,0.30); }
.db-tile-orange i { color: #fb923c; }
.db-tile-yellow { background: linear-gradient(135deg, rgba(250,204,21,0.25), rgba(202,138,4,0.10)); border-color: rgba(250,204,21,0.30); }
.db-tile-yellow i { color: #facc15; }
.db-tile-navy { background: linear-gradient(135deg, rgba(59,130,246,0.22), rgba(29,78,216,0.10)); border-color: rgba(59,130,246,0.30); }
.db-tile-navy i { color: #60a5fa; }
.db-tile-red { background: linear-gradient(135deg, rgba(239,68,68,0.22), rgba(185,28,28,0.10)); border-color: rgba(239,68,68,0.30); }
.db-tile-red i { color: #f87171; }
.db-tile-purple { background: linear-gradient(135deg, rgba(168,85,247,0.22), rgba(126,34,206,0.10)); border-color: rgba(168,85,247,0.30); }
.db-tile-purple i { color: #c084fc; }
.db-tile-pink { background: linear-gradient(135deg, rgba(236,72,153,0.22), rgba(190,24,93,0.10)); border-color: rgba(236,72,153,0.30); }
.db-tile-pink i { color: #f472b6; }
/* New tints for the expanded SQL/RDBMS section */
.db-tile-teal { background: linear-gradient(135deg, rgba(20,184,166,0.22), rgba(13,148,136,0.10)); border-color: rgba(20,184,166,0.30); }
.db-tile-teal i { color: #2dd4bf; }
.db-tile-bronze { background: linear-gradient(135deg, rgba(180,83,9,0.22), rgba(120,53,15,0.10)); border-color: rgba(180,83,9,0.30); }
.db-tile-bronze i { color: #d97706; }
.db-tile-sky { background: linear-gradient(135deg, rgba(56,189,248,0.22), rgba(2,132,199,0.10)); border-color: rgba(56,189,248,0.30); }
.db-tile-sky i { color: #38bdf8; }
.db-tile-cyan { background: linear-gradient(135deg, rgba(6,182,212,0.25), rgba(8,145,178,0.10)); border-color: rgba(6,182,212,0.35); }
.db-tile-cyan i { color: #22d3ee; }
.db-tile-indigo { background: linear-gradient(135deg, rgba(99,102,241,0.22), rgba(67,56,202,0.10)); border-color: rgba(99,102,241,0.30); }
.db-tile-indigo i { color: #818cf8; }
.db-tile-leaf { background: linear-gradient(135deg, rgba(76,175,80,0.22), rgba(46,125,50,0.10)); border-color: rgba(76,175,80,0.30); }
.db-tile-leaf i { color: #66bb6a; }

.db-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  margin-bottom: 10px;
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 11px;
  font-family: var(--font-ui);
  transition: all 0.15s ease;
}
.db-back-btn:hover { color: var(--text-primary); border-color: var(--accent); }
.db-back-btn i { width: 14px; height: 14px; }

/* ============================================================
   Extra dark-variant themes (light theme is defined further below
   along with its chrome overrides).
   ============================================================ */
html[data-theme="midnight"] {
  --bg-void:      #0a0f1f;
  --bg-primary:   #0e1626;
  --bg-secondary: #131b2e;
  --bg-tertiary:  #1c2640;
  --sb-track-color: #131b2e;
  --sb-thumb-color: #60a5fa;
}
html[data-theme="ocean"] {
  --bg-void:      #051c2e;
  --bg-primary:   #0a2942;
  --bg-secondary: #0e3050;
  --bg-tertiary:  #143e63;
  --sb-track-color: #0a2942;
  --sb-thumb-color: #06b6d4;
}
html[data-theme="forest"] {
  --bg-void:      #0a1a0e;
  --bg-primary:   #122318;
  --bg-secondary: #142918;
  --bg-tertiary:  #1d3722;
  --sb-track-color: #142918;
  --sb-thumb-color: #6baf8d;
}
html[data-theme="purple"] {
  --bg-void:      #110624;
  --bg-primary:   #1a0d2e;
  --bg-secondary: #1f1235;
  --bg-tertiary:  #2a1a47;
  --sb-track-color: #1f1235;
  --sb-thumb-color: #a78bfa;
}
html[data-theme="pink"] {
  --bg-void:      #200a1a;
  --bg-primary:   #2a1020;
  --bg-secondary: #2d1426;
  --bg-tertiary:  #3a1a31;
  --sb-track-color: #2d1426;
  --sb-thumb-color: #f472b6;
}

/* Text-size variants — set two CSS variables:
   • --ui-text-size: scales font via the per-element rules below
   • --ui-scale: scales layout (titlebar/sidebar/tab heights, border-radii,
                 chrome paddings via --sp-*) using calc() — no zoom, no
                 viewport bands, layout stays correct. */
:root { --ui-text-size: 13px; }
html[data-text-size="xs"] { --ui-text-size: 10px;   --ui-scale: 0.77;  }
html[data-text-size="s"]  { --ui-text-size: 11.5px; --ui-scale: 0.885; }
html[data-text-size="m"]  { --ui-text-size: 13px;   --ui-scale: 1;     }
html[data-text-size="l"]  { --ui-text-size: 14.5px; --ui-scale: 1.115; }
html[data-text-size="xl"] { --ui-text-size: 16.5px; --ui-scale: 1.27;  }

/* Chrome paddings that don't already pull from layout vars — keep the
   density of common containers in sync with the Text Size scale. */
.panel-header        { padding: var(--sp-4) var(--sp-6); }
.activity-btn        { padding: var(--sp-4) 0; }
.tab                 { padding: 0 var(--sp-6); }
.bottom-tab          { padding: 0 var(--sp-6); }
.ai-panel-header     { padding: var(--sp-4) var(--sp-6); }
.ai-msg              { padding: var(--sp-3) var(--sp-5); gap: var(--sp-3); }
.ai-input-wrapper    { /* padding: var(--sp-3) var(--sp-5); */ }
.ai-modal-btn        { padding: var(--sp-3) var(--sp-6); }
.btn-icon-sm         { padding: var(--sp-2) var(--sp-3); }
.menu-item           { padding: var(--sp-2) var(--sp-4); }
.dropdown-item       { padding: var(--sp-3) var(--sp-5); }
.mode-btn            { padding: var(--sp-2) var(--sp-4); }
#status-bar          { padding: 0 var(--sp-5); gap: var(--sp-4); }

/* Apply to elements that actually display user-facing text. Each selector
   uses !important so it wins over the original hardcoded px sizes. */
body,
.menu-item, .menu-dropdown-item,
.dropdown-menu, .dropdown-item,
.activity-btn, .activity-btn .label,
.panel-header, .file-tree, .file-tree-item,
.tab, .tabs, .breadcrumb,
.terminal-tab, .bottom-tab,
.git-changes, .git-branch, .search-results,
.project-select, .mode-btn,
.theme-toggle-btn, .tp-label, .tp-size-btn,
.ai-msg .ai-msg-bubble,
.ai-input,
input, button, select, textarea {
  font-size: var(--ui-text-size) !important;
}
.dropdown-item .shortcut { font-size: calc(var(--ui-text-size) - 1.5px) !important; }
.ai-msg-header   { font-size: calc(var(--ui-text-size) - 2.5px) !important; }
.ai-suggestion   { font-size: calc(var(--ui-text-size) - 3px)   !important; }
.ai-msg-time     { font-size: calc(var(--ui-text-size) - 3px)   !important; }
/* Chat input — explicit rules so textarea + placeholder + the inline mic
   icon all scale together with the Text Size setting. */
.ai-input-field                { font-size: var(--ui-text-size)              !important; }
.ai-input-field::placeholder   { font-size: var(--ui-text-size)              !important; }
.ai-mic-btn                    { font-size: calc(var(--ui-text-size) - 1px)  !important; }

/* ============================================================
   Light theme — CSS variables + hardcoded-color overrides for the
   handful of places that bypass var() and would otherwise leave
   white-on-white or dark-on-dark text in light mode.
   ============================================================ */
html[data-theme="light"] {
  --bg-void:      #e5e7eb;
  --bg-primary:   #ffffff;
  --bg-secondary: #f1f5f9;
  --bg-tertiary:  #e2e8f0;
  --bg-input:     #ffffff;
  --bg-hover:     #cbd5e1;
  --bg-active:    #94a3b8;
  --text-primary:   #0f172a;
  --text-secondary: #334155;
  --text-muted:     #475569;
  --text-bright:    #000000;
  --sb-track-color: #e2e8f0;
  --sb-thumb-color: #0ea5e9;
  --border:        #cbd5e1;
  --border-accent: #0ea5e9;
}
/* Force readable colors on chrome that hardcoded dark backgrounds */
html[data-theme="light"] body,
html[data-theme="light"] #titlebar,
html[data-theme="light"] #activity-bar,
html[data-theme="light"] #sidebar,
html[data-theme="light"] .panel-header,
html[data-theme="light"] .tab-bar {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #cbd5e1;
}
html[data-theme="light"] .welcome-screen {
  color: #475569;
}
html[data-theme="light"] .welcome-screen .welcome-logo {
  color: #0f172a;
}
html[data-theme="light"] kbd {
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}
html[data-theme="light"] .menu-item        { color: #334155; }
html[data-theme="light"] .menu-item:hover  { color: #0f172a; background: #e2e8f0; }
html[data-theme="light"] .activity-btn        { color: #64748b; }
html[data-theme="light"] .activity-btn:hover  { color: #0f172a; background: #e2e8f0; }
/* Curved-nav stripe + cutouts re-tuned for the light theme so the cyan still pops */
html[data-theme="light"] #activity-bar::after { background: #0ea5e9; }
html[data-theme="light"] .activity-btn.active { background: #0ea5e9; color: #ffffff; }
html[data-theme="light"] .activity-btn.active::before {
  background: #f1f5f9;
  box-shadow: 4px 4px 0 #0ea5e9;
}
html[data-theme="light"] .activity-btn.active::after {
  background: #f1f5f9;
  box-shadow: 4px -4px 0 #0ea5e9;
}
html[data-theme="light"] .file-tree-item,
html[data-theme="light"] .tab               { color: #334155; }
html[data-theme="light"] .tab.active        { color: #0f172a; }

/* Chat panel: light surface with readable bubbles */
html[data-theme="light"] .ai-panel,
html[data-theme="light"] .ai-panel.pinned {
  background: #f8fafc;
  color: #0f172a;
}
html[data-theme="light"] .ai-msg .ai-msg-bubble {
  background: #ffffff;
  color: #0f172a;
  border-color: #cbd5e1;
}
html[data-theme="light"] .ai-msg.user .ai-msg-bubble {
  background: rgba(14, 165, 233, 0.12);
}
html[data-theme="light"] .ai-thinking-text { color: #334155 !important; }

/* Menu dropdown — bg + text contrast in light mode */
html[data-theme="light"] .dropdown-menu {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a;
}
html[data-theme="light"] .dropdown-item        { color: #0f172a; }
html[data-theme="light"] .dropdown-item:hover  { background: #0ea5e9; color: #ffffff; }
html[data-theme="light"] .dropdown-item .shortcut { color: #64748b; }
html[data-theme="light"] .dropdown-separator { background: #cbd5e1; }

/* Theme popover — same treatment so it reads on light backdrop */
html[data-theme="light"] .theme-popover {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a;
}
html[data-theme="light"] .tp-label       { color: #475569; }
html[data-theme="light"] .tp-size-btn    { color: #334155; }
html[data-theme="light"] .tp-size-btn.active { background: #0ea5e9; color: #ffffff; }
html[data-theme="light"] .tp-sizes       { background: #f1f5f9; border-color: #cbd5e1; }

/* (Chat-panel space reservation is handled by aiChat.js — it sets
   #main-layout's margin-right to the live panelWidth when the panel opens
   and during the resize drag. No CSS padding needed here.) */

/* ============================================================
   Apple-style glassmorphism (dark mode default).
   Body gets an ambient gradient so the backdrop-filter has color
   to refract; every chrome surface becomes semi-transparent + blurred.
   ============================================================ */
:root:not([data-theme="light"]) body {
  background:
    radial-gradient(ellipse 60% 50% at 12% 0%,  rgba(56,  189, 248, 0.14), transparent 60%),
    radial-gradient(ellipse 55% 45% at 88% 100%, rgba(139, 92, 246, 0.12), transparent 60%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(236, 72, 153, 0.05), transparent 70%),
    linear-gradient(140deg, #08101e 0%, #0c1424 50%, #0a131f 100%) !important;
  background-attachment: fixed;
}

/* All chrome surfaces — translucent + blurred. !important to defeat any
   hardcoded backgrounds. Skip for the light theme, which uses opaque surfaces. */
:root:not([data-theme="light"]) #titlebar,
:root:not([data-theme="light"]) #activity-bar,
:root:not([data-theme="light"]) #sidebar,
:root:not([data-theme="light"]) .tab-bar,
:root:not([data-theme="light"]) .bottom-panel,
:root:not([data-theme="light"]) .ai-panel,
:root:not([data-theme="light"]) .dropdown-menu,
:root:not([data-theme="light"]) .theme-popover,
:root:not([data-theme="light"]) .ai-modal,
:root:not([data-theme="light"]) .welcome-screen,
:root:not([data-theme="light"]) .preview-toolbar,
:root:not([data-theme="light"]) #statusbar {
  background: var(--chrome-glass-bg) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border-color: var(--chrome-glass-border) !important;
}

/* Surface tints per theme so each one still feels distinct under glass. */
html[data-theme="midnight"] body { background:
  radial-gradient(ellipse 60% 50% at 10% 0%, rgba(56, 189, 248, 0.18), transparent 60%),
  linear-gradient(140deg, #050b18 0%, #0b1730 100%) !important; }
html[data-theme="ocean"] body { background:
  radial-gradient(ellipse 60% 50% at 50% 0%, rgba(20, 184, 166, 0.18), transparent 60%),
  linear-gradient(140deg, #021526 0%, #06243c 100%) !important; }
html[data-theme="forest"] body { background:
  radial-gradient(ellipse 60% 50% at 50% 100%, rgba(34, 197, 94, 0.16), transparent 60%),
  linear-gradient(140deg, #04130a 0%, #0a1f12 100%) !important; }
html[data-theme="purple"] body { background:
  radial-gradient(ellipse 60% 50% at 50% 0%, rgba(168, 85, 247, 0.22), transparent 60%),
  radial-gradient(ellipse 50% 40% at 100% 100%, rgba(217, 70, 239, 0.14), transparent 60%),
  linear-gradient(140deg, #0d0418 0%, #1a0a30 100%) !important; }
html[data-theme="pink"] body { background:
  radial-gradient(ellipse 60% 50% at 50% 0%, rgba(236, 72, 153, 0.22), transparent 60%),
  radial-gradient(ellipse 50% 40% at 0% 100%, rgba(244, 114, 182, 0.14), transparent 60%),
  linear-gradient(140deg, #190612 0%, #2a0e21 100%) !important; }

/* Tabs, bubbles, inputs — slightly translucent for a layered feel */
:root:not([data-theme="light"]) .tab               { background: rgba(255,255,255,0.02); }
:root:not([data-theme="light"]) .tab.active        { background: rgba(255,255,255,0.06); }
:root:not([data-theme="light"]) .ai-msg-bubble     { background: rgba(255,255,255,0.05) !important; }
:root:not([data-theme="light"]) .ai-msg.user .ai-msg-bubble { background: rgba(56,189,248,0.12) !important; }
:root:not([data-theme="light"]) input[type="text"],
:root:not([data-theme="light"]) textarea,
:root:not([data-theme="light"]) select {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* Subtle inner highlight on bigger surfaces for the "polished glass" look */
:root:not([data-theme="light"]) .ai-panel,
:root:not([data-theme="light"]) .dropdown-menu,
:root:not([data-theme="light"]) .theme-popover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 16px 40px rgba(0,0,0,0.55);
}

/* Light theme keeps its opaque surfaces but gets a faint frost on the popover/modal
   so floating layers still feel layered. */
html[data-theme="light"] .dropdown-menu,
html[data-theme="light"] .theme-popover,
html[data-theme="light"] .ai-modal {
  background: rgba(255, 255, 255, 0.80) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

/* ============================================================
   Stacked chat bubbles — avatar on top edge, bubble below.
   Theme-matched (dark + cyan accent), no purple.
   ============================================================ */
.ai-msg {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 10px;             /* tighter spacing between messages */
}
.ai-msg.assistant {
  flex-direction: column !important;     /* defeat the old row-reverse rule */
  align-items: flex-start;
}
.ai-msg.user {
  flex-direction: column !important;     /* defeat the original .ai-msg.user row-reverse */
  align-items: flex-end;
}

/* Circular avatar floats above the bubble's top edge, slightly overlapping
   it so it visually "perches" on the bubble. */
.ai-msg .ai-msg-avatar {
  width: 32px !important;          /* smaller avatar = more text space */
  height: 32px !important;
  flex-shrink: 0;
  z-index: 2;
  margin-bottom: -8px;             /* lighter overlap (was -18px) */
  margin-left: -10px;              /* bleeds past the bubble's left edge */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  border: 2px solid var(--bg-secondary, #0f1521);   /* halo so the bubble shows behind avatar */
  background: var(--bg-secondary, #0f1521);
}
.ai-msg.user .ai-msg-avatar {
  margin-left: 0;
  margin-right: -10px;             /* mirror past the right edge */
}

/* Body holds the optional name/time header + the bubble. Full-width so the
   bubble extends to the same right edge where the user's avatar sits — both
   sides of the conversation visually line up. */
.ai-msg-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
.ai-msg.user .ai-msg-body { align-items: flex-end; }

/* "Claude (Opus 4.7) says · now" header pill above bubble */
.ai-msg-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 0 32px;          /* clear the overlapping avatar (-10 + 32 + breathing) */
  font-size: 10.5px;
  line-height: 1;
  margin-bottom: 1px;
}
.ai-msg.user .ai-msg-header {
  padding: 0 32px 0 14px;
  flex-direction: row-reverse;
}
.ai-msg-name {
  font-weight: 600;
  color: var(--text-primary, #e2e4f0);
  letter-spacing: 0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-msg-time {
  color: var(--text-secondary, #8b8fa8);
  font-size: 10.5px;
  flex-shrink: 0;
}

/* Bubble — dark, theme-matched, with a subtle accent border. Extra top
   padding to clear the overlapping avatar. */
.ai-msg .ai-msg-bubble {
  border-radius: 14px !important;
  padding: 10px 16px;              /* tighter — was 26px top, 12px bottom */
  font-size: 13.5px;
  line-height: 1.55;
  position: relative;
  background: var(--bg-tertiary, #161d2c);
  border: 1px solid var(--border, #2a3344);
  color: var(--text-primary, #e2e4f0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  max-width: 100%;
}
.ai-msg.assistant .ai-msg-bubble {
  border-color: rgba(56, 189, 248, 0.30);             /* cyan accent — "AI" */
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(56, 189, 248, 0.08) inset;
}
.ai-msg.user .ai-msg-bubble {
  border-color: rgba(148, 163, 184, 0.25);            /* neutral slate — "you" */
  background: rgba(56, 189, 248, 0.10);               /* faint cyan wash so it reads as user */
}

/* Code blocks / inline code stay squared so fenced code doesn't look weird
   inside a rounded pill. */
.ai-msg-bubble pre,
.ai-msg-bubble .ai-code-block,
.ai-msg-bubble code,
.ai-msg-bubble .ai-inline-code {
  border-radius: 0 !important;
}

/* Action buttons inside the bubble */
.ai-msg-bubble .ai-msg-actions {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.ai-msg-bubble .ai-action-btn {
  border-radius: 999px !important;
  background: rgba(56, 189, 248, 0.10);
  border-color: rgba(56, 189, 248, 0.30);
  color: var(--text-primary, #e2e4f0);
}
.ai-msg-bubble .ai-action-btn:hover {
  background: rgba(56, 189, 248, 0.20);
  border-color: rgba(56, 189, 248, 0.50);
}

/* Active state for the model-bar toggle in the AI panel header.
   Previous fallback `--accent-light` (#2a5a8c) was near-invisible dark navy
   on the dark IDE background — switched to bright `--accent` (#38bdf8) so
   active state is actually visible. */
#btnAIModelBarToggle.active {
  color: var(--accent, #38bdf8);
  background: rgba(56, 189, 248, 0.15);
}

/* Pasted-screenshot preview chips that appear above the chat input. */
.ai-pasted-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px 4px;
  border-top: 1px solid var(--border);
  background: rgba(56, 189, 248, 0.04);
}
.ai-pasted-chip {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 6px !important;          /* defeat no-curves rule */
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, 0.30);
  background: var(--bg-tertiary, #161d2c);
}
.ai-pasted-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ai-pasted-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.ai-pasted-remove:hover { background: rgba(239, 68, 68, 0.85); }

/* Active state for the IDE self-scan toggle — strong visual "ON" cue:
   bright cyan icon, cyan-tinted background, and a tiny pulsing dot in the
   top-right of the button so the user can see at a glance whether Eldar
   has IDE-source access. */
#btnAISelfScan { position: relative; }
#btnAISelfScan.active {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.18);
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.45);
}
#btnAISelfScan.active::after {
  content: '';
  position: absolute;
  top: 4px; right: 4px;
  width: 6px; height: 6px;
  border-radius: 50% !important;       /* defeat global no-curves rule */
  background: #38bdf8;
  box-shadow: 0 0 6px #38bdf8;
  animation: ai-pulse 1.6s ease-in-out infinite;
}
@keyframes ai-pulse {
  0%, 100% { opacity: 1;    transform: scale(1);    }
  50%      { opacity: 0.55; transform: scale(0.75); }
}

/* ============================================================
   AI assistant icon — image-based (replaces fa-wand-magic-sparkles)
   ============================================================ */
.ai-icon-img {
  width: 1em;
  height: 1em;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  pointer-events: none;
}
/* Fill the avatar circle/square (32x32) without distortion */
.ai-avatar .ai-icon-img,
.ai-msg-avatar .ai-icon-img,
.ai-wand-avatar .ai-icon-img {
  width: 100%;
  height: 100%;
}
/* In the activity bar + titlebar, scale to ~22px (the icon-font size) */
#btnAIChat .ai-icon-img,
#btnAIChatToggle .ai-icon-img {
  width: 2.3em;
  height: 2.3em;
}
/* The avatar bubble background should not show through transparent PNG edges
   — kill the gradient backing when an image is rendered inside. */
.ai-avatar:has(.ai-icon-img),
.ai-msg-avatar:has(.ai-icon-img),
.ai-wand-avatar:has(.ai-icon-img) {
  background: transparent !important;
  box-shadow: none !important;
}

/* While resizing the AI panel, disable the smooth margin-right transition on
   #main-layout — otherwise the editor area lags ~350ms behind the cursor. */
body.resizing-ai-panel #main-layout,
body.resizing-ai-panel .ai-panel {
  transition: none !important;
}

/* While dragging ANY resize handle (body.resizing — set by the bottom panel,
   sidebar, AI panel, activity bar drag handlers), make all iframes
   transparent to mouse events. Without this, when the cursor crosses over
   the preview iframe (or any embedded surface) the iframe's own event
   handlers swallow mousemove/mouseup and the drag dead-stops mid-motion
   — the "sticking" feel during resize. */
body.resizing iframe {
  pointer-events: none !important;
}
/* Disable any transitions during a drag so the panel sizes 1:1 with the
   cursor instead of easing into place each frame. */
body.resizing #bottomPanel,
body.resizing #sidebar,
body.resizing #editor-area {
  transition: none !important;
}

/* Pin-side swap (left <-> right). The DOM reorder briefly exposes the
   sidebar background while the panel teleports across the flex layout.
   Hide that flash by killing all transitions on the participants for the
   ~1 frame the body has `.pin-swapping` (cleared via rAF in aiChat.js).
   Also lock the editor area's bg to bg-primary so the gap reads as the
   IDE chrome instead of whatever was behind. */
body.pin-swapping *,
body.pin-swapping #main-layout,
body.pin-swapping .ai-panel {
  transition: none !important;
  animation: none !important;
}
body.pin-swapping #editor-area {
  background: var(--bg-primary) !important;
}

/* Iframes are separate browsing contexts — when the cursor crosses over one
   during a drag, the iframe captures mouseup and the parent document never
   sees it, so our resize handler keeps following the cursor until the user
   clicks outside. Disabling pointer events on iframes during the resize lets
   mouseup reach the parent. Same trick used for terminal/editor panel resize
   below — just covers iframes anywhere in the IDE while ANY resize is active. */
body.resizing-ai-panel iframe,
body.resizing iframe {
  pointer-events: none !important;
}

/* ============================================================
   FINAL OVERRIDE — per-theme surface color.
   --surface is the canvas color used by #editor-area, #activity-bar,
   and the curve-cutout circles. Defining all three from the same
   variable guarantees they blend pixel-perfectly per theme (no more
   "ball" silhouettes from color mismatches).
   ============================================================ */
:root,
html[data-theme="dark"]     { --surface: #101523; }
html[data-theme="light"]    { --surface: #f1f5f9; }
html[data-theme="midnight"] { --surface: #101829; }
html[data-theme="ocean"]    { --surface: #0f2035; }
html[data-theme="forest"]   { --surface: #121e22; }
html[data-theme="purple"]   { --surface: #16142c; }
html[data-theme="pink"]     { --surface: #1c1526; }

#editor-area {
  background: var(--surface) !important;
}
html:not([data-theme="light"]) #activity-bar {
  background: var(--surface) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
:root:not([data-theme="light"]) .activity-btn.active::before,
:root:not([data-theme="light"]) .activity-btn.active::after {
  background: #10182800 !important;            /* fully transparent — no silhouette regardless of theme */
}

/* Chevron in the Feedback summary gets an explicit JS toggle (see
   feedback.js _wireAccordion); make it look interactive. */
#feedbackSection .setting-accordion-chevron {
  cursor: pointer;
  padding: 2px;
  border-radius: 3px;
  transition: opacity 0.12s ease, background 0.12s ease, transform 0.18s ease;
}
#feedbackSection .setting-accordion-chevron:hover {
  opacity: 1;
  background: rgba(255,255,255,0.08);
}

/* ─── Feedback: Settings accordion list ───────────────────────────────── */
.feedback-titles {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.feedback-title-row { padding: 0; }
.feedback-title-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  color: inherit;
  padding: 7px 9px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.feedback-title-btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
}
.feedback-title-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.feedback-title-count {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.18);
  color: #f5b042;
  flex-shrink: 0;
}
.feedback-title-empty,
.feedback-title-loading {
  list-style: none;
  font-size: 11px;
  opacity: 0.6;
  padding: 8px 0;
  text-align: center;
}

/* ─── Feedback: detail table tab pane ─────────────────────────────────── */
.feedback-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--bg, #1a1a1a);
  overflow: hidden;
}
.feedback-container.hidden { display: none; }
.feedback-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  background: rgba(255,255,255,0.02);
  flex-shrink: 0;
}
.feedback-toolbar .feedback-title {
  flex: 1;
  font-weight: 600;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feedback-table-wrap {
  flex: 1;
  overflow: auto;
  padding: 8px 0;
}
.feedback-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.feedback-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg, #1a1a1a);
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.12));
  text-align: left;
  padding: 8px 12px;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
  z-index: 1;
}
.feedback-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.05));
  vertical-align: top;
}
.feedback-table tbody tr:hover {
  background: rgba(255,255,255,0.025);
}
.feedback-table tbody tr.is-closed { opacity: 0.55; }
.feedback-cell-title { font-weight: 500; }
.feedback-cell-remarks {
  max-width: 360px;
  white-space: pre-wrap;
  word-break: break-word;
}
.feedback-cell-date {
  white-space: nowrap;
  opacity: 0.8;
}
.feedback-by-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 5px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
}
.feedback-by-human { background: rgba(56, 189, 248, 0.18); color: #6cb9e8; }
.feedback-by-agent { background: rgba(168, 85, 247, 0.22); color: #c4a4f5; }
.feedback-sev {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  text-transform: capitalize;
}
.feedback-sev-low      { background: rgba(148, 163, 184, 0.18); color: #94a3b8; }
.feedback-sev-medium   { background: rgba(234, 179, 8, 0.18);  color: #eab308; }
.feedback-sev-high     { background: rgba(249, 115, 22, 0.22); color: #fb923c; }
.feedback-sev-critical { background: rgba(239, 68, 68, 0.25);  color: #ef4444; }
.feedback-actions-col {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}
.feedback-actions-col .btn-icon-sm { padding: 4px 6px; }
.feedback-loading {
  text-align: center;
  opacity: 0.6;
  padding: 16px;
}



/* Reconnect button relocated to the title bar (no longer .preview-floating-reconnect) — keep its spin. */
#btnPreviewFloatingReconnect.spinning i { animation: preview-reconnect-spin 0.8s linear infinite; }