/* ═══════════════════════════════════════
   BRAND TOKENS
═══════════════════════════════════════ */
:root {
  --bg: #08080c;
  --card: #111118;
  --purple: #8B5CF6;
  --purple-light: #A78BFA;
  --purple-glow: rgba(139,92,246,0.25);
  --emerald: #10B981;
  --emerald-glow: rgba(16,185,129,0.2);
  --text: #e4e4e7;
  --muted: #a1a1aa;
  --border: rgba(255,255,255,0.06);
  --font: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;
  
  /* Theme overrides to fix spacing/scaling */
  --header-h: 96px !important;
  --hero-offset: 0px !important;
}
html {
  font-size: 16px; 
}
body {
  padding-top: 96px; /* Match header min-height to eliminate gap */
  font-family: var(--font);
}
@media (max-width: 1024px) {
  body { padding-top: 96px; }
  #hero { padding-top: 20px !important; } /* Add just a tiny bit of breathing room below fixed header */
}

/* ═══════════════════════════════════════
   PART A: BOOT SEQUENCE OVERLAY
═══════════════════════════════════════ */
#boot-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
  padding: 5vw 8vw; /* Reduced padding for more horizontal space */
  font-family: var(--mono);
  font-size: clamp(12px, 3.5vw, 14px); /* Fluid font size */
  line-height: 1.6;
  transition: opacity 0.6s ease;
}
#boot-overlay.fade-out { opacity: 0; pointer-events: none; }

#boot-overlay.fade-out { opacity: 0; pointer-events: none; }

#boot-interact {
  display: flex; flex-direction: column; gap: 16px;
  align-items: flex-start;
  margin-bottom: 24px;
}
.sys-alert { color: #FF5F57; font-weight: bold; letter-spacing: 1px; }
.sys-msg { color: var(--muted); }
.btn-terminal {
  background: transparent; border: 1px solid var(--emerald);
  color: var(--emerald); font-family: var(--mono);
  padding: 8px 16px; cursor: pointer; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 1px;
  transition: all 0.2s;
}
.btn-terminal:hover { background: rgba(16,185,129,0.15); box-shadow: 0 0 10px rgba(16,185,129,0.3); }

#boot-lines { display: flex; flex-direction: column; gap: 0; width: 100%; max-width: 520px; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; }

.boot-line { color: var(--muted); white-space: pre-wrap; word-wrap: break-word; }
.boot-ok    { color: var(--emerald); }
.boot-done  { color: var(--purple); }
.boot-title {
  background: linear-gradient(90deg, var(--purple-light), var(--emerald));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; font-weight: 700;
}
.boot-hex   { color: var(--purple-light); }

/* Progress bar */
#boot-progress-wrap { display: flex; align-items: center; gap: 10px; color: var(--muted); }
#boot-bar-fill { color: var(--emerald); }
#boot-bar-empty { color: var(--muted); }
#boot-pct { min-width: 36px; }

/* Skip hint */
#boot-skip {
  position: absolute; bottom: 24px; right: 32px;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  opacity: 1; transition: opacity 0.5s;
  pointer-events: none; user-select: none;
}
#boot-skip.hidden { opacity: 0; }

/* ═══════════════════════════════════════
   PART B: TERMINAL HEADER
═══════════════════════════════════════ */
#aim-shell {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: auto;
  min-height: 96px;
  background: rgba(8,8,12,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  display: flex; flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
}

#aim-shell.shell-hidden {
  transform: translateY(-100%);
}

/* Sticky Logo State */
#aim-sticky-logo {
  position: fixed; top: 12px; left: 24px;
  z-index: 1001; pointer-events: auto;
  opacity: 0; transform: translateY(-20px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  
  /* Glassmorphism Pill */
  background: rgba(13, 13, 18, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 8px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
#aim-sticky-logo.visible {
  opacity: 1; transform: translateY(0);
}
#aim-sticky-logo svg { width: 90px; height: auto; display: block; }

@media (max-width: 1024px) {
  #aim-sticky-logo { left: 50%; transform: translateX(-50%) translateY(-20px); }
  #aim-sticky-logo.visible { transform: translateX(-50%) translateY(0); }
}

/* Hide the original theme header and mobile trigger/sheet to prevent overlap/collision */
#site-header, #menuTrigger, #mobile-sheet {
  display: none !important;
}

