/* ═══════════════════════════════════════════════════════ */
/*  iOAgent — Design System                               */
/*  Keep this lean: custom utilities, animations, effects  */
/*  Tailwind handles layout/spacing; this handles polish.  */
/* ═══════════════════════════════════════════════════════ */

/* Slow-spinning gear for CTA buttons */
.io-spin-slow {
    animation: io-gear-spin 8s linear infinite;
}

@keyframes io-gear-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ── Scrollbar-hide: nasconde la barra degli esempi swipabili ── */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* ── Three-gear button cluster (Avvia iOBuild) ── */
.io-gear-1 {
    animation: io-gear-spin 6s linear infinite reverse;
}

.io-gear-2 {
    animation: io-gear-spin 4s linear infinite;
}

.io-gear-3 {
    animation: io-gear-spin 5s linear infinite reverse;
}

/* Speed up on hover for that "activation" feel */
#flow-generate-btn:hover .io-gear-1 {
    animation-duration: 1.5s;
}

#flow-generate-btn:hover .io-gear-2 {
    animation-duration: 1s;
}

#flow-generate-btn:hover .io-gear-3 {
    animation-duration: 1.2s;
}

/* ── Selection & scrollbar ──────────────────────────── */
::selection {
    background: #8c25f4;
    color: #fff;
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #050505;
}

::-webkit-scrollbar-thumb {
    background: #1f142b;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #8c25f4;
}

/* ── Gradient text ──────────────────────────────────── */
.text-gradient-primary {
    background: linear-gradient(90deg, #8c25f4, #d8b4fe, #8c25f4);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 4s ease-in-out infinite;
}

@keyframes gradient-shift {

    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

/* ── Hero mesh effect ───────────────────────────────── */
.hero-mesh {
    background-image:
        radial-gradient(circle at 25% 25%, rgba(140, 37, 244, .1) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(140, 37, 244, .08) 0%, transparent 50%);
    background-size: 60px 60px, 80px 80px;
}

/* ── Scroll Reveal ──────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── CTA Glow Pulse (very subtle) ───────────────────── */
.cta-glow {
    position: relative;
}

.cta-glow::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(140, 37, 244, .4), transparent);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
}

.cta-glow:hover::after {
    opacity: 1;
    animation: glow-breath 2s ease-in-out infinite;
}

@keyframes glow-breath {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.02);
    }
}

/* ── Hero CTA — Interactive shimmer ────────────────── */
.hero-cta-primary {
    position: relative;
    overflow: hidden;
}

.hero-cta-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 80%;
    height: 100%;
    background: linear-gradient(105deg,
            transparent 30%,
            rgba(255, 255, 255, 0.15) 45%,
            rgba(255, 255, 255, 0.25) 50%,
            rgba(255, 255, 255, 0.15) 55%,
            transparent 70%);
    animation: cta-shimmer 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 5;
}

@keyframes cta-shimmer {
    0% {
        left: -100%;
    }

    60% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}

.hero-cta-primary:hover {
    animation: cta-bounce 0.5s ease;
}

@keyframes cta-bounce {

    0%,
    100% {
        transform: scale(1.05);
    }

    50% {
        transform: scale(1.08);
    }
}

/* ── Pulse glow for flow nodes ──────────────────────── */
@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(140, 37, 244, .15);
    }

    50% {
        box-shadow: 0 0 35px rgba(140, 37, 244, .3);
    }
}

/* ── Animated dot traveling along connector ─────────── */
@keyframes flow-dot-travel {
    0% {
        left: 0;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        left: calc(100% - 6px);
        opacity: 0;
    }
}

.animate-flow-dot {
    animation: flow-dot-travel 2s ease-in-out infinite;
}

/* ── Flow path draw (SVG stroke animation) ──────────── */
.flow-path {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    transition: stroke-dashoffset 1.5s ease;
}

.flow-path.drawn {
    stroke-dashoffset: 0;
}

