:root { color-scheme: light; --paper:#f7f5ef; --white:#fffefa; --ink:#243d34; --green:#244d3c; --muted:#777d70; --line:#e1e3d8; --wash:#edf0e6; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
body { margin:0; min-height:100dvh; }
button,input,textarea { font:inherit; }
button,a,input,textarea { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:wait; opacity:.55; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible { outline:3px solid #99ad76; outline-offset:3px; }
a { color:inherit; text-decoration:none; }
.topbar { height:86px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; padding:0 5vw; }
.brand { display:flex; align-items:center; gap:14px; font-size:15px; font-weight:600; letter-spacing:-.03em; }
.brand-mark { display:grid; place-items:center; background:var(--ink); color:var(--paper); width:34px; height:36px; font:22px Georgia,serif; border-radius:6px; }
.preview-label { display:block; font-size:10px; font-weight:400; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.quiet-button { color:var(--ink); border:0; background:transparent; padding:10px 4px; font-size:12px; }
.quiet-button span { margin-left:12px; }
.quiet-button:hover { color:#6c7b49; }
.subdued { color:var(--muted); }
.eyebrow { font-size:10px; text-transform:uppercase; letter-spacing:.13em; color:var(--muted); }
.portrait { width:80px; height:88px; display:grid; place-items:center; border-radius:48% 48% 40% 40%; background:#d9dfca; color:#38513c; font:52px/1 Georgia,serif; box-shadow:inset 0 0 0 7px #e5e9db; }
.portrait.large { margin:auto auto 34px; width:90px; height:100px; }
.login-view { width:min(100% - 40px,480px); margin:70px auto 35px; text-align:center; }
.login-view h1 { font:56px/1.15 Georgia,serif; font-weight:400; letter-spacing:-.05em; margin:12px 0 20px; }
.intro-copy { font-size:15px; color:var(--muted); line-height:1.85; }
.login-form { margin-top:34px; text-align:left; }
.login-form label { font-size:12px; display:block; margin-bottom:8px; }
.login-controls { display:flex; gap:8px; }
.login-controls input { min-width:0; flex:1; background:var(--white); padding:13px 12px; border:1px solid var(--line); border-radius:9px; }
.login-controls button { border:0; border-radius:9px; color:white; background:var(--green); padding:12px 19px; white-space:nowrap; font-size:13px; }
.disclosure { color:var(--muted); font-size:11px; line-height:1.7; margin:30px auto; }
.chat-layout { display:grid; grid-template-columns:230px minmax(0,820px); max-width:1180px; margin:auto; padding:30px 26px 22px; gap:42px; height:calc(100dvh - 86px); }
.persona-card { padding:27px 12px 0; }
.persona-card .eyebrow { margin-top:28px; }
.persona-card h1 { font:42px/1.1 Georgia,serif; letter-spacing:-.04em; margin:12px 0 22px; }
.persona-card p { font-size:13px; line-height:1.85; }
.persona-card .small-copy { font-size:12px; color:var(--muted); }
.thin-rule { width:35px; height:1px; background:#bec7b6; margin:26px 0 20px; }
.outline-button { background:transparent; color:var(--ink); border:1px solid #cbd2c3; border-radius:8px; padding:12px 14px; text-align:left; font-size:12px; margin-top:24px; width:100%; }
.outline-button span { margin-right:8px; }
.persona-card .quiet-button { display:block; margin-top:7px; }
.conversation { border:1px solid var(--line); border-radius:16px; background:var(--white); display:flex; flex-direction:column; min-height:0; box-shadow:0 10px 40px #243d3405; overflow:hidden; }
.conversation-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:21px 29px 12px; }
.conversation-header strong { font-size:14px; font-weight:550; }
.presence { color:var(--muted); font-size:10px; display:inline-flex; align-items:center; gap:6px; margin-left:14px; }
.presence::before { content:""; width:5px; height:5px; background:#729569; border-radius:50%; }
.conversation-disclosure { padding:0 29px 16px; margin:0; color:var(--muted); font-size:10px; line-height:1.7; border-bottom:1px solid var(--line); }
#mobile-new { display:none; }
.scroll-region { flex:1; min-height:0; overflow-y:auto; scroll-behavior:smooth; padding:24px 30px; }
.welcome { text-align:center; margin:clamp(20px,8vh,100px) auto 28px; max-width:450px; }
.welcome-mark { color:#a9b88c; font-size:32px; }
.welcome h2 { font:40px/1.2 Georgia,serif; font-weight:400; letter-spacing:-.045em; margin:20px 0 12px; }
.welcome p { font-size:13px; line-height:1.9; color:var(--muted); margin-bottom:25px; }
.suggestions { display:flex; flex-direction:column; gap:8px; margin:auto; max-width:345px; }
.suggestions button { background:var(--paper); border:1px solid var(--line); color:#425348; text-align:left; font-size:12px; border-radius:8px; padding:13px 15px; display:flex; justify-content:space-between; gap:12px; }
.suggestions button:hover { background:var(--wash); }
.messages { display:flex; flex-direction:column; gap:23px; }
.message { max-width:92%; align-self:flex-start; }
.message.user { align-self:flex-end; max-width:86%; }
.message-label { font-size:10px; font-weight:600; letter-spacing:.025em; margin-bottom:9px; color:var(--muted); }
.message.user .message-label { text-align:right; }
.message-text { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.8; font-size:14px; padding:3px 0; }
.message.user .message-text { background:var(--wash); border-radius:14px 14px 3px 14px; padding:13px 18px; color:#344739; }
.message details { color:var(--muted); font-size:10px; margin-top:10px; }
.message summary { cursor:pointer; width:fit-content; }
.message pre { font:10px/1.6 ui-monospace,monospace; white-space:pre-wrap; overflow-wrap:anywhere; max-height:260px; overflow:auto; padding:14px; background:var(--paper); border-radius:7px; }
.thinking { font-size:10px; color:var(--muted); margin-top:22px; }
.thinking[hidden] { display:none; }
.dots { font-size:25px; display:block; line-height:1.2; letter-spacing:.12em; animation:pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity:.3; } }
.composer-area { padding:12px 24px 18px; background:var(--white); }
.composer { display:flex; align-items:flex-end; gap:12px; padding:12px 12px 12px 17px; border:1px solid #d5dacd; border-radius:12px; background:var(--paper); }
.composer:focus-within { border-color:#93a486; }
.composer textarea { resize:none; width:100%; min-height:44px; max-height:180px; line-height:1.65; font-size:13px; border:0; outline:0; background:transparent; color:var(--ink); }
.composer textarea::placeholder { color:#92998a; }
.composer textarea:focus-visible { outline:0; }
.composer button { border:0; width:35px; height:35px; flex-shrink:0; border-radius:9px; background:var(--green); color:white; font-size:22px; }
.composer-notes { display:flex; justify-content:space-between; gap:10px; color:#929788; font-size:9px; line-height:1.6; margin-top:9px; }
.error { color:#a03c30; font-size:12px; line-height:1.6; margin:10px 0; }
.error:empty { display:none; }
.loading { margin:25vh auto; text-align:center; font-size:14px; color:var(--muted); }
body[data-auth="loading"] #login-view,body[data-auth="loading"] #chat-view { display:none; }
body[data-auth="out"] #chat-view,body[data-auth="out"] #loading { display:none; }
body[data-auth="in"] #login-view,body[data-auth="in"] #loading { display:none; }
dialog { background:var(--white); color:var(--ink); border:1px solid var(--line); border-radius:16px; padding:35px; width:min(580px,calc(100% - 30px)); max-height:85dvh; }
dialog::backdrop { background:#1e302e66; backdrop-filter:blur(3px); }
dialog h2 { font:30px/1.25 Georgia,serif; letter-spacing:-.03em; margin:18px 0; }
dialog h3 { font-size:14px; margin-top:23px; }
dialog p { font-size:13px; line-height:1.85; }
.small-copy { font-size:11px; color:var(--muted); }
.dialog-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.dialog-actions .outline-button { width:auto; margin-top:0; }
body:not([data-auth="in"]) .dialog-actions { display:none; }
.dialog-close { position:absolute; top:10px; right:16px; font-size:27px; color:var(--muted); border:0; background:transparent; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:800px) { .topbar { height:67px; padding:0 20px; } .chat-layout { display:block; height:calc(100dvh - 67px); padding:12px; } .persona-card { display:none; } .conversation { height:100%; border-radius:12px; } #mobile-new { display:block; } .scroll-region { padding:23px 20px; } .conversation-header { padding:16px 20px 9px; } .conversation-disclosure { padding:0 20px 12px; font-size:9px; } .composer-area { padding:10px 13px 15px; } .composer-notes span:first-child { display:none; } .composer-notes { justify-content:flex-end; } .welcome { margin-top:clamp(18px,8vh,90px); } .welcome h2 { font-size:35px; } .login-view { margin-top:48px; } .login-view h1 { font-size:48px; } }
@media(prefers-reduced-motion:reduce) { .scroll-region { scroll-behavior:auto; } .dots { animation:none; } }