/* ═══════════════════════════════════════════════════════════
   СИНИЧКА · дизайн-система
   Вся раскладка и весь цвет — из переменных ниже.
   Компоненты не знают ни о теме, ни о размере экрана.
   ═══════════════════════════════════════════════════════════ */

:root{
  --fs-cap:.70rem; --fs-xs:.78rem; --fs-sm:.86rem; --fs-md:.94rem;
  --fs-lg:1.06rem; --fs-xl:1.28rem; --fs-2xl:1.62rem; --fs-3xl:2.1rem;

  --fw-med:500; --fw-sb:600; --fw-b:700;
  --lh-tight:1.22; --lh-snug:1.38; --lh-body:1.5;
  --ls-tight:-.02em; --ls-caps:.10em;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.375rem; --s6:1.875rem; --s7:2.5rem;

  --r1:.5rem; --r2:.875rem; --r3:1.25rem; --r4:1.75rem; --rf:999px;

  --av:3rem; --av-sm:2.15rem; --av-xs:1.65rem; --av-lg:5rem;
  --icon:1.35rem; --icon-sm:.95rem;
  --hit:2.75rem; --nav:3.5rem; --appbar:3rem;
  --pane-list:21rem;

  --ground:#F3F5FA; --surface:#FFF; --surface-2:#E9EDF6; --surface-3:#DCE2EF;
  --ink:#141822; --ink-2:#59616F; --ink-3:#8B93A3;
  --line:#DCE1EC; --line-soft:#E9EDF4;

  --azure:#2B5CE6; --azure-ink:#FFF; --azure-soft:#E4EAFD;
  --breast:#FFC53D; --breast-ink:#5C3F00; --breast-soft:#FFF3D4;
  --ok:#189A6A; --warn:#D97B1E; --bad:#D9453F;

  --bubble-in:#FFF; --bubble-in-ink:var(--ink);
  --bubble-out:#2B5CE6; --bubble-out-ink:#FFF;
  --scrim:rgba(10,14,22,.45);

  --sh-1:0 1px 2px rgba(20,24,34,.07);
  --sh-2:0 2px 6px rgba(20,24,34,.07), 0 8px 22px rgba(20,24,34,.07);
  --sh-3:0 8px 24px rgba(20,24,34,.12), 0 32px 64px rgba(20,24,34,.16);
  --sh-accent:0 3px 12px rgba(43,92,230,.38);

  --dur-1:140ms; --dur-2:240ms; --dur-3:320ms;
  --ease:cubic-bezier(.2,.7,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);

  --sans:"Golos Text","Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,"SF Pro Text",Roboto,"Noto Sans",system-ui,sans-serif;
  --display:"Golos Text","Segoe UI Variable Display","Segoe UI",-apple-system,BlinkMacSystemFont,"SF Pro Display",Roboto,system-ui,sans-serif;

  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}

/* Тёмная тема перекрашивает только токены.
   Три состояния: системное, явно светлое, явно тёмное. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0D1117; --surface:#161C26; --surface-2:#1E2632; --surface-3:#28323F;
    --ink:#E9EDF5; --ink-2:#9AA4B4; --ink-3:#6C7686;
    --line:#26303D; --line-soft:#1D2531;
    --azure:#5183FF; --azure-soft:#17233F;
    --breast:#FFCE55; --breast-ink:#3A2A00; --breast-soft:#2E2513;
    --ok:#37BE88; --warn:#E9973F; --bad:#F1615B;
    --bubble-in:#1E2632; --bubble-out:#2E5FE8;
    --scrim:rgba(0,0,0,.6);
    --sh-1:0 1px 2px rgba(0,0,0,.45);
    --sh-2:0 2px 6px rgba(0,0,0,.45), 0 8px 22px rgba(0,0,0,.4);
    --sh-3:0 8px 24px rgba(0,0,0,.5), 0 32px 64px rgba(0,0,0,.55);
    --sh-accent:0 3px 12px rgba(81,131,255,.4);
  }
}
:root[data-theme="dark"]{
  --ground:#0D1117; --surface:#161C26; --surface-2:#1E2632; --surface-3:#28323F;
  --ink:#E9EDF5; --ink-2:#9AA4B4; --ink-3:#6C7686;
  --line:#26303D; --line-soft:#1D2531;
  --azure:#5183FF; --azure-soft:#17233F;
  --breast:#FFCE55; --breast-ink:#3A2A00; --breast-soft:#2E2513;
  --ok:#37BE88; --warn:#E9973F; --bad:#F1615B;
  --bubble-in:#1E2632; --bubble-out:#2E5FE8;
  --scrim:rgba(0,0,0,.6);
  --sh-1:0 1px 2px rgba(0,0,0,.45);
  --sh-2:0 2px 6px rgba(0,0,0,.45), 0 8px 22px rgba(0,0,0,.4);
  --sh-3:0 8px 24px rgba(0,0,0,.5), 0 32px 64px rgba(0,0,0,.55);
  --sh-accent:0 3px 12px rgba(81,131,255,.4);
}

/* ═══════════════ БАЗА ═══════════════ */

*,*::before,*::after{box-sizing:border-box}

html{
  /* Единственные пиксели: флюидный корневой кегль.
     Всё прочее в rem — интерфейс масштабируется целиком. */
  font-size:clamp(14.5px,3.6vw,18px);
  -webkit-text-size-adjust:100%;
  height:100%;
}
@media (min-width:52rem){ html{font-size:16.5px} }

