/* Velros front door — styles for the interactive "living organization"
   experience at "/". Ported from the prototype. Design tokens come from the
   shared brand_tokens.css (loaded first by the immersive layout); this file
   only holds the front door's layout/animation. Canonical: docs/DESIGN.md.

   ESCAPE-HATCH LAYER (Tailwind-first policy): this is the dedicated stylesheet
   for one stateful immersive component. Its styling is a JS-driven state machine
   (`is-live`/`stage-*`/`is-typing`/`enter`/`voice-*` toggled in show.html.erb),
   plus @keyframes, WebGL core, and gradients — ~50% of rules are ancestor/state
   selectors utilities can't express, and the markup is generated in JS, not ERB.
   Do NOT migrate this to utilities (it would split each component across JS
   utility strings + state CSS and grow the surface). Keep it cohesive here. */
    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      min-height: 100%;
      background: var(--paper);
      color: var(--ink);
      font-family: ui-serif, Georgia, "Times New Roman", serif;
      overflow: hidden;
    }

    button,
    input {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

    .prototype {
      min-height: 100vh;
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(ellipse at 50% 26%, rgba(255, 250, 242, 0.96), rgba(255, 250, 242, 0) 34rem),
        radial-gradient(ellipse at 18% 18%, rgba(220, 235, 212, 0.72), rgba(220, 235, 212, 0) 24rem),
        radial-gradient(ellipse at 82% 20%, rgba(220, 234, 246, 0.56), rgba(220, 234, 246, 0) 24rem),
        linear-gradient(180deg, var(--paper), var(--paper-deep));
      transition: background 900ms var(--ease);
    }

    .prototype::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(ellipse at 50% 48%, rgba(79, 110, 88, 0.08), transparent 28rem),
        linear-gradient(90deg, rgba(255, 250, 242, 0), rgba(255, 250, 242, 0.42), rgba(255, 250, 242, 0));
      opacity: 0.7;
    }

    .prototype::after {
      content: "";
      position: absolute;
      inset: auto 10% 6.5rem;
      height: 18rem;
      pointer-events: none;
      background: radial-gradient(ellipse at 50% 100%, rgba(18, 63, 50, 0.12), transparent 68%);
      filter: blur(34px);
      opacity: 0.38;
    }

    .nav {
      position: absolute;
      inset: 1.3rem 1.6rem auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 40;
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
      color: var(--green);
      font-size: 0.9rem;
    }

    .brand {
      color: var(--green);
      font-weight: 820;
      letter-spacing: -0.02em;
      transition: opacity 700ms var(--ease);
    }

    .stage-1 .brand,
    .stage-2 .brand,
    .stage-3 .brand,
    .stage-4 .brand,
    .stage-5 .brand {
      opacity: 0;
      pointer-events: none;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 0.72rem;
    }

    .nav-actions span {
      color: var(--ink-soft);
    }

    .info-toggle,
    .voice-toggle {
      border: 1px solid rgba(18, 63, 50, 0.12);
      border-radius: 999px;
      background: rgba(255, 250, 242, 0.72);
      color: var(--ink-soft);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.56rem;
      backdrop-filter: blur(18px);
      box-shadow: 0 0.7rem 2rem rgba(18, 63, 50, 0.06);
    }

    .info-toggle:hover,
    .info-toggle[aria-expanded="true"] {
      background: rgba(18, 63, 50, 0.08);
      color: var(--green);
    }

    .voice-toggle[aria-pressed="true"] {
      background: var(--green);
      color: var(--paper-warm);
      border-color: transparent;
    }

    .voice-toggle {
      position: absolute;
      opacity: 0;
      pointer-events: none;
      transform: scale(0.72);
      transition:
        opacity 360ms var(--ease),
        transform 440ms var(--ease),
        background 200ms var(--ease),
        color 200ms var(--ease);
    }

    .info-toggle span,
    .voice-toggle span {
      color: inherit;
    }

    .info-icon,
    .voice-icon {
      width: 1.04rem;
      height: 1.04rem;
      flex: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .info-icon svg,
    .voice-icon svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .lang-select {
      display: inline-flex;
      align-items: center;
      border: 1px solid rgba(18, 63, 50, 0.12);
      border-radius: 999px;
      background: rgba(255, 250, 242, 0.72);
      color: var(--ink-soft);
      padding: 0.32rem 0.5rem 0.32rem 0.72rem;
      backdrop-filter: blur(18px);
      box-shadow: 0 0.7rem 2rem rgba(18, 63, 50, 0.06);
      transition: background 200ms var(--ease), color 200ms var(--ease);
    }

    .lang-select:hover,
    .lang-select:focus-within {
      background: rgba(18, 63, 50, 0.08);
      color: var(--green);
    }

    .lang-select select {
      appearance: none;
      -webkit-appearance: none;
      border: none;
      background: transparent;
      color: inherit;
      font: inherit;
      font-size: 0.85rem;
      line-height: 1;
      padding: 0 0.2rem;
      cursor: pointer;
      outline: none;
    }

    .info-drawer {
      position: absolute;
      top: 4.65rem;
      right: 1.6rem;
      z-index: 45;
      width: min(19rem, calc(100vw - 3rem));
      border: 1px solid var(--line);
      border-radius: 1.15rem;
      background: rgba(255, 250, 242, 0.82);
      color: var(--ink);
      backdrop-filter: blur(28px) saturate(1.14);
      box-shadow:
        0 1.4rem 4rem rgba(18, 63, 50, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
      padding: 0.62rem;
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    }

    .info-drawer[hidden] {
      display: none;
    }

    .info-drawer__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.8rem;
      padding: 0.28rem 0.28rem 0.52rem 0.52rem;
    }

    .info-drawer__head p {
      margin: 0;
      color: var(--green);
      font-size: 0.86rem;
      font-weight: 760;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .info-drawer__close {
      width: 2rem;
      height: 2rem;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--ink-soft);
      display: grid;
      place-items: center;
    }

    .info-drawer__close:hover {
      background: rgba(18, 63, 50, 0.07);
      color: var(--green);
    }

    .info-drawer__close svg {
      width: 1rem;
      height: 1rem;
    }

    .info-links {
      display: grid;
      gap: 0.35rem;
    }

    .info-links a {
      display: grid;
      gap: 0.18rem;
      border-radius: 0.78rem;
      padding: 0.72rem 0.8rem;
      color: var(--ink);
      text-decoration: none;
      transition: background 200ms var(--ease), color 200ms var(--ease);
    }

    .info-links a:hover {
      background: rgba(18, 63, 50, 0.07);
      color: var(--green);
    }

    .info-links span {
      font-size: 1rem;
      font-weight: 740;
    }

    .info-links small {
      color: var(--ink-muted);
      font-size: 0.86rem;
      line-height: 1.32;
    }

    .voice-wave {
      transition: opacity 240ms var(--ease);
    }

    .voice-toggle[aria-pressed="false"] .voice-wave {
      opacity: 0;
    }

    .prototype.voice-speaking .voice-toggle[aria-pressed="true"] .voice-wave {
      animation: voicePulse 1.15s var(--ease) infinite;
    }

    .prototype.voice-speaking .voice-toggle[aria-pressed="true"] .voice-wave + .voice-wave {
      animation-delay: 0.18s;
    }

    @keyframes voicePulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.32; }
    }

    .room-rail {
      position: absolute;
      left: 1.25rem;
      top: 5.6rem;
      z-index: 28;
      width: 15.2rem;
      display: grid;
      gap: 0.62rem;
      opacity: 0;
      transform: translateX(-1rem);
      pointer-events: none;
      transition: opacity 800ms var(--ease), transform 900ms var(--ease);
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    }

    .room-stack {
      display: grid;
      gap: 0.62rem;
    }

    .room-section-title {
      margin: 0.34rem 0.2rem -0.12rem;
      color: var(--ink-soft);
      font-size: 0.72rem;
      font-weight: 760;
      letter-spacing: 0.01em;
    }

    .room-section-title[hidden] {
      display: none;
    }

    .product-room-list {
      display: grid;
      gap: 0.62rem;
    }

    .room-card {
      border: 1px solid var(--line);
      border-radius: 1.15rem;
      background: rgba(255, 250, 242, 0.58);
      backdrop-filter: blur(28px) saturate(1.18);
      padding: 0.62rem;
      color: var(--ink-soft);
      box-shadow:
        0 1rem 3rem rgba(18, 63, 50, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
      opacity: 0;
      transform: translateY(0.55rem);
      transition: opacity 620ms var(--ease), transform 760ms var(--ease);
    }

    .stage-1 .founder-room,
    .stage-2 .founder-room,
    .stage-3 .founder-room,
    .stage-4 .founder-room,
    .stage-5 .founder-room,
    .stage-4 .product-room,
    .stage-5 .product-room {
      opacity: 1;
      transform: translateY(0);
    }

    .product-room {
      transition-delay: 170ms;
    }

    .room-head {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 0.58rem;
    }

    .room-mark {
      width: 1.72rem;
      height: 1.72rem;
      border-radius: 999px;
      display: grid;
      place-items: center;
      flex: none;
      background: var(--moss);
      color: var(--green);
      font-size: 0.76rem;
      font-weight: 780;
    }

    .room-title {
      display: block;
      color: var(--ink);
      font-size: 0.78rem;
      line-height: 1;
      font-weight: 500;
    }

    .room-shortcut {
      min-width: 2.6rem;
      height: 1.35rem;
      border: 1px solid var(--line-strong);
      border-radius: 0.42rem;
      display: grid;
      place-items: center;
      background: rgba(255, 250, 242, 0.72);
      color: var(--green-deep);
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
      font-size: 0.72rem;
      font-weight: 760;
      line-height: 1;
      padding: 0 0.34rem;
      opacity: 0;
      transform: translateX(0.2rem);
      transition: opacity 140ms var(--ease), transform 140ms var(--ease);
    }

    .room-shortcut[hidden] {
      display: none;
    }

    .room-rail--shortcuts-visible .room-shortcut {
      opacity: 1;
      transform: translateX(0);
    }

    .room-meta {
      display: block;
      margin-top: 0.2rem;
      color: var(--ink-muted);
      font-size: 0.66rem;
      line-height: 1;
    }

    .room-action {
      width: 1.68rem;
      height: 1.68rem;
      border: 1px solid rgba(18, 63, 50, 0.12);
      border-radius: 999px;
      background: rgba(255, 250, 242, 0.64);
      color: var(--green);
      display: grid;
      place-items: center;
      font-size: 0.94rem;
      font-weight: 780;
    }

    .session-list {
      display: grid;
      gap: 0.36rem;
      margin-top: 0.62rem;
      padding-top: 0.58rem;
      border-top: 1px solid rgba(18, 63, 50, 0.1);
      opacity: 0;
      max-height: 0;
      overflow: hidden;
      transition: opacity 620ms var(--ease), max-height 760ms var(--ease);
    }

    .stage-5 .session-list {
      opacity: 1;
      max-height: 12rem;
    }

    .session {
      border: 0;
      width: 100%;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 0.48rem;
      border-radius: 0.95rem;
      background: rgba(255, 250, 242, 0.42);
      color: var(--ink);
      padding: 0.48rem 0.52rem;
      text-align: left;
    }

    .session.is-active {
      background: rgba(220, 235, 212, 0.72);
      box-shadow: inset 0 0 0 1px rgba(18, 63, 50, 0.08);
    }

    .session-dot {
      width: 0.54rem;
      height: 0.54rem;
      border-radius: 999px;
      background: var(--green);
    }

    .session-name {
      min-width: 0;
      color: var(--ink);
      font-size: 0.74rem;
      font-weight: 760;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .session-remove {
      color: var(--ink-muted);
      font-size: 0.9rem;
      line-height: 1;
    }

    .stage {
      position: relative;
      min-height: 100vh;
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      z-index: 2;
    }

    .space {
      position: relative;
      display: grid;
      place-items: center;
      padding: 6.8rem 1.4rem 10.4rem;
    }

    .presence {
      position: absolute;
      inset: 4.5rem 0 8rem;
      pointer-events: none;
    }

    .orbit {
      display: none;
    }

    .agent {
      display: none;
    }

    .core {
      position: absolute;
      left: 50%;
      top: 39%;
      width: clamp(2.56rem, 5.4vw, 4.2rem);
      aspect-ratio: 1;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      overflow: hidden;
      box-shadow:
        0 0 1.3rem 0.1rem rgba(255, 198, 120, 0.42),
        0 0 3.4rem 0.4rem rgba(255, 168, 92, 0.26),
        0 0 6rem 0.9rem rgba(255, 150, 70, 0.15);
      animation: coreGlow 4.6s ease-in-out infinite;
      transition:
        left 1180ms var(--ease),
        top 1180ms var(--ease),
        transform 1180ms var(--ease),
        width 980ms var(--ease),
        opacity 900ms var(--ease);
    }

    /* radiating light — the glow breathes outward */
    @keyframes coreGlow {
      0%, 100% {
        box-shadow:
          0 0 1.2rem 0.1rem rgba(255, 198, 120, 0.38),
          0 0 3.2rem 0.4rem rgba(255, 168, 92, 0.22),
          0 0 5.6rem 0.8rem rgba(255, 150, 70, 0.13);
      }
      50% {
        box-shadow:
          0 0 1.9rem 0.2rem rgba(255, 212, 142, 0.55),
          0 0 4.8rem 0.7rem rgba(255, 182, 104, 0.34),
          0 0 8.4rem 1.4rem rgba(255, 150, 70, 0.2);
      }
    }

    .core-gl {
      display: block;
      width: 100%;
      height: 100%;
    }

    .voice-rings {
      position: absolute;
      left: 50%;
      top: 39%;
      width: clamp(2.15rem, 4.5vw, 3.5rem);
      aspect-ratio: 1;
      border-radius: 48% 52% 53% 47% / 45% 48% 52% 55%;
      transform: translate(-50%, -92%);
      pointer-events: none;
      opacity: 0;
      transition:
        left 1180ms var(--ease),
        top 1180ms var(--ease),
        transform 1180ms var(--ease),
        width 980ms var(--ease),
        opacity 520ms var(--ease);
    }

    .voice-rings::before,
    .voice-rings::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      border: 1px solid rgba(79, 110, 88, 0.08);
      transform: scale(0.74);
      filter: blur(0.6px);
    }

    .voice-rings::after {
      animation-delay: 900ms;
    }

    .voice-on.voice-speaking .voice-rings {
      opacity: 1;
    }

    .voice-on.voice-speaking .voice-rings::before,
    .voice-on.voice-speaking .voice-rings::after {
      animation: voiceRing 1.8s ease-out infinite;
    }

    .stage-1 .core,
    .stage-2 .core,
    .stage-3 .core,
    .stage-4 .core,
    .stage-5 .core {
      position: fixed; /* anchor to viewport so it hits the logo at every breakpoint/stage */
      left: 2.94rem;
      top: 2.38rem; /* the Velros logo, viewport coords */
      width: clamp(1.1rem, 2.25vw, 1.75rem);
      transform: translate(-50%, -50%);
      z-index: 41;
    }

    .stage-1 .voice-rings,
    .stage-2 .voice-rings,
    .stage-3 .voice-rings,
    .stage-4 .voice-rings,
    .stage-5 .voice-rings {
      position: fixed; /* anchor to viewport so it hits the logo at every breakpoint/stage */
      left: 2.94rem;
      top: 2.38rem; /* the Velros logo, viewport coords */
      width: clamp(1.1rem, 2.25vw, 1.75rem);
      transform: translate(-50%, -50%);
      z-index: 41;
    }

    .thread {
      position: absolute;
      left: 50%;
      bottom: 1.2rem;
      width: min(47rem, calc(100vw - 3rem));
      transform: translateX(-50%);
      display: grid;
      gap: 0.72rem;
      pointer-events: none;
      z-index: 18;
    }

    .bubble {
      position: relative;
      width: fit-content;
      max-width: min(39rem, 92%);
      border-radius: 1.35rem;
      padding: 0.92rem 1.04rem;
      white-space: normal;
      /* Break long unbreakable tokens (e.g. a pasted URL) so they wrap INSIDE the
         bubble instead of overflowing it and pushing the bubble past the layout.
         `anywhere` (not `break-word`) also lets the box shrink to max-width. */
      overflow-wrap: anywhere;
      min-width: 0;
      box-shadow:
        0 1.2rem 3.4rem rgba(18, 63, 50, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.58);
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
      font-size: 1rem;
      line-height: 1.45;
      opacity: 0;
      transform: translateY(0.85rem);
      transition: opacity 650ms var(--ease), transform 760ms var(--ease);
    }

    .bubble.velros {
      justify-self: start;
      background: rgba(255, 250, 242, 0.7);
      border: 1px solid rgba(18, 63, 50, 0.1);
      color: var(--ink);
      backdrop-filter: blur(30px) saturate(1.16);
    }

    .bubble.founder {
      justify-self: end;
      background: linear-gradient(145deg, rgba(79, 110, 88, 0.94), rgba(79, 110, 88, 0.92));
      color: var(--paper-warm);
    }

    .bubble-text {
      display: block;
      white-space: pre-wrap;
    }

    .markdown-body {
      white-space: normal;
    }

    .markdown-body > :first-child {
      margin-top: 0;
    }

    .markdown-body > :last-child {
      margin-bottom: 0;
    }

    .markdown-body p {
      margin: 0.5rem 0;
    }

    .markdown-body h1,
    .markdown-body h2,
    .markdown-body h3,
    .markdown-body h4 {
      margin: 0.85rem 0 0.42rem;
      color: var(--ink);
      font-weight: 760;
      line-height: 1.25;
    }

    .markdown-body h1 {
      font-size: 1.15em;
    }

    .markdown-body h2,
    .markdown-body h3,
    .markdown-body h4 {
      font-size: 1.06em;
    }

    .markdown-body ul,
    .markdown-body ol {
      margin: 0.5rem 0;
      padding-left: 1.25rem;
    }

    .markdown-body ul {
      list-style: disc;
    }

    .markdown-body ol {
      list-style: decimal;
    }

    .markdown-body li {
      margin: 0.25rem 0;
    }

    .markdown-body a {
      color: var(--green);
      text-decoration: underline;
      text-underline-offset: 0.12em;
    }

    .markdown-body strong {
      font-weight: 760;
    }

    .markdown-body em {
      font-style: italic;
    }

    .markdown-body code {
      border: 1px solid rgba(18, 63, 50, 0.14);
      border-radius: 0.28rem;
      background: rgba(18, 63, 50, 0.06);
      padding: 0.08em 0.3em;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 0.92em;
    }

    .bubble-time {
      display: block;
      position: absolute;
      left: calc(100% + 0.52rem);
      bottom: 0.24rem;
      margin-top: 0;
      color: var(--ink-muted);
      font-size: 0.78rem;
      line-height: 1.15;
      white-space: nowrap;
    }

    .bubble.founder .bubble-time {
      right: calc(100% + 0.52rem);
      left: auto;
    }

    .control-status {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      color: var(--ink-soft);
    }

    .thinking-dots {
      display: inline-flex;
      gap: 0.18rem;
      align-items: center;
    }

    .thinking-dots i {
      width: 0.32rem;
      height: 0.32rem;
      border-radius: 999px;
      background: currentColor;
      animation: thinkingPulse 900ms ease-in-out infinite;
    }

    .thinking-dots i:nth-child(2) {
      animation-delay: 150ms;
    }

    .thinking-dots i:nth-child(3) {
      animation-delay: 300ms;
    }

    @keyframes thinkingPulse {
      0%, 100% { opacity: 0.36; transform: translateY(0); }
      50% { opacity: 1; transform: translateY(-0.08rem); }
    }

    .bubble.velros.is-typing .bubble-text::after {
      content: "";
      display: inline-block;
      width: 0.42rem;
      height: 1em;
      margin-left: 0.12rem;
      border-right: 2px solid var(--green);
      vertical-align: -0.15rem;
      animation: caretBlink 760ms steps(2, start) infinite;
    }

    .stage-5 .thread {
      bottom: 1.2rem;
      width: min(49rem, calc(100vw - 3rem));
      gap: 0;
    }

    .right-panel {
      position: absolute;
      right: 1.25rem;
      top: 5.8rem;
      width: min(18rem, calc(100vw - 2.5rem));
      border: 1px solid var(--line);
      border-radius: 1.35rem;
      padding: 1rem;
      background: rgba(255, 250, 242, 0.58);
      backdrop-filter: blur(30px) saturate(1.18);
      box-shadow:
        0 1.6rem 4.4rem rgba(18, 63, 50, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
      z-index: 26;
      opacity: 0;
      transform: translateX(1rem);
      pointer-events: none;
      transition: opacity 800ms var(--ease), transform 900ms var(--ease);
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    }

    .right-panel.is-visible {
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto;
    }

    .right-panel h3 {
      margin: 0 0 0.72rem;
      color: var(--ink);
      font-size: 0.86rem;
      font-weight: 790;
    }

    .task-list {
      display: grid;
      gap: 0.5rem;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .task-card {
      width: 100%;
      border: 1px solid rgba(18, 63, 50, 0.1);
      border-radius: 0.95rem;
      background: rgba(255, 250, 242, 0.5);
      color: var(--ink);
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 0.58rem;
      padding: 0.66rem;
      text-align: left;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
    }

    .task-card:hover {
      background: rgba(255, 250, 242, 0.76);
      transform: translateY(-1px);
    }

    .task-card:focus-visible,
    .session:focus-visible,
    .room-action:focus-visible,
    .modal-close:focus-visible {
      outline: 2px solid rgba(79, 110, 88, 0.42);
      outline-offset: 2px;
    }

    .task-status {
      width: 0.72rem;
      height: 0.72rem;
      border-radius: 999px;
      background: var(--green);
      margin-top: 0.18rem;
      box-shadow: 0 0 0 0.4rem rgba(79, 110, 88, 0.08);
    }

    .task-card.is-waiting .task-status {
      background: var(--honey);
      box-shadow: 0 0 0 0.4rem rgba(247, 231, 173, 0.32);
    }

    .task-copy {
      min-width: 0;
    }

    .task-copy strong {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      font-size: 0.78rem;
      font-weight: 790;
      color: var(--ink);
      line-height: 1.15;
    }

    .task-copy span {
      display: block;
      margin-top: 0.24rem;
      color: var(--ink-muted);
      font-size: 0.72rem;
      line-height: 1.28;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .task-copy .agent-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 0.22rem;
      margin-top: 0.46rem;
    }

    .task-copy .agent-chip {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      border-radius: 999px;
      background: rgba(18, 63, 50, 0.08);
      color: var(--ink-soft);
      padding: 0.16rem 0.36rem;
      font-size: 0.58rem;
      font-weight: 760;
      margin-top: 0;
    }

    .task-copy .task-meter {
      display: block;
      height: 0.24rem;
      border-radius: 999px;
      margin-top: 0.52rem;
      background: rgba(18, 63, 50, 0.09);
      overflow: hidden;
    }

    .task-copy .task-meter span {
      display: block;
      height: 100%;
      width: var(--progress, 50%);
      border-radius: inherit;
      background: var(--green);
      margin-top: 0;
    }

    .task-card.is-waiting .task-meter span {
      background: var(--honey);
    }

    .task-modal {
      position: fixed;
      inset: 0;
      z-index: 70;
      display: grid;
      place-items: center;
      padding: 1.25rem;
      background: rgba(18, 63, 50, 0.18);
      backdrop-filter: blur(12px);
      opacity: 1;
      transition: opacity 220ms ease;
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    }

    .task-modal[hidden] {
      display: none;
    }

    #documentModal {
      z-index: 90;
    }

    /* The document view holds long replies (lists, multi-section proposals), so
       give it a wider, readable card than the shared .modal-card default and let
       the body scroll within the viewport instead of overflowing it. */
    #documentModal .modal-card {
      width: min(54rem, calc(100vw - 2.5rem));
      max-height: calc(100vh - 2.5rem);
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
    }

    #documentModal .modal-body {
      min-height: 0;
      overflow-y: auto;
    }

    .modal-card {
      width: min(32rem, 100%);
      border: 1px solid rgba(18, 63, 50, 0.14);
      border-radius: 1.75rem;
      background: rgba(255, 250, 242, 0.92);
      box-shadow: 0 2.4rem 7rem rgba(18, 63, 50, 0.2);
      padding: 1.15rem;
    }

    .modal-top {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      align-items: start;
      margin-bottom: 0.95rem;
    }

    .modal-kicker {
      display: block;
      color: var(--ink-muted);
      font-size: 0.68rem;
      font-weight: 820;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 0.38rem;
    }

    .modal-title {
      margin: 0;
      color: var(--green);
      font-family: ui-serif, Georgia, "Times New Roman", serif;
      font-size: clamp(1.75rem, 3vw, 2.35rem);
      line-height: 1.04;
      letter-spacing: 0;
    }

    .modal-close {
      width: 2rem;
      height: 2rem;
      border: 0;
      border-radius: 999px;
      background: rgba(18, 63, 50, 0.08);
      color: var(--green);
      font-size: 1.15rem;
      line-height: 1;
      flex: none;
    }

    .modal-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 0.55rem;
      /* Wrap so the document modal's Download / Save to Drive / Open in Drive / close
         actions don't overflow the header on a narrow phone. */
      flex-wrap: wrap;
      flex: none;
    }

    .modal-body {
      display: grid;
      gap: 0.7rem;
    }

    @media (max-width: 760px) {
      /* On phones the document view is full-screen: the card fills the viewport
         (no overlay padding, square corners) and its body scrolls. */
      #documentModal {
        padding: 0;
      }

      #documentModal .modal-card {
        width: 100vw;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
      }
    }

    .detail-row {
      border-top: 1px solid rgba(18, 63, 50, 0.1);
      padding-top: 0.68rem;
    }

    .detail-row strong {
      display: block;
      color: var(--ink);
      font-size: 0.86rem;
      font-weight: 790;
      margin-bottom: 0.26rem;
    }

    .detail-row span {
      display: block;
      color: var(--ink-soft);
      font-size: 1rem;
      line-height: 1.46;
    }

    .activity-trail {
      display: grid;
      gap: 0.42rem;
      margin-top: 0.1rem;
      border-top: 1px solid rgba(18, 63, 50, 0.1);
      padding-top: 0.7rem;
    }

    .activity-trail strong {
      color: var(--ink);
      font-size: 0.86rem;
      font-weight: 790;
    }

    .activity-item {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 0.5rem;
      align-items: start;
      color: var(--ink-soft);
      font-size: 0.96rem;
      line-height: 1.44;
    }

    .activity-dot {
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 999px;
      background: var(--green);
      margin-top: 0.28rem;
    }

    .modal-documents__list {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
    }

    .modal-documents__list .document-link {
      margin-top: 0;
    }

    .modal-progress__list {
      display: grid;
      gap: 0.5rem;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .modal-progress__item {
      border-left: 2px solid var(--ink-muted);
      padding-left: 0.6rem;
    }

    .modal-progress__item:has(.modal-progress__status[data-status="Completed"]) { border-left-color: var(--green); }
    .modal-progress__item:has(.modal-progress__status[data-status="Failed"]) { border-left-color: var(--danger); }
    .modal-progress__item:has(.modal-progress__status[data-status="In progress"]) { border-left-color: var(--amber); }

    .modal-progress__head {
      display: flex;
      justify-content: space-between;
      gap: 0.5rem;
      align-items: baseline;
    }

    .modal-progress__label {
      color: var(--ink);
      font-weight: 700;
      font-size: 0.94rem;
    }

    .modal-progress__status {
      color: var(--ink-soft);
      font-size: 0.8rem;
      white-space: nowrap;
    }

    .modal-progress__summary {
      color: var(--ink-soft);
      font-size: 0.9rem;
      line-height: 1.4;
      margin: 0.15rem 0 0;
    }

    .decision-band {
      display: grid;
      gap: 0.66rem;
      margin-top: 0.2rem;
      border-radius: 1.1rem;
      background: var(--moss);
      padding: 0.78rem;
    }

    .decision-band strong {
      display: block;
      color: var(--ink);
      font-size: 0.86rem;
      font-weight: 800;
      margin-bottom: 0.18rem;
    }

    .decision-band span {
      color: var(--ink-soft);
      font-size: 0.96rem;
      line-height: 1.42;
    }

    .decision-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .decision-button {
      border: 1px solid transparent;
      border-radius: 999px;
      background: var(--green);
      color: var(--paper-warm);
      padding: 0.56rem 0.92rem;
      font-weight: 780;
      white-space: nowrap;
      cursor: pointer;
      transition: background 200ms var(--ease), opacity 200ms var(--ease);
    }

    .decision-button.is-primary {
      background: var(--green);
      color: var(--paper-warm);
    }

    .decision-button.is-primary:hover {
      background: var(--green-bright);
    }

    .decision-button.is-quiet {
      background: transparent;
      color: var(--green);
      border-color: var(--line-strong);
    }

    .decision-button.is-quiet:hover {
      background: rgba(18, 63, 50, 0.07);
    }

    .decision-button:disabled {
      opacity: 0.55;
      cursor: default;
    }

    .decision-error {
      margin-top: 0.5rem;
      color: var(--danger, #b4453a);
      font-size: 0.8rem;
      line-height: 1.35;
    }

    .composer-wrap {
      position: relative;
      z-index: 32;
      padding-bottom: 1rem;
    }

    .composer {
      width: min(47rem, calc(100vw - 3rem));
      margin: 0 auto 0.85rem;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      background: rgba(255, 250, 242, 0.68);
      backdrop-filter: blur(32px) saturate(1.16);
      box-shadow:
        0 1.4rem 4rem rgba(18, 63, 50, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
      padding: 0.42rem 0.5rem;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 0.45rem;
      align-items: center;
      border-radius: 1.6rem;
      position: relative;
    }

    .attach-input {
      width: 2.55rem;
      height: 2.55rem;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--ink-soft);
      display: grid;
      place-items: center;
      transition: background 200ms var(--ease), color 200ms var(--ease);
      grid-column: 1;
      grid-row: 1;
    }

    .composer--with-send {
      grid-template-columns: auto minmax(0, 1fr) auto auto;
    }

    .composer--locked {
      opacity: 0.72;
    }

    .composer--locked .idea,
    .composer--locked button {
      cursor: not-allowed;
    }

    .composer--locked .idea::placeholder {
      color: var(--ink-soft);
    }

    .attach-input:hover:not(:disabled) {
      background: rgba(18, 63, 50, 0.07);
      color: var(--green);
    }

    .file-count-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      left: 3rem;
      top: -0.72rem;
      padding: 0.15rem 0.4rem;
      font-size: 0.68rem;
      font-weight: 600;
      color: var(--canvas);
      background: var(--ink);
      border-radius: 999px;
      white-space: nowrap;
    }

    .file-count-badge[hidden] {
      display: none;
    }

    .voice-input {
      width: 2.55rem;
      height: 2.55rem;
      border: 0;
      border-radius: 999px;
      background: var(--green);
      color: var(--paper-warm);
      display: grid;
      place-items: center;
      transition: transform 200ms var(--ease), background 200ms var(--ease);
      grid-column: 3;
      grid-row: 1;
    }

    .voice-input:hover:not(:disabled) {
      transform: scale(1.05);
      background: var(--green-bright);
    }

    .send-input {
      min-width: 4.2rem;
      height: 2.55rem;
      border: 0;
      border-radius: 999px;
      background: var(--green);
      color: var(--paper-warm);
      display: grid;
      place-items: center;
      padding: 0 0.9rem;
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
      font-size: 0.82rem;
      font-weight: 780;
      grid-column: 4;
      grid-row: 1;
      transition: transform 200ms var(--ease), background 200ms var(--ease);
    }

    .send-input:hover:not(:disabled) {
      transform: scale(1.04);
      background: var(--green-bright);
    }

    .wave-icon {
      display: flex;
      align-items: center;
      gap: 0.12rem;
      height: 1.05rem;
    }

    .wave-icon i {
      width: 0.14rem;
      border-radius: 999px;
      background: currentColor;
    }

    .wave-icon i:nth-child(1) { height: 32%; }
    .wave-icon i:nth-child(2) { height: 62%; }
    .wave-icon i:nth-child(3) { height: 100%; }
    .wave-icon i:nth-child(4) { height: 48%; }
    .wave-icon i:nth-child(5) { height: 84%; }
    .wave-icon i:nth-child(6) { height: 40%; }
    .wave-icon i:nth-child(7) { height: 26%; }

    .is-listening .voice-input {
      animation: micPulse 1.1s ease-in-out infinite;
    }

    .is-listening .wave-icon i {
      animation: waveBounce 760ms ease-in-out infinite;
    }

    .is-listening .wave-icon i:nth-child(2) { animation-delay: 90ms; }
    .is-listening .wave-icon i:nth-child(3) { animation-delay: 180ms; }
    .is-listening .wave-icon i:nth-child(4) { animation-delay: 270ms; }
    .is-listening .wave-icon i:nth-child(5) { animation-delay: 360ms; }
    .is-listening .wave-icon i:nth-child(6) { animation-delay: 450ms; }
    .is-listening .wave-icon i:nth-child(7) { animation-delay: 540ms; }

    .idea {
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--ink);
      min-height: 2.55rem;
      padding: 0.56rem 0.5rem;
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
      font-size: 0.98rem;
      line-height: 1.35;
      resize: none;
      max-height: 8.4rem;
      overflow-y: auto;
      scrollbar-width: thin;
      grid-column: 2;
      grid-row: 1;
    }

    .idea::placeholder {
      color: var(--ink-muted);
    }

    .flow-button {
      border: 0;
      border-radius: 999px;
      width: 2.55rem;
      height: 2.55rem;
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
      font-weight: 720;
      display: grid;
      place-items: center;
    }

    .flow-controls {
      position: fixed;
      right: 1.25rem;
      bottom: 1.1rem;
      z-index: 42;
      display: flex;
      gap: 0.46rem;
      align-items: center;
      padding: 0.36rem;
      border: 1px solid rgba(18, 63, 50, 0.12);
      border-radius: 999px;
      background: rgba(255, 250, 242, 0.62);
      backdrop-filter: blur(26px) saturate(1.16);
      box-shadow:
        0 1rem 3rem rgba(18, 63, 50, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.68);
    }

    .flow-button {
      background: rgba(18, 63, 50, 0.08);
      color: var(--ink-soft);
    }

    .flow-button.primary {
      background: var(--green);
      color: var(--paper-warm);
    }

    .flow-button::before {
      content: "";
      display: block;
    }

    .flow-reset::before {
      width: 0.78rem;
      height: 0.78rem;
      border: 2px solid currentColor;
      border-right-color: transparent;
      border-radius: 999px;
    }

    .flow-next::before {
      width: 0.62rem;
      height: 0.62rem;
      border-top: 2px solid currentColor;
      border-right: 2px solid currentColor;
      transform: translateX(-0.08rem) rotate(45deg);
    }

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

    .progress {
      width: min(32rem, calc(100vw - 3rem));
      margin: 0 auto 0.82rem;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 0.36rem;
    }

    .tick {
      height: 0.25rem;
      border-radius: 999px;
      background: rgba(18, 63, 50, 0.12);
      overflow: hidden;
    }

    .tick::after {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      background: var(--green);
      transform-origin: left;
      transform: scaleX(0);
      transition: transform 520ms var(--ease);
    }

    .stage-0 .tick:nth-child(-n+1)::after,
    .stage-1 .tick:nth-child(-n+2)::after,
    .stage-2 .tick:nth-child(-n+3)::after,
    .stage-3 .tick:nth-child(-n+4)::after,
    .stage-4 .tick:nth-child(-n+5)::after,
    .stage-5 .tick:nth-child(-n+6)::after {
      transform: scaleX(1);
    }

    .caption {
      width: min(39rem, calc(100vw - 3rem));
      margin: 0 auto;
      color: var(--ink-muted);
      text-align: center;
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
      font-size: 0.8rem;
    }

    /* wanders forward/back at irregular steps; ends one period on (2.2rem ≡ 0) so it loops seamlessly */

    /* slowly steers the band flow to other angles (diagonal/vertical); start==end so it loops */

    @keyframes voiceRing {
      0% { opacity: 0.38; transform: scale(0.72); }
      100% { opacity: 0; transform: scale(1.18); }
    }

    @keyframes caretBlink {
      0%, 45% { opacity: 1; }
      46%, 100% { opacity: 0; }
    }

    @keyframes micPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(79, 110, 88, 0.22); }
      50% { box-shadow: 0 0 0 0.55rem rgba(79, 110, 88, 0); }
    }

    @keyframes waveBounce {
      0%, 100% { transform: scaleY(0.5); }
      50% { transform: scaleY(1.25); }
    }

    @media (max-width: 980px) {
      html,
      body {
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
      }

      .prototype {
        min-height: 100vh;
        width: 100%;
        overflow-x: hidden;
      }

      .nav {
        inset: 1.25rem 1rem auto;
        min-width: 0;
      }

      .nav-actions {
        min-width: 0;
        gap: 0.4rem;
      }

      .voice-toggle {
        padding: 0.5rem;
      }

      .space {
        padding-top: 6.8rem;
        padding-bottom: 2rem;
        place-items: start center;
      }

      .presence {
        inset: 4.5rem 0 auto;
        height: 34rem;
      }

      /* stage-0: lift the core above the lower composer on mobile */
      .core,
      .voice-rings {
        top: 26%;
      }

      .thread {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        margin-top: 16rem;
      }

      .room-rail,
      .right-panel {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        width: min(100%, calc(100vw - 2rem));
        max-height: 0;
        margin: 0 auto;
        overflow: hidden;
      }

      .right-panel {
        margin-top: 0;
      }

      .right-panel.is-visible {
        max-height: 18rem;
        margin: 0 auto 1rem;
      }

      .stage-5 .thread {
        top: auto;
        bottom: auto;
        margin-top: 1rem;
      }

      .stage-1 .core,
      .stage-2 .core,
      .stage-3 .core,
      .stage-4 .core,
      .stage-5 .core,
      .stage-1 .voice-rings,
      .stage-2 .voice-rings,
      .stage-3 .voice-rings,
      .stage-4 .voice-rings,
      .stage-5 .voice-rings {
        left: 2.38rem;
        top: 2.31rem; /* the Velros logo, viewport coords */
        width: 1.75rem; /* keep the core full size on mobile, don't shrink */
      }

      .composer {
        grid-template-columns: auto minmax(0, 1fr) auto;
        border-radius: 999px;
        padding: 0.34rem;
        width: min(47rem, calc(100vw - 3rem));
        margin-left: auto;
        margin-right: auto;
        gap: 0.28rem;
      }

      .composer--with-send {
        grid-template-columns: auto minmax(0, 1fr) auto auto;
      }

      .attach-input,
      .voice-input {
        width: 2.36rem;
        height: 2.36rem;
      }

      .idea {
        min-height: 2.36rem;
        padding: 0.45rem 0.42rem;
        font-size: 0.92rem;
        line-height: 1.28;
      }

      .composer-wrap {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0.7rem;
        padding-bottom: 0;
      }

      .progress,
      .caption {
        display: none;
      }

      .flow-controls {
        left: min(17.1rem, calc(100vw - 6.8rem));
        right: auto;
        bottom: 5.4rem;
        transform: scale(0.88);
        transform-origin: right bottom;
      }
    }