/* ── FAQ Accordion ──────────────────────────────────── */
.faq-answer {
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.faq-item.open .faq-answer {
    max-height: 300px;
    opacity: 1;
}

.faq-item.open .faq-chevron {
    transform: rotate(180deg);
}

/* ── Navbar scroll state ────────────────────────────── */
.nav-scrolled {
    background: rgba(5, 5, 5, .95) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom-color: rgba(255, 255, 255, .08) !important;
}

/* ── Flow node entrance stagger ─────────────────────── */

.flow-viewport .flow-node {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.flow-viewport .flow-node.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* ── Flow viewport (pannable/zoomable canvas) ───────── */
.flow-viewport {
    background:
        radial-gradient(circle at 50% 50%, rgba(140, 37, 244, .04) 0%, transparent 70%),
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 100% 100%, 30px 30px, 30px 30px;
}

/* ── Loading spinner ────────────────────────────────── */
.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ═══════════════════════════════════════════════════════ */
/*  MOBILE OPTIMIZATIONS                                   */
/* ═══════════════════════════════════════════════════════ */

/* ── General mobile touch & performance ─────────────── */
@media (max-width: 768px) {

    /* Smoother scrolling on iOS */
    html {
        -webkit-overflow-scrolling: touch;
    }

    /* Safe area insets for notched phones */
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* ── Hero section ───────────────────────────────── */
    #hero {
        min-height: 100svh;
        /* Use small viewport height for mobile */
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    #hero h1 {
        font-size: 2.5rem;
        line-height: 1.1;
        letter-spacing: -0.03em;
    }

    #hero .text-lg,
    #hero .md\:text-2xl {
        font-size: 1rem;
        line-height: 1.6;
    }

    /* Hero CTA buttons — full-width stacked */
    #hero .flex.flex-col {
        gap: 0.75rem;
    }

    #hero .hero-cta-primary,
    #hero #cta-hero-call {
        padding: 1rem 1.5rem;
        font-size: 0.875rem;
        min-height: 52px;
        /* Minimum touch target */
    }

    /* Hero background — tone down glow on mobile */
    #hero>.absolute.inset-0 .w-\[800px\] {
        width: 400px !important;
        height: 400px !important;
        opacity: 0.25 !important;
    }

    /* Make hero mesh subtler on mobile */
    #hero .hero-mesh {
        opacity: 0.15 !important;
    }

    /* ── Video showcase — more square on mobile ─────── */
    .aspect-\[21\/9\] {
        aspect-ratio: 16 / 9;
    }

    /* Video overlay text smaller */
    .aspect-\[21\/9\] h3 {
        font-size: 1.75rem !important;
    }

    .aspect-\[21\/9\] p {
        font-size: 0.875rem !important;
    }

    .aspect-\[21\/9\] .bottom-12 {
        bottom: 1.5rem;
    }

    /* ── Problem section ────────────────────────────── */
    #problema h2 {
        font-size: 1.75rem;
    }

    #problema .group {
        padding: 1rem;
        gap: 1rem;
    }

    #problema .text-2xl {
        font-size: 1.5rem;
    }

    /* ── Automations cards grid ─────────────────────── */
    #automazioni .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    #automazioni .p-6 {
        padding: 1rem;
    }

    #automazioni h3 {
        font-size: 0.9rem;
    }

    #automazioni .text-sm {
        font-size: 0.75rem;
    }

    /* ── Sistema section — pricing badges wrap ──────── */
    #sistema .flex.gap-3 {
        flex-wrap: wrap;
    }

    #sistema .px-4.py-2 {
        font-size: 0.7rem;
        padding: 0.375rem 0.75rem;
    }

    /* System pillars — adjust font */
    #sistema .text-2xl {
        font-size: 1.25rem;
    }

    /* ── Flow playground ─────────────────────────────── */
    #costruiscilo h2 {
        font-size: 2rem;
    }

    /* Hide SVG connectors on mobile */
    #flow-demo-svg {
        display: none !important;
    }

    /* Flow columns — stack vertically on mobile */
    #flow-static-content {
        min-height: auto !important;
        position: relative;
    }

    /* Force hide desktop content to avoid ghost space */
    #flow-desktop-content {
        display: none !important;
    }

    #iobuild {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    #flow-col-left,
    #flow-col-right {
        position: relative !important;
        width: 100% !important;
        left: auto !important;
        right: auto !important;
        margin-bottom: 1rem;
    }

    /* Hide connection ports on mobile */
    .flow-demo-node .hidden.md\:block {
        display: none !important;
    }

    /* Flow AI prompt box */
    #flow-input {
        font-size: 0.875rem;
    }

    /* Example prompt buttons — scrollable horizontal */
    #costruiscilo .flex-wrap {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.5rem;
        justify-content: flex-start;
    }

    #costruiscilo .flex-wrap::-webkit-scrollbar {
        display: none;
    }

    #costruiscilo .flow-example-btn {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Flow CTA section */
    #flow-cta-section .text-lg {
        font-size: 1rem;
    }

    /* ── Metrics section ────────────────────────────── */
    #metriche .grid {
        gap: 1rem;
    }

    #metriche .text-2xl {
        font-size: 1.25rem;
    }

    #metriche .divide-x>* {
        border-left: 0;
    }

    /* ── FAQ ──────────────────────────────────────── */
    #faq .text-lg {
        font-size: 1rem;
    }

    /* ═══════════════════════════════════════════════════════ */
    /*  MOBILE COMPACT — tap-to-expand per sezioni verbose    */
    /* ═══════════════════════════════════════════════════════ */

    /* ── Problema: descrizioni nascoste, solo icona+titolo ── */
    #problema .space-y-8 {
        gap: 0.5rem;
    }

    #problema .space-y-8>div {
        padding: 0.75rem 1rem;
        gap: 0.75rem;
        cursor: pointer;
    }

    #problema .space-y-8>div p {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        margin: 0;
        transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
    }

    #problema .space-y-8>div.mob-expanded p {
        max-height: 200px;
        opacity: 1;
        margin-top: 0.5rem;
    }

    #problema .space-y-8>div h3 {
        font-size: 0.95rem;
        margin-bottom: 0;
    }

    /* Freccia expand indicator */
    #problema .space-y-8>div h3::after {
        content: "›";
        float: right;
        color: #8c25f4;
        font-size: 1.2rem;
        transition: transform 0.3s;
    }

    #problema .space-y-8>div.mob-expanded h3::after {
        transform: rotate(90deg);
    }

    /* ── Automazioni: griglia compatta, desc nascosta ─────── */
    #automazioni .grid>div {
        padding: 0.75rem;
        cursor: pointer;
        position: relative;
    }

    #automazioni .grid>div>.w-12 {
        width: 2rem;
        height: 2rem;
        margin-bottom: 0.5rem;
        border-radius: 0.5rem;
    }

    #automazioni .grid>div>.w-12 span {
        font-size: 1rem;
    }

    #automazioni .grid>div h3 {
        font-size: 0.8rem;
        margin-bottom: 0;
    }

    /* Freccia expand */
    #automazioni .grid>div h3::after {
        content: "›";
        float: right;
        color: #8c25f4;
        font-size: 1.1rem;
        transition: transform 0.3s;
    }

    #automazioni .grid>div.mob-expanded h3::after {
        transform: rotate(90deg);
    }

    #automazioni .grid>div p {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        margin: 0;
        transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
    }

    #automazioni .grid>div.mob-expanded p {
        max-height: 100px;
        opacity: 1;
        margin-top: 0.5rem;
    }

    /* ── Sistema: pilastri compatti, desc nascosta ──────── */
    #sistema .grid>div {
        padding: 1rem;
        cursor: pointer;
    }

    #sistema .grid>div>.w-14 {
        width: 2.5rem;
        height: 2.5rem;
        margin-bottom: 0.75rem;
    }

    #sistema .grid>div>.w-14 span {
        font-size: 1.25rem;
    }

    #sistema .grid>div h3 {
        font-size: 1.1rem;
        margin-bottom: 0.25rem;
    }

    /* Freccia expand */
    #sistema .grid>div h3::after {
        content: "›";
        float: right;
        color: #8c25f4;
        font-size: 1.2rem;
        transition: transform 0.3s;
    }

    #sistema .grid>div.mob-expanded h3::after {
        transform: rotate(90deg);
    }

    #sistema .grid>div>p {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        margin: 0;
        transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
    }

    #sistema .grid>div.mob-expanded>p {
        max-height: 200px;
        opacity: 1;
        margin-bottom: 0.75rem;
    }

    /* Le feature list restano visibili, compattate */
    /* ── Sito: cards orizzontali (icona sx, titolo dx) ──── */
    #sito .grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    #sito .grid>div {
        padding: 0.6rem 0.75rem;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        position: relative;
    }

    #sito .grid>div>.w-12 {
        width: 2rem;
        height: 2rem;
        min-width: 2rem;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    #sito .grid>div>.w-12 span {
        font-size: 1rem;
    }

    #sito .grid>div h4 {
        font-size: 0.9rem;
        margin-bottom: 0;
        white-space: nowrap;
        flex: 1;
        min-width: 0;
    }

    /* Freccia expand — posizionata all'estrema destra */
    #sito .grid>div h4::after {
        content: "›";
        position: absolute;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        color: #8c25f4;
        font-size: 1.1rem;
        transition: transform 0.3s;
    }

    #sito .grid>div.mob-expanded h4::after {
        transform: translateY(-50%) rotate(90deg);
    }

    #sito .grid>div p {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        margin: 0;
        transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
        width: 100%;
        white-space: normal;
    }

    #sito .grid>div.mob-expanded p {
        max-height: 100px;
        opacity: 1;
        margin-top: 0.5rem;
    }

    #sito .grid>div.mob-expanded {
        flex-wrap: wrap;
    }

    /* ── Video showcase: testo desc fuori dal video ─────── */
    #sito .relative.w-full .absolute.bottom-4 p,
    #sito .relative.w-full .md\:bottom-12 p {
        position: static;
        display: block;
    }

    /* Sposta la desc fuori dal video overlay */
    #sito [class*="aspect-"] p.text-gray-300 {
        display: none !important;
    }

    #sito .video-desc-mobile {
        display: block !important;
        margin-top: 0 !important;
        margin-bottom: 1.5rem !important;
    }

    /* ── Contact section — bottoni più compatti ─────────── */
    #contatti h2 {
        font-size: 1.75rem;
    }

    /* Contact CTA cards — più piccoli su mobile */
    #contatti .h-24 {
        height: 3.5rem;
    }

    #contatti .text-3xl {
        font-size: 1.25rem;
    }

    #contatti .text-lg {
        font-size: 0.85rem;
    }

    /* Form inputs — larger touch targets */
    #lead-form input,
    #lead-form textarea {
        font-size: 16px;
        /* Prevents iOS zoom on focus */
        padding: 0.875rem 1rem;
    }

    #lead-form button[type="submit"] {
        min-height: 52px;
        font-size: 1rem;
    }

    /* ── Footer grid ─────────────────────────────────── */
    footer .grid {
        gap: 2rem;
    }

    /* ── Reduce heavy blur effects on mobile ─────────── */
    .blur-\[120px\] {
        filter: blur(60px);
    }

    .blur-\[100px\] {
        filter: blur(50px);
    }

    .backdrop-blur-sm,
    .backdrop-blur-md,
    .backdrop-blur-xl {
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }
}

