/* ============================================================================
   NITI.Chat — панель оператора. Тёмная материальная версия.

   Материалы взяты с аватарки: тканое полотно, вышивка красной нитью,
   бумажные стаканчики. Полотно — фон под сообщениями, сайдбар и вход.
   Нить красная, физическая, и проходит через диалог насквозь.
   Рабочие поверхности (список, поля, шапки) остаются гладкими — читать
   текст по восемь часов надо на гладком.

   Три раскладки: телефон (<800), планшет-портрет, планшет-альбом/десктоп.
   ==========================================================================*/

/* --- 1. Токены ---------------------------------------------------------- */

:root {
  /* графит, нейтрально-тёплый: синего в интерфейсе нет */
  --void:        #0e0e10;   /* фон приложения */
  --cloth:       #16161a;   /* полотно: сайдбар, вкладки, холст сообщений */
  --panel:       #1b1c20;   /* гладкое: список, шапки, композер */
  --raised:      #23242a;   /* поля, кнопки */
  --raised-2:    #2d2f36;   /* наведение, свои пузыри, выбранная строка */

  --line:        #2c2e34;
  --line-2:      #3d4048;

  --ink:         #ececed;
  --ink-2:       #b0b1b7;
  --ink-3:       #8b8c92;

  /* нить */
  --thread:      #d8222f;   /* тело нити */
  --thread-hi:   #f2505c;   /* блик и наведение */
  --thread-lo:   #6e0d16;   /* тень нити */
  --thread-wash: rgba(216,34,47,.13);
  --thread-text: #ff7a82;   /* красный текст на тёмном */

  --tg:          #3aaee0;
  --tg-text:     #7cc9ea;
  --max:         #9b82ff;
  --max-text:    #b6a4ff;
  --warn:        #e0a33a;

  --rail:        15rem;
  --list:        21rem;
  --r-cup:       0.875rem;
  --r-field:     0.625rem;
  --r-chip:      999px;
  --hit:         2.375rem;

  /* высота экранной клавиатуры, JS ставит на :root (см. DESIGN-NOTES) */
  --kb:          0px;
  --safe-t:      env(safe-area-inset-top, 0px);
  --safe-b:      env(safe-area-inset-bottom, 0px);

  --lift-2: 0 2px 6px rgba(0,0,0,.45), 0 14px 28px -14px rgba(0,0,0,.75);
  --lift-3: 0 30px 70px -18px rgba(0,0,0,.9);

  /* ПОЛОТНО. Основа «вау»: переплетение нитей со своим бликом и тенью,
     поверх — крупная неравномерность, чтобы ткань не читалась как сетка. */
  --weave:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.046) 0 1px,
      rgba(255,255,255,.014) 1px 2px,
      rgba(0,0,0,.30)        2px 3px,
      rgba(0,0,0,.11)        3px 4px),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.036) 0 1px,
      rgba(255,255,255,.011) 1px 2px,
      rgba(0,0,0,.34)        2px 3px,
      rgba(0,0,0,.13)        3px 4px);

  --mottle:
    radial-gradient(26rem 18rem at 18% 22%, rgba(255,255,255,.028), transparent 68%),
    radial-gradient(30rem 22rem at 82% 64%, rgba(0,0,0,.34),        transparent 70%),
    radial-gradient(34rem 24rem at 44% 96%, rgba(255,255,255,.020), transparent 70%);

  --ui: Inter, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;

  color-scheme: dark;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF;
}

/* --- 2. База ------------------------------------------------------------ */

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

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--ui);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--void);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: auto;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.015em; }
h1 { font-size: 1.625rem; }
h2 { font-size: 1.0625rem; }
h3 { font-size: 0.9375rem; }
p  { margin: 0 0 0.75rem; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--thread-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: #ff9aa0; }

::selection { background: var(--thread); color: #fff; }

:focus-visible { outline: 2px solid var(--thread-hi); outline-offset: 2px; border-radius: 4px; }

.hidden { display: none !important; }

/* стежок: короткие отрезки с бликом сверху и тенью снизу */
.seam, .sep {
  height: 3px; border: 0; margin: 0;
  background:
    repeating-linear-gradient(90deg, var(--thread-hi) 0 7px, transparent 7px 13px) top/100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--thread)    0 7px, transparent 7px 13px);
  opacity: .8;
}

