/* NellyChat v2: chat that is a spreadsheet.
   Layout only in private --nc-* vars (same pattern as the design system
   --ds-* layout vars). Every color, radius, space, font and motion value
   resolves to a --29d-* token. No color literals in this file. */

:root {
  --nc-sidebar-w: 264px;
  --nc-touch: 44px;
  --nc-gutter-w: 52px;
  --nc-col-a-w: 76px;
  --nc-col-b-w: 128px;
  --nc-col-c-w: 320px;
  --nc-col-s-w: 132px;
  --nc-chat-w: 760px;
  --nc-standings-max: 320px;
  --nc-seg-h: 36px;
  /* Live visual-viewport size, kept current by app.js (fitViewport).
     Falls back to 100dvh before JS runs and where visualViewport is absent.
     This is what lets the composer ride above the phone keyboard. */
  --nc-vh: 100dvh;
  --nc-vt: 0px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body.ds-root {
  margin: 0;
  background: var(--29d-bg);
  color: var(--29d-text-1);
  overflow: hidden;
}

.nc-banner {
  padding: var(--29d-s-2) var(--29d-s-4);
  background: var(--29d-amber-100);
  color: var(--29d-amber-700);
  border-bottom: 1px solid var(--29d-border);
  font-size: var(--29d-text-sm);
  line-height: var(--29d-lh-sm);
  font-weight: var(--29d-weight-medium);
}
.nc-banner[hidden] { display: none; }

/* ---------- App frame ---------- */
.nc-app {
  display: grid;
  grid-template-columns: var(--nc-sidebar-w) minmax(0, 1fr);
  height: var(--nc-vh);
  transform: translateY(var(--nc-vt));
}
body:has(.nc-banner:not([hidden])) .nc-app { height: calc(var(--nc-vh) - var(--29d-s-8)); }

/* ---------- Sidebar ---------- */
.nc-sidebar {
  background: var(--29d-surface);
  border-right: 1px solid var(--29d-border);
  padding: var(--29d-s-4);
  display: flex;
  flex-direction: column;
  gap: var(--29d-s-4);
  overflow-y: auto;
  min-height: 0;
}
.nc-brand-row { display: flex; align-items: center; gap: var(--29d-s-3); }
.nc-logo { border-radius: var(--29d-r-2); flex: 0 0 auto; }
.nc-brand-text { flex: 1 1 auto; min-width: 0; }
.nc-brand-name {
  font-family: var(--29d-font-display);
  font-size: var(--29d-text-lg);
  line-height: var(--29d-lh-lg);
  font-weight: var(--29d-weight-xbold);
}
.nc-brand-tag { font-size: var(--29d-text-sm); line-height: var(--29d-lh-sm); color: var(--29d-text-3); }
.nc-theme-btn { flex: 0 0 auto; }

.nc-conn {
  display: flex; align-items: center; gap: var(--29d-s-2);
  font-size: var(--29d-text-sm); line-height: var(--29d-lh-sm); color: var(--29d-text-2);
}
.nc-dot {
  width: var(--29d-s-2); height: var(--29d-s-2); border-radius: var(--29d-pill);
  background: var(--29d-amber-600); flex: 0 0 auto;
}
.nc-conn.is-live .nc-dot { background: var(--29d-green-600); }
.nc-conn.is-down .nc-dot { background: var(--29d-red-600); }
.nc-conn-room { margin-left: auto; color: var(--29d-text-3); }

.nc-side-cards { display: flex; flex-direction: column; gap: var(--29d-s-4); }
.nc-side-card { display: flex; flex-direction: column; gap: var(--29d-s-3); }
.nc-side-card .ds-overline { margin: 0; }
.nc-name-field { margin: 0; }
.nc-block-btn { align-self: flex-start; }
.nc-inline { display: flex; gap: var(--29d-s-2); }
.nc-inline .ds-input { flex: 1 1 auto; min-width: 0; }
.nc-big-input { font-size: var(--29d-text-lg); }

.nc-presence-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--29d-s-1);
  font-size: var(--29d-text-sm); line-height: var(--29d-lh-sm);
}
.nc-presence-list li { display: flex; align-items: center; gap: var(--29d-s-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-presence-list .nc-dot { background: var(--29d-green-600); }
.nc-muted { margin: 0; color: var(--29d-text-3); font-size: var(--29d-text-sm); line-height: var(--29d-lh-sm); }
.nc-room-now { margin: 0; font-size: var(--29d-text-sm); line-height: var(--29d-lh-sm); color: var(--29d-text-2); }
#sb-link { margin-top: var(--29d-s-2); text-decoration: none; }
.nc-sb-note { margin: var(--29d-s-3) 0 0; font-size: var(--29d-text-sm); line-height: var(--29d-lh-sm); color: var(--29d-text-2); }

.nc-fineprint {
  margin-top: auto;
  font-size: var(--29d-text-xs); line-height: var(--29d-lh-xs); color: var(--29d-text-3);
  display: flex; flex-direction: column; gap: var(--29d-s-2);
}
.nc-fineprint p { margin: 0; }
.nc-link { color: var(--29d-blue-600); }
.nc-link:hover { color: var(--29d-blue-700); }

.nc-mobile-name { display: none; }
.nc-mobile-sb { display: none; }

/* ---------- Main column ---------- */
.nc-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--29d-bg); }

