/* css/chat.css — экраны «Учёбы Влада»: вход, плитки, чат, родитель.
   Только токены из tokens.css; цвета предметов --ru и --world заведены здесь по схеме --math / --en. */

:root {
  --ru: #0e7c86;
  --ru-soft: #dff1f3;
  --ru-ink: #08474d;
  --ru-desk: #e4f0f2;
  --world: #b8436b;
  --world-soft: #f8e5ec;
  --world-ink: #6e2039;
  --world-desk: #f6e9ee;
}
:root[data-theme='dark'] {
  --ru: #6fd3dc; --ru-soft: #17303a; --ru-ink: #bdeff3; --ru-desk: #14222a;
  --world: #f19ab8; --world-soft: #3a2230; --world-ink: #ffd2e1; --world-desk: #241a21;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme='auto'], :root:not([data-theme]) {
    --ru: #6fd3dc; --ru-soft: #17303a; --ru-ink: #bdeff3; --ru-desk: #14222a;
    --world: #f19ab8; --world-soft: #3a2230; --world-ink: #ffd2e1; --world-desk: #241a21;
  }
}
[data-subject='ru'], [data-subject='world'] {
  --focus: var(--subj);
  --step-main: color-mix(in srgb, var(--subj) 60%, #000);
  --bp-bg: var(--desk-subj);
  --bp-accent: var(--subj);
  --bp-on-accent: var(--on-subj);
  --bp-accent-soft: var(--subj-soft);
}
[data-subject='ru'] { --subj: var(--ru); --subj-soft: var(--ru-soft); --subj-ink: var(--ru-ink); --desk-subj: var(--ru-desk); }
[data-subject='world'] { --subj: var(--world); --subj-soft: var(--world-soft); --subj-ink: var(--world-ink); --desk-subj: var(--world-desk); }

body { background: var(--desk); }

.form-note {
  margin: var(--s3) 0 0;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: var(--warm-soft);
  color: var(--warm-ink);
  font-size: var(--fs-body);
  font-weight: 700;
}
.empty-note { color: var(--ink-2); }

/* ---------- вход ---------- */
.login-screen { display: grid; place-items: center; min-height: 100dvh; }
.login-card {
  width: min(520px, 100%);
  background: var(--surface);
  box-shadow: var(--shadow-page);
  padding: var(--panel-pad);
  display: grid;
  gap: var(--s4);
}
.login-title { font-size: var(--fs-h1); font-weight: 900; line-height: var(--lh-tight); margin: 0; }
.login-lead { margin: 0; color: var(--ink-2); font-size: var(--fs-lead); }
.pw-input {
  width: 100%;
  min-height: var(--h-btn);
  padding: 0 var(--s4);
  border: 2px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-lead);
  font-weight: 700;
}
.pw-input:focus { outline: none; border-color: var(--subj); box-shadow: 0 0 0 3px var(--subj-soft); }

/* ---------- главный ---------- */
.home-screen { min-height: 100dvh; }
.header-actions { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: flex-end; }
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--s3);
  min-height: clamp(170px, 22vw, 280px);
  padding: var(--panel-pad);
  border-radius: var(--r-lg);
  background: var(--subj-soft);
  color: var(--subj-ink);
  border: 2px solid color-mix(in srgb, var(--subj) 30%, var(--subj-soft));
  box-shadow: var(--shadow-2);
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease-out);
}
a.tile:hover { transform: translateY(-2px); }
a.tile:active { transform: scale(0.98); }
.tile-icon { font-size: clamp(44px, 5vw, 72px); line-height: 1; }
.tile-name { font-size: var(--fs-h3); font-weight: 900; line-height: var(--lh-tight); overflow-wrap: break-word; hyphens: manual; }
/* Плашка внизу плитки: названия всех предметов стоят на одной высоте под значком. */
.tile-tag {
  margin-top: auto;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--fs-cap);
  font-weight: 800;
}
.tile-tag--open { background: var(--warm-soft); color: var(--warm-ink); }
.tile.is-soon { background: var(--surface-2); border-color: var(--line); color: var(--ink-2); box-shadow: none; opacity: 0.8; }
.tile.is-soon .tile-icon { filter: grayscale(1); opacity: 0.6; }
.tile.is-soon { cursor: default; }
@media (max-width: 480px) {
  .tile { padding: var(--s4) var(--s3); }
  .tile-name { font-size: var(--fs-lead); }
}