/* ROW 1 — Title Bar */
#shell-titlebar {
  height: 32px;
  background: rgba(17,17,24,1);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.shell-dots { display: flex; align-items: center; gap: 6px; }
.shell-title-right { display: flex; align-items: center; gap: 12px; }

.shell-sound-btn {
  background: transparent; border: none; padding: 4px;
  color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: color 0.2s;
}
.shell-sound-btn:hover { color: var(--text); }
.shell-sound-btn.muted .icon-sound-on { display: none !important; }
.shell-sound-btn.muted .icon-sound-off { display: block !important; }
.shell-sound-btn:not(.muted) .icon-sound-on { display: block !important; }
.shell-sound-btn:not(.muted) .icon-sound-off { display: none !important; }
.shell-dot {
  width: 12px; height: 12px; border-radius: 50%;
  cursor: pointer; position: relative; flex-shrink: 0;
  transition: filter 0.15s;
}
.shell-dot:hover { filter: brightness(1.3); }
.shell-dot--red    { background: #FF5F57; }
.shell-dot--yellow { background: #FEBC2E; }
.shell-dot--green  { background: #28C840; }
/* Dot tooltips */
.shell-dot::after {
  content: attr(data-tip);
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  background: rgba(17,17,24,0.95); color: var(--muted);
  font-family: var(--mono); font-size: 10px;
  padding: 2px 6px; border-radius: 4px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.15s;
  border: 1px solid var(--border);
}
.shell-dot:hover::after { opacity: 1; }

.shell-logo-wrap { display: flex; align-items: center; }
.shell-logo-wrap svg { width: 80px; height: auto; margin-right: 12px; }

.shell-title-center {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  position: absolute; left: 50%; transform: translateX(-50%);
  white-space: nowrap; pointer-events: none;
}
.shell-title-right { width: 80px; } /* spacer to balance left logo */

/* ROW 2 — Prompt Bar */
#shell-prompt-bar {
  height: 56px;
  padding: 0 24px;
  display: flex; align-items: center; gap: 8px;
  flex: 1;
}
.prompt-prefix {
  font-family: var(--mono); font-size: 15px;
  white-space: nowrap; flex-shrink: 0;
  user-select: none;
}
.prompt-prefix .p-visitor { color: var(--muted); }
.prompt-prefix .p-host    { color: var(--emerald); }
.prompt-prefix .p-rest    { color: var(--muted); }

/* Input + cursor wrapper */
.prompt-input-wrap {
  position: relative; flex: 1; display: flex; align-items: center;
}
#aim-prompt-input {
  background: transparent; border: none; outline: none;
  font-family: var(--mono); font-size: 13px; color: var(--text);
  width: 100%; caret-color: var(--emerald);
}
#aim-prompt-input::placeholder { color: transparent; }
/* Blinking block cursor — shown when input empty & unfocused */
#prompt-cursor {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  pointer-events: none;
  display: inline-block;
  width: 9px; height: 16px;
  background: var(--emerald);
}

/* ── Quick chips row ── */
#aim-quick-chips {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 0 24px 16px;
  background: transparent;
  border: none;
}
.aim-q-chip {
  font-family: var(--mono);
  font-size: 13px;
  padding: 8px 16px;
  background: rgba(139,92,246,0.06);
  border: 1px solid rgba(139,92,246,0.18);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  transition: all 150ms;
  white-space: nowrap;
}
.aim-q-chip:hover {
  border-color: rgba(139,92,246,0.5);
  color: #e4e4e7;
  background: rgba(139,92,246,0.12);
}

/* ── Idle hint ── */
#aim-idle-hint {
  font-family: var(--mono); font-size: 10px;
  color: #a1a1aa;
  padding: 0 24px 8px;
  opacity: 0;
  transition: opacity 500ms;
  user-select: none; pointer-events: none;
}

/* Blink for YOU in top output */
@keyframes aim-you-blink {
  0%,100% { opacity:1; } 50% { opacity:0.3; }
}
.aim-you { animation: aim-you-blink 1.2s ease-in-out infinite; }

