/* ========================================
   Wizionic — Unified Custom Styles (single source of truth for client + server)
   Merged from previous app.css (design tokens + common) + wasm-chat.css (chat + WASM UI)
   All hard-coded colors standardized to CSS vars where possible. Duplicated layout/component
   rules from old files have been deduped into this global file.
   ======================================== */

/* -------------------------------------------------------
   Wizionic Design System — Global Styles & Tokens
   (from server wwwroot/app.css)
   ------------------------------------------------------- */

/* ------------------------------
   1. CSS RESET (lightweight)
   ------------------------------ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: "Segoe UI", sans-serif;
    line-height: var(--line-normal);
}

/* Remove default link styling */
a {
    color: var(--primary-dark);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* ------------------------------
   2. DESIGN TOKENS
   ------------------------------ */
:root {
    /*
     * Default Light theme — Grok-style near-white / black / grey.
     * Legacy bluish light lives under [data-theme="light-blue"].
     */

    /* Neutral primaries (token names kept for compatibility) */
    --primary-blue: #171717;
    --primary-dark: #0a0a0a;
    --primary-light: #404040;
    --bubble-blue: #f0f0f0;

    /* Neutral surfaces (former “light-blue-*” names) */
    --light-blue-1: #f0f0f0;
    --light-blue-2: #f5f5f5;
    --light-blue-3: #ffffff;

    /* Greys */
    --grey-50:  #ffffff;
    --grey-100: #f5f5f5;
    --grey-200: #e8e8e8;
    --grey-300: #d4d4d4;
    --grey-400: #a3a3a3;
    --grey-500: #737373;
    --grey-600: #525252;

    /* Accents */
    --success: #D1FFD2;
    --warning: #FFD66B;
    --error:   #FF6B6B;

    /* Text */
    --text-dark: #0a0a0a;
    --text-light: #FFFFFF;

    /* Spacing Scale (8pt system) */
    --space-0: 0px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;
    --space-11: 124px;

    /* Typography Scale */
    --font-xs: 12px;
    --font-sm: 14px;
    --font-md: 16px;
    --font-lg: 20px;
    --font-xl: 24px;
    --font-2xl: 32px;

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-tight: 1.2;
    --line-normal: 1.5;
    --line-relaxed: 1.7;

    --topbar-height: 56px;
    --app-nav-size: 3.5rem;
    --app-nav-width: 0px;
    --app-nav-height: var(--app-nav-size);
    --app-nav-offset-x: 0px;

    /* Component Tokens — Sidebar */
    --sidebar-bg: var(--light-blue-2);
    --sidebar-border: var(--grey-200);
    --sidebar-hover: var(--grey-200);
    --sidebar-active: var(--grey-300);
    --sidebar-text: var(--text-dark);

    /* Component Tokens — Chat Window */
    --chat-bg: var(--grey-50);
    --chat-border: var(--grey-200);

    /* Component Tokens — Chat Bubbles */
    --bubble-user-bg: var(--bubble-blue);
    --bubble-user-text: var(--text-dark);

    --bubble-ai-bg: #FFFFFF;
    --bubble-ai-border: var(--grey-200);
    --bubble-ai-text: var(--text-dark);

    /* Buttons — solid black primary (Grok-style) */
    --btn-primary-bg: #0a0a0a;
    --btn-primary-text: #ffffff;
    --btn-primary-hover: #262626;

    --btn-danger-bg: var(--error);
    --btn-danger-text: var(--text-light);

    /* Borders & Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --border-light: 1px solid var(--grey-200);
    --border-medium: 1px solid var(--grey-300);

    /* === SEMANTIC THEME TOKENS (components should use these) === */

    /* Backgrounds */
    --color-bg:            #ffffff;
    --color-bg-surface:    #ffffff;
    --color-bg-subtle:     #f5f5f5;
    --color-bg-muted:      #f0f0f0;

    /* Borders */
    --color-border:        #e8e8e8;
    --color-border-strong: #d4d4d4;

    /* Text */
    --color-text:          #0a0a0a;
    --color-text-muted:    #737373;
    --color-text-inverse:  #ffffff;

    /* Sidebar */
    --color-sidebar-bg:        #f7f7f7;
    --color-sidebar-hover:     #eeeeee;
    --color-sidebar-active:    #e8e8e8;
    --color-sidebar-border:    #e8e8e8;

    /* Chat */
    --color-chat-bg:       #ffffff;
    --color-bubble-user:   #f0f0f0;
    --color-bubble-ai:     #ffffff;

    /* Topbar */
    --color-topbar-bg:     #ffffff;

    /* Topbar panel toggles (Chat / Notes / Browser) */
    --topbar-toggle-border:        var(--color-border-strong);
    --topbar-toggle-border-hover:  #a3a3a3;
    --topbar-toggle-border-active: #0a0a0a;
    --topbar-toggle-bg:            transparent;
    --topbar-toggle-bg-hover:      rgba(0, 0, 0, 0.05);
    --topbar-toggle-bg-active:     rgba(0, 0, 0, 0.09);
    --topbar-toggle-color:         #0a0a0a;

    /* Accents — black / charcoal */
    --color-accent:        #171717;
    --color-accent-dark:   #0a0a0a;

    /* Semantic UI tokens (error / warning for cards, badges, dialogs) */
    --color-error:         #dc3545;
    --color-error-bg:      #fff0f0;
    --color-warning-bg:    #fff3cd;
    --color-warning-tx:    #856404;
    --color-warning-bdr:   #ffeaa7;

    /* Info / success alert cards */
    --color-info-bg:       #f5f5f5;
    --color-info-border:   #d4d4d4;
    --color-info-fg:       #0a0a0a;
    --color-success-bg:    var(--success);
    --color-success-fg:    #14532d;
    --color-success-border: #22c55e;

    /* Component cf-* semantic tokens -- used by all component style blocks */
    --cf-text-muted:   #737373;
    --cf-error-fg:     #c00;
    --cf-border:       #e8e8e8;
    --cf-bg-surface:   #ffffff;
    --cf-bg-subtle:    #f5f5f5;
    --cf-bg-muted:     var(--color-bg-muted);
    --cf-info-box-bg:  var(--color-bg-muted);
    --cf-success-fg:   #22c55e;
    --cf-table-th-bg:  #f5f5f5;

    /* SyncPresencePage helpers */
    --cf-sync-error-bg:      #3d1f1f;

    /* SyncPresencePage helpers */
    --cf-sync-warning-fg:     var(--color-warning-tx, #ffb86c);
}

/* SyncPresencePage component classes (all theme-aware) */
.cf-success-box {
    background: var(--color-success-bg, var(--success));
    border: 1px solid var(--color-success-border, #22c55e);
    color: var(--color-success-fg, #14532d);
    border-radius: 6px;
}

.cf-sync-status-dot {
    color: var(--cf-status-online);
}

.cf-sync-muted-text {
    color: var(--color-text-muted);
}

.cf-sync-label-text {
    color: var(--color-text-muted);
}

.cf-sync-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid var(--cf-border, var(--color-border));
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    background: var(--cf-bg-surface);
}

.cf-sync-info-card {
    margin-top: 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--light-blue-2);
    border: 1px solid var(--primary-blue);
    border-radius: 4px;
    font-size: 0.9em;
}

.cf-sync-no-devices-text {
    color: var(--color-text-muted);
}

/* Success boxes keep dedicated fg (do not inherit theme text — mint + light text is unreadable) */
[data-theme="dracula"] .cf-success-box,
[data-theme="app-dark"] .cf-success-box,
[data-theme="dark-blue"] .cf-success-box,
[data-theme="nord"] .cf-success-box {
    background: var(--color-success-bg);
    color: var(--color-success-fg);
    border-color: var(--color-success-border);
}

[data-theme="dracula"] .cf-sync-info-card,
[data-theme="app-dark"] .cf-sync-info-card,
[data-theme="dark-blue"] .cf-sync-info-card,
[data-theme="nord"] .cf-sync-info-card,
[data-theme="solarized-light"] .cf-sync-info-card {
    background: var(--color-info-bg, var(--light-blue-2));
    border-color: var(--color-info-border, var(--primary-blue));
    color: var(--color-info-fg, var(--text-dark));
}

.cf-sync-label-text {
    color: var(--color-text-muted);
}

.cf-sync-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid var(--cf-border);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    background: var(--cf-bg-surface);
}

.cf-sync-info-card {
    margin-top: 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--light-blue-2);
    border: 1px solid var(--primary-blue);
    border-radius: 4px;
    font-size: 0.9em;
}

/* ========================================
    SyncPresencePage utilities (theme-aware)
    ======================================== */
:root {
    /* SyncPresencePage helpers */
    --cf-sync-row-bg:        #f0fdf4;
    --cf-sync-border-green:  #bbf7d0;
    --cf-sync-success-fg:    #166534;
    --cf-sync-warning-fg:    #b45309;
    --cf-sync-info-bg:       #e6f2ff;
    --cf-sync-info-border:   #b3d9ff;
    --cf-sync-muted-tx:      var(--color-text-muted);
}

/* ------------------------------
   3. GLOBAL UTILITIES
   ------------------------------ */

/* Theme-aware form controls (Bootstrap defaults are light-only) */
.form-control,
.form-select,
input.form-control,
textarea.form-control,
select.form-control,
select.form-select {
    background-color: var(--color-bg-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

.form-control::placeholder,
textarea.form-control::placeholder,
input.form-control::placeholder {
    color: var(--color-text-muted) !important;
    opacity: 1 !important;
}

.form-control:focus,
.form-select:focus,
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus,
select.form-select:focus {
    background-color: var(--color-bg-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--color-accent, var(--primary-blue)) !important;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-accent, var(--primary-blue)) 25%, transparent) !important;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--color-bg-muted) !important;
    color: var(--color-text-muted) !important;
    opacity: 1;
}

/* Bootstrap .btn-primary hardcodes light-theme colors — use design tokens */
.btn-primary,
button.btn-primary,
a.btn-primary {
    background-color: var(--btn-primary-bg) !important;
    border-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
}

.btn-primary:hover:not(:disabled):not(.disabled),
button.btn-primary:hover:not(:disabled),
a.btn-primary:hover {
    background-color: var(--btn-primary-hover) !important;
    border-color: var(--btn-primary-hover) !important;
    color: var(--btn-primary-text) !important;
}

.btn-primary:disabled,
.btn-primary.disabled,
button.btn-primary:disabled {
    background-color: var(--btn-primary-bg) !important;
    border-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
    opacity: 0.45;
}

.btn-outline-primary,
button.btn-outline-primary,
a.btn-outline-primary {
    background-color: transparent !important;
    border-color: var(--color-accent, var(--primary-blue)) !important;
    color: var(--color-accent, var(--primary-blue)) !important;
}

.btn-outline-primary:hover:not(:disabled),
button.btn-outline-primary:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--color-accent, var(--primary-blue)) 14%, transparent) !important;
    border-color: var(--color-accent-dark, var(--primary-dark)) !important;
    color: var(--color-accent-dark, var(--primary-dark)) !important;
}

.btn-outline-secondary,
button.btn-outline-secondary,
a.btn-outline-secondary {
    background-color: transparent !important;
    border-color: var(--color-border-strong, var(--grey-300)) !important;
    color: var(--color-text) !important;
}

.btn-outline-secondary:hover:not(:disabled),
button.btn-outline-secondary:hover:not(:disabled) {
    background-color: var(--color-bg-muted) !important;
    border-color: var(--color-border-strong) !important;
    color: var(--color-text) !important;
}

/* Spacing utilities */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }

/* Text utilities */
.text-light { color: var(--text-light); }
.text-dark  { color: var(--text-dark); }
.text-sm    { font-size: var(--font-sm); }
.text-md    { font-size: var(--font-md); }
.text-lg    { font-size: var(--font-lg); }

/* Buttons */
.btn-primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
}
.btn-primary:hover {
    background: var(--btn-primary-hover);
}

.btn-danger {
    background: var(--btn-danger-bg);
    color: var(--btn-danger-text);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
}


.ollama-instructions {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  max-width: 580px;
  margin: 0 auto;
}

.ollama-instructions a {
  color: var(--primary-blue);
  text-decoration: none;
}

.ollama-instructions a:hover {
  text-decoration: underline;
}

.model-commands {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}

.model-command {
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 10px 14px;
}

.model-desc {
  display: block;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.model-command pre {
  margin: 0;
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.85rem;
  overflow-x: auto;
}

.model-command code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* ========================================
   Chat / WASM specific (from wasm-chat.css, deduped + var-ified)
   ======================================== */

.chat-layout { display: flex; height: calc(100vh - 80px); }

/* Sidebar legacy styles (kept for safety) */
.chat-sidebar, .chat-sidebar-section-title, .chat-sidebar-new, .chat-sidebar-item { /* unused but harmless */ }

/* ====================== CHAT STRUCTURE ====================== */
.chat-wrapper {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--app-nav-height));
    width: 100%;               /* fills the parent <main> perfectly */
    background: var(--color-chat-bg);
}

.chat-wrapper.browser-panel-open {
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
}

.chat-column {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.browser-panel-open .chat-column {
    flex: 0 0 32%;
    min-width: 280px;
    max-width: none;
}

.browser-panel-open .chat-container {
    max-width: none;
    margin: 0;
    padding-bottom: 150px;
}

.browser-splitter {
    flex: 0 0 4px;
    width: 4px;
    cursor: ew-resize;
    background: transparent;
    align-self: stretch;
    z-index: 20;
    position: relative;
}

.browser-splitter::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -5px;
    right: -5px;
}

.browser-splitter::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 36px;
    border-radius: 2px;
    background: var(--color-border);
    transition: background 0.15s ease, height 0.15s ease, width 0.15s ease;
    pointer-events: none;
}

.browser-splitter:hover::after,
.browser-splitter:active::after {
    width: 3px;
    height: 52px;
    background: var(--primary-blue);
}

.browser-panel {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    height: 100%;
    background: var(--color-chat-bg);
    overflow: hidden;
    position: relative;
}

/* Stack chat input vertically when split with browser (textarea above toolbar row) */
.browser-panel-open .input-area {
    padding: 8px 10px 10px;
}

.browser-panel-open .input-container {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    padding: 8px 10px;
}

.browser-panel-open .input-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    width: 100%;
    flex-shrink: 0;
}

.browser-panel-open .message-wrapper {
    order: 0;
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
}

.browser-panel-open .message-input {
    width: 100%;
    min-width: 0;
    min-height: 72px;
    max-height: 100px;
}

.browser-panel-open .model-selector {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
}

.browser-tabstrip {
    display: flex;
    align-items: stretch;
    gap: 2px;
    padding: 4px 6px 0;
    background: var(--color-topbar-bg);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    min-height: 34px;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    z-index: 201;
}

.browser-tabstrip-tabs {
    display: flex;
    align-items: stretch;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
    overflow-x: auto;
}

.browser-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 200px;
    min-width: 96px;
    padding: 4px 6px 4px 8px;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: transparent;
    color: var(--color-text-muted, var(--color-text));
    cursor: grab;
    flex: 0 1 auto;
    font-size: 0.8rem;
    line-height: 1.2;
    user-select: none;
}

.browser-tab:hover {
    background: color-mix(in srgb, var(--color-chat-bg) 70%, var(--color-topbar-bg));
    z-index: 5;
}

.browser-tab.active {
    background: var(--color-chat-bg);
    border-color: var(--color-border);
    color: var(--color-text);
    box-shadow: 0 1px 0 var(--color-chat-bg);
    cursor: grab;
}

.browser-tab.drag-over {
    border-color: var(--primary-blue, #3b82f6);
    background: color-mix(in srgb, var(--primary-blue, #3b82f6) 12%, var(--color-chat-bg));
}

/* Fixed so parent overflow / native WebView overlay cannot clip the tooltip. */
.browser-tab-tooltip-fixed {
    position: fixed;
    min-width: 180px;
    max-width: min(360px, 70vw);
    padding: 8px 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-topbar-bg, var(--color-chat-bg));
    color: var(--color-text);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    z-index: 10050;
    pointer-events: none;
    text-align: left;
    white-space: normal;
}

.browser-tab-tooltip-title {
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1.3;
    word-break: break-word;
}

.browser-tab-tooltip-url {
    margin-top: 4px;
    font-size: 0.72rem;
    line-height: 1.3;
    color: var(--color-text-muted, var(--cf-text-muted, #888));
    word-break: break-all;
}

.browser-tab-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 2px;
    object-fit: contain;
}

.browser-tab-icon-fallback {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.55;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.browser-tab-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.browser-tab-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0.55;
    font-size: 0.7rem;
    line-height: 1;
}

.browser-tab-close:hover {
    opacity: 1;
    background: color-mix(in srgb, var(--color-text) 12%, transparent);
}

.browser-tab-new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 2px 2px 2px 4px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    flex-shrink: 0;
}

.browser-tab-new:hover {
    background: color-mix(in srgb, var(--color-chat-bg) 70%, var(--color-topbar-bg));
    border-color: var(--color-border);
}

.browser-toolbar {
    display: flex;
    gap: 0.35rem;
    padding: 0.5rem;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-topbar-bg);
    position: relative;
    z-index: 200;
    overflow: visible;
    flex-shrink: 0;
}

.browser-toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-chat-bg);
    color: var(--color-text);
    cursor: pointer;
    flex-shrink: 0;
}

.browser-toolbar-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.browser-toolbar-btn:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.05);
}

.browser-toolbar-btn.active {
    background: rgba(0, 0, 0, 0.08);
}

.browser-bookmarks-menu-wrap {
    position: relative;
    flex-shrink: 0;
    z-index: 201;
}

.browser-downloads-menu-wrap {
    position: relative;
    flex-shrink: 0;
    z-index: 201;
}

.browser-toolbar-btn.browser-download-active {
    color: var(--color-accent, #2563eb);
    border-color: color-mix(in srgb, var(--color-accent, #2563eb) 45%, var(--color-border));
}

.browser-downloads-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 2px;
    width: 340px;
    max-width: min(340px, 90vw);
    max-height: 360px;
    overflow-y: auto;
    background: var(--color-chat-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 15000;
    padding: 0;
}

.browser-downloads-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
}

.browser-downloads-clear {
    border: none;
    background: transparent;
    color: var(--color-text-muted, #6b7280);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-sm, 4px);
}

.browser-downloads-clear:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-text);
}

.browser-downloads-empty {
    padding: 16px 12px;
    font-size: 0.85rem;
    color: var(--color-text-muted, #6b7280);
    text-align: center;
}

.browser-downloads-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
}

.browser-downloads-item:last-child {
    border-bottom: none;
}

.browser-downloads-item-main {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    min-width: 0;
}

.browser-downloads-item-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-text-muted, #6b7280);
}

.browser-downloads-item-text {
    min-width: 0;
    flex: 1;
}

.browser-downloads-item-name {
    font-size: 0.85rem;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.browser-downloads-item-meta {
    font-size: 0.75rem;
    color: var(--color-text-muted, #6b7280);
    margin-top: 2px;
}

.browser-downloads-progress {
    margin-top: 6px;
    height: 4px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.browser-downloads-progress-bar {
    height: 100%;
    background: var(--color-accent, #2563eb);
    border-radius: 2px;
    transition: width 0.15s ease;
}

.browser-downloads-item-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.browser-downloads-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-chat-bg);
    color: var(--color-text);
    cursor: pointer;
    padding: 0;
}

.browser-downloads-action:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.05);
}

.browser-downloads-action:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.browser-downloads-action-danger:hover:not(:disabled) {
    color: var(--color-danger, #c0392b);
    border-color: color-mix(in srgb, var(--color-danger, #c0392b) 40%, var(--color-border));
}

.browser-bookmarks-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 2px;
    min-width: 260px;
    max-width: 340px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--color-chat-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 15000;
    padding: 4px 0;
}

.browser-bookmarks-page-link {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--color-text);
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.browser-bookmarks-page-link:hover {
    background: rgba(0, 0, 0, 0.06);
}

.browser-bookmarks-folder-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--cf-text-muted);
    padding: 8px 12px 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.browser-bookmarks-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 6px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.browser-bookmarks-item:hover {
    background: rgba(0, 0, 0, 0.06);
}

.browser-bookmarks-item-title {
    font-size: 0.85rem;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.browser-bookmarks-item-url {
    font-size: 0.72rem;
    color: var(--cf-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.browser-bookmarks-empty {
    padding: 12px;
    font-size: 0.85rem;
    color: var(--cf-text-muted);
}

.browser-go-btn {
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
}

.browser-bookmarks-bar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0.2rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-topbar-bg);
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 0;
    min-height: 28px;
    scrollbar-width: thin;
}

.browser-bookmarks-bar-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text);
    font-size: 0.78rem;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    max-width: 180px;
}

.browser-bookmarks-bar-item:hover {
    background: rgba(0, 0, 0, 0.06);
}

.browser-bookmarks-bar-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    object-fit: contain;
}

.browser-bookmarks-bar-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.browser-bookmarks-bar-empty {
    font-size: 0.75rem;
    color: var(--cf-text-muted);
    padding: 2px 4px;
    white-space: nowrap;
}

.browser-bookmarks-bar-item.drag-over {
    background: rgba(0, 0, 0, 0.1);
    outline: 1px dashed var(--color-border);
}

.browser-bar-menu-spacer {
    flex: 0 0 auto;
    flex-shrink: 0;
    width: 100%;
}

.browser-bookmarks-bar-context-menu {
    min-width: 120px;
    background: var(--color-chat-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px 0;
}

.browser-bookmarks-bar-context-item {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--color-text);
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
}

.browser-bookmarks-bar-context-item:hover {
    background: rgba(0, 0, 0, 0.06);
}

