@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

/* Add these new CSS variables to your existing :root and body.dark-theme */

:root {
    --bg-color: #f0f0f0;
    --bg-hover: #e9e9e9;
    --text-color: #333;
    --primary-text: #333;
    --text-light: #999;
    --prompt-bg: white;
    --prompt-placeholder: #bdbdbd;
    --prompt-submit: #e0e0e0;
    --button-bg: #0b6555;
    --button-color: white;
    --button-hover: #044337;
    --user-message-bg: #e1e1e1;
    --message-link: #12a58c;
    --message-bold: #ff5722;
    --system-message-color: #888;
    --disclaimer-color: #9f9f9f;
    --tool-message-bg: #e6e6e6;
    --sidebar-bg: #fff;
    --sidebar-text: #333;
    --sidebar-button: #f2f2f2;
    --sidebar-hover: #e5e5e5;
    --sidebar-border: #d0d0d0;
    --link-color: #12a58c;
    --logo-image: url('/static/images/picoco-dark.svg');

    /* Table-specific variables */
    --table-border: #ddd;
    --table-header-bg: #f5f5f5;
    --table-row-even: #f9f9f9;
    --table-code-color: #d63384;
    /* Button variables for table expand/minimize */
    --button-expand-bg: #f8f9fa;
    --button-expand-text: #666;
    --button-expand-hover: #e9ecef;
    --container-shadow: rgba(0, 0, 0, 0.08);

    /* Info bubble variables */
    --background-primary: white;
    --background-secondary: #f8f9fa;
    --background-hover: #e9ecef;
    --border-color: #dee2e6;
    --text-primary: #333;
    --text-secondary: #6c757d;

    --text-green: #43a047;
    --scroll-side: #e0e0e0;
    --scroll-main: #bdbdbd;
    --system-link: #11a58c;
}

body.dark-theme {
    --bg-color: #222;
    --bg-hover: #333;
    --text-color: #f0f0f0;
    --primary-text: #f0f0f0;
    --text-light: #666;
    --prompt-bg: #333;
    --prompt-placeholder: #616161;
    --prompt-submit: #424242;
    --button-bg: #0b6555;
    --button-color: white;
    --button-hover: #044337;
    --user-message-bg: #343434;
    --message-link: #6ed2ff;
    --message-bold: #ff9800;
    --system-message-color: #888;
    --disclaimer-color: #9f9f9f;
    --tool-message-bg: #161616;
    --sidebar-bg: #1c1c1c;
    --sidebar-text: #ffffff;
    --sidebar-button: #282828;
    --sidebar-hover: #333;
    --sidebar-border: #404040;
    --link-color: #6ed2ff;
    --logo-image: url('/static/images/picoco-light.svg');

    /* Dark theme table variables */
    --table-border: #404040;
    --table-header-bg: #2a2a2a;
    --table-row-even: #292929;
    --table-code-color: #ff6b9d;
    /* Dark theme button variables for table expand/minimize */
    --button-expand-bg: #2a2a2a;
    --button-expand-text: #ccc;
    --button-expand-hover: #333;
    --container-shadow: rgba(0, 0, 0, 0.2);

    /* Dark theme info bubble variables */
    --background-primary: #2a2a2a;
    --background-secondary: #333;
    --background-hover: #404040;
    --border-color: #404040;
    --text-primary: #f0f0f0;
    --text-secondary: #999;

    --text-green: #81c784;
    --scroll-side: #333;
    --scroll-main: #424242;
    --system-link: #11a58c;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

ul,
li {
    padding: 0;
    margin: 0;
}

body {
    display: flex;
    font-family: "Roboto", Arial, sans-serif;
    font-size: 16px;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

#sidebar {
    width: 310px;
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 2000;
    display: flex;
    flex-direction: column;
}

.sidebar-header {
    height: 140px;
    display: flex;
    padding: 15px 20px;
}

.sidebar-content .logo img {
    content: var(--logo-image);
    margin: 10px 0px 20px 0px;
    pointer-events: none;
}

.sidebar-content {
    flex-grow: 1;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-side) var(--sidebar-bg);
}

.sidebar-content h3 {
    padding: 0px;
    margin: 0px;
    margin-bottom: 10px;
    font-size: 0.8em;
    color: var(--text-light);
    font-weight: normal;
}

.sidebar-content ul {
    margin-bottom: 20px;
}

.sidebar-content .user-info {
    margin-bottom: 15px;
}

.sidebar-content .username {
    padding: 0px 10px 7px 10px;
}

/* Version Date Block Styles */
.version-date-block {
    margin-bottom: 20px;
}

.version-date-block #version-date-input {
    padding: 8px 30px 8px 10px;
    background-color: var(--sidebar-button);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--text-color);
    cursor: pointer;
    font-family: "Roboto", Arial, sans-serif;
    box-sizing: border-box;
    min-width: 120px;
}

.version-date-block #version-date-input:focus {
    outline: none;
    border-color: var(--button-bg);
}

.version-date-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: auto;
}

.version-date-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--text-color);
    opacity: 0.5;
    display: none;
}

.version-date-clear:hover {
    opacity: 1;
}

.version-date-block.has-date .version-date-clear {
    display: flex;
}

.sidebar-footer {
    padding: 10px 20px 45px 20px;
    display: flex;
}

.close-sidebar {
    color: var(--prompt-placeholder);
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    position: absolute;
    top: 26px;
    right: 20px;
    z-index: 1002;
}

.sidebar-list {
    list-style-type: none;
    padding: 0;
}

.sidebar-list li {
    font-size: 0.85em;
    padding: 7px 10px;
    cursor: pointer;
    border-radius: 2px;
}

.sidebar-list li:hover {
    background-color: var(--sidebar-button);
}

.sidebar-list li a {
    color: var(--text-color);
}

.sidebar-list li.selected {
    background-color: var(--sidebar-button);
}

#projects .project_green {
    color: var(--text-green);
}

#theme-switch {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--sidebar-button);
    color: var(--text-color);
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em
}


#mainbar {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    transition: margin-left 0.3s ease-in-out;
}

.header {
    height: 80px;
    display: flex;
    align-items: center;
    padding: 0 20px 0 80px;
    width: 100%;
    box-sizing: border-box;
    transition: padding 0.3s;
    position: relative;
}

.header .header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.header h1 {
    padding: 0;
    margin: 0;
    font-size: 1.4em;
    font-weight: normal;
}

.header .anotation {
    font-size: 0.6em;
}

.content-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    width: 100%;
    overflow-y: auto;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-main) var(--bg-color);
}

.prepared-wrapper {
    margin-top: 20px;
    margin-bottom: 40px;
    width: 100%;
}

.prepared-title {
    text-align: center;
    font-weight: bold;
    font-size: 1em;
    margin-bottom: 40px;
}

.prepared-title strong {
    display: block;
    font-weight: normal;
    font-size: 1.4em;
    margin-bottom: 7px;
}

/* Progress loading bar for title */
.prepared-title strong.loading {
    position: relative;
    color: transparent;
    /* Hide the text during loading */
    min-height: 1.4em;
    /* Maintain height while loading */
}

.prepared-title strong.loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 8px;
    background-color: white;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.prepared-title strong.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 6px;
    background: linear-gradient(90deg, #4caf50, #66bb6a);
    border-radius: 3px;
    left: calc(50% - 99px);
    /* Start from left edge of the frame */
    transform: translateY(-50%);
    /* Only center vertically */
    animation: progress-fill 1s ease-out forwards;
}

/* Dark theme support */
body.dark-theme .prepared-title strong.loading::before {
    background-color: var(--prompt-bg);
    border-color: var(--border-color, #404040);
}

@keyframes progress-fill {
    0% {
        width: 0;
    }

    100% {
        width: 198px;
        /* Full width minus 2px for borders */
    }
}

.prepared-prompts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 20px;
    width: 100%;
}

.prepared-title em {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
    font-weight: normal;
    font-size: 0.85em;
    font-style: normal;
    color: var(--system-message-color);
}

.info-label {
    color: var(--text-light);
    font-weight: normal;
    font-size: 0.9em;
}

.info-box {
    display: inline-block;
    background-color: var(--prompt-bg);
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--text-color);
    border: 1px solid var(--prompt-submit);
    transition: background-color 0.3s, color 0.3s;
}

.info-box.error {
    background-color: rgba(211, 47, 47, 0.1);
    color: #d32f2f;
    border-color: rgba(211, 47, 47, 0.2);
}