/* ── Live conversation (signed-in founder talks in place) ──────────────────
   Talking on the front door starts a real conversation here. The founder's
   messages render as bubbles in this thread; the
   Velros reply / backend wiring is the next step. Reuses .bubble from above. */
.live-thread {
  position: relative;
  z-index: 18;
  width: min(47rem, calc(100vw - 3rem));
  margin: 0 auto;
  display: grid;
  gap: 0.72rem;
  padding: 0 0.2rem;
}

.space > .live-thread {
  align-self: end;
}

.prototype:not(.is-live) .space > .live-thread {
  position: absolute;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%);
}

@media (max-width: 980px) {
  .thread {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 7rem;
    width: auto;
    margin-top: 0;
    transform: none;
  }

  .stage-5 .thread {
    bottom: 7rem;
    width: auto;
    margin-top: 0;
  }

  .prototype:not(.is-live) .space > .live-thread {
    bottom: 7rem;
    width: min(47rem, calc(100vw - 3rem));
  }

  .live-thread .bubble,
  .thread .bubble {
    /* Reserve a gutter on the bubble's aligned side so the timestamp sits OUTSIDE
       the bubble on ONE line (absolute + nowrap, inherited from the base rule),
       like desktop — no inside stacking, no wrapping. The relative-time labels
       are short ("just now", "5m ago", "1d ago"), so they fit this gutter. */
    max-width: min(100% - 5rem, 39rem);
  }
}

