/*
 * Portal Chat 3D — фронтовый виджет.
 * Важно: все классы с префиксом wpcp- чтобы не конфликтовать с темой.
 */

.wpcp-widget,
.wpcp-widget * {
    box-sizing: border-box;
}

.wpcp-widget {
    position: fixed;
    bottom: var(--wpcp-offset-y, 22px);
    right: var(--wpcp-offset-x, 22px);
    z-index: 999999;

    font-family: var(--wpcp-font-family, "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
    font-size: var(--wpcp-font-size, 13px);

    --wpcp-accent: #6d28d9;
    --wpcp-bg: rgba(17, 24, 39, 0.78);
    --wpcp-glass: rgba(255, 255, 255, 0.08);
    --wpcp-border: rgba(255, 255, 255, 0.16);
    --wpcp-border-soft: rgba(255, 255, 255, 0.14);
    --wpcp-border-strong: rgba(255, 255, 255, 0.22);
    --wpcp-text: rgba(255, 255, 255, 0.92);
    --wpcp-muted: rgba(255, 255, 255, 0.68);
    --wpcp-shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
    --wpcp-shadow-soft: 0 10px 26px rgba(0, 0, 0, 0.28);

    --wpcp-panel-bg-top: rgba(17, 24, 39, 0.82);
    --wpcp-panel-bg-bottom: rgba(17, 24, 39, 0.70);
    --wpcp-label-bg: rgba(17, 24, 39, 0.78);

    --wpcp-bubble-size: 64px;
    --wpcp-bubble-radius: 22px;
    --wpcp-panel-width: 360px;
    --wpcp-panel-radius: 20px;
    --wpcp-panel-max-height: 360px;
}

.wpcp-widget.wpcp-pos-bl {
    left: var(--wpcp-offset-x, 22px);
    right: auto;
}

.wpcp-bubble {
    all: unset;
    cursor: pointer;
    display: grid;
    place-items: center;

    width: var(--wpcp-bubble-size, 64px);
    height: var(--wpcp-bubble-size, 64px);
    border-radius: var(--wpcp-bubble-radius, 22px);

    /* Без color-mix — чтобы стабильно работало во всех браузерах */
    background:
        radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.08) 40%, rgba(0,0,0,0.0) 70%),
        linear-gradient(145deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 35%, rgba(0,0,0,0.0) 100%),
        linear-gradient(135deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.0) 45%, rgba(0,0,0,0.22) 100%),
        var(--wpcp-accent);

    box-shadow:
        0 14px 30px rgba(0,0,0,0.35),
        0 2px 0 rgba(255,255,255,0.22) inset,
        0 -10px 20px rgba(0,0,0,0.20) inset;

    transform: translateZ(0);
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
    user-select: none;
}

.wpcp-bubble:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 18px 40px rgba(0,0,0,0.42),
        0 2px 0 rgba(255,255,255,0.22) inset,
        0 -10px 20px rgba(0,0,0,0.22) inset;
    filter: saturate(1.05);
}

.wpcp-bubble:active {
    transform: translateY(0) scale(0.99);
}

.wpcp-bubble__icon {
    width: 26px;
    height: 26px;
    display: block;
    color: rgba(255,255,255,0.96);
}

.wpcp-bubble__label {
    position: absolute;
    right: calc(var(--wpcp-bubble-size, 64px) + 14px);
    bottom: 10px;
    padding: 8px 10px;

    background: var(--wpcp-label-bg, rgba(17, 24, 39, 0.78));
    border: 1px solid var(--wpcp-border-soft, rgba(255,255,255,0.14));
    border-radius: 14px;

    color: var(--wpcp-text, rgba(255,255,255,0.92));
    font-size: 13px;
    line-height: 1;
    box-shadow: var(--wpcp-shadow-soft);

    backdrop-filter: blur(10px);

    opacity: 0;
    transform: translateX(8px);
    transition: opacity 160ms ease, transform 160ms ease;

    pointer-events: none;
}

.wpcp-widget.wpcp-pos-bl .wpcp-bubble__label {
    left: calc(var(--wpcp-bubble-size, 64px) + 14px);
    right: auto;
}

.wpcp-widget.wpcp-open .wpcp-bubble__label {
    opacity: 0;
    transform: translateX(8px);
}

.wpcp-widget:not(.wpcp-open):hover .wpcp-bubble__label {
    opacity: 1;
    transform: translateX(0);
}