body.dark-theme .info-box.error {
    background-color: rgba(255, 82, 82, 0.15);
    color: #ff5252;
    border-color: rgba(255, 82, 82, 0.2);
}

.prompt-block {
    border: 1px solid var(--prompt-submit);
    color: var(--system-message-color);
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 0.85em;
    line-height: 1.4em;
}

.prompt-block svg {
    display: block;
    margin-bottom: 10px;
}

.prompt-block:hover {
    background-color: var(--bg-hover);
}

.message-content a {
    color: var(--message-link);
}

.user-message {
    text-align: right;
    padding: 10px 0px 10px 70px;
}

.user-message .message-content {
    font-size: 0.95em;
    line-height: 1.8em;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    background-color: var(--user-message-bg);
    max-width: 440px;
    text-align: left;
}

/* Copy button for user messages - shows on hover */
.user-message {
    position: relative;
    padding-bottom: 34px;
}

.copy-user-msg-btn {
    display: none;
    position: absolute;
    right: 0;
    bottom: 0;
    background: none;
    border: none;
    padding: 6px 10px;
    cursor: pointer;
    color: var(--system-message-color);
    opacity: 0.5;
}

.copy-user-msg-btn:hover {
    opacity: 1;
}

.copy-user-msg-btn svg {
    width: 16px;
    height: 16px;
}

.user-message:hover .copy-user-msg-btn {
    display: block;
}

.assistant-message {
    text-align: left;
    padding: 0px 0px 20px 0px;
    position: relative;
}

.assistant-message .message-content {
    font-size: 0.95em;
    line-height: 1.5em;
    display: inline-block;
    padding: 10px 0px 10px 40px;
    white-space: pre-line;
}

/* Direct child only: positions the eye icon that addMessageToChat
   appends to every assistant message bubble. Without `>` this also
   captured nested SVGs inside action-row buttons, which then floated
   to top-left as well. */
.assistant-message > svg {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 16px;
    color: var(--system-message-color);
}

/* Action row beneath an assistant message — copy + feedback widgets
   share this flex container so spacing stays uniform. */
.msg-actions {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-left: 40px;
    flex-wrap: wrap;
}

.msg-action-btn {
    background: none;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    color: var(--system-message-color);
    opacity: 0.5;
    border-radius: 4px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.msg-action-btn:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.04);
}

body.dark-theme .msg-action-btn:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

.msg-action-btn svg {
    width: 16px;
    height: 16px;
}

