/*
  Стили Mini App.

  Переменные палитры (--bg, --surface, --text, --brand и остальные) заданы в
  tokens.css в двух наборах — светлом и тёмном. Этот файл только потребляет
  их, ничего не объявляя заново.

  Шрифты системные. Веб-шрифт добавил бы задержку на открытии, а внутри
  Telegram системный шрифт как раз и выглядит родным.
*/

* { box-sizing: border-box; }

/* label { display: block } ниже — авторское правило, а значит перебивает
   стандартное [hidden]{display:none} из стилей браузера вне зависимости от
   специфичности (в каскаде порядок источников важнее специфичности): без
   этой строки label[hidden] всё равно остаётся видимым. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  /* Двойной тап по тексту иначе увеличивает страницу, и вернуть масштаб
     нечем: в Mini App нет адресной строки с кнопкой сброса. Обычный скролл
     и пинч-зум это не трогает — запрещён только двойной тап. */
  touch-action: manipulation;
  /* В приложении нет ни одного места, которому нужен горизонтальный скролл.
     У Safari на iOS нативные input[type=date] иногда рисуют внутренние
     сегменты (день/месяц/год + иконка календаря) шире собственного бокса,
     несмотря на width:100% и min-width:0 — и без этой строки лишние пиксели
     утаскивают в горизонтальный скролл всю страницу. */
  overflow-x: hidden;
}

html:has(.sheet),
body:has(.sheet),
body.sheet-open {
  overflow: hidden !important;
  touch-action: none;
}

#topbar:empty { display: none; }

#app {
  max-width: 640px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  /* viewport-fit=cover (index.html) отдаёт странице область под чёлкой и
     нижней панелью — без отступов контент (кнопка профиля в самой верхней
     строке) заезжает под шапку Telegram сверху, а панель вкладок перекрывает
     последний элемент снизу. */
  padding: calc(12px + env(safe-area-inset-top)) 16px calc(76px + env(safe-area-inset-bottom));
}

h1, h2, h3 { margin: 0 0 8px; line-height: 1.2; }
h1 { font-size: 24px; }
h2 { display: flex; align-items: center; gap: 8px; font-size: 19px; }
h3 { font-size: 16px; }

/* Иконка перед текстом заголовка карточки (см. icons.js, titleIcon()) —
   приглушённая: подсказывает тему карточки, не спорит с текстом за внимание. */
.card-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--muted);
  flex-shrink: 0;
}

.card-icon svg { width: 100%; height: 100%; }
p { margin: 0 0 8px; }

.muted { color: var(--muted); }
.food-hint { color: var(--muted); font-size: 11px; }
.small { font-size: 14px; }
.tiny { font-size: 13px; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* --- карточки --- */

.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: var(--gap);
}

.card--tight { padding: 12px 16px; }

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.row + .row { margin-top: 10px; }

.stack { display: flex; flex-direction: column; gap: var(--gap); }

/* --- норма: главная цифра экрана --- */

.norm {
  text-align: center;
  padding: 20px 16px;
}

.norm__value {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
}

.norm__unit { font-size: 16px; font-weight: 500; color: var(--muted); }

.norm__formula {
  margin-top: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--muted);
}

/* --- порции --- */

.portion {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.portion:last-child { border-bottom: none; }
.portion__grams { font-weight: 600; font-variant-numeric: tabular-nums; }
.portion__units { color: var(--muted); font-size: 14px; }
.portion__title { color: var(--muted); font-size: 14px; }

.time-badge {
  display: inline-block;
  min-width: 58px;
  padding: 3px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 14px;
}

/* --- кнопки --- */

button {
  font: inherit;
  cursor: pointer;
  border: none;
  border-radius: 10px;
  padding: 12px 16px;
  transition: opacity .15s;
}

button:active { opacity: .7; }
button:disabled { opacity: .45; cursor: default; }

.btn-primary {
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 600;
  width: 100%;
}

.btn-secondary {
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  color: var(--text);
  width: 100%;
}

.btn-danger { background: transparent; color: var(--danger); width: 100%; }
.btn-inline { width: auto; padding: 8px 14px; font-size: 14px; }

.btn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

/* --- список-строки (иконка + подпись + шеврон), как в настройках Telegram --- */

.card.list { padding: 4px 0; }

.list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: transparent;
  border-radius: 0;
  padding: 13px 16px;
  color: var(--text);
}

.list-row + .list-row { border-top: 1px solid var(--border); }

.list-row__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  color: var(--muted);
}

.list-row__icon svg { width: 100%; height: 100%; }

.list-row__label { flex: 1; font-size: 15px; }

.list-row__chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--muted);
}

.list-row__chevron svg { width: 100%; height: 100%; }

.list-row--danger, .list-row--danger .list-row__icon { color: var(--danger); }

.list-row__text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.list-row__text .list-row__label { flex: none; }
.list-row__subtitle { font-size: 13px; color: var(--muted); margin-top: 2px; }
.list-row__value { font-size: 14px; color: var(--muted); text-align: right; }
.list-row--info:disabled { opacity: 1; cursor: default; }

.more-header { display: flex; align-items: center; gap: 12px; padding: 4px 4px 12px; }
.more-header__text { flex: 1; min-width: 0; }
.more-header__name { font-weight: 600; font-size: 17px; }
.more-header__meta { font-size: 13px; color: var(--muted); }
.more-header__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--surface); color: var(--muted); font-weight: 600;
}

.group-title { margin: 16px 16px 6px; font-size: 13px; color: var(--muted); text-transform: none; }
.danger-zone { margin-top: 24px; }
.note { margin: 12px 16px; font-size: 13px; color: var(--muted); }

/* --- список питомцев --- */

.pet-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px 16px;
  color: var(--text);
}

/* Питомец внутри карточки (профиль): страница светлее карточки, поэтому
   свой --surface фон строки сливался бы с фоном самой карточки — здесь
   берём фон страницы, чтобы строки читались как отдельные элементы списка. */
.card .pet-item { background: var(--bg); }

.pet-item--active { box-shadow: inset 0 0 0 2px var(--brand); }

.pet-item__check {
  margin-left: auto;
  width: 20px;
  height: 20px;
  color: var(--accent-ink);
  flex-shrink: 0;
}

.pet-item__check svg { width: 100%; height: 100%; }

/* Кнопка-иконка в заголовке карточки (например, «+» у списка питомцев в
   профиле) — компактнее .pet-hero__icon-btn, который рассчитан на фото-фон. */
.card__icon-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  color: var(--text);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.card__icon-btn svg { width: 18px; height: 18px; }

.pet-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: color-mix(in srgb, var(--brand) 25%, transparent);
  display: grid;
  place-items: center;
  font-size: 24px;
  flex-shrink: 0;
}

/* --- фото-баннер питомца (экран карточки) --- */

.pet-hero-wrap {
  position: relative;
  /* Гасим боковые и верхний отступы #app только для этого блока: фото
     должно доходить до самых краёв контейнера и до чужого хидера Telegram
     сверху, а не начинаться внутри обычных 16px полей страницы. Отступ под
     безопасную зону (чёлка/статус-бар) при этом не трогаем — он завязан на
     env(safe-area-inset-top) в padding самого #app, а не на этих 16px. */
  margin: -16px -16px var(--gap);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: color-mix(in srgb, var(--brand) 25%, transparent);
}