.wpcp-panel {
    position: absolute;
    bottom: calc(var(--wpcp-bubble-size, 64px) + 20px);
    right: 0;

    width: var(--wpcp-panel-width, 360px);
    max-width: calc(100vw - 22px - 22px);

    border-radius: var(--wpcp-panel-radius, 20px);
    overflow: hidden;

    background:
        radial-gradient(120% 180% at 10% 0%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.06) 35%, rgba(255,255,255,0.03) 100%),
        linear-gradient(180deg, var(--wpcp-panel-bg-top, rgba(17,24,39,0.82)) 0%, var(--wpcp-panel-bg-bottom, rgba(17,24,39,0.70)) 100%);

    border: 1px solid var(--wpcp-border, rgba(255,255,255,0.16));
    box-shadow: var(--wpcp-shadow);

    backdrop-filter: blur(14px);

    transform: translateY(12px) scale(0.98);
    opacity: 0;
    pointer-events: none;

    transition: transform 180ms ease, opacity 180ms ease;
}

.wpcp-widget.wpcp-pos-bl .wpcp-panel {
    left: 0;
    right: auto;
}

.wpcp-widget.wpcp-open .wpcp-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.wpcp-panel__header {
    padding: 14px 14px 12px 14px;
    background:
        radial-gradient(120% 160% at 20% 0%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.06) 45%, rgba(0,0,0,0.0) 100%),
        linear-gradient(135deg, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.0) 40%, rgba(0,0,0,0.22) 100%),
        var(--wpcp-accent);

    border-bottom: 1px solid var(--wpcp-border, rgba(255,255,255,0.16));
}

.wpcp-panel__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.wpcp-panel__name {
    font-weight: 700;
    font-size: 14px;
    color: rgba(255,255,255,0.96);
    letter-spacing: 0.2px;
}

.wpcp-panel__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 6px 10px;
    border-radius: 999px;

    background: rgba(0,0,0,0.18);
    border: 1px solid var(--wpcp-border-strong, rgba(255,255,255,0.22));

    color: rgba(255,255,255,0.9);
    font-size: 12px;
}

.wpcp-panel__status-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.95);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
}

.wpcp-panel__status.wpcp-offline .wpcp-panel__status-dot {
    background: rgba(248, 113, 113, 0.95);
    box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.20);
}

.wpcp-panel__sub {
    margin-top: 8px;
    font-size: 12px;
    color: rgba(255,255,255,0.78);
}

.wpcp-messages {
    padding: 14px;
    max-height: var(--wpcp-panel-max-height, 360px);
    overflow: auto;

    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wpcp-msg {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.wpcp-msg.wpcp-from-user {
    justify-content: flex-end;
}

.wpcp-msg__bubble {
    max-width: 82%;
    padding: 10px 12px;
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.10);
    border: 1px solid var(--wpcp-border-soft, rgba(255,255,255,0.14));

    color: rgba(255,255,255,0.94);
    font-size: var(--wpcp-font-size, 13px);
    line-height: 1.35;

    box-shadow: 0 12px 22px rgba(0,0,0,0.22);
}

.wpcp-msg.wpcp-from-user .wpcp-msg__bubble {
    background:
        radial-gradient(140% 140% at 20% 10%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.10) 40%, rgba(0,0,0,0) 75%),
        linear-gradient(135deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.0) 42%, rgba(0,0,0,0.24) 100%),
        var(--wpcp-accent);

    border-color: var(--wpcp-border, rgba(255,255,255,0.18));
}

.wpcp-msg__meta {
    margin-top: 6px;
    font-size: 11px;
    color: rgba(255,255,255,0.65);
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.wpcp-offline-banner {
    margin: 0 14px 10px 14px;
    padding: 10px 12px;

    border-radius: 14px;
    background: rgba(0,0,0,0.18);
    border: 1px solid var(--wpcp-border-soft, rgba(255,255,255,0.14));

    color: rgba(255,255,255,0.82);
    font-size: 12px;
}

.wpcp-composer {
    padding: 12px;
    border-top: 1px solid var(--wpcp-border-soft, rgba(255,255,255,0.14));

    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;

    background: rgba(0,0,0,0.14);
}

.wpcp-input {
    width: 100%;
    resize: none;

    padding: 10px 12px;
    border-radius: 14px;

    background: rgba(255,255,255,0.10);
    border: 1px solid var(--wpcp-border, rgba(255,255,255,0.16));

    color: rgba(255,255,255,0.92);
    font-size: var(--wpcp-font-size, 13px);
    outline: none;

    box-shadow: 0 8px 18px rgba(0,0,0,0.22);
}

.wpcp-input::placeholder {
    color: rgba(255,255,255,0.58);
}

.wpcp-send {
    all: unset;
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 14px;
    border-radius: 14px;

    background:
        radial-gradient(120% 140% at 20% 10%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.08) 45%, rgba(0,0,0,0) 100%),
        linear-gradient(135deg, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.0) 40%, rgba(0,0,0,0.22) 100%),
        var(--wpcp-accent);

    border: 1px solid var(--wpcp-border, rgba(255,255,255,0.18));
    color: rgba(255,255,255,0.95);

    font-size: var(--wpcp-font-size, 13px);
    font-weight: 600;

    box-shadow: 0 16px 28px rgba(0,0,0,0.28);

    transition: transform 160ms ease, filter 160ms ease;
}

