/*
 * Unisono components. Built only from the variables in tokens.css: no colors, shadows,
 * radii or font sizes of their own. Rules of use: DESIGN.md.
 *
 * Layout: sidebar (≥ 900 px) or top bar + tab bar (mobile); pages are <section class="view">.
 */

/* ---------------- Base ---------------- */
html { scroll-padding-top: var(--space-6); }
body { min-height: 100vh; }
h1, h2, h3, p, ol, ul { margin: 0; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
a { color: inherit; }
::selection { background: var(--mark-playing-bg); }

.hidden { display: none !important; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.min-w-0 { min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muted { color: var(--text-secondary); }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
    width: var(--icon-size);
    height: var(--icon-size);
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.icon .fill { fill: currentColor; stroke: none; }

.brand-logo { width: var(--icon-size-s); height: var(--icon-size-s); flex: none; color: var(--text-tertiary); }

/* ---------------- Logo ---------------- */
.lockup { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-primary); font: var(--type-title); font-family: var(--font-display); font-weight: 400; }
.logo-mark { width: var(--space-8); height: var(--space-8); flex: none; }
.logo-tile { fill: var(--action-primary); }
.logo-lines { stroke: var(--action-on-primary); stroke-width: var(--logo-stroke); stroke-linecap: round; fill: none; }
/* 32 px and smaller: thicker stroke, so the shortest line doesn't turn into a dot */
.logo-mark.is-small .logo-lines { stroke-width: var(--logo-stroke-small); }

/* ---------------- Shell ---------------- */
.shell { display: flex; min-height: 100vh; }

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    width: var(--sidebar-width);
    flex: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-4) var(--space-6);
}
.sidebar > .lockup { padding: 0 var(--space-3); }

.side-nav { display: flex; flex-direction: column; gap: var(--space-1); }
.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--control-height);
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    text-align: left;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-item:hover { color: var(--text-primary); }
.nav-item[aria-current="page"] {
    background: var(--surface-raised);
    box-shadow: var(--elev-1);
    color: var(--text-primary);
    font-weight: 500;
}

.side-providers { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-3); }
.side-providers .t-label { color: var(--text-secondary); }
.provider-status { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.provider-status-item {
    display: flex; align-items: center; gap: var(--space-2); width: 100%;
    padding: var(--space-1) 0; border: 0; background: none;
    font: var(--type-small); color: var(--text-primary); text-align: left;
}
.provider-status-name { flex: 1; }

.main {
    flex: 1;
    min-width: 0;
    padding: var(--space-8) var(--space-12) var(--space-16);
    border-left: 1px solid var(--border-subtle);
}
.view { max-width: var(--content-max); margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-6); }
.view.is-narrow { max-width: calc(var(--measure) + 2 * var(--space-6)); }  /* single-column pages: one centered column instead of a card on the left */
.view.is-entering { animation: view-in var(--dur-slow) var(--ease-out); }
@keyframes view-in { from { opacity: 0; transform: translateY(var(--space-2)); } }

.topbar, .tabbar { display: none; }

/* ---------------- Page head ---------------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.page-head > div:first-child { display: flex; flex-direction: column; gap: var(--space-2); }
.eyebrow { display: flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); }
.page-title { font: var(--type-display-m); letter-spacing: var(--tracking-display-m); }
.page-intro { max-width: var(--measure); }
.meta-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* ---------------- Card ---------------- */
.card {
    background: var(--surface-raised);
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-1);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}
.card > .t-label, .card-head .t-label { color: var(--text-secondary); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-top: var(--space-2); }
.narrow-card { max-width: calc(var(--measure) + 2 * var(--space-6)); }
.head-icons { display: flex; gap: var(--space-1); }

/* ---------------- Buttons ---------------- */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-height);
    padding: 0 var(--space-6);
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--action-primary);
    color: var(--action-on-primary);
    font: var(--type-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    white-space: nowrap;
    transition: opacity var(--dur-fast) var(--ease-out);
}
.btn-primary:hover:not(:disabled) { opacity: .88; }
.btn-primary:disabled { opacity: .35; }

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-height);
    padding: 0 var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-primary);
    font: var(--type-button);
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-out);
}
.btn-secondary:hover:not(:disabled) { background: var(--mark-playing-bg); }
.btn-secondary:disabled { opacity: .45; }
.btn-secondary.is-small { min-height: var(--space-8); padding: 0 var(--space-3); font: var(--type-small); font-weight: 500; }
.btn-secondary.is-wide { width: 100%; }

.btn-text {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) 0;
    border: 0;
    background: none;
    color: var(--text-primary);
    font: var(--type-small);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--border-strong);
    text-underline-offset: 3px;
}
.btn-text:hover { text-decoration-color: currentColor; }
.btn-text .icon { width: var(--icon-size-s); height: var(--icon-size-s); }
.btn-text.is-danger { color: var(--status-danger); }
.btn-text:disabled { opacity: .45; text-decoration: none; }

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-height);
    height: var(--control-height);
    flex: none;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.icon-btn:hover:not(:disabled) { background: var(--mark-playing-bg); color: var(--text-primary); }
.icon-btn:disabled { opacity: .35; }
.icon-btn[aria-pressed="true"], .icon-btn[aria-expanded="true"] { background: var(--action-primary); color: var(--action-on-primary); }
.icon-btn.is-small { width: var(--space-8); height: var(--space-8); }

.button-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------------- Inputs ---------------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.field > label, .field-label { font: var(--type-small); color: var(--text-secondary); display: flex; align-items: center; gap: var(--space-2); }

.input {
    width: 100%;
    min-height: var(--input-height);
    padding: 0 var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    color: var(--text-primary);
    font: var(--type-body);
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.input::placeholder { color: var(--text-tertiary); }
.input:focus { outline: none; background: var(--surface-raised); border-color: var(--border-strong); }
.input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.input:disabled { opacity: .55; }
.input.is-mono { font: var(--type-mono); }
.input.is-area { padding: var(--space-3); min-height: calc(var(--space-32) + var(--space-16)); resize: vertical; }
select.input { appearance: none; padding-right: var(--space-8); background-image: none; cursor: pointer; }
.field:has(> select.input), .options-grid .field { position: relative; }

.check { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--type-small); color: var(--text-primary); cursor: pointer; }
.check input { width: var(--space-4); height: var(--space-4); margin: 0; accent-color: var(--action-primary); }

