/* ===== structure.css — layout, positioning, sizing =====
   Theme-agnostic skeleton. Removing this breaks layout.
   Removing comic.css (theme) should leave a functional but ugly app. */

/* --- Structural CSS variables --- */
:root {
  --drawer-w: 256px;
  --dock-h: 190px;
  --dock-min-h: 190px;
  --topbar-h: 62px;
}

/* --- Voice studio: live voice HUD (full-screen layout is applied inline from
   brief.js so it always wins over the theme stylesheet). --- */
#voice-studio-hud {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 65;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(23, 21, 27, 0.92);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
#voice-studio-hud.hidden {
  display: none;
}
.voice-studio-hud-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff315f;
  animation: voice-studio-pulse 1.6s infinite;
}
@keyframes voice-studio-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 49, 95, 0.55);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(255, 49, 95, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 49, 95, 0);
  }
}
.voice-studio-hud-text {
  white-space: nowrap;
}
.voice-studio-hud-done {
  margin-left: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #ffd83d;
  color: #17151b;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

/* --- Voice studio full-screen overlay: neon vignette + glass pill + scope --- */
#vs-overlay {
  position: fixed;
  inset: 0;
  z-index: 62;
  pointer-events: none;
  display: none;
}
#vs-overlay.active {
  display: block;
}
#vs-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1.5px rgba(190, 245, 255, 0.95),
    inset 0 0 14px 2px rgba(34, 211, 238, 0.85),
    inset 0 0 42px 6px rgba(90, 140, 255, 0.6),
    inset 0 0 95px 16px rgba(90, 140, 255, 0.32);
  animation: vs-vignette-pulse 2.4s ease-in-out infinite;
}
@keyframes vs-vignette-pulse {
  0%,
  100% {
    opacity: 0.68;
  }
  50% {
    opacity: 1;
  }
}
/* Neon tube: dark box, cream border, argon-pink bloom, waveform inside. */
#vs-panel {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: auto;
  width: min(460px, 92vw);
  box-sizing: border-box;
  background-color: rgba(11, 10, 14, 0.5);
  background-image:
    linear-gradient(rgba(125, 232, 255, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 232, 255, 0.11) 1px, transparent 1px);
  background-size: 22px 22px;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 3px solid #fbf1e0;
  border-radius: 10px;
  padding: 14px 16px 12px;
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.5),
    0 0 4px rgba(251, 241, 224, 0.9),
    0 0 22px rgba(251, 241, 224, 0.55),
    0 0 40px rgba(251, 241, 224, 0.25),
    inset 0 0 12px rgba(251, 241, 224, 0.15),
    0 0 26px rgba(229, 9, 127, 0.35);
  color: #fbf1e0;
  animation: vs-tube-glow 2.8s ease-in-out infinite;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
#vs-panel:active {
  cursor: grabbing;
}
@keyframes vs-tube-glow {
  0%,
  100% {
    box-shadow:
      0 14px 40px rgba(0, 0, 0, 0.5),
      0 0 4px rgba(251, 241, 224, 0.75),
      0 0 18px rgba(251, 241, 224, 0.4),
      0 0 32px rgba(251, 241, 224, 0.18),
      inset 0 0 12px rgba(251, 241, 224, 0.12),
      0 0 26px rgba(229, 9, 127, 0.32);
  }
  50% {
    box-shadow:
      0 14px 40px rgba(0, 0, 0, 0.5),
      0 0 6px rgba(251, 241, 224, 1),
      0 0 28px rgba(251, 241, 224, 0.7),
      0 0 52px rgba(251, 241, 224, 0.32),
      inset 0 0 16px rgba(251, 241, 224, 0.2),
      0 0 34px rgba(229, 9, 127, 0.45);
  }
}
#vs-tube-cap {
  font-size: 16px;
  line-height: 1;
  margin-bottom: 3px;
}
#vs-panel-text {
  display: block;
  margin-top: 3px;
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 11px;
  color: #bab4c6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#vs-scope {
  display: block;
  width: 100%;
  height: 96px;
  margin-top: 10px;
  background: transparent;
  border: 0;
  overflow: visible;
}
/* "Still working" status line (spinner + rotating whimsical word). */
#vs-tube-active {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  min-height: 14px;
}
#vs-tube-spinner {
  flex: none;
  width: 13px;
  text-align: center;
  font-size: 12px;
  line-height: 1;
  color: #ff8fc4;
  text-shadow: 0 0 8px rgba(255, 143, 196, 0.7);
}
#vs-tube-word {
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: #d6cfe4;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Mobile "use desktop" disclaimer — full auth-style screen (dark + sunburst)
   so it stands out; dismissed only by the "I GET IT" button. */
#mobile-disclaimer {
  position: fixed;
  inset: 0;
  z-index: 2147482999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 24px;
  background: #17151b;
}
#mobile-disclaimer.hidden {
  display: none;
}

/* On phones the desktop layout is pinned to 1280px. Chrome on iOS can repaint
   landscape edges from the cream app surface after rotation, even when
   visualViewport reports no gutter. We tried a 1px edge mask, but rotation made
   the cream strip come back; a 5px fallback is the smallest stable mask found
   so far. Move the app out from under the same amount so the mask does not
   cover real UI. (`html.is-mobile` is set pre-paint in index.html.) */
html.is-mobile,
html.is-mobile body {
  background: #000 !important;
}
html.is-mobile body {
  background-image: none !important;
}
@media (orientation: landscape) {
  html.is-mobile {
    --mobile-safe-floor-left: 5px;
    --mobile-safe-floor-right: 5px;
    --mobile-safe-left: max(
      env(safe-area-inset-left, 0px),
      var(--mobile-gutter-left, 0px),
      var(--mobile-safe-floor-left)
    );
    --mobile-safe-right: max(
      env(safe-area-inset-right, 0px),
      var(--mobile-gutter-right, 0px),
      var(--mobile-safe-floor-right)
    );
  }
  html.is-mobile body::before,
  html.is-mobile body::after {
    content: '';
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    display: block !important;
    background: #000 !important;
    pointer-events: none !important;
    z-index: 2147482998 !important;
  }
  html.is-mobile body::before {
    left: 0 !important;
    width: var(--mobile-safe-left) !important;
  }
  html.is-mobile body::after {
    right: 0 !important;
    width: var(--mobile-safe-right) !important;
  }
  html.is-mobile #auth-loader,
  html.is-mobile #login-screen,
  html.is-mobile #path-screen,
  html.is-mobile #full-speech-screen,
  html.is-mobile #mobile-disclaimer,
  html.is-mobile #app-screen:not(.hidden) {
    left: var(--mobile-safe-left) !important;
    right: var(--mobile-safe-right) !important;
    width: auto !important;
  }
  html.is-mobile #url-bar:not(.hidden),
  html.is-mobile #preview-area,
  html.is-mobile #bottom-panel:not(.hidden),
  html.is-mobile #panel-resizer {
    left: var(--mobile-safe-left) !important;
    right: var(--mobile-safe-right) !important;
  }
  html.is-mobile #sidebar {
    left: var(--mobile-safe-left) !important;
  }
  html.is-mobile #sidebar-resizer {
    left: var(--mobile-safe-left) !important;
  }
  html.is-mobile body.drawer-open #sidebar-resizer {
    left: calc(var(--mobile-safe-left) + var(--drawer-w) - 2px) !important;
  }
  html.is-mobile body.drawer-open #preview-area,
  html.is-mobile body.drawer-open #bottom-panel:not(.hidden) {
    left: calc(var(--mobile-safe-left) + var(--drawer-w)) !important;
  }
}

