/* v5 task pane — v2 visual identity (Bleu France navy + DSFR-ish palette). */
:root {
    --color-primary: #000091;
    --color-primary-hover: #00006d;
    --color-success: #18753c;
    --color-success-bg: #e6f4ea;
    --color-danger: #d83b01;
    --color-danger-hover: #b83200;
    --color-warning: #f57f17;
    --color-text: #1e1e1e;
    --color-text-muted: #666666;
    --color-bg: #ffffff;
    --color-surface: #f6f6f6;
    --color-border: #e0e0e0;
    --radius: 6px;
    --font: "Segoe UI", -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font);
    font-size: 13px;
    color: var(--color-text);
    background: var(--color-bg);
    padding: 10px clamp(6px, 3vw, 18px);
}

/* Header */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 8px;
    margin-bottom: 12px;
}
.app-title-wrap { display: inline-flex; align-items: baseline; gap: 8px; }
.app-title { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; color: var(--color-text); cursor: default; user-select: none; }
.admin-tag { font-size: 9px; font-weight: 700; letter-spacing: .5px; color: #fff; background: var(--color-danger); border-radius: 3px; padding: 1px 5px; }

/* Admin-only elements — revealed by 5 clicks on the title (body.admin).
   !important so it beats later same-specificity rules like .btn (display: inline-flex). */
.admin-only, .admin-only-inline { display: none !important; }
body.admin .admin-only { display: block !important; }
body.admin .admin-only-inline { display: inline-flex !important; }

.header-status {
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background .3s, color .3s;
}
.header-status.inactive { background: #f0f0f0; color: #888; }
.header-status.active { background: var(--color-success-bg); color: var(--color-success); }
.header-status.paused { background: #fff3e0; color: #e65100; }
.badge-icon { font-size: 12px; line-height: 1; }

/* Panels / blocks */
.panel { display: flex; flex-direction: column; gap: 12px; }
.block { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 12px; }
.block h3 {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--color-text-muted);
}
.muted { color: var(--color-text-muted); font-size: 12px; margin: 0 0 8px; line-height: 1.5; }

.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.fld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--color-text-muted); flex: 1; }
.ck { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text); }

