/* The dictation panel - work item #184.

   WHY THIS IS A GLOBAL STYLESHEET AND NOT DictationPanel.razor.css
   ------------------------------------------------------------------
   Scoped CSS stamps a b-xxxxx attribute onto the elements Blazor itself renders, and MudPaper's
   div is rendered by MudPaper - so .dictation-window written in a scoped file would compile to a
   selector that matches nothing, silently. Half this panel's chrome is Mud components. A plain
   stylesheet has no such trap, and the class names are prefixed so nothing else can collide.

   Colours come from MudBlazor's palette variables rather than from literals, which is the lesson
   ChatWidgetPalette was written down after: every colour in that widget was a dark literal in the
   markup, so it stayed dark on a light display and nothing could have noticed. A var() follows the
   theme by construction. */

.dictation-root {
    /* fixed, not absolute: the panel floats over the page and does not scroll with it. Above
       MudBlazor's app bar (1100) and drawer (1200), below its dialogs (1400) - a real dialog that
       somebody opens while dictating must still come out on top, because that one HAS taken the
       page away and a panel floating over it would be unreachable. */
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1300;
}

/* Hidden rather than removed, so the editor's DOM - and the words in it - survive being closed. */
.dictation-hidden {
    display: none;
}

.dictation-window {
    width: 420px;
    max-width: 94vw;
    display: flex;
    flex-direction: column;
    border-radius: 10px !important;
    overflow: hidden;
    background-color: var(--mud-palette-surface) !important;
}

.dictation-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 4px 4px 8px;
    min-height: 42px;
    background-color: var(--mud-palette-background-grey);
    border-bottom: 1px solid var(--mud-palette-lines-default);

    /* The whole header is the drag handle, so a drag must not select the words in it. */
    user-select: none;
    cursor: move;
}

.dictation-grip {
    display: inline-flex;
    align-items: center;
    color: var(--mud-palette-text-secondary);
}

.dictation-title {
    font-weight: 600;
    white-space: nowrap;
}

.dictation-live {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    color: var(--mud-palette-error);
}

/* A pulsing dot, because "Listening" as a word alone is easy to stop seeing. The item's whole
   premise is that recording continues until a button is pressed, so whether it is still running
   has to be readable at a glance from across the room. */
.dictation-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mud-palette-error);
    animation: dictation-pulse 1.2s ease-in-out infinite;
}

@keyframes dictation-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.8); }
}

.dictation-body {
    padding: 10px 12px 4px 12px;
}

.dictation-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-bottom: 4px;
}

.dictation-editor {
    min-height: 160px;
    max-height: 320px;
    overflow-y: auto;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: 0.9rem;
    line-height: 1.5;
    outline: none;
    white-space: pre-wrap;
    word-break: break-word;
}

.dictation-editor:focus {
    border-color: var(--mud-palette-primary);
}

/* The phrase the recogniser has not committed to yet. Greyed and italic so it reads as provisional
   - it is replaced wholesale on the next event, and text that looked settled and then changed
   under the eye is worse than text that announced it was still being decided. */
.dictation-editor .dictation-interim {
    opacity: 0.55;
    font-style: italic;
}

.dictation-hint {
    display: block;
    padding: 4px 2px 0 2px;
    color: var(--mud-palette-text-secondary);
}

.dictation-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 12px 12px;
}