body{
  margin:0; height:100%;
  background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-md); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overflow:hidden; overscroll-behavior:none;
}

button{font:inherit; color:inherit; background:none; border:0; margin:0; padding:0; cursor:pointer}
input,textarea{font:inherit; color:inherit}
:focus{outline:none}
:focus-visible{outline:2px solid var(--azure); outline-offset:2px; border-radius:var(--r1)}
::selection{background:var(--breast); color:var(--breast-ink)}
[hidden]{display:none !important}

.icon{width:var(--icon); height:var(--icon); flex:0 0 auto; display:block}
.icon-sm{width:var(--icon-sm); height:var(--icon-sm); flex:0 0 auto; display:block}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

*{scrollbar-width:thin; scrollbar-color:var(--surface-3) transparent}
*::-webkit-scrollbar{width:.4rem; height:.4rem}
*::-webkit-scrollbar-thumb{background:var(--surface-3); border-radius:var(--rf)}
*::-webkit-scrollbar-track{background:transparent}

/* ═══════════════ ОБОЛОЧКА ═══════════════
   position:fixed + inset:0 — надёжнее 100vh на любой ОС:
   не зависит от выезжающей адресной строки. */

.app{
  position:fixed; inset:0;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  grid-template-columns:minmax(0,1fr);
  background:var(--ground); overflow:hidden;
}
@media (min-width:52rem){
  .app{grid-template-rows:minmax(0,1fr); grid-template-columns:auto minmax(0,1fr)}
  .app>.nav{grid-column:1; grid-row:1}
  .app>.viewport{grid-column:2; grid-row:1}
}
.viewport{position:relative; overflow:hidden; min-width:0; min-height:0}

/* ═══════════════ ВХОД ═══════════════ */

.auth{
  position:fixed; inset:0; z-index:50;
  display:grid; place-items:center;
  padding:var(--s4);
  background:
    radial-gradient(120% 70% at 50% -10%, var(--azure-soft), transparent 65%),
    var(--ground);
  overflow-y:auto;
}
.auth__card{
  width:100%; max-width:22rem;
  display:flex; flex-direction:column; align-items:center; gap:var(--s3);
  text-align:center;
}
.auth__logo{width:4.5rem; height:4.5rem; margin-bottom:var(--s1)}
.auth__title{
  font-family:var(--display); font-size:var(--fs-2xl); font-weight:var(--fw-b);
  letter-spacing:var(--ls-tight); line-height:var(--lh-tight); margin:0;
}
.auth__sub{margin:0; color:var(--ink-2); font-size:var(--fs-sm); line-height:var(--lh-snug); max-width:20rem}
.auth__form{width:100%; display:flex; flex-direction:column; gap:var(--s2); margin-top:var(--s2)}
.field{
  width:100%;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r2); padding:var(--s3) var(--s4);
  font-size:var(--fs-lg); text-align:center;
  letter-spacing:.02em;
  transition:border-color var(--dur-1), box-shadow var(--dur-1);
}
.field::placeholder{color:var(--ink-3); letter-spacing:normal}
.field:focus{border-color:var(--azure); box-shadow:0 0 0 3px var(--azure-soft)}
.field--code{letter-spacing:.5em; font-variant-numeric:tabular-nums; font-weight:var(--fw-sb)}
.auth__hint{font-size:var(--fs-xs); color:var(--ink-3); line-height:var(--lh-snug)}
.auth__error{
  font-size:var(--fs-sm); color:var(--bad); min-height:1.2em;
  line-height:var(--lh-snug);
}
.auth__back{font-size:var(--fs-sm); color:var(--ink-3); padding:var(--s2)}
.auth__back:hover{color:var(--azure)}

/* Разделитель между способами входа: черта, разорванная словом. */
.auth__or{
  display:flex; align-items:center; gap:var(--s3);
  margin:var(--s4) 0; color:var(--ink-3); font-size:var(--fs-xs);
}
.auth__or::before,
.auth__or::after{content:""; flex:1; height:1px; background:var(--line)}

/* Быстрый вход: список жителей, по нажатию — сразу в приложение. */
.auth__people{display:flex; flex-direction:column; gap:var(--s2); margin-top:var(--s3)}
.person{
  display:grid; grid-template-columns:var(--av) minmax(0,1fr) auto;
  gap:var(--s3); align-items:center; text-align:left;
  padding:var(--s2) var(--s3);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r2); box-shadow:var(--sh-1);
  transition:transform var(--dur-1) var(--spring), border-color var(--dur-1);
}
.person:active{transform:scale(.98)}
@media (hover:hover){ .person:hover{border-color:var(--azure)} }
.person__name{font-size:var(--fs-md); font-weight:var(--fw-sb)}
.person__hint{font-size:var(--fs-xs); color:var(--ink-3)}
.person__go{color:var(--ink-3)}

/* ═══════════════ КНОПКИ ═══════════════ */

.btn{
  padding:var(--s3) var(--s4);
  border-radius:var(--rf);
  font-size:var(--fs-md); font-weight:var(--fw-sb);
  white-space:nowrap; border:1px solid transparent;
  transition:transform var(--dur-1) var(--spring), background var(--dur-1), opacity var(--dur-1);
}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.5; cursor:default; transform:none}
.btn--primary{background:var(--azure); color:var(--azure-ink); box-shadow:var(--sh-accent)}
.btn--soft{background:var(--surface-2); color:var(--ink-2)}
.btn--sm{padding:.3rem var(--s3); font-size:var(--fs-xs)}
.btn--block{width:100%}

