/* theme variables: light is the default, html[data-theme="dark"] overrides */
:root {
    --chat-bg: #f5f6f8;
    --chat-panel: #ffffff;
    --chat-border: #dee2e6;
    --chat-text: #212529;
    --chat-muted: #6c757d;
    --chat-header: #1f2430;
    --chat-settings-bg: #2a3040;
    --chat-settings-border: #3a4154;
    --chat-settings-text: #aab2c5;
    --chat-sidebar-bg: #171b24;
    --chat-sidebar-text: #cfd5e1;
    --chat-sidebar-hover: #232936;
    --chat-sidebar-active: #2c3446;
    --chat-bubble-user: #0d6efd;
    --chat-bubble-assistant: #ffffff;
    --chat-code-bg: #f1f3f5;
    --chat-inline-code: #b02a5b;
}

html[data-theme="dark"] {
    --chat-bg: #12151c;
    --chat-panel: #1b2029;
    --chat-border: #313a4d;
    --chat-text: #dbe1ec;
    --chat-muted: #8b94a7;
    --chat-header: #171b24;
    --chat-settings-bg: #1f2430;
    --chat-settings-border: #313a4d;
    --chat-settings-text: #98a2b8;
    --chat-sidebar-bg: #0e1117;
    --chat-sidebar-text: #cfd5e1;
    --chat-sidebar-hover: #1b2029;
    --chat-sidebar-active: #262d3b;
    --chat-bubble-user: #2563eb;
    --chat-bubble-assistant: #1f2530;
    --chat-code-bg: #141924;
    --chat-inline-code: #e57399;
}

html,
body {
    height: 100%;
}

.chat-page {
    display: flex;
    flex-direction: row;
    height: 100vh;
    color: var(--chat-text);
}

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

/* ---- sidebar ---- */

.chat-sidebar {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    background-color: var(--chat-sidebar-bg);
    color: var(--chat-sidebar-text);
    padding: 0.75rem;
    overflow: hidden;
}

.chat-sidebar-empty {
    color: var(--chat-muted);
}

.chat-conversation-list {
    flex: 1 1 auto;
    overflow-y: auto;
}

.chat-conversation-item {
    position: relative;
    padding: 0.45rem 1.6rem 0.45rem 0.6rem;
    border-radius: 0.4rem;
    cursor: pointer;
    margin-bottom: 0.15rem;
}

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

.chat-conversation-item.active {
    background-color: var(--chat-sidebar-active);
}

.chat-conversation-title {
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-conversation-date {
    font-size: 0.7rem;
    color: #8891a3;
}

.chat-conversation-delete {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    border: none;
    background: transparent;
    color: #8891a3;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0.15rem;
    opacity: 0;
}

.chat-conversation-item:hover .chat-conversation-delete {
    opacity: 0.7;
}

.chat-conversation-delete:hover {
    opacity: 1 !important;
    color: #e05263;
}

/* ---- header and settings ---- */

.chat-header {
    background-color: var(--chat-header);
    flex: 0 0 auto;
}

.chat-endpoint-select {
    min-width: 150px;
    max-width: 220px;
}

.chat-model-select {
    min-width: 200px;
    max-width: 320px;
}

.chat-settings {
    flex: 0 0 auto;
    background-color: var(--chat-settings-bg);
    border-bottom: 1px solid var(--chat-settings-border);
}

.chat-settings .form-label {
    color: var(--chat-settings-text);
}

.chat-number {
    max-width: 9rem;
}

/* ---- message area ---- */

.chat-messages {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.5rem;
    background-color: var(--chat-bg);
}

/* anchors the conversation to the bottom like a normal chat app; history grows upward */
.chat-thread {
    margin-top: auto;
}

.chat-empty {
    text-align: center;
    margin: auto;
    color: var(--chat-muted);
}

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

.chat-row-user {
    justify-content: flex-end;
}

.chat-row-assistant {
    justify-content: flex-start;
}

.chat-bubble {
    max-width: 75%;
    padding: 0.6rem 0.9rem;
    border-radius: 1rem;
}

.chat-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.chat-bubble-user {
    position: relative;
    background-color: var(--chat-bubble-user);
    color: #fff;
    border-bottom-right-radius: 0.25rem;
    padding-right: 2.4rem;
}

.chat-bubble-assistant {
    position: relative;
    background-color: var(--chat-bubble-assistant);
    border: 1px solid var(--chat-border);
    border-bottom-left-radius: 0.25rem;
    padding-right: 2.4rem;
}

.chat-source {
    font-size: 0.7rem;
    color: var(--chat-muted);
    margin-bottom: 0.25rem;
}

.chat-meta {
    font-size: 0.7rem;
    color: var(--chat-muted);
    margin-top: 0.4rem;
}

.chat-warning {
    color: #d08700;
}

.chat-copy,
.chat-edit {
    position: absolute;
    top: 0.3rem;
    right: 0.35rem;
    border: none;
    background: transparent;
    font-size: 1rem;
    line-height: 1;
    padding: 0.15rem;
    opacity: 0.35;
}

.chat-copy {
    color: var(--chat-muted);
}

.chat-edit {
    color: #ffffff;
    font-size: 0.85rem;
}

.chat-copy:hover,
.chat-edit:hover {
    opacity: 1;
}

.chat-cursor {
    animation: chat-blink 1s steps(2, start) infinite;
}

@keyframes chat-blink {
    to {
        visibility: hidden;
    }
}

/* ---- compare mode ---- */

.chat-compare-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    align-items: flex-start;
}

