/* ============================================================
   AMOTG — примитивы дизайн-системы.
   Литеральных цветов и размеров здесь быть не должно: всё из tokens.css.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent }

/* Скроллит только область контента, страница целиком — никогда. */
html, body { height: 100%; overflow: hidden }

body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  font-feature-settings: 'tnum' 1, 'cv05' 1;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

/* Корневой контейнер. Высота приходит из Telegram.WebApp.viewportStableHeight:
   100vh в мини-аппе врёт — не учитывает шапку клиента и клавиатуру.
   Фолбэк 100% нужен для обычного браузера и первых кадров до init SDK. */
#app {
  height: var(--app-h, 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Цифры — всегда моноширинные и табличные. */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- каркас экрана ---------- */
.hdr {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--pad-screen) var(--sp-3);
}
.hdr h1 { font-size: var(--fs-title); font-weight: var(--fw-medium); letter-spacing: -.3px }
.hdr .sub { font-size: var(--fs-caption); color: var(--tx3) }

.body {
  flex: 1 1 auto;
  min-height: 0;                      /* иначе flex-элемент не даст себя сжать и скролл не включится */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;       /* тянем список, а не весь мини-апп */
  padding: 0 var(--pad-screen) calc(var(--sp-6) + env(safe-area-inset-bottom));
  scrollbar-width: none;
}
.body::-webkit-scrollbar { display: none }

.screen { display: none; animation: fade .18s ease }
.screen.on { display: block }
@keyframes fade { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }

.sec { margin-top: var(--gap-section) }
.sec:first-child { margin-top: 0 }
.sec-t {
  font-size: var(--fs-caption);
  color: var(--tx3);
  margin: 0 2px 9px;
  letter-spacing: .2px;
}

/* ---------- карточка ---------- */
.card {
  background: var(--surface);
  border: var(--bd);
  border-radius: var(--r-card);
  padding: var(--pad-card);
}
.card + .card { margin-top: var(--gap-card) }

/* ---------- строка ---------- */
.row { display: flex; align-items: center; gap: 11px }
.row + .row { border-top: var(--bd); padding-top: var(--sp-3); margin-top: var(--sp-3) }
.grow { flex: 1; min-width: 0 }
.t-main { font-size: var(--fs-card-title); color: var(--tx) }
.t-sub  { font-size: var(--fs-caption); color: var(--tx2); margin-top: 2px }
.chev   { color: var(--tx3); flex: 0 0 auto }

/* ---------- статусные метки ---------- */
.pill {
  font-size: var(--fs-pill);
  padding: 3px 9px;
  border-radius: var(--r-pill);
  flex: 0 0 auto;
  white-space: nowrap;
}
.pill.live { color: var(--live);   background: var(--live-dim) }
.pill.warn { color: var(--warn);   background: var(--warn-dim) }
.pill.dngr { color: var(--danger); background: var(--danger-dim) }
.pill.idle { color: var(--tx2);    background: var(--pill-bg) }

.dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--tx3) }
.dot.live {
  background: var(--live);
  box-shadow: 0 0 0 0 var(--live-glow);
  animation: pulse 2.2s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 7px transparent }
  100% { box-shadow: 0 0 0 0 transparent }
}

/* ---------- полоса рисок: один чат = одна риска ---------- */
.ticks { display: flex; gap: 3px; margin: 13px 0 var(--sp-1) }
.tick {
  flex: 1;
  height: 5px;
  min-width: 2px;
  border-radius: var(--r-tick);
  background: var(--track);
}
.tick.done { background: var(--accent) }
.tick.err  { background: var(--warn) }
.tick.now  { background: var(--tx); animation: blink 1.1s steps(2) infinite }
@keyframes blink { 50% { opacity: .25 } }

.ticks-lbl {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-pill);
  color: var(--tx3);
}

/* сплошная полоса — для свёрнутых карточек */
.bar {
  height: 3px;
  border-radius: var(--r-tick);
  background: var(--track);
  margin-top: 7px;
  overflow: hidden;
}
.bar i { display: block; height: 100%; background: var(--accent) }

