/* ===== Clinical Wellness — Calorie & Weight Mini App ===== */
:root {
  --bg: #F6F7F8;
  --surface: #FFFFFF;
  --surface-2: #EFF1F0;
  --ink: #1B1D1C;
  --muted: #5C636E;          /* было #6B7280 — теперь проходит AA на светлом фоне */
  --hairline: rgba(0,0,0,0.07);
  --accent: #2FA36B;          /* декоративный: кольцо, заливки (контраст-фон 3:1) */
  --accent-ink: #157A4C;      /* акцентный ТЕКСТ на светлом — AA 4.5:1+ */
  --accent-btn: #157A4C;      /* фон кнопок под белый текст — AA 5:1 */
  --accent-weak: rgba(47,163,107,0.12);
  --on-accent: #FFFFFF;
  --warn: #E0A33B;            /* декоративный жёлтый */
  --warn-ink: #785310;        /* текст предупреждения на светлом — AA 4.5:1 */
  --warn-weak: rgba(224,163,59,0.16);
  --danger: #E5564B;          /* декоративный красный */
  --danger-ink: #C0392B;      /* красный ТЕКСТ на светлом — AA */
  /* макросы — раздельные цвета (как Yazio/Cal AI) */
  --protein: #E0663B;         /* белок — тёплый терракот */
  --fat: #E0A33B;             /* жиры — янтарь */
  --carbs: #3B82E0;           /* углеводы — синий */
  /* стадии голодания (глубокие фазы) */
  --fast-deep: #1FA88A;       /* аутофагия — бирюза */
  --fast-peak: #7B68E8;       /* пик пользы — фиолет */
  --shadow: 0 4px 22px rgba(0,0,0,0.05);
  /* радиусы */
  --r-sm: 10px; --r-md: 14px; --r-lg: 16px; --r-xl: 20px; --r-pill: 99px;
  --radius: var(--r-xl);
  /* типографика — единая шкала */
  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 17px;
  --fs-xl: 20px; --fs-2xl: 26px; --fs-num: 50px;
  /* отступы — единая шкала (4pt) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 34px;
  --maxw: 460px;
  --pad: 20px;
  --font: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
html.dark {
  --bg: #0E0F10;
  --surface: #17181A;
  --surface-2: #232528;
  --ink: #F2F3F2;
  --muted: #A7ADB3;           /* было #9BA1A6 — чуть светлее для AA на тёмном */
  --hairline: rgba(255,255,255,0.09);
  --accent: #34B377;
  --accent-ink: #4FD08D;      /* акцентный текст на тёмном — яркий, читаемый */
  --accent-btn: #1B7A50;      /* кнопка под белый текст в тёмной теме — AA */
  --accent-weak: rgba(52,179,119,0.14);
  --warn: #E0A33B;
  --warn-ink: #F0C066;        /* текст предупреждения на тёмном */
  --danger-ink: #F2796C;      /* красный текст на тёмном — AA */
  --warn-weak: rgba(224,163,59,0.16);
  --protein: #F0805A;
  --fat: #F0BB5A;
  --carbs: #5B9CF0;
  --fast-deep: #2FC4A0;
  --fast-peak: #8B7BF7;
  --shadow: none;
}

/* Экранным читалкам: скрытый визуально, но озвучиваемый заголовок */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Видимый фокус для клавиатуры (не мешает мыши) */
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 6px; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); }
/* системные элементы (поля ввода, полосы прокрутки) подхватывают тему */
:root { color-scheme: light; }
html.dark { color-scheme: dark; }
/* по тапу нет серой вспышки Android и задержки 300 мс на двойное касание */
button, a, label, input, select, [role="button"], .ws-day, .meal-item { touch-action: manipulation; }
html { -webkit-tap-highlight-color: transparent; }
body {
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
  overflow-x: hidden;
  font-size: 15px;
  line-height: 1.5;
}
#app { max-width: var(--maxw); margin: 0 auto; }

.ms {
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  font-size: 21px; line-height: 1; vertical-align: middle; user-select: none;
}
.ms.accent { color: var(--accent-ink); }
.mono { font-family: var(--mono); font-feature-settings: 'tnum'; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.xsmall { font-size: 11px; }
.hidden { display: none !important; }
.center { text-align: center; }
.overline {
  font-size: 11px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted);
}
.accent { color: var(--accent-ink); }
b { font-weight: 600; }

#loading { padding: 24px var(--pad); }

/* ===== Header ===== */
#topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: env(safe-area-inset-top) var(--pad) 0;
  background: var(--bg); /* фолбэк для старых WebView без color-mix */
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
/* Заголовок строго по центру шапки: боковые кнопки одной ширины (40px),
   а титул тянется между ними — не съезжает от длины «Голодание»/«Сегодня» */
