/* The "Hey Lisa" voice page - a full-page, immersive Jarvis-style HUD, deliberately
   distinct from the boxed .ceo-chat-panel look on /ceo. Same dark background + purple
   (#A855F7) accent as the rest of AgentDashboard's chat UI, built on plain CSS keyframe
   animations - no canvas/WebGL/extra libraries needed for a first version. */

.hey-lisa-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 40px 16px;
    min-height: calc(100vh - 80px);
}

.hey-lisa-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.hey-lisa-orb {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, rgba(168, 85, 247, 0.35), rgba(168, 85, 247, 0.05));
    border: 2px solid rgba(168, 85, 247, 0.4);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.hey-lisa-orb__icon {
    font-size: 3.5rem !important;
    color: #A855F7;
}

/* Idle - listening for the wake phrase: a calm, slow pulse. */
.hey-lisa-orb--idle {
    animation: hey-lisa-pulse-idle 3s ease-in-out infinite;
}

/* Awake - wake phrase heard, waiting for the command: a brighter, faster pulse. */
.hey-lisa-orb--awake {
    border-color: #A855F7;
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.5);
    animation: hey-lisa-pulse-awake 1.2s ease-in-out infinite;
}

/* Thinking - waiting on Lisa's reply: a rotating ring instead of a pulse. */
.hey-lisa-orb--thinking {
    border-color: #A855F7;
    border-top-color: transparent;
    animation: hey-lisa-spin 1s linear infinite;
}

/* Speaking - reply is being read aloud: a steady glow. */
.hey-lisa-orb--speaking {
    border-color: #A855F7;
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.7);
    animation: hey-lisa-glow 0.8s ease-in-out infinite alternate;
}

@keyframes hey-lisa-pulse-idle {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.05); opacity: 1; }
}

@keyframes hey-lisa-pulse-awake {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

@keyframes hey-lisa-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes hey-lisa-glow {
    from { box-shadow: 0 0 25px rgba(168, 85, 247, 0.5); }
    to { box-shadow: 0 0 50px rgba(168, 85, 247, 0.9); }
}

.hey-lisa-caption {
    opacity: 0.85;
}

/* Listening paused after several silent sessions - dim the orb and make it read as a button. */
.hey-lisa-orb--paused {
    animation: none;
    opacity: 0.55;
    cursor: pointer;
    border-style: dashed;
}

.hey-lisa-voice-status {
    opacity: 0.6;
}

.hey-lisa-banner {
    max-width: 480px;
}

.hey-lisa-mute-button {
    margin-top: 8px;
}

.hey-lisa-transcript {
    width: 100%;
    max-width: 640px;
    max-height: 45vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background: #0F1424;
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: var(--m3-shape-lg);
}

.hey-lisa-transcript__empty {
    margin: auto;
    text-align: center;
    opacity: 0.6;
    max-width: 360px;
}

.hey-lisa-line {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border-radius: var(--m3-shape-md);
    max-width: 85%;
}

.hey-lisa-line--user {
    align-self: flex-end;
    background: #A855F7;
    color: #ffffff;
    border-bottom-right-radius: 4px;
}

.hey-lisa-line--lisa {
    align-self: flex-start;
    background: #1E2536;
    color: rgba(226, 232, 240, 0.92);
    border-bottom-left-radius: 4px;
}

.hey-lisa-line__speaker {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
}

.hey-lisa-line__text {
    white-space: pre-wrap;
    word-break: break-word;
}