/* ── Very small screens (< 380px, e.g. iPhone SE) ───── */
@media (max-width: 380px) {
    #hero h1 {
        font-size: 2rem;
    }

    #automazioni .grid {
        grid-template-columns: 1fr;
    }

    #contatti .grid.grid-cols-1 {
        gap: 0.5rem;
    }
}

/* ── Reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .flow-viewport .flow-node {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .flow-path {
        stroke-dashoffset: 0;
        transition: none;
    }

    .text-gradient-primary {
        animation: none;
    }

    .cta-glow::after {
        animation: none;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ═══════════════════════════════════════════════════════ */
/*  Chatbot Widget — v3                                   */
/* ═══════════════════════════════════════════════════════ */

/* Kill ALL focus outlines in the chatbot */
#io-chatbot *:focus,
#io-chatbot *:focus-visible,
#io-chatbot input:focus,
#io-chatbot button:focus {
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

#io-chatbot {
    --cb-primary: #8c25f4;
    --cb-bg: #0d0d14;
    --cb-surface: #161622;
    --cb-border: rgba(255, 255, 255, 0.08);
    --cb-text: #e2e2e8;
    --cb-text-muted: #9494a8;
    --cb-radius: 16px;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 9999;
    pointer-events: none;
    font-family: 'Inter', system-ui, sans-serif;
}

/* ── Cookie Consent Lock Removed to allow background scrolling ── */

#io-chatbot * {
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

.io-hidden {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════ */
/*  FAB — Floating Action Button (closed state)             */
/* ══════════════════════════════════════════════════════════ */

#io-fab {
    position: fixed;
    bottom: max(20px, env(safe-area-inset-bottom));
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50px;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Transition for width/padding when it expands in-place */
    transition: opacity 0.2s, width 0.6s cubic-bezier(0.16, 1, 0.3, 1), padding 0.6s cubic-bezier(0.16, 1, 0.3, 1), justify-content 0.6s step-end;
    /* JS driven properties */
    transform: translate3d(var(--io-tx, 0px), var(--io-ty, 0px), 0) scale(var(--io-scale, 1));
    opacity: var(--io-opacity, 1);
}


#io-fab:hover {
    transform: translate3d(var(--io-tx, 0px), var(--io-ty, 0px), 0) scale(calc(var(--io-scale, 1) * 1.05));
}

#io-fab:active {
    transform: translate3d(var(--io-tx, 0px), var(--io-ty, 0px), 0) scale(calc(var(--io-scale, 1) * 0.95));
}

/* ── Hero Mode Centering Overrides ── */
/* The parent container maps to absolute document space to eliminate scroll jitter */
#io-chatbot.io-mode-hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    bottom: auto;
    right: auto;
}

#io-chatbot.io-mode-hero #io-fab {
    position: absolute;
    bottom: auto;
    right: auto;
}

/* FAB */
#io-chatbot.io-mode-hero #io-fab {
    top: var(--io-abs-top, 500px);
    left: var(--io-abs-left, 50%);
    transform: translate(-50%, -50%) scale(var(--io-scale, 1.15)) !important;
}

/* Chat Bar centered in Hero Mode */
#io-chatbot.io-mode-hero #io-chat-bar {
    position: absolute;
    top: var(--io-abs-top, 500px);
    left: var(--io-abs-left, 50%);
    transform: translate(-50%, -50%) scale(var(--io-scale, 1.15));
    bottom: auto;
    right: auto;
    /* When width expands, it expands from the center due to translate(-50%, -50%) */
}

/* Scale up the Orb Entity itself when in Hero Mode */
#io-chatbot.io-mode-hero #io-fab-entity {
    transform: scale(1.4);
}

#io-chatbot.io-mode-hero #io-fab.io-fab-animate {
    animation: io-fab-pop-hero 0.5s cubic-bezier(.17, .84, .44, 1) forwards;
}

@keyframes io-fab-pop-hero {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    60% {
        transform: translate(-50%, -50%) scale(calc(var(--io-scale, 1.2) * 1.15));
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(var(--io-scale, 1.2));
        opacity: 1;
    }
}


/* Dynamic CSS variables take precedence. */


/* Rotating LED glow around the FAB */
#io-fab-glow {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    pointer-events: none;
}

#io-fab-glow::before {
    content: "";
    position: absolute;
    inset: -60%;
    width: 220%;
    height: 220%;
    background: conic-gradient(from 0deg,
            rgba(255, 255, 255, 0.95) 0deg,
            rgba(140, 37, 244, 0.85) 60deg,
            rgba(255, 255, 255, 0.15) 120deg,
            rgba(140, 37, 244, 0.6) 180deg,
            rgba(255, 255, 255, 0.9) 240deg,
            rgba(255, 255, 255, 0.1) 300deg,
            rgba(140, 37, 244, 0.5) 340deg,
            rgba(255, 255, 255, 0.95) 360deg);
    animation: io-border-spin 3s linear infinite;
}