* { scrollbar-width: thin; scrollbar-color: #3d4048 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: #35373e; border-radius: 99px;
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: #474a53; background-clip: content-box; }

/* --- 3. Логотип: вышивка ------------------------------------------------ */

/* Три слоя одной и той же формы: тень нити, тело, блик.
   Стежки делает stroke-dasharray, объём — смещение слоёв. */
.mark { display: block; height: auto; }
.mark .st { fill: none; stroke-linecap: round; stroke-dasharray: 7 3.6; }
.mark .st-lo { stroke: var(--thread-lo); stroke-width: 7.4; }
.mark .st-md { stroke: var(--thread);    stroke-width: 6.6; }
.mark .st-hi { stroke: var(--thread-hi); stroke-width: 2.1; opacity: .5; }
.mark .dotname { fill: var(--ink-2); }

/* «.Chat» рядом с вышитым NiTi — вместе читается Niti.Chat */
.wordmark { display: flex; align-items: baseline; gap: 0.25rem; }
.wordmark .mark { flex: none; }
.wordmark .tail {
  font-weight: 600; color: var(--ink-2); letter-spacing: -0.01em;
}

/* --- 4. Экран входа ----------------------------------------------------- */

#app { display: contents; }

.login {
  min-height: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background-color: var(--cloth);
  background-image:
    radial-gradient(70% 50% at 50% 8%, rgba(216,34,47,.10), transparent 70%),
    var(--mottle), var(--weave);
}

.login-card {
  width: min(26rem, 100%);
  background: rgba(22,22,26,.72);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 1.25rem;
  padding: 2rem 2rem 1.75rem;
  box-shadow: var(--lift-3), inset 0 1px 0 rgba(255,255,255,.05);
  text-align: center;
  backdrop-filter: blur(3px);
}

/* стаканчики и нить: композиция с аватарки */
.login-mark { display: block; width: 13rem; height: auto; margin: 0 auto 0.5rem; }
.login-card .wordmark { justify-content: center; margin-bottom: 0.25rem; }
.login-card .wordmark .mark { width: 7.5rem; }
.login-card .wordmark .tail { font-size: 1.375rem; }

.login-card .slogan { margin: 0.5rem 0 1.75rem; color: var(--ink-3); font-size: 0.875rem; }

.login-card label, #login-form label {
  display: block; text-align: left;
  font-size: 0.8125rem; color: var(--ink-2);
  margin-bottom: 0.375rem;
}
.login-card input[type="password"],
#login-form input[name="password"] { width: 100%; text-align: center; letter-spacing: 0.2em; }
.login-card input[type="password"]::placeholder,
#login-form input[name="password"]::placeholder { letter-spacing: normal; }

.login-card button[type="submit"],
#login-form button[type="submit"] { width: 100%; margin-top: 0.875rem; }

.login-foot {
  margin-top: 1.5rem; padding-top: 1rem;
  border-top: 1px dashed rgba(255,255,255,.1);
  font-size: 0.75rem; color: var(--ink-3);
}

.error, #login-error {
  display: none;
  margin-top: 0.875rem;
  padding: 0.625rem 0.75rem;
  background: var(--thread-wash);
  border-left: 3px solid var(--thread);
  color: var(--thread-text);
  font-size: 0.8125rem;
  text-align: left;
}
.error:not(:empty), #login-error:not(:empty) { display: block; }

/* нить натягивается один раз при загрузке */
.login-mark .cord {
  stroke-dasharray: 260; stroke-dashoffset: 260;
  animation: pull 1.2s cubic-bezier(.55,.06,.2,1) forwards;
}
@keyframes pull { to { stroke-dashoffset: 0; } }

/* --- 5. Каркас ---------------------------------------------------------- */

.shell {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "side top" "side work";
  height: 100%;
  max-height: var(--vvh, 100%);
  min-height: 0;
  background: var(--void);
}
.shell > .main, .shell > .content, .shell > .panes { display: contents; }

/* 5.1 сайдбар — полотно */

.sidebar, .rail {
  grid-area: side;
  display: flex; flex-direction: column;
  min-height: 0;
  padding: calc(1.125rem + var(--safe-t)) 0.75rem 1rem;
  color: var(--ink);
  background-color: var(--cloth);
  background-image: var(--mottle), var(--weave);
  border-right: 1px solid #000;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.04);
}

.brand { display: flex; flex-direction: column; gap: 0.25rem; padding: 0 0.5rem 1.25rem; }
.brand .wordmark .mark { width: 4.75rem; }
.brand .wordmark .tail { font-size: 0.9375rem; }
.brand .brand-sub { font-size: 0.6875rem; color: var(--ink-3); line-height: 1.3; }

.sidebar nav { display: flex; flex-direction: column; gap: 2px; }

.sidebar [data-view] {
  position: relative;
  display: flex; align-items: center; gap: 0.625rem;
  width: 100%; min-height: var(--hit);
  padding: 0.5rem 0.75rem;
  border: 0; border-radius: var(--r-field);
  background: transparent;
  color: var(--ink-2);
  font: inherit; font-weight: 600;
  text-align: left; cursor: pointer;
}
.sidebar [data-view]:hover { background: rgba(255,255,255,.05); color: var(--ink); }
.sidebar [data-view].active,
.sidebar [data-view][aria-current="page"] {
  background: rgba(255,255,255,.07);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
/* активная вкладка прошита нитью: тело + блик */
.sidebar [data-view].active::before,
.sidebar [data-view][aria-current="page"]::before {
  content: "";
  position: absolute; left: -0.75rem; top: 0.4375rem; bottom: 0.4375rem; width: 4px;
  border-radius: 0 4px 4px 0;
  background:
    repeating-linear-gradient(180deg, var(--thread-hi) 0 6px, transparent 6px 9px) left/1px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--thread)    0 6px, transparent 6px 9px);
}
.sidebar [data-view] .ico { width: 1.125rem; height: 1.125rem; flex: none; }
.sidebar [data-view] .count { margin-left: auto; font-size: 0.75rem; color: var(--ink-3); }

