:root{--menu-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27M4%207h16M4%2012h16M4%2017h16%27%2F%3E%3C%2Fsvg%3E");--add-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27M12%205v14M5%2012h14%27%2F%3E%3C%2Fsvg%3E");--check-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27m5%2012.5%204.5%204.5L19%207.5%27%2F%3E%3C%2Fsvg%3E");--album-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%272.6%27%2F%3E%3C%2Fsvg%3E")}
#cb-radial .cbr-ico{display:inline-block;flex:none;background-color:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.icon,.cb-ico{display:inline-block;flex:none;width:20px;height:20px;background-color:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;vertical-align:middle}
.icon.sm,.cb-ico.sm{width:16px;height:16px}.icon.lg{width:24px;height:24px}.icon.xl{width:32px;height:32px}
.icon.add,.cb-ico.add{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27M12%205v14M5%2012h14%27%2F%3E%3C%2Fsvg%3E")}
.icon.arrow-down,.cb-ico.arrow-down{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27M12%205v14M6%2013l6%206%206-6%27%2F%3E%3C%2Fsvg%3E")}
.icon.arrow-up-right,.cb-ico.arrow-up-right{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27M7%2017%2017%207M8.5%207H17v8.5%27%2F%3E%3C%2Fsvg%3E")}
.icon.attach,.cb-ico.attach{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27m21%2011.5-8.6%208.6a5.5%205.5%200%200%201-7.8-7.8l8.6-8.6a3.7%203.7%200%200%201%205.2%205.2l-8.6%208.6a1.8%201.8%200%200%201-2.6-2.6l7.9-7.9%27%2F%3E%3C%2Fsvg%3E")}
.icon.album,.cb-ico.album{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%272.6%27%2F%3E%3C%2Fsvg%3E")}
.icon.check,.cb-ico.check{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27m5%2012.5%204.5%204.5L19%207.5%27%2F%3E%3C%2Fsvg%3E")}
.icon.chev-left,.cb-ico.chev-left{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27m15%205-7%207%207%207%27%2F%3E%3C%2Fsvg%3E")}
.icon.chev-right,.cb-ico.chev-right{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27m9%205%207%207-7%207%27%2F%3E%3C%2Fsvg%3E")}
.icon.close,.cb-ico.close{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27M6%206l12%2012M18%206%206%2018%27%2F%3E%3C%2Fsvg%3E")}
.icon.copy,.cb-ico.copy{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Crect%20x%3D%279%27%20y%3D%279%27%20width%3D%2711%27%20height%3D%2711%27%20rx%3D%272.5%27%2F%3E%3Cpath%20d%3D%27M15%205.5H7.5A2.5%202.5%200%200%200%205%208v7.5%27%2F%3E%3C%2Fsvg%3E")}
.icon.download,.cb-ico.download{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27M12%204v11M7%2010.5l5%205%205-5M5%2020h14%27%2F%3E%3C%2Fsvg%3E")}
.icon.edit,.cb-ico.edit{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27M4%2020h4.2L19.4%208.8a2.1%202.1%200%200%200-3-3L5.2%2017%204%2020z%27%2F%3E%3Cpath%20d%3D%27m14.5%207.5%203%203%27%2F%3E%3C%2Fsvg%3E")}
.icon.file,.cb-ico.file{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27M14%203H7.5A2.5%202.5%200%200%200%205%205.5v13A2.5%202.5%200%200%200%207.5%2021h9a2.5%202.5%200%200%200%202.5-2.5V8l-5-5z%27%2F%3E%3Cpath%20d%3D%27M14%203v5h5%27%2F%3E%3C%2Fsvg%3E")}
.icon.filmstrip,.cb-ico.filmstrip{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%272.5%27%2F%3E%3Cpath%20d%3D%27M8%205v14M16%205v14M3%209.5h5M3%2014.5h5M16%209.5h5M16%2014.5h5%27%2F%3E%3C%2Fsvg%3E")}
.icon.folder,.cb-ico.folder{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27M3%207.5A2.5%202.5%200%200%201%205.5%205H9l2%202.5h7.5A2.5%202.5%200%200%201%2021%2010v7.5a2.5%202.5%200%200%201-2.5%202.5h-13A2.5%202.5%200%200%201%203%2017.5v-10z%27%2F%3E%3C%2Fsvg%3E")}
.icon.gif,.cb-ico.gif{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Crect%20x%3D%272.5%27%20y%3D%275.5%27%20width%3D%2719%27%20height%3D%2713%27%20rx%3D%273%27%2F%3E%3Cpath%20d%3D%27M10.6%2010.6a2.1%202.1%200%200%200-1.8-1.1%202.5%202.5%200%200%200%200%205%202.1%202.1%200%200%200%202.2-2.1H9.2%27%2F%3E%3Cpath%20d%3D%27M13.4%209.5v5M18.4%209.5h-2.6v5M15.8%2012h2.2%27%2F%3E%3C%2Fsvg%3E")}
.icon.imgANDvid,.cb-ico.imgANDvid{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Crect%20x%3D%273%27%20y%3D%274%27%20width%3D%2718%27%20height%3D%2716%27%20rx%3D%272.5%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%279.5%27%20r%3D%271.6%27%2F%3E%3Cpath%20d%3D%27m3.5%2017%205-5%204%204%203-3%205%205%27%2F%3E%3C%2Fsvg%3E")}
.icon.jump,.cb-ico.jump{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27m6%206%206%206%206-6M6%2013l6%206%206-6%27%2F%3E%3C%2Fsvg%3E")}
.icon.menu,.cb-ico.menu{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27M4%207h16M4%2012h16M4%2017h16%27%2F%3E%3C%2Fsvg%3E")}
.icon.more,.cb-ico.more{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27M12%205h.01M12%2012h.01M12%2019h.01%27%20stroke-width%3D%272.6%27%2F%3E%3C%2Fsvg%3E")}
.icon.link,.cb-ico.link{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27M10%2014a4%204%200%200%200%205.7%200l3-3a4%204%200%200%200-5.7-5.7l-1%201M14%2010a4%204%200%200%200-5.7%200l-3%203a4%204%200%200%200%205.7%205.7l1-1%27%2F%3E%3C%2Fsvg%3E")}
.icon.select,.cb-ico.select{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27m8%2012.5%203%203%205-6%27%2F%3E%3C%2Fsvg%3E")}
.icon.music,.cb-ico.music{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27M9%2018V6.5L20%204.5V16%27%2F%3E%3Ccircle%20cx%3D%276.5%27%20cy%3D%2718%27%20r%3D%272.5%27%2F%3E%3Ccircle%20cx%3D%2717.5%27%20cy%3D%2716%27%20r%3D%272.5%27%2F%3E%3C%2Fsvg%3E")}
.icon.pause,.cb-ico.pause{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Crect%20x%3D%276%27%20y%3D%275%27%20width%3D%274%27%20height%3D%2714%27%20rx%3D%271.3%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%275%27%20width%3D%274%27%20height%3D%2714%27%20rx%3D%271.3%27%2F%3E%3C%2Fsvg%3E")}
.icon.play,.cb-ico.play{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27M7%205.2v13.6a1%201%200%200%200%201.5.85l11-6.8a1%201%200%200%200%200-1.7l-11-6.8A1%201%200%200%200%207%205.2z%27%2F%3E%3C%2Fsvg%3E")}
.icon.reply,.cb-ico.reply{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27m9%205-5%205%205%205M4%2010h10a6%206%200%200%201%206%206v3%27%2F%3E%3C%2Fsvg%3E")}
.icon.search,.cb-ico.search{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%276.5%27%2F%3E%3Cpath%20d%3D%27m16%2016%204.5%204.5%27%2F%3E%3C%2Fsvg%3E")}
.icon.send,.cb-ico.send{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27M21%203%2010%2014M21%203l-7%2018-4-7-7-4%2018-7z%27%2F%3E%3C%2Fsvg%3E")}
.icon.sticker,.cb-ico.sticker{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27M20%2012V7.5A3.5%203.5%200%200%200%2016.5%204h-9A3.5%203.5%200%200%200%204%207.5v9A3.5%203.5%200%200%200%207.5%2020H12l8-8z%27%2F%3E%3Cpath%20d%3D%27M12%2020v-4.5a3.5%203.5%200%200%201%203.5-3.5H20M8.5%209.5v1M13%209.5v1%27%2F%3E%3C%2Fsvg%3E")}
.icon.trash,.cb-ico.trash{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27M4%207h16M9%207V5a1%201%200%200%201%201-1h4a1%201%200%200%201%201%201v2M6.5%207l1%2012.5A1.5%201.5%200%200%200%209%2021h6a1.5%201.5%200%200%200%201.5-1.5L17.5%207M10%2011v6M14%2011v6%27%2F%3E%3C%2Fsvg%3E")}
.icon.video,.cb-ico.video{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Crect%20x%3D%273%27%20y%3D%276%27%20width%3D%2712%27%20height%3D%2712%27%20rx%3D%272.5%27%2F%3E%3Cpath%20d%3D%27m15%2010%206-3.5v11L15%2014%27%2F%3E%3C%2Fsvg%3E")}
.icon.volume,.cb-ico.volume{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27M4%209.5v5h3.5l4.5%204v-13l-4.5%204H4z%27%2F%3E%3Cpath%20d%3D%27M16%209a4.5%204.5%200%200%201%200%206M18.5%206.5a8%208%200%200%201%200%2011%27%2F%3E%3C%2Fsvg%3E")}
.icon.warning,.cb-ico.warning{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27M12%203.5%2021.5%2020h-19L12%203.5z%27%2F%3E%3Cpath%20d%3D%27M12%2010v4.5M12%2017.5h.01%27%2F%3E%3C%2Fsvg%3E")}
.icon.cb-ap-vol-icon,.cb-ico.cb-ap-vol-icon{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27M4%209.5v5h3.5l4.5%204v-13l-4.5%204H4z%27%2F%3E%3Cpath%20d%3D%27M16%209a4.5%204.5%200%200%201%200%206M18.5%206.5a8%208%200%200%201%200%2011%27%2F%3E%3C%2Fsvg%3E")}
.icon.save,.cb-ico.save{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27M12%204v11M7%2010.5l5%205%205-5M5%2020h14%27%2F%3E%3C%2Fsvg%3E")}
#cb-radial .cbr-ico-0{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27m21%2011.5-8.6%208.6a5.5%205.5%200%200%201-7.8-7.8l8.6-8.6a3.7%203.7%200%200%201%205.2%205.2l-8.6%208.6a1.8%201.8%200%200%201-2.6-2.6l7.9-7.9%27%2F%3E%3C%2Fsvg%3E")}
#cb-radial .cbr-ico-1{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Crect%20x%3D%273%27%20y%3D%274%27%20width%3D%2718%27%20height%3D%2716%27%20rx%3D%272.5%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%279.5%27%20r%3D%271.6%27%2F%3E%3Cpath%20d%3D%27m3.5%2017%205-5%204%204%203-3%205%205%27%2F%3E%3C%2Fsvg%3E")}
#cb-radial .cbr-ico-2{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27M20%2012V7.5A3.5%203.5%200%200%200%2016.5%204h-9A3.5%203.5%200%200%200%204%207.5v9A3.5%203.5%200%200%200%207.5%2020H12l8-8z%27%2F%3E%3Cpath%20d%3D%27M12%2020v-4.5a3.5%203.5%200%200%201%203.5-3.5H20M8.5%209.5v1M13%209.5v1%27%2F%3E%3C%2Fsvg%3E")}
#cb-radial .cbr-ico-3{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Crect%20x%3D%272.5%27%20y%3D%275.5%27%20width%3D%2719%27%20height%3D%2713%27%20rx%3D%273%27%2F%3E%3Cpath%20d%3D%27M10.6%2010.6a2.1%202.1%200%200%200-1.8-1.1%202.5%202.5%200%200%200%200%205%202.1%202.1%200%200%200%202.2-2.1H9.2%27%2F%3E%3Cpath%20d%3D%27M13.4%209.5v5M18.4%209.5h-2.6v5M15.8%2012h2.2%27%2F%3E%3C%2Fsvg%3E")}
#cb-radial .cbr-ico-4{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%3Cpath%20d%3D%27M9%2018V6.5L20%204.5V16%27%2F%3E%3Ccircle%20cx%3D%276.5%27%20cy%3D%2718%27%20r%3D%272.5%27%2F%3E%3Ccircle%20cx%3D%2717.5%27%20cy%3D%2716%27%20r%3D%272.5%27%2F%3E%3C%2Fsvg%3E")}

:root {
    color-scheme: dark;
    --bg: #000;
    --surface-1: #0c0c0c;
    --surface-2: #161616;
    --surface-3: #202020;
    --surface-4: #2b2b2b;
    --border-1: #232323;
    --border-2: #333;
    --border-3: #4a4a4a;
    --text: #f5f5f5;
    --text-2: #ababab;
    --text-3: #8a8a8a;
    --text-4: #6e6e6e;
    --blue: #2563eb;
    --blue-hover: #3b73f0;
    --blue-press: #1d4fd0;
    --on-blue: #fff;
    --on-blue-2: #f2f6ff;
    --link: #7aa7ff;
    --success: #3ecf8e;
    --danger: #ff6161;
    --warn: #f2b441;
    --own-bubble: var(--blue);
    --own-bubble-brd: transparent;
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-md: 15px;
    --fs-lg: 17px;
    --fs-xl: 22px;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --ease-out: cubic-bezier(.23, 1, .32, 1);
    --ease-io: cubic-bezier(.77, 0, .175, 1);
    --dur-fast: 120ms;
    --dur-quick: 160ms;
    --dur-med: 220ms;
    --dur-flow: 280ms;
    --ease-smooth: var(--ease-out);
    --ease-spring: var(--ease-out);
    --ease-bounce: var(--ease-out);
    --dur-swell: 280ms;
    --col: 760px;
    --gutter: 12px;
    --header-h: 56px;
    --tap: 44px;
    --media-w: 320px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100dvh;
    margin: 0;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font: 400 var(--fs-md)/1.4 var(--font);
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { margin: 0; padding: 0; background: none; border: 0; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; opacity: .4; }
a { color: var(--link); }
img, video, canvas { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible, [contenteditable]:focus-visible, #nav-drawer:focus-visible { outline: none; }
.cb-dock-row:focus-visible, .cb-mi:focus-visible, .cb-folder:focus-visible, .nav-item:focus-visible, .cb-panel-tab:focus-visible { outline-offset: -2px; outline-color: var(--text-3); }
.bubble :focus-visible, #send-btn:focus-visible { outline-color: var(--on-blue); }

::selection { background: var(--blue); color: var(--on-blue); }

* { scrollbar-width: thin; scrollbar-color: var(--surface-4) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: var(--radius-pill); }
::-webkit-scrollbar-track { background: transparent; }

.hidden, [hidden] { display: none !important; }

.btn-icon {
    display: inline-grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    border-radius: var(--radius-pill);
    color: var(--text-2);
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .btn-icon:hover { background: var(--surface-3); color: var(--text); }
}
.btn-icon:active { transform: scale(.94); background: var(--surface-3); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

#join-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    height: 100dvh;
    text-align: center;
}
#join-screen h1 { font-size: var(--fs-xl); font-weight: 600; }
#join-screen p { color: var(--text-2); font-size: var(--fs-sm); }

#chat-screen {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100dvh;
    background: var(--bg);
}

#header {
    position: relative;
    z-index: 5;
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--header-h);
    padding: 0 var(--gutter) 0 6px;
    background: var(--bg);
    border-bottom: 1px solid var(--border-1);
}
#nav-menu-btn {
    display: grid;
    place-items: center;
    flex: none;
    width: var(--tap);
    height: var(--tap);
    border-radius: var(--radius-pill);
    color: var(--text);
    transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
#nav-menu-btn:active { transform: scale(.94); background: var(--surface-3); }
@media (hover: hover) and (pointer: fine) { #nav-menu-btn:hover { background: var(--surface-3); } }
.nav-burger {
    display: block;
    width: 22px;
    height: 22px;
    background: currentColor;
    -webkit-mask: var(--menu-mask) center/contain no-repeat;
    mask: var(--menu-mask) center/contain no-repeat;
}
.nav-burger > span { display: none; }
#chat-logo { flex: none; width: 28px; height: 28px; border-radius: var(--radius-xs); image-rendering: auto; }
#header h1 { flex: none; font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em; }

#presence-bar {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
#presence-bar::-webkit-scrollbar { display: none; }
.presence-pill {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px 0 4px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-weight: 500;
}
.presence-avatar, .msg-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--surface-4) !important;
    color: var(--text) !important;
    font-size: 11px;
    font-weight: 600;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.presence-avatar img, .msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.status-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--text-4); }
.status-dot.online { background: var(--success); }
.status-dot.offline { background: var(--text-4); }
.presence-name { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) {
    .presence-name { display: none; }
    .presence-pill { padding: 0 8px 0 4px; }
}

#messages {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-anchor: auto;
    overscroll-behavior: contain;
    padding: 12px max(var(--gutter), calc((100% - var(--col)) / 2)) 16px;
    scroll-padding-bottom: 16px;
}

.message {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: none;
    margin-top: 14px;
    contain: layout style;
}
.message.grouped { margin-top: 2px; }
.message.own-message { align-items: flex-end; }
#messages > :first-child { margin-top: 0; }

.msg-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px 2px;
    min-height: 22px;
}
.msg-head .msg-avatar { width: 24px; height: 24px; }
.username { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2) !important; }
.own-message > .msg-head { display: none; }
.edit-meta { display: none; }

.bubble {
    position: relative;
    display: block;
    max-width: min(78%, 560px);
    padding: 8px 12px 7px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    color: var(--text);
    font-size: var(--fs-md);
    line-height: 1.4;
    overflow-wrap: anywhere;
    word-break: normal;
    white-space: pre-wrap;
}
.own-message > .bubble { background: var(--blue); color: var(--on-blue); }
.message:not(.own-message).grouped > .bubble { border-top-left-radius: 6px; }
.message.own-message.grouped > .bubble { border-top-right-radius: 6px; }
.message:not(.own-message):has(+ .message:not(.own-message).grouped) > .bubble { border-bottom-left-radius: 6px; }
.message.own-message:has(+ .message.own-message.grouped) > .bubble { border-bottom-right-radius: 6px; }

.bubble-text { white-space: pre-wrap; }
.timestamp {
    float: right;
    margin: 7px 0 -2px 12px;
    font-size: var(--fs-xs);
    line-height: 1;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    user-select: none;
}
.own-message .timestamp { color: var(--on-blue-2); }
.edited-badge { margin-right: 4px; }
.chat-link { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.own-message .chat-link { color: var(--on-blue); }

.reply-quote {
    display: block;
    margin: 0 0 6px;
    padding: 4px 8px;
    border-left: 3px solid var(--text-3);
    border-radius: 2px var(--radius-xs) var(--radius-xs) 2px;
    background: var(--surface-3);
    cursor: pointer;
    overflow: hidden;
}
.own-message .reply-quote { border-left-color: var(--on-blue); background: var(--blue-press); }
.reply-quote-user { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.reply-quote-text { display: block; font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.own-message .reply-quote-user, .own-message .reply-quote-text { color: var(--on-blue-2); }

.bubble-deleted { background: transparent !important; border: 1px solid var(--border-2); color: var(--text-3) !important; }
.deleted-text { font-style: italic; font-size: var(--fs-sm); }
.bubble.editing { outline: 2px solid var(--on-blue); outline-offset: 0; }
.edit-remaining { font-size: var(--fs-xs); color: var(--on-blue-2); }
.edit-hint { display: none; }
.message.keyboard-focused > .bubble { outline: 2px solid var(--text); outline-offset: 2px; }
.message.highlight-flash > .bubble { animation: cb-flash 1.1s var(--ease-out); }
@keyframes cb-flash { 0% { box-shadow: 0 0 0 3px var(--text); } 100% { box-shadow: 0 0 0 3px transparent; } }
.cb-deleting { opacity: 0; transition: opacity var(--dur-med) var(--ease-out); }

.msg-actions { display: none !important; }

.message.msg-enter { animation: cb-msg-in var(--dur-quick) var(--ease-out) both; }
@keyframes cb-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.date-separator {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 8px;
    color: var(--text-3);
    font-size: var(--fs-xs);
    font-weight: 500;
    text-transform: none;
}
.date-separator::before, .date-separator::after { content: ""; flex: 1; height: 1px; background: var(--border-1); }
.date-separator:first-child { margin-top: 4px; }

.system-message {
    align-self: center;
    margin: 12px 0 4px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: var(--fs-xs);
    text-align: center;
}

.unread-divider {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 6px;
    color: var(--text);
    font-size: var(--fs-xs);
    font-weight: 600;
    transition: opacity var(--dur-flow) var(--ease-out);
}
.unread-divider::before, .unread-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-3); }
.unread-divider-fading { opacity: 0; }

/* media — every box reserves its final size before a byte loads */
.bubble-file { width: min(var(--media-w), 78%); padding: 4px 4px 7px; }
.bubble-file > .bubble-caption { padding: 6px 8px 0; white-space: pre-wrap; }
.bubble-file > .timestamp { float: none; display: block; margin: 5px 8px 0 0; text-align: right; }
.bubble-file > .reply-quote { margin: 4px 4px 6px; }

.bubble-file .chat-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--ar, 4 / 3);
    object-fit: cover;
    border-radius: calc(var(--radius-lg) - 4px);
    background: var(--surface-3);
}
.own-message .bubble-file .chat-image { background: var(--surface-3); }
.ms-fade { opacity: 0; transition: opacity var(--dur-quick) var(--ease-out); }
.ms-fade.ms-loaded { opacity: 1; }

.gif-container {
    position: relative;
    width: 100%;
    aspect-ratio: var(--ar, 4 / 3);
    border-radius: calc(var(--radius-lg) - 4px);
    overflow: hidden;
    background: var(--surface-3);
}
.gif-container .chat-image { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; border-radius: 0; }
.gif-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.video-thumbnail-container {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: var(--ar, 16 / 9);
    border-radius: calc(var(--radius-lg) - 4px);
    overflow: hidden;
    background: var(--surface-3);
    color: var(--on-blue);
    cursor: pointer;
}
.own-message .video-thumbnail-container { background: var(--surface-3); }
.video-thumbnail-container .video-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-thumbnail-container .icon.play {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    padding: 15px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .66);
    -webkit-mask: none;
    mask: none;
    background-clip: padding-box;
}
.video-name { display: none; }


.file-block { display: block; }
.file-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 2px 0;
    color: inherit;
    text-decoration: none;
    font-size: var(--fs-md);
    font-weight: 500;
}
.file-link .icon {
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--radius-sm);
    background-color: var(--surface-4);
    color: var(--text);
    -webkit-mask: none;
    mask: none;
}
.file-link .icon::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: currentColor;
    -webkit-mask: var(--i) center/20px no-repeat;
    mask: var(--i) center/20px no-repeat;
}
.own-message .file-link .icon { background-color: var(--blue-press); }
.file-link > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bubble:has(> .file-block) { min-width: min(240px, 78%); }

/* link / youtube card */
.bubble-youtube { width: min(var(--media-w), 78%); padding: 4px 4px 8px; }
.yt-bubble-thumb-wrap {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: calc(var(--radius-lg) - 4px);
    overflow: hidden;
    background: var(--surface-3);
    cursor: pointer;
}
.yt-bubble-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; }
.yt-bubble-play-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}
.yt-bubble-play-overlay .icon.play {
    width: 52px;
    height: 52px;
    padding: 14px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .66);
    color: var(--on-blue);
    -webkit-mask: none;
    mask: none;
    position: relative;
}
.video-thumbnail-container .icon.play::before,
.yt-bubble-play-overlay .icon.play::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--on-blue);
    -webkit-mask: var(--i) center/22px no-repeat;
    mask: var(--i) center/22px no-repeat;
}
.yt-bubble-meta { padding: 8px 8px 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.yt-bubble-title { font-size: var(--fs-md); font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-bubble-channel-row { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); }
.own-message .yt-bubble-channel-row { color: var(--on-blue-2); }
.yt-bubble-channel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


.yt-inline-audio-preview { display: none; }

/* floating chat chrome */
#typing-indicator {
    flex: none;
    height: 20px;
    min-height: 20px;
    padding: 0 max(var(--gutter), calc((100% - var(--col)) / 2));
    color: var(--text-3);
    font-size: var(--fs-xs);
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#scroll-to-bottom-btn {
    position: absolute;
    right: max(var(--gutter), calc((100% - var(--col)) / 2 + var(--gutter)));
    bottom: calc(100% + 8px);
    z-index: 4;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px 0 10px;
    border: 1px solid var(--border-3);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 500;
    animation: cb-pop-in var(--dur-quick) var(--ease-out) both;
}
#scroll-to-bottom-btn:active { transform: scale(.96); }
@keyframes cb-pop-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

#conn-banner {
    position: sticky;
    top: 8px;
    z-index: 6;
    flex: none;
    align-self: center;
    align-items: center;
    gap: 8px;
    height: 32px;
    margin: 0 0 -32px;
    padding: 0 14px;
    border: 1px solid var(--border-3);
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    color: var(--text);
    font-size: var(--fs-sm);
    white-space: nowrap;
}
#conn-banner .icon.warning { color: var(--danger); }

#toast-container {
    position: fixed;
    top: calc(var(--header-h) + 12px + env(safe-area-inset-top, 0px));
    left: 50%;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transform: translateX(-50%);
    pointer-events: none;
}
.toast {
    max-width: min(92vw, 420px);
    padding: 10px 16px;
    border: 1px solid var(--border-3);
    border-radius: var(--radius-md);
    background: var(--surface-3);
    color: var(--text);
    font-size: var(--fs-sm);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-out);
}
.toast.show { opacity: 1; transform: none; }

#drop-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--bg);
    color: var(--text);
    font-size: var(--fs-lg);
    font-weight: 500;
    pointer-events: none;
}
#drop-overlay::before { content: ""; position: absolute; inset: 16px; border: 2px dashed var(--border-3); border-radius: var(--radius-lg); }
#drop-overlay .icon.attach { width: 40px; height: 40px; }

#upload-progress {
    flex: none;
    display: block;
    width: 100%;
    height: 2px;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
}
#upload-progress::-webkit-progress-bar { background: transparent; }
#upload-progress::-webkit-progress-value { background: var(--blue); }
#upload-progress::-moz-progress-bar { background: var(--blue); }

#bottom-zone {
    position: relative;
    flex: none;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border-top: 1px solid var(--border-1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
#bottom-zone > #reply-bar,
#bottom-zone > #attachment-preview {
    width: min(100%, var(--col));
    margin-inline: auto;
}

#reply-bar {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 0 var(--gutter);
}
#reply-bar-inner {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px 0 2px 10px;
    border-left: 3px solid var(--blue);
    overflow: hidden;
}
#reply-bar-label { display: none; }
#reply-bar-user { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
#reply-bar-text { font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#reply-bar-close {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--text-2);
}
#reply-bar-close:active { background: var(--surface-3); }
@media (hover: hover) { #reply-bar-close:hover { background: var(--surface-3); color: var(--text); } }

#attachment-preview {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px var(--gutter) 0;
}
#preview-list {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 12px;
    padding: 9px 10px 2px 2px;
    overflow-x: auto;
    scrollbar-width: none;
}
#preview-list::-webkit-scrollbar { display: none; }
.preview-item {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 56px;
    max-width: 200px;
    padding: 0;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    overflow: visible;
}
.preview-img, .preview-video-thumb {
    display: block;
    width: 56px;
    height: 56px;
    max-width: none;
    max-height: none;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--surface-3);
}
.preview-video-thumb { position: relative; overflow: hidden; }
.preview-video-thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.preview-video-play { position: absolute; inset: 0; display: grid; place-items: center; color: var(--on-blue); }
.preview-video-play .icon { width: 22px; height: 22px; }
.preview-icon { display: grid; place-items: center; width: 56px; height: 56px; color: var(--text-2); }
.preview-media-btn {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    margin-left: 10px;
    border-radius: 50%;
    background: var(--surface-4);
    color: var(--text);
}
.preview-item.is-playing .preview-media-btn { background: var(--text); color: var(--bg); }
.preview-name { max-width: 96px; padding-right: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); color: var(--text); }
.preview-remove {
    position: absolute;
    top: -7px;
    right: -7px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 2px solid var(--bg);
    border-radius: 50%;
    background: var(--text);
    color: var(--bg);
}
.preview-remove .icon { width: 12px; height: 12px; color: var(--bg); }
.preview-item.is-pending { opacity: .7; }
.preview-spinner { width: 16px; height: 16px; margin: 0 20px; border: 2px solid var(--border-3); border-top-color: var(--text); border-radius: 50%; animation: preview-spin .8s linear infinite; }
@keyframes preview-spin { to { transform: rotate(360deg); } }
.preview-item.is-error { outline: 1px solid var(--danger); }
.preview-item.is-error .preview-icon.warning, .preview-item.is-error .preview-name { color: var(--danger); }
.preview-item:not(.is-pending):not(.is-error) { touch-action: none; }
.preview-item.is-dragging { opacity: .6; z-index: 5; }
#cancel-attach, #cb-composer-open-btn {
    flex: none;
    height: 32px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 500;
}
@media (hover: hover) { #cancel-attach:hover, #cb-composer-open-btn:hover { background: var(--surface-3); } }

#bottom-bar {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    margin: 8px auto;
    padding: 4px;
    width: min(calc(100% - 2 * var(--gutter)), calc(var(--col) - 2 * var(--gutter)));
    border-radius: 26px;
    background: var(--surface-2);
    transition: background-color var(--dur-fast) var(--ease-out);
}
#bottom-bar:focus-within { background: var(--surface-3); }
#attach-btn, #media-picker-btn, #sticker-toggle-btn, #gif-toggle-btn, #music-toggle-btn, #cb-dock-btn {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--text-2);
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
#attach-btn:active, #media-picker-btn:active, #sticker-toggle-btn:active, #gif-toggle-btn:active, #music-toggle-btn:active, #cb-dock-btn:active { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) {
    #attach-btn:hover, #media-picker-btn:hover, #sticker-toggle-btn:hover, #gif-toggle-btn:hover, #music-toggle-btn:hover, #cb-dock-btn:hover { background: var(--surface-4); color: var(--text); }
}
#media-picker-btn { display: none; }
.cb-dock-row > #media-picker-btn { display: grid; }
#attach-btn .icon, #media-picker-btn .icon, #sticker-toggle-btn .icon, #gif-toggle-btn .icon, #music-toggle-btn .icon { width: 22px; height: 22px; }
#gif-toggle-btn .icon.gif { width: 24px; height: 24px; }
#add { display: none; }

.cb-plus {
    display: block;
    width: 22px;
    height: 22px;
    background: currentColor;
    -webkit-mask: var(--add-mask) center/contain no-repeat;
    mask: var(--add-mask) center/contain no-repeat;
    transition: transform var(--dur-med) var(--ease-out);
}
#cb-dock-btn[aria-expanded="true"] .cb-plus { transform: rotate(45deg); }

#message-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    max-height: 140px;
    padding: 9px 8px;
    overflow-y: auto;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 16px;
    line-height: 22px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    -webkit-user-select: text;
    user-select: text;
}
#message-input:empty::before { content: attr(placeholder); color: var(--text-3); pointer-events: none; }

#send-btn {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--blue);
    color: var(--on-blue);
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
#send-btn .icon { width: 20px; height: 20px; color: var(--on-blue); background-color: currentColor; margin: 0 2px 0 0; }
#send-btn:active { transform: scale(.92); background: var(--blue-press); }
@media (hover: hover) and (pointer: fine) { #send-btn:hover { background: var(--blue-hover); } }
#message-input:empty ~ #send-btn { background: var(--surface-4); color: var(--text-3); }
#message-input:empty ~ #send-btn .icon { color: var(--text-3); }
#bottom-zone:has(.preview-item) #message-input:empty ~ #send-btn { background: var(--blue); color: var(--on-blue); }
#bottom-zone:has(.preview-item) #message-input:empty ~ #send-btn .icon { color: var(--on-blue); }

#cb-dock {
    position: fixed;
    z-index: 210;
    display: none;
    flex-direction: column;
    min-width: 220px;
    padding: 6px;
    border: 1px solid var(--border-3);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    opacity: 0;
    transform: scale(.96);
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-quick) var(--ease-out);
}
#cb-dock.is-mounted { display: flex; }
#cb-dock.is-open { opacity: 1; transform: none; }
.cb-dock-head, .cb-dock-key { display: none; }
.cb-dock-row {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 46px;
    padding: 0 12px 0 4px;
    border-radius: var(--radius-sm);
    color: var(--text);
    cursor: pointer;
}
.cb-dock-row > button { pointer-events: none; display: grid; place-items: center; width: 40px; height: 40px; color: var(--text); }
.cb-dock-row > button .icon { width: 22px; height: 22px; }
.cb-dock-lbl { font-size: var(--fs-md); font-weight: 500; }
.cb-dock-row:active, .cb-dock-row:focus-visible { background: var(--surface-4); }
@media (hover: hover) { .cb-dock-row:hover { background: var(--surface-3); } }

/* panels */
.cb-panel {
    flex: none;
    display: none;
    flex-direction: column;
    width: min(100%, var(--col));
    height: min(52dvh, 380px);
    margin-inline: auto;
    background: var(--bg);
    border-bottom: 1px solid var(--border-1);
    animation: cb-panel-in var(--dur-med) var(--ease-out) both;
}
@keyframes cb-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cb-panel-header {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 48px;
    padding: 0 8px 0 var(--gutter);
    border-bottom: 1px solid var(--border-1);
}
.cb-panel-title { font-size: var(--fs-md); font-weight: 600; }
.cb-panel-header-actions { display: flex; flex: none; align-items: center; gap: 4px; margin-left: auto; }
.cb-panel-tabs { display: flex; flex: 1 1 auto; align-items: center; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cb-panel-tabs::-webkit-scrollbar { display: none; }
/* Add-music lives in the header on desktop (Local tab only), like the sticker panel.
   On phones the add affordance is the bottom row in the list (renderActiveMusicList). */
#music-manager-panel .cb-panel-upload { display: none; }
@media (min-width: 821px) {
    #music-manager-panel:not([data-tab="youtube"]):not([data-tab="ytdlp"]) .cb-panel-upload { display: inline-flex; align-items: center; }
}
.cb-panel-tab {
    height: 32px;
    padding: 0 14px;
    border-radius: var(--radius-pill);
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-weight: 500;
    white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cb-panel-tab.is-active { background: var(--text); color: var(--bg); }
@media (hover: hover) { .cb-panel-tab:not(.is-active):hover { background: var(--surface-3); color: var(--text); } }
.cb-panel-upload, .cb-panel-newfolder {
    height: 32px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 500;
    white-space: nowrap;
}
@media (hover: hover) { .cb-panel-upload:hover, .cb-panel-newfolder:hover { background: var(--surface-4); } }
.panel-close-btn {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--text-2);
}
.panel-close-btn:active { background: var(--surface-3); }
@media (hover: hover) { .panel-close-btn:hover { background: var(--surface-3); color: var(--text); } }
.cb-panel-mode-banner {
    flex: none;
    display: none;
    align-items: center;
    padding: 8px var(--gutter);
    border-bottom: 1px solid var(--border-1);
    color: var(--text-2);
    font-size: var(--fs-sm);
}
.cb-panel-body { position: relative; flex: 1; min-height: 0; display: flex; }
.cb-panel-body--column { flex-direction: column; }
.cb-panel-folders {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 132px;
    padding: 8px;
    border-right: 1px solid var(--border-1);
    overflow-y: auto;
}
.cb-panel-folders-toggle, .cb-folders-handle { display: none; }
.cb-panel-content { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 8px; }
.cb-panel-dropzone { display: none !important; }
.cb-panel-grid { display: grid; gap: 6px; align-content: start; }
.cb-panel-grid--sticker { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cb-panel-grid--sticker .cb-sticker-tile {
    position: relative;
    min-width: 0;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--surface-1);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
/* The tile is the control. The media inside never takes pointer events: a
   paused GIF is visibility:hidden and could not be hit-tested anyway. */
.cb-panel-grid--sticker .cb-sticker-tile > img,
.cb-panel-grid--sticker .cb-sticker-tile > video {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: contain;
    padding: 6px;
    background: transparent;
    border-radius: 0;
    pointer-events: none;
}
/* Frozen-frame poster must frame the sticker exactly like the live image. */
.cb-panel-grid--sticker .cb-sticker-tile > .gif-poster { object-fit: contain; padding: 6px; box-sizing: border-box; }
.cb-panel-grid--sticker .cb-sticker-tile:focus-visible { outline-offset: -2px; }
.cb-panel-grid--sticker .cb-sticker-tile:not(.cb-sticker-tile--placeholder):not(.cb-sticker-tile--pending):active { background: var(--surface-4); }
@media (hover: hover) { .cb-panel-grid--sticker .cb-sticker-tile:not(.cb-sticker-tile--placeholder):not(.cb-sticker-tile--pending):hover { background: var(--surface-3); } }

/* Pending upload tile: dimmed preview of the local file, a bar tied to real bytes
   sent, then an indeterminate sweep while the server compresses. */
.cb-panel-grid--sticker .cb-sticker-tile--pending { cursor: default; }
.cb-panel-grid--sticker .cb-sticker-tile--pending[data-phase="error"] { cursor: pointer; }
.cb-sticker-tile--pending > img, .cb-sticker-tile--pending > video { opacity: .4; }
.cb-sticker-pending-bar {
    position: absolute; left: 10px; right: 10px; bottom: 24px; height: 3px;
    overflow: hidden; border-radius: 2px; background: var(--surface-4);
}
.cb-sticker-pending-fill {
    display: block; width: 100%; height: 100%; background: var(--text);
    transform: scaleX(0); transform-origin: left center;
    transition: transform var(--dur-quick) linear;
}
.cb-sticker-tile--pending[data-phase="processing"] .cb-sticker-pending-fill {
    width: 40%; transform: none; transition: none;
    animation: cb-sticker-sweep 1.1s linear infinite;
}
.cb-sticker-tile--pending[data-phase="error"] .cb-sticker-pending-fill { background: var(--danger); transform: scaleX(1); }
.cb-sticker-pending-label {
    position: absolute; left: 0; right: 0; bottom: 6px; text-align: center;
    font-family: var(--font-mono); font-size: 10px; line-height: 1.2; color: var(--text-2);
}
.cb-sticker-tile--pending[data-phase="error"] .cb-sticker-pending-label { color: var(--danger); }
@keyframes cb-sticker-sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) {
    .cb-sticker-pending-fill { transition: none; }
    /* No looping motion: a full static bar plus the "Compressing" text says the same thing. */
    .cb-sticker-tile--pending[data-phase="processing"] .cb-sticker-pending-fill { width: 100%; animation: none; opacity: .5; }
}

/* Drop hint: covers the panel body while files are dragged over it. It never
   takes pointer events, so the drag keeps targeting the panel underneath. */
.cb-drop-hint {
    position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
    padding: 8px; background: var(--surface-1); pointer-events: none;
    opacity: 0; visibility: hidden;
    transition: opacity var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}
.cb-drop-hint.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.cb-drop-hint-box {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    width: 100%; height: 100%; padding: 12px; text-align: center;
    border: 1px dashed var(--text-3); border-radius: var(--radius-sm);
}
.cb-drop-hint-title { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.cb-drop-hint-folder { text-transform: capitalize; }
.cb-drop-hint-sub { font-size: var(--fs-xs); color: var(--text-3); }
.cb-panel-grid--sticker .cb-sticker-tile--placeholder {
    background: var(--surface-2);
    cursor: default;
}
.cb-panel-grid--sticker .cb-sticker-load-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.cb-panel-grid--gif { grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 0 8px 8px; overflow-y: auto; flex: 1; min-height: 0; }
.cb-panel-grid--music, .cb-panel-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; min-height: 0; padding: 4px 8px 8px; }
.cb-panel-grid img, .cb-panel-grid video {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    cursor: pointer;
}
.cb-panel-grid--gif img { aspect-ratio: 4 / 3; }
.cb-panel-searchrow { flex: none; display: flex; gap: 8px; padding: 8px; }
.cb-panel-search {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-pill);
    background: var(--surface-1);
    font-size: 16px;
}
.cb-panel-search:focus { border-color: var(--text-2); }
.cb-panel-search::placeholder { color: var(--text-3); }
/* Same box as the input it replaces (see upgradeSearchFields in index.js). */
.cb-panel-search--editable {
    display: block; box-sizing: border-box; line-height: 38px; overflow: hidden; white-space: nowrap;
    color: var(--text); font-family: inherit; outline: none; cursor: text;
    -webkit-user-select: text; user-select: text;
}
.cb-panel-search--editable:empty::before { content: attr(data-placeholder); color: var(--text-3); pointer-events: none; }

.cb-panel-searchbtn {
    flex: none;
    height: 40px;
    padding: 0 16px;
    border-radius: var(--radius-pill);
    background: var(--text);
    color: var(--bg);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.music-local-item, .yt-result-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
@media (hover: hover) { .music-local-item:hover, .yt-result-card:hover { background: var(--surface-2); } }
.music-local-item:active, .yt-result-card:active { background: var(--surface-3); }
.music-local-item .icon.file { flex: none; color: var(--text-2); }
.music-local-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-md); }
.music-local-play-btn, .music-local-del-btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--text-2); flex: none; }
.music-local-del-btn.is-armed { background: var(--danger); color: var(--bg); }
.music-local-add-row { padding: 4px 8px; }
/* Pending upload row: name, status text, and a bar along the bottom edge tied to real bytes sent. */
.music-local-item--pending { position: relative; cursor: default; padding: 12px 12px 14px 56px; }   /* 56 = the play button + gap, so names line up with real rows */
@media (hover: hover) { .music-local-item--pending:hover { background: transparent; } }
.music-local-item--pending:active { background: transparent; }
.music-local-item--pending[data-phase="error"] { cursor: pointer; }
.music-pending-status { flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--text-2); }
.music-local-item--pending[data-phase="error"] .music-pending-status { color: var(--danger); }
.music-pending-bar {
    position: absolute; left: 56px; right: 12px; bottom: 4px; height: 2px;
    overflow: hidden; border-radius: 1px; background: var(--surface-4);
}
.music-pending-fill {
    display: block; width: 100%; height: 100%; background: var(--text);
    transform: scaleX(0); transform-origin: left center;
    transition: transform var(--dur-quick) linear;
}
.music-local-item--pending[data-phase="processing"] .music-pending-fill { transform: scaleX(1); transition: none; }
.music-local-item--pending[data-phase="error"] .music-pending-fill { background: var(--danger); transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .music-pending-fill { transition: none; } }
.yt-result-card {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border-1);
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.yt-result-card-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.yt-result-thumb-wrap { position: relative; flex: none; width: 112px; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-3); }
.yt-result-thumb-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; }
.yt-result-thumb-wrap iframe { display: block; width: 100%; height: 100%; border: 0; }
.yt-result-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.yt-result-title { font-size: 13px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-result-channel { font-size: 11px; color: var(--text-2); }
.yt-result-hint { display: none; }
.yt-load-sentinel { height: 1px; }
.yt-load-more-wrap { display: grid; place-items: center; padding: 8px; }
/* Only the fallback stays hidden. Active preview classes belong on visible cards. */
.yt-embed-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    min-height: 112px;
    padding: 16px;
    background: var(--surface-1);
    color: var(--text-2);
    text-align: center;
    font-size: 12px;
}
.yt-embed-fallback a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.yt-result-card.yt-card-audio-preview { border-color: var(--border-3); background: var(--surface-2); }
.yt-card-audio-preview .yt-result-thumb-wrap { width: 112px; }
.yt-inline-audio-preview { display: none; min-width: 0; margin-top: 8px; }
.yt-card-audio-preview .yt-inline-audio-preview { display: flex; width: 100%; }
.yt-card-audio-preview .yt-inline-audio-preview audio { display: block; width: 100%; max-width: 100%; min-width: 0; height: 38px; }
.yt-result-card.yt-card-live-preview { border-color: var(--border-3); background: var(--surface-2); }
.yt-card-live-preview .yt-result-card-main { flex-direction: column; align-items: stretch; }
.yt-card-live-preview .yt-result-thumb-wrap { align-self: center; width: 100%; max-width: 720px; aspect-ratio: 16 / 9; }
.yt-card-live-preview .yt-result-info { width: 100%; }
.yt-preview-play-btn { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(0,0,0,.28); color: #fff; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out); }
.yt-preview-play-btn:hover { background: rgba(0,0,0,.42); }
.yt-preview-play-btn .icon.play { width: 24px; height: 24px; }
.yt-result-card:focus-visible { outline: 2px solid var(--text-2); outline-offset: 2px; }
.cb-folder {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cb-folder > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.cb-folder .icon { flex: none; }
.cb-folder.is-active { background: var(--surface-3); color: var(--text); }
@media (hover: hover) { .cb-folder:not(.is-active):hover { background: var(--surface-2); color: var(--text); } }
.cb-panel-end { grid-column: 1 / -1; padding: 14px; text-align: center; color: var(--text-3); font-size: var(--fs-xs); }
.cb-panel-retry { grid-column: 1 / -1; justify-self: center; height: 36px; margin: 10px 0; padding: 0 18px; border: 1px solid var(--danger); border-radius: var(--radius-pill); color: var(--danger); font-size: var(--fs-sm); }
.cb-panel-grid img, .cb-panel-grid video { padding: 0; }
.cb-panel-grid--sticker img, .cb-panel-grid--sticker video { object-fit: contain; padding: 6px; background: var(--surface-1); }
.yt-bubble-channel-row .timestamp { float: none; margin: 0 0 0 auto; }
.cb-panel-empty { grid-column: 1 / -1; padding: 28px 16px; text-align: center; color: var(--text-3); font-size: var(--fs-sm); }

.bubble-audio { width: min(320px, 82%); padding: 10px 10px 8px; white-space: normal; }
.bubble-audio .audio-row, .bubble-audio .audio-info { display: block; margin: 0; padding: 0; }
.bubble-audio .audio-name { display: none; }
.cb-audio-engine { display: none; }
.bubble-audio > .timestamp { float: none; display: block; margin: 2px 2px 0 0; text-align: right; }

.cb-audio-player {
    position: relative;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 10px;
    align-items: start;
    min-height: 160px;
    color: inherit;
}
.cb-ap-main { display: contents; }
.cb-ap-art {
    position: relative;
    grid-column: 1;
    width: 104px;
    height: 104px;
    border-radius: var(--radius-md);
    background: var(--surface-4);
    overflow: hidden;
}
.own-message .cb-ap-art { background: var(--surface-3); }
.cb-ap-art::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 44px;
    height: 44px;
    background: var(--text-3);
    -webkit-mask: var(--album-mask) center/contain no-repeat;
    mask: var(--album-mask) center/contain no-repeat;
}
.own-message .cb-ap-art::before { background: var(--text-3); }
.cb-audio-player.has-art .cb-ap-art::before { display: none; }
.cb-ap-art-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cb-ap-title-row { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.cb-ap-play {
    position: static;
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    margin-top: -3px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    color: var(--text);
    transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.own-message .cb-ap-play { background: var(--on-blue); border-color: var(--on-blue); }
.cb-ap-play .icon { width: 16px; height: 16px; background-color: var(--text); }
.cb-ap-play:active { transform: scale(.94); }
.cb-ap-meta {
    grid-column: 2;
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding-right: 0;
}
.cb-ap-title { flex: 1 1 auto; min-width: 0; font-size: var(--fs-md); font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cb-ap-artist { font-size: var(--fs-sm); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.own-message .cb-ap-artist { color: var(--on-blue-2); }
.cb-ap-controls { grid-column: 1 / -1; }
.cb-ap-seek { display: flex; align-items: center; height: 24px; touch-action: none; cursor: pointer; }
.cb-ap-seek-track { position: relative; width: 100%; height: 4px; border-radius: 2px; background: var(--surface-4); }
.own-message .cb-ap-seek-track { background: var(--blue-press); }
.cb-ap-seek-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: var(--text); }
.own-message .cb-ap-seek-fill { background: var(--on-blue); }
.cb-ap-seek-thumb { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--text); }
.own-message .cb-ap-seek-thumb { background: var(--on-blue); }
.cb-ap-seek:focus-visible .cb-ap-seek-thumb { outline: 2px solid var(--text); outline-offset: 2px; }
.cb-ap-timerow { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; margin-top: -14px; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--text-3); }
.cb-ap-cur { justify-self: start; }
.cb-ap-dur { justify-self: end; }
.cb-ap-sent-time { justify-self: end; padding-left: 0; border-left: 0; opacity: .78; white-space: nowrap; }
.cb-ap-timerow > .cb-ap-sent-time { float: none; display: block; margin: 0; text-align: right; }
.cb-ap-sent-time[hidden] { display: none; }
.own-message .cb-ap-timerow { color: var(--on-blue-2); }

#cb-tray {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2147482000;
    display: none;
    flex-direction: column;
    min-width: 200px;
    max-width: min(78vw, 268px);
    padding: 6px;
    border: 1px solid var(--border-3);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    opacity: 0;
    transform: scale(.96);
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-quick) var(--ease-out);
    overscroll-behavior: contain;
    -webkit-user-select: none;
    user-select: none;
}
#cb-tray.is-mounted { display: flex; }
#cb-tray.is-open { opacity: 1; transform: none; }
.cb-tray-head, .cb-mi-key { display: none; }
.cb-mi {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: var(--fs-md);
    text-align: left;
}
.cb-mi .cb-ico, .cb-mi .icon { width: 20px; height: 20px; color: var(--text-2); }
.cb-mi:active, .cb-mi:focus-visible { background: var(--surface-4); }
@media (hover: hover) { .cb-mi:hover { background: var(--surface-3); } }
.cb-mi.is-danger, .cb-mi.is-danger .cb-ico, .cb-mi.is-danger .icon { color: var(--danger); }
.cb-mi.is-armed { background: var(--danger); color: var(--bg); }
.cb-mi.is-armed .cb-ico, .cb-mi.is-armed .icon { color: var(--bg); }
.cb-tray-sep { height: 1px; margin: 4px 6px; background: var(--border-2); }

