@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

:root {
  --accent: #2AABEE;
  --accent-dark: #1E96D6;
  --accent-light: #6FCBFF;
  --bg: #DFE5EC;
  --text: #1C1C1E;
  --muted: #8E8E93;
  --muted-light: #B0B3B8;
  --border: #D3DAE2;
  --card: #ffffff;
  --header-bg: #F6F8FB;
  --input-bg: #EDF1F6;
  --input-border: #D5DCE4;
  --danger: #E0524F;
  --danger-dark: #C7433F;
  --danger-bg: #FCE9E9;
  --success: #28A745;
  --success-dark: #1F8A38;
  --success-bg: #E6F6EA;

  /* Важный пост — тёплый янтарный, хорошо заметен на синем интерфейсе
     и не путается с красным (ошибка/удаление) */
  /* Свои сообщения — светлый пузырь с обычным тёмным текстом, как в
     Телеграме: белым по яркому синему читать тяжело. */
  --bubble-mine: #D6ECFB;
  --bubble-mine-text: #10344A;

  --important: #F59E0B;
  --important-dark: #C2670A;
  --important-text: #8A4B04;
  --important-bg: #FFF6E6;
  --important-glow: rgba(245,158,11,.28);

  /* Тени: слоистые, для ощущения глубины/объёма */
  --shadow-xs: 0 1px 2px rgba(16,24,40,.05);
  --shadow: 0 1px 3px rgba(16,24,40,.06), 0 4px 10px -6px rgba(16,24,40,.08);
  --shadow-md: 0 10px 24px -8px rgba(16,24,40,.16), 0 3px 8px -3px rgba(16,24,40,.08);
  --shadow-lg: 0 26px 60px -14px rgba(16,24,40,.30), 0 10px 24px -8px rgba(16,24,40,.16);
  --shadow-glow: 0 10px 26px -6px rgba(42,171,238,.4);

  /* "3D"-кнопки: мягкий верхний блик + плотная контактная тень + мягкая ambient-тень */
  --btn-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 3px rgba(0,0,0,.08), 0 1px 0 rgba(16,24,40,.03), 0 10px 20px -8px rgba(30,150,214,.55), 0 3px 8px -2px rgba(30,150,214,.35);
  --btn-shadow-active: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 2px rgba(0,0,0,.12), 0 3px 8px -3px rgba(30,150,214,.4);
  --btn-shadow-neutral: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 3px rgba(0,0,0,.04), 0 1px 2px rgba(16,24,40,.06), 0 6px 14px -8px rgba(16,24,40,.18);
  --btn-shadow-neutral-active: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 1px rgba(0,0,0,.05), 0 2px 4px -2px rgba(16,24,40,.12);

  --ease: cubic-bezier(.22,.9,.35,1.1);

  /* Цветные градиенты для объёмных иконок-плашек (меню, разделы) */
  --ic-blue: linear-gradient(155deg, #6FCBFF 0%, #2AABEE 55%, #1B6FC2 100%);
  --ic-violet: linear-gradient(155deg, #C6A6FF 0%, #8B5CF6 55%, #6428C4 100%);
  --ic-teal: linear-gradient(155deg, #7DEEDC 0%, #14B8A6 55%, #0C7A6E 100%);
  --ic-orange: linear-gradient(155deg, #FFCB8E 0%, #F59E0B 55%, #C2670A 100%);
  --ic-pink: linear-gradient(155deg, #FFAFCB 0%, #F43F8E 55%, #C81E68 100%);
  --tile-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 4px rgba(0,0,0,.1), 0 6px 14px -6px rgba(0,0,0,.35);
  --tile-shadow-sm: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 2px rgba(0,0,0,.1), 0 3px 8px -4px rgba(0,0,0,.3);
}

:root[data-theme="dark"] {
  --accent: #35B7FF;
  --accent-dark: #2AABEE;
  --accent-light: #7FD4FF;
  --bg: #0B1218;
  --text: #EDEFF2;
  --muted: #8B98A5;
  --muted-light: #5C6B79;
  --border: #1E2933;
  --card: #141E27;
  --header-bg: #141E27;
  --input-bg: #1B2731;
  --input-border: #263440;
  --danger: #F27272;
  --danger-dark: #E85555;
  --danger-bg: #3A2126;
  --success: #4FC96A;
  --success-dark: #3DAE56;
  --success-bg: #1E3323;
  --bubble-mine: #17384D;
  --bubble-mine-text: #EAF4FB;

  --important: #FBBF24;
  --important-dark: #D97706;
  --important-text: #FFD98A;
  --important-bg: #2E2411;
  --important-glow: rgba(251,191,36,.22);

  --shadow-xs: 0 1px 2px rgba(0,0,0,.35);
  --shadow: 0 1px 3px rgba(0,0,0,.35), 0 4px 12px -6px rgba(0,0,0,.4);
  --shadow-md: 0 12px 28px -8px rgba(0,0,0,.55), 0 4px 10px -4px rgba(0,0,0,.4);
  --shadow-lg: 0 30px 70px -16px rgba(0,0,0,.7), 0 12px 28px -10px rgba(0,0,0,.5);
  --shadow-glow: 0 10px 28px -6px rgba(53,183,255,.35);

  --btn-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 3px rgba(0,0,0,.3), 0 10px 22px -8px rgba(0,0,0,.6), 0 3px 10px -2px rgba(53,183,255,.3);
  --btn-shadow-active: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 2px rgba(0,0,0,.35), 0 3px 10px -4px rgba(0,0,0,.5);
  --btn-shadow-neutral: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -2px 3px rgba(0,0,0,.25), 0 6px 16px -8px rgba(0,0,0,.5);
  --btn-shadow-neutral-active: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 1px rgba(0,0,0,.3), 0 2px 6px -3px rgba(0,0,0,.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #35B7FF;
    --accent-dark: #2AABEE;
    --accent-light: #7FD4FF;
    --bg: #0B1218;
    --text: #EDEFF2;
    --muted: #8B98A5;
    --muted-light: #5C6B79;
    --border: #1E2933;
    --card: #141E27;
    --header-bg: #141E27;
    --input-bg: #1B2731;
    --input-border: #263440;
    --danger: #F27272;
    --danger-dark: #E85555;
    --danger-bg: #3A2126;
    --success: #4FC96A;
    --success-dark: #3DAE56;
    --success-bg: #1E3323;
  --bubble-mine: #17384D;
  --bubble-mine-text: #EAF4FB;

  --important: #FBBF24;
  --important-dark: #D97706;
  --important-text: #FFD98A;
  --important-bg: #2E2411;
  --important-glow: rgba(251,191,36,.22);

    --shadow-xs: 0 1px 2px rgba(0,0,0,.35);
    --shadow: 0 1px 3px rgba(0,0,0,.35), 0 4px 12px -6px rgba(0,0,0,.4);
    --shadow-md: 0 12px 28px -8px rgba(0,0,0,.55), 0 4px 10px -4px rgba(0,0,0,.4);
    --shadow-lg: 0 30px 70px -16px rgba(0,0,0,.7), 0 12px 28px -10px rgba(0,0,0,.5);
    --shadow-glow: 0 10px 28px -6px rgba(53,183,255,.35);

    --btn-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 3px rgba(0,0,0,.3), 0 10px 22px -8px rgba(0,0,0,.6), 0 3px 10px -2px rgba(53,183,255,.3);
    --btn-shadow-active: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 2px rgba(0,0,0,.35), 0 3px 10px -4px rgba(0,0,0,.5);
    --btn-shadow-neutral: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -2px 3px rgba(0,0,0,.25), 0 6px 16px -8px rgba(0,0,0,.5);
    --btn-shadow-neutral-active: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 1px rgba(0,0,0,.3), 0 2px 6px -3px rgba(0,0,0,.45);
  }
}

* { box-sizing: border-box; }

/* В приложении текст не выделяют — это не веб-страница. Зато системное
   выделение по долгому нажатию на iOS перехватывало наш жест вызова меню
   действий над сообщением, поэтому глушим его для ВСЕГО интерфейса.
   Исключение ниже — поля ввода, где выделение и правка нужны. */
* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
input, textarea, [contenteditable] {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

html, body {
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  /* Фон в цвет ленты: если iOS не отдал приложению зону "домашней"
     полоски (так бывает у PWA, установленного до появления
     viewport-fit=cover), снизу остаётся полоска фона страницы. В цвет
     ленты она не бросается в глаза, а под нижним меню её закрашивает
     сама панель — см. .bottom-nav ниже. */
  background: var(--bg);
  /* Разрешаем только обычную прокрутку — щипковый зум и зум по двойному
     тапу отключаем (в приложении они только ломают вёрстку). iOS Safari
     игнорирует user-scalable=no в meta, а touch-action учитывает. */
  touch-action: pan-y;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background .2s ease, color .2s ease;
  overscroll-behavior-y: none;
}

/* Не даём мобильным браузерам "резиново" оттягивать страницу
   (pull-to-refresh, bounce по краям). */
body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

/* Приложение прибито к самому окну, а не тянется по высоте.
   Любые подсчёты высоты (100%, 100dvh, JS-замер innerHeight) на iOS
   давали контейнер на несколько десятков пикселей короче реального
   экрана — отсюда и белая полоса под нижней панелью, и "висящее" меню.
   position: fixed + inset: 0 берёт ровно прямоугольник окна, считать
   ничего не нужно. Горизонтальное центрирование — через margin: auto. */
#app {
  position: fixed;
  /* Снизу отступаем на высоту экранной клавиатуры (--kb считается в JS по
     visualViewport). Без этого поле ввода пряталось за клавиатурой или,
     наоборот, зависало заметно выше неё. */
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--kb, 0px);
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
  overscroll-behavior: none;
}

/* Принудительный портрет на телефоне.
   iOS не поддерживает ни "orientation" из manifest.json, ни Screen
   Orientation API — в Safari и в установленном PWA экран поворачивается
   всё равно. Единственный работающий способ: развернуть само приложение
   обратно на 90°, поменяв местами его ширину и высоту. Для пользователя
   выглядит так, будто поворот просто не сработал.
   Ограничение по высоте отсекает десктоп: там альбомная ориентация
   нормальна, а окно всегда выше 520px. */
@media screen and (orientation: landscape) and (max-height: 520px) {
  #app {
    inset: auto;
    top: 50%;
    left: 50%;
    width: 100vh;
    height: 100vw;
    max-width: 100vh;
    margin: 0;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center center;
  }
  /* Клавиатура в повёрнутом виде занимает почти весь экран, поэтому
     подрезаем вертикальные отступы шапки и нижнего меню. */
  .header { padding-top: 4px; padding-bottom: 4px; }
  .bottom-nav { padding-bottom: 2px; }
}

button { font-family: inherit; }
input, textarea, select { font-family: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.icon { width: 20px; height: 20px; display: block; flex-shrink: 0; }
.icon.mini { width: 14px; height: 14px; }
.icon.rot-270 { transform: rotate(-90deg); }

/* ---------- Loading ---------- */
.loading-screen {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  filter: drop-shadow(0 4px 10px rgba(42,171,238,.35));
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Login ---------- */
.login-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.20) 0%, transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(255,255,255,.12) 0%, transparent 50%),
    linear-gradient(160deg, var(--accent-light) 0%, var(--accent) 42%, #1B7FD6 100%);
  padding: 20px;
}
.login-card {
  background: var(--card);
  border-radius: 24px;
  padding: 38px 28px;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.4);
}
.brand-logo {
  width: 64px; height: 64px;
  border-radius: 19px;
  background: linear-gradient(150deg, var(--accent-light) 0%, var(--accent) 50%, #1B6FC2 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: var(--btn-shadow), 0 14px 28px -10px rgba(30,150,214,.55);
  position: relative;
}
.brand-logo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(150deg, rgba(255,255,255,.35), transparent 55%);
  pointer-events: none;
}
.brand-logo .icon { width: 30px; height: 30px; stroke-width: 1.6; }
.brand-logo-sm { width: 32px; height: 32px; border-radius: 10px; box-shadow: var(--shadow-xs); }
.brand-logo-sm .icon { width: 17px; height: 17px; }
.login-title { font-size: 21px; font-weight: 800; margin-top: 16px; text-align: center; letter-spacing: -.3px; }
.login-subtitle { font-size: 13px; color: var(--muted); margin-top: 4px; text-align: center; }
.login-hint { font-size: 11.5px; color: var(--muted-light); margin-top: 14px; text-align: center; line-height: 1.5; }
.success-check {
  width: 52px; height: 52px; margin: 0 auto; border-radius: 50%;
  background: linear-gradient(150deg, var(--success) 0%, var(--success-dark) 100%);
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 24px -8px rgba(40,167,69,.5);
}
.success-check .icon { width: 26px; height: 26px; }

/* ---------- Auth tabs (login/register) ---------- */
.auth-tabs {
  display: flex; width: 100%; background: var(--bg); border-radius: 13px; padding: 4px; margin-top: 22px;
  box-shadow: inset 0 1px 3px rgba(16,24,40,.08);
}
.auth-tab {
  flex: 1; border: none; background: transparent; border-radius: 10px; padding: 9px 0;
  font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.auth-tab.active { background: var(--card); color: var(--text); box-shadow: var(--shadow); }

/* ---------- Form elements ---------- */
.field-label {
  font-size: 11.5px; font-weight: 700; color: var(--muted);
  margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .4px; display: block;
}
.field-input, .field-textarea {
  width: 100%;
  border: 1.5px solid var(--input-border);
  border-radius: 13px;
  padding: 12px 13px;
  /* см. комментарий у .comment-input: меньше 16px — iOS зумит страницу */
  font-size: 16px;
  outline: none;
  background: var(--input-bg);
  color: var(--text);
  box-shadow: inset 0 1px 2px rgba(16,24,40,.04);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field-textarea { resize: vertical; font-family: inherit; }
.field-input:focus, .field-textarea:focus { border-color: var(--accent); box-shadow: inset 0 1px 2px rgba(16,24,40,.04), 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.error-text { color: var(--danger); font-size: 13px; margin-top: 10px; line-height: 1.4; }
.link-toggle {
  background: transparent; border: none; color: var(--accent-dark); font-size: 12.5px;
  font-weight: 700; cursor: pointer; padding: 10px 0 0; text-align: left;
}
.link-toggle:active { opacity: .6; }

/* ---------- 3D buttons ---------- */
.btn-primary {
  width: 100%;
  background: linear-gradient(160deg, var(--accent-light) 0%, var(--accent) 55%, var(--accent-dark) 100%);
  color: #fff; border: none; border-radius: 13px;
  padding: 13.5px; font-size: 15px; font-weight: 700;
  margin-top: 20px; cursor: pointer;
  box-shadow: var(--btn-shadow);
  transform: translateY(0);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), filter .12s ease;
  letter-spacing: .1px;
}
.btn-primary:hover { filter: brightness(1.03); }
.btn-primary:active { transform: translateY(2px); box-shadow: var(--btn-shadow-active); filter: brightness(.98); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }

.btn-secondary {
  width: 100%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 60%, var(--bg)) 0%, var(--bg) 100%);
  color: var(--text); border: none; border-radius: 13px;
  padding: 12px; font-size: 14px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  box-shadow: var(--btn-shadow-neutral);
  transform: translateY(0);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.btn-secondary:active { transform: translateY(1px); box-shadow: var(--btn-shadow-neutral-active); }
.btn-danger-soft { color: var(--danger); background: var(--danger-bg); }
.btn-icon-only { display: flex; align-items: center; justify-content: center; padding: 12px 16px; }

/* ---------- Header ---------- */
/* Шапка тонкая и в цвет страницы — как в Телеграме. Раньше она занимала
   массивную синюю полосу, из-за которой в ленту помещалось всего два поста. */
.header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  padding: calc(7px + env(safe-area-inset-top, 0px)) 12px 7px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px;
  flex-shrink: 0;
  position: relative; z-index: 2;
}
.header-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.header-right { justify-self: end; }
.header-right { display: flex; gap: 4px; }
/* Заголовок всегда ровно по центру шапки: сетка из трёх колонок делает
   среднюю по центру только при равных боковых, а слева бывает кнопка
   "назад", справа — поиск. Поэтому центрируем содержимое самой колонки. */
.header-title-col { min-width: 0; text-align: center; }
.header-left, .header-right { min-width: 40px; }
/* Название — ярко-синим по светлому фону, как в Телеграме */
.header-title { color: var(--accent-dark); font-size: 17px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.2px; }
.header-subtitle { color: var(--muted); font-size: 11.5px; font-weight: 600; margin-top: 0; }
.icon-btn {
  background: var(--bg); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-dark);
  width: 40px; height: 40px; border-radius: 50%; padding: 0; flex-shrink: 0;
  box-shadow: var(--shadow-xs);
  transition: transform .12s var(--ease), background .15s ease;
}
.icon-btn .icon { width: 23px; height: 23px; stroke-width: 2.6; }
.icon-btn:active { transform: scale(.92); background: color-mix(in srgb, var(--accent) 16%, var(--bg)); }
.header .brand-logo-sm { width: 28px; height: 28px; border-radius: 9px; }
.header .brand-logo-sm .icon { width: 15px; height: 15px; }
.icon-btn-gray {
  background: var(--bg); border: none; border-radius: 50%;
  width: 42px; height: 42px; padding: 0; flex-shrink: 0;
  cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--muted);
  box-shadow: var(--btn-shadow-neutral);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.icon-btn-gray:active { transform: translateY(1px); box-shadow: var(--btn-shadow-neutral-active); }

/* ---------- Admin quick-access bar ---------- */
.admin-quickbar {
  display: flex; gap: 8px; padding: 7px 12px; background: var(--header-bg);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.quick-pill {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  flex: 1 1 0; min-width: 0;
  border: none; border-radius: 20px;
  padding: 7px 14px; font-size: 12.5px; font-weight: 700; color: #fff;
  cursor: pointer; position: relative;
  box-shadow: var(--btn-shadow);
  transform: translateY(0);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.quick-pill:active { transform: translateY(2px) scale(.97); box-shadow: var(--btn-shadow-active); }
.quick-pill .icon { color: #fff; }
.quick-pill:nth-child(1) { background: var(--ic-blue); }
.quick-pill:nth-child(2) { background: var(--ic-teal); }
.quick-pill:nth-child(3) { background: var(--ic-violet); }
.quick-pill:nth-child(4) { background: var(--ic-orange); }
.quick-pill-badge {
  background: linear-gradient(160deg, #FF7A7A, var(--danger-dark)); color: #fff; font-size: 10px; font-weight: 800;
  min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; padding: 0 4px; margin-left: 2px;
  box-shadow: 0 2px 6px -1px rgba(224,82,79,.6), 0 0 0 2px rgba(255,255,255,.55);
}

/* ---------- Business selector bar ---------- */
.biz-bar {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); padding: 7px 14px; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px; font-weight: 600; color: var(--text);
  position: relative;
}
.biz-icon { width: 16px; height: 16px; color: var(--accent-dark); }
.biz-select {
  flex: 1; border: none; background: transparent; font-size: 13.5px; font-weight: 700;
  color: var(--text); outline: none; appearance: none; -webkit-appearance: none;
  font-family: inherit; padding-right: 20px;
}
.biz-chevron { width: 15px; height: 15px; color: var(--muted); position: absolute; right: 14px; pointer-events: none; }
/* Название предприятия — заметнее, а не блёклым серым */
.biz-bar-static span { color: var(--text); font-weight: 700; font-size: 14.5px; }

/* Предприятия сотрудника-совместителя — отдельными кнопками */
.biz-chips {
  display: flex; gap: 7px; padding: 9px 12px; flex-shrink: 0;
  background: var(--header-bg); border-bottom: 1px solid var(--border);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.biz-chip {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  border: none; border-radius: 20px; padding: 8px 15px;
  font-size: 13.5px; font-weight: 700; cursor: pointer;
  background: var(--bg); color: var(--text);
  box-shadow: inset 0 1px 2px rgba(16,24,40,.06);
  transition: transform .12s var(--ease), box-shadow .15s var(--ease), background .15s ease, color .15s ease;
}
.biz-chip .icon { width: 14px; height: 14px; color: var(--muted); }
.biz-chip:active { transform: scale(.96); }
.biz-chip.active {
  background: linear-gradient(160deg, var(--accent-light) 0%, var(--accent) 55%, var(--accent-dark) 100%);
  color: #fff; box-shadow: var(--btn-shadow);
}
.biz-chip.active .icon { color: #fff; }

/* ---------- Scroll area ---------- */
.scroll-area {
  flex: 1; overflow-y: auto; padding: 8px 10px 0;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
/* Меню лежит поверх, поэтому последний элемент списка иначе оказался бы
   под ним — резервируем его высоту снизу. */
#app:not(.fullscreen-chat) .scroll-area { padding-bottom: calc(var(--nav-h, 56px) + 6px); }
/* touch-action не наследуется: у вложенных элементов он снова становится
   auto, и щипковый зум внутри ленты сообщений продолжал работать, а
   страницу можно было утащить за пузырь. Задаём правило всему дереву. */
#app, #app * { touch-action: pan-y; }
/* Единственное место с настоящей горизонтальной прокруткой */
.emoji-panel, .sort-bar, .action-reactions { touch-action: pan-x pan-y; }
.sheet-list, .contact-list, .viewers-scroll, .slash-panel, .emoji-panel { overscroll-behavior: contain; }
.empty-state {
  display: flex; flex-direction: column; align-items: center; padding: 56px 24px;
  text-align: center; color: var(--muted); font-size: 14px; line-height: 1.5;
  animation: fade-in .25s ease;
}
/* Иконка пустого состояния — в мягком круге, а не голым контуром */
.empty-icon {
  width: 34px; height: 34px; color: var(--accent); opacity: .8;
  box-sizing: content-box; padding: 16px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* ---------- Posts ---------- */
/* Пост-пузырь в духе Телеграм-канала: широкая карточка, прижатая влево,
   с "хвостиком" снизу слева и отдельной полосой комментариев внизу. */
.post-card {
  background: var(--card); border-radius: 16px 16px 16px 6px; margin-bottom: 8px;
  cursor: pointer; box-shadow: var(--shadow); overflow: hidden;
  max-width: 96%;
  transform: translateY(0);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.post-body { padding: 11px 14px 7px; }
.post-channel {
  font-size: 14px; font-weight: 700; color: var(--accent-dark);
  margin-bottom: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
/* Низ поста: реакции слева, просмотры и время справа одной строкой.
   Дату убрали — она показывается разделителем над постами нового дня. */
.post-meta-bottom {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 5px;
}
.post-meta-bottom .post-reactions { margin-top: 0; margin-right: auto; }
.post-time {
  font-size: 12px; color: var(--muted); font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.post-reactions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
/* Полоса "Комментировать / N комментариев" — как в канале */
.post-comments-bar {
  width: 100%; border: none; border-top: 1px solid var(--border);
  background: transparent; color: var(--accent-dark);
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s ease;
}
.post-comments-bar:active { background: var(--bg); }

.post-comments-bar span { flex: 1; text-align: left; }
.post-comments-bar .icon { color: var(--accent); }

/* Строка публикации лежит ПОВЕРХ ленты, а не отдельной полосой под ней:
   отдельная полоса съедала высоту, которая нужна под посты. Высота нижнего
   меню считается в JS и кладётся в --nav-h. */
.feed-composer {
  position: absolute; left: 0; right: 0; bottom: var(--nav-h, 56px);
  padding: 5px 10px 6px;
  background: color-mix(in srgb, var(--header-bg) 90%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  z-index: 15;
}
/* Чтобы последний пост не оказался ни под композером, ни под нижним меню.
   Строка публикации стоит НАД меню, поэтому в отступ входит и её высота,
   и высота меню — раньше учитывалась только строка, и последняя строчка
   списка пряталась. */
/* У сотрудника строки публикации нет — но меню всё равно поверх ленты */
#app.fullscreen-chat .scroll-area:not(.chat-scroll) {
  padding-bottom: calc(var(--nav-h, 56px) + 12px);
}
#app.feed-with-composer .scroll-area:not(.chat-scroll) {
  padding-bottom: calc(var(--composer-h, 56px) + var(--nav-h, 56px) + 16px);
}


.post-card-legacy {
  background: var(--card); border-radius: 18px; padding: 16px 17px; margin-bottom: 10px;
  cursor: pointer; box-shadow: var(--shadow);
}
.post-card:active { transform: translateY(1px) scale(.995); }
@media (hover: hover) and (pointer: fine) {
  .post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
}
.post-meta-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin-bottom: 6px; gap: 8px; }
.post-author { color: var(--accent-dark); font-weight: 700; }
/* Дата заметнее: жирнее и контрастнее, с днём недели в скобках */
.post-date { color: var(--muted); font-weight: 700; font-size: 12.5px; white-space: nowrap; }

/* ---------- Важный пост ---------- */
.post-card.important, .post-detail-card.important {
  background: linear-gradient(180deg, var(--important-bg) 0%, var(--card) 62%);
  border: 2px solid var(--important);
  box-shadow: 0 0 0 4px var(--important-glow), var(--shadow-md);
}
.post-card.important .post-title, .post-detail-card.important .post-title-large { color: var(--important-text); }
.important-flag {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(160deg, #FFB86B 0%, var(--important) 60%, var(--important-dark) 100%);
  color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
  padding: 4px 11px 4px 9px; border-radius: 9px; margin-bottom: 9px;
  box-shadow: 0 3px 8px -2px var(--important-glow), inset 0 1px 0 rgba(255,255,255,.35);
}
.important-flag .icon { width: 13px; height: 13px; color: #fff; }

/* Чекбокс "важный пост" в форме создания */
.important-toggle {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: var(--important-bg); border: 1.5px solid var(--important-glow);
  border-radius: 14px; padding: 12px 14px; margin-top: 16px;
  transition: border-color .15s ease, background .15s ease;
}
.important-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.important-toggle-box {
  width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
  background: var(--card); color: var(--muted-light);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-xs);
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.important-toggle-box .icon { width: 18px; height: 18px; }
.important-toggle:has(input:checked) { border-color: var(--important); background: var(--important-bg); }
.important-toggle:has(input:checked) .important-toggle-box {
  background: linear-gradient(155deg, #FFB86B, var(--important) 60%, var(--important-dark));
  color: #fff; box-shadow: 0 4px 10px -3px var(--important-glow);
}
.important-toggle-text { display: flex; flex-direction: column; gap: 2px; }
.important-toggle-text b { font-size: 14px; font-weight: 700; }
.important-toggle-text small { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.action-sheet-item.accent { color: var(--important-dark); }
.action-sheet-item.accent .icon { color: var(--important-dark); }
.post-title { font-size: 16.5px; font-weight: 700; margin-bottom: 5px; letter-spacing: -.1px; }
.post-snippet {
  font-size: 16px; color: var(--text); opacity: .85; line-height: 1.5;
  /* Показываем пост целиком и сохраняем переносы строк: списки и графики
     смен пишут столбиком, и обрезка на трёх строках делала их бесполезными.
     Ограничение в 100 строк — только чтобы случайная "простыня" не растянула
     ленту до бесконечности. */
  white-space: pre-wrap;
  word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 100; -webkit-box-orient: vertical; overflow: hidden;
}
.post-footer { display: flex; gap: 16px; margin-top: 10px; }
.footer-stat { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); }
.footer-stat .icon { color: var(--muted-light); }

.post-detail-card { background: var(--card); border-radius: 17px; padding: 16px; margin-bottom: 6px; box-shadow: var(--shadow); }
.post-title-large { font-size: 19px; font-weight: 800; margin-bottom: 8px; letter-spacing: -.2px; }
.post-full-text { font-size: 16px; color: var(--text); opacity: .88; line-height: 1.55; white-space: pre-wrap; }

/* ---------- FAB ---------- */
.fab {
  position: absolute; right: 16px; bottom: 84px;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(155deg, var(--accent-light) 0%, var(--accent) 55%, var(--accent-dark) 100%);
  color: #fff; border: none; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--btn-shadow), var(--shadow-glow);
  cursor: pointer; z-index: 20;
  transform: translateY(0) scale(1);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.fab::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(155deg, rgba(255,255,255,.4), transparent 55%);
  pointer-events: none;
}
.fab:active { transform: translateY(2px) scale(.96); box-shadow: var(--btn-shadow-active); }
.fab .icon { width: 25px; height: 25px; position: relative; }

/* ---------- Comments ---------- */
.comments-header { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; padding: 14px 6px 8px; }
.comment-row { display: flex; gap: 8px; padding: 6px; align-items: flex-start; }
.comment-row.nested { margin-left: 32px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(155deg, var(--accent-light) 0%, var(--accent) 55%, var(--accent-dark) 100%);
  color: #fff;
  font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 3px 8px -2px rgba(30,150,214,.45), inset 0 1px 0 rgba(255,255,255,.35);
}
.avatar-img { object-fit: cover; }
.avatar-business { background: var(--bg); color: var(--accent-dark); box-shadow: var(--shadow-xs); }
.avatar-business .icon { width: 16px; height: 16px; }

/* Индикатор "в сети" — зелёный кружок поверх аватарки */
.avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.online-dot {
  position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--success); border: 2px solid var(--card); box-shadow: 0 0 0 0.5px rgba(0,0,0,.06);
}
.comment-bubble {
  background: var(--card); border-radius: 20px; padding: 10px 14px; box-shadow: var(--shadow);
  /* см. .chat-bubble: без этого iOS перехватывает долгое нажатие
     собственным меню выделения текста */
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.comment-author { font-size: 13px; font-weight: 700; color: var(--accent-dark); margin-bottom: 3px; }
.comment-text { font-size: 15.5px; white-space: pre-wrap; line-height: 1.45; word-break: break-word; }
.comment-meta { display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--muted-light); margin: 4px 0 0 13px; }
.reply-link { background: transparent; border: none; color: var(--muted); font-size: 11px; display: flex; align-items: center; gap: 3px; cursor: pointer; padding: 0; }

/* Все строки ввода лежат ПОВЕРХ ленты, как в Телеграме: они не занимают
   отдельную полосу и не обрезают содержимое — под контент остаётся весь
   экран, а последние сообщения не прячутся благодаря отступу, который
   считается в JS по реальной высоте панели (--composer-h). */
.comment-bar, .chat-input-bar {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 15;
  background: color-mix(in srgb, var(--header-bg) 90%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  padding: 6px 10px 6px;
}

/* ---------- Экраны "во весь экран": чат, диалог, пост ----------
   Содержимое занимает всю высоту, а шапка и строка ввода парят над ним
   отдельными "пузырями" — ничего не отрезает ленту сверху и снизу. */
.fullscreen-chat .header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  background: transparent; border-bottom: none;
  padding: calc(6px + env(safe-area-inset-top, 0px)) 8px 6px;
  pointer-events: none;
}
/* Сами элементы шапки кликабельны, а фон — нет: под ним прокручивается лента */
.fullscreen-chat .header-left,
.fullscreen-chat .header-right { pointer-events: auto; }
/* Каждый элемент шапки — свой отдельный пузырь: слева кнопка назад,
   по центру название/имя, справа действия. */
.fullscreen-chat .header-left .icon-btn,
.fullscreen-chat .header-left .brand-logo-sm {
  background: color-mix(in srgb, var(--header-bg) 82%, transparent);
  backdrop-filter: blur(14px);
  border-radius: 50%; width: 40px; height: 40px; justify-content: center;
  box-shadow: var(--shadow);
}
.fullscreen-chat .header-title-col {
  pointer-events: auto; justify-self: center; text-align: center; max-width: 100%;
  background: color-mix(in srgb, var(--header-bg) 82%, transparent);
  backdrop-filter: blur(14px);
  border-radius: 20px; padding: 5px 16px;
  box-shadow: var(--shadow);
}
.fullscreen-chat .header-right .icon-btn {
  background: color-mix(in srgb, var(--header-bg) 82%, transparent);
  backdrop-filter: blur(14px);
  border-radius: 50%; width: 40px; height: 40px; justify-content: center;
  box-shadow: var(--shadow);
}
/* Лента начинается под шапкой — отступ по её реальной высоте */
.fullscreen-chat .scroll-area { padding-top: calc(var(--header-h, 48px) + 6px); }
/* Когда открыт поиск, лента начинается ещё ниже — под его пузырём */
#app.feed-search-open .scroll-area { padding-top: calc(var(--header-h, 48px) + 54px); }

/* Строка ввода — тоже пузырь, а не полоса на всю ширину */
.fullscreen-chat .comment-bar,
.fullscreen-chat .chat-input-bar,
.fullscreen-chat .feed-composer {
  background: transparent; backdrop-filter: none; border-top: none;
  padding: 0 8px 8px;
}
/* Лента канала занимает весь экран: строка публикации стоит у самого низа */
.fullscreen-chat .feed-composer { bottom: calc(4px + env(safe-area-inset-bottom, 0px)); }
/* Полоса поиска в ленте тоже пузырём под шапкой */
.fullscreen-chat .search-bar {
  position: absolute; top: calc(var(--header-h, 48px) + 2px); left: 8px; right: 8px; z-index: 18;
  background: color-mix(in srgb, var(--header-bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border: none; border-radius: 20px; padding: 7px 14px;
  box-shadow: var(--shadow-md);
}
.fullscreen-chat .comment-input-row {
  background: color-mix(in srgb, var(--header-bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-radius: 26px; padding: 5px 6px;
  box-shadow: var(--shadow-md);
}
.fullscreen-chat .comment-input { border-color: transparent; background: transparent; box-shadow: none; }
.fullscreen-chat .comment-input:focus { box-shadow: none; border-color: transparent; }
.fullscreen-chat .emoji-panel {
  background: color-mix(in srgb, var(--header-bg) 92%, transparent);
  backdrop-filter: blur(14px);
  border-radius: 18px; border-bottom: none; margin-bottom: 8px; padding: 8px 6px;
  box-shadow: var(--shadow-md);
}
.fullscreen-chat .reply-banner { box-shadow: var(--shadow); }

/* Автор сообщения и имя в шапке диалога открывают профиль по нажатию */
.chat-author-link { cursor: pointer; }
.chat-author-link:active { opacity: .6; }
.header-title-link { cursor: pointer; }
.header-title-link:active { opacity: .6; }

.reply-banner { display: flex; justify-content: space-between; align-items: center; background: var(--bg); border-radius: 10px; padding: 6px 10px; font-size: 12px; color: var(--accent-dark); margin-bottom: 6px; }
.reply-close { background: transparent; border: none; cursor: pointer; color: var(--accent-dark); display: flex; }
.comment-input-row { display: flex; gap: 8px; align-items: center; }

/* ---------- Панель смайликов для отправки ---------- */
.emoji-btn {
  width: 38px; height: 38px; flex-shrink: 0; border: none; border-radius: 50%;
  background: var(--input-bg); font-size: 19px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--btn-shadow-neutral);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.emoji-btn:active { transform: scale(.9); box-shadow: var(--btn-shadow-neutral-active); }
.emoji-panel {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px;
  max-height: 190px; overflow-y: auto; overscroll-behavior: contain;
  padding: 8px 4px 10px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
  animation: emoji-panel-in .18s var(--ease);
}
@keyframes emoji-panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.emoji-panel-item {
  border: none; background: transparent; border-radius: 9px; aspect-ratio: 1;
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform .1s var(--ease), background .15s ease;
}
.emoji-panel-item:active { transform: scale(1.25); background: var(--bg); }
@media (hover: hover) and (pointer: fine) {
  .emoji-panel-item:hover { background: var(--bg); transform: scale(1.15); }
}
.comment-input {
  /* 16px — не для красоты: если шрифт поля меньше 16px, iOS Safari при
     фокусе принудительно зумит всю страницу, и после закрытия клавиатуры
     масштаб не откатывается — отсюда и "не видно слов" при наборе, и
     съехавшая вёрстка после выхода из диалога. */
  flex: 1; border: 1.5px solid var(--input-border); border-radius: 22px; padding: 10px 15px; font-size: 16px;
  outline: none; background: var(--input-bg); color: var(--text);
  box-shadow: inset 0 1px 2px rgba(16,24,40,.05);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.comment-input:focus { border-color: var(--accent); box-shadow: inset 0 1px 2px rgba(16,24,40,.05), 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
/* Поле публикации поста — многострочное и растущее */
.post-textarea {
  resize: none; max-height: 180px; overflow-y: auto; line-height: 1.4;
  font-family: inherit; border-radius: 18px; padding: 10px 15px;
}
.comment-input-row { align-items: flex-end; }
.send-btn {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(155deg, var(--accent-light) 0%, var(--accent) 55%, var(--accent-dark) 100%);
  border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; color: #fff;
  box-shadow: var(--btn-shadow);
  transform: translateY(0);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.send-btn:active { transform: translateY(2px) scale(.94); box-shadow: var(--btn-shadow-active); }
.send-btn .icon { width: 18px; height: 18px; }

/* ---------- Chat ---------- */
.chat-scroll { display: flex; flex-direction: column; gap: 2px; padding: 4px 4px calc(var(--composer-h, 56px) + 12px); }
.chat-msg { display: flex; gap: 8px; align-items: flex-end; margin: 3px 0; }
.chat-msg.mine { justify-content: flex-end; }
/* Пузырь занимает столько, сколько нужно тексту — короткие сообщения
   больше не растягиваются на пол-экрана. */
.chat-bubble-col { display: flex; flex-direction: column; max-width: 80%; width: fit-content; align-items: flex-start; position: relative; }
.chat-bubble-col.mine { align-items: flex-end; }
.chat-bubble {
  width: fit-content;
  min-width: 0;
  background: var(--card);
  border-radius: 22px 22px 22px 8px;
  /* Больше воздуха внутри: раньше текст почти упирался в края пузыря */
  padding: 8px 13px 5px;
  box-shadow: var(--shadow);
  position: relative;
  animation: bubble-in .18s var(--ease);
  /* Без этого iOS на долгом нажатии показывает СВОЁ меню выделения текста
     ("Скопировать / Выбрать"), перехватывая жест — и наше меню действий
     просто не успевает открыться. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
@keyframes bubble-in { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }
.chat-bubble.mine {
  background: var(--bubble-mine);
  color: var(--bubble-mine-text);
  border-radius: 22px 22px 8px 22px;
  box-shadow: var(--shadow);
}
.chat-author { font-size: 12.5px; font-weight: 700; color: var(--accent-dark); margin-bottom: 3px; }
.chat-bubble.mine .chat-author { color: var(--accent-dark); }
.chat-text { font-size: 16px; white-space: pre-wrap; line-height: 1.42; word-break: break-word; }
/* Сообщение из одних смайликов — показываем крупно, без "коробки", как в Телеграме */
.chat-bubble.emoji-only { background: none; box-shadow: none; padding: 2px 4px; }
.chat-bubble.emoji-only .chat-text { font-size: 40px; line-height: 1.15; }
.chat-bubble.emoji-only .chat-time { color: var(--muted); }
/* Низ пузыря — одна строка: реакции слева, время справа. Раньше время
   висело отдельной строкой и под ним оставалась пустота. */
.bubble-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  margin-top: 2px; min-height: 15px;
}
.bubble-foot .reactions-row { margin-top: 0; margin-right: auto; }
.chat-time {
  font-size: 11px; opacity: .62; font-variant-numeric: tabular-nums;
  white-space: nowrap; display: inline-flex; align-items: center; flex-shrink: 0;
}

/* Разделитель по датам — плавающая "пилюля" по центру ленты сообщений */
.chat-day-sep { display: flex; justify-content: center; margin: 12px 0 8px; }
.chat-day-sep span {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--muted); font-size: 11.5px; font-weight: 700;
  padding: 4px 12px; border-radius: 12px; backdrop-filter: blur(4px);
}

/* ---------- Цитата ответа внутри сообщения ---------- */
.quoted-reply {
  border-left: 3px solid var(--accent);
  padding: 3px 0 3px 8px; margin-bottom: 6px; border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: 0 8px 8px 0;
}
.chat-bubble.mine .quoted-reply { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.quoted-reply-author { font-size: 12px; font-weight: 700; color: var(--accent-dark); }
.chat-bubble.mine .quoted-reply-author { color: var(--accent-dark); }
.quoted-reply-text { font-size: 12.5px; opacity: .75; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Фото в сообщениях ---------- */
.chat-image {
  display: block; max-width: 100%; border-radius: 12px; margin-bottom: 6px; cursor: pointer;
  max-height: 320px; object-fit: cover;
}
.pending-image { position: relative; display: inline-block; margin-bottom: 8px; }
.pending-image img { max-height: 90px; border-radius: 10px; display: block; box-shadow: var(--shadow); }
.pending-image-remove {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%;
  border: none; background: var(--danger); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow);
}
.image-viewer {
  position: absolute; inset: 0; z-index: 90; background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: fade-in .2s ease;
}
.image-viewer img { max-width: 100%; max-height: 100%; border-radius: 8px; }

/* ---------- Меню действий над сообщением ---------- */
.modal-overlay.action-sheet-overlay { align-items: flex-end; padding: 0 10px calc(14px + env(safe-area-inset-bottom, 0px)); }
.action-sheet-wrap {
  width: 100%; max-width: 420px;
  animation: sheet-in .2s var(--ease);
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Ряд быстрых реакций над меню — как в MAX и Телеграме */
.action-reactions {
  display: flex; justify-content: space-between; gap: 2px;
  background: var(--card); border-radius: 26px; padding: 7px 10px; margin-bottom: 8px;
  box-shadow: var(--shadow-lg);
}
.action-reaction {
  border: none; background: transparent; border-radius: 50%;
  width: 40px; height: 40px; font-size: 25px; line-height: 1; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s var(--ease), background .15s ease;
}
.action-reaction:active { transform: scale(1.3); background: var(--bg); }

.action-sheet {
  background: var(--card); border-radius: 18px;
  overflow: hidden; box-shadow: var(--shadow-lg);
}
.action-sheet-item {
  width: 100%; border: none; background: transparent; color: var(--text);
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; font-size: 15.5px; font-weight: 600; cursor: pointer; text-align: left;
  border-bottom: 1px solid var(--border);
  transition: background .15s ease;
}
.action-sheet-item:last-child { border-bottom: none; }
.action-sheet-item .icon { width: 19px; height: 19px; color: var(--muted); }
.action-sheet-item:active { background: var(--bg); }
.action-sheet-item.danger { color: var(--danger); }
.action-sheet-item.danger .icon { color: var(--danger); }

/* ---------- Галочки прочтения ---------- */
.read-mark { display: inline-flex; vertical-align: middle; margin-left: 3px; opacity: .8; }
.read-mark .icon { width: 15px; height: 15px; }
/* Прочитано — насыщеннее, чтобы отличие было заметно с одного взгляда */
.read-mark.read { opacity: 1; }
.chat-bubble.mine .read-mark .icon { color: var(--accent-dark); }

/* ---------- Нижняя шторка (состав предприятия) ---------- */
.modal-overlay.sheet-overlay { align-items: flex-end; padding: 0; }
.bottom-sheet {
  width: 100%; background: var(--card);
  border-radius: 22px 22px 0 0; padding: 8px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--shadow-lg); max-height: 78%; display: flex; flex-direction: column;
  animation: sheet-in .22s var(--ease);
}
.sheet-grabber { width: 38px; height: 4px; border-radius: 2px; background: var(--border); margin: 4px auto 12px; flex-shrink: 0; }
.sheet-title { font-size: 18px; font-weight: 800; letter-spacing: -.2px; }
.sheet-sub { font-size: 12.5px; color: var(--muted); margin: 2px 0 12px; }
.sheet-list { overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; }
.sheet-person {
  display: flex; align-items: center; gap: 12px; padding: 11px 8px;
  border-radius: 14px; cursor: pointer; transition: background .15s ease;
}
.sheet-person:active { background: var(--bg); }
.sheet-write { color: var(--accent); display: flex; }
.sheet-write .icon { width: 24px; height: 24px; stroke-width: 2.6; }
/* Кнопка "написать" в списке людей: заметный крупный значок, а не мелкий серый */
.row-write { width: 44px; height: 44px; border-radius: 22px; color: var(--accent); }
.row-write .icon { width: 25px; height: 25px; stroke-width: 2.6; }

/* Выбор нескольких предприятий для сотрудника */
.biz-multi { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.biz-check {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: var(--input-bg); border: 1.5px solid var(--input-border);
  border-radius: 12px; padding: 10px 12px; font-size: 14px;
  transition: border-color .15s ease, background .15s ease;
}
.biz-check input { position: absolute; opacity: 0; pointer-events: none; }
.biz-check-box {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
  background: var(--card); color: transparent;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1.5px var(--input-border);
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.biz-check-box .icon { width: 14px; height: 14px; }
.biz-check:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.biz-check:has(input:checked) .biz-check-box {
  background: linear-gradient(155deg, var(--accent-light), var(--accent) 55%, var(--accent-dark));
  color: #fff; box-shadow: none;
}

/* Карточка сотрудника в нижней шторке */
/* Карточка человека: окно по центру экрана, скруглённое со всех сторон */
.person-modal { border-radius: 28px; padding: 24px 20px 20px; max-width: 330px; }
.person-modal .person-info { background: var(--input-bg); box-shadow: none; border-radius: 18px; }
.person-head { display: flex; flex-direction: column; align-items: center; padding: 4px 0 2px; }
.person-head .profile-avatar, .person-head .profile-avatar-img { width: 76px; height: 76px; font-size: 30px; }
.person-name { font-size: 19px; font-weight: 800; margin-top: 12px; letter-spacing: -.2px; text-align: center; }
.person-status { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.person-actions { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 6px; }
.person-head + .person-actions { margin-top: 20px; }
/* Вторая кнопка в карточке — такого же размера, что и "Написать" */
.person-actions .btn-secondary {
  padding: 13.5px; font-size: 15px; font-weight: 700; border-radius: 13px; margin-top: 0;
}
.person-actions .btn-secondary .icon { width: 18px; height: 18px; }

.section-hint {
  font-size: 12.5px; color: var(--muted); line-height: 1.45;
  background: var(--card); border-radius: 13px; padding: 11px 13px; margin-bottom: 10px;
  box-shadow: var(--shadow-xs);
}

/* Красный значок с числом новых заявок прямо на вкладке */
.tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 5px; margin-left: 5px;
  border-radius: 9px; font-size: 10.5px; font-weight: 800;
  background: linear-gradient(160deg, #FF7A7A, var(--danger-dark)); color: #fff;
  box-shadow: 0 2px 6px -1px rgba(224,82,79,.6);
  vertical-align: middle;
}
.segmented-item.active .tab-badge { background: #fff; color: var(--danger-dark); box-shadow: none; }

/* Заголовки групп в списке сотрудников */
.people-group {
  font-size: 12px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px; margin: 14px 6px 8px;
}
.people-group:first-child { margin-top: 4px; }

/* Четыре вкладки в одну строку без прокрутки: ширина делится поровну,
   а размер шрифта подстраивается под экран, чтобы длинные слова
   ("Администрация", "Предприятия") были видны целиком. */
.segmented-scroll { overflow: visible; }
.segmented-scroll .segmented-item {
  flex: 1 1 0; min-width: 0; padding-left: 2px; padding-right: 2px;
  white-space: nowrap; font-size: clamp(9.5px, 2.85vw, 12.5px); letter-spacing: -.2px;
}
.segmented-scroll .tab-badge { margin-left: 3px; min-width: 15px; height: 15px; font-size: 9.5px; padding: 0 3px; }

/* ---------- Кто просмотрел ---------- */
.viewers-row { border-bottom: 1px solid var(--border); }
.viewers-row .icon { color: var(--accent); }
.viewers-minis { display: flex; flex-direction: row-reverse; }
/* Аватарки наезжают друг на друга, как в Телеграме */
.viewers-mini {
  width: 24px; height: 24px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--card); margin-left: -9px; flex-shrink: 0;
}
.viewers-mini-init {
  background: linear-gradient(155deg, var(--accent-light), var(--accent) 55%, var(--accent-dark));
  color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.viewers-scroll { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
.viewers-person { display: flex; align-items: center; gap: 12px; padding: 10px 18px; }
.viewers-time { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.viewers-time .icon { width: 13px; height: 13px; color: var(--accent); }

/* ---------- Поиск ---------- */
.search-bar {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  background: var(--header-bg); border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.search-icon { width: 16px; height: 16px; color: var(--muted-light); flex-shrink: 0; }
.search-input {
  flex: 1; border: none; outline: none; background: transparent; color: var(--text);
  /* 16px — иначе iOS зумит страницу при фокусе (см. .comment-input) */
  font-size: 16px; padding: 4px 0;
}
.search-clear {
  border: none; background: var(--bg); color: var(--muted); cursor: pointer;
  width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}

/* ---------- Реакции на сообщения ---------- */
/* Реакции живут ВНУТРИ пузыря, прижатые влево — как в Телеграме,
   а не отдельной строкой под сообщением. */
.reactions-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 5px; justify-content: flex-start; }
/* Реакция везде — только смайлик, при необходимости со счётчиком */
.reaction-pill {
  display: flex; align-items: center; gap: 3px; border: none; border-radius: 12px;
  background: transparent; box-shadow: none; padding: 2px 3px;
  font-size: 15px; line-height: 1; cursor: pointer; color: var(--text);
  transition: transform .12s var(--ease), background .15s ease;
}
.reaction-pill span { font-size: 11.5px; font-weight: 700; color: var(--muted); }
/* Свою реакцию отличаем цветом счётчика, а не подложкой */
.reaction-pill.mine { background: transparent; box-shadow: none; }
.reaction-pill.mine span { color: var(--accent-dark); }
.reaction-pill:active { transform: scale(.93); }
/* Ряд реакций под постом: непоставленные — бледные, но кликабельные */
.post-reactions-pick { gap: 10px; }
.post-reactions-pick .reaction-pill { padding: 4px 2px; font-size: 19px; }
.post-reactions-pick .reaction-pill.empty { opacity: .4; }
.post-reactions-pick .reaction-pill.empty:active { opacity: 1; }
/* В ряду выбора нужно видеть, что уже отмечено: тонкая черта под смайликом
   вместо овала-подложки. */
.post-reactions-pick .reaction-pill.mine {
  box-shadow: 0 2px 0 -0.5px var(--accent);
}
.sheet-inline-title {
  padding: 14px 18px 10px; font-size: 13px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .3px;
  border-bottom: 1px solid var(--border);
}
.reaction-trigger {
  border: none; background: transparent; border-radius: 10px; padding: 2px 5px;
  font-size: 13px; line-height: 1; cursor: pointer; opacity: .45;
  transition: opacity .15s ease, transform .12s var(--ease);
}
.reaction-trigger:active { transform: scale(.85); opacity: .8; }
.reaction-picker {
  display: flex; gap: 2px; background: var(--card); border-radius: 18px; padding: 5px 6px;
  box-shadow: var(--shadow-lg); margin-top: 5px;
  animation: modal-in .15s var(--ease);
}
.reaction-picker-item {
  border: none; background: transparent; border-radius: 50%; width: 32px; height: 32px;
  font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform .12s var(--ease), background .15s ease;
}
.reaction-picker-item:active { transform: scale(1.25); background: var(--bg); }
@media (hover: hover) and (pointer: fine) {
  .reaction-picker-item:hover { transform: scale(1.2); background: var(--bg); }
}

.chat-post-announce {
  display: flex; gap: 11px; align-items: flex-start;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 9%, var(--card)) 0%, var(--card) 70%);
  border: 1.5px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 17px; padding: 14px 15px;
  margin: 12px 2px; cursor: pointer;
  box-shadow: 0 4px 14px -6px rgba(30,150,214,.45), var(--shadow);
  transform: translateY(0);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.chat-post-announce:active { transform: translateY(1px) scale(.99); }
@media (hover: hover) and (pointer: fine) {
  .chat-post-announce:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
}
.chat-post-announce-icon {
  width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
  background: linear-gradient(155deg, var(--accent-light) 0%, var(--accent) 55%, var(--accent-dark) 100%);
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px -3px rgba(30,150,214,.5), inset 0 1px 0 rgba(255,255,255,.3);
}
.chat-post-announce-icon .icon { width: 17px; height: 17px; }
.chat-post-announce-body { flex: 1; min-width: 0; }
.chat-post-announce-label { font-size: 11px; font-weight: 700; color: var(--accent-dark); text-transform: uppercase; letter-spacing: .3px; }
.chat-post-announce-title { font-size: 15.5px; font-weight: 800; margin-top: 4px; letter-spacing: -.2px; }
.chat-post-announce-text {
  font-size: 14px; color: var(--text); opacity: .8; margin-top: 4px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.chat-post-announce-time { font-size: 10.5px; color: var(--muted-light); margin-top: 5px; }

/* Цитата кликабельна: ведёт к исходному сообщению */
.quoted-reply { cursor: pointer; }
.quoted-reply:active { opacity: .7; }

/* Короткая подсветка сообщения, к которому перешли по цитате */
@keyframes msg-flash {
  0%   { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 60%, transparent); }
  60%  { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
  100% { box-shadow: 0 0 0 3px transparent; }
}
.msg-flash { animation: msg-flash 1.8s ease-out; }

/* Быстрые кнопки сотрудника: по ширине слова и чуть крупнее админских */
.admin-quickbar.compact { justify-content: flex-start; }
.admin-quickbar.compact .quick-pill {
  flex: 0 0 auto; padding: 9px 18px; font-size: 13.5px; border-radius: 22px;
}
.admin-quickbar.compact .quick-pill .icon { width: 16px; height: 16px; }

/* Состав предприятия: окно по центру, скруглённое со всех сторон */
.biz-sheet-modal {
  max-width: 360px; border-radius: 28px; padding: 20px 16px 16px;
  max-height: 80%; display: flex; flex-direction: column; overflow: hidden;
}
.biz-sheet-modal .sheet-list {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; margin-top: 4px;
}

/* Быстрый выбор должности в карточке сотрудника */
.position-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.position-chip {
  border: 1.5px solid var(--input-border); background: var(--input-bg);
  color: var(--text); border-radius: 16px; padding: 7px 13px;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  transition: transform .12s var(--ease), background .15s ease, border-color .15s ease;
}
.position-chip:active { transform: scale(.95); }
.position-chip.active {
  background: color-mix(in srgb, var(--accent) 18%, var(--card));
  border-color: var(--accent); color: var(--accent-dark);
}
.position-chip.add { color: var(--accent-dark); border-style: dashed; }
.position-chip .icon { width: 13px; height: 13px; }

/* Поиск внутри окон со списком людей */
.local-search {
  margin: 10px 0 4px; background: var(--input-bg);
  border: 1.5px solid var(--input-border); border-radius: 16px;
  padding: 9px 13px;
}
.org-search {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 0 2px; background: var(--input-bg);
  border: 1.5px solid var(--input-border); border-radius: 16px;
  padding: 10px 14px;
}
.org-search .search-icon { width: 17px; height: 17px; color: var(--muted); flex-shrink: 0; }
.org-search-input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  color: var(--text); font-size: 16px; padding: 0;
}
.org-search:focus-within { border-color: var(--accent); }

/* ---------- Карточка предприятия ---------- */
.org-modal { max-width: 350px; border-radius: 28px; padding: 22px 18px 18px; }
.org-head { display: flex; flex-direction: column; align-items: center; }
.org-avatar {
  width: 78px; height: 78px; border-radius: 26px;
  background: linear-gradient(155deg, var(--accent-light) 0%, var(--accent) 55%, var(--accent-dark) 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 26px -10px rgba(30,150,214,.55), inset 0 2px 0 rgba(255,255,255,.3);
}
.org-avatar .icon { width: 36px; height: 36px; color: #fff; }
.org-name {
  font-size: 21px; font-weight: 800; letter-spacing: -.3px;
  margin-top: 13px; text-align: center;
}
.org-count { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

/* Описание — крупный ровный абзац по центру карточки */
.org-about {
  margin-top: 16px; font-size: 15px; line-height: 1.5; color: var(--text);
  text-align: center; padding: 0 4px;
}

/* Адрес и телефон: подпись сверху, значение крупно под ней —
   длинный адрес переносится ровно, а не жмётся в правый край */
.org-field {
  display: block; margin-top: 10px; padding: 11px 14px;
  background: var(--input-bg); border-radius: 16px; text-decoration: none; color: inherit;
}
.org-field-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px;
}
.org-field-label .icon { width: 12px; height: 12px; }
.org-field-value { font-size: 15px; font-weight: 600; margin-top: 4px; line-height: 1.35; }
.org-field-link:active { background: color-mix(in srgb, var(--accent) 14%, var(--input-bg)); }
.org-phone { color: var(--accent-dark); font-weight: 700; }

.org-admins-title {
  font-size: 11.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px; margin: 18px 2px 8px;
}
/* Списков теперь два (администрация и сотрудники) — прокручивается
   всё окно целиком, иначе получались две независимые прокрутки. */
.org-admins { overflow: visible; }
.org-admin-row {
  display: flex; align-items: center; gap: 11px;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 10px 12px; margin-bottom: 7px; cursor: pointer;
}
.org-admin-row:active { background: var(--input-bg); }
.org-admin-body { flex: 1; min-width: 0; }
.org-admin-name {
  font-size: 14.5px; font-weight: 700; letter-spacing: -.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.org-admin-sub {
  display: flex; align-items: center; gap: 6px; margin-top: 3px;
  font-size: 12px; color: var(--muted); min-width: 0;
}
.org-admin-sub span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-admin-body .chat-list-status { font-size: 11.5px; margin-top: 2px; }
.org-admin-write { color: var(--accent); display: flex; flex-shrink: 0; }
.org-admin-write .icon { width: 23px; height: 23px; stroke-width: 2.4; }
.org-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.org-actions .btn-secondary { margin-top: 0; }

.post-image {
  width: 100%; border-radius: 14px; margin: 8px 0 2px; display: block;
  max-height: 320px; object-fit: cover;
}

/* Ожидание одобрения заявки */
.waiting-dots { display: flex; gap: 6px; justify-content: center; margin-top: 14px; }
.waiting-dots span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  animation: waiting-dot 1.2s infinite ease-in-out;
}
.waiting-dots span:nth-child(2) { animation-delay: .18s; }
.waiting-dots span:nth-child(3) { animation-delay: .36s; }
@keyframes waiting-dot {
  0%, 80%, 100% { opacity: .25; transform: scale(.8); }
  40% { opacity: 1; transform: scale(1); }
}

/* Спиннер, пока грузится переписка — вместо надписи "сообщений пока нет" */
.chat-loading { display: flex; justify-content: center; padding: 40px 0; }
.chat-loading .spinner { width: 26px; height: 26px; }

/* Отклик на нажатие: без него на Android кажется, что тап не сработал */
.chat-list-row:active, .employee-row:active, .settings-list-item:active {
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
}

/* Эмблема без подписи — только щит, кружком */
.role-tag.icon-only {
  padding: 3px; border-radius: 50%; gap: 0;
}
.role-tag.icon-only .icon { width: 14px; height: 14px; stroke-width: 2.6; }

/* ---------- Название приложения ---------- */
/* Переливающийся градиент: сам градиент шире текста и медленно едет,
   а текст работает маской. background-clip даёт заливку буквам, поэтому
   цвет самого текста делаем прозрачным. */
.brand-title {
  font-weight: 900;
  text-align: center;
  letter-spacing: .5px;
  background: linear-gradient(
    100deg,
    var(--accent-dark) 0%,
    var(--accent) 22%,
    #7DEEDC 42%,
    #8B5CF6 62%,
    var(--accent) 82%,
    var(--accent-dark) 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: brand-shimmer 6s linear infinite;
}
.header-title.brand-title { font-size: 18.5px; }
.login-title.brand-title { font-size: 27px; }
@keyframes brand-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 250% 50%; }
}
/* Кому анимация мешает — уважаем системную настройку */
@media (prefers-reduced-motion: reduce) {
  .brand-title { animation: none; }
}

/* Эмблема главного админа — крупный золотой щит без подложки */
.role-tag.chief.icon-only {
  background: none; box-shadow: none; padding: 0 0 0 3px;
  color: var(--important-dark);
  vertical-align: -3px;
}
.role-tag.chief.icon-only .icon {
  width: 19px; height: 19px; stroke-width: 2.4;
  filter: drop-shadow(0 1px 2px rgba(194,103,10,.45));
}

/* ---------- Форматирование текста ---------- */
/* Поле ввода с настоящим форматированием: это contenteditable, поэтому
   подсказку рисуем сами — атрибута placeholder у него нет. */
.rich-input {
  min-height: 24px; max-height: 160px; overflow-y: auto;
  white-space: pre-wrap; word-break: break-word; text-align: left;
  cursor: text; -webkit-user-select: text; user-select: text;
}
.rich-input:empty::before {
  content: attr(data-placeholder);
  color: var(--muted-light);
  pointer-events: none;
}
.rich-input code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em; background: color-mix(in srgb, var(--muted) 18%, transparent);
  padding: 1px 5px; border-radius: 6px;
}

/* Меню у курсора: сначала обычные действия с текстом, форматирование —
   вложенным списком сбоку, как в настольных приложениях. */
.format-menu-wrap { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.format-menu-wrap .format-menu { pointer-events: auto; }
.format-menu-sep { height: 1px; background: var(--border); margin: 5px 8px; }
.format-menu-arrow { display: flex; color: var(--muted); }
.format-menu-arrow .icon { width: 15px; height: 15px; }
.format-menu-item.disabled { opacity: .4; cursor: default; }
.format-menu {
  position: fixed; z-index: 200; min-width: 210px;
  background: var(--card); border-radius: 14px; padding: 6px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  animation: modal-in .14s var(--ease);
}
.format-menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  border: none; background: transparent; color: var(--text);
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  font-size: 15px; text-align: left;
}
.format-menu-item span:first-child { flex: 1; }
.format-menu-item:active { background: var(--input-bg); }
@media (hover: hover) and (pointer: fine) {
  .format-menu-item:hover { background: var(--input-bg); }
}
.format-menu-hint { font-size: 12px; color: var(--muted-light); }

/* Как выглядит размеченный текст */
.fmt-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em; background: color-mix(in srgb, var(--muted) 18%, transparent);
  padding: 1px 5px; border-radius: 6px;
}
.fmt-pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em; background: color-mix(in srgb, var(--muted) 16%, transparent);
  padding: 9px 11px; border-radius: 11px; margin: 6px 0; white-space: pre-wrap;
  overflow-x: auto;
}
.fmt-link { color: var(--accent-dark); text-decoration: underline; word-break: break-word; }

/* Пост в ленте чата — полноценная карточка, а не строка-анонс */
.chat-post-card {
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 9%, var(--card)) 0%, var(--card) 70%);
  border: 1.5px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 18px; padding: 13px 15px 0; margin: 12px 2px; cursor: pointer;
  box-shadow: 0 4px 14px -6px rgba(30,150,214,.45), var(--shadow);
}
.chat-post-card.important {
  border-color: color-mix(in srgb, var(--important) 55%, transparent);
  background: linear-gradient(160deg, var(--important-bg) 0%, var(--card) 70%);
}
.chat-post-card:active { transform: translateY(1px) scale(.995); }
.chat-post-head { display: flex; align-items: center; gap: 9px; }
.chat-post-card .chat-post-announce-icon { width: 30px; height: 30px; border-radius: 10px; }
.chat-post-card .chat-post-announce-icon .icon { width: 15px; height: 15px; }
.chat-post-title { font-size: 16px; font-weight: 800; margin-top: 9px; letter-spacing: -.2px; }
.chat-post-text {
  font-size: 15.5px; line-height: 1.5; margin-top: 7px;
  white-space: pre-wrap; word-break: break-word;
}
.chat-post-foot {
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  margin-top: 9px; padding-bottom: 11px;
}
.chat-post-comments {
  display: flex; align-items: center; gap: 7px;
  margin: 0 -15px; padding: 11px 15px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent-dark); font-size: 13.5px; font-weight: 700;
}
.chat-post-comments span { flex: 1; }
.chat-post-comments .icon { width: 16px; height: 16px; }

.comment-image {
  width: 100%; max-width: 260px; border-radius: 12px; margin: 4px 0 2px; display: block;
}

.biz-chip-badge {
  background: linear-gradient(160deg, #FF7A7A, var(--danger-dark)); color: #fff;
  font-size: 10px; font-weight: 800; min-width: 16px; height: 16px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
  margin-left: 4px;
}

/* ---------- Смены ---------- */
.shift-summary {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
}
.shift-stat {
  flex: 1 1 70px; background: var(--card); border-radius: 14px; padding: 10px 8px;
  text-align: center; box-shadow: var(--shadow);
}
.shift-stat b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.4px; }
.shift-stat span { font-size: 11px; color: var(--muted); }
.shift-stat.ok b { color: var(--success-dark); }
.shift-stat.bad b { color: var(--danger-dark); }
.shift-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.shift-actions .btn-secondary, .shift-actions .btn-primary { margin-top: 0; }
.btn-secondary.danger-text { color: var(--danger-dark); }
.shift-group { margin-bottom: 14px; }
.shift-group-title {
  font-size: 12px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px; margin: 4px 6px 8px;
}
.shift-mark {
  font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 12px;
  background: var(--bg); color: var(--muted); flex-shrink: 0;
}
.shift-mark.ok { background: var(--success-bg); color: var(--success-dark); }
.shift-mark.bad { background: var(--danger-bg); color: var(--danger-dark); }
.shift-answer-row { display: flex; gap: 8px; margin-top: 8px; }
.shift-answer-row .btn-primary, .shift-answer-row .btn-secondary { margin-top: 0; flex: 1; }
.shift-answered {
  display: flex; align-items: center; gap: 5px; margin-top: 8px;
  font-size: 12.5px; font-weight: 700; color: var(--accent-dark);
}
.shift-kind-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 2px; }
.shift-pick-tools { display: flex; gap: 8px; align-items: center; margin: 6px 0 8px; }
.shift-pick-tools .btn-secondary { flex-shrink: 0; width: auto; padding: 10px 14px; font-size: 13px; }
.shift-pick-list { max-height: 34vh; overflow-y: auto; overscroll-behavior: contain; }

/* Запрос на смену в переписке */
.chat-bubble.shift-request {
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 12%, var(--card)) 0%, var(--card) 70%);
  border: 1.5px solid color-mix(in srgb, var(--accent) 32%, transparent);
  min-width: 230px;
}
.shift-request-label {
  display: flex; align-items: center; gap: 5px; margin-bottom: 5px;
  font-size: 11px; font-weight: 800; color: var(--accent-dark);
  text-transform: uppercase; letter-spacing: .3px;
}

/* ---------- Bottom nav ---------- */
/* Меню плавает поверх содержимого: отдельной полосы под него больше нет,
   пузыри-иконки лежат прямо на ленте. Прижато к самой нижней границе —
   "домашняя" полоска iPhone накладывается на пустое место под подписями
   и ничего не перекрывает. */
.bottom-nav {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 25;
  display: flex; border: none; background: transparent;
  padding: 4px 6px 2px;
  pointer-events: none;
}
.bottom-nav .nav-item { pointer-events: auto; }
.nav-item {
  flex: 1; background: transparent; border: none; display: flex; flex-direction: column; align-items: center;
  padding: 4px 0 3px; cursor: pointer; color: var(--muted); gap: 2px; font-size: 10.5px; font-weight: 600;
}
/* Подпись читается и поверх ленты, и поверх фото */
.nav-label {
  padding: 1px 8px; border-radius: 9px;
  background: color-mix(in srgb, var(--header-bg) 80%, transparent);
  backdrop-filter: blur(10px);
}
.nav-icon-wrap {
  width: 42px; height: 31px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  position: relative; box-shadow: var(--tile-shadow-sm);
  opacity: .5; filter: saturate(.7);
  transform: translateY(0) scale(.92);
  transition: opacity .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.nav-item .icon { width: 20px; height: 20px; color: #fff; transition: transform .15s var(--ease); }
/* У каждого раздела меню — свой цвет плашки, чтобы иконки были объёмными и узнаваемыми */
.bottom-nav .nav-item:nth-child(1) .nav-icon-wrap { background: var(--ic-violet); }
.bottom-nav .nav-item:nth-child(2) .nav-icon-wrap { background: var(--ic-blue); }
.bottom-nav .nav-item:nth-child(3) .nav-icon-wrap { background: var(--ic-teal); }
.bottom-nav .nav-item:nth-child(4) .nav-icon-wrap { background: var(--ic-orange); }
.nav-item.active { color: var(--accent-dark); }
.nav-item.active .nav-icon-wrap {
  opacity: 1; filter: saturate(1);
  box-shadow: var(--tile-shadow);
  transform: translateY(-3px) scale(1.06);
}
.nav-item:active .nav-icon-wrap { transform: scale(.88); }
.nav-label { transition: color .15s ease; }
.nav-badge {
  position: absolute; top: -3px; right: -3px;
  background: linear-gradient(160deg, #FF7A7A, var(--danger-dark)); color: #fff; font-size: 10px; font-weight: 800;
  min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  padding: 0 3px; box-shadow: 0 2px 6px -1px rgba(224,82,79,.6), 0 0 0 2px var(--card);
}
.nav-badge.static { position: static; margin-left: auto; box-shadow: none; }

/* ---------- Segmented control (admin tabs) ---------- */
.segmented {
  display: flex; gap: 5px; background: var(--header-bg); padding: 9px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.segmented-item {
  flex: 1; border: none; background: var(--bg); border-radius: 10px; padding: 8px 4px;
  font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(16,24,40,.05);
  transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease), transform .12s var(--ease);
}
.segmented-item.active {
  background: linear-gradient(160deg, var(--accent-light) 0%, var(--accent) 55%, var(--accent-dark) 100%);
  color: #fff; box-shadow: var(--btn-shadow);
}
.segmented-item:active { transform: scale(.97); }

/* ---------- Business tag / requests / mini buttons ---------- */
.business-tag {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--accent-dark);
  background: var(--bg); padding: 3px 9px; border-radius: 8px; margin-bottom: 6px;
}
.request-row {
  background: var(--card); border-radius: 15px; padding: 12px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow);
}
.btn-mini {
  border: none; border-radius: 10px; padding: 8px 12px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 4px;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.btn-mini:active { transform: translateY(1px) scale(.96); }
.btn-mini-primary { background: linear-gradient(160deg, var(--accent-light), var(--accent) 55%, var(--accent-dark)); color: #fff; box-shadow: var(--btn-shadow); }
.btn-mini-danger { background: var(--bg); color: var(--danger); box-shadow: var(--btn-shadow-neutral); }
.employee-position { font-size: 11.5px; color: var(--muted-light); margin-top: 1px; }
.add-business-form { display: flex; gap: 8px; margin-bottom: 12px; align-items: flex-start; }
.profile-info-box {
  background: var(--card); border-radius: 15px; padding: 13px 16px; margin-top: 18px; width: 100%; max-width: 300px;
  display: flex; flex-direction: column; gap: 9px; box-shadow: var(--shadow);
}
.profile-info-box div { display: flex; justify-content: space-between; font-size: 13px; gap: 12px; }
.profile-info-box span { color: var(--muted); }
.profile-info-box b { font-weight: 600; text-align: right; }

/* ---------- Employees ---------- */
.employee-row {
  background: var(--card); border-radius: 16px; padding: 13px 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.employee-row:active { transform: scale(.995); }
.employee-name { font-size: 15px; font-weight: 600; }
.employee-phone { font-size: 13px; color: var(--muted); margin-top: 1px; }
.status-badge { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 8px; white-space: nowrap; }
.status-badge.active { background: var(--success-bg); color: var(--success-dark); }
.status-badge.blocked { background: var(--danger-bg); color: var(--danger-dark); }

.role-tag {
  display: inline-flex; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 700;
  color: var(--accent-dark); background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: 6px; padding: 1px 6px 1px 4px; vertical-align: middle;
}
.role-tag .icon { width: 11px; height: 11px; }

/* ---------- Свайп влево для удаления диалога ---------- */
.swipe-rail {
  position: relative;
  margin-bottom: 8px;
  border-radius: 16px;
  overflow: hidden;
}
.swipe-rail .chat-list-row {
  margin-bottom: 0;
  position: relative;
  z-index: 1;
  will-change: transform;
}
.swipe-actions { position: absolute; top: 0; right: 0; bottom: 0; display: flex; }
.swipe-btn {
  width: 72px; border: none; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.swipe-btn .icon { width: 23px; height: 23px; color: #fff; }
.swipe-btn:active { filter: brightness(.9); }
/* Заглушить — спокойный оранжевый; включить обратно — зелёный */
.swipe-mute { background: linear-gradient(160deg, #FFCB8E 0%, #F59E0B 55%, #C2670A 100%); }
.swipe-mute.on { background: linear-gradient(160deg, #7DEEDC 0%, var(--success) 55%, var(--success-dark) 100%); }
.swipe-delete { background: linear-gradient(160deg, #FF7A7A 0%, var(--danger) 55%, var(--danger-dark) 100%); }

/* Перечёркнутый колокольчик рядом с названием заглушённого чата */
.muted-mark { display: inline-flex; align-items: center; color: var(--muted-light); }
.muted-mark .icon { width: 13px; height: 13px; }
.chat-list-badge.dim { background: var(--muted-light); box-shadow: none; }

/* ---------- Chat list (диалоги) ---------- */
.chat-list-row {
  background: var(--card); border-radius: 16px; padding: 13px 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow); cursor: pointer; transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.chat-list-row:active { transform: scale(0.98); }
/* Общий чат предприятия — главная строка списка. Правило стоит ПОСЛЕ
   общего .chat-list-row: при равной специфичности выигрывает то, что ниже.
   Выделяем сдержанно — подложка остаётся светлой, а отличают строку
   акцентная полоса слева, тонкий контур и размер. Заливать её цветом
   нельзя: тёмный текст на насыщенном фоне читается плохо. */
.chat-list-row.group-row {
  background: var(--card);
  padding: 15px 15px 15px 17px;
  border-left: 4px solid var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), var(--shadow-md);
}
.chat-list-row.group-row .avatar { width: 50px; height: 50px; border-radius: 16px; }
.chat-list-row.group-row .avatar .icon { width: 24px; height: 24px; }
.chat-list-row.group-row .chat-list-name { font-size: 16px; font-weight: 800; letter-spacing: -.2px; }
.chat-list-row.group-row .chat-list-preview { font-size: 13.5px; opacity: .85; }
.chat-list-row.group-row:active { transform: scale(.985); }

@media (hover: hover) and (pointer: fine) {
  .chat-list-row:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
}
.chat-list-body { flex: 1; min-width: 0; }
.chat-list-name { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.chat-list-preview {
  font-size: 13px; color: var(--muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-list-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
/* Статус собеседника прямо в списке диалогов */
.chat-list-status { font-size: 11.5px; color: var(--muted-light); margin-top: 2px; }
.chat-list-status.online { color: var(--success-dark); font-weight: 700; }
/* Галочки под временем: одна — отправлено, две — прочитано */
.chat-list-meta .read-mark { opacity: .55; }
.chat-list-meta .read-mark.read { opacity: 1; }
.chat-list-meta .read-mark .icon { width: 16px; height: 16px; color: var(--accent); }
.chat-list-time { font-size: 11px; color: var(--muted-light); }
.chat-list-badge {
  min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
  background: linear-gradient(160deg, #FF7A7A, var(--danger-dark)); color: #fff; font-size: 10.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.empty-hint { text-align: center; color: var(--muted); font-size: 12.5px; padding: 4px 20px 20px; }
.contact-list { max-height: 50vh; overflow-y: auto; margin: 0 -2px; }
.contact-list .chat-list-row { margin: 0 2px 8px; }

/* ---------- Modal ---------- */
.modal-overlay {
  position: absolute; inset: 0; background: rgba(8,14,20,.55); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50;
  animation: fade-in .18s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-card {
  background: var(--card); border-radius: 20px; padding: 22px; width: 100%; max-width: 340px; max-height: 85%; overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: modal-in .2s var(--ease);
}
.modal-title { font-size: 17px; font-weight: 800; margin-bottom: 4px; letter-spacing: -.2px; }
.cred-box { background: var(--bg); border-radius: 13px; padding: 12px 14px; font-size: 14px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; box-shadow: inset 0 1px 2px rgba(16,24,40,.05); }

/* ---------- Profile ---------- */
.profile-card {
  display: flex; flex-direction: column; align-items: center;
  padding: 18px 16px 16px; min-height: 100%;
}
/* Верх профиля — цельная скруглённая карточка, а не «обрубок» на фоне */
.profile-head-card {
  width: 100%; max-width: 340px;
  display: flex; flex-direction: column; align-items: center;
  background: var(--card); border-radius: 24px; box-shadow: var(--shadow-md);
  padding: 26px 18px 22px;
}
.profile-head-card .profile-info-box { background: var(--input-bg); box-shadow: none; max-width: 100%; }
/* Выйти и удалить профиль — всегда в самом низу экрана */
.profile-bottom {
  margin-top: auto; padding-top: 26px; width: 100%;
  display: flex; flex-direction: column; align-items: center;
}
.profile-bottom .logout-btn { margin-top: 0; }
.profile-avatar-wrap { position: relative; }
.profile-avatar {
  width: 92px; height: 92px; border-radius: 50%;
  background: linear-gradient(155deg, var(--accent-light) 0%, var(--accent) 55%, var(--accent-dark) 100%);
  color: #fff; font-size: 36px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 30px -10px rgba(30,150,214,.5), inset 0 2px 0 rgba(255,255,255,.3);
}
.profile-avatar-img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 14px 30px -10px rgba(16,24,40,.35); }
.avatar-edit-btn {
  position: absolute; bottom: -2px; right: -2px; width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(155deg, var(--accent-light), var(--accent) 55%, var(--accent-dark));
  color: #fff; border: 3px solid var(--bg); display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: var(--btn-shadow);
  transition: transform .12s var(--ease);
}
.avatar-edit-btn:active { transform: scale(.9); }
.avatar-edit-btn .icon { width: 15px; height: 15px; }
.profile-name { font-size: 20px; font-weight: 800; margin-top: 14px; letter-spacing: -.2px; }
.profile-phone { font-size: 14px; color: var(--muted); margin-top: 3px; }
.role-badge.chief { color: var(--important-dark); background: color-mix(in srgb, var(--important) 20%, var(--card)); }
.role-badge.super { color: #6428C4; background: color-mix(in srgb, #8B5CF6 18%, var(--card)); }
.role-badge.admin { color: var(--accent-dark); background: color-mix(in srgb, var(--accent) 16%, var(--card)); }
.role-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--accent-dark); background: var(--bg); padding: 6px 13px; border-radius: 20px; margin-top: 10px; font-weight: 700; box-shadow: var(--shadow-xs); }
.logout-btn {
  display: flex; align-items: center; gap: 6px; background: var(--danger-bg); color: var(--danger-dark); border: none; border-radius: 13px;
  padding: 12px 24px; font-size: 14px; font-weight: 700; margin-top: 20px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 10px -4px rgba(224,82,79,.3);
  transition: transform .12s var(--ease);
}
.logout-btn:active { transform: translateY(1px) scale(.98); }
.delete-account-btn { display: flex; align-items: center; gap: 6px; background: transparent; color: var(--muted); border: none; padding: 12px 24px; font-size: 13px; font-weight: 600; margin-top: 10px; cursor: pointer; }
.notif-status { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.toggle-btn {
  border: none; border-radius: 20px; padding: 8px 15px; font-size: 12.5px; font-weight: 700; cursor: pointer; flex-shrink: 0;
  transition: transform .12s var(--ease);
}
.toggle-btn:active { transform: scale(.95); }
.toggle-btn.on { background: var(--success-bg); color: var(--success-dark); }
.toggle-btn.off { background: linear-gradient(160deg, var(--accent-light), var(--accent) 55%, var(--accent-dark)); color: #fff; box-shadow: var(--btn-shadow); }

.profile-actions { width: 100%; max-width: 300px; margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }

/* ---------- Settings list ---------- */
.settings-section-title { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin: 18px 6px 8px; }
.settings-section-title:first-child { margin-top: 6px; }
.settings-card { background: var(--card); border-radius: 15px; box-shadow: var(--shadow); overflow: hidden; }
.settings-row, .settings-list-item {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px; width: 100%;
  background: transparent; border: none; cursor: pointer; text-align: left; color: var(--text);
  transition: background .15s ease;
}
.settings-list-item:active { background: var(--bg); }
.settings-list-item { border-bottom: 1px solid var(--border); }
.settings-list-item:last-child { border-bottom: none; }
.settings-row-icon {
  width: 38px; height: 38px; border-radius: 12px; background: var(--ic-blue); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: var(--tile-shadow-sm);
}
.settings-row-icon .icon { width: 18px; height: 18px; color: #fff; }
/* Разные разделы — разный цвет плашки */
.profile-actions .settings-list-item:nth-child(1) .settings-row-icon { background: var(--ic-violet); }
.profile-actions .settings-list-item:nth-child(2) .settings-row-icon { background: var(--ic-pink); }
.settings-row .settings-row-icon { background: var(--ic-orange); }
.settings-row-body { flex: 1; min-width: 0; }
.settings-row-title { font-size: 14px; font-weight: 600; }
.settings-row-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.settings-about { padding: 14px; text-align: center; flex-direction: column; gap: 2px; }

.theme-switch { display: flex; gap: 6px; padding: 10px; }
.theme-opt {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: none; background: var(--bg); border-radius: 13px; padding: 12px 4px;
  color: var(--muted); cursor: pointer; font-size: 11.5px; font-weight: 700;
  box-shadow: inset 0 1px 2px rgba(16,24,40,.05);
  transition: transform .12s var(--ease), box-shadow .18s var(--ease), color .18s ease, background .18s ease;
}
.theme-opt:active { transform: scale(.96); }
.theme-opt .icon { width: 20px; height: 20px; }
.theme-opt.active {
  color: #fff; background: linear-gradient(160deg, var(--accent-light) 0%, var(--accent) 55%, var(--accent-dark) 100%);
  box-shadow: var(--btn-shadow);
}

/* ---------- Install modal ---------- */
.install-icon {
  width: 54px; height: 54px; border-radius: 17px;
  background: linear-gradient(155deg, var(--accent-light) 0%, var(--accent) 55%, var(--accent-dark) 100%);
  display: flex; align-items: center; justify-content: center; color: #fff; margin: 0 auto 8px;
  box-shadow: var(--btn-shadow);
}
.install-icon .icon { width: 27px; height: 27px; }
.install-modal { max-width: 380px; }
.install-modal-sub { font-size: 13px; color: var(--muted); margin-bottom: 16px; text-align: center; line-height: 1.5; }
.install-platform { background: var(--bg); border-radius: 13px; padding: 12px 14px; margin-bottom: 10px; }
.install-platform-title { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.install-steps { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.install-steps li { font-size: 12.5px; color: var(--text); opacity: .9; line-height: 1.45; }
.inline-icon { font-size: 13px; }
.install-or {
  text-align: center; font-size: 12px; color: var(--muted);
  margin: 14px 0 10px; position: relative;
}
.install-or::before, .install-or::after {
  content: ""; position: absolute; top: 50%; width: 32%; height: 1px; background: var(--border);
}
.install-or::before { left: 0; }
.install-or::after { right: 0; }

.install-note { font-size: 11.5px; color: var(--muted); background: var(--bg); border-radius: 11px; padding: 10px 12px; margin: 4px 0 4px; line-height: 1.5; }

.toast {
  position: absolute; bottom: 78px; left: 50%; transform: translateX(-50%);
  background: color-mix(in srgb, var(--text) 92%, transparent); color: var(--card); padding: 11px 20px; border-radius: 13px;
  font-size: 13px; font-weight: 600; z-index: 100; opacity: 0; transition: opacity .2s, transform .2s;
  pointer-events: none; white-space: nowrap; box-shadow: var(--shadow-lg);
}
.toast.show { opacity: 1; }

/* ---------- Панель шаблонов сообщений (вызов вводом "/") ---------- */
.slash-panel {
  background: var(--card); border-radius: 18px; padding: 10px;
  margin-bottom: 8px; box-shadow: var(--shadow-lg);
  animation: emoji-panel-in .18s var(--ease);
  max-height: 300px; overflow-y: auto; overscroll-behavior: contain;
}
/* Шапка панели: одна строка по центру, нажатие включает режим правки */
.slash-head {
  width: 100%; border: none; background: transparent; cursor: pointer;
  display: block; text-align: center;
  padding: 6px 8px 10px; font-size: 14px; font-weight: 700; color: var(--accent-dark);
  border-bottom: 1px solid var(--border); margin-bottom: 8px;
}
.slash-head:active { opacity: .6; }

/* Создание шаблона — заметная кнопка в режиме правки */
.slash-create {
  width: 100%; border: none; cursor: pointer; margin-bottom: 8px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; border-radius: 14px;
  background: linear-gradient(160deg, var(--accent-light) 0%, var(--accent) 55%, var(--accent-dark) 100%);
  color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .2px;
  box-shadow: var(--btn-shadow);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.slash-create .icon { color: #fff; }
.slash-create:active { transform: translateY(2px); box-shadow: var(--btn-shadow-active); }
.slash-title {
  font-size: 12px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .3px; padding: 2px 6px 8px;
}
.slash-item {
  width: 100%; border: none; background: transparent; color: var(--text);
  display: flex; align-items: center; gap: 10px;
  padding: 11px 10px; font-size: 15px; font-weight: 600; cursor: pointer; text-align: left;
  border-radius: 12px;
}
.slash-item .icon { color: var(--accent); }
.slash-item:active { background: var(--bg); }
.slash-item.cancel { justify-content: center; color: var(--muted); font-weight: 700; }
.slash-count {
  margin-left: auto; background: var(--bg); color: var(--muted);
  font-size: 12px; font-weight: 700; border-radius: 9px; padding: 1px 8px;
}
.slash-list { display: flex; flex-direction: column; gap: 4px; }
.slash-row { display: flex; align-items: center; gap: 6px; }
/* Строка шаблона: команда и предпросмотр текста в одну строку —
   вставка одним нажатием, как в Телеграме */
.slash-row-main {
  flex: 1; min-width: 0; border: none; background: transparent;
  border-radius: 12px; padding: 10px 10px; text-align: left; cursor: pointer;
  display: flex; align-items: baseline; gap: 8px; overflow: hidden;
}
.slash-row-main:active { background: var(--bg); }
.slash-row-title { font-size: 14.5px; font-weight: 700; color: var(--accent-dark); flex-shrink: 0; }
.slash-row-text {
  font-size: 14px; color: var(--muted); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slash-del {
  border: none; background: var(--danger-bg); color: var(--danger);
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.slash-del:active { transform: scale(.92); }
.fullscreen-chat .slash-panel { backdrop-filter: blur(14px); background: color-mix(in srgb, var(--card) 94%, transparent); }

/* ---------- Закреплённое сообщение ---------- */
/* Всегда одна строка: длинный текст обрезается многоточием, полоса не
   растёт и не съедает место у переписки. */
.pinned-bar {
  position: absolute; z-index: 18;
  top: calc(var(--header-h, 48px) + 4px); left: 8px; right: 8px;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px 7px 10px; border-radius: 14px; cursor: pointer;
  background: color-mix(in srgb, var(--header-bg) 90%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-md);
}
.pinned-line { width: 3px; align-self: stretch; border-radius: 2px; background: var(--accent); flex-shrink: 0; }
.pinned-body { flex: 1; min-width: 0; }
.pinned-label {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: var(--accent-dark);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pinned-label .icon { width: 12px; height: 12px; }
.pinned-text {
  font-size: 13.5px; color: var(--text); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pinned-close {
  border: none; background: transparent; color: var(--muted); cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.pinned-close:active { background: var(--bg); }
/* Лента опускается ниже, чтобы полоса ничего не закрывала */
.fullscreen-chat .scroll-area.has-pinned { padding-top: calc(var(--header-h, 48px) + 60px); }

/* Подпись пересланного сообщения */
.forwarded-mark {
  display: flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700; color: var(--accent-dark);
  margin-bottom: 4px; opacity: .85;
}
.forwarded-mark .icon { width: 12px; height: 12px; }

/* Предпросмотр пересылаемого текста в окне выбора получателя */
.forward-preview {
  background: var(--bg); border-radius: 12px; padding: 10px 12px;
  font-size: 13.5px; color: var(--text); margin: 8px 0 12px;
  max-height: 90px; overflow: hidden;
}

/* Метка самостоятельного админа — отличаем от обычного цветом */
.role-tag.super {
  color: var(--important-dark);
  background: color-mix(in srgb, var(--important) 16%, transparent);
}

/* ---------- Эмблемы ролей по старшинству ----------
   Главный админ — самая яркая и крупная, супер-админ — заметная,
   обычный админ — спокойная. Так уровень виден с одного взгляда. */
.role-tag {
  border-radius: 7px;
  padding: 2px 8px 2px 5px;
  font-size: 10.5px;
}
.role-tag .icon { width: 12px; height: 12px; }

/* Главный админ — золотой, крупнее остальных */
.role-tag.chief {
  background: linear-gradient(150deg, #FFD86B 0%, #F0A81E 55%, #C97A06 100%);
  color: #4A2D00;
  font-size: 12px; font-weight: 800; padding: 3px 11px 3px 7px;
  box-shadow: 0 3px 8px -2px rgba(240,168,30,.55), inset 0 1px 0 rgba(255,255,255,.45);
}
.role-tag.chief .icon { width: 15px; height: 15px; color: #4A2D00; }

/* Супер-админ — фиолетовый, средний */
.role-tag.super {
  background: linear-gradient(150deg, #C6A6FF 0%, #8B5CF6 55%, #6428C4 100%);
  color: #fff;
  font-size: 11px; font-weight: 800; padding: 2px 9px 2px 6px;
  box-shadow: 0 2px 6px -2px rgba(139,92,246,.5), inset 0 1px 0 rgba(255,255,255,.3);
}
.role-tag.super .icon { width: 13px; height: 13px; color: #fff; }

/* Обычный админ — спокойный синий, самый мелкий (правило по умолчанию выше) */

/* ---------- Кнопка "назад" как в Телеграме ---------- */
.fullscreen-chat .header-left .icon-btn {
  width: 44px; height: 38px; border-radius: 20px;
  background: color-mix(in srgb, var(--accent) 14%, color-mix(in srgb, var(--header-bg) 80%, transparent));
  color: var(--accent-dark);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.35);
}
.fullscreen-chat .header-left .icon-btn .icon { width: 22px; height: 22px; stroke-width: 2.2; }
.fullscreen-chat .header-left .icon-btn:active {
  transform: scale(.94);
  background: color-mix(in srgb, var(--accent) 24%, transparent);
}

/* ---------- Сортировка в списке сотрудников ---------- */
.sort-bar {
  display: flex; gap: 7px; padding: 7px 12px; flex-shrink: 0;
  background: var(--header-bg); border-bottom: 1px solid var(--border);
}
.sort-chip {
  border: none; border-radius: 18px; padding: 7px 14px; cursor: pointer;
  font-size: 12.5px; font-weight: 700;
  background: var(--bg); color: var(--muted);
  box-shadow: inset 0 1px 2px rgba(16,24,40,.06);
  transition: background .15s ease, color .15s ease, transform .12s var(--ease);
}
.sort-chip:active { transform: scale(.96); }
.sort-chip.active {
  background: linear-gradient(160deg, var(--accent-light) 0%, var(--accent) 55%, var(--accent-dark) 100%);
  color: #fff; box-shadow: var(--btn-shadow);
}

/* ---------- Поиск по сообщениям в чате ---------- */
/* Кнопка поиска симметрична кнопке "назад" — тот же размер и заливка */
.fullscreen-chat .header-right .icon-btn {
  width: 44px; height: 38px; border-radius: 20px;
  background: color-mix(in srgb, var(--accent) 14%, color-mix(in srgb, var(--header-bg) 80%, transparent));
  color: var(--accent-dark);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.35);
}
.fullscreen-chat .header-right .icon-btn .icon { width: 21px; height: 21px; stroke-width: 2.4; }
.fullscreen-chat .header-right .icon-btn:active {
  transform: scale(.94);
  background: color-mix(in srgb, var(--accent) 24%, transparent);
}
/* Стрелка назад и крестик — жирнее, чтобы читались на полупрозрачном фоне */
.fullscreen-chat .header-left .icon-btn .icon { stroke-width: 2.6; }

/* Режим поиска: вместо кнопок — поле на всю ширину и крестик */
/* В режиме поиска шапка кликабельна целиком: обычная шапка пропускает
   нажатия насквозь (чтобы под ней прокручивалась лента), из-за чего
   крестик не нажимался. */
.chat-search-header { grid-template-columns: minmax(0, 1fr) auto; pointer-events: auto; }
.chat-search-box, .chat-search-close { pointer-events: auto; }
.chat-search-box {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  background: color-mix(in srgb, var(--header-bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-radius: 20px; padding: 7px 14px;
  box-shadow: var(--shadow);
}
.chat-search-box .search-icon { width: 17px; height: 17px; color: var(--muted); flex-shrink: 0; }
.chat-search-input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  color: var(--text); font-size: 16px; font-family: inherit;
}
/* Крестик — крупный жирный в овальном пузыре */
.fullscreen-chat .chat-search-close {
  flex-shrink: 0; width: 46px; height: 40px; border-radius: 21px;
  background: color-mix(in srgb, var(--danger) 12%, color-mix(in srgb, var(--header-bg) 80%, transparent));
  color: var(--danger-dark);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.35);
}
.fullscreen-chat .chat-search-close .icon { width: 24px; height: 24px; stroke-width: 3; }
.fullscreen-chat .chat-search-close:active {
  transform: scale(.94);
  background: color-mix(in srgb, var(--danger) 22%, transparent);
}

/* Сортировка внутри шторки состава предприятия */
.sheet-sort {
  background: transparent; border-bottom: none;
  padding: 0 0 10px; margin-top: -4px;
}
.sheet-person .chat-list-status { margin-top: 2px; }

/* ---------- Фон переписки ----------
   Мягкий градиент вместо плоского серого — как в Телеграме. Оттенок
   спокойный, чтобы белые и голубые пузыри читались без напряжения. */
#app.fullscreen-chat .chat-scroll {
  background:
    radial-gradient(circle at 15% 0%, rgba(255,255,255,.55) 0%, transparent 45%),
    linear-gradient(165deg, #E8F3E4 0%, #DFEFE6 40%, #D7EAEF 100%);
}
:root[data-theme="dark"] #app.fullscreen-chat .chat-scroll,
:root:not([data-theme="light"]) #app.fullscreen-chat .chat-scroll {
  background:
    radial-gradient(circle at 15% 0%, rgba(255,255,255,.05) 0%, transparent 45%),
    linear-gradient(165deg, #101C18 0%, #0F1B1E 45%, #0C1620 100%);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) #app.fullscreen-chat .chat-scroll {
    background:
      radial-gradient(circle at 15% 0%, rgba(255,255,255,.55) 0%, transparent 45%),
      linear-gradient(165deg, #E8F3E4 0%, #DFEFE6 40%, #D7EAEF 100%);
  }
}