/* ═══════════════════════════════════════════════════════
   Assistent v2 — production view
   Visual style intentionally mirrors the legacy assistent-simple.css
   so the user perceives the new page as a drop-in replacement.
   ═══════════════════════════════════════════════════════ */

/* Honor the HTML `hidden` attribute. Component-level `display: flex`
   on elements below otherwise overrides it, leaving rows that we
   explicitly marked hidden visible on page load. */
.as-simple--v2 [hidden] { display: none !important; }

.as-simple--v2 {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    /* Task 101: CONSTANT width. width:100% (capped at 960px) is load-bearing — the app shell
       centers views with flex, and without an explicit width the whole view shrinks to fit
       its content, which made the empty SOAP box narrower than the full one. */
    width: 100%;
    max-width: 960px;
    margin: var(--space-3xl) auto;
    padding: 0 var(--space-xl);
}

/* ── Header row ──────────────────────────────────────── */

.as-simple--v2 .as-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
}
/* Rerun + Fortsett sit together on the far right (task 2026-07-13). */
.as-simple--v2 .as-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.as-simple--v2 .as-conn-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Status dot */
.as-simple--v2 .as-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.3s;
}
.as-simple--v2 .as-dot--disconnected { background: var(--text-muted, #666); }
.as-simple--v2 .as-dot--connecting   { background: var(--conn-connecting); animation: as-v2-blink 1s ease-in-out infinite; }
.as-simple--v2 .as-dot--connected    { background: var(--conn-connected); }

@keyframes as-v2-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

.as-simple--v2 .as-conn-text {
    font-size: var(--font-sm);
    color: var(--text-muted);
}

/* ── Buttons ─────────────────────────────────────────── */

.as-simple--v2 .as-btn {
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-medium);
    color: var(--text-secondary);
    font-size: var(--font-sm);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.as-simple--v2 .as-btn:hover:not(:disabled) {
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.as-simple--v2 .as-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.as-simple--v2 .as-btn--ghost {
    background: transparent;
    border-color: var(--border-subtle);
    color: var(--text-muted);
    font-size: var(--font-xs, 11px);
    padding: 3px var(--space-sm);
}
.as-simple--v2 .as-btn--ghost:hover:not(:disabled) {
    border-color: var(--border-default);
    color: var(--text-secondary);
    background: transparent;
}

/* Record button */
.as-simple--v2 .as-rec-btn {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-2xl);
    background: var(--accent-primary);
    border: none;
    border-radius: var(--radius-md);
    color: #fff;
    font-size: var(--font-md);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.as-simple--v2 .as-rec-btn:hover:not(:disabled) {
    background: var(--accent-primary-hover);
}
.as-simple--v2 .as-rec-btn:disabled {
    background: var(--bg-medium);
    color: var(--text-muted);
    cursor: not-allowed;
}
.as-simple--v2 .as-rec-btn--active {
    background: linear-gradient(
        to right,
        hsl(0, 75%, 50%) 0%,
        hsl(0, 75%, 50%) var(--rec-vol, 0%),
        hsl(0, 15%, 40%) var(--rec-vol, 0%),
        hsl(0, 15%, 40%) 100%
    ) !important;
}
.as-simple--v2 .as-rec-btn--active:hover:not(:disabled) {
    filter: brightness(1.05);
}

.as-simple--v2 .as-rec-icon { font-size: 12px; opacity: 0.7; }
.as-simple--v2 .as-rec-pulse {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    animation: as-v2-rec-pulse 1s ease-in-out infinite;
}

@keyframes as-v2-rec-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.5); opacity: 0.5; }
}

/* ── Progress row ────────────────────────────────────── */

.as-simple--v2 .as-progress-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-medium);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: var(--font-sm);
}
.as-simple--v2 .as-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-default);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: as-v2-spin 0.8s linear infinite;
    flex-shrink: 0;
}
@keyframes as-v2-spin {
    to { transform: rotate(360deg); }
}
.as-simple--v2 .as-progress-text { flex: 1; }

/* ── Main output card ────────────────────────────────── */