.input-wrap { position: relative; display: flex; }
.input-wrap .input { padding-right: calc(var(--control-height) + var(--space-1)); }
.input-wrap .icon-btn { position: absolute; right: var(--space-1); top: 50%; transform: translateY(-50%); }

.options-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
/* Engine and model each get a full row: model names now carry their price and would be cut off at half width. */
#start-options > .field:has(> #engine-select, > #model-select) { grid-column: 1 / -1; }
.transcript-aside .options-grid.is-two { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }

/* ---------------- Status ---------------- */
.status-dot { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-pill); flex: none; background: var(--text-tertiary); }
.status-dot.is-success { background: var(--status-success); }
.status-dot.is-warning { background: var(--status-warning); }
.status-dot.is-danger { background: var(--status-danger); }
.status-dot.is-info { background: var(--status-info); }
.status-dot.is-idle { background: var(--border-strong); }

.status-dock {
    position: fixed;
    right: var(--space-6);
    bottom: var(--space-6);
    z-index: 60;
    width: min(calc(100vw - 2 * var(--space-4)), calc(var(--measure) * .7));
    pointer-events: none;
}
.status-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4);
    background: var(--surface-raised);
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-3);
    font: var(--type-small);
    pointer-events: auto;
    animation: toast-in var(--dur-base) var(--ease-out);
}
.status-banner .status-dot { margin-top: var(--space-2); }
.status-text { flex: 1; padding-top: var(--space-1); }
.status-banner.status-success .status-dot { background: var(--status-success); }
.status-banner.status-error .status-dot { background: var(--status-danger); }
/* Something is still working: the dot breathes slowly (still under prefers-reduced-motion, see tokens.css) */
.status-banner.status-info .status-dot { background: var(--status-info); animation: status-pulse var(--dur-ambient) var(--ease-in-out) infinite; }
@keyframes status-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(var(--space-2)); } }

.notice {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
}
.notice-actions { grid-column: 2; display: flex; gap: var(--space-4); align-items: center; }
.notice-line { font: var(--type-small); color: var(--text-primary); display: flex; gap: var(--space-2); }
.notice-line::before { content: ""; width: var(--space-2); height: var(--space-2); margin-top: var(--space-2); flex: none; border-radius: var(--radius-pill); background: var(--status-warning); }

