/*
 * AI Counsellor chat — presentation for #aiChatPopup and its launcher.
 *
 * Extracted verbatim from the inline <style> block in
 * resources/views/admin/layout/ai-chat-model.blade.php, which had grown to 972 lines
 * inside a 2313-line Blade file and made any visual change unreviewable.
 *
 * Still linked from @push('body_scripts') rather than head_styles, deliberately: the
 * inline block loaded at that point in the document, and moving it into <head> would
 * change where these rules sit in the cascade relative to page styles. That is a
 * separate decision from extracting the file.
 */

:root {
    --ai-z-overlay: 10000;
    --ai-z-button: 10001;
    --ai-z-dialog: 10002;
}

/* Floating Button */
.launch-ai-btn {
    position: fixed;
    /* Fixed position for floating effect */
    bottom: 30px;
    right: 30px;
    background: linear-gradient(135deg, #0c4a6e, #0284c7);
    color: white;
    border: none;
    border-radius: 999px;
    padding: 18px 30px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    z-index: var(--ai-z-button);
    transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
}

.launch-ai-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

/* Chat Buttons */
.mic-btn,
.send-btn,
.reset-btn {
    background: var(--hero-dark) !important;
}

.mic-btn:hover,
.send-btn:hover,
.reset-btn:hover {
    background: var(--ocean-mid) !important;
}

/* Backdrop Overlay */
.ai-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
    z-index: var(--ai-z-overlay);
}