/* ---------- View bar: live stats + Chat/Sheet toggle (all sizes) ---------- */
.nc-viewbar {
  display: flex; align-items: center; gap: var(--29d-s-4);
  padding: var(--29d-s-2) var(--29d-s-3);
  background: var(--29d-surface);
  border-bottom: 1px solid var(--29d-border);
}
.nc-stat-strip { display: flex; align-items: baseline; gap: var(--29d-s-4); min-width: 0; }
.nc-stat { display: flex; align-items: baseline; gap: var(--29d-s-2); min-width: 0; }
.nc-stat-label {
  font-size: var(--29d-text-2xs); line-height: var(--29d-lh-2xs);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--29d-text-3); font-weight: var(--29d-weight-bold);
  white-space: nowrap;
}
.nc-stat-value { font-size: var(--29d-text-lg); line-height: var(--29d-lh-lg); font-weight: var(--29d-weight-bold); }

.nc-seg {
  display: flex; gap: var(--29d-s-1); margin-left: auto; flex: 0 0 auto;
  background: var(--29d-sunken); border: 1px solid var(--29d-border);
  border-radius: var(--29d-pill); padding: var(--29d-s-1);
}
.nc-seg-btn {
  min-height: var(--nc-seg-h); padding: 0 var(--29d-s-4);
  border: none; background: transparent; cursor: pointer;
  border-radius: var(--29d-pill);
  font: inherit; font-size: var(--29d-text-sm); font-weight: var(--29d-weight-semibold);
  color: var(--29d-text-2);
  transition: background var(--29d-t-fast) var(--29d-ease), transform var(--29d-t-instant) var(--29d-ease);
}
.nc-seg-btn:active { transform: scale(0.98); }
.nc-seg-btn:focus-visible { outline: none; box-shadow: var(--29d-focus-halo), var(--29d-focus-ring); }
.nc-seg-btn.is-active { background: var(--29d-surface); color: var(--29d-text-1); }

.nc-formula-bar {
  display: flex; align-items: center; gap: var(--29d-s-2);
  padding: var(--29d-s-2) var(--29d-s-3);
  background: var(--29d-surface);
  border-bottom: 1px solid var(--29d-border);
}
.nc-fx-sign { font-family: var(--29d-font-mono); color: var(--29d-text-3); font-size: var(--29d-text-sm); }
.nc-fx-input { flex: 1 1 auto; min-width: 0; font-family: var(--29d-font-mono); }
#fx-addr { min-width: var(--29d-s-12); justify-content: center; }
/* The formula bar is sheet tooling; in Chat view it is pure noise. */
html[data-view="chat"] .nc-formula-bar { display: none; }

/* ---------- Stage: grid pane and chat pane share one slot ---------- */
.nc-stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* ---------- Grid ---------- */
.nc-grid-pane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.nc-grid-pane[hidden], .nc-chat-pane[hidden] { display: none; }
.nc-grid-scroll {
  flex: 1 1 auto; min-height: 0;
  overflow: auto;
  background: var(--29d-surface);
  -webkit-overflow-scrolling: touch;
}
.nc-table {
  border-collapse: separate; border-spacing: 0;
  width: max-content; min-width: 100%;
  font-size: var(--29d-body-size); line-height: var(--29d-body-lh);
}
.nc-col-gutter { width: var(--nc-gutter-w); }
.nc-col-a { width: var(--nc-col-a-w); }
.nc-col-b { width: var(--nc-col-b-w); }
.nc-col-c { width: var(--nc-col-c-w); }
.nc-col-s { width: var(--nc-col-s-w); }

.nc-table thead th {
  position: sticky; top: 0; z-index: 4;
  text-align: left;
  font-size: var(--29d-text-2xs); line-height: var(--29d-lh-2xs);
  font-weight: var(--29d-weight-bold); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--29d-text-3);
  background: var(--29d-sunken);
  padding: var(--29d-s-2) var(--29d-s-3);
  height: var(--29d-row-h);
  border-bottom: 1px solid var(--29d-border);
  border-right: 1px solid var(--29d-border);
  white-space: nowrap;
}
.nc-table thead th:last-child { border-right: none; }
.nc-th-title { text-transform: none; letter-spacing: 0; font-weight: var(--29d-weight-medium); color: var(--29d-text-2); }