/* ---------------- Provider colors (fixed mapping, DESIGN.md) ---------------- */
[data-provider="gladia"] { --p: var(--provider-gladia); --p-strong: var(--provider-gladia-strong); --p-tint: var(--provider-gladia-tint); }
[data-provider="assembly"] { --p: var(--provider-assemblyai); --p-strong: var(--provider-assemblyai-strong); --p-tint: var(--provider-assemblyai-tint); }
[data-provider="elevenlabs"] { --p: var(--provider-elevenlabs); --p-strong: var(--provider-elevenlabs-strong); --p-tint: var(--provider-elevenlabs-tint); }
[data-provider="mistral"] { --p: var(--provider-mistral); --p-strong: var(--provider-mistral-strong); --p-tint: var(--provider-mistral-tint); }
/* Weitere Anbieter: Markenfarbe als Punkt: Farbton aus den offiziellen Logos bzw. Markenfarben (LobeHub-Icons, Simple Icons, Soniox-Favicon), Sättigung und Helligkeit an die gedeckten Unisono-Töne (Salbei, Fjord, Rosenholz) angeglichen; Stark und Tint werden aus ihr gemischt. xAI ist schwarz (im Dunkeln hell), ElevenLabs weiß mit Rand. */
[data-provider="openai"] { --pk: #55B39C; }
[data-provider="groq"] { --pk: #BC6B5E; }
[data-provider="openrouter"] { --pk: #6565BB; }
[data-provider="gemini"] { --pk: #5B84BF; }
[data-provider="anthropic"] { --pk: #B27B68; }
[data-provider="together"] { --pk: #5881BE; }
[data-provider="deepinfra"] { --pk: #688DB2; }
[data-provider="deepgram"] { --pk: #5BB992; }
[data-provider="soniox"] { --pk: #6071A5; }
[data-provider="xai"] { --pk: #1F1C1A; }
[data-provider="azure"] { --pk: #528EBC; }
[data-provider="deepseek"] { --pk: #5E6FC0; }
[data-provider="siliconflow"] { --pk: #7C5CBC; }
[data-provider="scaleway"] { --pk: #834FB7; }
[data-provider="ovhcloud"] { --pk: #5580AD; }
[data-provider="cerebras"] { --pk: #BA745D; }
[data-provider="openai"],
[data-provider="groq"],
[data-provider="openrouter"],
[data-provider="gemini"],
[data-provider="anthropic"],
[data-provider="together"],
[data-provider="deepinfra"],
[data-provider="deepgram"],
[data-provider="soniox"],
[data-provider="xai"],
[data-provider="azure"],
[data-provider="deepseek"],
[data-provider="siliconflow"],
[data-provider="scaleway"],
[data-provider="ovhcloud"],
[data-provider="cerebras"] {
    --p: var(--pk);
    --p-strong: color-mix(in srgb, var(--pk) 62%, #1F1C1A);
    --p-tint: color-mix(in srgb, var(--pk) 15%, transparent);
}
[data-provider="xai"] { --p-strong: #1F1C1A; --p-tint: rgba(31, 28, 26, .08); }
.provider-dot[data-provider="elevenlabs"]:not(.is-empty) { box-shadow: inset 0 0 0 1px var(--border-strong); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) [data-provider="xai"] { --pk: #F2EEE8; --p-strong: #F2EEE8; --p-tint: rgba(242, 238, 232, .10); }
    :root:not([data-theme="light"]) .provider-dot[data-provider="elevenlabs"]:not(.is-empty) { box-shadow: none; }
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) [data-provider="ovhcloud"],
    :root:not([data-theme="light"]) [data-provider="soniox"],
    :root:not([data-theme="light"]) [data-provider="scaleway"]
    { --p: color-mix(in srgb, var(--pk) 55%, #F2EEE8); }
}
:root[data-theme="dark"] [data-provider="ovhcloud"],
:root[data-theme="dark"] [data-provider="soniox"],
:root[data-theme="dark"] [data-provider="scaleway"] { --p: color-mix(in srgb, var(--pk) 55%, #F2EEE8); }
:root[data-theme="dark"] [data-provider="xai"] { --pk: #F2EEE8; --p-strong: #F2EEE8; --p-tint: rgba(242, 238, 232, .10); }
:root[data-theme="dark"] .provider-dot[data-provider="elevenlabs"]:not(.is-empty) { box-shadow: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) [data-provider="openai"],
    :root:not([data-theme="light"]) [data-provider="groq"],
    :root:not([data-theme="light"]) [data-provider="openrouter"],
    :root:not([data-theme="light"]) [data-provider="gemini"],
    :root:not([data-theme="light"]) [data-provider="anthropic"],
    :root:not([data-theme="light"]) [data-provider="together"],
    :root:not([data-theme="light"]) [data-provider="deepinfra"],
    :root:not([data-theme="light"]) [data-provider="deepgram"],
    :root:not([data-theme="light"]) [data-provider="soniox"],
    :root:not([data-theme="light"]) [data-provider="azure"],
    :root:not([data-theme="light"]) [data-provider="deepseek"],
    :root:not([data-theme="light"]) [data-provider="siliconflow"],
    :root:not([data-theme="light"]) [data-provider="scaleway"],
    :root:not([data-theme="light"]) [data-provider="ovhcloud"],
    :root:not([data-theme="light"]) [data-provider="cerebras"] { --p-strong: color-mix(in srgb, var(--pk) 70%, #F2EEE8); }
}

:root[data-theme="dark"] [data-provider="openai"],
:root[data-theme="dark"] [data-provider="groq"],
:root[data-theme="dark"] [data-provider="openrouter"],
:root[data-theme="dark"] [data-provider="gemini"],
:root[data-theme="dark"] [data-provider="anthropic"],
:root[data-theme="dark"] [data-provider="together"],
:root[data-theme="dark"] [data-provider="deepinfra"],
:root[data-theme="dark"] [data-provider="deepgram"],
:root[data-theme="dark"] [data-provider="soniox"],
:root[data-theme="dark"] [data-provider="azure"],
:root[data-theme="dark"] [data-provider="deepseek"],
:root[data-theme="dark"] [data-provider="siliconflow"],
:root[data-theme="dark"] [data-provider="scaleway"],
:root[data-theme="dark"] [data-provider="ovhcloud"],
:root[data-theme="dark"] [data-provider="cerebras"] { --p-strong: color-mix(in srgb, var(--pk) 70%, #F2EEE8); }
.provider-dot { width: var(--space-2); height: var(--space-2); flex: none; border-radius: var(--radius-pill); background: var(--p, var(--text-tertiary)); }
/* No key: a ring instead of a filled dot, so the difference doesn't rely on color alone */
.provider-dot.is-empty { background: transparent; border: 1.5px solid var(--p, var(--text-tertiary)); }

/* Mobile top bar: one dot per engine, button to the API keys page */
.topbar-keys {
    display: none;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--touch-min);
    min-width: var(--touch-min);
    margin-left: auto;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: none;
}
.topbar-keys:hover { background: var(--mark-playing-bg); }

/* ---------------- Start ---------------- */
.start-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.start-aside { display: flex; flex-direction: column; gap: var(--space-6); }
.run-card { gap: var(--space-6); }

.drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: calc(var(--space-32) + var(--space-8));
    padding: var(--space-8) var(--space-6);
    text-align: center;
    background: var(--surface-sunken);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.drop-zone:hover, .drop-zone.is-dragover { border-color: var(--border-strong); }
.drop-zone.is-dragover { background: var(--mark-playing-bg); }
.drop-zone.is-disabled { opacity: .45; pointer-events: none; }
.drop-title { font: var(--type-button); color: var(--text-primary); }

.file-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface-sunken);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.file-name { font: var(--type-button); }

/* ---------------- Aufnahme ---------------- */
.record-card { max-width: calc(var(--measure) + 2 * var(--space-6)); }
#rec-result { max-width: calc(var(--measure) + 2 * var(--space-6)); }
.recorder { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-6); }
.rec-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--control-height); }
.rec-display { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; text-align: center; }
/* Always one line, so the display keeps its height in every state */
#rec-markers-info { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-display-status { display: flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); }
.rec-display-time { font: var(--type-display-l); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
/* Actions by importance: the marker button large and alone, pause / stop below, extras as text */
.rec-actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.rec-actions .rec-mark-btn { max-width: none; }
/* With a finished recording waiting, "Neue Aufnahme" steps back behind "Transkribieren" */
.rec-mark-btn.is-secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--border-strong); font: var(--type-button); letter-spacing: normal; text-transform: none; min-height: var(--touch-min); }
.rec-controls { display: flex; justify-content: center; gap: var(--space-2); width: 100%; }
.rec-controls .btn-secondary { flex: 1; max-width: calc(var(--space-32) + var(--space-16)); min-height: var(--touch-min); }
.rec-controls { min-height: var(--touch-min); }
.is-invisible { visibility: hidden; }
.rec-hint { text-align: center; }
/* Only relevant on phones and tablets */
@media (pointer: fine) { .rec-hint { display: none; } }
.rec-dot { background: var(--border-strong); }
.recorder.is-recording .rec-dot, .recorder.is-paused .rec-dot, .rec-focus .rec-dot { background: var(--status-danger); }

/* Red dot at "Aufnahme" in the navigation while recording */
.nav-rec-dot { display: none; width: var(--space-2); height: var(--space-2); margin-left: auto; border-radius: var(--radius-pill); background: var(--status-danger); }
.is-recording .nav-rec-dot { display: block; animation: rec-pulse var(--dur-ambient) var(--ease-in-out) infinite; }
.tabbar .nav-item { position: relative; }
.tabbar .nav-rec-dot { position: absolute; top: var(--space-2); right: calc(50% - var(--space-4)); margin: 0; }
.recorder.is-recording .rec-dot { animation: rec-pulse var(--dur-ambient) var(--ease-in-out) infinite; }
.recorder.is-paused .rec-dot { background: var(--status-warning); }
@keyframes rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.rec-level { flex: 1; height: var(--line-thin); background: var(--border-subtle); border-radius: var(--radius-pill); overflow: hidden; }
.rec-level-bar { height: 100%; background: var(--text-primary); transform-origin: left; transform: scaleX(0); }
.rec-interrupted { width: 100%; }
.rec-interrupted .status-dot { margin-top: var(--space-2); }

/* Recording on site: full-screen view */
.has-rec-focus, .has-rec-focus body { overflow: hidden; }
.rec-focus {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-6) var(--space-8);
    background: var(--surface-canvas);
    overflow-y: auto;
}
.rec-focus-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.rec-focus-status { display: flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); }
.rec-focus.is-recording .rec-dot { animation: rec-pulse var(--dur-ambient) var(--ease-in-out) infinite; }
.rec-focus.is-paused .rec-dot { background: var(--status-warning); }
.rec-focus-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); text-align: center; }
.rec-focus-time { font: var(--type-display-xl); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.rec-level.is-large { flex: none; width: min(100%, calc(var(--measure) * .6)); }
.rec-mark-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    max-width: calc(var(--measure) * .8);
    min-height: var(--mark-button-height);
    margin: 0 auto;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--action-primary);
    color: var(--action-on-primary);
    font: var(--type-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    transition: transform var(--dur-fast) var(--ease-out);
}
.rec-mark-btn .icon { width: var(--space-6); height: var(--space-6); }
.rec-mark-btn:active { transform: scale(.98); }
.rec-mark-btn.is-confirmed { animation: mark-confirm var(--dur-slow) var(--ease-out); }
@keyframes mark-confirm { 40% { opacity: .6; } }
.rec-focus-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.rec-focus-actions .btn-secondary { min-height: var(--touch-min); }
.rec-focus-hint { text-align: center; max-width: var(--measure); margin: 0 auto; }
.rec-focus .notice { max-width: calc(var(--measure) * .8); margin: 0 auto; }

/* Dimmed: almost black, only the time; a tap brings the view back */
.rec-dim {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: 0;
    background: var(--surface-dim);
    color: var(--text-on-dim);
    cursor: pointer;
}

/* Markers: list in the transcript sidebar and rows between the segments */
.marker-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.marker-item { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); }
.marker-item .icon { width: var(--icon-size-s); height: var(--icon-size-s); color: var(--text-tertiary); }
.marker-item.is-gap .icon { color: var(--status-warning); }
.marker-time { padding: var(--space-1) 0; border: 0; background: none; font: var(--type-mono); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.marker-time:hover { color: var(--text-primary); text-decoration: underline; }
.marker-label { width: 100%; min-height: var(--space-8); padding: 0 var(--space-2); border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; font: var(--type-small); color: var(--text-primary); }
.marker-label:hover { background: var(--surface-sunken); }
.marker-label:focus { outline: none; background: var(--surface-sunken); border-color: var(--border-strong); }
.marker-item .icon-btn { width: var(--space-8); height: var(--space-8); }
.marker-empty { color: var(--text-secondary); }

.marker-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-1) 0;
    padding: var(--space-1) var(--space-2);
    border: 0;
    border-top: 1px dashed var(--border-strong);
    background: none;
    font: var(--type-small);
    font-weight: 500;
    color: var(--text-secondary);
    text-align: left;
}
.marker-row .icon { width: var(--icon-size-s); height: var(--icon-size-s); }
.marker-row .t-mono { color: var(--text-tertiary); }
.marker-row.is-gap .icon { color: var(--status-warning); }
.marker-row:hover { color: var(--text-primary); }
.segment-list.search-only .marker-row { display: none; }

.engine-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3) var(--space-4); }
.engine-row > .t-label { color: var(--text-secondary); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.engine-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--chip-height);
    padding: 0 var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-primary);
    font: var(--type-small);
    font-weight: 500;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.engine-chip:hover { background: var(--mark-playing-bg); }
.engine-chip[aria-pressed="true"] { background: var(--action-primary); border-color: var(--action-primary); color: var(--action-on-primary); }
.chip-note { color: var(--text-tertiary); }
.engine-chip[aria-pressed="true"] .chip-note { color: inherit; opacity: .7; }

.run-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.foot-actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-left: auto; }

/* ---------------- Progress ---------------- */
.progress-card { max-width: calc(var(--measure) + 2 * var(--space-6)); }
.progress-file { display: flex; align-items: center; gap: var(--space-3); }
.progress-file .provider-dot { width: var(--space-3); height: var(--space-3); }
.progress-line { position: relative; height: var(--line-thin); background: var(--border-subtle); border-radius: var(--radius-pill); overflow: hidden; }
.progress-bar {
    height: 100%;
    background: var(--p-strong, var(--text-primary));
    transform-origin: left;
    transform: scaleX(0);
    transition: transform var(--dur-base) var(--ease-out);
}
.progress-bar.is-indeterminate {
    width: 30%;
    transform: none;
    animation: progress-slide calc(var(--dur-ambient) / 4) var(--ease-in-out) infinite;
}
@keyframes progress-slide { from { margin-left: -30%; } to { margin-left: 100%; } }
.progress-steps { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font: var(--type-small); }
.progress-steps li { display: flex; align-items: center; gap: var(--space-2); color: var(--text-tertiary); }
.progress-dot { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-pill); border: 1px solid var(--border-strong); }
.progress-steps li.is-active { color: var(--text-primary); }
.progress-steps li.is-active .progress-dot { background: var(--status-info); border-color: var(--status-info); }
.progress-steps li.is-done { color: var(--text-secondary); }
.progress-steps li.is-done .progress-dot { background: var(--status-success); border-color: var(--status-success); }
.progress-detail { color: var(--text-tertiary); }

/* ---------------- Transcript ---------------- */
.empty-card { max-width: calc(var(--measure) + 2 * var(--space-6)); margin: var(--space-12) auto; padding: var(--space-12); align-items: flex-start; gap: var(--space-4); }
.empty-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-2); }
#transcript-content { display: flex; flex-direction: column; gap: var(--space-6); }

.export-wrap { position: relative; }
.export-menu {
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-2));
    z-index: 40;
    width: min(calc(100vw - 2 * var(--space-4)), calc(var(--space-32) * 2.6));
    padding: var(--space-2);
    background: var(--surface-raised);
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-3);
    display: flex;
    flex-direction: column;
}
.export-menu [role="menuitem"] {
    display: flex; flex-direction: column; gap: 0; align-items: flex-start;
    padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-md);
    background: none; text-align: left;
}
.export-menu [role="menuitem"]:hover, .export-menu [role="menuitem"]:focus-visible { background: var(--mark-playing-bg); }
.export-menu strong { font: var(--type-small); font-weight: 500; }
.export-menu [role="menuitem"] span { font: var(--type-small); color: var(--text-secondary); }
.export-options { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-3); border-top: 1px solid var(--border-subtle); }
.export-options .check:has(input:disabled) { opacity: .5; }

/* Player */
.player-card { padding: var(--space-4) var(--space-6); gap: var(--space-3); }
.player-main { display: flex; align-items: center; gap: var(--space-4); }
.player-play {
    width: var(--play-size); height: var(--play-size); flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--radius-pill);
    background: var(--action-primary); color: var(--action-on-primary);
}
.player-play:disabled { opacity: .35; }
.timeline {
    position: relative;
    flex: 1;
    min-width: 0;
    height: calc(var(--wave-height) + var(--space-2) + var(--speaker-lane-height));
    cursor: pointer;
    touch-action: none;
    border-radius: var(--radius-xs);
}
.timeline canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.timeline-hover {
    position: absolute;
    bottom: calc(100% + var(--space-1));
    transform: translateX(-50%);
    padding: var(--space-1) var(--space-2);
    background: var(--action-primary);
    color: var(--action-on-primary);
    border-radius: var(--radius-sm);
    font: var(--type-mono);
    white-space: nowrap;
    pointer-events: none;
}
.player-controls { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding-left: calc(var(--play-size) + var(--space-4)); }
.rate-select {
    height: var(--space-8);
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    font: var(--type-mono);
    appearance: none;
    cursor: pointer;
}
.player-follow { margin-left: auto; }