.message.cb-anchored > .bubble { outline: 2px solid var(--text-3); outline-offset: 2px; }
.message.cb-pressing > .bubble { transform: scale(.98); transition: transform var(--dur-quick) var(--ease-out); }
.message.cb-nope { animation: cb-nope 320ms var(--ease-out); }
@keyframes cb-nope { 40% { opacity: .45; } }

body.cb-select .message { position: relative; }
body.cb-select .message, body.cb-select .bubble, body.cb-select .bubble-text, body.cb-select .bubble-caption { -webkit-user-select: none; user-select: none; }
.cb-check {
    position: absolute;
    top: 50%;
    display: none;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    border: 2px solid var(--border-3);
    border-radius: 50%;
    background: var(--bg);
    pointer-events: none;
}
.message:not(.own-message) > .cb-check { right: 2px; }
.message.own-message > .cb-check { left: 2px; }
body.cb-select .cb-check { display: grid; }
.cb-check::after {
    content: "";
    width: 12px;
    height: 12px;
    background: var(--bg);
    -webkit-mask: var(--check-mask) center/contain no-repeat;
    mask: var(--check-mask) center/contain no-repeat;
    opacity: 0;
    transform: scale(.5);
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.message.cb-sel > .cb-check { background: var(--text); border-color: var(--text); }
.message.cb-sel > .cb-check::after { opacity: 1; transform: none; }
body.cb-select .message.cb-sel > .bubble { outline: 2px solid var(--text); outline-offset: 2px; }

#cb-select-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2147481000;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: var(--cb-bar-h, var(--header-h));
    padding: 0 8px 0 var(--gutter);
    border-bottom: 1px solid var(--border-2);
    background: var(--surface-1);
    transform: translateY(-101%);
    transition: transform var(--dur-med) var(--ease-out);
}
body.cb-select #cb-select-bar { transform: none; }
#cb-select-bar .cb-count { min-width: 2ch; font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
#cb-select-bar .cb-count-lbl { display: flex; flex-direction: column; margin-right: auto; font-size: var(--fs-xs); color: var(--text-2); }
#cb-select-bar .cb-count-lbl > span:first-child { text-transform: lowercase; }
#cb-select-bar .cb-count-note:empty { display: none; }
#cb-select-bar button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 500;
}
#cb-select-bar button:active { background: var(--surface-4); }
@media (hover: hover) { #cb-select-bar button:hover { background: var(--surface-3); } }
#cb-select-bar button[disabled] { opacity: .36; pointer-events: none; }
#cb-select-bar button .cb-ico, #cb-select-bar button .icon { width: 18px; height: 18px; }
#cb-select-bar #cb-sb-del { color: var(--danger); }
#cb-select-bar #cb-sb-del.is-armed { background: var(--danger); color: var(--bg); }
#cb-select-bar #cb-sb-close { padding: 0; width: 38px; justify-content: center; }
#cb-select-bar.is-compact .cb-lbl { display: none; }
@media (max-width: 520px) { #cb-select-bar .cb-lbl { display: none; } #cb-select-bar button { padding: 0; width: 38px; justify-content: center; } #cb-select-bar .cb-count-lbl { display: none; } #cb-select-bar .cb-count { margin-right: auto; } }

#nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 9600;
    background: rgba(0, 0, 0, .6);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-med) var(--ease-out);
}
body.nav-drawer-open #nav-scrim { opacity: 1; pointer-events: auto; }
body.nav-drawer-open #chat-screen { pointer-events: none; }
#nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 9700;
    display: flex;
    flex-direction: column;
    width: min(320px, 86vw);
    border-right: 1px solid var(--border-2);
    background: var(--surface-1);
    transform: translateX(-102%);
    visibility: hidden;
    overflow: hidden;
    transition: transform var(--dur-flow) var(--ease-out), visibility 0s linear var(--dur-flow);
    padding-top: env(safe-area-inset-top, 0px);
}
body.nav-drawer-open #nav-drawer { transform: none; visibility: visible; transition-delay: 0s; }
.nav-drawer-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--header-h);
    padding: 0 8px 0 var(--gutter);
    border-bottom: 1px solid var(--border-1);
}
.nav-drawer-head img { flex: none; width: 28px; height: 28px; border-radius: var(--radius-xs); }
.nav-drawer-title { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.nav-drawer-title b { font-size: var(--fs-lg); font-weight: 600; line-height: 1.2; }
.nav-drawer-title span { display: none; }
.nav-drawer-close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--text-2); }
.nav-drawer-close:active { background: var(--surface-3); }
@media (hover: hover) { .nav-drawer-close:hover { background: var(--surface-3); color: var(--text); } }
.nav-drawer-body { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 8px; }
.nav-section + .nav-section { margin-top: 12px; }
.nav-section-label { display: block; padding: 8px 12px 6px; color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; user-select: none; }
.nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    height: 48px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: var(--fs-md);
    text-align: left;
}
.nav-item .icon { width: 20px; height: 20px; color: var(--text-2); }
.nav-item-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item-hint { display: none; }
.nav-item:active { background: var(--surface-4); }
@media (hover: hover) { .nav-item:hover { background: var(--surface-3); } }
.nav-item.is-active { background: var(--surface-3); }
.nav-item.is-active .icon { color: var(--text); }
.nav-account {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border-1);
    text-align: left;
}
.nav-account:active { background: var(--surface-3); }
@media (hover: hover) { .nav-account:hover { background: var(--surface-2); } }
.nav-account-avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-4); font-weight: 600; overflow: hidden; user-select: none; }
.nav-account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nav-account-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.nav-account-name { font-size: var(--fs-md); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-account-sub { font-size: var(--fs-sm); color: var(--text-3); }
.nav-account-chev { width: 18px; height: 18px; color: var(--text-3); }

#media-viewer {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    flex-direction: column;
    background: var(--bg);
    opacity: 0;
    transition: opacity var(--dur-med) var(--ease-out);
}
#media-viewer.cbm-open { display: flex; }
#media-viewer.cbm-shown { opacity: 1; }