@media (max-width: 1024px) {
  #aim-idle-hint   { display: none; }
}

.prompt-right {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.kbd-hint {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px; padding: 2px 6px; cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.kbd-hint:hover { border-color: var(--purple); color: var(--purple-light); }
.tls-badge {
  font-size: 15px; cursor: default; position: relative;
}
.tls-badge::after {
  content: 'TLS 1.3 · Secured';
  position: absolute; top: 22px; right: 0;
  background: rgba(17,17,24,0.95); color: var(--muted);
  font-family: var(--mono); font-size: 10px;
  padding: 3px 8px; border-radius: 4px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.15s;
  border: 1px solid rgba(16,185,129,0.2);
}
.tls-badge:hover::after { opacity: 1; }

/* ═══════════════════════════════════════
   PART D: STATUS TICKER BAR
═══════════════════════════════════════ */
#status-bar {
  position: fixed; top: auto; bottom: 0; left: 0; right: 0;
  height: 24px; z-index: 999;
  background: rgba(13,13,18,0.95);
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: none;
  overflow: hidden;
  display: flex; align-items: center;
}
#ticker-track {
  display: flex; align-items: center;
  white-space: nowrap;
  font-family: var(--mono); font-size: 13px; color: var(--muted);
  gap: 0;
  animation: ticker 40s linear infinite;
}

@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-dot { color: var(--emerald); margin: 0 14px; }

@media (prefers-reduced-motion: no-preference) {
  /* Cursor blink */
  #prompt-cursor { animation: cursor-blink 1s ease-in-out infinite; }
  @keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
  }
  /* Ticker scroll */
  #ticker-track { animation: ticker-scroll 40s linear infinite; }
  @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  #status-bar:hover #ticker-track { animation-play-state: paused; }
  /* Logo dot blink (SVG @keyframes defined inline in SVG defs) */
}

/* ═══════════════════════════════════════
   REDUCED MOTION FALLBACKS
═══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: opacity 200ms ease !important;
  }
  #boot-overlay { transition: opacity 200ms ease; }
}

/* ═══════════════════════════════════════
   PART E: DEMO HERO CONTENT
═══════════════════════════════════════ */
#demo-hero {
  min-height: calc(100vh - 100px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; gap: 20px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(139,92,246,0.12) 0%, transparent 60%),
    var(--bg);
}
.demo-phase-label {
  font-family: var(--font); font-size: 12px; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em;
}
.demo-hero-title {
  font-family: var(--font); font-size: clamp(40px, 8vw, 72px); font-weight: 800;
  background: linear-gradient(135deg, var(--purple-light), var(--emerald));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1.1;
}
.demo-hero-sub {
  font-family: var(--font); font-size: 18px; font-weight: 400; color: var(--muted);
}
/* ═══════════════════════════════════════
   PHASE 2A: COMMAND PANEL
═══════════════════════════════════════ */
#aim-command-panel {
  position: fixed;
  top: 130px;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 620px;
  max-width: calc(100vw - 32px);
  background: rgba(17,17,24,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 30px rgba(139,92,246,0.12);
  padding: 16px;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
#aim-command-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.cmd-panel-header {
  font-family: var(--mono); font-size: 10px; color: var(--muted);
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 12px;
}
.cmd-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 8px;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background 0.15s, border-color 0.15s;
  text-decoration: none;
}
.cmd-item:hover {
  background: rgba(139,92,246,0.08);
  border-left-color: var(--purple);
}
.cmd-item-cmd {
  font-family: var(--mono); font-size: 13px; flex-shrink: 0;
}
.cmd-item-cmd .cmd-dollar { color: var(--emerald); }
.cmd-item-cmd .cmd-name   { color: var(--text); }
.cmd-item-arrow { color: var(--muted); font-family: var(--mono); font-size: 13px; flex-shrink: 0; }
.cmd-item-desc  { font-family: var(--font); font-size: 13px; color: var(--muted); }
.cmd-panel-divider {
  height: 1px;
  background: rgba(255,255,255,0.04);
  margin: 12px 0;
}
.cmd-panel-footer {
  font-family: var(--mono); font-size: 10px; color: var(--muted);
  text-align: center;
}

