/* ─────────────────────────────────────────────────────────────────────
   Compass — polished chat UI
   Inspired by the warm dark palette of Claude with Compass copper accents.
   Heavily overrides Chainlit's default Tailwind styling via !important.
   ───────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* ── Warm dark palette ─────────────────────────────────────────────── */
    --bg-base:        #1a1817;            /* page background — warm near-black */
    --bg-surface:     #211e1c;            /* message-area, cards */
    --bg-surface-2:   #2a2624;            /* tool-call cards, popovers */
    --bg-elevated:    #322d29;            /* hover states */

    --border-subtle:  rgba(212, 146, 95, 0.08);
    --border:         rgba(212, 146, 95, 0.16);
    --border-strong:  rgba(212, 146, 95, 0.30);

    --text:           #f5f0e6;            /* primary text — warm off-white */
    --text-secondary: rgba(245, 240, 230, 0.72);
    --text-muted:     rgba(245, 240, 230, 0.48);
    --text-disabled:  rgba(245, 240, 230, 0.28);

    --accent:         #d4925f;            /* refined copper */
    --accent-bright:  #ffd29a;            /* highlight gold */
    --accent-soft:    rgba(255, 210, 154, 0.10);
    --accent-glow:    rgba(255, 210, 154, 0.20);

    --success:        #6e9f78;
    --success-soft:   rgba(110, 159, 120, 0.12);
    --warning:        #d4a25f;
    --warning-soft:   rgba(212, 162, 95, 0.12);
    --danger:         #c87060;
    --danger-soft:    rgba(200, 112, 96, 0.12);

    --radius-sm:      6px;
    --radius:         10px;
    --radius-lg:      14px;
    --radius-xl:      20px;

    --shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.22);
    --shadow:         0 6px 18px rgba(0, 0, 0, 0.32);
    --shadow-lg:      0 14px 36px rgba(0, 0, 0, 0.42);

    --font-ui:        'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
    --font-mono:      'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

    --duration-fast:  120ms;
    --duration:       200ms;
    --duration-slow:  320ms;
    --ease:           cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Base typography + page ───────────────────────────────────────────── */
html, body, #root {
    background: var(--bg-base) !important;
    color: var(--text) !important;
    font-family: var(--font-ui) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'cv02', 'cv11', 'ss01';
    -webkit-tap-highlight-color: transparent;
    /* No rubber-band overscroll on iOS — the page should feel locked, not webby. */
    overscroll-behavior: none;
    /* Reach under the iOS status bar / Android nav bar */
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
             env(safe-area-inset-bottom) env(safe-area-inset-left);
    box-sizing: border-box;
}

/* Make the chat area itself momentum-scrolling on iOS */
[class*="message-list"],
[class*="MessageList"],
.cl-chat-container,
main, [role="main"] {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
}

/* When the chat is installed as a PWA, hide any "open in browser" affordances */
@media (display-mode: standalone) {
    [class*="install-banner"],
    [class*="browser-warning"] {
        display: none !important;
    }
}

/* ── Hide every form of Chainlit branding ─────────────────────────────── */
a[href*="chainlit.io"],
a[href*="chainlit.com"],
a[href*="github.com/Chainlit"],
[class*="watermark"],
[class*="Watermark"],
[data-testid*="watermark"],
footer:has(a[href*="chainlit"]),
.chainlit-watermark,
img[src*="chainlit"i],
img[alt*="chainlit"i],
[aria-label*="chainlit"i] {
    display: none !important;
    visibility: hidden !important;
}

/* Hide Chainlit's empty-state default logo (we render our own below) */
[class*="welcome-screen"] svg:not([class*="copy"]):not([class*="check"]),
[class*="welcome-screen"] > div > img,
[class*="empty"] svg[class*="logo"],
.cl-empty-state img,
.cl-empty-state svg,
[data-empty-state] img,
[data-empty-state] svg {
    display: none !important;
}

/* ── Empty state / welcome screen ─────────────────────────────────────── */
.welcome-screen,
[class*="welcome-screen"] {
    padding-top: 1.5rem !important;
}