.cbm-head {
    position: relative;
    z-index: 3;
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) max(6px, env(safe-area-inset-right, 0px)) 0 max(var(--gutter), env(safe-area-inset-left, 0px));
    background: var(--bg);
    border-bottom: 1px solid var(--border-1);
    transition: opacity var(--dur-med) var(--ease-out);
}
.cbm-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--surface-4) !important;
    color: var(--text) !important;
    font-size: var(--fs-sm);
    font-weight: 600;
    overflow: hidden;
}
.cbm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cbm-sender { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cbm-sender-name { color: var(--text) !important; font-size: var(--fs-md); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbm-sender-time { font-size: var(--fs-xs); color: var(--text-3) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbm-head-spacer { display: none; }
.cbm-btn {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--text);
    transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.cbm-btn .icon { width: 22px; height: 22px; }
.cbm-btn:active { transform: scale(.92); background: var(--surface-3); }
@media (hover: hover) and (pointer: fine) { .cbm-btn:hover { background: var(--surface-3); } }
.cbm-btn.cbm-danger { color: var(--danger); }
.cbm-btn--foreign { display: none; }
.cbm-lbl { display: none; }
@media (max-width: 430px) { .cbm-avatar { display: none; } }
@media (max-width: 380px) { .cbm-btn { width: 36px; height: 36px; } }

.cbm-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    touch-action: none;
}
.cbm-stage-media {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    transform: translate3d(var(--cbm-nav-x, 0px), 0, 0);
}
/* A definite-size media box makes 1× always mean "fit the stage". Using only
   max-height:100% on an intrinsic-size image inside an auto grid track could
   leave tall stickers larger than the viewport on some browsers. object-fit
   preserves the full image; transforms are reserved for deliberate zoom/pan. */
.cbm-media {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    -webkit-user-select: none;
    user-select: none;
}
video.cbm-media { background: var(--bg); }
.cbm-media-in { animation: cbm-in var(--dur-med) var(--ease-out) both; }
@keyframes cbm-in { from { opacity: 0; } to { opacity: 1; } }
.cbm-zoomed { cursor: grab; }
.cbm-drag { transition: none; }
.cbm-media-error { display: grid; place-items: center; gap: 8px; color: var(--text-2); }

.cbm-edge {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text);
    transition: background-color var(--dur-fast) var(--ease-out), opacity var(--dur-med) var(--ease-out);
}
.cbm-edge-prev { left: 12px; }
.cbm-edge-next { right: 12px; }
.cbm-edge:disabled, .cbm-edge[hidden] { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .cbm-edge:hover { background: var(--surface-4); } }
@media (hover: none) { .cbm-edge { display: none; } }

.cbm-filecard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: min(86%, 360px);
    padding: 28px 24px;
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    border: 1px solid var(--border-2);
    text-align: center;
}
.cbm-filecard .icon.xl { width: 48px; height: 48px; color: var(--text-2); }
.cbm-filecard-ext { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; color: var(--text-2); text-transform: uppercase; }
.cbm-filecard-name { font-size: var(--fs-lg); font-weight: 600; overflow-wrap: anywhere; }
.cbm-filecard-meta { font-size: var(--fs-sm); color: var(--text-3); }
.cbm-audio { width: min(86%, 420px); display: flex; flex-direction: column; gap: 12px; align-items: center; }
.cbm-audio audio { width: 100%; }
.cbm-audio-name { font-size: var(--fs-lg); font-weight: 600; text-align: center; overflow-wrap: anywhere; }
.cbm-caption-row { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 10px var(--gutter); background: var(--bg); border-top: 1px solid var(--border-1); font-size: var(--fs-md); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 30%; overflow-y: auto; transition: opacity var(--dur-med) var(--ease-out); }

