:root{--out:#e9ecf2;--sf:#fff;--ink:#0f172a;--mute:#64748b;--acc:#2b4bff;--acc-ink:#fff;--hi:#ffb400;--hi-ink:#1a1300;--line:#e3e7ee;--danger:#d13b3b;--ok:#168a4a;
--soft:#edf0ff;--mb:#fff1cf;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--out:#07090d;--sf:#10131a;--ink:#e8ecf4;--mute:#8b97ad;--acc:#7d95ff;--acc-ink:#0a1030;--line:#232a38;--danger:#ff7b7b;--ok:#55d68b;--soft:#1a2038;--mb:#3a3320}}
:root[data-theme="dark"]{--out:#07090d;--sf:#10131a;--ink:#e8ecf4;--mute:#8b97ad;--acc:#7d95ff;--acc-ink:#0a1030;--line:#232a38;--danger:#ff7b7b;--ok:#55d68b;--soft:#1a2038;--mb:#3a3320}
html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%}
*{box-sizing:border-box}
body{margin:0;height:100%;background:var(--out);color:var(--ink);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif}
button,input{font:inherit;color:inherit}button{cursor:pointer}
.hidden{display:none!important}.sp{flex:1}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.btn{border:0;background:var(--acc);color:var(--acc-ink);font-weight:700;padding:9px 16px;border-radius:10px}
.btn.g{background:var(--soft);color:var(--ink)}.btn.r{background:var(--danger);color:#fff}.btn.o{background:none;border:1.5px solid var(--line);color:var(--ink)}.btn.sm{padding:6px 12px;font-size:14px}
input[type=text],input[type=password]{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;background:var(--sf);outline-offset:2px}
label.f{display:block;font-weight:700;font-size:14px;margin:14px 0 5px}
.av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;background-size:cover;background-position:center;flex:none;position:relative}
button.av{border:0;padding:0}.av.big{width:80px;height:80px;font-size:30px}
.av.pr::after{content:"";position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border-radius:50%;background:#27c46b;border:2.5px solid var(--sf)}
.err{color:var(--danger);font-size:14px;min-height:21px;margin-top:8px}.err.ok{color:var(--ok)}
.bd{background:var(--ink);color:var(--sf);border-radius:999px;font-size:11px;font-weight:800;padding:0 7px;margin-left:6px;flex:none}.bd.me{background:var(--hi);color:var(--hi-ink)}
.ib svg,.tools svg,.emo svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
/* auth */
#auth{min-height:100%;display:grid;place-items:center;padding:20px}
#auth .card{width:100%;max-width:400px;background:var(--sf);border-radius:16px;padding:30px;box-shadow:0 12px 40px rgba(15,23,42,.14)}
#auth h1{margin:0;font-size:32px;letter-spacing:-.03em;color:var(--acc)}#auth p{color:var(--mute);margin:4px 0 16px}
.seg{display:flex;border-bottom:1.5px solid var(--line)}.seg button{flex:1;border:0;background:none;padding:9px;color:var(--mute);font-weight:700;border-bottom:3px solid transparent;margin-bottom:-1.5px}.seg button.on{color:var(--ink);border-color:var(--acc)}
.pickrow{display:flex;align-items:center;gap:14px}
.note{color:var(--mute);font-size:12px;text-align:center;margin-top:10px}
/* shell */
#app{height:100%}
#shell{position:relative;height:100%;max-width:1100px;margin:0 auto;display:flex;flex-direction:column;background:var(--sf);border-inline:1px solid var(--line);overflow:hidden}
#hd{display:flex;align-items:center;gap:10px;padding:8px 16px;border-bottom:1px solid var(--line)}
.brand{font-weight:800;font-size:22px;letter-spacing:-.04em;color:var(--acc)}
.ib{border:0;background:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;padding:0}.ib:hover{background:var(--soft)}
#view{flex:1;min-height:0;display:grid;grid-template-columns:300px 1fr}
#list{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.lh{display:flex;align-items:center;padding:8px 10px 4px 16px}.lh h2{margin:0;font-size:17px;flex:1}
.sr{padding:0 12px 8px}.sr input{padding:8px 12px;border-radius:8px;font-size:14px}
#items{flex:1;overflow-y:auto;padding:0 8px 12px}
.conv{display:flex;align-items:center;gap:12px;width:100%;padding:7px 10px;border:0;background:none;border-radius:8px;text-align:left}
.conv:hover{background:var(--soft)}.conv.on{background:var(--soft);box-shadow:inset 3px 0 var(--acc)}
.conv .av{width:40px;height:40px}.conv .mid{flex:1;min-width:0}
.conv b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conv.un b{font-weight:800}
.conv small{display:block;color:var(--mute);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#thread{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
#info{display:flex;align-items:center;gap:10px;padding:8px 16px;border-bottom:1px solid var(--line)}#info h2{margin:0;font-size:17px;line-height:1.2}#info small{color:var(--mute)}
#back{display:none}
#log{flex:1;overflow-y:auto;padding:16px 0 10px}
.row{position:relative;display:grid;grid-template-columns:54px 140px 1fr;column-gap:12px;padding:2px 16px;align-items:start}
.row.first{margin-top:10px}.row:hover{background:var(--soft)}
.row.ment{background:var(--mb);box-shadow:inset 3px 0 var(--hi)}
.ts{color:var(--mute);font-size:12px;text-align:right;padding-top:4px}.row.same .ts{opacity:0}.row:hover .ts{opacity:1}
.nm{display:flex;justify-content:flex-end;align-items:center;gap:8px;min-width:0}.nm b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nm .av{width:26px;height:26px;font-size:11px}
.tx{min-width:0;padding-top:1px}.t{white-space:pre-wrap;word-break:break-word}.ed{color:var(--mute);font-size:12px}
.q{border-left:3px solid var(--acc);padding:1px 10px;margin:2px 0 4px;color:var(--mute);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.q b{color:var(--ink)}
.fw{color:var(--mute);font-size:12px;font-weight:700;margin-bottom:2px}
.mn{color:var(--acc);background:var(--soft);border-radius:5px;padding:0 4px;font-weight:700}.mn.me{background:var(--hi);color:var(--hi-ink)}
.rx{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.pill{display:flex;gap:5px;align-items:center;border:1.5px solid var(--line);background:var(--sf);border-radius:999px;padding:0 9px;font-size:14px}.pill span{font-size:13px;font-weight:700}.pill.mine{border-color:var(--acc);background:var(--soft)}
.tools{position:absolute;right:14px;top:-15px;display:none;background:var(--sf);border:1px solid var(--line);border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.16);padding:2px;z-index:2}
.row:hover .tools,.row:focus-within .tools{display:flex}
.tools button{border:0;background:none;padding:6px 8px;border-radius:8px;color:var(--mute);display:grid;place-items:center}.tools button:hover{background:var(--soft);color:var(--ink)}
.gone{color:var(--mute);font-style:italic}.dopt{display:flex;flex-direction:column;gap:8px;margin-top:14px}.dopt .btn{width:100%}
.sys{text-align:center;color:var(--mute);font-size:13px;padding:8px}.empty{text-align:center;color:var(--mute);padding:40px 20px}
#composer{position:relative;padding:8px 16px 14px;border-top:1px solid var(--line)}
#rbar{display:flex;align-items:center;justify-content:space-between;background:var(--soft);font-size:13px;padding:6px 12px;border-radius:10px 10px 0 0;color:var(--mute)}#rbar b{color:var(--ink)}#rbar button{border:0;background:none;font-size:16px}
#box{display:flex;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:12px;padding:4px 4px 4px 8px}#box.rp{border-radius:0 0 12px 12px}
#box:focus-within{border-color:var(--acc)}#box input{border:0;padding:8px;flex:1;min-width:0;outline:0;background:none}#box .emo{border:0;background:none;padding:4px 6px;color:var(--mute)}
#ac{position:absolute;left:16px;bottom:calc(100% - 4px);min-width:230px;background:var(--sf);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.22);padding:5px;z-index:5}
#ac .ai{display:flex;align-items:center;gap:10px;padding:5px 8px;border-radius:8px;cursor:pointer}#ac .ai.on,#ac .ai:hover{background:var(--soft)}#ac .av{width:26px;height:26px;font-size:11px}
#drawer{position:absolute;right:0;top:0;bottom:0;width:300px;max-width:88%;background:var(--sf);border-left:1px solid var(--line);padding:14px;overflow-y:auto;z-index:6;transform:translateX(105%);visibility:hidden;transition:transform .2s,visibility 0s .2s}
#drawer.open{transform:none;visibility:visible;transition:transform .2s;box-shadow:-12px 0 30px rgba(0,0,0,.2)}
#drawer h3{margin:0;font-size:16px}.dh{display:flex;align-items:center;margin-bottom:8px}
.gph{display:flex;align-items:center;gap:12px;padding:8px 0 12px;border-bottom:1px solid var(--line);margin-bottom:8px}.gph .av{width:64px;height:64px;font-size:24px}
.mrow{display:flex;align-items:center;gap:10px;padding:6px 0}.mrow .av{width:32px;height:32px;font-size:13px}
.stk{font-size:84px;line-height:1.05;width:max-content;filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 3px 5px rgba(0,0,0,.3))}
.simg{width:120px;height:120px;object-fit:contain;display:block}
.pic{display:block;max-width:min(340px,100%);max-height:320px;border-radius:12px;cursor:zoom-in;margin:2px 0}
#att{display:flex;align-items:center;gap:10px;background:var(--soft);font-size:13px;padding:8px 12px;border-radius:10px 10px 0 0;color:var(--mute)}#att img{height:52px;width:52px;object-fit:cover;border-radius:8px}#att button{border:0;background:none;font-size:16px}
#stk{position:absolute;left:16px;bottom:calc(100% - 4px);width:min(380px,calc(100% - 32px));max-height:340px;overflow-y:auto;background:var(--sf);border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.25);padding:10px;z-index:5}
.sg{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:10px}
.s1{border:0;background:none;font-size:34px;line-height:1;border-radius:10px;padding:4px;aspect-ratio:1;display:grid;place-items:center;width:100%}.s1:hover{background:var(--soft)}
.s1 img{width:100%;height:100%;object-fit:contain}.s1.add{border:2px dashed var(--line);font-size:22px;color:var(--mute)}.s1.add small{font-size:11px}
.s1w{position:relative}.sx{position:absolute;top:-4px;right:-4px;width:20px;height:20px;border-radius:50%;border:0;background:var(--ink);color:var(--sf);font-size:10px;display:none}.s1w:hover .sx,.sx:focus-visible{display:block}
.mutep{color:var(--mute);font-size:13px;margin:10px 2px 0}
#toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--ink);color:var(--sf);padding:9px 16px;border-radius:999px;font-weight:700;font-size:14px;z-index:30;max-width:90vw}
.lb{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:12px;cursor:zoom-out;display:block}
textarea{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;background:var(--sf);resize:vertical;outline-offset:2px;font:inherit}
.ib{position:relative}.mb{position:absolute;top:-2px;right:-4px;margin:0;font-size:10px}
.rcard{border:1.5px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px}
.rh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.chip2{background:var(--soft);color:var(--acc);border-radius:999px;font-size:12px;font-weight:800;padding:1px 10px;text-transform:capitalize}
.ev{background:var(--soft);border-radius:10px;padding:8px 12px;margin:8px 0;font-size:14px}.ev img{display:block;max-width:100%;max-height:160px;border-radius:8px;margin:4px 0}.ev small{color:var(--mute);display:block}
.dt{color:var(--mute);font-size:14px;font-style:italic;margin:6px 0}.acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.st{font-size:12px;font-weight:800;border-radius:999px;padding:1px 10px;background:var(--soft)}.st.open{background:var(--mb)}.st.resolved{color:var(--ok)}
#modal .box2.wide{max-width:760px}
/* pop + modal */
#pop{position:fixed;z-index:20;background:var(--sf);border:1px solid var(--line);border-radius:14px;width:352px;max-width:calc(100vw - 16px);height:340px;max-height:60vh;display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(0,0,0,.3);overflow:hidden}
.es{margin:8px 8px 4px;width:calc(100% - 16px);padding:8px 12px;border-radius:8px;font-size:14px}
.et{display:flex;gap:2px;padding:0 6px 4px;border-bottom:1px solid var(--line)}.et button{flex:1;border:0;background:none;font-size:17px;padding:4px 0;border-radius:8px;opacity:.65}.et button:hover{background:var(--soft);opacity:1}
.ebody{flex:1;overflow-y:auto;padding:0 8px 8px;position:relative}
.tn{display:flex;justify-content:center;gap:4px;padding:4px;border-top:1px solid var(--line)}.tn button{border:2px solid transparent;background:none;font-size:18px;border-radius:8px;padding:1px 6px}.tn button.on{border-color:var(--acc);background:var(--soft)}
.ec{font-size:12px;font-weight:800;color:var(--mute);padding:10px 4px 4px}.eg{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.eg button{border:0;background:none;font-size:22px;line-height:1.2;padding:3px;border-radius:8px}.eg button:hover{background:var(--soft)}
#modal{position:fixed;inset:0;background:rgba(5,8,16,.6);display:grid;place-items:center;padding:20px;z-index:10;overflow-y:auto}
#modal .box2{width:100%;max-width:440px;background:var(--sf);border-radius:16px;padding:24px;margin:auto}
#modal h1{margin:0 0 4px;font-size:22px}#modal p{margin:0 0 8px;color:var(--mute)}
.sect{border-top:1px solid var(--line);margin-top:18px;padding-top:2px}.sect h3{margin:12px 0 0;font-size:16px}
.pick{display:flex;align-items:center;gap:12px;padding:7px 8px;border-radius:10px;cursor:pointer;margin:0;font-weight:500;font-size:15px}
.pick:hover{background:var(--soft)}.pick input{margin-left:auto;width:18px;height:18px;accent-color:var(--acc)}.pick .av{width:32px;height:32px;font-size:13px}
.prev{background:var(--soft);border-radius:10px;padding:8px 12px;margin:8px 0;font-size:14px}
.row2{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
@media (max-width:700px){
 #shell{border-inline:0}#view{grid-template-columns:1fr}#view.v-list #thread{display:none}#view.v-thread #list{display:none}
 #back{display:grid}
 .row{grid-template-columns:1fr;row-gap:0}.ts{position:absolute;right:16px;top:3px;padding:0}.row.same .ts{display:none}
 .nm{flex-direction:row-reverse;justify-content:flex-end}.row.same .nm{display:none}.row.first{margin-top:12px}
 .tools{right:8px;display:flex;opacity:0;pointer-events:none}.row:hover .tools,.row:focus-within .tools{opacity:1;pointer-events:auto}}
@media (prefers-reduced-motion:reduce){#drawer{transition:none}}

/* ===== polish ===== */
:root{--r:14px}
#hd{border-top:3px solid var(--acc)}
#log,#items,.ebody,#drawer,#modal,#stk{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;-webkit-overflow-scrolling:touch}
.row{border-radius:12px;margin-inline:6px;padding-inline:10px}.row.ment{border-radius:12px}
.row.mine .nm b{color:var(--acc)!important}
.row.new{animation:rin .22s ease-out}@keyframes rin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.conv{border-radius:14px;padding:8px 10px;transition:background .12s}.conv.on{background:var(--soft);box-shadow:inset 4px 0 var(--acc)}
.conv .av,.nm .av,.mrow .av{box-shadow:0 0 0 2px var(--sf),0 0 0 3px var(--line)}.conv.on .av{box-shadow:0 0 0 2px var(--sf),0 0 0 3.5px var(--acc)}
.conv.un small{color:var(--ink);font-weight:600}
.bd{background:var(--acc);color:var(--acc-ink)}.bd.me{background:var(--hi);color:var(--hi-ink)}
.btn{border-radius:12px}.sr input{border-radius:12px}
#box{border-radius:18px;padding:5px 5px 5px 10px;transition:border-color .12s,box-shadow .12s}#box:focus-within{box-shadow:0 0 0 3px var(--soft)}#box.rp{border-radius:0 0 18px 18px}
#rbar,#att{border-radius:14px 14px 0 0}
.pill{transition:background .12s}.pill:hover{background:var(--soft)}
.pic{border-radius:16px}.tools{border-radius:14px}
#modal .box2,#auth .card{border-radius:20px}#pop,#stk,#ac,#drawer{border-radius:18px}#drawer{border-radius:18px 0 0 18px}
.sw{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 4px}
.swb{width:34px;height:34px;border-radius:50%;border:0;padding:0;cursor:pointer;position:relative;display:grid;place-items:center;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.swb.on{outline:3px solid var(--ink);outline-offset:2px}.swb:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.swb.cust{background:conic-gradient(#f43f5e,#f59e0b,#84cc16,#06b6d4,#6366f1,#d946ef,#f43f5e);overflow:hidden}.swb.cust input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:0;padding:0}
.more{display:block;margin:8px auto;border:0;background:var(--soft);color:var(--ink);font-weight:700;padding:7px 14px;border-radius:999px}
.row.sel .tools{display:flex;opacity:1;pointer-events:auto}
html{-webkit-tap-highlight-color:transparent}button,.row{touch-action:manipulation}
#info>div{min-width:0}#info h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.lite *,html.lite *::before,html.lite *::after{animation:none!important;transition:none!important}
html.lite .tools,html.lite #ac,html.lite #stk,html.lite #pop,html.lite #drawer.open{box-shadow:none!important}
html.lite .stk{filter:drop-shadow(0 2px 0 #fff)}
@media (pointer:coarse){.ib,.tools button{min-width:40px;min-height:40px}}
@media (prefers-reduced-motion:reduce){.row.new{animation:none}}

#pinbar{display:flex;align-items:center;gap:8px;padding:6px 16px;background:var(--soft);border-bottom:1px solid var(--line);font-size:13px}#pinbar .pt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#pinbar button{border:0;background:none;font-size:15px;padding:2px 6px}
.modtag{font-style:normal;font-size:10px;font-weight:800;background:var(--acc);color:var(--acc-ink);border-radius:5px;padding:0 5px;flex:none}
.mrow .mid{flex:1;display:flex;flex-direction:column;line-height:1.3;min-width:0}.mrow small{color:var(--mute)}
select{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--sf);color:var(--ink);font:inherit}
button:disabled,input:disabled{opacity:.55;cursor:not-allowed}
#net{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:40;background:var(--ink);color:var(--sf);padding:6px 14px;border-radius:999px;font-weight:700;font-size:13px}
#net.hidden{display:none}