/* Fimo Studio chat column, dark theme. Reconciled 2026-10-13 against origin/develop:
   - tokens: apps/ui/src/index.css `.dark` block (lines 77-110)
   - buttons: apps/ui/src/components/ui/button.tsx (rounded-2xl, h-8 / sm h-7, outline dark:bg-transparent)
   - docked tray: apps/ui/src/features/chat/components/PendingReviewsTray.tsx
   - question form: Messages/QuestionForm.tsx, Blocks/Choices.tsx, Blocks/selection.tsx
   - composer: ChatInput.tsx, Input.tsx, ChatLexicalInput.tsx
   - column: workspace/ChatConversation.tsx:49 and Messages/Messages.tsx:871 (max-w-3xl) */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: block;
  font-weight: 100 900;
  src: url('inter-latin-wght-normal.woff2') format('woff2-variations');
}

:root {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  --popover: oklch(0.21 0.006 285.885);
  --primary: oklch(55.3% 0.195 38.402);
  --primary-foreground: oklch(98% 0.016 73.684);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.274 0.006 286.033);
  --muted-foreground: oklch(0.705 0.015 286.067);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.552 0.016 285.938);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  /* ring-muted-foreground/30 ring-2 (PendingReviewsTray.tsx:78) */
  --arrival-ring: color-mix(in oklab, var(--muted-foreground) 30%, transparent);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Inter Variable', sans-serif;
  font-size: 14px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
svg { flex-shrink: 0; display: block; }
button { font: inherit; color: inherit; appearance: none; margin: 0; }
p { margin: 0; }
.muted { color: var(--muted-foreground); }

/* ---------- Column: mx-auto w-full max-w-3xl ---------- */
.col { max-width: 768px; margin: 0 auto; display: flex; flex-direction: column; justify-content: flex-end; }
/* MessageScrollerContent: gap-3 p-4 md:px-8 md:py-4 (Messages.tsx:871) */
.thread { display: flex; flex-direction: column; gap: 12px; padding: 16px 32px; }
/* bottom slot: px-3 pb-3 md:px-8 md:pb-8 (ChatConversation.tsx:49) */
.bottom { padding: 0 32px 32px; }
.mobile .thread { padding: 16px; }
.mobile .bottom { padding: 0 12px 12px; }
/* the transcript continues above: scroll-fade-b on the scroller, faded at the top here */
.thread.fade-top { mask-image: linear-gradient(to bottom, transparent 0, #000 32px); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 32px); }

/* ---------- Messages ---------- */
/* Message.Content: flex-1 min-w-0 flex flex-col gap-4 py-0.5; StyledMarkdown p: mb-4 leading-6 */
.msg { display: flex; flex-direction: column; gap: 16px; padding: 2px 0; font-size: 14px; }
.msg p { line-height: 24px; }
/* MessageBubble own: bg-muted rounded-2xl rounded-br-sm px-4 py-3 max-w-[80%] */
.bubble { align-self: flex-end; max-width: 80%; background: var(--muted); border-radius: 16px 16px 2px 16px; padding: 12px 16px; line-height: 24px; }
/* Marker: flex gap-2 text-sm text-muted-foreground, svg size-4; links underline underline-offset-3 */
.marker { display: flex; align-items: center; gap: 8px; min-height: 16px; color: var(--muted-foreground); font-size: 14px; }
.marker a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Docked panel (PendingReviewsTray.tsx:73-79) ---------- */
/* mb-2 min-w-0 */
.slot { margin-bottom: 8px; min-width: 0; }
/* bg-popover overflow-hidden rounded-3xl border shadow-xs */
.dock { background: var(--popover); overflow: hidden; border-radius: 24px; border: 1px solid var(--border); box-shadow: var(--shadow-xs); transition: box-shadow 500ms; }
/* highlighted && 'ring-muted-foreground/30 ring-2' */
.dock.ring { box-shadow: 0 0 0 2px var(--arrival-ring), var(--shadow-xs); }
/* toggle: flex w-full min-w-0 items-center gap-3 px-4 py-2.5 text-left hover:bg-muted/40 (line 92) */
.toggle { display: flex; width: 100%; min-width: 0; align-items: center; gap: 12px; padding: 10px 16px; text-align: left; background: transparent; border: 0; cursor: pointer; }
.toggle:hover { background: color-mix(in oklab, var(--muted) 40%, transparent); }
.toggle .ico { width: 16px; height: 16px; color: var(--muted-foreground); }
/* min-w-0 flex-1 truncate text-sm */
.toggle .head { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
/* pill: bg-secondary text-secondary-foreground flex shrink-0 items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium (line 101) */
.pill { display: flex; flex-shrink: 0; align-items: center; gap: 4px; border-radius: 8px; padding: 4px 10px; font-size: 12px; line-height: 16px; font-weight: 500; background: var(--secondary); color: var(--secondary-foreground); }
.pill svg { width: 14px; height: 14px; }
/* MinimizedForm primary pill: bg-primary text-primary-foreground (PendingFormTray.tsx:110) */
.pill.primary { background: var(--primary); color: var(--primary-foreground); }
/* number badge: flex size-5 shrink-0 items-center justify-center rounded-full text-xs font-bold (PendingFormTray.tsx:105) */
.num { display: flex; width: 20px; height: 20px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 999px; font-size: 12px; line-height: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.num.primary { background: var(--primary); color: var(--primary-foreground); }
.num.quiet { background: color-mix(in oklab, var(--muted-foreground) 20%, transparent); color: var(--muted-foreground); }

/* list: border-t; scroll-fade max-h-[34svh] overflow-y-auto overscroll-contain (lines 117-121) */
.list { border-top: 1px solid var(--border); }
/* 34svh of a 900px-tall Studio window = 306px, fixed so screenshots match */
.scroll { max-height: 306px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.scroll.fade { mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent); }

/* row: border-b px-4 py-3.5 last:border-b-0 (ReviewRow, line 139) */
.row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); min-width: 0; }
.row:last-child { border-bottom: 0; }
.row > .ico { width: 16px; height: 16px; color: var(--muted-foreground); }
.row .txt { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
/* truncate text-sm font-medium (line 141) */
.row .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; }
.row .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 16px; color: var(--muted-foreground); }
.row .sub b { font-weight: 500; color: var(--foreground); }
.row.new { box-shadow: inset 0 0 0 2px var(--arrival-ring); }
.row.closing { opacity: 0.45; }
.row.closing .title { text-decoration: line-through; text-decoration-color: var(--muted-foreground); }
.row .done { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; color: var(--muted-foreground); flex-shrink: 0; }
.row .done svg { width: 14px; height: 14px; }

/* "Show 2 more" */
.more { display: flex; width: 100%; align-items: center; gap: 12px; padding: 10px 16px; border: 0; border-top: 1px solid var(--border); background: transparent; color: var(--muted-foreground); font-size: 14px; cursor: pointer; text-align: left; }
.more svg { width: 16px; height: 16px; }
.more:hover { background: color-mix(in oklab, var(--muted) 40%, transparent); color: var(--foreground); }

/* group header and bulk row (05) */
.group { display: flex; align-items: center; gap: 6px; padding: 12px 16px 4px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--muted-foreground); }
.group .count { font-variant-numeric: tabular-nums; }
.group + .row { padding-top: 10px; }
.bulk { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 25%, transparent); }
.bulk > .ico { width: 16px; height: 16px; color: var(--muted-foreground); }
.bulk .txt { min-width: 0; flex: 1; font-size: 14px; }
.bulk .txt .sub { display: block; font-size: 12px; line-height: 16px; color: var(--muted-foreground); }

