/* Секретарь VoIP Guru: кнопка в шапке, которая раскрывается в чат поверх сайта.
   Только токены дизайн-системы VG; сам компонент живёт в site/, бандл не трогает. */

/* ---------- Кнопка ---------- */
.vg-sec-btn { gap: 10px; max-width: 270px; padding: 0 var(--space-4) 0 14px; transition: width var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-fast), opacity var(--dur-fast); }
.vg-header .vg-sec-btn { flex: 0 1 auto; min-width: 0; }
.vg-sec-btn .vg-btn__label { gap: 10px; min-width: 0; }
.vg-sec-btn__text { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vg-sec-btn .vg-live { flex: none; }
.vg-sec-btn.is-news { border-color: var(--signal-ink); }
.vg-sec-btn.is-news .vg-live { background: var(--pulse); }
.vg-sec-btn.is-news .vg-live::after { border-color: var(--pulse); }
.vg-sec-btn.is-open { opacity: 0; pointer-events: none; }
/* приглашение нажать: от кнопки расходится мягкая волна цвета сигнала, рамка вспыхивает в такт */
.vg-sec-btn:not(.is-open) { animation: vg-sec-pulse 2.4s var(--ease-out) infinite; }
.vg-sec-btn:hover, .vg-sec-btn:focus-visible { animation-play-state: paused; }
@keyframes vg-sec-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal-ink) 55%, transparent); border-color: var(--signal-ink); }
  70% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--signal-ink) 0%, transparent); border-color: var(--line-300); }
  100% { box-shadow: 0 0 0 0 transparent; border-color: var(--line-300); }
}
/* плавающая кнопка на телефоне: та же волна поверх её собственной тени */
.vg-sec-btn.is-floating:not(.is-open) { animation-name: vg-sec-pulse-float; }
@keyframes vg-sec-pulse-float {
  0% { box-shadow: var(--shadow-card), 0 0 0 0 color-mix(in srgb, var(--signal-ink) 55%, transparent); border-color: var(--signal-ink); }
  70% { box-shadow: var(--shadow-card), 0 0 0 12px color-mix(in srgb, var(--signal-ink) 0%, transparent); border-color: var(--line-300); }
  100% { box-shadow: var(--shadow-card), 0 0 0 0 transparent; border-color: var(--line-300); }
}
.vg-sec-measure { position: absolute; visibility: hidden; white-space: nowrap; pointer-events: none; font: 600 14px/20px var(--font-sans); letter-spacing: 0.01em; }

/* с кнопкой секретаря шапке тесно: логотип не сжимаем, а меню прячем раньше —
   так же, как бандл прячет его на планшетах (≤1024px) */
.vg-header .vg-logo { flex: none; }
.vg-header .vg-logo__name { white-space: nowrap; }
@media (max-width: 1279px) {
  .vg-header .vg-nav { display: none; }
  .vg-header .vg-header__actions { margin-left: auto; }
}

/* на телефоне шапка тесная: кнопка уезжает в плавающую «пилюлю» внизу экрана */
.vg-sec-btn.is-floating { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 40; height: 48px; max-width: calc(100vw - 2 * var(--space-4)); background: var(--surface-glass); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: var(--shadow-card); }

/* ---------- Панель ---------- */
.vg-sec-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(4, 6, 8, 0.45); opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out); }
.vg-sec-scrim.is-on { opacity: 1; pointer-events: auto; }
.vg-sec { position: fixed; z-index: 61; top: 76px; right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); width: min(440px, calc(100vw - 2 * var(--gutter))); height: min(680px, calc(100dvh - 96px)); display: flex; flex-direction: column; background: var(--surface-100); border: 1px solid var(--line-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-card), 0 40px 80px -30px rgba(0, 0, 0, 0.55); overflow: hidden; clip-path: inset(0 round var(--radius-lg)); transition: clip-path var(--dur-slow) var(--ease-out); }
.vg-sec[hidden] { display: none; }
.vg-sec.is-snap { transition: none; }
.vg-sec > * { transition: opacity var(--dur-base) var(--ease-out); }
.vg-sec.is-collapsed > * { opacity: 0; }