/* Replace Chainlit's hero block with our own Compass mark + tagline */
.welcome-screen::before,
[class*="welcome-screen"]::before {
    content: "Compass";
    display: block;
    text-align: center;
    color: var(--accent-bright);
    font-family: var(--font-ui);
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    margin: 0.5rem 0 0.4rem;
    background: linear-gradient(135deg, #ffd29a 0%, #d4925f 60%, #c9722c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.welcome-screen::after,
[class*="welcome-screen"]::after {
    content: "Underwriting intelligence for Apex MCA Holdings";
    display: block;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    margin-bottom: 1.8rem;
}

/* Any element that smells like brand text — hide it */
[class*="brand"],
[class*="Brand"],
[id*="brand"],
[id*="Brand"] {
    display: none !important;
}

/* ── Header — iOS-style frosted glass ────────────────────────────────── */
header,
[class*="header"]:not([class*="cardHeader"]):not([class*="messageHeader"]) {
    background: rgba(26, 24, 23, 0.78) !important;
    backdrop-filter: saturate(180%) blur(24px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(24px) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

/* ── Sidebar (conversation history) ──────────────────────────────────── */
.cl-sidebar,
[class*="Sidebar"],
[class*="sidebar"]:not([class*="message"]) {
    background: var(--bg-surface) !important;
    border-right: 1px solid var(--border-subtle) !important;
}

/* Thread / conversation entries in the sidebar */
[class*="thread-item"],
[class*="ThreadItem"],
.cl-sidebar a,
.cl-sidebar [role="button"] {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius) !important;
    padding: 0.55rem 0.7rem !important;
    margin: 0.15rem 0.4rem !important;
    color: var(--text-secondary) !important;
    font-size: 0.88rem !important;
    line-height: 1.35 !important;
    transition: all var(--duration) var(--ease) !important;
    cursor: pointer !important;
    text-decoration: none !important;
}
[class*="thread-item"]:hover,
.cl-sidebar a:hover,
.cl-sidebar [role="button"]:hover {
    background: var(--accent-soft) !important;
    color: var(--text) !important;
}
[class*="thread-item"][aria-selected="true"],
[class*="thread-item"][data-active="true"],
.cl-sidebar a.active {
    background: var(--accent-soft) !important;
    border-color: var(--border) !important;
    color: var(--accent-bright) !important;
}

/* "New chat" button (sidebar top) */
[aria-label*="new chat" i],
[aria-label*="New Chat" i],
button[class*="new-thread"],
button[class*="NewThread"] {
    background: var(--accent) !important;
    color: #1a1817 !important;
    font-weight: 600 !important;
    border-radius: var(--radius) !important;
    padding: 0.5rem 0.8rem !important;
    border: none !important;
    transition: all var(--duration) var(--ease) !important;
}
[aria-label*="new chat" i]:hover,
button[class*="new-thread"]:hover {
    background: var(--accent-bright) !important;
    transform: translateY(-1px) !important;
}

/* ── Message list / chat container ────────────────────────────────────── */
[class*="message-list"],
[class*="MessageList"],
.cl-chat-container {
    background: var(--bg-base) !important;
}

/* ── User messages (right side) ───────────────────────────────────────── */
[class*="user-message"],
.cl-message[data-author="user"],
.cl-step[data-role="user"] {
    background: transparent !important;
}

[class*="user-message"] [class*="bubble"],
.cl-message[data-author="user"] .cl-message-content,
.message-bubble--user {
    background: var(--bg-surface-2) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    padding: 0.65rem 1rem !important;
    color: var(--text) !important;
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    max-width: 78% !important;
    box-shadow: var(--shadow-sm) !important;
}

/* ── Assistant messages (full width, flows like a doc) ────────────────── */
.cl-message[data-author="assistant"],
.cl-step:not([data-role="user"]) {
    background: transparent !important;
}

.cl-message-content {
    color: var(--text) !important;
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
    letter-spacing: -0.005em !important;
}

.cl-message-content p {
    margin: 0.6rem 0 !important;
}

.cl-message-content p:first-child { margin-top: 0 !important; }
.cl-message-content p:last-child { margin-bottom: 0 !important; }

/* ── Headings inside messages ─────────────────────────────────────────── */
.cl-message-content h1 {
    font-size: 1.55rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    margin: 1.3rem 0 0.5rem !important;
    color: var(--text) !important;
}
.cl-message-content h2 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    margin: 1.1rem 0 0.45rem !important;
    color: var(--text) !important;
}
.cl-message-content h3 {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    margin: 1.2rem 0 0.4rem !important;
}
.cl-message-content h4 {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    margin: 0.8rem 0 0.3rem !important;
    color: var(--text) !important;
}

/* ── Horizontal rule as a section divider ─────────────────────────────── */
.cl-message-content hr {
    border: none !important;
    border-top: 1px solid var(--border-subtle) !important;
    margin: 1rem 0 !important;
}

/* ── Strong / em / links ──────────────────────────────────────────────── */
.cl-message-content strong, .cl-message-content b {
    color: var(--accent-bright) !important;
    font-weight: 600 !important;
}
.cl-message-content em, .cl-message-content i {
    color: var(--text-secondary) !important;
    font-style: italic !important;
}
.cl-message-content a {
    color: var(--accent) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--border-strong) !important;
    text-underline-offset: 3px !important;
    transition: color var(--duration-fast) var(--ease) !important;
}
.cl-message-content a:hover {
    color: var(--accent-bright) !important;
    text-decoration-color: var(--accent) !important;
}

/* ── Lists ────────────────────────────────────────────────────────────── */
.cl-message-content ul, .cl-message-content ol {
    margin: 0.5rem 0 !important;
    padding-left: 1.25rem !important;
}
.cl-message-content li {
    margin: 0.25rem 0 !important;
    padding-left: 0.2rem !important;
}
.cl-message-content ul > li::marker {
    color: var(--accent) !important;
}
.cl-message-content ol > li::marker {
    color: var(--text-muted) !important;
    font-weight: 600 !important;
}

/* ── Blockquotes ──────────────────────────────────────────────────────── */
.cl-message-content blockquote {
    border-left: 3px solid var(--accent) !important;
    background: var(--accent-soft) !important;
    padding: 0.6rem 0.9rem !important;
    margin: 0.7rem 0 !important;
    color: var(--text-secondary) !important;
    border-radius: 0 var(--radius) var(--radius) 0 !important;
    font-style: normal !important;
}
.cl-message-content blockquote p { margin: 0 !important; }

/* ── Tables — spec-sheet style ────────────────────────────────────────── */
.cl-message-content table {
    border-collapse: collapse !important;
    margin: 0.7rem 0 0.9rem !important;
    width: 100% !important;
    font-size: 0.9rem !important;
    background: var(--bg-surface) !important;
    border-radius: var(--radius) !important;
    overflow: hidden !important;
    border: 1px solid var(--border-subtle) !important;
}
.cl-message-content table th {
    background: rgba(255, 210, 154, 0.04) !important;
    color: var(--text-muted) !important;
    font-weight: 600 !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 0.55rem 0.9rem !important;
    text-align: left !important;
    border-bottom: 1px solid var(--border) !important;
}
.cl-message-content table td {
    padding: 0.55rem 0.9rem !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    color: var(--text) !important;
    vertical-align: top !important;
}
.cl-message-content table tr:last-child td { border-bottom: none !important; }
.cl-message-content table tr:hover td {
    background: rgba(255, 210, 154, 0.025) !important;
}

/* ── Code blocks ──────────────────────────────────────────────────────── */
.cl-message-content code {
    background: rgba(255, 210, 154, 0.06) !important;
    color: var(--accent-bright) !important;
    padding: 0.1rem 0.4rem !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.82em !important;
    border: 1px solid var(--border-subtle) !important;
}

.cl-message-content pre {
    background: #15110f !important;
    border-radius: var(--radius) !important;
    padding: 0.85rem 1rem !important;
    border: 1px solid var(--border-subtle) !important;
    overflow-x: auto !important;
    margin: 0.7rem 0 !important;
    position: relative !important;
    box-shadow: var(--shadow-sm) !important;
}

.cl-message-content pre code {
    background: transparent !important;
    color: var(--text) !important;
    padding: 0 !important;
    border: none !important;
    font-size: 0.84em !important;
    line-height: 1.55 !important;
}

/* ── Tool-call (step) cards ───────────────────────────────────────────── */
.cl-step,
[class*="step-container"] {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius) !important;
    padding: 0.55rem 0.85rem !important;
    margin: 0.4rem 0 !important;
    font-size: 0.86rem !important;
    transition: all var(--duration) var(--ease) !important;
    opacity: 0.85 !important;
}
.cl-step:hover {
    background: var(--bg-surface-2) !important;
    border-color: var(--border) !important;
    opacity: 1 !important;
}