.chat-compare-col {
    flex: 1 1 0;
    max-width: none;
}

/* ---- markdown ---- */

.chat-markdown p:last-child,
.chat-markdown ul:last-child,
.chat-markdown ol:last-child,
.chat-markdown pre:last-child {
    margin-bottom: 0;
}

.chat-markdown pre {
    background-color: var(--chat-code-bg);
    border-radius: 0.5rem;
    padding: 0.6rem 0.8rem;
    overflow-x: auto;
}

.chat-markdown pre code {
    background-color: transparent;
    color: inherit;
}

.chat-markdown code {
    color: var(--chat-inline-code);
}

.chat-markdown table {
    border-collapse: collapse;
    margin-bottom: 0.75rem;
}

.chat-markdown th,
.chat-markdown td {
    border: 1px solid var(--chat-border);
    padding: 0.25rem 0.6rem;
}

.chat-markdown blockquote {
    border-left: 3px solid var(--chat-border);
    margin-left: 0;
    padding-left: 0.75rem;
    color: var(--chat-muted);
}

/* ---- images ---- */

.chat-image-strip {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}

.chat-image {
    max-width: 180px;
    max-height: 180px;
    border-radius: 0.5rem;
}

.chat-pending-images {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.chat-pending-thumb {
    position: relative;
    display: inline-block;
}

.chat-pending-thumb img {
    max-width: 72px;
    max-height: 72px;
    border-radius: 0.4rem;
    border: 1px solid var(--chat-border);
}

.chat-pending-thumb button {
    position: absolute;
    top: -0.4rem;
    right: -0.4rem;
    border: none;
    border-radius: 50%;
    background-color: #dc3545;
    color: #fff;
    font-size: 0.6rem;
    width: 1.1rem;
    height: 1.1rem;
    line-height: 1;
}

/* ---- composer ---- */

.chat-input {
    flex: 0 0 auto;
    background-color: var(--chat-panel);
    border-top: 1px solid var(--chat-border);
}

.chat-input textarea {
    resize: none;
    field-sizing: content; /* auto-grows with content in browsers that support it; others keep the fixed rows */
    min-height: 4.75rem;
    max-height: 14rem;
    overflow-y: auto;
}

/* ---- dark-mode support for bootstrap form controls inside the chat ---- */

.chat-page .form-control,
.chat-page .form-select {
    background-color: var(--chat-panel);
    color: var(--chat-text);
    border-color: var(--chat-border);
}

.chat-page .form-control::placeholder {
    color: var(--chat-muted);
}

.chat-page .form-control:disabled,
.chat-page .form-select:disabled {
    background-color: var(--chat-bg);
    color: var(--chat-muted);
}