.transcript-grid { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--sidebar-width) + var(--space-24)); gap: var(--space-6); align-items: start; }
.transcript-aside { display: flex; flex-direction: column; gap: var(--space-6); position: sticky; top: var(--space-6); }
.transcript-card { gap: var(--space-2); padding: var(--space-4) var(--space-6) var(--space-6); }

/* Search */
.search-bar { display: flex; flex-direction: column; gap: var(--space-2); position: sticky; top: 0; z-index: 5; padding: var(--space-2) 0; background: var(--surface-raised); }
.search-row { display: flex; align-items: center; gap: var(--space-1); }
.search-field {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: var(--space-2);
    height: var(--control-height);
    padding: 0 var(--space-3);
    background: var(--surface-sunken);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
}
.search-field:focus-within { background: var(--surface-raised); border-color: var(--border-strong); }
.search-input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--text-primary); font: var(--type-small); }
.search-input::placeholder { color: var(--text-tertiary); }
#search-count.is-empty { color: var(--status-danger); }
.search-row .btn-secondary { min-height: var(--control-height); }

/* Segments */
.segment-list { display: flex; flex-direction: column; }
.segments-empty { color: var(--text-secondary); padding: var(--space-6) 0; }
.segment {
    display: grid;
    grid-template-columns: calc(var(--space-16) + var(--space-2)) minmax(0, 1fr);
    column-gap: var(--space-4);
    padding: var(--space-4) var(--space-2);
    border-radius: var(--radius-md);
    transition: background var(--dur-base) var(--ease-out);
}
.seg-meta { display: contents; }
.seg-time {
    grid-column: 1; grid-row: 1 / span 2;
    align-self: start;
    padding: var(--space-1) 0 0;
    border: 0; background: none;
    font: var(--type-mono);
    color: var(--text-tertiary);
    text-align: left;
    font-variant-numeric: tabular-nums;
}
button.seg-time:hover { color: var(--text-primary); text-decoration: underline; }
.seg-head { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--space-8); }
.seg-text-wrap { grid-column: 2; position: relative; max-width: var(--measure); }

