/* ===== Chat global ===== */
[hidden]{display:none!important}
.chatpage{padding-top:20px}
.chatwrap{position:relative;display:flex;flex-direction:column;height:calc(100vh - 80px - var(--mb,0px));height:calc(100dvh - 80px - var(--mb,0px));max-width:820px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.chathead{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.chathead h2{margin:0;font-size:18px}.chathead p{margin:2px 0 0;font-size:12.5px;color:var(--mute)}
.chico{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:rgba(107,140,255,.18);color:var(--blue)}
.chatlist{flex:1;overflow-y:auto;padding:14px 16px 8px;display:flex;flex-direction:column;overscroll-behavior:contain}
.olderbtn{align-self:center;margin:4px 0 10px;padding:8px 16px;border-radius:99px;border:1px solid var(--line);background:var(--bg);color:var(--blue);font-weight:600;font-size:13px}
.chatnote{align-self:center;margin:6px 0 10px;font-size:12.5px;color:var(--mute);text-align:center}
.dsep{display:flex;justify-content:center;margin:14px 0 8px}.dsep span{padding:3px 12px;border-radius:99px;background:var(--bg);color:var(--mute);font-size:12px;font-weight:700}
.msg{display:flex;gap:10px;align-items:flex-start;max-width:100%;margin-top:4px}.msg.first{margin-top:18px}.dsep+.msg{margin-top:6px}.msg.mine{flex-direction:row-reverse}
.mav,.avsp{flex:none;width:36px}.mav{display:block;line-height:0}
.mbody{display:flex;flex-direction:column;min-width:0;max-width:min(78%,520px)}.msg.mine .mbody{align-items:flex-end}
.mname{display:flex;align-items:center;gap:7px;min-width:0;font-size:13px;font-weight:700;line-height:20px;margin:0 0 4px 2px;color:var(--ink)}.mnm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modtag{display:inline-flex;align-items:center;gap:3px;flex:none;padding:1px 8px 1px 6px;border-radius:99px;background:rgba(255,179,64,.18);color:var(--amber);font-size:10.5px;font-weight:700;line-height:17px;letter-spacing:.01em}.modtag .ic{display:block}
.modtag.overlord{background:rgba(139,92,246,.2);color:#8b5cf6}
.bub{position:relative;padding:9px 13px 6px;border-radius:16px;background:var(--bg);color:var(--ink);overflow-wrap:anywhere;cursor:default}
.msg.mine .bub{background:var(--blue);color:#fff}.msg.first:not(.mine) .bub{border-top-left-radius:5px}.msg.first.mine .bub{border-top-right-radius:5px}
.mtext{white-space:pre-wrap;line-height:1.45;font-size:15px}.mtext a{color:var(--blue);text-decoration:underline}.msg.mine .mtext a{color:#fff}
.mtime{display:block;text-align:right;font-size:11px;opacity:.65;margin-top:2px}
.aimg{display:block;padding:0;border:0;background:none;border-radius:12px;overflow:hidden;cursor:zoom-in;margin:0 0 4px}
.aimg img{display:block;max-width:min(260px,64vw);max-height:280px;border-radius:12px;object-fit:cover}
.aimg.ph{width:200px;height:140px;background:rgba(127,127,127,.2);animation:pulse 1.2s infinite;cursor:default}
.afile{display:flex;align-items:center;gap:10px;box-sizing:border-box;width:min(270px,64vw);padding:8px;margin:0 0 4px;border-radius:12px;background:rgba(127,127,127,.14);color:inherit;text-decoration:none}
.msg.mine .afile{background:rgba(255,255,255,.18)}
.fmeta{display:grid;min-width:0;flex:1}.fmeta b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.fmeta small{opacity:.75;font-size:12px}
.ficon{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:10px;background:rgba(127,127,127,.2);font-size:11px}
.mmore{display:none;position:absolute;top:4px;right:-34px;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:var(--bg);color:var(--mute);line-height:0;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.mmore .ic{transform:rotate(90deg)}.msg.mine .mmore{right:auto;left:-34px}
@media(hover:hover){.msg:hover .mmore{display:grid}}
.bub{-webkit-touch-callout:none}
@media(pointer:coarse){.bub{-webkit-user-select:none;user-select:none}}
.msg.pick .bub{outline:2px solid var(--blue);outline-offset:1px}
.msg.flash .bub{animation:flashbub 1.5s ease}
@keyframes flashbub{0%,60%{box-shadow:0 0 0 4px rgba(255,179,64,.85)}100%{box-shadow:0 0 0 4px rgba(255,179,64,0)}}
.rquote{display:block;box-sizing:border-box;width:100%;min-width:150px;margin:0 0 6px;padding:5px 9px;border:0;border-left:3px solid var(--blue);border-radius:8px;background:rgba(45,86,240,.1);color:inherit;text-align:left;cursor:pointer;font:inherit}
.rquote b{display:block;font-size:12.5px;font-weight:700;color:var(--blue);line-height:1.4}
.rquote span{display:block;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:400;opacity:.85;line-height:1.4}
.msg.mine .rquote{background:rgba(255,255,255,.2);border-left-color:#fff}.msg.mine .rquote b{color:#fff}
.rbar{display:flex;align-items:center;gap:10px;margin:0 0 8px;padding:7px 8px 7px 12px;border-radius:12px;border-left:3px solid var(--blue);background:var(--bg)}
.rbar .rico{flex:none;color:var(--blue);line-height:0}.rtxt{min-width:0;flex:1}
.rtxt b{display:block;font-size:12.5px;color:var(--blue)}.rtxt span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;color:var(--mute)}
.rbar .pdel{display:grid;place-items:center;flex:none;padding:0;width:30px;height:30px;border-radius:50%;border:0;background:rgba(127,127,127,.18);color:var(--mute)}
.cmenu{position:fixed;z-index:80;min-width:176px;padding:6px;border-radius:14px;background:var(--card);border:1px solid var(--line);box-shadow:0 14px 36px rgba(0,0,0,.3);animation:cmpop .12s ease-out}
@keyframes cmpop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.cmenu button{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:0 14px;border:0;border-radius:10px;background:none;color:var(--ink);font-size:15px;font-weight:600;text-align:left}
.cmenu button:hover,.cmenu button:focus-visible{background:rgba(45,86,240,.12);outline:none}.cmenu button.del{color:var(--red)}.cmenu .ic{flex:none}

.chatempty{display:grid;justify-items:center;gap:8px;margin:auto;padding:30px;color:var(--mute);text-align:center}.chatempty .ic{opacity:.6}.chatempty p{margin:0}
.newmsg{position:absolute;right:16px;bottom:96px;z-index:3;display:inline-flex;align-items:center;gap:4px;padding:8px 14px;border:0;border-radius:99px;background:var(--blue);color:#fff;font-weight:700;font-size:13px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.newmsg .ic{transform:rotate(90deg)}
.composer{position:relative;border-top:1px solid var(--line);padding:10px 12px calc(8px + env(safe-area-inset-bottom));background:var(--card)}
.cpreview{margin:0 0 8px}
.pchip{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 8px;border-radius:14px;border:1px solid var(--line);background:var(--bg)}
.pchip img{flex:none;width:46px;height:46px;border-radius:10px;object-fit:cover}
.pchip .pdel{display:grid;place-items:center;flex:none;margin-left:auto;padding:0;width:30px;height:30px;border-radius:50%;border:0;background:rgba(127,127,127,.18);color:var(--mute)}
.pchip .pdel:hover{background:var(--red);color:#fff}
.cbar{display:flex;align-items:flex-end;gap:8px}
.attach,.send{margin:0;display:grid;place-items:center;flex:none;box-sizing:border-box;width:44px;height:44px;padding:0;border-radius:50%;line-height:0}
.attach{border:1px solid var(--line);background:var(--bg);color:var(--mute);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.attach:hover{color:var(--blue);border-color:var(--blue)}
#cinput{display:block;flex:1;min-width:0;box-sizing:border-box;height:44px;min-height:44px;max-height:132px;resize:none;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:22px;padding:10px 16px;font:inherit;font-size:16px;line-height:22px;outline:none;overflow-y:auto}
#cinput:focus{border-color:var(--blue)}
.send{border:0;background:rgba(127,127,127,.22);color:var(--mute);cursor:pointer;transition:background .2s,color .2s,transform .1s}
.send.ready{background:var(--blue);color:#fff}.send.ready:active{transform:scale(.93)}.send:disabled{opacity:.6}
.send .ic,.attach .ic{display:block}
.cfoot{display:flex;justify-content:space-between;gap:8px;padding:6px 6px 0;font-size:11.5px;color:var(--mute)}
.ficon.pdf{background:rgba(216,68,43,.16);color:var(--red)}.ficon.doc{background:rgba(45,86,240,.16);color:var(--blue)}
.ficon.xls{background:rgba(23,138,94,.18);color:var(--green)}.ficon.ppt{background:rgba(255,150,40,.2);color:var(--amber)}
.ficon.pdf,.ficon.doc,.ficon.xls,.ficon.ppt,.ficon.txt{font-size:11px;font-weight:800;letter-spacing:.02em}
.msg.mine .ficon{background:rgba(255,255,255,.22);color:#fff}
.adl{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:rgba(127,127,127,.18)}.msg.mine .adl{background:rgba(255,255,255,.22)}
/* tag @nama */
.mention{display:inline;padding:1px 6px;border-radius:7px;font-weight:600;background:rgba(45,86,240,.13);color:var(--blue);white-space:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.mention.me{background:rgba(255,179,64,.3);color:var(--amber)}
.msg.mine .mention{background:rgba(255,255,255,.25);color:#fff}
.msg.ment .bub{box-shadow:0 0 0 2px rgba(255,179,64,.7)}
.mpop{position:absolute;left:12px;right:12px;bottom:calc(100% + 6px);z-index:5;max-width:380px;max-height:260px;overflow-y:auto;overscroll-behavior:contain;padding:6px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:0 12px 32px rgba(0,0,0,.24)}
.mphead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:6px 10px 8px;font-size:12px;font-weight:700;color:var(--ink)}.mphead small{font-weight:500;font-size:11.5px;color:var(--mute)}
.mpi{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:7px 10px;border:0;border-radius:12px;background:none;text-align:left;color:var(--ink);font-size:15px}
.mpi .av{flex:none}
.mpi.on,.mpi:hover{background:rgba(45,86,240,.12)}
.mpn{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.mpn b{font-weight:800;color:var(--blue)}
.chatlock{max-width:480px;margin:60px auto;text-align:center;display:grid;justify-items:center;gap:10px;padding:34px 24px}.chatlock .ic{color:var(--mute)}.chatlock h2{margin:0}.chatlock p{margin:0 0 6px;color:var(--mute)}
.lbox img{display:block;max-width:100%;max-height:68vh;margin:0 auto 10px;border-radius:12px}
.cbadge{font-style:normal;min-width:20px;padding:1px 7px;border-radius:99px;background:var(--red);color:#fff;font-size:11.5px;font-weight:800;text-align:center;line-height:1.5}
.cbadgeslot:empty{display:none}.nv .cbadgeslot{margin-left:auto}
.bn{position:relative}.bnb{position:absolute;top:2px;left:50%;margin-left:6px;font-weight:400}
/* ===== Sematkan Pesan Penting (Pin Bar) ===== */
.pinbar{display:flex;align-items:center;background:rgba(45,86,240,.09);border-bottom:1px solid var(--line);padding:6px 12px 6px 16px;gap:8px;z-index:4;transition:background .2s}
.pinbar[hidden]{display:none!important}
.pin-main{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:2px 0;border:0;background:none;text-align:left;color:inherit;cursor:pointer}
.pin-ico{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:rgba(45,86,240,.16);color:var(--blue)}
.pin-txt{min-width:0;flex:1;font-size:12.5px;line-height:1.35}
.pin-txt b{display:block;color:var(--blue);font-weight:700}
.pin-txt span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mute)}
.pin-del{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;border:0;background:none;color:var(--mute);cursor:pointer;line-height:0;transition:background .2s,color .2s}
.pin-del:hover{background:rgba(239,68,68,.14);color:var(--red)}

/* Tombol hapus semua chat (hanya overlord) */
.clrall{display:grid;place-items:center;flex:none;margin-left:auto;width:36px;height:36px;padding:0;border:0;border-radius:10px;background:rgba(239,68,68,.12);color:var(--red);line-height:0;transition:background .2s}
.clrall:hover{background:rgba(239,68,68,.25)}
@media(max-width:860px){
  .wrap.chatpage{padding:0}
  [data-page=chat] .content{padding-bottom:0}
  .chatwrap{height:calc(100dvh - 56px - 62px - env(safe-area-inset-bottom) - var(--mb,0px));border-radius:0;border-width:0 0 1px;max-width:none}
  body.kb .bnav{display:none}body.kb .chatwrap{height:calc(100dvh - 56px - var(--mb,0px))}
  .chathead{padding:10px 14px}.chathead p{display:none}.chico{width:34px;height:34px}
  .mbody{max-width:calc(100% - 46px)}.cfoot span:first-child{display:none}.cfoot{padding-top:0}.cfoot:has(#ccount:empty){display:none}.newmsg{bottom:72px}.mpop{max-width:none}
}
.fmeta b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;overflow:hidden;overflow-wrap:anywhere}