.browser-url-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
    z-index: 202;
}

.browser-url-input {
    width: 100%;
    min-width: 0;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-chat-bg);
    color: var(--color-text);
    font-size: 0.9rem;
    box-sizing: border-box;
}

.browser-url-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 2px 0 0;
    padding: 4px 0;
    list-style: none;
    background: var(--color-chat-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 15000;
    max-height: 220px;
    overflow-y: auto;
}

.browser-url-suggestion {
    padding: 6px 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.browser-url-suggestion:hover,
.browser-url-suggestion.active {
    background: rgba(0, 0, 0, 0.06);
}

.browser-url-suggestion-url {
    font-size: 0.85rem;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.browser-url-suggestion-title {
    font-size: 0.72rem;
    color: var(--cf-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.browser-start-page {
    padding: 1rem;
    overflow-y: auto;
    height: 100%;
}

.browser-start-title {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    color: var(--color-text);
}

.browser-start-folder {
    margin-bottom: 1rem;
}

.browser-start-folder-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cf-text-muted);
    margin-bottom: 0.35rem;
}

.browser-start-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.browser-start-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-topbar-bg);
    cursor: pointer;
    text-align: left;
}

.browser-start-tile:hover {
    background: rgba(0, 0, 0, 0.05);
}

.browser-start-tile-title {
    font-size: 0.85rem;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.browser-start-tile-url {
    font-size: 0.68rem;
    color: var(--cf-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.browser-start-empty {
    font-size: 0.85rem;
    color: var(--cf-text-muted);
    margin: 0;
}

.browser-settings-modal {
    max-width: 420px;
    width: 92vw;
}

.browser-bookmark-modal {
    max-width: 400px;
    width: 92vw;
}

.browser-settings-label {
    display: block;
    font-size: 0.8rem;
    color: var(--cf-text-muted);
    margin: 10px 0 4px;
}

.browser-settings-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    margin-top: 8px;
    color: var(--color-text);
}

.browser-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
}

.browser-main-column {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.browser-side-splitter {
    width: 4px;
    flex: 0 0 4px;
    flex-shrink: 0;
    cursor: ew-resize;
    background: transparent;
    position: relative;
    border: none;
}

.browser-side-splitter::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -5px;
    right: -5px;
}

.browser-side-splitter::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 36px;
    border-radius: 2px;
    background: var(--color-border);
    transition: background 0.15s ease, height 0.15s ease, width 0.15s ease;
    pointer-events: none;
}

.browser-side-splitter:hover::after,
.browser-side-splitter:active::after {
    width: 3px;
    height: 52px;
    background: var(--primary-blue);
}

.browser-side-column {
    flex-shrink: 0;
    min-width: 240px;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--color-border);
    background: var(--color-topbar-bg);
}

.browser-side-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.browser-side-header-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
}

.browser-side-close {
    border: none;
    background: transparent;
    color: var(--cf-text-muted);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: var(--radius-md);
}

.browser-side-close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-text);
}

.browser-side-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.browser-side-bookmarks {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.browser-side-bookmarks-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.browser-side-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: transparent;
    color: var(--color-text);
    font-size: 0.75rem;
    cursor: pointer;
}

.browser-side-toolbar-btn:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.06);
}

.browser-side-toolbar-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.browser-side-toolbar-btn-danger {
    color: var(--color-danger, #c0392b);
    border-color: rgba(192, 57, 43, 0.35);
}

.browser-side-new-folder {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.browser-side-new-folder .newnote-input {
    flex: 1;
    min-width: 120px;
    margin: 0;
}

.browser-side-bookmarks-list {
    overflow-y: auto;
    padding: 0.35rem 0;
    flex: 1;
    min-height: 0;
}

.browser-side-bookmarks-empty {
    padding: 12px;
    font-size: 0.8rem;
    color: var(--cf-text-muted);
    text-align: center;
}

.browser-side-folder {
    margin-bottom: 0.35rem;
}

.browser-side-folder.drag-over > .browser-side-folder-header {
    background: rgba(56, 88, 197, 0.12);
    outline: 1px dashed rgba(56, 88, 197, 0.45);
}

.browser-side-folder-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px 4px 4px;
    cursor: grab;
    user-select: none;
}

.browser-side-folder-header:active {
    cursor: grabbing;
}

.browser-side-folder-name {
    flex: 1;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--cf-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.browser-side-folder-count {
    font-size: 0.68rem;
    color: var(--cf-text-muted);
    opacity: 0.75;
}

.browser-side-drag-handle {
    color: var(--cf-text-muted);
    opacity: 0.55;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.browser-side-bookmark-row {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px 2px 4px;
}

.browser-side-bookmark-row:hover {
    background: rgba(0, 0, 0, 0.04);
}

.browser-side-bookmark-row.selected {
    background: rgba(56, 88, 197, 0.08);
}

.browser-side-bookmark-row.drag-over {
    outline: 1px dashed rgba(56, 88, 197, 0.45);
    background: rgba(56, 88, 197, 0.08);
}

.browser-side-bookmark-check {
    display: flex;
    align-items: center;
    padding: 4px;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.browser-side-bookmark-check input {
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
}

.browser-side-bookmark-link {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    padding: 4px 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.browser-side-bookmark-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--cf-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0;
}

.browser-side-bookmark-row:hover .browser-side-bookmark-action,
.browser-side-bookmark-row.selected .browser-side-bookmark-action {
    opacity: 1;
}

.browser-side-bookmark-action:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--color-text);
}

.browser-side-bookmark-action-danger:hover {
    color: var(--color-danger, #c0392b);
}

.browser-side-bookmark-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    object-fit: contain;
}

.browser-side-bookmark-title {
    font-size: 0.82rem;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.browser-side-settings {
    overflow-y: auto;
    padding: 0.5rem;
}

.browser-side-content-host {
    flex: 1;
    min-height: 0;
}

.browser-vtoolbar {
    width: 44px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
    border-left: 1px solid var(--color-border);
    background: var(--color-topbar-bg);
}

.browser-vtoolbar-spacer {
    flex: 1;
    min-height: 8px;
}

.browser-vtoolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    position: relative;
}

.browser-vtoolbar-btn:hover {
    background: rgba(0, 0, 0, 0.06);
}

.browser-vtoolbar-btn.active {
    background: rgba(0, 0, 0, 0.1);
}

.browser-vtoolbar-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 3px;
}

.sidebar-app-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    cursor: pointer;
    border-radius: var(--radius-md);
    position: relative;
}

.browser-vtoolbar-app {
    width: 34px;
    min-height: 34px;
    padding: 2px 0;
    cursor: grab;
}

.browser-vtoolbar-app:hover {
    background: rgba(0, 0, 0, 0.06);
}

.browser-vtoolbar-app.active {
    background: rgba(0, 0, 0, 0.1);
}

.browser-vtoolbar-app.drag-over {
    outline: 1px dashed rgba(56, 88, 197, 0.55);
    background: rgba(56, 88, 197, 0.1);
}

.browser-vtoolbar-app:active {
    cursor: grabbing;
}

.sidebar-app-icon-label {
    display: none;
}

.browser-context-scrim {
    position: absolute;
    inset: 0;
    z-index: 15000;
    background: rgba(0, 0, 0, 0.12);
}

.browser-context-popover {
    position: absolute;
    z-index: 15001;
}

.browser-context-popover--vtoolbar {
    right: 48px;
    transform: translateY(-50%);
    min-width: 220px;
}

.browser-context-popover--bookmarks {
    transform: translate(-50%, 8px);
}

.browser-context-popover-badge {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #3b82f6;
    padding: 6px 12px 2px;
}

.browser-vtoolbar-app.is-pwa::after {
    content: "";
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3b82f6;
    border: 1px solid var(--color-topbar-bg);
}

.browser-pwa-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-topbar-bg);
}

.browser-pwa-preview img {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: contain;
}

.browser-vtoolbar-add.pwa-available {
    color: #3b82f6;
}

.sidebar-context-menu {
    min-width: 220px;
    background: var(--color-chat-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px 0;
}

.sidebar-context-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 0.85rem;
    color: var(--color-text);
    cursor: pointer;
}

.sidebar-context-menu-item:hover {
    background: rgba(0, 0, 0, 0.06);
}

.sidebar-context-menu-item.default-selected {
    font-weight: 600;
}

.sidebar-context-menu-item.default-selected::before {
    content: "✓";
    font-size: 0.75rem;
    margin-right: 2px;
    color: var(--primary-dark, #2563eb);
}

.sidebar-context-menu-danger {
    color: var(--color-danger, #c0392b);
}

.sidebar-context-menu-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 4px 0;
}

.browser-vtoolbar-add.pwa-available::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3b82f6;
    border: 1px solid var(--color-topbar-bg);
}

.browser-pin-hint {
    font-size: 0.82rem;
    color: var(--cf-text-muted);
    margin: 0 0 8px;
}

.browser-pwa-install-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    background: rgba(59, 130, 246, 0.1);
    color: var(--color-text);
    font-size: 0.82rem;
}

.browser-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--color-chat-bg);
}

.browser-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--cf-text-muted);
    font-size: 0.9rem;
    pointer-events: none;
}

.browser-content-host .browser-placeholder {
    opacity: 0.35;
}

.topbar-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.35rem;
    border: 1px solid var(--topbar-toggle-border, var(--color-border-strong));
    border-radius: var(--radius-md);
    background: var(--topbar-toggle-bg, transparent);
    color: var(--topbar-toggle-color, var(--primary-dark));
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.topbar-toggle-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.topbar-toggle-btn:hover {
    background: var(--topbar-toggle-bg-hover, color-mix(in srgb, var(--color-accent, var(--primary-blue)) 10%, transparent));
    border-color: var(--topbar-toggle-border-hover, var(--topbar-toggle-border, var(--color-border-strong)));
}

.topbar-toggle-btn.active {
    background: var(--topbar-toggle-bg-active, var(--topbar-toggle-bg-hover));
    border-color: var(--topbar-toggle-border-active, var(--topbar-toggle-border-hover));
    box-shadow: inset 0 0 0 1px var(--topbar-toggle-border-active, var(--topbar-toggle-border-hover));
}

.topbar-sidebar-toggle svg {
    width: 1.35rem;
    height: 1.35rem;
    display: block;
}

.app-nav-context-menu {
    min-width: 220px;
    max-width: min(280px, 90vw);
    background: var(--cf-bg-surface, var(--color-bg-surface));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px 0;
}

.app-nav-context-menu-section {
    padding: 6px 12px 2px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    user-select: none;
}

.app-nav-context-menu-divider {
    height: 1px;
    margin: 4px 0;
    background: var(--color-border);
}

.app-nav-context-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    padding: 8px 12px 8px 28px;
    font-size: 0.85rem;
    color: var(--color-text);
    cursor: pointer;
    position: relative;
}

.app-nav-context-menu-item:hover {
    background: var(--topbar-toggle-bg-hover, rgba(0, 0, 0, 0.06));
}

.app-nav-context-menu-item.is-selected {
    font-weight: 600;
    color: var(--color-text);
}

.app-nav-context-menu-item.is-selected::before {
    content: "✓";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: var(--color-accent, var(--primary-dark));
}

.app-nav-secondary-toggle {
    flex-shrink: 0;
    opacity: 0.75;
}

.app-nav-secondary-toggle:hover {
    opacity: 1;
}

.app-nav--top .app-nav-right {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.app-nav--top .app-nav-secondary-toggle {
    order: 0;
}

.app-nav--top .app-nav-secondary {
    order: 1;
}

.app-nav--top .app-nav-account {
    order: 2;
    position: relative;
}

.app-nav-account-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 4px;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    border-radius: var(--radius-md);
}

.app-nav-account-menu-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.app-nav-account-menu-btn .bi {
    font-size: 1.35rem;
}

.app-nav-account-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1100;
    min-width: 220px;
    max-width: min(280px, calc(100vw - 16px));
    padding: 6px 0;
    background: var(--cf-bg-surface, var(--color-bg-surface, #fff));
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.app-nav-account-dropdown-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 10px 14px !important;
    color: var(--color-text) !important;
    text-decoration: none !important;
    white-space: nowrap;
    font-size: 0.92rem;
    line-height: 1.2;
    background: transparent;
}

.app-nav-account-dropdown-item:hover {
    background: var(--topbar-toggle-bg-hover, rgba(0, 0, 0, 0.06)) !important;
    text-decoration: none !important;
}

.app-nav-account-dropdown-item .bi {
    font-size: 1.1rem !important;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}

.app-nav-account-dropdown-emoji {
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
    font-size: 1.05rem;
    line-height: 1;
}

@media (max-width: 640.98px) {
    /* Narrow top bar: settings icons do not fit inline. Profile opens a dropdown instead. */
    .app-nav--top .app-nav-secondary-toggle,
    .app-nav--top .app-nav-secondary {
        display: none !important;
    }

    .app-nav--top .app-nav-account-link {
        display: none !important;
    }

    .app-nav--top .app-nav-account-menu-btn {
        display: inline-flex;
    }

    .app-nav--top .app-nav-account-dropdown.is-open {
        display: block;
    }
}

.chat-wrapper.chat-panel-closed .chat-column {
    display: none !important;
}

.chat-wrapper.chat-panel-closed .browser-splitter {
    display: none !important;
}

.chat-wrapper.chat-panel-closed.browser-panel-open {
    flex-direction: row !important;
}

.chat-wrapper.chat-panel-closed.browser-panel-open .browser-panel {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
}

.page.chat-panel-closed .sidebar {
    display: none !important;
}

.page.chat-panel-closed main {
    margin-left: 0 !important;
}

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

.bi.spin {
    animation: browser-spin 1s linear infinite;
}

.chat-container {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 1rem 195px;  /* reserve space for taller 3-line input bar */
    background: var(--color-chat-bg);
    max-width: 1080px;
    margin: 0 auto;
    width: 100%;
    scroll-behavior: smooth;
}

.message-row { display: flex; margin-bottom: 0.75rem; }

.message-me {
    margin-left: auto;
    background: var(--color-bubble-user);
    color: var(--color-text);
    padding: 0.6rem 1rem;
    border-radius: 12px;
    max-width: 70%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.message-bot {
    position: relative;
    margin-right: auto;
    background: var(--color-bubble-ai);
    color: var(--color-text);
    padding: 0.6rem 1rem;
    padding-top: 1.75rem;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    max-width: 100%;
    width: fit-content;
}

.message-bot-menu {
    position: absolute;
    top: 4px;
    right: 4px;
    opacity: 0.5;
    transition: opacity 0.15s ease;
    z-index: 2;
}

.message-bot:hover .message-bot-menu,
.message-bot-menu:focus-within {
    opacity: 1;
}

.bot-message-menu-popup {
    min-width: 160px;
    white-space: nowrap;
}

.chat-doc-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: min(240px, 100%);
    min-height: 36px;
    padding: 4px 28px 4px 8px;
    border: 1px solid var(--cf-border, var(--color-border-strong, #ddd));
    border-radius: 8px;
    background: var(--cf-bg-subtle, var(--color-bg-subtle, #f5f5f5));
    cursor: pointer;
    position: relative;
    text-align: left;
    color: inherit;
}
.chat-doc-chip:hover {
    border-color: var(--color-accent, #2563eb);
}
.chat-doc-chip i {
    font-size: 1rem;
    color: var(--cf-text-muted, #737373);
    flex-shrink: 0;
}
.chat-doc-chip-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.chat-doc-chip-name {
    font-size: 0.75rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text);
}
.chat-doc-chip-size {
    font-size: 0.65rem;
    color: var(--cf-text-muted, #737373);
}
.chat-doc-chip-remove {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e11d48;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 10px;
    line-height: 14px;
    cursor: pointer;
    padding: 0;
}
.chat-text-preview {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 51;
    width: min(720px, 94vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-surface, #fff);
    color: var(--color-text);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
    overflow: hidden;
}
.chat-text-preview-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--cf-border, #e5e5e5);
}
.chat-text-preview-header h4 {
    margin: 0;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-text-preview-header span {
    font-size: 0.75rem;
    color: var(--cf-text-muted, #737373);
    flex-shrink: 0;
}
.chat-text-preview pre {
    margin: 0;
    padding: 12px 14px;
    overflow: auto;
    flex: 1;
    font-size: 0.8rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--cf-bg-subtle, #f5f5f5);
}
.chat-text-preview-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding: 8px 12px;
    border-top: 1px solid var(--cf-border, #e5e5e5);
}

.chat-markdown { max-width: 100%; overflow-x: auto; }
.chat-markdown table, .chat-markdown { overflow-x: auto; }
.chat-markdown th, .chat-markdown td { white-space: nowrap; padding: 6px 10px; border: 1px solid var(--color-border-strong); }
.chat-markdown table::-webkit-scrollbar { height: 8px; }
.chat-markdown table::-webkit-scrollbar-thumb { background: var(--grey-400); border-radius: 4px; }

.typing { font-style: italic; color: var(--color-text-muted); margin-left: 0.5rem; }

/* ====================== COMPACT SEAMLESS INPUT (full-width textarea + toolbar below) ====================== */
/* Always stack: typing area spans full width; actions sit on a second row. Critical for MAUI + mobile WASM. */
.input-area {
    background: var(--color-chat-bg);
    border-top: none;
    box-shadow: none;
    padding: 10px 24px 14px;
    width: 100%;
    box-sizing: border-box;
}

.input-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 6px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 8px 12px 10px;
    max-width: none;
    width: 100%;
    margin: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

.action-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.action-btn:hover { background: var(--color-bg-subtle); color: var(--color-accent); }
.action-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.model-selector {
    font-size: 0.7rem;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    color: var(--color-text);
    font-weight: 500;
    max-width: 160px;
    min-width: 0;
    height: 28px;
    line-height: 1.1;
    flex: 1 1 auto;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.model-selector:focus {
    outline: 1px solid var(--color-accent);
    outline-offset: -1px;
}

.message-wrapper {
    order: 0;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    align-self: stretch;
}

.message-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1rem;
    padding: 6px 4px 4px;
    resize: none;
    min-height: 72px;
    max-height: 140px;
    overflow-y: auto;
    line-height: 1.4;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
    text-align: left;
}

/* Subtle scrollbar for when it does appear after 3 lines */
.message-input::-webkit-scrollbar {
    width: 5px;
}
.message-input::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: 3px;
}
.message-input::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

.message-input:focus { outline: none; }

.message-input::placeholder {
    color: var(--color-text-muted);
}

.send-btn {
    width: 36px; height: 36px;
    border: none;
    background: var(--btn-primary-bg, var(--primary-blue));
    color: var(--btn-primary-text, var(--color-text-inverse, #fff));
    font-size: 1.35rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    margin-left: auto; /* pin send to the right end of the toolbar */
}
.send-btn:hover:not(:disabled) { background: var(--btn-primary-hover, var(--primary-dark)); transform: scale(1.05); }
.send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.attach-btn-wrap {
    position: relative;
    display: flex;
    flex-shrink: 0;
}

.capability-icon {
    font-size: 0.9em;
    color: var(--color-text-muted);
    cursor: default;
    flex-shrink: 0;
}

/* Context usage pill — click to compact (orange ≥80%, red ≥90%) */
.ctx-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    font-size: 0.65rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    max-width: 120px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ctx-btn i {
    font-size: 0.75rem;
}
.ctx-btn:hover:not(:disabled) {
    border-color: var(--color-accent, #2563eb);
    color: var(--color-accent, #2563eb);
    background: var(--color-bg-surface, #fff);
}
.ctx-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.ctx-btn--ok {
    color: var(--color-text-muted);
}
.ctx-btn--warn {
    color: #c2410c;
    border-color: #fdba74;
    background: #fff7ed;
}
.ctx-btn--warn:hover:not(:disabled) {
    color: #9a3412;
    border-color: #fb923c;
    background: #ffedd5;
}
.ctx-btn--danger {
    color: #b91c1c;
    border-color: #fca5a5;
    background: #fef2f2;
}
.ctx-btn--danger:hover:not(:disabled) {
    color: #991b1b;
    border-color: #f87171;
    background: #fee2e2;
}

/* Toolbar row under the full-width textarea (all viewports) */
.input-toolbar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
    flex-shrink: 0;
    order: 1;
}

/* ====================== SIDEBAR ALIGNMENT (NO DOUBLE MARGIN!) ====================== */
/* We rely 100% on MainLayout's existing main { margin-left: 250px } */
@media (min-width: 641px) {
    .chat-wrapper,
    .input-area {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* Mobile */
@media (max-width: 640.98px) {
    .chat-wrapper,
    .input-area {
        margin-left: 0;
        width: 100%;
    }

    /* Sidebar overlays content; main is never pushed sideways on small screens */
    main,
    body main {
        margin-left: 0 !important;
    }

    .sidebar,
    body .sidebar {
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.12);
    }

    .chat-container { padding-bottom: 185px; }

    .input-area {
        padding: 8px 12px 12px !important;
    }

    .input-container,
    body .input-container {
        padding: 8px 10px !important;
    }

    .message-input,
    body .message-input {
        min-height: 48px !important;
        max-height: 120px !important;
    }

    .action-btn,
    body .action-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 1.1rem !important;
    }

    .input-toolbar .send-btn,
    body .input-toolbar .send-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 1.2rem !important;
    }

    .model-selector,
    body .model-selector {
        flex: 1 1 0 !important;
        width: 0 !important;
        max-width: none !important;
        font-size: 0.62rem !important;
        padding: 1px 4px 1px 6px !important;
        height: 26px !important;
    }

    .ctx-btn,
    body .ctx-btn {
        height: 26px !important;
        font-size: 0.58rem !important;
        padding: 0 6px !important;
        max-width: 96px !important;
    }
}

/* Tiny cleanup - base for conversation items, detailed below */
.conversation-item {
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
}

/* The detailed conversation item styles are in the sidebar block below to match main */

@media (min-width: 641px) {
    main { padding-bottom: 0 !important; }   /* prevents any extra push */
}

/* WASM full sidebar layout (for /chat) */
.wasm-page {
    display: flex;
    height: 100vh;
    width: 100%;
}
.wasm-sidebar {
    width: 240px;
    background: var(--color-bg-subtle);
    border-right: 1px solid var(--color-border-strong);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
}
.wasm-sidebar-header {
    padding: 8px 12px;
    font-weight: 600;
    font-size: 0.9em;
    background: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border-strong);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wasm-convo-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
    font-size: 0.82em;
}
.wasm-convo-item {
    padding: 6px 10px;
    margin: 2px 4px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wasm-convo-item.active {
    background: var(--color-bg-subtle);
    font-weight: 500;
}
.wasm-convo-item:hover {
    background: var(--sidebar-hover, var(--color-bg-subtle));
}

/* Ensure conversation items keep menu on same line like main */
.conversation-item .row-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.15rem;
}

.conversation-item .title {
    font-size: 0.9rem;
    margin-bottom: 0.1rem;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-item .menu {
    position: relative;
    flex-shrink: 0;
}

/* Make chat take full width of the right pane in WASM layout (no auto margin) */
.page .chat-container,
.wasm-page .chat-container {
    max-width: none !important;
    margin: 0 !important;
    width: 100% !important;
}

/* cf-brand from main */
.cf-brand {
    color: var(--text-dark);
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Settings page polish for WASM to match main app look */
.settings-content h2 {
    font-size: 2rem;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.settings-content h3 {
    font-size: 1.25rem;
    color: var(--text-dark);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.settings-content label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
    display: block;
}

.settings-content .form-control {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border); 
    border-radius: 6px;
    font-size: 0.95rem;
    background: var(--color-bg-surface);
    color: var(--color-text);
}

.settings-content .form-control:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.settings-content textarea.form-control {
    background: var(--color-bg-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

.settings-content .settings-card {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg-surface);    /* already correct — verify it's not overridden */
    padding: 1.25rem 1.5rem;
    margin-top: 1.25rem;
}

.settings-content .btn {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    border: 1px solid var(--grey-300);
    text-decoration: none;
    display: inline-block;
}

.settings-content .btn-primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-bg);
}

.settings-content .btn-primary:hover {
    background: var(--btn-primary-hover);
    color: var(--btn-primary-text);
}

.settings-content .btn-outline-primary {
    background: transparent;
    color: var(--color-accent, var(--primary-blue));
    border-color: var(--color-accent, var(--primary-blue));
}

.settings-content .btn-outline-primary:hover {
    background: color-mix(in srgb, var(--color-accent, var(--primary-blue)) 14%, transparent);
}

.settings-content .btn-outline-secondary {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border-strong, var(--grey-300));
}

.settings-content .btn-outline-secondary:hover {
    background: var(--color-bg-muted, var(--grey-100));
}

.settings-content .form-control::placeholder,
.settings-content textarea.form-control::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

.settings-content .model-chip {
    display: inline-flex;
    align-items: center;
    background: var(--light-blue-1);
    color: var(--text-dark);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    margin: 0.25rem 0.25rem 0.25rem 0;
    border: 1px solid var(--grey-200);
    cursor: pointer;
}

.settings-content .model-chip:hover {
    background: var(--light-blue-2);
}

.settings-content .model-list {
    margin-top: 0.5rem;
}

.settings-content .ollama-model-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-bg-surface);
}

.settings-content .ollama-model-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--grey-200);
}

.settings-content .ollama-model-row:last-child {
    border-bottom: none;
}

.settings-content .ollama-model-row.is-active {
    background: var(--light-blue-1);
}

.settings-content .ollama-model-row-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
}

.settings-content .ollama-model-row-subtitle {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: 0.1rem;
}

.settings-content .ollama-model-row-meta {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.settings-content .ollama-model-edit-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.25rem 0.35rem;
    border-radius: 4px;
    line-height: 1;
}

.settings-content .ollama-model-edit-btn:hover {
    background: var(--grey-100);
}

.settings-content .ollama-model-row-actions {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
}

.settings-content .ollama-model-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.settings-content .ollama-model-editor {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg-muted); 
}

.settings-content .ollama-model-editor h4 {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
    color: var(--text-dark);
}

.settings-content .ollama-model-editor label {
    margin-top: 0.65rem;
}

.settings-content .ollama-field-hint {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin: 0.15rem 0 0.35rem;
}

.settings-content .ollama-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.85rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--grey-200);
}

.settings-content .ollama-toggle-label {
    margin: 0;
    font-weight: 600;
}

.settings-content .ollama-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.settings-content .ollama-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.settings-content .ollama-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #ccc;
    border-radius: 24px;
    transition: background 0.2s ease;
}

.settings-content .ollama-toggle-slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.settings-content .ollama-toggle input:checked + .ollama-toggle-slider {
    background: var(--primary-blue);
}

.settings-content .ollama-toggle input:checked + .ollama-toggle-slider::before {
    transform: translateX(20px);
}

.settings-content .ollama-editor-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.settings-content .btn-link-style {
    border: none;
    background: transparent;
    color: var(--primary-blue);
    padding: 0.5rem 0.25rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.settings-content .btn-link-style:hover {
    text-decoration: underline;
}

.settings-content .ollama-remove-btn {
    margin-left: auto;
}

.settings-content .ollama-vision-proxy-badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 0.72rem;
    font-weight: 600;
}

.settings-content .settings-card {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg-surface);
    padding: 1.25rem 1.5rem;
    margin-top: 1.25rem;
}