/* --- App screen root --- */
#app-screen.hidden,
#app-screen.hidden:has(#session-guide:not(.hidden)) {
  display: none !important;
}
#app-screen:not(.hidden) {
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  overflow: hidden !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
}
#app-screen > .flex-1 {
  display: block !important;
  min-width: 0 !important;
}

/* --- Top bar --- */
#url-bar:not(.hidden) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 30 !important;
  height: var(--topbar-h) !important;
  min-height: var(--topbar-h) !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 0 150px 0 16px !important;
}
#sidebar-toggle,
#preview-refresh,
#preview-open,
#publish-btn,
#preview-site-open,
#version-history-btn {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
}
#builder-wordmark {
  flex: 0 0 auto;
  line-height: 1 !important;
}
#url-bar > .flex-1 {
  flex: 1 1 auto !important;
  min-width: 60px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  padding: 8px 12px !important;
}
#url-bar > .flex-1::before,
#url-bar > .flex-1::after {
  content: none !important;
}
#url-bar > .flex-1 span {
  display: inline !important;
}

/* Subdomain section */
#subdomain-section:not(.hidden) {
  display: flex !important;
  align-items: stretch !important;
  width: auto !important;
  min-height: 32px !important;
  overflow: hidden !important;
}
#subdomain-set-btn:not(.hidden),
#subdomain-link:not(.hidden) {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 10px !important;
}
#subdomain-link:not(.hidden) {
  max-width: 15rem !important;
}
#dialog-modal.dialog-subdomain {
  z-index: 80 !important;
}
#dialog-modal.dialog-share-status {
  z-index: 80 !important;
}
#dialog-modal.dialog-subdomain > div,
#dialog-modal.dialog-share-status > div {
  width: min(440px, calc(100vw - 32px)) !important;
  max-width: 440px !important;
  height: auto !important;
  max-height: min(420px, calc(100vh - 32px)) !important;
}
#dialog-modal.dialog-subdomain > div > div:first-child,
#dialog-modal.dialog-share-status > div > div:first-child {
  padding: 24px 28px 14px !important;
}
#dialog-modal.dialog-subdomain > div > div:nth-child(2),
#dialog-modal.dialog-share-status > div > div:nth-child(2) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 12px 28px 24px !important;
}
#dialog-modal.dialog-subdomain #dialog-left-actions {
  flex: 0 0 auto !important;
}
#dialog-modal.dialog-subdomain #dialog-left-actions + div {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
}
#dialog-modal.dialog-subdomain #dialog-message,
#dialog-modal.dialog-share-status #dialog-message {
  font-size: 13px !important;
}
#dialog-modal.dialog-subdomain #dialog-input {
  margin-top: 10px !important;
}
#dialog-modal.dialog-subdomain #subdomain-input-wrap {
  display: flex !important;
  align-items: center !important;
  margin-top: 10px !important;
  min-width: 0 !important;
}
#dialog-modal.dialog-subdomain #subdomain-input-wrap #dialog-input {
  margin-top: 0 !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
#dialog-modal.dialog-subdomain #dialog-input[type='search']::-webkit-search-decoration,
#dialog-modal.dialog-subdomain #dialog-input[type='search']::-webkit-search-cancel-button,
#dialog-modal.dialog-subdomain #dialog-input[type='search']::-webkit-search-results-button,
#dialog-modal.dialog-subdomain #dialog-input[type='search']::-webkit-search-results-decoration {
  display: none !important;
}
#dialog-modal.dialog-subdomain #subdomain-input-suffix {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  color: #8f8a80 !important;
}
#dialog-modal.dialog-subdomain #dialog-ok,
#dialog-modal.dialog-subdomain #dialog-cancel,
#dialog-modal.dialog-share-status #dialog-ok,
#dialog-modal.dialog-share-status #dialog-cancel {
  min-width: 82px !important;
}
#dialog-modal.dialog-genius > div {
  width: min(320px, calc(100vw - 32px)) !important;
  max-width: 320px !important;
  height: auto !important;
  max-height: min(240px, calc(100vh - 32px)) !important;
}
#dialog-modal.dialog-genius > div > div:first-child {
  padding: 46px 22px 10px !important;
}
#dialog-modal.dialog-genius > div > div:nth-child(2) {
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 10px 22px 20px !important;
}
#dialog-modal.dialog-genius #dialog-left-actions {
  display: none !important;
}
#dialog-modal.dialog-genius #dialog-ok,
#dialog-modal.dialog-genius #dialog-cancel {
  min-width: 72px !important;
}
#subdomain-extras .subdomain-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

/* Preview toggles */
.preview-toggles {
  display: flex !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
}
.preview-toggles button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  padding: 8px 13px !important;
}

/* Credits display */
#credits-display:not(.hidden) {
  position: fixed !important;
  top: 12px !important;
  right: 16px !important;
  z-index: 35 !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 38px !important;
  padding: 7px 14px !important;
}
.credits-topup {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
}

/* --- Sessions drawer --- */
#sidebar {
  position: fixed !important;
  top: var(--topbar-h) !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 25 !important;
  display: flex !important;
  flex-direction: column !important;
  width: var(--drawer-w) !important;
  min-width: 0 !important;
  overflow: visible !important;
  transform: translateX(-100%) !important;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
#app-screen:not(.hidden) aside#sidebar {
  width: var(--drawer-w) !important;
}
body.drawer-open #sidebar,
#sidebar.mobile-open {
  transform: translateX(0) !important;
}
#sidebar > div:first-child {
  position: static !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: auto !important;
  padding: 16px 16px 10px !important;
}
#new-session-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-height: 30px !important;
  padding: 6px 12px !important;
  white-space: nowrap !important;
}
#session-list {
  position: static !important;
  inset: auto !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding: 4px 14px 14px !important;
}
#session-list .group {
  flex: 0 0 auto !important;
  min-height: 0 !important;
}
#session-list .session-delete-check {
  appearance: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: 2px;
  margin-right: 8px;
  flex: 0 0 18px;
}
#session-list .session-row-btn {
  width: 100% !important;
  min-height: 0 !important;
  text-align: left !important;
  padding: 9px 12px !important;
}
#session-list .group > button:not(:first-child):not(.session-row-btn) {
  min-width: 26px !important;
  height: 26px !important;
  margin-left: 4px !important;
}
/* Touch devices: hover styles make the first tap land a hover (blue) and only
   the second tap clicks. Neutralize hover so a session activates on one tap.
   `body` prefix outranks the theme's :hover rules regardless of file order. */
