/* =========================================
   Shanu AI — Premium Glassmorphism UI v3
   Developer: Shiva Saini
   Upgrades: Markdown Tables, Code Blocks, Copy Buttons, Z-index Fixes
========================================= */

/* ---- Variables & Reset ---- */
:root {
    --bg-dark:          #06080E;
    --primary:          #00E5FF;
    --primary-dim:      rgba(0, 229, 255, 0.15);
    --primary-glow:     rgba(0, 229, 255, 0.45);
    --secondary:        #6366f1;
    --secondary-dim:    rgba(99, 102, 241, 0.2);
    --accent-green:     #10B981;
    --accent-red:       #F43F5E;
    --text-main:        #F0F4FF;
    --text-muted:       #6B7280;
    --text-sub:         #9CA3AF;
    --glass-bg:         rgba(14, 20, 34, 0.65);
    --glass-bg-light:   rgba(255, 255, 255, 0.04);
    --glass-border:     rgba(255, 255, 255, 0.07);
    --glass-border-h:   rgba(255, 255, 255, 0.14);
    /* Was a bright royal-blue gradient (#0F62D6→#041E42) that clashed with
       the dark navy + cyan theme everywhere else. Darkened it and shifted
       the tone toward --primary (cyan) so it reads as "part of the same
       theme" instead of a foreign bright-blue chip, while staying a shade
       lighter than --bot-msg so user vs bot bubbles are still easy to tell
       apart at a glance. */
    --user-msg:         linear-gradient(135deg, #123246 0%, #0A1622 100%);
    --user-msg-border:  rgba(0, 229, 255, 0.18);
    --bot-msg:          rgba(22, 31, 50, 0.85);
    --shadow-sm:        0 4px 16px rgba(0, 0, 0, 0.25);
    --shadow-md:        0 8px 32px rgba(0, 0, 0, 0.35);
    --shadow-lg:        0 20px 60px rgba(0, 0, 0, 0.5);
    --radius-sm:        10px;
    --radius-md:        16px;
    --radius-lg:        24px;
    --radius-xl:        32px;
    --transition:       all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* Code block theme */
    --code-bg:          #0D1117;
    --code-header-bg:   rgba(255, 255, 255, 0.04);
    --code-border:      rgba(255, 255, 255, 0.08);
}

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

html { scroll-behavior: smooth; }

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    height: 100dvh;
    overflow: hidden;
    position: relative;
    font-family: 'Plus Jakarta Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ---- Noise Texture Overlay ---- */
.noise-overlay {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 128px 128px;
}

/* ---- Animated Background Blobs ---- */
.bg-blobs {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    will-change: transform;
}

/* Performance mode — toggled from Settings, disables heavy animations on weak devices */
body.reduce-motion .blob { animation: none !important; }
body.reduce-motion .noise-overlay { display: none !important; }
body.reduce-motion * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }

.blob-1 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(0,229,255,0.35) 0%, transparent 70%);
    top: -150px; left: -150px;
    animation: floatBlob1 20s infinite alternate ease-in-out;
}

.blob-2 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(99,102,241,0.3) 0%, transparent 70%);
    bottom: -200px; right: -150px;
    animation: floatBlob2 25s infinite alternate ease-in-out;
}

.blob-3 {
    width: 350px; height: 350px;
    background: radial-gradient(circle, rgba(16,185,129,0.15) 0%, transparent 70%);
    top: 40%; left: 40%;
    animation: floatBlob3 18s infinite alternate ease-in-out;
}

@keyframes floatBlob1 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(60px, 40px) scale(1.15); }
    100% { transform: translate(30px, 80px) scale(0.9); }
}
@keyframes floatBlob2 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-50px, -40px) scale(1.1); }
    100% { transform: translate(-80px, 30px) scale(1.2); }
}
@keyframes floatBlob3 {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.5; }
    100% { transform: translate(-40px, -60px) scale(1.3); opacity: 0.2; }
}

/* ---- Layout ---- */
.app-container {
    display: flex;
    height: 100dvh;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* ========== SIDEBAR ========== */
.sidebar {
    width: 320px;
    flex-shrink: 0;
    background: rgba(8, 12, 22, 0.75);
    border-right: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 200;
}

.sidebar-header {
    padding: 22px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid var(--glass-border);
}

.logo-box {
    width: 46px; height: 46px;
    background: linear-gradient(135deg, #00E5FF, #6366f1);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 22px;
    color: #000;
    box-shadow: 0 0 20px var(--primary-glow);
    position: relative;
    flex-shrink: 0;
}

.logo-pulse {
    position: absolute;
    inset: -3px;
    border-radius: 16px;
    border: 1.5px solid rgba(0, 229, 255, 0.35);
    animation: logoPulse 2.5s infinite;
}

@keyframes logoPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%       { opacity: 0;   transform: scale(1.18); }
}

.brand-info h2 {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--text-main);
}

.brand-info p {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}

.sidebar-nav {
    flex: 1;
    padding: 20px 16px;
    overflow-y: auto;
    overflow-x: hidden;
}

.nav-item {
    width: 100%;
    padding: 11px 14px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-sub);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: var(--transition);
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    text-align: left;
}

.nav-item:hover {
    background: var(--glass-bg-light);
    border-color: var(--glass-border);
    color: var(--text-main);
    transform: translateX(2px);
}