/* ---------- чат ---------- */
.chat-screen {
  position: fixed;
  top: var(--vvt, 0px);
  left: 0;
  right: 0;
  height: var(--vvh, 100dvh);
  display: flex;
  flex-direction: column;
  background: var(--desk-subj);
  overflow: hidden;
}
.chat-header {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 60px;
  padding: calc(var(--s1) + env(safe-area-inset-top, 0px)) var(--gutter) var(--s1);
  background: var(--surface);
  border-bottom: 2px solid var(--line);
}
.chat-header .icon-btn { color: var(--subj-ink); flex: none; width: var(--h-btn); height: var(--h-btn); min-width: var(--h-btn); }
.chat-title { margin: 0; font-size: var(--fs-h3); font-weight: 900; line-height: var(--lh-tight); color: var(--subj-ink); }
.chat-title-icon { font-size: var(--fs-h3); line-height: 1; }
.chat-new { margin-left: auto; flex: none; min-height: var(--h-btn); padding: 0 var(--s3); font-size: var(--fs-body); white-space: nowrap; }
.chat-new[hidden] { display: none; }
.chat-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-title-short { display: none; }
@media (max-width: 480px) {
  .chat-title-icon { display: none; }
  /* 0.4.4: короткое название («Английский»), длинное переносится на вторую строку, без многоточия. */
  .chat-title { white-space: normal; text-overflow: clip; overflow-wrap: break-word; }
  .chat-title.has-short .chat-title-full { display: none; }
  .chat-title.has-short .chat-title-short { display: inline; }
  .chat-new { white-space: normal; text-align: center; line-height: 1.1; max-width: 6.5em; padding: 0 var(--s2); font-size: var(--fs-cap); }
}

.subparts {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  padding: var(--s2) var(--gutter);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  max-height: 25vh;
  overflow-y: auto;
}
.subpart {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--fs-body);
  font-weight: 800;
  white-space: nowrap;
}
.subpart.is-в_работе { border-color: var(--subj); background: var(--subj-soft); color: var(--subj-ink); }
.subpart.is-верно { border-color: var(--ok); background: var(--ok-soft); color: var(--ok-ink); }
.subpart.is-закрепление { border-color: var(--warm); background: var(--warm-soft); color: var(--warm-ink); }
.subpart.is-пропущен { opacity: 0.7; }
/* 0.4.9: подпункты и номера — кнопки: нажатие даёт выбор номера или подсказку. */
button.subpart { font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.subpart:focus-visible { outline: 3px solid var(--subj); outline-offset: 2px; }
.subpart.is-number.is-новый { border-style: dashed; }

.feed {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--s4) var(--gutter);
}
.feed-list {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.msg { max-width: 92%; border-radius: var(--r-lg); padding: var(--s3) var(--s4); box-shadow: var(--shadow-1); overflow-wrap: anywhere; }
.msg p { margin: 0 0 0.5em; }
.msg p:last-child { margin-bottom: 0; }
.msg-tutor { align-self: flex-start; background: var(--surface); border: 2px solid var(--line); }
.msg-tutor .msg-text { font-size: var(--fs-lead); line-height: var(--lh-text); }
.msg-vlad { align-self: flex-end; background: var(--subj-soft); color: var(--subj-ink); font-size: var(--fs-lead); line-height: var(--lh-text); }
.msg-system { align-self: center; background: var(--warm-soft); color: var(--warm-ink); font-size: var(--fs-body); font-weight: 700; box-shadow: none; text-align: center; }
.msg-meta { display: block; margin-top: 4px; font-size: var(--fs-cap); color: var(--ink-2); opacity: 0.85; text-align: right; }
/* Кнопки выбора под первой репликой по заданию (0.4.5): крупные, как кнопки панели ввода. */
.msg-choice { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
/* «Сам», «По шагам», «Объясни тему» (0.4.7): кнопки одной высоты, подпись в одну строку без переноса слов;
   на узком экране кнопка, которая не помещается, переходит на следующую строку во всю ширину. */
.msg-choice-btn { flex: 1 1 auto; min-height: var(--h-btn); white-space: nowrap; }
/* Кнопки номеров с фото (0.4.6): той же высоты, до четырёх в ряд на телефоне. */
.msg-choice-num .msg-choice-btn { flex: 1 1 72px; font-weight: 700; }
.msg-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s2); }
.msg-foot .msg-meta { margin: 0; white-space: nowrap; flex: none; align-self: flex-end; }
.msg-photo { display: block; margin-bottom: var(--s2); }
.msg-photo img { display: block; width: min(320px, 100%); height: 220px; object-fit: contain; border-radius: var(--r-md); background: var(--surface); }
.speak-btn { min-height: var(--h-btn); padding: 0 var(--s4); font-size: var(--fs-btn); }
.speak-btn[aria-pressed='true'] { border-color: var(--subj); background: var(--subj-soft); color: var(--subj-ink); }
.feed-empty { align-self: center; padding: var(--s6) var(--s4); text-align: center; color: var(--ink-2); font-size: var(--fs-lead); }