.top-title { text-align: center; flex: 1; min-width: 0; }
#date-label { cursor: pointer; }
.hello { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: none; border: none; color: var(--ink); cursor: pointer;
  border-radius: 12px; transition: opacity .15s;
}
.icon-btn:active { opacity: .55; }
/* Аватар в шапке: фото из Telegram или инициал — вход в профиль без подписи */
.top-ava {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent-soft, rgba(76, 175, 80, .18));
  background-size: cover; background-position: center;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600; color: var(--accent, #4caf50);
  overflow: hidden;
}
.top-ava .ms { font-size: 18px; }

main { padding: 0 var(--pad) 120px; }
.tab { animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ===== Date nav ===== */
.date-nav { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 18px 0 8px; }
.date-current { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); }
/* 40×40 — минимум, чтобы уверенно попадать пальцем (было 32) */
.nav-btn { background: none; border: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; width: 40px; height: 40px; }
.nav-btn:disabled { opacity: .3; }
.nav-btn .ms { font-size: 24px; }

/* ===== Calorie ring ===== */
.ring-wrap { position: relative; width: 248px; height: 248px; margin: 14px auto 0; }
.ring { width: 100%; height: 100%; }
.ring-track { fill: none; stroke: var(--surface-2); stroke-width: 9; }
.ring-fg { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round;
  transition: stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1), stroke .4s; }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-num { font-family: var(--mono); font-size: 50px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.ring-cap { margin-top: 8px; letter-spacing: 0.18em; }
.ring-sub { text-align: center; margin-top: 22px; font-size: 14px; }
.ring-sub b { color: var(--ink); }
/* короткое празднование попадания в коридор цели */
@keyframes ring-pop { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } }
.ring-wrap.celebrate { animation: ring-pop .6s ease; }
@media (prefers-reduced-motion: reduce) { .ring-wrap.celebrate { animation: none; } }

/* ===== Macros ===== */
.macros { display: grid; gap: 16px; margin: 34px 2px 0; }
.macro-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 13px; }
.macro-head .mono { color: var(--ink); font-size: 13px; }
.bar { height: 5px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
/* width: 0 по умолчанию — иначе до загрузки данных полоски мигают полными */
.fill { width: 0; height: 100%; background: var(--accent); border-radius: 99px; transition: width .6s cubic-bezier(.22,1,.36,1); }
#p-fill { background: var(--protein); }
#f-fill { background: var(--fat); }
#c-fill { background: var(--carbs); }

/* ===== Chips ===== */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border: 1px solid var(--hairline); border-radius: 99px;
  background: var(--surface); font-size: 13.5px; white-space: nowrap;
}
.chip .ms { font-size: 18px; }
.chip-btn {
  width: 40px; height: 40px; margin-left: 2px; display: grid; place-items: center;
  border: none; border-radius: 99px; background: var(--surface-2); color: var(--ink); cursor: pointer;
}
.chip-btn:active { transform: scale(.9); }
.chip-btn .ms { font-size: 16px; }

/* Шкала воды: чип-«столбик» со стаканами — заполнение видно, а не только счётчик */
.chip-water { flex-direction: column; align-items: stretch; gap: 8px; border-radius: 18px; }
.chip-water-top { display: inline-flex; align-items: center; gap: 7px; }
.water-scale { display: flex; gap: 4px; }
.water-glass {
  flex: 1; height: 8px; min-width: 6px; border-radius: 99px;
  background: var(--surface-2); transition: background .18s ease;
}
.water-glass.on { background: var(--accent); }
.water-glass.over { background: var(--accent-ink); }
@media (prefers-reduced-motion: reduce) { .water-glass { transition: none; } }

/* ===== Section label ===== */
.section-label { margin: 34px 2px 14px; display: block; letter-spacing: 0.12em; }

/* ===== Meals ===== */
#meals { display: grid; gap: 10px; }
.meal {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px;
  padding: 14px 16px; transition: border-color .2s;
}
.meal.empty { opacity: .55; }
.meal-row { display: flex; align-items: center; gap: 14px; }
.meal-ic { width: 38px; height: 38px; border-radius: 99px; background: var(--surface-2); display: grid; place-items: center; flex: none; color: var(--muted); }
.meal-ic .ms { font-size: 20px; }
.meal-info { flex: 1; min-width: 0; }
.meal-title { font-size: 15.5px; font-weight: 500; }
.meal-sub { font-size: 13px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meal-kcal { font-family: var(--mono); font-size: 14px; color: var(--ink); white-space: nowrap; }
.meal.empty .meal-kcal { color: var(--muted); }
.meal-items { display: grid; gap: 2px; margin: 10px 0 0 52px; }
.meal-item { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--muted); }
.meal-item .mi-k { font-family: var(--mono); color: var(--ink); }
.mi-del { margin-left: 4px; width: 40px; height: 40px; margin-top: -4px; margin-bottom: -4px; display: grid; place-items: center; border: none; background: none; color: var(--muted); font-size: 20px; cursor: pointer; line-height: 1; border-radius: 8px; }
.mi-del:active { color: var(--danger); }