.nav-item.active {
    background: var(--primary-dim);
    border-color: rgba(0, 229, 255, 0.2);
    color: var(--primary);
}

.history-label {
    font-size: 10.5px;
    color: var(--text-muted);
    margin: 22px 0 10px 6px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mood-history {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-session-item {
    width: 100%;
    padding: 10px 10px 10px 14px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-sub);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: var(--transition);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    text-align: left;
}

.chat-session-item:hover {
    background: var(--glass-bg-light);
    border-color: var(--glass-border);
    color: var(--text-main);
}

.chat-session-item.active {
    background: var(--primary-dim);
    border-color: rgba(0, 229, 255, 0.2);
    color: var(--primary);
}

.chat-session-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-session-delete {
    flex-shrink: 0;
    width: 24px; height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--text-muted);
    opacity: 0;
    transition: var(--transition);
    font-size: 11px;
}

.chat-session-item:hover .chat-session-delete { opacity: 1; }
.chat-session-delete:hover { color: var(--accent-red); background: rgba(244,63,94,0.1); }

.chat-session-empty {
    font-size: 12px;
    color: var(--text-muted);
    padding: 6px 14px 14px;
    opacity: 0.7;
}

/* ===== Sign-in Sheet ===== */
.auth-view {
    padding: 4px 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-method-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    border-radius: 14px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.auth-method-btn:hover {
    background: var(--primary-dim);
    border-color: rgba(0, 229, 255, 0.25);
}

.auth-method-btn i {
    width: 18px;
    text-align: center;
    color: var(--primary);
}

.auth-note {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: 4px;
}

.auth-back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0 8px;
    align-self: flex-start;
}

.auth-back-btn:hover { color: var(--primary); }

.auth-input {
    width: 100%;
    padding: 13px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    border-radius: 14px;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: var(--transition);
}

.auth-input:focus {
    border-color: var(--primary);
    background: rgba(0, 229, 255, 0.04);
}

.auth-input::placeholder { color: var(--text-muted); }

.auth-submit-btn {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%);
    border: none;
    color: #06080E;
    border-radius: 14px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.auth-submit-btn:hover { filter: brightness(1.08); }
.auth-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.auth-signout-btn {
    background: rgba(244, 63, 94, 0.12);
    color: var(--accent-red);
    border: 1px solid rgba(244, 63, 94, 0.25);
}

.auth-error {
    font-size: 12.5px;
    color: var(--accent-red);
    min-height: 16px;
    line-height: 1.4;
}

.auth-account-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 4px 14px;
}

.auth-account-info .profile-avatar {
    width: 44px; height: 44px;
    font-size: 16px;
}

.profile-avatar-edit,
.auth-account-info .profile-avatar-edit {
    position: relative;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 64px; height: 64px;
    font-size: 22px;
}

.avatar-edit-badge {
    position: absolute;
    bottom: -2px; right: -2px;
    width: 22px; height: 22px;
    background: var(--primary);
    color: #06080E;
    border: 2px solid #0e1422;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.sidebar-footer {
    padding: 10px 12px 14px;
    border-top: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar-footer-icons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.profile-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    text-align: left;
    font-family: inherit;
    width: 100%;
}

.profile-row:hover {
    background: var(--glass-bg-light);
    border-color: var(--glass-border);
}

.profile-avatar {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #06080E;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
}

.profile-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.profile-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.profile-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-sub {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 190;
    backdrop-filter: blur(4px);
}

/* ========== CHAT WRAPPER ========== */
.chat-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
}

/* ---- Header ---- */
.chat-header {
    height: 68px;
    padding: 0 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px);
    flex-shrink: 0;
    position: relative;
    z-index: 100; /* below mood dropdown */
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mobile-menu-btn { display: none; }

.mood-selector-wrapper { position: relative; }

.glass-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    padding: 8px 16px 8px 14px;
    border-radius: var(--radius-xl);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    transition: var(--transition);
    backdrop-filter: blur(10px);
}

.glass-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--glass-border-h);
}

.chev-icon {
    font-size: 10px;
    transition: transform 0.25s ease;
    color: var(--text-muted);
}

.glass-btn.open .chev-icon { transform: rotate(180deg); }

/* ---- Mood Dropdown ---- */
/* FIXED: z-index raised to 9999 to always appear above all content */
.mood-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 190px;
    background: rgba(10, 14, 26, 0.96);
    border: 1px solid var(--glass-border-h);
    border-radius: var(--radius-md);
    padding: 6px;
    display: none;
    z-index: 9999; /* FIX: was 300, now 9999 — always on top */
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(20px);
    animation: dropIn 0.2s ease forwards;
}

.mood-dropdown.show { display: block; }

@keyframes dropIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.mood-item {
    padding: 10px 13px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 500;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
}

.mood-item:hover {
    background: var(--primary-dim);
    color: var(--primary);
    transform: translateX(3px);
}

/* Status Indicator */
/* ---- Plus Menu (Add to chat) — bottom sheet like Claude's + menu ---- */
.plus-menu-wrapper { position: relative; }

.plus-btn i { transition: transform 0.2s ease; }
.plus-btn.open i { transform: rotate(45deg); }

.plus-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 9998;
}

.plus-sheet-backdrop.show {
    opacity: 1;
    pointer-events: auto;
}