/* Loading state: Orange/Purple Mix */
.io-chatbot-loading #io-fab-glow::before {
    background: conic-gradient(from 0deg,
            rgba(255, 255, 255, 0.95) 0deg,
            rgba(249, 115, 22, 0.85) 45deg,
            /* Orange */
            rgba(140, 37, 244, 0.85) 90deg,
            /* Purple */
            rgba(255, 255, 255, 0.15) 135deg,
            rgba(249, 115, 22, 0.6) 180deg,
            /* Orange */
            rgba(140, 37, 244, 0.9) 225deg,
            /* Purple */
            rgba(255, 255, 255, 0.1) 270deg,
            rgba(249, 115, 22, 0.5) 315deg,
            /* Orange */
            rgba(255, 255, 255, 0.95) 360deg);
    animation: io-border-spin 1.5s linear infinite;
    /* Faster spin when loading */

}

/* Inner mask — only the 2px border is visible */
#io-fab-glow::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: var(--cb-bg);
}

@keyframes io-border-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ══════════════════════════════════════════════════════════ */
/*  The Living Orb Entity & In-Place Text                   */
/* ══════════════════════════════════════════════════════════ */

#io-fab-entity {
    position: relative;
    z-index: 2;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Base Core of the Orb */
.io-entity-core {
    position: absolute;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, #fff 0%, #d8b4fe 60%, rgba(140, 37, 244, 0.8) 100%);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(140, 37, 244, 0.8), 0 0 20px rgba(140, 37, 244, 0.4);
    animation: orb-breathe 3s ease-in-out infinite alternate;
}

/* Outer Rings */
.io-entity-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(140, 37, 244, 0.5);
    border-top-color: rgba(216, 180, 254, 0.9);
}

.io-entity-ring-1 {
    width: 20px;
    height: 20px;
    animation: orb-spin 4s linear infinite;
}

.io-entity-ring-2 {
    width: 26px;
    height: 26px;
    border-top-color: rgba(140, 37, 244, 0.2);
    border-bottom-color: rgba(216, 180, 254, 0.7);
    animation: orb-spin-reverse 6s linear infinite;
}

@keyframes orb-breathe {
    0% {
        transform: scale(0.9);
        box-shadow: 0 0 8px rgba(140, 37, 244, 0.5), 0 0 15px rgba(140, 37, 244, 0.2);
    }

    100% {
        transform: scale(1.1);
        box-shadow: 0 0 14px rgba(216, 180, 254, 0.9), 0 0 25px rgba(140, 37, 244, 0.6);
    }
}

/* Mini Orb for Chat Header */
.io-entity-mini {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #d8b4fe 60%, rgba(140, 37, 244, 0.8) 100%);
    box-shadow: 0 0 6px rgba(140, 37, 244, 0.6);
    animation: orb-breathe 3s ease-in-out infinite alternate;
}

/* Active State Pulse (Orange/White) */
@keyframes orb-pulse-active {
    0% {
        transform: scale(0.9);
        background: radial-gradient(circle, #fff 0%, #f97316 50%, rgba(234, 88, 12, 0.9) 100%);
        box-shadow: 0 0 10px rgba(234, 88, 12, 0.6), 0 0 20px rgba(234, 88, 12, 0.3);
    }

    100% {
        transform: scale(1.2);
        background: radial-gradient(circle, #ffffff 0%, #fb923c 60%, rgba(249, 115, 22, 1) 100%);
        box-shadow: 0 0 15px rgba(251, 146, 60, 0.9), 0 0 30px rgba(249, 115, 22, 0.7);
    }
}

.io-chatbot-loading .io-entity-core,
.io-chatbot-loading .io-entity-mini,
.io-chatbot-hinting .io-entity-core,
.io-chatbot-hinting .io-entity-mini {
    animation: orb-pulse-active 0.6s ease-in-out infinite alternate !important;
}

/* ══════════════════════════════════════════════════════════ */
/*  Branded "iOChat" Logo Animation (Hero Presentation)     */
/* ══════════════════════════════════════════════════════════ */

#io-brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    z-index: 5;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 22px;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 1px;
    transition: opacity 0.3s ease;
}

/* "iO" — white base with metallic sweep */
.io-brand-io {
    background: linear-gradient(90deg,
            #ffffff 0%, #ffffff 35%,
            #c0c0c0 45%, #ffffff 55%,
            #ffffff 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: io-text-shine 1.8s 0.3s ease-in-out forwards;
}

/* "Chat" — orange base with metallic sweep */
.io-brand-chat {
    background: linear-gradient(90deg,
            #f97316 0%, #f97316 35%,
            #ffd700 45%, #f97316 55%,
            #f97316 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: io-text-shine 1.8s 0.3s ease-in-out forwards;
}

/* Metallic sweep: shift the gradient across the text */
@keyframes io-text-shine {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: 0% 0;
    }
}

@keyframes orb-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes orb-spin-reverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}


/* Notification Dot (Red Shiny) */
#io-fab-notify {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background-color: #ef4444;
    border-radius: 50%;
    border: 2px solid #0d0d14;
    /* Match bg to cut out */
    z-index: 10;
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.3s, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
}

#io-fab-notify.visible {
    opacity: 1;
    transform: scale(1);
    animation: io-notify-pulse 2s infinite;
}

@keyframes io-notify-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* ══════════════════════════════════════════════════════════ */
/*  Chat Window                                             */
/* ══════════════════════════════════════════════════════════ */

#io-chat-window {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 380px;
    height: 600px;
    max-height: calc(100vh - 40px);
    background: transparent;
    /* Transparent to show glow padding */
    padding: 2px;
    /* The border width */
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    z-index: 10000;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    /* JS driven transitions for drag/scroll morphing */
    transform-origin: bottom right;
    transform: scale(1);
}

/* The Glow Background Layer (Border) */
#io-chat-win-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: 0;
    background: conic-gradient(from 0deg,
            rgba(255, 255, 255, 0.95) 0deg,
            rgba(140, 37, 244, 0.85) 60deg,
            rgba(255, 255, 255, 0.15) 120deg,
            rgba(140, 37, 244, 0.6) 180deg,
            rgba(255, 255, 255, 0.9) 240deg,
            rgba(255, 255, 255, 0.1) 300deg,
            rgba(140, 37, 244, 0.5) 340deg,
            rgba(255, 255, 255, 0.95) 360deg);
    animation: io-border-spin 4s linear infinite;
}

/* Loading state for Window Glow */
.io-chatbot-loading #io-chat-win-glow {
    background: conic-gradient(from 0deg,
            rgba(255, 255, 255, 0.95) 0deg,
            rgba(249, 115, 22, 0.85) 45deg,
            /* Orange */
            rgba(140, 37, 244, 0.85) 90deg,
            /* Purple */
            rgba(255, 255, 255, 0.15) 135deg,
            rgba(249, 115, 22, 0.6) 180deg,
            /* Orange */
            rgba(140, 37, 244, 0.9) 225deg,
            /* Purple */
            rgba(255, 255, 255, 0.1) 270deg,
            rgba(249, 115, 22, 0.5) 315deg,
            /* Orange */
            rgba(255, 255, 255, 0.95) 360deg);
    animation: io-border-spin 1.5s linear infinite;
}