/* Speaker label: 20 px square with the abbreviation + name (DESIGN.md) */
.spk-1 { --spk: var(--speaker-1); --spk-on: var(--speaker-on-1); }
.spk-2 { --spk: var(--speaker-2); --spk-on: var(--speaker-on-2); }
.spk-3 { --spk: var(--speaker-3); --spk-on: var(--speaker-on-3); }
.spk-4 { --spk: var(--speaker-4); --spk-on: var(--speaker-on-4); }
.spk-none { --spk: var(--border-strong); --spk-on: var(--text-primary); }
.spk-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 100%;
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
    border-radius: var(--radius-sm);
    background: var(--speaker-label-bg);
}
.spk-abbr {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--speaker-badge-size); height: var(--speaker-badge-size); flex: none;
    border-radius: var(--radius-xs);
    background: var(--spk);
    color: var(--spk-on);
    font: var(--type-badge);
    letter-spacing: 0;
}
.seg-speaker {
    min-width: 0;
    max-width: calc(var(--space-32) * 1.6);
    padding: 0 var(--space-4) 0 0;
    border: 0;
    background: none;
    appearance: none;
    color: var(--text-primary);
    font: var(--type-name);
    text-overflow: ellipsis;
    cursor: pointer;
}
.seg-speaker:focus { outline: none; }
.spk-label:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.spk-caret { position: absolute; right: var(--space-1); width: var(--space-3); height: var(--space-3); pointer-events: none; color: var(--text-tertiary); }

.seg-actions { display: flex; gap: var(--space-1); opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.segment:hover .seg-actions, .segment:focus-within .seg-actions { opacity: 1; }
.seg-actions button {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--space-8); height: var(--space-8);
    border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-tertiary);
}
.seg-actions button:hover { background: var(--mark-playing-bg); color: var(--text-primary); }
.seg-actions .seg-delete:hover { color: var(--status-danger); }
.seg-actions .icon { width: var(--icon-size-s); height: var(--icon-size-s); }
@media (hover: none) { .seg-actions { opacity: 1; } }

.seg-text, .seg-marks {
    font: var(--type-body-l);
    letter-spacing: var(--tracking-body);
    padding: var(--space-1) 0;
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: normal;
}
.seg-text {
    display: block;
    width: 100%;
    position: relative;
    z-index: 1;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    resize: none;
    overflow: hidden;
}
.seg-text:focus { outline: none; }
.segment:focus-within { background: var(--mark-playing-bg); }
.native-autosize .seg-text { field-sizing: content; }
.seg-marks { position: absolute; inset: 0; color: transparent; pointer-events: none; }
.seg-marks mark { color: transparent; background: var(--mark-playing-bg); border-radius: var(--radius-xs); }
.seg-marks mark.is-current {
    background: var(--border-strong);
    text-decoration: underline var(--line-thin) var(--text-primary);
    text-underline-offset: 4px;
    text-decoration-skip-ink: none;
}
.segment-list.search-only .segment:not(.has-match) { display: none; }

/* The segment currently playing: --mark-playing-bg + 2 px line (DESIGN.md "Gespieltes Wort") */
.segment { position: relative; }
.segment.is-active { background: var(--mark-playing-bg); }
.segment.is-active::before {
    content: "";
    position: absolute;
    left: 0; top: var(--space-3); bottom: var(--space-3);
    width: var(--line-thin);
    border-radius: var(--radius-pill);
    background: var(--text-primary);
}
.segment.is-flash { animation: seg-flash var(--dur-slow) var(--ease-out) 2; }
@keyframes seg-flash { 50% { background: var(--border-strong); } }