/* ===== Buttons ===== */
.btn-primary, .btn-ghost {
  width: 100%; padding: 15px 18px; border-radius: 14px; font-family: var(--font);
  font-size: 15px; font-weight: 600; cursor: pointer; transition: transform .1s, background .2s, opacity .2s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-primary { background: var(--accent-btn); color: var(--on-accent); border: none; }
.btn-ghost { background: none; color: var(--accent-ink); border: 1px solid var(--accent-ink); margin-top: 12px; }
.btn-primary:active, .btn-ghost:active { transform: translateY(1px); opacity: .9; }
.btn-ghost .ms, .btn-primary .ms { font-size: 19px; }

/* ===== Cards / generic ===== */
.card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-top: 16px; }
.card:first-child { margin-top: 18px; }
label.overline { display: block; margin: 16px 0 6px; }
label.overline:first-of-type { margin-top: 0; }
input, select {
  width: 100%; padding: 13px 14px; font-family: var(--font); font-size: 16px;
  color: var(--ink); background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: 12px; outline: none;
}
input:focus, select:focus { border-color: var(--accent); }
.weight-row { display: flex; gap: 10px; }
.weight-row input { flex: 1; font-size: 18px; }
.weight-row .btn-primary { width: auto; padding: 13px 22px; }

/* ===== Settings: поля, тумблер, сегментированный выбор дня ===== */
.field { margin-top: 18px; }
.field:first-child { margin-top: 0; }
.field > label.overline { display: block; margin: 0 0 8px; }
.field-row { display: flex; align-items: center; justify-content: space-between; }
.input-wrap { position: relative; }
.input-wrap .ms { position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 20px; pointer-events: none; }
/* Селект и время: сбрасываем нативный вид, чтобы на iOS рамка тянулась на всю
   ширину карточки и не «съезжала» относительно остальных полей. */
.input-wrap select,
.input-wrap input[type="time"] {
  appearance: none; -webkit-appearance: none;
  width: 100%; min-width: 0; padding-right: 40px; min-height: 50px;
}
.input-wrap input[type="time"] { font-family: var(--mono); font-size: 16px; }
/* iOS Safari по умолчанию центрирует значение времени внутри поля и добавляет
   свои отступы — из-за этого текст и рамка выглядят смещёнными. Прижимаем влево. */
.input-wrap input[type="time"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.input-wrap input[type="time"]::-webkit-calendar-picker-indicator { opacity: 0; }
/* тумблер */
.switch { position: relative; display: inline-block; width: 46px; height: 28px; flex: none; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; background: var(--surface-2);
  border: 1px solid var(--hairline); border-radius: var(--r-pill); transition: background .2s; }
.switch .dot { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.switch input:checked + .track { background: var(--accent-btn); }
.switch input:checked ~ .dot { transform: translateX(18px); }
/* сегментированный выбор (дни недели) */
.segmented { display: flex; gap: 4px; padding: 4px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--hairline); }
.segmented input { display: none; }
.segmented label { flex: 1; text-align: center; padding: 13px 0; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; min-width: 0;
  transition: background .15s, color .15s; }
.segmented input:checked + label { background: var(--accent-btn); color: var(--on-accent); }
/* сегменты-кнопки (цель в шторке, режим целей) — раньше активный не подсвечивался */
.segmented button { flex: 1; text-align: center; padding: 13px 0; border-radius: 8px; border: 0;
  background: transparent; font-size: 13px; font-weight: 600; color: var(--muted);
  transition: background .15s, color .15s; }
.segmented button.active { background: var(--accent-btn); color: var(--on-accent); }

/* ===== Weight chart ===== */
#weight-chart { margin-top: 6px; height: 220px !important; width: 100% !important; }
.w-input-wrap { position: relative; flex: 1; }
.w-input-wrap input { width: 100%; padding-right: 38px; }
.w-unit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-family: var(--mono); font-size: 13px; pointer-events: none; }
.wstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
/* колонка с прижатым вниз числом: подпись в две строки («До цели») не сдвигает цифры */
.wstat { background: var(--surface-2); border-radius: 12px; padding: 11px 12px;
  display: flex; flex-direction: column; min-height: 68px; }
.wstat .mono, .wstat .mono.accent { margin-top: auto; }
.wstat .overline { font-size: var(--fs-2xs); }
.wstat .mono { display: block; font-size: 18px; font-weight: 600; margin-top: 4px; color: var(--ink); }
.wstat .mono.accent { color: var(--accent-ink); }
.txt-good { color: var(--accent-ink) !important; }
.txt-bad { color: var(--danger-ink) !important; }

