/* /chat: Messages-like room */
.chat{max-width:920px;padding-top:calc(var(--navh,52px) + 28px);padding-bottom:40px}
.chead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.chead h1{font-size:clamp(34px,5vw,48px);font-weight:700;letter-spacing:-.035em;line-height:1.05}
.chead p{color:var(--tx3);font-size:17px;margin-top:6px}
.chere{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:99px;background:var(--t1);font-size:14px;color:var(--tx2);white-space:nowrap}
.chere i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(48,209,88,.18)}
.chere b{color:var(--tx);font-weight:600}
.cbox{position:relative;display:flex;flex-direction:column;height:calc(100vh - 260px);height:calc(100dvh - 260px);min-height:460px;border-radius:24px;background:var(--t1);overflow:hidden}
.clist{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:18px 18px 8px;scrollbar-width:thin}
.cload{display:flex;justify-content:center;padding:14px}
.cload .spin{width:22px;height:22px;border:2px solid var(--t4);border-top-color:var(--tx2);border-radius:50%;animation:cspin .8s linear infinite}
@keyframes cspin{to{transform:rotate(360deg)}}
.cempty{margin:auto;text-align:center;color:var(--tx3);padding:60px 20px;font-size:15px}
.cempty b{display:block;color:var(--tx);font-size:20px;margin-bottom:6px}
.cday{display:flex;justify-content:center;margin:14px 0 10px}
.cday span{font-size:12px;font-weight:600;color:var(--tx3);padding:4px 10px;border-radius:99px;background:var(--t2)}
/* a message */
.cm{display:flex;align-items:flex-end;gap:8px;margin-top:2px;position:relative}
.cm.first{margin-top:12px}
.cm .av{width:30px;flex-shrink:0;align-self:flex-end}
.cm .av .avatar{width:30px;height:30px;font-size:13px}
.cm:not(.last) .av .avatar{visibility:hidden}
.cm .col{display:flex;flex-direction:column;max-width:min(560px,78%);min-width:0}
.cm .who{font-size:12.5px;color:var(--tx3);margin:0 0 3px 12px;font-weight:500}
.cm .who a:hover{text-decoration:underline}
.cb{position:relative;padding:8px 13px 7px;border-radius:20px;background:var(--t2);color:var(--tx);font-size:15.5px;line-height:1.38;letter-spacing:-.01em;white-space:pre-wrap;overflow-wrap:anywhere;cursor:default}
.cb a{color:inherit;text-decoration:underline}
.cb time{float:right;margin:6px 0 -2px 10px;font-size:11px;color:var(--tx4);line-height:1}
.cm:not(.last) .cb{border-bottom-left-radius:8px}
.cm:not(.first) .cb{border-top-left-radius:8px}
.cm.own{justify-content:flex-end}
.cm.own .col{align-items:flex-end}
.cm.own .cb{background:#0a84ff;color:#fff}
.cm.own .cb time{color:rgba(255,255,255,.7)}
.cm.own:not(.last) .cb{border-bottom-left-radius:20px;border-bottom-right-radius:8px}
.cm.own:not(.first) .cb{border-top-left-radius:20px;border-top-right-radius:8px}
.cq{display:block;margin:-1px 0 6px;padding:5px 9px;border-radius:10px;background:rgba(127,127,127,.18);font-size:13px;line-height:1.3;white-space:normal;cursor:pointer}
.cq b{display:block;font-weight:600;font-size:12px;opacity:.85}
.cq em{font-style:normal;opacity:.8}
/* actions: on hover (desktop) or after a tap (phones) */
.cact{display:flex;gap:4px;align-self:center;opacity:0;transition:opacity .15s;flex-shrink:0}
.cm:hover .cact,.cm.on .cact{opacity:1}
.cact button{height:28px;padding:0 10px;border-radius:99px;background:var(--t2);color:var(--tx2);font-size:12.5px;font-weight:500}
.cact button:hover{color:var(--tx)}
.cact button.del{color:var(--red)}
.cm.own .cact{order:-1}
.cm.flash .cb{animation:cflash 1.2s var(--ease)}
@keyframes cflash{0%,30%{box-shadow:0 0 0 3px rgba(10,132,255,.55)}100%{box-shadow:0 0 0 3px transparent}}
.cm.in{animation:cin .35s var(--ease)}
@keyframes cin{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.cnew{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:99px;background:#0a84ff;color:#fff;font-size:13.5px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:2}
/* composer */
.ccomp{padding:10px 12px 10px;border-top:.5px solid var(--sep);background:var(--t1)}
.crep{display:flex;align-items:center;gap:10px;margin:0 4px 8px;padding:6px 6px 6px 12px;border-left:3px solid #0a84ff;border-radius:8px;background:var(--t2)}
.crep span{flex:1;min-width:0;font-size:13px;line-height:1.3}
.crep b{display:block;font-weight:600}
.crep em{display:block;font-style:normal;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow{display:flex;align-items:flex-end;gap:8px}
.crow textarea{flex:1;min-height:40px;max-height:132px;resize:none;padding:9px 16px;border-radius:20px;border:1px solid var(--t4);background:var(--bg);color:var(--tx);font-size:16px;line-height:1.35;outline:none}
.crow textarea:focus{border-color:#0a84ff}
.csend{width:40px;height:40px;flex-shrink:0;border-radius:50%;background:#0a84ff;color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .2s var(--ease),opacity .2s}
.csend:disabled{opacity:.35}
.csend:not(:disabled):active{transform:scale(.9)}
.cnote{display:flex;justify-content:space-between;gap:10px;min-height:0;font-size:12.5px;padding:0 8px}
.cnote span:empty{display:none}
.cnote .cerr{color:var(--red);padding-top:6px}
.cnote .ccount{color:var(--tx3);margin-left:auto;padding-top:6px}
.cgate{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 18px;border-top:.5px solid var(--sep)}
.cgate p{color:var(--tx3);font-size:14.5px}
.cgate div{display:flex;gap:8px}
.crules{color:var(--tx4);font-size:12.5px;text-align:center;margin-top:12px}
@media (max-width:734px){
  .chat{padding-top:calc(var(--navh,52px) + 14px);padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .chead{margin-bottom:12px}.chead p{font-size:15px}
  .cbox{height:calc(100dvh - 250px - env(safe-area-inset-bottom));border-radius:20px}
  .clist{padding:12px 10px 6px}
  .cm .col{max-width:84%}
  .cact{position:absolute;top:-30px;right:0}.cm:not(.own) .cact{left:38px;right:auto}
  .cm:hover .cact{opacity:0}.cm.on .cact{opacity:1}
  .crules{display:none}
}

/* @light:auto (cli/light-theme.py) */
:root[data-theme=light] .chead p:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){color:var(--tx3)}
:root[data-theme=light] .chere:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){background:var(--t1);color:var(--tx2)}
:root[data-theme=light] .chere i:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){background:var(--green);box-shadow:0 0 0 4px rgba(48,209,88,.18)}
:root[data-theme=light] .chere b:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){color:var(--tx)}
:root[data-theme=light] .cbox:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){background:var(--t1)}
:root[data-theme=light] .cload .spin:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){border:2px solid var(--t4);border-top-color:var(--tx2)}
:root[data-theme=light] .cempty:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){color:var(--tx3)}
:root[data-theme=light] .cempty b:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){color:var(--tx)}
:root[data-theme=light] .cday span:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){color:var(--tx3);background:var(--t2)}
:root[data-theme=light] .cm .who:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){color:var(--tx3)}
:root[data-theme=light] .cb:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){background:var(--t2);color:var(--tx)}
:root[data-theme=light] .cb time:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){color:var(--tx4)}
:root[data-theme=light] .cm.own .cb:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){background:#0a84ff;color:#fff}
:root[data-theme=light] .cm.own .cb time:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){color:rgba(29,29,31,0.7)}
:root[data-theme=light] .cq:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){background:rgba(127,127,127,.18)}
:root[data-theme=light] .cact button:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){background:var(--t2);color:var(--tx2)}
:root[data-theme=light] .cact button:hover:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){color:var(--tx)}
:root[data-theme=light] .cact button.del:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){color:var(--red)}
:root[data-theme=light] .cnew:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){background:#0a84ff;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,0.098)}
:root[data-theme=light] .ccomp:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){border-top:.5px solid var(--sep);background:var(--t1)}
:root[data-theme=light] .crep:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){border-left:3px solid #0a84ff;background:var(--t2)}
:root[data-theme=light] .crep em:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){color:var(--tx3)}
:root[data-theme=light] .crow textarea:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){border:1px solid var(--t4);background:var(--bg);color:var(--tx)}
:root[data-theme=light] .crow textarea:focus:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){border-color:#0a84ff}
:root[data-theme=light] .csend:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){background:#0a84ff;color:#fff}
:root[data-theme=light] .cnote .cerr:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){color:var(--red)}
:root[data-theme=light] .cnote .ccount:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){color:var(--tx3)}
:root[data-theme=light] .cgate:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){border-top:.5px solid var(--sep)}
:root[data-theme=light] .cgate p:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){color:var(--tx3)}
:root[data-theme=light] .crules:where(:not(:is(.hero,.nav.top,.promo,.gt,.modal,.lb,.player,.pbox,.toast,.ap-act,.pcover,.upnext,.up-next,.pap-wrap) *),.facts, .facts *, .menu, .menu *){color:var(--tx4)}
/* @light:end */