.vg-sec__head { display: flex; align-items: center; gap: var(--space-3); padding: 14px var(--space-4) 14px var(--space-6); border-bottom: 1px solid var(--line-100); background-image: linear-gradient(90deg, var(--signal-soft), transparent 55%); }
.vg-sec__who { flex: 1; min-width: 0; }
.vg-sec__who strong { display: block; font: 500 16px/20px var(--font-display); letter-spacing: 0.01em; }
.vg-sec__who span { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.vg-sec__who .vg-live { width: 6px; height: 6px; }
.vg-sec__icon { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid transparent; border-radius: var(--radius-pill); background: none; color: var(--ink-200); cursor: pointer; transition: color var(--dur-fast), border-color var(--dur-fast), background-color var(--dur-fast); }
.vg-sec__icon:hover { color: var(--ink-100); border-color: var(--line-300); }
.vg-sec__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vg-sec__forget { padding: 0 10px; height: 32px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--ink-300); font: 400 11px/16px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.vg-sec__forget:hover { color: var(--ink-100); background: var(--surface-200); }

.vg-sec__log { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-6) var(--space-6) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); scrollbar-width: thin; scrollbar-color: var(--line-300) transparent; }
.vg-sec__note { margin: 0 0 var(--space-2); padding: 10px 12px; border: 1px dashed var(--line-200); border-radius: var(--radius-sm); font-size: 12px; line-height: 18px; color: var(--ink-300); }
.vg-sec__note a { color: var(--ink-200); }

.vg-sec__msg { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 23px; overflow-wrap: anywhere; animation: vg-sec-in var(--dur-base) var(--ease-out) both; }
.vg-sec__msg p { margin: 0; }
.vg-sec__msg p + p { margin-top: 8px; }
.vg-sec__msg--assistant { align-self: flex-start; background: var(--surface-200); border-bottom-left-radius: 4px; }
.vg-sec__msg--user { align-self: flex-end; background: var(--signal-soft); border: 1px solid var(--line-300); border-bottom-right-radius: 4px; }
.vg-sec__msg.is-streaming::after { content: ""; display: inline-block; width: 7px; height: 15px; margin-left: 3px; vertical-align: -2px; background: var(--signal-ink); animation: vg-blink 1s steps(1) infinite; }
.vg-sec__typing { align-self: flex-start; display: inline-flex; gap: 5px; padding: 14px 16px; border-radius: 16px; border-bottom-left-radius: 4px; background: var(--surface-200); }
.vg-sec__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-300); animation: vg-sec-dot 1.2s var(--ease-out) infinite; }
.vg-sec__typing i:nth-child(2) { animation-delay: 0.15s; }
.vg-sec__typing i:nth-child(3) { animation-delay: 0.3s; }
.vg-sec__event { align-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border: 1px solid var(--line-200); border-radius: var(--radius-pill); }
.vg-sec__event .vg-live { width: 6px; height: 6px; }

/* карточки: согласие и загрузка записи */
.vg-sec__card { align-self: stretch; padding: var(--space-4); border: 1px solid var(--line-300); border-radius: var(--radius-md); background: var(--surface-000); animation: vg-sec-in var(--dur-base) var(--ease-out) both; }
.vg-sec__card h4 { margin: 0 0 6px; font: 500 15px/20px var(--font-display); }
.vg-sec__card p { margin: 0; font-size: 13px; line-height: 20px; color: var(--ink-200); }
.vg-sec__card a { color: var(--signal-ink); }
.vg-sec__card-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.vg-sec__bar { height: 4px; margin-top: 12px; border-radius: 2px; background: var(--line-200); overflow: hidden; }
.vg-sec__bar i { display: block; height: 100%; width: var(--p, 4%); background: var(--signal); border-radius: inherit; transition: width var(--dur-slow) var(--ease-out); }
.vg-sec__bar.is-indef i { width: 30%; animation: vg-sec-indef 1.4s var(--ease-out) infinite; }