/* Copy button — preserves the .copied success state used by chat.js */
.copy-answer-btn.copied {
    color: var(--success-color, #22c55e);
    opacity: 1;
}

/* Active rating: filled background + accent colour. Up = green,
   down = red. Stays full-opacity even without hover. */
.msg-action-btn.fb-thumb.active.fb-up {
    color: var(--success-color, #22c55e);
    background-color: rgba(34, 197, 94, 0.12);
    opacity: 1;
}
.msg-action-btn.fb-thumb.active.fb-down {
    color: var(--danger-color, #ef4444);
    background-color: rgba(239, 68, 68, 0.12);
    opacity: 1;
}

/* When the comment box is open OR a comment is saved, the toggle stays
   full-opacity so the user knows feedback is attached. */
.msg-action-btn.fb-comment-toggle.active {
    opacity: 1;
    color: var(--accent-color, #0d6efd);
}

/* Comment box is a block sibling of the action row, not a flex item —
   so it takes the full message width naturally. Indented 40px to
   align with .message-content's left padding. */
.fb-comment-box {
    margin-left: 40px;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fb-comment-input {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 5px;
    padding: 6px 8px;
    border: 1px solid var(--table-border, #d0d7de);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.9em;
    line-height: 1.4;
    resize: vertical;
    background-color: var(--prompt-bg, #fff);
    color: var(--text-color, #1f2328);
}

.fb-comment-input:focus {
    outline: none;
    border-color: var(--accent-color, #0d6efd);
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
}

.fb-comment-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.fb-comment-actions button {
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid var(--table-border, #d0d7de);
    background: var(--prompt-bg, #fff);
    color: var(--text-color, #1f2328);
    cursor: pointer;
    font-size: 0.85em;
}

.fb-comment-actions button:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

/* Remove sits on the left, separated from Close/Send; muted styling. */
.fb-comment-actions .fb-comment-remove {
    margin-right: auto;
    color: var(--disclaimer-color, #6b7280);
    border-color: transparent;
    background: transparent;
}

.fb-comment-actions .fb-comment-send {
    background-color: var(--accent-color, #0d6efd);
    color: #fff;
    border-color: var(--accent-color, #0d6efd);
}

.fb-comment-actions .fb-comment-send:hover:not(:disabled) {
    filter: brightness(0.95);
    background-color: var(--accent-color, #0d6efd);
}

.fb-comment-actions .fb-comment-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: none;
}

/* Floating selection copy button */
.floating-copy-btn {
    position: absolute;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 10px;
    height: 28px;
    background: var(--prompt-bg, #fff);
    border: 1px solid var(--table-border, #e0e0e0);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    color: var(--text-color, #333);
    font-size: 12px;
    font-family: inherit;
    z-index: 10000;
    white-space: nowrap;
}

.floating-copy-btn:hover {
    background: var(--button-expand-hover, #f0f0f0);
}

.floating-copy-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.assistant-message .message-content strong {
    color: #0B6555;
    font-weight: normal;
}

body.dark-theme .assistant-message .message-content strong {
    color: #ffe9a3;
}

/* Version date notice for retrospective queries */
.version-notice {
    display: block;
    padding: 8px 0px 8px 40px;
    font-size: 0.9em;
    line-height: 1.5em;
    color: var(--system-message-color);
    font-style: italic;
    opacity: 0.85;
}

/* CSS-only conditional table expansion - HEIGHT-BASED */
.assistant-message .reference-table-wrapper {
    position: relative;
    border-radius: 6px;
    margin: 15px 0 25px 0;
    border: 1px solid var(--table-border);
    box-shadow: 0 2px 8px var(--container-shadow);
    background-color: var(--prompt-bg);
    overflow: hidden;
}

.assistant-message .reference-table-wrapper:empty {
    height: 40px;
    background-color: var(--table-row-even);
}

/* Container that measures the table height */
.assistant-message .table-height-detector {
    position: relative;
    max-height: 110px;
    /* Constraint height - shows about 3-4 rows */
    overflow: hidden;
}

/* Invisible checkbox for expand/collapse state */
.assistant-message .table-toggle {
    display: none;
}

/* The actual table */
.assistant-message .reference-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 14px;
    background-color: var(--prompt-bg);
    color: var(--text-color);
    border: none;
}

.assistant-message .reference-table th {
    background-color: var(--table-header-bg);
    padding: 12px 8px;
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid var(--table-border);
    color: var(--text-color);
}

.assistant-message .reference-table td {
    padding: 10px 8px;
    vertical-align: top;
    border-bottom: 1px solid var(--table-border);
    line-height: 1.4;
}

.assistant-message .reference-table tr:nth-child(even) {
    background-color: var(--table-row-even);
}

.assistant-message .reference-table tr:last-child td {
    border-bottom: none;
}

.assistant-message .reference-table td:first-child {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.9em;
}

.assistant-message .reference-table td:first-child strong {
    color: var(--table-code-color);
    font-weight: 600;
}

.assistant-message .reference-table td:first-child .issuer-tag {
    color: #d32f2f;
    font-weight: 400;
}

body.dark-theme .assistant-message .reference-table td:first-child .issuer-tag {
    color: #ff5252;
}

/* Expand button - controlled by JavaScript based on actual height */
.assistant-message .table-expand-button {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--button-expand-bg);
    color: var(--button-expand-text);
    border: none;
    border-top: 1px solid var(--table-border);
    border-radius: 0 0 6px 6px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    user-select: none;
    display: none;
    /* Hidden by default, shown by JavaScript */
}

.assistant-message .table-expand-button:hover {
    background-color: var(--button-expand-hover);
}

.assistant-message .table-expand-button::after {
    content: "Click to expand";
}

/* Expanded state */
.assistant-message .table-toggle:checked~.table-height-detector {
    max-height: none !important;
    overflow: visible;
}

.assistant-message .table-toggle:checked~.table-expand-button::after {
    content: "Click to minimize";
}

.assistant-message .table-toggle:checked~.table-expand-button {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    background-color: var(--button-expand-bg);
}

.assistant-message .table-toggle:checked~.table-expand-button:hover {
    background-color: var(--button-expand-hover);
}

/* When expanded, also remove overflow constraint from the wrapper */
.assistant-message .reference-table-wrapper:has(.table-toggle:checked) {
    overflow: visible;
}

/* Fallback for browsers without :has() support */
.assistant-message .reference-table-wrapper.expanded {
    overflow: visible;
}

.assistant-message .reference-table-wrapper.expanded .table-height-detector {
    max-height: none !important;
    overflow: visible;
}

/* Classes added by JavaScript based on actual height measurement */
.assistant-message .reference-table-wrapper.needs-expansion .table-expand-button {
    display: block;
}

.assistant-message .reference-table-wrapper.needs-expansion .table-height-detector {
    max-height: 110px;
    /* Ensure constraint is applied */
}

.assistant-message .reference-table-wrapper:not(.needs-expansion) .table-height-detector {
    max-height: none;
}

/* Text reference styles - matching table structure exactly */
.assistant-message .reference-text-wrapper {
    position: relative;
    border-radius: 6px;
    margin: 15px 0 25px 0;
    border: 1px solid var(--table-border);
    box-shadow: 0 2px 8px var(--container-shadow);
    background-color: var(--prompt-bg);
    overflow: hidden;
}

.assistant-message .reference-text-wrapper:empty {
    height: 40px;
    background-color: var(--table-row-even);
}

/* Container that measures the text height - higher constraint than tables */
.assistant-message .text-height-detector {
    position: relative;
    max-height: 200px;
    /* Higher constraint for text content */
    overflow: hidden;
}

/* Invisible checkbox for expand/collapse state */
.assistant-message .text-toggle {
    display: none;
}

/* The actual text content */
.assistant-message .reference-text {
    width: 100%;
    margin: 0;
    font-size: 0.85em;
    font-family: monospace;
    line-height: 1.8em;
    background-color: var(--prompt-bg);
    color: var(--text-color);
    border: none;
    border-collapse: collapse;
    /* Even though it's not a table, this helps with spacing */
}

.assistant-message .reference-text p {
    margin: 0
}

.assistant-message .reference-text a {
    display: block;
    margin-bottom: 8px;
}

.assistant-message .reference-text .date,
.assistant-message .reference-text .authors {
    display: inline-block;
    border: 1px solid var(--table-border);
    padding: 0px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    margin-right: 8px;
    margin-bottom: 4px;
}

.assistant-message .text-item {
    padding: 20px;
    vertical-align: top;
    border-bottom: 1px solid var(--table-border);
}

.assistant-message .text-item:nth-child(even) {
    background-color: var(--table-row-even);
}

.assistant-message .text-item:last-child {
    border-bottom: none;
}

/* Select article button */
.assistant-message .select-article-btn {
    float: right;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--prompt-submit);
    color: var(--prompt-bg);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
    margin-left: 8px;
}

.assistant-message .select-article-btn:hover {
    opacity: 1;
}

.assistant-message .select-article-btn svg {
    position: relative;
    color: white;
}

/* Expand button - hidden by default, only shown when needed */
.assistant-message .text-expand-button {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--button-expand-bg);
    color: var(--button-expand-text);
    border: none;
    border-top: 1px solid var(--table-border);
    border-radius: 0 0 6px 6px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    user-select: none;
    display: none;
}

.assistant-message .text-expand-button:hover {
    background-color: var(--button-expand-hover);
}

.assistant-message .text-expand-button::after {
    content: "Click to expand";
}

/* Expanded state - EXACTLY matching table implementation */
.assistant-message .text-toggle:checked~.text-height-detector {
    max-height: none !important;
    overflow: visible;
}

.assistant-message .text-toggle:checked~.text-expand-button::after {
    content: "Click to minimize";
}

.assistant-message .text-toggle:checked~.text-expand-button {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    background-color: var(--button-expand-bg);
}

.assistant-message .text-toggle:checked~.text-expand-button:hover {
    background-color: var(--button-expand-hover);
}

/* When expanded, remove overflow constraint from the wrapper */
.assistant-message .reference-text-wrapper:has(.text-toggle:checked) {
    overflow: visible;
}

/* Fallback for browsers without :has() support */
.assistant-message .reference-text-wrapper.expanded {
    overflow: visible;
}

.assistant-message .reference-text-wrapper.expanded .text-height-detector {
    max-height: none !important;
    overflow: visible;
}

/* JavaScript-controlled classes - updated constraint for text */
.assistant-message .reference-text-wrapper.needs-expansion .text-expand-button {
    display: block;
}

.assistant-message .reference-text-wrapper.needs-expansion .text-height-detector {
    max-height: 200px;
    /* Ensure constraint is applied - higher for text */
}

.assistant-message .reference-text-wrapper:not(.needs-expansion) .text-height-detector {
    max-height: none;
}

.system-message {
    text-align: center;
    color: var(--system-message-color);
    font-size: 0.8em;
    padding-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.system-message .message-content {
    display: flex;
    align-items: center;
}

.system-message .message-content svg {
    width: 14px;
    height: 14px;
    margin-right: 8px;
    flex-shrink: 0;
    color: var(--prompt-submit);
}

#scroll-to-bottom {
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--prompt-submit);
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 1em;
    cursor: pointer;
    z-index: 1003;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    display: none;
}

#scroll-to-bottom svg {
    margin-top: 3px;
}

#content {
    max-width: 640px;
    width: 100%;
    padding: 0px 20px;
    box-sizing: border-box;
}

.footer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-content {
    max-width: 680px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 15px 25px 15px;
    box-sizing: border-box;
    position: relative;
}

#prompt-form {
    background-color: var(--prompt-bg);
    margin-top: auto;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 10px 15px;
    width: 100%;
    max-width: 650px;
    box-sizing: border-box;
}

#prompt-input {
    background-color: transparent;
    color: var(--text-color);
    border: none;
    flex-grow: 1;
    font-size: 16px;
    outline: none;
}

#prompt-input::placeholder {
    color: var(--prompt-placeholder);
}

.submit-button {
    background-color: var(--prompt-submit);
    color: var(--prompt-bg);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1em;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, color 0.3s;
}

.submit-button.active {
    background-color: var(--text-color);
}

.disclaimer {
    color: var(--disclaimer-color);
    font-size: 0.8em;
    text-align: center;
    margin-top: 7px;
}

#sidebar-toggle {
    display: none;
}

.sidebar-toggle-label {
    position: fixed;
    top: 16px;
    left: 15px;
    z-index: 1000;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--prompt-bg);
    color: var(--text-color);
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em
}

#sidebar-toggle:checked~#sidebar {
    transform: translateX(0);
}

/* Desktop styles */
@media screen and (min-width: 768px) {
    #sidebar-toggle:checked~#mainbar .header {
        padding: 0 20px 0 20px;
        /* Keep same padding as default */
        transition: padding 0.3s;
    }

    #sidebar-toggle:checked~#mainbar {
        margin-left: 310px;
    }
}

/* Mobile styles */
@media screen and (max-width: 767px) {

    .header .header-wrapper {
        margin: 0 auto;
    }

    #sidebar {
        width: 100%;
        max-width: 310px;
    }

    .prepared-title em {
        gap: 8px;
    }

    .info-box {
        font-size: 0.85em;
        padding: 2px 8px;
    }

}

@media screen and (max-width: 620px) {
    .prepared-prompts {
        max-width: 400px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 419px) {
    .prepared-prompts {
        max-width: 100%;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#thinking-indicator.hidden {
    display: none;
}

@keyframes thinking {
    0% {
        content: '.';
    }

    25% {
        content: '.';
    }

    50% {
        content: '..';
    }

    75% {
        content: '...';
    }

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

.thinking-dots::after {
    content: '...';
    display: inline-block;
    animation: thinking 1.5s infinite;
    width: 1em;
    text-align: left;
}

/* Thinking steps (vmithink handler) */
.pre-thinking-ack {
    margin-bottom: 4px;
}

.thinking-steps-container {
    margin: 30px 0;
    border-left: 2px solid #555;
    padding: 4px 0 4px 12px;
    font-size: 0.85em;
    color: #999;
}

.thinking-steps-container summary {
    cursor: pointer;
    user-select: none;
    font-size: 0.85em;
    color: #888;
    padding: 2px 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.thinking-steps-container summary::-webkit-details-marker {
    display: none;
}

.thinking-steps-container summary:hover {
    color: #bbb;
}

.thinking-summary-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.thinking-summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.thinking-summary-icon svg {
    width: 14px;
    height: 14px;
    position: static;
}

.thinking-summary-icon:not(.done):not(.thinking-arrow) svg {
    animation: thinking-spin 0.8s linear infinite;
    color: #999;
}

.thinking-summary-icon.done svg {
    color: #999;
}

.thinking-summary-icon.thinking-arrow {
    transition: transform .15s;
}

.thinking-steps-container[open] .thinking-arrow {
    transform: rotate(90deg);
}

.thinking-steps-list {
    padding: 4px 0;
    font-size: 0.95em;
    color: #999;
    line-height: 1.4;
}

.thinking-step {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    color: #999;
    font-size: 0.95em;
}

.thinking-step .step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    position: relative;
}

.thinking-step .step-icon svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    position: absolute;
    top: 0;
    left: 0;
}

/* Spinner for in-progress step (lucide loader-circle) */
.thinking-step:not(.completed) .step-icon svg {
    animation: thinking-spin 0.8s linear infinite;
    color: #999;
}

.thinking-step.completed .step-icon svg {
    color: #8bc34a;
}

.thinking-step .step-text {
    line-height: 1.4;
}

.thinking-summary-details {
    display: none;
}

@keyframes thinking-spin {
    to { transform: rotate(360deg); }
}

.highlight {
    font-weight: normal;
    color: #8bc34a
}

.picoco-sources {
    padding: 10px 0px 10px 40px;
}

.picoco-sources h4 {
    margin: 0;
    padding: 0;
    font-weight: normal;
    color: #999;
}

.picoco-sources ul {
    padding-left: 15px;
}

.picoco-sources ul li {
    padding: 10px 5px 0px 5px;
}

.picoco-sources ul li::marker {
    color: #999
}

.picoco-sources a {
    display: inline-block;
    vertical-align: top;
    text-decoration: none;
    color: var(--message-link);
}

.picoco-sources a:hover {
    text-decoration: underline
}

.picoco-sources-header {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    padding: 8px 0;
}

.picoco-sources-header h4 {
    margin: 0;
    margin-right: 8px;
    /* Space between title and icon */
}

.sources-toggle-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--prompt-submit);
    color: var(--prompt-bg);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    transition: background-color 0.3s;
}

.sources-toggle-icon svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    /* Initial rotation: point right */
    fill: currentColor;
    transition: transform 0.3s ease;
}

.sources-toggle-icon.expanded {
    background-color: var(--prompt-bg);
}

.sources-toggle-icon.expanded svg {
    transform: translate(-50%, -50%) rotate(90deg);
    /* Expanded rotation: point down */
}

.picoco-sources-content {
    padding-left: 8px;
    margin-top: 8px;
}

.picoco-sources-content ul {
    margin-top: 8px;
}

.picoco-sources .source-no-link {
    color: var(--text-color);
    opacity: 0.8;
    font-size: 0.95em;
}

.footnote-ref {
    font-size: 0.7em;
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
    line-height: 0;
    color: #298f7a;
    cursor: default;
    margin: 0 1px;
}

body.dark-theme .footnote-ref {
    color: #ffe9a3;
}

.source-num-ref {
    font-size: 0.75em;
    opacity: 0.7;
}

/* Basic modal styling */
.in_tool_modal {
    position: relative;
    padding-bottom: 40px;
}

.in_tool_modal.hidden {
    display: none;
}

.intool-exit {
    text-align: left;
    padding-bottom: 20px;
}

.intool-exit-message {
    display: inline-block;
    padding: 7px 20px;
    background-color: #56b273;
    border-left: 5px solid #56b273;
    color: var(--prompt-bg);
    font-size: 0.8em;
    border-radius: 0 4px 4px 0;
}

.message.intool {
    border-left: 5px solid #56b273;
}

.modal-content {
    background-color: var(--tool-message-bg);
    color: var(--disclaimer-color);
    border-left: 5px solid #56b273;
    padding: 17px 25px;
    max-width: 300px;
    width: auto;
    pointer-events: auto;
    position: relative;
    font-size: 0.8em;
    line-height: 1.4em;
    border-radius: 0 4px 4px 0;
}

.close-modal {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: red;
    cursor: pointer;
}

.logout-option {
    font-size: 0.85em;
    padding: 7px 10px;
    cursor: pointer;
    border-radius: 2px;
}

.logout-option:hover {
    background-color: var(--sidebar-button);
}

/* -----------------------------------------------------
   CHAT HISTORY STYLES
   ----------------------------------------------------- */

/* Clickable menu link in sidebar */
.clickable-menu-link {
    cursor: pointer;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.clickable-menu-link:hover {
    opacity: 0.7;
}

/* Recent chats in sidebar */
.recent-chats-section {
    margin: 0 0 20px 0;
}

.recent-chats-section h4 {
    font-size: 0.75em;
    font-weight: 500;
    color: var(--disclaimer-color);
    margin: 10px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.recent-chats-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.recent-chat-item {
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color 0.2s;
}

.recent-chat-item:hover {
    background-color: var(--sidebar-button);
}

.recent-chats-loading,
.no-recent-chats,
.recent-chat-error {
    padding: 10px;
    font-size: 0.8em;
    color: var(--disclaimer-color);
}

.show-all-chats-link {
    padding: 8px 10px;
    text-align: left;
    font-size: 0.85em;
    color: var(--link-color);
    cursor: pointer;
    margin-top: 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.show-all-chats-link:hover {
    background-color: var(--sidebar-hover);
}

/* "Chats" header + Recent/Pinned pills */
.chats-header-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.chats-header-row .clickable-menu-link {
    margin: 0;
}

.sidebar-pills {
    display: flex;
    gap: 6px;
}

.sidebar-pill {
    padding: 3px 10px;
    border: 1px solid var(--sidebar-border);
    border-radius: 6px;
    background: transparent;
    color: var(--disclaimer-color);
    font-size: 0.78em;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.sidebar-pill.active {
    color: #fff;
    border-color: #fff;
}

/* Chats Wrapper */
#chats-wrapper {
    display: none;
}

.back-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    background-color: var(--sidebar-button);
    border: 1px solid var(--sidebar-border);
    border-radius: 4px;
    color: var(--primary-text);
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s;
    flex-shrink: 0;
}

.back-button:hover {
    background-color: var(--sidebar-hover);
}

/* Chats-page tabs: History / Pinned */
.chats-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 32px;
    background-color: var(--bg-color);
}

/* Bulk-action controls pushed to the right of the tab row */
.chats-tabs-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.chats-tab {
    padding: 12px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--disclaimer-color);
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.chats-tab:hover {
    color: var(--primary-text);
}

.chats-tab.active {
    color: var(--primary-text);
    border-bottom-color: var(--prompt-submit);
}

.chats-page-toolbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 32px 16px 32px;
    background-color: var(--bg-color);
}

.chats-page-toolbar .chat-search-wrapper {
    width: 100%;
    margin-bottom: 0;
}

.chats-page-toolbar .toolbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.chats-page-toolbar .new-chat-btn {
    flex-shrink: 0;
    width: auto;
    margin-bottom: 0;
    padding: 8px 12px;
}

.select-all-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    user-select: none;
}

