:root{
  --bg:#f5efe6;--surface:#fffaf3;--ink:#2a2724;--muted:#7a7068;--line:#e6dccd;
  --sage:#5f8a76;--sage-ink:#ffffff;--clay:#c1704f;--dusk:#3d4b5c;
  --user:#3d4b5c;--user-ink:#f7f3ec;--bot:#fffaf3;--danger:#b4422f;
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#161a1c;--surface:#1f2427;--ink:#ece6dc;--muted:#9a9189;--line:#2c3236;
    --sage:#7fb09a;--sage-ink:#10201a;--clay:#e0956f;--dusk:#8aa0b8;
    --user:#34495e;--user-ink:#f2eee6;--bot:#232a2e;--danger:#e8806c}
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.5 var(--sans);-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0}
h2{font-size:1.5rem;margin-bottom:.25rem}
h3{font-size:1rem;margin:1rem 0 .5rem}
p{margin:.5rem 0}
a{color:var(--sage)}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}

#app{display:flex;flex-direction:column;height:100dvh;max-width:720px;margin:0 auto;background:var(--bg)}
.top{display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + .6rem) 1rem .6rem;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.5rem}
.brand h1{font-size:1.35rem}
.logo{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--sage),var(--dusk))}
.top-actions{display:flex;gap:.4rem}
.pill{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:.3rem .8rem;font-size:.85rem}
.pill[aria-pressed="true"]{background:var(--sage);color:var(--sage-ink);border-color:var(--sage)}
.pill-help{border-color:var(--clay);color:var(--clay)}

main{flex:1;min-height:0;position:relative}
.view{display:none;height:100%;overflow-y:auto;padding:1rem}
.view.active{display:block}
#view-talk.active{display:flex;flex-direction:column;padding:0}
.sub{color:var(--muted);margin-top:0}

.modebar{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem}
.chip{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.2rem .7rem;font-size:.85rem;color:var(--muted)}
.link{background:none;border:0;color:var(--muted);text-decoration:underline;font-size:.85rem;padding:.25rem}

