/* Мира — веб-интерфейс PWA. Mobile-first, без зависимостей и сборки.
   Одна система токенов: светлая тема основная, тёмная включается по
   системной настройке. Все размеры/цвета/тени берутся отсюда. */

:root {
  /* поверхности */
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --surface-3: #e8eaf0;
  --border: #e2e5ec;
  --border-strong: #cfd4de;

  /* текст */
  --text: #14161a;
  --text-2: #5b6472;
  --text-3: #8b94a3;

  /* акценты и статусы */
  --accent: #3d63dd;
  --accent-strong: #2c4cbd;
  --accent-soft: #eaf0ff;
  --accent-text: #2c4cbd;
  --danger: #cc3b3b;
  --danger-soft: #fdecec;
  --success: #1f8a54;
  --success-soft: #e7f6ee;
  --warning: #9a6200;
  --warning-soft: #fdf3e2;

  /* радиусы */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* отступы */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 44px;

  /* тени */
  --shadow-1: 0 1px 2px rgba(18, 22, 31, .06);
  --shadow-2: 0 6px 20px rgba(18, 22, 31, .08);
  --shadow-nav: 0 -1px 0 var(--border);

  /* типографика */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --t-h1: 26px;
  --t-h2: 17px;
  --t-body: 17px;
  --t-meta: 14px;

  /* служебное */
  --tap: 44px;
  --content-max: 720px;
  --tabbar-h: 62px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115;
    --surface: #181b22;
    --surface-2: #1f232c;
    --surface-3: #262b36;
    --border: #2a2f3a;
    --border-strong: #3a414f;

    --text: #e9edf3;
    --text-2: #a4adbd;
    --text-3: #7d8697;

    --accent: #6b93ff;
    --accent-strong: #5480f0;
    --accent-soft: rgba(107, 147, 255, .14);
    --accent-text: #aac1ff;
    --danger: #ff7b7b;
    --danger-soft: rgba(255, 107, 107, .14);
    --success: #5cc48d;
    --success-soft: rgba(92, 196, 141, .14);
    --warning: #e0a44b;
    --warning-soft: rgba(224, 164, 75, .14);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-2: 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-nav: 0 -1px 0 var(--border);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

body { min-height: 100svh; }

.hidden { display: none !important; }
.muted { color: var(--text-2); }
.small { font-size: var(--t-meta); line-height: 1.45; }
.error { color: var(--danger); }

h1 { font-size: var(--t-h1); line-height: 1.25; margin: 0; letter-spacing: -.02em; }
h2 { font-size: var(--t-h2); line-height: 1.3; margin: 0; font-weight: 650; letter-spacing: -.01em; }
p  { margin: 0; }

/* ---------- экран входа ---------- */

.login-screen {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(var(--s-6), env(safe-area-inset-top)) var(--s-4)
           calc(var(--s-6) + env(safe-area-inset-bottom));
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: var(--s-7) var(--s-6) var(--s-6);
  text-align: center;
}

.login-mark {
  width: 56px; height: 56px;
  margin: 0 auto var(--s-4);
  border-radius: 18px;
  background: var(--accent);
  color: #fff;
  font-size: 26px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-1);
}

.login-card h1 { margin-bottom: var(--s-2); }
.login-sub { margin-bottom: var(--s-6); font-size: var(--t-meta); }
.login-card .field { text-align: left; }
.login-card .block-btn { margin-top: var(--s-4); }
.login-card .error { margin-top: var(--s-3); font-size: var(--t-meta); }

/* ---------- каркас приложения ---------- */

.app {
  min-height: 100svh;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s-4));
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
  padding-top: env(safe-area-inset-top);
}

.topbar-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--s-3) var(--s-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.brand { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }

.brand-mark {
  width: 32px; height: 32px; flex: none;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 15px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}

.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.brand-text strong { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.brand-sub { font-size: 12px; }

.views {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--s-5) var(--s-4) var(--s-6);
}

.view { display: block; }
.view[hidden] { display: none; }

.hero { margin-bottom: var(--s-5); }
.hero h1 { margin-bottom: var(--s-2); }
.hero p { font-size: var(--t-meta); }

/* ---------- секции ---------- */

.block { margin-bottom: var(--s-6); }

.block-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
  min-height: 28px;
}

/* ---------- поля ввода ---------- */

.field { display: block; margin-top: var(--s-3); }
.field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: var(--s-2);
}

input, textarea, select {
  width: 100%;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 13px var(--s-4);
  font-size: var(--t-body); /* >=16px, иначе iOS зумит при фокусе */
  font-family: inherit;
  line-height: 1.4;
  box-shadow: var(--shadow-1);
  -webkit-appearance: none;
  appearance: none;
}

textarea { resize: vertical; min-height: 96px; }

input::placeholder, textarea::placeholder { color: var(--text-3); }

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

input[readonly] { background: var(--surface-2); color: var(--text-2); }

select {
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
                    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

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

button {
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 12px var(--s-5);
  min-height: var(--tap);
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}

button:disabled { opacity: .5; cursor: default; }

button.primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-1); }
button.primary:active:not(:disabled) { background: var(--accent-strong); }

button.ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-1);
}
button.ghost:active:not(:disabled) { background: var(--surface-2); }

button.link {
  background: none;
  color: var(--accent-text);
  border: none;
  padding: var(--s-2);
  min-height: 32px;
  font-size: var(--t-meta);
  font-weight: 600;
  box-shadow: none;
}
button.link:active:not(:disabled) { opacity: .6; }

button.block-btn { width: 100%; }

button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Компактные кнопки-чипы (действия напоминаний, быстрые команды) */
.rem-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }

.rem-btn {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  min-height: 36px;
  font-size: var(--t-meta);
  font-weight: 550;
  box-shadow: var(--shadow-1);
}
.rem-btn:active:not(:disabled) { background: var(--surface-2); }
.rem-btn.primary-soft { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }

/* ---------- строки/ряды ---------- */

.row { display: flex; gap: var(--s-2); margin-top: var(--s-3); align-items: stretch; }
.row.wrap { flex-wrap: wrap; }
.row .primary { flex: 1; }
.row input { flex: 1; min-width: 0; }
.row button { flex: none; white-space: nowrap; }
.composer .row .ghost { min-width: 116px; }

/* ---------- ответ Миры ---------- */

.reply {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  padding: var(--s-4);
  margin-bottom: var(--s-6);
}
.reply h2 { color: var(--text-2); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
#reply-text { margin-top: var(--s-2); font-size: var(--t-body); white-space: pre-wrap; }

/* ---------- чипы ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-3); }

.chip {
  background: var(--surface-2);
  color: var(--text-2);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  font-size: 13px;
  line-height: 1.4;
}
.chip.cat { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }

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

.list { list-style: none; margin: 0; padding: 0; }

.list li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  padding: var(--s-4);
  margin-bottom: var(--s-2);
}

/* Пустое состояние и статусы приходят как <li class="muted small"> из app.js */
.list li.muted.small {
  background: none;
  border: 1px dashed var(--border-strong);
  box-shadow: none;
  color: var(--text-2);
  text-align: center;
  padding: var(--s-5) var(--s-4);
}

.list .t { font-size: var(--t-body); white-space: pre-wrap; word-break: break-word; }
.list .m {
  margin-top: var(--s-2);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: var(--t-meta);
  color: var(--text-2);
}

/* Проблемы доставки: терминальный отказ отмечен полосой danger */
.list li.delivery.dead { border-left: 3px solid var(--danger); }

/* Почта: карточка отправителя */
.list li.sender .sender-ctrls { align-items: center; }
.list li.sender .voice-speed { flex: none; width: auto; }
.list li.sender .sender-quick { margin-top: var(--s-2); }

/* ---------- переключатели ---------- */

.toggles { display: flex; flex-direction: column; gap: var(--s-1); margin-top: var(--s-3); }

.toggle {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--tap);
  margin-top: var(--s-2);
  color: var(--text-2);
  font-size: var(--t-meta);
  cursor: pointer;
  user-select: none;
}
.toggle input[type="checkbox"] {
  width: 20px; height: 20px;
  padding: 0; flex: none;
  accent-color: var(--accent);
  box-shadow: none;
  border-radius: 6px;
}

/* ---------- голос ---------- */

.voice-settings {
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2);
  border-radius: var(--r-md);
}
.voice-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.voice-head label { display: flex; align-items: center; gap: var(--s-2); }

.voice-speed {
  width: auto;
  padding: 6px 28px 6px 10px;
  min-height: 34px;
  font-size: 13px;
  background-color: var(--surface);
  border-radius: var(--r-sm);
  box-shadow: none;
}
.select-wide { width: 100%; padding: 13px 36px 13px var(--s-4); min-height: var(--tap); font-size: var(--t-body); }

/* Запись голоса: кнопка «Стоп» — красный пульсирующий акцент */
button.ghost.rec {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: var(--danger);
  animation: mira-pulse 1.1s ease-in-out infinite;
}
@keyframes mira-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- нижняя навигация (мобильная) ---------- */

.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: flex;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  box-shadow: var(--shadow-nav);
  padding-bottom: env(safe-area-inset-bottom);
}

.sidenav { display: none; }

.nav-item {
  flex: 1;
  min-width: 0;
  min-height: var(--tabbar-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: var(--s-2) 4px;
  background: none;
  border: none;
  border-radius: 0;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  box-shadow: none;
}
.nav-ico { font-size: 19px; line-height: 1; }
.nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.nav-item[aria-current="page"] { color: var(--accent); }
.nav-item:active:not([aria-current="page"]) { color: var(--text-2); }

/* ---------- подвал ---------- */

.foot { text-align: center; margin-top: var(--s-6); }

/* ---------- планшет/десктоп ---------- */

@media (min-width: 900px) {
  :root { --content-max: 760px; }

  .app {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    grid-template-areas: "top top" "side main";
    align-items: start;
    padding-bottom: 0;
    max-width: 1140px;
    margin: 0 auto;
  }

  .topbar { grid-area: top; }
  .topbar-inner { max-width: none; padding: var(--s-4) var(--s-6); }

  .sidenav {
    grid-area: side;
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    position: sticky;
    top: 76px;
    padding: var(--s-5) var(--s-3);
  }

  .sidenav .nav-item {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--s-3);
    min-height: var(--tap);
    padding: 10px var(--s-4);
    border-radius: var(--r-md);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-2);
  }
  .sidenav .nav-ico { font-size: 16px; width: 20px; text-align: center; }
  .sidenav .nav-item[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); }
  .sidenav .nav-item:hover:not([aria-current="page"]) { background: var(--surface-2); color: var(--text); }

  .views { grid-area: main; padding: var(--s-6) var(--s-6) var(--s-8); margin: 0; }
  .tabbar { display: none; }

  button.ghost:hover:not(:disabled) { background: var(--surface-2); }
  button.primary:hover:not(:disabled) { background: var(--accent-strong); }
  .rem-btn:hover:not(:disabled) { background: var(--surface-2); }
  .list li { transition: border-color .15s ease; }
  .list li:hover { border-color: var(--border-strong); }
}

@media (min-width: 1240px) {
  :root { --content-max: 820px; }
}