.cbm-strip {
    position: relative;
    z-index: 3;
    flex: none;
    border-top: 1px solid var(--border-1);
    background: var(--bg);
    transition: opacity var(--dur-med) var(--ease-out);
}
.cbm-strip-collapsed .cbm-strip, .cbm-strip.cbm-strip-collapsed, #media-viewer.cbm-strip-collapsed > .cbm-strip { display: none; }
.cbm-strip-rail {
    display: flex;
    gap: 6px;
    padding: 8px var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
}
.cbm-strip-rail::-webkit-scrollbar { display: none; }
.cbm-strip-rail > :first-child { margin-left: auto; }
.cbm-strip-rail > :last-child { margin-right: auto; }
.cbm-thumb {
    position: relative;
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    overflow: hidden;
    opacity: .6;
    transition: opacity var(--dur-fast) var(--ease-out);
}
.cbm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cbm-thumb.cbm-current { opacity: 1; outline: 2px solid var(--text); outline-offset: -2px; }
@media (hover: hover) { .cbm-thumb:hover { opacity: 1; } }
.cbm-thumb-badge { position: absolute; inset: 0; display: grid; place-items: center; color: var(--on-blue); }
.cbm-thumb-badge .icon { width: 20px; height: 20px; }

.cbm-reply {
    position: relative;
    z-index: 3;
    flex: none;
    padding: 8px max(var(--gutter), env(safe-area-inset-left, 0px)) calc(8px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border-1);
    background: var(--bg);
    transition: opacity var(--dur-med) var(--ease-out);
}
.cbm-reply-inner { width: min(100%, var(--col)); margin-inline: auto; display: flex; flex-direction: column; gap: 6px; }
.cbm-reply-quote { display: none; padding: 2px 0 2px 10px; border-left: 3px solid var(--blue); font-size: var(--fs-sm); color: var(--text-2); overflow: hidden; }
.cbm-reply-quote:not(:empty) { display: block; }
.cbm-reply-quote-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbm-reply-row { display: flex; align-items: flex-end; gap: 4px; padding: 4px; border-radius: 26px; background: var(--surface-2); }
.cbm-input { flex: 1; min-width: 0; min-height: 40px; max-height: 120px; padding: 9px 12px; overflow-y: auto; font-size: 16px; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; }
.cbm-input:empty::before { content: attr(data-placeholder); color: var(--text-3); pointer-events: none; }
.cbm-send { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: var(--on-blue); }
.cbm-send .icon { width: 20px; height: 20px; margin-right: 2px; }
.cbm-send:active { transform: scale(.92); background: var(--blue-press); }
.cbm-reply-collapsed .cbm-reply-quote { display: none; }