@media (hover: none) {
  body #session-list .session-row-btn:not(.session-active):hover {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }
  /* Rename/delete can't be hover-revealed on touch — keep them visible so the
     row's tap never just "reveals" them instead of opening the session. */
  body #session-list .group > button.group-hover\:block {
    display: block !important;
  }
}
#sidebar-footer {
  position: static !important;
  flex: 0 0 auto !important;
  display: block !important;
  padding: 14px 16px !important;
}
#user-email:not(.hidden),
#logout-btn:not(.hidden),
#admin-link:not(.hidden),
#tutorial-help,
#theme-switcher {
  display: inline-flex !important;
}
#theme-switcher {
  margin-left: auto !important;
  font-size: 11px !important;
  cursor: pointer !important;
}

/* Sidebar resizer / toggle tab */
#sidebar-resizer {
  position: fixed !important;
  top: calc(var(--topbar-h) + 50%) !important;
  left: 0 !important;
  z-index: 60 !important;
  width: 18px !important;
  height: 64px !important;
  transform: translateY(-50%) !important;
  flex: none !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  transition: left 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
body.drawer-open #sidebar-resizer {
  left: calc(var(--drawer-w) - 2px) !important;
}
/* While dragging, track the edge with no easing so the tab doesn't lag/float. */
body.sidebar-resizing #sidebar-resizer,
body.sidebar-resizing #sidebar {
  transition: none !important;
}
#sidebar-resizer::after {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 64px !important;
}

/* --- Canvas and preview --- */
#preview-area {
  position: fixed !important;
  top: var(--topbar-h) !important;
  bottom: max(var(--dock-h), var(--dock-min-h)) !important;
  left: 0 !important;
  right: 0 !important;
  display: grid !important;
  place-items: center !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: auto !important;
  padding: 28px 20px !important;
  transition: left 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
body.drawer-open #preview-area {
  left: var(--drawer-w) !important;
}
#app-screen:has(#url-bar.hidden) #preview-area {
  top: 0 !important;
}
#app-screen:has(#bottom-panel.hidden) #preview-area {
  bottom: 0 !important;
}
#preview-area::before,
#preview-area::after {
  content: none !important;
}
#app-screen:has(#preview-container:not(.hidden)) #preview-area {
  padding: 0 !important;
  display: block !important;
}

/* Preview container sizing */
#preview-container:not(.hidden),
#session-guide:not(.hidden),
#preview-empty:not(.hidden),
#no-credits-msg:not(.hidden) {
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 980px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
/* Welcome backdrop: let its bottom-right sticker poke out instead of being
   clipped. The sunburst inside is position:fixed, so it still fills the screen. */
#preview-empty:not(.hidden) {
  overflow: visible !important;
}
#preview-container:not(.hidden) {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding-top: 0 !important;
  transition:
    max-width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
#preview-container:not(.hidden)::before {
  display: none !important;
}
#preview-container[data-device='desktop']:not(.hidden) {
  width: 980px !important;
  max-width: 100% !important;
}
#preview-container[data-device='tablet']:not(.hidden) {
  width: 720px !important;
  max-width: 100% !important;
}
#preview-container[data-device='mobile']:not(.hidden) {
  width: 390px !important;
  max-width: 100% !important;
}
#preview-container[data-device='custom']:not(.hidden) {
  max-width: none !important;
}
#preview-iframe {
  display: block !important;
  width: 100% !important;
  height: calc(100% - 0px) !important;
}
#preview-container:not(.hidden) #preview-iframe {
  height: 100% !important;
}
#session-guide {
  display: flex !important;
  flex-direction: column !important;
  padding-top: 0 !important;
}
#session-guide.hidden {
  display: none !important;
}
#session-guide:empty {
  display: none !important;
}
#session-guide::before {
  content: none !important;
}
#preview-empty:not(.hidden),
#no-credits-msg:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 260px !important;
  padding: 34px 28px !important;
  text-align: center !important;
}
#no-credits-msg:not(.hidden) {
  max-width: none !important;
  min-height: 100% !important;
  padding: 44px 54px !important;
  overflow: hidden !important;
  text-align: left !important;
}
#no-credits-msg .login-stage {
  display: block !important;
}
#no-credits-msg .path-cluster {
  max-width: 1120px !important;
  animation: none !important;
}
/* Single card (top-up card removed): keep it a natural card width, centered. */
#no-credits-msg .path-grid {
  grid-template-columns: minmax(0, 360px) !important;
  justify-content: center !important;
}
/* Heading sits on the dark sunburst — keep it cream/readable like the normal path
   layout (overrides the shared "#no-credits-msg h2 -> var(--ink)" dark rule). */
#no-credits-msg .path-heading {
  color: var(--cream, #fbf1e0) !important;
  text-transform: none !important;
}
#no-credits-msg .path-card {
  min-height: 250px !important;
}
#no-credits-shop-btn {
  width: 100% !important;
  min-width: 0 !important;
}

/* --- Dock (bottom panel) --- */
#panel-resizer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(max(var(--dock-h), var(--dock-min-h)) - 7px) !important;
  z-index: 31 !important;
  display: block !important;
  height: 14px !important;
  cursor: ns-resize !important;
  pointer-events: auto !important;
}
#panel-resizer::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  /* Sit on the dock's top edge (bottom of the tab on the edge), poking up. */
  top: calc(50% - 9px) !important;
  z-index: 1 !important;
  display: grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 64px !important;
  /* Same tab as the sidebar handle, rotated 90deg anticlockwise. */
  transform: translate(-50%, -50%) rotate(-90deg) !important;
}
body.drawer-open #panel-resizer {
  left: var(--drawer-w) !important;
}
#app-screen:has(#bottom-panel.hidden) #panel-resizer {
  display: none !important;
}
#bottom-panel:not(.hidden) {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 28 !important;
  display: flex !important;
  flex-direction: column !important;
  height: max(var(--dock-h), var(--dock-min-h)) !important;
  min-height: max(var(--dock-h), var(--dock-min-h)) !important;
  padding: 0 16px 14px !important;
  transform: translateY(var(--dock-slide, 0px)) !important;
  transition:
    left 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.44s cubic-bezier(0.5, 0, 0.3, 1) !important;
}
/* Paper-slide: the whole dock + its pinned satellites (the drag handle and the
   Call-a-Human button) translate together by --dock-slide — 0px = docked,
   large = slid off the bottom edge. Driven by the drag handle (resize.js) and
   slidePanelOut/slidePanelIn (app.js). */
