.app {
  display: flex;
  flex: 1;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  flex-wrap: nowrap;
  position: relative;
  flex-direction: column;
}

/* Desktop Assist: window is resized to a narrow rail (~phone width); reinforce phone-like shell */
.app--assist-compact {
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.app--assist-compact .app-content-inner {
  overflow: hidden;
}

/* In the rail, one vertical slide ≈ one window height (like iOS Explore), not full monitor */
.app--assist-compact .explore-view--feed .explore-slide {
  flex: 0 0 min(100vh, 100dvh);
  min-height: min(100vh, 100dvh);
  height: auto;
}

/* ── Assist box = the Support-chat look, full-window ───────────────────────
   In Assist, the box must read EXACTLY like the Support chat (dot + "Aria" +
   subtitle + × header, greeting bubble, pill input + round send). We render a
   dedicated <AssistChatBox> using the .support-chat* classes so the look is
   identical; this variant just fills the whole compact Assist window instead of
   floating in a corner. The window itself (shrunk + pinned top-right +
   always-on-top) is handled in main.js; the React app underneath is fully
   covered by this opaque, max-z-index overlay. */
.support-chat--assist {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* The header doubles as the drag handle for the frameless Assist window. */
.support-chat--assist .support-chat__header {
  -webkit-app-region: drag;
  cursor: default;
}
.support-chat--assist .support-chat__close,
.support-chat--assist .support-chat__input-row,
.support-chat--assist .support-chat__body {
  -webkit-app-region: no-drag;
}

/* When backend error banner is visible, push content down */
.app.app--banner-visible .app-content {
  padding-top: 48px;
}

.app-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  position: relative;
  pointer-events: auto; /* ensure content is always clickable during load */
}

.app-content-inner {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding-top: 52px; /* clear the fixed title bar */
}

/* Frameless title bar — full-width strip across the top edge. Holds the window
   controls + chrome (hamburger, wordmark, theme switch, profile); the whole
   strip is a drag region so the chromeless window can be moved. App content
   sits below it (see .app-content-inner padding-top). */
.app-titlebar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  z-index: 90;
  background: #2b2d31;
  border-bottom: 1px solid rgba(0,0,0,0.35);
  box-shadow: 0 1px 6px rgba(0,0,0,0.25);
  -webkit-app-region: drag;
  app-region: drag;
}
/* Chrome that sits on the title bar must stay clickable (not draggable) */
.app-win-controls,
.aria-account-floating,
.aria-hamburger,
.aria-hero--small { -webkit-app-region: no-drag; app-region: no-drag; }

.app-drop-overlay {
  position: absolute;
  inset: 0;
  z-index: 9999;
  background: rgba(59, 130, 246, 0.12);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.app-drop-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 60px;
  border-radius: 20px;
  border: 2.5px dashed rgba(59, 130, 246, 0.6);
  background: rgba(255, 255, 255, 0.08);
  color: #3b82f6;
  font-size: 18px;
  font-weight: 600;
}

.app-backend-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #3d1a1a;
  color: #f0c0c0;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(255, 120, 120, 0.3);
  pointer-events: none; /* don't block clicks on the page */
}
.app-backend-banner .app-backend-banner-retry {
  pointer-events: auto; /* Retry button stays clickable */
}

.app-backend-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e55;
  flex-shrink: 0;
}

/* Update toast (desktop): bottom-left notification like Cursor — "Later" + "Install Now" */
.app-update-toast {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: #1c1c1e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  font-size: 0.82rem;
  color: #e5e5e7;
  max-width: 340px;
  pointer-events: auto;
}
.app-update-toast-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #30d158;
  flex-shrink: 0;
}
.app-update-toast-text {
  flex: 1;
  min-width: 0;
  color: #ebebeb;
}
.app-update-toast-later {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: #98989d;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
}
.app-update-toast-later:hover {
  color: #e5e5e7;
}
.app-update-toast-install {
  flex-shrink: 0;
  padding: 4px 12px;
  border-radius: 5px;
  border: none;
  background: #0a84ff;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.app-update-toast-install:hover:not(:disabled) {
  background: #409cff;
}
.app-update-toast-install:disabled {
  opacity: 0.7;
  cursor: wait;
}

.app-backend-banner code {
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.8em;
}

.app-backend-banner-retry {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 200, 200, 0.5);
  background: transparent;
  color: #f0c0c0;
  cursor: pointer;
  font-size: 0.85rem;
}

.app-backend-banner-retry:hover {
  background: rgba(255, 255, 255, 0.1);
}

.app-minimal {
  display: flex;
  flex: 1;
  min-height: 100vh;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: var(--bg);
}

.app-minimal-title {
  margin: 0;
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.03em;
}

.app-minimal-expand {
  padding: 12px 20px;
  border-radius: 999px;
  border: none;
  background: var(--accent);
  color: var(--bg);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.app-minimal-expand:hover {
  background: var(--accent-hover);
}

.app-minimal-hint {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-muted);
}


/* Mandatory update: blocks entire app until user updates */
.update-required-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  pointer-events: auto;
}

.update-required-card {
  background: var(--surface, #1c1c1e);
  border: 1px solid rgba(10, 132, 255, 0.4);
  border-radius: 16px;
  padding: 32px;
  max-width: 420px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.update-required-title {
  margin: 0 0 12px;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text, #fff);
}

.update-required-text {
  margin: 0 0 24px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-muted, #98989d);
}

.update-required-btn {
  width: 100%;
  padding: 14px 20px;
  border-radius: 10px;
  border: none;
  background: #0a84ff;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.update-required-btn:hover:not(:disabled) {
  background: #409cff;
}

.update-required-btn:disabled {
  opacity: 0.9;
  cursor: wait;
}

.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 11000;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  pointer-events: auto;
}

/* First-run examples: above permission onboarding; stable scroll + backdrop so the main UI doesn’t flash through. */
.onboarding-overlay--first-run-examples {
  z-index: 11002;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(0, 0, 0, 0.55);
}

.onboarding-card--first-run-examples {
  max-width: min(480px, calc(100vw - 40px));
  max-height: min(90vh, 720px);
  overflow-y: auto;
  padding: 24px 28px;
}

/* Voice enrollment wizard — above main chrome, below nothing critical */
.voice-onboarding-overlay {
  z-index: 11001;
}

.voice-onboarding-overlay .onboarding-card {
  max-width: 480px;
}

.voice-onboarding-flow {
  position: relative;
}

.voice-onboarding-flow__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  text-align: center;
}

.voice-onboarding-flow__hero-text {
  width: 100%;
  min-width: 0;
}

.voice-onboarding-flow__hero .onboarding-title {
  margin-bottom: 6px;
}

.voice-onboarding-flow__subtitle {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-muted);
  max-width: 22rem;
  margin-left: auto;
  margin-right: auto;
}

.voice-onboarding-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.voice-onboarding-flow-status {
  margin: 8px 0 0;
  font-size: 0.88rem;
  color: var(--accent);
}

/* Abstract “AI” face — animates while TTS plays */
.aria-speaking-avatar {
  position: relative;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
}

.aria-speaking-avatar__svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.35));
}

.aria-speaking-avatar__ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(74, 222, 128, 0.35);
  opacity: 0.85;
  pointer-events: none;
}

.aria-speaking-avatar--speaking .aria-speaking-avatar__ring {
  animation: aria-avatar-ring-pulse 1.1s ease-in-out infinite;
}

.aria-speaking-avatar__mouth {
  transform-origin: 60px 78px;
  transition: transform 0.12s ease;
}

.aria-speaking-avatar--speaking .aria-speaking-avatar__mouth {
  animation: aria-avatar-mouth 0.45s ease-in-out infinite alternate;
}

.aria-speaking-avatar--in-chat {
  width: 72px;
  height: 72px;
}

.aria-speaking-avatar-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 8px 0 4px;
}
@keyframes aria-avatar-ring-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.04); opacity: 1; }
}

@keyframes aria-avatar-mouth {
  0% { transform: scaleY(0.55) scaleX(1.05); }
  100% { transform: scaleY(1) scaleX(1); }
}

/* ─── Aria Live Chat: iMessage-style floating bubbles, top-right ─── */
.aria-live-chat {
  position: fixed;
  top: 56px;
  right: 14px;
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: min(440px, 46vw);
  pointer-events: none;
}
.aria-live-bubble {
  pointer-events: auto;
  padding: 9px 13px;
  border-radius: 18px;
  font-size: 13.5px;
  line-height: 1.35;
  max-width: 78%;
  word-wrap: break-word;
  white-space: pre-wrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: ariaLiveBubbleIn 0.22s ease-out;
}
.aria-live-bubble--user {
  background: linear-gradient(180deg, #2b8aef 0%, #1f6fd1 100%);
  color: #fff;
  border-bottom-right-radius: 6px;
  align-self: flex-end;
}
.aria-live-bubble--aria {
  background: rgba(40, 40, 46, 0.85);
  color: #f4f4f5;
  border: 1px solid rgba(255,255,255,0.08);
  border-bottom-left-radius: 6px;
  align-self: flex-start;
}
.aria-live-bubble--typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
}
.aria-live-bubble--typing .typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.65);
  animation: typingDot 1.2s infinite ease-in-out;
}
.aria-live-bubble--typing .typing-dot:nth-child(2) { animation-delay: 0.15s; }
.aria-live-bubble--typing .typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes ariaLiveBubbleIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes typingDot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* (Aria Universe / orb removed 2026-06-05 — the home page is solid-dark + the
   yellow "HowTo" hero. The .aria-universe element no longer renders.) */
/* Ensure UI chrome sits above the universe */
.app {
  position: relative;
}
.app > *:not(.aria-universe):not(.aria-live-chat) {
  position: relative;
  z-index: 1;
}
/* Let particles bleed through the dashboard surfaces */
.app .main {
  background: transparent;
}
/* Home screen: orb fills the center of the viewport */
.aria-orb-home {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 8px 0;
  gap: 12px;
}
.aria-orb-thinking {
  display: flex;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
}

.aria-orb {
  transition: filter 0.5s ease;
}

.aria-orb canvas {
  display: block;
}


.onboarding-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  max-width: 420px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.onboarding-title {
  margin: 0 0 12px;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
}

.onboarding-text {
  margin: 0 0 24px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.onboarding-text--hint {
  margin-bottom: 16px;
  font-size: 0.875rem;
  color: var(--text-muted);
  opacity: 0.9;
}

.onboarding-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.onboarding-btn {
  padding: 12px 20px;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
}

.onboarding-btn--primary {
  background: var(--accent);
  color: var(--bg);
}

.onboarding-btn--primary:hover {
  background: var(--accent-hover);
}

.onboarding-btn--secondary {
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--border);
}

.onboarding-btn--secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Persistent indicator when screen sharing from another view (web + desktop) */
.global-screen-share-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  margin: 0 16px 12px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  color: #fca5a5;
}

.global-screen-share-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
  animation: global-screen-share-pulse 1.4s ease-in-out infinite;
}

@keyframes global-screen-share-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.2); }
}

.global-screen-share-label {
  flex: 1;
  min-width: 0;
}

.global-screen-share-btn {
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

.global-screen-share-btn:hover {
  background: rgba(239, 68, 68, 0.3);
  color: #fecaca;
}

.global-screen-share-btn--stop {
  background: rgba(239, 68, 68, 0.35);
  border-color: rgba(239, 68, 68, 0.6);
}

.global-screen-share-btn--stop:hover {
  background: rgba(239, 68, 68, 0.5);
}

.header-quick-nav {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.header-quick-nav-btn {
  padding: 6px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
}

.header-quick-nav-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.app-sidebar-left {
  flex-shrink: 0;
  width: 200px;
  min-width: 200px;
  border-right: 1px solid var(--border);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--surface);
  transition: width 0.2s ease, min-width 0.2s ease;
}

.app-sidebar-left--closed {
  width: 48px !important;
  min-width: 48px !important;
}

.app-sidebar-left--closed .app-sidebar-left-inner {
  display: none;
}

.app-sidebar-update-row {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.app-sidebar-update-row--desktop-only {
  border-top-color: var(--border);
}

.app-sidebar-voice-section {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.app-sidebar-voice-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent, #7c6fff);
  text-transform: uppercase;
  margin: 0 0 2px 2px;
}

.app-sidebar-voice-hint {
  font-size: 11px;
  color: var(--text-muted, #888);
  line-height: 1.45;
  margin: 4px 2px 0;
}

/* Web: Mac + Windows — obvious pill buttons (links) */
.desktop-downloads {
  box-sizing: border-box;
}
/* Compact top-right corner variant — used on the empty/home header */
.desktop-downloads--banner {
  position: absolute;
  top: 12px;
  right: 14px;
  display: flex;
  gap: 6px;
  z-index: 30;
  pointer-events: auto;
}
.download-corner-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(30,30,34,0.78);
  color: #e4e4e7;
  height: 42px;
  box-sizing: border-box;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.download-corner-pill .download-corner-icon {
  width: 14px;
  height: 14px;
}
.download-corner-icon {
  flex-shrink: 0;
  opacity: 0.9;
}
.download-corner-pill:hover {
  background: rgba(50,50,56,0.85);
  border-color: rgba(255,255,255,0.22);
  transform: translateY(-1px);
}
.download-corner-pill--mac {
  color: #f5f5f7;
}
.download-corner-pill--win {
  color: #bfe0ff;
}
.download-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  padding: 14px 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.download-strip-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.download-strip-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #faf5ff;
  letter-spacing: 0.02em;
}
.download-strip-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.download-strip-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.download-strip-hint {
  margin: 10px 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-muted, #8a8698);
  max-width: 52ch;
}
.download-strip-hint strong {
  color: #c8c4d4;
  font-weight: 600;
}
.download-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
  white-space: nowrap;
}
.download-pill:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  transform: translateY(-1px);
}
.download-pill:focus-visible {
  outline: 2px solid #c084fc;
  outline-offset: 2px;
}
.download-pill--mac {
  background: linear-gradient(180deg, #4a4a52 0%, #323236 100%);
  color: #f5f5f7;
  border-color: rgba(255, 255, 255, 0.14);
}
.download-pill--win {
  background: linear-gradient(180deg, #0e7cc5 0%, #0a5f9a 100%);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.12);
}
.download-pill--loading {
  cursor: wait;
  opacity: 0.88;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.download-pill--loading:hover {
  filter: none;
  transform: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.desktop-downloads--banner .download-strip {
  padding: 14px 20px;
}
.desktop-downloads--sidebar {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.desktop-downloads--sidebar .download-strip {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  gap: 10px;
}
.desktop-downloads--sidebar .download-strip-text {
  text-align: left;
}
.desktop-downloads--sidebar .download-strip-actions {
  flex-direction: column;
}
.desktop-downloads--sidebar .download-pill {
  width: 100%;
}
.desktop-downloads--subscription {
  margin-bottom: 20px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
.desktop-downloads--subscription .download-strip {
  padding: 16px 18px;
}

.app-dash-item--update {
  font-size: 0.85rem;
}

.app-sidebar-version-inline {
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 0 12px;
}

.app-dash-item--disabled-text {
  cursor: default;
  opacity: 0.7;
}

.app-dash-item--disabled-text:hover {
  background: transparent;
  color: var(--text-muted);
}

.app-sidebar-left-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 10px 10px;
  min-height: 48px;
  border-bottom: 1px solid var(--border);
}

.app-sidebar-left--closed .app-sidebar-left-header {
  border-bottom: none;
  padding: 12px 10px;
  justify-content: center;
}

.app-sidebar-left-title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.app-sidebar-left .sidebar-toggle {
  flex-shrink: 0;
  margin: 0;
}

/* ─── CEO mode sidebar header — business name + Aria orb-dot ─────────────
 * Replaces the generic "Dashboard" label when the user has activated CEO
 * mode. Uses the same cyan glow language as the employee PWA so the
 * visual identity reads as "Aria, in CEO mode" across all surfaces. */
.app-sidebar-business {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.app-sidebar-orb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00d9ff;
  box-shadow:
    0 0 10px rgba(0, 217, 255, 0.85),
    0 0 22px rgba(0, 217, 255, 0.45);
  flex-shrink: 0;
  animation: app-sidebar-orb-pulse 2.4s ease-in-out infinite;
}
@keyframes app-sidebar-orb-pulse {
  0%, 100% { opacity: 0.7; transform: scale(0.92); }
  50%      { opacity: 1;   transform: scale(1.08); }
}
.app-sidebar-business-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.15;
}
.app-sidebar-business-name {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-sidebar-business-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
}
/* Subtle cyan-tinted top border on the whole sidebar when CEO mode is on,
 * so the user immediately registers "I'm in CEO mode" peripherally. */
.app-sidebar-left--ceo .app-sidebar-left-header {
  border-bottom-color: rgba(0, 217, 255, 0.25);
  box-shadow: inset 0 -1px 0 rgba(0, 217, 255, 0.15);
}
/* When sidebar is collapsed, just show the orb-dot centered. */
.app-sidebar-left--closed .app-sidebar-business {
  display: none;
}

.app-sidebar-left-inner {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 12px 16px;               /* push Conversation History down from the header */
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Desktop: enroll a spectral “voice profile” so only your voice triggers transcription */
.voice-profile-panel {
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}
.voice-profile-panel-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin: 0 0 8px;
}

.voice-profile-panel-restart {
  margin-bottom: 10px;
  width: 100%;
}
.voice-profile-panel-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0 0 10px;
  line-height: 1.35;
}
.voice-profile-panel-status {
  font-size: 0.78rem;
  color: var(--text);
  margin-bottom: 8px;
}
.voice-profile-panel-count {
  color: var(--accent);
  font-weight: 600;
}
.voice-profile-panel-hint strong {
  color: var(--text);
}
.voice-profile-panel-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  cursor: pointer;
  margin-bottom: 10px;
  line-height: 1.3;
}
.voice-profile-panel-check input {
  accent-color: var(--accent);
}
.voice-profile-panel-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.voice-profile-panel-btn {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--input-bg);
  color: var(--text);
  font-size: 0.8rem;
  cursor: pointer;
  text-align: center;
}
.voice-profile-panel-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.voice-profile-panel-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.voice-profile-panel-btn--primary {
  background: rgba(34, 197, 94, 0.25);
  border-color: rgba(74, 222, 128, 0.4);
}
.voice-profile-panel-btn--ghost {
  background: transparent;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.voice-profile-panel-micro {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: 8px 0 0;
  line-height: 1.35;
}

.app-dash-item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

.app-dash-item:hover {
  background: var(--input-bg);
  color: var(--accent);
}

.app-dash-item.active {
  background: var(--input-bg);
  color: var(--accent);
  font-weight: 600;
}

.app-dash-item--sharing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.app-dash-item-share-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fca5a5;
}

.app-dash-item-share-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
  animation: global-screen-share-pulse 1.4s ease-in-out infinite;
}

.app-dash-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--text-muted);
}

.app-dash-item:disabled:hover {
  background: transparent;
  color: var(--text-muted);
}

a.app-dash-item {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a.app-dash-item:focus {
  outline: none;
}

.app-center {
  /* Prefer growing over the trending strip so Ask stays readable when the window is narrow (e.g. DevTools docked). */
  flex: 2 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  overflow: hidden;
  background: transparent;
}

/* ── Edge-to-edge bleed helper (2026-06-02) ─────────────────────────────
 * Any view that paints its own background (cosmic gradients, colored
 * surfaces, etc.) should add this class — or replicate the negative
 * margin — so the paint reaches the viewport edges instead of being
 * clipped by .app-center's 16px horizontal padding.
 * Use it whenever a view's own background must reach the screen edge,
 * especially on mobile where the gap is most visible. */
.full-bleed,
.image-gen-view,
.write-view--full-bleed,
.website-builder--full-bleed {
  margin-left: -16px;
  margin-right: -16px;
}

.app-loading-fallback {
  padding: 24px 16px;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.app-video-panel {
  /* 9:16 preview width; must be allowed to shrink — flex-shrink: 0 crushed the chat column beside DevTools or small windows. */
  flex: 0 1 auto;
  min-width: 0;
  width: min(calc(100vh * 9 / 16), 45vw);
  max-width: min(calc(100vh * 9 / 16), 45vw);
  height: 100%;
  border-left: 1px solid var(--border);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #000;
}


.sidebar-toggle {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-toggle:hover {
  background: var(--input-bg);
  color: var(--text);
}

.app-sidebar-left h2,
.app-sidebar-left-inner h2,
.app-sidebar-left-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.header {
  flex-shrink: 0;
  padding: 12px 0 10px;
  border-bottom: 1px solid var(--border);
}

.header--minimal {
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.header-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 0 4px;
}
.header-title-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.header-title-status {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 400;
}

/* Model preference dropdown (next to "Aria") */
.header-model-pref {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 3px 9px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted, #8590a4);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: background 120ms, color 120ms;
}
.header-model-pref:hover {
  background: rgba(255,255,255,0.09);
  color: var(--text, #d9e3ef);
}
.header-model-pref__label { letter-spacing: 0.2px; }
.header-model-pref__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 6px;
  background: #161922;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.4);
}
.header-model-pref__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--text, #d9e3ef);
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.header-model-pref__item:hover { background: rgba(255,255,255,0.05); }
.header-model-pref__item.active { background: rgba(141, 247, 180, 0.08); }
.header-model-pref__name { font-size: 0.85rem; font-weight: 600; color: #fff; }
.header-model-pref__sub  { font-size: 0.7rem; color: var(--text-muted, #8590a4); }

/* Power-user controls dropdown (gear icon) */
.header-controls-pref {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 5px 7px;
  color: var(--text-muted, #8590a4);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: background 120ms, color 120ms;
}
.header-controls-pref:hover {
  background: rgba(255,255,255,0.09);
  color: var(--text, #d9e3ef);
}
.header-controls-pref__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 280px;
  padding: 10px;
  background: #161922;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.4);
}
.header-controls-pref__group { padding: 6px 4px; }
.header-controls-pref__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted, #8590a4);
  margin-bottom: 6px;
}
.header-controls-pref__seg {
  display: inline-flex;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}
.header-controls-pref__seg .seg-btn {
  background: transparent;
  border: 0;
  color: var(--text-muted, #8590a4);
  padding: 4px 11px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  transition: background 100ms, color 100ms;
}
.header-controls-pref__seg .seg-btn:hover {
  color: #fff;
  background: rgba(255,255,255,0.04);
}
.header-controls-pref__seg .seg-btn.active {
  background: rgba(141, 247, 180, 0.13);
  color: #b6f7c8;
}

/* ── Mobile text scaling — use the blank space ─────────────────────────── */
/* On phones, screen real-estate is precious. Bump base font + chat bubble
   sizes so the chat fills the otherwise-empty viewport while keeping the
   sidebar/header proportional. Per Braeden 2026-06-02. */
@media (max-width: 720px) {
  body, .app-root { font-size: 17px; }
  .header-title-name { font-size: 1.3rem; }
  .header-title-status { font-size: 0.9rem; }
  .header-model-pref { font-size: 0.82rem; padding: 4px 11px; }
  .aria-live-chat,
  .aria-bubble--text,
  .aria-top-bubble__text { font-size: 1.05rem; line-height: 1.5; }
  .aria-input,
  .aria-input input,
  .aria-input textarea { font-size: 1.05rem; }
  .dashboard-menu-item { font-size: 1rem; padding: 11px 14px; }
  .header-model-pref__name { font-size: 1rem; }
  .header-model-pref__sub  { font-size: 0.8rem; }
  /* Live chat stretches across the screen on mobile so it uses the
     blank space instead of sitting as a narrow column in the corner. */
  .aria-live-chat {
    left: 14px;
    right: 14px;
    width: auto;
  }
  .aria-live-bubble { max-width: 88%; }
}
@media (max-width: 480px) {
  body, .app-root { font-size: 18px; }
  .header-title-name { font-size: 1.4rem; }
  .aria-live-chat,
  .aria-bubble--text,
  .aria-top-bubble__text { font-size: 1.12rem; line-height: 1.55; }
  .aria-input,
  .aria-input input,
  .aria-input textarea { font-size: 1.1rem; }
  /* Phone: full-bleed live chat with a tiny gutter. */
  .aria-live-chat {
    left: 10px;
    right: 10px;
    width: auto;
  }
  .aria-live-bubble { max-width: 92%; }
}

.header--minimal .header-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}

.header-tagline {
  margin: 6px 0 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.35;
  max-width: 28rem;
}

/* ── Aria Conversation Bubble (Apple iMessage style) ── */
.aria-bubble-header {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 4px 0;
  user-select: none;
  width: 100%;
  justify-content: space-between;
}
.aria-chat-bubble {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 8px 16px;
  max-width: 48%;
  min-width: 60px;
  min-height: 20px;
  flex: 0 1 auto;
  transition: all 0.3s ease, opacity 0.4s ease, transform 0.4s ease;
  opacity: 0.5;
  transform: scale(0.97);
}
.aria-chat-bubble--visible {
  opacity: 1;
  transform: scale(1);
}
.aria-chat-bubble--user {
  background: #007aff;
  border-color: #007aff;
}
.aria-chat-bubble--user .aria-chat-bubble__text {
  color: #fff;
}
.aria-chat-bubble--aria {
  background: #8B5CF6;
  border-color: #8B5CF6;
}
.aria-chat-bubble--aria .aria-chat-bubble__text {
  color: #fff;
}
[data-theme="dark"] .aria-chat-bubble--aria,
.dark .aria-chat-bubble--aria {
  background: #7C3AED;
  border-color: #7C3AED;
}
.aria-chat-bubble__text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.aria-chat-bubble__text--idle {
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.8rem;
}
/* Tail triangle for Aria bubble */
.aria-chat-bubble--aria::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 12px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid #8B5CF6;
}
[data-theme="dark"] .aria-chat-bubble--aria::before,
.dark .aria-chat-bubble--aria::before {
  border-right-color: #7C3AED;
}
/* Tail triangle for User bubble */
.aria-chat-bubble--user::before {
  content: '';
  position: absolute;
  right: -6px;
  top: 12px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #007aff;
  left: auto;
}

/* ── Conversation Overlay ── */
.aria-convo-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: convoOverlayFadeIn 0.25s ease;
}
@keyframes convoOverlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.aria-convo-overlay__panel {
  width: 90%;
  max-width: 480px;
  max-height: 80vh;
  background: var(--bg, #fff);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: convoSlideUp 0.3s ease;
}
@keyframes convoSlideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.aria-convo-overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.aria-convo-overlay__header h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}
.aria-convo-overlay__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.aria-convo-overlay__history-btn {
  padding: 4px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}
.aria-convo-overlay__history-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.aria-convo-overlay__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.aria-convo-overlay__close:hover {
  background: var(--accent);
  color: #fff;
}
.aria-convo-overlay__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  -webkit-overflow-scrolling: touch;
}
.aria-convo-overlay__empty {
  color: var(--text-muted);
  text-align: center;
  padding: 40px 0;
  font-size: 0.9rem;
}

/* Message bubbles in overlay (iMessage style) */
.aria-convo-msg {
  display: flex;
  max-width: 85%;
}
.aria-convo-msg--user {
  align-self: flex-end;
  margin-left: auto;
}
.aria-convo-msg--aria {
  align-self: flex-start;
}
.aria-convo-msg__bubble {
  padding: 10px 14px;
  border-radius: 18px;
  position: relative;
}
.aria-convo-msg--user .aria-convo-msg__bubble {
  background: #007aff;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.aria-convo-msg--aria .aria-convo-msg__bubble {
  background: #8B5CF6;
  color: #fff;
  border-bottom-left-radius: 4px;
}
[data-theme="dark"] .aria-convo-msg--aria .aria-convo-msg__bubble,
.dark .aria-convo-msg--aria .aria-convo-msg__bubble {
  background: #7C3AED;
  color: #fff;
}
.aria-convo-msg__bubble p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}
.aria-convo-msg__time {
  display: block;
  font-size: 0.65rem;
  opacity: 0.6;
  margin-top: 4px;
  text-align: right;
}
.aria-convo-msg--aria .aria-convo-msg__time {
  text-align: left;
}

/* History day list */
.aria-convo-overlay__day-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  transition: background 0.2s;
}
.aria-convo-overlay__day-btn:hover {
  background: var(--surface);
}
.aria-convo-overlay__day-date {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
}
.aria-convo-overlay__day-count {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Banner is now a compact top-right corner (see .desktop-downloads--banner above). */

.app-center .header {
  padding-left: 0;
  padding-right: 0;
}

/* Center must show only "Aria" + line; no tabs (navigation is in left sidebar only) */
.app-center .nav-tabs {
  display: none !important;
}

.nav-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.nav-tab {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.nav-tab:hover {
  color: var(--text);
}

.nav-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.header h1 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
}

.tagline {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 0 12px;
  background: var(--bg);
}

/* ── History section ─────────────────────────────────────────────────────── */
.app-history-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.history-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.history-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 16px;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.history-go-ask {
  background: var(--accent, #6C63FF);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 24px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.history-go-ask:hover { opacity: 0.85; }

.app-subscription-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.subscription-main {
  padding: 20px 24px;
}
.subscription-tagline {
  margin: 0 0 16px;
  font-size: 0.95rem;
  color: var(--text-muted);
}
.subscription-placeholder {
  padding: 24px;
  background: var(--input-bg, #f5f5f5);
  border-radius: 12px;
  border: 1px solid var(--border, #e0e0e0);
  color: var(--text-muted);
}
.subscription-placeholder p {
  margin: 0;
}

.subscription-credits-block {
  margin-bottom: 20px;
}
.subscription-credits-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 24px 0 12px;
  color: var(--text);
}
.subscription-credits-title:first-child {
  margin-top: 0;
}

/* ── Plan cards grid ── */
.subscription-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.subscription-plan-card {
  position: relative;
  padding: 24px 20px;
  background: var(--input-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.subscription-plan-card:hover {
  border-color: rgba(139, 92, 246, 0.3);
}
.subscription-plan-card--featured {
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.1);
}
.subscription-plan-card--active {
  border-color: rgba(52, 211, 153, 0.5);
  box-shadow: 0 0 16px rgba(52, 211, 153, 0.1);
}
.subscription-plan-badge {
  position: absolute;
  top: -10px;
  right: 16px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(139, 92, 246, 0.9);
  color: #fff;
}
.subscription-plan-badge--current {
  background: rgba(52, 211, 153, 0.9);
  color: #0d2818;
}
.subscription-plan-card-name {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.subscription-plan-card-price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}
.subscription-plan-price-period {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-muted);
}
.subscription-plan-card-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 14px;
  line-height: 1.4;
}
.subscription-plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  flex: 1;
}
.subscription-plan-features li {
  font-size: 0.85rem;
  color: var(--text);
  padding: 4px 0;
  position: relative;
  padding-left: 20px;
}
.subscription-plan-features li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: rgba(52, 211, 153, 0.85);
  font-weight: 700;
}
.subscription-plan-card-action {
  margin-top: auto;
}
.subscription-plan-stripe-note {
  margin: auto 0 0;
  padding-top: 12px;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Checkout buttons ── */
.subscription-checkout-btn {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: none;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.subscription-checkout-btn:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}
.subscription-checkout-btn:active:not(:disabled) {
  transform: scale(0.98);
}
.subscription-checkout-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.subscription-checkout-btn--primary {
  background: rgba(139, 92, 246, 0.9);
  color: #fff;
}
.subscription-checkout-btn--secondary {
  background: rgba(59, 130, 246, 0.85);
  color: #fff;
}
.subscription-checkout-btn--outline {
  background: transparent;
  border: 1.5px solid var(--border, rgba(255,255,255,0.2));
  color: var(--text);
}
.subscription-checkout-btn--outline:hover:not(:disabled) {
  border-color: rgba(139, 92, 246, 0.5);
}

.subscription-checkout-error {
  margin: 12px 0;
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  color: #fca5a5;
  font-size: 0.88rem;
}

/* ── Account fields ── */
.subscription-account-fields {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.subscription-field-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  flex: 1;
  min-width: 200px;
}
.subscription-field-input {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-size: 0.9rem;
}
.subscription-field-input:focus {
  outline: none;
  border-color: rgba(139, 92, 246, 0.5);
}

/* ── Credits status ── */
.subscription-credits-status {
  margin-top: 12px;
}
.subscription-credits-card {
  padding: 16px;
  background: var(--input-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.9rem;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.subscription-credits-card--owner {
  border-color: rgba(250, 204, 21, 0.3);
  background: rgba(250, 204, 21, 0.05);
}
.subscription-credits-card--warning {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.05);
}
.subscription-credits-card--empty {
  border-style: dashed;
}
.subscription-credits-card p {
  margin: 0;
}
.subscription-credits-card-icon {
  font-size: 1.2rem;
}
.subscription-credits-bar-wrap {
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.subscription-credits-bar {
  height: 100%;
  background: linear-gradient(90deg, rgba(52, 211, 153, 0.9), rgba(139, 92, 246, 0.8));
  border-radius: 3px;
  transition: width 0.4s ease;
}
.subscription-credits-remaining {
  margin: 0;
  font-size: 0.88rem;
}

/* ── Manage billing button ── */
.subscription-manage-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.subscription-manage-btn:hover:not(:disabled) {
  border-color: rgba(139, 92, 246, 0.4);
  background: rgba(139, 92, 246, 0.08);
}
.subscription-manage-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Chat Messages: iMessage-style conversation bubbles ── */
.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.chat-messages::-webkit-scrollbar { width: 5px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }

/* Message row — controls alignment */
.chat-msg {
  display: flex;
  flex-direction: column;
  max-width: 78%;
  animation: chat-msg-in 0.25s ease-out;
}
@keyframes chat-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* User messages: right-aligned */
.chat-msg--user {
  align-self: flex-end;
  align-items: flex-end;
}

/* AI messages: left-aligned */
.chat-msg--ai {
  align-self: flex-start;
  align-items: flex-start;
}

/* Bubble shape */
.chat-msg-bubble {
  padding: 10px 16px;
  font-size: 0.935rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  position: relative;
}

/* User bubble: blue, rounded with sharp bottom-right */
.chat-msg--user .chat-msg-bubble {
  background: #007AFF;
  color: #fff;
  border-radius: 20px 20px 6px 20px;
}

/* AI bubble: subtle dark surface, rounded with sharp bottom-left */
.chat-msg--ai .chat-msg-bubble {
  background: #2c2c2e;
  color: var(--text);
  border-radius: 20px 20px 20px 6px;
}

/* Consecutive same-role: tighter spacing, softer radius */
.chat-msg--user + .chat-msg--user { margin-top: -2px; }
.chat-msg--user + .chat-msg--user .chat-msg-bubble { border-radius: 20px 6px 6px 20px; }
.chat-msg--ai + .chat-msg--ai { margin-top: -2px; }
.chat-msg--ai + .chat-msg--ai .chat-msg-bubble { border-radius: 6px 20px 20px 6px; }

/* ─────────────────────────────────────────────────────────────────────────
   TEXT-MODE GLASS CHAT  ✨
   Slides up from the bottom like Apple's iOS 26 / visionOS "liquid glass"
   sheets. Frosted backdrop, full-screen, iMessage bubbles inside. Slides
   back down when the user switches to voice. Independent path from the
   orb conversation.
   ───────────────────────────────────────────────────────────────────── */

.aria-glass-chat {
  position: fixed;
  inset: 0;                  /* fill the whole viewport */
  z-index: 50;
  pointer-events: none;       /* clicks fall through when inactive */
  /* Subtle dim so the chat is the focal point, but light enough that the
     orb particles still bleed through and give the bubble glass something
     to refract. This is the canvas — individual bubbles do the heavy
     liquid-glass work. */
  background: linear-gradient(180deg,
    rgba(8, 8, 12, 0.35) 0%,
    rgba(4, 4, 8, 0.55) 100%);
  /* Slide-up animation. Initial: off-screen below. */
  transform: translateY(100%);
  opacity: 0;
  transition:
    transform 380ms cubic-bezier(0.32, 0.72, 0, 1),
    opacity 220ms ease-out;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.aria-glass-chat--active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Scrollable inner column. Bottom padding leaves room for the input row
   that stays pinned at the bottom of the app (not inside this panel). */
.aria-glass-chat-inner {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  width: 100%;
  /* Messages stack from the TOP down — first message at the top, newer
     ones flow down beneath it. */
  padding: 80px 0 140px 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
}

/* Empty state */
.aria-glass-chat-empty {
  margin: auto 0;
  text-align: center;
  padding: 48px 24px;
}
.aria-glass-chat-empty-title {
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.aria-glass-chat-empty-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

/* ── iMessage-style bubbles ── */
.aria-bubble-row {
  display: flex;
  width: 100%;
  margin: 1px 0;
}
.aria-bubble-row--user { justify-content: flex-end; }
.aria-bubble-row--ai   { justify-content: flex-start; }

/* Add extra space between speaker groups (last AI bubble → first user
   bubble of the next group, and vice versa). */
.aria-bubble-row--user + .aria-bubble-row--ai,
.aria-bubble-row--ai   + .aria-bubble-row--user {
  margin-top: 10px;
}

.aria-bubble {
  /* Normal chat text — readable but not chunky. */
  padding: 12px 18px;
  font-size: 16px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  border-radius: 20px;
  position: relative;
}

/* User: blue gradient, right-aligned, like iMessage's outgoing. */
.aria-bubble--user {
  max-width: 100%;
  padding: 12px 18px;
  font-size: 16px;
  line-height: 1.5;
  background: linear-gradient(135deg, #1e8aff 0%, #0a6cf0 100%);
  color: #fff;
  border-bottom-right-radius: 6px;
  border-radius: 20px 20px 6px 20px;
  box-shadow: 0 4px 14px rgba(10, 108, 240, 0.22);
}
/* Group continuation: keep the rounded tail only on the LAST bubble. */
.aria-bubble--user.aria-bubble--start:not(.aria-bubble--end) { border-bottom-right-radius: 22px; }
.aria-bubble--user:not(.aria-bubble--start):not(.aria-bubble--end) { border-radius: 22px 8px 8px 22px; }
.aria-bubble--user:not(.aria-bubble--start).aria-bubble--end { border-radius: 22px 8px 8px 22px; border-bottom-right-radius: 8px; }

/* Aria: iOS 26 Liquid Glass — clear/neutral, mild blur, top sheen, side edges.
   Tuned to match aria-calibrated-v2: 26px blur, 200% saturation, 2px side
   insets, 30px outer shadow with 0.28 alpha. */
.aria-bubble--ai {
  max-width: 100%;
  background: rgba(255, 255, 255, 0.17);
  -webkit-backdrop-filter: blur(26px) saturate(200%);
  backdrop-filter: blur(26px) saturate(200%);
  color: #fff;
  border-radius: 22px 22px 22px 6px;
  border-bottom-left-radius: 6px;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),    /* top sheen */
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),      /* bottom hairline */
    inset 2px 0 0 rgba(255, 255, 255, 0.20),       /* left edge */
    inset -2px 0 0 rgba(255, 255, 255, 0.20),      /* right edge */
    0 10px 30px rgba(0, 0, 0, 0.28);
}
/* Wet "reflection" arc highlight along the top of each Aria bubble */
.aria-bubble--ai::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%; height: 32%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.0) 100%);
  pointer-events: none;
  border-radius: 22px 22px 50% 50%;
  filter: blur(2px);
}

/* Green "Aria" tag inside the bubble — small uppercase label with a
   pulsing green dot, marks who's talking. Sits at the top of the bubble
   body, BEFORE the content. Only renders on group-start bubbles. */
.aria-bubble-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: #4ade80;
  margin-bottom: 7px;
}
.aria-bubble-tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 7px rgba(74, 222, 128, 0.8);
}

/* Dashboard dropdown menu — gear icon at top-left of header opens a
   dropdown with the 7 nav items, replacing the persistent left sidebar. */
.dashboard-menu-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-right: 12px;
}
.dashboard-menu-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.78);
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.2s;
}
.dashboard-menu-btn:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
}
.dashboard-menu-btn--open {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.35);
  color: #4ade80;
  transform: rotate(45deg);
}
.dashboard-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: rgba(20, 22, 28, 0.96);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  padding: 6px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 12px 40px rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: dashMenuFade 0.18s ease-out;
}
@keyframes dashMenuFade {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dashboard-menu-item {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  text-align: left;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  font-family: inherit;
}
.dashboard-menu-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}
.dashboard-menu-item.active {
  background: rgba(74, 222, 128, 0.12);
  color: #4ade80;
}
.dashboard-menu-item--disabled {
  color: rgba(255, 255, 255, 0.30);
  cursor: not-allowed;
}
.dashboard-menu-item--disabled:hover {
  background: transparent;
  color: rgba(255, 255, 255, 0.30);
}
.dashboard-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 6px;
}

