/* OmniSolver Code chat comfort layer, 2026-05-17.
   Plain color corrections for chat, tools, reasoning and light/dark themes. */

:root,
:root[data-theme="classic"] {
    --comfort-bg: #07080f;
    --comfort-surface: #0d0f1a;
    --comfort-surface-2: #111321;
    --comfort-surface-3: #151829;
    --comfort-line: #24283d;
    --comfort-line-strong: #30364f;
    --comfort-text: #e7e9f5;
    --comfort-secondary: #a8aec8;
    --comfort-muted: #737996;
    --comfort-code: #090b14;
    --comfort-code-2: #0d101c;
    --comfort-primary: #9b8cff;
    --comfort-blue: #78a9ff;
    --comfort-green: #35c978;
    --comfort-yellow: #e0ad2f;
    --comfort-red: #f05d65;
}

:root[data-theme="minimal"] {
    --comfort-bg: #080808;
    --comfort-surface: #101010;
    --comfort-surface-2: #151515;
    --comfort-surface-3: #1b1b1b;
    --comfort-line: #2a2a2a;
    --comfort-line-strong: #393939;
    --comfort-text: #ededed;
    --comfort-secondary: #b7b7b7;
    --comfort-muted: #7d7d7d;
    --comfort-code: #090909;
    --comfort-code-2: #121212;
    --comfort-primary: #d7d7d7;
    --comfort-blue: #c7c7c7;
    --comfort-green: #72d38b;
    --comfort-yellow: #d6b85f;
    --comfort-red: #e36f6f;
}

:root[data-theme="cosmos"] {
    --comfort-bg: #070b1a;
    --comfort-surface: rgba(10, 14, 31, 0.86);
    --comfort-surface-2: rgba(14, 19, 40, 0.88);
    --comfort-surface-3: rgba(20, 26, 52, 0.86);
    --comfort-line: rgba(126, 146, 220, 0.22);
    --comfort-line-strong: rgba(148, 163, 230, 0.34);
    --comfort-text: #e5e9fb;
    --comfort-secondary: #aeb8df;
    --comfort-muted: #7a86b5;
    --comfort-code: rgba(5, 8, 20, 0.9);
    --comfort-code-2: rgba(8, 12, 26, 0.92);
    --comfort-primary: #a7b1ff;
    --comfort-blue: #7fb6ff;
    --comfort-green: #45d08a;
    --comfort-yellow: #e4b74a;
    --comfort-red: #f36b78;
}

body.light-theme {
    --comfort-bg: #f6f7fb;
    --comfort-surface: #ffffff;
    --comfort-surface-2: #f1f3f8;
    --comfort-surface-3: #e9ecf4;
    --comfort-line: #d9deeb;
    --comfort-line-strong: #c4cbdd;
    --comfort-text: #202536;
    --comfort-secondary: #4f596f;
    --comfort-muted: #7a8498;
    --comfort-code: #f8f9fc;
    --comfort-code-2: #eef1f7;
    --comfort-primary: #6657db;
    --comfort-blue: #2563eb;
    --comfort-green: #16834d;
    --comfort-yellow: #9a6a00;
    --comfort-red: #c2353d;
}

body {
    background-color: var(--comfort-bg);
}

:root[data-theme="cosmos"] .chat-main,
:root[data-theme="cosmos"] .chat-messages {
    background-color: transparent !important;
    background-image: none !important;
    background-size: auto !important;
    background-repeat: no-repeat !important;
}

body.light-theme,
body.light-theme .chat-container,
body.light-theme .chat-main {
    background: var(--comfort-bg) !important;
}

.chat-messages {
    gap: 8px;
    padding: 22px clamp(14px, 2.4vw, 32px) 26px;
    overflow-x: hidden;
    scrollbar-color: var(--comfort-line-strong) transparent;
}

.chat-messages::-webkit-scrollbar-thumb,
pre::-webkit-scrollbar-thumb,
.file-code-preview::-webkit-scrollbar-thumb,
.code-block pre::-webkit-scrollbar-thumb,
.message-content pre code::-webkit-scrollbar-thumb,
.cli-step-code::-webkit-scrollbar-thumb,
.think-content::-webkit-scrollbar-thumb {
    background: var(--comfort-line-strong) !important;
    border-radius: 8px !important;
}