/* Speakers & talk time */
.speaker-panel { display: flex; flex-direction: column; gap: var(--space-4); }
.talk-bar { display: flex; gap: var(--line-thin); height: var(--speaker-bar-height); border-radius: var(--radius-pill); overflow: hidden; background: var(--speaker-lane); }
.talk-bar span { height: 100%; background: var(--spk); min-width: var(--line-thin); }
.talk-bar .is-pause { background: transparent; }
.speaker-list { display: flex; flex-direction: column; gap: var(--space-2); }
.speaker-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.speaker-name {
    width: 100%;
    min-height: var(--space-8);
    padding: 0 var(--space-2);
    margin-left: calc(-1 * var(--space-2));
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    font: var(--type-small);
    font-weight: 500;
    color: var(--text-primary);
}
.speaker-name:hover { background: var(--surface-sunken); }
.speaker-name:focus { outline: none; background: var(--surface-sunken); border-color: var(--border-strong); }
.speaker-share { font: var(--type-mono); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.speaker-row.is-pause .speaker-label { font: var(--type-small); color: var(--text-secondary); }
.speaker-row.is-pause .spk-abbr { background: var(--speaker-lane); color: var(--text-tertiary); }
.speaker-add { align-self: flex-start; }

.summary-card { gap: var(--space-3); }
.llm-logo { display: inline-flex; }

/* ---------------- Keys ---------------- */
.key-list { display: flex; flex-direction: column; }
.key-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) calc(var(--space-24) + var(--space-4)) auto;
    grid-template-areas: "provider input status actions" "more more more more";
    align-items: center;
    gap: var(--space-3) var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border-subtle);
}
.key-row:last-child { border-bottom: 0; padding-bottom: 0; }
.key-provider { grid-area: provider; display: flex; align-items: baseline; gap: var(--space-3); }
.key-provider .provider-dot { transform: translateY(calc(-1 * var(--line-thin))); }
.key-name { display: flex; align-items: center; gap: var(--space-2); font: var(--type-button); }
.key-input { grid-area: input; }
.key-status { grid-area: status; display: inline-flex; align-items: center; gap: var(--space-2); }
.key-actions { grid-area: actions; display: flex; align-items: center; gap: var(--space-4); justify-content: flex-end; }
.key-more { grid-area: more; display: flex; flex-direction: column; gap: var(--space-2); }
.key-more:empty { display: none; }
.key-settings { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--space-3) var(--space-4); max-width: 48rem; }
.key-feedback { display: flex; align-items: flex-start; gap: var(--space-2); }
.key-feedback .status-dot { margin-top: var(--space-2); }
.key-feedback.is-success .status-dot { background: var(--status-success); }
.key-feedback.is-danger .status-dot { background: var(--status-danger); }
.key-feedback.is-info .status-dot { background: var(--status-info); }

.key-guide summary {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font: var(--type-small); font-weight: 500; color: var(--text-secondary);
    cursor: pointer; list-style: none;
}
.key-guide summary::-webkit-details-marker { display: none; }
.key-guide summary .icon { width: var(--icon-size-s); height: var(--icon-size-s); }
.key-guide summary:hover { color: var(--text-primary); }
.key-guide[open] summary { color: var(--text-primary); }
.key-guide ol, .key-guide ul { padding-left: var(--space-6); margin: var(--space-3) 0; display: flex; flex-direction: column; gap: var(--space-1); font: var(--type-small); color: var(--text-secondary); max-width: var(--measure); }
.key-guide strong { color: var(--text-primary); font-weight: 500; }
.key-guide.is-general summary { font: var(--type-button); color: var(--text-primary); }

/* ---------------- Settings ---------------- */
.segmented { display: inline-flex; align-self: flex-start; padding: var(--space-1); gap: var(--space-1); background: var(--surface-sunken); border-radius: var(--radius-pill); }
.segmented button {
    min-height: var(--space-8); padding: 0 var(--space-4);
    border: 0; border-radius: var(--radius-pill); background: none;
    font: var(--type-small); font-weight: 500; color: var(--text-secondary);
}
.segmented button[aria-checked="true"] { background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--elev-1); }

.data-list { display: flex; flex-direction: column; }
.data-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--border-subtle); }
.data-title { font: var(--type-button); }

/* ---------------- Tablet ---------------- */
@media (max-width: 1200px) {
    .main { padding: var(--space-8) var(--space-6) var(--space-16); }
    .start-grid, .transcript-grid { grid-template-columns: minmax(0, 1fr); }
    .transcript-aside { position: static; }
    .start-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .key-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "provider status" "input input" "actions actions" "more more"; }
    .key-actions { justify-content: flex-start; }
}

/* ---------------- Mobile ---------------- */
@media (max-width: 900px) {
    .sidebar { display: none; }
    .topbar {
        display: flex; align-items: center;
        height: var(--topbar-height);
        padding: 0 var(--space-4);
        position: sticky; top: 0; z-index: 30;
        background: var(--surface-canvas);
        border-bottom: 1px solid var(--border-subtle);
    }
    .topbar-keys { display: flex; }
    .main { padding: var(--space-6) var(--space-4) calc(var(--tabbar-height) + var(--space-12)); border-left: 0; }
    .tabbar {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
        height: var(--tabbar-height);
        padding: 0 var(--space-2);
        background: var(--surface-raised);
        box-shadow: var(--elev-2);
    }
    .tabbar .nav-item {
        flex: 1;
        flex-direction: column;
        justify-content: center;
        gap: var(--space-1);
        min-height: var(--touch-min);
        min-width: var(--touch-min);
        padding: 0;
        font: var(--type-name);
        color: var(--text-tertiary);
    }
    .tabbar .nav-item[aria-current="page"] { background: none; box-shadow: none; color: var(--text-primary); }
    .status-dock { right: var(--space-4); bottom: calc(var(--tabbar-height) + var(--space-3)); }
    .page-title { font: var(--type-heading); letter-spacing: var(--tracking-heading); }

    /* Recording on the phone: the page is the on-site view. Intro and full-screen option go,
       the card fills the screen so the marker button sits in the thumb zone at the bottom. */
    .record-intro, #rec-focus-open { display: none !important; }
    #view-record { gap: var(--space-4); }
    .record-card {
        min-height: calc(100dvh - var(--topbar-height) - var(--tabbar-height) - var(--space-24) - var(--space-8));
    }
    .record-card .recorder { flex: 1; }
    /* Display anchored at the top, actions at the bottom: neither moves when a state
       changes (the free space in between absorbs it). */
    .record-card .rec-display { flex: none; padding-top: var(--space-12); }
    .record-card .rec-actions { margin-top: auto; }
    .rec-actions { width: 100%; }
    .rec-actions > .btn-primary, .rec-actions > .btn-secondary { width: 100%; }
    #rec-result:not(.hidden) + .record-card { min-height: 0; }
    #rec-result .button-row { flex-direction: column; }
    #rec-result .button-row > * { width: 100%; min-height: var(--touch-min); }
    .start-aside { grid-template-columns: minmax(0, 1fr); }
    .card { padding: var(--space-4); }
    .run-card { gap: var(--space-4); }
    .options-grid { grid-template-columns: minmax(0, 1fr); }
    .card-foot .btn-primary { width: 100%; }
    .foot-actions { width: 100%; }
    .player-card { padding: var(--space-4); }
    .player-controls { padding-left: 0; }
    .transcript-card { padding: var(--space-2) var(--space-4) var(--space-4); }
    .segment { grid-template-columns: minmax(0, 1fr); padding: var(--space-3) var(--space-1); }
    .seg-time { grid-row: 1; grid-column: 1; justify-self: end; padding-top: var(--space-2); }
    .seg-head { grid-column: 1; grid-row: 1; padding-right: calc(var(--space-16) + var(--space-2)); }
    .seg-text-wrap { grid-column: 1; }
    .seg-text, .seg-marks { font: var(--type-body); }
    .head-actions { width: 100%; }
    .export-wrap { margin-left: auto; }
    .search-row { flex-wrap: wrap; justify-content: flex-end; }
    .search-field { flex-basis: 100%; }
    .search-row .icon-btn { width: var(--touch-min); height: var(--touch-min); }
    .head-actions .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .head-actions .btn-secondary { padding: 0 var(--space-3); }
    .data-row { flex-wrap: wrap; }
}

/* ---------------- Diktat ---------------- */
.dictation-card { max-width: calc(var(--measure) + 2 * var(--space-6)); }
.dictation-card .rec-mark-btn { user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.dictation-card .rec-mark-btn:disabled { opacity: .55; }
.dictation-card .rec-display { padding: 0; }
.dict-keys-hint { text-align: center; }

/* ---------------- Projects, tasks, meeting ---------------- */
.project-list { display: flex; flex-direction: column; gap: var(--space-4); }
.project-card { display: flex; flex-direction: column; gap: var(--space-3); }
.project-card.is-current { box-shadow: var(--elev-1), inset 0 0 0 1px var(--border-strong); }
.project-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.project-head .project-name { flex: 1 1 14rem; font: var(--type-button); }
.person-list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.person-row, .person-add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; }
.person-add .btn-primary, .person-add .btn-secondary { white-space: nowrap; }
.narrow-card .person-add { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 560px) { .person-row, .person-add { grid-template-columns: minmax(0, 1fr) auto; } .person-row > :nth-child(2), .person-add > :nth-child(2) { grid-column: 1; } }

.transcript-project { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.transcript-project .input { width: auto; min-width: 12rem; min-height: var(--space-8); }

.task-card { gap: var(--space-3); }
.task-list { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.task-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2); align-items: start; }
.task-row > input[type="checkbox"] { margin-top: var(--space-3); }
.task-fields { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.task-text { resize: none; overflow: hidden; min-height: var(--input-height); padding-top: var(--space-2); padding-bottom: var(--space-2); }
.task-meta { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.task-meta .input { flex: 1 1 8.5rem; width: auto; min-width: 0; min-height: var(--space-8); font: var(--type-small); }
.task-row.is-done .task-text { text-decoration: line-through; color: var(--text-tertiary); }

#meeting-card .card-head h2 { display: inline-flex; align-items: center; gap: var(--space-2); }
#meeting-body { display: flex; flex-direction: column; gap: var(--space-3); }
.meeting-consent { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.meeting-levels { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-3); align-items: center; }
.meeting-recording .rec-display-time { margin: 0; }
.meeting-last { border-top: 1px solid var(--border-subtle); padding-top: var(--space-3); }
.dict-live-text {
    max-height: 9.5em; overflow-y: auto;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md); background: var(--surface-sunken);
    font: var(--type-body); color: var(--text-primary); white-space: pre-wrap;
}
.dict-live-text.is-placeholder { color: var(--text-tertiary); font-style: italic; }
.dict-live-options { display: flex; flex-direction: column; gap: var(--space-3); }
.dict-live-options .field { max-width: 24rem; }
#dict-key-missing { text-align: center; color: var(--text-primary); }
#dict-style-hint {
    max-width: var(--measure);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.dict-rerun { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.dict-rerun .input { width: auto; flex: 0 1 calc(var(--space-32) + var(--space-24)); min-width: var(--space-32); }
/* A closed <details> still gets the card's gap for its (empty) content box; the spacing comes from the content itself. */
.dict-options, .dict-styles-manage { gap: 0; }
.dict-options > :not(summary), .dict-styles-manage > :not(summary) { margin-top: var(--space-4); }
.dict-options > .check { display: flex; }

.dict-style-list, .dict-history { list-style: none; padding: 0; display: flex; flex-direction: column; }
.dict-style-item { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--border-subtle); }
.dict-style-prompt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: var(--measure); }
.dict-style-actions { display: flex; gap: var(--space-4); flex: none; }
.dict-style-form { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }

.dict-history-item { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) 0; border-top: 1px solid var(--border-subtle); }
.dict-history-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.dict-history-actions { display: flex; gap: var(--space-1); }
.dict-history-text { font: var(--type-small); max-width: var(--measure); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }

/* Red dot at "Diktat" while dictating */
.nav-dict-dot { display: none; width: var(--space-2); height: var(--space-2); margin-left: auto; border-radius: var(--radius-pill); background: var(--status-danger); }
.is-dictating .nav-dict-dot { display: block; animation: rec-pulse var(--dur-ambient) var(--ease-in-out) infinite; }
.tabbar .nav-dict-dot { position: absolute; top: var(--space-2); right: calc(50% - var(--space-4)); margin: 0; }

