/* Nyx — one paper, two sides. Day: grey-white paper, ink. Night: black paper, rust. */
:root{
  --paper:#ECE8E1; --ink:#221E1C; --soft:#6B625C; --faint:#A39A92;
  --hair:rgba(34,30,28,.16); --river:rgba(34,30,28,.5);
  --me:#F7F2E8; --me-ink:#3A2A22; --drop:#221E1C; --accent:#91723e;
  --serif:"Source Serif 4", Georgia, "Songti SC", "STSong", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --mono:ui-monospace, "SF Mono", Menlo, monospace;
  --pad:18px;
}
:root[data-side="moon"]{
  --paper:#0C0A09; --ink:#E8C9B8; --soft:#BC9684; --faint:#7E6052;
  --hair:rgba(235,198,178,.14); --river:#7A3420;
  --me:#2A201C; --me-ink:#EBC6B2; --drop:#ae8b4b; --accent:#e6c480;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; background:var(--paper); color:var(--ink); font-family:var(--serif); transition:background-color .8s, color .8s; }
body{ overflow:hidden; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
[hidden]{ display:none !important; }

/* paper grain lives on its own layer so it never scrolls */
#drops{ position:fixed; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; color:var(--drop); }
#paper{ position:fixed; inset:0; z-index:0; pointer-events:none; background-image:var(--grain); background-size:180px; opacity:1; }

/* ── gate ── */
#gate{ position:fixed; inset:0; z-index:2; display:grid; place-items:center; padding:var(--pad); }
.gate-in{ width:min(340px, 100%); text-align:center; }
.mark{ width:64px; height:64px; margin:0 auto 20px; background:url(icons/wolf/home.svg) center/contain no-repeat; animation:breathe 3.4s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{ transform:scale(1) rotate(0); } 50%{ transform:scale(1.07) rotate(8deg); } }
#gate h1{ margin:0 0 6px; font-weight:400; font-size:28px; letter-spacing:.06em; }
#gate p{ margin:0 0 20px; color:var(--soft); font-style:italic; font-size:15px; }
#gateForm{ display:flex; flex-direction:column; gap:12px; }
#gateKey{ font:inherit; font-size:16px; padding:12px 2px; background:none; border:0; border-bottom:1px solid var(--hair); color:var(--ink); outline:none; text-align:center; }
#gateKey:focus{ border-bottom-color:var(--ink); }
#gateForm button{ padding:12px; border-radius:999px; background:var(--ink); color:var(--paper); letter-spacing:.1em; }
#gate .err{ margin-top:12px; color:var(--accent); font-style:normal; font-size:14px; min-height:1em; }

/* ── room ── */
#room{ position:fixed; inset:0; z-index:1; display:flex; flex-direction:column; }
.top{ flex:none; display:flex; align-items:center; justify-content:space-between; padding:calc(env(safe-area-inset-top) + 12px) var(--pad) 10px; }
.who{ display:flex; flex-direction:column; gap:2px; }
.who b{ font-weight:400; font-size:19px; letter-spacing:.03em; }
#state{ font-size:12px; font-style:italic; color:var(--faint); display:flex; align-items:center; gap:6px; }
#state i{ width:5px; height:5px; border-radius:50%; background:currentColor; }
#state.on{ color:var(--soft); } #state.on i{ background:var(--accent); }
#state .spin{ display:inline-block; width:1.1em; text-align:center; font-style:normal; font-weight:400; color:#FF7A2E; text-shadow:0 0 6px rgba(255,122,46,.45); margin-right:3px; }
.flip{ width:40px; height:40px; border-radius:50%; border:1px solid var(--hair); display:grid; place-items:center; }
.flip span{ width:14px; height:14px; border-radius:50%; background:var(--ink); transition:box-shadow .6s, background .6s; }
:root[data-side="moon"] .flip span{ background:transparent; box-shadow:inset -5px -1px 0 0 var(--ink); }

/* the log: a thread down the left (the river), my lines are ink on paper, theirs are cream slips */
#log{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; padding:10px var(--pad) 18px; position:relative;
  background-image:linear-gradient(var(--river), var(--river)), var(--marks); background-repeat:repeat-y, repeat-y;
  background-size:1px 100%, 44px 640px; background-position:calc(var(--pad) + 10px) 0, calc(var(--pad) - 12px) 0; background-attachment:local, local;
  -webkit-mask-image:linear-gradient(transparent, #000 18px); mask-image:linear-gradient(transparent, #000 18px); }
#log::-webkit-scrollbar{ display:none; }
.day{ text-align:center; margin:18px 0 6px; font-style:italic; font-size:12.5px; color:var(--faint); }
.msg{ position:relative; display:flex; margin-top:14px; }
.msg.cont{ margin-top:5px; }
.msg .body{ max-width:min(76%, 520px); font-size:15.5px; line-height:1.66; overflow-wrap:anywhere; }
@media (max-width:700px){ .msg{ margin-top:18px; } .msg .body{ max-width:min(63vw, 520px); font-size:13.5px; line-height:1.56; } .msg.ai .body{ line-height:1.7; } }   /* a little smaller on a phone */
.msg .who{ display:block; font-size:11.5px; letter-spacing:.12em; color:var(--soft); margin-bottom:2px; }   /* who said it, in the group chat */
.msg .t{ font-family:var(--mono); font-size:9.5px; color:var(--faint); margin-left:8px; white-space:nowrap; }

.msg.ai{ padding-left:32px; }
.msg.ai::before{ content:""; position:absolute; left:4px; top:5px; width:13px; height:13px; border-radius:50%; background:var(--paper); box-shadow:inset 0 0 0 1.5px var(--ink); }
.msg.ai.cont::before{ display:none; }
.msg.ai .body{ border-left:1px solid var(--hair); padding:1px 0 1px 12px; border-radius:6px; background:color-mix(in srgb, var(--paper) 90%, transparent); box-shadow:0 0 14px 10px color-mix(in srgb, var(--paper) 90%, transparent); }   /* no frame, but a feathered patch of paper under the words so drops and marks step back */

.msg.me{ justify-content:flex-end; }
.msg.me .body{ background:var(--me) var(--grain); background-size:180px; color:var(--me-ink); padding:9px 14px 10px; border-radius:10px; box-shadow:0 1px 4px rgba(60,40,30,.06); }
.msg.me .t{ display:block; text-align:right; margin:2px 0 0; }
.msg.me.pending .body{ opacity:.6; }
.msg.me.failed .body{ opacity:.7; cursor:pointer; }
.msg.me.failed .t{ color:var(--ink); text-decoration:underline; }
.msg .body{ position:relative; }
.msg .reactions{ position:absolute; right:-6px; bottom:-13px; padding:1px 6px; border:1px solid var(--hair); border-radius:12px; background:var(--paper); font-size:15px; line-height:1.3; font-style:normal; }
.msg:has(.reactions){ margin-bottom:18px; }

.msg .q{ display:block; margin-bottom:6px; padding:3px 9px; border-left:2px solid var(--hair); font-size:.86em; opacity:.8; border-radius:3px; background:rgba(127,110,100,.08); }

/* thinking: a quiet italic fold */
.msg.think .body{ font-style:italic; color:var(--soft); font-size:14px; }
.msg.think summary{ list-style:none; cursor:pointer; color:var(--faint); font-size:12.5px; }
.msg.think summary::-webkit-details-marker{ display:none; }
.msg.act .body{ font-family:var(--mono); font-size:11.5px; color:var(--faint); border-left:0; }

/* writing indicator: three ink dots */
#typing{ display:flex; gap:4px; padding:12px 0 0 32px; }
#typing i{ width:4px; height:4px; border-radius:50%; background:var(--soft); animation:ink 1.2s infinite ease-in-out; }
#typing i:nth-child(2){ animation-delay:.15s; } #typing i:nth-child(3){ animation-delay:.3s; }
@keyframes ink{ 0%,80%,100%{ opacity:.2; transform:translateY(0); } 40%{ opacity:1; transform:translateY(-2px); } }

/* ── writing line ── */
.write{ flex:none; position:relative; background:var(--paper) var(--grain); background-size:180px; padding:10px var(--pad) calc(env(safe-area-inset-bottom) + 12px); }
.write::before{ content:""; position:absolute; left:var(--pad); right:var(--pad); top:0; height:1px; background:var(--hair); }
.line{ display:flex; align-items:flex-end; gap:12px; }
#text{ flex:1; resize:none; border:0; outline:none; background:none; color:var(--ink); font:inherit; font-size:16px; line-height:1.5; padding:8px 0; max-height:40vh; caret-color:var(--drop); }
#text::placeholder{ color:var(--faint); font-style:italic; }
.drop{ flex:none; width:34px; height:34px; margin-bottom:4px; border-radius:0 50% 50% 50%; transform:rotate(45deg); background:var(--drop); display:grid; place-items:center; transition:transform .2s, box-shadow .3s; }
.drop svg{ width:16px; height:16px; transform:rotate(-45deg); fill:none; stroke:var(--paper); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.drop:active{ transform:rotate(45deg) scale(.9); box-shadow:0 0 0 8px color-mix(in srgb, var(--drop) 14%, transparent); }
.drop:disabled{ opacity:.4; }
.quote{ display:flex; align-items:center; gap:8px; margin-bottom:8px; padding:6px 8px 6px 10px; border-left:2px solid var(--hair); background:rgba(127,110,100,.08); border-radius:4px; font-size:13px; color:var(--soft); }
.quote span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.quote button{ font-size:18px; color:var(--faint); padding:0 4px; }

/* attachments & stickers */
.att{ display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 4px; }
.att img{ display:block; max-width:min(220px, 58vw); max-height:260px; border-radius:8px; background:var(--hair); cursor:zoom-in; }
.att .file{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px; background:rgba(127,110,100,.1); font-size:13px; color:var(--soft); cursor:pointer; }
.stk{ display:inline-block; vertical-align:middle; max-width:64px; max-height:64px; }
.msg.only-stk .body{ background:none !important; box-shadow:none !important; padding:0 !important; border:0 !important; }
.msg.only-stk .stk{ max-width:120px; max-height:120px; display:block; }
.clip{ flex:none; width:30px; height:34px; margin-bottom:4px; display:grid; place-items:center; color:var(--faint); }
.clip svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.tray{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 8px; }
.tray .it{ position:relative; flex:none; width:56px; height:56px; border-radius:8px; background:var(--me) center/cover; box-shadow:inset 0 0 0 1px var(--hair); display:grid; place-items:center; font-size:10px; color:var(--soft); text-align:center; overflow:hidden; }
.tray .it.up::after{ content:""; position:absolute; inset:0; background:color-mix(in srgb, var(--paper) 55%, transparent); }
.tray .it button{ position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%; background:var(--ink); color:var(--paper); font-size:12px; line-height:18px; z-index:1; }
#zoom{ position:fixed; inset:0; z-index:9; background:rgba(10,8,7,.86); display:grid; place-items:center; }
#zoom img{ max-width:96vw; max-height:92vh; }

/* ── home poster ── */
:root{ --hi:rgba(255,255,255,.9); }
:root[data-side="moon"]{ --hi:rgba(235,198,178,.92); }
#home{ position:fixed; inset:0; z-index:1; display:flex; flex-direction:column; }
.hbar{ position:absolute; left:0; right:0; top:0; z-index:3; display:flex; align-items:center; justify-content:space-between; padding:calc(env(safe-area-inset-top) + 12px) var(--pad) 0; pointer-events:none; }
.hbar > *{ pointer-events:auto; }
.round{ width:42px; height:42px; border-radius:50%; border:1px solid var(--soft); display:grid; place-items:center; background:var(--paper); }
.round svg{ width:18px; height:18px; fill:none; stroke:var(--ink); stroke-width:1.5; stroke-linecap:round; }
.title{ margin:0; font-weight:500; font-size:clamp(17px, 5.4vw, 24px); letter-spacing:.08em; white-space:nowrap; }
.title i{ font-style:normal; color:var(--soft); }
.title b{ font-weight:inherit; }
.scroller{ flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
.scroller::-webkit-scrollbar{ display:none; }
#poster{ position:relative; width:100%; max-width:520px; margin:0 auto; }
#poster svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
#poster .blocks{ position:absolute; inset:0; }
.blk{ position:absolute; display:block; border-radius:0; transition:left .9s cubic-bezier(.5,.1,.2,1), top .9s cubic-bezier(.5,.1,.2,1), width .9s, height .9s; }
.blk:active{ filter:brightness(1.12); }
.lab{ position:absolute; font-size:3.3vw; color:var(--soft); letter-spacing:.04em; white-space:nowrap; pointer-events:none; transition:left .9s cubic-bezier(.5,.1,.2,1), top .9s cubic-bezier(.5,.1,.2,1); }
.lab small{ font-size:inherit; margin-left:5px; letter-spacing:.12em; opacity:.85; }
.spell{ position:absolute; left:4%; right:4%; display:flex; flex-wrap:nowrap; justify-content:center; align-items:flex-end; font-size:3.9vw; font-style:italic; }
.spell .tk{ display:flex; flex-direction:column; padding:0 .35vw; opacity:0; transform:translateY(3px); transition:opacity .35s, transform .35s; }
.spell .tk + .tk{ border-left:1px dotted var(--soft); }
.spell .tk.on{ opacity:1; transform:none; }
.spell .bs{ display:flex; align-items:flex-end; gap:.5vw; height:7vw; margin-bottom:1.2vw; padding-left:.3vw; }
.spell .bs i{ flex:none; width:.8vw; height:0; background:var(--ink); border-radius:1px; transition:height .5s cubic-bezier(.3,.7,.2,1); }
.spell .tk.on .bs i{ height:var(--h); }
.spell .bs i.lo{ opacity:.28; }
.spell .tx{ white-space:pre; text-align:center; line-height:1; }
.spell .cur{ display:inline-block; width:.5em; height:1em; margin-left:2px; background:var(--ink); vertical-align:-.12em; animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* ── drawer ── */
#drawer{ position:fixed; inset:0; z-index:6; pointer-events:none; }
#drawer .sh{ position:absolute; inset:0; background:rgba(10,6,4,.4); opacity:0; transition:opacity .3s; }
#drawer .pn{ position:absolute; left:0; top:0; bottom:0; width:min(80vw, 330px); background:var(--paper) var(--grain); background-size:180px; transform:translateX(-102%); transition:transform .34s cubic-bezier(.3,.7,.2,1); overflow-y:auto; padding:calc(env(safe-area-inset-top) + 22px) 14px 24px; }
#drawer.open{ pointer-events:auto; } #drawer.open .sh{ opacity:1; } #drawer.open .pn{ transform:none; box-shadow:10px 0 30px rgba(0,0,0,.2); }
#drawer .hd{ display:flex; align-items:center; gap:10px; padding:0 8px 18px; font-size:22px; }
#drawer .hd i{ width:10px; height:10px; border-radius:50%; background:var(--accent); }
#drawerList .ctr{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:11px 10px; font-size:16px; border-radius:12px; }
#drawerList .ctr:active{ background:var(--hair); }
#drawerList .ctr svg{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
:root[data-side="moon"] #drawerList .ctr svg{ color:#91723e; }
#drawerList .gp{ padding:16px 10px 6px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--soft); }
:root[data-side="moon"] #drawerList .gp{ color:var(--soft); }
#drawerList small{ margin-left:8px; font-size:11px; color:var(--faint); letter-spacing:.06em; text-transform:none; font-weight:400; }
#drawerList .gp small{ opacity:.8; }

/* ── room header back ── */
.top{ gap:8px; }
.back{ width:30px; height:36px; display:grid; place-items:center; margin-left:-6px; }
.back svg{ width:20px; height:20px; fill:none; stroke:var(--soft); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.who{ flex:1; }

/* ── emoji & sticker panel ── */
.emo{ max-height:34vh; overflow-y:auto; margin-bottom:8px; padding:8px; border-radius:10px; background:var(--me) var(--grain); background-size:180px; box-shadow:0 4px 18px rgba(60,40,30,.12); }
.emo .stks{ display:grid; grid-template-columns:repeat(auto-fill, minmax(62px, 1fr)); gap:6px; padding-bottom:8px; margin-bottom:6px; border-bottom:1px solid var(--hair); }
.emo .stks img{ width:100%; max-width:none; max-height:none; aspect-ratio:1; object-fit:contain; }
.emo .emos{ display:grid; grid-template-columns:repeat(auto-fill, minmax(38px, 1fr)); }
.emo .emos button{ height:38px; font-size:22px; border-radius:8px; }
.emo button:active{ background:rgba(127,110,100,.14); }

/* ── splash ── */
#splash{ position:fixed; inset:0; z-index:20; display:flex; flex-direction:column; justify-content:center; gap:2.4vh; padding-left:13vw; transition:background-color .9s, opacity .5s; font-family:var(--serif); }
#splash.out{ opacity:0; pointer-events:none; }
#splash .row{ display:flex; align-items:baseline; gap:4.5vw; height:9vh; }
#splash .L{ width:15vw; font-size:min(11vh, 17vw); line-height:1; opacity:0; transform:translateY(-30px); transition:opacity .45s, transform .55s cubic-bezier(.2,.8,.2,1), color .9s; }
#splash .L.in{ opacity:1; transform:none; }
#splash .wd{ position:relative; perspective:500px; height:7vh; flex:1; }
#splash .w{ position:absolute; left:0; top:0; display:flex; flex-direction:column; gap:.6vh; clip-path:inset(0 100% 0 0); transition:clip-path .7s cubic-bezier(.3,.6,.2,1), transform .6s, opacity .6s; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
#splash .w.in{ clip-path:inset(0 0 0 0); }
#splash .w.gone{ transform:rotateX(90deg); opacity:0; }
#splash .w.wait{ transform:rotateX(-90deg); opacity:0; clip-path:inset(0 0 0 0); }
#splash .w b{ font-weight:400; font-size:min(3.4vh, 6.4vw); font-style:italic; }
#splash .w i{ font-style:normal; font-size:min(2.2vh, 4vw); letter-spacing:.5em; }

/* Clawd on the poster */
#poster .clawd{ position:absolute; z-index:4; width:11%; padding:0; border:0; background:none; cursor:pointer; transition:left .9s cubic-bezier(.5,.1,.2,1), top .9s cubic-bezier(.5,.1,.2,1); }
#poster .clawd svg{ position:static; display:block; width:100%; height:auto; pointer-events:auto; animation:bob 2.4s ease-in-out infinite; transform-origin:50% 100%; }
@keyframes bob{ 0%,100%{ transform:translateY(0) scaleY(1); } 50%{ transform:translateY(-2px) scaleY(1.03); } }
#poster .bub{ position:absolute; z-index:5; width:62%; max-width:320px; box-sizing:border-box; background:var(--paper); color:var(--ink); border:1px solid var(--ink); border-radius:14px 14px 14px 4px; padding:12px 12px 10px; font-size:14px; line-height:1.45; box-shadow:4px 4px 0 var(--ink); }
#poster .bub .hi{ font-size:19px; line-height:1.2; }
:root[data-side="moon"] #poster .bub .hi{ font-style:italic; }
#poster .bub .lines{ max-height:34vh; overflow-y:auto; }
#poster .bub .lines p{ margin:8px 0 0; }
#poster .bub .lines p.me{ text-align:right; color:var(--soft); font-style:italic; }
#poster .bub .lines p.wait{ color:var(--faint); animation:blink 1.1s steps(1) infinite; }
#poster .bub .go{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
#poster .bub button{ border:1px solid var(--ink); background:none; color:var(--ink); border-radius:99px; padding:4px 10px; font:inherit; font-size:12.5px; cursor:pointer; }
#poster .bub .say{ display:flex; gap:6px; margin:9px 0 0; border-top:1px dashed var(--faint); padding-top:9px; }
#poster .bub input{ flex:1; min-width:0; border:0; background:none; color:var(--ink); font:inherit; font-size:16px; outline:none; }
#poster .bub input:disabled{ color:var(--faint); }

/* ---------- the floating ball: model, usage limits, context ---------- */
.orb{ position:absolute; z-index:6; right:14px; bottom:96px; width:52px; height:52px; border-radius:50%; padding:0; border:0; cursor:pointer;
  background:radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.75), rgba(255,255,255,.18) 55%, rgba(255,255,255,.08));
  -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.45), 0 10px 28px rgba(34,30,28,.14);
  color:var(--ink); touch-action:none; -webkit-tap-highlight-color:transparent; transition:transform .15s; }
.orb:active{ transform:scale(.94); }
:root[data-side="moon"] .orb{ background:radial-gradient(120% 120% at 30% 20%, rgba(235,198,178,.22), rgba(20,15,13,.45) 60%, rgba(12,10,9,.6));
  box-shadow:inset 0 1px 0 rgba(235,198,178,.35), inset 0 0 0 1px rgba(235,198,178,.16), 0 10px 28px rgba(0,0,0,.45); }
.orb svg{ position:absolute; inset:6px; width:40px; height:40px; transform:rotate(-90deg); fill:none; }
.orb circle{ stroke-width:1.6; stroke-linecap:round; }
.orb .tk{ stroke:currentColor; opacity:.14; }
.orb .a1{ stroke:currentColor; transition:stroke-dasharray .6s; }
.orb .a2{ stroke:currentColor; opacity:.45; transition:stroke-dasharray .6s; }
.orb b{ position:absolute; inset:0; display:grid; place-items:center; font:italic 600 12px/1 var(--serif); letter-spacing:-.02em; }
.orb.hot{ color:var(--accent); }

.meter{ position:absolute; inset:0; z-index:7; display:flex; align-items:flex-end; justify-content:center; background:rgba(34,30,28,.08); }
:root[data-side="moon"] .meter{ background:rgba(0,0,0,.35); }
.meter .sheet{ width:min(100% - 24px, 440px); margin-bottom:calc(env(safe-area-inset-bottom) + 12px); padding:20px 22px 18px; border-radius:26px; box-sizing:border-box;
  background:linear-gradient(160deg, rgba(255,255,255,.78), rgba(255,255,255,.42)); color:var(--ink);
  -webkit-backdrop-filter:blur(26px) saturate(1.35); backdrop-filter:blur(26px) saturate(1.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.5), 0 24px 60px rgba(34,30,28,.18);
  animation:meterUp .32s cubic-bezier(.2,.8,.2,1); }
:root[data-side="moon"] .meter .sheet{ background:linear-gradient(160deg, rgba(42,32,28,.82), rgba(16,12,10,.7));
  box-shadow:inset 0 1px 0 rgba(235,198,178,.25), inset 0 0 0 1px rgba(235,198,178,.12), 0 24px 60px rgba(0,0,0,.55); }
@keyframes meterUp{ from{ transform:translateY(24px); opacity:0; } to{ transform:none; opacity:1; } }
.meter .mh{ display:flex; align-items:baseline; gap:10px; font:italic 400 22px/1.2 var(--serif); }
.meter .mh em{ font-size:13px; color:var(--soft); letter-spacing:.12em; text-transform:uppercase; font-style:normal; }
.meter .rings{ display:flex; gap:22px; margin:18px 0 6px; }
.meter .ring{ position:relative; width:76px; text-align:center; font-size:12px; color:var(--soft); }
.meter .ring svg{ display:block; width:76px; height:76px; transform:rotate(-90deg); fill:none; }
.meter .ring circle{ stroke-width:2; stroke-linecap:round; }
.meter .ring .tk{ stroke:var(--ink); opacity:.12; }
.meter .ring .v{ stroke:var(--ink); }
.meter .ring.hot .v{ stroke:var(--accent); }
.meter .ring b{ position:absolute; left:0; right:0; top:0; height:76px; display:grid; place-items:center; font:italic 600 18px/1 var(--serif); color:var(--ink); }
.meter .ring span{ display:block; margin-top:6px; letter-spacing:.08em; }
.meter .ring small{ display:block; font-size:11px; opacity:.8; margin-top:2px; }
.meter .ctx{ display:flex; align-items:center; gap:12px; margin:16px 0 4px; font-size:12px; color:var(--soft); letter-spacing:.08em; }
.meter .ctx i{ flex:1; height:2px; background:var(--hair); border-radius:2px; overflow:hidden; }
.meter .ctx i b{ display:block; height:100%; width:0; background:var(--ink); transition:width .6s; }
.meter .ctx em{ font-style:italic; color:var(--ink); min-width:3em; text-align:right; }
.meter .models{ margin-top:16px; font-size:12px; color:var(--soft); letter-spacing:.08em; }
.meter .models > div{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.meter .models button{ font:400 14px/1 var(--serif); color:var(--ink); background:transparent; border:0; padding:9px 14px; border-radius:99px; cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--hair); }
.meter .models button.on{ background:var(--ink); color:var(--paper); box-shadow:none; }
.meter .models p{ margin:10px 0 0; font-size:12px; font-style:italic; letter-spacing:0; min-height:1.2em; }

/* ---------- NyxTree home ---------- */
.tree{ position:relative; width:100%; height:100%; overflow:hidden; }
.tree canvas{ position:absolute; left:0; top:0; }
.tree.photo::before{ content:""; position:absolute; inset:0; background:var(--photo) center/cover no-repeat; filter:grayscale(1) brightness(.26) contrast(1.15); opacity:0; transition:opacity .6s; }
:root[data-side="moon"] .tree.photo::before{ opacity:1; }
.tree .tags{ position:absolute; inset:0; }
.tree .tag{ position:absolute; left:0; top:0; width:0; height:0; padding:0; border:0; background:none; color:var(--ink); cursor:pointer; }
.tree .tag i{ position:absolute; left:-11px; top:-11px; width:22px; height:22px; border-radius:50%;
  background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 .6px rgba(31,26,22,.55), inset 0 1px 0 rgba(255,255,255,.9); transition:box-shadow .3s, background .3s; }
.tree .tag i::after{ content:""; position:absolute; left:50%; top:50%; width:4.6px; height:4.6px; margin:-2.3px 0 0 -2.3px; border-radius:50%; background:#B8613A; }
:root[data-side="moon"] .tree .tag i{ background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 .6px rgba(217,207,194,.6), inset 0 1px 0 rgba(255,255,255,.18); }
.tree .tag.hit i{ background:rgba(255,255,255,.85); box-shadow:inset 0 0 0 .6px rgba(31,26,22,.4), 0 0 0 7px rgba(255,255,255,.28); }
.tree .tag span{ position:absolute; left:17px; top:-10px; white-space:nowrap; text-align:left; font:400 13px/1.15 var(--serif); opacity:.88; }
.tree .tag.l span{ left:auto; right:17px; text-align:right; }
.tree .tag small{ display:block; font-size:10.5px; letter-spacing:.08em; opacity:.7; margin-top:2px; }
#drawer .homes{ display:flex; align-items:center; gap:6px; margin:22px 8px 0; padding-top:16px; border-top:1px solid var(--hair); font-size:12px; color:var(--soft); letter-spacing:.12em; }
#drawer .homes span{ flex:1; }
#drawer .homes button{ font:italic 400 15px/1 var(--serif); padding:8px 14px; border-radius:99px; box-shadow:inset 0 0 0 1px var(--hair); }
#drawer .homes button.on{ background:var(--ink); color:var(--paper); box-shadow:none; }
:root[data-home="tree"] #drops{ display:none; }   /* the tree stands on bare paper */

/* the fan beside the ball: gauge, board, heart */
.fan{ position:absolute; z-index:6; display:flex; gap:8px; pointer-events:none; }
.fan button{ width:46px; height:46px; border-radius:50%; border:0; padding:0; position:relative; display:grid; place-items:center; color:var(--ink); cursor:pointer;
  background:radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.75), rgba(246,242,235,.55) 60%, rgba(236,232,225,.5)); box-shadow:0 6px 18px rgba(60,40,30,.12), inset 0 0 0 .6px var(--hair);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); opacity:0; transform:translateX(24px) scale(.6); transition:opacity .22s, transform .32s cubic-bezier(.3,1.4,.5,1); }
.fan button[hidden]{ display:none; }
:root[data-side="moon"] .fan button{ background:radial-gradient(120% 120% at 30% 20%, rgba(235,198,178,.22), rgba(20,15,13,.55) 60%, rgba(12,10,9,.7)); }
.fan button svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.fan button span{ position:absolute; top:100%; margin-top:4px; font:italic 11px/1 var(--serif); color:var(--soft); white-space:nowrap; }
.fan.open{ pointer-events:auto; }
.fan.open button{ opacity:1; transform:none; }
.fan.open button:nth-child(2){ transition-delay:.04s; } .fan.open button:nth-child(1){ transition-delay:.08s; }

/* the hold's sheets: board, heart, a folder — the same glass as the gauge */
.hold{ position:fixed; inset:0; z-index:40; display:flex; align-items:flex-end; justify-content:center; background:rgba(34,30,28,.12); }
.hold[hidden]{ display:none; }
:root[data-side="moon"] .hold{ background:rgba(0,0,0,.4); }
.hold .sheet{ width:min(100% - 24px, 460px); max-height:min(82vh, 760px); display:flex; flex-direction:column; margin-bottom:calc(env(safe-area-inset-bottom) + 12px); border-radius:26px; box-sizing:border-box;
  background:linear-gradient(160deg, rgba(252,249,244,.94), rgba(242,236,228,.9)); box-shadow:0 18px 50px rgba(40,25,18,.22), inset 0 1px 0 rgba(255,255,255,.9); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
:root[data-side="moon"] .hold .sheet{ background:linear-gradient(160deg, rgba(42,32,28,.96), rgba(16,12,10,.94)); box-shadow:0 18px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(235,198,178,.08); }
.hold .hh{ display:flex; align-items:baseline; justify-content:space-between; padding:18px 22px 10px; }
.hold .hh b{ font:italic 400 22px/1.2 var(--serif); }
.hold .hh small{ font-style:normal; font-size:12px; letter-spacing:.12em; color:var(--soft); margin-left:6px; }
.hold .hh .x, .hold .bk{ border:0; background:none; color:var(--soft); font:italic 15px var(--serif); padding:0; cursor:pointer; }
.hold .hb{ overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 18px 18px; }
.hold .tabs{ display:flex; gap:22px; border-bottom:1px solid var(--hair); margin:0 4px 12px; }
.hold .tabs button{ border:0; background:none; color:var(--soft); font:15px var(--serif); padding:0 0 9px; position:relative; letter-spacing:.04em; }
.hold .tabs button i{ font-style:normal; font-size:11px; margin-left:4px; opacity:.7; }
.hold .tabs button.on{ color:var(--ink); }
.hold .tabs button.on::after{ content:""; position:absolute; left:10%; right:10%; bottom:-1px; height:2px; background:var(--accent); }
.hold .tk{ padding:11px 4px 12px; border-bottom:1px solid var(--hair); cursor:pointer; }
.hold .top{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--faint); flex-wrap:wrap; }
.hold .id{ font-family:var(--mono); color:var(--soft); }
.hold .pri{ font-family:var(--mono); font-size:10.5px; border-radius:5px; padding:1px 5px; border:1px solid var(--hair); }
.hold .pri.p0{ background:var(--accent); color:#fff; border-color:var(--accent); }
.hold .acts{ margin-left:auto; display:flex; gap:8px; }
.hold .acts button, .hold .more.row button{ border:0; background:none; color:var(--soft); font:italic 12.5px var(--serif); padding:2px 0; cursor:pointer; }
.hold .tt{ font-size:16px; line-height:1.4; margin:5px 0 2px; }
.hold .who, .hold .files, .hold .tags{ font-size:12px; color:var(--soft); margin-top:3px; }
.hold .files{ font-family:var(--mono); font-size:11px; word-break:break-all; }
.hold .tags span{ border:1px solid var(--hair); border-radius:8px; padding:1px 7px; }
.hold .proof{ display:block; font-size:13px; margin-top:4px; color:var(--accent); }
.hold .more{ display:none; font-size:13.5px; line-height:1.55; color:var(--soft); white-space:pre-wrap; margin-top:6px; }
.hold .more.row{ gap:14px; }
.hold .tk.open .more{ display:block; } .hold .tk.open .more.row{ display:flex; }
.hold .more.log{ font-size:12px; color:var(--faint); }
.hold .none{ color:var(--faint); font-style:italic; text-align:center; padding:18px 0; margin:0; }
.hold .add{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.hold .add input, .hold .add textarea, .hold .add select{ font:15px var(--serif); color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--hair); padding:7px 2px; border-radius:0; outline:none; resize:none; }
.hold .add .row{ display:flex; gap:8px; align-items:center; }
.hold .add select{ flex:1; min-width:0; font-size:13px; }
.hold .add button{ border:0; border-radius:999px; padding:8px 16px; background:var(--ink); color:var(--paper); font:14px var(--serif); letter-spacing:.06em; }
.hold .grp{ font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin:14px 4px 6px; }
.hold .file{ display:flex; justify-content:space-between; gap:10px; width:100%; border:0; border-bottom:1px solid var(--hair); background:none; color:var(--ink); text-align:left; padding:11px 4px; font:14.5px var(--serif); cursor:pointer; }
.hold .file span{ flex:none; font-size:11px; color:var(--faint); font-family:var(--mono); }
.hold .view{ white-space:pre-wrap; word-break:break-word; font:12px/1.55 var(--mono); margin:0; padding:4px 4px 30px; }
.hold .view.md{ font:14.5px/1.75 var(--serif); }
/* a folder: a table of contents on paper, not a grid of icons. One ink river down the left with the numerals strung on it, like the home page */
.hold.fold .sheet{ background:var(--paper); -webkit-backdrop-filter:none; backdrop-filter:none; }
:root[data-side="moon"] .hold.fold .sheet{ background:#17120F; }
.hold.fold .hh{ justify-content:flex-start; gap:12px; padding:24px 26px 6px; }
.hold.fold .hh b{ flex:1; display:flex; align-items:baseline; font:600 28px/1.2 var(--serif); font-style:normal; letter-spacing:.1em; }
.hold.fold .hh b small{ font:italic 400 19px var(--serif); letter-spacing:0; margin-left:10px; }
.hold.fold .hh .cnt{ font:13px var(--serif); font-style:normal; color:var(--faint); letter-spacing:.2em; margin-left:auto; padding-left:12px; }
.hold.fold .hh .x{ display:none; }
.hold .toc{ position:relative; padding:8px 8px 6px; }
.hold .toc::before{ content:""; position:absolute; left:25px; top:24px; bottom:30px; width:2px; border-radius:2px; background:var(--river); -webkit-mask:linear-gradient(180deg, #000 0 70%, transparent); mask:linear-gradient(180deg, #000 0 70%, transparent); }
.hold .toc .it{ display:flex; align-items:flex-start; gap:18px; width:100%; border:0; background:none; color:var(--ink); text-align:left; padding:14px 0; cursor:pointer; font-family:var(--serif); }
.hold .toc .n{ position:relative; z-index:1; flex:none; width:36px; text-align:center; font:italic 18px/1.5 var(--serif); color:var(--soft); background:var(--paper); }
:root[data-side="moon"] .hold .toc .n{ background:#17120F; }
.hold .toc .it.cur .n{ color:var(--accent); }
.hold .toc .tx{ display:flex; flex-direction:column; min-width:0; }
.hold .toc b{ font-size:20px; font-weight:500; letter-spacing:.06em; }
.hold .toc b small{ font:italic 15px var(--serif); color:var(--soft); margin-left:8px; letter-spacing:0; }
.hold .toc em{ font-style:normal; font-size:13px; color:var(--soft); margin-top:3px; line-height:1.5; }
.hold .toc .ar{ margin-left:auto; align-self:center; font:italic 20px var(--serif); color:var(--faint); padding-right:6px; }

/* the window part of the gauge: the context line and what you can do with the window */
.meter .win{ margin-top:16px; padding-top:14px; border-top:1px solid var(--hair); }
.meter .win[hidden]{ display:none; }
.meter .win .ln{ display:flex; align-items:center; gap:12px; font-size:12px; color:var(--soft); letter-spacing:.08em; }
.meter .win input[type=range]{ flex:1; accent-color:var(--accent); }
.meter .win .ln em{ font-style:italic; color:var(--ink); min-width:3.2em; text-align:right; letter-spacing:0; }
.meter .win .hint{ margin:6px 0 0; font-size:12px; font-style:italic; color:var(--faint); line-height:1.45; min-height:1em; }
.meter .win .acts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.meter .win .acts button{ font:400 14px/1 var(--serif); color:var(--ink); background:transparent; border:0; padding:9px 14px; border-radius:99px; cursor:pointer; box-shadow:inset 0 0 0 1px var(--hair); }
.hold .file.win{ flex-direction:column; align-items:stretch; gap:3px; }
.hold .file.win .wt{ font-size:12.5px; color:var(--soft); font-family:var(--serif); }
.hold .file.win.cur{ cursor:default; }
.hold .file.win .wx{ font-family:var(--serif); font-size:14px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hold .memo{ padding:2px 4px 10px; font-size:14.5px; line-height:1.75; }
.hold .memo p{ margin:0 0 12px; }
.hold .memo b{ font-weight:500; }
.hold .memo a{ color:var(--accent); word-break:break-all; }
.hold .memo code{ font-family:var(--mono); font-size:12px; background:var(--hair); padding:1px 5px; border-radius:5px; }
.hold .memo .zh{ color:var(--soft); font-size:14px; border-top:1px solid var(--hair); padding-top:12px; }
/* on the water the words go white with a dark halo, so they read over any wave */
.tree .tag span{ color:#FBF7F2; opacity:1; text-shadow:0 0 2px rgba(0,0,0,.85), 0 0 6px rgba(0,0,0,.6), 0 0 14px rgba(0,0,0,.4); }
.tree .tag small{ opacity:.92; }
:root[data-home="tree"] .title{ color:#FBF7F2; text-shadow:0 0 2px rgba(0,0,0,.8), 0 0 8px rgba(0,0,0,.55), 0 0 16px rgba(0,0,0,.35); }

/* ---------- delivery mark, local delete, long-press menu ---------- */
.msg .t .mark{ display:inline-block; width:.95em; height:.95em; margin-left:4px; vertical-align:-.12em; color:var(--faint); }
.msg .t .mark svg{ width:100%; height:100%; display:block; fill:currentColor; }
.msg .t .mark.wait svg{ fill:none; stroke:currentColor; stroke-width:1.3; animation:markWait 1.4s ease-in-out infinite; }
@keyframes markWait{ 50%{ opacity:.35; transform:scale(.8); } }
:root[data-side="moon"] .msg .t .mark:not(.wait){ color:var(--accent); }
.msg.pending .att img{ filter:blur(3px); opacity:.7; transition:filter .3s, opacity .3s; }
#bubMenu{ position:fixed; z-index:20; display:flex; padding:4px; border-radius:16px; background:var(--me, #f6f2ec); border:1px solid var(--hair); box-shadow:0 6px 22px rgba(0,0,0,.18); }
#bubMenu button{ font:inherit; font-size:14px; padding:8px 13px; border:0; background:none; color:inherit; border-radius:10px; }
#bubMenu button:active{ background:rgba(127,110,100,.14); }
#selBar{ display:flex; align-items:center; gap:8px; padding:8px 14px; border-top:1px solid var(--hair); font-size:13px; }
#selBar .n{ flex:1; opacity:.7; }
#selBar button{ font:inherit; font-size:13px; padding:6px 12px; border-radius:99px; border:1px solid var(--hair); background:none; color:inherit; }
#selBar button:disabled{ opacity:.4; }
#bubMenu .danger, #selBar .danger{ color:#c0533f; }
.selecting .msg[data-id]{ cursor:pointer; }
.selecting .msg.sel .body{ outline:2px solid currentColor; outline-offset:2px; opacity:.85; }
.selecting #orb, .selecting #fan{ visibility:hidden; }
.toast{ position:fixed; left:50%; bottom:96px; transform:translateX(-50%); z-index:400; padding:8px 14px; border-radius:99px; background:rgba(30,26,24,.85); color:#fff; font-size:13px; }

/* ---------- own stickers and kaomoji in the emoji panel ---------- */
.emo .stks button{ aspect-ratio:1; border-radius:10px; overflow:hidden; display:grid; place-items:center; }
.emo .stks img{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.emo .stks .add{ box-shadow:inset 0 0 0 1px var(--hair); font-size:22px; color:var(--soft); }
.emo .kao{ display:flex; flex-wrap:wrap; gap:6px; padding-bottom:8px; margin-bottom:6px; border-bottom:1px solid var(--hair); }
.emo .kao button{ padding:5px 10px; border-radius:99px; box-shadow:inset 0 0 0 1px var(--hair); font-size:14px; white-space:nowrap; -webkit-user-select:none; user-select:none; }
.emo .kao .add{ color:var(--soft); font-size:13px; }

/* ---------- steadier header while thinking: the spinner's glyphs differ in height ---------- */
#state{ height:16px; line-height:16px; white-space:nowrap; overflow:hidden; }
#state .spin{ height:16px; line-height:16px; overflow:hidden; }

/* ---------- gauge scrolls when it outgrows the screen ---------- */
.meter .sheet{ max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 40px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }

/* ---------- keyboard up ---------- */
html.kb footer.write{ padding-bottom:8px !important; }
html.kb #orb, html.kb #fan{ visibility:hidden; }

/* ---------- time stamps: none under a lone sticker; your own sits at the end of the line ---------- */
.msg.only-stk:not(.pending):not(.failed) .t{ display:none; }
.msg.me .t{ display:inline; margin:0 0 0 8px; text-align:right; white-space:nowrap; }

/* ---------- a size smaller across the board ---------- */
.who b{ font-size:17px; }
#text{ font-size:15px; }
#drawer .hd{ font-size:19px; }
.meter .mh{ font-size:19px; }
.meter .ring b{ font-size:16px; }
.meter .models button{ font-size:13px; padding:8px 13px; }
.hold .hh b{ font-size:19px; }
.hold.fold .hh b{ font-size:23px; }
.hold .toc b{ font-size:17px; }
.hold .toc .ar{ font-size:17px; }
.hold .tt{ font-size:14.5px; }
#poster .bub .hi{ font-size:17px; }

/* ---------- board: one card per ticket ---------- */
.hold .tk{ border-bottom:0; margin:0 0 10px; padding:11px 14px 12px; border-radius:14px; background:color-mix(in srgb, var(--ink) 5%, transparent); box-shadow:inset 0 0 0 1px var(--hair); }
.hold .tk .top{ border:0; gap:6px; }
.hold .tk .tt{ margin:6px 0 2px; }
.hold .tk .acts{ gap:10px; }
:root[data-side="moon"] .hold .tk{ background:color-mix(in srgb, var(--ink) 7%, transparent); }

/* your own stickers are sent as uploaded pictures named sticker-…; same size and no bubble as the relay's */
.msg.stk-att .body{ background:none !important; box-shadow:none !important; border:0 !important; padding:0 !important; }
.msg.stk-att .att img{ max-width:120px; max-height:120px; border-radius:0; background:none; cursor:default; }

/* 005: hold to talk and editable tone */
.mic{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;font-size:25px;flex-shrink:0}.mic.recording{color:#bd645c;transform:scale(1.15)}
#voiceStatus{position:absolute;bottom:100px;left:10%;right:10%;z-index:15;padding:18px;border-radius:18px;background:var(--paper);color:var(--ink);box-shadow:0 6px 25px #0002;text-align:center;font-size:14px}
.voice-play{display:block;width:100%;min-width:150px;padding:12px;border:0;background:transparent;color:var(--ink);text-align:left;font:inherit}.voice-play.playing{color:var(--accent)}.voice-transcript{font-size:.88em;color:var(--soft);white-space:pre-wrap}.voice-emotion{font:inherit;font-size:11px;color:var(--faint);background:none;border:0;padding:7px 0;cursor:pointer}.emotion-picker{max-width:320px;border:1px solid var(--hair);border-radius:22px;padding:22px;background:var(--paper);color:var(--ink)}.emotion-picker::backdrop{background:#0005}.emotion-picker button{padding:10px;margin:4px;border:1px solid var(--hair);border-radius:12px;background:none;color:inherit}.emotion-picker input{max-width:180px;padding:10px;font:inherit}

.voice-intro{font-size:12px;color:var(--soft);margin:6px 12px;line-height:1.6}

.quota-cards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.quota-card{min-width:0;padding:10px;border:1px solid var(--hair);border-radius:18px}.quota-card h3{font-size:15px;font-weight:500;margin:0 0 10px}.quota-card .mh{font-size:14px}.quota-card .rings{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px}.quota-card .ring{width:100%}.quota-card .ring svg{margin:auto}.quota-card .ring small{line-height:1.6;font-size:11px}.quota-card .ctx{gap:5px;letter-spacing:0}.quota-card .none{font-size:12px;color:var(--soft)}

.local-settings{margin:18px 0;padding:12px;border-top:1px solid var(--hair);color:var(--ink);font-size:14px}.local-settings summary{cursor:pointer}.local-settings button{display:block;margin:12px 0;padding:10px 14px;border:1px solid var(--hair);border-radius:14px;background:transparent;color:inherit;font:inherit}.local-settings p{max-width:250px;font-size:12px;color:var(--soft);line-height:1.7}