:root{--bg:#f7f8fa;--panel:#ffffff;--line:#e4e6ea;--txt:#1a1d23;--mut:#8a929e;--accent:#06c755;--accent-deep:#05b34c;--ok:#06c755;--warn:#e8a33d;--bad:#e0566f}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--txt);font-family:-apple-system,BlinkMacSystemFont,Hiragino Kaku Gothic ProN,sans-serif;font-size:14px}.shell{display:flex;height:100vh}.nav{width:88px;flex-shrink:0;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column}.nav .brand{font-weight:800;font-size:14px;text-align:center;padding:14px 0;letter-spacing:.5px}.nav button{position:relative;background:none;border:none;border-left:3px solid transparent;padding:12px 4px;color:var(--mut);cursor:pointer;font-size:11px;display:flex;flex-direction:column;align-items:center;gap:5px}.nav button svg{width:22px;height:22px}.nav button:hover{background:#f4f5f7}.nav button.on{color:var(--accent-deep);border-left-color:var(--accent);background:#eaf8f0;font-weight:600}.navbadge{position:absolute;top:7px;right:12px;background:var(--bad);color:#fff;font-size:10px;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}.main{flex:1;min-width:0;height:100vh;overflow:hidden}.page{padding:22px 24px;height:100vh;overflow-y:auto;max-width:780px}.page h2{font-size:17px;margin:0 0 14px;display:flex;align-items:center;gap:8px}.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px}.page input{background:#fff;color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:13px;font-family:inherit}.product-picker{width:100%;border:1px solid var(--line);border-radius:10px;padding:8px;margin-bottom:8px;background:#fafbfc}.product-picker input{background:#fff;color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:13px;font-family:inherit}.picker-list{max-height:200px;overflow-y:auto;margin-top:8px}.picker-item{padding:8px;border:1px solid var(--line);border-radius:8px;margin-bottom:6px;cursor:pointer;background:#fff}.picker-item:hover{background:#eaf8f0;border-color:var(--accent)}.page h3{color:var(--txt)}.page-select{background:#fff;color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:13px;font-family:inherit}.toggle{width:46px;height:26px;border-radius:13px;background:#cfd4db;border:none;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0}.toggle.on{background:var(--accent)}.toggle .knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 2px #0003}.toggle.on .knob{left:23px}.app{display:grid;grid-template-columns:300px 1fr 320px;height:100vh}.col{border-right:1px solid var(--line);overflow-y:auto;background:var(--bg)}.head{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;gap:8px;align-items:center;position:sticky;top:0;background:var(--panel);z-index:2}.tabs button{background:none;border:1px solid var(--line);color:var(--mut);padding:5px 10px;border-radius:8px;cursor:pointer}.tabs button.on{color:#fff;border-color:var(--accent);background:var(--accent)}.staff-input{margin-left:auto;width:110px;background:#fff;color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:5px 8px;font-size:12px;font-family:inherit}.item{padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer;display:flex;gap:10px;align-items:flex-start}.item:hover{background:#f4f5f7}.item.sel{background:#eaf8f0}.avatar{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:16px}.item-body{flex:1;min-width:0}.item-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.item .name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item .time{font-size:11px;color:var(--mut);flex-shrink:0}.item .snip{color:var(--mut);font-size:12px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dot{display:inline-block;width:8px;height:8px;border-radius:50%}.dot.unread{background:var(--accent)}.badge{font-size:11px;padding:1px 8px;border-radius:10px;border:1px solid var(--line);color:var(--mut)}.badge.auto{color:var(--ok);border-color:var(--ok)}.badge.human{color:var(--accent-deep);border-color:var(--accent);background:#eaf8f0}.thread{display:flex;flex-direction:column;height:100vh}.msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--bg)}.bubble{max-width:72%;padding:9px 12px;border-radius:12px;white-space:pre-wrap;line-height:1.5}.bubble.customer{align-self:flex-start;background:#fff;border:1px solid var(--line)}.bubble.staff{align-self:flex-end;background:#e4f7ea}.bubble.auto{align-self:flex-end;background:#eef2f6}.meta{font-size:10px;color:var(--mut);margin-top:2px}.composer{border-top:1px solid var(--line);padding:12px;background:var(--panel)}.composer textarea{min-height:140px;max-height:52vh;field-sizing:content;resize:none}.msg-img{max-width:260px;max-height:260px;border-radius:8px;display:block;cursor:zoom-in}.draftbox{border:1px solid var(--accent);border-radius:10px;padding:10px;margin-bottom:8px;background:#f5f9ff}textarea{width:100%;background:#fff;color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:8px;font-family:inherit;font-size:14px;min-height:80px;resize:vertical}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}button.btn{background:var(--accent);color:#fff;border:none;padding:8px 14px;border-radius:8px;cursor:pointer;font-weight:600}button.ghost{background:none;border:1px solid var(--line);color:var(--mut)}.bar{font-size:12px;color:var(--mut);padding:6px 14px;border-bottom:1px solid var(--line);background:var(--panel)}.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{font-size:11px;padding:3px 8px;border-radius:8px;background:#f0f2f5;border:1px solid var(--line);cursor:pointer}.chip:hover{background:#e8eefc}.col-right{border-left:1px solid var(--line);background:var(--panel);padding:14px;overflow-y:auto;height:100vh}.col-right h4{margin:0 0 10px;font-size:13px}.col-right label{display:block;font-size:11px;color:var(--mut);margin:8px 0 3px}.col-right input{width:100%;background:#fff;color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:7px 8px;font-size:13px;font-family:inherit}.col-right textarea{margin-bottom:6px}.col-right .ro{padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:#f0f2f5;font-size:13px}.col-right hr{border:none;border-top:1px solid var(--line);margin:16px 0}.fact{font-size:12px;padding:6px 0;border-bottom:1px solid var(--line)}.prov-verified{color:var(--ok)}.prov-customer_claimed{color:var(--warn)}.prov-inferred{color:var(--bad)}:root{--spring: cubic-bezier(.34,1.56,.64,1)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes draftGlow{0%{box-shadow:0 0 #06c75500}30%{box-shadow:0 0 0 4px #06c75524}to{box-shadow:0 0 #06c75500}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}@keyframes bubbleIn{0%{opacity:0;transform:translateY(12px) scale(.9)}45%{opacity:1;transform:translateY(-3px) scale(1.04)}60%{transform:translateY(-3px) scale(1.04)}to{transform:translateY(0) scale(1)}}@keyframes hitPunch{0%{transform:scale(1)}16%{transform:scale(1.22)}34%{transform:scale(1.22)}to{transform:scale(1)}}@keyframes iconPop{0%{transform:scale(1)}28%{transform:scale(1.32) rotate(-4deg)}to{transform:scale(1) rotate(0)}}@keyframes flashPop{0%{opacity:0;transform:scale(.6) translateY(4px)}22%{opacity:1;transform:scale(1.12)}38%{transform:scale(1.12)}55%{transform:scale(1)}82%{opacity:1}to{opacity:0;transform:translateY(-3px)}}@keyframes selectPop{0%{transform:translate(2px) scale(1)}45%{transform:translate(2px) scale(1.012)}to{transform:translate(0) scale(1)}}button,.chip,.item,.badge,input,textarea,.tabs button{transition:background .18s ease,color .18s ease,border-color .18s ease,transform .12s ease,box-shadow .18s ease}.app{animation:fadeIn .35s ease both}.item{border-left:3px solid transparent}.item:hover{transform:translate(2px)}.item.sel{border-left-color:var(--accent);animation:selectPop .3s var(--spring)}@keyframes msgIn{0%{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}.bubble{animation:msgIn .26s cubic-bezier(.22,.61,.36,1) both}.draftbox{animation:bubbleIn .34s var(--spring) both,draftGlow 1.6s ease .1s}.col-right{animation:fadeIn .3s ease both}.col-right>*{animation:fadeIn .32s ease both}.col-right>*:nth-child(2){animation-delay:.03s}.col-right>*:nth-child(3){animation-delay:.06s}.col-right>*:nth-child(4){animation-delay:.09s}.col-right>*:nth-child(n+5){animation-delay:.12s}button.btn{box-shadow:0 1px 2px #1018280f}button.btn{transition:transform .3s var(--spring),box-shadow .18s ease,background .18s ease,filter .18s ease}button.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #06c75547;filter:brightness(1.03)}button.btn:active:not(:disabled){transform:scale(.9);transition:transform .05s ease}button.btn.punch{animation:hitPunch .36s var(--spring)}.nav button svg{transition:transform .3s var(--spring)}.nav button:active svg{transform:scale(.82);transition:transform .05s ease}.nav button.on svg{animation:iconPop .42s var(--spring)}.toggle .knob{transition:left .32s var(--spring),background .2s ease}.toggle:active .knob{width:24px}button.btn:disabled{opacity:.55;cursor:default}button.ghost:hover:not(:disabled){border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}.chip:hover{transform:translateY(-1px)}input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #2563eb24}.dot.unread{animation:pulse 2.2s ease-in-out infinite}.flash{color:var(--ok);font-size:12px;font-weight:700;margin-top:6px;transform-origin:left;animation:flashPop 1.5s var(--spring) both}.spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px;margin-right:6px}@media(prefers-reduced-motion:reduce){*,.app,.bubble,.draftbox,.col-right,.col-right>*{animation:none!important;transition:none!important}}.shell.ch-post{--accent:#06c755;--accent-deep:#05b34c}.shell.ch-pre{--accent:#5b6ef5;--accent-deep:#4453d6;--ok:#5b6ef5}.shell.ch-post .nav{background:#edf9f1}.shell.ch-pre .nav{background:#eef0fb}.nav button.on{background:#fff;box-shadow:0 1px 3px #1018280f}.app.ch-pre .bubble.staff{background:#e8ebff}.app.ch-pre .item.sel{background:#eef0ff}.app.ch-pre .item:hover{background:#f3f4fb}.app.ch-pre .badge.human{background:#eef0ff}.channel-banner{padding:9px 14px;font-weight:700;color:#fff;font-size:13px;letter-spacing:.4px}.channel-banner.post{background:#06c755}.channel-banner.pre{background:#5b6ef5}.ch-chip{font-size:11px;font-weight:700;padding:2px 9px;border-radius:10px;color:#fff}.ch-chip.post{background:#06c755}.ch-chip.pre{background:#5b6ef5}.col-list{display:flex;flex-direction:column;height:100vh;min-width:0}.col-list .col.list{flex:1;overflow-y:auto}.back-btn,.info-btn,.close-info{display:none}@media(max-width:980px)and (min-width:761px){.app{grid-template-columns:300px 1fr}.col-right{display:none}}@media(max-width:760px){.shell{flex-direction:column}.nav{order:2;position:fixed;bottom:0;left:0;right:0;width:auto;height:60px;flex-direction:row;border-right:none;border-top:1px solid var(--line);justify-content:space-around;z-index:50;padding-bottom:env(safe-area-inset-bottom)}.nav .brand{display:none}.nav button{flex:1;border-left:none;border-top:3px solid transparent;padding:7px 2px;font-size:10px;gap:3px}.nav button.on{border-left-color:transparent;border-top-color:var(--accent)}.navbadge{top:4px;right:50%;margin-right:-22px}.main{height:auto;flex:1;min-height:0;padding-bottom:60px;overflow-y:auto}.app{grid-template-columns:1fr;height:auto}.col-list{height:calc(100dvh - 60px)}.thread,.app.has-sel .col-list{display:none}.app.has-sel .thread{display:flex;height:calc(100dvh - 60px)}.back-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--line);background:#fff;border-radius:8px;font-size:20px;line-height:1;color:var(--txt);cursor:pointer}.info-btn{display:inline-flex}.col-right{display:none}.col-right.open{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;width:auto;height:100dvh}.close-info{display:flex;align-items:center;justify-content:center;position:absolute;top:10px;right:12px;width:32px;height:32px;border:none;background:#f0f2f5;border-radius:50%;font-size:20px;cursor:pointer}.page{height:auto;padding:16px}.bubble{max-width:84%}.staff-input{width:84px}}