.plus-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: rgba(14, 18, 32, 0.98);
    border: 1px solid var(--glass-border-h);
    border-bottom: none;
    border-radius: 26px 26px 0 0;
    padding: 10px 18px calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 9999;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(24px);
    transform: translateY(110%);   /* FIX: 110% instead of 100% — guarantees */
    visibility: hidden;            /* fully off-screen, no border-radius sliver */
    opacity: 0;                    /* peeking through at the bottom edge     */
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.28s, opacity 0.2s ease;
    max-width: 520px;
    margin: 0 auto;
}

.plus-sheet.show {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0s, opacity 0.2s ease;
}

.plus-sheet-handle {
    width: 40px; height: 4px;
    background: var(--glass-border-h);
    border-radius: 4px;
    margin: 6px auto 14px;
}

.plus-sheet-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 18px;
}

.plus-sheet-close {
    position: absolute;
    right: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
}

.plus-sheet-close:hover { color: var(--text-main); }

.plus-sheet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.plus-tile {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 18px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    transition: var(--transition);
}

.plus-tile:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--glass-border-h);
}

.plus-tile-icon {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text-main);
}

.plus-sheet-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-bottom: 10px;
    cursor: pointer;
    color: var(--text-main);
    font-family: inherit;
    text-align: left;
    transition: var(--transition);
}

.plus-sheet-row:hover { border-color: var(--glass-border-h); }

.plus-row-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.plus-row-label {
    flex: 1;
    font-size: 14.5px;
    font-weight: 500;
}

.plus-toggle {
    width: 44px; height: 26px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.12);
    position: relative;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.plus-toggle::after {
    content: "";
    position: absolute;
    top: 3px; left: 3px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
}

.plus-toggle.on {
    background: var(--primary);
}

.plus-toggle.on::after {
    transform: translateX(18px);
}

@media (min-width: 640px) {
    .plus-sheet {
        left: auto;
        bottom: 90px;
        border-radius: var(--radius-md);
        border-bottom: 1px solid var(--glass-border-h);
        width: 360px;
        transform: translateY(12px) scale(0.96);
        visibility: hidden;
        opacity: 0;
        transition: transform 0.2s ease, opacity 0.2s ease, visibility 0s linear 0.2s;
    }
    .plus-sheet.show {
        transform: translateY(0) scale(1);
        visibility: visible;
        opacity: 1;
        transition: transform 0.2s ease, opacity 0.2s ease, visibility 0s linear 0s;
    }
}

/* ---- Bloom Mode ---- */
.bloom-toggle-btn.active {
    background: var(--primary-dim);
    border-color: var(--primary);
    color: var(--primary);
}

.bloom-toggle-btn.active i { color: var(--primary); }

.bloom-opts-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px 10px;
    flex-wrap: wrap;
}

.bloom-opt-sep {
    width: 1px;
    height: 18px;
    background: var(--glass-border);
    margin: 0 2px;
}

.bloom-opt-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    padding: 6px 13px;
    border-radius: var(--radius-xl);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    transition: var(--transition);
}

.bloom-opt-btn:hover {
    border-color: var(--glass-border-h);
    color: var(--text-main);
}

.bloom-opt-btn.active {
    background: var(--primary-dim);
    border-color: var(--primary);
    color: var(--primary);
}

/* Bloom generated-image message bubble */
.bloom-img-card {
    max-width: 340px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.03);
}

.bloom-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bloom-img-wrap.wide { aspect-ratio: 16 / 9; }
.bloom-img-wrap.tall { aspect-ratio: 3 / 4; }

.bloom-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.bloom-img-wrap img.loaded { display: block; }

.bloom-img-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
    padding: 0 20px;
}

.bloom-spin {
    width: 28px; height: 28px;
    border: 2.5px solid var(--glass-border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: bloomSpin 0.8s linear infinite;
}

@keyframes bloomSpin { to { transform: rotate(360deg); } }

.bloom-img-actions {
    display: flex;
    gap: 8px;
    padding: 10px;
}

.bloom-img-actions button {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    transition: var(--transition);
}

.bloom-img-actions button:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.bloom-img-err {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 12.5px;
    text-align: center;
    padding: 0 16px;
}

.bloom-img-err button {
    background: var(--primary-dim);
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 6px 14px;
    border-radius: var(--radius-xl);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
}

/* Status Indicator */
.status-indicator {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--text-muted);
    font-weight: 500;
}

.dot {
    width: 7px; height: 7px;
    background: var(--accent-green);
    border-radius: 50%;
}

.pulse-dot {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
    animation: statusPulse 2.5s infinite;
}

@keyframes statusPulse {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
    70%  { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);  }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);   }
}

/* ========== CHAT DISPLAY ========== */
.chat-display {
    flex: 1;
    overflow-y: auto;
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

/* Welcome Screen */
.welcome-screen {
    margin: auto;
    text-align: center;
    max-width: 460px;
    animation: fadeSlideUp 0.8s ease both;
}

.welcome-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px; height: 80px;
    margin: 0 auto 20px;
}

.welcome-icon {
    font-size: 38px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    z-index: 1;
    animation: starSpin 6s linear infinite;
}

@keyframes starSpin {
    0%   { transform: rotate(0deg)   scale(1);   }
    50%  { transform: rotate(180deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1);   }
}

