/* ──────────────────────────────────────────────────────────────
       LingCode redesign — theme override for /try.
       Re-skins the cream-themed page to the new light + purple system
       used on the homepage. Operates entirely through the existing
       --signal / --bg / --text / --border tokens, so the cascade
       restyles ~430 callsites without touching any other CSS.
       ────────────────────────────────────────────────────────────── */
    :root {
      --bg: #FAFAFF;
      --bg-card: #FFFFFF;
      --bg-card-hover: #F5F3FF;
      --bg-nav: rgba(250, 250, 255, 0.78);
      --text: #1A1530;
      --text-muted: #5D5475;
      --text-dim: #8B829F;
      --signal: #A855F7;
      --signal-glow: rgba(168, 85, 247, 0.22);
      --green: #16A34A;
      --accent-violet: #A855F7;
      --accent-blue: #7C3AED;
      --accent-soft: rgba(168, 85, 247, 0.10);
      --accent-line: rgba(168, 85, 247, 0.30);
      --hot: #F472B6;
      --red: #DC2626;
      --border: rgba(168, 85, 247, 0.12);
      --border-strong: rgba(168, 85, 247, 0.30);
      --aurora-fill:
        radial-gradient(ellipse 90% 50% at 50% -10%, rgba(168, 85, 247, 0.14), transparent 60%),
        radial-gradient(ellipse 60% 40% at 90% 20%, rgba(244, 114, 182, 0.08), transparent 70%);
      --ff-display: 'Instrument Serif', 'EB Garamond', Georgia, serif;
      --grad-aurora: linear-gradient(135deg, #A855F7 0%, #C026D3 50%, #F472B6 100%);
    }

    [data-theme="dark"] {
      --bg: #0D0B17;
      --bg-card: #16132A;
      --bg-card-hover: #1E1A35;
      --surface-raised: #1A1730;
      --bg-nav: rgba(13, 11, 23, 0.90);
      --text: #EDE8F8;
      --text-muted: #9D96B8;
      --text-dim: #6B6485;
      --signal: #C084FC;
      --signal-glow: rgba(192, 132, 252, 0.22);
      --border: rgba(168, 85, 247, 0.18);
      --border-strong: rgba(168, 85, 247, 0.40);
      --accent-soft: rgba(168, 85, 247, 0.14);
      --accent-line: rgba(168, 85, 247, 0.35);
      --aurora-fill:
        radial-gradient(ellipse 90% 50% at 50% -10%, rgba(168, 85, 247, 0.09), transparent 60%),
        radial-gradient(ellipse 60% 40% at 90% 20%, rgba(244, 114, 182, 0.05), transparent 70%);
    }
    [data-theme="dark"] .monaco-editor,
    [data-theme="dark"] .monaco-editor-background,
    [data-theme="dark"] .monaco-editor .margin { background: var(--bg-card) !important; }

    /* ── Theme toggle ── */
    .try-theme-btn {
      background: none; border: 1px solid var(--border); border-radius: 6px;
      color: var(--text-muted); cursor: pointer; padding: 5px 8px; font-size: 0.8rem;
      line-height: 1; transition: color 0.15s, border-color 0.15s;
    }
    .try-theme-btn:hover { color: var(--text); border-color: var(--border-strong); }

    /* ── Persistent deploy badge ── */
    .pane-live-badge {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 0.72rem; font-weight: 500; color: var(--green);
      background: rgba(22, 163, 74, 0.10); border: 1px solid rgba(22, 163, 74, 0.25);
      border-radius: 5px; padding: 2px 7px; text-decoration: none;
      white-space: nowrap; transition: background 0.15s;
    }
    .pane-live-badge:hover { background: rgba(22, 163, 74, 0.18); }

    /* ── AI suggestion chips ── */
    .pane-suggest-chips {
      display: flex; flex-wrap: wrap; gap: 6px;
      padding: 6px 2px 2px; width: 100%;
    }
    .suggest-chip {
      font-size: 0.74rem; padding: 4px 10px; border-radius: 20px; cursor: pointer;
      background: var(--bg-card-hover); border: 1px solid var(--border);
      color: var(--text-muted); transition: color 0.12s, border-color 0.12s, background 0.12s;
      white-space: nowrap;
    }
    .suggest-chip:hover { color: var(--signal); border-color: var(--accent-line); background: var(--accent-soft); }

    body {
      font-family: 'Geist', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
      background: var(--bg) !important;
      background-image: var(--aurora-fill) !important;
      background-attachment: fixed !important;
      color: var(--text);
    }
    ::selection { background: var(--signal); color: #fff; }

    /* Nav re-skin (the shared header from style.css?v=202605131800). */
    .nav-bar, .site-header { background: var(--bg-nav) !important; border-bottom: 1px solid var(--border) !important; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); }
    .nav-logo {
      color: var(--text) !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 10px !important;
      font-family: var(--ff-display) !important;
      font-weight: 400 !important;
      font-size: 1.35rem !important;
      letter-spacing: -0.01em;
      text-decoration: none !important;
    }
    .nav-logo-mark {
      width: 30px; height: 30px;
      display: inline-grid; place-items: center;
      background: var(--signal); color: #fff;
      border-radius: 6px;
      font-family: var(--ff-display);
      font-size: 18px; font-weight: 400;
      transform: rotate(-4deg);
      box-shadow: 0 6px 18px rgba(168, 85, 247, 0.30);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .nav-logo:hover .nav-logo-mark { transform: rotate(-2deg) translateY(-1px); box-shadow: 0 10px 24px rgba(168, 85, 247, 0.42); }
    .nav-logo-wordmark { font-style: italic; line-height: 1; }
    .nav-links a { color: var(--text-muted); }
    .nav-links a:hover { color: var(--text); }
    /* Canonical nav: .nav-cta is the flex wrapper around Sign in + Start
       downloading. The purple styling lives on .btn-primary inside it. */
    .nav-cta { display: inline-flex; gap: 10px; align-items: center; }

    /* ─── SWARM MODE chip ─────────────────────────────────────────
       The 4-dot swarm sigil is unique to LingCode — represents
       multiple AI agents racing the same prompt in parallel.
       Lives directly above the hero H1. */
    .swarm-chip {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 7px 16px 7px 12px;
      background: var(--bg-card);
      border: 1px solid var(--border-strong);
      border-radius: 100px;
      font-family: var(--font-mono, 'Geist Mono', monospace);
      font-size: 0.72rem;
      letter-spacing: 0.12em;
      color: var(--text-muted);
      margin: 0 auto 26px;
      box-shadow: 0 6px 22px rgba(168, 85, 247, 0.10);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .swarm-glyph { display: block; }
    .swarm-glyph .swarm-d0 { fill: var(--signal); animation: swarm-pulse-0 2.6s ease-in-out infinite; }
    .swarm-glyph .swarm-d1 { fill: #C026D3; opacity: 0.85; animation: swarm-pulse-1 2.6s ease-in-out infinite; }
    .swarm-glyph .swarm-d2 { fill: var(--hot); opacity: 0.7; animation: swarm-pulse-2 2.6s ease-in-out infinite; }
    .swarm-glyph .swarm-trail { stroke: var(--signal); opacity: 0.45; }
    @keyframes swarm-pulse-0 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1px); } }
    @keyframes swarm-pulse-1 { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }
    @keyframes swarm-pulse-2 { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.85; } }
    .swarm-label {
      font-weight: 600;
      color: var(--signal);
      text-transform: uppercase;
    }
    .swarm-sep { color: var(--border-strong); }
    .swarm-sub {
      letter-spacing: 0.02em;
      text-transform: none;
      color: var(--text-muted);
      font-weight: 400;
    }
    @media (max-width: 540px) {
      .swarm-chip { font-size: 0.65rem; padding: 6px 12px 6px 10px; gap: 8px; }
      .swarm-sep, .swarm-sub { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .swarm-glyph .swarm-d0,
      .swarm-glyph .swarm-d1,
      .swarm-glyph .swarm-d2 { animation: none !important; }
    }

    /* Send button rules now live with the rest of the prompt-row
       overrides below, where they win the cascade. See "Launch swarm
       button" further down. */

    /* Hero — give it the Instrument Serif + italic-accent treatment that
       the homepage hero uses. The H1 is i18n-driven so we can't put inline
       <em>s in the markup — we lean on the serif and a subtle aurora wash
       to do the work instead. */
    .try-hero-wrap {
      padding: 132px 24px 44px !important;
      border-bottom: 1px solid var(--border) !important;
      background: transparent !important;
    }
    .try-hero-wrap h1 {
      font-family: var(--ff-display) !important;
      font-weight: 400 !important;
      font-size: clamp(2rem, 6.5vw, 4.25rem) !important;
      letter-spacing: -0.022em !important;
      line-height: 1.02 !important;
      color: var(--text) !important;
      margin: 0 auto 20px !important;
      max-width: 24ch;
    }
    /* The H1 ships with an inline <br/>. Keep it so the second line
       lands on a fresh row at every viewport. */
    .try-hero-wrap h1 br { display: inline; }
    @media (max-width: 720px) {
      .try-hero-wrap { padding: 96px 20px 32px !important; }
      .try-hero-wrap h1 { font-size: clamp(1.875rem, 8vw, 2.75rem) !important; max-width: none; }
      /* Hero-landing styling — scoped to non-session so it doesn't bleed into
         narrow-ui session mode (was overriding the position:fixed inset:0 +
         zero-padding shell rules with margin: -16px 16px 0 + 64px bottom
         padding, producing a large empty band below the workspace at ≤720px). */
      body:not(.try-has-session) main.try-shell { margin: -16px 16px 0 !important; padding: 24px 18px 64px !important; border-radius: 14px !important; }
    }
    @media (max-width: 480px) {
      .try-hero-wrap { padding: 88px 16px 28px !important; }
      .try-hero-wrap h1 { font-size: 1.75rem !important; }
      .try-hero-wrap h1 br { display: none; }
    }
    /* The lead paragraph uses <em> for emphasis — wire it to the new accent. */
    .try-hero-wrap .lead,
    .try-hero-lede {
      color: var(--text-muted) !important;
      font-size: 1.0625rem;
      max-width: 640px;
      margin: 0 auto 14px;
      line-height: 1.55;
    }
    .try-hero-wrap .lead em,
    .try-hero-lede em {
      font-family: var(--ff-display);
      font-style: italic;
      color: var(--signal);
      font-weight: 400;
    }
    .try-hero-eyebrow {
      background: var(--bg-card) !important;
      border: 1px solid var(--border-strong) !important;
      color: var(--text-muted) !important;
      padding: 6px 14px !important;
      box-shadow: 0 6px 18px rgba(168, 85, 247, 0.06);
    }
    .try-hero-eyebrow .dot { background: var(--green) !important; box-shadow: 0 0 8px var(--green); }
    .try-hero-wrap .privacy {
      background: var(--accent-soft) !important;
      border: 1px solid var(--border-strong) !important;
      color: var(--text-muted) !important;
    }

    /* Main shell card — soft white with a purple ring + small float. */
    main.try-shell {
      background: var(--bg-card) !important;
      border: 1px solid var(--border) !important;
      border-radius: 16px !important;
      box-shadow: 0 30px 60px -28px rgba(58, 30, 120, 0.16), 0 1px 0 rgba(168, 85, 247, 0.06) inset !important;
    }
    main.try-shell::before { display: none !important; }

    /* Prompt input + Send. Send becomes the gradient primary. */
    #prompt {
      background: var(--bg) !important;
      border: 1px solid var(--border-strong) !important;
      color: var(--text) !important;
      caret-color: var(--signal);
    }
    #prompt::placeholder { color: var(--text-dim) !important; }
    #prompt:focus { border-color: var(--signal) !important; outline: none !important; box-shadow: 0 0 0 4px var(--accent-soft) !important; }
    /* ─── Launch swarm button ─────────────────────────────────────
       main.js dynamically rewrites #send.textContent (Run / Continue /
       Running…), so the swarm-launch icon lives in background-image
       instead of inline SVG — that way the icon survives every text
       swap. The disabled state is a deliberate white-with-purple-ring
       look (not a washed-out fill) so it reads as "waiting on input,"
       not "broken." */
    #send {
      /* Active: vibrant purple. Background-color sets the fill, the
         single background-image holds the swarm-launch glyph on top. */
      background-color: var(--signal) !important;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 12 L8 5 L11 12 L8 19 Z' fill='white'/%3E%3Ccircle cx='4.5' cy='12' r='1.3' fill='white' opacity='0.78'/%3E%3Ccircle cx='1.5' cy='12' r='0.85' fill='white' opacity='0.45'/%3E%3C/svg%3E") !important;
      background-repeat: no-repeat !important;
      background-position: 14px center !important;
      background-size: 18px 18px !important;
      color: #ffffff !important;
      border: 0 !important;
      border-radius: 10px !important;
      padding: 0 22px 0 42px !important;
      min-height: 44px !important;
      font-family: 'Geist', 'DM Sans', sans-serif !important;
      font-weight: 600 !important;
      font-size: 0.9rem !important;
      letter-spacing: 0.01em !important;
      box-shadow: 0 8px 24px rgba(168, 85, 247, 0.22), 0 1px 0 rgba(255, 255, 255, 0.18) inset !important;
      cursor: pointer;
      transition: transform 0.18s ease, box-shadow 0.18s ease, background-position 0.18s ease !important;
    }
    #send:hover:not(:disabled) {
      background-position: 17px center !important;
      box-shadow: 0 14px 32px rgba(168, 85, 247, 0.40), 0 1px 0 rgba(255, 255, 255, 0.20) inset !important;
      transform: translateY(-1px);
    }
    #send:active:not(:disabled) { transform: translateY(0); box-shadow: 0 6px 16px rgba(168, 85, 247, 0.30) !important; }
    #send:focus-visible { outline: none !important; box-shadow: 0 0 0 4px var(--accent-soft), 0 14px 32px rgba(168, 85, 247, 0.36) !important; }
    /* Disabled: white card with a purple ring + dimmed swarm icon.
       Reads as "armed but waiting on input" instead of "broken." */
    #send:disabled {
      background-color: var(--bg-card) !important;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 12 L8 5 L11 12 L8 19 Z' fill='%23A855F7' opacity='0.55'/%3E%3Ccircle cx='4.5' cy='12' r='1.3' fill='%23A855F7' opacity='0.40'/%3E%3Ccircle cx='1.5' cy='12' r='0.85' fill='%23A855F7' opacity='0.22'/%3E%3C/svg%3E") !important;
      color: var(--text-muted) !important;
      border: 1px solid var(--border-strong) !important;
      box-shadow: none !important;
      cursor: not-allowed;
      transform: none !important;
    }

    /* Section labels (Providers, Workspace, etc.) */
    .try-section-label { color: var(--text-muted) !important; }
    .try-section-label .hint { color: var(--text-dim) !important; }
    .try-section-toggle:hover { color: var(--signal) !important; }

    /* Example / template cards in the empty state. */
    .try-examples-grid > *,
    .try-folder,
    .try-key-row,
    .try-template-card {
      background: var(--bg-card) !important;
      border: 1px solid var(--border) !important;
      color: var(--text) !important;
    }
    .try-examples-grid > *:hover,
    .try-folder:hover,
    .try-template-card:hover {
      border-color: var(--accent-line) !important;
      background: var(--bg-card-hover) !important;
      box-shadow: 0 12px 28px rgba(168, 85, 247, 0.10);
    }

    /* Advanced disclosure */
    .try-advanced { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: 14px !important; }
    .try-advanced-summary:hover { color: var(--signal) !important; }

    /* Panes (the dark IDE-like preview surfaces) — KEEP these dark so the
       generated prototype reads like a real product. Only the chrome of
       the pane (header, model chip) picks up the new accent. */
    .try-pane { border: 1px solid var(--border) !important; border-radius: 14px !important; box-shadow: 0 22px 48px -28px rgba(58, 30, 120, 0.20); background: var(--bg-card) !important; }
    .try-pane-head { display: none !important; }
    .try-pane-head .chip,
    .try-pane-model {
      background: var(--accent-soft) !important;
      color: var(--signal) !important;
      border: 1px solid var(--border-strong) !important;
    }

    /* Tabs ribbon (transcript / preview / code switcher) */
    .try-tab[aria-selected="true"], .try-tab.active {
      background: var(--accent-soft) !important;
      color: var(--signal) !important;
      box-shadow: inset 0 -2px 0 var(--signal) !important;
    }

    /* Misc — small dark patterns that don't read well on the new bg. */
    .pro-gate-badge.locked { border-color: var(--border-strong) !important; color: var(--text-muted) !important; }
    .pro-gate-badge.locked:hover { background: var(--accent-soft) !important; color: var(--signal) !important; border-color: var(--signal) !important; }

    /* Pulse keyframe used by the eyebrow dot — keep as-is, the existing
       hero-pulse animation works for any color. */

    /* Reduced motion users keep everything still. */
    @media (prefers-reduced-motion: reduce) {
      .try-hero-eyebrow .dot { animation: none !important; }
      body { background-attachment: scroll !important; }
    }

    /* ── Visual-edit panel: Magic-Patterns-style style editor for picked
       elements in the preview iframe. Slides in from the right when the
       user ⌘/Ctrl/Alt-clicks an element. ────────────────────────────── */
    .lc-visual-edit-panel {
      position: fixed;
      top: 80px; right: 16px; bottom: 16px;
      width: 280px;
      z-index: 80;
      background: var(--bg-card, #FFFFFF);
      border: 1px solid var(--border-strong, rgba(168, 85, 247, 0.30));
      border-radius: 14px;
      box-shadow: 0 22px 60px -22px rgba(58, 30, 120, 0.30);
      font-family: 'Geist', 'DM Sans', -apple-system, sans-serif;
      color: var(--text);
      display: flex; flex-direction: column;
      overflow: hidden;
    }
    .lc-visual-edit-panel[hidden] { display: none; }
    .lc-ve-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 16px;
      background: linear-gradient(180deg, rgba(168, 85, 247, 0.08), transparent);
      border-bottom: 1px solid var(--border);
    }
    .lc-ve-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
    .lc-ve-tag {
      font-family: var(--ff-display, 'Instrument Serif', serif);
      font-size: 1.05rem; font-style: italic; line-height: 1;
      color: var(--signal, #A855F7);
    }
    .lc-ve-classes {
      font-family: 'Geist Mono', monospace;
      font-size: 0.7rem;
      color: var(--text-muted);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .lc-ve-close {
      background: transparent; border: none;
      width: 28px; height: 28px;
      font-size: 18px; line-height: 1; cursor: pointer;
      color: var(--text-muted); border-radius: 6px;
      transition: background 0.12s, color 0.12s;
    }
    .lc-ve-close:hover { background: var(--accent-soft); color: var(--signal); }
    .lc-ve-body {
      padding: 14px 16px 16px;
      overflow-y: auto; flex: 1;
      display: flex; flex-direction: column; gap: 12px;
    }
    .lc-ve-hint {
      font-size: 0.72rem; color: var(--text-muted);
      line-height: 1.45; margin: 0 0 4px;
      padding: 8px 10px;
      background: var(--accent-soft);
      border-radius: 6px;
      border: 1px solid var(--border);
    }
    .lc-ve-field {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px;
      font-size: 0.78rem;
      color: var(--text-muted);
    }
    .lc-ve-field > span { flex: 1; }
    .lc-ve-field > input[type="color"] {
      width: 38px; height: 28px;
      border: 1px solid var(--border-strong); border-radius: 6px;
      cursor: pointer; padding: 0; background: transparent;
    }
    .lc-ve-field > input[type="number"] {
      width: 70px; padding: 6px 8px;
      background: var(--bg); color: var(--text);
      border: 1px solid var(--border-strong); border-radius: 6px;
      font-family: 'Geist Mono', monospace; font-size: 0.78rem;
      text-align: right;
    }
    .lc-ve-field > input:focus {
      outline: none;
      border-color: var(--signal);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }
    .lc-ve-reset {
      margin-top: 4px;
      background: transparent;
      color: var(--text-muted);
      border: 1px dashed var(--border-strong);
      border-radius: 6px;
      padding: 8px 12px;
      font-size: 0.78rem; font-family: 'Geist', sans-serif;
      cursor: pointer;
      transition: all 0.12s;
    }
    .lc-ve-reset:hover {
      color: var(--signal); border-color: var(--signal);
      background: var(--accent-soft);
    }
    @media (max-width: 720px) {
      .lc-visual-edit-panel {
        top: auto; left: 8px; right: 8px; bottom: 8px;
        width: auto;
        max-height: 60vh;
      }
    }

    /* ── /redesign override ──────────────────────────────────────── */

    body { font-family: 'Geist', -apple-system, sans-serif; }

    /* Hero — airy layout + aurora glow (shared vocabulary with homepage) */
    .try-hero-wrap {
      position: relative;
      padding: 110px 24px 32px;
      text-align: center;
      border-bottom: 1px solid var(--border);
    }
    .try-hero-wrap::before {
      display: none;
    }
    .try-hero-wrap > * { position: relative; z-index: 1; }
    .try-hero-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 6px 16px; margin-bottom: 24px;
      border: 1px solid var(--border-strong);
      border-radius: 100px;
      font-family: var(--font-mono);
      font-size: 0.75rem; color: var(--text-muted); font-weight: 500;
      letter-spacing: 0.02em;
      background: rgba(28,28,28,0.02);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .try-hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); animation: hero-pulse 2s infinite; }
    @keyframes hero-pulse { 0%,100% { opacity: 0.45; } 50% { opacity: 1; } }
    .try-hero-wrap h1 {
      font-size: clamp(2.25rem, 5vw, 3.35rem);
      margin: 0 0 12px;
      letter-spacing: -0.025em;
      font-weight: 600;
      line-height: 1.10;
      color: var(--text);
      text-shadow: none;
    }
    .try-hero-wrap .lead { color: var(--text-muted); font-size: 1.0625rem; max-width: 680px; margin: 0 auto 12px; line-height: 1.6; }
    .try-hero-wrap .lead em { color: var(--signal); font-style: normal; font-weight: 500; }
    .try-hero-lede { color: var(--text-muted); font-size: 1.0625rem; max-width: 640px; margin: 0 auto; line-height: 1.5; }
    .try-hero-wrap .privacy { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 4px 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 999px; font-size: 0.8125rem; color: var(--text-muted); }

    /* Saved-prototypes sidebar was removed when /try moved to dashboard-by-
       default. Saved apps now live in #dash-your-apps-grid. */

    /* Loading banner shown while /try.html?continue=<id> fetches + decodes
       the saved prototype payload and hydrates a pane. Removed by the
       hydration IIFE's `finally` block on every path. */
    .try-continue-banner {
      position: fixed;
      top: 80px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 10px 16px;
      font-size: 0.85rem;
      z-index: 1000;
      box-shadow: 0 4px 12px rgba(0,0,0,0.12);
      color: var(--text);
    }
    /* Inline banner inserted at the top of a hydrated pane when the
       saved chat history was trimmed by the server's drop-oldest cap.
       Distinct from .try-continue-banner (the centered loading toast). */
    .try-continue-truncated-banner {
      padding: 8px 12px;
      margin: 8px 0;
      background: rgba(255,165,0,0.10);
      border-left: 3px solid var(--signal);
      font-size: 0.85rem;
      color: var(--text-muted);
      border-radius: 4px;
    }
    /* Pre-publish credential scanner: Cancel-by-default modal that lists
       redacted snippets of matched vendor keys. Built dynamically by
       main-leak-scan.js; sits above the page chrome at z-index 1000+. */
    .leak-scan-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.4);
      z-index: 1010;
    }
    .leak-scan-modal {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      max-width: 480px;
      width: calc(100% - 40px);
      max-height: 80vh;
      overflow-y: auto;
      background: var(--bg);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 16px 48px rgba(0,0,0,0.20);
      padding: 18px 20px;
      z-index: 1011;
      font-size: 0.9rem;
    }
    .leak-scan-modal h3 {
      margin: 0 0 8px;
      font-size: 1rem;
      font-weight: 600;
    }
    .leak-scan-modal p {
      margin: 0 0 12px;
      color: var(--text-muted);
      font-size: 0.85rem;
      line-height: 1.45;
    }
    .leak-scan-group { margin: 10px 0; }
    .leak-scan-group-label {
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--text-muted);
      margin-bottom: 4px;
    }
    .leak-scan-modal ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .leak-scan-match {
      padding: 5px 0;
      border-bottom: 1px solid rgba(0,0,0,0.06);
      font-size: 0.85rem;
    }
    .leak-scan-match:last-child { border-bottom: none; }
    .leak-scan-match code {
      background: rgba(0,0,0,0.05);
      padding: 1px 5px;
      border-radius: 3px;
      font-size: 0.82rem;
    }
    .leak-scan-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      margin-top: 16px;
    }
    .leak-scan-actions .btn {
      padding: 7px 14px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--text);
      font-size: 0.85rem;
      cursor: pointer;
    }
    .leak-scan-actions .btn:hover { background: rgba(0,0,0,0.04); }
    .leak-scan-actions .btn-warn {
      border-color: #d04848;
      color: #d04848;
    }
    .leak-scan-actions .btn-warn:hover {
      background: rgba(208,72,72,0.08);
    }
    .try-shell {
      position: relative;
      max-width: 920px;
      margin: -28px auto 0;
      padding: 36px 28px 96px;
      border-radius: 16px;
      border: 1px solid var(--border);
      background: var(--bg-card);
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .try-shell::before {
      display: none;
    }
    .try-shell > * { position: relative; z-index: 1; }
    .try-section-label { font-size: 0.78rem; color: var(--text-muted); margin: 32px 0 12px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; }
    .try-section-label .hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-dim); margin-left: 8px; }
    .try-section-toggle {
      background: transparent; border: none; cursor: pointer;
      display: flex; align-items: baseline; gap: 6px;
      padding: 0; text-align: left; width: 100%; color: inherit;
      font: inherit; letter-spacing: inherit; text-transform: inherit; font-weight: 600;
    }
    .try-section-toggle:hover { color: var(--text); }
    .try-section-toggle .caret { font-size: 0.7rem; transition: transform 0.12s; display: inline-block; }
    .try-section-toggle[aria-expanded="true"] .caret { transform: rotate(90deg); }
    /* Hide Providers + Workspace chrome (now nested inside #advanced-disclosure)
       and the example cards while a run is in flight — config isn't useful
       once execution has started, and removing it focuses the user on the
       streaming panes. Restored when the run resolves. */
    body.running #advanced-disclosure,
    body.running #try-examples-grid,
    body.running #try-templates-section,
    body.running main.try-shell > .try-prompt-row,
    body.running main.try-shell > .try-prompt-hint { display: none !important; }
    body.try-has-session:not(.embed) .site-nav { display: none !important; }
    body.try-has-session:not(.embed) footer { display: none !important; }
    /* try-scope-focus = direction gate in flight (before any pane exists).
       Apply the same full-screen chrome hiding as try-has-session so the
       canvas is truly full-viewport from the moment it's revealed. */
    body.try-scope-focus:not(.embed) .site-nav { display: none !important; }
    body.try-scope-focus:not(.embed) footer { display: none !important; }
    body:not(.try-has-session) #workspace-toolbar { display: none !important; }
    /* Tabbed solo composer: transcript + tabs carry context — hide the whole bottom bar while generating. */
    body.running.try-single-main-composer:not(.embed) main.try-shell > .try-attach-thumbs,
    body.running.try-single-main-composer:not(.embed) main.try-shell > .try-prompt-row,
    body.running.try-single-main-composer:not(.embed) main.try-shell > .try-prompt-hint {
      display: none !important;
    }
    body.try-single-main-composer.try-solo-pane-composer.try-has-session:not(.embed):not(.try-build-focus) main.try-shell > .try-attach-thumbs,
    body.try-single-main-composer.try-solo-pane-composer.try-has-session:not(.embed):not(.try-build-focus) main.try-shell > .try-prompt-row,
    body.try-single-main-composer.try-solo-pane-composer.try-has-session:not(.embed):not(.try-build-focus) main.try-shell > .try-prompt-hint {
      display: none !important;
    }
    /* Hide the bottom main prompt whenever a session is active — the per-pane
       "Ask for tweaks" follow-up is the right place to iterate. Two inputs
       at once was confusing users. */
    body.try-has-session:not(.embed) main.try-shell > .try-attach-thumbs,
    body.try-has-session:not(.embed) main.try-shell > .try-prompt-row,
    body.try-has-session:not(.embed) main.try-shell > .try-prompt-hint {
      display: none !important;
    }
    /* Belt-and-suspenders fallback: also hide when the workspace contains any
       pane, regardless of whether the JS-toggled try-has-session class fired. */
    body:not(.embed) main.try-shell:has(#workspace .try-pane) > .try-attach-thumbs,
    body:not(.embed) main.try-shell:has(#workspace .try-pane) > .try-prompt-row,
    body:not(.embed) main.try-shell:has(#workspace .try-pane) > .try-prompt-hint {
      display: none !important;
    }
    /* :has()-based full-viewport layout — kicks in whenever the workspace
       has at least one pane, even if the JS-set try-has-session class
       didn't fire. Mirrors the rules under body.try-has-session below. */
    body:not(.embed) main.try-shell:has(#workspace .try-pane) {
      margin-top: 0;
      /* Account for the 48px .app-topbar offset. This rule's :has(#workspace …)
         carries an ID, so it out-specifies the body.try-has-session rule's
         top:48/bottom:0 and its height wins — a bare 100dvh therefore over-
         constrains the fixed box (top:48 + height:100dvh → bottom 48px below the
         viewport), dragging the "Ask or reply" composer off-screen. */
      height: calc(100dvh - 48px);
      box-sizing: border-box;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding-bottom: 8px;
    }
    body:not(.embed) main.try-shell:has(#workspace .try-pane) #workspace.try-workspace {
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
    }
    body:not(.embed) main.try-shell:has(#workspace .try-pane) .try-workspace.tabbed .try-panes {
      flex: 1 1 auto;
      min-height: 0;
      height: 0;
    }
    body:not(.embed) main.try-shell:has(#workspace .try-pane) .try-workspace.tabbed .try-pane.active {
      height: 100%;
      max-height: none;
    }
    /* Hide the empty panes container on first load so it doesn't reserve
       space below the prompt. Disabled while a run is in flight so the
       brief moment between clearPanes() and the first appended pane
       doesn't flicker the layout. */
    body:not(.running) .try-panes:empty { display: none; }
    /* Tighten the shell's bottom padding when there's nothing below the
       prompt — otherwise 80px of dead space sits between the disclosure
       and the footer in the empty state. */
    body:not(.running) main.try-shell:has(.try-panes:empty) { padding-bottom: 40px; }

    /* Hide marketing hero once the user has an active workspace (Lovable-style). */
    body.try-has-session:not(.embed) .try-hero-wrap { display: none !important; }
    body.try-scope-focus:not(.embed) .try-hero-wrap { display: none !important; }
    /* "More options" disclosure (Providers + Workspace) is dashboard chrome —
       hide it in session mode. The providers-nudge CTA flips
       body.providers-revealed to re-show it on demand. */
    body.try-has-session:not(.embed):not(.providers-revealed) #advanced-disclosure { display: none; }
    body.try-scope-focus:not(.embed) #advanced-disclosure { display: none !important; }
    /* Hide templates/examples/foot while the canvas is active */
    body.try-scope-focus:not(.embed) #try-examples-grid,
    body.try-scope-focus:not(.embed) #try-templates-section,
    body.try-scope-focus:not(.embed) .try-foot,
    body.try-scope-focus:not(.embed) .try-mac-cta { display: none !important; }
    /* Hide main prompt row/hint during direction gate */
    body.try-scope-focus:not(.embed) main.try-shell > .try-attach-thumbs,
    body.try-scope-focus:not(.embed) main.try-shell > .try-prompt-row,
    body.try-scope-focus:not(.embed) main.try-shell > .try-prompt-hint { display: none !important; }
    /* Lock page to viewport and fix the shell during direction gate */
    body.try-scope-focus:not(.embed) { overflow: hidden; }
    body.try-scope-focus:not(.embed) main.try-shell {
      position: fixed;
      top: 48px;
      right: 0;
      bottom: 0;
      left: 0;
      margin: 0;
      max-width: 100%;
      width: 100%;
      padding: 0 0 env(safe-area-inset-bottom, 0px);
      box-sizing: border-box;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    /* Lock the page to viewport in session mode so nothing inside can scroll
       below the visible bottom edge. Pinning the shell with position:fixed
       guarantees its bottom = viewport bottom, regardless of body scroll
       position or stray offsets above it. */
    body.try-has-session:not(.embed) { overflow: hidden; }
    body.try-has-session:not(.embed) main.try-shell {
      position: fixed;
      top: 48px; /* sit below the app-topbar (48px height) */
      right: 0;
      bottom: 0;
      left: 0;
      margin: 0;
      max-width: 100%;
      width: 100%;
      padding: 0 0 env(safe-area-inset-bottom, 0px);
      box-sizing: border-box;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    body.try-has-session:not(.embed) #workspace.try-workspace {
      flex: unset;
      min-height: 0;
      overflow: hidden;
    }
    body.try-has-session:not(.embed) .try-workspace.tabbed .try-panes {
      flex: 1 1 auto;
      min-height: 0;
      height: 0; /* flex child needs 0 base so flex-grow does the work */
      /* Fill the workspace width. Without this the block container shrink-to-fits
         to its content (~chat + preview natural width) and the flex cross-axis
         align nudges it to the right, leaving a dead gap on the left and starving
         the 1fr preview column. width:100% pins it to the full workspace so the
         preview expands to fill the remaining space. */
      width: 100%;
    }
    body.try-has-session:not(.embed) .try-workspace.tabbed .try-pane.active {
      height: 100%;
      max-height: none;
      width: 100%;
    }
    body.try-has-session:not(.embed) .nav-bar {
      position: sticky;
      top: 0;
      z-index: 70;
      background: rgba(247,244,237,0.92);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    /* Full-width nav (logo left, link group centered, CTAs right) via CSS grid. */
    .nav-inner {
      /* Three slots: logo (left) | primary links (centered) | auth + lang (right).
         Was `1fr auto 1fr` with nav-links centered in the middle column, which
         dragged Sign in / Sign up / language picker into the middle instead of
         keeping them pinned right. Now the nav-links column stretches to fill
         the remaining width so `margin-left: auto` on the auth section can
         push it to the right edge. */
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 0;
      max-width: none;
      margin: 0;
      padding: 18px 40px;
      height: auto;
    }
    .nav-inner > .nav-logo   { grid-column: 1; justify-self: start; }
    .nav-inner > .nav-links  {
      grid-column: 2;
      justify-self: stretch;
      display: flex;
      align-items: center;
      gap: 22px;
    }
    .nav-inner > .nav-burger { grid-column: 3; justify-self: end; }
    /* Two-margin centering trick: when two flex children both have
       margin-left: auto, the free space splits equally between them. The
       result: primary nav links sit centered, while the search + auth +
       language picker hugs the right edge. (Single auto-margin would push
       the primary links flush left instead of centering them.) */
    .nav-inner > .nav-links > a:first-of-type { margin-left: auto; }
    .nav-inner > .nav-links > .nav-search { margin-left: auto; }
    @media (max-width: 720px) {
      .nav-inner { padding: 14px 20px; }
    }
    body.try-has-session:not(.embed) #try-examples-grid,
    body.try-has-session:not(.embed) #try-templates-section,
    body.try-has-session:not(.embed) .try-foot,
    body.try-has-session:not(.embed) .try-mac-cta {
      display: none !important;
    }
    /* Provider rows — bigger, with brand color accent dot, layered hover */
    .try-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
    /* Grid items default min-width:auto — without this, long flex rows paint into the next column. */
    .try-keys > .try-key-row {
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
    }
    .try-keys .try-key-row.secondary { display: none; }
    body.show-secondary-providers .try-keys .try-key-row.secondary { display: flex; }
    .try-more-providers {
      grid-column: 1 / -1;
      align-self: start;
      justify-self: start;
      background: transparent;
      color: var(--text-muted);
      border: 1px dashed rgba(28,28,28,0.15);
      border-radius: 999px;
      padding: 10px 18px;
      font-size: 0.8125rem;
      font-weight: 500;
      font-family: 'Geist', sans-serif;
      cursor: pointer;
      transition: all 0.18s ease;
      margin-top: 6px;
    }
    .try-more-providers:hover {
      border-color: rgba(28,28,28,0.4); color: var(--signal);
      background: rgba(28,28,28,0.02);
    }
    .try-key-row {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      transition: border-color 0.2s ease, background 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease;
      animation: row-in 0.4s ease-out backwards;
    }
    .try-key-row:hover {
      background: rgba(28,28,28,0.04);
      border-color: var(--border-strong);
      transform: none;
      box-shadow: none;
    }
    .try-key-row:focus-within { border-color: var(--border-strong); background: var(--bg-card-hover); box-shadow: none; }
    .try-key-row.saved { border-color: var(--border-strong); }
    .try-key-row.featured {
      background: var(--bg-card);
      border: 1px solid var(--border-strong);
      flex-wrap: wrap;
      align-items: flex-start;
      row-gap: 10px;
    }
    @keyframes row-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
    .try-key-row .toggle {
      width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-strong);
      flex-shrink: 0; cursor: pointer; transition: all 0.15s; position: relative;
    }
    .try-key-row .toggle:hover { border-color: var(--signal); }
    .try-key-row .toggle.on {
      background: #5a4a42; border-color: #5a4a42;
      box-shadow: none;
    }
    .try-key-row .toggle.on::after {
      content: ''; position: absolute; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l3 3 7-7'/%3E%3C/svg%3E");
      background-size: 14px; background-position: center; background-repeat: no-repeat;
    }
    .try-key-row .brand-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 8px currentColor; }
    .try-key-row label { flex-shrink: 0; font-weight: 600; font-size: 0.9375rem; min-width: 88px; color: var(--text); }
    .try-key-row .featured-tag { font-size: 0.6875rem; padding: 2px 8px; border-radius: 999px; background: #5a4a42; color: white; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; flex-shrink: 0; }
    .try-key-row .featured-tag-pro { background: #5a4a42; }
    /* Pro-gated row: dim the toggle, swap the badge to a clickable upgrade link. */
    .try-key-row.pro-locked .toggle { opacity: 0.4; }
    .try-key-row.pro-locked { background: var(--bg-card); border: 1px solid var(--border); }
    .pro-gate-badge { font-family: 'Geist Mono', monospace; font-size: 0.72rem; color: var(--text-muted); padding: 3px 10px; border: 1px solid var(--border); border-radius: 6px; background: transparent; transition: all 0.12s; max-width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
    .pro-gate-badge.locked:hover { background: rgba(28,28,28,0.04); border-color: var(--border-strong); color: var(--text); }
    .pro-gate-badge:not(.locked) { color: var(--text-muted); border-color: var(--border); background: transparent; cursor: default; }
    .try-key-row input { flex: 1; background: transparent; border: none; color: var(--text); font-family: 'Geist Mono', monospace; font-size: 0.8125rem; outline: none; min-width: 0; padding: 4px 0; }
    .try-key-row input::placeholder { color: var(--text-dim); }
    /* Hosted-model card: entitlement / upgrade line always fills the lower row —
       never lays out at “zero width” in the flex gutter beside the pills. */
    .try-key-row.featured .try-key-meta-slot {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      flex: 1 1 100%;
      min-width: 0;
      width: 100%;
      font-size: 0.825rem;
      color: var(--text-muted);
    }
    .try-key-row.featured > .toggle,
    .try-key-row.featured > .brand-dot,
    .try-key-row.featured > label,
    .try-key-row.featured > .featured-tag {
      align-self: center;
    }
    .try-lingmodel-status {
      font-family: 'Geist Mono', monospace;
      font-size: 0.75rem;
      min-width: 0;
      max-width: 100%;
      white-space: normal;
      overflow-wrap: anywhere;
      line-height: 1.38;
    }
    .try-key-row .icon-btn {
      flex-shrink: 0; width: 30px; height: 30px; border: none; background: transparent;
      color: var(--text-muted); border-radius: 8px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; transition: all 0.15s;
    }
    .try-key-row .icon-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); }
    .try-key-row .icon-btn.danger:hover { background: rgba(248,113,113,0.1); color: #f87171; }
    .try-key-row .saved-badge {
      font-size: 0.7rem; color: var(--signal); opacity: 0;
      transition: opacity 0.3s; pointer-events: none; font-weight: 500;
    }
    .try-key-row .saved-badge.show { opacity: 1; }

    .try-folder {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 18px 18px;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 18px;
      font-size: 0.875rem;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .try-folder.set { border-color: rgba(28,28,28,0.2); background: linear-gradient(135deg, rgba(0,208,132,0.06), transparent 60%); }
    .try-folder.drag-over { border-color: rgba(28,28,28,0.5); background: rgba(28,28,28,0.02); }
    .try-folder button.primary {
      background: #5a4a42;
      color: #ffffff;
      border: none;
      padding: 8px 16px;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 400;
      font-size: 0.875rem;
      box-shadow: rgba(0,0,0,0) 0px 0px 0px 0px,
                  rgba(0,0,0,0) 0px 0px 0px 0px,
                  rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset,
                  rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset,
                  rgba(0,0,0,0.05) 0px 1px 2px 0px;
      box-shadow: 0 8px 24px rgba(28,28,28,0.1);
      transition: transform 0.12s, box-shadow 0.15s, filter 0.15s;
    }
    .try-folder button.primary:hover {
      filter: brightness(1.06);
      transform: translateY(-1px);
      box-shadow: 0 12px 28px rgba(28,28,28,0.08);
    }
    .try-folder button.primary:active { transform: translateY(0); }
    .try-folder .folder-state { color: var(--text-muted); flex: 1; min-width: 0; }
    .try-folder .folder-state.set-display { color: var(--signal); font-family: 'Geist Mono', monospace; font-size: 0.8125rem; }

    /* Segmented switcher for input modes */
    .try-folder-tabs {
      display: inline-flex;
      padding: 4px;
      background: rgba(0, 0, 0, 0.35);
      border: 1px solid var(--border);
      border-radius: 12px;
      gap: 4px;
    }
    .try-folder-tabs button {
      background: transparent; color: var(--text-muted); border: none;
      padding: 5px 11px; border-radius: 6px; cursor: pointer;
      font-weight: 500; font-size: 0.78rem; font-family: 'Geist', sans-serif;
      transition: background 0.15s, color 0.15s;
    }
    .try-folder-tabs button:hover { color: var(--text); }
    .try-folder-tabs button.active {
      background: var(--bg); color: var(--text);
      box-shadow: 0 1px 0 rgba(0,0,0,0.25);
    }

    .try-folder-row {
      display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
    }
    .try-folder-pane { display: none; width: 100%; }
    .try-folder-pane.active { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
    .try-folder-pane .pane-hint { color: var(--text-dim); font-size: 0.78rem; }
    .try-folder-pane input[type="text"] {
      flex: 1; min-width: 220px;
      padding: 7px 11px; background: var(--bg); color: var(--text);
      border: 1px solid var(--border); border-radius: 8px;
      font-family: 'Geist Mono', monospace; font-size: 0.8125rem;
    }
    .try-folder-pane input[type="text"]:focus {
      outline: none; border-color: rgba(28,28,28,0.4);
    }
    .try-folder-pane textarea {
      width: 100%; min-height: 96px; resize: vertical;
      padding: 8px 10px; background: var(--bg); color: var(--text);
      border: 1px solid var(--border); border-radius: 8px;
      font-family: 'Geist Mono', monospace; font-size: 0.78rem; line-height: 1.45;
    }
    .try-folder-pane textarea:focus { outline: none; border-color: rgba(28,28,28,0.4); }

    .try-folder-foot {
      display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
      font-size: 0.78rem; color: var(--text-dim);
    }
    .try-folder-foot .save-btn {
      background: rgba(28,28,28,0.04); color: var(--signal);
      border: 1px solid rgba(28,28,28,0.2);
      padding: 4px 10px; border-radius: 6px; cursor: pointer;
      font-size: 0.76rem; font-weight: 500;
    }
    .try-folder-foot .save-btn:hover { background: rgba(28,28,28,0.1); }
    .try-folder-foot .clear-btn {
      background: transparent; color: var(--text-dim); border: none;
      padding: 4px 8px; cursor: pointer; font-size: 0.76rem;
    }
    .try-folder-foot .clear-btn:hover { color: var(--text); }
    .try-folder-foot .actions-label {
      color: var(--text-muted); font-size: 0.78rem; margin-right: 4px;
    }
    .try-folder-foot .auto-btn {
      background: var(--bg-card-hover); color: var(--text);
      border: 1px solid var(--border);
      padding: 5px 11px; border-radius: 7px; cursor: pointer;
      font-size: 0.78rem; font-weight: 500; font-family: 'Geist', sans-serif;
      transition: border-color 0.15s, color 0.15s, background 0.15s;
    }
    .try-folder-foot .auto-btn:hover {
      border-color: rgba(28,28,28,0.4); color: var(--signal);
      background: rgba(28,28,28,0.02);
    }
    .try-folder-foot .auto-btn:disabled {
      opacity: 0.5; cursor: not-allowed;
    }

    /* Example cards — bento starters (prompt suggestions) */
    .try-examples-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
      gap: 10px;
      margin: 16px 0 12px;
    }
    .try-examples-grid:empty { display: none; }
    .try-example-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 14px;
      min-height: 76px;
      background: var(--bg-card);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 12px;
      font-family: var(--font);
      cursor: pointer;
      text-align: left;
      transition: border-color 0.2s, background 0.2s, transform 0.2s ease, box-shadow 0.2s ease;
    }
    .try-example-card:hover {
      border-color: var(--border-strong);
      background: rgba(28,28,28,0.04);
      transform: none;
      box-shadow: none;
    }
    .try-example-card:active { transform: none; }
    .try-example-card .icon {
      font-size: 1.35rem;
      flex-shrink: 0;
      line-height: 1;
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: var(--border);
      border: 1px solid var(--border);
    }
    /* LingCode native SVG icons (from icons.js). When an icon-mapping
       exists for a chip/template glyph, the renderer adds .icon--svg
       and replaces the inner text with inline <svg>. The default
       colour follows the surrounding text colour via currentColor. */
    .try-example-card .icon--svg {
      color: var(--signal, #A855F7);
      background: var(--accent-soft, rgba(168, 85, 247, 0.10));
      border-color: var(--border-strong, rgba(168, 85, 247, 0.30));
    }
    .try-example-card .icon--svg svg {
      width: 24px;
      height: 24px;
      display: block;
    }
    /* Templates gallery: keep the gradient bg from the .accent classes,
       but render the SVG in white so it reads against the gradient. */
    .try-template-icon.icon--svg { color: #ffffff; }
    .try-template-icon.icon--svg svg { width: 26px; height: 26px; }
    /* Honor reduced-motion / forced-colors users — icons stay legible. */
    @media (forced-colors: active) {
      .try-example-card .icon--svg { color: CanvasText; background: Canvas; border-color: CanvasText; }
    }
    .try-example-card .body { display: flex; flex-direction: column; min-width: 0; }
    .try-example-card .label { font-weight: 500; font-size: 0.8125rem; line-height: 1.2; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .try-example-card .subtitle { font-size: 0.7rem; color: var(--text-muted); margin-top: 1px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .try-template-card[disabled] { opacity: 0.6; cursor: progress; }
    .try-template-card .subtitle { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
    .try-template-icon { color: #fff; background: linear-gradient(135deg, #6366f1, #d946ef) !important; border: 0 !important; }
    .try-template-icon.from-indigo-500.to-fuchsia-500 { background: linear-gradient(135deg, #6366f1, #d946ef) !important; }
    .try-template-icon.from-emerald-500.to-cyan-500 { background: linear-gradient(135deg, #10b981, #06b6d4) !important; }
    .try-template-icon.from-rose-500.to-amber-500 { background: linear-gradient(135deg, #f43f5e, #f59e0b) !important; }
    .try-template-icon.from-sky-500.to-violet-500 { background: linear-gradient(135deg, #0ea5e9, #8b5cf6) !important; }
    .try-template-icon.from-amber-500.to-pink-500 { background: linear-gradient(135deg, #f59e0b, #ec4899) !important; }
    .try-templates-section { margin: 28px 0 8px; }
    .try-templates-title { font-size: 0.95rem; font-weight: 600; color: var(--text); margin: 0 0 4px; letter-spacing: -0.005em; }
    .try-templates-blurb { font-size: 0.78rem; color: var(--text-muted); margin: 0 0 12px; line-height: 1.4; }

    /* Outer "More options" disclosure that wraps Providers + Workspace in
       the empty state. Caret rotation mirrors .try-section-toggle. */
    .try-advanced { margin-top: 4px; }
    .try-advanced-summary {
      background: transparent; border: none; cursor: pointer;
      display: flex; align-items: baseline; gap: 6px;
      padding: 0; text-align: left; width: 100%; color: var(--text-muted);
      font: inherit; font-family: 'Geist', sans-serif; font-size: 0.78rem;
      letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600;
    }
    .try-advanced-summary:hover { color: var(--text); }
    .try-advanced-summary .caret { font-size: 0.7rem; transition: transform 0.12s; display: inline-block; }
    .try-advanced[aria-expanded="true"] .try-advanced-summary .caret { transform: rotate(90deg); }
    .try-advanced-summary .label { font-weight: 600; }
    .try-advanced-summary .state {
      font-weight: 400; text-transform: none; letter-spacing: 0;
      color: var(--text-dim); margin-left: 8px;
    }
    .try-advanced-summary.warn .state { color: #fbbf24; }
    .try-advanced-body { display: none; margin-top: 12px; }
    .try-advanced[aria-expanded="true"] .try-advanced-body { display: block; }

    /* Anonymous-trial hint escalation — when remaining ≤ 2, the hint moves
       from quiet right-aligned mono to an accent-tinted left-aligned line.
       When exhausted, a sign-up link is appended. */
    .try-prompt-hint.is-low { text-align: left; color: var(--signal); }
    .try-prompt-hint.is-exhausted { text-align: left; color: #f87171; }
    .try-prompt-hint .signup-link {
      color: var(--signal); text-decoration: none;
      font-weight: 500; margin-left: 6px;
    }
    .try-prompt-hint .signup-link:hover { text-decoration: underline; }
    .try-stack-row { gap: 6px; }
    .try-stack-chip.active {
      border-color: rgba(28,28,28,0.4);
      color: var(--signal);
      background: rgba(28,28,28,0.04);
      font-weight: 600;
    }

    /* Prompt row — the page's primary CTA, sized to look like one. */
    .try-prompt-row { display: flex; gap: 12px; }
    /* Inner wrapper for textarea + floating attach button. */
    .try-prompt-inner {
      position: relative;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    /* Wrapper is layout-invisible on desktop — children keep their absolute positions.
       Mobile @media block below switches it to a real flex row under the textarea. */
    .try-prompt-actions { display: contents; }
    /* Attach (📎) button — floats at bottom-left inside the textarea. */
    .try-attach-btn {
      position: absolute;
      bottom: 10px;
      left: 12px;
      width: 28px;
      height: 28px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      border-radius: 6px;
      background: transparent;
      color: var(--text-muted);
      font-size: 1rem;
      cursor: pointer;
      transition: color 0.15s;
      line-height: 1;
      z-index: 1;
    }
    .try-attach-btn:hover { color: var(--text); }
    .try-figma-btn {
      position: absolute;
      bottom: 10px;
      left: 50px;  /* 12px + 28px + 10px gap = right of attachBtn */
      width: 28px;
      height: 28px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      border-radius: 6px;
      background: transparent;
      color: var(--text-muted);
      font-size: 0.85rem;
      cursor: pointer;
      transition: color 0.15s;
      line-height: 1;
      z-index: 1;
    }
    .try-figma-btn:hover { color: var(--text); }
    .try-mic-btn {
      position: absolute;
      bottom: 10px;
      left: 84px;
      width: 28px;
      height: 28px;
      border-radius: 6px;
      border: none;
      background: transparent;
      cursor: pointer;
      font-size: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.55;
      transition: opacity 0.15s;
      padding: 0;
      z-index: 2;
    }
    .try-mic-btn:hover { opacity: 1; }
    .try-mic-btn.try-mic-listening {
      opacity: 1;
      animation: mic-pulse 1s ease-in-out infinite;
    }
    @keyframes mic-pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(248,113,113,0.5); }
      50%       { box-shadow: 0 0 0 6px rgba(248,113,113,0); }
    }
    .try-mic-btn.try-mic-error {
      animation: mic-error-flash 0.3s ease-in-out 3;
    }
    @keyframes mic-error-flash {
      0%, 100% { opacity: 0.55; }
      50%       { opacity: 1; filter: hue-rotate(180deg); }
    }
    .try-mic-lang {
      position: absolute;
      bottom: 10px;
      left: 116px;
      height: 28px;
      font-size: 0.7rem;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      padding: 0 4px;
      z-index: 2;
      max-width: 42px;
      appearance: none;
      text-align: center;
    }
    .try-mic-lang:hover { color: var(--text); border-color: var(--border-strong); }
    .figma-import-popover { width: 320px; }
    .figma-import-popover input[type=password] { font-family: monospace; }
    .projects-panel {
      position: fixed; top: 0; right: 0; bottom: 0; width: 280px; max-width: 90vw;
      background: var(--bg-card); border-left: 1px solid var(--border);
      display: flex; flex-direction: column; z-index: 500;
      box-shadow: -4px 0 24px rgba(0,0,0,0.18);
    }
    .projects-panel[hidden] { display: none; }
    .projects-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 16px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0;
    }
    .projects-title { font-size: 0.9rem; font-weight: 600; color: var(--text); }
    .projects-close-btn {
      background: none; border: none; cursor: pointer;
      color: var(--text-muted); font-size: 1rem; padding: 2px 6px; border-radius: 4px;
    }
    .projects-close-btn:hover { background: var(--bg-card-hover); color: var(--text); }
    .projects-save-section {
      padding: 12px 14px; border-bottom: 1px solid var(--border);
      display: flex; flex-direction: column; gap: 8px; flex-shrink: 0;
    }
    .projects-name-input {
      width: 100%; box-sizing: border-box; padding: 7px 10px; border-radius: 7px;
      border: 1px solid var(--border); background: var(--bg);
      color: var(--text); font-size: 0.83rem; font-family: inherit; outline: none;
    }
    .projects-name-input:focus { border-color: var(--border-strong); }
    .projects-save-btn { width: 100%; }
    .projects-save-status { margin: 0; font-size: 0.75rem; color: var(--text-muted); min-height: 1em; }
    .projects-list-header {
      padding: 10px 14px 6px; font-size: 0.72rem; font-weight: 600;
      color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0;
    }
    .projects-list { flex: 1; overflow-y: auto; padding: 0 0 16px; }
    .projects-empty { padding: 16px 14px; font-size: 0.83rem; color: var(--text-muted); margin: 0; }
    .project-item {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 14px; border-bottom: 1px solid var(--border);
    }
    .project-item:hover { background: var(--bg-card-hover); }
    .project-item-info { flex: 1; min-width: 0; margin-right: 8px; }
    .project-item-name {
      font-size: 0.83rem; color: var(--text); font-weight: 500;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .project-item-date { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
    .project-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
    .project-load-btn {
      padding: 4px 10px; border-radius: 5px; cursor: pointer; font-size: 0.78rem;
      border: 1px solid var(--border); background: none; color: var(--text); font-family: inherit;
    }
    .project-load-btn:hover { border-color: var(--signal); color: var(--signal); }
    .project-delete-btn {
      padding: 4px 8px; border-radius: 5px; cursor: pointer; font-size: 0.78rem;
      border: 1px solid transparent; background: none; color: var(--text-muted); font-family: inherit;
    }
    .project-delete-btn:hover { background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.3); color: #f87171; }
    .projects-notes-input {
      width: 100%;
      box-sizing: border-box;
      padding: 6px 10px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--bg);
      color: var(--text);
      font-size: 0.8rem;
      resize: vertical;
      font-family: inherit;
      margin-top: 4px;
    }
    .projects-notes-input:focus { outline: none; border-color: var(--accent); }
    .projects-search-input {
      margin: 4px 12px 0;
      padding: 5px 10px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--bg);
      color: var(--text);
      font-size: 0.8rem;
      width: calc(100% - 24px);
      box-sizing: border-box;
    }
    .projects-search-input:focus { outline: none; border-color: var(--accent); }
    .projects-list-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 14px;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--text-muted);
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .projects-sort-select {
      font-size: 0.7rem;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      padding: 2px 4px;
    }
    .project-preview-btn {
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 0.75rem;
      padding: 2px 6px;
      transition: background 0.1s;
    }
    .project-preview-btn:hover { background: var(--bg-card-hover); color: var(--text); }
    .project-item-notes {
      font-size: 0.7rem;
      color: var(--text-muted);
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 160px;
    }
    .context-trim-notice {
      display: flex; align-items: center; gap: 6px;
      padding: 5px 14px; margin: 2px 0;
      font-size: 0.72rem; color: var(--text-muted);
      border-top: 1px dashed var(--border);
      border-bottom: 1px dashed var(--border);
      background: rgba(248,113,113,0.04);
      user-select: none;
    }
    /* Drag-onto-prompt highlight ring. */
    .try-prompt-row.try-attach-drag textarea {
      border-color: var(--signal) !important;
      box-shadow: 0 0 0 4px rgba(28,28,28,0.04);
    }
    /* Thumbnail strip ABOVE the prompt row. Hidden when no attachments. */
    .try-attach-thumbs {
      display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px;
      padding: 8px 10px; background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 12px;
    }
    .try-attach-thumb {
      position: relative; width: 64px; height: 78px;
      border-radius: 8px; overflow: hidden; background: #fff;
      border: 1px solid var(--border);
      display: flex; flex-direction: column;
    }
    .try-attach-thumb img { width: 100%; height: 64px; object-fit: cover; display: block; }
    .try-attach-thumb-cap {
      flex: 1; min-height: 14px; padding: 2px 4px; box-sizing: border-box;
      font-size: 0.62rem; line-height: 1; color: var(--text-muted);
      font-family: 'Geist Mono', monospace; text-align: center;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      background: rgba(0,0,0,0.04);
    }
    .try-attach-x {
      position: absolute; top: 2px; right: 2px;
      width: 18px; height: 18px; line-height: 16px; font-size: 14px;
      border: 0; border-radius: 50%;
      background: rgba(0,0,0,0.65); color: #fff; cursor: pointer;
      padding: 0; display: flex; align-items: center; justify-content: center;
    }
    .try-attach-x:hover { background: #f87171; }
    /* Chat-turn thumbnails (one row, smaller than the input strip). */
    .turn-user-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
    .turn-user-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); background: #fff; }
    .turn-user-novision { font-size: 0.72rem; color: #fbbf24; font-family: 'Geist Mono', monospace; padding: 2px 6px; background: rgba(251,191,36,0.1); border-radius: 4px; margin-right: 4px; }
    .try-prompt-row textarea {
      flex: 1;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      /* padding-bottom reserves clear space below the last line of text so
         the absolutely-positioned 📎/✦/🎤 icons (bottom:10px, h:28px) sit
         on a transparent strip instead of overlapping wrapped text.
         Icons end at ~38px from textarea bottom; pad to 56px for a 18px buffer. */
      padding: 16px 20px 56px 20px;
      color: var(--text);
      font-family: var(--font);
      font-size: 1rem;
      line-height: 1.5;
      min-height: 120px;
      resize: vertical;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
      box-shadow: none;
    }
    /* Belt-and-braces: any dynamically-created <input type="file"> inside
       the prompt row stays invisible regardless of inline styles. Hidden
       file inputs already use display:none, but Safari has historically
       rendered briefly during click-triggered file dialogs in some
       locales (visible "选择文件" / "Choose File" chrome). */
    .try-prompt-row input[type="file"],
    .try-prompt-inner input[type="file"] {
      display: none !important;
    }
    .try-prompt-row textarea::placeholder { color: var(--text-dim); }
    .try-prompt-hint {
      margin: 6px 4px 0; font-size: 0.78rem; color: var(--text-dim);
      font-family: 'Geist Mono', monospace; letter-spacing: 0.02em;
      text-align: right;
    }
    /* Quality badges — inline in the cost row, one per check (parse / runtime). */
    .pane-quality-badge {
      display: inline-flex; align-items: center; gap: 4px;
      margin-left: 10px; padding: 2px 8px;
      border-radius: 999px; font-size: 0.7rem; font-weight: 600;
      font-family: 'Geist Mono', monospace; letter-spacing: 0.02em;
      border: 1px solid var(--border);
      cursor: default;
    }
    .pane-quality-badge.ok   { color: #4ade80; border-color: rgba(74,222,128,0.35); background: rgba(74,222,128,0.08); }
    .pane-quality-badge.warn { color: #fbbf24; border-color: rgba(251,191,36,0.35); background: rgba(251,191,36,0.08); }
    .pane-quality-badge.fail { color: #f87171; border-color: rgba(248,113,113,0.35); background: rgba(248,113,113,0.08); }
    .pane-continue-btn {
      display: inline-flex; align-items: center; gap: 4px;
      margin-left: 8px; padding: 2px 10px;
      border-radius: 999px; font-size: 0.7rem; font-weight: 600;
      font-family: 'Geist Mono', monospace; letter-spacing: 0.02em;
      background: rgba(28,28,28,0.04); color: var(--signal);
      border: 1px solid rgba(28,28,28,0.2); cursor: pointer;
      transition: background 0.12s, transform 0.1s;
    }
    .pane-continue-btn:hover { background: rgba(28,28,28,0.1); transform: translateY(-1px); }
    .pane-continue-btn:active { transform: translateY(0); }
    /* Rubric panel — sits between the panes grid and the verdict card. */
    .try-rubric-panel { margin-top: 24px; padding: 16px 18px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; animation: row-in 0.4s ease-out; }
    .try-rubric-panel .rubric-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
    .try-rubric-panel .rubric-title { font-weight: 700; font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; }
    .try-rubric-panel .rubric-mode-tabs { display: inline-flex; gap: 0; margin-left: auto; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
    .try-rubric-panel .rubric-mode-tab { background: transparent; border: none; color: var(--text-muted); padding: 4px 12px; border-radius: 6px; cursor: pointer; font: 500 0.8125rem 'Geist', sans-serif; transition: all 0.12s; }
    .try-rubric-panel .rubric-mode-tab:hover { color: var(--text); }
    .try-rubric-panel .rubric-mode-tab.active { background: rgba(28,28,28,0.04); color: var(--signal); }
    .try-rubric-panel .rubric-body { padding: 4px 0 0; }
    .try-rubric-panel .rubric-intro { color: var(--text-muted); font-size: 0.85rem; margin: 0 0 10px; }
    .try-rubric-panel .rubric-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
    .try-rubric-panel .rubric-chip { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; font: 500 0.8125rem 'Geist', sans-serif; cursor: pointer; transition: all 0.15s; }
    .try-rubric-panel .rubric-chip:hover { border-color: rgba(28,28,28,0.4); color: var(--signal); }
    .try-rubric-panel .rubric-chip.active { background: rgba(28,28,28,0.04); color: var(--signal); border-color: rgba(28,28,28,0.4); font-weight: 600; }
    .try-rubric-panel .rubric-custom { display: flex; flex-direction: column; gap: 8px; }
    .try-rubric-panel .rubric-custom-label { font-size: 0.78rem; color: var(--text-dim); }
    .try-rubric-panel .rubric-custom-input { width: 100%; box-sizing: border-box; resize: vertical; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; color: var(--text); font: 0.875rem 'Geist', sans-serif; line-height: 1.5; outline: none; }
    .try-rubric-panel .rubric-custom-input:focus { border-color: var(--signal); }
    .try-rubric-panel .rubric-criteria-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
    .try-rubric-panel .rubric-criterion { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--bg); border-radius: 8px; border: 1px solid var(--border); }
    .try-rubric-panel .rubric-criterion .crit-name { flex: 1; background: transparent; border: none; color: var(--text); font: 0.875rem 'Geist', sans-serif; outline: none; }
    .try-rubric-panel .rubric-criterion .crit-weight { width: 56px; background: rgba(0,208,132,0.10); color: var(--signal); border: 1px solid rgba(28,28,28,0.2); border-radius: 6px; padding: 4px 8px; font: 600 0.875rem 'Geist Mono', monospace; text-align: right; }
    .try-rubric-panel .rubric-criterion .crit-pct { color: var(--text-dim); font-size: 0.8rem; }
    .try-rubric-panel .rubric-criterion .crit-del { background: transparent; border: none; color: var(--text-dim); width: 24px; height: 24px; border-radius: 6px; cursor: pointer; font-size: 16px; line-height: 1; }
    .try-rubric-panel .rubric-criterion .crit-del:hover { background: rgba(248,113,113,0.1); color: #f87171; }
    .try-rubric-panel .rubric-criteria-total { font-size: 0.75rem; color: var(--text-dim); padding: 4px 10px; font-family: 'Geist Mono', monospace; }
    .try-rubric-panel .rubric-criteria-total.warn { color: #fbbf24; }
    .try-rubric-panel .rubric-code-input { width: 100%; box-sizing: border-box; resize: vertical; background: #ffffff; color: #1c1c1c; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; font: 0.8125rem 'Geist Mono', monospace; line-height: 1.55; outline: none; tab-size: 2; }
    .try-rubric-panel .rubric-code-input:focus { border-color: var(--signal); }
    .try-rubric-panel .rubric-actions { display: flex; gap: 8px; margin-top: 10px; justify-content: flex-end; }
    .try-rubric-panel .rubric-add-crit, .try-rubric-panel .rubric-reset-code { background: transparent; color: var(--text-muted); border: 1px solid var(--border); border-radius: 8px; padding: 6px 14px; cursor: pointer; font: 500 0.8125rem 'Geist', sans-serif; }
    .try-rubric-panel .rubric-add-crit:hover, .try-rubric-panel .rubric-reset-code:hover { color: var(--text); border-color: var(--border-strong); }
    .try-rubric-panel .rubric-apply { background: var(--signal); color: white; border: none; border-radius: 8px; padding: 6px 16px; cursor: pointer; font: 600 0.8125rem 'Geist', sans-serif; }
    .try-rubric-panel .rubric-apply:hover { filter: brightness(1.1); }

    /* Verdict card — sits below the panes grid once the LLM judge replies. */
    .try-verdict-card {
      margin-top: 24px; padding: 20px 22px;
      background: var(--bg-card);
      border: 1px solid var(--border-strong); border-radius: 12px;
      animation: row-in 0.4s ease-out;
    }
    .try-verdict-card .verdict-head {
      display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
    }
    .try-verdict-card .verdict-icon { font-size: 1.4rem; line-height: 1; }
    .try-verdict-card .verdict-title {
      font-weight: 600; font-size: 1rem; color: var(--text);
    }
    .try-verdict-card .verdict-status {
      margin-left: auto; font-size: 0.78rem; color: var(--text-muted);
      font-family: 'Geist Mono', monospace;
    }
    .try-verdict-card .verdict-winner {
      display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
      margin-bottom: 14px; padding: 12px 14px;
      background: rgba(28,28,28,0.04); border-radius: 8px;
      border: 1px solid var(--border);
    }
    .try-verdict-card .winner-label {
      font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
      color: var(--text);
    }
    .try-verdict-card .winner-name {
      font-weight: 600; font-size: 1rem; color: var(--text);
    }
    .try-verdict-card .winner-reason {
      flex: 1 1 100%; color: var(--text-muted); font-size: 0.875rem; line-height: 1.5; margin-top: 4px;
    }
    .try-verdict-card .verdict-rationale {
      display: flex; flex-direction: column; gap: 8px;
    }
    .try-verdict-card .verdict-row {
      display: flex; align-items: baseline; gap: 12px;
      padding: 10px 12px; background: transparent;
      border-radius: 0px; border: none;
      border-bottom: 1px solid var(--border);
    }
    .try-verdict-card .verdict-row:last-child {
      border-bottom: none;
    }
    .try-verdict-card .verdict-row .name { font-weight: 500; font-size: 0.9rem; min-width: 110px; color: var(--text); }
    .try-verdict-card .verdict-row .score {
      font-family: 'Geist Mono', monospace; font-size: 0.8rem; font-weight: 600;
      padding: 2px 8px; border-radius: 4px;
      background: rgba(28,28,28,0.04); color: var(--text);
    }
    .try-verdict-card .verdict-row .note { color: var(--text-muted); font-size: 0.875rem; line-height: 1.5; flex: 1; }
    .try-verdict-card.failed { border-color: var(--border); background: var(--bg-card); }
    .try-verdict-card.failed .verdict-status { color: var(--text-dim); }

    /* Database Schema Card — Supabase SQL schema sidecar. */
    .try-db-schema-card {
      margin-top: 24px; padding: 20px 22px;
      background: var(--bg-card);
      border: 1px solid var(--border-strong); border-radius: 12px;
      animation: row-in 0.4s ease-out;
    }
    .try-db-schema-card .db-schema-head {
      display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
    }
    .try-db-schema-card .db-schema-icon { font-size: 1.4rem; line-height: 1; }
    .try-db-schema-card .db-schema-title {
      font-weight: 600; font-size: 1rem; color: var(--text);
    }
    .try-db-schema-card .db-schema-status {
      margin-left: auto; font-size: 0.78rem; color: var(--text-muted);
      font-family: 'Geist Mono', monospace;
    }
    .try-db-schema-card .db-schema-actions {
      margin-left: auto; display: flex; gap: 8px;
    }
    .try-db-schema-card .db-schema-actions button {
      background: rgba(28,28,28,0.06); border: 1px solid var(--border);
      padding: 6px 12px; border-radius: 6px; cursor: pointer;
      font-size: 0.8rem; font-weight: 500; color: var(--text);
      transition: all 0.15s ease; font-family: 'Geist', sans-serif;
    }
    .try-db-schema-card .db-schema-actions button:hover {
      background: rgba(28,28,28,0.1); border-color: var(--border-strong);
    }
    .try-db-schema-card .db-schema-pre {
      background: rgba(28,28,28,0.02); border: 1px solid var(--border);
      border-radius: 8px; padding: 16px; overflow-x: auto;
      font-family: 'Geist Mono', monospace; font-size: 0.8rem;
      line-height: 1.6; color: var(--text); margin: 0;
      max-height: 400px; overflow-y: auto;
    }
    .try-db-schema-card .db-schema-pre code {
      color: inherit; font-family: inherit; font-size: inherit;
    }

    /* Deploy button styling */
    .pane-deploy-btn {
      background: transparent; border: none; cursor: pointer;
      padding: 6px 8px; border-radius: 4px;
      color: var(--text-muted); transition: all 0.15s ease;
      display: flex; align-items: center; justify-content: center;
      width: 22px; height: 22px;
    }
    .pane-deploy-btn:not(:disabled):hover {
      background: rgba(28,28,28,0.06);
      color: var(--text);
    }
    .pane-deploy-btn:disabled {
      opacity: 0.4; cursor: not-allowed;
    }

    /* Swarm Build mode UI */
    .try-swarm-toggle {
      display: inline-flex; align-items: center; gap: 6px;
    }
    .try-swarm-stage-bar {
      display: flex; gap: 8px; margin-bottom: 12px;
    }
    .swarm-stage {
      background: rgba(28,28,28,0.04); border: 2px solid var(--border);
      padding: 8px 14px; border-radius: 8px; cursor: default;
      font-size: 0.85rem; font-weight: 600; color: var(--text-muted);
      font-family: 'Geist', sans-serif; transition: all 0.3s ease;
    }
    .swarm-stage:disabled {
      opacity: 0.4;
    }
    .swarm-stage.running {
      background: linear-gradient(135deg, rgba(0,208,132,0.25), rgba(0,208,132,0.10));
      border-color: rgba(0,208,132,0.8);
      color: #00d084; font-weight: 700;
      box-shadow: 0 0 12px rgba(0,208,132,0.3);
      animation: pulse-stage 0.8s ease-in-out infinite;
    }
    .swarm-stage.done {
      background: rgba(0,208,132,0.15); border-color: rgba(0,208,132,0.5);
      color: #00d084; font-weight: 600;
    }
    .swarm-stage.error {
      background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.5);
      color: #ef4444;
    }
    @keyframes pulse-stage {
      0%, 100% { box-shadow: 0 0 12px rgba(0,208,132,0.3), inset 0 0 12px rgba(0,208,132,0.1); }
      50% { box-shadow: 0 0 20px rgba(0,208,132,0.6), inset 0 0 20px rgba(0,208,132,0.2); }
    }

    /* Swarm stage progress animation inside preview pane */
    .try-pane-preview.swarm-building .pp-empty    { display: none !important; }
    .try-pane-preview.swarm-building .pp-skeleton  { display: none !important; }
    .try-pane-preview.swarm-building .pp-swarm     { display: flex; }

    .pp-swarm {
      display: none; flex: 1; align-items: center; justify-content: center; padding: 32px;
    }
    .pp-swarm-inner {
      display: flex; flex-direction: column; align-items: center; gap: 28px; max-width: 360px; text-align: center;
    }
    .pp-swarm-title {
      font-size: 1rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em;
    }
    .pp-swarm-stages {
      display: flex; align-items: center; gap: 12px;
    }
    .pp-stage {
      display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 72px;
    }
    .pp-stage-orb {
      width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--border);
      background: rgba(128,128,128,0.06); display: flex; align-items: center; justify-content: center;
      font-size: 18px; transition: all 0.4s ease;
    }
    .pp-stage.pp-stage-running .pp-stage-orb {
      border-color: rgba(0,208,132,0.8); background: rgba(0,208,132,0.12);
      box-shadow: 0 0 16px rgba(0,208,132,0.35);
      animation: swarm-orb-pulse 1.2s ease-in-out infinite;
    }
    .pp-stage.pp-stage-done .pp-stage-orb {
      border-color: rgba(0,208,132,0.6); background: rgba(0,208,132,0.15);
    }
    .pp-stage-name {
      font-size: 0.72rem; font-weight: 600; color: var(--text-muted); transition: color 0.4s ease;
    }
    .pp-stage-desc {
      font-size: 0.62rem; color: var(--text-muted); opacity: 0.55;
    }
    .pp-stage.pp-stage-running .pp-stage-name,
    .pp-stage.pp-stage-done    .pp-stage-name { color: #00d084; }
    .pp-stage-connector {
      width: 28px; height: 2px; background: var(--border); margin-top: -24px; flex-shrink: 0; transition: background 0.4s ease;
    }
    .pp-swarm-msg {
      font-size: 0.78rem; color: var(--text-muted); min-height: 1.2em;
    }
    @keyframes swarm-orb-pulse {
      0%, 100% { box-shadow: 0 0 14px rgba(0,208,132,0.3); }
      50%       { box-shadow: 0 0 26px rgba(0,208,132,0.65), 0 0 0 5px rgba(0,208,132,0.08); }
    }

    /* Demo-mode banner — sits above the prompt row when /try.html?demo=1. */
    .try-demo-banner {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 14px; margin: 0 0 10px;
      background: linear-gradient(135deg, rgba(0,208,132,0.10), rgba(28,28,28,0.02));
      border: 1px solid rgba(28,28,28,0.2); border-radius: 12px;
      font-size: 0.875rem; color: var(--text);
    }
    .try-demo-banner .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); animation: hero-pulse 2s infinite; flex-shrink: 0; }
    .try-demo-banner a { margin-left: auto; color: var(--signal); text-decoration: none; font-weight: 600; }
    .try-demo-banner a:hover { text-decoration: underline; }
    /* Breathing glow when the textarea is empty and unfocused, to flag it
       as the next thing to interact with. Stops the moment user focuses or
       types — no animation while the user is reading their own text. */
    .try-prompt-row textarea:placeholder-shown:not(:focus) {
      border-color: rgba(28,28,28,0.2);
      animation: prompt-breathe 2.6s ease-in-out infinite;
    }
    @keyframes prompt-breathe {
      0%, 100% { box-shadow: none; border-color: var(--border); }
      50%      { box-shadow: rgba(0,0,0,0.1) 0px 4px 12px; border-color: var(--border-strong); }
    }
    /* Respect the system reduced-motion preference. */
    @media (prefers-reduced-motion: reduce) {
      .try-prompt-row textarea:placeholder-shown:not(:focus) { animation: none; border-color: var(--border-strong); }
      .try-example-card:hover,
      .try-key-row:hover,
      .try-pane:hover {
        transform: none;
      }
    }
    .try-prompt-row textarea:focus {
      border-color: var(--border-strong);
      box-shadow: rgba(0,0,0,0.1) 0px 4px 12px;
      background: var(--bg-card);
      animation: none;
    }
    .try-prompt-row button:not(.try-attach-btn):not(.try-figma-btn):not(.try-mic-btn) {
      background: #5a4a42;
      color: #ffffff;
      border: none;
      padding: 8px 16px;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 400;
      font-size: 1rem;
      flex-shrink: 0;
      min-width: 100px;
      min-height: auto;
      box-shadow:
        rgba(0,0,0,0) 0px 0px 0px 0px,
        rgba(0,0,0,0) 0px 0px 0px 0px,
        rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset,
        rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset,
        rgba(0,0,0,0.05) 0px 1px 2px 0px;
      transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.15s ease;
    }
    .try-prompt-row button:not(.try-attach-btn):not(.try-figma-btn):not(.try-mic-btn):hover:not(:disabled) {
      transform: none;
      box-shadow:
        rgba(0,0,0,0) 0px 0px 0px 0px,
        rgba(0,0,0,0) 0px 0px 0px 0px,
        rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset,
        rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset,
        rgba(0,0,0,0.05) 0px 1px 2px 0px;
      opacity: 0.9;
    }
    .try-prompt-row button:disabled { background: var(--bg-card); color: var(--text-dim); cursor: not-allowed; box-shadow: none; }

    /* Pane area — empty state + result panes */
    .try-empty {
      margin-top: 28px;
      padding: 64px 28px;
      text-align: center;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 20px;
      color: var(--text-muted);
      box-shadow: inset 0 1px 0 rgba(28,28,28,0.02);
    }
    .try-empty .icon { font-size: 36px; margin-bottom: 12px; opacity: 0.5; }
    .try-empty p { margin: 4px 0; }
    .try-empty .hint { color: var(--text-dim); font-size: 0.8125rem; }

    .try-panes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 16px; }

    /* ─── Workspace (Lovable-style tabbed view) ────────────────────────────
       Tab strip on top; active provider = preview canvas left + chat sidebar right.
       All providers race in parallel; tabs switch focus.
       Compare-mode (.try-workspace:not(.tabbed)) reverts to the grid. */
    .try-workspace {
      margin-top: 18px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 10px;
      border-radius: 20px;
      border: 1px solid var(--border);
      background: transparent;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    }
    .try-workspace[hidden] { display: none; }
    /* Model tabs + Focus / Compare on one row — Compare stays beside the strip. */
    .try-workspace-tabbar {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: nowrap;
      margin: -2px -2px 0;
      min-width: 0;
    }
    .try-workspace-tabbar .try-workspace-tabs {
      flex: 1 1 auto;
      min-width: 0;
      margin: 0;
    }
    .try-workspace-tabbar .try-workspace-toolbar {
      flex: 0 1 auto;
      min-width: 0;
      flex-wrap: nowrap;
      justify-content: flex-end;
      padding: 0;
      max-width: 100%;
      overflow-x: auto;
      scrollbar-width: thin;
    }
    /* In focus mode the fixed-position × close button (40px) sits at top-right
       and overlaps the last toolbar button. Reserve space so they don't collide. */
    body.try-build-focus:not(.embed) .try-workspace-tabbar .try-workspace-toolbar {
      padding-right: 52px;
    }

    .try-workspace-tabs {
      display: flex;
      gap: 6px;
      flex-wrap: nowrap;
      overflow-x: auto;
      padding: 8px;
      border-bottom: none;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      scrollbar-width: thin;
    }
    .try-tab {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--bg-card);
      color: var(--text-muted);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 10px 18px;
      font-family: var(--font);
      font-size: 0.875rem;
      font-weight: 400;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.15s ease;
      position: relative;
      top: 0;
    }
    .try-tab:hover { color: var(--text); background: rgba(28,28,28,0.04); }
    .try-tab.active {
      color: var(--text);
      background: rgba(28,28,28,0.04);
      border-color: var(--border-strong);
      box-shadow: none;
    }
    .try-tab .tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); flex-shrink: 0; transition: background 0.2s; }
    .try-tab.is-running .tab-dot { background: var(--text); animation: tab-pulse 1.4s ease-in-out infinite; }
    .try-tab.is-done .tab-dot { background: var(--text); }
    .try-tab.is-error .tab-dot { background: var(--red); }
    .try-tab .tab-cost { font-family: 'Geist Mono', monospace; font-size: 0.72rem; color: var(--text-dim); }
    @keyframes tab-pulse { 0%,100% { box-shadow: none; } 50% { box-shadow: rgba(0,0,0,0.1) 0px 4px 12px; } }

    .try-workspace-toolbar {
      display: flex; justify-content: flex-end;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      padding: 0 0 4px;
    }
    body.try-build-focus:not(.embed) #workspace-focus-toggle {
      display: none !important;
    }
    .try-focus-close {
      box-sizing: border-box;
      position: fixed;
      z-index: 85;
      top: max(10px, env(safe-area-inset-top, 0px));
      right: max(12px, env(safe-area-inset-right, 0px));
      width: 36px;
      height: 36px;
      padding: 0;
      margin: 0;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.85);
      color: var(--text-muted);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      line-height: 0;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
      transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    }
    /* Topbar Focus button now handles enter/exit, so the floating × is
       redundant and overlaps the Deploy button. */
    body.try-build-focus:not(.embed) .try-focus-close {
      display: none;
    }
    .try-focus-close:hover {
      color: var(--text);
      border-color: var(--border-strong);
      background: rgba(255, 255, 255, 0.96);
    }
    .try-focus-close:active { transform: scale(0.96); }
    .try-workspace-mode {
      background: transparent; color: var(--text-muted);
      border: 1px solid var(--border); border-radius: 8px;
      padding: 5px 12px; font-family: 'Geist', sans-serif;
      font-size: 0.78rem; font-weight: 500; cursor: pointer;
      transition: all 0.12s;
    }
    .try-workspace-mode:hover { color: var(--text); border-color: var(--border-strong); }
    .try-workspace-mode.active { color: var(--signal); border-color: rgba(28,28,28,0.4); background: rgba(0,208,132,0.06); }

    /* ─── Tools dropdown ──────────────────────────────────────────────
     * Wraps the trigger button + the menu so the menu can position
     * absolutely relative to the button. The menu is a vertical stack of
     * the existing .try-workspace-mode buttons; we restyle them inside
     * the menu to look like full-width rows instead of bordered chips. */
    .try-workspace-tools-wrap { position: relative; display: inline-block; }
    .try-workspace-tools-menu {
      /* position: fixed so the menu escapes the toolbar's overflow-x:auto
         clip (which would otherwise hide it below the toolbar edge).
         Top + left are set by JS from the trigger's getBoundingClientRect. */
      position: fixed;
      min-width: 200px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.10);
      padding: 6px;
      z-index: 50;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .try-workspace-tools-menu[hidden] { display: none; }
    /* Inside the menu, buttons render as flat full-width rows. The active
       border/background still applies (#supabase-btn.active etc.) so the
       opened menu reveals which integrations are configured. */
    .try-workspace-tools-menu .try-workspace-mode {
      border-color: transparent;
      background: transparent;
      text-align: left;
      padding: 7px 10px;
      border-radius: 6px;
      font-size: 0.82rem;
      color: var(--text);
    }
    .try-workspace-tools-menu .try-workspace-mode:hover {
      background: rgba(0,0,0,0.04);
      border-color: transparent;
    }
    .try-workspace-tools-menu .try-workspace-mode.active {
      color: var(--signal);
      background: rgba(0,208,132,0.06);
      border-color: transparent;
    }
    /* When the trigger is open, mirror the active look so the user sees
       which button owns the visible popover. */
    #workspace-tools-btn[aria-expanded="true"] {
      color: var(--text);
      border-color: var(--border-strong);
      background: rgba(0,0,0,0.04);
    }

    /* ─── Workspace close button ────────────────────────────────────── */
    .try-workspace-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .try-workspace-close {
      margin-left: auto;  /* push to right edge */
      background: transparent;
      color: var(--text-muted);
      border: 1px solid var(--border);
      border-radius: 8px;
      width: 28px;
      height: 28px;
      padding: 0;
      cursor: pointer;
      font-size: 0.95rem;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.12s;
    }
    .try-workspace-close:hover {
      color: var(--text);
      border-color: var(--border-strong);
      background: rgba(0,0,0,0.04);
    }
    /* Header navbar language switcher — small, sits next to Sign in / Sign up */
    .try-nav-lang { background: transparent; color: var(--text-muted);
      border: 1px solid var(--border); border-radius: 6px; padding: 3px 18px 3px 7px;
      font-family: 'Geist', sans-serif; font-size: 0.78rem; cursor: pointer;
      appearance: none; -webkit-appearance: none; margin-left: 8px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23999' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 6px center; }
    .try-nav-lang:hover { color: var(--text); border-color: var(--border-strong); }
    [dir="rtl"] .try-nav-lang { background-position: left 6px center; padding: 3px 7px 3px 18px; margin-left: 0; margin-right: 8px; }
    /* Language switcher — styled to look like a toolbar button */
    .try-workspace-lang { background: transparent; color: var(--text-muted);
      border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px;
      font-family: 'Geist', sans-serif; font-size: 0.78rem; font-weight: 500;
      cursor: pointer; appearance: none; -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23999' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 8px center; padding-right: 22px; }
    .try-workspace-lang:hover { color: var(--text); border-color: var(--border-strong); }
    [dir="rtl"] .try-workspace-lang { background-position: left 8px center; padding-right: 8px; padding-left: 22px; }

    /* Checkpoint history panel */
    .ckpt-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 300px; max-width: 100vw;
      background: var(--bg-card); border-left: 1px solid var(--border); z-index: 80;
      display: flex; flex-direction: column;
      transform: translateX(100%); transition: transform 0.22s ease;
      box-shadow: -4px 0 24px rgba(0,0,0,0.12); }
    .ckpt-panel.open { transform: translateX(0); }
    .ckpt-panel-head { display: flex; align-items: center; justify-content: space-between;
      padding: 16px 16px 12px; border-bottom: 1px solid var(--border);
      font-weight: 600; font-size: 0.9rem; }
    .ckpt-panel-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 0; }
    .ckpt-panel-foot { padding: 12px 16px; border-top: 1px solid var(--border); font-size: 0.8rem; }

    /* Lovable-parity version-history timeline */
    .ckpt-panel { width: 360px; }
    .ckpt-panel-close { background: none; border: none; color: var(--text);
      font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0;
      width: 26px; height: 26px; border-radius: 5px;
      display: flex; align-items: center; justify-content: center; }
    .ckpt-panel-close:hover { background: rgba(28,28,28,0.06); }
    .ckpt-panel-body { padding: 4px 0 12px; }
    .ckpt-empty { padding: 24px 16px; color: var(--text-muted); font-size: 0.875rem; text-align: center; }
    .ckpt-clear-btn { width: 100%; padding: 7px 10px; background: rgba(28,28,28,0.06);
      border: 1px solid var(--border); border-radius: 6px; color: var(--text);
      font-family: inherit; font-size: 0.8rem; cursor: pointer; }
    .ckpt-clear-btn:hover { background: rgba(248,113,113,0.08); border-color: #f87171; color: #f87171; }
    .ckpt-backdrop { position: fixed; inset: 0; z-index: 79; background: rgba(0,0,0,0.18); }

    .ckpt-section-head { padding: 14px 16px 4px; font-size: 0.7rem; font-weight: 700;
      color: var(--text); letter-spacing: 0.08em; text-transform: uppercase;
      border-top: 1px solid var(--border); margin-top: 6px; }
    .ckpt-section-head:first-child { border-top: none; margin-top: 0; }
    .ckpt-section-head[data-kind="published"] { color: var(--signal); }
    .ckpt-group-head { padding: 14px 16px 6px; font-size: 0.78rem; font-weight: 600;
      color: var(--text-muted); letter-spacing: 0.02em; }
    .ckpt-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center;
      gap: 10px; padding: 8px 12px 8px 16px; cursor: pointer;
      border-left: 2px solid transparent; transition: background 0.12s, border-color 0.12s; }
    .ckpt-row:hover { background: rgba(28,28,28,0.04); border-left-color: var(--signal); }
    .ckpt-row[data-kind="manual"] { border-left-color: rgba(0,208,132,0.4); }
    .ckpt-row[data-kind="published"] { border-left-color: var(--signal); background: rgba(0,208,132,0.04); }
    .ckpt-row[data-kind="published"] .ckpt-row-title::before { content: '↗ '; color: var(--signal); }
    .ckpt-row-title { font-size: 0.875rem; color: var(--text); min-width: 0;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ckpt-row-ts { font-size: 0.75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
    .ckpt-row-menu-trigger { background: transparent; border: none; padding: 2px 6px;
      color: var(--text-muted); font-size: 1rem; line-height: 1; cursor: pointer; border-radius: 4px;
      opacity: 0; transition: opacity 0.12s, background 0.12s; }
    .ckpt-row:hover .ckpt-row-menu-trigger { opacity: 1; }
    .ckpt-row-menu-trigger:hover { background: rgba(28,28,28,0.08); color: var(--text); }

    .ckpt-row-menu { position: fixed; z-index: 95; min-width: 220px;
      background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 10px;
      padding: 4px; box-shadow: 0 12px 32px rgba(0,0,0,0.18);
      display: flex; flex-direction: column; }
    .ckpt-row-menu-item { display: flex; align-items: center; gap: 10px;
      padding: 7px 10px; background: transparent; border: none; cursor: pointer;
      color: var(--text); font-family: inherit; font-size: 0.875rem; text-align: left;
      border-radius: 6px; }
    .ckpt-row-menu-item:hover:not(:disabled) { background: rgba(28,28,28,0.06); }
    .ckpt-row-menu-item:disabled { opacity: 0.45; cursor: not-allowed; }
    .ckpt-row-menu-item .icon { font-size: 0.95rem; width: 18px; text-align: center; opacity: 0.8; }
    .ckpt-row-menu-item.destructive { color: var(--text); }
    .ckpt-row-menu-item.destructive:hover:not(:disabled) { background: rgba(248,113,113,0.1); color: #f87171; }
    .ckpt-row-menu-item.destructive .icon { color: #f87171; opacity: 1; }

    /* Flash highlight on the chat turn jumped to from the history menu */
    @keyframes ckpt-jump-flash {
      0%   { background: rgba(0,208,132,0.18); box-shadow: 0 0 0 6px rgba(0,208,132,0.08); }
      100% { background: transparent; box-shadow: 0 0 0 0 transparent; }
    }
    .ckpt-jump-flash { animation: ckpt-jump-flash 1.6s ease-out; border-radius: 6px; }

    /* Diff modal */
    .ckpt-diff-overlay { position: fixed; inset: 0; z-index: 100;
      background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;
      padding: 32px; }
    .ckpt-diff-modal { background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 12px; box-shadow: 0 24px 64px rgba(0,0,0,0.3);
      width: min(900px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; }
    .ckpt-diff-head { display: flex; align-items: center; justify-content: space-between;
      padding: 12px 16px; border-bottom: 1px solid var(--border); }
    .ckpt-diff-title { font-weight: 600; font-size: 0.9rem; color: var(--text);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px; }
    .ckpt-diff-close { background: none; border: none; color: var(--text);
      font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0;
      width: 26px; height: 26px; border-radius: 5px;
      display: flex; align-items: center; justify-content: center; }
    .ckpt-diff-close:hover { background: rgba(28,28,28,0.06); }
    .ckpt-diff-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 0; }
    .ckpt-diff-empty { padding: 16px; color: var(--text-muted); font-size: 0.875rem; text-align: center; }
    .ckpt-diff-file { border-bottom: 1px solid var(--border); }
    .ckpt-diff-file:last-child { border-bottom: none; }
    .ckpt-diff-filename { padding: 8px 16px; font-family: 'Geist Mono', monospace; font-size: 0.8rem;
      color: var(--text-muted); background: rgba(28,28,28,0.03); }
    .ckpt-diff-stats { padding: 4px 16px; font-family: 'Geist Mono', monospace; font-size: 0.72rem;
      color: var(--text-muted); }
    .ckpt-diff-code { font-family: 'Geist Mono', monospace; font-size: 0.78rem;
      line-height: 1.5; max-height: 360px; overflow: auto; }
    .ckpt-diff-line { padding: 0 16px; white-space: pre; }
    .ckpt-diff-line.add { background: rgba(0,208,132,0.08); color: #0c7a4a; }
    .ckpt-diff-line.del { background: rgba(248,113,113,0.08); color: #b04444; }
    .ckpt-diff-line.eq { color: var(--text-muted); }

    /* Syntax-highlight token classes inside diff lines.
       Tints stay subtle so add/del backgrounds remain readable. */
    .ckpt-diff-code .hl-kw   { color: #8957e5; }
    .ckpt-diff-code .hl-str  { color: #b25000; }
    .ckpt-diff-code .hl-num  { color: #0550ae; }
    .ckpt-diff-code .hl-com  { color: #6e7781; font-style: italic; }
    .ckpt-diff-code .hl-tag  { color: #116329; }
    .ckpt-diff-code .hl-attr { color: #0550ae; }
    .ckpt-diff-code .hl-prop { color: #8957e5; }
    .ckpt-diff-code .hl-punc { color: #6e7781; }

    /* Diff view-mode toggle (Unified / Side-by-side) */
    .ckpt-diff-mode-toggle { display: inline-flex; gap: 0; margin-right: 12px;
      background: rgba(28,28,28,0.04); border: 1px solid var(--border); border-radius: 6px; padding: 2px; }
    .ckpt-diff-mode-toggle button { background: transparent; border: none;
      padding: 3px 9px; font-size: 0.74rem; cursor: pointer; color: var(--text-muted);
      font-family: inherit; border-radius: 4px; }
    .ckpt-diff-mode-toggle button.active { background: var(--bg-card); color: var(--text);
      box-shadow: 0 1px 2px rgba(0,0,0,0.06); }

    /* Side-by-side diff layout */
    .ckpt-diff-grid { display: grid; grid-template-columns: 1fr 1fr; }
    .ckpt-diff-grid .ckpt-diff-line { border-right: 1px solid var(--border); padding-left: 12px; }
    .ckpt-diff-grid .ckpt-diff-line:nth-child(2n) { border-right: none; }
    .ckpt-diff-line.empty { background: rgba(28,28,28,0.03); }

    /* Snapshot preview modal — read-only iframe with Revert button in header */
    .ckpt-preview-overlay { position: fixed; inset: 0; z-index: 100;
      background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center;
      padding: 24px; }
    .ckpt-preview-modal { background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 12px; box-shadow: 0 24px 64px rgba(0,0,0,0.3);
      width: min(1200px, 100%); height: min(820px, 100%);
      display: flex; flex-direction: column; overflow: hidden; }
    .ckpt-preview-head { display: flex; align-items: center; gap: 12px;
      padding: 10px 14px; border-bottom: 1px solid var(--border); }
    .ckpt-preview-pill { font-size: 0.78rem; color: var(--text-muted);
      padding: 3px 10px; background: rgba(28,28,28,0.04); border-radius: 999px;
      flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ckpt-preview-pill .ckpt-preview-name { color: var(--text); font-weight: 500; margin-left: 4px; }
    .ckpt-preview-revert, .ckpt-preview-close {
      padding: 5px 11px; font-size: 0.78rem; border-radius: 6px;
      cursor: pointer; font-family: inherit; border: 1px solid var(--border);
      background: rgba(28,28,28,0.04); color: var(--text); }
    .ckpt-preview-revert:hover { background: rgba(0,208,132,0.1); border-color: var(--signal); color: var(--signal); }
    .ckpt-preview-close:hover { background: rgba(28,28,28,0.08); }
    .ckpt-preview-body { flex: 1 1 auto; background: white; position: relative; }
    .ckpt-preview-frame { width: 100%; height: 100%; border: none; background: white; }
    .ckpt-preview-warn { position: absolute; bottom: 10px; left: 10px; right: 10px;
      padding: 6px 10px; background: rgba(255,180,0,0.1); border: 1px solid rgba(255,180,0,0.3);
      color: #8a5a00; font-size: 0.75rem; border-radius: 6px; }

    /* RTL overrides for the version-history panel + row accents.
       History sidebar slides in from the leading edge (left in RTL).
       Border-left accent on rows flips to border-right. */
    [dir="rtl"] .ckpt-panel { left: 0; right: auto; transform: translateX(-100%);
      border-left: none; border-right: 1px solid var(--border);
      box-shadow: 4px 0 24px rgba(0,0,0,0.12); }
    [dir="rtl"] .ckpt-panel.open { transform: translateX(0); }
    [dir="rtl"] .ckpt-row { border-left: none; border-right: 2px solid transparent; padding: 8px 16px 8px 12px; }
    [dir="rtl"] .ckpt-row:hover { border-right-color: var(--signal); }
    [dir="rtl"] .ckpt-row[data-kind="manual"] { border-right-color: rgba(0,208,132,0.4); }
    [dir="rtl"] .ckpt-row[data-kind="published"] { border-right-color: var(--signal); }
    [dir="rtl"] .ckpt-row[data-kind="published"] .ckpt-row-title::before { content: ''; }
    [dir="rtl"] .ckpt-row[data-kind="published"] .ckpt-row-title::after { content: ' ↖'; color: var(--signal); }
    [dir="rtl"] .ckpt-section-head { border-top: 1px solid var(--border); }
    [dir="rtl"] .ckpt-row-menu-item .icon { margin-left: 0; }

    /* Checkpoint name popover */
    .ckpt-name-popover { position: fixed; z-index: 90; background: var(--bg-card);
      border: 1px solid var(--border-strong); border-radius: 10px; padding: 12px; width: 240px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.18); flex-direction: column; gap: 8px;
      display: none; }
    .ckpt-name-popover input { width: 100%; box-sizing: border-box; padding: 7px 10px;
      border: 1px solid var(--border); border-radius: 6px; background: var(--bg);
      color: var(--text); font-family: inherit; font-size: 0.875rem; }
    .ckpt-name-popover input:focus { outline: none; border-color: var(--signal); }
    .ckpt-name-popover .ckpt-save-btn { padding: 7px 14px; border-radius: 6px;
      background: var(--signal); color: #fff; border: none;
      font-size: 0.875rem; font-weight: 500; cursor: pointer; font-family: inherit; }

    /* GitHub push button dirty state */
    #github-push-btn.dirty { color: var(--signal); border-color: rgba(0,208,132,0.4); }

    /* Supabase button connected state */
    #supabase-btn.active { color: var(--signal); border-color: rgba(0,208,132,0.4); }
    #knowledge-btn.active { color: var(--signal); border-color: rgba(0,208,132,0.4); }
    #mcp-btn.active { color: var(--signal); border-color: rgba(0,208,132,0.4); }
    #site-config-btn.active { color: var(--signal); border-color: rgba(0,208,132,0.4); }
    .supabase-popover label { font-size: 0.78rem; color: var(--text-muted); }
    .db-schema-btn { display: inline-flex; align-items: center; gap: 4px;
      padding: 4px 10px; border-radius: 5px; background: rgba(28,28,28,0.06);
      border: 1px solid var(--border); font-size: 0.775rem; cursor: pointer;
      color: var(--text); text-decoration: none; }
    .db-schema-btn:hover { background: rgba(0,208,132,0.1); border-color: var(--signal); color: var(--signal); }

    /* Mobile preview toggle button */
    .pp-mobile-toggle {
      padding: 3px 7px; border-radius: 5px; cursor: pointer; font-family: inherit;
      border: 1px solid var(--border); background: none;
      color: var(--text-muted); font-size: 0.78rem;
      transition: color 0.15s, border-color 0.15s;
    }
    .pp-mobile-toggle:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text); }
    .pp-mobile-toggle.active { color: var(--signal); border-color: rgba(0,208,132,0.4); background: rgba(0,208,132,0.06); }
    .pp-mobile-toggle:disabled { opacity: 0.4; cursor: default; }
    /* Phone-frame border when mobile mode is active */
    .try-pane-preview.mobile-mode iframe {
      border-radius: 14px;
      box-shadow: 0 0 0 7px #1a1a1a, 0 0 0 8px #333, 0 8px 32px rgba(0,0,0,0.5);
    }

    /* Inline preview publish button */
    .pp-publish-btn {
      padding: 3px 9px; border-radius: 5px; cursor: pointer; font-family: inherit;
      border: 1px solid var(--border); background: none;
      color: var(--text-muted); font-size: 0.78rem; white-space: nowrap;
      transition: color 0.15s, border-color 0.15s;
    }
    .pp-publish-btn:hover:not(:disabled) { color: var(--signal); border-color: rgba(0,208,132,0.4); }
    .pp-publish-btn:disabled { opacity: 0.4; cursor: default; }

    /* Inline preview error banner */
    .pp-error-banner {
      /* Disabled — was confusing users. Kept the CSS rules below in case we
         ever re-enable. The CSS `display: flex` was overriding the JS-set
         `hidden` attr; force-hide here so it stays gone. */
      display: none !important;
      align-items: center; gap: 8px;
      padding: 8px 12px; flex-shrink: 0;
      background: rgba(248,113,113,0.08);
      border-top: 1px solid rgba(248,113,113,0.25);
      font-size: 0.78rem;
    }
    .pp-error-msg {
      flex: 1; color: #f87171;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .pp-error-actions { display: flex; gap: 6px; flex-shrink: 0; }
    .pp-error-fix {
      padding: 4px 10px; border-radius: 5px; cursor: pointer; font-family: inherit;
      border: 1px solid rgba(248,113,113,0.4); background: rgba(248,113,113,0.12);
      color: #f87171; font-size: 0.78rem; white-space: nowrap;
    }
    .pp-error-fix:hover { background: rgba(248,113,113,0.25); }
    .pp-error-dismiss {
      padding: 4px 7px; border-radius: 5px; cursor: pointer; font-family: inherit;
      border: 1px solid var(--border); background: none;
      color: var(--text-muted); font-size: 0.78rem;
    }
    .pp-error-dismiss:hover { color: var(--text); }

    .try-pane-gen-rail {
      display: none;
      flex-shrink: 0;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 6px 10px;
      border-bottom: 1px solid var(--border);
      background: rgba(28,28,28,0.04);
      font-family: 'Geist Mono', monospace;
      font-size: 0.7rem;
      color: var(--text-muted);
    }
    .try-pane-gen-rail .try-gen-rail-msg {
      flex: 1;
      min-width: 0;
      line-height: 1.38;
      font-family: 'Geist Mono', monospace;
    }
    .try-pane-gen-rail .try-gen-rail-actions {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-left: auto;
      flex-shrink: 0;
    }
    .try-pane-gen-rail .try-gen-rail-toggle,
    .try-pane-gen-rail .try-gen-rail-code-toggle {
      flex-shrink: 0;
      background: transparent;
      color: var(--text-muted);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 4px 8px;
      font-size: 0.6875rem;
      font-family: 'Geist', sans-serif;
      font-weight: 500;
      cursor: pointer;
      transition: border-color 0.12s, color 0.12s;
    }
    .try-pane-gen-rail .try-gen-rail-toggle:hover,
    .try-pane-gen-rail .try-gen-rail-code-toggle:hover {
      border-color: var(--border-strong);
      color: var(--text);
    }
    /* Tabbed: transcript toolbar while generating or whenever this pane has an assistant reply. */
    .try-workspace.tabbed .try-pane.active.pane-tabbed-toolbar .try-pane-gen-rail {
      display: flex;
    }
    .try-workspace.tabbed .try-pane.active.tabbed-hide-transcript .try-pane-chat-main > .try-pane-body {
      display: none !important;
    }

    /* ── Visual-edit side panel (Lovable-style) — slides in over chat ── */
    .try-visual-edits {
      position: fixed;
      /* Sit below the persistent 48px .app-topbar (sticky, z:90) instead of
         top:0 — otherwise the panel's .ve-head (with the × close button) is
         occluded by the top bar, which wins the stacking fight because
         main.try-shell (position:fixed) is a separate stacking context. */
      top: 48px;
      left: 0;
      bottom: 0;
      width: min(360px, 38vw);
      background: var(--bg-card);
      border-right: 1px solid var(--border);
      box-shadow: 0 8px 32px rgba(0,0,0,0.08);
      /* Sit above ALL other site chrome (sticky topbar at z:40, has-session
         nav at z:70, mobile chat dock at z:66, narrow-mode chat sheets at
         z:64). Previously z:80 could be overlapped by the sticky topbar's
         stacking context once main.try-shell became position:fixed, hiding
         the panel's `.ve-head` (with the × close button) behind it. */
      z-index: 9999;
      display: flex;
      flex-direction: column;
      transform: translateX(-100%);
      transition: transform 0.18s ease;
    }
    .try-visual-edits[aria-hidden="false"] {
      transform: translateX(0);
    }
    .try-visual-edits .ve-head {
      display: flex; justify-content: space-between; align-items: center;
      padding: 14px 16px; border-bottom: 1px solid var(--border);
    }
    .try-visual-edits .ve-title { font-weight: 600; font-size: 0.95rem; }
    .try-visual-edits .ve-close {
      background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
      width: 32px; height: 32px; padding: 0; cursor: pointer;
      font-size: 1.25rem; line-height: 1; font-weight: 500;
      color: var(--text-muted); transition: color 0.12s, border-color 0.12s, background 0.12s;
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .try-visual-edits .ve-close:hover { color: var(--text); border-color: var(--border-strong); background: var(--bg-card); }
    .try-visual-edits .ve-body {
      flex: 1 1 auto; overflow-y: auto; padding: 14px 16px 20px;
      display: flex; flex-direction: column; gap: 18px;
    }
    .try-visual-edits .ve-section { display: flex; flex-direction: column; gap: 6px; }
    .try-visual-edits .ve-section-label {
      font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--text-muted); font-weight: 600;
    }
    .try-visual-edits .ve-tag {
      display: inline-flex; align-self: flex-start; align-items: center;
      padding: 3px 9px; border-radius: 999px;
      background: rgba(168,85,247,0.10); color: var(--accent);
      font-family: 'Geist Mono', monospace; font-size: 0.72rem; font-weight: 600;
    }
    .try-visual-edits textarea,
    .try-visual-edits input[type="text"],
    .try-visual-edits select {
      width: 100%; box-sizing: border-box;
      background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
      padding: 8px 10px; font: inherit; font-size: 0.875rem;
      color: var(--text); resize: vertical;
    }
    .try-visual-edits textarea:focus,
    .try-visual-edits input[type="text"]:focus,
    .try-visual-edits select:focus {
      outline: none; border-color: var(--border-strong);
    }
    .try-visual-edits .ve-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .try-visual-edits .ve-field { display: flex; flex-direction: column; gap: 4px; }
    .try-visual-edits .ve-field > span {
      font-size: 0.72rem; color: var(--text-muted);
    }
    .try-visual-edits .ve-chat-send {
      background: var(--accent); color: #fff; border: 0; border-radius: 8px;
      padding: 9px 14px; cursor: pointer; font-weight: 600; font-size: 0.875rem;
      align-self: flex-start;
    }
    .try-visual-edits .ve-chat-send:hover { filter: brightness(1.05); }
    .try-visual-edits .ve-chat-send:disabled { opacity: 0.55; cursor: not-allowed; }

    /* ── Tabbed mode: preview canvas LEFT, chat sidebar RIGHT (Lovable-style) ── */
    .try-workspace.tabbed .try-panes {
      display: block; grid-template-columns: none; gap: 0; margin-top: 6px;
    }
    .try-workspace.tabbed .try-pane { display: none; }
    .try-workspace.tabbed .try-pane.active { display: grid; }
    .try-workspace.tabbed .try-pane.active {
      grid-template-columns: minmax(min(280px, 30vw), min(380px, 36vw)) minmax(0, 1fr);
      grid-template-rows: auto minmax(0, 1fr) auto auto;
      gap: 0;
      border-radius: 16px;
      min-height: 360px;
      /* Use dvh (dynamic viewport height) so the pane shrinks when mobile
         browsers show their URL bar. Subtract 240px (was 100px) to leave
         room for the page chrome that sits above the pane — nav + hero +
         prompt row + hint — so the bottom of the pane (and the input row
         inside it) stays inside the viewport on a top-of-page load. */
      height: calc(100dvh - 240px);
      max-height: calc(100dvh - 240px);
      overflow: hidden;
    }
    /* Cost / token / latency strip is debug-y info that most users don't read.
       Always hidden in tabbed mode; the data still lives on the pane object
       (pane.finalCostUsd, pane.finalLatencyMs) for analytics. */
    .try-workspace.tabbed .try-pane > .try-pane-cost {
      display: none;
    }
    /* Reopened (?continue=) projects show their conversation in #try-chat-history,
       so the pane's own chat column is redundant — collapse it to 0 and hide its
       chat/followup chrome so the preview fills the full pane width (no empty gap
       between the chat column and the app). */
    .try-workspace.tabbed .try-pane.active.reopen-preview-only {
      grid-template-columns: 0 minmax(0, 1fr);
    }
    .try-pane.reopen-preview-only > .try-pane-chat-main,
    .try-pane.reopen-preview-only > .try-pane-followup,
    .try-pane.reopen-preview-only > .try-pane-gen-rail {
      display: none !important;
    }
    .try-workspace.tabbed .try-pane > .try-pane-head {
      grid-column: 1 / -1;
      border-bottom: 1px solid var(--border);
    }
    .try-workspace.tabbed .try-pane > .try-pane-preview {
      grid-column: 2;
      grid-row: 2 / span 3;
      display: flex;
      flex-direction: column;
      background: #ffffff;
      min-height: 0;
      /* Override the inline height the inline-preview JS sets for compare-mode
         scaling — in tabbed mode the grid cell defines the preview column's
         visible height, and the iframe inside scrolls. Without this, the
         inline height (e.g., 2945px for a long deck) inflates the grid rows
         and chat-main collapses, leaving phantom space below the textarea. */
      height: 100% !important;
      max-height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      border-left: 1px solid var(--border);
    }
    .try-workspace.tabbed .try-pane > .try-pane-chat-main,
    .try-workspace.tabbed .try-pane > .try-pane-followup,
    .try-workspace.tabbed .try-pane > .try-pane-cost {
      grid-column: 1;
      min-width: 0;
    }
    .try-workspace.tabbed .try-pane > .try-pane-chat-main {
      grid-row: 2;
      display: flex;
      flex-direction: column;
      min-height: 0;
      max-height: none;
      overflow: hidden;
      background: transparent;
    }
    .try-workspace.tabbed .try-pane > .try-pane-chat-main > .try-pane-body {
      flex: 1 1 auto;
      min-height: 0;
      max-height: none;
      overflow-y: auto;
      background: transparent;
      /* Top-anchored: first message starts at the top, new messages stack
         downward toward the input row. Empty whitespace sits below the last
         bubble (between content and input) when the chat is short. */
    }
    .try-workspace.tabbed .try-pane > .try-pane-followup {
      grid-row: 3;
      background: rgba(28,28,28,0.02);
      border-top: 1px solid var(--border);
      flex-shrink: 0;
    }
    .try-workspace.tabbed .try-pane > .try-pane-cost {
      grid-row: 4;
      flex-shrink: 0;
    }

    /* ── Narrow tabbed (<=900px JS class): preview full-bleed; chat in sheet ─ */
    body.try-tabbed-narrow-ui:not(.embed) main.try-shell {
      display: flex;
      flex-direction: column;
      min-height: 100dvh;
      min-height: 100vh;
      /* Zero the 8px lateral padding the has-session shell rule applies — on
         narrow viewports that 8px (plus the pane's rounded-corner inset)
         creates a visible empty strip on the left, biasing the preview right.
         The pane handles its own visual containment with border-radius. */
      padding-left: 0 !important;
      padding-right: 0 !important;
      /* Drop the 100px Mac-dock reservation the has-session rule applies — on
         narrow viewports there's no Mac dock, the mobile chat dock floats
         (position: fixed), and the preview pane reserves its own dock clearance
         via padding-bottom below. Without this, ~100px of green void appears
         at the bottom of try-shell. */
      padding-bottom: 0 !important;
    }
    body.try-tabbed-narrow-ui:not(.embed) .try-workspace.tabbed .try-pane.active {
      /* Drop the pane's 1px border + 14px border-radius in narrow mode so the
         preview iframe truly spans edge-to-edge with no left/right inset. */
      border: none !important;
      border-radius: 0 !important;
      margin: 0 !important;
    }
    body.try-tabbed-narrow-ui:not(.embed) .try-workspace.tabbed .try-pane.active > .try-pane-preview {
      /* Reserve bottom space for the floating mobile chat dock (Chat toggle +
         streaming pill) so the rendered app's bottom-edge UI isn't hidden
         behind it. Matches the dock's `bottom: 112px` default + 60px button +
         small margin. */
      padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 180px) !important;
    }
    body.try-tabbed-narrow-ui:not(.embed) #workspace.try-workspace.tabbed:not([hidden]) {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    body.try-tabbed-narrow-ui:not(.embed) .try-workspace.tabbed:not([hidden]) .try-panes {
      flex: 1 1 auto;
      min-height: 0;
      display: block;
    }
    body.try-tabbed-narrow-ui:not(.embed) .try-workspace.tabbed .try-pane > .try-pane-head {
      display: none !important;
    }
    body.try-tabbed-narrow-ui:not(.embed) .try-workspace.tabbed .try-pane.active {
      display: flex !important;
      flex-direction: column;
      height: 100%;
      min-height: min(70dvh, 720px);
      max-height: none;
      overflow: hidden;
      grid-template-columns: unset !important;
      grid-template-rows: unset !important;
    }
    body.try-tabbed-narrow-ui:not(.embed) .try-workspace.tabbed .try-pane.active > .try-pane-preview {
      flex: 1 1 auto;
      min-height: 0;
      grid-column: unset !important;
      grid-row: unset !important;
      max-height: none;
      /* Drop the desktop-mode 1px border-left so the column is horizontally
         symmetric (was creating a right-bias on narrow viewports where there
         was no matching border on the right). */
      border-left: none !important;
      border-right: none;
      border-bottom: none;
      /* Override the desktop-scale fixed height the inline-preview JS sets
         (previewCol.style.height = 1500*scale) — in narrow mode we want the
         column to fill the pane, not lock to a scaled-desktop aspect. */
      height: auto !important;
      width: 100% !important;
      margin: 0 !important;
      /* Reset top/left/right only — don't wipe the padding-bottom dock-clearance
         from the rule above (was `padding: 0 !important` which expanded to all
         four sides, hiding the bottom of the rendered app under the mobile dock). */
      padding-top: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    body.try-tabbed-narrow-ui:not(.embed) .try-workspace.tabbed .try-pane.active > .try-pane-preview > iframe {
      /* Override the matching JS-set inline width/height/transform/margin on
         the iframe so it just fills the column at the real narrow width.
         margin: 0 auto + width: 100% forces horizontal centering even if the
         JS left a stale margin-left from a previous layout pass. */
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
      margin: 0 auto !important;
      transform: none !important;
      transform-origin: top center !important;
      flex: 1 1 auto !important;
    }
    body.try-tabbed-narrow-ui:not(.embed) .try-workspace.tabbed .try-pane.active > .try-pane-chat-main,
    body.try-tabbed-narrow-ui:not(.embed) .try-workspace.tabbed .try-pane.active > .try-pane-followup,
    body.try-tabbed-narrow-ui:not(.embed) .try-workspace.tabbed .try-pane.active > .try-pane-cost {
      position: fixed;
      left: 0;
      right: 0;
      max-width: 100vw;
      box-sizing: border-box;
      z-index: 64;
      transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
      transform: translateY(100vh);
      background: var(--bg-card, #fff);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
    }
    body.try-mobile-chat-open.try-tabbed-narrow-ui:not(.embed) .try-workspace.tabbed .try-pane.active > .try-pane-chat-main,
    body.try-mobile-chat-open.try-tabbed-narrow-ui:not(.embed) .try-workspace.tabbed .try-pane.active > .try-pane-followup,
    body.try-mobile-chat-open.try-tabbed-narrow-ui:not(.embed) .try-workspace.tabbed .try-pane.active > .try-pane-cost {
      transform: translateY(0);
    }
    body.try-tabbed-narrow-ui:not(.embed) .try-workspace.tabbed .try-pane.active > .try-pane-chat-main {
      top: var(--try-tabbed-sheet-top, 48px);
      bottom: calc(
        var(--try-mobile-sheet-bottom, 260px) + var(--try-mobile-followup-slot, 112px) + var(--try-mobile-cost-slot, 48px)
      );
      display: flex;
      flex-direction: column;
      min-height: 0;
      overflow: hidden;
      border-top: 1px solid var(--border-strong);
      box-shadow: 0 -24px 56px rgba(0, 0, 0, 0.55);
      border-radius: 16px 16px 0 0;
    }
    body.try-tabbed-narrow-ui:not(.embed) .try-workspace.tabbed .try-pane.active > .try-pane-chat-main > .try-pane-body {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    body.try-tabbed-narrow-ui:not(.embed) .try-workspace.tabbed .try-pane.active > .try-pane-followup {
      top: auto;
      bottom: calc(var(--try-mobile-sheet-bottom, 260px) + var(--try-mobile-cost-slot, 48px));
      max-height: 42vh;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      margin: 0;
    }
    body.try-tabbed-narrow-ui:not(.embed) .try-workspace.tabbed .try-pane.active > .try-pane-cost {
      top: auto;
      bottom: var(--try-mobile-sheet-bottom, 260px);
      margin: 0;
      border-top: 1px solid var(--border);
    }

    .try-mobile-chat-backdrop {
      position: fixed;
      inset: 0;
      z-index: 63;
      border: none;
      padding: 0;
      margin: 0;
      background: rgba(0, 0, 0, 0.5);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    body.embed .try-mobile-chat-backdrop,
    body.embed .try-tabbed-mobile-dock { display: none !important; }

    .try-tabbed-mobile-dock {
      position: fixed;
      left: max(14px, env(safe-area-inset-left));
      right: max(14px, env(safe-area-inset-right));
      bottom: max(14px + env(safe-area-inset-bottom), var(--try-mobile-bottom-gap, 112px));
      z-index: 66;
      display: none;
      flex-direction: column;
      gap: 8px;
      align-items: stretch;
      pointer-events: none;
    }
    body.try-tabbed-narrow-ui:not(.embed) .try-tabbed-mobile-dock:not([hidden]) {
      display: flex;
    }
    .try-tabbed-mobile-dock-bar,
    .try-mobile-chat-toggle {
      pointer-events: auto;
    }
    .try-mobile-stream-pill {
      pointer-events: auto;
      margin: 0;
      padding: 8px 14px;
      font-size: 0.78rem;
      line-height: 1.42;
      color: var(--text-muted);
      background: rgba(10, 10, 14, 0.88);
      border: 1px solid rgba(255, 255, 255, 0.09);
      border-radius: 999px;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 8px 36px rgba(0, 0, 0, 0.4);
      max-height: 3.2em;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .try-mobile-chat-toggle {
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;
      padding: 12px 20px;
      border-radius: 999px;
      border: 1px solid var(--border-strong);
      background: rgba(250, 250, 255, 0.92);
      color: var(--ink);
      font-family: 'Geist', sans-serif;
      font-size: 0.895rem;
      font-weight: 600;
      cursor: pointer;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 8px 32px rgba(168, 85, 247, 0.15);
    }
    .try-mobile-chat-toggle:hover {
      border-color: var(--accent);
      background: rgba(250, 250, 255, 0.98);
    }

    .try-workspace-builder-hint {
      margin: 0;
      padding: 2px 2px 0;
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--text-dim);
      line-height: 1.45;
      max-width: 56rem;
    }

    body.try-has-session:not(.embed) .try-workspace.tabbed .try-pane.active {
      grid-template-columns: minmax(min(280px, 30vw), min(380px, 36vw)) minmax(0, 1fr);
    }
    body.try-has-session:not(.embed) .try-workspace {
      padding: 0;
      gap: 0;
      border-radius: 0;
      background: transparent;
      border: none;
      box-shadow: none;
      margin-top: 0;
    }
    body.try-has-session:not(.embed) .try-workspace-tabs {
      padding: 5px 6px;
      gap: 4px;
      border-radius: 10px;
    }
    body.try-has-session:not(.embed) .try-tab {
      padding: 6px 12px;
      font-size: 0.8125rem;
    }
    body.try-has-session:not(.embed) .try-workspace.tabbed .try-pane > .try-pane-preview {
      padding: 10px;
      background: var(--bg-card);
      border-left: 1px solid var(--border);
    }
    body.try-has-session:not(.embed) .try-workspace.tabbed .try-pane-preview iframe {
      border-radius: 10px;
      box-shadow:
        0 0 0 1px var(--border-strong),
        0 26px 70px rgba(0, 0, 0, 0.55);
    }
    body.try-has-session:not(.embed) .try-pane-preview-bar {
      background: rgba(28,28,28,0.02);
      border-bottom-color: var(--border);
      margin-bottom: 2px;
    }
    body.try-has-session:not(.embed) .pp-file-tabs {
      background: rgba(28,28,28,0.02);
      border-bottom-color: var(--border);
    }
    body.try-has-session:not(.embed) .try-workspace.tabbed .try-pane > .try-pane-head {
      padding: 7px 12px;
      background: rgba(28,28,28,0.02);
      border-bottom-color: var(--border);
    }
    body.try-has-session:not(.embed) .try-pane-head .name {
      font-size: 0.875rem;
      font-weight: 600;
    }
    body.try-has-session:not(.embed) .try-workspace.tabbed .try-pane > .try-pane-chat-main {
      background: var(--bg-card);
    }
    body.try-has-session:not(.embed) .try-workspace.tabbed .try-pane > .try-pane-chat-main > .try-pane-body {
      font-size: 0.867rem;
      line-height: 1.62;
      padding: 14px 14px 16px;
    }
    body.try-has-session:not(.embed) .try-workspace.tabbed .try-pane > .try-pane-followup {
      padding: 8px 10px;
      background: rgba(28,28,28,0.02);
      border-top: 1px solid var(--border);
      gap: 6px;
    }
    body.try-has-session:not(.embed) .try-workspace.tabbed .try-pane > .try-pane-followup textarea {
      font-size: 0.8125rem;
      border-radius: 8px;
      border-color: var(--border);
      background: var(--bg-card);
      color: var(--text);
    }
    body.try-has-session:not(.embed) .try-workspace.tabbed .try-pane > .try-pane-followup button {
      border-radius: 6px;
    }
    body.try-has-session:not(.embed) .try-workspace.tabbed .try-pane > .try-pane-cost {
      padding: 8px 12px;
      font-size: 0.6875rem;
      background: rgba(28,28,28,0.02);
      border-top: 1px solid var(--border);
    }
    body.try-has-session:not(.embed) .try-prompt-row textarea {
      min-height: 56px;
      max-height: min(168px, 28vh);
      padding-bottom: 44px;
    }

    .try-pane-preview { display: none; }  /* hidden in compare-grid mode */
    .try-pane-preview-bar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 6px 10px; background: var(--bg-card-hover);
      border-bottom: 1px solid var(--border); flex-shrink: 0;
      font-family: 'Geist Mono', monospace; font-size: 0.72rem; color: var(--text-muted);
    }
    .try-pane-preview-bar .pp-status { display: inline-flex; align-items: center; gap: 6px; }
    .try-pane-preview-bar .pp-count { color: var(--text-dim); font-family: 'Geist Mono', monospace; font-size: 0.7rem; }
    /* File tab strip — only rendered for multi-file outputs. Each tab is
       a small pill; the active one gets accent styling. Horizontal scroll
       on overflow so the iframe row doesn't squeeze. */
    .pp-file-tabs {
      display: flex; gap: 4px; padding: 6px 10px;
      background: var(--bg-card-hover); border-bottom: 1px solid var(--border);
      overflow-x: auto; flex-shrink: 0; scrollbar-width: thin;
    }
    .pp-file-tab {
      background: transparent; color: var(--text-muted);
      border: 1px solid var(--border); border-radius: 5px;
      padding: 3px 10px; font-family: 'Geist Mono', monospace;
      font-size: 0.7rem; cursor: pointer; white-space: nowrap;
      transition: all 0.12s; line-height: 1.4;
    }
    .pp-file-tab:hover { color: var(--text); border-color: var(--border-strong); }
    .pp-file-tab.active {
      color: var(--signal); border-color: rgba(28,28,28,0.4);
      background: rgba(28,28,28,0.02); font-weight: 500;
    }
    .try-pane-preview-bar .pp-actions { display: inline-flex; gap: 6px; }
    .try-pane-preview-bar button {
      background: transparent; color: var(--text-muted); border: 1px solid var(--border);
      border-radius: 5px; padding: 3px 8px; font-size: 0.7rem; cursor: pointer; transition: all 0.12s;
    }
    .try-pane-preview-bar button:hover:not(:disabled) { color: var(--text); border-color: var(--border-strong); }
    .try-pane-preview-bar button:disabled { opacity: 0.4; cursor: not-allowed; }
    .pp-code-btn.active { color: var(--signal) !important; border-color: rgba(168,85,247,0.4) !important; }
    /* Monaco editor + file tree panel */
    .pane-monaco-wrap {
      flex: 1 1 auto; min-height: 0; display: flex; flex-direction: row;
      background: var(--bg-card); overflow: hidden;
    }
    .monaco-file-tree {
      width: 168px; flex-shrink: 0; overflow-y: auto; overflow-x: hidden;
      border-right: 1px solid var(--border); background: var(--bg-card-hover);
      padding: 6px 0;
    }
    .monaco-file-item {
      display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2px;
      padding: 4px 10px; cursor: pointer; font-size: 0.72rem;
      font-family: 'Geist Mono', monospace; color: var(--text-muted);
      border-radius: 0; transition: background 0.1s, color 0.1s;
      white-space: nowrap; overflow: hidden;
    }
    .monaco-file-item:hover { background: var(--accent-soft); color: var(--text); }
    .monaco-file-item.active { background: var(--accent-soft); color: var(--signal); font-weight: 500; }
    .monaco-file-dir { opacity: 0.5; font-size: 0.65rem; }
    .monaco-file-name { overflow: hidden; text-overflow: ellipsis; }
    .monaco-editor-host { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; }
    .try-pane-preview iframe {
      flex: 1 1 auto; width: 100%; border: 0; background: #fff; min-height: 240px;
    }
    .try-pane-preview .pp-empty {
      flex: 1; display: flex; align-items: center; justify-content: center;
      color: var(--text-dim); font-size: 0.875rem; padding: 32px; text-align: center;
      font-family: 'Geist', sans-serif;
    }
    /* Streaming skeleton — replaces the static empty-state text while the
       model is producing tokens but no HTML block has appeared yet. Three
       states managed by .streaming + .has-preview class combo:
         idle      (neither): empty-state caption
         streaming (.streaming, no .has-preview): pulsing skeleton
         rendered  (.has-preview): iframe takes over, both placeholders hidden */
    .try-pane-preview .pp-skeleton { display: none; }
    .try-pane-preview.streaming:not(.has-preview) .pp-empty { display: none; }
    .try-pane-preview.streaming:not(.has-preview) .pp-skeleton {
      flex: 1; display: flex; flex-direction: column; gap: 22px;
      padding: 36px 40px; background: #fff;
      justify-content: center; align-items: center;
    }
    .try-pane-preview.has-preview .pp-empty,
    .try-pane-preview.has-preview .pp-skeleton { display: none; }
    .try-pane-preview .pp-skeleton .sk-bar {
      height: 22px; border-radius: 8px;
      background: linear-gradient(90deg, #eef0f3 0%, #e5e8ec 50%, #eef0f3 100%);
      background-size: 200% 100%;
      animation: pp-shimmer 1.4s ease-in-out infinite;
      flex-shrink: 0;
    }
    .try-pane-preview .pp-skeleton .sk-bar.w-60 { width: 72%; }
    .try-pane-preview .pp-skeleton .sk-bar.w-80 { width: 92%; }
    .try-pane-preview .pp-skeleton .sk-bar.w-40 { width: 54%; }
    .try-pane-preview .pp-skeleton .sk-bar.h-block { flex: 1 1 auto; min-height: 140px; width: 92%; }
    .try-pane-preview .pp-skeleton .sk-bar.h-tall { flex: 1 1 auto; min-height: 96px; width: 88%; }
    .try-pane-preview .pp-skeleton .sk-caption {
      color: var(--text-dim); font-size: 1.125rem; font-family: 'Geist Mono', monospace;
      letter-spacing: 0.04em; text-align: center; margin-top: 24px;
      display: inline-flex; align-items: center; justify-content: center;
      gap: 0; align-self: center; flex-shrink: 0;
    }
    /* Pulsing dot with expanding ripple — the "something is happening" beacon. */
    .try-pane-preview .pp-skeleton .sk-caption-dot {
      display: inline-block;
      width: 12px; height: 12px;
      border-radius: 50%;
      background: var(--signal, #4f46e5);
      margin-right: 14px;
      animation: sk-dot-pulse 1.2s ease-in-out infinite;
      flex-shrink: 0;
    }
    @keyframes sk-dot-pulse {
      0%, 100% {
        transform: scale(1); opacity: 1;
        box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.5);
      }
      50% {
        transform: scale(1.5); opacity: 0.9;
        box-shadow: 0 0 0 12px rgba(79, 70, 229, 0);
      }
    }
    /* Travelling shimmer fills the caption text — a subtle reminder that
       the stream is alive even when no bars are moving. Falls back to the
       solid --text-dim color on browsers without background-clip: text. */
    .try-pane-preview .pp-skeleton .sk-caption-text {
      background-image: linear-gradient(
        90deg,
        var(--text-dim, #8B829F) 0%,
        var(--text-dim, #8B829F) 30%,
        var(--text, #1A1530) 50%,
        var(--text-dim, #8B829F) 70%,
        var(--text-dim, #8B829F) 100%
      );
      background-size: 220% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: sk-caption-shimmer 2.4s linear infinite;
    }
    @keyframes sk-caption-shimmer {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    /* Respect prefers-reduced-motion: hold the dot at a soft pulse-free
       state and freeze the shimmer instead of removing it (so the gradient
       still differentiates the text from the skeleton bars visually). */
    @media (prefers-reduced-motion: reduce) {
      .try-pane-preview .pp-skeleton .sk-caption-dot { animation: none; }
      .try-pane-preview .pp-skeleton .sk-caption-text { animation: none; }
    }
    @keyframes pp-shimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    .try-pane {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 320px;
      transition: border-color 0.22s ease, transform 0.18s ease, box-shadow 0.22s ease;
      box-shadow: none;
    }
    .try-pane:hover {
      border-color: var(--border-strong);
      transform: none;
      box-shadow: none;
    }
    .try-pane.winner-cheap { border-color: var(--border-strong); box-shadow: none; }
    .try-pane.winner-fast  { border-color: var(--border-strong); box-shadow: none; }
    .try-pane-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 16px; border-bottom: 1px solid var(--border);
      background: rgba(28,28,28,0.02);
    }
    .try-pane-head .head-left { display: flex; align-items: center; gap: 10px; }
    .try-pane-head .name { font-weight: 600; font-size: 0.9375rem; }
    .try-pane-head .meta { font-family: 'Geist Mono', monospace; font-size: 0.75rem; color: var(--text-muted); }
    .pane-copy-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 28px; height: 28px;
      background: transparent; color: var(--text-muted);
      border: 1px solid var(--border); border-radius: 6px;
      cursor: pointer; transition: all 0.15s;
    }
    .pane-copy-btn:hover {
      background: rgba(28,28,28,0.02); color: var(--signal);
      border-color: rgba(28,28,28,0.2);
    }
    .pane-copy-btn.copied {
      background: rgba(74,222,128,0.12); color: #4ade80;
      border-color: rgba(74,222,128,0.4);
    }
    .try-pane-head .winner-tag {
      font-size: 0.6875rem; padding: 2px 8px; border-radius: 999px;
      font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
      animation: tag-in 0.4s ease-out;
    }
    .try-pane-head .winner-tag.cheap { background: rgba(74,222,128,0.16); color: #4ade80; border: 1px solid rgba(74,222,128,0.35); }
    .try-pane-head .winner-tag.fast  { background: rgba(96,165,250,0.16); color: #60a5fa; border: 1px solid rgba(96,165,250,0.35); }
    @keyframes tag-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }

    .try-pane-body {
      flex: 1; padding: 16px 18px; overflow-y: auto; font-size: 0.9rem;
      line-height: 1.6; word-wrap: break-word; max-height: 50vh;
    }
    .try-pane-chat-main {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      min-height: 0;
      min-width: 0;
    }
    .try-pane-body.md-body { white-space: normal; }
    .try-pane-body .err { color: #f87171; font-family: 'Geist Mono', monospace; font-size: 0.85em; padding: 8px 10px; border: 1px solid rgba(248,113,113,0.3); border-radius: 6px; background: rgba(248,113,113,0.05); margin-top: 8px; }
    .try-pane-body .typing-cursor {
      display: inline-block; width: 8px; height: 1.1em; vertical-align: text-bottom;
      background: var(--signal); margin-left: 2px; animation: blink 1s step-end infinite;
      border-radius: 1px;
    }
    @keyframes blink { 50% { opacity: 0; } }

    /* --- Markdown rendering inside .md ------------------------------ */
    .md > :first-child { margin-top: 0; }
    .md > :last-child { margin-bottom: 0; }
    .md p { margin: 0 0 12px; line-height: 1.6; }
    .md h1, .md h2, .md h3, .md h4 { margin: 18px 0 8px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--text); }
    .md h1 { font-size: 1.25rem; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
    .md h2 { font-size: 1.1rem; }
    .md h3 { font-size: 1rem; }
    .md h4 { font-size: 0.95rem; color: var(--text-muted); }
    .md ul, .md ol { margin: 0 0 12px; padding-left: 24px; }
    .md li { margin: 4px 0; line-height: 1.6; }
    .md li > p { margin: 0; }
    .md a { color: var(--signal); text-decoration: none; }
    .md a:hover { text-decoration: underline; }
    .md strong { font-weight: 600; color: var(--text); }
    .md em { font-style: italic; }
    .md hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
    .md blockquote {
      margin: 12px 0; padding: 4px 14px;
      border-left: 3px solid var(--signal);
      color: var(--text-muted); background: rgba(28,28,28,0.02);
      border-radius: 0 6px 6px 0;
    }
    .md code:not(pre > code) {
      background: rgba(28,28,28,0.04); color: var(--signal);
      padding: 1px 6px; border-radius: 4px;
      font-family: 'Geist Mono', monospace; font-size: 0.85em;
    }
    .md pre {
      position: relative;
      margin: 12px 0; padding: 12px 14px;
      background: #ffffff; border: 1px solid var(--border);
      border-radius: 8px; overflow-x: auto;
      font-family: 'Geist Mono', monospace; font-size: 0.825rem; line-height: 1.55;
    }
    .md pre .copy-btn {
      position: absolute; top: 8px; right: 8px;
      padding: 4px 10px; font-size: 0.7rem; font-family: 'Geist', sans-serif;
      font-weight: 500; cursor: pointer;
      background: rgba(255,255,255,0.06); color: var(--text-muted);
      border: 1px solid var(--border); border-radius: 6px;
      opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s;
      backdrop-filter: blur(4px);
    }
    .md pre:hover .copy-btn { opacity: 1; }
    .md pre .copy-btn:hover { background: rgba(28,28,28,0.04); color: var(--signal); border-color: rgba(28,28,28,0.2); }
    .md pre .copy-btn.copied { color: #4ade80; border-color: rgba(74,222,128,0.4); background: rgba(74,222,128,0.1); opacity: 1; }
    /* On touch devices the hover-to-show is broken — keep the button visible */
    @media (hover: none) {
      .md pre .copy-btn { opacity: 0.7; }
    }
    .md pre code {
      color: #1c1c1c; background: none; padding: 0; font-size: inherit;
      white-space: pre;
    }
    /* Syntax highlighting (highlight.js classes). Custom palette — keywords
       lean into the site's accent purple so it doesn't feel like a stock
       theme bolted on. */
    .md .hljs-comment, .md .hljs-quote { color: #6b7280; font-style: italic; }
    .md .hljs-keyword, .md .hljs-selector-tag, .md .hljs-built_in,
    .md .hljs-name, .md .hljs-tag                       { color: #a78bfa; }
    .md .hljs-string, .md .hljs-attr, .md .hljs-symbol,
    .md .hljs-bullet, .md .hljs-addition, .md .hljs-template-tag { color: #86efac; }
    .md .hljs-number, .md .hljs-literal, .md .hljs-regexp { color: #fbbf24; }
    .md .hljs-title, .md .hljs-section,
    .md .hljs-title.class_, .md .hljs-title.function_   { color: #93c5fd; }
    .md .hljs-attribute, .md .hljs-property,
    .md .hljs-meta, .md .hljs-link, .md .hljs-doctag    { color: #67e8f9; }
    .md .hljs-variable, .md .hljs-template-variable     { color: #fda4af; }
    .md .hljs-type, .md .hljs-class .hljs-title         { color: #fcd34d; }
    .md .hljs-deletion                                   { color: #f87171; }
    .md .hljs-emphasis  { font-style: italic; }
    .md .hljs-strong    { font-weight: 700; }
    /* Tool-call marker — fenced with `tool as the language tag */
    .md pre:has(code.language-tool),
    .md pre code.language-tool {
      background: rgba(0,208,132,0.06);
      border-color: rgba(0,208,132,0.2);
      color: var(--signal);
    }
    /* Tool-result marker — what the executor returned. Slightly muted so
       it reads as a quoted continuation under the call above. Pre-wrap so
       multi-line listings (list_files output, file contents) keep newlines. */
    .md pre:has(code.language-tool-result),
    .md pre code.language-tool-result {
      background: rgba(255,255,255,0.025);
      border-color: rgba(255,255,255,0.06);
      color: var(--text-muted);
      font-size: 0.78rem;
      white-space: pre-wrap;
    }
    .md pre:has(code.language-tool-result) { margin-top: -8px; }
    .md table {
      border-collapse: collapse; margin: 12px 0; width: 100%;
      font-size: 0.85rem;
    }
    .md th, .md td {
      padding: 8px 10px; text-align: left;
      border-bottom: 1px solid var(--border);
    }
    .md th { color: var(--text); font-weight: 600; background: rgba(255,255,255,0.02); }
    .md td { color: var(--text-muted); }

    .try-pane-cost {
      padding: 10px 16px; border-top: 1px solid var(--border);
      font-family: 'Geist Mono', monospace; font-size: 0.75rem;
      color: var(--text-muted); display: flex; align-items: center;
      background: rgba(28,28,28,0.02);
    }

    .spin {
      display: inline-block; width: 11px; height: 11px;
      border: 2px solid rgba(0,208,132,0.22);
      border-top-color: var(--signal); border-radius: 50%;
      animation: spin-rotate 0.7s linear infinite;
      vertical-align: -2px; margin-right: 8px;
    }
    @keyframes spin-rotate { to { transform: rotate(360deg); } }
    .send-btn-loading::before {
      content: ''; display: inline-block; width: 13px; height: 13px;
      border: 2px solid rgba(255,255,255,0.35); border-top-color: white;
      border-radius: 50%; animation: spin-rotate 0.7s linear infinite;
      vertical-align: -2px; margin-right: 10px;
    }
    .pane-fade-in { animation: pane-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
    @keyframes pane-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

    /* Mac-app conversion CTA — revealed by JS after the first successful
       run. Designed to feel like "the natural next step," not a banner ad. */
    .try-mac-cta {
      margin-top: 32px; padding: 28px 32px;
      border-radius: 12px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
      animation: pane-in 0.4s ease-out;
    }
    .try-mac-cta .cta-eyebrow {
      font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase;
      font-weight: 600; color: var(--text-muted);
    }
    .try-mac-cta .cta-body {
      font-size: 1rem; line-height: 1.55; color: var(--text); max-width: 720px;
    }
    .try-mac-cta .cta-body strong { color: var(--text); font-weight: 600; }
    .try-mac-cta .cta-features {
      margin: 4px 0 0; padding: 0; list-style: none;
      display: flex; flex-direction: column; gap: 8px;
      font-size: 0.9375rem; line-height: 1.5; color: var(--text);
    }
    .try-mac-cta .cta-features li {
      padding-left: 22px; position: relative;
    }
    .try-mac-cta .cta-features li::before {
      content: '→'; position: absolute; left: 0; top: 0;
      color: var(--text); font-weight: 600;
    }
    .try-mac-cta .cta-features strong { color: var(--text); font-weight: 600; }
    /* One-time pulse on first reveal — draws the eye to the CTA without
       being a permanent loop that nags forever. */
    @keyframes cta-first-pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(0,208,132,0); }
      50%      { box-shadow: 0 0 0 6px rgba(28,28,28,0.04); }
    }
    .try-mac-cta.first-reveal {
      animation: pane-in 0.4s ease-out, cta-first-pulse 1.6s ease-out 0.4s 2;
    }
    .try-mac-cta .cta-button {
      margin-top: 4px; background: #5a4a42; color: white;
      padding: 10px 18px; border-radius: 6px;
      font-weight: 400; font-size: 0.9375rem; text-decoration: none;
      transition: opacity 0.15s;
      box-shadow: rgba(0,0,0,0) 0px 0px 0px 0px,
                  rgba(0,0,0,0) 0px 0px 0px 0px,
                  rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset,
                  rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset,
                  rgba(0,0,0,0.05) 0px 1px 2px 0px;
    }
    .try-mac-cta .cta-button:hover { opacity: 0.9; }
    .try-mac-cta .cta-button:active { opacity: 0.8; }

    .try-foot {
      margin-top: 56px; padding-top: 28px;
      border-top: 1px solid var(--border);
      color: var(--text-muted); font-size: 0.8125rem;
      display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
    }
    .try-foot code { background: var(--bg-card); padding: 3px 8px; border-radius: 6px; font-size: 0.85em; color: var(--signal); }
    .try-foot a { color: var(--signal); text-decoration: none; font-weight: 500; }
    .try-foot a:hover { text-decoration: underline; }

    /* --- Responsive ------------------------------------------------- */

    /* Tablet / smaller laptop */
    @media (max-width: 900px) {
      .try-keys { grid-template-columns: 1fr; }   /* one row per provider */
      .try-panes { grid-template-columns: 1fr; }  /* one pane stacked */
      .try-pane-body { max-height: 56vh; }
    }

    /* Phone */
    @media (max-width: 720px) {
      .try-hero-wrap { padding: 88px 16px 24px; }
      .try-hero-wrap h1 { font-size: 1.875rem; line-height: 1.15; }
      .try-hero-wrap .lead { font-size: 0.9375rem; }
      .try-shell {
        margin: -12px 12px 0;
        padding: 22px 16px 56px;
        border-radius: 18px;
      }
      .try-section-label { font-size: 0.72rem; margin: 24px 0 10px; }
      .try-section-label .hint { display: block; margin-left: 0; margin-top: 4px; }

      .try-key-row {
        gap: 8px; padding: 10px 12px; flex-wrap: wrap; row-gap: 8px;
      }
      .try-key-row label { min-width: 0; font-size: 0.875rem; }
      .try-key-row input { font-size: 16px; flex: 1 1 100%; order: 99; }
      /* Hide the "saved" badge on phones — the row border already implies state. */
      .try-key-row .saved-badge { display: none; }
      .try-key-row .icon-btn { width: 32px; height: 32px; }
      .try-key-row .featured-tag { font-size: 0.65rem; padding: 1px 6px; }

      /* Folder card: stack the two option cards vertically. */
      .try-folder { padding: 14px; }
      .fs-fallback-opts { flex-direction: column !important; }

      .try-prompt-row { flex-direction: column; gap: 10px; }
      /* No reserved bottom strip — icons now live in a row below the textarea. */
      .try-prompt-row textarea { font-size: 16px; min-height: 96px; padding: 14px 16px; border-radius: 16px; }
      /* Direct-child only — Send button. Icon buttons inside .try-prompt-actions keep their own sizes. */
      .try-prompt-row > button { width: 100%; padding: 14px 24px; border-radius: 999px; min-height: 52px; }
      /* Action row: flow icons under the textarea so typed text can never overlap them. */
      .try-prompt-actions {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 6px 4px 0;
      }
      .try-attach-btn,
      .try-figma-btn,
      .try-mic-btn {
        position: static; bottom: auto; left: auto;
        width: 36px; height: 36px;
        min-height: auto;
        border: 1px solid var(--border);
        border-radius: 8px;
      }
      .try-mic-btn { opacity: 1; }
      .try-mic-lang {
        position: static; bottom: auto; left: auto;
        height: 36px;
        max-width: none;
        padding: 0 8px;
      }

      .try-empty { padding: 36px 16px; }
      .try-empty .icon { font-size: 28px; }

      .try-pane { min-height: 240px; }
      .try-pane-head { padding: 10px 12px; flex-wrap: wrap; gap: 6px; }
      .try-pane-head .meta { font-size: 0.7rem; }
      .try-pane-body { padding: 14px; font-size: 0.875rem; max-height: 60vh; }
      .try-pane-cost { padding: 8px 12px; font-size: 0.7rem; flex-wrap: wrap; line-height: 1.5; }

      .try-foot { flex-direction: column; align-items: flex-start; }

      /* Markdown — tighter on mobile */
      .md h1 { font-size: 1.125rem; }
      .md h2 { font-size: 1rem; }
      .md pre { padding: 10px 12px; font-size: 0.78rem; }
      .md table { font-size: 0.8rem; display: block; overflow-x: auto; }
    }

    /* --- Multi-turn pane bodies + follow-up row -------------------- */
    .try-pane-body .turn { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px dashed var(--border); }
    .try-pane-body .turn:last-of-type { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
    .try-pane-body .turn-user {
      font-family: 'Geist Mono', monospace; font-size: 0.78rem;
      color: var(--text-muted); margin: 0 0 8px;
      white-space: pre-wrap; word-wrap: break-word;
      padding: 6px 10px; border-radius: 6px;
      background: rgba(255,255,255,0.025);
      border-left: 2px solid var(--signal);
    }
    /* Per-pane "Ask for tweaks…" follow-up row removed by request — follow-ups
       go through the single main composer. !important beats the inline
       display:flex set in JS. */
    .try-pane-followup { display: none !important; }
    .try-pane-followup {
      display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px;
      border-top: 1px solid var(--border);
      background: rgba(255,255,255,0.015);
    }
    .try-pane-followup textarea {
      flex: 1; background: var(--bg); border: 1px solid var(--border);
      border-radius: 8px; padding: 8px 10px; color: var(--text);
      font-family: 'Geist', sans-serif; font-size: 0.875rem; line-height: 1.5;
      min-height: 36px; max-height: 120px; resize: vertical; outline: none;
      transition: border-color 0.15s;
    }
    .try-pane-followup textarea:focus { border-color: var(--signal); }
    .try-pane-followup button {
      background: var(--signal); color: white; border: none;
      padding: 0 14px; border-radius: 8px; cursor: pointer;
      font-weight: 600; font-size: 0.8125rem; flex-shrink: 0;
      transition: background 0.15s, opacity 0.15s;
    }
    .try-pane-followup button:hover:not(:disabled) { filter: brightness(1.1); }
    .try-pane-followup button:disabled { background: var(--bg-card); color: var(--text-dim); cursor: not-allowed; }
    /* Wrap textarea + 📎 so the paperclip sits inside the input visually. */
    .try-pane-followup .try-followup-input-wrap {
      flex: 1; position: relative; min-width: 0; display: flex;
    }
    .try-pane-followup .try-followup-input-wrap textarea {
      flex: 1; padding-left: 36px;
    }
    /* Override: keep the 📎 attach button visually neutral, distinct from Continue. */
    .try-pane-followup .try-attach-btn {
      position: absolute; left: 4px; bottom: 4px;
      width: 28px; height: 28px; padding: 0;
      display: flex; align-items: center; justify-content: center;
      background: transparent; color: var(--text-muted);
      border: none; border-radius: 6px;
      font-size: 1rem; font-weight: 400;
    }
    .try-pane-followup .try-attach-btn:hover { color: var(--text); }
    /* Drag-onto-followup highlight ring — mirrors prompt-row affordance. */
    .try-pane-followup.try-attach-drag textarea {
      border-color: var(--signal) !important;
      box-shadow: 0 0 0 4px rgba(28,28,28,0.04);
    }

    /* Open-on-phone modal — QR code + share URL. Auto-publishes the active
       prototype to /p/<id>, lets the user scan with their phone camera. */
    .phone-modal {
      position: fixed; inset: 0; z-index: 1100; display: none;
    }
    .phone-modal:not([hidden]) { display: block; }
    .phone-modal-backdrop {
      position: absolute; inset: 0; background: rgba(0,0,0,0.55);
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
      animation: phone-modal-fade 0.18s ease-out;
    }
    @keyframes phone-modal-fade { from { opacity: 0; } to { opacity: 1; } }
    .phone-modal-sheet {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: min(360px, calc(100vw - 32px));
      background: var(--bg-card); border: 1px solid var(--border-strong);
      border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,0.4);
      padding: 24px 24px 20px; box-sizing: border-box;
      animation: phone-modal-rise 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    @keyframes phone-modal-rise {
      from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
      to   { opacity: 1; transform: translate(-50%, -50%); }
    }
    .phone-modal-close {
      position: absolute; top: 10px; right: 12px;
      background: transparent; border: none; color: var(--text-muted);
      width: 30px; height: 30px; border-radius: 6px; cursor: pointer;
      font-size: 22px; line-height: 1; transition: all 0.12s;
    }
    .phone-modal-close:hover { background: rgba(168,85,247,0.08); color: var(--text); }
    .phone-modal-title {
      margin: 0 0 6px; font-size: 1.05rem; font-weight: 600;
      color: var(--text); font-family: 'Geist', sans-serif;
    }
    .phone-modal-hint {
      margin: 0 0 18px; font-size: 0.825rem;
      color: var(--text-muted); line-height: 1.4;
    }
    .phone-modal-qr-wrap {
      position: relative; width: 240px; height: 240px;
      margin: 0 auto 18px; border-radius: 10px;
      background: #fff; border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
    }
    .phone-modal-qr {
      width: 100%; height: 100%; object-fit: contain;
      opacity: 0; transition: opacity 0.2s;
    }
    .phone-modal-qr.ready { opacity: 1; }
    .phone-modal-status {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.85rem; color: var(--text-muted);
      font-family: 'Geist Mono', monospace;
      pointer-events: none;
    }
    .phone-modal-qr.ready + .phone-modal-status { display: none; }
    .phone-modal-url-row {
      display: flex; gap: 6px; align-items: stretch;
    }
    .phone-modal-url {
      flex: 1; min-width: 0;
      background: var(--bg); border: 1px solid var(--border);
      border-radius: 8px; padding: 8px 10px;
      font-family: 'Geist Mono', monospace; font-size: 0.78rem;
      color: var(--text); outline: none;
    }
    .phone-modal-url:focus { border-color: var(--signal); }
    .phone-modal-copy {
      background: var(--signal); color: white; border: none;
      border-radius: 8px; padding: 8px 14px; cursor: pointer;
      font-family: 'Geist', sans-serif; font-size: 0.825rem; font-weight: 600;
      transition: filter 0.12s;
    }
    .phone-modal-copy:hover:not(:disabled) { filter: brightness(1.1); }
    .phone-modal-copy:disabled { opacity: 0.5; cursor: not-allowed; }
    .phone-modal-copy.copied { background: #16a34a; }

    /* Preview button in pane head */
    .pane-preview-btn {
      background: rgba(28,28,28,0.02); color: var(--signal);
      border: 1px solid rgba(0,208,132,0.3); border-radius: 6px;
      padding: 4px 10px; font-size: 0.75rem; font-weight: 600;
      font-family: 'Geist', sans-serif; cursor: pointer;
      transition: all 0.15s;
    }
    .pane-preview-btn:hover:not(:disabled) {
      background: rgba(28,28,28,0.04); border-color: rgba(28,28,28,0.4);
      transform: translateY(-1px);
    }
    .pane-preview-btn:disabled { opacity: 0.35; cursor: not-allowed; }

    /* --- Preview modal ---------------------------------------------- */
    .try-preview-modal { position: fixed; inset: 0; z-index: 1000; display: none; }
    .try-preview-modal.open { display: block; }
    .try-preview-backdrop {
      position: absolute; inset: 0; background: rgba(0,0,0,0.7);
      backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
      animation: pmodal-fade 0.2s ease-out;
    }
    @keyframes pmodal-fade { from { opacity: 0; } to { opacity: 1; } }
    .try-preview-shell {
      position: absolute; top: 32px; left: 32px; right: 32px; bottom: 32px;
      background: var(--bg-card); border: 1px solid var(--border-strong);
      border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,0.5);
      display: flex; flex-direction: column; overflow: hidden;
      animation: pmodal-rise 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    @keyframes pmodal-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    .try-preview-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 16px; border-bottom: 1px solid var(--border);
      background: rgba(255,255,255,0.02);
    }
    .try-preview-title { font-weight: 600; font-size: 0.9375rem; color: var(--text); }
    .try-preview-actions { display: flex; align-items: center; gap: 8px; }
    .try-preview-btn {
      background: rgba(255,255,255,0.04); color: var(--text-muted);
      border: 1px solid var(--border); border-radius: 6px;
      padding: 6px 12px; font-size: 0.8125rem; font-weight: 500;
      font-family: 'Geist', sans-serif; cursor: pointer;
      transition: all 0.15s;
    }
    .try-preview-btn:hover {
      background: rgba(28,28,28,0.04); color: var(--signal);
      border-color: rgba(28,28,28,0.2);
    }
    .try-preview-btn.copied { background: rgba(74,222,128,0.12); color: #4ade80; border-color: rgba(74,222,128,0.4); }
    .try-preview-btn.primary-action { background: var(--signal); color: white; border-color: transparent; font-weight: 600; }
    .try-preview-btn.primary-action:hover { filter: brightness(1.1); border-color: transparent; color: white; }
    .try-preview-close {
      background: transparent; color: var(--text-muted); border: none;
      width: 32px; height: 32px; border-radius: 6px; cursor: pointer;
      font-size: 22px; line-height: 1; transition: all 0.15s;
    }
    .try-preview-close:hover { background: rgba(248,113,113,0.1); color: #f87171; }
    .try-preview-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
    .try-preview-body[data-view="code"]    .try-preview-frame-wrap,
    .try-preview-body[data-view="code"]    .try-preview-divider { display: none; }
    .try-preview-body[data-view="preview"] .try-preview-code-wrap,
    .try-preview-body[data-view="preview"] .try-preview-divider { display: none; }
    .try-preview-body[data-view="code"]    .try-preview-code-wrap  { flex: 1; min-height: 0; }
    .try-preview-body[data-view="preview"] .try-preview-frame-wrap { flex: 1; min-height: 0; }
    .try-preview-body[data-view="split"]   .try-preview-code-wrap {
      flex: 0 1 42%;
      max-height: min(50vh, 520px);
      min-height: 140px;
      min-width: 0;
    }
    .try-preview-body[data-view="split"]   .try-preview-frame-wrap {
      flex: 1 1 auto;
      min-height: 0;
      min-width: 0;
    }
    .try-preview-divider { height: 1px; width: auto; background: var(--border); flex-shrink: 0; }

    .try-preview-code-wrap {
      background: #ffffff; min-width: 0; min-height: 0;
      display: flex;
    }
    .try-preview-code {
      flex: 1; width: 100%; height: 100%; resize: none; border: none; outline: none;
      background: transparent; color: #1c1c1c;
      font-family: 'Geist Mono', monospace; font-size: 0.8125rem; line-height: 1.55;
      padding: 12px 14px;
      tab-size: 2; -moz-tab-size: 2;
    }
    .try-preview-frame-wrap {
      flex: 1; background: var(--bg); position: relative;
      min-width: 0; min-height: 0;
      display: flex; flex-direction: column;
    }
    .try-preview-viewport-bar {
      display: flex; gap: 4px; padding: 8px 10px;
      background: var(--bg-card-hover);
      border-bottom: 1px solid var(--border);
    }
    .try-preview-viewport-bar .viewport {
      background: transparent; color: var(--text-dim); border: 1px solid transparent;
      padding: 3px 10px; font-size: 0.72rem; font-weight: 500;
      font-family: 'Geist', sans-serif; cursor: pointer; border-radius: 5px;
      transition: all 0.12s;
    }
    .try-preview-viewport-bar .viewport:hover { color: var(--text); background: var(--bg-card); }
    .try-preview-viewport-bar .viewport.active {
      background: var(--bg-card); color: var(--signal);
      border-color: var(--border-strong);
    }
    .try-preview-frame-inner {
      flex: 1; overflow: auto; display: flex; justify-content: center; align-items: stretch;
      padding: 0;
      min-width: 0;
    }
    .try-preview-frame-wrap[data-viewport="fluid"]   .try-preview-frame-inner {
      padding: 0;
      align-items: flex-start;
      justify-content: center;
    }
    .try-preview-frame-wrap[data-viewport="desktop"] .try-preview-frame-inner,
    .try-preview-frame-wrap[data-viewport="tablet"]  .try-preview-frame-inner,
    .try-preview-frame-wrap[data-viewport="mobile"]  .try-preview-frame-inner { padding: 16px; align-items: flex-start; }
    .try-preview-frame {
      width: 100%; height: 100%; border: none; background: white;
      box-shadow: 0 4px 24px rgba(0,0,0,0.4);
      min-width: 0;
      max-width: 100%;
    }
    .try-preview-frame-wrap[data-viewport="fluid"]   .try-preview-frame { box-shadow: none; }
    .try-preview-frame-wrap[data-viewport="desktop"] .try-preview-frame { width: 1280px; max-width: 100%; }
    .try-preview-frame-wrap[data-viewport="tablet"]  .try-preview-frame { width: 768px; max-width: 100%; }
    .try-preview-frame-wrap[data-viewport="mobile"]  .try-preview-frame { width: 375px; max-width: 100%; }

    /* Turn navigator (version history) — sits between title and view-toggle */
    .try-preview-turn-nav {
      display: inline-flex; align-items: center; gap: 4px;
      margin-left: 12px; padding: 2px 4px;
      background: rgba(255,255,255,0.04); border: 1px solid var(--border);
      border-radius: 8px;
    }
    .try-preview-turn-nav .turn-nav-btn {
      width: 22px; height: 22px; padding: 0;
      background: transparent; color: var(--text-muted);
      border: none; border-radius: 4px;
      font-size: 14px; line-height: 1; cursor: pointer;
      transition: all 0.12s;
    }
    .try-preview-turn-nav .turn-nav-btn:hover:not(:disabled) {
      background: rgba(28,28,28,0.04); color: var(--signal);
    }
    .try-preview-turn-nav .turn-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
    .try-preview-turn-nav .turn-nav-label {
      font-size: 0.72rem; color: var(--text-muted); padding: 0 6px; min-width: 70px; text-align: center;
      font-family: 'Geist Mono', monospace;
    }

    /* Element-edit overlay — slides up from bottom of the preview pane */
    .try-preview-edit-overlay {
      position: absolute; left: 0; right: 0; bottom: 0;
      padding: 16px; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.6) 30%);
      pointer-events: none; opacity: 0;
      transition: opacity 0.2s;
      z-index: 5;
    }
    .try-preview-edit-overlay[data-open="true"] { opacity: 1; pointer-events: auto; }
    .try-preview-edit-overlay .edit-card {
      max-width: 640px; margin: 0 auto;
      background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 12px;
      box-shadow: 0 12px 40px rgba(0,0,0,0.5);
      padding: 14px 16px;
    }
    .try-preview-edit-overlay .edit-head {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 10px;
    }
    .try-preview-edit-overlay .edit-title { font-weight: 600; color: var(--text); font-size: 0.875rem; }
    .try-preview-edit-overlay .edit-close {
      background: transparent; border: none; color: var(--text-muted);
      font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 4px;
    }
    .try-preview-edit-overlay .edit-close:hover { color: #f87171; background: rgba(248,113,113,0.1); }
    .try-preview-edit-overlay .edit-selection {
      max-height: 80px; overflow-y: auto; margin: 0 0 10px;
      padding: 8px 10px; background: #ffffff; color: #1c1c1c;
      border-radius: 6px; border: 1px solid var(--border);
      font-family: 'Geist Mono', monospace; font-size: 0.75rem; line-height: 1.45;
      white-space: pre-wrap; word-wrap: break-word;
    }
    .try-preview-edit-overlay .edit-input {
      width: 100%; box-sizing: border-box; resize: vertical;
      background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
      padding: 8px 10px; color: var(--text);
      font-family: 'Geist', sans-serif; font-size: 0.875rem; line-height: 1.5;
      outline: none; transition: border-color 0.15s;
    }
    .try-preview-edit-overlay .edit-input:focus { border-color: var(--signal); }
    .try-preview-edit-overlay .edit-actions {
      display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px;
    }
    .try-preview-edit-overlay .try-preview-btn.primary {
      background: var(--signal); color: white; border-color: transparent;
    }
    .try-preview-edit-overlay .try-preview-btn.primary:hover {
      background: var(--signal); filter: brightness(1.1); color: white;
    }
    .try-preview-edit-overlay .try-preview-btn.primary:hover { border-color: transparent; }

    .vp-left { display: flex; gap: 4px; }
    .vp-edit-hint {
      font-size: 0.7rem; color: var(--text-dim); font-family: 'Geist Mono', monospace;
      padding-left: 12px; line-height: 1; align-self: center;
    }
    .try-preview-viewport-bar { display: flex; align-items: center; justify-content: space-between; }

    /* View-mode toggle (code / split / preview) — sits between title and actions */
    .try-preview-view-toggle {
      display: inline-flex; gap: 0;
      background: rgba(255,255,255,0.04); border: 1px solid var(--border);
      border-radius: 8px; padding: 2px; margin: 0 12px;
    }
    .try-preview-view-toggle .view-mode {
      background: transparent; color: var(--text-muted); border: none;
      padding: 4px 10px; font-size: 0.78rem; font-weight: 500;
      font-family: 'Geist', sans-serif; cursor: pointer; border-radius: 6px;
      transition: all 0.12s;
    }
    .try-preview-view-toggle .view-mode:hover { color: var(--text); }
    .try-preview-view-toggle .view-mode.active {
      background: rgba(28,28,28,0.04); color: var(--signal);
    }

    @media (max-width: 720px) {
      .try-preview-shell { top: 8px; left: 8px; right: 8px; bottom: 8px; }
      .try-preview-head {
        padding: 10px 12px;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
      }
      .try-preview-title { min-width: 0; font-size: 0.875rem; }
      .try-preview-turn-nav { margin-left: 0; align-self: flex-start; }
      .try-preview-view-toggle { margin: 0; align-self: flex-start; }
      .try-preview-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
      }
      .try-preview-actions .try-preview-close {
        grid-column: 1 / -1;
        width: 100%;
        height: 36px;
      }
      .try-preview-btn { padding: 8px 10px; font-size: 0.75rem; }
      .try-preview-view-toggle .view-mode { padding: 3px 8px; font-size: 0.72rem; }
      .try-preview-viewport-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }
      .vp-left { flex-wrap: wrap; max-width: 100%; }
      .vp-edit-hint {
        padding-left: 0;
        font-size: 0.68rem;
        line-height: 1.4;
        max-width: 100%;
        white-space: normal;
      }
      .pane-preview-btn { padding: 3px 8px; font-size: 0.7rem; }
      .try-pane-followup { padding: 8px 12px; }
    }

    /* Small phone */
    @media (max-width: 380px) {
      .try-hero-wrap h1 { font-size: 1.625rem; }
      .try-hero-eyebrow { font-size: 0.75rem; padding: 4px 10px; }
      .try-key-row { padding: 9px 10px; }
      .try-key-row .icon-btn { width: 28px; height: 28px; }
      .try-pane-head .meta { word-break: break-all; }
    }

    /* ── Build focus — near-full-viewport workspace + composer at bottom ─ */
    body.try-build-focus:not(.embed) {
      overflow: hidden;
    }
    body.try-build-focus:not(.embed) .nav-bar,
    body.try-build-focus:not(.embed) .try-hero-wrap,
    body.try-build-focus:not(.embed) .try-mac-cta,
    body.try-build-focus:not(.embed) .try-foot,
    body.try-build-focus:not(.embed) #try-examples-grid,
    body.try-build-focus:not(.embed) #try-templates-section,
    body.try-build-focus:not(.embed) #advanced-disclosure {
      display: none !important;
    }
    body.try-build-focus:not(.embed) main.try-shell {
      /* Self-pin the shell rather than depending on body.try-has-session for
         position:fixed. try-build-focus can be active BEFORE has-session
         flips — maybeAutoTryBuildFocus() adds it on first output, while
         try-has-session only lands once paneByProvider.size > 0 via
         syncTrySessionChrome(). In that gap the shell fell back to normal
         flow at min-height:calc(100dvh-48px) — taller than the viewport —
         which pushed the bottom composer (.try-prompt-row, order:1) off the
         bottom edge. Pinning top:48/bottom:0 here makes height = viewport-48
         unconditionally, so the composer can't leave the viewport. */
      position: fixed;
      top: 48px; /* sit below the 48px app-topbar */
      right: 0;
      bottom: 0;
      left: 0;
      margin: 0;
      padding: 12px 16px max(16px, env(safe-area-inset-bottom));
      padding-left: max(16px, env(safe-area-inset-left));
      padding-right: max(16px, env(safe-area-inset-right));
      padding-top: max(12px, env(safe-area-inset-top));
      max-width: none;
      width: 100%;
      box-sizing: border-box;
      overflow: hidden;
      border-radius: 0;
      border: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    body.try-build-focus:not(.embed) main.try-shell > #workspace:not([hidden]) {
      flex: 1 1 auto;
      min-height: 0;
      order: -1;
      margin-top: 0;
    }
    body.try-build-focus:not(.embed) main.try-shell > .try-prompt-row {
      flex-shrink: 0;
      order: 1;
    }
    body.try-build-focus:not(.embed) main.try-shell > .try-prompt-hint {
      flex-shrink: 0;
      order: 2;
      margin-bottom: 0;
    }
    body.try-build-focus:not(.embed) .try-workspace.tabbed .try-pane.active {
      height: calc(100dvh - 200px);
      max-height: calc(100dvh - 200px);
      /* Collapse chat column; preview takes the full width. */
      grid-template-columns: minmax(0, 1fr) !important;
    }
    body.try-build-focus:not(.embed) .try-workspace.tabbed .try-pane.active > .try-pane-chat-main,
    body.try-build-focus:not(.embed) .try-workspace.tabbed .try-pane.active > .try-pane-followup,
    body.try-build-focus:not(.embed) .try-workspace.tabbed .try-pane.active > .try-pane-edited {
      display: none;
    }
    body.try-build-focus:not(.embed) .try-workspace.tabbed .try-pane > .try-pane-preview {
      min-height: 0;
      max-height: none;
      grid-column: 1 / -1;
    }
    body.try-build-focus:not(.embed) .try-workspace.tabbed .try-pane > .try-pane-chat-main > .try-pane-body {
      max-height: none;
    }
    /* ─────────────────────────────────────────────────────────────────
       Embed mode — /try.html?embed=1
       Strips the page down to just the panes, optimized for 1080x1920
       9:16 screen capture by Playwright. Used by the marketing-video
       pipeline (record-demo.mjs). All chrome (nav, hero, sections,
       prompt, footer) hides; panes stack vertically and fullbleed.
       ──────────────────────────────────────────────────────────────── */
    body.embed { background: #07070a; overflow: hidden; }
    body.embed .nav-bar,
    body.embed .try-hero-wrap,
    body.embed .try-section-label,
    body.embed .try-keys,
    body.embed .try-folder,
    body.embed .try-prompt-row,
    body.embed .try-prompt-hint,
    body.embed .try-foot,
    body.embed .try-empty,
    body.embed .try-examples-grid,
    body.embed #try-templates-section,
    body.embed #advanced-disclosure,
    body.embed .try-stack-row,
    body.embed .try-demo-banner { display: none !important; }
    body.embed .try-focus-close { display: none !important; }
    body.embed .try-shell {
      margin: 0;
      padding: 0;
      max-width: none;
      border: none;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    body.embed .try-shell::before { display: none; }
    body.embed .try-panes {
      display: flex; flex-direction: column; gap: 0; margin: 0;
      height: 100vh; width: 100vw;
    }
    body.embed .try-pane {
      flex: 1; min-height: 0; border-radius: 0;
      border-left: 0; border-right: 0; border-top: 0;
      animation: none;
    }
    body.embed .try-pane:first-of-type { border-top: 0; }
    body.embed .try-pane-body { max-height: none; padding: 18px 28px; font-size: 1rem; }
    body.embed .try-pane-body .turn { padding-bottom: 0; border-bottom: 0; margin-bottom: 0; }
    body.embed .try-pane-body .turn-user { display: none; }
    body.embed .try-pane-head { padding: 14px 28px; }
    body.embed .try-pane-head .name { font-size: 1.25rem; }
    body.embed .try-pane-head .meta { font-size: 0.875rem; }
    body.embed .try-pane-head .pane-preview-btn,
    body.embed .try-pane-head .pane-copy-btn { display: none; }
    body.embed .try-pane-followup { display: none; }
    body.embed .try-pane-cost { padding: 12px 28px; font-size: 0.95rem; }
    /* Synthesized topic chyron at the very top — main.js injects this. */
    .try-embed-topic {
      display: none;
      position: fixed; top: 0; left: 0; right: 0;
      padding: 22px 32px;
      background: linear-gradient(180deg, rgba(28,28,28,0.04), rgba(0,208,132,0.05) 80%, transparent);
      color: var(--text); font-weight: 600;
      font-size: 1.4rem; line-height: 1.4;
      z-index: 50;
      pointer-events: none;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .try-embed-topic .label {
      display: inline-block; font-size: 0.78rem; font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--signal); margin-right: 12px;
    }
    body.embed .try-embed-topic { display: block; }
    body.embed .try-panes { padding-top: 96px; }

    /* Big end-card overlay shown after the race finishes. main.js fades
       it in once all panes report finalLatencyMs. */
    .try-embed-endcard {
      position: fixed; inset: 0; z-index: 100;
      display: flex; align-items: center; justify-content: center;
      flex-direction: column; gap: 20px;
      background: radial-gradient(ellipse at center, rgba(0,208,132,0.30) 0%, rgba(7,7,10,0.92) 65%, rgba(7,7,10,0.98) 100%);
      opacity: 0; pointer-events: none; transition: opacity 0.6s;
      text-align: center; padding: 40px;
    }
    .try-embed-endcard.show { opacity: 1; }
    .try-embed-endcard h2 {
      font-size: clamp(2.4rem, 6vw, 4rem);
      margin: 0; font-weight: 800; letter-spacing: -0.025em;
      background: linear-gradient(180deg, #fff 0%, #b8b8b8 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .try-embed-endcard .url {
      font-family: 'Geist Mono', monospace; font-size: clamp(1.2rem, 3vw, 1.8rem);
      color: var(--signal); font-weight: 600;
    }
    .try-embed-endcard .winners {
      display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
      margin-top: 8px;
    }
    .try-embed-endcard .winners .badge {
      padding: 10px 18px; border-radius: 999px;
      font-size: 1rem; font-weight: 600;
    }
    .try-embed-endcard .winners .cheap { background: rgba(74,222,128,0.18); color: #4ade80; border: 1px solid rgba(74,222,128,0.4); }
    .try-embed-endcard .winners .fast  { background: rgba(96,165,250,0.18); color: #60a5fa; border: 1px solid rgba(96,165,250,0.4); }

    .site-footer { border-top: 1px solid rgba(168,85,247,0.12); padding: 60px 40px 40px; background: #0c0a14; }
    .site-footer .footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 48px; max-width: 1200px; margin: 0 auto 48px; }
    .site-footer .footer-brand p { color: #8B829F; font-size: 13px; margin-top: 16px; max-width: 280px; line-height: 1.5; }
    .site-footer .footer-logo-link { display: inline-flex; align-items: center; gap: 10px; font-family: "Instrument Serif", Georgia, serif; font-size: 1.375rem; font-style: italic; color: #fff; text-decoration: none; }
    .site-footer .footer-logo-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: #A855F7; border-radius: 6px; color: #fff; font-family: "Instrument Serif", Georgia, serif; font-size: 20px; font-style: normal; transform: rotate(-4deg); box-shadow: 0 6px 20px rgba(168,85,247,0.30); }
    .site-footer .footer-col h4 { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: #8B829F; margin-bottom: 16px; font-weight: 500; }
    .site-footer .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 0; }
    .site-footer .footer-col a { color: #8B829F; text-decoration: none; font-size: 14px; }
    .site-footer .footer-col a:hover { color: #fff; }
    .site-footer .footer-bottom { max-width: 1200px; margin: 0 auto; padding-top: 32px; border-top: 1px solid rgba(168,85,247,0.12); display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #5D5475; font-family: "JetBrains Mono", ui-monospace, monospace; flex-wrap: wrap; gap: 16px; }
    @media (max-width: 900px) { .site-footer .footer-grid { grid-template-columns: 1.4fr repeat(2, 1fr); gap: 32px; } .site-footer .footer-grid .footer-col:nth-child(5) { grid-column: 2 / span 2; } }
    @media (max-width: 640px) { .site-footer { padding: 48px 20px 32px; } .site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 36px; } .site-footer .footer-grid .footer-col:nth-child(5) { grid-column: auto; } .site-footer .footer-brand { grid-column: span 2; } .site-footer .footer-brand p { max-width: 100%; } }
    @media (max-width: 480px) { .site-footer { padding: 44px 16px 28px; } .site-footer .footer-grid { grid-template-columns: 1fr; gap: 28px; margin-bottom: 32px; } .site-footer .footer-brand { grid-column: auto; } .site-footer .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 24px; } }
    /* Compact nav search — sits between canonical links and the auth CTAs. */
  .nav-search-li { list-style: none; display: inline-flex; }
  .nav-search {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border, var(--border-hi, rgba(168, 85, 247, 0.18)));
    border-radius: 100px;
    padding: 4px 10px 4px 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
    max-width: 220px; min-width: 0;
    margin: 0 4px;
  }
  .nav-search:focus-within {
    border-color: var(--signal, var(--accent, #A855F7));
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
  }
  .nav-search svg {
    width: 14px; height: 14px; flex-shrink: 0;
    color: var(--text-muted, var(--ink-dim, #5D5475));
  }
  .nav-search input {
    border: none; outline: none; background: transparent;
    font-family: 'Geist', -apple-system, sans-serif;
    font-size: 13px;
    color: var(--text, var(--ink, #1A1530));
    padding: 4px 0; width: 130px; min-width: 0;
  }
  .nav-search input::placeholder { color: var(--text-dim, var(--ink-faint, #8B829F)); }
  @media (max-width: 980px) { .nav-search, .nav-search-li { display: none !important; } }

  /* ---- Dashboard view (builder-by-default landing) -------------------- */
  /* Top padding clears the fixed .site-nav (~64px) plus breathing room;
     matches the legacy .try-hero-wrap offset so the heading isn't masked. */
  #dashboard-view {
    max-width: 1100px;
    margin: 0 auto;
    padding: 120px 24px 96px;
  }
  .dash-hero {
    text-align: center;
    margin: 0 auto 40px;
    max-width: 720px;
  }
  .dash-title {
    font-family: var(--ff-display, 'Geist', sans-serif);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    color: var(--text, #1A1530);
  }
  .dash-lede {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-muted, #6B6480);
    margin: 0 0 24px;
  }
  .dash-prompt-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, rgba(0,0,0,0.12));
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 8px 24px -12px rgba(58, 30, 120, 0.18);
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .dash-prompt-row:focus-within {
    border-color: var(--signal, #4f46e5);
    box-shadow: 0 8px 28px -10px rgba(79, 70, 229, 0.32);
  }
  .dash-prompt {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    resize: none;
    padding: 10px 12px;
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--text);
    background: transparent;
  }
  .dash-prompt::placeholder { color: var(--text-muted, #6B6480); }
  .dash-launch-btn {
    align-self: stretch;
    padding: 10px 22px;
    border-radius: 8px;
    border: none;
    background: var(--signal, #4f46e5);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: filter 0.15s;
    white-space: nowrap;
  }
  .dash-launch-btn:hover { filter: brightness(0.94); }
  .dash-launch-btn:disabled { opacity: 0.55; cursor: not-allowed; }
  .dash-prompt-hint {
    margin: 10px 0 0;
    font-size: 0.78rem;
    color: var(--text-muted, #6B6480);
    text-align: center;
  }
  .dash-prompt-hint .cmd-hint { opacity: 0.8; }
  .dash-section { margin-top: 40px; }
  .dash-section-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, #6B6480);
    margin: 0 0 16px 0;
  }
  .dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
  }
  .dash-card {
    border: 1px solid var(--border, rgba(0,0,0,0.1));
    border-radius: 12px;
    padding: 14px;
    background: var(--bg-card, #fff);
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    text-align: left;
    width: 100%;
    color: inherit;
    font: inherit;
    text-decoration: none;
    display: block;
    /* Anchors the bottom-right "…" overflow menu trigger + its popover. */
    position: relative;
  }
  /* Bottom-right overflow menu (Delete + future Rename / Make public).
     ALWAYS visible — the previous hover-to-reveal version was invisible on
     touch devices and undiscoverable everywhere else. Mild background tint
     so the "⋯" reads as an affordance, not stray text. */
  .dash-card-menu-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-muted, #6B6480);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    padding: 0;
  }
  .dash-card-menu-btn:hover,
  .dash-card-menu-btn:focus-visible {
    background: rgba(0, 0, 0, 0.08);
    color: var(--text, #1a1a1a);
    border-color: var(--border, rgba(0, 0, 0, 0.18));
  }
  /* Popover that floats above the "…" trigger. z-index sits above the card's
     own hover transform so it isn't clipped by sibling tiles. */
  .dash-card-menu {
    position: absolute;
    bottom: 46px;
    right: 10px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
    z-index: 10;
    min-width: 140px;
    cursor: default;
  }
  .dash-card-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--text, #1a1a1a);
    cursor: pointer;
    border-radius: 4px;
    font: inherit;
    font-size: 0.9rem;
  }
  .dash-card-menu-item:hover {
    background: rgba(0, 0, 0, 0.05);
  }
  .dash-card-menu-item.danger {
    color: #d32f2f;
  }
  .dash-card-menu-item.danger:hover {
    background: rgba(211, 47, 47, 0.08);
  }
  .dash-card:hover {
    border-color: var(--signal, #4f46e5);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.06);
  }
  .dash-card-thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--bg-card-hover, #f5f4fa);
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--text-muted, #6B6480);
  }
  .dash-card-title {
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0 0 4px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dash-card-meta {
    font-size: 0.78rem;
    color: var(--text-muted, #6B6480);
  }
  @media (max-width: 600px) {
    #dashboard-view { padding: 96px 16px 64px; }
    .dash-title { font-size: 1.4rem; }
  }

  /* ---- App-view top bar (new IA) ------------------------------------- */
  .app-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    height: 48px;
    border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
    background: var(--bg, #fff);
    position: sticky;
    top: 0;
    /* Above in-pane overlays (z:50) so the "More" dropdown isn't painted over,
       but below the real modals (ckpt-preview z:100, preview-modal z:1000). */
    z-index: 90;
  }
  .topbar-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .topbar-app-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
  }
  .topbar-icon-btn {
    width: 30px; height: 30px;
    display: inline-flex;
    align-items: center; justify-content: center;
    border: none; background: transparent;
    border-radius: 6px; cursor: pointer;
    font-size: 1rem; color: var(--text);
  }
  .topbar-icon-btn:hover { background: rgba(0,0,0,0.06); }
  .topbar-icon-btn[aria-pressed="true"] {
    background: var(--bg-card-hover, #f1eef9);
    color: var(--signal, #4f46e5);
  }
  .topbar-chips {
    display: flex; align-items: center; gap: 6px;
    flex: 1; min-width: 0; overflow-x: auto;
  }
  .chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--border, rgba(0,0,0,0.12));
    background: transparent; color: var(--text);
    font-size: 0.78rem; cursor: pointer;
    white-space: nowrap;
  }
  .chip:hover { background: rgba(0,0,0,0.04); }
  .chip-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--text-muted, #9b94ab);
    flex-shrink: 0;
  }
  .chip[data-connected="1"] .chip-dot { background: var(--success, #10b981); }
  /* Active-provider chip in the topbar. Single tab = static chip; 2+ tabs = button with caret + dropdown. */
  .topbar-provider { position: relative; display: inline-flex; }
  .topbar-provider-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--border, rgba(0,0,0,0.12));
    background: transparent; color: var(--text);
    font-size: 0.78rem; white-space: nowrap;
    font-family: inherit;
  }
  .topbar-provider-chip[data-clickable="1"] { cursor: pointer; }
  .topbar-provider-chip[data-clickable="1"]:hover { background: rgba(0,0,0,0.04); }
  .topbar-provider-chip .chip-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .topbar-provider-chip .topbar-provider-cost { color: var(--text-muted, #9b94ab); font-variant-numeric: tabular-nums; }
  .topbar-provider-chip .topbar-provider-caret { color: var(--text-muted, #9b94ab); margin-left: 2px; }
  .topbar-provider-menu {
    position: absolute; left: 0; top: calc(100% + 6px);
    min-width: 200px;
    background: var(--bg, #fff);
    border: 1px solid var(--border, rgba(0,0,0,0.12));
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    z-index: 60;
    padding: 4px;
  }
  .topbar-provider-menu button {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 6px 10px;
    background: transparent; border: none; border-radius: 6px;
    font-size: 0.85rem; color: var(--text); cursor: pointer; text-align: left;
    font-family: inherit;
  }
  .topbar-provider-menu button:hover { background: rgba(0,0,0,0.04); }
  .topbar-provider-menu button[aria-current="true"] { background: var(--bg-card-hover, #f1eef9); color: var(--signal, #4f46e5); }
  .topbar-provider-menu .topbar-provider-cost { margin-left: auto; color: var(--text-muted, #9b94ab); font-variant-numeric: tabular-nums; }
  /* Topbar now owns the active-provider chip, Focus, Compare, and More — the
     entire below-topbar tab strip + toolbar wrapper is redundant in tabbed mode. */
  .try-workspace.tabbed > .try-workspace-tabbar { display: none; }
  #workspace-tabs { display: none; }
  /* Preview header (Publish / 📱 / ↗ Expand) now lives in the topbar via the
     topbar-expand-btn + topbar-viewport-btn + the existing topbar-deploy-btn. */
  .try-workspace.tabbed .try-pane-preview .try-pane-preview-bar { display: none; }
  .topbar-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
  .topbar-more-wrap { position: relative; }
  .topbar-btn {
    font-size: 0.85rem;
    padding: 6px 12px; border-radius: 6px;
    border: 1px solid var(--border, rgba(0,0,0,0.12));
    background: transparent; color: var(--text);
    cursor: pointer;
    white-space: nowrap;
  }
  .topbar-btn:hover { background: rgba(0,0,0,0.04); }
  .topbar-btn[aria-pressed="true"] {
    background: var(--bg-card-hover, #f1eef9);
    border-color: var(--signal, #4f46e5);
    color: var(--signal, #4f46e5);
  }
  .topbar-btn-primary {
    background: var(--signal, #4f46e5);
    color: #fff;
    border-color: transparent;
  }
  .topbar-btn-primary:hover { filter: brightness(0.94); background: var(--signal, #4f46e5); }
  .topbar-menu {
    position: absolute;
    right: 0; top: calc(100% + 6px);
    min-width: 220px;
    background: var(--bg, #fff);
    border: 1px solid var(--border, rgba(0,0,0,0.1));
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    z-index: 50;
    /* Promote to its own compositing layer. The sandboxed about:srcdoc preview
       iframe gets a GPU layer that overdraws normal content regardless of
       z-index; forcing the menu onto its own layer makes it composite above. */
    transform: translateZ(0);
  }
  .topbar-menu button {
    display: block; width: 100%; text-align: left;
    padding: 8px 12px; border-radius: 6px;
    border: none; background: transparent;
    color: var(--text);
    cursor: pointer;
    font-size: 0.85rem;
  }
  .topbar-menu button:hover { background: rgba(0,0,0,0.06); }

  /* Hide the legacy workspace toolbar — its functionality lives in the
     new top bar; the buttons themselves stay in DOM so existing
     click-handlers from main-supabase.js etc. remain bound. */
  #workspace-toolbar { display: none !important; }

  /* Inline toast (used by Compare gating + Deploy feedback in later tasks). */
  .inline-toast {
    position: fixed;
    bottom: 24px; left: 50%; transform: translateX(-50%);
    padding: 10px 16px;
    background: rgba(0,0,0,0.85);
    color: #fff;
    border-radius: 8px;
    font-size: 0.85rem;
    z-index: 200;
  }
  .inline-toast[hidden] { display: none; }
  /* Providers nudge: replaces the old auto-expand-the-credentials-panel UX.
     Persists until the user clicks the CTA or dismisses it. */
  .providers-nudge {
    position: fixed;
    bottom: 24px; right: 24px;
    max-width: 360px;
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px;
    background: var(--bg-card, #fff);
    color: var(--text, #1c1c1c);
    border: 1px solid var(--border, rgba(0,0,0,0.12));
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    font-size: 0.85rem;
    line-height: 1.4;
    z-index: 200;
    animation: providers-nudge-in 0.2s ease-out;
  }
  @keyframes providers-nudge-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .providers-nudge[hidden] { display: none; }
  .providers-nudge-msg { flex: 1; min-width: 0; }
  .providers-nudge-cta {
    flex-shrink: 0;
    padding: 6px 10px; border-radius: 6px;
    background: var(--signal, #4f46e5); color: #fff;
    border: none; cursor: pointer; white-space: nowrap;
    font-size: 0.8rem; font-family: inherit; font-weight: 500;
  }
  .providers-nudge-cta:hover { filter: brightness(0.94); }
  .providers-nudge-close {
    flex-shrink: 0;
    width: 22px; height: 22px;
    padding: 0; margin-top: -2px;
    background: transparent; color: var(--text-muted, #9b94ab);
    border: none; cursor: pointer; font-size: 1.1rem; line-height: 1;
    border-radius: 4px;
  }
  .providers-nudge-close:hover { background: rgba(0,0,0,0.06); color: var(--text); }

  @media (max-width: 720px) {
    .app-topbar { padding: 8px 12px; gap: 8px; }
    .topbar-app-name { max-width: 120px; font-size: 0.85rem; }
    .topbar-chips { display: none; }
    .topbar-btn { padding: 6px 10px; font-size: 0.8rem; }
    /* Too many right-side buttons for narrow viewports — keep More + Deploy
       only. Focus/Viewport/Expand/Compare stay accessible via their legacy
       triggers (in-pane gestures still work) and we'll fold them into the
       More menu in a follow-up if needed. */
    #topbar-focus-btn,
    #topbar-viewport-btn,
    #topbar-expand-btn,
    #topbar-compare-btn { display: none; }
  }
  @media (max-width: 420px) {
    .topbar-app-name { display: none; }
    .app-topbar { padding: 8px 10px; gap: 6px; }
  }

/* ===== 3-COLUMN CANVAS ===== */

/* Progress bar */
.try-progress-bar {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  background: var(--surface-raised, #f9f8f4);
  border-bottom: 1px solid var(--border, #e5e7eb);
  flex-shrink: 0;
  gap: 10px;
}
.try-progress-fill-wrap {
  flex: 1;
  height: 4px;
  background: var(--border, #e5e7eb);
  border-radius: 2px;
  overflow: hidden;
}
.try-progress-fill {
  height: 100%;
  background: var(--signal, #6366f1);
  width: 0%;
  transition: width .4s ease;
}
.try-progress-label {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  white-space: nowrap;
  min-width: 120px;
  text-align: right;
}

/* Canvas body: grid, fills remaining space in the flex-column shell.
   grid-template-rows: 1fr makes the single implicit row stretch to fill
   the flex-allocated height instead of auto-sizing to content. */
.try-canvas-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: 1fr;
  min-height: 0;
  overflow: hidden;
}

/* Override: when canvas body is shown, it gets flex: 1 (not workspace directly) */
body.try-has-session:not(.embed) #try-canvas-body:not([hidden]),
body.try-scope-focus:not(.embed) #try-canvas-body:not([hidden]),
body.try-design-gate:not(.embed) #try-canvas-body:not([hidden]) {
  flex: 1 1 auto;
  min-height: 0;
}

/* Also show progress bar above canvas when session is active */
body.try-has-session:not(.embed) #try-progress-bar:not([hidden]),
body.try-scope-focus:not(.embed) #try-progress-bar:not([hidden]) {
  flex-shrink: 0;
}

/* Checklist sidebar */
.try-checklist-col {
  border-right: 1px solid var(--border, #e5e7eb);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 10px;
  background: var(--surface-raised, #f9f8f4);
  display: flex;
  flex-direction: column;
  transition: padding .2s ease;
  position: relative;
}
.try-checklist-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 6px;
}
.try-checklist-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted, #6b7280);
  white-space: nowrap;
  overflow: hidden;
}
.try-checklist-collapse-btn {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 5px;
  background: var(--bg, #fff);
  cursor: pointer;
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
  padding: 0;
  line-height: 1;
}
.try-checklist-collapse-btn:hover { background: var(--border, #e5e7eb); }

/* Collapsed state — canvas body gets narrower first column */
.try-canvas-body.checklist-collapsed {
  grid-template-columns: 36px 1fr;
}
.try-canvas-body.checklist-collapsed .try-checklist-col {
  padding: 10px 6px;
  overflow: hidden;
  align-items: center;
}
.try-canvas-body.checklist-collapsed .try-checklist-title,
.try-canvas-body.checklist-collapsed #try-checklist {
  display: none;
}
.try-canvas-body.checklist-collapsed .try-checklist-toggle {
  flex-direction: column;
  margin-bottom: 0;
}
.try-canvas-body.checklist-collapsed .try-checklist-collapse-btn {
  transform: rotate(180deg);
}

/* Within canvas body, workspace occupies its grid cell */
#try-canvas-body #workspace.try-workspace {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Preview empty state — shown inside workspace body before first pane */
.try-preview-empty {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg, #FAFAFF);
}
/* Disappear once panes have content */
.try-canvas-body:has(.try-pane) .try-preview-empty {
  display: none;
}
/* During the direction gate: chat column expands to fill the full workspace
   width — no preview pane needed until code generation starts. */
body.try-scope-focus:not(.embed) .try-chat-col {
  width: 100% !important;
  max-width: 100% !important;
  border-right: none !important;
}
body.try-scope-focus:not(.embed) .try-panes {
  display: none !important;
}
/* Hide "Your app appears here" placeholder during the direction gate */
body.try-scope-focus .try-preview-empty {
  display: none;
}
/* Design gate: split layout — chat column returns to normal width,
   design gallery (#lc-design-panel) fills the right side as a flex child.
   Hide panes + placeholder so the design panel gets all remaining space. */
body.try-design-gate:not(.embed) .try-chat-col {
  width: 300px !important;
  max-width: 300px !important;
  border-right: 1px solid var(--border) !important;
  border-left: none !important;
}
body.try-design-gate:not(.embed) .try-panes {
  display: none !important;
}
body.try-design-gate .try-preview-empty {
  display: none !important;
}
#lc-design-panel {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  background: var(--bg, #0d0b17);
  box-sizing: border-box;
}
/* Design gate: mirror scope-focus shell rules so the layout stays stable
   after try-scope-focus is removed (runDirectionGate finally block) but
   before try-has-session fires (ensurePane → registerTab). Without these,
   main.try-shell exits position:fixed and .try-prompt-row reappears in
   the gap between the two class changes, causing the textarea to flash. */
body.try-design-gate:not(.embed) main.try-shell > .try-attach-thumbs,
body.try-design-gate:not(.embed) main.try-shell > .try-prompt-row,
body.try-design-gate:not(.embed) main.try-shell > .try-prompt-hint {
  display: none !important;
}
body.try-design-gate:not(.embed) { overflow: hidden; }
body.try-design-gate:not(.embed) main.try-shell {
  position: fixed;
  top: 48px;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  max-width: 100%;
  width: 100%;
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.try-preview-empty-inner {
  text-align: center;
  padding: 32px 24px;
  max-width: 260px;
}
.try-preview-empty-icon {
  font-size: 36px;
  margin: 0 0 12px;
  opacity: .35;
}
.try-preview-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #1a1a1a);
  margin: 0 0 6px;
}
.try-preview-empty-sub {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  line-height: 1.5;
  margin: 0;
}
/* Override the old flex:1 rule that was on workspace directly;
   also ensure the workspace fills its grid cell during the direction gate */
body.try-has-session:not(.embed) #try-canvas-body #workspace.try-workspace,
body.try-scope-focus:not(.embed) #try-canvas-body #workspace.try-workspace,
body.try-design-gate:not(.embed) #try-canvas-body #workspace.try-workspace {
  flex: unset;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Workspace body — flex row: chat left, panes right */
.try-workspace-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* Chat column — lives inside the workspace body, left of panes */
.try-chat-col {
  width: 300px;
  flex-shrink: 0;
  border-right: 1px solid var(--border, #e5e7eb);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-card, #fff);
  /* Defensive viewport bound — the parent flex chain
     (main.try-shell → #try-canvas-body → #workspace → .try-workspace-body)
     SHOULD constrain this column to viewport height, but during the
     showBuildingScreen() transition (where the right-pane panel is
     re-styled in place, mid-frame, while `try-design-gate` is still on)
     the height computation can briefly break and the column overflows
     past the viewport — pushing the "Ask or reply" composer below the
     bottom edge of the screen. Capping max-height here guarantees the
     column never grows past the viewport regardless of upstream layout.
     48px = .app-topbar height. */
  max-height: calc(100vh - 48px);
  min-height: 0;
}

/* Panes fill remaining width inside workspace body */
#try-canvas-body .try-panes {
  flex: 1 1 auto;
  min-width: 0;
  overflow: auto;
}
.try-chat-history {
  flex: 1;
  /* min-height:0 is required so flex:1 actually constrains height and
     overflow-y:auto kicks in. Without it, flex items default to
     min-height:auto and refuse to shrink below content size — tall chat
     transcripts (e.g. the persistent styles-picker card after a build
     starts) would push the chat-form textarea below the viewport. */
  min-height: 0;
  overflow-y: auto;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.try-chat-form {
  display: flex;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--border, #e5e7eb);
  flex-shrink: 0;
  /* Belt-and-braces anchor — even if a future layout regression breaks the
     chat-col's height bound, sticky-bottom keeps the composer visible at the
     bottom of the column's scroll viewport instead of riding off-screen with
     the chat history. Opaque background so scrolled chat content doesn't
     bleed through. */
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--bg-card, #fff);
}
#try-chat-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  line-height: 1.4;
  background: #fff;
  max-height: 140px;
  font-family: inherit;
}
#try-chat-input:focus { outline: none; border-color: var(--signal, #6366f1); }
#try-chat-send {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--signal, #6366f1);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 18px;
  align-self: flex-end;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
#try-chat-send:hover { opacity: .85; }

/* Checklist step styles (populated by main-build-checklist.js) */
.cl-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 4px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--text-muted, #6b7280);
  transition: background .15s;
  line-height: 1.3;
}
.cl-step--active {
  color: var(--text, #1a1a1a);
  background: rgba(99, 102, 241, 0.08);
}
.cl-step--done {
  color: var(--text-muted, #9ca3af);
}
.cl-icon {
  width: 16px;
  text-align: center;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 1px;
}
.cl-step--active .cl-icon {
  color: var(--signal, #6366f1);
  /* Pulse the active step's dot so it reads as "in progress" — matters most
     on Final polish, which runs after the app already rendered and would
     otherwise look finished/stuck. */
  animation: cl-pulse 1.2s ease-in-out infinite;
}
@keyframes cl-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.78); }
}
@media (prefers-reduced-motion: reduce) {
  .cl-step--active .cl-icon { animation: none; }
}
.cl-step--done .cl-icon { color: #10b981; }
.cl-step--failed { color: #ef4444; }
.cl-step--failed .cl-icon { color: #ef4444; }
.cl-label { flex: 1; }
.cl-step--done .cl-label { text-decoration: line-through; }

/* Responsive: collapse checklist col at narrow widths */
@media (max-width: 900px) {
  .try-canvas-body { grid-template-columns: 1fr; }
  .try-checklist-col { display: none; }
}
@media (max-width: 600px) {
  .try-workspace-body { flex-direction: column; }
  .try-chat-col {
    width: 100%;
    height: 220px;
    flex-shrink: 0;
    border-right: none;
    border-bottom: 1px solid var(--border, #e5e7eb);
  }
}

/* Chat bubble styles (used by main-chat.js) */
.chat-msg { display: flex; margin-bottom: 2px; }
.chat-msg--ai    { justify-content: flex-start; }
.chat-msg--user  { justify-content: flex-end; }
.chat-msg--status { justify-content: center; }
.chat-msg--question,
.chat-msg--confirm { justify-content: flex-start; }
.chat-msg--error  { justify-content: flex-start; }
.chat-msg--error .chat-bubble {
  background: rgba(220, 38, 38, 0.10);
  border: 1px solid rgba(220, 38, 38, 0.45);
  color: #b91c1c;
  font-weight: 500;
}

.chat-bubble {
  max-width: 88%;
  padding: 8px 11px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
}
.chat-msg--ai .chat-bubble     { background: var(--bg-card, #fff); border: 1px solid var(--border, #e5e7eb); color: var(--text, #1a1a1a); }
.chat-msg--user .chat-bubble   { background: var(--signal, #6366f1); color: #fff; }
@keyframes try-chat-status-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
.chat-msg--status .chat-bubble {
  font-style: italic; font-size: 12px; border: none; padding: 4px 0;
  background: linear-gradient(90deg,
    var(--text-muted, #6b7280) 0%,
    var(--accent, #7c3aed) 40%,
    var(--text-muted, #6b7280) 100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: try-chat-status-shimmer 2.5s linear infinite;
}

/* Typing indicator dots */
.chat-msg--typing .dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--text-muted, #9ca3af);
  margin: 0 2px;
  animation: chat-bounce 0.9s infinite;
}
.chat-msg--typing .dot:nth-child(2) { animation-delay: .15s; }
.chat-msg--typing .dot:nth-child(3) { animation-delay: .30s; }
@keyframes chat-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-5px); }
}

/* Question bubble */
.chat-bubble--question {
  background: var(--bg-card, var(--surface, #f3f4f6));
  border: 1px solid var(--border, #e5e7eb);
  padding: 12px 14px;
  color: var(--text);
}
.chat-q-text { margin: 0 0 10px; font-weight: 600; font-size: 14px; color: var(--text); line-height: 1.45; }
.chat-q-options { display: flex; flex-direction: column; gap: 4px; }
.chat-q-opt {
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface-raised, #f9f8f4);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text, #111);
  transition: background .12s, border-color .12s;
  font-family: inherit;
  line-height: 1.4;
  width: 100%;
}
.chat-q-opt:hover { background: rgba(99,102,241,.1); border-color: var(--signal, #6366f1); }
.chat-q-opt--selected { border-color: var(--signal, #6366f1); background: rgba(99,102,241,.12); }
.chat-q-opt--rec em { font-style: normal; font-size: 10px; color: var(--signal, #6366f1); margin-left: 6px; background: rgba(99,102,241,.12); padding: 1px 6px; border-radius: 4px; }
.chat-q-desc { display: block; font-size: 12px; font-weight: 400; color: var(--text-secondary, var(--text-muted, #9ca3af)); margin-top: 4px; line-height: 1.4; }
.chat-q-skip { display: block; margin-top: 8px; font-size: 12px; color: var(--text-muted, #6b7280); background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; text-align: left; }
.chat-q-skip:hover { color: var(--text); text-decoration: underline; }
.chat-msg--answered { opacity: .65; pointer-events: none; }

/* Confirm bubble */
.chat-bubble--confirm {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  padding: 10px 12px;
}
.chat-bubble--confirm p { margin: 0 0 8px; font-size: 13px; }
.chat-confirm-row { display: flex; gap: 6px; }
.chat-confirm-btn {
  padding: 6px 14px; border-radius: 8px;
  background: var(--signal, #6366f1); color: #fff;
  border: none; cursor: pointer; font-size: 13px;
  font-family: inherit;
}
.chat-confirm-btn:hover { opacity: .85; }
.chat-cancel-btn {
  padding: 6px 14px; border-radius: 8px;
  background: none; border: 1px solid var(--border, #e5e7eb);
  cursor: pointer; font-size: 13px;
  font-family: inherit;
}

/* Resume banner (shown on landing when unfinished project exists) */
.resume-banner {
  background: var(--surface-raised, #f9f8f4);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.resume-banner-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.resume-icon { font-size: 18px; }
.resume-text { flex: 1; font-size: 13px; min-width: 160px; }
.resume-actions { display: flex; gap: 8px; }
.resume-open-btn {
  padding: 5px 12px; border-radius: 7px;
  background: var(--signal, #6366f1); color: #fff;
  border: none; cursor: pointer; font-size: 13px;
  font-family: inherit;
}
.resume-new-btn {
  padding: 5px 12px; border-radius: 7px;
  background: none; border: 1px solid var(--border, #e5e7eb);
  cursor: pointer; font-size: 13px;
  font-family: inherit;
}

/* Lock canvas during design selection step */
.try-canvas-body.canvas-locked #try-chat-form,
.try-canvas-body.canvas-locked .try-checklist-col { pointer-events: none; opacity: .5; }
.try-canvas-body.canvas-locked .try-panes { pointer-events: auto !important; opacity: 1 !important; }

/* Visual edits button in workspace toolbar */
.visual-edits-btn {
  padding: 3px 10px; border-radius: 6px;
  border: 1px solid var(--border, #e5e7eb);
  background: none; cursor: pointer; font-size: 13px;
  color: var(--text, #1a1a1a);
  font-family: inherit;
  white-space: nowrap;
}
.visual-edits-btn--active {
  background: rgba(99,102,241,.1);
  border-color: var(--signal, #6366f1);
  color: var(--signal, #6366f1);
}

/* Project tabs in projects panel */
.proj-tabs { display: flex; border-bottom: 1px solid var(--border, #e5e7eb); overflow-x: auto; }
.proj-tab {
  padding: 8px 14px; font-size: 13px; background: none;
  border: none; cursor: pointer; color: var(--text-muted, #6b7280);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap; font-family: inherit;
}
.proj-tab--active { color: var(--text, #1a1a1a); border-bottom-color: var(--signal, #6366f1); }
.proj-tab-content { padding: 12px; }
.proj-preview-frame { width: 100%; height: 240px; border: none; border-radius: 6px; background: #fff; }
.proj-group-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  color: var(--text-muted, #6b7280); padding: 10px 0 4px; letter-spacing: .05em;
}
/* ===== END 3-COLUMN CANVAS ===== */

    /* Collapse empty cost row so it doesn't add a phantom strip below
       the followup textarea (swarm runs leave it empty). [folded in from zh/try.html] */
    .try-workspace.tabbed .try-pane > .try-pane-cost:empty {
      display: none;
    }

/* ===== Cloud backend console — dedicated full-screen view (#cloud route) =====
   A top-level sibling of #dashboard-view / #app-view. mountCloudConsole()
   (main-cloud.js) builds the head + rail + content into #cloud-view; the per-tab
   content keeps its own inline styles — only this outer shell is themed here. */
.cloud-view {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: var(--bg, #0d0d0f);
  color: var(--text, #e8e8ea);
  font-family: system-ui, -apple-system, sans-serif;
}
/* Author rule must restate display:none for [hidden] — `.cloud-view` (display:flex)
   would otherwise beat the UA [hidden] rule and leak the view when routed away. */
.cloud-view[hidden] { display: none; }
.cloud-view-head {
  display: flex; align-items: center; gap: 12px;
  flex: 0 0 48px; height: 48px; padding: 0 16px;
  border-bottom: 1px solid var(--border);
}
.cloud-view-back {
  border: 1px solid var(--border); background: var(--bg-card, transparent);
  color: var(--text); font: inherit; font-size: 13px;
  padding: 6px 12px; border-radius: 8px; cursor: pointer;
}
.cloud-view-back:hover { border-color: var(--border-strong); }
.cloud-view-title { font-weight: 700; font-size: 15px; }
.cloud-view-body { flex: 1 1 auto; display: flex; min-height: 0; }
.cloud-view-rail {
  flex: 0 0 220px; border-right: 1px solid var(--border);
  padding: 12px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
}
.cloud-view-content { flex: 1 1 auto; padding: 24px 28px; overflow: auto; min-width: 0; }