:root { color-scheme: light; --ink:#171512; --paper:#f4f0e8; --white:#fffdfa; --camel:#b08b57; --briar:#592e34; --line:rgba(23,21,18,.16); --muted:#6c665d; font-family: Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:linear-gradient(125deg,#f7f3ec,#ece4d8 70%,#ddd0bf); }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid var(--briar); outline-offset:3px; }
.skip,.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.skip:focus { width:auto; height:auto; clip-path:none; z-index:10; background:white; padding:1rem; }
header { min-height:80px; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0 clamp(1rem,4vw,4rem); border-bottom:1px solid var(--line); background:rgba(255,253,250,.75); backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; gap:.8rem; color:inherit; text-decoration:none; }
.brand>span:last-child { display:grid; gap:.14rem; }
.brand strong { font-family:Georgia,serif; font-size:1.2rem; letter-spacing:.01em; }
.brand small,.scope { color:var(--muted); }
.monogram,.avatar { display:grid; place-items:center; color:var(--white); background:var(--ink); letter-spacing:.08em; }
.monogram { width:42px; height:42px; font-family:Georgia,serif; font-size:.85rem; }
.header-actions { display:flex; align-items:center; gap:1rem; }
.connection,.route { padding:.5rem .7rem; border:1px solid var(--line); background:rgba(255,255,255,.6); color:var(--muted); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.text-button { border:0; background:transparent; text-decoration:underline; }
main { min-height:calc(100vh - 80px); padding:clamp(1rem,3vw,2.5rem); }
.access-card { width:min(700px,100%); margin:clamp(2rem,8vh,7rem) auto; padding:clamp(2rem,6vw,5.5rem); background:rgba(255,253,250,.88); border:1px solid var(--line); box-shadow:0 28px 70px rgba(40,28,17,.12); }
.eyebrow { margin:0 0 .8rem; color:var(--briar); font-size:.7rem; font-weight:800; letter-spacing:.15em; }
.access-card h1,.chat-heading h1 { font-family:Georgia,serif; font-weight:400; letter-spacing:-.04em; }
.access-card h1 { margin:.6rem 0 1.2rem; font-size:clamp(2.6rem,7vw,5rem); line-height:.94; }
.access-card>p:not(.eyebrow) { max-width:55ch; color:var(--muted); line-height:1.65; }
.access-card form { margin-top:2rem; }
.access-card label { display:block; margin-bottom:.5rem; font-weight:700; }
.access-card form div { display:flex; }
.access-card input { flex:1; min-width:0; padding:1rem; border:1px solid var(--line); background:white; }
.access-card button,.composer button,#confirm-action { border:0; color:white; background:var(--ink); padding:0 1.3rem; font-weight:700; }
#access-error { min-height:1.4rem; color:#8b1f2d; }
.app-shell { width:min(1480px,100%); margin:auto; display:grid; grid-template-columns:320px minmax(0,1fr); min-height:calc(100vh - 130px); background:rgba(255,253,250,.86); border:1px solid var(--line); box-shadow:0 25px 70px rgba(40,28,17,.1); }
aside { padding:2rem 1.3rem; border-right:1px solid var(--line); }
.personas { display:grid; gap:.5rem; }
.personas button { display:grid; grid-template-columns:32px 1fr; gap:.1rem .65rem; padding:1rem; border:1px solid transparent; color:var(--muted); background:transparent; text-align:left; }
.personas button span { grid-row:1/3; font-family:Georgia,serif; color:var(--camel); }
.personas button strong { color:var(--ink); }
.personas button small { line-height:1.35; }
.personas button[aria-checked="true"] { border-color:var(--ink); background:var(--white); }
.truth { margin-top:2rem; padding:1rem; border-top:1px solid var(--line); }
.truth p { color:var(--muted); font-size:.82rem; line-height:1.55; }
.chat { min-width:0; display:flex; flex-direction:column; padding:clamp(1.3rem,4vw,3rem); }
.chat-heading { display:flex; justify-content:space-between; gap:1rem; align-items:start; }
.chat-heading h1 { margin:.25rem 0 1.2rem; font-size:clamp(2rem,4vw,3.6rem); }
.suggestions { display:flex; gap:.5rem; overflow:auto; padding-bottom:1rem; }
.suggestions button { flex:0 0 auto; max-width:260px; padding:.7rem .9rem; border:1px solid var(--line); background:transparent; text-align:left; }
.messages { flex:1; min-height:320px; max-height:52vh; overflow:auto; padding:1rem 0; border-top:1px solid var(--line); }
.message { display:flex; gap:.8rem; max-width:780px; margin:0 0 1.2rem; }
.message.user { margin-left:auto; flex-direction:row-reverse; }
.avatar { width:36px; height:36px; flex:0 0 auto; font-size:.66rem; }
.message.user .avatar { background:var(--briar); }
.message>div { padding:.9rem 1rem; background:var(--white); border:1px solid var(--line); }
.message.user>div { background:#ebe2d6; }
.message p { margin:.3rem 0 0; line-height:1.6; white-space:pre-wrap; }
.message .meta { margin-top:.7rem; color:var(--muted); font-size:.72rem; }
.message .action { margin-top:.8rem; padding:.6rem .8rem; border:1px solid var(--briar); color:var(--briar); background:transparent; font-weight:700; }
.composer { display:flex; gap:.6rem; border-top:1px solid var(--line); padding-top:1rem; }
.composer textarea { flex:1; min-height:56px; resize:vertical; padding:1rem; border:1px solid var(--line); background:white; }
.composer button { min-width:86px; }
.scope { margin:.8rem 0 0; font-size:.72rem; }
dialog { width:min(560px,calc(100% - 2rem)); border:1px solid var(--line); padding:0; box-shadow:0 30px 90px rgba(0,0,0,.25); }
dialog::backdrop { background:rgba(23,21,18,.55); }
dialog form { padding:2rem; }
dialog h2 { font-family:Georgia,serif; font-size:2rem; font-weight:400; }
dialog .warning { padding:1rem; background:var(--paper); color:var(--muted); line-height:1.5; }
dialog form>div { display:flex; justify-content:flex-end; gap:.7rem; }
dialog button { min-height:44px; padding:.7rem 1rem; border:1px solid var(--line); background:white; }
dialog #confirm-action { padding:.7rem 1rem; }
@media (max-width:800px) { .app-shell { grid-template-columns:1fr; } aside { border-right:0; border-bottom:1px solid var(--line); } .personas { grid-template-columns:repeat(2,1fr); } .truth { display:none; } }
@media (max-width:520px) { header { min-height:68px; } .connection { display:none; } main { padding:.5rem; } .app-shell { min-height:calc(100vh - 78px); } .personas { grid-template-columns:1fr 1fr; } .personas button { padding:.7rem; } .personas button small { display:none; } .chat-heading { display:block; } .route { display:inline-block; margin-bottom:1rem; } }