/* ── Full-height pages (body.fill-viewport) ──────────────────── */
/* The theme wrapper is exactly one screen tall and the page content takes what
   the header and banner leave, so the page scrolls inside itself instead of
   measuring offsets in JS. On screens too short for the content's own minimum
   (landscape phones) the content spills and the page scrolls. The footer sits
   just below the fold from md up and is hidden on phones; Help and Log Out
   stay reachable from the header nav. */
body.fill-viewport > :has(> #main-content) {
    position: relative;
    height: 100vh;
    height: 100dvh;
    min-height: 0 !important; /* themes set min-height:100vh inline */
}
body.fill-viewport #main-content,
body.fill-viewport #main-content > .container-fluid {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: visible !important;
}
/* Size the content from the space it is given, never from what it holds. */
body.fill-viewport #main-content {
    contain: size;
}
body.fill-viewport > :has(> #main-content) > footer {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
}
@media (max-width: 767.98px) {
    body.fill-viewport > :has(> #main-content) > footer {
        display: none;
    }
}

/* ── Chat page layout ────────────────────────────────────────── */
.chat-page-layout {
    display: flex;
    flex: 1;
    min-height: 320px;
    overflow: auto;
    margin: 0 -1.5rem;
}
/* Bleed to the edges of the shell container, whose side padding is px-2 below md. */
@media (max-width: 767.98px) {
    .chat-page-layout {
        margin: 0 -0.5rem;
    }
}

/* Size both columns from the row, not from their content: with flex-basis auto
   a long streamed line inflated .chat-main's basis and squeezed the sidebar,
   so the layout shifted while a reply streamed. !important beats Bootstrap's
   flex-fill (flex: 1 1 auto !important) on the same element. */
.chat-main {
    flex: 1 1 0 !important;
    min-width: 0;
    min-height: 0;
}

.chat-messages {
    background: #f8f9fa;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.conv-list {
    overflow-y: auto;
    min-height: 0;
}

.conv-item {
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.1s;
}

.conv-item:hover {
    background: #f8f9fa;
}

.conv-item.active {
    background: #e8f0fe;
    border-left: 3px solid #13294b;
}

.conv-remove-btn {
    opacity: 0;
    font-size: 0.75rem;
    line-height: 1;
    color: #6c757d !important;
    text-decoration: none;
}

.conv-item:hover .conv-remove-btn,
.conv-item:focus-within .conv-remove-btn,
.conv-remove-btn:focus {
    opacity: 1;
}

/* Touch screens have no hover to reveal it. */
@media (hover: none) {
    .conv-remove-btn {
        opacity: 1;
    }
}

/* ── Desktop: offcanvas becomes static sidebar ───────────────── */
@media (min-width: 768px) {
    .chat-sidebar.offcanvas {
        position: static !important;
        transform: none !important;
        visibility: visible !important;
        width: 260px !important;
        flex: 0 0 260px;
        height: 100%;
        border-right: 1px solid #dee2e6;
        z-index: auto;
    }
    .chat-sidebar.offcanvas .btn-close {
        display: none;
    }
    .chat-sidebar.offcanvas-start {
        top: auto;
        left: auto;
    }
}

/* Model picker: on phones it takes the rest of its row and the ack warning
   wraps onto its own line below it. */
#model-picker {
    flex: 1 1 0;
    min-width: 0;
}
.chat-header .ack-warning {
    flex-basis: 100%;
}
@media (min-width: 576px) {
    #model-picker {
        flex: 0 1 280px;
    }
    .chat-header .ack-warning {
        flex-basis: auto;
    }
}

/* ── Chat bubbles ────────────────────────────────────────────── */
.chat-bubble {
    display: inline-block;
    width: fit-content;
    padding: 0.6rem 1rem;
    border-radius: 1.1rem;
    word-break: break-word;
    line-height: 1.5;
    font-size: 0.95rem;
}

