/* Dark section surfaces. Default typography comes from app.css / chat.css. */
:root {
    color-scheme: dark;
    --cyan: #8adbdc;
    --cyan-line: rgba(108, 208, 218, .22);
    --muted: #b3c7ca;
    --subtle: #a0b8be;
    --body-size: 18px;
    --chat-size: 20px;
}

.reading-toggle { font-size: 14px; }

/* A+ is optional: the original responsive sizes remain the default. */
:root[data-text-size="large"] .hero-description,
:root[data-text-size="large"] .section-heading > p,
:root[data-text-size="large"] .journey-card p,
:root[data-text-size="large"] .intro-grid > div > p:not(.eyebrow),
:root[data-text-size="large"] .video-card p,
:root[data-text-size="large"] .invitation > p:not(.eyebrow),
:root[data-text-size="large"] .page-hero > p:not(.eyebrow),
:root[data-text-size="large"] .page-hero > div > p:not(.eyebrow),
:root[data-text-size="large"] .welcome-description { font-size: 21px; line-height: 1.95; }
:root[data-text-size="large"] .composer textarea,
:root[data-text-size="large"] .message-text,
:root[data-text-size="large"] .message-user .message-text { font-size: 24px; line-height: 1.95; }
:root[data-text-size="large"] .main-nav a,
:root[data-text-size="large"] .button,
:root[data-text-size="large"] .text-link,
:root[data-text-size="large"] .card-link,
:root[data-text-size="large"] .filter-tabs button,
:root[data-text-size="large"] .search-field input,
:root[data-text-size="large"] .new-chat,
:root[data-text-size="large"] .conversation-open,
:root[data-text-size="large"] .conversation-menu button,
:root[data-text-size="large"] .sidebar-action,
:root[data-text-size="large"] .suggestion-grid button > span,
:root[data-text-size="large"] .mode-select select,
:root[data-text-size="large"] .app-dialog input { font-size: 18px; }
:root[data-text-size="large"] .footer-main p,
:root[data-text-size="large"] .footer-main a:not(.brand),
:root[data-text-size="large"] .footer-main h2,
:root[data-text-size="large"] .sidebar-heading,
:root[data-text-size="large"] .history-heading,
:root[data-text-size="large"] .history-empty,
:root[data-text-size="large"] .message-label,
:root[data-text-size="large"] .suggestion-grid button small,
:root[data-text-size="large"] .collection-note,
:root[data-text-size="large"] .editorial-note,
:root[data-text-size="large"] .chat-error,
:root[data-text-size="large"] .editing-notice,
:root[data-text-size="large"] .app-dialog p { font-size: 16px; }
:root[data-text-size="large"] .privacy-note,
:root[data-text-size="large"] .demo-notice,
:root[data-text-size="large"] .composer-help,
:root[data-text-size="large"] .response-status { font-size: 14px; }
:root[data-text-size="large"] .journey-card h3,
:root[data-text-size="large"] .video-card h3 { font-size: 26px; }
:root[data-text-size="large"] .section-heading h2,
:root[data-text-size="large"] .chat-welcome h2 { font-size: 34px; }
:root[data-text-size="large"] .mode-select select { max-width: 150px; }
@media (max-width: 600px) {
    .reading-toggle { font-size: 0; }
    :root[data-text-size="large"] .suggestion-grid { grid-template-columns: 1fr; }
    :root[data-text-size="large"] .chat-welcome h2 { font-size: 28px; }
    :root[data-text-size="large"] .mode-select select { max-width: 116px; }
}