.cbm-chrome-hidden .cbm-head, .cbm-chrome-hidden .cbm-strip, .cbm-chrome-hidden .cbm-reply, .cbm-chrome-hidden .cbm-caption-row { opacity: 0; pointer-events: none; }

.np-island {
    position: fixed;
    top: calc(var(--header-h) + 10px + env(safe-area-inset-top, 0px));
    left: 50%;
    z-index: 400;
    display: flex;
    flex-direction: column;
    width: min(360px, calc(100vw - 24px));
    min-height: 56px;
    border: 1px solid var(--border-3);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    overflow: hidden;
    opacity: 0;
    transform: translate(-50%, -8px);
    pointer-events: none;
    transition: opacity var(--dur-quick) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.np-island.np-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.np-island-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 8px; cursor: pointer; }
.np-island-art { position: relative; flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--surface-4); overflow: hidden; }
.np-island-thumb { width: 100%; height: 100%; object-fit: cover; }
.np-island-eq { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding-bottom: 8px; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.np-island.np-live .np-island-eq { opacity: 1; }
.np-island-eq span { width: 3px; height: 6px; border-radius: 1px; background: var(--text); animation: np-eq 1.1s ease-in-out infinite; animation-play-state: paused; }
.np-island.np-live .np-island-eq span { animation-play-state: running; }
.np-island-eq span:nth-child(1) { animation-delay: -.9s; }
.np-island-eq span:nth-child(2) { animation-delay: -.5s; }
.np-island-eq span:nth-child(3) { animation-delay: -.7s; }
.np-island-eq span:nth-child(4) { animation-delay: -.2s; }
@keyframes np-eq { 0%, 100% { height: 5px; } 50% { height: 18px; } }
.np-island-ring { display: none; }
.np-island-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.np-island-kind { display: none; }
.np-island-title { font-size: var(--fs-md); font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-island-subtitle { font-size: var(--fs-sm); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-island-playpause, .np-island-close, .np-island-playpause-lg { display: grid; place-items: center; flex: none; border-radius: 50%; color: var(--text); transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.np-island-playpause { width: 40px; height: 40px; }
.np-island-close { width: 36px; height: 36px; color: var(--text-2); }
.np-island-playpause:active, .np-island-close:active, .np-island-playpause-lg:active { transform: scale(.92); background: var(--surface-4); }
@media (hover: hover) { .np-island-playpause:hover, .np-island-close:hover { background: var(--surface-4); } }
.np-island-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--surface-4); }
.np-island-progress-fill { width: 0; height: 100%; background: var(--text); }
.np-island-expanded { display: none; flex-direction: column; align-items: center; gap: 12px; padding: 4px 16px 16px; }
.np-island.np-expanded .np-island-expanded { display: flex; }
.np-island.np-expanded .np-island-art { width: 56px; height: 56px; }
.np-island.np-expanded .np-island-playpause { display: none; }
.np-island.np-expanded .np-island-progress { display: none; }
.np-island-playpause-lg { width: 56px; height: 56px; background: var(--text); color: var(--bg); }
.np-island-playpause-lg .icon { background-color: var(--bg); width: 24px; height: 24px; }
.np-island-seekrow { display: flex; align-items: center; gap: 10px; width: 100%; }
.np-time { min-width: 34px; font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.np-time-duration { text-align: right; }
.np-island-seek { flex: 1; min-width: 0; height: 24px; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.np-island-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--text) var(--np-seek-pct, 0%), var(--surface-4) var(--np-seek-pct, 0%)); }
.np-island-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--text); }
.np-island-seek::-moz-range-track { height: 4px; border-radius: 2px; background: var(--surface-4); }
.np-island-seek::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--text); }
.np-island-seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--text); }
.np-island-seek:disabled { opacity: .4; }
.np-island-goto { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--surface-3); color: var(--text); font-size: var(--fs-sm); font-weight: 500; }
.np-goto-icon { width: 14px; height: 14px; }
@media (hover: hover) { .np-island-goto:hover { background: var(--surface-4); } }


