.chaty-root {
    --chaty-neon-cyan: #00f5ff;
    --chaty-neon-magenta: #ff00e5;
    --chaty-neon-violet: #a855f7;
    --chaty-neon-lime: #39ff14;
    --chaty-glass: rgba(12, 18, 36, 0.55);
    --chaty-glass-light: rgba(255, 255, 255, 0.12);
    --chaty-glass-border: rgba(0, 245, 255, 0.35);
    --chaty-text: #f0f9ff;
    --chaty-text-muted: rgba(240, 249, 255, 0.72);
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 10050;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.chaty-teaser {
    position: absolute;
    right: 82px;
    bottom: 20px;
    max-width: 200px;
    padding: 10px 16px;
    border-radius: 16px 16px 4px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #fff;
    background: linear-gradient(
        135deg,
        rgba(65, 105, 225, 0.55) 0%,
        rgba(12, 18, 36, 0.72) 55%,
        rgba(168, 85, 247, 0.35) 100%
    );
    backdrop-filter: blur(20px) saturate(200%);
    -webkit-backdrop-filter: blur(20px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow:
        0 0 24px rgba(0, 245, 255, 0.4),
        0 0 48px rgba(255, 0, 229, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    opacity: 0;
    transform: translateX(8px) scale(0.92);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    white-space: nowrap;
}

.chaty-teaser.is-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.chaty-teaser::after {
    content: '';
    position: absolute;
    right: -6px;
    bottom: 14px;
    width: 12px;
    height: 12px;
    background: var(--chaty-glass);
    border-right: 1px solid var(--chaty-glass-border);
    border-bottom: 1px solid var(--chaty-glass-border);
    transform: rotate(-45deg);
    box-shadow: 4px 0 12px rgba(0, 245, 255, 0.3);
}

.chaty-launcher {
    position: relative;
    width: 72px;
    height: 72px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
    isolation: isolate;
}

.chaty-orbit {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.chaty-orbit--outer {
    inset: -12px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg 55deg,
        rgba(0, 245, 255, 0.95) 70deg,
        rgba(125, 249, 255, 0.5) 95deg,
        transparent 120deg 175deg,
        rgba(168, 85, 247, 0.85) 195deg,
        rgba(255, 0, 229, 0.45) 220deg,
        transparent 250deg 310deg,
        rgba(57, 255, 20, 0.7) 325deg,
        transparent 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    filter: blur(0.4px) drop-shadow(0 0 8px rgba(0, 245, 255, 0.65));
    animation: chaty-orbit-ccw 2.4s linear infinite;
}

.chaty-orbit--inner {
    inset: -6px;
    background: conic-gradient(
        from 180deg,
        transparent 0deg 40deg,
        rgba(0, 212, 255, 0.8) 55deg,
        transparent 90deg 150deg,
        rgba(65, 105, 225, 0.9) 165deg,
        transparent 200deg 280deg,
        rgba(125, 249, 255, 0.75) 300deg,
        transparent 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    opacity: 0.85;
    animation: chaty-orbit-ccw 3.6s linear infinite;
}

.chaty-launcher-glass {
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    z-index: 1;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(65, 105, 225, 0.12) 40%,
        rgba(15, 23, 42, 0.35) 100%
    );
    backdrop-filter: blur(10px) saturate(200%);
    -webkit-backdrop-filter: blur(10px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow:
        inset 0 2px 12px rgba(255, 255, 255, 0.2),
        inset 0 -4px 16px rgba(30, 58, 138, 0.45),
        0 8px 28px rgba(65, 105, 225, 0.45),
        0 0 40px rgba(0, 245, 255, 0.25);
    animation: chaty-glass-pulse 4s ease-in-out infinite;
}

.chaty-launcher img {
    position: relative;
    z-index: 2;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}

@keyframes chaty-orbit-ccw {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

@keyframes chaty-glass-pulse {
    0%, 100% {
        box-shadow:
            inset 0 2px 12px rgba(255, 255, 255, 0.22),
            inset 0 -4px 16px rgba(30, 58, 138, 0.4),
            0 8px 24px rgba(65, 105, 225, 0.4),
            0 0 32px rgba(0, 245, 255, 0.2);
    }
    50% {
        box-shadow:
            inset 0 2px 16px rgba(255, 255, 255, 0.32),
            inset 0 -4px 20px rgba(30, 58, 138, 0.55),
            0 10px 36px rgba(65, 105, 225, 0.55),
            0 0 48px rgba(255, 0, 229, 0.18),
            0 0 56px rgba(0, 245, 255, 0.35);
    }
}

.chaty-launcher:hover {
    transform: scale(1.08);
}

.chaty-launcher:hover .chaty-orbit--outer {
    filter: blur(0.3px) drop-shadow(0 0 14px rgba(0, 245, 255, 0.9));
}

.chaty-launcher:hover .chaty-launcher-glass {
    border-color: rgba(125, 249, 255, 0.45);
}

.chaty-panel {
    display: none;
    position: absolute;
    right: 0;
    bottom: 80px;
    width: min(380px, calc(100vw - 40px));
    height: min(520px, calc(100vh - 120px));
    background: var(--chaty-glass);
    backdrop-filter: blur(22px) saturate(190%);
    -webkit-backdrop-filter: blur(22px) saturate(190%);
    border-radius: 20px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--chaty-glass-border);
    box-shadow:
        0 0 40px rgba(0, 245, 255, 0.25),
        0 0 80px rgba(255, 0, 229, 0.15),
        0 24px 64px rgba(0, 0, 0, 0.45);
}

.chaty-root.is-open .chaty-panel {
    display: flex;
}

.chaty-root.is-open .chaty-teaser {
    display: none;
}

.chaty-root.is-open .chaty-launcher {
    transform: scale(0.92);
}

.chaty-root.is-open .chaty-orbit {
    animation-play-state: paused;
    opacity: 0.35;
}

.chaty-root.is-open .chaty-launcher-glass {
    animation-play-state: paused;
}

.chaty-header {
    background: linear-gradient(
        135deg,
        rgba(65, 105, 225, 0.65) 0%,
        rgba(168, 85, 247, 0.5) 42%,
        rgba(255, 0, 229, 0.35) 72%,
        rgba(0, 245, 255, 0.4) 100%
    );
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    color: var(--chaty-text);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid rgba(0, 245, 255, 0.3);
    box-shadow: 0 4px 24px rgba(255, 0, 229, 0.2);
}

.chaty-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    text-shadow: 0 0 12px rgba(0, 245, 255, 0.8);
}

.chaty-header p {
    margin: 2px 0 0;
    font-size: 0.72rem;
    color: var(--chaty-text-muted);
}

.chaty-close {
    background: var(--chaty-glass-light);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--chaty-text);
    width: 32px;
    height: 32px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    transition: background 0.15s, box-shadow 0.15s;
}

.chaty-close:hover {
    background: rgba(255, 0, 229, 0.35);
    box-shadow: 0 0 12px rgba(255, 0, 229, 0.5);
}

.chaty-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    background: rgba(8, 12, 28, 0.35);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chaty-msg {
    max-width: 88%;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 0.88rem;
    line-height: 1.45;
    word-break: break-word;
}

.chaty-msg--bot {
    align-self: flex-start;
    background: rgba(168, 85, 247, 0.25);
    color: var(--chaty-text);
    border: 1px solid rgba(168, 85, 247, 0.45);
    border-bottom-left-radius: 4px;
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.25);
}

.chaty-msg--user {
    align-self: flex-end;
    background: rgba(0, 245, 255, 0.18);
    color: var(--chaty-text);
    border: 1px solid rgba(0, 245, 255, 0.5);
    border-bottom-right-radius: 4px;
    box-shadow: 0 0 16px rgba(0, 245, 255, 0.35);
}

.chaty-msg--typing {
    opacity: 0.75;
    font-style: italic;
    color: var(--chaty-neon-cyan);
}

.chaty-footer {
    padding: 10px 12px 12px;
    border-top: 1px solid rgba(0, 245, 255, 0.25);
    background: rgba(8, 12, 28, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.chaty-input-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.chaty-input {
    flex: 1;
    border: 1px solid rgba(0, 245, 255, 0.4);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 0.9rem;
    font-family: inherit;
    resize: none;
    min-height: 42px;
    max-height: 100px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--chaty-text);
}

.chaty-input::placeholder {
    color: rgba(240, 249, 255, 0.45);
}

.chaty-input:focus {
    outline: none;
    border-color: var(--chaty-neon-magenta);
    box-shadow:
        0 0 0 2px rgba(255, 0, 229, 0.25),
        0 0 20px rgba(0, 245, 255, 0.35);
}

.chaty-send {
    border: 1px solid rgba(0, 245, 255, 0.6);
    background: linear-gradient(135deg, rgba(255, 0, 229, 0.7), rgba(168, 85, 247, 0.8));
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 0 18px rgba(255, 0, 229, 0.45);
    transition: transform 0.15s, box-shadow 0.15s;
}

.chaty-send:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 0 24px rgba(0, 245, 255, 0.55);
}

.chaty-send:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.chaty-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

.chaty-end-btn {
    background: none;
    border: none;
    color: var(--chaty-neon-cyan);
    font-size: 0.75rem;
    cursor: pointer;
    text-decoration: underline;
    text-shadow: 0 0 8px rgba(0, 245, 255, 0.5);
}

.chaty-end-btn:hover {
    color: var(--chaty-neon-lime);
}

@media (max-width: 480px) {
    .chaty-root {
        right: 12px;
        bottom: 12px;
    }
    .chaty-panel {
        width: calc(100vw - 24px);
        height: min(70vh, 480px);
    }
    .chaty-teaser {
        right: 72px;
        max-width: 160px;
        font-size: 0.75rem;
    }
}