/* Оформление поверх GlassKit (vendor/glasskit.css) — раскладка и то, чего
   в наборе нет: пузыри переписки, карточки столов и обязанностей.
   Цвета, скругления, отступы и стекло берём из его токенов --gl-*. */

/* Фирменный цвет набора — оранжевый; ставим системный синий iOS
   и остужаем фон, чтобы вид был как в айфоне, а не тёплый. */
:root {
  --gl-color-primary: #007aff;
  --gl-color-primary-mid: #3d9bff;
  --gl-color-primary-dark: #0062cc;
  --gl-color-primary-border: rgba(0, 122, 255, .55);
  --gl-color-primary-surface: rgba(0, 122, 255, .12);
  --gl-color-primary-on-surface: #0062cc;
  --gl-color-on-primary: #fff;
  --gl-bg-aurora-1: rgba(0, 122, 255, .10);
  --gl-bg-aurora-2: rgba(88, 86, 214, .08);
  --gl-bg-aurora-3: rgba(0, 199, 190, .06);
  --gl-bg-warm-glow: rgba(120, 140, 170, .05);
  --kb: 0px;               /* высота клавиатуры, считает app.js */
}

[data-theme="dark"] {
  --gl-color-primary: #0a84ff;
  --gl-color-primary-mid: #4aa8ff;
  --gl-color-primary-dark: #0060df;
  --gl-color-primary-border: rgba(10, 132, 255, .6);
  --gl-color-primary-surface: rgba(10, 132, 255, .18);
  --gl-color-primary-on-surface: #7ab8ff;
  --gl-bg-aurora-1: rgba(10, 132, 255, .16);
  --gl-bg-aurora-2: rgba(94, 92, 230, .12);
  --gl-bg-aurora-3: rgba(0, 199, 190, .08);
  --gl-bg-warm-glow: rgba(120, 140, 170, .06);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
  overflow: hidden;              /* страница не ездит: двигаются только ленты */
  overscroll-behavior: none;
  touch-action: manipulation;    /* без двойного тапа и приближения */
}

body {
  margin: 0;
  /* клавиатура ужимает приложение, а не сдвигает его вверх */
  height: calc(100dvh - var(--kb));
  display: flex;
  flex-direction: column;
  color: var(--gl-color-text);
  font: 16px/1.45 -apple-system, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0; line-height: 1.2; }
/* поля ровно 16px — иначе Safari сам приближает страницу при вводе */
input, textarea, select { font-size: 16px; }

/* --- шапка --- */
header.glass-nav {
  flex: none;
  gap: var(--gl-space-sm);
  padding: var(--gl-space-sm) var(--gl-space-md);
  padding-top: max(var(--gl-space-sm), env(safe-area-inset-top));
}
header h1 { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
header .me { margin-left: auto; text-align: right; line-height: 1.2; font-size: 12.5px; color: var(--gl-color-text-muted); }
header .me b { display: block; font-size: 14px; font-weight: 600; color: var(--gl-color-text); }

/* --- экраны: горизонтальная лента с прилипанием --- */
.screens {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.screens::-webkit-scrollbar { display: none; }

.pane {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* прокручиваются только ленты внутри экранов */
.feed, .list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--gl-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--gl-space-sm);
}
.feed { gap: var(--gl-space-sm); }
@media (min-width: 760px) {
  .feed, .list { max-width: 820px; width: 100%; margin-inline: auto; }
  .duties { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-content: start; }
}

/* --- переписка --- */
.bubble {
  max-width: min(78%, 560px);
  width: fit-content;
  padding: 9px 13px;
  border-radius: var(--gl-radius-card);
  background: var(--gl-surface-2);
  border: 1.5px solid var(--gl-border-medium);
}
.bubble.mine {
  align-self: flex-end;
  background: var(--gl-color-primary);
  border-color: var(--gl-color-primary-border, var(--gl-color-primary));
  color: var(--gl-color-on-primary);
}
.bubble .who { font-size: 12px; opacity: .72; margin-bottom: 3px; }
.bubble .text { white-space: pre-wrap; word-break: break-word; }
.bubble img { display: block; margin-top: 8px; border-radius: var(--gl-radius-input); max-width: 100%; max-height: 320px; object-fit: cover; }
.bubble .at { font-size: 11px; opacity: .6; margin-top: 4px; text-align: right; }

.empty { margin: auto; text-align: center; font-size: 14px; color: var(--gl-color-text-muted); padding: var(--gl-space-xl); }

/* --- строка ввода и строка добавления стола: всегда на виду --- */
.composer, .addbar {
  flex: none;
  display: flex;
  gap: var(--gl-space-sm);
  align-items: flex-end;
  padding: var(--gl-space-sm) var(--gl-space-md);
}
.addbar { align-items: center; border-bottom: 1px solid var(--gl-border-subtle); }
.composer { border-top: 1px solid var(--gl-border-subtle); }
.composer .glass-textarea { flex: 1; min-width: 0; resize: none; max-height: 30vh; min-height: 46px; }
.composer .send { flex: none; width: 46px; height: 46px; padding: 0; }
.composer .send svg, .glass-pill svg { width: 20px; height: 20px; }
.addbar .glass-input { flex: 1; min-width: 0; text-align: center; font-weight: 650; }
.addbar .glass-btn, .glass-btn { width: auto; }
.glass-btn.gl-w-full { width: 100%; }
@media (min-width: 760px) {
  .composer, .addbar { max-width: 820px; width: 100%; margin-inline: auto; }
}

/* --- столы --- */
.glass-card.call, .glass-card.duty { padding: 13px 14px; }
.call { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--gl-space-md); align-items: center; }
.call .num { grid-row: span 2; font-size: 30px; font-weight: 700; min-width: 62px; text-align: center; font-variant-numeric: tabular-nums; }
.call .meta { font-size: 12.5px; color: var(--gl-color-text-muted); }
.call .checks { display: flex; flex-direction: column; gap: 6px; }
.call.done { opacity: .55; }
.call.done .num { text-decoration: line-through; }
.glass-checkbox.locked { opacity: .6; }

