:root{--cream:#F7F1E8;--sand:#EFE5D6;--paper:#FFFCF7;--line:#E3D7C5;--line2:#CDBFAA;--sage:#5C6B4F;--forest:#2F3A2A;--clay:#9A5B3C;--muted:#4A4A40;--muted2:#6B6B60}
*{box-sizing:border-box}
html{overflow-x:clip}
body{margin:0;background:var(--cream);color:var(--forest);font-family:'Jost',system-ui,sans-serif;font-size:16px;line-height:1.55}
a{color:var(--sage)}a:hover{color:var(--forest)}
button,input,select,textarea{font:inherit;color:var(--forest)}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--clay);outline-offset:2px}
.serif{font-family:'Cormorant Garamond',serif}
.hand{font-family:'Caveat',cursive;color:var(--clay)}
h1.title{margin:0;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(34px,5vw,44px);line-height:1.1}
h2.sub{margin:0;font-family:'Cormorant Garamond',serif;font-weight:600;font-size:26px;line-height:1.2}
.muted{color:var(--muted)}.small{font-size:14px}.tiny{font-size:13px;color:var(--muted2)}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
label.f{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500}
label.f input,label.f select,label.f textarea{padding:13px 14px;border:1.5px solid var(--line2);border-radius:12px;background:var(--paper);min-width:0;width:100%;font-weight:400}
label.f textarea{resize:vertical}
label.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted)}
label.check input{width:18px;height:18px;margin-top:3px;accent-color:var(--sage);flex:0 0 auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--sage);color:var(--cream);border:0;text-decoration:none;padding:15px 26px;border-radius:999px;font-weight:500;min-height:48px}
.btn:hover{background:var(--forest);color:var(--cream)}
.btn[disabled]{opacity:.6;cursor:wait}
.btn.ghost{background:transparent;color:var(--forest);border:1.5px solid var(--forest);padding:14px 24px}
.btn.ghost:hover{background:var(--sand)}
.btn.block{width:100%}
.linkbtn{background:none;border:0;padding:8px 0;color:var(--sage);text-decoration:underline;min-height:44px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:28px}
.msg{border-radius:14px;padding:12px 16px;font-size:14px}
.msg.err{background:#F6E2DA;color:#6B2E1C}
.msg.ok{background:#E4EBDD;color:#2F3A2A}
.msg:empty{display:none}
.tabs{display:flex;background:var(--sand);border-radius:999px;padding:4px}
.tabs button{flex:1 1 0;border:0;padding:12px;border-radius:999px;min-height:44px;background:transparent;color:var(--muted)}
.tabs button[aria-selected=true]{background:var(--paper);color:var(--forest);font-weight:500;box-shadow:0 2px 8px rgba(47,58,42,.08)}
.apphead{max-width:1100px;margin:0 auto;padding:18px 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.apphead img{height:48px;width:auto;display:block}
.apphead nav{display:flex;flex-wrap:wrap;gap:18px;align-items:center;font-size:15px}
.wrap{max-width:1100px;margin:0 auto;padding:8px 20px 80px}
.narrow{max-width:820px}
.pill{display:inline-block;border-radius:999px;padding:4px 12px;font-size:13px;background:var(--sand)}
.pill.clay{background:#F3E1D5;color:#6B3A22}
.rate{display:flex;gap:6px}
.rate button{width:44px;height:44px;border-radius:50%;font-weight:500;background:var(--paper);border:1.5px solid var(--line2)}
.rate button[aria-pressed=true]{background:var(--sage);color:var(--cream);border-color:var(--sage)}
.chip{display:inline-flex;gap:8px;align-items:center;border:1.5px solid var(--line);border-radius:999px;padding:8px 14px;font-size:15px}
.chip input{accent-color:var(--sage)}
.bar{height:8px;border-radius:999px;background:var(--sand);overflow:hidden;display:block}
.bar>span{display:block;height:100%;background:var(--sage)}
.meter{display:grid;grid-template-columns:minmax(0,1fr) 120px 22px;gap:10px;align-items:center;font-size:14px}
.split{display:flex;flex-wrap:wrap;min-height:100vh}
.split>.pic{flex:1 1 440px;min-width:0;padding:20px;display:flex}
.split>.pic>div{position:relative;flex:1 1 auto;min-height:360px;border-radius:32px;overflow:hidden}
.split>.pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 40%}
.split>.pic .note{position:absolute;left:20px;right:20px;bottom:20px;background:rgba(247,241,232,.94);border-radius:22px;padding:20px 24px}
.split>.form{flex:1 1 440px;min-width:0;padding:36px 20px;display:flex;justify-content:center;align-items:center}
.split>.form>div{width:100%;max-width:420px;display:flex;flex-direction:column;gap:24px}
dl.kv{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr);gap:6px 16px;margin:0;font-size:15px}
dl.kv dt{color:var(--muted2)}dl.kv dd{margin:0;white-space:pre-wrap}
details.client{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:16px 20px}
details.client summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
details.client summary::-webkit-details-marker{display:none}
.hidden{display:none!important}
.spinner{padding:60px 0;text-align:center;color:var(--muted)}
@media (max-width:700px){.split>.pic>div{min-height:220px}.split>.pic .note{display:none}.card{padding:22px}dl.kv{grid-template-columns:1fr}dl.kv dt{margin-top:8px}}
.topnav a{text-decoration:none;color:var(--muted);position:relative}
.topnav a[aria-current=page]{color:var(--forest);font-weight:500;text-decoration:underline;text-underline-offset:6px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--clay);margin-left:4px;vertical-align:top}
.tabbar{display:none}
@media (max-width:760px){
 .topnav a{display:none}
 .apphead img{height:40px}
 .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--paper);border-top:1px solid var(--line);padding:6px 4px calc(8px + env(safe-area-inset-bottom))}
 .tabbar a{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:50px;justify-content:center;color:var(--muted2);text-decoration:none;font-size:11px;position:relative}
 .tabbar a[aria-current=page]{color:var(--sage);font-weight:500}
 .tabbar .dot{position:absolute;top:4px;right:calc(50% - 16px)}
 body{padding-bottom:76px}
}
/* chat */
.chat{display:flex;flex-direction:column;height:calc(100vh - 120px);min-height:420px;background:var(--paper);border:1px solid var(--line);border-radius:24px;overflow:hidden}
.chat-top{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px}
.chat-list{flex:1 1 auto;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--cream)}
.bubble{max-width:min(78%,520px);padding:10px 14px;border-radius:18px;background:var(--paper);border:1px solid var(--line);align-self:flex-start;display:flex;flex-direction:column;gap:6px;position:relative}
.bubble.mine{align-self:flex-end;background:#E4EBDD;border-color:#D3DDC8}
.bubble .meta{font-size:12px;color:var(--muted2);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.bubble img,.bubble video{max-width:100%;max-height:420px;border-radius:12px;display:block}
.bubble audio{width:260px;max-width:100%}
.bubble .quote{border-left:3px solid var(--sage);padding:4px 10px;font-size:13px;color:var(--muted);background:rgba(92,107,79,.07);border-radius:6px}
.bubble .reacts{display:flex;gap:4px;flex-wrap:wrap}
.bubble .reacts span{background:var(--sand);border-radius:999px;padding:1px 8px;font-size:13px}
.bubble .acts{display:flex;gap:4px;flex-wrap:wrap}
.bubble .acts button{background:none;border:0;padding:4px 6px;font-size:13px;color:var(--muted2);min-height:32px;border-radius:8px}
.bubble .acts button:hover{background:var(--sand)}
.upd{border:1.5px solid var(--sage);background:var(--paper)}
.chat-compose{border-top:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:8px;background:var(--paper)}
.chat-compose .row{flex-wrap:nowrap}
.chat-compose textarea{flex:1 1 auto;min-width:0;resize:none;border:1.5px solid var(--line2);border-radius:18px;padding:11px 14px;max-height:140px;background:var(--cream)}
.iconbtn{flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line2);background:var(--paper);display:flex;align-items:center;justify-content:center;color:var(--forest)}
.iconbtn.primary{background:var(--sage);border-color:var(--sage);color:var(--cream)}
.iconbtn.rec{background:var(--clay);border-color:var(--clay);color:#fff}
.threads{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:24px;overflow:hidden}
.threads a{display:flex;gap:10px;align-items:center;padding:12px 14px;border-top:1px solid #EFE5D6;text-decoration:none;color:var(--forest)}
.threads a[aria-current=true]{background:var(--sand)}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--line);display:flex;align-items:center;justify-content:center;font-weight:500;flex:0 0 auto}
.badge{min-width:22px;height:22px;border-radius:999px;background:var(--clay);color:#FFFCF7;font-size:12px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.chatgrid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px}
@media (max-width:860px){.chatgrid{grid-template-columns:1fr}.chatgrid.inthread .threads{display:none}.chatgrid:not(.inthread) .chat{display:none}.chat{height:calc(100vh - 170px)}}
.meter>span:first-child{min-width:0;overflow-wrap:anywhere}
.bubble .meter{grid-template-columns:minmax(0,1fr) 80px 18px}
@media (max-width:760px){
 .chat{height:calc(100dvh - 160px);border-radius:18px}
 .chat-top{padding:10px 12px}
 #t-sub{display:none}
 #t-update{padding:8px 12px!important;min-height:36px!important;font-size:14px}
 .chat-list{padding:10px}
 .bubble{max-width:88%}
 .wrap{padding-left:12px;padding-right:12px}
}