/* Loading-stage hint — sits next to the three-dot typing animation and
   tells the user what Aria is actually doing right now (Looking that up
   → Thinking it through → Almost ready). The text crossfades on
   change, the dots stay constant. Never name a specific external model —
   Claude is BUILD-TIME ONLY per ARIA_CONTEXT.md. */
.aria-loading-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.aria-loading-hint {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.62);
  font-style: italic;
  letter-spacing: 0.01em;
  animation: ariaHintFade 0.4s ease-out;
}
@keyframes ariaHintFade {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.aria-bubble--ai.aria-bubble--start:not(.aria-bubble--end) { border-bottom-left-radius: 22px; }
.aria-bubble--ai:not(.aria-bubble--start):not(.aria-bubble--end) { border-radius: 8px 22px 22px 8px; }
.aria-bubble--ai:not(.aria-bubble--start).aria-bubble--end { border-radius: 8px 22px 22px 8px; border-bottom-left-radius: 8px; }

/* Markdown elements scoped to bubbles. */
.aria-bubble strong { font-weight: 600; }
.aria-bubble .aria-md-p { margin: 0 0 8px 0; }
.aria-bubble .aria-md-p:last-child { margin-bottom: 0; }
.aria-bubble .aria-md-list { margin: 4px 0 6px 0; padding-left: 20px; }
.aria-bubble .aria-md-list:last-child { margin-bottom: 0; }
.aria-bubble .aria-md-list li { margin: 1px 0; }

/* ═══════════════════════════════════════════════════════════════════
   SOURCE CITATION — small framed line above an Aria bubble showing
   where the heavy reasoning came from. Brand-color left border:
     Claude/Opus = #d97757 (Anthropic orange)
     Gemini      = #4285f4 (Google blue)
     Grok        = #ffffff (white)
     GPT         = #10a37f (OpenAI teal)
   Recovered from aria-calibrated-v2.html (2026-05-18).
   ═══════════════════════════════════════════════════════════════════ */
/* Source citation block — sits in its own .aria-bubble-row above the Aria
   bubble. Brand-color left border + ▌ block character mark (rendered via
   ::before on .aria-cite-h). Body is muted gray. Matches calibrated-v2. */
.aria-cite {
  max-width: 68%;
  padding: 5px 16px 3px;
  border-left: 3px solid;
  margin-left: 10px;
}
.aria-cite-h {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase;
  font-weight: 700; margin-bottom: 3px;
}
.aria-cite-h::before {
  content: "▌";
  font-size: 14px;
  line-height: 1;
}
.aria-cite-h-meta {
  color: rgba(255,255,255,0.4); font-weight: 500;
  letter-spacing: 0.02em; text-transform: none;
}
.aria-cite-body {
  font-size: 13.5px; line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}
.aria-cite--claude { border-left-color: #d97757; }
.aria-cite--claude .aria-cite-h { color: #f0a378; }
.aria-cite--gemini { border-left-color: #4285f4; }
.aria-cite--gemini .aria-cite-h { color: #8aa9ff; }
.aria-cite--grok { border-left-color: #ffffff; }
.aria-cite--grok .aria-cite-h { color: #ffffff; }
.aria-cite--gpt { border-left-color: #10a37f; }
.aria-cite--gpt .aria-cite-h { color: #4ade80; }

/* ═══════════════════════════════════════════════════════════════════
   EXHIBIT — standalone teaching visual that sits BELOW Aria's bubble,
   centered on the chat surface like an illustration in a textbook.
   Visual is NOT part of the message — it's an exhibit Aria displays.
   ═══════════════════════════════════════════════════════════════════ */
.aria-exhibit {
  align-self: center;
  width: 100%;
  max-width: 720px;
  margin: 18px auto 8px;
  padding: 24px 20px 20px;
  position: relative;
}
.aria-exhibit-cap {
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  font-style: italic;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   ARIA SURFACE PANEL — task-router wb-*.html template embed.
   The "Amazon for AI" output: Aria detects what you're doing and renders
   a dedicated UI for it (wb-trip for travel, wb-budget for finance, etc.).
   trustSignal header shows the router's pick so it's never a black box.
   ═══════════════════════════════════════════════════════════════════ */
.aria-bubble-row--surface {
  margin-top: 14px;
}
.aria-surface {
  width: min(880px, 92%);
  margin: 6px auto 12px;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(20, 22, 28, 0.66);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}
.aria-surface-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.32);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}
.aria-surface-h-trust {
  font-weight: 500;
  letter-spacing: 0.01em;
}
.aria-surface-h-open {
  color: rgba(150, 200, 255, 0.95);
  text-decoration: none;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  transition: background 120ms ease;
}
.aria-surface-h-open:hover {
  background: rgba(255, 255, 255, 0.12);
}
.aria-surface-frame {
  display: block;
  width: 100%;
  height: 540px;
  border: 0;
  background: rgba(8, 10, 14, 0.95);
}
@media (max-width: 720px) {
  .aria-surface-frame { height: 460px; }
}

/* Aria's signature blue Assist-Mode outline — reusable annotation that
   reads as "Aria is calling attention to this." Same look across chat,
   screen overlay, and teaching exhibits. */
.aria-highlight {
  position: relative;
  border: 1.5px solid #0a84ff;
  border-radius: 14px;
  padding: 18px;
  background: rgba(10, 132, 255, 0.04);
  box-shadow:
    0 0 0 1px rgba(10, 132, 255, 0.25),
    0 0 24px rgba(10, 132, 255, 0.12),
    inset 0 0 0 1px rgba(10, 132, 255, 0.05);
  animation: ariaHL 3.6s ease-in-out infinite;
}
@keyframes ariaHL {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(10, 132, 255, 0.25),
      0 0 24px rgba(10, 132, 255, 0.12),
      inset 0 0 0 1px rgba(10, 132, 255, 0.05);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(10, 132, 255, 0.4),
      0 0 36px rgba(10, 132, 255, 0.22),
      inset 0 0 0 1px rgba(10, 132, 255, 0.08);
  }
}
.aria-highlight-label {
  position: absolute;
  top: -10px; left: 14px;
  padding: 2px 9px;
  background: #0a84ff;
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 5px;
  box-shadow: 0 0 12px rgba(10, 132, 255, 0.45);
}

/* ─── Teaching visualizations ──────────────────────────────────────── */
.aria-viz-h {
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: rgba(255, 255, 255, 0.4);
  margin-bottom: 8px;
}
/* LLM viz — math problems → arrow → animated calculator */
.aria-viz-llm {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  padding: 8px 4px;
}
.aria-viz-llm-problems {
  display: flex; flex-direction: column; gap: 8px;
  flex-shrink: 0; min-width: 130px;
}
.aria-viz-llm-row {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 15px; letter-spacing: 0.5px;
  color: rgba(255,255,255,0.88);
}
.aria-viz-llm-row .ans { color: #4ade80; font-weight: 700; }
.aria-viz-llm-arrow { font-size: 28px; color: rgba(255,255,255,0.55); flex-shrink: 0; }
.aria-viz-llm-calc {
  flex-shrink: 0; width: 110px;
  background: linear-gradient(180deg, #2a2a32 0%, #1a1a20 100%);
  border-radius: 12px; padding: 8px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 18px rgba(0,0,0,0.5);
}
.aria-viz-llm-calc-screen {
  background: #0a3a1a;
  border: 1px solid rgba(74,222,128,0.35);
  border-radius: 6px;
  padding: 6px 8px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 16px; font-weight: 700;
  color: #4ade80; text-align: right;
  letter-spacing: 1px; min-height: 26px;
  margin-bottom: 6px;
  box-shadow: inset 0 0 8px rgba(74,222,128,0.20);
}
.aria-viz-llm-calc-screen::after {
  content: "ANY ANSWER";
  animation: ariaCalcRoll 6s steps(6) infinite;
  display: block;
}
@keyframes ariaCalcRoll {
  0%   { content: "2"; }
  17%  { content: "5"; }
  33%  { content: "10"; }
  50%  { content: "20"; }
  67%  { content: "100"; }
  83%  { content: "42"; }
  100% { content: "ANY"; }
}
.aria-viz-llm-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.aria-viz-llm-key {
  background: rgba(255,255,255,0.08);
  border-radius: 4px; padding: 4px 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px; text-align: center;
  color: rgba(255,255,255,0.7);
}
.aria-viz-llm-key.op { background: rgba(255, 150, 50, 0.25); color: #ffb060; }

/* API viz — two .aria-highlight boxes with an animated pinging line between */
.aria-viz-api {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 8px;
}
.aria-viz-api-box-label {
  font-size: 12px;
  font-weight: 600;
  color: #93b4ff;
  text-align: center;
  line-height: 1.2;
}
.aria-viz-api-box {
  flex: 0 0 70px;
  padding: 12px 0;
  background: linear-gradient(180deg, rgba(120,180,255,0.18) 0%, rgba(120,180,255,0.06) 100%);
  border: 1px solid rgba(120,180,255,0.35);
  border-radius: 10px;
  text-align: center;
  font-size: 11px; font-weight: 600;
  color: #93b4ff;
}
.aria-viz-api-line {
  flex: 1; height: 2px;
  background: linear-gradient(90deg, rgba(120,180,255,0.5), rgba(255,255,255,0.7), rgba(120,180,255,0.5));
  position: relative; margin: 0 8px;
}
.aria-viz-api-line::before, .aria-viz-api-line::after {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff;
  animation: ariaApiPing 2s linear infinite;
}
.aria-viz-api-line::before { left: 10%; }
.aria-viz-api-line::after { left: 50%; animation-delay: 1s; }
@keyframes ariaApiPing {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* Encryption viz — scrambled → key → unscrambled */
.aria-viz-enc {
  display: flex; align-items: center; gap: 10px;
  font-family: ui-monospace, Menlo, monospace; font-size: 14px;
}
.aria-viz-enc-box {
  flex: 1; padding: 10px;
  background: rgba(255,255,255,0.05);
  border-radius: 8px; text-align: center;
}
.aria-viz-enc-locked { color: rgba(255, 200, 80, 0.85); letter-spacing: 0.15em; }
.aria-viz-enc-key { font-size: 20px; }
.aria-viz-enc-unlocked { color: #4ade80; }

/* Markdown blocks inside Aria's messages */
.aria-md-p {
  margin: 0 0 10px 0;
  line-height: 1.6;
  white-space: normal;
}
.aria-md-p:last-child { margin-bottom: 0; }
.aria-md-list {
  margin: 6px 0 10px 0;
  padding-left: 22px;
  line-height: 1.55;
}
.aria-md-list li {
  margin: 2px 0;
  white-space: normal;
}
.aria-md-list:last-child { margin-bottom: 0; }
.aria-msg-body strong {
  color: var(--text);
  font-weight: 600;
}
.aria-msg--ai .aria-msg-body { white-space: normal; }

/* Typing dots inside an assistant message body */
.aria-msg-typing {
  display: inline-flex;
  gap: 5px;
  padding: 6px 0;
}
.aria-msg-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.4;
  animation: aria-msg-dot 1.2s infinite ease-in-out;
}
.aria-msg-typing span:nth-child(2) { animation-delay: 0.15s; }
.aria-msg-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes aria-msg-dot {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-3px); }
}

/* Name label above first message in a group */
.chat-msg-sender {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0 4px;
  margin-bottom: 2px;
  margin-top: 8px;
}
.chat-msg--user .chat-msg-sender { color: rgba(0,122,255,0.7); }
.chat-msg--ai .chat-msg-sender { color: var(--accent); }

/* Feedback row under AI bubbles */
.chat-msg-feedback {
  display: flex;
  gap: 2px;
  padding: 2px 4px 0;
  opacity: 0;
  transition: opacity 0.2s;
}
.chat-msg:hover .chat-msg-feedback,
.chat-msg-feedback:focus-within {
  opacity: 1;
}
.chat-msg-feedback-btn {
  background: none;
  border: none;
  border-radius: 6px;
  padding: 3px 5px;
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.15s, background 0.15s;
  display: flex;
  align-items: center;
}
.chat-msg-feedback-btn:hover:not(:disabled) {
  color: var(--text);
  background: rgba(255,255,255,0.06);
}
.chat-msg-feedback-btn:disabled { cursor: default; }
.chat-msg-feedback-btn--up-active { color: rgba(52, 211, 153, 0.9) !important; }
.chat-msg-feedback-btn--down-active { color: rgba(239, 68, 68, 0.9) !important; }

/* Play audio button inside AI bubble */
.chat-msg-play {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 14px;
  border: none;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s;
}
.chat-msg-play:hover { background: rgba(255,255,255,0.18); }

/* ── Typing indicator: animated dots ── */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 14px 18px;
}
.typing-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: typing-bounce 1.4s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* ── Workbench: dynamic workspace below chat ── */
.workbench {
  flex-shrink: 0;
  max-height: 40vh;
  overflow-y: auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.workbench:empty { display: none; }

.workbench-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
}
.workbench-section-title {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 10px;
}

/* Option cards in workbench */
.workbench-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.workbench-option-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.workbench-option-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: var(--accent);
}
.workbench-option-card img {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
}

/* Legacy compat — keep .messages class for non-ask sections */
.messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
}
.message--solution {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.03);
}
.message--solution .message-content {
  font-size: 1rem;
  line-height: 1.55;
}

/* ── Action Cards (home screen) ── */
.aria-action-cards-home {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 12px 0 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.aria-action-cards-home::-webkit-scrollbar { display: none; }
.aria-action-card-home {
  flex: 0 0 auto;
  width: 160px;
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  scroll-snap-align: start;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.aria-action-card-home:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.aria-action-card-home-img-wrap {
  width: 100%;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  padding: 10px;
}
.aria-action-card-home-img {
  max-width: 64px;
  max-height: 52px;
  object-fit: contain;
  border-radius: 6px;
}
.aria-action-card-home-body {
  padding: 8px 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.aria-action-card-home-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aria-action-card-home-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aria-action-card-home-price {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent, #6c5ce7);
}
.aria-action-card-home-btn {
  margin: 6px 10px 10px;
  padding: 6px 0;
  border: none;
  border-radius: 8px;
  background: var(--accent, #6c5ce7);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  text-align: center;
}
.aria-action-card-home-btn:hover {
  background: var(--accent-hover, #5a4bd1);
}
.aria-action-card-home--food .aria-action-card-home-btn { background: #e74c3c; }
.aria-action-card-home--food .aria-action-card-home-btn:hover { background: #c0392b; }
.aria-action-card-home--food .aria-action-card-home-price { color: #e74c3c; }
.aria-action-card-home--rides .aria-action-card-home-btn { background: #000; }
.aria-action-card-home--shopping .aria-action-card-home-btn { background: #f39c12; }
.aria-action-card-home--shopping .aria-action-card-home-btn:hover { background: #d68910; }

.ask-help-ideas {
  margin-bottom: 20px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
}

.ask-help-ideas-heading {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}

.ask-help-ideas-lead {
  margin: 0 0 14px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.ask-help-ideas-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ask-help-ideas-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
}

.ask-help-ideas-item-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ask-help-ideas-item-title {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
}

.ask-help-ideas-item-desc {
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.ask-help-ideas-use-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}

.ask-help-ideas-use-btn:hover {
  background: rgba(139, 92, 246, 0.12);
}

.placeholder {
  flex: 1;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text);
  padding: 16px 0;
}

.placeholder p {
  margin: 0 0 6px;
}

.placeholder .muted {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.message {
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
}

.message--user {
  margin-left: 24px;
  background: var(--input-bg);
  border-color: var(--accent);
}

.message--assistant .message-content {
  white-space: pre-wrap;
  word-break: break-word;
}

.message-content.typing {
  color: var(--text-muted);
  font-style: italic;
}

.message-content.error {
  color: #f87171;
}

.aria-status-chip {
  margin: 10px 0 8px;
  padding: 8px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
}

.aria-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #93c5fd;
  box-shadow: 0 0 0 0 rgba(147, 197, 253, 0.65);
  animation: aria-status-pulse 1.2s ease-out infinite;
}

.aria-status-chip.is-thinking .aria-status-dot,
.aria-status-chip.is-processing .aria-status-dot {
  background: #fbbf24;
  box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.65);
}

.aria-status-chip.is-speaking .aria-status-dot {
  background: #34d399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.65);
}

@keyframes aria-status-pulse {
  0% { transform: scale(1); opacity: 0.95; }
  70% { transform: scale(1.55); opacity: 0.25; }
  100% { transform: scale(1); opacity: 0.95; }
}

.message-play-audio {
  margin-top: 8px;
  padding: 6px 12px;
  font-size: 0.8rem;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  cursor: pointer;
}

.message-play-audio:hover {
  background: rgba(255, 255, 255, 0.12);
}

.options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.option-card {
  padding: 10px 14px;
  background: var(--input-bg);
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 0.9rem;
  max-width: 200px;
}

.option-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 6px;
}

.input-row {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0;
  background: #2c2c2e;
  border-radius: 999px;
  padding: 8px 8px 8px 12px;
  margin-top: auto;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  min-height: 52px;
  min-width: 320px;
  box-sizing: border-box;
  /* Stay above the glass-chat sheet (z-index 50) so the user can always
     type or tap mic regardless of mode. The input is the gateway between
     text mode (glass up) and voice mode (glass down). */
  position: relative;
  z-index: 60;
}

.input-add-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  border: none;
  background: #0a84ff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: 10px;
}

.input-add-btn:hover {
  background: #409cff;
}

.input-file-hidden {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.main-ask-wrap {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.main-ask-wrap--drag-over::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 132, 255, 0.12);
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  z-index: 10;
  pointer-events: none;
}

.main-ask-wrap--drag-over::after {
  content: 'Drop photos here (max 10)';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1rem;
  color: var(--accent);
  z-index: 11;
  pointer-events: none;
}

.reference-images-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--input-bg);
  border-bottom: 1px solid var(--border);
}

.reference-image-thumb {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
}

.reference-image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.reference-image-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.2rem;
  color: var(--text-muted);
}

.reference-image-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reference-image-remove:hover {
  background: rgba(0, 0, 0, 0.85);
}

.reference-images-cap {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-left: 4px;
}

.reference-video-thumb {
  width: 72px;
  height: 48px;
}

.reference-video-badge {
  position: absolute;
  bottom: 2px;
  left: 2px;
  font-size: 9px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 1px 4px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.input-add-wrap {
  position: relative;
  flex-shrink: 0;
}

.add-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 8px;
  min-width: 180px;
  padding: 6px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 100;
}

.add-menu-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
}

.add-menu-item:hover {
  background: var(--input-bg);
  color: var(--accent);
}

.input {
  flex: 1;
  padding: 10px 14px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 1rem;
  min-width: 0;
}

.input:focus {
  outline: none;
}

.input::placeholder {
  color: var(--text-muted);
}

.input-send-btn,
.input-mic-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 2px;
}

.input-send-btn:hover:not(:disabled),
.input-mic-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

.input-send-btn:not(:disabled) {
  color: var(--accent);
}

.input-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  color: var(--text-muted);
}

/* Mic button: dark purple rounded rect, lighter purple circle, light blue equalizer bars (when on) */
.input-mic-btn {
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  transition: background 0.2s, color 0.2s;
}

.input-mic-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.input-mic-btn-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(148, 148, 160, 0.35);
  background: transparent;
  transition: border-color 0.2s, background 0.2s;
}

/* ── MUTED: default state, owner spec 2026-05-03 ──
   Mic is OFF until user presses `\`. Visual must be unmistakable —
   red ring + red slash so the user can tell at a glance Aria is NOT
   listening. No accidental "is she hearing me?" guessing. */
.input-mic-btn--muted {
  background: rgba(220, 38, 38, 0.12);
  color: rgba(252, 165, 165, 0.95);
  position: relative;
}
.input-mic-btn--muted .input-mic-btn-inner {
  border-color: rgba(220, 38, 38, 0.85);
  background: rgba(220, 38, 38, 0.18);
}
.input-mic-btn--muted:hover {
  background: rgba(220, 38, 38, 0.22);
}
.input-mic-btn--muted:hover .input-mic-btn-inner {
  border-color: rgba(248, 113, 113, 1);
}

.input-mic-btn--on .input-mic-btn-inner {
  border-color: rgba(139, 92, 246, 0.55);
  background: rgba(61, 45, 92, 0.5);
}

.input-mic-btn--on:hover .input-mic-btn-inner {
  border-color: rgba(74, 222, 128, 0.65);
}

.input-mic-btn--on {
  color: rgba(226, 232, 240, 0.95);
  background: rgba(61, 45, 92, 0.85);
}

.input-mic-btn--on:hover {
  background: rgba(71, 55, 105, 0.95);
}

/* Idle state: flat white when no one is speaking */
.input-mic-btn--idle {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
}

.input-mic-btn--idle .input-mic-btn-inner {
  border-color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.08);
}

/* Live speech: direct DOM class — instant blue flash without React re-render */
.input-mic-btn--live-speech {
  background: rgba(31, 111, 255, 0.92) !important;
  color: #eaf4ff !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35), 0 0 14px rgba(31, 111, 255, 0.45) !important;
  animation: mic-live-pulse 0.55s ease-in-out infinite !important;
}

.input-mic-btn--live-speech .input-mic-btn-inner {
  border-color: rgba(168, 206, 255, 0.95) !important;
  background: rgba(24, 90, 204, 0.55) !important;
}

.input-mic-btn--live-speech .input-mic-btn-eq-bar {
  background: rgba(188, 229, 255, 0.96) !important;
  animation: mic-eq 0.45s ease-in-out infinite !important;
  animation-delay: calc(var(--i) * 0.07s) !important;
}

@keyframes mic-live-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5), 0 0 10px rgba(31, 111, 255, 0.3); }
  50%       { box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.2), 0 0 20px rgba(31, 111, 255, 0.5); }
}

/* User speaking: blue */
.input-mic-btn--user-speaking {
  background: rgba(31, 111, 255, 0.9);
  color: #eaf4ff;
}

.input-mic-btn--user-speaking .input-mic-btn-inner {
  border-color: rgba(168, 206, 255, 0.95);
  background: rgba(24, 90, 204, 0.55);
}

.input-mic-btn--user-speaking .input-mic-btn-eq-bar {
  background: rgba(188, 229, 255, 0.96);
}

/* Aria speaking: red (wins over user color if both classes present) */
.input-mic-btn--aria-speaking {
  background: rgba(220, 52, 72, 0.92);
  color: #ffe9ec;
}

.input-mic-btn--aria-speaking .input-mic-btn-inner {
  border-color: rgba(255, 192, 199, 0.95);
  background: rgba(165, 34, 51, 0.55);
}

.input-mic-btn--aria-speaking .input-mic-btn-eq-bar {
  background: rgba(255, 205, 212, 0.96);
}

.input-mic-btn-eq {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  height: 14px;
}

.input-mic-btn-eq-bar {
  width: 3px;
  min-height: 3px;
  height: calc(4px + (var(--i) + 1) * 2px);
  max-height: 14px;
  border-radius: 2px;
  background: rgba(74, 222, 128, 0.7);
  /* Gentle idle wave — always on when mic is open */
  animation: mic-idle 1.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.18s);
  transition: background 0.2s ease;
}

/* Active speaking: fast blue wave */
.input-mic-btn--speaking .input-mic-btn-eq-bar,
.input-mic-btn--live-speech .input-mic-btn-eq-bar {
  animation: mic-eq 0.45s ease-in-out infinite !important;
  animation-delay: calc(var(--i) * 0.07s) !important;
  background: rgba(188, 229, 255, 0.96) !important;
}

/* Aria speaking: purple wave */
.input-mic-btn--aria-speaking .input-mic-btn-eq-bar {
  animation: mic-eq 0.7s ease-in-out infinite !important;
  animation-delay: calc(var(--i) * 0.1s) !important;
  background: rgba(216, 180, 254, 0.96) !important;
}

/* Gentle breathing wave — visible when listening but not actively speaking */
@keyframes mic-idle {
  0%, 100% { height: calc(3px + var(--i) * 1px); }
  50% { height: calc(6px + var(--i) * 2px); }
}

@keyframes mic-eq {
  0%, 100% { height: 5px; }
  25% { height: 10px; }
  50% { height: 14px; }
  75% { height: 8px; }
}

.input-voice-listening {
  font-size: 0.75rem;
  color: var(--accent);
  margin-right: 6px;
  opacity: 0.9;
}

.input-voice-listening--hint {
  color: var(--text-muted);
  font-style: italic;
  max-width: 220px;
}

.input-live-transcript {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-right: 8px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backend-unreachable-banner {
  margin: 0 0 12px;
  padding: 10px 14px;
  background: rgba(200, 60, 60, 0.2);
  border: 1px solid rgba(200, 60, 60, 0.5);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--text, #eee);
}
.backend-unreachable-banner code {
  font-size: 0.8em;
  background: rgba(0,0,0,0.3);
  padding: 2px 6px;
  border-radius: 4px;
}

.input-voice-error {
  margin: 6px 0 0;
  padding: 6px 10px;
  font-size: 0.8rem;
  color: var(--accent);
  background: rgba(255, 200, 100, 0.12);
  border-radius: var(--radius);
}

.input-voice-error-link {
  margin-left: 4px;
  padding: 0 2px;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;
}

.input-voice-error-link:hover {
  opacity: 0.9;
}

.send-btn {
  padding: 12px 20px;
  border-radius: var(--radius);
  border: none;
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
  font-size: 0.95rem;
}

.send-btn:hover:not(:disabled) {
  background: var(--accent-hover);
}

.send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Explore view – TikTok-style vertical feed (auto-play, cover as poster) */
.explore-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.explore-view--feed {
  padding: 0;
}

.explore-header {
  flex-shrink: 0;
  padding: 12px 0 16px;
  border-bottom: 1px solid var(--border);
}

.explore-header--minimal {
  padding: 8px 0 10px;
  border-bottom: 1px solid var(--border);
}

.explore-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
}

.explore-header--minimal .explore-title {
  font-size: 1.1rem;
}

.explore-tagline {
  margin: 6px 0 0;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.explore-header--minimal .explore-tagline {
  margin: 2px 0 0;
  font-size: 0.8rem;
}

.explore-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 0;
}

.explore-muted,
.explore-error {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.explore-error {
  color: #f87171;
}

/* TikTok-style vertical feed: one slide per viewport, scroll-snap, auto-play in view */
.explore-feed {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
}

.explore-slide {
  position: relative;
  width: 100%;
  flex: 0 0 100%;
  min-height: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

/* Each slide = one viewport of the feed (use 100vh so one full screen per video) */
.explore-view--feed .explore-feed {
  height: 100%;
}

.explore-view--feed .explore-slide {
  min-height: 100vh;
  height: auto;
  flex: 0 0 100vh;
}

.explore-slide-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.explore-slide-poster {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 0.2s ease;
}

.explore-slide-poster--only {
  opacity: 1;
}

.explore-slide-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 16px 16px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  pointer-events: none;
}

.explore-slide-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Legacy grid (used when no feed) */
.explore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.explore-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
}

.explore-card:hover {
  border-color: var(--accent);
}

.explore-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.explore-card-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--border);
}

.explore-card-title {
  padding: 10px 12px;
  font-size: 0.9rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ────────────────────────────────────────────────────────────────────────
 *  Explore — full catalog of what Aria can do, organized by category.
 *  Each section has a heading + a 4-up grid of capability tiles.
 *  Live tiles are bright; coming-soon tiles are dimmed with a "Soon" badge.
 * ──────────────────────────────────────────────────────────────────────── */
.explore-view--catalog {
  position: fixed;
  inset: 0;
  /* Lower top padding now that the big "Explore" Allura title IS the page's
     header — no need to push content below an external title bar. */
  padding: 40px 36px 80px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 50;
  background: transparent;
  transition: left 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
body.aria-drawer-open .explore-view--catalog { left: 280px; }
/* ── "Explore" wordmark — big, centered, yellow Allura — sits where the
   HowTo wordmark used to be on the landing page. Same calligraphy + glow
   so it reads as the page's anchor, not a tiny subheading. */
.explore-catalog__header {
  max-width: none;
  margin: 0 auto 36px;
  text-align: center;
  padding-top: 4px;
}
.explore-catalog__title {
  /* Font swappable — pick the winner from /explore-font-preview.html.
     White on dark, no stroke, no glow. */
  font-family: 'Bricolage Grotesque', 'Inter', -apple-system, sans-serif;
  font-size: clamp(110px, 17vw, 220px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1;
  margin: 0;
  user-select: none;
}

/* ── Sticky tab bar at the top — Money / Documents / Create / etc. ─────── */
.explore-catalog__tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  max-width: 1200px;
  margin: 0 auto 24px;
  padding: 10px 4px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
  background: linear-gradient(180deg, rgba(10, 10, 14, 0.92) 0%, rgba(10, 10, 14, 0.75) 70%, rgba(10, 10, 14, 0) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.explore-catalog__tabs::-webkit-scrollbar { height: 4px; }
.explore-catalog__tabs::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.10);
  border-radius: 2px;
}
.explore-catalog__tab {
  flex-shrink: 0;
  appearance: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.65);
  padding: 7px 16px;
  border-radius: 999px;
  font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.18s;
}
.explore-catalog__tab:hover {
  background: rgba(252, 211, 77, 0.10);
  color: rgba(252, 211, 77, 0.95);
  border-color: rgba(252, 211, 77, 0.35);
}
.explore-catalog__tab--active {
  background: #FCD34D;
  color: #1a1a20;
  border-color: #FCD34D;
}

/* ── One horizontally-scrolling row per category ───────────────────────── */
/* max-width math: 4 tiles × 264px + 3 gaps × 12px = 1092px content.
   1100px container = exactly 4 tiles visible at rest. Any 5th+ tile starts
   past the right edge and is hidden until the user scrolls horizontally —
   so every row reads as "4 lined up" whether it has 4 tiles or 8. */
.explore-catalog__row {
  max-width: 1500px;
  margin: 0 auto 32px;
  scroll-margin-top: 80px;   /* so smooth-scroll-on-tab lands below sticky tabs */
}
.explore-catalog__row-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 12px;
  padding: 0 4px;
}
.explore-catalog__row-title {
  font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.015em;
  margin: 0;
}
.explore-catalog__row-tag {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
}

/* The whole row of capability tiles sits INSIDE one large liquid-glass
   container — the individual tile buttons are nested inside it. Same
   visual language as the iOS 26 widget surfaces. */
.explore-catalog__row-track {
  /* Row-track IS the clickable button now. Inner tiles are decorative. */
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: inherit;
  width: 100%;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Row-track fills the row's max-width; no negative margins needed. */
  padding: 32px 28px 36px;
  margin: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.10) transparent;
  position: relative;
  transition: transform 0.18s cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 0.22s ease, border-color 0.22s ease;
  /* ── Frosted glass — clean iOS-style ─────────────────────────────────
     Translucent white body + heavy backdrop blur + saturate so colors
     behind it pop a little. Soft white border + light top sheen. */
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow:
    /* Top inner sheen — the "wet" highlight on the upper rim */
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    /* Subtle bottom inner shadow for depth */
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    /* Soft drop shadow */
    0 8px 24px rgba(0, 0, 0, 0.28);
}
/* Top sheen — that classic "lit from above" frosted-glass highlight */
.explore-catalog__row-track::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 32px;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.00) 35%);
  z-index: 0;
}
.explore-catalog__row-track > * { position: relative; z-index: 1; }
.explore-catalog__row-track::-webkit-scrollbar { height: 6px; }
.explore-catalog__row-track::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.10);
  border-radius: 3px;
}
.explore-catalog__row-track::-webkit-scrollbar-thumb:hover {
  background: rgba(252, 211, 77, 0.30);
}

/* Hover — lift + subtle BACKLIT effect: light glows from BEHIND the glass,
   not the front. Front anatomy unchanged; faint warm halo around the edge. */
.explore-catalog__row-track:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    /* Same internal anatomy — front doesn't change */
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    /* Soft backlight — dialed way down */
    0 0 32px rgba(252, 211, 77, 0.14),
    0 0 80px rgba(252, 211, 77, 0.08),
    /* Drop shadow so the lift reads */
    0 16px 36px rgba(0, 0, 0, 0.40);
}
.explore-catalog__row-track:active {
  transform: translateY(-2px);
}

/* Inner tiles are decorative now — no pointer events, no hover transform,
   no transitions. Only the OUTER big-glass pane responds to mouse. */
.aria-cap-tile,
.aria-cap-tile:hover,
.aria-cap-tile:active,
.aria-cap-tile:focus {
  pointer-events: none;
  transform: none !important;
  transition: none;
}

/* ── Aria capability tile — matches the home page .aria-card style ────────
 *   Title ABOVE in bold white, dark gradient "art" bubble BELOW with a
 *   glossy top sheen + the emoji + capability name centered inside.
 *   Same visual language as the 4 showcase cards on the landing page. */
.aria-cap-tile {
  flex-shrink: 0;
  width: 220px;
  height: 184px;
  scroll-snap-align: start;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* Title sits centered ABOVE the glass card; small gap between them. */
  gap: 8px;
  font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
  text-align: left;
  position: relative;
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Inner tiles are DECORATIVE now — no hover lift, no hover transform.
   The outer big-glass pane is what responds to the mouse. */
.aria-cap-tile--coming { opacity: 0.78; }

/* Title sits ABOVE the box, bold (matches .aria-card__title exactly) */
.aria-cap-tile__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  color: #f0f1f5;
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: 0;
  flex-shrink: 0;
}

/* Liquid-glass bubble — proper iOS 26 / VisionOS treatment.  The body is
   mostly TRANSLUCENT (no solid dark base) so the backdrop blur picks up
   whatever sits behind, then we layer a strong radial specular at the
   top-left and a bright top-edge rim so the glass actually reads as glass. */