.welcome-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 229, 255, 0.2);
    animation: ringExpand 2.5s ease-in-out infinite;
}

@keyframes ringExpand {
    0%   { transform: scale(1);   opacity: 0.6; }
    100% { transform: scale(1.6); opacity: 0;   }
}

.welcome-screen h1 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
    background: linear-gradient(to right, #F0F4FF, #9CA3AF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.welcome-screen p {
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 24px;
}

.feature-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    background: var(--glass-bg-light);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    font-size: 12px;
    color: var(--text-sub);
    font-weight: 500;
    transition: var(--transition);
}

.pill:hover {
    border-color: rgba(0,229,255,0.25);
    color: var(--primary);
    background: var(--primary-dim);
}

.pill i { font-size: 10px; }

.about-blurb {
    margin: 22px auto 0;
    max-width: 400px;
    font-size: 12px;
    line-height: 1.65;
    color: var(--text-muted);
    opacity: 0.85;
}

/* ========== MESSAGE BUBBLES ========== */
.msg {
    max-width: 76%;
    padding: 14px 18px;
    border-radius: 18px;
    margin-bottom: 16px;
    font-size: 14.5px;
    line-height: 1.7;
    animation: popIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    opacity: 0;
    transform: translateY(12px) scale(0.95);
    word-break: break-word;
}

.msg.user {
    align-self: flex-end;
    max-width: 85%;
    background: var(--user-msg);
    border: 1px solid var(--user-msg-border);
    color: #fff;
    border-bottom-right-radius: 4px;
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.msg.bot {
    /* Full-width plain response — matches ChatGPT/Claude/Gemini, where only
       the user's own messages are bubbles and AI replies flow edge-to-edge
       as plain text. Overrides the base .msg card look (padding/radius/bg)
       from the rule above — specificity (.msg.bot > .msg) keeps this intact
       even under the mobile max-width overrides further down. */
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    padding: 4px 0 18px;
    /* No white-space: pre-wrap — markdown handles line breaks */
}

/* File message variant */
.msg.file-msg {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    max-width: 340px;
}

.file-msg-card {
    background: rgba(20, 28, 48, 0.85);
    border: 1px solid var(--glass-border-h);
    border-radius: 16px;
    border-bottom-right-radius: 4px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    backdrop-filter: blur(10px);
}

.file-msg-icon {
    width: 42px; height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.file-msg-icon.image { background: rgba(0, 229, 255, 0.12); color: var(--primary);      }
.file-msg-icon.pdf   { background: rgba(244, 63, 94, 0.12); color: var(--accent-red);   }
.file-msg-icon.text  { background: rgba(99, 102, 241, 0.12); color: var(--secondary);   }

.file-msg-info { min-width: 0; }

.file-msg-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-msg-sub {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Image attachment thumbnail (shows actual image, not just an icon) */
.msg.file-msg:has(.file-msg-image-card) { max-width: 260px; }

.file-msg-image-card {
    flex-direction: column;
    align-items: stretch;
    padding: 8px;
    gap: 8px;
}

.file-msg-thumb {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.file-msg-image-card .file-msg-info {
    padding: 0 4px 2px;
}

/* Typing Indicator */
.typing-indicator {
    display: flex;
    gap: 5px;
    padding: 14px 18px;
    background: var(--bot-msg);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    border-bottom-left-radius: 4px;
    width: fit-content;
    margin-bottom: 16px;
    align-self: flex-start;
    backdrop-filter: blur(12px);
    animation: popIn 0.3s ease forwards;
    opacity: 0;
}

.typing-dot {
    width: 6px; height: 6px;
    background: var(--text-muted);
    border-radius: 50%;
    animation: typingBounce 1.2s infinite;
}

.typing-dot:nth-child(1) { animation-delay: 0s;    }
.typing-dot:nth-child(2) { animation-delay: 0.18s; }
.typing-dot:nth-child(3) { animation-delay: 0.36s; }

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0);   opacity: 0.35; }
    30%            { transform: translateY(-5px); opacity: 1;    }
}

/* ── Live streaming cursor ──
   Shown at the end of the bot bubble while tokens are still arriving —
   the little blinking bar you see in ChatGPT/Claude while it "types". */
.stream-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: var(--primary);
    animation: streamBlink 0.9s step-start infinite;
}

@keyframes streamBlink {
    50% { opacity: 0; }
}

/* Live-streaming bubble — plain text version of .msg.bot, shown while
   tokens are still arriving. white-space:pre-wrap keeps line breaks
   readable before markdown parsing kicks in on the final swap. */
.msg.bot.streaming-msg {
    white-space: pre-wrap;
    animation: none;
    opacity: 1;
    transform: none;
}

/* ========================================
   MARKDOWN STYLING — Bot Messages
   Tables, Bold, Italic, Lists, Headings
======================================== */

/* Headings inside bot messages */
.msg.bot h1, .msg.bot h2, .msg.bot h3,
.msg.bot h4, .msg.bot h5, .msg.bot h6 {
    color: var(--text-main);
    font-weight: 700;
    margin: 14px 0 6px;
    line-height: 1.3;
}

.msg.bot h1 { font-size: 18px; }
.msg.bot h2 { font-size: 16px; }
.msg.bot h3 { font-size: 14.5px; }

/* Paragraphs */
.msg.bot p {
    margin: 6px 0;
    line-height: 1.7;
}