.sidebar .spacer { flex: 1 1 auto; }

.who {
  display: flex; align-items: center; gap: 0.625rem;
  margin: 0 0.25rem 0.5rem;
  padding: 0.875rem 0.5rem 0;
  border-top: 1px dashed rgba(255,255,255,.14);
  font-size: 0.8125rem; line-height: 1.35;
}
.who .avatar {
  width: 2rem; height: 2rem; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-chip);
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  color: var(--ink); font-weight: 700; font-size: 0.8125rem;
}
.who small { display: block; color: var(--ink-3); font-size: 0.6875rem; }

[data-logout] {
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%; min-height: var(--hit);
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-field);
  background: transparent; color: var(--ink-2);
  font: inherit; font-size: 0.8125rem; cursor: pointer;
}
[data-logout]:hover { border-color: rgba(255,255,255,.26); color: var(--ink); background: rgba(255,255,255,.05); }

/* 5.2 верхняя полоса */

.topbar {
  grid-area: top;
  display: flex; align-items: center; gap: 1rem;
  padding: var(--safe-t) 1.25rem 0;
  height: calc(3.5rem + var(--safe-t));
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.topbar h2 { font-size: 1.0625rem; min-width: 0; flex: 1; }
.kpis { margin-left: auto; display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; color: var(--ink-3); }
.kpis b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* 5.3 рабочая зона */

.workspace {
  grid-area: work;
  display: grid;
  grid-template-columns: var(--list) minmax(0, 1fr);
  min-height: 0;
}
.shell.tools-open .workspace,
.shell[data-view="tools"] .workspace { grid-template-columns: minmax(0, 1fr); }
.shell.tools-open .chat-list,
.shell[data-view="tools"] .chat-list { display: none; }

/* --- 6. Список слева ---------------------------------------------------- */

.chat-list {
  display: flex; flex-direction: column;
  min-height: 0;
  background: var(--panel);
  border-right: 1px solid var(--line);
}

.chat-list .search, input.search {
  margin: 0.75rem;
  width: calc(100% - 1.5rem);
  background: var(--void);
}

.add-contact {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.5rem;
  padding: 0 0.75rem 0.75rem;
}
.add-contact input { min-width: 0; }
.add-contact button { white-space: nowrap; }

.rows { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 0 0.5rem 0.75rem; }

.rows > * {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.125rem 0.625rem;
  padding: 0.625rem;
  border-radius: var(--r-field);
  cursor: pointer;
}
.rows > *:hover { background: var(--raised); }
.rows > .active, .rows > .selected, .rows > [aria-selected="true"] {
  background: var(--raised-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
/* выбранная строка тоже прошита */
.rows > .active::before, .rows > .selected::before, .rows > [aria-selected="true"]::before {
  content: ""; position: absolute; left: 0; top: 0.4375rem; bottom: 0.4375rem; width: 4px;
  border-radius: 4px;
  background:
    repeating-linear-gradient(180deg, var(--thread-hi) 0 6px, transparent 6px 9px) left/1px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--thread)    0 6px, transparent 6px 9px);
}

.rows .avatar {
  grid-row: span 2;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border-radius: var(--r-chip);
  background: var(--raised); color: var(--ink-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  font-weight: 700; font-size: 0.8125rem;
}
.rows > .active .avatar { background: #383a43; color: var(--ink); }
.rows .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rows .preview {
  grid-column: 2; font-size: 0.8125rem; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rows .row-actions {
  grid-row: span 2; grid-column: 3;
  display: flex; align-items: center; gap: 0.125rem;
  opacity: 0;
}
.rows > *:hover .row-actions, .rows > *:focus-within .row-actions { opacity: 1; }
@media (hover: none), (pointer: coarse) { .rows .row-actions { opacity: 1; } }

.empty {
  margin: auto; padding: 2rem 1.5rem;
  text-align: center; color: var(--ink-3); font-size: 0.875rem;
  max-width: 24rem;
}
.empty .login-mark { width: 9rem; margin-bottom: 1rem; opacity: .9; }
.empty b { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 0.375rem; }

.offline {
  margin: auto; padding: 1.25rem 1.5rem;
  max-width: 24rem; text-align: center;
  border: 1px solid rgba(216,34,47,.4); border-radius: var(--r-cup);
  background: rgba(22,22,26,.86);
  color: var(--ink-2); font-size: 0.875rem;
  box-shadow: var(--lift-2);
}
.offline b { display: block; color: var(--thread-text); font-size: 0.9375rem; margin-bottom: 0.25rem; }

/* --- 7. Бейджи и состояние нити ----------------------------------------- */

.badge, .tag, .chip {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.0625rem 0.4375rem;
  border-radius: var(--r-chip);
  font-size: 0.6875rem; font-weight: 700; line-height: 1.5;
  background: var(--raised); color: var(--ink-2);
  white-space: nowrap;
}
.badge.tg,  .tag.tg,  .chip.tg  { background: rgba(58,174,224,.18);  color: var(--tg-text); }
.badge.max, .tag.max, .chip.max { background: rgba(155,130,255,.18); color: var(--max-text); }
.badge.off { background: var(--raised); color: var(--ink-3); }
.badge.ok  { background: rgba(63,191,143,.16); color: #6fd6b1; }
.badge.warn, .badge.fav { background: rgba(224,163,58,.16); color: #edc077; }
.badge.unread {
  background: #ff2d3a;
  color: #fff;
  min-width: 1.35rem;
  justify-content: center;
  font-weight: 800;
  box-shadow: 0 0 0 2px rgba(255,45,58,.45), 0 0 14px rgba(255,45,58,.55);
}

/* натянутая нить против ослабшей */
.link-state { display: inline-flex; align-items: center; gap: 0.4375rem; font-size: 0.8125rem; }
.link-state::before {
  content: ""; width: 2rem; height: 3px; border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, var(--thread-hi) 0 6px, transparent 6px 9px) top/100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--thread)    0 6px, transparent 6px 9px);
}
.link-state.loose::before {
  background: repeating-linear-gradient(90deg, var(--ink-3) 0 3px, transparent 3px 6px);
  height: 2px;
}

/* --- 8. Тред: холст и патчи --------------------------------------------- */

.thread {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  background: var(--void);
}

.thread-head, .thread > header {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.thread-head .title { font-weight: 700; }
.thread-head .sub { font-size: 0.75rem; color: var(--ink-3); }
.thread-head .sub.activity { margin-top: 0.2rem; letter-spacing: 0; line-height: 1.35; }
.thread-head .spacer { flex: 1 1 auto; }

[data-back] {
  display: none;
  align-items: center; gap: 0.25rem;
  min-height: var(--hit);
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--line); border-radius: var(--r-field);
  background: var(--raised); color: var(--ink-2);
  font: inherit; font-size: 0.8125rem; cursor: pointer;
}

/* 8.1 холст под сообщениями — то самое полотно с аватарки */

.msgs {
  position: relative;
  flex: 1 1 auto; overflow-y: auto; min-height: 0;
  padding: 1.5rem clamp(0.75rem, 4vw, 2.5rem) 1.75rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  background-color: var(--cloth);
  background-image: var(--mottle), var(--weave);
  box-shadow: inset 0 12px 22px -18px #000, inset 0 -12px 22px -18px #000;
}

/* нить идёт сверху вниз через весь разговор, петляя между сторонами.
   Плитка стыкуется сама: касательные на входе и выходе совпадают. */
.msgs::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='240' viewBox='0 0 120 240'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M60 0C86 40 86 80 60 120C34 160 34 200 60 240' stroke='%23d8222f' stroke-width='4' stroke-opacity='.30'/%3E%3Cpath d='M60 0C86 40 86 80 60 120C34 160 34 200 60 240' stroke='%23f2505c' stroke-width='1.3' stroke-opacity='.30' stroke-dasharray='7 5'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 120px 240px;
}

.msgs > * { position: relative; z-index: 1; }

.msgs .day {
  align-self: center; margin: 0.875rem 0 0.375rem;
  padding: 0.1875rem 0.75rem; border-radius: var(--r-chip);
  background: rgba(14,14,16,.8); color: var(--ink-2); font-size: 0.75rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

/* пузырь — нашивка на полотне: приподнят, со своей тенью и верхним бликом */
.bubble {
  position: relative;
  max-width: min(70%, 33rem);
  padding: 0.5625rem 0.8125rem 0.4375rem;
  border-radius: var(--r-cup);
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}
.bubble.fresh { animation: settle .2s cubic-bezier(.2,.7,.3,1); }
@keyframes settle { from { opacity: 0; transform: translateY(5px); } }

.bubble.in {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  background: #202128;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 2px 5px rgba(0,0,0,.5),
    0 14px 26px -16px rgba(0,0,0,.8);
}
.bubble.out {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: #33353e;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 2px 5px rgba(0,0,0,.5),
    0 14px 26px -16px rgba(0,0,0,.8);
}
.bubble .ch {
  display: flex; align-items: center; gap: 0.3125rem;
  margin-top: 0.25rem;
  font-size: 0.6875rem; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.bubble.out .ch { justify-content: flex-end; color: var(--ink-2); }
.bubble.failed { outline: 1px dashed rgba(216,34,47,.55); }
.thread-menu { display: none; }
.bubble .ch::before {
  content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%;
  background: var(--ink-3); flex: none;
}
.bubble .ch.tg::before  { background: var(--tg);  box-shadow: 0 0 6px rgba(58,174,224,.6); }
.bubble .ch.max::before { background: var(--max); box-shadow: 0 0 6px rgba(155,130,255,.6); }
.bubble .sender { font-size: 0.75rem; font-weight: 700; color: var(--ink-2); margin-bottom: 0.125rem; }

.bubble .att {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0.25rem 0; padding: 0.4375rem 0.5rem;
  border-radius: var(--r-field);
  background: rgba(0,0,0,.3);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  font-size: 0.8125rem;
}
.bubble .att .ico { flex: none; color: var(--ink-3); }
.bubble img.att-img,
.bubble video.att-video {
  display: block; max-width: min(100%, 22rem); max-height: 18rem;
  border-radius: var(--r-field); margin: 0 0 0.375rem;
  object-fit: contain; background: rgba(0,0,0,.25);
}
.bubble audio.att-audio { display: block; width: min(100%, 18rem); margin: 0 0 0.375rem; }
.bubble .att-dl { margin-left: auto; font-weight: 650; color: var(--accent, #7eb6ff); text-decoration: none; }
.bubble .att-dl:hover { text-decoration: underline; }

/* 8.2 композер */

.composer {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.5rem;
  padding: 0.75rem clamp(0.75rem, 4vw, 2.5rem);
  padding-bottom: calc(1rem + var(--kb));
  background: var(--panel);
  border-top: 1px solid var(--line);
  box-shadow: 0 -14px 26px -20px #000;
  flex: none;
  min-width: 0;
}
.composer select[name="channel"] { width: auto; min-width: 7.25rem; }
.composer textarea[name="text"] {
  min-height: var(--hit); max-height: 10rem; resize: none;
  padding-top: 0.5rem; padding-bottom: 0.5rem;
  min-width: 0;
}
.composer .attach {
  position: relative;
  display: grid; place-items: center;
  width: var(--hit); height: var(--hit);
  border: 1px solid var(--line); border-radius: var(--r-field);
  background: var(--raised); color: var(--ink-2);
  cursor: pointer;
}
.composer .attach:hover { border-color: var(--line-2); color: var(--ink); }
.composer input[name="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
  width: 100%; height: 100%; padding: 0; border: 0; min-height: 0;
}
.composer button[type="submit"] { height: var(--hit); }

.file-name {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 0.375rem;
  font-size: 0.75rem; color: var(--ink-2);
  min-width: 0;
}
.file-name:empty { display: none; }
.file-name span, .file-name .f {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.1875rem 0.5rem; border-radius: var(--r-chip);
  background: var(--raised); color: var(--ink-2);
}

/* --- 9. Формы и кнопки -------------------------------------------------- */

input, select, textarea {
  width: 100%;
  min-height: var(--hit);
  padding: 0.5rem 0.75rem;
  font: inherit; color: var(--ink);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
  transition: border-color .12s, box-shadow .12s;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:hover, select:hover, textarea:hover { border-color: var(--line-2); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--thread);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35), 0 0 0 3px rgba(216,34,47,.22);
}
input[type="checkbox"], input[type="radio"] {
  width: 1.125rem; height: 1.125rem; min-height: 0;
  accent-color: var(--thread); padding: 0; vertical-align: -3px; box-shadow: none;
}
textarea { min-height: 5rem; resize: vertical; line-height: 1.5; }
input[type="datetime-local"], input[type="date"], input[type="time"] { color-scheme: dark; }

select {
  appearance: none; padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23b0b1b7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.6875rem center; background-size: 0.75rem;
}
select option { background: var(--panel); color: var(--ink); }

button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4375rem;
  min-height: var(--hit);
  padding: 0.5rem 0.9375rem;
  border: 1px solid var(--line); border-radius: var(--r-field);
  background: var(--raised); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  font: inherit; font-weight: 600; cursor: pointer;
  transition: background .12s, border-color .12s, transform .06s;
}
button:hover, .btn:hover { background: var(--raised-2); border-color: var(--line-2); }
button:active, .btn:active { transform: translateY(1px); }
button:disabled, .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

button[type="submit"], .btn.primary, .primary {
  background: var(--thread); border-color: #b51b26; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 8px rgba(216,34,47,.3);
}
button[type="submit"]:hover, .btn.primary:hover, .primary:hover {
  background: var(--thread-hi); border-color: var(--thread-hi);
}

.btn.ghost, .ghost { background: transparent; border-color: transparent; color: var(--ink-2); box-shadow: none; }
.btn.ghost:hover, .ghost:hover { background: var(--raised); color: var(--ink); border-color: transparent; }

.btn.danger, .danger {
  background: transparent; border-color: rgba(216,34,47,.45); color: var(--thread-text); box-shadow: none;
}
.btn.danger:hover, .danger:hover { background: var(--thread-wash); border-color: var(--thread); }

.btn.sm, button.sm { min-height: 2rem; padding: 0.25rem 0.625rem; font-size: 0.8125rem; }

.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* Роли кнопок по data-атрибутам: панель выглядит правильно и на текущей
   разметке app.js, без добавления классов. */
[data-write], [data-mass], [data-bcast], [data-sendnow] {
  background: var(--thread); border-color: #b51b26; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 8px rgba(216,34,47,.3);
}
[data-write]:hover, [data-mass]:hover, [data-bcast]:hover, [data-sendnow]:hover {
  background: var(--thread-hi); border-color: var(--thread-hi);
}
[data-link], [data-mon-start], [data-sched-add], [data-ch-add],
[data-self-tg], [data-self-max], [data-write-tg], [data-write-max], [data-topic] {
  background: var(--raised-2); border-color: var(--line-2); color: var(--ink);
}
[data-link]:hover, [data-mon-start]:hover, [data-sched-add]:hover, [data-ch-add]:hover,
[data-self-tg]:hover, [data-self-max]:hover, [data-write-tg]:hover,
[data-write-max]:hover, [data-topic]:hover { background: #383a43; border-color: #4d505a; }

[data-purge], [data-unlink], [data-unmonitor], [data-unsub],
[data-delsched], [data-rev-ch], [data-rev-prem] {
  background: transparent; border-color: rgba(216,34,47,.45);
  color: var(--thread-text); box-shadow: none;
}
[data-purge]:hover, [data-unlink]:hover, [data-unmonitor]:hover, [data-unsub]:hover,
[data-delsched]:hover, [data-rev-ch]:hover, [data-rev-prem]:hover {
  background: var(--thread-wash); border-color: var(--thread);
}

.rows [data-card], .rows [data-fav], .rows [data-ren], .rows [data-del],
.rows .row-actions button {
  width: 2rem; height: 2rem; min-height: 0; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-field);
  background: transparent; color: var(--ink-3);
  box-shadow: none; font-size: 0.875rem;
}
.rows .row-actions button:hover { background: var(--void); color: var(--ink); }
.rows [data-del]:hover { background: var(--thread-wash); color: var(--thread-text); }
.rows [data-fav].on, .rows [data-fav][aria-pressed="true"] { color: #edc077; }

/* --- 10. Карточка контакта ---------------------------------------------- */

.card {
  margin: 1.25rem auto;
  width: min(38rem, calc(100% - 2.5rem));
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-cup);
  box-shadow: var(--lift-2), inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
}
.card-head {
  display: flex; align-items: center; gap: 0.875rem; padding: 1.25rem;
  background-color: var(--cloth);
  background-image: var(--weave);
  border-bottom: 1px solid var(--line);
}
.card-head .avatar {
  width: 3rem; height: 3rem; flex: none;
  display: grid; place-items: center; border-radius: var(--r-chip);
  background: var(--raised-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 6px rgba(0,0,0,.5);
  color: var(--ink); font-weight: 700; font-size: 1.0625rem;
}
.card-head h2 { line-height: 1.2; }
.card-head .id { font-size: 0.75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.card-body { padding: 1.125rem 1.25rem 1.25rem; display: grid; gap: 0.875rem; }

.facts { display: grid; gap: 0; }
.facts > div {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.625rem 0;
  border-top: 1px dashed var(--line);
  font-size: 0.875rem;
}
.facts > div:first-child { border-top: 0; }
.facts dt, .facts .k { width: 9rem; flex: none; color: var(--ink-3); }
.facts dd, .facts .v { margin: 0; }

.hint {
  padding: 0.75rem 0.875rem;
  background: var(--raised);
  border-left: 3px solid var(--line-2);
  font-size: 0.8125rem; color: var(--ink-2);
}
.hint.warn { border-left-color: var(--warn); }

/* --- 11. Бот ------------------------------------------------------------ */

.tools { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 0 clamp(1rem, 4vw, 2.5rem) 4rem; }
.tools-inner { width: min(58rem, 100%); margin: 0 auto; }

.tool, .tools section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr);
  gap: 0.75rem 2.5rem;
  padding: 1.75rem 0;
}
/* разделы отбиты строчкой стежков */
.tool + .tool::before, .tools section + section::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background:
    repeating-linear-gradient(90deg, var(--thread-hi) 0 7px, transparent 7px 14px) top/100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--thread)    0 7px, transparent 7px 14px);
  opacity: .5;
}
.tool > h3, .tools section > h3 { grid-column: 1; align-self: start; }
.tool > .tool-note { grid-column: 1; font-size: 0.8125rem; color: var(--ink-3); margin: 0; }
.tool > :not(h3):not(.tool-note), .tools section > :not(h3) { grid-column: 2; }

.list-block { display: grid; gap: 0.375rem; }
.list-block .item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-field);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  font-size: 0.875rem;
}
.list-block .item .grow { flex: 1 1 auto; min-width: 0; }
.list-block .item .meta { font-size: 0.75rem; color: var(--ink-3); }