/* ---------- метрики ---------- */
.stats {
  display: flex;
  gap: var(--sp-5);
  border-top: var(--bd);
  margin-top: 13px;
  padding-top: var(--sp-3);
}
.stat .v { font-size: var(--fs-metric); font-weight: var(--fw-medium); line-height: 1.1 }
.stat .k { font-size: var(--fs-pill); color: var(--tx2); margin-top: 3px }
.stat.warn .v   { color: var(--warn) }
.stat.muted .v  { color: var(--tx2) }
.stat.danger .v { color: var(--danger) }

.quote {
  font-size: var(--fs-row);
  color: var(--tx-quote);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- поля ввода ---------- */
.field { margin-top: var(--sp-3) }
.field:first-child { margin-top: 0 }

label.f {
  display: block;
  font-size: var(--fs-caption);
  color: var(--tx2);
  margin: 0 0 7px 2px;
}

input, select, textarea {
  width: 100%;
  height: var(--h-ctl);
  padding: 0 var(--sp-3);
  background: var(--surface-hi);
  color: var(--tx);
  border: var(--bd);
  border-radius: var(--r-ctl);
  font-family: inherit;
  font-size: var(--fs-input);
  outline: none;
  appearance: none;
  transition: border-color var(--tr), box-shadow var(--tr);
}
textarea {
  height: auto;
  min-height: 112px;
  padding: 11px var(--sp-3);
  line-height: 1.5;
  resize: vertical;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent) }
input:focus, textarea:focus { box-shadow: var(--focus-ring) }
input::placeholder, textarea::placeholder { color: var(--tx3) }

select {
  padding-right: 34px;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
}

.hint { font-size: var(--fs-hint); color: var(--tx3); margin-top: 7px; line-height: 1.45 }
.counter { float: right; font-size: var(--fs-hint); color: var(--tx3) }

/* ---------- диапазон «от — до» ---------- */
.range { display: flex; align-items: center; gap: 9px }
.range input { text-align: center }
.range span { font-size: var(--fs-caption); color: var(--tx3); flex: 0 0 auto }

/* ---------- дни недели ---------- */
.days { display: flex; gap: 6px }
.day {
  flex: 1;
  height: var(--h-day);
  border-radius: var(--r-day);
  background: var(--surface-hi);
  border: var(--bd);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-caption);
  color: var(--tx2);
  cursor: pointer;
  transition: var(--tr);
  user-select: none;
}
.day.on { background: var(--accent-dim); border-color: var(--accent-line); color: var(--accent-tx) }

/* ---------- кнопки ---------- */
.btn {
  width: 100%;
  height: var(--h-btn);
  border: var(--bd-hi);
  border-radius: var(--r-ctl);
  background: var(--ctl-bg);
  color: var(--tx);
  font-family: inherit;
  font-size: var(--fs-btn);
  cursor: pointer;
  transition: var(--tr);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.btn:active { transform: scale(.985) }
.btn:disabled { opacity: .45; cursor: default }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: var(--fw-medium) }
.btn.ghost-danger { background: transparent; border-color: var(--danger-line); color: var(--danger) }
.btn.sm { height: var(--h-btn-sm); font-size: var(--fs-btn-sm) }
.btns { display: flex; gap: 9px; margin-top: var(--sp-3) }

.icon-btn {
  width: var(--h-icon);
  height: var(--h-icon);
  border-radius: var(--r-day);
  background: var(--ctl-bg);
  border: var(--bd);
  color: var(--tx2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: var(--fs-icon);
}
.icon-btn.danger { color: var(--danger); border-color: var(--danger-line-2) }

/* ---------- пустое состояние ---------- */
.empty { text-align: center; padding: 56px var(--sp-5) }
.empty .ic { font-size: 30px; color: var(--tx3); margin-bottom: var(--sp-3); display: block }
.empty h3 { font-size: var(--fs-lead); font-weight: var(--fw-medium); margin-bottom: 6px }
.empty p { font-size: var(--fs-row); color: var(--tx2); line-height: 1.5; margin-bottom: 18px }

/* ---------- раскрывающийся блок ---------- */
.fold-h { display: flex; align-items: center; gap: 9px; cursor: pointer }
.fold-c { display: none; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: var(--bd) }
.fold.open .fold-c { display: block }
.fold.open .fold-h .plus { transform: rotate(45deg) }
.plus { transition: transform .18s; font-size: var(--fs-icon); color: var(--tx2) }

/* ---------- нижняя навигация ---------- */
.tabs {
  flex: 0 0 auto;          /* не сжимается, когда контента много */
  position: relative;      /* перебивает position:fixed из прежней вёрстки */
  display: flex;
  border-top: var(--bd);
  background: var(--bg);
  /* нижний отступ — под полоску жестов на iPhone */
  padding: 7px 2px calc(10px + env(safe-area-inset-bottom));
}
.tab {
  flex: 1;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--tx3);
  font-family: inherit;
  padding: 3px 0;
  transition: color var(--tr);
}
.tab .ic { font-size: 20px; display: block; line-height: 1.35 }
.tab .lb { font-size: var(--fs-tab); margin-top: 1px }
.tab.on { color: var(--accent) }

