/* ── Дизайн-система кабинета ──────────────────────────────────────────────
   Токены и шрифты. Подключается ПЕРВЫМ, до base.css: на нём стоит вся
   остальная вёрстка чата и настроек.

   Источник — design-system/cabinet/ (снято с прототипа
   pinpoint.framer.media/agent/*). Здесь тот же набор токенов, отличие одно:
   пути к ассетам абсолютные, от /static/ — страницы кабинета отдаются с
   разной глубины (/chat, /settings/profile), и относительные путались бы.

   Правки вносим ЗДЕСЬ и переносим в design-system/cabinet/tokens/, а не
   наоборот: система — источник, это её копия для продакшена.               */

/* ── Шрифты ─────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "TT Bluescreens";
  src: url("/static/assets/fonts/TT_Bluescreens_Pro_Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "TT Nooks";
  src: url("/static/assets/fonts/TT_Nooks_Script_Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto Var";
  src: url("/static/assets/fonts/KFOmCnqEu92Fr1Mu5mxKOzY.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Roboto Var";
  src: url("/static/assets/fonts/KFOmCnqEu92Fr1Mu4mxK.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-display: "TT Bluescreens", "PT Sans Narrow", "Arial Narrow", sans-serif;
  --font-script: "TT Nooks", Georgia, serif;
  --font-ui: "Roboto Var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, ui-monospace, monospace;

  /* ── Цвет ───────────────────────────────────────────────────────────────
     Бумага и чёрный. Три цвета внизу — не палитра, а знак: они появляются
     вместе, секторами круга, и по отдельности как «цвет успеха» или «цвет
     ошибки» не используются. */
  --paper: #efefef;
  --paper-hi: #fff;
  --ink: #000;
  --ink-strong: rgb(0 0 0 / 0.8);
  --ink-list: rgb(0 0 0 / 0.6);
  --ink-muted: rgb(0 0 0 / 0.5);
  --ink-faint: rgb(0 0 0 / 0.05);
  --mark-blue: #2b44ff;
  --mark-yellow: #ffdc03;
  --mark-red: #ff1847;

  /* ── Типографика ────────────────────────────────────────────────────────
     Шкала одна на все экраны: меняется раскладка, а не кегли. Вес корпуса
     задают ОСИ вариативного Roboto, а не font-weight. */
  --fs-title: 65px;        --lh-title: 86%;
  --fs-section: 44px;      --lh-section: 100%;
  --fs-lead: 24px;         --lh-lead: 110%;
  --fs-lead-sm: 20px;      --lh-lead-sm: 120%;
  --fs-body: 18px;         --lh-body: 130%;   --ls-body: 0.2px;
  --fs-fact: 16px;         --lh-fact: 100%;   --ls-fact: 0.2px;
  --fs-item: 16px;         --lh-item: 100%;   --ls-item: 0.1px;
  --fs-script-note: 17px;  --lh-script-note: 100%;
  --fs-script-sm: 15px;    --lh-script-sm: 90%; --ls-script: 0.2px;
  --fs-small: 13px;        --lh-small: 90%;   --ls-small: 0.1px;

  --axis-body:   "wght" 333, "wdth" 75;
  --axis-strong: "wght" 543, "wdth" 100;
  --axis-fact:   "wght" 333, "wdth" 75;
  --axis-item:   "wght" 357, "wdth" 75;
  --axis-active: "wght" 480, "wdth" 75;
  --axis-small:  "wght" 320, "wdth" 75;

  /* ── Скругления ─────────────────────────────────────────────────────── */
  --radius-field: 32px;
  --radius-mark: 100px;
  /* Чип интереса. Половина высоты чипа в одну строку (36px) — и это не
     «скругление поменьше», а то же самое скругление: браузер всё равно ужимает
     100px до половины высоты, поэтому однострочный чип не меняется ни на
     пиксель. Разница появляется там, где подпись переносится: капсула на трёх
     строках выглядит нелепо — с фиксированным радиусом длинный чип становится
     скруглённым прямоугольником и остаётся в одном ряду с короткими.
     В прототипе такого случая не было: там все интересы в одно слово. */
  --radius-chip: 18px;
  --radius-hit: 10px;
  --radius-card: 12px;
  --radius-slot: 4px;

  /* ── Глубина ────────────────────────────────────────────────────────────
     Фон везде один, поэтому элемент отделяется не заливкой и не рамкой,
     а тем, что вдавлен в бумагу. Уровня два: поле продавлено глубоко,
     чип — едва. Разбирать стеки на «тень попроще» нельзя: эффект держится
     на том, что внутренняя тень сверху и внешняя снизу работают вместе. */
  --shadow-field:
    rgb(255 255 255) 0 2px 2px 0,
    rgb(0 0 0 / 0.25) 0 1px 2px 0 inset,
    rgb(0 0 0 / 0.07) 0 0.602px 0.602px -1.25px inset,
    rgb(0 0 0 / 0.06) 0 2.289px 2.289px -2.5px inset,
    rgb(0 0 0 / 0.03) 0 10px 10px -3.75px inset,
    rgb(0 0 0 / 0.18) 0 0.602px 0.602px -1.25px,
    rgb(0 0 0 / 0.16) 0 2.289px 2.289px -2.5px,
    rgb(0 0 0 / 0.06) 0 10px 10px -3.75px,
    rgb(255 255 255 / 0.7) 0 -6px 20px 0,
    rgb(0 0 0 / 0.1) 0 3px 3px 0 inset;
  --shadow-chip:
    rgb(255 255 255 / 0.65) 0 -2px 2px 0,
    rgb(0 0 0 / 0.23) 0 -1px 1px 0 inset;
  /* Единственная приподнятая поверхность — то, что уедет в Telegram. */
  --shadow-card:
    rgb(0 0 0 / 0.18) 0.677px 0.279px 1.025px -0.938px,
    rgb(0 0 0 / 0.17) 2.052px 0.845px 3.107px -1.875px,
    rgb(0 0 0 / 0.15) 5.425px 2.234px 8.214px -2.813px,
    rgb(0 0 0 / 0.06) 17px 7px 25.739px -3.75px;
  /* Туман под композером: не тень, а пятно цвета фона. */
  --shadow-fog: var(--paper) 0 14px 19px 46px;
  /* Всплывающее: меню, поповер профиля. */
  --shadow-pop: rgb(0 0 0 / 0.16) 0 10px 30px -6px, rgb(0 0 0 / 0.1) 0 2px 6px -2px;

  /* ── Картинки ───────────────────────────────────────────────────────────
     Складка между панелью и лентой, рисованный штрих вместо линии, пятно
     под круглой кнопкой при наведении. */
  --fold-src: url("/static/assets/img/RUh7iWnEziesMKIk1RSohyxeZQ.jpg");
  --fold-w: 256px;
  --fold-opacity: 0.49;
  --rule-src: url("/static/assets/img/enqRv8iGLPW7n6SMCHh76SjnHE.png");
  --rule-h: 8px;
  /* cover, а НЕ 100% 100%. Картинка 328×276 (пропорция 1.19) попадает в рамку
     95×66 (1.44): растяжение сплющивает круглый блик в плоский овал с прямыми
     краями — он и читается плашкой. cover масштабирует по ширине и срезает
     верх и низ, блик остаётся круглым. Складка и штрих — другой случай, там
     растяжение как раз нужно. */
  --blob-src: url("/static/assets/img/b17BXNZ3V1x1WRFL43GgzXcMmw.png");
  /* У «＋» нового чата два состояния одного пятна: невидимое 95×66 в покое
     и видимое 81×66 при наведении. Полупиксельные боковые inset сохраняют
     эти размеры и держат оптический центр пятна точно под центром знака. */
  --blob-inset: -21px -35.5px;
  --blob-plus-hover-inset: -21px -28.5px;

  /* ── Движение ───────────────────────────────────────────────────────────
     Кривые общие с лендингом — это бренд. Длительности свои и короче:
     кабинет отвечает на клик. */
  --spring: linear(0 0%, 0.0783 5%, 0.2348 10%, 0.4012 15%, 0.549 20%, 0.6691 25%,
    0.762 30%, 0.8314 35%, 0.882 40%, 0.9182 45%, 0.9437 50%, 0.9615 55%, 0.9739 60%,
    0.9823 65%, 0.9881 70%, 0.992 75%, 0.9947 80%, 0.9965 85%, 0.9976 90%, 0.9984 95%, 0.999 100%);
  --spring-bounce: linear(0 0%, 0.0673 4.2%, 0.2204 8.3%, 0.4032 12.5%, 0.5805 16.7%,
    0.7328 20.8%, 0.8522 25%, 0.9382 29.2%, 0.9946 33.3%, 1.0273 37.5%, 1.0425 41.7%,
    1.0459 45.8%, 1.0422 50%, 1.0349 54.2%, 1.0265 58.3%, 1.0184 62.5%, 1.0116 66.7%,
    1.0063 70.8%, 1.0025 75%, 1 79.2%, 0.9986 83.3%, 0.998 87.5%, 0.9979 91.7%,
    0.9981 95.8%, 1 100%);
  /* Framer spring кнопки «＋»: { duration:.55, bounce:.18 }. В отличие от
     короткого интерфейсного hover, он слегка перелетает цель и успокаивается. */
  --spring-action-hover: linear(0 0%, 0.077 5%, 0.2409 10%, 0.4244 15%, 0.5922 20%,
    0.7293 25%, 0.8327 30%, 0.9057 35%, 0.954 40%, 0.9836 45%, 1.0002 50%,
    1.0082 55%, 1.0109 60%, 1.0107 65%, 1.0092 70%, 1.0072 75%, 1.0052 80%,
    1.0035 85%, 1.0023 90%, 1.0013 95%, 1 100%);
  /* ── Появление ──────────────────────────────────────────────────────────
     В кабинете ОДНО появление экрана. Не «для этого экрана такое, для того
     сякое»: экран приезжает справа и по дороге вырастает — приглашение,
     вопрос агента, библиотека кампаний. Заводить
     второе появление нельзя: разные движения на соседних блоках читаются как
     разные механизмы, хотя происходит одно и то же — пришёл новый блок.

     Пружина и два числа из трёх сняты с прототипа: в
     `__framer__appearAnimationsContent` на /agent/interest* у ВСЕХ появлений
     один переход { type:"spring", duration:0.4, bounce:0.2 }, прозрачность
     едет с 0.001 (не с нуля), а масштаб — 0.5. Перелёт у пружины маленький,
     1.5% на 58% пути: не отскок знака (--spring-bounce, 4.6%), а «приехало
     и село».

     ⚠ Горизонталь и длительность — НЕ замер, и это надо знать. Перехода между
     экранами в опубликованном прототипе нет вовсе: три страницы не связаны
     ссылками, и у всех появлений там x:0, y:0. Сдвиг вправо взят по тому, как
     переход читается в Framer. Длительность 0.9с — то, чем лендинг тянет эту
     же пружину для крупных планов (0.4с там живёт мелочь, 2с — фон).

     Ручки, если движение не нравится, — эти три, и крутить их надо на всё
     сразу, а не на отдельный экран:
       --dur-in    дольше / короче
       --in-x      дальше / ближе
       --in-scale  сильнее / слабее рост */
  --spring-in: linear(0 0%, 0.0794 5%, 0.2486 10%, 0.4375 15%, 0.6093 20%,
    0.7484 25%, 0.8518 30%, 0.9231 35%, 0.9688 40%, 0.9954 45%, 1.0091 50%,
    1.0144 55%, 1.015 60%, 1.0131 65%, 1.0104 70%, 1.0076 75%, 1.0051 80%,
    1.0032 85%, 1.0018 90%, 1.0009 95%, 1 100%);
  --dur-in: 0.9s;
  --in-x: 96px;
  --in-scale: 0.5;
  --in-opacity: 0.001;

  /* Уход экрана: втрое быстрее прихода и без масштаба — уходящему внимание
     уже не нужно, а два равных по силе движения навстречу друг другу мешают
     смотреть на то, что пришло. */
  --dur-out: 0.3s;
  --out-x: -40px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-hover: 0.15s;
  --dur-action-hover: 0.55s;
  --dur-press: 0.1s;
  --dur-enter: 0.35s;
  --dur-panel: 0.3s;
  --dur-mark: 0.5s;
  /* Знак в углу и карточки выбора: движение подчёркнуто медленнее
     интерфейсного — это жест бренда, а не отклик на нажатие. */
  --dur-logo: 0.55s;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-hover: 0s; --dur-action-hover: 0s; --dur-press: 0s; --dur-enter: 0s; --dur-panel: 0s;
           --dur-mark: 0s; --dur-logo: 0s; --dur-in: 0s; --dur-out: 0s;
           --in-scale: 1; --in-opacity: 1; --in-x: 0px; --out-x: 0px }
}