/* Setup sections (single dynamic block) */
.setup-section { margin-bottom: 14px; }
.setup-section:last-child { margin-bottom: 0; }
.setup-label { font-size: 11px; font-weight: 600; color: var(--color-text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .3px; }
.setup-toggle { display: flex; border: 2px solid var(--color-primary); border-radius: var(--radius); overflow: hidden; }
.toggle-btn { flex: 1; padding: 8px 4px; border: none; background: transparent; color: var(--color-primary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s; }
.toggle-btn.active { background: var(--color-primary); color: #fff; }
.toggle-btn:not(.active):hover { background: rgba(0, 0, 145, .06); }
.setup-select { width: 100%; }

/* Enrolled voices — small collapsible: only the green ✓ checks live inside; expand to view */
.enroll-details { margin: 8px 0; }
.enroll-summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; user-select: none; font-size: 12px; font-weight: 600; color: var(--color-text-muted); }
.enroll-summary::-webkit-details-marker { display: none; }
.enroll-summary::before { content: "▸"; font-size: 10px; transition: transform .15s; }
.enroll-details[open] .enroll-summary::before { transform: rotate(90deg); }
.enroll-count { min-width: 18px; padding: 0 6px; border-radius: 8px; background: var(--color-surface); color: var(--color-text-muted); font-size: 11px; font-weight: 700; text-align: center; }
.enroll-count.ok { background: var(--color-success-bg); color: var(--color-success); }
.enroll-details #enrolled-list { margin-top: 8px; }

input, select, textarea {
    font: inherit;
    font-size: 12px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
}
input[type="number"] { width: 64px; }
input[type="checkbox"] { padding: 0; }
textarea { resize: vertical; font-family: var(--font); }
select { flex: 1; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-primary); }

/* Buttons — navy is the identity */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 12px;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-primary);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, color .2s, border-color .2s;
}
.btn:hover:not(:disabled) { background: rgba(0, 0, 145, .06); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

.btn-danger { border-color: var(--color-danger); color: var(--color-danger); }
.btn-danger:hover:not(:disabled) { background: rgba(216, 59, 1, .07); }

.btn-big { width: 100%; padding: 11px; }
.btn-link {
    border: none; background: none; padding: 4px 0; text-transform: none;
    letter-spacing: 0; font-weight: 500; font-size: 11px; color: var(--color-primary); text-align: left;
}
.btn-link:hover { background: rgba(0, 0, 145, .04); }
.btn.recording { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.btn.recording:hover:not(:disabled) { background: var(--color-danger-hover); }

/* Buttons in a row share width */
.row .btn { flex: 1 1 0; min-width: 0; }

/* Progress */
.progress { position: relative; height: 20px; background: #f0f0f0; border-radius: 3px; overflow: hidden; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; }
.progress-bar { position: absolute; top: 0; left: 0; height: 100%; width: 0; background: var(--color-primary); opacity: .2; transition: width .3s linear; }
.progress-text { position: relative; font-size: 10px; font-weight: 500; color: var(--color-text-muted); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.enrolled-chip { display: flex; align-items: center; gap: 6px; background: var(--color-success-bg); color: var(--color-success); border-radius: var(--radius); padding: 4px 10px; font-size: 12px; font-weight: 500; }

/* Enrolment quality warnings (EnrollIssue: separability / coherence / duration) */
.enroll-warnings { display: flex; flex-direction: column; gap: 4px; margin: 4px 0; }
.enroll-warn-line { font-size: 11px; padding: 5px 8px; border-radius: var(--radius); line-height: 1.4; }
.enroll-warn { background: #fff3e0; color: #9a6700; }
.enroll-severe { background: #fde8e8; color: #c62828; font-weight: 500; }

/* Active / paused */
.duration { font-size: 22px; font-weight: 700; text-align: center; margin: 6px 0; color: var(--color-text); font-variant-numeric: tabular-nums; }

/* Live speaker indicator — "X est en train de parler" (from final.speaker) */
.speaker-indicator { display: flex; align-items: center; gap: 8px; min-height: 20px; margin-top: 10px; padding: 8px 10px; font-size: 13px; }
.speaker-indicator:empty { display: none; }
.spk-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; animation: spk-pulse 1.3s ease-in-out infinite; }
.spk-dot.spk-OPE { background: var(--color-primary); }
.spk-dot.spk-INT { background: var(--color-warning); }
.spk-dot.spk-DEM { background: var(--color-success); }
.spk-text { color: var(--color-text); font-weight: 500; }
@keyframes spk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Playback (admin file mode) — local <audio> of the consumed file */
.playback { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--color-border); }
.playback audio { width: 100%; margin-top: 4px; }

/* Log (collapsible) */
.log-details { margin-top: 12px; }
.log-summary { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: var(--color-text-muted); user-select: none; list-style: none; }
.log-summary::-webkit-details-marker { display: none; }
.log-summary::before { content: "▸"; font-size: 10px; transition: transform .15s; }
.log-details[open] .log-summary::before { transform: rotate(90deg); }
.log-summary:hover { color: var(--color-text); }
.log-count { margin-left: auto; min-width: 16px; height: 16px; padding: 0 5px; border-radius: 8px; background: var(--color-danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.log { max-height: 160px; overflow-y: auto; font-size: 11px; font-family: "Consolas", "Courier New", monospace; background: #fafafa; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 4px 0; color: var(--color-text-muted); }
.log-line { display: flex; gap: 6px; padding: 3px 10px; border-bottom: 1px solid #f0f0f0; line-height: 1.5; }
.log-line:last-child { border-bottom: none; }
.log-error .log-icon, .log-error .log-msg { color: #c62828; }
.log-ts { flex-shrink: 0; color: #aaa; font-size: 10px; min-width: 48px; }

/* Auth overlay */
.overlay { position: fixed; inset: 0; background: var(--color-bg); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.overlay-card { width: 100%; max-width: 280px; display: flex; flex-direction: column; gap: 10px; text-align: center; }
.overlay-card h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
.overlay-card input { text-align: center; padding: 10px 12px; font-size: 13px; }
.error { color: #c62828; font-size: 12px; }