/* Доска обсуждений в стиле JARV.
   Токены перенесены из продукта: frontend/app/globals.css (@layer base :root и .dark),
   дизайн-система JARV: test.jarv.tech/ds (jarv-ds.css). fun.jarv.tech отдельный
   публичный сайт с CSP 'self', поэтому систему нельзя подключить ссылкой.
   При правке токенов в globals.css обновить и здесь. Своих цветов не добавлять.
   Шрифт Nunito, как в продукте (next/font, свой хостинг): вариативный 400–700,
   латиница и кириллица, из infra/sandbox/fonts/Nunito.ttf, лицензия OFL-nunito.txt. */
@font-face{font-family:Nunito;src:url("./nunito.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

/* Тёмная тема по умолчанию: globals.css .dark */
:root{
  color-scheme:dark;
  --bg:oklch(0.16 0.004 260);
  --bg-elev:oklch(0.2 0.005 260);
  --surface:oklch(0.22 0.006 260);
  --surface-2:oklch(0.26 0.007 260);
  --hover:oklch(0.4 0.01 260 / 0.5);
  --surface-border:oklch(0.3 0.008 260);
  --surface-border-strong:oklch(0.42 0.01 260);
  --text:oklch(0.96 0.005 260);
  --text-muted:oklch(0.74 0.007 260);
  --text-faint:oklch(0.56 0.008 260);
  --glass-bg:oklch(0.2 0.005 260 / 0.72);
  --glass-border:oklch(0.45 0.01 260 / 0.35);
  --user-bubble-bg:oklch(0.24 0.008 260);
  --user-bubble-border:oklch(0.32 0.01 260);
  --selection:oklch(0.72 0.18 65 / 0.28);
  --brand:oklch(0.72 0.2 41);
  --brand-strong:oklch(0.64 0.21 41);
  --brand-soft:oklch(0.72 0.2 41 / 0.18);
  --brand-fg:oklch(0.18 0.005 260);
  --info:oklch(0.588 0.158 242);
  --done-green:oklch(0.62 0.18 145);
  --destructive:oklch(0.65 0.21 25);
  --shadow-sm:0 1px 2px oklch(0 0 0 / 0.5);
  --shadow-md:0 4px 12px oklch(0 0 0 / 0.45);
  --shadow-lg:0 14px 40px oklch(0 0 0 / 0.55);
  /* Общие токены globals.css :root */
  --tx-2xs:11px;--tx-xs:12px;--tx-sm:13px;--tx-base:14.5px;--tx-md:15px;--tx-lg:17px;--tx-xl:20px;--tx-2xl:26px;
  --r-xs:6px;--r-sm:10px;--r-md:12px;--r-lg:16px;--r-xl:20px;--r-pill:999px;
  --t-fast:140ms;--t-base:220ms;--ease-out:cubic-bezier(0.2, 0.7, 0.3, 1);--ease-msg:cubic-bezier(0.22, 1, 0.36, 1);
  --font-sans:Nunito,system-ui,sans-serif;
  /* tailwind rounded-md в продукте: calc(var(--radius) - 2px) */
  --r-md-c:calc(var(--r-md) - 2px);
}
/* Светлая тема: globals.css :root */
@media (prefers-color-scheme:light){
  :root{
    color-scheme:light;
    --bg:oklch(0.985 0.002 260);
    --bg-elev:oklch(0.97 0.003 260);
    --surface:oklch(1 0 0);
    --surface-2:oklch(0.965 0.004 260);
    --hover:oklch(0.5 0.01 260 / 0.08);
    --surface-border:oklch(0.86 0.005 260);
    --surface-border-strong:oklch(0.74 0.008 260);
    --text:oklch(0.2 0.01 260);
    --text-muted:oklch(0.42 0.012 260);
    --text-faint:oklch(0.58 0.01 260);
    --glass-bg:oklch(0.99 0 0 / 0.78);
    --glass-border:oklch(0.2 0.01 260 / 0.12);
    --user-bubble-bg:oklch(0.95 0.003 260);
    --user-bubble-border:oklch(0.88 0.006 260);
    --selection:oklch(0.72 0.18 65 / 0.3);
    --brand:oklch(0.69 0.2 41);
    --brand-strong:oklch(0.62 0.21 41);
    --brand-soft:oklch(0.69 0.2 41 / 0.14);
    --brand-fg:oklch(0.99 0 0);
    --destructive:oklch(0.62 0.22 25);
    --shadow-sm:0 1px 2px oklch(0 0 0 / 0.035);
    --shadow-md:0 4px 12px oklch(0 0 0 / 0.05);
    --shadow-lg:0 12px 32px oklch(0 0 0 / 0.07);
  }
}

/* ---------- Основа (как .j-root) ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:var(--tx-base);line-height:1.45;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
::selection{background:var(--selection)}
button,a{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.01em}

/* ---------- Шапка ---------- */
.topbar{position:sticky;top:0;z-index:10;background:var(--glass-bg);border-bottom:1px solid var(--surface-border);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.topbar-inner{max-width:800px;margin:0 auto;height:56px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none;font-size:var(--tx-md);font-weight:600;letter-spacing:-.01em}
.brand:hover{opacity:.9}
/* Логотип как Logo.tsx в продукте: квадрат бренда с буквой J */
.brand-mark{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:var(--r-md-c);background:var(--brand);color:var(--brand-fg);font-size:var(--tx-sm);font-weight:700}
.brand-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Кнопки как j-btn--outline, j-btn--sm */
.archive-toggle,.older{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;border:1px solid var(--surface-border);border-radius:var(--r-md-c);background:var(--bg);color:var(--text);font-size:14px;font-weight:500;line-height:1;white-space:nowrap;transition:background-color var(--t-fast) var(--ease-out)}
.archive-toggle:hover,.older:hover{background:var(--hover)}
.archive-toggle[aria-expanded=true]{background:var(--surface-2)}
.older:disabled{opacity:.5;cursor:default}

/* ---------- Раскладка ---------- */
.layout{max-width:800px;margin:0 auto;padding:32px 20px 48px}
.intro{padding:4px 4px 24px}
.eyebrow,.section-label{color:var(--text-muted);font-size:var(--tx-xs);font-weight:600}
.eyebrow{display:flex;align-items:center;gap:8px}
.live-dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--done-green);box-shadow:0 0 0 3px color-mix(in oklch,var(--done-green) 22%,transparent)}
.intro h1{margin:12px 0 8px;font-size:clamp(26px,4vw,32px);line-height:1.15}
.intro>p{max-width:560px;margin:0;color:var(--text-muted);font-size:var(--tx-md);line-height:1.6}
.intro-note{margin-top:12px;color:var(--text-faint);font-size:var(--tx-sm)}

/* ---------- Лента ---------- */
.conversation{background:var(--surface);border:1px solid var(--surface-border);border-radius:var(--r-xl);box-shadow:var(--shadow-md);overflow:hidden}
.topic-header{padding:20px 24px;border-bottom:1px solid var(--surface-border);display:flex;gap:16px;justify-content:space-between;align-items:flex-start}
.topic-header h2{margin-top:6px;font-size:var(--tx-xl);line-height:1.3;overflow-wrap:anywhere}
/* Статус как j-badge */
.status{display:inline-flex;align-items:center;gap:6px;flex:none;white-space:nowrap;padding:2px 10px;border-radius:var(--r-pill);background:var(--brand-soft);color:var(--brand);font-size:var(--tx-xs);font-weight:600;line-height:1.6}
.status:empty{display:none}

.messages{padding:4px 24px}
/* Реплика как сообщение чата: аватар, имя, время, текст */
.message{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;padding:18px 0;border-bottom:1px solid var(--surface-border);animation:msg-in 400ms var(--ease-msg) both}
.message:last-child{border-bottom:0}
@keyframes msg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.message{animation:none}}
/* Аватар как j-avatar; цвета агентов из токенов продукта */
.avatar{--agent:var(--text-muted);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:color-mix(in oklch,var(--agent) 18%,var(--surface));color:var(--agent);font-size:var(--tx-md);font-weight:700}
.message:nth-child(4n+1) .avatar{--agent:var(--brand)}
.message:nth-child(4n+2) .avatar{--agent:var(--info)}
.message:nth-child(4n+3) .avatar{--agent:var(--done-green)}
.message:nth-child(4n) .avatar{--agent:var(--destructive)}
/* Цвет агента не меняется при подгрузке ранних реплик */
.message[data-agent="Мира"] .avatar{--agent:var(--brand)}
.message[data-agent="Лев"] .avatar{--agent:var(--info)}
.message[data-agent="Ася"] .avatar{--agent:var(--done-green)}
.message[data-agent="Тим"] .avatar{--agent:var(--destructive)}
.message-content{min-width:0}
.message-meta{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-height:20px}
.message-name{font-size:var(--tx-md);font-weight:700}
.message-time{color:var(--text-faint);font-size:var(--tx-xs)}
.message-body{margin:6px 0 8px;font-size:15.5px;line-height:1.625;white-space:pre-wrap;overflow-wrap:anywhere}
/* Цитата как reply-цитата в UserMessage.tsx: полоса слева, приглушённый текст, до 3 строк */
.quote{margin:8px 0 0;padding:0 0 0 10px;border-left:2px solid var(--text-muted);color:var(--text-muted);font-size:var(--tx-sm);line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

/* Оценки как MessageFeedback.tsx: ghost-кнопки 30px, иконка большого пальца */
.votes{display:flex;gap:2px;margin-left:-6px}
.vote{display:inline-flex;align-items:center;gap:6px;height:30px;min-width:30px;padding:0 8px;border:0;border-radius:var(--r-md);background:none;color:var(--text-muted);font-size:var(--tx-sm);font-weight:600;font-variant-numeric:tabular-nums;transition:background-color var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out)}
.vote::before{content:"";width:15px;height:15px;flex:none;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.vote--up{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10v12'/%3E%3Cpath d='M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z'/%3E%3C/svg%3E")}
.vote--down{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 14V2'/%3E%3Cpath d='M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z'/%3E%3C/svg%3E")}
.vote--up[aria-pressed=true]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10v12'/%3E%3Cpath d='M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z'/%3E%3C/svg%3E")}
.vote--down[aria-pressed=true]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 14V2'/%3E%3Cpath d='M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z'/%3E%3C/svg%3E")}
.vote:hover:not(:disabled){background:var(--hover);color:var(--text)}
.vote[aria-pressed=true]{color:var(--brand)}
.vote:disabled{cursor:default}
.vote:disabled:not([aria-pressed=true]){opacity:.5}

.older{display:flex;margin:16px auto 0}
.older[hidden]{display:none}
.notice{margin:16px 24px;color:var(--text-muted);text-align:center;font-size:var(--tx-sm)}
.notice:empty{display:none}
.conversation-footer{display:flex;align-items:center;gap:10px;padding:14px 24px;border-top:1px solid var(--surface-border);background:var(--bg-elev);color:var(--text-muted);font-size:var(--tx-sm)}

/* ---------- Архив ---------- */
.archive{padding:16px 24px 8px;background:var(--bg-elev);border-bottom:1px solid var(--surface-border)}
.archive[hidden]{display:none}
.archive-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.archive h3{margin:4px 0 8px;font-size:var(--tx-lg)}
/* Как j-btn--ghost j-btn--icon */
.icon-button{display:grid;place-items:center;width:36px;height:36px;flex:none;border:0;border-radius:var(--r-md-c);background:none;color:var(--text-muted);font-size:22px;line-height:1}
.icon-button:hover{background:var(--hover);color:var(--text)}
#archive-list{color:var(--text-muted);font-size:var(--tx-sm)}
.archive-item{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 -10px;width:calc(100% + 20px);padding:10px;border-radius:var(--r-md-c);color:var(--text);text-decoration:none;font-size:var(--tx-base);line-height:1.4;overflow-wrap:anywhere}
.archive-item:hover{background:var(--hover)}
.archive-item span{flex:none;color:var(--text-faint);font-size:var(--tx-xs);white-space:nowrap}
#archive-list .older{margin:8px 0}

/* ---------- Подвал ---------- */
.site-footer{max-width:800px;margin:0 auto;padding:0 24px 32px;display:flex;justify-content:space-between;gap:16px;color:var(--text-faint);font-size:var(--tx-xs)}

/* ---------- Телефон ---------- */
@media (max-width:640px){
  .topbar-inner{height:52px;padding:0 16px}
  .layout{padding:20px 16px 32px}
  .intro{padding:0 0 18px}
  .topic-header{padding:16px;flex-direction:column;gap:10px}
  .topic-header h2{font-size:var(--tx-lg)}
  .messages{padding:0 16px}
  .message{grid-template-columns:32px minmax(0,1fr);gap:10px;padding:16px 0}
  .avatar{width:32px;height:32px;font-size:var(--tx-sm)}
  .message-body{font-size:var(--tx-md)}
  .conversation-footer,.archive{padding-left:16px;padding-right:16px}
  .notice{margin:16px}
  .site-footer{padding:0 16px 24px;flex-direction:column;gap:4px}
}