.select-all-wrapper label {
    font-size: 0.9em;
    color: var(--primary-text);
    cursor: pointer;
}

.select-all-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--prompt-submit);
}

.delete-selected-btn {
    padding: 8px 12px;
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 0.9em;
    transition: background-color 0.2s;
}

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

#chats-wrapper .chat-count {
    padding: 16px 32px;
    margin: 0;
    background-color: var(--bg-color);
    font-size: 0.9em;
    color: var(--disclaimer-color);
}

/* No inner scroll frame: the list flows into the page so the whole
   #chats-wrapper (title, tabs, search, count, list) scrolls together
   inside .content-wrapper — exactly like the assistant's messages.
   Explicitly cancel the generic .chat-list-wrapper max-height/overflow
   (300px scroll box) which would otherwise still apply here. */
#chats-wrapper .chat-list-wrapper {
    max-height: none;
    overflow-y: visible;
    padding: 0 32px 16px 32px;
}

#chats-wrapper .show-more-btn {
    margin: 16px 32px 24px 32px;
}

.new-chat-btn {
    width: 100%;
    padding: 10px 15px;
    margin-bottom: 12px;
    background-color: var(--sidebar-button);
    color: var(--primary-text);
    border: 1px solid var(--sidebar-border);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    transition: background-color 0.2s;
}