.form-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.form-row > input, .form-row > select { width: auto; flex: 1 1 9rem; min-width: 0; }
.form-row > textarea { flex: 1 1 100%; }

.code-out, .link-out code, .link-out b, .link-out strong {
  display: inline-flex; align-items: center; gap: 0.625rem;
  padding: 0.5rem 0.875rem;
  border: 2px dashed var(--thread);
  border-radius: var(--r-field);
  background: var(--thread-wash);
  font-family: inherit; font-size: 1.25rem; font-weight: 700;
  letter-spacing: 0.22em; color: var(--thread-text);
  font-variant-numeric: tabular-nums;
}
.link-out { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 1rem; font-size: 0.875rem; }
.link-out:empty { display: none; }

.mass-list {
  display: grid; gap: 0.125rem;
  max-height: 15rem; overflow-y: auto;
  padding: 0.5rem;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-field);
}
.mass-list label {
  display: flex; align-items: center; gap: 0.5rem;
  min-height: var(--hit);
  padding: 0.25rem 0.5rem; border-radius: 6px;
  font-size: 0.875rem; cursor: pointer;
}
.mass-list label:hover { background: var(--raised); }

.mass-text, .bcast-text { width: 100%; min-height: 5.5rem; }
.pay-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.zone-danger {
  padding: 1rem 1.125rem; border-radius: var(--r-cup);
  background: var(--thread-wash);
  border: 1px solid rgba(216,34,47,.35);
}
.zone-danger h4 { margin: 0 0 0.375rem; color: var(--thread-text); font-size: 0.875rem; }
.zone-danger p { font-size: 0.8125rem; color: var(--ink-2); }