.live-thread[hidden] {
  display: none;
}

.live-thread .bubble,
.thread .bubble {
  opacity: 1;
  transform: none;
}

.live-thread .bubble.enter,
.thread .bubble.enter {
  animation: bubbleIn 520ms var(--ease) both;
}

@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(0.6rem); }
  to { opacity: 1; transform: none; }
}

/* is-live: the signed-in conversation state. Reveals the same chrome the staged
   demo does while keeping the real thread readable. */
.prototype.is-live .brand {
  opacity: 0;
  pointer-events: none;
}

.prototype.is-live .voice-toggle {
  position: fixed;
  left: 4.1rem;
  top: 2.38rem;
  width: 1.55rem;
  height: 1.55rem;
  padding: 0;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
  transition-delay: 1180ms, 1180ms, 0ms, 0ms;
  z-index: 42;
}

.prototype.is-live .info-toggle {
  position: fixed;
  right: 1.6rem;
  top: 1.3rem;
  z-index: 43;
}

.prototype.is-live .info-drawer {
  position: fixed;
  top: 4.65rem;
  right: 1.6rem;
}

.prototype.is-live .voice-icon {
  width: 0.72rem;
  height: 0.72rem;
}

.prototype.is-live .room-rail {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.prototype.is-live .founder-room,
.prototype.is-live .product-room {
  opacity: 1;
  transform: translateY(0);
}

.prototype.is-live .session-list {
  opacity: 1;
  max-height: 12rem;
}

.prototype.is-live .core,
.prototype.is-live .voice-rings {
  position: fixed;
  left: 2.94rem;
  top: 2.38rem;
  width: clamp(1.1rem, 2.25vw, 1.75rem);
  transform: translate(-50%, -50%);
  z-index: 41;
}

@media (max-width: 980px) {
  .prototype.is-live .core,
  .prototype.is-live .voice-rings {
    left: 2.38rem;
    top: 2.31rem;
    width: 1.75rem;
  }

  .prototype.is-live .voice-toggle {
    left: 3.58rem;
    top: 2.31rem;
    width: 1.55rem;
    height: 1.55rem;
  }

  .prototype.is-live .info-toggle {
    right: 1rem;
    top: 1.25rem;
  }

  .prototype.is-live .info-drawer {
    right: 1rem;
  }

  .prototype.is-live .room-rail {
    max-height: min(32rem, calc(100vh - 11rem));
    margin: 0;
  }
}

/* ── Signed-in room switcher + product-room creation ──────────────────────── */
/* The Founder/Product room cards are real buttons in the signed-in rail. */
.room-rail .room-card {
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.room-card.is-active {
  background: var(--moss);
  box-shadow:
    inset 0 0 0 1px rgba(18, 63, 50, 0.14),
    0 1rem 3rem rgba(18, 63, 50, 0.08);
}

.room-card[hidden] {
  display: none;
}

/* ── Prompt dock (Claude-Code-style structured input above the composer) ────
   Velros' approvals / choices render here — options, checkboxes, or a text
   field — never inside a bubble. Sits directly above the message composer. */
.prompt-dock {
  width: min(48rem, calc(100vw - 3rem));
  margin: 0 auto 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 1.25rem;
  background: rgba(255, 250, 242, 0.86);
  backdrop-filter: blur(28px) saturate(1.16);
  box-shadow:
    0 1.2rem 3.4rem rgba(18, 63, 50, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  padding: 0.95rem 1.05rem;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  animation: bubbleIn 380ms var(--ease) both;
}

.prompt-dock[hidden] {
  display: none;
}

.composer-status {
  width: min(48rem, calc(100vw - 3rem));
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
}

.composer-status:empty {
  display: none;
}

.composer-status .control-status {
  margin: 0 0 0.5rem;
}

.task-chip {
  width: min(48rem, calc(100vw - 3rem));
  margin: 0 auto 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--moss);
  padding: 0.35rem 0.4rem 0.35rem 0.9rem;
  font-size: 0.86rem;
  color: var(--ink);
}

.task-chip[hidden] {
  display: none;
}

.task-chip__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-chip__dismiss {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
}

.prompt-dock__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
}

.prompt-dock__q {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 780;
  line-height: 1.3;
}

/* The close (×) at the far right of the prompt header. */
.prompt-dock__close {
  flex: none;
  width: 1.65rem;
  height: 1.65rem;
  border: 0;
  border-radius: 999px;
  background: rgba(18, 63, 50, 0.07);
  color: var(--ink-soft);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.prompt-dock__close:hover {
  background: rgba(18, 63, 50, 0.12);
  color: var(--ink);
}

/* The focused question shown compactly under the header. */
.prompt-dock__question {
  margin-top: 0.3rem;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.4;
}

/* "Skip for now" — a quiet text link beside Submit. */
.prompt-skip {
  border: 0;
  background: none;
  padding: 0.3rem 0.2rem;
  color: var(--ink-soft);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.prompt-skip:hover {
  color: var(--ink);
}

.prompt-dock__hint {
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.35;
  margin-top: 0.22rem;
}

.prompt-dock__control {
  margin-top: 0.7rem;
}

.prompt-input {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 0.8rem;
  background: var(--paper-warm);
  color: var(--ink);
  padding: 0.6rem 0.85rem;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.35;
  resize: none;
}

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

.prompt-input:focus {
  outline: none;
  border-color: var(--green);
}

.prompt-options {
  display: grid;
  gap: 0.34rem;
}

.prompt-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.62rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: rgba(255, 250, 242, 0.5);
  color: var(--ink);
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
  transition: background 160ms var(--ease), border-color 160ms var(--ease);
}

.prompt-option:hover {
  background: rgba(255, 250, 242, 0.85);
}

.document-link {
  border: 1px solid var(--line-strong);
  border-radius: 0.7rem;
  background: rgba(255, 250, 242, 0.78);
  color: var(--green-deep);
  cursor: pointer;
  font: inherit;
  font-weight: 760;
  margin-top: 0.45rem;
  padding: 0.42rem 0.68rem;
  text-decoration: underline;
  text-underline-offset: 0.16rem;
}

.document-preview {
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.65;
  max-height: min(64vh, 42rem);
  overflow: auto;
  padding: 0.9rem;
  white-space: pre-wrap;
}

/* A rendered markdown reply (See more) uses block layout, not preformatted text. */
.document-preview.markdown-body {
  white-space: normal;
}

.document-preview code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.prompt-option__title {
  font-weight: 720;
}

.prompt-option__badge {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-muted);
  font-size: 0.72rem;
  font-weight: 720;
  padding: 0.1rem 0.42rem;
}

.prompt-option__body {
  color: var(--ink-soft);
  flex-basis: 100%;
  font-size: 0.82rem;
  line-height: 1.32;
}

.prompt-option input {
  accent-color: var(--green);
  flex: none;
}

.prompt-option.is-selected {
  background: var(--moss);
  border-color: rgba(18, 63, 50, 0.18);
}

.prompt-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.prompt-dismiss {
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  padding: 0.55rem 0.7rem;
  font: inherit;
  font-size: 0.85rem;
  border-radius: 999px;
}

.prompt-dismiss:hover {
  color: var(--green);
}

/* ── Conversation layout (signed-in chat) ─────────────────────────────────
   The whole surface scrolls, the chat panel fills the height, and the message
   composer (with its prompt dock) stays pinned to the bottom. The scrollbar is
   invisible until the founder scrolls (see .show-scroll + JS). */
.prototype.is-live {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.prototype.is-live.show-scroll {
  scrollbar-color: rgba(18, 63, 50, 0.28) transparent;
}

.prototype.is-live::-webkit-scrollbar {
  width: 9px;
}

.prototype.is-live::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.prototype.is-live.show-scroll::-webkit-scrollbar-thumb {
  background: rgba(18, 63, 50, 0.26);
  background-clip: padding-box;
}

.prototype.is-live .stage {
  display: block;
  min-height: 100vh;
}

.prototype.is-live .space {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  padding: 6.8rem 1.4rem 2rem; /* JS extends padding-bottom to clear the composer */
}

/* The conversation column is ALWAYS centered on the full viewport, independent of
   the side panels — the thread and composer both use the base
   `width: min(47rem, calc(100vw - 3rem)); margin-inline: auto`, with no chrome
   reserves. The room rail (left) and "Running now" panel (right) FLOAT over the
   gutters (position: fixed) and never shift or shrink the chat. On mobile they
   become off-canvas drawers (see the bottom of this file). */

.live-thread--bottom-stack {
  flex: 1 1 auto;
  min-height: 0;
  align-content: end;
  grid-auto-rows: max-content;
  align-self: stretch;
}

/* Conversation mode: the prototype IS the scroll surface. The chrome (nav, room
   rail, composer, docked core) is viewport-fixed below, so only the thread
   scrolls under it — and `scrollChatToBottom()` scrolls THIS element. The base
   `.prototype` is `overflow: hidden` for the staged front door; in the signed-in
   chat, bind it to the viewport and scroll the overflow so the full history is
   reachable (older messages above, latest at the bottom). Chat layout unchanged. */
.prototype.is-live {
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Viewport-fixed footer. Horizontal padding (the rail/panel reserves) is set by
   the (min-width: 981px) block above and must NOT be reset here — so set only the
   vertical padding with padding-block. Using the `padding` shorthand here would
   clobber padding-left/right back to 0 (this rule comes later in source), which
   un-aligned the composer from the thread on desktop/tablet. */
.prototype.is-live .composer-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 32;
  padding-block: 1.2rem 1.1rem;
  background: linear-gradient(to top, var(--paper-deep) 46%, rgba(234, 223, 206, 0));
}

/* Chrome that must NOT move while the chat scrolls: the nav (voice toggle), the
   room rail (Founder/Product room buttons), and the docked core are pinned to
   the viewport — not the scrolling surface. (The core/voice-rings are already
   fixed above.) */
.prototype.is-live .nav,
.prototype.is-live .room-rail {
  position: fixed;
}

/* Mobile clears only the fixed nav (the rail is a left drawer now, not a top
   banner). The room rail + task panel become off-canvas drawers — see the
   "Mobile side-panel drawers" block at the end of this file. */
@media (max-width: 980px) {
  .prototype.is-live .space {
    padding-top: 6.8rem;
  }
}

/* New task cards animate in (reuses the bubble entrance). */
.task-card.enter {
  animation: bubbleIn 420ms var(--ease) both;
}

/* When the founder stacks up tasks, the "Running now" panel caps its height and
   scrolls internally (the heading stays; only the task list scrolls). */
.prototype.is-live .right-panel.is-visible {
  position: fixed;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 13rem);
  overflow: hidden;
}

.prototype.is-live .right-panel.is-visible h3 {
  flex: none;
}

.prototype.is-live .task-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.15rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(18, 63, 50, 0.22) transparent;
}

.prototype.is-live .task-list::-webkit-scrollbar {
  width: 7px;
}

.prototype.is-live .task-list::-webkit-scrollbar-thumb {
  background: rgba(18, 63, 50, 0.2);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* Top nav: story-page links to the right of the logo (open in a new tab). */
.nav-left {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  min-width: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 640;
}

.nav-links a {
  color: var(--nav-link);
  white-space: nowrap;
  text-decoration: none;
  transition: color 150ms var(--ease);
}

.nav-links a:hover {
  color: var(--nav-link-hover);
}

@media (max-width: 720px) {
  .nav-links {
    display: none;
  }
}

/* ── Mobile side-panel drawers ─────────────────────────────────────────────
   Desktop/tablet: the room rail (left) and "Running now" panel (right) float in
   the gutters (position: fixed) and the chat stays viewport-centered; the toggle
   icons are hidden. On mobile both panels become off-canvas drawers that the
   top-corner toggle icons slide in from their side, over a tap-to-close scrim.
   This block is last in the file so it wins the source-order cascade over the
   desktop floating rules above (equal specificity). */
.panel-toggle {
  display: none;
}

@media (max-width: 980px) {
  .panel-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 250, 242, 0.72);
    color: var(--ink);
    z-index: 66;
  }

  .panel-toggle[hidden] {
    display: none;
  }

  .panel-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .prototype.is-live .room-rail {
    position: fixed;
    left: 0;
    right: auto;
    top: 0;
    bottom: 0;
    width: min(20rem, 84vw);
    max-width: 84vw;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 5.4rem 1rem 1.4rem;
    opacity: 1;
    pointer-events: auto;
    overflow-y: auto;
    z-index: 64;
    background: var(--paper-warm);
    border-right: 1px solid var(--line);
    box-shadow: 0.6rem 0 2.4rem rgba(18, 63, 50, 0.16);
    transform: translateX(-100%);
    transition: transform 320ms var(--ease);
  }

  .prototype.is-live .room-rail.is-open {
    transform: translateX(0);
  }

  .prototype.is-live .right-panel.is-visible {
    position: fixed;
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(20rem, 84vw);
    max-width: 84vw;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 5.4rem 1rem 1.4rem;
    overflow-y: auto;
    z-index: 64;
    border-left: 1px solid var(--line);
    box-shadow: -0.6rem 0 2.4rem rgba(18, 63, 50, 0.16);
    transform: translateX(100%);
    transition: transform 320ms var(--ease);
  }

  .prototype.is-live .right-panel.is-visible.is-open {
    transform: translateX(0);
  }

  .panel-scrim {
    position: fixed;
    inset: 0;
    background: rgba(18, 63, 50, 0.34);
    z-index: 62;
    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms var(--ease);
  }

  .panel-scrim.is-open {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Velros logo lockup — mark + wordmark, kept visible top-left. The front-door
   choreography faded the brand out in the staged/live states; keep the logo present
   for a consistent top-left mark (matching the rest of the app), and return the voice
   control to the right actions cluster so it doesn't sit under the logo when signed in. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.brand .brand-mark {
  width: 1.55rem;
  height: 1.55rem;
  display: block;
  flex: none;
}
.stage-1 .brand,
.stage-2 .brand,
.stage-3 .brand,
.stage-4 .brand,
.stage-5 .brand,
.prototype.is-live .brand {
  opacity: 1;
  pointer-events: auto;
}
.prototype.is-live .voice-toggle {
  position: static;
  left: auto;
  top: auto;
}