/* Replacements on the "Fachbegriffe" page */
.repl-list { display: flex; flex-direction: column; }
.repl-row { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) 0; border-top: 1px solid var(--border-subtle); }
.repl-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.repl-options { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.repl-options .icon-btn { margin-left: auto; }

@media (max-width: 900px) {
    .dict-rerun .input, .dict-rerun .btn-secondary { flex: 1 1 100%; width: 100%; }
    .dictation-card .rec-mark-btn { min-height: var(--mark-button-height); }
    .repl-fields { grid-template-columns: minmax(0, 1fr); }
    .repl-arrow { display: none; }
    .tabbar .nav-item span:not(.nav-rec-dot):not(.nav-dict-dot) { font-size: 11px; }
}

/* ---------------- Diktat: Aufgabe, Umformulieren, Statistik, schwebendes Fenster ---------------- */
.dict-task { align-self: center; }
.dict-mini-row { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.dict-reword { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.dict-reword-line { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dict-reword-line .input { flex: 1 1 var(--space-48, 240px); min-width: 0; }

.dict-stats { display: flex; flex-direction: column; gap: var(--space-4); }
.stat-hero { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-4) 0; text-align: center; }
.stat-hero-value { font: var(--type-display-m); letter-spacing: var(--tracking-display-m); font-variant-numeric: tabular-nums; }
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.stat-card { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); }
.stat-value { font: var(--type-heading); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.stat-extra { font-size: 12px; }
.stat-week { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2); height: calc(var(--space-16) + var(--space-8)); padding-top: var(--space-2); }
.stat-day { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--space-1); height: 100%; }
.stat-bar { width: 55%; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--border-strong); }
.stat-bar.has-words { background: var(--text-primary); }

/* ---------------- Kugeln (Wolke / Welle), wie der schwebende Button der App ---------------- */
.orb { position: relative; display: block; flex: none; border-radius: 50%; }
.orb canvas { display: block; border-radius: 50%; }
.orb-wave canvas { border-radius: 0; }
.orb-flat { width: 100%; height: 100%; border-radius: 50%; opacity: .88; }
.orb-spinner { position: absolute; inset: 0; margin: auto; width: 28%; height: 28%; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff; opacity: 0; pointer-events: none; }
.orb-spinner.is-on { opacity: 1; animation: orb-spin 900ms linear infinite; }
@keyframes orb-spin { to { transform: rotate(360deg); } }
.orb-glyph { position: absolute; inset: 0; margin: auto; width: 34%; height: 34%; opacity: 0; transform: scale(.7); transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out); pointer-events: none; }
.orb-glyph.is-on { opacity: 1; transform: scale(1); }
.orb-glyph svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); }
.orb-glyph.is-success .g-err, .orb-glyph.is-error .g-ok { display: none; }
@media (prefers-reduced-motion: reduce) { .orb-spinner.is-on { animation-duration: 2.4s; } .orb-glyph { transition: none; } }

.palette-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.palette-dot { width: 32px; height: 32px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px var(--border-strong); }
.palette-dot[aria-checked="true"] { box-shadow: 0 0 0 2px var(--surface-canvas), 0 0 0 4px var(--text-primary); }
.palette-dot:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.dict-mini-preview { display: flex; justify-content: center; padding: var(--space-2) 0; cursor: pointer; }

/* The floating window (Document Picture-in-Picture) uses the same style sheets */
.mini-body { margin: 0; background: var(--surface-canvas); color: var(--text-primary); font: var(--type-body); overflow: hidden; }
.mini-bubble { position: relative; box-sizing: border-box; min-height: 100vh; padding: var(--space-4) var(--space-3); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.mini-stage { position: relative; display: flex; align-items: center; justify-content: center; margin-top: var(--space-2); }
.mini-orb { border-radius: 50%; cursor: pointer; touch-action: none; user-select: none; transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out); }
.mini-orb:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.mini-stage.is-dim .mini-orb { transform: scale(.5); opacity: .45; }
.mini-cancel { position: absolute; top: 0; right: calc(-1 * var(--space-2)); width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--elev-2); cursor: pointer; transition: opacity 150ms; }
.mini-cancel.is-hidden { opacity: 0; pointer-events: none; }
.mini-cancel .icon { width: 16px; height: 16px; }
.mini-state { margin: 0; font-variant-numeric: tabular-nums; }
.mini-style { margin: 0; }
.mini-note { margin: 0; }
.mini-live { margin: 0; width: 100%; box-sizing: border-box; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunken); text-align: left; color: var(--text-primary); }
.mini-note[data-type="error"] { color: var(--status-danger); }
.mini-note[data-type="success"] { color: var(--text-primary); }
.mini-note:not([data-type="error"]):not([data-type="success"]) { color: var(--text-secondary); }
.mini-result { display: flex; align-items: flex-start; gap: var(--space-2); width: 100%; box-sizing: border-box; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunken); text-align: left; }
.mini-result-text { margin: 0; flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.mini-menu { position: absolute; inset: auto var(--space-2) var(--space-2) var(--space-2); max-height: 70%; overflow: auto; display: flex; flex-direction: column; gap: 2px; padding: var(--space-2); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--elev-3); text-align: left; z-index: 2; }
.mini-menu.hidden { display: none; }
.mini-tasks { align-self: stretch; margin-bottom: var(--space-1); }
.mini-item { display: flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-primary); font: var(--type-small); text-align: left; cursor: pointer; }
.mini-item:hover, .mini-item:focus-visible { background: var(--surface-sunken); outline: none; }
.mini-item .icon, .mini-item-gap { width: 16px; height: 16px; flex: none; }

/* ---------------- API-Keys: Filter und Tags der Anbieter ---------------- */
#key-filters { align-self: flex-start; max-width: 100%; overflow-x: auto; margin-bottom: var(--space-3); scrollbar-width: none; }
#key-filters button { white-space: nowrap; }
.tag-row { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); }
.tag { display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--text-secondary); font: var(--type-small); font-size: 12px; line-height: 20px; }

/* ---------------- Archiv ---------------- */
.archive-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.archive-row { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) 0; border-top: 1px solid var(--border-subtle); }
.archive-row:first-child { border-top: 0; }
.archive-open { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: var(--space-1) var(--space-2); margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2)); border: 0; border-radius: var(--radius-sm); background: none; color: inherit; text-align: left; font: inherit; }
button.archive-open { cursor: pointer; }
button.archive-open:hover { background: var(--mark-playing-bg); }
.archive-title { font: var(--type-title); font-size: 16px; overflow-wrap: anywhere; }
.archive-row.is-current .archive-title::after { content: " · offen"; font: var(--type-small); color: var(--text-tertiary); }
.archive-preview { color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.archive-error { color: var(--status-danger); }
#archive-search { margin: var(--space-2) 0; }