.chat-messages::-webkit-scrollbar-track,
pre::-webkit-scrollbar-track,
.file-code-preview::-webkit-scrollbar-track,
.code-block pre::-webkit-scrollbar-track,
.message-content pre code::-webkit-scrollbar-track,
.cli-step-code::-webkit-scrollbar-track,
.think-content::-webkit-scrollbar-track {
    background: transparent !important;
}

.message {
    max-width: min(1080px, 100%);
    width: 100%;
    box-sizing: border-box;
    gap: 12px;
    padding: 6px 0;
}

.message-body,
.message-content {
    min-width: 0;
    max-width: 100%;
}

.message.agent-mode-plan .message-body,
.message.agent-mode-ask .message-body,
.message.agent-mode-auto-edit .message-body,
.message.agent-mode-auto .message-body,
.message.agent-mode-bypass .message-body {
    border-left: 0 !important;
    background: transparent !important;
}

.message.agent-mode-plan .message-content::before {
    border-color: color-mix(in srgb, var(--comfort-blue) 36%, transparent);
    background: color-mix(in srgb, var(--comfort-blue) 11%, transparent);
    color: var(--comfort-blue);
}

.message-content {
    color: var(--comfort-text);
    font-size: 14.5px;
    line-height: 1.44;
    text-shadow: none;
}

.message-content p {
    margin: 3px 0;
    line-height: 1.44;
}

.message-content ul,
.message-content ol {
    margin: 5px 0 7px;
    padding-left: 18px;
}

.message-content li {
    margin: 1px 0 !important;
    line-height: 1.42;
}

.message-content li + li {
    margin-top: 2px !important;
}

.message-content ul + ul,
.message-content ol + ol {
    margin-top: -4px;
}

.message-content li > p,
.message-content li > ul,
.message-content li > ol {
    margin-top: 2px;
    margin-bottom: 2px;
}

.message-content h1,
.message-content h2,
.message-content h3 {
    margin: 12px 0 6px;
    line-height: 1.25;
}

.message-content h1 + ul,
.message-content h2 + ul,
.message-content h3 + ul,
.message-content h1 + ol,
.message-content h2 + ol,
.message-content h3 + ol {
    margin-top: 4px;
}

.message-content blockquote {
    margin: 10px 0;
    padding: 8px 10px;
    border: 1px solid var(--comfort-line);
    border-radius: 8px;
    background: transparent;
    color: var(--comfort-secondary);
}

.message-content code:not(pre code) {
    border: 0;
    background: rgba(135, 145, 190, 0.12);
    color: var(--comfort-text);
    box-shadow: none;
}

.message-content pre {
    margin: 12px 0;
    border: 1px solid var(--comfort-line);
    border-radius: 9px;
    background: var(--comfort-code);
    box-shadow: none;
}

.message-content pre .code-header {
    border-bottom-color: var(--comfort-line);
    background: var(--comfort-code-2);
}

.message-content pre code {
    color: var(--comfort-text);
    line-height: 1.5;
}

.message-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    table-layout: fixed;
    scrollbar-color: var(--comfort-line-strong) transparent;
}

.message-content thead,
.message-content tbody,
.message-content tr {
    width: 100%;
}

.message-content th,
.message-content td {
    min-width: 0;
    max-width: 260px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    vertical-align: top;
}

.message-content td code:not(pre code),
.message-content th code:not(pre code) {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.think-block {
    margin: 10px 0;
    border: 1px solid var(--comfort-line) !important;
    border-left: 1px solid var(--comfort-line) !important;
    border-radius: 8px !important;
    background: var(--comfort-surface) !important;
    box-shadow: none !important;
}

.think-header {
    min-height: 44px;
    padding: 10px 13px !important;
    color: var(--comfort-primary) !important;
    font-size: 13.5px !important;
}

.think-header:hover {
    background: var(--comfort-surface-2) !important;
}

.think-content {
    max-height: none !important;
    overflow-y: visible !important;
    padding: 12px 14px 14px !important;
    border-top: 1px solid var(--comfort-line) !important;
    color: var(--comfort-secondary) !important;
    font-size: 13.3px !important;
    line-height: 1.66 !important;
    font-style: italic;
}

.cli-agent-steps,
.message-events-stream {
    gap: 8px;
    margin: 9px 0 14px;
}

.cli-agent-steps {
    padding: 0;
    border: 0;
    background: transparent;
}

.cli-step-card.osc-tool-stripe {
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--comfort-surface);
    box-shadow: none;
}

.cli-step-card.osc-tool-stripe:hover {
    border-color: var(--comfort-line-strong);
    background: var(--comfort-surface-2);
}