.ai-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Enterprise Data Table */
.ai-chat-table.table-responsive {
    overflow-x: auto;
    overflow-y: auto;
    /* Vertical scroll for tall tables */
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    max-width: 100%;
    max-height: 450px;
    /* Limit height, scroll for more */
    margin-bottom: 15px;
    border: 1px solid #e2e8f0;
    /* Outer border */
    /* Improved scrollbar for tables */
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

.ai-chat-table.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.ai-chat-table.table-responsive::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.ai-chat-table.table-responsive::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.ai-chat-table.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.ai-msg table {
    width: 100%;
    min-width: 600px;
    /* Force scroll on small screens */
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    /* Margin handled by wrapper */
    font-size: 13px;
    background: #ffffff;
    /* Border/Shadow moved to wrapper or adjusted */
}

.ai-msg th {
    text-align: left;
    padding: 12px 16px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #1e293b, #334155);
    /* Enterprise Dark Blue */
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #0f172a;
}

.ai-msg td {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
    line-height: 1.5;
    /* Cell width limits to prevent overflow */
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-msg th {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.ai-msg tr:nth-child(even) {
    background-color: #f8fafc;
}

/* Zebra Striping */
.ai-msg tr:hover td {
    background-color: #e2e8f0;
    transition: background 0.2s;
}

/* Glassmorphism Update for Chat Container */
.ai-chat-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: min(900px, 92vw);
    height: 95vh;
    max-height: 98vh;
    background: rgba(255, 255, 255, 0.85);
    /* Translucent */
    backdrop-filter: blur(12px);
    /* Blur */
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: none;
    flex-direction: column;
    z-index: var(--ai-z-dialog);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
    animation: aiFadeIn .2s ease;
    transition: all 0.3s ease-in-out;
}

.ai-chat-container.active {
    display: flex;
}

/* Fullscreen Mode */
.ai-chat-container.fullscreen {
    inset: 0;
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
    max-height: none !important;
    bottom: 0;
    right: 0;
}

@keyframes aiFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header */
.ai-chat-header {
    background: var(--hero-dark);
    color: white;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.ai-title {
    font-weight: bold;
    font-size: 16px;
}

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

.header-btn {
    background: transparent;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.2s ease;
}

.header-btn:hover {
    transform: scale(1.2);
}

/* Body */
.ai-chat-body {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f9fafb;
}

.ai-msg,
.user-msg {
    padding: 10px 14px;
    border-radius: 12px;
    max-width: 85%;
    line-height: 1.4;
    font-size: 14px;
    animation: fadeUp .15s ease;
    word-wrap: break-word;
    white-space: pre-wrap;
}

/* Wider container when message contains tables */
/* Using class instead of :has() for browser compatibility */
.ai-msg.has-table {
    max-width: 95%;
}

.ai-msg {
    background: #e9ecef;
    align-self: flex-start;
}

.user-msg {
    background: #4facfe;
    color: white;
    align-self: flex-end;
}

.ai-msg.thinking {
    color: #888;
    font-style: italic;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Footer */
.ai-chat-footer {
    display: flex;
    padding: 10px;
    gap: 8px;
    border-top: 1px solid #ddd;
    background: white;
    align-items: center;
}

.ai-chat-footer textarea {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 10px 15px;
    outline: none;
    font-size: 14px;
    resize: none;
    max-height: 100px;
    overflow-y: auto;
    font-family: inherit;
    line-height: 1.4;
}

.ai-chat-footer textarea:focus {
    box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.25);
    border-color: var(--hero-dark);
}

.ai-chat-footer button {
    background: #4facfe;
    border: none;
    color: white;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    cursor: pointer;
    font-size: 18px;
    display: grid;
    place-items: center;
}

.reset-btn {
    border-radius: 10px;
}

/* Voice Input Button */
.mic-btn {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: none;
    color: white;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    cursor: pointer;
    font-size: 18px;
    display: grid;
    place-items: center;
    transition: all 0.2s;
}

.mic-btn:hover {
    transform: scale(1.1);
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}

.mic-btn.recording {
    animation: pulse-red 1s infinite;
    background: #dc2626;
}

@keyframes pulse-red {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(220, 38, 38, 0);
    }
}

/* Mobile Fullscreen Default */
@media (max-width: 767px) {
    .ai-chat-container {
        inset: 0;
        width: 100vw;
        height: 100vh;
        max-height: none;
        border-radius: 0;
    }

    .ai-header-right .maximize-btn {
        display: none;
        /* Hide fullscreen button on mobile */
    }
}

/* Skeleton Loader */
.skeleton-loader {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    width: 100%;
    max-width: 300px;
}

.skeleton-line {
    height: 12px;
    background: #e2e8f0;
    border-radius: 4px;
    animation: shimmer 1.5s infinite linear;
    background-image: linear-gradient(to right, #e2e8f0 0%, #f1f5f9 20%, #e2e8f0 40%, #e2e8f0 100%);
    background-size: 1000px 100%;
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }

    100% {
        background-position: 1000px 0;
    }
}

/* Suggestion Chips */
.suggestion-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.suggestion-chip {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 12px;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.suggestion-chip:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #1e293b;
    transform: translateY(-1px);
}

/* Waveform Thinking Indicator */
/* Gemini Sparkle Thinking Indicator (Gradient Mist) */
.thinking-mist {
    width: 24px;
    height: 24px;
    background: linear-gradient(45deg, #4facfe, #00f2fe, #a855f7);
    background-size: 200% 200%;
    border-radius: 50%;
    filter: blur(4px);
    animation: mist-flow 3s ease infinite;
    margin: 4px 0;
}

@keyframes mist-flow {
    0% {
        background-position: 0% 50%;
        transform: scale(0.9);
    }

    50% {
        background-position: 100% 50%;
        transform: scale(1.1);
    }

    100% {
        background-position: 0% 50%;
        transform: scale(0.9);
    }
}

/* Counselor Tip (Blockquote) - Clean Professional Style */
.ai-msg blockquote {
    border-left: 3px solid #f59e0b;
    background: #fffbeb;
    margin: 12px 0;
    padding: 10px 14px;
    border-radius: 4px;
    color: #78350f;
    font-size: 13.5px;
}

/* Course Action Cards (H4 + List) */
.ai-msg h4 {
    margin-top: 20px;
    margin-bottom: 8px;
    font-size: 14px;
    color: #1e293b;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 6px;
}

.ai-msg ul {
    background: white;
    padding: 12px 12px 12px 30px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

/* Thinking Animation Text */
.thinking-text {
    font-size: 12px;
    color: #64748b;
    margin-top: 5px;
    animation: pulseText 2s infinite;
}

@keyframes pulseText {
    0% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.6;
    }
}

/* ========== ENHANCED CONTENT FORMATTING ========== */

/* Headings */
.ai-msg h2 {
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
    margin: 18px 0 10px;
    border-left: 4px solid #4facfe;
    padding-left: 10px;
}

.ai-msg h3 {
    font-size: 15px;
    font-weight: 600;
    color: #334155;
    margin: 14px 0 8px;
}

/* Paragraphs & Lists */
.ai-msg p {
    margin: 8px 0;
    line-height: 1.65;
}

.ai-msg ol {
    margin: 10px 0;
    padding-left: 22px;
}

.ai-msg li {
    margin-bottom: 5px;
    line-height: 1.55;
}

/* Code Blocks */
.ai-msg code {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
    color: #c7254e;
}

.ai-msg pre {
    background: #1e293b;
    color: #e2e8f0;
    padding: 14px;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 12px;
    margin: 12px 0;
}

.ai-msg pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

/* Links */
.ai-msg a {
    color: #2563eb;
    text-decoration: none;
    border-bottom: 1px dashed #2563eb;
}

.ai-msg a:hover {
    color: #1d4ed8;
    border-bottom-style: solid;
}

/* ========== CHROME ENHANCEMENTS ========== */

/* Avatar Prefix - Removed for cleaner look, or replace with SVG later */
/* .ai-msg::before { content: '🎓'; ... } REMOVED */

/* Send Button Hover */
.ai-chat-footer button:hover {
    transform: scale(1.08);
    background: linear-gradient(135deg, #4facfe, #00c6fb);
    transition: all 0.2s;
}

.ai-chat-footer button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ========== PHASE 1: PREMIUM FEATURES ========== */

/* Feature 1: Smooth Text Appearance */
.ai-msg.streaming .content-fade {
    animation: contentFadeIn 0.15s ease-out forwards;
}

@keyframes contentFadeIn {
    from {
        opacity: 0.3;
    }

    to {
        opacity: 1;
    }
}

/* Feature 2: Code Block with Copy Button */
.code-block-wrapper {
    position: relative;
    margin: 12px 0;
}

.code-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1e293b;
    padding: 8px 12px;
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid #334155;
}

.code-block-header .code-language {
    font-size: 12px;
    color: #94a3b8;
    font-family: 'Fira Code', 'Consolas', monospace;
    text-transform: lowercase;
}

.code-block-header .copy-btn {
    background: transparent;
    border: 1px solid #475569;
    color: #94a3b8;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.code-block-header .copy-btn:hover {
    background: #334155;
    color: #e2e8f0;
    border-color: #64748b;
}

.code-block-header .copy-btn.copied {
    color: #10b981;
    border-color: #10b981;
}

.code-block-wrapper pre {
    margin: 0 !important;
    border-radius: 0 0 8px 8px !important;
}

/* Feature 3: Stop Generation Button */
.stop-btn {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border: none;
    color: white;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    cursor: pointer;
    font-size: 16px;
    display: grid;
    place-items: center;
    transition: all 0.2s;
}

.stop-btn:hover {
    transform: scale(1.08);
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
}

.generation-stopped {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    font-size: 12px;
    color: #991b1b;
}

.generation-stopped svg {
    width: 14px;
    height: 14px;
}

/* ========== PHASE 2: COMPACT PROGRESS (Step-based colors) ========== */
.progress-inline {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border: 1px solid #d1d5db;
    border-radius: 14px;
    font-size: 15px;
    color: #1f2937;
    max-width: 92%;
    animation: fadeIn 0.25s ease-out;
    position: relative;
    overflow: hidden;
}

/* Shimmer effect - always active while processing */
.progress-inline::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(156, 163, 175, 0.25) 50%, transparent 100%);
    animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.progress-inline .spinner-small {
    width: 22px;
    height: 22px;
    border: 3px solid #d1d5db;
    border-top-color: #6b7280;
    border-right-color: #6b7280;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

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

.progress-inline .progress-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 1;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.progress-inline .progress-dot {
    display: inline-block;
    font-weight: 700;
    animation: dotPulse 1s infinite ease-in-out;
}

.progress-inline .progress-dot:nth-child(2) {
    animation-delay: 0.12s;
}

.progress-inline .progress-dot:nth-child(3) {
    animation-delay: 0.24s;
}

@keyframes dotPulse {

    0%,
    80%,
    100% {
        opacity: 0.25;
    }

    40% {
        opacity: 1;
    }
}

/* ===== GREEN THEME: Web browsing ===== */
.progress-inline.step-web {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #6ee7b7;
    color: #065f46;
}

.progress-inline.step-web::before {
    background: linear-gradient(90deg, transparent 0%, rgba(16, 185, 129, 0.2) 50%, transparent 100%);
}

.progress-inline.step-web .spinner-small {
    border-color: #a7f3d0;
    border-top-color: #10b981;
    border-right-color: #10b981;
}

/* ===== BLUE THEME: Writing/Synthesis ===== */
.progress-inline.step-synthesis {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #93c5fd;
    color: #1e40af;
}

.progress-inline.step-synthesis::before {
    background: linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.2) 50%, transparent 100%);
}

.progress-inline.step-synthesis .spinner-small {
    border-color: #bfdbfe;
    border-top-color: #3b82f6;
    border-right-color: #3b82f6;
}

/* ===== PURPLE THEME: Searching/Default ===== */
.progress-inline.step-searching {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border-color: #c4b5fd;
    color: #5b21b6;
}

.progress-inline.step-searching::before {
    background: linear-gradient(90deg, transparent 0%, rgba(139, 92, 246, 0.2) 50%, transparent 100%);
}

.progress-inline.step-searching .spinner-small {
    border-color: #ddd6fe;
    border-top-color: #8b5cf6;
    border-right-color: #8b5cf6;
}

/* ========== SOURCES SECTION (Professional minimal design) ========== */
.sources-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.sources-intro {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 12px;
    letter-spacing: 0.01em;
}

.sources-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.source-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 8px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    color: #374151;
    transition: all 0.15s ease;
    max-width: 180px;
}