@keyframes io-chat-enter {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Mobile Center Positioning */
@media (max-width: 768px) {
    #io-chat-window {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        width: 95%;
        bottom: 20px;
        height: min(600px, calc(100vh - 40px));
        /* Overlay existing animation with specific transform */
        animation: io-chat-enter-mobile 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    /* iOS Keyboard Fix with VisualViewport CSS variables */
    #io-chat-window.io-kb-open {
        animation: none !important;
        position: fixed !important;
        top: var(--vv-offset-top, 0px) !important;
        bottom: auto !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: var(--vv-height, 100dvh) !important;
        max-height: none !important;
        border-radius: 0 !important;
        transform: none !important;
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8) !important;
        z-index: 999999 !important;
    }

    #io-chat-window.io-kb-open #io-chat-messages {
        flex: 1 1 auto;
        max-height: none !important;
    }

    @keyframes io-chat-enter-mobile {
        from {
            opacity: 0;
            transform: translateX(-50%) translateY(20px) scale(0.95);
        }

        to {
            opacity: 1;
            transform: translateX(-50%) translateY(0) scale(1);
        }
    }
}

/* ══════════════════════════════════════════════════════════ */
/*  Input Bar — slides open/close                           */
/* ══════════════════════════════════════════════════════════ */

#io-chat-bar {
    position: fixed;
    bottom: max(20px, env(safe-area-inset-bottom));
    right: 20px;
    height: 52px;
    z-index: 10000;
    /* Anchor to right, grow leftward */
    display: flex;
    justify-content: flex-start;
}

/* Slide-open animation */
.io-bar-hidden {
    width: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transition: width 0.4s cubic-bezier(.4, 0, .2, 1), opacity 0.3s ease;
}

.io-bar-open {
    width: min(380px, calc(100vw - 40px));
    opacity: 1;
    pointer-events: auto;
    overflow: visible;
    transition: width 0.4s cubic-bezier(.4, 0, .2, 1), opacity 0.4s ease;
}

.io-bar-closing {
    width: 0 !important;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: width 0.4s cubic-bezier(.4, 0, .2, 1), opacity 0.4s ease;
}

/* FAB Entrance Animation */
@keyframes io-fab-pop {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    60% {
        transform: scale(1.15);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

#io-fab.io-fab-animate {
    animation: io-fab-pop 0.5s cubic-bezier(.17, .84, .44, 1) forwards;
}

/* The LED glow container around the bar */
#io-chat-bar-glow {
    position: absolute;
    inset: 0;
    border-radius: 50px;
    overflow: hidden;
    pointer-events: none;
}

#io-chat-bar-glow::before {
    content: "";
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg,
            rgba(255, 255, 255, 0.9) 0deg,
            rgba(140, 37, 244, 0.8) 45deg,
            rgba(255, 255, 255, 0.15) 90deg,
            rgba(255, 255, 255, 0.05) 135deg,
            rgba(140, 37, 244, 0.6) 180deg,
            rgba(255, 255, 255, 0.9) 225deg,
            rgba(255, 255, 255, 0.15) 270deg,
            rgba(140, 37, 244, 0.4) 315deg,
            rgba(255, 255, 255, 0.9) 360deg);
    animation: io-border-spin 4s linear infinite;
}

#io-chat-bar-glow::after {
    content: "";
    position: absolute;
    inset: 1.5px;
    border-radius: 50px;
    background: var(--cb-bg);
}

#io-chat-bar-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    border-radius: 50px;
    padding: 6px 8px 6px 6px;
    position: relative;
    z-index: 2;
}

/* Close button (left side of bar) */
#io-bar-close {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: var(--cb-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

#io-bar-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--cb-text);
}

#io-bar-close .material-icons {
    font-size: 20px;
}

/* Placeholder wrapper */
#io-chat-placeholder-wrap {
    flex: 1;
    position: relative;
    min-width: 0;
    height: 36px;
    display: flex;
    align-items: center;
}

#io-chat-input-bar {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--cb-text);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 400;
    outline: none;
    position: relative;
    z-index: 2;
    padding: 0 12px;
    margin: 0;
    height: 100%;
}

/* ── Slide-to-unlock shimmer text ──────────────────── */
#io-chat-placeholder-anim {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    padding: 0 12px;
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 400;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
    overflow: hidden;
    color: rgba(148, 148, 168, 0.45);
    background: linear-gradient(90deg,
            rgba(148, 148, 168, 0.45) 0%,
            rgba(148, 148, 168, 0.45) 35%,
            #ffffff 45%,
            #c084fc 50%,
            #ffffff 55%,
            rgba(148, 148, 168, 0.45) 65%,
            rgba(148, 148, 168, 0.45) 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: io-unlock-shimmer 2.8s ease-in-out infinite;
    transition: opacity 0.4s ease;
}

@keyframes io-unlock-shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.io-fade-in {
    opacity: 1 !important;
    transition: opacity 0.5s ease-in !important;
}

.io-fade-out {
    opacity: 0 !important;
    transition: opacity 0.5s ease-out !important;
}

/* Send button */
#io-chat-send-bar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    border: none;
    background: var(--cb-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.15s;
    box-shadow: 0 0 10px rgba(140, 37, 244, 0.3);
}

#io-chat-send-bar:hover {
    background: #a044ff;
    transform: scale(1.05);
}

#io-chat-send-bar .material-icons {
    font-size: 18px;
}

/* ══════════════════════════════════════════════════════════ */
/*  Chat Window                                              */
/* ══════════════════════════════════════════════════════════ */

#io-chat-window {
    position: fixed;
    bottom: max(20px, env(safe-area-inset-bottom));
    right: 20px;
    width: 400px;
    height: 520px;
    display: flex;
    flex-direction: column;
    background: var(--cb-bg);
    border: none;
    border-radius: var(--cb-radius);
    box-shadow:
        0 -4px 30px rgba(140, 37, 244, 0.12),
        0 8px 40px rgba(0, 0, 0, 0.5);
    animation: io-slide-up 0.3s ease;
    z-index: 10000;
    overflow: hidden;
}

/* LED glow border around chat window */
#io-chat-win-glow {
    position: absolute;
    inset: 0;
    border-radius: var(--cb-radius);
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

#io-chat-win-glow::before {
    content: "";
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg,
            rgba(255, 255, 255, 0.8) 0deg,
            rgba(140, 37, 244, 0.7) 60deg,
            rgba(255, 255, 255, 0.1) 120deg,
            rgba(140, 37, 244, 0.5) 180deg,
            rgba(255, 255, 255, 0.8) 240deg,
            rgba(255, 255, 255, 0.1) 300deg,
            rgba(140, 37, 244, 0.4) 340deg,
            rgba(255, 255, 255, 0.8) 360deg);
    animation: io-border-spin 4s linear infinite;
}