.chat-bottom {
  flex: none;
  background: var(--surface);
  border-top: 2px solid var(--line);
  padding: var(--s2) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom, 0px));
}
.chat-status, .chat-notice, .composer { width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; }
.chat-status {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s2);
  padding: var(--s2) var(--s4);
  border-radius: var(--r-md);
  color: var(--subj-ink);
  font-size: var(--fs-lead);
  font-weight: 800;
}
/* «Репетитор думает…»: крупная заметная плашка с бегущими точками. */
.chat-status.is-busy { background: var(--subj-soft); border: 2px solid color-mix(in srgb, var(--subj) 40%, var(--subj-soft)); }
.chat-status.is-warm { color: var(--warm-ink); background: var(--warm-soft); border-color: transparent; }
.dots { display: inline-flex; gap: 6px; align-items: center; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: currentColor; animation: dot 1.2s infinite ease-in-out both; }
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) {
  .dots i { animation: none; opacity: 0.8; }
}
.chat-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  margin-bottom: var(--s2);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-md);
  background: var(--warm-soft);
  color: var(--warm-ink);
  font-size: var(--fs-body);
  font-weight: 700;
}
.chat-notice-text { flex: 1 1 12em; }
.chat-retry { flex: none; }
.chat-notice.is-info { background: var(--subj-soft); color: var(--subj-ink); }