.aria-cap-tile__art {
  flex: 1;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background:
    /* Strong specular at top-left so the glass surface catches the "light" */
    radial-gradient(
      ellipse 100% 70% at 22% 0%,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.08) 22%,
      rgba(255, 255, 255, 0.00) 55%
    ),
    /* Soft warm body so the tile still has presence on a dark background */
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.04) 50%,
      rgba(255, 255, 255, 0.06) 100%
    ),
    /* Very subtle dark tint so legibility holds at any background brightness */
    linear-gradient(135deg, rgba(31, 31, 36, 0.55) 0%, rgba(20, 20, 26, 0.55) 100%);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow:
    /* Mirror-bright top edge */
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    /* Sub-top glow that fades down — that classic Apple glass arc */
    inset 0 8px 18px rgba(255, 255, 255, 0.06),
    /* Bottom rim refraction glow */
    inset 0 -1px 0 rgba(255, 255, 255, 0.18),
    /* Inside darkening at the bottom for depth */
    inset 0 -10px 18px rgba(0, 0, 0, 0.10),
    /* Floating drop shadow */
    0 12px 32px rgba(0, 0, 0, 0.45),
    /* Hair-thin halo outside the border */
    0 0 0 0.5px rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.22s ease, border-color 0.22s ease, transform 0.18s ease;
}
/* Glossy top-arc highlight — secondary specular layer above the radial. */
.aria-cap-tile__art::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 38%);
  pointer-events: none;
  z-index: 2;
}
/* Inner tiles no longer respond to hover — the OUTER big-glass pane handles
   the entire interaction. Tile keeps its static liquid-glass look only. */

.aria-cap-tile__art-emoji {
  font-size: 2.4rem;
  line-height: 1;
  z-index: 3;
  filter: saturate(1.05);
}
/* Title inside the glass card — bold, bright, prominent. (Used to be a
   muted secondary label below the emoji, but now it IS the title since
   the title-above the card has been removed.) */
.aria-cap-tile__art-label {
  font-size: 15px;
  font-weight: 800;
  color: #f0f1f5;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: center;
  z-index: 3;
  padding: 0 6px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Status badge floats top-right of the art bubble */
.aria-cap-tile__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.4;
  z-index: 4;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.aria-cap-tile__badge--beta {
  background: rgba(80, 200, 120, 0.25);
  color: #6BE095;
}
.aria-cap-tile__badge--coming {
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.70);
}

/* Keep the legacy --cards class around — only the old call sites should
   ever hit this, but if they do, render acceptable defaults instead of a
   broken layout. */
.explore-view--cards {
  position: fixed;
  inset: 0;
  /* Top padding clears the floating HowTo wordmark; bottom gives a calm
     stop after the last row instead of jamming up to the viewport edge. */
  padding: 200px 36px 80px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 50;
  background: transparent;
  transition: left 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
body.aria-drawer-open .explore-view--cards {
  left: 280px;
}

.explore-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px 18px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  justify-items: center;
}
@media (max-width: 1180px) {
  .explore-cards-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .explore-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .explore-cards-grid { grid-template-columns: 1fr; }
}

/* Explore-tab card overrides — same look as .aria-card but lets the grid
   own the width so the 4-column layout is rigid. */
.explore-aria-card {
  width: 100%;
  max-width: 280px;
  height: 184px;
}

/* Camera modal */
.camera-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.camera-modal {
  width: 90vw;
  max-width: 560px;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}

.camera-modal-video {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  background: #000;
  object-fit: cover;
}

.camera-modal-actions {
  display: flex;
  gap: 12px;
  padding: 16px;
  justify-content: flex-end;
}