/* ===== Progress ===== */
.prow { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--hairline); font-size: 14.5px; }
.prow:last-child { border-bottom: none; }
.prow b { font-size: 15px; }
.verdict { margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; }
.verdict.good { background: var(--accent-weak); color: var(--accent-ink); }
.verdict.warn { background: var(--warn-weak); color: var(--warn-ink); }
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.photos img { width: 100%; border-radius: 12px; display: block; }
.ph-cap { font-size: 11px; color: var(--muted); margin-top: 4px; text-align: center; }
.photos .empty { grid-column: 1 / -1; padding: 8px 0; }

/* ===== Coach ===== */
.coach-out { margin-top: 16px; white-space: pre-wrap; font-size: 14px; line-height: 1.55; color: var(--ink);
  background: var(--surface-2); border-radius: 14px; padding: 14px; }
.coach-out:empty { display: none; }
.coach-out.loading { color: var(--muted); }

/* Нутрициолог: подсказки-заготовки — чтобы не смотреть в пустое поле ввода */
.nutri-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pill {
  padding: 10px 14px; min-height: 40px; border: 1px solid var(--hairline); border-radius: 99px;
  background: var(--surface-2); color: var(--ink); font-size: 13px; font-family: inherit; cursor: pointer;
}
.pill:active { transform: scale(.96); }
.pill.on { background: var(--accent-weak); border-color: var(--accent); color: var(--accent-ink); }

/* ===== Нутрициолог: чат ===== */
.nutri-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-top: 4px; }
/* приветствие вместо второго заголовка — экран чата не тратит строку впустую */
.nutri-title { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }

/* Под-вкладки хаба: Чат / Рационы / Рецепты */
.nsub {
  display: flex; gap: 4px; margin: 14px 0 4px; padding: 3px;
  background: var(--surface-2); border-radius: 12px;
}
.nsub button {
  flex: 1; padding: 11px 4px; border: none; border-radius: 9px; background: transparent;
  color: var(--muted); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.nsub button.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.nsub-panel { display: flex; flex-direction: column; }
/* только чат тянется на всю высоту (у него свой скролл-тред) */
#nsub-chat { flex: 1 1 auto; min-height: 0; }
#nsub-rations, #nsub-recipes { padding-top: 8px; }

/* генерация + карточки сохранённого */
.gen-row { display: flex; gap: 10px; }
.gen-out {
  margin-top: 12px; padding: 14px; border-radius: 14px; background: var(--surface-2);
  white-space: pre-wrap; font-size: 14px; line-height: 1.5; color: var(--ink);
}
.gen-out.loading { color: var(--muted); }
.gen-out-actions { display: flex; gap: 10px; margin-top: 12px; }
.saved-list { display: flex; flex-direction: column; gap: 10px; }
.saved-card {
  border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface);
  padding: 14px 16px; cursor: pointer;
}
.saved-card:active { transform: scale(.99); }
.saved-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.saved-card-title { font-weight: 600; font-size: 14.5px; }
.saved-card-meta { color: var(--muted); font-size: 12px; white-space: nowrap; }
.saved-card-body { color: var(--muted); font-size: 13px; margin-top: 5px; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.saved-empty { color: var(--muted); font-size: 13.5px; text-align: center; padding: 20px 12px; }
/* кнопка-действие «Удалить» в модалке просмотра карточки */
.btn-primary.danger { background: var(--danger); }

/* Полоска контекста — человек видит, из чего исходит ИИ */
.nctx-cap { margin: 14px 2px 6px; display: block; }
.nutri-ctx {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin: 0 0 10px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 10px 6px;
}
.nctx { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.nctx b { font-size: 15px; }
.nctx .overline { font-size: 10.5px; }  /* 4 колонки: крупнее — «углев.» переносится на узких экранах */

/* Экран чата занимает высоту вида: прокручивается ТОЛЬКО переписка,
   а поле ввода и подсказки всегда под рукой — как в обычном мессенджере.
   190px = шапка 56 + нижний отступ main 120 (под таббар) + запас. */
#tab-nutri {
  display: flex; flex-direction: column;
  height: calc(100vh - 190px);
  height: calc(100dvh - 190px);  /* dvh — чтобы не прыгало под адресной строкой */
  min-height: 360px;
}
.thread {
  display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding: 4px 2px 8px;
  flex: 1 1 auto; min-height: 0; scroll-behavior: smooth; overscroll-behavior: contain;
}
@media (prefers-reduced-motion: reduce) { .thread { scroll-behavior: auto; } }
.bub {
  max-width: 86%; padding: 11px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}
.bub-ai { align-self: flex-start; background: var(--surface-2); color: var(--ink); border-bottom-left-radius: 5px; }
.bub-me { align-self: flex-end; background: var(--accent-btn); color: #fff; border-bottom-right-radius: 5px; }
.bub-time { font-size: var(--fs-2xs); opacity: .55; margin-top: 4px; }
.thread-empty { margin: auto; text-align: center; color: var(--muted); font-size: 13.5px; padding: 0 20px; }

/* «печатает…» */
.typing { display: flex; gap: 4px; align-items: center; padding: 14px 16px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: tdot 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tdot { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .typing i { animation: none; opacity: .6; } }

/* Док ввода */
.nutri-dock { flex: 0 0 auto; padding-top: 6px; }
/* подсказки — одной прокручиваемой строкой, не переносим: иначе док съедает экран */
/* маска справа: обрезанная подсказка читается как «лента листается», а не как баг */
.nutri-chips { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, #000 88%, transparent 100%); }
.nutri-chips::-webkit-scrollbar { display: none; }
.nutri-chips .pill { white-space: nowrap; flex: 0 0 auto; }
.ask-row { display: flex; gap: 8px; align-items: center; }
.ask-row input { flex: 1; margin: 0; }
.send-btn {
  width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center;
  border: none; border-radius: 50%; background: var(--accent-btn); color: #fff; cursor: pointer;
}
.send-btn:active { transform: scale(.92); }
.send-btn:disabled { opacity: .45; cursor: default; }

/* ===== Шторки: затемнение и карточка анимируются классом .open ===== */
.sheet { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0);
  display: flex; align-items: flex-end; transition: background .3s ease; }
.sheet.hidden { display: none; }
.sheet.open { background: rgba(0,0,0,.5); }
.sheet-card {
  width: 100%; max-width: var(--maxw); margin: 0 auto; background: var(--bg);
  border-radius: 22px 22px 0 0; padding: 10px 18px calc(20px + env(safe-area-inset-bottom));
  max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
  /* .32s = 320 мс в sheetClose (app.js) — менять только парой */
  transform: translateY(100%); transition: transform .32s cubic-bezier(.32,.72,0,1);
}
.sheet.open .sheet-card { transform: none; }
@media (prefers-reduced-motion: reduce) { .sheet, .sheet-card { transition: none; } }
.sheet-grip { width: 38px; height: 4px; border-radius: 99px; background: var(--hairline); margin: 0 auto 12px; }
.sheet-title { font-size: 19px; font-weight: 700; text-align: center; margin-bottom: 4px; }
.hint { margin: -8px 0 8px; }
.sheet-actions { display: flex; gap: 10px; margin-top: 24px; }

.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice {
  padding: 12px 10px; min-height: 44px; border: 1px solid var(--hairline); border-radius: 12px;
  background: var(--surface); color: var(--ink); font-size: 13.5px; font-family: inherit; cursor: pointer;
}
.choice.on { border-color: var(--accent); background: var(--accent-weak); color: var(--accent-ink); font-weight: 600; }

/* Списки продуктов: тег с крестиком + поле добавления */
.taglist { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 8px 7px 12px;
  border-radius: 99px; background: var(--surface-2); font-size: 13px; color: var(--ink);
}
.tag button {
  width: 20px; height: 20px; display: grid; place-items: center; border: none; border-radius: 50%;
  background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0;
}
.tag button:hover { color: var(--danger-ink); }
.tag-add {
  flex: 1; min-width: 120px; margin: 0; padding: 8px 12px; font-size: 13px;
  border: 1px dashed var(--hairline); border-radius: 99px; background: transparent;
}
.meal-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.meal-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; }

/* ===== Профиль ===== */
.pf-hero { display: flex; align-items: center; gap: 14px; padding: 20px 2px 8px; }
.pf-ava {
  width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-btn); color: #fff; font-size: 24px; font-weight: 700; overflow: hidden;
}
.pf-ava img { width: 100%; height: 100%; object-fit: cover; }
.pf-who { flex: 1; min-width: 0; }
.pf-name { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.pf-streak { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-ink); font-weight: 700; }
.pf-streak .ms { font-size: 20px; }

.pf-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 16px; }
.pf-tile {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 16px 8px;
  border: 1px solid var(--hairline); border-radius: 16px; background: var(--surface); cursor: pointer;
}
.pf-tile:active { transform: scale(.97); }
.pf-tile b { font-size: 20px; }
.pf-tile .overline { font-size: 10.5px; }  /* крупнее — «рост, см» переносится на узких экранах */