#panel-resizer,
body:has(#app-screen:not(.hidden)) #human-help-button {
  transform: translateY(var(--dock-slide, 0px)) !important;
  transition: transform 0.44s cubic-bezier(0.5, 0, 0.3, 1) !important;
}
/* While actively dragging the handle, follow the finger with no easing. */
body.dock-sliding #bottom-panel:not(.hidden),
body.dock-sliding #panel-resizer,
body.dock-sliding #human-help-button {
  transition: none !important;
}
/* Dock collapsed — let the canvas fill the freed space; the fixed grab handle
   (higher z-index) still peeks over the bottom edge so it can be tapped/dragged. */
body.dock-collapsed #preview-area {
  bottom: 0 !important;
}
body.drawer-open #bottom-panel:not(.hidden) {
  left: var(--drawer-w) !important;
}
#bottom-panel.panel-tall:not(.hidden) {
  height: 60vh !important;
  max-height: 70vh !important;
}
#bottom-panel > .flex.items-center.border-b {
  display: flex !important;
  flex: 0 0 auto !important;
  gap: 6px !important;
  overflow-x: auto !important;
  padding: 10px 4px 8px !important;
  position: relative !important;
  z-index: 2 !important;
}
.tab-btn {
  flex: 0 0 auto !important;
  padding: 8px 14px !important;
}

/* --- Prompt area --- */
#tab-prompt {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  gap: 12px !important;
  align-items: stretch !important;
  margin-top: 14px !important;
  padding: 0 !important;
}
#tab-prompt.hidden {
  display: none !important;
}
#tab-prompt .flex-1.relative {
  flex: 1 1 calc(87.5% - 12px) !important;
  max-width: calc(100% - 340px) !important;
  min-height: 0 !important;
}
#prompt {
  width: 100% !important;
  height: 84px !important;
  min-height: 84px !important;
  resize: none !important;
  padding: 12px 14px !important;
}
#tab-prompt > div:last-child {
  flex: 0 0 clamp(300px, 24%, 380px) !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: 300px !important;
}
#build-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  order: 3 !important;
  flex: 1 1 100% !important;
  max-width: 100% !important;
  min-height: 42px !important;
  padding: 10px 14px !important;
  white-space: nowrap !important;
}
#mode-toggle {
  display: inline-flex !important;
  visibility: visible !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 32px !important;
  padding: 7px 10px !important;
  white-space: nowrap !important;
}
#mode-toggle {
  order: 2 !important;
  flex: 0 1 104px !important;
}
#mode-toggle.hidden {
  display: none !important;
}
#rebuild-btn.hidden {
  display: none !important;
}
#mode-toggle {
  transform: none !important;
}
#rebuild-btn {
  display: inline-flex !important;
  order: 4 !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 1 96px !important;
  min-height: 32px !important;
  padding: 7px 10px !important;
}

/* Tab panels */
#tab-templates,
#tab-free,
#tab-uploads,
#tab-files,
#tab-history,
#tab-usage {
  padding: 14px 4px !important;
}
#tab-free > div:first-child {
  align-items: center !important;
  gap: 8px !important;
  min-height: 46px !important;
  padding: 6px 12px !important;
  overflow: visible !important;
}
#tab-free > div:first-child > div {
  align-items: center !important;
  gap: 6px !important;
  overflow: visible !important;
}
#tab-templates:not(.hidden),
#tab-free:not(.hidden),
#tab-uploads:not(.hidden),
#tab-files:not(.hidden),
#tab-history:not(.hidden),
#tab-usage:not(.hidden) {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
}
#error:not(.hidden) {
  display: block !important;
  margin-left: auto !important;
}

/* --- Human help button (app screen) --- */
body:has(#app-screen:not(.hidden)) #human-help-button {
  position: fixed !important;
  right: 14px !important;
  bottom: calc(var(--dock-h) + 4px) !important;
  z-index: 35 !important;
  display: grid !important;
  place-items: center !important;
  width: 74px !important;
  height: 74px !important;
  padding: 0 !important;
}

/* --- Session guide layout (app screen) --- */
#app-screen:has(#session-guide:not(.hidden)) {
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
}
#app-screen:has(#session-guide:not(.hidden)) #url-bar:not(.hidden) {
  display: flex !important;
}
#app-screen:has(#session-guide:not(.hidden)) aside#sidebar {
  display: flex !important;
}
#app-screen:has(#session-guide:not(.hidden)) #sidebar-resizer {
  display: block !important;
}
#app-screen:has(#session-guide:not(.hidden)) #preview-area {
  top: var(--topbar-h) !important;
  bottom: max(var(--dock-h), var(--dock-min-h)) !important;
  left: 0 !important;
}
body.drawer-open #app-screen:has(#session-guide:not(.hidden)) #preview-area {
  left: var(--drawer-w) !important;
}
#app-screen:has(#session-guide:not(.hidden)) #bottom-panel:not(.hidden) {
  display: flex !important;
  height: max(var(--dock-h), var(--dock-min-h)) !important;
  min-height: max(var(--dock-h), var(--dock-min-h)) !important;
}
#app-screen:has(#session-guide:not(.hidden)) #tab-prompt:not(.hidden) {
  display: flex !important;
  grid-template-columns: none !important;
  padding: 0 !important;
}
#app-screen:has(#session-guide:not(.hidden)) #tab-prompt:not(.hidden) > div:last-child {
  display: flex !important;
}

/* --- Top bar final corrections --- */
#url-bar:not(.hidden) {
  padding-right: 16px !important;
}
#sidebar-toggle {
  display: none !important;
}
.domain-controls {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: 24px !important;
}
.domain-controls #site-link {
  display: none !important;
}
.preview-toggles {
  margin-left: 24px !important;
}
#version-history-btn,
#publish-btn,
#preview-open,
#preview-site-open {
  width: auto !important;
  min-width: 78px !important;
  flex-basis: auto !important;
  padding: 0 11px !important;
  white-space: nowrap !important;
}
#preview-open,
#preview-site-open {
  gap: 5px !important;
  place-items: center !important;
  grid-auto-flow: column !important;
  align-items: center !important;
  justify-content: center !important;
}
#preview-open span,
#preview-site-open span {
  display: inline-block !important;
  font-weight: inherit !important;
  line-height: 1 !important;
}
#credits-display:not(.hidden) {
  position: static !important;
  top: auto !important;
  right: auto !important;
  flex: 0 0 auto !important;
}