.cl-step summary,
[class*="step-summary"] {
    color: var(--text-secondary) !important;
    cursor: pointer !important;
    font-weight: 500 !important;
}

/* ── Starter-question buttons (action buttons) ────────────────────────── */
.cl-action-button,
[data-action] {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 0.7rem 1rem !important;
    font-size: 0.88rem !important;
    color: var(--text) !important;
    margin: 0.3rem !important;
    transition: all var(--duration) var(--ease) !important;
    cursor: pointer !important;
    font-family: var(--font-ui) !important;
    line-height: 1.4 !important;
    text-align: left !important;
    box-shadow: var(--shadow-sm) !important;
}
.cl-action-button:hover,
[data-action]:hover {
    background: var(--bg-surface-2) !important;
    border-color: var(--border-strong) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow) !important;
    color: var(--accent-bright) !important;
}
.cl-action-button:active,
[data-action]:active {
    transform: translateY(0) !important;
}

/* ── Composer / input box — iOS-native sticky bottom bar ──────────────── */
[data-testid="message-composer"],
[data-testid="chat-input"],
.cl-input {
    background: rgba(33, 30, 28, 0.85) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow) !important;
    transition: border-color var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease) !important;
    /* Keep clear of the iOS home indicator */
    margin-bottom: max(0px, env(safe-area-inset-bottom, 0px)) !important;
}