.msg.bot p:first-child { margin-top: 0; }
.msg.bot p:last-child  { margin-bottom: 0; }

/* Bold & Italic */
.msg.bot strong { color: var(--primary); font-weight: 700; }
.msg.bot em     { color: var(--text-sub); font-style: italic; }

/* Inline code */
.msg.bot :not(pre) > code {
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.15);
    color: var(--primary);
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 13px;
    font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
}

/* Lists */
.msg.bot ul, .msg.bot ol {
    padding-left: 22px;
    margin: 8px 0;
}

.msg.bot li {
    margin: 4px 0;
    line-height: 1.6;
}

.msg.bot ul li::marker { color: var(--primary); }
.msg.bot ol li::marker { color: var(--primary); font-weight: 700; }

/* Blockquote */
.msg.bot blockquote {
    border-left: 3px solid var(--primary);
    margin: 10px 0;
    padding: 8px 14px;
    background: rgba(0, 229, 255, 0.05);
    border-radius: 0 8px 8px 0;
    color: var(--text-sub);
    font-style: italic;
}

/* Horizontal Rule */
.msg.bot hr {
    border: none;
    border-top: 1px solid var(--glass-border-h);
    margin: 14px 0;
}

/* ========================================
   TABLE STYLING — Markdown Tables
======================================== */
.msg.bot .table-wrapper {
    overflow-x: auto; /* Responsive horizontal scroll */
    margin: 12px 0;
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border-h);
}

.msg.bot table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    min-width: 300px;
}

.msg.bot thead {
    background: rgba(0, 229, 255, 0.1);
}

.msg.bot th {
    padding: 10px 14px;
    text-align: left;
    font-weight: 700;
    color: var(--primary);
    border-bottom: 1px solid var(--glass-border-h);
    white-space: nowrap;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.msg.bot td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--glass-border);
    color: var(--text-main);
    vertical-align: top;
}

/* Zebra striping */
.msg.bot tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.025);
}

.msg.bot tbody tr:last-child td {
    border-bottom: none;
}

.msg.bot tbody tr:hover {
    background: rgba(0, 229, 255, 0.05);
    transition: background 0.15s ease;
}

/* ========================================
   CODE BLOCK STYLING
   Dark theme, rounded, scrollable
======================================== */

/* Wrapper with relative positioning for header */
.msg.bot pre.code-block-wrap {
    position: relative;
    background: var(--code-bg) !important;
    border: 1px solid var(--code-border);
    border-radius: var(--radius-md);
    margin: 12px 0;
    overflow: hidden;
    padding: 0 !important; /* Header handles top padding */
}

/* Code block header bar */
.code-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: var(--code-header-bg);
    border-bottom: 1px solid var(--code-border);
}

.code-lang-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-family: 'Fira Code', monospace;
}

/* The actual code element */
.msg.bot pre.code-block-wrap code {
    display: block;
    padding: 16px 18px;
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.65;
    font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    background: transparent !important;
    color: #e6edf3;
    border-radius: 0;
    border: none;
}

/* Scrollbar for code blocks */
.msg.bot pre.code-block-wrap code::-webkit-scrollbar {
    height: 4px;
}
.msg.bot pre.code-block-wrap code::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 4px;
}

/* ========================================
   COPY CODE BUTTON — Glassmorphism style
======================================== */
.copy-code-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-border-h);
    color: var(--text-sub);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: var(--transition);
    font-family: inherit;
    white-space: nowrap;
    flex-shrink: 0;
}

.copy-code-btn:hover {
    background: rgba(0, 229, 255, 0.12);
    border-color: rgba(0, 229, 255, 0.3);
    color: var(--primary);
}

.copy-code-btn i { font-size: 10px; }

/* ========================================
   MESSAGE ACTION BAR — Copy Response
======================================== */
.msg-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-top: 4px;
    flex-wrap: wrap;
}

.msg-action-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    padding: 5px 12px;
    border-radius: var(--radius-xl);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
    font-family: inherit;
}

.msg-action-btn:hover {
    background: var(--primary-dim);
    border-color: rgba(0, 229, 255, 0.25);
    color: var(--primary);
    transform: translateY(-1px);
}

.msg-action-btn i { font-size: 11px; }

/* Icon-only action buttons — Share, Retry, Thumbs up/down */
.msg-action-icon-btn {
    width: 30px; height: 30px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    font-family: inherit;
    font-size: 12px;
}

.msg-action-icon-btn:hover {
    background: var(--primary-dim);
    border-color: rgba(0, 229, 255, 0.25);
    color: var(--primary);
    transform: translateY(-1px);
}

.msg-action-icon-btn:disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.msg-action-icon-btn.thumb-up.active {
    background: rgba(16, 185, 129, 0.15);
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.msg-action-icon-btn.thumb-down.active {
    background: rgba(244, 63, 94, 0.15);
    border-color: var(--accent-red);
    color: var(--accent-red);
}

.msg-action-icon-btn.retry-btn.spinning i {
    animation: retrySpin 0.7s linear infinite;
}

@keyframes retrySpin {
    to { transform: rotate(360deg); }
}

/* ========== INPUT SECTION ========== */
.input-section {
    padding: 0 24px 20px;
    flex-shrink: 0;
}

/* ---- File Preview Bar ---- */
.file-preview-bar {
    display: none;
    margin-bottom: 10px;
    animation: slideDown 0.3s ease;
}

.file-preview-bar.show { display: block; }

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.file-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(14, 20, 34, 0.7);
    border: 1px solid var(--glass-border-h);
    border-radius: var(--radius-md);
    backdrop-filter: blur(12px);
}