#cb-sticker-preview { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .8); }
.cb-sp-card { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(320px, 100%); padding: 16px; border: 1px solid var(--border-3); border-radius: var(--radius-lg); background: var(--surface-1); }
.cb-sp-media { width: 200px; height: 200px; object-fit: contain; }
.cb-sp-name { font-size: var(--fs-md); font-weight: 600; text-align: center; overflow-wrap: anywhere; }
.cb-sp-owner { font-size: var(--fs-sm); color: var(--text-3); }
.cb-sp-actions { display: flex; gap: 8px; margin-top: 4px; }
.cb-sp-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: var(--radius-pill); background: var(--surface-3); color: var(--text); font-size: var(--fs-sm); font-weight: 500; }
.cb-sp-btn .icon { width: 16px; height: 16px; }
.cb-sp-del { color: var(--danger); }
.cb-sp-del.is-armed, .cb-sp-del.confirm-armed { background: var(--danger); color: var(--bg); }

/* account */
#account-page {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
#account-page.acct-shown { opacity: 1; transform: none; }
#account-page[hidden] { display: none; }
.acct-head { flex: none; display: flex; align-items: center; gap: 8px; height: var(--header-h); padding: 0 var(--gutter) 0 6px; border-bottom: 1px solid var(--border-1); }
.acct-title { font-size: var(--fs-lg); font-weight: 600; }
.acct-back { display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 50%; color: var(--text); }
.acct-back:active { background: var(--surface-3); }
@media (hover: hover) { .acct-back:hover { background: var(--surface-3); } }
.acct-body { flex: 1; min-height: 0; width: 100%; max-width: 680px; margin-inline: auto; padding: 16px var(--gutter) 32px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.acct-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--border-1); border-radius: var(--radius-lg); background: var(--surface-1); }
.acct-card h3 { font-size: var(--fs-md); font-weight: 600; }
.acct-sub, .acct-email-note, .acct-username-note, .acct-pw-note, .acct-avatar-note { font-size: var(--fs-sm); color: var(--text-2); }
.acct-card-danger { border-color: var(--border-2); }
.acct-avatar-row { display: flex; align-items: center; gap: 16px; }
.acct-avatar { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--surface-4); font-size: var(--fs-xl); font-weight: 600; overflow: hidden; }
.acct-avatar img { width: 100%; height: 100%; object-fit: cover; }
.acct-avatar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.acct-fields { display: flex; flex-direction: column; gap: 12px; }
.acct-fields label { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); }
.acct-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .acct-pair { grid-template-columns: 1fr; } }
.acct-fields input { height: 44px; padding: 0 14px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font-size: 16px; }
.acct-fields input::placeholder { color: var(--text-4); }
.acct-fields input:focus { border-color: var(--text-2); }
.acct-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 600; transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.acct-btn:active { transform: scale(.97); }
.acct-btn:disabled { opacity: .45; }
.acct-btn-primary { background: var(--text); color: var(--bg); }
.acct-btn-ghost { background: var(--surface-3); color: var(--text); }
.acct-btn-danger { background: transparent; border: 1px solid var(--danger); color: var(--danger); }
@media (hover: hover) { .acct-btn-primary:hover { background: #fff; } .acct-btn-ghost:hover { background: var(--surface-4); } .acct-btn-danger:hover { background: var(--danger); color: var(--bg); } }
.acct-btn .icon { width: 16px; height: 16px; }
.acct-note { font-size: var(--fs-sm); color: var(--text-2); }
.acct-note[hidden] { display: none; }
.acct-note.is-error { color: var(--danger); }
.acct-note.is-success { color: var(--success); }
.acct-note.is-warn { color: var(--warn); }
#acct-avatar-preview, #avatar-crop-overlay { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .86); }
#acct-avatar-preview { z-index: 9850; cursor: zoom-out; }
#acct-avatar-preview img { max-width: min(78vmin, 560px); max-height: 78vmin; border-radius: var(--radius-lg); object-fit: contain; }
#avatar-crop-overlay { z-index: 9900; padding: 16px; }
#avatar-crop-overlay canvas { max-width: 100%; border: 1px solid var(--border-2); border-radius: var(--radius-md); background: var(--surface-1); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
#avatar-crop-overlay canvas:active { cursor: grabbing; }

/* radial attach menu */
#cb-radial { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 9600; pointer-events: none; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
#cb-radial.is-open { opacity: 1; }
#cb-radial .cbr-field { display: none !important; }
#cb-radial .cbr-sector {
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border: 1px solid var(--border-3);
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text);
    opacity: 0;
    transform: translate(calc(var(--sx) * var(--cbr-r) * .86), calc(var(--sy) * var(--cbr-r) * -.86)) scale(.8);
    animation: cbr-in var(--dur-med) var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 24ms);
}
@keyframes cbr-in { to { opacity: 1; transform: translate(calc(var(--sx) * var(--cbr-r) * .86), calc(var(--sy) * var(--cbr-r) * -.86)) scale(1); } }
#cb-radial .cbr-sector.is-active { background: var(--text); color: var(--bg); transform: translate(calc(var(--sx) * var(--cbr-r) * .86), calc(var(--sy) * var(--cbr-r) * -.86)) scale(1.12); animation: none; opacity: 1; }
#cb-radial.cbr-cancel .cbr-sector { opacity: .4; animation: none; }
#cb-radial.cbr-cancel .cbr-sector.is-active { opacity: 1; }
#cb-radial .cbr-ico, #cb-radial .cbr-ico-photo-video { width: 24px; height: 24px; }
#cb-radial .cbr-lbl { display: none; }
#cb-dock-btn { touch-action: none; -webkit-user-select: none; user-select: none; }
#cb-dock-btn.cbr-x .cb-plus { transform: rotate(45deg); }
html.cbr-active, html.cbr-active body { touch-action: none; overscroll-behavior: contain; }