:root[data-text-size="large"] { --body-size: 21px; --chat-size: 24px; }
.site-header {
    border-bottom-color: var(--cyan-line);
    box-shadow: 0 1px 25px rgba(43, 177, 191, .06);
}
.reading-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 6px 10px;
    border: 1px solid var(--cyan-line);
    border-radius: 7px;
    color: var(--cyan);
    
    white-space: nowrap;
}
.reading-toggle strong { font: 600 19px var(--sans); }
.reading-toggle:hover, .reading-toggle[aria-pressed="true"] { background: var(--surface-hover); border-color: var(--cyan); }
.main-nav { gap: 24px; }
.nav-inner { gap: 18px; padding-inline: 28px; }
.nav-actions { gap: 10px; margin-left: 0; }
.nav-cta {  min-height: 44px; padding-inline: 12px; gap: 9px; }
.icon-button { min-width: 44px; min-height: 44px; }
.hero {
    isolation: isolate;
    background-image: linear-gradient(var(--cyan-line) 1px, transparent 1px), linear-gradient(90deg, var(--cyan-line) 1px, transparent 1px);
    background-size: 64px 64px;
    background-position: right center;
}
.hero:before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, var(--bg) 25%, transparent 100%), linear-gradient(var(--bg), transparent 25%, transparent 65%, var(--bg));
}
.hero-visual { filter: drop-shadow(0 0 28px rgba(79, 199, 214, .16)); }
.hero-visual:after {
    content: 'MAITREYA / INTELLIGENCE × WISDOM';
    display: block;
    text-align: center;
    color: var(--cyan);
    font: 14px/1.8 ui-monospace, monospace;
    letter-spacing: 2px;
    margin-top: 22px;
}
.lotus-art > g:first-of-type { stroke: var(--cyan); stroke-opacity: .4; }
.hero-description, .hero-note, .section-heading > p,
.journey-card p, .intro-grid > div > p:not(.eyebrow), .video-card p,
.invitation > p:not(.eyebrow), .page-hero > p:not(.eyebrow),
.page-hero > div > p:not(.eyebrow), .empty-state p {  line-height: 1.95; }
.eyebrow, .hero .eyebrow, .invitation .eyebrow {  color: var(--cyan); letter-spacing: 2px; }
.button, .hero .button {  min-height: 52px; }
.hero-actions { flex-wrap: wrap; }
.journey-card { position: relative; border-color: var(--cyan-line); background: linear-gradient(135deg, var(--surface), var(--bg)); }
.journey-card:before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 34px;
    height: 34px;
    border-left: 2px solid var(--cyan);
    border-top: 2px solid var(--cyan);
    border-top-left-radius: 8px;
    pointer-events: none;
}
.journey-top > span {  color: var(--cyan); }
.journey-card.featured { box-shadow: inset 0 0 35px rgba(78, 190, 201, .06); }
.video-art { border-color: var(--cyan-line); }
.art-orbit { box-shadow: 0 0 35px #67d3e120; border-color: #88d5d788; }
.art-caption {  letter-spacing: 2px; }
.play-button { width: 44px; height: 44px; }
.filter-tabs button { min-height: 46px; }
.search-field { min-height: 46px; }
.footer-main { grid-template-columns: 1.2fr .9fr 1.1fr 1fr; gap: 28px; }
.footer-main p, .footer-main a:not(.brand) {  line-height: 1.9; }
.app-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }

/* The conversation stays still and high-contrast; effects surround the content. */
.chat-workspace {
    background: radial-gradient(ellipse at 65% 5%, rgba(40, 143, 169, .12), transparent 60%);
}
.chat-toolbar { border-bottom: 1px solid var(--cyan-line); padding-block: 14px; }
.chat-sidebar { width: 300px; }
.sidebar-heading {  margin-bottom: 15px; }
.new-chat {  min-height: 52px; }
.new-chat > span { display: none; }
.history-empty {  white-space: pre-line; }
.conversation-open {  min-height: 48px; }
.conversation-row > .icon-button { opacity: 1; min-width: 44px; min-height: 44px; }
.conversation-menu { width: 200px; }
.conversation-menu button {  min-height: 46px; }
.sidebar-action {  min-height: 46px; }
.local-profile {  padding-block: 14px; }
.local-profile small {  white-space: normal; }
.chat-welcome { width: min(780px, calc(100% - 48px)); padding-top: 32px; padding-bottom: 14px; }
.welcome-emblem { border-color: var(--cyan); box-shadow: 0 0 35px #55c7d321, inset 0 0 20px #55c7d314; }
.welcome-emblem:after { border-color: var(--cyan-line); }
.chat-welcome .eyebrow {  color: var(--cyan); }
.welcome-description {  line-height: 1.9; }
.suggestion-grid { margin-top: 25px; }
.suggestion-grid button { padding: 18px; border-color: var(--cyan-line); }
.composer-area { width: min(900px, calc(100% - 48px)); margin-bottom: 14px; }
.composer { border-color: var(--cyan-line); box-shadow: 0 0 30px #37b2c109; }
.composer:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 2px #63ccd019; }
.composer textarea {  line-height: 1.8; min-height: 55px; }
.composer .icon-button, .send-button { min-width: 46px; min-height: 46px; }
.send-button { background: var(--cyan); }
.mode-select select {  max-width: 160px; }
.mode-select > .icon { width: 18px; height: 18px; }
.composer-help {  flex-wrap: wrap; }
.messages { width: min(860px, calc(100% - 48px)); }
.message-text, .message-user .message-text {  line-height: 1.95; }
.message-avatar { width: 38px; height: 38px; }
.message-actions .icon-button { min-width: 44px; min-height: 44px; }
.message-actions .icon { width: 20px; height: 20px; }
.attachment-chip { max-width: 240px; }
.attachment-chip .icon-button { min-width: 44px; min-height: 44px; }
.chat-error, .editing-notice {  flex-wrap: wrap; }
.chat-error button:not(.icon-button), .editing-notice button {  min-height: 44px; }
.footer-compact .footer-bottom {  height: auto; min-height: 33px; }

@media (max-width: 1200px) {
    .main-nav { display: none; position: absolute; top: var(--header-height); left: 0; right: 0; padding: 18px 24px; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg-deep); border-bottom: 1px solid var(--cyan-line); }
    .main-nav.is-open { display: flex; }
    .main-nav a {  padding: 13px 0; }
    .main-nav a[aria-current]:after { display: none; }
    #nav-toggle { display: inline-flex !important; }
    .nav-cta { display: none; }
    .journey-grid { gap: 18px; }
    .journey-card { padding: 25px; }
    .footer-main { grid-template-columns: 1fr 1fr; }
    .footer-main > div:last-child { grid-column: auto; }
    .chat-sidebar { width: 270px; }
    .suggestion-grid button { padding: 15px; }
    .suggestion-grid button > .icon:last-child { display: none; }
}
@media (max-height: 850px) {
    .chat-welcome { padding-top: 22px; }
    .chat-sidebar { overflow-y: auto; }
    .chat-sidebar > * { flex-shrink: 0; }
    .conversation-list { flex: 1 0 90px; overflow: visible; }
}
@media (max-width: 850px) {
    .chat-sidebar, .chat-shell.sidebar-mobile-open .chat-sidebar, .chat-shell.sidebar-collapsed .chat-sidebar { width: min(320px, calc(100vw - 32px)); }
    .hero h1 {  letter-spacing: 1px; }
    .hero { grid-template-columns: 1fr; padding-top: 45px; }
    .hero-visual { max-width: 400px; width: 90%; margin: 20px auto; }
    .journey-grid { grid-template-columns: 1fr; }
    .video-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .nav-inner, .chat-page .site-header .nav-inner { padding-inline: 12px; gap: 6px; }
    .brand { gap: 7px; }
    .brand small { display: none; }
    .brand > span, .chat-page .site-header .brand > span {  letter-spacing: 0; }
    .brand img, .chat-page .site-header .brand img { width: 30px; height: 30px; }
    .nav-actions { gap: 2px; }
    .reading-toggle {  padding-inline: 8px; gap: 0; }
    .nav-actions .icon-button { min-width: 44px; padding: 10px; }
    .hero { text-align: left; }
    .hero .eyebrow { justify-content: flex-start; }
    .hero-actions { justify-content: flex-start; }
    .hero-note {  text-align: left; }
    .hero-visual:after {  letter-spacing: 1px; }
    .values-strip .container {  gap: 9px; letter-spacing: 0; }
    .footer-main { grid-template-columns: 1fr; }
    .footer-brand { grid-column: auto; }
    .filter-tabs { gap: 5px; }
    .filter-tabs button {  padding-inline: 12px; }
    .chat-toolbar { padding: 10px 8px; }
    .chat-toolbar-title { gap: 4px; }
    .chat-toolbar-title > div > span {  letter-spacing: 0; }
    .chat-toolbar-actions { gap: 0; }
    .mode-badge {  padding: 3px 7px; }
    .chat-toolbar-title > div > h1 > .icon { display: none; }
    .chat-welcome { width: calc(100% - 32px); }
    .chat-welcome .eyebrow {  letter-spacing: 1px; }
    .welcome-description br { display: none; }
    .suggestion-grid { grid-template-columns: 1fr; }
    .suggestion-grid button { flex-wrap: nowrap; padding: 15px; gap: 13px; }
    .suggestion-grid button > span {  flex: 1; }
    .suggestion-grid small {  white-space: normal; }
    .composer-area { width: calc(100% - 20px); margin: 9px auto; }
    .composer textarea {  min-height: 52px; }
    .composer-help {  text-align: center; }
    .mode-select select {  max-width: 114px; }
    .composer-tools, .send-tools { gap: 0; }
    #character-count { display: none; }
    .tool-divider { margin-inline: 3px; }
    .mode-select { gap: 3px; }
    .mode-select > .icon:first-child { display: none; }
    .messages { width: calc(100% - 24px); }
    .message { gap: 8px; }
    .message-avatar { width: 30px; height: 30px; }
    .message-user > .message-content { max-width: 95%; }
    .footer-compact .footer-bottom { justify-content: center;  padding: 5px 10px; }
    .footer-compact .footer-bottom > span:last-child { display: none; }
    .attachment-chip { max-width: 100%; }
    .attachment-chip > span { max-width: 140px; }
}
@media (max-width: 360px) {
    .brand img { display: none; }
    .mode-badge {  padding-inline: 5px; }
}

/* Different dark hues create clear section boundaries without a light theme. */
.site-header { background: #081923; }
.values-strip { background: #193436; border-color: #42615b; }
#explore {
    background: #142c39;
    box-shadow: 0 0 0 100vmax #142c39;
    clip-path: inset(0 -100vmax);
}
.intro-section { background: #0b3033; border-block-color: #315458; }
.section.container:not(#explore) {
    background: #0c2130;
    box-shadow: 0 0 0 100vmax #0c2130;
    clip-path: inset(0 -100vmax);
}
.journey-grid .journey-card { background: #193947; border-color: #345866; }
.journey-grid .journey-card.featured { background: #1b3d3b; border-color: #697355; }
.invitation.container { background: radial-gradient(ellipse at top, #294745, #152b32 75%); border-color: #57706a; margin-top: 36px; }
.site-footer { background: #040f18; border-top-color: #2c4651; }
.media-toolbar { background: #122f3b; padding: 20px; border: 1px solid #345461; border-radius: 8px; }
.chat-sidebar { background: #071923; }
.chat-toolbar { background: #153542; }
.chat-workspace { background: radial-gradient(ellipse at 65% 5%, #143440, transparent 65%), #0d2531; }
.suggestion-grid button { background: #1b3946; border-color: #385e69; }
.suggestion-grid button:hover { background: #244b57; }
.composer-area .composer { background: #1c3b48; border-color: #53727a; }
.message-user .message-text { background: #234551; border-color: #44636c; }