/* ── Появление и уход блока ──────────────────────────────────────────────
   Одна анимация на все появления в кабинете. Ставится всему, что приходит на
   экран: приглашению, вопросу, документу, отчёту, шагу конструктора — список
   таких корней держит layout.css, здесь только кадры.

   translateX идёт ПЕРВЫМ — тогда сдвиг считается в координатах родителя и не
   масштабируется вместе с блоком, иначе путь вышел бы вдвое короче.

   Точка отсчёта масштаба — верх блока, а не центр. Для короткого блока разницы
   почти нет, а длинный (отчёт, документ кампании) при отсчёте от центра
   приезжал бы ещё и снизу вверх: его половинная копия вдвое короче, и верхний
   край оказывается сильно ниже. От верха он просто разворачивается вниз.

   Режим заливки — `backwards`, и это не мелочь. Он держит НАЧАЛЬНЫЙ кадр в
   промежутке между вставкой узла и первым кадром анимации: без него блок
   успевает мигнуть в полную силу — то самое «мелькает». А `forwards`/`both`
   ставить нельзя: конечный кадр остался бы приклеенным к элементу и перебил
   бы обычные правила — у карточки перестал бы работать hover. */
@keyframes pp-in {
  from { opacity:var(--in-opacity); transform:translateX(var(--in-x)) scale(var(--in-scale)) }
  to   { opacity:1; transform:none }
}

/* Уходящий экран: копия старого содержимого, которая уезжает влево и гаснет
   поверх нового. Живёт вне ленты, поэтому не участвует ни в прокрутке, ни в
   `:has()` раскладке, и сама снимается по окончании анимации (см. ghostLog). */
.pp-screen-out { position:absolute; overflow:hidden; pointer-events:none; z-index:3;
                 animation:pp-screen-out var(--dur-out) var(--ease-out) both }
@keyframes pp-screen-out {
  from { opacity:1; transform:none }
  to   { opacity:0; transform:translateX(var(--out-x)) }
}
/* Внутри копии всё замирает. Узлы в ней только что вставлены, и без этого они
   заново проигрывали бы своё появление — уходящий экран приезжал бы справа
   ровно в тот момент, когда он гаснет. */
.pp-screen-out * { animation:none !important; transition:none !important }

/* ── Обводка фокуса ───────────────────────────────────────────────────────
   Одна на весь кабинет. Не убирать — по нему ходят с клавиатуры. */
:focus-visible { outline:1.5px solid var(--ink); outline-offset:3px; border-radius:var(--radius-hit) }

html { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }