/* wwwroot/css/terminal.css
   Terminal chrome: a Windows PowerShell console skin (classic PS blue, Cascadia Mono, a
   Windows-style title bar) so agent chat reads as a console session rather than a chat-bubble UI.

   Lifted out of AIArticleStudio.razor when the command center adopted the same look. The class names
   are unchanged from that page so its markup didn't have to move; both pages now share one
   definition rather than drifting apart. */

.studio-terminal {
    --studio-term-bg: #012456;
    --studio-term-bg-raised: #001a40;
    --studio-term-border: #1f3864;
    --studio-term-fg: #eeeeee;
    --studio-term-fg-dim: #9db4d1;
    --studio-term-accent: #f2f2f2;
    --studio-term-accent-2: #3a96dd;
    --studio-term-warn: #e3b341;
    --studio-term-error: #f14c4c;
    --studio-term-success: #4ec9b0;
    background: var(--studio-term-bg);
    border: 1px solid var(--studio-term-border);
    border-radius: 8px;
    overflow: hidden;
    font-family: 'Cascadia Mono', 'Cascadia Code', Consolas, 'Courier New', monospace;
}

.studio-terminal-titlebar {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 12px;
    background: var(--studio-term-bg-raised);
    border-bottom: 1px solid var(--studio-term-border);
}
.studio-terminal-titleleft { display: flex; align-items: center; gap: 8px; }
.studio-terminal-psicon { color: var(--studio-term-accent-2); font-weight: 700; font-size: 0.8rem; }
.studio-terminal-titletext { color: var(--studio-term-fg-dim); font-size: 0.75rem; }

.studio-chat-scroll { max-height: 55vh; overflow-y: auto; }
.studio-chat-scroll.studio-terminal-body { padding: 12px 16px; }

.studio-line { font-size: 0.85rem; line-height: 1.6; color: var(--studio-term-fg); padding: 6px 0; border-bottom: 1px dashed var(--studio-term-border); overflow-wrap: anywhere; }
.studio-line:last-child { border-bottom: none; }
.studio-prompt-user { color: var(--studio-term-accent); font-weight: 600; }
.studio-prompt-ai { color: var(--studio-term-fg-dim); font-weight: 600; }
.studio-line-user-text { white-space: pre-wrap; color: #e6edf3; }

.studio-markdown p { margin: 0.4em 0; }
.studio-markdown p:first-child { margin-top: 0; }
.studio-markdown p:last-child { margin-bottom: 0; }
.studio-markdown ul, .studio-markdown ol { margin: 0.3em 0 0.3em 1.2em; padding: 0; }
.studio-markdown code { background: var(--studio-term-bg-raised); color: var(--studio-term-accent); padding: 1px 5px; border-radius: 3px; font-size: 0.9em; }
.studio-markdown pre { background: var(--studio-term-bg-raised); border: 1px solid var(--studio-term-border); padding: 8px; border-radius: 4px; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.studio-markdown pre code { background: none; padding: 0; color: inherit; }
.studio-message-copy { opacity: 0.55; color: var(--studio-term-fg-dim) !important; }
.studio-message-copy:hover { opacity: 1; color: var(--studio-term-accent-2) !important; }

.studio-cursor {
    display: inline-block; width: 0.55em; height: 1em; vertical-align: text-bottom;
    background: var(--studio-term-accent); margin-left: 2px;
    animation: studio-cursor-blink 1s step-start infinite;
}
@keyframes studio-cursor-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.studio-terminal .mud-alert { font-family: inherit; background: var(--studio-term-bg-raised) !important; border-radius: 4px; }
.studio-terminal .mud-alert-filled-info { color: var(--studio-term-accent-2) !important; border-left: 3px solid var(--studio-term-accent-2); }
.studio-terminal .mud-alert-filled-warning { color: var(--studio-term-warn) !important; border-left: 3px solid var(--studio-term-warn); }
.studio-terminal .mud-alert-message { color: var(--studio-term-fg); }

.studio-terminal-inputrow { background: var(--studio-term-bg-raised); border-top: 1px solid var(--studio-term-border); padding: 10px 16px; }
.studio-terminal-prompt-glyph { color: var(--studio-term-accent); font-family: inherit; font-weight: 700; align-self: center; }
.studio-terminal-textfield .mud-input-outlined-border { border-color: var(--studio-term-border) !important; }
.studio-terminal-textfield .mud-input-outlined:hover .mud-input-outlined-border,
.studio-terminal-textfield .mud-input-outlined.mud-shrink .mud-input-outlined-border { border-color: var(--studio-term-accent-2) !important; }
.studio-terminal-textfield .mud-input-root, .studio-terminal-textfield input {
    color: #e6edf3 !important; font-family: inherit; caret-color: var(--studio-term-accent);
}
.studio-terminal-textfield .mud-input-slot::placeholder { color: var(--studio-term-fg-dim); opacity: 1; }

.studio-terminal-startover { font-family: inherit; color: var(--studio-term-fg-dim) !important; text-transform: none; letter-spacing: normal; }

/* Voice controls sit inside the dark terminal input row, so the default icon colors vanish. */
.studio-terminal-voice .mud-icon-button { color: var(--studio-term-fg-dim); }
.studio-terminal-voice .mud-icon-button:hover { color: var(--studio-term-accent-2); }
.studio-terminal-voice .mud-icon-button.mud-error-text { color: var(--studio-term-error) !important; }
.studio-terminal-voice .mud-icon-button.mud-warning-text { color: var(--studio-term-warn) !important; }

/* Live-call indicator: who is talking right now.

   In a voice conversation the transcript arrives only after a turn ends, so without this there's a
   silence with nothing on screen and no way to tell whether the microphone heard you. */
.studio-voice-meter { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.studio-voice-meter span {
    display: block; width: 3px; height: 3px; border-radius: 1px;
    background: currentColor;
    animation: studio-voice-bounce 900ms ease-in-out infinite;
}
.studio-voice-meter span:nth-child(2) { animation-delay: 120ms; }
.studio-voice-meter span:nth-child(3) { animation-delay: 240ms; }
.studio-voice-meter span:nth-child(4) { animation-delay: 360ms; }
@keyframes studio-voice-bounce { 0%, 100% { height: 3px; } 50% { height: 14px; } }

.studio-voice-listening { color: var(--studio-term-success); }
.studio-voice-speaking { color: var(--studio-term-accent-2); }

.studio-voice-status {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.8rem; letter-spacing: 0.02em;
}

/* A steady dot while a call is up but nobody is talking, so "connected and idle" is visibly
   different from "connected and hearing you". */
.studio-voice-idle-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--studio-term-fg-dim);
    animation: studio-voice-pulse 2.4s ease-in-out infinite;
}
@keyframes studio-voice-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .studio-cursor,
    .studio-voice-meter span,
    .studio-voice-idle-dot { animation: none; }
    .studio-voice-meter span { height: 8px; }
}

@media (max-width: 600px) {
    .studio-chat-scroll { max-height: 45vh; }
}
