/* =============================================================================
   THEME SKELETON — CSS Custom Properties
   =============================================================================
   Admin UI uses the dark VS Code-inspired theme hardcoded below.
   Public/site pages (home, post_view, etc.) are governed by the Theme Editor
   (ThemeEditorHandlers.cpp) which injects --site-* overrides per-theme.

   READINESS KEY:
     [admin]  — admin-only, not surfaced to the Theme Editor
     [site]   — controlled by the Theme Editor (dashboard → Themes)
     [shared] — used in both admin and public pages
   ============================================================================= */

:root {
    color-scheme: dark;
    /* --- Surfaces [admin] --- */
    --bg-base:        #1e1e1e;   /* main content area background          */
    --bg-elevated:    #252526;   /* sidebar, panels, modals               */
    --bg-input:       #2d2d2d;   /* form inputs, code blocks, pre elements */
    --bg-hover:       #3c3c3c;   /* hover highlight                       */

    /* --- Text [admin] --- */
    --text-primary:   #d4d4d4;   /* main body text                        */
    --text-secondary: #ccc;      /* secondary / less prominent text       */
    --text-muted:     #858585;   /* placeholder, disabled, helper text    */

    /* --- Accent blue [shared] --- */
    --accent:         #569cd6;   /* borders, focus rings, selected items  */
    --accent-bright:  #9cdcfe;   /* labels, headings                      */
    --accent-dark:    #2a1a3e;   /* primary button background             */
    --accent-hover:   #3a2354;   /* primary button hover                  */
    --accent-info:    #4fc3f7;   /* links, info text                      */

    /* --- Semantic status [shared] --- */
    --color-success:  #4ec9b0;   /* success state (teal)                  */
    --color-error:    #f48771;   /* error / danger                        */
    --color-warning:  #d7ba7d;   /* warning / amber                       */
    --color-info:     #4fc3f7;   /* informational                         */

    /* --- Chat bubbles [chat UI] --- */
    --chat-user-bg:         #2a1a3e; /* user message bubble background        */
    --chat-user-text:       #c8a8f0; /* user message text                     */
    --chat-assistant-bg:    #2d2d2d; /* assistant message bubble background   */
    --chat-assistant-text:  #d4d4d4; /* assistant message text                */
    --chat-model-info-bg:   #1a3d1a; /* model info tag background             */
    --chat-model-info-text: #7ec87e; /* model info tag text                   */

    /* --- Borders [admin] --- */
    --border:         #3c3c3c;   /* standard dividers                     */
    --border-focus:   #569cd6;   /* focused inputs                        */

    /* --- Code / syntax [shared] --- */
    --code-bg:        #2d2d2d;
    --code-string:    #ce9178;   /* strings, literals (orange)            */
    --code-keyword:   #569cd6;   /* keywords (blue)                       */
    --code-comment:   #6a9955;   /* comments (green)                      */
    --code-type:      #4ec9b0;   /* types, built-ins (teal)               */

    /* --- Task status colors [admin] --- */
    --task-todo:             #757575;
    --task-todo-bg:          #2d2d2d;
    --task-todo-text:        #bdbdbd;
    --task-in-progress:      #42a5f5;
    --task-in-progress-bg:   #152d3c;
    --task-in-progress-text: #90caf9;
    --task-done:             #4caf50;
    --task-done-bg:          #1b3d1e;
    --task-done-text:        #a5d6a7;
    --task-cancelled:        #ef5350;
    --task-cancelled-bg:     #3b1a1a;
    --task-cancelled-text:   #ef9a9a;

    /* --- Site/public theme defaults [site] ---
       Override via Theme Editor → active theme CSS variables.
       These control the front-facing CMS output (home, post_view, etc.) */
    --site-bg:        var(--bg-base);
    --site-text:      var(--text-primary);
    --site-accent:    var(--accent);
    --site-link:      var(--accent-info);
    --site-heading:   var(--accent-bright);
    --site-border:    var(--border);
    --site-card-bg:   var(--bg-elevated);
}

/* Inline styles from original HTML can be moved here or to a separate CSS file */
body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: auto;
    background-color: var(--bg-base, #1e1e1e);
    color: var(--text-primary, #d4d4d4);
}

#sidebar {
    width: 260px !important;
    background: var(--bg-elevated);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

#sidebar-content {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}
#sidebar-content::-webkit-scrollbar {
    display: none;
}

#sidebar.collapsed {
    width: 50px !important;
    border-right: 1px solid var(--border);
}

/* Collapsed sidebar: hide section content (link lists) but keep icons */
#sidebar.collapsed .sidebar-section-content {
    display: none;
}
/* Admin section stays visible even when sidebar collapsed */
#sidebar.collapsed .sidebar-admin-section .sidebar-section-content {
    display: block;
}
#sidebar.collapsed .sidebar-admin-section .sidebar-dash-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
    font-size: 14px;
    border-left: none;
}
#sidebar.collapsed .sidebar-admin-section .sidebar-dash-link .sidebar-nav-label {
    display: none;
}
#sidebar.collapsed .sidebar-admin-section .sidebar-dash-link .sidebar-abbr {
    display: inline-block;
}
#sidebar.collapsed .sidebar-admin-section .sidebar-dash-link .sidebar-dash-icon {
    margin-right: 0;
    font-size: 14px;
}

/* Collapsed sidebar: section headers become centered icon-only rows */
#sidebar.collapsed .sidebar-section-header {
    justify-content: center;
    padding: 8px 0 !important;
}
#sidebar.collapsed .sidebar-section-header h4 {
    justify-content: center;
    gap: 0;
}
#sidebar.collapsed .sidebar-section-title-icon {
    margin-right: 0;
    font-size: 16px;
}
#sidebar.collapsed .sidebar-section-icon {
    display: none;
}
#sidebar.collapsed .sidebar-section-header .sidebar-nav-label {
    display: none;
}
#sidebar.collapsed .sidebar-section-header .sidebar-abbr {
    display: inline-block;
}
#sidebar.collapsed .sidebar-admin-section .sidebar-section-header .sidebar-abbr {
    display: none;
}
#sidebar.collapsed .sidebar-admin-section .sidebar-section-title-icon {
    display: none;
}

/* No abbreviation for specific bottom-nav items */
#sidebar.collapsed .persona-switcher .sidebar-abbr,
#sidebar.collapsed .sidebar-help-section .sidebar-abbr,
#sidebar.collapsed .sidebar-no-abbr .sidebar-abbr,
#sidebar.collapsed #chats-section .sidebar-abbr {
    display: none;
}

#sidebar-toggle {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 18px;
    padding: 4px 8px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background-color 0.2s ease;
    flex-shrink: 0;
}

#sidebar-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

#sidebar.collapsed #sidebar-toggle i {
    transform: rotate(180deg);
}

#sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: 15px 0 !important;
}

#sidebar.collapsed .sidebar-title {
    display: none;
}

.sidebar-header {
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 30px;
    border-bottom: 1px solid var(--border);
    transition: padding 0.3s ease;
    height: 50px;
    box-sizing: border-box;
}

.sidebar-title {
    margin: 0;
    margin-left: 10px;
    font-size: 1.1em;
    font-weight: 600;
    transition: opacity 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.sidebar-logo {
    height: 28px;
    width: auto;
    transition: opacity 0.3s ease;
}

.sidebar-logo-link:hover .sidebar-logo,
.sidebar-logo-link:hover .sidebar-logo-icon {
    opacity: 0.85;
}

.sidebar-logo-icon {
    width: 28px;
    height: 28px;
}

/* Expanded: full logo visible, icon hidden */
.sidebar-logo-full { display: flex; }
.sidebar-logo-collapsed { display: none !important; }

/* Collapsed: icon visible, full logo hidden */
#sidebar.collapsed .sidebar-logo-full { display: none !important; }
#sidebar.collapsed .sidebar-logo-collapsed { display: flex !important; }

/* OVERRIDE: collapsed header shows ONLY the toggle chevron — hide both logos.
   Placed after the rules above so it wins the !important tie. Icon nav below
   keeps full functionality. */
#sidebar.collapsed .sidebar-logo-full,
#sidebar.collapsed .sidebar-logo-collapsed {
    display: none !important;
}
#sidebar.collapsed .sidebar-header {
    justify-content: center;
}

/* App Nav styling */
.app-nav {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    border-bottom: 1px solid #444;
}

/* Sidebar Items (Unified look for links and buttons) */
.sidebar-nav-wrapper {
    padding: 4px 8px;
    transition: padding 0.3s ease;
}

.sidebar-bottom-nav {
    flex-shrink: 0;
    padding: 4px 8px;
    border-top: 1px solid var(--border, #3c3c3c);
    transition: padding 0.3s ease;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 6px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-sizing: border-box;
    text-align: left;
}

.sidebar-nav-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.sidebar-nav-item.active {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.sidebar-nav-icon {
    font-size: 18px;
    margin-right: 12px;
    min-width: 24px;
    text-align: center;
    display: inline-block;
}

/* Icon set toggle: Font Awesome vs Emoji */
/* Default: hide emoji (fontawesome is the default) */
.sidebar-icon-emoji { display: none !important; }
/* In emoji mode: hide FA, show emoji */
.sidebar-icons-emoji .sidebar-icon-fa { display: none !important; }
.sidebar-icons-emoji .sidebar-icon-emoji { display: inline !important; }
/* In fontawesome mode: hide emoji (redundant safety) */
.sidebar-icons-fontawesome .sidebar-icon-emoji { display: none !important; }

#sidebar.collapsed .sidebar-nav-wrapper,
#sidebar.collapsed .sidebar-bottom-nav {
    padding: 4px 0;
}

#sidebar.collapsed .sidebar-nav-item {
    justify-content: center;
    padding: 10px 0;
}

