/* ============================================================
   family-chat — "The Round Table"
   A calm WorshipTeam sibling. Two type layers carry the concept:
     · Poppins  — the human-readable identity (names, body, UI)
     · JetBrains Mono — the machine/repo layer (affiliations, seq, fuses, ids)
   Brand red is reserved for the primary action and the "over the bar" moment.
   Per-speaker accents are oklch hues at a single lightness/chroma so 8 voices
   stay distinct yet harmonious — and re-tune per theme.
   ============================================================ */

/* Self-hosted fonts (no third-party CDN). Poppins = OFL, JetBrains Mono = OFL. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/poppins/Poppins-Regular.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/poppins/Poppins-Medium.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins/Poppins-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/poppins/Poppins-Bold.ttf") format("truetype"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/jetbrains-mono/JetBrainsMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/jetbrains-mono/JetBrainsMono-Medium.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/jetbrains-mono/JetBrainsMono-SemiBold.woff2") format("woff2"); }

:root {
  --sans: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; /* @kind font */
  --mono: "JetBrains Mono", "Droid Sans Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* @kind font */

  /* WorshipTeam brand red — the one warm signal */
  --red:        #ce171f;
  --red-deep:   #ad0009;
  --red-grad:   linear-gradient(180deg, #ce171f 38%, #ad0009 100%); /* @kind color */

  /* radii / elevation echo the WT system */
  --r-sm: 5px;
  --r:    8px;
  --r-lg: 14px;
  --r-pill: 999px;
}

/* ---------------- LIGHT (warm grey workspace) ---------------- */
[data-theme="light"] {
  color-scheme: light;
  --canvas:    oklch(0.967 0.004 70);
  --surface:   oklch(0.995 0.002 80);
  --surface-2: oklch(0.978 0.004 75);
  --inset:     oklch(0.945 0.005 70);
  --line:      oklch(0.90 0.006 70);
  --line-soft: oklch(0.93 0.005 70);

  --ink:       oklch(0.27 0.012 65);
  --ink-2:     oklch(0.44 0.012 65);
  --muted:     oklch(0.56 0.010 65);
  --faint:     oklch(0.68 0.008 65);

  --cream:        #fdefcc;       /* the WT butter wash */
  --cream-border: #e6d6a8;
  --cream-ink:    oklch(0.42 0.06 75);

  --accent-l: 0.55; /* @kind other */
  --accent-c: 0.135; /* @kind other */
  --accent-wash: 0.10; /* @kind other */
  --accent-edge: 0.30; /* @kind other */

  --shadow-panel: 0 1px 2px rgba(40,30,15,.04), 0 8px 24px rgba(40,30,15,.05);
  --shadow-pop:   0 8px 30px rgba(40,30,15,.14);
  --scrim: rgba(40,32,20,.34);
}

/* ---------------- DARK (warm charcoal, not terminal-cold) ---------------- */
[data-theme="dark"] {
  color-scheme: dark;
  --canvas:    oklch(0.205 0.012 65);
  --surface:   oklch(0.245 0.013 64);
  --surface-2: oklch(0.275 0.014 64);
  --inset:     oklch(0.185 0.011 65);
  --line:      oklch(0.33 0.013 64);
  --line-soft: oklch(0.30 0.012 64);

  --ink:       oklch(0.93 0.006 75);
  --ink-2:     oklch(0.80 0.008 70);
  --muted:     oklch(0.66 0.010 68);
  --faint:     oklch(0.52 0.010 66);

  --cream:        oklch(0.40 0.045 80);
  --cream-border: oklch(0.50 0.055 80);
  --cream-ink:    oklch(0.90 0.05 85);

  --accent-l: 0.78; /* @kind other */
  --accent-c: 0.125; /* @kind other */
  --accent-wash: 0.16; /* @kind other */
  --accent-edge: 0.42; /* @kind other */

  --shadow-panel: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.36);
  --shadow-pop:   0 12px 40px rgba(0,0,0,.55);
  --scrim: rgba(8,6,4,.6);
}

/* per-element accent resolution: set --hue inline */
.acc { --accent: oklch(var(--accent-l) var(--accent-c) var(--hue, 250)); }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#root { height: 100%; }
button { font-family: inherit; cursor: pointer; }
::selection { background: color-mix(in oklab, var(--red) 22%, transparent); }

/* scrollbars */
.scroll { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
.scroll::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }

/* ============================================================
   APP SHELL
   ============================================================ */
.fc-app { height: 100%; display: grid; grid-template-rows: auto 1fr; background: var(--canvas); }

/* ---- top bar ---- */
.fc-top {
  display: flex; align-items: center; gap: 16px;
  padding: 0 16px; height: 54px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.fc-brand { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.fc-brand .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--red-grad);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--red) 18%, transparent);
  align-self: center; flex: none;
}
.fc-brand .title { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; white-space: nowrap; }
.fc-brand .cid { font-family: var(--mono); font-size: 11px; color: var(--faint); }

.fc-top .spacer { flex: 1; }

/* room-health fuses, inline in the top bar */
.fc-fuses { display: flex; align-items: center; gap: 14px; padding: 0 4px; }
.fc-fuse { display: flex; align-items: center; gap: 7px; }
.fc-fuse .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .02em; color: var(--faint); text-transform: lowercase; }
.fc-fuse .gauge { width: 46px; height: 5px; border-radius: 99px; background: var(--inset); overflow: hidden; }
.fc-fuse .gauge i { display: block; height: 100%; border-radius: 99px; background: oklch(0.62 0.13 150); transition: width .5s ease, background .4s ease; }
.fc-fuse.warn .gauge i { background: oklch(0.70 0.15 75); }
.fc-fuse.hot  .gauge i { background: var(--red); }
.fc-fuse .num { font-family: var(--mono); font-size: 10px; color: var(--muted); min-width: 34px; }

.fc-tools { display: flex; align-items: center; gap: 6px; }
.fc-icbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; min-width: 32px; padding: 0 9px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-2);
  font-size: 12px; font-weight: 500;
}
.fc-icbtn:hover { border-color: var(--muted); color: var(--ink); background: var(--surface-2); }
.fc-icbtn.on { color: var(--red-deep); border-color: color-mix(in oklab, var(--red) 45%, var(--line)); }
.fc-seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.fc-seg button { height: 32px; padding: 0 10px; border: 0; background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 600; font-family: var(--mono); }
.fc-seg button + button { border-left: 1px solid var(--line); }
.fc-seg button.on { background: var(--inset); color: var(--ink); }

/* ---- body grid ---- */
.fc-body { display: grid; grid-template-columns: 296px 1fr; min-height: 0; }
.fc-body.solo { grid-template-columns: 0 1fr; }

/* ============================================================
   ROSTER (left)
   ============================================================ */
.fc-roster {
  border-right: 1px solid var(--line);
  background: var(--surface);
  display: flex; flex-direction: column; min-height: 0;
  overflow: hidden;
  transition: width .2s ease;
}
.fc-roster-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px 9px;
}
.fc-roster-head h2 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.fc-roster-head .count { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 11px; color: var(--faint); white-space: nowrap; }

.fc-room-claim {
  margin: 0 14px 8px; padding: 9px 11px;
  background: var(--inset); border: 1px solid var(--line-soft); border-radius: var(--r);
  font-size: 11px; line-height: 1.45; color: var(--muted);
}
.fc-room-claim b { color: var(--ink-2); font-weight: 600; }

.fc-people { flex: 1; overflow-y: auto; padding: 4px 8px 10px; }

.fc-person { padding: 9px 8px; border-radius: var(--r); position: relative; }
.fc-person + .fc-person { margin-top: 1px; }
.fc-person:hover { background: var(--surface-2); }
.fc-person.is-speaking { background: color-mix(in oklab, var(--accent) calc(var(--accent-wash) * 100%), transparent); }
.fc-person-top { display: flex; align-items: center; gap: 9px; }
.fc-node {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}
.fc-person.you .fc-node { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent), 0 0 0 5px color-mix(in oklab, var(--accent) 30%, transparent); }
.fc-person .nm { font-weight: 600; font-size: 13px; color: var(--accent); letter-spacing: -0.01em; }
.fc-person .youtag { font-family: var(--mono); font-size: 9px; color: var(--faint); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; margin-left: 2px; }
.fc-person .aff {
  font-family: var(--mono); font-size: 10.5px; line-height: 1.4; color: var(--muted);
  margin: 4px 0 0 20px; display: flex; align-items: flex-start; gap: 6px;
}
.fc-scope-glyphs { display: inline-flex; align-items: center; gap: 3px; flex: none; margin-top: 1px; }
.fc-scope-glyphs svg { color: var(--faint); }

