/* ═══════════════════════════════════════════════════════════════
   PRELUDE + CANVAS — additive layer
   These live inside the room. They are the capture + artifact
   surface. Violet accent (#7C8CFF) = system intelligence.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --violet:#7C8CFF;
}

/* ─────────── PRELUDE — clarifying question card ───────────
   Rises when Chorus wants to refine a direction. Multi-choice,
   numbered, with a "something else" input and Skip. Violet accent
   signals system intelligence (not a personality).
*/
.prelude-wrap{
  position:absolute;left:12px;right:12px;
  z-index:12;
  display:none;flex-direction:column;gap:8px;align-items:stretch;
  opacity:0;transform:translateY(16px);
  transition:opacity .45s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1);
  /* Default: voice mode — sits above the mic ghost + icon row */
  bottom:130px;
}
.prelude-wrap.show{display:flex}
.prelude-wrap.rest{opacity:1;transform:translateY(0)}
.prelude-wrap.entering{
  /* mid-rise — partial opacity, slight motion blur */
  opacity:.6;transform:translateY(8px);
  filter:blur(.3px);
}
/* Keyboard-mode lift: above composer (bottom ~64px) + keyboard (~216px) */
.prelude-wrap.kb-mode{
  /* Sit just above the composer bar. Card + hint row stack naturally. */
  bottom:286px;
  /* No top pin — let it size to content; card sits between Dynamic Island + composer */
}
.prelude-wrap.kb-mode .prl-card{
  /* tighter spacing so all three options + footer fit under Dynamic Island */
  padding:11px 12px 7px;
  gap:7px;
}
.prelude-wrap.kb-mode .prl-q{font-size:12.5px;line-height:1.28}
.prelude-wrap.kb-mode .prl-opt{padding:7px 10px}
.prelude-wrap.kb-mode .prl-lbl{font-size:11.5px;line-height:1.3}
.prelude-wrap.kb-mode .prl-foot{padding:5px 6px 1px}
.prelude-wrap.kb-mode .prl-else{font-size:11.5px}
/* Hide transcript behind keyboard-mode prelude so text doesn't bleed through */
.phone.in-room .room:has(.prelude-wrap.kb-mode.show) #tc,
.phone.in-room .room:has(.prelude-wrap.kb-mode.show) #modep{
  opacity:0;transition:opacity .3s ease;
}

.prl-card{
  background:rgba(18,18,20,.78);
  border:0.5px solid rgba(124,140,255,.22);
  border-radius:18px;
  box-shadow:
    0 0 40px rgba(124,140,255,.10),
    0 12px 28px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(124,140,255,.10);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  padding:14px 14px 10px;
  display:flex;flex-direction:column;gap:10px;
  overflow:hidden;
  position:relative;
}
/* Ambient violet halo at top edge */
.prl-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(124,140,255,.55) 50%, transparent 100%);
}

/* Header row */
.prl-head{display:flex;align-items:flex-start;gap:10px}
.prl-q{
  flex:1;min-width:0;
  font-size:13.5px;line-height:1.32;letter-spacing:.1px;
  color:rgba(242,237,228,.94);
  /* serif-adjacent italic for that clarifying voice */
  font-style:italic;font-weight:400;
}
.prl-head-r{flex-shrink:0;display:flex;align-items:center;gap:8px;padding-top:1px}
.prl-pager{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10px;color:rgba(242,237,228,.42);letter-spacing:.08em;
  line-height:1;font-variant-numeric:tabular-nums;
}
.prl-pager .pg-arrow{
  width:14px;height:14px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:rgba(242,237,228,.4);transition:color .22s;
}
.prl-pager .pg-arrow:hover{color:rgba(242,237,228,.85)}
.prl-close{
  width:20px;height:20px;display:flex;align-items:center;justify-content:center;
  color:rgba(242,237,228,.35);cursor:pointer;transition:color .22s;
}
.prl-close:hover{color:rgba(242,237,228,.85)}