.sidebar-nav-label {
    font-size: 14px;
    font-weight: 500;
}

#sidebar.collapsed .sidebar-nav-label {
    display: none;
}

.sidebar-abbr {
    display: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--text-muted, #858585);
    min-width: 20px;
    text-align: center;
}
#sidebar.collapsed .sidebar-abbr {
    display: inline-block;
}

#sidebar.collapsed .role-badge {
    display: none;
}

#sidebar.collapsed .sidebar-nav-icon {
    margin-right: 0;
}

.role-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 8px;
    line-height: 1.4;
    margin-left: 6px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.role-admin {
    background: var(--accent);
    color: #fff;
}

.role-super-admin {
    background: var(--color-warning);
    color: #1e1e1e;
}

.persona-switcher {
    position: relative;
}

.persona-switcher-btn {
    width: 100%;
    justify-content: flex-start;
}

.persona-dropdown {
    position: absolute;
    bottom: 100%;
    left: 8px;
    right: 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.4);
    z-index: 1000;
    overflow: hidden;
    max-height: 240px;
    overflow-y: auto;
}

.persona-dropdown.hidden {
    display: none;
}

.persona-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}

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

.persona-item:hover {
    background: var(--bg-hover);
}

.persona-item.active {
    background: var(--accent-dark);
    color: #fff;
}

.persona-item .pi-name {
    font-weight: 600;
    flex: 1;
}

.persona-item .pi-role {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.persona-item .pi-check {
    color: var(--color-success);
    font-size: 12px;
}

#sidebar.collapsed .persona-dropdown {
    /* JS positions this as fixed when opened while collapsed */
}

.acting-as-badge {
    display: inline-block;
    font-size: 0.55em;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    vertical-align: middle;
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#sidebar.collapsed .acting-as-badge {
    display: none;
}

/* Collapsible sidebar section */
.sidebar-section-collapsible {
    flex-shrink: 0;
}
#sidebar .sidebar-section-collapsible {
    flex-shrink: 0;
}

.sidebar-section-header {
    user-select: none;
    transition: background-color 0.2s ease;
}

.sidebar-section-header:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.sidebar-section-title-icon {
    margin-right: 6px;
    color: #888;
    font-size: 0.85em;
}

.sidebar-section-icon {
    transition: transform 0.3s ease;
    font-size: 12px;
    color: #aaa;
}

.sidebar-section-collapsible.collapsed .sidebar-section-icon {
    transform: rotate(-90deg);
}

.sidebar-section-content {
    max-height: 1000px;
    overflow: hidden;
    /* CLS FIX: No transition — prevent layout shift during expand/collapse */
    opacity: 1;
}

.sidebar-section-collapsible.collapsed .sidebar-section-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

/* Help section in sidebar — independent scroll container (only when expanded) */
.sidebar-help-section:not(.collapsed) .sidebar-section-content {
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}
.sidebar-help-section:not(.collapsed) .sidebar-section-content::-webkit-scrollbar {
    display: none;
}

#help-toc-list {
    display: flex;
    flex-direction: column;
}

.sidebar-help-item {
    display: block;
    padding: 4px 12px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.8rem;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-help-item:hover {
    background: rgba(255,255,255,0.05);
    color: var(--accent-info);
    text-decoration: none;
}

/* Suppress transitions during initial state restoration from localStorage */
#sidebar.sidebar-no-transition,
#sidebar.sidebar-no-transition * {
    transition: none !important;
}

/* Settings panel — slides in between sidebar and main */
#settings-panel {
    width: 0;
    overflow: hidden;
    background: var(--bg-elevated);
    border-right: 1px solid var(--border);
    color: var(--text-secondary);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    transition: width 0.25s ease;
}

#settings-panel.open {
    width: 280px;
    overflow-y: auto;
}

.settings-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.settings-panel-header h3 {
    margin: 0;
    font-size: 1em;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.settings-panel-header button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    border-radius: 3px;
    line-height: 1;
}

.settings-panel-header button:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.settings-group {
    padding: 15px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.settings-group h4 {
    margin: 0 0 10px 0;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
}

.settings-group label {
    display: block;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 0.9em;
}

.settings-group label:last-child {
    margin-bottom: 0;
}

.settings-group input[type="radio"] {
    margin-right: 6px;
    accent-color: var(--accent);
}

#main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--site-bg);
}

/* ToastUI link styling - make links visible on blue backgrounds */
.toastui-editor-contents a,
.toastui-viewer a,
.toastui-editor-contents a:link,
.toastui-viewer a:link,
.toastui-editor-contents a:visited,
.toastui-viewer a:visited {
    color: #ffffff !important;
    text-decoration: underline !important;
}

.toastui-editor-contents a:hover,
.toastui-viewer a:hover {
    color: #e0e0e0 !important;
    text-decoration: underline !important;
}

/* Chat message bubble base */
.msg-bubble {
    padding: 10px;
    border-radius: 8px;
    max-width: 80%;
    cursor: pointer;
    align-self: flex-start;
    position: relative;
}