/* --- обязанности --- */
.duty { display: flex; flex-direction: column; gap: 10px; }
.duty h3 { font-size: 16px; font-weight: 650; }
.duty .shot { display: flex; gap: var(--gl-space-sm); align-items: center; }
.duty img { width: 62px; height: 62px; object-fit: cover; border-radius: var(--gl-radius-input); flex: none; background: var(--gl-surface-1); }
.duty .meta { font-size: 12.5px; color: var(--gl-color-text-muted); }

/* --- смена --- */
.card-head { font-size: 15px; font-weight: 650; margin-bottom: var(--gl-space-sm); }
.stat { display: flex; gap: var(--gl-space-lg); flex-wrap: wrap; }
.stat b { display: block; font-size: 22px; font-weight: 700; }
.stat span { font-size: 12.5px; color: var(--gl-color-text-muted); }

/* --- нижние вкладки: обычная панель, всегда на виду --- */
.tabs {
  flex: none;
  display: flex;
  background: var(--gl-color-bg-mid, var(--gl-surface-5));
  border-top: 1px solid var(--gl-border-subtle);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  backdrop-filter: blur(var(--gl-blur-light));
  -webkit-backdrop-filter: blur(var(--gl-blur-light));
}
.tab {
  flex: 1;
  border: 0;
  background: none;
  color: var(--gl-color-text-muted);
  padding: 7px 2px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: color .12s ease-out, transform .1s ease-out;
}
.tab svg { width: 24px; height: 24px; }
.tab.is-active { color: var(--gl-color-primary); font-weight: 600; }
.tab:active { transform: scale(.92); }

.glass-btn { transition: transform .1s ease-out, background-color .15s, border-color .15s, color .15s; }
.glass-btn:active:not(:disabled), .glass-pill:active { transform: scale(.95); }

@media (prefers-reduced-motion: reduce) {
  .tab, .glass-btn { transition: none; }
  .screens { scroll-behavior: auto; }
}

/* --- просмотр фото --- */
.viewer { position: fixed; inset: 0; background: rgba(0, 0, 0, .92); display: grid; place-items: center; z-index: 60; padding: 12px; }
.viewer img { max-width: 100%; max-height: 100%; border-radius: var(--gl-radius-input); }

/* --- вход --- */
/* на этой странице прокрутка нужна: форма может не поместиться с клавиатурой */
body.login-page { height: auto; min-height: 100dvh; display: block; overflow: auto; }
html:has(body.login-page) { overflow: auto; }

.login { min-height: 100dvh; display: grid; place-items: center; padding: var(--gl-space-lg); }
.login form { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: var(--gl-space-md); }
.login .glass-title { font-size: 26px; }
.roles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gl-space-xs); }
.roles .glass-btn { width: 100%; padding-block: 13px; }
.login .code { text-align: center; letter-spacing: .5em; font-size: 20px; font-weight: 650; }