@keyframes chipSlideUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1024px) {
  #aim-shell {
    background: rgba(8,8,12,0.98);
  }

  /* Prevent flash: hide quick commands in top shell on mobile; 
     JS will move them to the bottom wrapper where they'll be shown. */
  #aim-shell #aim-quick-chips {
    display: none !important;
  }

  /* Mobile Quick Chips Container */
  #mobile-quick-wrapper {
    position: fixed;
    bottom: 0;
    left: 0; right: 0;
    z-index: 1000;
    background: rgba(13,13,18,0.98);
    border-top: 1px solid rgba(139,92,246,0.3);
    padding-top: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)); /* Use safe area for iPhone */
    box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
    animation: chipSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  #mobile-qcmd-label {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 1px;
    padding: 0 16px;
    margin-bottom: 8px;
    text-transform: uppercase;
  }

  #aim-quick-chips {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 0 16px;
    background: transparent;
    border: none;
    box-shadow: none;
    animation: none;
  }
  #aim-quick-chips::-webkit-scrollbar { display: none; }

  .aim-q-chip {
    flex-shrink: 0;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 11px;
  }
  .aim-q-chip:hover {
    background: rgba(139,92,246,0.1);
    color: var(--text); border-color: rgba(139,92,246,0.3);
  }
}

/* ═══════════════════════════════════════
   PHASE 2C: OUTPUT AREA
═══════════════════════════════════════ */
#aim-output {
  position: relative;
  background: rgba(13,13,18,0.8);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  padding: 16px 24px;
  font-family: var(--mono); font-size: 14px; color: var(--muted);
  line-height: 1.8;
  display: none;
  max-height: 250px;
  overflow-y: auto;
  transition: max-height 0.2s ease, opacity 0.2s ease;
}
.out-line { display: block; white-space: pre-wrap; }
.out-line.out-section { color: var(--purple); }
.out-line.out-error   { color: #FF5F57; }
.out-prompt-line      { color: var(--emerald); display: block; margin-top: 4px; }

/* ═══════════════════════════════════════
   PHASE 2D: GHOST SUGGESTION
═══════════════════════════════════════ */
#ghost-text {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  left: 0; pointer-events: none;
  font-family: var(--mono); font-size: 13px;
  color: rgba(255,255,255,0.2);
  white-space: pre;
  user-select: none;
}
/* ═══════════════════════════════════════
   PHASE 3A: PAGE TRANSITION OVERLAY
═══════════════════════════════════════ */
#nav-transition {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  opacity: 0;
  display: none;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
#nav-transition.active { display: flex; }
#nav-transition.visible { opacity: 1; pointer-events: auto; }
.nt-cmd {
  font-family: var(--mono); font-size: 14px; color: var(--muted);
  margin-bottom: 20px; text-align: center;
}
.nt-lines { display: flex; flex-direction: column; gap: 0; align-items: flex-start; }
.nt-line {
  font-family: var(--mono); font-size: 13px; color: var(--muted);
  line-height: 1.9; opacity: 0;
  transition: opacity 0.15s ease;
}
.nt-line.show { opacity: 1; }
.nt-line.ok   { color: var(--emerald); }

/* ═══════════════════════════════════════
   PHASE 3D: ⌘K ACTIVE GLOW
═══════════════════════════════════════ */
.kbd-hint.glow {
  box-shadow: 0 0 8px rgba(139,92,246,0.6);
  border-color: var(--purple);
  color: var(--purple-light);
}
/* ═══════════════════════════════════════
   PHASE 4A: MOBILE STYLES
═══════════════════════════════════════ */
@media (max-width: 1024px) {
  #aim-shell { 
    height: auto; 
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  }
  /* Ensure body padding matches header height on mobile */
  body { padding-top: 96px !important; } 
  #shell-titlebar {
    display: flex;
    height: 48px;
    padding: 0 16px;
    justify-content: center;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .shell-dots, .shell-title-center, .shell-title-right { display: none; }
  .shell-logo-wrap svg { 
    width: 120px; 
    height: auto;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0;
  }

  /* Prompt row below logo */
  #shell-prompt-bar {
    height: 48px;
    padding: 0 16px;
  }
  .prompt-prefix { font-size: 15px; }
  #aim-prompt-input { font-size: 16px; } /* Prevent iOS zoom */
  #aim-prompt-input::placeholder { color: rgba(255,255,255,0.3); }
  .kbd-hint { display: none; } /* Hide ⌘K on mobile */

  /* Hide desktop command panel */
  #aim-command-panel { display: none !important; }

  /* Status bar readability */
  #ticker-track { font-size: 11px; }
  #ticker-track { animation-duration: 30s; }
}