/* User message bubble */
.msg-user {
    background: var(--chat-user-bg);
    color: var(--chat-user-text);
    padding-bottom: 26px;
    position: relative;
}
.msg-user a { color: #fff !important; text-decoration: underline !important; }
.msg-user a:hover { color: #e0e0e0 !important; }

/* Assistant message bubble */
.msg-assistant {
    background: var(--chat-assistant-bg);
    color: var(--chat-assistant-text);
    overflow: visible !important;
}

/* Model info tag inside user bubble */
.msg-model-info {
    margin-top: 8px;
    padding: 6px 10px;
    background: var(--chat-model-info-bg);
    color: var(--chat-model-info-text);
    font-size: 0.85em;
    border-radius: 4px;
    font-weight: 500;
}

/* User info tag inside user bubble */
.msg-user-info {
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.15);
    color: var(--chat-user-text);
    font-size: 0.85em;
    border-radius: 4px;
    font-weight: 500;
}

/* Message selection checkbox */
.msg-select-cb {
    position: absolute;
    bottom: 6px;
    left: 6px;
    width: 15px;
    height: 15px;
    cursor: pointer;
    z-index: 10000;
    accent-color: var(--chat-user-bg);
}

/* Code block styling for ToastUI */
.toastui-editor-contents pre,
.toastui-viewer pre {
    background: var(--code-bg) !important;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 12px;
    overflow-x: auto;
    margin: 10px 0;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.toastui-editor-contents pre code,
.toastui-viewer pre code {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: normal !important;
    font-style: normal !important;
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Inline code styling */
.toastui-editor-contents code:not(pre code),
.toastui-viewer code:not(pre code) {
    background: rgba(121, 192, 255, 0.1) !important;
    color: #79c0ff !important;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
    font-size: 0.9em !important;
    font-weight: normal !important;
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Prism.js code highlighting - ensure clean rendering */
.toastui-editor-contents pre[class*="language-"],
.toastui-viewer pre[class*="language-"] {
    background: var(--code-bg) !important;
}

/* Let Prism tomorrow theme control all token colors — only suppress decorative overrides */
.toastui-editor-contents pre code .token,
.toastui-viewer pre code .token {
    text-shadow: none !important;
    background: transparent !important;
}

/* Default (unhighlighted) text inside code blocks */
.toastui-editor-contents pre,
.toastui-viewer pre {
    color: #ccc;
}

/* Assistant message ToastUI text */
.msg-assistant .toastui-editor-contents,
.msg-assistant .toastui-viewer {
    color: #e0e0e0 !important;
}
.msg-assistant .toastui-editor-contents *:not(li):not(ul):not(ol),
.msg-assistant .toastui-viewer *:not(li):not(ul):not(ol) {
    color: inherit;
}

/* Proper list styling for ToastUI */
.toastui-editor-contents ul,
.toastui-viewer ul,
.toastui-editor-contents ol,
.toastui-viewer ol {
    margin: 10px 0 !important;
    padding-left: 30px !important;
    list-style-position: outside !important;
}

.toastui-editor-contents li,
.toastui-viewer li {
    margin: 5px 0 !important;
    padding-left: 5px !important;
    list-style-position: outside !important;
    display: list-item !important;
    text-align: left !important;
}

/* Hide ToastUI's pseudo-element markers that create duplicate markers */
.toastui-editor-contents li::before,
.toastui-viewer li::before,
.toastui-editor-contents li::after,
.toastui-viewer li::after {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}

.toastui-editor-contents ul li,
.toastui-viewer ul li {
    list-style-type: disc !important;
}

.toastui-editor-contents ol li,
.toastui-viewer ol li {
    list-style-type: decimal !important;
}

/* Ensure list markers are visible and properly positioned */
.msg-assistant .toastui-editor-contents ul,
.msg-assistant .toastui-viewer ul,
.msg-assistant .toastui-editor-contents ol,
.msg-assistant .toastui-viewer ol {
    margin: 10px 0 !important;
    padding-left: 30px !important;
    list-style-position: outside !important;
}
.msg-assistant .toastui-editor-contents li,
.msg-assistant .toastui-viewer li {
    margin: 5px 0 !important;
    padding-left: 5px !important;
    list-style-position: outside !important;
    display: list-item !important;
    color: #e0e0e0 !important;
    text-align: left !important;
}
.msg-assistant .toastui-editor-contents li::before,
.msg-assistant .toastui-viewer li::before,
.msg-assistant .toastui-editor-contents li::after,
.msg-assistant .toastui-viewer li::after {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}
.msg-assistant .toastui-editor-contents ul li,
.msg-assistant .toastui-viewer ul li { list-style-type: disc !important; }
.msg-assistant .toastui-editor-contents ol li,
.msg-assistant .toastui-viewer ol li { list-style-type: decimal !important; }
.msg-assistant .toastui-editor-contents p,
.msg-assistant .toastui-viewer p,
.msg-assistant .toastui-editor-contents li,
.msg-assistant .toastui-viewer li {
    color: #e0e0e0 !important;
}

/* Heading hierarchy — progressive size + brightness */
.msg-assistant .toastui-editor-contents h1,
.msg-assistant .toastui-viewer h1 {
    font-size: 1.6em !important; font-weight: 700 !important; color: #ffffff !important;
    border-bottom: 1px solid #444; padding-bottom: 6px; margin: 16px 0 8px;
}
.msg-assistant .toastui-editor-contents h2,
.msg-assistant .toastui-viewer h2 {
    font-size: 1.4em !important; font-weight: 600 !important; color: #f0f0f0 !important;
    border-bottom: 1px solid #3a3a3a; padding-bottom: 4px; margin: 14px 0 6px;
}
.msg-assistant .toastui-editor-contents h3,
.msg-assistant .toastui-viewer h3 {
    font-size: 1.2em !important; font-weight: 600 !important; color: #e8e8e8 !important;
    margin: 12px 0 5px;
}
.msg-assistant .toastui-editor-contents h4,
.msg-assistant .toastui-viewer h4 {
    font-size: 1.1em !important; font-weight: 600 !important; color: #e0e0e0 !important;
    margin: 10px 0 4px;
}
.msg-assistant .toastui-editor-contents h5,
.msg-assistant .toastui-editor-contents h6,
.msg-assistant .toastui-viewer h5,
.msg-assistant .toastui-viewer h6 {
    font-size: 1em !important; font-weight: 600 !important; color: #d0d0d0 !important;
    margin: 8px 0 4px;
}

/* Bold text */
.msg-assistant .toastui-editor-contents strong,
.msg-assistant .toastui-viewer strong {
    color: #ffffff !important; font-weight: 700 !important;
}

/* Blockquotes */
.msg-assistant .toastui-editor-contents blockquote,
.msg-assistant .toastui-viewer blockquote {
    border-left: 4px solid #569cd6 !important;
    padding: 8px 16px !important;
    margin: 12px 0 !important;
    color: #aaaaaa !important;
    font-style: italic;
    background: rgba(86, 156, 214, 0.06);
    border-radius: 0 4px 4px 0;
}

/* Tables */
.msg-assistant .toastui-editor-contents table,
.msg-assistant .toastui-viewer table {
    border-collapse: collapse !important; width: 100%; margin: 12px 0;
    color: #e0e0e0 !important;
}
.msg-assistant .toastui-editor-contents th,
.msg-assistant .toastui-viewer th {
    background: #2a2a3a !important; color: #c8c8c8 !important;
    border: 1px solid #444 !important; padding: 8px 12px !important; font-weight: 600 !important;
}
.msg-assistant .toastui-editor-contents td,
.msg-assistant .toastui-viewer td {
    border: 1px solid #3a3a3a !important; padding: 6px 12px !important; color: #e0e0e0 !important;
}
.msg-assistant .toastui-editor-contents tr:nth-child(even) td,
.msg-assistant .toastui-viewer tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.03);
}

/* Horizontal rule */
.msg-assistant .toastui-editor-contents hr,
.msg-assistant .toastui-viewer hr {
    border: none !important; border-top: 1px solid #444 !important; margin: 16px 0;
}

/* Ensure dark theme class is applied */
.toastui-editor-dark .toastui-editor-contents,
.toastui-editor-dark .toastui-viewer {
    color: #e0e0e0 !important;
}

/* Proper list styling for dark theme */
.toastui-editor-dark .toastui-editor-contents ul,
.toastui-editor-dark .toastui-viewer ul,
.toastui-editor-dark .toastui-editor-contents ol,
.toastui-editor-dark .toastui-viewer ol {
    margin: 10px 0 !important;
    padding-left: 30px !important;
    list-style-position: outside !important;
}

.toastui-editor-dark .toastui-editor-contents li,
.toastui-editor-dark .toastui-viewer li {
    margin: 5px 0 !important;
    padding-left: 5px !important;
    list-style-position: outside !important;
    display: list-item !important;
    text-align: left !important;
}

/* Hide duplicate pseudo-element markers in dark theme */
.toastui-editor-dark .toastui-editor-contents li::before,
.toastui-editor-dark .toastui-viewer li::before,
.toastui-editor-dark .toastui-editor-contents li::after,
.toastui-editor-dark .toastui-viewer li::after {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}

.toastui-editor-dark .toastui-editor-contents ul li,
.toastui-editor-dark .toastui-viewer ul li {
    list-style-type: disc !important;
}

.toastui-editor-dark .toastui-editor-contents ol li,
.toastui-editor-dark .toastui-viewer ol li {
    list-style-type: decimal !important;
}

.toastui-editor-dark .toastui-editor-contents p,
.toastui-editor-dark .toastui-editor-contents li,
.toastui-editor-dark .toastui-viewer p,
.toastui-editor-dark .toastui-viewer li {
    color: #e0e0e0 !important;
}

/* Code block wrapper with language header */
.code-block-wrapper {
    margin: 10px 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #3a3a3a;
}

.code-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px 5px 14px;
    background: #1a1a2e;
    border-bottom: 1px solid #333;
}

.code-block-lang {
    color: #9cdcfe;
    font-size: 11px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.code-block-wrapper pre {
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Code block copy button */
.code-copy-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #aaa;
    padding: 3px 9px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.15s;
}

.code-copy-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* Message copy/action buttons — hidden by default, reveal on message hover */
.message-copy-btn,
.message-action-btn,
.msg-copy-prompt-btn,
.msg-quick-reply-btn,
.msg-delete-btn {
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 10000 !important;
    position: absolute !important;
    pointer-events: auto !important;
}

#messages > div:hover .message-copy-btn,
#messages > div:hover .message-action-btn,
#messages > div:hover .msg-copy-prompt-btn,
#messages > div:hover .msg-quick-reply-btn,
#messages > div:hover .msg-delete-btn {
    opacity: 1;
}

/* Ensure ToastUI viewer doesn't cover the copy button */
.toastui-editor-viewer,
.toastui-editor-contents {
    position: relative !important;
}

/* Make sure ToastUI doesn't create overflow that hides the button */
/* (handled by .msg-assistant { overflow: visible !important } above) */

/* Conversations table row selection - orange semi-transparent */
#conversations-table-container .tabulator-row.tabulator-selected,
#conversations-table-container .tabulator .tabulator-row.tabulator-selected {
    background-color: rgba(255, 165, 0, 0.3) !important;
    /* Orange with 30% opacity */
    color: inherit !important;
}

#conversations-table-container .tabulator-row.tabulator-selected:hover,
#conversations-table-container .tabulator .tabulator-row.tabulator-selected:hover {
    background-color: rgba(255, 165, 0, 0.4) !important;
    /* Slightly more opaque on hover */
    color: inherit !important;
}

/* Ensure cells in selected row also have the orange background */
#conversations-table-container .tabulator-row.tabulator-selected .tabulator-cell {
    background-color: transparent !important;
    /* Let the row background show through */
}

/* Conversations custom multi-select highlight */
#conversations-table-container .conv-row-selected {
    background-color: rgba(255, 165, 0, 0.25) !important;
    border-left: 3px solid #ffa500 !important;
}
#conversations-table-container .conv-row-selected:hover {
    background-color: rgba(255, 165, 0, 0.35) !important;
}
#conversations-table-container .conv-row-selected .tabulator-cell {
    background-color: transparent !important;
}

/* Message row multi-select highlight */
#conversations-table-container .conv-msg-selected {
    background-color: rgba(255, 107, 107, 0.2) !important;
    border-left: 3px solid #ff6b6b !important;
}
#conversations-table-container .conv-msg-selected:hover {
    background-color: rgba(255, 107, 107, 0.3) !important;
}
#conversations-table-container .conv-msg-selected .tabulator-cell {
    background-color: transparent !important;
}