.chat-bubble-user {
    background-color: var(--bubble-user, #13294b);
    color: #fff;
    border-bottom-right-radius: 0.25rem;
    white-space: pre-wrap;
}

.chat-bubble-assistant {
    background-color: var(--bubble-assistant, #b5300c);
    color: #fff;
    border-bottom-left-radius: 0.25rem;
}

.chat-bubble-assistant code {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    padding: 0.1em 0.3em;
    font-size: 0.9em;
    color: #fff;
}

.chat-bubble-assistant pre {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 0.4rem;
    padding: 0.75rem 1rem;
    overflow-x: auto;
    margin: 0.5rem 0;
}

.chat-bubble-assistant pre code {
    background: none;
    padding: 0;
}

.chat-bubble-assistant ul,
.chat-bubble-assistant ol {
    padding-left: 1.4rem;
    margin: 0.4rem 0;
}

.chat-bubble-assistant p {
    margin: 0.3rem 0;
}
.chat-bubble-assistant p:last-child {
    margin-bottom: 0;
}

.chat-bubble-assistant h1,
.chat-bubble-assistant h2,
.chat-bubble-assistant h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0.5rem 0 0.25rem;
}

.chat-bubble-assistant blockquote {
    border-left: 3px solid rgba(255, 255, 255, 0.5);
    margin: 0.4rem 0;
    padding-left: 0.75rem;
    opacity: 0.9;
}

/* ── KaTeX math in chat bubbles ──────────────────────────────── */
.chat-bubble-assistant .katex {
    color: #fff;
}
.chat-bubble-assistant .katex-display {
    overflow-x: auto;
    margin: 0.4rem 0;
}

/* ── Quick-chat notice ──────────────────────────────────────── */
.quick-chat-notice {
    display: flex;
    flex-direction: column;
    max-width: 34rem;
    margin: 1rem auto;
    padding: 0.9rem 1rem;
    border: 1px solid #dee2e6;
    border-left: 3px solid #13294b;
    border-radius: 6px;
    background: #fff;
    color: #495057;
    font-size: 0.92rem;
}
.quick-chat-notice p {
    margin-bottom: 0.35rem;
}

/* ── Message metadata & info icon ────────────────────────────── */
.msg-meta {
    font-size: 0.82rem;
    color: #596068;
    margin-top: 2px;
}

.info-icon {
    cursor: pointer;
    opacity: 0.5;
    font-size: 0.8rem;
    user-select: none;
}

.info-icon:hover {
    opacity: 1;
}

.copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    min-height: 1.25rem;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font-size: 0.8rem;
    line-height: 1;
}

.copy-btn:hover {
    color: #13294b;
}

