/* Дизайн-система — перенос :root с реестра (vault), там же светлая/тёмная палитра */
:root{
  --bg:#EEF0F3; --panel:#FFFFFF; --surface:#FFFFFF; --surface-2:#F3F5F8; --surface-3:#E9ECF1;
  --ink:#191C22; --ink-soft:#565D6A; --ink-faint:#868D9B; --ink-ghost:#B6BCC7;
  --line:#E4E7EC; --line-soft:#EEF0F4;
  --dark:#16181D; --dark-ink:#FFFFFF; --gold:#DC8A2C; --gold-soft:#F6E5C6; --red:#D8503A; --blue:#3B82F6;
  --shadow:0 1px 2px rgba(20,24,40,.04), 0 4px 16px rgba(20,24,40,.06);
  --shadow-lift:0 4px 12px rgba(20,24,40,.08), 0 18px 40px rgba(20,24,40,.14);
  --fs-1:11px; --fs-2:12px; --fs-3:13px; --fs-4:15px; --fs-5:17px; --fs-6:20px; --fs-7:26px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --r-1:6px; --r-2:8px; --r-3:12px; --r-4:18px; --r-pill:20px;
  --h-1:28px; --h-2:32px; --h-3:38px; --h-4:46px;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0B0D11; --panel:#111318; --surface:#15181E; --surface-2:#1B1F27; --surface-3:#232833;
  --ink:#ECEEF3; --ink-soft:#9BA2B1; --ink-faint:#6A7181; --ink-ghost:#434A58; --line:#242A34; --line-soft:#1C212A;
  --dark:#ECEEF3; --dark-ink:#15181E; --gold:#EEAA4D; --gold-soft:#392B12; --red:#E8805A;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.45); --shadow-lift:0 4px 12px rgba(0,0,0,.5), 0 22px 52px rgba(0,0,0,.6);}}
:root[data-theme="light"]{--bg:#EEF0F3; --panel:#FFFFFF; --surface:#FFFFFF; --surface-2:#F3F5F8; --surface-3:#E9ECF1; --ink:#191C22; --ink-soft:#565D6A; --ink-faint:#868D9B; --ink-ghost:#B6BCC7; --line:#E4E7EC; --line-soft:#EEF0F4; --dark:#16181D; --dark-ink:#FFFFFF; --gold:#DC8A2C; --gold-soft:#F6E5C6; --red:#D8503A; --shadow:0 1px 2px rgba(20,24,40,.04), 0 4px 16px rgba(20,24,40,.06); --shadow-lift:0 4px 12px rgba(20,24,40,.08), 0 18px 40px rgba(20,24,40,.14)}
:root[data-theme="dark"]{--bg:#0B0D11; --panel:#111318; --surface:#15181E; --surface-2:#1B1F27; --surface-3:#232833; --ink:#ECEEF3; --ink-soft:#9BA2B1; --ink-faint:#6A7181; --ink-ghost:#434A58; --line:#242A34; --line-soft:#1C212A; --dark:#ECEEF3; --dark-ink:#15181E; --gold:#EEAA4D; --gold-soft:#392B12; --red:#E8805A; --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.45); --shadow-lift:0 4px 12px rgba(0,0,0,.5), 0 22px 52px rgba(0,0,0,.6)}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit; font-size:inherit}
.app{display:flex; flex-direction:column; height:100vh; height:100dvh}
[hidden]{display:none !important}
.muted{color:var(--ink-faint)}

/* Топбар */
.topbar{display:flex; align-items:center; gap:12px; padding:10px 18px; background:var(--panel); border-bottom:1px solid var(--line); flex:0 0 auto; z-index:40}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; letter-spacing:-.01em}
.mark{width:28px; height:28px; border-radius:var(--r-2); background:var(--dark); color:var(--gold); display:grid; place-items:center; font-weight:700; font-size:15px; flex:0 0 auto}
.mark.big{width:52px; height:52px; font-size:26px; border-radius:var(--r-3); margin:0 auto}
.tbsp{flex:1 1 auto}
.burger{display:none; border:0; background:transparent; color:var(--ink); font-size:20px; cursor:pointer; padding:4px 8px}
.iconbtn{width:36px; height:36px; border-radius:var(--r-2); border:1px solid var(--line); background:var(--surface-2); color:var(--ink-soft); cursor:pointer; display:grid; place-items:center}
.iconbtn:hover{color:var(--ink); border-color:var(--ink-faint)}
.searchmini{display:flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--line); border-radius:var(--r-3); background:var(--surface-2); color:var(--ink-faint); cursor:pointer; font-size:var(--fs-3)}
.searchmini:hover{border-color:var(--ink-faint); color:var(--ink-soft)}
.searchmini kbd{font-size:var(--fs-1); border:1px solid var(--line); border-radius:var(--r-1); padding:1px 5px; color:var(--ink-ghost)}

/* Каркас */
.main{display:flex; flex:1 1 auto; min-height:0; position:relative}
.scrim{position:fixed; inset:0; background:rgba(10,12,18,.4); z-index:44; opacity:0; pointer-events:none; transition:.18s}
.scrim.show{opacity:1; pointer-events:auto}
.rail{width:230px; flex:0 0 auto; background:var(--panel); border-right:1px solid var(--line); padding:14px 12px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; z-index:45}
.ws{display:flex; align-items:center; gap:11px; padding:4px 8px 13px; margin-bottom:6px; border-bottom:1px solid var(--line-soft)}
.ws .ava{width:36px; height:36px; border-radius:var(--r-3); display:grid; place-items:center; color:var(--gold); font-weight:700; background:var(--dark); flex:0 0 auto}
.ws .wt{font-weight:700; font-size:14px; line-height:1.25}
.ws .wsub{font-size:12px; color:var(--ink-faint); margin-top:1px}
.navitem{display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:9px 10px; border-radius:var(--r-2); border:0; background:transparent; color:var(--ink-soft); font-size:14px; font-weight:500; cursor:pointer; transition:.12s}
.navitem:hover{background:var(--surface-2); color:var(--ink)}
.navitem.on{background:var(--surface-2); color:var(--ink); font-weight:600}
.navitem .ic{width:18px; text-align:center; flex:0 0 auto}
.navitem.on .ic{filter:none}
.navitem .n{margin-left:auto; font-size:12px; color:var(--ink-faint); font-variant-numeric:tabular-nums}
.railspace{flex:1 1 auto}
.railfoot{border-top:1px solid var(--line-soft); padding-top:8px}
.usage{font-size:var(--fs-2); color:var(--ink-faint); padding:4px 10px 8px}

.center{flex:1 1 auto; min-width:0; overflow-y:auto; padding:20px 26px 60px; scroll-behavior:smooth}
.center > .inner{max-width:900px; margin:0 auto}
.side{width:340px; flex:0 0 auto; background:var(--panel); border-left:1px solid var(--line); overflow-y:auto; padding:16px}

/* Общие элементы */
h1.pg{font-size:var(--fs-7); letter-spacing:-.02em; margin:6px 0 4px}
.pgsub{color:var(--ink-faint); margin:0 0 18px; font-size:var(--fs-3)}
.btn{display:inline-flex; align-items:center; gap:8px; height:var(--h-3); padding:0 16px; border-radius:var(--r-2); border:1px solid var(--line); background:var(--surface); color:var(--ink); font-weight:600; cursor:pointer; font-size:14px}
.btn:hover{border-color:var(--ink-faint)}
.btn.primary{background:var(--dark); color:var(--dark-ink); border:0}
.btn.primary:hover{opacity:.9}
.btn.gold{background:var(--gold); color:#fff; border:0}
.chip{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--r-pill); font-size:var(--fs-2); font-weight:600; background:var(--surface-2); border:1px solid var(--line); color:var(--ink-soft); cursor:pointer; text-decoration:none}
.chip:hover{border-color:var(--gold); color:var(--ink)}
.chip.gold{background:var(--gold-soft); color:var(--gold); border-color:transparent}
.chip.warn{background:color-mix(in srgb,var(--red) 12%,transparent); color:var(--red); border-color:transparent}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-3); box-shadow:var(--shadow); padding:16px; position:relative; overflow:hidden}
.card.pc::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--pc,var(--gold))}
.card.click{cursor:pointer; transition:transform .14s, box-shadow .14s, border-color .14s}
.card.click:hover{transform:translateY(-2px); box-shadow:var(--shadow-lift); border-color:color-mix(in srgb,var(--pc,var(--gold)) 45%,var(--line))}
.grid{display:grid; gap:12px}
.progressbar{height:8px; border-radius:5px; background:var(--surface-3); overflow:hidden}
.progressbar > i{display:block; height:100%; background:var(--gold); border-radius:5px; transition:width .3s}
input[type=text],input[type=password],input[type=search],textarea{width:100%; border:1px solid var(--line); border-radius:var(--r-2); background:var(--surface); color:var(--ink); padding:10px 12px; outline:none; font-size:16px}
input:focus,textarea:focus{border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft)}

