/*
 * HumanProse "Speak instead of typing": the dictation button, its small
 * language choice and the live line under the box (public/js/hp-dictate.js,
 * resources/views/reply/partials/dictate-button.blade.php).
 *
 * Small on purpose: it is loaded in the workspace <head>. Colours come from
 * the --hx-* tokens, so the light paper and the dark library both follow.
 * Logical properties for the Arabic interface. The only motion is the dot
 * that breathes while the microphone is listening; under
 * prefers-reduced-motion it stays still.
 */

.hp-dictate {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    vertical-align: middle;
}
.hp-dictate[hidden],
.hp-dictate-live[hidden],
.hp-dictate-live [hidden] { display: none; }
/* Under a box, the control keeps a little air from what is above it. */
:is(textarea, progress, .hp-dictate-live) + .hp-dictate { margin-top: 6px; }

/* ---------- The button (everywhere but the workspace toolbar, which brings its own look) ---------- */

.hp-dictate:not(.is-workspace) .hp-dictate-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--hx-line-2);
    border-radius: 999px;
    background: var(--hx-surface);
    color: var(--hx-ink-2);
    font: 700 .82rem/1 var(--hx-f-body);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.hp-dictate:not(.is-workspace) .hp-dictate-btn:hover { border-color: var(--hx-quill); background: var(--hx-quill-soft); color: var(--hx-ink); }
.hp-dictate-btn:focus-visible { outline: 2px solid var(--hx-focus); outline-offset: 2px; }
.hp-dictate-icon { flex: none; width: 16px; height: 16px; }

/* Listening: the button says "Stop" in the colour of a live microphone, with a breathing dot. */
.hp-dictate .hp-dictate-btn { position: relative; }
.hp-dictate:is([data-state="listening"], [data-state="asking"]) .hp-dictate-btn,
.hp-dictate:is([data-state="listening"], [data-state="asking"]) .hp-dictate-btn:hover {
    border-color: var(--hx-danger);
    background: var(--hx-danger-soft);
    color: var(--hx-danger);
}
.hp-dictate[data-state="asking"] .hp-dictate-btn,
.hp-dictate[data-state="asking"] .hp-dictate-btn:hover {
    border-color: var(--hx-quill);
    background: var(--hx-quill-soft);
    color: var(--hx-quill-ink);
}
.hp-dictate[data-state="listening"] .hp-dictate-btn::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}
@media (prefers-reduced-motion: no-preference) {
    .hp-dictate[data-state="listening"] .hp-dictate-btn::after { animation: hp-dictate-breathe 1.4s ease-in-out infinite; }
}
@keyframes hp-dictate-breathe {
    50% { opacity: .25; transform: scale(.7); }
}
/* The workspace toolbar colours its icon with a utility class: while listening it follows the button. */
.hp-dictate.is-workspace:is([data-state="listening"], [data-state="asking"]) .hp-dictate-btn :is(svg, i) { color: currentColor; }

/* ---------- The language choice beside the button ---------- */

.hp-dictate-pick {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--hx-line);
    border-radius: 999px;
    background: var(--hx-surface-2);
}
.hp-dictate-pick button {
    min-width: 44px;
    min-height: 30px;
    margin: 0;
    padding: 0 11px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--hx-ink-2);
    font: 700 .78rem/1 var(--hx-f-body);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.hp-dictate-pick button[lang="ar"] { font-family: "HP Arabic", var(--hx-f-body); font-size: .84rem; }
.hp-dictate-pick button:hover { color: var(--hx-ink); }
.hp-dictate-pick button[aria-pressed="true"] { background: var(--hx-royal); color: var(--hx-on-stage); }
.hp-dictate-pick button:focus-visible { outline: 2px solid var(--hx-focus); outline-offset: 2px; }

/* ---------- The live line under the box ---------- */

.hp-dictate-live {
    display: grid;
    gap: 4px;
    margin: 8px 0 0;
    padding: 10px 14px;
    border: 1px solid var(--hx-line);
    border-inline-start: 3px solid var(--hx-quill);
    border-radius: 12px;
    background: var(--hx-surface-2);
    color: var(--hx-ink-2);
    font: 500 .86rem/1.5 var(--hx-f-body);
    text-align: start;
}
.hp-dictate-live p { margin: 0; }
.hp-dictate-live[data-state="listening"] { border-inline-start-color: var(--hx-danger); }
.hp-dictate-live:is([data-state="denied"], [data-state="nomic"], [data-state="network"]) { border-color: color-mix(in srgb, var(--hx-danger) 35%, transparent); border-inline-start-color: var(--hx-danger); background: var(--hx-danger-soft); }
.hp-dictate-status { color: var(--hx-ink); font-weight: 600; }
.hp-dictate-status:empty { display: none; }
.hp-dictate-interim { color: var(--hx-ink-2); font-style: italic; overflow-wrap: anywhere; }
.hp-dictate-tip,
.hp-dictate-privacy { color: var(--hx-ink-3); font-size: .8rem; }
.hp-dictate-privacy { padding-top: 6px; border-top: 1px dashed var(--hx-line-2); }
.hp-dictate-live > .hp-dictate-privacy:first-child,
.hp-dictate-status:empty + .hp-dictate-interim[hidden] + .hp-dictate-tip[hidden] + .hp-dictate-privacy { padding-top: 0; border-top: 0; }

/* In the workspace the line sits between the editor and its counters. */
.workspace-panel > .hp-dictate-live { margin: 0 20px 12px; }

@media (max-width: 640px) {
    .hp-dictate:not(.is-workspace) .hp-dictate-btn { min-height: 42px; }
    .hp-dictate-pick button { min-height: 34px; }
    .workspace-panel > .hp-dictate-live { margin: 0 14px 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .hp-dictate-btn,
    .hp-dictate-pick button { transition: none; }
}