.source-chip:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #111827;
}

.source-chip .source-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #f3f4f6;
    color: #6b7280;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.source-chip:hover .source-num {
    background: #e5e7eb;
    color: #374151;
}

.source-chip .source-domain {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
}

/* Favicon style */
.source-chip .source-favicon {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ============================================================================
   AI COUNSELLOR — v2 PRESENTATION (student + lead portals only)
   ============================================================================
   Scoped to `body.ai-chat-v2`, set by student/layout/layout.blade.php and
   lead/layout/layout.blade.php. The admin layouts do not set it, so every rule
   above remains the admin experience, unchanged.

   Presentation only. Not one element id, class name or JS hook is altered:
   addUserMessage() / addAIMessage() keep writing .ai-msg and .user-msg, the
   markdown pipeline keeps emitting into them, and progress.js is untouched.
   That is why avatars are ::before pseudo-elements and the thinking indicator
   is a ::after animation — both attach to markup the JS already produces.
   ============================================================================ */

/* ---------- Launcher ---------- */
/* Was 18px/30px padding at 16px bold, permanently over the bottom-right of every
   page. Smaller, so it reads as an offer rather than an obstruction. */
body.ai-chat-v2 .launch-ai-btn {
    bottom: 24px;
    right: 24px;
    padding: 12px 20px;
    font-size: 0.88rem;
    font-weight: 700;
    background: linear-gradient(135deg, #38bdf8, var(--hero-dark));
    box-shadow: 0 8px 22px rgba(12, 74, 110, 0.35);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: opacity .25s ease, padding .25s ease, box-shadow .25s ease,
                transform .2s ease-in-out;
}

body.ai-chat-v2 .launch-ai-label {
    max-width: 180px;
    overflow: hidden;
    transition: opacity .18s ease, max-width .25s ease, margin .25s ease;
}

/* Collapse + soften while the page is being scrolled.
   The launcher is fixed over page content, so at rest it sits on top of whatever the
   user is reading. While scrolling it drops to an icon at 55% opacity, and 400ms after
   scrolling stops it returns to the full pill. `is-scrolling` is toggled on <body> by
   the listener in ai-chat-model.blade.php.

   Hover always wins, so reaching for it restores it immediately even mid-scroll, and
   :focus-visible does the same for keyboard users — a control that shrank away from a
   keyboard focus ring would be worse than the problem being solved. */
body.ai-chat-v2.is-scrolling .launch-ai-btn {
    padding: 13px;
    opacity: 0.55;
    box-shadow: 0 4px 12px rgba(12, 74, 110, 0.22);
}

body.ai-chat-v2.is-scrolling .launch-ai-btn .launch-ai-label {
    opacity: 0;
    max-width: 0;
    margin-left: -8px; /* absorb the flex gap so the circle stays round */
}

body.ai-chat-v2 .launch-ai-btn:hover,
body.ai-chat-v2 .launch-ai-btn:focus-visible {
    opacity: 1;
    padding: 12px 20px;
    box-shadow: 0 12px 28px rgba(12, 74, 110, 0.42);
}

body.ai-chat-v2 .launch-ai-btn:hover .launch-ai-label,
body.ai-chat-v2 .launch-ai-btn:focus-visible .launch-ai-label {
    opacity: 1;
    max-width: 180px;
    margin-left: 0;
}

/* Users who ask for reduced motion get the softening but no size animation. */
@media (prefers-reduced-motion: reduce) {
    body.ai-chat-v2 .launch-ai-btn,
    body.ai-chat-v2 .launch-ai-label {
        transition: opacity .2s ease;
    }
}

/* ---------- Panel ---------- */
/* 95vh made "fullscreen" almost a no-op — the panel already covered the page.
   A true side panel gives the maximise button something to do. */
body.ai-chat-v2 .ai-chat-container {
    width: min(720px, 95vw);
    height: min(780px, 90vh);
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
}

body.ai-chat-v2 .ai-chat-container.fullscreen {
    width: 100vw !important;
    height: 100vh !important;
}

/* ---------- Header ---------- */
/* Light header with the AI's identity, replacing a solid dark bar with a bare title.
   A student should be able to tell at a glance that this is a machine. */
body.ai-chat-v2 .ai-chat-header {
    background: #fff;
    color: var(--ink, #0f172a);
    border-bottom: 1px solid var(--border, #e2e8f0);
    padding: 12px 14px;
}

body.ai-chat-v2 .ai-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.95rem;
}

body.ai-chat-v2 .ai-title svg {
    width: 34px;
    height: 34px;
    padding: 8px;
    border-radius: 11px;
    background: linear-gradient(135deg, #38bdf8, var(--hero-dark));
    color: #fff;
    flex: none;
}

/* Sub-label under the title, from CSS so the markup keeps its current shape. */
body.ai-chat-v2 .ai-title > span:last-child::after {
    content: "Your AI counsellor · answers instantly";
    display: block;
    font-size: 0.73rem;
    font-weight: 500;
    color: var(--muted, #64748b);
    margin-top: 1px;
}

body.ai-chat-v2 .header-btn {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid var(--border, #e2e8f0);
    background: #fff;
    color: var(--muted, #64748b);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

body.ai-chat-v2 .header-btn:hover {
    background: var(--ocean-50, #eff6ff);
    color: var(--ocean-dark, #1e40af);
    border-color: #bfdbfe;
}

/* ---------- Message list ---------- */
body.ai-chat-v2 .ai-chat-body {
    background: #fff;
    padding: 16px 16px 6px;
    gap: 4px;
}

/* pre-wrap was applied to bubbles that hold HTML from marked.js, so newlines the
   parser had already consumed rendered a second time as blank gaps. */
body.ai-chat-v2 .ai-msg,
body.ai-chat-v2 .user-msg {
    white-space: normal;
    position: relative;
    padding: 10px 14px;
    border-radius: 15px;
    font-size: 0.9rem;
    line-height: 1.55;
    max-width: 86%;
    margin-bottom: 14px;
    overflow-wrap: anywhere;
}

body.ai-chat-v2 .ai-msg {
    background: var(--soft, #f1f5f9);
    color: var(--ink, #0f172a);
    border-top-left-radius: 5px;
    margin-left: 36px;
}

/* User bubble was #4facfe — a third blue, matching neither the header nor the app
   primary. Moved onto the platform's own --ocean-mid. */
body.ai-chat-v2 .user-msg {
    background: var(--ocean-mid, #3b82f6);
    border-top-right-radius: 5px;
    margin-right: 36px;
}

/* Avatars as pseudo-elements: the JS writes only a bubble, so anything requiring a
   sibling node would mean editing addAIMessage()/addUserMessage(). */
body.ai-chat-v2 .ai-msg::before,
body.ai-chat-v2 .user-msg::before {
    position: absolute;
    top: 0;
    width: 27px;
    height: 27px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: #fff;
}

body.ai-chat-v2 .ai-msg::before {
    content: "✦";
    left: -36px;
    background: linear-gradient(135deg, #38bdf8, var(--hero-dark));
    font-size: 0.85rem;
}

body.ai-chat-v2 .user-msg::before {
    content: "You";
    right: -36px;
    background: linear-gradient(135deg, #60a5fa, var(--ocean-dark, #1e40af));
    font-size: 0.55rem;
    letter-spacing: 0.3px;
}

/* ---------- Thinking ---------- */
/* Was italic grey text reading "Thinking...", which looks stalled rather than busy.
   The injected text is hidden and replaced by three animated dots. */
body.ai-chat-v2 .ai-msg.thinking {
    font-size: 0;
    font-style: normal;
    padding: 15px 16px;
    min-height: 0;
}

body.ai-chat-v2 .ai-msg.thinking::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #94a3b8;
    box-shadow: 12px 0 0 #94a3b8, 24px 0 0 #94a3b8;
    margin-right: 24px;
    animation: aiThinkPulse 1.3s infinite ease-in-out;
}

@keyframes aiThinkPulse {
    0%, 60%, 100% { opacity: 0.3; }
    30%           { opacity: 1; }
}

/* ---------- Wide tables ---------- */
/* addAIMessage() already wraps every markdown table in
   `.ai-chat-table.table-responsive`, and that wrapper already carries
   overflow-x:auto — so wide tables scrolled before any of this work. Nothing is
   pinned: an earlier revision made the first column sticky, which was reverted
   because a frozen column is not wanted here. Every column scrolls together. */

/* ---------- Composer ---------- */
body.ai-chat-v2 .ai-chat-footer {
    border-top: 1px solid var(--border, #e2e8f0);
    background: #fff;
    padding: 11px 13px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

body.ai-chat-v2 .ai-chat-footer textarea {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 22px;
    padding: 10px 16px;
    font-size: 0.9rem;
    line-height: 1.45;
    max-height: 110px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

body.ai-chat-v2 .ai-chat-footer textarea:focus {
    outline: 0;
    border-color: var(--ocean-mid, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.13);
}

body.ai-chat-v2 .mic-btn,
body.ai-chat-v2 .send-btn,
body.ai-chat-v2 .reset-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Send is the only accent control. Reset previously sat beside it in the identical
   dark fill at the identical size — one slip from wiping the conversation. */
body.ai-chat-v2 .send-btn {
    background: var(--ocean-mid, #3b82f6) !important;
    color: #fff;
}

body.ai-chat-v2 .send-btn:hover {
    background: var(--ocean-dark, #1e40af) !important;
}

body.ai-chat-v2 .mic-btn,
body.ai-chat-v2 .reset-btn {
    background: transparent !important;
    border: 1px solid var(--border, #e2e8f0);
}

body.ai-chat-v2 .mic-btn i,
body.ai-chat-v2 .reset-btn i {
    color: var(--muted, #64748b) !important;
}

body.ai-chat-v2 .mic-btn:hover {
    background: var(--soft, #f1f5f9) !important;
}

body.ai-chat-v2 .reset-btn:hover {
    background: #fef2f2 !important;
    border-color: #fecaca;
}

body.ai-chat-v2 .reset-btn:hover i {
    color: #dc2626 !important;
}

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
    body.ai-chat-v2 .ai-chat-container {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        bottom: 0;
        right: 0;
        border-radius: 0;
    }

    body.ai-chat-v2 .launch-ai-btn {
        bottom: 16px;
        right: 16px;
        padding: 11px 17px;
    }
}

/* ---------- Day separators + per-turn timestamps ---------- */
/* Rendered from a data attribute rather than a child node, so nothing is inserted
   inside a bubble that the markdown pipeline or the streaming renderer also writes
   into. A message with no parseable timestamp simply carries no attribute and no
   stamp appears — never "Invalid Date". */
body.ai-chat-v2 .ai-day-sep {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 6px 0 14px;
}

body.ai-chat-v2 .ai-day-sep::before,
body.ai-chat-v2 .ai-day-sep::after {
    content: "";
    height: 1px;
    background: var(--border, #e2e8f0);
    flex: 1;
}

body.ai-chat-v2 .ai-day-sep span {
    font-size: 0.67rem;
    font-weight: 700;
    color: var(--muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 1px;
    background: var(--soft, #f1f5f9);
    border-radius: 20px;
    padding: 3px 11px;
    white-space: nowrap;
}

/* The stamp sits in the margin below the bubble, not inside its background — a
   timestamp printed on the blue user bubble would fight the message text. */
body.ai-chat-v2 .ai-msg[data-time],
body.ai-chat-v2 .user-msg[data-time] {
    margin-bottom: 26px;
}

body.ai-chat-v2 .ai-msg[data-time]::after,
body.ai-chat-v2 .user-msg[data-time]::after {
    content: attr(data-time);
    position: absolute;
    bottom: -16px;
    font-size: 0.67rem;
    font-weight: 500;
    color: #94a3b8;
    white-space: nowrap;
}

body.ai-chat-v2 .ai-msg[data-time]::after  { left: 3px; }
body.ai-chat-v2 .user-msg[data-time]::after { right: 3px; }

/* The thinking bubble is transient and never stamped; keep its dots animation from
   being overridden by the stamp rule above. */
body.ai-chat-v2 .ai-msg.thinking::after {
    content: "";
    position: static;
}