/* Option rows */
.prl-opts{display:flex;flex-direction:column;gap:0;margin:2px -4px 0}
.prl-opt{
  display:flex;align-items:center;gap:12px;
  padding:10px 10px;
  border-radius:12px;
  cursor:pointer;
  position:relative;
  transition:background .22s ease;
}
.prl-opt + .prl-opt{border-top:0.5px solid rgba(242,237,228,.06)}
.prl-opt.sel{
  background:rgba(124,140,255,.12);
  border:0.5px solid rgba(124,140,255,.38);
  box-shadow:inset 0 0 0 0.5px rgba(124,140,255,.18);
}
.prl-opt.sel + .prl-opt,
.prl-opt + .prl-opt.sel{border-top-color:transparent}
.prl-opt:hover:not(.sel){background:rgba(242,237,228,.03)}
.prl-num{display:none}
.prl-dot{
  flex-shrink:0;width:4px;height:4px;border-radius:50%;
  background:rgba(124,140,255,.35);
  margin:0 4px 0 2px;
  transition:background .22s;
}
.prl-opt.sel .prl-dot{background:rgba(124,140,255,.95);box-shadow:0 0 6px rgba(124,140,255,.55)}
.prl-lbl{
  flex:1;min-width:0;
  font-size:12.5px;line-height:1.35;color:rgba(242,237,228,.88);
  letter-spacing:.05px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.prl-opt.sel .prl-lbl{color:var(--cream)}
.prl-arrow{
  flex-shrink:0;width:14px;height:14px;
  color:rgba(124,140,255,.85);
  opacity:0;transform:translateX(-3px);transition:opacity .22s, transform .22s;
}
.prl-opt.sel .prl-arrow{opacity:1;transform:translateX(0)}

/* Footer: "something else" + skip */
.prl-foot{
  display:flex;align-items:center;gap:10px;
  padding:8px 6px 2px;
  border-top:0.5px solid rgba(242,237,228,.06);
  margin-top:2px;
}
.prl-pencil{
  flex-shrink:0;width:18px;height:18px;display:flex;align-items:center;justify-content:center;
  color:rgba(242,237,228,.38);
}
.prl-else{
  flex:1;min-width:0;
  font-size:12px;color:rgba(242,237,228,.38);letter-spacing:.1px;
  line-height:1;
}
.prl-skip{
  flex-shrink:0;
  padding:6px 14px;border-radius:8px;
  border:0.5px solid rgba(242,237,228,.16);
  background:transparent;
  color:rgba(242,237,228,.72);
  font-size:10.5px;letter-spacing:.1em;
  cursor:pointer;transition:background .22s, border-color .22s;
  line-height:1;
}
.prl-skip:hover{background:rgba(242,237,228,.06);border-color:rgba(242,237,228,.3)}

/* Keyboard-hint footer removed — desktop pattern, broke iPhone illusion */

/* ─────────── CANVAS ICON + BADGE ─────────── */
.ic-canvas{position:relative}
.ic-canvas .cv-badge{
  position:absolute;top:-3px;right:-5px;
  width:13px;height:13px;border-radius:50%;
  background:var(--violet);color:#fff;
  font-size:9px;font-weight:600;letter-spacing:0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 8px rgba(124,140,255,.45);
  opacity:0;transform:scale(.6);transition:opacity .25s, transform .25s;
  line-height:1;padding-bottom:.5px;
}
.ic-canvas.has-captures .cv-badge{opacity:1;transform:scale(1)}
.ic-canvas.has-captures svg{opacity:.72}

/* ─────────── CANVAS BOTTOM SHEET ─────────── */
.canvas-sheet{
  position:absolute;left:0;right:0;bottom:0;
  height:85%;
  z-index:25;
  background:rgba(14,14,14,.88);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:0.5px solid rgba(255,255,255,.08);
  border-radius:22px 22px 0 0;
  transform:translateY(100%);transition:transform .45s cubic-bezier(.2,.7,.2,1);
  display:flex;flex-direction:column;
  pointer-events:none;
}
.canvas-sheet.on{transform:translateY(0);pointer-events:auto}
.cv-handle{
  flex-shrink:0;width:36px;height:4px;border-radius:2px;
  background:rgba(255,255,255,.18);
  margin:10px auto 0;
}
.cv-progress{
  flex-shrink:0;align-self:center;
  width:40px;height:2px;border-radius:1px;
  background:rgba(124,140,255,.22);
  overflow:hidden;
  margin:14px 0 0;
}
.cv-progress-fill{
  width:37.5%;height:100%;border-radius:1px;
  background:rgba(124,140,255,.75);
  transition:width .4s ease;
}

.cv-head{
  flex-shrink:0;display:flex;align-items:flex-start;justify-content:space-between;
  padding:18px 18px 12px 20px;gap:10px;
}
.cv-head-l{display:flex;flex-direction:column;gap:3px}
.cv-title{font-size:18px;font-weight:500;color:var(--cream);letter-spacing:.3px;line-height:1}
.cv-sub{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(242,237,228,.38)}
.cv-head-r{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.cv-status{
  display:inline-flex;align-items:center;gap:5px;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(242,237,228,.45);line-height:1;
}
.cv-status svg{opacity:.75}
.cv-export{
  display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 11px;
  border:0.5px solid rgba(124,140,255,.45);background:rgba(124,140,255,.08);
  border-radius:999px;cursor:pointer;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(242,237,228,.92);transition:background .22s ease;line-height:1;
}
.cv-export:hover{background:rgba(124,140,255,.18)}

.cv-stack{
  flex:1;min-height:0;overflow-y:auto;padding:4px 14px 22px;
  display:flex;flex-direction:column;gap:8px;
}
.cv-stack::-webkit-scrollbar{display:none}

.cv-card{
  position:relative;min-height:64px;border-radius:12px;
  background:rgba(242,237,228,.03);
  border:0.5px solid rgba(242,237,228,.06);
  padding:12px 14px 12px 17px;
  display:flex;flex-direction:column;gap:5px;
  cursor:pointer;transition:background .22s ease, border-color .22s ease;
}
.cv-card:hover{background:rgba(242,237,228,.05);border-color:rgba(242,237,228,.1)}
.cv-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--cv-color, var(--cream));
  border-radius:3px 0 0 3px;
}
.cv-meta{
  font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cv-color, rgba(242,237,228,.52));
  opacity:.72;line-height:1;
}
.cv-body{
  font-size:12px;line-height:1.38;color:rgba(242,237,228,.88);
  font-style:italic;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cv-chev{
  position:absolute;right:12px;bottom:11px;
  color:rgba(242,237,228,.22);line-height:0;
}

/* Session-end artifact card — "the session became something" */
.cv-artifact{
  position:relative;min-height:88px;border-radius:16px;
  background:rgba(124,140,255,.07);
  border:0.5px solid rgba(124,140,255,.38);
  box-shadow:
    0 0 36px rgba(124,140,255,.10),
    inset 0 1px 0 rgba(124,140,255,.12);
  padding:18px 14px 14px 18px;
  display:flex;align-items:center;gap:14px;
  overflow:hidden;cursor:pointer;
  transition:background .22s ease, border-color .22s ease;
  margin-top:14px;
}
/* Threshold divider: ideas above, session output below */
.cv-artifact::after{
  content:"";position:absolute;
  top:-7px;left:14px;right:14px;height:0.5px;
  background:rgba(124,140,255,.18);
}
.cv-artifact:hover{background:rgba(124,140,255,.10);border-color:rgba(124,140,255,.55)}
/* Violet shimmer on top edge */
.cv-artifact::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:rgba(124,140,255,.55);
}
.cv-art-icon{
  flex-shrink:0;width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 2px 8px rgba(124,140,255,.35));
}
.cv-art-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.cv-art-top{font-size:13px;font-weight:500;color:rgba(242,237,228,.92);line-height:1.25}
.cv-art-meta{
  font-size:9px;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(242,237,228,.38);line-height:1.3;
}
.cv-art-open{
  flex-shrink:0;display:inline-flex;align-items:center;
  height:28px;padding:0 13px;border-radius:999px;
  border:0.5px solid rgba(124,140,255,.45);
  background:rgba(124,140,255,.10);
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(242,237,228,.92);line-height:1;cursor:pointer;
  transition:background .22s ease;
}
.cv-art-open:hover{background:rgba(124,140,255,.22)}