/* ---------- Buttons (components/ui/button.tsx) ---------- */
/* inline-flex items-center justify-center rounded-2xl border border-transparent text-sm font-medium whitespace-nowrap; [&_svg]:size-4 */
.btn { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid transparent; background: transparent; color: var(--foreground); font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.btn svg { width: 16px; height: 16px; }
/* size sm: h-7 gap-1 px-3 */
.btn.sm { height: 28px; gap: 4px; padding: 0 12px; }
/* size icon: size-8 */
.btn.icon { width: 32px; padding: 0; }
.btn.default { background: var(--primary); color: var(--primary-foreground); }
/* outline: border-border bg-background dark:bg-transparent dark:hover:bg-input/30 */
.btn.outline { border-color: var(--border); background: transparent; }
.btn.outline:hover { background: color-mix(in oklab, var(--input) 30%, transparent); }
.btn.ghost { background: transparent; }
/* fimo wrapper default: disabled:bg-muted disabled:text-muted-foreground; base: disabled:opacity-50 */
.btn.disabled { background: var(--muted); color: var(--muted-foreground); opacity: 0.5; pointer-events: none; }

/* ---------- Question form (QuestionForm.tsx) ---------- */
/* FormShell: bg-popover overflow-hidden rounded-3xl border shadow-xs */
.form { background: var(--popover); overflow: hidden; border-radius: 24px; border: 1px solid var(--border); box-shadow: var(--shadow-xs); }
.form.ring { box-shadow: 0 0 0 2px var(--arrival-ring), var(--shadow-xs); }
/* step header: flex w-full items-center gap-3 px-4 py-3.5 */
.step-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.step-head .h { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
/* step body: border-t; flex flex-col gap-3 px-4 pt-3 pb-4 */
.step-body { border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; padding: 12px 16px 16px; }
.step-body .q { line-height: 1.375; }
/* ChoiceOptions: flex flex-col gap-1; option: flex items-start gap-3 rounded-lg px-3 py-2.5 */
.opts { display: flex; flex-direction: column; gap: 4px; }
.opt { display: flex; align-items: flex-start; gap: 12px; border-radius: 10px; padding: 10px 12px; }
.opt.on { background: color-mix(in oklab, var(--primary) 10%, transparent); }
.opt .lab { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.opt.on .lab > span:first-child { color: var(--primary); }
.opt .desc { font-size: 12px; line-height: 1.375; color: var(--muted-foreground); }
.opt .txt { display: flex; flex-direction: column; gap: 2px; }
/* SelectionMark: size-4 border rounded-full; unselected border-muted-foreground/40; mt-0.5 */
.mark { width: 16px; height: 16px; margin-top: 2px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--muted-foreground) 40%, transparent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mark.on { border-color: var(--primary); background: var(--primary); }
.mark.on::after { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--primary-foreground); }
/* RecommendedPill: text-primary/70 bg-primary/10 rounded-full px-1.5 py-0.5 text-xs font-medium */
.rec { color: color-mix(in oklab, var(--primary) 70%, transparent); background: color-mix(in oklab, var(--primary) 10%, transparent); border-radius: 999px; padding: 2px 6px; font-size: 12px; line-height: 16px; font-weight: 500; }
/* actions row: flex items-center justify-between gap-3 px-4 py-3, border-t when bounded */
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); }
.form-actions .left { display: flex; align-items: center; gap: 4px; min-width: 0; }

