@charset "UTF-8";
/* Selected concept 02. Effects stay on the frame; driver text stays clear. */
:root {
  --bg: #050709; --surface: #10141b; --raised: #171c25;
  --line: #303e4e; --ink: #f3f5fa; --muted: #acb5c5;
  --pink: #ff75df; --cyan: #25d9ef; --red: var(--pink); --red-dark: #de51bc;
  --radius-frame: 2rem; --radius-panel: 1.5rem;
  --radius-control: 1rem; --radius-composer: 1.75rem;
}
body { background: #080c12; }
a { overflow-wrap: anywhere; }
button, input, textarea, select { font-size: 1rem; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }
.site-shell {
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  min-height: calc(100dvh - 2rem); margin: 1rem; background: var(--bg);
  border: 1px solid #294153; border-top-color: #633d68; border-bottom-color: #704269;
  border-radius: var(--radius-frame);
  box-shadow: 0 0 28px #03bee908, inset 0 0 60px #010307;
}
.site-shell > main { flex: 1; min-width: 0; }
.circuit-corner {
  position: absolute; z-index: -1; pointer-events: none;
  width: min(34vw, 25rem); height: min(31vw, 23rem);
  background: url("circuit-corner.121cf302e049.svg") top left / contain no-repeat; opacity: .85;
}
.corner-top { top: 0; left: 0; }
.corner-bottom { bottom: 0; right: 0; transform: rotate(180deg); }
.masthead { min-height: 5rem; padding: 1.25rem clamp(1rem, 3vw, 3rem); border: 0; position: relative; gap: 1.5rem; }
.brand-icon { display: block; flex: none; object-fit: contain; mix-blend-mode: screen; }
.brand { color: var(--pink); letter-spacing: .035em; }
.brand-sub { font-size: .75rem; }
.masthead nav { flex-wrap: wrap; justify-content: flex-end; gap: .5rem 1.5rem; }
.masthead nav a, .masthead nav .text-button { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--cyan); }
.masthead nav a:hover, .text-button:hover { color: var(--pink); }
.landing-page .masthead .brand { visibility: hidden; }
.footer { margin: 0 clamp(1rem, 3vw, 3rem); padding: 1.3rem 0; min-height: 4.8rem; justify-content: center; align-items: center; border-top-color: #293542; font-size: .875rem; }
.footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: .25rem 0; }
.footer a { padding: .65rem 1.25rem; text-decoration: none; }
.footer a + a { border-left: 1px solid var(--line); }
.footer a:hover { color: var(--cyan); }
.page { padding-top: 2rem; }
.panel, .auth-card { border-radius: var(--radius-panel); background: #10141bf2; }
.auth-card { border-top-color: var(--cyan); }
.button { background: var(--pink); border-color: var(--pink); border-radius: var(--radius-control); color: #100c15; }
.button:hover { background: #ff99e8; }
.button.secondary { color: var(--ink); background: #111820; border-color: #3a5566; }
.button.secondary:hover { background: #162732; border-color: var(--cyan); }
input, textarea, select { background: #080d13; border-color: #455467; border-radius: var(--radius-control); }
input[type=checkbox] { accent-color: var(--pink); width: 1.15rem; height: 1.15rem; }
.guide a { color: var(--cyan); }
.errorlist, .chat-error { color: #ffb9b0; }
.notices, .access-notices { width: min(100%, 60rem); margin: auto; padding: .5rem 1.25rem; }
.notice { background: #151b26; border-radius: var(--radius-control); }
.ui-icon { display: block; width: 1.65rem; height: 1.65rem; flex: 0 0 auto; }
.launch-page { max-width: 58rem; min-height: calc(100dvh - 13rem); margin: auto; padding: 2rem 2rem 4rem; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hero-brand { width: min(100%, 34rem); margin: 0 auto; }
.hero-emblem { display: none; }
.hero-wordmark { position: relative; width: 100%; aspect-ratio: 2.45; overflow: hidden; }
/* Crop only the surrounding space at display time. Both original image files
   remain untouched, preserving the supplied mark and wordmark. */
.hero-wordmark img { display: block; position: absolute; max-width: none; width: 135%; height: auto; left: -17.5%; top: -41%; mix-blend-mode: screen; }
.launch-title { font-size: clamp(1.25rem, 2.5vw, 1.75rem); line-height: 1.4; font-weight: 450; letter-spacing: 0; text-align: center; margin: 1.5rem 0 2rem; }
.launch-input { display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 5rem; padding: .65rem .8rem .65rem 1.4rem; border: 1px solid var(--cyan); border-radius: var(--radius-composer); background: #111720; color: var(--muted); text-decoration: none; box-shadow: 0 0 0 4px #14d9ef09; }
.launch-input:hover { box-shadow: 0 0 18px #fa6bdb12; }
.launch-input > span:not(.send-icon) { flex: 1; min-width: 0; }
.send-icon { display: inline-flex; flex: none; justify-content: center; align-items: center; width: 3.5rem; height: 3.5rem; min-height: 3.5rem; padding: .7rem; margin-left: auto; background: var(--pink); color: #090610; border: 0; border-radius: 50%; }
.launch-hint, .composer-hint { color: var(--muted); font-size: .875rem; text-align: center; margin: 1rem 0 0; }
.launch-registration { display: inline-block; color: var(--cyan); padding: .75rem; }
.banner-slot { width: min(100%, 46rem); margin-top: 3rem; border-radius: var(--radius-panel); }
.workspace-tools { display: flex; align-items: start; gap: 1rem; max-width: 56rem; margin: auto; padding: .25rem 1.25rem; min-height: 2.5rem; }
.new-session-link { margin-left: auto; padding: .5rem 0; font-size: .875rem; }
.chat-switcher { position: relative; z-index: 4; max-width: 100%; }
.chat-switcher > summary { padding: .5rem 0; color: var(--cyan); font-size: .875rem; font-weight: 450; }
.chat-count { color: var(--muted); margin-left: .45rem; }
.chat-switcher .session-list { position: absolute; top: 100%; left: 0; width: min(24rem, calc(100vw - 5rem)); max-height: 45dvh; padding: .5rem; margin: .4rem 0; display: block; overflow: auto; background: #101620; border: 1px solid #385766; border-radius: var(--radius-panel); box-shadow: 0 14px 30px #000b; }
.session-link { max-width: none; min-width: 0; border-radius: var(--radius-control); }
.session-link.selected { border-left-color: var(--cyan); }
.chat-area { width: min(100%, 56rem); min-height: calc(100dvh - 17rem); padding: 1rem 1.25rem 2rem; }
.chat-heading { gap: 1rem; }
.chat-heading h1 { margin-bottom: 0; font-size: 1.15rem; }
.status { white-space: normal; flex: none; max-width: 40%; font-size: .875rem; border-color: #3c5460; border-radius: 999px; color: var(--cyan); }
.chat-area:not(.has-messages) .chat-heading { display: none; }
.chat-area:not(.has-messages) #chat-expiry { order: 5; margin: 1.5rem 0 0; }
.conversation { min-height: 0; padding: 1rem 0; max-height: 60dvh; }
.chat-area:not(.has-messages) .conversation { max-height: none; display: grid; align-items: center; }
.empty-chat { width: 100%; max-width: 100%; text-align: center; padding: 1rem 0 0; }
.empty-chat .launch-title { margin-bottom: 0; }
.message { padding: 1rem 1.2rem; max-width: 92%; }
.message.bot { border: 1px solid #243542; border-left: 2px solid var(--cyan); border-radius: var(--radius-panel); background: #080d13; }
.message.driver { background: #1c1522; border-color: #463348; border-radius: var(--radius-panel); }
.message .speaker { color: var(--muted); font-size: .8125rem; }
.composer { border: 1px solid var(--cyan); border-radius: var(--radius-composer); padding: .65rem .75rem; background: #111720; box-shadow: 0 0 0 4px #14d9ef09; }
.composer:focus-within { border-color: var(--pink); }
.composer-main { display: flex; gap: .65rem; align-items: center; }
.composer textarea { min-height: 3.5rem; max-height: 12rem; height: auto; padding: 1rem .4rem; resize: vertical; line-height: 1.45; border-radius: var(--radius-control); }
.composer textarea:focus-visible { outline-offset: 0; }
.composer .upload-button { display: flex; flex: none; align-items: center; justify-content: center; width: 2.75rem; min-height: 2.75rem; position: relative; color: var(--muted); text-decoration: none; }
.composer .upload-button:focus-within { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 50%; }
/* Keep the native file input keyboard-accessible; it is never display:none. */
.composer .upload-button input.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; clip: rect(0,0,0,0); overflow: hidden; }
.selected-file { display: block; overflow-wrap: anywhere; margin: .5rem .75rem 0; }
.selected-file:empty { display: none; }
.file-limits { align-self: center; color: var(--muted); font-size: .875rem; margin: .65rem 0; max-width: 100%; }
.file-limits summary { font-weight: 400; padding: .25rem; }
.file-limits p { padding: .5rem; margin-bottom: 0; }
#chat-expiry { padding: 0; font-size: .875rem; }
#end-session { order: 6; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .25rem .75rem; margin: 1.5rem 0 0; padding: 0; }
#end-session p { margin: 0; }
#end-session button { min-height: 2.75rem; font-size: .875rem; }
.session-dialog { position: fixed; width: min(34rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; margin: auto; padding: 2rem; color: var(--ink); background: #10141b; border: 1px solid var(--cyan); border-radius: var(--radius-frame); box-shadow: 0 0 48px #17cde314; }
.session-dialog::backdrop { background: #010408d9; }
.dialog-close { display: block; width: 2.75rem; height: 2.75rem; position: absolute; right: .6rem; top: .6rem; background: transparent; color: var(--muted); border: 0; border-radius: 50%; font-size: 1.7rem; }
.session-dialog h2 { padding-right: 2rem; }
.session-dialog .session-start { margin-bottom: 0; }
.session-start > p:first-of-type { font-size: 1.125rem; line-height: 1.55; }
.session-agreement { font-size: 1rem; line-height: 1.5; }
.session-agreement input { margin-top: .2rem; flex: none; }
.auth-links a, .guide a { overflow-wrap: anywhere; }
.launch-input:hover, .launch-input:focus-visible { border-color: var(--pink); }
.button.send-icon { border-radius: 50%; }
.send-icon:focus-visible { outline-offset: -5px; outline-color: #131019; }
h1, h2, h3, p { overflow-wrap: anywhere; }
@media(max-width: 650px) {
  .site-shell { margin: .5rem; min-height: calc(100dvh - 1rem); border-radius: var(--radius-panel); }
  .circuit-corner { width: 11rem; height: 10rem; opacity: .5; }
  .masthead { padding: .75rem 1rem; gap: .5rem; align-items: start; }
  .masthead nav { gap: .1rem .85rem; font-size: .875rem; }
  .brand { font-size: .75rem; flex: 0 0 auto; }
  .brand-icon { width: 2rem; height: 2rem; }
  .brand-sub { font-size: .75rem; letter-spacing: .07em; }
  .landing-page .masthead .brand { display: none; }
  .landing-page .masthead nav { margin-left: auto; }
  .launch-page { min-height: calc(100dvh - 12rem); padding: 1.5rem 1rem 3rem; }
  .hero-brand { width: min(100%, 17rem); }
  .hero-emblem { display: block; width: 11rem; height: 11rem; margin: 0 auto; mix-blend-mode: screen; }
  .hero-wordmark { aspect-ratio: 3.7; }
  .hero-wordmark img { width: 199%; left: -75%; top: -184%; }
  .launch-title { font-size: 1.25rem; margin: 1.35rem 0 1.6rem; }
  .launch-input { gap: .65rem; padding: .65rem; min-height: 4.5rem; font-size: 1rem; }
  .launch-input > .ui-icon { width: 1.3rem; height: 1.3rem; }
  .send-icon { width: 2.75rem; height: 2.75rem; min-height: 2.75rem; padding: .6rem; }
  .launch-hint, .composer-hint { font-size: .875rem; line-height: 1.5; }
  .footer { margin: 0 1rem; padding: .7rem 0; font-size: .875rem; }
  .footer a { padding: .6rem .75rem; }
  .chat-area { padding: .75rem 1rem 1.5rem; min-height: calc(100dvh - 17rem); }
  .chat-heading { align-items: start; }
  .chat-heading h1 { font-size: 1rem; }
  .conversation { max-height: 55dvh; }
  .empty-chat { padding: .5rem 0; }
  .composer-main { gap: .2rem; }
  .composer { padding: .5rem; }
  .composer textarea { padding: .8rem .35rem; font-size: 1rem; }
  .composer .upload-button { width: 2rem; }
  .message { max-width: 100%; padding: .85rem; }
  .workspace-tools { padding-left: 1rem; padding-right: 1rem; }
  .session-dialog { padding: 1.5rem; }
  .auth-layout { padding: 1.5rem 1rem; }
  .auth-card { padding: 1.25rem; }
}
@media(prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
@media(forced-colors: active) { .circuit-corner { display: none; } .launch-input, .composer, .button { border: 1px solid ButtonText; } }