/* pwa */
.cb-pwa-toast {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 9800;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(440px, calc(100vw - 24px));
    padding: 10px 10px 10px 16px;
    border: 1px solid var(--border-3);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--text);
    font-size: var(--fs-sm);
    transform: translateX(-50%);
    animation: cb-pwa-in var(--dur-quick) var(--ease-out) both;
}
@keyframes cb-pwa-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.cb-pwa-toast-text { flex: 1; min-width: 0; }
.cb-pwa-toast-btn { height: 32px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--text); color: var(--bg); font-weight: 600; }
.cb-pwa-toast-dismiss { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--text-2); }
.cb-pwa-offline { position: fixed; top: calc(8px + env(safe-area-inset-top, 0px)); left: 50%; z-index: 9800; padding: 4px 12px; border: 1px solid var(--border-3); border-radius: var(--radius-pill); background: var(--surface-2); font-size: var(--fs-xs); transform: translateX(-50%); user-select: none; pointer-events: none; transition: opacity var(--dur-med) var(--ease-out); }
.cb-pwa-offline:empty { display: none; }
.cb-pwa-offline.is-fading { opacity: 0; }


/* Six-column media browsing on desktop, with deliberate reductions only when
   the available width cannot support useful tile sizes. */
@media (max-width: 980px) {
    .cb-panel-grid--sticker, .cb-panel-grid--gif { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .cb-panel-grid--sticker, .cb-panel-grid--gif { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
    .cb-panel-grid--sticker, .cb-panel-grid--gif { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .yt-result-card-main { gap: 9px; }
    .yt-result-thumb-wrap, .yt-card-audio-preview .yt-result-thumb-wrap { width: 88px; }
}