.tools details {
  border: 1px solid var(--line); border-radius: var(--r-field);
  background: var(--panel);
  margin-bottom: 0.375rem; overflow: hidden;
}
.tools details summary {
  padding: 0.6875rem 0.875rem; font-weight: 600; cursor: pointer; list-style: none;
}
.tools details summary::-webkit-details-marker { display: none; }
.tools details summary::after { content: "+"; float: right; color: var(--ink-3); }
.tools details[open] summary::after { content: "−"; }
.faq-list { display: flex; flex-direction: column; gap: 0.375rem; }

/* --- 12. Модалки и уведомления ------------------------------------------ */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; padding: 1.25rem;
  background: rgba(0,0,0,.7);
  animation: fade .12s ease-out;
}
@keyframes fade { from { opacity: 0; } }

.modal {
  width: min(27rem, 100%);
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 1rem;
  box-shadow: var(--lift-3), inset 0 1px 0 rgba(255,255,255,.06);
  padding: 1.375rem 1.375rem 1.125rem;
  animation: rise .18s cubic-bezier(.2,.7,.3,1);
}
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.98); } }

.modal h3 { font-size: 1.0625rem; margin-bottom: 0.375rem; }
.modal p { font-size: 0.875rem; color: var(--ink-2); }
.modal input, .modal textarea { margin-top: 0.5rem; }
.modal .modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.125rem; }
/* у опасной модалки шапка прошита красным */
.modal.danger { padding-top: 1.5rem; }
.modal.danger::before {
  content: ""; display: block; height: 3px; margin: -1.5rem -1.375rem 1.125rem;
  background:
    repeating-linear-gradient(90deg, var(--thread-hi) 0 7px, transparent 7px 14px) top/100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--thread)    0 7px, transparent 7px 14px);
}
.modal.danger h3 { color: var(--thread-text); }