.wpcp-send:hover {
    transform: translateY(-1px);
    filter: saturate(1.05);
}

.wpcp-send:active {
    transform: translateY(0);
}

.wpcp-footer {
    padding: 10px 14px;
    font-size: 11px;
    color: rgba(255,255,255,0.58);
    border-top: 1px solid rgba(255,255,255,0.10);

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;

    background: rgba(0,0,0,0.10);
}

.wpcp-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wpcp-footer__pill {
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--wpcp-border-soft, rgba(255,255,255,0.14));
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.72);
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

@media (max-width: 480px) {
    .wpcp-panel {
        width: min(var(--wpcp-panel-width, 360px), calc(100vw - 16px - 16px));
        bottom: calc(var(--wpcp-bubble-size, 64px) + 14px);
    }
    .wpcp-widget {
        bottom: var(--wpcp-offset-y, 16px);
        right: var(--wpcp-offset-x, 16px);
    }
    .wpcp-widget.wpcp-pos-bl {
        left: var(--wpcp-offset-x, 16px);
    }
}

/* -------------------- Stage 3: проактивный инвайт -------------------- */

@keyframes wpcpInvitePulse {
    0% { transform: translateZ(0) scale(1); }
    55% { transform: translateZ(0) scale(1.06); }
    100% { transform: translateZ(0) scale(1); }
}

.wpcp-widget.wpcp-has-invite:not(.wpcp-open):not(:hover) .wpcp-bubble {
    animation: wpcpInvitePulse 1.35s ease-in-out infinite;
}

.wpcp-invite {
    position: absolute;
    right: 0;
    bottom: calc(var(--wpcp-bubble-size, 64px) + 14px);

    width: min(320px, calc(100vw - 44px));

    border-radius: 18px;
    border: 1px solid var(--wpcp-border, rgba(255,255,255,0.16));
    background:
        radial-gradient(120% 180% at 10% 0%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.06) 35%, rgba(0,0,0,0.0) 100%),
        linear-gradient(180deg, rgba(17,24,39,0.88) 0%, rgba(17,24,39,0.72) 100%);
    box-shadow: var(--wpcp-shadow);
    backdrop-filter: blur(14px);

    padding: 12px 12px 10px 12px;

    opacity: 0;
    transform: translateY(10px) scale(0.98);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
}

.wpcp-widget.wpcp-pos-bl .wpcp-invite {
    left: 0;
    right: auto;
}

.wpcp-widget.wpcp-has-invite .wpcp-invite {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.wpcp-invite__close {
    all: unset;
    cursor: pointer;
    position: absolute;
    top: 8px;
    right: 10px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 10px;

    background: rgba(0,0,0,0.16);
    border: 1px solid var(--wpcp-border-soft, rgba(255,255,255,0.14));
    color: rgba(255,255,255,0.92);
    font-size: 18px;
    line-height: 1;
    box-shadow: 0 10px 22px rgba(0,0,0,0.26);
}

.wpcp-invite__close:hover {
    filter: saturate(1.05);
}

.wpcp-invite__text {
    padding-right: 34px;
    color: rgba(255,255,255,0.94);
    font-size: 13px;
    line-height: 1.35;
}

.wpcp-invite__actions {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

.wpcp-invite__btn {
    all: unset;
    cursor: pointer;
    flex: 1;
    text-align: center;

    padding: 10px 10px;
    border-radius: 14px;
    border: 1px solid var(--wpcp-border-strong, rgba(255,255,255,0.22));
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.92);
    font-weight: 700;
    box-shadow: 0 14px 30px rgba(0,0,0,0.20);
    transition: transform 160ms ease, filter 160ms ease;
}

.wpcp-invite__btn:hover {
    transform: translateY(-1px);
    filter: saturate(1.05);
}

.wpcp-invite__btn:active {
    transform: translateY(0);
}

.wpcp-invite__btn--ok {
    background:
        radial-gradient(120% 140% at 20% 10%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 45%, rgba(0,0,0,0) 100%),
        linear-gradient(135deg, rgba(109,40,217,0.95) 0%, rgba(56,189,248,0.70) 100%);
}

.wpcp-invite__btn--no {
    background: rgba(0,0,0,0.18);
}

/* ------------------------------
   AI messages (Stage 4)
-------------------------------- */

.wpcp-msg__badge {
    display: inline-block;
    margin: 0 0 6px 0;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.1;
    letter-spacing: .02em;
    opacity: 0.9;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.18);
}

.wpcp-msg__text {
    white-space: pre-wrap;
}

.wpcp-msg.wpcp-from-ai .wpcp-msg__bubble {
    border-color: rgba(255,255,255,0.24);
    background: rgba(255,255,255,0.08);
}