@import url('lib/tailwindcss/dist/preflight.css');

/* Google Anton Font */
@font-face {
    font-family: 'Anton';
    src: url('fonts/Anton-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Roboto Condensed Font */
@font-face {
    font-family: 'Roboto Condensed';
    src: url('Roboto_Condensed/static/RobotoCondensed-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('Roboto_Condensed/static/RobotoCondensed-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('Roboto_Condensed/static/RobotoCondensed-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Global PNG transparency support */
img[src$=".png"] {
    background: transparent;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

/* Ensure PNG icons display with proper transparency */
.citation-icon,
.subject-icon,
.logo-icon {
    background: transparent !important;
    object-fit: contain;
}

* {
    box-sizing: border-box;
}

/* Root variables are now defined in themes.css */
/* This file uses those variables */
:root {
    --sidebar-width: 240px;
    /* Citation table colors - use theme variables */
    --primary-color: var(--accent-primary);
    --primary-color-alpha: rgba(156, 163, 175, 0.1);
}

html {
    min-height: 100dvh;
    /* Prevent unexpected text auto-scaling on iOS */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html,
body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    height: 100%;
    /* overflow: hidden; */
    transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}

body {
    min-height: 100dvh;
    height: 100dvh;
}

/* QRMobile / Embedded Mode - Hide AppBar gap by resetting MudBlazor's appbar height variable */
/* Handle both True (C#) and true (lowercase) values */
[data-appbar-hidden="true"],
[data-appbar-hidden="True"] {
    --mud-appbar-height: 0px !important;
}

/* Override MudBlazor's media query styles for hidden AppBar - need higher specificity */
[data-appbar-hidden="true"] .mud-main-content,
[data-appbar-hidden="True"] .mud-main-content,
[data-appbar-hidden="true"] .mud-layout .mud-main-content,
[data-appbar-hidden="True"] .mud-layout .mud-main-content {
    padding-top: env(safe-area-inset-top, 0px) !important;
}

/* Fix session title panel position when AppBar is hidden (QRMobile mode) */
[data-appbar-hidden="true"] .session-title-panel,
[data-appbar-hidden="True"] .session-title-panel {
    top: env(safe-area-inset-top, 0px) !important;
    left: 0 !important;
    right: 0 !important;
}

/* App Layout */
.app-layout {
    display: flex;
    min-height: 100dvh;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background: var(--drawer-bg);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    height: 100dvh;
    z-index: 1000;
    color: var(--drawer-text);
}

.sidebar-header {
    padding: 1.5rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.logo h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.sidebar-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1rem 0;
}

.nav-section {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0 0.75rem;
}

.nav-section.bottom {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    border-radius: 0.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
}

.nav-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.nav-item.active {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.nav-item svg {
    flex-shrink: 0;
}

/* Main Content */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

h1 {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Fix title font colors for better contrast */
/* Light theme: dark titles for contrast */
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="light"] .mud-typography-h1,
[data-theme="light"] .mud-typography-h2,
[data-theme="light"] .mud-typography-h3,
[data-theme="light"] .mud-typography-h4,
[data-theme="light"] .mud-typography-h5,
[data-theme="light"] .mud-typography-h6 {
    color: var(--text-primary) !important;
}

/* Dark theme: use theme text color */
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .mud-typography-h1,
[data-theme="dark"] .mud-typography-h2,
[data-theme="dark"] .mud-typography-h3,
[data-theme="dark"] .mud-typography-h4,
[data-theme="dark"] .mud-typography-h5,
[data-theme="dark"] .mud-typography-h6 {
    color: var(--text-primary) !important;
}

/* Default (no theme set) - assume dark theme for backward compatibility */
:root:not([data-theme]) h2,
:root:not([data-theme]) h3,
:root:not([data-theme]) h4,
:root:not([data-theme]) h5,
:root:not([data-theme]) h6,
:root:not([data-theme]) .mud-typography-h1,
:root:not([data-theme]) .mud-typography-h2,
:root:not([data-theme]) .mud-typography-h3,
:root:not([data-theme]) .mud-typography-h4,
:root:not([data-theme]) .mud-typography-h5,
:root:not([data-theme]) .mud-typography-h6 {
    color: var(--text-primary) !important;
}

h1:focus {
    outline: none;
}

/* Cloudbook viewer */
.cloudbook-viewer-container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
}

.cloudbook-viewer-container .mud-appbar {
    background: var(--appbar-bg);
    color: var(--appbar-text);
}

.pdf-viewer-content {
    margin-top: 64px;
    height: calc(100vh - 64px);
    background: var(--bg-primary);
}

.pdf-viewer-layout {
    display: flex;
    height: 100%;
    background: var(--bg-secondary);
}

.bookmark-panel {
    width: 320px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.bookmark-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
}

.bookmark-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 1rem 1rem;
}

.bookmark-tree,
.bookmark-children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bookmark-node {
    margin-bottom: 0.25rem;
}

.bookmark-node-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.bookmark-toggle {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.4rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.bookmark-toggle:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.bookmark-toggle.placeholder {
    cursor: default;
    opacity: 0;
}

.bookmark-title {
    flex: 1;
    text-align: left;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.92rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.35rem;
    transition: background 0.2s ease, color 0.2s ease;
}

.bookmark-title:not(.disabled):hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.bookmark-title.disabled {
    color: var(--text-muted);
    cursor: default;
}

.bookmark-page {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-left: 0.5rem;
}

.bookmark-children {
    margin-left: 1.25rem;
    padding-left: 0.75rem;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

/* ============================================================
   Bookmark tree hardening — om.css ships bare element selectors
   (ul/ol/li/p/i…) that leak page-wide whenever an OM / Rule document
   is rendered (e.g. the Cloudbook split-view content panel). The
   bookmark tree is built in code (its elements carry no scoped CSS
   attribute) and is styled globally here, so without these guards the
   leaked rules turn the list items bold / justified / indented with
   bullets. Same approach as the .message-text / .markdown-content
   hardening below; the .bookmark-panel prefix raises specificity to
   (0,1,1) so it beats om.css's bare (0,0,1) selectors. Only list-style
   is touched on <ul> so the .bookmark-children indentation is kept. */
.bookmark-panel ul,
.bookmark-panel ol {
    list-style: none;
}

.bookmark-panel li {
    font-weight: normal;
    text-indent: 0;
    padding-left: 0;
    margin-left: 0;
    text-align: left;
    list-style: none;
    list-style-position: outside;
}

.bookmark-loading {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.viewer-surface {
    flex: 1;
    background: var(--bg-primary);
    position: relative;
}

.pdf-viewer-wrapper {
    height: 100%;
}

.pdf-viewer-wrapper iframe {
    display: block;
}

@media (max-width: 992px) {
    .pdf-viewer-layout {
        flex-direction: column;
    }

    .bookmark-panel {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        box-shadow: none;
    }

    .viewer-surface {
        height: 100%;
    }
}

@media (max-width: 768px) {
    .pdf-viewer-content {
        margin-top: 56px;
        height: calc(100vh - 56px);
    }

    .pdf-viewer-layout {
        position: relative;
    }

    .bookmark-panel {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 260px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
        border-bottom: none;
    }

    .viewer-surface {
        height: 100%;
    }
}

h2,
h3,
h4,
h5,
h6 {
    color: #ffffff;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #22c55e;
}

.invalid {
    outline: 1px solid #ef4444;
}

.validation-message {
    color: #ef4444;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.btn-default {
    display: flex;
    padding: 0.25rem 0.75rem;
    gap: 0.25rem;
    align-items: center;
    border-radius: 0.25rem;
    border: 1px solid #9CA3AF;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    background-color: #D1D5DB;
}

.btn-default:hover {
    background-color: #E5E7EB;
}

.btn-subtle {
    display: flex;
    padding: 0.25rem 0.75rem;
    gap: 0.25rem;
    align-items: center;
    border-radius: 0.25rem;
    border: 1px solid #D1D5DB;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.btn-subtle:hover {
    border-color: #93C5FD;
    background-color: #DBEAFE;
}

.page-width {
    max-width: 1024px;
    margin: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .main-content {
        margin-left: 0;
    }

    :root {
        --sidebar-width: 0px;
    }
}

/* Chat Components */
.chat-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    overflow: hidden;
    max-height: 100%;
    /* Ensure container works properly on mobile */
    position: relative;
    min-height: 0;
}

@supports (height: 100dvh) {
    .chat-container {
        height: 100dvh !important;
        max-height: 100dvh !important;
    }
}

/* Top Navigation Bar */
.top-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--appbar-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 2rem;
    /* Respect iOS safe areas (notch/rounded corners) */
    padding-top: calc(1rem + env(safe-area-inset-top, 0px));
    padding-left: calc(2rem + env(safe-area-inset-left, 0px));
    padding-right: calc(2rem + env(safe-area-inset-right, 0px));
    opacity: 0.95;
}

.top-nav-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-nav-brand {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.025em;
}

.top-nav-service-selection {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-secondary);
    padding: 0.5rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.top-nav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.settings-button {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.settings-button:hover {
    border-color: var(--accent-primary);
    background-color: var(--bg-hover);
    color: var(--text-primary);
    transform: scale(1.05);
}

.settings-button:active {
    transform: scale(0.95);
}

.top-nav-service-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
    letter-spacing: 0.025em;
    white-space: nowrap;
}

.top-nav-service-dropdown {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 0.5rem 2.5rem 0.5rem 0.75rem;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 500;
    min-width: 160px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a1a1aa' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 0.875rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.top-nav-service-dropdown:hover {
    border-color: var(--accent-primary);
    background-color: var(--bg-hover);
}

.top-nav-service-dropdown:focus {
    outline: none;
    border-color: var(--input-focus);
    box-shadow: 0 0 0 2px rgba(156, 163, 175, 0.2);
    background-color: var(--bg-hover);
    transform: scale(0.98);
}

.top-nav-service-dropdown:active {
    transform: scale(0.98);
}

/* Responsive Top Nav */
@media (max-width: 768px) {
    .top-nav {
        padding: 0.75rem 1rem;
    }

    .top-nav-content {
        gap: 1rem;
    }

    .top-nav-brand {
        font-size: 1rem;
    }

    .top-nav-service-selection {
        padding: 0.375rem 0.75rem;
        gap: 0.5rem;
    }

    .top-nav-service-dropdown {
        min-width: 140px;
        font-size: 0.75rem;
        padding: 0.375rem 2rem 0.375rem 0.5rem;
    }
}

/* Welcome Screen */
.welcome-screen {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.welcome-content {
    max-width: 680px;
    width: 100%;
    text-align: center;
}

.welcome-header {
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.welcome-title-section {
    text-align: center;
    flex: 1;
}



/* Custom dropdown option styling */
.welcome-service-dropdown option,
.header-service-dropdown option {
    background: var(--bg-primary);
    color: var(--text-primary);
    padding: 0.75rem;
    border: none;
    font-weight: 500;
}

.welcome-service-dropdown option:hover,
.header-service-dropdown option:hover {
    background: var(--bg-secondary);
}

.welcome-title {
    font-family: 'Anton', sans-serif;
    font-size: 3.5rem;
    font-weight: normal;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
    line-height: 1.1;
    letter-spacing: 0.05em;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 255, 255, 0.2), 0 0 30px rgba(255, 255, 255, 0.1);
}

.welcome-subtitle {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

.search-section {
    margin-bottom: 2rem;
}

.search-container {
    margin-bottom: 1.5rem;
}

.search-input-wrapper {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

.search-input {
    width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 2rem;
    padding: 1rem 4rem 1rem 1.5rem;
    font-size: 1rem;
    color: var(--text-primary);
    outline: none;
    transition: all 0.2s ease;
}

.search-input:focus {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 1px var(--input-focus);
}

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

.search-submit {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border: none;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-submit:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 4px 12px rgba(34, 211, 238, 0.3);
}

.search-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.suggestion-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    max-width: 600px;
    margin: 0 auto;
}

.suggestion-pill {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 1.5rem;
    padding: 0.5rem 1rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    white-space: nowrap;
}

.suggestion-pill:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* Chat Interface */
.chat-interface {

    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.chat-header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--appbar-bg);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 10;
    /* Help Safari sticky stability in scroll containers */
    will-change: transform;
    opacity: 0.95;
}

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

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

.header-service-selection {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-secondary);
    padding: 0.5rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.header-service-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 600;
    letter-spacing: 0.025em;
    white-space: nowrap;
}

.header-service-dropdown {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 0.5rem 2.5rem 0.5rem 0.75rem;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    min-width: 160px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a1a1aa' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.header-service-dropdown:hover {
    border-color: var(--accent-primary);
    background-color: var(--bg-hover);
}

.header-service-dropdown:focus {
    outline: none;
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.2);
    background-color: var(--bg-hover);
}

.header-service-dropdown:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Custom dropdown option styling */
.welcome-service-dropdown option,
.header-service-dropdown option {
    background: var(--bg-primary);
    color: var(--text-primary);
    padding: 0.75rem;
    border: none;
    font-weight: 500;
}

.welcome-service-dropdown option:hover,
.header-service-dropdown option:hover {
    background: var(--bg-secondary);
}

.welcome-service-dropdown option:checked,
.header-service-dropdown option:checked {
    background: var(--accent-primary);
    color: var(--text-primary);
}

/* Enhanced focus states with subtle glow */
.welcome-service-dropdown:focus-visible,
.header-service-dropdown:focus-visible {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.2), 0 0 20px rgba(156, 163, 175, 0.1);
}

/* Add subtle animation on value change */
.welcome-service-dropdown,
.header-service-dropdown {
    will-change: transform;
}

.welcome-service-dropdown:active,
.header-service-dropdown:active {
    transform: scale(0.98);
}

/* AyraContent Styles - Common styles for all content with ayracontent class */
.ayracontent {
    line-height: 1.6;
    font-size: 1rem;
}

/* Related Queries section font size adjustments */
.ayracontent [style*="Related Queries"],
.ayracontent div:has(div:contains("Related Queries")),
.ayracontent div:contains("Related Queries") {
    font-size: 0.9rem !important;
}

.ayracontent [style*="Query Title"],
.ayracontent div:has(div:contains("Query Title")),
.ayracontent div:contains("Query Title") {
    font-size: 0.8rem !important;
    font-weight: 600;
}

/* Related query links */
.ayracontent a[href*="query"],
.ayracontent a[style*="color: orange"] {
    font-size: 0.85rem !important;
}

/* General link styling in content */
.ayracontent a {
    font-size: 1rem;
    text-decoration: none;
}

.ayracontent a:hover {
    text-decoration: underline;
}

.ayracontent h1,
.ayracontent h2,
.ayracontent h3,
.ayracontent h4,
.ayracontent h5,
.ayracontent h6 {
    color: #2c3e50;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

.ayracontent p {
    margin-bottom: 1em;
    text-align: justify;
}

.ayracontent ul,
.ayracontent ol {
    margin-bottom: 1em;
    padding-left: 2em;
}

.ayracontent blockquote {
    border-left: 4px solid #007bff;
    padding-left: 1em;
    margin: 1em 0;
    font-style: italic;
    color: #666;
}

.ayracontent table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    border: 1px solid var(--table-lines);
    background-color: var(--bg-primary);
    border-radius: 0;
}

.ayracontent table th,
.ayracontent table td {
    border: 1px solid var(--table-lines);
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    line-height: 1.4;
}

.ayracontent table th {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.05em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ayracontent table tr:nth-child(even) {
    background-color: var(--table-striped);
}

.ayracontent table tr:hover {
    background-color: var(--surface-hover);
}

.ayracontent table td {
    color: var(--text-secondary);
    font-size: 1em;
}

/* Table caption styling */
.ayracontent table caption {
    caption-side: top;
    padding: 8px 0;
    font-weight: 600;
    color: #5d4e37;
    font-size: 1.1em;
}

/* Special styling for tables with numeric data */
.ayracontent table .numeric {
    text-align: right;
    font-family: 'Courier New', monospace;
}

/* Responsive design for AyraContent */
@media (max-width: 768px) {
    .ayracontent {
        font-size: 0.9rem;
    }

    .ayracontent table {
        font-size: 0.8rem;
    }
}

.new-chat-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.new-chat-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.chat-messages {
    flex: 1;
    /*overflow-y: auto;*/
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* Custom scrollbar for chat messages */
.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

.chat-messages:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Firefox scrollbar styling */
.chat-messages {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.chat-messages:hover {
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}



.message-group {
    margin-bottom: 2rem;
}

.message {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.message-avatar {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.125rem;
}

.user-avatar {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.ai-avatar {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
}

/* Light theme - make message avatar icons lighter */
[data-theme="light"] .message-avatar .mud-avatar {
    background-color: #e5e7eb !important;
    /* Light gray for better contrast */
}

.ai-avatar.thinking {
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Remove container overflow and apply to individual tables */
.message-content {
    flex: 1;
    min-width: 0;
    /* Allow children (tables) to show their own horizontal scrollbar */
    overflow-x: visible;
}

.message-text {
    color: var(--text-primary);
    line-height: 2.0;
    font-size: 1.3rem;
}

.message-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    border: 1px solid var(--table-lines);
    background-color: var(--bg-secondary);
    border-radius: 0;
    /* Simple block container so it can scroll vertically if needed */
    display: block;
    overflow-y: auto;
    /* as requested */
    /* keep defaults for horizontal overflow to avoid forced scrolling */
    -webkit-overflow-scrolling: touch;
    box-shadow: none;
    min-width: 0;
}

/* Reset table display for thead, tbody, tr */
/* Use native table layout for simplicity */
.message-content table thead,
.message-content table tbody,
.message-content table tr {
    display: revert;
}

.message-content table th,
.message-content table td {
    border: 1px solid var(--table-lines);
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
    line-height: 1.5;
    white-space: normal;
    /* allow wrapping */
}

.message-content table th {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
}

.message-content table tr:nth-child(even) {
    background-color: var(--table-striped);
}

.message-content table tr:hover {
    background-color: var(--surface-hover);
}

.message-content table td {
    color: var(--text-secondary);
}

/* Light theme: the default surface tokens sit nearly on top of the warm page
   background (--bg-primary #f5f4f0), so chat answer tables blend in. Give them
   a subtle-but-clear contrast: white rows, a warm-grey header, soft borders and
   a faint elevation — distinct without being loud. */
[data-theme="light"] .message-content table {
    background-color: #ffffff;
    border-color: #dcd9d0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .message-content table th,
[data-theme="light"] .message-content table td {
    border-color: #e6e3db;
}

[data-theme="light"] .message-content table th {
    background-color: #ebe8e1;
    color: #2a2520;
}

[data-theme="light"] .message-content table td {
    color: #4a453e;
}

[data-theme="light"] .message-content table tr:nth-child(even) {
    background-color: #f7f5f0;
}

[data-theme="light"] .message-content table tr:hover {
    background-color: #efece5;
}

/* Remove sticky/extra styling for first/last columns (keep it simple) */
.message-content table th:first-child,
.message-content table td:first-child {
    position: static;
    left: auto;
    z-index: auto;
    box-shadow: none;
}

.message-content table td:last-child {
    word-break: normal;
    overflow-wrap: normal;
}

/* Table caption styling */
.message-content table caption {
    caption-side: top;
    padding: 8px 0;
    font-weight: 600;
    color: #5d4e37;
    font-size: 1.1em;
}

/* Special styling for tables with numeric data */
.message-content table .numeric {
    text-align: right;
    font-family: 'Courier New', monospace;
}

.user-message .message-text {
    color: var(--text-primary);
}

.thinking-indicator {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    color: var(--text-secondary);
}

.thinking-dot {
    width: 4px;
    height: 4px;
    background: var(--text-muted);
    border-radius: 50%;
    animation: thinking 1.4s infinite ease-in-out;
}

.thinking-dot:nth-child(1) {
    animation-delay: -0.32s;
}

.thinking-dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes thinking {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

/* Markdown content styling - applies only to MarkDig converted HTML */
.markdown-content {
    font-family: inherit;
    line-height: 2.0;
    color: var(--text-secondary);
    font-size: 1.3rem;
    overflow-x: hidden;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
}

.markdown-content h1 {
    font-size: 1.75rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.5rem;
    color: var(--text-primary);
    font-weight: 600;
}

.markdown-content h2 {
    font-size: 1.5rem;
    color: var(--text-primary);
    font-weight: 600;
}

.markdown-content h3 {
    font-size: 1.35rem;
    color: var(--text-primary);
    font-weight: 600;
}

.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    font-size: 1.15rem;
    color: var(--text-primary);
    font-weight: 600;
}

.markdown-content p {
    margin-bottom: 1rem;
    color: var(--text-secondary);
    font-size: 1.3rem;
}

.markdown-content p:last-child {
    margin-bottom: 0;
}

.markdown-content ul,
.markdown-content ol {
    margin: 0.75rem 0;
    padding-left: 1.5rem;
    color: var(--text-secondary);
    font-size: 1.3rem;
}

.markdown-content li {
    margin-bottom: 0.25rem;
    color: var(--text-secondary);
}

/* ============================================================
   Keep chat answers clean & consistent.
   OM/Rule documents carry the om.css ruleset (bare ul/li/ol/p/i
   selectors: inside-positioned disc bullets, bold + indented li,
   justified paragraphs). If any of that leaks into the chat, these
   rules win — the .message-text / .markdown-content prefix gives a
   higher specificity (0,1,x) than om.css's bare element selectors,
   so the answer always renders with normal weight, left alignment,
   standard outside bullets and no document-style indentation.
   ============================================================ */
.message-text ul,
.message-text ol,
.markdown-content ul,
.markdown-content ol {
    margin: 0.6rem 0;
    padding-left: 1.5rem;
    list-style-position: outside;
}

.message-text ul li,
.markdown-content ul li {
    list-style: disc;
}

.message-text ol li,
.markdown-content ol li {
    list-style: decimal;
}

.message-text li,
.markdown-content li {
    font-weight: normal;
    text-indent: 0;
    padding-left: 0;
    margin-left: 0;
    text-align: left;
    /* om.css forces inside-positioned bullets directly on <li>; override here */
    list-style-position: outside;
}

.message-text p,
.markdown-content p {
    text-align: left;
    text-indent: 0;
}

.message-text i,
.message-text em,
.markdown-content i,
.markdown-content em {
    font-weight: normal;
    font-style: italic;
}

.markdown-content blockquote {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--accent-primary);
    background: var(--surface-color);
    font-style: italic;
    border-radius: 0 0.375rem 0.375rem 0;
    color: var(--text-secondary);
    font-size: 1.3rem;
}

.markdown-content code {
    background: var(--surface-color);
    color: var(--accent-secondary);
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.95rem;
}

.markdown-content pre {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1rem;
    overflow-x: auto;
    margin: 1rem 0;
}

.markdown-content pre code {
    background: none;
    color: var(--text-secondary);
    padding: 0;
    border-radius: 0;
}

/* Create individual table wrapper with horizontal scrolling */
.markdown-content table {
    /* Shrink to content width (no full-width stretch / empty space) and centre it,
       capped at the container so it never overflows. */
    width: fit-content;
    max-width: 100%;
    border-collapse: collapse;
    margin: 1rem auto;
    border: 1px solid var(--table-lines);
    border-radius: 0.5rem;
    overflow-x: auto;
    /* Theme-aware surface so the table reads correctly in every theme. */
    background: var(--surface-color);

    /* Create individual scrolling container for each table */
    display: block;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: 0.9rem;
}

/* Reset table display for thead, tbody, tr */
.markdown-content table thead,
.markdown-content table tbody {
    display: table-header-group;
}

.markdown-content table tbody {
    display: table-row-group;
}

.markdown-content table tr {
    display: table-row;
}

.markdown-content th,
.markdown-content td {
    display: table-cell;
    white-space: nowrap;
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--table-lines);
    color: var(--text-secondary);
}

.markdown-content th {
    background: var(--surface-color);
    font-weight: 600;
    color: var(--text-primary);
}

.markdown-content tr:last-child td {
    border-bottom: none;
}

/* Sand & Ink: warm sand-toned chat-answer tables instead of the default
   near-white body / header (which read as a white-grey island on the warm
   page). Lines & text already use warm theme tokens. */
[data-theme="light"][data-palette="sandink"] .markdown-content table {
    background: var(--bg-secondary);
    border-color: var(--table-lines);
}
[data-theme="light"][data-palette="sandink"] .markdown-content th {
    background: var(--bg-tertiary);
}

/* Clean text links — no halo (gradient-pill background) and no glow (box-shadow
   /lift) on hover; theme-aware colour, subtle underline on hover. */
.markdown-content a {
    color: var(--link-color, #2f6fb3);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.markdown-content a:hover {
    color: var(--link-color, #2f6fb3);
    border-bottom-color: currentColor;
}

.markdown-content hr {
    border: none;
    height: 1px;
    background: var(--border-color);
    margin: 2rem 0;
}

.markdown-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
    margin: 1rem 0;
}

.markdown-content strong {
    font-weight: 600;
    color: var(--text-secondary);
}

.markdown-content em {
    font-style: italic;
}

/* Enhanced table scrollbar styling for individual tables */
.markdown-content table::-webkit-scrollbar,
.message-content table::-webkit-scrollbar {
    height: 10px;
    /* make horizontal scrollbar easier to see */
}

.markdown-content table::-webkit-scrollbar-track,
.message-content table::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

.markdown-content table::-webkit-scrollbar-thumb,
.message-content table::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 4px;
}

.markdown-content table::-webkit-scrollbar-thumb:hover,
.message-content table::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Firefox scrollbar styling for individual tables */
.markdown-content table,
.message-content table {
    scrollbar-width: thin;
    scrollbar-color: var(--text-muted) var(--bg-tertiary);
}

/* Ensure tables don't break out of containers on small screens */
@media (max-width: 768px) {

    .markdown-content table,
    .message-content table {
        font-size: 0.9rem;
    }

    .markdown-content th,
    .markdown-content td,
    .message-content th,
    .message-content td {
        padding: 8px 10px;
    }

    /* Keep tables fit-to-content on mobile (no forced min-width that would
       re-introduce empty space / scroll on small tables); overflow-x:auto
       still lets genuinely wide tables scroll. */
    .markdown-content table {
        min-width: 0;
    }

    /* For assistant message tables, keep them fully fluid on mobile */
    .message-content table {
        min-width: 0;
        width: 100%;
    }

    /* Allow wrapping for the last column on mobile to reduce horizontal scroll */
    .message-content table td:last-child,
    .markdown-content table td:last-child {
        white-space: normal;
    }
}

.citations {
    margin-top: 1rem;
}

.citations-header {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.citation-section {
    margin-bottom: 2rem;
}

.citation-section-header {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.75rem;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid var(--primary-color);
    display: inline-block;
}

.citation-table-container {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--table-lines);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.citation-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    background: var(--bg-primary);
}

.citation-table thead {
    background: var(--primary-color-alpha);
}

.citation-table th {
    padding: 12px 8px;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--primary-color);
    white-space: nowrap;
}

.citation-table td {
    padding: 12px 8px;
    border-bottom: 1px solid var(--table-lines);
    vertical-align: top;
    line-height: 1.4;
}

.citation-table tbody tr:hover {
    background-color: var(--bg-hover);
}

.citation-table tbody tr:last-child td {
    border-bottom: none;
}

/* Column sizing */
.citation-col-index {
    width: 40px;
    text-align: center;
}

.citation-col-gi {
    width: 120px;
    min-width: 120px;
}

.citation-col-date {
    width: 100px;
    min-width: 100px;
}

.citation-col-rule {
    width: 200px;
    min-width: 200px;
}

.citation-col-title {
    width: auto;
    min-width: 250px;
}

.citation-col-subject {
    width: 150px;
    min-width: 150px;
}

/* Cell content styling */
.citation-index {
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
}

.citation-gi {
    font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
    font-size: 0.8rem;
    color: var(--primary-color);
    font-weight: 500;
}

.citation-date {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.citation-rule {
    color: var(--text-primary);
    font-weight: 500;
}

.citation-title {
    color: var(--text-primary);
    line-height: 1.3;
}

.citation-subject {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
}

.citations-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.citation-item {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

.citation-source {
    color: var(--text-secondary);
}

/* ===== Additional Sources: white panel + visibly distinct source cards (every light palette).
   bg-primary is too close to white in Cool Linen, so cards use the deeper bg-tertiary.
   !important to win over the component <style> regardless of cascade order. ===== */
[data-theme="light"] .additional-sources-section .mud-expansion-panels,
[data-theme="light"] .additional-sources-section .mud-tabs,
[data-theme="light"] .additional-sources-section .mud-tab-panel {
    background-color: var(--surface-color) !important;
}

[data-theme="light"] .citation-card {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="light"] .citation-card:hover {
    background-color: var(--bg-hover) !important;
}

/* Responsive design for citation tables */
@media (max-width: 768px) {
    .citation-table {
        font-size: 0.8rem;
    }

    .citation-table th,
    .citation-table td {
        padding: 8px 6px;
    }

    .citation-col-gi {
        width: 100px;
        min-width: 100px;
    }

    .citation-col-date {
        width: 90px;
        min-width: 90px;
    }

    .citation-col-rule {
        width: 160px;
        min-width: 160px;
    }

    .citation-col-title {
        min-width: 200px;
    }

    .citation-col-subject {
        width: 120px;
        min-width: 120px;
    }
}

@media (max-width: 480px) {
    .citations {
        margin-top: 0.75rem;
    }

    .citation-section {
        margin-bottom: 1.5rem;
    }

    .citation-table {
        font-size: 0.75rem;
    }

    .citation-table th,
    .citation-table td {
        padding: 6px 4px;
    }

    .citation-col-gi {
        width: 80px;
        min-width: 80px;
    }

    .citation-col-date {
        width: 80px;
        min-width: 80px;
    }

    .citation-col-rule {
        width: 140px;
        min-width: 140px;
    }

    .citation-col-title {
        min-width: 150px;
    }

    .citation-col-subject {
        width: 100px;
        min-width: 100px;
    }

    .citation-item {
        font-size: 0.75rem;
    }
}

/* Response Actions */
.response-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    padding: 0.5rem 0;
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

.message-group:hover .response-actions {
    opacity: 1;
}

.response-actions-left {
    display: flex;
    gap: 0.25rem;
}

.response-actions-right {
    display: flex;
    gap: 0.25rem;
}

.action-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
}

.action-btn:hover {
    background: var(--bg-hover);
    color: var(--text-secondary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.action-btn:active {
    transform: translateY(0);
}

.action-btn.active {
    color: var(--accent-primary);
    background: rgba(34, 197, 94, 0.1);
}

.like-btn.active {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

.dislike-btn.active {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

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

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

.ticket-btn:hover {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.action-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

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

.chat-input-section {

    padding: 0.5rem;
    background: var(--bg-primary);
    /* Ensure input section is always at bottom */
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    max-height: min-content;
    /* iOS safe area support */
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));

    /* Respect left/right safe areas on iOS */
    padding-left: calc(0.5rem + env(safe-area-inset-left, 0px));
    padding-right: calc(0.5rem + env(safe-area-inset-right, 0px));

    width: 80%;
    margin: auto;
}

.chat-input-wrapper {
    position: relative;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 1.5rem;
    display: flex;
    align-items: flex-end;
    padding: 0.75rem 0.75rem 0.75rem 1rem;
    transition: all 0.2s ease;
}

.chat-input-wrapper:focus-within {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 1px var(--input-focus);
}

.chat-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.5;
    resize: none;
    min-height: 1.5rem;
    max-height: 8rem;
}

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

.chat-submit {
    position: absolute;
    right: 8px;
    bottom: 8px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border: none;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-submit:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(34, 211, 238, 0.3);
}

.chat-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Code formatting */
.code-block {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    margin: 1rem 0;
    overflow-x: auto;
}

.code-block pre {
    margin: 0;
    padding: 1rem;
    color: var(--text-primary);
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.5;
}

.inline-code {
    background: var(--surface-color);
    color: var(--accent-primary);
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 0.875rem;
}

/* Chat responsive styles */
@media (max-width: 768px) {
    .chat-container {
        height: 100dvh;
        /* Use dynamic viewport height on mobile */
        max-height: 100dvh;
        /* On iOS 16+ support small viewport height for better stability */
        height: 100svh;
        max-height: 100svh;
        /* Add safe area padding for mobile browsers */
        padding-bottom: env(safe-area-inset-bottom);
    }

    .chat-interface {
        height: auto;
        max-height: none;
        flex: 1;
        /* Ensure proper layout on mobile */
        min-height: 0;
    }

    .welcome-title {
        font-family: 'Anton', sans-serif;
        font-size: 2.5rem;
        letter-spacing: 0.05em;
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.3), 0 0 16px rgba(255, 255, 255, 0.2), 0 0 24px rgba(255, 255, 255, 0.1);
    }

    .chat-messages {
        padding: 1rem;
        /* Ensure messages can scroll properly */
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        /* Add safe area padding to prevent content from being hidden behind system UI */
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
        padding-left: calc(1rem + env(safe-area-inset-left, 0px));
        padding-right: calc(1rem + env(safe-area-inset-right, 0px));
    }

    .suggestion-pills {
        justify-content: flex-start;
    }

    /* Responsive styles for header service selection */
    .welcome-header {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .welcome-service-selection {
        order: 0;
        max-width: 280px;
        margin-bottom: 1.5rem;
    }

    .chat-header {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
        /* Ensure header doesn't take too much space */
        flex-shrink: 0;
        min-height: auto;
    }

    .header-service-selection {
        justify-content: center;
    }

    .header-service-dropdown,
    .welcome-service-dropdown {
        min-width: 200px;
    }

    /* Additional mobile viewport fixes */
    .chat-input-wrapper {
        /* Ensure input wrapper is always visible */
        position: relative;
        z-index: 10;
    }

    /* Chat input section mobile fixes */
    .chat-input-section {
        /* Add safe area inset for iOS home indicator */
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
        /* Ensure input is always above system UI */
        position: relative;
        z-index: 100;
        background: var(--bg-primary);
        /* Prevent input from being hidden by virtual keyboard */
        margin-bottom: env(keyboard-inset-height, 0px);
    }

    /* Handle mobile keyboard appearance */
    @supports (-webkit-touch-callout: none) {
        .chat-interface {
            /* iOS specific fix */
            height: -webkit-fill-available;
        }

        .chat-container {
            height: -webkit-fill-available;
        }
    }

    /* Ensure proper scrolling behavior */
    .chat-messages {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Hide Clear Chat button on mobile */
    .chat-input-section .d-flex.justify-content-end.mb-2 {
        display: none !important;
    }

    /* Fix for mobile browser address bar hiding */
    @media screen and (max-height: 600px) {
        .chat-interface {
            height: 100dvh;
            height: calc(100dvh - env(safe-area-inset-top));
        }
    }

    /* Additional fixes for very small screens */
    @media screen and (max-height: 500px) {
        .chat-header {
            padding: 0.5rem;
        }

        .chat-messages {
            padding: 0.5rem;
        }
    }
}

/* Response Type Selection Styles */
.response-type-section {
    margin: 2rem 0;
}

.response-type-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    text-align: center;
}

.response-type-options {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.response-type-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: var(--surface-color);
    border: 2px solid var(--border-color);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    min-width: 140px;
    text-align: center;
}

.response-type-option:hover {
    background: var(--bg-hover);
    border-color: var(--accent-secondary);
}

.response-type-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.radio-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-primary);
    position: relative;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
}

.radio-custom::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-primary);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.2s ease;
}

.response-type-option input[type="radio"]:checked+.radio-custom {
    border-color: var(--accent-primary);
    background: var(--bg-primary);
}

.response-type-option input[type="radio"]:checked+.radio-custom::after {
    transform: translate(-50%, -50%) scale(1);
}

.response-type-option input[type="radio"]:checked~.option-text {
    color: var(--accent-primary);
    font-weight: 600;
}

.response-type-option input[type="radio"]:checked~.option-description {
    color: var(--text-secondary);
}

.option-text {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    transition: color 0.2s ease;
}

.option-description {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.3;
    transition: color 0.2s ease;
}

/* Responsive adjustments for radio buttons */
@media (max-width: 768px) {
    .response-type-options {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .response-type-option {
        min-width: 200px;
        padding: 0.75rem;
    }

    .response-type-label {
        font-size: 0.9rem;
    }
}

/* Subject Selection Styles */
.subject-selection-section {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--surface-color);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.subject-selection-label {
    display: block;
    margin-bottom: 0.75rem;
    color: #e5e7eb;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.025em;
    text-align: center;
}

.subject-selector-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.subject-selector {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 0.5rem 2.5rem 0.5rem 0.75rem;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    min-width: 200px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a1a1aa' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.subject-selector:hover {
    border-color: var(--accent-primary);
    background-color: var(--bg-hover);
}

.subject-selector:focus {
    outline: none;
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.2);
    background-color: var(--bg-hover);
}

.subject-selector option {
    background: var(--input-bg);
    color: var(--text-primary);
    padding: 0.75rem;
    border: none;
    font-weight: 500;
}

/* Responsive adjustments for subject selector */
@media (max-width: 768px) {
    .subject-selector {
        min-width: 160px;
        font-size: 0.8rem;
        padding: 0.45rem 2.2rem 0.45rem 0.65rem;
    }

    .subject-selection-label {
        font-size: 0.85rem;
    }
}

/* Service Selection Styles */
.service-selection {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    justify-content: center;
}

.service-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.service-dropdown {
    padding: 0.5rem 0.75rem;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 0.5rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    min-width: 180px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.service-dropdown:hover {
    border-color: var(--accent-secondary);
    background: var(--bg-hover);
}

.service-dropdown:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(116, 84, 255, 0.1);
}

.service-dropdown:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.service-dropdown option {
    background: var(--input-bg);
    color: var(--text-primary);
    padding: 0.5rem;
}

/* Chat interface service selection adjustments */
.chat-input-section .service-selection {
    margin-bottom: 0.75rem;
    padding: 0 1rem;
}

/* Mobile responsiveness for service selection */
@media (max-width: 768px) {
    .service-selection {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .service-dropdown {
        min-width: unset;
        width: 100%;
    }

    .chat-input-section .service-selection {
        padding: 0;
    }
}

/* Login Page Styles */
.login-container {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    padding: 2rem;
    position: relative;
    overflow: hidden;
    transition: background-color 0.2s ease;
}

.login-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    /*background: radial-gradient(circle, rgba(34, 211, 238, 0.1) 0%, transparent 70%);*/
    animation: pulse 4s ease-in-out infinite;
    z-index: 1;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.login-glass-card {
    background: var(--surface-color);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 3rem;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 2;
    animation: slideUp 0.6s ease-out;
    opacity: 0.95;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.login-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.login-logo {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: white;
    box-shadow: 0 10px 30px rgba(34, 211, 238, 0.3);
}

.login-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.login-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-label {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 1rem;
    color: var(--text-muted);
    z-index: 1;
}

.form-input {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.form-input:focus {
    outline: none;
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.2);
    background: var(--bg-hover);
}

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

.form-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.checkbox-group {
    flex-direction: row;
    align-items: center;
}

.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.checkbox-wrapper input[type="checkbox"] {
    display: none;
}

.checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background: var(--input-bg);
}

.checkbox-wrapper input[type="checkbox"]:checked+.checkbox-custom {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.checkbox-wrapper input[type="checkbox"]:checked+.checkbox-custom::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.validation-error {
    color: #ef4444;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.error-message {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: #ef4444;
    font-size: 0.9rem;
}

.login-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(34, 211, 238, 0.3);
    margin-top: 0.5rem;
}

.login-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 211, 238, 0.4);
}

.login-button:active:not(:disabled) {
    transform: translateY(0);
}

.login-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.login-button .fa-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.login-footer {
    text-align: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.login-footer-text {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
}

/* Responsive design for login page */
@media (max-width: 768px) {
    .login-container {
        padding: 1rem;
    }

    .login-glass-card {
        padding: 2rem;
    }

    .login-logo {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .login-title {
        font-size: 1.5rem;
    }
}

/* Authentication Required Styles */
.auth-required-container {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    padding: 2rem;
}

.auth-required-card {
    background: var(--surface-color);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 3rem;
    text-align: center;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.6s ease-out;
    opacity: 0.95;
}

.auth-required-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: white;
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.3);
}

.auth-required-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1rem;
}

.auth-required-message {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0 0 2rem;
    line-height: 1.6;
}

.auth-required-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(34, 211, 238, 0.3);
    margin: 0 auto;
}

/* Light theme - ensure button text is readable */
[data-theme="light"] .auth-required-button {
    color: white !important;
    /* Keep white text on gradient button */
}

.auth-required-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 211, 238, 0.4);
}

.auth-required-button:active {
    transform: translateY(0);
}

/* Settings Page Responsive Styles */
@media (max-width: 768px) {
    .settings-container {
        padding: 15px;
    }

    .settings-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .settings-title {
        font-size: 24px;
    }

    .settings-section {
        padding: 20px;
    }

    .top-nav-right {
        gap: 0.5rem;
    }

    .top-nav-service-selection {
        padding: 0.375rem 0.75rem;
        gap: 0.5rem;
    }

    .settings-button {
        padding: 0.375rem;
    }
}

/* ResponseHandler Enhanced Styles */
/* Response type specific styling */
.markdown-content.response-brief {
    border-left: 3px solid #10b981;
    padding-left: 1rem;
}

.markdown-content.response-detailed {
    border-left: 3px solid #3b82f6;
    padding-left: 1rem;
}

.markdown-content.response-with-citations {
    position: relative;
}

.markdown-content.response-with-citations::before {
    content: "📚";
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    font-size: 1.2rem;
    opacity: 0.6;
}

.markdown-content.response-with-thoughts {
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

/* Citation enhancements */
.citations-summary {
    margin-top: 1rem;
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 0.375rem;
    text-align: center;
    font-style: italic;
    color: var(--text-muted);
}

/* Thought process toggle */
.thought-process-toggle {
    margin-top: 1rem;
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
}

.btn-thought-process {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.btn-thought-process:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.thought-process-content {
    margin-top: 0.5rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 0.375rem;
    border: 1px solid var(--border-color);
}

.thought-process-text {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.875rem;
    color: var(--text-muted);
    white-space: pre-wrap;
    line-height: 1.5;
}

/* Content highlighting */
.highlight-rule {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-weight: 500;
}

.highlight-section {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-weight: 500;
}

.highlight-important {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-weight: 600;
}

/* Disclaimer styling */
.disclaimer-text {
    background: rgba(245, 158, 11, 0.1);
    border-left: 4px solid #f59e0b;
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 0 0.375rem 0.375rem 0;
    font-style: italic;
    color: var(--text-primary);
}

/* High-contrast chat disclaimer — full opacity + strong text. !important so it
   takes effect on reload even before the component is rebuilt. */
.disclaimer-box {
    opacity: 1 !important;
}

.disclaimer-box .disclaimer-text {
    color: var(--text-primary) !important;
}

/* ===== Cool Linen light theme — curved Disclaimer card ===== */
[data-theme="light"] .disclaimer-box {
    border: 1px solid var(--warn-line);
    border-radius: 13px;
    overflow: hidden;
    background: var(--surface-color);
    box-shadow: var(--shadow-sm);
    padding: 0;
    margin: 6px 0 18px;
}

[data-theme="light"] .disclaimer-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 18px;
}

[data-theme="light"] .disclaimer-icon {
    color: var(--warning-color);
}

[data-theme="light"] .disclaimer-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--warning-color);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

[data-theme="light"] .disclaimer-box .disclaimer-text {
    margin: 0 14px 14px;
    padding: 15px 18px;
    border-left: 4px solid var(--warn-bar);
    background: var(--warn-bg);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: var(--text-secondary) !important;
}

/* ===== Cool Linen light theme — curved Additional Sources card ===== */
[data-theme="light"] .additional-sources-section .mud-expansion-panels {
    border-radius: 13px !important;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
    background: var(--surface-color);
}

[data-theme="light"] .additional-sources-section .mud-expansion-panel,
[data-theme="light"] .additional-sources-section .mud-expand-panel-header,
[data-theme="light"] .additional-sources-section .mud-expansion-panel-header {
    background: var(--surface-color);
}

[data-theme="light"] .additional-sources-section .mud-expand-panel-header,
[data-theme="light"] .additional-sources-section .mud-expansion-panel-header {
    padding: 16px 20px;
}

[data-theme="light"] .additional-sources-section .citations-header {
    font-family: 'Fraunces', Georgia, serif;
    color: var(--text-primary);
}

/* Hidden metrics for analytics */
.response-metrics {
    display: none;
}

/* Multiple Response Handler System Styles */

/* Urgent response styling */
.markdown-content.urgent-response {
    border: 2px solid #ef4444;
    background: rgba(239, 68, 68, 0.05);
    animation: urgentPulse 2s infinite;
    position: relative;
}

@keyframes urgentPulse {
    0% {
        border-color: #ef4444;
    }

    50% {
        border-color: #f87171;
    }

    100% {
        border-color: #ef4444;
    }
}

.urgent-indicator {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem 0.5rem 0 0;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

/* Query type indicators */
.query-type-indicator {
    background: rgba(34, 211, 238, 0.1);
    border: 1px solid rgba(34, 211, 238, 0.3);
    color: var(--accent-primary);
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.query-type-leave-management {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.query-type-retirement-benefits {
    background: rgba(168, 85, 247, 0.1);
    border-color: rgba(168, 85, 247, 0.3);
    color: #a855f7;
}

.query-type-salary-allowances {
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

.query-type-transfer-posting {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: #3b82f6;
}

.query-type-career-progression {
    background: rgba(236, 72, 153, 0.1);
    border-color: rgba(236, 72, 153, 0.3);
    color: #ec4899;
}

.query-type-medical-benefits {
    background: rgba(20, 184, 166, 0.1);
    border-color: rgba(20, 184, 166, 0.3);
    color: #14b8a6;
}

.query-type-training-development {
    background: rgba(245, 101, 101, 0.1);
    border-color: rgba(245, 101, 101, 0.3);
    color: #f56565;
}

/* Term highlighting */
.highlight-department {
    background: rgba(99, 102, 241, 0.15);
    color: #6366f1;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-weight: 500;
}

.highlight-service {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-weight: 500;
}

.highlight-leave {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-weight: 500;
}

.highlight-abbrev {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-weight: 500;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 0.9em;
}

/* Response handler debugging */
.response-debug-info {
    background: rgba(75, 85, 99, 0.1);
    border: 1px solid rgba(75, 85, 99, 0.3);
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
}

/* Handler chain performance indicators */
.handler-performance {
    opacity: 0;
    transition: opacity 0.2s ease;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.markdown-content:hover .handler-performance {
    opacity: 1;
}

/* Handler-specific indicators */
.processed-by-om-highlighter::after {
    content: "🎯 OM";
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(34, 211, 238, 0.1);
    color: var(--accent-primary);
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-weight: 500;
}

.processed-by-enhanced::after {
    content: "✨ Enhanced";
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-weight: 500;
}

.processed-by-custom::after {
    content: "🔧 Custom";
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-weight: 500;
}

/* Handler chain visualization (for debugging) */
.handler-chain-debug {
    position: fixed;
    top: 1rem;
    right: 1rem;
    background: rgba(15, 15, 15, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    padding: 0.75rem;
    max-width: 200px;
    font-size: 0.7rem;
    color: var(--text-muted);
    z-index: 1000;
    backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.handler-chain-debug.show {
    opacity: 1;
    pointer-events: auto;
}

.handler-chain-debug h4 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 0.8rem;
}

.handler-chain-debug ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.handler-chain-debug li {
    padding: 0.125rem 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.handler-chain-debug .handler-status {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.handler-chain-debug .handler-status.success {
    background: #22c55e;
}

.handler-chain-debug .handler-status.error {
    background: #ef4444;
}

.handler-chain-debug .handler-status.pending {
    background: #fbbf24;
}

/* Mobile responsiveness for handler styles */
@media (max-width: 768px) {
    .urgent-indicator {
        padding: 0.375rem 0.75rem;
        font-size: 0.8rem;
    }

    .query-type-indicator {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    .highlight-department,
    .highlight-service,
    .highlight-leave,
    .highlight-abbrev {
        padding: 0.1rem 0.2rem;
        font-size: 0.85em;
    }

    .processed-by-om-highlighter::after,
    .processed-by-enhanced::after,
    .processed-by-custom::after {
        top: 0.25rem;
        right: 0.25rem;
        padding: 0.1rem 0.2rem;
        font-size: 0.65rem;
    }

    .handler-chain-debug {
        top: 0.5rem;
        right: 0.5rem;
        max-width: 150px;
        padding: 0.5rem;
        font-size: 0.65rem;
    }
}

/* Animation for handler processing */
@keyframes handlerProcessing {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    50% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

.processing-indicator {
    position: relative;
    overflow: hidden;
}

.processing-indicator::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
    animation: handlerProcessing 2s infinite;
    z-index: 1;
}

/* Query Summary Styles */
.query-summary-box {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: box-shadow 0.2s;

    font-size: 0.95rem;
}

.query-summary-box:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.query-summary-header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
}

.query-summary-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.query-summary-content {
    padding: 1rem;
}

/* Topics searched styling */
.topics-searched {
    font-size: 0.8em;
    color: #aaa;
    font-weight: normal;
    font-style: italic;
}

details[open]>.query-summary-header::after {
    content: "▲";
    margin-left: auto;
    font-size: 0.9em;
    color: var(--accent-primary);
}

details:not([open])>.query-summary-header::after {
    content: "▼";
    margin-left: auto;
    font-size: 0.9em;
    color: var(--accent-primary);
}

/* MudBlazor Style Query Summary (Custom HTML implementation) */
.mud-expansion-panel.query-summary-box {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mud-expansion-panel.query-summary-box:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border-color: var(--accent-primary);
}

.mud-expansion-panel .query-summary-header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.2s ease;
    position: relative;
}

.mud-expansion-panel .query-summary-header:hover {
    background: var(--bg-hover);
}

.mud-expansion-panel .query-summary-header::after {
    content: "expand_more";
    font-family: 'Material Icons', 'Material Icons Outlined', 'Material Symbols Outlined', sans-serif;
    margin-left: auto;
    font-size: 1.2em;
    color: var(--accent-primary);
    transition: transform 0.3s ease;
}

.mud-expansion-panel[open] .query-summary-header::after {
    transform: rotate(180deg);
}

.mud-expansion-panel .query-summary-content {
    padding: 1.25rem;
    background: var(--surface-color);
    animation: slideDown 0.3s ease;
}

.mud-expansion-panel .query-summary-content p {
    margin: 0.5rem 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.mud-expansion-panel .query-summary-content p:first-child {
    margin-top: 0;
}

.mud-expansion-panel .query-summary-content p:last-child {
    margin-bottom: 0;
}

/* Badge styles for response type and service */
.response-type-badge,
.service-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.response-type-badge {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    box-shadow: 0 2px 4px rgba(34, 211, 238, 0.3);
}

.service-badge {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

/* Animation for expanding content */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
    }

    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 500px;
    }
}

/* Responsive adjustments for MudBlazor-style expansion panel */
@media (max-width: 768px) {
    .mud-expansion-panel .query-summary-header {
        padding: 0.875rem 1rem;
        font-size: 1rem;
    }

    .mud-expansion-panel .query-summary-content {
        padding: 1rem;
    }

    .response-type-badge,
    .service-badge {
        padding: 0.2rem 0.6rem;
        font-size: 0.75rem;
    }
}

/* Query Summary Section with MudBlazor */
.query-summary-section {
    margin-bottom: 1rem;
}

.query-summary-expansion {
    margin-bottom: 1rem;
}

.query-summary-expansion .mud-expansion-panel {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.query-summary-expansion .mud-expansion-panel:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.query-summary-expansion .mud-expansion-panel-header {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: 8px 8px 0 0;
    padding: 1rem;
}

.query-summary-expansion .mud-expansion-panel-content {
    background: var(--surface-color);
    padding: 1rem;
    border-radius: 0 0 8px 8px;
}

.query-summary-expansion .mud-grid .mud-item {
    margin-bottom: 0.5rem;
}

.query-summary-expansion .mud-text {
    color: var(--text-primary);
    line-height: 1.5;
}

.query-summary-expansion .mud-chip {
    margin-right: 0.5rem;
}

/* Responsive adjustments for Query Summary */
@media (max-width: 768px) {
    .query-summary-expansion .mud-expansion-panel-header {
        padding: 0.75rem;
        font-size: 0.9rem;
    }

    .query-summary-expansion .mud-expansion-panel-content {
        padding: 0.75rem;
    }

    .query-summary-expansion .mud-text {
        font-size: 0.85rem;
    }
}

/* GIST BY AUTHORS styling for dark mode */
.gist-by-authors {
    display: block;
    width: 100%;
    max-width: 65em;
    border: 2px solid #60a5fa;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(96, 165, 250, 0.3), 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 16px 20px;
    background: linear-gradient(135deg, #1f2937 0%, #374151 30%, #4b5563 100%);
    box-sizing: border-box;
    margin: 16px auto;
    color: #f3f4f6 !important;
    font-size: 1rem;
    line-height: 1.6;
    position: relative;
    overflow: hidden;
}

.gist-by-authors::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #60a5fa, #a78bfa, #ec4899, #f59e0b);
    background-size: 300% 100%;
    animation: gistShimmer 3s ease-in-out infinite;
}

@keyframes gistShimmer {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.gist-by-authors .gist-subtitle {
    font-size: 1.1rem;
    font-weight: 600;
    color: #e5e7eb;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(156, 163, 175, 0.3);
}

.gist-by-authors p {
    margin-bottom: 12px;
    color: #d1d5db;
}

.gist-by-authors ul,
.gist-by-authors ol {
    color: #d1d5db;
    margin-bottom: 12px;
    padding-left: 20px;
}

.gist-by-authors li {
    margin-bottom: 6px;
}

.gist-by-authors strong {
    color: #f9fafb;
    font-weight: 600;
}

.gist-by-authors em {
    color: #93c5fd;
    font-style: italic;
}

/* Light mode fallback */
@media (prefers-color-scheme: light) {
    .gist-by-authors {
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 30%, #cbd5e1 100%);
        color: #1f2937 !important;
        border-color: #3b82f6;
        box-shadow: 0 8px 16px rgba(59, 130, 246, 0.2), 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .gist-by-authors .gist-subtitle {
        color: #374151;
        border-bottom-color: rgba(75, 85, 99, 0.3);
    }

    .gist-by-authors p,
    .gist-by-authors ul,
    .gist-by-authors ol,
    .gist-by-authors li {
        color: #4b5563;
    }

    .gist-by-authors strong {
        color: #111827;
    }

    .gist-by-authors em {
        color: #1d4ed8;
    }
}

/* Responsive design for mobile */
@media (max-width: 768px) {
    .gist-by-authors {
        margin: 12px auto;
        padding: 12px 16px;
        border-radius: 8px;
    }

    .gist-by-authors .gist-subtitle {
        font-size: 1rem;
        margin-bottom: 10px;
    }
}

/* Hover effect for better interactivity */
.gist-by-authors:hover chat-input-section {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(96, 165, 250, 0.4), 0 6px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

@media (prefers-color-scheme: light) {
    .gist-by-authors:hover {
        box-shadow: 0 12px 24px rgba(59, 130, 246, 0.3), 0 6px 12px rgba(0, 0, 0, 0.15);
    }
}

/* ===== RESPONSIVE TABLE DESIGN FOR CONTENT VIEWER ===== */
/* Desktop table display by default */
.desktop-om-table {
    display: block;
}

.mobile-om-table {
    display: none;
}

/* CaseLaw table responsive design */
.desktop-caselaw-table {
    display: block;
}

.mobile-caselaw-table {
    display: none;
}

/* Mobile responsive breakpoint */
@media (max-width: 768px) {
    .desktop-om-table {
        display: none;
    }

    .mobile-om-table {
        display: block;
    }

    .desktop-caselaw-table {
        display: none;
    }

    .mobile-caselaw-table {
        display: block;
    }

    .content-viewer-container {
        padding: 5px;
    }

    .carousel-item-container {
        height: auto;
        min-height: 100dvh;
    }
}

/* Small mobile responsive breakpoint */
@media (max-width: 480px) {
    .ayra-content {
        font-size: 0.85rem;
    }

    .ayra-content table {
        font-size: 0.75rem;
    }

    .ayra-content table th,
    .ayra-content table td {
        padding: 4px;
    }
}

/* ===== STREAMING TEXT LIGHT ANIMATION ===== */
.streaming-light-animation {
    color: #9ca3af !important;
    /* Base gray color */
    background: linear-gradient(90deg,
            #9ca3af 0%,
            #9ca3af 40%,
            #ffffff 50%,
            #9ca3af 60%,
            #9ca3af 100%);
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textLightSweep 2.5s ease-in-out infinite;
    position: relative;
    display: inline-block;
}

@keyframes textLightSweep {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Warm Paper & Sand & Ink: streaming status text shimmers in the warm amber
   primary-ink (instead of the neutral grey) so it relates to the palette. */
[data-theme="light"][data-palette="warmpaper"] .streaming-light-animation,
[data-theme="light"][data-palette="sandink"] .streaming-light-animation {
    color: var(--primary-ink) !important;
    background: linear-gradient(90deg,
            var(--primary-ink) 0%,
            var(--primary-ink) 40%,
            #fff7e8 50%,
            var(--primary-ink) 60%,
            var(--primary-ink) 100%);
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (background-clip: text) {
    .streaming-light-animation {
        color: #9ca3af !important;
        -webkit-text-fill-color: unset;
        position: relative;
        overflow: hidden;
    }

    .streaming-light-animation::after {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        color: #ffffff;
        width: 100%;
        height: 100%;
        clip-path: inset(0 100% 0 0);
        animation: textClipSweep 1.5s ease-in-out infinite;
    }

    @keyframes textClipSweep {
        0% {
            clip-path: inset(0 0 0 100%);
        }

        100% {
            clip-path: inset(0 100% 0 0);
        }
    }
}

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

    100% {
        left: 100%;
    }
}

/* Global brain icon styling - Light purple */
.brain-icon-light-purple,
.brain-icon-light-purple .mud-icon-root,
.brain-icon-light-purple-btn .mud-icon-root[class*="fa-brain"],
.brain-icon-light-purple-btn .mud-button-root .mud-icon-root[class*="fa-brain"],
i.fa-brain.brain-icon-light-purple,
[class*="fa-brain"].brain-icon-light-purple {
    color: #BA68C8 !important;
    /* Light purple */
}

.brain-icon-light-purple:hover,
.brain-icon-light-purple:hover .mud-icon-root,
.brain-icon-light-purple-btn:hover .mud-icon-root[class*="fa-brain"] {
    color: #CE93D8 !important;
    /* Lighter purple on hover */
}

/* ── Telerik ButtonGroup: Theme-aware overrides ── */
/* Uses Class parameter per Telerik docs: */
/* https://www.telerik.com/blazor-ui/documentation/styling-and-themes/override-theme-styles */

/* Unselected button — adapts to dark/light theme */
.k-button-group button.k-button.cb-filter-off {
    background-color: var(--surface-color);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.k-button-group button.k-button.cb-filter-off:hover {
    background-color: var(--surface-hover);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Selected (active) button */
.k-button-group button.k-button.cb-filter-on,
.k-button-group button.k-button.cb-filter-on:hover {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-color: var(--mud-palette-primary);
}

/* Focus ring */
.k-button-group button.k-button.cb-filter-off:focus,
.k-button-group button.k-button.cb-filter-on:focus {
    box-shadow: 0 0 0 2px rgba(var(--mud-palette-primary-rgb), 0.3);
}