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

/* ======================================================
   PAGE TRANSITIONS (View Transition API)
====================================================== */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    @keyframes slide-out {
        to { transform: translateX(-60px); opacity: 0; }
    }
    @keyframes slide-in {
        from { transform: translateX(60px); opacity: 0; }
    }

    /* Freeze the sidebar — it's identical across pages */
    .sidebar-wrapper {
        view-transition-name: sidebar;
    }

    /* Only the main content panel slides */
    .page-slide-in {
        view-transition-name: page-content;
    }

    ::view-transition-group(page-content) {
        animation-duration: 0.35s;
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    }
    ::view-transition-old(page-content) {
        animation-name: slide-out;
    }
    ::view-transition-new(page-content) {
        animation-name: slide-in;
    }

    /* Sidebar snapshot: no animation, just hold position */
    ::view-transition-old(sidebar),
    ::view-transition-new(sidebar) {
        animation: none;
    }
}

/* ======================================================
   ROOT TOKENS
====================================================== */
:root {
    --bg-color: #ffffff;
    --bg-secondary: #f9fafb;
    --sidebar-bg: #fafafa;
    --text-main: #111827;
    --text-muted: #6b7280;
    --border: rgba(0,0,0,0.08);
    --hover: rgba(0,0,0,0.04);
    --primary: #000000;
    --blue-glow: linear-gradient(160deg, rgba(219,234,254,0.55) 0%, rgba(248,249,250,0) 60%);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
    --radius-pill: 9999px;
    --radius-card: 16px;
}

.dark {
    --bg-color: #111113;
    --bg-secondary: #1a1a1d;
    --sidebar-bg: #161618;
    --text-main: #f0f0f1;
    --text-muted: #8a8a8f;
    --border: rgba(255,255,255,0.08);
    --hover: rgba(255,255,255,0.05);
    --primary: #ffffff;
    --blue-glow: linear-gradient(160deg, rgba(37,99,235,0.12) 0%, rgba(17,17,19,0) 60%);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
}

