*{box-sizing:border-box} :root{color-scheme:dark;--bg:#101018;--panel:#191923;--muted:#9b9baa;--line:#2b2b39;--accent:#c5a7ff}
body{margin:0;background:radial-gradient(ellipse at 50% 0%,#28213a 0%,var(--bg) 48%);color:#f6f3fb;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}
.app{max-width:680px;margin:auto;min-height:100vh;padding:env(safe-area-inset-top) 18px calc(88px + env(safe-area-inset-bottom));position:relative}
.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff12}
.brand{display:flex;gap:11px;align-items:center}.orb{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#e7d8ff,#8062b8);color:#21172e;font-weight:800;box-shadow:0 0 24px #b18aff55}
.brandname{font-size:13px;letter-spacing:.24em;font-weight:750}.status,.eyebrow,.date,.speaker{font-size:9px;letter-spacing:.16em;color:var(--muted)}.status i{display:inline-block;width:6px;height:6px;background:#9cddb8;border-radius:50%;margin-right:5px}
.iconbtn{background:#ffffff0b;border:1px solid var(--line);color:#eee;border-radius:12px;padding:10px 12px;font-size:16px}
.hero{display:flex;align-items:center;gap:20px;padding:30px 4px 24px}.avatar{width:88px;height:88px;flex:none;border-radius:50%;padding:2px;background:linear-gradient(140deg,#e7d8ff,#8062b8,#3e3556);box-shadow:0 0 38px #a77cf344}.avatar-letter{height:100%;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 25%,#63517a,#1b1926 70%);font-family:Georgia,serif;font-size:38px;color:#e7d8ff}
.hero-copy h1{font-family:Georgia,serif;font-weight:400;font-size:27px;margin:7px 0 5px}.hero-copy p{font-size:13px;color:var(--muted);margin:0}
.chat{padding:12px 0 18px;min-height:260px}.date{text-align:center;margin:4px 0 22px;color:#777687}.bubble{max-width:88%;padding:14px 16px;border-radius:17px;margin:12px 0;line-height:1.5;font-size:14px}.bubble p{margin:7px 0 0}.sarah{background:linear-gradient(145deg,#242333,#1c1b27);border:1px solid #ffffff12;border-top-left-radius:5px}.user{margin-left:auto;background:#44345f;border:1px solid #9e80cf44;border-top-right-radius:5px}.speaker{color:#cbb4f5}
.composer{position:fixed;bottom:74px;left:50%;transform:translateX(-50%);width:min(644px,calc(100% - 32px));display:flex;align-items:flex-end;gap:10px;background:#1a1924;border:1px solid #ffffff20;border-radius:19px;padding:9px;box-shadow:0 10px 40px #0008}
textarea{resize:none;max-height:110px;flex:1;background:transparent;border:0;outline:0;color:white;font:14px -apple-system,BlinkMacSystemFont,sans-serif;padding:9px}.send{border:0;border-radius:13px;width:39px;height:39px;background:#c5a7ff;color:#21172e;font-size:23px;font-weight:700}
.bottomnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(680px,100%);height:66px;padding-bottom:env(safe-area-inset-bottom);background:#11111bee;backdrop-filter:blur(18px);border-top:1px solid var(--line);display:flex;justify-content:space-around;z-index:3}.navitem{border:0;background:none;color:#858393;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:19px;min-width:70px}.navitem span{font-size:10px;letter-spacing:.04em}.navitem.active{color:#d6c2ff}
footer{text-align:center;font-size:8px;letter-spacing:.14em;color:#686777;padding:12px 0}.panel{position:fixed;z-index:4;inset:85px 12px 145px;background:#191923;border:1px solid var(--line);border-radius:20px;padding:20px;overflow:auto;box-shadow:0 15px 60px #000b}.panel h2,dialog h2{font-family:Georgia,serif;font-weight:400}.panel p,.muted{color:#b7b4c3;line-height:1.6;font-size:14px}.journal-entry{padding:12px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.5}.tiny{font-size:11px;color:#8f8d9b;line-height:1.5}.toggle{display:flex;gap:10px;align-items:center;font-size:13px;margin:18px 0}dialog{width:min(420px,calc(100% - 28px));background:#1b1a26;color:white;border:1px solid #494255;border-radius:20px;padding:20px}dialog::backdrop{background:#05050acc;backdrop-filter:blur(5px)}.dialoghead{display:flex;align-items:center;justify-content:space-between}.danger{width:100%;padding:12px;border:1px solid #754c59;background:#3a202b;color:#ffdce4;border-radius:12px;margin:8px 0}