.camera-modal-btn {
  padding: 10px 18px;
  border-radius: var(--radius);
  border: none;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.camera-modal-btn--cancel {
  background: var(--input-bg);
  color: var(--text);
}

.camera-modal-btn--cancel:hover {
  background: var(--border);
}

.camera-modal-btn--capture {
  background: var(--accent);
  color: var(--bg);
}

.camera-modal-btn--capture:hover {
  background: var(--accent-hover);
}

/* Captured image preview */
.captured-preview {
  position: fixed;
  bottom: 100px;
  right: 24px;
  width: 160px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  z-index: 500;
}

.captured-preview img {
  display: block;
  width: 100%;
  height: auto;
}

.captured-preview-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.captured-preview-close:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Desktop app: mandatory update notification (bottom-left) */
.desktop-update-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.desktop-update-modal {
  background: var(--surface, #1c1c1e);
  border: 1px solid var(--border, #38383a);
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 400px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.desktop-update-modal-title {
  margin: 0 0 10px;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text, #fff);
}

.desktop-update-modal-text {
  margin: 0 0 24px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-muted, #98989d);
}

.desktop-update-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.desktop-update-modal-btn {
  padding: 10px 20px;
  border-radius: var(--radius, 10px);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
}

.desktop-update-modal-btn--primary {
  background: var(--accent, #0a84ff);
  color: var(--bg, #fff);
}

.desktop-update-modal-btn--primary:hover {
  background: var(--accent-hover, #409cff);
}

.desktop-update-modal-btn--primary:disabled {
  opacity: 0.8;
  cursor: wait;
}

.desktop-update-modal-btn--secondary {
  background: var(--input-bg, #2c2c2e);
  color: var(--text-muted, #98989d);
}

.desktop-update-modal-btn--secondary:hover {
  color: var(--text, #fff);
}

.desktop-update-banner {
  position: fixed;
  bottom: 20px;
  /* Clear left sidebar (200px when open, 48px closed): sit in content area so always visible */
  left: 220px;
  z-index: 10002;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: var(--surface, #1c1c1e);
  border: 1px solid var(--accent, #0a84ff);
  border-radius: var(--radius, 10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  max-width: min(420px, calc(100vw - 240px));
}

.desktop-update-banner-text {
  font-size: 0.9rem;
  color: var(--text, #fff);
  flex: 1;
  min-width: 0;
}

.desktop-update-banner-download {
  flex-shrink: 0;
  padding: 10px 18px;
  border-radius: 8px;
  border: none;
  background: #0a84ff;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.desktop-update-banner-download:hover {
  background: #409cff;
  color: #fff;
}

.desktop-update-footer {
  position: fixed;
  bottom: 20px;
  left: 220px;
  z-index: 10001;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  font-size: 0.8rem;
  color: var(--text-muted, #98989d);
}

.desktop-update-footer-version {
  font-variant-numeric: tabular-nums;
}

.desktop-update-footer-check {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border, #38383a);
  background: transparent;
  color: var(--text-muted, #98989d);
  font-size: 0.8rem;
  cursor: pointer;
}

.desktop-update-footer-check:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text, #fff);
}

.desktop-update-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9998;
  padding: 10px 20px;
  background: var(--surface, #1c1c1e);
  border: 1px solid var(--border, #38383a);
  border-radius: var(--radius, 10px);
  font-size: 0.9rem;
  color: var(--text-muted, #98989d);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.desktop-update-toast--error {
  border-color: rgba(220, 80, 80, 0.5);
  color: #f0a0a0;
}

.desktop-update-toast--info {
  max-width: 480px;
  border-color: rgba(10, 132, 255, 0.4);
  color: #a0c8ff;
}

.desktop-update-toast--info code {
  font-size: 0.85em;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}

/* ── Message feedback (thumbs up/down) ── */
.message-feedback {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.message:hover .message-feedback,
.message--solution:hover .message-feedback {
  opacity: 1;
}
.message-feedback-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  display: flex;
  align-items: center;
}
.message-feedback-btn:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--border);
  background: rgba(255,255,255,0.05);
}
.message-feedback-btn:disabled {
  cursor: default;
}
.message-feedback-btn--active {
  color: rgba(52, 211, 153, 0.9) !important;
  border-color: rgba(52, 211, 153, 0.3) !important;
}
.message-feedback-btn--active-down {
  color: rgba(239, 68, 68, 0.9) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}


/* ── AccountMenu (top-right banner) ──────────────────────────────────────── */
/* ─── Aria Top-Right Persistent Text Bubble ───────────────────────────
   Small pill-shaped surface in the header right slot. Always visible.
   Aria's latest text message previews here; click to open conversation.
   This is the silent companion to the strict mic-mute rule: when she
   can't speak, this is where her words land. */
.aria-top-bubble {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(360px, 38vw);
  height: 32px;
  padding: 0 14px;
  margin-right: 8px;
  border-radius: 16px;
  border: 1px solid rgba(120, 255, 160, 0.20);
  background: rgba(20, 24, 22, 0.55);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  color: rgba(255, 255, 255, 0.92);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-align: left;
}
.aria-top-bubble:hover {
  background: rgba(30, 36, 34, 0.75);
  border-color: rgba(120, 255, 160, 0.40);
}
.aria-top-bubble:active { transform: translateY(0.5px); }
.aria-top-bubble--muted {
  color: rgba(255, 255, 255, 0.45);
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(20, 22, 24, 0.45);
}
.aria-top-bubble__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.55);
  flex-shrink: 0;
}
.aria-top-bubble--muted .aria-top-bubble__dot {
  background: rgba(255, 255, 255, 0.30);
  box-shadow: none;
}
.aria-top-bubble__text {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
}

.account-pill {
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 14px; margin-left: 8px;
  border-radius: 14px; border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.04); color: #f5f5f5;
  font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; line-height: 1;
  transition: background 0.15s, border-color 0.15s;
}
.account-pill:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.30); }
.account-pill:active { transform: translateY(0.5px); }

.account-wrap { position: relative; margin-left: 8px; display: inline-block; }
.account-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #5a8dee, #3a6cf0);
  color: #fff; font-weight: 600; font-size: 13px;
  border: none; cursor: pointer; padding: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.account-avatar:hover { filter: brightness(1.10); }

.account-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 200px; padding: 6px 0;
  background: rgba(20,20,24,0.98); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 9999;
}
.account-menu__email {
  padding: 8px 14px; font-size: 12px; color: #aaa;
  border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 240px;
}
.account-menu__item {
  display: block; width: 100%; padding: 8px 14px;
  background: transparent; border: none; color: #f5f5f5;
  text-align: left; cursor: pointer; font-size: 13px;
}
.account-menu__item:hover { background: rgba(255,255,255,0.08); }

/* ── Apple-bubble account dropdown — frosted glass, themed & readable ──
   Higher specificity (body …) so it wins over both .account-menu blocks. */
body .account-menu {
  border-radius: 16px;
  backdrop-filter: blur(30px) saturate(175%);
  -webkit-backdrop-filter: blur(30px) saturate(175%);
  padding: 6px;
}
body:not(.theme-light) .account-menu {
  background: rgba(24,24,30,0.78);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 16px 44px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
}
body.theme-light .account-menu {
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 16px 44px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.7);
}
body .account-menu__item { border-radius: 10px; }
body.theme-light .account-menu__item { color: #1d1d1f; }
body.theme-light .account-menu__item:hover { background: rgba(0,0,0,0.06); }
body.theme-light .account-menu__email { color: #5c5c63; border-bottom-color: rgba(0,0,0,0.08); }

/* Sign-in / sign-up modal */
/* ── Auth modal — sign in vs create account ──────────────────────────────
 *   Shared backdrop + chrome. Two visual variants:
 *     --signin: compact, neutral blue/white accent (returning users)
 *     --signup: taller, hero header, Aria-yellow accent (new users)
 * ──────────────────────────────────────────────────────────────────────── */
.account-modal__backdrop {
  position: fixed; inset: 0;
  background: rgba(8, 8, 12, 0.30);   /* light dim — the page blur does most of the work */
  display: flex; align-items: center; justify-content: center;
  z-index: 10000;
  animation: ariaBackdropFade 0.22s ease-out;
}
.account-modal {
  position: relative;
  width: 400px;
  max-width: calc(100vw - 32px);
  background: #1a1a20;                /* modal itself stays fully solid */
  color: #f5f5f5;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 32px 30px 26px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 30px 80px rgba(0,0,0,0.65);
  animation: ariaLandingFade 0.28s ease-out;
}

/* Signup variant — taller card, warm yellow halo at the top */
.account-modal--signup {
  width: 440px;
  padding-top: 36px;
  border-color: rgba(252, 211, 77, 0.15);
}
.account-modal--signup::before {
  content: '';
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(252,211,77,0.6), transparent);
  border-radius: 999px;
}

/* Close button — floats top-right */
.account-modal__close {
  position: absolute;
  top: 14px; right: 16px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.45);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.account-modal__close:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
}

/* Hero header — title + subtitle */
.account-modal__hero {
  text-align: center;
  margin-bottom: 22px;
}
.account-modal__brand {
  /* Yellow HowTo wordmark — anchors the modal as the brand moment */
  font-family: 'Allura', 'Snell Roundhand', cursive;
  font-size: 56px;
  font-weight: 400;
  line-height: 0.9;
  color: #FCD34D;
  -webkit-text-stroke: 1.5px #FCD34D;
  text-stroke: 1.5px #FCD34D;
  text-shadow: 0 0 20px rgba(252,211,77,0.35), 0 0 40px rgba(252,211,77,0.15);
  margin-bottom: 10px;
}
/* Smaller variant for the sign-in screen — quieter than signup */
.account-modal__brand--small {
  font-size: 40px;
  -webkit-text-stroke: 1px #FCD34D;
  text-stroke: 1px #FCD34D;
  text-shadow: 0 0 12px rgba(252,211,77,0.25);
  margin-bottom: 6px;
}

/* When a modal opens, blur the entire page behind it. Hero (HowTo wordmark)
   stays visible — it just goes soft so the modal can hold focus while the
   brand still anchors the background. */
body.aria-modal-open .app-center,
body.aria-modal-open .app-sidebar-left {
  filter: blur(10px) saturate(115%);
  transition: filter 0.22s ease;
}
/* Don't blur the modal itself — it lives outside .app-center via portal,
   but if it ever doesn't, this protects it. */
body.aria-modal-open .account-modal__backdrop,
body.aria-modal-open .account-modal {
  filter: none !important;
}
.account-modal__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: #ffffff;
}
.account-modal__subtitle {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.55);
  margin: 0;
  max-width: 320px;
  margin-left: auto; margin-right: auto;
}

/* Form */
.account-modal__form {
  display: flex; flex-direction: column;
  gap: 14px;
}
.account-modal__field {
  display: flex; flex-direction: column; gap: 6px;
}
.account-modal__label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.account-modal__field input {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.10);
  color: #f5f5f5;
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  font-size: 14.5px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.account-modal__field input::placeholder {
  color: rgba(255,255,255,0.32);
}
.account-modal__field input:focus {
  border-color: rgba(90,141,238,0.65);
  background: rgba(90,141,238,0.06);
}
/* Signup uses yellow focus accent to match the brand */
.account-modal--signup .account-modal__field input:focus {
  border-color: rgba(252,211,77,0.7);
  background: rgba(252,211,77,0.06);
}

.account-modal__err {
  color: #ff8a8a;
  font-size: 12.5px;
  background: rgba(255,107,107,0.08);
  border: 1px solid rgba(255,107,107,0.25);
  padding: 9px 12px;
  border-radius: 8px;
  margin-top: -2px;
}

.account-modal__submit {
  margin-top: 4px;
  padding: 13px 14px;
  background: linear-gradient(135deg, #5a8dee, #3a6cf0);
  color: #fff;
  border: none;
  border-radius: 12px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  transition: filter 0.12s, transform 0.08s, box-shadow 0.15s;
}
.account-modal__submit:hover:not(:disabled) {
  filter: brightness(1.10);
  transform: translateY(-1px);
}
.account-modal__submit:active:not(:disabled) { transform: translateY(0); }
.account-modal__submit:disabled { opacity: 0.55; cursor: wait; }

/* Signup variant: yellow CTA so creating an account feels celebratory */
.account-modal--signup .account-modal__submit {
  background: linear-gradient(135deg, #FCD34D, #f59e0b);
  color: #1a1a1d;
  box-shadow: 0 4px 18px rgba(252,211,77,0.25);
}
.account-modal--signup .account-modal__submit:hover:not(:disabled) {
  box-shadow: 0 6px 22px rgba(252,211,77,0.40);
}

.account-modal__toggle {
  font-size: 12.5px;
  color: rgba(255,255,255,0.45);
  text-align: center;
  margin-top: 10px;
}
.account-modal__toggle a {
  color: #7aa6ff;
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
}
.account-modal__toggle a:hover { text-decoration: underline; }
.account-modal--signup .account-modal__toggle a { color: #FCD34D; }

/* ── Post-signup subscription pitch ──────────────────────────────────────
 *   Different visual variant: yellow plan card, toggle row, expandable
 *   details panel, primary + skip CTA. */
.account-modal--subscribe {
  width: 480px;
  border-color: rgba(252, 211, 77, 0.22);
}
.account-modal--subscribe::before {
  content: '';
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(252,211,77,0.7), transparent);
  border-radius: 999px;
}

/* The plan card itself */
.aria-plan {
  position: relative;
  padding: 18px 18px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(252,211,77,0.10), rgba(252,211,77,0.04));
  border: 1px solid rgba(252,211,77,0.30);
  margin: 6px 0 16px;
}
.aria-plan__badge {
  position: absolute;
  top: -10px; left: 16px;
  background: #FCD34D;
  color: #1a1a1d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  padding: 3px 9px;
  border-radius: 999px;
}
.aria-plan__top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px;
  margin-bottom: 10px;
}
.aria-plan__name {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}
.aria-plan__tagline {
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
}
.aria-plan__price {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  color: #FCD34D;
}
.aria-plan__amount {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.aria-plan__period {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.8;
}
.aria-plan__perks {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 6px;
}
.aria-plan__perks li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  line-height: 1.45;
}
.aria-plan__perks li::before {
  content: '✓';
  position: absolute;
  left: 0; top: 0;
  color: #FCD34D;
  font-weight: 800;
  font-size: 12px;
}

/* Extra-usage toggle row */
.aria-plan-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  cursor: pointer;
  margin-bottom: 8px;
}
.aria-plan-switch__text { flex: 1; }
.aria-plan-switch__label {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}
.aria-plan-switch__sub {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255,255,255,0.5);
}

/* iOS-style toggle */
.aria-toggle {
  position: relative;
  width: 44px;
  height: 26px;
  display: inline-block;
  flex-shrink: 0;
}
.aria-toggle input {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}
.aria-toggle__thumb {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  transition: background 0.2s ease;
}
.aria-toggle__thumb::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.aria-toggle--on .aria-toggle__thumb {
  background: #FCD34D;
}
.aria-toggle--on .aria-toggle__thumb::after {
  transform: translateX(18px);
}

/* "See more options" toggle */
.aria-plan-more-btn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.55);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0;
  text-align: center;
  width: 100%;
  transition: color 0.15s;
}
.aria-plan-more-btn:hover { color: #FCD34D; }

.aria-plan-more {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.aria-plan-more p {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.72);
  margin: 0 0 8px;
}
.aria-plan-more p:last-child { margin-bottom: 0; }
.aria-plan-more strong { color: #FCD34D; font-weight: 700; }

/* CTA cluster — primary subscribe + skip */
.aria-plan-actions {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 6px;
}
.account-modal--subscribe .account-modal__submit {
  background: linear-gradient(135deg, #FCD34D, #f59e0b);
  color: #1a1a1d;
  box-shadow: 0 4px 18px rgba(252,211,77,0.25);
}
.account-modal--subscribe .account-modal__submit:hover:not(:disabled) {
  box-shadow: 0 6px 22px rgba(252,211,77,0.40);
}

.aria-plan-skip {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.55);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
  border-radius: 10px;
  transition: color 0.15s, background 0.15s;
}
.aria-plan-skip:hover {
  color: #fff;
  background: rgba(255,255,255,0.04);
}

/* ── Support chat — Aria in support-agent mode ───────────────────────────
 *   A floating chat panel pinned bottom-right. Distinct from the main
 *   home conversation surface. Yellow brand accent. */
/* No backdrop — the support panel floats on top of the app and the user
   can keep typing / clicking everything else. Only the × closes it. */
.support-chat {
  position: fixed;
  /* left/top set inline from React state (draggable). */
  width: 380px;
  max-width: calc(100vw - 32px);
  height: min(560px, calc(100vh - 60px));
  background: linear-gradient(180deg, #1d1d23 0%, #15151a 100%);
  border: 1px solid rgba(252, 211, 77, 0.20);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.65);
  display: flex; flex-direction: column;
  overflow: hidden;
  z-index: 2147483647; /* on top of everything; no backdrop blocking the app */
  animation: ariaLandingFade 0.22s ease-out;
}
.support-chat__header { cursor: grab; }
.support-chat__header:active { cursor: grabbing; }
.support-chat__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.support-chat__title { display: flex; align-items: center; gap: 10px; }
.support-chat__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #FCD34D;
  box-shadow: 0 0 12px rgba(252,211,77,0.6);
}
.support-chat__name {
  font-size: 14px; font-weight: 700; color: #fff; line-height: 1;
}
.support-chat__role {
  font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 2px;
}
.support-chat__close {
  background: transparent; border: none;
  color: rgba(255,255,255,0.5);
  font-size: 22px; line-height: 1; cursor: pointer;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.support-chat__close:hover {
  color: #fff; background: rgba(255,255,255,0.08);
}

.support-chat__body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 14px 14px 6px;
  display: flex; flex-direction: column; gap: 8px;
}
.support-chat__bubble {
  max-width: 84%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.4;
  word-wrap: break-word;
}
.support-chat__bubble--assistant {
  align-self: flex-start;
  background: rgba(255,255,255,0.06);
  color: #f0f1f5;
  border-bottom-left-radius: 4px;
}
.support-chat__bubble--user {
  align-self: flex-end;
  background: linear-gradient(135deg, #FCD34D, #f59e0b);
  color: #1a1a1d;
  font-weight: 600;
  border-bottom-right-radius: 4px;
}
.support-chat__typing {
  display: inline-flex; gap: 4px;
  padding: 12px 14px;
}
.support-chat__typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  animation: aria-msg-dot 1.2s infinite ease-in-out;
}
.support-chat__typing span:nth-child(2) { animation-delay: 0.15s; }
.support-chat__typing span:nth-child(3) { animation-delay: 0.30s; }

.support-chat__input-row {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.support-chat__input-row input {
  flex: 1;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.10);
  color: #f5f5f5;
  border-radius: 999px;
  padding: 9px 14px;
  font: inherit;
  font-size: 13.5px;
  outline: none;
}
.support-chat__input-row input:focus {
  border-color: rgba(252,211,77,0.5);
}
.support-chat__input-row button {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #fff;
  color: #1a1a1d;
  border: none;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  flex-shrink: 0;
}
.support-chat__input-row button:hover:not(:disabled) {
  background: #e8e8ec;
}
.support-chat__input-row button:disabled {
  opacity: 0.5; cursor: not-allowed;
}
/* Mic button (talk to the agent) — sits in the input row; off = subtle, on = red recording. */
.support-chat__input-row .support-chat__mic {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  box-shadow: none;
}
.support-chat__input-row .support-chat__mic:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}
.support-chat__input-row .support-chat__mic--on {
  background: #ef4444;
  color: #ffffff;
  animation: support-mic-pulse 1.4s ease-in-out infinite;
}
@keyframes support-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); }
}
body.theme-light .support-chat__input-row .support-chat__mic { background: rgba(0,0,0,0.06); color: rgba(0,0,0,0.55); }
body.theme-light .support-chat__input-row .support-chat__mic:hover { background: rgba(0,0,0,0.11); color: #12131a; }
body.theme-light .support-chat__input-row .support-chat__mic--on { background: #ef4444; color: #ffffff; }

/* ── Assist-mode panel skinned like the Support box (owner request) ─────────
   In Assist mode the main window is shrunk + pinned top-right (main.js). Make
   its content read like the polished support-chat box: dark rounded panel, amber
   hairline border, slim header, pill text input + round white send button. We
   keep ScreenShareView mounted (it owns the screen stream + the mic capture) and
   ONLY restyle/trim its chrome — capture is untouched. Scoped to
   .app--assist-compact so the normal full-page Assist view is unaffected. */
.app--assist-compact .screen-share-view {
  background: linear-gradient(180deg, #1d1d23 0%, #15151a 100%);
  border: 1px solid rgba(252, 211, 77, 0.20);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
/* Trim the full-page chrome down to a clean support-style panel. */
.app--assist-compact .screen-share-tagline,
.app--assist-compact .screen-share-hint,
/* The status HUD already says "Assist / Listening / Working" — the separate
   "Screen is being shared" live banner is redundant in the compact panel and
   makes it read like the old cluttered share view instead of the clean support
   box. Hide it (the header's Stop control still ends the share). */
.app--assist-compact .screen-share-live-banner { display: none; }
.app--assist-compact .screen-share-header {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.app--assist-compact .screen-share-header h2 {
  font-size: 14px; font-weight: 700; color: #fff;
}
.app--assist-compact .back-btn {
  font-size: 12px; padding: 4px 10px; opacity: 0.7;
}
/* Input row → support-chat pill input + round white send button. */
.app--assist-compact .screen-share-input-row {
  padding: 10px 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.app--assist-compact .screen-share-input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 13.5px;
  color: #f5f5f5;
}
.app--assist-compact .screen-share-input:focus {
  border-color: rgba(252, 211, 77, 0.5);
  outline: none;
}
.app--assist-compact .input-send-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #fff;
  color: #1a1a1d;
  flex-shrink: 0;
}

/* ── Live read-along subtitle (turns on whenever Aria speaks) ─────────────── */
.aria-subtitle {
  position: fixed;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
  max-width: min(820px, 88vw);
  z-index: 1200;
  pointer-events: none;
  display: flex;
  justify-content: center;
  animation: ariaSubIn 0.22s ease-out;
}
.aria-subtitle__inner {
  background: rgba(8, 10, 16, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  padding: 13px 22px;
  text-align: center;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.5);
}
.aria-sub-word {
  color: rgba(255, 255, 255, 0.42);   /* not yet spoken — dim */
  transition: color 0.12s ease, text-shadow 0.12s ease;
}
.aria-sub-word.spoken {
  color: #ffffff;                       /* spoken — bright, reads along */
  text-shadow: 0 0 10px rgba(0, 217, 255, 0.35);
}
@keyframes ariaSubIn { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Out-of-credits modal */
/* ── Embedded payment sheet (Stripe Elements — on-site, no redirect) ─────── */
.paysheet__backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.68);
  display: flex; align-items: center; justify-content: center;
  z-index: 10002; backdrop-filter: blur(8px); padding: 20px;
}
.paysheet {
  position: relative;
  width: 460px; max-width: 100%; max-height: 92vh; overflow-y: auto;
  background: linear-gradient(165deg, rgba(22, 22, 27, 0.98), rgba(13, 13, 16, 0.98));
  color: #fff;
  border: 1px solid rgba(252, 211, 77, 0.30);   /* yellow HowTo hairline */
  border-radius: 20px; padding: 28px 26px 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.paysheet__close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; color: rgba(255, 255, 255, 0.55);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 4px;
}
.paysheet__close:hover { color: #fff; }
.paysheet__title { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 4px; color: #fff; }
.paysheet__price { font-size: 14px; color: #fcd34d; margin: 0 0 18px; font-weight: 600; }
.paysheet__loading { font-size: 14px; color: #9ca3af; padding: 24px 0; text-align: center; }
.paysheet__error { font-size: 13px; color: #ff8a8a; margin: 12px 0 0; line-height: 1.4; }
.paysheet__form { margin-top: 6px; display: flex; flex-direction: column; gap: 14px; }
.paysheet__pay {
  background: linear-gradient(135deg, #fcd34d, #f5b820);
  color: #1a1a1a; font: inherit; font-size: 15px; font-weight: 700;
  border: none; border-radius: 12px; padding: 13px 18px; cursor: pointer;
  transition: filter 0.15s, transform 0.05s;
}
.paysheet__pay:hover:not(:disabled) { filter: brightness(1.06); }
.paysheet__pay:active:not(:disabled) { transform: translateY(1px); }
.paysheet__pay:disabled { opacity: 0.6; cursor: default; }
.paysheet__cancel {
  background: none; border: none; color: rgba(255, 255, 255, 0.6);
  font: inherit; font-size: 13px; cursor: pointer; padding: 4px;
}
.paysheet__cancel:hover { color: #fff; }
.paysheet__secure { font-size: 11.5px; color: rgba(255, 255, 255, 0.4); text-align: center; margin: 4px 0 0; line-height: 1.4; }

.ooc-modal__backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.62);
  display: flex; align-items: center; justify-content: center;
  z-index: 10001; backdrop-filter: blur(6px);
}
.ooc-modal {
  position: relative;
  width: 380px; max-width: calc(100vw - 32px);
  background: linear-gradient(180deg, #1c1c22, #15151a);
  color: #f5f5f5;
  border: 1px solid rgba(255,255,255,0.10); border-radius: 16px;
  padding: 28px 24px 22px; box-shadow: 0 24px 70px rgba(0,0,0,0.7);
  text-align: center;
}
.ooc-modal__close {
  position: absolute; top: 10px; right: 12px;
  background: transparent; border: none; color: #888; font-size: 22px;
  line-height: 1; cursor: pointer; padding: 4px 8px;
}
.ooc-modal__close:hover { color: #fff; }
.ooc-modal__title { font-size: 19px; font-weight: 600; margin: 0 0 10px; }
.ooc-modal__body { font-size: 14px; color: #b5b5b8; margin: 0 0 20px; line-height: 1.5; }
.ooc-modal__cta {
  width: 100%; padding: 12px 14px;
  background: linear-gradient(135deg, #5a8dee, #3a6cf0); color: #fff;
  border: none; border-radius: 10px; font: inherit; font-weight: 600;
  cursor: pointer; font-size: 15px;
}
.ooc-modal__cta:hover { filter: brightness(1.08); }
.ooc-modal__dismiss {
  width: 100%; margin-top: 10px; padding: 9px 14px;
  background: transparent; color: #888;
  border: none; font: inherit; font-size: 13px;
  cursor: pointer;
}
.ooc-modal__dismiss:hover { color: #ccc; }

/* Free-credits badge near the input */
.aria-credits-badge {
  display: inline-flex; align-items: center;
  font-size: 11px; color: #888;
  padding: 3px 8px; border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  margin-left: 8px;
  user-select: none;
}
.aria-credits-badge--low { color: #f4b860; border-color: rgba(244,184,96,0.25); background: rgba(244,184,96,0.08); }
.aria-credits-badge--out { color: #ff6b6b; border-color: rgba(255,107,107,0.30); background: rgba(255,107,107,0.10); }


/* ────────────────────────────────────────────────────────────────────────
 * 2026-05-30 — Chat layout cleanup (Braeden):
 *   1. Hide the "● ARIA" sender tag — color + bubble side already tells the user
 *   2. Bump glass-chat top padding so the first bubble clears the header
 *   3. Tighten vertical rhythm between bubbles so groups don't feel sloppy
 * ──────────────────────────────────────────────────────────────────────── */

/* 1. Kill the green-dot "ARIA" tag above each Aria bubble group */
.aria-bubble-tag { display: none !important; }

/* 2. First bubble must clear the fixed header (gear + title + download pills)
      The header is ~64px tall. Add buffer so bubbles never get hidden behind it. */
.aria-glass-chat-inner { padding-top: 120px !important; }

/* 3. Slightly tighter bubble rhythm so the whole conversation reads as one block */
.aria-bubble-row { margin: 2px 0 !important; }
.aria-bubble-row--ai + .aria-bubble-row--user,
.aria-bubble-row--user + .aria-bubble-row--ai { margin-top: 14px !important; }

/* 4. Make sure the header always wins the z-fight against the chat surface */
.header, .header--minimal { z-index: 60 !important; position: relative; }

/* Hide the small "Aria" header title — the big yellow hero is the brand
   moment now. We keep the title row mounted for the live mic status pill
   but the wordmark itself disappears. */
.header-title-name { display: none !important; }

/* ────────────────────────────────────────────────────────────────────────
 * 2026-05-30 — Header cleanup + orb removal (Braeden):
 *   1. Hide the Aria particle orb in the background
 *   2. Force header to: [gear] [Aria title] ────── [Mac] [Win] [Profile]
 *      Only those items at the top. Profile = AccountMenu = login/settings.
 * ──────────────────────────────────────────────────────────────────────── */

/* (Orb kill rule removed 2026-06-05 — the .aria-universe element no longer
   renders, so there's nothing left to hide.) Keep the solid dark fill: */
body, .app { background: var(--bg, #0a0a0e) !important; }

/* 2. Header layout — single row, gear+title left, pills+profile right */
.header,
.header--minimal {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 20px !important;
}

/* Title row stays left, then EVERYTHING else flows to the right */
.header .header-title-row,
.header--minimal .header-title-row { flex-shrink: 0; }

/* Downloads block pushed to the far right. The AccountMenu (rendered after
   it in JSX) sits to its right naturally because flex-row appends. */
.header .download-corner-strip,
.header--minimal .download-corner-strip,
.header > .download-corner-pill:first-of-type,
.header--minimal > .download-corner-pill:first-of-type {
  margin-left: auto;
}

/* If downloads are wrapped in a parent div, push that parent right instead */
.header > div:has(> .download-corner-pill),
.header--minimal > div:has(> .download-corner-pill) {
  margin-left: auto;
}

/* AccountMenu (profile icon / Sign in) sits immediately to the right of
   the Windows download pill. Small gap, vertically aligned. */
.header .account-menu,
.header--minimal .account-menu {
  margin-left: 10px !important;
  margin-right: 0 !important;
}

/* Tighten the corner-pill spacing so the three live as one cluster */
.header .download-corner-pill + .download-corner-pill,
.header--minimal .download-corner-pill + .download-corner-pill {
  margin-left: 6px;
}

/* ────────────────────────────────────────────────────────────────────────
 * 2026-05-30 — Header simplification (Braeden):
 *   - Kill the gear icon (dashboard menu) on the top-left
 *   - Make the profile icon on the right look the same in signed-in / out
 *     so users have ONE icon to find ONE menu (Sign in / Settings / Sign out)
 * ──────────────────────────────────────────────────────────────────────── */

/* Hide the gear icon + its dropdown wrap entirely */
.dashboard-menu-wrap,
.dashboard-menu-btn { display: none !important; }

/* Profile icon button — sized to match the 42px download-pill height */
.account-avatar,
.account-avatar--out {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: rgba(30,30,34,0.78) !important;
  color: var(--text, #f0f1f5) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  padding: 0 !important;
  font-size: 16px;
  font-weight: 600;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* Make the inline silhouette SVG inside the avatar bigger too */
.account-avatar svg,
.account-avatar--out svg {
  width: 22px !important;
  height: 22px !important;
}
.account-avatar:hover,
.account-avatar--out:hover {
  background: rgba(50,50,56,0.95) !important;
  border-color: rgba(255,255,255,0.25) !important;
  transform: translateY(-1px);
}

/* ── iPhone glass treatment for the header icons (hamburger + profile) ──
   Matches the .glass primitive used in aria-ceo-apple.html. */
.aria-hamburger,
.account-avatar,
.account-avatar--out {
  background: rgba(40, 40, 45, 0.55) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  border: 0.5px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08) !important;
  border-radius: 999px !important;
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s !important;
}
.aria-hamburger:hover,
.account-avatar:hover,
.account-avatar--out:hover {
  background: rgba(50, 50, 55, 0.62) !important;
  transform: translateY(-1px) !important;
  border-color: rgba(255,255,255,0.18) !important;
}
/* Light mode glass — Apple Sonoma vibrancy */
body.theme-light .aria-hamburger,
body.theme-light .account-avatar,
body.theme-light .account-avatar--out {
  background: rgba(255, 255, 255, 0.62) !important;
  border: 0.5px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.6) !important;
  color: #1d1d1f !important;
}
body.theme-light .aria-hamburger:hover,
body.theme-light .account-avatar:hover,
body.theme-light .account-avatar--out:hover {
  background: rgba(255,255,255,0.78) !important;
}

/* Dropdown styling (works for both signed-in and signed-out states) */
.account-wrap { position: relative; display: inline-flex; }
.account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: #14151a;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  z-index: 1000;
}
.account-menu__email {
  font-size: 12px;
  color: var(--text-muted, #8a8c97);
  padding: 8px 10px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text, #f0f1f5);
  font-size: 13.5px;
  padding: 9px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.account-menu__item:hover {
  background: rgba(255,255,255,0.05);
  color: var(--accent, #4ade80);
}

/* Hide the legacy "Sign in" pill in case any other code path still renders it */
.account-pill,
.account-pill--signin { display: none !important; }

/* ────────────────────────────────────────────────────────────────────────
 * 2026-05-30 — Hard-pin downloads + profile to top-right via absolute pos.
 *   Stops fighting with all the upstream flex rules. The header keeps its
 *   normal flex layout for the LEFT side (gear hidden + Aria title), and
 *   we yank the right cluster out of flow with position: absolute.
 *
 *   Visual result:
 *     [Aria title] ─────────────────────────  [Mac] [Win] [👤]
 * ──────────────────────────────────────────────────────────────────────── */

/* Header becomes the positioning context — also kill the bottom divider line */
.header,
.header--minimal {
  position: relative !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Downloads cluster — anchored to top-right with a fixed 24px from top so
   the 42px-tall pills always sit fully inside the viewport (no top clip). */
.header > .desktop-downloads--banner,
.header--minimal > .desktop-downloads--banner {
  position: absolute !important;
  top: 24px !important;
  right: 76px !important;          /* leaves room for the 42px profile + 10px gap */
  transform: none;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}

/* Profile icon — anchored to the top-right corner, same top offset */
.header > .account-wrap,
.header--minimal > .account-wrap,
.header .account-wrap,
.header--minimal .account-wrap {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  transform: none;
  margin: 0 !important;
}

/* ── Section-agnostic floating AccountMenu — sits in the top-right on
   every page (Ask, Explore, ImageGen, every workbench). Lives next to
   the small HowTo wordmark; wordmark anchors at right: 84px so the
   profile icon (right: 24px) always reads as "to the right of HowTo." */
.aria-account-floating {
  position: fixed;
  top: 6px;
  right: 120px;
  z-index: 211;          /* above .aria-titlebar (90) */
  pointer-events: auto;
}

/* ── Frameless window controls (min / maximize / close) ── */
.app-win-controls {
  position: fixed;
  top: 11px;
  right: 14px;
  z-index: 212;
  display: inline-flex;
  gap: 4px;
}
.app-win-btn {
  width: 30px; height: 30px;
  border: none;
  border-radius: 9px;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.72);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.app-win-btn:hover { background: rgba(255,255,255,0.16); color: #fff; }
.app-win-btn--close:hover { background: #e53e3e; color: #fff; }
body.theme-light .app-win-btn { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.72); }
body.theme-light .app-win-btn:hover { background: rgba(255,255,255,0.16); color: #fff; }
body.theme-light .app-win-btn--close:hover { background: #e53e3e; color: #fff; }

/* ── Global blurred grey orbs — sit behind EVERYTHING in the app ────────
   position: fixed inset: 0 covers the whole viewport, z-index: 0 puts the
   blob layer beneath every page/workbench/modal. Pure visual depth. */
.aria-bg-blobs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.aria-bg-blob {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(95, 95, 105, 0.55) 0%,
    rgba(55, 55, 65, 0.40) 45%,
    rgba(20, 20, 26, 0.00) 75%
  );
  filter: blur(60px);
  will-change: transform;
}
.aria-bg-blob--1 { width: 420px; height: 420px; top: -8%;   left: 6%;    }
.aria-bg-blob--2 { width: 320px; height: 320px; top: -4%;   left: 42%;   }
.aria-bg-blob--3 { width: 380px; height: 380px; top: 10%;   right: 8%;   }
.aria-bg-blob--4 { width: 280px; height: 280px; top: 45%;   left: 18%;   }
.aria-bg-blob--5 { width: 440px; height: 440px; top: 50%;   right: 12%;  }
.aria-bg-blob--6 { width: 240px; height: 240px; bottom: 6%; left: 30%;   }
.aria-bg-blob--7 { width: 320px; height: 320px; bottom: -8%; right: 28%; }

/* ── Backdrop removed per owner request (2026-06-11) ──────────────────────
   The AriaOrb's idle color is a soft green; its full-screen halo read as a
   green band at the top of the app. Owner chose "remove the backdrop entirely
   — solid dark background, no halo." This hides the orb backdrop (.aria-universe)
   and the ambient grey blobs (.aria-bg-blobs); the app sits on a solid dark
   background. Fully reversible — delete this block to restore the orb/halo. */
.aria-universe,
.aria-bg-blobs {
  display: none !important;
}
body {
  background: #0a0a0e;
}

/* On the home/ask page (where the "Download for Mac/Windows" pills render
   at top: 24px), the profile icon sits LEVEL with those buttons. Off-home
   it stays higher up at top: 14px. Detected via :has() — the pills only
   exist in the DOM when DesktopDownloadsSection variant="banner" renders. */
body:has(.desktop-downloads--banner) .aria-account-floating {
  top: 24px;
}
.aria-account-floating .account-wrap {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
}

/* Make sure the header is tall enough so nothing under it gets covered by
   the absolutely-positioned 42px pills + 24px top offset = 66px of clearance */
.header,
.header--minimal {
  min-height: 80px !important;
}

/* The dropdown still anchors to .account-wrap, but since wrap is now absolute
   the menu needs to also stay flush right under it. */
.header .account-menu,
.header--minimal .account-menu {
  right: 0 !important;
  margin: 0 !important;
}

/* ────────────────────────────────────────────────────────────────────────
 * 2026-05-30 — Input bar restyle: long pill, outlined +, white circle send.
 *   Target look:
 *     ┌────────────────────────────────────────────────────────────┐
 *     │  ⊕   Ask Aria anything                              ↑ (white) │
 *     └────────────────────────────────────────────────────────────┘
 * ──────────────────────────────────────────────────────────────────────── */

/* The pill bar itself — compact, centered, breathable */
.input-row {
  background: rgba(28, 28, 32, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  padding: 6px 6px 6px 12px !important;
  min-height: 50px !important;
  gap: 6px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset, 0 8px 24px rgba(0,0,0,0.25);
  /* Cap the width so it doesn't span the whole viewport — keeps it readable
     and visually anchored. Auto margins center it within its parent. */
  max-width: 640px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* "+" button — outlined circle, no fill, just a subtle ring */
.input-add-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,0.22) !important;
  color: rgba(255,255,255,0.75) !important;
  margin-right: 6px !important;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.input-add-btn:hover {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.4) !important;
  color: #fff !important;
}

/* Text input — clean, transparent, soft placeholder */
.input-row .input {
  padding: 8px 6px !important;
  font-size: 0.95rem !important;
  background: transparent !important;
  border: none !important;
  color: #f0f1f5 !important;
}
.input-row .input::placeholder {
  color: rgba(255,255,255,0.42) !important;
  font-weight: 400;
}

/* Send button — solid white circle with dark up-arrow */
.input-send-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  background: #ffffff !important;
  color: #1a1a1d !important;
  border: none !important;
  margin-left: 4px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: background 0.15s, transform 0.1s, opacity 0.15s;
}
.input-send-btn:not(:disabled) {
  color: #1a1a1d !important;
  background: #ffffff !important;
}
.input-send-btn:hover:not(:disabled) {
  background: #e8e8ec !important;
  color: #000 !important;
  transform: translateY(-1px);
}
.input-send-btn:disabled {
  background: rgba(255,255,255,0.85) !important;
  color: rgba(26,26,29,0.55) !important;
  opacity: 0.6;
  box-shadow: none;
}

/* Mic button — sits to the right of send, but minimal so it doesn't fight
   the clean look. Compact, transparent, just an icon. */
.input-row .input-mic-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  background: transparent !important;
  border: none !important;
  margin-left: 2px !important;
  box-shadow: none;
}

/* ── Empty-state: float the bar to the vertical middle of the screen so the
   very first impression is a clean centered prompt. As soon as the user sends
   their first message, the class drops and the bar slides back to its normal
   bottom position. */
.input-row--empty {
  position: fixed !important;
  top: calc(50% + 2in) !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  margin: 0 !important;
  z-index: 70;
  animation: ariaLandingFade 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
  will-change: opacity;
}

/* One shared fade for ALL landing-state elements — same duration, same
   curve, no transform jitter. Everything appears together cleanly. */
@keyframes ariaLandingFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Keep the old name alive so other selectors don't break */
@keyframes ariaInputFloat {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Empty-state "HowTo" hero wordmark — big, centered, emoji yellow ──────
   Default = soft emoji yellow (#FCD34D), Allura calligraphy. This is what
   shows on the home/ask landing page — the anchor of the empty state.
   Clickable — clicking from anywhere returns to home. */
.aria-hero {
  position: fixed;
  top: 18vh;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Allura', 'Snell Roundhand', 'Apple Chancery', cursive;
  font-size: clamp(120px, 18vw, 240px);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #FCD34D;
  -webkit-text-stroke: 7px #FCD34D;
  text-stroke: 7px #FCD34D;
  paint-order: stroke fill;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: center;
  line-height: 1;
  /* Warm yellow glow under the letters */
  text-shadow:
    0 0 30px rgba(252, 211, 77, 0.40),
    0 0 60px rgba(252, 211, 77, 0.22);
  pointer-events: auto;
  user-select: none;
  z-index: 200;
  opacity: 1;
  transition:
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    font-size 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    top 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  animation: ariaLandingFade 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
  will-change: opacity, transform;
}

.aria-hero:hover {
  filter: brightness(1.08);
}

/* Once the user is in a conversation OR on any non-ask page, the wordmark
   shrinks and moves to the top-right next to the profile icon. Still yellow,
   still Allura, still clickable — clicking returns to home. */
.aria-hero--small {
  top: 6px !important;
  left: 50% !important;                          /* centered in the header */
  right: auto !important;
  transform: translateX(-50%) !important;
  font-size: 48px !important;                    /* bigger header wordmark */
  z-index: 211 !important;
  -webkit-text-stroke: 2.2px #FCD34D !important;
  text-stroke: 2.2px #FCD34D !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow:
    0 0 12px rgba(252, 211, 77, 0.35),
    0 0 24px rgba(252, 211, 77, 0.15) !important;
}

/* ─────────────────────── DAY-MODE COLOR POLISH ───────────────────────
   Make the light theme readable: gold wordmark gets a black outline, dark
   boxes become translucent frosted bubbles, bright text darkens. */
body.theme-light .aria-hero {
  -webkit-text-stroke-color: #111 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.30), 0 0 1px rgba(0,0,0,0.55) !important;
}
/* Ask-page cards: dark "art" box → translucent frosted bubble, titles darkened */
body.theme-light .aria-card__art {
  background: rgba(255,255,255,0.45) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(0,0,0,0.10) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}
body.theme-light .aria-card__title { color: #1d1d1f !important; }
body.theme-light .aria-card__video-fallback { background: transparent !important; }
body.theme-light .aria-card__video-fallback,
body.theme-light .aria-card__video-fallback * { color: rgba(0,0,0,0.5) !important; border-color: rgba(0,0,0,0.18) !important; }
/* "Ask Aria…" input bar: dark pill → light frosted, dark text */
body.theme-light .input-row {
  background: rgba(255,255,255,0.62) !important;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-color: rgba(0,0,0,0.12) !important;
}
body.theme-light .input-row .input { color: #1d1d1f !important; }
body.theme-light .input-row .input::placeholder { color: #8a8a90 !important; }
/* (The grey shade now lives as a full-width header fade on the body bg — see index.css) */
/* Day mode: the chat "glass sheet" is a dark gradient panel — clear it so the
   white background shows through (it's what was tinting the whole center grey). */
body.theme-light .aria-glass-chat { background: transparent !important; }

/* ────────────────────────────────────────────────────────────────────────
 * Compact chat mode — only kicks in when textMessages.length > 0.
 * Lives in the CENTER of the screen, taking up ~1/3 of the viewport width.
 * Transparent panel — no card, no border, no shadow. Just the conversation
 * floating in the middle column. The rest of the page breathes.
 * ──────────────────────────────────────────────────────────────────────── */
.aria-glass-chat--compact {
  /* Center column — sits in the middle of the screen with BIG bubbles
     inside. Wider than the old 34vw clamp so bubbles have real room,
     but still centered so the chat reads as one focused column. */
  inset: auto !important;
  top: 100px !important;
  left: 50% !important;
  transform: translateX(-50%);
  right: auto !important;
  bottom: 140px !important;
  width: min(900px, 70vw) !important;
  max-width: 70vw !important;
  max-height: none !important;
  /* No card chrome — let messages sit on the page itself */
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  transition:
    top 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.4s ease;
  animation: ariaChatMorphIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* The inner scroller — comfortable padding, scrollable */
.aria-glass-chat--compact .aria-glass-chat-inner {
  padding: 8px 6px !important;
  gap: 8px;
}

/* Bubbles inside the centered chat column — normal chat text sizing. */
.aria-glass-chat--compact .aria-bubble {
  font-size: 16px;
  padding: 12px 18px;
  width: auto !important;
  max-width: 100% !important;
}

/* Hide the legacy "How can I help?" placeholder — the Aria hero is the new
   empty-state visual. */
.aria-glass-chat-empty { display: none !important; }

@keyframes ariaChatMorphIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* ── Bubble entrance — Aria's reply bubble fades up softly when the
 *    minimum-think hold window releases it. */
.aria-glass-chat--compact .aria-bubble-row--ai {
  animation: ariaBubbleEnter 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes ariaBubbleEnter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ────────────────────────────────────────────────────────────────────────
 * Hamburger menu + slide-out drawer
 *   - Default state: sidebar fully hidden, only the hamburger shows top-left
 *   - Click hamburger → sidebar slides in from the left as an overlay drawer
 *   - Backdrop dim closes it on click-outside
 * ──────────────────────────────────────────────────────────────────────── */

/* Hide the collapsed thin-strip sidebar entirely — the hamburger replaces it */
.app-sidebar-left--closed { display: none !important; }

/* Hamburger trigger — top-left, clean, no chrome */
.aria-hamburger {
  position: fixed;
  top: 6px;
  left: 14px;
  z-index: 211;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 20, 24, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.aria-hamburger:hover {
  background: rgba(35, 35, 40, 0.9);
  border-color: rgba(255, 255, 255, 0.20);
  transform: translateY(-1px);
}
.aria-hamburger:active { transform: translateY(0); }
.aria-back-btn {
  position: fixed; top: 6px; left: 62px; z-index: 211;   /* next to the hamburger, ABOVE the title bar (was z-index 80 = hidden behind it) */
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; cursor: pointer;
  -webkit-app-region: no-drag; app-region: no-drag;
  background: rgba(40, 40, 45, 0.55);
  backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 0.5px solid rgba(255, 255, 255, 0.16);
  color: #f4f4f5;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform .15s, border-color .15s, background .15s;
}
.aria-back-btn:hover { background: rgba(50, 50, 55, 0.62); border-color: rgba(255, 255, 255, 0.28); transform: translateY(-1px); }
.aria-back-btn:active { transform: translateY(0); }
body.theme-light .aria-back-btn { background: rgba(255, 255, 255, 0.72); border-color: rgba(0, 0, 0, 0.10); color: #1d1d1f; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
body.theme-light .aria-back-btn:hover { background: rgba(255, 255, 255, 0.85); }

/* Skinny content scrollbar that fattens on hover, inset to start below the
   top-right profile icon (track margin-top clears it). Thumb is drawn inside a
   transparent border so changing the border width grows/shrinks the *visible*
   thumb on hover without shifting layout (track stays a constant width). */
/* margin-top pushes the whole scroll box (and its scrollbar) below the fixed
   top-right profile icon (top:14px, ~50px tall), so the scrollbar starts under
   it. The views drop their own top padding to compensate (net offset unchanged). */
.aria-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; margin-top: 10px; }
.aria-scroll::-webkit-scrollbar { width: 14px; }
.aria-scroll::-webkit-scrollbar-track { background: transparent; margin: 0 0 8px; }
.aria-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.16);
  background-clip: padding-box;
  border: 5px solid transparent;
  border-radius: 999px;
  transition: background-color 0.15s ease;
}
.aria-scroll:hover::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0.30); border-width: 3px; }
.aria-scroll::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,0.46); border-width: 3px; }

/* Backdrop — click to close */
.aria-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 90;
  animation: ariaBackdropFade 0.25s ease-out;
}
@keyframes ariaBackdropFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Open sidebar becomes an overlay drawer that slides in from the left */
.app-sidebar-left:not(.app-sidebar-left--closed) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 280px !important;
  max-width: 80vw;
  z-index: 100;
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.45);
  animation: ariaDrawerSlideIn 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes ariaDrawerSlideIn {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* Sidebar section header — "Projects" label etc. */
.app-dash-section {
  margin: -4px 12px 8px;                 /* negative top → touches Conversation History */
  font-size: 16px;                       /* bigger */
  font-weight: 800;                      /* bolder */
  letter-spacing: 0.3px;
  text-transform: none;                  /* sentence case → "Business +" */
  color: rgba(255, 255, 255, 0.92);      /* brighter / prominent */
}
.app-dash-section:first-child { margin-top: -4px; }

/* Explore — collapsible header. Same look as the main dash items, with a
   chevron on the right that rotates when expanded. */
.app-dash-explore {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 6px 0 2px;
  padding: 11px 14px;
  background: transparent;
  border: none;
  color: var(--text, #f0f1f5);
  font-size: 14.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s ease, color 0.12s ease;
}
.app-dash-explore:hover { background: rgba(255,255,255,0.06); }
.app-dash-explore__chevron {
  opacity: 0.55;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s;
}
.app-dash-explore--open .app-dash-explore__chevron {
  transform: rotate(90deg);
  opacity: 0.9;
}

/* Indented submenu list under Explore */
.app-dash-explore-list {
  display: flex;
  flex-direction: column;
  padding-left: 10px;
  margin-bottom: 6px;
  border-left: 1px solid rgba(255,255,255,0.06);
  margin-left: 18px;
  animation: ariaExploreOpen 0.22s ease-out;
}
@keyframes ariaExploreOpen {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Empty-state placeholder under "Projects" */
.app-dash-empty {
  margin: 4px 12px 12px;
  padding: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.10);
  border-radius: 10px;
}

/* Category items — slightly softer than the main items so the hierarchy reads */
.app-dash-item--cat {
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
}

/* Sidebar item alignment helpers */
.app-dash-item--center { text-align: center !important; }
.app-dash-item--left   { text-align: left !important; }

/* ────────────────────────────────────────────────────────────────────────
 * Drawer cleanup (2026-05-30)
 *   - Dashboard header centered
 *   - All hover states → brand yellow (#FCD34D)
 *   - Project items (HowTo etc) substantially bigger + slide on hover
 * ──────────────────────────────────────────────────────────────────────── */

/* Center the DASHBOARD title — chevron pulled out of flow to the right edge
   so the title can truly center inside the header. */
.app-sidebar-left .app-sidebar-left-header {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  padding: 14px 10px 12px !important;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.12s ease;
}
/* The whole Dashboard box is the back/close button — give it a button feel. */
.app-sidebar-left .app-sidebar-left-header:hover {
  background: rgba(255, 255, 255, 0.06);
}
.app-sidebar-left .app-sidebar-left-header:hover .app-sidebar-left-title {
  color: #FCD34D !important;
}
.app-sidebar-left .app-sidebar-left-title {
  margin: 0 auto !important;
  text-align: center !important;
  letter-spacing: 0.18em !important;
  font-size: 0.80rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.55) !important;
}
.app-sidebar-left .app-sidebar-left-header .sidebar-toggle {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}

/* Brand-yellow hover everywhere in the drawer */
.app-dash-item:hover,
.app-dash-item.active,
.app-dash-item--cat:hover {
  background: rgba(252, 211, 77, 0.10) !important;
  color: #FCD34D !important;
}
.app-dash-item:disabled:hover {
  background: transparent !important;
  color: var(--text-muted) !important;
}

/* Project items — Bricolage Grotesque, white, modern w/ character. Slides
   slightly to the LEFT on hover so you instantly see it's a different
   kind of item from the menu rows above. */
.app-dash-item--project {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  gap: 3px;
  font-family: 'Bricolage Grotesque', 'Inter', -apple-system, sans-serif !important;
  color: #ffffff !important;
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
  padding: 18px 20px !important;
  margin-top: 6px;
  border-radius: 12px !important;
  text-align: left !important;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.15s ease,
              color 0.15s ease,
              padding-right 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.app-dash-item--project__name {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
/* Each split line sits on its own row; no awkward mid-word wraps. */
.app-dash-item--project__name-line {
  display: block;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.app-dash-item--project__tag {
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.app-dash-item--project:hover {
  background: rgba(252, 211, 77, 0.10) !important;
  color: #FCD34D !important;
  transform: translateX(-8px);
  padding-right: 26px !important;
}
.app-dash-item--project:hover .app-dash-item--project__tag {
  color: rgba(252, 211, 77, 0.65);
}

/* ── Project hover preview ───────────────────────────────────────────────
 *   Floating card that pops out to the right of the drawer when the user
 *   hovers a project item, showing a preview before they click in. */
.app-dash-project-wrap {
  position: relative;
}

/* The preview is a full-bleed overlay sitting in the main content area to
   the right of the drawer. Hidden until hover. Lets the user see the
   destination page before clicking in. */
.app-dash-project-preview {
  position: fixed;
  top: 0;
  bottom: 0;
  /* Start at the right edge of the drawer (280px wide) */
  left: 280px;
  right: 0;
  background: radial-gradient(ellipse at top, #1a1a20 0%, #0a0a0e 70%);
  border-left: 1px solid rgba(252, 211, 77, 0.18);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-20px);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 105;          /* above app content (60), below drawer (100) */
  display: flex;
  flex-direction: column;
}
.app-dash-project-wrap:hover .app-dash-project-preview {
  opacity: 1;
  transform: translateX(0);
}

/* Big hero photo at the top of the preview, dimmed at the bottom */
.app-dash-project-preview__art {
  position: relative;
  width: 100%;
  height: 42%;
  flex-shrink: 0;
  overflow: hidden;
}
.app-dash-project-preview__art img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.app-dash-project-preview__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 30%, rgba(10,10,14,0.75) 80%, #0a0a0e 100%);
  pointer-events: none;
}

/* Body sits below the hero image */
.app-dash-project-preview__body {
  flex: 1;
  padding: 40px 60px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: -80px; /* pull body up so it overlaps the photo bottom */
  position: relative;
  z-index: 2;
}
.app-dash-project-preview__title {
  font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
  line-height: 1.05;
  margin-bottom: 12px;
}
.app-dash-project-preview__sub {
  font-size: 17px;
  color: rgba(255,255,255,0.70);
  line-height: 1.5;
  margin-bottom: 28px;
  max-width: 520px;
}
.app-dash-project-preview__meta {
  list-style: none; padding: 0; margin: 0 0 28px;
  display: flex; gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.app-dash-project-preview__meta li {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 22px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  min-width: 110px;
}
.app-dash-project-preview__meta li span:first-child {
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 10.5px;
  font-weight: 600;
}
.app-dash-project-preview__meta li span:last-child {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}
.app-dash-project-preview__meta li .dot-on { color: #34d399 !important; }

/* ── Day mode: sidebar content is hardcoded white — make it readable on the white surface ── */
body.theme-light .app-sidebar-left { background: #e9eaef !important; }
/* DASHBOARD title readable in day */
body.theme-light .app-sidebar-left .app-sidebar-left-title { color: #1d1d1f !important; }
/* Box around the Conversation History + Projects header rows */
.app-dash-item--center,
.app-dash-section {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
}
.app-dash-section { padding: 9px 12px !important; }
/* 3-dot rename control on project cards */
.app-dash-project-wrap { position: relative; }
.app-dash-project-edit {
  position: absolute; top: 12px; right: 6px; z-index: 3;
  width: 28px; height: 30px; border: none; border-radius: 8px;
  background: transparent; color: var(--text-muted); cursor: pointer;
  font-size: 20px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.app-dash-project-edit:hover { background: rgba(127,127,127,0.16); color: var(--text); }
.app-dash-rename-input {
  width: 100%; box-sizing: border-box;
  font-family: inherit; font-size: 1.05rem; font-weight: 700;
  background: var(--input-bg); border: 1.5px solid var(--accent); border-radius: 6px;
  padding: 3px 6px; color: var(--text);
}
body.theme-light .app-sidebar-left-inner { color: #1d1d1f; }
body.theme-light .app-dash-section { color: #1d1d1f !important; }
body.theme-light .app-dash-item--project__name,
body.theme-light .app-dash-project-preview__title,
body.theme-light .app-dash-project-preview__meta li span:last-child { color: #1d1d1f !important; }
body.theme-light .app-dash-item--project__tag,
body.theme-light .app-dash-project-preview__sub,
body.theme-light .app-dash-project-preview__meta li span:first-child { color: #5c5c63 !important; }
.app-dash-project-preview__meta li .dot-on::before {
  content: '●';
  margin-right: 6px;
  font-size: 10px;
}

.app-dash-project-preview__cta {
  font-size: 14px;
  color: #FCD34D;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 12px 28px;
  border: 1.5px solid rgba(252,211,77,0.5);
  border-radius: 999px;
  background: rgba(252,211,77,0.06);
}

/* When drawer is closed, no need to shift the preview */
body:not(.aria-drawer-open) .app-dash-project-preview {
  display: none;
}

/* ── Settings page — clean iOS/macOS-style grouped list ─────────────────── */
.settings-main {
  max-width: 680px;
  margin: 0 auto;
  padding: 100px 24px 80px;     /* clears the floating HowTo header */
}
.settings-page-title {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  color: #fff;
}
.settings-group-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  padding: 0 4px;
  margin: 28px 0 8px;
}
.settings-list {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
}
.settings-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: #f0f1f5;
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}
.settings-row:last-child {
  border-bottom: none;
}
.settings-row:hover {
  background: rgba(252,211,77,0.06);
}
.settings-row__label {
  flex: 1;
  color: #f0f1f5;
  font-weight: 500;
}
.settings-row__value {
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  font-weight: 400;
}
.settings-row__chev {
  color: rgba(255,255,255,0.3);
  font-size: 18px;
  font-weight: 400;
  margin-left: 4px;
  line-height: 1;
}
.settings-row__select {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.65);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  outline: none;
  padding: 4px 8px;
  border-radius: 6px;
}
.settings-row__select:focus { background: rgba(255,255,255,0.06); }
.settings-row--danger .settings-row__label {
  color: #ff6b6b;
}
.settings-row--danger:hover {
  background: rgba(255,107,107,0.08);
}

/* Platform-context chip at the top — tells the user which surface they're
   on so they understand the settings are tailored to it. */
.settings-surface-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(252,211,77,0.08);
  border: 1px solid rgba(252,211,77,0.20);
  border-radius: 999px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 22px;
}
.settings-surface-chip strong {
  color: #FCD34D;
  font-weight: 700;
}
.settings-surface-chip__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #FCD34D;
  box-shadow: 0 0 8px rgba(252,211,77,0.5);
}

/* Legacy --corner modifier from the era when the HowTo wordmark was big +
   centered on most pages and shrunk on Settings. Now the wordmark is ALWAYS
   small + top-right, so this modifier is a no-op. Left as a stub so the
   className combos in App.jsx keep working. */
.aria-hero--corner {
  /* default .aria-hero styles already apply — leave empty */
}

/* Back button — sits right above the top-left corner of the settings list.
   Aligned with the left edge of the centered 680px-wide list. */
.settings-back-btn {
  position: absolute;
  top: 130px;                 /* tucked higher, closer to the Settings title */
  left: calc(50% - 320px);    /* nudged ~20px right from the list's edge */
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 70;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.settings-back-btn:hover {
  background: rgba(252,211,77,0.10);
  border-color: rgba(252,211,77,0.40);
  color: #FCD34D;
  transform: translateX(-2px);
}

/* On narrow screens, fall back to flush-left so it doesn't drift off-screen */
@media (max-width: 720px) {
  .settings-back-btn {
    left: 16px;
  }
}

/* Big centered Settings title — sits below the floating HowTo wordmark */
.settings-page-title {
  text-align: center !important;
  font-size: 64px !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  margin: 100px auto 24px !important;
  color: #fff !important;
  max-width: 880px;
}

/* Strip the duplicate padding-top from main since the header now handles it */
.settings-main {
  padding-top: 0 !important;
}

/* Category row — top-level clickable header in the accordion */
.settings-row--cat .settings-row__label {
  font-weight: 600;
  font-size: 16px;
}

/* Expand chevron rotates on open */
.settings-cat--open .settings-row__chev {
  color: #FCD34D;
  font-size: 22px;
  line-height: 1;
}

/* Sub-list — settings inside the expanded category */
.settings-sublist {
  background: rgba(0,0,0,0.20);
  border-top: 1px solid rgba(255,255,255,0.06);
  animation: ariaSubExpand 0.22s ease-out;
  overflow: hidden;
}
@keyframes ariaSubExpand {
  from { opacity: 0; max-height: 0; }
  to   { opacity: 1; max-height: 500px; }
}

.settings-subrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px 12px 32px;        /* indented from the category row */
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 14px;
}
.settings-subrow:last-child { border-bottom: none; }
.settings-subrow:hover {
  background: rgba(252,211,77,0.05);
}
.settings-subrow__label {
  flex: 1;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
}
.settings-subrow__btn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.5);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.settings-subrow__btn:hover {
  background: rgba(255,255,255,0.05);
  color: #FCD34D;
}
.settings-subrow__select {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  outline: none;
  padding: 6px 10px;
  border-radius: 8px;
}
.settings-subrow--danger .settings-subrow__label {
  color: #ff6b6b;
}
.settings-subrow--danger .settings-subrow__btn:hover {
  background: rgba(255,107,107,0.10);
  color: #ff8a8a;
}

/* Small "See more" link next to the Allow extra usage label */
.overage-seemore {
  display: inline-block;
  margin-left: 10px;
  background: transparent;
  border: none;
  color: #FCD34D;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.overage-seemore:hover {
  filter: brightness(1.15);
  background: rgba(252,211,77,0.08);
}

/* Pay-as-you-go notice — appears below the overage toggle when ON */
.overage-notice {
  margin: 4px 16px 12px 32px;
  padding: 12px 14px;
  background: rgba(252,211,77,0.07);
  border: 1px solid rgba(252,211,77,0.22);
  border-radius: 10px;
  animation: ariaSubExpand 0.22s ease-out;
}
.overage-notice__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}
.overage-notice__head strong {
  color: #FCD34D;
  font-weight: 700;
}
.overage-notice__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #FCD34D;
  box-shadow: 0 0 8px rgba(252,211,77,0.5);
  flex-shrink: 0;
}
.overage-notice__short {
  color: rgba(255,255,255,0.65);
}
.overage-notice__more-btn {
  background: transparent;
  border: none;
  color: #FCD34D;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 0 2px;
  margin-top: 2px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.overage-notice__more-btn:hover {
  filter: brightness(1.15);
}
.overage-notice__detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(252,211,77,0.20);
}
.overage-notice__detail p {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
}
.overage-notice__detail p:last-child { margin-bottom: 0; }
.overage-notice__detail strong {
  color: #FCD34D;
  font-weight: 700;
}
.overage-notice__detail em {
  color: #fff;
  font-style: italic;
}

/* ── Mandatory "Are you sure?" modal ───────────────────────────────────── */
.overage-confirm__backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  animation: ariaBackdropFade 0.2s ease-out;
}
.overage-confirm {
  width: 460px;
  max-width: calc(100vw - 32px);
  background: linear-gradient(180deg, #1d1d23 0%, #15151a 100%);
  border: 1px solid rgba(252,211,77,0.30);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.65);
  padding: 24px 26px;
  animation: ariaLandingFade 0.22s ease-out;
}
.overage-confirm__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.overage-confirm__head h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}
.overage-confirm__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #FCD34D;
  box-shadow: 0 0 12px rgba(252,211,77,0.6);
}
.overage-confirm__body p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
}
.overage-confirm__body strong {
  color: #FCD34D;
  font-weight: 700;
}
.overage-confirm__list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.overage-confirm__list li {
  padding: 10px 14px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.78);
}
.overage-confirm__list em {
  color: #fff;
  font-style: italic;
}
/* "See details" / "Show less" toggle — quiet link, yellow on hover. */
.overage-confirm__toggle {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 0 0;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: rgba(252, 211, 77, 0.85);
  cursor: pointer;
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-decoration-color: rgba(252, 211, 77, 0.35);
  text-underline-offset: 3px;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.overage-confirm__toggle:hover {
  color: #FCD34D;
  text-decoration-color: #FCD34D;
}
.overage-confirm__actions {
  display: flex; gap: 10px;
  margin-top: 18px;
}
.overage-confirm__cancel,
.overage-confirm__confirm {
  flex: 1;
  padding: 12px 16px;
  border-radius: 12px;
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: filter 0.12s, transform 0.08s;
}
.overage-confirm__cancel {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
}
.overage-confirm__cancel:hover {
  background: rgba(255,255,255,0.10);
  color: #fff;
}
.overage-confirm__confirm {
  background: linear-gradient(135deg, #FCD34D, #f59e0b);
  border: none;
  color: #1a1a1d;
  box-shadow: 0 4px 18px rgba(252,211,77,0.25);
}
.overage-confirm__confirm:hover {
  filter: brightness(1.10);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(252,211,77,0.40);
}

/* ── Interest chips under the prompt box (empty-state only) ──────────────
 *   Google-style quick-start row. Sits directly below the floating input
 *   bar (which is at calc(50% + 2in) vertically). Click any chip to prefill
 *   the prompt with a starter phrase the user can finish typing. */
.aria-interests {
  position: fixed;
  top: calc(50% + 2in + 56px);     /* directly below the 50px-tall input pill */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: min(640px, 90vw);
  z-index: 69;                      /* sit just below the input row (z 70) */
  animation: ariaInputFloat 0.4s ease-out;
  transition: left 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

.aria-interest-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(28, 28, 32, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.15s, border-color 0.15s, transform 0.1s, color 0.15s;
  white-space: nowrap;
}
.aria-interest-chip:hover {
  background: rgba(45, 45, 52, 0.95);
  border-color: rgba(252, 211, 77, 0.40);
  color: #fff;
  transform: translateY(-1px);
}
.aria-interest-chip:active { transform: translateY(0); }
.aria-interest-chip__emoji { font-size: 14px; line-height: 1; }
.aria-interest-chip__label { line-height: 1; }

/* Drawer-open push: interests follow the same shift as the input bar. */
body.aria-drawer-open .aria-interests {
  left: calc(50% + 140px) !important;
}

/* ── Showcase cards — Apple-style square bubbles below the chips ─────────
 *   Each card = gradient "picture" + bold title underneath. Click prefills
 *   the input with a starter prompt for that capability. */
.aria-showcase {
  position: fixed;
  top: calc(50% + 2in + 64px);     /* directly under the input bar */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  width: min(1140px, 96vw);
  z-index: 68;
  animation: ariaLandingFade 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
  will-change: opacity;
  transition: left 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

.aria-card {
  width: 264px;
  height: 184px;          /* bigger overall — kept the landscape proportion */
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.aria-card:hover { transform: translateY(-3px); }
.aria-card:active { transform: translateY(0); }

/* Title sits ABOVE the box, bold */
.aria-card__title {
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  color: #f0f1f5;
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: 4px;
}

/* The photo bubble — rectangular, ~3:4 portrait */
.aria-card__art {
  flex: 1;
  border-radius: 22px;
  overflow: hidden;
  /* Subtle dark gradient placeholder — no harsh flash before the photo lands */
  background: linear-gradient(135deg, #1f1f24 0%, #14141a 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 -1px 0 rgba(0,0,0,0.20) inset,
    0 10px 24px rgba(0,0,0,0.30);
  position: relative;
}
/* Glossy highlight on top — Apple-bubble sheen */
.aria-card__art::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 40%);
  pointer-events: none;
  z-index: 2;
}
.aria-card__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Start hidden; fade in only when the image has actually loaded. Prevents
     the "broken-icon then pop" lag on first paint. */
  opacity: 0;
  transition: opacity 0.35s ease-out;
}
.aria-card__art img[data-loaded="1"] { opacity: 1; }

/* ── Trends view — what's hot right now (blended signal) ─────────────────
 *   Full-screen list of trending topics, filterable by trade, click any to
 *   ask Aria about it. Drawer-aware push like the other workstations. */
.trends-view {
  position: fixed;
  inset: 0;
  padding: 130px 36px 80px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 50;
  background: transparent;
  transition: left 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
body.aria-drawer-open .trends-view {
  left: 280px;
}
.trends-header {
  max-width: 960px;
  margin: 0 auto 28px;
}
.trends-title {
  font-family: 'Bricolage Grotesque', 'Inter', -apple-system, sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 6px;
}
.trends-tagline {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 22px;
  line-height: 1.5;
}
.trends-controls {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.trends-trades {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}
.trends-trade-pill {
  appearance: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.trends-trade-pill:hover {
  background: rgba(252, 211, 77, 0.08);
  color: rgba(252, 211, 77, 0.9);
  border-color: rgba(252, 211, 77, 0.30);
}
.trends-trade-pill--active {
  background: #FCD34D;
  color: #1a1a20;
  border-color: #FCD34D;
}
.trends-refresh {
  appearance: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.85);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.trends-refresh:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.10);
}
.trends-refresh:disabled {
  opacity: 0.55;
  cursor: wait;
}

/* Category tabs (Topics / Ads / Sounds / Viral / Hashtags) */
.trends-categories {
  display: flex;
  gap: 4px;
  margin-top: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}
.trends-cat-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: rgba(255, 255, 255, 0.55);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.trends-cat-tab:hover { color: rgba(255, 255, 255, 0.85); }
.trends-cat-tab--active {
  color: #FCD34D;
  border-bottom-color: #FCD34D;
}
.trends-cat-tab__count {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 700;
}
.trends-cat-tab--active .trends-cat-tab__count {
  background: rgba(252, 211, 77, 0.20);
  color: #FCD34D;
}

.trends-body { max-width: 960px; margin: 0 auto; }
.trends-error {
  padding: 14px 18px;
  background: rgba(255, 100, 100, 0.08);
  border: 1px solid rgba(255, 100, 100, 0.25);
  border-radius: 12px;
  color: #ff9a9a;
  font-size: 14px;
}
.trends-empty {
  padding: 60px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
  font-size: 14px;
}
.trends-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.trends-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  transition: background 0.15s, border-color 0.15s, transform 0.18s;
}
.trends-item:hover {
  background: rgba(252, 211, 77, 0.06);
  border-color: rgba(252, 211, 77, 0.25);
  transform: translateX(-2px);
}
.trends-rank {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(252, 211, 77, 0.12);
  color: #FCD34D;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.trends-item__body { flex: 1; min-width: 0; }
.trends-item__topic {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 6px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  width: 100%;
  display: block;
}
.trends-item__topic:hover { color: #FCD34D; }
.trends-item__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.trends-source-pill {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.trends-item__link {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
}
.trends-item__link:hover { color: rgba(255, 255, 255, 0.85); }
.trends-score {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: rgba(252, 211, 77, 0.6);
  margin-top: 6px;
  min-width: 30px;
  text-align: right;
}
.trends-footer {
  margin: 24px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
}

/* ── Workbench frame — full-screen iframe for /wb-*.html surfaces ─────────
 *   Reached by clicking a showcase card on the home page. Drawer-aware
 *   push so the workbench slides right when the hamburger menu opens.
 *   Floating "Home" back button in the top-right escapes back to ask. */
.workbench-frame {
  position: fixed;
  inset: 0;
  background: #0a0a0e;
  z-index: 40;
  transition: left 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
body.aria-drawer-open .workbench-frame {
  left: 280px;
}
.workbench-frame__iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.workbench-frame__back {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 12px;
  background: rgba(20, 20, 26, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.18s;
}
.workbench-frame__back:hover {
  background: rgba(252, 211, 77, 0.12);
  color: #FCD34D;
  border-color: rgba(252, 211, 77, 0.45);
  transform: translateX(-3px);
}
.workbench-frame__back svg { display: block; }

/* ── Shop / workbench surfaces draw their OWN top-right chrome (HowTo logo +
   profile) inside the iframe. Hide the app's floating "Home" back button and
   the global floating account icon there so they don't stack/overlap the
   iframe's logo. Owner: "only want to see our logo and the profile icon." */
.app--section-shop .workbench-frame__back,
.app--section-workbench .workbench-frame__back,
.app--section-shop .aria-account-floating,
.app--section-workbench .aria-account-floating {
  display: none !important;
}

/* ── Video inside each showcase card ──────────────────────────────────────
 *   Single autoplay-muted-loop video per card, recorded from inside HowTo
 *   (real outputs, no stock). If the file doesn't exist yet, we show a
 *   clean dark placeholder with the card label — never a broken image. */
.aria-card__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Sit above the static art placeholder so the video paints clean. */
  position: relative;
  z-index: 1;
}
/* Quiet placeholder when the .mp4 hasn't been recorded yet. Same shape
   as the art bubble; just a soft dark gradient with the title centered.
   Looks intentional — not "image failed to load". */
.aria-card__video-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 30%, rgba(252,211,77,0.07) 0%, transparent 60%),
    linear-gradient(135deg, #1f1f24 0%, #14141a 100%);
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-align: center;
  padding: 16px;
}

/* Drawer-open push */
body.aria-drawer-open .aria-showcase {
  left: calc(50% + 140px) !important;
}

/* ── Push the center column right when the drawer is open ──────────────
 *   Drawer = 280px. Recenter the fixed/floating elements in the remaining
 *   viewport by shifting them +140px (half the drawer width). Smooth
 *   transition so it feels like the page is making room for the drawer.
 *   No backdrop — user can still text Aria while the drawer is open. */
.aria-hero,
.input-row--empty,
.aria-glass-chat--compact {
  transition:
    left 0.32s cubic-bezier(0.32, 0.72, 0, 1),
    top 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
body.aria-drawer-open .aria-hero {
  left: calc(50% + 140px) !important;
}
/* The small (top-right) variant doesn't shift — drawer is on the left and
   the small wordmark is anchored to the right edge. Override the centered
   drawer-shift back to right-aligned. */
body.aria-drawer-open .aria-hero--small {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}
body.aria-drawer-open .input-row--empty {
  left: calc(50% + 140px) !important;
}
body.aria-drawer-open .aria-glass-chat--compact {
  left: 280px !important;
}
/* When the dashboard drawer is open (280px wide on the left), shift the
   full-screen chat overlay right of it so the conversation stays clean
   and parallel with the available space — bubbles re-center inside the
   visible viewport instead of sliding behind the drawer. */
.aria-glass-chat {
  transition: left 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
body.aria-drawer-open .aria-glass-chat {
  left: 280px !important;
}

/* ── "Aria" wordmark — pinned top-center, ONLY when chat is open. Uses the
   cursive Allura calligraphy font (same one used on the main hero wordmark)
   so the name reads like a signature, not a system label. */
.aria-name-top {
  position: fixed;
  top: 62px;            /* sits BELOW the 52px title bar so it's fully visible */
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;         /* above the title bar (z-index 90) */
  font-family: 'Allura', 'Snell Roundhand', 'Apple Chancery', cursive;
  font-size: clamp(48px, 6vw, 84px);
  font-weight: 400;          /* Allura is a single-weight script — 400 is correct */
  letter-spacing: 0;
  color: #fff;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  text-shadow:
    0 2px 14px rgba(0, 0, 0, 0.55),
    0 0 32px rgba(76, 176, 255, 0.22);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
body.aria-drawer-open .aria-name-top {
  transform: translateX(calc(-50% + 140px));
}
/* Bottom-pinned input bar (post-first-message) lives in normal flow.
   Shift the centered max-width pill to the right by padding its parent. */
body.aria-drawer-open .input-row:not(.input-row--empty) {
  transform: translateX(140px);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes ariaHeroFade {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translateX(-50%); }
}

/* ── Universal "make room for the drawer" — every section slides right ──
 *   The drawer is a 280px fixed overlay on the left. Per-element rules
 *   above shift the centered hero, input bar, chat overlay, etc.
 *   This rule catches everything ELSE that lives inside .app-center —
 *   Image Gen, workbench iframes' container, any future workbench that
 *   doesn't have its own per-element shift — by pushing the entire
 *   .app-center padding box rightward. In-flow flex children (like
 *   .image-gen-view) shrink/shift naturally; position:fixed pages handle
 *   themselves above. The floating HowTo + profile icon stay anchored
 *   to the viewport's right corner (drawer is on the left, no overlap). */
.app-center {
  transition: padding-left 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
body.aria-drawer-open .app-center {
  padding-left: calc(16px + 280px);
}

/* ═══════════════════════════════════════════════════════════════════
   CANVAS — per-user project dashboards Aria builds + user edits.
   One generic renderer draws any LayoutSpec. Apple Liquid Glass body.
   ═══════════════════════════════════════════════════════════════════ */

.canvas-view {
  min-height: 100vh;
  padding: 64px 24px 120px;
  color: #fff;
  background:
    radial-gradient(900px 700px at 12% 18%, rgba(255, 120, 60, 0.13), transparent 60%),
    radial-gradient(800px 600px at 90% 28%, rgba(60, 140, 255, 0.13), transparent 60%),
    radial-gradient(700px 500px at 30% 90%, rgba(120, 80, 255, 0.10), transparent 65%),
    #0b0d12;
}

/* When a project is open, canvas + Aria chat sit side-by-side. */
.canvas-view--with-chat {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding-right: 24px;
}
@media (min-width: 1024px) {
  .canvas-view--with-chat {
    grid-template-columns: minmax(0, 1fr) 360px;
    padding-right: 24px;
  }
}
.canvas-view__main {
  min-width: 0; /* let grid clamp the canvas width */
}

/* ── Aria chat panel (always-on right rail when project is open) ───── */
.canvas-aria {
  background: rgba(15, 17, 22, 0.78);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 24px;
  height: calc(100vh - 48px);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}
@media (max-width: 1023px) {
  .canvas-aria {
    position: fixed;
    right: 16px;
    bottom: 16px;
    left: 16px;
    top: auto;
    height: 60vh;
    z-index: 90;
  }
}
.canvas-aria.is-collapsed {
  height: 64px;
  max-height: 64px;
}

.canvas-aria__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.canvas-aria__title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.canvas-aria__orb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #aac8ff 0%, #6b8fff 50%, #4863c8 100%);
  box-shadow: 0 0 16px rgba(120, 160, 255, 0.55);
  animation: canvas-aria-pulse 3s ease-in-out infinite;
}
@keyframes canvas-aria-pulse {
  0%, 100% { box-shadow: 0 0 16px rgba(120, 160, 255, 0.55); }
  50%      { box-shadow: 0 0 22px rgba(120, 160, 255, 0.85); }
}
.canvas-aria__title {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
}
.canvas-aria__subtitle {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 1px;
}
.canvas-aria__collapse {
  appearance: none;
  border: 0;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 11px;
}
.canvas-aria__collapse:hover { background: rgba(255, 255, 255, 0.16); }

.canvas-aria__messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.canvas-aria__empty {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  line-height: 1.5;
  padding: 18px 4px;
  text-align: center;
}
.canvas-aria__empty p { margin: 6px 0; }
.canvas-aria__empty-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.04);
  padding: 12px;
  border-radius: 12px;
  text-align: left;
}

.canvas-aria__msg {
  max-width: 100%;
}
.canvas-aria__msg--user {
  align-self: flex-end;
  background: linear-gradient(180deg, #2a6cff 0%, #1c4fd8 100%);
  color: #fff;
  padding: 8px 14px;
  border-radius: 18px 18px 4px 18px;
  font-size: 13.5px;
  line-height: 1.45;
  max-width: 88%;
}
.canvas-aria__msg--assistant {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 10px 14px 12px;
  border-radius: 18px 18px 18px 4px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  max-width: 92%;
}
.canvas-aria__msg.is-error .canvas-aria__msg-body { color: #ff9090; }
.canvas-aria__msg-tag {
  font-size: 10px;
  color: rgba(150, 200, 255, 0.85);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}
.canvas-aria__msg-body {
  white-space: pre-wrap;
  word-break: break-word;
}

.canvas-aria__typing {
  display: flex;
  gap: 4px;
  padding: 4px 0 2px;
}
.canvas-aria__typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  animation: canvas-aria-bounce 1.2s ease-in-out infinite;
}
.canvas-aria__typing span:nth-child(2) { animation-delay: 0.15s; }
.canvas-aria__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes canvas-aria-bounce {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

.canvas-aria__input-wrap {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  align-items: flex-end;
}
.canvas-aria__input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 10px 12px;
  color: #fff;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.45;
  resize: none;
  outline: none;
  max-height: 120px;
}
.canvas-aria__input:focus { border-color: rgba(120, 160, 255, 0.45); }
.canvas-aria__input::placeholder { color: rgba(255, 255, 255, 0.4); }
.canvas-aria__send {
  appearance: none;
  border: 0;
  background: linear-gradient(180deg, #2a6cff 0%, #1c4fd8 100%);
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: filter 100ms ease;
}
.canvas-aria__send:hover:not(:disabled) { filter: brightness(1.12); }
.canvas-aria__send:disabled { opacity: 0.4; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════════
   ARIA PROJECT CHIP — appears under Aria's message when she auto-created
   a project from "I want to start X" intent. One click opens the canvas.
   ═══════════════════════════════════════════════════════════════════ */
.aria-project-chip {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 12px;
  border: 1px solid rgba(120, 200, 255, 0.28);
  background: linear-gradient(180deg, rgba(40, 80, 160, 0.32) 0%, rgba(28, 56, 120, 0.32) 100%);
  border-radius: 16px;
  color: #fff;
  cursor: pointer;
  max-width: 92%;
  text-align: left;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}
.aria-project-chip:hover {
  border-color: rgba(150, 220, 255, 0.55);
  background: linear-gradient(180deg, rgba(48, 96, 192, 0.42) 0%, rgba(32, 64, 144, 0.42) 100%);
  transform: translateY(-1px);
}
.aria-project-chip__icon {
  font-size: 18px;
  flex-shrink: 0;
}
.aria-project-chip__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.aria-project-chip__label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.02em;
}
.aria-project-chip__name {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aria-project-chip__cta {
  font-size: 12px;
  color: rgba(170, 220, 255, 0.95);
  font-weight: 500;
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
}

/* Offer variant — Aria asks before creating. Two buttons + optional hint. */
.aria-project-chip--offer {
  flex-direction: row;
  align-items: flex-start;
  padding: 14px;
  cursor: default;
}
.aria-project-chip--offer:hover {
  transform: none;
}
.aria-project-chip--offer .aria-project-chip__body {
  flex: 1;
  gap: 3px;
}
.aria-project-chip__hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 4px;
  font-style: italic;
}
.aria-project-chip__err {
  font-size: 11px;
  color: #ff9090;
  margin-top: 4px;
}
.aria-project-chip__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  align-items: stretch;
}
.aria-project-chip__yes,
.aria-project-chip__no {
  appearance: none;
  border: 0;
  padding: 7px 14px;
  border-radius: 12px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 100ms ease, background 100ms ease;
}
.aria-project-chip__yes {
  background: linear-gradient(180deg, #2a6cff 0%, #1c4fd8 100%);
  color: #fff;
  font-weight: 600;
}
.aria-project-chip__yes:hover:not(:disabled) { filter: brightness(1.12); }
.aria-project-chip__yes:disabled { opacity: 0.55; cursor: not-allowed; }
.aria-project-chip__no {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}
.aria-project-chip__no:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* Clickable Dashboard title (sidebar header) */
.app-sidebar-left-title--btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  padding: 0;
  transition: color 120ms ease;
}
.app-sidebar-left-title--btn:hover {
  color: rgba(150, 200, 255, 0.95);
}
.app-sidebar-business--btn {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  padding: 0;
}

/* ── Project list (dashboard landing) ────────────────────────────────── */
.canvas-list {
  max-width: 1100px;
  margin: 0 auto;
}
.canvas-list__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 28px;
}
.canvas-list__title {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}
.canvas-list__new {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.canvas-list__new:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.24);
}
.canvas-list__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.canvas-list__card {
  appearance: none;
  text-align: left;
  cursor: pointer;
  background: rgba(20, 22, 28, 0.65);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 20px 18px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 120px;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.canvas-list__card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(28, 30, 38, 0.78);
  transform: translateY(-2px);
}
.canvas-list__card-title {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
}
.canvas-list__card-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: capitalize;
}
.canvas-list__card-meta {
  margin-top: auto;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  gap: 8px;
  text-transform: capitalize;
}
.canvas-list__empty {
  text-align: center;
  padding: 80px 20px;
  color: rgba(255, 255, 255, 0.65);
}
.canvas-list__empty p { margin: 6px 0; }
.canvas-list__empty .canvas-list__new { margin-top: 18px; }

/* ── Canvas (single project view) ────────────────────────────────────── */
.canvas {
  max-width: 980px;
  margin: 0 auto;
}
.canvas__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.canvas__title {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}
.canvas__subtitle {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 4px;
  text-transform: capitalize;
}
.canvas__mode-chip {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
}
.canvas__panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 900px) {
  .canvas__panels {
    grid-template-columns: repeat(2, 1fr);
  }
  /* First-row panels (score >= 0.85) span full width if they are key_values */
  .canvas__panels > .canvas-panel:first-child {
    grid-column: 1 / -1;
  }
}
.canvas__add-btn {
  appearance: none;
  margin-top: 22px;
  width: 100%;
  padding: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.canvas__add-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
}

/* ── Panel chrome ────────────────────────────────────────────────────── */
.canvas-panel {
  background: rgba(20, 22, 28, 0.65);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 18px 18px 16px;
  position: relative;
  transition: border-color 180ms ease;
}
.canvas-panel:hover { border-color: rgba(255, 255, 255, 0.12); }
.canvas-panel.is-locked { border-color: rgba(255, 200, 100, 0.20); }
.canvas-panel.is-user-placed { border-color: rgba(120, 200, 255, 0.18); }
.canvas-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.canvas-panel__title {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
}
.canvas-panel__actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}
.canvas-panel__actions.is-shown {
  opacity: 1;
  pointer-events: auto;
}
.canvas-panel__btn {
  appearance: none;
  border: 0;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: background 100ms ease;
}
.canvas-panel__btn:hover { background: rgba(255, 255, 255, 0.16); }
.canvas-panel__btn:disabled { opacity: 0.3; cursor: not-allowed; }
.canvas-panel__btn.is-active { background: rgba(255, 200, 100, 0.22); color: #ffd58a; }
.canvas-panel__btn--danger:hover { background: rgba(255, 80, 80, 0.32); color: #fff; }
.canvas-panel__body {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.88);
}

/* ── Panel primitives ────────────────────────────────────────────────── */
.canvas-panel__text,
.canvas-panel__notes {
  width: 100%;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  font: inherit;
  font-size: 14px;
  line-height: 1.55;
  resize: vertical;
  outline: none;
  padding: 4px 0;
}
.canvas-panel__text::placeholder,
.canvas-panel__notes::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.canvas-panel__kv { display: flex; flex-direction: column; gap: 6px; }
.canvas-panel__kv-row {
  display: grid;
  grid-template-columns: 1fr 1fr 24px;
  gap: 8px;
  align-items: center;
}
.canvas-panel__kv-label,
.canvas-panel__kv-value {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 6px 10px;
  color: #fff;
  font-size: 13px;
  outline: none;
}
.canvas-panel__kv-label { color: rgba(255, 255, 255, 0.65); }
.canvas-panel__kv-label:focus,
.canvas-panel__kv-value:focus {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
}
.canvas-panel__kv-x {
  appearance: none;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
  border: 0;
  border-radius: 6px;
  width: 22px;
  height: 22px;
  cursor: pointer;
  font-size: 13px;
}
.canvas-panel__kv-x:hover { background: rgba(255, 80, 80, 0.3); color: #fff; }
.canvas-panel__kv-add {
  margin-top: 4px;
  align-self: flex-start;
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 6px;
}
.canvas-panel__kv-add:hover { color: #fff; }

.canvas-panel__checklist { display: flex; flex-direction: column; gap: 6px; }
.canvas-panel__check-row {
  display: grid;
  grid-template-columns: 24px 1fr 24px;
  gap: 8px;
  align-items: center;
}
.canvas-panel__check-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #8fb6ff;
  cursor: pointer;
}
.canvas-panel__check-text {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 13px;
  padding: 4px 0;
  outline: none;
}
.canvas-panel__check-row.is-done .canvas-panel__check-text {
  text-decoration: line-through;
  color: rgba(255, 255, 255, 0.4);
}

.canvas-panel__placeholder {
  padding: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
}
.canvas-panel__placeholder-type {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 6px;
}

/* ── Add-panel picker (modal) ────────────────────────────────────────── */
.canvas-picker__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.canvas-picker {
  width: min(560px, 92vw);
  background: rgba(20, 22, 28, 0.92);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  padding: 22px;
  color: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.canvas-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.canvas-picker__head h3 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}
.canvas-picker__close {
  appearance: none;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 22px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.canvas-picker__close:hover { color: #fff; }
.canvas-picker__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.canvas-picker__tile {
  appearance: none;
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px;
  color: #fff;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.canvas-picker__tile:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.20);
}
.canvas-picker__icon { font-size: 20px; margin-bottom: 6px; }
.canvas-picker__label { font-weight: 600; font-size: 14px; }
.canvas-picker__hint { font-size: 12px; color: rgba(255, 255, 255, 0.5); margin-top: 2px; }

/* ── New-project modal ───────────────────────────────────────────────── */
.canvas-new { width: min(620px, 92vw); }
.canvas-new__body { display: flex; flex-direction: column; gap: 14px; }
.canvas-new__input {
  width: 100%;
  min-height: 140px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px;
  color: #fff;
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
}
.canvas-new__input:focus { border-color: rgba(255, 255, 255, 0.24); }
.canvas-new__input::placeholder { color: rgba(255, 255, 255, 0.4); }
.canvas-new__actions { display: flex; gap: 10px; justify-content: flex-end; }
.canvas-new__cancel,
.canvas-new__create {
  appearance: none;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.canvas-new__create {
  background: linear-gradient(180deg, #2a6cff 0%, #1c4fd8 100%);
  border-color: transparent;
}
.canvas-new__create:hover { filter: brightness(1.08); }
.canvas-new__create:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Empty / loading / error states ──────────────────────────────────── */
.canvas-loading,
.canvas-empty,
.canvas-error {
  text-align: center;
  padding: 80px 20px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}
.canvas-error { color: #ff8888; }

/* ── Hire/Parts action cards ────────────────────────────────────────────
   Rendered under Aria's chat bubble when conversation response has
   displayMode='hire_offer' or 'parts_offer'. iOS 26 Liquid Glass aesthetic
   to match the chat surface. */
.aria-action-card {
  margin: 10px 0 4px 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  color: rgba(255, 255, 255, 0.92);
  max-width: 480px;
}
.aria-action-card--success {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.28);
}
.aria-action-card__title {
  font-size: 14px; font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: 0.01em;
}
.aria-action-card__body {
  font-size: 13px; line-height: 1.5;
  display: flex; flex-direction: column; gap: 6px;
}
.aria-action-card__hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 6px;
}
.aria-action-card__err {
  font-size: 12px;
  color: #ff9090;
  margin-top: 8px;
}
.aria-action-card__form {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 12px;
}
.aria-action-card__form label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
}
.aria-action-card__form input,
.aria-action-card__form select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
  font-size: 13px;
  font-family: inherit;
}
.aria-action-card__form input:focus,
.aria-action-card__form select:focus {
  outline: none;
  border-color: rgba(34, 197, 94, 0.5);
}
.aria-action-card__actions {
  display: flex; gap: 8px; align-items: center;
  margin-top: 4px;
}
.aria-action-card__primary {
  padding: 10px 18px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.35);
  transition: transform 0.12s, box-shadow 0.12s;
}
.aria-action-card__primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.45);
}
.aria-action-card__primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.aria-action-card__row {
  display: flex; justify-content: space-between;
  font-size: 12.5px;
}
.aria-action-card__row-label {
  color: rgba(255, 255, 255, 0.72);
}
.aria-action-card__row-val.ok    { color: #4ade80; }
.aria-action-card__row-val.stub  { color: #fbbf24; }
.aria-action-card__row-val.err   { color: #ff8888; }
.aria-action-card__pick {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}
.aria-action-card__pick:hover {
  background: rgba(0, 0, 0, 0.32);
}
.aria-action-card__pick-name {
  font-size: 13px; font-weight: 600;
  margin-bottom: 4px;
}
.aria-action-card__pick-meta {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.65);
}

/* ── Dashboard preview tile grid ────────────────────────────────────────
   Rendered at the end of conversational onboarding. Mike sees "here's
   how YOUR dashboard would look" with realistic example tiles. */
.aria-action-card--dashboard {
  max-width: 640px;
}
.aria-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.aria-dash-tile {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.aria-dash-tile--good { border-color: rgba(34, 197, 94, 0.35); background: rgba(34, 197, 94, 0.06); }
.aria-dash-tile--warning { border-color: rgba(245, 158, 11, 0.4); background: rgba(245, 158, 11, 0.06); }
.aria-dash-tile--alert { border-color: rgba(220, 38, 38, 0.4); background: rgba(220, 38, 38, 0.06); }
.aria-dash-tile__title {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.aria-dash-tile__value {
  font-size: 22px; font-weight: 800;
  color: #fff; line-height: 1.1; margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.aria-dash-tile__unit {
  font-size: 11.5px; color: rgba(255, 255, 255, 0.55);
  margin-top: 1px;
}
.aria-dash-tile__trend {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 3px;
  font-style: italic;
}
.aria-dash-tile__badge {
  font-size: 10px; font-weight: 700;
  margin-top: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  display: inline-block;
  align-self: flex-start;
}
.aria-dash-tile__badge--good { background: rgba(34, 197, 94, 0.22); color: #86efac; }
.aria-dash-tile__badge--warning { background: rgba(245, 158, 11, 0.22); color: #fcd34d; }
.aria-dash-tile__badge--alert { background: rgba(220, 38, 38, 0.22); color: #fca5a5; }
.aria-dash-tile__badge--info { background: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.75); }
.aria-dash-tile__action {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  line-height: 1.35;
}

/* ── Knowledge Review dashboard ─────────────────────────────────────────
   /#review surface. Braeden's queue for promoting / rejecting candidate
   claims before Aria teaches them. */
.review-page {
  padding: 20px 24px 60px;
  max-width: 1280px; margin: 0 auto;
  color: rgba(255,255,255,0.92);
}
.review-page__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.review-page__header h1 {
  font-size: 24px; font-weight: 800; letter-spacing: -0.01em;
}
.review-subnav { display: flex; gap: 4px; }
.review-subnav__btn {
  padding: 8px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.78);
  font-size: 13px; cursor: pointer;
}
.review-subnav__btn.active { background: rgba(34,197,94,0.18); color: #fff; border-color: rgba(34,197,94,0.4); }
.review-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.review-tab {
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.78); cursor: pointer; font-size: 13px;
}
.review-tab.active { background: rgba(34,197,94,0.20); color: #fff; border-color: rgba(34,197,94,0.5); }
.review-tab.urgent { border-color: rgba(245,158,11,0.6); }
.review-tab.urgent.active { background: rgba(245,158,11,0.2); }
.review-tab__count {
  display: inline-block; min-width: 22px; text-align: center;
  margin-left: 6px; padding: 0 6px; border-radius: 999px;
  background: rgba(255,255,255,0.1); font-size: 11px; font-weight: 700;
}
.review-filters {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.review-input {
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.22); color: #fff;
  font-size: 13px; font-family: inherit; min-width: 220px;
}
.review-input--full { width: 100%; resize: vertical; min-height: 60px; }
.review-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.78); }
.review-btn {
  padding: 8px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06); color: #fff; cursor: pointer; font-size: 13px;
  font-weight: 600;
}
.review-btn:hover { background: rgba(255,255,255,0.10); }
.review-btn--primary { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); border-color: transparent; box-shadow: 0 2px 8px rgba(34,197,94,0.3); }
.review-btn--primary:hover { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); }
.review-btn--reject { background: rgba(220,38,38,0.18); border-color: rgba(220,38,38,0.4); color: #fff; }
.review-btn--reject:hover { background: rgba(220,38,38,0.28); }
.review-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.review-list { display: flex; flex-direction: column; gap: 12px; }
.review-card {
  padding: 14px 16px; border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
}
.review-card--high-stakes { border-color: rgba(245,158,11,0.5); background: rgba(245,158,11,0.06); }
.review-card__top { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; }
.review-card__claim { flex: 1; font-size: 14.5px; line-height: 1.5; cursor: pointer; }
.review-card__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.review-pill {
  padding: 3px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.10); font-size: 11px; font-weight: 700;
  letter-spacing: 0.02em;
}
.review-pill--alert { background: rgba(245,158,11,0.25); color: #fcd34d; }
.review-pill--score { background: rgba(34,197,94,0.18); color: #86efac; }
.review-pill--ghost { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.6); font-weight: 500; }
.review-card__actions { display: flex; gap: 8px; margin-top: 14px; }
.review-card__detail { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); }
.review-card__detail h4 { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 8px; }
.review-source-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 12px; align-items: center; padding: 6px 0; font-size: 12.5px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.review-source-row__type { font-size: 10px; }
.review-source-row__score { color: rgba(255,255,255,0.7); }
.review-source-row__rate { color: rgba(255,255,255,0.7); font-variant-numeric: tabular-nums; }
.review-card__contradictions { margin-top: 14px; }
.review-conflict { padding: 8px 10px; border-radius: 8px; background: rgba(220,38,38,0.06); border: 1px solid rgba(220,38,38,0.2); margin-bottom: 6px; }
.review-conflict__existing { font-size: 12.5px; }
.review-conflict__verdict { display: flex; gap: 10px; margin-top: 4px; font-size: 11.5px; color: #fca5a5; }
.review-card__outcomes { margin-top: 14px; }
.review-outcomes-row { display: flex; gap: 14px; font-size: 13px; }
.review-outcomes-detail { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.review-edit-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.review-edit-row label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: rgba(255,255,255,0.6); }
.review-empty { padding: 40px; text-align: center; color: rgba(255,255,255,0.5); }
.review-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.review-table th, .review-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.06); }
.review-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.5); font-weight: 600; }
.review-outcomes-list { list-style: none; padding: 0; margin: 0; }
.review-outcomes-list li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.review-outcomes-list__rate { font-weight: 700; min-width: 60px; }
.review-outcomes-list__claim { flex: 1; }

/* ─────────────────────────────────────────────────────────────────────────
   AriaDock — always-present Aria orb (bottom-right) + chat popup
   Pinned on every screen so the owner can talk to Aria from anywhere.
   ───────────────────────────────────────────────────────────────────────── */
.aria-dock-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 2147483000;            /* above app content + most modals, below the assist overlay */
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;        /* the gear is the shape — no button background */
  box-shadow: none;
  color: #fff;
  transition: transform 0.18s ease, filter 0.18s ease;
  -webkit-app-region: no-drag;
  overflow: visible;
}
/* The gear-AI logo fills the button; drop-shadow follows the gear silhouette. */
.aria-dock-fab__face { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.45)); }

/* Floating Aria chat = the exact support-chat box, draggable (inline left/top). */
.support-chat--dock { position: fixed; }
.aria-dock-fab:hover { transform: translateY(-2px) scale(1.05); }
.aria-dock-fab:hover .aria-dock-fab__face { filter: drop-shadow(0 5px 8px rgba(0,0,0,0.55)); }
.aria-dock-fab:active { transform: scale(0.97); }
.aria-dock-fab--open {
  background: rgba(20,22,30,0.92);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14) inset, 0 6px 22px rgba(0,0,0,0.4);
}
.aria-dock-fab__orb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #ffffff 0%, #d6f6ff 18%, #00d9ff 55%, #0096ff 100%);
  box-shadow: 0 0 10px rgba(255,255,255,0.55), 0 0 16px rgba(0,217,255,0.7);
  animation: aria-dock-orb-pulse 2.6s ease-in-out infinite;
}
@keyframes aria-dock-orb-pulse {
  0%, 100% { transform: scale(0.9); opacity: 0.85; }
  50%      { transform: scale(1.08); opacity: 1; }
}

.aria-dock-panel {
  position: fixed;
  right: 22px;
  bottom: 92px;
  width: min(380px, calc(100vw - 36px));
  height: min(540px, calc(100vh - 130px));
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(18,20,28,0.78);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,217,255,0.08);
  animation: aria-dock-rise 0.2s ease;
}
@keyframes aria-dock-rise {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.aria-dock-panel__head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}
.aria-dock-panel__orb {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 32% 30%, #ffffff 0%, #00d9ff 55%, #0096ff 100%);
  box-shadow: 0 0 10px rgba(0,217,255,0.8);
  animation: aria-dock-orb-pulse 2.6s ease-in-out infinite;
}
.aria-dock-panel__title { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.aria-dock-panel__name { font-size: 0.98rem; font-weight: 700; color: #fff; }
.aria-dock-panel__status { font-size: 0.72rem; color: rgba(255,255,255,0.5); }
.aria-dock-panel__close {
  width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.7);
  transition: background 0.15s ease, color 0.15s ease;
}
.aria-dock-panel__close:hover { background: rgba(255,255,255,0.14); color: #fff; }

.aria-dock-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.aria-dock-empty {
  margin: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px;
  max-width: 270px;
}
.aria-dock-empty__orb {
  width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #ffffff 0%, #d6f6ff 16%, #00d9ff 55%, #0096ff 100%);
  box-shadow: 0 0 18px rgba(0,217,255,0.6);
  animation: aria-dock-orb-pulse 2.6s ease-in-out infinite;
}
.aria-dock-empty__text { font-size: 0.86rem; color: rgba(255,255,255,0.6); line-height: 1.45; }

.aria-dock-msg {
  max-width: 84%;
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 0.9rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}
.aria-dock-msg--user {
  align-self: flex-end;
  background: linear-gradient(135deg, #0096ff, #00d9ff);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.aria-dock-msg--assistant {
  align-self: flex-start;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.92);
  border-bottom-left-radius: 5px;
}
.aria-dock-msg--error { background: rgba(255,90,90,0.16); color: #ffd0d0; }

.aria-dock-typing { display: flex; gap: 5px; align-items: center; padding: 12px 14px; }
.aria-dock-typing span {
  width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.55);
  animation: aria-dock-typing 1.1s ease-in-out infinite;
}
.aria-dock-typing span:nth-child(2) { animation-delay: 0.18s; }
.aria-dock-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes aria-dock-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.aria-dock-panel__input {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 11px 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}
.aria-dock-panel__input textarea {
  flex: 1;
  resize: none;
  max-height: 96px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  color: #fff;
  padding: 9px 12px;
  font-size: 0.9rem;
  font-family: inherit;
  line-height: 1.4;
  outline: none;
}
.aria-dock-panel__input textarea::placeholder { color: rgba(255,255,255,0.4); }
.aria-dock-panel__input textarea:focus { border-color: rgba(0,217,255,0.5); }
.aria-dock-send {
  width: 38px; height: 38px; border-radius: 50%; border: 0; flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0096ff, #00d9ff); color: #fff;
  box-shadow: 0 3px 12px rgba(0,150,255,0.4);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.aria-dock-send:hover:not(:disabled) { transform: scale(1.06); }
.aria-dock-send:disabled { opacity: 0.4; cursor: default; }

/* Light theme — keep the popup legible on the white CEO/business surfaces. */
body.theme-light .aria-dock-panel {
  background: rgba(255,255,255,0.82);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 18px 60px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,150,255,0.1);
}
body.theme-light .aria-dock-panel__head,
body.theme-light .aria-dock-panel__input { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.07); }
body.theme-light .aria-dock-panel__name { color: #12131a; }
body.theme-light .aria-dock-panel__status { color: rgba(0,0,0,0.45); }
body.theme-light .aria-dock-panel__close { background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.55); }
body.theme-light .aria-dock-panel__close:hover { background: rgba(0,0,0,0.1); color: #12131a; }
body.theme-light .aria-dock-msg--assistant { background: rgba(0,0,0,0.05); color: #1c1d24; }
body.theme-light .aria-dock-empty__text { color: rgba(0,0,0,0.5); }
body.theme-light .aria-dock-panel__input textarea { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); color: #12131a; }
body.theme-light .aria-dock-panel__input textarea::placeholder { color: rgba(0,0,0,0.4); }

/* ── Support chat — daytime (light) theme ──────────────────────────────────
   Mirrors the .support-chat* dark rules (App.css ~5323-5445) for a white/light
   background. Placed after the dark rules so `body.theme-light` selectors win
   on specificity without !important — same convention as .aria-dock-panel.
   The dark theme uses an amber accent; the light theme swaps to the #0096ff
   blue the rest of the daytime UI uses (dot, user bubble, focus ring, send). */
body.theme-light .support-chat {
  background: linear-gradient(180deg, #ffffff 0%, #f4f5f8 100%);
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 28px 70px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,150,255,0.08);
}
body.theme-light .support-chat__header {
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
body.theme-light .support-chat__dot {
  background: #0096ff;
  box-shadow: 0 0 12px rgba(0,150,255,0.5);
}
body.theme-light .support-chat__name { color: #12131a; }
body.theme-light .support-chat__role { color: rgba(0,0,0,0.5); }
body.theme-light .support-chat__close {
  color: rgba(0,0,0,0.45);
  background: transparent;
}
body.theme-light .support-chat__close:hover {
  color: #12131a;
  background: rgba(0,0,0,0.06);
}
body.theme-light .support-chat__bubble--assistant {
  background: rgba(0,0,0,0.05);
  color: #1c1d24;
}
body.theme-light .support-chat__bubble--user {
  background: linear-gradient(135deg, #2aa2ff, #0096ff);
  color: #ffffff;
}
body.theme-light .support-chat__typing span {
  background: rgba(0,0,0,0.35);
}
body.theme-light .support-chat__input-row {
  border-top: 1px solid rgba(0,0,0,0.07);
}
body.theme-light .support-chat__input-row input {
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.12);
  color: #12131a;
}
body.theme-light .support-chat__input-row input::placeholder {
  color: rgba(0,0,0,0.4);
}
body.theme-light .support-chat__input-row input:focus {
  border-color: rgba(0,150,255,0.55);
}
body.theme-light .support-chat__input-row button {
  background: #0096ff;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0,150,255,0.30);
}
body.theme-light .support-chat__input-row button:hover:not(:disabled) {
  background: #0a86e0;
}

.screen-share-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  /* .app-center already applies horizontal padding — doubling made Assist narrower than Ask/Explore */
  padding: 0;
}

.screen-share-header {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.back-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 8px;
  padding: 0;
}

.back-btn:hover {
  color: var(--accent);
}

.screen-share-header h2 {
  margin: 0 0 4px;
  font-size: 1.25rem;
}

.screen-share-tagline {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.screen-share-start {
  padding: 32px 0;
  text-align: center;
}

.screen-share-allow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 420px;
  margin: 0 auto;
}

.screen-share-allow-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
  width: 100%;
}

.screen-share-allow-title {
  margin: 0 0 12px;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text);
}

.screen-share-allow-desc {
  margin: 0 0 20px;
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.screen-share-allow-desc strong {
  color: var(--text);
}

.screen-share-allow-requesting {
  margin: 0 0 14px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
}

.screen-share-allow-denied {
  margin-bottom: 20px;
  padding: 12px 14px;
  background: rgba(251, 191, 36, 0.15);
  border-radius: var(--radius);
  text-align: left;
}

.screen-share-allow-denied p {
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: var(--text);
}

.screen-share-open-settings--primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.screen-share-open-settings--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--bg);
}

.start-share-btn--allow {
  width: 100%;
  padding: 16px 24px;
  font-size: 1.05rem;
}

.screen-share-allow-hint {
  margin: 14px 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.screen-share-hint--below-allow {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.screen-share-start-prompt {
  margin: 0 0 20px;
  font-size: 1rem;
  color: var(--text);
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

.start-share-btn {
  padding: 14px 24px;
  border-radius: var(--radius);
  border: none;
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
  font-size: 1rem;
}

.start-share-btn:hover {
  background: var(--accent-hover);
}

.screen-share-hint {
  margin: 12px auto 0;
  max-width: 320px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.screen-share-hint--permission {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.screen-share-open-settings {
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.screen-share-open-settings:hover {
  background: var(--input-bg);
  border-color: var(--accent);
}

.screen-share-error {
  margin-top: 12px;
  color: #f87171;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.screen-share-error-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.screen-share-connect-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(255, 180, 50, 0.12);
  border: 1px solid rgba(255, 180, 50, 0.25);
  border-radius: 10px;
  margin: 8px 0;
  font-size: 0.82rem;
  color: rgba(255, 210, 120, 0.85);
  flex-wrap: wrap;
}
.screen-share-connect-banner .screen-share-open-settings,
.screen-share-connect-banner .start-share-btn--inline {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
}
.screen-share-connect-banner .start-share-btn--inline:hover,
.screen-share-connect-banner .screen-share-open-settings:hover {
  background: rgba(255, 255, 255, 0.18);
}

.screen-share-active {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 16px 0;
}

/* Top-right: live command / status while Assist is active */
.screen-share-command-hud {
  position: absolute;
  top: 58px;
  right: 12px;
  z-index: 40;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: min(340px, calc(100vw - 32px));
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(22, 22, 24, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.screen-share-command-hud-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
  background: var(--text-muted);
}

.screen-share-command-hud--hearing .screen-share-command-hud-dot {
  background: #38bdf8;
  animation: assist-hud-pulse 1.2s ease-in-out infinite;
}

.screen-share-command-hud--working .screen-share-command-hud-dot {
  background: #fbbf24;
  animation: assist-hud-pulse 1s ease-in-out infinite;
}

.screen-share-command-hud--speaking .screen-share-command-hud-dot {
  background: #c084fc;
  animation: assist-hud-pulse 1.3s ease-in-out infinite;
}

.screen-share-command-hud--ready .screen-share-command-hud-dot {
  background: #4ade80;
  opacity: 0.85;
}

@keyframes assist-hud-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.15); }
}

.screen-share-command-hud-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.screen-share-command-hud-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.screen-share-command-hud-detail {
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--text);
  word-break: break-word;
}

.screen-share-command-hud--hearing .screen-share-command-hud-title {
  color: #7dd3fc;
}

.screen-share-command-hud--working .screen-share-command-hud-title {
  color: #fcd34d;
}

.screen-share-command-hud--speaking .screen-share-command-hud-title {
  color: #d8b4fe;
}

.screen-share-command-hud--ready .screen-share-command-hud-title {
  color: #86efac;
}

.screen-share-live-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 14px;
  margin-bottom: 12px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  color: #fca5a5;
}

.screen-share-stop-in-banner {
  margin-left: auto;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid #b91c1c;
  background: #dc2626;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35);
}

.screen-share-stop-in-banner:hover {
  background: #ef4444;
  border-color: #dc2626;
  color: #fff;
}

.screen-share-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
  animation: screen-share-pulse 1.4s ease-in-out infinite;
}

@keyframes screen-share-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.2); }
}

.screen-share-body {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 16px;
  align-items: stretch;
}

.screen-preview-wrap {
  position: relative;
  flex: 1;
  min-height: 50vh;
  max-height: calc(100dvh - 200px);
  border-radius: var(--radius);
  overflow: hidden;
  background: #111;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.screen-preview-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  z-index: 1;
}

.screen-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.screen-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  /* Smooth anti-aliasing for annotation shapes and text */
  image-rendering: auto;
}

.screen-mic-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 16px;
}

.screen-mic-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, transform 0.1s;
}

.screen-mic-btn:hover {
  transform: scale(1.05);
}

.screen-mic-btn.active {
  background: var(--accent);
  color: var(--bg);
}

.screen-mic-btn.active:hover {
  background: var(--accent-hover);
}

.screen-mic-btn:not(.active) {
  background: var(--surface);
  color: var(--text-muted);
  border: 2px solid var(--border);
}

.screen-mic-btn:not(.active):hover {
  color: var(--text);
  border-color: var(--text-muted);
}

.screen-mic-btn svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.screen-mic-listening {
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--accent);
}

.screen-mic-wrap .screen-share-error {
  margin-top: 6px;
  font-size: 0.8rem;
}

.screen-aria-response {
  display: flex;
  flex-direction: column;
  min-width: 260px;
  max-width: 320px;
  flex-shrink: 0;
}

.screen-aria-response-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.screen-aria-speaking {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
}

.screen-aria-speaking-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: screen-share-pulse 1s ease-in-out infinite;
}

.screen-aria-response-box {
  flex: 1;
  min-height: 80px;
  padding: 12px 14px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-y: auto;
}

.screen-aria-response-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}

.screen-aria-response-placeholder {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  font-style: italic;
}

.screen-aria-model-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(10, 132, 255, 0.12);
  color: #5ac8fa;
  border: 1px solid rgba(10, 132, 255, 0.25);
  user-select: none;
}

/* Same layout as main Ask row: blue + (add), field, send, mic + who’s talking, red Stop */
.screen-share-input-row {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0;
  background: #2c2c2e;
  border-radius: 999px;
  padding: 8px 8px 8px 12px;
  margin-top: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  min-height: 52px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.screen-share-input-row .input-add-wrap {
  margin-right: 10px;
}

/* Match main chat: blue circular + (scoped so Assist always picks it up) */
.screen-share-input-row .input-add-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  border: none;
  background: #0a84ff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: 0;
}

.screen-share-input-row .input-add-btn:hover {
  background: #409cff;
}

.assist-mic-with-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 4px;
  gap: 2px;
  min-width: 44px;
}

.assist-mic-who {
  line-height: 1;
}

.assist-mic-who-text {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.assist-mic-who-text--aria {
  color: #fecaca;
}

.assist-mic-who-text--you {
  color: #7dd3fc;
}

.assist-mic-who-text--idle {
  color: rgba(161, 161, 170, 0.95);
}

.screen-share-input-row .screen-share-input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: none;
  background: transparent;
  font-size: 1rem;
}

.screen-share-input-row .screen-share-input:focus {
  outline: none;
}

.screen-share-input-row .input-send-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 2px;
}

.screen-share-input-row .input-send-btn:hover:not(:disabled) {
  color: var(--accent-hover);
  background: rgba(255, 255, 255, 0.08);
}

.screen-share-input-row .input-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  color: var(--text-muted);
}

.screen-share-input-row .input-mic-btn {
  margin-left: 2px;
}

.screen-share-stop-btn {
  flex-shrink: 0;
  margin-left: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid #b91c1c;
  background: #dc2626;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
  white-space: nowrap;
}

.screen-share-stop-btn:hover {
  background: #ef4444;
  border-color: #dc2626;
  color: #fff;
}

.add-menu-item--disabled {
  opacity: 0.6;
  cursor: default;
}

.add-menu-item--disabled:hover,
.add-menu-item:disabled:hover {
  background: transparent;
  color: var(--text);
}

.screen-input-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* ── Aria Settings Panel ── */
.aria-settings-panel {
  margin-top: 12px;
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
  padding-top: 8px;
}
.aria-settings-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--text-muted, rgba(255,255,255,0.5));
  font-size: 0.82rem;
  cursor: pointer;
  padding: 6px 0;
  width: 100%;
  transition: color 0.15s;
}
.aria-settings-toggle:hover { color: var(--text, #fff); }
.aria-settings-chevron { transition: transform 0.2s ease; }
.aria-settings-chevron--open { transform: rotate(180deg); }
.aria-settings-body {
  padding: 8px 0 4px;
}
.aria-settings-section {
  padding: 8px 0;
}
.aria-settings-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text, #fff);
  margin: 0 0 4px;
}
.aria-settings-desc {
  font-size: 0.78rem;
  color: var(--text-muted, rgba(255,255,255,0.5));
  margin: 0 0 10px;
  line-height: 1.4;
}
.aria-settings-desc strong { color: var(--text, #fff); }

/* Toggle switch */
.aria-settings-toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--text, #fff);
  cursor: pointer;
  padding: 4px 0;
}
.aria-settings-sub-option {
  padding-left: 46px;
  color: var(--text-muted, rgba(255,255,255,0.5));
}
.aria-settings-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.aria-settings-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.aria-settings-switch-track {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: rgba(255,255,255,0.12);
  transition: background 0.2s;
  cursor: pointer;
}
.aria-settings-switch-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}
.aria-settings-switch--on .aria-settings-switch-track {
  background: var(--accent, #6c5ce7);
}
.aria-settings-switch--on .aria-settings-switch-track::after {
  transform: translateX(16px);
}

/* Device ID display */
.aria-settings-device-id {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 4px 0;
}
.aria-settings-device-id-label {
  font-size: 0.75rem;
  color: var(--text-muted, rgba(255,255,255,0.4));
}
.aria-settings-device-id-value {
  font-size: 0.75rem;
  color: var(--text-muted, rgba(255,255,255,0.4));
  background: rgba(255,255,255,0.04);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: monospace;
}

/* Settings input (web device ID) */
.aria-settings-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius, 8px);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  background: var(--input-bg, rgba(255,255,255,0.04));
  color: var(--text, #fff);
  font-size: 0.82rem;
  margin-top: 4px;
}

/* Error spoken by Aria — more prominent */
.screen-share-error--spoken {
  background: rgba(231, 76, 60, 0.1);
  border: 1px solid rgba(231, 76, 60, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 8px;
  font-size: 0.82rem;
  color: #e74c3c;
}

.screen-input {
  flex: 1;
  min-width: 180px;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-size: 1rem;
}

.screen-send-btn,
.stop-share-btn {
  padding: 12px 18px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9rem;
}

.screen-send-btn {
  border: none;
  background: var(--accent);
  color: var(--bg);
}

.screen-send-btn:hover:not(:disabled) {
  background: var(--accent-hover);
}

.screen-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.stop-share-btn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
}

.stop-share-btn:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

.screen-reply {
  margin-top: 16px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Assist Mic Orb (large centered circle, matches home screen) ── */
.assist-mic-orb-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 0 10px;
}

.assist-mic-orb {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, box-shadow 0.25s, color 0.25s;
  position: relative;
  color: var(--text-muted, rgba(200,200,220,0.85));
  -webkit-tap-highlight-color: transparent;
}
.assist-mic-orb:hover {
  background: rgba(255, 255, 255, 0.12);
}
.assist-mic-orb:active {
  transform: scale(0.96);
}

/* Idle — flat white (matches home screen idle) */
.assist-mic-orb--idle {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
}

/* User speaking — solid blue fill (matches home screen) */
.assist-mic-orb--user-speaking {
  background: rgba(31, 111, 255, 0.9);
  color: #eaf4ff;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.35), 0 0 20px rgba(31, 111, 255, 0.45);
  animation: orb-speaking-pulse 0.55s ease-in-out infinite;
}

/* Aria speaking — solid red fill (matches home screen) */
.assist-mic-orb--aria-speaking {
  background: rgba(220, 52, 72, 0.92);
  color: #ffe9ec;
  box-shadow: 0 0 0 4px rgba(220, 52, 72, 0.35), 0 0 20px rgba(220, 52, 72, 0.45);
  animation: orb-aria-pulse 0.8s ease-in-out infinite;
}

/* Working — amber */
.assist-mic-orb--working {
  background: rgba(245, 158, 11, 0.25);
  box-shadow: 0 0 16px 4px rgba(245, 158, 11, 0.2);
}

/* Mic off — dim */
.assist-mic-orb:not(.assist-mic-orb--on) {
  background: rgba(20, 18, 30, 0.7);
  opacity: 0.7;
}
.assist-mic-orb:not(.assist-mic-orb--on) svg {
  color: rgba(180, 180, 200, 0.5);
}

.assist-mic-orb-inner {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid rgba(148, 148, 160, 0.35);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s, background 0.25s;
}
/* On (listening) inner: purple tint */
.assist-mic-orb--on .assist-mic-orb-inner {
  border-color: rgba(139, 92, 246, 0.55);
  background: rgba(61, 45, 92, 0.5);
}
/* Idle inner: bright white border (after --on so it wins when both classes present) */
.assist-mic-orb--idle .assist-mic-orb-inner {
  border-color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.08);
}
.assist-mic-orb--user-speaking .assist-mic-orb-inner {
  border-color: rgba(168, 206, 255, 0.95);
  background: rgba(24, 90, 204, 0.55);
}
.assist-mic-orb--aria-speaking .assist-mic-orb-inner {
  border-color: rgba(255, 192, 199, 0.95);
  background: rgba(165, 34, 51, 0.55);
}

/* Equalizer bars inside orb */
.assist-mic-orb-eq {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3.5px;
  height: 28px;
}
.assist-mic-orb-eq-bar {
  width: 4.5px;
  min-height: 4px;
  border-radius: 2px;
  background: rgba(167, 139, 250, 0.7);
  height: calc(5px + (var(--i) + 1) * 2.5px);
  max-height: 26px;
  animation: orb-eq-idle 1.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.18s);
  transition: background 0.2s ease;
}
.assist-mic-orb--user-speaking .assist-mic-orb-eq-bar {
  background: rgba(188, 229, 255, 0.96);
  animation: orb-eq-active 0.45s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.07s);
}
.assist-mic-orb--aria-speaking .assist-mic-orb-eq-bar {
  background: rgba(255, 205, 212, 0.96);
  animation: orb-eq-active 0.7s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.1s);
}