.pet-hero {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Пока фото не загружено (или его нет), внутри лежит запасной эмодзи
     🐾 текстом — без центрирования он садится по умолчанию в левый верхний
     угол квадрата, как обрезанный криво значок. loadAvatar() подменяет div
     на img, у которого своя геометрия (object-fit решает всё сам), поэтому
     grid тут не мешает. */
  display: grid;
  place-items: center;
  font-size: 96px;
}

.pet-hero__scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 48px 16px 16px;
  /* Градиент, а не сплошная плашка: фото остаётся видно целиком, текст
     читается за счёт затемнения только у самого низа. */
  background: linear-gradient(to top, rgba(20, 22, 26, .75), rgba(20, 22, 26, 0));
  color: #fff;
}

.pet-hero__scrim h1 { color: #fff; }

/* Лента фото: свайп листает по одному, полоса прокрутки не видна. Затемнение
   с именем лежит поверх, но касания пропускает — иначе свайп по низу фото
   не работал бы. */
.pet-hero__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.pet-hero__track::-webkit-scrollbar { display: none; }
.pet-hero__slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
.pet-hero__scrim { pointer-events: none; }
.pet-hero__dots { display: flex; gap: 6px; margin-top: 10px; }
.pet-hero__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.pet-hero__dots i.is-on { background: #fff; }

.pet-hero__meta {
  margin: 4px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .85);
}

.pet-hero__actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
}

.pet-hero__switch {
  position: absolute;
  top: 12px;
  left: 12px;
  height: 40px;
  padding: 0 14px;
  border-radius: 20px;
  background: rgba(20, 22, 26, .45);
  backdrop-filter: blur(4px);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
}

.pet-hero__icon-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background: rgba(20, 22, 26, .45);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 18px;
  display: grid;
  place-items: center;
}

.pet-hero__icon-btn--danger { color: #ffb4ae; }

/* --- карточка «мысли питомца» --- */

.pet-mood { text-align: center; }

.pet-mood__bubble {
  min-height: 22px;
  margin: 0 0 14px;
  font-size: 15px;
}

.pet-mood__actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.pet-mood__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  color: var(--text);
  font-size: 13px;
  border-radius: 12px;
}

.pet-mood__btn span { font-size: 22px; }

/* --- формы --- */

label { display: block; margin-bottom: 14px; }
.label-text { display: block; margin-bottom: 6px; font-size: 14px; color: var(--muted); }

input[type="text"], input[type="number"], input[type="date"], input[type="time"], select {
  width: 100%;
  /* date/time — не обычный текст, а нативный виджет с собственными
     внутренними полями (день/месяц/год + значок календаря); в Safari его
     содержимому нужен свой min-width, из-за чего он вылезает за 100%
     родителя, если не обнулить min-width явно. max-width — подстраховка
     на случай, если сегменты всё равно захотят больше места, чем есть. */
  min-width: 0;
  max-width: 100%;
  padding: 12px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}

input[type="date"], input[type="time"] {
  /* min/max-width само по себе не спасает: Safari на iOS всё равно рисует
     свою нативную обвязку (иконка календаря + сегменты) шире, чем задано —
     рамка вылезает за карточку, а высота и центрирование текста внутри
     отличаются от обычных текстовых полей, из-за чего строка визуально
     «не на своём месте» рядом с соседними. appearance:none снимает эту
     нативную обвязку целиком — поле превращается в обычный прямоугольник
     с тем же боксом, что у остальных полей формы; открыть выбор даты/
     времени тапом это не мешает. */
  -webkit-appearance: none;
  appearance: none;
}

/* Нативная стрелка select рисуется браузером внутри тех же 12px padding,
   что и текст, и на скруглённом углу 10px вылезает за край поля вместо того,
   чтобы уместиться внутри рамки. appearance:none снимает её, а вместо неё —
   свой шеврон фоном, с запасом места под него в padding-right. */
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 36px;
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235C636E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239BA3AE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

input:focus, select:focus { outline: 2px solid var(--brand); outline-offset: -1px; }

/* Рамка и фон переносятся на обёртку, а сам input[type=date] внутри — без
   своих border/background: на части устройств appearance:none не до конца
   убирает нативную обвязку поля, и авторская рамка на самом input пробивается
   бледнее, чем у соседних текстовых полей. На обёртке такой проблемы нет —
   это обычный div. Затрагивает только это поле (birth_date в форме питомца),
   а не все input[type=date] в приложении (например, в screens/weight.js). */
.date-field {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}
.date-field input[type="date"] {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 12px;
  font: inherit;
  color: var(--text);
  background: transparent;
  border: none;
}
.date-field input:focus { outline-offset: -1px; }

.choice-group { display: flex; gap: 8px; flex-wrap: wrap; }

.choice {
  flex: 1 1 auto;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
}

.choice[aria-pressed="true"] {
  background: color-mix(in srgb, var(--brand) 22%, transparent);
  border-color: var(--brand);
  font-weight: 600;
}

.field-hint { font-size: 13px; color: var(--muted); margin-top: 6px; }

.warning {
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  border-left: 3px solid var(--brand);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  margin-top: 8px;
}

.error { color: var(--danger); font-size: 14px; margin-top: 6px; }

/* --- график веса --- */

.chart {
  width: 100%; height: 140px; display: block;
  /* Без этого протяжка пальцем вдоль линии (см. pet.js: showTipAt) на
     мобильном одновременно скроллит страницу вертикально. */
  touch-action: none;
}
.chart__line { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linejoin: round; }
.chart__area { opacity: .9; }
/* stop-color как обычный XML-атрибут не читает var() — только через CSS. */
.chart-fill-stop { stop-color: var(--brand); }
.chart__dot { fill: var(--brand); }
.chart__target { stroke: var(--brand); stroke-width: 1.5; stroke-dasharray: 4 4; }
.chart__label { fill: var(--muted); font-size: 11px; }

/* Подсказка при тапе/наведении на точку (см. pet.js: drawWeightChart). */
.chart__tip { transition: opacity .15s; pointer-events: none; }
.chart__tip-line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.chart__tip-dot { fill: var(--brand); stroke: var(--surface); stroke-width: 2; }
/* Фон и текст плашки — инверсия --text/--bg: в любой теме это гарантирует
   контраст, не заводя отдельную «всегда тёмную» пару токенов только для неё. */
.chart__tip-bg { fill: var(--text); }
.chart__tip-text { fill: var(--bg); font-size: 10px; text-anchor: middle; }

/* --- статистика --- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: center;
}

.stat__value { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat__label { font-size: 13px; color: var(--muted); }

/* --- служебное --- */

.loader { text-align: center; padding: 60px 20px; color: var(--muted); }

.loader__mark {
  display: block;
  margin: 0 auto 16px;
  width: 112px;
  height: 112px;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.18));
  /* Мягкое дыхание вместо вращения: знак — не индикатор прогресса, и
     крутить его было бы враньём про то, что что-то считается. */
  animation: breathe 1.6s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: .75; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.04); }
}