/* ═══════════════════════════════════════
   PHASE 4A: MOBILE BOTTOM SHEET
═══════════════════════════════════════ */
#mobile-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: auto; max-height: 70vh;
  background: rgba(17,17,24,0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px 16px 0 0;
  border-top: 1px solid rgba(139,92,246,0.3);
  padding: 12px 16px 32px;
  z-index: 997;
  transform: translateY(100%);
  will-change: transform;
  display: none;
}
#mobile-sheet.open { display: block; }
@media (prefers-reduced-motion: no-preference) {
  #mobile-sheet { transition: transform 0.32s cubic-bezier(0.34,1.2,0.64,1); }
  #mobile-sheet.visible { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #mobile-sheet.visible { transform: translateY(0); opacity: 1; }
}
.sheet-handle {
  width: 32px; height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  margin: 0 auto 16px;
}
.sheet-label {
  font-family: var(--mono); font-size: 10px;
  color: var(--muted); letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: 12px;
}
.chip-row {
  display: flex; gap: 8px;
  overflow-x: auto; padding-bottom: 12px;
  scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }
.cmd-chip {
  flex-shrink: 0;
  background: rgba(139,92,246,0.1);
  border: 1px solid rgba(139,92,246,0.25);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--mono); font-size: 11px; color: var(--text);
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.cmd-chip:active {
  background: rgba(139,92,246,0.25);
  border-color: var(--purple);
}

/* ═══════════════════════════════════════
   PHASE 4C: POLISH
═══════════════════════════════════════ */
/* Focus ring on prompt bar */
#shell-prompt-bar {
  border-top: 1px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#shell-prompt-bar.focused {
  border-top: 1px solid rgba(139,92,246,0.4);
  box-shadow: inset 0 1px 0 rgba(139,92,246,0.15);
}

/* Error shake keyframe */
@media (prefers-reduced-motion: no-preference) {
  @keyframes aim-shake {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-4px); }
    40%  { transform: translateX(4px); }
    60%  { transform: translateX(-2px); }
    80%  { transform: translateX(2px); }
    100% { transform: translateX(0); }
  }
  #aim-shell.shake { animation: aim-shake 0.3s ease; }
}

/* Success flash */
@media (prefers-reduced-motion: no-preference) {
  @keyframes aim-flash {
    0%,100% { border-bottom-color: rgba(139,92,246,0.2); }
    50%     { border-bottom-color: rgba(16,185,129,0.6); }
  }
  #aim-shell.flash { animation: aim-flash 0.4s ease; }
}

/* Accessibility: visible focus outlines */
:focus-visible {
  outline: 2px solid rgba(139,92,246,0.6);
  outline-offset: 2px;
}
#aim-prompt-input:focus-visible { outline: none; } /* prompt uses border-top ring */

/* Performance: will-change on animated elements */
#aim-command-panel { will-change: opacity, transform; contain: layout; }
#nav-transition    { will-change: opacity; }

/* ═══════════════════════════════════════
   FIX: PREVENT CLIPPING ON EXPANSION
═══════════════════════════════════════ */
#aim-shell.shell-expanded {
  mask-image: none !important;
  -webkit-mask-image: none !important;
  background: rgba(8,8,12,0.98) !important;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 20px 50px rgba(0,0,0,0.8);
}

/* ═══════════════════════════════════════
   BRAND ANIMATIONS (Logo Blinking Dot)
═══════════════════════════════════════ */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}
.em-dot {
  animation: blink 1.8s ease-in-out infinite;
}