.log{flex:1;overflow-y:auto;padding:.5rem 1rem 1rem;display:flex;flex-direction:column;gap:.6rem}
.msg{max-width:86%;padding:.65rem .9rem;border-radius:18px;word-wrap:break-word;overflow-wrap:anywhere}
.msg p{margin:0}.msg p+p{margin-top:.5rem}
.msg.bot{align-self:flex-start;background:var(--bot);border:1px solid var(--line);border-bottom-left-radius:6px}
.msg.user{align-self:flex-end;background:var(--user);color:var(--user-ink);border-bottom-right-radius:6px;white-space:pre-wrap}
.msg.err{align-self:center;background:transparent;border:1px dashed var(--danger);color:var(--danger);font-size:.9rem}
.msg.err button{margin-left:.5rem;border:1px solid currentColor;background:none;border-radius:999px;padding:.1rem .6rem}
.crisis{align-self:stretch;max-width:100%;background:var(--surface);border:1px solid var(--clay);border-radius:14px;padding:.8rem 1rem;font-size:.95rem}
.crisis button{margin-top:.4rem;border:0;background:var(--clay);color:#fff;border-radius:999px;padding:.35rem .9rem}
.dots{display:inline-flex;gap:4px;padding:.2rem 0}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:b 1.2s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes b{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.starters{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1rem .5rem}
.starters button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:.35rem .8rem;font-size:.9rem}

.composer{display:flex;gap:.5rem;align-items:flex-end;padding:.5rem 1rem}
.composer textarea{flex:1;resize:none;max-height:140px;border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:.6rem .9rem;outline:none}
.composer textarea:focus,input:focus{border-color:var(--sage)}
.send,.mic{border:0;border-radius:999px;padding:.6rem 1rem;background:var(--sage);color:var(--sage-ink);font-weight:600}
.mic{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.mic.on{background:var(--clay);color:#fff;border-color:var(--clay)}
.send:disabled{opacity:.5}
.fine{font-size:.78rem;color:var(--muted);text-align:center;margin:0 1rem .5rem}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.tile{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:.9rem}
.tile b{display:block;font-family:var(--serif);font-size:1.02rem}
.tile span{display:block;color:var(--muted);font-size:.85rem;margin-top:.2rem}
.tile small{display:inline-block;margin-top:.5rem;color:var(--sage);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}

.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:1rem;margin:.8rem 0}
.card h3:first-child{margin-top:0}
label{display:block;font-size:.9rem;color:var(--muted);margin:.7rem 0 .25rem}
label.row{display:flex;justify-content:space-between;align-items:center;color:var(--ink)}
input[type=text],input[type=password],textarea#moodNote{width:100%;border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:.55rem .75rem;outline:none}
textarea#moodNote{margin-top:.75rem;resize:vertical}
.scale{display:flex;gap:.35rem}
.scale button{flex:1;border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:.55rem .1rem;font-size:.8rem}
.scale button[aria-checked="true"]{background:var(--sage);color:var(--sage-ink);border-color:var(--sage);font-weight:600}
.tags{display:flex;flex-wrap:wrap;gap:.35rem}
.tags button{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:.25rem .7rem;font-size:.85rem}
.tags button[aria-pressed="true"]{background:var(--dusk);color:var(--bg);border-color:var(--dusk)}
.btn{display:block;width:100%;margin-top:.8rem;border:0;border-radius:14px;padding:.7rem 1rem;background:var(--sage);color:var(--sage-ink);font-weight:600}
.btn:disabled{opacity:.5}
.btn-quiet{background:var(--bg);color:var(--ink);border:1px solid var(--line)}
.btn-danger{background:transparent;color:var(--danger);border:1px solid var(--danger)}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;justify-content:space-between;gap:.6rem;padding:.55rem 0;border-top:1px solid var(--line);font-size:.92rem}
.list li:first-child{border-top:0}
.list .meta{color:var(--muted);font-size:.8rem}
.list button{border:0;background:none;color:var(--muted);text-decoration:underline;font-size:.8rem;align-self:flex-start}
.insights{margin:.6rem 0 0;padding-left:1.1rem;color:var(--muted);font-size:.9rem}
.chart svg{width:100%;height:auto;display:block}
.chart .grid-line{stroke:var(--line);stroke-width:1}
.chart .line{fill:none;stroke:var(--sage);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.chart .dot{fill:var(--sage)}
.chart text{fill:var(--muted);font-size:10px}
.chart .empty{color:var(--muted);font-size:.9rem}

.tabbar{display:flex;border-top:1px solid var(--line);background:var(--surface);padding-bottom:env(safe-area-inset-bottom)}
.tab{flex:1;border:0;background:none;padding:.75rem 0;font-size:.85rem;color:var(--muted)}
.tab.active{color:var(--sage);font-weight:700}

dialog{border:1px solid var(--line);border-radius:22px;background:var(--surface);color:var(--ink);padding:0;width:min(92vw,460px);max-height:90dvh}
dialog::backdrop{background:rgba(20,20,20,.5)}
.sheet{padding:1.25rem;overflow-y:auto;max-height:88dvh}
.plain{padding-left:1.1rem}.plain li{margin:.4rem 0}
.check{align-items:flex-start;gap:.6rem;margin-top:1rem;font-size:.9rem}
.check input{margin-top:.25rem}
.helplines{list-style:none;padding:0;margin:.5rem 0}
.helplines li{display:grid;grid-template-columns:1.2fr 1.4fr 1.2fr;gap:.4rem;padding:.45rem 0;border-top:1px solid var(--line);font-size:.9rem}
.helplines span{color:var(--muted)}
.guide{text-align:center}
.guide-step{font-family:var(--serif);font-size:1.3rem;margin:1.2rem 0}
.row-btns{display:flex;gap:.5rem}
.row-btns .btn{margin-top:.6rem}
.orb-wrap{display:flex;justify-content:center;padding:1rem 0}
.orb{width:140px;height:140px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--sage),var(--dusk));transform:scale(.55);transition:transform 4s ease-in-out}