.settings-content .theme-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border);
}

.settings-content .theme-setting-row:first-of-type {
    padding-top: 0;
}

.settings-content .theme-setting-row:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.settings-content .theme-setting-info {
    flex: 1;
    min-width: 0;
}

.settings-content .theme-setting-label {
    margin: 0;
    font-weight: 600;
    color: var(--color-text);
}

.settings-content .theme-setting-desc {
    margin: 0.25rem 0 0;
    font-size: 0.85em;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.settings-content .theme-setting-select {
    min-width: 190px;
    max-width: 220px;
    flex-shrink: 0;
    background: var(--color-bg-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

.settings-content .memory-search-wrap {
    position: relative;
    margin-bottom: 0.75rem;
}

.settings-content .memory-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    font-size: 0.9rem;
    pointer-events: none;
}

.settings-content .memory-search-input {
    padding-left: 2.25rem;
}

.settings-content .memory-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.settings-content .memory-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
    background: var(--color-bg-muted); 
}

.settings-content .memory-text {
    flex: 1;
    min-width: 0;
    font-size: 0.92rem;
    color: var(--color-text); 
    line-height: 1.4;
}

.settings-content .memory-row-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.settings-content .memory-icon-btn {
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    padding: 0.25rem 0.35rem;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1;
}

.settings-content .memory-icon-btn:hover {
    background: var(--color-bg-muted, var(--grey-100));
    color: var(--color-text);
}

.settings-content .memory-icon-btn-danger:hover {
    background: var(--color-error-bg, #fff0f0);
    color: var(--cf-error-fg, #c00);
}

.settings-content .memory-footer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.settings-content .btn-outline-danger {
    background: transparent;
    color: #dc3545;
    border-color: #dc3545;
}

.settings-content .btn-outline-danger:hover {
    background: #fff0f0;
}

.settings-content .btn-outline-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.settings-content .ollama-toggle-row.is-disabled {
    opacity: 0.65;
}

.settings-content .ollama-save-feedback {
    margin-top: 0.85rem;
    padding: 0.55rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
}

.settings-content .ollama-save-feedback.is-success,
.ollama-save-feedback.is-success {
    background: var(--color-success-bg, #ecfdf5);
    border: 1px solid var(--color-success-border, #a7f3d0);
    color: var(--color-success-fg, #047857);
}

.settings-content .ollama-save-feedback.is-error,
.ollama-save-feedback.is-error {
    background: var(--color-error-bg, #fef2f2);
    border: 1px solid var(--color-error, #fecaca);
    color: var(--cf-error-fg, #b91c1c);
}

/* App shell + navigation bar layout */
html[data-nav-layout="left"] {
    --app-nav-width: var(--app-nav-size);
    --app-nav-height: 0px;
    --app-nav-offset-x: var(--app-nav-size);
}

.app-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    box-sizing: border-box;
}

/* Login landing (/ , /account , /login): hide feature chrome. URL-based so WASM static SSR works. */
.app-shell[data-login-landing="1"] .app-nav-primary,
.app-shell[data-login-landing="1"] .app-nav-secondary,
.app-shell[data-login-landing="1"] .app-nav-secondary-toggle,
.app-shell[data-login-landing="1"] .topbar-sidebar-toggle {
    display: none !important;
}

html[data-nav-layout="left"] .app-shell {
    flex-direction: row;
}

.app-body {
    flex: 1;
    min-height: 0;
    min-width: 0;
    padding-top: var(--app-nav-height);
    height: 100%;
    position: relative;
    overflow: visible;
    box-sizing: border-box;
}

html[data-nav-layout="left"] .app-body {
    padding-top: 0;
    padding-left: var(--app-nav-width);
}

.app-nav-left,
.app-nav-right,
.app-nav-primary,
.app-nav-secondary,
.app-nav-account {
    display: flex;
    align-items: center;
}

.app-nav.app-nav--top {
    justify-content: flex-start;
}

.app-nav--top .app-nav-left {
    gap: 0.35rem;
    min-width: 0;
}

.app-nav--top .app-nav-primary {
    gap: 0.35rem;
    margin-left: 0;
}

.app-nav--top .app-nav-primary a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    text-decoration: none;
}

.app-nav-primary a.active {
    background: var(--topbar-toggle-bg-active, var(--topbar-toggle-bg-hover, rgba(0, 0, 0, 0.06)));
    border-color: var(--topbar-toggle-border-active, var(--color-border-strong));
    box-shadow: inset 0 0 0 1px var(--topbar-toggle-border-active, var(--color-border-strong));
}

.app-nav--top .app-nav-right {
    gap: 0.6rem;
    margin-left: auto;
}

.app-nav--top .app-nav-secondary {
    gap: 0.6rem;
}

.app-nav .topbar-sidebar-toggle {
    position: static;
    top: auto;
    left: auto;
    z-index: auto;
    flex-shrink: 0;
    color: var(--color-text);
}

html[data-nav-layout="left"] .app-nav.top-row {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: var(--app-nav-size);
    height: 100vh;
    top: 0;
    left: 0;
    right: auto;
    bottom: 0;
    border-bottom: none;
    border-right: 1px solid var(--color-border);
    padding: 0.5rem 0;
    gap: 0.35rem;
}

html[data-nav-layout="left"] .app-nav-left {
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
    align-items: center;
    flex-shrink: 0;
}

html[data-nav-layout="left"] .app-nav-right {
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
    align-items: center;
    margin-top: auto;
    flex: 1 1 auto;
    justify-content: flex-end;
    padding-bottom: 0.5rem;
    display: flex;
}

/* Left rail: toggle sits above the collapsible settings cluster; profile always last. */
html[data-nav-layout="left"] .app-nav-secondary-toggle {
    order: 0;
}

html[data-nav-layout="left"] .app-nav-secondary {
    order: 1;
}

html[data-nav-layout="left"] .app-nav-account {
    order: 2;
}

html[data-nav-layout="left"] .app-nav-primary,
html[data-nav-layout="left"] .app-nav-secondary,
html[data-nav-layout="left"] .app-nav-account {
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
    align-items: center;
    margin-left: 0;
}

html[data-nav-layout="left"] .app-nav-secondary {
    flex: 0 0 auto;
    justify-content: flex-end;
    padding-top: 0;
}

html[data-nav-layout="left"] .app-nav-account {
    margin-top: 0;
    padding-bottom: 0;
}

html[data-nav-layout="left"] .app-nav-secondary a,
html[data-nav-layout="left"] .app-nav-account a,
html[data-nav-layout="left"] .app-nav-primary a,
html[data-nav-layout="left"] .app-nav-primary .topbar-toggle-btn {
    justify-content: center;
}

/* Top bar / page / sidebar structure (previously copied; now in unified global so WASM + any server pages share) */
.top-row {
    background: var(--color-topbar-bg);
    border-bottom: 1px solid var(--color-border);
    height: var(--app-nav-size);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 var(--space-4);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-sizing: border-box;
}

.top-row a,
.top-row .btn-link {
    color: var(--primary-dark);
    text-decoration: none;
    white-space: nowrap;
    margin-left: var(--space-0);
}

.top-row a:hover,
.top-row .btn-link:hover {
    text-decoration: underline;
}

.top-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-left: 40px;
}

/* Right side icon group in WasmTopBar (and shell for WASM routes) - now class-based so CSS is single source */
.top-row-right,
.top-row > div:last-child {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.top-row-right a,
.top-row > div:last-child a {
    color: var(--primary-dark);
    text-decoration: none;
    display: flex;
    align-items: center;
}

.top-row-right a,
.top-row > div:last-child a {
    border-radius: var(--radius-md);
    transition: background 0.2s ease;
}

.top-row-right a:hover,
.top-row > div:last-child a:hover {
    background: rgba(0, 0, 0, 0.05);
}


.top-left a,
.top-row > div:last-child a {
    color: var(--primary-dark);
    text-decoration: none;
    display: flex;
    align-items: center;
}

.top-left a,
.top-row > div:last-child a {
    border-radius: var(--radius-md);
    transition: background 0.2s ease;
}



.top-left a:hover,
.top-row > div:last-child a:hover {
    background: rgba(0, 0, 0, 0.05);
}

.top-row-right a i,
.top-row-right a .bi,
.top-row > div:last-child a i,
.top-row > div:last-child a .bi,
.app-nav-secondary a i,
.app-nav-secondary a .bi,
.app-nav-account a i,
.app-nav-account a .bi,
.app-nav-account button i,
.app-nav-account button .bi,
.app-nav-primary a i,
.app-nav-primary a .bi {
    font-size: 1.35rem;
}

/* Legacy sidebar-toggle (no longer used on pages; top bar uses .topbar-sidebar-toggle) */
.sidebar-toggle {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: var(--color-text);
}

/* Basic page and sidebar for WASM layout to mimic main */
.page {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

.sidebar {
    width: 250px;
    min-width: 220px;
    flex-shrink: 0;
    background: var(--color-sidebar-bg);
    border-right: 1px solid var(--color-sidebar-border);
    overflow-y: auto;
    position: fixed;
    top: var(--app-nav-height);
    left: var(--app-nav-offset-x);
    height: calc(100vh - var(--app-nav-height));
    z-index: 900;
    box-sizing: border-box;
}

main {
    flex: 1;
    margin-top: 0;
    margin-left: 250px;
    min-width: 0;
    background: var(--color-bg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--app-nav-height));
    box-sizing: border-box;
}

html[data-nav-layout="left"] main {
    height: 100vh;
}

/* Chat area flex to keep input at bottom */
.chat-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    z-index: 1;
    position: relative;
}

/* Sidebar collapsed state (via page class, controlled by SidebarState service) */
.page.sidebar-collapsed .sidebar {
    display: none !important;
}

.page.sidebar-collapsed main {
    margin-left: 0 !important;
}

.wasm-sidebar .menu {
    position: relative;
}

/* ========================================
   WASM Sidebar to match main server site (adapted from NavMenu.razor.css)
   Using .sidebar to match current page structure
   ======================================== */

.sidebar .cf-nav,
.cf-nav {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
    color: var(--color-text);
}

.sidebar .cf-item,
.cf-item {
    padding: 4px 12px;
}

.sidebar .cf-link,
.cf-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 500;
}

.sidebar .conversation-item,
.conversation-item {
    padding: 6px 12px;
    margin: 0;
    line-height: 1.2;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    color: var(--color-text);
}

.sidebar .conversation-item:hover,
.conversation-item:hover {
    background: var(--color-sidebar-hover);
}

.sidebar .conversation-item.active,
.conversation-item.active {
    background: var(--color-sidebar-active);
    border-left: 3px solid var(--primary-blue);
}

.sidebar .conversation-item .row-top,
.conversation-item .row-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.sidebar .conversation-item .title,
.conversation-item .title {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar .conversation-item .date,
.conversation-item .date {
    font-size: 12px;
    opacity: 0.7;
    color: var(--color-text);
}

.sidebar .menu-button,
.menu-button {
    background: none;
    border: none;
    color: var(--color-text);
    cursor: pointer;
    padding: 4px;
    opacity: 0.6;
    font-size: 14px;
}

.sidebar .menu-button:hover,
.menu-button:hover {
    opacity: 1;
    background: var(--color-bg-muted);
    border-radius: 4px;
}

.sidebar .menu-popup,
.menu-popup {
    position: fixed;  /* use fixed to escape overflow clipping and stacking contexts */
    background: var(--color-bg-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
    border-radius: 6px;
    padding: 4px 8px;
    margin-top: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    z-index: 10000;
    font-size: 13px;
}

.sidebar .menu-popup div,
.menu-popup div {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    cursor: pointer;
}

.sidebar .menu-popup div:hover,
.menu-popup div:hover {
    background: var(--color-bg-muted);
}

.sidebar .menu-overlay,
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    z-index: 9999;
}

/* ========================================
   WASM / Chat page layout forces (to ensure topbar blue, spacing, sidebar, chat area
   render correctly when using the unified CSS in InteractiveWebAssembly mode.
   These !important rules guarantee the visual from the original wasm-chat.css even
   if order or other styles interfere. They target the structure in WasmLayout + WasmChat.
   ======================================== */

/* Force the topbar (WasmTopBar) to have blue shading and proper flex layout */
body .top-row,
.top-row {
    background: var(--color-topbar-bg) !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    height: var(--app-nav-size) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    padding: 0 1rem !important;
    box-sizing: border-box !important;
}

.app-nav--top .app-nav-right {
    margin-left: auto !important;
}

html[data-nav-layout="left"] body .app-nav.top-row,
html[data-nav-layout="left"] .app-nav.top-row {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: var(--app-nav-size) !important;
    height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    border-bottom: none !important;
    border-right: 1px solid var(--color-border) !important;
    padding: 0.5rem 0 !important;
    gap: 0.35rem !important;
}

html[data-nav-layout="left"] .app-nav-left {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    flex-shrink: 0 !important;
}

html[data-nav-layout="left"] .app-nav-right {
    flex-direction: column !important;
    align-items: center !important;
    margin-left: 0 !important;
    margin-top: auto !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
    padding-bottom: 0.5rem !important;
}

html[data-nav-layout="left"] .app-nav-primary,
html[data-nav-layout="left"] .app-nav-secondary,
html[data-nav-layout="left"] .app-nav-account {
    flex-direction: column !important;
    align-items: center !important;
    margin-left: 0 !important;
    width: 100% !important;
}

html[data-nav-layout="left"] .app-nav-secondary {
    flex: 0 0 auto !important;
}

html[data-nav-layout="left"] .app-nav-account {
    margin-top: 0 !important;
}

.app-nav .topbar-sidebar-toggle,
body .app-nav .topbar-sidebar-toggle,
.topbar-sidebar-toggle {
    position: static !important;
    top: auto !important;
    left: auto !important;
    z-index: auto !important;
    color: var(--color-text) !important;
    flex-shrink: 0 !important;
}

html[data-nav-layout="left"] .app-body {
    padding-top: 0 !important;
    padding-left: var(--app-nav-width) !important;
}

html[data-nav-layout="left"] main {
    height: 100vh !important;
}

/* Left side (logo area) */
body .top-left,
.top-left {
    display: flex !important;
    align-items: center !important;
    gap: 1.5rem !important;
}

/* Right side icons container (the div with gear/person) gets pushed right. Supports both legacy inline div and new .top-row-right class. */
.top-row > div:last-child,
.top-row-right {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
}

.top-row-right a,
.top-row > div:last-child a {
    color: var(--primary-dark) !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
}

/* Beat the rule above: mobile uses only the profile menu button, not the /account link. */
@media (max-width: 640.98px) {
    .top-row.app-nav .app-nav-account > a.app-nav-account-link,
    .top-row.app-nav .app-nav-account > button.app-nav-account-link,
    .top-row > div:last-child .app-nav-account > a.app-nav-account-link {
        display: none !important;
    }
}

.top-row-right a,
.top-row > div:last-child a {
    border-radius: var(--radius-md) !important;
    transition: background 0.2s ease !important;
}

[data-theme="dracula"] .top-row-right a,
[data-theme="dracula"] .top-row > div:last-child a {
    transition: background 0.2s ease !important;
}

[data-theme="dracula"] .top-row-right a:hover,
[data-theme="dracula"] .top-row > div:last-child a:hover {
    background: rgba(189, 147, 249, 0.2) !important;
}

[data-theme="dracula"] .top-left a:hover,
[data-theme="dracula"] .app-nav-primary a:hover,
[data-theme="dracula"] .app-nav-secondary a:hover,
[data-theme="dracula"] .app-nav-account a:hover {
    background: rgba(189, 147, 249, 0.15) !important;
}

/* --- app-dark topbar icon hover (neutral grey/white) --- */
[data-theme="app-dark"] .top-row-right a:hover,
[data-theme="app-dark"] .top-row > div:last-child a:hover {
    background: rgba(255, 255, 255, 0.10) !important;
}

[data-theme="app-dark"] .top-left a:hover,
[data-theme="app-dark"] .app-nav-primary a:hover,
[data-theme="app-dark"] .app-nav-secondary a:hover,
[data-theme="app-dark"] .app-nav-account a:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* --- dark-blue topbar icon hover (legacy blue accent) --- */
[data-theme="dark-blue"] .top-row-right a:hover,
[data-theme="dark-blue"] .top-row > div:last-child a:hover {
    background: rgba(124, 203, 255, 0.18) !important;
}

[data-theme="dark-blue"] .top-left a:hover,
[data-theme="dark-blue"] .app-nav-primary a:hover,
[data-theme="dark-blue"] .app-nav-secondary a:hover,
[data-theme="dark-blue"] .app-nav-account a:hover {
    background: rgba(124, 203, 255, 0.12) !important;
}

/* --- Nord topbar icon hover --- */
[data-theme="nord"] .top-row-right a:hover,
[data-theme="nord"] .top-row > div:last-child a:hover {
    background: rgba(136, 192, 208, 0.15) !important;
}

[data-theme="nord"] .top-left a:hover,
[data-theme="nord"] .app-nav-primary a:hover,
[data-theme="nord"] .app-nav-secondary a:hover,
[data-theme="nord"] .app-nav-account a:hover {
    background: rgba(136, 192, 208, 0.1) !important;
}

/* --- Solarized Light topbar icon hover (light theme — accent-based) --- */
[data-theme="solarized-light"] .top-row-right a:hover,
[data-theme="solarized-light"] .top-row > div:last-child a:hover {
    background: rgba(38, 139, 210, 0.1) !important;
}

[data-theme="solarized-light"] .top-left a:hover,
[data-theme="solarized-light"] .app-nav-primary a:hover,
[data-theme="solarized-light"] .app-nav-secondary a:hover,
[data-theme="solarized-light"] .app-nav-account a:hover {
    background: rgba(38, 139, 210, 0.07) !important;
}

/* --- Bluish Light topbar icon hover --- */
[data-theme="light-blue"] .top-row-right a:hover,
[data-theme="light-blue"] .top-row > div:last-child a:hover {
    background: rgba(59, 167, 255, 0.14) !important;
}

[data-theme="light-blue"] .top-left a:hover,
[data-theme="light-blue"] .app-nav-primary a:hover,
[data-theme="light-blue"] .app-nav-secondary a:hover,
[data-theme="light-blue"] .app-nav-account a:hover {
    background: rgba(59, 167, 255, 0.10) !important;
}

/* --- Modern Light (Grok-style) topbar icon hover --- */
[data-theme="app-light"] .top-row-right a:hover,
[data-theme="app-light"] .top-row > div:last-child a:hover,
:root:not([data-theme]) .top-row-right a:hover,
:root:not([data-theme]) .top-row > div:last-child a:hover {
    background: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="app-light"] .top-left a:hover,
[data-theme="app-light"] .app-nav-primary a:hover,
[data-theme="app-light"] .app-nav-secondary a:hover,
[data-theme="app-light"] .app-nav-account a:hover,
:root:not([data-theme]) .top-left a:hover,
:root:not([data-theme]) .app-nav-primary a:hover,
:root:not([data-theme]) .app-nav-secondary a:hover,
:root:not([data-theme]) .app-nav-account a:hover {
    background: rgba(0, 0, 0, 0.05) !important;
}

/* Topbar panel toggles — theme-aware borders/backgrounds (dark themes need accent contrast) */
body .topbar-toggle-btn,
.topbar-toggle-btn {
    border: 1px solid var(--topbar-toggle-border, var(--color-border-strong)) !important;
    background: var(--topbar-toggle-bg, transparent) !important;
    color: var(--topbar-toggle-color, var(--primary-dark)) !important;
}

body .topbar-toggle-btn:hover,
.topbar-toggle-btn:hover {
    background: var(--topbar-toggle-bg-hover) !important;
    border-color: var(--topbar-toggle-border-hover, var(--topbar-toggle-border)) !important;
}

body .topbar-toggle-btn.active,
.topbar-toggle-btn.active {
    background: var(--topbar-toggle-bg-active) !important;
    border-color: var(--topbar-toggle-border-active, var(--topbar-toggle-border-hover)) !important;
    box-shadow: inset 0 0 0 1px var(--topbar-toggle-border-active, var(--topbar-toggle-border-hover)) !important;
}

.top-row-right a i,
.top-row-right a .bi,
.top-row > div:last-child a i,
.top-row > div:last-child a .bi {
    font-size: 1.35rem !important;
}

/* Sidebar for WASM chat page */
body .sidebar,
.sidebar {
    width: 250px !important;
    min-width: 220px !important;
    background: var(--color-sidebar-bg) !important;
    border-right: 1px solid var(--color-sidebar-border) !important;
    color: var(--color-text) !important;
    position: fixed !important;
    top: var(--app-nav-height) !important;
    left: var(--app-nav-offset-x) !important;
    height: calc(100vh - var(--app-nav-height)) !important;
    z-index: 900 !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

/* Main content area pushed by sidebar */
body main,
main {
    margin-left: 250px !important;
    background: var(--color-bg) !important;
    color: var(--color-text) !important;
    min-width: 0 !important;
}

/* When sidebar collapsed via .page.sidebar-collapsed (used in WasmChat) */
body .page.sidebar-collapsed .sidebar,
.page.sidebar-collapsed .sidebar {
    display: none !important;
}

body .page.sidebar-collapsed main,
.page.sidebar-collapsed main {
    margin-left: 0 !important;
}

/* Mobile: sidebar overlays content at full width (never pushes main sideways) */
@media (max-width: 640.98px) {
    body main,
    main {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .page:not(.sidebar-collapsed) .sidebar,
    body .page:not(.sidebar-collapsed) .sidebar {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 1200 !important;
        box-shadow: none !important;
    }

    body .sidebar-toggle,
    .sidebar-toggle {
        z-index: 1300 !important;
    }

    .notes-fab {
        z-index: 800;
    }
}

/* Chat area */
body .chat-wrapper,
.chat-wrapper {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    height: 100% !important;
    z-index: 1 !important;
    position: relative !important;
    background: var(--color-chat-bg) !important;
}

/* Browser panel: side-by-side layout (overrides column !important above) */
body .chat-wrapper.browser-panel-open,
.chat-wrapper.browser-panel-open {
    flex-direction: row !important;
    align-items: stretch !important;
}

body .browser-panel-open .chat-column,
.browser-panel-open .chat-column {
    min-width: 280px !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body .browser-panel-open .chat-container,
.browser-panel-open .chat-container {
    max-width: none !important;
    margin: 0 !important;
    padding-bottom: 150px !important;
}

body .browser-panel-open .input-area,
.browser-panel-open .input-area {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 10px 10px !important;
}

body .browser-panel-open .input-container,
.browser-panel-open .input-container {
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    padding: 8px 10px !important;
}

body .browser-panel-open .input-toolbar,
.browser-panel-open .input-toolbar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    flex-shrink: 0 !important;
}

body .browser-panel-open .message-wrapper,
.browser-panel-open .message-wrapper {
    order: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
}

body .browser-panel-open .message-input,
.browser-panel-open .message-input {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 72px !important;
    max-height: 100px !important;
}

body .browser-panel-open .model-selector,
.browser-panel-open .model-selector {
    flex: 1 1 auto !important;
    max-width: none !important;
    min-width: 0 !important;
}

body .browser-splitter,
.browser-splitter {
    flex: 0 0 4px !important;
    width: 4px !important;
    cursor: ew-resize !important;
    background: transparent !important;
    align-self: stretch !important;
    z-index: 20 !important;
    position: relative !important;
}

body .browser-panel,
.browser-panel {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body .chat-wrapper.chat-panel-closed .chat-column,
.chat-wrapper.chat-panel-closed .chat-column {
    display: none !important;
}

body .chat-wrapper.chat-panel-closed .browser-splitter,
.chat-wrapper.chat-panel-closed .browser-splitter {
    display: none !important;
}

body .chat-wrapper.chat-panel-closed.browser-panel-open .browser-panel,
.chat-wrapper.chat-panel-closed.browser-panel-open .browser-panel {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
}

body .page.chat-panel-closed .sidebar,
.page.chat-panel-closed .sidebar {
    display: none !important;
}

body .page.chat-panel-closed main,
.page.chat-panel-closed main {
    margin-left: 0 !important;
}

body .chat-container,
.chat-container {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 1.5rem 1rem 195px !important;
    background: var(--color-chat-bg) !important;
    max-width: 1080px !important;
    margin: 0 auto !important;
    width: 100% !important;
    scroll-behavior: smooth !important;
}

/* Input bar at bottom */
body .input-area,
.input-area {
    background: var(--color-chat-bg) !important;
    border-top: none !important;
    box-shadow: none !important;
    padding: 10px 24px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body .input-container,
.input-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    background: var(--color-bg-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 18px !important;
    padding: 8px 12px 10px !important;
    width: 100% !important;
    margin: 0 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
    box-sizing: border-box !important;
}

body .message-wrapper,
.message-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
}

body .input-toolbar,
.input-toolbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
}

/* Message input textarea — full width of the card (not squeezed between side buttons) */
body .message-input,
.message-input {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 1rem !important;
    padding: 6px 4px 4px !important;
    resize: none !important;
    min-height: 72px !important;
    max-height: 140px !important;
    overflow-y: auto !important;
    line-height: 1.4 !important;
}

/* Send button */
body .send-btn,
.send-btn {
    width: 36px !important;
    height: 36px !important;
    border: none !important;
    background: var(--btn-primary-bg, var(--primary-blue)) !important;
    color: var(--btn-primary-text, var(--color-text-inverse)) !important;
    font-size: 1.35rem !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

/* Sidebar toggle in app nav uses topbar-toggle-btn layout (in-flow, not absolute) */
body .app-nav .topbar-sidebar-toggle,
.app-nav .topbar-sidebar-toggle {
    position: static !important;
    top: auto !important;
    left: auto !important;
    z-index: auto !important;
}

/* Basic convo and nav items for sidebar in chat */
body .cf-nav,
.cf-nav {
    display: flex !important;
    flex-direction: column !important;
    padding: 4px 0 !important;
}

body .cf-item,
.cf-item {
    padding: 4px 12px !important;
}

body .conversation-item,
.conversation-item {
    padding: 6px 12px !important;
    margin: 2px 4px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    color: var(--color-text) !important;
}

body .conversation-item.active,
.conversation-item.active {
    background: var(--color-sidebar-active) !important;
    border-left: 3px solid var(--primary-blue) !important;
}

/* Message bubbles already have some, but reinforce for WASM (and ensure base rules from earlier in file also apply now that CSS is balanced) */
body .message-row,
.message-row {
    display: flex !important;
    margin-bottom: 0.75rem !important;
}

body .message-me,
.message-me {
    margin-left: auto !important;
    background: var(--bubble-blue) !important;
    color: var(--text-dark) !important;
    padding: 0.6rem 1rem !important;
    border-radius: 12px !important;
    max-width: 70% !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    display: block !important; /* ensure it acts as a block container for its timestamp etc */
}

body .message-bot,
.message-bot {
    margin-right: auto !important;
    background: var(--bubble-ai-bg, #ffffff) !important;
    color: var(--text-dark) !important;
    padding: 0.6rem 1rem !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    max-width: 100% !important;
    width: fit-content !important;
}

/* Narrow phones: slightly tighter toolbar (stacked layout is already the default everywhere) */
@media (max-width: 640.98px) {
    body .model-selector,
    .model-selector {
        flex: 1 1 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body .input-toolbar .send-btn,
    .input-toolbar .send-btn {
        margin-left: auto !important;
    }
}

/* ========================================
    Notes / NewNote styles
    ======================================== */

.newnote-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20000;
}

.newnote-modal {
    background: var(--color-bg-surface, #141414);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 24px;
    min-width: 380px;
    max-width: 500px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

.newnote-modal h4,
.newnote-modal p {
    color: inherit;
}

.newnote-modal h4 {
    color: var(--color-text);
}

.newnote-modal p {
    color: var(--color-text-muted);
}

.newnote-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--color-bg-surface);
    color: var(--color-text);
}

.newnote-select:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    background: var(--color-bg-muted);
}

.newnote-select:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.newnote-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--color-bg-muted, var(--color-bg-surface));
    color: var(--color-text);
}

.newnote-input::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

.newnote-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent, #e5e5e5) 25%, transparent);
}

.newnote-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    border: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    color: var(--color-text);
    transition: background 0.2s ease;
}

.newnote-btn:hover:not(:disabled) {
    background: var(--color-bg-muted);
}

.newnote-btn-primary {
    background: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
    border-color: var(--btn-primary-bg) !important;
}

.newnote-btn-primary:hover:not(:disabled) {
    background: var(--btn-primary-hover) !important;
    border-color: var(--btn-primary-hover) !important;
    color: var(--btn-primary-text) !important;
}

.newnote-btn-secondary {
    background: var(--color-bg-muted) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

.newnote-btn-danger {
    background: var(--color-error) !important;
    color: var(--color-text-inverse) !important;
    border-color: var(--color-error) !important;
}

.newnote-btn-danger:hover:not(:disabled) {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
}

.newnote-btn-ghost {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--color-text-muted) !important;
}

.newnote-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ====================== NOTES QUILL EDITOR ====================== */
.note-entry-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    max-width: 100%;
    margin-bottom: 10px;
}

.note-entry-wrap .message-bot {
    width: 100% !important;
    max-width: 100% !important;
}

.note-response-actions {
    position: absolute;
    top: -12px;
    right: 8px;
    display: flex;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 8px;
    z-index: 2;
    opacity: 0.5;
    transition: opacity 0.15s ease;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    background: var(--color-bg-surface, var(--note-paper, #fff));
}

.note-entry-wrap:hover .note-response-actions,
.note-entry-wrap.note-editing .note-response-actions,
.note-response-actions:focus-within {
    opacity: 1;
}

.note-entry-wrap.note-editing .note-response-actions {
    position: sticky;
    top: 8px;
    z-index: 6;
}

.note-action-btn {
    padding: 2px 6px;
}

.message-bot:not(.note-editing) {
    cursor: text;
}

.notes-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 900;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-bubble-user);
    border: 1px solid var(--color-accent-dark, var(--primary-dark));
    box-shadow: 0 4px 12px rgba(31, 42, 55, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.notes-fab:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(31, 42, 55, 0.2);
}

.notes-fab .cf-icon {
    font-size: 30px;
    color: var(--color-accent-dark, var(--primary-dark));
}

/* ========== Gallery ========== */
.gallery-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px 6px 16px;
    flex-shrink: 0;
}

.gallery-layout-toggle {
    display: inline-flex;
    gap: 4px;
    background: var(--color-bg-muted, rgba(0,0,0,0.04));
    border-radius: 8px;
    padding: 2px;
}

.gallery-layout-toggle button {
    border: none;
    background: transparent;
    color: var(--cf-text-muted);
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
}

.gallery-layout-toggle button.active {
    background: var(--color-bubble-user, #fff);
    color: var(--color-text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.gallery-content {
    flex: 1;
    overflow: auto;
    padding: 8px 12px 80px 12px;
    min-height: 0;
}

.gallery-grid--square {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}

.gallery-grid--masonry {
    column-count: 3;
    column-gap: 8px;
}

@media (max-width: 900px) {
    .gallery-grid--masonry { column-count: 2; }
}
@media (max-width: 520px) {
    .gallery-grid--masonry { column-count: 1; }
    .gallery-grid--square { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

.gallery-tile {
    position: relative;
    break-inside: avoid;
    margin-bottom: 8px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-bg-muted, #eee);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.gallery-grid--square .gallery-tile {
    margin-bottom: 0;
    aspect-ratio: 1;
}

.gallery-tile img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
}

.gallery-grid--square .gallery-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-tile-menu {
    position: absolute;
    top: 6px;
    right: 6px;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 2;
}

.gallery-tile:hover .gallery-tile-menu,
.gallery-tile:focus-within .gallery-tile-menu {
    opacity: 1;
}

.gallery-tile-menu .menu-button {
    background: rgba(0,0,0,0.45);
    color: #fff;
    border: none;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.gallery-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    color: var(--cf-text-muted);
    text-align: center;
    padding: 2rem;
}

.gallery-lightbox {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    background: var(--color-chat-bg, #f5f5f5);
}

.gallery-lightbox-top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    flex-shrink: 0;
}

.gallery-lightbox-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    position: relative;
    padding: 0 56px 24px 56px;
}

.gallery-lightbox-stage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}

.gallery-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--color-border, rgba(0,0,0,0.1));
    background: var(--color-bubble-user, #fff);
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.gallery-nav-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.gallery-nav-btn--prev { left: 8px; }
.gallery-nav-btn--next { right: 8px; }

.gallery-chat-pick-list {
    max-height: 280px;
    overflow: auto;
    margin: 8px 0;
}

.gallery-chat-pick-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
}

.gallery-chat-pick-item:hover {
    background: var(--color-bg-muted);
}

.gallery-chat-pick-item img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
}

.gallery-chat-pick-item.selected {
    background: var(--color-bubble-user, rgba(209, 231, 255, 0.5));
    outline: 1px solid var(--color-accent-dark, var(--primary-dark));
}

.message-bot.note-editing {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible;
    outline: 2px solid var(--color-accent, var(--primary-blue));
    outline-offset: 2px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent, #3b82f6) 28%, transparent);
}

.message-bot.note-editing .quill-editor-host {
    overflow: visible;
}

.message-bot.note-editing #editor-resizer {
    z-index: 5;
}

.message-bot.note-editing .quill-editor-host .ql-toolbar.ql-snow {
    position: sticky;
    top: 0;
    z-index: 5;
    background: color-mix(in srgb, var(--note-paper-muted, #f6f8fa) 28%, transparent);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.note-ai-toolbar-btn {
    width: 28px;
    height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--note-ink, #1f2a37);
    border-radius: 4px;
}

.note-ai-toolbar-btn:hover {
    background: color-mix(in srgb, var(--note-ink, #1f2a37) 12%, transparent);
}

.note-ai-toolbar-btn.mic-recording {
    color: #e11d48;
}

.notes-mic-status {
    font-size: 0.75em;
    color: var(--cf-text-muted);
    padding: 4px 8px 2px;
}

.notes-mic-status.is-error {
    color: var(--cf-error-fg, #b91c1c);
}

.notes-search-wrap {
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.notes-search-label {
    font-size: 0.8rem;
    margin: 0;
}

.notes-search-status {
    font-size: 0.75em;
    color: var(--cf-text-muted);
}

.notes-search-results {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 220px;
    overflow: auto;
}

.notes-search-hit {
    text-align: left;
    border: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    color: var(--color-text);
    border-radius: 8px;
    padding: 6px 8px;
    cursor: pointer;
}

.notes-search-hit-title {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
}

.notes-search-hit-snippet {
    display: block;
    font-size: 0.72rem;
    color: var(--cf-text-muted);
}

.notes-ask-input {
    resize: vertical;
}

.notes-ask-answer {
    font-size: 0.8rem;
    white-space: pre-wrap;
    color: var(--color-text);
}

.note-audio-list {
    margin-top: 8px;
}

.note-audio-player {
    margin-top: 4px;
}

.note-audio-cues {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.note-audio-cue {
    font-size: 0.7rem;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--cf-text-muted);
    border-radius: 999px;
    padding: 1px 8px;
    cursor: pointer;
}

.note-stt-seg {
    display: inline;
    cursor: pointer;
    border-bottom: none;
    text-decoration: none;
}

.note-stt-seg:hover {
    background: color-mix(in srgb, var(--color-accent, #2563eb) 18%, transparent);
    border-radius: 2px;
}

.note-audio-player-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.note-audio-tool-btn {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--cf-text-muted);
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.note-audio-delete-btn:hover {
    color: #b91c1c;
    border-color: #fecaca;
}

.note-chat-context-card {
    max-width: 100%;
    width: 100%;
    margin-right: auto;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    color: var(--color-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.note-chat-context-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
}

.note-chat-context-preview {
    margin-top: 0.4rem;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.quill-editor-host {
    width: 100%;
    min-width: 280px;
}

/*
 * Note document surface — default light paper/ink. Dark app themes remap --note-*
 * so unstyled text follows the chrome. Authored inline colors/backgrounds are left alone.
 */
:root {
    --note-ink: #1f2a37;
    --note-paper: #ffffff;
    --note-paper-muted: #f6f8fa;
    --note-border: #d0d7de;
    --note-muted: #64748b;
    --note-color-scheme: light;
}

html[data-theme="app-dark"],
html[data-theme="dark-blue"],
html[data-theme="dracula"],
html[data-theme="nord"] {
    --note-ink: var(--color-text);
    --note-paper: var(--color-bg-surface);
    --note-paper-muted: var(--color-bg-muted);
    --note-border: var(--color-border);
    --note-muted: var(--color-text-muted);
    --note-color-scheme: dark;
}

.note-document-surface,
.note-quill-display,
.message-bot .chat-markdown.note-entry-body,
.quill-editor-host {
    color-scheme: var(--note-color-scheme, light);
}

.quill-editor-host .ql-toolbar.ql-snow {
    border: 1px solid var(--note-border, #d0d7de);
    border-radius: 8px 8px 0 0;
    background: var(--note-paper-muted, #f6f8fa);
    font-family: inherit;
    color: var(--note-ink, #1f2a37);
}

.quill-editor-host .ql-toolbar.ql-snow .ql-stroke {
    stroke: var(--note-ink, #444) !important;
}

.quill-editor-host .ql-toolbar.ql-snow .ql-fill {
    fill: var(--note-ink, #444) !important;
}

.quill-editor-host .ql-toolbar.ql-snow .ql-picker {
    color: var(--note-ink, #444) !important;
}

.quill-editor-host .ql-snow .ql-picker-options {
    background: var(--note-paper, #ffffff);
    color: var(--note-ink, #1f2a37);
    border-color: var(--note-border, #d0d7de);
}

.quill-editor-host .ql-snow .ql-tooltip {
    background: var(--note-paper, #ffffff);
    color: var(--note-ink, #1f2a37);
    border-color: var(--note-border, #d0d7de);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.quill-editor-host .ql-snow .ql-tooltip input[type=text] {
    background: var(--note-paper-muted, #f6f8fa);
    color: var(--note-ink, #1f2a37);
    border-color: var(--note-border, #d0d7de);
}

.quill-editor-host .ql-container.ql-snow {
    border: 1px solid var(--note-border, #d0d7de);
    border-top: none;
    border-radius: 0 0 8px 8px;
    background: var(--note-paper, #ffffff);
    color: var(--note-ink, #1f2a37);
    font-family: inherit;
    font-size: 0.95rem;
    min-height: 120px;
}

.quill-editor-host .ql-editor {
    min-height: 120px;
    line-height: 1.5;
    color: var(--note-ink, #1f2a37);
    background: var(--note-paper, #ffffff);
}

.quill-editor-host .ql-editor.ql-blank::before {
    color: var(--note-muted, #94a3b8);
    font-style: normal;
}

/* Read-only saved HTML notes: match Quill editor typography, not .chat-markdown / Bootstrap p margins */
.note-quill-display {
    max-width: 100%;
    overflow-x: auto;
    background: var(--note-paper, #ffffff);
    color: var(--note-ink, #1f2a37);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--note-border, #d0d7de);
}

.note-quill-display.ql-snow {
    border: 1px solid var(--note-border, #d0d7de);
}

.note-quill-display .ql-editor {
    padding: 0;
    min-height: 0;
    overflow: visible;
    line-height: 1.5;
    font-size: 0.95rem;
    color: var(--note-ink, #1f2a37);
    background: transparent;
    font-family: inherit;
    /* Quill's .ql-editor uses pre-wrap; markdown/HTML source newlines would show as blank lines. */
    white-space: normal;
}

/* Match Quill editor spacing in read-only view (Bootstrap p/li margins otherwise explode). */
.note-quill-display .ql-editor p,
.note-quill-display .ql-editor h1,
.note-quill-display .ql-editor h2,
.note-quill-display .ql-editor h3,
.note-quill-display .ql-editor h4,
.note-quill-display .ql-editor ul,
.note-quill-display .ql-editor ol,
.note-quill-display .ql-editor pre,
.note-quill-display .ql-editor blockquote {
    margin: 0 !important;
}

.note-quill-display .ql-editor li {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.note-quill-display .ql-editor ul > li {
    list-style-type: disc;
    list-style-position: outside;
    margin-left: 1.5em !important;
    padding-left: 0.25em !important;
}

.note-quill-display .ql-editor li > p {
    margin: 0 !important;
}

/* Plain-text / markdown note entries — same isolated paper */
.message-bot .chat-markdown.note-entry-body {
    background: var(--note-paper, #ffffff);
    color: var(--note-ink, #1f2a37);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--note-border, #d0d7de);
}

.message-bot .chat-markdown.note-entry-body,
.message-bot .chat-markdown.note-entry-body * {
    color: inherit;
}

.note-quill-display .ql-editor a,
.quill-editor-host .ql-editor a,
.message-bot .chat-markdown.note-entry-body a {
    color: var(--color-accent, #0969da);
}

/* Roadmap + Architecture markdown pages */
.roadmap-content h1,
.architecture-content h1 {
    font-size: 1.75rem;
    margin: 1.5rem 0 1rem;
    color: var(--text-dark);
}

.roadmap-content h2,
.architecture-content h2 {
    font-size: 1.35rem;
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--grey-200);
    color: var(--text-dark);
}

.roadmap-content h3,
.architecture-content h3 {
    font-size: 1.1rem;
    margin: 1.25rem 0 0.5rem;
    color: var(--text-dark);
}

.roadmap-content table,
.architecture-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.5rem;
    font-size: 0.9rem;
}

.roadmap-content th,
.architecture-content th,
.roadmap-content td,
.architecture-content td {
    border: 1px solid var(--grey-200);
    padding: 0.5rem 0.65rem;
    text-align: left;
    vertical-align: top;
}

.roadmap-content th,
.architecture-content th {
    background: var(--light-blue-2);
    font-weight: 600;
}

.roadmap-content tr:nth-child(even) td,
.architecture-content tr:nth-child(even) td {
    background: #fafbfc;
}

.roadmap-content img,
.architecture-content img {
    max-width: 100%;
    height: auto;
    margin: 1rem 0;
    border: 1px solid var(--grey-200);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.roadmap-content code,
.architecture-content code {
    background: #f1f5f9;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    font-size: 0.88em;
}

.roadmap-content pre,
.architecture-content pre {
    background: #f8fafc;
    border: 1px solid var(--grey-200);
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
    font-size: 0.85rem;
}

.roadmap-content pre code,
.architecture-content pre code {
    background: none;
    padding: 0;
}

.roadmap-content hr,
.architecture-content hr {
    border: none;
    border-top: 1px solid var(--grey-200);
    margin: 2rem 0;
}

.roadmap-content ul,
.architecture-content ul {
    margin: 0.5rem 0 1rem;
    padding-left: 1.5rem;
}

.roadmap-content li,
.architecture-content li {
    margin: 0.35rem 0;
}


/* ========================================
   THEMES
   ======================================== */
/* app-light is the default :root — no data-theme attribute needed */
/* but alias it explicitly for clarity */
[data-theme="app-light"] {
    /* inherits :root (modern Grok-style light) — nothing to override */
}

/* --- Bluish Light (legacy blue-tinted light) --- */
[data-theme="light-blue"] {
    --primary-blue: #3BA7FF;
    --primary-dark: #1F7FCC;
    --primary-light: #7CCBFF;
    --bubble-blue: #D1E7FF;

    --light-blue-1: #E6F2FF;
    --light-blue-2: #F0F7FF;
    --light-blue-3: #F7FBFF;

    --grey-50:  #F7F9FC;
    --grey-100: #EEF2F6;
    --grey-200: #D9E0E7;
    --grey-300: #C3CCD6;
    --grey-400: #A5AFBA;
    --grey-500: #7E8894;
    --grey-600: #5A6470;

    --text-dark: #1F2A37;

    --btn-primary-bg: var(--primary-blue);
    --btn-primary-text: #ffffff;
    --btn-primary-hover: var(--primary-dark);

    --color-bg:            var(--grey-50);
    --color-bg-surface:    #ffffff;
    --color-bg-subtle:     var(--light-blue-2);
    --color-bg-muted:      var(--grey-100);

    --color-border:        var(--grey-200);
    --color-border-strong: var(--grey-300);

    --color-text:          var(--text-dark);
    --color-text-muted:    var(--grey-500);
    --color-text-inverse:  #ffffff;

    --color-sidebar-bg:        var(--light-blue-2);
    --color-sidebar-hover:     #D1E7FF;
    --color-sidebar-active:    var(--grey-100);
    --color-sidebar-border:    var(--grey-200);

    --color-chat-bg:       var(--light-blue-3);
    --color-bubble-user:   var(--bubble-blue);
    --color-bubble-ai:     #ffffff;

    --color-topbar-bg:     var(--light-blue-2);

    --topbar-toggle-border:        var(--color-border-strong);
    --topbar-toggle-border-hover:  var(--grey-400);
    --topbar-toggle-border-active: var(--primary-dark);
    --topbar-toggle-bg-hover:      color-mix(in srgb, var(--primary-blue) 10%, transparent);
    --topbar-toggle-bg-active:     color-mix(in srgb, var(--primary-blue) 22%, transparent);
    --topbar-toggle-color:         var(--primary-dark);

    --color-accent:        var(--primary-blue);
    --color-accent-dark:   var(--primary-dark);

    --color-info-bg:       #f0f7ff;
    --color-info-border:   #3BA7FF;
    --color-info-fg:       #1F2A37;
    --color-success-bg:    var(--success);
    --color-success-fg:    #14532d;
    --color-success-border: #22c55e;

    --cf-text-muted:   #888;
    --cf-error-fg:     #c00;
    --cf-border:       #e5e5e5;
    --cf-bg-surface:   #ffffff;
    --cf-bg-subtle:    #f0f7ff;
    --cf-bg-muted:     var(--color-bg-muted);
    --cf-info-box-bg:  var(--color-bg-muted);
    --cf-success-fg:   #22c55e;
    --cf-table-th-bg:  #f8f9fa;
}

/* --- Dark (modern AI — near-black / grey / white, ChatGPT-style) --- */
[data-theme="app-dark"] {
    --grey-50:             #0a0a0a;
    --grey-100:            #141414;
    --grey-200:            #2a2a2a;
    --grey-300:            #3f3f3f;
    --light-blue-1:        #1a1a1a;
    --light-blue-2:        #141414;
    --light-blue-3:        #0a0a0a;
    --text-dark:           #ececec;
    --primary-blue:        #e5e5e5;
    --primary-dark:        #f5f5f5;
    --primary-light:       #ffffff;
    --bubble-blue:         #2f2f2f;
    --bubble-ai-bg:        #141414;

    --color-bg:            #0a0a0a;
    --color-bg-surface:    #141414;
    --color-bg-subtle:     #1a1a1a;
    --color-bg-muted:      #212121;

    --color-border:        #2a2a2a;
    --color-border-strong: #3f3f3f;

    --color-text:          #ececec;
    --color-text-muted:    #9b9b9b;
    --color-text-inverse:  #0a0a0a;

    --color-sidebar-bg:        #141414;
    --color-sidebar-hover:     #212121;
    --color-sidebar-active:    #2a2a2a;
    --color-sidebar-border:    #2a2a2a;

    --color-chat-bg:       #0a0a0a;
    --color-bubble-user:   #2f2f2f;
    --color-bubble-ai:     #141414;

    --color-topbar-bg:     #141414;

    --topbar-toggle-border:        #3f3f3f;
    --topbar-toggle-border-hover:  #e5e5e5;
    --topbar-toggle-border-active: #f5f5f5;
    --topbar-toggle-bg-hover:      rgba(255, 255, 255, 0.08);
    --topbar-toggle-bg-active:     rgba(255, 255, 255, 0.14);
    --topbar-toggle-color:         #ececec;

    --color-accent:        #e5e5e5;
    --color-accent-dark:   #ffffff;

    /* Light primary buttons on near-black (ChatGPT/Grok style) */
    --btn-primary-bg:      #ececec;
    --btn-primary-text:    #0a0a0a;
    --btn-primary-hover:   #ffffff;

    --color-error:         #f87171;
    --color-error-bg:      #3d1f1f;
    --color-warning-bg:    #3f3f1e;
    --color-warning-tx:    #eab308;
    --color-warning-bdr:   #6b6b30;

    --color-info-bg:       #1a1a1a;
    --color-info-border:   #3f3f3f;
    --color-info-fg:       #ececec;
    --color-success-bg:    #052e16;
    --color-success-fg:    #bbf7d0;
    --color-success-border: #4ade80;
    --success:             #052e16;

    /* Component cf-* tokens for this theme */
    --cf-text-muted:   #9b9b9b;
    --cf-error-fg:     #f87171;
    --cf-border:       #2a2a2a;
    --cf-bg-surface:   var(--color-bg-surface);
    --cf-bg-subtle:    var(--color-bg-subtle);
    --cf-bg-muted:     var(--color-bg-muted);
    --cf-info-box-bg:  #1a1a1a;
    --cf-success-fg:   #4ade80;
    --cf-table-th-bg:  #1a1a1a;
}

/* --- Dark Blue (legacy blue-tinted dark) --- */
[data-theme="dark-blue"] {
    --grey-50:             #1a1a2e;
    --grey-100:            #1e2a45;
    --grey-200:            #2d3748;
    --grey-300:            #4a5568;
    --light-blue-1:        #1e2a45;
    --light-blue-2:        #16213e;
    --light-blue-3:        #1a1a2e;
    --text-dark:           #e2e8f0;
    --primary-dark:        #7CCBFF;
    --bubble-blue:         #1e3a5f;
    --bubble-ai-bg:        #16213e;

    --color-bg:            #1a1a2e;
    --color-bg-surface:    #16213e;
    --color-bg-subtle:     #0f3460;
    --color-bg-muted:      #1e2a45;

    --color-border:        #2d3748;
    --color-border-strong: #4a5568;

    --color-text:          #e2e8f0;
    --color-text-muted:    #94a3b8;
    --color-text-inverse:  #1a1a2e;

    --color-sidebar-bg:        #16213e;
    --color-sidebar-hover:     var(--color-bubble-user);  /* #1e3a5f — lighter than sidebar bg */
    --color-sidebar-active:    #0f3460;  /* --color-bg-subtle in this theme — distinct from sidebar bg */
    --color-sidebar-border:    #2d3748;
    --color-chat-bg:       #1a1a2e;
    --color-bubble-user:   #1e3a5f;
    --color-bubble-ai:     #16213e;

    --color-topbar-bg:     #16213e;

    --topbar-toggle-border:        #4a5568;
    --topbar-toggle-border-hover:  #7CCBFF;
    --topbar-toggle-border-active: #7CCBFF;
    --topbar-toggle-bg-hover:      rgba(124, 203, 255, 0.18);
    --topbar-toggle-bg-active:     rgba(124, 203, 255, 0.32);

    --color-error:         #f87171;
    --color-error-bg:      #3d1f1f;
    --color-warning-bg:    #3f3f1e;
    --color-warning-tx:    #eab308;
    --color-warning-bdr:   #6b6b30;

    --color-success-bg:    #052e16;
    --color-success-fg:    #bbf7d0;
    --color-success-border: #4ade80;
    --success:             #052e16;

    /* Component cf-* tokens for this theme */
    --cf-text-muted:   #94a3b8;
    --cf-error-fg:     #f87171;
    --cf-border:       #2d3748;
    --cf-bg-surface:   var(--color-bg-surface);
    --cf-bg-subtle:    var(--color-bg-subtle);
    --cf-bg-muted:     var(--color-bg-muted);
}

/* --- Dracula --- */
[data-theme="dracula"] {
    --grey-50:             #282a36;
    --grey-100:            #383a4a;
    --grey-200:            #44475a;
    --grey-300:            #6272a4;
    --light-blue-1:        #383a4a;
    --light-blue-2:        #1e1f29;
    --light-blue-3:        #282a36;
    --text-dark:           #f8f8f2;
    --primary-dark:        #bd93f9;
    --bubble-blue:         #44475a;
    --bubble-ai-bg:        #1e1f29;

    --color-bg:            #282a36;
    --color-bg-surface:    #1e1f29;
    --color-bg-subtle:     #44475a;
    --color-bg-muted:      #383a4a;

    --color-border:        #44475a;
    --color-border-strong: #6272a4;

    --color-text:          #f8f8f2;
    --color-text-muted:    #6272a4;

    --color-sidebar-bg:        #1e1f29;
    --color-sidebar-hover:     var(--color-bg-muted);  /* #383a4a — distinct from sidebar bg */
    --color-sidebar-active:    #44475a;  /* dracula border-strong — visible on sidebar bg */
    --color-sidebar-border:    #44475a;

    --color-chat-bg:       #282a36;
    --color-bubble-user:   #44475a;
    --color-bubble-ai:     #1e1f29;

    --color-topbar-bg:     #1e1f29;

    /* Idle topbar icons: do not inherit light-theme black (--topbar-toggle-color: #0a0a0a) */
    --topbar-toggle-border:        #6272a4;
    --topbar-toggle-border-hover:  #bd93f9;
    --topbar-toggle-border-active: #bd93f9;
    --topbar-toggle-bg:            transparent;
    --topbar-toggle-bg-hover:      rgba(189, 147, 249, 0.22);
    --topbar-toggle-bg-active:     rgba(189, 147, 249, 0.38);
    --topbar-toggle-color:         #f8f8f2;

    --color-accent:        #bd93f9;
    --color-accent-dark:   #9d73d9;

    --color-error:         #ff6e6e;
    --color-error-bg:      #3d1f1f;
    --color-warning-bg:    #44475a;
    --color-warning-tx:    #ffb86c;
    --color-warning-bdr:   #6272a4;

    /* info alerts in Dracula */
    --color-info-bg:       #3b3f50;
    --color-info-border:   #bd93f9;
    --color-info-fg:       #f8f8f2;
    --color-success-bg:    #1a3d2b;
    --color-success-fg:    #bbf7d0;
    --color-success-border: #4ade80;
    --success:             #1a3d2b;

    /* Component cf-* tokens for this theme */
    --cf-text-muted:   #6272a4;
    --cf-error-fg:     #ff6e6e;
    --cf-border:       #44475a;
    --cf-bg-surface:   var(--color-bg-surface); /* adapts to theme surface bg */
    --cf-bg-subtle:    var(--color-bg-subtle);  /* adapts to theme subtle bg */
    --cf-bg-muted:     var(--color-bg-muted);   /* adapts to theme muted bg */
    --cf-info-box-bg:  #3b3f50;
    --cf-success-fg:   #4ade80;
}

/* Dracula: ensure non-toggle nav links (settings cluster) stay readable when idle */
[data-theme="dracula"] .app-nav-primary a,
[data-theme="dracula"] .app-nav-secondary a,
[data-theme="dracula"] .app-nav-account a,
[data-theme="dracula"] .app-nav-emoji-link,
[data-theme="dracula"] .top-row a {
    color: #f8f8f2;
}

[data-theme="dracula"] .app-nav-primary a:hover,
[data-theme="dracula"] .app-nav-secondary a:hover,
[data-theme="dracula"] .app-nav-account a:hover,
[data-theme="dracula"] .top-row a:hover {
    color: #bd93f9;
}

/* --- Nord --- */
[data-theme="nord"] {
    --grey-50:             #2e3440;
    --grey-100:            #3b4252;
    --grey-200:            #4c566a;
    --grey-300:            #616e88;
    --light-blue-1:        #434c5e;
    --light-blue-2:        #3b4252;
    --light-blue-3:        #2e3440;
    --text-dark:           #eceff4;
    --primary-dark:        #88c0d0;
    --bubble-blue:         #4c566a;
    --bubble-ai-bg:        #3b4252;

    --color-bg:            #2e3440;
    --color-bg-surface:    #3b4252;
    --color-bg-subtle:     #434c5e;
    --color-bg-muted:      #3b4252;

    --color-border:        #4c566a;
    --color-border-strong: #616e88;

    --color-text:          #eceff4;
    --color-text-muted:    #9099aa;

    --color-sidebar-bg:        #3b4252;
    --color-sidebar-hover:     var(--light-blue-1);  /* #434c5e — slightly lighter than sidebar bg */
    --color-sidebar-active:    #434c5e;  /* same as hover for nord, but distinct from sidebar bg */
    --color-sidebar-border:    #4c566a;

    --color-chat-bg:       #2e3440;
    --color-bubble-user:   #4c566a;
    --color-bubble-ai:     #3b4252;

    --color-topbar-bg:     #3b4252;

    --topbar-toggle-border:        #616e88;
    --topbar-toggle-border-hover:  #88c0d0;
    --topbar-toggle-border-active: #88c0d0;
    --topbar-toggle-bg-hover:      rgba(136, 192, 208, 0.18);
    --topbar-toggle-bg-active:     rgba(136, 192, 208, 0.32);

    --color-accent:        #88c0d0;
    --color-accent-dark:   #5e9db0;

    --color-error:         #bf616a;
    --color-error-bg:      #3d1f1f;
    --color-warning-bg:    #434c5e;
    --color-warning-tx:    #ebcb8b;
    --color-warning-bdr:   #616e88;

    /* info alerts in Nord */
    --color-info-bg:       #3b4252;
    --color-info-border:   #88c0d0;
    --color-info-fg:       #eceff4;
    --color-success-bg:    #1a3d2b;
    --color-success-fg:    #bbf7d0;
    --color-success-border: #a3be8c;
    --success:             #1a3d2b;

    /* Component cf-* tokens for this theme */
    --cf-text-muted:   #9099aa;
    --cf-error-fg:     #bf616a;
    --cf-border:       #4c566a;
    --cf-bg-surface:   var(--color-bg-surface); /* adapts to theme surface bg */
    --cf-bg-subtle:    var(--color-bg-subtle);  /* adapts to theme subtle bg */
    --cf-bg-muted:     var(--color-bg-muted);   /* adapts to theme muted bg */
    --cf-info-box-bg:  #3b4252;
    --cf-success-fg:   #a3be8c;

    --cf-status-online:  #a3be8c;
    --cf-status-offline: var(--color-text-muted);
}

/* --- Solarized Light --- */
[data-theme="solarized-light"] {
    --grey-50:             #fdf6e3;
    --grey-100:            #ede8d5;
    --grey-200:            #ccc4a8;
    --grey-300:            #b5ae95;
    --light-blue-1:        #e8e2cf;
    --light-blue-2:        #eee8d5;
    --light-blue-3:        #fdf6e3;
    --text-dark:           #657b83;
    --primary-dark:        #268bd2;
    --bubble-blue:         #d4cdb5;
    --bubble-ai-bg:        #eee8d5;

    --color-bg:            #fdf6e3;
    --color-bg-surface:    #eee8d5;
    --color-bg-subtle:     #e8e2cf;
    --color-bg-muted:      #ede8d5;

    --color-border:        #ccc4a8;
    --color-border-strong: #b5ae95;

    --color-text:          #657b83;
    --color-text-muted:    #93a1a1;

    --color-sidebar-bg:        #eee8d5;
    --color-sidebar-hover:     var(--grey-50);  /* #fdf6e3 — visibly lighter than sidebar bg */
    --color-sidebar-active:    var(--light-blue-1);  /* #e8e2cf — visible vs sidebar bg in solarized-light */
    --color-chat-bg:           var(--light-blue-3);
    --color-bubble-user:   #d4cdb5;
    --color-bubble-ai:     #eee8d5;

    --color-topbar-bg:     #eee8d5;

    --color-accent:        #268bd2;
    --color-accent-dark:   #1a6ea8;

    --color-error:         #dc322f;
    --color-error-bg:      #fef2f2;
    --color-warning-bg:    #fef3c7;
    --color-warning-tx:    #92400e;
    --color-warning-bdr:   #fde68a;

    /* Component cf-* tokens for this theme */
    --cf-text-muted:   #93a1a1;
    --cf-error-fg:     #dc322f;
    --cf-border:       #ccc4a8;
    --cf-bg-surface:   var(--color-bg-surface); /* adapts to theme surface bg */
    --cf-bg-subtle:    var(--color-bg-subtle);  /* adapts to theme subtle bg */
    --cf-bg-muted:     var(--color-bg-muted);   /* adapts to theme muted bg */
    --cf-info-box-bg:  #e8e2df;

    --cf-status-online:  #859900;
}

/* --- GitHub Light --- */
[data-theme="github-light"] {
    --grey-50:             #ffffff;
    --grey-100:            #f6f8fa;
    --grey-200:            #e1e4e8;
    --grey-300:            #d0d7de;
    --light-blue-1:        #f0f4f8;
    --light-blue-2:        #f6f8fa;
    --light-blue-3:        #ffffff;
    --text-dark:           #24292f;
    --primary-dark:        #0969da;
    --bubble-blue:         #dbeafe;
    --bubble-ai-bg:        #f6f8fa;

    --color-bg:            #ffffff;
    --color-bg-surface:    #f6f8fa;
    --color-bg-subtle:     #f0f4f8;
    --color-bg-muted:      #eaeef2;

    --color-border:        #d0d7de;
    --color-border-strong: #afb8c1;

    --color-text:          #24292f;
    --color-text-muted:    #57606a;
    --color-text-inverse:  #ffffff;

    --color-sidebar-bg:        #f6f8fa;
    --color-sidebar-hover:     #eaeef2;
    --color-sidebar-active:    #dbeafe;
    --color-sidebar-border:    #d0d7de;

    --color-chat-bg:       #ffffff;
    --color-bubble-user:   #dbeafe;
    --color-bubble-ai:     #f6f8fa;

    --color-topbar-bg:     #f6f8fa;

    --color-accent:        #0969da;
    --color-accent-dark:   #0550ae;

    --color-error:         #cf222e;
    --color-error-bg:      #fff0f0;
    --color-warning-bg:    #fff8c5;
    --color-warning-tx:    #7d4e00;
    --color-warning-bdr:   #f5c518;

    --color-info-bg:       #ddf4ff;
    --color-info-border:   #0969da;
    --color-info-fg:       #24292f;
    --color-success-border: #2da44e;

    /* Component cf-* tokens */
    --cf-text-muted:   #57606a;
    --cf-error-fg:     #cf222e;
    --cf-border:       #d0d7de;
    --cf-bg-surface:   var(--color-bg-surface);
    --cf-bg-subtle:    var(--color-bg-subtle);
    --cf-bg-muted:     var(--color-bg-muted);
    --cf-info-box-bg:  #ddf4ff;

    --cf-status-online:  #2da44e;
    --cf-status-offline: var(--color-text-muted);
}


/* --- Catppuccin Latte --- */
[data-theme="catppuccin-latte"] {
    --grey-50:             #eff1f5;
    --grey-100:            #e6e9ef;
    --grey-200:            #ccd0da;
    --grey-300:            #bcc0cc;
    --light-blue-1:        #dce0e8;
    --light-blue-2:        #e6e9ef;
    --light-blue-3:        #eff1f5;
    --text-dark:           #4c4f69;
    --primary-dark:        #1e66f5;
    --bubble-blue:         #c5d8ff;
    --bubble-ai-bg:        #e6e9ef;

    --color-bg:            #eff1f5;
    --color-bg-surface:    #e6e9ef;
    --color-bg-subtle:     #dce0e8;
    --color-bg-muted:      #ccd0da;

    --color-border:        #bcc0cc;
    --color-border-strong: #acb0be;

    --color-text:          #4c4f69;
    --color-text-muted:    #8c8fa1;
    --color-text-inverse:  #eff1f5;

    --color-sidebar-bg:        #e6e9ef;
    --color-sidebar-hover:     #dce0e8;
    --color-sidebar-active:    #c5d8ff;
    --color-sidebar-border:    #bcc0cc;

    --color-chat-bg:       #eff1f5;
    --color-bubble-user:   #c5d8ff;
    --color-bubble-ai:     #e6e9ef;

    --color-topbar-bg:     #e6e9ef;

    --color-accent:        #1e66f5;
    --color-accent-dark:   #1653cc;

    --color-error:         #d20f39;
    --color-error-bg:      #fce0e6;
    --color-warning-bg:    #fdf0d5;
    --color-warning-tx:    #8c5e00;
    --color-warning-bdr:   #e5c890;

    --color-info-bg:       #dce8ff;
    --color-info-border:   #1e66f5;
    --color-info-fg:       #4c4f69;
    --color-success-border: #40a02b;

    /* Component cf-* tokens */
    --cf-text-muted:   #8c8fa1;
    --cf-error-fg:     #d20f39;
    --cf-border:       #bcc0cc;
    --cf-bg-surface:   var(--color-bg-surface);
    --cf-bg-subtle:    var(--color-bg-subtle);
    --cf-bg-muted:     var(--color-bg-muted);
    --cf-info-box-bg:  #dce8ff;

    --cf-status-online:  #40a02b;
    --cf-status-offline: var(--color-text-muted);
}

[data-theme="bella-purple"] {
    --grey-50:             #faf7ff;
    --grey-100:            #f3eeff;
    --grey-200:            #e2d5f8;
    --grey-300:            #c9b3ef;
    --light-blue-1:        #ecdff8;
    --light-blue-2:        #f3eeff;
    --light-blue-3:        #faf7ff;
    --text-dark:           #3b1f6e;
    --primary-dark:        #7c3aed;
    --bubble-blue:         #ddd0f7;
    --bubble-ai-bg:        #f3eeff;

    --color-bg:            #faf7ff;
    --color-bg-surface:    #f3eeff;
    --color-bg-subtle:     #ecdff8;
    --color-bg-muted:      #e2d5f8;

    --color-border:        #c9b3ef;
    --color-border-strong: #a78bda;

    --color-text:          #3b1f6e;
    --color-text-muted:    #7c5fad;
    --color-text-inverse:  #faf7ff;

    --color-sidebar-bg:        #f3eeff;
    --color-sidebar-hover:     #ecdff8;
    --color-sidebar-active:    #ddd0f7;
    --color-sidebar-border:    #c9b3ef;

    --color-chat-bg:       #faf7ff;
    --color-bubble-user:   #ddd0f7;
    --color-bubble-ai:     #f3eeff;

    --color-topbar-bg:     #f3eeff;

    --color-accent:        #7c3aed;
    --color-accent-dark:   #5b21b6;

    --color-error:         #be123c;
    --color-error-bg:      #ffe4ed;
    --color-warning-bg:    #fdf3ff;
    --color-warning-tx:    #6b21a8;
    --color-warning-bdr:   #d8b4fe;

    --color-info-bg:       #ede9fe;
    --color-info-border:   #7c3aed;
    --color-info-fg:       #3b1f6e;
    --color-success-border: #7e22ce;

    /* Component cf-* tokens */
    --cf-text-muted:   #7c5fad;
    --cf-error-fg:     #be123c;
    --cf-border:       #c9b3ef;
    --cf-bg-surface:   var(--color-bg-surface);
    --cf-bg-subtle:    var(--color-bg-subtle);
    --cf-bg-muted:     var(--color-bg-muted);
    --cf-info-box-bg:  #ede9fe;

    --cf-status-online:  #7e22ce;
    --cf-status-offline: var(--color-text-muted);
}

/* ========================================
   Component utility classes (global)
   ======================================== */

/* ---- Tools-page card helpers ---- */
.cf-tools-card { border:1px solid var(--cf-border); border-radius:6px; padding:0.6rem 0.8rem; background:var(--cf-bg-surface); }
.cf-tools-card-muted { background:var(--cf-bg-muted); }

/* ---- Connectors marketplace (Tools page) ---- */
.cf-connectors-page {
  padding: 1.25rem 1.5rem 2.5rem;
  max-width: 920px;
  margin: 0 auto;
}
.cf-conn-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.cf-conn-tabs {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.cf-conn-tab {
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-muted, #6b7280);
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  font-size: 0.95rem;
  cursor: pointer;
}
.cf-conn-tab:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.cf-conn-tab-active {
  border-color: var(--color-border, #e5e7eb);
  background: var(--color-bg-surface, #fff);
  color: var(--color-text, #111);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  font-weight: 500;
}
.cf-conn-search {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  padding: 0.4rem 0.75rem;
  background: var(--color-bg-surface, #fff);
  min-width: 200px;
  flex: 0 1 240px;
}
.cf-conn-search-icon { font-size: 0.85rem; opacity: 0.6; }
.cf-conn-search-input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  color: var(--color-text);
  font-size: 0.9rem;
}
.cf-conn-section { margin-bottom: 1.75rem; }
.cf-conn-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}
.cf-conn-section-head .cf-conn-section-title { margin: 0; }
.cf-conn-section-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.85rem 0;
  color: var(--color-text);
}
.cf-conn-search-busy {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  opacity: 0.8;
}

/* GitHub MCP–style tool cards (icon + title + description + By line) */
/* Built-in tools strip (Tools page) — compact, no install actions */
.cf-builtin-section {
  margin-bottom: 1rem;
}
.cf-builtin-section .cf-conn-section-head {
  margin-bottom: 0.45rem;
}
.cf-builtin-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted, #6b7280);
  font-weight: 400;
}
.cf-builtin-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.4rem;
  margin-top: 0;
}
.cf-builtin-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.55rem 0.28rem 0.4rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 999px;
  background: var(--color-bg-muted, #f3f4f6);
  font-size: 0.78rem;
  line-height: 1.2;
  color: var(--color-text, #111827);
  white-space: nowrap;
  cursor: default;
  user-select: none;
}
.cf-builtin-chip-icon {
  font-size: 0.85rem;
  line-height: 1;
  opacity: 0.9;
}
.cf-builtin-chip-label {
  font-weight: 500;
}

.cf-tool-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.cf-tool-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
@media (max-width: 720px) {
  .cf-tool-grid { grid-template-columns: 1fr; }
}
.cf-tool-card {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
  border: 1px solid var(--color-border, #e8e8ec);
  border-radius: 14px;
  padding: 0.75rem 0.85rem;
  background: var(--color-bg-surface, #fff);
  text-align: left;
  color: inherit;
  min-height: 88px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.cf-tool-card:hover {
  border-color: var(--color-border-strong, #cfd3dc);
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.cf-tool-card-main {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  text-align: left;
  color: inherit;
  cursor: pointer;
  border-radius: 8px;
}
.cf-tool-card-main-static {
  cursor: default;
}
.cf-tool-card-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-left: 0.25rem;
}
.cf-tool-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  margin-top: 2px;
  position: relative;
  flex-shrink: 0;
}
.cf-tool-icon-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1rem;
  line-height: 1;
  user-select: none;
}
.cf-tool-icon-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
  background: var(--color-bg-surface, #fff);
}
.cf-tool-icon-img.is-broken {
  display: none !important;
}
.cf-tool-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.cf-tool-card-title-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.cf-tool-card-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text, #111);
  line-height: 1.25;
}
.cf-tool-kind {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted, #6b7280);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 999px;
  padding: 1px 6px;
}
.cf-tool-card-desc {
  font-size: 0.84rem;
  color: var(--color-text-muted, #4b5563);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cf-tool-card-meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-top: 0.15rem;
}
.cf-tool-by {
  font-size: 0.78rem;
  color: var(--color-text-muted, #6b7280);
}
.cf-tool-card-action {
  flex-shrink: 0;
  align-self: center;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text-muted, #6b7280);
  padding: 0.25rem 0.15rem;
  white-space: nowrap;
}
.cf-tool-details-modal { max-width: 520px; }
.cf-tool-details-head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 0.75rem;
}
.cf-tool-details-desc {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--color-text, #222);
  margin: 0 0 0.85rem;
}
.cf-tool-details-dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.86rem;
}
.cf-tool-details-dl > div {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.5rem;
}
.cf-tool-details-dl dt {
  margin: 0;
  color: var(--color-text-muted, #6b7280);
  font-weight: 500;
}
.cf-tool-details-dl dd {
  margin: 0;
  word-break: break-word;
}
.cf-tool-details-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
}

/* Skills (SKILL.md) panel */
.cf-skills-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1rem;
  align-items: center;
}
/* Override .cf-conn-modal max-width:420px so skills dialogs can grow wider */
.cf-conn-modal.cf-skill-resizable {
  resize: both;
  overflow: auto;
  min-width: min(520px, 94vw);
  min-height: 320px;
  max-width: min(96vw, 1100px) !important;
  max-height: 92vh;
  width: min(880px, 94vw);
  margin: 1rem;
}
.cf-conn-modal.cf-skill-run-modal {
  width: min(900px, 94vw);
  min-height: 460px;
}
.cf-conn-modal.cf-skill-editor-modal {
  width: min(920px, 94vw);
  min-height: 520px;
}
.cf-skill-run-model {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text-muted, #6b7280);
}
.cf-skill-model-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
}

/* Chat slash skill autocomplete */
.chat-slash-menu {
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  background: var(--color-bg-surface, #fff);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  margin-bottom: 0.4rem;
  max-height: 220px;
  overflow: auto;
  padding: 0.3rem;
}
.chat-slash-menu-title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted, #6b7280);
  padding: 0.25rem 0.5rem 0.35rem;
}
.chat-slash-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  cursor: pointer;
  color: inherit;
}
.chat-slash-item:hover,
.chat-slash-item.is-active {
  background: var(--color-bg-muted, #f3f4f6);
}
.chat-slash-cmd {
  font-weight: 600;
  font-size: 0.9rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.chat-slash-desc {
  font-size: 0.75rem;
  color: var(--color-text-muted, #6b7280);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cf-skill-live-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 600;
  margin: 0.65rem 0 0.35rem;
  color: var(--color-text-muted);
}
.cf-skill-live-badge {
  font-weight: 500;
  color: var(--color-primary, #6d28d9);
  animation: cf-skill-pulse 1.2s ease-in-out infinite;
}
@keyframes cf-skill-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.cf-skill-live-log {
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  background: var(--color-bg-muted, #f8f8fb);
  padding: 0.55rem 0.7rem;
  min-height: 10rem;
  max-height: 40vh;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.45;
}
.cf-skill-live-log-line {
  padding: 0.12rem 0;
  border-bottom: 1px solid transparent;
  word-break: break-word;
}
.cf-skill-live-log-partial {
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px dashed var(--color-border, #ddd);
  white-space: pre-wrap;
  color: var(--color-text, #222);
  opacity: 0.9;
}
.cf-skill-run-result {
  white-space: pre-wrap;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  max-height: 28vh;
  overflow: auto;
  font-size: 0.9rem;
  line-height: 1.45;
  background: var(--color-bg-surface, #fff);
}
.cf-skill-run-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.65rem;
}
.cf-skill-filter-chip {
  border: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-bg-surface, #fff);
  color: var(--color-text-muted, #6b7280);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.78rem;
  cursor: pointer;
}
.cf-skill-filter-chip.is-active {
  border-color: var(--color-primary, #6d28d9);
  color: var(--color-primary, #6d28d9);
  font-weight: 600;
  background: color-mix(in srgb, var(--color-primary, #6d28d9) 8%, white);
}
.cf-skill-run-history {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.cf-skill-run-history-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  text-align: left;
  border: 1px solid var(--color-border, #e8e8ec);
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
  background: var(--color-bg-surface, #fff);
  cursor: pointer;
  color: inherit;
  width: 100%;
}
.cf-skill-run-history-item:hover {
  border-color: var(--color-border-strong, #cfd3dc);
}
.cf-skill-run-history-name {
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.cf-skill-source-badge {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 999px;
  padding: 1px 7px;
  color: var(--color-text-muted, #6b7280);
}
.cf-skill-run-history-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted, #6b7280);
}
.cf-skill-editor-tabs {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}
.cf-skill-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}
.cf-skill-textarea,
.cf-skill-raw {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.4;
  resize: vertical;
  min-height: 3rem;
}
.cf-skill-raw {
  min-height: 16rem;
  tab-size: 2;
}
.cf-skill-tool-picks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1rem;
  max-height: 12rem;
  overflow: auto;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.65rem;
  background: var(--color-bg-surface, #fff);
}
@media (max-width: 640px) {
  .cf-skill-tool-picks,
  .cf-skill-form-row { grid-template-columns: 1fr; }
}
.cf-skill-tool-group-title {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: 0.2rem;
}
.cf-skill-tool-check {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  margin: 0.12rem 0;
  cursor: pointer;
}
.cf-skill-form .cf-conn-label { margin-top: 0.45rem; }

.cf-conn-subsection {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 1rem 0 0.5rem;
}
.cf-conn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}
@media (max-width: 640px) {
  .cf-conn-grid { grid-template-columns: 1fr; }
}
.cf-conn-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid var(--color-border, #e8e8ec);
  border-radius: 14px;
  padding: 0.7rem 0.9rem;
  background: var(--color-bg-surface, #fff);
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  min-height: 52px;
}
.cf-conn-card:hover {
  border-color: var(--color-border-strong, #cfd3dc);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.cf-conn-card-name {
  font-weight: 500;
  font-size: 0.95rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cf-conn-card-badge {
  font-size: 0.68rem;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 1px 7px;
}
.cf-conn-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
  color: #fff;
  background: #6b7280;
}
.cf-conn-icon-gmail { background: linear-gradient(135deg, #ea4335, #fbbc05 55%, #34a853); color: #fff; }
.cf-conn-icon-google-calendar { background: #1a73e8; color: #fff; font-size: 0.85rem; }
.cf-conn-icon-github { background: #24292f; color: #fff; }
.cf-conn-icon-notion { background: #000; color: #fff; }
.cf-conn-icon-stripe { background: #635bff; color: #fff; }
.cf-conn-icon-mcp { background: var(--color-bg-muted, #f3f4f6); color: inherit; font-size: 1rem; }
.cf-conn-installed-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid var(--color-border, #e8e8ec);
  border-radius: 14px;
  padding: 0.7rem 0.9rem;
  background: var(--color-bg-surface, #fff);
  min-height: 56px;
}
.cf-conn-installed-text { flex: 1; min-width: 0; }
.cf-conn-subtitle {
  font-size: 0.78rem;
  color: var(--color-text-muted, #6b7280);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cf-conn-status {
  font-size: 0.82rem;
  color: var(--color-text-muted, #6b7280);
  margin-right: 0.15rem;
}
.cf-conn-menu-wrap { position: relative; }
.cf-conn-menu-btn {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.15rem;
  line-height: 1;
  padding: 0.15rem 0.35rem;
  cursor: pointer;
  border-radius: 6px;
}
.cf-conn-menu-btn:hover { background: var(--color-bg-muted, #f3f4f6); }
.cf-conn-menu {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 20;
  min-width: 140px;
  background: var(--color-bg-surface, #fff);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
}
.cf-conn-menu button {
  border: none;
  background: transparent;
  text-align: left;
  padding: 0.45rem 0.65rem;
  border-radius: 6px;
  font-size: 0.88rem;
  color: var(--color-text);
  cursor: pointer;
}
.cf-conn-menu button:hover { background: var(--color-bg-muted, #f3f4f6); }
.cf-conn-menu-danger { color: var(--cf-error-fg, #b91c1c) !important; }
.cf-conn-see-more { text-align: center; margin-top: 0.75rem; }
.cf-conn-link-btn {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  cursor: pointer;
}
.cf-conn-link-btn:hover { color: var(--color-text); text-decoration: underline; }
.cf-conn-empty {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0.25rem 0 0;
}
.cf-conn-advanced-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.cf-conn-mcp-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cf-conn-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.cf-conn-banner-ok {
  background: var(--color-success-bg, #d1fae5);
  color: var(--color-success-tx, #065f46);
  border: 1px solid var(--color-success-bdr, #a7f3d0);
}
.cf-conn-banner-error {
  background: var(--color-error-bg, #fee2e2);
  color: var(--cf-error-fg, #b91c1c);
  border: 1px solid var(--color-error-bdr, #fecaca);
}
.cf-conn-banner-close {
  margin-left: auto;
  border: none;
  background: transparent;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
}
.cf-conn-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cf-conn-modal {
  background: var(--color-bg-surface);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  width: 100%;
  max-width: 420px;
  margin: 1rem;
  padding: 1.25rem 1.5rem;
}
.cf-conn-modal-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.cf-conn-label {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 3px;
}

.cf-badge-default { font-size:0.75em; background:var(--cf-bg-subtle); padding:1px 5px; border-radius:3px; color:var(--cf-text-muted); }
.cf-badge-auth     { font-size:0.7em; background:var(--color-warning-bg); color:var(--color-warning-tx); padding:1px 6px; border-radius:3px; border:1px solid var(--color-warning-bdr); }
.cf-badge-custom   { font-size:0.65em; background:var(--cf-border); padding:1px 5px; border-radius:3px; color:#fff; }

/* ---- Label-value row (endpoint / url) ---- */
.cf-lv-row { font-size:0.75em; color:var(--cf-text-muted); margin-top:4px; word-break:break-all; }
.cf-lv-label { color:var(--cf-text-muted); }

/* ---- Misc text helpers ---- */
.cf-xs-text { font-size:0.72em; color:var(--cf-text-muted); white-space:nowrap; }
.cf-remove-btn { margin-left:auto; font-size:0.7em; border:none; background:transparent; color:var(--cf-error-fg); cursor:pointer; padding:0 2px; }
.cf-more-info { font-size:0.75em; color:var(--primary-dark); }

/* ---- Dialog form elements ---- */
.cf-dialog-input { width:100%; padding:6px 10px; border:1px solid var(--cf-border); border-radius:6px; font-size:0.95rem; background:var(--color-bg-surface); color:var(--color-text); }
.cf-dialog-error   { color:var(--cf-error-fg); font-size:0.8rem; margin-bottom:0.6rem; background:var(--color-error-bg); padding:4px 8px; border-radius:4px; }

/* ---- Info boxes (sync/localai special info) ---- */
.cf-info-box { padding:0.75rem 1rem; border-radius:6px; font-size:0.9em; background:var(--cf-info-box-bg); color:var(--color-text); }

/* Sync page specific classes -- all dark-theme aware */
.cf-sync-info     { padding:0.75rem 1rem; border-radius:6px; font-size:0.9em; background:var(--cf-bg-subtle); border:1px solid var(--color-border-strong); color:var(--color-text); }
.cf-sync-warning  { padding:1rem 1.25rem; border-radius:6px; background:var(--color-warning-bg);   border:1px solid var(--color-warning-bdr);   color:var(--color-warning-tx); }
.cf-sync-success  { padding:0.5rem 0.75rem; border-radius:6px; font-size:0.9em; background:#d1ffd2; border:1px solid #a7f3d0; color:#047857; }

/* Sync table rows -- borders are theme-aware via cf-sync-table rules below */
.cf-sync-row { display:flex; justify-content:space-between; align-items:center; padding:4px 0; border-bottom:1px solid var(--color-border); font-size:0.95em; }
.cf-sync-row:last-child { border-bottom:none; }

/* Online/offline status indicators */
.cf-status-online  { color:#22c55e !important; }
.cf-status-offline { color:var(--color-text-muted) !important; }

/* Self-device row highlight (theme-aware subtle bg) */
.cf-sync-self-row { background: var(--cf-bg-subtle); border-radius:4px; margin-top:1px; }

/* ========================================
    SyncPresencePage — theme-aware component CSS
    ======================================== */
.sync-page-content { padding: 1rem 2rem; max-width: 860px; margin: 0 auto; }
.sync-page-title  { font-size: var(--font-xl); color: var(--text-dark); margin-bottom: 0.25rem; }
.sync-page-subtitle { color: var(--color-text-muted); font-size: 0.9em; }

.sync-page-margin-t-sm { margin-top: 0.5rem; }
.sync-page-margin-t-md { margin-top: 0.75rem; }
.sync-page-expand-1   { margin-left: auto; }
.sync-page-flush     { margin-left: -1px; }
.sync-page-section-gap-top { margin-top: 1.25rem; margin-bottom: 0.4rem; }

/* --- Section headers with buttons (flex) --- */
.sync-page-section-header { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
.sync-page-section-header h3 { margin:0; }

.sync-page-flex-row { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.5rem; }

/* --- Sync login warning --- */
.sync-login-required-box { margin:2rem 0; }
.sync-page-margin-l-sm  { margin-left:0.5rem; }

/* --- Login page OS download cards --- */
.login-download-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1rem 0;
}

/* Success-surface cards: text/badge use success tokens (never --primary-dark, which flips in dark themes) */
.login-download-card {
    position: relative;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--color-success-border, #22c55e);
    background: var(--color-success-bg, var(--success, #D1FFD2));
    color: var(--color-success-fg, #14532d);
    transition: opacity 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}

.login-download-card--active {
    border-width: 2px;
    border-color: var(--color-success-border, #22c55e);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success-border, #22c55e) 35%, transparent);
    filter: none;
    opacity: 1;
}

.login-download-card--muted {
    opacity: 0.55;
    filter: saturate(0.75);
}

.login-download-card--muted:hover {
    opacity: 0.85;
    filter: none;
}

.login-download-badge {
    display: inline-block;
    margin-bottom: 0.45rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-success-fg, #14532d);
    background: color-mix(in srgb, var(--color-success-fg, #14532d) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-success-fg, #14532d) 28%, transparent);
}

.login-download-title {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.25rem;
    color: var(--color-success-fg, #14532d);
}

.login-download-title.help-heading {
    flex-wrap: wrap;
}

.login-download-title .help-glyph {
    color: inherit;
    opacity: 0.7;
}

.login-download-title .help-glyph:hover,
.login-download-title .help-glyph:focus-visible {
    opacity: 1;
}

.login-download-title a {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}

.login-download-title a:hover {
    text-decoration: underline;
}

.login-download-desc {
    margin: 0 0 0.55rem 0;
    font-size: 0.9em;
    color: color-mix(in srgb, var(--color-success-fg, #14532d) 78%, transparent);
}

.login-download-note {
    margin: 0.45rem 0 0.15rem;
    font-size: 0.8em;
    line-height: 1.4;
    color: color-mix(in srgb, var(--color-success-fg, #14532d) 78%, transparent);
}

.login-download-details {
    margin-top: 0.55rem;
    font-size: 0.8em;
}

.login-download-details summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-success-fg, #14532d);
}

.login-download-details p {
    margin: 0.4rem 0;
}

.login-download-btn {
    margin-top: 0.15rem;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.login-brand-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 10px;
    flex-shrink: 0;
}

.login-brand h2 {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.2;
    color: var(--color-text);
}

.login-lead {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    background: var(--color-bg-subtle, var(--bubble-blue));
    border: 1px solid var(--color-border, var(--primary-dark));
    border-radius: 6px;
    color: var(--color-text);
}

.login-install-cmd-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.4rem;
}

/* Fixed dark terminal style so command stays readable in every theme */
.login-install-cmd {
    flex: 1 1 16rem;
    margin: 0;
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    background: #1e1e1e;
    color: #e8e8e8;
    font-size: 0.82rem;
    line-height: 1.4;
    overflow-x: auto;
    white-space: nowrap;
    border: 1px solid #333;
}

.login-install-cmd code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: #e8e8e8;
    background: transparent;
    padding: 0;
    font-size: inherit;
}

.login-download-links {
    margin-top: 0.15rem;
    font-size: 0.8em;
}

.login-download-links a {
    color: var(--color-success-fg, #14532d);
}

.login-download-sep {
    margin: 0 0.35rem;
    color: var(--color-text-muted);
}

.login-download-github {
    margin: 0.55rem 0 0;
    font-size: 0.8em;
    color: var(--color-text-muted);
}

.login-more-options {
    margin-top: 1.5rem;
}

.login-signed-in-card {
    position: relative;
    margin: 1rem 0;
    padding: 1.25rem 1rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

.login-signed-in-close {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.login-signed-in-close:hover,
.login-signed-in-close:focus-visible {
    background: var(--color-bg-muted, #f4f4f5);
}

button.app-nav-account-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    padding: 0.35rem;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    border-radius: var(--radius-md);
}

button.app-nav-account-link .bi {
    font-size: 1.35rem;
    line-height: 1;
}

.site-legal-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border, #e5e5e5);
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.site-legal-footer a {
    color: var(--color-text-muted);
}

/* Sync page: capability badge + debug log */
.sync-cap-badge {
    display: inline-block;
    margin-left: 0.4rem;
    margin-right: 0.55rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    vertical-align: middle;
    white-space: nowrap;
    color: var(--primary-dark, #1F7FCC);
    background: color-mix(in srgb, var(--primary-blue, #3BA7FF) 22%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-blue, #3BA7FF) 45%, transparent);
}

.sync-self-label,
.online-text {
    margin-left: 0.35rem;
    margin-right: 0.15rem;
    white-space: nowrap;
}

.online-text {
    font-size: 0.78em;
    color: #22c55e;
}

.sync-device-name-cell {
    padding-right: 0.85rem !important;
}

.sync-last-active-cell {
    padding-left: 0.65rem !important;
    padding-right: 0.85rem !important;
    white-space: nowrap;
}

/* --- Panel cards (Devices / Targets / What to sync / Debug) --- */
.sync-panel {
    margin: 0 0 1.15rem 0;
    padding: 1rem 1.15rem 1.1rem;
    border-radius: 10px;
    border: 1px solid var(--color-border, #d8dee6);
    background: var(--cf-bg-subtle, color-mix(in srgb, var(--color-bg, #fff) 92%, var(--color-border, #ccc) 8%));
    box-shadow: 0 1px 2px color-mix(in srgb, #000 4%, transparent);
}

.sync-panel-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.65rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.sync-panel-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 650;
    color: var(--color-text, inherit);
}

.sync-connection-status {
    font-size: 0.85em;
}

.sync-panel-lead {
    margin: 0 0 0.85rem 0;
    line-height: 1.4;
}

.sync-subsection-title {
    font-weight: 600;
    margin: 0.35rem 0 0.45rem;
    font-size: 0.95rem;
}

.sync-to-all-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.4rem;
    cursor: pointer;
    font-size: 0.95rem;
}

.sync-target-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sync-target-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.92em;
    cursor: pointer;
    padding: 0.2rem 0.15rem;
    border-radius: 4px;
}

.sync-target-label.sync-target-muted {
    opacity: 0.75;
}

.sync-target-label.sync-target-locked {
    cursor: default;
}

.sync-last-seen,
.online-now {
    font-size: 0.85em;
    color: var(--color-text-muted);
}

.sync-categories {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sync-category-row {
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--color-border, #e8edf3);
}

.sync-category-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sync-category-row:first-child {
    padding-top: 0.15rem;
}

.sync-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.sync-category-title {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 600;
}

.sync-panel--debug {
    background: color-mix(in srgb, var(--cf-bg-subtle, #f6f8fa) 70%, transparent);
}

.sync-debug-log {
    margin: 0.35rem 0 0 0;
    max-height: 280px;
    overflow: auto;
    padding: 0.55rem 0.65rem;
    border-radius: 6px;
    background: #1e1e1e;
    color: #d4d4d4;
    font-size: 0.72rem;
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
    border: 1px solid #333;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.sync-ai-route-banner {
    margin: 0 0 0.85rem;
}

/* Rename row: keep label + input + Save on one line */
.sync-device-name-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    margin-top: 0.35rem;
}

.sync-device-name-row .sync-form-label {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.9em;
    color: var(--color-text-muted);
    margin: 0;
}

.sync-device-name-row .sync-input-field {
    flex: 1 1 auto;
    min-width: 10rem;
    max-width: none;
    width: auto;
}

.sync-device-name-row .sync-rename-save {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* --- Table wrapper --- */
.cf-sync-table-wrapper { border-radius:6px; overflow:hidden; margin-bottom:0.85rem; border:1px solid var(--color-border, #e2e8f0); }

.cf-sync-table {
    width: 100%;
    border-collapse: collapse;
}

.cf-sync-table th.cf-sync-cell,
.cf-sync-table td.cf-sync-cell {
    padding: 0.45rem 0.65rem;
    vertical-align: middle;
}

.cf-sync-table th.cf-sync-cell {
    text-align: left;
    font-weight: 600;
    font-size: 0.85em;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    white-space: nowrap;
}

/* --- Self row highlight --- */
.sync-table-row-self { background:var(--cf-bg-subtle); }

/* --- Online label --- */
.sync-online-label { font-size:0.7em; color:#22c55e; margin-left:8px; }

/* --- AI server checkbox controls --- */
.sync-ai-label     { display:flex; align-items:center; gap:0.35rem; font-size:0.85em; cursor:pointer; }
.sync-ai-label-disabled { display:flex; align-items:center; gap:0.35rem; font-size:0.85em; opacity:0.5; font-style:italic; cursor:not-allowed; }

/* --- Model count hint --- */
.sync-model-count-hint { font-size:0.75em; opacity:0.7; margin-top:2px; }

/* --- AI status text --- */
.sync-ai-status       { font-size:0.75em; opacity:0.7; margin-top:2px; }
.sync-warning-text    { color:var(--cf-sync-warning-fg); }

/* --- Status text (non-AI mode) --- */
.sync-status-text { font-size:0.85em; }

/* --- AI info box --- */
.sync-ai-info-box { margin-bottom:0.75rem; padding:0.5rem 0.75rem; }

/* --- Rename row (legacy class kept; prefer .sync-device-name-row) --- */
.sync-rename-row   { display:flex; align-items:center; gap:0.5rem; margin-bottom:1rem; flex-wrap:nowrap; }
.sync-page-label   { font-size:0.9em; color:var(--color-text-muted); }
.sync-input-field  { flex:1 1 auto; min-width:10rem; background:var(--color-bg, white); }

/* --- Sync target checkboxes --- */
.sync-these-devices-section    { margin:1rem 0 0.5rem; }
.sync-page-subsection-title     { font-weight:600; margin-bottom:0.35rem; }
.sync-target-checkboxes-group   { display:flex; flex-direction:column; gap:.35rem; }

/* sync target checkboxes – theme-aware */
.sync-target-online,
.sync-target-offline { display:flex; align-items:center; gap:0.5rem; cursor:pointer; font-size:0.92em; }

.sync-target-online   .cf-status-online-syncdot  { color:#22c55e; }
.sync-target-offline  .cf-status-offline-syncdot { color:#888; }

/* --- No-devices / muted text --- */
.sync-page-muted-text { font-size:0.9em; }
.sync-page-muted-text,
[data-theme="app-light"] .sync-page-muted-text,
[data-theme="light-blue"] .sync-page-muted-text,
[data-theme="solarized-light"] .sync-page-muted-text { color:#888; }

[data-theme="app-dark"] .sync-page-muted-text,
[data-theme="dark-blue"]     .sync-page-muted-text,
[data-theme="dracula"]       .sync-page-muted-text,
[data-theme="nord"]          .sync-page-muted-text   { color:var(--cf-text-muted); }

.sync-loading-pad  { padding:0.75rem 0; }
.sync-loading-pad  { color:#666; }
[data-theme="app-dark"] .sync-loading-pad,
[data-theme="dark-blue"]     .sync-loading-pad,
[data-theme="dracula"]       .sync-loading-pad,
[data-theme="nord"]          .sync-loading-pad,
[data-theme="solarized-light"] .sync-loading-pad        { color:var(--color-text-muted); }

/* --- Convo / Notes rows (use cf-sync-card) --- */
.sync-convo-notes-group { display:flex; flex-direction:column; gap:0.4rem; }

.sync-item-row { padding-top:0.35rem !important; padding-bottom:0.35rem !important; }

.sync-item-info  { flex:1; min-width:0; }
.sync-item-title { font-weight:500; }
.sync-item-date  { font-size:0.75em; }
.sync-page-muted-text + .sync-item-date,
[data-theme="app-dark"] .sync-item-date,
[data-theme="dark-blue"]     .sync-item-date,
[data-theme="dracula"]       .sync-item-date,
[data-theme="nord"]          .sync-item-date,
[data-theme="solarized-light"] .sync-item-date        { color:var(--color-text-muted); }

[data-theme="app-light"] .sync-item-date,
[data-theme="light-blue"] .sync-item-date  { color:#888; }
[data-theme="solarized-light"] .sync-item-date { color:#93a1a1; }

/* --- Status message box (reuse cf-sync-info-card) --- */
.sync-status-msg-box { margin-top:1rem; }

/* --- Back-to-chat row --- */
.sync-back-to-chat-row { margin-top:1.5rem; display:flex; gap:0.5rem; align-items:center; }

/* --- Auto-sync label --- */
.sync-auto-sync-label { font-size:0.85em; color:var(--color-text-muted); display:flex; align-items:center; gap: 0.35rem; cursor: pointer; }

/* === SyncPresencePage status dot color overrides for dark themes === */
[data-theme="app-dark"] .cf-status-online,
[data-theme="dark-blue"]     .cf-status-online,
[data-theme="dracula"]       .cf-status-online,
[data-theme="nord"]          .cf-status-online { 
    color:#a3be8c !important; 
}

/* Solarized-light uses #859900 from :root for – if it sets --cf-status-online use  that */
[data-theme="solarized-light"] .cf-status-online { 
    color: var(--cf-status-online, #859900) !important; 
}

/* Online/offline status indicators */
.cf-status-online  { color:#22c55e !important; }
.cf-status-offline { color:var(--color-text-muted) !important; }

/* Self-device row highlight (theme-aware subtle bg) */
.cf-sync-self-row { background: var(--cf-bg-subtle); border-radius:4px; margin-top:1px; }
/* Notes sidebar drag-reorder (pointer-based; works in MAUI WebView) */
.conversation-item[data-note-id] {
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.conversation-item.note-dragging {
  opacity: 0.55;
  cursor: grabbing;
}
.conversation-item.note-drag-over {
  outline: 2px dashed var(--primary-dark, #5b5fc7);
  outline-offset: -2px;
}
body.note-list-reordering {
  cursor: grabbing !important;
  user-select: none !important;
}

/* -------------------------------------------------------
   Split config + embedded UI (Lemonade, Home Assistant)
   ------------------------------------------------------- */
.lemonade-page,
.embed-split-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 3.5rem);
    min-height: 480px;
    padding: 0.75rem 1rem 0.5rem;
    box-sizing: border-box;
    max-width: none;
    margin: 0;
}

.lemonade-page-header,
.embed-split-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
}

.lemonade-page-title,
.embed-split-title {
    margin: 0 0 0.25rem;
}

.lemonade-page-lead,
.embed-split-lead {
    margin: 0;
    color: var(--color-text-muted, #666);
    font-size: 0.9em;
    max-width: 52rem;
}

.lemonade-page-split,
.embed-split-body {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 0.75rem;
    border-top: 1px solid var(--cf-border, #e5e5e5);
    padding-top: 0.75rem;
}

.lemonade-config-pane,
.embed-split-config {
    flex: 0 0 min(42%, 440px);
    min-width: 280px;
    max-width: 480px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.5rem;
    padding-bottom: 1rem;
}

.lemonade-embed-pane,
.embed-split-pane {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--cf-border, #ddd);
    border-radius: 10px;
    background: var(--color-surface, #fff);
    overflow: hidden;
}

.lemonade-embed-toolbar,
.embed-split-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.65rem;
    border-bottom: 1px solid var(--cf-border, #e5e5e5);
    background: var(--color-bg-muted, #f6f7f9);
    flex-shrink: 0;
}

.lemonade-embed-url,
.embed-split-url {
    font-size: 0.8em;
    color: var(--color-text-muted, #555);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.lemonade-embed-frame-wrap,
.embed-split-frame-wrap {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
}

.simple-url-embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #111;
}

/* MAUI native embed host — real WebView is laid over this placeholder */
.simple-url-embed-host {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 120px;
    background: transparent;
}

.embed-split-frame-wrap,
.lemonade-embed-frame-wrap {
    /* Ensure host fills the pane so native WebView can match bounds */
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

.simple-url-embed-placeholder {
    padding: 1rem;
    color: var(--color-text-muted, #888);
    font-size: 0.9em;
}

.lemonade-embed-fallback,
.embed-split-fallback {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem;
    color: var(--color-text-muted, #555);
    font-size: 0.95em;
}

.embed-split-config .settings-card {
    margin: 0 0 1rem;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.embed-split-config pre.device-summary-pre {
    white-space: pre-wrap;
    font-size: 0.8em;
    background: var(--cf-bg-subtle, #f5f5f5);
    padding: 0.75rem;
    border-radius: 4px;
    margin: 0;
    max-height: 40vh;
    overflow: auto;
}

.ha-status {
    margin: 0 0 0.85rem;
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    font-size: 0.85em;
    border: 1px solid var(--color-border, #ddd);
    background: var(--color-bg-subtle, #f6f7f9);
}

.ha-status--ok {
    border-color: color-mix(in srgb, var(--color-success-border, #22c55e) 55%, transparent);
    background: var(--color-success-bg, #ecfdf3);
    color: var(--color-success-fg, #14532d);
}

.ha-status--err,
.ha-status--warn {
    border-color: #f5c2c7;
    background: #fff0f0;
    color: #9f1239;
}

.ha-wake-note {
    color: var(--color-text-muted);
    font-size: 0.8em;
    margin: 0 0 1rem;
    line-height: 1.45;
}

.ha-area {
    margin-bottom: 0.85rem;
}

.ha-area-title {
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 0.35rem;
}

.ha-device-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--color-border, #eee);
}

.ha-device-meta {
    min-width: 0;
}

.ha-device-name {
    font-size: 0.9em;
    font-weight: 600;
}

.ha-device-id {
    font-size: 0.72em;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .lemonade-page,
    .embed-split-page {
        height: auto;
        min-height: 0;
    }
    .lemonade-page-split,
    .embed-split-body {
        flex-direction: column;
    }
    .lemonade-config-pane,
    .embed-split-config {
        flex: none;
        max-width: none;
        width: 100%;
        max-height: none;
        overflow: visible;
    }
    .lemonade-embed-pane,
    .embed-split-pane {
        min-height: 55vh;
        height: 55vh;
    }
}

/* Lemonade config pane model list (page is not under .settings-content) */
.lemonade-config-pane .ollama-model-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-bg-surface, #fff);
    min-width: 0;
}

.lemonade-config-pane .ollama-model-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    border-bottom: 1px solid var(--grey-200, #e5e5e5);
    min-width: 0;
}

.lemonade-config-pane .ollama-model-row:last-child {
    border-bottom: none;
}

.lemonade-config-pane .ollama-model-row.is-active {
    background: var(--light-blue-1, #eef6ff);
}

.lemonade-config-pane .ollama-model-row-main {
    min-width: 0;
    overflow: hidden;
}

.lemonade-config-pane .ollama-model-row-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-dark, inherit);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lemonade-config-pane .ollama-model-row-subtitle {
    font-size: 0.75rem;
    color: var(--color-text-muted, #666);
    margin-top: 0.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lemonade-config-pane .ollama-model-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: flex-end;
    max-width: 7.5rem;
}

.lemonade-config-pane .ollama-model-edit-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.2rem 0.3rem;
    border-radius: 4px;
    line-height: 1;
    flex-shrink: 0;
}

.lemonade-config-pane .ollama-model-edit-btn:hover {
    background: var(--grey-100, #f0f0f0);
}

.lemonade-config-pane .ollama-vision-proxy-badge {
    white-space: nowrap;
}

/* ========================================
   Calendar (Google Calendar–inspired)
   ======================================== */

.cal-page .cal-sidebar {
    width: 260px;
    min-width: 240px;
}

.cal-sidebar-inner {
    padding: 12px 14px 24px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cal-create-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    padding: 0.55rem 1.1rem 0.55rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--color-sidebar-border, #dadce0);
    background: var(--color-bg, #fff);
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.15), 0 1px 3px 1px rgba(60, 64, 67, 0.1);
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}

.cal-create-btn:hover {
    background: var(--grey-50, #f8f9fa);
}

.cal-create-btn i {
    font-size: 1.15rem;
    color: #1a73e8;
}

.cal-mini-header,
.cal-toolbar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.cal-mini-header {
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.cal-mini-title {
    font-size: 0.85rem;
    font-weight: 600;
}

.cal-nav-btn {
    border: none;
    background: transparent;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text);
}

.cal-nav-btn:hover {
    background: var(--grey-100, #f1f3f4);
}

.cal-mini-dow,
.cal-mini-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    gap: 1px;
}

.cal-mini-dow {
    font-size: 0.65rem;
    color: var(--cf-text-muted, #70757a);
    margin-bottom: 2px;
}

.cal-mini-day {
    border: none;
    background: transparent;
    width: 28px;
    height: 28px;
    margin: 0 auto;
    border-radius: 50%;
    font-size: 0.72rem;
    cursor: pointer;
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cal-mini-day.static {
    cursor: default;
}

.cal-mini-day.other-month {
    color: var(--cf-text-muted, #b0b0b0);
}

.cal-mini-day.today {
    background: #1a73e8;
    color: #fff;
    font-weight: 600;
}

.cal-mini-day.selected:not(.today) {
    background: #d2e3fc;
    color: #174ea6;
}

.cal-mini-day:hover:not(.today):not(.static) {
    background: var(--grey-100, #f1f3f4);
}

.cal-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cal-section-header h4 {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
}

.cal-list-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0;
    position: relative;
}

.cal-list-item .menu {
    position: relative;
    flex-shrink: 0;
}

.cal-list-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    font-size: 0.85rem;
}

.cal-list-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-color-swatch {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
}

.cal-empty-hint {
    font-size: 0.75rem;
    color: var(--cf-text-muted, #70757a);
    padding: 0.25rem 0;
}

/* Fixed positioning + inline top/left (from getMenuPopupPosition) so the menu
   sits under ⋮ rather than anchoring to the fixed sidebar (top:100% of sidebar). */
.cal-dropdown {
    position: fixed;
    z-index: 10000;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-sidebar-border, #dadce0);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    min-width: 140px;
    padding: 0.25rem 0;
}

.cal-dropdown button {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    padding: 0.45rem 0.85rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--color-text);
}

.cal-dropdown button:hover {
    background: var(--grey-100, #f1f3f4);
}

.cal-dropdown button.danger {
    color: #d93025;
}

.cal-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--color-bg, #fff);
}

.cal-toolbar {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--color-sidebar-border, #dadce0);
    justify-content: space-between;
    flex-shrink: 0;
}

.cal-toolbar-left,
.cal-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.cal-today-btn {
    border: 1px solid var(--color-sidebar-border, #dadce0);
    background: transparent;
    border-radius: 4px;
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--color-text);
}

.cal-today-btn:hover {
    background: var(--grey-50, #f8f9fa);
}

.cal-title {
    margin: 0 0 0 0.5rem;
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--color-text);
}

.cal-view-select select {
    border: 1px solid var(--color-sidebar-border, #dadce0);
    border-radius: 4px;
    padding: 0.4rem 0.6rem;
    background: var(--color-bg, #fff);
    color: var(--color-text);
    font-size: 0.85rem;
    cursor: pointer;
}

.cal-loading {
    padding: 2rem;
    color: var(--cf-text-muted);
}

/* Month view */
.cal-month {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.cal-month-dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--color-sidebar-border, #dadce0);
    flex-shrink: 0;
}

.cal-month-dow-cell {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--cf-text-muted, #70757a);
    padding: 0.4rem 0;
    text-transform: uppercase;
}

.cal-month-grid {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.cal-month-week {
    flex: 1;
    position: relative;
    min-height: 90px;
    border-bottom: 1px solid var(--color-sidebar-border, #e0e0e0);
    overflow: hidden;
}

.cal-month-week-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    height: 100%;
    min-height: inherit;
}

.cal-month-week-spans {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 2;
}

.cal-month-cell {
    border-right: 1px solid var(--color-sidebar-border, #e0e0e0);
    padding: 0.2rem 0.25rem;
    min-height: 80px;
    overflow: hidden;
    cursor: default;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cal-month-cell:last-child {
    border-right: none;
}

.cal-month-cell.other-month .cal-month-daynum {
    color: var(--cf-text-muted, #b0b0b0);
}

.cal-month-cell.today .cal-month-daynum {
    background: #1a73e8;
    color: #fff;
    border-radius: 50%;
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cal-month-daynum {
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    margin: 0 auto 0.15rem;
    line-height: 1.6rem;
    position: relative;
    z-index: 1;
}

.cal-month-events {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    position: relative;
    z-index: 1;
}

.cal-event-chip {
    font-size: 0.7rem;
    line-height: 1.25;
    color: #fff;
    border-radius: 4px;
    padding: 1px 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    max-width: 100%;
    transition: filter 0.08s ease, box-shadow 0.08s ease, outline-color 0.08s ease;
}

.cal-event-chip:hover {
    filter: brightness(1.12);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
    z-index: 5;
}

/* Google-style timed: colored circle + time + title (no solid bar fill) */
.cal-event-chip.timed-dot {
    display: flex;
    align-items: center;
    gap: 3px;
    background: transparent !important;
    color: var(--color-text);
    padding: 2px 4px;
    margin: 0 -2px;
    border-radius: 4px;
    font-size: 0.68rem;
}

.cal-event-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cal-event-chip.timed-dot .cal-event-time {
    color: var(--cf-text-muted, #70757a);
    font-weight: 500;
    margin-right: 0;
}

.cal-event-chip.timed-dot .cal-event-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.cal-event-chip.cal-event-bar {
    color: #fff;
    border-radius: 4px;
    padding: 2px 6px;
}

/* Multi-day / all-day spanning bars (month + week) */
.cal-span-bar {
    position: absolute;
    height: 16px;
    line-height: 16px;
    font-size: 0.7rem;
    font-weight: 500;
    color: #fff;
    border-radius: 4px;
    padding: 0 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
    box-sizing: border-box;
    z-index: 3;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

.cal-span-bar.cont-left {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding-left: 4px;
}

.cal-span-bar.cont-right {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.cal-span-bar:hover {
    filter: brightness(1.12);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: -1px;
    z-index: 5;
}

/* .cal-event-chip.timed positioned in hour cells — see .cal-hour-cell */

.cal-event-time {
    font-weight: 600;
    margin-right: 0.25rem;
    opacity: 0.95;
}

.cal-event-more {
    font-size: 0.7rem;
    color: var(--cf-text-muted, #70757a);
    padding: 0 2px;
}

/* Week / Day */
.cal-week,
.cal-day {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
}

.cal-week-header {
    display: grid;
    grid-template-columns: 56px repeat(7, 1fr);
    border-bottom: 1px solid var(--color-sidebar-border, #dadce0);
    position: sticky;
    top: 0;
    background: var(--color-bg, #fff);
    z-index: 2;
}

.cal-week-gutter {
    width: 56px;
    flex-shrink: 0;
    text-align: right;
    padding-right: 0.4rem;
    font-size: 0.65rem;
    color: var(--cf-text-muted);
}

.cal-week-dayhead {
    text-align: center;
    padding: 0.35rem 0;
}

.cal-week-dayhead.today .cal-week-date {
    background: #1a73e8;
    color: #fff;
    border-radius: 50%;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cal-week-dow {
    font-size: 0.7rem;
    color: var(--cf-text-muted);
    text-transform: uppercase;
}

.cal-week-date {
    font-size: 1.1rem;
    font-weight: 400;
}

.cal-week-allday {
    display: grid;
    grid-template-columns: 56px 1fr;
    border-bottom: 1px solid var(--color-sidebar-border, #dadce0);
    min-height: 28px;
    align-items: stretch;
}

.cal-week-allday-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    min-height: inherit;
}

.cal-week-allday-col {
    border-left: 1px solid var(--color-sidebar-border, #e8eaed);
    min-height: 100%;
}

.cal-span-bar.week {
    /* positioned inside .cal-week-allday-track */
}

.cal-allday-label {
    font-size: 0.65rem;
}

.cal-hour-row {
    display: grid;
    grid-template-columns: 56px repeat(7, 1fr);
    min-height: 48px;
    border-bottom: 1px solid var(--color-sidebar-border, #f0f0f0);
    position: relative;
}

.cal-hour-row.day {
    grid-template-columns: 56px 1fr;
}

.cal-hour-cell {
    border-left: 1px solid var(--color-sidebar-border, #e8eaed);
    position: relative;
    cursor: default;
    padding: 1px 2px;
    /* Allow multi-hour event chips to paint into cells below */
    overflow: visible;
}

.cal-event-chip.timed {
    position: absolute;
    left: 2px;
    right: 2px;
    z-index: 1;
    box-sizing: border-box;
    white-space: normal;
    overflow: hidden;
    min-height: 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.cal-event-chip.timed:hover {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: -1px;
    z-index: 4;
}

.cal-event-chip.timed-dot:hover {
    filter: none;
    box-shadow: none;
    background: rgba(0, 0, 0, 0.08) !important;
    border-radius: 4px;
}

.cal-event-chip.cal-event-bar:hover {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: -1px;
}

.cal-day-allday {
    padding: 0.35rem 0.5rem 0.35rem 56px;
    border-bottom: 1px solid var(--color-sidebar-border, #dadce0);
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    min-height: 28px;
}

/* Year */
.cal-year {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.25rem;
    padding: 1rem;
    overflow: auto;
}

.cal-year-month {
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
}

.cal-year-month:hover {
    background: var(--grey-50, #f8f9fa);
}

.cal-year-month-title {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
    color: #1a73e8;
}

.cal-mini-grid.year .cal-mini-day {
    width: 22px;
    height: 22px;
    font-size: 0.65rem;
}

/* Modal */
.cal-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(32, 33, 36, 0.4);
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.cal-modal {
    background: var(--color-bg-surface, var(--color-bg, #fff));
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
    /* Wide enough for two datetime-local fields side by side without clipping */
    width: min(560px, 100%);
    max-width: calc(100vw - 2rem);
    padding: 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-sizing: border-box;
}

.cal-modal h3 {
    margin: 0 0 0.25rem;
    font-weight: 500;
    font-size: 1.2rem;
}

.cal-modal label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--cf-text-muted, #5f6368);
}

.cal-modal label.cal-checkbox {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text);
    font-size: 0.9rem;
}

.cal-modal input[type="text"],
.cal-modal input[type="date"],
.cal-modal input[type="datetime-local"],
.cal-modal select,
.cal-modal textarea {
    border: 1px solid var(--color-border, var(--color-sidebar-border, #dadce0));
    border-radius: 4px;
    padding: 0.45rem 0.55rem;
    font-size: 0.9rem;
    background: var(--color-bg-muted, var(--color-bg-surface, #fff));
    color: var(--color-text);
    width: 100%;
    box-sizing: border-box;
}

.cal-modal input::placeholder,
.cal-modal textarea::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

.cal-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    min-width: 0;
}

.cal-form-row label {
    min-width: 0;
}

.cal-form-row input[type="date"],
.cal-form-row input[type="datetime-local"] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.cal-modal-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    gap: 0.5rem;
}

.cal-modal-actions-right {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.cal-btn {
    border: 1px solid var(--color-sidebar-border, #dadce0);
    background: transparent;
    border-radius: 4px;
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--color-text);
}

.cal-btn.primary {
    background: var(--btn-primary-bg, #1a73e8);
    border-color: var(--btn-primary-bg, #1a73e8);
    color: var(--btn-primary-text, #fff);
}

.cal-btn.primary:hover {
    background: var(--btn-primary-hover, #1765cc);
    border-color: var(--btn-primary-hover, #1765cc);
    color: var(--btn-primary-text, #fff);
}

.cal-btn.danger {
    border-color: transparent;
    color: #d93025;
}

.cal-btn.danger:hover {
    background: #fce8e6;
}

.cal-color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.cal-color-option {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
}

.cal-color-option.selected {
    border-color: var(--color-text);
    box-shadow: 0 0 0 2px var(--color-bg, #fff), 0 0 0 4px currentColor;
}

html[data-theme="app-dark"] .cal-create-btn,
html[data-theme="dark-blue"] .cal-create-btn,
html[data-theme="dracula"] .cal-create-btn,
html[data-theme="nord"] .cal-create-btn,
html[data-theme="app-dark"] .cal-modal,
html[data-theme="dark-blue"] .cal-modal,
html[data-theme="dracula"] .cal-modal,
html[data-theme="nord"] .cal-modal,
html[data-theme="app-dark"] .cal-dropdown,
html[data-theme="dark-blue"] .cal-dropdown,
html[data-theme="dracula"] .cal-dropdown,
html[data-theme="nord"] .cal-dropdown {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

html[data-theme="app-dark"] .cal-event-chip.timed-dot:hover,
html[data-theme="dark-blue"] .cal-event-chip.timed-dot:hover,
html[data-theme="dracula"] .cal-event-chip.timed-dot:hover,
html[data-theme="nord"] .cal-event-chip.timed-dot:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="app-dark"] .cal-month-cell.today .cal-month-daynum,
html[data-theme="dark-blue"] .cal-month-cell.today .cal-month-daynum,
html[data-theme="dracula"] .cal-month-cell.today .cal-month-daynum,
html[data-theme="nord"] .cal-month-cell.today .cal-month-daynum,
html[data-theme="app-dark"] .cal-mini-day.today,
html[data-theme="dark-blue"] .cal-mini-day.today,
html[data-theme="dracula"] .cal-mini-day.today,
html[data-theme="nord"] .cal-mini-day.today,
html[data-theme="app-dark"] .cal-week-dayhead.today .cal-week-date,
html[data-theme="dark-blue"] .cal-week-dayhead.today .cal-week-date,
html[data-theme="dracula"] .cal-week-dayhead.today .cal-week-date,
html[data-theme="nord"] .cal-week-dayhead.today .cal-week-date {
    background: #8ab4f8;
    color: #202124;
}

.help-heading {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.help-glyph {
    border: none;
    background: transparent;
    color: var(--color-text-muted, #737373);
    padding: 0.05rem 0.2rem;
    line-height: 1;
    cursor: pointer;
    font-size: 0.95rem;
}

.help-glyph:hover,
.help-glyph:focus-visible {
    color: var(--color-text, inherit);
}

.help-page {
    padding: 1rem 1.25rem 2rem;
    max-width: 1100px;
    margin: 0 auto;
}

.help-page-header h2 {
    margin: 0 0 0.25rem;
}

.help-page-lead {
    margin: 0 0 1rem;
    color: var(--color-text-muted);
    font-size: 0.92rem;
}

.help-view {
    display: grid;
    grid-template-columns: minmax(11rem, 16rem) 1fr;
    gap: 1.25rem;
    min-height: 18rem;
    min-width: 0;
}

.help-view-search {
    margin-bottom: 0.5rem;
}

.help-ask-label {
    display: block;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin: 0.15rem 0 0.2rem;
}

.help-ask-model {
    margin-bottom: 0.5rem;
}

.help-ask-box {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.65rem;
}

.help-ask-input {
    font-size: 0.88rem;
    resize: vertical;
}

.help-ask-answer {
    margin: 0 0 1rem;
    padding: 0.7rem 0.8rem 0.85rem;
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: 10px;
    background: var(--color-bg-muted, rgba(127, 127, 127, 0.07));
}

.help-ask-answer-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 0.35rem;
}

.help-ask-error {
    color: var(--cf-error-fg, #b42318);
    font-size: 0.9rem;
}

.help-ask-cites {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.65rem;
}

.help-ask-cite {
    border: 1px solid var(--color-border, #ddd);
    background: var(--color-bg-surface, #fff);
    color: inherit;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.8rem;
    cursor: pointer;
}

.help-ask-cite:hover {
    border-color: var(--color-accent, #333);
}

.help-index-status {
    color: var(--color-text-muted);
    font-size: 0.82em;
    margin: 0.65rem 0 0;
}

.help-view-mobile-bar {
    display: none;
}

.help-view-sidebar {
    min-height: 0;
    overflow: auto;
}

.help-view-toc {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.help-view-toc-item {
    text-align: left;
    border: none;
    background: transparent;
    color: inherit;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.92rem;
}

.help-view-toc-item:hover {
    background: var(--color-bg-muted, #f4f4f5);
}

.help-view-toc-item.is-active {
    background: var(--color-info-bg, #eef2ff);
    font-weight: 600;
}

.help-view-article {
    line-height: 1.55;
    overflow: auto;
    min-height: 0;
}

.help-view-article h1 {
    font-size: 1.45rem;
    font-weight: 700 !important;
    margin-top: 0;
}

.help-view-article .help-section {
    margin: 0.85rem 0 1rem;
    padding: 0 0 0.7rem;
    border: 1px solid var(--color-border, #e5e5e5);
    border-left: 3px solid var(--color-accent, #5b6abf);
    border-radius: 0 10px 10px 0;
    background: var(--color-bg-muted, rgba(127, 127, 127, 0.07));
}

.help-view-article .help-section.is-target {
    box-shadow: inset 0 0 0 2px var(--color-accent, #5b6abf);
}

.help-view-article .help-section > h2 {
    font-size: 1.08rem;
    font-weight: 700 !important;
    font-synthesis: weight;
    letter-spacing: 0.01em;
    margin: 0 0 0.45rem;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--color-border, #e8e8e8);
    background: var(--color-bg-surface, rgba(255, 255, 255, 0.4));
    border-radius: 0 9px 0 0;
}

.help-view-article .help-section > *:not(h2) {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
}

.settings-content .help-view-article h2,
.settings-content .help-view-article .help-section > h2 {
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    margin: 0 0 0.45rem;
}

.help-view-article h2 {
    font-size: 1.08rem;
    font-weight: 700 !important;
    font-synthesis: weight;
    letter-spacing: 0.01em;
    margin: 1.1rem 0 0.45rem;
}

.help-view-article h3 {
    font-size: 1rem;
    font-weight: 700 !important;
    font-synthesis: weight;
    margin: 0.9rem 0 0.35rem;
}
.help-view-article table { width: 100%; border-collapse: collapse; margin: 0.75rem 0; }
.help-view-article th, .help-view-article td { border: 1px solid var(--color-border, #e5e5e5); padding: 0.35rem 0.5rem; text-align: left; vertical-align: top; }
.help-view-muted, .help-view-empty { color: var(--color-text-muted); font-size: 0.9rem; }

.help-overlay {
    position: fixed;
    inset: 0;
    z-index: 40000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    box-sizing: border-box;
}

.help-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 15, 0.38);
}

.help-modal {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    max-width: calc(100vw - 2.5rem);
    max-height: calc(100vh - 2.5rem);
    background: var(--color-bg-surface, var(--color-bg, #fff));
    color: var(--color-text);
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

.help-modal-chrome {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--color-border, #ececec);
}

.help-modal-close {
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.help-modal-close:hover,
.help-modal-close:focus-visible {
    background: var(--color-bg-muted, #f4f4f5);
}

.help-modal-title {
    font-weight: 650;
    font-size: 1.05rem;
}

.help-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 0.75rem 0.9rem 1rem;
    display: flex;
    flex-direction: column;
}

.help-modal-resize {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    background:
        linear-gradient(135deg, transparent 50%, var(--color-border-strong, #bbb) 50%) no-repeat bottom right / 10px 10px;
}

.help-modal .help-view {
    min-height: 0;
    height: 100%;
    flex: 1 1 auto;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
}

@media (max-width: 720px) {
    .help-overlay {
        padding: 0.5rem;
        align-items: stretch;
    }

    .help-modal {
        width: 100% !important;
        height: min(94vh, 100%) !important;
        max-width: none;
        max-height: none;
        border-radius: 12px;
    }

    .help-modal-resize {
        display: none;
    }

    .help-view {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
    }

    .help-modal .help-view {
        grid-template-rows: auto minmax(0, 1fr);
    }

    .help-view-mobile-bar {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-shrink: 0;
        padding-bottom: 0.45rem;
    }

    .help-view-toc-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
    }

    .help-view-sidebar {
        display: none;
        min-height: 0;
        overflow: hidden;
    }

    .help-view-article {
        min-height: 0;
        overflow: auto;
    }

    .help-view--toc-open .help-view-sidebar {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    .help-view--toc-open .help-view-toc {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
    }

    .help-view--toc-open .help-view-article {
        display: none;
    }
}