/* ========================================
           UNIFIED MODAL HEADER COMPONENT SYSTEM
           Base structure with variant classes for
           different modal types (task, note, project, etc.)
           ======================================== */

        /* Modal header left element - for checkbox, icon, or empty */
        .modal-header-left {
            display: flex;
            align-items: center;
            flex-shrink: 0;
        }

        /* Modal header center - title area */
        .modal-header-center {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        /* Unified title input styling */
        .modal-title-input,
        .project-modal-title,
        .area-modal-title,
        .note-modal-title {
            flex: 1;
            font-family: var(--font-family);
            font-size: var(--font-size-lg);
            font-weight: 600;
            border: none;
            background: transparent;
            outline: none;
            color: var(--text-primary);
        }

        /* Variant: Modal with checkbox (Task Modal) */
        .modal-header.has-checkbox {
            align-items: flex-start;
        }

        .modal-header.has-checkbox .modal-header-left {
            margin-top: 4px;
        }

        /* Variant: Modal with icon picker (Project/Area Modal) */
        .modal-header.has-icon {
            align-items: center;
        }

        .modal-header.has-icon .modal-header-left {
            width: 36px;
            height: 36px;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .modal-header.has-icon .modal-header-left:hover {
            background: rgba(0, 0, 0, 0.05);
        }

        .modal-header.has-icon .modal-header-left svg {
            width: 20px;
            height: 20px;
        }

        /* Variant: Modal with meta display (Event Modal, Note Modal) */
        .modal-header.has-meta .modal-header-center {
            gap: var(--space-2);
        }

        /* Modal meta styling (for dates, calendar info, etc.) */
        .modal-meta {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
        }

        /* Standardize all modal action buttons to 28px */
        .modal-header-actions .modal-close,
        .project-modal-actions .modal-close,
        .area-modal-actions .modal-close,
        .note-modal-header-actions .modal-close,
        .event-modal-header-actions .modal-close {
            width: var(--btn-sm);
            height: var(--btn-sm);
        }

        /* Modal Body */
        .modal-body {
            flex: 1;
            padding: var(--space-8);
            overflow-y: auto;
            min-height: 390px;
            position: relative;
        }

        .task-modal:not(.fullscreen) .modal-body {
            min-height: unset;
        }

        .task-modal.fullscreen .modal-body {
            padding: 32px 48px;
            display: flex;
            flex-direction: column;
        }

        .task-modal.fullscreen .task-note-editor {
            min-height: unset;
            flex: 1;
        }

        /* Event Modal (Calendar Events) */
        .event-modal {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(0.95);
            width: 884px;
            /* A fixed height, not min/max: the window is centred, so a height
               taken from its content moved both edges every time the recording
               panel changed (Record → timer → Uploading → player → Finding
               speakers → tabs). Both columns scroll inside it instead. Capped at
               860px so a big display gets the room it used to grow into. */
            height: min(85vh, 860px);
            background: var(--bg-card);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-medium);
            box-shadow: var(--shadow-3);
            z-index: calc(var(--z-layer-raised) + 1);
            opacity: 0;
            pointer-events: none;
            transition: all var(--transition-smooth);
            display: flex;
            flex-direction: column;
        }

        .event-modal.visible {
            opacity: 1;
            pointer-events: auto;
            transform: translate(-50%, -50%) scale(1);
        }

        .event-modal.fullscreen {
            width: calc(100vw - 68px);
            height: 100vh;
            max-height: 100vh;
            border-radius: 0;
            left: 68px;
            top: 0;
            transition: opacity var(--transition-smooth);
        }

        .event-modal.fullscreen.visible {
            transform: none;
        }

        /* Previous Meeting Navigation Bar */
        .event-nav-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 28px;
            background: var(--accent-blue-opacity-5);
            border-bottom: 1px solid var(--border-light);
        }

        .event-nav-back {
            display: flex;
            align-items: center;
            gap: 4px;
            background: none;
            border: none;
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            font-weight: 500;
            color: var(--accent-blue);
            cursor: pointer;
            padding: 2px 0;
            transition: opacity var(--transition-fast);
        }

        .event-nav-back:hover {
            opacity: 0.7;
        }

        .event-nav-back svg {
            flex-shrink: 0;
        }

        .event-nav-viewing {
            font-family: var(--font-family);
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            font-weight: 500;
        }

        /* Shared cross-modal "Back to {origin}" bar for Related-drawer
           navigation. Mirrors .event-nav-bar; injected just below the header
           of the task / note / project modals. */
        .entity-nav-bar {
            display: flex;
            align-items: center;
            padding: 8px 28px;
            background: var(--accent-blue-opacity-5);
            border-bottom: 1px solid var(--border-light);
            flex-shrink: 0;
        }
        .entity-nav-back {
            display: flex;
            align-items: center;
            gap: 4px;
            background: none;
            border: none;
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            font-weight: 500;
            color: var(--accent-blue);
            cursor: pointer;
            padding: 2px 0;
            transition: opacity var(--transition-fast);
        }
        .entity-nav-back:hover { opacity: 0.7; }
        .entity-nav-back svg { flex-shrink: 0; }

        .event-modal-header {
            display: flex;
            align-items: flex-start;
            padding: var(--space-7) var(--space-7) var(--space-5);
            gap: var(--space-4);
            border-bottom: 1px solid var(--border-light);
        }

        .event-modal-title-area {
            flex: 1;
        }

        .event-modal-title {
            font-family: var(--font-family);
            font-size: var(--font-size-lg);
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
        }

        .event-modal-meta {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            margin-top: 8px;
        }

        .event-modal-calendar-dot {
            width: 10px;
            height: 10px;
            border-radius: var(--radius-sm);
            background: var(--accent-blue);
        }

        .event-modal-datetime {
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
        }

        .event-note-meta {
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            color: var(--text-tertiary);
            margin-left: var(--space-2);
        }

        .event-modal-action-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            padding: 0;
            background: transparent;
            border: none;
            border-radius: var(--radius-md);
            color: var(--text-secondary);
            cursor: pointer;
            transition: all var(--duration-fast) var(--ease-in-out);
        }

        .event-modal-action-btn:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary);
        }

        .event-modal-action-btn.active {
            color: var(--accent-blue);
        }

        .event-modal-action-btn svg {
            width: 18px;
            height: 18px;
        }

        .event-modal-header-actions {
            display: flex;
            align-items: center;
            gap: var(--space-1);
        }

        .event-modal-content {
            display: flex;
            flex: 1;
            min-height: 0;
            overflow: hidden;
            position: relative;
        }

        .event-modal-main {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
            padding: 24px 28px 24px 28px;
            overflow-y: auto;
        }

        .event-modal.fullscreen .event-modal-main {
            padding: 32px 48px 32px 48px;
        }

        .event-note-editor {
            flex: 1 1 0;
            font-family: var(--font-family);
            font-size: var(--font-size-base);
            line-height: 1.7;
            color: var(--text-primary);
            outline: none;
            min-height: 80px;
            overflow-y: auto;
        }

        /* Placeholder is toggled in JS via updateEditorPlaceholder() — a string
           check on innerHTML. The old CSS `:has(> p:only-child …)` approach was
           fragile: `:only-child` ignores text-node siblings, so `<p><br></p>` +
           a bare text node still matched and the placeholder rendered OVER real
           text ("Add notes...Objectives of the meeting"). */
        .event-note-editor.show-placeholder::before {
            content: 'Add notes...';
            color: var(--text-tertiary);
            pointer-events: none;
        }

        /* Empty-note "ghost" placeholder: REAL grey text (not a ::before overlay)
           so WebKit sits the caret inside it on line 1 instead of normalising an
           empty/<br> block down to line 2. Cleared on first input. See showNoteGhost. */
        .event-note-editor .note-ghost {
            color: var(--text-tertiary);
        }

        .event-note-editor p {
            margin-bottom: 8px;
        }

        .event-note-editor ul, .event-note-editor ol {
            margin-bottom: 8px;
            padding-left: var(--editor-list-indent);
        }

        .event-note-editor ul {
            list-style-type: disc;
        }

        .event-note-editor ul ul {
            list-style-type: circle;
        }

        .event-note-editor ul ul ul {
            list-style-type: square;
        }

        .event-note-editor ol {
            list-style-type: decimal;
        }

        .event-note-editor ol ol {
            list-style-type: lower-alpha;
        }

        .event-note-editor ol ol ol {
            list-style-type: lower-roman;
        }

        .event-note-editor li {
            margin-bottom: 4px;
        }

        /* Empty list items inside any contenteditable area need a placeholder so
           the line has height and the ::marker (e.g. the "2." in a numbered list)
           renders. WebKit's contenteditable produces bare <li></li> on Enter
           after a non-empty item — without this rule the new line is in the DOM
           but invisible until the user types a character. Pseudo-element content
           does not affect the :empty matcher, so this auto-disappears as soon as
           real content is typed.

           Selectors are listed both as the generic [contenteditable] form AND
           as explicit per-editor classes. The generic form alone wasn't reliably
           matching in the task-note-editor — possibly a Tauri/WebKit specificity
           quirk — so we list the editor classes explicitly to guarantee coverage
           across every rich-text surface. */
        [contenteditable] li:empty::before,
        [contenteditable="true"] li:empty::before,
        .event-note-editor li:empty::before,
        .project-notes-editor li:empty::before,
        .task-note-editor li:empty::before,
        .daily-note-editor li:empty::before,
        .note-editor li:empty::before {
            content: "\200B"; /* zero-width space */
        }

        /* Defensive fallback: if for any reason the pseudo-element placeholder
           doesn't render (older WebKit, some content-script interaction, etc.),
           a min-height keeps the line visible. The ::marker still anchors to
           the pseudo-element content above, so this is purely a safety net. */
        [contenteditable] li:empty,
        .event-note-editor li:empty,
        .project-notes-editor li:empty,
        .task-note-editor li:empty,
        .daily-note-editor li:empty,
        .note-editor li:empty {
            min-height: 1em;
            /* Caret alignment. WebKit cannot bind the caret to pseudo-element
               content, so in an empty item it draws the caret from the li's
               content-box TOP — while the ::marker sits on the line box, which
               the editor's tall line-height insets by the half-leading (~4px).
               The caret therefore floated above the "1." until a character was
               typed. Collapsing the line box to 1 and restoring the row height
               as padding puts both on the same anchor; the row height and the
               marker position are unchanged, so nothing moves on first keypress. */
            line-height: 1;
            padding-top: calc((var(--empty-li-line-height, 1.7) - 1) * 0.5em);
            padding-bottom: calc((var(--empty-li-line-height, 1.7) - 1) * 0.5em);
        }