/* ── «про вас ничего не нашлось» + демо-отчёт ── */
  /* Карточка отчёта приподнята над бумагой: это готовый документ, а не часть
     разговора. Тень наружу в кабинете положена только таким блокам. */
  .empty-card { border:0; border-radius:var(--radius-card); background:var(--paper);
                box-shadow:var(--shadow-card); padding:18px 20px }
  .empty-head { display:flex; gap:14px; align-items:flex-start }
  .empty-emoji { flex:0 0 auto; width:44px; height:44px; border-radius:var(--radius-mark);
                 background:var(--ink-faint);
                 display:flex; align-items:center; justify-content:center; font-size:21px }
  .empty-head b { display:block; font-size:16px; margin-bottom:3px;
                  font-variation-settings:var(--axis-active) }
  .empty-sub { color:var(--ink-muted); font-size:13.5px; line-height:1.45 }
  /* Отбивка внутри карточки — рисованным штрихом, а не пунктиром: ровных
     линеек система не знает. */
  .empty-note { margin-top:14px; padding-top:17px; font-size:13.5px; line-height:1.5; position:relative }
  .empty-note::before { content:''; position:absolute; top:0; left:0; right:0; height:var(--rule-h);
                        background:var(--rule-src) center / 100% 100% no-repeat; opacity:.85 }
  /* Главное действие — чёрная таблетка. Та же кнопка, что «попробовать» на
     лендинге, вплоть до несимметричных полей: слева на 2px больше. */
  .demo-cta { margin-top:14px; border:0; border-radius:var(--radius-mark); padding:11px 28px 11px 30px;
              background:var(--ink); color:var(--paper); font-family:var(--font-ui);
              font-variation-settings:var(--axis-active); font-size:15px; cursor:pointer;
              transition:transform var(--dur-hover) var(--ease-out) }
  .demo-cta:hover { transform:scale(1.03) }
  .demo-cta:active { transform:scale(.99) }
  .demo-cta[disabled] { opacity:.35; cursor:default; transform:none }
  /* Предупреждение: цветом не кричим — бледная подложка и слово. */
  .demo-banner { display:flex; gap:7px; align-items:center; margin-bottom:12px; padding:10px 14px;
                 border:0; border-radius:var(--radius-card); background:var(--ink-faint);
                 color:var(--ink-strong); font-size:12.5px }

  /* ── композер ──
     Поле ввода — вдавленная в бумагу таблетка, как в макете кабинета. Полоски
     сверху нет: фон у ленты и у композера один, а границу рисует глубина. */
  /* Фона у композера нет намеренно. Лента под него не заезжает — они соседи
     в колонке, и заливка ничего не отделяла, зато закрашивала складку бумаги
     на всю свою высоту: слева получался ровный горизонтальный срез. Границу
     здесь рисует не фон и не линия, а глубина самого поля. */
  .composer { border-top:0; background:transparent; padding:14px 0 20px }
  /* Поле ввода шире колонки чтения — так в макете: 52% ширины окна (1038 из
     2000, 744 из 1440). Это не колонка текста, а орган управления, и мерить
     его по длине строки незачем. Нижняя граница — прежние 720px: на ноутбуке
     поле не должно стать уже, чем было. */
  .composer .wrap { flex-direction:row; align-items:flex-end; gap:0;
                    /* +40px — поля самой .wrap: цель по макету это ширина
                       ТАБЛЕТКИ (52vw), а не колонки вокруг неё. */
                    max-width:max(760px, calc(52vw + 40px)) }
  /* Таблетка целиком: поле и кнопка отправки внутри одной вдавленной в бумагу
     формы — как в макете. Поля несимметричны (слева 24, справа 20), знак
     прижат к низу: когда текст растёт, кнопка остаётся на последней строке,
     а не уезжает в середину. */
  /* cursor:text по всей таблетке — она и есть поле: нажатие в любое её место
     ставит курсор в строку (см. boot.js). Стрелка над полями таблетки говорила
     бы обратное — что сюда нажимать бесполезно. */
  .field { flex:1; min-width:0; display:flex; align-items:flex-end; gap:12px;
           padding:16px 20px 16px 24px; border-radius:var(--radius-field);
           background:var(--paper); box-shadow:var(--shadow-field); cursor:text }
  /* Поле внутри таблетки уже без собственной глубины и без полей — их держит
     обёртка. Растёт по содержимому (высоту ставит autoGrow в boot.js), и
     только упёршись в потолок начинает прокручиваться. */
  #inp { flex:1; min-width:0; padding:0; border:0; border-radius:0;
         font-family:var(--font-ui); font-variation-settings:var(--axis-body);
         font-size:var(--fs-body); line-height:var(--lh-body); letter-spacing:var(--ls-body);
         color:var(--ink-strong); outline:none; resize:none;
         background:transparent; box-shadow:none;
         /* Потолок — 40% высоты окна: на большом экране это около восемнадцати
            строк, на маленьком поле не съедает переписку. */
         max-height:40vh; overflow-y:auto; scrollbar-width:thin;
         scrollbar-color:rgb(0 0 0 / .22) transparent }
  #inp::-webkit-scrollbar { width:6px }
  #inp::-webkit-scrollbar-thumb { background:rgb(0 0 0 / .22); border-radius:99px }
  #inp::-webkit-scrollbar-track { background:transparent }
  #inp::placeholder { color:var(--ink-muted) }
  /* Фокус поле показывает само — оно уже продавлено; обводку вокруг таблетки
     рисовать не надо, иначе получится две границы сразу. */
  .field:focus-within { box-shadow:var(--shadow-field) }
  #inp:focus { box-shadow:none; outline:none }
  /* Отправка — не плашка, а знак: круглая кнопка, под которой при наведении
     проявляется мягкое белое гало (.pp-blob в ds.css). */
  #send { width:24px; height:24px; flex:0 0 24px; border:0; border-radius:var(--radius-mark);
          background:transparent; color:var(--ink-strong); cursor:pointer; font-size:19px;
          line-height:1; display:flex; align-items:center; justify-content:center; position:relative;
          transition:color var(--dur-hover) var(--ease-out) }
  #send::before { content:''; position:absolute; inset:var(--blob-inset);
                  background:var(--blob-src) center / cover no-repeat; opacity:0;
                  pointer-events:none; border-radius:var(--radius-mark);
                  transition:opacity var(--dur-hover) var(--ease-out) }
  #send:hover:not(:disabled)::before { opacity:1 }
  #send:hover:not(:disabled) { color:var(--ink) }
  #send:disabled { opacity:.35; cursor:default }
  #send:disabled::before { opacity:0 }

  /* «думает»: пульсирующие точки + метка текущего шага */
  .thinkrow { display:inline-flex; align-items:center }
  /* Метка шага — голос агента, поэтому рукописным, а не «Загрузка…». */
  .steplabel { margin-left:12px; font-family:var(--font-script); font-weight:300;
               font-size:var(--fs-script-note); color:var(--ink-strong) }
  .thinking { display:inline-flex; gap:5px; align-items:center; padding:4px 0 }
  .thinking i { width:7px; height:7px; border-radius:50%; background:var(--ink-muted);
                display:inline-block; animation:tb 1.2s infinite ease-in-out }
  .thinking i:nth-child(2) { animation-delay:.16s }
  .thinking i:nth-child(3) { animation-delay:.32s }
  @keyframes tb { 0%,70%,100% { opacity:.3; transform:translateY(0) } 35% { opacity:1; transform:translateY(-5px) } }
  /* «печатающий» курсор во время вывода */
  .caret::after { content:'▋'; margin-left:1px; color:var(--ink-muted); animation:blink 1s steps(1) infinite }
  @keyframes blink { 50% { opacity:0 } }
  /* контекстное меню диалога (правый клик).
     Единственный случай, когда тень наружу: меню висит над бумагой. */
  .menu { position:fixed; z-index:50; background:var(--paper); border:0; border-radius:var(--radius-card);
          box-shadow:var(--shadow-pop); padding:6px; min-width:180px; display:none }
  .menu button { display:block; width:100%; text-align:left; border:none; background:none; cursor:pointer;
                 padding:9px 12px; border-radius:8px; font:inherit; font-size:14px; color:var(--ink-strong) }
  .menu button:hover { background:var(--ink-faint); color:var(--ink) }
  .menu button.danger:hover { color:var(--bad) }