/* interest meter */
.fc-pull { margin: 7px 0 0 20px; display: flex; align-items: center; gap: 8px; }
.fc-pull .track {
  position: relative; flex: 1; height: 5px; border-radius: 99px;
  background: var(--inset); overflow: visible;
}
.fc-pull .fill {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px;
  background: var(--accent);
  transition: width .6s cubic-bezier(.4,0,.2,1), background .4s ease;
}
.fc-pull .bar { /* the speak threshold */
  position: absolute; top: -2px; bottom: -2px; width: 2px; border-radius: 2px;
  background: var(--faint); opacity: .8;
}
.fc-person.over .fill { background: var(--red); }
.fc-pull .state {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .01em; color: var(--faint);
  white-space: nowrap; min-width: 60px; text-align: right;
}
.fc-person.over .state { color: var(--red-deep); }
[data-theme="dark"] .fc-person.over .state { color: oklch(0.78 0.16 28); }
.fc-person.is-speaking .state { color: var(--accent); }

/* considering shimmer */
@keyframes fc-think { 0%,100% { opacity: .35 } 50% { opacity: 1 } }
.fc-person.is-speaking .fill { animation: fc-think 1.1s ease-in-out infinite; }

.fc-roster-foot {
  border-top: 1px solid var(--line); padding: 11px 16px 13px;
}
.fc-roster-foot h3 { margin: 0 0 9px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fc-scopes { margin-bottom: 13px; }
.fc-scope-keys { display: flex; flex-wrap: wrap; gap: 5px 10px; }
.fc-scope-key { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--muted); }
.fc-scope-key svg { color: var(--faint); flex: none; }
.fc-legend { display: flex; flex-direction: column; gap: 6px; }
.fc-legend .row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.fc-legend .row .k { font-family: var(--mono); font-size: 10px; color: var(--faint); margin-left: auto; }

/* ============================================================
   TRANSCRIPT (right)
   ============================================================ */
.fc-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; position: relative; }
.fc-stream { flex: 1; overflow-y: auto; padding: 18px 0 8px; }
.fc-stream-inner { max-width: 860px; margin: 0 auto; padding: 0 26px; }

.fc-daymark { display: flex; align-items: center; gap: 12px; margin: 6px 0 16px; color: var(--faint); }
.fc-daymark::before, .fc-daymark::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.fc-daymark span { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }

/* one message (grouped) */
.fc-msg { display: grid; grid-template-columns: 26px 1fr; gap: 11px; padding: 7px 10px; border-radius: var(--r); position: relative; }
.fc-msg.cont { padding-top: 1px; padding-bottom: 1px; }
.fc-msg:hover { background: var(--surface-2); }
.fc-msg.mine { background: color-mix(in oklab, var(--cream) 55%, transparent); }
[data-theme="dark"] .fc-msg.mine { background: color-mix(in oklab, var(--cream) 26%, transparent); }
.fc-msg.mine:hover { background: color-mix(in oklab, var(--cream) 70%, transparent); }
[data-theme="dark"] .fc-msg.mine:hover { background: color-mix(in oklab, var(--cream) 34%, transparent); }
.fc-msg.flash { animation: fc-flash 1.4s ease; }
@keyframes fc-flash { 0% { background: color-mix(in oklab, var(--accent) 16%, transparent); } 100% {} }

.fc-rail { display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.fc-rail .nub { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); flex: none; }
.fc-rail .line { width: 2px; flex: 1; background: color-mix(in oklab, var(--accent) calc(var(--accent-edge) * 100%), transparent); margin-top: 5px; border-radius: 2px; opacity: .5; }
.fc-msg.cont .fc-rail .nub { background: transparent; }

.fc-msg-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 1px; }
.fc-msg-head .nm { font-weight: 600; font-size: 13px; color: var(--accent); letter-spacing: -0.01em; }
.fc-aff { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10px; color: var(--muted); background: color-mix(in oklab, var(--accent) 9%, var(--inset)); border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--line-soft)); border-radius: var(--r-pill); padding: 1px 8px; }
.fc-aff svg { color: var(--faint); flex: none; }
.fc-seq { font-family: var(--mono); font-size: 10px; color: var(--faint); }
.fc-time { font-family: var(--mono); font-size: 10px; color: var(--faint); margin-left: auto; }
.fc-msg.cont .fc-time { opacity: 0; }
.fc-msg.cont:hover .fc-time { opacity: 1; }