#io-chat-win-glow::after {
    content: "";
    position: absolute;
    inset: 1.5px;
    border-radius: var(--cb-radius);
    background: var(--cb-bg);
}

/* Raise all chat content above the glow */
#io-chat-header,
#io-chat-messages,
#io-chat-input-area {
    position: relative;
    z-index: 1;
}

@keyframes io-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header */
/* Header */
#io-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: #000000;
    /* Black */
    border-radius: 18px 18px 0 0;
    /* Match window radius minus padding */
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

#io-chat-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

#io-chat-reset {
    background: none;
    border: none;
    cursor: pointer;
    color: #ef4444;
    /* Red X */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 50%;
    transition: background 0.2s;
}

#io-chat-reset:hover {
    background: rgba(239, 68, 68, 0.1);
}

#io-chat-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

#io-chat-header-left .material-icons {
    color: var(--cb-primary);
    font-size: 24px;
}

#io-chat-header-left strong {
    color: var(--cb-text);
    font-size: 14px;
    display: block;
}

#io-chat-status {
    font-size: 11px;
    color: #22c55e;
    display: block;
}

#io-chat-minimize {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    /* Glowing white arrow */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.4);
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
}

#io-chat-minimize:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Messages area */
#io-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    background: #000000;
    /* Black */
    position: relative;
    z-index: 1;
    flex-direction: column;
    gap: 10px;
}

.io-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.5;
    word-wrap: break-word;
    animation: io-msg-in 0.25s ease;
}

@keyframes io-msg-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.io-msg-user {
    align-self: flex-end;
    background: var(--cb-primary);
    color: white;
    border-bottom-right-radius: 4px;
}

.io-msg-assistant {
    align-self: flex-start;
    background: var(--cb-surface);
    color: var(--cb-text);
    border: 1px solid var(--cb-border);
    border-bottom-left-radius: 4px;
}

.io-typing {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
}

.io-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cb-text-muted);
    animation: io-dot-bounce 1.2s infinite;
}

.io-typing span:nth-child(2) {
    animation-delay: 0.2s;
}

.io-typing span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes io-dot-bounce {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.4;
    }

    30% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

/* Input area inside chat window */
#io-chat-input-area {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: #000000;
    /* Black */
    border-radius: 0 0 18px 18px;
    /* Match window radius minus padding */
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

/* LED glow on the chat input pill */
#io-chat-input-glow {
    position: absolute;
    left: 16px;
    right: 62px;
    top: 12px;
    bottom: 12px;
    border-radius: 24px;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

#io-chat-input-glow::before {
    content: "";
    position: absolute;
    inset: -60%;
    width: 220%;
    height: 220%;
    background: conic-gradient(from 0deg,
            rgba(255, 255, 255, 0.7) 0deg,
            rgba(140, 37, 244, 0.6) 60deg,
            rgba(255, 255, 255, 0.08) 120deg,
            rgba(140, 37, 244, 0.4) 180deg,
            rgba(255, 255, 255, 0.7) 240deg,
            rgba(255, 255, 255, 0.08) 300deg,
            rgba(140, 37, 244, 0.3) 340deg,
            rgba(255, 255, 255, 0.7) 360deg);
    animation: io-border-spin 4s linear infinite;
}

#io-chat-input-glow::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 24px;
    background: var(--cb-bg);
}

#io-chat-input-window {
    flex: 1;
    background: transparent;
    border: none;
    border-radius: 24px;
    padding: 10px 16px;
    color: var(--cb-text);
    font-size: 14px;
    outline: none;
    position: relative;
    z-index: 1;
}

#io-chat-input-window:focus {
    border-color: transparent;
}

#io-chat-input-window::placeholder {
    color: var(--cb-text-muted);
}

#io-chat-send-window {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: var(--cb-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.15s;
}

#io-chat-send-window:hover {
    background: #a044ff;
    transform: scale(1.05);
}

#io-chat-send-window .material-icons {
    font-size: 18px;
}

/* ══════════════════════════════════════════════════════════ */
/*  Mobile                                                   */
/* ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    #io-fab {
        bottom: max(14px, env(safe-area-inset-bottom));
        right: 14px;
        width: 50px;
        height: 50px;
    }

    #io-fab-icon {
        width: 20px;
        height: 20px;
    }

    #io-chat-bar {
        right: 14px;
        bottom: max(14px, env(safe-area-inset-bottom));
        height: 48px;
    }

    .io-bar-open {
        width: calc(100vw - 28px);
    }

    /* On mobile, the hero chat bar and orb should NOT be scaled up. 
       They perfectly match the bottom-right size. */
    #io-chatbot.io-mode-hero #io-fab,
    #io-chatbot.io-mode-hero #io-chat-bar {
        transform: translate(-50%, -50%) scale(1) !important;
    }

    #io-chatbot.io-mode-hero .io-bar-open {
        width: calc(100vw - 28px) !important;
    }

    #io-chat-bar-inner {
        width: 100%;
        padding: 4px 6px;
        gap: 6px;
    }

    #io-chat-placeholder-anim {
        font-size: 12px;
    }

    #io-chat-input-bar {
        font-size: 16px;
    }

    #io-chat-window {
        right: 0;
        bottom: 0;
        width: 100%;
        height: 70vh;
        max-height: 520px;
        border-radius: var(--cb-radius) var(--cb-radius) 0 0;
        border: none;
        border-top: 1px solid rgba(140, 37, 244, 0.3);
    }

    #io-chat-input-window {
        font-size: 16px;
    }
}

/* ══════════════════════════════════════════════════════════ */
/*  Onboarding Bubble (Refined UI/UX)                        */
/* ══════════════════════════════════════════════════════════ */