/* Label below orb */
.assist-mic-orb-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(180, 180, 200, 0.7);
  transition: color 0.2s;
}
.assist-mic-orb--user-speaking ~ .assist-mic-orb-label {
  color: #7dd3fc;
}
.assist-mic-orb--aria-speaking ~ .assist-mic-orb-label {
  color: #fecaca;
}

/* Animations */
@keyframes orb-speaking-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4), 0 0 14px rgba(31, 111, 255, 0.35); }
  50%      { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.15), 0 0 24px rgba(31, 111, 255, 0.55); }
}
@keyframes orb-aria-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(220, 52, 72, 0.4), 0 0 14px rgba(220, 52, 72, 0.35); }
  50%      { box-shadow: 0 0 0 6px rgba(220, 52, 72, 0.15), 0 0 24px rgba(220, 52, 72, 0.55); }
}
@keyframes orb-eq-idle {
  0%, 100% { height: calc(4px + var(--i) * 1px); }
  50% { height: calc(8px + var(--i) * 3px); }
}
@keyframes orb-eq-active {
  0%, 100% { height: 6px; }
  25% { height: 16px; }
  50% { height: 22px; }
  75% { height: 12px; }
}

/* ── Action Cards: rich visual results for food, shopping, rides ── */
.aria-action-cards {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 12px 0 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.aria-action-cards::-webkit-scrollbar { display: none; }

.aria-action-card {
  flex: 0 0 auto;
  width: 150px;
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  scroll-snap-align: start;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.aria-action-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.aria-action-card-img-wrap {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  padding: 12px;
}
.aria-action-card-img {
  max-width: 72px;
  max-height: 56px;
  object-fit: contain;
  border-radius: 6px;
}
.aria-action-card-img-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
}
.aria-action-card-img-fallback {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  color: var(--text-muted, rgba(255,255,255,0.5));
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aria-action-card-body {
  padding: 8px 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.aria-action-card-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aria-action-card-subtitle {
  font-size: 0.7rem;
  color: var(--text-muted, rgba(255,255,255,0.5));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aria-action-card-price {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent, #6c5ce7);
  margin-top: 1px;
}

.aria-action-card-btn {
  margin: 6px 10px 10px;
  padding: 6px 0;
  border: none;
  border-radius: 8px;
  background: var(--accent, #6c5ce7);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  text-align: center;
}
.aria-action-card-btn:hover {
  background: var(--accent-hover, #5a4bd1);
  transform: scale(1.02);
}
.aria-action-card-btn:active {
  transform: scale(0.98);
}

/* Category accent colors */
.aria-action-card--food .aria-action-card-btn { background: #e74c3c; }
.aria-action-card--food .aria-action-card-btn:hover { background: #c0392b; }
.aria-action-card--food .aria-action-card-price { color: #e74c3c; }

.aria-action-card--rides .aria-action-card-btn { background: #000; }
.aria-action-card--rides .aria-action-card-btn:hover { background: #222; }

.aria-action-card--shopping .aria-action-card-btn { background: #f39c12; }
.aria-action-card--shopping .aria-action-card-btn:hover { background: #d68910; }
.aria-action-card--shopping .aria-action-card-price { color: #f39c12; }

/* Responsive: smaller cards on narrow screens */
@media (max-width: 480px) {
  .aria-action-card { width: 130px; }
  .aria-action-card-img-wrap { height: 64px; padding: 8px; }
  .aria-action-card-img { max-width: 56px; max-height: 44px; }
}

/* ── Agent Action Status Pill ── */
/* Floating overlay that shows what AI is doing on the computer (clicking, typing, verifying) */
.agent-status-pill {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  z-index: 20;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  animation: agentPillSlideIn 0.3s ease-out;
  transition: opacity 0.4s ease, transform 0.4s ease;
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-status-pill--fading {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}

@keyframes agentPillSlideIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.agent-status-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.agent-status-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Phase-specific accent colors */
.agent-status-pill--executing {
  border-left: 3px solid #3b82f6;
}
.agent-status-pill--verifying {
  border-left: 3px solid #f59e0b;
}
.agent-status-pill--verified,
.agent-status-pill--done {
  border-left: 3px solid #10b981;
}
.agent-status-pill--correcting {
  border-left: 3px solid #f59e0b;
}
.agent-status-pill--error {
  border-left: 3px solid #ef4444;
}

/* Mini progress bar for multi-step actions */
.agent-status-progress {
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
  flex-shrink: 0;
}
.agent-status-progress-bar {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: #3b82f6;
  transition: width 0.3s ease;
}
.howto-thumbnails {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
  background: #000;
}

.howto-thumbnails-muted,
.howto-thumbnails-error {
  margin: 0;
  padding: 24px 16px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  flex-shrink: 0;
}

.howto-thumbnails-error {
  color: #f87171;
}

/* Vertical scroll-snap feed — one video per screen */
.howto-thumbnails-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.howto-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  scroll-snap-align: start;
  position: relative;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.howto-slide-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.howto-slide-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 16px 20px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Dot indicators */
.howto-dots {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}

.howto-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.howto-dot--active {
  background: #fff;
  transform: scale(1.4);
}

.howto-dot:hover {
  background: rgba(255, 255, 255, 0.7);
}
.image-gen-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  /* Modest top padding — the AI Generator title sits on its own row near
     the top, and the Image/Video toggle row hangs below it. */
  padding: 24px 0 0;
  /* Break out of .app-center's 16px padding so the cosmic gradient
     fills edge-to-edge. */
  margin-left: -16px;
  margin-right: -16px;
  overflow: hidden;
  align-items: stretch;
  /* ── Liquid-glass cosmic background ─────────────────────────────────
     Same 4-radial-gradient setup as glass-frame-demo.html. Fixed-attached
     so the gradients don't scroll with the form content. */
  background:
    radial-gradient(800px 600px at 20% 20%, #ff7e5f, transparent 60%),
    radial-gradient(900px 700px at 80% 30%, #4facfe, transparent 60%),
    radial-gradient(700px 600px at 60% 80%, #43e97b, transparent 60%),
    radial-gradient(700px 600px at 20% 90%, #f093fb, transparent 60%),
    #0a0a14;
  background-attachment: fixed;
}

/* ── Section labels — bright white + subtle shadow so DESCRIPTION,
   REFERENCE IMAGES, QUALITY/MODEL/PRICE, PIXEL, YOUR VOICES, SOUND,
   NUMBER TO GENERATE, etc. pop against the cosmic background. */
.image-gen-view .image-gen-label,
.image-gen-view .image-gen-voices-label,
.image-gen-view .image-gen-action-label,
.image-gen-view .image-gen-sound-title,
.image-gen-view .image-gen-voice-label {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
/* Voices hint text (the line under the voice column) — readable but a
   touch softer so it stays a "secondary" line. */
.image-gen-view .image-gen-elevenlabs-hint {
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ── Every interactive "box" matches the Quality/Model/Price pill ─────
   Dark grey body (rgba(58,60,70,0.72)) + the existing Apple Liquid Glass
   highlight gradient already on those elements. !important is needed
   where the shared base rule sets background-color: transparent !important. */

/* GlassSelect trigger pills (Quality/Model/Price, Pixel, Number to
   generate, Your voices, Sound, Video model, Audio model, Duration). */
.image-gen-view .glass-select__trigger {
  background-color: rgba(58, 60, 70, 0.72);
}
.image-gen-view .glass-select__trigger:hover {
  background-color: rgba(70, 72, 82, 0.82);
}

/* GlassSelect open dropdown menu — option rows sit on the same dark grey. */
.image-gen-view .glass-select__menu {
  background-color: rgba(40, 42, 50, 0.92);
}

/* Description textarea + dialog input — same dark grey body. */
.image-gen-view .image-gen-prompt,
.image-gen-view .image-gen-dialog-input {
  background-color: rgba(58, 60, 70, 0.72) !important;
  color: #fff !important;
}
.image-gen-view .image-gen-prompt::placeholder,
.image-gen-view .image-gen-dialog-input::placeholder {
  color: rgba(255, 255, 255, 0.68) !important;
}
.image-gen-view .image-gen-prompt:focus,
.image-gen-view .image-gen-dialog-input:focus {
  background-color: rgba(70, 72, 82, 0.82) !important;
  border-color: rgba(252, 211, 77, 0.7) !important;
}

/* Image / Video / Audio mode tabs — same dark grey for inactive tabs.
   Active tab keeps its yellow accent. */
.image-gen-view .image-gen-mode-top-btn:not(.active) {
  background-color: rgba(58, 60, 70, 0.72) !important;
  color: #fff !important;
}
.image-gen-view .image-gen-mode-top-btn:not(.active):hover:not(:disabled) {
  background-color: rgba(70, 72, 82, 0.82) !important;
}

/* "+ Add or drop" reference slot. */
.image-gen-view .image-gen-ref-add {
  background-color: rgba(58, 60, 70, 0.72) !important;
  color: #fff !important;
}
.image-gen-view .image-gen-ref-add:hover {
  background-color: rgba(70, 72, 82, 0.82) !important;
}

/* "+ Create a voice" dashed pill. */
.image-gen-view .image-gen-create-voice-btn {
  background-color: rgba(58, 60, 70, 0.72);
}
.image-gen-view .image-gen-create-voice-btn:hover:not(:disabled) {
  background-color: rgba(70, 72, 82, 0.82);
}

/* SIZE 1/2/3/4 pills in the results panel — same dark grey body as the
   GlassSelect pills. Active state keeps the yellow accent. */
.image-gen-view .image-gen-results-per-row-btn {
  background-color: rgba(58, 60, 70, 0.72) !important;
}
.image-gen-view .image-gen-results-per-row-btn:hover:not(.active) {
  background-color: rgba(70, 72, 82, 0.82) !important;
}

/* SIZE −/+ stepper pill — one rounded pill with two buttons separated
   by a thin vertical divider. Dark grey body matches the family. */
.image-gen-view .image-gen-results-stepper {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background:
    radial-gradient(
      ellipse 110% 70% at 18% -10%,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.04) 22%,
      rgba(255, 255, 255, 0.00) 50%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.01) 45%,
      rgba(255, 255, 255, 0.03) 100%
    );
  background-color: rgba(58, 60, 70, 0.72);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    0 6px 18px rgba(0, 0, 0, 0.38);
  overflow: hidden;
}
.image-gen-view .image-gen-results-stepper-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.95);
  width: 42px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  padding: 0;
}
.image-gen-view .image-gen-results-stepper-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.10);
}
.image-gen-view .image-gen-results-stepper-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.image-gen-view .image-gen-results-stepper-divider {
  display: block;
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.28);
  flex-shrink: 0;
}

/* Reference image / Frame to frame segmented toggle — same dark grey
   shade as the rest of the pill family. Active button stays yellow. */
.image-gen-view .image-gen-segmented {
  background-color: rgba(58, 60, 70, 0.72);
}

/* ── Label outline "frame" — every section label (DESCRIPTION, REFERENCE
   IMAGES — 0/3, QUALITY / MODEL / PRICE, PIXEL, YOUR VOICES, SOUND,
   QUANTITY, MODEL/DURATION/RESOLUTION) gets a 1px black outline around
   each character via 4-direction text-shadow + a softer drop shadow.
   Reads cleanly against any color zone of the cosmic background. */
.image-gen-view .image-gen-label,
.image-gen-view .image-gen-voices-label,
.image-gen-view .image-gen-action-label,
.image-gen-view .image-gen-sound-title,
.image-gen-view .image-gen-voice-label,
.image-gen-view .image-gen-results-size-label {
  text-shadow:
    -1px -1px 0 rgba(0, 0, 0, 0.85),
     1px -1px 0 rgba(0, 0, 0, 0.85),
    -1px  1px 0 rgba(0, 0, 0, 0.85),
     1px  1px 0 rgba(0, 0, 0, 0.85),
     0 2px 4px rgba(0, 0, 0, 0.55);
}

/* Monthly-spend badge — give it the full Apple Liquid Glass treatment so
   it matches the GlassSelect pill family. */
.image-gen-view .image-gen-spend-badge {
  background:
    radial-gradient(
      ellipse 110% 70% at 18% -10%,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.04) 22%,
      rgba(255, 255, 255, 0.00) 50%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.01) 45%,
      rgba(255, 255, 255, 0.03) 100%
    );
  background-color: rgba(58, 60, 70, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
}
.image-gen-view .image-gen-spend-badge:hover {
  background-color: rgba(70, 72, 82, 0.82);
  border-color: rgba(255, 255, 255, 0.30);
}

.image-gen-header {
  flex-shrink: 0;
  /* Title now lives ABOVE this header on its own row. The header itself
     just holds the far-left Image/Video toggle. Top padding pushes the
     buttons down a touch from the very top of the page. */
  padding: 56px 24px 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.image-gen-header > .image-gen-mode-top {
  margin: 0;          /* override the negative-margin pull from earlier */
}

.image-gen-mode-top {
  display: flex;
  gap: 10px;
  /* Pull aggressively up so the buttons sit near the top of the page,
     close to the AI Generator title in the centered header above. */
  margin: -40px 0 10px;
}

.image-gen-mode-top-btn {
  padding: 10px 24px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.image-gen-mode-top-btn:hover:not(:disabled) {
  border-color: var(--text-muted);
  color: var(--text);
}

.image-gen-mode-top-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.image-gen-mode-top-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.image-gen-title {
  /* Floats at the top center of the viewport — position: fixed so it
     takes ZERO space in the layout flow. Now making it bigger does NOT
     push the buttons / form / panel below it. */
  position: fixed;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: 'Bricolage Grotesque', 'Inter', -apple-system, sans-serif;
  font-size: clamp(80px, 9vw, 140px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1;
  text-align: center;
  user-select: none;
  pointer-events: none;
  z-index: 150;
  /* Slide with the rest of the page when the dashboard drawer opens/closes. */
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

/* When the dashboard drawer is open the rest of the workbench is shifted
   right by the drawer width — keep the title centered relative to the
   visible content area by sliding it half the drawer width too. */
body.aria-drawer-open .image-gen-title {
  transform: translateX(calc(-50% + 140px));
}

/* ── Monthly spend badge ─────────────────────────────────────────────
   Sits inside the Size-row (results-panel-actions), pushed to the far
   right with margin-left: auto. Ambient cost transparency. Click to
   expand the per-model breakdown panel. */
.image-gen-spend-badge {
  position: relative;
  margin-left: auto;
  z-index: 5;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.image-gen-spend-badge:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
}
.image-gen-spend-badge.is-open {
  border-color: rgba(252, 211, 77, 0.45);
}
.image-gen-spend-badge__label {
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.image-gen-spend-badge__total {
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.image-gen-spend-badge__count {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
}

/* Expanded breakdown panel — drops below the badge */
.image-gen-spend-badge__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 280px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(20, 20, 24, 0.92);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  cursor: default;
  text-align: left;
}
.image-gen-spend-badge__panel-head {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
  margin-bottom: 8px;
}
.image-gen-spend-badge__panel-empty {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  padding: 4px 0;
}
.image-gen-spend-badge__panel-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  font-size: 13px;
}
.image-gen-spend-badge__panel-model {
  color: rgba(255, 255, 255, 0.78);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
}
.image-gen-spend-badge__panel-value {
  color: #ffffff;
  font-weight: 600;
}

/* Panel sits below + flush right of the badge */

.image-gen-tagline {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.image-gen-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  gap: 20px;
  /* No right padding — the results panel runs flush to the right edge. */
  padding: 0 0 0 24px;
}

.image-gen-form {
  /* Fixed-width form on the left so the results panel can grow into
     all remaining horizontal space (anchored to the right edge). */
  flex: 0 0 640px;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  /* No top padding — Image/Video toggle sits flush at the top of the form. */
  padding: 0 4px 24px 0;
  max-width: 640px;
}

.image-gen-layout--panel-hidden .image-gen-form {
  flex: 1 1 100%;
  max-width: 760px;
  margin: 0 auto;
  padding-right: 0;
}

.image-gen-results-panel--hidden {
  display: none !important;
}

/* Narrow viewport — stack form on top of panel */
@media (max-width: 900px) {
  .image-gen-layout {
    flex-direction: column;
    overflow-y: auto;
    padding: 0 16px;
    gap: 12px;
  }
  .image-gen-form {
    flex: 0 0 auto;
    max-width: 100%;
    padding: 16px 0 8px;
    overflow-y: visible;
  }
  .image-gen-results-panel {
    flex: 0 0 auto;
    border-left: none !important;
    border-top: 1px solid var(--border);
    padding: 16px 0 24px !important;
  }
}

.image-gen-results-show-btn {
  position: fixed;
  top: 80px;
  right: 12px;
  z-index: 10;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  opacity: 0.85;
  transition: opacity 0.15s;
}
.image-gen-results-show-btn:hover {
  opacity: 1;
}

.image-gen-results-hide {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}
.image-gen-results-hide:hover {
  color: var(--text);
}

.image-gen-field {
  margin-bottom: 20px;
  /* Stack label + control vertically and CENTER everything horizontally so
     the small uppercase label sits directly above the centred control below
     it (instead of being centred against the full field width). */
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Inputs/textareas should still fill the row even when their parent field
   uses centered flex layout. */
.image-gen-field > .image-gen-prompt,
.image-gen-field > .image-gen-dialog-input {
  align-self: stretch;
}
/* Refs-row layout — keep the existing horizontal flex behavior. */
.image-gen-field > .image-gen-refs {
  align-self: stretch;
}
/* Labels are full-width so their own text-align: center keeps them centered
   inside the wider field even when the control below is narrower. */
.image-gen-field > .image-gen-label {
  align-self: stretch;
}

/* Video model picker — segmented switch sits on the LEFT side of the form,
   and the small "VIDEO MODEL" label sits centered DIRECTLY OVER the switch
   (not centered against the wider form column). We shrink the field to the
   width of its widest child (the switch) and anchor it flush to the left. */
.image-gen-field-video-mode {
  margin-bottom: 16px;
  align-items: stretch;
  align-self: flex-start;
  width: fit-content;
}
.image-gen-field-video-mode > .image-gen-label {
  text-align: center;
}
.image-gen-video-mode-select {
  width: 100%;
  max-width: 280px;
  margin-top: 6px;
}

/* Keep the 3 reference slots section from collapsing */
.image-gen-field-refs-three {
  min-width: 0;
}

.image-gen-field-refs-three .image-gen-refs-three {
  display: grid !important;
}

.image-gen-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 8px;
  text-align: center;
}

/* 3-column header variant — used above the Model row. Lines up with the
   inner 3-column option layout (★ quality / brand / price). Padding mirrors
   the option-row padding (16px L/R) so the labels sit exactly over the
   columns they describe. */
.image-gen-label.image-gen-label--3col {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  padding: 0 22px;
}
.image-gen-label--3col .image-gen-label__left   { text-align: left;  }
.image-gen-label--3col .image-gen-label__center { text-align: center; }
.image-gen-label--3col .image-gen-label__right  { text-align: right; }

.image-gen-prompt {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
  min-height: 100px;
  box-sizing: border-box;
}

.image-gen-prompt:focus {
  outline: none;
  border-color: var(--accent);
}

.image-gen-prompt::placeholder {
  color: var(--text-muted);
}

.image-gen-dialog-input {
  width: 100%;
  min-height: 100px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--input-bg);
  resize: vertical;
  font: inherit;
  color: var(--text);
  font-size: 0.95rem;
}
.image-gen-dialog-input:focus {
  outline: none;
  border-color: var(--accent);
}
.image-gen-dialog-input::placeholder {
  color: var(--text-muted);
}

.image-gen-mode {
  display: flex;
  gap: 8px;
}

.image-gen-mode-btn {
  padding: 10px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
}

.image-gen-mode-btn:hover:not(:disabled) {
  border-color: var(--text-muted);
  color: var(--text);
}

.image-gen-mode-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.image-gen-mode-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.image-gen-mode-hint {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.image-gen-ref-hint {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.image-gen-refs {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.image-gen-ref-slot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 140px;
}

.image-gen-ref-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.image-gen-ref-add {
  width: 100%;
  height: 100px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-gen-ref-add:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.image-gen-ref-preview {
  position: relative;
  width: 140px;
  height: 100px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--input-bg);
  border: 1px solid var(--border);
}

.image-gen-ref-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-gen-ref-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.image-gen-ref-remove:hover {
  background: rgba(0, 0, 0, 0.85);
}

.image-gen-ref-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.image-gen-frames {
  margin-top: 4px;
}

/* Force 3 reference image slots in a single row so all are visible */
.image-gen-refs-three {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  gap: 16px;
  width: 100%;
  min-width: 320px;
  box-sizing: border-box;
}

.image-gen-refs-three .image-gen-ref-slot {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* Legacy: keep when only used for character in video */
.image-gen-refs-character {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.image-gen-refs-character .image-gen-ref-slot {
  flex: 0 0 auto;
}

/* Clear drop zones for the 3 reference slots */
.image-gen-ref-slot-droppable {
  min-width: 140px;
}

/* No focus outline on the drop slot — the inner button already shows focus
   when needed, and the green accent ring clashes with the rest of the UI. */
.image-gen-ref-slot-droppable:focus-within {
  outline: none;
}

/* ── Segmented switch (in-form 2-option toggle) ──────────────────────────
   Used for "Reference image" / "Frame to frame". Same active-yellow visual
   as the top Image/Video toggle so the two switches feel like a family. */
.image-gen-segmented {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    radial-gradient(
      ellipse 110% 70% at 18% -10%,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.03) 22%,
      rgba(255, 255, 255, 0.00) 50%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.01) 45%,
      rgba(255, 255, 255, 0.03) 100%
    );
  background-color: transparent;
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.32);
}
.image-gen-segmented-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  padding: 10px 22px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
  white-space: nowrap;
}
.image-gen-segmented-btn:hover:not(:disabled):not(.active) {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.image-gen-segmented-btn.active {
  background: linear-gradient(180deg, #FFE070 0%, #FCD34D 100%);
  color: #1a1200;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 4px 14px rgba(252, 211, 77, 0.30);
}
.image-gen-segmented-btn.active:hover:not(:disabled) {
  background: linear-gradient(180deg, #FFEA85 0%, #FCD34D 100%);
}
.image-gen-segmented-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Description textarea sits a little further below the controls above it
   so it doesn't crowd against the segmented switch / model picker. */
.image-gen-field--description {
  margin-top: 18px;
}

.image-gen-check-row {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.image-gen-check-btn {
  align-self: flex-start;
  padding: 8px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}

.image-gen-check-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.image-gen-check-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.image-gen-check-result {
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-size: 0.9rem;
}

.image-gen-check-result--ok {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.35);
  color: var(--text);
}

.image-gen-check-result--warn {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.35);
  color: var(--text);
}

.image-gen-check-message {
  margin: 0 0 6px;
  font-weight: 500;
  line-height: 1.4;
}

.image-gen-check-score {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.image-gen-check-tips {
  margin: 0;
  padding-left: 18px;
  color: var(--text-muted);
  line-height: 1.45;
}

.image-gen-check-tips li {
  margin-bottom: 4px;
}

.image-gen-video-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.image-gen-video-text-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.image-gen-video-text-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.image-gen-video-text-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  resize: vertical;
  min-height: 56px;
  box-sizing: border-box;
}

.image-gen-video-text-input:focus {
  outline: none;
  border-color: var(--accent);
}

.image-gen-video-text-input::placeholder {
  color: var(--text-muted);
}

.image-gen-combined-prompt {
  background: rgba(255, 255, 255, 0.04);
  cursor: default;
  color: var(--text);
}

.image-gen-voiceover-note {
  margin: 20px 0;
  padding: 14px 16px;
  background: rgba(167, 139, 250, 0.08);
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.45;
}

.image-gen-voices-row {
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.image-gen-elevenlabs-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 4px 0 0;
  line-height: 1.4;
}
.image-gen-elevenlabs-hint code {
  font-size: 0.85em;
  background: var(--input-bg);
  padding: 2px 6px;
  border-radius: 4px;
}
.image-gen-elevenlabs-hint-ok {
  color: var(--accent);
}

.image-gen-view--picture .image-gen-voices-row {
  display: none;
}

.image-gen-sound-row {
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.image-gen-sound-row .image-gen-voices-label {
  margin-bottom: 0;
}

.image-gen-sound-select {
  max-width: 280px;
}

.image-gen-sound-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 10px;
  display: block;
}

.image-gen-sound-btn-group {
  display: inline-flex;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--input-bg);
}

.image-gen-sound-btn {
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.image-gen-sound-btn:hover:not(:disabled) {
  color: var(--text);
  background: var(--surface);
}

.image-gen-sound-btn.active {
  color: var(--text);
  background: var(--accent);
  color: #fff;
}

.image-gen-sound-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.image-gen-sound-btn + .image-gen-sound-btn {
  border-left: 1px solid var(--border);
}

.image-gen-voices-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  text-align: center;
}

.image-gen-voices-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.image-gen-voices-controls .image-gen-voice-select {
  flex: 1;
  max-width: 280px;
  margin: 0;
}

.image-gen-voice-play {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-gen-voice-play:hover:not(:disabled) {
  background: var(--surface);
  border-color: var(--accent);
}

.image-gen-voice-play:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.image-gen-voice-play-loading {
  font-size: 0.9rem;
  letter-spacing: 0.05em;
}

/* ── Sound (left) + Voice (right) side-by-side row ────────────────────
   Two equal columns. On narrow viewports the columns wrap and stack.
   Each column owns its own label + control(s). */
.image-gen-sound-voice-row {
  margin: 20px 0;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.image-gen-sound-voice-col {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Right column stacks the dropdown row + the "Create a voice" button. */
.image-gen-voice-col .image-gen-voices-controls {
  margin-bottom: 6px;
}
/* In the row context the labels left-align with the control beneath them
   instead of staying centered (the centered look made sense only when
   each row spanned full width). */
.image-gen-sound-voice-row .image-gen-voices-label {
  text-align: center;
}

/* ── "Create a voice" pill ─ sits just below the voice dropdown, before
   the menu opens. Same glass body as other buttons; the "+" reads as
   "add new". */
.image-gen-create-voice-btn {
  margin-top: 4px;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.image-gen-create-voice-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(252, 211, 77, 0.7);
  color: #FCD34D;
  transform: translateY(-1px);
}
.image-gen-create-voice-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.image-gen-create-voice-btn__plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(252, 211, 77, 0.18);
  color: #FCD34D;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

/* ── Create-a-voice modal ─────────────────────────────────────────────
   Same dark-glass treatment as the Watch-video modal: backdrop blur,
   centered card, close X in the corner. */
.image-gen-create-voice-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.image-gen-create-voice-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 14, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.image-gen-create-voice-modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: 28px 28px 24px;
  border-radius: 24px;
  background: rgba(20, 20, 28, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 24px 60px rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.image-gen-create-voice-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.image-gen-create-voice-close:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.image-gen-create-voice-close:disabled { opacity: 0.4; cursor: not-allowed; }
.image-gen-create-voice-title {
  margin: 0 0 2px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.image-gen-create-voice-sub {
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.45;
}
.image-gen-create-voice-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 6px;
}
.image-gen-create-voice-input,
.image-gen-create-voice-textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  resize: none;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.image-gen-create-voice-input::placeholder,
.image-gen-create-voice-textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.image-gen-create-voice-input:focus,
.image-gen-create-voice-textarea:focus {
  border-color: rgba(252, 211, 77, 0.65);
  background: rgba(255, 255, 255, 0.07);
}
.image-gen-create-voice-textarea {
  min-height: 110px;
}
.image-gen-create-voice-counter {
  align-self: flex-end;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: -4px;
}
.image-gen-create-voice-error {
  margin: 4px 0 0;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fecaca;
  font-size: 0.85rem;
  line-height: 1.4;
}
.image-gen-create-voice-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}
.image-gen-create-voice-cancel,
.image-gen-create-voice-submit {
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.image-gen-create-voice-cancel {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.75);
}
.image-gen-create-voice-cancel:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.image-gen-create-voice-submit {
  background: linear-gradient(180deg, #FFE070 0%, #FCD34D 100%);
  color: #1a1200;
}
.image-gen-create-voice-submit:hover:not(:disabled) {
  background: linear-gradient(180deg, #FFEA85 0%, #FCD34D 100%);
  transform: translateY(-1px);
}
.image-gen-create-voice-submit:disabled,
.image-gen-create-voice-cancel:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Random / Clone tab toggle ─────────────────────────────────────── */
.image-gen-create-voice-tabs {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  margin: 6px 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  align-self: flex-start;
}
.image-gen-create-voice-tab {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  padding: 8px 18px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.image-gen-create-voice-tab:hover:not(:disabled):not(.is-active) {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.image-gen-create-voice-tab.is-active {
  background: linear-gradient(180deg, #FFE070 0%, #FCD34D 100%);
  color: #1a1200;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 12px rgba(252, 211, 77, 0.28);
}
.image-gen-create-voice-tab:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── Generate button (Random tab) ─ outline-style yellow pill ─────── */
.image-gen-create-voice-generate {
  margin-top: 4px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(252, 211, 77, 0.65);
  background: rgba(252, 211, 77, 0.10);
  color: #FCD34D;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
  align-self: flex-start;
}
.image-gen-create-voice-generate:hover:not(:disabled) {
  background: rgba(252, 211, 77, 0.18);
  transform: translateY(-1px);
}
.image-gen-create-voice-generate:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Preview cards (Random tab, after Generate) ───────────────────── */
.image-gen-create-voice-previews {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.image-gen-create-voice-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.image-gen-create-voice-preview:hover {
  border-color: rgba(255, 255, 255, 0.30);
  background: rgba(255, 255, 255, 0.07);
}
.image-gen-create-voice-preview.is-selected {
  border-color: rgba(252, 211, 77, 0.85);
  background: rgba(252, 211, 77, 0.10);
}
.image-gen-create-voice-preview__num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}
.image-gen-create-voice-preview.is-selected .image-gen-create-voice-preview__num {
  background: #FCD34D;
  color: #1a1200;
}
.image-gen-create-voice-preview__audio {
  flex: 1;
  height: 32px;
  min-width: 0;
}
.image-gen-create-voice-preview__check {
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  font-weight: 700;
  color: #FCD34D;
}

/* ── Clone tab — record + upload + audio preview ──────────────────── */
.image-gen-create-voice-clone-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.image-gen-create-voice-record,
.image-gen-create-voice-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.image-gen-create-voice-record:hover:not(:disabled),
.image-gen-create-voice-upload:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}
.image-gen-create-voice-record.is-recording {
  background: rgba(239, 68, 68, 0.20);
  border-color: rgba(239, 68, 68, 0.65);
  color: #fecaca;
  animation: rec-pulse 1.4s ease-in-out infinite;
}
@keyframes rec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}
.image-gen-create-voice-clone-preview {
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
}
.image-gen-create-voice-clone-preview audio {
  width: 100%;
  height: 36px;
}

.image-gen-voiceover-note strong {
  color: var(--accent);
}

.image-gen-voiceover-desc {
  margin: 8px 0 12px;
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.45;
}

.image-gen-voice-list {
  margin-top: 12px;
}

.image-gen-voice-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}

select.image-gen-voice-select {
  width: 100%;
  max-width: 280px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-size: 0.95rem;
}
.glass-select.image-gen-voice-select {
  width: 100%;
  max-width: 280px;
}

.image-gen-voiceover-hint {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.image-gen-view--picture .image-gen-voiceover-note {
  display: none;
}

.image-gen-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-top: 20px;
}

.image-gen-action-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.image-gen-action-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  text-align: center;
}

select.image-gen-action-select {
  padding: 10px 12px;
  min-width: 120px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-size: 0.95rem;
  cursor: pointer;
}

select.image-gen-action-select:focus {
  outline: none;
  border-color: var(--accent);
}

select.image-gen-action-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Native <select> with .image-gen-select class (legacy / fallback) ───
   GlassSelect uses .image-gen-select on its wrapper div for layout — we
   scope these base rules to actual <select> elements so they don't leak. */
select.image-gen-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: block;
  width: 100%;
  padding: 16px 48px 16px 20px !important;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.2;
  cursor: pointer;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.65)' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
  background-size: 12px 12px !important;
  transition: background-color 0.22s ease, border-color 0.22s ease,
              box-shadow 0.22s ease, color 0.22s ease;
}
select.image-gen-select:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.32) !important;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.92)' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}
select.image-gen-select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.40) !important;
}
select.image-gen-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
select.image-gen-select option {
  background: #14141a;
  color: #fff;
  padding: 8px;
}

.image-gen-actions-row .image-gen-submit {
  margin-left: auto;
}

.image-gen-submit {
  padding: 12px 24px;
  border-radius: var(--radius);
  border: none;
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
}

.image-gen-submit:hover:not(:disabled) {
  background: var(--accent-hover);
}

.image-gen-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.image-gen-error {
  margin: 12px 0 0;
  color: #f87171;
  font-size: 0.9rem;
}

.image-gen-locked {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 16px 0 0;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(244, 184, 96, 0.10), rgba(244, 184, 96, 0.04));
  border: 1px solid rgba(244, 184, 96, 0.32);
  border-radius: 12px;
}
.image-gen-locked__icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.image-gen-locked__body { flex: 1; min-width: 0; }
.image-gen-locked__body strong {
  display: block;
  font-size: 0.95rem;
  color: #f4b860;
  margin-bottom: 4px;
}
.image-gen-locked__body p {
  margin: 0 0 12px;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.image-gen-locked__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.image-gen-locked__btn {
  background: linear-gradient(135deg, #5a8dee, #3a6cf0);
  color: #fff; border: none; border-radius: 8px;
  padding: 8px 14px; font: inherit; font-weight: 600; font-size: 13px;
  cursor: pointer;
}
.image-gen-locked__btn:hover { filter: brightness(1.08); }
.image-gen-locked__dismiss {
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 14px; font: inherit; font-size: 13px;
  cursor: pointer;
}
.image-gen-locked__dismiss:hover { color: var(--text); }

.image-gen-run-through-audio {
  margin-top: 24px;
  padding: 16px;
  background: rgba(167, 139, 250, 0.06);
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: var(--radius);
}

.image-gen-run-through-audio .image-gen-label {
  margin-bottom: 4px;
}

.image-gen-run-through-audio .image-gen-ref-hint {
  margin-bottom: 12px;
  font-size: 0.85rem;
}

.image-gen-run-through-audio .image-gen-ref-hint code {
  font-size: 0.8em;
  background: var(--input-bg);
  padding: 2px 6px;
  border-radius: 4px;
}

.image-gen-run-through-audio-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.image-gen-run-through-audio-input {
  flex: 1;
  min-width: 200px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-size: 0.95rem;
}

.image-gen-run-through-audio-input:focus {
  outline: none;
  border-color: var(--accent);
}

.image-gen-run-through-audio-input::placeholder {
  color: var(--text-muted);
}

.image-gen-run-through-audio-btn {
  padding: 10px 18px;
  border-radius: var(--radius);
  border: none;
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}

.image-gen-run-through-audio-btn:hover:not(:disabled) {
  background: var(--accent-hover);
}

.image-gen-run-through-audio-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.image-gen-result {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.image-gen-result-images {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.image-gen-result-img {
  max-width: 100%;
  max-height: 400px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.image-gen-result-img-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.image-gen-result-download {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 1;
  transition: background 0.15s ease, transform 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.image-gen-result-img-wrap:hover .image-gen-result-download,
.image-gen-result-download:focus-visible {
  opacity: 1;
}

.image-gen-result-download:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.05);
}

/* ── Quality + cost badges shown on each generated tile ────────────────────
   Left = quality score (★ 9/10). Right = $/unit (e.g. $0.04/image or $0.10/sec).
   Both sit on top of the image/video, anchored to the bottom corners. */
/* ── Video frame — Apple Liquid Glass treatment ──────────────────────
   Modeled on macOS volume / now-playing capsules: heavy backdrop blur,
   subtle white rim, faint translucent body, soft drop shadow. Whatever
   the dashboard background is behind it shows through faintly. */
.image-gen-result-video-block {
  position: relative;
  padding: 10px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  box-shadow:
    /* Bright top sliver — light catching the rolled edge */
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    /* Subtle interior light pool */
    inset 0 8px 20px rgba(255, 255, 255, 0.08),
    /* Bottom counter-sheen */
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    /* Soft outside drop */
    0 12px 32px rgba(0, 0, 0, 0.35),
    /* Crisp outer hairline for definition on dark BG */
    0 0 0 0.5px rgba(255, 255, 255, 0.10);
  transition: transform 0.18s cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 0.22s ease,
              border-color 0.22s ease;
}
.image-gen-result-video-block:hover {
  border-color: rgba(255, 255, 255, 0.30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 8px 20px rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(255, 255, 255, 0.14),
    0 16px 40px rgba(0, 0, 0, 0.42),
    0 0 0 0.5px rgba(255, 255, 255, 0.18);
}
/* Round the video inside to match the glass radius so corners line up */
.image-gen-result-video-block .image-gen-hover-video-wrap,
.image-gen-result-video-block video {
  border-radius: 20px;
  overflow: hidden;
}

/* ── Empty-state preview ──────────────────────────────────────────────
   Before any video/image is generated, show N placeholder glass tiles
   (where N = Quantity selector) so the user can see what the Liquid
   Glass frame looks like in the results panel. */
.image-gen-results-empty-glass {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}
.image-gen-results-empty-glass .image-gen-results-empty {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
}
/* Placeholder grid — iPhone Photos-style: uniform square tiles in
   a grid driven by the SIZE 1/2/3/4 selector. Tiles cap at 220px wide
   so a single tile doesn't balloon to fill the whole panel. */
.image-gen-results-empty-grid {
  display: grid;
  gap: 14px;
  max-width: 100%;
  justify-content: start;
}
.image-gen-results-empty-grid.image-gen-results-grid--1 { grid-template-columns: repeat(1, 220px); }
.image-gen-results-empty-grid.image-gen-results-grid--2 { grid-template-columns: repeat(2, 220px); }
.image-gen-results-empty-grid.image-gen-results-grid--3 { grid-template-columns: repeat(3, 220px); }
.image-gen-results-empty-grid.image-gen-results-grid--4 { grid-template-columns: repeat(4, 220px); }

/* Each placeholder is a uniform 1:1 square — same Apple Liquid Glass
   body as a real result tile, just empty. */
.image-gen-result-placeholder {
  aspect-ratio: 1 / 1;
  width: 220px;
  max-width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}
.image-gen-result-placeholder__inner {
  flex: 1;
  border-radius: 20px;
  background:
    radial-gradient(600px 200px at 50% 0%, rgba(255, 255, 255, 0.08), transparent 60%),
    rgba(255, 255, 255, 0.03);
}
.image-gen-result-badge {
  position: absolute;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  line-height: 1;
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
}
.image-gen-result-badge--quality { left: 50px; }  /* shifted right to leave room for the edit button at top-left */
.image-gen-result-badge--cost    { right: 8px; }

/* ── Edit button ─ TOP-LEFT, small circular icon button. Drops the
   original prompt back into the Description box and scrolls/focuses it
   so the user can tweak and re-generate. Same dark glass body as the
   other tile controls. */
.image-gen-result-edit {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
  z-index: 3;
  padding: 0;
}
.image-gen-result-edit:hover {
  background: rgba(20, 20, 28, 0.85);
  border-color: rgba(252, 211, 77, 0.7);
  color: #FCD34D;
  transform: scale(1.06);
}

/* ── Brand badge ─ small pill in the TOP-right of every result tile that
   shows the model emoji + brand name. Same dark glass body, sits above
   the existing quality (top-left) and cost (bottom-right) badges. */
.image-gen-result-badge--brand {
  top: 16px;
  right: 16px;
  bottom: auto;
  padding: 4px 9px;
  font-size: 0.72rem;
  gap: 4px;
}
.image-gen-result-badge__emoji {
  font-size: 0.85rem;
  line-height: 1;
}

/* ── Image expand-to-bubble modal ─ click any result image to view it
   centered with the rest of the page heavily blurred behind it. */
.image-gen-expand-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  animation: image-gen-expand-fade-in 0.18s ease-out;
}
@keyframes image-gen-expand-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.image-gen-expand-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 14, 0.55);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
}
/* The "bubble" — the image centered + a thin glass frame around it.
   Uses the same Liquid Glass treatment as the result tiles. */
.image-gen-expand-bubble {
  position: relative;
  max-width: min(90vw, 1200px);
  max-height: 88vh;
  padding: 14px;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 8px 20px rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 0 0 0.5px rgba(255, 255, 255, 0.10);
  animation: image-gen-expand-pop 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes image-gen-expand-pop {
  from { transform: scale(0.88); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.image-gen-expand-img {
  display: block;
  max-width: 100%;
  max-height: calc(88vh - 28px);
  border-radius: 22px;
  cursor: zoom-out;
}
.image-gen-expand-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.30);
  background: rgba(20, 20, 28, 0.92);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
  transition: transform 0.15s ease, background 0.15s ease;
}
.image-gen-expand-close:hover {
  background: rgba(35, 35, 45, 0.95);
  transform: scale(1.08);
}
.image-gen-result-badge__star {
  color: #FCD34D;
  font-size: 0.85rem;
  line-height: 1;
}

.image-gen-results-panel {
  /* Grows to fill ALL remaining horizontal space — anchored flush to
     the viewport's right edge (works with the .image-gen-view
     margin-right: -16px breakout + zero right padding on the layout). */
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 16px 0 20px;
  /* Transparent so the panel sits on the same black as the rest of the
     app — no card/elevation tint. */
  background: transparent;
  border-left: none;
}

.image-gen-results-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-shrink: 0;
  padding-right: 20px;
  flex-wrap: wrap;
}

.image-gen-results-size-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.image-gen-results-per-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.image-gen-results-per-row-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-gen-results-per-row-btn:hover {
  border-color: var(--text-muted);
  color: var(--text);
}

.image-gen-results-per-row-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

/* Single scrollable list of video/image cards (16:9 or 9:16) */
.image-gen-results-panel-scroll {
  flex: 1 1 0;
  min-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 12px;
  padding-bottom: 24px;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  box-sizing: border-box;
}
.image-gen-results-panel-scroll::-webkit-scrollbar {
  width: 8px;
}
.image-gen-results-panel-scroll::-webkit-scrollbar-track {
  background: var(--input-bg, rgba(255,255,255,0.06));
  border-radius: 4px;
}
.image-gen-results-panel-scroll::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.image-gen-results-panel-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Consistent spacing between video cards/sections in the scroll list */
.image-gen-results-panel-scroll > .image-gen-main-video,
.image-gen-results-panel-scroll > .image-gen-saved-videos,
.image-gen-results-panel-scroll > .image-gen-tailored-audio-section,
.image-gen-results-panel-scroll > .image-gen-stored-audio-section,
.image-gen-results-panel-scroll > .image-gen-pinned-videos {
  margin-bottom: 24px;
}
.image-gen-results-panel-scroll .image-gen-saved-videos-list,
.image-gen-results-panel-scroll .image-gen-tailored-audio-list,
.image-gen-results-panel-scroll .image-gen-stored-audio-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.image-gen-results-panel-scroll .image-gen-results-list {
  gap: 20px;
}
.image-gen-results-list-first {
  margin-bottom: 24px;
}

/* Tighter meta text in 3–4 column grid so rows don’t overflow */
.image-gen-results-grid--3 .image-gen-result-video-meta,
.image-gen-results-grid--4 .image-gen-result-video-meta {
  font-size: 0.8rem;
  margin-top: 6px;
}
.image-gen-results-grid--4 .image-gen-result-video-meta {
  font-size: 0.75rem;
}

/* Unified video card: fill all available space (no empty gap to the right) */
.image-gen-results-panel-scroll .image-gen-hover-video-wrap {
  width: 100%;
  max-width: none;
  min-height: 120px;
  aspect-ratio: 9/16;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #000;
  overflow: hidden;
  cursor: pointer;
}
.image-gen-results-panel-scroll .image-gen-hover-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.image-gen-results-panel-scroll .image-gen-video-portrait .image-gen-hover-video-wrap,
.image-gen-results-panel-scroll .image-gen-result-video-block .image-gen-hover-video-wrap {
  aspect-ratio: 9/16;
  max-width: none;
  max-height: 70vh;
}
.image-gen-results-panel-scroll .image-gen-result-video-block .image-gen-hover-video-wrap video {
  object-fit: contain;
}
.image-gen-video-card-16-9 {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #000;
  overflow: hidden;
}
.image-gen-video-card-16-9 video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-gen-video-card-9-16 {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 9/16;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #000;
  overflow: hidden;
}
.image-gen-video-card-9-16 video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-gen-results-panel-title {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.image-gen-results-panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.image-gen-results-update {
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--radius);
  border: none;
  background: var(--accent);
  color: var(--bg);
  cursor: pointer;
}

.image-gen-results-update:hover:not(:disabled) {
  background: var(--accent-hover);
}

.image-gen-results-update:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.image-gen-results-clear {
  padding: 6px 12px;
  font-size: 0.8rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.image-gen-results-clear:hover {
  border-color: var(--text-muted);
  color: var(--text);
}

.image-gen-results-show-more-wrap {
  margin-top: 12px;
  padding: 8px 0;
}
.image-gen-results-show-more {
  padding: 8px 16px;
  font-size: 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
}
.image-gen-results-show-more:hover {
  border-color: var(--text-muted);
  color: var(--text);
}

.image-gen-pipeline-status {
  margin: 0 0 12px;
  font-size: 0.8rem;
  line-height: 1.3;
}
.image-gen-pipeline-ok {
  color: var(--accent);
}
.image-gen-pipeline-warn {
  color: var(--text-muted);
}

.image-gen-progress {
  margin-bottom: 20px;
  padding: 14px 16px;
  background: rgba(90, 141, 238, 0.06);
  border: 1px solid rgba(90, 141, 238, 0.18);
  border-radius: 12px;
}

.image-gen-progress-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.image-gen-progress-text {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 600;
}

.image-gen-progress-timer {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.image-gen-progress-timer strong {
  color: var(--text);
  font-weight: 600;
}

.image-gen-progress-hint {
  margin: 10px 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.image-gen-progress-bar-wrap {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.image-gen-progress-bar-determinate {
  height: 100%;
  background: linear-gradient(90deg, #5a8dee, #3a6cf0);
  border-radius: 4px;
  transition: width 0.4s ease;
}

.image-gen-progress-bar--overtime {
  background: linear-gradient(90deg, #f4b860, #e58f2e);
  width: 100% !important;
  animation: image-gen-progress-overtime-pulse 1.6s ease-in-out infinite;
}

@keyframes image-gen-progress-overtime-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.image-gen-progress-bar-indeterminate {
  height: 100%;
  width: 40%;
  background: var(--accent);
  border-radius: 4px;
  animation: image-gen-progress-indeterminate 1.2s ease-in-out infinite;
}

@keyframes image-gen-progress-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

.image-gen-results-loading {
  margin: 0;
  padding: 16px 0;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.image-gen-results-empty {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-muted);
  padding: 24px 0;
}

.image-gen-results-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Grid layouts: 1–4 per row for easier accessibility */
.image-gen-results-list.image-gen-results-grid--1 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* When 1 per row: video fills the whole "Your videos" section (no empty space to the right) */
.image-gen-results-panel-scroll .image-gen-results-grid--1 {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.image-gen-results-panel-scroll .image-gen-results-grid--1 .image-gen-results-item {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.image-gen-results-panel-scroll .image-gen-results-grid--1 .image-gen-result-video-block {
  width: 100%;
  max-width: 100%;
}
.image-gen-results-panel-scroll .image-gen-results-grid--1 .image-gen-result-video-block .image-gen-hover-video-wrap {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100%;
  min-height: 65vh;
  max-height: 88vh;
  aspect-ratio: 9/16;
  box-sizing: border-box;
}
.image-gen-results-panel-scroll .image-gen-results-grid--1 .image-gen-result-video-block .image-gen-hover-video-wrap video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}
.image-gen-results-panel-scroll .image-gen-results-grid--1 .image-gen-result-images {
  width: 100%;
  max-width: 100%;
}
.image-gen-results-panel-scroll .image-gen-results-grid--1 .image-gen-result-images .image-gen-result-img {
  max-height: 85vh;
  width: 100%;
  max-width: 100%;
  object-fit: contain;
}

.image-gen-results-list.image-gen-results-grid--2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.image-gen-results-list.image-gen-results-grid--3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.image-gen-results-list.image-gen-results-grid--4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

/* Smaller thumbnails when 2–4 per row */
.image-gen-results-grid--2 .image-gen-result-video-block .image-gen-hover-video-wrap,
.image-gen-results-grid--2 .image-gen-result-images {
  max-width: 100%;
}
.image-gen-results-grid--2 .image-gen-hover-video-wrap { max-width: 100%; aspect-ratio: 9/16; }
.image-gen-results-grid--3 .image-gen-result-video-block .image-gen-hover-video-wrap,
.image-gen-results-grid--3 .image-gen-result-images { max-width: 100%; }
.image-gen-results-grid--3 .image-gen-hover-video-wrap { max-width: 100%; aspect-ratio: 9/16; }
.image-gen-results-grid--4 .image-gen-result-video-block .image-gen-hover-video-wrap,
.image-gen-results-grid--4 .image-gen-result-images { max-width: 100%; }
.image-gen-results-grid--4 .image-gen-hover-video-wrap { max-width: 100%; aspect-ratio: 9/16; }

.image-gen-results-item {
  margin: 0;
  padding: 0;
  min-width: 0;
  width: 100%;
}

/* Result blocks fill their cell so video/image uses all space */
.image-gen-results-panel-scroll .image-gen-result-video-block {
  width: 100%;
}
.image-gen-results-panel-scroll .image-gen-result-images {
  width: 100%;
}
.image-gen-results-panel-scroll .image-gen-result-images .image-gen-result-img {
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 50vh;
}

.image-gen-result-video-block {
  margin: 0;
}

/* Wrapper for hover-to-play videos (panel + results list) */
.image-gen-hover-video-wrap {
  display: block;
  width: 100%;
}

.image-gen-video-error {
  aspect-ratio: 9/16;
  max-width: 280px;
  background: var(--input-bg);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  color: var(--text-muted);
  font-size: 0.9rem;
  min-height: 120px;
}

.image-gen-video-error-hint {
  font-size: 0.8rem;
  margin: 0;
}

.image-gen-video-error-hint code {
  background: var(--surface);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
}

.image-gen-video-placeholder {
  aspect-ratio: 9/16;
  max-width: 280px;
  min-height: 120px;
  background: var(--input-bg);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
}

.image-gen-video-placeholder .image-gen-result-video {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  word-break: break-all;
}

.image-gen-result-video-player {
  display: block;
  width: 100%;
  max-height: 70vh;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #000;
}

.image-gen-result-video-meta {
  margin: 10px 0 0;
  font-size: 0.9rem;
  color: var(--text);
}

.image-gen-result-video-meta a {
  color: var(--accent);
}

.image-gen-result-video-meta a:hover {
  text-decoration: underline;
}

.image-gen-results-item .image-gen-result-images {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.image-gen-results-item .image-gen-result-img {
  max-height: 320px;
}
.image-gen-results-panel-scroll .image-gen-results-item .image-gen-result-img {
  max-height: 50vh;
}

.image-gen-result-video {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text);
}

.image-gen-result-video a {
  color: var(--accent);
}

.image-gen-result-video a:hover {
  text-decoration: underline;
}

.image-gen-result-specs {
  color: var(--text-muted);
  font-size: 0.9em;
}

.image-gen-result-audio-badge {
  color: var(--accent);
  font-size: 0.9em;
}

.image-gen-result-new-badge {
  color: var(--accent);
  font-weight: 600;
}

.image-gen-add-audio-btn {
  font-size: inherit;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.image-gen-add-audio-btn:hover:not(:disabled) {
  color: var(--text);
}
.image-gen-add-audio-btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.image-gen-play-stored-sound-btn {
  font-size: 0.85rem;
  padding: 4px 10px;
  margin-left: 6px;
  border-radius: 4px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}
.image-gen-play-stored-sound-btn:hover:not(:disabled) {
  background: var(--accent);
  color: var(--bg, #fff);
}
.image-gen-play-stored-sound-btn:disabled {
  cursor: wait;
  opacity: 0.8;
}

.image-gen-result-video-url {
  display: block;
  margin-top: 6px;
}
.image-gen-video-url-code {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--input-bg);
  padding: 4px 8px;
  border-radius: 4px;
  word-break: break-all;
  user-select: all;
}

.image-gen-watch-video-btn {
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--bg, #fff);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.image-gen-watch-video-btn:hover {
  filter: brightness(1.1);
}

.image-gen-pinned-videos {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.image-gen-pinned-videos-title {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
}
.image-gen-pinned-video-card {
  margin-bottom: 12px;
}
.image-gen-pinned-video-card:last-child {
  margin-bottom: 0;
}
.image-gen-pinned-video-player {
  width: 100%;
  max-width: 480px;
  border-radius: 8px;
  background: #000;
  display: block;
  margin-bottom: 6px;
}
.image-gen-pinned-video-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 0.9rem;
}
.image-gen-pinned-video-filename {
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-gen-main-video {
  margin-bottom: 24px;
}
.image-gen-main-video-title,
.image-gen-saved-videos-title,
.image-gen-tailored-audio-title,
.image-gen-stored-audio-title {
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.image-gen-main-video-player {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 9/16;
  max-height: 70vh;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #000;
  display: block;
  margin-bottom: 8px;
}
.image-gen-main-video-watch {
  margin-top: 4px;
}
.image-gen-main-video-reset {
  margin-left: 8px;
  font-size: 0.85rem;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.image-gen-main-video-reset:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

.image-gen-stored-audio-section {
  margin-bottom: 24px;
}
.image-gen-stored-audio-note {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.35;
}
.image-gen-stored-audio-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Single video at a time: full 9:16 frame, whole video visible (no crop) */
.image-gen-your-videos-single {
  margin-bottom: 24px;
}
.image-gen-your-videos-single .image-gen-stored-audio-title {
  margin: 0 0 12px;
}
.image-gen-your-videos-single-frame {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 9/16;
  max-height: 85vh;
  background: #000;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  display: block;
}
.image-gen-your-videos-single-frame .image-gen-hover-video-wrap {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: unset !important;
  display: block;
}
.image-gen-your-videos-single-frame .image-gen-hover-video-wrap video,
.image-gen-your-videos-single-player {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block;
}
.image-gen-your-videos-single-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 12px;
}
.image-gen-your-videos-prev,
.image-gen-your-videos-next {
  padding: 8px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
}
.image-gen-your-videos-prev:hover:not(:disabled),
.image-gen-your-videos-next:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.image-gen-your-videos-prev:disabled,
.image-gen-your-videos-next:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.image-gen-your-videos-counter {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Grid of video-only cards – larger so you see the whole video */
.image-gen-stored-audio-list-videos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
/* List with video + meta (filename, badges, buttons) - video on top, always visible */
.image-gen-stored-audio-list-with-videos .image-gen-stored-audio-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.image-gen-stored-audio-list-with-videos .image-gen-stored-audio-item:last-child {
  border-bottom: none;
}
.image-gen-stored-audio-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.image-gen-stored-audio-list-videos .image-gen-stored-audio-item {
  padding: 0;
  border-bottom: none;
}
.image-gen-stored-audio-item:last-child {
  border-bottom: none;
}
/* Ensure the video is visible: wrapper has fixed aspect ratio and size */
.image-gen-stored-audio-item .image-gen-hover-video-wrap {
  width: 100%;
  max-width: 280px;
  min-height: 140px;
  aspect-ratio: 9/16;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #000;
  overflow: hidden;
  flex-shrink: 0;
  display: block;
}
/* Your videos section: 9:16 frame, whole video visible (no crop) */
.image-gen-stored-audio-list-videos .image-gen-stored-audio-item .image-gen-hover-video-wrap {
  max-width: 100%;
  width: 100%;
  aspect-ratio: 9/16;
  min-height: 0;
}
.image-gen-stored-audio-list-videos .image-gen-stored-audio-item .image-gen-hover-video-wrap video {
  object-fit: contain;
}
.image-gen-stored-audio-item .image-gen-hover-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.image-gen-stored-audio-item .image-gen-hover-video-wrap .image-gen-video-error {
  min-height: 140px;
}
.image-gen-stored-audio-list-videos .image-gen-stored-audio-item .image-gen-hover-video-wrap .image-gen-video-error {
  aspect-ratio: 9/16;
  min-height: 0;
}
.image-gen-stored-audio-item-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.image-gen-stored-audio-video {
  font-weight: 500;
  color: var(--text);
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-gen-stored-audio-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.image-gen-stored-audio-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.image-gen-stored-audio-files {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.image-gen-stored-audio-tag {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--input-bg);
  color: var(--text-muted);
}
.image-gen-stored-audio-no-video {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 9/16;
  max-height: 180px;
  border-radius: var(--radius);
  border: 1px dashed var(--border);
  background: var(--input-bg);
  color: var(--text-muted);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-gen-tailored-audio-section {
  margin-bottom: 24px;
}
.image-gen-tailored-audio-note {
  margin: 0 0 12px;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.image-gen-tailored-audio-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.image-gen-tailored-audio-item {
  padding: 0;
}
.image-gen-tailored-audio-player {
  width: 100%;
  max-width: 280px;
  max-height: 70vh;
  aspect-ratio: 9/16;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #000;
  display: block;
  margin-bottom: 8px;
}
.image-gen-tailored-audio-meta {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.9rem;
}
.image-gen-tailored-audio-filename {
  font-weight: 500;
  color: var(--text);
}

.image-gen-stored-audio-section {
  margin-bottom: 24px;
}
.image-gen-stored-audio-title {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.image-gen-stored-audio-note {
  margin: 0 0 12px;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.image-gen-stored-audio-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.image-gen-stored-audio-item {
  padding: 0;
}
.image-gen-stored-audio-player {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 9/16;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #000;
  display: block;
  margin-bottom: 8px;
}
.image-gen-stored-audio-meta {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.9rem;
}
.image-gen-stored-audio-filename {
  font-weight: 500;
  color: var(--text);
}
.image-gen-stored-audio-badges {
  color: var(--text-muted);
}

.image-gen-saved-videos {
  margin-bottom: 24px;
}
.image-gen-saved-videos-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.image-gen-saved-videos-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.image-gen-saved-videos-item:last-child {
  border-bottom: none;
}
/* Uses unified .image-gen-results-panel-scroll .image-gen-hover-video-wrap (16:9) */
.image-gen-saved-videos-item .image-gen-hover-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-gen-saved-videos-item-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.image-gen-saved-videos-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.image-gen-saved-videos-filename {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-gen-watch-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.image-gen-watch-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  cursor: pointer;
}
.image-gen-watch-modal {
  position: relative;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  background: var(--surface, #1a1a1a);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.image-gen-watch-controls {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.image-gen-watch-controls .image-gen-watch-mute-btn,
.image-gen-watch-controls .image-gen-watch-close {
  pointer-events: auto;
}
.image-gen-watch-mute-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.6);
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
}
.image-gen-watch-mute-btn:hover {
  background: rgba(0, 0, 0, 0.8);
  border-color: var(--accent);
  color: var(--accent);
}
.image-gen-watch-mute-label {
  font-weight: 500;
}
.image-gen-watch-close {
  position: static;
  width: 36px;
  flex-shrink: 0;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-gen-watch-close:hover {
  background: rgba(0, 0, 0, 0.8);
}
.image-gen-watch-video {
  width: 100%;
  height: auto;
  max-height: 90vh;
  display: block;
}

.image-gen-ref-droppable:focus {
  outline: none;
}

/* ═══════════════════════════════════════════════════════════════════════
 *  LIQUID GLASS — applied across every form control in the AI Generator.
 *  Rounded Apple-style pills/panels + translucent blurred background +
 *  subtle inset highlight + soft outer shadow. Overrides the earlier
 *  per-element rules so the whole form reads as one consistent surface.
 * ═══════════════════════════════════════════════════════════════════════ */

/* Shared base — APPLE LIQUID GLASS (toned-down highlights):
 *   • Soft radial highlight (no more glare)
 *   • Subtle top edge gleam
 *   • Faint bottom rim glow
 *   • Nearly-invisible body
 */
.image-gen-prompt,
.image-gen-dialog-input,
select.image-gen-action-select,
select.image-gen-voice-select,
.image-gen-ref-add,
.image-gen-mode-top-btn,
.image-gen-submit {
  position: relative;
  border-radius: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  /* Softer specular highlight + barely-there body gradient. */
  background:
    radial-gradient(
      ellipse 110% 70% at 18% -10%,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.04) 22%,
      rgba(255, 255, 255, 0.00) 50%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.01) 45%,
      rgba(255, 255, 255, 0.03) 100%
    ) !important;
  background-color: transparent !important;
  color: #fff !important;
  font-family: inherit;
  font-weight: 500;
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  box-shadow:
    /* Subtle top edge gleam — no more mirror-bright glare. */
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    /* Very faint secondary fade below the top edge. */
    inset 0 6px 14px rgba(255, 255, 255, 0.04),
    /* Bottom rim glow — toned way down. */
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    /* Inner darkening at the bottom for depth (unchanged). */
    inset 0 -8px 14px rgba(0, 0, 0, 0.08),
    /* Outer drop shadow so the glass still floats. */
    0 10px 32px rgba(0, 0, 0, 0.40),
    /* Hair-thin outer halo. */
    0 0 0 0.5px rgba(255, 255, 255, 0.04);
  transition: background 0.22s ease, border-color 0.22s ease,
              transform 0.14s ease, box-shadow 0.22s ease;
}

/* Textareas — generous padding so the prompt feels roomy. */
.image-gen-prompt,
.image-gen-dialog-input {
  width: 100%;
  padding: 16px 18px !important;
  font-size: 1rem;
  resize: vertical;
  min-height: 120px;
  box-sizing: border-box;
}
.image-gen-prompt::placeholder,
.image-gen-dialog-input::placeholder {
  color: rgba(255, 255, 255, 0.42) !important;
}
.image-gen-prompt:focus,
.image-gen-dialog-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.30) !important;
  background-color: rgba(255, 255, 255, 0.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20),
    0 0 0 4px rgba(255, 255, 255, 0.06),
    0 12px 32px rgba(0, 0, 0, 0.32);
}

/* All select dropdowns (Number to generate, Model, Duration, Resolution,
   Voice). Hide native chevron, paint a softer thin one ourselves. */
select.image-gen-action-select,
select.image-gen-voice-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 14px 48px 14px 20px !important;
  min-width: 140px;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.2;
  cursor: pointer;
  /* Thinner, softer chevron, slightly inset from the right edge so it
     feels balanced inside the pill. */
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.65)' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
  background-size: 12px 12px !important;
  /* Smooth color/border transition on hover/focus so the pill feels alive. */
  transition: background-color 0.22s ease, border-color 0.22s ease,
              box-shadow 0.22s ease, color 0.22s ease;
}
select.image-gen-action-select:hover:not(:disabled),
select.image-gen-voice-select:hover:not(:disabled) {
  /* Slightly brighter glass on hover — matches the theme's other controls. */
  border-color: rgba(255, 255, 255, 0.32) !important;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.92)' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}
select.image-gen-action-select:focus,
select.image-gen-voice-select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.40) !important;
}
select.image-gen-action-select option,
select.image-gen-voice-select option {
  background: #14141a;
  color: #fff;
  padding: 8px;
}
select.image-gen-action-select:hover:not(:disabled),
select.image-gen-voice-select:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
}
select.image-gen-action-select:focus,
select.image-gen-voice-select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.30) !important;
  background-color: rgba(255, 255, 255, 0.10) !important;
}
.image-gen-action-select option,
.image-gen-voice-select option {
  background: #1a1a20;
  color: #fff;
}

/* "+ Add or drop" reference slot — same glass surface, dashed border to
   keep the drop affordance. */
.image-gen-ref-add {
  width: 100%;
  height: 120px;
  border-style: dashed !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-gen-ref-add:hover {
  background-color: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  color: #fff !important;
}

/* Image / Video toggle — glass pills. Active state pops with the accent. */
.image-gen-mode-top-btn {
  padding: 10px 22px !important;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.72) !important;
}
.image-gen-mode-top-btn:hover:not(:disabled):not(.active) {
  /* Hover (when NOT already active) = subtle lift + yellow-tinted border,
     glass stays white-translucent. No flat yellow shade. */
  background-color: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(252, 211, 77, 0.45) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20),
    0 0 0 1px rgba(252, 211, 77, 0.20),
    0 12px 28px rgba(0, 0, 0, 0.30);
}
.image-gen-mode-top-btn.active {
  /* Active = SOLID yellow fill. Unmistakably selected. iOS-style: when
     a segmented control is active the active segment is a full color
     fill, not a translucent tint. */
  border-color: #FCD34D !important;
  background:
    linear-gradient(180deg, #FFE070 0%, #FCD34D 100%) !important;
  color: #1a1200 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15),
    0 4px 14px rgba(252, 211, 77, 0.55),
    0 0 0 1px rgba(252, 211, 77, 0.90);
}
.image-gen-mode-top-btn.active:hover:not(:disabled) {
  /* Active + hover = slightly brighter yellow + tiny lift. */
  border-color: #FFDE6E !important;
  background:
    linear-gradient(180deg, #FFEC8A 0%, #FFD955 100%) !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 6px 20px rgba(252, 211, 77, 0.65),
    0 0 0 1px rgba(252, 211, 77, 1);
}
.image-gen-mode-top-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Generate button — clearly yellow, primary CTA. Strong yellow tinted
   glass so it reads as the obvious "do the thing" target. */
.image-gen-submit {
  padding: 14px 28px !important;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  border-color: rgba(252, 211, 77, 0.95) !important;
  background:
    radial-gradient(
      ellipse 110% 70% at 18% -10%,
      rgba(252, 211, 77, 0.60) 0%,
      rgba(252, 211, 77, 0.40) 30%,
      rgba(252, 211, 77, 0.35) 60%,
      rgba(252, 211, 77, 0.45) 100%
    ),
    linear-gradient(
      180deg,
      rgba(252, 211, 77, 0.55) 0%,
      rgba(252, 211, 77, 0.40) 50%,
      rgba(252, 211, 77, 0.48) 100%
    ) !important;
  color: rgba(45, 32, 0, 1) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 160, 0.65),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 0 0 1.5px rgba(252, 211, 77, 0.65),
    0 10px 32px rgba(252, 211, 77, 0.45);
}
.image-gen-submit:hover:not(:disabled) {
  border-color: rgba(255, 230, 110, 1) !important;
  background:
    radial-gradient(
      ellipse 110% 70% at 18% -10%,
      rgba(252, 211, 77, 0.72) 0%,
      rgba(252, 211, 77, 0.50) 30%,
      rgba(252, 211, 77, 0.42) 60%,
      rgba(252, 211, 77, 0.55) 100%
    ),
    linear-gradient(
      180deg,
      rgba(252, 211, 77, 0.65) 0%,
      rgba(252, 211, 77, 0.50) 50%,
      rgba(252, 211, 77, 0.58) 100%
    ) !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 160, 0.75),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 0 0 1.5px rgba(252, 211, 77, 0.85),
    0 14px 38px rgba(252, 211, 77, 0.55);
}
.image-gen-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Active SIZE pill — same strong yellow treatment so the selected size is
   obvious at a glance. */
.image-gen-results-per-row-btn.active {
  border-color: rgba(252, 211, 77, 0.85) !important;
  background:
    radial-gradient(
      ellipse 110% 70% at 18% -10%,
      rgba(252, 211, 77, 0.45) 0%,
      rgba(252, 211, 77, 0.28) 30%,
      rgba(252, 211, 77, 0.22) 60%,
      rgba(252, 211, 77, 0.30) 100%
    ),
    linear-gradient(
      180deg,
      rgba(252, 211, 77, 0.32) 0%,
      rgba(252, 211, 77, 0.22) 50%,
      rgba(252, 211, 77, 0.30) 100%
    ) !important;
  color: rgba(45, 32, 0, 1) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 160, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 0 0 1.5px rgba(252, 211, 77, 0.60),
    0 6px 22px rgba(252, 211, 77, 0.45);
}

/* ── Results panel — liquid glass on every control + result card ────── */

/* SIZE pills (1 / 2 / 3 / 4) — toned-down liquid glass. */
.image-gen-results-per-row-btn {
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background:
    radial-gradient(
      ellipse 110% 70% at 18% -10%,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.04) 22%,
      rgba(255, 255, 255, 0.00) 50%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.01) 45%,
      rgba(255, 255, 255, 0.03) 100%
    ) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 4px 8px rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -6px 10px rgba(0, 0, 0, 0.08),
    0 6px 18px rgba(0, 0, 0, 0.38);
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
.image-gen-results-per-row-btn:hover {
  background-color: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}
.image-gen-results-per-row-btn.active {
  background-color: rgba(252, 211, 77, 0.92) !important;
  border-color: rgba(252, 211, 77, 0.92) !important;
  color: #0a0a0e !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 4px 12px rgba(252, 211, 77, 0.28);
}

/* Update + Clear list buttons — toned-down liquid glass. */
.image-gen-results-update,
.image-gen-results-clear {
  padding: 10px 18px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background:
    radial-gradient(
      ellipse 110% 70% at 18% -10%,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.04) 22%,
      rgba(255, 255, 255, 0.00) 50%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.01) 45%,
      rgba(255, 255, 255, 0.03) 100%
    ) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  cursor: pointer;
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 4px 8px rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -6px 10px rgba(0, 0, 0, 0.08),
    0 6px 18px rgba(0, 0, 0, 0.38);
  transition: background 0.22s ease, border-color 0.22s ease;
}
.image-gen-results-update:hover:not(:disabled),
.image-gen-results-clear:hover {
  background-color: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}

/* SIZE label */
.image-gen-results-size-label {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* Result video / image cards — glass surface so the broken-state and
   real videos both feel intentional. */
.image-gen-results-item,
.image-gen-result-video-block {
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.30);
  overflow: hidden;
}

/* Hide the saved/stored/pinned strips at the top of the results panel —
   they were rendering broken thumbnails when the backend wasn't returning
   proper media. The main generated-list still shows below. */
.image-gen-results-panel-scroll > .image-gen-saved-videos,
.image-gen-results-panel-scroll > .image-gen-stored-audio-section,
.image-gen-results-panel-scroll > .image-gen-tailored-audio-section,
.image-gen-results-panel-scroll > .image-gen-pinned-videos {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 *  GlassSelect — custom dropdown that fully matches the liquid-glass UI.
 *  Trigger + opened menu both use the same translucent light-glass treatment
 *  as the rest of the form controls (radial specular + bright top edge +
 *  nearly-invisible body + bottom rim glow).
 * ═══════════════════════════════════════════════════════════════════════ */
.glass-select {
  position: relative;
  display: inline-block;
  min-width: 140px;
}
/* Full-width variants — Model dropdown in Picture mode, Voice picker. */
.glass-select.image-gen-select {
  display: block;
  width: 100%;
}
.glass-select.image-gen-voice-select {
  display: block;
  width: 100%;
}
.glass-select.image-gen-sound-select {
  display: inline-block;
  min-width: 200px;
}

/* ── Compact field/select — used by the Pixel selector. Narrow, centered,
   tucked under the Model row. Just shows "Pixel" above a small 2K / 4K pill. */
.image-gen-field.image-gen-field--compact {
  max-width: 220px;
  margin: 0 auto;
}
.image-gen-field.image-gen-field--compact .image-gen-label {
  text-align: center;
}
.glass-select.image-gen-select.image-gen-select--compact {
  display: block;
  width: 100%;
  max-width: 220px;
}
.glass-select.image-gen-select--compact .glass-select__trigger {
  padding: 8px 18px;
  min-height: 0;
  font-size: 0.95rem;
}
.glass-select.image-gen-select--compact .glass-select__label {
  text-align: center;
  display: block;
  width: 100%;
  font-weight: 600;
}
.glass-select.image-gen-video-mode-select {
  display: inline-block;
  min-width: 180px;
}

/* ── Pixel + aspect-ratio row ──────────────────────────────────────────
   Pixel selector on the left (2K / 4K), visual frame shapes on the right.
   Each frame button shows the ratio number above a tiny rectangle drawn
   in the ACTUAL proportions of that aspect — so 16:9 looks landscape,
   9:16 looks portrait, etc. Bottoms of frames align with the bottom of
   the Pixel pill. */
.image-gen-pixel-row {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.image-gen-field.image-gen-pixel-field {
  flex: 0 0 auto;
  margin: 0;
  max-width: 140px;
}
.image-gen-pixel-field .image-gen-label {
  text-align: left;
}
.image-gen-pixel-field .glass-select.image-gen-select--compact {
  display: block;
  width: 100%;
  max-width: 140px;
}

/* ── Aspect ratio dropdown ─────────────────────────────────────────────
   Sits next to the Pixel selector. Closed trigger shows only the ratio
   text ("9:16"). Open menu rows show [shape rectangle] + [ratio text]
   so users can see the actual proportion they're picking. */
.image-gen-field.image-gen-aspect-field {
  flex: 0 0 auto;
  margin: 0;
  max-width: 140px;
}
.image-gen-aspect-field .image-gen-label {
  text-align: left;
}
.image-gen-aspect-field .glass-select.image-gen-aspect-select {
  display: block;
  width: 100%;
  max-width: 140px;
}

/* The label-JSX shared by trigger + menu rows. */
.image-gen-aspect-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.image-gen-aspect-row__frame {
  display: block;
  box-sizing: border-box;
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  flex-shrink: 0;
}
.image-gen-aspect-row__num {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
}

/* HIDE the shape rectangle when shown inside the closed trigger — the
   user only wants to see the ratio number when collapsed. The shape
   reappears in each menu row. */
.glass-select.image-gen-aspect-select .glass-select__trigger .image-gen-aspect-row__frame {
  display: none;
}
/* Center the number in the trigger since it's the only visible element. */
.glass-select.image-gen-aspect-select .glass-select__trigger .image-gen-aspect-row {
  justify-content: center;
}

/* Active option (the currently selected ratio in the open menu) — frame
   picks up the same yellow accent the rest of the active rows use. */
.glass-select__option--active .image-gen-aspect-row__frame {
  border-color: #1a1200;
  background: rgba(26, 18, 0, 0.25);
}
.glass-select__option--active .image-gen-aspect-row__num {
  color: #1a1200;
}

/* Trigger — same liquid-glass body as inputs/buttons elsewhere. No chevron;
   the label sits centered so the trigger and menu read as one pill. */
.glass-select__trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background:
    radial-gradient(
      ellipse 110% 70% at 18% -10%,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.04) 22%,
      rgba(255, 255, 255, 0.00) 50%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.01) 45%,
      rgba(255, 255, 255, 0.03) 100%
    );
  background-color: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  cursor: pointer;
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 6px 14px rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -8px 14px rgba(0, 0, 0, 0.08),
    0 10px 32px rgba(0, 0, 0, 0.40),
    0 0 0 0.5px rgba(255, 255, 255, 0.04);
  transition: background 0.22s ease, border-color 0.22s ease,
              transform 0.14s ease, box-shadow 0.22s ease;
}
.glass-select__trigger:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.32);
}
.glass-select__trigger:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.40);
}
.glass-select__trigger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.glass-select__label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  max-width: 100%;
}
.glass-select--open .glass-select__trigger {
  border-color: rgba(255, 255, 255, 0.40);
  /* Flatten the bottom corners + drop the bottom border so the trigger
     visually merges with the menu below as one continuous pill. */
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
  /* CRITICAL: no drop shadow on the trigger when open — its shadow would
     fall exactly where the menu is, creating a visible dark band between
     them. The menu carries the drop shadow for the whole combined pill. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 6px 14px rgba(255, 255, 255, 0.04);
}
.glass-select--open .glass-select__chevron {
  color: rgba(255, 255, 255, 0.92);
  transform: rotate(180deg);
}

/* OPENED menu — overlaps the trigger by 1px so there's zero seam between
   them. The trigger flattens its bottom, the menu flattens its top, and
   together they form one continuous tall pill. */
.glass-select__menu {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  z-index: 100;
  padding: 4px 4px 4px 4px;
  /* Flat top corners (match trigger's flattened bottom) + rounded bottom. */
  border-radius: 0 0 24px 24px;
  /* Borders on left/right/bottom only — the top is "shared" with the trigger. */
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-top: none;
  /* Identical body as .glass-select__trigger — same radial highlight, same
     barely-there gradient — so the menu looks like more of the same pill. */
  background:
    radial-gradient(
      ellipse 110% 70% at 18% -10%,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.04) 22%,
      rgba(255, 255, 255, 0.00) 50%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.01) 45%,
      rgba(255, 255, 255, 0.03) 100%
    );
  background-color: transparent;
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  /* NO top edge highlight (the trigger has it for the whole shape) —
     just the bottom rim glow + drop shadow for the combined pill. */
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -8px 14px rgba(0, 0, 0, 0.08),
    0 10px 32px rgba(0, 0, 0, 0.40),
    0 0 0 0.5px rgba(255, 255, 255, 0.04);
  animation: glassSelectMenuIn 0.18s cubic-bezier(0.32, 0.72, 0, 1);
  transform-origin: top center;
  max-height: 280px;
  overflow-y: auto;
}
@keyframes glassSelectMenuIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Column header row at the top of the menu — shows "Quality | Brand | Cost"
   labels above the rows. Same 3-column grid as the rows so labels line up
   exactly. Non-interactive, just labels. */
.glass-select__header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 24px;
  padding: 6px 16px 8px 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  pointer-events: none;
  user-select: none;
}
.glass-select__header-quality { text-align: left;  padding-left: 22px; }
.glass-select__header-brand   { text-align: left;  padding-left: 28px; }
.glass-select__header-cost    { text-align: right; }

/* Options — tight pill rows. Tighter padding so the menu doesn't tower over
   the trigger; each row reads as a continuation of the same pill. */
.glass-select__option {
  display: block;
  width: 100%;
  padding: 7px 18px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  border-radius: 14px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
/* Three-column option row when meta is present:
     LEFT   ★ 92  (quality, with ★ to the left of the number)
     MIDDLE 🍌 Nano Banana Pro  (brand emoji + model name)
     RIGHT  $0.04/image  (price flush to the right edge)                  */
.glass-select__option--has-meta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 24px;
  padding: 11px 16px 11px 16px;
}
.glass-select__option-quality {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  white-space: nowrap;
  min-width: 52px;
}
.glass-select__option-star {
  color: #FCD34D;
  font-size: 1.05rem;
  line-height: 1;
}
.glass-select__option-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
}
.glass-select__option-emoji {
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
}
.glass-select__option-name-text {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.glass-select__option-price {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  justify-self: end;
}
/* On the active (yellow-filled) row, swap to dark text so everything stays
   readable against the bright yellow background. */
.glass-select__option--active .glass-select__option-quality,
.glass-select__option--active .glass-select__option-name-text,
.glass-select__option--active .glass-select__option-price {
  color: #1a1200;
}
.glass-select__option--active .glass-select__option-star {
  color: #1a1200;
}

/* When the dropdown carries meta, the closed trigger uses a 3-column grid:
   score pinned to the FAR LEFT, name centered in the middle, price pinned
   to the FAR RIGHT. Same layout as the open menu rows. */
.glass-select--has-meta .glass-select__trigger {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 16px;
  padding: 12px 18px;
}
/* Center the emoji + name within the middle column. */
.glass-select--has-meta .glass-select__trigger .glass-select__option-name {
  justify-self: center;
}
/* Make sure the price snaps to the right edge of its grid column. */
.glass-select--has-meta .glass-select__trigger .glass-select__option-price {
  justify-self: end;
}
.glass-select__option + .glass-select__option {
  margin-top: 1px;
}
.glass-select__option:hover {
  background-color: rgba(255, 255, 255, 0.10);
  color: #fff;
}
.glass-select__option:focus {
  outline: none;
  background-color: rgba(255, 255, 255, 0.12);
}
.glass-select__option--active {
  /* Selected option — solid yellow gradient that matches the active toggle. */
  background: linear-gradient(180deg, #FFE070 0%, #FCD34D 100%);
  color: #1a1200;
  font-weight: 600;
}
.glass-select__option--active:hover {
  background: linear-gradient(180deg, #FFEA85 0%, #FCD34D 100%);
  color: #1a1200;
}
/* ═══════════════════════════════════════════════════════════════════════
 *  Website Builder — split view
 *    LEFT  chat with Aria (text-only)
 *    RIGHT live preview iframe
 *  Matches the AI Generator workbench visual language (liquid glass).
 * ═══════════════════════════════════════════════════════════════════════ */
.website-builder {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 52px 24px 24px;
  box-sizing: border-box;
  height: 100%;
}

.website-builder__title {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: 'Bricolage Grotesque', 'Inter', -apple-system, sans-serif;
  font-size: clamp(36px, 3.8vw, 64px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #fff;
  line-height: 1;
  text-align: center;
  user-select: none;
  pointer-events: none;
  z-index: 150;
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
body.aria-drawer-open .website-builder__title {
  transform: translateX(calc(-50% + 140px));
}

/* ── Website / App mode toggle — INDIVIDUAL liquid-glass pill buttons on
       the LEFT, identical visual to the Image / Video / Audio toggle in the
       AI Generator workbench (each button is its own glass pill, not a
       segmented control). ─────────────────────────────────────────────────── */
.website-builder__mode-top {
  display: inline-flex;
  align-self: flex-start;
  gap: 8px;
  margin-top: -16px;
  margin-left: 48px;
}
.website-builder__mode-top-btn {
  appearance: none;
  position: relative;
  padding: 11px 26px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background:
    radial-gradient(
      ellipse 110% 70% at 18% -10%,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.04) 22%,
      rgba(255, 255, 255, 0.00) 50%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 45%, rgba(255, 255, 255, 0.03) 100%);
  background-color: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 6px 14px rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -8px 14px rgba(0, 0, 0, 0.08),
    0 8px 22px rgba(0, 0, 0, 0.30),
    0 0 0 0.5px rgba(255, 255, 255, 0.04);
  transition: background 0.22s ease, border-color 0.22s ease,
              transform 0.14s ease, box-shadow 0.22s ease, color 0.18s ease;
}
.website-builder__mode-top-btn:hover:not(.active) {
  border-color: rgba(255, 255, 255, 0.32);
}
.website-builder__mode-top-btn.active {
  background: linear-gradient(180deg, #FFE070 0%, #FCD34D 100%);
  background-color: transparent;
  color: #1a1200;
  border-color: rgba(252, 211, 77, 0.80);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 6px 18px rgba(252, 211, 77, 0.32),
    0 0 0 0.5px rgba(255, 255, 255, 0.04);
}
.website-builder__mode-top-btn.active:hover {
  background: linear-gradient(180deg, #FFEA85 0%, #FCD34D 100%);
}
.website-builder__mode-top-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── App-mode placeholder (when nothing wired yet) ────────────────────── */
.website-builder__app-placeholder {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.website-builder__app-placeholder-inner {
  max-width: 460px;
  text-align: center;
  padding: 36px 32px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(
      ellipse 110% 70% at 18% -10%,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.02) 22%,
      rgba(255, 255, 255, 0.00) 50%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
  backdrop-filter: blur(10px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 12px 36px rgba(0, 0, 0, 0.40);
}
.website-builder__app-emoji {
  font-size: 3.2rem;
  line-height: 1;
  margin-bottom: 14px;
}
.website-builder__app-placeholder-inner h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
}
.website-builder__app-placeholder-inner p {
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.55;
  font-size: 0.95rem;
  margin: 0 0 22px;
}
.website-builder__app-placeholder-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  padding: 10px 22px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.website-builder__app-placeholder-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.32);
}

.website-builder__split {
  display: grid;
  /* Grid columns are set INLINE from React state (splitRatio) so the
     user can drag the divider to resize. Default ~40% left, 60% right.
     Middle column is the 6px divider track. */
  grid-template-columns: 0.4fr 6px 0.6fr;
  gap: 0;
  flex: 1;
  min-height: 0;
  margin-top: 28px;
}
/* Smooth animation when switching modes (Desktop ↔ App) or hitting the
   reset button. Snappy / no-transition during an active drag so the
   divider tracks the cursor exactly. */
.website-builder__split--animated {
  transition: grid-template-columns 0.36s cubic-bezier(0.32, 0.72, 0, 1);
}
.website-builder__split--dragging {
  transition: none;
}

/* ── Draggable divider ─────────────────────────────────────────────── */
.website-builder__divider {
  position: relative;
  width: 6px;
  cursor: col-resize;
  background: transparent;
  /* Expand the hit area so it's easier to grab without making the visible
     stripe wide. Negative margins eat into the neighboring panels. */
  margin: 0 -8px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.website-builder__divider:hover .website-builder__divider-grip,
.website-builder__divider:focus-visible .website-builder__divider-grip {
  background: rgba(252, 211, 77, 0.55);
  width: 4px;
}
.website-builder__divider:active .website-builder__divider-grip {
  background: rgba(252, 211, 77, 0.85);
}
.website-builder__divider-grip {
  width: 2px;
  height: 60px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
  transition: background 120ms, width 120ms;
}

/* ── LEFT: chat ─────────────────────────────────────────────────────── */
.website-builder__chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(
      ellipse 110% 70% at 18% -10%,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.03) 22%,
      rgba(255, 255, 255, 0.00) 50%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.01) 45%,
      rgba(255, 255, 255, 0.03) 100%
    );
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 12px 36px rgba(0, 0, 0, 0.40);
  overflow: hidden;
}

.website-builder__chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.website-builder__chat-headertext { flex: 1; min-width: 0; }

/* Chat / Code segmented switch on the right side of the chat header. */
.website-builder__tab-toggle {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}
.website-builder__tab-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  padding: 6px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.website-builder__tab-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.website-builder__tab-btn.active {
  background: linear-gradient(180deg, #FFE070 0%, #FCD34D 100%);
  color: #1a1200;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40);
}

/* Code pane — replaces the chat scroll area when the Code tab is active. */
.website-builder__code-pane {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #0c0c10;
}
.website-builder__code-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}
.website-builder__code-lang {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.website-builder__code-copy {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.website-builder__code-copy:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.32);
}
.website-builder__code-block {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 16px 18px;
  overflow: auto;
  font-family: 'SF Mono', Menlo, Monaco, 'Cascadia Code', Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.80);
  white-space: pre-wrap;
  word-wrap: break-word;
  tab-size: 2;
}
.website-builder__code-block code {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  padding: 0;
}
.website-builder__chat-emoji {
  font-size: 1.4rem;
  line-height: 1;
}
.website-builder__chat-headertext {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.website-builder__chat-headertext strong {
  font-size: 0.98rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.005em;
}
.website-builder__chat-substatus {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.50);
}

.website-builder__chat-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 18px 18px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.website-builder__msg {
  display: flex;
  width: 100%;
}
.website-builder__msg--user { justify-content: flex-end; }
.website-builder__msg--aria { justify-content: flex-start; }

.website-builder__msg-bubble {
  max-width: 88%;
  padding: 11px 16px;
  border-radius: 18px;
  font-size: 0.95rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.website-builder__msg--user .website-builder__msg-bubble {
  background: linear-gradient(180deg, #FFE070 0%, #FCD34D 100%);
  color: #1a1200;
  font-weight: 500;
  border-bottom-right-radius: 6px;
}
.website-builder__msg--aria .website-builder__msg-bubble {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.92);
  border-bottom-left-radius: 6px;
}
.website-builder__msg.is-error .website-builder__msg-bubble {
  background: rgba(255, 86, 86, 0.10);
  border-color: rgba(255, 86, 86, 0.30);
  color: #ff9b9b;
}

/* Typing indicator — three dots that pulse. */
.website-builder__msg-bubble--typing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 18px;
}
.website-builder__msg-bubble--typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  animation: wb-typing-pulse 1.2s infinite ease-in-out;
}
.website-builder__msg-bubble--typing span:nth-child(2) { animation-delay: 0.15s; }
.website-builder__msg-bubble--typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes wb-typing-pulse {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.website-builder__input-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.website-builder__input {
  flex: 1;
  resize: none;
  min-height: 44px;
  max-height: 140px;
  padding: 12px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.website-builder__input::placeholder { color: rgba(255, 255, 255, 0.40); }
.website-builder__input:focus {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.06);
}
.website-builder__input:disabled { opacity: 0.55; }

.website-builder__send {
  background: linear-gradient(180deg, #FFE070 0%, #FCD34D 100%);
  color: #1a1200;
  border: none;
  padding: 12px 20px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 14px rgba(252, 211, 77, 0.30);
}
.website-builder__send:hover:not(:disabled) {
  background: linear-gradient(180deg, #FFEA85 0%, #FCD34D 100%);
}
.website-builder__send:active:not(:disabled) { transform: scale(0.97); }
.website-builder__send:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── RIGHT: preview ─────────────────────────────────────────────────── */
.website-builder__preview {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(
      ellipse 110% 70% at 18% -10%,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.02) 22%,
      rgba(255, 255, 255, 0.00) 50%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.01) 45%,
      rgba(255, 255, 255, 0.03) 100%
    );
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 12px 36px rgba(0, 0, 0, 0.40);
  overflow: hidden;
}

.website-builder__preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.website-builder__device-toggle {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}
.website-builder__device-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  padding: 7px 16px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.website-builder__device-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.website-builder__device-btn.active {
  background: linear-gradient(180deg, #FFE070 0%, #FCD34D 100%);
  color: #1a1200;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40);
}

.website-builder__refresh {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, transform 0.2s ease;
}
.website-builder__refresh:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: rotate(90deg);
}

.website-builder__viewport {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background:
    repeating-conic-gradient(rgba(255,255,255,0.015) 0% 25%, transparent 0% 50%)
    50% / 24px 24px;
}
.website-builder__device-frame {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.50);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: #fff;
  transition: max-width 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
.website-builder__viewport--mobile .website-builder__device-frame {
  /* Mobile preview keeps a phone aspect ratio but fills the available
     vertical space instead of being a tiny 420px column. Owner asked
     2026-06-02 — it was leaving huge black bars on each side. */
  height: 100%;
  max-height: 100%;
  width: auto;
  aspect-ratio: 9 / 19.5;
  max-width: 90%;
  border-radius: 28px;
}
.website-builder__iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: #fff;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
/* On narrow screens, stack panels and HIDE the divider (no sense
   resizing horizontally when the layout is vertical). */
@media (max-width: 980px) {
  .website-builder__split {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(280px, 40vh) 1fr;
  }
  .website-builder__divider { display: none; }
}

/* Edge-to-edge on phone — no side gutters, no rounded panel corners. */
@media (max-width: 720px) {
  .website-builder {
    padding: 52px 0 0;
  }
  .website-builder__split {
    margin-top: 14px;
    grid-template-rows: minmax(380px, 1fr) minmax(380px, 1fr);
  }
  .website-builder__chat,
  .website-builder__preview {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .website-builder__viewport {
    padding: 10px;
  }
}
/* ═══════════════════════════════════════════════════════════════════════
 *  Write workbench — kickoff wizard + chat/draft split.
 * ═══════════════════════════════════════════════════════════════════════ */
.write-view {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 60px 24px 24px;
  box-sizing: border-box;
  height: 100%;
}

.write-view__title {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: 'Bricolage Grotesque', 'Inter', -apple-system, sans-serif;
  font-size: clamp(36px, 3.8vw, 64px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #fff;
  line-height: 1;
  text-align: center;
  user-select: none;
  pointer-events: none;
  z-index: 150;
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
body.aria-drawer-open .write-view__title {
  transform: translateX(calc(-50% + 140px));
}

/* ─── KICKOFF WIZARD ────────────────────────────────────────────────── */
.write-wizard {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 24px 16px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}

/* Progress dots */
.write-wizard__progress {
  display: flex;
  gap: 8px;
}
.write-wizard__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  transition: background 0.22s ease, transform 0.22s ease;
}
.write-wizard__dot.is-done {
  background: rgba(252, 211, 77, 0.55);
}
.write-wizard__dot.is-current {
  background: #FCD34D;
  transform: scale(1.4);
}

/* Question card */
.write-wizard__card {
  width: 100%;
  padding: 36px 32px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(
      ellipse 110% 70% at 18% -10%,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.03) 22%,
      rgba(255, 255, 255, 0.00) 50%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 12px 36px rgba(0, 0, 0, 0.40);
  animation: write-wizard-card-in 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes write-wizard-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.write-wizard__step-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  margin-bottom: 10px;
}
.write-wizard__prompt {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 8px;
}
.write-wizard__sub {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.5;
  margin: 0 0 24px;
}

/* Chip cluster */
.write-wizard__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.write-wizard__chip {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background:
    radial-gradient(
      ellipse 110% 70% at 18% -10%,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.04) 22%,
      rgba(255, 255, 255, 0.00) 50%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 45%, rgba(255, 255, 255, 0.03) 100%);
  background-color: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 4px 14px rgba(0, 0, 0, 0.22);
  transition: background 0.18s ease, border-color 0.18s ease,
              transform 0.12s ease, box-shadow 0.18s ease;
}
.write-wizard__chip:hover {
  border-color: rgba(255, 255, 255, 0.40);
  transform: translateY(-1px);
}
.write-wizard__chip:active {
  transform: translateY(0) scale(0.97);
}

/* Custom (free-text) row */
.write-wizard__custom-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 4px;
}
.write-wizard__custom-input {
  flex: 1;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.write-wizard__custom-input::placeholder { color: rgba(255, 255, 255, 0.40); }
.write-wizard__custom-input:focus {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.06);
}
.write-wizard__custom-input--textarea {
  min-height: 110px;
  resize: vertical;
  padding-top: 14px;
}
.write-wizard__custom-submit {
  background: linear-gradient(180deg, #FFE070 0%, #FCD34D 100%);
  color: #1a1200;
  border: none;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.18s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 14px rgba(252, 211, 77, 0.30);
  flex-shrink: 0;
  white-space: nowrap;
}
.write-wizard__custom-submit:hover:not(:disabled) {
  background: linear-gradient(180deg, #FFEA85 0%, #FCD34D 100%);
}
.write-wizard__custom-submit:active:not(:disabled) { transform: scale(0.97); }
.write-wizard__custom-submit:disabled { opacity: 0.4; cursor: not-allowed; }

/* Footer (back + tip) */
.write-wizard__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
}
.write-wizard__back {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.82);
  padding: 8px 18px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.write-wizard__back:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}
.write-wizard__hint {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.42);
  margin-left: auto;
  text-align: right;
}

/* ─── POST-WIZARD: brief bar + split layout ─────────────────────────── */
.write-view__brief-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px auto 14px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  align-self: center;
}
.write-view__brief-chip {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
.write-view__brief-dot {
  color: rgba(255, 255, 255, 0.30);
  font-weight: 700;
}
.write-view__edit-brief {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  margin-left: 8px;
  transition: background 0.18s ease;
}
.write-view__edit-brief:hover {
  background: rgba(255, 255, 255, 0.12);
}

.write-view__split {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(420px, 1.6fr);
  gap: 18px;
  flex: 1;
  min-height: 0;
}

/* Chat panel */
.write-view__chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(ellipse 110% 70% at 18% -10%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 22%, rgba(255,255,255,0) 50%),
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(10px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 12px 36px rgba(0,0,0,0.40);
  overflow: hidden;
}
.write-view__chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.write-view__chat-emoji { font-size: 1.4rem; line-height: 1; }
.write-view__chat-header strong { display: block; color: #fff; font-size: 0.98rem; }
.write-view__chat-substatus {
  display: block;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.50);
  margin-top: 2px;
}

.write-view__chat-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.write-view__msg { display: flex; }
.write-view__msg--user { justify-content: flex-end; }
.write-view__msg--aria { justify-content: flex-start; }
.write-view__msg-bubble {
  max-width: 88%;
  padding: 11px 16px;
  border-radius: 18px;
  font-size: 0.94rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.write-view__msg--user .write-view__msg-bubble {
  background: linear-gradient(180deg, #FFE070 0%, #FCD34D 100%);
  color: #1a1200;
  font-weight: 500;
  border-bottom-right-radius: 6px;
}
.write-view__msg--aria .write-view__msg-bubble {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.92);
  border-bottom-left-radius: 6px;
}
.write-view__msg.is-error .write-view__msg-bubble {
  background: rgba(255, 86, 86, 0.10);
  border-color: rgba(255, 86, 86, 0.30);
  color: #ff9b9b;
}
.write-view__msg-bubble--typing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 18px;
}
.write-view__msg-bubble--typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  animation: write-typing-pulse 1.2s infinite ease-in-out;
}
.write-view__msg-bubble--typing span:nth-child(2) { animation-delay: 0.15s; }
.write-view__msg-bubble--typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes write-typing-pulse {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.write-view__input-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.write-view__input {
  flex: 1;
  resize: none;
  min-height: 44px;
  max-height: 140px;
  padding: 12px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
}
.write-view__input::placeholder { color: rgba(255, 255, 255, 0.40); }
.write-view__input:focus {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.06);
}
.write-view__send {
  background: linear-gradient(180deg, #FFE070 0%, #FCD34D 100%);
  color: #1a1200;
  border: none;
  padding: 12px 20px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.18s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 4px 14px rgba(252,211,77,0.30);
}
.write-view__send:disabled { opacity: 0.4; cursor: not-allowed; }
.write-view__send:active:not(:disabled) { transform: scale(0.97); }

/* Draft document panel */
.write-view__draft {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(ellipse 110% 70% at 18% -10%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 22%, rgba(255,255,255,0) 50%),
    linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  backdrop-filter: blur(10px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 12px 36px rgba(0,0,0,0.40);
  overflow: hidden;
}
.write-view__draft-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.write-view__draft-title {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
}
.write-view__draft-copy {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease;
}
.write-view__draft-copy:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
}
.write-view__draft-copy:disabled { opacity: 0.4; cursor: not-allowed; }

.write-view__draft-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 28px 36px;
}
.write-view__draft-text {
  font-family: 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.92);
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
}
.write-view__draft-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.40);
  font-style: italic;
  font-size: 0.95rem;
}

@media (max-width: 980px) {
  .write-view__split {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(260px, 40vh) 1fr;
  }
}
:root {
  color-scheme: dark;
  /* Same as Electron `BrowserWindow.backgroundColor` (shimmer-desktop/main.js) so web and Mac app match */
  --bg: #000000;
  --surface: #161618;
  --border: #2a2a2e;
  --text: #f4f4f5;
  --text-muted: #a1a1aa;
  --accent: #4ade80;
  --accent-hover: #86efac;
  --input-bg: #18181b;
  --radius: 12px;
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Global light (Day) theme — flips the structural variables app-wide.
   Toggled from the header Night/Day switch (App.jsx → body.theme-light). */
body.theme-light {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --border: #d7d8de;
  --text: #1d1d1f;
  --text-muted: #5c5c63;
  --accent: #1f9d45;
  --accent-hover: #157a35;
  --input-bg: #ffffff;
  /* White base with the top ~half shaded grey, blending smoothly into white. */
  background: #ffffff;
}
/* Browser sets html.app--web body { background: var(--bg) } which would flatten the
   gradient — re-assert it for the web build so it matches the desktop. */
html.app--web body.theme-light {
  background: #ffffff;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  min-height: 100svh;
  min-height: 100dvh;
  overflow: hidden;
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  height: 100%;
  width: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#root {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Browser only: paint page background like the native window (class set in App.jsx) */
html.app--web {
  background: var(--bg);
}
html.app--web body {
  background: var(--bg);
}


/* Frameless desktop window: invisible drag handle in the empty center of the
   top edge so the chromeless window can still be moved. -webkit-app-region is
   Electron-only (a harmless no-op in the browser). Kept clear of the corner
   controls (hamburger left, wordmark/theme/profile right) so nothing is blocked. */
.app-drag-strip {
  position: fixed;
  top: 0;
  left: 130px;
  right: 430px;
  height: 34px;
  z-index: 150;
  -webkit-app-region: drag;
  app-region: drag;
}

button {
  font-family: var(--font);
  cursor: pointer;
}

input, textarea {
  font-family: var(--font);
}