.sofie-notes-page {
    --sofie-surface: #111820;
    --sofie-surface-soft: #151f29;
    --sofie-border: rgba(148, 163, 184, 0.18);
    --sofie-muted: #91a2b3;
    --sofie-accent: #5b93ff;
    --sofie-accent-soft: rgba(91, 147, 255, 0.13);
    color: var(--jarvis-text, #edf4fb);
    max-width: 1640px;
    margin: 0 auto;
    padding: 0.25rem 0 3rem;
}

.sofie-notes-page button,
.sofie-notes-page input,
.sofie-notes-page textarea,
.sofie-notes-page select {
    font: inherit;
}

.sofie-notes-hero,
.sofie-detail-header,
.sofie-summary-toolbar,
.sofie-detail-footer,
.sofie-note-row-meta,
.sofie-audio-player,
.sofie-audio-player > div,
.sofie-export-menu {
    display: flex;
    align-items: center;
}

.sofie-notes-hero {
    justify-content: space-between;
    gap: 2rem;
    padding: 1.75rem 0 1.4rem;
}

.sofie-notes-hero h1 {
    margin: 0.2rem 0;
    font-size: clamp(2.1rem, 4vw, 3.5rem);
    letter-spacing: -0.045em;
}

.sofie-notes-hero p {
    margin: 0;
    color: var(--sofie-muted);
}

.sofie-notes-hero .t-section {
    color: #43dfaf;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sofie-notes-back {
    display: inline-block;
    color: var(--sofie-muted);
    font-size: 0.88rem;
    margin-bottom: 1rem;
    text-decoration: none;
}

.sofie-notes-hero-actions,
.sofie-import-grid,
.sofie-notes-toolbar,
.sofie-detail-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.sofie-button,
.sofie-segmented button,
.sofie-detail-tabs button,
.sofie-load-more,
.sofie-audio-player button,
.sofie-mobile-back {
    border: 1px solid var(--sofie-border);
    border-radius: 0.65rem;
    background: transparent;
    color: inherit;
    cursor: pointer;
    min-height: 2.45rem;
    padding: 0.55rem 0.9rem;
}

.sofie-button.primary {
    background: var(--sofie-accent);
    border-color: var(--sofie-accent);
    color: white;
    font-weight: 700;
}

.sofie-button.ghost:hover,
.sofie-button.text:hover,
.sofie-load-more:hover,
.sofie-audio-player button:hover {
    background: var(--sofie-accent-soft);
    border-color: rgba(91, 147, 255, 0.45);
}

.sofie-button.text,
.sofie-mobile-back {
    border-color: transparent;
    color: var(--sofie-accent);
}

.sofie-button.danger {
    border-color: rgba(248, 113, 113, 0.4);
    color: #fb9292;
}

.sofie-button:disabled,
.sofie-notes-page button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.sofie-import-panel,
.sofie-notes-alert {
    background: var(--sofie-surface);
    border: 1px solid var(--sofie-border);
    border-radius: 0.9rem;
    margin-bottom: 1rem;
    padding: 1rem;
}

.sofie-notes-alert.error { border-color: rgba(248, 113, 113, 0.48); }
.sofie-notes-alert.success { border-color: rgba(52, 211, 153, 0.42); }
.sofie-notes-alert.processing {
    border-color: rgba(96, 165, 250, 0.45);
    display: grid;
    gap: 0.25rem;
}
.sofie-notes-alert.processing span { color: var(--sofie-muted); }
.sofie-notes-alert.retryable {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.sofie-notes-alert.retryable span {
    display: block;
    margin-top: 0.25rem;
}

.sofie-notes-alert.retryable .sofie-button {
    flex: 0 0 auto;
}

.sofie-segmented {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.2rem;
    border-radius: 0.75rem;
    background: rgba(3, 8, 14, 0.42);
}

.sofie-segmented button {
    border: 0;
    min-height: 2.15rem;
}

.sofie-segmented button.active,
.sofie-detail-tabs button.active {
    background: var(--sofie-accent-soft);
    color: #8eb4ff;
}

.sofie-segmented.small button { font-size: 0.82rem; }

.sofie-import-grid {
    align-items: end;
    margin-top: 1rem;
}

.sofie-import-grid label,
.sofie-transcript-editor,
.sofie-import-grid.transcript {
    display: grid;
    gap: 0.4rem;
}

.sofie-import-grid label {
    color: var(--sofie-muted);
    font-size: 0.78rem;
    font-weight: 650;
}

.sofie-import-grid.transcript {
    grid-template-columns: minmax(12rem, 0.35fr) minmax(20rem, 1fr) auto;
}

.sofie-notes-page input:not([type="checkbox"]),
.sofie-notes-page textarea,
.sofie-notes-page select {
    border: 1px solid var(--sofie-border);
    border-radius: 0.55rem;
    background: rgba(4, 10, 16, 0.46);
    color: inherit;
    min-height: 2.55rem;
    padding: 0.55rem 0.7rem;
}

.sofie-notes-page textarea { resize: vertical; }
.sofie-helper { color: var(--sofie-muted); font-size: 0.8rem; margin: 0.75rem 0 0; }

.sofie-notes-toolbar {
    margin-bottom: 0.9rem;
}

.sofie-search {
    align-items: center;
    display: flex;
    flex: 1;
    min-width: 12rem;
    position: relative;
}

.sofie-search span {
    color: var(--sofie-muted);
    font-size: 1.5rem;
    left: 0.75rem;
    position: absolute;
}

.sofie-search input { padding-left: 2.25rem !important; width: 100%; }
.sofie-note-count { color: var(--sofie-muted); font-size: 0.82rem; white-space: nowrap; }

.sofie-notes-workspace {
    display: grid;
    grid-template-columns: minmax(19rem, 24rem) minmax(0, 1fr);
    min-height: 68vh;
    overflow: hidden;
    background: var(--sofie-surface);
    border: 1px solid var(--sofie-border);
    border-radius: 1rem;
}

.sofie-note-list {
    background: rgba(5, 10, 16, 0.25);
    border-right: 1px solid var(--sofie-border);
    overflow: auto;
}

.sofie-note-list-toolbar {
    align-items: center;
    backdrop-filter: blur(12px);
    background: rgba(8, 15, 23, 0.94);
    border-bottom: 1px solid var(--sofie-border);
    color: var(--sofie-muted);
    display: flex;
    font-size: 0.68rem;
    font-weight: 750;
    justify-content: space-between;
    letter-spacing: 0.09em;
    min-height: 2.8rem;
    padding: 0.55rem 0.85rem 0.55rem 1rem;
    position: sticky;
    text-transform: uppercase;
    top: 0;
    z-index: 4;
}

.sofie-note-list-toolbar button {
    background: transparent;
    border: 0;
    color: #7fa8ff;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0;
    min-height: 2rem;
    padding: 0.25rem 0.45rem;
    text-transform: none;
}

.sofie-note-list-toolbar button:hover { color: #a8c3ff; }
.sofie-note-list-toolbar button:focus-visible,
.sofie-note-group-toggle:focus-visible,
.sofie-note-row:focus-visible {
    outline: 2px solid #79a5ff;
    outline-offset: -2px;
}
.sofie-note-group { border-bottom: 1px solid var(--sofie-border); }

.sofie-note-group-toggle {
    align-items: center;
    background: rgba(12, 20, 29, 0.96);
    border: 0;
    color: inherit;
    cursor: pointer;
    display: grid;
    gap: 0.65rem;
    grid-template-columns: minmax(0, 1fr) auto 1.2rem;
    min-height: 4.2rem;
    padding: 0.72rem 0.85rem 0.72rem 1rem;
    position: sticky;
    text-align: left;
    top: 2.8rem;
    width: 100%;
    z-index: 3;
}

.sofie-note-group-toggle:hover { background: #111d28; }
.sofie-note-group-date { display: grid; gap: 0.16rem; min-width: 0; }
.sofie-note-group-date strong { font-size: 0.88rem; letter-spacing: -0.01em; }
.sofie-note-group-date small {
    color: var(--sofie-muted);
    font-size: 0.68rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sofie-note-group-count {
    align-items: center;
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 99px;
    color: var(--sofie-muted);
    display: inline-flex;
    font-size: 0.67rem;
    font-weight: 700;
    justify-content: center;
    min-height: 1.45rem;
    min-width: 1.45rem;
    padding: 0 0.35rem;
}

.sofie-note-group-chevron {
    fill: none;
    height: 1.15rem;
    stroke: var(--sofie-muted);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    transition: transform 160ms ease;
    width: 1.15rem;
}

.sofie-note-group.collapsed .sofie-note-group-chevron { transform: rotate(-90deg); }
.sofie-note-group-items { background: rgba(3, 8, 14, 0.18); }

.sofie-note-row {
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    color: inherit;
    display: grid;
    gap: 0.48rem;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    justify-items: stretch;
    padding: 0.88rem 1rem 0.95rem 1.1rem;
    position: relative;
    text-align: left;
    transition: background 150ms ease, box-shadow 150ms ease;
    width: 100%;
}

.sofie-note-row:hover { background: rgba(91, 147, 255, 0.075); }
.sofie-note-row.selected {
    background: linear-gradient(90deg, rgba(91, 147, 255, 0.17), rgba(91, 147, 255, 0.045));
    box-shadow: inset 3px 0 var(--sofie-accent);
}

.sofie-note-row strong { font-size: 0.91rem; line-height: 1.34; width: 100%; }
.sofie-note-row small { color: var(--sofie-muted); }
.sofie-note-row-kicker { align-items: center; display: flex; gap: 0.5rem; justify-content: space-between; }
.sofie-note-row-kicker time { color: var(--sofie-muted); font-size: 0.7rem; font-variant-numeric: tabular-nums; }

.sofie-note-source {
    color: #5de2b6;
    font-size: 0.64rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.sofie-note-row-meta { gap: 0.35rem; flex-wrap: wrap; width: 100%; }
.sofie-note-row-meta em,
.sofie-task-card > div > span {
    background: rgba(148, 163, 184, 0.1);
    border-radius: 99px;
    color: var(--sofie-muted);
    font-size: 0.68rem;
    font-style: normal;
    padding: 0.18rem 0.45rem;
}

.sofie-note-row-meta .duration { background: transparent; color: var(--sofie-muted); padding-left: 0; }
.sofie-note-row-meta .duration::before { content: "◷"; margin-right: 0.28rem; }
.sofie-note-row-meta .status.ready { background: rgba(52, 211, 153, 0.1); color: #68ddb8; }
.sofie-note-row-meta .status.processing { background: rgba(251, 191, 36, 0.11); color: #efc65d; }
.sofie-note-row-meta .status.failed { background: rgba(248, 113, 113, 0.11); color: #f49a9a; }
.sofie-note-row-meta .memory { background: rgba(52, 211, 153, 0.12); color: #63ddb8; }
.sofie-note-row-meta .tasks { background: rgba(251, 191, 36, 0.12); color: #f5c85a; }
.sofie-load-more { display: block; margin: 1rem auto; }

.sofie-note-detail { min-width: 0; overflow: auto; padding: clamp(1rem, 2.5vw, 2rem); }
.sofie-detail-header { align-items: flex-start; justify-content: space-between; gap: 2rem; }
.sofie-detail-header h2 { font-size: clamp(1.55rem, 3vw, 2.45rem); letter-spacing: -0.035em; margin: 0.35rem 0; }
.sofie-detail-header p { color: var(--sofie-muted); margin: 0.2rem 0; }
.sofie-detail-actions { align-items: flex-end; flex-direction: column; min-width: 18rem; }

.sofie-memory-switch {
    align-items: center;
    background: rgba(5, 10, 16, 0.35);
    border: 1px solid var(--sofie-border);
    border-radius: 0.8rem;
    cursor: pointer;
    display: flex;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
}

.sofie-memory-switch input { accent-color: #38d5a5; height: 1.15rem; width: 1.15rem; }
.sofie-memory-switch span { display: grid; gap: 0.1rem; }
.sofie-memory-switch strong { font-size: 0.82rem; }
.sofie-memory-switch small { color: var(--sofie-muted); font-size: 0.7rem; }
.sofie-export-menu { gap: 0.4rem; }
.sofie-export-menu select { min-height: 2.4rem; }

.sofie-audio-player {
    background: var(--sofie-surface-soft);
    border: 1px solid var(--sofie-border);
    border-radius: 0.85rem;
    gap: 1rem;
    justify-content: space-between;
    margin: 1.4rem 0;
    padding: 0.65rem;
}

.sofie-audio-player audio { flex: 1; min-width: 12rem; }
.sofie-audio-player > div { gap: 0.35rem; }
.sofie-audio-player button { min-height: 2rem; padding: 0.3rem 0.55rem; }

.sofie-detail-tabs {
    border-bottom: 1px solid var(--sofie-border);
    display: flex;
    gap: 0.25rem;
    margin: 1.25rem 0 0;
}

.sofie-detail-tabs button { border: 0; border-radius: 0.6rem 0.6rem 0 0; }
.sofie-detail-tabs span { background: rgba(251,191,36,.18); border-radius: 99px; margin-left: .25rem; padding: .05rem .35rem; }
.sofie-summary-view,
.sofie-transcript-view,
.sofie-task-review { min-height: 24rem; padding: 1.35rem 0; }
.sofie-summary-toolbar { align-items: center; gap: 0.65rem; justify-content: flex-end; }
.sofie-summary-toolbar > p { color: var(--sofie-muted); margin: 0 auto 0 0; max-width: 48rem; }
.sofie-summary-toolbar > span { color: var(--sofie-muted); font-size: 0.78rem; margin-right: auto; }

.sofie-markdown {
    font-size: 0.96rem;
    line-height: 1.72;
    margin: 1.4rem auto;
    max-width: 54rem;
}

.sofie-markdown small { color: var(--sofie-muted); display: block; margin-bottom: 1rem; }
.sofie-markdown h2,
.sofie-markdown h3,
.sofie-markdown h4 { letter-spacing: -.02em; margin: 1.4rem 0 .5rem; }
.sofie-markdown p { margin: .45rem 0; }
.sofie-markdown li { margin: .28rem 0; }
.sofie-markdown blockquote { border-left: 2px solid var(--sofie-accent); color: var(--sofie-muted); margin: 1rem 0; padding-left: 1rem; }
.sofie-transcript-editor textarea { margin-top: 1rem; min-height: 26rem; width: 100%; }
.sofie-transcript-editor > div { display: flex; gap: .5rem; justify-content: flex-end; }
.sofie-transcript-segments { margin: 1.2rem auto; max-width: 58rem; }
.sofie-transcript-segments article { display: grid; gap: 1rem; grid-template-columns: 5rem minmax(0, 1fr); padding: 0.85rem 0; }
.sofie-transcript-segments strong { font-size: 0.82rem; }
.sofie-transcript-segments p { line-height: 1.62; margin: .2rem 0 0; }
.sofie-timestamp { align-self: start; background: transparent; border: 0; color: var(--sofie-accent); font-size: .78rem; padding: .1rem; text-align: left; }

.sofie-task-card {
    align-items: start;
    background: rgba(5, 10, 16, 0.3);
    border: 1px solid var(--sofie-border);
    border-radius: .85rem;
    display: grid;
    gap: .9rem;
    grid-template-columns: auto minmax(0, 1fr);
    margin-top: .75rem;
    padding: 1rem;
}

.sofie-task-card.accepted { opacity: .7; }
.sofie-task-card input { accent-color: var(--sofie-accent); height: 1.1rem; margin-top: .2rem; width: 1.1rem; }
.sofie-task-card h3 { margin: .5rem 0 .25rem; }
.sofie-task-card p { color: var(--sofie-muted); }
.sofie-task-card dl { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: .25rem .5rem; font-size: .8rem; }
.sofie-task-card dt { color: var(--sofie-muted); }
.sofie-task-card dd { margin: 0; }
.sofie-task-card blockquote { border-left: 2px solid var(--sofie-accent); color: var(--sofie-muted); font-size: .82rem; margin: .75rem 0 0; padding-left: .75rem; }

.sofie-detail-footer { border-top: 1px solid var(--sofie-border); color: var(--sofie-muted); gap: 1rem; justify-content: space-between; padding-top: 1rem; }
.sofie-permanent-delete { display: grid; gap: .35rem; margin-left: auto; max-width: 22rem; }
.sofie-permanent-delete span { font-size: .75rem; }
.sofie-permanent-delete input { min-width: 18rem; }
.sofie-notes-empty { align-content: center; color: var(--sofie-muted); display: grid; gap: .35rem; justify-items: center; min-height: 12rem; padding: 1.5rem; text-align: center; }
.sofie-notes-empty.detail { min-height: 30rem; }
.sofie-mobile-back { display: none; margin: 0 0 .75rem -.6rem; min-height: 2rem; padding: .25rem .55rem; }

[data-theme="light"] .sofie-notes-page {
    --sofie-surface: #ffffff;
    --sofie-surface-soft: #f6f8fb;
    --sofie-border: rgba(30, 52, 73, 0.14);
    --sofie-muted: #607386;
    --sofie-accent-soft: rgba(48, 105, 223, 0.09);
}

[data-theme="light"] .sofie-note-list,
[data-theme="light"] .sofie-memory-switch,
[data-theme="light"] .sofie-task-card,
[data-theme="light"] .sofie-notes-page input:not([type="checkbox"]),
[data-theme="light"] .sofie-notes-page textarea,
[data-theme="light"] .sofie-notes-page select { background: #f8fafc; }

[data-theme="light"] .sofie-note-list-toolbar { background: rgba(248, 250, 252, 0.95); }
[data-theme="light"] .sofie-note-group-toggle { background: rgba(244, 247, 250, 0.96); }
[data-theme="light"] .sofie-note-group-toggle:hover { background: #edf3f8; }
[data-theme="light"] .sofie-note-group-items { background: rgba(248, 250, 252, 0.72); }

@media (max-width: 900px) {
    .sofie-notes-page { padding-top: 0; }
    .sofie-notes-hero { align-items: flex-start; flex-direction: column; gap: 1rem; }
    .sofie-notes-hero-actions { width: 100%; }
    .sofie-notes-hero-actions .sofie-button { flex: 1; }
    .sofie-import-grid,
    .sofie-import-grid.transcript { align-items: stretch; display: grid; grid-template-columns: 1fr; }
    .sofie-notes-toolbar { align-items: stretch; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
    .sofie-notes-toolbar select { grid-column: 1 / -1; }
    .sofie-note-count { display: none; }
    .sofie-notes-workspace { display: block; min-height: 62vh; }
    .sofie-note-list { border: 0; }
    .sofie-notes-workspace:not(.list-only) .sofie-note-list { display: none; }
    .sofie-notes-workspace.list-only .sofie-note-detail { display: none; }
    .sofie-note-detail { padding: 1rem; }
    .sofie-mobile-back { display: inline-flex; }
    .sofie-detail-header { display: grid; gap: 1rem; }
    .sofie-detail-actions { align-items: stretch; min-width: 0; }
    .sofie-memory-switch { justify-content: flex-start; }
    .sofie-export-menu > * { flex: 1; }
    .sofie-audio-player { align-items: stretch; flex-direction: column; }
    .sofie-summary-toolbar { align-items: stretch; flex-wrap: wrap; justify-content: flex-start; }
    .sofie-summary-toolbar > p { flex-basis: 100%; }
    .sofie-transcript-segments article { grid-template-columns: 3.8rem minmax(0, 1fr); gap: .5rem; }
    .sofie-task-card dl { grid-template-columns: auto 1fr; }
    .sofie-detail-footer { align-items: stretch; flex-direction: column; }
    .sofie-permanent-delete { margin-left: 0; max-width: none; }
    .sofie-permanent-delete input { min-width: 0; width: 100%; }
}

@media (max-width: 420px) {
    .sofie-notes-alert.retryable { align-items: stretch; flex-direction: column; }
    .sofie-detail-tabs button { flex: 1; padding-inline: .4rem; }
    .sofie-export-menu { align-items: stretch; flex-direction: column; }
    .sofie-audio-player audio { width: 100%; }
}