/* Кнопка Яндекса. Чёрный фон с фирменной красной «Я» — так её узнают
   не читая, и она не спорит с синим цветом самой Синички. Рамка нужна
   в тёмной теме: без неё чёрное на почти чёрном сливается. */
.btn--yandex{
  display:flex; align-items:center; justify-content:center; gap:var(--s2);
  background:#000; color:#fff; border-color:rgba(255,255,255,.16);
}
.btn__logo{width:1.25rem; height:1.25rem; flex:none}

/* ═══════════════ ВЕРХНЯЯ ПАНЕЛЬ ═══════════════ */

.appbar{
  flex:0 0 auto; min-height:var(--appbar);
  padding:var(--s2) var(--s3);
  padding-top:calc(var(--s2) + var(--safe-t));
  padding-right:calc(var(--s3) + var(--safe-r));
  background:var(--surface); border-bottom:1px solid var(--line-soft);
  display:flex; align-items:center; gap:var(--s2);
  position:relative; z-index:2;
}
.appbar__title{
  margin:0; font-family:var(--display); font-size:var(--fs-xl); font-weight:var(--fw-b);
  letter-spacing:var(--ls-tight); line-height:var(--lh-tight); padding-left:var(--s1);
}
.appbar__grow{flex:1 1 auto; min-width:0}
.appbar__stack{display:flex; flex-direction:column; min-width:0; line-height:var(--lh-tight)}
.appbar__stack b{font-size:var(--fs-md); font-weight:var(--fw-sb); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.appbar__stack span{font-size:var(--fs-xs); color:var(--ink-3); font-weight:var(--fw-med)}
.appbar__stack span.is-online{color:var(--ok)}

.iconbtn{
  width:var(--hit); height:var(--hit);
  display:grid; place-items:center; border-radius:var(--rf);
  color:var(--ink-2); flex:0 0 auto;
  transition:background var(--dur-1), color var(--dur-1);
}
@media (hover:hover){ .iconbtn:hover{background:var(--azure-soft); color:var(--azure)} }
.iconbtn:active{background:var(--azure-soft); color:var(--azure)}
.iconbtn--tight{width:2.15rem; height:2.15rem}

/* ═══════════════ ЭКРАНЫ ═══════════════ */

.screen{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  background:var(--ground); min-width:0; min-height:0;
}
.screen__scroll{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column;
  padding-bottom:var(--s4);
}
.anim-fade{animation:fade var(--dur-2) var(--ease) both}
.anim-push{animation:push var(--dur-2) var(--ease) both}
@keyframes fade{from{opacity:0; transform:translateY(.5rem)} to{opacity:1; transform:none}}
@keyframes push{from{opacity:0; transform:translateX(1.5rem)} to{opacity:1; transform:none}}

.limit{width:100%; max-width:46rem; margin-inline:auto}

/* ═══════════════ СОСТОЯНИЕ СВЯЗИ ═══════════════ */

.offline{
  flex:0 0 auto;
  background:var(--warn); color:#fff;
  font-size:var(--fs-xs); font-weight:var(--fw-sb);
  text-align:center; padding:var(--s1) var(--s2);
  animation:fade var(--dur-2) var(--ease) both;
}

/* ═══════════════ ПУСТЫЕ СОСТОЯНИЯ ═══════════════ */

.empty{
  flex:1 1 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s2); padding:var(--s6) var(--s4); text-align:center;
}
.empty__bird{width:4.5rem; height:4.5rem; opacity:.9}
.empty__title{font-family:var(--display); font-size:var(--fs-lg); font-weight:var(--fw-sb)}
.empty__text{font-size:var(--fs-sm); color:var(--ink-3); max-width:22rem; line-height:var(--lh-snug)}

.skeleton{
  background:linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size:400% 100%;
  animation:shimmer 1.4s ease infinite;
  border-radius:var(--r1);
}
@keyframes shimmer{from{background-position:100% 0} to{background-position:0 0}}

/* ═══════════════ ПОИСК ═══════════════ */

.search{
  flex:0 0 auto;
  margin:var(--s2) var(--s3) var(--s1);
  padding:var(--s2) var(--s3);
  border-radius:var(--rf);
  background:var(--surface-2);
  color:var(--ink-3); font-size:var(--fs-sm);
  display:flex; align-items:center; gap:var(--s2);
  border:1px solid transparent;
}
.search input{
  flex:1 1 auto; min-width:0; background:none; border:0;
  font-size:var(--fs-sm); color:var(--ink);
}
.search input::placeholder{color:var(--ink-3)}
.search:focus-within{border-color:var(--azure); background:var(--surface)}

/* ═══════════════ АВАТАР ═══════════════ */

.av{
  width:var(--av); height:var(--av); flex:0 0 auto;
  border-radius:var(--rf);
  display:grid; place-items:center; position:relative;
  font-family:var(--display); font-weight:var(--fw-sb);
  font-size:calc(var(--av)*.34); color:#fff;
  letter-spacing:var(--ls-tight); user-select:none; overflow:visible;
}
/* Фотография вместо инициалов: кружок тот же, меняется только заливка.
   Буквы прячем прозрачным цветом, а не удалением — они остаются
   в разметке для чтения с экрана. */