.cli-step-card.osc-tool-stripe > .cli-step-header {
    min-height: 38px;
    padding: 7px 10px;
    gap: 9px;
    border-bottom: 0;
    background: transparent;
}

.cli-step-card.cli-step-running,
.cli-step-card.cli-step-done,
.cli-step-card.cli-step-error {
    border-color: var(--comfort-line);
}

.cli-step-card .cli-step-title {
    color: var(--comfort-secondary);
    font-size: 12.5px;
}

.cli-step-card .cli-step-dot {
    box-shadow: none !important;
}

.cli-step-card.cli-step-running .cli-step-dot { background: var(--comfort-yellow); }
.cli-step-card.cli-step-done .cli-step-dot { background: var(--comfort-green); }
.cli-step-card.cli-step-error .cli-step-dot { background: var(--comfort-red); }

.cli-step-card .cli-step-badge,
.cli-step-num {
    border-color: transparent;
    border-radius: 6px;
    background: var(--comfort-surface-2);
}

.cli-step-card[data-tool="Bash"] .cli-step-badge { color: var(--comfort-green); }
.cli-step-card[data-tool="Read"] .cli-step-badge { color: var(--comfort-yellow); }
.cli-step-card[data-tool="Write"] .cli-step-badge,
.cli-step-card[data-tool="Edit"] .cli-step-badge,
.cli-step-card[data-tool="MultiEdit"] .cli-step-badge { color: var(--comfort-primary); }
.cli-step-card[data-tool="WebFetch"] .cli-step-badge,
.cli-step-card[data-tool="WebSearch"] .cli-step-badge,
.cli-step-card[data-tool="Glob"] .cli-step-badge,
.cli-step-card[data-tool="Grep"] .cli-step-badge { color: var(--comfort-blue); }

.cli-step-card .cli-step-in,
.cli-step-card .cli-step-out {
    margin: 0 10px 10px 38px;
    padding: 9px 10px;
    border: 1px solid var(--comfort-line);
    border-radius: 8px;
    background: var(--comfort-code);
    color: var(--comfort-text);
    font-size: 12px;
    line-height: 1.56;
}

.cli-step-card:not(.expanded):not([data-tool="TodoWrite"]) .cli-step-body {
    display: none;
}

.cli-step-card .cli-step-out {
    background: var(--comfort-code-2);
}

.cli-step-card.cli-step-error .cli-step-out {
    border-color: color-mix(in srgb, var(--comfort-red) 42%, var(--comfort-line));
    background: color-mix(in srgb, var(--comfort-red) 9%, var(--comfort-code-2));
}

.cli-step-card .cli-step-label {
    color: var(--comfort-muted);
    letter-spacing: 0.04em;
}

.cli-step-card.expanded .cli-step-body,
.cli-step-card[data-tool="TodoWrite"] .cli-step-body {
    max-height: none;
    overflow: visible;
}

.msg-metrics {
    width: fit-content;
    max-width: 100%;
    margin-top: 8px;
    border: 1px solid var(--comfort-line);
    border-radius: 8px;
    background: var(--comfort-surface);
    color: var(--comfort-muted);
}

.msg-metric {
    border-color: var(--comfort-line);
    background: var(--comfort-surface-2);
}

.message-actions {
    gap: 6px;
    margin-top: 10px;
}

.msg-action {
    min-width: 30px;
    min-height: 30px;
    border-radius: 7px;
    color: var(--comfort-muted);
}

.msg-action:hover {
    color: var(--comfort-text);
    background: var(--comfort-surface-2);
    border-color: var(--comfort-line);
}

.agent-plan-review {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid var(--comfort-line);
    border-radius: 8px;
    background: var(--comfort-surface);
    box-shadow: none;
}

.apr-head {
    margin-bottom: 12px;
}

.apr-title {
    color: var(--comfort-text);
    font-size: 15.5px;
    font-weight: 700;
}

.apr-sub,
.apr-option small {
    color: var(--comfort-muted);
}

.apr-badge {
    border-color: transparent;
    background: transparent;
    color: var(--comfort-primary);
}

.apr-actions {
    gap: 8px;
}

.apr-option {
    grid-template-columns: 30px 1fr;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--comfort-line);
    border-radius: 8px;
    background: transparent;
}

.apr-option:hover,
.apr-option.is-primary {
    border-color: var(--comfort-line-strong);
    background: var(--comfort-surface-2);
}

