/* Ai World UI design system (ui-2026-10-30). Panels only; never styles the 3D canvas.
   Palette comes from the world itself: twilight indigo sky, violet->teal glow (loader bar), lantern gold.
   Tokens: color / type 11-12-13-15-17 / space 4-8-12-16 / radius 8-12-16-pill / one soft glass card. */
:root{
 --u-bg0:#0f0d24;--u-bg1:#17143a;--u-glass:rgba(24,21,54,.80);--u-glass2:rgba(38,33,82,.62);--u-solid:#14122e;
 --u-ink:#f3f0ff;--u-mut:#aaa5cf;--u-dim:#7c77a6;--u-line:rgba(196,186,255,.14);--u-line2:rgba(196,186,255,.26);
 --u-violet:#a594ff;--u-teal:#62dccb;--u-sky:#8fd0ff;--u-gold:#ffd47e;--u-pink:#ff9dc6;--u-mint:#74e3a8;--u-coral:#ff8f8f;--u-amber:#ffb86b;--u-lav:#c8bcff;
 --u-r1:8px;--u-r2:12px;--u-r3:16px;--u-pill:999px;
 --u-f:"Inter","SF Pro Text",-apple-system,"Segoe UI",Roboto,"Noto Sans","DejaVu Sans",system-ui,sans-serif;
 --u-shadow:0 10px 30px rgba(5,3,20,.45),0 1px 0 rgba(255,255,255,.06) inset;
 --u-glow:0 0 0 1px rgba(165,148,255,.10),0 0 22px rgba(165,148,255,.12);
 --u-ease:cubic-bezier(.2,.7,.2,1);
 --bg:var(--u-glass);--fg:var(--u-ink);--mut:var(--u-mut);--acc:var(--u-violet);--line:var(--u-line)
}
/* ---------- icons ---------- */
.aiw-i{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;overflow:visible}
.aiw-i .f{fill:currentColor;stroke:none}
.aiw-t-gold{color:var(--u-gold)}.aiw-t-pink{color:var(--u-pink)}.aiw-t-mint{color:var(--u-mint)}.aiw-t-lav{color:var(--u-lav)}.aiw-t-coral{color:var(--u-coral)}.aiw-t-amber{color:var(--u-amber)}.aiw-t-sky{color:var(--u-sky)}
.aiw-t-gold,.aiw-t-pink,.aiw-t-sky{filter:drop-shadow(0 0 3px currentColor)}
/* ---------- base ---------- */
html,body{font-family:var(--u-font,var(--u-f))}
#app{font:13px/1.45 var(--u-f);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
#app button,#app select{font:500 12px/1 var(--u-f);background:rgba(255,255,255,.06);color:var(--u-ink);border:1px solid var(--u-line);border-radius:var(--u-pill);padding:6px 11px;transition:background .2s,border-color .2s}
#app button:hover,#app select:hover{border-color:var(--u-line2);background:rgba(255,255,255,.1)}
#app select{border-radius:var(--u-r1)}
#app select option{background:var(--u-solid)}
@media (min-width:1101px){#app{grid-template-columns:250px 1fr 360px}}
/* ---------- top bar ---------- */
#top{background:linear-gradient(180deg,#1b1840,#15132f)!important;border-bottom:1px solid var(--u-line)!important;gap:10px!important;padding:0 14px!important;box-shadow:0 6px 18px rgba(5,3,20,.35)}
@media (min-width:761px){#top{padding-right:210px!important;overflow:hidden;white-space:nowrap}}
#top>b{font-size:15px;font-weight:700;letter-spacing:.01em;display:inline-flex;align-items:center;gap:7px;color:var(--u-ink)}
#top>b .aiw-i{color:var(--u-sky);filter:drop-shadow(0 0 5px rgba(143,208,255,.7));width:18px;height:18px}
#top>span:not(.sp){color:var(--u-mut);font-size:12px;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--u-pill);background:rgba(255,255,255,.05);border:1px solid var(--u-line)}
#top>span:not(.sp) b{color:var(--u-ink);font-weight:600}
#top label{align-items:center;gap:6px;font-size:12px;color:var(--u-mut);cursor:pointer;user-select:none}
#top label input[type=checkbox]{-webkit-appearance:none;appearance:none;margin:0;width:26px;height:15px;border-radius:var(--u-pill);background:rgba(255,255,255,.12);border:1px solid var(--u-line);position:relative;cursor:pointer;transition:background .2s;flex:none}
#top label input[type=checkbox]::after{content:"";position:absolute;left:1px;top:1px;width:11px;height:11px;border-radius:50%;background:#d9d4f5;transition:transform .2s var(--u-ease)}
#top label input[type=checkbox]:checked{background:linear-gradient(90deg,var(--u-violet),var(--u-teal));border-color:transparent;box-shadow:0 0 8px rgba(98,220,203,.35)}
#top label input[type=checkbox]:checked::after{transform:translateX(11px);background:#fff}
#top a{color:var(--u-sky)!important;font-size:12px}
/* ---------- side columns ---------- */
#left,#right{background:linear-gradient(180deg,#17143a 0%,#120f2b 100%)!important;scrollbar-width:thin;scrollbar-color:rgba(196,186,255,.25) transparent}
#left{border-right:1px solid var(--u-line)!important;padding:12px 10px!important;overflow-anchor:none}
#right{border-left:1px solid var(--u-line)!important}
#left::-webkit-scrollbar,#right ::-webkit-scrollbar{width:6px}#left::-webkit-scrollbar-thumb,#right ::-webkit-scrollbar-thumb{background:rgba(196,186,255,.22);border-radius:3px}
#left>div:first-child{font:600 11px/1 var(--u-f)!important;letter-spacing:.14em;color:var(--u-dim)!important;margin:2px 4px 10px!important;text-transform:uppercase}
/* inhabitant cards: fixed geometry, in-place updates */
#ailist{contain:layout}
#ailist .ai{display:grid!important;grid-template-columns:30px minmax(0,1fr);column-gap:10px;align-items:start;padding:10px!important;margin:0 0 6px!important;border-radius:var(--u-r2)!important;background:rgba(255,255,255,.035);border:1px solid rgba(196,186,255,.08);transition:background .25s,border-color .25s,box-shadow .25s}
#ailist .ai:hover{background:rgba(165,148,255,.10)!important;border-color:var(--u-line2)}
#ailist .ai.sel{background:linear-gradient(135deg,rgba(165,148,255,.20),rgba(98,220,203,.10))!important;border-color:rgba(165,148,255,.45);box-shadow:var(--u-glow)}
#ailist .ai>.dot{width:30px;height:30px;border:2px solid rgba(255,255,255,.75)!important;box-shadow:0 0 0 3px rgba(255,255,255,.08),0 0 12px rgba(255,255,255,.18);margin-top:1px}
#ailist .ai>div:nth-child(2){min-width:0;min-height:62px;position:relative}
#ailist .ai .n{font-weight:650;font-size:13.5px;color:var(--u-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:19px;display:flex;align-items:center;gap:4px}
#ailist .ai .n>span{display:inline-flex;align-items:center}
#ailist .ai .s{color:var(--u-mut)!important;font-size:11.5px!important;height:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ailist .ai .s .aiw-i{width:13px;height:13px}
#ailist .ai>div:nth-child(2)>div[title]{width:auto!important;max-width:130px}
#ailist .ai>div:nth-child(2)>div[title] span:first-child{color:var(--u-dim)!important}
#ailist .ai>div:nth-child(2)>div[title] span:last-child{background:rgba(255,255,255,.10)!important;height:4px!important;border-radius:var(--u-pill)!important}
#ailist .ai>div:nth-child(2)>div[title] i{border-radius:var(--u-pill);transition:width .8s var(--u-ease)}
#ailist .badge{position:absolute;right:0;top:20px;font:600 9.5px/1 var(--u-f);letter-spacing:.04em;text-transform:uppercase;padding:4px 7px;border-radius:var(--u-pill);border:1px solid transparent}
.b-believer{background:rgba(255,212,126,.14)!important;color:var(--u-gold)!important;border-color:rgba(255,212,126,.3)!important}
.b-doubter{background:rgba(255,143,143,.12)!important;color:var(--u-coral)!important;border-color:rgba(255,143,143,.28)!important}
.b-unsure{background:rgba(143,208,255,.12)!important;color:var(--u-sky)!important;border-color:rgba(143,208,255,.28)!important}
#ailist .ai .prg{grid-column:1/-1;margin-top:8px!important;padding-top:7px;border-top:1px dashed rgba(196,186,255,.12);height:42px;overflow:hidden;font-size:10.5px!important;line-height:17px!important;color:var(--u-mut)!important;white-space:nowrap;text-overflow:ellipsis}
#ailist .ai .prg b{font-size:12.5px}
#ailist .ai .prg .bd{font-weight:600;letter-spacing:.02em}
.prg .hl:before{content:""!important;width:8px;height:8px;margin-right:4px!important;vertical-align:0;background:var(--u-gold);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.aiw-in{animation:aiwIn .45s var(--u-ease) both}
@keyframes aiwIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* ---------- right column ---------- */
#tabs{gap:4px;padding:8px!important;border-bottom:1px solid var(--u-line)!important}
#tabs button{border-radius:var(--u-r1)!important;padding:8px 6px!important;font:600 12px/1 var(--u-f)!important;color:var(--u-mut)!important;background:transparent!important;border:1px solid transparent!important;transition:background .2s,color .2s}
#tabs button.on{color:var(--u-ink)!important;background:rgba(165,148,255,.16)!important;border-color:rgba(165,148,255,.35)!important;box-shadow:none!important}
.pane{padding:10px 12px!important}
#filters{gap:6px!important;margin-bottom:10px!important}
#filters label{display:inline-flex;align-items:center;gap:5px;font-size:11px!important;padding:4px 9px!important;border-radius:var(--u-pill)!important;background:rgba(255,255,255,.05)!important;border:1px solid var(--u-line);color:var(--u-mut)}
#filters input{accent-color:var(--u-violet);margin:0}
#feed{overflow-anchor:none}
#feed .item{padding:9px 11px!important;margin:0 0 7px!important;background:rgba(255,255,255,.04)!important;border:1px solid rgba(196,186,255,.08);border-left:3px solid #6f6a99;border-radius:4px var(--u-r2) var(--u-r2) 4px!important;font-size:12.5px;line-height:1.5}
#feed .item .h{font-size:11px!important;color:var(--u-dim)!important;margin-bottom:3px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
#feed .item .h b{color:var(--u-ink)}
#feed .item .h .aiw-i-dot{width:10px;height:10px}
#feed .item .t{color:#e3dff8}
.t-thought{border-left-color:var(--u-lav)!important}.t-speech{border-left-color:#f3f0ff!important}.t-private{border-left-color:#d49bff!important}.t-prayer{border-left-color:var(--u-gold)!important}.t-maker{border-left-color:var(--u-amber)!important}.t-world{border-left-color:var(--u-mint)!important}
#p-det h4{font:600 11px/1 var(--u-f);letter-spacing:.12em;text-transform:uppercase;color:var(--u-dim);margin:14px 0 6px}
.kv div:nth-child(odd){color:var(--u-dim)!important}
#p-stats tr.r:hover,.ai:hover{background:rgba(165,148,255,.10)}
.sdet{background:rgba(255,255,255,.04)!important;border:1px solid var(--u-line);border-radius:var(--u-r2)!important}
/* ---------- floating controls: one glass pill ---------- */
#lblbtn,#camreset,#dirbtn,#whelp,#vEnter,#petb,#mtog button,#aiwshare button,#aiwshare a{font:600 12px/1 var(--u-f)!important;color:var(--u-ink)!important;background:var(--u-glass)!important;border:1px solid var(--u-line2)!important;border-radius:var(--u-pill)!important;box-shadow:var(--u-shadow),var(--u-glow)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:inline-flex!important;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:0 13px!important;transition:background .2s,border-color .2s,transform .2s var(--u-ease)!important}
#whelp{width:32px;padding:0!important}
#lblbtn:hover,#camreset:hover,#dirbtn:hover,#whelp:hover,#petb:hover,#aiwshare button:hover,#aiwshare a:hover{border-color:rgba(165,148,255,.6)!important;background:rgba(48,42,100,.85)!important}
#vEnter{background:linear-gradient(135deg,#ffd47e,#ffb86b)!important;color:#2a1a00!important;border-color:rgba(255,230,170,.8)!important;box-shadow:0 8px 24px rgba(255,184,107,.35),0 0 0 4px rgba(255,212,126,.15)!important;font-size:13px!important;min-height:38px;padding:0 18px!important}
#petb .aiw-i,#vEnter .aiw-i{color:inherit;filter:none}
#keyhint,#dircap{font-family:var(--u-f)!important;background:var(--u-glass)!important;border:1px solid var(--u-line)!important;color:var(--u-ink)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#dircap{transition:opacity .6s ease!important}
#petl{background:var(--u-glass)!important;border:1px solid var(--u-line2)!important;border-radius:var(--u-r3)!important;box-shadow:var(--u-shadow),var(--u-glow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font:12px/1.45 var(--u-f);color:var(--u-ink);height:46vh;max-height:none!important}
#petl .pt b{color:var(--u-gold)!important}
#tip{background:var(--u-glass)!important;border:1px solid var(--u-line2);border-radius:var(--u-r1)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:var(--u-f)}
/* ---------- Chronicle: same glass card, lantern-gold title, fixed size ---------- */
html #chron{font:13px/1.55 var(--u-f);color:var(--u-ink);background:linear-gradient(180deg,rgba(32,28,70,.88),rgba(20,18,46,.90));border:1px solid var(--u-line2);border-radius:var(--u-r3);box-shadow:var(--u-shadow),var(--u-glow);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);height:min(58vh,470px);max-height:none;transition:opacity .4s}
html #chron.min{height:auto}
html #chron .ch-h{padding:10px 10px 9px 14px;border-bottom:1px solid var(--u-line)}
html #chron .ch-t{font:700 11px/1 var(--u-f);letter-spacing:.18em;color:var(--u-gold);text-shadow:0 0 10px rgba(255,212,126,.45);display:flex;align-items:center;gap:7px;overflow:hidden}
html #chron .ch-t .aiw-i{width:13px;height:13px}
html #chron .ch-t small{font:italic 400 11px/1 var(--u-f);letter-spacing:0;color:var(--u-dim);text-transform:none}
html #chron button{width:28px;height:28px;border-radius:50%;color:var(--u-ink);border:1px solid var(--u-line);background:rgba(255,255,255,.06);font:600 12px/1 var(--u-f)}
html #chron button:hover{background:rgba(165,148,255,.18)}
html #chron button .aiw-i{width:13px;height:13px}
html #chron .ch-bar{height:2px;background:rgba(255,255,255,.06)}
html #chron .ch-bar i{background:linear-gradient(90deg,var(--u-violet),var(--u-teal));box-shadow:0 0 8px var(--u-teal);transition:width 1s linear}
html #chron.paused .ch-bar i{background:var(--u-dim);box-shadow:none}
html #chron .ch-b{flex:1;min-height:0;padding:10px 16px 12px;transition:opacity .45s ease}
html #chron .hl{font:650 15px/1.35 var(--u-f);color:#fff;margin:2px 0 8px;letter-spacing:-.005em}
html #chron h4{font:700 10px/1 var(--u-f);letter-spacing:.16em;color:var(--u-violet);margin:14px 0 6px}
html #chron h4:after{background:linear-gradient(90deg,rgba(165,148,255,.4),transparent)}
html #chron li{padding-left:16px;margin:5px 0;color:#e3dff8}
html #chron li:before{content:"";position:absolute;left:2px;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--u-teal);box-shadow:0 0 6px var(--u-teal)}
html #chron .arc{color:#e3dff8}html #chron .arc b{color:var(--u-gold);font-weight:650}
html #chron .ago,html #chron .ch-f{font-style:normal;color:var(--u-dim);font-size:11.5px}
html #chron .ch-f{border-top:1px solid var(--u-line);padding:7px 14px 9px}
@media (max-width:760px){html #chron{height:38vh}html #chron.min{height:auto}
 #right{background:linear-gradient(180deg,#1a1740,#120f2b)!important;border-top:1px solid var(--u-line2)!important}
 #mtog button{min-height:36px}
 #top{background:linear-gradient(180deg,rgba(27,24,64,.96),rgba(21,19,47,.96))!important}
 #ailist .ai .prg{height:42px}}
@media (prefers-reduced-motion:reduce){.aiw-in{animation:none}#ailist .ai>div:nth-child(2)>div[title] i{transition:none}}

@media (min-width:761px){#top label{display:inline-flex}}
/* right-hand HUD stack: one column on the 3D view's edge, evenly spaced, never over the feed */
@media (min-width:761px){
 #dirbtn,#lblbtn,#camreset,#whelp,#aiwNudgeBox{right:374px!important}
 #petp{left:calc(250px + 14px)!important;bottom:calc(14px + env(safe-area-inset-bottom))!important}
}
@media (min-width:761px) and (max-width:1100px){#dirbtn,#lblbtn,#camreset,#whelp,#aiwNudgeBox{right:314px!important}#petp{left:194px!important}}
#aiwNudgeBox{bottom:calc(222px + env(safe-area-inset-bottom))!important}
#aiwNudge{font:600 12px/1 var(--u-f)!important;color:var(--u-ink)!important;background:var(--u-glass)!important;border:1px solid rgba(200,188,255,.45)!important;border-radius:var(--u-pill)!important;min-height:32px;padding:0 13px!important;box-shadow:var(--u-shadow),var(--u-glow)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:inline-flex;align-items:center;gap:6px}
#aiwNudgeBox>div{font-family:var(--u-f)!important;background:var(--u-glass)!important;border:1px solid var(--u-line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#aiwtoast{background:var(--u-glass)!important;border-color:var(--u-line2)!important;border-radius:var(--u-r2)!important;font-family:var(--u-f)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
@media (max-width:760px){
 #top>span:not(.sp){background:none;border:0;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}
 #petp{bottom:calc(100px + env(safe-area-inset-bottom))!important}
}
@media (max-width:760px){#dircap{bottom:auto!important;top:calc(170px + env(safe-area-inset-top))!important;max-width:70vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}