/* =========================================================
   Yahoo! Messenger Retro — app skin
   ========================================================= */
:root{--ym:#5f2d91;--ym2:#7b3fb8;--ym3:#b48fe0;--ym-l:#efe6fb;--ymY:#ffd700;--me:#1f4fbf;--bd:#b8202a}

/* Logo mặt cười (SVG) */
.ymico{display:inline-block;width:16px;height:16px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.38' cy='.32' r='.75'%3E%3Cstop offset='0' stop-color='%23fff6a0'/%3E%3Cstop offset='.45' stop-color='%23ffd400'/%3E%3Cstop offset='1' stop-color='%23e89a00'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='30' fill='url(%23g)' stroke='%239a6a00' stroke-width='2'/%3E%3Cellipse cx='23' cy='25' rx='4' ry='6.5' fill='%23222'/%3E%3Cellipse cx='41' cy='25' rx='4' ry='6.5' fill='%23222'/%3E%3Cpath d='M17 37 Q32 54 47 37' stroke='%23222' stroke-width='4.5' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='22' cy='15' rx='7' ry='3.5' fill='%23fff' opacity='.55'/%3E%3C/svg%3E") center/contain no-repeat;border-radius:50%}
.ymico.wink{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.38' cy='.32' r='.75'%3E%3Cstop offset='0' stop-color='%23fff6a0'/%3E%3Cstop offset='.45' stop-color='%23ffd400'/%3E%3Cstop offset='1' stop-color='%23e89a00'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='30' fill='url(%23g)' stroke='%239a6a00' stroke-width='2'/%3E%3Cellipse cx='23' cy='25' rx='4' ry='6.5' fill='%23222'/%3E%3Cpath d='M36 26 Q41 22 46 26' stroke='%23222' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M17 37 Q32 54 47 37' stroke='%23222' stroke-width='4.5' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='22' cy='15' rx='7' ry='3.5' fill='%23fff' opacity='.55'/%3E%3C/svg%3E")}
.ymico.off{filter:grayscale(1) brightness(1.1)}
.ymico.busy{box-shadow:0 0 0 2px #e33}
.ymico.spin{animation:ymspin 1s linear infinite}
@keyframes ymspin{to{transform:rotate(360deg)}}

/* window skin: purple titlebar cho cửa sổ Y!M */
.win.ym{border-color:#5a2a8a}
.win.ym .tb{background:linear-gradient(#a172db 0%,#8a52c9 8%,#7440b5 30%,#5f2d91 55%,#6a35a3 85%,#4d2278 100%);text-shadow:1px 1px #2b0f4d}
.win.ym.inactive{border-color:#a68cc4}
.win.ym.inactive .tb{background:linear-gradient(#c9b3e6,#b39ad6 40%,#a88dcc);color:#f3ecfb}
.win.ym .tb .wb{background:linear-gradient(135deg,#a77ae0,#6a32a8 60%,#55238f)}
.win.ym .tb .wb.x{background:linear-gradient(135deg,#e7926f,#d4441a 60%,#c63b14)}
.ym-body{flex:1;display:flex;flex-direction:column;min-height:0;background:var(--face)}

/* status dots */
.st{display:inline-block;width:12px;height:12px;border-radius:50%;flex:none;border:1px solid rgba(0,0,0,.35);background:radial-gradient(circle at 35% 30%,#fff9a0,#ffcc00 60%,#d49b00)}
.st.busy{background:radial-gradient(circle at 35% 30%,#ffb3b3,#e53030 60%,#a01010)}
.st.idle{background:radial-gradient(circle at 35% 30%,#fff,#ffe680 50%,#d4b300)}
.st.idle:after{content:"z";font:bold 8px/10px Tahoma;color:#555;display:block;text-align:center}
.st.off{background:radial-gradient(circle at 35% 30%,#fff,#bdbdbd 60%,#8a8a8a)}
.st.inv{background:#fff;border:1px dashed #888}
.st.mobile{border-radius:2px;width:9px;height:13px;background:linear-gradient(#cfe7ff,#4a8de0);border-color:#215aa0}

/* ---------- Login ---------- */
.ym-login{flex:1;background:linear-gradient(#fff,#efe6fb 65%,#d8c5f2);padding:16px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;overflow:auto}
.ym-logo-big{width:86px;height:86px;margin-top:6px;transition:transform .4s}
.ym-brand{font:italic 900 30px/1 "Arial Black",Arial,sans-serif;color:var(--ym);letter-spacing:-1px;margin-top:10px}
.ym-brand span{color:#e01e1e}
.ym-sub{font:bold 13px Tahoma;color:var(--ym2);margin:2px 0 14px}
.ym-login form{width:100%;text-align:left}
.ym-login .lbl{font-weight:bold;margin:7px 0 2px;display:block}
.ym-login .links{margin-top:auto;padding-top:10px;font-size:10px}
.ym-login a{color:var(--link);cursor:pointer;text-decoration:underline}
.ym-err{color:#c00;margin-top:6px;min-height:14px;font-weight:bold}
.ym-signing{display:none;flex-direction:column;align-items:center;gap:10px;margin-top:8px;color:var(--ym);font-weight:bold}
.ym-dots i{display:inline-block;width:8px;height:8px;margin:0 2px;border-radius:50%;background:var(--ym2);animation:dots 1s infinite}
.ym-dots i:nth-child(2){animation-delay:.15s}.ym-dots i:nth-child(3){animation-delay:.3s}
@keyframes dots{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}

/* ---------- Buddy list ---------- */
.ym-me{display:flex;gap:8px;padding:8px;background:linear-gradient(#fff,#efe6fb);border-bottom:1px solid #cbbbe6;flex:none}
.avatar{width:var(--a,48px);height:var(--a,48px);border:1px solid #9a8bb8;background:#fff;display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden;font-size:calc(var(--a,48px)*.62);cursor:pointer}
.ym-me .who{flex:1;min-width:0}
.ym-me .name{font-weight:bold;font-size:12px;display:inline-flex;align-items:center;gap:5px;cursor:pointer;padding:1px 3px;border-radius:2px}
.ym-me .name:hover{background:#dfd0f3}
.ym-me .smsg{border:1px solid transparent;padding:2px 3px;color:#666;font-style:italic;margin-top:3px;cursor:text;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ym-me .smsg:hover{border-color:#a9a28a;background:#fff}
.ym-me .smsg input{width:100%;font-style:normal}
.ym-tabs{display:flex;gap:2px;padding:4px 4px 0;flex:none}
.ym-tabs span{padding:3px 9px;border:1px solid #a9a28a;border-bottom:none;border-radius:4px 4px 0 0;background:#f4f2e8;font-size:13px;cursor:pointer}
.ym-tabs span.on{background:#fff;position:relative;top:1px}
.ym-search{padding:4px;background:#fff;border-top:1px solid #a9a28a;flex:none}
.ym-list{flex:1;overflow:auto;background:#fff;padding:2px 0}
.grp{font-weight:bold;padding:3px 4px;color:#333;display:flex;gap:4px;align-items:center;cursor:pointer}
.grp b{font-weight:normal;color:#777}
.grp .ar{display:inline-block;width:10px;transition:transform .15s}
.grp.closed .ar{transform:rotate(-90deg)}
.bud{display:flex;align-items:center;gap:6px;padding:2px 6px 2px 16px;cursor:default;white-space:nowrap;position:relative}
.bud:hover{background:#ece4f8}
.bud.sel{background:#316ac5;color:#fff}
.bud.sel .sm{color:#dde}
.bud .nm{font-weight:bold}
.bud .sm{color:#777;font-style:italic;overflow:hidden;text-overflow:ellipsis;min-width:0}
.bud .ic{margin-left:auto;font-size:11px;flex:none}
.bud.offline .nm{color:#999;font-weight:normal}
.bud.flash{animation:budflash 1.2s ease-out}
@keyframes budflash{0%{background:#ffe680}100%{background:transparent}}
.bud .badge{background:#e33;color:#fff;border-radius:8px;padding:0 5px;font-size:10px;margin-left:4px}
.ym-promo{flex:none;height:56px;margin:4px;border:1px solid #c9bde0;background:linear-gradient(90deg,#3f1d66,#7b3fb8);color:#fff;display:flex;align-items:center;gap:8px;padding:6px;font-size:10px;overflow:hidden;cursor:pointer}
.ym-promo .slide>b:first-child{color:var(--ymY);font-size:12px;display:block}
.ym-promo .slide b{color:var(--ymY)}
.ym-promo .ymico{width:34px;height:34px}
.ym-promo .slide{animation:promo .5s ease-out}
@keyframes promo{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.ym-bottom{display:flex;gap:2px;padding:3px;border-top:1px solid #b9b39a;flex:none}
.tbx{display:flex;flex-direction:column;align-items:center;padding:3px 6px;border:1px solid transparent;border-radius:3px;min-width:46px;font-size:10px;cursor:pointer;flex:1}
.tbx:hover{border-color:#a9a28a;background:#fff}
.tbx:active{background:#e6e0d0}
.tbx i{font-style:normal;font-size:18px;line-height:20px}
.ym-rooms-tab{flex:1;overflow:auto;background:#fff;padding:8px}
.ym-rooms-tab .r{padding:5px;border-bottom:1px dotted #ccc;cursor:pointer;display:flex;justify-content:space-between}
.ym-rooms-tab .r:hover{background:#ece4f8}

/* ---------- IM window ---------- */
.im-tool{display:flex;gap:1px;padding:3px;background:linear-gradient(#fbfaf6,#e3dfcb);border-bottom:1px solid #b9b39a;flex:none}
.im-tool .tbx{flex:none;min-width:52px}
.im-main{flex:1;display:flex;min-height:0}
.im-left{flex:1;display:flex;flex-direction:column;min-width:0;padding:6px;gap:5px}
.im-right{width:116px;padding:6px 6px 6px 0;display:flex;flex-direction:column;gap:6px;align-items:center}
.im-right .cap{font-size:10px;color:#666;text-align:center;word-break:break-all}
.history{flex:1;background:#fff;border:1px solid #7f9db9;overflow:auto;padding:6px 8px;font:12px/1.5 Arial,sans-serif;position:relative;user-select:text;-webkit-user-select:text;background-size:cover;background-position:center}
.history .ln{margin:1px 0;animation:lnin .25s ease-out}
@keyframes lnin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.history .who-me{color:var(--me);font-weight:bold}
.history .who-bd{color:var(--bd);font-weight:bold}
.history .sys{color:#888;font-style:italic;font-size:11px}
.history .buzz{color:#e00;font:bold 16px Arial;letter-spacing:1px}
.history .ts{color:#aaa;font-size:10px;margin-right:4px}
.history .emo{font-size:17px;vertical-align:-2px;display:inline-block}
.history .emo.epop{animation:emopop .4s ease-out}
@keyframes emopop{0%{transform:scale(.2)}70%{transform:scale(1.4)}100%{transform:scale(1)}}
.history .audible{display:inline-flex;align-items:center;gap:6px;border:1px solid #d9c8f0;background:#faf6ff;border-radius:6px;padding:4px 8px;margin:2px 0}
.history .audible .big{font-size:34px;animation:aud 1.2s ease-in-out 2}
@keyframes aud{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-12deg) scale(1.15)}75%{transform:rotate(12deg) scale(1.15)}}
.history .file{display:inline-flex;gap:8px;align-items:center;border:1px solid #ccc;padding:4px 8px;border-radius:4px;background:#fafafa}
.history .file a{color:var(--link);cursor:pointer;text-decoration:underline}
.history .photo{max-width:180px;border:1px solid #ccc;padding:3px;background:#fff;display:inline-block}
.history .photo div{width:170px;height:110px;display:flex;align-items:center;justify-content:center;font-size:60px}
.imv-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.imv-layer i{position:absolute;top:-30px;font-style:normal;animation:fall linear infinite}
@keyframes fall{to{transform:translateY(420px) rotate(360deg)}}
.typing{font-size:10px;color:#666;height:13px}
.typing .ymico{width:11px;height:11px;vertical-align:-2px;animation:ymspin 1.4s linear infinite}
.fmt{display:flex;gap:1px;align-items:center;position:relative}
.fmt .f{border:1px solid transparent;padding:1px 5px;border-radius:2px;cursor:pointer;min-width:20px;text-align:center;height:20px;display:flex;align-items:center;justify-content:center}
.fmt .f:hover{border-color:#a9a28a;background:#fff}
.fmt .f.on{border-color:#316ac5;background:#dbe6f8}
.fmt select{height:20px;font-size:11px}
.fmt .buzzbtn{margin-left:auto;font-weight:bold;color:#c00;border:1px solid #c88;background:linear-gradient(#fff,#fde3e3);padding:1px 10px;border-radius:3px;cursor:pointer}
.fmt .buzzbtn:hover{background:linear-gradient(#fff,#fbc8c8)}
.fmt .buzzbtn:active{transform:scale(.95)}
.compose{display:flex;gap:6px;height:60px;flex:none}
.compose textarea{flex:1;resize:none;border:1px solid #7f9db9;font:12px Arial;padding:4px;outline:none}
.compose .btn{height:100%;min-width:62px;font-weight:bold}
.im-status{border-top:1px solid #b9b39a;padding:2px 6px;color:#666;font-size:10px;flex:none}

/* popups (emoticons, audibles, imv, colors) */
.pop{position:absolute;z-index:50;background:#fff;border:1px solid #888;box-shadow:3px 3px 8px rgba(0,0,0,.35);animation:fadein .12s}
.pop .hd{background:linear-gradient(#f5effd,#e1d3f5);padding:4px 6px;font-weight:bold;color:var(--ym);display:flex}
.pop .hd span{margin-left:auto;font-weight:normal;color:#777}
.emogrid{display:grid;grid-template-columns:repeat(10,26px);gap:1px;padding:4px}
.emogrid div{font-size:18px;text-align:center;padding:1px;cursor:pointer;border:1px solid transparent;transition:transform .1s}
.emogrid div:hover{border-color:#316ac5;background:#e8eef9;transform:scale(1.25)}
.pop .ft{border-top:1px solid #ddd;padding:3px 6px;color:#555;font-size:10px;min-height:18px}
.audgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:6px}
.audgrid div{border:1px solid #ddd;text-align:center;padding:4px;cursor:pointer;font-size:10px}
.audgrid div span{font-size:26px;display:block}
.audgrid div:hover{border-color:var(--ym2);background:#faf6ff}
.colgrid{display:grid;grid-template-columns:repeat(8,16px);gap:2px;padding:5px}
.colgrid div{width:16px;height:16px;border:1px solid #888;cursor:pointer}
.imvgrid{display:grid;grid-template-columns:repeat(3,96px);gap:6px;padding:6px}
.imvgrid div{height:64px;border:1px solid #ccc;display:flex;align-items:flex-end;justify-content:center;font-size:10px;cursor:pointer;padding:2px;background-size:cover;color:#000;text-shadow:0 0 2px #fff;font-weight:bold}
.imvgrid div:hover{outline:2px solid var(--ym2)}

/* ---------- Toast (Y!M alert) ---------- */
#toasts{position:absolute;right:8px;bottom:36px;display:flex;flex-direction:column-reverse;gap:6px;z-index:9400;pointer-events:none}
.toast{width:230px;border:1px solid #3d2163;border-radius:4px;overflow:hidden;box-shadow:3px 3px 10px rgba(0,0,0,.4);background:linear-gradient(#fff,#efe6fb);pointer-events:auto;cursor:pointer;animation:toastin .35s ease-out}
.toast.out{animation:toastout .35s ease-in forwards}
@keyframes toastin{from{transform:translateY(120%);opacity:0}to{transform:none;opacity:1}}
@keyframes toastout{to{transform:translateY(40px);opacity:0}}
.toast .h{background:linear-gradient(#9a63d6,#55238f);color:#fff;font-weight:bold;padding:3px 6px;display:flex;align-items:center;gap:5px}
.toast .h .x{margin-left:auto;cursor:pointer}
.toast .c{display:flex;gap:8px;padding:8px;align-items:center}
.toast .c b{color:var(--ym)}
.toast .c .t2{color:#666}

/* ---------- Chat room ---------- */
.room-main{flex:1;display:flex;min-height:0}
.room-center{flex:1;display:flex;flex-direction:column;padding:6px;gap:5px;min-width:0}
.room-topic{background:#fffbe0;border:1px solid #d8c66b;padding:4px 6px}
.room-side{width:180px;display:flex;flex-direction:column;padding:6px 6px 6px 0;gap:6px}
.room-users{flex:1;background:#fff;border:1px solid #7f9db9;overflow:auto}
.room-users .hd{background:var(--face);padding:3px 6px;font-weight:bold;border-bottom:1px solid #ccc;position:sticky;top:0}
.room-users .u{display:flex;gap:5px;align-items:center;padding:2px 6px;cursor:default;white-space:nowrap}
.room-users .u:hover{background:#ece4f8}
.room-users .u.ign{color:#aaa;text-decoration:line-through}
.room-users .u .r{margin-left:auto;font-size:11px}
.room-users .u.new{animation:budflash 1.5s}
.voice{border:1px solid #a9a28a;background:#fff;padding:6px;text-align:center}
.talk{display:block;width:100%;margin-top:4px;padding:8px 0;font:bold 12px Tahoma;color:#fff;border:1px solid #2c6f1e;border-radius:4px;background:linear-gradient(#7fd56a,#2f8f1f);cursor:pointer}
.talk.on{background:linear-gradient(#ff8a6a,#c3401b);border-color:#8a2a10}
.meter{height:8px;border:1px solid #888;background:linear-gradient(90deg,#3c3 0 55%,#fc0 55% 75%,#e33 75%);position:relative;margin-top:4px;overflow:hidden}
.meter i{position:absolute;top:0;bottom:0;right:0;background:#eee;transition:left .08s}
.speaker{color:#090;font-size:10px;min-height:13px;margin-top:3px}

.rb-main{flex:1;display:flex;min-height:0;padding:8px;gap:8px}
.tree{width:190px;background:#fff;border:1px solid #7f9db9;overflow:auto;padding:4px}
.tree div{padding:2px 4px;white-space:nowrap;cursor:pointer}
.tree div.sel{background:#316ac5;color:#fff}
.tree .c{padding-left:18px}
table.grid{width:100%;border-collapse:collapse;background:#fff}
table.grid th{background:linear-gradient(#fff,#e7e3d2);border:1px solid #c6c0a8;text-align:left;padding:3px 5px;font-weight:normal;position:sticky;top:0}
table.grid td{padding:3px 5px;border-bottom:1px solid #f0f0f0;cursor:default}
table.grid tr.sel td{background:#316ac5;color:#fff}
table.grid tr:not(.sel):hover td{background:#e8eef9}
.gridwrap{flex:1;border:1px solid #7f9db9;overflow:auto;background:#fff}

/* ---------- Webcam ---------- */
.cam-view{margin:6px;flex:1;background:#111;position:relative;overflow:hidden;border:1px solid #000;min-height:150px}
.cam-view canvas,.cam-view video{width:100%;height:100%;object-fit:cover;display:block;image-rendering:pixelated}
.cam-view .scan{position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.15) 2px 3px);pointer-events:none}
.cam-view .lbl{position:absolute;top:6px;left:8px;color:#f33;font:bold 11px Tahoma;text-shadow:1px 1px #000;animation:blink 1.2s steps(1) infinite}
@keyframes blink{50%{opacity:.2}}
.cam-view .fps{position:absolute;bottom:5px;right:8px;color:#9f9;font:10px monospace;text-shadow:1px 1px #000}
.cam-view .connecting{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#ccc;gap:8px;background:#111}
.cam-view .flashfx{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.cam-view .flashfx.go{animation:camflash .4s}
@keyframes camflash{0%{opacity:.9}100%{opacity:0}}
.cam-ctl{display:flex;gap:6px;padding:0 6px 6px;align-items:center;flex:none}
.cam-ctl .viewers{margin-left:auto;color:#666}
.cam-viewers{padding:0 6px 6px;flex:none;max-height:90px;overflow:auto}
.cam-viewers .bud{padding-left:4px}

/* dialogs */
.dlg-body{padding:12px;display:flex;gap:12px}
.prog{height:16px;border:1px solid #7f9db9;background:#fff;padding:1px;margin:6px 0}
.prog i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#3bb53b 0 8px,#fff 8px 10px);transition:width .2s}
.call-ring{animation:ring .5s ease-in-out infinite}
@keyframes ring{0%,100%{transform:rotate(0)}25%{transform:rotate(-15deg)}75%{transform:rotate(15deg)}}
.pref-main{flex:1;display:flex;padding:8px;gap:8px;min-height:0}
.pref-cats{width:140px;background:#fff;border:1px solid #7f9db9;padding:2px}
.pref-cats div{padding:3px 6px;cursor:pointer}
.pref-cats div.sel{background:#316ac5;color:#fff}
.pref-pane{flex:1;overflow:auto}
.arch-main{flex:1;display:flex;min-height:0;padding:6px;gap:6px}
.arch-pv{flex:1;background:#fff;border:1px solid #7f9db9;padding:6px;font:12px Arial;overflow:auto;user-select:text}

/* ---------- Cùng nghe nhạc (YouTube) ---------- */
.mu{padding:8px 10px 6px;background:linear-gradient(#f6f0ff,#e7dcf7)}
.mu-screen{position:relative;width:336px;height:189px;margin:0 auto;background:#000;border:1px solid #3d2163;border-radius:2px;overflow:hidden}
.mu-yt,.mu-yt iframe{width:100%;height:100%;display:block;border:0}
.mu-cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;color:#fff;background:linear-gradient(135deg,rgba(63,29,102,.94),rgba(123,63,184,.9));font-size:12px;padding:10px}
.mu-cover .ic{font-size:36px;line-height:1}
.mu-cover.click{cursor:pointer}
.mu-cover.click .ic{width:56px;height:56px;border-radius:50%;background:#e33;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 0 0 0 rgba(238,51,51,.6);animation:mupulse 1.4s infinite}
@keyframes mupulse{70%{box-shadow:0 0 0 14px rgba(238,51,51,0)}100%{box-shadow:0 0 0 0 rgba(238,51,51,0)}}
.mu-info{margin-top:6px;min-width:0}
.mu-title{font:bold 12px Tahoma,sans-serif;color:#3f1d66;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mu-author{color:#777;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:14px}
.mu-seek{display:flex;align-items:center;gap:6px;margin-top:4px;font:10px Tahoma;color:#555}
.mu-seek input{flex:1;accent-color:#7b3fb8}
.mu-ctl{display:flex;align-items:center;gap:4px;margin-top:4px}
.mu-ctl .btn{min-width:0;padding:2px 8px}
.mu-ctl .mu-play{width:38px;font-weight:bold}
.mu-vol{margin-left:auto;display:flex;align-items:center;gap:2px}
.mu-vol input{width:70px;accent-color:#7b3fb8}
.mu-eq{display:inline-flex;align-items:flex-end;gap:1px;height:10px;width:14px}
.mu-eq i{width:2px;height:3px;background:#7b3fb8}
.mu-eq.on i{animation:mueq .8s infinite ease-in-out alternate}
.mu-eq.on i:nth-child(2){animation-delay:-.3s}.mu-eq.on i:nth-child(3){animation-delay:-.55s}.mu-eq.on i:nth-child(4){animation-delay:-.15s}
@keyframes mueq{from{height:2px}to{height:10px}}
.mu-shield{position:absolute;inset:0;background:transparent}
/* nickname Y!M */
.ym-nick .nk-intro{margin:6px 0 4px;line-height:1.45;text-align:center}
.ym-nick .nk-hint{display:block;color:#666;margin-top:3px}
.ym-nick .nk-sug{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:6px;font-size:11px}
.ym-nick .nk-sug:not(:empty):before{content:"Gợi ý:";color:#666}
/* ===== Webcam thật ===== */
.cam-view.me video{transform:scaleX(-1)}
.cam-view video{object-fit:contain;image-rendering:auto;background:#000}
.cam-view:fullscreen video{object-fit:contain}
.cam-view .connecting a{color:#9cc3ff;font-size:11px}
.cam-view .connecting .cmsg{text-align:center;line-height:1.5}
.cam-view .cam-paused{position:absolute;inset:0;background:rgba(0,0,0,.85);color:#ddd;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:12px}
.cam-view .cam-paused span{font-size:34px}
.cam-opts{display:flex;gap:8px;padding:0 6px 6px;flex:none}
.cam-opts label{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;font-size:11px}
.cam-opts select{width:100%;min-width:0}
.cam-auto{padding:0 8px 6px;flex:none;font-size:11px}
.cam-viewers .kick{color:#c00;cursor:pointer}
.statusbar .cstat{margin-left:auto;color:#666;font-size:10px;white-space:nowrap}
.bud .camon{cursor:pointer;margin-right:2px}
.bud .camon:hover{filter:drop-shadow(0 0 2px #7b3fb8)}
.tray-cam{font-size:13px;line-height:16px;cursor:pointer;animation:camblink 2s infinite}
@keyframes camblink{50%{opacity:.45}}
/* ===== Ảnh trong chat room ===== */
.history .room-photo{display:inline-flex;flex-direction:column;gap:2px;vertical-align:top;margin:2px 0 4px;max-width:250px}
.history .room-photo img{max-width:240px;max-height:180px;width:auto;height:auto;display:block;cursor:zoom-in;background:#eee;object-fit:contain}
.history .room-photo small{color:#777;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.history.drop{outline:2px dashed #7b3fb8;outline-offset:-4px;background:#f6f0ff}
.fmt .rp-up{width:80px;height:8px;border:1px solid #9a8bb8;background:#fff;margin-left:6px;vertical-align:middle;position:relative}
.fmt .rp-up i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(#b48ae6,#7b3fb8);transition:width .15s}
.photo-view{flex:1;background:#222;display:flex;align-items:center;justify-content:center;overflow:auto;min-height:0}
.photo-view img{max-width:100%;max-height:100%;object-fit:contain}