/* ── карточка аудитории: чипы интересов ── */
  .card { border:0; border-radius:var(--radius-card); background:transparent; padding:4px 0 }
  .cardhead { font-size:12.5px; color:var(--muted); margin-bottom:10px }
  .cardhead.second { margin-top:16px }        /* гео идёт второй секцией под интересами */
  .cardhead .lim { color:var(--accent); font-weight:600 }
  .toast { position:fixed; z-index:70; left:50%; bottom:86px; transform:translateX(-50%);
           background:var(--ink); color:var(--paper); padding:11px 20px; border-radius:var(--radius-mark);
           font-size:13.5px; opacity:0; pointer-events:none; transition:opacity .18s }
  .toast.on { opacity:.94 }
  .chips { display:flex; flex-wrap:wrap; gap:7px }
  .chip { display:inline-flex; align-items:center; gap:6px; padding:6px 16px 9px; border-radius:var(--radius-mark);
          border:0; background:var(--paper); box-shadow:var(--shadow-chip); font-size:13.5px;
          color:var(--ink-strong); cursor:pointer; user-select:none;
          transition:box-shadow var(--dur-hover) var(--ease-out), opacity var(--dur-hover) var(--ease-out) }
  .chip:hover { color:var(--ink) }
  /* Снятый чип не сереет и не зачёркивается — он становится плоским: тень
     уходит, надпись притухает. На бумаге это и значит «не в деле». */
  .chip.off { opacity:.3; box-shadow:none; text-decoration:none; background:transparent }
  /* Добавлен руками, а не агентом: помечаем весом, а не цветом рамки. */
  .chip.manual { font-variation-settings:var(--axis-active) }
  .chip .x { border:none; background:none; cursor:pointer; color:var(--muted); font-size:15px;
             line-height:1; padding:0 }
  .chip .x:hover { color:var(--ink) }
  /* «Добавить» — знак без плашки, как «＋» в макете. */
  .addchip { padding:6px 14px 9px; border-radius:var(--radius-mark); border:0; background:none;
             cursor:pointer; font-size:13.5px; color:var(--ink-muted);
             transition:color var(--dur-hover) var(--ease-out) }
  .addchip:hover { color:var(--ink) }
  .geo { margin-top:12px; font-size:13px; color:var(--muted) }

  /* ── модалка справочника ── */
  .backdrop { position:fixed; inset:0; background:rgba(0,0,0,.28); z-index:60; display:none }
  .backdrop.on { display:block }
  .modal { position:fixed; z-index:61; left:50%; top:50%; transform:translate(-50%,-50%);
           width:min(560px,92vw); height:min(560px,80vh); background:var(--paper); border:0;
           border-radius:var(--radius-card); box-shadow:var(--shadow-pop); display:none; flex-direction:column }
  .modal.on { display:flex }
  .mhead { padding:14px 14px 12px; border-bottom:0; display:flex; gap:10px; align-items:center }
  .mhead input { flex:1; border:0; border-radius:var(--radius-mark); padding:11px 18px;
                 font:inherit; font-size:14px; outline:none; background:var(--paper);
                 box-shadow:var(--shadow-field); color:var(--ink-strong) }
  .mhead input::placeholder { color:var(--ink-muted) }
  .mclose { border:none; background:none; font-size:20px; cursor:pointer; color:var(--muted); line-height:1 }
  .crumb { padding:4px 15px 10px; font-size:12.5px; color:var(--ink-muted); border-bottom:0 }
  .crumb a { color:var(--ink); cursor:pointer }
  .mlist { flex:1; overflow-y:auto; padding:6px }
  .mitem { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px;
           cursor:pointer; font-size:14px }
  .mitem:hover { background:var(--ink-faint) }
  .mitem .p { flex:1; min-width:0 }
  .mitem .p small { display:block; color:var(--muted); font-size:11.5px; white-space:nowrap;
                    overflow:hidden; text-overflow:ellipsis }
  .mitem .cnt { color:var(--muted); font-size:12px; flex:0 0 auto }
  .mitem.added { color:var(--muted) }
  /* «выбрать целиком» — отдельно сверху, иначе узел тонет среди своих же детей */
  .mitem.whole { border-bottom:0; margin-bottom:8px; position:relative }
  .mitem.whole::after { content:''; position:absolute; bottom:-4px; left:11px; right:11px;
                        height:var(--rule-h); background:var(--rule-src) center / 100% 100% no-repeat;
                        opacity:.6 }
  .mitem.whole .p { font-weight:600 }
  .mempty { padding:22px; text-align:center; color:var(--muted); font-size:13.5px }

  /* ── найденные компании в реплике ── */
  /* Реквизиты спрашиваются разговором (см. reqInline), и подсказка реестра приезжает
     не выпадающим списком под полем, а кнопками в самом пузыре — как всякий другой
     выбор в этом чате. Поэтому в колонку и с адресом под названием: строка ЕГРЮЛ в
     одну линию не влезает, а выбирать компанию по обрезанному названию нельзя. */
  .req-pick { flex-direction:column; align-items:flex-start }
  .req-pick button { width:100%; text-align:left; white-space:normal; line-height:1.35 }
  .req-pick small { display:block; margin-top:2px; color:var(--muted); font-size:11.5px }
  /* Карточка найденной по ИНН компании — то же содержимое, но не кнопка: выбирать
     тут нечего, вопрос «ваша?» стоит отдельными кнопками под ней. */
  .req-card { margin-top:10px; padding:12px 16px; border:0; border-radius:var(--radius-card);
              background:var(--ink-faint); line-height:1.4 }
  .req-card small { display:block; margin-top:3px; color:var(--muted); font-size:11.5px }
  .req-hint { margin-top:8px; color:var(--muted); font-size:12px; line-height:1.45 }

  /* ── экран подбора аудитории (мок; числа-заглушки, механика живая) ── */
  /* инлайн-кнопки действий: чёрные, авто-ширина, ПОД карточкой (в том же пузыре) */
  .act-btn { display:inline-flex; align-items:center; gap:7px; 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:14px; cursor:pointer;
             text-decoration:none; transition:transform var(--dur-hover) var(--ease-out) }
  .act-btn:hover { transform:scale(1.03) }
  .act-btn:active { transform:scale(.99) }
  .act-btn:disabled { opacity:.35; cursor:default; transform:none }
  /* схлопнутая карточка чипов, пока открыт расчёт: сводка + «Изменить» */
  .card-collapsed { display:flex; align-items:center; gap:12px; font-size:13.5px; color:var(--muted) }
  .card-collapsed .cc-text { flex:1; line-height:1.4; min-width:0 }
  .card-collapsed .cc-text b { color:var(--text) }
  .cc-edit { flex:0 0 auto; border:0; background:var(--paper); box-shadow:var(--shadow-chip);
             border-radius:var(--radius-mark); padding:6px 15px 8px; font:inherit; font-size:13px;
             color:var(--ink-strong); cursor:pointer }
  .cc-edit:hover { color:var(--ink) }
  /* карточка-сообщение в ленте чата (не оверлей): живёт под карточкой чипов */
  .calc-bubble { flex:1 }                       /* растянуть пузырь на всю колонку */
  /* white-space:normal обязателен: пузырь чата — pre-wrap, а карточка собрана
     innerHTML-шаблоном с переносами, иначе они рендерятся как пустоты */
  .calc-panel { border:0; border-radius:var(--radius-card); background:transparent;
                overflow:hidden; white-space:normal }
  .calc-top { display:flex; align-items:center; gap:10px; padding:2px 0 12px; border-bottom:0 }
  .calc-top b { font-family:var(--font-display); font-weight:700; font-size:19px; flex:1 }
  .calc-sec { padding:13px 0 }
  /* Разделов в расчёте несколько — отбиваем их штрихом, а не полосой фона. */
  .calc-sec + .calc-sec { border-top:0; margin-top:8px; padding-top:20px; position:relative }
  .calc-sec + .calc-sec::before { content:''; position:absolute; top:0; left:0; right:0;
                                  height:var(--rule-h);
                                  background:var(--rule-src) center / 100% 100% no-repeat; opacity:.7 }
  .calc-h { font-size:14.5px; font-weight:650; margin:0 0 2px }
  .calc-note { font-size:12px; color:var(--muted); line-height:1.4 }
  /* список интересов раскрыт целиком — прокручивается сам чат, без вложенного скролла */
  .irows { margin-top:6px }
  .irow { display:flex; align-items:center; gap:13px; padding:11px 2px; border-top:1px solid var(--faint) }
  .irows .irow:first-child { border-top:0 }
  .irow .who { flex:1; min-width:0 }
  .irow .who b { font-size:13.5px; font-weight:600; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .irow .who small { color:var(--muted); font-size:11px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .irow.off .who b { text-decoration:line-through; color:var(--muted) }
  /* число людей по интересу: крупное, редактируется на месте (подчёркивание в фокусе) */
  .alloc { flex:0 0 auto; text-align:right; min-width:104px }
  /* пунктир снизу = «редактируется на месте»; на ховере фон, в фокусе сплошной акцент */
  .cnum { width:104px; text-align:right; font-variant-numeric:tabular-nums; font-size:15px; font-weight:600;
          border:0; border-bottom:1px dashed var(--border); background:transparent; color:var(--text);
          padding:1px 3px; border-radius:4px 4px 0 0; cursor:text }
  .cnum:hover:not(:disabled) { background:var(--ink-faint); border-bottom-color:var(--ink-muted) }
  .cnum:focus { outline:none; background:var(--ink-faint); border-bottom:1.5px solid var(--ink) }
  .cnum:disabled { color:var(--muted); border-bottom-color:transparent }
  .allocsub { display:flex; gap:7px; justify-content:flex-end; align-items:center; margin-top:1px; font-size:10.5px; color:var(--muted) }
  .alink { border:0; background:transparent; font:inherit; font-size:10.5px; color:var(--ink); cursor:pointer; padding:0; text-decoration:underline }
  .alink.on { color:var(--muted); text-decoration:none; cursor:default }
  .alink:disabled { opacity:.45; cursor:default }
  .sw { position:relative; flex:0 0 auto; width:34px; height:20px; border-radius:var(--radius-mark);
        background:var(--paper); border:0; box-shadow:var(--shadow-chip); cursor:pointer;
        transition:background .15s }
  .sw::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
               background:var(--paper-hi); box-shadow:0 1px 2px rgb(0 0 0 / .25); transition:transform .15s }
  .sw.on { background:var(--ink); box-shadow:none }
  .sw.on::after { transform:translateX(14px) }
  .aud-line, .plan-line { margin-top:11px; padding:9px 13px; background:var(--ink-faint);
              border-radius:var(--radius-hit); font-size:12.5px; color:var(--ink-muted) }
  .aud-line b, .plan-line b { color:var(--text); font-variant-numeric:tabular-nums; font-size:15px; font-weight:700 }
  .plan-line small { color:var(--muted); font-size:11.5px }
  /* Показы — прогноз. Без этой оговорки «8 400 показов» рядом с суммой в счёте
     читаются как обязательство, а мы их не гарантируем: открутка зависит от
     аукциона Telegram. */
  .plan-note { margin-top:6px; color:var(--muted); font-size:11.5px; line-height:1.5 }
  .stats-empty { padding:14px 2px; color:var(--muted); font-size:12px; line-height:1.5 }