.vg-sec__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-6) var(--space-3); }
.vg-sec__chips[hidden] { display: none; }
.vg-sec__chip { height: 32px; padding: 0 12px; border: 1px solid var(--line-300); border-radius: var(--radius-pill); background: none; color: var(--ink-100); font: 500 13px/18px var(--font-sans); cursor: pointer; transition: border-color var(--dur-fast), background-color var(--dur-fast); }
.vg-sec__chip:hover { border-color: var(--signal-ink); background: var(--signal-soft); }

.vg-sec__form { display: flex; align-items: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-4); border-top: 1px solid var(--line-100); }
.vg-sec__input { flex: 1; min-height: 44px; max-height: 140px; padding: 11px 14px; border: 1px solid var(--line-300); border-radius: 22px; background: var(--surface-000); color: var(--ink-100); font: 400 15px/20px var(--font-sans); resize: none; outline: none; transition: border-color var(--dur-fast); }
.vg-sec__input::placeholder { color: var(--ink-300); }
.vg-sec__input:focus { border-color: var(--signal-ink); }
.vg-sec__send { flex: none; width: 44px; height: 44px; padding: 0; }
.vg-sec__send svg, .vg-sec__attach svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vg-sec__send[disabled] { opacity: 0.45; cursor: default; box-shadow: none; }
.vg-sec__attach { flex: none; width: 44px; height: 44px; padding: 0; }

.vg-sec :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

@keyframes vg-sec-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes vg-sec-dot { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes vg-sec-indef { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

@media (max-width: 768px) {
  .vg-sec { inset: 0; width: auto; height: auto; border-radius: 0; border: 0; }
  .vg-sec__head { padding-left: var(--space-4); }
  .vg-sec__log, .vg-sec__chips { padding-left: var(--space-4); padding-right: var(--space-4); }
  .vg-sec__input { font-size: 16px; } /* iOS не приближает поле при вводе */
}
@media (prefers-reduced-motion: reduce) {
  .vg-sec, .vg-sec > *, .vg-sec-btn { transition: none; }
  .vg-sec-btn:not(.is-open) { animation: none; border-color: var(--signal-ink); }
}
@media (max-width: 860px) {
  .vg-footer__bottom { padding-bottom: 72px; } /* не прятать «Наверх» под плавающей кнопкой */
}

/* ---------- Голосовой режим (secretary-voice.js) ---------- */
.vg-sec__mic.is-on { border-color: var(--signal-ink); }
.vg-call { position: absolute; left: 0; right: 0; bottom: 0; top: 69px; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-6); background: var(--surface-100); background-image: radial-gradient(circle at 50% 38%, var(--signal-soft), transparent 60%); animation: vg-sec-in var(--dur-base) var(--ease-out) both; }
.vg-call[hidden] { display: none; }
.vg-sec.is-call .vg-sec__forget { visibility: hidden; }
.vg-call__orb { width: 220px; height: 220px; flex: none; }
.vg-call__state { margin: 0; color: var(--signal-ink); min-height: 16px; }
.vg-call[data-state="connecting"] .vg-call__state { color: var(--ink-300); }
.vg-call__lines { width: 100%; min-height: 96px; text-align: center; }
.vg-call__lines p { margin: 0 auto; max-width: 34ch; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; }
.vg-call__you { color: var(--ink-300); font-size: 14px; line-height: 20px; -webkit-line-clamp: 2; }
.vg-call__bot { margin-top: var(--space-2) !important; color: var(--ink-100); font-size: 16px; line-height: 24px; -webkit-line-clamp: 4; }
.vg-call__hint { margin: 0; font-size: 12px; line-height: 18px; color: var(--ink-300); text-align: center; }
.vg-call__ctrl { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-2); }
.vg-call__mute[aria-pressed="true"] { border-color: var(--pulse); color: var(--pulse); }
@media (max-width: 768px) {
  .vg-call { top: 65px; }
  .vg-call__orb { width: 200px; height: 200px; }
}