/* --- Action controls integrity lock --- */
#tab-prompt > div:first-child {
  min-width: 0 !important;
}
#tab-prompt > div:last-child {
  flex: 0 0 auto !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  width: 16rem !important;
  min-width: 16rem !important;
  max-width: 16rem !important;
}
#tab-prompt > div:last-child > #build-btn,
#tab-prompt > div:last-child > #rebuild-btn,
#tab-prompt > div:last-child > #mode-toggle {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 100% !important;
  align-self: stretch !important;
}
#bottom-panel:not(.hidden) {
  padding-bottom: 8px !important;
}
#tab-prompt:not(.hidden) {
  align-items: stretch !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
#tab-prompt:not(.hidden) > div:first-child {
  position: relative !important;
  align-self: stretch !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
#tab-prompt:not(.hidden) > div:first-child > #prompt {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 14px 16px 44px !important;
  line-height: 1.25 !important;
  overflow-y: auto !important;
}
#tab-prompt:not(.hidden) #prompt-record-btn {
  bottom: 8px !important;
}
#tab-prompt:not(.hidden) > div:last-child {
  display: grid !important;
  grid-auto-flow: row !important;
  grid-template-rows: auto auto auto !important;
  align-content: end !important;
  align-items: stretch !important;
  align-self: stretch !important;
  gap: 8px !important;
  flex: 0 0 clamp(24rem, 30vw, 38rem) !important;
  width: clamp(24rem, 30vw, 38rem) !important;
  min-width: 24rem !important;
  max-width: 38rem !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
#tab-prompt:not(.hidden) > div:last-child > #rebuild-btn {
  order: 1 !important;
}
#tab-prompt:not(.hidden) > div:last-child > #mode-toggle {
  order: 2 !important;
}
#tab-prompt:not(.hidden) > div:last-child > #build-btn {
  order: 3 !important;
}
#tab-prompt:not(.hidden) > div:last-child > #build-btn,
#tab-prompt:not(.hidden) > div:last-child > #rebuild-btn,
#tab-prompt:not(.hidden) > div:last-child > #mode-toggle {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  justify-self: stretch !important;
  align-self: stretch !important;
}

/* --- Prompt actions container --- */
#tab-prompt:not(.hidden) #prompt-actions {
  --action-col-w: 28rem;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  align-self: stretch !important;
  gap: 8px !important;
  flex: 0 0 var(--action-col-w) !important;
  width: var(--action-col-w) !important;
  min-width: var(--action-col-w) !important;
  max-width: var(--action-col-w) !important;
  height: auto !important;
  overflow: visible !important;
}
#tab-prompt:not(.hidden) #prompt-actions > #build-btn,
#tab-prompt:not(.hidden) #prompt-actions > #rebuild-btn,
#tab-prompt:not(.hidden) #prompt-actions > #mode-toggle {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  align-self: stretch !important;
}
.build-power-row {
  order: 3 !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  width: 100% !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
}

/* --- Slider toggles (rebuild/mode) --- */
#tab-prompt #rebuild-btn.wb-toggle {
  order: 2 !important;
}
#tab-prompt #mode-toggle.wb-toggle {
  order: 3 !important;
}
#tab-prompt #build-btn {
  order: 3 !important;
}
#tab-prompt #rebuild-btn.wb-toggle,
#tab-prompt #mode-toggle.wb-toggle {
  position: relative !important;
  display: inline-grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: stretch !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  padding: 3px !important;
  overflow: hidden !important;
}
#tab-prompt #mode-toggle.wb-toggle {
  grid-template-columns: 1fr 1fr 1fr !important;
}
#tab-prompt #rebuild-btn.wb-toggle.hidden {
  display: none !important;
}
.wb-toggle .wb-knob {
  position: absolute !important;
  top: 3px !important;
  bottom: 3px !important;
  left: 3px !important;
  width: calc(50% - 3px) !important;
  z-index: 0 !important;
}
#mode-toggle.wb-toggle .wb-knob {
  width: calc(33.333% - 3px) !important;
}
.wb-toggle[data-state='rebuild'] .wb-knob,
.wb-toggle[data-state='genius'] .wb-knob {
  left: 50% !important;
}
#mode-toggle.wb-toggle[data-state='quick'] .wb-knob {
  left: 3px !important;
}
#mode-toggle.wb-toggle[data-state='pro'] .wb-knob {
  left: 33.333% !important;
}
#mode-toggle.wb-toggle[data-state='genius'] .wb-knob {
  left: 66.666% !important;
}
.wb-toggle .wb-opt {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}

/* Prompt field structure */
#tab-prompt .flex-1.relative {
  align-self: stretch !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}
#tab-prompt #prompt {
  box-sizing: border-box !important;
  display: block !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 14px 16px 44px !important;
  line-height: 1.25 !important;
  overflow-y: auto !important;
}
#tab-prompt > div:last-child {
  align-content: flex-end !important;
}
#tab-prompt #prompt-record-btn {
  position: absolute !important;
  left: 10px !important;
  bottom: 8px !important;
  z-index: 5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 26px !important;
  padding: 4px 10px !important;
}

/* --- Rotate gate --- */
#rotate-gate {
  display: none;
}
@media (orientation: portrait) {
  html.is-mobile body:has(#path-screen:not(.hidden)) #rotate-gate,
  html.is-mobile body:has(#app-screen:not(.hidden)):has(#brief-modal.hidden) #rotate-gate {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 3rem 1rem;
  }
  html.is-mobile body:has(#path-screen:not(.hidden)),
  html.is-mobile body:has(#app-screen:not(.hidden)):has(#brief-modal.hidden) {
    overflow: hidden !important;
  }
}

/* Give the sign-in and spoken walkthrough a little more breathing room on
   portrait phones. Resize their layout boxes instead of transforming them so
   mobile browsers keep touch hit-testing aligned with the visible controls. */
@media (max-width: 760px) and (orientation: portrait) {
  html.is-mobile #login-screen .login-cluster {
    width: 90%;
    max-width: 342px;
  }
  html.is-mobile #full-speech-screen .path-cluster--voice {
    width: 90%;
    max-width: 504px;
  }
  html.is-mobile #brief-modal .voice-brief-window {
    width: min(648px, calc(90vw - 25px));
    min-height: min(504px, calc(90dvh - 25px));
    padding: clamp(25px, 5.4vw, 58px);
  }
  html.is-mobile #login-screen button,
  html.is-mobile #full-speech-screen button,
  html.is-mobile #brief-modal button {
    touch-action: manipulation;
  }
  html.is-mobile #brief-modal .voice-brief-action {
    min-height: 44px;
  }
}

/* --- Login screen layout --- */
.login-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.login-cluster {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
}
.login-card {
  position: relative;
  padding: 40px 32px 30px;
  text-align: center;
}
.login-pill {
  position: absolute;
  z-index: 2;
  white-space: nowrap;
}
.login-field {
  text-align: left;
}