/* Conversations context menu */
.conv-ctx {
    position: fixed;
    z-index: 2000;
    background: #252526;
    border: 1px solid #3c3c3c;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    min-width: 160px;
    padding: 4px 0;
    display: none;
    font-size: 13px;
    color: #d4d4d4;
}
.conv-ctx-item {
    padding: 6px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.conv-ctx-item:hover {
    background: #094771;
}
.conv-ctx-sep {
    height: 1px;
    background: #3c3c3c;
    margin: 3px 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   UTILITY CLASSES (EXTRACTED FROM INLINE STYLES)
   ───────────────────────────────────────────────────────────────────────────── */
.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-1 {
    flex: 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

.vh-100 {
    height: 100vh;
}

.w-18 {
    width: 18px;
}

.h-18 {
    height: 18px;
}

.overflow-hidden {
    overflow: hidden;
}

.modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: var(--bg-elevated, #252526);
    color: var(--text-primary, #d4d4d4);
    padding: 24px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border, #3c3c3c);
    max-height: 90vh;
    overflow-y: auto;
}

.modal-content h3 {
    margin-top: 0;
    color: var(--accent-bright, #9cdcfe);
}

.modal-title {
    margin-top: 0;
    color: var(--accent-bright, #9cdcfe);
}

.modal-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
}

.overflow-y-auto {
    overflow-y: auto;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.align-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-4 {
    gap: 4px;
}

.gap-8 {
    gap: 8px;
}

.gap-10 {
    gap: 10px;
}

.gap-15 {
    gap: 15px;
}

.p-20 {
    padding: 20px;
}



.mt-4 {
    margin-top: 4px;
}

.mt-8 {
    margin-top: 8px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-16 {
    margin-top: 16px;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.font-bold {
    font-weight: bold;
}

.font-italic {
    font-style: italic;
}

.font-size-12 {
    font-size: 12px;
}

.font-size-13 {
    font-size: 13px;
}

.font-size-14 {
    font-size: 14px;
}

.font-size-15 {
    font-size: 15px;
}

.nowrap {
    white-space: nowrap;
}

.text-muted {
    color: #666;
}

.text-gray {
    color: #999;
}

.text-white {
    color: #ffffff;
}

.border-radius-3 {
    border-radius: 3px;
}

.border-radius-4 {
    border-radius: 4px;
}

.border-radius-8 {
    border-radius: 8px;
}

.border-top-1 {
    border-top: 1px solid #ddd;
}

.border-bottom-1 {
    border-bottom: 1px solid #ddd;
}

.cursor-pointer {
    cursor: pointer;
}

.display-block {
    display: block;
}

.btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.btn-primary {
    background-color: #007bff;
    color: white;
}

.btn-primary:hover {
    background-color: #0056b3;
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

.btn-success {
    background-color: #28a745;
    color: white;
}

.btn-success:hover {
    background-color: #218838;
}

.btn-danger {
    background-color: #dc3545;
    color: white;
}

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

.btn-warning {
    background-color: var(--color-warning);
    color: #000;
}

.btn-warning:hover {
    background-color: #c4a86b;
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMMON STYLES (FROM MAIN-STYLE.WITZ)
   ───────────────────────────────────────────────────────────────────────────── */
.container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    min-height: 0;
}

.footer {
    background-color: var(--bg-base, #1e1e1e);
    color: var(--text-muted, #858585);
    font-size: 12px;
}

.sidebar-section {
    padding: 12px;
    border-bottom: 1px solid #eee;
}

.sidebar-section h3 {
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: bold;
    color: #666;
}

.sidebar-section label {
    display: block;
    padding: 4px 0;
    cursor: pointer;
}

.sidebar-section input[type="radio"] {
    margin-right: 6px;
}

.logs-panel {
    height: 20vh;
    min-height: 150px;
    max-height: 300px;
    display: flex;
    flex-direction: column;
    background: #1e1e1e;
    border-top: 1px solid #444;
    flex-shrink: 0;
    overflow: hidden;
}

.logs-content {
    flex: 1;
    font-family: monospace;
    font-size: 11px;
    color: #d4d4d4;
    padding: 8px;
    overflow-y: auto;
    overflow-x: hidden;
}

.thread {
    padding: 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.thread:hover {
    background-color: #f9f9f9;
}

.thread.active {
    background-color: #e3f2fd;
}

.messages {
    flex: 1;
    padding: 16px;
    overflow: auto;
    background-color: #fafafa;
    min-height: 0;
}

.message {
    margin-bottom: 16px;
    padding: 12px;
    border-radius: 8px;
    max-width: 80%;
}

.message.user {
    text-align: right;
    background-color: #007bff;
    color: white;
    margin-left: auto;
}

.message.assistant {
    text-align: left;
    background-color: #e9ecef;
    color: #333;
    margin-right: auto;
}

.message-actions {
    margin-top: 4px;
    font-size: 12px;
    opacity: 0.7;
}

.message-actions a {
    margin-right: 8px;
    cursor: pointer;
    text-decoration: underline;
}

/* Search Sources Panel */
.search-sources-panel {
    background: #2d2d2d;
    border: 1px solid #3c3c3c;
    border-radius: 6px;
    margin-top: 10px;
    margin-bottom: 8px;
    overflow: hidden;
}

.msg-bubble .search-sources-panel {
    margin-top: 12px;
    width: 100%;
}

.search-sources-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #252526;
    border-bottom: 1px solid #3c3c3c;
    cursor: pointer;
}

.search-sources-header:hover {
    background: #333;
}

.search-sources-title {
    font-size: 13px;
    font-weight: 500;
    color: #d4d4d4;
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-sources-title .search-icon {
    color: #569cd6;
}

.search-sources-stats {
    font-size: 12px;
    color: #858585;
}

.search-sources-body {
    max-height: 200px;
    overflow-y: auto;
    padding: 8px 12px;
}

.search-sources-body.collapsed {
    display: none;
}

.search-source-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #3c3c3c;
}

.search-source-item:last-child {
    border-bottom: none;
}

.search-source-number {
    font-size: 11px;
    color: #569cd6;
    font-weight: 500;
    min-width: 20px;
}

.search-source-title {
    font-size: 13px;
    color: #9cdcfe;
    text-decoration: none;
    word-break: break-word;
}

.search-source-title:hover {
    text-decoration: underline;
}

.search-source-url {
    font-size: 11px;
    color: #6a9955;
    margin-top: 2px;
    word-break: break-all;
}

#composer {
    padding: 12px;
    border-top: 1px solid #3e3e3e;
    display: flex;
    gap: 8px;
    background-color: #1e1e1e;
}

#composer textarea {
    flex: 1;
    height: 64px;
    padding: 8px;
    border: 1px solid #3e3e3e;
    border-radius: 4px;
    resize: vertical;
    background-color: #2d2d2d;
    color: #d4d4d4;
}

.status-indicator {
    padding: 8px;
    font-size: 12px;
    color: #666;
    font-style: italic;
}

.typing-indicator {
    display: none;
    padding: 8px;
    font-style: italic;
    color: #999;
}

.typing-indicator.active {
    display: block;
}

.typing-indicator::after {
    content: '...';
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {

    0%,
    20% {
        content: '.';
    }

    40% {
        content: '..';
    }

    60%,
    100% {
        content: '...';
    }
}

.token-usage {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}

.suggested-prompts {
    margin-top: 16px;
    padding: 12px;
    background-color: #f0f0f0;
    border-radius: 4px;
}

.suggested-prompt {
    display: inline-block;
    margin: 4px;
    padding: 6px 12px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.suggested-prompt:hover {
    background-color: #f9f9f9;
}

pre {
    background-color: var(--code-bg, #f4f4f4);
    border: 1px solid var(--border, #ddd);
    border-radius: 4px;
    padding: 12px;
    overflow-x: auto;
    margin: 8px 0;
}

pre code {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.5;
}

code {
    background-color: var(--bg-input, #f4f4f4);
    padding: 2px 4px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

.settings-page {
    font-family: sans-serif;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--bg-base, #1e1e1e);
    width: 100%;
    box-sizing: border-box;
}

.settings-section {
    background: var(--bg-elevated, #252526);
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border, #3c3c3c);
    color: var(--text-primary, #d4d4d4);
}

.settings-section h2 {
    margin-top: 0;
    color: var(--accent-bright, #9cdcfe);
    border-bottom: 2px solid var(--accent, #569cd6);
    padding-bottom: 8px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 4px;
    font-weight: bold;
    color: var(--accent-bright, #9cdcfe);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border, #3c3c3c);
    border-radius: 4px;
    font-size: 14px;
    background-color: var(--bg-input, #2d2d2d);
    color: var(--text-primary, #d4d4d4);
}

.form-group textarea {
    min-height: 80px;
    resize: vertical;
}

.form-group small {
    display: block;
    margin-top: 4px;
    color: var(--text-muted, #858585);
    font-size: 12px;
}

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

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 24px;
}

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

.toggle-switch input:checked + .toggle-slider {
    background-color: #dc3545;
}

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

.masked {
    font-family: monospace;
    background-color: #f8f8f8;
    padding: 4px 8px;
    border-radius: 4px;
}

.error-message {
    color: #dc3545;
    margin-top: 4px;
    font-size: 12px;
}

.success-message {
    color: #28a745;
    margin-top: 4px;
    font-size: 12px;
}

/* App Nav Navigation Links */
.app-nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    color: #858585;
    text-decoration: none;
    font-size: 13px;
    border-left: 3px solid transparent;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}

.app-nav a:hover {
    color: #cccccc;
    background: #2a2d2e;
}

.app-nav a.app-nav-active {
    color: #9cdcfe;
    border-left-color: #569cd6;
    background: #2a2d2e;
}

.app-nav-icon {
    font-size: 15px;
    flex-shrink: 0;
}

.app-nav-label {
    font-size: 12px;
}

.topnav {
    display: flex;
    align-items: center;
    background: #1a1a1b;
    border-bottom: 1px solid #3c3c3c;
    padding: 0 12px;
    height: 40px;
    gap: 2px;
    flex-shrink: 0;
}

.topnav-brand {
    font-size: 14px;
    font-weight: 600;
    color: #cccccc;
    margin-right: 16px;
    white-space: nowrap;
}

.topnav a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    color: #858585;
    text-decoration: none;
    font-size: 12px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.15s;
}

.topnav a:hover {
    color: #cccccc;
}

.topnav a.topnav-active {
    color: #9cdcfe;
    border-bottom-color: #569cd6;
}

.topnav-spacer {
    flex: 1;
}

.topnav-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.topnav-right a {
    font-size: 12px;
    padding: 4px 8px;
    color: #858585;
}

.topnav-right a:hover {
    color: #cccccc;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ERROR PAGE STYLES (FROM ERROR-STYLE.WITZ)
   ───────────────────────────────────────────────────────────────────────────── */
.error-icon {
    font-size: 64px;
    margin-bottom: 20px;
}

.error-text-red {
    color: #e74c3c;
}

.error-container {
    background: white;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.error-message-box {
    color: #555;
    line-height: 1.6;
    margin: 20px 0;
    padding: 20px;
    background: #fff5f5;
    border-left: 4px solid #e74c3c;
    text-align: left;
}

.code-box {
    background: #2c3e50;
    color: #ecf0f1;
    padding: 15px;
    border-radius: 5px;
    font-family: monospace;
    margin: 20px 0;
    text-align: left;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SIDEBAR ADDITIONS
   ───────────────────────────────────────────────────────────────────────────── */
.status-indicator-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
}

.logs-terminal {
    font-family: monospace;
    font-size: 12px;
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 12px;
    border-radius: 4px;
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 12px;
    min-height: 200px;
}

.h-36 {
    height: 36px;
}

.h-80 {
    height: 80px;
}

.h-150 {
    height: 150px;
}

.h-200 {
    height: 200px;
}

.h-300 {
    height: 300px;
}

.h-400 {
    height: 400px;
}

.border-1 {
    border: 1px solid #ddd;
}

.border-ccc {
    border: 1px solid #ccc;
}

.bg-midnight {
    background: #2d2d2d;
}

.bg-success {
    background-color: #1a3d1a !important;
    color: #7ec87e !important;
}

.bg-success:hover {
    background-color: #234d23 !important;
}

.bg-blue-639c {
    background-color: #2a1a3e !important;
    color: #c8a8f0 !important;
}

.bg-blue-639c:hover {
    background-color: #3a2354 !important;
}

/* Inline model star rating */
#inline-model-rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    line-height: 1;
}
#inline-model-rating .inline-star {
    color: #ccc;
    cursor: pointer;
    font-size: 16px;
    transition: color 0.1s;
}
#inline-model-rating .inline-star.filled {
    color: #ffd700;
}
#inline-model-rating .inline-star:hover,
#inline-model-rating:hover .inline-star.hover-fill {
    color: #ffd700;
}

/* Tabulator custom styles for editable cells */
.tabulator .tabulator-row.tabulator-row-changed {
    background-color: #2d4a2d !important;
    color: white;
}

.tabulator .tabulator-cell.tabulator-editing {
    background-color: #3a3a3a !important;
    color: white;
}

.controls {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.controls input[type="text"],
.controls select {
    padding: 8px 12px;
    border: 1px solid #555;
    background: #2d2d2d;
    color: #d4d4d4;
    border-radius: 4px;
    font-size: 14px;
}

.h-700 {
    height: 700px;
}

.vh-min-0 {
    min-height: 0;
}

.h-min-0 {
    height: auto;
    min-height: 0;
}

.text-yellow {
    color: #ffc107 !important;
}

.text-blue {
    color: #007bff !important;
}

.bg-light-yellow {
    background-color: #fff3cd !important;
}

.border-yellow {
    border: 1px solid #ffeeba !important;
}

.lh-1-6 {
    line-height: 1.6;
}

.max-w-400 {
    max-width: 400px;
}

.max-w-1600 {
    max-width: 1600px;
}

.w-90-pct {
    width: 90%;
}

.z-1000 {
    z-index: 1000;
}

.help-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
}

#sidebar *::-webkit-scrollbar {
    display: none;
}
#sidebar * {
    scrollbar-width: none;
}

#threads {
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: none;
}
#threads::-webkit-scrollbar {
    display: none;
}

/* Sidebar chat thread items — mirrors help-toc-item */
.sidebar-chat-item {
    display: block;
    padding: 8px 15px;
    color: #c8c8c8;
    font-size: 0.875rem;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 0 3px 3px 0;
}

.sidebar-chat-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #d4d4d4;
}

.sidebar-chat-item.active {
    color: #9cdcfe;
    border-left-color: #569cd6;
    background: rgba(255, 255, 255, 0.1);
}

.help-toc-item {
    display: block;
    padding: 6px 15px;
    height: 32px;
    line-height: 20px;
    box-sizing: border-box;
    color: #c8c8c8;
    text-decoration: none;
    font-size: 0.85rem;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.help-toc-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #d4d4d4;
}

.help-toc-item.active {
    color: #9cdcfe;
    border-left-color: #569cd6;
    background: rgba(255, 255, 255, 0.1);
}

.help-toc-empty {
    color: #858585;
    font-size: 0.85rem;
    padding: 1rem;
}

.help-content {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
    color: #d4d4d4;
    background: #1e1e1e;
}

.help-content h1 {
    color: #d4d4d4;
    font-size: 1.4rem;
    margin: 0 0 1rem;
    border-bottom: 1px solid #3c3c3c;
    padding-bottom: 0.5rem;
}

.help-article {
    display: none;
}

.help-article.active {
    display: block;
}

.help-empty {
    color: #858585;
    font-size: 0.95rem;
    text-align: center;
    padding: 4rem 0;
}

.help-empty a {
    color: #569cd6;
    text-decoration: none;
}

.help-edit-link {
    font-size: 0.8rem;
    color: #858585;
    text-decoration: none;
    float: right;
    margin-top: 0.25rem;
}

.help-edit-link:hover {
    color: #9cdcfe;
}

/* ToastUI viewer dark fix */
.toastui-editor-contents {
    color: #d4d4d4;
}

/* Sidebar divider */
.sidebar-divider {
    border: none;
    border-top: 1px solid #3c3c3c;
    margin: 6px 12px;
}

/* Sidebar sub-links for dashboard sections */
.sidebar-dash-link {
    display: block;
    padding: 5px 12px 5px 28px;
    color: #b0b0b0;
    text-decoration: none;
    font-size: 0.82rem;
    border-left: 2px solid transparent;
    transition: background 0.1s, color 0.1s;
}
.sidebar-dash-link:hover {
    color: #d4d4d4;
    background: rgba(255, 255, 255, 0.07);
}
.sidebar-dash-link.active {
    color: #9cdcfe;
    border-left-color: #569cd6;
    background: rgba(255, 255, 255, 0.07);
}

/* Dashboard layout */
.dash-wrap {
    display: flex;
    flex: 1;
    background: #1e1e1e;
    color: #d4d4d4;
    font-family: sans-serif;
    overflow: hidden;
}

.dash-sidebar {
    width: 180px;
    min-width: 160px;
    background: #252526;
    border-right: 1px solid #3c3c3c;
    padding: 1rem 0;
    flex-shrink: 0;
}

.dash-sidebar h3 {
    color: #569cd6;
    font-size: 1rem;
    padding: 0 1rem 0.75rem;
    margin: 0;
    border-bottom: 1px solid #3c3c3c;
}

.dash-sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
}

.dash-sidebar li a {
    display: block;
    padding: 0.45rem 1rem;
    color: #c8c8c8;
    text-decoration: none;
    font-size: 0.875rem;
    border-left: 3px solid transparent;
}

.dash-sidebar li a:hover {
    color: #d4d4d4;
    background: #2a2d2e;
}

.dash-sidebar li a.active {
    color: #9cdcfe;
    border-left-color: #569cd6;
    background: #2a2d2e;
}

.dash-main {
    flex: 1;
    overflow: auto;
    padding: 1.25rem;
}

.dash-section,
[id^="section-"] {
    display: none;
}

.dash-section.active,
[id^="section-"].active {
    display: block;
}

.dash-section-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.dash-section-hdr h2 {
    color: #d4d4d4;
    font-size: 1.1rem;
    margin: 0;
}

.sidebar-section-container {
    border-bottom: 1px solid #444;
}

.sidebar-header-clickable {
    padding: 7px 12px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-padding-content {
    padding: 0 12px 8px 12px;
}

/* Compact h4 labels inside sidebar settings panels */
#chat-settings-section h4 {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
    margin: 6px 0 3px 0;
}

/* Tight radio/checkbox labels inside sidebar */
#chat-settings-section label {
    font-size: 12px;
    line-height: 1.6;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.sidebar-search-input {
    width: 100%;
    padding: 6px;
    margin-bottom: 10px;
    border: 1px solid #555;
    background: #1e1e1e;
    color: white;
    border-radius: 3px;
}

.bg-gray-e0 {
    background-color: #e0e0e0 !important;
}

.bg-dark-section {
    background-color: #252526;
}

.border-top-dark {
    border-top: 1px solid #3e3e3e;
}

.h-250 {
    height: 250px;
}

.text-inherit {
    color: inherit !important;
}

.error-item {
    padding: 8px;
    margin-bottom: 4px;
    background-color: white;
    border-left: 3px solid #dc3545;
    border-radius: 3px;
}

.error-msg {
    color: #721c24;
    font-weight: bold;
}

.timestamp {
    font-size: 11px;
    color: #666;
    margin-top: 4px;
}

.overflow-auto {
    overflow: auto !important;
}

.w-4 {
    width: 4px !important;
}

.w-300 {
    width: 300px !important;
}

.bg-gray-3c {
    background-color: #3c3c3c !important;
}

.cursor-col-resize {
    cursor: col-resize;
}

.border-left-1 {
    border-left: 1px solid #3c3c3c;
}

.h-500 {
    height: 500px;
}

.line-height-1-6 {
    line-height: 1.6;
}

.bg-dark-25 {
    background-color: #252526 !important;
}

.max-w-420 {
    max-width: 420px !important;
}

.max-w-90vw {
    max-width: 90vw !important;
}

.inset-0 {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.bg-rgba-0-0-0-0-6 {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

.resize-vertical {
    resize: vertical !important;
}

.vh-min-0 {
    min-height: 0 !important;
}

.pl-wrap {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
    flex: 1;
    overflow-y: auto;
}

.pl-heading {
    color: #d4d4d4;
    font-size: 1.3rem;
    margin: 0 0 1.25rem;
}

.pl-empty {
    color: #858585;
    font-size: 0.9rem;
    text-align: center;
    padding: 3rem 0;
}

.pl-card {
    background: #252526;
    border: 1px solid #3c3c3c;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.pl-card:hover {
    border-color: #569cd6;
}

.pl-card-title {
    font-size: 1.05rem;
    color: #9cdcfe;
    text-decoration: none;
    font-weight: 600;
}

.pl-card-title:hover {
    text-decoration: underline;
}

.pl-card-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.78rem;
    color: #858585;
    margin-top: 0.3rem;
    flex-wrap: wrap;
    align-items: center;
}

.pl-card-cat {
    background: #2d2d2d;
    color: #9cdcfe;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
}

.pl-card-excerpt {
    color: #a0a0a0;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.pl-newbtn {
    display: inline-block;
    padding: 0.4rem 1rem;
    background: #2a1a3e;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.875rem;
}

.pl-newbtn:hover {
    background: #3a2354;
    color: #fff;
}

.plans-wrap {
    padding: 1.5rem;
    flex: 1;
    overflow-y: auto;
}

.plans-title {
    color: #d4d4d4;
    font-size: 1.3rem;
    margin: 0 0 1.25rem;
}

.kanban {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 1rem;
}

.kanban-col {
    flex: 0 0 240px;
    background: #252526;
    border: 1px solid #3c3c3c;
    border-radius: 6px;
    overflow: hidden;
}

.kanban-col-header {
    padding: 0.6rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid #3c3c3c;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kanban-col-header .col-count {
    background: #3c3c3c;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 0.72rem;
    color: #858585;
}

.col-todo .kanban-col-header {
    color: #9cdcfe;
    border-top: 3px solid #569cd6;
}

.col-progress .kanban-col-header {
    color: #ce9178;
    border-top: 3px solid #ce9178;
}

.col-done .kanban-col-header {
    color: #6a9955;
    border-top: 3px solid #6a9955;
}

.col-cancelled .kanban-col-header {
    color: #858585;
    border-top: 3px solid #555;
}

.kanban-cards {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 60px;
}

.kcard {
    background: #2d2d2d;
    border: 1px solid #3c3c3c;
    border-radius: 4px;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    transition: border-color 0.15s;
}

.kcard:hover {
    border-color: #569cd6;
}

.kcard-name {
    color: #d4d4d4;
    font-size: 0.85rem;
    font-weight: 500;
}

.kcard-badges {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.35rem;
}

.badge {
    font-size: 0.68rem;
    padding: 1px 6px;
    border-radius: 3px;
}

.badge-kind {
    background: #2d4a3e;
    color: #6a9955;
}

.badge-priority-high {
    background: #5a1d1d;
    color: #f48771;
}

.badge-priority-medium {
    background: #3d3212;
    color: #d7ba7d;
}

.badge-priority-low {
    background: #1e3a4f;
    color: #9cdcfe;
}

.kcard-progress {
    margin-top: 0.4rem;
    height: 3px;
    background: #3c3c3c;
    border-radius: 2px;
    overflow: hidden;
}

.kcard-progress-bar {
    height: 100%;
    background: #569cd6;
    border-radius: 2px;
    transition: width 0.3s;
}

.kcard-detail {
    display: none;
    margin-top: 0.5rem;
    border-top: 1px solid #3c3c3c;
    padding-top: 0.5rem;
}

.kcard.expanded .kcard-detail {
    display: block;
}

.kcard-notes {
    color: #858585;
    font-size: 0.78rem;
    margin-bottom: 0.4rem;
    white-space: pre-wrap;
}

.kcard-status-sel {
    width: 100%;
    background: #1e1e1e;
    border: 1px solid #555;
    color: #d4d4d4;
    padding: 3px 6px;
    font-size: 0.78rem;
    border-radius: 3px;
}

.kcard-desc {
    color: #858585;
    font-size: 0.78rem;
    margin-bottom: 0.4rem;
    white-space: pre-wrap;
}

.plans-empty {
    color: #858585;
    font-size: 0.9rem;
    text-align: center;
    padding: 4rem 0;
}

.pv-topbar {
    display: flex;
    align-items: center;
    background: #252526;
    border-bottom: 1px solid #3c3c3c;
    padding: 0.4rem 1rem;
    gap: 1rem;
    font-size: 0.85rem;
}

.pv-topbar a {
    color: #9cdcfe;
    text-decoration: none;
}

.pv-wrap {
    max-width: 860px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.pv-meta {
    display: flex;
    gap: 1.5rem;
    font-size: 0.82rem;
    color: #858585;
    margin-bottom: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.pv-meta .pv-cat {
    background: #2d2d2d;
    color: #9cdcfe;
    padding: 0.2rem 0.6rem;
    border-radius: 3px;
    font-size: 0.75rem;
}

.pv-meta .pv-state {
    padding: 0.2rem 0.6rem;
    border-radius: 3px;
    font-size: 0.75rem;
}

.pv-state-draft {
    background: #3c3c00;
    color: #cccc00;
}

.pv-state-published {
    background: #003c00;
    color: #00cc00;
}

.pv-state-archived {
    background: #3c3c3c;
    color: #858585;
}

.pv-title {
    color: #d4d4d4;
    font-size: 1.8rem;
    margin: 0 0 0.5rem;
}

.pv-excerpt {
    color: #858585;
    font-size: 0.95rem;
    margin-bottom: 1rem;
    font-style: italic;
}

.pv-content {
    background: #1e1e1e;
    border-radius: 4px;
    padding: 1rem;
}

.pv-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #3c3c3c;
}

.pf-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem;
}

.pf-topbar {
    display: flex;
    align-items: center;
    background: #252526;
    border-bottom: 1px solid #3c3c3c;
    padding: 0.4rem 1rem;
    gap: 1rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.pf-topbar a {
    color: #9cdcfe;
    text-decoration: none;
}

.pf-heading {
    color: #d4d4d4;
    font-size: 1.1rem;
    margin: 0 0 1.25rem;
    border-bottom: 1px solid #3c3c3c;
    padding-bottom: 0.75rem;
}

.pf-row {
    margin-bottom: 1rem;
}

.pf-row label {
    display: block;
    color: #9cdcfe;
    font-size: 0.82rem;
    margin-bottom: 4px;
}

.pf-row input,
.pf-row select,
.pf-row textarea {
    width: 100%;
    box-sizing: border-box;
    background: #3c3c3c;
    border: 1px solid #555;
    color: #d4d4d4;
    padding: 0.45rem 0.75rem;
    border-radius: 4px;
    font-size: 0.9rem;
}

.pf-row input:focus,
.pf-row select:focus {
    outline: none;
    border-color: #569cd6;
}

.pf-row select option {
    background: #3c3c3c;
}

.pf-editor-label {
    color: #9cdcfe;
    font-size: 0.82rem;
    margin-bottom: 4px;
}

#editor-wrap {
    border: 1px solid #555;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.pf-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* Toast UI dark overrides */
.toastui-editor-defaultUI {
    background: #1e1e1e !important;
}

.toastui-editor-md-container {
    background: #1e1e1e !important;
    color: #d4d4d4 !important;
}

.view-wrap {
    max-width: 560px;
    margin: 3rem auto;
    background: #252526;
    border: 1px solid #3c3c3c;
    border-radius: 6px;
    padding: 2rem;
}

.view-wrap h1 {
    color: #d4d4d4;
    font-size: 1.2rem;
    margin: 0 0 1.5rem;
    border-bottom: 1px solid #3c3c3c;
    padding-bottom: 0.75rem;
}

.view-row {
    display: flex;
    padding: 0.6rem 0;
    border-bottom: 1px solid #2d2d2d;
    font-size: 0.9rem;
}

.view-row:last-of-type {
    border-bottom: none;
}

.view-label {
    width: 140px;
    min-width: 140px;
    color: #9cdcfe;
    font-size: 0.82rem;
}

.view-value {
    color: #d4d4d4;
}

.view-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.topbar {
    display: flex;
    align-items: center;
    background: #252526;
    border-bottom: 1px solid #3c3c3c;
    padding: 0.4rem 1rem;
    gap: 1rem;
    font-size: 0.85rem;
}

.topbar a {
    color: #9cdcfe;
    text-decoration: none;
}

/* Authentication Pages (Login/Register) */
.auth-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #1e1e1e;
}

.auth-card {
    background: #252526;
    border: 1px solid #3c3c3c;
    border-radius: 8px;
    padding: 2rem;
    width: 100%;
    max-width: 420px;
}

.auth-heading {
    color: #d4d4d4;
    margin: 0 0 1.5rem;
    font-size: 1.4rem;
}

.auth-heading small {
    display: block;
    font-size: 0.85rem;
    color: #858585;
    font-weight: normal;
    margin-top: 4px;
}

.auth-highlight {
    color: #569cd6;
}

.auth-error {
    background: #5a1a1a;
    border: 1px solid #8a2a2a;
    color: #f48771;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.auth-success {
    background: #1a3a1a;
    border: 1px solid #2a6a2a;
    color: #4ec9b0;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.auth-success a {
    color: #9cdcfe;
    text-decoration: underline;
}

.auth-hint {
    color: #858585;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.form-row-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.auth-links {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.85rem;
    color: #858585;
}

.auth-links a {
    color: #569cd6;
    text-decoration: none;
}

.auth-links a:hover {
    text-decoration: underline;
}

/* Actor Page Styles */
.actors-container {
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.actors-controls {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.actors-controls input[type="text"] {
    padding: 8px 12px;
    border: 1px solid #555;
    background: #2d2d2d;
    color: #d4d4d4;
    border-radius: 4px;
    font-size: 14px;
    flex: 1;
    min-width: 200px;
}

.actors-controls select {
    padding: 8px 12px;
    border: 1px solid #555;
    background: #2d2d2d;
    color: #d4d4d4;
    border-radius: 4px;
    font-size: 14px;
}

.actors-controls button {
    padding: 8px 16px;
    background: #2a1a3e;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.actors-controls button:hover {
    background: #3a2354;
}

#actors-table-container {
    background: #252526;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 10px;
}

.back-link {
    display: inline-block;
    margin-bottom: 20px;
    color: #4a9eff;
    text-decoration: none;
}

.back-link:hover {
    text-decoration: underline;
}

#actor-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

#actor-modal.open {
    display: flex;
}

.modal-box {
    background: #252526;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 28px 32px;
    min-width: 420px;
    max-width: 580px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.modal-box h2 {
    margin: 0 0 20px;
    color: #fff;
    font-size: 18px;
}

.modal-box label {
    display: block;
    font-size: 13px;
    color: #aaa;
    margin-bottom: 4px;
}

.modal-box input,
.modal-box select,
.modal-box textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    background: #1e1e1e;
    border: 1px solid #555;
    border-radius: 4px;
    color: #d4d4d4;
    font-size: 14px;
    margin-bottom: 14px;
}

.modal-box textarea {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    resize: vertical;
    min-height: 70px;
}

.modal-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #666;
    margin: 16px 0 8px;
    border-top: 1px solid #3a3a3a;
    padding-top: 12px;
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 6px;
}

.modal-actions button {
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

#save-actor-btn {
    background: #2a1a3e;
    color: #fff;
}

#save-actor-btn:hover {
    background: #3a2354;
}

#cancel-actor-btn {
    background: #3a3a3a;
    color: #d4d4d4;
}

#cancel-actor-btn:hover {
    background: #4a4a4a;
}

#actor-modal-error {
    color: #f48771;
    font-size: 13px;
    margin-bottom: 10px;
    display: none;
}

.btn-new-actor {
    background: #2d6a2d !important;
}

.btn-new-actor:hover {
    background: #3a7a3a !important;
}

.btn-vision-toggle {
    background: #0e639c !important;
}

.btn-vision-toggle:hover {
    background: #1177bb !important;
}

.btn-vision-toggle.active {
    background: #2a6a2a !important;
    box-shadow: 0 0 0 1.5px #4ec9b0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   USER FORM (FROM USER_FORM.WITZ)
   ───────────────────────────────────────────────────────────────────────────── */

/* Dark card wrapper used by user create/edit form */
.form-wrap {
    max-width: 520px;
    margin: 3rem auto;
    background: #252526;
    border: 1px solid #3c3c3c;
    border-radius: 6px;
    padding: 2rem;
}

.form-wrap h1 {
    color: #d4d4d4;
    font-size: 1.2rem;
    margin: 0 0 1.5rem;
    border-bottom: 1px solid #3c3c3c;
    padding-bottom: 0.75rem;
}

/* Small helper / hint text below an input */
.form-hint {
    font-size: 0.75rem;
    color: #858585;
    margin-top: 0.2rem;
}

/* Row of action buttons at the bottom of a form */
.form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}
/* ─────────────────────────────────────────────────────────────────────────────
   POST EDITOR FORM (SkylarkCMS va-cont / Foundation Grid layout)
   ───────────────────────────────────────────────────────────────────────────── */
.va-cont {
    display: block;
    width: 100%;
}

.va-inn {
    display: block;
    width: 100%;
    padding: 1rem;
}

.form-heading {
    color: #d4d4d4;
    margin-top: 0;
    margin-bottom: 1.2em;
    text-align: center;
    font-size: 1.1rem;
}

.form-row {
    position: relative;
    margin-top: 1.2rem;
}

.form-label {
    display: block;
    color: #9cdcfe;
    font-size: 0.82rem;
    margin-bottom: 0.3rem;
}

.form-textbox {
    width: 100%;
    box-sizing: border-box;
    padding: 0.45rem 0.6rem;
    background: #2d2d2d;
    border: 1px solid #555;
    border-radius: 3px;
    color: #d4d4d4;
    font-size: 0.9rem;
}

.form-textbox:focus {
    outline: none;
    border-color: #569cd6;
}

select.form-textbox option {
    background: #3c3c3c;
}

/* Mode toggle buttons bar */
#viewerBtn, #wysiwygBtn, #markdownBtn {
    margin: 0.5rem 0.25rem 0.5rem 0;
}

/* editor-container full width in Foundation grid */
#editor-container,
#viewer-container {
    width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────────
   DB ADMIN PANEL
   ───────────────────────────────────────────────────────────────────────────── */

.db-hdr-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* AI Table Access panel */
.ai-access-panel {
    background: #252526;
    border: 1px solid #3e3e3e;
    border-radius: 6px;
    margin-bottom: 1.2rem;
    overflow: hidden;
}
.ai-access-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    background: #2d2d2d;
    cursor: pointer;
    user-select: none;
}
.ai-access-hdr:hover { background: #333; }
.ai-access-title { font-weight: 600; font-size: 0.9rem; color: #d4d4d4; }
.ai-access-chevron { color: #888; font-size: 0.75rem; transition: transform 0.15s; }
.ai-access-panel.collapsed .ai-access-chevron { transform: rotate(-90deg); }
.ai-access-body { padding: 0.8rem 1rem; }
.ai-access-panel.collapsed .ai-access-body { display: none; }
.ai-access-hint { color: #888; font-size: 0.8rem; margin: 0 0 0.7rem; }

/* ── Schema Sanitizer panel ─────────────────────────────────── */
.schema-check-panel {
    background: #252526;
    border: 1px solid #3e3e3e;
    border-radius: 6px;
    margin-bottom: 1.2rem;
    overflow: hidden;
}
.schema-check-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    background: #2d2d2d;
    cursor: pointer;
    user-select: none;
}
.schema-check-hdr:hover { background: #333; }
.schema-check-title { font-weight: 600; font-size: 0.9rem; color: #d4d4d4; }
.schema-check-chevron { color: #888; font-size: 0.75rem; transition: transform 0.15s; }
.schema-check-panel.collapsed .schema-check-chevron { transform: rotate(-90deg); }
.schema-check-body { padding: 0.8rem 1rem; }
.schema-check-panel.collapsed .schema-check-body { display: none; }

.schema-stats-container {
    background: #1e1e1e;
    border: 1px solid #3e3e3e;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 15px;
}
.schema-stats-grid {
    display: flex;
    justify-content: space-around;
    gap: 10px;
}
.schema-stat-box {
    text-align: center;
    flex: 1;
}
.schema-stat-box .stat-title {
    color: #9cdcfe;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}
.schema-stat-box .stat-values {
    display: flex;
    justify-content: center;
    gap: 12px;
    font-size: 0.85rem;
    font-weight: 500;
}
.schema-stat-box .stat-good { color: #4ec9b0; }
.schema-stat-box .stat-ghost { color: #f44747; }

.schema-check-section-hdr {
    color: #f44747;
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0.8rem 0 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.schema-check-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid #333;
}
.schema-check-label {
    flex: 1;
    font-size: 0.85rem;
    font-family: monospace;
    color: #ce9178;
}
.schema-check-drop {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    flex-shrink: 0;
}
.ai-table-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.ai-table-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #2a2a2a;
    border: 1px solid #3e3e3e;
    border-radius: 4px;
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
}
.ai-table-name { color: #d4d4d4; }
.ai-table-badge {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-weight: 600;
}
.ai-table-badge.unlocked { background: #1a3a2a; color: #4ec9b0; }
.ai-table-badge.locked   { background: #3a1a1a; color: #888; }
.ai-table-toggle {
    background: none;
    border: 1px solid #555;
    color: #aaa;
    border-radius: 3px;
    padding: 0.1rem 0.4rem;
    font-size: 0.7rem;
    cursor: pointer;
}
.ai-table-toggle:hover { border-color: #888; color: #d4d4d4; }

.db-table-combo {
    position: relative;
    display: inline-block;
}
.db-table-input-wrap {
    position: relative;
    display: inline-block;
}
.db-table-search {
    background: #3c3c3c;
    color: #d4d4d4;
    border: 1px solid #555;
    padding: 0.4rem 1.6rem 0.4rem 0.6rem;
    border-radius: 4px;
    font-size: 0.875rem;
    width: 280px;
    outline: none;
    box-sizing: border-box;
    display: block;
}
.db-table-search:focus {
    border-color: #569cd6;
}
.db-table-clear {
    position: absolute;
    right: 2px;
    top: 0;
    width: 22px;
    height: 70%;
    background: none;
    border: none;
    color: #888;
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
    margin: 0;
    display: none;
    align-items: center;
    justify-content: center;
}
.db-table-clear:hover { color: #d4d4d4; }
.db-table-combo.has-value .db-table-clear { display: flex; }
.db-table-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 320px;
    overflow-y: auto;
    background: #2d2d2d;
    border: 1px solid #569cd6;
    border-radius: 0 0 4px 4px;
    z-index: 1000;
}
.db-table-item {
    padding: 0.4rem 0.7rem;
    font-size: 0.85rem;
    color: #d4d4d4;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-table-item:hover {
    background: #094771;
    color: #fff;
}

.db-btn-new { display: none; }
.db-btn-new.visible { display: inline-block; }

.db-row-count {
    color: #858585;
    font-size: 0.8rem;
    margin-bottom: 0.4rem;
    min-height: 1em;
}

.db-pagination {
    display: none;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}
.db-pagination.visible { display: flex; }

.db-page-info {
    color: #858585;
    font-size: 0.85rem;
}

/* Slide-in edit/create panel */
.db-edit-panel {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    height: 100vh;
    background: #252526;
    border-left: 1px solid #444;
    z-index: 1000;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.5);
}
.db-edit-panel.open { display: block; }

.db-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.db-panel-title {
    margin: 0;
    color: #d4d4d4;
    font-size: 1rem;
    font-weight: 600;
}

.db-panel-close {
    background: none;
    border: none;
    color: #858585;
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 3px;
}
.db-panel-close:hover { color: #d4d4d4; }

.db-edit-form label {
    display: block;
    margin-bottom: 10px;
    color: #9cdcfe;
    font-size: 0.82rem;
}

.db-edit-form input[type="text"],
.db-edit-form textarea,
.db-edit-form select {
    width: 100%;
    box-sizing: border-box;
    background: #1e1e1e;
    color: #d4d4d4;
    border: 1px solid #444;
    padding: 4px 6px;
    border-radius: 3px;
    font-size: 0.85rem;
    margin-top: 3px;
}
.db-edit-form textarea { resize: vertical; }
.db-edit-form input[type="text"]:focus,
.db-edit-form textarea:focus,
.db-edit-form select:focus {
    outline: none;
    border-color: #569cd6;
}
.db-edit-form select option { background: #2d2d2d; }

.db-panel-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.db-btn-delete { display: none; }
.db-btn-delete.visible { display: inline-block; }

.db-panel-msg {
    margin-top: 8px;
    font-size: 0.8rem;
    color: #858585;
    min-height: 1.2em;
}
.db-panel-msg.ok  { color: #4ec9b0; }
.db-panel-msg.err { color: #f44747; }

.db-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
}
.db-overlay.open { display: block; }

/* Small button for table action cells */
.btn-sm {
    padding: 3px 10px !important;
    font-size: 12px !important;
}

/* Tabulator dark-theme overrides scoped to db-table-grid */
#db-table-grid .tabulator {
    background: #1e1e1e;
    border: 1px solid #3c3c3c;
    border-radius: 4px;
}
#db-table-grid .tabulator-header {
    background: #2d2d2d;
    border-bottom: 1px solid #3c3c3c;
}
#db-table-grid .tabulator-col {
    background: #2d2d2d;
    border-right: 1px solid #3c3c3c;
}
#db-table-grid .tabulator-col-title {
    color: #9cdcfe;
    font-size: 0.82rem;
    font-weight: 600;
}
#db-table-grid .tabulator-col-sorter { color: #858585; }
#db-table-grid .tabulator-row {
    background: #1e1e1e;
    border-bottom: 1px solid #2a2a2a;
    color: #d4d4d4;
    font-size: 0.85rem;
}
#db-table-grid .tabulator-row.tabulator-row-even { background: #252526; }
#db-table-grid .tabulator-row:hover,
#db-table-grid .tabulator-row.tabulator-row-even:hover { background: #2a2d2e !important; }
#db-table-grid .tabulator-cell {
    border-right: 1px solid #2a2a2a;
    padding: 5px 8px;
    color: #d4d4d4;
}
#db-table-grid .tabulator-footer {
    background: #2d2d2d;
    border-top: 1px solid #3c3c3c;
    color: #d4d4d4;
}
#db-table-grid .tabulator-placeholder-contents { color: #666; }

/* ── Roles sub-tabs ──────────────────────────────────────────────────────────── */
.roles-subtabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #3c3c3c;
    margin-bottom: 16px;
}
.roles-subtab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 20px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    color: #858585;
    transition: color 0.15s, border-color 0.15s;
}
.roles-subtab:hover { color: #d4d4d4; }
.roles-subtab.active { color: #9cdcfe; border-bottom-color: #569cd6; }
.roles-subtab-label { font-size: 0.9rem; font-weight: 500; }
.roles-subtab-hint { font-size: 0.72rem; color: #666; margin-top: 2px; }
.roles-subtab.active .roles-subtab-hint { color: #888; }
.roles-pane-desc {
    margin: 4px 0 12px;
    color: #858585;
    font-size: 0.82rem;
    max-width: 600px;
    line-height: 1.5;
}

/* ── AI Providers — connection test result blocks ── */
.result-pre {
    background: #2d2d2d;
    color: #d4d4d4;
    padding: 12px;
    border-radius: 4px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 400px;
    overflow-y: auto;
}

.result-pre-sm {
    background: #252526;
    color: #858585;
    padding: 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 300px;
    overflow-y: auto;
}

details summary {
    cursor: pointer;
    color: #858585;
    font-size: 13px;
}


/* ── Chat mode segmented switch ─────────────────────────────────────────── */
.sidebar-inline-btn {
    background: none;
    border: none;
    color: #9cdcfe;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    white-space: nowrap;
}
.sidebar-inline-btn:hover {
    color: #c8e6f9;
    text-decoration: underline;
}
.sidebar-from-selected-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 400;
    color: #888;
    cursor: pointer;
    white-space: nowrap;
}
.sidebar-from-selected-label input[type="checkbox"] {
    cursor: pointer;
    margin: 0;
}
/* Unified prompt box: textarea + controls inside one bordered container */
.composer-input-group {
    display: flex;
    flex-direction: column;
    border: 1px solid #3e3e3e;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-input);
    margin-bottom: 10px;
}
.composer-text-row {
    display: flex;
    align-items: stretch;
}
.composer-text-row textarea {
    flex: 1;
    border: none !important;
    border-radius: 0 !important;
    margin: 0;
    background: transparent !important;
    height: auto;
}
.composer-controls-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-top: 1px solid #3e3e3e;
    background: var(--bg-input);
}
#newChatBtn {
    border-radius: 0;
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    padding: 0 14px;
    flex-shrink: 0;
    border: none;
    border-right: 1px solid #3e3e3e;
}

.chat-mode-switch {
    display: flex;
    border: 1px solid #569cd6;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}
.chat-mode-switch input[type="radio"] {
    display: none;
}
.chat-mode-switch label {
    padding: 5px 11px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: #9cdcfe;
    background: #1e1e1e;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    user-select: none;
    line-height: 26px;
}
.chat-mode-switch label:not(:last-child) {
    border-right: 1px solid #569cd6;
}
.chat-mode-switch input[type="radio"]:checked + label {
    background: #2a1a3e;
    color: #fff;
}
.chat-mode-switch label:hover {
    background: #2d2d2d;
}
.chat-mode-switch input[type="radio"]:checked + label:hover {
    background: #3a2354;
}

/* Search term highlight in chat messages */
mark.search-highlight {
    background: #b8860b;
    color: #fff;
    border-radius: 2px;
    padding: 0 2px;
    animation: search-blink 0.7s ease-in-out 6;
}
@keyframes search-blink {
    0%, 100% { background: #ffd700; color: #1a1a1a; }
    50%       { background: #ff8c00; color: #fff; }
}