.as-simple--v2 .as-main-card {
    background: var(--bg-medium);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    /* Task 101 (corrected): the WIDTH is constant — always the full column, never
       content-driven. Height scales with the text (small floor for the placeholder). */
    width: 100%;
    min-height: 140px;
    padding: var(--space-lg) var(--space-2xl);
    display: flex;
    flex-direction: column;
}
.as-simple--v2 .as-main-placeholder {
    color: var(--text-muted);
    font-size: var(--font-md);
    text-align: center;
    font-style: italic;
    padding: var(--space-md) 0;
}
.as-simple--v2 .as-main-text {
    color: var(--text-primary);
    font-size: 0.95rem;   /* task 101 (tuned down per Marius) */
    line-height: 1.7;
    white-space: pre-wrap;
    margin: 0;
    font-family: inherit;
    width: 100%;
}

/* ── Card label (top-of-card pill) ───────────────────── */

.as-simple--v2 .as-card-label {
    font-size: var(--font-xs, 11px);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: var(--space-md);
}

/* ── SOAP card sections ──────────────────────────────── */

.as-simple--v2 .as-soap-body-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    width: 100%;
}

.as-simple--v2 .as-soap-section {
    margin-bottom: var(--space-lg);
}
.as-simple--v2 .as-soap-section:last-child { margin-bottom: 0; }

/* Section header colors are set inline by soap_card.js (the card renders real sections now). */

.as-simple--v2 .as-soap-h {
    font-size: var(--font-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* Match the admin test page's output headers (task 101).
     * ⚠ Was `var(--accent-bright, var(--accent-primary))` — `--accent-bright` never existed, so the
     * fallback is what has always rendered. `--accent-heading` IS that value in dark, and a readable
     * one in light. Same pixels in dark; no dead token name. */
    color: var(--accent-heading);
    margin-bottom: var(--space-xs);
}

.as-simple--v2 .as-soap-body {
    color: var(--text-primary);
    font-size: 0.95rem;   /* task 101 (tuned down per Marius) */
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
    font-family: inherit;
}

/* ── Own note + carried-over previous SOAP (tasks 02/03) ── */

.as-simple--v2 .as-note-card {
    background: var(--bg-medium);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.as-simple--v2 .as-note-input {
    width: 100%;
    min-height: 64px;
    resize: vertical;
    background: var(--bg-dark, #161616);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--font-sm);
    line-height: 1.5;
    padding: var(--space-sm) var(--space-md);
    box-sizing: border-box;
}
.as-simple--v2 .as-note-input:focus { border-color: var(--accent-primary); outline: none; }
.as-simple--v2 .as-note-input:disabled { opacity: 0.6; cursor: not-allowed; }
.as-simple--v2 .as-note-carried {
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--space-sm);
}
.as-simple--v2 .as-note-carried-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}
.as-simple--v2 .as-note-carried-head .as-card-label { margin-bottom: 0; }
.as-simple--v2 .as-note-carried-ta {
    color: var(--text-secondary);
    margin-top: var(--space-xs);
    min-height: 110px;
    max-height: 260px;
}

/* ── Expandable transcript panel ─────────────────────── */

.as-simple--v2 .as-expander {
    background: var(--bg-medium);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.as-simple--v2 .as-expander__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    cursor: pointer;
    user-select: none;
    color: var(--text-secondary);
    font-size: var(--font-sm);
    font-weight: 500;
    list-style: none;
    gap: var(--space-sm);
}
.as-simple--v2 .as-expander__summary::-webkit-details-marker { display: none; }
.as-simple--v2 .as-expander__summary::after {
    content: '▶';
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.2s;
    flex-shrink: 0;
}
.as-simple--v2 .as-expander[open] .as-expander__summary::after {
    transform: rotate(90deg);
}
.as-simple--v2 .as-expander__summary:hover {
    background: var(--bg-elevated);
}
.as-simple--v2 .as-expander__badge {
    color: var(--accent-heading);   /* 10px — same reason as .as-soap-h above */
    font-size: 10px;
    margin-left: auto;
    margin-right: var(--space-xs);
}
.as-simple--v2 .as-expander__body {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-size: 1rem;   /* task 101: bigger, primary-colored output */
    line-height: 1.6;
    white-space: pre-wrap;
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    font-family: inherit;
}
/* Per-speaker colored labels in the diarized view (task 101): the SPEAKER only, not the text. */
.as-simple--v2 .as-diar-line { margin: 0 0 .35rem; }
.as-simple--v2 .as-diar-speaker { font-weight: 700; }