.prow-btn {
  width: 100%; background: none; border: none; cursor: pointer; color: var(--ink);
  font-size: 14.5px; font-family: inherit; padding: 15px 18px;
  border-bottom: 1px solid var(--hairline);
}
.prow-btn:last-child { border-bottom: none; }
.prow-btn > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.prow-btn .ms.accent { font-size: 19px; }
.prow-val { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.prow-val .ms { font-size: 18px; }

/* Цели: строки с полями ввода */
#pf-goalmode.segmented button { flex: 1; }
.goal-rows { display: flex; flex-direction: column; }
.goal-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 2px; border-bottom: 1px solid var(--hairline); font-size: 14.5px;
}
.goal-row:last-child { border-bottom: none; }
.goal-row > span:first-child { display: inline-flex; align-items: center; gap: 9px; }
.goal-val { display: inline-flex; align-items: center; gap: 6px; }
.goal-input {
  width: 78px; text-align: right; margin: 0; padding: 6px 10px; font-size: 15px;
  border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface);
}
.goal-input:disabled { border-color: transparent; background: transparent; color: var(--ink); -webkit-text-fill-color: var(--ink); opacity: 1; }
.dot-kcal, .dot-p, .dot-f, .dot-c { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot-kcal { background: var(--accent); }
.dot-p { background: var(--protein); }
.dot-f { background: var(--fat); }
.dot-c { background: var(--carbs); }

.edit-num { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 14px; }
.edit-num input { width: 140px; text-align: center; font-size: 26px; margin: 0; }

/* ===== Achievements ===== */
.ach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ach { border: 1px solid var(--hairline); border-radius: 16px; padding: 18px 12px; text-align: center; }
.ach.locked { opacity: .45; }
.ach-ic { width: 48px; height: 48px; margin: 0 auto 8px; border-radius: 99px; background: var(--accent-weak);
  display: grid; place-items: center; font-size: 24px; }
.ach.locked .ach-ic { background: var(--surface-2); filter: grayscale(1); }
.ach-t { font-weight: 600; font-size: 14px; }
.ach-d { margin-top: 3px; }

/* ===== Coach ===== */
.coach-left { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.coach-left .mono { color: var(--accent-ink); }
#ach-count { font-size: 11px; color: var(--muted); margin-left: 4px; }

/* ===== Fasting (отдельная вкладка) ===== */
/* Экран старта: режим запомнен — крупно показываем его и стартуем одной кнопкой */
.fast-hero { text-align: center; padding: 26px 20px; }
.fast-hero .overline { display: block; margin-bottom: 10px; }
.fast-hero-mode { font-family: var(--mono); font-weight: 800; font-size: 46px; line-height: 1;
  letter-spacing: 1px; color: var(--ink); }
.fast-hero-desc { color: var(--muted); font-size: 14px; margin-top: 8px; }
.fast-change { margin: 14px auto 0; background: none; border: none; cursor: pointer;
  color: var(--accent-ink); font-family: var(--font); font-weight: 600; font-size: 14px;
  display: flex; align-items: center; gap: 4px; }
.fast-change .ms { font-size: 18px; transition: transform .2s; }
.fast-change[aria-expanded="true"] .ms { transform: rotate(180deg); }
/* Опрос-подбор режима: вопросы и варианты */
.fsurvey { margin-top: 14px; display: flex; flex-direction: column; gap: 16px; }
.fq-t { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 2px 10px; }
.fq-opts { display: flex; flex-direction: column; gap: 8px; }
.fq-opt { width: 100%; text-align: left; padding: 14px 16px; border-radius: 13px;
  background: var(--surface); border: 1.5px solid var(--hairline); color: var(--ink);
  font-family: var(--font); font-size: 15px; cursor: pointer; transition: border-color .15s, background .15s; }
.fq-opt:active { transform: translateY(1px); }
.fq-opt.sel { border-color: var(--accent-btn); background: var(--accent-weak); font-weight: 600; }
/* Баннер с рекомендацией коуча на экране старта */
/* Пояснение коуча живёт внутри карточки режима — отдельная плашка сверху
   разрывала экран на два блока об одном и том же */
.fast-coach { padding: 12px 14px; border-radius: 12px; background: var(--accent-weak);
  color: var(--ink); font-size: 13.5px; line-height: 1.45; text-align: left; margin-top: 16px; }
/* Итоги одной строкой под кнопкой старта */
.fast-tally { text-align: center; margin-top: 12px; font-size: 13px; color: var(--muted); }
/* Свёрнутая справка «Зачем голодать?» */
.fast-why { margin-top: 18px; border-top: 1px solid var(--hairline); padding-top: 14px; }
.fast-why summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--accent-ink);
  list-style: none; display: flex; align-items: center; gap: 6px; min-height: 40px; }
.fast-why summary::-webkit-details-marker { display: none; }
.fast-why summary::after { content: 'expand_more'; font-family: 'Material Symbols Outlined';
  font-size: 18px; transition: transform .2s; }
.fast-why[open] summary::after { transform: rotate(180deg); }
.fast-why > div { margin-top: 8px; }
/* «Пройти опрос заново» — в списке режимов, спокойнее остальных строк */
.fast-retake b { font-size: 15px !important; font-family: var(--font) !important; color: var(--ink) !important; }
/* Активный экран: плашка плана сверху */
.fast2-planbar { display: flex; justify-content: center; margin: 6px 0 2px; }
.plan-chip { padding: 8px 18px; border-radius: var(--r-pill); background: var(--surface-2);
  border: 1px solid var(--hairline); font-family: var(--mono); font-weight: 800; font-size: 16px;
  letter-spacing: 1px; color: var(--ink); }