.file-chip-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.file-chip-icon.image { background: var(--primary-dim);      color: var(--primary);    }
.file-chip-icon.pdf   { background: rgba(244,63,94,0.12);    color: var(--accent-red); }
.file-chip-icon.txt   { background: var(--secondary-dim);    color: var(--secondary);  }

.file-chip-info { flex: 1; min-width: 0; }

.file-chip-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-chip-status {
    font-size: 11px;
    color: var(--text-muted);
    display: block;
    margin-top: 2px;
}

.file-chip-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 5px;
    border-radius: 6px;
    font-size: 13px;
    transition: var(--transition);
    line-height: 1;
    flex-shrink: 0;
}

.file-chip-remove:hover { color: var(--accent-red); background: rgba(244,63,94,0.1); }

/* ---- Document/Photo mode toggle (image chips only) ---- */
.file-chip-mode-toggle {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.chip-mode-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    font-size: 10.5px;
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid var(--glass-border-h);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}

.chip-mode-btn i { font-size: 9px; }

.chip-mode-btn:hover {
    color: var(--text-main);
    border-color: var(--primary);
}

.chip-mode-btn.active {
    background: var(--primary-dim);
    border-color: var(--primary);
    color: var(--primary);
}

/* OCR Progress Bar */
.ocr-progress-bar {
    height: 3px;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
    margin-top: 6px;
    overflow: hidden;
    display: none;
}

.ocr-progress-bar.show { display: block; }

.ocr-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 4px;
    width: 0%;
    transition: width 0.4s ease;
    position: relative;
}

.ocr-progress-fill::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 60px; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4));
    animation: shimmer 1s infinite;
}

@keyframes shimmer {
    from { opacity: 0; }
    50%  { opacity: 1; }
    to   { opacity: 0; }
}

/* ---- Input Bar ---- */
.input-container {}

.input-bar {
    display: flex;
    align-items: flex-end;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border-h);
    border-radius: var(--radius-xl);
    padding: 10px 12px 10px 10px;
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.05);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    gap: 4px;
}

.input-bar:focus-within {
    border-color: rgba(0, 229, 255, 0.3);
    box-shadow: var(--shadow-md), 0 0 0 3px rgba(0, 229, 255, 0.06), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ── Fix: stray blue "teardrop" stuck below the input ──
   That's Android's native text-selection/caret drag-handle — drawn by
   the OS relative to the textarea's caret, not by our CSS. When the
   caret sits near the bottom edge (e.g. after a long-press-to-select
   gesture on a short/empty textarea), the handle renders a few px
   below it and nothing was clipping that overflow, so it visually
   spilled out past the rounded input pill and could look "stuck" there
   even after the selection was gone. This wrapper clips just the
   textarea's own overflow — normal text selection/copy-paste still
   works exactly as before. Deliberately NOT applied to .input-bar
   itself, since that would also clip the mic button's pulsing
   recording ring (.mic-ring uses inset:-6px and needs overflow:visible
   on its ancestor to show correctly). */
.textarea-clip {
    flex: 1;
    align-self: flex-end;
    overflow: hidden;
    border-radius: 14px;
}

#inputBox {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-main);
    font-size: 14.5px;
    font-family: inherit;
    resize: none;
    outline: none;
    max-height: 130px;
    min-height: 26px;
    padding: 6px 4px;
    line-height: 1.55;
    display: block;
}

#inputBox::placeholder { color: var(--text-muted); }

/* ---- Icon Action Buttons ---- */
.icon-action-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: var(--transition);
    flex-shrink: 0;
    position: relative;
    font-family: inherit;
}

.icon-action-btn:hover {
    color: var(--text-main);
    background: var(--glass-bg-light);
    border-color: var(--glass-border);
}

.attach-btn:hover { color: var(--primary); }

/* Mic Button */
.mic-btn { overflow: visible; }

.mic-btn.recording {
    color: #fff;
    background: var(--accent-red);
    border-color: transparent;
    animation: micPulse 1.2s infinite;
}

.mic-btn.recording .mic-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(244, 63, 94, 0.5);
    animation: micRing 1.2s infinite;
    pointer-events: none;
}

@keyframes micPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.5); }
    50%       { box-shadow: 0 0 0 8px rgba(244, 63, 94, 0); }
}

@keyframes micRing {
    0%   { transform: scale(1);   opacity: 0.7; }
    100% { transform: scale(1.5); opacity: 0;   }
}

/* Send Button */
.action-buttons {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.send-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #007BFF);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: var(--transition);
    box-shadow: 0 4px 16px rgba(0, 180, 255, 0.35);
    flex-shrink: 0;
}

.send-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 22px rgba(0, 200, 255, 0.5);
}

.send-btn:disabled {
    background: rgba(255,255,255,0.08);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
    color: var(--text-muted);
}

.disclaimer {
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 10px;
}

/* ---- Icon Buttons (sidebar) ---- */
.icon-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 17px;
    cursor: pointer;
    transition: var(--transition);
    padding: 8px;
    border-radius: 8px;
    line-height: 1;
}

