/* Chat widget «Сделано» — launcher, panel, feed, calc card, lead mini-form.
   Reference look: concepts/chat-widget.html. Colors come from base.css tokens; the only
   widget-local values are the user/assistant bubble fills below (base.css has no such case:
   its panels always sit on a tinted page, the chat panel is solid --bg-soft). */

.chat-launcher, .chat-panel, .chat-inline {
    --chat-user-bg: rgba(138, 99, 255, .20);
    --chat-user-stroke: rgba(138, 99, 255, .38);
    --chat-bot-bg: var(--glass-hi);
    --chat-link: var(--cyan);
}
/* Light theme: --glass/--glass-hi are translucent white and vanish on the white panel,
   so assistant bubbles and chips get their own opaque fill. */
[data-theme="light"] .chat-launcher, [data-theme="light"] .chat-panel, [data-theme="light"] .chat-inline {
    --chat-user-bg: rgba(109, 59, 255, .12);
    --chat-user-stroke: rgba(109, 59, 255, .30);
    --chat-bot-bg: #F1EFF8;
    --chat-link: var(--violet);
}

/* ── launcher ── */
.chat-launcher {
    position: fixed; right: 26px; bottom: 26px; z-index: 180;
    display: inline-flex; align-items: center; gap: 11px;
    padding: 11px 20px 11px 13px; border-radius: 999px; border: 1px solid var(--stroke);
    background: var(--nav-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--float-shadow); color: var(--white);
    font: 600 15px/1.2 var(--font-b); cursor: pointer;
    transition: transform .3s var(--ease);
}
.chat-launcher:hover { transform: translateY(-2px); }
.chat-launcher[hidden] { display: none; }
.chat-launcher__pulse {
    position: absolute; inset: -1px; border-radius: 999px; border: 1px solid var(--violet);
    opacity: 0; pointer-events: none; animation: chat-pulse 3.4s var(--ease) infinite;
}
@keyframes chat-pulse { 0% { opacity: .55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.14); } }
.chat-ava {
    width: 30px; height: 30px; border-radius: 27%; flex: none; display: block;
}

