/* Contenuto completo per dashboard-styles.css - Compatibilità dispositivi 2020+ */
:root{--quantum-dark:#0a0a0a;--quantum-black:#000;--quantum-white:#fff;--quantum-cyan:#0ff;--quantum-purple:#93f;--quantum-neon-green:#39ff14;--quantum-gold:#ffd700;--quantum-red:#dc3545;--quantum-orange:#fd7e14;--quantum-glow-cyan:0 0 20px rgba(0,255,255,.5);--quantum-glow-purple:0 0 20px rgba(153,51,255,.5)}

/* Cross-platform base styles */
body{
    font-family:'Space Grotesk',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
    background:var(--quantum-black);
    color:var(--quantum-white);
    margin:0;
    padding:0;
    min-height:100vh;
    overflow-x:hidden;
    line-height:1.6;
    /* Ottimizzazioni per rendering cross-browser */
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
    position:relative; /* Fix per sfondo che copre tutto */
}

.main-container{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.5rem;
    padding:1rem 2rem;
    width:min(96vw,1600px);
    max-width:1600px;
    margin:0 auto;
    box-sizing:border-box;
    position:relative;
    z-index:1;
    /* Miglioramenti per dispositivi touch */
    touch-action:manipulation;
    /* 🚀 PERFORMANCE: CSS Containment */
    contain:layout;
}

.header{
    grid-column:1/-1;
    text-align:center;
    margin-bottom:0.5rem;
    padding-top:0.5rem;
}

.header h1{
    font-family:'Orbitron',monospace,sans-serif;
    font-size:clamp(1.8rem,4vw,2.2rem);
    font-weight:900;
    background:linear-gradient(45deg,#00ffff,#ffd700);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    color:transparent;
    margin:0;
    letter-spacing:3px;
    text-transform:uppercase;
    min-height:1.2em;
    display:block;
}

.live-users{color:var(--quantum-neon-green);font-size:1.1rem;margin-top:.5rem;text-shadow:0 0 8px rgba(57,255,20,.5);min-height:1.6rem;display:inline-flex;align-items:center;gap:8px}
.live-users .icon{margin-right:8px}

.video-container{
    background:linear-gradient(135deg,#1a1a1a,var(--quantum-dark));
    border:2px solid var(--quantum-cyan);
    border-radius:20px;
    padding:1.5rem;
    box-shadow:var(--quantum-glow-cyan);
    position:relative;
    min-height:424px;
    /* 🚀 OTTIMIZZAZIONE: Rimosso will-change statico per ridurre consumo memoria */
    /* will-change viene applicato solo durante animazioni/transizioni tramite JS */
    backface-visibility:hidden;
    /* 🚀 PERFORMANCE: CSS Containment */
    contain:layout style paint;
    /* 🚀 PERFORMANCE: GPU acceleration */
    transform:translateZ(0);
}

.video-container h2{color:var(--quantum-cyan);text-align:center;margin-bottom:1rem;font-family:'Orbitron',monospace}

.video-wrapper{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    max-width:100%;
    border-radius:15px;
    overflow:hidden;
    background:var(--quantum-black);
    /* 🚀 PERFORMANCE: CSS Containment */
    contain:layout;
}

.video-placeholder{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(135deg,#2a2a2a,#1a1a1a);text-align:center;z-index:1;border-radius:inherit}

/* Ottimizzazioni video per tutti i dispositivi 2020+ */
#localVideo,#remoteVideo{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:inherit;
    display:none;
    /* 🚀 OTTIMIZZAZIONE: image-rendering auto per mobile (più veloce, -10-15% GPU) */
    image-rendering:auto;
    transform:translateZ(0); /* Forza accelerazione hardware */
}

/* 🚀 OTTIMIZZAZIONE: optimizeQuality solo su desktop (GPU più potente) */
@media (min-width: 1024px) and (pointer: fine) {
    #localVideo,#remoteVideo {
        image-rendering:optimizeQuality;
    }
}

/* Reserve intrinsic size to avoid CLS on attach */
#localVideo{aspect-ratio:16/9}
#remoteVideo{aspect-ratio:16/9}

/* Ensure video aligns exactly with placeholder area */
.video-wrapper>video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    /* Massima compatibilità video cross-platform */
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
}

/* Typing indicator default style (moved from inline) */
.typing-indicator{display:none;margin:6px 0;color:#9aa;font-size:.9em}

.controls{grid-column:1/-1;display:flex;gap:15px;justify-content:center;margin:1.5rem 0;align-items:center;flex-wrap:wrap}
.control-btn{--btn-size:60px;--btn-bg:#1f1f22;--btn-bg-hover:#272a30;--btn-border:1px solid rgba(255,255,255,.08);--btn-border-hover:1px solid rgba(255,255,255,.22);--btn-radius:18px;width:var(--btn-size);height:var(--btn-size);border:var(--btn-border);border-radius:var(--btn-radius);font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s ease,box-shadow .18s ease,transform .18s ease,border .18s ease;background:var(--btn-bg);color:#fff;position:relative;font-weight:600;letter-spacing:.5px}
.control-btn .icon, .control-btn svg.icon{width:26px;height:26px;line-height:1;pointer-events:none;flex-shrink:0}
.search-btn{--btn-size:76px;font-size:26px;background:linear-gradient(135deg,#00ffc6,#0094ff 60%);color:#031018;border:0;font-weight:700;position:relative}
.search-btn:hover{background:linear-gradient(135deg,#35ffd6,#14a8ff 60%)}

/* 🚀 NUOVO: Indicatore sistema pronto (pulsino verde) */
.search-btn .ready-indicator{
    position:absolute;
    top:8px;
    right:8px;
    width:12px;
    height:12px;
    background:#00ff88;
    border-radius:50%;
    border:2px solid #031018;
    box-shadow:0 0 8px rgba(0,255,136,0.8),inset 0 0 4px rgba(255,255,255,0.6);
    animation:readyPulse 2s ease-in-out infinite;
    z-index:10;
}
@keyframes readyPulse{
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:0.7;transform:scale(1.1)}
}

/* 🔧 Stato ricerca attiva - pulsante rosso pulsante */
.search-btn.searching{
    background:linear-gradient(135deg,#ff4d4d,#ff1a1a 60%) !important;
    color:#fff !important;
    animation:searchPulse 1.5s ease-in-out infinite;
    box-shadow:0 0 20px rgba(255,77,77,0.6);
}
/* Nascondi indicatore durante ricerca */
.search-btn.searching .ready-indicator{
    display:none !important;
}
@keyframes searchPulse{
    0%,100%{transform:scale(1);box-shadow:0 0 20px rgba(255,77,77,0.6)}
    50%{transform:scale(1.05);box-shadow:0 0 30px rgba(255,77,77,0.8)}
}
.control-btn:hover:not(:disabled){background:var(--btn-bg-hover);border:var(--btn-border-hover);box-shadow:0 2px 10px -2px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);transform:translateY(-2px)}
.control-btn:active:not(:disabled){transform:translateY(0);box-shadow:0 1px 4px -1px rgba(0,0,0,.7)}
/* 🚀 OTTIMIZZAZIONE: Feedback visivo migliorato per bottoni disabilitati */
.control-btn:disabled{
    opacity:.45;
    cursor:not-allowed;
    box-shadow:none;
    filter:grayscale(.2);
    pointer-events:none;
    transition:opacity .3s ease,filter .3s ease;
}

/* Loading state per bottoni */
.control-btn.loading{
    opacity:.6;
    cursor:wait;
    pointer-events:none;
}

.control-btn.loading::after{
    content:"";
    position:absolute;
    width:20px;
    height:20px;
    border:2px solid rgba(255,255,255,.3);
    border-top-color:#fff;
    border-radius:50%;
    animation:btnSpin .6s linear infinite;
}

@keyframes btnSpin{
    to{transform:rotate(360deg)}
}
.control-btn:focus-visible{outline:2px solid var(--quantum-cyan);outline-offset:3px;border-color:var(--quantum-cyan)}
/* End Call button */
.end-btn{--btn-bg:#2c1116;--btn-bg-hover:#36161c;background:linear-gradient(160deg,#ff4457,#c40024 68%);border:0;color:#fff;box-shadow:0 4px 18px -6px rgba(255,40,70,.5)}
.end-btn:hover{box-shadow:0 6px 22px -6px rgba(255,55,90,.55)}
.end-btn .icon, .end-btn svg.icon{width:28px;height:28px}
/* Explicit content button - Professional flame design */
#explicitBtn{
    --btn-bg:#27160b;
    --btn-bg-hover:#311b0d;
    background:linear-gradient(145deg,#ff9d3a 0%,#ff6b35 35%,#ff3d2e 65%,#d81500 100%);
    border:0;
    font-weight:700;
    color:#fff;
    box-shadow:0 4px 20px -4px rgba(255,95,30,.6),0 2px 8px rgba(255,60,20,.4);
    position:relative;
    overflow:hidden;
}
#explicitBtn:hover{
    box-shadow:0 6px 28px -4px rgba(255,95,30,.75),0 3px 12px rgba(255,60,20,.5);
    transform:translateY(-1px);
}
#explicitBtn .icon, #explicitBtn svg.icon{
    width:28px;
    height:28px;
    position:relative;
    z-index:3;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
/* Glow bianco intenso alla base della fiamma */
#explicitBtn::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-25%);
    width:48px;
    height:48px;
    border-radius:50%;
    background:radial-gradient(circle at 50% 70%,rgba(255,255,255,.95) 0%,rgba(255,245,200,.7) 30%,rgba(255,200,100,.4) 50%,rgba(255,255,255,0) 75%);
    filter:blur(8px);
    opacity:.85;
    z-index:1;
    pointer-events:none;
    mix-blend-mode:screen;
}
/* Outer glow pulsante arancione */
#explicitBtn::after{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:50%;
    background:radial-gradient(circle at 50% 50%,rgba(255,120,40,.4) 0%,rgba(255,80,30,.2) 50%,transparent 100%);
    opacity:.7;
    z-index:0;
    pointer-events:none;
}
/* Report button */
.report-btn{--btn-bg:#2d1d05;background:linear-gradient(150deg,#ffb347,#ff8c2b 70%);border:0;color:#1b1205;font-weight:600;box-shadow:0 4px 14px -6px rgba(255,145,40,.4)}
.report-btn:hover{box-shadow:0 6px 20px -6px rgba(255,145,40,.5)}
/* Camera / Audio inactive states (dynamic class suggestion) */
.control-btn.is-off{background:#17181a;border:1px solid #3a3d44;color:#666}
.control-btn.is-off:hover{background:#1f2023;color:#7a7d85}
/* Smooth transition for icon color */
.control-btn i, .control-btn svg{transition:color .25s ease,filter .25s ease}
.chat-container{grid-column:1/-1;border:2px solid var(--quantum-purple);border-radius:20px;padding:1.5rem;box-shadow:var(--quantum-glow-purple);max-height:300px;display:flex;flex-direction:column}
.chat-container h2{color:var(--quantum-purple)}
.chat-messages{flex:1;overflow-y:auto;margin-bottom:1rem;padding:1rem;background:rgba(0,0,0,.3);border-radius:10px;min-height:150px}
.chat-input-container{display:flex;gap:1rem}
.chat-input{flex:1;padding:.8rem;border:2px solid var(--quantum-purple);border-radius:10px;background:rgba(0,0,0,.5);color:var(--quantum-white)}
footer{text-align:center;padding:1.5rem;color:rgba(255,255,255,.5);font-size:.9rem;position:relative;z-index:1}
@media (max-width:768px){.main-container{grid-template-columns:1fr}}
/* Keep original control sizes on mobile for consistent look */

/* Visually hidden content for screen readers */
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.report-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000;align-items:center;justify-content:center}
.report-modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);backdrop-filter:blur(5px)}
.report-modal-content{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;background:linear-gradient(135deg,#1a1a1a,var(--quantum-dark));border:1px solid var(--quantum-purple);border-radius:15px;width:90%;max-width:500px;max-height:80vh;overflow:auto;box-shadow:var(--quantum-glow-purple)}
.report-modal-header{padding:1rem 1.5rem;border-bottom:1px solid rgba(153,51,255,.3);display:flex;justify-content:space-between;align-items:center}
.report-modal-header h3{margin:0;font-family:'Orbitron',monospace;color:var(--quantum-purple)}
.report-close-btn{background:0 0;border:0;color:#fff;font-size:1.5rem;cursor:pointer;opacity:.7}
.report-close-btn:hover{opacity:1}
.report-dsa-badge{background:var(--quantum-orange);color:#000;padding:.2rem .5rem;border-radius:5px;font-size:.8rem;font-weight:700}
.report-modal-body{padding:1.5rem}
.report-field{margin-bottom:1rem}
.report-field label{display:block;margin-bottom:.5rem;color:rgba(255,255,255,.8)}
.report-field select,.report-field textarea{width:100%;padding:.8rem;border:1px solid var(--quantum-purple);border-radius:8px;background:rgba(0,0,0,.5);color:#fff;box-sizing:border-box}
.report-field textarea{min-height:100px;resize:vertical}
.report-info{margin-top:1.5rem;padding:1rem;border-radius:8px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.1);font-size:.9rem}
.report-info p{margin:0 0 .5rem;color:var(--quantum-orange)}
.report-info ul{margin:0;padding-left:1.2rem;color:rgba(255,255,255,.7)}
.report-actions{display:flex;justify-content:flex-end;gap:1rem;padding:1rem 1.5rem;border-top:1px solid rgba(153,51,255,.3)}
.report-btn-cancel,.report-btn-submit{padding:.6rem 1.2rem;border:none;border-radius:8px;cursor:pointer;font-weight:700;transition:all .2s}
.report-btn-cancel{background:#333}
.report-btn-cancel:hover{background:#444}
.report-btn-submit{background:var(--quantum-purple);color:#fff}
.report-btn-submit:hover{background:#a3f}
.report-notification{background:linear-gradient(135deg,#1a1a1a,#2a2a2a);border-radius:10px;padding:1rem;margin-bottom:1rem;width:300px;box-shadow:0 5px 15px rgba(0,0,0,.5);animation:slideIn .3s ease-out forwards}
.report-notification-success{border-left:4px solid var(--quantum-neon-green)}
.report-notification-error{border-left:4px solid var(--quantum-red)}
.report-notification h4{margin:0 0 .5rem;color:#fff}
.report-notification-success h4{color:var(--quantum-neon-green)}
.report-notification-error h4{color:var(--quantum-red)}
.report-notification p{margin:0;color:rgba(255,255,255,.8);font-size:.9rem}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* 🌍 MEDIA QUERIES per compatibilità dispositivi 2020+ */
/* Ultra-wide displays (3440px+) */
@media screen and (min-width:3440px){
    .main-container{max-width:2400px;gap:3rem}
    .header h1{font-size:3.5rem}
    .video-container{min-height:600px}
}

/* Standard desktop (1200px-3439px) */
@media screen and (min-width:1200px) and (max-width:3439px){
    .main-container{gap:2.5rem}
    .header h1{font-size:2.8rem}
}

/* Tablet landscape (768px-1199px) */
@media screen and (min-width:768px) and (max-width:1199px){
    .main-container{
        grid-template-columns:1fr;
        gap:1.5rem;
        padding:1.5rem;
    }
    .header h1{font-size:2.2rem}
    .video-container{
        min-height:350px;
        padding:1rem;
    }
}

/* Mobile devices (320px-767px) - Focus su smartphone 2020+ */
@media screen and (max-width:767px){
    .main-container{
        grid-template-columns:1fr;
        gap:1rem;
        padding:1rem;
        margin:12px auto;
    }
    .header{margin-bottom:0.5rem}
    .header h1{
        font-size:1.8rem;
        line-height:1.2;
    }
    .video-container{
        min-height:280px;
        padding:0.75rem;
        border-radius:15px;
    }
    .video-wrapper{
        border-radius:10px;
    }
    
    /* Ottimizzazioni touch per mobile */
    .control-btn{
        min-width:48px;
        min-height:48px;
        touch-action:manipulation;
    }
    
    /* Riduce motion per dispositivi a basso consumo */
    @media (prefers-reduced-motion:reduce){
        *{animation-duration:0s !important}
        .notification{animation:none}

        /* 🎨 ECCEZIONE: Mantieni animazioni sfondo */
        .elite-professional-bg,
        .elite-professional-bg *,
        .holographic-grid,
        .constellation-node,
        .constellation-link,
        .energy-wave,
        .professional-asteroid,
        .morph-shape,
        .light-source {
            animation-duration: revert !important;
        }
    }
}

/* High DPI displays - comune su dispositivi 2020+ */
@media screen and (-webkit-min-device-pixel-ratio:2),
       screen and (min-resolution:2dppx),
       screen and (min-resolution:192dpi){
    .header h1{
        text-shadow:0 0 1px rgba(0,255,255,0.3);
    }
    #localVideo,#remoteVideo{
        image-rendering:-webkit-optimize-contrast;
        image-rendering:crisp-edges;
    }
}

/* iOS Safari specifico */
@supports (-webkit-touch-callout:none){
    body{
        -webkit-text-size-adjust:100%;
        -webkit-font-smoothing:antialiased;
    }
    .video-wrapper{
        -webkit-transform:translate3d(0,0,0);
        transform:translate3d(0,0,0);
    }
}

/* Android Chrome specifico */
@media screen and (-webkit-min-device-pixel-ratio:1){
    @supports (display:-webkit-box){
        .main-container{
            -webkit-overflow-scrolling:touch;
        }
    }
}

/* Orientamento landscape per mobile */
@media screen and (max-width:767px) and (orientation:landscape){
    .main-container{
        grid-template-columns:repeat(2,1fr);
        gap:0.5rem;
        padding:0.5rem;
    }
    .header{
        grid-column:1/-1;
        margin-bottom:0.25rem;
    }
    .header h1{font-size:1.5rem}
    .video-container{
        min-height:200px;
        padding:0.5rem;
    }
}

/* Dark mode e contrasto alto per accessibilità */
@media (prefers-color-scheme:dark){
    :root{
        --quantum-glow-cyan:0 0 25px rgba(0,255,255,.6);
        --quantum-glow-purple:0 0 25px rgba(153,51,255,.6);
    }
}

@media (prefers-contrast:high){
    .video-container{
        border-width:3px;
        box-shadow:var(--quantum-glow-cyan),inset 0 0 0 1px rgba(255,255,255,.1);
    }
    .header h1{
        text-shadow:0 0 2px rgba(0,255,255,.8);
    }
}

/* Controlli gesture per dispositivi touch moderni */
@media (pointer:coarse){
    .control-btn{
        padding:12px;
        border-radius:50%;
    }
    .video-wrapper{
        cursor:default;
        -webkit-tap-highlight-color:transparent;
    }
}

/* 🎨 BACKGROUND FIX: Ensure elite background covers ENTIRE page including scroll */
/* IMPORTANTE: position absolute (non fixed!) per coprire anche durante scroll */
.elite-professional-bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  min-height: 100% !important;
  height: 100% !important;
  z-index: -100 !important;
  background: radial-gradient(circle at 30% 30%, #001b1b, #000 68%) !important;
  pointer-events: none !important;
}



/* 🎨 RIMOSSO: Non disabilitiamo più le animazioni sfondo con prefers-reduced-motion */
/* Lo sfondo è puramente decorativo e non causa problemi di accessibilità */

/* Additionally, reduce motion on small screens to prevent jank */
@media (max-width: 768px){
  /* 🎨 RIMOSSO: Manteniamo animazioni anche su mobile */
  /* .elite-professional-bg .holographic-grid { animation: none !important; } */
}

/* Notification container (centralized, removed inline styles) */
#notification-container{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  z-index:10001;
  text-align:center;
  max-width:90vw;
}


/* Holographic grid alignment tweaks (centered under the two video quadrants) */
.elite-professional-bg{perspective-origin:50% 60% !important}
.elite-professional-bg .holographic-grid{
  /* anchor a bit above bottom so grid looks centered behind content */
  transform-origin:50% 65% !important;
  /* keep the same tilt/depth, add a tiny vertical shift */
  transform:rotateX(60deg) translateZ(-200px) translateY(-1.5vh) !important;
  /* align vertical grid line with page center (50px cell => offset 25px) */
  background-position:calc(50% - 25px) 0 !important;
}

@media (max-width: 1024px){
  .elite-professional-bg{perspective-origin:50% 55% !important}
  .elite-professional-bg .holographic-grid{
    transform-origin:50% 60% !important;
    transform:rotateX(58deg) translateZ(-180px) translateY(-1vh) !important;
    background-position:50% 0 !important; /* simpler centering on tablets/phones */
  }
}


/* Spazio extra quando camera spenta e non in chiamata (evita attacco tropo alto sullo sfondo) */
body.camera-off:not(.in-call) .main-container{
  padding-top: calc(2rem + 2vh);
}
@media (max-width: 768px){
  body.camera-off:not(.in-call) .main-container{
    padding-top: calc(2rem + 4vh);
  }
}

/* Layout pieno e video più bassi (orizzontali) quando si è in chiamata */
body.in-call .main-container{
  width: min(99vw, 1920px);
  max-width: 1920px;
  padding-top: .75rem; /* più spazio utile alla chat */
  gap: 1rem;           /* più vicino tra i due quadranti */
}
body.in-call .video-container{ min-height: 0 !important; padding: 1rem; }
body.in-call .video-wrapper{ aspect-ratio: auto; height: clamp(220px, 28vh, 480px); max-width: 100%; }

@media (min-width: 1280px){
  body.in-call .main-container{ width: min(99vw, 1920px); max-width: 1920px; }
}


/* In-call: limiti ancora piu bassi su mobile per alzare la chat */
@media (max-width: 768px){
  body.in-call .video-wrapper{ height: clamp(200px, 26vh, 400px); }
}

/* ===================== */
/* ENHANCED CONTROL BTNS */
/* (Modular block inserted - safe to remove/merge) */
/* ===================== */
/* Base circle buttons (upgrade: relative, overflow hidden for glow layers) */
.control-btn{position:relative;overflow:hidden}
.control-btn .icon{display:inline-block;line-height:1;pointer-events:none;width:1em;height:1em}
.control-btn svg.icon{width:28px;height:28px;flex-shrink:0}
/* Search (larger) */
.search-btn svg.icon{width:32px;height:32px}
/* Report smaller tweak */
.report-btn svg.icon{width:26px;height:26px}
/* Live users icon sizing */
.live-users .icon{width:20px;height:20px;display:inline-block;vertical-align:middle}
/* Explicit content button - Enhanced animations */
@media (prefers-reduced-motion:no-preference){
    /* Animazione fiamma realistica - movimento verticale + scala + leggera rotazione */
    .control-btn#explicitBtn svg.icon{
        will-change:transform; /* 🚀 OTTIMIZZAZIONE: Dichiara will-change per performance */
        animation:flamePulse 2.2s ease-in-out infinite;
    }

    /* 🚀 OTTIMIZZAZIONE: Disabilita animazioni durante chiamata per risparmiare GPU */
    body.in-call .control-btn#explicitBtn svg.icon{
        animation:none !important;
        will-change:auto;
    }
    @keyframes flamePulse{
        0%,100%{
            transform:translateY(0) scale(1) rotate(0deg);
            opacity:1;
        }
        25%{
            transform:translateY(-3px) scale(1.05) rotate(-2deg);
            opacity:.95;
        }
        50%{
            transform:translateY(-1px) scale(1.1) rotate(1deg);
            opacity:.9;
        }
        75%{
            transform:translateY(-2px) scale(1.06) rotate(-1deg);
            opacity:.93;
        }
    }

    /* Glow pulsante che pulsa insieme alla fiamma */
    .control-btn#explicitBtn::before{
        animation:flameGlow 2.2s ease-in-out infinite;
    }

    /* 🚀 OTTIMIZZAZIONE: Disabilita glow durante chiamata */
    body.in-call .control-btn#explicitBtn::before{
        animation:none !important;
    }
    @keyframes flameGlow{
        0%,100%{
            opacity:.85;
            transform:translate(-50%,-25%) scale(1);
        }
        50%{
            opacity:.95;
            transform:translate(-50%,-28%) scale(1.1);
        }
    }
}

/* Stato attivo - fiamma verde/blu per indicare modalità attiva */
.control-btn#explicitBtn.explicit-on{
    background:linear-gradient(145deg,#00d9ff 0%,#00b8d4 35%,#0097a7 65%,#006064 100%)!important;
    box-shadow:0 4px 20px -4px rgba(0,200,255,.6),0 2px 8px rgba(0,180,220,.4)!important;
}
.control-btn#explicitBtn.explicit-on::before{
    background:radial-gradient(circle at 50% 70%,rgba(200,255,255,.95) 0%,rgba(150,240,255,.7) 30%,rgba(100,220,255,.4) 50%,rgba(255,255,255,0) 75%)!important;
}
.control-btn#explicitBtn.explicit-on svg.icon{
    filter:drop-shadow(0 0 6px rgba(0,220,255,.8))!important;
}

/* Stato pending - animazione pulsante */
.control-btn#explicitBtn.pulse{
    animation:explicitPulse 1.5s ease-in-out infinite;
}
@keyframes explicitPulse{
    0%,100%{
        transform:scale(1);
        box-shadow:0 4px 20px -4px rgba(255,95,30,.6),0 2px 8px rgba(255,60,20,.4);
    }
    50%{
        transform:scale(1.05);
        box-shadow:0 6px 30px -4px rgba(255,95,30,.8),0 3px 14px rgba(255,60,20,.6);
    }
}
/* End Call button gradient + glow */
.end-btn{background:linear-gradient(145deg,#ff3d46,#c30018 60%,#5a0010)!important;position:relative;}
.end-btn svg.icon{filter:drop-shadow(0 0 4px rgba(255,60,70,.55));}
.end-btn::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 14px 4px rgba(255,40,55,.35),0 0 26px 10px rgba(180,0,30,.25);opacity:.75;transition:opacity .3s ease;}
.end-btn:hover::after{opacity:1;}

/* 🔄 HOURGLASS LOADER - Clessidra animata per matching */
.hourglass-loader {
    width: 120px;
    height: 120px;
    position: relative;
    display: inline-block;
    filter: drop-shadow(0 0 25px rgba(0, 255, 255, 0.8)) drop-shadow(0 0 40px rgba(0, 255, 200, 0.4));
    animation: hourglassGlow 2s ease-in-out infinite;
}

@keyframes hourglassGlow {
    0%, 100% {
        filter: drop-shadow(0 0 25px rgba(0, 255, 255, 0.8)) drop-shadow(0 0 40px rgba(0, 255, 200, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 35px rgba(0, 255, 255, 1)) drop-shadow(0 0 50px rgba(0, 255, 200, 0.6));
    }
}

/* Contenitore SVG-like della clessidra */
.hourglass-loader::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    animation: hourglass-rotate 4s infinite ease-in-out;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 140"><defs><linearGradient id="sandGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%2300ffff;stop-opacity:1"/><stop offset="100%" style="stop-color:%2300d9ff;stop-opacity:0.8"/></linearGradient><linearGradient id="frameGrad" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:%2300ffff;stop-opacity:1"/><stop offset="50%" style="stop-color:%2300ffff;stop-opacity:0.9"/><stop offset="100%" style="stop-color:%2300d9ff;stop-opacity:1"/></linearGradient></defs><g id="hourglass"><defs><filter id="glow"><feGaussianBlur stdDeviation="1.5" result="coloredBlur"/><feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(%23glow)"><path d="M 25 15 L 95 15 L 95 25 Q 95 30 90 30 L 30 30 Q 25 30 25 25 Z" fill="url(%23frameGrad)" stroke="%2300ffff" stroke-width="1.5" opacity="0.95"/><path d="M 30 30 L 60 65 L 90 30" fill="none" stroke="%2300ffff" stroke-width="2" opacity="0.7"/><path d="M 25 110 L 95 110 L 95 120 Q 95 125 90 125 L 30 125 Q 25 125 25 120 Z" fill="url(%23frameGrad)" stroke="%2300ffff" stroke-width="1.5" opacity="0.95"/><path d="M 30 110 L 60 75 L 90 110" fill="none" stroke="%2300ffff" stroke-width="2" opacity="0.7"/><line x1="60" y1="65" x2="60" y2="75" stroke="%2300ffff" stroke-width="1" opacity="0.5"/></g><g id="sand-top" opacity="0.9"><circle cx="55" cy="35" r="2.5" fill="url(%23sandGrad)"/><circle cx="62" cy="40" r="2" fill="url(%23sandGrad)"/><circle cx="48" cy="42" r="2" fill="url(%23sandGrad)"/><circle cx="60" cy="48" r="2.5" fill="url(%23sandGrad)"/><circle cx="52" cy="52" r="1.8" fill="url(%23sandGrad)"/><circle cx="65" cy="50" r="2" fill="url(%23sandGrad)"/><circle cx="58" cy="58" r="2.2" fill="url(%23sandGrad)"/></g><g id="sand-bottom" opacity="0.3"><circle cx="55" cy="95" r="2.5" fill="url(%23sandGrad)"/><circle cx="62" cy="100" r="2" fill="url(%23sandGrad)"/><circle cx="48" cy="102" r="2" fill="url(%23sandGrad)"/></g></g></svg>') center/contain no-repeat;
}

@keyframes hourglass-rotate {
    0% {
        transform: rotateZ(0deg);
    }
    45% {
        transform: rotateZ(0deg);
    }
    50% {
        transform: rotateZ(180deg);
    }
    95% {
        transform: rotateZ(180deg);
    }
    100% {
        transform: rotateZ(180deg);
    }
}