.copy-btn:focus-visible {
    outline: 2px solid #13294b;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Copy-all floats over the top-right corner of the message area. It sits
   outside the scrolling #chat-messages so it stays put, clear of the scrollbar;
   the extra right padding keeps message text out from under it. */
.chat-messages-wrap {
    position: relative;
    min-height: 0;
}

.chat-messages-wrap .chat-messages {
    padding-right: 3rem !important;
}

.copy-chat-btn {
    position: absolute;
    top: 0.5rem;
    right: 1.25rem;
    z-index: 2;
    width: 2rem;
    height: 2rem;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    color: #13294b;
    font-size: 1rem;
}

.copy-chat-btn:disabled {
    color: #6c757d;
    opacity: 0.65;
}

/* ── Thinking block ─────────────────────────────────────────── */
.thinking-block {
    background: #1e2430;
    border: 1px solid #3a4256;
    border-radius: 8px;
    padding: 0.4rem 0.7rem;
    max-width: 100%;
}

.thinking-block summary {
    font-size: 0.8rem;
    color: #8fa0b8;
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.thinking-block summary::before {
    content: "▶ ";
    font-size: 0.65rem;
}

.thinking-block[open] summary::before {
    content: "▼ ";
}

.thinking-text {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    color: #8fa0b8;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
}

/* ── Typing indicator ────────────────────────────────────────── */
@keyframes blink {
    0%,
    80%,
    100% {
        opacity: 0.2;
    }
    40% {
        opacity: 1;
    }
}

.typing-dot {
    font-size: 0.6rem;
    animation: blink 1.4s infinite;
}

/* ── Avatar ──────────────────────────────────────────────────── */
.avatar-wrapper {
    position: relative;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.avatar-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-initials {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #13294b;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    user-select: none;
}

/* ── Progress bars ───────────────────────────────────────────── */
.progress-bar {
    background-color: #13294b;
}

/* ── Override Bootstrap outline-primary with il-blue ─────────── */
.btn-outline-primary {
    color: #13294b !important;
    border-color: #13294b !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: #13294b !important;
    border-color: #13294b !important;
    color: #fff !important;
}

.btn-outline-primary:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(19, 41, 75, 0.4);
}

/* ── Override Bootstrap primary color with il-blue ───────────── */
.btn-primary,
ilw-content .btn-primary {
    background-color: #13294b !important;
    border-color: #13294b !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
ilw-content .btn-primary:hover,
ilw-content .btn-primary:focus,
ilw-content .btn-primary:active {
    background-color: #0e1f38 !important;
    border-color: #0e1f38 !important;
}

.btn-primary:focus,
.btn-primary:active {
    box-shadow: 0 0 0 0.25rem rgba(19, 41, 75, 0.4);
}

/* ── Navbar ──────────────────────────────────────────────────── */
.navbar-lumen {
    background-color: #e2e3e3;
}

.navbar-lumen .navbar-brand,
.navbar-lumen .nav-link,
.navbar-lumen .nav-link.active {
    color: #13294b;
}

.navbar-lumen .nav-link:hover,
.navbar-lumen .nav-link:focus {
    color: #0e1f38;
}

.navbar-lumen .navbar-toggler {
    border-color: #13294b;
}

.btn-logout {
    color: #13294b;
    border-color: #13294b;
    background: transparent;
}

.btn-logout:hover,
.btn-logout:focus {
    background-color: #13294b;
    color: #fff;
}

/* ── Login button ────────────────────────────────────────────── */
.btn-login {
    background-color: #13294b;
    border-color: #13294b;
    color: #fff;
}

.btn-login:hover,
.btn-login:focus {
    background-color: #0e1f38;
    border-color: #0e1f38;
    color: #fff;
}

/* ── Chat input ──────────────────────────────────────────────── */
#chat-input {
    max-height: 150px;
    overflow-y: auto;
    resize: none;
}

/* ── File attachment UI ──────────────────────────────────────── */
.attach-btn {
    background: none;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    color: #6c757d;
    padding: 0.25rem 0.5rem;
    font-size: 1.1rem;
    line-height: 1;
    align-self: stretch;
    display: flex;
    align-items: center;
}
.attach-btn:hover,
.attach-btn:focus {
    background-color: #f8f9fa;
    color: #13294b;
    border-color: #13294b;
}

.attach-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background-color: #13294b;
    color: #fff;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
    max-width: min(280px, 100%);
}
.attach-chip .chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.attach-chip .chip-remove {
    background: none;
    border: none;
    color: #fff;
    padding: 0;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.attach-chip .chip-remove:hover {
    color: #ffcdd2;
}
.attach-thumb {
    width: 20px;
    height: 20px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
}

.chat-input-bar.drag-over #chat-input {
    border-color: #13294b;
    box-shadow: 0 0 0 0.2rem rgba(19, 41, 75, 0.25);
}

/* Inline image in user bubble */
.bubble-img {
    max-width: min(220px, 100%);
    max-height: 160px;
    border-radius: 6px;
    display: block;
    margin-bottom: 0.3rem;
}

/* ── HuggingFace README ──────────────────────────────────────── */
.hf-readme-content img {
    max-width: 100%;
    height: auto;
    display: block;
}
.hf-readme-content pre,
.hf-readme-content code {
    max-width: 100%;
    white-space: pre-wrap;
    word-break: break-all;
    overflow-wrap: break-word;
}

/* ── Announcement banner ─────────────────────────────────────── */
.announcement-banner {
    position: relative;
    text-align: center;
    padding: 0.75rem 3rem;
    margin: 1rem auto;
    font-size: 1.5rem;
    border: 2px solid;
    border-radius: 0.375rem;
}
@media (max-width: 767.98px) {
    .announcement-banner {
        padding: 0.5rem 2.5rem;
        margin: 0.5rem;
        font-size: 1rem;
    }
}
.announcement-dismiss {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    padding: 0.25rem 0.5rem;
}
.announcement-dismiss:hover,
.announcement-dismiss:focus {
    opacity: 1;
    outline: 2px solid currentColor;
    border-radius: 0.25rem;
}

/* ── Toolbar search inputs ───────────────────────────────────── */
/* Fill the toolbar row on phones; fixed width from sm up. */
.search-input {
    width: 100%;
}
@media (min-width: 576px) {
    .search-input {
        width: 220px;
    }
    .search-input.search-input-narrow {
        width: 200px;
    }
}

/* ── Tables ──────────────────────────────────────────────────── */
/* Contain absolutely positioned descendants (e.g. .visually-hidden header
   labels) so they cannot widen the page past the scroll box. */
.table-responsive {
    position: relative;
}
/* Edge-to-edge tables in cards: the card border closes the table, so the last
   row's border would draw a second line inside the scroll box. */
.card-body.p-0 > .table-responsive > .table > :last-child > tr:last-child > * {
    border-bottom-width: 0;
}

/* ── Usage charts and heatmap ────────────────────────────────── */
/* Chart.js fills this box (maintainAspectRatio: false): a fixed height on
   phones, Chart.js's default 2:1 shape from md up. */
.chart-box {
    position: relative;
    height: 220px;
}
@media (min-width: 768px) {
    .chart-box {
        height: auto;
        aspect-ratio: 2;
    }
}
/* The heatmap scrolls inside its card; the day column stays in view. */
#heatmap-container {
    scroll-padding-left: 2.5rem;
}
#heatmap-table tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bs-body-bg, #fff);
}
/* Below lg the heatmap card is narrow: keep cells big enough to tap and
   scroll the grid instead of squeezing it. */
@media (max-width: 991.98px) {
    #heatmap-table td {
        min-width: 1.5rem;
    }
}
#heatmap-table td:focus-visible {
    outline: 2px solid #000;
    outline-offset: -2px;
}

/* ── Misc ────────────────────────────────────────────────────── */
.font-monospace {
    font-family: var(--bs-font-monospace);
}

/* ── Graylist consent popover ────────────────────────────────── */
.popover-warning { border-color: var(--bs-warning) !important; }
.popover-warning .popover-header { background-color: var(--bs-warning-bg-subtle); border-bottom-color: var(--bs-warning); }

/* ── Bordered tables in scroll wrappers ──────────────────────── */
/* A table-bordered table's collapsed outer border makes it ~1px taller than
   its .table-responsive container, which clips the bottom border line and
   shows a stray vertical scrollbar; give the wrapper that pixel back. */
.table-responsive { padding-bottom: 1px; }