/* ======================================================
   BASE
====================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Manrope', sans-serif; }
body { background-color: var(--bg-color); color: var(--text-main); display: flex; height: 100vh; overflow: hidden; transition: background-color 0.3s ease, color 0.3s ease; }

::-webkit-scrollbar { width: 5px; background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 3px; }
.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); }

/* Prose / markdown */
.prose pre { background: #f1f5f9; padding: 1rem; border-radius: 0.5rem; border: 1px solid #e2e8f0; }
.dark .prose pre { background: #1e1e24; border: 1px solid rgba(255,255,255,0.08); }
.prose code { color: #2563eb; font-family: 'JetBrains Mono'; font-size: 0.9em; }
.dark .prose code { color: #93c5fd; }
.dark .prose { color: #d1d5db; }
.dark .prose h1, .dark .prose h2, .dark .prose h3, .dark .prose h4 { color: #f3f4f6; }
.dark .prose strong { color: #f3f4f6; }
.dark .prose a { color: #60a5fa; }
.dark .prose blockquote { border-left-color: rgba(255,255,255,0.15); color: #9ca3af; }
.dark .prose hr { border-color: rgba(255,255,255,0.08); }
.dark .prose ul > li::marker { color: #6b7280; }

/* ======================================================
   ANIMATIONS
====================================================== */
@keyframes initialPageLoad { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.page-load-anim { animation: initialPageLoad 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes floatUp { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes floatDown { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(20px); } }
.anim-float { animation: floatUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.anim-float-up { animation: floatUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.module-enter { animation: floatUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.anim-fade { animation: fadeIn 0.6s ease forwards; }
.anim-fade-in { animation: fadeIn 0.5s ease forwards; }

@keyframes msgSlideIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.msg-enter { animation: msgSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }

@keyframes libItemIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.lib-item-enter { animation: libItemIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* Main content slides in over the previous page on navigation.
   The sidebar is a sibling (z-index 50) and never animates — it stays constant. */
@keyframes slideInPage {
    from { opacity: 0.3; transform: translateX(36px); box-shadow: -16px 0 40px rgba(0,0,0,0.15); }
    to { opacity: 1; transform: translateX(0); box-shadow: 0 0 0 rgba(0,0,0,0); }
}
.page-slide-in {
    animation: slideInPage 0.99s cubic-bezier(0.16, 1, 0.3, 1) both;
    background-color: var(--bg-color);
    position: relative;
    z-index: 10;
}

@keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* Loading dots */
@keyframes bounce { 0%, 80%, 100% { transform: scale(0); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }
.loading-row { display: flex; align-items: flex-start; gap: 16px; max-width: 768px; width: 100%; margin: 0 auto; }
.loading-bubble { display: flex; gap: 5px; padding: 14px 18px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 20px; }
.loading-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); animation: bounce 1.4s infinite ease-in-out both; }
.loading-dot:nth-child(1) { animation-delay: -0.32s; }
.loading-dot:nth-child(2) { animation-delay: -0.16s; }

/* Rotating status phrase shown while the AI works. */
.loading-avatar { animation: loadingPulse 1.8s ease-in-out infinite; }
@keyframes loadingPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(139,92,246,0.0); }
    50% { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(139,92,246,0.10); }
}
.loading-status { display: flex; align-items: baseline; gap: 2px; padding-top: 8px; }
.loading-phrase {
    font-size: 14.5px; font-weight: 600; letter-spacing: .1px;
    background: linear-gradient(90deg, var(--text-muted) 30%, #8b5cf6 50%, var(--text-muted) 70%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: phraseShimmer 2.4s linear infinite, phraseIn .35s ease;
}
@keyframes phraseShimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@keyframes phraseIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }
.loading-ellipsis { display: inline-flex; gap: 2px; margin-left: 1px; }
.loading-ellipsis span {
    width: 3px; height: 3px; border-radius: 50%; background: #8b5cf6; align-self: flex-end; margin-bottom: 3px;
    animation: bounce 1.4s infinite ease-in-out both;
}
.loading-ellipsis span:nth-child(1) { animation-delay: -0.32s; }
.loading-ellipsis span:nth-child(2) { animation-delay: -0.16s; }
/* Spacing below the last message is driven dynamically from the input bar's
   real height (see frontend.js); this stays 0 so the two don't stack up. */
.scroll-bumper { height: 0; }

/* ======================================================
   SIDEBAR
====================================================== */
.sidebar-wrapper {
    height: 100%;
    background-color: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: width 0.25s cubic-bezier(0.16,1,0.3,1);
    z-index: 50;
    border-right: 1px solid var(--border);
}
.sidebar-expanded { width: 256px; }
.sidebar-collapsed { width: 58px; }

.sidebar-header {
    height: 52px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    flex-shrink: 0;
    gap: 8px;
}
.sidebar-logo-group {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    color: var(--text-main);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.025em;
    flex: 1;
}
.sidebar-toggle-btn {
    padding: 6px;
    color: var(--text-muted);
    border-radius: 6px;
    transition: background 0.2s, color 0.2s;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sidebar-toggle-btn:hover { background: var(--hover); color: var(--text-main); }

.sidebar-top-nav { padding: 6px 10px 4px; display: flex; flex-direction: column; gap: 2px; }
.sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    width: 100%;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    border: 1px solid transparent;
    background: transparent;
    text-align: left;
    font-weight: 500;
}
.sidebar-item:hover { background: var(--hover); color: var(--text-main); }
.sidebar-item.active { background: var(--hover); color: var(--text-main); font-weight: 600; }
.sidebar-item-icon { width: 15px; height: 15px; opacity: 0.75; flex-shrink: 0; }

.sidebar-new-chat {
    background: var(--hover);
    color: var(--text-main);
    border-color: var(--border);
    margin-bottom: 6px;
    font-weight: 600;
}
.sidebar-new-chat:hover { background: rgba(0,0,0,0.07); }
.dark .sidebar-new-chat:hover { background: rgba(255,255,255,0.08); }

.sidebar-recents-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.sidebar-recents-area::-webkit-scrollbar { display: none; }

/* Pinned + Recents live inside ONE scroll region so the whole list scrolls
   together — the Pinned section is no longer a separate frozen pane. */
.sidebar-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.sidebar-scroll::-webkit-scrollbar { display: none; }
/* Inside the shared scroller the areas flow as normal blocks (no inner scroll). */
.sidebar-scroll .sidebar-recents-area { flex: 0 0 auto; overflow: visible; }
.sidebar-pinned-area { flex: 0 0 auto; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.sidebar-recents-header {
    padding: 8px 8px 5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.recent-chat-item {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 7px;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    font-weight: 500;
}
.recent-chat-item:hover { background: var(--hover); color: var(--text-main); }
.recent-chat-item.active { background: var(--hover); color: var(--text-main); font-weight: 600; }
.recent-chat-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sidebar-footer { padding: 10px; flex-shrink: 0; border-top: 1px solid var(--border); }
.profile-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 8px;
    transition: background 0.15s;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
}
.profile-btn:hover { background: var(--hover); }
.sidebar-collapsed .profile-btn { justify-content: center; padding: 7px; }
.profile-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: #ffffff;
    flex-shrink: 0;
    letter-spacing: 0.03em;
}

/* ======================================================
   CHAT WRAPPER & THEMES
====================================================== */
.chat-wrapper {
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: background-color 0.4s ease;
    overflow: hidden;
}
.theme-standard { background-color: var(--bg-color); }
.theme-incognito { background-color: #ebebed; }
.dark .theme-incognito { background-color: #18181b; }
.theme-premium { background: var(--blue-glow), var(--bg-color); }

/* ======================================================
   INCOGNITO BUTTON
====================================================== */
.incognito-btn-wrapper { position: absolute; top: 20px; right: 20px; z-index: 20; }
.btn-incognito {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    transition: all 0.25s cubic-bezier(0.2,0,0,1);
    cursor: pointer;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(10px);
    color: var(--text-muted);
}
.dark .btn-incognito { background: rgba(255,255,255,0.05); color: var(--text-muted); }
.btn-incognito:hover { color: var(--text-main); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-incognito.active { background: #1f2937; color: #ffffff; border-color: #374151; }
.dark .btn-incognito.active { background: #e5e7eb; color: #111827; border-color: #e5e7eb; }
.btn-incognito svg { width: 15px; height: 15px; }

/* ======================================================
   EMPTY STATE
====================================================== */
.chat-empty-state {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    z-index: 10;
    /* Pointer-events on children only */
}
.greeting-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 16px;
    /* End just above the centered input pill, shrinking as the pill grows upward. */
    min-height: calc(48vh - var(--input-h, 96px) / 2 - 16px);
    flex-shrink: 0;
}
.greeting-text {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 400;
    letter-spacing: -0.025em;
    text-align: center;
    padding: 0 16px;
    color: var(--text-main);
    line-height: 1.2;
}

/* Starters — pushed below the centered input */
.starter-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Start just below the centered input pill, dropping further as the pill grows. */
    padding: calc(var(--input-h, 96px) + 40px) 16px 80px;
    flex-shrink: 0;
}
.starter-container { width: 100%; max-width: 700px; display: flex; flex-direction: column; align-items: center; }
.starter-btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.btn-starter {
    padding: 9px 18px;
    background: var(--bg-color);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.2,0,0,1);
    box-shadow: var(--shadow-sm);
}
.btn-starter:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--text-main); border-color: rgba(0,0,0,0.15); }
.dark .btn-starter:hover { border-color: rgba(255,255,255,0.15); }
.btn-starter svg { width: 15px; height: 15px; }
/* Image-mode suggestion chips (shown in place of the normal starters). */
.image-suggest-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; max-width: 560px; margin: 0 auto; }
.image-suggest-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--card-bg, var(--hover)); color: var(--text-muted); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: transform .15s, box-shadow .15s, color .15s; }
.image-suggest-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--text-main); border-color: rgba(236,72,153,.4); }
.image-suggest-chip svg { width: 13px; height: 13px; flex-shrink: 0; }

.starter-card {
    width: 100%;
    background: var(--bg-color);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    margin-top: 12px;
    position: relative;
}
.starter-card-close {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 6px;
    color: var(--text-muted);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s;
    border: none;
    background: transparent;
}
.starter-card-close:hover { background: var(--hover); color: var(--text-main); }
.starter-card-header {
    padding: 14px 18px 8px;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}
.starter-card-btn {
    width: 100%;
    text-align: left;
    padding: 13px 18px;
    font-size: 14px;
    color: var(--text-main);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
    font-weight: 500;
}
.starter-card-btn:hover { background: var(--hover); }
.starter-card-btn:last-child { border-bottom: none; }

/* Business skill — topic picker grid shown before the user prompts. */
.business-topic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px 18px 16px;
}
.business-topic-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: transparent;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
    color: #475569;
}
.business-topic-btn:hover { border-color: #475569; background: var(--hover); transform: translateY(-1px); }
.business-topic-name { font-size: 14px; font-weight: 700; color: var(--text-main); }
.business-topic-desc { font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.business-topic-change {
    font-size: 11px;
    font-weight: 700;
    color: #2563eb;
    background: none;
    border: none;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
}
.business-topic-change:hover { text-decoration: underline; }

/* Incognito warning */
.incognito-warning {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 0.4;
    margin-top: 24px;
    color: var(--text-muted);
}
.incognito-warning svg { width: 56px; height: 56px; margin-bottom: 12px; }

/* ======================================================
   CHAT MESSAGES
====================================================== */
.chat-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 20;
    padding-bottom: calc(var(--input-h, 140px) + 100px);
}
@media (min-width: 768px) { .chat-scroll-area { padding: 32px; padding-bottom: calc(var(--input-h, 140px) + 100px); } }

.chat-message-row { display: flex; width: 100%; max-width: 768px; margin: 0 auto; }
.chat-message-row.user { justify-content: flex-end; }
.chat-message-row.ai { justify-content: flex-start; }

.ai-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 14px;
    margin-top: 4px;
    background: var(--bg-color);
    box-shadow: var(--shadow-sm);
}
.ai-avatar img { width: 20px; height: 20px; object-fit: contain; }

.message-content-wrapper { position: relative; max-width: 88%; text-align: left; display: flex; align-items: flex-start; gap: 8px; }
.chat-message-row.user .message-content-wrapper { flex-direction: row-reverse; }

.message-bubble { font-size: 15px; line-height: 1.65; display: inline-block; text-align: left; overflow: hidden; word-break: break-word; overflow-wrap: break-word; max-width: 100%; }
.message-bubble.user {
    background: var(--bg-secondary);
    color: var(--text-main);
    padding: 11px 18px;
    border-radius: 22px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}
.dark .message-bubble.user { background: #26262b; border-color: rgba(255,255,255,0.07); }
.theme-incognito .message-bubble.user { background: #d9d9dc; color: #111827; }
.dark .theme-incognito .message-bubble.user { background: #2a2a2e; }
.message-bubble.ai { color: var(--text-main); width: 100%; }

/* Markdown rendered inside an AI message. The Tailwind CDN ships its preflight
   reset but NOT the typography plugin, so the `prose` class on these bubbles is
   inert — headings, lists and paragraphs would otherwise render unstyled. These
   rules restore proper formatting for marked.js output. */
.message-bubble.ai > :first-child { margin-top: 0; }
.message-bubble.ai > :last-child { margin-bottom: 0; }
.message-bubble.ai p { margin: 0.7em 0; }
.message-bubble.ai h1,
.message-bubble.ai h2,
.message-bubble.ai h3,
.message-bubble.ai h4 { font-weight: 800; line-height: 1.25; margin: 1.2em 0 0.5em; }
.message-bubble.ai h1 { font-size: 1.55em; }
.message-bubble.ai h2 { font-size: 1.3em; }
.message-bubble.ai h3 { font-size: 1.13em; }
.message-bubble.ai h4 { font-size: 1em; }
.message-bubble.ai ul,
.message-bubble.ai ol { margin: 0.6em 0; padding-left: 1.5em; }
.message-bubble.ai ul { list-style: disc; }
.message-bubble.ai ol { list-style: decimal; }
.message-bubble.ai li { margin: 0.3em 0; }
.message-bubble.ai li > ul,
.message-bubble.ai li > ol { margin: 0.3em 0; }
.message-bubble.ai a { color: #2563eb; text-decoration: underline; }
.dark .message-bubble.ai a { color: #60a5fa; }
.message-bubble.ai strong { font-weight: 700; color: var(--text-main); }
.message-bubble.ai em { font-style: italic; }
.message-bubble.ai blockquote {
    border-left: 3px solid var(--border); padding-left: 14px;
    color: var(--text-muted); margin: 0.8em 0;
}
.message-bubble.ai hr { border: none; border-top: 1px solid var(--border); margin: 1.2em 0; }
.message-bubble.ai :not(pre) > code {
    background: var(--bg-secondary); padding: 2px 6px; border-radius: 6px;
    font-family: 'JetBrains Mono', monospace; font-size: 0.88em; color: #2563eb;
}
.dark .message-bubble.ai :not(pre) > code { color: #93c5fd; }
.message-bubble.ai table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: 14px; }
.message-bubble.ai th,
.message-bubble.ai td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; }
.message-bubble.ai th { background: var(--bg-secondary); font-weight: 700; }

/* Edit message */
.btn-edit-msg {
    opacity: 0;
    transition: opacity 0.15s;
    padding: 4px;
    border-radius: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-top: 8px;
}
.message-content-wrapper:hover .btn-edit-msg { opacity: 1; }
.btn-edit-msg:hover { background: var(--hover); color: var(--text-main); }
.btn-copy-prompt {
    opacity: 0;
    transition: opacity 0.15s;
    padding: 4px;
    border-radius: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-top: 8px;
}
.message-content-wrapper:hover .btn-copy-prompt { opacity: 1; }
.btn-copy-prompt:hover { background: var(--hover); color: var(--text-main); }

/* AI response action row (copy + redo) */
.ai-msg-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    opacity: 0;
    transition: opacity 0.15s;
}
.chat-message-row.ai:hover .ai-msg-actions { opacity: 1; }
.btn-ai-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg-color);
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    line-height: 1;
}
.btn-ai-action:hover { background: var(--hover); color: var(--text-main); border-color: rgba(0,0,0,0.15); }
.dark .btn-ai-action:hover { border-color: rgba(255,255,255,0.15); }

/* File attachment display in user messages */
.message-file-attach { margin-bottom: 8px; }
.message-image-preview {
    max-width: 260px;
    max-height: 200px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid var(--border);
    display: block;
}
.message-file-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    background: var(--hover);
    border: 1px solid var(--border);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    max-width: 240px;
    overflow: hidden;
}
.message-file-badge span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Artifacts & Files panel (top-right of chat area) */
.chat-art-panel-btn-wrap {
    position: absolute;
    top: 14px;
    right: 18px;
    z-index: 60;
}
.chat-art-panel-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    background: var(--bg-color);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.chat-art-panel-btn:hover, .chat-art-panel-btn.active {
    color: var(--text-main);
    border-color: rgba(59,130,246,0.4);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.08), var(--shadow-md);
}
.chat-art-panel-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 99px;
    background: #3b82f6;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}
.chat-art-panel-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 260px;
    background: var(--bg-color);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-lg);
    padding: 8px 0;
    z-index: 200;
    max-height: 380px;
    overflow-y: auto;
}
.dark .chat-art-panel-dropdown { background: #1e1e22; }
.chat-art-panel-header {
    padding: 8px 14px 4px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.chat-art-panel-section {
    padding: 4px 14px 2px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    opacity: 0.7;
}
.chat-art-panel-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 7px 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}
.chat-art-panel-item:hover { background: var(--hover); }
.chat-art-panel-file { cursor: default; }
.chat-art-panel-file:hover { background: transparent; }
.chat-art-panel-item-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 99px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.chat-art-panel-item-badge.code { background: rgba(59,130,246,0.12); color: #3b82f6; }
.chat-art-panel-item-badge.document { background: rgba(16,185,129,0.12); color: #10b981; }
.chat-art-panel-item-badge.chart { background: rgba(245,158,11,0.12); color: #f59e0b; }
.chat-art-panel-item-badge.image { background: rgba(236,72,153,0.12); color: #ec4899; }
.chat-art-panel-item-badge.video { background: rgba(139,92,246,0.12); color: #8b5cf6; }
.chat-art-panel-item-title { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.edit-container { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.edit-textarea {
    width: 100%;
    background: var(--bg-color);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--text-main);
    resize: none;
    outline: none;
    min-height: 80px;
    font-family: inherit;
}
.edit-textarea:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }
.edit-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ======================================================
   FLOATING INPUT BAR
====================================================== */
.input-floating-wrapper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 736px;
    z-index: 50;
    transition: all 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Full-width fade behind the floating input. Sits above the scroll area (z-20) but
   below the input (z-50), so conversation text dissolves into the page background
   before it can appear under or beneath the input box. */
.chat-bottom-fade {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: calc(var(--input-h, 96px) + 56px);
    z-index: 40;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 0%, var(--bg-color) 55%);
}
.theme-incognito .chat-bottom-fade { background: linear-gradient(to bottom, transparent 0%, #ebebed 55%); }
.dark .theme-incognito .chat-bottom-fade { background: linear-gradient(to bottom, transparent 0%, #18181b 55%); }
/* dvh = dynamic viewport height: shrinks when the OS keyboard appears so the
   input stays centred in the VISIBLE area rather than jumping behind the keyboard. */
/* --empty-scroll mirrors how far the new-chat screen has scrolled, so the centered
   composer scrolls together with the greeting and starter cards instead of staying
   frozen in place when the content is taller than the viewport. */
.input-floating-wrapper.centered { bottom: 52dvh; transform: translate(-50%, calc(50% - var(--empty-scroll, 0px))); }
.input-floating-wrapper.bottom { bottom: 20px; transform: translate(-50%, 0); }
/* While actively scrolling the new-chat screen, disable the slide transition so the
   pill tracks the content instantly (the center→bottom animation still plays on send). */
.input-floating-wrapper.input-no-anim { transition: none; }

/* Pills inside the input box */
.input-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 2px 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
}
.input-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--hover);
    border: 1px solid var(--border);
    cursor: default;
}
a.input-pill { cursor: pointer; text-decoration: none; }
a.input-pill:hover { color: var(--text-main); background: var(--hover); }
.input-pill-text { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.input-pill-close { cursor: pointer; color: inherit; background: none; border: none; display: flex; align-items: center; padding: 0 0 0 2px; }
.input-pill-close:hover { color: #ef4444; }

/* MathLive's native virtual keyboard — pinned fixed to the bottom, starting after
   the sidebar (width set by JS via --kbd-left on the element). */
.ML__keyboard {
    position: fixed !important;
    bottom: 0 !important;
    z-index: 4000 !important;
    left: var(--kbd-left, 0px) !important;
    width: var(--kbd-width, 100%) !important;
    max-width: none !important;
}
.ML__keyboard > .MLK__backdrop {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
}
.ML__keyboard .MLK__plate {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Math Keyboard toggle button (our ∑ button next to the + button) */
.math-kbd-toggle { display: flex; align-items: center; gap: 3px; }
.math-kbd-toggle-active { color: #6366f1 !important; background: rgba(99,102,241,.12) !important; border-color: #6366f1 !important; }
.dark .math-kbd-toggle-active { color: #818cf8 !important; background: rgba(129,140,248,.15) !important; border-color: #818cf8 !important; }

/* Block MathLive from adding body/html padding that pushes the page up when the
   virtual keyboard is shown — our input is position:fixed and doesn't need it. */
body, html { padding-bottom: 0 !important; }

/* "Works better in projects" banner shown below code / writer skills */
.skill-project-banner {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    margin-bottom: 6px;
    border-radius: 10px;
    font-size: 12.5px;
    background: rgba(99,102,241,.08);
    color: var(--text-sub, #64748b);
    border: 1px solid rgba(99,102,241,.18);
}
.dark .skill-project-banner {
    background: rgba(129,140,248,.10);
    border-color: rgba(129,140,248,.22);
    color: #94a3b8;
}
.skill-project-banner strong { font-weight: 600; color: var(--text-main, #1e293b); }
.dark .skill-project-banner strong { color: #e2e8f0; }
.skill-project-banner-link { color: #6366f1; font-weight: 500; text-decoration: none; }
.skill-project-banner-link:hover { text-decoration: underline; }
.dark .skill-project-banner-link { color: #818cf8; }
.skill-project-banner-close {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-sub, #64748b);
    border-radius: 4px;
    flex-shrink: 0;
}
.skill-project-banner-close:hover { background: rgba(0,0,0,.07); }
.dark .skill-project-banner-close:hover { background: rgba(255,255,255,.09); }

/* Legacy latex-keyboard kept for compatibility */
.latex-keyboard {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 8px 2px 4px;
    margin-top: 6px;
    border-top: 1px solid var(--border);
}
.latex-kbd-label {
    font-size: 11px;
    font-weight: 800;
    color: #6366f1;
    margin-right: 4px;
    letter-spacing: .02em;
}
.latex-keyboard button {
    min-width: 30px;
    padding: 4px 8px;
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-main);
    background: var(--hover);
    border: 1px solid var(--border);
    border-radius: 7px;
    cursor: pointer;
    line-height: 1.4;
    transition: background .12s, border-color .12s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.latex-keyboard button:hover { background: rgba(99,102,241,.14); border-color: #6366f1; color: #6366f1; }

/* PowerPoints skill — deck builder composer */
.ppt-builder { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 2px; }
.ppt-topic {
    width: 100%;
    resize: none;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-main);
    font-size: 15px;
    font-family: inherit;
    line-height: 1.5;
}
.ppt-topic::placeholder { color: var(--text-muted); }
.ppt-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.ppt-field { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.ppt-field select {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--hover);
    color: var(--text-main);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-transform: none;
}
.ppt-generate {
    margin-left: auto;
    padding: 9px 18px;
    border: none;
    border-radius: 9px;
    background: linear-gradient(90deg, #ea580c, #db2777);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: opacity .12s;
}
.ppt-generate:hover { opacity: .9; }
.ppt-generate:disabled { opacity: .45; cursor: not-allowed; }

/* Image artifact */
.artifact-image-wrap { display: flex; align-items: center; justify-content: center; padding: 16px; height: 100%; }
.artifact-image { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.18); object-fit: contain; }

/* Slides artifact viewer */
.slides-viewer { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
/* padding-bottom: 56.25% = 9/16 — enforces 16:9 reliably regardless of flex context */
.slides-stage-wrap { width: 100%; position: relative; padding-bottom: 56.25%; flex-shrink: 0; }
.slides-stage { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,.18); }
/* Library modal */
.lib-preview-body .slides-viewer { height: 55vh; min-height: 300px; display: flex; flex-direction: column; justify-content: center; }
/* Slide canvas: column layout — title → bullets → image stacked like a real slide */
.slide-canvas { width: 100%; height: 100%; display: flex; flex-direction: column; padding: 7% 8%; box-sizing: border-box; gap: 0; }
.slide-title { font-size: clamp(16px, 2.8cqw, 36px); font-weight: 800; line-height: 1.15; margin: 0 0 .45em; flex-shrink: 0; }
.slide-bullets { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: .35em; flex-shrink: 0; }
.slide-bullets li { font-size: clamp(11px, 1.5cqw, 18px); line-height: 1.35; }
.slide-media { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; margin-top: 10px; overflow: hidden; }
.slide-media img { max-width: 100%; max-height: 100%; border-radius: 8px; object-fit: cover; width: 100%; }
.slides-nav { display: flex; align-items: center; justify-content: center; gap: 16px; }
.slides-nav button { padding: 6px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--hover); color: var(--text-main); font-weight: 700; font-size: 13px; cursor: pointer; }
.slides-nav button:disabled { opacity: .4; cursor: not-allowed; }
.slides-count { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--text-muted); min-width: 64px; text-align: center; }
/* Theme palettes (mirror pptThemes in frontend.js) */
.slides-theme-corporate { background: #fff; color: #374151; }
.slides-theme-corporate .slide-title { color: #1E40AF; }
.slides-theme-cyber { background: #050505; color: #4ADE80; font-family: 'JetBrains Mono', monospace; }
.slides-theme-cyber .slide-title { color: #22C55E; }
.slides-theme-minimal { background: #F5F5F0; color: #333; }
.slides-theme-minimal .slide-title { color: #000; }
.slides-theme-sunset { background: linear-gradient(135deg, #581c87, #9a3412); color: #FDBA74; }
.slides-theme-sunset .slide-title { color: #F472B6; }
.slides-theme-forest { background: #064E3B; color: #D1FAE5; }
.slides-theme-forest .slide-title { color: #34D399; }

/* Slides editor (artifact edit mode) */
.slides-editor { display: flex; flex-direction: column; gap: 14px; padding: 4px 2px 24px; overflow-y: auto; }
.slides-editor-theme { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.slides-editor-theme select { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-color); color: var(--text-main); font-size: 13px; }
.slide-edit-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--hover); }
.slide-edit-head { display: flex; align-items: center; justify-content: space-between; }
.slide-edit-num { font-size: 12px; font-weight: 800; color: var(--text-muted); }
.slide-edit-del { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 6px; }
.slide-edit-del:hover { color: #ef4444; background: rgba(239,68,68,.1); }
.slide-edit-input, .slide-edit-bullets { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-color); color: var(--text-main); font-size: 13px; box-sizing: border-box; font-family: inherit; }
.slide-edit-bullets { resize: vertical; line-height: 1.4; }
.slide-edit-img { display: flex; flex-direction: column; gap: 6px; }
.slide-edit-thumb { max-height: 120px; width: auto; border-radius: 8px; object-fit: cover; align-self: flex-start; }
.slide-edit-add { padding: 9px; border: 1px dashed var(--border); border-radius: 10px; background: none; color: var(--text-muted); font-weight: 700; font-size: 13px; cursor: pointer; }
.slide-edit-add:hover { color: var(--text-main); border-color: var(--text-muted); }

/* Legacy pill containers (kept for compatibility) */
.file-pill-container { display: none; }
.file-pill {
    background: var(--bg-color);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow-md);
}
.file-pill-text { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-pill-close { cursor: pointer; color: inherit; background: none; border: none; display: flex; align-items: center; }
.file-pill-close:hover { color: #ef4444; }

.input-bar-inner {
    border: 1px solid var(--border);
    border-radius: 28px;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    padding: 12px 14px 8px;
    position: relative;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: var(--bg-color);
}
.input-bar-inner:focus-within {
    border-color: rgba(59,130,246,0.5);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1), var(--shadow-md);
}
.theme-incognito .input-bar-inner { background: #f3f4f6; }
.dark .theme-incognito .input-bar-inner { background: #1e1e22; border-color: rgba(255,255,255,0.1); }

.input-controls-row { display: flex; align-items: center; gap: 2px; }
.btn-model-select {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.btn-model-select:hover { background: var(--hover); color: var(--text-main); }
.btn-model-select svg { width: 13px; height: 13px; opacity: 0.65; }
/* Locked model badge (Images mode) — looks like a static, "whited-out" pill. */
.btn-model-locked { cursor: default; background: var(--hover); border: 1px solid var(--border); }
.btn-model-locked:hover { background: var(--hover); }
.btn-model-locked svg { opacity: 1; }

.dropdown-panel {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 0;
    width: 210px;
    background: var(--bg-color);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-lg);
    padding: 6px 0;
    z-index: 200;
}
.dark .dropdown-panel { background: #1e1e22; }
.dropdown-action {
    width: 100%;
    text-align: left;
    padding: 9px 14px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background 0.15s;
}
.dropdown-action:hover { background: var(--hover); }
.dropdown-action-title { font-size: 13.5px; font-weight: 700; color: var(--text-main); }
.dropdown-action-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

.input-divider { width: 1px; height: 16px; background: var(--border); margin: 0 4px; }

.btn-tools {
    padding: 7px;
    border-radius: 50%;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-tools svg { width: 16px; height: 16px; }
.btn-tools:hover { background: var(--hover); color: var(--text-main); }

.chat-textarea {
    background: transparent;
    color: var(--text-main);
    padding: 0 2px 6px;
    max-height: 300px;
    outline: none;
    resize: none;
    font-size: 15px;
    border: none;
    font-family: inherit;
    overflow-y: hidden;
    line-height: 1.5;
    width: 100%;
    min-height: 28px;
}
.chat-textarea::placeholder { color: var(--text-muted); }

/* MathLive live-input field (Math Solver mode). The typed math MUST be clearly
   visible, so we drive the glyph colour straight off the app's theme text colour
   (light text on the dark composer, dark text on the light composer). */
math-field.math-input-field {
    display: block;
    width: 100%;
    min-height: 42px;
    padding: 6px 4px;
    font-size: 21px;
    border: none;
    background: transparent;
    color: var(--text-main);
    outline: none;
    --caret-color: #6366f1;
    --primary-color: #6366f1;
    --selection-background-color: rgba(99,102,241,.22);
    --contains-highlight-background-color: rgba(99,102,241,.10);
    --placeholder-color: #9ca3af;
    --placeholder-opacity: 1;
}
/* ::part(content) pierces the shadow DOM to force the actual glyph colour. */
math-field.math-input-field::part(content) { color: var(--text-main); }
math-field.math-input-field:focus,
math-field.math-input-field:focus-within { outline: none; }
/* Hide MathLive's own keyboard + menu toggles — we use our own ∑ button. */
math-field.math-input-field::part(virtual-keyboard-toggle),
math-field.math-input-field::part(menu-toggle) { display: none !important; }

/* Send button */
.btn-send {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.2,0,0,1);
    flex-shrink: 0;
}
.btn-send:disabled { background: var(--hover) !important; color: var(--text-muted) !important; cursor: not-allowed; box-shadow: none !important; transform: none !important; }
.btn-send:not(:disabled) { background: var(--text-main); color: var(--bg-color); box-shadow: var(--shadow-sm); }
.btn-send:not(:disabled):hover { transform: scale(1.08); box-shadow: var(--shadow-md); }
.theme-incognito .btn-send:not(:disabled) { background: #374151; color: #ffffff; }
/* Stop button (shown while the model is responding) */
.btn-send.btn-stop { background: #ef4444 !important; color: #fff !important; box-shadow: var(--shadow-sm); }
.btn-send.btn-stop:hover { transform: scale(1.08); background: #dc2626 !important; }

.input-disclaimer {
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
    opacity: 0.75;
}
.incognito-disclaimer { color: #6b7280; font-style: italic; }

.skill-hint-box {
    margin-bottom: 8px;
    padding: 9px 14px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.08);
    background: var(--surface-1, #f9fafb);
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.5;
    text-align: center;
}
.dark .skill-hint-box {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}

/* ======================================================
   PAGE LAYOUTS (Settings, Library, Chats)
====================================================== */
.page-container { max-width: 960px; margin: 0 auto; padding: 56px 36px; width: 100%; }
.page-header { margin-bottom: 36px; }
.page-title { font-size: 2rem; font-weight: 800; letter-spacing: -0.025em; margin-bottom: 8px; color: var(--text-main); }
.page-subtitle { color: var(--text-muted); font-size: 1rem; }

.card {
    background: var(--bg-color);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 28px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s;
}
.dark .card { background: var(--bg-secondary); }
.card:hover { box-shadow: var(--shadow-md); }
.card-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 14px; color: var(--text-main); }

.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.lib-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s, background 0.2s;
    background: var(--bg-color);
    position: relative;
}
.dark .lib-item { background: var(--bg-secondary); }
.lib-item:hover { border-color: rgba(59,130,246,0.3); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.lib-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(59,130,246,0.08);
    color: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@view-transition {
  navigation: auto;
}

@keyframes slide-in {
from { transform: translateX(100vw); }
}

::view-transition-group(root) {
animation-duration: 1s;
}

@keyframes slide-out {
to {
translate: -100vw;
}
}
@keyframes slide-in {
from {
translate: 100vw;
}
}

/* ======================================================
   ARTIFACTS — inline chips + side panel
====================================================== */
[x-cloak] { display: none !important; }

/* Inline chip shown inside an AI message */
.adam-artifact-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 440px;
    margin: 14px 0;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    cursor: pointer;
    text-align: left;
    transition: border-color .15s ease, transform .12s ease, box-shadow .2s ease;
}
.adam-artifact-chip:hover {
    border-color: rgba(99,102,241,0.55);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(99,102,241,0.14);
}
.adam-artifact-chip-icon {
    flex: 0 0 38px;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    color: #fff;
}
.adam-artifact-chip-icon.code { background: linear-gradient(135deg,#f59e0b,#d97706); }
.adam-artifact-chip-icon.chart { background: linear-gradient(135deg,#0ea5e9,#2563eb); }
.adam-artifact-chip-icon.document { background: linear-gradient(135deg,#a855f7,#ec4899); }
.adam-artifact-chip-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adam-artifact-chip-title {
    font-size: 13.5px; font-weight: 700; color: var(--text-main);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adam-artifact-chip-sub { font-size: 11.5px; font-weight: 600; color: var(--text-muted); margin-top: 1px; }
.adam-artifact-chip-arrow { flex: 0 0 16px; color: var(--text-muted); }

/* Split panel — on desktop the artifact is an in-flow column on the right that
   pushes the chat area to the left rather than floating over it. The backdrop is
   only used on narrow screens, where the panel falls back to an overlay drawer. */
.artifact-backdrop {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(0,0,0,0.4); backdrop-filter: blur(2px);
}
.artifact-panel {
    position: relative;
    flex: 0 0 auto;
    width: 0;
    z-index: 95;
    background: var(--bg-color);
    border-left: 1px solid var(--border);
    overflow: hidden;
    transition: width .34s cubic-bezier(.16,1,.3,1);
    display: flex;
}
.artifact-panel.open { width: var(--artifact-w, min(560px, 46vw)); }
/* No width animation while the user is actively dragging/sliding the size control. */
.artifact-panel.resizing { transition: none; }
/* The inner content width tracks the same variable so it reveals cleanly and resizes
   together with the panel. */
.artifact-inner { display: flex; flex-direction: column; width: var(--artifact-w, min(560px, 46vw)); height: 100%; }

/* Drag handle sitting on the chat/artifact boundary (left edge of the panel). */
.artifact-resizer {
    position: absolute; left: 0; top: 0; bottom: 0; width: 9px; z-index: 12;
    cursor: ew-resize; background: transparent; transition: background .15s;
}
.artifact-resizer::before {
    content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 46px; border-radius: 3px; background: var(--border);
}
.artifact-resizer:hover { background: rgba(99,102,241,0.10); }
.artifact-resizer:hover::before { background: linear-gradient(#6366f1,#a855f7); }
.artifact-header-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.artifact-title-stack { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.artifact-size-slider { display: flex; align-items: center; }
.artifact-resize-range {
    -webkit-appearance: none; appearance: none; width: 96px; height: 4px; border-radius: 999px;
    background: var(--border); outline: none; cursor: ew-resize;
}
.artifact-resize-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%;
    background: linear-gradient(135deg,#6366f1,#a855f7); border: 2px solid var(--bg-color);
    box-shadow: 0 1px 4px rgba(0,0,0,0.25); cursor: ew-resize;
}
.artifact-resize-range::-moz-range-thumb {
    width: 15px; height: 15px; border-radius: 50%;
    background: linear-gradient(135deg,#6366f1,#a855f7); border: 2px solid var(--bg-color); cursor: ew-resize;
}

/* Inline artifact editor (chat panel) */
.artifact-edit-wrap { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.artifact-edit-title {
    width: 100%; font-size: 15px; font-weight: 700; color: var(--text-main);
    background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 11px;
    padding: 10px 13px; outline: none;
}
.artifact-edit-title:focus, .artifact-edit-textarea:focus { border-color: rgba(99,102,241,0.6); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
.artifact-edit-textarea {
    width: 100%; flex: 1; min-height: 50vh; resize: none;
    color: var(--text-main); background: var(--bg-secondary);
    border: 1px solid var(--border); border-radius: 13px; padding: 16px; outline: none;
    tab-size: 4;
}
/* Code edits read as code; document edits read as prose. */
.artifact-edit-textarea.is-code {
    font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.7;
    white-space: pre; overflow: auto;
}
.artifact-edit-textarea.is-doc {
    font-family: 'Manrope', system-ui, sans-serif; font-size: 15px; line-height: 1.8;
}
/* Formatted (WYSIWYG) document editor — edit the rendered text directly. */
.artifact-doc-editor {
    flex: 1; min-height: 50vh; overflow-y: auto; outline: none;
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 13px; padding: 18px 20px;
}
.artifact-doc-editor:focus { border-color: rgba(99,102,241,0.6); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
.artifact-doc-editor:empty::before { content: attr(data-placeholder); color: var(--text-muted); }

/* Public share link bar */
.artifact-share-bar {
    display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
    padding: 9px 16px; border-top: 1px solid var(--border);
    background: rgba(37,99,235,0.06); color: var(--text-muted); font-size: 12px;
}
.artifact-share-url {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: 'JetBrains Mono', monospace; color: var(--text-main);
}
.artifact-share-copy {
    flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 7px;
    color: #fff; background: #2563eb; border: none; cursor: pointer;
}
.artifact-share-copy:hover { background: #1d4ed8; }

@media (min-width: 900px) {
    .artifact-backdrop { display: none !important; }
}

/* Narrow screens: revert to a floating drawer over the chat. */
@media (max-width: 899px) {
    .artifact-panel {
        position: fixed; top: 0; right: 0; bottom: 0;
        width: min(520px, 94vw);
        box-shadow: -12px 0 40px rgba(0,0,0,0.18);
        transform: translateX(102%);
        transition: transform .32s cubic-bezier(.16,1,.3,1);
    }
    .artifact-panel.open { width: min(520px, 94vw); transform: translateX(0); }
    .artifact-inner { width: 100%; }
    .artifact-resizer { display: none; }
}
.artifact-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 18px; border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.artifact-header-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.artifact-badge {
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
    padding: 4px 8px; border-radius: 7px; color: #fff; flex: 0 0 auto;
    background: #6b7280;
}
.artifact-badge.code { background: #ca8a04; }       /* yellow (darkened for white text) */
.artifact-badge.chart { background: #ef4444; }      /* red */
.artifact-badge.design { background: #f43f5e; }     /* rose */
.artifact-badge.document { background: #2563eb; }   /* blue */
.artifact-badge.research { background: #1d4ed8; }   /* deeper blue */
.artifact-badge.powerpoint { background: #ea580c; } /* orange */
.artifact-badge.video { background: #8b5cf6; }      /* violet */
.artifact-badge.image { background: #ec4899; }      /* pink */
.artifact-badge.quiz { background: #059669; }       /* emerald */

/* Small type badge used in Settings → Shared Artifacts. */
.shared-type-badge {
    flex-shrink: 0; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
    padding: 3px 8px; border-radius: 6px; color: #fff; background: #6b7280;
}
.shared-type-badge.code { background: #ca8a04; }
.shared-type-badge.chart { background: #ef4444; }
.shared-type-badge.design { background: #f43f5e; }
.shared-type-badge.document { background: #2563eb; }
.shared-type-badge.research { background: #1d4ed8; }
.shared-type-badge.powerpoint { background: #ea580c; }
.shared-type-badge.video { background: #8b5cf6; }
.shared-type-badge.image { background: #ec4899; }
.shared-type-badge.quiz { background: #059669; }
.chat-art-panel-item-badge.quiz { background: rgba(5,150,105,0.12); color: #059669; }
.chat-art-panel-item.cite-flash { animation: citeFlash 2.2s ease; border-radius: 8px; }
@keyframes citeFlash {
    0%, 30% { background: rgba(5,150,105,0.22); }
    100% { background: transparent; }
}
.adam-artifact-chip-icon.quiz { background: linear-gradient(135deg,#10b981,#059669); }
.adam-artifact-chip-icon.image { background: linear-gradient(135deg,#ec4899,#db2777); }
.adam-artifact-chip-icon.slides { background: linear-gradient(135deg,#ea580c,#dc2626); }
.adam-artifact-chip-icon.map { background: linear-gradient(135deg,#22c55e,#16a34a); }

/* ── Map artifact ── */
.artifact-map-wrap { width: 100%; height: 100%; min-height: 420px; }
.artifact-map-wrap iframe { width: 100%; height: 100%; min-height: 420px; border: 0; border-radius: 8px; }

/* ── Suggested next task chip ── */
.next-task-row { display: flex; justify-content: flex-end; margin-top: 10px; }
.next-task-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-main);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.1s;
    font-family: inherit;
}
.next-task-chip:hover { background: var(--hover); border-color: rgba(99,102,241,0.5); transform: translateY(-1px); }

/* ── Weather Core Plugin widget — a real forecast grid (current + hourly + daily) ── */
.weather-widget {
    width: 100%; max-width: 480px; border-radius: 18px; overflow: hidden;
    background: linear-gradient(160deg, #38bdf8 0%, #2563eb 100%); color: #fff;
    padding: 18px 18px 14px;
}
.weather-widget-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.weather-widget-icon { flex: 0 0 auto; opacity: .95; }
.weather-widget-temp { font-size: 34px; font-weight: 800; line-height: 1; }
.weather-widget-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.weather-widget-cond { font-size: 13.5px; font-weight: 700; }
.weather-widget-sub { font-size: 11.5px; opacity: .85; }
.weather-widget-loc { margin-left: auto; font-size: 12px; font-weight: 700; opacity: .9; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.weather-widget-back {
    font-size: 11px; font-weight: 700; color: #fff; background: rgba(255,255,255,0.18);
    border: none; border-radius: 8px; padding: 3px 8px; cursor: pointer; font-family: inherit;
}
.weather-widget-back:hover { background: rgba(255,255,255,0.3); }
.weather-widget-tabs { display: flex; gap: 4px; margin-top: 14px; background: rgba(255,255,255,0.14); border-radius: 10px; padding: 3px; }
.weather-widget-tabs button {
    flex: 1; font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,0.75);
    padding: 6px 4px; border-radius: 8px; background: none; border: none; cursor: pointer; font-family: inherit;
}
.weather-widget-tabs button.active { background: rgba(255,255,255,0.9); color: #1d4ed8; }
.weather-widget-hourly { margin-top: 12px; }
.weather-widget-spark { width: 100%; height: 28px; display: block; }
.weather-widget-hours { display: flex; justify-content: space-between; margin-top: 4px; }
.weather-widget-hour { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.weather-widget-hour-val { font-size: 12px; font-weight: 700; }
.weather-widget-hour-time { font-size: 10px; opacity: .8; }
.weather-widget-daily {
    display: flex; overflow-x: auto; gap: 4px; margin-top: 16px; padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.2);
}
.weather-widget-day { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 0 52px; padding: 6px 2px; background: none; border: none; border-radius: 12px; cursor: pointer; color: inherit; font-family: inherit; transition: background .15s ease; }
.weather-widget-day:hover { background: rgba(255,255,255,0.12); }
.weather-widget-day.active { background: rgba(255,255,255,0.24); }
.weather-widget-day-name { font-size: 11px; font-weight: 700; opacity: .9; }
.weather-widget-day-icon { opacity: .95; }
.weather-widget-day-temps { font-size: 12px; font-weight: 700; display: flex; gap: 5px; }
.weather-widget-day-lo { opacity: .7; font-weight: 600; }

/* ── Interactive quiz artifact ── */
.artifact-quiz-wrap { padding: 4px 2px; }
.adam-quiz { display: flex; flex-direction: column; gap: 18px; }
.adam-quiz-q { border: 1px solid var(--border); border-radius: 14px; padding: 16px 16px 14px; background: var(--bg-secondary); }
.adam-quiz-qhead { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.adam-quiz-num {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 8px; background: #059669; color: #fff;
    font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.adam-quiz-qtext { font-size: 14.5px; font-weight: 700; color: var(--text-main); line-height: 1.45; padding-top: 2px; }
.adam-quiz-opts { display: flex; flex-direction: column; gap: 8px; }
.adam-quiz-opt {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 11px;
    background: var(--bg-color); color: var(--text-main); font-size: 13.5px; font-weight: 600;
    cursor: pointer; transition: border-color .15s, background .15s;
}
.adam-quiz-opt:hover:not(:disabled) { border-color: rgba(5,150,105,0.5); }
.adam-quiz-opt:disabled { cursor: default; }
.adam-quiz-opt.picked { border-color: #059669; background: rgba(5,150,105,0.06); }
.adam-quiz-opt.correct { border-color: #059669; background: rgba(5,150,105,0.12); }
.adam-quiz-opt.wrong { border-color: #ef4444; background: rgba(239,68,68,0.10); }
.adam-quiz-letter {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; background: rgba(127,127,127,0.12);
    font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; color: var(--text-muted);
}
.adam-quiz-opt.correct .adam-quiz-letter { background: #059669; color: #fff; }
.adam-quiz-opt.wrong .adam-quiz-letter { background: #ef4444; color: #fff; }
.adam-quiz-opttext { flex: 1; }
.adam-quiz-tick { color: #059669; font-weight: 800; }
.adam-quiz-cross { color: #ef4444; font-weight: 800; }
.adam-quiz-explain {
    margin-top: 12px; font-size: 13px; color: var(--text-muted); line-height: 1.5;
    background: rgba(5,150,105,0.07); border-radius: 9px; padding: 10px 12px;
}
.adam-quiz-footer { display: flex; align-items: center; gap: 14px; padding-top: 4px; }
.adam-quiz-check, .adam-quiz-retry {
    padding: 9px 18px; border-radius: 10px; border: none; cursor: pointer;
    font-size: 13.5px; font-weight: 700; background: #059669; color: #fff; transition: background .15s;
}
.adam-quiz-check:hover, .adam-quiz-retry:hover { background: #047857; }
.adam-quiz-retry { background: transparent; color: #059669; border: 1.5px solid rgba(5,150,105,0.4); }
.adam-quiz-retry:hover { background: rgba(5,150,105,0.08); }
.adam-quiz-score { font-size: 14.5px; font-weight: 800; color: var(--text-main); }

/* ── Source-grounded citation chips (project chats) ── */
.adam-cite {
    display: inline-flex; align-items: center; justify-content: center; vertical-align: super;
    min-width: 16px; height: 16px; padding: 0 4px; margin: 0 1px; border-radius: 5px;
    font-size: 10.5px; font-weight: 800; line-height: 1; cursor: pointer; text-decoration: none;
    background: rgba(5,150,105,0.14); color: #059669; transition: background .15s;
}
.adam-cite:hover { background: rgba(5,150,105,0.28); }
.artifact-title-text {
    font-size: 14.5px; font-weight: 700; color: var(--text-main);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.artifact-close {
    flex: 0 0 auto; padding: 6px; border-radius: 9px; color: var(--text-muted);
    background: none; border: none; cursor: pointer; transition: background .15s, color .15s;
}
.artifact-close:hover { background: var(--hover); color: var(--text-main); }
.artifact-body { flex: 1; overflow: auto; padding: 18px; }
/* Light mode: soft grey code panel. Dark mode (below) keeps the original near-black. */
.artifact-code {
    background: #f3f4f6; color: #1f2937; border-radius: 12px; border: 1px solid #e5e7eb;
    padding: 16px; overflow: auto; font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.6;
    white-space: pre; tab-size: 2;
}
.dark .artifact-code { background: #0a0a0a; color: #cdd6f4; border-color: rgba(255,255,255,0.08); }
.artifact-code code { font-family: inherit; background: none; padding: 0; color: inherit; white-space: pre; }
.artifact-doc { font-size: 15px; line-height: 1.7; color: var(--text-main); }
.artifact-doc h1, .artifact-doc h2, .artifact-doc h3 { font-weight: 800; margin: 1.1em 0 .5em; line-height: 1.25; }
.artifact-doc h1 { font-size: 1.6em; } .artifact-doc h2 { font-size: 1.3em; } .artifact-doc h3 { font-size: 1.1em; }
.artifact-doc p { margin: .7em 0; }
.artifact-doc ul, .artifact-doc ol { margin: .6em 0; padding-left: 1.4em; }
.artifact-doc ul { list-style: disc; }
.artifact-doc ol { list-style: decimal; }
.artifact-doc li { margin: .25em 0; }
.artifact-doc table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: 14px; }
.artifact-doc th, .artifact-doc td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; }
.artifact-doc th { background: var(--bg-secondary); font-weight: 700; }
.artifact-doc code { background: var(--bg-secondary); padding: 2px 6px; border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-size: .9em; }
.artifact-doc blockquote { border-left: 3px solid var(--border); padding-left: 14px; color: var(--text-muted); margin: .8em 0; }
.artifact-chart-wrap { position: relative; height: 60vh; min-height: 320px; width: 100%; }
.artifact-footer {
    flex: 0 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 14px 18px; border-top: 1px solid var(--border);
}
.artifact-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 15px; border-radius: 11px; font-size: 13px; font-weight: 700;
    border: none; cursor: pointer; transition: filter .15s, background .15s, opacity .15s;
}
.artifact-btn:disabled { opacity: .6; cursor: default; }
.artifact-btn-sm { padding: 6px 11px; font-size: 12px; }
.artifact-btn-ghost { background: var(--hover); color: var(--text-main); }
.artifact-btn-ghost:hover { filter: brightness(.97); }
.artifact-btn-primary { background: linear-gradient(135deg,#6366f1,#8b5cf6); color: #fff; margin-left: auto; }
.artifact-btn-primary:hover { filter: brightness(1.05); }

/* ======================================================
   MEMORY POPUP
====================================================== */
.memory-overlay {
    position: fixed; inset: 0; z-index: 98;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.memory-modal {
    width: min(94vw, 560px); max-height: 86vh; display: flex; flex-direction: column;
    background: var(--bg-color); border: 1px solid var(--border);
    border-radius: 20px; box-shadow: 0 28px 80px rgba(0,0,0,0.4); overflow: hidden;
}
.memory-modal-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 20px 22px 16px; border-bottom: 1px solid var(--border);
}
.memory-modal-icon {
    flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center; color: #fff;
    background: linear-gradient(135deg,#a855f7,#6366f1);
}
.memory-modal-title { font-size: 17px; font-weight: 800; color: var(--text-main); }
.memory-modal-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.memory-modal-body { padding: 20px 22px; overflow: auto; flex: 1; }
.memory-readonly {
    white-space: pre-wrap; font-size: 14px; line-height: 1.7; color: var(--text-main);
    background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 14px; padding: 16px;
}
.memory-empty { font-size: 14px; line-height: 1.6; color: var(--text-muted); padding: 6px 2px; }
.memory-textarea {
    width: 100%; min-height: 200px; resize: vertical; font-family: inherit; font-size: 14px; line-height: 1.7;
    color: var(--text-main); background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 14px; padding: 16px; outline: none;
}
.memory-textarea:focus { border-color: rgba(99,102,241,0.6); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
.memory-modal-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    padding: 16px 22px; border-top: 1px solid var(--border);
}

/* ======================================================
   LIBRARY PREVIEW MODAL
====================================================== */
.lib-preview-overlay {
    position: fixed; inset: 0; z-index: 98;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.lib-preview-modal {
    width: min(94vw, 760px); max-height: 88vh; display: flex; flex-direction: column;
    background: var(--bg-color); border: 1px solid var(--border);
    border-radius: 20px; box-shadow: 0 28px 80px rgba(0,0,0,0.4); overflow: hidden;
}
.lib-preview-inner { display: flex; flex-direction: column; min-height: 0; }
.lib-preview-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 20px; border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.lib-preview-title-group { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lib-preview-title {
    font-size: 15px; font-weight: 700; color: var(--text-main);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lib-preview-body { padding: 18px 20px; overflow: auto; flex: 1; min-height: 120px; }
.lib-preview-image-wrap { display: flex; align-items: center; justify-content: center; }
.lib-preview-image { max-width: 100%; max-height: 60vh; border-radius: 12px; }
.lib-preview-chart-wrap { position: relative; height: 55vh; min-height: 300px; width: 100%; }
.lib-preview-footer {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 20px; border-top: 1px solid var(--border);
}
.lib-preview-hint { font-size: 12px; font-weight: 600; color: var(--text-muted); }

/* ---- Artifact branding ---- */
.artifact-shell {
    position: relative;
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg,#6366f1,#a855f7,#ec4899) 1;
}
.artifact-branded-header {
    background:
        linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
        linear-gradient(90deg, rgba(99,102,241,0.10), rgba(168,85,247,0.06)) border-box;
}
.artifact-brand-mark {
    flex: 0 0 36px; width: 36px; height: 36px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center; color: #fff;
    background: linear-gradient(135deg,#6366f1,#a855f7,#ec4899);
    box-shadow: 0 6px 16px rgba(124,58,237,0.35);
}
.lib-preview-title-stack { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.artifact-kicker { display: flex; align-items: center; gap: 8px; }
.artifact-brand-text {
    font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
    color: transparent; background: linear-gradient(90deg,#6366f1,#a855f7,#ec4899);
    -webkit-background-clip: text; background-clip: text;
    font-family: 'JetBrains Mono', monospace;
}

/* ---- Footer layout (zoom + actions) ---- */
.lib-preview-footer-left { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; }
.lib-preview-footer-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.lib-zoom { display: flex; align-items: center; gap: 8px; color: var(--text-muted); }
.lib-zoom-range {
    -webkit-appearance: none; appearance: none; width: 130px; height: 4px; border-radius: 999px;
    background: var(--border); outline: none; cursor: pointer;
}
.lib-zoom-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%;
    background: linear-gradient(135deg,#6366f1,#a855f7); border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25); cursor: pointer;
}
.lib-zoom-range::-moz-range-thumb {
    width: 15px; height: 15px; border-radius: 50%;
    background: linear-gradient(135deg,#6366f1,#a855f7); border: 2px solid #fff; cursor: pointer;
}
.lib-zoom-pct { font-size: 11px; font-weight: 700; color: var(--text-muted); min-width: 34px; font-family: 'JetBrains Mono', monospace; }

/* ---- Inline artifact editor ---- */
.lib-edit-wrap { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.lib-edit-title {
    width: 100%; font-size: 16px; font-weight: 700; color: var(--text-main);
    background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px;
    padding: 11px 14px; outline: none;
}
.lib-edit-title:focus, .lib-edit-textarea:focus { border-color: rgba(99,102,241,0.6); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
.lib-edit-textarea {
    width: 100%; min-height: 46vh; resize: vertical; flex: 1;
    font-family: 'JetBrains Mono', monospace; font-size: 13.5px; line-height: 1.7;
    color: var(--text-main); background: var(--bg-secondary);
    border: 1px solid var(--border); border-radius: 14px; padding: 16px; outline: none;
}

/* Off-screen surface used to rasterize markdown into a PDF (light, print-like). */
.pdf-render-surface {
    position: fixed; left: 0; top: 0; z-index: -1; pointer-events: none; width: 794px; padding: 16px 24px;
    background: #ffffff; color: #111827;
    font-family: 'Manrope', Arial, sans-serif; font-size: 14px; line-height: 1.7;
}
.pdf-render-surface h1 { font-size: 26px; font-weight: 800; margin: 0 0 12px; }
.pdf-render-surface h2 { font-size: 21px; font-weight: 800; margin: 18px 0 10px; }
.pdf-render-surface h3 { font-size: 17px; font-weight: 700; margin: 14px 0 8px; }
.pdf-render-surface p { margin: 10px 0; }
.pdf-render-surface ul, .pdf-render-surface ol { margin: 10px 0; padding-left: 24px; }
.pdf-render-surface li { margin: 4px 0; }
.pdf-render-surface ul { list-style: disc; }
.pdf-render-surface ol { list-style: decimal; }
.pdf-render-surface a { color: #2563eb; text-decoration: underline; }
.pdf-render-surface blockquote { border-left: 3px solid #d1d5db; padding-left: 14px; color: #6b7280; margin: 10px 0; }
.pdf-render-surface table { border-collapse: collapse; width: 100%; margin: 12px 0; }
.pdf-render-surface th, .pdf-render-surface td { border: 1px solid #d1d5db; padding: 8px 10px; text-align: left; }
.pdf-render-surface th { background: #f3f4f6; font-weight: 700; }
.pdf-render-surface pre { background: #f3f4f6; padding: 12px; border-radius: 8px; overflow: auto; white-space: pre-wrap; }
.pdf-render-surface code { font-family: 'JetBrains Mono', monospace; font-size: 0.9em; }
.pdf-render-surface h4 { font-size: 15px; font-weight: 700; margin: 12px 0 6px; }
.pdf-render-surface .pdf-doc-title {
    font-size: 27px; font-weight: 800; margin: 0 0 16px; padding-bottom: 10px;
    border-bottom: 2px solid #e5e7eb; line-height: 1.2;
}
/* Keep html2pdf from slicing through the middle of a block at a page boundary. */
.pdf-render-surface p, .pdf-render-surface li,
.pdf-render-surface tr, .pdf-render-surface blockquote,
.pdf-render-surface pre, .pdf-render-surface img { page-break-inside: avoid; }
.pdf-render-surface h1, .pdf-render-surface h2,
.pdf-render-surface h3, .pdf-render-surface h4 { page-break-after: avoid; page-break-inside: avoid; }

/* Settings: non-editable memory display */
.memory-readonly-box {
    white-space: pre-wrap; font-size: 14px; line-height: 1.7; color: var(--text-main);
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 14px; padding: 16px; min-height: 130px;
}
.memory-readonly-empty { color: var(--text-muted); }

/* ======================================================
   SETTINGS — unlimited (employee) usage rows
====================================================== */
.usage-infinity {
    display: inline-flex; align-items: center; gap: 3px;
    font-weight: 800; color: #a855f7;
}
.usage-bar-unlimited {
    background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899, #6366f1);
    background-size: 300% 100%;
    animation: usageShimmer 3.5s linear infinite;
    opacity: .85;
}
@keyframes usageShimmer { to { background-position: 300% 0; } }

/* ======================================================
   COMPACT + BUTTON & COMPACT DROPDOWN
====================================================== */
.btn-tools-sm {
    width: 24px; height: 24px; padding: 0; border-radius: 7px;
    color: var(--text-muted); background: transparent; border: none;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.btn-tools-sm svg { width: 13px; height: 13px; }
.btn-tools-sm:hover { background: var(--hover); color: var(--text-main); }

.dropdown-compact { width: 160px; }

.dropdown-action-sm {
    width: 100%; text-align: left; padding: 7px 12px; background: transparent; border: none;
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; font-size: 13px; color: var(--text-main);
    transition: background .12s;
}
.dropdown-action-sm:hover { background: var(--hover); }

/* ======================================================
   ARTIFACT HEADER DRIVE BUTTON
====================================================== */
.artifact-header-drive-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border: 1px solid var(--border); border-radius: 9px;
    background: transparent; cursor: pointer; font-size: 12px; font-weight: 700;
    color: #2563eb; transition: background .12s;
}
.artifact-header-drive-btn:hover { background: rgba(37,99,235,.08); }

/* ======================================================
   MICROPHONE / VOICE DICTATION BUTTON (chat composer)
====================================================== */
.btn-mic {
    padding: 7px; border-radius: 50%; color: var(--text-muted);
    background: transparent; border: none; cursor: pointer;
    transition: background .15s, color .15s; display: flex;
    align-items: center; justify-content: center;
}
.btn-mic svg { width: 16px; height: 16px; }
.btn-mic:hover { background: var(--hover); color: var(--text-main); }
.btn-mic.is-recording {
    color: #fff; background: #ef4444;
    animation: micPulse 1.3s ease-in-out infinite;
}
@keyframes micPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.55); }
    50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

/* ======================================================
   SECOND-LEVEL FLYOUT MENU (a menu inside a menu opens to the side)
====================================================== */
.dropdown-flyout {
    position: absolute;
    left: calc(100% + 8px);
    right: auto;
    bottom: 0;
    width: 210px;
    max-height: 280px;
    overflow-y: auto;
    z-index: 220;
}
@media (max-width: 640px) {
    /* Not enough room to the side on phones — drop it just above the trigger. */
    .dropdown-flyout { left: auto; right: 0; bottom: calc(100% + 8px); }
}

/* ======================================================
   DOCUMENT EDITOR TOOLBAR (formatting menu at the top of the editor)
====================================================== */
.artifact-doc-toolbar {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    padding: 7px 8px; border: 1px solid var(--border); border-radius: 11px;
    background: var(--bg-secondary);
}
.adt-btn {
    display: inline-flex; align-items: center; gap: 4px;
    min-width: 30px; height: 30px; padding: 0 8px;
    border: none; background: transparent; color: var(--text-main);
    border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600;
    transition: background .12s;
}
.adt-btn:hover { background: var(--hover); }
.adt-btn svg { width: 15px; height: 15px; }
.adt-sep { width: 1px; height: 18px; background: var(--border); margin: 0 3px; }
.adt-group { position: relative; }
.adt-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
    min-width: 150px; padding: 5px 0;
    background: var(--bg-color); border: 1px solid var(--border);
    border-radius: 11px; box-shadow: var(--shadow-lg);
}
.dark .adt-menu { background: #1e1e22; }
.adt-menu button {
    display: block; width: 100%; text-align: left; padding: 7px 13px;
    background: transparent; border: none; cursor: pointer;
    color: var(--text-main); font-size: 13px;
}
.adt-menu button:hover { background: var(--hover); }
.adt-drive { margin-left: auto; color: #2563eb; font-weight: 700; }
.adt-drive:hover { background: rgba(37,99,235,.1); }

/* ======================================================
   CODE ARTIFACT — CODE / RENDERED PREVIEW TABS
====================================================== */
.artifact-code-wrap { display: flex; flex-direction: column; height: 100%; gap: 10px; }
.artifact-code-tabs {
    display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px;
    background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px;
}
.artifact-code-tabs button {
    padding: 5px 14px; border: none; background: transparent; cursor: pointer;
    border-radius: 7px; font-size: 12.5px; font-weight: 700; color: var(--text-muted);
    transition: background .12s, color .12s;
}
.artifact-code-tabs button.active { background: var(--bg-color); color: var(--text-main); box-shadow: var(--shadow-sm); }
.dark .artifact-code-tabs button.active { background: #2a2a30; }
.artifact-preview-frame {
    width: 100%; flex: 1; min-height: 55vh; border: 1px solid var(--border);
    border-radius: 13px; background: #fff;
}

/* ======================================================
   LIBRARY — SEARCH BAR, TYPE SECTIONS & "NEW ARTIFACT" LAUNCHER
====================================================== */
.lib-toolbar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px;
}
.lib-search {
    position: relative; flex: 1; min-width: 220px; max-width: 460px;
}
.lib-search svg {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--text-muted); pointer-events: none;
}
.lib-search input {
    width: 100%; padding: 10px 14px 10px 40px; font-size: 14px;
    color: var(--text-main); background: var(--bg-secondary);
    border: 1px solid var(--border); border-radius: 12px; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.lib-search input:focus { border-color: rgba(99,102,241,.6); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.lib-new-btn {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    padding: 10px 16px; border: none; border-radius: 12px; cursor: pointer;
    font-size: 13.5px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg,#6366f1,#8b5cf6);
    transition: filter .15s;
}
.lib-new-btn:hover { filter: brightness(1.06); }
.lib-new-btn svg { width: 16px; height: 16px; }

.lib-group { margin-bottom: 30px; }
.lib-group-title {
    font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
    color: var(--text-muted); margin: 0 0 12px; font-family: 'JetBrains Mono', monospace;
    display: flex; align-items: center; gap: 8px;
}
.lib-group-title .lib-group-count {
    font-size: 11px; font-weight: 700; color: var(--text-muted);
    background: var(--hover); border-radius: 999px; padding: 1px 8px;
}
/* Coloured accent dot before each section title — keys the section to its colour. */
.lib-group-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

/* New-artifact popup */
.lib-new-overlay {
    position: fixed; inset: 0; z-index: 120; padding: 20px;
    background: rgba(0,0,0,.5); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
}
.lib-new-modal {
    width: min(94vw, 540px); background: var(--bg-color);
    border: 1px solid var(--border); border-radius: 22px; padding: 26px;
    box-shadow: var(--shadow-lg);
}
.dark .lib-new-modal { background: #18181b; }
.lib-new-modal h2 { font-size: 18px; font-weight: 800; color: var(--text-main); margin: 0 0 4px; }
.lib-new-modal p.sub { font-size: 13px; color: var(--text-muted); margin: 0 0 20px; }
.lib-new-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lib-new-card {
    display: flex; flex-direction: column; gap: 8px; text-align: left;
    padding: 16px; border: 1px solid var(--border); border-radius: 16px;
    background: var(--bg-secondary); cursor: pointer; transition: transform .12s, border-color .12s;
}
.lib-new-card:hover { transform: translateY(-2px); border-color: rgba(99,102,241,.5); }
.lib-new-card .lib-new-ico {
    width: 38px; height: 38px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
}
.lib-new-card .lib-new-ico svg { width: 20px; height: 20px; }
.lib-new-card .lib-new-name { font-size: 14.5px; font-weight: 700; color: var(--text-main); }
.lib-new-card .lib-new-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; }

/* ============================================================
   Integrations — News Brief widget + "/app" composer references
   ============================================================ */

/* Small coloured dot used by app-reference pills/menu/cards. */
.app-ref-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }

/* Slash-autocomplete popover above the composer. */
.app-ref-menu {
    width: 100%;
    background: var(--bg-color);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    margin-bottom: 8px;
    padding: 6px;
}
.app-ref-menu-label {
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--text-muted); padding: 6px 8px 4px;
}
.app-ref-menu-item {
    width: 100%; display: flex; align-items: center; gap: 9px;
    padding: 9px 8px; border: none; background: transparent; cursor: pointer;
    border-radius: 8px; text-align: left; color: var(--text-main); transition: background 0.15s;
}
.app-ref-menu-item:hover { background: var(--hover); }
.app-ref-menu-name { font-size: 13.5px; font-weight: 700; font-family: ui-monospace, monospace; }
.app-ref-menu-desc { font-size: 12px; color: var(--text-muted); }

/* App-reference suggested-prompts card states. */
.app-ref-loading { padding: 14px 18px; font-size: 13px; color: var(--text-muted); }
.app-ref-overdue { color: #dc2626; font-weight: 600; }
.dark .app-ref-overdue { color: #f87171; }

/* News Brief slim card (below the quick-links on the empty state). */
.news-brief-card {
    width: 100%;
    background: var(--bg-color);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    margin-top: 12px;
}
.news-brief-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 16px 9px; border-bottom: 1px solid var(--border);
}
.news-brief-title {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--text-muted);
}
.news-brief-title svg { color: #0ea5e9; }
.news-brief-tcbf .news-brief-title svg { color: #6366f1; }
.news-brief-tcbf .news-brief-viewall { color: #6366f1; }
.news-brief-viewall { font-size: 12px; font-weight: 700; color: #0ea5e9; text-decoration: none; }
.news-brief-viewall:hover { text-decoration: underline; }
/* News item: thumbnail picture (from the news DB) beside the 2-line headline. */
.news-brief-item {
    width: 100%; text-align: left; padding: 10px 14px; font-size: 13.5px; line-height: 1.35;
    color: var(--text-main); background: transparent; border: none; border-top: 1px solid var(--border);
    cursor: pointer; transition: background 0.15s;
    display: flex; align-items: center; gap: 12px;
}
.news-brief-item:first-of-type { border-top: none; }
.news-brief-item:hover { background: var(--hover); }
.news-brief-thumb {
    width: 56px; height: 42px; flex-shrink: 0; border-radius: 8px; object-fit: cover;
    background: var(--hover); border: 1px solid var(--border);
}
.news-brief-text {
    flex: 1; min-width: 0;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-brief-overdue { color: #dc2626; font-weight: 600; }
.dark .news-brief-overdue { color: #f87171; }