.av--photo{background-size:cover; background-position:center; color:transparent}
.av--sm{--av:var(--av-sm)}
.av--xs{--av:var(--av-xs)}
.av--lg{--av:var(--av-lg)}
.av__online{
  position:absolute; right:0; bottom:0;
  width:calc(var(--av)*.26); height:calc(var(--av)*.26);
  border-radius:var(--rf); background:var(--ok);
  border:calc(var(--av)*.055) solid var(--surface);
}
.t-azure {background:linear-gradient(140deg,#2B5CE6,#5183FF)}
.t-violet{background:linear-gradient(140deg,#7B5BE8,#A97BF0)}
.t-green {background:linear-gradient(140deg,#189A6A,#2ABF88)}
.t-coral {background:linear-gradient(140deg,#E8734A,#F09B6B)}
.t-slate {background:linear-gradient(140deg,#3D4A5C,#5C6B7F)}
.t-teal  {background:linear-gradient(140deg,#1B7FA8,#3BA6CE)}
.t-amber {background:linear-gradient(140deg,#FFC53D,#F09B1B); color:var(--breast-ink)}
.t-red   {background:linear-gradient(140deg,#D9453F,#F0736D)}

/* ═══════════════ СПИСОК ═══════════════ */

.rowgroup{display:flex; flex-direction:column}
.rowgroup__head{
  margin:0; padding:var(--s4) var(--s4) var(--s1);
  font-size:var(--fs-cap); font-weight:var(--fw-b);
  letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--ink-3);
}
.row{
  display:grid; grid-template-columns:var(--av) minmax(0,1fr) auto;
  gap:var(--s3); align-items:center;
  width:100%; text-align:left;
  padding:var(--s2) var(--s4); min-height:var(--hit);
  transition:background var(--dur-1);
}
.row:active{background:var(--surface-2)}
@media (hover:hover){ .row--tap:hover{background:var(--surface-2)} }
.row--on{background:var(--azure-soft)}
@media (hover:hover){ .row--on:hover{background:var(--azure-soft)} }
.row__main{min-width:0; display:flex; flex-direction:column; gap:.1rem}
.row__top{display:flex; align-items:center; gap:var(--s1); min-width:0}
.row__name{font-size:var(--fs-md); font-weight:var(--fw-sb); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row__sub{font-size:var(--fs-sm); color:var(--ink-2); line-height:var(--lh-snug); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row__sub b{color:var(--ink-3); font-weight:400}
.row__side{display:flex; flex-direction:column; align-items:flex-end; gap:var(--s1); flex:0 0 auto}

.time{font-size:var(--fs-xs); color:var(--ink-3); font-variant-numeric:tabular-nums}
.badge{
  min-width:1.35rem; height:1.35rem; padding:0 .4rem;
  border-radius:var(--rf);
  background:var(--azure); color:var(--azure-ink);
  font-size:var(--fs-cap); font-weight:var(--fw-b);
  display:grid; place-items:center; line-height:1;
  font-variant-numeric:tabular-nums;
}
.badge--muted{background:var(--ink-3)}
.badge--mention{background:var(--breast); color:var(--breast-ink)}

/* ═══════════════ СПЛИТ: СПИСОК ↔ ПЕРЕПИСКА ═══════════════ */

.split{
  flex:1 1 auto; min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
}
.split__list,.split__detail{
  display:flex; flex-direction:column;
  min-width:0; min-height:0; overflow:hidden;
  grid-area:1/1;
}
.split[data-view="list"] .split__detail{display:none}
.split[data-view="thread"] .split__list{display:none}

@media (min-width:52rem){
  .split{grid-template-columns:var(--pane-list) minmax(0,1fr)}
  .split__list{grid-area:1/1; border-right:1px solid var(--line); background:var(--surface)}
  .split__detail{grid-area:1/2}
  .split[data-view="list"] .split__detail{display:flex}
  .split[data-view="thread"] .split__list{display:flex}
  .split__back{display:none}
}

/* ═══════════════ ПЕРЕПИСКА ═══════════════ */

.thread{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column;
  padding:var(--s3) var(--s3) var(--s2);
}
.thread__inner{
  width:100%; max-width:52rem; margin-inline:auto;
  display:flex; flex-direction:column; gap:var(--s1);
  margin-top:auto; /* короткая переписка прижимается к низу */
}
.daysep{
  align-self:center; margin:var(--s2) 0;
  padding:var(--s1) var(--s3); border-radius:var(--rf);
  background:var(--surface-2); color:var(--ink-3);
  font-size:var(--fs-xs); font-weight:var(--fw-sb);
}
.bub{
  max-width:min(78%,34rem);
  padding:var(--s2) var(--s3);
  border-radius:var(--r3);
  font-size:var(--fs-md); line-height:var(--lh-snug);
  box-shadow:var(--sh-1);
  animation:pop var(--dur-2) var(--ease) both;
  overflow-wrap:anywhere; white-space:pre-wrap;
}
@keyframes pop{from{opacity:0; transform:translateY(.4rem) scale(.98)} to{opacity:1; transform:none}}
.bub--in{align-self:flex-start; background:var(--bubble-in); color:var(--bubble-in-ink); border-bottom-left-radius:var(--r1)}
.bub--out{align-self:flex-end; background:var(--bubble-out); color:var(--bubble-out-ink); border-bottom-right-radius:var(--r1)}
.bub--pending{opacity:.72}
.bub--failed{background:var(--bad)}
.bub--deleted{opacity:.6; font-style:italic}
.bub__author{
  display:block; font-size:var(--fs-xs); font-weight:var(--fw-sb);
  color:var(--azure); margin-bottom:.1rem;
}
.bub--out .bub__author{color:rgba(255,255,255,.85)}
.bub__meta{
  float:right; margin:var(--s1) 0 0 var(--s2);
  font-size:var(--fs-cap); opacity:.7;
  font-variant-numeric:tabular-nums; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.2rem;
}

/* ── Вложения ─────────────────────────────────────────────────────── */

/* Картинка в сообщении. Соотношение сторон держим до загрузки, чтобы
   переписка не дёргалась, когда файл дойдёт. */
.bub--media{padding:var(--s1)}
.bub--media .bub__meta{margin-right:var(--s2)}
.bub__image{
  display:block; width:100%; max-width:22rem;
  max-height:24rem; object-fit:cover;
  border-radius:var(--r2); background:var(--surface-2);
  cursor:zoom-in; margin-bottom:var(--s1);
}

/* Полоска над полем ввода: что прикреплено к следующему сообщению. */
.attach{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--s3); align-items:center;
  padding:var(--s2) var(--s3);
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.attach__thumb{
  width:2.75rem; height:2.75rem; object-fit:cover;
  border-radius:var(--r2); background:var(--surface-2);
}
.attach__info{display:flex; flex-direction:column; gap:var(--s1); min-width:0}
.attach__name{
  font-size:var(--fs-sm); color:var(--ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.attach__track{height:3px; border-radius:2px; background:var(--line); overflow:hidden}
.attach__bar{height:100%; width:0; background:var(--azure); transition:width var(--dur-1) linear}
.attach__drop{
  width:1.75rem; height:1.75rem; border-radius:50%;
  font-size:1.1rem; line-height:1; color:var(--ink-3);
  background:var(--surface-2);
}
.attach__drop:hover{color:var(--bad)}

/* Просмотр во весь экран. */
.lightbox{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center;
  padding:var(--s4);
  background:rgba(0,0,0,.86);
  cursor:zoom-out;
  animation:fade var(--dur-2) var(--ease) both;
}
.lightbox img{
  max-width:100%; max-height:100%;
  border-radius:var(--r2); box-shadow:var(--sh-2);
}
.typing{
  align-self:flex-start; display:flex; gap:var(--s1);
  padding:var(--s3);
  background:var(--bubble-in); border-radius:var(--r3);
  border-bottom-left-radius:var(--r1); box-shadow:var(--sh-1);
  margin-top:var(--s1);
}
.typing i{width:.4rem; height:.4rem; border-radius:var(--rf); background:var(--ink-3); display:block; animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.3; transform:translateY(0)} 30%{opacity:1; transform:translateY(-.18rem)}}

.composer{
  flex:0 0 auto;
  display:flex; align-items:flex-end; gap:var(--s2);
  padding:var(--s2) var(--s3);
  padding-bottom:calc(var(--s2) + var(--safe-b));
  padding-right:calc(var(--s3) + var(--safe-r));
  background:var(--surface); border-top:1px solid var(--line-soft);
}
.composer__inner{
  width:100%; max-width:52rem; margin-inline:auto;
  display:flex; align-items:flex-end; gap:var(--s2);
}
.composer__field{
  flex:1 1 auto; min-width:0;
  background:var(--surface-2); border-radius:var(--r3);
  padding:var(--s2) var(--s3);
  font-size:var(--fs-md); line-height:var(--lh-snug);
  border:1px solid transparent;
  resize:none; max-height:7rem; overflow-y:auto;
  transition:border-color var(--dur-1);
}
.composer__field::placeholder{color:var(--ink-3)}
.composer__field:focus{border-color:var(--azure)}
.send{
  width:var(--hit); height:var(--hit); flex:0 0 auto;
  border-radius:var(--rf);
  background:var(--azure); color:var(--azure-ink);
  display:grid; place-items:center;
  box-shadow:var(--sh-accent);
  transition:transform var(--dur-1) var(--spring);
}
.send:active{transform:scale(.9)}

/* ═══════════════ ЛЕНТА, КАНАЛЫ, СЕРВИСЫ ═══════════════ */

.stories{flex:0 0 auto; display:flex; gap:var(--s3); padding:var(--s3) var(--s4); overflow-x:auto; scrollbar-width:none}
.stories::-webkit-scrollbar{display:none}
.story{display:flex; flex-direction:column; align-items:center; gap:var(--s1); width:3.9rem; flex:0 0 auto}
.story__ring{
  width:3.6rem; height:3.6rem; padding:.14rem; border-radius:var(--rf);
  background:conic-gradient(from 210deg,var(--azure),var(--breast),var(--azure));
  display:grid; place-items:center;
}
.story__ring--seen{background:var(--surface-3)}
.story__ring .av{--av:100%; width:100%; height:100%; border:.14rem solid var(--surface); font-size:var(--fs-md)}
.story__label{font-size:var(--fs-cap); color:var(--ink-2); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* Лента — одна колонка ограниченной ширины: длинная строка через весь
   монитор не читается, а несколько колонок сбивают порядок по времени. */
.posts{
  display:flex; flex-direction:column;
  gap:var(--s4);
  padding:var(--s4) 0;
  width:100%; max-width:40rem; margin-inline:auto;
}
@media (min-width:40rem){ .posts{padding:var(--s4)} }
.post{
  background:var(--surface);
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  padding:var(--s3) var(--s4);
  display:flex; flex-direction:column; gap:var(--s2); min-width:0;
}
@media (min-width:40rem){ .post{border:1px solid var(--line-soft); border-radius:var(--r2)} }
.post__head{display:flex; align-items:center; gap:var(--s2)}
.post__who{display:flex; flex-direction:column; min-width:0; line-height:var(--lh-tight); flex:1 1 auto}
.post__who b{font-size:var(--fs-sm); font-weight:var(--fw-sb); display:flex; align-items:center; gap:var(--s1)}
.post__who span{font-size:var(--fs-xs); color:var(--ink-3)}
.post__text{margin:0; font-size:var(--fs-md); line-height:var(--lh-body); overflow-wrap:anywhere}
.post__media{border-radius:var(--r2); overflow:hidden; aspect-ratio:16/10; display:grid; place-items:end start; padding:var(--s3)}

/* Настоящая картинка записи. Высоту ограничиваем, чтобы одна фотография
   в портретной ориентации не занимала весь экран. */
.post__image{
  display:block; width:100%; max-height:32rem; object-fit:cover;
  border-radius:var(--r2); background:var(--surface-2); cursor:zoom-in;
}
.post__media span{background:rgba(10,12,18,.55); color:#fff; font-size:var(--fs-xs); padding:.15rem var(--s2); border-radius:var(--rf)}

.reactbar{display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap}
.react{
  display:inline-flex; align-items:center; gap:var(--s1);
  padding:.25rem var(--s3); border-radius:var(--rf);
  background:var(--surface-2); color:var(--ink-2);
  font-size:var(--fs-xs); font-weight:var(--fw-sb);
  font-variant-numeric:tabular-nums;
  transition:background var(--dur-1), color var(--dur-1), transform var(--dur-1) var(--spring);
}
.react:active{transform:scale(.92)}
.react--on{background:var(--azure-soft); color:var(--azure)}
.reactbar__gap{flex:1 1 auto}
/* Комментарии — не реакция, поэтому отодвинуты вправо. */
.react--talk{margin-left:auto}

/* ── Комментарии под записью ──────────────────────────────────────── */

.comments{
  display:flex; flex-direction:column; gap:var(--s3);
  margin-top:var(--s3); padding-top:var(--s3);
  border-top:1px solid var(--line);
}
.comments__empty{margin:0; font-size:var(--fs-sm); color:var(--ink-3)}

.comment{
  display:grid; grid-template-columns:var(--av) minmax(0,1fr) auto;
  gap:var(--s2); align-items:start;
}
.comment__body{display:flex; flex-direction:column; gap:.1rem; min-width:0}
.comment__head{display:flex; align-items:baseline; gap:var(--s2); font-size:var(--fs-xs)}
.comment__head b{color:var(--ink-1)}
.comment__head span{color:var(--ink-3)}
.comment__text{
  font-size:var(--fs-sm); line-height:var(--lh-snug);
  color:var(--ink-1); overflow-wrap:anywhere;
}
.comment__del{
  font-size:var(--fs-xs); color:var(--ink-3); padding:0 var(--s1);
  opacity:0; transition:opacity var(--dur-1);
}
.comment:hover .comment__del,
.comment__del:focus-visible{opacity:1}

.comments__form{display:flex; gap:var(--s2); align-items:center}
.comments__form .field{flex:1; min-width:0}
.field--sm{padding:var(--s2) var(--s3); font-size:var(--fs-sm); text-align:left}

.pills{flex:0 0 auto; display:flex; gap:var(--s2); padding:var(--s3) var(--s4) var(--s1); overflow-x:auto; scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
.pill{
  padding:.3rem var(--s3); border-radius:var(--rf);
  background:var(--surface-2); color:var(--ink-2);
  font-size:var(--fs-sm); font-weight:var(--fw-sb);
  white-space:nowrap; flex:0 0 auto;
  transition:background var(--dur-1), color var(--dur-1);
}
.pill--on{background:var(--ink); color:var(--ground)}
.rowgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr))}

.widget{
  margin:var(--s3) var(--s4) 0; padding:var(--s4);
  border-radius:var(--r2);
  background:linear-gradient(120deg,#2B5CE6,#5183FF); color:#fff;
  display:flex; flex-direction:column; gap:var(--s1);
}
.widget__label{font-size:var(--fs-cap); font-weight:var(--fw-b); letter-spacing:var(--ls-caps); text-transform:uppercase; opacity:.82}
.widget__value{font-family:var(--display); font-size:var(--fs-2xl); font-weight:var(--fw-b); letter-spacing:var(--ls-tight); line-height:var(--lh-tight); font-variant-numeric:tabular-nums}
.widget__note{font-size:var(--fs-sm); opacity:.88}

.svcgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(5.5rem,1fr)); gap:var(--s2); padding:var(--s3) var(--s4)}
.svc{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r2);
  padding:var(--s3) var(--s2);
  display:flex; flex-direction:column; align-items:center; gap:var(--s2); text-align:center;
  transition:transform var(--dur-1) var(--spring), box-shadow var(--dur-1);
}
.svc:active{transform:scale(.95)}
@media (hover:hover){ .svc:hover{box-shadow:var(--sh-2)} }
.svc__icon{width:2.75rem; height:2.75rem; border-radius:var(--r2); display:grid; place-items:center; color:#fff}
.svc__title{font-size:var(--fs-xs); font-weight:var(--fw-sb); line-height:var(--lh-tight)}
.svc--soon{border-style:dashed; opacity:.65}
.svc--soon .svc__icon{background:var(--surface-2); color:var(--ink-3)}

.hint{margin:0 var(--s4) var(--s4); font-size:var(--fs-xs); color:var(--ink-3); line-height:var(--lh-snug)}
/* Текст берём из --ink, а не из --breast-ink: последний рассчитан на
   яркую жёлтую заливку и на приглушённом фоне читается только в светлой
   теме. --ink же контрастен к --breast-soft в обеих. */
.demo-note{
  margin:var(--s3) var(--s4) 0; padding:var(--s2) var(--s3);
  border-radius:var(--r1);
  background:var(--breast-soft); color:var(--ink);
  font-size:var(--fs-xs); line-height:var(--lh-snug);
  border:1px solid color-mix(in srgb, var(--breast) 45%, transparent);
  border-left:.2rem solid var(--breast);
  max-width:46rem;
}

/* ═══════════════ ПРОФИЛЬ ═══════════════ */

.profile{
  flex:0 0 auto;
  padding:var(--s5) var(--s4) var(--s4);
  display:flex; flex-direction:column; align-items:center; gap:var(--s2);
  background:radial-gradient(110% 80% at 50% -20%, var(--azure-soft), transparent 70%), var(--surface);
  border-bottom:1px solid var(--line-soft);
}
.profile__name{font-family:var(--display); font-size:var(--fs-xl); font-weight:var(--fw-b); letter-spacing:var(--ls-tight); line-height:var(--lh-tight)}
.profile__handle{font-size:var(--fs-sm); color:var(--azure); font-weight:var(--fw-med)}
.profile__stats{display:flex; gap:var(--s6); margin-top:var(--s1)}
.profile__stats div{display:flex; flex-direction:column; align-items:center; line-height:var(--lh-tight)}
.profile__stats b{font-size:var(--fs-lg); font-weight:var(--fw-b); font-variant-numeric:tabular-nums}
.profile__stats span{font-size:var(--fs-cap); color:var(--ink-3)}

.setgroup{
  margin:var(--s3) var(--s3) 0;
  border-radius:var(--r2); overflow:hidden;
  border:1px solid var(--line-soft); background:var(--surface);
  display:flex; flex-direction:column;
}
.set{
  display:grid; grid-template-columns:1.85rem minmax(0,1fr) auto;
  gap:var(--s3); align-items:center;
  width:100%; text-align:left;
  padding:var(--s2) var(--s3); min-height:var(--hit);
  font-size:var(--fs-md);
  border-bottom:1px solid var(--line-soft);
  transition:background var(--dur-1);
}
.set:last-child{border-bottom:0}
.set:active{background:var(--surface-2)}
@media (hover:hover){ .set:hover{background:var(--surface-2)} }
.set__icon{width:1.85rem; height:1.85rem; border-radius:var(--r1); display:grid; place-items:center; color:#fff}
.set__value{font-size:var(--fs-sm); color:var(--ink-3); white-space:nowrap}
.set__chevron{color:var(--ink-3)}
.set--danger{color:var(--bad)}

/* ═══════════════ ОКНО ═══════════════ */

.sheet{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center;
  background:var(--scrim); padding:var(--s4);
  animation:fade var(--dur-2) var(--ease) both;
}
.sheet__card{
  width:100%; max-width:20rem;
  background:var(--surface); border-radius:var(--r3);
  box-shadow:var(--sh-3); padding:var(--s4);
  display:flex; flex-direction:column; gap:var(--s3);
}
.sheet__title{font-family:var(--display); font-size:var(--fs-lg); font-weight:var(--fw-b); letter-spacing:var(--ls-tight)}
.sheet__hint{margin:0; color:var(--ink-2); font-size:var(--fs-sm); line-height:var(--lh-snug)}
.sheet__text{font-size:var(--fs-sm); color:var(--ink-2); line-height:var(--lh-snug)}
.sheet__row{display:flex; gap:var(--s2); justify-content:flex-end}
.sheet__error{font-size:var(--fs-sm); color:var(--bad); min-height:1.2em}
.sheet__link{
  font-size:var(--fs-sm); color:var(--azure); padding:var(--s2) 0 0;
  align-self:center;
}
.sheet__link:hover{text-decoration:underline}

/* Набранные участники группы. */
.chips{display:flex; flex-wrap:wrap; gap:var(--s2); min-height:.5rem}
.chip{
  display:inline-flex; align-items:center; gap:var(--s1);
  padding:.2rem var(--s2) .2rem var(--s3);
  border-radius:var(--rf);
  background:var(--azure-soft); color:var(--azure);
  font-size:var(--fs-xs); font-weight:var(--fw-sb);
}
.chip__x{color:inherit; font-size:1rem; line-height:1; opacity:.7}
.chip__x:hover{opacity:1}
.sheet .field{text-align:left; font-size:var(--fs-md); padding:var(--s2) var(--s3)}

/* ═══════════════ УВЕДОМЛЕНИЕ ═══════════════ */

.toast{
  position:fixed; left:50%; bottom:calc(var(--nav) + var(--safe-b) + var(--s3));
  transform:translateX(-50%);
  z-index:70; max-width:min(90vw,24rem);
  background:var(--ink); color:var(--ground);
  padding:var(--s2) var(--s4); border-radius:var(--rf);
  font-size:var(--fs-sm); font-weight:var(--fw-med);
  box-shadow:var(--sh-2);
  animation:toast var(--dur-3) var(--ease) both;
}
@media (min-width:52rem){ .toast{bottom:var(--s5)} }
@keyframes toast{from{opacity:0; transform:translate(-50%,1rem)} to{opacity:1; transform:translate(-50%,0)}}

/* ═══════════════ НАВИГАЦИЯ ═══════════════ */

.nav{
  flex:0 0 auto;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  background:var(--surface); border-top:1px solid var(--line);
  padding-bottom:var(--safe-b);
  padding-left:var(--safe-l); padding-right:var(--safe-r);
  position:relative; z-index:3;
}
.tab{
  min-height:var(--nav); padding:var(--s2) var(--s1);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.15rem; position:relative; color:var(--ink-3);
  transition:color var(--dur-1), background var(--dur-1);
}
.tab__label{font-size:var(--fs-cap); font-weight:var(--fw-sb); line-height:1; white-space:nowrap}
.tab[aria-selected="true"]{color:var(--azure)}
.tab[aria-selected="true"]::before{
  content:""; position:absolute; top:0;
  width:1.6rem; height:.18rem;
  border-radius:0 0 var(--r1) var(--r1);
  background:var(--breast);
}
.tab__count{
  position:absolute; top:.35rem; left:calc(50% + .35rem);
  min-width:1.05rem; height:1.05rem; padding:0 .25rem;
  border-radius:var(--rf);
  background:var(--bad); color:#fff;
  font-size:var(--fs-cap); font-weight:var(--fw-b); line-height:1;
  display:grid; place-items:center;
  border:.12rem solid var(--surface);
  font-variant-numeric:tabular-nums;
}
.nav__brand{display:none}

/* Логотип в шапке — замена рельсу на узких экранах. */
.appbar__brand{
  width:1.85rem; height:1.85rem; flex:none;
  margin-right:var(--s1);
}

@media (max-width:20rem){
  .tab__label{display:none}
  .tab{--icon:1.55rem}
}

@media (min-width:52rem){
  .nav{
    grid-template-columns:minmax(0,1fr);
    grid-auto-rows:max-content; align-content:start;
    width:5.5rem; border-top:0; border-right:1px solid var(--line);
    background:var(--surface-2);
    padding:var(--s2) 0 var(--s4);
    padding-top:calc(var(--s2) + var(--safe-t));
    padding-bottom:calc(var(--s4) + var(--safe-b));
    gap:var(--s1); overflow-y:auto;
  }
  .nav__brand{display:grid; place-items:center; padding:var(--s2) 0 var(--s4)}
  .nav__brand img{width:2.1rem; height:2.1rem}
  /* Птица уже есть в рельсе — в шапке она была бы второй подряд. */
  .appbar__brand{display:none}
  .tab{min-height:3.6rem; margin-inline:var(--s2); border-radius:var(--r2); gap:.2rem}
  .tab[aria-selected="true"]{background:var(--surface); box-shadow:var(--sh-1)}
  .tab[aria-selected="true"]::before{
    top:50%; left:calc(var(--s2)*-1 + .1rem);
    transform:translateY(-50%);
    width:.18rem; height:1.4rem;
    border-radius:0 var(--r1) var(--r1) 0;
  }
  .tab__count{left:calc(50% + .55rem); top:.5rem}
}
@media (hover:hover) and (min-width:52rem){
  .tab:hover{background:var(--surface-3)}
  .tab[aria-selected="true"]:hover{background:var(--surface)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ── Новая запись в ленте ── */
.newpost{
  margin:var(--s4) auto 0; padding:var(--s3);
  width:calc(100% - 2 * var(--s4));
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r2); box-shadow:var(--sh-1);
  display:flex; flex-direction:column; gap:var(--s2);
  max-width:40rem;
}
.newpost__field{
  width:100%; background:var(--surface-2); border:1px solid transparent;
  border-radius:var(--r1); padding:var(--s2) var(--s3);
  font-size:var(--fs-md); line-height:var(--lh-snug);
  resize:none; max-height:12rem;
}
.newpost__field:focus{border-color:var(--azure)}
.newpost__row{display:flex; align-items:center; justify-content:space-between; gap:var(--s2)}
.newpost__hint{font-size:var(--fs-xs); color:var(--ink-3); flex:1; min-width:0}

/* Прикреплённая к записи картинка: миниатюра и кнопка «убрать». */
.newpost__attach{display:flex; align-items:center; gap:var(--s3)}
.newpost__thumb{
  width:4rem; height:4rem; object-fit:cover;
  border-radius:var(--r2); background:var(--surface-2);
}
.newpost__drop{font-size:var(--fs-sm); color:var(--ink-3)}
.newpost__drop:hover{color:var(--bad)}

/* Пометка «моя страница» в списке каналов */
.row__tag{
  font-size:var(--fs-cap); font-weight:var(--fw-sb);
  color:var(--azure); background:var(--azure-soft);
  padding:0 .4rem; border-radius:var(--rf); white-space:nowrap;
}