.toast {
  position: fixed; left: 50%; bottom: calc(1.5rem + var(--kb)); transform: translateX(-50%);
  z-index: 60;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.625rem 1rem; border-radius: var(--r-chip);
  background: var(--raised-2); border: 1px solid var(--line-2);
  color: var(--ink); font-size: 0.875rem;
  box-shadow: var(--lift-2);
}
.toast.err { background: var(--thread); border-color: var(--thread); color: #fff; }

/* --- 13. Нижние вкладки (только телефон) -------------------------------- */

.tabbar {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  padding: 0.25rem 0.25rem calc(0.25rem + env(safe-area-inset-bottom));
  background-color: var(--cloth);
  background-image: var(--weave);
  border-top: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.tabbar button {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 2.75rem;
  padding: 0.5rem 0.25rem 0.4375rem;
  border: 0; border-radius: var(--r-field);
  background: transparent; color: var(--ink-3);
  box-shadow: none;
  font: inherit; font-size: 0.6875rem; font-weight: 600;
}
.tabbar button .ico { width: 1.25rem; height: 1.25rem; }
.tabbar button.active { color: var(--ink); }
.tabbar button.active::before {
  content: ""; position: absolute; top: 0; left: 1.25rem; right: 1.25rem; height: 3px;
  border-radius: 0 0 3px 3px;
  background:
    repeating-linear-gradient(90deg, var(--thread-hi) 0 6px, transparent 6px 9px) top/100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--thread)    0 6px, transparent 6px 9px);
}

