/* Плавающий помощник: кнопка-робот и окно чата. */

.ai-widget {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 10500;
    font-family: inherit;
}

/* ---------------------------------------------------------------- кнопка */

.ai-fab {
    position: relative;
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: linear-gradient(135deg, #4f7fff, #6f5cff 55%, #a03bff);
    box-shadow: 0 12px 28px rgba(79, 127, 255, .42);
    transition: transform .25s ease, box-shadow .25s ease;
    -webkit-tap-highlight-color: transparent;
}

.ai-fab:hover,
.ai-fab:focus-visible {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 18px 34px rgba(79, 127, 255, .55);
}

.ai-fab:active { transform: scale(.96); }

/* волна вокруг кнопки — зовёт нажать, но не мельтешит */
.ai-fab-pulse {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: rgba(111, 92, 255, .35);
    animation: ai-pulse 2.6s ease-out infinite;
    pointer-events: none;
}

@keyframes ai-pulse {
    0%   { transform: scale(.85); opacity: .7; }
    70%  { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}

.ai-bot {
    /* поменьше круга: у робота широко разведены руки, иначе их срезает край */
    position: relative;
    width: 54px;
    height: 58px;
    display: block;
    overflow: visible;
}

.ai-bot-badge {
    font: 700 13px/1 system-ui, sans-serif;
    fill: #ffb547;
    letter-spacing: .5px;
}

/* --- анимации робота --- */

.ai-bot-float   { animation: ai-float 3.2s ease-in-out infinite; transform-origin: 60px 70px; }
.ai-bot-antenna { animation: ai-antenna 3.2s ease-in-out infinite; transform-origin: 60px 34px; }
.ai-bot-eyes    { animation: ai-blink 5.4s infinite; transform-origin: 60px 53px; }
.ai-bot-arm-right { animation: ai-wave 3.2s ease-in-out infinite; transform-origin: 74px 84px; }

@keyframes ai-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

@keyframes ai-antenna {
    0%, 100% { transform: rotate(0deg); }
    35%      { transform: rotate(-9deg); }
    70%      { transform: rotate(6deg); }
}

@keyframes ai-blink {
    0%, 92%, 100% { transform: scaleY(1); }
    95%           { transform: scaleY(.1); }
}

@keyframes ai-wave {
    0%, 60%, 100% { transform: rotate(0deg); }
    70%           { transform: rotate(-22deg); }
    85%           { transform: rotate(8deg); }
}

/* открытое окно — робот замирает, чтобы не отвлекать */
.ai-widget.is-open .ai-fab-pulse { display: none; }
.ai-widget.is-open .ai-bot-arm-right,
.ai-widget.is-open .ai-bot-antenna { animation: none; }

@media (prefers-reduced-motion: reduce) {
    .ai-bot-float, .ai-bot-antenna, .ai-bot-eyes,
    .ai-bot-arm-right, .ai-fab-pulse { animation: none; }
}

/* ------------------------------------------------------------------ окно */

.ai-panel {
    position: absolute;
    right: 0;
    bottom: 90px;
    width: 370px;
    max-width: calc(100vw - 32px);
    height: 520px;
    max-height: calc(100vh - 140px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .1);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
    transform: translateY(14px) scale(.97);
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
}

.ai-panel[hidden] { display: none; }
.ai-panel.is-visible { opacity: 1; transform: none; }

[data-theme="dark"] .ai-panel {
    background: #161d2e;
    border-color: rgba(255, 255, 255, .12);
}

.ai-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    color: #fff;
    background: linear-gradient(135deg, #4f7fff, #6f5cff 55%, #a03bff);
}

.ai-panel-avatar {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    display: grid;
    place-items: center;
}

.ai-panel-avatar svg { width: 30px; height: 30px; }

.ai-panel-title { line-height: 1.2; flex: 1; min-width: 0; }
.ai-panel-title b { font-size: 15px; }
.ai-panel-title small { display: block; font-size: 12px; opacity: .9; }

.ai-dot-online {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 5px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, .7);
    animation: ai-online 2s infinite;
}

@keyframes ai-online {
    70%  { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.ai-panel-close {
    border: none;
    background: none;
    color: #fff;
    font-size: 26px;
    line-height: 1;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    cursor: pointer;
}

.ai-panel-close:hover { background: rgba(255, 255, 255, .18); }

/* --------------------------------------------------------------- диалог */

.ai-log {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f5f7fb;
    -webkit-overflow-scrolling: touch;
}

[data-theme="dark"] .ai-log { background: #101728; }

.ai-msg {
    max-width: 84%;
    padding: 10px 13px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.45;
    word-wrap: break-word;
    animation: ai-appear .22s ease;
}

@keyframes ai-appear {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.ai-msg-bot {
    align-self: flex-start;
    background: #fff;
    color: #1e293b;
    border-bottom-left-radius: 5px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}

.ai-msg-user {
    align-self: flex-end;
    background: linear-gradient(135deg, #4f7fff, #6f5cff);
    color: #fff;
    border-bottom-right-radius: 5px;
}

[data-theme="dark"] .ai-msg-bot { background: #1e2740; color: #e2e8f0; }

.ai-msg b { font-weight: 600; }

.ai-time {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    opacity: .6;
}

/* «печатает…» */
.ai-typing { display: flex; gap: 4px; align-items: center; padding: 13px; }

.ai-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #94a3b8;
    animation: ai-typing 1.3s infinite;
}

.ai-typing span:nth-child(2) { animation-delay: .18s; }
.ai-typing span:nth-child(3) { animation-delay: .36s; }

@keyframes ai-typing {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30%           { transform: translateY(-5px); opacity: 1; }
}

/* ------------------------------------------------------------- подсказки */

.ai-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 12px 8px;
    background: #f5f7fb;
}

[data-theme="dark"] .ai-chips { background: #101728; }

.ai-chip {
    border: 1px solid rgba(79, 127, 255, .4);
    background: rgba(79, 127, 255, .08);
    color: #4f7fff;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 12.5px;
    cursor: pointer;
    transition: background .15s ease;
}

.ai-chip:hover { background: rgba(79, 127, 255, .18); }

/* ----------------------------------------------------------------- ввод */

.ai-form {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid rgba(15, 23, 42, .08);
    background: #fff;
}

[data-theme="dark"] .ai-form {
    background: #161d2e;
    border-top-color: rgba(255, 255, 255, .1);
}

.ai-input {
    flex: 1;
    min-width: 0;
    border: 1px solid rgba(15, 23, 42, .15);
    border-radius: 22px;
    padding: 10px 14px;
    /* 16px — иначе iOS зумит страницу при фокусе */
    font-size: 16px;
    background: #fff;
    color: #1e293b;
}

[data-theme="dark"] .ai-input {
    background: #0f1626;
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, .15);
}

.ai-input:focus { outline: 2px solid rgba(79, 127, 255, .5); outline-offset: 1px; }

.ai-send {
    flex: none;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #4f7fff, #6f5cff);
    display: grid;
    place-items: center;
}

.ai-send svg { width: 19px; height: 19px; }
.ai-send:disabled { opacity: .5; cursor: default; }

/* -------------------------------------------------------------- телефон */

@media (max-width: 576px) {
    .ai-widget { right: 14px; bottom: 14px; }

    .ai-fab { width: 62px; height: 62px; }
    .ai-bot { width: 46px; height: 49px; }

    .ai-panel {
        position: fixed;
        right: 8px;
        left: 8px;
        bottom: 84px;
        width: auto;
        height: min(74vh, 520px);
    }
}