/* ---------- Composer (ChatInput.tsx + Input.tsx) ---------- */
/* Input.Content: text-card-foreground rounded-3xl border w-full */
.composer { border: 1px solid var(--border); border-radius: 24px; width: 100%; }
/* ContentEditable: min-h-11 p-4 pt-4 pb-0 text-base md:text-sm leading-relaxed */
.composer .ph { min-height: 44px; padding: 16px 16px 0; font-size: 14px; line-height: 1.625; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobile .composer .ph { font-size: 16px; }
/* Input.Actions: justify-between gap-1 p-1 @xs:gap-1.5 @xs:p-2 @sm:gap-2 */
.composer .actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; }
.composer .actions > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mobile .composer .actions, .mobile .composer .actions > div { gap: 6px; }
/* credits: px-1 text-xs @xs:px-2 @sm:px-2.5 @sm:text-sm */
.credits { padding: 0 10px; }
.mobile .credits { padding: 0 8px; font-size: 12px; }
.credits span { font-variant-numeric: tabular-nums; }
/* send: size-8, mobile w-auto px-3 with "Submit" label (sm:hidden) */
.mobile .send { width: auto; padding: 0 12px; }
.send .lbl { display: none; }
.mobile .send .lbl { display: inline; }


/* ---- turn pieces from develop ---- */
/* TurnCommentary: text-muted-foreground text-sm, clock + "Worked for 9s" + chevron */
.turn { display: flex; flex-direction: column; gap: 12px; }
.worked { display: flex; align-items: center; gap: 8px; color: var(--muted-foreground); font-size: 14px; line-height: 20px; }
/* ChatFormReceipt OpenQuestion: bg-popover rounded-3xl border px-4 py-3 shadow-xs gap-3; badge bg-primary size-5 rounded-full text-xs font-bold; title text-sm font-semibold truncate */
.qfold { display: flex; width: 100%; min-width: 0; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 24px; background: var(--popover); padding: 12px 16px; box-shadow: var(--shadow-xs); text-align: left; color: var(--foreground); font: inherit; }
.qfold .q { display: flex; width: 20px; height: 20px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); font-size: 12px; font-weight: 700; }
.qfold .t { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
/* AnsweredQuestion: muted check badge bg-muted-foreground/20, muted title */
.qfold.done .q { background: color-mix(in oklab, var(--muted-foreground) 20%, transparent); color: var(--muted-foreground); }
.qfold.done .t { color: var(--muted-foreground); }
/* RoutineQuietFold: text-muted-foreground text-xs gap-1.5, Repeat size-3.5 */
.quiet { display: flex; align-items: center; gap: 6px; color: var(--muted-foreground); font-size: 12px; line-height: 16px; }
/* annotation for the team page, not Studio UI: when the routine ran */
.when { margin-left: auto; border: 1px dashed var(--border); border-radius: 6px; padding: 0 8px; font-size: 12px; line-height: 18px; white-space: nowrap; }
.thread > .turn + .turn, .thread > .turn + .quiet { margin-top: 20px; }