/* Titan Cortex Live API Orb Styling */

#titan-live-orb {
    position: fixed;
    top: 240px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(0, 20, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid #00ff00;
    box-shadow: 0 0 15px #00ff00, inset 0 0 10px #00ff00;
    z-index: 999999;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.25, 1.5, 0.5, 1);
    overflow: hidden;
}

#titan-live-orb:hover {
    transform: scale(1.1);
    box-shadow: 0 0 25px #00ff00, inset 0 0 15px #00ff00;
    animation: orbCrackle 0.5s infinite alternate;
}

#titan-live-orb.live-active {
    width: 250px;
    height: 120px;
    border-radius: 40px;
    background: rgba(0, 30, 0, 0.8);
    box-shadow: 0 0 30px #00ff00, 0 0 10px #00ff00 inset;
    animation: orbPulse 2s infinite ease-in-out;
}

#titan-live-orb.orb-shifted,
#titan-live-orb.panel-open {
    top: 560px !important;
}

#titan-live-orb .orb-icon {
    font-size: 24px;
    color: #00ff00;
    text-shadow: 0 0 5px #00ff00;
}

#titan-live-orb.live-active .orb-icon {
    display: none;
}

#titan-live-orb .waveforms-wrapper {
    display: none;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: space-evenly;
}

#titan-live-orb.live-active .waveforms-wrapper {
    display: flex;
}

#titan-live-orb .model-waveform-container,
#titan-live-orb .waveform-container {
    display: flex;
    width: 100%;
    height: 50%;
    align-items: center;
    justify-content: space-evenly;
    padding: 0 20px;
}

.model-waveform-bar {
    width: 10px;
    height: 10px;
    background: #00ffff;
    border-radius: 5px;
    box-shadow: 0 0 5px #00ffff;
    transition: height 0.05s linear;
}

.waveform-bar {
    width: 10px;
    height: 10px;
    background: #00ff00;
    border-radius: 5px;
    box-shadow: 0 0 5px #00ff00;
    transition: height 0.1s ease;
}

@media (max-width: 768px) {
    #titan-live-orb {
        top: auto !important;
        bottom: 100px !important;
        right: 20px;
    }
    #titan-live-orb.orb-shifted,
    #titan-live-orb.panel-open {
        bottom: 100px !important; /* Locks place natively above mobile tray */
        top: auto !important;
    }
}

@keyframes orbCrackle {
    0% { border-color: #0ff; box-shadow: 0 0 20px #0ff; }
    50% { border-color: #00ff00; box-shadow: 0 0 15px #00ff00; }
    100% { border-color: #fff; box-shadow: 0 0 25px #fff; }
}

@keyframes orbPulse {
    0% { box-shadow: 0 0 20px #00ff00, 0 0 10px #00ff00 inset; }
    50% { box-shadow: 0 0 40px #00ff00, 0 0 20px #00ff00 inset; }
    100% { box-shadow: 0 0 20px #00ff00, 0 0 10px #00ff00 inset; }
}