.icon-btn:hover {
    color: var(--text-main);
    background: var(--glass-bg-light);
}

/* ========== TOAST ========== */
.toast {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(14, 20, 34, 0.92);
    border: 1px solid var(--glass-border-h);
    backdrop-filter: blur(16px);
    color: var(--text-main);
    padding: 10px 18px;
    border-radius: var(--radius-xl);
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 9999;
    white-space: nowrap;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast i { color: var(--primary); }

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

/* ========== ANIMATIONS ========== */
@keyframes popIn {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ========== MOBILE RESPONSIVE ========== */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: min(320px, 85vw);
        transform: translateX(-100%);
        z-index: 200;
    }

    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay.show { display: block; }
    .mobile-menu-btn { display: flex; }

    .chat-header { padding: 0 16px; }

    .chat-display { padding: 18px 16px; }

    .input-section { padding: 0 14px 16px; }

    .msg { max-width: 88%; }

    .feature-pills { gap: 6px; }
    .pill { font-size: 11px; padding: 5px 10px; }

    /* Smaller code blocks on mobile */
    .msg.bot pre.code-block-wrap code {
        font-size: 12px;
        padding: 12px 14px;
    }

    /* Table scrolls on mobile */
    .msg.bot .table-wrapper {
        max-width: calc(88vw - 48px);
    }
}

@media (max-width: 480px) {
    .msg { max-width: 94%; font-size: 14px; }
    .welcome-screen h1 { font-size: 19px; }
    .send-btn, .icon-action-btn { width: 36px; height: 36px; }
    .msg-actions { gap: 6px; }
    .msg-action-btn { font-size: 11px; padding: 4px 10px; }
}
/* ============================================================
   Shanu AI v3 — APPEND THIS TO THE END OF style.css
   New: Multi-file chips, Chart wrap, Preview Modal, Action pills
   ============================================================ */

/* ---- Multi-File List ---- */
.multi-file-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 4px;
}

.multi-file-list .file-chip {
    animation: slideDown 0.2s ease both;
}

/* File type icon overrides */
.file-chip-icon.code {
    background: rgba(99, 102, 241, 0.12);
    color: var(--secondary);
}

/* ---- Chart Container (appears as a bot message) ---- */
.chart-wrap {
    align-self: flex-start;
    background: var(--bot-msg);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    border-bottom-left-radius: 4px;
    padding: 16px;
    max-width: 520px;
    width: 95%;
    margin-bottom: 16px;
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
    animation: popIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    opacity: 0;
}

.chart-wrap-label {
    font-size: 10.5px;
    color: var(--text-muted);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

/* ---- Image Generation (Pollinations.ai) ---- */
.image-gen-box {
    width: 100%;
    min-height: 220px;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
}

.image-gen-result {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    animation: popIn 0.3s ease forwards;
}

.image-gen-loading,
.image-gen-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

.image-gen-loading i {
    font-size: 22px;
    color: var(--primary);
}

.image-gen-error i {
    font-size: 20px;
    color: var(--accent-rose, #F43F5E);
}

.image-gen-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

/* ---- Action Result Pill (shown after PDF/PPT/Preview) ---- */
.action-result-pill {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.22);
    border-radius: var(--radius-xl);
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-green);
    margin-bottom: 14px;
    animation: fadeSlideUp 0.3s ease both;
}

.action-result-pill i { font-size: 11px; }

/* ---- Action Result Card (PDF/PPT/Preview — clickable, re-openable) ---- */
.action-result-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    width: fit-content;
    max-width: 100%;
}

.action-result-card > i {
    display: inline;
}

.action-result-card span {
    color: var(--text-main);
    font-weight: 600;
    font-size: 13px;
}

.action-result-btns {
    display: flex;
    gap: 8px;
}

.action-result-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-border-h);
    color: var(--text-main);
    padding: 6px 14px;
    border-radius: var(--radius-xl);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
}

.action-result-btn:hover {
    background: var(--primary-dim);
    border-color: var(--primary);
    color: var(--primary);
}

/* ---- Live Preview Modal ---- */
.preview-modal {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.preview-modal.show {
    opacity: 1;
    pointer-events: all;
}

.preview-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.preview-modal-inner {
    position: relative;
    width: 100%;
    max-width: 960px;
    height: 87vh;
    display: flex;
    flex-direction: column;
    background: rgba(8, 12, 24, 0.95);
    border: 1px solid var(--glass-border-h);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,229,255,0.06);
    transform: translateY(20px) scale(0.97);
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                opacity 0.35s ease;
    opacity: 0;
}

.preview-modal.show .preview-modal-inner {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.preview-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
    background: rgba(0,0,0,0.2);
}

.preview-modal-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-main);
}

.preview-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    background: var(--primary-dim);
    color: var(--primary);
    border-radius: 20px;
    letter-spacing: 0.4px;
    border: 1px solid rgba(0,229,255,0.2);
}

.preview-modal-actions {
    display: flex;
    gap: 2px;
}

.preview-frame-wrap {
    flex: 1;
    overflow: hidden;
    background: #ffffff;
    position: relative;
}

#previewFrame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* ---- Inline code in bot messages ---- */
.msg.bot code {
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.12);
    border-radius: 5px;
    padding: 1px 5px;
    font-family: 'Courier New', monospace;
    font-size: 12.5px;
    color: var(--primary);
}