.nc-table td {
  padding: var(--29d-s-1) var(--29d-s-3);
  height: var(--29d-row-h);
  border-bottom: 1px solid var(--29d-border);
  border-right: 1px solid var(--29d-border);
  color: var(--29d-text-1);
  vertical-align: middle;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: var(--nc-col-c-w);
  cursor: cell;
}
.nc-table td:last-child { border-right: none; }
.nc-table tbody tr:hover td { background: var(--29d-wash); }

td.nc-gutter, th.nc-gutter {
  padding-left: var(--29d-s-1); padding-right: var(--29d-s-1);
  position: sticky; left: 0; z-index: 3;
  background: var(--29d-sunken);
  color: var(--29d-text-3);
  text-align: center;
  font-size: var(--29d-text-xs); line-height: var(--29d-lh-xs);
  font-variant-numeric: tabular-nums;
}
.nc-table thead th.nc-gutter { z-index: 5; }
.nc-pinned-tag {
  display: block;
  font-size: var(--29d-text-2xs); line-height: var(--29d-lh-2xs);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--29d-coral-700); font-weight: var(--29d-weight-bold);
}

/* Pinned stats row */
tr.nc-row-pinned td {
  position: sticky; top: var(--29d-row-h); z-index: 2;
  background: var(--29d-sunken);
  font-weight: var(--29d-weight-semibold);
}
tr.nc-row-pinned td.nc-gutter { z-index: 3; }
tr.nc-row-pinned:hover td { background: var(--29d-sunken); }

/* Column titles row */
tr.nc-row-titles td {
  color: var(--29d-text-3);
  font-size: var(--29d-text-xs); line-height: var(--29d-lh-xs);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--29d-weight-semibold);
  background: var(--29d-surface);
  cursor: default;
}

/* Own messages tint */
tr.nc-row-own td { background: var(--29d-wash); }
tr.nc-row-own td.nc-gutter { background: var(--29d-sunken); }

td.nc-cell-num { text-align: right; font-variant-numeric: tabular-nums; }
td.nc-cell-bool { font-variant-numeric: tabular-nums; }
td.nc-cell-err { color: var(--29d-coral-700); font-weight: var(--29d-weight-semibold); font-family: var(--29d-font-mono); }
td.nc-cell-time { font-variant-numeric: tabular-nums; color: var(--29d-text-2); white-space: nowrap; }
td.nc-cell-name { font-weight: var(--29d-weight-semibold); }
td.nc-is-selected { box-shadow: var(--29d-focus-ring); background: var(--29d-coral-50); }
tr.nc-row-pinned td.nc-is-selected, tr.nc-row-titles td.nc-is-selected { background: var(--29d-coral-50); }

.nc-empty { padding: var(--29d-s-12) var(--29d-s-6); }
.nc-empty[hidden] { display: none; }

.nc-latest {
  position: absolute; right: var(--29d-s-4); bottom: var(--29d-s-4); z-index: 6;
  box-shadow: var(--29d-shadow-pop);
  background: var(--29d-surface);
}
.nc-latest[hidden] { display: none; }