[data-testid="message-composer"]:focus-within,
[data-testid="chat-input"]:focus-within,
.cl-input:focus-within {
    border-color: var(--border-strong) !important;
    box-shadow: var(--shadow), 0 0 0 3px var(--accent-soft) !important;
}

[data-testid="message-composer"] textarea,
[data-testid="chat-input"] textarea {
    color: var(--text) !important;
    font-family: var(--font-ui) !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    background: transparent !important;
}
[data-testid="message-composer"] textarea::placeholder,
[data-testid="chat-input"] textarea::placeholder {
    color: var(--text-muted) !important;
}

/* Send button */
button[type="submit"][aria-label*="send" i],
[data-testid="send-button"],
button[aria-label*="Send" i] {
    background: var(--accent) !important;
    color: #1a1817 !important;
    border: none !important;
    border-radius: 50% !important;
    transition: all var(--duration) var(--ease) !important;
}
button[type="submit"][aria-label*="send" i]:hover,
[data-testid="send-button"]:hover {
    background: var(--accent-bright) !important;
    transform: scale(1.05) !important;
}

/* ── Avatars (assistant) ──────────────────────────────────────────────── */
[class*="avatar"] img,
.cl-avatar img {
    border-radius: var(--radius) !important;
    background: var(--bg-surface-2) !important;
    padding: 2px !important;
}

/* ── Plotly inline charts ─────────────────────────────────────────────── */
.js-plotly-plot {
    border-radius: var(--radius) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--border-subtle) !important;
    background: var(--bg-surface) !important;
    margin: 0.5rem 0 !important;
    max-width: 100% !important;
}

/* ── Smooth fade-in for new messages ──────────────────────────────────── */
@keyframes message-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cl-message,
[class*="message-container"]:not([class*="user"]) {
    animation: message-in var(--duration-slow) var(--ease) !important;
}

/* ── Scrollbar ────────────────────────────────────────────────────────── */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ── Selection ────────────────────────────────────────────────────────── */
::selection {
    background: var(--accent-glow);
    color: var(--text);
}

/* ─── Mobile (≤640px) ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .welcome-screen::before,
    [class*="welcome-screen"]::before {
        font-size: 2.25rem !important;
    }
    .welcome-screen::after,
    [class*="welcome-screen"]::after {
        font-size: 0.85rem !important;
        padding: 0 1rem !important;
    }

    /* Tighter message padding */
    .cl-message-content {
        padding: 0.5rem 0.6rem !important;
        font-size: 0.92rem !important;
    }

    [class*="user-message"] [class*="bubble"],
    .cl-message[data-author="user"] .cl-message-content,
    .message-bubble--user {
        max-width: 88% !important;
        font-size: 0.92rem !important;
    }

    .cl-message-content h2 {
        font-size: 1.1rem !important;
        margin: 0.8rem 0 0.35rem !important;
    }
    .cl-message-content h3 {
        font-size: 0.7rem !important;
        margin: 0.8rem 0 0.3rem !important;
    }

    /* Tables: allow horizontal scroll, keep them readable */
    .cl-message-content {
        overflow-x: auto !important;
    }
    .cl-message-content table {
        font-size: 0.78rem !important;
        min-width: max-content !important;
    }
    .cl-message-content table th {
        padding: 0.35rem 0.6rem !important;
        font-size: 0.66rem !important;
    }
    .cl-message-content table td {
        padding: 0.35rem 0.6rem !important;
        white-space: nowrap !important;
    }

    /* Plotly: responsive height */
    .js-plotly-plot,
    .plotly,
    .plot-container {
        max-width: 100vw !important;
        max-height: 280px !important;
    }

    .cl-step {
        opacity: 0.55 !important;
        font-size: 0.78rem !important;
        padding: 0.45rem 0.7rem !important;
    }

    /* Composer — bigger touch target */
    [data-testid="message-composer"] textarea,
    [data-testid="chat-input"] textarea {
        font-size: 16px !important;  /* prevents iOS zoom on focus */
        min-height: 44px !important;
    }

    /* Starter buttons stack vertically + take full width */
    .cl-action-button,
    [data-action] {
        display: block !important;
        width: 100% !important;
        margin: 0.25rem 0 !important;
        text-align: left !important;
        padding: 0.65rem 0.85rem !important;
    }

    .cl-message-content pre {
        font-size: 0.72rem !important;
        padding: 0.55rem 0.7rem !important;
        overflow-x: auto !important;
    }

    .cl-sidebar { max-width: 240px !important; }
}

/* ─── Very small phones (≤380 px) ─────────────────────────────────────── */
@media (max-width: 380px) {
    .welcome-screen::before,
    [class*="welcome-screen"]::before {
        font-size: 2rem !important;
    }
    .cl-message-content table { font-size: 0.72rem !important; }
    .cl-message-content h2 { font-size: 1.02rem !important; }
    .js-plotly-plot { max-height: 240px !important; }
}