.apr-num {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--comfort-surface-2);
    color: var(--comfort-primary);
}

.apr-note {
    min-height: 60px;
    margin-top: 10px;
    border: 1px solid var(--comfort-line);
    border-radius: 8px;
    background: var(--comfort-code);
    color: var(--comfort-text);
}

.chat-input-area {
    background: var(--comfort-bg);
    border-top-color: var(--comfort-line);
}

.chat-input-wrapper {
    border-color: var(--comfort-line);
    background: var(--comfort-surface);
}

body:not(.light-theme) .toggle-slider {
    background: #25253a;
    border: 1px solid #343650;
    box-shadow: none;
}

body:not(.light-theme) .toggle-slider::after {
    background: #777b96;
    box-shadow: none;
}

body:not(.light-theme) .setting-toggle input:checked + .toggle-slider {
    background: #3f3b66;
    border-color: #5c5689;
}

body:not(.light-theme) .setting-toggle input:checked + .toggle-slider::after {
    background: #aeb3cb;
    box-shadow: none;
}

:root[data-theme="minimal"] body:not(.light-theme) .toggle-slider {
    background: #242424;
    border-color: #363636;
}

:root[data-theme="minimal"] body:not(.light-theme) .setting-toggle input:checked + .toggle-slider {
    background: #3a3a3a;
    border-color: #555;
}

body.light-theme .chat-topbar,
body.light-theme .sidebar,
body.light-theme .sidebar-bottom,
body.light-theme .sidebar-footer {
    background: #ffffff !important;
    border-color: var(--comfort-line) !important;
}

body.light-theme .message-content,
body.light-theme .message-content pre code,
body.light-theme .cli-step-code code {
    color: var(--comfort-text) !important;
}

body.light-theme .think-block,
body.light-theme .cli-step-card.osc-tool-stripe,
body.light-theme .agent-plan-review {
    background: #ffffff !important;
}

body.light-theme .think-content,
body.light-theme .cli-step-card .cli-step-title {
    color: var(--comfort-secondary) !important;
}

body.light-theme .message-content blockquote,
body.light-theme .msg-metrics,
body.light-theme .msg-metric,
body.light-theme .apr-option {
    background: transparent !important;
}

body.light-theme .message-content code:not(pre code) {
    background: rgba(79, 70, 229, 0.09);
}

:root[data-theme="cosmos"] .message-content code:not(pre code) {
    background: rgba(166, 178, 255, 0.12);
}

:root[data-theme="minimal"] .message-content code:not(pre code) {
    background: rgba(255, 255, 255, 0.08);
}

.think-block.think-summary-only {
    width: fit-content;
    max-width: 100%;
    margin: 6px 0 8px;
    border: 0;
    background: transparent !important;
}

.think-block.think-summary-only .think-header {
    min-height: 28px;
    padding: 0;
    gap: 8px;
    color: var(--comfort-muted);
    font-size: 14px;
    font-weight: 500;
}

.think-block.think-summary-only .think-content,
.think-block.think-summary-only .think-chevron {
    display: none !important;
}

.think-block.think-summary-only .think-icon {
    opacity: 0.8;
}

.message-content code:not(pre code),
.think-content code:not(pre code) {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.chat-input-attachments {
    align-items: stretch;
    max-height: 168px;
    overflow-y: auto;
}

.chat-input-attachments .msg-attach {
    width: min(330px, 100%);
    min-height: 64px;
    border-radius: 8px;
    box-shadow: none;
}

.chat-input-attachments .msg-attach-ext {
    width: 52px;
    min-width: 52px;
    border-radius: 8px;
}

.chat-input-attachments .msg-attach-name {
    max-width: 190px;
}

.chat-input-attachments .msg-attach-meta {
    min-height: 18px;
}

.chat-input-attachments .msg-attach-actions {
    margin-left: auto;
}

.chat-input-attachments .msg-attach-remove {
    background: var(--bg-hover);
}

.chat-input-attachments .msg-attach-remove:hover {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.45);
}

@media (max-width: 768px) {
    .chat-messages {
        gap: 7px;
        padding: 14px 10px 86px;
    }

    .message {
        gap: 9px;
        padding: 5px 0;
    }

    .message-avatar {
        width: 28px;
        height: 28px;
    }

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

    .cli-step-card .cli-step-in,
    .cli-step-card .cli-step-out {
        margin-left: 10px;
    }

    .agent-plan-review {
        padding: 12px;
    }
}