.io-onboarding-bubble {
    position: fixed;
    bottom: 95px;
    /* Positioned above FAB */
    right: 32px;
    width: 320px;
    max-width: calc(100vw - 64px);
    /* Responsive on mobile */
    background: rgba(10, 10, 16, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(140, 37, 244, 0.3);
    border-radius: 16px;
    padding: 14px 18px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    z-index: 9998;
    font-family: 'Inter', system-ui, sans-serif;
    color: #fff;

    /* Banner Slide-In Logic */
    opacity: 0;
    transform: translateX(50px);
    pointer-events: none;
    transition:
        opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ... existing after/pulse ... */

/* ─── Alive Animations ─── */
/* ... float/core-pulse ... */

/* 3. Reaction (Section Change) - Refined Genius Pop */
@keyframes io-core-react {
    0% {
        transform: scale(1);
        background: #8c25f4;
    }

    40% {
        transform: scale(1.6);
        background: #fff;
        box-shadow: 0 0 25px 10px rgba(140, 37, 244, 0.6);
    }

    100% {
        transform: scale(1);
        background: #8c25f4;
    }
}

/* Class trigger via JS */
.io-dot-react {
    animation: io-core-react 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Attira l'attenzione al cambio sezione - "Genius" Pulse */
@keyframes io-pop-attention {
    0% {
        filter: brightness(1);
        transform: scale(1);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    }

    50% {
        filter: brightness(1.4);
        transform: scale(1.06);
        box-shadow: 0 15px 45px rgba(140, 37, 244, 0.5);
        border-color: rgba(216, 180, 254, 0.9);
    }

    100% {
        filter: brightness(1);
        transform: scale(1);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    }
}

.io-pop-anim {
    /* Uses the current float transform as base, so we apply this carefully or override */
    /* Since float uses transform, we should be careful. 
       Best way: use a separate wrapper or rely on property additive (not fully supported).
       Alternative: Just punch the scale/filter. */
    animation: io-pop-attention 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.io-onboarding-bubble::after {
    /* Glow effect behind */
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(140, 37, 244, 0.15) 0%, transparent 60%);
    pointer-events: none;
    z-index: -1;
    animation: io-bubble-pulse 4s infinite ease-in-out;
}

@keyframes io-bubble-pulse {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* ─── Alive Animations ─── */

/* 1. Floating (Idle State) */
@keyframes io-float {

    0%,
    100% {
        transform: translateY(0) scale(1);
        border-color: rgba(140, 37, 244, 0.4);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    }

    50% {
        transform: translateY(-8px) scale(1.03);
        border-color: rgba(216, 180, 254, 0.8);
        /* Lighter violet on inhale */
        box-shadow: 0 12px 48px rgba(140, 37, 244, 0.3);
        /* Glowing shadow on inhale */
    }
}

/* 2. Heartbeat (Core Idle) - Evident pulse */
@keyframes io-core-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(140, 37, 244, 0);
    }

    15% {
        transform: scale(1.15);
        box-shadow: 0 0 10px 4px rgba(140, 37, 244, 0.4);
    }

    30% {
        transform: scale(1.05);
        box-shadow: 0 0 6px 1px rgba(140, 37, 244, 0.2);
    }

    45% {
        transform: scale(1.25);
        box-shadow: 0 0 15px 6px rgba(140, 37, 244, 0.3);
    }

    60% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(140, 37, 244, 0);
    }

    100% {
        transform: scale(1);
    }
}

/* 3. Reaction (Section Change) */
@keyframes io-core-react {
    0% {
        transform: scale(1);
        background: #8c25f4;
    }

    30% {
        transform: scale(1.8);
        background: #ffffff;
        box-shadow: 0 0 20px 8px rgba(140, 37, 244, 0.8);
    }

    100% {
        transform: scale(1);
        background: #8c25f4;
    }
}

/* Class trigger via JS */
.io-dot-react {
    animation: io-core-react 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Attira l'attenzione al cambio sezione */
/* Restored Animation Logic */

.io-onboarding-bubble.io-bubble-visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    /* Apply floating only when visible - Genius Float */
    animation: io-float 6s ease-in-out infinite;
}

.io-bubble-dot {
    width: 10px;
    height: 10px;
    background: #8c25f4;
    border-radius: 50%;
    position: relative;
    /* Core heartbeat animation */
    animation: io-core-pulse 2.5s infinite ease-in-out;
    transition: all 0.3s ease;
}

.io-bubble-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, rgba(140, 37, 244, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    /* Soft breathing glow animation */
    animation: io-core-glow 2.5s infinite ease-in-out;
}

@keyframes io-core-glow {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }

    30% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.6;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.4;
    }
}

.io-bubble-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

/* Old dot styles removed */
@keyframes io-dot-blink {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(0.9);
    }
}

.io-bubble-title {
    font-size: 13px;
    font-weight: 600;
    color: #d8b4fe;
    /* Lighter violet/lilac */
    /* text-transform: uppercase; Removed to respect iOChat casing */
    letter-spacing: 0.3px;
}

.io-bubble-text {
    font-size: 14px;
    line-height: 1.5;
    color: #e0e0e0;
    margin-bottom: 16px;
    font-weight: 400;
    position: relative;
    /* Masking for scan effect if needed, or just overflow hidden */
    overflow: hidden;
}

/* Base style for keywords */
.io-key {
    color: #e0e0e0;
    /* Start same as text */
    font-weight: 600;
    transition: color 0.3s ease-out;
}

/* The Scan Beam */
.io-bubble-text::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    /* Gradient: Transparent -> Sharp White Beam -> Transparent */
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.1) 45%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 255, 255, 0.1) 55%,
            transparent 100%);
    transform: translateX(-150%) skewX(-20deg);
    pointer-events: none;
    opacity: 0;
}


.io-bubble-actions {
    display: flex;
    gap: 10px;
}

.io-bubble-btn {
    flex: 1;
    border: none;
    border-radius: 10px;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.io-bubble-btn-primary {
    background: linear-gradient(135deg, #8c25f4, #6a1b9a);
    color: #fff;
    box-shadow: 0 4px 12px rgba(140, 37, 244, 0.3);
}

.io-bubble-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(140, 37, 244, 0.5);
    filter: brightness(1.1);
}

.io-bubble-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #aaa;
    border: 1px solid transparent;
}

.io-bubble-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.1);
}


/* ══════════════════════════════════════════════════════════ */
/*  iOChat — Section Hint Bubble (near FAB in corner mode)   */
/* ══════════════════════════════════════════════════════════ */

#io-section-hint {
    position: fixed;
    bottom: max(94px, calc(env(safe-area-inset-bottom) + 86px));
    right: 20px;
    max-width: 280px;
    padding: 12px 16px;
    background: rgba(13, 13, 20, 0.95);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(140, 37, 244, 0.25);
    border-radius: 14px;
    color: #d8d8e0;
    font-size: 12px;
    line-height: 1.5;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), 0 0 12px rgba(140, 37, 244, 0.1);
    z-index: 20000 !important;
    pointer-events: auto;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.4s ease, transform 0.4s ease;
    animation: hint-slide-in 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

#io-section-hint strong {
    color: #d8b4fe;
}

@keyframes hint-slide-in {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ══════════════════════════════════════════════════════════ */
/*  iOChat — Chat Window Glow (idle white + thinking orange) */
/* ══════════════════════════════════════════════════════════ */

/* Idle state: subtle white shimmer along borders */
#io-chat-window {
    box-shadow:
        0 12px 48px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        0 0 15px rgba(255, 255, 255, 0.04);
    transition: box-shadow 0.5s ease;
}

/* Thinking state: pulsing orange glow when AI is generating */
#io-chat-window.io-thinking {
    animation: chat-glow-thinking 1.5s ease-in-out infinite;
}