/* Кольцо-«подкова» со стадиями */
.ring2 { position: relative; width: 300px; max-width: 84vw; aspect-ratio: 1; margin: 4px auto 0; }
/* у подковы снизу проём — без подтяжки под кольцом зияла пустая полоса */
.fast-stage { margin-top: -18px !important; }
.ring2 svg { width: 100%; height: 100%; display: block; }
.ring2-track { stroke: var(--surface-2); }
.ring2-prog { stroke: var(--accent-btn); transition: stroke-dasharray .5s ease; }
.ring2-center { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; }
.ring2-cap { font-family: var(--font); font-weight: 700; font-size: 12px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); }
.ring2-time { font-weight: 800; font-size: 33px; color: var(--ink); letter-spacing: .5px; line-height: 1.2; }
/* Подпись «прошло · 71%» и есть переключатель — жать удобнее, кружок не нужен */
.ring2-swap { display: inline-flex; align-items: center; gap: 5px; min-height: 40px;
  padding: 0 10px; border: none; background: none; cursor: pointer; border-radius: 10px; }
.ring2-swap:active { opacity: .6; }
.ring2-swap .ms { font-size: 15px; color: var(--muted); }
.stage-node { position: absolute; width: 38px; height: 38px; border-radius: 50%; display: grid;
  place-items: center; transform: translate(-50%, -50%); background: var(--surface-2);
  border: 2px solid var(--hairline); transition: transform .2s, background .2s, border-color .2s; }
.stage-node .ms { font-size: 19px; color: var(--muted); }
/* фон плотный, не полупрозрачный: пройденные метки лежат поверх зелёной линии
   прогресса, и через просвечивающий фон иконка в них не читалась */
.stage-node.done { background: var(--surface); border-color: var(--accent); }
.stage-node.done .ms { color: var(--accent-ink); }
.stage-node.now { background: var(--accent-btn); border-color: var(--accent-btn);
  box-shadow: 0 4px 14px rgba(21,122,76,.4); transform: translate(-50%, -50%) scale(1.18); }
.stage-node.now .ms { color: #fff; }
/* Начало / Финиш — две карточки */
.ends { display: flex; gap: 10px; margin-top: 16px; }
.ends > .card { flex: 1; margin: 0; text-align: center; padding: 16px 10px; }
.ends .overline { display: block; margin-bottom: 6px; }
.ends b { font-family: var(--mono); font-weight: 700; font-size: 17px; color: var(--ink); }
.fast-modes2 { display: flex; flex-direction: column; gap: 10px; }
.fast-mode2 {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 16px 18px; border-radius: 16px; cursor: pointer; text-align: left;
  background: var(--surface-2); border: 1px solid var(--hairline); color: var(--ink);
  font-family: var(--font); transition: border-color .2s, background .2s, transform .1s;
}
.fast-mode2:active { transform: translateY(1px); border-color: var(--accent-ink); }
.fast-mode2 .fm-l { display: flex; flex-direction: column; gap: 3px; }
/* соотношение — крупное и акцентное (как в макете) */
.fast-mode2 b { font-size: 24px; font-family: var(--mono); letter-spacing: -0.02em; color: var(--accent-ink); }
.fast-mode2 .ms { color: var(--muted); font-size: 22px; }
.fast-bigtime { font-family: var(--mono); font-size: 34px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; }
.fast-stage { display: flex; align-items: flex-start; gap: 14px; }
.fast-stage-ic { width: 46px; height: 46px; flex: none; border-radius: 13px; background: var(--surface-2); display: grid; place-items: center; }
.fast-stage-ic .ms { font-size: 25px; color: var(--accent); }
.fast-stage-txt { flex: 1; min-width: 0; }
.fast-stage-t { font-size: 16px; font-weight: 600; margin-bottom: 3px; }
.fast-edit { margin-top: 12px; padding: 14px; border-radius: 14px; background: var(--surface-2); }
.fast-hist { margin-top: 14px; display: grid; gap: 2px; }
.fh-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--hairline); font-size: 14px; }
.fh-row:last-child { border-bottom: none; }
.fh-row .mono { color: var(--ink); }