.new-chat-btn:hover {
    background-color: var(--sidebar-hover);
}

.chat-search-wrapper {
    margin-bottom: 12px;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Lucide replaces the <i data-lucide> with an <svg>, so target both:
   the <i> pre-render and the <svg> after createIcons() runs. Without the
   svg selector the icon loses its absolute positioning and renders inline
   beside the input instead of inside it. */
.search-input-wrapper i[data-lucide],
.search-input-wrapper svg {
    position: absolute;
    left: 12px;
    color: var(--disclaimer-color);
    pointer-events: none;
    z-index: 1;
}

#chat-search-input {
    width: 100%;
    padding: 10px 12px 10px 40px;
    background-color: var(--prompt-bg);
    color: var(--primary-text);
    border: 1px solid var(--sidebar-border);
    border-radius: 6px;
    font-size: 0.95em;
    font-family: "Roboto", Arial, sans-serif;
    transition: border-color 0.2s;
}

#chat-search-input:focus {
    outline: none;
    border-color: var(--link-color);
}

.chat-count {
    font-size: 0.8em;
    color: var(--disclaimer-color);
    margin-bottom: 10px;
    padding: 0 5px;
}

.chat-list-wrapper {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 10px;
}

.chat-list-loading,
.no-chats,
.chat-error {
    text-align: center;
    padding: 20px;
    font-size: 0.85em;
    color: var(--disclaimer-color);
}

.chat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    margin-bottom: 4px;
    background-color: var(--sidebar-button);
    border: 1px solid transparent;
    border-radius: 4px;
    transition: background-color 0.2s, border-color 0.2s;
    position: relative;
}

.chat-item:hover {
    background-color: var(--sidebar-hover);
    border-color: var(--sidebar-border);
}

.chat-item.selected {
    border-color: var(--link-color);
}

.chat-checkbox {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}

.chat-item:hover .chat-checkbox {
    opacity: 1;
}

.chat-checkbox:checked {
    opacity: 1;
}

.chat-title {
    flex: 1;
    font-size: 0.85em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    padding: 4px;
    margin: -4px;
    border-radius: 2px;
}

.chat-menu-btn {
    flex-shrink: 0;
    padding: 4px 6px;
    background: transparent;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, background-color 0.2s;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.chat-item:hover .chat-menu-btn,
.chat-menu-btn.active {
    opacity: 1;
}

.chat-menu-btn:hover {
    background-color: var(--prompt-submit);
    color: var(--text-color);
}

.chat-context-menu {
    position: fixed;
    background-color: var(--prompt-bg);
    border: 1px solid var(--sidebar-border);
    border-radius: 4px;
    padding: 4px 0;
    min-width: 150px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10000;
}

.chat-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: 0.85em;
    cursor: pointer;
    transition: background-color 0.2s;
}

.chat-menu-item:hover {
    background-color: var(--sidebar-button);
}

.chat-menu-item.danger {
    color: #ff6b6b;
}

.chat-menu-item.danger:hover {
    background-color: rgba(255, 107, 107, 0.1);
}

.show-more-btn {
    width: 100%;
    padding: 8px;
    background-color: transparent;
    color: var(--link-color);
    border: 1px solid var(--sidebar-border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85em;
    transition: background-color 0.2s;
}

.show-more-btn:hover {
    background-color: var(--sidebar-button);
}

/* Dark theme adjustments */
body.dark-theme .chat-context-menu {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

/* Modal Dialog for confirmations and alerts */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    opacity: 0;
    transition: opacity 0.2s;
}

.modal-overlay.show {
    opacity: 1;
}

.modal-dialog {
    background-color: var(--prompt-bg);
    border-radius: 8px;
    padding: 24px;
    min-width: 320px;
    max-width: 500px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.2s;
}

.modal-overlay.show .modal-dialog {
    transform: scale(1);
}

.modal-header {
    margin-bottom: 16px;
}

.modal-title {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

.modal-body {
    margin-bottom: 24px;
    color: var(--text-color);
    line-height: 1.5;
    font-size: 0.95em;
}

.modal-input {
    width: 100%;
    /* Include padding + border in the width so the field fits inside the
       modal body instead of overflowing past its right edge. */
    box-sizing: border-box;
    padding: 10px 12px;
    background-color: var(--sidebar-button);
    color: var(--text-color);
    border: 1px solid var(--sidebar-border);
    border-radius: 4px;
    font-size: 0.95em;
    font-family: "Roboto", Arial, sans-serif;
    margin-top: 12px;
}

.modal-input:focus {
    outline: none;
    border-color: var(--link-color);
}

.modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.modal-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.2s;
    font-family: "Roboto", Arial, sans-serif;
}

.modal-btn-primary {
    background-color: var(--button-bg);
    color: white;
}

.modal-btn-primary:hover {
    background-color: var(--button-hover);
}

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

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

.modal-btn-secondary {
    background-color: var(--sidebar-button);
    color: var(--text-color);
}

.modal-btn-secondary:hover {
    background-color: var(--sidebar-hover);
}

body.dark-theme .modal-dialog {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* === Right side panel (generic, config-driven per handler) ===
   Styling ported verbatim from picoco-class. Uses the checkbox toggle pattern:
   #right-sidebar-toggle is a hidden checkbox; #right-sidebar-toggle-label is the
   floating button that opens it; #right-sidebar slides in via translateX. */
#right-sidebar-toggle {
    display: none;
}
#right-sidebar-toggle-label {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--sidebar-button);
    color: var(--sidebar-text);
    border: 1px solid var(--sidebar-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1999;
    transition: background-color 0.15s;
}
#right-sidebar-toggle-label:hover {
    background-color: var(--sidebar-hover);
}
#right-sidebar-toggle-label.hidden {
    display: none;
}
body.dark-theme #right-sidebar-toggle-label {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

#right-sidebar {
    width: 620px;
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    border-left: none;
}
#right-sidebar-toggle:checked ~ #right-sidebar {
    transform: translateX(0);
}
@media screen and (max-width: 1023px) {
    #right-sidebar {
        width: 100%;
        max-width: 620px;
    }
}
@media screen and (min-width: 1024px) {
    #right-sidebar-toggle:checked ~ #mainbar {
        margin-right: 620px;
    }
}

#right-sidebar .close-sidebar {
    position: absolute;
    top: 26px;
    right: 20px;
    left: auto;
    color: var(--prompt-placeholder);
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    z-index: 1002;
}

#right-sidebar-header {
    padding: 16px 10px;
    font-weight: 600;
    font-size: 14px;
    border-bottom: none;
    color: var(--sidebar-text);
    flex-shrink: 0;
}
#right-sidebar-header .tabs {
    display: flex;
    gap: 0;
}
#right-sidebar-header .tabs .tab {
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    color: var(--sidebar-text);
    opacity: 0.6;
    transition: opacity 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: inherit;
}
#right-sidebar-header .tabs .tab.active {
    opacity: 1;
    border-bottom-color: var(--button-bg);
}
#right-sidebar-header .tabs .tab:hover {
    opacity: 0.85;
}

/* Secondary row of subtabs (e.g. TARIC → Measures / Footnotes / Regulations).
   Rendered below the primary tab row when the active top-level tab has subtabs. */
#right-sidebar-header .tabs.subtabs {
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    padding: 0 8px;
    gap: 0;
}
#right-sidebar-header .tabs.subtabs .tab {
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 400;
    gap: 8px;
}

#right-sidebar-content {
    overflow-y: auto;
    flex: 1;
    padding: 4px 26px 24px 26px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--sidebar-text);
}
#right-sidebar-content .side-panel-list-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--sidebar-border);
}
#right-sidebar-content .side-panel-list-item:last-child {
    border-bottom: none;
}
#right-sidebar-content .side-panel-item-code {
    font-weight: 600;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    margin-bottom: 4px;
    color: var(--sidebar-text);
}
#right-sidebar-content .side-panel-item-text {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: pre-wrap;
}
#right-sidebar-content .side-panel-empty {
    color: var(--text-light);
    font-style: italic;
    padding: 20px 0;
}

