/* «Подсказка после звонка» (ТЗ №90, п. 2.3): карточка в правом нижнем углу — components/after_call_widget.js (поведение), components/after_call_view.js (разметка).
   Значения — только переменные tokens.css: ни цветов, ни размеров шрифта, ни радиусов числом (webapp/lib/design_tokens.test.js). Подключается после ds.css.

   Карточка лежит над содержимым страницы (выше карточек, липкой шапки и всплывающих списков; ниже выезжающего меню на телефоне и окон <dialog>, которые открываются в верхнем слое).
   Закрывать страницу она не должна: пока карточка на экране, внизу страницы остаётся запас на её высоту (--after-call-h выставляет скрипт), и всё содержимое можно прокрутить выше карточки. */
.after-call {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 46;
  box-sizing: border-box; width: min(400px, calc(100vw - 2 * var(--sp-4)));
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4); background: var(--ds-surface); color: var(--ds-text);
  border: 1px solid var(--ds-border); border-radius: var(--ds-r-card); box-shadow: var(--shadow-pop);
  animation: after-call-in var(--t-base) var(--ease) backwards;
}
@keyframes after-call-in { from { opacity: 0; transform: translateY(var(--move)); } to { opacity: 1; transform: none; } }

.after-call-head { display: flex; align-items: flex-start; gap: var(--sp-3); padding-right: calc(var(--row-h) - var(--sp-2)); min-width: 0; }
.after-call-icon { flex: 0 0 auto; width: var(--ds-icon-box); height: var(--ds-icon-box); border-radius: var(--ds-r-icon); display: inline-flex; align-items: center; justify-content: center; background: var(--ds-ok-bg); color: var(--ds-ok-fg); }
.after-call-icon svg { width: 18px; height: 18px; }
.after-call-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.after-call-title { font-size: var(--fs-14); font-weight: var(--fw-strong); line-height: 1.35; overflow-wrap: anywhere; }
.after-call-hint { font-size: var(--fs-13); color: var(--ds-text-2); overflow-wrap: anywhere; }

/* Крестик: область нажатия 44 px (var(--row-h)) в углу карточки; сам значок мелкий. */
.after-call-close {
  position: absolute; top: var(--sp-1); right: var(--sp-1);
  width: var(--row-h); height: var(--row-h); padding: 0; border: 0; border-radius: var(--ds-r-ctl);
  display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--ds-text-2); cursor: pointer;
}
.after-call-close:hover { background: var(--ds-neutral-bg); color: var(--ds-text); }
.after-call-close svg { width: 16px; height: 16px; }

/* Действия: основное (чёрное) — на всю ширину первой строкой, второстепенные — вместе второй: карточка низкая и на телефоне. */
.after-call-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.after-call-actions .btn { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; padding-inline: var(--sp-3); text-align: center; text-decoration: none; }
.after-call-actions .btn-primary { flex-basis: 100%; }

/* Страница не прячет своё содержимое под карточкой: внизу — запас на её высоту. */
body.has-after-call .content { padding-bottom: calc(var(--after-call-h, 0px) + var(--sp-6)); }

/* Выключатель в меню (стили строки — .sidebar-toggle в ds.css): кольцо фокуса и область нажатия на телефоне. */
.sidebar-toggle input:focus-visible { outline: var(--focus-ring-width) solid var(--ds-menu-text-active); outline-offset: 2px; }

@media (max-width: 720px) {
  .after-call { right: var(--sp-3); bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); width: min(400px, calc(100vw - 2 * var(--sp-3))); padding: var(--sp-3); }
  .after-call .btn { min-height: var(--row-h); }
  .after-call-actions .btn { padding-inline: var(--sp-2); }
  /* Карточка звонка: закреплённый снизу плеер (z-index 45) остаётся виден — карточка встаёт над ним (запас под плеер — тот же 160 px, что у страницы). */
  body:has(.player-card) .after-call { bottom: calc(160px + var(--sp-3)); }
  body.has-after-call .content:has(.player-card) { padding-bottom: calc(160px + var(--after-call-h, 0px) + var(--sp-6)); }
  .sidebar-toggle { min-height: var(--row-h); }
}

@media print { .after-call { display: none; } }