/* 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; }
}

/* Spinner shown in the titlebar while a live call is being set up. */
.studio-voice-connecting { color: var(--studio-term-accent-2); width: 16px !important; height: 16px !important; }

/* The input row carries a text field plus up to five icon buttons - mic, mode menu, stop-speaking,
   live call, send. On a phone that's more than one line can hold, and squeezing them together left
   the voice controls too tight to hit. Below 700px the field takes the whole first line and the
   controls sit underneath it at full size. */
@media (max-width: 700px) {
    .studio-terminal-inputrow { padding: 8px 10px; }
    .studio-terminal-inputstack { flex-wrap: wrap !important; row-gap: 4px; }

    /* Decoration only, and the widest thing competing with the text field. */
    .studio-terminal-inputstack > .studio-terminal-prompt-glyph { display: none; }

    .studio-terminal-inputstack > .studio-terminal-textfield { flex: 1 0 100% !important; }

    /* Push send to the far edge so it can't be fat-fingered while reaching for the mic. */
    .studio-terminal-inputstack > .studio-terminal-voice { flex: 1 1 auto; }
}

/* Interim speech, shown while a turn is still being recognized. Dimmed and italic so it reads as
   provisional - it's the recognizer's current guess, not something anyone committed to saying. */
.cc-transcript-partial { opacity: 0.7; font-style: italic; color: var(--studio-term-fg-dim); }