/* ---------- иконки ---------- */
svg.i {
  width: 1em; height: 1em;
  stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -.13em;
}

/* ---------- журнал ---------- */
.chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  margin-bottom: var(--sp-3);
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none }
.chip {
  flex: 0 0 auto;
  height: var(--h-chip);
  padding: 0 var(--sp-3);
  border-radius: var(--r-chip);
  background: var(--surface-hi);
  border: var(--bd);
  color: var(--tx2);
  font-size: var(--fs-caption);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: var(--tr);
  white-space: nowrap;
}
.chip.on { background: var(--accent-dim); border-color: var(--accent-line); color: var(--accent-tx) }
.chip .n { font-size: var(--fs-pill); opacity: .7 }

.daymark { font-size: var(--fs-hint); color: var(--tx3); margin: 18px 2px var(--sp-2); letter-spacing: .2px }
.daymark:first-child { margin-top: 0 }

.log { display: flex; gap: 11px; padding: 11px 0; border-bottom: var(--bd) }
.log:last-child { border-bottom: 0 }
.log .tm { font-size: var(--fs-hint); color: var(--tx3); flex: 0 0 42px; padding-top: 1px }
.log .bd { flex: 1; min-width: 0 }
.log .g  { font-size: var(--fs-row); color: var(--tx) }
.log .m  {
  font-size: var(--fs-caption); color: var(--tx2); margin-top: 3px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.log .st { flex: 0 0 auto; font-size: var(--fs-lead); padding-top: 1px }
.st.ok { color: var(--live) }
.st.er { color: var(--warn) }
.st.jn { color: var(--accent) }
.st.fw { color: var(--danger) }

.errcode {
  font-family: var(--font-mono);
  font-size: var(--fs-pill);
  color: var(--warn);
  background: var(--warn-dim);
  padding: 1px 6px;
  border-radius: 5px;
  margin-right: 6px;
}

/* ---------- сводка и список групп ---------- */
.sum { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3) }
.sum > div {
  flex: 1;
  background: var(--surface);
  border: var(--bd);
  border-radius: var(--r-sum);
  padding: 10px 11px;
}
.sum .v { font-family: var(--font-mono); font-size: var(--fs-metric-sm); font-weight: var(--fw-medium); line-height: 1.1 }
.sum .k { font-size: 11px; color: var(--tx2); margin-top: 3px }
.sum .v.ok    { color: var(--live) }
.sum .v.er    { color: var(--warn) }
.sum .v.queue { color: var(--tx2) }

.grp { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: var(--bd) }
.grp:last-child { border-bottom: 0 }
.grp .nm {
  flex: 1; min-width: 0;
  font-size: var(--fs-row); color: var(--tx);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.grp .tg { flex: 0 0 auto; font-size: var(--fs-pill); padding: 2px var(--sp-2); border-radius: 6px }
.tg.ok   { color: var(--live);      background: var(--live-dim) }
.tg.er   { color: var(--warn);      background: var(--warn-dim) }
.tg.now  { color: var(--accent-tx); background: var(--accent-dim) }
.tg.wait { color: var(--tx2);       background: var(--pill-bg) }
.grp .at {
  flex: 0 0 40px; text-align: right;
  font-family: var(--font-mono); font-size: var(--fs-pill); color: var(--tx3);
}

.showall {
  width: 100%;
  background: none;
  border: 0;
  color: var(--accent);
  font-family: inherit;
  font-size: 13px;
  padding: 11px 0 2px;
  cursor: pointer;
}

.hide { display: none !important }