.fc-body-txt { font-size: 13px; line-height: 1.62; color: var(--ink); white-space: pre-wrap; word-break: break-word; text-wrap: pretty; }
.fc-body-txt code { font-family: var(--mono); font-size: 11.5px; background: var(--inset); border: 1px solid var(--line-soft); border-radius: 4px; padding: 0.5px 5px; color: var(--ink-2); }
.fc-mention { font-weight: 600; color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); border-radius: 4px; padding: 0 4px; }

/* reply quote chip */
.fc-reply { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; padding: 3px 9px 3px 8px; border-left: 2px solid var(--accent); background: var(--inset); border-radius: 0 var(--r-sm) var(--r-sm) 0; max-width: 100%; }
.fc-reply .who { font-weight: 600; font-size: 11px; color: var(--accent); white-space: nowrap; }
.fc-reply .snip { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* attachments */
.fc-atts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 8px; }
.fc-att-img { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; max-width: 260px; background: var(--inset); }
.fc-att-img .ph { display: grid; place-items: center; height: 150px; width: 240px; position: relative; background:
  repeating-linear-gradient(135deg, var(--inset) 0 9px, var(--surface-2) 9px 18px); }
.fc-att-img .ph span { font-family: var(--mono); font-size: 10px; color: var(--muted); background: var(--surface); padding: 3px 8px; border-radius: 5px; border: 1px solid var(--line); }
.fc-att-img .cap { display: flex; gap: 6px; padding: 6px 9px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); border-top: 1px solid var(--line); }
.fc-att-file { display: inline-flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.fc-att-file:hover { border-color: var(--muted); }
.fc-att-file .ic { color: var(--accent); display: flex; }
.fc-att-file .meta { display: flex; flex-direction: column; }
.fc-att-file .fn { font-size: 12px; font-weight: 500; color: var(--ink); }
.fc-att-file .fz { font-family: var(--mono); font-size: 10px; color: var(--faint); }

/* a quiet "the room is settling" marker the engine drops in */
.fc-settle { max-width: 860px; margin: 14px auto 4px; padding: 0 26px; }
.fc-settle .inner { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border: 1px dashed var(--line); border-radius: var(--r); color: var(--muted); font-size: 11.5px; background: var(--surface); }
.fc-settle .inner .mono { font-family: var(--mono); font-size: 10px; color: var(--faint); }

/* considering / typing indicator in the stream */
.fc-considering { display: flex; align-items: center; gap: 9px; max-width: 860px; margin: 2px auto 0; padding: 7px 26px 10px 47px; }
.fc-considering .nub { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent); }
.fc-considering .nm { font-weight: 600; font-size: 12.5px; color: var(--accent); }
.fc-considering .lbl { font-size: 11.5px; color: var(--muted); }
.fc-considering .dots { display: inline-flex; gap: 3px; margin-left: 1px; }
.fc-considering .dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); animation: fc-bounce 1.2s ease-in-out infinite; }
.fc-considering .dots i:nth-child(2) { animation-delay: .18s; }
.fc-considering .dots i:nth-child(3) { animation-delay: .36s; }
@keyframes fc-bounce { 0%,60%,100% { transform: translateY(0); opacity: .4 } 30% { transform: translateY(-3px); opacity: 1 } }

