:root{--bg-dark:#050508;--glass-bg:rgba(20,20,35,0.65);--glass-border:rgba(255,255,255,0.08);--neon-primary:#00f3ff;--neon-secondary:#bc13fe;--neon-danger:#ff0055;--neon-success:#00ff88;--neon-warning:#ffbb00;--text-primary:#ffffff;--text-secondary:#a0a0b0;--safe-bottom:env(safe-area-inset-bottom,0px)}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter','Segoe UI',sans-serif;background:radial-gradient(circle at 10% 20%,rgb(15,15,35) 0%,var(--bg-dark) 90%);color:var(--text-primary);height:100vh;height:100dvh;display:flex;flex-direction:column;position:relative;overflow:hidden}
body::before{content:'';position:absolute;width:200%;height:200%;background:linear-gradient(rgba(0,243,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,243,255,0.03) 1px,transparent 1px);background-size:clamp(20px,5vw,40px) clamp(20px,5vw,40px);transform:perspective(500px) rotateX(60deg) translateY(-100px) translateZ(-200px);animation:gridMove 20s linear infinite;z-index:0;pointer-events:none}
@keyframes gridMove{0%{transform:perspective(500px) rotateX(60deg) translateY(0) translateZ(-200px)}100%{transform:perspective(500px) rotateX(60deg) translateY(clamp(20px,5vw,40px)) translateZ(-200px)}}
.app-container{position:relative;z-index:1;display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:900px;margin:0 auto;width:100%}
.app-header{background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--glass-border);padding:clamp(10px,2vw,15px) clamp(15px,3vw,25px);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;z-index:10}
.header-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.header-info{flex:1;min-width:0}
.header-info h2{font-size:clamp(14px,2.5vw,16px);margin:0;color:var(--text-primary);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-info p{font-size:clamp(10px,1.8vw,12px);color:var(--neon-primary);margin:2px 0 0 0;letter-spacing:0.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn-change-profile{background:linear-gradient(135deg,var(--neon-secondary) 0%,#7b2cbf 100%);border:none;color:white;padding:clamp(8px,1.5vw,10px) clamp(12px,2vw,16px);border-radius:20px;cursor:pointer;font-size:clamp(11px,2vw,13px);font-weight:600;display:flex;align-items:center;gap:6px;white-space:nowrap;flex-shrink:0;transition:all 0.3s;box-shadow:0 4px 15px rgba(188,19,254,0.3);min-height:40px;-webkit-tap-highlight-color:transparent}
.btn-change-profile:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(188,19,254,0.5)}
.btn-change-profile:active{transform:scale(0.95)}

/* BOTÃO DE FUNÇÕES */
.btn-funcoes{background:rgba(0,243,255,0.1);border:1px solid rgba(0,243,255,0.3);color:var(--neon-primary);padding:clamp(8px,1.5vw,10px) clamp(12px,2vw,16px);border-radius:20px;cursor:pointer;font-size:clamp(11px,2vw,13px);font-weight:600;display:flex;align-items:center;gap:6px;white-space:nowrap;flex-shrink:0;transition:all 0.3s;min-height:40px;-webkit-tap-highlight-color:transparent;font-family:inherit;text-decoration:none}
.btn-funcoes:hover{background:rgba(0,243,255,0.2);border-color:var(--neon-primary);transform:translateY(-2px);box-shadow:0 5px 20px rgba(0,243,255,0.2)}
.btn-funcoes:active{transform:scale(0.95)}

.display-area{background:rgba(0,0,0,0.3);border-bottom:1px solid var(--glass-border);padding:clamp(10px,2vw,20px);flex-shrink:0;transition:all 0.3s ease;min-height:60px;display:flex;align-items:center;justify-content:center}
.display-area:empty{display:none}
.display-content{width:100%;animation:fadeInUp 0.5s ease}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.widget-clock{text-align:center;padding:10px}
.widget-clock .time{font-size:clamp(36px,8vw,56px);font-weight:900;background:linear-gradient(135deg,var(--neon-primary),var(--neon-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:2px;animation:glow 2s ease-in-out infinite alternate}
.widget-clock .date{font-size:clamp(14px,3vw,18px);color:var(--text-secondary);margin-top:5px;letter-spacing:1px}
@keyframes glow{from{filter:drop-shadow(0 0 5px rgba(0,243,255,0.3))}to{filter:drop-shadow(0 0 15px rgba(188,19,254,0.5))}}
.widget-weather{display:flex;align-items:center;justify-content:center;gap:clamp(15px,3vw,25px);padding:15px}
.weather-icon{font-size:clamp(40px,8vw,60px);animation:float 3s ease-in-out infinite}
.weather-info{text-align:left}
.weather-temp{font-size:clamp(28px,6vw,42px);font-weight:800;background:linear-gradient(135deg,#ff8800,#ffbb00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.weather-desc{font-size:clamp(12px,2.5vw,16px);color:var(--text-secondary);margin-top:2px}
.weather-extra{display:flex;gap:15px;margin-top:8px;font-size:clamp(10px,2vw,13px);color:var(--text-secondary)}
.weather-extra span{display:flex;align-items:center;gap:4px}
.widget-generic{text-align:center;padding:15px}
.widget-generic .big-text{font-size:clamp(20px,5vw,32px);font-weight:700;color:var(--text-primary);margin-bottom:5px}
.widget-generic .sub-text{font-size:clamp(12px,2.5vw,16px);color:var(--text-secondary)}
.widget-status{display:flex;align-items:center;justify-content:center;gap:10px;padding:15px}
.widget-status .status-icon{font-size:clamp(32px,7vw,48px)}
.widget-status .status-text{font-size:clamp(16px,4vw,24px);font-weight:700;color:var(--neon-success)}
.chat-messages{flex:1;overflow-y:auto;padding:clamp(15px,3vw,25px);display:flex;flex-direction:column;gap:12px;background:rgba(0,0,0,0.2);-webkit-overflow-scrolling:touch}
.chat-messages::-webkit-scrollbar{width:4px}
.chat-messages::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:3px}
.chat-messages::-webkit-scrollbar-thumb:hover{background:var(--neon-primary)}
.message{max-width:85%;padding:12px 18px;border-radius:18px;animation:fadeIn 0.4s cubic-bezier(0.4,0,0.2,1);font-size:clamp(13px,2.5vw,15px);line-height:1.5;word-wrap:break-word;overflow-wrap:break-word}
@keyframes fadeIn{from{opacity:0;transform:translateY(15px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.message.user{background:linear-gradient(135deg,var(--neon-secondary) 0%,#7b2cbf 100%);color:white;align-self:flex-end;border-bottom-right-radius:4px;box-shadow:0 4px 15px rgba(188,19,254,0.3)}
.message.bot{background:rgba(255,255,255,0.05);color:var(--text-primary);align-self:flex-start;border-bottom-left-radius:4px;border:1px solid var(--glass-border)}
.message .confidence{font-size:10px;color:var(--text-secondary);margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,0.1);text-transform:uppercase;letter-spacing:1px}
.typing-indicator{display:none;align-self:flex-start;background:rgba(255,255,255,0.05);padding:15px 20px;border-radius:18px;border-bottom-left-radius:4px;border:1px solid var(--glass-border)}
.typing-indicator span{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--neon-primary);margin:0 3px;animation:typing 1.4s infinite;box-shadow:0 0 8px var(--neon-primary)}
.typing-indicator span:nth-child(2){animation-delay:0.2s}
.typing-indicator span:nth-child(3){animation-delay:0.4s}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:0.5}30%{transform:translateY(-8px);opacity:1}}
.chat-input-container{background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--glass-border);padding:clamp(10px,2vw,15px) clamp(15px,3vw,20px);padding-bottom:calc(clamp(10px,2vw,15px) + var(--safe-bottom));display:flex;gap:10px;align-items:center;flex-shrink:0;z-index:10}
.chat-input-wrapper{flex:1;display:flex;gap:10px;align-items:center;background:rgba(255,255,255,0.05);border:1px solid var(--glass-border);border-radius:25px;padding:4px;transition:all 0.3s}
.chat-input-wrapper:focus-within{border-color:var(--neon-primary);box-shadow:0 0 15px rgba(0,243,255,0.15);background:rgba(255,255,255,0.08)}
.chat-input-wrapper input{flex:1;padding:clamp(10px,2vw,14px) clamp(12px,2vw,16px);background:transparent;border:none;color:var(--text-primary);font-size:clamp(14px,2.5vw,16px);outline:none;min-width:0}
.chat-input-wrapper input::placeholder{color:var(--text-secondary)}
.btn-audio{width:clamp(36px,7vw,42px);height:clamp(36px,7vw,42px);border-radius:50%;border:none;background:rgba(0,243,255,0.1);color:var(--neon-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.btn-audio:hover{background:rgba(0,243,255,0.2);transform:scale(1.05)}
.btn-audio:active{transform:scale(0.95)}
.btn-audio.listening{background:rgba(255,0,85,0.2);color:var(--neon-danger);animation:pulse 1.5s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,0,85,0.4)}70%{box-shadow:0 0 0 15px rgba(255,0,85,0)}100%{box-shadow:0 0 0 0 rgba(255,0,85,0)}}
.btn-send{padding:clamp(8px,1.5vw,10px) clamp(16px,3vw,24px);background:linear-gradient(135deg,var(--neon-primary) 0%,#007cf0 100%);color:#000;border:none;border-radius:25px;font-size:clamp(12px,2vw,14px);font-weight:700;cursor:pointer;transition:all 0.3s;white-space:nowrap;flex-shrink:0;min-height:40px;display:flex;align-items:center;gap:5px;-webkit-tap-highlight-color:transparent}
.btn-send:hover{transform:translateY(-2px);box-shadow:0 5px 20px rgba(0,243,255,0.4)}
.btn-send:active{transform:scale(0.95)}
.btn-send svg{width:18px;height:18px}
.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.8);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:1000;animation:fadeInOverlay 0.3s ease;padding:20px}
.modal-overlay.active{display:flex;align-items:center;justify-content:center}
@keyframes fadeInOverlay{from{opacity:0}to{opacity:1}}
.modal-content{background:linear-gradient(135deg,rgba(20,20,40,0.95),rgba(10,10,30,0.98));border:1px solid var(--glass-border);border-radius:20px;width:100%;max-width:500px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 40px rgba(188,19,254,0.1);animation:slideUp 0.3s ease}
@keyframes slideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-header{padding:20px 25px;border-bottom:1px solid var(--glass-border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.modal-header h3{font-size:18px;color:var(--neon-primary);text-transform:uppercase;letter-spacing:1px;display:flex;align-items:center;gap:8px}
.btn-close-modal{width:36px;height:36px;border-radius:50%;border:1px solid var(--glass-border);background:rgba(255,255,255,0.05);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:all 0.3s;-webkit-tap-highlight-color:transparent}
.btn-close-modal:hover{background:rgba(255,0,85,0.2);border-color:var(--neon-danger);color:var(--neon-danger)}
.modal-body{padding:20px;overflow-y:auto;flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;align-content:start}
.modal-body::-webkit-scrollbar{width:4px}
.modal-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:3px}
.personality-card{background:rgba(255,255,255,0.03);border:1px solid var(--glass-border);border-radius:15px;padding:15px;cursor:pointer;transition:all 0.3s;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:120px;-webkit-tap-highlight-color:transparent}
.personality-card:hover{border-color:var(--neon-primary);background:rgba(0,243,255,0.05);transform:translateY(-5px);box-shadow:0 10px 25px rgba(0,243,255,0.1)}
.personality-card:active{transform:scale(0.95)}
.personality-card.selected{border-color:var(--neon-secondary);background:linear-gradient(135deg,rgba(188,19,254,0.2) 0%,rgba(0,243,255,0.1) 100%);box-shadow:0 0 20px rgba(188,19,254,0.3);position:relative}
.personality-card.selected::after{content:'✓';position:absolute;top:8px;right:8px;width:24px;height:24px;background:var(--neon-secondary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:bold}
.card-emoji{font-size:clamp(28px,5vw,36px);filter:drop-shadow(0 0 8px rgba(255,255,255,0.3))}
.card-name{font-size:13px;font-weight:600;color:var(--text-primary);line-height:1.2}
.card-desc{font-size:10px;color:var(--text-secondary);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.app-footer{text-align:center;padding:8px;font-size:11px;color:var(--text-secondary);background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--glass-border);flex-shrink:0;z-index:10}
.app-footer strong{color:var(--neon-primary);font-weight:700}
.widget-generic .big-text{font-size:clamp(36px,8vw,56px);font-weight:900;background:linear-gradient(135deg,var(--neon-primary),var(--neon-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:2px;animation:glow 2s ease-in-out infinite alternate;line-height:1.2}
.current-emoji{font-size:clamp(24px,5vw,32px);animation:float 3s ease-in-out infinite;flex-shrink:0;width:45px;height:45px;border-radius:50%;object-fit:cover;border:2px solid var(--neon-primary);box-shadow:0 0 15px rgba(0,243,255,0.3);background:rgba(0,0,0,0.3);overflow:hidden}
.current-emoji img{width:100%;height:100%;border-radius:50%;object-fit:cover}

/* MODAL DE FUNÇÕES */
.modal-funcoes-content{max-width:900px;max-height:85vh}
.modal-funcoes-body{padding:0!important;overflow:hidden!important;display:block!important;grid-template-columns:none!important}
.modal-funcoes-body iframe{width:100%;height:75vh;border:none;border-radius:0 0 20px 20px;background:#0a0a14}

@media (max-width:640px){
.modal-body{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;padding:15px}
.personality-card{padding:12px 10px;min-height:100px;gap:5px}
.card-emoji{font-size:24px}
.card-name{font-size:11px}
.card-desc{font-size:9px}
.btn-send span{display:none}
.btn-send{padding:10px;min-width:40px;justify-content:center}
.chat-input-container{padding:8px 12px;padding-bottom:calc(8px + var(--safe-bottom));gap:8px}
.btn-funcoes{padding:8px 10px;font-size:0;min-width:40px;justify-content:center}
.btn-funcoes::before{content:'📚';font-size:18px}
.modal-funcoes-content{max-width:95%;max-height:90vh}
.modal-funcoes-body iframe{height:70vh}
}
@media (max-width:380px){
.modal-body{grid-template-columns:repeat(auto-fill,minmax(85px,1fr));gap:8px}
.personality-card{padding:10px 8px;min-height:90px}
.header-info h2{font-size:13px}
.btn-change-profile{padding:6px 10px;font-size:11px}
}

/* ============================================
   PLAYER DE MÚSICA - MELHORADO
   ============================================ */
.music-player {
    text-align: center;
    padding: 15px 20px;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.music-cover {
    font-size: 56px;
    margin-bottom: 8px;
    animation: float 3s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(0, 243, 255, 0.3));
}

.music-info {
    margin-bottom: 10px;
}

.music-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.music-category {
    font-size: 10px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    background: rgba(255, 255, 255, 0.04);
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
}

/* Barra de progresso */
.music-progress-container {
    background: rgba(255, 255, 255, 0.08);
    height: 5px;
    border-radius: 3px;
    width: 100%;
    margin: 10px 0 6px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.music-progress-container:hover {
    height: 7px;
}

.music-progress {
    background: linear-gradient(90deg, var(--neon-primary), var(--neon-secondary));
    height: 100%;
    width: 0%;
    border-radius: 3px;
    transition: width 0.1s linear;
    position: relative;
}

.music-progress::after {
    content: '';
    position: absolute;
    right: -4px;
    top: -3px;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0, 243, 255, 0.6);
    opacity: 0;
    transition: opacity 0.2s;
}

.music-progress-container:hover .music-progress::after {
    opacity: 1;
}

/* Tempo */
.music-time {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Controles */
.music-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}

.music-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.music-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--neon-primary);
    transform: scale(1.05);
}

.music-btn:active {
    transform: scale(0.92);
}

.music-btn.active {
    background: rgba(0, 243, 255, 0.15);
    border-color: var(--neon-primary);
    color: var(--neon-primary);
    box-shadow: 0 0 12px rgba(0, 243, 255, 0.2);
}

/* Botão Play - MAIOR E CENTRALIZADO */
.music-btn-play {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--neon-primary), var(--neon-secondary));
    border: none;
    color: #000;
    font-size: 22px;
    box-shadow: 0 4px 20px rgba(0, 243, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.music-btn-play:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(188, 19, 254, 0.45);
    color: #000;
}

.music-btn-play:active {
    transform: scale(0.95);
}

/* Controle de volume */
.music-volume-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}

.music-volume-icon {
    font-size: 16px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.music-volume-icon:hover {
    opacity: 1;
}

.music-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.music-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--neon-primary);
    cursor: pointer;
    box-shadow: 0 0 8px rgba(0, 243, 255, 0.4);
    border: 2px solid #000;
}

.music-volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

/* Label da playlist */
.music-playlist-label {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 5px;
    letter-spacing: 1px;
    opacity: 0.7;
}

/* Player fixo quando ativo */
.display-area:has(.music-player) {
    position: sticky;
    top: 0;
    z-index: 5;
}

@media (max-width: 640px) {
    .music-player {
        padding: 10px 12px;
    }
    .music-cover {
        font-size: 40px;
    }
    .music-btn {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }
    .music-btn-play {
        width: 46px;
        height: 46px;
        font-size: 20px;
    }
    .music-volume-slider {
        width: 70px;
    }
}

/* Player de música fixo */
#musicPlayerArea {
    position: sticky;
    top: 0;
    z-index: 5;
    background: rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid var(--neon-primary);
    box-shadow: 0 4px 15px rgba(0, 243, 255, 0.1);
}

#musicPlayerArea:not(:empty) {
    display: flex !important;
}

/* Quando o player está ativo, reduz padding do display principal */
#musicPlayerArea:not(:empty) + #displayArea:not(:empty) {
    padding-top: 5px;
}

.btn-tts {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.btn-tts.active {
    background: rgba(0, 243, 255, 0.15);
    color: var(--neon-primary);
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.3);
}

.btn-tts:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ============================================
   WIDGET DE VOLUME
   ============================================ */
.widget-volume {
    text-align: center;
    padding: 15px 20px;
    max-width: 350px;
    margin: 0 auto;
    width: 100%;
}

.volume-icon {
    font-size: clamp(40px, 8vw, 56px);
    animation: float 3s ease-in-out infinite;
    margin-bottom: 5px;
}

.volume-number {
    font-size: clamp(36px, 8vw, 52px);
    font-weight: 900;
    background: linear-gradient(135deg, var(--neon-primary), var(--neon-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 2px;
    animation: glow 2s ease-in-out infinite alternate;
    line-height: 1.2;
    margin-bottom: 12px;
}

.volume-bars {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 10px;
    height: 40px;
}

.volume-bar-segment {
    width: 22px;
    border-radius: 4px 4px 0 0;
    transition: all 0.3s ease;
}

.volume-bar-segment:nth-child(1) { height: 8px; }
.volume-bar-segment:nth-child(2) { height: 12px; }
.volume-bar-segment:nth-child(3) { height: 16px; }
.volume-bar-segment:nth-child(4) { height: 20px; }
.volume-bar-segment:nth-child(5) { height: 24px; }
.volume-bar-segment:nth-child(6) { height: 28px; }
.volume-bar-segment:nth-child(7) { height: 32px; }
.volume-bar-segment:nth-child(8) { height: 36px; }
.volume-bar-segment:nth-child(9) { height: 40px; }
.volume-bar-segment:nth-child(10) { height: 44px; }

.volume-label {
    font-size: clamp(12px, 2.5vw, 15px);
    color: var(--text-secondary);
    letter-spacing: 1px;
}

@media (max-width: 640px) {
    .widget-volume {
        padding: 10px 12px;
    }
    .volume-bar-segment {
        width: 16px;
    }
    .volume-bars {
        gap: 3px;
    }
}

.btn-limpar {
    background: rgba(255, 0, 85, 0.1);
    border: 1px solid rgba(255, 0, 85, 0.3);
    color: var(--neon-danger);
    padding: clamp(8px, 1.5vw, 10px) clamp(12px, 2vw, 16px);
    border-radius: 20px;
    cursor: pointer;
    font-size: clamp(11px, 2vw, 13px);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.3s;
    min-height: 40px;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}
.btn-limpar:hover {
    background: rgba(255, 0, 85, 0.2);
    border-color: var(--neon-danger);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(255, 0, 85, 0.2);
}
.btn-limpar:active {
    transform: scale(0.95);
}

.btn-painel {
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.3);
    color: var(--neon-success);
    padding: clamp(8px, 1.5vw, 10px) clamp(12px, 2vw, 16px);
    border-radius: 20px;
    cursor: pointer;
    font-size: clamp(11px, 2vw, 13px);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.3s;
    min-height: 40px;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    text-decoration: none;
}
.btn-painel:hover {
    background: rgba(0, 255, 136, 0.2);
    border-color: var(--neon-success);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 255, 136, 0.2);
}
.btn-painel:active {
    transform: scale(0.95);
}