.toast {
  position: fixed;
  left: 50%;
  /* Панель вкладок фиксирована снизу и занимает ~72px + safe-area — тост
     должен всплывать над ней, а не под неё. */
  bottom: calc(96px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: 20px;
  font-size: 14px;
  z-index: 100;
  max-width: 90vw;
}

.toast[hidden] { display: none; }

.dev-banner {
  background: var(--danger);
  color: #fff;
  text-align: center;
  padding: 6px;
  font-size: 13px;
  border-radius: 8px;
  margin-bottom: 12px;
}

.empty { text-align: center; padding: 40px 20px; }
.empty__emoji { font-size: 48px; display: block; margin-bottom: 12px; }
.empty__mark {
  display: block;
  margin: 12px auto 16px;
  width: 110px;
  height: 110px;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.14));
}

.back-link {
  background: none;
  color: var(--link);
  padding: 8px 0;
  font-size: 15px;
  width: auto;
}

/* Панель вкладок. Фиксирована снизу: в Mini App нет адресной строки, и
   панель — единственный постоянный ориентир. */
#tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: center;
  padding: 4px 12px calc(4px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--bg) 75%, transparent);
  pointer-events: none;
  z-index: 100;
}

.tabbar {
  pointer-events: auto;
  display: flex;
  gap: 4px;
  background: var(--bar-bg);
  border-radius: 999px;
  padding: 6px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
  border: 0;
  border-radius: 999px;
  padding: 8px 4px 7px;
  font: inherit;
  color: var(--bar-ink);
  background: transparent;
}

.tabbar__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
}

.tabbar__icon svg { width: 100%; height: 100%; }

.tabbar__label { font-size: 11px; }

/* Точка-уведомление (см. engagement.js) — как непрочитанное в чатах
   Telegram: ненавязчивый повод заглянуть, а не полноценный бейдж-счётчик.
   Кайма в цвет панели отделяет точку от иконки под ней, как в оригинале. */
.tabbar__dot {
  position: absolute;
  top: -2px;
  right: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  border: 2px solid var(--bar-bg);
}

/* Активная вкладка красится в фирменный синий, без фоновой плашки —
   вся панель остаётся одной тёмной капсулой, как в Telegram. */
.tabbar__item--active {
  color: var(--brand);
  font-weight: 600;
}

/* --- Ритм заботы V2 ------------------------------------------------ */

.rhythm-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 16px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  position: relative;
  user-select: none;
}
.rhythm-card:active {
  transform: scale(0.99);
}
.rhythm-card--complete {
  border-color: color-mix(in srgb, var(--dot-fed, #4CAF7D) 45%, var(--border));
  background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--dot-fed, #4CAF7D) 6%, var(--surface)));
  box-shadow: 0 2px 12px color-mix(in srgb, var(--dot-fed, #4CAF7D) 12%, transparent);
  animation: rhythmGlow 3s ease-in-out infinite alternate;
}

@keyframes rhythmGlow {
  0% {
    box-shadow: 0 2px 8px color-mix(in srgb, var(--dot-fed, #4CAF7D) 10%, transparent);
  }
  100% {
    box-shadow: 0 3px 16px color-mix(in srgb, var(--dot-fed, #4CAF7D) 24%, transparent);
  }
}

.rhythm-card__main { display: flex; align-items: center; gap: 11px; }
.rhythm-card__icon {
  font-size: 24px;
  line-height: 1;
  transition: transform 0.2s ease;
}
.rhythm-card--complete .rhythm-card__icon {
  animation: flamePulse 2.4s ease-in-out infinite;
}

@keyframes flamePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15) rotate(4deg); }
  100% { transform: scale(1); }
}

.rhythm-card__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.rhythm-card__copy strong { font-size: 15px; }
.rhythm-card__copy span { color: var(--muted); font-size: 12px; line-height: 1.35; }
.rhythm-card__info-arrow {
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  opacity: 0.6;
  margin-left: 4px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.rhythm-card:hover .rhythm-card__info-arrow {
  opacity: 1;
  transform: translateX(2px);
}

.rhythm-card__bar {
  margin-top: 10px;
  height: 5px;
  background: var(--tile-idle, #EDF1F7);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.rhythm-card__bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #F5A623, #FF5E3A);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.rhythm-card--complete .rhythm-card__bar-fill {
  background: linear-gradient(90deg, #4CAF7D, #2E8B57);
}

.rhythm-card__meta {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 11px;
}
.rhythm-card__info-hint {
  color: var(--link);
  font-weight: 500;
  text-decoration: none;
}

.rhythm-achievement {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--brand) 7%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
  border-radius: var(--radius);
  padding: 11px 13px;
  margin-bottom: 16px;
  animation: achievementShimmer 4s ease-in-out infinite alternate;
}
@keyframes achievementShimmer {
  0% { border-color: color-mix(in srgb, var(--brand) 20%, var(--border)); }
  100% { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
}
.rhythm-achievement__icon { font-size: 26px; width: 34px; text-align: center; }
.rhythm-achievement__copy { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.rhythm-achievement__copy strong { font-size: 14px; }
.rhythm-achievement__copy span { color: var(--muted); font-size: 11px; }
.rhythm-achievement__days { font-size: 20px; font-weight: 700; text-align: center; line-height: 1; }
.rhythm-achievement__days small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 500; }

.rhythm-rules {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}
.rhythm-rule-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.rhythm-rule-icon {
  font-size: 18px;
  line-height: 1.2;
}
.rhythm-rule-item strong {
  display: block;
  font-size: 13.5px;
  margin-bottom: 2px;
}
.rhythm-rule-item p {
  margin: 0;
  line-height: 1.35;
}

/* --- Экран «Сегодня» ------------------------------------------------- */

.today-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.today-head__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand); display: flex; align-items: center;
  justify-content: center; font-size: 22px;
  /* loadAvatar() подменяет div на img с тем же классом: без object-fit
     фото растягивается в круг как есть, а не кадрируется — портретный кадр
     сплющивает в кашу именно там, где до фото сидел эмодзи-заглушка. */
  object-fit: cover;
}
.today-head__who { display: flex; flex-direction: column; flex: 1; }

.hero {
  display: flex; align-items: center; gap: 16px;
  background: var(--brand); color: var(--brand-ink);
  border-radius: var(--radius-lg); padding: 18px; margin-bottom: 16px;
}
/* Регистрация --p как числа — иначе браузер не умеет плавно интерполировать
   произвольное CSS-свойство и conic-gradient просто скачет к новому значению
   вместо анимации (см. requestAnimationFrame в today.js: hero()). */
@property --p {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.hero__ring {
  width: 68px; height: 68px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: conic-gradient(currentColor calc(var(--p) * 1%), rgba(255,255,255,.28) 0);
  transition: --p .6s ease;
}
.hero__ring span {
  width: 52px; height: 52px; border-radius: 50%; background: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}
.hero__text { display: flex; flex-direction: column; gap: 2px; }
.hero__text strong { font-size: 22px; }
.hero__next { opacity: .85; font-size: 13px; }

.days { display: flex; gap: 6px; margin-bottom: 18px; }
.day {
  flex: 1; border: 1px solid var(--border); border-radius: 14px;
  padding: 8px 0; background: var(--surface); color: var(--muted);
  font: inherit; font-size: 11px; display: flex; flex-direction: column;
  align-items: center; gap: 1px;
}
.day b { font-size: 14px; color: var(--text); }
.day--on { background: var(--text); border-color: var(--text); }
.day--on b, .day--on span { color: var(--bg); }
.day__dot { width: 5px; height: 5px; border-radius: 50%; display: block; }
.day__dot--fed { background: var(--dot-fed); }
.day__dot--part { background: var(--dot-part); }
.day__dot--idle { background: transparent; }

.section { font-size: 18px; margin: 0 0 10px; }

.meals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.meal {
  position: relative;
  border-radius: var(--radius);
  padding: 12px;
  background: var(--tile-idle);
  color: var(--tile-ink);
  min-width: 0;
  overflow: hidden;
}
.meal--fed { background: var(--tile-fed); }
.meal--skipped { background: var(--tile-idle); opacity: .65; }
.meal--next { background: var(--tile-next); }
.meal--tappable { cursor: pointer; }

/* Кнопка доп. действий на плитке (см. today.js, choose()) — в углу, чтобы не
   спорить с пилюлей статуса и не увеличивать сам тап-таргет плитки. */
.meal__menu {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tile-ink) 12%, transparent);
  color: var(--tile-ink);
  display: grid;
  place-items: center;
}
.meal__menu svg { width: 16px; height: 16px; }
.meal__pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--tile-pill-bg); color: var(--tile-pill-ink);
  border-radius: 999px; padding: 2px 8px; font-size: 10px; margin-bottom: 6px;
  max-width: 100%; min-width: 0; box-sizing: border-box;
}
.meal__pill-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* «Ближайшее» — без текста, один значок часов: пилюля становится кружком. */
.meal__pill--icon { padding: 4px; }
.meal__pill-icon {
  width: 11px; height: 11px; display: inline-grid; place-items: center;
  flex-shrink: 0;
}
.meal__pill-icon svg { width: 100%; height: 100%; }
.meal__time { font-size: 18px; font-weight: 700; }
.meal__grams { font-size: 12px; opacity: .75; }

.sheet {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: flex-end; z-index: 1000;
  overscroll-behavior: contain;
  touch-action: none;
}
.sheet__card {
  background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  width: 100%; display: flex; flex-direction: column; gap: 8px;
  touch-action: pan-y;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
}
.sheet__title { margin: 0 0 8px; font-weight: 600; }
.sheet__card--scroll {
  max-height: 75vh;
  max-height: 75dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* --- AI-помощник ---------------------------------------------------------- */

.list-row--accent .list-row__icon { color: var(--accent-ink); }
.list-row--accent .list-row__label { font-weight: 600; }

.chat-screen {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 104px);
}

.chat__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.chat__pet-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 22%, transparent);
  font-size: 24px;
}

.chat__header-copy { min-width: 0; }
.chat__header-copy h1 { margin-bottom: 2px; font-size: 20px; }
.chat__subtitle { margin: 0; color: var(--muted); font-size: 13px; }

.chat__messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 180px;
  padding: 6px 0 10px;
}