/* === Picoco-class info patterns inside the right sidebar ===
   Used by structured renderers (footnotes, regulations, attributes...). */
#right-sidebar-content .attr-section {
    margin-bottom: 16px;
}
#right-sidebar-content .attr-label {
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 12px;
}
#right-sidebar-content .attr-value {
    color: var(--sidebar-text);
    line-height: 1.5;
    font-size: 13px;
}
#right-sidebar-content .citation-details {
    margin-top: 8px;
    border: 1px solid var(--sidebar-border);
    border-radius: 4px;
    background-color: var(--sidebar-button);
}
#right-sidebar-content .citation-details summary {
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-secondary);
    list-style: none;
    user-select: none;
}
#right-sidebar-content .citation-details summary::-webkit-details-marker {
    display: none;
}
#right-sidebar-content .citation-details summary::before {
    content: "▸ ";
    display: inline-block;
    transition: transform 0.15s;
}
#right-sidebar-content .citation-details[open] summary::before {
    content: "▾ ";
}
#right-sidebar-content .citation-details summary:hover {
    background-color: var(--sidebar-hover);
}
#right-sidebar-content .citation-source-link {
    margin-left: 8px;
    font-size: 11px;
    color: var(--accent, #4a9eff);
    text-decoration: none;
}
#right-sidebar-content .citation-source-link:hover {
    text-decoration: underline;
}
#right-sidebar-content .citation-body {
    padding: 10px 14px;
    border-top: 1px solid var(--sidebar-border);
    font-size: 13px;
    line-height: 1.6;
    color: var(--sidebar-text);
    max-height: 400px;
    overflow-y: auto;
}
#right-sidebar-content .citation-body p {
    margin: 0 0 10px 0;
}
#right-sidebar-content .citation-body p:last-child {
    margin-bottom: 0;
}
#right-sidebar-content .citation-body strong {
    font-weight: 600;
}
#right-sidebar-content .citation-body ul,
#right-sidebar-content .citation-body ol {
    margin: 0 0 10px 20px;
    padding: 0;
}
#right-sidebar-content .citation-body li {
    margin-bottom: 4px;
}
#right-sidebar-content .checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--sidebar-border);
    font-size: 13px;
}
#right-sidebar-content .checklist-item:last-child {
    border-bottom: none;
}
#right-sidebar-content .checklist-icon {
    flex-shrink: 0;
    width: 24px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    margin-top: 1px;
    background: color-mix(in srgb, var(--button-bg) 15%, transparent);
    color: var(--button-bg);
}
#right-sidebar-content .checklist-icon.path-confirmed {
    background: color-mix(in srgb, var(--button-bg) 15%, transparent);
    color: var(--button-bg);
}
#right-sidebar-content .checklist-icon.confirmed {
    background: color-mix(in srgb, var(--text-green) 15%, transparent);
    color: var(--text-green);
}
#right-sidebar-content .checklist-body {
    flex: 1;
    min-width: 0;
}
#right-sidebar-content .checklist-question {
    color: var(--sidebar-text);
    font-weight: 600;
}
#right-sidebar-content .checklist-relevance {
    color: var(--text-secondary);
    font-size: 12px;
    margin-top: 2px;
    line-height: 1.4;
}

/* === Theme overrides for smart_taric addon HTML (after the inline <style> is stripped) ===
   The addon ships divs with these class names; we re-style them here using picoco theme variables. */
#right-sidebar-content .taric-view {
    font-family: inherit;
    font-size: 13px;
    color: var(--sidebar-text);
    line-height: 1.5;
}
#right-sidebar-content .taric-header {
    padding: 4px 0 12px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--sidebar-border);
    color: var(--text-secondary);
    font-size: 12px;
}
#right-sidebar-content .taric-header span {
    margin-right: 14px;
}
#right-sidebar-content .taric-header b {
    color: var(--sidebar-text);
}
#right-sidebar-content .taric-nom {
    margin-bottom: 16px;
}
#right-sidebar-content .taric-nom .nom-row {
    white-space: nowrap;
    padding: 2px 0;
    font-size: 13px;
}
#right-sidebar-content .taric-nom .nom-code {
    display: inline-block;
    width: 110px;
    font-family: 'Courier New', monospace;
    color: var(--text-secondary);
}
#right-sidebar-content .taric-nom .nom-target {
    font-weight: 600;
    color: var(--button-bg);
}
#right-sidebar-content .taric-measures .origin-group {
    font-weight: 600;
    margin: 14px 0 6px 0;
    padding: 4px 0;
    border-bottom: 1px solid var(--sidebar-border);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 12px;
}
#right-sidebar-content .taric-measures .measure {
    margin: 6px 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--sidebar-border);
}
#right-sidebar-content .taric-measures .measure:last-child {
    border-bottom: none;
}
#right-sidebar-content .taric-measures .m-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
#right-sidebar-content .taric-measures .m-left {
    flex: 1;
    min-width: 0;
}
#right-sidebar-content .taric-measures .m-duty {
    font-weight: 600;
    white-space: nowrap;
    min-width: 80px;
    text-align: center;
    color: var(--button-bg);
}
#right-sidebar-content .taric-measures .m-reg {
    font-size: 11px;
    white-space: nowrap;
    min-width: 120px;
    text-align: right;
    color: var(--text-secondary);
}
#right-sidebar-content .taric-measures .m-type {
    font-weight: 600;
    color: var(--sidebar-text);
}
#right-sidebar-content .taric-measures .m-dates {
    font-size: 11px;
    color: var(--text-light);
}
#right-sidebar-content .taric-measures .m-excl,
#right-sidebar-content .taric-measures .m-fn,
#right-sidebar-content .taric-measures .m-cond {
    font-size: 11px;
    color: var(--text-secondary);
}
#right-sidebar-content .taric-measures .m-sub {
    font-size: 11px;
    font-style: italic;
    margin-left: 16px;
    color: var(--text-secondary);
}
#right-sidebar-content .taric-measures .m-cond {
    margin-left: 16px;
}
#right-sidebar-content .taric-quotas {
    margin-top: 16px;
}
#right-sidebar-content .taric-quotas .quota {
    margin: 6px 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--sidebar-border);
    font-size: 13px;
}

/* Expandable conditions block (the addon wraps tables in <details>) */
#right-sidebar-content .m-cond details {
    margin-top: 6px;
}
#right-sidebar-content .m-cond summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 4px 0;
    user-select: none;
}
#right-sidebar-content .m-cond summary:hover {
    color: var(--sidebar-text);
}
#right-sidebar-content .m-cond table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6px;
    font-size: 12px;
    color: var(--sidebar-text);
}
#right-sidebar-content .m-cond th {
    padding: 4px 8px;
    text-align: left;
    border: 1px solid var(--sidebar-border);
    background: var(--sidebar-button);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
#right-sidebar-content .m-cond td {
    padding: 4px 8px;
    border: 1px solid var(--sidebar-border);
    color: var(--sidebar-text);
    font-size: 12px;
    vertical-align: top;
}
#right-sidebar-content .m-cond tr:hover td {
    background: var(--sidebar-hover);
}
/* "Certificates: Y-152 - …" line under the conditions table */
#right-sidebar-content .m-cond details > div {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-secondary);
    padding: 4px 0;
}