/* --- Path screen layout --- */
.path-cluster {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1120px;
}
.path-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}
.path-card {
  position: relative;
  padding: 26px 24px 24px;
  text-align: left;
  display: flex;
  flex-direction: column;
}
.path-exit {
  position: absolute;
  top: -42px;
  left: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
}
.path-sticker {
  position: absolute;
  top: -18px;
  right: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  min-height: 36px;
  padding: 8px 14px;
  pointer-events: none;
}
.path-finger {
  position: absolute;
  top: -104px;
  right: -54px;
  z-index: 3;
  width: 100px;
  height: 100px;
  pointer-events: none;
}
.path-cluster--voice {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.path-cluster--voice .path-heading {
  margin-bottom: 28px;
}
.path-cluster--voice.has-voice-error > .path-pill,
.path-cluster--voice.has-voice-error > .path-heading,
.path-cluster--voice.has-voice-error > .sting-subheading,
.path-cluster--voice.has-voice-error > .cta-sting-wrap,
.path-cluster--voice.has-voice-error > .path-voice-cta,
.path-cluster--voice.has-voice-error > .path-console-link {
  display: none;
}
.path-voice-cta {
  width: min(100%, 430px);
  min-height: 78px;
  padding: 18px 28px;
}
.path-console-link {
  margin-top: 18px;
  padding: 6px 10px;
}
.path-voice-error {
  position: relative;
  width: min(100%, 500px);
  padding: 28px;
}
.path-voice-error-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 2px auto 16px;
}
.path-voice-error h3,
.path-voice-error p {
  margin-right: 0;
  margin-left: 0;
}
.path-voice-error-actions {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}
.path-voice-recovery-btn {
  width: 100%;
  min-height: 48px;
  padding: 10px 16px;
}
.path-voice-recovery-link {
  justify-self: center;
  padding: 7px 10px;
}
@media (max-width: 520px) {
  .path-voice-error {
    padding: 22px 18px;
  }
}

/* --- Templates window layout --- */
.tm-cluster {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.tm-window {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(980px, calc(100vw - 32px));
  height: min(640px, calc(100vh - 64px));
  min-width: 320px;
  min-height: 280px;
  overflow: hidden;
}
.tm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  flex-shrink: 0;
}
.tm-close {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
}
.tm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  flex-shrink: 0;
}
.tm-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tm-search {
  flex: 1;
  min-width: 140px;
  padding: 7px 10px;
}
.tm-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 16px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-content: flex-start;
}
.tm-grid > div {
  width: 188px !important;
}
.tm-grid > div > div:first-child {
  height: 104px !important;
}
.tm-grid iframe {
  transform: scale(0.147) !important;
}
.tm-grid > div > div:last-child {
  padding: 8px !important;
  gap: 3px !important;
}
.tm-grid button {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

/* --- Brief modal layout --- */
.brief-window {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(760px, calc(100vw - 28px));
  max-height: min(740px, calc(100vh - 28px));
  min-height: 420px;
  overflow: hidden;
}
.brief-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: 12px 16px;
}
.brief-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 13px;
}
.brief-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
}
.brief-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 24px 18px;
}
.brief-panel {
  display: grid;
  gap: 12px;
}
.brief-answer {
  width: 100%;
  min-height: 170px;
  padding: 12px 14px;
  resize: vertical;
}
.brief-record-row,
.brief-upload-row,
.brief-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.brief-effects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.brief-final-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.brief-mode-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
}
.brief-final-prompt {
  min-height: 210px;
}

/* --- Automatic voice brief layout --- */
.voice-brief-window {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(720px, calc(100vw - 28px));
  min-height: min(560px, calc(100dvh - 28px));
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 6vw, 64px);
  text-align: center;
  overflow: hidden;
}
.voice-brief-window .voice-brief-logo {
  position: static;
  width: 100%;
  text-align: center;
  font-size: clamp(30px, 6.5vw, 52px);
  margin-bottom: clamp(10px, 2vw, 18px);
}
.voice-brief-step {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 14px;
}
/* Step pill sits as a label in the top-left corner of the waveform box. */
.voice-scope .voice-brief-step {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 2;
  min-height: 0;
  padding: 5px 12px;
}
.voice-brief-title {
  max-width: 620px;
  margin: 0 0 24px;
}
.voice-scope {
  position: relative;
  width: 100%;
  height: clamp(150px, 28vh, 230px);
  overflow: hidden;
}
.voice-scope canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.voice-scope-line {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  pointer-events: none;
}
/* Tube-style footer inside the brief box: action text + animated thinking line. */
.voice-scope-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  pointer-events: none;
  text-align: left;
}
.voice-scope-foot .voice-brief-status {
  margin: 0;
  max-width: none;
  min-height: 0;
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 11px;
  font-weight: 400;
  color: #bab4c6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
.voice-scope-active {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 14px;
}
.voice-scope-spinner {
  flex: none;
  width: 13px;
  text-align: center;
  font-size: 12px;
  line-height: 1;
  color: #ff8fc4;
  text-shadow: 0 0 8px rgba(255, 143, 196, 0.7);
}
.voice-scope-word {
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: #d6cfe4;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.voice-brief-status {
  max-width: 540px;
  min-height: 3em;
  margin: 24px 0 0;
}
.voice-brief-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}
.voice-brief-action {
  min-width: 84px;
  min-height: 38px;
  padding: 8px 14px;
}
.voice-brief-action--proceed {
  flex: 0 1 280px;
  min-width: min(100%, 220px);
}
.voice-console-link {
  margin-top: 10px;
  padding: 6px 10px;
}

/* --- Placeholder form (ingested template) layout --- */
#placeholder-form-modal {
  background: #17151b;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.placeholder-form-scrim {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #17151b;
  pointer-events: none;
}
#placeholder-form-modal .login-stage {
  z-index: 0;
}
/* Sunburst rays only — drop the left/right color blobs (soft blue #36A9E1 reads as a stray box) */
#placeholder-form-modal .login-stage::after {
  background: radial-gradient(rgba(248, 239, 206, 0.05) 1px, transparent 1px);
  background-size: 26px 26px;
}
.placeholder-form-window {
  position: relative;
  z-index: 1;
  width: min(520px, calc(100vw - 28px));
  max-height: min(680px, calc(100dvh - 28px));
  min-height: 0;
  margin: auto;
  flex-shrink: 0;
  /* Scroll as one card so the footer doesn't dominate when the keyboard opens. */
  display: block;
  overflow-y: auto;
}
.placeholder-form-window .brief-body {
  overflow: visible;
}
.placeholder-form-fields {
  display: grid;
  gap: 14px;
  margin-top: 4px;
  border: 0;
  padding: 0;
  margin-bottom: 0;
}
.placeholder-form-footer {
  flex-shrink: 0;
  justify-content: flex-end;
  padding: 14px 16px 16px;
}