/* ========================================================================
   14. Раскладки: телефон < 800, планшет-портрет, планшет-альбом/десктоп
   ======================================================================*/

@media (max-width: 799px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "top" "work" "tabs";
  }
  .sidebar, .rail { display: none; }
  .tabbar { display: grid; grid-area: tabs; }

  .workspace { grid-template-columns: minmax(0, 1fr); }
  .shell .thread { display: none; }
  .shell.chat-open .chat-list, .shell.tools-open .chat-list { display: none; }
  .shell.chat-open .thread, .shell.tools-open .thread { display: flex; }

  [data-back] { display: inline-flex; }
  .thread-menu { display: inline-flex; min-width: auto; padding: 0.4rem 0.75rem; }

  .topbar { padding: var(--safe-t) 1rem 0; height: calc(3.25rem + var(--safe-t)); }
  .kpis { font-size: 0.75rem; }

  .bubble { max-width: 86%; }
  .msgs::before { background-size: 90px 240px; opacity: .7; }

  .composer {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 0.625rem 0.75rem;
    padding-bottom: calc(0.625rem + env(safe-area-inset-bottom) + var(--kb));
  }
  .composer select[name="channel"] { grid-column: 1 / -1; width: 100%; }
  .composer textarea[name="text"] { min-height: 2.75rem; max-height: 7.5rem; }

  .card { margin: 0.75rem auto; width: calc(100% - 1.5rem); }

  .tool, .tools section { grid-template-columns: minmax(0, 1fr); gap: 0.625rem; padding: 1.25rem 0; }
  .tool > :not(h3):not(.tool-note), .tools section > :not(h3) { grid-column: 1; }

  .add-contact { grid-template-columns: 1fr 1fr; }
  .add-contact button { grid-column: 1 / -1; }

  .facts dt, .facts .k { width: 6.5rem; }
  .login-mark { width: 11rem; }
}