/* ---- composer ---- */
.fc-composer { padding: 12px 18px 16px; border-top: 1px solid var(--line); background: var(--surface); }
.fc-composer-inner { max-width: 860px; margin: 0 auto; }
.fc-tray { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 9px; }
.fc-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 7px 5px 9px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--inset); font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
.fc-chip button { border: 0; background: transparent; color: var(--faint); display: flex; padding: 0; }
.fc-chip button:hover { color: var(--red); }
.fc-input-row { display: flex; align-items: flex-end; gap: 9px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 6px 6px 6px 8px; transition: border-color .15s ease, box-shadow .15s ease; }
.fc-input-row:focus-within { border-color: color-mix(in oklab, var(--red) 40%, var(--line)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--red) 12%, transparent); }
.fc-attach { width: 38px; height: 38px; flex: none; border: 0; border-radius: var(--r); background: transparent; color: var(--muted); display: grid; place-items: center; }
.fc-attach:hover { background: var(--inset); color: var(--ink); }
.fc-ta { flex: 1; border: 0; background: transparent; resize: none; color: var(--ink); font-family: var(--sans); font-size: 13.5px; line-height: 1.5; padding: 9px 2px; max-height: 38vh; outline: none; }
.fc-ta::placeholder { color: var(--faint); }
.fc-send { flex: none; height: 38px; padding: 0 18px; border: 0; border-radius: var(--r); background: var(--red-grad); color: #fff; font-weight: 600; font-size: 13px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); display: inline-flex; align-items: center; gap: 7px; }
.fc-send:hover { filter: brightness(1.06); }
.fc-send:disabled { opacity: .42; cursor: default; filter: none; }
.fc-hint { display: flex; gap: 14px; margin-top: 8px; font-family: var(--mono); font-size: 10px; color: var(--faint); }
.fc-hint kbd { font-family: var(--mono); background: var(--inset); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; color: var(--muted); }

/* ============================================================
   JOIN / EMPTY OVERLAY
   ============================================================ */
.fc-scrim { position: absolute; inset: 0; background: var(--scrim); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 30; padding: 24px; }
.fc-join { width: 460px; max-width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); overflow: hidden; }
.fc-join-hd { padding: 22px 26px 18px; border-bottom: 1px solid var(--line); }
.fc-join-hd .eyebrow { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; }
.fc-join-hd .eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red-grad); }
.fc-join-hd h1 { margin: 0 0 8px; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.fc-join-hd p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.fc-join-hd p b { color: var(--ink-2); font-weight: 600; }
.fc-join-bd { padding: 20px 26px 24px; }
.fc-field { margin-bottom: 14px; }
.fc-field label { display: block; font-size: 11px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.fc-field label .opt { font-weight: 400; color: var(--faint); }
.fc-field input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); color: var(--ink); font-family: var(--sans); font-size: 13.5px; }
.fc-field input.mono { font-family: var(--mono); font-size: 12px; }
.fc-field input:focus { outline: none; border-color: color-mix(in oklab, var(--red) 40%, var(--line)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--red) 12%, transparent); }
.fc-field input::placeholder { color: var(--faint); }
.fc-join-btn { width: 100%; height: 44px; border: 0; border-radius: var(--r); background: var(--red-grad); color: #fff; font-weight: 600; font-size: 14px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); margin-top: 4px; }
.fc-join-btn:hover { filter: brightness(1.06); }
.fc-join-note { margin-top: 14px; font-size: 11px; line-height: 1.55; color: var(--faint); text-align: center; }
.fc-join-note b { color: var(--muted); font-weight: 600; }

/* Join-screen room picker */
.fc-rooms { display: flex; flex-direction: column; gap: 6px; max-height: 192px; overflow-y: auto; }
.fc-rooms-msg { font-size: 12px; color: var(--faint); padding: 6px 2px; }
.fc-room { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); color: var(--ink); cursor: pointer; }
.fc-room:hover { border-color: color-mix(in oklab, var(--red) 32%, var(--line)); }
.fc-room.on { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in oklab, var(--red) 12%, transparent); }
.fc-room.new { border-style: dashed; color: var(--ink-2); }
.fc-room-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fc-room-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-room-id { font-size: 11px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-room-count { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 11px; color: var(--faint); }

/* Local slash-command output (only the current user sees these) */
.fc-sys { display: flex; gap: 8px; margin: 1px 0; padding: 3px 14px; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.fc-sys-tag { color: var(--faint); font-weight: 700; flex: none; }
.fc-sys-txt { white-space: pre-wrap; min-width: 0; }

/* responsive: collapse roster on narrow */
@media (max-width: 880px) {
  .fc-body { grid-template-columns: 1fr; }
  .fc-roster { position: absolute; z-index: 20; width: 296px; height: 100%; box-shadow: var(--shadow-pop); }
  .fc-body:not(.show-roster) .fc-roster { transform: translateX(-100%); }
}

/* ---- presence: connected (online) vs not (offline) ----
   Uniform for every participant — connection state is not a human/AI tell (DR-1). */
.fc-status { width: 7px; height: 7px; border-radius: 50%; flex: none; margin-left: auto; }
.fc-status.on  { background: oklch(0.68 0.15 150); box-shadow: 0 0 0 3px color-mix(in oklch, oklch(0.68 0.15 150) 22%, transparent); }
.fc-status.off { background: transparent; border: 1.5px solid var(--faint); }
.fc-person.offline { opacity: 0.5; }
.fc-person.offline .fc-pull .state { color: var(--faint); }