.brief-image-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
.brief-image-card {
  display: grid;
  gap: 9px;
  padding: 10px;
}
.brief-image-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.brief-image-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.brief-footer {
  flex-shrink: 0;
  justify-content: flex-end;
  padding: 14px 16px 16px;
}

/* --- Share modal layout --- */
.share-card {
  position: relative;
  width: 100%;
  max-width: 1180px;
  max-height: calc(100vh - 48px);
  overflow: visible;
  display: grid;
  grid-template-columns: 270px minmax(430px, 1fr) 330px;
  grid-template-areas: 'brand preview controls';
  column-gap: 24px;
  row-gap: 0;
  align-items: start;
  padding: 36px 34px 30px;
  text-align: center;
}
.share-brand {
  grid-area: brand;
  align-self: center;
  min-width: 0;
  text-align: left;
}
.share-brand .weboom-logo {
  margin: 0;
  text-align: left;
}
.share-preview-panel {
  grid-area: preview;
  min-width: 0;
}
.share-controls {
  grid-area: controls;
  min-width: 0;
  align-self: start;
  text-align: left;
}
.share-controls .share-section:first-child {
  margin-top: 0;
}
.share-pill {
  position: absolute;
  z-index: 2;
  top: -16px;
  left: -14px;
  white-space: nowrap;
}
.share-close {
  position: absolute;
  display: grid;
  place-items: center;
  top: -12px;
  right: -18px;
  z-index: 2;
  min-width: 46px;
  min-height: 32px;
}
.share-preview-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: stretch;
  margin: 0;
  padding: 10px;
  border: 2px solid #111827;
  border-radius: 8px;
  background: #fff;
  box-shadow: 4px 4px 0 #111827;
}
.share-preview-thumb-wrap {
  position: relative;
  aspect-ratio: 1200 / 630;
  width: 100%;
  overflow: hidden;
  border: 2px solid #111827;
  border-radius: 6px;
  background: #f3f4f6;
}
.share-preview-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.share-preview-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  color: #6d28d9;
  background: repeating-linear-gradient(-45deg, #fff, #fff 8px, #f5f3ff 8px, #f5f3ff 16px);
}
/* Empty-state placeholder shown while waiting for the user to publish. */
.share-preview-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 16px;
  text-align: center;
  background: repeating-linear-gradient(-45deg, #fff, #fff 8px, #f4f4f5 8px, #f4f4f5 16px);
}
.share-preview-placeholder-icon {
  width: 44px;
  height: 44px;
  color: #c3c7cf;
}
.share-preview-placeholder-text {
  max-width: 220px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #6b7280;
}
.share-preview-lottie {
  width: 72px;
  height: 72px;
}
/* On error, drop the loading throb and just show the message. */
.share-preview-card.is-error .share-preview-lottie {
  display: none;
}
.share-preview-title {
  margin: 0 0 4px;
  color: #111827;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
}
.share-preview-description {
  margin: 0;
  color: #4b5563;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.share-copy:disabled,
.share-qr-toggle:disabled,
.share-input:disabled,
.share-social.is-disabled,
.share-open-link.is-disabled {
  cursor: wait;
  opacity: 0.45;
}
.share-publish:disabled {
  cursor: default;
  opacity: 0.65;
}
.share-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 8px;
}
.share-socials {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.share-social {
  display: grid;
  min-height: 40px;
  place-items: center;
}
.share-social svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: currentColor;
}
.share-publish-row {
  margin-top: 12px;
}
.share-publish {
  width: 100%;
  min-height: 42px;
  padding: 11px 16px;
}
.share-publish.hidden {
  display: none;
}
.share-actions {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.share-open-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 16px;
}
.share-built-link {
  display: inline-flex;
  justify-content: center;
}

@media (max-width: 1040px) {
  .share-card {
    max-width: 430px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    grid-template-columns: 1fr;
    grid-template-areas:
      'brand'
      'preview'
      'controls';
    padding: 38px 20px 26px;
  }
  .share-brand {
    text-align: center;
  }
  .share-controls {
    text-align: left;
  }
  .share-preview-card,
  .share-link-row,
  .share-socials {
    grid-template-columns: 1fr;
  }
}

/* --- Credits shop layout --- */
.credits-shop-card {
  position: relative;
  width: 100%;
  max-width: 1120px;
  padding: 24px 10px;
}
.credits-shop-close {
  position: absolute;
  display: grid;
  place-items: center;
  top: 0;
  right: 0;
  z-index: 2;
  min-width: 46px;
  min-height: 32px;
}
.credits-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  margin-top: 24px;
}
.credits-pack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  min-height: 270px;
  padding: 26px 24px 24px;
}
.credits-pack--setup {
  grid-column: 1 / -1;
  min-height: 0;
  padding: 16px 20px;
}
.credits-pack-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  white-space: nowrap;
}
.credits-pack-buy {
  margin-top: auto;
  width: 100%;
  padding-top: 28px;
  min-height: 56px;
  display: grid;
  place-items: center;
  position: relative;
}
.credits-pack-buy::before {
  content: '';
  position: absolute;
  top: 10px;
  left: -24px;
  right: -24px;
}
.credits-pack-buy stripe-buy-button {
  width: 100%;
}
.credits-pack-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  text-align: center;
}

/* --- Guide/session-guide layout --- */
.guide-nav {
  display: grid;
  grid-template-columns: 1fr auto 132px;
  align-items: center;
  gap: 24px;
  min-height: 86px;
  padding: 0 32px;
}
.guide-nav nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.guide-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 336px;
  padding: 34px 34px 30px;
  overflow: hidden;
}
.guide-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.guide-boom {
  position: relative;
  display: grid;
  place-items: center;
  width: 196px;
  height: 196px;
  margin-right: 5px;
}

/* --- Build badge --- */
#build-badge {
  position: fixed;
  right: 12px;
  bottom: 10px;
  z-index: 99999;
  pointer-events: none;
}

/* --- Showcase --- */
#showcase-track::-webkit-scrollbar {
  display: none;
}

/* --- Media cards --- */
.media-del {
  display: none;
  align-items: center;
  justify-content: center;
}
.media-card:hover .media-del {
  display: flex;
}