/* ===== Quick add ===== */
.qa-btns { display: flex; gap: 10px; margin-top: 12px; }
.qa-btns .ms { font-size: 18px; }
.qa-preview { margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--surface-2); }
.qa-preview .mono { color: var(--ink); }
/* оверлей на время анализа фото — поверх всей зоны быстрого ввода */
#quickadd { position: relative; }
.qa-busy { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; border-radius: var(--radius);
  background: var(--bg); /* фолбэк для старых WebView без color-mix */
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ===== Tab bar ===== */
#tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--maxw); z-index: 50;
  display: flex; justify-content: space-around; align-items: center;
  height: calc(70px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--bg); /* фолбэк для старых WebView без color-mix */
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--hairline);
}
#tabbar button {
  /* min-width:0 обязателен: без него длинная подпись («Голодание») не даёт
     слоту сжаться, слоты выходят разной ширины и «+» уезжает от центра */
  flex: 1 1 0; min-width: 0; height: 70px; background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--muted); transition: color .2s;
}
#tabbar button span:last-child { font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }  /* «Голодание» не переносится на 320px */
/* на узких телефонах подпись «Голодание» упиралась в край — чуть уменьшаем */
@media (max-width: 344px) {
  #tabbar button span:last-child { font-size: 9.5px; letter-spacing: 0; }
}

/* «+» — акцентным кружком в центре: главное действие приложения — добавить еду */
.tab-ai .ai-fab {
  /* 44px и без отрицательного отступа: кружок целиком внутри бара (вылет на 3px
     читался как наезд на рамку), и подписи «Добавить» остаётся место снизу */
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent-btn); color: #fff;
  box-shadow: 0 4px 12px var(--accent-weak);
}
#tabbar .tab-ai { gap: 2px; }
.tab-ai .ai-fab .ms { font-size: 24px; }
#tabbar .tab-ai.active .ai-fab { transform: scale(1.06); }
.tab-ai:active .ai-fab { transform: scale(.93); }
@media (prefers-reduced-motion: reduce) { .tab-ai .ai-fab { transition: none; } }
#tabbar button .ms { font-size: 23px; }
#tabbar button.active { color: var(--accent-ink); }
#tabbar button.active .ms { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ── Лента недели («Сегодня»): точки на днях с записями ─────────────────────── */
.week-strip { display: flex; gap: 6px; justify-content: space-between; margin: 10px 0 2px; }
.ws-day {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 0 6px; border: none; border-radius: 12px; background: none;
  color: var(--muted); cursor: pointer; transition: background .15s;
}
.ws-day .ws-wd { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ws-day .ws-num { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.ws-day .ws-dot { width: 5px; height: 5px; border-radius: 99px; background: transparent; }
.ws-day.has .ws-dot { background: var(--accent); }
.ws-day.active { background: var(--accent-weak); }
.ws-day.active .ws-num { color: var(--accent-ink); }
.ws-day.future { opacity: .35; pointer-events: none; }

/* ── «Питание за неделю» (Прогресс): бар-чарт с целевой линией + инсайты ────── */
.wf-chart { position: relative; display: flex; align-items: flex-end; gap: 7px; height: 132px; margin: 6px 2px 4px; }
.wf-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.wf-bar { width: 100%; max-width: 30px; border-radius: 6px 6px 3px 3px; background: var(--accent); min-height: 3px; }
.wf-bar.over { background: var(--warn); }
.wf-bar.empty { background: var(--surface-2); }
.wf-wd { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.wf-target {
  position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed var(--hairline);
  pointer-events: none;
}
.wf-target::after {
  content: "цель"; position: absolute; right: 0; top: -16px; font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.wf-insights { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.wf-insight {
  font-size: 13.5px; line-height: 1.45; color: var(--ink);
  border-left: 3px solid var(--accent); padding: 2px 0 2px 10px;
}

/* ── Шит правки записи еды ──────────────────────────────────────────────────── */
.fe-meals { display: flex; gap: 6px; margin-top: 12px; }
.fe-meal {
  flex: 1; padding: 12px 0; border: 1px solid var(--hairline); border-radius: 12px;
  background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer;
}
.fe-meal.on { background: var(--accent-weak); color: var(--accent-ink); border-color: transparent; }
.fe-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.fe-field { display: flex; flex-direction: column; gap: 4px; }
.fe-field input { width: 100%; text-align: center; padding: 10px 4px; }

/* ── Скелетоны: шиммер на время загрузки ────────────────────────────────────── */
.skel { position: relative; overflow: hidden; background: var(--surface-2); border-radius: 12px; }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation: shimmer 1.3s infinite; }
html.dark .skel::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); }
@keyframes shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }
/* формы под экран «Сегодня» (старт) и карточки вкладок */
.skel-ring { width: 248px; height: 248px; border-radius: 50%; margin: 32px auto 0; }
.skel-line { height: 14px; margin: 14px auto 0; }
.skel-card { height: 130px; margin-top: 16px; border-radius: var(--r-xl); }
/* «пузыри» переписки нутрициолога */
.bub-skel { height: 42px; border-radius: 16px; align-self: flex-start; margin-top: 10px; }
.bub-skel.me { align-self: flex-end; }