@media (max-height: 640px) {
  .composer { padding-top: 0.5rem; padding-bottom: calc(0.5rem + env(safe-area-inset-bottom) + var(--kb)); }
  .composer textarea[name="text"] { min-height: 2.5rem; max-height: 4.5rem; }
}

/* планшет-портрет: список и тред рядом, вкладок снизу нет */
@media (min-width: 800px) and (orientation: portrait) {
  :root { --rail: 9.5rem; --list: 15.5rem; }
  .tabbar { display: none; }
  [data-back] { display: none; }
  .brand .brand-sub { display: none; }
  .brand .wordmark .mark { width: 4rem; }
  .brand .wordmark .tail { font-size: 0.8125rem; }
  .sidebar [data-view] { padding: 0.625rem; }
  .bubble { max-width: 84%; }
  .msgs { padding-left: 1rem; padding-right: 1rem; }
  .msgs::before { background-size: 100px 240px; }
  .composer { padding-left: 1rem; padding-right: 1rem; }
  .tool, .tools section { grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr); gap: 0.75rem 1.5rem; }
}

/* альбом и широкий десктоп: инструменты в два столбца */
@media (min-width: 1250px) and (orientation: landscape) {
  .tools-inner { width: 100%; max-width: 82rem; columns: 2; column-gap: 3rem; }
  .tool, .tools section {
    break-inside: avoid; -webkit-column-break-inside: avoid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.625rem; padding: 1.25rem 0;
  }
  .tool > :not(h3):not(.tool-note), .tools section > :not(h3) { grid-column: 1; }
}

@media (min-width: 800px) and (max-width: 1120px) and (orientation: landscape) {
  :root { --rail: 13rem; --list: 18rem; }
  .tool, .tools section { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 0.75rem 1.5rem; }
}

/* палец и стилус: хитбоксы 44px независимо от ширины */
@media (pointer: coarse) {
  :root { --hit: 2.75rem; }
  .rows > * { padding: 0.75rem 0.625rem; }
  .rows .row-actions button { width: 2.75rem; height: 2.75rem; }
  .btn.sm, button.sm { min-height: 2.25rem; }
  .tabbar button { min-height: 3rem; }
  .composer input[name="file"] { min-height: 0; }
}

/* --- 15. Доступность и печать ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .login-mark .cord { stroke-dashoffset: 0; }
}

@media print { .sidebar, .tabbar, .composer, .row-actions { display: none !important; } }

html.android-app {
  --safe-t: max(env(safe-area-inset-top, 0px), 36px);
  --ui: Roboto, "Noto Sans", "Droid Sans", Arial, sans-serif;
}
html.android-app body {
  font-family: Roboto, "Noto Sans", "Droid Sans", Arial, sans-serif;
}
html.niti-native-chrome {
  --safe-t: 0px;
}

.login-card .lead { margin: 0.5rem 0 1.75rem; color: var(--ink-3); font-size: 0.875rem; }
.login-card form { margin: 0; }

.sidebar .grow { flex: 1 1 auto; }
.sidebar .brand-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
}
.sidebar .brand-row .brand { padding: 0 0.5rem 0.15rem; }
.who { white-space: pre-line; }

.sidebar .nav-btn { width: 100%; }

.rows > .row {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 0.5rem;
}
.rows > .row .open {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0.125rem 0.25rem;
  color: inherit;
  text-align: left;
  min-height: 0;
}
.rows > .row .open:hover,
.rows > .row .open:active { background: transparent; transform: none; }
.rows > .add-contact {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  cursor: default;
}
.rows > .empty {
  display: block;
  grid-template-columns: none;
  cursor: default;
  text-align: center;
  color: var(--ink-3);
  padding: 1.5rem 0.75rem;
}
.row-actions button {
  min-height: var(--hit);
  font-size: 0.75rem;
}