/* ── panel ── */
.chat-panel {
    position: fixed; right: 26px; bottom: 26px; z-index: 210;
    width: 410px; max-width: calc(100vw - 32px); height: min(660px, calc(100vh - 130px));
    display: flex; flex-direction: column; overflow: hidden;
    border-radius: 26px; border: 1px solid var(--stroke);
    background: var(--bg-soft); color: var(--white); box-shadow: var(--card-shadow);
    font-family: var(--font-b);
    transform-origin: bottom right;
    transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.chat-panel[hidden] { display: none; }
.chat-panel.is-entering { opacity: 0; transform: translateY(14px) scale(.96); }
.chat-panel::before {
    content: ""; position: absolute; inset: -1px; border-radius: 27px; padding: 1px; pointer-events: none;
    background: conic-gradient(from 210deg, rgba(53, 214, 255, .55), rgba(138, 99, 255, .55), rgba(255, 92, 77, .35), rgba(53, 214, 255, .55));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55;
}
.chat-panel button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.chat-head {
    display: flex; align-items: center; gap: 11px; padding: 14px 16px;
    border-bottom: 1px solid var(--stroke); background: var(--glass);
}
.chat-head .chat-ava { width: 36px; height: 36px; }
.chat-head h2 { font: 600 15px/1.3 var(--font-b); margin: 0; }
/* Small text on --dim, not --faint: --faint gives ~3.1 contrast, norm is 4.5. */
.chat-head small { display: block; font-size: 12.5px; color: var(--dim); font-weight: 500; }
.chat-head__sp { flex: 1; }
.chat-panel .chat-close {
    width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    color: var(--dim); border: 1px solid transparent;
}
.chat-panel .chat-close:hover { color: var(--white); border-color: var(--stroke); }
.chat-close svg { width: 16px; height: 16px; }

/* Feed is a scrolling flex column: every block in it needs flex:none, otherwise a block
   with overflow:hidden (the calc card) shrinks to a strip when the feed overflows. */
.chat-feed {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin;
}
.chat-feed > * { flex: none; }
.chat-feed::-webkit-scrollbar { width: 6px; }
.chat-feed::-webkit-scrollbar-thumb { background: var(--stroke); border-radius: 3px; }

.chat-msg {
    align-self: flex-start; max-width: 88%; padding: 11px 15px;
    font-size: 15.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
    border: 1px solid var(--stroke); background: var(--chat-bot-bg);
    border-radius: 18px 18px 18px 5px; animation: chat-pop .34s var(--ease) both;
}
.chat-msg b { font-weight: 600; }
.chat-msg a { color: var(--chat-link); text-decoration: underline; }
.chat-msg.is-me {
    align-self: flex-end; background: var(--chat-user-bg); border-color: var(--chat-user-stroke);
    border-radius: 18px 18px 5px 18px;
}
.chat-msg.is-sys {
    align-self: center; max-width: 100%; text-align: center; font-size: 13px; color: var(--dim);
    background: none; border: 0; padding: 4px 0;
}
.chat-typing { display: inline-flex; gap: 4px; align-items: center; padding: 14px 16px; }
.chat-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); animation: chat-blink 1.3s infinite; }
.chat-typing i:nth-child(2) { animation-delay: .18s; }
.chat-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes chat-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes chat-blink { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* ── calc / offer card: drawn from tool JSON, never parsed from model text ── */
.chat-calc {
    align-self: flex-start; width: 96%; border: 1px solid var(--stroke); border-radius: 18px;
    overflow: hidden; background: var(--glass-hi); animation: chat-pop .34s var(--ease) both;
}
[data-theme="light"] .chat-calc { background: rgba(109, 59, 255, .07); }
.chat-calc header { padding: 11px 15px 9px; border-bottom: 1px solid var(--stroke); }
.chat-calc header span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.chat-calc ul { list-style: none; margin: 0; padding: 6px 15px 10px; }
.chat-calc li {
    display: flex; justify-content: space-between; gap: 12px; padding: 6px 0;
    font-size: 14.5px; border-bottom: 1px solid var(--stroke);
}
.chat-calc li:last-child { border: 0; }
.chat-calc li > span { color: var(--dim); }
.chat-calc li b { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.chat-calc li b span { white-space: nowrap; } /* amounts never break inside «298 800 ₽/год» */
.chat-calc .is-hi b { font-family: var(--font-d); font-size: 17px; white-space: nowrap; }
.chat-calc footer {
    padding: 9px 15px 12px; font-size: 12.5px; color: var(--dim);
    display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap;
}
.chat-calc footer a { color: var(--chat-link); font-weight: 600; }

/* ── lead mini-form ── */
.chat-lead {
    align-self: stretch; border: 1px solid var(--chat-user-stroke); background: var(--chat-user-bg);
    border-radius: 18px; padding: 14px 15px; animation: chat-pop .34s var(--ease) both;
}
.chat-lead h3, .chat-done h3 { font: 600 15px/1.3 var(--font-d); margin: 0 0 4px; }
.chat-lead p { font-size: 13.5px; color: var(--dim); margin: 0 0 11px; }
.chat-lead input[type=text] {
    width: 100%; margin-bottom: 8px; padding: 10px 13px; border-radius: 12px; border: 1px solid var(--stroke);
    background: var(--bg); color: var(--white); font: inherit; font-size: 14.5px;
}
.chat-lead input::placeholder { color: var(--dim); }
.chat-lead label { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--dim); margin: 4px 0 12px; cursor: pointer; }
.chat-lead label input { margin-top: 3px; accent-color: var(--violet); flex: none; }
.chat-lead label a { color: inherit; text-decoration: underline; }
.chat-panel .chat-lead__go, .call .chat-lead__go {
    width: 100%; background: var(--btn-bg); color: var(--btn-fg); border-radius: 12px;
    padding: 11px; font-weight: 600; font-size: 15px;
}
.chat-panel .chat-lead__go:disabled, .call .chat-lead__go:disabled { opacity: .45; cursor: not-allowed; }
.chat-lead__err { font-size: 13px; color: var(--coral); margin: 8px 0 0; }
.chat-lead__err:empty { display: none; }

.chat-done {
    align-self: stretch; border: 1px solid var(--stroke); border-radius: 18px; padding: 16px;
    text-align: center; background: var(--chat-bot-bg); animation: chat-pop .34s var(--ease) both;
}
.chat-done__tick { width: 40px; height: 40px; border-radius: 50%; margin: 0 auto 9px; display: grid; place-items: center; background: var(--grad-money); }
.chat-done__tick svg { width: 19px; height: 19px; color: #08070E; }
.chat-done p { font-size: 13.5px; color: var(--dim); margin: 0; }

/* ── chips ── */
.chat-chips { display: flex; gap: 7px; flex-wrap: wrap; padding: 6px 16px 0; }
.chat-chips:empty { display: none; }
.chat-panel .chat-chips > * {
    display: inline-flex; align-items: center;
    border: 1px solid var(--stroke); border-radius: 999px; padding: 7px 14px;
    font-size: 13.5px; line-height: 1.3; color: var(--dim); background: var(--chat-bot-bg);
    text-decoration: none;
}
.chat-panel .chat-chips > *:hover { color: var(--white); border-color: var(--violet); }

/* ── composer ── */
.chat-foot { padding: 11px 14px 13px; border-top: 1px solid var(--stroke); background: var(--glass); }
.chat-composer { display: flex; gap: 8px; align-items: flex-end; margin: 0; }
.chat-composer textarea {
    flex: 1; resize: none; min-height: 46px; max-height: 110px; overflow-y: auto;
    padding: 11px 14px; border-radius: 16px; border: 1px solid var(--stroke);
    background: var(--bg); color: var(--white); font: inherit; font-size: 15px; line-height: 1.45;
}
.chat-composer textarea::placeholder { color: var(--dim); }
.chat-panel .chat-send {
    width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: var(--btn-bg); color: var(--btn-fg);
}
.chat-panel .chat-send:disabled { opacity: .45; cursor: not-allowed; }
.chat-send svg { width: 17px; height: 17px; }
/* ── voice: mic, level bars, «без звука» ── */
.chat-panel .chat-mic {
    width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center;
    border: 1px solid var(--stroke); background: var(--bg); color: var(--dim);
    touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.chat-panel .chat-mic:hover { color: var(--white); border-color: var(--violet); }
.chat-panel .chat-mic.is-rec { background: var(--violet); border-color: var(--violet); color: #fff; }
.chat-panel .chat-mute {
    width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--dim);
}
.chat-panel .chat-mute:hover { color: var(--white); }
.chat-panel .chat-mic[hidden], .chat-panel .chat-mute[hidden] { display: none; }
.chat-mic svg, .chat-mute svg { width: 18px; height: 18px; }
.chat-mute .x, .chat-mute[aria-pressed="true"] .w { display: none; }
.chat-mute[aria-pressed="true"] .x { display: inline; }
.chat-voice {
    display: none; flex: 1; min-height: 46px; align-items: center; gap: 10px; padding: 0 14px;
    border-radius: 16px; border: 1px solid var(--stroke); background: var(--bg); color: var(--white); font-size: 15px;
}
.chat-composer.is-voice textarea { display: none; }
.chat-composer.is-voice .chat-voice { display: flex; }
.chat-voice__lvl { display: inline-flex; gap: 3px; align-items: center; height: 22px; }
.chat-voice__lvl i {
    width: 3px; height: 100%; border-radius: 2px; background: var(--violet);
    transform: scaleY(calc(.15 + var(--lvl, 0) * var(--k, .8))); transition: transform .08s linear;
}
.chat-voice__lvl i:nth-child(1), .chat-voice__lvl i:nth-child(5) { --k: .45; }
.chat-voice__lvl i:nth-child(3) { --k: .85; }
.chat-voice:not([data-state="listen"]) .chat-voice__lvl i { animation: chat-voice-wait 1.1s ease-in-out infinite; }
.chat-voice:not([data-state="listen"]) .chat-voice__lvl i:nth-child(2n) { animation-delay: .2s; }
@keyframes chat-voice-wait { 0%, 100% { transform: scaleY(.25); opacity: .5; } 50% { transform: scaleY(.6); opacity: 1; } }
.chat-voice__time { margin-left: auto; font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
/* Legal line must be readable: --dim, not --faint (3.1 contrast). */
.chat-legal { margin: 8px 0 0; font-size: 11.5px; color: var(--dim); text-align: center; line-height: 1.45; }
.chat-legal a { color: var(--dim); text-decoration: underline; }

/* ── «third door» inside #cta: shown only once chat.js is up ── */
.chat-inline { display: none; }
.chat-ready .chat-inline {
    display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
    margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--stroke);
}
.chat-inline p { font-size: 15px; color: var(--dim); flex: 1; min-width: 220px; margin: 0; }
.chat-inline button {
    display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
    border: 1px solid var(--chat-user-stroke); background: var(--chat-user-bg); color: var(--white);
    border-radius: 999px; padding: 11px 20px; font: 600 15px/1.2 var(--font-b);
}

/* Mobile: the panel is full-screen, so page scroll is locked while it is open
   (otherwise iOS scrolls the page under the panel). Desktop never locks. */
@media (max-width: 560px) {
    .chat-panel {
        inset: 0; width: 100%; max-width: 100%; height: 100dvh; border-radius: 0;
        border: 0;
    }
    .chat-panel::before { display: none; }
    .chat-launcher { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
    .chat-foot { padding-bottom: calc(13px + env(safe-area-inset-bottom, 0px)); }
    .chat-composer textarea { font-size: 16px; } /* no iOS zoom-on-focus */
    html.chat-lock, html.chat-lock body { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
    .chat-launcher__pulse, .chat-typing i, .chat-voice__lvl i { animation: none; transition: none; }
    .chat-msg, .chat-calc, .chat-lead, .chat-done { animation: none; }
    .chat-panel { transition: none; }
}