.chat__message {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
}

.chat__message--user { justify-content: flex-end; }

.chat__avatar {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  font-size: 17px;
}

.chat__bubble {
  max-width: min(82%, 520px);
  padding: 10px 13px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.chat__message--user .chat__bubble {
  background: color-mix(in srgb, var(--brand) 18%, var(--surface));
  border-color: transparent;
  border-bottom-right-radius: 5px;
}

.chat__message--assistant .chat__bubble { border-bottom-left-radius: 5px; }

.chat__content {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 15px;
  line-height: 1.45;
}

.chat__typing {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 22px;
}

.chat__typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: chat-bounce 1.1s infinite ease-in-out;
}

.chat__typing-dot:nth-child(2) { animation-delay: .12s; }
.chat__typing-dot:nth-child(3) { animation-delay: .24s; }

.chat__typing-label {
  margin-left: 5px;
  color: var(--muted);
  font-size: 12px;
}

@keyframes chat-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-3px); opacity: 1; }
}

.chat__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 4px 0 10px;
}

.chat__quick-btn {
  flex: 1 1 auto;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 13px;
  font-size: 13px;
  text-align: left;
}

.chat__quick-btn:active { background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }

.chat__composer {
  position: sticky;
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 5;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 0 6px;
  background: linear-gradient(to top, var(--bg) 72%, transparent);
}

.chat__input-wrap {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.chat__input {
  display: block;
  width: 100%;
  min-height: 44px;
  max-height: 132px;
  resize: none;
  padding: 11px 13px;
  font: inherit;
  line-height: 1.35;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow-y: auto;
}

.chat__input:focus {
  outline: 2px solid var(--brand);
  outline-offset: -1px;
}

.chat__send {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 20px;
  display: grid;
  place-items: center;
}

.chat__hint {
  margin: 0 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
}

.chat__message--error .chat__bubble { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.chat__retry {
  margin-top: 8px;
  padding: 0;
  color: var(--link);
  background: transparent;
  font-size: 13px;
}

.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;
}

@media (max-width: 420px) {
  .chat__quick-btn { flex-basis: calc(50% - 4px); }
  .chat__bubble { max-width: 86%; }
}

/* --- AI UX v2: Markdown / streaming / context actions -------------------- */
.chat__content p { margin: 0 0 9px; }
.chat__content p:last-child { margin-bottom: 0; }
.chat__content h3,
.chat__content h4,
.chat__content h5 { margin: 10px 0 6px; line-height: 1.25; }
.chat__content ul,
.chat__content ol { margin: 7px 0 9px 19px; padding: 0; }
.chat__content li + li { margin-top: 4px; }
.chat__content blockquote {
  margin: 8px 0;
  padding-left: 10px;
  border-left: 3px solid var(--border);
  color: var(--muted);
}
.chat__content code {
  padding: 1px 4px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--brand) 9%, var(--surface));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
}
.chat__content pre {
  margin: 8px 0;
  padding: 10px 12px;
  overflow: auto;
  border-radius: 10px;
  background: color-mix(in srgb, var(--text) 6%, var(--surface));
}
.chat__content pre code { padding: 0; background: transparent; }

.chat__message--streaming .chat__bubble { min-width: 92px; }
.chat__message--streaming .chat__content::after {
  content: '▋';
  display: inline-block;
  margin-left: 2px;
  animation: chat-cursor .9s steps(1) infinite;
  color: var(--brand);
}
.chat__message--streaming:not(.chat__message--has-content) .chat__content::after { display: none; }
@keyframes chat-cursor { 50% { opacity: 0; } }

.chat__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
}
.chat__action-btn {
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}
.chat__action-btn:active { background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }

.water-screen { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
.water__head { margin-bottom: 10px; }
.water__head h1 { margin-bottom: 2px; }
.water__quick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.water__add-btn { flex: 1 1 28%; min-width: 80px; }
.water__custom { display: flex; gap: 8px; margin-top: 10px; align-items: stretch; }
.water__custom input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  font-size: 15px;
  background: var(--surface-raised, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border);
  border-radius: 12px;
}
.water__custom .btn-primary {
  flex: 0 0 auto;
  width: auto;
  min-width: 110px;
  padding: 10px 18px;
  white-space: nowrap;
}
.water__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.water__row:last-child { border-bottom: 0; }
.water__row--selected {
  margin-inline: -7px;
  padding-inline: 7px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
}

