/*
 * BOTIX — разговор с голосовым ботом на сайте (public/js/webcall.js, ТЗ «Голос-3» §1.2).
 * Стиль — docs/BRANDBOOK.md: модалка 400px / 14px / тень модалки, крестик сверху справа,
 * кнопки компактные (не на всю ширину), без эмодзи и теней на элементах, без фиолетового.
 * Мобильный — docs/MOBILE_ADAPTIVE_GUIDE.md §8 п.7: модалка по центру, отступ под капсулу.
 *
 * Контейнер на странице (контракт ТЗ 4.4 §3 п.6а, вёрстка — роль 1):
 *   <div data-botix-webcall data-project="8" data-niche="barbershop" data-label="барбершопа">
 *     <button type="button" data-webcall-start>Поговорить с ассистентом</button>
 *   </div>
 * Скрипт ставит контейнеру data-state и класс состояния:
 *   btx-webcall--idle | --connecting | --listening | --speaking | --ended | --error
 */

.btx-webcall__btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 20px; font-size: 14px; font-weight: 600;
    border: none; border-radius: 10px; cursor: pointer;
    background: #007AFF; color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
    transition: opacity .15s;
}
.btx-webcall__btn:hover { opacity: .9; }
.btx-webcall__btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Модалка ─────────────────────────────────────────────────────────────── */
.btx-wc-overlay {
    position: fixed; inset: 0; z-index: 1000;
    display: none; justify-content: center; align-items: center;
    background: rgba(0, 0, 0, .4);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    padding: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
    color: #1d1d1f;
}
.btx-wc-overlay.open { display: flex; }

.btx-wc-modal {
    position: relative;
    width: 400px; max-width: 92vw; max-height: 90vh;
    overflow-y: auto; overflow-x: hidden;
    background: #fff; border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .25);
}

.btx-wc-close {
    position: absolute; top: 10px; right: 10px; z-index: 1;
    width: 32px; height: 32px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; border-radius: 6px; cursor: pointer;
    color: #8E8E93;
}
.btx-wc-close:hover { background: rgba(60, 60, 67, .08); }
.btx-wc-close svg { width: 16px; height: 16px; }

.btx-wc-head { padding: 18px 48px 12px 20px; border-bottom: 1px solid rgba(60, 60, 67, .08); }
.btx-wc-title { font-size: 16px; font-weight: 600; line-height: 1.3; }
.btx-wc-sub { font-size: 13px; color: #8E8E93; margin-top: 4px; line-height: 1.4; }

.btx-wc-body { padding: 16px 20px 20px; }
.btx-wc-step { display: none; }
.btx-wc-step.active { display: block; }

.btx-wc-hint { font-size: 13px; color: #6e6e73; line-height: 1.45; margin-bottom: 12px; }
.btx-wc-cap { width: 100%; overflow: hidden; }
.btx-wc-cap .pcaptcha { transform-origin: left top; }

.btx-wc-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.btx-wc-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 20px; font-size: 14px; font-weight: 600; font-family: inherit;
    border: none; border-radius: 10px; cursor: pointer;
    background: #007AFF; color: #fff;
    min-height: 44px;
    transition: opacity .15s;
}
.btx-wc-btn:hover { opacity: .9; }
.btx-wc-btn[disabled] { opacity: .45; cursor: default; }
.btx-wc-btn svg { width: 16px; height: 16px; }
.btx-wc-btn--stop { background: #FEE2E2; color: #DC2626; }
.btx-wc-btn--stop:hover { background: #FECACA; opacity: 1; }
.btx-wc-btn--ghost { background: #ecedef; color: #1d1d1f; }

/* ── Индикатор разговора ─────────────────────────────────────────────────── */
.btx-wc-live { display: flex; align-items: center; gap: 14px; padding: 4px 0 12px; }
.btx-wc-orb {
    position: relative; flex-shrink: 0;
    width: 56px; height: 56px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #eff4ff; color: #007AFF;
}
.btx-wc-orb svg { width: 24px; height: 24px; position: relative; z-index: 1; }
.btx-wc-orb::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid #007AFF; opacity: 0;
}
.btx-wc-orb[data-state="listening"]::after { animation: btx-wc-pulse 1.6s ease-out infinite; }
.btx-wc-orb[data-state="speaking"] { background: #007AFF; color: #fff; }
.btx-wc-orb[data-state="ended"], .btx-wc-orb[data-state="error"] { background: #f0f0f2; color: #8E8E93; }

.btx-wc-bars { display: none; gap: 3px; align-items: center; height: 22px; position: relative; z-index: 1; }
.btx-wc-bars i { display: block; width: 3px; height: 8px; border-radius: 2px; background: currentColor; }
.btx-wc-orb[data-state="speaking"] .btx-wc-mic { display: none; }
.btx-wc-orb[data-state="speaking"] .btx-wc-bars { display: inline-flex; }
.btx-wc-orb[data-state="speaking"] .btx-wc-bars i { animation: btx-wc-bar .9s ease-in-out infinite; }
.btx-wc-orb[data-state="speaking"] .btx-wc-bars i:nth-child(2) { animation-delay: .15s; }
.btx-wc-orb[data-state="speaking"] .btx-wc-bars i:nth-child(3) { animation-delay: .3s; }

.btx-wc-state { font-size: 15px; font-weight: 600; }
.btx-wc-state-sub { font-size: 12px; color: #8E8E93; margin-top: 2px; }

@keyframes btx-wc-pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.45); opacity: 0; } }
@keyframes btx-wc-bar { 0%, 100% { height: 6px; } 50% { height: 20px; } }

/* ── Расшифровка ─────────────────────────────────────────────────────────── */
.btx-wc-log {
    max-height: 300px; overflow-y: auto;
    border-top: 1px solid rgba(60, 60, 67, .08);
    padding-top: 10px;
    display: flex; flex-direction: column; gap: 8px;
}
.btx-wc-log:empty { display: none; }
.btx-wc-line { font-size: 14px; line-height: 1.45; }
.btx-wc-line b { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase;
                 letter-spacing: .3px; color: #8E8E93; margin-bottom: 1px; }
.btx-wc-line--user { color: #1d1d1f; }
.btx-wc-line--bot { color: #1d1d1f; background: #f5f5f7; border-radius: 10px; padding: 8px 10px; }

.btx-wc-msg { font-size: 14px; line-height: 1.45; color: #1d1d1f; margin-bottom: 4px; }
.btx-wc-link { color: #007AFF; font-weight: 600; text-decoration: none; }
.btx-wc-link:hover { text-decoration: underline; }
.btx-wc-line--link { font-size: 14px; padding: 2px 10px; }
.btx-wc-msg--error { color: #DC2626; }

@media (max-width: 767px) {
    .btx-wc-overlay {
        align-items: center;
        padding-bottom: calc(var(--mobile-nav-offset, 116px) + 16px + env(safe-area-inset-bottom, 0px));
    }
    .btx-wc-modal {
        max-height: calc(100vh - var(--mobile-nav-offset, 116px) - 48px);
        border-radius: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btx-wc-orb::after, .btx-wc-bars i { animation: none; }
}