/* ---------- Chat stream (same rows, conversation-shaped) ---------- */
.nc-chat-pane {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--29d-bg);
}
.nc-chat-scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.nc-chat-list {
  max-width: var(--nc-chat-w); margin: 0 auto;
  padding: var(--29d-s-4) var(--29d-s-3);
  display: flex; flex-direction: column; gap: var(--29d-s-2);
}
.nc-msg {
  display: flex; flex-direction: column; gap: var(--29d-s-0);
  padding: var(--29d-s-2) var(--29d-s-3);
  border-radius: var(--29d-r-3);
}
.nc-msg-own { background: var(--29d-wash); }
.nc-msg-head { display: flex; align-items: baseline; gap: var(--29d-s-2); min-width: 0; }
.nc-msg-name {
  font-weight: var(--29d-weight-semibold);
  font-size: var(--29d-text-sm); line-height: var(--29d-lh-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nc-msg-time {
  color: var(--29d-text-3);
  font-size: var(--29d-text-xs); line-height: var(--29d-lh-xs);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.nc-msg-text {
  font-size: var(--29d-text-md); line-height: var(--29d-lh-md);
  overflow-wrap: anywhere; white-space: pre-wrap;
}
.nc-chat-empty { padding: var(--29d-s-12) var(--29d-s-6); }
.nc-chat-empty[hidden] { display: none; }

/* ---------- Scoreboard standings list (scoreboard room, chat view) ---------- */
.nc-standings {
  border-bottom: 1px solid var(--29d-border);
  background: var(--29d-surface);
  padding: var(--29d-s-3);
  display: flex; flex-direction: column; gap: var(--29d-s-2);
}
.nc-standings[hidden] { display: none; }
.nc-standings-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--29d-s-2); }
.nc-standings-head .ds-overline { margin: 0; }
.nc-standings-list {
  list-style: none; margin: 0; padding: 0;
  max-height: var(--nc-standings-max); overflow-y: auto;
  display: flex; flex-direction: column;
}
.nc-standing {
  display: flex; align-items: center; gap: var(--29d-s-3);
  padding: var(--29d-s-2) 0;
  border-bottom: 1px solid var(--29d-border);
}
.nc-standing:last-child { border-bottom: none; }
.nc-standing-rank {
  font-weight: var(--29d-weight-bold); color: var(--29d-text-3);
  min-width: var(--29d-s-6); text-align: right;
  font-variant-numeric: tabular-nums;
}
.nc-standing-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--29d-s-0); }
.nc-standing-name {
  font-weight: var(--29d-weight-semibold);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nc-standing-rounds {
  color: var(--29d-text-3);
  font-size: var(--29d-text-xs); line-height: var(--29d-lh-xs);
  font-variant-numeric: tabular-nums;
}
.nc-standing-total { font-size: var(--29d-text-xl); line-height: var(--29d-lh-xl); font-weight: var(--29d-weight-xbold); font-variant-numeric: tabular-nums; }
.nc-standings-note { margin: 0; font-size: var(--29d-text-xs); line-height: var(--29d-lh-xs); color: var(--29d-text-3); }

/* ---------- Composer ---------- */
.nc-composer {
  display: flex; align-items: center; gap: var(--29d-s-2);
  padding: var(--29d-s-2) var(--29d-s-3) calc(var(--29d-s-2) + env(safe-area-inset-bottom));
  background: var(--29d-surface);
  border-top: 1px solid var(--29d-border);
}
.nc-composer-name {
  font-weight: var(--29d-weight-semibold);
  font-size: var(--29d-text-sm); line-height: var(--29d-lh-sm);
  color: var(--29d-text-2);
  max-width: var(--nc-col-b-w); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nc-composer-input { flex: 1 1 auto; min-width: 0; }

/* ---------- Mobile (under 900px) ---------- */
@media (max-width: 899px) {
  .nc-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .nc-sidebar {
    border-right: none; border-bottom: 1px solid var(--29d-border);
    padding: var(--29d-s-3);
    gap: var(--29d-s-2);
    overflow: visible;
  }
  .nc-side-cards, .nc-fineprint { display: none; }
  .nc-mobile-name { display: flex; flex-direction: column; gap: var(--29d-s-1); }
  .nc-mobile-name .ds-label { display: none; }
  .nc-mobile-sb { display: flex; align-items: center; justify-content: center; min-height: var(--nc-touch); text-decoration: none; }
  .nc-mobile-name.is-attention {
    border: 1px solid var(--29d-coral-500);
    border-radius: var(--29d-r-3);
    padding: var(--29d-s-3);
    background: var(--29d-coral-50);
  }
  .nc-presence-line {
    margin: 0; font-size: var(--29d-text-sm); line-height: var(--29d-lh-sm);
    color: var(--29d-text-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .nc-conn-room { display: none; }

  /* View bar stacks on phones: stat cards, then a full-width toggle. */
  .nc-viewbar { flex-direction: column; align-items: stretch; gap: var(--29d-s-2); }
  .nc-stat-strip { gap: var(--29d-s-2); }
  .nc-stat {
    flex: 1 1 0;
    border: 1px solid var(--29d-border); border-radius: var(--29d-r-3);
    padding: var(--29d-s-2) var(--29d-s-3);
    background: var(--29d-bg);
    flex-direction: column; align-items: stretch; gap: var(--29d-s-0);
  }
  .nc-stat-label { overflow: hidden; text-overflow: ellipsis; }
  .nc-seg { margin-left: 0; }
  .nc-seg-btn { flex: 1 1 0; min-height: var(--nc-touch); padding: 0 var(--29d-s-2); }

  /* Touch targets and no iOS zoom on focus */
  .nc-sidebar .ds-btn, .nc-main .ds-btn { min-height: var(--nc-touch); }
  .nc-sidebar .ds-input, .nc-main .ds-input { min-height: var(--nc-touch); font-size: var(--29d-text-lg); }
  .nc-composer-name { display: none; }

  /* Keyboard open (data-kb set by fitViewport): chrome gets out of the
     way. Brand row + view toggle + composer stay; the rest returns when
     the keyboard closes. */
  html[data-kb="open"] .nc-conn,
  html[data-kb="open"] .nc-mobile-name,
  html[data-kb="open"] .nc-mobile-sb,
  html[data-kb="open"] .nc-stat-strip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nc-seg-btn, .nc-latest { transition-duration: var(--29d-t-instant); }
}