.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 5rem);transform:translateX(-50%);background:var(--dusk);color:#fff;padding:.5rem 1rem;border-radius:999px;font-size:.88rem;max-width:88vw;z-index:50}
@media (prefers-reduced-motion:reduce){.orb{transition-duration:.01s!important}.dots i{animation:none}}

/* ---- v2 additions ---- */
.modeleft{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap}
.chip-select{appearance:none;-webkit-appearance:none;padding-right:1.4rem;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 12px) 50%,calc(100% - 7px) 50%;background-size:5px 5px;background-repeat:no-repeat;color:var(--ink)}
.chip-select.wide{display:block;width:100%;padding:.55rem 2rem .55rem .75rem;border-radius:12px;margin-top:.25rem}
.chip-shield{color:var(--sage);border-color:var(--sage)}
.chip-shield.off{color:var(--clay);border-color:var(--clay)}
.fine.left{text-align:left;margin:.6rem 0 0}
.suggest{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;padding:.3rem 1rem;font-size:.85rem;color:var(--muted)}
.suggest button{border:1px solid var(--sage);color:var(--sage);background:var(--surface);border-radius:999px;padding:.2rem .7rem;font-size:.82rem}
.suggest button.quiet{border-color:var(--line);color:var(--muted)}
.notice{align-self:stretch;max-width:100%;background:var(--surface);border:1px solid var(--dusk);border-radius:14px;padding:.8rem 1rem;font-size:.92rem}
.notice .row-btns{margin-top:.4rem}
.notice .row-btns .btn{margin-top:0;padding:.45rem .8rem;font-size:.85rem}
.msg.img{padding:.4rem;max-width:86%}
.msg.img img{display:block;width:100%;border-radius:14px}
.msg.img .row-btns{padding:.3rem .3rem 0}
.msg.img .row-btns .btn{margin-top:.2rem;padding:.4rem .6rem;font-size:.82rem}
.imgbtn{align-self:flex-start;margin:-.2rem 0 .2rem;border:1px solid var(--sage);background:var(--sage);color:var(--sage-ink);border-radius:999px;padding:.35rem .9rem;font-size:.88rem;font-weight:600}
.segs{display:flex;gap:.3rem;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.25rem;margin:.5rem 0 .8rem}
.seg{flex:1;border:0;background:none;border-radius:999px;padding:.45rem 0;font-size:.9rem;color:var(--muted)}
.seg.active{background:var(--sage);color:var(--sage-ink);font-weight:600}
.segpane{display:none}.segpane.active{display:block}
.mixer{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.snd{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:.8rem}
.snd b{display:block;font-family:var(--serif)}
.snd span{display:block;color:var(--muted);font-size:.8rem;margin-bottom:.4rem}
.snd input[type=range]{width:100%;accent-color:var(--sage)}
.snd.on{border-color:var(--sage)}
.btn.inline{display:inline-block;width:auto;margin:0;padding:.4rem .9rem}
.vault-add{display:grid;grid-template-columns:1fr auto;gap:.4rem;margin-top:.6rem}
.vault-add input{grid-column:1/-1}
.vault-add .btn{margin-top:0;padding:.5rem .9rem}
.pin{display:block;width:100%;text-align:center;letter-spacing:.4em;font-size:1.3rem;border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:.55rem;margin:.5rem 0;outline:none}
.progress{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin:.6rem 0 .2rem}
.progress div{height:100%;width:0;background:var(--sage);transition:width 1s linear}
.orb.breathing{animation:breathe 10s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.6)}50%{transform:scale(1)}}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.gallery button{border:0;padding:0;background:none;border-radius:12px;overflow:hidden;aspect-ratio:1}
.gallery img{width:100%;height:100%;object-fit:cover;display:block}
.gallery .empty{grid-column:1/-1;color:var(--muted);font-size:.9rem}
.viewer img{width:100%;border-radius:14px;display:block}
.viewer .row-btns .btn{font-size:.85rem;padding:.5rem .4rem}
.tabbar .tab{font-size:.8rem}
@media (prefers-reduced-motion:reduce){.orb.breathing{animation:none}}