/* ---- Processing status badge in chip ---- */
.file-chip-status.processing {
    color: var(--primary);
    animation: statusBlink 1s infinite;
}

.file-chip-status.done { color: var(--accent-green); }
.file-chip-status.error { color: var(--accent-red); }

@keyframes statusBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ---- Mobile adjustments ---- */
@media (max-width: 768px) {
    .preview-modal {
        padding: 0;
        align-items: flex-end;
    }

    .preview-modal-inner {
        height: 90vh;
        max-width: 100%;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        border-bottom: none;
    }

    .chart-wrap {
        max-width: 100%;
        width: 100%;
    }
   }
/* ============================================================
   Shanu AI v3 — APPEND THIS TO THE END OF style.css
   New: Multi-file chips, Chart wrap, Preview Modal, Action pills
   ============================================================ */
/* ============================================================
   Shanu AI v4 — CSS PATCH
   INSTRUCTIONS: Paste this at the very END of your style.css.
   First DELETE any existing blocks for: .multi-file-list,
   .chart-wrap, .preview-modal, .action-result-pill
   (They may appear twice from previous style-additions.css paste)
   ============================================================ */

/* ── Multi-File List ─────────────────────────────────────── */
.multi-file-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 6px;
}

.file-chip-icon.code {
    background: rgba(99, 102, 241, 0.12);
    color: var(--secondary);
}

.file-chip-status.processing { color: var(--primary); animation: statusBlink 1s infinite; }
.file-chip-status.done       { color: var(--accent-green); }
.file-chip-status.error      { color: var(--accent-red); }

@keyframes statusBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}

/* ── Chart Container ─────────────────────────────────────── */
.chart-wrap {
    align-self: flex-start;
    background: var(--bot-msg);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    border-bottom-left-radius: 4px;
    padding: 16px;
    max-width: 520px;
    width: 95%;
    margin-bottom: 16px;
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
    animation: popIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    opacity: 0;
}

.chart-wrap-label {
    font-size: 10.5px;
    color: var(--text-muted);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

/* ── Live Preview Modal ──────────────────────────────────── */
.preview-modal {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.preview-modal.show {
    opacity: 1;
    pointer-events: all;
}

.preview-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(10px);
}

.preview-modal-inner {
    position: relative;
    width: 100%;
    max-width: 960px;
    height: 87vh;
    display: flex;
    flex-direction: column;
    background: rgba(8, 12, 24, 0.96);
    border: 1px solid var(--glass-border-h);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transform: translateY(20px) scale(0.97);
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.35s ease;
    opacity: 0;
}

.preview-modal.show .preview-modal-inner {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.preview-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.2);
}

.preview-modal-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-main);
}

.preview-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    background: var(--primary-dim);
    color: var(--primary);
    border-radius: 20px;
    letter-spacing: 0.4px;
    border: 1px solid rgba(0, 229, 255, 0.2);
}

.preview-modal-actions { display: flex; gap: 2px; }

.preview-frame-wrap {
    flex: 1;
    overflow: hidden;
    background: #ffffff;
}

#previewFrame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* ── Bot message markdown styling ────────────────────────── */
/* Tables from marked.js */
.msg.bot table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 13px;
}

.msg.bot th,
.msg.bot td {
    padding: 7px 12px;
    border: 1px solid var(--glass-border-h);
    text-align: left;
}

.msg.bot th {
    background: var(--primary-dim);
    color: var(--primary);
    font-weight: 700;
}

.msg.bot tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.02);
}

/* Bullet & numbered lists */
.msg.bot ul,
.msg.bot ol {
    padding-left: 20px;
    margin: 6px 0;
}

.msg.bot li { margin: 3px 0; line-height: 1.6; }

.msg.bot ul li::marker { color: var(--primary); }
.msg.bot ol li::marker { color: var(--primary); font-weight: 700; }

/* Blockquotes */
.msg.bot blockquote {
    border-left: 3px solid var(--primary);
    margin: 8px 0;
    padding: 6px 14px;
    background: var(--primary-dim);
    border-radius: 0 8px 8px 0;
    color: var(--text-sub);
    font-style: italic;
}

/* Headings inside bot messages */
.msg.bot h1, .msg.bot h2, .msg.bot h3,
.msg.bot h4, .msg.bot h5, .msg.bot h6 {
    color: var(--text-main);
    margin: 10px 0 4px;
    font-weight: 700;
    line-height: 1.3;
}

.msg.bot h1 { font-size: 18px; }
.msg.bot h2 { font-size: 16px; }
.msg.bot h3 { font-size: 14.5px; }
.msg.bot h4, .msg.bot h5, .msg.bot h6 { font-size: 13.5px; }

/* Links */
.msg.bot a {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-color: rgba(0, 229, 255, 0.35);
    text-underline-offset: 2px;
}

/* ── Mobile adjustments ──────────────────────────────────── */
@media (max-width: 768px) {
    .preview-modal { padding: 0; align-items: flex-end; }
    .preview-modal-inner { height: 90vh; max-width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
    .chart-wrap { max-width: 100%; width: 100%; }
    .msg.bot table { font-size: 11.5px; }
    .msg.bot th, .msg.bot td { padding: 5px 8px; }
       }