@keyframes chat-glow-thinking {

    0%,
    100% {
        box-shadow:
            0 12px 48px rgba(0, 0, 0, 0.5),
            inset 0 0 0 1px rgba(255, 159, 10, 0.15),
            0 0 20px rgba(255, 159, 10, 0.08);
    }

    50% {
        box-shadow:
            0 12px 48px rgba(0, 0, 0, 0.5),
            inset 0 0 0 1px rgba(255, 159, 10, 0.35),
            0 0 35px rgba(255, 159, 10, 0.18);
    }
}

/* ══════════════════════════════════════════════════════════ */
/*  iOChat — Enhanced CTA Buttons (per-section branding)     */
/* ══════════════════════════════════════════════════════════ */

.cta-context-chat {
    position: relative;
    padding: 10px 20px !important;
    background: rgba(140, 37, 244, 0.12) !important;
    border: 1px solid rgba(140, 37, 244, 0.35) !important;
    border-radius: 24px !important;
    color: #d8b4fe !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.cta-context-chat:hover {
    background: rgba(140, 37, 244, 0.25) !important;
    border-color: rgba(140, 37, 244, 0.6) !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(140, 37, 244, 0.2);
    transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════════ */
/*  iOChat — Mobile Responsive Overrides                     */
/* ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Section hint: positioned above FAB, smaller */
    #io-section-hint {
        right: 10px;
        bottom: max(86px, calc(env(safe-area-inset-bottom) + 78px));
        max-width: 240px;
        padding: 10px 14px;
        font-size: 11px;
        z-index: 20000 !important;
    }

    /* CTA buttons: slightly smaller on mobile */
    .cta-context-chat {
        padding: 8px 14px !important;
        font-size: 11px !important;
    }

    /* Chat glow: reduce intensity on mobile for performance */
    #io-chat-window.io-thinking {
        animation-duration: 2s;
    }
}

@media (max-width: 380px) {

    #io-section-hint {
        max-width: 200px;
        font-size: 10px;
    }

    .cta-context-chat {
        padding: 6px 10px !important;
        font-size: 10px !important;
    }
}

/* ══════════════════════════════════════════════════════════ */
/*  Flow Playground — Interaction Enhancements                */
/* ══════════════════════════════════════════════════════════ */

/* The floating tooltip for full descriptions */
.io-flow-tooltip {
    position: fixed;
    z-index: 100000;
    pointer-events: none;
    background: rgba(15, 15, 20, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(140, 37, 244, 0.3);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    padding: 12px 16px;
    border-radius: 12px;
    max-width: 280px;
    width: max-content;

    /* Animation defaults */
    opacity: 0;
    transform: translate(-50%, 10px) scale(0.95);
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.io-flow-tooltip.io-show {
    opacity: 1;
    transform: translate(-50%, -10px) scale(1);
}

/* Make nodes interactive */
[data-flow-node] {
    cursor: pointer !important;
}

[data-flow-node].io-node-active {
    box-shadow: 0 0 40px rgba(140, 37, 244, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-2px) scale(1.02) !important;
    border-color: rgba(140, 37, 244, 0.8) !important;
}

/* ══════════════════════════════════════════════════════════ */
/*  iOBuild Spectacular Loading Animation                     */
/* ══════════════════════════════════════════════════════════ */

.glow-text-orange {
    text-shadow: 0 0 10px rgba(249, 115, 22, 0.6), 0 0 20px rgba(249, 115, 22, 0.4);
}

.io-flow-spectacular-loading {
    pointer-events: all;
}

/* Reverse spin for the inner ring */
@keyframes spin_3s_linear_infinite_reverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

.animate-\\[spin_3s_linear_infinite_reverse\\] {
    animation: spin_3s_linear_infinite_reverse 3s linear infinite;
}

/* Forward spin for the outer ring */
@keyframes spin_2s_linear_infinite {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.animate-\\[spin_2s_linear_infinite\\] {
    animation: spin_2s_linear_infinite 2s linear infinite;
}

/* ══════════════════════════════════════════════════════════ */

.btn-vector-generate {
    background: rgba(15, 15, 20, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(249, 115, 22, 0.4);
    border-radius: 12px;
    padding: 12px 24px;
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    /* Essential for positioning the grid and orb */
    position: relative;
    overflow: hidden;
}

.btn-vector-generate:hover {
    background: rgba(25, 20, 15, 0.85);
    /* Slightly warmer dark background */
    border-color: rgba(249, 115, 22, 0.8);
    box-shadow: 0 0 35px rgba(249, 115, 22, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: scale(1.03);
}

.btn-vector-generate:active {
    transform: scale(0.98);
}

/* Simulated Vector Cartesian Grid */
.vector-grid-bg {
    background-image:
        linear-gradient(rgba(249, 115, 22, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(249, 115, 22, 0.15) 1px, transparent 1px);
    background-size: 16px 16px;
    background-position: center center;
    opacity: 0.5;
    transition: opacity 0.3s ease;
    /* Soft glowing center */
    mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
}

.btn-vector-generate:hover .vector-grid-bg {
    opacity: 0.8;
}

/* ── Orb + trailing line that sweeps left-to-right across the button ── */
.btn-vector-orb {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f97316;
    box-shadow: 0 0 8px #f97316, 0 0 16px #fb923c;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    animation: vector-line-travel 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Trailing line rendered as a pseudo-element behind the dot */
.btn-vector-orb::before {
    content: "";
    position: absolute;
    height: 1px;
    background: linear-gradient(to left, #f97316, transparent);
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    opacity: 0.7;
}

.btn-vector-generate:hover .btn-vector-orb {
    animation-duration: 1.5s;
}

@keyframes vector-line-travel {
    0% {
        left: -10px;
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    92% {
        opacity: 1;
    }

    100% {
        left: calc(100% + 10px);
        opacity: 0;
    }
}

/* ══════════════════════════════════════════════════════════ */
/*  Flow Node Card Flip (hover / tap shows back description) */
/* ══════════════════════════════════════════════════════════ */

.io-node-wrap {
    perspective: 1500px;
}

.io-flip-card-scene {
    position: relative;
    width: 100%;
    height: 100%;
}

.io-flip-card-inner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 14px;
}

/* Hover for desktop, JS active class for mobile */
@media (hover: hover) and (pointer: fine) {
    .io-node-wrap:hover .io-flip-card-inner {
        transform: rotateY(180deg);
    }
}

.io-node-wrap.io-node-active .io-flip-card-inner {
    transform: rotateY(180deg);
}

.io-flip-card-front,
.io-flip-card-back {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 14px;
}

.io-flip-card-back {
    transform: rotateY(180deg);
    background: rgba(10, 8, 20, 0.98);
    border: 1.5px solid rgba(249, 115, 22, 0.6);
    box-shadow: 0 0 35px rgba(249, 115, 22, 0.2);
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.io-flip-card-back .io-back-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #f97316;
}

.io-flip-card-back .io-back-desc {
    font-size: 11px;
    line-height: 1.5;
    color: #e2e8f0;
    margin: 0;
}