/* --- AI UX v3: visual cards / charts ------------------------------------- */
.chat__visuals { display: flex; flex-direction: column; gap: 8px; margin-top: 9px; }
.chat__visual.card {
  margin: 0;
  padding: 11px 12px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--brand) 4%, var(--surface));
}
.chat__visual-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.chat__visual-title { margin: 0; font-size: 13px; line-height: 1.25; }
.chat__visual-subtitle { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.chat__metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }
.chat__metric {
  min-width: 0;
  padding: 8px 7px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  text-align: center;
}
.chat__metric strong { display: block; font-size: 18px; line-height: 1.05; }
.chat__metric span:last-child { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.chat__metric-unit { display: inline; margin-left: 2px; color: var(--muted); font-size: 10px; font-weight: 600; }
.chat__visual-action {
  width: 100%;
  min-height: 34px;
  margin-top: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--link);
  font-size: 12px;
  font-weight: 650;
}
.chat__visual-action:active { background: color-mix(in srgb, var(--brand) 9%, var(--surface)); }
.chat__line-chart { margin-top: 5px; }
.chat__line-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chat__chart-grid { stroke: var(--border); stroke-width: 1; opacity: .7; }
.chat__chart-line { stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chat__chart-point { fill: var(--surface); stroke: var(--brand); stroke-width: 2.5; }
.chat__chart-point-hit { cursor: pointer; }
.chat__chart-point--interactive { pointer-events: none; }
.chat__chart-point--selected { fill: var(--brand); stroke: var(--surface); stroke-width: 3; }
.chat__event-host { margin-top: 8px; }
.chat__event-card {
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.chat__event-card--deleted { opacity: .72; }
.chat__event-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.chat__event-kicker { display: block; color: var(--muted); font-size: 10px; }
.chat__event-title { display: block; margin-top: 2px; font-size: 13px; }
.chat__event-value { white-space: nowrap; font-size: 18px; font-weight: 750; }
.chat__event-meta { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: 7px; color: var(--muted); font-size: 10px; }
.chat__event-actions { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.chat__event-actions .btn-secondary { flex: 1; min-height: 34px; }
.chat__event-edit-form { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border); }
.chat__event-edit-form label { margin: 0; }
.chat__event-form-actions { display: flex; gap: 8px; margin-top: 8px; }
.chat__event-form-actions > * { flex: 1; }
.chat__event-error { margin: 6px 0 0; }
.chat__event-status { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.35; }
.chat__event-status[data-kind="error"] { color: var(--danger, #c33); }
.chat__chart-target { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.chat__chart-target-label { fill: var(--muted); font-size: 10px; }
.chat__chart-labels {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  margin-top: -2px;
  color: var(--muted);
  font-size: 10px;
}
.chat__chart-labels strong { color: var(--text); font-size: 12px; text-align: center; }
.chat__chart-labels span:last-child { text-align: right; }
.chat__chart-note { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.chat__chart-note strong { color: var(--text); }
.chat__visual-footnote { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.3; }
.chat__bar-chart {
  display: grid;
  grid-template-columns: repeat(14, minmax(13px, 1fr));
  gap: 4px;
  align-items: end;
  height: 116px;
  margin-top: 9px;
  overflow-x: auto;
}
.chat__bar-column { min-width: 13px; height: 100%; padding: 0; border: 0; background: transparent; color: var(--text); display: grid; grid-template-rows: 15px 1fr 16px; align-items: end; gap: 4px; }
.chat__bar-value { overflow: hidden; color: var(--muted); font-size: 8px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.chat__bar-track { height: 82px; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--border); }
.chat__bar-fill { width: min(16px, 82%); min-height: 0; border-radius: 5px 5px 2px 2px; background: var(--brand); }
.chat__bar-label { color: var(--muted); font-size: 8px; text-align: center; white-space: nowrap; }
@media (max-width: 420px) {
  .chat__metric-grid { gap: 4px; }
  .chat__metric { padding-left: 5px; padding-right: 5px; }
  .chat__metric strong { font-size: 16px; }
}

/* --- Interactive chart primitives --------------------------------------- */
.chart-range {
  display: flex;
  gap: 5px;
  padding: 3px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  overflow-x: auto;
}
.chart-range__btn {
  min-height: 32px;
  padding: 6px 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.chart-range__btn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--brand) 16%, var(--surface));
  color: var(--text);
}
.chart--interactive { position: relative; touch-action: pan-y; }
.chart--interactive svg { display: block; width: 100%; height: auto; }
.chart__grid-line { stroke: var(--border); stroke-width: 1; opacity: .65; }
.chart__series-line { stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chart__target-line { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart__hit-area { cursor: crosshair; }
.chart__tip { opacity: 0; transition: opacity .12s ease; pointer-events: none; }
.chart__tip--visible { opacity: 1; }
.chart__tip-line { stroke: var(--brand); stroke-width: 1; opacity: .55; }
.chart__tip-bg { fill: var(--surface); stroke: var(--border); }
.chart__tip-text { fill: var(--muted); font-size: 9px; text-anchor: middle; }
.chart__tip-value { fill: var(--text); font-size: 11px; font-weight: 700; text-anchor: middle; }
.chart__tip-dot { fill: var(--surface); stroke: var(--brand); stroke-width: 2.5; }
.chart__labels {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  margin-top: -2px;
  color: var(--muted);
  font-size: 10px;
}
.chart__labels strong { color: var(--text); text-align: center; font-size: 12px; }
.chart__labels span:last-child { text-align: right; }
.chart__selection-note { margin: 7px 0 0; color: var(--muted); font-size: 11px; min-height: 15px; }
.chart-bars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(24px, 1fr);
  align-items: end;
  gap: 4px;
  min-height: 170px;
  overflow-x: auto;
  padding: 5px 2px 2px;
  overscroll-behavior-x: contain;
}
.chart-bars__column {
  min-width: 24px;
  height: 150px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  display: grid;
  grid-template-rows: 17px 1fr 18px;
  gap: 4px;
  align-items: end;
}
.chart-bars__value { color: var(--muted); font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-bars__track {
  height: 106px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-bottom: 1px solid var(--border);
}
.chart-bars__fill { width: 15px; min-height: 0; border-radius: 5px 5px 2px 2px; background: var(--brand); }
.chart-bars__label { color: var(--muted); font-size: 8px; white-space: nowrap; }
.chart-bars__column:active .chart-bars__fill { opacity: .72; }
.stats-screen, .weight-screen { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
.stats-screen__head { margin-bottom: 6px; }
.stats-screen__head h1 { margin-bottom: 2px; }
.stats-screen__chart { margin-top: 10px; }
.stats-screen__open { width: 100%; margin-top: 10px; }
.stats-screen .water__quick { margin-top: 12px; }
.stats__treats-card .chart-bars__fill { background: color-mix(in srgb, var(--brand) 65%, #f39c12); opacity: 0.85; }
.stats__treats-card .chart-bars__column:active .chart-bars__fill { opacity: 1; }

.notify-kinds { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.notify-kinds__item { display: flex; gap: 8px; }
.notify-kinds__item span { width: 14px; flex-shrink: 0; color: var(--accent-ink); }
.notify-kinds__item--off { color: var(--muted); text-decoration: line-through; }
.notify-kinds__item--off span { color: var(--muted); }
.notify-toggle { padding: 10px 0; gap: 12px; align-items: flex-start; }
.notify-toggle + .notify-toggle { border-top: 1px solid var(--border); }
.notify-quiet { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.notify-quiet label { margin: 0; min-width: 0; }
.notify-quiet input, .notify-quiet select { width: 100%; min-width: 0; }

/* --- AI event cards: water + feeding ----------------------------------- */
.chat__event-item {
  margin-top: 8px;
  padding: 9px 0 0;
  border-top: 1px solid var(--border);
}
.chat__event-item:first-child { border-top: 0; padding-top: 0; }
.chat__event-item-main { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat__event-item-main strong { font-size: 15px; }
.chat__event-item-actions { display: flex; gap: 7px; margin-top: 6px; }
.chat__event-item-actions .btn-inline { font-size: 11px; }
.chat__water-form { margin-top: 7px; }
.chat__feeding-status {
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 10%, var(--surface));
  color: var(--muted);
  font-size: 10px;
}
.chat__feeding-status--fed { color: var(--success, #18794e); }
.chat__feeding-status--skipped { color: var(--danger, #b42318); }
.chat__feeding-status--pending, .chat__feeding-status--snoozed { color: var(--link); }
.chat__event-portions { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.chat__feeding-actions { flex-wrap: wrap; }
.chat__feeding-actions > * { flex: 1; min-height: 32px; }
.chat__event-meta + .chat__event-meta { margin-top: 3px; }
.admin-ai-row{display:grid;grid-template-columns:1.2fr .7fr .9fr .9fr .9fr;gap:8px;padding:9px 0;border-bottom:1px solid var(--separator)}
.admin-ai-row--head{font-weight:700;font-size:12px}.admin-ai-user{display:grid;grid-template-columns:.5fr 1fr 1fr;gap:8px;padding:9px 0;border-bottom:1px solid var(--separator)}

.chat__feedback{display:flex;align-items:center;gap:6px;margin-top:10px}
/* Оценка ответа — второстепенное действие: приглушённые пилюли, яркой
   становится только выбранная. */
.chat__feedback-btn {
  min-width: 0; padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px;
  background: transparent; font-size: 14px; opacity: .6; filter: grayscale(.5);
}
.chat__feedback-btn.is-active {
  opacity: 1; filter: none; border-color: transparent;
  background: color-mix(in srgb, var(--brand) 14%, transparent);
}

.chat__clear {
  margin-left: auto; flex-shrink: 0; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--border); border-radius: 50%; background: var(--surface); font-size: 18px;
}
.chat__mode { margin-bottom: 12px; }
.chat__mode-switch { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--border); border-radius: 11px; }
.chat__mode-switch button {
  flex: 1; min-height: 34px; padding: 6px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600;
}
.chat__mode-switch button[aria-pressed="true"] { background: color-mix(in srgb, var(--brand) 16%, var(--surface)); color: var(--text); }
.chat__mode-switch button:disabled { opacity: .45; }
.chat__mode-hint { margin: 6px 2px 0; }

/* Рацион и расписание: название слева, граммы — ровным столбцом справа. */
.portion__name { min-width: 0; }
.portion__amount { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.portion__per { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.portion--meal { align-items: flex-start; gap: 12px; }
.meal-portions {
  flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px; row-gap: 4px; align-items: baseline; padding-top: 2px;
}
.meal-portions__title { color: var(--muted); font-size: 14px; min-width: 0; }
.meal-portions__grams { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
/* «≈0.9 пауча» — строкой под граммами: рядом с ними подпись раздувала
   колонку цифр и сжимала название корма до узкой полоски. */
.meal-portions__grams .portion__units { display: block; font-weight: 400; font-size: 12px; }
.card-link {
  width: auto; margin-top: 6px; padding: 6px 0; border: 0; background: none;
  color: var(--accent-ink); font: inherit; font-size: 14px;
}

/* Плотный столбчатый график (30/90 дней): всё в ширину экрана, без прокрутки. */
.chart-bars--dense { grid-auto-columns: minmax(0, 1fr); gap: 2px; overflow: hidden; min-height: 120px; }
.chart-bars--tight { gap: 1px; }
.chart-bars--dense .chart-bars__column { min-width: 0; height: 116px; grid-template-rows: 1fr; overflow: hidden; }
.chart-bars--dense .chart-bars__track { height: 106px; }
.chart-bars--dense .chart-bars__fill { width: 100%; max-width: 12px; border-radius: 3px 3px 1px 1px; }
.chart-bars__axis {
  display: flex; justify-content: space-between; gap: 4px; margin-top: 4px;
  color: var(--muted); font-size: 9px; white-space: nowrap;
}

/* Чат — экран фиксированной высоты: шапка с режимом и очисткой сверху, поле
   ввода снизу, листается только переписка. Высоту от верха экрана до панели
   вкладок выставляет chat.js (--chat-top), иначе при длинной истории всё
   управление уезжало за пределы экрана. */
.chat-screen {
  min-height: 0;
  height: calc(var(--tg-viewport-stable-height, 100dvh) - var(--chat-top, 120px) - 84px - env(safe-area-inset-bottom));
}
.chat-screen .chat__header, .chat-screen .chat__mode { flex-shrink: 0; }
.chat-screen .chat__messages { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.chat-screen .chat__composer { position: static; flex-shrink: 0; background: none; }
.chat-screen .chat__hint { flex-shrink: 0; }
/* Готовые вопросы — одной строкой с прокруткой вбок: не отъедают место у
   переписки. */
.chat-screen .chat__quick {
  flex-shrink: 0; flex-wrap: nowrap; overflow-x: auto; padding: 6px 0 2px;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.chat-screen .chat__quick::-webkit-scrollbar { display: none; }
.chat-screen .chat__quick-btn { flex: 0 0 auto; min-height: 34px; padding: 7px 11px; white-space: nowrap; }

.chart__series-area { fill: var(--brand); opacity: .12; }
.chart__series-dot { fill: var(--surface); stroke: var(--brand); stroke-width: 2; }
.line-chart .chart__grid-line { opacity: .35; }

.care-alert { padding: 12px 0; border-top: 1px solid var(--border, #e6e6e6); }
.care-alert:first-child { border-top: 0; }
.care-alert__head { margin-bottom: 6px; }
.care-alert--alert { font-weight: 500; }
.care-alert__detail { white-space: pre-line; }
.care-alert--info .care-alert__head { font-weight: 500; }

/* Billing v14.1 */
.billing-hero { padding: 22px 4px 18px; text-align: center; }
.billing-hero__emoji { font-size: 42px; }
.billing-hero h1 { margin: 8px 0 6px; }
.billing-hero p { color: var(--muted); margin: 0 auto; max-width: 360px; }
.billing-plans { display: grid; gap: 14px; }
.billing-plan { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 18px; box-shadow: 0 8px 24px rgba(20,22,26,.06); }
.billing-plan--family { border-width: 2px; }
.billing-plan__top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.billing-plan h2 { margin:0 0 6px; }
.billing-badge { display:inline-block; font-size:12px; color:var(--muted); background:var(--bg); border-radius:999px; padding:4px 8px; }
.billing-price { font-size:22px; font-weight:800; white-space:nowrap; }
.billing-price small { font-size:12px; font-weight:500; color:var(--muted); }
.billing-plan ul { list-style:none; padding:12px 0 14px; margin:0; display:flex; flex-direction:column; gap:9px; }
.billing-feature { display:flex; align-items:flex-start; gap:9px; font-size:13.5px; line-height:1.35; }
.billing-feature__icon { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:rgba(99,102,241,0.15); color:var(--brand, #4f46e5); font-size:11px; font-weight:700; flex-shrink:0; margin-top:1px; }
.billing-plan--family .billing-feature__icon { background:rgba(16,185,129,0.15); color:#10b981; }
.billing-feature strong { color:var(--text, #fff); font-weight:600; }
.billing-feature__desc { color:var(--muted, #94a3b8); font-size:12.5px; margin-left:3px; }
.billing-buy { width:100%; margin-top:6px; }
.billing-note { text-align:center; padding:10px 14px 24px; }
.billing-manage { margin-top:14px; }
.billing-result { min-height:65vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px; }
.billing-result__icon { width:72px; height:72px; border-radius:50%; display:grid; place-items:center; background:var(--tile-fed); color:var(--brand-ink); font-size:40px; font-weight:800; margin-bottom:18px; }
.billing-result__icon--failed { background:rgba(239, 68, 68, 0.15); color:#ef4444; }
.billing-result__icon--loading { background:color-mix(in srgb, var(--muted) 16%, transparent); color:var(--text); font-size:32px; }
.billing-result p { color:var(--muted); max-width:340px; }
.billing-result button { margin-top:14px; min-width:230px; }
.billing-admin-table { display:grid; gap:0; }
.billing-admin-table > div { display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--border); }

/* --- Админские метрики ------------------------------------------------- */
.metrics-period { margin-bottom: 12px; }
.metrics-bars { display: flex; align-items: flex-end; gap: 3px; height: 96px; margin-top: 14px; }
.metrics-bars__day { flex: 1 1 0; min-width: 0; height: 100%; }
.metrics-bars__pair { display: flex; align-items: flex-end; gap: 1px; height: 100%; }
.metrics-bars__bar { flex: 1 1 0; min-height: 1px; border-radius: 3px 3px 0 0; }
.metrics-bars__bar--seen, .metrics-dot--seen { background: var(--border); }
.metrics-bars__bar--acted, .metrics-dot--acted { background: var(--brand); }
.metrics-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 4px 0 8px; }
.metrics-legend .metrics-dot:first-child { margin-left: 0; }
.metrics-table-wrap { overflow-x: auto; margin: 0 -4px; }
.metrics-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.metrics-table th, .metrics-table td { padding: 6px 4px; text-align: right; white-space: nowrap; }
.metrics-table th:first-child, .metrics-table tbody th { text-align: left; font-weight: 500; }
.metrics-table tbody tr { border-top: 1px solid var(--border); }
.metrics-table details summary { cursor: pointer; }
/* td в селекторе: иначе правило выше (.metrics-table td) специфичнее */
.metrics-table td.metrics-table__empty { text-align: left; white-space: normal; }
.billing-error { margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: var(--bg); color: var(--muted); }

/* Анализ питомца */
.analysis__open { width: 100%; margin: 12px 0; }
.analysis__status { font-size: 17px; }
.analysis__value { font-size: 26px; font-weight: 700; margin: 8px 0 4px; }
.analysis__list { margin: 8px 0 0; padding-left: 18px; }
.analysis__list li + li { margin-top: 6px; }
.analysis__charts { width: 100%; margin-top: 12px; }
.analysis__premium { text-align: center; margin-top: 12px; }
.analysis__today-link { margin-top: 16px; }
.analysis__export-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.analysis__export-buttons button { flex: 1 1 140px; }
.analysis__history { margin-top: 12px; }
.analysis__history-row { width: 100%; display: flex; justify-content: space-between; gap: 12px; text-align: left; background: none; border: 0; padding: 10px 0; }

/* ---- Лакомства ---- */
.today__treats-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  padding: 4px 0 6px;
  margin: 6px 0 2px;
}
.today__treats-scroll::-webkit-scrollbar {
  display: none;
}

.today__treat-chip {
  flex: 0 0 auto;
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, var(--text) 12%);
  color: var(--text);
  line-height: 1.2;
}
.today__treat-chip:active {
  opacity: 0.75;
  transform: scale(0.97);
}
.today__treat-chip .today__treat-emoji {
  font-size: 14px;
  line-height: 1;
}
.today__treat-chip .today__treat-title {
  font-weight: 600;
  font-size: 13px;
}
.today__treat-chip .today__treat-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  padding: 2px 6px;
  border-radius: 8px;
  flex-shrink: 0;
}

.treats__head { margin-bottom: 10px; }
.treats__head h1 { margin-bottom: 2px; }

.treats__preset-buttons { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }

.treats__preset-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  padding: 10px 14px;
  width: 100%;
}

.treats__preset-btn span { flex-shrink: 0; }

.treats__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.treats__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.treats__checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  padding: 4px 0;
  user-select: none;
}

.treats__checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--brand);
}

.treats__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--tg-theme-secondary-bg-color, #f0f0f0);
}

.treats__row:last-child { border-bottom: none; }

.treats__row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.treats__row-delete {
  background: none;
  border: none;
  color: var(--tg-theme-destructive-text-color, #e53935);
  font-size: 18px;
  padding: 4px 8px;
  cursor: pointer;
  opacity: 0.55;
  line-height: 1;
}

.treats__row-delete:active { opacity: 1; }

.treats__catalog-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 2px;
}

.treats__sheet-fav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  width: 100%;
  margin-bottom: 12px;
  cursor: pointer;
}

.treats__stepper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0;
  color: var(--text);
}

.treats__stepper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.treats__stepper-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
}

.treats__stepper-btn:active {
  background: var(--surface-press);
}

.treats__stepper-val {
  font-size: 17px;
  font-weight: 600;
  min-width: 32px;
  text-align: center;
  color: var(--text);
}

.pill-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  background: var(--bg);
  padding: 4px;
  border-radius: var(--radius);
}

.pill-tab {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  border-radius: calc(var(--radius) - 2px);
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.pill-tab--active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.today__treat-chip.today__treat-fav {
  border: 1.5px solid var(--brand);
}

/* --- анализ: экспорт для ветеринара --- */
.analysis__export-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 8px;
}

.analysis__export-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--tile-idle);
  border: 1px solid var(--border);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.analysis__export-item:active {
  transform: scale(0.99);
  background: color-mix(in srgb, var(--text) 6%, var(--tile-idle));
}

.analysis__export-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.analysis__export-media {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.analysis__export-info {
  flex: 1;
  min-width: 0;
}

.analysis__export-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.analysis__export-sub {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
  margin-top: 2px;
}

.analysis__export-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  color: var(--muted);
  flex-shrink: 0;
}

.analysis__export-hint {
  margin: 8px 0 0;
}

/* --- бейджи и теги --- */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  color: var(--brand);
}

.badge--family {
  background: color-mix(in srgb, #60a5fa 20%, transparent);
  color: #60a5fa;
}

.badge--muted {
  background: color-mix(in srgb, var(--muted) 16%, transparent);
  color: var(--muted);
}

/* --- экран «Как пользоваться» --- */
.howto-card {
  padding: 4px 16px;
  margin-bottom: var(--gap);
}

.howto-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
}

.howto-item + .howto-item {
  border-top: 1px solid var(--border);
}

.howto-item__icon {
  font-size: 22px;
  line-height: 1.1;
  flex-shrink: 0;
  margin-top: 2px;
}

.howto-item__body {
  flex: 1;
  min-width: 0;
}

.howto-item__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.howto-item__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.howto-item__desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
  margin: 0;
}

/* --- экран «О приложении» --- */
.about-hero {
  text-align: center;
  padding: 20px 16px 18px;
}

.about-hero__icon {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 8px;
}

.about-hero__name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}

.about-hero__desc {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 10px;
  line-height: 1.35;
}

.about-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
}

.about-feature + .about-feature {
  border-top: 1px solid var(--border);
}

.about-feature__icon {
  font-size: 20px;
  line-height: 1.1;
  flex-shrink: 0;
  margin-top: 1px;
}

.about-feature__title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}

.about-feature__desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
  margin: 0;
}

.about-footer {
  text-align: center;
  padding: 16px 16px 28px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

/* --- PWA установка и Web Push баннеры --- */

.pwa-install-banner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.pwa-install-banner__content {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.pwa-install-banner__icon {
  font-size: 22px;
  flex-shrink: 0;
}

.pwa-install-banner__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pwa-install-banner__info strong {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-install-banner__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.pwa-push-prompt {
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.pwa-push-prompt__icon {
  font-size: 24px;
  flex-shrink: 0;
}

.pwa-push-prompt__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.pwa-push-prompt__text strong {
  font-size: 14px;
}

.pwa-push-prompt__actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.install-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 10px 0;
}

.install-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg);
  padding: 12px;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--border);
}

.install-step__num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.install-step__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* --------------------------------------------------------------------------
   Today Evening Summary V1
   -------------------------------------------------------------------------- */

.hero--evening {
  background: color-mix(in srgb, var(--brand) 18%, var(--surface));
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--border));
}

.hero--evening .hero__ring {
  background: conic-gradient(var(--brand) calc(var(--p) * 1%), color-mix(in srgb, var(--muted) 25%, transparent) 0);
}

.hero--evening .hero__ring span {
  background: var(--surface);
  color: var(--text);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  margin-bottom: 2px;
}

.hero__goodnight {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed color-mix(in srgb, currentColor 20%, transparent);
  font-size: 13px;
  line-height: 1.4;
  font-style: italic;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero__goodnight strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
  font-style: normal;
}

/* Вертикальный Timeline */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 16px;
  position: relative;
}

.timeline-item {
  display: flex;
  gap: 12px;
  position: relative;
  padding-bottom: 16px;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 24px;
  flex-shrink: 0;
}

.timeline-node {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  z-index: 1;
  background: var(--surface);
  border: 2px solid var(--border);
  color: var(--muted);
}

.timeline-node--completed {
  background: var(--dot-fed, #10b981);
  border-color: var(--dot-fed, #10b981);
  color: #fff;
}

.timeline-node--current {
  background: var(--dot-part, #f59e0b);
  border-color: var(--dot-part, #f59e0b);
  color: #fff;
}

.timeline-node--next {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink, #fff);
}

.timeline-node--missed {
  background: var(--danger, #ef4444);
  border-color: var(--danger, #ef4444);
  color: #fff;
}

.timeline-line {
  flex: 1;
  width: 2px;
  background: var(--border);
  margin: 2px 0;
}

.timeline-card {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  cursor: default;
  transition: opacity .15s, border-color .15s;
}

.timeline-card--tappable {
  cursor: pointer;
}

.timeline-card--tappable:active {
  opacity: .75;
}

.timeline-card--current {
  border-color: var(--dot-part, #f59e0b);
  background: color-mix(in srgb, var(--dot-part, #f59e0b) 6%, var(--surface));
}

.timeline-card--next {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 20%, transparent);
}

.timeline-card--last {
  /* Без принудительной синей рамки, чтобы последнее кормление не выглядело активным */
}

.timeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.timeline-time {
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.timeline-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  display: inline-block;
}

.timeline-badge--completed {
  background: color-mix(in srgb, var(--dot-fed, #10b981) 15%, transparent);
  color: var(--dot-fed, #10b981);
}

.timeline-badge--current {
  background: color-mix(in srgb, var(--dot-part, #f59e0b) 15%, transparent);
  color: var(--dot-part, #f59e0b);
}

.timeline-badge--next {
  background: color-mix(in srgb, var(--brand) 15%, transparent);
  color: var(--brand);
}

.timeline-badge--missed {
  background: color-mix(in srgb, var(--danger, #ef4444) 15%, transparent);
  color: var(--danger, #ef4444);
}

.timeline-body {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

/* «Миска заметила» */
.today__observations-card {
  margin-bottom: 12px;
}

.today__obs-item {
  padding: 8px 12px;
  border-radius: var(--radius-sm, 8px);
  margin-top: 6px;
  background: color-mix(in srgb, var(--muted) 8%, transparent);
  border-left: 3px solid var(--muted);
}

.today__obs-item--info {
  border-left-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
}

.today__obs-item--attention,
.today__obs-item--warning {
  border-left-color: var(--dot-part, #f59e0b);
  background: color-mix(in srgb, var(--dot-part, #f59e0b) 8%, var(--surface));
}

.today__obs-item--urgent {
  border-left-color: var(--danger, #ef4444);
  background: color-mix(in srgb, var(--danger, #ef4444) 8%, var(--surface));
}

.today__obs-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}

.today__obs-detail {
  font-size: 12px;
  margin-top: 2px;
  line-height: 1.35;
}

.today__weight-card {
  margin-bottom: 12px;
  cursor: pointer;
}

/* Действия в карточке таймлайна */
.timeline-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: nowrap;
}

.timeline-actions .btn-primary {
  width: auto;
  flex: 0 1 auto;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
}

.timeline-actions .btn-secondary {
  width: auto;
  flex: 0 0 auto;
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 8px;
}

.timeline-btn-mini-more {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  padding: 2px 7px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s;
}

.timeline-btn-mini-more:active {
  opacity: .7;
}

/* Баннер совместного кормления питомцев */
.today__group-banner {
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.today__group-banner-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.today__group-banner-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.today__group-banner-sub {
  font-size: 12px;
  color: var(--muted);
}

.today__group-banner-btn {
  flex: 0 0 auto;
  width: auto;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  white-space: nowrap;
}

/* Утренняя сводка на экране Сегодня */
.today__morning-card {
  background: color-mix(in srgb, #f59e0b 8%, var(--surface));
  border: 1px solid color-mix(in srgb, #f59e0b 25%, transparent);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
  position: relative;
}

.today__morning-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.today__morning-title {
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.today__morning-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.today__morning-menu-btn {
  background: none;
  border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  line-height: 1;
  padding: 3px 8px;
  cursor: pointer;
  transition: opacity .15s;
}

.today__morning-menu-btn:active {
  opacity: 0.7;
}

.today__morning-dismiss {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  padding: 4px;
  cursor: pointer;
}

.today__morning-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

.today__morning-pet-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, #f59e0b 20%, transparent);
}

.today__morning-pet-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text);
}