/* SPDX-License-Identifier: AGPL-3.0-or-later */
/* Copyright (C) 2026 William Johnason / axoviq.com */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #0b0d18;
    color: #e2e8f0;
    height: 100dvh;
    overflow: hidden;
}

#root { display: flex; height: 100dvh; width: 100%; }

/* ─── Two-panel layout ─────────────────────────── */
.app-layout { display: flex; width: 100%; height: 100%; }

/* ─── Sidebar ──────────────────────────────────── */
.sidebar {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-right: 1px solid rgba(124, 58, 237, 0.18);
    background-color: #07080f;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    overflow: hidden;
    position: relative;
}

/* Dark overlay so text stays readable over the sidebar background image */
.sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(7, 8, 15, 0.72);
    pointer-events: none;
    z-index: 0;
}

.sidebar > * { position: relative; z-index: 1; }

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 1.2rem 1rem 0.9rem;
}

.sidebar-brand {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    background: linear-gradient(90deg, #c084fc 0%, #818cf8 55%, #60a5fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.new-run-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0.75rem 1rem;
    padding: 0.55rem 1rem;
    background: #7c3aed;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    width: calc(100% - 1.5rem);
    justify-content: center;
}

.new-run-btn:hover { background: #6d28d9; }

.new-run-plus {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1;
}

.sidebar-section-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    padding: 0 1rem 0.4rem;
}

.sidebar-history {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: #2d3748 transparent;
}

.history-list { list-style: none; padding: 0; }

.history-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 0.5rem 0.9rem;
    border-radius: 7px;
    margin: 0 0.4rem;
    cursor: pointer;
    transition: background 0.12s;
}

.history-item:hover { background: rgba(124, 58, 237, 0.15); }
.history-item-active { background: rgba(124, 58, 237, 0.28) !important; }

.history-icon {
    color: #64748b;
    flex-shrink: 0;
    margin-top: 1px;
}

