/* Light theme (default) */
:root {
    --font-primary: 'EB Garamond', serif;
    --font-secondary: 'Lora', serif;

    --bg-main: #f5efdc;
    --bg-journal: #fdf5e6;
    --bg-input-area: #f0e9d9;
    
    --text-primary: #3a2b20;
    --text-secondary: #5c4b3f;
    --text-on-dark-bg: #f0e6d8;

    --border-primary: #c8b89a;
    --border-focus: #8a5c43;
    --border-journal: #dcd0b8;
    --shadow-journal: 0 4px 12px rgba(0,0,0,0.1);

    --bubble-bg-assistant: #f0e6d8;
    --bubble-bg-user: #e0d8cc;
    --bubble-shadow: 0 2px 4px rgba(0,0,0,0.1);

    --button-bg: #7a5c43;
    --button-text: #fdf5e6;
    --button-hover-bg: #5a3a22;

    --input-bg: #fff;
    --input-border: #c8b89a;

    --scrollbar-track: #e0d8cc;
    --scrollbar-thumb: #8a5c43;
    --scrollbar-thumb-hover: #5a3a22;
}

html {
    overflow: hidden; /* Prevent html-level scrolling on iOS Safari */
}

body {
    background-color: var(--bg-main, #f5efdc); /* Dark mystical purple/blue */
    /* background-color: #1e1e1e; */
    /* color: #d4d4d4; Light grey text  */

    font-family: var(--font-primary, 'Merriweather', serif);
    color: var(--text-primary, #3a2b20); /* Dark brown text, good on light parchment */

    /* font-family: 'Consolas', 'Monaco', 'Menlo', monospace; */
    font-size: 18px;
    margin: 0;
    padding: 0;
    height: 100dvh; /* Dynamic viewport height for mobile keyboard support */
    overflow: hidden; /* Prevent body scroll, chat-log will scroll */
    box-sizing: border-box; /* Include padding in height calculation */
}

body.keyboard-open {
    touch-action: none; /* Prevent dragging body when keyboard is open on iOS Safari */
    overscroll-behavior: none; /* Prevent scroll chaining and rubber-band effects */
}

#app-container {
    display: flex;
    flex-direction: row;
    height: 100dvh; /* Use dynamic viewport height instead of vh */
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

#main-content-area {
    flex: 1;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.main-view {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    box-sizing: border-box;
}

.main-view.active {
    opacity: 1;
    visibility: visible;
}

#chat-container {    
    /* Chat view styles - inherits from .main-view */
    min-height: 0;
}

#todos-container {
    /* ToDos view styles - inherits from .main-view */
    background-color: var(--bg-journal, #fdf5e6);
}

/* === TODOS VIEW STYLING === */
.todos-header {
    background-color: var(--bg-input-area, #f0e9d9);
    padding: 15px 20px; /* Match sidebar header padding */
    border-bottom: 1px solid var(--border-primary, #c8b89a);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    height: 72px; /* Force exact match with sidebar header height */
    box-sizing: border-box;
    transition: padding-left 0.3s ease; /* Smooth transition when sidebar collapses */
}

/* Add left padding when sidebar is collapsed to avoid hamburger overlap */
.sidebar.collapsed ~ #main-content-area #todos-container .todos-header {
    padding-left: 60px; /* Space for hamburger button + margin */
}

.todos-title {
    margin: 0;
    font-family: var(--font-primary, 'EB Garamond', serif);
    color: var(--text-primary, #3a2b20);
    font-size: 1.4em; /* Match sidebar app-title size exactly */
    font-weight: 600;
    letter-spacing: 0.5px; /* Match sidebar app-title letter-spacing */
}

.todos-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap; /* Ensure buttons don't disappear on smaller screens */
}

.todos-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.todos-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    height: 100%;
    min-height: 0;
}

.todos-section {
    /* Transparent by default - background only shown during drag-over */
    display: flex;
    flex-direction: column;
    min-height: 0;
    transition: all 0.2s ease;
}

.todos-section-title {
    margin: 0 0 15px 0;
    font-family: var(--font-primary, 'EB Garamond', serif);
    color: var(--text-primary, #3a2b20);
    font-size: 1.2rem;
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-primary, #c8b89a);
}

.todos-section-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding: 0;
    transition: background-color 0.2s ease, padding 0.2s ease;
}

.todos-section-content:empty::after {
    content: "No to-dos in this category";
    color: var(--text-secondary, #7a5c43);
    font-style: italic;
    text-align: center;
    padding: 8px 20px; /* Adjusted vertical padding to match todo card height */
    font-size: 0.9rem;
}

.todo-card {
    background-color: var(--input-bg, #fff);
    border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.todo-card:hover {
    border-color: var(--border-focus, #8a5c43);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.todo-card.completed {
    opacity: 0.6;
    background-color: rgba(139, 114, 86, 0.1);
}

.todo-card.completed .todo-card-title {
    text-decoration: line-through;
}

.todo-card-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.todo-card-status {
    font-size: 16px;
    color: var(--border-focus, #8a5c43);
    font-weight: bold;
    flex-shrink: 0;
    line-height: 1;
}

.todo-card-title {
    flex: 1;
    font-weight: 600;
    color: var(--text-primary, #3a2b20);
    line-height: 1.3;
}

/* Responsive design for todos view */
@media (max-width: 768px) {
    .todos-header {
        padding: 15px;
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
    
    .todos-title {
        font-size: 1.5rem;
    }
    
    .todos-sections {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .todos-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .todos-body {
        padding: 15px;
    }

    .todos-section-title {
        font-size: 1.1rem;
    }
}

/* === EXTERNAL SIDEBAR TOGGLE === */
.external-sidebar-toggle {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 50;
    background: none;
    border: none;
    color: var(--text-primary, #3a2b20);
    font-size: 1.2em;
    cursor: pointer;
    padding: 5px;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

.external-sidebar-toggle:hover {
    background-color: var(--border-primary, #c8b89a);
}

.external-sidebar-toggle .toggle-icon {
    font-size: 1.1em;
}

#chat-header {
    display: none; /* Hide the header completely */
}

#chat-header h1 {
    display: none; /* Hide the header text */
}

#chat-log {
    flex: 1;
    overflow-y: auto;
    background-color: transparent;
    padding: 0; /* Remove padding from container */
    touch-action: pan-y; /* Allow vertical scrolling even when body has touch-action: none */
    overscroll-behavior-y: contain; /* Prevent scroll from chaining to parent when hitting boundaries */
}

.chat-content {
    padding: 15px;
    /* Add bottom padding to prevent last message from being hidden behind fixed input bar */
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px) + var(--maintenance-progress-clearance, 0px));
    max-width: 900px; /* Apply width constraint to content */
    margin: 0 auto; /* Center the chat content */
}

/* Remove compensatory padding on desktop where input area is not fixed */
@media (min-width: 769px) {
    .chat-content {
        /* Standard desktop padding, plus room above an active maintenance stack */
        padding-bottom: calc(15px + var(--maintenance-stack-above-composer, 0px));
    }
}

.message {
    margin-bottom: 15px;
    line-height: 1.6;
    display: flex; /* Keep flex for alignment if needed or change based on bubble style */
    flex-direction: row; /* Ensure default row direction */
}

.message .text {
    padding: 10px 15px;
    border-radius: 12px;
    max-width: 70%;
    background-color: #f0e6d8; /* Light beige for assistant/default */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    white-space: pre-wrap;
    word-break: break-word;
}

.message.user .timestamp,
.message.user .speaker,
.message.assistant .timestamp,
.message.assistant .speaker,
.message.system .timestamp {
    display: none;
}

/* User messages aligned to one side (e.g., right) */
.message.user {
    justify-content: flex-end; /* Aligns the bubble container to the right */
}

.message.assistant {
    justify-content: flex-start; /* Aligns the .text bubble to the left */
}

/* === Bubble Styling (.text element becomes the bubble) === */
.message .text {
    padding: 10px 15px; /* Symmetric padding for balanced appearance */
    border-radius: var(--bubble-border-radius, 15px); /* Softer corners */
    max-width: 75%; /* Prevent bubbles from being too wide */
    box-shadow: var(--shadow-soft-outset, 0 2px 5px rgba(0,0,0,0.15)); /* Softer outset shadow */
    white-space: normal;
    word-break: break-word; /* Keep this */
}

.message.assistant .text {
    background-color: var(--bubble-bg-assistant, #f0e6d8); /* Assistant bubble color */
    color: var(--text-primary, #3a2b20); /* Ensure text color contrasts well */
}

.message.assistant .message-cost,
.approval-card .proposal-cost {
    display: block;
    margin-top: 0.4rem;
    color: var(--text-secondary, #5c4b3f);
    font-size: 0.72em;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    text-align: right;
    overflow-wrap: anywhere;
}

.message.assistant.runtime-failure .text {
    background-color: var(--status-disconnected-bg, #f0d4cc);
    border: 1px solid #b76a59;
    color: #6b241c;
}

/* A reply the user stopped before any text: a neutral notice, not an error. */
.message.assistant.runtime-failure.user-stopped-notice .text {
    background-color: transparent;
    border: 1px dashed var(--border-primary, #c8b89a);
    color: var(--text-secondary, #5c4b3f);
    font-style: italic;
}

/* Muted marker on a saved partial reply the user stopped. */
.message.assistant .message-stopped-marker {
    display: block;
    margin-top: 0.4rem;
    color: var(--text-secondary, #5c4b3f);
    font-size: 0.72em;
    font-style: italic;
    line-height: 1.2;
}

.message.user .text {
    background-color: var(--bubble-bg-user, #e0d8cc); /* User bubble color */
    color: var(--text-primary, #3a2b20);
    line-height: 1.4; /* Match assistant body text while preserving plain-text rendering */
    white-space: pre-wrap; /* Preserve newlines from Shift+Enter / mobile Return */
}

/* === System Messages Styling === */
.message.system {
    justify-content: center; /* Center the content of the system message line */
    padding: 10px 0;
    width: 100%;
}

.message.system .text {
    background-color: transparent;
    box-shadow: none;
    font-style: italic;
    color: var(--text-secondary, #7a5c43); /* Muted color */
    text-align: center;
    max-width: 90%; /* Allow it to be fairly wide */
}

/* For system messages, you might want to keep the timestamp but hide "System:" */
.message.system .timestamp {
    font-size: 0.8em;
    color: var(--text-secondary, #7a5c43);
    margin-right: 5px; /* Space between timestamp and text if text is not on new line */
}
.message.system .speaker {
    display: none; /* Hide the "System:" speaker part if desired */
}

/* Generated images from AI image generation */
.generated-image {
    max-width: 100%;
    max-height: 400px;
    border-radius: 8px;
    margin-top: 8px;
}

/* Inspiration header image - borderless at top/left/right of bubble */
/* Remove top padding from bubble when it has an inspiration image */
.message.assistant .text:has(> .inspiration-header-image:first-child) {
    padding-top: 0;
}

.message.assistant .text .inspiration-header-image {
    margin: 0 -15px 10px -15px;  /* Extend to left/right edges, space below */
    border-radius: var(--bubble-border-radius, 15px) var(--bubble-border-radius, 15px) 0 0;
    overflow: hidden;
}

.message.assistant .text .inspiration-header-image img {
    width: 100%;
    aspect-ratio: 21 / 9;
    display: block;
    object-fit: cover;
    max-height: 120px;  /* Keep it thin */
}

.message.assistant .text .inspiration-text {
    /* Container for text after the header image */
}

/* === Typing Indicator === */
.typing-indicator {
    margin-bottom: 15px;
    display: flex;
    justify-content: flex-start; /* Align to left like assistant messages */
}

.typing-indicator-dots {
    background-color: var(--bubble-bg-assistant, #f0e6d8);
    border-radius: var(--bubble-border-radius, 15px);
    padding: 10px 15px;
    box-shadow: var(--shadow-soft-outset, 0 2px 5px rgba(0,0,0,0.15));
    display: flex;
    align-items: center;
    gap: 4px;
}

.typing-indicator-dots span {
    width: 8px;
    height: 8px;
    background-color: var(--text-secondary, #7a5c43);
    border-radius: 50%;
    opacity: 0.6;
    animation: typingPulse 1.4s ease-in-out infinite;
}

.typing-indicator-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingPulse {
    0%, 60%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    30% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* Inline typing indicator (inside message bubble for flow auto-start) */
.typing-indicator-dots.inline-typing {
    display: inline-flex;
    gap: 4px;
    padding: 0;
    margin: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
}

/* === Research Indicator === */
.research-indicator {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 18px;
    background: linear-gradient(135deg, var(--bubble-bg-assistant, #f0e6d8) 0%, #e8dcc8 100%);
    border-radius: var(--bubble-border-radius, 15px);
    box-shadow: var(--shadow-soft-outset, 0 2px 5px rgba(0,0,0,0.15));
    max-width: 400px;
}

/* Header row: icon + text + dots */
.research-indicator .research-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.research-indicator .research-icon {
    font-size: 1.2em;
    flex-shrink: 0;
}

.research-indicator .research-text {
    color: var(--text-primary, #5a4535);
    font-weight: 500;
    font-size: 0.95em;
}

.research-indicator .research-dots {
    display: flex;
    align-items: center;
    gap: 3px;
}

.research-indicator .research-dots span {
    width: 6px;
    height: 6px;
    background-color: var(--accent-color, #8b6914);
    border-radius: 50%;
    opacity: 0.5;
    animation: researchPulse 1.4s ease-in-out infinite;
}

.research-indicator .research-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.research-indicator .research-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

/* Task row: current task being worked on */
.research-indicator .research-task {
    color: var(--text-secondary, #7a5c43);
    font-size: 0.85em;
    padding-left: 28px; /* Align with text after icon */
    min-height: 1.2em;
}

.research-indicator .research-task:empty {
    display: none;
}

/* Progress bar */
.research-indicator .research-progress-bar {
    height: 4px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}

.research-indicator .research-progress-fill {
    height: 100%;
    width: 0%;
    background-color: var(--accent-color, #8b6914);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.research-indicator .research-question {
    width: 100%;
    color: var(--text-secondary, #7a5c43);
    font-size: 0.85em;
    font-style: italic;
    margin-top: 4px;
    opacity: 0.9;
}

@keyframes researchPulse {
    0%, 60%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    30% {
        opacity: 1;
        transform: scale(1.3);
    }
}

/*

.message {
    margin-bottom: 10px;
    line-height: 1.4;
    display: flex; 
    flex-wrap: nowrap;
}

.message .timestamp {
    color: #888888; 
    margin-right: 8px;
    flex-shrink: 0; 
}

.message .speaker {
    font-weight: bold;
    margin-right: 8px;
    flex-shrink: 0;
}

.message.user .speaker {
    color: #569cd6; 
}

.message.assistant .speaker {
    color: #ce9178; 
}

.message.system .speaker {
    color: #b5cea8;
}

.message .text {
    white-space: pre-wrap;
    word-break: break-word;
    flex-grow: 1;
}
*/

/* === Streaming Message Styles === */
/* Blinking cursor removed for cleaner streaming experience */

#chat-input-area {
    display: flex;
    flex-wrap: wrap;
    font-family: var(--theme-font-family-primary);
    background-color: var(--bg-main, #f5efdc); /* Match page background for better overlay */
    padding: 15px;
    /* Safe area inset for iPhone notch and home indicator */
    padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
    /* border-top: 1px solid var(--border-primary, #d8c8b0); */ /* Remove border */
    max-width: 900px; /* Match chat content width */
    margin: 0 auto; /* Center the input area */
    width: 100%;
    box-sizing: border-box;

    /* Fixed positioning to ensure visibility on iOS Safari */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100; /* Stay above chat content */
}

#chat-approval-notice {
    flex-basis: 100%;
    margin-bottom: 8px;
    color: var(--text-primary, #3a2b20);
    font-size: 0.9em;
}

/* A scheduled message is running; the composer stays usable (a message sent now waits for it).
   The held-message notice restores "Your message will send when it finishes" after a reload. */
#chat-scheduled-run-notice,
#chat-held-send-notice {
    flex-basis: 100%;
    margin-bottom: 8px;
    color: var(--text-secondary, #6b4f2e);
    font-size: 0.9em;
    font-style: italic;
}

#chat-scheduled-run-notice:not([hidden]),
#chat-held-send-notice:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 8px;
}

#chat-scheduled-run-notice[hidden],
#chat-held-send-notice[hidden] {
    display: none;
}

#chat-scheduled-run-notice .spinning {
    display: inline-block;
    font-style: normal;
    animation: spin 1.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    #chat-scheduled-run-notice .spinning {
        animation: none;
    }
}

#chat-scheduled-run-text,
#chat-held-send-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    #chat-scheduled-run-notice,
    #chat-held-send-notice {
        font-size: 14px;
        line-height: 1.3;
        margin-bottom: 6px;
    }
}

/* Text and Show approval share one row, so a pending approval leaves room to read the card. */
#chat-approval-notice:not([hidden]) {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px 12px;
}

#chat-approval-notice-text {
    flex: 1 1 auto;
    min-width: 0;
}

#chat-approval-notice #chat-approval-show {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 600px) {
    #chat-approval-notice {
        font-size: 14px;
        line-height: 1.3;
        margin-bottom: 6px;
    }
}

/* Reaches the first pending card, including when a Live Page covers the chat. */
#chat-approval-show {
    font-size: 15px;
    line-height: 1.2;
    min-height: 36px;
}

#chat-approval-show[hidden] {
    display: none;
}

/* A card Show approval located keeps its ring after a pointer click too. */
.approval-card[tabindex="-1"]:focus-visible,
.approval-card[tabindex="-1"][data-located]:focus {
    outline: 2px solid var(--button-bg, #7a5c43);
    outline-offset: 2px;
}

#chat-approval-show:focus-visible {
    outline: 2px solid var(--button-bg, #7a5c43);
    outline-offset: 2px;
}

/* A pending maintenance review dims the composer; its notice action stays usable. */
#chat-input-area.chat-disabled #chat-approval-notice {
    position: relative;
    z-index: 11;
    pointer-events: auto;
}

@media (pointer: coarse), (max-width: 768px) {
    #chat-approval-show {
        min-height: 44px;
    }
}

/* Restore flexbox layout on desktop - fixes overlap issue from fixed positioning */
@media (min-width: 769px) {
    #chat-input-area {
        position: static; /* Remove fixed positioning on desktop */
        flex-shrink: 0; /* Restore original flex behavior */
    }
}


/* Composer border surrounds the textarea; keep its original 10px text inset. */
#chat-input-box {
    display: flex;
    align-items: flex-start;
    /* Take whatever width the button leaves, so swapping Send for Stop never
       wraps the button onto its own line. */
    flex: 1 1 0;
    min-width: 0;
    background-color: var(--input-bg, #fff);
    border: 1px solid var(--input-border, #c8b89a);
    border-radius: var(--input-border-radius, 8px);
    margin-right: 10px;
    gap: 4px;
    transition: border-color 0.15s ease;
}

#chat-input-box:focus-within {
    border-color: #8a5c43;
}

#chat-message-input {
    background: transparent;
    color: var(--text-input, #3a2b20);
    border: none;

    padding: 10px;
    font-family: var(--theme-font-family-primary);

    flex-grow: 1;
    font-size: inherit;
    resize: none;
    min-height: 20px;
    -webkit-appearance: none;
    appearance: none;
}

#chat-message-input:focus {
    outline: none;
}

#chat-message-submit {
    /* padding: 8px 15px; */
    /* background-color: #0e639c; */
    /* color: white; */
    /* border: none; */
    /* border-radius: 3px; */
    cursor: pointer;
    /* font-family: inherit; */
    font-size: inherit;

    background-color: #7a5c43; /* A warm brown */
    color: #fdf5e6; /* Light text */
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    font-family: var(--theme-font-family-primary); 
}

#chat-message-submit:hover {
    background-color: var(--button-hover-bg, #5a3a22);
}

/* Stop takes Send's place while a reply runs: same size, secondary look. */
#chat-message-stop {
    cursor: pointer;
    font-size: inherit;
    font-family: var(--theme-font-family-primary);
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    /* Wide enough for "Stopping…", so the label change does not move the composer. */
    min-width: 7.5em;
    flex-shrink: 0;
    background-color: var(--card-bg, #f5f0e8);
    color: var(--text-primary, #3a2b20);
    box-shadow: inset 0 0 0 2px var(--button-bg, #7a5c43);
}

#chat-message-stop[hidden],
#chat-message-submit[hidden] {
    display: none;
}

#chat-message-stop:hover:not(:disabled) {
    background-color: var(--border-primary, #c8b89a);
}

#chat-message-stop:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    /* Phones: close to Send's footprint; "Stopping…" still fits. */
    #chat-message-stop {
        min-width: 6.2em;
        padding: 10px 10px;
    }
}

/* ===== Thinking Effort Picker ===== */

#thinking-picker-container {
    position: relative;
    align-self: flex-start;
    flex-shrink: 0;
    margin-top: 6px;
}

@media (min-width: 769px) {
    #chat-input-box {
        gap: 3px;
    }
    #thinking-picker-container {
        margin-top: 7px;
    }
}

#thinking-picker-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s ease;
    font-size: 18px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
}

#thinking-picker-btn:hover {
    background: rgba(122, 92, 67, 0.08);
}

#thinking-picker-btn.open {
    background: rgba(122, 92, 67, 0.12);
}

#thinking-picker-emoji {
    display: block;
    width: 20px;
    height: 20px;
}

/* Popover */
#thinking-picker-popover {
    position: absolute;
    bottom: calc(100% + 20px);
    left: 0;
    width: 240px;
    background: var(--bg-journal, #fdf5e6);
    border: 2px solid var(--border-primary, #c8b89a);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 10px;
    z-index: 150;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

#thinking-picker-popover.hidden {
    display: none;
    opacity: 0;
    transform: translateY(4px);
}

.thinking-picker-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #7a5c43);
    margin-bottom: 8px;
    padding-left: 2px;
    font-family: var(--font-primary, 'EB Garamond', serif);
}

.thinking-picker-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    border: 1.5px solid transparent;
    margin-bottom: 4px;
    transition: all 0.12s ease;
    background: transparent;
}

.thinking-picker-option:last-child {
    margin-bottom: 0;
}

.thinking-picker-option:hover {
    background: rgba(122, 92, 67, 0.05);
}

.thinking-picker-option.active {
    border-color: var(--border-focus, #7a5c43);
    background: rgba(122, 92, 67, 0.06);
}

.thinking-picker-option-emoji {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.thinking-picker-option-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #3a2b20);
    font-family: var(--font-primary, 'EB Garamond', serif);
}

.thinking-picker-option-subtitle {
    font-size: 12px;
    color: var(--text-secondary, #7a5c43);
    font-family: var(--font-primary, 'EB Garamond', serif);
}

/* Scrollbar styling for webkit browsers */
#chat-log::-webkit-scrollbar {
    width: 8px;
}

#chat-log::-webkit-scrollbar-track {
    background: var(--bg-main, #f5efdc); /* Match page background */
}

#chat-log::-webkit-scrollbar-thumb {
    background-color: #d0d0d0; /* Light gray */
    border-radius: 4px;
    border: 1px solid var(--bg-main, #f5efdc); /* Border matches background */
}

#chat-log::-webkit-scrollbar-thumb:hover {
    background-color: #b8b8b8; /* Slightly darker on hover */
}

#chat-log::-webkit-scrollbar-track:hover {
    background: var(--bg-main, #f5efdc); /* Keep same background on hover */
}

/* === LIVE PAGES SIDEBAR === */
.sidebar {
    background-color: var(--bg-input-area, #f0e9d9);
    border-right: 2px solid var(--border-primary, #c8b89a);
    width: 300px;
    min-width: 300px;
    max-width: 300px;
    height: 100dvh; /* Use dynamic viewport height for mobile keyboard support */
    transition: width 0.3s ease, min-width 0.3s ease, opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 8px rgba(0,0,0,0.15);
    flex-shrink: 0;
    padding-bottom: 15px; /* add internal bottom spacing so footer does not touch edge */
    overflow: hidden; /* prevent outer sidebar from scrolling; inner list will scroll */
}

.sidebar.collapsed {
    width: 0;
    min-width: 0;
    max-width: 0;
    opacity: 0;
    border-right: none;
    box-shadow: none;
    overflow: hidden;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px; /* Only horizontal padding */
    height: 60px; /* Fixed height for perfect alignment */
    border-bottom: 1px solid var(--border-primary, #c8b89a);
    background-color: var(--bg-input-area, #f0e9d9);
    box-sizing: border-box;
}

.sidebar-header h3 {
    margin: 0;
    font-family: var(--font-decorative, 'Funnel Sans', serif);
    color: var(--text-primary, #3a2b20);
    font-size: 1.2em;
    transition: opacity 0.3s ease;
}

.sidebar.collapsed .sidebar-header h3 {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.sidebar-toggle {
    background: none;
    border: none;
    color: var(--text-primary, #3a2b20);
    font-size: 1.2em;
    cursor: pointer;
    padding: 5px;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

.sidebar-toggle:hover {
    background-color: var(--border-primary, #c8b89a);
}

.sidebar.collapsed .toggle-icon {
    transform: rotate(0deg);
}

.toggle-icon {
    transform: rotate(0deg);
    transition: transform 0.3s ease;
    font-size: 1.1em;
}

.sidebar-content {
    flex: 1;                 /* fill available height between header and footer */
    padding: 15px;
    overflow: hidden;        /* do not scroll the container itself */
    display: flex;           /* stack header area + list */
    flex-direction: column;
}

.sidebar.collapsed .sidebar-content {
    opacity: 0;
    width: 0;
    overflow: hidden;
    padding: 0;
}

.sidebar-actions {
    margin-bottom: 15px;
}

/* Ravani branding and section header */
.app-title {
    margin: 0;
    font-family: var(--font-decorative, 'Funnel Sans', serif);
    color: var(--text-primary, #3a2b20);
    font-size: 1.4em;
    letter-spacing: 0.5px;
}

.sidebar-separator {
    border: none;
    border-top: 1px solid var(--border-primary, #c8b89a);
    margin: 8px 0 10px 0; /* space below header */
    opacity: 0.9;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 12px 0;
}

.section-title {
    font-size: 1.15rem; /* slightly larger for better balance with the + button */
    color: var(--text-primary, #3a2b20);
    opacity: 0.9;
    font-weight: 600;
}

/* Sidebar footer (global) */
.sidebar-footer {
    padding: 15px;
    border-top: 1px solid var(--border-primary, #c8b89a);
    background-color: var(--bg-input-area, #f0e9d9);
    display: flex;
    justify-content: center;   /* center the buttons horizontally */
    align-items: center;       /* center vertically within footer */
    gap: 10px;
    margin-top: auto;          /* push footer to the bottom of the sidebar */
    margin-bottom: 10px;       /* add spacing so footer buttons don't touch the bottom */
    flex-shrink: 0;            /* do not shrink */
}

.sidebar-footer .btn {
    min-width: 120px;          /* keep consistent visual width across buttons */
}

.sidebar.collapsed .sidebar-footer {
    display: none; /* hide footer when collapsed */
}

.btn {
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: var(--font-primary, 'EB Garamond', serif);
    font-size: 16px;
    transition: background-color 0.2s ease;
}

.btn-primary {
    background-color: var(--button-bg, #7a5c43);
    color: var(--button-text, #fdf5e6);
    border: 2px solid var(--button-bg, #7a5c43); /* match secondary thickness so sizes look consistent */
}

.btn-primary:hover {
    background-color: var(--button-hover-bg, #5a3a22);
}

.btn-primary.active {
    background-color: var(--button-hover-bg, #5a3a22);
    border-color: var(--button-hover-bg, #5a3a22);
}

.btn-primary.active:hover {
    background-color: var(--button-hover-bg, #5a3a22);
    border-color: var(--button-hover-bg, #5a3a22);
}

.btn-primary:disabled {
    background-color: #a89580;
    border-color: #a89580;
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-sm {
    padding: 6px 10px;
    font-size: 16px;
}

/* Secondary and Danger button styles for sidebar footer actions */
.btn-secondary {
    background-color: transparent;
    color: var(--text-primary, #3a2b20);
    border: 2px solid var(--border-primary, #c8b89a);
}

.btn-secondary:hover {
    background-color: var(--border-primary, #c8b89a);
    color: var(--text-primary, #3a2b20);
}

.btn-danger {
    background-color: #d73a49;
    color: #ffffff;
    border: 2px solid #d73a49;
}

.btn-danger:hover {
    background-color: #b31d28;
    border-color: #b31d28;
}

.live-pages-list {
    flex: 1;                             /* take remaining space inside sidebar-content */
    overflow: auto;                      /* only this pane scrolls */
    -webkit-overflow-scrolling: touch;   /* smooth scrolling on iOS/macOS */
    scrollbar-gutter: stable;            /* reserve space to prevent layout shift */
    scrollbar-width: thin;               /* Firefox: always show thin scrollbar */
    scrollbar-color: rgba(90, 58, 34, 0.35) transparent; /* thumb, track */
}

.live-page-item {
    padding: 10px;
    margin-bottom: 8px;
    background-color: var(--bubble-bg-assistant, #f0e6d8);
    border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    position: relative; /* For absolute positioning of child elements like delete button */
}

/* List entries are real buttons; reset native button styling so they keep the card look. */
button.live-page-item {
    display: block;
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.live-page-item .live-page-title,
.live-page-item .live-page-meta {
    display: block;
}

.live-page-item:focus-visible {
    outline: 2px solid var(--button-bg, #7a5c43);
    outline-offset: 2px;
}

.live-page-item:hover {
    background-color: var(--bubble-bg-user, #e0d8cc);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.live-page-item.editing {
    background-color: #d4c8b8; /* Darker than hover for clear visual indication */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: none; /* Instant highlighting, no fade effect */
}

.live-page-title {
    font-weight: bold;
    color: var(--text-primary, #3a2b20);
    margin-bottom: 5px;
    font-size: 17px;
}

.live-page-description {
    color: var(--text-secondary, #5c4b3f);
    font-size: 15px;
    line-height: 1.4;
    /* Truncate to 3 lines with ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-page-meta {
    font-size: 13px;
    color: var(--text-secondary, #7a5c43);
    margin-top: 5px;
    font-style: italic;
}

.loading-message {
    text-align: center;
    color: var(--text-secondary, #5c4b3f);
    font-style: italic;
    padding: 20px;
}

.error-message {
    color: #da3633;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0;
    font-size: 14px;
}

/* === TODO LIST STYLING === */
.todos-list {
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(90, 58, 34, 0.35) transparent;
}

.todo-item {
    padding: 12px;
    margin-bottom: 8px;
    background-color: var(--bubble-bg-assistant, #f0e6d8);
    border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.todo-item:hover {
    background-color: var(--bubble-bg-user, #e0d8cc);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.todo-item.completed {
    opacity: 0.6;
    background-color: rgba(139, 114, 86, 0.1);
}

.todo-item.completed .todo-text {
    text-decoration: line-through;
}

.todo-item.overdue {
    border-color: #da3633;
    background-color: rgba(218, 54, 51, 0.05);
}

.todo-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary, #3a2b20);
    margin-bottom: 4px;
    line-height: 1.3;
}

.todo-status {
    font-size: 16px;
    color: var(--border-focus, #8a5c43);
    font-weight: bold;
    flex-shrink: 0;
}

.todo-text {
    flex: 1;
}

.todo-priority {
    font-size: 16px;
    color: #da3633;
    font-weight: bold;
    flex-shrink: 0;
}

.todo-meta {
    font-size: 13px;
    color: var(--text-secondary, #7a5c43);
    font-style: italic;
    line-height: 1.2;
}

/* Todo form styling */
.todo-form {
    font-family: var(--font-primary, 'EB Garamond', serif);
    color: var(--text-primary, #3a2b20);
    line-height: 1.6;
}

.todo-form input[type="text"],
.todo-form textarea,
.todo-form select,
.todo-form input[type="datetime-local"] {
    width: 100%;
    padding: 12px 15px;
    background-color: var(--input-bg, #fff);
    border: 2px solid var(--border-primary, #c8b89a);
    border-radius: 8px;
    font-family: var(--font-primary, 'EB Garamond', serif);
    font-size: 16px;
    color: var(--text-primary, #3a2b20);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

.todo-form select {
    cursor: pointer;
}

.todo-form input[type="text"]:focus,
.todo-form textarea:focus,
.todo-form select:focus,
.todo-form input[type="datetime-local"]:focus {
    outline: none;
    border-color: var(--border-focus, #8a5c43);
    box-shadow: 0 0 0 3px rgba(138, 92, 67, 0.1);
}

.journal-form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.journal-form-half {
    flex: 1;
    margin-bottom: 0;
}

/* Todos list scrollbars: match live pages styling */
.todos-list::-webkit-scrollbar {
    width: 8px;
}
.todos-list::-webkit-scrollbar-thumb {
    background-color: rgba(90, 58, 34, 0.35);
    border-radius: 4px;
}
.todos-list::-webkit-scrollbar-track {
    background: transparent;
}

/* === MODAL OVERLAY === */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.modal-overlay.show {
    display: flex;
}

.modal-content {
    background-color: var(--bg-journal, #fdf5e6);
    border: 2px solid var(--border-primary, #c8b89a);
    border-radius: 10px;
    box-shadow: var(--shadow-journal, 0 4px 12px rgba(0,0,0,0.1));
    width: 90%;
    max-width: 600px;
    max-height: 90%;
    overflow-y: auto;
    position: relative;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid var(--border-primary, #c8b89a);
    background-color: var(--bg-input-area, #f0e9d9);
}

.modal-header h2 {
    margin: 0;
    font-family: var(--font-decorative, 'Funnel Sans', serif);
    color: var(--text-primary, #3a2b20);
    font-size: 1.5em;
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.8em; /* Match category delete button size */
    cursor: pointer;
    color: var(--text-primary, #3a2b20);
    padding: 0;
    width: 36px; /* Match category delete button size */
    height: 36px; /* Match category delete button size */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.close-btn:hover {
    background-color: var(--border-primary, #c8b89a);
}

.close-btn:active {
    background-color: rgba(139, 114, 86, 0.3); /* Darker on click */
}

.modal-body {
    padding: 20px;
}

/* === JOURNAL FORM STYLING === */
.live-page-form {
    font-family: var(--font-primary, 'EB Garamond', serif);
    color: var(--text-primary, #3a2b20);
    line-height: 1.6;
}

.journal-form-group {
    margin-bottom: 25px;
}

.notion-connection-card {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 12px;
    background: var(--card-bg, #f5f0e8);
}

.notion-connection-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.notion-connection-header h3 {
    margin: 0 0 4px;
    color: var(--text-primary, #3a2b20);
    font-size: 1.3rem;
}

.notion-connection-header p,
.notion-connection-disclosure,
.notion-connection-state,
.notion-connection-capabilities {
    margin: 0;
    color: var(--text-secondary, #6b5844);
    line-height: 1.4;
}

.notion-connection-disclosure {
    margin: 16px 0;
    padding: 12px 0;
    border-top: 1px solid var(--border-primary, #c8b89a);
    border-bottom: 1px solid var(--border-primary, #c8b89a);
    font-size: 0.9rem;
}

.notion-connection-badge {
    flex: 0 0 auto;
    padding: 3px 8px;
    border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 999px;
    color: var(--text-primary, #3a2b20);
    font-size: 0.75rem;
    font-weight: 600;
}

.notion-connection-badge-connected {
    border-color: #4c7a50;
    background: #e4f0e3;
    color: #245329;
}

.notion-connection-badge-warning {
    border-color: #b07a32;
    background: #f5e6c8;
    color: #6b4f2e;
}

.notion-connection-details {
    display: grid;
    gap: 8px;
    margin: 0 0 12px;
}

.notion-connection-details div {
    display: grid;
    gap: 2px;
}

.notion-connection-details dt {
    color: var(--text-secondary, #6b5844);
    font-size: 0.82rem;
}

.notion-connection-details dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--text-primary, #3a2b20);
    font-weight: 600;
}

.notion-connection-card form {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

.notion-connection-card button {
    min-height: 44px;
}

.notion-page-selection form {
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.notion-page-selection input[type="url"] {
    flex: 1 1 200px;
    min-width: 0;
    min-height: 44px;
    padding: 8px;
    border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 6px;
    color: var(--text-primary, #3a2b20);
    background: var(--card-bg, #f5f0e8);
}

.notion-page-picker { margin: 20px 0 12px; }
.notion-page-picker label { display: block; font-weight: 600; margin-bottom: 8px; }
.notion-page-picker [role="status"] { font-size: 0.88rem; color: var(--text-secondary, #6b5844); margin: 8px 0; line-height: 1.4; }
.notion-page-picker input[type="search"] {
    width: 100%; min-height: 44px; box-sizing: border-box;
    padding: 8px 12px; border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 6px; color: var(--text-primary, #3a2b20);
    background: var(--card-bg, #f5f0e8); font: inherit;
}
.notion-page-picker [role="listbox"] { max-height: 300px; overflow-y: auto; }
.notion-page-option {
    display: flex; gap: 10px; align-items: center; min-height: 44px;
    padding: 10px; margin: 4px 0; border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 6px; cursor: pointer; overflow-wrap: anywhere;
}
.notion-page-option small { display: block; }
.notion-page-option[aria-selected="true"] { outline: 2px solid var(--button-bg, #7a5c43); outline-offset: -2px; }
.notion-page-option[aria-disabled="true"] { opacity: 0.65; cursor: not-allowed; }
.notion-page-icon { flex: 0 0 24px; text-align: center; }
.notion-picker-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 12px; }

.notion-page-selection li {
    overflow-wrap: anywhere;
    margin-bottom: 8px;
}

.notion-sources-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 22px; }
.notion-sources-heading h4 { margin: 0; font-size: 1.05rem; }
.notion-sources-heading > span { color: var(--text-secondary, #6b5844); font-size: 0.85rem; white-space: nowrap; }
#notion-page-help { margin: 6px 0 12px; font-size: 0.9rem; line-height: 1.4; color: var(--text-secondary, #6b5844); }
.notion-selected-sources { list-style: none; padding: 0; margin: 0; }
.notion-selected-sources > li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-primary, #c8b89a); }
.notion-selected-source-label { min-width: 0; }
.notion-selected-source-label strong, .notion-selected-source-label small { display: block; }
.notion-selected-source-label small { margin-top: 2px; color: var(--text-secondary, #6b5844); font-size: 0.82rem; }
.notion-selected-sources > .notion-source-empty { padding: 16px 12px; border: 1px dashed var(--border-primary, #c8b89a); border-radius: 8px; color: var(--text-secondary, #6b5844); font-size: 0.92rem; }
.notion-selected-sources li form { flex: 0 0 auto; margin: 0; }
.notion-access-details { font-size: 0.9rem; line-height: 1.45; color: var(--text-secondary, #6b5844); }
/* Staff background page update resume: a full touch target on phones (style guide: 44px). */
@media (max-width: 480px) {
    .background-updates-resume-btn { min-height: 44px; }
}

.notion-access-details summary { padding: 10px 0; min-height: 44px; box-sizing: border-box; cursor: pointer; color: var(--text-primary, #3a2b20); }
.notion-access-details p { margin: 8px 0 12px; }
.notion-connection-card .notion-disconnect { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-primary, #c8b89a); justify-content: flex-start; }
.notion-disconnect button { color: #7a3226; }
.notion-page-selection [role="alert"] { color: #7a3226; font-size: 0.9rem; }
@media (max-width: 480px) {
    .notion-connection-card { padding: 14px; }
    .notion-connection-header { flex-wrap: wrap; }
    .notion-selected-sources > li { gap: 8px; }
}

.notion-page-selection li form {
    margin-top: 4px;
}

.notion-hybrid-message {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    background: #f5e6c8;
    color: #6b4f2e;
}

.notion-connection-card :focus-visible {
    outline: 3px solid var(--button-bg, #7a5c43);
    outline-offset: 2px;
}

.journal-label {
    display: block;
    font-family: var(--font-decorative, 'Funnel Sans', serif);
    font-size: 1.1em;
    font-weight: 400;
    color: var(--text-primary, #3a2b20);
    margin-bottom: 8px;
    text-transform: none;
}

/* Settings modal: smoother checkbox label for SMS opt-in */
.sms-optin-label {
    font-family: var(--font-primary, 'EB Garamond', serif);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-primary, #3a2b20);
    line-height: 1.4;
}

.live-page-form input[type="text"],
.live-page-form select,
.live-page-form textarea {
    width: 100%;
    padding: 12px 15px;
    background-color: var(--input-bg, #fff);
    border: 2px solid var(--border-primary, #c8b89a);
    border-radius: 8px;
    font-family: var(--font-primary, 'EB Garamond', serif);
    font-size: 16px;
    color: var(--text-primary, #3a2b20);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
    resize: vertical;
}

.live-page-form input[type="text"]:focus,
.live-page-form select:focus,
.live-page-form textarea:focus {
    outline: none;
    border-color: var(--border-focus, #8a5c43);
    box-shadow: 0 0 0 3px rgba(138, 92, 67, 0.1);
}

/* The AI edit policy select matches the title field's height and has no resize handle. */
.live-page-form select {
    box-sizing: border-box;
    min-height: 44px;
    line-height: normal;
    /* A select's text box is 2px taller than a text input's at the same font. */
    padding-top: 11px;
    padding-bottom: 11px;
    resize: none;
}

.live-page-form select:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.live-page-form textarea {
    min-height: 120px;
    font-family: var(--font-primary, 'EB Garamond', serif);
    line-height: 1.6;
}

/* Textarea wrapper for proper scrollbar clipping within rounded corners */
.textarea-wrapper {
    border: 2px solid var(--border-primary, #c8b89a);
    border-radius: 8px;
    overflow: hidden; /* Clips scrollbars within rounded corners */
    background-color: var(--input-bg, #fff);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

/* Focus state for wrapper when textarea inside is focused */
.textarea-wrapper:focus-within {
    border-color: var(--border-focus, #8a5c43);
    box-shadow: 0 0 0 3px rgba(138, 92, 67, 0.1);
}

/* Remove border and border-radius from wrapped textareas (wrapper handles these) */
.textarea-wrapper textarea {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Remove focus styles from wrapped textarea (wrapper handles these) */
.textarea-wrapper textarea:focus {
    border: none;
    box-shadow: none;
}

.global-model-settings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.global-model-settings > .journal-form-group {
    min-width: 0;
    margin-bottom: 0;
}

.model-setting-wide {
    grid-column: 1 / -1;
}

.global-model-settings select,
.global-model-settings input:not([type="hidden"]) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px;
    border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 6px;
    background: var(--input-bg, #fff);
    color: var(--text-primary, #3a2b20);
    font: inherit;
}

.global-model-settings select:focus-visible,
.global-model-settings input:focus-visible {
    outline: 2px solid var(--border-focus, #8a5c43);
    outline-offset: 2px;
}

/* Staff Global Settings: one bordered card per group (same groups as the iPhone app). */
.global-settings-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 24px;
}

.global-settings-panel #settings-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gs-notice {
    padding: 12px 14px;
    border-left: 3px solid var(--button-bg, #7a5c43);
    border-radius: 6px;
    background: var(--bg-input-area, #f0e9d9);
}

.gs-notice p {
    margin: 0;
}

.gs-notice-title {
    font-weight: 600;
    color: var(--text-primary, #3a2b20);
}

.gs-notice .gs-notice-text {
    margin-top: 4px;
    font-size: 14px;
    color: var(--text-secondary, #5c4b3f);
}

.gs-group {
    padding: 16px 16px 6px;
    border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 10px;
    background: var(--card-bg, #f5f0e8);
}

.gs-group-title {
    margin: 0;
    font-family: var(--font-primary, 'EB Garamond', serif);
    font-size: 1.25em;
    font-weight: 600;
    color: var(--text-primary, #3a2b20);
}

.gs-group-intro {
    margin: 4px 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-journal, #dcd0b8);
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-secondary, #5c4b3f);
}

.gs-group form,
.gs-group .journal-form-group {
    margin-bottom: 12px;
}

.gs-group .journal-label {
    font-size: 1em;
    margin-bottom: 6px;
}

/* Background Live Page updates card: the saves-disabled notice (status-banner amber) and the
   "not running" warning (disconnected-banner rose) stand apart from help text and the controls below. */
.global-settings-panel .gs-group p[data-background-saves-disabled],
.global-settings-panel .gs-group p[data-background-problem] {
    margin: 0 0 12px;
    padding: 8px 10px;
    border-radius: 6px;
    background: #f5e6c8;
    color: #6b4f2e;
}

.global-settings-panel .gs-group p[data-background-problem] {
    background: #f0d4cc;
    color: #7a3226;
}

.gs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0 12px;
    /* Keep side-by-side inputs level when one label wraps onto two lines. */
    align-items: end;
}

.gs-grid > .journal-form-group {
    min-width: 0;
}

.gs-wide {
    grid-column: 1 / -1;
}

/* Side-by-side spend inputs (label, input, help) share row tracks, so the inputs line up even when one
   label or help text is longer than the other (explorer 2026-10-21). */
.gs-grid > .journal-form-group:not(.gs-wide):has(> .gs-amount-input) {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-items: end;
}

.gs-grid > .journal-form-group:not(.gs-wide):has(> .gs-amount-input) > .journal-help-text {
    align-self: start;
}

.gs-group select,
.gs-group input[type="number"],
.gs-group input[type="text"] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 6px;
    background: var(--input-bg, #fff);
    color: var(--text-primary, #3a2b20);
    font: inherit;
}

.gs-group select:focus-visible,
.gs-group input:focus-visible {
    outline: 2px solid var(--border-focus, #8a5c43);
    outline-offset: 2px;
}

.gs-group .form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
}

.gs-group .form-check-input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--button-bg, #7a5c43);
}

.gs-group .form-check-label {
    font-weight: 500;
    color: var(--text-primary, #3a2b20);
}

.gs-group details summary {
    cursor: pointer;
}

.journal-help-text {
    font-size: 14px;
    color: var(--text-secondary, #7a5c43);
    font-style: italic;
    margin-top: 5px;
    line-height: 1.4;
}

/* Personal Settings selects use the same warm control styling as Global Settings. */
.settings-sidebar-body .journal-form-group select.form-control {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 6px;
    background: var(--input-bg, #fff);
    color: var(--text-primary, #3a2b20);
    font-family: var(--font-primary, 'EB Garamond', serif);
    font-size: 16px;
}

.settings-sidebar-body .journal-form-group select.form-control:focus-visible {
    outline: 2px solid var(--border-focus, #8a5c43);
    outline-offset: 2px;
}

/* Reserve one line so "Saving…" and "Saved." never move the next Settings group.
   Longer errors still wrap and grow; they are never clipped. */
[data-personal-model-status],
[data-context-settings-status] {
    min-height: 1.4em; /* fallback */
    min-height: 1lh;
}

[data-account-save-status] {
    min-height: 1.4em; /* fallback */
    min-height: 1lh;
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.4;
}

.journal-checkbox-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 30px;
}

.journal-checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    color: var(--text-primary, #3a2b20);
}

.journal-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    accent-color: var(--border-focus, #8a5c43);
    cursor: pointer;
}

.journal-checkbox-text {
    font-family: var(--font-primary, 'EB Garamond', serif);
    line-height: 1.5;
}

.journal-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px solid var(--border-primary, #c8b89a);
}

.journal-primary-actions {
    display: flex;
    gap: 15px;
}

.journal-danger-actions {
    display: flex;
}

/* Policy and support links at the bottom of Personal Settings */
.settings-legal-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 8px;
    margin: 20px 0 8px;
}

.settings-legal-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 8px;
    color: var(--text-primary, #3a2b20);
    font-size: 0.95rem;
    text-decoration: underline;
    text-decoration-color: rgba(138, 92, 67, 0.5);
}

.settings-legal-links a:hover {
    color: var(--button-hover-bg, #5a3a22);
    text-decoration-color: var(--button-hover-bg, #5a3a22);
}

.journal-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-family: var(--font-primary, 'EB Garamond', serif);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.journal-btn-primary {
    background-color: var(--button-bg, #7a5c43);
    color: var(--button-text, #fdf5e6);
    border: 2px solid var(--button-bg, #7a5c43);
}

.journal-btn-primary:hover {
    background-color: var(--button-hover-bg, #5a3a22);
    border-color: var(--button-hover-bg, #5a3a22);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.journal-btn-secondary {
    background-color: transparent;
    color: var(--text-primary, #3a2b20);
    border: 2px solid var(--border-primary, #c8b89a);
}

.journal-btn-secondary:hover {
    background-color: var(--border-primary, #c8b89a);
    color: var(--text-primary, #3a2b20);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.journal-btn-danger {
    background-color: #d73a49;
    color: #ffffff;
    border: 2px solid #d73a49;
}

.journal-btn-danger:hover {
    background-color: #b31d28;
    border-color: #b31d28;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.journal-error {
    color: #d73a49;
    font-size: 14px;
    margin-top: 5px;
    font-style: italic;
}

/* === MOBILE TOP BAR === */
.mobile-top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-color: var(--bg-input-area, #f0e9d9);
    border-bottom: 1px solid var(--border-primary, #c8b89a);
    z-index: 200;
    display: none; /* Hidden by default (desktop) */
    align-items: center;
    padding: 0 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: left 0.3s ease; /* Smooth animation when pushed */
    box-sizing: border-box; /* Include border in height calculation */
}

/* Mobile top bar gets pushed to the right when sidebar is open */
.sidebar.mobile-open ~ * .mobile-top-bar,
.mobile-top-bar.pushed {
    left: calc(100vw - 70px); /* Match sidebar width */
    z-index: 98; /* Lower than overlay (99) so it gets shaded */
}

.mobile-hamburger-btn {
    background: none;
    border: none;
    color: var(--text-primary, #3a2b20);
    font-size: 1.3em;
    cursor: pointer;
    padding: 8px;
    border-radius: 5px;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-hamburger-btn:hover {
    background-color: var(--border-primary, #c8b89a);
}

.mobile-hamburger-btn .toggle-icon {
    font-size: 1.1em;
}

/* === MOBILE OVERLAY === */
.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* === SIDEBAR BACKDROP (mobile pane dismiss) === */
.sidebar-backdrop {
    display: none;  /* Hidden on desktop */
}

@media (max-width: 768px) {
    .sidebar-backdrop {
        display: block;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        /* Ends where the fixed composer begins, as the panels do (composer-clearance.js), so the
           composer and its pause notice, with Show approval, are never dimmed or blocked. */
        bottom: var(--composer-clearance, 0px);
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 799;  /* Below sidebars (800), above chat */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .sidebar-backdrop.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Shared elevation for all right-side mobile panes above the peek-through area. */
    .app-sidebar {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    }
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 768px) {
    .sidebar {
        width: 250px;
        min-width: 250px;
    }
    
    .sidebar.collapsed {
        width: 40px;
        min-width: 40px;
    }
    
    .modal-content {
        width: 95%;
        margin: 10px;
    }
    
    .modal-header h2 {
        font-size: 1.3em;
    }

    .journal-form-actions {
        flex-direction: column;
        gap: 20px;
        align-items: stretch;
    }

    .journal-primary-actions {
        flex-direction: column;
        gap: 10px;
    }

    .journal-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    /* Hide mobile top bar - we use the regular top-bar on all screen sizes */
    .mobile-top-bar {
        display: none;
    }

    /* No extra padding needed - regular top-bar handles this */
    #app-container {
        padding-top: 0;
    }
    
    /* Hide external hamburger on mobile (replaced by mobile top bar) */
    .external-sidebar-toggle {
        display: none !important;
    }
    
    /* Show internal sidebar hamburger on mobile when sidebar is open */
    .sidebar-toggle {
        display: flex; /* Show by default, JavaScript will manage visibility */
    }
    
    /* Enhanced mobile sidebar behavior */
    .sidebar {
        position: fixed;
        top: 0; /* Full height from top since top bar is pushed right */
        left: 0;
        bottom: 0;
        width: calc(100vw - 70px); /* Leave 70px strip on right for hamburger */
        max-width: none; /* Remove max-width constraint on mobile */
        min-width: 250px; /* Reduce min-width for smaller screens */
        z-index: 150;
        transform: translateX(-100%); /* Start hidden to the left */
        transition: transform 0.3s ease;
        box-shadow: 2px 0 15px rgba(0,0,0,0.3);
    }
    
    /* Mobile sidebar header - match mobile top bar height for seamless alignment */
    .sidebar-header {
        height: 50px; /* Match mobile top bar height exactly */
        padding: 0 15px; /* Horizontal padding only */
        box-sizing: border-box;
    }
    
    .sidebar-header h3 {
        font-size: 1.1em; /* Slightly smaller to fit 50px height */
        line-height: 1;
    }
    
    /* Mobile sidebar open state */
    .sidebar.mobile-open {
        transform: translateX(0); /* Slide in from left */
    }
    
    /* Override collapsed state on mobile */
    .sidebar.collapsed {
        transform: translateX(-100%); /* Keep slide behavior */
        width: calc(100vw - 70px);
        max-width: none; /* Remove max-width constraint on mobile */
        min-width: 250px; /* Reduce min-width for smaller screens */
        opacity: 1; /* Don't fade out */
    }
    
    /* Ensure sidebar content is always visible on mobile */
    .sidebar.collapsed .sidebar-header h3,
.sidebar.collapsed .sidebar-content {
    opacity: 0;
    width: 0;
    overflow: hidden;
    padding: 0;
}

/* (removed mobile-only footer block; global styles are defined above) */
    
    /* Adjust chat container on mobile */
    #chat-container {
        padding-top: 0; /* Remove any top padding since we have the mobile bar */
    }
    
    /* Single-line chat input on mobile - keep same fonts and padding */
    #chat-message-input {
        height: 25px; /* Ultra-compact height for maximum space efficiency */
        max-height: 25px; /* Prevent expansion beyond single line */
        line-height: 1.2; /* Tighter line height for better single-line appearance */
    }
    
    /* Remove bottom margin from system messages for more compact mobile layout */
    .message.system {
        margin-bottom: 0;
    }
    
    /* Ensure modal appears above everything */
    .modal-overlay {
        z-index: 2000;
    }
    
    /* Mobile-specific modal adjustments */
    .modal-content {
        width: 95%;
        margin: 25px 10px; /* Account for mobile top bar */
        max-height: calc(100dvh - 100px); /* Use dynamic viewport height for mobile keyboard support */
    }


    #thinking-picker-popover {
        width: 220px;
    }
}

/* Tablet landscape adjustments */
@media (max-width: 768px) and (min-width: 481px) {
    /* Keep desktop-like behavior but reduce sidebar width */
    .mobile-top-bar {
        display: none; /* Don't show mobile bar on tablets */
    }
    
    #app-container {
        padding-top: 0; /* No mobile bar padding */
    }
}

/* === MARKDOWN STYLING WITHIN CHAT MESSAGES === */
/* Scope all markdown styles to .message .text to avoid affecting other elements */

/* Reset all default margins for markdown elements */
.message .text > * {
    margin-top: 0;
    margin-bottom: 0;
}

/* Headers */
.message .text h1,
.message .text h2,
.message .text h3,
.message .text h4,
.message .text h5,
.message .text h6 {
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    padding: 0;
}

.message .text h1 {
    font-family: var(--font-decorative, 'Funnel Sans', serif);
    color: var(--text-primary, #3a2b20);
    font-size: 1.6em;
    border-bottom: 2px solid var(--border-primary, #c8b89a);
    padding-bottom: 0.1em;
}

.message .text h2 {
    font-family: var(--font-decorative, 'Funnel Sans', serif);
    color: var(--text-primary, #3a2b20);
    font-size: 1.4em;
    border-bottom: 1px solid var(--border-primary, #c8b89a);
    padding-bottom: 0.05em;
}

.message .text h3 {
    font-family: var(--font-primary, 'EB Garamond', serif);
    color: var(--text-primary, #3a2b20);
    font-size: 1.2em;
}

.message .text h4 {
    font-family: var(--font-primary, 'EB Garamond', serif);
    color: var(--text-primary, #3a2b20);
    font-size: 1.1em;
}

.message .text h5 {
    font-family: var(--font-primary, 'EB Garamond', serif);
    color: var(--text-primary, #3a2b20);
    font-size: 1.05em;
}

.message .text h6 {
    font-family: var(--font-primary, 'EB Garamond', serif);
    color: var(--text-secondary, #5c4b3f);
    font-size: 1em;
}

/* Paragraphs */
.message .text p {
    margin: 0;
    padding: 0;
    line-height: 1.4;
}

/* FIX: Use flexbox to control spacing between all elements */
.message .text {
    display: flex;
    flex-direction: column;
    gap: 0.5em; /* Default spacing between all elements */
}

/* Clean flexbox gap handles all spacing now */

/* Lists */
.message .text ul,
.message .text ol {
    margin: 0;
    padding-left: 1.5em;
    line-height: 1.4;    /* Match paragraph line-height for consistency */
    display: block;      /* revert to normal block list to keep markers aligned */
    list-style-position: outside; /* default; with inline first <p> keeps content on same line */
}

.message .text ul {
    list-style-type: disc;
}

.message .text ol {
    list-style-type: decimal;
}

.message .text li {
    margin: 0;
    padding: 0;
    line-height: 1.4;    /* Match paragraph line-height for consistency */
}

/* spacing between list items without flex */
.message .text li + li {
    margin-top: 0.2em;
}

.message .text li::marker {
    color: var(--border-focus, #8a5c43);
}

/* Normalize whitespace inside lists to avoid blank lines from inherited pre-wrap */
.message .text ul,
.message .text ol,
.message .text li {
    white-space: normal;
}

/* Keep first paragraph inline with the list marker */
.message .text li > p {
    margin: 0 !important;
    display: inline !important; /* ensure UA block default doesn't push text below marker */
}

/* Spacing before nested lists that follow a paragraph */
.message .text li > p + ul,
.message .text li > p + ol {
    margin-top: 0.25em;
}

/* Nested lists */
.message .text ul ul,
.message .text ol ol,
.message .text ul ol,
.message .text ol ul {
    margin: 0.3em 0;
    padding-left: 1.2em;
}

/* Code blocks and inline code */
.message .text code {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
    font-size: 0.9em;
    background-color: rgba(138, 92, 67, 0.1);
    color: var(--text-primary, #3a2b20);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    border: 1px solid rgba(138, 92, 67, 0.2);
}

.message .text pre {
    background-color: rgba(138, 92, 67, 0.08);
    border: 1px solid rgba(138, 92, 67, 0.2);
    border-radius: 6px;
    padding: 1em;
    margin: 1em 0;
    overflow-x: auto;
    line-height: 1.4;
}

.message .text pre code {
    background-color: transparent;
    border: none;
    padding: 0;
    font-size: 0.85em;
    white-space: pre;
}

/* Blockquotes */
.message .text blockquote {
    margin: 1em 0;
    padding: 0.8em 1.2em;
    border-left: 4px solid var(--border-focus, #8a5c43);
    background-color: rgba(138, 92, 67, 0.05);
    font-style: italic;
    color: var(--text-secondary, #5c4b3f);
    border-radius: 0 4px 4px 0;
}

.message .text blockquote p {
    margin: 0.4em 0;
}

.message .text blockquote p:first-child {
    margin-top: 0;
}

.message .text blockquote p:last-child {
    margin-bottom: 0;
}

/* Links */
.message .text a {
    color: var(--border-focus, #8a5c43);
    text-decoration: underline;
    text-decoration-color: rgba(138, 92, 67, 0.5);
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.message .text a:hover {
    color: var(--button-hover-bg, #5a3a22);
    text-decoration-color: var(--button-hover-bg, #5a3a22);
}

.message .text a:visited {
    color: var(--text-secondary, #5c4b3f);
}

/* Emphasis */
.message .text strong,
.message .text b {
    font-weight: 700;
    color: var(--text-primary, #3a2b20);
}

.message .text em,
.message .text i {
    font-style: italic;
    color: var(--text-primary, #3a2b20);
}

/* Horizontal rules */
.message .text hr {
    border: none;
    border-top: 1px solid var(--border-primary, #c8b89a);
    margin: 0;
    opacity: 0.6;
}

/* Additional spacing controls between different element types */
.message .text p + h1,
.message .text p + h2,
.message .text p + h3,
.message .text p + h4,
.message .text p + h5,
.message .text p + h6 {
    margin-top: 0.05em;
}

.message .text hr + h1,
.message .text hr + h2,
.message .text hr + h3,
.message .text hr + h4,
.message .text hr + h5,
.message .text hr + h6 {
    margin-top: 0;
}

.message .text h1 + p,
.message .text h2 + p,
.message .text h3 + p,
.message .text h4 + p,
.message .text h5 + p,
.message .text h6 + p {
    margin-top: 0;
}

/* Tables */
/* Markdown tables are wrapped in a keyboard-focusable horizontal scroll region. */
.md-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    margin: 1em 0;
}

.md-table-scroll:focus-visible {
    outline: 2px solid var(--border-focus, #8a5c43);
    outline-offset: 2px;
}

.message .text table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
    font-size: 0.9em;
}

.message .text .md-table-scroll > table {
    margin: 0;
}

.message .text th,
.message .text td {
    border: 1px solid var(--border-primary, #c8b89a);
    padding: 0.5em 0.8em;
    text-align: left;
    /* Cells scroll sideways instead of breaking words mid-word. */
    word-break: normal;
    overflow-wrap: normal;
    min-width: 6em;
}

@media (max-width: 600px) {
    .message .text:has(.md-table-scroll) {
        max-width: 92%;
    }
}

.message .text th {
    background-color: rgba(138, 92, 67, 0.1);
    font-weight: 600;
    color: var(--text-primary, #3a2b20);
}

.message .text td {
    background-color: rgba(138, 92, 67, 0.03);
}

.message .text tr:nth-child(even) td {
    background-color: rgba(138, 92, 67, 0.06);
}

/* Live pages list scrollbars: always visible thumb, transparent track; no layout shift */
.live-pages-list::-webkit-scrollbar {
    width: 8px;
}
.live-pages-list::-webkit-scrollbar-thumb {
    background-color: rgba(90, 58, 34, 0.35); /* subtle thumb always visible */
    border-radius: 4px;
}
.live-pages-list::-webkit-scrollbar-track {
    background: transparent; /* transparent track so appearance doesn't distract */
}

/* Ensure proper spacing for mixed content */
.message .text > *:first-child {
    margin-top: 0 !important;
}

.message .text > *:last-child {
    margin-bottom: 0 !important;
}

/* Double-check last paragraph specifically */
.message .text p:last-child {
    margin-bottom: 0 !important;
}

/* Remove any padding-bottom that might exist on last elements */
.message .text > *:last-child {
    padding-bottom: 0 !important;
}

/* Responsive adjustments for markdown content */
@media (max-width: 768px) {
    .message .text h1 {
        font-size: 1.4em;
    }
    
    .message .text h2 {
        font-size: 1.2em;
    }
    
    .message .text pre {
        padding: 0.8em;
        font-size: 0.8em;
    }
    
    .message .text code {
        font-size: 0.8em;
    }
    
    .message .text blockquote {
        padding: 0.6em 1em;
        margin: 0.8em 0;
    }
}

/* === APPROVAL CARD STYLING === */
.approval-card {
    background-color: var(--bg-journal, #fdf5e6);
    border: 2px solid var(--border-primary, #c8b89a);
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    padding: 14px 16px;
    margin: 12px 0;
}

.approval-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.approval-title {
    margin: 0;
    font-family: var(--font-decorative, 'Funnel Sans', serif);
    color: var(--text-primary, #3a2b20);
    font-size: 1.1rem;
    font-weight: 600;
}

.approval-status {
    font-size: 0.85rem;
    padding: 4px 8px;
    border-radius: 12px;
    border: 1px solid var(--border-primary, #c8b89a);
    background-color: rgba(138, 92, 67, 0.08);
    color: var(--text-primary, #3a2b20);
    white-space: nowrap;
}

.approval-status.badge-pending { background-color: rgba(255, 170, 0, 0.12); border-color: rgba(255, 170, 0, 0.35); }
.approval-status.badge-completed { background-color: rgba(35, 134, 54, 0.12); border-color: rgba(35, 134, 54, 0.35); }
.approval-status.badge-rejected, .approval-status.badge-skipped, .approval-status.badge-not-applied { background-color: rgba(124, 124, 124, 0.12); border-color: rgba(124, 124, 124, 0.35); }
.approval-status.badge-failed { background-color: rgba(218, 54, 51, 0.12); border-color: rgba(218, 54, 51, 0.35); }

/* Flow invite card: compact, non-blocking invitation */
.flow-invite-card .approval-summary {
    font-weight: normal;
}

/* Live page status badges */
.live-page-status-badge {
    font-size: 0.75rem;
    padding: 3px 7px;
    border-radius: 10px;
    border: 1px solid var(--border-primary, #c8b89a);
    background-color: rgba(138, 92, 67, 0.08);
    color: var(--text-primary, #3a2b20);
    white-space: nowrap;
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
}

.live-page-status-badge.badge-rewrite-failed {
    background-color: rgba(218, 54, 51, 0.12);
    border-color: rgba(218, 54, 51, 0.35);
    color: rgba(218, 54, 51, 0.9);
}

.live-page-item.live-page-system {
    border-left: 3px solid var(--button-bg, #7a5c43);
}

.live-page-status-badge.badge-system {
    position: absolute;
    top: 6px;
    right: 6px;
    background-color: rgba(122, 92, 67, 0.10);
    border-color: rgba(122, 92, 67, 0.30);
    color: var(--button-bg, #7a5c43);
}

.journal-checkbox-label.system-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.system-page-note {
    font-size: 13px;
    color: var(--text-secondary, #7a5c43);
    font-style: italic;
    margin-top: 4px;
    padding-left: 28px;
}

.approval-summary {
    color: var(--text-primary, #3a2b20);
    margin-bottom: 8px;
    font-weight: 600;
}

.approval-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.approval-item .label {
    font-weight: 600;
    color: var(--text-primary, #3a2b20);
    margin-right: 6px;
}

.approval-item .value {
    color: var(--text-secondary, #5c4b3f);
}

.approval-item-with-markdown > .label {
    display: block;
    margin: 0 0 4px;
}

.approval-item-markdown {
    padding: 8px 10px;
    border-left: 3px solid var(--border-primary, #c8b89a);
    background-color: rgba(122, 92, 67, 0.05);
    overflow-wrap: anywhere;
}

.approval-item-markdown > :first-child {
    margin-top: 0;
}

.approval-item-markdown > :last-child {
    margin-bottom: 0;
}

.approval-item-markdown h1,
.approval-item-markdown h2,
.approval-item-markdown h3 {
    color: var(--text-primary, #3a2b20);
    font-family: var(--font-decorative, 'Funnel Sans', serif);
    margin: 0.7em 0 0.35em;
}

.approval-item-markdown h1 { font-size: 1.15rem; }
.approval-item-markdown h2 { font-size: 1.05rem; }
.approval-item-markdown h3 { font-size: 1rem; }

.approval-item-markdown p,
.approval-item-markdown ul,
.approval-item-markdown ol {
    margin: 0.45em 0;
}

.approval-item-markdown a {
    color: var(--button-bg, #7a5c43);
    text-decoration: underline;
}

/* Long card text: clamped with a fade until "Show all" expands it. */
.approval-collapsible-body[data-collapsed="true"] {
    max-height: 12em;
    overflow: hidden;
}

.approval-collapsible-body.approval-collapsible-clipped {
    -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent);
    mask-image: linear-gradient(to bottom, #000 75%, transparent);
}

.approval-collapsible-toggle {
    margin-top: 6px;
    align-self: flex-start;
}

.approval-collapsible-toggle[hidden] {
    display: none;
}

.approval-collapsible-toggle:focus-visible {
    outline: 2px solid var(--button-bg, #7a5c43);
    outline-offset: 2px;
}

@media (pointer: coarse), (max-width: 768px) {
    .approval-collapsible-toggle {
        min-height: 44px;
    }
}

.live-page-update-sections {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.live-page-update-section {
    padding: 10px;
    border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 8px;
    background-color: rgba(122, 92, 67, 0.04);
}

.live-page-update-heading {
    color: var(--text-primary, #3a2b20);
    font-weight: 700;
    margin-bottom: 7px;
}

.live-page-update-row {
    display: grid;
    grid-template-columns: minmax(120px, 0.35fr) minmax(0, 1fr);
    gap: 8px;
    padding: 3px 0;
}

.live-page-update-row .label {
    color: var(--text-primary, #3a2b20);
    font-weight: 600;
}

.live-page-update-row .value {
    color: var(--text-secondary, #5c4b3f);
    overflow-wrap: anywhere;
}

.live-page-update-row.proposed-value .value {
    color: var(--text-primary, #3a2b20);
    font-weight: 600;
}

@media (max-width: 520px) {
    .live-page-update-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* The complete current and proposed body sits inside its page section. */
.live-page-update-section > .live-page-comparison {
    margin-top: 8px;
    border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-primary, #fffdf8);
}

.live-page-update-section > .live-page-comparison > .live-page-comparison-field {
    border-top: 0;
}

.live-page-update-section > .live-page-comparison > .live-page-comparison-field > summary {
    padding: 8px 12px;
}

.live-page-update-section > .live-page-update-body-unavailable {
    margin: 6px 0 0;
}

.approval-actions {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}

.approval-actions .approval-yes,
.approval-actions .approval-no {
    padding: 8px 14px;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    font-family: var(--font-primary, 'EB Garamond', serif);
    font-size: 16px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.approval-actions .approval-yes {
    background-color: var(--button-bg, #7a5c43);
    color: var(--button-text, #fdf5e6);
    border-color: var(--button-bg, #7a5c43);
}

.approval-actions .approval-yes:hover {
    background-color: var(--button-hover-bg, #5a3a22);
    border-color: var(--button-hover-bg, #5a3a22);
    transform: translateY(-1px);
}

.approval-actions .approval-no {
    background-color: transparent;
    color: var(--text-primary, #3a2b20);
    border-color: var(--border-primary, #c8b89a);
}

.approval-actions .approval-no:hover {
    background-color: var(--border-primary, #c8b89a);
    color: var(--text-primary, #3a2b20);
    transform: translateY(-1px);
}

/* Disabled chat input visual */
#chat-message-submit.disabled,
#chat-message-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Result block appended after resolution */
.approval-result {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-primary, #c8b89a);
    color: var(--text-secondary, #5c4b3f);
    font-style: italic;
    font-size: 0.9rem;
}

.approval-result-summary {
    display: inline-block;
}

/* A withdrawn suggestion's withdrawal note, and a flow stage an Advance skipped, sit on their own line
   under the outcome line. */
.approval-result-withdrawn,
.approval-result-skipped {
    display: block;
    margin-top: 4px;
}

/* === ENHANCED APPROVAL CARD - GROUPED ACTIONS === */

/* Group sections with color coding */
.approval-group {
    margin-bottom: 14px;
    padding: 10px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.approval-group.group-complete { background: rgba(35, 134, 54, 0.08); }
.approval-group.group-create { background: rgba(59, 130, 246, 0.08); }
.approval-group.group-delete { background: rgba(239, 68, 68, 0.08); }
.approval-group.group-update { background: rgba(138, 92, 67, 0.06); }
.approval-group.group-uncomplete { background: rgba(138, 92, 67, 0.06); }

/* Group header with icon + count */
.approval-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary, #3a2b20);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.approval-group-header .group-icon { font-size: 1rem; }
.approval-group-header .group-count { opacity: 0.7; font-weight: 400; }

/* Container for action rows within a group */
.approval-group-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Per-action row - modern minimal design */
.approval-action-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
    background: transparent;
    border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.approval-action-row:hover {
    background: rgba(138, 92, 67, 0.04);
    border-color: var(--button-bg, #7a5c43);
}

/* Smooth unchecked transition */
.approval-action-row.unchecked {
    opacity: 0.5;
    border-style: dashed;
    border-color: var(--border-primary, #c8b89a);
}

.approval-action-row.unchecked:hover {
    background: rgba(138, 92, 67, 0.02);
    border-color: var(--border-primary, #c8b89a);
}

.approval-action-row.unchecked .action-text {
    text-decoration: line-through;
    color: var(--text-secondary, #5c4b3f);
}

/* Action text - now first in visual order */
.approval-action-row .action-text {
    flex: 1;
    min-width: 120px;
    color: var(--text-primary, #3a2b20);
    font-size: 0.95rem;
    transition: color 0.2s ease, text-decoration 0.2s ease;
    order: 1;
}

/* Custom checkbox toggle - moved to right side */
.approval-action-row .action-checkbox {
    /* Hide native checkbox */
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.approval-action-row .action-toggle {
    order: 3;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-primary, #c8b89a);
    border-radius: 4px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
    margin-left: auto;
}

/* Checkmark using CSS */
.approval-action-row .action-toggle::after {
    content: '';
    width: 6px;
    height: 10px;
    border: solid var(--button-bg, #7a5c43);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg) scale(0);
    opacity: 0;
    transition: all 0.15s ease;
    margin-top: -2px;
}

.approval-action-row:not(.unchecked) .action-toggle {
    border-color: var(--button-bg, #7a5c43);
    background: rgba(122, 92, 67, 0.08);
}

.approval-action-row:not(.unchecked) .action-toggle::after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

.approval-action-row:hover .action-toggle {
    border-color: var(--button-bg, #7a5c43);
}

/* Finalized approval card - disable interactions */
.approval-card.finalized .approval-action-row {
    cursor: default;
    pointer-events: none;
    opacity: 0.7;
}

.approval-card.finalized .approval-action-row:hover {
    background: transparent;
    border-color: var(--border-primary, #c8b89a);
}

.approval-card.finalized .approval-action-row .action-toggle {
    opacity: 0.5;
    border-color: var(--border-primary, #c8b89a);
}

.approval-card.finalized .category-pill,
.approval-card.finalized .category-dropdown {
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
}

/* Category pills for Create actions */
.category-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    order: 2;
}

.category-pill {
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid var(--border-primary, #c8b89a);
    background: transparent;
    font-family: var(--font-primary, 'EB Garamond', serif);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--text-primary, #3a2b20);
}

.category-pill:hover {
    background: rgba(138, 92, 67, 0.1);
}

.category-pill.selected {
    background: var(--button-bg, #7a5c43);
    color: var(--button-text, #fdf5e6);
    border-color: var(--button-bg, #7a5c43);
}

/* Category dropdown (fallback for many categories) */
.category-dropdown {
    order: 2;
    padding: 5px 10px;
    border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 6px;
    background: var(--bg-journal, #fdf5e6);
    font-family: var(--font-primary, 'EB Garamond', serif);
    font-size: 0.85rem;
    color: var(--text-primary, #3a2b20);
    cursor: pointer;
    min-width: 100px;
    transition: border-color 0.15s ease;
}

.category-dropdown:hover,
.category-dropdown:focus {
    border-color: var(--button-bg, #7a5c43);
    outline: none;
}

/* Disabled category controls when row is unchecked */
.approval-action-row.unchecked .category-pill,
.approval-action-row.unchecked .category-dropdown {
    opacity: 0.5;
    pointer-events: none;
}

/* Summary bar with selection counter + execution preview */
.approval-summary-bar {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    margin: 8px 0;
    border-top: 1px solid var(--border-primary, #c8b89a);
    font-size: 0.85rem;
    color: var(--text-secondary, #5c4b3f);
}


.approval-summary-bar .selection-counter {
    font-weight: 500;
}

.approval-summary-bar .execution-preview {
    font-style: italic;
}

/* Enhanced button styling for grouped approval cards */
.approval-actions .approval-confirm,
.approval-actions .approval-accept-all,
.approval-actions .approval-reject-all {
    padding: 8px 16px;
    border-radius: 6px;
    font-family: var(--font-primary, 'EB Garamond', serif);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

/* Primary action - Confirm */
.approval-actions .approval-confirm {
    background: var(--button-bg, #7a5c43);
    color: var(--button-text, #fdf5e6);
    border-color: var(--button-bg, #7a5c43);
}

.approval-actions .approval-confirm:hover {
    background: var(--button-hover-bg, #5a3a22);
    border-color: var(--button-hover-bg, #5a3a22);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Secondary actions - Accept All, Reject All */
.approval-actions .approval-accept-all,
.approval-actions .approval-reject-all {
    background: transparent;
    color: var(--text-primary, #3a2b20);
    border-color: var(--border-primary, #c8b89a);
}

.approval-actions .approval-accept-all:hover,
.approval-actions .approval-reject-all:hover {
    background: rgba(138, 92, 67, 0.08);
    border-color: var(--button-bg, #7a5c43);
}

/* Disabled state for buttons */
.approval-actions .approval-confirm:disabled,
.approval-actions .approval-accept-all:disabled,
.approval-actions .approval-reject-all:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none !important;
}

/* Flat content container (for 1-3 actions) */
.approval-flat-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

/* ==================== A/B Comparison Card ==================== */

.ab-comparison-card {
    background: var(--card-bg, #faf8f4);
    border: 1px solid var(--border-color, #d4c5b0);
    border-radius: 8px;
    margin: 12px 0;
    overflow: hidden;
}

.ab-comparison-header {
    padding: 10px 16px;
    background: rgba(90, 103, 216, 0.08);
    border-bottom: 1px solid var(--border-color, #d4c5b0);
    text-align: center;
}

.ab-comparison-title {
    font-weight: 600;
    font-size: 0.9em;
    color: #5a67d8;
}

.ab-selection-status {
    font-weight: 600;
    font-size: 0.9em;
    color: #48bb78;
}

.ab-responses-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.ab-response {
    padding: 16px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    display: flex;
    flex-direction: column;
}

.ab-response:first-child {
    border-right: 1px solid var(--border-color, #d4c5b0);
}

.ab-response:hover {
    background: rgba(90, 103, 216, 0.04);
}

.ab-response-label {
    font-weight: 600;
    font-size: 0.8em;
    color: #5a67d8;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ab-response-text {
    font-size: 0.95em;
    line-height: 1.5;
    color: var(--text-primary, #3a2b20);
    flex: 1;
    margin-bottom: 12px;
}

.ab-response-text p {
    margin: 0 0 8px 0;
}

.ab-response-text p:last-child {
    margin-bottom: 0;
}

.ab-select-btn {
    align-self: center;
    padding: 6px 20px;
    border: 1px solid #5a67d8;
    border-radius: 4px;
    background: transparent;
    color: #5a67d8;
    font-weight: 500;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ab-select-btn:hover {
    background: #5a67d8;
    color: white;
}

.ab-select-btn:disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.ab-selected {
    background: rgba(72, 187, 120, 0.08) !important;
    border-color: #48bb78;
}

.ab-selected .ab-select-btn {
    background: #48bb78;
    border-color: #48bb78;
    color: white;
}

.ab-not-selected {
    opacity: 0.4;
}

.ab-finalized {
    opacity: 0.7;
}

/* Mobile: stack responses vertically */
@media (max-width: 768px) {
    .ab-responses-container {
        grid-template-columns: 1fr;
    }

    .ab-response:first-child {
        border-right: none;
        border-bottom: 1px solid var(--border-color, #d4c5b0);
    }
}

/* === RIGHT SIDEBAR SHELL === */
.app-sidebar {
    position: fixed;
    top: 60px; /* Start below top bar */
    right: 0;
    width: 420px;
    height: calc(100vh - 60px);
    background-color: var(--bg-journal, #fdf5e6);
    border-left: 1px solid var(--border-primary, #c8b89a);
    box-shadow: -4px 0 12px rgba(0,0,0,0.1);
    z-index: 800; /* Below top bar (900) so top bar's shadow casts on sidebar */
    display: none; /* Hidden by default */
    flex-direction: column;
    overflow: hidden;
}

.app-sidebar.show {
    display: flex; /* Show when active */
}

.prompt-sidebar {
    width: min(840px, 100vw);
}

#main-content-area.todos-sidebar-open,
#main-content-area.flows-sidebar-open,
#main-content-area.scheduled-sidebar-open,
#main-content-area.settings-sidebar-open,
#main-content-area.global-settings-sidebar-open,
#main-content-area.prompt-sidebar-open,
#main-content-area.live-pages-right-sidebar-open {
    margin-right: 420px;
}

#main-content-area.prompt-sidebar-open {
    margin-right: min(840px, 100vw);
}

.app-sidebar-header {
    background-color: var(--bg-input-area, #f0e9d9);
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-primary, #c8b89a);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    height: 70px;
    box-sizing: border-box;
}

.app-sidebar-title {
    margin: 0;
    font-family: var(--font-primary, 'EB Garamond', serif);
    color: var(--text-primary, #3a2b20);
    font-size: 1.5rem;
    font-weight: 600;
}

.app-sidebar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.app-sidebar-actions .close-btn {
    flex-shrink: 0;
}

.app-sidebar-body {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
}

.app-sidebar-footer {
    padding: 1rem 1.5rem;
    background-color: var(--bg-input-area, #f0e9d9);
    border-top: 1px solid var(--border-primary, #c8b89a);
    display: flex;
    justify-content: center;
}

/* === TODOS SIDEBAR === */
.todos-sidebar-actions {
    gap: 0.75rem;
}

.todos-show-completed {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-primary, 'EB Garamond', serif);
    color: var(--text-primary, #3a2b20);
    cursor: pointer;
    font-size: 0.9rem;
}

.todos-show-completed input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--border-focus, #8a5c43);
    cursor: pointer;
}

/* Webkit scrollbar styling for todos sidebar */
.todos-sidebar-body::-webkit-scrollbar {
    width: 8px;
}

.todos-sidebar-body::-webkit-scrollbar-track {
    background: var(--bg-journal, #fdf5e6); /* Match sidebar background */
}

.todos-sidebar-body::-webkit-scrollbar-thumb {
    background-color: #d0d0d0; /* Light gray */
    border-radius: 4px;
    border: 1px solid var(--bg-journal, #fdf5e6); /* Border matches background */
}

.todos-sidebar-body::-webkit-scrollbar-thumb:hover {
    background-color: #b8b8b8; /* Slightly darker on hover */
}

.todos-sidebar-body::-webkit-scrollbar-track:hover {
    background: var(--bg-journal, #fdf5e6); /* Keep same background on hover */
}

.todos-sections {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.todos-section {
    /* Transparent by default - background only shown during drag-over */
    transition: all 0.2s ease;
    flex-shrink: 0; /* Prevent sections from being compressed */
}

.todos-section.collapsed .todos-section-content {
    display: none;
}

.todos-section-title {
    margin: 0;
    font-family: var(--font-primary, 'EB Garamond', serif);
    color: var(--text-primary, #3a2b20);
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 90px 12px 8px; /* Reduced left padding since toggle button is now explicit */
    background-color: var(--bg-input-area, #f0e9d9);
    border-bottom: 1px solid var(--border-primary, #c8b89a);
    cursor: default; /* No longer clickable for collapse */
    display: flex;
    align-items: center;
    gap: 8px;
    transition: none; /* Remove hover transition */
    position: relative;
}

.todos-section-title-text {
    flex: 1;
    outline: none;
    padding: 2px 4px;
    border-radius: 3px;
    transition: background-color 0.15s ease;
    cursor: text;
}

.todos-section-title-text:focus {
    background-color: rgba(138, 92, 67, 0.08);
}

/* Toggle button on the left */
.todos-section-toggle-btn {
    background: none;
    border: none;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--text-secondary, #5c4b3f);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
    border-radius: 4px;
    flex-shrink: 0;
}

.todos-section-toggle-btn:hover {
    background-color: rgba(139, 114, 86, 0.15);
}

.todos-section.collapsed .todos-section-toggle-btn {
    transform: rotate(-90deg);
}

/* Drag handle for reordering categories */
.todos-section-drag-handle {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: grab;
    color: var(--text-secondary, #5c4b3f);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    border-radius: 4px;
    flex-shrink: 0;
}

.todos-section-drag-handle:hover {
    background-color: rgba(139, 114, 86, 0.15);
}

.todos-section-drag-handle:active {
    cursor: grabbing;
}

/* Category drag states */
.category-ghost {
    opacity: 0.4;
}

.category-chosen {
    opacity: 0.8;
    background-color: rgba(138, 92, 67, 0.05);
}

.category-drag {
    opacity: 0.9;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Add button (to the left of delete button) */
.todos-section-add-btn {
    position: absolute;
    right: 50px; /* To the left of delete button */
    top: 50%;
    transform: translateY(-50%);
    background: none; /* No background by default */
    border: none;
    font-size: 1.8em;
    cursor: pointer;
    color: var(--text-primary, #3a2b20);
    padding: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    z-index: 10;
    border-radius: 50%; /* Circular */
}

.todos-section-add-btn:hover {
    background-color: var(--border-primary, #c8b89a); /* Show circular background on hover */
}

.todos-section-add-btn:active {
    background-color: rgba(139, 114, 86, 0.3); /* Darker on click */
}

/* Delete button on the right */
.todos-section-delete-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none; /* No background by default */
    border: none;
    font-size: 1.8em; /* Bigger X to match bar height */
    cursor: pointer;
    color: var(--text-primary, #3a2b20);
    padding: 0;
    width: 36px; /* Bigger button */
    height: 36px; /* Bigger button */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    z-index: 10;
    border-radius: 50%; /* Circular */
}

.todos-section-delete-btn:hover {
    background-color: var(--border-primary, #c8b89a); /* Show circular background on hover */
}

.todos-section-delete-btn:active {
    background-color: rgba(139, 114, 86, 0.3); /* Darker on click */
}

.todos-section-delete-btn.disabled,
.todos-section-delete-btn:disabled {
    color: #c8b89a; /* Grayed out */
    cursor: not-allowed;
    opacity: 0.5;
    /* Don't use pointer-events: none - let JavaScript handle it */
}

.todos-section-delete-btn.disabled:hover,
.todos-section-delete-btn:disabled:hover {
    background-color: transparent; /* No hover effect */
}

.todos-section-content {
    padding: 0 8px 10px 8px; /* Extra bottom padding to accommodate scale effect */
    display: flex;
    flex-direction: column;
    gap: 2px; /* Tighter spacing for list appearance */
    max-height: 320px; /* Fits ~10 items before scrolling */
    overflow-y: auto; /* Only show scrollbar when content overflows */
    flex-shrink: 0; /* Prevent content from being compressed */
    /* Essential for SortableJS animations */
    transition: background-color 0.2s ease, padding 0.2s ease;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS/macOS */
    /* Firefox scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: #d0d0d0 var(--bg-journal, #fdf5e6);
}

/* Webkit scrollbar styling for category content boxes */
.todos-section-content::-webkit-scrollbar {
    width: 6px; /* Slightly thinner for smaller containers */
    -webkit-appearance: none; /* Override macOS default appearance */
}

.todos-section-content::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
    -webkit-appearance: none;
}

.todos-section-content::-webkit-scrollbar-thumb {
    background-color: #d0d0d0; /* Light gray */
    border-radius: 3px;
    -webkit-appearance: none;
}

.todos-section-content::-webkit-scrollbar-thumb:hover {
    background-color: #b8b8b8; /* Slightly darker on hover */
}

.todos-section-content:empty::after {
    content: "No to-dos in this category";
    color: var(--text-secondary, #7a5c43);
    font-style: italic;
    text-align: center;
    padding: 8px 15px; /* Adjusted vertical padding to match todo card height */
    font-size: 0.9rem;
}

.todo-card-sidebar {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 3px 60px 3px 3px; /* Right padding for buttons */
    cursor: text; /* Indicates editable text */
    transition: background-color 0.15s ease;
    font-size: 0.9rem;
    position: relative; /* For positioning the delete button */
}

@media (hover: hover) {
    .todo-card-sidebar:hover {
        background-color: rgba(139, 114, 86, 0.05); /* Very subtle highlight */
    }
}

.todo-card-sidebar {
    touch-action: manipulation; /* Prevent double-tap zoom on iOS */
}

.todo-card-delete-btn {
    position: absolute;
    top: 50%;
    right: 35px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #d32f2f;
    color: white;
    border: none;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: none; /* Hidden by default, shown on hover/touch */
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

@media (hover: hover) {
    .todo-card-delete-btn:hover {
        background-color: #b71c1c;
        transform: translateY(-50%) scale(1.1);
    }
}

@media (hover: hover) {
    .todo-card-sidebar:hover .todo-card-delete-btn {
        display: flex;
    }
}

.todo-card-complete-btn {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #28a745;
    color: white;
    border: none;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    display: none; /* Hidden by default, shown on hover/touch */
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

@media (hover: hover) {
    .todo-card-complete-btn:hover {
        background-color: #218838;
        transform: translateY(-50%) scale(1.1);
    }
}

.todo-card-complete-btn.completed {
    background-color: #1e7e34;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

@media (hover: hover) {
    .todo-card-complete-btn.completed:hover {
        background-color: #155724;
    }
}

@media (hover: hover) {
    .todo-card-sidebar:hover .todo-card-complete-btn {
        display: flex;
    }
}

/* Show todo buttons on touch devices (no hover capability) */
@media (hover: none) {
    .todo-card-sidebar .todo-card-complete-btn,
    .todo-card-sidebar .todo-card-delete-btn {
        display: flex; /* Always show on touch devices */
    }
}

/* Also show buttons on small screens (mobile-sized viewports) */
@media (max-width: 480px) {
    .todo-card-sidebar .todo-card-complete-btn,
    .todo-card-sidebar .todo-card-delete-btn {
        display: flex; /* Always show on small screens */
    }
}

.todo-card-sidebar.completed {
    opacity: 0.6;
    background-color: rgba(139, 114, 86, 0.1);
}

.todo-card-sidebar.completed .todo-card-title {
    text-decoration: line-through;
}

.todo-card-header {
    display: flex;
    align-items: flex-start;
    gap: 4px; /* Tighter gap for list appearance */
    margin-bottom: 0; /* No bottom margin for compact list */
}

.todo-card-status {
    font-size: 12px; /* Smaller bullet */
    color: var(--border-focus, #8a5c43);
    font-weight: normal; /* Less bold for subtlety */
    flex-shrink: 0;
    line-height: 1;
    margin-top: 6px; /* Align with text baseline */
    cursor: grab; /* Visual drag affordance */
}

.todo-card-title {
    flex: 1;
    align-self: flex-start; /* Don't stretch vertically - only wrap text */
    font-weight: 400; /* Normal weight for list item */
    color: var(--text-primary, #3a2b20);
    line-height: 1.4; /* Slightly taller for readability */
    font-size: 0.9rem;
    outline: none; /* Remove focus outline (we'll add custom styling) */
    word-wrap: break-word; /* Wrap long titles */
    padding: 2px 4px; /* Subtle padding for when editing */
    border-radius: 3px;
    transition: background-color 0.15s ease;
}

.todo-card-title[contenteditable="true"]:focus,
.todo-card-title:focus-within {
    background-color: rgba(138, 92, 67, 0.08);
    cursor: text;
}

/* Responsive design for right-side sidebars */
@media (max-width: 768px) {
    .app-sidebar {
        width: 100%;
        right: -100%;
        top: 60px;
        /* Every panel ends where the fixed composer begins, including when a pending
           approval makes it taller (measured by composer-clearance.js). */
        bottom: var(--composer-clearance, 80px);
        height: auto;
    }

    .app-sidebar.show {
        right: 0;
    }

    #main-content-area.todos-sidebar-open,
    #main-content-area.flows-sidebar-open,
    #main-content-area.scheduled-sidebar-open,
    #main-content-area.settings-sidebar-open,
    #main-content-area.global-settings-sidebar-open,
    #main-content-area.prompt-sidebar-open,
    #main-content-area.live-pages-right-sidebar-open {
        margin-right: 0;
    }

    .todos-sidebar-header {
        /* Keep todos aligned with the shared sidebar shell. */
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        /* Keep row layout on mobile - don't switch to column */
        gap: 0.5rem;
    }

    .todos-sidebar-title {
        flex-shrink: 0; /* Don't let title shrink */
    }

    .todos-sidebar-actions {
        gap: 0.5rem; /* Reduce gap on smaller screens */
        flex-shrink: 1; /* Allow actions to shrink if needed */
        min-width: 0; /* Allow flex shrinking */
    }

    .todos-show-completed {
        flex-shrink: 1; /* Allow label to shrink if needed */
        min-width: 0; /* Allow flex item to shrink below content size */
    }

    .todos-sidebar-body {
        padding: 12px;
        padding-bottom: 0;
    }

    .todos-sidebar-footer {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 480px) {
    .todos-sidebar-body {
        padding: 10px;
        padding-bottom: 0; /* Remove extra padding - dvh handles it */
    }

    .todos-sidebar-footer {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); /* Just safe area for iOS */
    }

    .todos-section-title {
        font-size: 0.9rem;
        padding: 10px 12px;
    }

    .todos-sidebar-header {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .todos-sidebar-actions {
        gap: 0.4rem; /* Further reduce gap on very small screens */
    }

    .todos-section-content {
        padding: 10px;
    }
}

/* === DRAG-AND-DROP STYLING === */
.todo-card-ghost {
    opacity: 0.4;
    background-color: var(--border-primary, #c8b89a) !important;
    outline: 2px dashed var(--border-focus, #8a5c43) !important;
    outline-offset: -2px; /* Draw outline inside the element */
    transform: rotate(2deg);
}

.todo-card-chosen {
    cursor: grabbing !important;
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    z-index: 999;
    border-color: var(--border-focus, #8a5c43) !important;
}

.todo-card-drag {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
    opacity: 0.9;
    cursor: grabbing !important;
}

/* Add visual feedback for drop zones */
.todos-section-content:not(:empty) {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.todos-section-content.sortable-drag-over {
    background-color: rgba(138, 92, 67, 0.15); /* Subtle highlight for drop zone */
}

/* Prevent text selection during drag */
.todo-card-sidebar.todo-card-chosen * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Enhanced smooth transitions for all drag interactions */
.todo-card-sidebar {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.2s ease, 
                border-color 0.2s ease,
                margin 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease;
}

/* Cursor feedback for draggable areas */
.todo-card-sidebar {
    cursor: grab;
}

.todo-card-sidebar:active {
    cursor: grabbing;
}

/* Allow the card background to be draggable */
.todo-card-sidebar {
    pointer-events: auto;
}

/* Re-enable pointer events for delete and complete buttons */
.todo-card-delete-btn,
.todo-card-complete-btn {
    pointer-events: auto;
}

/* Allow clicks on title for editing */
.todo-card-title {
    pointer-events: auto;
}

/* === SLIDE-OUT ANIMATIONS FOR DRAG-AND-DROP === */

/* Animation keyframes for smooth slide movements */
@keyframes slideDown {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(calc(100% + 8px)); /* Card height + gap */
    }
}

@keyframes slideUp {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(calc(-100% - 8px)); /* Card height + gap */
    }
}

@keyframes slideDownSmooth {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(var(--slide-distance, 60px));
        opacity: 0.7;
    }
}

@keyframes slideUpSmooth {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(var(--slide-distance, -60px));
        opacity: 0.7;
    }
}

/* Classes applied during drag operations for smooth repositioning */
.todo-card-slide-down {
    animation: slideDownSmooth 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    z-index: 1; /* Keep below dragging card */
}

.todo-card-slide-up {
    animation: slideUpSmooth 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    z-index: 1; /* Keep below dragging card */
}

/* Create space for incoming card with smooth margin adjustments */
.todo-card-make-space-above {
    margin-top: 50px; /* Create space above this card */
    transition: margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.todo-card-make-space-below {
    margin-bottom: 50px; /* Create space below this card */
    transition: margin-bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth position transitions when drag hover enters/leaves */
.todo-card-sidebar.drag-hover-active {
    transform: translateY(10px) scale(0.98);
    opacity: 0.8;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Drop zone preparation - subtle background pulse */
.todos-section-content.drag-target-active {
    background-color: rgba(138, 92, 67, 0.08);
    border: 2px solid rgba(138, 92, 67, 0.3);
    border-radius: 8px;
    padding: 12px;
    transition: background-color 0.2s ease, border 0.2s ease, padding 0.2s ease;
}

/* Insertion point indicator */
.drag-insertion-indicator {
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--border-focus, #8a5c43) 20%, 
        var(--border-focus, #8a5c43) 80%, 
        transparent 100%);
    margin: 4px 0;
    border-radius: 2px;
    opacity: 0.8;
    animation: pulse 1.5s ease-in-out infinite;
    position: relative;
}

.drag-insertion-indicator::before {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    top: -2px;
    bottom: -2px;
    background: var(--border-focus, #8a5c43);
    border-radius: 2px;
    opacity: 0.3;
    animation: glow 1.5s ease-in-out infinite alternate;
}

@keyframes pulse {
    0%, 100% { 
        opacity: 0.6; 
        transform: scaleY(1);
    }
    50% { 
        opacity: 1; 
        transform: scaleY(1.2);
    }
}

@keyframes glow {
    from { 
        box-shadow: 0 0 5px rgba(138, 92, 67, 0.3); 
    }
    to { 
        box-shadow: 0 0 15px rgba(138, 92, 67, 0.6); 
    }
}

/* Smooth reset animations when drag ends */
.todo-card-sidebar.drag-reset {
    animation: resetPosition 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes resetPosition {
    from {
        transform: var(--current-transform, translateY(0));
        opacity: var(--current-opacity, 1);
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* ================================================================ */
/* Flows Sidebar Styles */
/* ================================================================ */

.flows-section {
    margin-bottom: 2rem;
}

.flows-section-title {
    font-family: var(--font-title);
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-primary);
}

/* Active Flow Card */
.flow-card.active {
    background-color: var(--bg-secondary);
    border: 2px solid var(--accent-gold);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* Active flow card container */
#active-flow-card {
    background-color: rgba(255, 252, 248, 0.6);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 1rem;
}

.flow-card-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.5rem;
    position: relative;
}

.flow-card-header h4 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.1rem;
    text-align: center;
}

.flow-abandon-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0.25rem 0.5rem;
    transition: color 0.2s;
}

.flow-abandon-btn:hover {
    color: var(--error-color, #e74c3c);
}

.flow-progress {
    width: 100%;
    height: 8px;
    background-color: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.flow-progress-bar {
    height: 100%;
    background-color: var(--accent-gold);
    transition: width 0.3s ease;
}

.flow-stage-help {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
    margin: 0;
    padding: 0.75rem;
    background-color: rgba(200, 184, 154, 0.2);
    border-left: 3px solid var(--accent-gold, #c9a227);
    border-radius: 0 4px 4px 0;
    line-height: 1.4;
}

/* Skip to Next Step Button */
/* Flow Action Buttons - matches journal-btn pattern */
.flow-skip-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 10px 16px;
    margin-top: 1rem;
    background-color: transparent;
    color: var(--text-primary, #3a2b20);
    border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: var(--font-primary, 'EB Garamond', serif);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flow-skip-btn:hover {
    background-color: rgba(200, 184, 154, 0.3);
    transform: translateY(-1px);
}

.flow-skip-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.flow-skip-btn i {
    font-size: 0.9rem;
}

/* Complete Flow Button - primary style (warm brown) */
.flow-skip-btn.flow-skip-btn-complete {
    background-color: var(--button-bg, #7a5c43);
    color: var(--button-text, #fdf5e6);
    border-color: var(--button-bg, #7a5c43);
}

.flow-skip-btn.flow-skip-btn-complete:hover {
    background-color: var(--button-hover-bg, #5a3a22);
    border-color: var(--button-hover-bg, #5a3a22);
}

.flow-skip-btn.flow-skip-btn-complete:disabled {
    background-color: #a89580;
    border-color: #a89580;
}

/* Side-by-side action buttons container (Next Step + Complete) */
.flow-action-buttons {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    margin-top: 1rem;
}

.flow-action-buttons .flow-skip-btn {
    flex: 1;
    min-width: 0;
    margin-top: 0;
}

/* Spinning animation for loading state */
.flow-skip-btn .spinning {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== Flow Subway Map ===== */

.flow-subway-map {
    margin: 0.5rem 0 0.25rem 0;
    padding: 0.5rem 0 0.25rem 0;
}

.subway-track {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0.25rem 0 0.25rem 0;
}

/* Continuous track line - positioned at center of node column */
.subway-track::before {
    content: '';
    position: absolute;
    left: 13px;  /* Center of 28px node wrapper (28/2 - 1px line width) */
    top: 0.85rem;   /* Start at first node center */
    bottom: 0.85rem; /* End at last node center */
    width: 2px;
    background-color: var(--border-primary, #c8b89a);
    z-index: 0;
}

/* Individual station container */
.subway-station {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    gap: 0.75rem;
    padding: 0.35rem 0;
}

/* ===== Station Node (Circle) ===== */

.station-node {
    /* Fixed wrapper size - all nodes use same space for alignment */
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

/* The actual visible circle */
.station-node::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid var(--border-primary, #c8b89a);
    background-color: var(--bg-journal, #fdf5e6);
    transition: all 0.3s ease;
}

/* Completed station */
.subway-station.completed .station-node::before {
    background-color: var(--accent-gold, #d4af37);
    border-color: var(--accent-gold, #d4af37);
}

.station-checkmark {
    color: var(--bg-journal, #fdf5e6);
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    z-index: 1;
}

/* Current station - emphasized with larger circle */
.subway-station.current .station-node::before {
    width: 24px;
    height: 24px;
    border-color: var(--accent-gold, #d4af37);
    background-color: var(--bg-journal, #fdf5e6);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.25);
}

/* Pulse animation for current station */
.station-pulse {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: var(--accent-gold, #d4af37);
    border-radius: 50%;
    animation: stationPulse 2s ease-in-out infinite;
}

@keyframes stationPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}

/* Future station - dimmed with solid opaque background to cover track line */
.subway-station.future .station-node::before {
    background-color: var(--bg-journal, #fdf5e6);
    border-color: rgba(200, 184, 154, 0.5);  /* Dimmed border, not opacity on whole element */
}

/* ===== Connector Line (Gold overlay for completed sections) ===== */

.station-connector {
    position: absolute;
    left: 13px;              /* Align with track line center */
    top: 50%;                /* Start from center of this station */
    width: 2px;
    height: calc(100% + 0.2rem);  /* Extend to next station */
    background-color: transparent;
    z-index: 1;
}

/* Completed connector - gold overlay on track */
.subway-station.completed .station-connector {
    background-color: var(--accent-gold, #d4af37);
}

/* Hide connector on last station */
.subway-station:last-child .station-connector {
    display: none;
}

/* ===== Station Label ===== */

.station-label {
    font-family: var(--font-primary, 'EB Garamond', serif);
    font-size: 0.85rem;
    color: var(--text-secondary, #5c4b3f);
    text-align: left;
    flex: 1;
    line-height: 1.2;
}

/* Current stage label - emphasized */
.subway-station.current .station-label {
    color: var(--text-primary, #3a2b20);
    font-weight: 600;
}

/* Completed stage label */
.subway-station.completed .station-label {
    color: var(--text-secondary, #5c4b3f);
}

/* Future stage label - dimmed */
.subway-station.future .station-label {
    opacity: 0.6;
}

/* ===== Responsive: 5-6 stage flows (smaller nodes) ===== */

.flow-subway-map[data-stages="5"] .station-node::before,
.flow-subway-map[data-stages="6"] .station-node::before {
    width: 16px;
    height: 16px;
}

.flow-subway-map[data-stages="5"] .subway-station.current .station-node::before,
.flow-subway-map[data-stages="6"] .subway-station.current .station-node::before {
    width: 20px;
    height: 20px;
}

.flow-subway-map[data-stages="5"] .station-label,
.flow-subway-map[data-stages="6"] .station-label {
    font-size: 0.8rem;
}

.flow-subway-map[data-stages="5"] .station-pulse,
.flow-subway-map[data-stages="6"] .station-pulse {
    width: 8px;
    height: 8px;
}

.flow-subway-map[data-stages="5"] .station-checkmark,
.flow-subway-map[data-stages="6"] .station-checkmark {
    font-size: 9px;
}

/* Accessibility: Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .station-pulse {
        animation: none;
    }
}

/* Flow Template Cards */
.flow-templates-list,
.completed-flows-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.flow-template-card {
    background-color: var(--bubble-bg-assistant, #f0e6d8);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    position: relative; /* For absolute positioning of delete button */
}

.flow-template-card:hover {
    background-color: var(--bubble-bg-user, #e0d8cc);
    border-color: var(--accent-gold);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.flow-template-card:focus-visible {
    outline: 2px solid var(--button-bg, #7a5c43);
    outline-offset: 2px;
}

/* Only one flow can be active, so the Start a Flow list is unavailable while one is. */
.flow-start-locked-note {
    margin: 0;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--button-bg, #7a5c43);
    background-color: rgba(122, 92, 67, 0.08);
    border-radius: 4px;
    color: var(--text-primary);
    line-height: 1.4;
}

.flow-template-card.flow-template-card-disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.flow-template-card.flow-template-card-disabled:hover {
    background-color: var(--bubble-bg-assistant, #f0e6d8);
    border-color: var(--border-primary);
    box-shadow: none;
    transform: none;
}

/* A completed card and its Delete button are siblings, so the card button's
   name is its title; the item positions Delete over the card's corner. */
.flow-completed-item {
    position: relative;
    transition: transform 0.2s;
}

.flow-completed-item:hover {
    transform: translateY(-2px);
}

.flow-completed-item .flow-completed-card {
    padding-right: 2.5rem;
}

.flow-completed-item .flow-completed-card:hover {
    transform: none;
}

.flow-template-card h4 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 1rem;
}

.flow-delete-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.5rem;
    padding: 0.25rem 0.5rem;
    line-height: 1;
    transition: color 0.2s;
    z-index: 10;
}

.flow-delete-btn:hover {
    color: var(--error-color, #e74c3c);
}

.flow-template-card p {
    margin: 0 0 0.75rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.4;
}

.flow-stages-count,
.flow-completed-date {
    display: inline-block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    background-color: var(--bg-tertiary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

/* Scheduled messages sidebar */
.scheduled-delivery-note {
    margin: 0.75rem 0 0;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--button-bg, #7a5c43);
    background-color: #f5e6c8;
    border-radius: 4px;
    color: #6b4f2e;
    line-height: 1.4;
}

.scheduled-messages-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1rem 0;
}

.scheduled-message-card {
    background-color: var(--bubble-bg-assistant, #f0e6d8);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 1rem;
    overflow-wrap: anywhere;
}

.scheduled-message-card strong {
    display: block;
    color: var(--text-primary);
}

.scheduled-message-card p:not(.journal-help-text) {
    margin: 0.35rem 0 0.75rem;
    color: var(--text-primary);
    line-height: 1.4;
}

.scheduled-message-card .btn {
    margin-right: 0.5rem;
}

.scheduled-message-card .btn,
[data-notifications-refresh],
[data-open-scheduled-messages] {
    min-height: 44px;
}

/* Scheduled message editor and notification permission */
.scheduled-messages [hidden] {
    display: none;
}

.scheduled-message-card .btn {
    margin-bottom: 0.25rem;
}

.scheduled-browser-notifications {
    margin: 0.75rem 0 0;
}

.scheduled-browser-notifications p:focus {
    outline: none;
}

.scheduled-new-btn {
    margin-top: 1rem;
}

.scheduled-new-btn,
.scheduled-browser-notifications .btn,
.scheduled-editor-actions .btn {
    min-height: 44px;
}

.scheduled-editor {
    margin: 1rem 0;
    padding: 1rem;
    background-color: var(--card-bg, #f5f0e8);
    border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 8px;
    color: var(--text-primary, #3a2b20);
}

.scheduled-editor h3 {
    margin: 0 0 0.75rem;
    font-family: var(--font-decorative, 'Funnel Sans', serif);
    font-size: 1.15rem;
    font-weight: 400;
}

.scheduled-field,
.scheduled-days {
    margin: 0 0 0.85rem;
}

.scheduled-field > label,
.scheduled-days legend {
    display: block;
    margin-bottom: 4px;
    padding: 0;
    font-size: 1rem;
    font-weight: 600;
}

.scheduled-field .journal-help-text {
    margin: 4px 0 0;
}

.scheduled-active .journal-help-text {
    margin-top: 0;
}

.scheduled-editor input[type="text"],
.scheduled-editor input[type="date"],
.scheduled-editor input[type="time"],
.scheduled-editor select,
.scheduled-editor textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    background-color: var(--input-bg, #fff);
    border: 2px solid var(--border-primary, #c8b89a);
    border-radius: 6px;
    font-family: var(--font-primary, 'EB Garamond', serif);
    font-size: 16px;
    color: var(--text-primary, #3a2b20);
}

.scheduled-editor textarea {
    min-height: 6.5em;
    resize: vertical;
    line-height: 1.4;
}

.scheduled-editor input:focus-visible,
.scheduled-editor select:focus-visible,
.scheduled-editor textarea:focus-visible {
    outline: none;
    border-color: var(--border-focus, #8a5c43);
    box-shadow: 0 0 0 3px rgba(138, 92, 67, 0.2);
}

.scheduled-editor [aria-invalid="true"] {
    border-color: #d73a49;
}

.scheduled-when {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    column-gap: 0.75rem;
}

.scheduled-days {
    border: 0;
    padding: 0;
    min-width: 0;
}

.scheduled-day {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin: 0 6px 6px 0;
    padding: 0 12px;
    border: 2px solid var(--border-primary, #c8b89a);
    border-radius: 999px;
    cursor: pointer;
}

.scheduled-day:has(input:checked) {
    border-color: var(--button-bg, #7a5c43);
    background-color: #f5e6c8;
}

.scheduled-day:has(input:focus-visible) {
    outline: 3px solid var(--button-bg, #7a5c43);
    outline-offset: 2px;
}

.scheduled-day input,
.scheduled-active-label input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--button-bg, #7a5c43);
}

.scheduled-active .scheduled-active-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-weight: 600;
    cursor: pointer;
}

.scheduled-field-error {
    margin: 4px 0 0;
    color: #b31d28;
    line-height: 1.35;
}

.scheduled-editor-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Keep the live region rendered so later announcements are not lost. */
.scheduled-messages-status:empty {
    margin: 0;
}

.no-flows-message {
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    padding: 2rem 1rem;
}

/* Flow Detail Modal */
.flow-modal-content {
    max-width: 700px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;  /* Prevent outer scroll - only body scrolls */
}

.flow-modal-content .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    min-height: 0;  /* Required for flex child scrolling */
}

/* Flow Report Markdown Styling */
.flow-report-content {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    font-family: var(--font-primary, 'EB Garamond', serif);
    color: var(--text-primary, #3a2b20);
    line-height: 1.5;
}

.flow-report-content > * {
    margin-top: 0;
    margin-bottom: 0;
}

/* Headers */
.flow-report-content h1,
.flow-report-content h2,
.flow-report-content h3,
.flow-report-content h4,
.flow-report-content h5,
.flow-report-content h6 {
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    padding: 0;
}

.flow-report-content h1 {
    font-family: var(--font-decorative, 'Funnel Sans', serif);
    color: var(--text-primary, #3a2b20);
    font-size: 1.5em;
    border-bottom: 2px solid var(--border-primary, #c8b89a);
    padding-bottom: 0.2em;
}

.flow-report-content h2 {
    font-family: var(--font-decorative, 'Funnel Sans', serif);
    color: var(--text-primary, #3a2b20);
    font-size: 1.3em;
    border-bottom: 1px solid var(--border-primary, #c8b89a);
    padding-bottom: 0.15em;
}

.flow-report-content h3 {
    font-family: var(--font-primary, 'EB Garamond', serif);
    color: var(--text-primary, #3a2b20);
    font-size: 1.15em;
}

.flow-report-content h4 {
    font-family: var(--font-primary, 'EB Garamond', serif);
    color: var(--text-primary, #3a2b20);
    font-size: 1.05em;
}

/* Paragraphs */
.flow-report-content p {
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

/* Lists */
.flow-report-content ul,
.flow-report-content ol {
    margin: 0;
    padding-left: 1.5em;
    line-height: 1.5;
    display: block;
    list-style-position: outside;
}

.flow-report-content ul {
    list-style-type: disc;
}

.flow-report-content ol {
    list-style-type: decimal;
}

.flow-report-content li {
    margin-bottom: 0.25em;
}

.flow-report-content li:last-child {
    margin-bottom: 0;
}

/* Strong and emphasis */
.flow-report-content strong {
    font-weight: 700;
    color: var(--text-primary, #3a2b20);
}

.flow-report-content em {
    font-style: italic;
}

/* Code blocks */
.flow-report-content code {
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.9em;
    background-color: rgba(0, 0, 0, 0.05);
    padding: 0.1em 0.3em;
    border-radius: 3px;
}

.flow-report-content pre {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 1em;
    border-radius: 5px;
    overflow-x: auto;
}

.flow-report-content pre code {
    background: none;
    padding: 0;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .flow-modal-content {
        max-width: 95%;
        max-height: 90vh;
    }
}

/* ================================================================ */
/* Settings Sidebar Styles */
/* ================================================================ */

/* Mobile responsiveness */
@media (max-width: 768px) {
    .settings-sidebar-body,
    .global-settings-sidebar-body {
        /* Add safe-area padding to prevent content from being hidden behind Safari bottom UI bar */
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    }
}

/* ================================================================ */
/* Live Pages Right Sidebar Styles */
/* ================================================================ */

/* Remove shadow when edit panel is open to avoid shadow on edit panel */
.live-pages-right-sidebar.no-shadow {
    box-shadow: none;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .live-pages-right-sidebar-body {
        /* Add safe-area padding to prevent content from being hidden behind Safari bottom UI bar */
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    }
}

/* ================================================================ */
/* Live Page Edit Panel Styles (Inline, covers chat) */
/* ================================================================ */

.live-page-edit-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-journal, #fdf5e6);
    z-index: 800; /* Same level as sidebars to avoid shadow overlap */
    display: none; /* Hidden by default */
    flex-direction: column;
    overflow: hidden;
}

.live-page-edit-panel.show {
    display: flex; /* Show when active */
}

.live-page-edit-panel-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-input-area, #f0e9d9);
    height: 70px; /* Match Live Pages sidebar header height */
    box-sizing: border-box;
}

.live-page-edit-panel-header h2 {
    font-family: var(--font-primary, 'EB Garamond', serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary, #3a2b20);
    margin: 0;
}

.live-page-edit-panel-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-left: auto; /* Push buttons to the right */
    margin-right: 1rem; /* Space between buttons and X */
}

.live-page-edit-panel-header .close-btn {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--text-primary, #3a2b20);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.live-page-edit-panel-header .close-btn:hover {
    background-color: var(--border-primary, #c8b89a);
}

.live-page-edit-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

.live-page-edit-panel-body .live-page-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0; /* Allow flex children to shrink */
}

.live-page-form-left-column,
.live-page-form-right-column {
    display: flex;
    flex-direction: column;
}

.live-page-form-right-column {
    flex: 1; /* Fill remaining space in single column mode */
    min-height: 24rem; /* Keep the editor usable when stacked below page metadata */
    min-width: 0;  /* Prevent flex/grid overflow */
}

/* Make the content field grow to fill available space */
.live-page-form-right-column .journal-form-group:has([name="content"]) {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Allow flex children to shrink */
    min-width: 0;  /* Prevent flex/grid overflow */
}

/* Make the wrapper inside content journal-form-group also fill space */
.live-page-form-right-column .journal-form-group:has([name="content"]) .textarea-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;        /* Prevent flex/grid overflow */
    position: relative;  /* Establish containing block for children */
}

.live-page-edit-panel-body .live-page-form [name="content"] {
    flex: 1;
    min-height: 9em; /* Approximately 6 lines of text */
    resize: none;
}

.live-page-edit-panel-body .live-page-form [name="description"] {
    min-height: 15em; /* Approximately 10 lines of text */
    resize: none;
}

/* Two-column layout for wider screens */
@media (min-width: 1000px) {
    .live-page-edit-panel-body .live-page-form {
        display: grid;
        grid-template-columns: minmax(250px, 1fr) 2fr; /* Left: min 250px, Right (Content): 2/3 */
        gap: 2rem;
        flex: 1;
        min-height: 0;
    }

    .live-page-form-left-column {
        grid-column: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;  /* Prevent grid overflow */
    }

    .live-page-form-right-column {
        grid-column: 2;
        display: flex;
        flex-direction: column;
        min-height: 0;
        min-width: 0;  /* Prevent grid overflow - critical for CodeMirror */
    }

    /* Content field fills its column */
    .live-page-form-right-column .journal-form-group:has([name="content"]) {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        min-width: 0;  /* Prevent grid overflow */
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .live-page-edit-panel {
        position: fixed;  /* Override absolute positioning */
        top: 60px;        /* Below top bar */
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(100vh - 60px);
        z-index: 850;     /* Higher than sidebar (800) */
        flex-direction: column;
    }

    .live-page-edit-panel.show {
        display: flex;    /* Show with flex layout when .show class is added */
    }

    .live-page-edit-panel-header {
        height: auto;     /* Allow height to adjust for wrapping */
        flex-wrap: wrap;  /* Allow items to wrap */
        padding: 1rem;
        gap: 0.75rem;
    }

    .live-page-edit-panel-header h2 {
        width: 100%;      /* Force title to full width */
        order: 1;         /* Title first */
        font-size: 1.5rem; /* Keep original size */
    }

    .live-page-edit-panel-actions {
        order: 3;         /* Buttons on second row */
        margin-left: 0;   /* Reset margin */
        margin-right: 0;
        flex: 1;          /* Take remaining space */
    }

    .live-page-edit-panel-header .close-btn {
        order: 2;         /* X button stays top right */
        position: absolute;
        top: 1rem;
        right: 1rem;
    }

    .live-page-edit-panel-body {
        padding: 1rem;
        padding-bottom: calc(1rem + 70px); /* Add space for bottom nav bar */
        flex: 1;          /* Fill remaining space */
        overflow-y: auto; /* Ensure scrollability */
        overflow-x: hidden; /* Prevent horizontal scroll */
        min-height: 0;    /* Critical for flex scrolling */
        display: block;   /* Override flex display for simpler scrolling */
    }

    .live-page-edit-panel-body .live-page-form {
        display: block;   /* Override flex on mobile */
        height: auto;     /* Let content determine height */
    }

    .live-page-form-left-column,
    .live-page-form-right-column {
        display: block;   /* Stack normally on mobile */
    }

    .live-page-edit-panel-body .live-page-form [name="description"] {
        min-height: 6em;  /* Approximately 4 lines on mobile */
        height: 8em; /* Override the textarea's ten-row intrinsic height. */
    }
}

/* ================================================================ */
/* Prompt Sidebar Styles */
/* ================================================================ */

.prompt-view-tabs,
.prompt-comparison-tabs {
    display: grid;
    gap: 4px;
    padding: 4px;
    margin-bottom: 1rem;
    background: var(--bg-input-area, #f0e9d9);
    border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 8px;
}

.prompt-view-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.prompt-comparison-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.prompt-view-tab,
.prompt-comparison-tab {
    min-height: 44px;
    padding: 0.5rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-primary, #3a2b20);
    font-family: var(--font-primary, 'EB Garamond', serif);
    font-weight: 600;
    cursor: pointer;
}

.prompt-view-tab:hover,
.prompt-comparison-tab:hover {
    background: rgba(122, 92, 67, 0.1);
}

.prompt-view-tab.active,
.prompt-comparison-tab.active {
    color: var(--button-text, #fdf5e6);
    background: var(--button-bg, #7a5c43);
}

.prompt-view-tab:focus-visible,
.prompt-comparison-tab:focus-visible {
    outline: 2px solid var(--button-bg, #7a5c43);
    outline-offset: 2px;
}

#prompt-comparison-tab.has-comparison::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 6px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
}

.prompt-view-panel[hidden],
.prompt-comparison-tabs[hidden] {
    display: none;
}

.prompt-comparison-empty,
.prompt-comparison-loading,
.prompt-comparison-error {
    padding: 1rem;
    border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 8px;
    color: var(--text-primary, #3a2b20);
    background: var(--card-bg, #f5f0e8);
    line-height: 1.45;
}

.prompt-comparison-error {
    color: #7a3226;
    background: #f0d4cc;
}

.prompt-comparison-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 8px;
    background: var(--card-bg, #f5f0e8);
    color: var(--text-primary, #3a2b20);
    font-size: 0.85rem;
}

.prompt-comparison-meta > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.prompt-comparison-meta strong {
    font-weight: 600;
}

.prompt-request-details,
.prompt-diff-raw {
    margin-top: 1rem;
    border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 8px;
    background: var(--card-bg, #f5f0e8);
}

.prompt-request-details summary,
.prompt-diff-raw summary {
    padding: 0.75rem 1rem;
    color: var(--text-primary, #3a2b20);
    font-weight: 600;
    cursor: pointer;
}

.prompt-request-json,
.prompt-diff-side pre {
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: 'Consolas', 'Monaco', 'Menlo', monospace;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-primary, #3a2b20);
    border-top: 1px solid var(--border-primary, #c8b89a);
}

.prompt-diff-summary {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    background: #f5e6c8;
    color: #6b4f2e;
    font-weight: 600;
}

.prompt-diff-summary.identical {
    background: #e8f4f0;
    color: #2d6a4f;
}

.prompt-diff-section-title {
    margin: 1rem 0 0.65rem;
    color: var(--text-primary, #3a2b20);
    font-family: var(--font-primary, 'EB Garamond', serif);
    font-size: 1rem;
}

.prompt-diff-block,
.prompt-diff-setting {
    margin-bottom: 0.75rem;
    overflow: hidden;
    border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 8px;
    background: var(--input-bg, #fff);
}

.prompt-diff-row-header {
    padding: 0.6rem 0.75rem;
    background: var(--bg-input-area, #f0e9d9);
    color: var(--text-primary, #3a2b20);
    font-weight: 600;
}

.prompt-diff-side-label {
    display: block;
    padding: 0.45rem 0.75rem;
    border-top: 1px solid var(--border-primary, #c8b89a);
    background: var(--card-bg, #f5f0e8);
    color: var(--text-primary, #3a2b20);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.prompt-diff-empty {
    padding: 0.75rem;
    color: var(--text-primary, #3a2b20);
    font-style: italic;
}

/* Individual message blocks */
.prompt-message-block {
    background-color: var(--input-bg, #fff);
    border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.prompt-message-role {
    background-color: var(--bg-input-area, #f0e9d9);
    padding: 0.75rem 1rem;
    font-family: var(--font-primary, 'EB Garamond', serif);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary, #3a2b20);
    border-bottom: 1px solid var(--border-primary, #c8b89a);
}

.prompt-message-content {
    padding: 1rem;
    font-family: 'Consolas', 'Monaco', 'Menlo', monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-primary, #3a2b20);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 400px;
    overflow-y: auto;
}

/* Prompt Turn Headers */
.prompt-turn-header {
    background: linear-gradient(135deg, var(--accent-color, #8b6914) 0%, #a67c00 100%);
    color: #fff;
    padding: 0.75rem 1rem;
    font-family: var(--font-primary, 'EB Garamond', serif);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.prompt-turn-header.turn-2 {
    background: linear-gradient(135deg, #2d6a4f 0%, #40916c 100%);
    margin-top: 1.5rem;
}

/* Research Question Block */
.prompt-message-block.research-question-block .prompt-message-role {
    background-color: #e8f4f0;
    color: #2d6a4f;
}

/* Research Output Block */
.prompt-message-block.research-output-block .prompt-message-role {
    background-color: #d4edda;
    color: #155724;
}

.prompt-message-content.research-output {
    background-color: #f8f9fa;
    max-height: 500px;
}

/* Research Metadata */
.prompt-research-meta {
    display: flex;
    gap: 1.5rem;
    padding: 0.75rem 1rem;
    background-color: var(--bg-input-area, #f0e9d9);
    border-radius: 8px;
    margin-bottom: 1rem;
    font-family: var(--font-primary, 'EB Garamond', serif);
    font-size: 0.9rem;
    color: var(--text-primary, #3a2b20);
}

.prompt-research-meta .meta-item {
    display: flex;
    gap: 0.25rem;
}

.prompt-research-meta .meta-item strong {
    color: var(--accent-color, #8b6914);
}

/* ================================================================ */
/* Search Debugger Styles */
/* ================================================================ */

#search-container {
    background-color: var(--bg-journal, #fdf5e6);
    position: relative;
}

.search-close-btn {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: color 0.2s ease;
}

.search-close-btn:hover {
    color: var(--text-primary);
}

.search-body {
    height: calc(100vh - 60px); /* Full height minus top bar only */
    overflow: hidden;
    padding: 1.5rem;
    padding-right: 4rem; /* Extra space for close button */
    box-sizing: border-box;
}

.search-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    height: 100%;
}

.search-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Short windows scroll the column so results keep their minimum height. */
    overflow-y: auto;
    min-height: 0; /* Important for flex children to scroll */
}

.search-column-title {
    font-family: var(--font-primary, 'EB Garamond', serif);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-primary);
    color: var(--text-primary);
}

/* Left Column - Search Testing */

.search-input-group {
    flex-shrink: 0;
    margin-bottom: 0.75rem;
}

.search-input-label {
    display: block;
    font-family: var(--font-secondary, 'Funnel Sans', sans-serif);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.search-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    font-family: var(--font-secondary, 'Funnel Sans', sans-serif);
    font-size: 1rem;
    box-sizing: border-box;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.search-input:disabled {
    opacity: 0.5;
    background-color: #f5f5f5;
    cursor: not-allowed;
}

.search-type-group {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.search-type-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-family: var(--font-secondary);
}

.search-results-area {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    background-color: white;
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    min-height: 12rem;
}

.search-result-card {
    padding: 1rem;
    border: 1px solid var(--border-secondary);
    border-radius: 4px;
    background-color: var(--bg-card, #fff);
    transition: box-shadow 0.2s;
    flex-shrink: 0;
}

.search-result-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.search-result-card.expanded .search-result-preview {
    max-height: none;
}

.search-result-header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
}

.search-result-speaker {
    font-weight: 600;
}

/* Index-specific result styling */
.search-result-type {
    background-color: var(--accent-color, #4a90e2);
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.search-result-title {
    font-weight: 600;
    color: var(--text-primary);
}

.search-result-chunk-type {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
}

.result-timestamp {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-left: auto;
}

/* Index selector helper text */
.search-input-helper {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    margin-bottom: 0;
    font-style: italic;
}

.search-result-preview {
    margin-bottom: 0.75rem;
    line-height: 1.5;
    white-space: pre-wrap;
    font-family: var(--font-secondary);
    max-height: 150px;
    overflow: hidden;
}

.search-result-expand-btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    background-color: var(--color-primary, #4a90e2);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-secondary);
}

.search-result-expand-btn:hover {
    background-color: var(--color-primary-dark, #3a7bc8);
}

.placeholder-text,
.loading-text,
.error-text,
.no-results {
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
}

.error-text {
    color: #c41e3a;
}

/* Right Column - LLM Testing */

.llm-messages-editor {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    background-color: white;
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    min-height: 0;
}

.llm-message-block {
    border: 1px solid var(--border-secondary);
    border-radius: 4px;
    padding: 0.75rem;
    background-color: var(--bg-card, #fff);
    flex-shrink: 0;
}

.llm-message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    gap: 0.75rem;
}

.llm-message-role {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    font-family: var(--font-secondary);
    font-size: 0.9rem;
}

.llm-message-delete-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.llm-message-delete-btn:hover {
    color: #c41e3a;
}

.llm-message-token-count {
    font-size: 0.85rem;
    color: var(--text-secondary, #5c4b3f);
    margin-left: auto;
    white-space: nowrap;
}

.llm-message-content {
    width: 100%;
    min-height: 80px;
    height: 80px;
    padding: 0.5rem;
    border: 1px solid var(--border-secondary);
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    resize: vertical;
    box-sizing: border-box;
    background-color: #f5f5f5;
    transition: height 0.3s ease;
}

.llm-message-block.expanded .llm-message-content {
    height: 240px; /* 3x the default height */
}

.llm-message-expand-btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    background-color: var(--color-primary, #4a90e2);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-secondary);
    margin-top: 0.5rem;
}

.llm-message-expand-btn:hover {
    background-color: var(--color-primary-dark, #3a7bc8);
}

.llm-total-tokens {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary, #3a2b20);
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-secondary);
}

.llm-controls {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.llm-result-area {
    flex-shrink: 0;
    max-height: 40%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.llm-result-title {
    margin: 0 0 0.5rem 0;
    font-family: var(--font-primary);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.llm-result-content {
    flex: 1;
    padding: 1rem;
    background-color: white;
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    overflow-y: auto;
    font-family: var(--font-secondary);
    line-height: 1.6;
    min-height: 100px;
}

.llm-result-meta {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-secondary);
}

.llm-result-meta p {
    margin: 0.25rem 0;
    font-size: 0.9rem;
}

.llm-result-text pre {
    margin: 0.5rem 0 0 0;
    padding: 1rem;
    background-color: #f5f5f5;
    border-radius: 4px;
    overflow-x: auto;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.llm-result-text.json-result pre {
    background-color: #f0f8ff;
}

/* ================================================================ */
/* Research Debugger Styles - Clean Two-Column Layout */
/* ================================================================ */

#research-container {
    background-color: var(--bg-journal, #fdf5e6);
}

.research-body {
    padding: 1rem 1.5rem;
    padding-right: 3.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    gap: 0.75rem;
}

/* Compact Header */
.research-header {
    flex-shrink: 0;
}

.research-input-row {
    display: flex;
    flex-wrap: wrap; /* Controls wrap inside the view on narrow screens */
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.research-input {
    flex: 1 1 12rem;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-primary, #c4b5a0);
    border-radius: 4px;
    font-family: var(--font-secondary, 'Funnel Sans', sans-serif);
    font-size: 0.95rem;
    background: white;
}

.research-input:focus {
    outline: none;
    border-color: var(--accent-color, #8b6914);
    box-shadow: 0 0 0 2px rgba(139, 105, 20, 0.1);
}

.research-select {
    padding: 0.5rem;
    border: 1px solid var(--border-primary, #c4b5a0);
    border-radius: 4px;
    font-family: var(--font-secondary);
    font-size: 0.85rem;
    background: white;
    min-width: 50px;
}

.research-v2-toggle {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-primary, #c4b5a0);
    border-radius: 4px;
    font-family: var(--font-secondary);
    font-size: 0.8rem;
    background: white;
    cursor: pointer;
    user-select: none;
}

.research-v2-toggle:hover {
    background: #f5f0e8;
}

.research-v2-toggle input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

/* V2 Length Select - hidden by default, shown when V2 is checked */
.research-length-select {
    display: none;
}

.research-length-select.visible {
    display: block;
}

/* V2 Task Progress Table */
.v2-task-table {
    margin-bottom: 1rem;
    border: 1px solid var(--border-primary, #c4b5a0);
    border-radius: 6px;
    overflow: hidden;
    background: white;
}

.v2-task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: #f5f0e8;
    border-bottom: 1px solid var(--border-primary, #c4b5a0);
}

.v2-task-header h4 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.v2-stats {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.retained-badge,
.token-badge {
    font-size: 0.75rem;
    color: #666;
    background: white;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    border: 1px solid #ddd;
}

.token-badge {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.token-bar {
    width: 50px;
    height: 6px;
    background: #eee;
    border-radius: 3px;
    overflow: hidden;
}

.token-fill {
    height: 100%;
    background: linear-gradient(90deg, #4caf50 0%, #8bc34a 50%, #ffeb3b 80%, #ff9800 100%);
    transition: width 0.3s ease;
}

.task-progress-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.task-progress-table th {
    text-align: left;
    padding: 0.4rem 0.5rem;
    background: #faf8f5;
    font-weight: 500;
    font-size: 0.75rem;
    color: #666;
    border-bottom: 1px solid #eee;
}

.task-progress-table td {
    padding: 0.5rem;
    border-bottom: 1px solid #f0f0f0;
}

.task-progress-table tr:last-child td {
    border-bottom: none;
}

.task-row.current {
    background: #fff8e6;
}

.task-row.completed {
    background: #f0fff0;
}

.task-row.completed .task-desc {
    color: #666;
}

.task-index {
    width: 30px;
    text-align: center;
    color: #999;
    font-size: 0.8rem;
}

.task-icon {
    width: 25px;
    text-align: center;
}

.task-desc {
    max-width: 300px;
}

.task-status {
    font-size: 0.75rem;
    color: #666;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-row.active .task-status,
.task-row.in-progress .task-status {
    color: var(--accent-color, #8b6914);
    font-weight: 500;
}

.progress-note-inline {
    font-size: 0.7rem;
    color: #888;
    font-style: italic;
    margin-top: 2px;
    white-space: normal;
    max-width: 200px;
    line-height: 1.3;
}

.task-row.active .progress-note-inline {
    color: var(--accent-color, #8b6914);
    opacity: 0.8;
}

.research-btn-run {
    padding: 0.5rem 1rem;
    background: var(--accent-color, #8b6914);
    color: white;
    border: none;
    border-radius: 4px;
    font-family: var(--font-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.research-btn-run:hover {
    background: #725610;
}

.research-btn-run:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.research-btn-clear {
    padding: 0.5rem 0.75rem;
    background: transparent;
    color: var(--text-secondary, #5c4b3f);
    border: 1px solid var(--border-primary, #c4b5a0);
    border-radius: 4px;
    font-family: var(--font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s;
}

.research-btn-clear:hover {
    background: var(--bg-input-area, #f0e9d9);
}

/* Status Bar */
.research-status {
    padding: 0.4rem 0.75rem;
    background: var(--bg-input-area, #f0e9d9);
    border-radius: 4px;
    font-family: var(--font-secondary);
    font-size: 0.85rem;
    color: var(--text-secondary, #5c4b3f);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.research-status.running {
    background: #e8f5e9;
    color: #2e7d32;
}

.research-status.complete {
    background: #e3f2fd;
    color: #1565c0;
}

.research-status.error {
    background: #ffebee;
    color: #c62828;
}

.research-status .status-icon {
    font-size: 1rem;
}

/* Two-Column Layout */
.research-columns {
    flex: 1;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1rem;
    min-height: 0;
    overflow: hidden;
}

/* Section Headers */
.research-section-header {
    font-family: var(--font-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary, #5c4b3f);
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border-secondary, #e0d5c5);
}

/* Left Column: Event Log */
.research-log-column {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.research-log-content {
    flex: 1;
    padding: 0.5rem;
    background: #faf8f4;
    border: 1px solid var(--border-secondary, #e0d5c5);
    border-radius: 4px;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 0.75rem;
    line-height: 1.4;
    overflow-y: auto;
    color: var(--text-primary, #3a2b20);
}

.research-log-content:empty::before {
    content: 'Events will appear here...';
    color: #999;
    font-style: italic;
}

.research-log-entry {
    padding: 0.25rem 0.4rem;
    margin-bottom: 0.25rem;
    border-radius: 3px;
    border-left: 2px solid transparent;
}

/* Log entry colors - subtle, light theme */
.research-log-entry.start,
.research-log-entry.status {
    background: #f5f5f5;
    border-left-color: #9e9e9e;
    color: #616161;
}

.research-log-entry.phase_change {
    background: #fff8e1;
    border-left-color: #ffc107;
    color: #6d4c00;
    font-weight: 500;
}

.research-log-entry.plan {
    background: #e3f2fd;
    border-left-color: #2196f3;
    color: #0d47a1;
}

.research-log-entry.tool_call {
    background: #e8f5e9;
    border-left-color: #4caf50;
    color: #1b5e20;
}

.research-log-entry.tool_result {
    background: #f3e5f5;
    border-left-color: #9c27b0;
    color: #4a148c;
}

.research-log-entry.progress {
    background: #e0f2f1;
    border-left-color: #009688;
    color: #004d40;
}

.research-log-entry.auto_retain {
    background: #fff3e0;
    border-left-color: #ff9800;
    color: #e65100;
}

.research-log-entry.synthesis,
.research-log-entry.complete {
    background: #e8f5e9;
    border-left-color: #4caf50;
    color: #1b5e20;
    font-weight: 500;
}

.research-log-entry.error,
.research-log-entry.max_rounds {
    background: #ffebee;
    border-left-color: #f44336;
    color: #b71c1c;
}

.research-log-entry .log-phase {
    margin-right: 0.25rem;
}

.research-log-entry .log-round {
    color: #888;
    font-size: 0.7rem;
    margin-right: 0.25rem;
}

.research-log-entry .log-data {
    margin-top: 0.2rem;
    padding-left: 0.75rem;
    font-size: 0.7rem;
    color: #888;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Right Column: Results */
.research-results-column {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.research-result-content {
    flex: 1;
    padding: 1rem;
    background: white;
    border: 1px solid var(--border-secondary, #e0d5c5);
    border-radius: 4px;
    overflow-y: auto;
    font-family: var(--font-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-primary, #3a2b20);
}

.research-result-content .placeholder-text {
    color: #999;
    font-style: italic;
    text-align: center;
    padding: 2rem;
}

/* Results Sections - Plan, Progress, Synthesis */
.research-plan-section,
.research-progress-section,
.research-synthesis-section {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: #faf8f4;
    border-radius: 6px;
    border: 1px solid var(--border-secondary, #e0d5c5);
}

.research-plan-section h4,
.research-progress-section h4,
.research-synthesis-section h4 {
    margin: 0 0 0.5rem 0;
    font-family: var(--font-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent-color, #8b6914);
}

.research-plan-section .plan-content {
    white-space: pre-wrap;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-primary, #3a2b20);
}

.research-progress-section .progress-entry {
    display: flex;
    gap: 0.5rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border-secondary, #e0d5c5);
    font-size: 0.8rem;
    align-items: baseline;
}

.research-progress-section .progress-entry:last-child {
    border-bottom: none;
}

.research-progress-section .progress-round {
    font-weight: 600;
    color: var(--accent-color, #8b6914);
    min-width: 1.75rem;
    font-size: 0.75rem;
}

.research-progress-section .progress-phase {
    color: #888;
    min-width: 3.5rem;
    font-size: 0.75rem;
}

.research-progress-section .progress-note {
    flex: 1;
    color: var(--text-primary, #3a2b20);
}

.research-synthesis-section .synthesis-text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-primary, #3a2b20);
}

/* Markdown content styling within synthesis */
.research-synthesis-section .synthesis-text.markdown-content p {
    margin: 0 0 0.75rem 0;
}
.research-synthesis-section .synthesis-text.markdown-content p:last-child {
    margin-bottom: 0;
}
.research-synthesis-section .synthesis-text.markdown-content h2,
.research-synthesis-section .synthesis-text.markdown-content h3,
.research-synthesis-section .synthesis-text.markdown-content h4 {
    margin: 1rem 0 0.5rem 0;
    font-weight: 600;
}
.research-synthesis-section .synthesis-text.markdown-content h2:first-child,
.research-synthesis-section .synthesis-text.markdown-content h3:first-child,
.research-synthesis-section .synthesis-text.markdown-content h4:first-child {
    margin-top: 0;
}
.research-synthesis-section .synthesis-text.markdown-content ul,
.research-synthesis-section .synthesis-text.markdown-content ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}
.research-synthesis-section .synthesis-text.markdown-content li {
    margin-bottom: 0.25rem;
}
.research-synthesis-section .synthesis-text.markdown-content strong {
    font-weight: 600;
}
.research-synthesis-section .synthesis-text.markdown-content code {
    background: rgba(0,0,0,0.05);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-size: 0.85em;
}

/* Live progress updates during research */
.research-plan {
    padding: 0.75rem 1rem;
    background: #e3f2fd;
    border-radius: 6px;
    margin-bottom: 0.75rem;
    border-left: 3px solid #2196f3;
}

.research-plan h4 {
    margin: 0 0 0.4rem 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1565c0;
}

.progress-update {
    padding: 0.6rem 0.75rem;
    background: #e0f2f1;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    border-left: 3px solid #009688;
}

.progress-update .progress-header {
    font-weight: 600;
    font-size: 0.8rem;
    color: #00695c;
    margin-bottom: 0.25rem;
}

.progress-update .progress-note {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    color: var(--text-primary, #3a2b20);
}

.progress-update .progress-strategy {
    font-size: 0.8rem;
    color: #666;
    font-style: italic;
}

.progress-update .progress-stats {
    font-size: 0.75rem;
    color: #888;
}

/* Stats Section */
.research-stats-section {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-secondary, #e0d5c5);
}

.research-stats-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
}

.research-stats-content .stat-round {
    padding: 0.5rem 0.75rem;
    background: #faf8f4;
    border-radius: 4px;
    font-size: 0.8rem;
    border: 1px solid var(--border-secondary, #e0d5c5);
}

.research-stats-content .stat-label {
    font-weight: 600;
    color: var(--accent-color, #8b6914);
}

/* The close button sits level with the first control row, in the body's right padding. */
#research-container .search-close-btn {
    top: calc(1rem + 2px);
    right: 1rem;
}

/* Phones (600 px and below, where the controls no longer fit one line beside the question): the
   question takes the first line beside the close button; the other controls wrap below it and
   use the full width. */
@media (max-width: 600px) {
    .research-body {
        padding: 1rem;
    }

    .research-input {
        flex-basis: 100%;
        margin-right: 40px;
    }
}

/* Mobile: Stack columns. The Results box keeps a usable height on short screens (phones in
   landscape, wrapped controls); the view scrolls instead of squeezing it. */
@media (max-width: 800px) {
    /* The view scrolls as a whole, so the close button moves with the controls beside it. */
    #research-container {
        overflow-y: auto;
    }

    .research-body {
        height: auto;
        min-height: 100%;
    }

    .research-columns {
        flex: 1 0 auto;
        grid-template-columns: 1fr;
        grid-template-rows: 200px minmax(240px, 1fr);
        overflow: visible;
    }

    .research-log-column {
        max-height: 200px;
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .search-close-btn {
        top: 1rem;
        right: 1rem;
    }

    .search-body {
        padding-right: 3rem; /* Less padding on mobile */
    }

    .search-columns {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }

    .search-column {
        max-height: none;
        overflow: visible;
    }

    .search-results-area,
    .llm-messages-editor {
        max-height: 400px;
    }
}

/* ================================================================ */
/* FAB Column and Floating Action Buttons */
/* ================================================================ */

.fab-column {
    width: 80px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    background-color: transparent;
    z-index: 1100;
}

.floating-action-buttons {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 12px;
}

.fab {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background-color: transparent;
    border: none;
    box-shadow: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #5c4b3f);
    font-size: 24px;
    transition: all 0.2s ease;
    position: relative;
    -webkit-tap-highlight-color: transparent; /* Prevent default mobile tap highlight */
}

/*
 * Mobile Hover State Fix: Only apply hover styles on devices with true hover capability
 *
 * Problem: On touch devices (especially iPhone), tapping a button causes CSS :hover state
 * to persist after the tap, leaving the button highlighted until user taps elsewhere.
 *
 * Solution: Use @media (hover: hover) and (pointer: fine) to apply hover styles ONLY on
 * devices with actual hover capability (mouse/trackpad), not touch devices.
 *
 * - hover: hover = device has genuine hover capability (not touch)
 * - pointer: fine = device has precise pointing (mouse/trackpad, not finger)
 *
 * This is the W3C standards-based solution for preventing sticky hover states on mobile.
 *
 * Testing Note: Cannot be properly tested in Chromium mobile emulation due to known
 * browser limitation (Chromium bug #530183, Playwright issue #11781). The media query
 * fix works correctly on real iOS devices but emulation doesn't properly emulate
 * hover:none capability. Manual testing on real iPhone required to verify behavior.
 * For automated testing on real devices, use BrowserStack or LambdaTest.
 */
@media (hover: hover) and (pointer: fine) {
    .fab:hover {
        background-color: var(--bg-secondary, rgba(92, 75, 63, 0.15));
    }

    .fab.active:hover {
        background-color: var(--bg-secondary, rgba(92, 75, 63, 0.35));
    }
}

.fab.active {
    background-color: var(--bg-secondary, rgba(92, 75, 63, 0.25));
}

/* Focus styles for keyboard navigation */
.fab:focus-visible {
    outline: 2px solid var(--border-focus, #8a5c43);
    outline-offset: 2px;
}

/* Touch feedback on mobile devices */
@media (hover: none) {
    .fab:active:not(.active) {
        background-color: var(--bg-secondary, rgba(92, 75, 63, 0.15));
        transform: scale(0.95);
    }
}

.fab i {
    font-size: 24px;
}

/* Custom Tooltips */
.fab-tooltip {
    position: absolute;
    right: 70px;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--bg-input-area, #f0e9d9);
    color: var(--text-primary, #3a2b20);
    border: 1px solid var(--border-primary, #c8b89a);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Triangle pointer on the right side of tooltip */
.fab-tooltip::after {
    content: '';
    position: absolute;
    right: -9px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid var(--bg-input-area, #f0e9d9);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

.fab-tooltip::before {
    content: '';
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid var(--border-primary, #c8b89a);
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
}

@media (hover: hover) {
    .fab:hover .fab-tooltip {
        opacity: 1;
        visibility: visible;
    }
}

/* Mobile: Hide FAB column entirely */
@media (max-width: 768px) {
    .fab-column {
        display: none;
    }
}

/* ================================================================ */
/* Top Bar (shown on larger screens, replaces FAB column) */
/* ================================================================ */

.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: var(--bg-input-area, #f0e9d9);
    border-bottom: 1px solid var(--border-primary, #c8b89a);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    z-index: 900;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.top-bar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.top-bar-logo {
    height: 32px;
    width: auto;
    display: block;
    cursor: pointer;
}

.top-bar-title {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #3a2b20);
    margin: 0;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.top-bar-actions {
    display: flex;
    --top-bar-actions-gap: 8px;
    gap: var(--top-bar-actions-gap);
    align-items: center;
}

.top-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-primary, #3a2b20);
    font-family: var(--font-primary, 'EB Garamond', serif);
    font-size: 17px;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent; /* Prevent default mobile tap highlight */
}

.top-btn i {
    font-size: 20px;
}

.top-btn-label {
    display: inline;
    white-space: nowrap; /* Prevent text from wrapping to two lines */
}

/* Mobile Hover State Fix: Same approach as .fab buttons above - see detailed comment at line 3819 */
@media (hover: hover) and (pointer: fine) {
    .top-btn:hover {
        background-color: var(--border-primary, #c8b89a);
        border-color: var(--border-primary, #c8b89a);
    }
}

.top-btn.active {
    background-color: #b5a585;
    border-color: #b5a585;
}

/* Focus styles for keyboard navigation */
.top-btn:focus-visible {
    outline: 2px solid var(--border-focus, #8a5c43);
    outline-offset: 2px;
}

/* Touch feedback on mobile devices */
@media (hover: none) {
    .top-btn:active:not(.active) {
        background-color: var(--border-primary, #c8b89a);
        opacity: 0.7;
        transform: scale(0.98);
    }
}

/* Adjust app container to account for top bar */
body {
    padding-top: 60px;
}

#app-container {
    height: 100%; /* Use 100% of body height (which accounts for padding via box-sizing) */
}

/* ========================================
   Connection Status Banner
   ======================================== */

.connection-banner {
    position: fixed;
    box-sizing: border-box;
    top: 60px;
    left: 0;
    right: 0;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Warm amber tint — like candlelight on parchment */
    background-color: #f5e6c8;
    border-bottom: 1px solid #dcc99e;
    color: #6b4f2e;
    font-family: var(--font-primary, 'EB Garamond', serif);
    font-size: 15px;
    z-index: 999;
    animation: banner-slide-down 0.3s ease-out;
    transition: opacity 0.5s ease, background-color 0.3s ease, color 0.3s ease;
}

.connection-banner .spinning {
    display: inline-block; /* Required for transform (rotation) to work on inline elements */
    animation: spin 1s linear infinite;
}

.connection-banner.hiding {
    opacity: 0;
    pointer-events: none;
}

.connection-banner.hidden {
    display: none;
}

.connection-banner.disconnected {
    /* Dusty rose/terracotta — like aged wax seal */
    background-color: #f0d4cc;
    color: #7a3226;
    border-bottom-color: #d9a99e;
}

body:has(.connection-banner:not(.hidden):not(.hiding)) .app-sidebar {
    top: 96px;
    height: calc(100vh - 96px);
}

body:has(.connection-banner:not(.hidden):not(.hiding)) .live-page-edit-panel {
    top: 36px;
    height: auto;
}

@media (max-width: 768px) {
    body:has(.connection-banner:not(.hidden):not(.hiding)) .live-page-edit-panel {
        top: 96px;
    }

    /* Below the banner, panels still end where the composer begins. */
    body:has(.connection-banner:not(.hidden):not(.hiding)) .app-sidebar {
        height: auto;
    }
}

@keyframes banner-slide-down {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Hide FAB column - we always use top bar */
.fab-column {
    display: none !important;
}

.top-bar-responsive {
    gap: 12px;
}

.top-bar-responsive .top-bar-brand {
    flex-shrink: 0;
}

.top-bar-responsive .top-bar-actions {
    min-width: 0;
    overflow-x: auto;
    /* No native scrollbar under the icons (explorer 2026-10-21): the trailing fade shows that more tools
       are hidden, and wheel, touch and keyboard focus still scroll the row. */
    scrollbar-width: none;
    --top-bar-actions-padding: 3px;
    padding: var(--top-bar-actions-padding);
    /* While tools overflow, top-bar.js narrows the row so its trailing 40px cue starts right after
       a whole tool and covers the next one; the spare width goes before the row, not under the cue. */
    max-width: var(--top-bar-actions-fit-width, none);
    /* A tool scrolled into view by focus stops clear of the leading cue (its width is set by
       top-bar.js) and the 40px trailing cue. top-bar.js settles other scrolling where a tool starts,
       so neither cue sits over part of an icon. (Not CSS scroll snapping: Firefox then jumps the
       focused tool to the row's start on every Tab.) */
    scroll-padding-inline: var(--top-bar-leading-cue-width, 40px) 40px;
}

/* Staff tools may scroll; Log out sits beside them and never scrolls away. */
.top-bar-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.top-bar-account-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 3px 0;
}

.top-bar-responsive .top-bar-actions::-webkit-scrollbar {
    display: none;
}

/* While tools are hidden past the trailing edge, a fade with a small chevron sits at that
   edge (sticky, so it stays put while the row scrolls) and goes away at the end of the row.
   It ignores the pointer; top-bar.js turns a tap on it into a scroll by one tool. */
.top-bar-responsive .top-bar-actions[data-overflow-end]::after {
    content: "\F285" / ""; /* Bootstrap Icons chevron-right; decorative, so no accessible text */
    font-family: 'bootstrap-icons';
    font-size: 14px;
    line-height: 1;
    color: var(--border-focus, #8a5c43);
    position: sticky;
    /* Sticky insets count from inside the row's padding; this puts the cue at the row's very edge. */
    right: calc(-1 * var(--top-bar-actions-padding, 3px));
    /* width as well as flex-basis: Firefox and Safari size the row from it, so the cue never
       changes the row's width when it appears. */
    flex: 0 0 40px;
    width: 40px;
    align-self: stretch;
    margin-left: -40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 2px;
    box-sizing: border-box;
    /* The fade spans the gap and padding before the covered tool's icon; behind the icon and
       chevron the cue is solid, so no part of a hidden icon shows through. */
    background: linear-gradient(to right, transparent, var(--bg-input-area, #f0e9d9) 16px);
    pointer-events: none;
}

/* The same cue mirrored at the leading edge while tools are hidden before the row's start;
   it goes away once the row is scrolled back to its start. top-bar.js sets its width so it ends
   where a tool starts and covers the tool before it whole (3px plus one tool pitch at a resting
   place, 40px at the row's end); a tap on it scrolls back to that tool. */
.top-bar-responsive .top-bar-actions[data-overflow-start]::before {
    content: "\F284" / ""; /* Bootstrap Icons chevron-left; decorative, so no accessible text */
    font-family: 'bootstrap-icons';
    font-size: 14px;
    line-height: 1;
    color: var(--border-focus, #8a5c43);
    position: sticky;
    left: calc(-1 * var(--top-bar-actions-padding, 3px));
    z-index: 1;
    flex: 0 0 var(--top-bar-leading-cue-width, 40px);
    width: var(--top-bar-leading-cue-width, 40px);
    align-self: stretch;
    /* Takes no room: the negative margin also absorbs the row gap after it, so the tools
       never shift when the cue appears or changes width. */
    margin-right: calc(-1 * var(--top-bar-leading-cue-width, 40px) - var(--top-bar-actions-gap, 8px));
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 2px;
    box-sizing: border-box;
    /* Mirrors the trailing cue: the fade spans the gap and padding after the covered tool's icon;
       behind the icon and chevron the cue is solid. */
    background: linear-gradient(to left, transparent, var(--bg-input-area, #f0e9d9) 16px);
    pointer-events: none;
}

.top-bar-responsive .top-btn {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
}

.top-bar-compact .top-btn-label {
    display: none;
}

.top-bar-responsive.top-bar-compact .top-btn {
    padding: 8px 12px;
    gap: 0;
}

.top-bar-responsive.top-bar-compact .top-bar-actions {
    --top-bar-actions-gap: 4px;
}

.top-bar-responsive.top-bar-compact .top-bar-nav {
    gap: 4px;
}

/* Medium screens: hide text labels, show only icons */
@media (max-width: 1000px) {
    .top-btn-label {
        display: none;
    }

    .top-btn {
        padding: 8px 12px; /* Reduce padding since no text */
        gap: 0; /* Remove gap since only icon */
    }

    .top-bar-actions {
        --top-bar-actions-gap: 4px; /* Reduce gap between buttons */
    }
}

/* Medium-small screens: hide "Ravani" text first */
@media (max-width: 600px) {
    .top-bar-title {
        display: none;
    }
}

/* Small screens: also hide logo, center remaining buttons */
@media (max-width: 480px) {
    .top-bar-logo {
        display: none;
    }

    .top-bar-brand {
        display: none;
    }

    .top-bar {
        padding: 0 15px; /* Reduce horizontal padding */
        justify-content: center; /* Center buttons when brand is hidden */
    }
}

/* ========================================
   Background Jobs Monitor (Admin Only)
   ======================================== */

.jobs-monitor-pane {
    position: fixed;
    top: 70px;
    right: 20px;
    width: 420px;
    max-height: calc(100vh - 100px);
    background: var(--bg-primary, #fdf8ef);
    border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1100;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: var(--font-body, 'EB Garamond', Georgia, serif);
}

.jobs-monitor-pane.hidden {
    display: none;
}

.jobs-monitor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-secondary, #f5f0e6);
    border-bottom: 1px solid var(--border-primary, #c8b89a);
}

.jobs-monitor-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #3d2914);
}

.jobs-monitor-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-secondary, #666);
    padding: 0;
    line-height: 1;
}

.jobs-monitor-close:hover {
    color: var(--text-primary, #3d2914);
}

.jobs-monitor-content {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
}

/* Summary row */
.jobs-summary {
    margin-bottom: 16px;
}

.jobs-summary .status-row {
    display: flex;
    gap: 16px;
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--bg-secondary, #f5f0e6);
}

.jobs-summary .status-row.status-blocked {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.jobs-summary .status-row.status-ok {
    background: rgba(40, 167, 69, 0.1);
    border: 1px solid rgba(40, 167, 69, 0.2);
}

.jobs-summary .stat {
    font-size: 14px;
}

.jobs-summary .highlight-blocked {
    color: #dc3545;
    font-weight: 600;
}

/* Token budgets section */
.token-budgets {
    margin-bottom: 16px;
}

.token-budgets h4,
.jobs-list h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary, #666);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.budget-row {
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 6px;
    background: var(--bg-secondary, #f5f0e6);
    border: 1px solid transparent;
}

.budget-row.budget-low {
    background: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.3);
}

.budget-row.budget-waiting {
    background: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.3);
}

.budget-name {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--text-primary, #3d2914);
}

.budget-bar {
    height: 6px;
    background: var(--bg-primary, #fdf8ef);
    border-radius: 3px;
    margin-bottom: 6px;
    overflow: hidden;
}

.budget-used {
    height: 100%;
    background: linear-gradient(90deg, #8a5c43, #b5a585);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.budget-details {
    font-size: 12px;
    color: var(--text-secondary, #666);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.budget-available {
    font-size: 13px;
    font-weight: 500;
    margin-top: 4px;
    color: var(--text-primary, #3d2914);
}

.budget-available.low {
    color: #dc3545;
}

.waiting-badge {
    display: inline-block;
    padding: 2px 8px;
    margin-left: 8px;
    background: #dc3545;
    color: white;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

/* Jobs list */
.jobs-list .no-jobs,
.token-budgets .no-data {
    font-size: 13px;
    color: var(--text-secondary, #666);
    font-style: italic;
    padding: 8px 0;
}

.job-row {
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 6px;
    font-size: 13px;
}

.job-row.job-pending {
    background: rgba(108, 117, 125, 0.1);
    border: 1px solid rgba(108, 117, 125, 0.2);
}

.job-row.job-running {
    background: rgba(0, 123, 255, 0.1);
    border: 1px solid rgba(0, 123, 255, 0.2);
}

.job-row.job-blocked_on_tokens,
.job-row.job-blocked {
    background: rgba(255, 193, 7, 0.15);
    border: 1px solid rgba(255, 193, 7, 0.4);
}

.job-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.job-type {
    font-weight: 600;
    color: var(--text-primary, #3d2914);
}

.job-status {
    font-size: 11px;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.1);
}

.job-age {
    font-size: 12px;
    color: var(--text-secondary, #666);
}

.job-user {
    font-size: 12px;
    color: var(--text-secondary, #666);
    margin-bottom: 2px;
}

.job-description {
    font-size: 12px;
    color: var(--text-secondary, #666);
}

.blocked-reason {
    font-size: 11px;
    color: #dc3545;
    margin-top: 4px;
    padding: 4px 8px;
    background: rgba(220, 53, 69, 0.1);
    border-radius: 4px;
}

.error-state {
    color: #dc3545;
    padding: 10px;
    background: rgba(220, 53, 69, 0.1);
    border-radius: 6px;
}

/* Jobs monitor button active state */
#jobs-monitor-btn.active {
    background: var(--bg-secondary, #f5f0e6);
    color: var(--accent-primary, #8a5c43);
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .jobs-monitor-pane {
        width: calc(100% - 20px);
        left: 10px;
        right: 10px;
    }
}

/* ================================================================ */
/* Live Page Change Tracking Styles */
/* ================================================================ */

/* Unsaved Changes Modal */
.unsaved-changes-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.unsaved-changes-modal-content {
    position: relative;
    background: var(--bg-journal, #fdf5e6);
    border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 12px;
    padding: 2rem;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.modal-close-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary, #666);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    line-height: 1;
    transition: color 0.15s ease;
}

.modal-close-btn:hover {
    color: var(--text-primary, #3a2b20);
}

.unsaved-changes-modal-content h3 {
    font-family: var(--font-primary, 'EB Garamond', serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary, #3a2b20);
    margin: 0 0 1rem 0;
}

.unsaved-changes-modal-content p {
    font-size: 1rem;
    color: var(--text-secondary, #666);
    margin: 0 0 1.5rem 0;
    line-height: 1.5;
}

.unsaved-changes-modal-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Unified Live Page Action Buttons */
.live-page-action-btn {
    background: #e8dcc8;
    border: 1px solid #c4b498;
    color: #5d4e37;
    font-size: 16px;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.live-page-action-btn:hover:not(:disabled) {
    background: #ddd0b8;
}

.live-page-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Quiet daily-budget pause line beside Propose maintenance; not a notification. */
.live-page-maintenance-schedule-status {
    align-self: center;
    flex-basis: 100%;
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary, #7a6a52);
}

/* Chat Locked Indicator */
.chat-locked-indicator {
    font-size: 0.85rem;
    color: var(--text-secondary, #888);
    text-align: center;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    margin-bottom: 8px;
}

/* Disabled chat input when page is open */
#chat-input:disabled,
.chat-form textarea:disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Diff View Styles */
.diff-deleted {
    background: rgba(192, 57, 43, 0.25);
    color: #922b21;
    text-decoration: line-through;
    padding: 1px 2px;
    border-radius: 2px;
}

.diff-ai-added {
    background: rgba(241, 196, 15, 0.35);  /* Yellow/gold for colorblind accessibility */
    color: #7d6608;
    padding: 1px 2px;
    border-radius: 2px;
}

.diff-user-added {
    background: rgba(41, 128, 185, 0.25);
    color: #1a5276;
    padding: 1px 2px;
    border-radius: 2px;
}

.diff-unchanged {
    /* Normal styling */
}

/* Editable Diff Editor Container */
.diff-editor-container {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    min-width: 0;        /* Prevent flex/grid overflow */
    position: relative;  /* Contain children */
    overflow: hidden;    /* Prevent expansion beyond bounds */
}

.diff-editor-container.visible {
    display: flex;
}

/* Editable Diff Editor - Word-style track changes */
.diff-editor {
    flex: 1;
    min-height: 200px;
    min-width: 0;        /* Prevent flex/grid overflow */
    padding: 0;          /* CodeMirror handles its own padding */
    background: #fdfcfa;
    border: 1px solid var(--border-dark, #b8a990);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.7;
    overflow: hidden;    /* CodeMirror handles scrolling */
    outline: none;
    color: #3c3c3c;
}

.diff-editor:focus {
    border-color: var(--accent-primary, #8a5c43);
    box-shadow: 0 0 0 2px rgba(138, 92, 67, 0.1);
}

.diff-error {
    padding: 1rem;
    color: #c0392b;
    text-align: center;
}

/* Diff Legend */
.diff-legend {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    background: #f5f0e8;
    border-bottom: 1px solid var(--border-dark, #b8a990);
    flex-wrap: wrap;
}

.diff-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #5d4e37;
}

.diff-legend-color {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.diff-legend-color.diff-deleted {
    background: rgba(192, 57, 43, 0.35);
}

.diff-legend-color.diff-ai-added {
    background: rgba(241, 196, 15, 0.45);  /* Yellow/gold */
}

.diff-legend-color.diff-user-added {
    background: rgba(41, 128, 185, 0.35);
}

/* CodeMirror Diff Editor Styles */
.diff-editor .cm-editor {
    height: 100%;
    width: 100%;
    max-width: 100%;
    background: #fdfcfa;
    border: none;  /* Container already has border */
}

.diff-editor .cm-scroller {
    font-family: 'EB Garamond', serif;
    font-size: 0.95rem;
    line-height: 1.7;
    overflow: auto !important;  /* Ensure scrolling within bounds */
}

.diff-editor .cm-content {
    padding: 1rem;
    caret-color: #3c3c3c;
}

.diff-editor .cm-line {
    padding: 0;
}

.diff-editor .cm-focused {
    outline: none;
}

.diff-editor .cm-focused .cm-cursor {
    border-left-color: #3c3c3c;
}

.diff-editor .cm-selectionBackground,
.diff-editor .cm-focused .cm-selectionBackground,
.diff-editor ::selection {
    background: rgba(138, 92, 67, 0.2) !important;
}

/* Diff marks inside CodeMirror */
.diff-editor .cm-line .diff-deleted {
    background: rgba(192, 57, 43, 0.25);
    color: #922b21;
    text-decoration: line-through;
    padding: 1px 2px;
    border-radius: 2px;
}

.diff-editor .cm-line .diff-ai-added {
    background: rgba(241, 196, 15, 0.35);
    color: #7d6608;
    padding: 1px 2px;
    border-radius: 2px;
}

.diff-editor .cm-line .diff-user-added {
    background: rgba(41, 128, 185, 0.25);
    color: #1a5276;
    padding: 1px 2px;
    border-radius: 2px;
}

/* Simple Editor Container (Hide Changes mode) */
.simple-editor-container {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 200px;
    min-width: 0;        /* Prevent flex/grid overflow */
    max-width: 100%;
    overflow: hidden;    /* Prevent expansion beyond bounds */
}

.simple-editor-container.visible {
    display: flex;
}

.simple-editor {
    flex: 1;
    min-height: 200px;
    min-width: 0;        /* Prevent flex/grid overflow */
    max-width: 100%;
    overflow: hidden;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    font-family: 'EB Garamond', serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #3c3c3c;
}

.simple-editor:focus-within {
    border-color: var(--accent-primary, #8a5c43);
    box-shadow: 0 0 0 2px rgba(138, 92, 67, 0.1);
}

/* CodeMirror Simple Editor Styles */
.simple-editor .cm-editor {
    height: 100%;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border: none;  /* Container already has border */
}

.simple-editor .cm-scroller {
    font-family: 'EB Garamond', serif;
    font-size: 0.95rem;
    line-height: 1.7;
    overflow: auto !important;  /* Ensure scrolling within bounds */
}

.simple-editor .cm-content {
    padding: 1rem;
    caret-color: #3c3c3c;
}

.simple-editor .cm-line {
    padding: 0;
}

.simple-editor .cm-focused {
    outline: none;
}

.simple-editor .cm-focused .cm-cursor {
    border-left-color: #3c3c3c;
}

.simple-editor .cm-selectionBackground,
.simple-editor .cm-focused .cm-selectionBackground,
.simple-editor ::selection {
    background: rgba(138, 92, 67, 0.2) !important;
}

/* ===========================================
   Markdown WYSIWYG Styles for Live Pages
   =========================================== */

/* Header styling - scaled sizes for visual hierarchy */
.md-header {
    display: block;
    font-weight: 600;
    line-height: 1.3;
    color: #2c3e50;
}

.md-header-1 { font-size: 1.8em; margin: 0.4em 0; }
.md-header-2 { font-size: 1.5em; margin: 0.35em 0; }
.md-header-3 { font-size: 1.3em; margin: 0.3em 0; }
.md-header-4 { font-size: 1.15em; margin: 0.25em 0; }
.md-header-5 { font-size: 1.05em; margin: 0.2em 0; }
.md-header-6 { font-size: 1em; margin: 0.15em 0; }

/* Bold and italic */
.md-bold {
    font-weight: 700;
}

.md-italic {
    font-style: italic;
}

/* Links */
.md-link {
    color: #2980b9;
    text-decoration: underline;
    text-decoration-color: rgba(41, 128, 185, 0.4);
    text-underline-offset: 2px;
}

.md-link:hover {
    text-decoration-color: rgba(41, 128, 185, 0.8);
}

/* List styling */
.md-list-line {
    padding-left: 1.5em !important;
    position: relative;
}

.md-list-item {
    display: list-item;
}

/* Bullet/number shown via CSS ::before when list marker is hidden */
.md-list-bullet::before {
    content: '\2022';  /* bullet character */
    position: absolute;
    left: 0;
    width: 1.5em;
    text-align: center;
    color: #7f8c8d;
    font-weight: 500;
}

.md-list-ordered::before {
    position: absolute;
    left: 0;
    width: 1.5em;
    text-align: center;
    color: #7f8c8d;
    font-weight: 500;
}

/* Dynamic ordered list numbering via CSS counter simulation */
/* We use data attributes set via JS for the index */
.md-list-index-1::before { content: '1.'; }
.md-list-index-2::before { content: '2.'; }
.md-list-index-3::before { content: '3.'; }
.md-list-index-4::before { content: '4.'; }
.md-list-index-5::before { content: '5.'; }
.md-list-index-6::before { content: '6.'; }
.md-list-index-7::before { content: '7.'; }
.md-list-index-8::before { content: '8.'; }
.md-list-index-9::before { content: '9.'; }
.md-list-index-10::before { content: '10.'; }

/* Bullet widget for lists (legacy, may still be used when cursor is on line) */
.md-bullet-widget {
    display: inline-block;
    width: 1.5em;
    margin-left: -1.5em;
    text-align: center;
    color: #7f8c8d;
    font-weight: 500;
}

/* Combined styles: markdown + diff highlighting */
/* Ensure markdown formatting applies alongside diff colors */
.diff-ai-added.md-bold,
.diff-user-added.md-bold {
    font-weight: 700;
}

.diff-ai-added.md-italic,
.diff-user-added.md-italic {
    font-style: italic;
}

.diff-ai-added.md-header,
.diff-user-added.md-header {
    font-weight: 600;
}

.diff-ai-added.md-link,
.diff-user-added.md-link {
    text-decoration: underline;
}

/* Syntax characters when revealed (cursor on line) */
.md-syntax-visible {
    color: #95a5a6;
    font-weight: normal;
    font-style: normal;
}

/* Line being edited - show monospace to indicate "edit mode" */
.md-editing {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', monospace;
    font-size: 0.85em;  /* Slightly larger than body text helps differentiate edit mode */
    background-color: rgba(52, 152, 219, 0.05);
}

/* Horizontal rule - rendered as a styled line */
.md-hr-line {
    position: relative;
}

.md-hr-line::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background-color: #95a5a6;
}

/* Hidden markdown syntax (cursor can still traverse) */
/* Uses font-size:0 to collapse characters while keeping in DOM */
.md-hidden {
    font-size: 0;
    color: transparent;
    user-select: none;
}

/* Hidden list markers */
.md-list-mark-hidden {
    font-size: 0;
    color: transparent;
    user-select: none;
}

/* ===========================================
   Deep Research Dialog & Progress Styles
   =========================================== */

/* Inline "Start with Deep Research" panel on a page created with "+ New": between the
   Page Content heading and the body, never over it (Council 2026-10-21). */
.live-page-deep-research-offer {
    flex: none; /* never shrink onto the body in the stacked flex layout */
    margin: 0 0 12px;
    padding: 16px;
    border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 10px;
    background: var(--card-bg, #f5f0e8);
}
.live-page-deep-research-offer[hidden] { display: none; }
/* With the panel above it, the body keeps a usable height instead of shrinking under the panel;
   the editor panel scrolls when the screen is short. */
.live-page-form-right-column .journal-form-group:has(> .live-page-deep-research-offer:not([hidden])) { flex: 1 0 auto; }
.live-page-form-right-column .live-page-deep-research-offer:not([hidden]) + .textarea-wrapper { flex: 1 0 15rem; }
.live-page-deep-research-offer h3 {
    margin: 0 0 8px;
    color: var(--primary-text, #333);
    font-size: 1.15em;
    font-weight: 600;
}
.live-page-deep-research-offer-text { margin: 0 0 12px; color: var(--text-secondary, #5c4b3f); line-height: 1.4; }
.live-page-deep-research-offer .btn { width: 100%; }
.live-page-deep-research-offer-hint { margin: 8px 0 0; color: var(--text-secondary, #5c4b3f); font-size: .9em; font-style: italic; }
/* With text in the body: one line, a secondary button that asks before replacing it */
.live-page-deep-research-offer-compact { padding: 8px; }
.live-page-deep-research-offer-compact h3,
.live-page-deep-research-offer-compact .live-page-deep-research-offer-text { display: none; }
.live-page-deep-research-offer-compact .live-page-deep-research-offer-hint { margin-top: 6px; }
@media (max-width: 768px) {
    .live-page-deep-research-offer .btn { min-height: 44px; }
}

/* Container class makes content column a positioning context */
.deep-research-overlay-container {
    position: relative;
}

/* Blur effect for content column when dialog/progress is showing */
.deep-research-blurred > *:not(.deep-research-dialog-overlay):not(#research-progress-panel) {
    filter: blur(3px);
    opacity: 0.6;
    pointer-events: none;
}

/* Button disabled during deep research */
.deep-research-btn-disabled {
    opacity: 0.5 !important;
    pointer-events: none !important;
}

/* Deep Research Dialog - Z-overlay version (hovers over content area) */
.deep-research-dialog-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    width: 90%;
    max-width: 400px;
    animation: fadeIn 0.2s ease;
}

.deep-research-dialog-overlay .deep-research-dialog-content {
    background: var(--card-bg, #f5f0e8);
    border: 1px solid rgba(139, 90, 43, 0.3);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.deep-research-dialog-content h3 {
    margin: 0 0 12px 0;
    color: var(--primary-text, #333);
    font-size: 1.15em;
    font-weight: 600;
}

.deep-research-dialog-content p {
    color: var(--secondary-text, #666);
    margin: 0 0 16px 0;
    font-size: 0.9em;
    line-height: 1.5;
}

.deep-research-warning {
    color: #c0392b !important;
    font-weight: 500;
}

.deep-research-requirement {
    color: #8b5a2b !important;
    font-weight: 500;
    background: rgba(139, 90, 43, 0.1);
    padding: 8px 12px;
    border-radius: 6px;
}

.deep-research-dialog-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 8px;
}

.deep-research-dialog-buttons .btn {
    min-width: 100px;
    padding: 10px 20px;
}


/* Generate button disabled state */
.deep-research-dialog-buttons .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Progress indicator (styled like dialog - shows as overlay) */
.research-progress-content {
    background: var(--card-bg, #f5f0e8) !important;
}

.research-progress-content h3 {
    color: var(--primary-text, #333);
    margin-bottom: 8px;
}

.research-progress-content .research-status-text {
    color: var(--secondary-text, #666);
    font-size: 0.9em;
    margin-bottom: 16px;
}

.research-progress-content .research-progress-bar {
    width: 100%;
    max-width: 280px;
    height: 6px;
    background: rgba(139, 90, 43, 0.15);
    border-radius: 3px;
    overflow: hidden;
    margin: 0 auto 8px;
}

.research-progress-content .research-progress-percent {
    color: var(--text-secondary, #5c4b3f);
    font-size: 0.85em;
    margin: 0 0 16px;
    font-variant-numeric: tabular-nums;
}

.research-progress-content .research-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #8b5a2b, #a67c52);
    transition: width 0.3s ease;
}

/* Cancel button in progress overlay */
.research-progress-content .btn-secondary {
    background: #8b7355 !important;
    border: 1px solid #6b5a42 !important;
    color: #ffffff !important;
    min-width: 100px;
    padding: 10px 20px;
}

.research-progress-content .btn-secondary:hover {
    background: #7a6548 !important;
}

/* Global Research Overlay (bottom-right - visible when panel is closed) */
.research-global-overlay {
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 9999;
    background: var(--card-bg, #f5f0e8);
    border: 1px solid rgba(139, 90, 43, 0.25);
    border-left: 3px solid #8b5a2b;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    padding: 12px 16px;
    animation: slideInRight 0.3s ease;
}

.research-global-overlay-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.research-global-overlay .research-spinner-small {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 2px solid rgba(139, 90, 43, 0.2);
    border-top-color: #8b5a2b;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.research-global-overlay .research-overlay-text {
    color: var(--primary-text, #333);
    font-size: 0.8em;
    text-align: left;
    line-height: 1.35;
}

.research-global-overlay .research-overlay-text strong {
    color: #5a3a22;
}

.research-global-overlay .btn {
    padding: 4px 10px;
    font-size: 0.75em;
    flex-shrink: 0;
}

/* =============================================================================
   Progress Stack Container - Unified stacking for multiple progress indicators
   ============================================================================= */

.progress-stack-container {
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;  /* Newest at bottom */
    gap: 10px;
    max-height: calc(100vh - 160px);
    pointer-events: none;
}

.progress-stack-container > * {
    pointer-events: auto;
}

/* Individual Progress Indicator */
/* A card hidden while its page's editor overlay shows (Council sitting 34) takes no space. */
.progress-indicator[hidden] { display: none !important; }

.progress-indicator {
    background: var(--card-bg, #f5f0e8);
    border: 1px solid rgba(139, 90, 43, 0.25);
    border-left: 3px solid #8b5a2b;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    padding: 12px 16px;
    animation: slideInRight 0.3s ease;
    min-width: 280px;
    max-width: 360px;
}

.progress-indicator-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.progress-indicator-maintenance {
    box-sizing: border-box;
    width: min(360px, calc(100vw - 40px));
    min-width: 0;
    max-width: none;
}

.progress-indicator-maintenance .progress-indicator-content {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
}

.progress-indicator-maintenance .progress-indicator-text {
    overflow-wrap: anywhere;
}

.progress-maintenance-actions {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.progress-indicator .progress-spinner-small {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 2px solid rgba(139, 90, 43, 0.2);
    border-top-color: #8b5a2b;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Thinking indicator for Claude reasoning traces */
/* Thinking indicator — disclosure-style element for Claude reasoning traces */
.thinking-indicator {
    display: flex;
    flex-direction: column;
    padding: 4px 15px 3px; /* Whole pixels to avoid sub-pixel rounding. 4+3=7px = same as 3.5+3.5 */
    margin-left: 0;
    margin-bottom: 15px; /* Match .typing-indicator margin-bottom */
    color: #8b5a2b;
    font-style: italic;
    font-size: 0.9em;
    transition: opacity 0.3s ease;
}

.thinking-indicator .thinking-header {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.thinking-indicator .progress-spinner-small {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 2px solid rgba(139, 90, 43, 0.2);
    border-top-color: #8b5a2b;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.thinking-indicator .thinking-summary {
    max-width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.thinking-indicator .thinking-content {
    display: none;
    margin-top: 6px;
    padding: 8px 10px;
    background: rgba(139, 90, 43, 0.05);
    border-radius: 6px;
    font-size: 0.85em;
    line-height: 1.5;
    white-space: pre-wrap;
    max-height: 200px;
    overflow-y: auto;
}

.thinking-indicator.expanded .thinking-content {
    display: block;
}

.thinking-indicator.removing {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.streaming-search-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid rgba(90, 69, 53, 0.14);
    color: rgba(90, 69, 53, 0.82);
    font-size: 0.84em;
    font-style: normal;
    line-height: 1.3;
    min-width: 0;
}

.streaming-search-status-dot {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    margin-left: 2px;
    margin-right: 2px;
    border-radius: 50%;
    background: #8b5a2b;
    transform: translateY(-1px);
    animation: searchStatusPulse 1.2s ease-in-out infinite;
}

.streaming-search-status-text {
    line-height: 1.3;
    flex-shrink: 0;
}

.thinking-trace-separator {
    flex-shrink: 0;
    margin: 0 6px 0 4px;
    color: rgba(90, 69, 53, 0.4);
}

.thinking-trace-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(90, 69, 53, 0.55);
    font-style: italic;
}

@keyframes searchStatusPulse {
    0%, 100% {
        opacity: 0.35;
        transform: translateY(-1px) scale(0.92);
    }
    50% {
        opacity: 1;
        transform: translateY(-1px) scale(1);
    }
}

.progress-indicator .progress-indicator-text {
    color: var(--primary-text, #333);
    font-size: 0.8em;
    text-align: left;
    line-height: 1.35;
    flex: 1;
}

.progress-indicator .progress-indicator-text strong {
    color: #5a3a22;
}

.progress-indicator .btn {
    padding: 4px 10px;
    font-size: 0.75em;
    flex-shrink: 0;
}

/* Overflow badge for stacked indicators */
.progress-overflow-badge {
    background: rgba(139, 90, 43, 0.15);
    border: 1px solid rgba(139, 90, 43, 0.3);
    border-radius: 12px;
    padding: 4px 12px;
    font-size: 0.75em;
    color: #5a3a22;
    text-align: center;
    align-self: flex-end;
    animation: fadeIn 0.3s ease;
}

/* Slide-out animation for indicator removal */
.progress-indicator.removing {
    animation: slideOutRight 0.3s ease forwards;
}

/* =============================================================================
   Rewrite In-Panel Progress (mirrors deep research styling)
   ============================================================================= */

.rewrite-overlay-container {
    position: relative;
}

.rewrite-blurred > *:not(.rewrite-dialog-overlay):not(#rewrite-progress-panel) {
    filter: blur(3px);
    opacity: 0.6;
    pointer-events: none;
}

.rewrite-dialog-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.rewrite-dialog-content {
    background: var(--card-bg, #f5f0e8);
    border: 1px solid rgba(139, 90, 43, 0.25);
    border-radius: 12px;
    padding: 24px 32px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.rewrite-dialog-content h3 {
    color: var(--primary-text, #333);
    margin: 0 0 15px 0;
    font-size: 1.1em;
}

.rewrite-status-text {
    color: #5a3a22;
    margin-bottom: 15px;
    font-size: 0.9em;
}

.rewrite-progress-bar {
    width: 200px;
    height: 6px;
    background: rgba(139, 90, 43, 0.15);
    border-radius: 3px;
    margin: 0 auto 15px;
    overflow: hidden;
}

.rewrite-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #8b5a2b, #a67c52);
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Animations */

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(20px);
    }
}

/* Animations */
@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ================================
   RECONNECTION UI ADDITIONS
   (Base .connection-banner styles are above ~line 5827)
   ================================ */

/* Spinner for reconnecting banner — matches warm amber text color */
.banner-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(107, 79, 46, 0.3);
    border-top-color: #6b4f2e;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Retry button for disconnected banner — matches dusty rose palette */
.banner-retry-btn {
    background-color: rgba(122, 50, 38, 0.1);
    color: #7a3226;
    border: 1px solid #d9a99e;
    padding: 2px 10px;
    margin-left: 4px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-primary, 'EB Garamond', serif);
    font-size: 0.8rem;
    line-height: 1.4;
    transition: background-color 0.2s ease;
}

.banner-retry-btn:hover {
    background-color: rgba(122, 50, 38, 0.2);
}

/* ================================
   CHAT DISABLED STATE
   ================================ */

#chat-input-area.chat-disabled {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

#chat-input-area.chat-disabled::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(128, 128, 128, 0.1);
    z-index: 10;
    border-radius: inherit;
}

/* Disabled input styling */
#chat-message-input:disabled,
#chat-message-submit:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Mobile adjustments for reconnection UI */
@media (max-width: 768px) {
    .banner-spinner {
        width: 14px;
        height: 14px;
    }

    .banner-retry-btn {
        padding: 3px 10px;
        font-size: 0.8rem;
    }
}
/* Remote pages retain their source identity and use the shared reader. */
.notion-collection {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-primary, #c8b89a);
}
.notion-collection h3 { margin: 0 0 8px; }
.notion-collection > p, .notion-reader-location, .notion-reader-range {
    font-size: 0.9rem;
    color: var(--text-secondary, #675748);
}
.notion-collection-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 12px 0;
    padding: 12px;
    border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 10px;
    background: var(--card-bg, #f5f0e8);
}
.notion-collection-open {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 0;
    color: inherit;
    text-align: left;
    font: inherit;
    min-height: 44px;
    cursor: pointer;
    overflow-wrap: anywhere;
}
.notion-source-badge {
    display: inline-block;
    flex-shrink: 0;
    border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 5px;
    padding: 3px 7px;
    font: 600 0.75rem system-ui, sans-serif;
    color: var(--text-primary, #3a2b20);
}
.notion-collection-row > a { font-size: 0.85rem; min-height: 44px; align-content: center; }
.notion-chat-reference {
    font: inherit;
    color: var(--text-primary, #3a2b20);
    background: var(--card-bg, #f5f0e8);
    border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 6px;
    padding: 3px 8px;
    min-height: 44px;
    cursor: pointer;
    overflow-wrap: anywhere;
}
.notion-reader {
    width: min(1080px, calc(100vw - 40px));
    max-height: calc(100dvh - 40px);
    box-sizing: border-box;
    padding: 24px;
    border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 16px;
    background: var(--card-bg, #f5f0e8);
    color: var(--text-primary, #3a2b20);
    box-shadow: 0 18px 60px rgb(30 20 10 / 25%);
}
.notion-reader::backdrop { background: rgb(25 20 15 / 40%); }
.notion-reader header { display: flex; align-items: center; gap: 12px; }
.notion-reader h2 { margin: 0; flex: 1; overflow-wrap: anywhere; font-size: 1.6rem; }
.notion-reader h3 { margin-top: 0; font-size: 1.1rem; }
.notion-reader-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.notion-reader-tools a { min-height: 44px; align-content: center; }
.notion-reader a, .notion-collection a { color: var(--button-bg, #7a5c43); }
.notion-reader [role="alert"] { color: #7a3226; }
.notion-reader-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; margin-top: 18px; }
.notion-reader nav { border-right: 1px solid var(--border-primary, #c8b89a); padding-right: 16px; }
.notion-reader nav button, .notion-reader-matches button {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    padding: 8px;
    margin-bottom: 4px;
    min-height: 44px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    color: inherit;
    cursor: pointer;
    overflow-wrap: anywhere;
}
.notion-reader nav button:hover, .notion-reader-matches button:hover, .notion-collection-open:hover {
    background: var(--border-primary, #c8b89a);
}
.notion-reader-content {
    overflow-wrap: anywhere;
    font: 1.06rem/1.6 var(--font-primary, 'EB Garamond', serif);
    margin: 16px 0;
    padding: 16px;
    border: 1px solid var(--border-primary, #c8b89a);
    border-radius: 8px;
    min-height: 100px;
    max-height: 48dvh;
    overflow-y: auto;
}
.notion-reader-content pre { white-space: pre-wrap; font: .9em/1.5 monospace; }
.notion-reader-content table { border-collapse: collapse; width: 100%; }
.notion-reader-content th, .notion-reader-content td { border: 1px solid var(--border-primary, #c8b89a); padding: 6px 10px; }
.notion-reader-content blockquote { border-left: 3px solid var(--border-primary, #c8b89a); margin-left: 0; padding-left: 16px; }
.notion-reader-content > :first-child { margin-top: 0; }
.notion-reader-find { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.notion-reader-find label { display: grid; gap: 4px; flex: 1; min-width: 160px; }
.notion-reader-find input { min-height: 44px; box-sizing: border-box; font: inherit; width: 100%; }
.notion-reader-find small { width: 100%; }
.notion-reader button { min-height: 44px; }
.notion-reader [hidden] { display: none; }
.notion-reader button:focus-visible, .notion-reader a:focus-visible, .notion-reader-content:focus-visible,
.notion-collection button:focus-visible, .notion-chat-reference:focus-visible {
    outline: 2px solid var(--button-bg, #7a5c43);
    outline-offset: 3px;
}
@media (max-width: 650px) {
    .notion-reader { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 16px; }
    .notion-reader-layout { grid-template-columns: 1fr; gap: 12px; }
    .notion-reader nav { border-right: 0; border-bottom: 1px solid var(--border-primary, #c8b89a); padding: 0 0 8px; max-height: 160px; overflow: auto; }
    .notion-reader header { flex-wrap: wrap; }
}

/* Conversation evidence stays separate from the editable Live Page. */
.conversation-source-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 24px;
  border: 1px solid var(--border-color, #d8cfc1);
  border-radius: 12px;
  background: var(--bg-primary, #fffdf8);
  color: var(--text-primary, #302c26);
}
.conversation-source-dialog::backdrop { background: rgb(0 0 0 / 40%); }
.conversation-source-dialog h2 { font-size: 1.25rem; }
.conversation-source-dialog h3 { font-size: 1rem; margin: 0 0 4px; }
.conversation-source-dialog .btn { min-height: 44px; margin: 4px 8px 4px 0; }
.conversation-source-message { border-top: 1px solid #d8cfc1; padding: 16px 0; }
.conversation-source-message pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin-top: 8px; }
.conversation-source-message time { font-size: 0.85rem; }
.conversation-citation { cursor: pointer; }
.conversation-citation:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Proposal comparisons preserve the complete source in one synchronized scroll area. */
.live-page-maintenance-card > h3 { margin: 0 0 14px; font-family: var(--font-decorative, 'Funnel Sans', sans-serif); font-size: 1.1rem; font-weight: 600; }
.live-page-maintenance-card .approval-actions { justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--border-primary, #c8b89a); padding-top: 14px; }
.live-page-maintenance-card .approval-actions button { min-height: 44px; }
.live-page-maintenance-card .approval-yes { order: 1; }
.live-page-maintenance-details { min-width: 0; color: var(--text-primary, #3a2b20); }
.live-page-review-prose { line-height: 1.5; overflow-wrap: anywhere; }
.live-page-review-prose > :first-child { margin-top: 0; }
.live-page-review-prose > :last-child { margin-bottom: 0; }
.live-page-review-overview { margin-bottom: 12px; }
.live-page-maintenance-card:not([data-status="pending"]) .live-page-review-pending-note,
.live-page-update-card:not([data-status="pending"]) .live-page-review-pending-note { display: none; }
.live-page-review-note { color: var(--text-secondary, #6b6055); font-size: .9em; line-height: 1.4; margin: 8px 0 16px; }
.live-page-review-page { margin-block: 20px; border: 1px solid var(--border-primary, #c8b89a); border-radius: 10px; overflow: hidden; }
.live-page-review-page > summary { padding: 14px 16px; background: var(--card-bg, #f5f0e8); cursor: pointer; }
.live-page-review-eyebrow { font-size: .75em; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary, #6b6055); margin-right: 6px; }
.live-page-review-page-title { font-weight: 600; overflow-wrap: anywhere; }
.live-page-comparison { min-width: 0; container: live-page-comparison / inline-size; }
.live-page-comparison-field { border-top: 1px solid var(--border-primary, #c8b89a); }
.live-page-comparison-field > summary { cursor: pointer; font-size: .9em; font-weight: 600; padding: 10px 16px; }
.live-page-comparison-columns, .live-page-diff-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.live-page-diff-headings { background: var(--card-bg, #f5f0e8); border-block: 1px solid var(--border-primary, #c8b89a); font-size: .8em; font-weight: 600; }
.live-page-diff-headings > span { padding: 8px 14px; }
/* On short screens the comparison scroller leaves room for the card's heading and actions. */
.live-page-diff-viewport { max-height: min(26rem, 45vh); max-height: min(26rem, 45dvh); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; background: var(--bg-primary, #fffdf8); }
.live-page-diff-cell { display: flex; min-width: 0; padding: 0 12px 0 6px; }
.live-page-diff-cell + .live-page-diff-cell { border-left: 1px solid var(--border-primary, #c8b89a); }
.live-page-diff-cell pre { margin: 0; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4; font: .82em/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; color: inherit; background: transparent; padding: 0; border: 0; border-radius: 0; }
.live-page-diff-marker { flex: 0 0 1.25em; font: .82em/1.65 ui-monospace, monospace; user-select: none; }
.live-page-diff-before { background: #fff0ed; color: #672d28; }
.live-page-diff-after { background: #edf6eb; color: #254b28; }
.live-page-diff-cell del { background: #f7d1c9; text-decoration: line-through; }
.live-page-diff-cell ins { background: #cbe6c6; text-decoration: underline; }
.live-page-diff-empty { background: repeating-linear-gradient(135deg, transparent, transparent 5px, #8888880a 5px, #8888880a 10px); }
/* A new page has no current text: one column of proposed text, without +/- markers or an empty Current side. */
.live-page-comparison-new .live-page-comparison-columns, .live-page-comparison-new .live-page-diff-row { grid-template-columns: minmax(0, 1fr); }
.live-page-comparison-new .live-page-diff-cell { padding-left: 14px; }
.live-page-comparison-new .live-page-diff-marker { display: none; }
.live-page-maintenance-concerns { border-left: 3px solid var(--border-primary, #c8b89a); padding: 10px 14px; background: var(--card-bg, #f5f0e8); margin-block: 16px; }
.live-page-maintenance-concerns h4, .live-page-review-removals h4 { margin: 0 0 8px; font-size: 1em; }
.live-page-review-removals { border-top: 1px solid var(--border-primary, #c8b89a); padding-top: 14px; }
.live-page-review-removals ul { margin: 0; padding-left: 1.25em; }
.live-page-review-removals li + li { margin-top: 10px; }
.live-page-diff-viewport:focus-visible, .live-page-maintenance-details summary:focus-visible { outline: 2px solid var(--button-bg, #7a5c43); outline-offset: -2px; }
.live-page-history-dialog button { margin-block: .5rem; }
.live-page-history-dialog { width: min(70rem, 95vw); }
/* Stack Current above Proposed whenever the comparison itself is narrow: on a phone, and beside an open side
   panel on a wider screen, where two columns would wrap every few words. */
@container live-page-comparison (max-width: 640px) {
  .live-page-comparison:not(.live-page-comparison-new) .live-page-diff-headings { display: none; }
  /* A comparison from the hidden empty creation version keeps naming its From side (MINI EXP-W-LP-4). */
  .live-page-comparison.live-page-comparison-from-empty .live-page-diff-headings { display: grid; grid-template-columns: minmax(0, 1fr); }
  .live-page-comparison.live-page-comparison-from-empty .live-page-diff-headings > span + span { display: none; }
  .live-page-diff-row { grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--border-primary, #c8b89a); }
  .live-page-diff-cell { flex-wrap: wrap; padding-block: 4px; }
  .live-page-diff-cell::before { content: attr(data-side); width: 100%; padding-left: 1.25em; font: 600 .7em/1.5 system-ui, sans-serif; }
  .live-page-diff-cell + .live-page-diff-cell { border-left: 0; }
  .live-page-diff-cell pre { flex: 1; }
  .live-page-diff-empty { display: none; }
  .live-page-diff-unchanged .live-page-diff-cell + .live-page-diff-cell { display: none; }
  .live-page-diff-unchanged .live-page-diff-cell::before { content: 'Unchanged'; }
  .live-page-diff-blank .live-page-diff-cell::before { display: none; }
  .live-page-comparison-new .live-page-diff-row { border-bottom: 0; }
  .live-page-comparison-new .live-page-diff-cell { padding-block: 0; }
  .live-page-comparison-new .live-page-diff-cell::before { display: none; }
}

/* Markdown task items ("- [ ]", "- [x]") render as read-only checkboxes wherever Markdown is shown. */
.contains-task-list { padding-left: 1.25em; }
.task-list-item { list-style: none; }
/* Drawn by hand: browsers fade disabled checkboxes until checked and unchecked look alike. */
.task-list-item-checkbox { appearance: none; position: relative; display: inline-block; box-sizing: border-box;
  width: 1em; height: 1em; margin: 0 .5em 0 -1.4em; vertical-align: -0.15em; border: 1.5px solid var(--text-secondary, #6b6055);
  border-radius: 3px; background: var(--bg-primary, #fffdf8); opacity: 1; }
.task-list-item-checkbox:checked { background: var(--button-bg, #7a5c43); border-color: var(--button-bg, #7a5c43); }
.task-list-item-checkbox:checked::after { content: ''; position: absolute; left: .28em; top: .06em; width: .26em; height: .52em;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Timed toasts (top right, 20px in) cover the top bar's tool row and panel headers for a few
   seconds, so at every width a control-free one lets taps through to the toolbar or close
   button beneath it; a toast holding a control keeps its taps. */
#notification-toast-stack > .notification-timed {
    pointer-events: auto;
}

#notification-toast-stack > .notification-timed:not(:has(a[href], button, input, select, textarea, [tabindex], [role="button"], [contenteditable="true"])) {
    pointer-events: none;
}

/* Notices that require dismissal use the app's card palette, not toast colors. */
.notification-persistent {
  --notification-accent: #7a5c43;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2000;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 44px;
  align-items: start;
  gap: 12px;
  box-sizing: border-box;
  width: min(42rem, calc(100vw - 40px));
  padding: 16px 12px 16px 16px;
  border: 1px solid var(--border-primary, #c8b89a);
  border-left: 4px solid var(--notification-accent);
  border-radius: 10px;
  background: var(--card-bg, #f5f0e8);
  color: var(--text-primary, #3a2b20);
  box-shadow: 0 6px 24px rgba(58, 43, 32, .18);
  font-family: var(--font-primary, 'EB Garamond', serif);
  font-size: 1rem;
  line-height: 1.45;
}
.notification-persistent.notification-error { --notification-accent: #8a4134; }
.notification-persistent.notification-warning { --notification-accent: #805b20; }
.notification-persistent.notification-success { --notification-accent: #416443; }
.notification-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 10px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--notification-accent);
  font-weight: 700;
}
.notification-message {
  min-width: 0;
  max-height: min(24rem, calc(100dvh - 80px));
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  padding: 9px 4px;
}
.notification-dismiss {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border-primary, #c8b89a);
  border-radius: 6px;
  background: transparent;
  color: var(--text-primary, #3a2b20);
  font: 1.5rem/1 var(--font-primary, 'EB Garamond', serif);
  cursor: pointer;
}
.notification-dismiss:hover { background: #e9dfcf; }
.notification-dismiss:disabled { cursor: progress; opacity: .6; }
/* Maintenance outcomes sit in the progress stack, clear of the top bar. */
/* Compact like the progress card it replaces, keeping the 44-pixel dismiss target. */
.progress-stack-container > .notification-persistent {
  position: static;
  width: min(360px, calc(100vw - 40px));
  gap: 10px;
  padding: 10px 10px 10px 12px;
  line-height: 1.35;
  animation: slideInRight 0.3s ease;
}
.progress-stack-container > .notification-persistent .notification-message {
  max-height: min(12rem, 30dvh);
  padding: 4px 2px;
}
.progress-stack-container > .notification-persistent .notification-icon {
  margin-top: 4px;
}
/* Panels that scroll to the viewport bottom reserve the active stack's height
   so their last controls can move above any progress card or notice
   (every notice adopted by the stack carries .progress-stack-notice). */
body:has(#progress-stack-container .progress-indicator:not([hidden]), #progress-stack-container .progress-stack-notice) .app-sidebar-body {
  padding-bottom: calc(1.5rem + var(--maintenance-stack-reserve, 0px));
}
body:has(#progress-stack-container .progress-indicator:not([hidden]), #progress-stack-container .progress-stack-notice) .live-page-edit-panel[data-mode="edit"] .live-page-edit-panel-body {
  padding-bottom: calc(1rem + var(--maintenance-stack-reserve, 0px));
}
/* Beside an open side panel the cards narrow to the room left of it (280-360px). */
.progress-stack-container.progress-stack-beside-panel > .progress-indicator {
  box-sizing: border-box;
  max-width: var(--progress-stack-width, 360px);
}
.progress-stack-container.progress-stack-beside-panel > .notification-persistent {
  box-sizing: border-box;
  width: var(--progress-stack-width, 360px);
}
/* A bounded stack scrolls vertically; padding offset by margin keeps card shadows visible. */
.progress-stack-container.progress-stack-bounded {
  overflow: hidden auto;
  overscroll-behavior: contain;
  padding: 8px;
  margin: -8px;
}
.progress-stack-container.progress-stack-overflowing { pointer-events: auto; }
/* Open modals keep their footer actions above progress cards and notices. */
body:has(.modal-overlay.show, .unsaved-changes-modal) .progress-stack-container { z-index: 1999; }
/* A paused Live Page editor's notice sits in the editor, above its fields, so it never covers them. */
#edit-panel-body > .live-page-paused-notice {
  position: static;
  scroll-margin-top: 16px;
  width: auto;
  margin: 0 0 16px;
  box-shadow: none;
  z-index: auto;
}
/* A paused Live Page editor's notice keeps its Reload page button on its own row, below the text. */
.live-page-paused-notice .live-page-paused-reload {
  grid-column: 2;
  justify-self: start;
}
.notification-dismiss:focus-visible, .notification-message:focus-visible {
  outline: 2px solid var(--button-bg, #7a5c43);
  outline-offset: 2px;
}

/* Saved maintenance status and immutable body counts. */
.live-page-maintenance-result { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.live-page-maintenance-result > p { margin: 0; }
.live-page-result-pages { display: flex; flex-wrap: wrap; gap: 4px 14px; flex: 1 1 220px; }
.live-page-result-link { border: 0; padding: 8px 0; min-height: 44px; background: transparent; color: var(--text-primary, #3a2b20); font: inherit; text-decoration: underline; text-underline-offset: 3px; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.live-page-result-link:hover { color: var(--button-hover-bg, #5a3a22); }
.live-page-result-link:focus-visible, .live-page-body-counts > span:focus-visible { outline: 2px solid var(--button-bg, #7a5c43); outline-offset: 3px; }
.live-page-body-counts { color: var(--text-secondary, #6b6055); font-size: .8em; border-top: 1px solid var(--border-primary, #c8b89a); }
.live-page-body-counts > span { padding: 8px 14px; }
.live-page-body-count-label { display: none; }
@media (max-width: 640px) {
  .live-page-body-count-label { display: inline; }
  .live-page-maintenance-result { align-items: flex-start; }
  .live-page-result-pages { flex-basis: 100%; }
}

/* Live Pages open as readable articles; editing is an explicit action. */
.live-page-reader {
    color: var(--text-primary);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 12px 16px calc(32px + var(--maintenance-progress-clearance, 0px));
    line-height: 1.5;
    overflow-wrap: anywhere;
}
/* The page title leads; body headings step down below it, so a kept first H1 never outranks the title. */
.live-page-reader-title { margin: 0 0 8px; font-size: 1.6em; line-height: 1.25; }
.live-page-read-body :is(h1, h2, h3, h4, h5, h6) { line-height: 1.3; margin: 1.2em 0 .5em; }
.live-page-read-body > :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }
.live-page-read-body h1 { font-size: 1.35em; }
.live-page-read-body h2 { font-size: 1.2em; }
.live-page-read-body h3 { font-size: 1.08em; }
.live-page-read-body :is(h4, h5, h6) { font-size: 1em; }
.live-page-reader-description { color: var(--text-secondary, #695744); margin: 0 0 24px; }
.live-page-read-body p, .live-page-read-body ul, .live-page-read-body ol { margin: 0 0 1em; }
/* Code blocks match chat's: a faint warm fill and border (the old undefined --card-bg left them bare). */
.live-page-read-body pre { white-space: pre; overflow-x: auto; padding: 12px; background: rgba(138, 92, 67, 0.08); border: 1px solid rgba(138, 92, 67, 0.2); border-radius: 6px; line-height: 1.4; }
.live-page-read-body pre code { background: transparent; border: 0; padding: 0; font-size: .85em; }
.live-page-read-body img { max-width: 100%; }
/* Wrapped Markdown tables scroll in .md-table-scroll; only unwrapped tables scroll themselves. */
.live-page-read-body table:not(.md-table-scroll > table) { display: block; overflow-x: auto; }
/* The reader wraps long words (overflow-wrap: anywhere); wrapped table cells opt out like chat tables, so a wide
   table scrolls in its wrapper instead of squeezing words mid-word. Reader paragraphs keep the reader rule. */
.live-page-read-body .md-table-scroll th,
.live-page-read-body .md-table-scroll td { word-break: normal; overflow-wrap: normal; min-width: 6em; }
.live-page-reader a { text-decoration: underline; color: var(--text-primary); }
.live-page-reader a:focus-visible, .live-page-reader:focus-visible { outline: 2px solid var(--button-bg); outline-offset: 3px; }
#live-page-mode-btn { min-width: 44px; min-height: 44px; }
@media (max-width: 600px) {
    .live-page-reader { padding: 8px 4px calc(24px + var(--maintenance-progress-clearance, 0px)); }
}
.live-page-edit-panel[data-mode="read"], .live-page-edit-panel[data-mode="history"],
body:has(#chat-approval-show:not([hidden])) .live-page-edit-panel[data-mode="edit"] {
    /* Edit stops above the composer only while it offers Show approval. */
    bottom: var(--live-page-reader-bottom, 120px);
    height: auto;
}
/* Edit covers the composer, and a pending approval pauses its message box and Send anyway, so while Edit
   offers Show approval only the composer's approval notice shows below the editor. The editor keeps the rest
   of the height, so its paused notice, Reload page and the body's first lines stay on screen. */
body:not([data-active-sidebar]:not([data-active-sidebar="livePages"])):has(.live-page-edit-panel.show[data-mode="edit"]):has(#chat-approval-show:not([hidden])) #chat-input-area > :is(#chat-input-box, #chat-message-submit) {
    display: none;
}
body:not([data-active-sidebar]:not([data-active-sidebar="livePages"])):has(.live-page-edit-panel.show[data-mode="edit"]):has(#chat-approval-show:not([hidden])) #chat-approval-notice {
    margin-bottom: 0;
}
.live-page-edit-panel-actions { flex-wrap: wrap; }
.live-page-edit-panel-header { min-height: 70px; height: auto; }
@media (max-width: 768px) {
    body:has(.live-page-edit-panel.show[data-mode="read"]) #live-pages-right-sidebar.show,
    body:has(.live-page-edit-panel.show[data-mode="read"]):has(#live-pages-right-sidebar.show) .sidebar-backdrop,
    body:has(.live-page-edit-panel.show[data-mode="edit"]):has(#chat-approval-show:not([hidden])) #live-pages-right-sidebar.show,
    body:has(.live-page-edit-panel.show[data-mode="edit"]):has(#chat-approval-show:not([hidden])):has(#live-pages-right-sidebar.show) .sidebar-backdrop {
        bottom: var(--live-page-reader-bottom, 120px);
        height: auto;
    }
}
.cm-editor a.md-link { cursor: text; }

/* Stable article workspace: navigation remains separate from editing actions. */
.live-page-edit-panel-header { justify-content: flex-start; gap: 16px; padding: 10px 20px; }
.live-page-tabs { display: flex; align-items: stretch; gap: 20px; margin-left: 0; margin-right: auto; }
.live-page-tab { border: 0; border-bottom: 2px solid transparent; background: none; padding: 10px 0; min-height: 44px; color: var(--text-primary); font: inherit; }
.live-page-tab[aria-pressed="true"] { border-bottom-color: var(--button-bg); font-weight: 600; }
.live-page-tab:focus-visible, .live-page-content-actions button:focus-visible { outline: 2px solid var(--button-bg); outline-offset: 2px; }
.live-page-content-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.live-page-content-heading label { margin: 0; }
.live-page-content-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.live-page-content-actions .live-page-action-btn { width: 32px; min-width: 32px; height: 32px; padding: 4px; border: 1px solid var(--border-primary); background: transparent; color: var(--text-primary); }
.live-page-content-actions .live-page-action-btn:hover:not(:disabled) { background: var(--bubble-bg-assistant, #f0e6d8); border-color: var(--border-focus, #8a5c43); }
/* Save and Discard (only the person's own edits pending) show their text beside the icon. */
.live-page-content-actions .live-page-action-btn.live-page-action-btn-labelled { width: auto; min-width: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 7px; white-space: nowrap; }
.live-page-action-label { font-size: 14px; line-height: 1; }
.live-page-inline-history { display: grid; grid-template-columns: minmax(210px, 30%) minmax(0, 1fr); gap: 20px; }
.live-page-inline-history > p { grid-column: 1 / -1; margin: 0; }
.live-page-inline-history > p:empty { display: none; }
/* A narrow panel on a wider screen (for example beside the open Live Pages list) stacks the list above the
   comparison, as the phone layout does; the panel body stays the only vertical scroller. */
.live-page-edit-panel[data-mode="history"] .live-page-edit-panel-body { container-type: inline-size; }
@container (max-width: 560px) {
    .live-page-inline-history { grid-template-columns: minmax(0, 1fr); }
}
.live-page-version-row { padding: 10px 0; border-bottom: 1px solid var(--border-primary); display: flex; flex-wrap: wrap; gap: 12px; }
.live-page-version-row > span { width: 100%; }
.live-page-version-row label { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; }
.live-page-version-comparison { min-width: 0; }
.live-page-toc { display: none; }
.progress-indicator-maintenance { width: fit-content; max-width: min(360px, calc(100vw - 40px)); padding: 10px 12px; }
.progress-indicator-maintenance .progress-indicator-content { gap: 8px; }
.progress-indicator .progress-phase { display: block; font-weight: normal; margin-top: 2px; }
.progress-maintenance-actions { gap: 4px; }
.progress-maintenance-actions button { min-height: 32px; }
@media (min-width: 1100px) {
    .live-page-reader:has(.live-page-toc) { display: grid; grid-template-columns: 180px minmax(0, 1fr); column-gap: 24px; }
    .live-page-reader:has(.live-page-toc) > .live-page-reader-title,
    .live-page-reader:has(.live-page-toc) > .live-page-reader-description { grid-column: 2; }
    .live-page-toc { display: flex; flex-direction: column; align-self: start; gap: 8px; grid-column: 1; grid-row: 1 / 4; position: sticky; top: 44px; }
    .live-page-read-body { grid-column: 2; min-width: 0; }
}
@media (max-width: 768px) {
    .live-page-edit-panel-header { padding: 8px 12px; gap: 8px; }
    .live-page-edit-panel-header > #edit-panel-title { display: none; }
    .live-page-tabs { gap: 14px; }
    .live-page-inline-history { grid-template-columns: minmax(0, 1fr); }
    /* The panel body is the only vertical scroller; the comparison keeps its own focusable region. */
    .live-page-version-list { padding-bottom: 8px; }
}

.live-page-edit-panel-header > #edit-panel-title { display: none; }

@media (max-width: 768px) {
    body:has(.live-page-edit-panel.show[data-mode="history"]) #live-pages-right-sidebar.show,
    body:has(.live-page-edit-panel.show[data-mode="history"]):has(#live-pages-right-sidebar.show) .sidebar-backdrop { bottom: var(--live-page-reader-bottom, 120px); height: auto; }
}

/* Uncover the selected mobile sidebar without unmounting the page or its draft. */
@media (max-width: 768px) {
    body[data-active-sidebar]:not([data-active-sidebar="livePages"]) .live-page-edit-panel {
        visibility: hidden;
    }
}

@media (pointer: coarse), (max-width: 768px) {
    .live-page-content-actions .live-page-action-btn { width: 44px; min-width: 44px; height: 44px; }
    .live-page-content-actions .live-page-action-btn.live-page-action-btn-labelled { width: auto; padding: 4px 12px; }
    .live-page-version-row .live-page-restore { min-height: 44px; }
}
.live-page-history-help { color: var(--text-secondary); line-height: 1.4; }
.live-page-version-kind { font-size: .9em; color: var(--text-secondary); }
.live-page-version-row .live-page-restore { align-self: center; margin-left: auto; padding: 5px 10px; }

/* Background page updates: one compact, stable indicator; no animation (spec §12). */
/* No side padding, so the entry lines up with the page cards below it (Task 6 review M6). */
.background-page-updates { padding: 8px 0; border-bottom: 1px solid var(--border-primary); }
.background-page-updates[hidden], .background-page-updates [hidden] { display: none; }
.background-page-updates-status { margin: 0 0 6px; font-size: 0.85rem; color: var(--text-secondary); }
.background-page-updates-entry { min-height: 32px; }
.background-page-updates-settings-link { padding: 0; border: 0; background: none; font: inherit;
  color: var(--button-bg, #7a5c43); text-decoration: underline; cursor: pointer; }
.background-page-updates-settings-link:hover { color: var(--button-hover-bg, #5a3a22); }
.background-page-updates-settings-link:focus-visible { outline: 2px solid var(--border-focus, #8a5c43); outline-offset: 2px; }
@media (pointer: coarse) { .background-page-updates-settings-link { display: inline-flex; align-items: center; min-height: 44px; } }
.background-page-updates-list { list-style: none; margin: 6px 0 0; padding: 0; }
.background-page-updates-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 0; }
.background-page-updates-item > span { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.background-page-updates [data-background-updates-message]:focus { outline: none; }
#live-pages-top-btn { position: relative; }
/* With the label shown the count sits after it in the button's flex row; icon-only buttons pin it to the
   corner (Task 6 review M6). */
.top-btn-badge { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; font-size: 0.75rem; line-height: 18px; text-align: center;
  background: var(--button-bg); color: var(--button-text); }
.top-bar-compact .top-btn-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 8px; font-size: 0.7rem; line-height: 16px; }
@media (max-width: 1000px) {
  .top-btn-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px;
    padding: 0 4px; border-radius: 8px; font-size: 0.7rem; line-height: 16px; }
}
/* Visually hidden: read by screen readers only. */
.top-btn-badge-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 480px) { .background-page-updates-item .btn { min-height: 44px; } }

/* To-dos are hidden unless the server turns them on (the To-dos Global Settings checkbox).
   html[data-todos-enabled] comes from the page template or the latest task_state_sync.
   Pending to-do approval cards stay visible so an earlier request can still be answered. */
html:not([data-todos-enabled="true"]) #todos-top-btn,
html:not([data-todos-enabled="true"]) #todos-fab,
html:not([data-todos-enabled="true"]) #todos-fab-btn,
html:not([data-todos-enabled="true"]) #todos-sidebar,
html:not([data-todos-enabled="true"]) #todos-container,
html:not([data-todos-enabled="true"]) #todo-modal,
html:not([data-todos-enabled="true"]) .todo-approval-card:not([data-status="pending"]) {
    display: none !important;
}