.composer { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.composer > * { min-width: 0; }
.composer-input {
  width: 100%;
  min-height: var(--h-btn);
  max-height: 150px;
  padding: 14px var(--s4);
  resize: none;
  border: 2px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: max(16px, var(--fs-body)); /* 16px и больше: iOS не увеличивает страницу при фокусе */
  line-height: 1.3;
}
.composer-input:focus { outline: none; border-color: var(--subj); box-shadow: 0 0 0 3px var(--subj-soft); }
.composer-row { display: flex; gap: var(--s2); }
.composer-btn { flex: 1; min-width: 0; padding: 0 var(--s3); }
.composer-send { flex: 1.3; }
.composer-btn .icon { width: 1.3em; height: 1.3em; flex: none; }
.composer-btn:disabled { opacity: 0.45; cursor: default; }
.composer-btn.is-recording { background: var(--warm-ink); color: var(--warm-soft); border-color: var(--warm-ink); }
.rec-note { display: flex; align-items: center; min-height: var(--h-btn); padding: var(--s2) var(--s3); border-radius: var(--r-md); background: var(--warm-soft); color: var(--warm-ink); font-size: var(--fs-body); font-weight: 800; }
.photo-preview {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.photo-preview img { width: 96px; height: 96px; object-fit: contain; background: var(--paper, #fff); border-radius: var(--r-sm); flex: none; }
.photo-preview-text { flex: 1; min-width: 0; display: grid; font-size: var(--fs-cap); }
.photo-preview-text span { color: var(--ink-2); }

/* Телефон: значок над подписью — подписи «Фото», «Микрофон», «Отправить» не упираются в края кнопок. */
@media (max-width: 480px) {
  .msg-choice-btn { min-height: 64px; }
  .composer-btn { flex-direction: column; gap: 2px; min-height: 64px; padding: var(--s1) var(--s1); font-size: var(--fs-cap); }
  .composer-btn .icon { width: 24px; height: 24px; }
  .composer-send { flex: 1.2; }
  .msg { max-width: 96%; }
}
@media (max-height: 520px) {
  .chat-header { min-height: 48px; }
  .subparts { max-height: 18vh; }
}

/* ---------- родитель ---------- */
.parent-screen { min-height: 100dvh; }
.parent-bar { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: center; justify-content: space-between; margin-bottom: var(--s4); }
.seg-chips, .period-nav { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.period-label { min-width: 12ch; text-align: center; font-weight: 800; font-size: var(--fs-body); }
.chip:disabled { opacity: 0.45; cursor: default; }
.parent-body, .parent-tasks, .parent-status, .task-card .card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.parent-body { padding: var(--panel-pad); }
.parent-tasks, .parent-status { margin-top: var(--gap); padding: var(--panel-pad); }
.task-links { display: flex; flex-wrap: wrap; gap: var(--s2); }
.md h2, .md h3, .md h4 { font-weight: 900; line-height: 1.2; margin: 1.2em 0 0.5em; }
.md h2 { font-size: var(--fs-h3); }
.md h3 { font-size: var(--fs-lead); }
.md > :first-child { margin-top: 0; }
.md ul, .md ol { padding-left: 1.3em; margin: 0 0 0.8em; }
.md li { margin-bottom: 0.3em; }
.md-table-wrap { overflow-x: auto; margin-bottom: 1em; }
.md-table { border-collapse: collapse; min-width: 100%; font-size: var(--fs-cap); }
.md-table th, .md-table td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; vertical-align: top; }
.md-table th { background: var(--surface-2); }
.task-card { display: grid; gap: var(--gap); }
.task-card .card { padding: var(--panel-pad); }
.sub-card h3 { display: flex; justify-content: space-between; gap: var(--s3); margin: 0 0 var(--s3); font-size: var(--fs-lead); }
.sub-status { color: var(--ink-2); font-size: var(--fs-cap); font-weight: 800; }
.sub-card dl { margin: 0; display: grid; gap: var(--s2); }
.kv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
@media (min-width: 700px) { .kv { grid-template-columns: 16em minmax(0, 1fr); gap: var(--s4); } }
.kv dt { color: var(--ink-2); font-size: var(--fs-cap); font-weight: 800; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.task-feed { max-height: 60vh; border-radius: var(--r-lg); background: var(--desk-subj); }

/* ---------- режим «Читаем текст» (0.4.0) ---------- */
.chat-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-main > .feed { flex: 1; }
.chat-tabs {
  flex: none;
  display: flex;
  gap: var(--s2);
  padding: var(--s2) var(--gutter);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.chat-tabs[hidden] { display: none; }
.chat-tab { flex: 1; min-height: var(--h-btn); font-size: var(--fs-btn); font-weight: 800; justify-content: center; }
.chat-tab[aria-pressed='true'] { border-color: var(--subj); background: var(--subj-soft); color: var(--subj-ink); }
.reading-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--s4) var(--gutter);
}
.reading-scroll[hidden] { display: none; }
.chat-screen.has-reading[data-tab='text'] .chat-main > .feed { display: none; }
.chat-screen.has-reading[data-tab='chat'] .reading-scroll { display: none; }
.chat-screen.has-reading[data-tab='text'] .composer { display: none; }
@media (min-width: 1100px) {
  .chat-screen.has-reading[data-tab] .chat-tabs { display: none; }
  .chat-screen.has-reading[data-tab] .chat-main { flex-direction: row; }
  .chat-screen.has-reading[data-tab] .chat-main > .reading-scroll { display: block; flex: 1.25; border-right: 2px solid var(--line); }
  .chat-screen.has-reading[data-tab] .chat-main > .feed { display: block; flex: 1; }
  .chat-screen.has-reading[data-tab] .composer { display: grid; }
}

.reading { width: 100%; max-width: 860px; margin: 0 auto; display: grid; gap: var(--gap); }
.read-head { display: grid; gap: var(--s1); }
.read-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.read-badge {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s3);
  border-radius: 999px; background: var(--ok-soft); color: var(--ok-ink);
  font-size: var(--fs-body); font-weight: 800;
}
.read-title { margin: 0; font-size: var(--fs-h3); font-weight: 900; line-height: var(--lh-tight); color: var(--subj-ink); }
.read-name { margin: 0; font-size: var(--fs-lead); font-weight: 800; }
.read-lead { margin: 0; color: var(--ink-2); font-size: var(--fs-body); font-weight: 700; }
.read-sent {
  position: relative;
  display: grid;
  gap: var(--s3);
  padding: var(--s4) var(--s4) var(--s4) calc(var(--s3) + 44px + var(--s3));
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 2px solid var(--line);
  box-shadow: var(--shadow-1);
}
.read-sent.is-active { border-color: var(--warm); }
.read-sent.is-done { border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); }
.read-side {
  position: absolute;
  left: var(--s3);
  top: var(--s4);
  display: grid;
  justify-items: center;
  gap: var(--s2);
}
.read-num {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--subj-soft);
  color: var(--subj-ink);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 900;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.read-num:disabled { cursor: default; opacity: 0.6; }
.read-num.is-on { background: var(--warm-soft); border-color: var(--warm); color: var(--warm-ink); }
.read-num:focus-visible, .read-ru:focus-visible { outline: 3px solid var(--focus, var(--subj)); outline-offset: 2px; }
.read-ru {
  min-width: 44px;
  height: 32px;
  padding: 0 6px;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-cap);
  font-weight: 800;
  cursor: pointer;
}
.read-ru.is-on { border-color: var(--subj); background: var(--subj-soft); color: var(--subj-ink); }
.read-text {
  margin: 0;
  font-size: calc(var(--fs-lead) * 1.35);
  line-height: 1.5;
  font-weight: 800;
  color: var(--ink);
  overflow-wrap: anywhere;
  /* 0.4.4: обычный текст по левому краю, ровные интервалы, перенос без растягивания строки. */
  text-align: left;
  text-align-last: auto;
  text-justify: none;
  word-spacing: normal;
  hyphens: none;
}
.read-word {
  display: inline-flex;
  align-items: center;
  min-height: var(--h-btn);
  /* 0.4.4: внутренний отступ кнопки частично гасится отрицательным полем — между словами обычный
     пробел и 2 px с каждой стороны, а не 12 px сверх пробела (на 390 текст выглядел растянутым). */
  margin: 2px -3px;
  padding: 0 4px;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
}
/* 0.4.14: подсветка наведением — только у мыши; на телефоне после нажатия она «залипала» (user-tester 0.4.13). */
@media (hover: hover) { .read-word:hover { background: var(--subj-soft); } }
.read-punct { margin-left: 0; }
.read-wp { white-space: nowrap; }
.read-word:focus-visible { outline: 3px solid var(--focus, var(--subj)); outline-offset: 1px; }
.read-word.has-help { text-decoration: underline dotted var(--subj); text-underline-offset: 6px; }
.read-word.is-miss { text-decoration: underline wavy var(--warm); text-underline-offset: 6px; }
.read-word.is-hard { background: var(--warm-soft); color: var(--warm-ink); }
.read-word.is-pick { border-style: dashed; border-color: var(--subj); background: var(--subj-soft); }
.read-word.is-focus { background: var(--subj); color: var(--on-subj, #fff); }
.read-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.read-btn { flex: 1 1 auto; min-height: var(--h-btn); padding: 0 var(--s4); font-size: var(--fs-btn); }
.read-btn.is-recording { background: var(--warm-ink); color: var(--warm-soft); border-color: var(--warm-ink); box-shadow: 0 2px 0 var(--warm); }
.read-btn:disabled { opacity: 0.45; cursor: default; }
.read-playing, .read-hint, .read-done {
  flex: 1 1 100%;
  margin: 0;
  display: flex;
  align-items: center;
  min-height: var(--h-btn);
  padding: 0 var(--s3);
  border-radius: var(--r-md);
  font-size: var(--fs-lead);
  font-weight: 800;
}
.read-playing { background: var(--subj-soft); color: var(--subj-ink); }
.read-hint { background: var(--warm-soft); color: var(--warm-ink); }
.read-done { flex: 1 1 auto; background: var(--ok-soft); color: var(--ok-ink); }
.read-focus {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3);
  border-radius: var(--r-md);
  background: var(--subj-soft);
  color: var(--subj-ink);
}
.read-focus-text { flex: 1 1 100%; font-size: var(--fs-lead); font-weight: 800; }
.read-help {
  padding: var(--s3) var(--s4);
  border-left: 5px solid var(--subj);
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: var(--fs-lead);
  line-height: var(--lh-text);
}
.read-help p { margin: 0 0 0.4em; }
.read-help p:last-child { margin-bottom: 0; }
.read-help.is-wait { color: var(--ink-2); }
.read-help-word { display: inline-block; margin-bottom: 4px; font-size: var(--fs-cap); font-weight: 900; color: var(--subj-ink); }
.read-round {
  display: grid;
  gap: var(--s2);
  padding: var(--s3);
  border-radius: var(--r-md);
  background: var(--warm-soft);
  color: var(--warm-ink);
}
.read-round p { margin: 0; font-size: var(--fs-lead); font-weight: 800; }
.read-round-word { font-size: calc(var(--fs-lead) * 1.35); }
.read-round-count { font-size: var(--fs-body); }
.read-round.is-ok { background: var(--ok-soft); color: var(--ok-ink); }
.read-round.is-hard { background: var(--surface-2); color: var(--ink); }
/* 0.4.2: «Читаем вместе», подсветка звучащего слова, темп, карточка слова, перевод */
.read-word.is-now {
  background: var(--warm-soft);
  border-color: var(--warm);
  color: var(--warm-ink);
  box-shadow: inset 0 -5px 0 var(--warm);
}
.read-tr {
  margin: 0;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: var(--lh-text);
}
.read-tx { margin: 0; font-size: var(--fs-lead); font-weight: 700; color: var(--ink); }
.read-tx b { font-size: calc(var(--fs-lead) * 1.2); }
.read-stop { flex: 0 1 auto; }
@media (max-width: 480px) {
  .read-sent { padding: var(--s3) var(--s3) var(--s3) calc(8px + 44px + var(--s2)); }
  .read-side { left: 8px; top: var(--s3); }
  .read-btn { padding: 0 var(--s3); }
}

/* родитель: текст для чтения и записи */
.parent-reading .read-text { font-size: var(--fs-lead); }
.parent-reading ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s2); }
.parent-reading audio { display: block; width: min(360px, 100%); margin-top: 4px; }