/* --- Tour overlay --- */
#tour-highlight {
  position: fixed;
  z-index: 53;
  pointer-events: none;
  background: transparent;
}
#tour-card {
  position: fixed;
  z-index: 54;
  width: min(20rem, calc(100vw - 24px));
  padding: 1rem 1.1rem;
}
#tour-card .tour-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* ===== Responsive — mobile ===== */
@media (max-width: 760px) {
  :root {
    --drawer-w: 230px;
    --dock-h: 196px;
    --dock-min-h: 156px;
  }
  #url-bar:not(.hidden) {
    padding-right: 16px !important;
    overflow-x: auto !important;
  }
  #url-bar > .flex-1 {
    display: none !important;
  }
  .preview-toggles {
    margin-left: auto !important;
  }
  .preview-toggles button {
    padding: 8px 10px !important;
  }
  body.drawer-open #preview-area,
  body.drawer-open #bottom-panel:not(.hidden) {
    left: 0 !important;
  }
  body.drawer-open #sidebar,
  #sidebar.mobile-open {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  body.drawer-open #sidebar-resizer {
    left: calc(100vw - 18px) !important;
  }
  #tab-prompt {
    flex-direction: column !important;
  }
  #tab-prompt > div:last-child {
    flex-direction: row !important;
    align-items: center !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }
  body:has(#app-screen:not(.hidden)) #human-help-button {
    width: 60px !important;
    height: 60px !important;
  }
  #credits-display:not(.hidden) {
    display: none !important;
  }
  #no-credits-msg:not(.hidden) {
    padding: 32px 20px !important;
  }
  .share-card {
    max-width: 430px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    grid-template-columns: 1fr;
    grid-template-areas:
      'brand'
      'preview'
      'controls';
    padding: 38px 20px 26px;
  }
  .share-controls {
    text-align: left;
  }
  .share-preview-card,
  .share-link-row,
  .share-socials {
    grid-template-columns: 1fr;
  }
  .share-pill {
    left: -6px;
  }
  .share-close {
    right: -8px;
  }
  .brief-body {
    padding: 18px 16px 14px;
  }
  .brief-final-grid {
    grid-template-columns: 1fr;
  }
  .brief-footer {
    justify-content: stretch;
  }
  .brief-btn {
    flex: 1 1 100%;
  }
  .path-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .path-card {
    padding: 20px 18px 18px;
  }
  .path-sticker {
    right: 12px;
    min-width: 64px;
    min-height: 32px;
    padding: 7px 10px;
  }
  .path-finger {
    top: -42px;
    right: -4px;
    transform-origin: top right;
  }
  .login-card {
    padding: 36px 22px 26px;
  }
  .login-pill-step {
    left: -6px;
  }
  .login-pill-click {
    right: -8px;
  }
}

/* ===== Responsive — short landscape ===== */
@media (max-height: 430px) and (orientation: landscape) {
  :root {
    --topbar-h: 52px;
    --dock-h: 124px;
  }
  #url-bar:not(.hidden) {
    gap: 8px !important;
    padding: 0 106px 0 10px !important;
    overflow-x: auto !important;
  }
  #sidebar-toggle,
  #preview-refresh,
  #preview-open,
  #publish-btn,
  #preview-site-open,
  #version-history-btn {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }
  #url-bar > .flex-1 {
    display: none !important;
  }
  .preview-toggles button {
    padding: 7px 9px !important;
  }
  #credits-display:not(.hidden) {
    top: 8px !important;
    right: 10px !important;
    min-height: 34px !important;
    padding: 6px 10px !important;
  }
  #preview-area {
    padding: 12px 16px !important;
  }
  body.drawer-open #preview-area,
  body.drawer-open #bottom-panel:not(.hidden) {
    left: 0 !important;
  }
  #preview-container:not(.hidden),
  #session-guide:not(.hidden),
  #preview-empty:not(.hidden),
  #no-credits-msg:not(.hidden) {
    max-width: 760px !important;
  }
  #bottom-panel:not(.hidden) {
    padding: 0 10px 8px !important;
  }
  #bottom-panel > .flex.items-center.border-b {
    padding-top: 6px !important;
  }
  .tab-btn {
    padding: 6px 10px !important;
  }
  #tab-prompt {
    flex-direction: row !important;
    gap: 10px !important;
    margin-top: 7px !important;
  }
  #prompt {
    height: 58px !important;
    min-height: 58px !important;
    padding: 9px 11px !important;
  }
  #tab-prompt > div:last-child {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    min-width: 278px !important;
    flex-wrap: wrap !important;
  }
  #build-btn {
    min-height: 38px !important;
    padding: 9px 12px !important;
  }
  #mode-toggle {
    min-height: 28px !important;
    padding: 5px 8px !important;
  }
  #rebuild-btn {
    min-height: 20px !important;
  }
  body:has(#app-screen:not(.hidden)) #human-help-button {
    right: 8px !important;
    bottom: calc(var(--dock-h) + 3px) !important;
    width: 54px !important;
    height: 54px !important;
  }
  #app-screen:has(#session-guide:not(.hidden)) #preview-area {
    left: 0 !important;
  }
  #url-bar:not(.hidden) {
    padding-right: 10px !important;
  }
  #version-history-btn,
  #preview-open,
  #publish-btn,
  #preview-site-open,
  #preview-refresh {
    min-width: 34px !important;
    padding: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #sidebar,
  #preview-area,
  #bottom-panel,
  #preview-container,
  #build-btn,
  #sidebar-toggle,
  #preview-refresh,
  #preview-open,
  #publish-btn,
  #preview-site-open,
  #version-history-btn,
  #human-help-button,
  .login-stage::before,
  .login-cluster,
  .path-cluster,
  .path-cta,
  .path-sticker--free,
  .path-finger,
  #rotate-gate .rg-emoji,
  .login-btn {
    transition: none !important;
    animation: none !important;
  }
}

/* --- Checkout success callout --- */
#checkout-callout {
  position: fixed;
  top: 60px;
  right: 40px;
  z-index: 999;
  display: flex;
  align-items: flex-start;
  gap: 0;
  animation: checkout-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.checkout-callout-box {
  border: 4px solid var(--ink, #17151b);
  border-radius: 8px;
  box-shadow: 8px 8px 0 #000;
  overflow: hidden;
  background: var(--cream, #fbf1e0);
}
.checkout-callout-header {
  background: var(--yellow, #ffd83d);
  border-bottom: 4px solid var(--ink, #17151b);
  padding: 6px 28px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink, #17151b);
  text-align: center;
}
.checkout-callout-body {
  padding: 16px 28px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #17151b);
  text-align: center;
}
.checkout-finger {
  width: 96px;
  height: 96px;
  margin-top: -10px;
  margin-left: -8px;
  transform: rotate(45deg);
  animation: checkout-finger-bounce 0.9s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
}
@keyframes checkout-pop {
  from {
    opacity: 0;
    transform: scale(0.6) rotate(-3deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}
@keyframes checkout-finger-bounce {
  0%,
  100% {
    transform: rotate(45deg) translate(0px, 0px);
  }
  50% {
    transform: rotate(45deg) translateX(0px) translateY(-10px);
  }
}