/* Логин */
.login{position:fixed; inset:0; display:grid; place-items:center; background:var(--bg); z-index:100}
.loginbox{width:min(340px,88vw); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-4); box-shadow:var(--shadow-lift); padding:28px 24px; text-align:center; display:flex; flex-direction:column; gap:12px}
.loginbox h1{margin:6px 0 0; font-size:var(--fs-6)}
.loginbox p{margin:0 0 8px}
.loginerr{color:var(--red); font-size:var(--fs-3); min-height:18px}
/* Единый формат входа 369AI: значок и имя системы, плашка про один пароль, «запомнить меня», строка про сброс */
.loginbox{text-align:left; gap:10px}
.loginhead{display:flex; align-items:center; gap:11px}
.loginhead .mark.big{flex:0 0 auto; margin:0; width:46px; height:46px; font-size:23px}
.loginnm h1{margin:0; font-size:var(--fs-6); line-height:1.15}
.loginnm p{margin:2px 0 0; font-size:var(--fs-3)}
.loginbox .onepass{background:var(--surface-2,rgba(255,255,255,.04)); border:1px solid var(--line); border-radius:var(--r-2); padding:10px 12px; font-size:var(--fs-3); line-height:1.45; color:var(--ink-soft); margin:6px 0 2px}
.loginbox .onepass b{color:var(--ink)}
.loginbox .fl{font-size:12px; font-weight:600; color:var(--ink-faint); margin-bottom:-6px}
.loginbox .rem{display:flex; align-items:center; gap:9px; font-size:var(--fs-3); color:var(--ink-soft); cursor:pointer; user-select:none; margin:2px 0}
.loginbox .rem input{width:17px; height:17px; accent-color:var(--accent,#DC8A2C); cursor:pointer; margin:0}
.loginfoot{margin-top:4px; padding-top:12px; border-top:1px solid var(--line); font-size:12.5px; line-height:1.5; color:var(--ink-faint)}
.loginfoot b{color:var(--ink-soft)}

/* Обзор */
.lessonrow{display:flex; align-items:center; gap:12px; padding:12px 14px}
.lessonrow .no{width:44px; flex:0 0 auto; font-weight:700; color:var(--ink-faint); font-variant-numeric:tabular-nums}
.lessonrow .tt{flex:1 1 auto; min-width:0}
.lessonrow .tt b{display:block; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lessonrow .tt small{color:var(--ink-faint); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px}
.lessonrow .meta{flex:0 0 auto; display:flex; gap:6px; align-items:center}
.done{color:#2E9E5B; font-weight:700}

/* Читалка */
.reader{display:flex; gap:26px}
.reader .doc{flex:1 1 auto; min-width:0; max-width:820px}
.reader .toc{width:250px; flex:0 0 auto; position:sticky; top:0; align-self:flex-start; max-height:calc(100dvh - 120px); overflow-y:auto; font-size:var(--fs-3); padding-right:4px}
.toc a{display:block; padding:6px 10px; border-radius:var(--r-1); color:var(--ink-soft); text-decoration:none; border-left:2px solid transparent; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.toc a:hover{background:var(--surface-2); color:var(--ink)}
.toc a.on{color:var(--gold); border-left-color:var(--gold); background:var(--surface-2)}
.doc h2{margin:34px 0 12px; font-size:var(--fs-6); letter-spacing:-.01em; scroll-margin-top:16px}
.doc h3{margin:22px 0 10px; font-size:var(--fs-5)}
.doc blockquote{margin:10px 0; padding:8px 14px; border-left:3px solid var(--gold); background:var(--surface-2); border-radius:0 var(--r-2) var(--r-2) 0; color:var(--ink); font-size:14px}
.doc code{background:var(--surface-3); border-radius:4px; padding:1px 5px; font-size:.92em; overflow-wrap:anywhere}
.doc .tc{display:inline-block; background:var(--gold-soft); color:var(--gold); border-radius:var(--r-1); padding:0 6px; font-size:var(--fs-2); font-weight:600; cursor:pointer; font-variant-numeric:tabular-nums}
.doc .slot{color:var(--gold); font-weight:700}
.doc table{border-collapse:collapse; width:100%; font-size:14px; display:block; overflow-x:auto}
.doc td,.doc th{border:1px solid var(--line); padding:6px 10px; text-align:left}
.askblock{float:right; margin:4px 0 4px 10px; opacity:.55; font-size:var(--fs-2)}
.askblock:hover{opacity:1}

/* Чат */
.chatwrap{display:flex; gap:20px; height:calc(100dvh - 130px)}
/* Высота экрана задания жила инлайном в taskrun.js и перебивалась на телефоне
   только через !important. Переносим сюда — мобильная раскладка теперь спорит с ней
   обычными правилами. */
.taskwrap{height:calc(100dvh - 210px)}
.chatlist{width:230px; flex:0 0 auto; overflow-y:auto; display:flex; flex-direction:column; gap:4px}
.chatlist .item{display:flex; align-items:center; gap:6px; padding:9px 11px; border-radius:var(--r-2); cursor:pointer; font-size:var(--fs-3); color:var(--ink-soft); border:1px solid transparent; position:relative}
.chatlist .item:hover{background:var(--surface-2)}
.chatlist .item.on{background:var(--surface-2); color:var(--ink); border-color:var(--line)}
.chatlist .item .ttl{flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chatlist .item .del,.chatlist .item .ren{opacity:0; cursor:pointer; color:var(--ink-faint); flex:0 0 auto}
.chatlist .item:hover .del,.chatlist .item:hover .ren{opacity:.8}
.chatcol{flex:1 1 auto; min-width:0; min-height:0; display:flex; flex-direction:column}
.chatlog{flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:12px; padding:4px 2px 12px}
.msg{max-width:88%; padding:10px 14px; border-radius:var(--r-3); font-size:14px; white-space:normal}
.msg.user{align-self:flex-end; background:var(--dark); color:var(--dark-ink); border-bottom-right-radius:4px}
.msg.ai{align-self:flex-start; background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:4px; box-shadow:var(--shadow)}
.msg.ai .refs{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.msg.ai p{margin:.4em 0}
.msg.ai blockquote{margin:8px 0; padding:6px 10px; border-left:3px solid var(--gold); background:var(--surface-2); border-radius:0 var(--r-1) var(--r-1) 0}
.msg.sys{align-self:center; color:var(--ink-faint); font-size:var(--fs-2); background:transparent}
.sources{align-self:flex-start; font-size:var(--fs-2); color:var(--ink-faint); background:var(--surface-2); border-radius:var(--r-2); padding:8px 12px; max-width:88%}
.sources b{color:var(--ink-soft)}
.chatbar{flex:0 0 auto; display:flex; gap:8px; padding-top:10px; align-items:flex-end}
.chatbar textarea{resize:none; min-height:46px; max-height:150px}
.modelsel{display:flex; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-2); padding:3px; gap:2px; flex:0 0 auto}
.modelsel button{border:0; background:transparent; color:var(--ink-soft); font-weight:600; font-size:var(--fs-2); padding:6px 10px; border-radius:var(--r-1); cursor:pointer; white-space:nowrap}
.modelsel button.on{background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}
.sendbtn{height:46px; width:52px; border-radius:var(--r-2); border:0; background:var(--gold); color:#fff; font-size:19px; cursor:pointer; flex:0 0 auto}
.sendbtn:disabled{opacity:.5; cursor:default}
.typing{display:inline-flex; gap:4px; padding:6px 2px}
.typing i{width:7px; height:7px; border-radius:50%; background:var(--ink-ghost); animation:bl 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes bl{0%,80%,100%{opacity:.3}40%{opacity:1}}

/* Глоссарий */
.term{padding:14px 16px}
.term h3{margin:0 0 6px; font-size:var(--fs-4)}
.term .body{font-size:14px; color:var(--ink-soft)}
.term .body b,.term .body strong{color:var(--ink)}

/* Поиск-оверлей */
.searchov{position:fixed; inset:0; background:rgba(10,12,18,.45); z-index:90; display:grid; place-items:start center; padding-top:9vh}
.searchbox2{width:min(680px,92vw); background:var(--surface); border-radius:var(--r-4); box-shadow:var(--shadow-lift); overflow:hidden; display:flex; flex-direction:column; max-height:72vh}
.searchbox2 input{border:0; border-bottom:1px solid var(--line); border-radius:0; padding:16px 18px; font-size:16px}
.searchbox2 input:focus{box-shadow:none}
.sres{overflow-y:auto; padding:8px}
.sres .r{padding:10px 12px; border-radius:var(--r-2); cursor:pointer}
.sres .r:hover{background:var(--surface-2)}
.sres .r b{display:block; font-size:14px}
.sres .r small{color:var(--ink-faint)}
.sres .r .sn{font-size:var(--fs-3); color:var(--ink-soft); margin-top:3px}
.sres .r .sn mark{background:var(--gold-soft); color:var(--gold); border-radius:3px; padding:0 2px}

/* Тост */
/* Позднее правило .toast{bottom:var(--toast-bottom)} перебивало мобильную посадку,
   а --toast-bottom ставит только слой выделения — в редакторе тост уезжал под клавиатуру.
   Считаем от обеих величин сразу, тогда правило одно и работает везде. */
.toast{position:fixed; left:50%; bottom:calc(var(--toast-bottom, 26px) + var(--vvbot, 0px)); transform:translateX(-50%); background:var(--dark); color:var(--dark-ink); padding:11px 18px; border-radius:var(--r-3); box-shadow:var(--shadow-lift); z-index:120; font-size:14px}

.mob-chats{display:none}
.mob-tabs{display:none; gap:6px; margin:0 0 10px}
.stepper{display:flex; gap:6px; margin:10px 0 14px; flex-wrap:wrap}
/* Шапка экрана задания: кнопка назад, заголовок, чипы инструментов. Раньше стояло
   инлайном в taskrun.js — вынесено сюда, чтобы телефон мог это ужать. */
.taskhead{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.taskhead h1.pg{margin:0; font-size:var(--fs-6); flex:1 1 280px}
.taskhead #backBtn{height:var(--h-2)}
.taskrow2{display:flex; align-items:center; gap:8px; min-width:0}


/* Мобилка */
@media (max-width:840px){
  /* Окно выбора считалось от страницы, и с открытой клавиатурой поле поиска уезжало
     выше видимой области — печатать приходилось вслепую. Сажаем в то же окно, что и шторки. */
  .searchov{top:var(--vvtop, 0px); height:min(100dvh, var(--apph, 100dvh)); inset:auto 0 auto 0;
    padding-top:6vh; align-items:start}
  .searchbox2{max-height:min(72vh, calc(var(--apph, 100dvh) - 90px))}
  .burger{display:block; padding:4px 6px}
  /* Шапка не помещалась в 390: бургер + название + поиск + три кнопки давали 413 px,
     поэтому страница ездила вбок на 23 px, а кнопка темы уходила за правый край.
     Ужимаем отступы, разрешаем названию обрезаться и убираем «⌘K» — на телефоне
     нет клавиши Cmd, подсказка там только занимает место. */
  /* Высота приложения — по видимой области, а не по 100dvh: dvh не знает про
     клавиатуру, и панель ввода уходила под неё. --apph ставит скрипт в index.html.
     Приложение прибито к смотровому окну, а не к странице: открывая клавиатуру,
     Safari сдвигает окно вниз (--vvtop), и приложение едет вместе с ним. Пока оно
     стояло у верха страницы, в окно попадала только нижняя кромка — отсюда «экран
     скачет»: кусок переписки, поле ввода, а ниже пустой фон до самой клавиатуры. */
  html,body{overflow:hidden; overscroll-behavior:none}
  .app{position:fixed; left:0; right:0; top:var(--vvtop, 0px);
    height:min(100dvh, var(--apph, 100dvh))}
  /* Всплывашка живёт вне .app и считалась от страницы — с клавиатурой пряталась
     под ней. Поднимаем на высоту клавиатуры. */
    /* посадка тоста считается в общем правиле выше — здесь только запас под безопасную зону */
  .toast{bottom:calc(var(--toast-bottom, 26px) + var(--vvbot, 0px) + env(safe-area-inset-bottom))}
  /* Вход — та же история: форма centered по всей странице, а с клавиатурой видимое
     окно вдвое меньше, и поле пароля оказывалось под ней. Сажаем форму в окно. */
  .login{inset:auto 0 auto 0; top:var(--vvtop, 0px); height:min(100dvh, var(--apph, 100dvh))}
  .topbar{padding:8px 10px; gap:8px}
  .brand{flex:0 1 auto; min-width:0; overflow:hidden}
  .brand span:last-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .searchmini{flex:0 0 auto; padding:8px 11px}
  .searchmini kbd{display:none}
  .iconbtn{flex:0 0 auto; width:34px; height:34px}
  .rail{position:fixed; top:0; bottom:0; left:0; transform:translateX(-105%); transition:.2s; box-shadow:var(--shadow-lift)}
  .rail.open{transform:none}
  .center{padding:14px 14px 80px}
  .reader .toc{display:none}
  .mob-chats{display:inline-flex}
  .hide-mob{display:none !important}
  .lessonrow{flex-wrap:wrap}
  .lessonrow .tt{flex:1 1 60%}
  .lessonrow .tt b,.lessonrow .tt small{white-space:normal}
  .lessonrow .meta{margin-left:56px}
  /* «💬 спросить ИИ» обтекается текстом справа и на узком экране отжимал пункты
     списка в колонку шириной в два слова. На телефоне даём кнопке свою строку. */
  .doc .askblock{float:none; display:block; width:max-content; margin:0 0 10px}
  /* Мессенджер-паттерн: страница скроллится, панель ввода прилипает к низу */
  .chatwrap{height:auto}
  .chatlog{overflow:visible}
  .chatbar{position:sticky; bottom:0; z-index:10; background:var(--bg); box-shadow:0 -8px 16px -8px var(--bg);
    flex-wrap:wrap; padding:8px 54px calc(8px + env(safe-area-inset-bottom)) 0}
  .chatbar .modelsel{order:1; flex:1 1 100%; justify-content:center}
  .chatbar textarea{order:2; flex:1 1 0; width:auto; min-width:0}
  .chatbar .sendbtn{order:3}
  .taskwrap{flex-direction:column}
  .taskwrap > *{display:none !important}
  .taskwrap.show-dialog > .chatcol{display:flex !important}
  .taskwrap.show-art > .artcard{display:flex !important; min-height:60dvh}
  .mob-tabs{display:flex}
  .chatlist{position:fixed; top:0; bottom:0; left:0; width:270px; background:var(--panel); z-index:46; padding:14px; transform:translateX(-105%); transition:.2s; box-shadow:var(--shadow-lift)}
  .chatlist.open{transform:none}
  .side{display:none}
  .searchmini span{display:none}
  .msg{max-width:96%}
  .modelsel button{padding:6px 7px}
  /* Виджет правок читает эти переменные из своего shadow DOM. На телефоне сдвигаем
     карандаш плотнее в угол — так он меньше налезает на нижний ряд кнопок в карточках. */
  :root{--pravki-right:12px; --pravki-bottom:14px}
  /* Карточка задания: чипы «урок» и «статус» не сжимались и оставляли заголовку
     ~120 px — текст ломался по одному слову в строку, карточка вырастала до 300 px.
     Пускаем чипы на свою строку (разметка в tasks.js инлайновая, класса там нет). */
  .card[data-slug] > div{flex-wrap:wrap}
  .card[data-slug] > div > div:last-child{margin-left:46px}
}

/* Виджет правок висит на <html> рядом с <body>, поэтому его не достать из .app.
   На экране логина ему делать нечего: правку всё равно не отправить, а оранжевый
   кружок поверх формы читается как часть платформы и сбивает с толку. */
html:has(#app[hidden]) #pravki-widget-host{display:none}
/* На десктопе карандаш садился ровно на кнопку отправки в чате: замер 1280×900 —
   кнопка x=1202..1254 y=844..890, карандаш x=1214..1262 y=834..882, и клик в центр
   кнопки уходил виджету. Поднимаем карандаш над панелью ввода — там пустой фон
   справа от колонки сообщений. Раскладку это не двигает: виджет висит поверх страницы. */
@media (min-width:841px){ :root:has(.chatbar){--pravki-bottom:110px} }

/* ── Чат и задание на телефоне: экран приложения, а не длинная страница ──────────
   Правила выше (мессенджер-паттерн со «липким» полем) оставлены как запасной путь
   для браузеров без :has() — там всё как было. Ниже настоящая посадка.

   Что было сломано на 390 (замерено в браузере):
   · Скроллилась страница целиком, а не лента сообщений. Переписка длиной 10 907 px
     уносила шапку задания вместе со вкладками «Диалог / Результат» на −10 088 px:
     кнопка «Результат» физически была на экране, но добраться до неё можно было,
     только пролистав весь диалог вверх. Отсюда жалоба «результат недоступен».
   · «Липкое» поле ввода вставало не у нижнего края, а на 80 px выше — ровно на
     нижний отступ .center. Сообщения ленты (overflow:visible) продолжались ниже
     поля и были видны сквозь него, а при скролле проезжали насквозь.

   Как стало: .center на этих экранах не скроллится, колонка тянется на всю высоту,
   скроллится только лента. Поле ввода — обычный нижний ряд колонки, поэтому оно
   всегда внизу и подлезть под него нечему. Вкладки и степпер всегда на экране. */
@supports selector(:has(*)){
  @media (max-width:840px){
    .center:has(.chatwrap){display:flex; overflow:hidden; padding-bottom:0}
    .center:has(.chatwrap) > .inner{display:flex; flex-direction:column;
      flex:1 1 auto; width:100%; min-height:0}
    /* Шапка, степпер и вкладки — не резиновые: как элементы колонки они по умолчанию
       ужимаются, и степпер схлопывался в полоску высотой 1 px. Растягиваться должна
       только переписка. */
    .center:has(.chatwrap) > .inner > *:not(.chatwrap){flex:0 0 auto}
    .chatwrap{flex:1 1 auto; min-height:0}
    .chatlog{overflow-y:auto; overscroll-behavior:contain; padding-bottom:4px}
    /* Справа оставляем место под карандаш правок — он висит в углу поверх всего,
       и без этого зазора садился ровно на кнопку отправки. */
    .chatbar{position:static; box-shadow:none; border-top:1px solid var(--line-soft);
      padding:8px 56px calc(8px + env(safe-area-inset-bottom)) 0}
    .taskwrap.show-art > .artcard{min-height:0}
    /* Шапка панели «Результат»: три кнопки в одну строку с заголовком не влезали,
       и «＋ в базу» ломалось на две строки прямо внутри чипа. */
    .artcard > div:first-child{flex-wrap:wrap}
    .artcard .chip{white-space:nowrap}
    /* Степпер прокручивается вбок — гасим правый край, чтобы обрезанный чип читался
       как «дальше есть ещё», а не как поехавшая вёрстка. */
    .stepper{mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}
    .mob-tabs{flex:0 0 auto}
    /* Шапка задания занимала 327 px из 844 — переписке оставалось меньше половины
       экрана: кнопка «Задания» словом, заголовок в три строки кеглем 20, потом три
       отдельные полосы (степпер, вкладки, разговоры). Собираем в три узкие строки. */
    .taskhead{flex-wrap:nowrap; gap:6px}
    .taskhead #backBtn{flex:0 0 auto; padding:0 11px}
    .taskhead #backBtn .lbl{display:none}
    .taskhead h1.pg{flex:1 1 auto; min-width:0; font-size:var(--fs-4); line-height:1.2;
      display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
    /* Чипы шапки могут ужиматься и обрезаться: длинное название базы знаний иначе
       распирает строку и выдавливает заголовок задания за край экрана. */
    .taskhead .chip{flex:0 1 auto; max-width:42%; padding:6px 9px;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
    .taskhead .modelsel{flex:0 0 auto}
    .stepper{margin:7px 0 7px}
    .stepper .chip{font-size:var(--fs-1); padding:3px 8px}
    /* Вкладки и разговоры — одной строкой: по отдельности это были две полосы по 30 px
       при том, что вместе они занимают меньше ширины экрана. */
    .taskrow2{margin:0 0 8px}
    .taskrow2 .mob-tabs{margin:0}
    .taskrow2 .taskchats{flex:1 1 auto; min-width:0; padding:0}
    /* Степпер в одну прокручиваемую строку: пять чипов в два-три ряда съедали
       треть экрана, а переписке и так тесно. */
    .stepper{flex-wrap:nowrap; overflow-x:auto; margin:8px 0 10px; scrollbar-width:none}
    .stepper::-webkit-scrollbar{display:none}
    .stepper .chip{flex:0 0 auto}
  }
}

/* ── Панель источников ─────────────────────────────────────────────────────── */
.srcpanel{display:flex; flex-direction:column; gap:10px; max-height:86vh}
.srchead{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.srchead .muted{font-size:var(--fs-2)}
.srctabs{display:flex; gap:6px; background:var(--surface-2); border-radius:var(--r-pill); padding:3px}
.srctabs button{flex:1; border:0; background:transparent; color:var(--ink-soft); font:inherit; font-weight:600;
  font-size:var(--fs-2); padding:6px 10px; border-radius:var(--r-pill); cursor:pointer}
.srctabs button.on{background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.18)}
.srcnote{font-size:var(--fs-2); line-height:1.4}
.srctools{display:flex; gap:8px; align-items:center}
.srctools input{flex:1 1 auto}
.srclist{overflow-y:auto; display:flex; flex-direction:column; gap:2px; padding-right:4px; min-height:120px}
.srcgrp{font-size:var(--fs-2); font-weight:700; color:var(--ink-soft); text-transform:uppercase;
  letter-spacing:.04em; margin:10px 2px 4px; display:flex; gap:8px}
.srcgrp .muted{text-transform:none; letter-spacing:0}
.srcrow{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-2);
  border:1px solid transparent; cursor:pointer}
.srcrow:hover{background:var(--surface-2)}
.srcrow.on{background:var(--gold-soft); border-color:color-mix(in srgb,var(--gold) 35%,transparent)}
.srcrow input[type=checkbox]{width:17px; height:17px; accent-color:var(--gold); cursor:pointer; flex:0 0 auto}
.srcmain{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px}
.srctitle{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-3)}
.srctitle i{font-style:normal; font-size:var(--fs-1); color:var(--ink-soft)}
.srcsum{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-1)}
.srcmeta{font-size:var(--fs-1); flex:0 0 auto}
.srcempty{padding:8px 10px; font-size:var(--fs-2)}
.srcfoot{display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:6px; border-top:1px solid var(--line)}
@media (max-width:640px){ .srcmeta{display:none} }
/* 320 px: на название в шапке остаётся ~50 px — вместо огрызка «Наст…» показываем
   только знак «Н», кнопки при этом остаются на экране целиком. */
@media (max-width:360px){ .brand span:last-child{display:none} }

/* ── Люди (админка) ────────────────────────────────────────────────────────── */
.people{display:flex; flex-direction:column; gap:10px}
.prow{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
/* basis:0 — чтобы длинная строка описания не выдавливала кнопки действий на вторую строку */
.prow .pname{flex:1 1 0; min-width:0}
.prow .chip{white-space:nowrap}
.pcourses{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.pcourses label{display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-2);
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:4px 10px; cursor:pointer}
.pcourses label.on{background:var(--gold-soft); border-color:transparent; color:var(--gold)}
.pcourses input{accent-color:var(--gold)}
.roletag{font-size:var(--fs-1); font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:2px 8px; border-radius:var(--r-pill); background:var(--surface-2); color:var(--ink-soft)}
.roletag.admin{background:var(--gold-soft); color:var(--gold)}
.roletag.off{background:color-mix(in srgb,var(--red) 12%,transparent); color:var(--red)}

/* ── Полка источников под ответом ИИ ───────────────────────────────────────── */
.srcdeck{display:flex; flex-direction:column; gap:6px; margin-top:12px}
.srccard{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-2); padding:9px 11px}
.srccard.extra{display:none}
.srccard.cited{border-color:color-mix(in srgb,var(--gold) 40%,var(--line))}
.srccard .hd{display:flex; align-items:center; gap:6px; font-size:var(--fs-1); color:var(--ink-soft); font-weight:600}
.srccard .hd .tc{margin-left:auto; background:var(--gold-soft); color:var(--gold); border-radius:var(--r-1);
  padding:1px 6px; font-variant-numeric:tabular-nums}
.srccard .ttl{font-size:var(--fs-3); font-weight:600; margin:3px 0 0}
.srccard .acts{display:flex; flex-wrap:wrap; gap:5px; margin-top:8px}
.srccard .acts .chip{padding:3px 9px; font-size:var(--fs-1)}
.srccard .bd{margin-top:10px; padding-top:10px; border-top:1px solid var(--line);
  font-size:14px; line-height:1.55; max-height:56vh; overflow-y:auto}
.srccard .bd p{margin:0 0 9px}
.srccard .bd blockquote{margin:8px 0; padding:8px 12px; background:var(--surface);
  border-left:3px solid var(--gold); border-radius:0 var(--r-2) var(--r-2) 0}
.srccard .bd .tc{background:var(--gold-soft); color:var(--gold); border-radius:var(--r-1);
  padding:0 5px; font-size:var(--fs-1); font-variant-numeric:tabular-nums}
.srcmore, .nextbtn{align-self:flex-start}
.asknext{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.asknext .chip{font-weight:500}
.modesel{display:flex; gap:3px; background:var(--surface-2); border-radius:var(--r-pill); padding:3px}
.modesel button{border:0; background:transparent; color:var(--ink-soft); font:inherit; font-weight:600;
  font-size:var(--fs-1); padding:5px 10px; border-radius:var(--r-pill); cursor:pointer}
.modesel button.on{background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.16)}
.vialine{margin-top:8px; font-size:var(--fs-1); color:var(--ink-soft)}
.srccard .cardhead{cursor:pointer; border-radius:var(--r-2); margin:-2px -4px 0; padding:2px 4px}
.srccard .cardhead:hover{background:color-mix(in srgb,var(--gold) 7%,transparent)}
.srccard.open{border-color:color-mix(in srgb,var(--gold) 45%,var(--line))}

/* Тайминги внутри текста конспекта — по умолчанию скрыты, кнопка ⏱ в шапке возвращает.
   Таймкод в шапке блока и карточки остаётся всегда: это адрес блока, а не помеха чтению. */
html:not([data-tc="on"]) .doc .tc,
html:not([data-tc="on"]) .srccard .bd .tc,
html:not([data-tc="on"]) .msg .tc{display:none}
.iconbtn.on{background:var(--gold-soft); color:var(--gold)}

/* ── Выделение текста и конспект ────────────────────────────────────────────── */
/* мебель не выделяется: иначе в выписку уезжают подписи кнопок */
.srccard .cardhead, .srccard .acts, .srcmore, .nextbtn, .asknext, .vialine,
.msg.ai .refs, .doc .askblock, .toc, .chip, .modelsel, .modesel, .srctabs, .selbar,
.nhead, .nacts{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
.srccard .bd, .srccard .bd *, .doc p, .doc li, .doc blockquote{-webkit-user-select:text; user-select:text}
::selection{background:color-mix(in srgb,var(--gold) 28%,transparent)}

.selbar{position:fixed; left:0; top:0; z-index:70; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-3); box-shadow:var(--shadow-lift); padding:8px; display:flex; flex-direction:column;
  gap:6px; touch-action:pan-x pan-y; transition:transform .09s}
.selbar[hidden]{display:none}
.selpre{display:flex; gap:8px; align-items:baseline; font-size:var(--fs-1); color:var(--ink-faint); max-width:520px}
.selpre .q{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto}
.selpre .addr{flex:0 0 auto; color:var(--gold); font-weight:600}
.selacts{display:flex; gap:4px}
.selbtn{display:flex; align-items:center; gap:6px; border:0; background:transparent; color:var(--ink);
  font:inherit; font-size:var(--fs-2); font-weight:600; padding:7px 10px; border-radius:var(--r-2); cursor:pointer}
.selbtn:hover{background:var(--surface-2)}
.selbtn i{font-style:normal}
.selbtn:disabled{opacity:.6}
.selclose{position:absolute; top:4px; right:6px; border:0; background:transparent; color:var(--ink-faint); cursor:pointer; font-size:12px}
.selbar[data-mode="dock"]{flex-direction:column; padding:10px 58px 10px 12px; border-radius:var(--r-4)}
.selbar[data-mode="dock"] .selacts{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
.selbar[data-mode="dock"] .selbtn{flex-direction:column; gap:2px; min-height:44px; font-size:10.5px; text-align:center}
.selbar[data-mode="dock"] .selbtn i{font-size:16px}
.toast{bottom:calc(var(--toast-bottom, 26px))}
.toast .tact{margin-left:12px; border:0; background:transparent; color:var(--gold); font:inherit; font-weight:700; cursor:pointer}

/* карточка выписки */
.note .nhead{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.note .src{font-size:var(--fs-1)}
.note .ndate{font-size:var(--fs-1); margin-left:auto}
.note .nq{margin:0; padding:6px 0 6px 12px; border-left:3px solid var(--gold); font-size:var(--fs-3); white-space:pre-wrap}
.note .nnote{margin-top:8px; font-size:var(--fs-2); color:var(--ink-soft); cursor:text}
.note .nnote.empty{color:var(--ink-ghost)}
.note .nnote textarea{font-size:16px}
.note .nacts{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.note.mini .nq{font-size:var(--fs-2); max-height:5.6em; overflow:hidden}
.ntools{display:flex; gap:8px; align-items:center; margin-bottom:16px}
.ntools input{flex:1 1 auto}
.nsec{margin-bottom:22px}
.npanel{display:flex; flex-direction:column; gap:10px}
.nphead{display:flex; align-items:center; gap:8px}
.nphead .npclose{margin-left:auto}
.doc mark.notehit{background:var(--gold-soft); box-shadow:0 0 0 4px var(--gold-soft); border-radius:3px;
  transition:background 1.2s, box-shadow 1.2s}
.doc mark.notehit.fade{background:transparent; box-shadow:none}
@media (max-width:840px){ .selbar[data-mode="float"]{display:none} }
/* уже сохранённые в конспект куски видно прямо в тексте урока */
::highlight(mentor-note){background:color-mix(in srgb,var(--gold) 16%,transparent)}

/* ── Инсайт дня ─────────────────────────────────────────────────────────────*/
.insight .ihead { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  justify-content:space-between; margin-bottom:10px; font-size:var(--fs-3) }
.insight .ithought { margin:0 0 12px; padding:12px 16px; border-left:3px solid var(--gold);
  background:var(--bg-2); border-radius:0 8px 8px 0; font-size:var(--fs-5);
  line-height:1.45; font-weight:600 }
.insight .iwhy, .insight .iact { margin:0 0 10px; font-size:var(--fs-3); line-height:1.55; color:var(--fg-1) }
.insight .iact { color:var(--fg) }
.insight .iacts { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px }
.insight .ifoot { display:flex; gap:10px; align-items:center; justify-content:space-between;
  flex-wrap:wrap; margin-top:16px; padding-top:12px; border-top:1px solid var(--line) }
.inspop { max-width:640px; padding:0 }
.insq .ithought { font-size:var(--fs-4); font-weight:500 }
@media (max-width:560px) {
  .insight .ithought { font-size:var(--fs-4); padding:10px 12px }
  .insight .ihead { font-size:var(--fs-2) }
}

.srcchip { display:inline-block; margin-top:6px; padding:3px 10px; border:1px solid var(--line);
  border-radius:999px; font-size:var(--fs-2); color:var(--fg-1); cursor:pointer; white-space:nowrap }
.srcchip:hover { border-color:var(--gold); color:var(--fg) }

/* Инсайт как сообщение от Макса */
.ava { width:44px; height:44px; border-radius:50%; object-fit:cover; flex:0 0 auto;
  background:var(--bg-2); border:1px solid var(--line) }
.ava.sm { width:22px; height:22px; vertical-align:-6px; margin-right:2px }
.ava.fake { display:flex; align-items:center; justify-content:center; font-weight:700;
  color:#1a1a1a; background:var(--gold); border-color:transparent }
.ava.sm.fake { font-size:12px }
.msghead { display:flex; align-items:center; gap:10px; margin-bottom:12px }
.msghead .who { display:flex; flex-direction:column; line-height:1.25 }
.msghead .who small { color:var(--fg-2); font-size:var(--fs-2) }
.ismsg .bubble { margin:0 0 12px; padding:12px 16px; background:var(--bg-2);
  border-radius:4px 14px 14px 14px; font-size:var(--fs-5); line-height:1.45; font-weight:600 }
@media (max-width:560px) { .ismsg .bubble { font-size:var(--fs-4); padding:10px 12px } }

/* ── Слайды презентаций ─────────────────────────────────────────────────────
   Текст на слайдах курса — картинка, поэтому слайд показывается как есть,
   а разбор глазами лежит рядом подписью и уходит в поиск. */
.srccard .slidepic{display:block; width:100%; max-width:520px; margin:8px 0 2px; border:1px solid var(--line);
  border-radius:var(--r-2); background:#fff; cursor:zoom-in}
.slidedecks{margin-top:28px; padding-top:20px; border-top:1px solid var(--line)}
.deckttl{font-size:var(--fs-5); font-weight:650; margin:22px 0 12px}
.deckttl:first-child{margin-top:0}
.deck{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px}
.slide{margin:0; cursor:zoom-in}
.slide img{width:100%; display:block; border:1px solid var(--line); border-radius:var(--r-2);
  background:#fff; transition:border-color .12s, transform .12s}
.slide:hover img{border-color:var(--gold); transform:translateY(-1px)}
.slide figcaption{font-size:var(--fs-2); color:var(--ink-soft); margin-top:6px; line-height:1.35}
.slide figcaption b{color:var(--ink)}

/* Слайд во весь экран */
.lbox{position:fixed; inset:0; z-index:200; background:rgba(10,12,16,.92);
  display:flex; align-items:center; justify-content:center; gap:8px; padding:24px}
.lbox[hidden]{display:none}
.lbox img{max-width:min(1400px,92vw); max-height:84vh; object-fit:contain; border-radius:var(--r-2); background:#fff}
.lbox .lbcap{position:absolute; left:0; right:0; bottom:16px; text-align:center; color:#E8EAF0;
  font-size:var(--fs-3); padding:0 60px; text-shadow:0 1px 3px rgba(0,0,0,.6)}
.lbclose{position:absolute; top:16px; right:20px; width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; font-size:16px; cursor:pointer}
.lbnav{width:44px; height:64px; border-radius:var(--r-2); border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.07); color:#fff; font-size:26px; line-height:1; cursor:pointer; flex:0 0 auto}
.lbnav:hover, .lbclose:hover{background:rgba(255,255,255,.18)}
.lbnav[hidden]{visibility:hidden; display:block}
body.noscroll{overflow:hidden}
@media (max-width:560px){
  .deck{grid-template-columns:1fr 1fr; gap:10px}
  .lbox{padding:12px}
  .lbnav{width:36px; height:52px; font-size:22px}
}

/* Мысль, снятая с карты урока, а не с речи: без кавычек и без цитатной полосы —
   иначе карточка выдаёт за прямую речь то, чего человек не произносил. */
.insight .ithought.idea, .ismsg .bubble.idea { border-left-color:var(--line); font-weight:600 }
.insight .isrc { margin:-6px 0 10px; font-size:var(--fs-2); color:var(--fg-2) }

/* На телефоне выбор модели съедал целую строку шапки и отжимал ленту вниз на треть экрана.
   Показываем только текущую модель, тап по ней переключает на следующую. */
@media (max-width:560px) {
  .modelsel { padding:2px }
  .modelsel button:not(.on) { display:none }
  .modelsel button.on::after { content:' ⇄'; opacity:.5 }
}

/* Шапка задания на телефоне: три чипа в одну строку вместо трёх строк.
   Подписи прячем, оставляем значки — что это, понятно по месту и по подсказке. */
@media (max-width:560px) {
  #fileBtn .lbl, #dlChat .lbl, #copyBtn .lbl { display:none }
  #dlChat { padding:6px 10px }
  /* Шапка панели «Результат» ломалась на две строки: заголовок, версия и три кнопки
     не влезали в 390. Со значком вместо слова «копировать» и без слова «Результат»
     (оно и так написано на вкладке рядом) строка одна. */
  .artcard > div:first-child .chip{ padding:5px 9px; font-size:var(--fs-2) }
  .artcard > div:first-child > b{ display:none }
  #verBtn{ gap:3px }
}

/* ── Карточка исходника ──────────────────────────────────────────────────────
   Отличается от карточки конспекта нарочно: это первичный материал, и спутать их
   нельзя — иначе непонятно, дословная перед тобой речь или уже пересказ. */
.srccard.raw{border-left:3px solid var(--blue)}
.srccard.raw .anchor{color:var(--gold); font-variant-numeric:tabular-nums}
.srccard.raw .hd .muted{margin-left:6px; font-size:var(--fs-1); text-transform:uppercase; letter-spacing:.04em}
.srccard .bd.raw{white-space:normal; font-size:var(--fs-3); line-height:1.5; color:var(--ink-soft)}

/* ── Схемы и картинки внутри ответа ИИ ───────────────────────────────────────
   Схема из книги нарисована на 800 px. В пузыре шириной 340 она вылезала за край:
   половина рисунка отрезана, подпись обрублена, а лента ездила вбок. Вписываем в
   ширину пузыря. Белая подложка обязательна: линии схемы чёрные, и в тёмной теме
   без неё картинка исчезала бы на чёрном фоне. Тап открывает во весь экран —
   ужатую до 340 px схему иначе не прочитать. */
.msgfig{margin:10px 0 4px}
.msgfig img{display:block; width:100%; height:auto; background:#fff; padding:8px;
  border:1px solid var(--line); border-radius:var(--r-2); cursor:zoom-in}
.msgfig figcaption{font-size:var(--fs-2); color:var(--ink-faint); margin-top:5px; line-height:1.35}
/* Страховка для всего, что придёт картинкой мимо разметки figure. */
.msg img, .doc img, .artcard img{max-width:100%; height:auto}
/* Длинная ссылка или слово в ответе тоже распирали пузырь и уводили экран вбок. */
.msg{overflow-wrap:anywhere}
.msg pre, .msg table{max-width:100%; overflow-x:auto}

/* ── Карточка базы знаний в списке ───────────────────────────────────────────
   На 390 кнопки «открыть» и «удалить» не сжимались и оставляли заголовку 120 px:
   название ломалось по одному слову в строку, карточка вырастала до полуэкрана.
   На телефоне кладём текст и кнопки в две строки, а имя файла (длинный слаг без
   пробелов) разрешаем рвать в любом месте — иначе оно само распирает колонку. */
.frow{display:flex; align-items:center; gap:12px}
.frow .ftxt{flex:1 1 auto; min-width:0}
.frow .fmeta{font-size:var(--fs-2); color:var(--ink-faint); margin-top:3px; overflow-wrap:anywhere}
.frow .fbtns{display:flex; align-items:center; gap:6px; flex:0 0 auto}
@media (max-width:840px){
  .frow{flex-direction:column; align-items:stretch; gap:8px}
  .frow .fbtns{flex-wrap:wrap}
  /* «Удалить» уводим в правый край: под заголовком не должно первым стоять
     необратимое действие — палец идёт туда же, куда читает глаз. */
  .frow .fbtns [data-del]{margin-left:auto}
}
/* Вся карточка и так открывает базу по тапу — на телефоне отдельная кнопка «открыть»
   только занимает место и сбивает с толку. */
@media (max-width:560px){ .frow .fbtns [data-open]{display:none} }

/* ── Выбор нескольких баз знаний ─────────────────────────────────────────────
   Карточка выбранной базы светится золотым — по этому признаку набор читается
   одним взглядом, не вчитываясь в названия. Галочка слева, чтобы на телефоне
   было видно «отмечено», даже когда цвет съедает солнце. */
.fcard{display:flex; align-items:center; gap:10px}
.fcard .tick{flex:0 0 auto; width:22px; height:22px; border-radius:var(--r-1);
  border:1px solid var(--line); display:grid; place-items:center;
  color:var(--gold); font-weight:700; font-size:13px}
.fcard.on{border-color:var(--gold); background:var(--gold-soft)}
.fcard.on .tick{border-color:var(--gold); background:var(--surface)}
.fcard .ft{display:flex; flex-direction:column; min-width:0}
.pickbar{display:flex; align-items:center; gap:8px; margin-top:12px; padding-top:10px;
  border-top:1px solid var(--line-soft)}
.pickbar .muted{flex:1 1 auto; font-size:var(--fs-2)}
/* Число баз на кнопке: на телефоне подпись скрыта, и без цифры набор не прочитать. */
#fileBtn .cnt{margin-left:3px; font-weight:700; color:var(--gold); font-variant-numeric:tabular-nums}

/* ── Что изменилось: подсветка правок в результате ───────────────────────────
   Абзац, которого не было, помечаем полосой и мягким фоном целиком; переписанный —
   только полосой, а новые слова внутри подчёркиваем. Цвет + подчёркивание вместе:
   на телефоне при ярком свете одного фона мало. Гасится глазом в шапке панели. */
.chgblk{border-left:3px solid var(--gold); padding-left:10px; margin:6px 0}
.chgblk.new{background:var(--gold-soft); border-radius:0 var(--r-2) var(--r-2) 0; padding:4px 10px}
#abox mark{background:var(--gold-soft); color:inherit; border-radius:2px; padding:0 2px;
  box-shadow:inset 0 -2px 0 var(--gold)}
.diffnote{font-size:var(--fs-2); color:var(--ink-faint); margin:0 0 8px}
#diffBtn.gold{border-color:var(--gold)}

/* ── Шторка снизу: список версий документа ───────────────────────────────────
   Список версий на телефоне должен быть таким, чтобы по строке попадали пальцем и
   он не съедал экран, — отсюда шторка на 76% высоты с рядами по 54 px. Прибита к
   смотровому окну теми же переменными, что и приложение: с открытой клавиатурой
   обычный fixed уехал бы за край. На широком экране это окно по центру. */
.sheet{position:fixed; left:0; right:0; top:var(--vvtop, 0px); height:min(100dvh, var(--apph, 100dvh));
  background:rgba(10,12,18,.45); z-index:110; display:flex; align-items:flex-end; justify-content:center}
.sheetbox{background:var(--panel); width:100%; max-width:560px; max-height:76%; overflow-y:auto;
  border-radius:var(--r-4) var(--r-4) 0 0; box-shadow:var(--shadow-lift);
  padding:14px 14px calc(14px + env(safe-area-inset-bottom))}
.sheethead{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.sheethead b{flex:1 1 auto; font-size:var(--fs-5)}
.vlist{display:flex; flex-direction:column; gap:6px}
.vrow{display:flex; align-items:center; gap:12px; width:100%; text-align:left; min-height:54px;
  padding:8px 12px; border:1px solid var(--line); border-radius:var(--r-3);
  background:var(--surface-2); color:var(--ink); cursor:pointer; font-size:var(--fs-4)}
.vrow:hover{border-color:var(--ink-faint)}
.vrow .vnum{flex:0 0 auto; min-width:36px; font-weight:700; color:var(--gold); font-variant-numeric:tabular-nums}
.vrow .vmid{display:flex; flex-direction:column; flex:1 1 auto; min-width:0}
.vrow .vmid small{color:var(--ink-faint); font-size:var(--fs-2); margin-top:2px}
.vrow .vnow{flex:0 0 auto; font-size:var(--fs-2); color:var(--ink-faint)}
.vrow .vgo{flex:0 0 auto; color:var(--ink-faint); font-size:18px}
@media (min-width:841px){ .sheet{align-items:center} .sheetbox{border-radius:var(--r-4)} }
/* Карандаш правок висит поверх всего и садился на последнюю строку списка версий. */
html:has(.sheet) #pravki-widget-host{display:none}

/* Полоса «смотришь старую версию» — над документом, мимо неё не пролистать. */
.peekbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex:0 0 auto; margin-bottom:8px;
  padding:8px 10px; border:1px solid var(--gold); border-radius:var(--r-3);
  background:var(--gold-soft); font-size:var(--fs-3)}
.peekbar .sp{flex:1 1 auto}
.peekbar .pt{white-space:nowrap}
.peekbar .chip[disabled]{opacity:.35; pointer-events:none}
/* «Вернуть эту» — главное действие полосы, а золотой чип на золотом фоне сливался. */
.peekbar [data-back]{background:var(--gold); border-color:var(--gold); color:#fff; font-weight:600}

/* Разговоры внутри задания: полоса под вкладками, прокручивается вбок и не переносится,
   иначе на телефоне она отжимает ленту вниз при пяти-шести разговорах. */
.taskchats { display:flex; gap:6px; overflow-x:auto; padding:2px 0 8px; scrollbar-width:none }
.taskchats::-webkit-scrollbar { display:none }
.taskchats .chip { flex:0 0 auto; max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }


/* ── Редактор текстов ────────────────────────────────────────────────────────
   Стол для всех текстов платформы. Всё, что можно, берётся готовыми классами:
   .card, .chip, .btn, .doc, .sheet, .vlist, .chgblk, .modesel, .searchov. */

/* Стол: библиотека слева, документ справа */
.edwrap{display:flex; gap:16px; flex:1 1 auto; min-height:0}
.edwrap > *{min-width:0}
.edlib{width:250px; flex:0 0 auto; display:flex; flex-direction:column; gap:2px; overflow-y:auto}
.libtop{position:sticky; top:0; z-index:2; background:var(--panel); padding:0 0 8px; display:flex; gap:6px}
.libtop input{flex:1 1 auto; height:34px; padding:0 10px; font-size:16px}
.libtop button{flex:0 0 auto; height:34px; padding:0 11px; border-radius:var(--r-2); border:0;
  background:var(--dark); color:var(--dark-ink); font-weight:700; cursor:pointer; font-family:inherit; font-size:14px}
.libempty{padding:14px 10px; font-size:var(--fs-3); color:var(--ink-faint)}
.edcol{flex:1 1 auto; display:flex; flex-direction:column; min-width:0; min-height:0}
/* 320 px мало для ряда «модели + поле + кнопка»: поле сжималось в колонку из букв.
   Поле получает свою строку, переключатель моделей и «отправить» — вторую. */

/* Группы библиотеки */
.libgrp{font-size:var(--fs-1); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint);
  padding:12px 10px 5px; display:flex; align-items:center; gap:6px}
.libgrp .n{margin-left:auto; font-variant-numeric:tabular-nums; letter-spacing:0}
.librow{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--r-2); cursor:pointer;
  font-size:var(--fs-3); color:var(--ink-soft); border:1px solid transparent; text-align:left; background:transparent; width:100%}
.librow:hover{background:var(--surface-2)}
.librow.on{background:var(--surface-2); color:var(--ink); border-color:var(--line); font-weight:600}
.librow .t{flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.librow .ic{flex:0 0 auto}
.librow .sz{flex:0 0 auto; font-size:var(--fs-1); color:var(--ink-ghost); font-variant-numeric:tabular-nums}

/* Вкладки открытых документов — поверх готовой .taskchats */
.edtabs{display:flex; gap:6px; overflow-x:auto; padding:0 0 10px; scrollbar-width:none;
  flex:0 0 auto; min-height:38px;   /* иначе колонка ужимает ленту первой и вкладки срезает */
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
/* Компактный селектор документа — только для телефона */
.edpick{display:none; align-items:center; gap:8px; width:100%; padding:8px 10px; margin-bottom:10px;
  border:1px solid var(--line); border-radius:var(--r-2); background:var(--surface); color:var(--ink);
  font-size:var(--fs-3); font-weight:600; cursor:pointer; text-align:left;
  border-left:3px solid var(--pc,var(--ink-ghost))}
.edpick .t{flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.edpick .cnt{flex:0 0 auto; font-size:var(--fs-1); color:var(--ink-faint); font-variant-numeric:tabular-nums}
.edpick .dot{width:6px; height:6px; border-radius:50%; background:var(--gold); flex:0 0 auto}
.edtabs::-webkit-scrollbar{display:none}
.edtab{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:var(--r-2);
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink-soft); cursor:pointer;
  font-size:var(--fs-2); font-weight:600; white-space:nowrap; flex:0 0 auto; position:relative;
  border-left:3px solid var(--pc,var(--ink-ghost))}
.edtab.on{background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}
.edtab .t{max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.edtab .dot{width:6px; height:6px; border-radius:50%; background:var(--gold); flex:0 0 auto}
.edtab .x{color:var(--ink-ghost); font-size:13px}

/* Шапка документа */
.edhead{flex:0 0 auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-bottom:8px}
/* Длинное имя документа уводило кнопки на вторую строку и ело высоту стола */
.edhead > b{font-size:var(--fs-4); flex:1 1 200px; min-width:120px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* Заголовок берёт остаток строки, но ужимается до 120 px: при flex:1 1 auto он занимал
   всю ширину и выталкивал «Сохранить» на вторую строку. */
.edsub{font-size:var(--fs-2); color:var(--ink-faint); width:100%; margin-top:-4px}
.edstate{font-size:var(--fs-2); color:var(--ink-faint); flex:0 0 auto; white-space:nowrap}
.edstate.dirty{color:var(--gold); font-weight:600}

/* Поле правки и предпросмотр */
.edbody{flex:1 1 auto; min-height:120px; overflow-y:auto; border:1px solid var(--line); border-radius:var(--r-3);
  background:var(--surface); padding:16px}
.edta{width:100%; height:100%; min-height:260px; border:0; padding:0; resize:none; outline:none;
  background:transparent; color:var(--ink); font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px; line-height:1.7}
.edfoot{flex:0 0 auto; display:flex; align-items:center; gap:8px; padding-top:10px; flex-wrap:wrap}

/* Полоса выделения — загорается, когда что-то выделено */
.selstrip{flex:0 0 auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:8px 10px; margin-bottom:8px;
  border-radius:var(--r-2); background:var(--gold-soft); border:1px solid transparent}
.selstrip .chip{padding:3px 9px}
.selstrip .q{flex:1 1 90px; font-size:var(--fs-2); color:var(--gold); font-weight:600; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}

/* Корзина сборки — обычный последний ряд колонки, не sticky */
.tray{flex:0 0 auto; border-top:1px solid var(--line); background:var(--panel); margin-top:12px;
  border-radius:var(--r-3) var(--r-3) 0 0; border:1px solid var(--line); border-bottom:0}
.trayhead{display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; flex-wrap:wrap}
.trayhead b{font-size:var(--fs-3)}
.traybody{border-top:1px solid var(--line-soft); padding:8px 10px 12px; max-height:230px; overflow-y:auto}
.trayrow{display:flex; align-items:center; gap:8px; padding:8px 8px; border-radius:var(--r-2); font-size:var(--fs-3)}
.trayrow:hover{background:var(--surface-2)}
.trayrow .g{color:var(--ink-ghost); cursor:grab; flex:0 0 auto}
.trayrow .tx{flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink)}
.trayrow .from{flex:0 0 auto; font-size:var(--fs-1); padding:2px 7px; border-radius:var(--r-pill);
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink-soft)}
.trayrow .mv,.vrow .mv{display:flex; gap:4px; flex:0 0 auto}
.trayrow .mv button,.vrow .mv button{border:0; background:var(--surface-2); color:var(--ink-soft);
  cursor:pointer; font-size:14px; width:36px; height:36px; border-radius:var(--r-2); font-family:inherit}
.trayrow .mv button:hover,.vrow .mv button:hover{background:var(--surface-3); color:var(--ink)}
.trayflash{animation:trayfl .7s}
@keyframes trayfl{0%,100%{background:var(--panel)} 35%{background:var(--gold-soft)}}

/* Карточка «было/стало» */
  color:var(--gold); font-size:var(--fs-2); font-weight:700}

/* Ожидание ИИ */
  background:var(--surface-2); border:1px solid var(--line); font-size:var(--fs-2); color:var(--ink-soft); margin:10px 0}
@keyframes run{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}

/* Плашка «только чтение» */
.robar{flex:0 0 auto; display:flex; gap:8px; align-items:flex-start; padding:10px 12px; border-radius:var(--r-2);
  background:var(--surface-2); border:1px solid var(--line); font-size:var(--fs-2); color:var(--ink-soft); margin-bottom:10px}

/* Пустое состояние */

/* Мобильная посадка макета */
@media (max-width:840px){
  .edwrap{flex-direction:column; gap:0}
  .edlib{display:none}
  /* Лента вкладок на 390 px не помещалась: 670 px содержимого резались посреди слова
     и читались как поломка. На телефоне — один компактный селектор со списком по тапу. */
  .edtabs{display:none}
  .edpick{display:flex}
  /* Имя документа уже стоит в селекторе выше — в шапке оно только дублировало
     и уводило кнопки на вторую строку */
  .edhead > b{display:none}
  .edwrap.show-ai .edcol{display:none}
  .edta{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:16px; line-height:1.6}
  .mobbar{display:flex !important}
  /* Две полосы снизу (своя панель + корзина) съедали треть экрана и дублировали друг друга.
     На телефоне корзина живёт шторкой, её открывает 🧺 в нижней панели. */
  .tray{display:none}
  /* Шапка документа в две строки ела высоту: редкое уезжает в «⋯», как в задании */
  .edhead .hide-mob{display:none !important}
}
/* Пальцем в чип высотой 23 px не попасть — на телефоне поднимаем всё, что нажимают */
@media (max-width:840px){
  .edhead .chip,.edfoot .chip,.peekbar .chip{min-height:44px; padding:0 14px; align-items:center}
  .modesel button{min-height:44px; padding:0 14px}
  .mobbar .btn{min-height:46px}
  .vrow .mv button{width:44px; height:44px}
}
.mobbar{display:none; flex:0 0 auto; gap:8px; align-items:center;
  padding:10px 62px calc(6px + env(safe-area-inset-bottom)) 0;
  border-top:1px solid var(--line); background:var(--bg); margin-top:8px}
/* Правый нижний угол занят карандашом правок — крайняя кнопка уходит из-под него */
.mobbar .btn{flex:1 1 auto; justify-content:center}

/* Превью сборки: раньше окно резало текст без единого признака — ни полосы прокрутки,
   ни затемнения края, — и человек решал, что сборка потеряла половину кусков. */
.buildprev{padding:0 16px; max-height:52vh; overflow-y:auto; scrollbar-width:thin;
  border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 28px),transparent)}
.buildprev::-webkit-scrollbar{width:10px}
.buildprev::-webkit-scrollbar-thumb{background:var(--ink-ghost); border-radius:6px;
  border:3px solid var(--surface)}
.buildhint{padding:8px 16px 0; font-size:var(--fs-2); color:var(--ink-faint)}

/* Длинное слово (имя файла расшифровки в уроке) уезжало за край блока */
.doc{overflow-wrap:anywhere}

/* Пустой стол */
.edempty{padding:28px 16px; max-width:520px}
.edempty h2{margin:0 0 8px; font-size:var(--fs-6)}
.edempty p{margin:0 0 16px; font-size:var(--fs-3)}
.ed-inner{max-width:none; height:100%; display:flex; flex-direction:column}
#edoc mark{background:var(--gold-soft); color:var(--ink); border-radius:3px; padding:0 2px}