:root { color-scheme: dark; font-family: "Segoe UI", system-ui, sans-serif; color: #e8e9ed; background: #101214; }
* { box-sizing: border-box; }
body { margin: 0; display: flex; height: 100dvh; }
button, textarea { font: inherit; }
button { cursor: pointer; color: inherit; }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, a:focus-visible, textarea:focus-visible { outline: 2px solid #b0cfbe; outline-offset: 4px; }
aside { width: 254px; background: #15181a; border-right: 1px solid #292d30; padding: 32px 22px; display: flex; flex-direction: column; flex-shrink: 0; }
.brand { display: flex; align-items: center; gap: 12px; letter-spacing: .22em; font-size: 22px; font-weight: 600; text-decoration: none; color: inherit; }
.orb { width: 27px; height: 27px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #e1f4e9, #77a78d 48%, #28493c 85%); box-shadow: 0 0 24px #91bd9f18; }
.workspace { font-size: 10px; color: #8c9499; letter-spacing: .15em; margin: 58px 0 16px; }
.secondary { background: #202629; border: 1px solid #343c40; border-radius: 8px; padding: 12px 8px; font-size: 13px; text-align: left; }
.sidebar-note { margin-top: auto; color: #939d98; font-size: 12px; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #9ac5ae; margin-right: 7px; }
main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
header { height: 78px; flex-shrink: 0; padding: 0 36px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #24282b; font-size: 14px; }
.badge { margin-left: 12px; color: #a9b3ae; border: 1px solid #39443d; border-radius: 5px; padding: 3px 7px; font-size: 10px; }
.connection { background: transparent; border: 0; color: #a8b5ae; font-size: 12px; }
.account-controls { display: flex; align-items: center; gap: 12px; }
.account-controls .secondary { padding: 7px 12px; }
#conversation { flex: 1; overflow-y: auto; padding: 36px max(24px, calc((100% - 800px) / 2)); }
#welcome { margin: 9vh auto 45px; max-width: 680px; }
.eyebrow { font-size: 11px; color: #a9c3b5; letter-spacing: .2em; }
h1 { font-size: clamp(28px, 3.8vw, 46px); font-weight: 400; letter-spacing: -.035em; margin: 20px 0 12px; }
#welcome p { color: #929c9f; font-size: 15px; line-height: 1.7; }
.suggestions { display: flex; gap: 12px; margin-top: 36px; }
.suggestions button { background: #191e20; border: 1px solid #303739; border-radius: 10px; padding: 18px; font-size: 13px; flex: 1; text-align: left; }
.suggestions span { float: right; color: #a7b9ae; padding-left: 12px; }
.message { margin: 0 0 28px; line-height: 1.75; font-size: 15px; overflow-wrap: anywhere; }
.message .label { font-size: 10px; text-transform: uppercase; letter-spacing: .15em; margin-bottom: 8px; color: #a7bfae; }
.message.user { background: #202729; padding: 16px 20px; border-radius: 12px; }
.message.user .label { color: #a3adb2; }
.message .content { white-space: pre-wrap; }
.composer-area { padding: 0 28px 18px; width: 100%; max-width: 856px; margin: 0 auto; }
#notice { color: #d1b998; font-size: 13px; min-height: 25px; }
form { background: #1c2124; border: 1px solid #3b4543; border-radius: 14px; padding: 15px; }
textarea { width: 100%; resize: vertical; max-height: 180px; min-height: 52px; background: transparent; border: 0; color: inherit; padding: 0 4px; line-height: 1.6; }
textarea::placeholder { color: #8d979b; }
.composer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
#model { font-size: 11px; color: #a0aca6; }
#send { background: #bfd8c9; color: #14251d; border: 0; padding: 9px 15px; border-radius: 7px; font-size: 12px; font-weight: 600; }
#stop { border: 1px solid #66736c; background: transparent; border-radius: 7px; padding: 8px 12px; font-size: 12px; margin-right: 8px; }
.footnote { text-align: center; color: #879194; font-size: 11px; margin: 12px 0 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 760px) { aside { display: none; } header { height: 64px; padding: 0 18px; } #conversation { padding: 24px 18px; } #welcome { margin-top: 6vh; } .composer-area { padding: 0 14px 12px; } .suggestions { flex-direction: column; } .badge { margin-left: 6px; } }
#vault { margin-top: 1.5rem; font-size: .8rem; overflow-wrap: anywhere; }
#vault h2 { font-size: 1rem; }
#vault p { line-height: 1.5; }
#vault-status { padding: .7rem; background: #283328; border: 1px solid #758a68; border-radius: .4rem; color: #f0f6df; }
#vault label { display: block; margin: .65rem 0 .3rem; }
#vault input[type="password"] { width: 100%; box-sizing: border-box; background: #121720; color: #fff; border: 1px solid #526078; padding: .6rem; border-radius: .4rem; }
#vault button { width: 100%; margin-top: .45rem; white-space: normal; }
#vault a { color: #9bc9ff; display: block; margin: .8rem 0; }
aside { overflow-y: auto; }
@media (max-width: 760px) { body { display: block; height: auto; } aside { display: block; width: 100%; padding: 16px; } main { min-height: 75dvh; } .sidebar-note { display: none; } }