/* Новая главная /new/. Вид — по утверждённому макету wiki/sprints/11-mock/index.html.
   Стили шторки и разделов приходят из боевого шаблона (build-new.py), здесь только своё
   и переопределения поверх. Выравнивание — логическими свойствами: иврит зеркалится сам. */
:root {
  --k: 1;
  --cmp-w: 951px;
  --chip-h: calc(43px * var(--k)); --chip-r: calc(11px * var(--k)); --chip-bg: #2D2D2D; --chip-fg: #C6C7BE;
  --chip-fs: calc(24px * var(--k)); --chip-pad: calc(16px * var(--k)); --chip-gap: calc(12px * var(--k));
  --in-h: calc(72px * var(--k)); --in-r: calc(20px * var(--k)); --in-line: #4D4D4C; --in-bg: #20201F;
  --in-fs: calc(22px * var(--k)); --in-fg: #F0EFEC; --in-ph: #8E8F8C;
  --ico: calc(24px * var(--k)); --gap: calc(20px * var(--k));
  --soc-fg: #C2C1B7; --pick-fg: #EFEEEB; --hover: #2E2E2D; --pop-bg: #1d1d1c; --pop-line: #3a3a39;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
@media (max-width: 1023px) { :root { --k: .8; --cmp-w: calc(100vw - 48px); } }
@media (max-width: 699px) { :root { --k: .75; --cmp-w: calc(100vw - 32px); } }

body {
  background: #000; color: var(--in-fg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(16px, 4dvh, 40px); padding-inline: 16px; min-height: 100dvh;
}

/* ── Логотип и свечение ── */
.logo-glow {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 42% 36% at 50% 34%, rgba(249,137,19,.16) 0%, rgba(211,37,3,.07) 45%, transparent 72%);
  animation: glow 8s ease-in-out infinite; transition: opacity .8s;
}
@keyframes glow { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
.logo { position: relative; z-index: 1; display: block; height: min(46dvh, 40vw); width: auto; filter: none; animation: none; }
@media (max-width: 699px) {
  .logo { height: auto; width: 78vw; }
  .logo-glow { background: radial-gradient(ellipse 70% 30% at 50% 36%, rgba(249,137,19,.18) 0%, rgba(211,37,3,.07) 45%, transparent 72%); }
}

/* ── Композер ── */
.composer, .feed { position: relative; z-index: 1; transition: opacity .3s, visibility .3s; }
.composer { width: 100%; max-width: var(--cmp-w); }

.composer .socials { display: flex; gap: calc(22px * var(--k)); align-items: center; justify-content: center; margin-block-end: calc(26px * var(--k)); }

/* Шторка пришла из боевого шаблона без стилей подвала: иконки там залиты цветом текста */
.sheet a { text-decoration: none; }
.sheet .socials { display: flex; flex-wrap: wrap; gap: 6px; }
.sheet .socials a { display: grid; place-items: center; width: var(--tap); height: var(--tap); }
.sheet .socials svg { width: 22px; height: 22px; fill: currentColor; }
.composer .socials a { color: var(--soc-fg); display: grid; place-items: center; width: calc(44px * var(--k)); height: calc(44px * var(--k)); transition: color .25s, filter .25s, transform .25s; }
.composer .socials svg { width: calc(30px * var(--k)); height: calc(30px * var(--k)); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.composer .socials a:hover, .composer .socials a:focus-visible { color: #F98913; filter: drop-shadow(0 0 8px rgba(249,137,19,.55)); transform: translateY(-2px); outline: none; }
@media (max-width: 699px) { .composer .socials { gap: 8px; } }

.field {
  position: relative; min-height: var(--in-h); border-radius: var(--in-r);
  border: 1.5px solid var(--in-line); background: var(--in-bg);
  display: flex; align-items: center; gap: calc(4px * var(--k)); padding-inline: calc(10px * var(--k)) calc(12px * var(--k));
}
.field textarea {
  flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: transparent; color: var(--in-fg); caret-color: var(--in-fg);
  font: inherit; font-size: var(--in-fs); line-height: 1.35; padding-block: calc(20px * var(--k)); padding-inline: calc(8px * var(--k));
  max-height: calc(var(--in-fs) * 1.35 * 6 + 40px);
}
.field textarea::placeholder { color: var(--in-ph); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ibtn, .lang-btn, .pick { border: 0; background: none; cursor: pointer; font: inherit; border-radius: calc(10px * var(--k)); transition: background-color .15s, color .15s; }
.ibtn { color: var(--in-fg); width: calc(42px * var(--k)); height: calc(42px * var(--k)); display: grid; place-items: center; flex-shrink: 0; }
.ibtn svg, .pick svg, .chip svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.ibtn svg { width: var(--ico); height: var(--ico); stroke-width: 1.8; }
.ibtn:disabled { opacity: .45; cursor: default; }
.lang-btn { width: auto; height: calc(42px * var(--k)); padding-inline: calc(10px * var(--k)); display: inline-flex; align-items: center; gap: 6px;
  color: var(--in-ph); font-size: calc(15px * var(--k)); letter-spacing: .04em; text-transform: uppercase; }
.ibtn:hover, .lang-btn:hover, .pick:hover, .ibtn:focus-visible, .lang-btn:focus-visible, .pick:focus-visible,
.lang-btn[aria-expanded="true"], .pick[aria-expanded="true"] { background: var(--hover); color: var(--in-fg); outline: none; }
.ibtn[aria-pressed="true"] { color: #F98913; background: rgba(249,137,19,.14); }

.ai-mark {
  position: absolute; inset-block-end: calc(100% - 4px * var(--k)); inset-inline-end: calc(-14px * var(--k));
  height: calc(52px * var(--k)); width: auto; pointer-events: none;
  transform: rotate(14deg); transform-origin: 20% 100%; filter: drop-shadow(0 0 6px rgba(249,110,20,.35));
}
[dir="rtl"] .ai-mark { transform: rotate(-14deg); transform-origin: 80% 100%; }
@media (max-width: 1023px) { .ai-mark { inset-inline-end: -4px; } }

/* ── Плашки: язык и выбор ассистента ── */
.lang-menu, .pick-menu {
  position: absolute; z-index: 3; background: var(--pop-bg); border: 1px solid var(--pop-line); border-radius: 14px; padding: 6px;
  display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0,0,0,.6); animation: pop .22s var(--ease);
}
.lang-menu { inset-block-end: calc(100% + 8px); inset-inline-start: 8px; min-width: 160px; }
.pick-menu { inset-block-end: calc(100% + 10px); inset-inline-end: 0; min-width: 260px; max-height: 70dvh; overflow-y: auto; }
.lang-menu button, .pick-menu button {
  background: none; border: 0; color: var(--in-fg); font: inherit; font-size: 17px; text-align: start; border-radius: 10px;
  cursor: pointer; position: relative; white-space: nowrap; padding-block: 10px; padding-inline: 14px;
}
.pick-menu button { padding-inline-start: 36px; }
.lang-menu button:hover, .pick-menu button:hover, .lang-menu button:focus-visible, .pick-menu button:focus-visible { background: var(--chip-bg); outline: none; }
.pick-menu button[aria-checked="true"]::before { content: '✓'; position: absolute; inset-inline-start: 14px; color: #F98913; }
.pick-menu hr { border: 0; border-block-start: 1px solid var(--pop-line); margin: 6px 8px; }
.pick-menu .create { color: #F98913; font-weight: 600; background: rgba(249,137,19,.10); border: 1px solid rgba(249,137,19,.45); margin-block-start: 2px; }
.pick-menu .create:hover { background: rgba(249,137,19,.18); }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }

/* ── Нижний ряд: разделы и выбор ассистента ── */
.row { min-height: calc(44px * var(--k)); margin-block-start: var(--gap); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chips { display: flex; gap: var(--chip-gap); align-items: center; }
.chip {
  height: var(--chip-h); border-radius: var(--chip-r); background: var(--chip-bg); color: var(--chip-fg);
  font: inherit; font-size: var(--chip-fs); border: 0; padding-inline: var(--chip-pad);
  display: inline-flex; align-items: center; gap: calc(12px * var(--k)); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.chip svg { width: calc(22px * var(--k)); height: calc(22px * var(--k)); stroke-width: 1.7; }
.chip:hover, .chip:focus-visible, .chip[aria-expanded="true"] { background: #363636; color: var(--in-fg); outline: none; }
.burger { display: none; width: calc(51px * var(--k)); justify-content: center; padding-inline: 0; }
@media (max-width: 699px) { .chips { display: none; } .burger { display: inline-flex; } }
.pick-wrap { position: relative; }
.pick { color: var(--pick-fg); font-size: var(--chip-fs); height: calc(44px * var(--k)); padding-inline: calc(12px * var(--k)); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.pick svg { width: calc(18px * var(--k)); height: calc(18px * var(--k)); stroke-width: 2; }

/* ── Раздел или шторка открыты — композер уходит (решение владельца 15.09.2026) ── */
body.is-open .composer, body.sheet-open .composer, body.is-open .feed { opacity: 0; visibility: hidden; }
body.is-open .logo-glow { opacity: .3; }

/* ── Разговор ── */
.feed { display: none; }
body.chat { justify-content: flex-start; padding-block: 88px 20px; gap: 0; }
/* логотип улетает на место аватара ИИ у первого ответа (решение владельца 16.09.2026) — сам в разговоре не виден */
body.chat .logo { visibility: hidden; position: absolute; }
body.chat .socials, body.chat .logo-glow { display: none; }
body.chat .feed {
  display: flex; flex-direction: column; gap: 20px; flex: 1; min-height: 0; overflow-y: auto;
  width: 100%; max-width: var(--cmp-w); padding-block: 12px calc(64px * var(--k)); padding-inline: 2px;
}
body.chat .feed > :first-child { margin-block-start: auto; }
/* верх ленты уходит плавно, а не срезом */
body.chat .feed { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36px); mask-image: linear-gradient(to bottom, transparent 0, #000 36px); }
/* направление строки — по самому тексту: русский ответ на ивритской странице не переворачивает знаки */
.feed .ai-msg { max-width: 82%; margin: 0; font-size: calc(19px * var(--k)); line-height: 1.5; color: var(--in-fg); unicode-bidi: plaintext; text-align: start; }
.feed .ai-msg .ai-p, .feed .ai-msg .ai-li { unicode-bidi: plaintext; text-align: start; }
/* Сообщения в ленте не сжимаются: у ответа ИИ задан min-height под аватар, он отменял min-height:auto,
   и flex-колонка ужимала длинный ответ до 34 px — текст вылезал под пузыри клиента (замечание владельца 05.10.2026). */
.feed > * { flex-shrink: 0; }
/* Клиент — оранжевый пузырь, ИИ — серая карточка (решение владельца 05.10.2026) */
.feed .ai-msg.is-user {
  align-self: flex-end; background: #F98913; color: #1A1206; font-weight: 500; border: 0; padding: 12px 18px; border-radius: 20px; border-end-end-radius: 6px;
  transform-origin: 100% 100%; animation: bubble .6s cubic-bezier(.34, 1.56, .64, 1) both;
}
.feed .ai-msg.is-user a { color: inherit; }
[dir="rtl"] .feed .ai-msg.is-user { transform-origin: 0 100%; }
.feed .ai-msg.is-bot { align-self: flex-start; background: none; border: 0; padding: 4px 2px; animation: rise .45s var(--ease) both; }
/* аватар ИИ — тот же логотип; размер и отступ читает new.js, чтобы логотип сел ровно на место */
.feed { --av: 34px; --av-gap: 12px; --card-pad: 18px; }
.feed .ai-msg.is-bot:not(.ai-offer) {
  position: relative; isolation: isolate; min-height: var(--av);
  padding-block: 12px; padding-inline: calc(var(--av) + var(--av-gap) + var(--card-pad)) var(--card-pad);
}
/* карточка рисуется отдельным слоем правее аватара: сам элемент начинается с аватара — от его края new.js сажает логотип */
.feed .ai-msg.is-bot:not(.ai-offer)::after {
  content: ''; position: absolute; z-index: -1; inset-block: 0; inset-inline: calc(var(--av) + var(--av-gap)) 0;
  background: #262626; border: 1px solid #333; border-radius: 20px; border-start-start-radius: 6px;
}
.feed .ai-msg.is-bot:not(.ai-offer)::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline-start: 0; width: var(--av); height: var(--av);
  background: url(/logo-420.webp) center / contain no-repeat; filter: drop-shadow(0 0 8px rgba(249,137,19,.35));
}
.feed .ai-msg.av-wait::before { opacity: 0; }
.feed .ai-offer { margin-inline-start: calc(var(--av) + var(--av-gap)); }
.logo-fly { position: fixed; z-index: 5; margin: 0; pointer-events: none; transform-origin: 0 0; }
.feed .ai-typing i { background: #F98913; }
@keyframes bubble { 0% { opacity: 0; transform: translateY(22px) scale(.55); } 55% { opacity: 1; transform: translateY(-4px) scale(1.05); } 100% { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 699px) {
  body.chat { padding-block-start: 68px; }
  .feed { --av: 28px; --av-gap: 10px; --card-pad: 14px; }
  body.chat .feed { gap: 16px; }
  .feed .ai-msg { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-glow, .feed .ai-msg, .lang-menu, .pick-menu { animation: none !important; }
}