.history-item-active .history-icon { color: #a78bfa; }

.history-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.history-question {
    font-size: 0.82rem;
    color: #cbd5e1;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.history-item-active .history-question { color: #e2e8f0; }

.history-time {
    font-size: 0.7rem;
    color: #475569;
}

.sidebar-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(124, 58, 237, 0.15);
    background: rgba(0, 0, 0, 0.25);
}

.sidebar-github {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #64748b;
    text-decoration: none;
    font-size: 0.75rem;
    transition: color 0.15s;
    flex-shrink: 0;
}
.sidebar-github:hover { color: #94a3b8; }

.sidebar-wiki-name {
    flex: 1;
    font-size: 0.72rem;
    color: #475569;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sidebar-dot-ok { background: #22c55e; }
.sidebar-dot-connecting { background: #f59e0b; animation: pulse-dot 1.5s ease-in-out infinite; }

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ─── Main panel ───────────────────────────────── */
.main-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    min-width: 0;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

.error-banner-top {
    padding: 0.5rem 1.25rem;
    background: rgba(248, 113, 113, 0.1);
    border-bottom: 1px solid #ef4444;
    font-size: 0.85rem;
    color: #f87171;
}

/* ─── Chat window ──────────────────────────────── */
.chat-window { display: flex; flex-direction: column; flex: 1; height: 100%; overflow: hidden; }

.messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: #2d3748 transparent;
    background: rgba(11, 13, 24, 0.68);
}

/* ─── Hero (empty state) ───────────────────────── */
.hero {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100%;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

/* Gradient overlay: transparent at top, dark at bottom so text is readable */
.hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(11, 13, 24, 0.1) 0%,
        rgba(11, 13, 24, 0.3) 40%,
        rgba(11, 13, 24, 0.75) 65%,
        rgba(11, 13, 24, 0.95) 85%,
        #0b0d18 100%
    );
}

.hero-content {
    position: relative;
    z-index: 1;
    padding: 2rem 2.5rem 1.5rem;
}

.hero-mode-badge {
    display: inline-block;
    background: rgba(124, 58, 237, 0.55);
    border: 1px solid rgba(167, 139, 250, 0.4);
    color: #c4b5fd;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 0.2rem 0.65rem;
    border-radius: 4px;
    margin-bottom: 0.75rem;
    backdrop-filter: blur(4px);
}

.hero-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #f1f5f9;
    line-height: 1.1;
    margin-bottom: 0.75rem;
    text-shadow: 0 2px 20px rgba(124, 58, 237, 0.4);
}

.hero-subtitle {
    font-size: 0.92rem;
    color: #94a3b8;
    line-height: 1.6;
    max-width: 580px;
    margin-bottom: 1.5rem;
}

.hero-features {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(30, 37, 51, 0.6);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    flex: 1;
    min-width: 180px;
    max-width: 260px;
    backdrop-filter: blur(6px);
}

.hero-feature-icon {
    color: #7c3aed;
    flex-shrink: 0;
    margin-top: 1px;
}

.hero-feature-text strong {
    display: block;
    font-size: 0.88rem;
    color: #e2e8f0;
    margin-bottom: 3px;
}

.hero-feature-text p {
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.45;
    margin: 0;
}

/* ─── Input dock ───────────────────────────────── */
.input-dock {
    padding: 0.6rem 1.25rem 0.85rem;
    border-top: 1px solid #1a1f2e;
    background: rgba(11, 13, 24, 0.97);
}

.hint-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
.hint-chip {
    background: #151b2a;
    border: 1px solid #2d3748;
    color: #94a3b8;
    font-size: 0.8rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.hint-chip:hover { background: #1e2533; border-color: #7c3aed; color: #e2e8f0; }

.input-options { display: flex; align-items: center; padding: 0.2rem 0 0.3rem; }
.bypass-cache-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: #475569;
    cursor: pointer;
    user-select: none;
}
.bypass-cache-label input[type="checkbox"] { cursor: pointer; accent-color: #7c3aed; }

.input-row { display: flex; gap: 0.5rem; }
.query-input {
    flex: 1;
    background: #141826;
    border: 1px solid #2d3748;
    color: #e2e8f0;
    border-radius: 10px;
    padding: 0.6rem 0.85rem;
    font-size: 0.95rem;
    resize: none;
    font-family: inherit;
    transition: border-color 0.15s;
}
.query-input:focus { outline: none; border-color: #7c3aed; }
.query-input:disabled { opacity: 0.45; }

.send-btn {
    background: #7c3aed;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    min-width: 72px;
    transition: background 0.15s;
}
.send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.send-btn:hover:not(:disabled) { background: #6d28d9; }

.input-tip {
    margin-top: 0.45rem;
    font-size: 0.73rem;
    color: #475569;
    text-align: center;
}

.error-banner { color: #f87171; font-size: 0.85rem; padding: 0.4rem 1.25rem; }

/* ─── Message bubbles ──────────────────────────── */
.messages-list {
    padding: 1rem 1.25rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bubble { max-width: 82%; padding: 0.65rem 0.95rem; border-radius: 12px; line-height: 1.55; }
.bubble-user { background: #7c3aed; color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.bubble-assistant { background: #141826; color: #e2e8f0; align-self: flex-start; border-bottom-left-radius: 4px; max-width: 100%; }
.bubble-text { white-space: pre-wrap; word-break: break-word; }

/* Markdown prose styles (assistant bubbles only) */
.bubble-md { word-break: break-word; }
.bubble-md p { margin: 0.4rem 0; }
.bubble-md p:first-child { margin-top: 0; }
.bubble-md p:last-child { margin-bottom: 0; }
.bubble-md h1, .bubble-md h2, .bubble-md h3 { margin: 0.75rem 0 0.25rem; font-weight: 600; }
.bubble-md h1 { font-size: 1.1rem; }
.bubble-md h2 { font-size: 1rem; }
.bubble-md h3 { font-size: 0.95rem; }
.bubble-md ul, .bubble-md ol { margin: 0.3rem 0 0.3rem 1.4rem; }
.bubble-md li { margin: 0.15rem 0; }
.bubble-md code { background: #0b0d18; border-radius: 4px; padding: 0.1em 0.35em; font-size: 0.85em; font-family: "Fira Code", "Cascadia Code", monospace; }
.bubble-md pre { background: #0b0d18; border-radius: 6px; padding: 0.7rem 0.9rem; overflow-x: auto; margin: 0.5rem 0; }
.bubble-md pre code { background: none; padding: 0; font-size: 0.82rem; }
.bubble-md blockquote { border-left: 3px solid #374151; padding-left: 0.75rem; color: #94a3b8; margin: 0.4rem 0; }
.bubble-md hr { border: none; border-top: 1px solid #2d3748; margin: 0.5rem 0; }
.bubble-md table { border-collapse: collapse; width: 100%; margin: 0.5rem 0; font-size: 0.88rem; }
.bubble-md th, .bubble-md td { border: 1px solid #374151; padding: 0.35rem 0.65rem; text-align: left; }
.bubble-md th { background: #2d3748; font-weight: 600; }
.bubble-md tr:nth-child(even) td { background: #10131f; }

.bubble-citations { font-size: 0.78rem; margin-top: 0.4rem; color: #64748b; }

/* ─── Knowledge Gap callout ────────────────────── */
.bubble-gap-callout { margin-top: 0.75rem; border-left: 3px solid #f59e0b; background: #16130a; border-radius: 0 6px 6px 0; padding: 0.65rem 0.8rem; font-size: 0.82rem; }
.bubble-gap-callout .gap-title { font-weight: 600; color: #f59e0b; margin-bottom: 0.4rem; }
.bubble-gap-callout .gap-text { color: #cbd5e1; margin-bottom: 0.5rem; }
.bubble-gap-callout .gap-section { color: #94a3b8; margin: 0.3rem 0; }
.bubble-gap-callout .gap-section code { background: #0b0d18; border-radius: 3px; padding: 0.1em 0.3em; font-size: 0.85em; font-family: "Fira Code", "Cascadia Code", monospace; }
.bubble-gap-callout .gap-pre-wrap { position: relative; margin: 0.4rem 0; }
.bubble-gap-callout .gap-pre { background: #0b0d18; border-radius: 6px; padding: 0.6rem 0.8rem; overflow-x: auto; font-family: "Fira Code", "Cascadia Code", monospace; font-size: 0.80rem; color: #a5f3fc; white-space: pre; line-height: 1.6; }
.bubble-gap-callout .gap-copy-btn { position: absolute; top: 0.35rem; right: 0.4rem; background: #2d3748; border: none; color: #94a3b8; font-size: 0.72rem; padding: 0.15rem 0.5rem; border-radius: 4px; cursor: pointer; transition: background 0.15s; }
.bubble-gap-callout .gap-copy-btn:hover { background: #374151; color: #e2e8f0; }
.bubble-gap-callout .gap-footer { color: #64748b; font-size: 0.78rem; margin-top: 0.4rem; }

/* ─── Connecting state ─────────────────────────── */
.connecting { padding: 1rem 1.25rem; color: #64748b; font-size: 0.9rem; }
