/**
 * File:          public/css/chat2_tokens.css
 * Version:       0.1.0
 * Last Modified: 2026-11-01 07:45 AM EST
 * Changes:       Reply <p>/<li> and full screen follow the reply size (Critic: the 14 px p/li rule won).
 * Changes:       0.1.0 — New. Chat 2.0 step 1 "look and type" (dark): --c2-* tokens, the app's old variables mapped
 *                onto them (no blue), Inter (InterVariable.woff2), reply text 17/16 px at 1.55, light composer,
 *                11 px uppercase section labels, theme scrollbars, avatar ring on member replies, and the status
 *                kit (.c2-dot, .c2-status-text, .c2-shimmer) for later steps. Linked LAST in index.html so it wins.
 *                Values from the CodePapi UI 2.0 redesign (tokens.css / chat.css). Plan: docs/chat2/plan.md L1 L3 L4 M1.
 */
:root, :root[data-theme] {
  --c2-bg: #0a0a0a; --c2-surface: #1b1b1b; --c2-surface-2: #232323; --c2-surface-3: #2c2c2c; --c2-sheet: #151515;
  --c2-line: #2a2a2a; --c2-line-2: #363636; --c2-text: #f2f1ec; --c2-text-2: #d9d8d2; --c2-muted: #9b9a94; --c2-dim: #6e6d68;
  --c2-accent: #F0B84B; --c2-accent-ink: #21180A; --c2-user: #222120;
  --c2-float: rgba(36,36,36,.92); --c2-float-line: #333; --c2-float-shadow: 0 6px 20px rgba(0,0,0,.55);
  --c2-working-1: #FDC403; --c2-working-2: #22C3E6; --c2-working-3: #A77BFF; --c2-waiting: #ff9500; --c2-failed: #ff6a5c;
  --c2-shimmer-light: 70%; --c2-shimmer-rest: 80%;
  --c2-font: "InterV", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* The app's old variables, mapped onto the tokens so every screen shifts together. */
  --bg-primary: var(--c2-bg); --bg-secondary: var(--c2-surface); --bg-surface: var(--c2-surface); --bg-tertiary: var(--c2-surface-2);
  --text-primary: var(--c2-text); --text-secondary: var(--c2-muted); --text-dim: var(--c2-dim);
  --border: var(--c2-line); --border-strong: var(--c2-line-2); --border-subtle: var(--c2-line); --border-active: rgba(240,184,75,.45);
  --accent: var(--c2-accent); --accent-ink: var(--c2-accent-ink); --font-ui: var(--c2-font);
}
@font-face { font-family: "InterV"; src: url("fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
html, body { font-family: var(--c2-font); }
body { background: var(--c2-bg); }

/* Reply text: 16 px on desktop, 17 px on phones, line height 1.55. */
#chat-area .msg-content, #chat-area .debate-card-content, #card-fullscreen-body { font-size: 16px !important; line-height: 1.55 !important; font-weight: 400; }
@media (max-width: 768px) {
  #chat-area .msg-content, #chat-area .debate-card-content, #card-fullscreen-body { font-size: 17px !important; }
}
/* Markdown paragraphs and list items had their own 14 px rule (style_v2.css); they follow the reply size. */
#chat-area .msg-content :is(p, li), #chat-area .debate-card-content :is(p, li), #card-fullscreen-body :is(p, li) { font-size: inherit !important; line-height: inherit !important; }
#promptInput { font-weight: 300; }

/* Section labels: rail sections, Filters group labels, sheet labels. */
.mw-section-title, .mw-member-group-title, .sheet-section-label, .popover-section-label, #discuss-target-wrap .mf-label {
  font-size: 11px !important; text-transform: uppercase; letter-spacing: .6px; color: var(--c2-muted) !important;
}

/* Scrollbars everywhere. */
* { scrollbar-width: thin; scrollbar-color: #3a3a3a transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* Member replies (M1): the avatar carries a 2 px ring in the reply's tint colour (--c2-tint, response_tint.css). */
#chat-area .msg-header-inline-logo, #chat-area .debate-card-avatar {
  box-sizing: border-box; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; object-fit: contain;
  box-shadow: 0 0 0 2px var(--c2-tint, var(--c2-line-2));
}
#chat-area span.msg-header-inline-logo { background: var(--c2-surface-3); color: var(--c2-text); display: inline-grid; place-items: center; overflow: hidden; font-size: 9px; font-weight: 650; margin-left: 2px; }
#chat-area span.msg-header-inline-logo img { width: 100%; height: 100%; object-fit: cover; }
#chat-area .msg-header .msg-model-id::before { content: "·"; margin-right: 6px; color: var(--c2-dim); }

/* Status kit (used from step 2 on). Working = gold -> teal -> violet every 9 s; Needs you = amber; Failed = red; idle = no dot. */
.c2-dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c2-dim); }
.c2-dot[data-tone="working"] { background: var(--c2-working-1); animation: c2-working-fill 9s ease-in-out infinite, c2-pulse 1.4s ease-in-out infinite; }
.c2-dot[data-tone="waiting"] { background: var(--c2-waiting); }
.c2-dot[data-tone="failed"] { background: var(--c2-failed); }
.c2-dot[data-tone="none"] { display: none; }
.c2-status-text[data-tone="working"] { color: var(--c2-working-1); animation: c2-working-ink 9s ease-in-out infinite; }
.c2-status-text[data-tone="waiting"] { color: var(--c2-waiting); }
.c2-status-text[data-tone="failed"] { color: var(--c2-failed); }
@keyframes c2-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes c2-working-fill { 0%, 100% { background-color: var(--c2-working-1); } 33% { background-color: var(--c2-working-2); } 66% { background-color: var(--c2-working-3); } }
@keyframes c2-working-ink { 0%, 100% { color: var(--c2-working-1); } 33% { color: var(--c2-working-2); } 66% { color: var(--c2-working-3); } }
/* Shimmer: a soft light band sweeps left -> right over the text's own colour (2.0 s sweep + 0.6 s pause = 2.6 s); text rests at 80%. */
@media (prefers-reduced-motion: no-preference) {
  .c2-shimmer { background-image: linear-gradient(100deg, color-mix(in srgb, currentColor var(--c2-shimmer-rest), transparent) 40%, color-mix(in srgb, #fff var(--c2-shimmer-light), currentColor) 50%, color-mix(in srgb, currentColor var(--c2-shimmer-rest), transparent) 60%);
    background-size: 250% 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: c2-shimmer 2.6s ease-in-out infinite; }
}
@keyframes c2-shimmer { 0% { background-position: 100% 0; } 76.923%, 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) {
  .c2-dot[data-tone="working"] { animation: none; background: var(--c2-working-2); }
  .c2-status-text[data-tone="working"] { animation: none; color: var(--c2-working-2); }
}
/* === END OF FILE (FILENAME: public/css/chat2_tokens.css) === */