/* 0.4.4: индикатор записи «Читаю сам», пояснение незаконченной отработки, прокрутка активного блока */
.read-sent, .read-round { scroll-margin: var(--s3) 0 var(--s4); }
.read-rec {
  flex: 1 1 100%;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: var(--h-btn);
  padding: 0 var(--s3);
  border-radius: var(--r-md);
  border: 2px solid var(--warm);
  background: var(--warm-soft);
  color: var(--warm-ink);
  font-size: var(--fs-lead);
  font-weight: 800;
  line-height: var(--lh-tight);
}
.read-rec-text { flex: 1 1 auto; padding: var(--s1) 0; }
.read-rec-dot {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--warm);
  animation: rec-pulse 1s ease-in-out infinite;
}
@keyframes rec-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.75); } }
.read-rec-meter {
  flex: 0 0 72px;
  height: 12px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--warm) 50%, var(--warm-soft));
  overflow: hidden;
}
.read-rec-meter i {
  display: block;
  height: 100%;
  width: calc(8% + var(--lvl, 0) * 92%);
  background: var(--warm);
  border-radius: inherit;
  transition: width 80ms linear;
}
.read-round-lead { font-size: var(--fs-body) !important; font-weight: 700 !important; }
@media (max-width: 480px) {
  .read-rec { gap: var(--s2); }
  .read-rec-meter { flex-basis: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .read-rec-dot { animation: none; }
  .read-rec-meter i { transition: none; }
}

/* 0.4.8: шапка страницы родителя на узком экране — заголовок отдельной строкой, кнопки переносятся (без горизонтальной прокрутки). */
.parent-screen .screen-header { flex-wrap: wrap; row-gap: var(--s2); }
.parent-screen .screen-header-right { flex: 1 1 auto; min-width: 0; }
@media (max-width: 640px) {
  .parent-screen .screen-header-titles { order: -1; flex: 1 1 100%; padding-left: 0; }
  .parent-screen .header-actions { justify-content: flex-end; }
}

/* 0.4.9: страница родителя на 390 px — шапка одной строкой (заголовок для экранного диктора),
   переключатель «День / Неделя» и дни — второй строкой, короткая подпись периода. */
.period-short { display: none; }
@media (max-width: 480px) {
  .parent-screen .screen-header { flex-wrap: nowrap; gap: 4px; min-height: 0; margin-bottom: var(--s2); justify-content: space-between; }
  .parent-screen .screen-header-titles { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .parent-screen .screen-header .btn-quiet { min-height: 40px; min-width: 0; padding: 0 2px; font-size: 12px; white-space: nowrap; flex: none; }
  .parent-screen .header-actions { flex: 0 1 auto; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; }
  .parent-bar { flex-wrap: nowrap; gap: 4px; margin-bottom: var(--s3); justify-content: space-between; }
  .parent-bar .seg-chips, .parent-bar .period-nav { flex-wrap: nowrap; gap: 4px; }
  .parent-bar .chip { min-height: 40px; min-width: 0; padding: 0 8px; font-size: 12px; }
  .parent-bar .period-label { min-width: 0; font-size: 12px; white-space: nowrap; }
  .period-full { display: none; }
  .period-short { display: inline; }
}

/* 0.4.9: название предмета в шапке чата на 390 px не обрезается: заголовок занимает остаток строки
   и не прячет переполнение, кнопка «Новое задание» сжимается и переносит подпись. */
@media (max-width: 480px) {
  .chat-header .chat-title { flex: 1 1 auto; min-width: max-content; overflow: visible; }
  .chat-header .chat-new { flex: 0 1 auto; min-width: 0; }
}

/* 0.4.11: пропуск упражнения («1) …») и метка строки сопоставления («1», «a») */
.read-blank {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 2.6em;
  margin: 2px 0 2px 2px;
  padding: 0 6px;
  border-bottom: 3px solid var(--subj);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  color: var(--subj-ink);
  vertical-align: baseline;
  white-space: nowrap;
}
.read-blank-num { font-weight: 900; }
.read-blank-line { color: var(--ink-2); letter-spacing: 2px; }
.read-blank.is-now { background: var(--warm-soft); border-bottom-color: var(--warm); color: var(--warm-ink); box-shadow: inset 0 -5px 0 var(--warm); }
.read-num.is-label { border-radius: var(--r-sm); text-transform: lowercase; }
/* 0.4.11: новая реплика репетитора, пока открыта вкладка «Текст» */
.chat-tab.has-new::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--warm);
  vertical-align: middle;
}
/* 0.4.12: «Читаем вместе весь текст», предложение, которое звучит, ответ в пропуске, кнопка «Читаем вместе» под репликой */
.read-sent.is-voiced { border-color: var(--warm); box-shadow: 0 0 0 2px var(--warm-soft), var(--shadow-1); }
.read-blank.is-filled { border-bottom-color: var(--ok); color: var(--ink); }
.read-blank-answer { font-weight: 800; }
.msg-foot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.msg-together { display: none; min-height: var(--h-btn); padding: 0 var(--s4); font-size: var(--fs-btn); font-weight: 800; }
.chat-screen.has-reading .msg-together { display: inline-flex; align-items: center; }
.chat-screen.has-reading .msg-tutor:has(.msg-choice [data-act='читаем_вместе']) .msg-together { display: none; }
/* 0.4.13: экран текста разгружен — строка управления над текстом, предложение без кнопок, карточка слова у слова */
.read-bar {
  position: sticky;
  top: calc(-1 * var(--s4));
  z-index: 2;
  display: grid;
  gap: var(--s2);
  margin: calc(-1 * var(--s4)) calc(-1 * var(--gutter)) 0;
  padding: var(--s3) var(--gutter);
  background: var(--desk-subj);
  border-bottom: 1px solid var(--line);
}
.read-bar .read-btn { flex: 1 1 140px; }
.read-tempo { flex: none; width: var(--h-btn); height: var(--h-btn); border: 2px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink-2); }
.read-tempo .icon { width: 30px; height: 30px; }
.read-tempo.is-slow { border-color: var(--subj); background: var(--subj-soft); color: var(--subj-ink); }
.read-tempo:focus-visible { outline: 3px solid var(--focus, var(--subj)); outline-offset: 2px; }
.read-sent { min-height: calc(var(--s4) * 2 + 44px + var(--s2) + 32px); }
.read-bar .read-exit { flex: 0 0 auto; }
.read-bar.is-run { border-bottom: 2px solid var(--warm); }
.read-step { margin: 0; font-size: var(--fs-body); font-weight: 800; color: var(--ink); }
.read-step b { font-size: var(--fs-lead); }
.read-pop {
  position: fixed;
  z-index: 60;
  width: min(480px, calc(100vw - 16px));
  max-height: calc(100% - 16px);
  overflow-y: auto;
  display: grid;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  opacity: 1;
  box-shadow: var(--shadow-2), 0 12px 32px rgb(20 32 56 / 0.18);
}
/* 0.4.14: карточка непрозрачна всё время — появление только сдвигом, без изменения прозрачности. */
.read-pop.is-enter { animation: read-pop-in 0.16s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes read-pop-in { from { transform: translateY(8px); } to { transform: none; } }
/* Телефон: нижняя панель над полем ввода, во всю ширину. */
.read-pop.is-sheet {
  left: 0;
  right: 0;
  width: auto;
  max-height: 55%;
  padding: var(--s3) var(--gutter) var(--s4);
  border-width: 2px 0 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: 0 -8px 24px rgb(20 32 56 / 0.16);
}
.read-pop.is-sheet.is-enter { animation-name: read-sheet-in; }
@keyframes read-sheet-in { from { transform: translateY(24px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .read-pop.is-enter { animation: none; } }
.read-pop-ans { display: grid; gap: var(--s1); padding: var(--s2) var(--s3); border-radius: var(--r-md); background: var(--subj-soft); color: var(--ink); font-size: var(--fs-body); font-weight: 700; line-height: var(--lh-text); }
.read-pop-ans p { margin: 0; }
.read-pop-ans.is-wait { color: var(--ink-2); }
.read-nomic { margin: 0; font-size: var(--fs-body); font-weight: 800; color: var(--warm-ink); }
.read-pop-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.read-pop-word { font-size: calc(var(--fs-lead) * 1.35); font-weight: 900; }
.read-pop-close { flex: none; font-size: var(--fs-lead); color: var(--ink-2); }
.read-pop-tr { margin: 0; font-size: var(--fs-lead); font-weight: 700; color: var(--ink-2); }
.read-pop-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.read-pop-actions .read-btn { flex: 1 1 auto; white-space: nowrap; }
.read-pop-actions .read-pop-help { flex: 0 1 auto; padding: 0 var(--s3); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 480px) {
  .read-sent { min-height: calc(var(--s3) * 2 + 44px + var(--s2) + 32px); }
}
/* 0.4.14: шапка экрана текста на телефоне — первое предложение не ниже 45% высоты экрана.
   Номера и подпункты — одна строка с горизонтальной прокруткой; «Текст / Чат» и строка «Читаем вместе / Читаю сам» —
   без лишних отступов; подсказка — одна строка. */
.read-lead { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) {
  .chat-screen.has-reading .subparts {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    padding: 6px var(--gutter);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .chat-screen.has-reading .subparts::-webkit-scrollbar { display: none; }
  .chat-screen.has-reading .subpart { flex: none; min-height: 36px; padding: 0 12px; }
  .chat-tabs { padding: 6px var(--gutter); }
  .chat-tab { min-height: 44px; }
  .reading-scroll { padding-top: var(--s2); }
  .reading { gap: var(--s3); }
  .read-bar { top: calc(-1 * var(--s2)); margin-top: calc(-1 * var(--s2)); padding: var(--s2) var(--gutter); }
  .read-bar .read-btn { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 0 var(--s2); }
  .read-bar .read-actions { flex-wrap: nowrap; }
  .read-bar.is-run .read-actions { flex-wrap: wrap; }
  .read-bar.is-run .read-btn { flex: 1 1 auto; }
  .read-tempo { width: 48px; height: 48px; }
}