/* Reg footer used by m-reg: "Regulation X / Official Journal …" */
#right-sidebar-content .taric-measures .m-reg strong {
    color: var(--sidebar-text);
    font-weight: 600;
}
#right-sidebar-content .taric-measures .m-reg .reg-link {
    cursor: pointer;
    color: #0d6efd;
    text-decoration: none;
    font-weight: 600;
}
#right-sidebar-content .taric-measures .m-reg .reg-link:hover {
    text-decoration: underline;
}
/* Regulation detail panel — overlays inside #right-sidebar only */
#right-sidebar #sidebar-reg-modal-host {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    pointer-events: none;
}
#right-sidebar #sidebar-reg-modal-host:empty {
    display: none;
}
#right-sidebar #sidebar-reg-modal-host .reg-modal-panel {
    pointer-events: auto;
    margin: 12px;
    max-width: calc(100% - 24px);
    max-height: 60vh;
    background: var(--sidebar-bg, #ffffff);
    color: var(--sidebar-text, #212529);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--sidebar-border, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    animation: regCardSlideUp 0.18s ease-out;
}
@keyframes regCardSlideUp {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}
#right-sidebar #sidebar-reg-modal-host .reg-modal-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--sidebar-border, #dee2e6);
    background: var(--sidebar-button, #f8f9fa);
}
#right-sidebar #sidebar-reg-modal-host .reg-modal-topbar-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--sidebar-text, #212529);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#right-sidebar #sidebar-reg-modal-host .reg-modal-close-btn {
    background: transparent;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-secondary, #6c757d);
    padding: 0 4px;
}
#right-sidebar #sidebar-reg-modal-host .reg-modal-close-btn:hover {
    color: var(--sidebar-text, #212529);
}
#right-sidebar #sidebar-reg-modal-host .reg-modal-body {
    flex: 1;
    overflow: auto;
    padding: 12px;
}
#right-sidebar #sidebar-reg-modal-host .reg-modal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
#right-sidebar #sidebar-reg-modal-host .reg-modal-table th,
#right-sidebar #sidebar-reg-modal-host .reg-modal-table td {
    border: 1px solid var(--sidebar-border, #dee2e6);
    padding: 4px 6px;
    text-align: left;
    vertical-align: top;
    color: var(--sidebar-text, #212529);
}
#right-sidebar #sidebar-reg-modal-host .reg-modal-table th {
    background: var(--sidebar-button, #f8f9fa);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-secondary, #6c757d);
}
#right-sidebar #sidebar-reg-modal-host .reg-modal-table a {
    color: #0d6efd;
    text-decoration: none;
}
#right-sidebar #sidebar-reg-modal-host .reg-modal-table a:hover {
    text-decoration: underline;
}
#right-sidebar-content .taric-measures .m-reg br + span,
#right-sidebar-content .taric-measures .m-reg span {
    font-size: 10px;
    color: var(--text-light);
    display: inline;
}

/* Inline "Order No: …" line emitted as a bare <div> with style stripped */
#right-sidebar-content .taric-measures .measure > div:not(.m-line):not(.m-sub):not(.m-cond):not(.m-excl):not(.m-fn) {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* === Quotas tab — Bootstrap-equivalent styling.
   Picoco does not load Bootstrap, so we provide minimal class equivalents
   under #right-sidebar-content for the markup ported verbatim from
   addon.html's displayQuotas (Ilja's commit 50dc124). === */
#right-sidebar-content .table-responsive {
    overflow-x: auto;
    width: 100%;
    margin-bottom: 12px;
}
#right-sidebar-content table.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--sidebar-text);
}
#right-sidebar-content table.table-sm th,
#right-sidebar-content table.table-sm td {
    padding: 6px 8px;
    vertical-align: middle;
}
#right-sidebar-content table.table-bordered,
#right-sidebar-content table.table-bordered th,
#right-sidebar-content table.table-bordered td {
    border: 1px solid var(--sidebar-border, rgba(255, 255, 255, 0.12));
}
#right-sidebar-content table.table-hover tbody tr:hover {
    background: var(--sidebar-hover, rgba(255, 255, 255, 0.04));
}
#right-sidebar-content table thead.table-light th {
    background: var(--sidebar-button, rgba(255, 255, 255, 0.06));
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}
#right-sidebar-content .badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    color: #fff;
    line-height: 1.5;
    white-space: nowrap;
}
#right-sidebar-content .badge.bg-success   { background-color: #198754; }
#right-sidebar-content .badge.bg-secondary { background-color: #6c757d; }
#right-sidebar-content .badge.bg-primary   { background-color: #0d6efd; }
#right-sidebar-content .text-muted {
    color: var(--text-light, #888);
}
#right-sidebar-content tr.quota-applied {
    background-color: rgba(25, 135, 84, 0.08);
}

/* === Taxes tab (national tax blocks rendered as HTML tables) === */
#right-sidebar-content .nl-block-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--sidebar-text);
    margin: 14px 0 6px 0;
}
#right-sidebar-content .nl-block-title:first-child {
    margin-top: 0;
}
#right-sidebar-content .nl-block-note {
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 12px;
}
#right-sidebar-content .nl-block-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 18px;
    font-size: 12px;
}
#right-sidebar-content .nl-block-table th {
    text-align: left;
    padding: 6px 8px;
    background-color: var(--sidebar-button);
    color: var(--sidebar-text);
    font-weight: 600;
    border-bottom: 1px solid var(--sidebar-border);
    border-top: 1px solid var(--sidebar-border);
}
#right-sidebar-content .nl-block-table td {
    padding: 6px 8px;
    color: var(--sidebar-text);
    border-bottom: 1px solid var(--sidebar-border);
    vertical-align: top;
    word-break: break-word;
}
#right-sidebar-content .nl-block-table tr:last-child td {
    border-bottom: none;
}
#right-sidebar-content .nl-block-subtitle {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 8px 0 4px 0;
}
#right-sidebar-content .nl-block-conditions {
    margin-bottom: 18px;
}

/* === Taxes tab — card-based layout (replaces tables, fits narrow sidebar) === */
#right-sidebar-content .tax-country-header {
    margin-bottom: 12px;
    color: var(--sidebar-text);
    font-size: 13px;
}
#right-sidebar-content .tax-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#right-sidebar-content .tax-card {
    border: 1px solid var(--sidebar-border);
    border-radius: 6px;
    background-color: var(--sidebar-button);
    padding: 10px 12px;
    font-size: 13px;
    color: var(--sidebar-text);
}
#right-sidebar-content .tax-card-header {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--sidebar-border);
}
#right-sidebar-content .tax-card-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
#right-sidebar-content .tax-card-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--sidebar-text);
}
#right-sidebar-content .tax-card-chip {
    display: inline-block;
    padding: 1px 6px;
    border: none;
    border-radius: 3px;
    background-color: var(--sidebar-border);
    color: var(--text-secondary);
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}
#right-sidebar-content .tax-card-country,
#right-sidebar-content .tax-card-regulation {
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 12px;
}
#right-sidebar-content .tax-footnote-chip {
    cursor: pointer;
    background-color: var(--sidebar-button-hover, var(--sidebar-border));
    transition: background-color 0.15s ease;
}
#right-sidebar-content .tax-footnote-chip:hover {
    background-color: var(--sidebar-text);
    color: var(--sidebar-button);
}
#right-sidebar-content .tax-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
#right-sidebar-content .tax-card-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
#right-sidebar-content .tax-card-label {
    flex-shrink: 0;
    width: 110px;
    color: var(--text-secondary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
#right-sidebar-content .tax-card-value {
    flex: 1;
    word-break: break-word;
    color: var(--sidebar-text);
}
#right-sidebar-content .tax-card-row:first-child .tax-card-value {
    /* Rate row gets a touch of emphasis. */
    font-weight: 600;
}
#right-sidebar-content .tax-card-conditions-slot:not(:empty) {
    margin-top: 8px;
}
#right-sidebar-content .tax-card-conditions {
    border-top: 1px dashed var(--sidebar-border);
    padding-top: 8px;
}
#right-sidebar-content .tax-card-footer {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
#right-sidebar-content .tax-card-footnotes {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
#right-sidebar-content .tax-card-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}
#right-sidebar-content .tax-conditions-toggle {
    color: var(--text-secondary);
    font-size: 12px;
    text-decoration: none;
}
#right-sidebar-content .tax-conditions-toggle:hover {
    text-decoration: underline;
}
/* ── Classify handler sidebar (Quick results grouped by code) ── */
.cls-group { border-bottom: 1px solid var(--sidebar-border); padding: 8px 0; }
.cls-group > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.cls-group > summary::-webkit-details-marker { display: none; }
.cls-group-head { display: flex; align-items: center; gap: 8px; }
.cls-code { font-family: monospace; font-weight: 600; color: var(--text-green); }
.cls-group-meta { font-size: 12px; color: var(--text-secondary); margin-left: auto; }
.cls-group-body { padding-left: 10px; margin-top: 6px; }
.cls-item { padding: 6px 0; border-top: 1px solid var(--sidebar-border); }
.cls-single .cls-item, .cls-group-body .cls-item:first-child { border-top: none; }
.cls-item-title { font-size: 13px; color: var(--text-color); }
.cls-item-meta { font-size: 11px; color: var(--text-light); }
.cls-item-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.4; margin-top: 2px; }
.cls-empty { color: var(--text-light); padding: 12px; font-size: 13px; }

/* ── classify mode switchers (match the standalone app) ── */
/* (1) Top-right circular icon buttons — identical bubble to picoco's established
   top-bar icon button (.sidebar-toggle-label): 50px, --prompt-bg, no border/shadow.
   z below the sliding sidebar so they're covered (not floating) when it's open. */
.classify-topbar {
    position: fixed; top: 16px; right: 15px; z-index: 1998;
    display: flex; gap: 10px;
}
.classify-topbar.hidden { display: none; }
.classify-topbar-btn {
    width: 50px; height: 50px; border-radius: 50%; border: none; cursor: pointer;
    background-color: var(--prompt-bg); color: var(--text-color);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2em; transition: color 0.15s;
}
.classify-topbar-btn:hover { color: #d6a700; }
.classify-topbar-btn.active { color: #e0b400; }   /* yellow = active mode */
.classify-topbar-btn svg { width: 20px; height: 20px; }
/* On classify the mode icons invoke the sidebar, so picoco's dedicated
   sidebar-toggle button is redundant — hide it (overrides SidebarManager). */
body.classify-mode #right-sidebar-toggle-label { display: none !important; }

/* (2) Sidebar mode tabs (icon + title) + per-mode description. The .tab markup
   reuses #right-sidebar-header .tabs .tab styling already defined above. */
.classify-mode-tabs-wrap.hidden { display: none; }
.classify-mode-tabs .cls-mode-tab.active { border-bottom-color: #e0b400; }
.classify-mode-desc {
    font-size: 12.5px; font-weight: 400; line-height: 1.5;
    color: var(--text-secondary, #888); padding: 10px 20px 4px;
}

/* ── classify finder: in-chat interactive rendering ── */

.cls-ack { font-size: 14px; color: var(--text-color); margin: 2px 0 8px; }
.cls-think { margin: 6px 0; }
.cls-think > summary { cursor: pointer; font-size: 13px; color: var(--text-secondary); }
.cls-think-label { font-weight: 500; }
.cls-think-body {
    margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--sidebar-border, #e5e5e5);
    font-size: 12.5px; color: var(--text-secondary); line-height: 1.45;
}
.cls-think-line { margin: 4px 0; }
.cls-answer { font-size: 14px; color: var(--text-color); line-height: 1.5; margin: 8px 0; }
.cls-answer-piece { margin: 4px 0; }
.cls-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.cls-option-btn {
    cursor: pointer; padding: 8px 14px; border-radius: 18px; font-size: 13px;
    border: 1px solid var(--text-green, #2f855a); background: transparent;
    color: var(--text-green, #2f855a);
}
.cls-option-btn:hover:not(:disabled) { background: var(--text-green, #2f855a); color: #fff; }
.cls-option-btn:disabled { cursor: default; opacity: 0.55; }
.cls-option-btn.chosen { background: var(--text-green, #2f855a); color: #fff; opacity: 1; font-weight: 600; }
.cls-options.answered .cls-option-btn:not(.chosen) { border-color: var(--sidebar-border, #ddd); color: var(--text-light); }
.cls-finder-summary { font-size: 12px; color: var(--text-secondary); padding: 8px; }
.cls-error { color: #c0392b; font-size: 13px; padding: 8px 0; }
.cls-section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--text-light, #888); margin: 12px 0 4px; }

/* Selector: per-level verdict candidates (YES/UNCERTAIN drillable, NO dimmed). */
.cls-verdicts { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.cls-verdict {
    display: grid; grid-template-columns: auto auto 1fr; align-items: baseline;
    gap: 8px; width: 100%; text-align: left; cursor: default;
    padding: 8px 12px; border-radius: 8px; border: 1px solid var(--sidebar-border, #ddd);
    background: transparent; color: var(--text-color); font-size: 13px;
}
.cls-verdict-reason { grid-column: 3 / 4; font-size: 12px; color: var(--text-secondary); }
.cls-verdict-badge {
    font-size: 10px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 6px;
    border-radius: 10px; align-self: center;
}
.cls-verdict-code { font-family: monospace; font-weight: 600; }
.cls-verdict-desc { color: var(--text-color); }
.cls-verdict-yes .cls-verdict-badge { background: rgba(67,160,71,0.18); color: var(--text-green, #43a047); }
.cls-verdict-uncertain .cls-verdict-badge { background: rgba(224,180,0,0.18); color: #b8860b; }
.cls-verdict-no { opacity: 0.5; }
.cls-verdict-no .cls-verdict-badge { background: rgba(120,120,120,0.18); color: var(--text-light, #888); }
.cls-verdict.drillable { cursor: pointer; border-color: var(--text-green, #43a047); }
.cls-verdict.drillable:hover { background: rgba(67,160,71,0.08); }
.cls-verdict.chosen { border-color: var(--text-green, #43a047); background: rgba(67,160,71,0.12); }
.cls-verdicts.drilled .cls-verdict:not(.chosen) { opacity: 0.45; }

/* ── News handler — sidebar cards + in-chat elements ──
   Ported from the standalone news app; colours use picoco's theme variables
   (same var names), so it follows picoco light/dark automatically. */

/* Sidebar: Answer sources + Latest updates (shared source card) */
.news-source-card { padding: 14px 4px; border-bottom: 1px solid var(--border-color); }
.news-source-card:hover { background: var(--background-hover); }
.news-source-tag { font-size: 0.7em; font-weight: 400; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-green); }
.news-source-title { font-size: 1em; font-weight: 400; color: var(--text-color); line-height: 1.4; }
.news-source-title a { color: var(--link-color); text-decoration: none; display: block; padding: 8px 0; }
.news-source-title a:hover { text-decoration: underline; }
.news-source-date { font-size: 0.75em; color: var(--text-secondary); }

/* In-chat: document-picker (change-analysis) */
.news-picker-msg { margin: 4px 0 10px; color: var(--text-color); }
.news-doc-card { padding: 14px 16px; border-radius: 8px; background: var(--background-hover); cursor: pointer; margin: 8px 0; border: 1px solid var(--border-color); }
.news-doc-card:hover { background: var(--sidebar-hover); }
.news-doc-src { font-size: 0.7em; font-weight: 400; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-green); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.news-doc-title { font-size: 1em; font-weight: 400; color: var(--text-color); line-height: 1.4; padding: 6px 0; }
.news-doc-date { font-size: 0.75em; color: var(--text-secondary); }
.news-badge { font-size: 0.85em; padding: 1px 7px; border-radius: 3px; border: 1px solid currentColor; letter-spacing: 0; text-transform: none; }
.news-badge.topics { color: var(--text-secondary); }
.news-badge.new { color: var(--text-green); }
.news-badge.upd { color: var(--link-color); }

/* In-chat: change cards (colour-coded left border by chunk_type) */
.news-change-summary { margin: 12px 0 8px; color: var(--text-color); font-weight: 500; }
.news-change-card { padding: 14px 16px; margin: 8px 0; background: var(--background-secondary); border-radius: 0 4px 4px 0; border-left: 3px solid var(--text-light); }
.news-change-card.news-ct-change { border-left-color: #d9a441; }
.news-change-card.news-ct-event { border-left-color: var(--text-green); }
.news-change-card.news-ct-analysis { border-left-color: var(--link-color); }
.news-change-head { display: flex; align-items: center; gap: 8px; }
.news-change-date { font-size: 0.7em; color: var(--text-secondary); }
.news-change-type { font-size: 0.7em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.news-ct-change .news-change-type { color: #d9a441; }
.news-ct-event .news-change-type { color: var(--text-green); }
.news-ct-analysis .news-change-type { color: var(--link-color); }
.news-change-title { font-size: 1em; font-weight: 500; color: var(--text-color); padding: 4px 0; }
.news-change-text { font-size: 0.95em; color: var(--text-secondary); line-height: 1.5; }
.news-change-tags { font-size: 0.7em; color: var(--text-light); margin-top: 6px; }

/* In-chat: answer / overview / thinking trace */
.news-answer, .news-overview { line-height: 1.55; color: var(--text-color); }
.news-summary-label { margin: 14px 0 8px; font-size: 0.85em; color: var(--text-secondary); }
.news-li { margin: 2px 0; }
.news-think { margin: 6px 0; }
.news-think-label { color: var(--text-secondary); }
.news-think-body { padding: 4px 0 2px 4px; }
.news-think-line { font-size: 0.85em; color: var(--text-light); padding: 2px 0; }
.news-think-line.done { color: var(--text-green); }
.news-error { color: var(--text-red, #c0392b); padding: 8px 0; }