/* ===== CLEANED BASE FRONT STYLES - moved from index.html ===== */ .ae{padding:6px 8px 3px 2px;border:1px solid #000;border-radius:2px;margin:1px;float:left;} .pmsgc{background-color:rgba(0,77,255,.08)!important;} .hmsg{background-color:linen!important;} .label-primary,.btn-primary,.bg-primary,.label-primary:hover,.btn-primary:hover,.btn-primary:focus{background-color:#438ac7;background-image:none;} .bg{background-color:#2E9959;} .bgg{background-color:lightslategray;} .pophead{background-color:slategrey;} .light{background-color:#fff;} .hid{display:none;} .dad{width:100%!important;max-width:none!important;margin:0!important;} /* ===== END CLEANED BASE FRONT STYLES ===== */ .fr{float:right;} .fl{float:left;} .msg{ background-color:#f0f0f5 ;border: 1px solid grey;margin-top:-1px;padding:2px;margin-right:3px;margin-left:3px; } .nobreak { display:inline; white-space: nowrap; word-wrap: nowrap; /* IE 5+ */ word-break: keep-all; } .tbox{overflow:scroll; border: 1px solid lightgrey ;padding:0px;max-height:26px;min-height:26px;height:26px; font-weight:bold;overflow:hidden;resize:none;} .emoii{width:22px; max-width:22px; height:22px; margin:0px; padding:5px;} .hid{display:none;} .noflow{overflow:hidden;} div { line-height: 20px; } /* V230.11: one centered portrait/frame composite in the room and login lists. */ html body #users .uzr.member-frame-custom, html body #tlogins .lonline .uzr.member-frame-custom{ position:relative!important; min-height:82px!important; height:82px!important; padding-left:90px!important; overflow:hidden!important; } html body #users .uzr.member-frame-custom>.member-avatar-composite, html body #tlogins .lonline .uzr.member-frame-custom>.member-avatar-composite{ position:absolute!important; left:3px!important; right:auto!important; top:1px!important; width:80px!important; height:80px!important; display:block!important; overflow:visible!important; margin:0!important; padding:0!important; z-index:6!important; } html body #users .member-avatar-composite>.frame-photo-window, html body #tlogins .member-avatar-composite>.frame-photo-window{ position:absolute!important; left:8px!important; top:8px!important; width:64px!important; height:64px!important; display:block!important; overflow:hidden!important; border-radius:50%!important; margin:0!important; padding:0!important; border:0!important; z-index:7!important; } html body #users .member-avatar-composite>.frame-photo-window>.u-pic, html body #tlogins .member-avatar-composite>.frame-photo-window>.u-pic{ position:absolute!important; inset:0!important; display:block!important; visibility:visible!important; opacity:1!important; width:100%!important; height:100%!important; min-width:100%!important; min-height:100%!important; max-width:none!important; max-height:none!important; margin:0!important; padding:0!important; border:0!important; border-radius:50%!important; background-size:cover!important; background-position:center center!important; background-repeat:no-repeat!important; object-fit:cover!important; object-position:center center!important; transform:none!important; clip-path:none!important; -webkit-clip-path:none!important; z-index:7!important; } html body #users .member-avatar-composite>.member-avatar-frame-layer, html body #tlogins .member-avatar-composite>.member-avatar-frame-layer{ position:absolute!important; inset:0!important; width:80px!important; height:80px!important; display:block!important; visibility:visible!important; opacity:1!important; margin:0!important; padding:0!important; border:0!important; background-size:contain!important; background-position:center center!important; background-repeat:no-repeat!important; pointer-events:none!important; z-index:9!important; } .hand{cursor: hand;} img { vertical-align: middle; } .break { overflow: auto; word-wrap: break-word; /* IE 5+ */ overflow-x:hidden; overflow-wrap: break-word; } * { font-family:"Times New Roman",Times,serif;font-weight:bold !important;text-shadow: none !important;font-size: 13.8px !important; } .u-ico { padding-right:2px;margin-top:2px;max-height:16px; } html, body { height : 100%; } .ui-tabs-nav{padding:0px;} .ui-tabs-panel{padding:0px;} .darker{background-color: #33333a} .emoi{width:18px; max-width:18px; height:auto; max-height:18px; } .unread{background-color:#FFC89D!important;} div { line-height: 20px; } .b{border:1px solid grey;}.bb{border:2px solid grey;} table, th, td { border: 0; } th, td { padding: 0px; } table { border-spacing: 0; border-collapse: collapse; } .ui-popup-container{margin:0px;padding:0px; } .animating{ animation: animate 1s cubic-bezier(0,1,1,0); } .mini{ font-size: 90%!important; } .corner{ border-radius: 5px;} .minix{ font-size: 80%!important; } @keyframes animate{ from { transform: scale(1); } to { transform: scale(1.5); } } .nosel,.u-ico,.u-pic,.tago{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; } .ui-dialog-contain { width: 92.5%; max-width: 500px; margin: 0% auto 15px auto; padding: 0; position: relative; top: 2px; } .center { margin: 0 auto; } .dots { display:inline-block; white-space: nowrap; overflow:hidden !important; text-overflow: ellipsis;max-width: 100%; } .ui-tabs .ui-tabs-panel { padding:0px; margin:0px; } .ui-widget-overlay { background-color: black; background-image: none; opacity: 0.12; z-index: 1040; } .ui-dialog .ui-dialog-content { padding:0px; } .ui-tabs-anchor { padding:0px; } .hgreen { background-color: darkseagreen; } .hred { background-color: indianred; } .borderg { border: 1px solid lavender; } .border { border: 1px solid black; } nopadding { padding: 0px;margin: 0px; } .fitimg { background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; } .ui-dialog .ui-dialog-titlebar { padding: 5px; } .bord { border:1px solid dodgerblue !important; } .uzr {margin-left:2px!important;border-radius: 5px;} html { height : 100vh; width : 100vw; } .ui-state-default .ui-tabs-anchor { padding: 5px!important; } .mw {width:380px;max-width:380px;min-width: 380px;} .mww {width:260px;max-width:260px;min-width: 260px;} .pn2 { width: 99%; max-width: 320px; height: 80%; left: 5px; float: right; z-index: 2; margin: 0px; position: absolute; } .panel-heading { padding: 6px; } .fa { text-align: left; } .modal-header { padding: 5px; } .badge { padding: 0px 3px; } .bx { margin-top: -8px; } .panel-body { padding: 2px; height: auto; } button.btn { padding: 5px 5px; } .tab-pane { padding: 0px; } .d2 { padding-bottom: 2px; } .popover-content{padding:1px;} /* PROFILE REBUILD */ #upro .modal-dialog{width:340px;max-width:96vw;margin:8px auto;} #upro .modal-content.upro-card{border-radius:0;overflow:hidden;border:1px solid #9aa8b4;background:#fff;} #upro .upro-head{padding:9px 10px;cursor:pointer;background:#345C73!important;border-bottom:none;} #upro .upro-body{padding:0;background:#fff;} #upro .upro-banner{height:82px;background:#f8f8f8 radial-gradient(circle at 20px 20px,#ececec 10px,transparent 11px) 0 0/40px 40px;background-size:cover;background-repeat:no-repeat;background-position:center;} #upro .upro-banner.has-cover{background-color:#f5f5f5;background-size:contain!important;background-repeat:no-repeat!important;background-position:center center!important;} #upro .upro-topbox{position:relative;padding:0;min-height:auto;display:block;background:#fff;} #upro .upro-avatar{width:100%;height:200px;border:0;border-radius:0;margin-top:0;background-color:#fff;box-shadow:none;background-size:contain!important;background-repeat:no-repeat!important;background-position:center center!important;border-bottom:1px solid #ececec;} #upro .upro-maininfo{margin-right:0;margin-top:0;padding:8px 12px;min-height:auto;} #upro .upro-name-line{font-size:20px;color:#20435a;line-height:1.2;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right;} #upro .upro-status-row{color:#333;min-height:18px;margin-bottom:2px;text-align:right;} #upro .upro-badges,#upro .upro-stars{display:none!important;} #upro .upro-badges{height:26px;margin-bottom:3px;} #upro .upro-badges .upro-badge{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ddd;border-radius:50%;background:#f3f3f3;color:#999;margin-left:4px;font-size:13px;} #upro .upro-stars{color:#c7c7c7;font-size:16px;letter-spacing:2px;} #upro .upro-camera{position:absolute;left:12px;top:12px;width:34px;height:34px;border-radius:8px;background:#f0f0f0;color:#666;display:flex;align-items:center;justify-content:center;} #upro .upro-meta-line{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:8px 12px;border-top:1px solid #eee;border-bottom:1px solid #eee;} #upro .upro-country{display:flex;align-items:center;gap:4px;min-width:0;font-size:13px;} #upro .upro-country img{width:18px;height:13px;display:inline-block;} #upro .upro-roomtag .roomh{max-width:160px!important;font-size:13px;padding:2px 6px!important;margin:0;} #upro .upro-register-state{text-align:center;padding:8px 10px;color:#6b5a5a;font-size:16px;} #upro .upro-action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 10px 10px;} #upro .upro-btn{display:flex;align-items:center;justify-content:center;gap:4px;min-height:40px;border:1px solid #e0e0e0;background:#fff;color:#222;text-decoration:none;cursor:pointer;padding:4px 6px;font-size:13px;} #upro .upro-btn i{font-size:16px;} #upro .upro-btn.like{color:#e31b23;} #upro .upro-btn.unot{color:#333;} #upro .upro-btn.ugift{color:#305cff;} #upro .upro-btn.uh{color:#222;} #upro .upro-btn.udelpic,#upro .upro-btn.ukick,#upro .upro-btn.uban,#upro .upro-btn.utempban,#upro .upro-btn.usmute,#upro .upro-btn.uwarn{color:#d62b2b;} #upro .upro-btn.ufeature{color:#ff4aa3;} #upro .upro-btn.urkick,#upro .upro-btn.umod{color:#8e3fd2;} #upro .upro-btn.umute,#upro .upro-btn.uunmute{color:#0059c7;} #upro .upro-btn:hover{background:#f7fbff;} #upro .upro-btn.hidden-by-perm{display:none!important;} #upro .upro-admin-area{padding:0 10px 12px;} #upro .upro-edit-row{display:flex;align-items:center;gap:6px;margin-top:8px;} #upro .upro-edit-row.block-row{align-items:flex-start;flex-wrap:wrap;} #upro .upro-edit-label{width:66px;flex:0 0 66px;font-size:13px;} #upro .upro-edit-label.red{color:#d61e1e;} #upro .upro-edit-label.blue{color:#138bff;} #upro .upro-edit-input{flex:1;min-width:0;height:32px;border:1px solid #bbb;padding:4px 6px;background:#fff;} #upro select.upro-edit-input{padding:4px 6px;} #upro .upro-save-btn{width:74px;height:32px;border:1px solid #66798a;background:#345C73;color:#fff;} #upro .upro-save-btn:hover{opacity:.95;} #upro .upro-admin-area .hideme{display:none!important;} /* PROFILE REBUILD 2 */ #upro .upro-action-grid{grid-template-columns:repeat(3,1fr);} #upro .upro-edit-label{width:86px;flex:0 0 86px;} #upro .upro-save-btn{font-weight:bold;} #upro .upro-edit-row .upro-edit-label{line-height:1.2;} #upro .upro-edit-row.roombox .upro-edit-label{width:100%;flex:0 0 100%;margin-bottom:2px;} #upro .upro-edit-row.roombox .upro-edit-input{width:100%;} #upro .upro-simple-only{display:none;} #upro.simple-view .upro-admin-area{display:none!important;} #upro.simple-view .ugift, #upro.simple-view .uh, #upro.simple-view .udelpic, #upro.simple-view .ufeature, #upro.simple-view .urkick, #upro.simple-view .ukick, #upro.simple-view .uban, #upro.simple-view .utempban, #upro.simple-view .usmute, #upro.simple-view .uprivmute, #upro.simple-view .uwarn, #upro.simple-view .ustatusbuzz, #upro.simple-view .umod, #upro.simple-view .uunmute{display:none!important;} #upro.simple-view .upro-action-grid{grid-template-columns:repeat(3,1fr);} #upro .upro-btn{font-size:12.5px;min-height:35px;} #upro .upro-btn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;} #upro .upro-edit-row.powerbox .upro-edit-input{flex:1;} #upro .upro-edit-row.powerbox .upro-save-btn{width:74px;flex:0 0 74px;} /* SIMPLE PROFILE TWEAK */ #upro.simple-view .modal-dialog{width:300px;max-width:95vw;} #upro.simple-view .upro-banner{display:none;} #upro.simple-view .upro-camera{display:none;} #upro.simple-view .upro-topbox{padding:0 10px 4px;min-height:auto;} #upro.simple-view .upro-avatar{width:54px;height:54px;margin-top:8px;border-width:3px;} #upro.simple-view .upro-maininfo{margin-right:68px;margin-top:-56px;min-height:54px;padding-top:10px;} #upro.simple-view .upro-badges,#upro.simple-view .upro-stars{display:none;} #upro.simple-view .upro-register-state{padding:6px 10px 8px;font-size:15px;} #upro.simple-view .upro-meta-line{padding:6px 10px;} #upro.simple-view .upro-action-grid{padding:0 6px 8px;gap:4px;} #upro.simple-view .upro-btn{min-height:34px;padding:3px 4px;font-size:12.5px;} #upro.simple-view .upro-btn i{font-size:15px;} /* CLEAN SIMPLE GUEST PROFILE V2 */ #upro.simple-view .upro-topbox{display:none!important;} #upro.simple-view .upro-meta-line{display:flex!important;padding:10px 8px 6px!important;border-top:0!important;border-bottom:0!important;align-items:center!important;} #upro.simple-view .upro-country{display:block!important;width:48%!important;text-align:right!important;font-size:13px!important;} #upro.simple-view .upro-roomtag{display:block!important;width:48%!important;text-align:left!important;} #upro.simple-view .upro-roomtag .roomh{background:#345C73!important;color:#fff!important;border:1px solid #000!important;max-width:145px!important;float:left!important;font-size:12px!important;} #upro.simple-view .upro-register-state{display:block!important;text-align:center!important;padding:8px 0 10px!important;color:#333!important;font-size:15px!important;} #upro.simple-view .upro-action-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:4px!important;padding:0 6px 8px!important;} #upro.simple-view .upm,#upro.simple-view .unot,#upro.simple-view .ulike,#upro.simple-view .umute{display:flex!important;} #upro.simple-view .modal-content.upro-card{width:300px!important;min-height:auto!important;} #upro.simple-view .modal-body.upro-body{padding-bottom:0!important;} /* ===== SIMPLE PROFILE EXACT PREVIEW FINAL ===== */ #upro.simple-view .modal-dialog{ width: 365px !important; max-width: 96vw !important; margin: 12px auto !important; } #upro.simple-view .modal-content.upro-card{ border: 1px solid #8e99a5 !important; border-radius: 0 !important; overflow: hidden !important; background: #fff !important; } #upro.simple-view .upro-head{ background: #6c7785 !important; padding: 8px 10px !important; } #upro.simple-view .upro-banner{ display: none !important; } #upro.simple-view .upro-topbox{ display: block !important; padding: 0 !important; min-height: auto !important; position: relative !important; } #upro.simple-view .upro-avatar{ width: 100% !important; height: 200px !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center center !important; background-color: #ffffff !important; } #upro.simple-view .upro-maininfo{ display: none !important; } #upro.simple-view .upro-camera, #upro.simple-view .upro-badges, #upro.simple-view .upro-stars, #upro.simple-view .upro-status-row{ display: none !important; } #upro.simple-view .upro-meta-line{ display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 8px !important; padding: 8px 10px !important; border-top: 1px solid #ddd !important; border-bottom: 1px solid #ddd !important; background: #fff !important; } #upro.simple-view .upro-country{ font-size: 14px !important; font-weight: bold !important; color: #222 !important; display: flex !important; align-items: center !important; gap: 6px !important; } #upro.simple-view .upro-country img{ width: 22px !important; height: 14px !important; border: 1px solid #ddd !important; } #upro.simple-view .upro-roomtag .roomh{ max-width: 180px !important; font-size: 13px !important; padding: 2px 7px !important; margin: 0 !important; } #upro.simple-view .upro-register-state{ text-align: center !important; padding: 8px 10px !important; color: #4d3a3a !important; font-size: 17px !important; font-weight: bold !important; } #upro.simple-view .upro-action-grid{ display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 4px !important; padding: 0 8px 8px 8px !important; } #upro.simple-view .upro-btn{ min-height: 39px !important; border: 1px solid #e4e4e4 !important; background: #fff !important; color: #111 !important; text-decoration: none !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; padding: 4px 5px !important; font-size: 13px !important; font-weight: bold !important; } #upro.simple-view .upro-btn i{ font-size: 16px !important; } #upro.simple-view .upm{ color: #000 !important; } #upro.simple-view .unot{ color: #000 !important; } #upro.simple-view .ulike{ color: #e60000 !important; } #upro.simple-view .umute{ color: #e60000 !important; } #upro.simple-view .ugift, #upro.simple-view .uh, #upro.simple-view .udelpic, #upro.simple-view .ufeature, #upro.simple-view .urkick, #upro.simple-view .ukick, #upro.simple-view .uban, #upro.simple-view .utempban, #upro.simple-view .usmute, #upro.simple-view .uprivmute, #upro.simple-view .uwarn, #upro.simple-view .ustatusbuzz, #upro.simple-view .umod, #upro.simple-view .uunmute, #upro.simple-view .upro-admin-area{ display: none !important; } /* ===== PROFILE ICON FALLBACK FIX ===== */ #upro .upro-btn i.fa{ font-family:"Times New Roman",Times,serif!important; font-weight: bold !important; display:inline-block !important; width:18px; text-align:center; } #upro .upm i:before{content:"💬" !important;} #upro .unot i:before{content:"✉" !important;} #upro .ulike i:before{content:"♥" !important;} #upro .ugift i:before{content:"💎" !important;} #upro .uh i:before{content:"🔍" !important;} #upro .udelpic i:before{content:"⊘" !important;} #upro .ufeature i:before{content:"★" !important;} #upro .urkick i:before{content:"♟" !important;} #upro .ukick i:before{content:"⊘" !important;} #upro .uban i:before{content:"⊘" !important;} #upro .utempban i:before{content:"◴" !important;} #upro .usmute i:before{content:"⊘" !important;} #upro .uprivmute i:before{content:"⊘" !important;} #upro .umute i:before{content:"⊘" !important;} #upro .uunmute i:before{content:"✓" !important;} #upro .uwarn i:before{content:"⚠" !important;} #upro .ustatusbuzz i:before{content:"◎" !important;} #upro .umod i:before{content:"☑" !important;} /* ===== LIKE SYSTEM MESSAGE ===== */ .system-like-msg,.msg.systemLike{background:#fff8f8!important;border-right:3px solid #e60000!important;} /* ===== SYSTEM JOIN / LEAVE / ROOM MOVE EVENTS ===== */ .system-event{ background:#fff5e8 !important; border-top:1px solid #efdcc4 !important; border-bottom:1px solid #efdcc4 !important; } .system-event .u-topic{ font-weight:bold !important; } .system-event .u-msg{ color:#000 !important; font-weight:bold !important; } .system-room-badge{ display:inline-block; background:#2d5f78; color:#fff; border:1px solid #174156; border-radius:2px; padding:1px 7px; margin:0 3px; cursor:pointer; font-weight:bold; } .system-room-badge:hover{ filter:brightness(1.08); } .system-join-chat .u-msg, .system-leave-chat .u-msg, .system-room-join .u-msg, .system-room-leave .u-msg, .system-room-move .u-msg{ color:#000 !important; } #banInlineLoginMessage{background:#d9534f!important;color:#fff!important;} /* ===== FRESH VOICE SYSTEM FROM VIDEO ===== */ .dad.fresh-voice-enabled{ display:flex !important; flex-direction:column !important; height:100% !important; max-height:100% !important; overflow:hidden !important; padding-top:0 !important; box-sizing:border-box !important; } .dad.fresh-voice-enabled #room{ flex:1 1 auto !important; height:auto !important; min-height:0 !important; overflow:hidden !important; } #freshVoiceBar{ flex:0 0 42px !important; height:42px !important; width:100% !important; background-color:var(--chat-template, var(--site-body-bg, #345c73)) !important; background-image:none !important; border-bottom:1px solid var(--chat-template, var(--site-body-bg, #345c73)) !important; display:flex !important; align-items:center !important; gap:2px !important; padding:1px 3px !important; box-sizing:border-box !important; direction:ltr !important; z-index:2 !important; } #freshVoiceBar .fresh-speaker, #freshVoiceBar .fresh-mic-seat{ width:39px !important; height:39px !important; min-width:39px !important; margin:0 !important; padding:0 !important; border:1px solid #082a37 !important; border-radius:3px !important; background:#2f6076 !important; color:#000 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; position:relative !important; overflow:hidden !important; cursor:pointer !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12) !important; } #freshVoiceBar .fresh-speaker{ background:#2ec265 !important; } #freshVoiceBar .fresh-speaker.muted{ background:#d94a4a !important; } #freshVoiceBar .fresh-speaker i, #freshVoiceBar .fresh-mic-seat i{ font-size:27px !important; color:#000 !important; line-height:1 !important; z-index:1 !important; } #freshVoiceBar .fresh-mic-seat.active, #freshVoiceBar .fresh-mic-seat.recording{ background:#23bd61 !important; } #freshVoiceBar .fresh-mic-seat.busy:not(.active){ background:#47798c !important; } #freshVoiceBar .fresh-mic-seat.disabled{ opacity:.5 !important; } #freshVoiceBar .fresh-seat-avatar{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; opacity:.9 !important; z-index:0 !important; } #freshVoiceBar .fresh-seat-label{ position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important; background:rgba(0,0,0,.62) !important; color:#fff !important; font-size:8px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; direction:ltr !important; z-index:2 !important; } .fresh-voice-toast{ position:absolute !important; top:48px !important; left:8px !important; background:#111 !important; color:#fff !important; border:1px solid #555 !important; border-radius:4px !important; padding:6px 10px !important; z-index:9999 !important; font-weight:bold !important; } html,body{ overflow:hidden !important; } #tlogins #freshVoiceBar, #freshVoiceBar:empty{ display:none !important; } /* النوافذ لا تحتاج إزاحة لأن الشريط داخل التدفق وليس فوقها */ .modal,.modal-dialog,.popover,.pop,.pn2,.ui-dialog{ z-index:5000 !important; } /* ===== END FRESH VOICE SYSTEM FROM VIDEO ===== */ /* ===== LINK MIC BUTTON BACKGROUND TO CONTROL PANEL ===== */ :root{ --fresh-mic-bg-color:#2f6076; --fresh-mic-bg-image:none; } #freshVoiceBar .fresh-mic-seat{ background-color:var(--fresh-mic-bg-color,#2f6076) !important; background-image:var(--fresh-mic-bg-image,none) !important; background-size:cover !important; background-repeat:no-repeat !important; background-position:center !important; } #freshVoiceBar .fresh-mic-seat.active, #freshVoiceBar .fresh-mic-seat.recording, #freshVoiceBar .fresh-mic-seat.busy:not(.active), #freshVoiceBar .fresh-mic-seat.disabled{ background-color:var(--fresh-mic-bg-color,#2f6076) !important; background-image:var(--fresh-mic-bg-image,none) !important; } #freshVoiceBar .fresh-mic-seat.active, #freshVoiceBar .fresh-mic-seat.recording{ box-shadow:0 0 0 2px #23bd61 inset, 0 0 6px rgba(35,189,97,.7) !important; } #freshVoiceBar .fresh-mic-seat.busy:not(.active){ box-shadow:0 0 0 2px #d9534f inset !important; } /* ===== PRIVATE WINDOW CLOSE/VISIBILITY FIX ===== */ .private-window{ z-index:7000 !important; position:absolute !important; top:48px !important; bottom:58px !important; max-height:calc(100% - 112px) !important; min-height:180px !important; overflow:hidden !important; pointer-events:auto !important; } .private-window .head{ position:relative !important; z-index:7002 !important; height:32px !important; min-height:32px !important; pointer-events:auto !important; } .private-window .pm-force-close, .private-window .wc{ display:inline-block !important; visibility:visible !important; opacity:1 !important; background:#d9534f !important; color:#fff !important; cursor:pointer !important; pointer-events:auto !important; z-index:7005 !important; } .private-window .phide{ display:inline-block !important; visibility:visible !important; opacity:1 !important; cursor:pointer !important; pointer-events:auto !important; } .private-window .cont{ height:calc(100% - 32px) !important; min-height:130px !important; } .private-window .cont .d2{ height:calc(100% - 48px) !important; max-height:calc(100% - 48px) !important; overflow:auto !important; } .private-window .footer{ position:absolute !important; bottom:0 !important; left:0 !important; right:0 !important; z-index:7003 !important; } .pm-on-top{ z-index:7500 !important; } /* ===== VOICE SETTINGS ACTIONS LIKE VIDEO ===== */ #settings .voice-settings-actions{ width:98% !important; margin:6px auto 0 auto !important; direction:rtl !important; text-align:center !important; direction:rtl !important; clear:both !important; } #settings .voice-setting-select{ display:block !important; width:100% !important; height:34px !important; margin:4px 0 !important; padding:0 10px !important; border:1px solid #222 !important; border-radius:2px !important; background:#566473 !important; color:#fff !important; font:bold 14px "Times New Roman",Times,serif !important; direction:rtl !important; text-align:center !important; } #settings .voice-setting-select option{ background:#566473 !important; color:#fff !important; font:bold 13px "Times New Roman",Times,serif !important; } #settings .voice-setting-btn{ display:block !important; width:100% !important; min-height:36px !important; line-height:24px !important; margin:4px 0 !important; padding:7px 8px !important; border:1px solid #222 !important; border-radius:2px !important; text-align:center !important; direction:rtl !important; font:bold 14px "Times New Roman",Times,serif !important; cursor:pointer !important; box-sizing:border-box !important; } #settings .voice-setting-btn .fa, #settings .voice-setting-btn span{ margin:0 6px !important; } #settings .voice-info{ background:#3fb4e8 !important; color:#fff !important; } #settings .voice-light{ background:#f8f8ff !important; color:#111 !important; } #settings .voice-danger{ background:#d64a55 !important; color:#fff !important; } #settings .voice-btn-pic{ width:28px !important; height:28px !important; margin:-4px 4px -4px 4px !important; border:1px solid #9cc !important; float:left !important; } #settings .voice-setting-btn .fa-check{ color:#111 !important; } /* ===== USER PROVIDED ROOM MODAL STYLE ===== */ .th-mkr-modal{ z-index:8000 !important; } .th-mkr-modal .modal-dialog{ width:480px !important; max-width:96vw !important; margin:18px auto !important; } .th-mkr-content{ border-radius:6px !important; overflow:hidden !important; border:1px solid #7d92a3 !important; box-shadow:0 6px 22px rgba(0,0,0,.22) !important; background:#f3f3f3 !important; } .th-mkr-header{ background:#426b86 !important; color:#fff !important; height:34px !important; min-height:34px !important; padding:6px 8px !important; display:block !important; } .th-mkr-title{ margin:0 !important; color:#fff !important; font:bold 14px "Times New Roman",Times,serif !important; } .th-mkr-body{ padding:5px !important; background:#f3f3f3 !important; } .th-mkr-box{ position:relative !important; min-height:400px !important; background:#f3f3f3 !important; padding:5px !important; direction:rtl !important; } .th-mkr-input{ width:260px !important; height:28px !important; display:block !important; margin:4px 0 4px auto !important; padding:0 8px !important; border:1px solid #bdbdbd !important; background:#fff !important; color:#333 !important; font:bold 13px "Times New Roman",Times,serif !important; box-sizing:border-box !important; text-align:right !important; } .th-mkr-color-wrap{ position:absolute !important; top:5px !important; left:12px !important; width:115px !important; height:34px !important; } .th-mkr-color-btn{ width:115px !important; height:31px !important; background:#000 !important; border:1px solid #000 !important; border-radius:0 !important; } .th-mkr-pic{ position:absolute !important; top:44px !important; left:12px !important; width:115px !important; height:92px !important; object-fit:cover !important; border:1px solid #999 !important; background:#fff !important; cursor:pointer !important; } .th-mkr-delpic{ position:absolute !important; top:142px !important; left:12px !important; width:115px !important; height:30px !important; line-height:30px !important; border:1px solid #666 !important; background:#fff !important; color:#111 !important; text-align:center !important; cursor:pointer !important; font:bold 13px "Times New Roman",Times,serif !important; } .th-mkr-label{ display:inline-block !important; margin-right:8px !important; font:bold 13px "Times New Roman",Times,serif !important; color:#111 !important; } .th-mkr-box .checkbox-inline{ display:block !important; margin:5px 0 !important; padding-right:0 !important; font:bold 13px "Times New Roman",Times,serif !important; color:#111 !important; text-align:right !important; } .th-mkr-box .checkbox-inline input{ margin:0 0 0 5px !important; } .th-mkr-box .rmake, .th-mkr-box .rsave{ margin:8px 0 6px 4px !important; height:33px !important; background:#426b86 !important; color:#fff !important; border:1px solid #2c5368 !important; font:bold 13px "Times New Roman",Times,serif !important; } .th-mkr-box .rdelete{ margin:8px 4px 6px 0 !important; height:33px !important; background:#d9534f !important; color:#fff !important; border:1px solid #b33 !important; } .th-mkr-ops{ clear:both !important; width:100% !important; min-height:40px !important; max-height:125px !important; overflow:auto !important; padding:3px !important; background:#eee !important; border:1px solid #777 !important; box-sizing:border-box !important; } /* ===== END USER PROVIDED ROOM MODAL STYLE ===== */ /* ===== ROOM MODAL CLOSE ALWAYS ACTIVE ===== */ .th-mkr-header .th-mkr-close, .th-mkr-header .clickable, .th-mkr-header .fa-times{ display:inline-flex !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important; cursor:pointer !important; z-index:99999 !important; position:relative !important; } .th-mkr-header{ pointer-events:auto !important; } /* ===== CUSTOM PERMISSION BUTTON STYLE ===== */ .cp,.pmsg,.redit,.ugift,.unot,.uwarn,.ukick,.uban,.utempban,.usmute,.uprivmute,.udelpic,.urkick,.umod,.upower,.kashf,.subs,.shrt{ transition:opacity .15s ease, filter .15s ease !important; } .permission-disabled, button:disabled, input:disabled, textarea:disabled{ opacity:.55 !important; cursor:not-allowed !important; } .target-locked{ opacity:.7 !important; filter:grayscale(.35) !important; } .pm-disabled{ opacity:.75 !important; } /* ===== END CUSTOM PERMISSION BUTTON STYLE ===== */ .cp-denied{direction:rtl;text-align:center;color:#b00;font:bold 16px "Times New Roman",Times,serif;padding:25px!important;background:#fff!important;border:1px solid #c99!important} /* ===== FULL SUPER PROFILE ADMIN PANEL ===== */ #upro .modal-dialog{width:340px!important;max-width:96vw!important;margin:10px auto!important} #upro .upro-card{border-radius:0!important;overflow:hidden!important} #upro .upro-body{padding:0!important;max-height:calc(100vh - 60px)!important;overflow:auto!important;background:#fff!important} #upro.simple-view .upro-admin-area{display:none!important} #upro:not(.simple-view) .upro-admin-area{display:block!important;border-top:2px solid #999!important;margin-top:6px!important;background:#fff!important} #upro .upro-edit-row{display:flex!important;align-items:center!important;gap:4px!important;margin:4px 0!important;width:100%!important;direction:rtl!important} #upro .upro-edit-label{background:#2f6380!important;color:#fff!important;min-width:64px!important;height:28px!important;line-height:28px!important;text-align:center!important;font:bold 13px "Times New Roman",Times,serif!important;padding:0 4px!important} #upro .upro-edit-label.red{color:#f00!important;background:#fff!important;text-align:right!important} #upro .upro-edit-label.blue{color:#08f!important;background:#fff!important;text-align:right!important} #upro .upro-edit-input{height:28px!important;border:1px solid #aaa!important;flex:1!important;min-width:0!important;padding:0 5px!important;background:#fff!important} #upro .upro-save-btn{width:58px!important;height:32px!important;border:1px solid #000!important;background:#fff!important;color:#111!important;font:bold 13px "Times New Roman",Times,serif!important} #upro .block-row{display:flex!important} #upro .powerbox.block-row,#upro .roombox.block-row{padding:0 4px!important;box-sizing:border-box!important} #upro .userpower,#upro .upro-room-select{width:100%!important} #upro .upro-room-pass{flex:1!important} #upro .upro-action-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:3px!important;padding:4px!important} #upro .upro-btn{display:flex!important;align-items:center!important;justify-content:center!important;height:33px!important;border:1px solid #eee!important;background:#fff!important;font:bold 12px "Times New Roman",Times,serif!important} #upro.simple-view .upro-action-grid .upro-btn{display:none!important} #upro.simple-view .upro-action-grid .upm, #upro.simple-view .upro-action-grid .unot, #upro.simple-view .upro-action-grid .ulike, #upro.simple-view .upro-action-grid .umute{display:flex!important} /* ===== REBUILT FILTER PANEL ===== */ #filters{direction:rtl;text-align:right;background:#fff!important;min-height:100vh;padding:0 0 20px 0!important} .filter-panel{width:330px;max-width:96vw;margin:0 0 0 auto;background:#fff;color:#111;font:bold 12px "Times New Roman",Times,serif} .filter-tools{padding:4px 6px;border-left:1px solid #ddd} .filter-input{width:160px;height:23px;border:1px solid #555;margin-bottom:6px;padding:0 5px;display:block} .filter-btn{width:165px;height:32px;display:block;margin:6px 0;border:0;color:#fff;font:bold 12px "Times New Roman",Times,serif;cursor:pointer} .filter-btn.green{background:#62bd55}.filter-btn.red{background:#df4b4b}.filter-btn.cyan{background:#39bfc0}.filter-btn.blue{background:#2f79b7}.filter-btn.dark{background:#245d79} .filter-section-title{height:25px;line-height:25px;font:bold 12px "Times New Roman",Times,serif;color:#111;margin-top:5px} .filter-hit{width:220px;min-height:48px;border:1px solid #111;margin:0 0 4px auto;background:#f8f8f8;padding:4px;position:relative;direction:ltr;text-align:left} .filter-hit-title{background:#285b78;color:#fff;padding:4px 12px;display:inline-block;margin-bottom:2px} .filter-x{background:#e44d55!important;color:#fff!important;border:0!important;width:28px!important;height:28px!important;line-height:24px!important;font:bold 20px "Times New Roman",Times,serif!important;cursor:pointer!important;text-align:center!important} .filter-hit .filter-x{position:absolute;right:-32px;top:-1px} .filter-mini-table{width:300px;margin:4px 0 8px auto} .filter-mini-title{background:#2b5f80;color:#fff;height:26px;line-height:26px;text-align:center;width:110px;margin-right:auto;font:bold 12px "Times New Roman",Times,serif} .filter-mini-table table,.filter-log-table table{border-collapse:collapse;width:100%;background:#fff} .filter-mini-table th,.filter-mini-table td,.filter-log-table th,.filter-log-table td{border:1px solid #111;height:28px;padding:3px;font:bold 12px "Times New Roman",Times,serif;vertical-align:middle} .filter-mini-table th,.filter-log-table th{background:#4d86dc;color:#fff;text-align:center} .filter-kind{width:105px;text-align:center}.filter-word{text-align:center}.filter-del{width:30px;text-align:center} .filter-log-table{width:100%;margin-top:10px;overflow:auto} .empty{text-align:center;color:#777;background:#fafafa} /* ===== ROOMS CP RESTORED STYLE ===== */ #rooms{direction:rtl;text-align:right;background:#fff!important;min-height:100vh;padding:0!important} .rooms-shot-wrap{width:360px;max-width:96vw;margin:0 0 0 auto;background:#fff;font:bold 12px "Times New Roman",Times,serif} .rooms-toolbar{padding:5px;border-bottom:1px solid #ddd;display:flex;gap:5px;justify-content:flex-start} .room-seed-btn,.room-add-btn{background:#2f6380;color:#fff;border:0;height:28px;padding:0 8px;font:bold 12px "Times New Roman",Times,serif;cursor:pointer} .room-add-btn{background:#43a9e6} .rooms-shot-table{width:100%;border-collapse:collapse;background:#fff} .rooms-shot-table th{background:#2f6380;color:#fff;border:1px solid #111;height:25px;text-align:center} .rooms-shot-table td{border:1px solid #ccc;height:43px;padding:2px;vertical-align:middle} .room-gear-btn{background:#43a9e6;color:#fff;border:0;width:28px;height:28px;border-radius:3px;cursor:pointer} .room-img{width:38px;height:38px;object-fit:cover} .room-pic-cell{width:42px;text-align:center}.room-cfg{width:42px;text-align:center}.room-users-cell{width:50px;text-align:center}.room-index{width:40px;text-align:center} .room-name-cell b{font:bold 13px "Times New Roman",Times,serif;color:#111}.room-name-cell div{font:12px "Times New Roman",Times,serif;color:#666;margin-top:2px} #roomModalBox .room-modal{position:fixed;top:40px;right:390px;width:335px;background:#eee;border:1px solid #444;z-index:99999;box-shadow:0 2px 12px rgba(0,0,0,.35);direction:rtl} #roomModalBox .room-modal-head{height:28px;line-height:28px;background:#2f6380;color:#fff;font:bold 13px "Times New Roman",Times,serif;padding:0 8px} #roomModalBox .room-modal-close{float:left;background:#e44d55;color:#fff;border:0;width:24px;height:24px;margin-top:2px;cursor:pointer} #roomModalBox .room-modal-body{padding:8px} #roomModalBox .room-field{display:block;width:210px;height:26px;border:1px solid #999;margin:4px 0;padding:0 5px} #roomModalBox .pic-edit-row{display:flex;gap:8px} #roomModalBox .room-modal-pic{width:88px;height:88px;object-fit:cover;background:#ffc400;border:1px solid #999;display:block} #roomModalBox .room-mini-btn{width:88px;height:26px;margin-top:5px;border:1px solid #999;background:#fff} #roomModalBox .room-checks label{display:block;margin:6px 0;font:bold 12px "Times New Roman",Times,serif} #roomModalBox .room-save{background:#2f6380;color:#fff;border:0;height:32px;padding:0 12px;font:bold 12px "Times New Roman",Times,serif} #roomModalBox .room-del{float:left;background:#e44d55;color:#fff;border:0;height:32px;width:50px;font:bold 18px "Times New Roman",Times,serif} #roomModalBox .room-unban{margin-top:8px;border:1px solid #777;height:32px;line-height:32px;background:#fff;padding:0 5px} #roomModalBox .room-unban button{float:left;background:#e44d55;color:#fff;border:0;width:32px;height:32px;font:bold 20px "Times New Roman",Times,serif} .site-mini-save{background:#2f6380;color:#fff;border:0;height:28px;padding:0 10px;font:bold 12px "Times New Roman",Times,serif;margin:4px 0;cursor:pointer} .site-mini-save:hover{filter:brightness(1.1)} /* ===== CLEAN ADDONS COLORS + MIC ONLY ===== */ #plugins{background:#fff!important;min-height:100vh!important;direction:rtl!important;text-align:right!important;padding:0!important} .addons-clean-page{width:420px;max-width:96vw;margin:0 auto 30px 0;background:#fff;font:bold 12px "Times New Roman",Times,serif;color:#111} .addons-red-bar{height:20px;line-height:20px;background:#dc3d45;color:#111;margin:4px 0;font:bold 12px "Times New Roman",Times,serif;padding-right:2px} .addons-row{display:grid;grid-template-columns:75px 48px 185px;gap:4px;align-items:center;margin:3px 0} .addons-row label{font:bold 12px "Times New Roman",Times,serif;text-align:left} .addons-row input[type=color]{width:48px;height:28px;border:1px solid #333;padding:2px} .addons-row input:not([type]),.addons-row input[type=text]{height:26px;border:1px solid #777;padding:0 5px} .addons-apply{background:#fff;color:#111;border:1px solid #111;height:28px;padding:0 12px;font:bold 12px "Times New Roman",Times,serif;margin:4px 0;cursor:pointer} .addons-blue-title{display:inline-block;background:#2f6380;color:#fff;height:28px;line-height:28px;padding:0 10px;font:bold 13px "Times New Roman",Times,serif;margin:4px 0} .addons-mic-box{width:390px;border-top:1px solid #ddd;border-bottom:1px solid #ddd;margin:4px 0;padding:4px 0} .addons-label{display:block;margin:5px 0 2px 0;font:bold 12px "Times New Roman",Times,serif} .addons-mic-box select,.addons-mic-box>input{width:250px;height:26px;border:1px solid #777;box-sizing:border-box} .addons-img-url{display:grid;grid-template-columns:28px 28px 250px;gap:3px;align-items:center} .addons-img-url input{height:26px;border:1px solid #777;min-width:0} .addons-del{background:#df5555;color:#fff;border:0;width:28px;height:28px;font:bold 14px "Times New Roman",Times,serif;cursor:pointer} .addons-plus{background:#3aaee8;color:#fff;border:0;width:28px;height:28px;font:bold 18px "Times New Roman",Times,serif;cursor:pointer} .addons-preview{width:260px;border:1px solid #bbb;margin-top:8px;background:#f7f7f7;padding:5px;text-align:center} .addons-prev-head{height:24px;line-height:24px;color:#fff} .addons-prev-content{height:35px;line-height:35px;border:1px solid #ddd;margin-top:3px} .addons-prev-btn{height:24px;border:0;color:#fff;margin:3px} .addons-prev-mic{display:inline-block;width:32px;height:24px;border:1px solid #222;margin:2px} .old-site-page .old-color-block,.old-site-page .old-micbox,.old-site-page #oldPreview{display:none!important} /* ===== SITE MANAGEMENT EXACT SCREENSHOT STYLE ===== */ #site{background:#fff!important;min-height:100vh!important;direction:rtl!important;text-align:right!important;padding:0!important;overflow:auto!important} .sc-page{width:500px;max-width:98vw;margin:0 auto 50px 0;background:#fff;color:#111;font:bold 12px "Times New Roman",Times,serif;padding:0 0 20px 0} .sc-main-title{background:#55c4e8;color:#fff;border:0;height:30px;line-height:30px;padding:0 12px;font:bold 13px "Times New Roman",Times,serif;margin:0 0 5px 0} .sc-blue-label{display:block;background:#2f6380;color:#fff;width:max-content;padding:4px 8px;font:bold 12px "Times New Roman",Times,serif;margin-top:4px} .sc-page textarea{width:260px;height:44px;border:1px solid #777;display:block;resize:vertical;font:12px "Times New Roman",Times,serif;margin:0 0 3px auto;padding:4px;box-sizing:border-box} .sc-color-row{display:grid;grid-template-columns:74px 48px 185px;gap:4px;align-items:center;width:315px;margin:3px auto 3px 0} .sc-color-row span{font:bold 12px "Times New Roman",Times,serif;text-align:left} .sc-color-row input[type=color]{width:48px;height:28px;border:1px solid #333;padding:2px;background:#fff} .sc-color-row input:not([type]){height:26px;border:1px solid #777;padding:0 5px;box-sizing:border-box} .sc-red-title{border-top:1px solid #ddd;color:#c40000;font:bold 12px "Times New Roman",Times,serif;margin:12px 0 8px 0;padding-top:8px;width:405px} .sc-num-row{display:grid;grid-template-columns:72px 1fr;gap:6px;align-items:center;margin:5px 0;width:405px} .sc-num-row input{width:72px;height:25px;border:1px solid #555;padding:0 4px;box-sizing:border-box;text-align:left} .sc-num-row span{font:bold 12px "Times New Roman",Times,serif} .sc-check-row{display:block;margin:8px 0;font:bold 12px "Times New Roman",Times,serif;width:405px} .sc-check-row input{accent-color:#b34fd3} .sc-save{background:#c94653;color:#fff;border:1px solid #7c1118;height:32px;padding:0 14px;font:bold 13px "Times New Roman",Times,serif;margin:12px 0;cursor:pointer} .sc-icon-section{width:390px;margin:15px 0 8px 0;clear:both} .sc-blue-btn{display:inline-block;background:#2f6380;color:#fff;border:0;height:30px;line-height:30px;padding:0 10px;font:bold 12px "Times New Roman",Times,serif} .sc-plus{background:#2f6380!important;color:#fff!important;border:0!important;width:32px!important;height:30px!important;font:bold 18px "Times New Roman",Times,serif!important;cursor:pointer!important;vertical-align:top} .sc-icons-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:4px;margin-top:8px;width:330px} .sc-icon-box{display:grid;grid-template-columns:28px 50px 26px;gap:2px;align-items:center;border:1px solid #111;background:#fff;width:106px;height:34px;box-sizing:border-box} .sc-icon-box img,.sc-empty-icon{width:28px;height:28px;object-fit:contain;background:#f8f8f8;display:block} .sc-icon-box input{width:50px;height:24px;border:1px solid #777;box-sizing:border-box;text-align:center} .sc-del{background:#d94c55!important;color:#fff!important;border:0!important;width:26px!important;height:32px!important;font:bold 18px "Times New Roman",Times,serif!important;cursor:pointer!important} /* feature classes applied to chat */ .site-disable-room-likes .room-like,.site-disable-room-likes .rlike{display:none!important} .site-disable-private-read .read-mark,.site-disable-private-read .seen-mark{display:none!important} .site-hide-subscription .subscription,.site-hide-subscription .level,.site-hide-subscription .ustat{display:none!important} /* ===== END SITE MANAGEMENT EXACT SCREENSHOT STYLE ===== */ /* ===== Modern Filter Page ===== */ #filters{direction:rtl!important;text-align:right!important;background:#f5f7fb!important;min-height:100vh!important;padding:14px!important;color:#111!important} #filters .filter-panel{width:100%!important;max-width:1280px!important;margin:0 auto!important;background:transparent!important;font:13px "Times New Roman",Times,serif!important;color:#111!important} #filters .filter-header{background:linear-gradient(90deg,#235a78,#2c83c7)!important;color:#fff!important;border-radius:10px!important;padding:12px 16px!important;margin-bottom:12px!important;box-shadow:0 2px 8px rgba(0,0,0,.08)!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important} #filters .filter-header h3{margin:0!important;font:bold 18px "Times New Roman",Times,serif!important;color:#fff!important} #filters .filter-header small{opacity:.92!important;font-size:12px!important} #filters .filter-tools{background:#fff!important;border:1px solid #d8e1ea!important;border-radius:10px!important;padding:12px!important;margin-bottom:12px!important;display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;box-shadow:0 1px 4px rgba(0,0,0,.05)!important} #filters .filter-input{width:260px!important;max-width:100%!important;height:38px!important;border:1px solid #c6d4e1!important;border-radius:8px!important;margin:0!important;padding:0 12px!important;display:block!important;font:13px "Times New Roman",Times,serif!important;background:#fff!important;color:#111!important;outline:none!important} #filters .filter-input:focus{border-color:#2c83c7!important;box-shadow:0 0 0 3px rgba(44,131,199,.14)!important} #filters .filter-btn{width:auto!important;min-width:135px!important;height:38px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;margin:0!important;border:0!important;border-radius:8px!important;color:#fff!important;font:bold 12px "Times New Roman",Times,serif!important;cursor:pointer!important;padding:0 12px!important;box-shadow:0 2px 5px rgba(0,0,0,.12)!important;transition:.15s ease!important;white-space:nowrap!important} #filters .filter-btn:hover{transform:translateY(-1px)!important;filter:brightness(1.05)!important} #filters .filter-btn.green{background:#39b36b!important}#filters .filter-btn.red{background:#d9534f!important}#filters .filter-btn.cyan{background:#27a8b8!important}#filters .filter-btn.blue{background:#2c83c7!important}#filters .filter-btn.dark{background:#235a78!important} #filters .filter-grid{display:grid!important;grid-template-columns:repeat(3,minmax(240px,1fr))!important;gap:12px!important;margin-bottom:12px!important} #filters .filter-card,#filters .filter-latest,#filters .filter-log-table{background:#fff!important;border:1px solid #d8e1ea!important;border-radius:10px!important;box-shadow:0 1px 4px rgba(0,0,0,.05)!important;overflow:hidden!important;margin:0!important} #filters .filter-section-title,#filters .filter-mini-title{height:auto!important;line-height:1.3!important;background:#235a78!important;color:#fff!important;margin:0!important;padding:10px 12px!important;text-align:right!important;width:auto!important;font:bold 13px "Times New Roman",Times,serif!important;border:0!important} #filters .filter-mini-table{width:100%!important;margin:0!important;background:#fff!important} #filters .filter-mini-table table,#filters .filter-log-table table{border-collapse:collapse!important;width:100%!important;background:#fff!important;table-layout:auto!important} #filters .filter-mini-table th,#filters .filter-mini-table td,#filters .filter-log-table th,#filters .filter-log-table td{border:1px solid #e3e9ef!important;height:34px!important;padding:7px!important;font:13px "Times New Roman",Times,serif!important;vertical-align:middle!important;text-align:center!important;color:#111!important;background:#fff!important} #filters .filter-mini-table th,#filters .filter-log-table th{background:#2c83c7!important;color:#fff!important;font:bold 13px "Times New Roman",Times,serif!important;position:static!important} #filters .filter-kind{width:120px!important;text-align:center!important;color:#235a78!important;font-weight:bold!important}.filter-word{text-align:center!important}.filter-del{width:46px!important;text-align:center!important} #filters .filter-x{background:#d9534f!important;color:#fff!important;border:0!important;width:28px!important;height:28px!important;line-height:28px!important;border-radius:7px!important;font:bold 18px "Times New Roman",Times,serif!important;cursor:pointer!important;text-align:center!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important} #filters .filter-x:hover{filter:brightness(.95)!important;transform:scale(1.04)!important} #filters .filter-latest{padding-bottom:10px!important;margin-bottom:12px!important} #filters .filter-hit{width:auto!important;min-height:auto!important;border:1px solid #e3e9ef!important;border-radius:8px!important;margin:8px 10px!important;background:#fbfcfe!important;padding:8px 38px 8px 10px!important;position:relative!important;direction:rtl!important;text-align:right!important;color:#111!important} #filters .filter-hit-title{background:#e9f3ff!important;color:#235a78!important;border:1px solid #c5d9ef!important;border-radius:6px!important;padding:3px 8px!important;display:inline-block!important;margin-bottom:4px!important;font-weight:bold!important} #filters .filter-hit .filter-x{position:absolute!important;right:8px!important;top:8px!important} #filters .filter-log-table{width:100%!important;margin-top:12px!important;overflow:auto!important} #filters .filter-log-table table{min-width:780px!important} #filters .empty{padding:14px!important;text-align:center!important;color:#777!important;background:#fff!important;font:13px "Times New Roman",Times,serif!important} /* ===== ANNOUNCEMENT DIALOG + CHAT ANNOUNCEMENT ===== */ .announce-dialog-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:2147483647;display:flex;align-items:center;justify-content:center;padding:20px;direction:rtl} .announce-dialog{width:310px;max-width:92vw;background:#f7f7f7;border:1px solid #707070;border-radius:6px;overflow:hidden;box-shadow:0 8px 26px rgba(0,0,0,.28)} .announce-dialog-head{background:#9e0000;color:#fff;padding:7px 10px;font:bold 20px "Times New Roman",Times,serif;position:relative;line-height:1} .announce-dialog-head .fa-bullhorn{margin-left:6px} .announce-dialog-close{position:absolute;left:8px;top:6px;width:22px;height:22px;border-radius:50%;background:#777;color:#fff;border:0;font:bold 15px "Times New Roman",Times,serif;cursor:pointer;line-height:22px;padding:0} .announce-dialog-body{padding:8px 8px 6px;background:#fff} .announce-dialog-text{width:100%;height:46px;resize:none;border:1px solid #444;border-radius:3px;background:#fff;padding:6px 8px;font:bold 20px "Times New Roman",Times,serif;color:#111;box-sizing:border-box} .announce-dialog-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0;background:#fff} .announce-dialog-check{display:flex;align-items:center;gap:6px;color:#333;font:bold 13px "Times New Roman",Times,serif;padding:6px 2px 0 2px} .announce-dialog-check input{margin:0} .announce-dialog-send{border:0;background:#9e0000;color:#fff;padding:8px 14px;font:bold 22px "Times New Roman",Times,serif;cursor:pointer;display:inline-flex;align-items:center;gap:6px;border-radius:0 0 0 0} .announce-dialog-send .fa{font-size:18px} .announce-dialog-note{padding:0 2px 6px;color:#666;font:12px "Times New Roman",Times,serif} .admin-public-msg{background:#eef4ff!important;border:1px solid #bfd2f6!important;border-right:4px solid #2575d0!important;box-shadow:inset 0 0 0 1px #f8fbff} .admin-public-msg .u-topic{background:transparent!important;color:#000!important;font-weight:bold!important;max-width:88%!important} .admin-public-msg .u-msg{color:#111!important;line-height:1.7!important} .admin-public-msg .announce-badge-icon{display:inline-flex!important;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#2f84c6;color:#fff!important;font-size:11px!important;margin-left:5px;vertical-align:middle;box-shadow:0 1px 3px rgba(0,0,0,.18)} .admin-public-msg.supers-only-msg .announce-badge-icon{background:#9e0000!important} .admin-public-msg .announce-badge-icon:before{line-height:1} .admin-public-msg .u-topic-wrap{display:flex;align-items:center;gap:4px;max-width:82%} .admin-public-msg .u-topic{max-width:100%!important} /* ===== SEPARATE ANNOUNCEMENT BLOCK ===== */ .chat-announcement{display:flex;align-items:flex-start;justify-content:flex-start;gap:10px;background:#eef3ff;border-top:1px solid #d4d9e7;border-bottom:1px solid #d4d9e7;padding:6px 8px;margin:0;width:100%;box-sizing:border-box;direction:ltr;text-align:left} .chat-announcement-avatar{width:44px;height:44px;flex:0 0 44px;border:1px solid #bfc7d9;background-color:#fff;background-size:contain!important;background-repeat:no-repeat!important;background-position:center center!important;order:0} .chat-announcement-content{min-width:0;flex:1;text-align:left;order:1} .chat-announcement-head{line-height:1.1;margin-bottom:3px;text-align:left} .chat-announcement-name{font:bold 14px "Times New Roman",Times,serif;color:#111;text-decoration:underline;display:inline-block;text-align:left} .chat-announcement-body{line-height:1.5;color:#111;font:normal 14px "Times New Roman",Times,serif;word-break:break-word;text-align:left} .chat-announcement-badge{display:inline-flex;align-items:center;gap:4px;color:#145ee7;font:bold 13px "Times New Roman",Times,serif;margin-right:7px;white-space:nowrap} .chat-announcement-badge i{font-size:12px;color:#145ee7} .chat-announcement-badge small{font-size:11px;color:#9e0000;margin-left:3px} .chat-announcement-text{color:#111} /* ===== ENHANCED BUTTON FEEDBACK ===== */ button.btn, .btn, a.btn, input[type=button], input[type=submit], .sendbtn, .announce-dialog-send, #roomModalBox .room-save, #roomModalBox .room-del, #roomModalBox .room-unban button, #roomModalBox .room-mini-btn, #roomModalBox .room-upload-btn, #roomModalBox .room-seed-btn { border-radius: 10px !important; border: 1px solid rgba(0,0,0,.14) !important; box-shadow: 0 3px 10px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.18) !important; transition: transform .08s ease, box-shadow .15s ease, filter .15s ease, opacity .15s ease !important; position: relative; } button.btn:hover, .btn:hover, a.btn:hover, input[type=button]:hover, input[type=submit]:hover, .sendbtn:hover, .announce-dialog-send:hover, #roomModalBox .room-save:hover, #roomModalBox .room-del:hover, #roomModalBox .room-unban button:hover, #roomModalBox .room-mini-btn:hover, #roomModalBox .room-upload-btn:hover, #roomModalBox .room-seed-btn:hover { filter: brightness(1.05) saturate(1.04) !important; box-shadow: 0 6px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.2) !important; } button.btn:active, .btn:active, a.btn:active, input[type=button]:active, input[type=submit]:active, .sendbtn:active, .announce-dialog-send:active, #roomModalBox .room-save:active, #roomModalBox .room-del:active, #roomModalBox .room-unban button:active, #roomModalBox .room-mini-btn:active, #roomModalBox .room-upload-btn:active, #roomModalBox .room-seed-btn:active { transform: translateY(2px) scale(.985) !important; box-shadow: 0 2px 6px rgba(0,0,0,.16), inset 0 2px 6px rgba(0,0,0,.12) !important; filter: brightness(.96) !important; } button.btn:focus-visible, .btn:focus-visible, a.btn:focus-visible, input[type=button]:focus-visible, input[type=submit]:focus-visible, .sendbtn:focus-visible, .announce-dialog-send:focus-visible { outline: 0 !important; box-shadow: 0 0 0 3px rgba(77,141,202,.22), 0 6px 16px rgba(0,0,0,.18) !important; } /* ===== MODERN PROFILE ACTION BUTTONS ===== */ #upro .upro-action-grid{ gap: 8px !important; padding: 4px 10px 12px !important; } #upro .upro-btn, #upro.simple-view .upro-btn{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; gap:6px !important; min-height:40px !important; padding:7px 8px !important; border-radius:12px !important; border:1px solid #d8e3ef !important; background:linear-gradient(180deg,#ffffff 0%,#f5f9ff 100%) !important; box-shadow:0 3px 10px rgba(32,74,120,.10), inset 0 1px 0 rgba(255,255,255,.88) !important; text-decoration:none !important; font:bold 12.5px "Times New Roman",Times,serif !important; transition:transform .08s ease, box-shadow .15s ease, background .15s ease, filter .15s ease !important; } #upro.simple-view .upro-btn{min-height:38px !important;} #upro .upro-btn:hover, #upro.simple-view .upro-btn:hover{ background:linear-gradient(180deg,#ffffff 0%,#edf5ff 100%) !important; box-shadow:0 6px 16px rgba(32,74,120,.16), inset 0 1px 0 rgba(255,255,255,.9) !important; transform:translateY(-1px) !important; } #upro .upro-btn:active, #upro.simple-view .upro-btn:active{ transform:translateY(2px) scale(.985) !important; background:linear-gradient(180deg,#edf5ff 0%,#e4eefb 100%) !important; box-shadow:0 2px 6px rgba(32,74,120,.14), inset 0 2px 6px rgba(0,0,0,.08) !important; } #upro .upro-btn i, #upro.simple-view .upro-btn i{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:20px !important; min-width:20px !important; font-size:15px !important; } #upro .upro-btn span, #upro.simple-view .upro-btn span{ white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; max-width:100% !important; } #upro .upro-btn.upm{color:#6b4de6 !important;} #upro .upro-btn.unot{color:#3b5872 !important;} #upro .upro-btn.ulike{color:#e11d48 !important;} #upro .upro-btn.ugift{color:#1d7ff2 !important;} #upro .upro-btn.uh{color:#2c597a !important;} #upro .upro-btn.udelpic, #upro .upro-btn.ukick, #upro .upro-btn.uban, #upro .upro-btn.utempban, #upro .upro-btn.usmute, #upro .upro-btn.uprivmute, #upro .upro-btn.uwarn{color:#df2b2b !important;} #upro .upro-btn.ufeature{color:#ff4aa3 !important;} #upro .upro-btn.urkick, #upro .upro-btn.umod{color:#8747d6 !important;} #upro .upro-btn.umute, #upro .upro-btn.uunmute, #upro .upro-btn.ustatusbuzz{color:#2067d8 !important;} #upro .upro-btn.hidden-by-perm{display:none !important;} /* ===== PROFILE COMPACT FIX + COUNTRY/ROOM HEADER ===== */ #upro .modal-dialog{width:370px !important;max-width:96vw !important;margin:10px auto !important;} #upro .modal-content.upro-card{overflow:hidden !important;border-radius:14px !important;border:1px solid #cdd8e3 !important;box-shadow:0 14px 36px rgba(24,48,78,.18) !important;} #upro .upro-body{display:flex !important;flex-direction:column !important;padding:0 0 10px !important;overflow-x:hidden !important;background:#fff !important;} #upro .upro-banner{display:none !important;} #upro .upro-meta-line{order:1 !important;direction:ltr !important;display:flex !important;justify-content:space-between !important;align-items:center !important;gap:8px !important;padding:10px 12px !important;background:#f8fbff !important;border-top:0 !important;border-bottom:1px solid #e7eef6 !important;} #upro .upro-country{order:1 !important;direction:rtl !important;display:inline-flex !important;align-items:center !important;gap:6px !important;min-width:0 !important;font-size:13px !important;font-weight:bold !important;color:#244d72 !important;} #upro .upro-country .upro-country-flag{width:22px !important;height:15px !important;border:1px solid #cfd8e3 !important;border-radius:2px !important;display:inline-block !important;box-shadow:0 1px 2px rgba(0,0,0,.08);} #upro .upro-country .upro-country-name{white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;max-width:180px !important;display:inline-block !important;} #upro .upro-roomtag{order:2 !important;display:flex !important;justify-content:flex-end !important;min-width:0 !important;} #upro .upro-roomtag .roomh{display:inline-flex !important;align-items:center !important;gap:5px !important;float:none !important;background:linear-gradient(180deg,#163c6a,#102a48) !important;color:#fff !important;border:1px solid #082038 !important;border-radius:8px !important;padding:3px 8px !important;max-width:168px !important;min-height:30px !important;box-shadow:0 4px 10px rgba(16,42,72,.18) !important;} #upro .upro-roomtag .upro-room-pic{width:18px !important;height:18px !important;border-radius:3px !important;object-fit:cover !important;background:#fff !important;} #upro .upro-roomtag .upro-room-title{display:inline-block !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;max-width:125px !important;} #upro .upro-topbox{order:2 !important;display:flex !important;align-items:center !important;gap:10px !important;padding:12px !important;min-height:auto !important;background:#fff !important;} #upro .upro-avatar{width:96px !important;height:96px !important;flex:0 0 96px !important;border:1px solid #d9e2ec !important;border-radius:18px !important;background-size:cover !important;background-repeat:no-repeat !important;background-position:center center !important;box-shadow:0 6px 18px rgba(0,0,0,.08) !important;} #upro .upro-maininfo{display:block !important;flex:1 !important;min-width:0 !important;padding:0 !important;margin:0 !important;} #upro .upro-name-line{font-size:22px !important;color:#18324d !important;line-height:1.25 !important;margin:0 0 6px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;} #upro .upro-status-row{font-size:14px !important;color:#3f4f5f !important;min-height:20px !important;white-space:normal !important;word-break:break-word !important;margin:0 !important;} #upro .upro-camera{left:auto !important;top:18px !important;z-index:2 !important;background:#ffffff !important;border:1px solid #d7e1eb !important;box-shadow:0 3px 8px rgba(0,0,0,.08) !important;} #upro .upro-register-state{order:3 !important;padding:4px 12px 8px !important;font-size:16px !important;color:#6d5b5b !important;} #upro .upro-action-grid{order:4 !important;display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:8px !important;padding:0 10px 10px !important;overflow:hidden !important;} #upro .upro-btn{min-width:0 !important;} #upro .upro-admin-area{order:5 !important;padding:0 10px 12px !important;overflow:hidden !important;} #upro .upro-edit-row{display:flex !important;align-items:center !important;gap:6px !important;flex-wrap:nowrap !important;min-width:0 !important;} #upro .upro-edit-label{flex:0 0 82px !important;width:82px !important;} #upro .upro-edit-input{flex:1 1 auto !important;min-width:0 !important;max-width:100% !important;box-sizing:border-box !important;} #upro .upro-save-btn{flex:0 0 58px !important;width:58px !important;min-width:58px !important;border-radius:8px !important;} #upro .upro-edit-row.roombox{flex-wrap:wrap !important;} #upro .upro-edit-row.roombox .upro-edit-label{flex:0 0 100% !important;width:100% !important;} #upro .upro-edit-row.roombox .upro-edit-input{width:100% !important;} #upro.simple-view .upro-meta-line{padding:8px 10px !important;} #upro.simple-view .upro-topbox{padding:10px !important;} #upro.simple-view .upro-avatar{width:86px !important;height:86px !important;flex:0 0 86px !important;} #upro.simple-view .upro-maininfo{display:block !important;} #upro.simple-view .upro-country{width:auto !important;text-align:right !important;} #upro.simple-view .upro-roomtag{width:auto !important;text-align:left !important;} #upro.simple-view .upro-action-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:8px !important;padding:0 8px 8px !important;} /* ===== PROFILE FINAL SCROLL + ORDER FIX ===== */ #upro .modal-dialog{ width:370px !important; max-width:96vw !important; margin:8px auto !important; } #upro .modal-content.upro-card{ max-height:calc(100vh - 16px) !important; display:flex !important; flex-direction:column !important; overflow:hidden !important; } #upro .upro-head{ flex:0 0 auto !important; position:sticky !important; top:0 !important; z-index:5 !important; } #upro .upro-body{ display:block !important; max-height:calc(100vh - 68px) !important; overflow-y:auto !important; overflow-x:hidden !important; padding:0 0 12px !important; background:#fff !important; } #upro .upro-meta-line, #upro .upro-topbox, #upro .upro-register-state, #upro .upro-action-grid, #upro .upro-admin-area{ width:100% !important; box-sizing:border-box !important; } #upro .upro-topbox{ display:flex !important; align-items:center !important; gap:10px !important; padding:12px !important; } #upro .upro-action-grid{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important; padding:0 10px 10px !important; overflow:visible !important; } #upro .upro-btn{ min-height:44px !important; padding:8px 6px !important; } #upro .upro-btn span{ white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } #upro .upro-admin-area{ padding:0 10px 16px !important; overflow:visible !important; } #upro .upro-edit-row{ display:flex !important; align-items:center !important; gap:6px !important; width:100% !important; min-width:0 !important; } #upro .upro-edit-input{ min-width:0 !important; } #upro .upro-save-btn{ min-width:56px !important; } #upro.simple-view .upro-body{ max-height:calc(100vh - 68px) !important; overflow-y:auto !important; } /* ===== PRIVATE IMAGE/FILE MESSAGE PREVIEW ===== */ .chat-image-message{display:block;max-width:260px;margin:4px 0;} .chat-image-message a{display:inline-block;border-radius:10px;overflow:hidden;border:1px solid #d8e2ed;background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.08);} .chat-image-message img{display:block;max-width:260px;max-height:220px;width:auto;height:auto;object-fit:contain;background:#fff;} .chat-file-message{display:inline-flex;align-items:center;gap:6px;border:1px solid #cfe1f5;border-radius:10px;background:#f5faff;color:#1768b3!important;padding:7px 10px;text-decoration:none!important;font:bold 13px "Times New Roman",Times,serif;} .chat-file-message:hover{filter:brightness(.98);} .private-window .chat-image-message img{max-width:240px;max-height:210px;} /* ===== LOGIN STEALTH EYE BUTTON ===== */ #l2 .stealth-eye-btn{ float:right; display:inline-flex; align-items:center; justify-content:center; width:34px; height:30px; margin:0 4px 0 0; border-radius:6px; background:transparent; color:#000; cursor:pointer; border:0; transition:background .12s ease, color .12s ease, transform .08s ease, box-shadow .12s ease; } #l2 .stealth-eye-btn input{display:none!important;} #l2 .stealth-eye-btn i{font-size:16px;line-height:1;} #l2 .stealth-eye-btn:hover{background:#e9f7fd;} #l2 .stealth-eye-btn.active{ background:#56c5e9; color:#111; box-shadow:0 2px 6px rgba(0,0,0,.14); } #l2 .stealth-eye-btn:active{transform:translateY(1px) scale(.96);} /* ===== PRESENCE STATUS COLORS ===== */ .offline-sticky-user{opacity:.78 !important;} .offline-sticky-user .u-topic{filter:grayscale(.25);} .offline-sticky-user .u-msg{color:#7f8c8d !important;} /* ===== FRONT SITE BANNER FROM CONTROL PANEL ===== */ #frontSiteBanner.front-site-banner{ width:100%; height:145px; overflow:hidden; position:relative; background:#07192b; border-bottom:1px solid rgba(0,0,0,.25); box-sizing:border-box; } #frontSiteBanner .front-site-banner-img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center center; } #frontSiteBanner .front-site-refresh{ position:absolute; top:7px; right:7px; width:36px; height:36px; border:0; border-radius:4px; background:#49c755; color:#fff; font-size:18px; line-height:36px; text-align:center; box-shadow:0 3px 10px rgba(0,0,0,.25); cursor:pointer; } #frontSiteBanner .front-site-refresh:active{transform:translateY(1px) scale(.98);} /* ===== CLEAN WALL / SETTINGS REBUILD ===== */ #wall.tab-pane{display:none !important;} #wall.tab-pane.active{display:flex !important;} .dpnl.tab-content{padding-bottom:0 !important;} .dpnl > .tab-pane{ height:100% !important; min-height:0 !important; box-sizing:border-box !important; } #settings, #users, #rooms, #chats, #wall{ height:100% !important; min-height:0 !important; box-sizing:border-box !important; } #settings, #users, #rooms, #chats{ overflow-y:auto !important; overflow-x:hidden !important; } #wall{ display:flex !important; flex-direction:column !important; overflow:hidden !important; background:#eef0f4 !important; } #wallStories{ flex:0 0 auto !important; width:100% !important; padding:6px 6px 4px !important; overflow-x:auto !important; overflow-y:hidden !important; white-space:nowrap !important; background:#f8f8fb !important; border-bottom:1px solid #d8dce4 !important; box-sizing:border-box !important; } #wallStories .story-bubble{display:inline-flex !important; flex-direction:column !important; align-items:center !important; width:62px !important; margin:0 4px !important; vertical-align:top !important;} #wallStories .story-thumb{width:52px !important; height:52px !important; border-radius:50% !important; background:#ddd center/cover no-repeat !important; border:2px solid #2a7fd1 !important; box-shadow:0 0 0 2px #fff inset !important;} #wallStories .story-owner-ring{position:relative !important;width:58px !important;height:58px !important;display:flex !important;align-items:center !important;justify-content:center !important;border-radius:50% !important;isolation:isolate !important;} #wallStories .story-owner-ring:before{content:"" !important;position:absolute !important;inset:0 !important;border-radius:50% !important;background:conic-gradient(from 0deg,#00eaff,#7857ff,#ff3fb4,#ffd84a,#46ff9a,#00eaff) !important;animation:storyMagicSpin 2.1s linear infinite !important;box-shadow:0 0 7px rgba(67,184,255,.85),0 0 12px rgba(255,63,180,.4) !important;z-index:0 !important;} #wallStories .story-owner-ring:after{content:"" !important;position:absolute !important;inset:3px !important;border-radius:50% !important;background:#fff !important;z-index:1 !important;} #wallStories .story-owner-bubble .story-thumb{position:relative !important;width:50px !important;height:50px !important;border:0 !important;box-shadow:none !important;z-index:2 !important;overflow:hidden !important;background-color:#ddd !important;background-image:var(--story-owner-pic) !important;background-position:center !important;background-size:cover !important;background-repeat:no-repeat !important;} #wallStories .story-owner-bubble .story-name{display:none !important;} #wallStories .story-owner-bubble .story-thumb > img.story-owner-photo{ position:absolute!important;inset:0!important;width:100%!important;height:100%!important; min-width:0!important;max-width:none!important;max-height:none!important; margin:0!important;padding:0!important;border:0!important;border-radius:50%!important; display:block!important;object-fit:cover!important;object-position:center!important;z-index:1!important; } #wallStories .story-owner-label{position:absolute !important;left:2px !important;right:2px !important;bottom:2px !important;z-index:4 !important;display:block !important;height:15px !important;padding:0 2px !important;border-radius:8px !important;background:rgba(0,0,0,.68) !important;color:#fff !important;font:700 9px/15px "Times New Roman",Times,serif !important;text-align:center !important;direction:rtl !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;box-sizing:border-box !important;} @keyframes storyMagicSpin{to{transform:rotate(360deg)}} #wallStories .story-name{font-size:11px !important; line-height:14px !important; color:#333 !important; margin-top:4px !important; max-width:60px !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; text-align:center !important;} #wallStories .add-story .story-thumb{display:flex !important; align-items:center !important; justify-content:center !important; background:#11345d !important; color:#fff !important; border-color:#11345d !important;} #wallStories .add-story .story-thumb span{font-size:20px !important;} #wall .d2bc{ flex:1 1 auto !important; min-height:0 !important; height:auto !important; overflow-y:auto !important; overflow-x:hidden !important; padding:0 0 8px 0 !important; box-sizing:border-box !important; } #wall .wall-input-box{ flex:0 0 48px !important; min-height:48px !important; max-height:48px !important; display:flex !important; align-items:center !important; gap:6px !important; flex-wrap:nowrap !important; padding:6px !important; background:#fff !important; border-top:1px solid #d5d9e0 !important; box-sizing:border-box !important; overflow:hidden !important; } #wall .wall-input-box > *{ float:none !important; margin:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; } #wall .wall-input-box .story-upload-btn, #wall .wall-input-box .sndfilebc, #wall .wall-input-box .emobc{ width:32px !important; min-width:32px !important; height:32px !important; flex:0 0 32px !important; border-radius:8px !important; } #wall .wall-input-box .emobc{padding:2px !important;} #wall .wall-input-box .tboxbc{ flex:1 1 auto !important; width:auto !important; min-width:0 !important; height:32px !important; max-height:32px !important; padding:5px 8px !important; line-height:20px !important; resize:none !important; box-sizing:border-box !important; } #wall .wall-input-box .sndbc{ width:64px !important; min-width:64px !important; height:32px !important; flex:0 0 64px !important; border-radius:10px !important; } #wall .wall-attach-box{display:block !important; margin-top:6px !important; max-width:100% !important;} #wall .wall-attach-img{display:block !important; max-width:100% !important; max-height:230px !important; border-radius:10px !important;} #wall .wall-attach-video{display:block !important; max-width:100% !important; max-height:250px !important; border-radius:10px !important; background:#000 !important;} #wall .wall-attach-audio{display:block !important; width:100% !important;} #wall .wall-attach-link{display:inline-block !important; padding:6px 10px !important; border-radius:8px !important; background:#eef5ff !important; color:#0f2f56 !important; font-weight:700 !important;} /* ===== PUBLIC MESSAGE ACTIONS: delete then reply ===== */ #d2 .mm{position:relative !important;} #d2 .chat-message-actions{ position:absolute !important; top:1px !important; right:2px !important; z-index:4 !important; display:flex !important; direction:ltr !important; flex-flow:row nowrap !important; align-items:center !important; gap:2px !important; width:auto !important; height:22px !important; margin:0 !important; padding:0 !important; float:none !important; } #d2 .chat-message-action, #d2 .chat-reply-btn, #d2 .delmsg-btn{ display:inline-flex !important; align-items:center !important; justify-content:center !important; flex:0 0 22px !important; width:22px !important; min-width:22px !important; max-width:22px !important; height:22px !important; min-height:22px !important; max-height:22px !important; margin:0 !important; padding:0 !important; float:none !important; border:0 !important; border-radius:0 !important; background:var(--final-chat-color, var(--chat-buttons, #4f807d)) !important; color:#fff !important; font-size:12px !important; line-height:22px !important; cursor:pointer !important; touch-action:manipulation !important; -webkit-tap-highlight-color:transparent !important; } #d2 .chat-message-action i{margin:0 !important;padding:0 !important;line-height:1 !important;} #d2 .chat-message-action:active{filter:brightness(.82);} #d2 .mm>.tago{ position:absolute !important; top:25px !important; right:2px !important; margin:0 !important; padding:0 2px !important; float:none !important; z-index:5 !important; min-width:22px !important; height:16px !important; line-height:16px !important; text-align:center !important; white-space:nowrap !important; background:transparent !important; } /* Keep the member name at the original top line while actions stay overlaid. */ #d2 .mm>.u-pic + .tago + .uzr{ margin-top:0 !important; clear:none !important; } /* ===== MIC ICON CONTROL PANEL FIX ===== */ #freshVoiceBar .fresh-mic-seat, .room-mic-btn, .room-mic-slot, .room-mic-seat{ background-repeat:no-repeat !important; background-position:center !important; } /* ========================================================= ORIGINAL VERSION PATCH - rooms layout + stable room save - الشريط على اليمين - الصور يسار - الاسم/الوصف بالوسط - العداد يمين ========================================================= */ #rooms{ direction:ltr !important; overflow-y:auto !important; overflow-x:hidden !important; background:#ffffff !important; box-sizing:border-box !important; } #rooms > *{ direction:rtl !important; } #rooms > .bgg:first-child, #rooms > .label-primary:first-child{ width:100% !important; height:31px !important; min-height:31px !important; line-height:31px !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:#d80000 !important; background-image:none !important; box-sizing:border-box !important; } #rooms > .bgg:first-child .btn, #rooms > .label-primary:first-child .btn{ float:left !important; margin:3px 0 0 4px !important; height:24px !important; line-height:22px !important; padding:0 10px !important; border-radius:4px !important; border:1px solid #fff !important; background:#2eaa57 !important; color:#fff !important; font:bold 12px "Times New Roman",Times,serif !important; } #rooms .room, #rooms .room-row{ display:block !important; float:none !important; clear:both !important; width:100% !important; min-height:46px !important; padding:6px 64px 6px 40px !important; margin:0 !important; position:relative !important; box-sizing:border-box !important; overflow:hidden !important; background:#f6f6f6 !important; border:0 !important; border-bottom:1px solid #d6d6d6 !important; border-top:1px solid #ffffff !important; direction:rtl !important; } #rooms .room.active-room, #rooms .room.current-room, #rooms .room.inroom{ box-shadow:inset 0 0 0 1px #2f80ed !important; background:#f8fbff !important; } #rooms .room .uc, #rooms .room .room-count{ position:absolute !important; top:8px !important; right:6px !important; left:auto !important; float:none !important; min-width:56px !important; height:22px !important; line-height:22px !important; padding:0 5px !important; margin:0 !important; border:0 !important; border-radius:2px !important; background:#e00000 !important; color:#fff !important; text-align:center !important; font:bold 12px "Times New Roman",Times,serif !important; box-sizing:border-box !important; } #rooms .room .room-pic, #rooms .room .u-pic{ position:absolute !important; top:8px !important; left:8px !important; right:auto !important; width:28px !important; height:28px !important; margin:0 !important; float:none !important; object-fit:cover !important; background:#fff !important; border:0 !important; border-radius:2px !important; box-shadow:none !important; } #rooms .room .room-meta, #rooms .room > div.fl{ float:none !important; width:100% !important; margin:0 !important; padding:0 !important; overflow:hidden !important; text-align:right !important; direction:rtl !important; box-sizing:border-box !important; } #rooms .room .u-topic{ display:block !important; width:100% !important; margin:0 !important; padding:0 !important; color:#111 !important; background:transparent !important; border:0 !important; border-radius:0 !important; text-align:right !important; direction:rtl !important; font:bold 12px "Times New Roman",Times,serif !important; line-height:16px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } #rooms .room .u-msg{ display:block !important; width:100% !important; margin:2px 0 0 0 !important; padding:0 !important; color:#8b8b8b !important; font:11px "Times New Roman",Times,serif !important; line-height:13px !important; text-align:right !important; direction:rtl !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } #rooms .room .room-lock{ display:inline-block !important; width:12px !important; height:12px !important; margin:0 0 0 3px !important; vertical-align:-2px !important; float:none !important; } /* ===== REMOVE DEFAULT YELLOW ROOM SQUARES ===== إخفاء صورة الغرفة الافتراضية الصفراء فقط، مع إبقاء الصور المرفوعة ظاهرة. ===== */ #rooms .room .u-pic[src$="/imgs/s1.png"], #rooms .room .u-pic[src$="imgs/s1.png"], #rooms .room .u-pic[src$="s1.png"], #rooms .room .room-pic[src$="/imgs/s1.png"], #rooms .room .room-pic[src$="imgs/s1.png"], #rooms .room .room-pic[src$="s1.png"]{ display:none !important; visibility:hidden !important; } /* إزالة المربعات/الزيادات من عداد الغرف */ #rooms .room .uc, #rooms .room .room-count{ background-image:none !important; box-shadow:none !important; text-shadow:none !important; overflow:hidden !important; min-width:52px !important; padding:0 4px !important; } #rooms .room .uc:before, #rooms .room .room-count:before, #rooms .room .uc:after, #rooms .room .room-count:after, #rooms .room .fa-user:before{ display:none !important; content:none !important; } #rooms .room .label, #rooms .room .label-primary{ background-image:none !important; } /* إصلاح عدم تفاعل أزرار تعديل الغرفة */ #mkr .rsave, #mkr .rmake, #mkr .rdelete, #mkr .th-mkr-color-btn, #mkr .roomcolor, #mkr .broadcast, #mkr .nouser, #mkr .bnrroom, #mkr .rdel{ pointer-events:auto !important; cursor:pointer !important; position:relative !important; z-index:10 !important; } #mkr .rsave span, #mkr .rmake span, #mkr .rdelete span{ pointer-events:none !important; } #mkr.th-mkr-modal, #mkr .modal-dialog, #mkr .modal-content{ pointer-events:auto !important; } /* ===== ROOT ROOM MODAL REBUILD OVERRIDE ===== */ #mkr, #mkr *{ pointer-events:auto !important; } #mkr .modal-dialog{ z-index:90000 !important; } #mkr .modal-content{ position:relative !important; z-index:90001 !important; } #mkr .rsave,#mkr .rmake,#mkr .rdelete{ position:relative !important; z-index:90005 !important; pointer-events:auto !important; cursor:pointer !important; opacity:1 !important; } #mkr .rsave span,#mkr .rmake span,#mkr .rdelete span{pointer-events:none !important;} #mkr .th-mkr-ops,#ops{ pointer-events:auto !important; } #mkr input,#mkr button,#mkr label,#mkr .picroom,#mkr .th-mkr-pic{ pointer-events:auto !important; } #mkr button:disabled{ opacity:.75 !important; } /* ===== STRICT PERMISSION HIDE ===== */ .perm-hidden, #upro .perm-hidden, #settings .perm-hidden, #rooms .perm-hidden, .voice-settings-actions .perm-hidden, #upro.simple-view .perm-hidden, #upro.simple-view .upro-action-grid .perm-hidden{ display:none !important; visibility:hidden !important; pointer-events:none !important; } /* ===== END STRICT PERMISSION HIDE ===== */ /* ===== DEFAULT THEME RESTORE GUARD ===== The Te3b/Qalbi login banner is part of the custom theme only. When custom-theme.css is disabled from admin, these raw HTML blocks must stay hidden so the original/default chat layout does not stretch or break. */ #mainLoginBanner, #mainLoginLinks { display: none; } /* ===== DEFAULT STYLE REPAIR FOR LOGIN PAGE ===== */ body.theme-default-style { background: #a80000 !important; } body.theme-default-style .dad{ position: relative !important; width: 100% !important; height: 100vh !important; max-width: none !important; margin: 0 !important; } body.theme-default-style #tlogins{ position: absolute !important; top: 36px !important; left: 50% !important; transform: translateX(-50%) !important; width: min(420px, 96vw) !important; max-width: min(420px, 96vw) !important; min-width: 320px !important; height: calc(100vh - 52px) !important; min-height: 620px !important; max-height: calc(100vh - 52px) !important; margin: 0 !important; background: #f5f5f5 !important; border: 1px solid #6b0d0d !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; z-index: 1000 !important; } body.theme-default-style #tlogins + #room{display:none !important;} body.theme-default-style #tlogins > a.label{ flex: 0 0 auto !important; width: 100% !important; padding: 6px 8px !important; background: #a80000 !important; border-radius: 0 !important; color: #fff !important; text-align: left !important; border-bottom: 1px solid #7c0000 !important; } body.theme-default-style #tlogins > a.label img{ width: 28px !important; height: 28px !important; object-fit: cover !important; } body.theme-default-style #tlogins > a.label button{ background: #71c84c !important; border-color: #71c84c !important; color: #fff !important; border-radius: 2px !important; } body.theme-default-style #mainLoginBanner, body.theme-default-style #mainLoginLinks, body.theme-default-style #frontFaceButtons, body.theme-default-style #frontFaceMarquee{display:none !important;} body.theme-default-style #frontSiteBanner{ flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; position: relative !important; overflow: hidden !important; border-bottom: 1px solid #d7d7d7 !important; background: #fff !important; } body.theme-default-style #frontSiteBanner .front-site-banner-img{ display: block !important; width: 100% !important; height: 125px !important; object-fit: contain !important; background: #fff !important; } body.theme-default-style #frontSiteBanner .front-site-refresh{ position: absolute !important; top: 6px !important; right: 6px !important; width: 34px !important; height: 34px !important; background: #71c84c !important; border: 1px solid #71c84c !important; border-radius: 3px !important; color: #fff !important; } body.theme-default-style #tlogins .nav-tabs, body.theme-default-style #tlogins #l1, body.theme-default-style #tlogins #l2, body.theme-default-style #tlogins #l3, body.theme-default-style #tlogins .loginstat, body.theme-default-style #tlogins label[title="المتواجدين الآن"]{ flex: 0 0 auto !important; } body.theme-default-style #tlogins .nav-tabs{ background: #fff !important; border: none !important; padding: 6px 6px 0 6px !important; } body.theme-default-style #tlogins .nav-tabs li{float:right !important; margin:0 0 6px 6px !important;} body.theme-default-style #tlogins .nav-tabs li a{ background: transparent !important; color: #1f5f99 !important; border: none !important; padding: 8px 10px !important; } body.theme-default-style #tlogins .tab-pane{ padding: 8px 6px 4px 6px !important; width: 100% !important; } body.theme-default-style #tlogins input.border.corner{ width: calc(100% - 54px) !important; max-width: calc(100% - 54px) !important; border: 1px solid #444 !important; border-radius: 0 !important; background: #fff !important; margin-bottom: 6px !important; } body.theme-default-style #tlogins .tab-pane button.btn.btn-primary{ float: left !important; margin-top: -37px !important; margin-left: 0 !important; width: 40px !important; height: 34px !important; padding: 0 !important; border-radius: 0 !important; background: #a80000 !important; border-color: #7f0000 !important; } body.theme-default-style #tlogins .stealth-eye-btn{ float: left !important; margin-top: -34px !important; margin-left: 48px !important; } body.theme-default-style #tlogins .loginstat{ width: calc(100% - 295px) !important; min-width: 80px !important; text-align: center !important; background: #5dbc59 !important; color: #fff !important; margin: 0 !important; border-radius: 0 !important; } body.theme-default-style #tlogins label[title="المتواجدين الآن"]{ width: calc(100% - 90px) !important; margin: 0 !important; border-radius: 0 !important; text-align: center !important; background: #9d0000 !important; color: #fff !important; } body.theme-default-style #tlogins label[title="المتواجدين الآن"] .s1{ background: #7ed957 !important; border-radius: 0 !important; margin-left: 6px !important; } body.theme-default-style #tlogins .lonline{ flex: 1 1 auto !important; width: 100% !important; outline: none !important; border-top: 1px solid #d1d1d1 !important; background: #f3f3f3 !important; overflow-y: auto !important; overflow-x: hidden !important; } body.theme-default-style #tlogins .lonline::-webkit-scrollbar{width:8px;} body.theme-default-style #tlogins .lonline::-webkit-scrollbar-thumb{background:#999;} body.theme-default-style #tlogins .uzr{ margin: 0 !important; border-radius: 0 !important; border-bottom: 1px solid #d6d6d6 !important; background: #f5f5f5 !important; padding: 2px 0 !important; } body.theme-default-style #tlogins .u-pic{ width: 58px !important; height: 58px !important; border-radius: 0 !important; object-fit: cover !important; } body.theme-default-style #tlogins .u-topic{ color: #000 !important; font-weight: bold !important; } body.theme-default-style #tlogins .u-msg, body.theme-default-style #tlogins .u-stat{ color: #666 !important; } /* ===== DEFAULT STYLE REPAIR V2 - CLASSIC REFERENCE ALIGNMENT ===== */ body.theme-default-style, body.theme-default-style .dad{ background:#a00000 !important; } body.theme-default-style #room{ display:none !important; } body.theme-default-style #tlogins{ top:35px !important; left:50% !important; transform:translateX(-50%) !important; width:420px !important; max-width:420px !important; min-width:420px !important; height:calc(100vh - 54px) !important; max-height:calc(100vh - 54px) !important; min-height:650px !important; border:1px solid #5f0000 !important; background:#f4f4f4 !important; overflow:hidden !important; display:flex !important; flex-direction:column !important; } body.theme-default-style #tlogins > a.label{ height:50px !important; line-height:38px !important; background:#a00000 !important; border:0 !important; border-radius:0 !important; padding:6px !important; } body.theme-default-style #tlogins > a.label button{ width:38px !important; height:38px !important; line-height:36px !important; margin:0 !important; background:#68c94a !important; border:0 !important; border-radius:0 !important; } body.theme-default-style #frontSiteBanner{ display:block !important; flex:0 0 auto !important; height:145px !important; width:100% !important; background:#fff !important; border-bottom:1px solid #d0d0d0 !important; overflow:hidden !important; position:relative !important; } body.theme-default-style #frontSiteBanner .front-site-banner-img{ width:100% !important; height:145px !important; display:block !important; object-fit:contain !important; background:#fff !important; } body.theme-default-style #frontSiteBanner .front-site-refresh{ display:none !important; } body.theme-default-style #tlogins .nav.nav-tabs{ height:44px !important; min-height:44px !important; background:#fff !important; border:0 !important; border-bottom:1px solid #e0e0e0 !important; padding:7px 6px !important; margin:0 !important; display:flex !important; justify-content:flex-start !important; align-items:center !important; gap:8px !important; direction:rtl !important; flex:0 0 auto !important; } body.theme-default-style #tlogins .nav.nav-tabs:before, body.theme-default-style #tlogins .nav.nav-tabs:after{display:none !important;content:none !important;} body.theme-default-style #tlogins .nav.nav-tabs > li{ float:none !important; width:auto !important; margin:0 !important; padding:0 !important; } body.theme-default-style #tlogins .nav.nav-tabs > li > a{ height:28px !important; line-height:26px !important; padding:0 10px !important; margin:0 !important; background:transparent !important; color:#1f5f99 !important; border:0 !important; border-radius:0 !important; font:bold 13px "Times New Roman",Times,serif !important; text-decoration:none !important; } body.theme-default-style #tlogins .nav.nav-tabs > li.active > a{ background:#f7f7f7 !important; color:#000 !important; border:1px solid #ddd !important; } body.theme-default-style #tlogins #l1, body.theme-default-style #tlogins #l2, body.theme-default-style #tlogins #l3{ flex:0 0 auto !important; width:100% !important; min-height:72px !important; padding:8px 6px !important; margin:0 !important; background:#fff !important; direction:ltr !important; overflow:visible !important; } body.theme-default-style #tlogins #l1:not(.hid), body.theme-default-style #tlogins #l3:not(.hid){ display:grid !important; grid-template-columns:42px 1fr !important; grid-template-rows:30px !important; gap:5px !important; align-items:start !important; } body.theme-default-style #tlogins #l2:not(.hid){ display:grid !important; grid-template-columns:42px 1fr 28px !important; grid-template-rows:30px 30px !important; gap:5px !important; align-items:start !important; } body.theme-default-style #tlogins #u1, body.theme-default-style #tlogins #u2, body.theme-default-style #tlogins #u3, body.theme-default-style #tlogins #pass1, body.theme-default-style #tlogins #pass2{ width:100% !important; max-width:100% !important; min-width:0 !important; height:28px !important; line-height:28px !important; margin:0 !important; padding:0 6px !important; border:1px solid #222 !important; border-radius:0 !important; background:#fff !important; color:#000 !important; text-align:left !important; font:bold 13px "Times New Roman",Times,serif !important; box-shadow:none !important; } body.theme-default-style #tlogins #u1, body.theme-default-style #tlogins #u3{grid-column:2 !important;grid-row:1 !important;} body.theme-default-style #tlogins #u2{grid-column:2 / 4 !important;grid-row:1 !important;} body.theme-default-style #tlogins #pass1{grid-column:2 !important;grid-row:2 !important;} body.theme-default-style #tlogins #pass2{grid-column:2 !important;grid-row:2 !important;} body.theme-default-style #tlogins #l1 button.btn, body.theme-default-style #tlogins #l2 button.btn, body.theme-default-style #tlogins #l3 button.btn, body.theme-default-style #tlogins button[onclick*="login"]{ position:static !important; float:none !important; grid-column:1 !important; grid-row:2 !important; width:42px !important; height:30px !important; line-height:28px !important; margin:0 !important; padding:0 !important; background:#a00000 !important; border:1px solid #620000 !important; border-radius:0 !important; color:#fff !important; font:bold 13px "Times New Roman",Times,serif !important; box-shadow:none !important; } body.theme-default-style #tlogins #l1 button.btn, body.theme-default-style #tlogins #l3 button.btn{grid-row:1 !important;} body.theme-default-style #tlogins .stealth-eye-btn{ grid-column:3 !important; grid-row:2 !important; position:static !important; float:none !important; width:28px !important; height:28px !important; line-height:28px !important; margin:0 !important; text-align:center !important; color:#000 !important; background:transparent !important; border:0 !important; } body.theme-default-style #tlogins .stealth-eye-btn input{display:none !important;} body.theme-default-style #tlogins .loginstat{ flex:0 0 28px !important; display:block !important; float:none !important; width:50% !important; height:28px !important; line-height:28px !important; margin:0 !important; padding:0 !important; background:#58bd58 !important; color:#fff !important; border-radius:0 !important; text-align:center !important; font:bold 13px "Times New Roman",Times,serif !important; } body.theme-default-style #tlogins label[title="المتواجدين الآن"]{ flex:0 0 30px !important; display:block !important; float:none !important; width:100% !important; height:30px !important; line-height:30px !important; margin:0 !important; padding:0 !important; background:#a00000 !important; color:#fff !important; border-radius:0 !important; text-align:center !important; font:bold 13px "Times New Roman",Times,serif !important; } body.theme-default-style #tlogins label[title="المتواجدين الآن"] .s1{ display:inline-block !important; min-width:36px !important; height:30px !important; line-height:30px !important; padding:0 8px !important; margin:0 0 0 6px !important; background:#75d85b !important; color:#fff !important; border-radius:0 !important; } body.theme-default-style #tlogins .lonline{ flex:1 1 auto !important; height:auto !important; max-height:none !important; min-height:260px !important; width:100% !important; margin:0 !important; padding:0 !important; background:#f3f3f3 !important; outline:none !important; border-top:1px solid #d2d2d2 !important; overflow-y:auto !important; overflow-x:hidden !important; } body.theme-default-style #tlogins .uzr{ min-height:58px !important; margin:0 !important; padding:2px 0 !important; border-bottom:1px solid #d7d7d7 !important; background:#f5f5f5 !important; border-radius:0 !important; } body.theme-default-style #tlogins .u-pic{ width:58px !important; height:58px !important; object-fit:cover !important; border-radius:0 !important; } /* ===== FINAL LOGIN HEIGHT + ROOM DISPLAY FIX ===== */ html,body{min-height:100vh !important;} body.theme-default-style, body.theme-default-style .dad, body.theme-custom-style, body.theme-custom-style .dad{ min-height:100vh !important; } /* الافتراضي: صندوق الدخول يمتد من أعلى لأسفل تقريباً */ body.theme-default-style #tlogins{ position:absolute !important; top:18px !important; left:50% !important; right:auto !important; transform:translateX(-50%) !important; width:min(420px, calc(100vw - 24px)) !important; max-width:min(420px, calc(100vw - 24px)) !important; min-width:320px !important; height:calc(100vh - 36px) !important; min-height:calc(100vh - 36px) !important; max-height:calc(100vh - 36px) !important; display:flex !important; flex-direction:column !important; overflow:hidden !important; } body.theme-default-style #tlogins .nav.nav-tabs, body.theme-default-style #tlogins #l1, body.theme-default-style #tlogins #l2, body.theme-default-style #tlogins #l3, body.theme-default-style #tlogins .loginstat, body.theme-default-style #tlogins label[title="المتواجدين الآن"]{ flex:0 0 auto !important; } body.theme-default-style #tlogins .lonline{ flex:1 1 auto !important; min-height:0 !important; max-height:none !important; height:auto !important; overflow-y:auto !important; overflow-x:hidden !important; } /* بعد الدخول: أظهر الشات الداخلي ولا تبقِ صفحة حمراء */ body.site-in-room, body.site-in-room .dad{ background:var(--site-content-bg, #dfe4e8) !important; } body.site-in-room #room, body.site-in-room #d2, body.site-in-room #d0, body.site-in-room .footer{ display:block !important; visibility:visible !important; opacity:1 !important; } body.site-in-room #frontSiteBanner, body.site-in-room #mainLoginBanner, body.site-in-room #mainLoginLinks, body.site-in-room #frontFaceButtons, body.site-in-room #frontFaceMarquee{ display:none !important; } /* ===== STEP 5 BUTTON ALIGNMENT FIX ===== */ body.theme-default-style #tlogins .nav.nav-tabs{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:6px !important; align-items:stretch !important; justify-items:stretch !important; width:100% !important; box-sizing:border-box !important; } body.theme-default-style #tlogins .nav.nav-tabs > li{ float:none !important; display:block !important; width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; box-sizing:border-box !important; } body.theme-default-style #tlogins .nav.nav-tabs > li > a{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; min-width:0 !important; height:30px !important; line-height:1.2 !important; padding:0 6px !important; margin:0 !important; box-sizing:border-box !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; font-size:12px !important; } /* ===== FIX: remove checkbox squares from login tab buttons ===== */ #tlogins ul.nav.nav-tabs input[type="checkbox"], #tlogins ul.nav.nav-tabs input[type="radio"], #tlogins ul.nav.nav-tabs > li > a input, #tlogins ul.nav.nav-tabs > li > a .checkbox, #tlogins ul.nav.nav-tabs > li > a .radio{ display:none !important; visibility:hidden !important; width:0 !important; height:0 !important; margin:0 !important; padding:0 !important; opacity:0 !important; pointer-events:none !important; } #tlogins ul.nav.nav-tabs > li > a{ gap:0 !important; } /* ===== REAL FIX: remove FontAwesome square icons from login tabs ===== */ #tlogins ul.nav.nav-tabs > li > a:before, #tlogins ul.nav.nav-tabs > li > a:after, #tlogins ul.nav.nav-tabs > li > a.login-tab-clean:before, #tlogins ul.nav.nav-tabs > li > a.login-tab-clean:after{ content:"" !important; display:none !important; width:0 !important; height:0 !important; margin:0 !important; padding:0 !important; } #tlogins ul.nav.nav-tabs > li > a.login-tab-clean{ font-family:"Times New Roman",Times,serif!important; } /* ===== FINAL FULL HEIGHT EDGE-TO-EDGE LOGIN PANEL ===== */ html,body,.dad{ width:100% !important; height:100vh !important; min-height:100vh !important; margin:0 !important; padding:0 !important; overflow:hidden !important; } body.theme-default-style:not(.site-in-room){ background:#a00000 !important; } body.theme-default-style:not(.site-in-room) #tlogins{ top:0 !important; bottom:0 !important; height:100vh !important; min-height:100vh !important; max-height:100vh !important; left:50% !important; transform:translateX(-50%) !important; width:min(420px,100vw) !important; max-width:min(420px,100vw) !important; min-width:320px !important; margin:0 !important; border-radius:0 !important; border-top:0 !important; border-bottom:0 !important; display:flex !important; flex-direction:column !important; overflow:hidden !important; } body.theme-default-style:not(.site-in-room) #tlogins .lonline{ flex:1 1 auto !important; min-height:0 !important; max-height:none !important; height:auto !important; overflow-y:auto !important; } /* ===== FRONT BUTTONS ADMIN LINKING FIX ===== الأزرار الموجودة في #mainLoginLinks هي المعتمدة الآن. يتم تفعيلها/تعطيلها وربط روابطها من لوحة التحكم. تم إلغاء أزرار frontFaceButtons القديمة حتى لا يظهر ستايل مزدوج. */ #frontFaceButtons { display: none !important; } body:not(.site-front-buttons-on) #mainLoginLinks { display: none !important; } body.site-front-buttons-on #mainLoginLinks { display: grid !important; } #mainLoginLinks a { cursor: pointer !important; } body:not(.site-front-buttons-on) #mainLoginLinks a { pointer-events: none !important; } /* ===== STEP 7 WALL / STORY PANEL CLEAN FIX ===== */ .dpnl{ overflow:hidden !important; } .dpnl #wall.tab-pane, .dpnl #wall.tab-pane.active{ height:100% !important; width:100% !important; min-height:0 !important; max-height:100% !important; display:grid !important; grid-template-rows:auto minmax(0,1fr) 48px !important; grid-template-columns:100% !important; overflow:hidden !important; position:relative !important; padding:0 !important; margin:0 !important; box-sizing:border-box !important; background:#eef0f4 !important; } .dpnl #wallStories{ grid-row:1 !important; grid-column:1 !important; position:relative !important; float:none !important; width:100% !important; max-width:100% !important; min-height:78px !important; max-height:96px !important; overflow-x:auto !important; overflow-y:hidden !important; white-space:nowrap !important; box-sizing:border-box !important; z-index:2 !important; } .dpnl #wall #d2bc, .dpnl #wall .d2bc{ grid-row:2 !important; grid-column:1 !important; position:relative !important; float:none !important; display:block !important; width:100% !important; height:100% !important; min-height:0 !important; max-height:100% !important; overflow-y:auto !important; overflow-x:hidden !important; margin:0 !important; padding:0 0 8px 0 !important; box-sizing:border-box !important; z-index:1 !important; } .dpnl #wall .wall-input-box{ grid-row:3 !important; grid-column:1 !important; position:relative !important; float:none !important; display:flex !important; width:100% !important; height:48px !important; min-height:48px !important; max-height:48px !important; margin:0 !important; padding:6px !important; overflow:hidden !important; box-sizing:border-box !important; z-index:3 !important; background:#fff !important; border-top:1px solid #d5d9e0 !important; } .dpnl #wall .wall-input-box:after{ content:"" !important; display:block !important; clear:both !important; } .dpnl #wall .wall-input-box > *{ float:none !important; position:relative !important; margin:0 !important; } .dpnl #wall .story-viewer{ position:absolute !important; inset:0 !important; z-index:50 !important; background:rgba(7,18,36,.92) !important; padding:10px !important; box-sizing:border-box !important; } .dpnl #wall .story-viewer[style*="display:none"], .dpnl #wall .story-viewer[style*="display: none"]{ display:none !important; } .dpnl #wall .story-viewer-inner{ width:100% !important; height:100% !important; display:grid !important; grid-template-rows:auto 1fr auto !important; grid-template-columns:1fr !important; gap:8px !important; overflow:hidden !important; } .dpnl #wall .story-viewer-side, .dpnl #wall .story-viewer-tools{ position:relative !important; z-index:2 !important; } .dpnl #wall .story-media-wrap{ position:relative !important; min-height:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; } .dpnl #wall .story-main-media{ max-width:100% !important; max-height:100% !important; object-fit:contain !important; border-radius:10px !important; } .dpnl #wall .story-caption{ position:absolute !important; left:8px !important; right:8px !important; bottom:8px !important; color:#fff !important; text-align:center !important; text-shadow:0 1px 4px rgba(0,0,0,.75) !important; } /* ===== SETTINGS BUTTON CLICK FIX ===== */ #settings .settings-profile-card{ width:100% !important; margin:1px 0 7px !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:#fff !important; box-sizing:border-box !important; direction:ltr !important; } #settings .settings-profile-field{ display:grid !important; grid-template-columns:1fr !important; width:100% !important; margin:0 0 2px !important; } #settings .settings-profile-field > .label{ justify-self:start !important; width:40% !important; min-width:132px !important; height:25px !important; margin:0 !important; padding:3px 5px !important; border:0 !important; border-radius:0 !important; line-height:19px !important; text-align:center !important; direction:rtl !important; box-sizing:border-box !important; } #settings .settings-profile-field > input{ display:block !important; width:100% !important; min-width:0 !important; height:27px !important; margin:0 !important; padding:2px 4px !important; border:1px solid #777 !important; border-radius:0 !important; background:#fff !important; color:#111 !important; font:bold 14px "Times New Roman",Times,serif !important; box-sizing:border-box !important; outline:0 !important; direction:rtl !important; } #settings .settings-profile-color-row{ display:grid !important; grid-template-columns:minmax(132px,40%) 64px 1fr !important; direction:ltr !important; align-items:center !important; width:100% !important; min-height:25px !important; margin:0 0 1px !important; } #settings .settings-profile-color-row > .label{ width:100% !important; height:25px !important; margin:0 !important; padding:3px 5px !important; border:0 !important; border-radius:0 !important; line-height:19px !important; text-align:center !important; direction:rtl !important; box-sizing:border-box !important; } #settings .settings-profile-color-row > input{ display:block !important; width:64px !important; min-width:64px !important; max-width:64px !important; height:24px !important; margin:0 4px !important; padding:0 !important; border:1px solid #111 !important; border-radius:0 !important; background-color:var(--settings-swatch-color, #fff) !important; background-image:none !important; color:transparent !important; caret-color:transparent !important; text-shadow:none !important; box-sizing:border-box !important; cursor:pointer !important; } #settings .settings-profile-save{ display:flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; float:none !important; clear:both !important; width:100% !important; min-height:36px !important; margin:6px 0 0 !important; padding:5px !important; border:1px solid #16651f !important; border-radius:0 !important; background:#5abd61 !important; color:#fff !important; font:bold 13px "Times New Roman",Times,serif !important; line-height:24px !important; text-align:center !important; box-sizing:border-box !important; } #settings .voice-settings-actions, #settings .voice-settings-actions *{ pointer-events:auto !important; } #settings .voice-setting-btn{ cursor:pointer !important; user-select:none !important; } #settings .voice-setting-btn img, #settings .voice-setting-btn span, #settings .voice-setting-btn i{ pointer-events:none !important; } /* ===== STEP 11 STRICT DPANEL ACTIVE TAB FIX ===== يمنع الحائط/الستوري من الظهور داخل الإعدادات أو الغرف أو الخاص. */ .dpnl > .tab-pane{ display:none !important; } .dpnl > .tab-pane.active, .dpnl > .tab-pane.in.active{ display:block !important; } .dpnl > #wall.tab-pane.active, .dpnl > #wall.tab-pane.in.active{ display:grid !important; } .dpnl > #wall.tab-pane:not(.active), .dpnl > #settings.tab-pane:not(.active), .dpnl > #rooms.tab-pane:not(.active), .dpnl > #users.tab-pane:not(.active), .dpnl > #chats.tab-pane:not(.active){ display:none !important; } .dpnl > #settings.tab-pane.active{ display:block !important; overflow-y:auto !important; overflow-x:hidden !important; } /* ===== GLOBAL COMPACT LOGIN SPACING FIX - DEFAULT STYLE ===== تقليل الفراغات في الستايل الأساسي ليكون متقارب ومتناسق */ body.theme-default-style #frontSiteBanner, body.theme-default-style #mainLoginBanner, body.theme-default-style #mainLoginLinks, body.theme-default-style #frontFaceMarquee, body.theme-default-style #tlogins > a.label, body.theme-default-style #tlogins > a.label-primary{ margin-top:0 !important; margin-bottom:0 !important; } body.theme-default-style #mainLoginBanner{padding:8px 10px 6px !important;} body.theme-default-style #mainLoginLinks{padding:4px 8px !important; gap:4px !important;} body.theme-default-style #frontFaceMarquee{padding:3px 8px !important;} body.theme-default-style #tlogins .nav.nav-tabs{ margin:0 !important; padding:6px 8px 4px !important; gap:6px !important; } body.theme-default-style #tlogins .nav.nav-tabs > li{margin:0 !important;} body.theme-default-style #tlogins #l1.hid, body.theme-default-style #tlogins #l2.hid, body.theme-default-style #tlogins #l3.hid, body.theme-default-style #tlogins .tab-pane.hid, body.theme-default-style #tlogins .tab-pane:not(.active):not(.in){ display:none !important; height:0 !important; min-height:0 !important; max-height:0 !important; padding:0 !important; margin:0 !important; overflow:hidden !important; } body.theme-default-style #tlogins #l1:not(.hid), body.theme-default-style #tlogins #l2:not(.hid), body.theme-default-style #tlogins #l3:not(.hid), body.theme-default-style #tlogins .tab-pane.active, body.theme-default-style #tlogins .tab-pane.in{ display:grid !important; grid-template-columns:1fr !important; grid-auto-rows:auto !important; align-content:start !important; gap:8px !important; min-height:0 !important; height:auto !important; padding:6px 10px 8px !important; margin:0 !important; } body.theme-default-style #tlogins #u1, body.theme-default-style #tlogins #u2, body.theme-default-style #tlogins #u3, body.theme-default-style #tlogins #pass1, body.theme-default-style #tlogins #pass2, body.theme-default-style #tlogins #l1 button.btn, body.theme-default-style #tlogins #l2 button.btn, body.theme-default-style #tlogins #l3 button.btn, body.theme-default-style #tlogins button[onclick*="login"]{ grid-column:1 !important; grid-row:auto !important; margin:0 !important; } body.theme-default-style #tlogins .stealth-eye-btn{margin:0 !important;} body.theme-default-style #tlogins .loginstat, body.theme-default-style #tlogins label[title="المتواجدين الآن"]{ margin-top:0 !important; margin-bottom:0 !important; } /* ===== STEP17 REFRESH LOGIN CLEAN FIX ===== عند تحديث الصفحة يجب إخفاء الشات الداخلي وشريط الإرسال حتى يتم تسجيل الدخول بنجاح. */ body.login-screen-active #room, body.login-screen-active #d2, body.login-screen-active #d0, body.login-screen-active .footer, body:not(.site-in-room) #room, body:not(.site-in-room) #d2, body:not(.site-in-room) #d0, body:not(.site-in-room) .footer{ display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; } body.site-in-room #room, body.site-in-room #d2, body.site-in-room #d0, body.site-in-room .footer{ visibility:visible !important; opacity:1 !important; pointer-events:auto !important; } body.login-screen-active #tlogins, body:not(.site-in-room) #tlogins{ display:flex !important; visibility:visible !important; opacity:1 !important; z-index:9999 !important; } /* ===== USERS LIST ROOM/CHAT GROUPING FIX ===== */ #users .user-group-header{ display:block !important; width:100% !important; height:30px !important; line-height:22px !important; margin:0 !important; padding:4px 8px !important; border:0 !important; border-radius:0 !important; box-sizing:border-box !important; float:none !important; clear:both !important; text-align:center !important; font-weight:700 !important; color:#fff !important; background:#2f6478 !important; } #users .users-inroom-header{ background:#2f6478 !important; } #users .users-chat-header{ background:#2f6478 !important; } #users .uzr{ float:none !important; clear:both !important; width:100% !important; box-sizing:border-box !important; } #users .uzr.inroom{ background:#ffffff !important; } #users .uzr.not-inroom{ background:#fbfbfb !important; } #users .uzr.not-inroom .u-msg:after{ content:""; } #users .user-group-header + .user-group-header{ margin-top:0 !important; } /* ===== USERS PANEL SEARCH TOP + EXIT BUTTONS FIX ===== */ #users{display:flex !important;flex-direction:column !important;overflow-y:auto !important;} #users > #usearch{order:-9999 !important;flex:0 0 auto !important;position:sticky !important;top:0 !important;z-index:20 !important;background:#fff !important;margin:0 !important;} #users > .user-group-header{flex:0 0 auto !important;width:100% !important;margin:0 !important;border-radius:0 !important;padding:6px 4px !important;text-align:center !important;} #users > .uzr:not(.user-group-header){flex:0 0 auto !important;} #btnLeaveRoom{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:4px 7px !important;} /* ===== WALL COMMENTS PANEL ===== */ #wall .wall-comments-panel{ position:fixed !important; top:54px !important; left:auto !important; width:320px !important; max-width:calc(100vw - 36px) !important; height:430px !important; max-height:calc(100vh - 80px) !important; z-index:100050 !important; display:none; flex-direction:column !important; background:#f2f2f2 !important; border:1px solid #1b2846 !important; box-sizing:border-box !important; box-shadow:0 10px 35px rgba(0,0,0,.25) !important; overflow:hidden !important; } #wall .wall-comments-head{ width:100% !important; min-height:32px !important; padding:4px 6px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; background:#04152f !important; color:#fff !important; border-radius:0 !important; } #wall .wall-comments-title{margin:0 !important;color:#fff !important;font-size:14px !important;font-weight:700 !important;} #wall .wall-comments-close{float:none !important;margin:0 !important;padding:2px 9px !important;border-radius:10px !important;line-height:1 !important;font-size:24px !important;font-weight:700 !important;color:#fff !important;background:#8f5f69 !important;border:1px solid #ddd !important;cursor:pointer !important;} #wall .wall-comments-post{ padding:6px !important; border-bottom:1px solid #98a6bc !important; background:#fff !important; overflow:hidden !important; } #wall .wall-comments-origin{display:flex !important;align-items:flex-start !important;gap:8px !important;} #wall .wall-comments-origin-pic{width:46px !important;height:46px !important;border-radius:2px !important;flex:0 0 46px !important;object-fit:cover !important;background:#ddd !important;display:block !important;border:1px solid #d0d0d0 !important;} #wall .wall-comments-origin-topic{font-weight:700 !important;color:#111 !important;line-height:1.4 !important;} #wall .wall-comments-origin-msg{color:#1d4ed8 !important;line-height:1.55 !important;word-break:break-word !important;margin-top:2px !important;} #wall .wall-comments-list{ flex:1 1 auto !important; overflow:auto !important; background:#efefef !important; padding:0 !important; } #wall .wall-comment-item{ display:flex !important; gap:8px !important; padding:6px !important; border-bottom:1px solid #d8d8d8 !important; background:#fff !important; } #wall .wall-comment-pic{width:40px !important;height:40px !important;border-radius:2px !important;flex:0 0 40px !important;object-fit:cover !important;background:#ddd !important;display:block !important;border:1px solid #d0d0d0 !important;} #wall .wall-comment-body{min-width:0 !important;flex:1 1 auto !important;} #wall .wall-comment-line{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:8px !important;} #wall .wall-comment-topic{font-weight:700 !important;color:#111 !important;background:#0a0 !important;color:#fff !important;padding:1px 6px !important;border-radius:3px !important;display:inline-block !important;} #wall .wall-comment-time{font-size:11px !important;color:#666 !important;white-space:nowrap !important;} #wall .wall-comment-msg{margin-top:3px !important;color:#0047b3 !important;line-height:1.5 !important;word-break:break-word !important;} #wall .wall-comments-empty{padding:18px 10px !important;text-align:center !important;color:#666 !important;} #wall .wall-comments-sendbox{ display:flex !important; align-items:center !important; gap:4px !important; padding:4px !important; border-top:1px solid #c8cede !important; background:#fff !important; } #wall .wall-comments-input{flex:1 1 auto !important;resize:none !important;height:32px !important;min-height:32px !important;max-height:72px !important;background:#fff !important;border-radius:0 !important;} #wall .wall-comments-send{flex:0 0 auto !important;min-width:34px !important;height:32px !important;padding:4px 9px !important;} #wall .commentbc-btn{background:#0a2345 !important;border-color:#0a2345 !important;} #wall .commentbc-btn .commentbc-count{font-weight:700 !important;} body.site-wall-comments-disabled #wall .commentbc-btn, body.site-wall-comments-disabled #wallCommentsPanel{display:none !important;} /* ===== WALL IMAGE + YOUTUBE BUTTONS ===== */ #wall .wall-input-box .wall-youtube-btn, #wall .wall-input-box .wall-upload-image-btn{ width:32px !important; min-width:32px !important; height:32px !important; flex:0 0 32px !important; border-radius:4px !important; background:#061a38 !important; color:#fff !important; border:0 !important; font-size:16px !important; display:flex !important; align-items:center !important; justify-content:center !important; } #wall .wall-youtube-box{ position:fixed !important; left:50% !important; top:50% !important; transform:translate(-50%,-50%) !important; width:330px !important; max-width:calc(100vw - 28px) !important; z-index:100200 !important; border-radius:0 0 12px 12px !important; background:#111a34 !important; box-shadow:0 18px 38px rgba(0,0,0,.35) !important; overflow:hidden !important; direction:rtl !important; } #wall .wall-youtube-head{ height:50px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; padding:8px 12px !important; background:#172341 !important; color:#fff !important; box-sizing:border-box !important; } #wall .wall-youtube-title{font-weight:700 !important;font-size:13px !important;display:flex !important;gap:7px !important;align-items:center !important;} #wall .wall-youtube-title .fa{color:#fff !important;} #wall .wall-youtube-close{ width:31px !important;height:31px !important;border:0 !important;border-radius:7px !important; background:#e11d1d !important;color:#fff !important;font-size:24px !important;line-height:28px !important;font-weight:700 !important; } #wall .wall-youtube-body{padding:16px 14px 20px !important;background:#111a34 !important;} #wall .wall-youtube-search-row{ height:38px !important;border:1px solid #34558f !important;border-radius:9px !important; display:flex !important;align-items:center !important;gap:8px !important;padding:0 10px !important;background:#0c1428 !important;color:#a9b7cf !important;margin-bottom:8px !important; } #wall .wall-youtube-search-row input, #wall #wallYoutubeCaption{ width:100% !important;height:30px !important;border:1px solid #34558f !important;border-radius:9px !important; background:#0c1428 !important;color:#fff !important;outline:none !important;padding:4px 8px !important;box-sizing:border-box !important; } #wall .wall-youtube-search-row input{border:0 !important;height:32px !important;padding:0 !important;} #wall .wall-youtube-search-btn{ width:24px !important;height:24px !important;min-width:24px !important;border:0 !important;background:transparent !important;color:#a9b7cf !important;font-size:16px !important;padding:0 !important;cursor:pointer !important; } #wall .wall-youtube-results{ margin-top:10px !important; max-height:260px !important; overflow-y:auto !important; overflow-x:hidden !important; border:1px solid #34558f !important; border-radius:9px !important; padding:8px !important; background:#0c1428 !important; display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important; } #wall .wall-youtube-results:empty{display:none !important;} #wall .wall-youtube-card{ background:#fff !important; border-radius:4px !important; padding:8px !important; cursor:pointer !important; min-height:92px !important; box-sizing:border-box !important; } #wall .wall-youtube-card:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.25) !important;} #wall .wall-youtube-card img{width:100% !important;height:72px !important;object-fit:cover !important;border-radius:3px !important;display:block !important;background:#111 !important;} #wall .wall-youtube-card-title{font-size:11px !important;color:#111 !important;line-height:1.35 !important;margin-top:5px !important;max-height:30px !important;overflow:hidden !important;text-align:right !important;} #wall .wall-youtube-loading,#wall .wall-youtube-empty{grid-column:1 / -1 !important;color:#fff !important;text-align:center !important;padding:20px 6px !important;} #wall .wall-youtube-actions{display:flex !important;justify-content:flex-start !important;margin-top:10px !important;} #wall .wall-youtube-actions .btn{background:#0b4b8f !important;border:0 !important;color:#fff !important;} /* ===== WALL COMPACT ACTION BUTTONS + PANEL WIDTH FIX ===== */ #wall .d2bc .mm{ position:relative !important; min-height:38px !important; } #wall .d2bc .wall-action-btn, #wall .d2bc .likebc-btn, #wall .d2bc .commentbc-btn, #wall .d2bc .delbc-btn{ width:22px !important; min-width:22px !important; max-width:30px !important; height:22px !important; min-height:22px !important; line-height:20px !important; padding:0 !important; margin:0 2px 0 0 !important; border-radius:5px !important; font-size:10px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:2px !important; float:right !important; box-shadow:none !important; } #wall .d2bc .likebc-btn, #wall .d2bc .commentbc-btn{ width:auto !important; padding:0 5px !important; } #wall .d2bc .delbc-btn{ padding:0 !important; background:#7d2486 !important; border-color:#7d2486 !important; } #wall .d2bc .likebc-btn i, #wall .d2bc .commentbc-btn i, #wall .d2bc .delbc-btn:before{ font-size:10px !important; margin:0 !important; } #wall .d2bc .likebc-count, #wall .d2bc .commentbc-count{ font-size:10px !important; line-height:1 !important; margin:0 !important; padding:0 !important; } #wall .d2bc .wall-action-btn:empty:after, #wall .d2bc .delbc-btn:after{ content:"" !important; } #wall .d2bc .delbc-btn{ color:#fff !important; } /* ===== V201 WALL: preserve reference orientation (avatar left, name adjacent) ===== */ #wall #d2bc, #wall .d2bc{ display:flex !important; flex-direction:column !important; align-items:stretch !important; } #wall .d2bc > .mm{ position:relative !important; display:grid !important; grid-template-columns:54px minmax(0,1fr) !important; grid-template-rows:auto !important; column-gap:6px !important; min-height:58px !important; width:100% !important; margin:0 0 -1px 0 !important; padding:3px !important; box-sizing:border-box !important; float:none !important; clear:both !important; direction:ltr !important; overflow:hidden !important; } #wall .d2bc > .mm > .u-pic{ grid-column:1 !important; grid-row:1 !important; width:52px !important; height:52px !important; margin:0 !important; float:none !important; display:block !important; object-fit:cover !important; object-position:center center !important; transform:none !important; scale:1 !important; align-self:start !important; } #wall .d2bc > .mm > .uzr{ grid-column:2 !important; grid-row:1 !important; width:100% !important; min-width:0 !important; padding:0 46px 22px 0 !important; box-sizing:border-box !important; margin:0 !important; float:none !important; display:block !important; direction:ltr !important; text-align:left !important; background:transparent !important; border:0 !important; } #wall .d2bc > .mm > .uzr > div:first-child{ display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:3px !important; width:100% !important; height:auto !important; min-height:18px !important; padding:0 !important; margin:0 !important; float:none !important; } #wall .d2bc > .mm .u-topic{ display:inline-block !important; width:auto !important; max-width:calc(100% - 22px) !important; margin:0 !important; padding:0 3px !important; float:none !important; line-height:18px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; direction:rtl !important; text-align:left !important; } #wall .d2bc > .mm .u-ico{ float:none !important; flex:0 0 auto !important; margin:0 !important; } #wall .d2bc > .mm > .uzr > br{display:none !important;} #wall .d2bc > .mm .u-msg{ display:block !important; width:100% !important; min-height:14px !important; margin:0 !important; padding:0 3px !important; float:none !important; clear:both !important; line-height:1.35 !important; word-break:break-word !important; direction:rtl !important; text-align:left !important; } #wall .d2bc > .mm > .tago{ position:absolute !important; top:2px !important; left:auto !important; right:4px !important; margin:0 !important; padding:0 2px !important; float:none !important; direction:rtl !important; line-height:16px !important; } #wall .d2bc > .mm > .wall-action-btn{ position:relative !important; bottom:auto !important; top:auto !important; right:auto !important; left:auto !important; align-self:end !important; justify-self:end !important; margin-top:1px !important; } #wall .d2bc > .mm > .likebc-btn{position:absolute !important;right:75px !important;bottom:2px !important;} #wall .d2bc > .mm > .commentbc-btn{position:absolute !important;right:38px !important;bottom:2px !important;} #wall .d2bc > .mm > .delbc-btn{position:absolute !important;right:4px !important;bottom:2px !important;} /* Ghostwriter fixes: emoji over wall + youtube thumbs + story visibility */ .popover{z-index:300000 !important;} #wallYoutubeBox{z-index:200050 !important;} #wallYoutubeBox .wall-youtube-results img{display:block !important; width:100% !important; height:84px !important; object-fit:cover !important; background:#111 !important;} #wallStories .story-thumb{background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important;} #storyViewer .story-main-image{object-fit:contain !important; background:#000 !important;} /* Fix story viewer media visibility */ #wall .story-viewer:not(.can-video) .story-main-image{display:block !important;} #wall .story-viewer.can-video .story-main-video{display:block !important;} #wall .story-viewer.can-video .story-main-image{display:none !important;} /* YouTube preview without iframe error */ .wall-youtube-preview{position:relative !important;display:inline-block !important;width:240px !important;max-width:100% !important;background:#111 !important;border-radius:6px !important;overflow:hidden !important;cursor:pointer !important;margin-top:6px !important;} .wall-youtube-preview img{display:block !important;width:100% !important;height:auto !important;min-height:120px !important;object-fit:cover !important;background:#222 !important;} .wall-youtube-preview .wall-youtube-play{position:absolute !important;left:50% !important;top:50% !important;transform:translate(-50%,-50%) !important;color:#fff !important;background:#e62117 !important;border-radius:10px !important;padding:10px 13px !important;font-size:24px !important;box-shadow:0 3px 10px rgba(0,0,0,.35) !important;} /* Inline YouTube wall player rebuild */ .wall-youtube-preview{position:relative !important;display:block !important;width:240px !important;max-width:100% !important;background:#111 !important;border-radius:6px !important;overflow:hidden !important;cursor:pointer !important;margin-top:6px !important;} .wall-youtube-preview img{display:block !important;width:100% !important;height:auto !important;min-height:120px !important;object-fit:cover !important;background:#222 !important;} .wall-youtube-preview .wall-youtube-play{position:absolute !important;left:50% !important;top:50% !important;transform:translate(-50%,-50%) !important;color:#fff !important;background:#111a34cc !important;border-radius:50% !important;width:44px !important;height:44px !important;line-height:44px !important;text-align:center !important;font-size:20px !important;box-shadow:0 3px 10px rgba(0,0,0,.35) !important;} .wall-youtube-inline-player{display:block !important;width:240px !important;max-width:100% !important;margin-top:6px !important;background:#111 !important;border-radius:6px !important;overflow:hidden !important;} .wall-youtube-inline-player iframe{display:block !important;width:100% !important;height:180px !important;border:0 !important;background:#111 !important;} .wall-youtube-inline-player .wall-youtube-open{display:block !important;background:#0a2345 !important;color:#fff !important;text-align:center !important;padding:4px 6px !important;font-size:11px !important;text-decoration:none !important;} /* ===== WALL TITLE + PANEL HEADER STYLE LINK ===== */ .dpnl .pnhead{ background-color:var(--site-button-bg,#438ac7) !important; background-image:none !important; color:#fff !important; border-radius:4px !important; font-weight:700 !important; } .dpnl > label.fa-close, .dpnl > label.fa.fa-close{ background-color:var(--site-button-bg,#438ac7) !important; background-image:none !important; color:#fff !important; } #wall .wall-comments-head, #wallYoutubeBox .wall-youtube-head{ background-color:var(--site-button-bg,#438ac7) !important; background-image:none !important; } /* ===== SUPER VOICE CHANGER ===== */ #voiceChangerMode.super-voice-changer{ border:1px solid #7b2da5 !important; background:#fff !important; color:#222 !important; font-weight:700 !important; } #voiceChangerMode.super-voice-changer option{color:#111 !important;} /* ===== STORY VIDEO UPLOAD + DOWNLOAD FIX ===== */ #wallStories .story-video-bubble .story-thumb{ color:#fff !important; display:flex !important; align-items:center !important; justify-content:center !important; } #wallStories .story-video-mark{ width:26px !important; height:26px !important; border-radius:50% !important; display:flex !important; align-items:center !important; justify-content:center !important; background:rgba(255,255,255,.18) !important; color:#fff !important; font-size:12px !important; position:absolute !important; left:50% !important; top:45% !important; transform:translate(-50%,-50%) !important; z-index:3 !important; box-shadow:0 1px 5px rgba(0,0,0,.75) !important; } #wall .story-download-btn{display:inline-flex !important;} #wall .story-viewer.can-video .story-main-video{ display:block !important; width:auto !important; max-width:min(100%, 980px) !important; max-height:100% !important; object-fit:contain !important; border-radius:18px !important; background:#000 !important; } #wall .story-viewer:not(.can-video) .story-main-image{display:block !important;} #wall .story-viewer.can-video .story-main-image{display:none !important;} .story-upload-progress{background:#eef5ff !important;} /* ===== IP COUNTRY FLAG SYSTEM ===== */ #users .user-country-line{ display:flex !important; align-items:center !important; gap:4px !important; height:16px !important; line-height:16px !important; font-size:11px !important; color:#111 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; direction:rtl !important; } #users .user-country-flag{ width:18px !important; height:12px !important; object-fit:cover !important; border-radius:1px !important; box-shadow:0 0 0 1px rgba(0,0,0,.12) !important; flex:0 0 auto !important; } #users .user-status-line{ display:block !important; height:14px !important; line-height:14px !important; color:#777 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #users .co{ width:18px !important; height:12px !important; object-fit:cover !important; margin:2px 2px 0 2px !important; } .upro-country-flag{ width:20px !important; height:14px !important; object-fit:cover !important; border-radius:2px !important; margin:0 4px !important; vertical-align:middle !important; } .upro-country-name{vertical-align:middle !important;font-weight:700 !important;} /* ===== STORY TOP BUTTONS NO OVERLAP FIX ===== */ #wall .story-viewer .story-viewer-tools, .dpnl #wall .story-viewer .story-viewer-tools{ top:16px !important; right:16px !important; left:auto !important; z-index:30 !important; display:flex !important; flex-direction:row !important; gap:7px !important; align-items:center !important; } #wall .story-viewer .story-icon-btn, .dpnl #wall .story-viewer .story-icon-btn{ width:36px !important; min-width:36px !important; height:36px !important; min-height:36px !important; border-radius:10px !important; font-size:16px !important; padding:0 !important; margin:0 !important; line-height:36px !important; } #wall .story-viewer .story-viewer-head, .dpnl #wall .story-viewer .story-viewer-head{ top:16px !important; left:16px !important; right:150px !important; z-index:25 !important; min-height:52px !important; padding:0 !important; display:flex !important; align-items:center !important; gap:10px !important; overflow:hidden !important; } #wall .story-viewer .story-author-pic, .dpnl #wall .story-viewer .story-author-pic{ width:48px !important; height:48px !important; flex:0 0 48px !important; margin:0 !important; } #wall .story-viewer .story-author-meta, .dpnl #wall .story-viewer .story-author-meta{ flex:1 1 auto !important; min-width:0 !important; overflow:hidden !important; } #wall .story-viewer .story-author-name, #wall .story-viewer .story-author-time{ max-width:100% !important; overflow:hidden !important; text-overflow:ellipsis !important; } #wall .story-viewer .story-media-wrap, .dpnl #wall .story-viewer .story-media-wrap{ padding-top:86px !important; } /* ===== PROFILE FULL IMAGE + VIEWER FIX ===== */ body.profile-image-open{overflow:hidden !important;} #upro .upro-topbox, #upro.simple-view .upro-topbox{ display:block !important; padding:0 !important; background:#fff !important; min-height:0 !important; } #upro .upro-avatar, #upro.simple-view .upro-avatar{ width:100% !important; height:220px !important; flex:none !important; margin:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; background-size:contain !important; background-repeat:no-repeat !important; background-position:center center !important; background-color:#f7f7f7 !important; border-bottom:1px solid #dcdcdc !important; cursor:pointer !important; } #upro .upro-avatar:hover{filter:brightness(.96) !important;} #upro .upro-maininfo, #upro.simple-view .upro-maininfo{ display:block !important; padding:7px 10px !important; margin:0 !important; min-height:auto !important; } #upro .upro-name-line{font-size:18px !important;text-align:right !important;margin:0 0 3px !important;} #upro .upro-status-row{font-size:14px !important;text-align:center !important;} .profile-image-viewer{ position:fixed !important; inset:0 !important; z-index:1000000 !important; background:rgba(0,0,0,.82) !important; display:none; align-items:center !important; justify-content:center !important; padding:34px 0 !important; box-sizing:border-box !important; } .profile-image-viewer-img{ max-width:100vw !important; max-height:calc(100vh - 70px) !important; width:auto !important; height:auto !important; object-fit:contain !important; display:block !important; box-shadow:0 0 0 1px rgba(255,255,255,.15) !important; } .profile-image-viewer-tools{ position:fixed !important; top:10px !important; right:12px !important; z-index:1000002 !important; display:flex !important; gap:8px !important; } .profile-image-viewer-close, .profile-image-viewer-download{ width:34px !important; height:34px !important; border:0 !important; border-radius:50% !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; background:rgba(255,255,255,.18) !important; color:#fff !important; text-decoration:none !important; cursor:pointer !important; font-size:16px !important; } .profile-image-viewer-close:hover, .profile-image-viewer-download:hover{background:rgba(255,255,255,.32) !important;} /* ===== MEMBER GIFTS FIX ===== */ .u-gift{ width:16px !important; height:16px !important; object-fit:contain !important; margin:0 3px 0 0 !important; vertical-align:middle !important; display:inline-block !important; border:0 !important; background:transparent !important; float:left !important; } #users .u-gift,.lonline .u-gift{width:18px !important;height:18px !important;margin-top:2px !important;} .msg .u-gift{width:16px !important;height:16px !important;margin-top:3px !important;} .u-topic + .u-gift{margin-left:0!important;margin-right:3px!important;} #upro .upro-badges{display:block!important;height:auto!important;min-height:28px!important;margin:5px 0!important;} #upro .upro-badges .upro-gift-badge{display:inline-flex!important;align-items:center!important;justify-content:center;width:34px!important;height:34px!important;border:1px solid #ddd!important;border-radius:8px!important;background:#fff!important;padding:3px!important;} #upro .upro-badges .upro-gift-badge img{max-width:100%!important;max-height:100%!important;object-fit:contain!important;} .gift-picker-box img{width:42px!important;height:42px!important;object-fit:contain!important;background:#fff!important;} /* Ignore toggle button active state */ .upro-btn.umute.ignored-active{ background:#fff3cd !important; color:#7a4b00 !important; border-color:#f4c35c !important; } .upro-btn.umute.ignored-active i, .upro-btn.umute.ignored-active span{ color:#7a4b00 !important; } /* === Avatar clarity + slightly larger member pictures === */ #users .uzr, #tlogins .uzr{ min-height: 48px !important; padding-top: 3px !important; padding-bottom: 3px !important; } #users .u-pic, #users img.u-pic, #tlogins .u-pic, #tlogins img.u-pic{ width: 42px !important; height: 42px !important; min-width: 42px !important; max-width: 42px !important; object-fit: cover !important; object-position: center center !important; image-rendering: auto !important; -webkit-optimize-contrast: auto; border-radius: 4px !important; background-color: #fff !important; border: 1px solid rgba(0,0,0,.10) !important; box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset !important; } /* Keep the presence state rail exactly as tall as the member avatar. */ #users .uzr > .ustat, #tlogins .uzr > .ustat, .lonline .uzr > .ustat{ display:block !important; width:4px !important; min-width:4px !important; max-width:4px !important; height:46px !important; min-height:46px !important; max-height:46px !important; margin-top:0 !important; margin-bottom:0 !important; margin-left:1px !important; object-fit:fill !important; border-radius:2px !important; align-self:stretch !important; flex:0 0 4px !important; } #users .u-msg, #tlogins .u-msg{ margin-top: -5px !important; } body.site-in-room #d2 .u-pic, body.site-in-room #d2 img.u-pic, body.site-in-room #d2 .spic, body.site-in-room #d2 img.pic{ width: 44px !important; height: 44px !important; min-width: 44px !important; max-width: 44px !important; object-fit: cover !important; object-position: center center !important; image-rendering: auto !important; border-radius: 4px !important; background-color: #fff !important; border: 1px solid rgba(0,0,0,.10) !important; } body.site-in-room #d2 .uzr{ min-height: 50px !important; } /* === Avatar full-fill fix: clearer, slightly larger, no empty gaps === */ #users .u-pic, #users img.u-pic, #tlogins .u-pic, #tlogins img.u-pic, #d2 .u-pic, #d2 img.u-pic, #upro .u-pic, #upro .upro-avatar, #tlogins .fitimg.u-pic, #users .fitimg.u-pic, #d2 .fitimg.u-pic { width: 46px !important; height: 46px !important; min-width: 46px !important; max-width: 46px !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; object-fit: cover !important; object-position: center center !important; border-radius: 4px !important; overflow: hidden !important; } #users .uzr, #tlogins .uzr, #d2 .uzr{ min-height: 52px !important; } #users .u-msg, #tlogins .u-msg, #d2 .u-msg{ margin-top: -4px !important; } /* === Fix profile avatar full image inside profile popup === */ #upro .upro-topbox{display:block !important;} #upro .upro-avatar, #upro .fitimg.u-pic.upro-avatar{ width: 100% !important; height: 220px !important; min-width: 100% !important; max-width: 100% !important; min-height: 220px !important; max-height: none !important; margin: 0 !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important; background-color: #fff !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center center !important; overflow: hidden !important; } #upro .upro-camera{ left: 12px !important; top: 12px !important; z-index: 3 !important; } /* === Profile buttons function cleanup + text fit === */ #upro .upro-action-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; } #upro .upro-btn{ min-width: 0 !important; min-height: 38px !important; padding: 3px 4px !important; gap: 3px !important; font-size: 11px !important; line-height: 1.15 !important; white-space: nowrap !important; } #upro .upro-btn i{ font-size: 13px !important; flex: 0 0 auto !important; } #upro .upro-btn span{ display: inline-block !important; max-width: calc(100% - 17px) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #upro .upro-btn.uunmute, #upro .upro-btn.uwarn{ display:none !important; } /* === Popup/notification priority over profile and all windows === */ #not, #not > div, #pop, #pop > div, .popover, .tooltip, .modal-backdrop + #not, .ui-tooltip, .ui-dialog, .swal2-container, .alert, .toast, .chat-alert, .chat-toast, .bootbox, .bootbox.modal, .modal.bootbox, .modal.alert-modal{ z-index: 2147483647 !important; pointer-events: auto !important; } #not.hid, #pop.hid{z-index:2147483647 !important;} #not .hand, #not div, #pop .hand, #pop div{ pointer-events:auto !important; } #upro.modal, #upro{ z-index: 2100 !important; } .modal-backdrop{ z-index: 2000 !important; } /* === Before login: show country flag only, hide country name === */ #tlogins .lonline .user-country-line{ gap:0 !important; justify-content:flex-start !important; } #tlogins .lonline .user-country-line span{ display:none !important; } #tlogins .lonline .user-country-flag{ width:18px !important; height:12px !important; margin:0 !important; } /* === MOBILE KASHF / POPUP CLOSE FIX ONLY === Based on cchatr_login_flag_only_fix.zip. Fixes كشف النكات popup on mobile so close button is visible and clickable. Does not change settings panel or other chat styling. */ /* ===== Linked nick detection table ===== */ .kashf-table-wrap{padding:0!important;overflow:auto!important;background:#8194a5!important;color:#111!important;direction:rtl!important;} .kashf-loading,.kashf-empty{padding:18px;text-align:center;font-weight:bold;background:#fff;} .kashf-result{width:100%;min-width:500px;} .kashf-count{height:28px;line-height:28px;text-align:center;background:#fff;border-bottom:1px solid #555;font-weight:bold;color:#111;} .kashf-table{width:100%;border-collapse:collapse;table-layout:fixed;background:#fff;font-family:"Times New Roman",Times,serif;font-size:12px;} .kashf-table th{height:28px;background:#5790ef;color:#fff;border:1px solid #333;text-align:center;font-weight:bold;} .kashf-table td{height:36px;border:1px solid #777;text-align:center;padding:3px;vertical-align:middle;overflow-wrap:anywhere;} .kashf-table .kashf-action{width:34px;background:var(--chat-template,#4f8585)!important;color:#fff;font-size:16px;} .kashf-table .kashf-time{width:108px;color:#0560c7;} .kashf-table .kashf-time b,.kashf-table .kashf-time small{display:block;font-size:10px;line-height:14px;} .kashf-table .kashf-time small{color:#c55a00;} .kashf-table .kashf-ip{width:118px;font-weight:bold;} .kashf-table .kashf-device-row td{height:24px!important;line-height:18px!important;text-align:left!important;padding:2px 5px!important;background:#fff!important;color:#111!important;font-weight:bold!important;direction:ltr!important;} .kashf-table .kashf-main-row:nth-of-type(4n+3) td:not(.kashf-action){background:#fafafa;} /* === MOBILE PANEL TOP BAR CLEAN FIX ONLY === Makes dpnl panel header like the reference: dark full header, title inside header, red close button on right. Does not change popup body/settings/kashf content. */ /* === LIVE ROOM MIC BADGE FINAL === */ #rooms .room{ position:relative!important; display:block!important; direction:ltr!important; text-align:left!important; min-height:56px!important; width:100%!important; padding:4px 60px 4px 54px!important; margin:0!important; border-radius:0!important; background:#fff!important; box-sizing:border-box!important; overflow:hidden!important; } #rooms .room .u-topic, #rooms .room .u-msg, #rooms .room .room-info{ direction:ltr!important; text-align:left!important; float:none!important; } #rooms .room .uc, #rooms .room .room-count, #rooms .room .room-mic-status{ display:none!important; } #rooms .room .room-active-mic-badge{ display:inline-flex!important; visibility:visible!important; opacity:1!important; } /* === Hide mic bar when current room mic is disabled === */ body.room-mic-disabled-hidebar #freshVoiceBar, body.room-mic-disabled-hidebar #roomVoiceBar, body.room-mic-disabled-hidebar #voiceBar, body.room-mic-disabled-hidebar #voiceControlPanel, body.room-mic-disabled-hidebar .fresh-voice-bar, body.room-mic-disabled-hidebar .room-voice-bar{ display:none !important; visibility:hidden !important; opacity:0 !important; height:0 !important; min-height:0 !important; max-height:0 !important; overflow:hidden !important; } /* ===== Public message reply / quote feature ===== */ .chat-reply-preview{ width:100%; background:#fff7d7; border:1px solid #e7c85d; border-right:4px solid #337ab7; color:#222; padding:5px 34px 5px 8px; margin:2px 0 4px 0; border-radius:4px; position:relative; font-family:"Times New Roman",Times,serif; line-height:1.4; clear:both; direction:rtl; text-align:right; } .chat-reply-cancel{ position:absolute; right:5px; top:5px; width:22px; height:22px; line-height:18px; border:0; border-radius:50%; background:#d9534f; color:#fff; font-weight:bold; cursor:pointer; } .chat-reply-label{font-size:11px;color:#666;} .chat-reply-author{font-weight:bold;color:#0b5b93;font-size:12px;} .chat-reply-text{font-size:12px;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .chat-reply-quote{ display:block; background:#f3f6ff; border-right:4px solid #337ab7; border-radius:4px; padding:4px 7px; margin:0 0 5px 0; color:#222; direction:rtl; text-align:right; } .chat-reply-quote-title{font-weight:bold;color:#0b5b93;font-size:12px;margin-bottom:2px;} .chat-reply-quote-text{font-size:12px;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;} .chat-reply-btn{margin:0!important;padding:0!important;} /* === WALL OLD STYLE RESTORE: remove comment/reply features from wall only === */ #wallCommentsPanel, #wall .wall-comments-panel, #wall .commentbc-btn, #wall .wall-reply-preview, #wallReplyPreview, #wall .chat-reply-btn, #wall .chat-reply-quote{ display:none !important; visibility:hidden !important; opacity:0 !important; width:0 !important; height:0 !important; max-height:0 !important; overflow:hidden !important; } #wall .wall-input-box .tboxbc{ display:block !important; visibility:visible !important; opacity:1 !important; } /* ===== FINAL FIX: panel buttons, wall theme color, wall conversations ===== */ :root{ --final-chat-color: var(--site-button-bg, var(--theme-header-bg, var(--theme-primary, #8b1a80))); } body.site-in-room .dpnl{ background-color: var(--final-chat-color) !important; border-color: #111 !important; pointer-events:auto !important; } body.site-in-room .dpnl .pnhead, #wall .pnhead, #wallCommentsPanel .wall-comments-head, #wall .wall-youtube-head{ background: var(--final-chat-color) !important; background-image:none !important; color:#fff !important; border-color: var(--final-chat-color) !important; } body.site-in-room #d0, body.site-in-room #d0 *{ pointer-events:auto !important; } body.site-in-room #d0{ z-index:5000 !important; } body.site-in-room #d0 .ae, body.site-in-room #d0 label, body.site-in-room #d0 button{ cursor:pointer !important; } #wall, body.site-in-room #wall{ background:#fff !important; } #wallStories, #d2bc, #wall .wall-input-box{ background:#fff !important; } #wallCommentsPanel, #wall .wall-comments-panel{ display:none; visibility:visible !important; opacity:1 !important; width:320px !important; max-width:calc(100vw - 16px) !important; min-height:220px !important; max-height:calc(100vh - 90px) !important; height:auto !important; overflow:hidden !important; } #wallCommentsPanel[style*="display: flex"], #wallCommentsPanel[style*="display:flex"]{ display:flex !important; } #wall .commentbc-btn, #wall .chat-reply-btn, #d2 .chat-reply-btn{ display:inline-flex !important; visibility:visible !important; opacity:1 !important; width:auto !important; height:auto !important; max-height:none !important; overflow:visible !important; align-items:center !important; justify-content:center !important; } #wall .chat-reply-quote, #d2 .chat-reply-quote{ display:block !important; visibility:visible !important; opacity:1 !important; width:auto !important; height:auto !important; max-height:none !important; overflow:hidden !important; } #wall .commentbc-count{ display:inline !important; visibility:visible !important; opacity:1 !important; width:auto !important; height:auto !important; } body.site-wall-comments-disabled #wall .commentbc-btn, body.site-wall-comments-disabled #wallCommentsPanel{ display:none !important; } #wall .wall-comment-topic{ background:transparent !important; color:#111 !important; padding:0 !important; border-radius:0 !important; } #wallCommentsPanel .wall-comments-close{ background:var(--final-chat-color) !important; border:1px solid rgba(255,255,255,.7) !important; color:#fff !important; } #wallCommentsPanel .wall-comments-send{ background:var(--final-chat-color) !important; border-color:var(--final-chat-color) !important; color:#fff !important; } #wall .wall-comments-input, #wallCommentInput{ display:block !important; visibility:visible !important; opacity:1 !important; background:#fff !important; color:#111 !important; } /* === FIX: remove message-reply only from wall, keep comments + public chat reply === */ #wallReplyPreview, #wall .wall-reply-preview, #wall .chat-reply-btn, #wall .chat-reply-quote{ display:none !important; visibility:hidden !important; opacity:0 !important; width:0 !important; height:0 !important; max-height:0 !important; overflow:hidden !important; } #wall .commentbc-btn, #wall .commentbc-count{ display:inline-flex !important; visibility:visible !important; opacity:1 !important; width:auto !important; height:auto !important; max-height:none !important; overflow:visible !important; align-items:center !important; justify-content:center !important; } #wallCommentsPanel{ visibility:visible !important; opacity:1 !important; width:320px !important; max-width:calc(100vw - 16px) !important; min-height:220px !important; max-height:calc(100vh - 90px) !important; } #wallCommentsPanel[style*="display: flex"], #wallCommentsPanel[style*="display:flex"]{ display:flex !important; } /* ===== STORY VIEWER REBUILD FULLSCREEN + AUDIO/MEDIA SUPPORT ===== */ body.story-open{overflow:hidden !important;} #storyViewer.story-viewer, #wall #storyViewer.story-viewer, .dpnl #wall #storyViewer.story-viewer{ position:fixed !important; inset:0 !important; width:100vw !important; height:100vh !important; z-index:999999 !important; background:#000 !important; padding:0 !important; margin:0 !important; border:0 !important; box-sizing:border-box !important; overflow:hidden !important; direction:rtl !important; } #storyViewer[style*="display:none"],#storyViewer[style*="display: none"]{display:none !important;} #storyViewer .story-viewer-inner{ position:relative !important; width:100% !important; height:100% !important; display:block !important; overflow:hidden !important; background:#000 !important; } #storyViewer .story-progress-bars{ position:absolute !important; top:8px !important; left:8px !important; right:8px !important; height:4px !important; display:flex !important; gap:3px !important; z-index:50 !important; } #storyViewer .story-progress-seg{height:4px !important; flex:1 1 0 !important; background:rgba(255,255,255,.35) !important; border-radius:99px !important; overflow:hidden !important;} #storyViewer .story-progress-fill{display:block !important; height:100% !important; background:#fff !important; width:0;} #storyViewer .story-viewer-head{ position:absolute !important; top:24px !important; left:14px !important; right:auto !important; z-index:60 !important; display:flex !important; align-items:center !important; gap:8px !important; color:#fff !important; min-width:160px !important; max-width:45vw !important; direction:rtl !important; } #storyViewer .story-author-pic{width:44px !important;height:44px !important;border-radius:50% !important;background-size:cover !important;background-position:center !important;border:1px solid rgba(255,255,255,.75) !important;flex:0 0 44px !important;} #storyViewer .story-author-name{font-weight:700 !important;color:#fff !important;font-size:13px !important;line-height:18px !important;text-shadow:0 1px 4px #000 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;text-align:right !important;} #storyViewer .story-author-time{color:rgba(255,255,255,.85) !important;font-size:11px !important;line-height:14px !important;text-shadow:0 1px 4px #000 !important;text-align:right !important;} #storyViewer .story-viewer-tools{ position:absolute !important; top:24px !important; right:16px !important; left:auto !important; z-index:70 !important; display:flex !important; flex-direction:row !important; gap:14px !important; align-items:center !important; } #storyViewer .story-icon-btn{ width:28px !important; min-width:28px !important; height:28px !important; min-height:28px !important; border:0 !important; background:transparent !important; color:#fff !important; padding:0 !important; margin:0 !important; line-height:28px !important; text-align:center !important; font-size:16px !important; text-shadow:0 2px 6px #000 !important; box-shadow:none !important; } #storyViewer:not(.can-delete) .story-delete-btn{display:none !important;} #storyViewer .story-media-wrap{ position:absolute !important; inset:0 !important; padding:0 !important; margin:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; background:#000 !important; } #storyViewer .story-media-stage{ position:relative !important; width:100% !important; height:100% !important; display:flex !important; align-items:center !important; justify-content:center !important; background:#000 !important; overflow:hidden !important; } #storyViewer .story-main-media{ display:none !important; max-width:100vw !important; max-height:100vh !important; width:auto !important; height:auto !important; object-fit:contain !important; background:#000 !important; border-radius:0 !important; box-shadow:none !important; } #storyViewer:not(.can-video):not(.can-audio) .story-main-image{display:block !important;} #storyViewer.can-video .story-main-video{display:block !important; width:auto !important; height:100vh !important; max-width:100vw !important; max-height:100vh !important; object-fit:contain !important;} #storyViewer.can-audio .story-main-audio{display:block !important; position:absolute !important; left:50% !important; top:58% !important; transform:translate(-50%,-50%) !important; width:min(520px,88vw) !important; height:54px !important; z-index:42 !important; background:#111 !important; border-radius:14px !important;} #storyViewer .story-audio-cover{display:none !important;} #storyViewer.can-audio .story-audio-cover{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:12px !important; position:absolute !important; left:50% !important; top:42% !important; transform:translate(-50%,-50%) !important; width:220px !important; height:220px !important; border-radius:26px !important; color:#fff !important; background:linear-gradient(135deg,#22103a,#081a32) !important; box-shadow:0 0 30px rgba(157,48,178,.45) !important; z-index:41 !important; font-weight:700 !important; } #storyViewer.can-audio .story-audio-cover .fa{font-size:64px !important;color:#fff !important;} #storyViewer .story-caption{ position:absolute !important; left:50% !important; right:auto !important; bottom:70px !important; transform:translateX(-50%) !important; width:min(560px,90vw) !important; color:#fff !important; text-align:center !important; font-size:16px !important; line-height:1.5 !important; z-index:55 !important; text-shadow:0 2px 8px #000 !important; background:rgba(0,0,0,.18) !important; border-radius:12px !important; padding:6px 10px !important; } #storyViewer .story-nav{ position:absolute !important; top:50% !important; transform:translateY(-50%) !important; z-index:65 !important; width:42px !important; height:62px !important; border:0 !important; background:transparent !important; color:rgba(255,255,255,.9) !important; font-size:38px !important; line-height:62px !important; text-align:center !important; box-shadow:none !important; } #storyViewer .story-prev{left:22px !important; right:auto !important;} #storyViewer .story-next{right:22px !important; left:auto !important;} #storyViewer.single-story .story-nav{display:none !important;} #storyViewer .story-viewer-bottom{position:absolute !important;left:16px !important;bottom:26px !important;z-index:62 !important;display:block !important;color:#fff !important;} #storyViewer .story-side-actions{display:flex !important;flex-direction:column !important;gap:8px !important;align-items:center !important;color:#fff !important;} #storyViewer .story-side-actions button{width:34px !important;height:34px !important;border:0 !important;background:transparent !important;color:#fff !important;font-size:22px !important;line-height:34px !important;text-shadow:0 2px 6px #000 !important;box-shadow:none !important;} #storyViewer .story-like-count,#storyViewer .story-view-count{font-weight:700 !important;color:#fff !important;font-size:13px !important;text-shadow:0 2px 6px #000 !important;} #storyViewer .story-extra-actions{display:none !important;} #storyViewer .story-like-btn.active{color:#ff5fae !important;} /* ===== ROOM MUSIC BROADCAST PANEL ===== */ #freshVoiceBar .fresh-music-btn{ width:39px !important; height:39px !important; min-width:39px !important; margin:0 !important; padding:0 !important; border:1px solid #082a37 !important; border-radius:3px !important; background:#10294d !important; color:#ffd95a !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; position:relative !important; overflow:hidden !important; cursor:pointer !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14) !important; } #freshVoiceBar .fresh-music-btn i{font-size:25px !important;color:#ffd95a !important;z-index:1 !important;} #freshVoiceBar .fresh-music-btn.playing{background:#1fb35b !important;box-shadow:0 0 0 2px #ffdd55 inset,0 0 8px rgba(255,221,85,.7) !important;} #freshVoiceBar .fresh-music-btn.playing:after{content:"";position:absolute;inset:4px;border:1px solid rgba(255,255,255,.45);border-radius:2px;animation:freshMusicPulse 1s infinite;} @keyframes freshMusicPulse{0%{opacity:.25;transform:scale(.92)}50%{opacity:1;transform:scale(1)}100%{opacity:.25;transform:scale(.92)}} .fresh-room-music-panel{ position:absolute !important; top:48px !important; left:48px !important; width:330px !important; max-width:calc(100vw - 20px) !important; background:rgba(20,25,55,.96) !important; color:#fff !important; border:1px solid rgba(190,210,255,.45) !important; border-radius:10px !important; box-shadow:0 8px 24px rgba(0,0,0,.45) !important; z-index:99999 !important; direction:rtl !important; overflow:hidden !important; } .fresh-room-music-head{ height:34px !important; display:flex !important; align-items:center !important; gap:7px !important; padding:0 10px !important; background:linear-gradient(135deg,#8b1b5a,#5b1f8f) !important; border-bottom:1px solid rgba(255,255,255,.2) !important; } .fresh-room-music-head button{ margin-right:auto !important; width:26px !important;height:26px !important;border:0 !important;border-radius:50% !important;background:#fff !important;color:#8b1b5a !important;font:bold 18px "Times New Roman",Times,serif !important;line-height:24px !important; } .fresh-room-music-body{padding:10px !important;} .fresh-room-music-title{height:24px !important;line-height:24px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;color:#fff !important;margin-bottom:7px !important;} .fresh-room-music-progress{height:7px !important;background:rgba(255,255,255,.18) !important;border-radius:999px !important;overflow:hidden !important;margin-bottom:9px !important;} .fresh-room-music-progress span{display:block !important;height:100% !important;width:0;background:linear-gradient(90deg,#25d366,#ffdd55) !important;transition:width .18s linear !important;} .music-ios-play{display:block;width:100% !important;height:38px !important;margin:0 0 8px !important;border:1px solid rgba(255,255,255,.45) !important;border-radius:8px !important;background:#1685bd !important;color:#fff !important;font:bold 13px "Times New Roman",Times,serif !important;} .fresh-room-music-controls{display:grid !important;grid-template-columns:1fr 1fr !important;gap:6px !important;} .fresh-room-music-controls button{ height:34px !important;border:0 !important;border-radius:8px !important;color:#fff !important;font:bold 12px "Times New Roman",Times,serif !important;cursor:pointer !important; } .fresh-room-music-controls .music-choose{background:#20a95a !important;} .fresh-room-music-controls .music-pause{background:#f0ad4e !important;} .fresh-room-music-controls .music-resume{background:#337ab7 !important;} .fresh-room-music-controls .music-stop{background:#d9534f !important;} .fresh-room-music-controls .music-end-all{background:#a71919 !important;} .fresh-room-music-vol{margin-top:8px !important;display:flex !important;align-items:center !important;gap:8px !important;color:#fff !important;} .fresh-room-music-vol input{flex:1 !important;} .fresh-room-music-note2{margin-top:6px !important;color:#cfe8ff !important;font-size:11px !important;text-align:center !important;} .fresh-room-music-sources{display:grid !important;grid-template-columns:1fr 1fr !important;gap:6px !important;margin-bottom:6px !important;} .fresh-room-music-sources button{height:35px !important;border:0 !important;border-radius:8px !important;color:#fff !important;font-weight:700 !important;} .fresh-room-music-sources .music-device{background:#20a95a !important;} .fresh-room-music-sources .music-youtube{background:#d9534f !important;} .fresh-room-music-youtube-row{display:flex !important;gap:5px !important;margin-bottom:7px !important;direction:rtl !important;} .fresh-room-music-youtube-row input{flex:1 !important;min-width:0 !important;height:33px !important;border:1px solid rgba(255,255,255,.3) !important;border-radius:7px !important;padding:4px 7px !important;background:#fff !important;color:#222 !important;direction:ltr !important;text-align:left !important;} .fresh-room-music-youtube-row button{width:70px !important;height:33px !important;border:0 !important;border-radius:7px !important;background:#d9534f !important;color:#fff !important;font-weight:700 !important;} .fresh-room-music-youtube-results{display:flex !important;flex-direction:column !important;gap:4px !important;max-height:174px !important;overflow-y:auto !important;margin-bottom:7px !important;} .fresh-room-music-youtube-results:empty{display:none !important;} .music-youtube-result{display:grid !important;grid-template-columns:58px minmax(0,1fr) !important;align-items:center !important;gap:7px !important;width:100% !important;min-height:48px !important;padding:3px !important;border:1px solid rgba(255,255,255,.16) !important;border-radius:6px !important;background:rgba(255,255,255,.08) !important;color:#fff !important;text-align:right !important;direction:ltr !important;} .music-youtube-result img{width:58px !important;height:42px !important;object-fit:cover !important;border-radius:4px !important;} .music-youtube-result span{direction:rtl !important;display:block !important;line-height:17px !important;max-height:34px !important;overflow:hidden !important;} .music-youtube-empty{padding:9px !important;text-align:center !important;color:#fff !important;background:rgba(255,255,255,.08) !important;border-radius:6px !important;} .fresh-room-youtube-host{position:fixed !important;left:0 !important;top:0 !important;width:200px !important;height:200px !important;opacity:.001 !important;pointer-events:none !important;overflow:hidden !important;z-index:-1 !important;} #freshVoiceBar .fresh-music-btn.disabled{ opacity:.45 !important; filter:grayscale(1) !important; cursor:not-allowed !important; box-shadow:none !important; } body.site-room-music-disabled #freshVoiceBar .fresh-music-btn{ opacity:.35 !important; filter:grayscale(1) !important; } /* ===== END ROOM MUSIC BROADCAST PANEL ===== */ /* ===== ROYAL MEMBER WELCOME MESSAGE ===== */ .royal-welcome-msg{background:#fff7e6!important;border-right:4px solid #d6a423!important;overflow:visible!important;min-height:42px!important} .royal-member-welcome{display:flex;align-items:center;gap:8px;direction:rtl;line-height:24px;color:#111;font-weight:bold!important;white-space:normal} .royal-member-pic{width:54px!important;height:54px!important;border-radius:50%!important;object-fit:cover!important;border:2px solid #d6a423!important;box-shadow:0 0 6px rgba(0,0,0,.25);background:#fff;margin:2px 4px} .royal-member-title{display:inline-block;background:linear-gradient(135deg,#f7d76b,#a67b16);color:#000;border-radius:14px;padding:2px 10px;border:1px solid #926b11} /* ===== Fresh live camera button and viewer ===== */ #freshVoiceBar .fresh-live-btn{height:39px;min-width:58px;margin:0 2px;border:1px solid #0b2c46;border-radius:3px;background:#fff;color:#e51b2b;display:inline-flex;align-items:center;justify-content:center;gap:3px;font-weight:bold;cursor:pointer;} #freshVoiceBar .fresh-live-btn span{background:#ff1b2d;color:#fff;border-radius:2px;padding:2px 4px;font-size:11px!important;line-height:1;} #freshVoiceBar .fresh-live-btn i{color:#e51b2b;} .fresh-live-chooser{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,.55);z-index:999999;display:flex;align-items:center;justify-content:center;direction:rtl;} .fresh-live-chooser-card{width:310px;max-width:92vw;background:#fff;border-radius:10px;padding:24px 18px;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.25);} .fresh-live-chooser-title{margin-bottom:18px;color:#333;font-weight:bold;} .fresh-live-chooser-card button{border:0;border-radius:7px;padding:10px 14px;margin:5px;color:#fff;font-weight:bold;cursor:pointer;} .fresh-live-front{background:#4f58bd!important;}.fresh-live-back{background:#009b8e!important;}.fresh-live-cancel{background:#ef4444!important;display:block;margin:14px auto 0!important;} .fresh-live-viewer{position:fixed;left:28px;top:118px;width:360px;max-width:calc(100vw - 56px);background:#111;border:2px solid #19a45b;z-index:99990;box-shadow:0 4px 18px rgba(0,0,0,.35);direction:rtl;} .fresh-live-head{height:30px;background:#8a1c5b;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 8px;box-sizing:border-box;font-weight:bold;} .fresh-live-close{background:#d9534f;color:#fff;border:0;border-radius:3px;font-size:18px;line-height:22px;width:28px;height:24px;cursor:pointer;} .fresh-live-body{background:#000;min-height:220px;display:flex;align-items:center;justify-content:center;} .fresh-live-video,.fresh-live-frame{width:100%;height:auto;max-height:360px;object-fit:contain;background:#000;} .fresh-live-tools{background:#222;padding:5px;text-align:center;}.fresh-live-tools button{background:#d9534f;color:#fff;border:0;border-radius:4px;padding:5px 12px;font-weight:bold;} /* ===== Royal member floating welcome, not chat message ===== */ .royal-welcome-layer{ position:fixed; left:18px; top:86px; z-index:999990; pointer-events:none; direction:rtl; } .royal-entry-toast{ position:relative; width:330px; min-height:118px; margin:0 0 12px 0; transform:translateX(-38px) scale(.86); opacity:0; transition:opacity .35s ease, transform .45s cubic-bezier(.2,1.25,.25,1); filter:drop-shadow(0 10px 14px rgba(0,0,0,.38)); } .royal-entry-toast.show{opacity:1;transform:translateX(0) scale(1);} .royal-entry-toast.hide{opacity:0;transform:translateX(-28px) scale(.92);} .royal-entry-aura{ position:absolute; inset:10px 42px 18px 24px; border-radius:60px; background:radial-gradient(circle at 40% 45%, rgba(255,255,255,.95), rgba(255,244,196,.84) 42%, rgba(160,98,24,.34) 70%, transparent 100%); box-shadow:0 0 22px rgba(255,217,109,.95), inset 0 0 12px rgba(255,255,255,.7); } .royal-entry-pic-wrap{ position:absolute; right:0; top:0; width:118px; height:118px; border-radius:50%; overflow:visible; } .royal-entry-pic{ position:absolute; right:16px; top:15px; width:82px; height:82px; object-fit:cover; border-radius:50%; border:2px solid #fff2b7; background:#fff; box-shadow:0 0 10px rgba(0,0,0,.32); } .royal-entry-frame{ position:absolute; inset:0; border-radius:50%; background: radial-gradient(circle at 50% 50%, transparent 44%, rgba(255,245,181,.85) 45%, rgba(165,99,23,.95) 51%, transparent 52%), conic-gradient(from 0deg, #ffe89c, #9c5b10, #fff4bd, #c58a22, #ffe89c, #8d4a08, #ffe89c); -webkit-mask:radial-gradient(circle, transparent 51%, #000 52%); mask:radial-gradient(circle, transparent 51%, #000 52%); animation:royalFrameSpin 6s linear infinite; filter:drop-shadow(0 0 6px rgba(255,211,67,.9)); } @keyframes royalFrameSpin{to{transform:rotate(360deg);}} .royal-entry-ribbon{ position:absolute; right:88px; top:43px; min-width:208px; height:39px; padding:0 30px 0 12px; border-radius:0 8px 8px 0; display:flex; align-items:center; justify-content:center; gap:8px; background:linear-gradient(90deg,#f4f4f4,#d4b06b,#f7f1df,#b07a24); border:1px solid rgba(120,69,11,.55); color:#1b160c; font-weight:bold; text-shadow:0 1px 0 rgba(255,255,255,.8); box-shadow:0 4px 10px rgba(0,0,0,.28); } .royal-entry-ribbon:after{ content:''; position:absolute; left:-24px; top:0; border-top:19px solid transparent; border-bottom:20px solid transparent; border-right:24px solid #b07a24; } .royal-entry-title{font-size:12px;color:#704400;white-space:nowrap;} .royal-entry-name{font-size:15px;color:#111;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .royal-entry-sub{ position:absolute; right:122px; top:84px; color:#fff; font-weight:bold; font-size:12px; padding:3px 12px; border-radius:18px; background:rgba(58,35,8,.82); box-shadow:0 0 8px rgba(255,217,111,.55); } .royal-entry-female .royal-entry-ribbon{ background:linear-gradient(90deg,#fff5fb,#ffcae0,#fff2bd,#d5a326); } .royal-entry-female .royal-entry-ribbon:after{border-right-color:#d5a326;} .royal-entry-female .royal-entry-title{color:#b61b67;} /* ========================================================= SEO HIDDEN LANDING TEXT FIX Keeps SEO landing text in HTML/source without showing it in the chat/login layout. ========================================================= */ #seoLandingContent.seo-landing-content{ position:absolute!important; left:-99999px!important; top:auto!important; width:1px!important; height:1px!important; max-width:1px!important; max-height:1px!important; overflow:hidden!important; clip:rect(1px,1px,1px,1px)!important; clip-path:inset(50%)!important; white-space:normal!important; margin:0!important; padding:0!important; border:0!important; background:transparent!important; color:transparent!important; pointer-events:none!important; } #seoLandingContent.seo-landing-content h1, #seoLandingContent.seo-landing-content p{ margin:0!important; padding:0!important; font-size:1px!important; line-height:1px!important; color:transparent!important; } #seoLandingContent .seo-landing-keywords{ font-size:1px!important; line-height:1px!important; color:transparent!important; } /* ===== MOBILE PROFILE / IMAGE VIEWER CLOSE FIX ===== */ .profile-image-viewer{ z-index: 2147483000 !important; pointer-events: auto !important; touch-action: manipulation !important; -webkit-overflow-scrolling: touch !important; } .profile-image-viewer-tools, .profile-image-viewer-close, .profile-image-viewer-download{ pointer-events: auto !important; touch-action: manipulation !important; } .profile-image-viewer-close{ cursor: pointer !important; } body.profile-image-open .modal-backdrop{ display:none !important; pointer-events:none !important; } /* ===== END MOBILE PROFILE / IMAGE VIEWER CLOSE FIX ===== */ /* ========================================================= Chat quick media tools: image / flash emoji / clear chat ========================================================= */ .chat-tools-btn{ min-width:32px !important; height:32px !important; padding:6px 8px !important; line-height:18px !important; text-align:center !important; } .chat-quick-tools{ position:fixed; z-index:1000005; background:#ffffff; border-radius:10px; box-shadow:0 4px 18px rgba(0,0,0,.16); padding:8px 10px; display:flex; gap:12px; align-items:center; direction:ltr; pointer-events:auto; } .chat-quick-tools .chat-tool-btn{ width:34px; height:34px; border:0; background:transparent; font-size:24px; line-height:34px; text-align:center; cursor:pointer; padding:0; } .chat-tool-emoji{ color:#00bcd4; } .chat-tool-media{ color:#ff3d45; } .chat-tool-clear{ color:#8e24aa; } .flash-emoji-store{ position:fixed; width:320px; max-width:calc(100vw - 16px); max-height:310px; overflow:hidden; z-index:1000006; background:#fff; border-radius:12px; box-shadow:0 5px 24px rgba(0,0,0,.22); border:1px solid rgba(0,0,0,.08); direction:rtl; } .flash-emoji-head{ display:flex; justify-content:space-between; align-items:center; background:var(--site-button-bg, #7d1766); color:#fff; padding:8px 10px; font-weight:bold; } .flash-emoji-head button{ border:0; background:#d84a4a; color:#fff; border-radius:6px; width:28px; height:28px; line-height:22px; font-size:20px; } .flash-emoji-body{ padding:10px; max-height:260px; overflow:auto; display:flex; flex-wrap:wrap; gap:8px; background:#fff; } .flash-emoji-item{ width:38px; height:38px; border:1px solid #e5e7eb; border-radius:9px; background:#fff; font-size:24px; line-height:34px; text-align:center; cursor:pointer; padding:0; } .flash-emoji-item img{ max-width:32px; max-height:32px; object-fit:contain; } /* ===== LIVE CAMERA HD + BEAUTY FILTER ===== */ .fresh-live-viewer.beauty-on .fresh-live-head:after{ content:'HD Beauty'; margin-right:8px; padding:2px 6px; border-radius:10px; background:linear-gradient(90deg,#ffd36a,#fff3b0); color:#5a3300; font:bold 10px "Times New Roman",Times,serif; } .fresh-live-viewer .fresh-live-video{ image-rendering:auto; transform:translateZ(0); backface-visibility:hidden; } /* LiveKit Voice Rebuild status */ #freshVoiceBar .fresh-mic-seat.active, #freshVoiceBar .fresh-mic-seat.recording{ box-shadow:0 0 0 2px rgba(40,167,69,.45),0 0 14px rgba(40,167,69,.45)!important; } #freshVoiceBar .fresh-mic-seat.busy:not(.active){ filter:saturate(1.15) brightness(1.05); } /* ===== PROFILE + LIVE GRID FIXES ===== */ #upro .upro-register-state:empty{display:none!important;} .fresh-live-viewer.fresh-live-multi{width:min(820px,calc(100vw - 14px))!important;left:50%!important;right:auto!important;top:64px!important;transform:translateX(-50%)!important;max-width:calc(100vw - 14px)!important;} .fresh-live-multi .fresh-live-body{height:min(68vh,560px)!important;min-height:190px!important;display:block!important;background:#000!important;overflow:hidden!important;} .fresh-live-multi .fresh-live-grid{height:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:minmax(0,1fr)!important;gap:5px!important;overflow:hidden!important;padding:5px!important;box-sizing:border-box!important;} .fresh-live-multi.live-count-0 .fresh-live-grid,.fresh-live-multi.live-count-1 .fresh-live-grid{grid-template-columns:1fr!important;} .fresh-live-multi.live-count-2 .fresh-live-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;} .fresh-live-multi.live-count-3 .fresh-live-grid,.fresh-live-multi.live-count-4 .fresh-live-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;} .fresh-live-multi.live-count-5 .fresh-live-grid,.fresh-live-multi.live-count-6 .fresh-live-grid,.fresh-live-multi.live-count-7 .fresh-live-grid,.fresh-live-multi.live-count-8 .fresh-live-grid,.fresh-live-multi.live-count-9 .fresh-live-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;} .fresh-live-tile{min-height:0!important;height:100%!important;} .fresh-live-tile video,.fresh-live-video{width:100%!important;height:100%!important;min-height:0!important;object-fit:cover!important;background:#000!important;display:block!important;} /* ===== END PROFILE + LIVE GRID FIXES ===== */ /* ===== MOBILE LIVE CAMERA COMPACT LAYOUT FIX - fallback ===== */ /* ===== END MOBILE LIVE CAMERA COMPACT LAYOUT FIX ===== */ /* ===== WINDOW STACK V3 FIX ===== حل تداخل النوافذ: آخر نافذة تفتح/تضغط عليها تظهر فوق. لا يتم إجبار البث أن يبقى فوق البروفايل. */ #freshLiveViewer.fresh-live-viewer{ z-index:250000 !important; } #upro.modal, #upro{ z-index:300500 !important; } #upro .modal-dialog, #upro .modal-content{ position:relative !important; z-index:300505 !important; } body.chat-profile-front #freshLiveViewer.fresh-live-viewer{ z-index:250000 !important; } body.chat-profile-front #upro.modal, body.chat-profile-front #upro, body.chat-profile-front #upro .modal-dialog, body.chat-profile-front #upro .modal-content{ z-index:300800 !important; } .modal-backdrop{display:none !important;} .fresh-live-btn.disabled{ opacity:.55 !important; filter:grayscale(.25) !important; } /* END WINDOW STACK V3 FIX */ /* ===== BOTTOM NAV BLACK FRAMES V101 ===== مقاس موحد لكل زر وكادر أسود مطابق للشريط المرجعي. */ body.site-in-room #d0{ min-height:34px !important; height:34px !important; max-height:34px !important; padding:1px !important; gap:2px !important; align-items:stretch !important; justify-content:flex-start !important; direction:ltr !important; overflow-x:hidden !important; overflow-y:hidden !important; white-space:nowrap !important; overscroll-behavior:none !important; touch-action:manipulation !important; } body.site-in-room #d0 .ae, body.site-in-room #d0 label, body.site-in-room #d0 button{ flex:1 1 0 !important; width:auto !important; min-width:0 !important; max-width:80px !important; min-height:32px !important; height:32px !important; max-height:32px !important; line-height:30px !important; padding:0 5px !important; margin:0 !important; border:1px solid #111 !important; border-radius:0 !important; background-color:var(--chat-template, var(--site-body-bg, #4f807d)) !important; box-shadow:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:4px !important; white-space:nowrap !important; overflow:hidden !important; vertical-align:middle !important; color:#fff !important; font-family:"Times New Roman",Times,serif!important; font-size:12px !important; font-weight:bold !important; } body.site-in-room #d0 .ae:before, body.site-in-room #d0 label:before, body.site-in-room #d0 button:before{ margin:0 2px !important; font-family:FontAwesome !important; font-style:normal !important; font-weight:normal !important; line-height:1 !important; text-rendering:auto !important; -webkit-font-smoothing:antialiased !important; } body.site-in-room #d0 span, body.site-in-room #d0 .pmc, body.site-in-room #d0 .bwall, body.site-in-room #d0 .busers{ display:inline !important; min-width:0 !important; width:auto !important; height:auto !important; line-height:inherit !important; padding:0 !important; margin:0 2px !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; color:inherit !important; font-size:inherit !important; font-weight:bold !important; } body.site-in-room #d0 .brooms, body.site-in-room #d0 .th-d0-rooms span, body.site-in-room #d0 [data-target="#rooms"] span{ display:none !important; } @keyframes bottomNavYellowPulseSafe{ from{ box-shadow:0 0 0 1px #ffd400 inset, 0 0 5px rgba(255,212,0,.65); } to{ box-shadow:0 0 0 1px #ffd400 inset, 0 0 13px rgba(255,212,0,1); } } /* ===== END BOTTOM NAV SIZE + NOTIFY SAFE FIX V2 ===== */ /* ===== SEND BUTTON + USERS HEADERS THEME FIX ===== */ /* Keep original colors; only normalize the public/private send button size and shape. */ body.site-in-room .tablebox.footer button.fa-send, body.site-in-room .tablebox.footer .sndpm, body.site-in-room .tablebox.footer .sndbc, body.site-in-room .tablebox.footer button[onclick*="Tsend"], body.site-in-room .tablebox.footer button[onclick*="UPLOAD"]{ min-width:54px !important; height:32px !important; min-height:32px !important; line-height:30px !important; padding:0 8px !important; margin:2px 1px !important; border-radius:2px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:3px !important; white-space:nowrap !important; vertical-align:middle !important; text-align:center !important; } body.site-in-room .tablebox.footer button.fa-send:before, body.site-in-room .tablebox.footer .sndpm:before, body.site-in-room .tablebox.footer .sndbc:before{ margin:0 2px !important; } /* Make users-list group headers follow the active site/chat style color. */ #users .user-group-header, #users .users-inroom-header, #users .users-chat-header, #users > label.inr, #users > label.ninr, #users .ninr.label-primary, #users .inr.label-primary{ background-color:var(--theme-primary, var(--site-button-bg, var(--m-primary, #438ac7))) !important; background-image:none !important; color:#fff !important; border-color:var(--theme-primary, var(--site-button-bg, var(--m-primary, #438ac7))) !important; width:100% !important; display:block !important; text-align:center !important; border-radius:0 !important; padding:4px 6px !important; line-height:20px !important; } /* ===== END SEND BUTTON + USERS HEADERS THEME FIX ===== */ /* ===== SEND BUTTON ICON ALIGNMENT FIX ===== */ /* Keep colors unchanged; only align the quick-tools icon/button cleanly inside the footer row. */ body.site-in-room .tablebox.footer, body.site-in-room #room > .tablebox.footer, body.site-in-room #room > .footer{ display:flex !important; align-items:center !important; gap:3px !important; box-sizing:border-box !important; } body.site-in-room .tablebox.footer .chat-tools-btn, body.site-in-room .tablebox.footer #chatQuickToolsBtn, body.site-in-room .tablebox.footer .tboxbc, body.site-in-room .tablebox.footer .sndfilebc, body.site-in-room .tablebox.footer .emobc, body.site-in-room #room > .footer .chat-tools-btn, body.site-in-room #room > .footer #chatQuickToolsBtn, body.site-in-room #room > .footer .tboxbc, body.site-in-room #room > .footer .sndfilebc, body.site-in-room #room > .footer .emobc{ flex:0 0 34px !important; width:34px !important; min-width:34px !important; max-width:34px !important; height:32px !important; min-height:32px !important; max-height:32px !important; padding:0 !important; margin:2px 0 !important; border-radius:4px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; box-sizing:border-box !important; vertical-align:middle !important; position:relative !important; top:0 !important; right:auto !important; left:auto !important; bottom:auto !important; overflow:hidden !important; } body.site-in-room .tablebox.footer .chat-tools-btn .fa, body.site-in-room .tablebox.footer #chatQuickToolsBtn .fa, body.site-in-room .tablebox.footer .tboxbc .fa, body.site-in-room .tablebox.footer .sndfilebc .fa, body.site-in-room .tablebox.footer .emobc .fa, body.site-in-room #room > .footer .chat-tools-btn .fa, body.site-in-room #room > .footer #chatQuickToolsBtn .fa, body.site-in-room #room > .footer .tboxbc .fa, body.site-in-room #room > .footer .sndfilebc .fa, body.site-in-room #room > .footer .emobc .fa{ line-height:1 !important; margin:0 !important; font-size:16px !important; } body.site-in-room .tablebox.footer .chat-tools-btn img, body.site-in-room .tablebox.footer #chatQuickToolsBtn img, body.site-in-room #room > .footer .chat-tools-btn img, body.site-in-room #room > .footer #chatQuickToolsBtn img{ max-width:18px !important; max-height:18px !important; display:block !important; margin:0 auto !important; } /* ===== END SEND BUTTON ICON ALIGNMENT FIX ===== */ /* ===== SEND ROW FINAL ALIGNMENT FIX V2 ===== */ /* Fix overlap between tools icon and إرسال button. Keep all colors unchanged. */ body.site-in-room #room > .tablebox.footer, body.site-in-room #room > .footer, body.site-in-room .tablebox.footer{ display:flex !important; align-items:center !important; flex-wrap:nowrap !important; gap:3px !important; overflow:hidden !important; box-sizing:border-box !important; direction:rtl !important; } /* Text input takes remaining space only, never covers buttons */ body.site-in-room #tbox, body.site-in-room .footer textarea.tbox, body.site-in-room #room > .footer textarea#tbox, body.site-in-room #room > .tablebox.footer textarea#tbox{ flex:1 1 auto !important; min-width:60px !important; width:auto !important; max-width:none !important; height:32px !important; min-height:32px !important; max-height:32px !important; margin:0 2px !important; box-sizing:border-box !important; } /* Tools square: fixed clean size */ body.site-in-room .tablebox.footer .chat-tools-btn, body.site-in-room .tablebox.footer #chatQuickToolsBtn, body.site-in-room #room > .footer .chat-tools-btn, body.site-in-room #room > .footer #chatQuickToolsBtn{ flex:0 0 38px !important; width:38px !important; min-width:38px !important; max-width:38px !important; height:32px !important; min-height:32px !important; max-height:32px !important; padding:0 !important; margin:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; box-sizing:border-box !important; overflow:hidden !important; vertical-align:middle !important; } /* Send button needs enough width for icon + Arabic text */ body.site-in-room .tablebox.footer button.fa-send, body.site-in-room .tablebox.footer button[onclick*="Tsend"], body.site-in-room #room > .footer button.fa-send, body.site-in-room #room > .footer button[onclick*="Tsend"], body.site-in-room #room > .tablebox.footer button.fa-send, body.site-in-room #room > .tablebox.footer button[onclick*="Tsend"]{ flex:0 0 66px !important; width:66px !important; min-width:66px !important; max-width:66px !important; height:32px !important; min-height:32px !important; max-height:32px !important; line-height:30px !important; padding:0 6px !important; margin:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:4px !important; box-sizing:border-box !important; white-space:nowrap !important; overflow:hidden !important; text-align:center !important; vertical-align:middle !important; } /* Normalize inner icon; do not let FontAwesome float outside */ body.site-in-room .tablebox.footer button.fa-send:before, body.site-in-room .tablebox.footer button[onclick*="Tsend"]:before, body.site-in-room #room > .footer button.fa-send:before, body.site-in-room #room > .footer button[onclick*="Tsend"]:before, body.site-in-room #room > .tablebox.footer button.fa-send:before, body.site-in-room #room > .tablebox.footer button[onclick*="Tsend"]:before{ display:inline-block !important; position:static !important; float:none !important; margin:0 0 0 2px !important; line-height:1 !important; font-size:15px !important; vertical-align:middle !important; } /* Any image/icon inside send/tools buttons stays centered */ body.site-in-room .tablebox.footer button img, body.site-in-room #room > .footer button img, body.site-in-room #room > .tablebox.footer button img{ max-width:18px !important; max-height:18px !important; display:inline-block !important; margin:0 !important; vertical-align:middle !important; } /* Mobile: keep same proportions but slightly smaller gap */ /* ===== END SEND ROW FINAL ALIGNMENT FIX V2 ===== */ /* ===== SEND ROW ORDER FIX: [خروج] [ابتسامة] | input | [وسائط] [إرسال] ===== */ /* Visual order only. Colors remain unchanged. */ body.site-in-room #room > .tablebox.footer, body.site-in-room #room > .footer, body.site-in-room .tablebox.footer{ display:flex !important; align-items:center !important; flex-wrap:nowrap !important; gap:3px !important; overflow:hidden !important; box-sizing:border-box !important; direction:ltr !important; } /* Left side: exit/power + smile */ body.site-in-room #room > .tablebox.footer button[onclick*="logout"], body.site-in-room #room > .tablebox.footer button[onclick*="Logout"], body.site-in-room #room > .tablebox.footer button[onclick*="disconnect"], body.site-in-room #room > .tablebox.footer button[onclick*="close"], body.site-in-room #room > .tablebox.footer .logout, body.site-in-room #room > .tablebox.footer .bout, body.site-in-room #room > .tablebox.footer .fa-power-off, body.site-in-room #room > .footer button[onclick*="logout"], body.site-in-room #room > .footer button[onclick*="Logout"], body.site-in-room #room > .footer button[onclick*="disconnect"], body.site-in-room #room > .footer button[onclick*="close"], body.site-in-room #room > .footer .logout, body.site-in-room #room > .footer .bout, body.site-in-room #room > .footer .fa-power-off{ order:10 !important; } body.site-in-room #room > .tablebox.footer .emo, body.site-in-room #room > .tablebox.footer .emobox, body.site-in-room #room > .tablebox.footer .fa-smile-o, body.site-in-room #room > .tablebox.footer button[onclick*="emo"], body.site-in-room #room > .tablebox.footer button[onclick*="Emoji"], body.site-in-room #room > .footer .emo, body.site-in-room #room > .footer .emobox, body.site-in-room #room > .footer .fa-smile-o, body.site-in-room #room > .footer button[onclick*="emo"], body.site-in-room #room > .footer button[onclick*="Emoji"]{ order:20 !important; } /* Middle: writing box */ body.site-in-room #tbox, body.site-in-room .footer textarea.tbox, body.site-in-room #room > .footer textarea#tbox, body.site-in-room #room > .tablebox.footer textarea#tbox{ order:50 !important; flex:1 1 auto !important; min-width:60px !important; width:auto !important; max-width:none !important; height:32px !important; min-height:32px !important; max-height:32px !important; margin:0 2px !important; box-sizing:border-box !important; direction:rtl !important; } /* Right side: media/tools then send */ body.site-in-room .tablebox.footer .chat-tools-btn, body.site-in-room .tablebox.footer #chatQuickToolsBtn, body.site-in-room .tablebox.footer .tboxbc, body.site-in-room .tablebox.footer .sndfilebc, body.site-in-room .tablebox.footer .emobc, body.site-in-room #room > .footer .chat-tools-btn, body.site-in-room #room > .footer #chatQuickToolsBtn, body.site-in-room #room > .footer .tboxbc, body.site-in-room #room > .footer .sndfilebc, body.site-in-room #room > .footer .emobc{ order:80 !important; flex:0 0 38px !important; width:38px !important; min-width:38px !important; max-width:38px !important; height:32px !important; min-height:32px !important; max-height:32px !important; padding:0 !important; margin:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; box-sizing:border-box !important; overflow:hidden !important; vertical-align:middle !important; } body.site-in-room .tablebox.footer button.fa-send, body.site-in-room .tablebox.footer button[onclick*="Tsend"], body.site-in-room #room > .footer button.fa-send, body.site-in-room #room > .footer button[onclick*="Tsend"], body.site-in-room #room > .tablebox.footer button.fa-send, body.site-in-room #room > .tablebox.footer button[onclick*="Tsend"]{ order:90 !important; flex:0 0 66px !important; width:66px !important; min-width:66px !important; max-width:66px !important; height:32px !important; min-height:32px !important; max-height:32px !important; line-height:30px !important; padding:0 6px !important; margin:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:4px !important; box-sizing:border-box !important; white-space:nowrap !important; overflow:hidden !important; text-align:center !important; vertical-align:middle !important; direction:rtl !important; } /* Footer buttons standard size */ body.site-in-room #room > .tablebox.footer > button, body.site-in-room #room > .footer > button, body.site-in-room #room > .tablebox.footer > .btn, body.site-in-room #room > .footer > .btn, body.site-in-room #room > .tablebox.footer > img.emobox, body.site-in-room #room > .footer > img.emobox{ flex:0 0 34px; height:32px; min-height:32px; max-height:32px; margin:0; box-sizing:border-box; } /* Normalize icons and prevent overlap */ body.site-in-room .tablebox.footer button.fa-send:before, body.site-in-room .tablebox.footer button[onclick*="Tsend"]:before, body.site-in-room #room > .footer button.fa-send:before, body.site-in-room #room > .footer button[onclick*="Tsend"]:before, body.site-in-room #room > .tablebox.footer button.fa-send:before, body.site-in-room #room > .tablebox.footer button[onclick*="Tsend"]:before{ display:inline-block !important; position:static !important; float:none !important; margin:0 0 0 2px !important; line-height:1 !important; font-size:15px !important; vertical-align:middle !important; } body.site-in-room .tablebox.footer button img, body.site-in-room #room > .footer button img, body.site-in-room #room > .tablebox.footer button img{ max-width:18px !important; max-height:18px !important; display:inline-block !important; margin:0 !important; vertical-align:middle !important; } /* ===== END SEND ROW ORDER FIX ===== */ /* ===== PRIVATE CLOSE / VOICE RECORD / PRIVATE CALL UI FIX ===== */ .pm-voice-rec{ width:34px !important; min-width:34px !important; height:32px !important; padding:0 !important; margin:0 2px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; } .pm-voice-rec.recording{ animation: pmVoicePulse 1s infinite; } @keyframes pmVoicePulse{ 0%{filter:brightness(1);} 50%{filter:brightness(1.35);} 100%{filter:brightness(1);} } .private-call-box, .private-call-invite{ position:fixed; z-index:1000020; left:50%; top:90px; transform:translateX(-50%); width:300px; max-width:calc(100vw - 20px); background:#fff; border:1px solid var(--site-button-bg, #287b17); box-shadow:0 6px 24px rgba(0,0,0,.25); direction:rtl; font-family:"Times New Roman",Times,serif; } .private-call-head{ background:var(--site-button-bg, #287b17); color:#fff; padding:6px 8px; font-weight:bold; display:flex; justify-content:space-between; align-items:center; } .private-call-close{ border:0; background:#d9534f; color:#fff; width:26px; height:24px; border-radius:4px; } .private-call-body{ padding:14px; text-align:center; } .private-call-peer{ font-weight:bold; margin-bottom:6px; } .private-call-actions, .private-call-invite-actions{ padding:8px; text-align:center; background:#f5f5f5; } .private-call-actions button, .private-call-invite-actions button{ border:0; color:#fff; padding:6px 18px; margin:0 4px; border-radius:5px; font-weight:bold; } .private-call-end, .private-call-invite .deny{ background:#d9534f; } .private-call-invite .accept{ background:var(--site-button-bg, #287b17); } .private-call-invite-title{ padding:12px; text-align:center; font-weight:bold; } /* ===== END PRIVATE CLOSE / VOICE RECORD / PRIVATE CALL UI FIX ===== */ /* ===== CHAT INPUT LTR FIX ===== */ /* Keep send-row order, but return typing field direction to left-to-right like before. */ body.site-in-room #tbox, body.site-in-room .footer textarea.tbox, body.site-in-room #room > .footer textarea#tbox, body.site-in-room #room > .tablebox.footer textarea#tbox{ direction:ltr !important; text-align:left !important; unicode-bidi:plaintext !important; } /* ===== END CHAT INPUT LTR FIX ===== */ /* ===== EMOJI CONTEXT POPUP FIX V4 ===== */ /* One emoji popup per clicked box: public, wall, or private. JS sets top/left with !important. */ .emoji-pop-fixed{ position:fixed !important; width:292px !important; max-width:calc(100vw - 16px) !important; max-height:240px !important; overflow-y:auto !important; overflow-x:hidden !important; direction:rtl !important; /* scrollbar on left */ text-align:right !important; background:#fff !important; border:1px solid rgba(0,0,0,.25) !important; border-radius:6px !important; box-shadow:0 6px 22px rgba(0,0,0,.22) !important; padding:5px !important; z-index:1000030 !important; box-sizing:border-box !important; } .emoji-pop-fixed[data-emoji-context="wall"]{ z-index:1000035 !important; } .emoji-pop-fixed[data-emoji-context="private"]{ z-index:1000036 !important; } .emoji-pop-fixed .emoji-pop-item, .emoji-pop-fixed img.emoi{ width:24px !important; height:24px !important; max-width:24px !important; max-height:24px !important; margin:3px !important; object-fit:contain !important; vertical-align:middle !important; } /* ===== END EMOJI CONTEXT POPUP FIX V4 ===== */ /* ===== MOBILE PRIVATE WINDOW + EMOJI POPUP FIX V6 ===== - Keep private chat as a compact floating window on mobile; it no longer covers the whole page. - Keep emoji popup anchored above the clicked smile button, including private chat and wall. */ /* ===== END MOBILE PRIVATE WINDOW + EMOJI POPUP FIX V6 ===== */ /* ===== VOCAL MIC EFFECTS V10 ===== */ #vocalEffectsMode.vocal-effects-select{ border:1px solid #1f7a1f !important; background:#fff !important; color:#153b15 !important; font-weight:700 !important; } #vocalEffectsMode.vocal-effects-select option{color:#111 !important;} /* ===== END VOCAL MIC EFFECTS V10 ===== */ /* ===== VOCAL MIC EFFECTS PROFESSIONAL MODES V11 ===== */ #vocalEffectsMode.vocal-effects-select{ min-width:210px !important; max-width:100% !important; } /* ===== END VOCAL MIC EFFECTS PROFESSIONAL MODES V11 ===== */ /* ===== Member banner + frame (scoped; does not override global chat style) ===== */ .uzr.member-has-cover{ background-size:100% 100%!important;background-position:center center!important;background-repeat:no-repeat!important;background-color:transparent!important; min-height:50px;position:relative;overflow:hidden; } .uzr.member-has-cover:before{display:none!important;content:none!important;background:none!important;} .uzr.member-has-cover>.u-pic,.uzr.member-has-cover>.filw,.uzr.member-has-cover>.uzr,.uzr.member-has-cover .u-topic,.uzr.member-has-cover .u-msg,.uzr.member-has-cover .u-ico{position:relative;z-index:1;} .uzr.member-has-cover .u-topic, .uzr.member-has-cover .u-msg, .uzr.member-has-cover .user-status-line{ background:transparent!important; background-color:transparent!important; box-shadow:none!important; text-shadow:0 1px 1px rgba(255,255,255,.9),0 0 2px rgba(0,0,0,.35)!important; } .member-frame-gold{--member-frame-glow:#f6d365;border-color:#f6d365!important;} .member-frame-pink{--member-frame-glow:#ff4fb3;border-color:#ff4fb3!important;} .member-frame-blue{--member-frame-glow:#45aaf2;border-color:#45aaf2!important;} .member-frame-green{--member-frame-glow:#20bf6b;border-color:#20bf6b!important;} .member-frame-purple{--member-frame-glow:#8854d0;border-color:#8854d0!important;} .member-frame-fire{--member-frame-glow:#ff6b00;border-color:#ff6b00!important;} .member-frame-ice{--member-frame-glow:#74dfff;border-color:#74dfff!important;} .member-frame-shadow{--member-frame-glow:#555;border-color:#333!important;} .member-frame-gold,.member-frame-pink,.member-frame-blue,.member-frame-green, .member-frame-purple,.member-frame-fire,.member-frame-ice,.member-frame-shadow{ box-shadow:inset 0 0 0 2px var(--member-frame-glow),0 0 5px var(--member-frame-glow)!important; animation:memberFrameMagicGlow 1.45s ease-in-out infinite alternate!important; } @keyframes memberFrameMagicGlow{ from{box-shadow:inset 0 0 0 2px var(--member-frame-glow),0 0 3px var(--member-frame-glow)!important;} to{box-shadow:inset 0 0 0 3px var(--member-frame-glow),0 0 11px var(--member-frame-glow)!important;} } .uzr.member-frame-custom{position:relative!important;overflow:hidden!important;} .uzr.member-frame-custom:after{ content:none!important;display:none!important;background:none!important; } .uzr.member-frame-custom>.u-pic, .uzr .u-pic.member-avatar-frame{ position:relative!important;z-index:6!important; } .u-pic.member-avatar-frame{ --avatar-frame-color:#f6d365; border:2px solid var(--avatar-frame-color)!important; outline:1px solid rgba(255,255,255,.8)!important; outline-offset:-3px!important; animation:memberAvatarGlow 1.15s ease-in-out infinite alternate!important; } .u-pic.member-avatar-gold{--avatar-frame-color:#ffd54a;} .u-pic.member-avatar-pink{--avatar-frame-color:#ff4fb3;} .u-pic.member-avatar-blue{--avatar-frame-color:#45aaf2;} .u-pic.member-avatar-green{--avatar-frame-color:#20df78;} .u-pic.member-avatar-purple{--avatar-frame-color:#a66cff;} .u-pic.member-avatar-ice{--avatar-frame-color:#74e9ff;animation-name:memberAvatarIce!important;} .u-pic.member-avatar-shadow{--avatar-frame-color:#777;} .u-pic.member-avatar-custom{--avatar-frame-color:#f25cff;animation-name:memberAvatarRainbow!important;} .u-pic.member-avatar-fire{ --avatar-frame-color:#ff5a00; border-color:#ff7a00!important; animation:memberAvatarFire .58s ease-in-out infinite alternate!important; } @keyframes memberAvatarGlow{ from{box-shadow:0 0 3px 1px var(--avatar-frame-color),inset 0 0 2px rgba(255,255,255,.75)!important;} to{box-shadow:0 0 11px 4px var(--avatar-frame-color),inset 0 0 6px rgba(255,255,255,.95)!important;} } @keyframes memberAvatarFire{ 0%{box-shadow:0 -2px 4px #ffd000,0 0 6px 2px #ff5a00,0 3px 9px 3px #b31300!important;filter:saturate(1.05) brightness(1);} 55%{box-shadow:-2px -5px 8px #fff36b,2px 0 9px 3px #ff7300,0 5px 13px 5px #e32100!important;filter:saturate(1.35) brightness(1.12);} 100%{box-shadow:2px -7px 11px #ffe100,-2px 0 8px 4px #ff3900,0 4px 15px 5px #8f0000!important;filter:saturate(1.55) brightness(1.2);} } @keyframes memberAvatarIce{ from{box-shadow:0 0 4px 1px #d9fbff,0 0 7px 2px #31cfff!important;filter:brightness(1);} to{box-shadow:0 0 9px 3px #fff,0 0 15px 5px #38dfff!important;filter:brightness(1.15);} } @keyframes memberAvatarRainbow{ 0%{border-color:#ff4fb3!important;box-shadow:0 0 7px 2px #ff4fb3!important;} 33%{border-color:#8b5cff!important;box-shadow:0 0 10px 3px #8b5cff!important;} 66%{border-color:#26dfff!important;box-shadow:0 0 12px 4px #26dfff!important;} 100%{border-color:#ffe45c!important;box-shadow:0 0 9px 3px #ffe45c!important;} } .member-banner-frame-panel{position:fixed;right:8px;top:42px;width:330px;max-width:calc(100vw - 16px);height:calc(100vh - 54px);z-index:2600;background:#eee;border:1px solid #111;box-shadow:0 4px 18px rgba(0,0,0,.35);direction:rtl;font-family:"Times New Roman",Times,serif;} .member-banner-frame-panel .mbf-head{height:32px;line-height:32px;background:#071b3d;color:#fff;text-align:center;font-weight:bold;position:relative;} .member-banner-frame-panel .mbf-close{position:absolute;left:4px;top:3px;width:28px;height:26px;border:0;border-radius:4px;background:#d94a59;color:#fff;font-size:20px;line-height:20px;} .member-banner-frame-panel .mbf-body{height:calc(100% - 32px);overflow:auto;padding:8px;box-sizing:border-box;} .member-banner-frame-panel .mbf-note{background:#ddd;border-radius:2px;text-align:center;font:bold 12px "Times New Roman",Times,serif;margin:2px 0 8px;padding:5px;color:#222;} .member-banner-frame-panel .mbf-preview{height:78px!important;border:1px solid #111!important;border-radius:4px!important;margin-bottom:8px!important;display:flex!important;align-items:center!important;padding:5px!important;box-sizing:border-box!important;width:100%!important;} .member-banner-frame-panel .mbf-preview .u-pic{width:48px!important;height:48px!important;border-radius:4px!important;margin:0 0 0 7px!important;object-fit:cover!important;float:none!important;} .member-banner-frame-panel .mbf-preview-info{position:relative;z-index:2;min-width:0;flex:1;} .member-banner-frame-panel .mbf-preview-info .u-topic{display:inline-block;max-width:100%;padding:2px 8px;border-radius:3px;font-weight:bold;} .member-banner-frame-panel .mbf-preview-info small{display:block;margin-top:4px;color:#333;background:transparent;width:max-content;max-width:100%;padding:1px 5px;border-radius:3px;text-shadow:0 1px 1px rgba(255,255,255,.9),0 0 2px rgba(0,0,0,.35);} .member-banner-frame-panel .mbf-actions{display:flex;gap:6px;margin-bottom:8px;} .member-banner-frame-panel .mbf-actions button,.member-banner-frame-panel .mbf-frame-choice{border:1px solid #111;background:#fff;padding:8px 6px;border-radius:4px;font:bold 12px "Times New Roman",Times,serif;cursor:pointer;} .member-banner-frame-panel .mbf-upload{flex:1;background:linear-gradient(90deg,#e91e63,#9c27b0)!important;color:#fff!important;border:0!important;} .member-banner-frame-panel .mbf-remove{width:95px;background:#d94a59!important;color:#fff!important;border:0!important;} .member-banner-frame-panel .mbf-title{background:#071b3d;color:#fff;text-align:center;font:bold 12px "Times New Roman",Times,serif;padding:6px;margin:8px 0 6px;border-radius:3px;} .member-banner-frame-panel .mbf-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;} .member-banner-frame-panel .mbf-banner-choice{height:72px;border:2px solid #111;background-size:100% 100%!important;background-position:center center!important;background-repeat:no-repeat!important;background-color:#f7f7f7;border-radius:2px;image-rendering:auto!important;cursor:pointer;} .member-banner-frame-panel .mbf-frame-choice{min-height:36px;background:#fff;} .member-banner-frame-panel .mbf-custom-frame-choice{height:72px!important;background-size:100% 100%!important;background-position:center!important;background-repeat:no-repeat!important;position:relative!important;overflow:hidden!important;} .member-banner-frame-panel .mbf-custom-frame-choice span{position:absolute;right:3px;bottom:3px;background:rgba(0,0,0,.6);color:#fff;padding:2px 5px;border-radius:3px;font-size:10px;} .member-banner-frame-panel .mbf-uploaded-frames{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important;} .member-banner-frame-panel .mbf-uploaded-frames .mbf-custom-frame-choice{height:92px!important;min-height:92px!important;padding:0!important;border:1px solid #ead5df!important;border-radius:10px!important;background-color:#fff8fb!important;background-size:contain!important;} .member-banner-frame-panel .mbf-frame-help{margin:-2px 0 6px;padding:5px 7px;background:#fff;color:#555;border:1px solid #ddd;font:700 11px/18px "Times New Roman",Times,serif;text-align:right;} .member-banner-frame-panel .mbf-frame-empty{grid-column:1/-1!important;} .member-banner-frame-panel .mbf-banner-choice-image, .member-banner-frame-panel .mbf-frame-choice-image{ display:block!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important; border:0!important;visibility:visible!important;opacity:1!important;pointer-events:none!important; } .member-banner-frame-panel .mbf-banner-choice-image{object-fit:fill!important;} .member-banner-frame-panel .mbf-frame-choice-image{object-fit:contain!important;} /* Uploaded transparent/animated frame sits on the avatar only, never on the full member row. */ .member-avatar-frame-layer{ position:absolute!important;z-index:9!important;display:block!important;pointer-events:none!important; background-size:contain!important;background-position:center!important;background-repeat:no-repeat!important; image-rendering:auto!important; } html body.site-in-room #users .uzr > .member-avatar-frame-layer, html body:not(.site-in-room) #tlogins .lonline .uzr > .member-avatar-frame-layer{ top:0!important;left:5px!important;right:auto!important;width:56px!important;height:56px!important; } .member-banner-frame-panel .mbf-preview > .member-avatar-frame-layer{ top:14px!important;right:5px!important;left:auto!important;width:48px!important;height:48px!important; } /* V230.1: keep the uploaded frame outside a smaller circular portrait. */ html body.site-in-room #users .uzr.member-frame-custom > .u-pic, html body:not(.site-in-room) #tlogins .lonline .uzr.member-frame-custom > .u-pic{ position:absolute!important; z-index:7!important; top:6px!important; left:11px!important; right:auto!important; width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; margin:0!important; padding:0!important; border:0!important; outline:0!important; border-radius:50%!important; object-fit:cover!important; overflow:hidden!important; box-shadow:none!important; animation:none!important; } .member-banner-frame-panel .mbf-preview.member-frame-custom > .u-pic{ position:absolute!important; z-index:7!important; top:20px!important; right:11px!important; left:auto!important; width:36px!important; height:36px!important; min-width:36px!important; min-height:36px!important; margin:0!important; padding:0!important; border:0!important; outline:0!important; border-radius:50%!important; object-fit:cover!important; box-shadow:none!important; animation:none!important; } /* V230.2 fallback: show the larger framed portrait on every viewport. */ #users .uzr.member-frame-custom, #tlogins .lonline .uzr.member-frame-custom{ min-height:70px!important;height:70px!important;padding-left:78px!important; } #users .uzr.member-frame-custom > .u-pic, #tlogins .lonline .uzr.member-frame-custom > .u-pic{ display:block!important;visibility:visible!important;opacity:1!important; top:8px!important;left:10px!important;right:auto!important; width:54px!important;height:54px!important;min-width:54px!important;min-height:54px!important; max-width:54px!important;max-height:54px!important;border-radius:50%!important;object-fit:cover!important; } #users .uzr.member-frame-custom > .member-avatar-frame-layer, #tlogins .lonline .uzr.member-frame-custom > .member-avatar-frame-layer{ display:block!important;visibility:visible!important;opacity:1!important; top:1px!important;left:3px!important;right:auto!important;width:68px!important;height:68px!important; } /* V230.3: fill the frame opening and keep both layers on one center point. */ #users .uzr.member-frame-custom > .u-pic, #tlogins .lonline .uzr.member-frame-custom > .u-pic{ top:5px!important;left:7px!important;right:auto!important; width:60px!important;height:60px!important;min-width:60px!important;min-height:60px!important; max-width:60px!important;max-height:60px!important;object-position:center center!important; } /* V230.4: override the global contain rule used by background avatars. */ #users .uzr.member-frame-custom > .u-pic, #tlogins .lonline .uzr.member-frame-custom > .u-pic{ background-size:118% 118%!important; background-position:center center!important; background-repeat:no-repeat!important; background-color:transparent!important; clip-path:circle(50% at 50% 50%)!important; -webkit-clip-path:circle(50% at 50% 50%)!important; } /* V230.5: the portrait uses the same 68px canvas and coordinates as the frame. */ #users .uzr.member-frame-custom > .u-pic, #tlogins .lonline .uzr.member-frame-custom > .u-pic, #users .uzr.member-frame-custom > img.u-pic, #tlogins .lonline .uzr.member-frame-custom > img.u-pic{ top:1px!important;left:3px!important;right:auto!important; width:68px!important;height:68px!important;min-width:68px!important;min-height:68px!important; max-width:68px!important;max-height:68px!important; background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important; object-fit:cover!important;object-position:center center!important; border-radius:50%!important;transform:none!important; } /* V230.6: values are measured from each uploaded frame's real transparent aperture. */ #users .uzr.member-frame-custom > .u-pic, #tlogins .lonline .uzr.member-frame-custom > .u-pic, #users .uzr.member-frame-custom > img.u-pic, #tlogins .lonline .uzr.member-frame-custom > img.u-pic{ top:var(--member-frame-avatar-top,8px)!important; left:var(--member-frame-avatar-left,11px)!important; width:var(--member-frame-avatar-size,54px)!important; height:var(--member-frame-avatar-size,54px)!important; min-width:var(--member-frame-avatar-size,54px)!important; min-height:var(--member-frame-avatar-size,54px)!important; max-width:var(--member-frame-avatar-size,54px)!important; max-height:var(--member-frame-avatar-size,54px)!important; } /* V230.7: framed users use one larger 80px canvas for both layers. */ #users .uzr.member-frame-custom, #tlogins .lonline .uzr.member-frame-custom{min-height:82px!important;height:82px!important;padding-left:90px!important;} #users .uzr.member-frame-custom > .u-pic, #tlogins .lonline .uzr.member-frame-custom > .u-pic, #users .uzr.member-frame-custom > img.u-pic, #tlogins .lonline .uzr.member-frame-custom > img.u-pic, #users .uzr.member-frame-custom > .member-avatar-frame-layer, #tlogins .lonline .uzr.member-frame-custom > .member-avatar-frame-layer{ top:1px!important;left:3px!important;right:auto!important;width:80px!important;height:80px!important; min-width:80px!important;min-height:80px!important;max-width:80px!important;max-height:80px!important; } /* ===== End member banner + frame ===== */ /* V230.8: real portrait viewport beneath the transparent frame aperture. */ #users .uzr.member-frame-custom, #tlogins .lonline .uzr.member-frame-custom{ min-height:82px!important;height:82px!important;padding-left:90px!important; } #users .uzr.member-frame-custom > .member-avatar-composite, #tlogins .lonline .uzr.member-frame-custom > .member-avatar-composite{ position:absolute!important;left:3px!important;right:auto!important;top:1px!important; width:80px!important;height:80px!important;display:block!important;overflow:visible!important; margin:0!important;padding:0!important;border:0!important;z-index:6!important; } #users .member-avatar-composite > .frame-photo-window, #tlogins .member-avatar-composite > .frame-photo-window{ position:absolute!important; left:var(--member-frame-avatar-left,10px)!important; top:var(--member-frame-avatar-top,8px)!important; width:var(--member-frame-avatar-size,60px)!important; height:var(--member-frame-avatar-size,60px)!important; display:block!important;overflow:hidden!important;border-radius:50%!important; margin:0!important;padding:0!important;border:0!important;z-index:7!important; background:transparent!important; } #users .member-avatar-composite > .frame-photo-window > img.u-pic, #tlogins .member-avatar-composite > .frame-photo-window > img.u-pic{ position:absolute!important;inset:0!important;left:0!important;top:0!important;right:auto!important; display:block!important;visibility:visible!important;opacity:1!important; width:100%!important;height:100%!important;min-width:100%!important;min-height:100%!important; max-width:none!important;max-height:none!important;margin:0!important;padding:0!important; border:0!important;outline:0!important;border-radius:50%!important;overflow:hidden!important; background-size:125% 125%!important;background-position:center center!important;background-repeat:no-repeat!important; object-fit:cover!important;object-position:center center!important;transform:none!important; box-shadow:none!important;animation:none!important;z-index:7!important; } #users .member-avatar-composite > .member-avatar-frame-layer, #tlogins .member-avatar-composite > .member-avatar-frame-layer{ position:absolute!important;inset:0!important;left:0!important;top:0!important;right:auto!important; width:80px!important;height:80px!important;min-width:80px!important;min-height:80px!important; max-width:80px!important;max-height:80px!important;display:block!important;visibility:visible!important; opacity:1!important;margin:0!important;padding:0!important;border:0!important;z-index:9!important; background-size:contain!important;background-position:center center!important;background-repeat:no-repeat!important; pointer-events:none!important; } .member-banner-frame-panel .mbf-save-row{position:sticky;bottom:0;background:#eee;padding:8px 0 2px;margin-top:8px;z-index:5;} .member-banner-frame-panel .mbf-save{width:100%;border:0;border-radius:5px;background:#0b7d2b;color:#fff;font:bold 14px "Times New Roman",Times,serif;padding:10px 6px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.25);} .member-banner-frame-panel .mbf-banner-choice.selected,.member-banner-frame-panel .mbf-frame-choice.selected{outline:3px solid #0b7d2b!important;box-shadow:0 0 0 2px #fff inset,0 0 8px rgba(11,125,43,.55)!important;} /* ===== Member banner v18 full image / GIF visibility ===== */ .uzr.member-has-cover{background-size:100% 100%!important;background-position:center center!important;background-repeat:no-repeat!important;image-rendering:auto!important;} #users .uzr.member-has-cover{min-height:50px!important;} .member-banner-frame-panel .mbf-preview.member-has-cover{background-size:100% 100%!important;background-position:center center!important;background-repeat:no-repeat!important;background-color:#f7f7f7!important;image-rendering:auto!important;} /* ===== End member banner v18 ===== */ /* ===== CENTER FULL CHAT UI V22 ===== */ html,body{ width:100% !important; min-width:0 !important; overflow-x:hidden !important; } body.bg{ display:flex !important; justify-content:center !important; align-items:flex-start !important; margin:0 !important; padding:0 !important; box-sizing:border-box !important; } body.bg > .dad{ position:relative !important; float:none !important; clear:both !important; width:min(100vw, 500px) !important; max-width:500px !important; min-width:0 !important; margin-left:auto !important; margin-right:auto !important; padding:0 !important; box-sizing:border-box !important; overflow:hidden !important; } body.bg > .dad > #tlogins{ left:0 !important; right:0 !important; margin-left:0 !important; width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; } body.bg.site-in-room > .dad #room, body.bg.site-in-room > .dad #d2, body.bg.site-in-room > .dad #d0, body.bg.site-in-room > .dad .footer, body.bg > .dad .dpnl{ max-width:100% !important; box-sizing:border-box !important; } /* ===== END CENTER FULL CHAT UI V22 ===== */ /* ===== MEMBER BANNER PANEL ABOVE SETTINGS - V23 ===== */ #memberBannerFramePanel.member-banner-frame-panel{ z-index:2147483200 !important; position:fixed !important; } #memberBannerFramePanel.member-banner-frame-panel *{ box-sizing:border-box !important; } .member-banner-frame-backdrop{ position:fixed !important; inset:0 !important; background:rgba(0,0,0,.18) !important; z-index:2147483199 !important; pointer-events:none !important; } /* ===== END V23 ===== */ /* ===== V30 MOBILE PRIVATE LIST ONLY SAFE FIX ===== */ /* ===== END V30 ===== */ /* ===== V31 MOBILE DPNL TOP CONTENT SAFE RESTORE ===== Restore the first rows/buttons inside rooms and settings on mobile without changing panel border/layout. */ /* ===== END V31 ===== */ /* ===== V33 MOBILE SETTINGS SCROLL BOTTOM SAFE FIX ===== */ /* ===== END V33 ===== */ /* ===== V34 MOBILE EMOJI ABOVE ALL PANELS FIX ===== */ /* ===== END V34 ===== */ /* ===== V55 MOBILE MEMBER BANNER FRAME PANEL SCROLL FIX ===== */ /* ===== END V55 ===== */ /* v63 member banner library empty state */ .mbf-empty{grid-column:1/-1;background:#fff;border:1px dashed #999;padding:18px 8px;text-align:center;font:bold 14px "Times New Roman",Times,serif;color:#333} /* ========================================================== V72 MOBILE WALL COMMENTS EXACT RESTORE FROM V65 - لا يغيّر حجم الحائط ولا يكبر النوافذ الرئيسية - نافذة محادثات الحائط تظهر كاملة فوق الحائط مثل الصورة المرجعية - يظهر المنشور الأصلي في أعلى نافذة التعليقات دائماً ========================================================== */ /* ========================================================== V73 MOBILE WALL YOUTUBE POPUP EXACT FROM V71 - keeps V72 wall comments as-is - only restores the YouTube link popup mobile layout ========================================================== */ /* ===== v75 MOBILE STORY FULLSCREEN EXACT ROOT FIX ===== */ body.story-open{overflow:hidden!important;touch-action:none!important;background:#000!important;} #storyViewer.story-viewer, #wall #storyViewer.story-viewer, .dpnl #wall #storyViewer.story-viewer{ position:fixed!important; z-index:2147483647!important; inset:0!important; top:0!important;left:0!important;right:0!important;bottom:0!important; width:100vw!important; height:100vh!important; height:100dvh!important; min-width:100vw!important; min-height:100vh!important; margin:0!important;padding:0!important;border:0!important;border-radius:0!important; background:#000!important; overflow:hidden!important; transform:none!important; direction:rtl!important; } #storyViewer .story-viewer-inner{ position:absolute!important;inset:0!important;width:100%!important;height:100%!important; background:#000!important;overflow:hidden!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important; } #storyViewer .story-media-wrap, #storyViewer .story-media-stage{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;background:#000!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;} #storyViewer .story-main-media{display:none!important;background:#000!important;border:0!important;border-radius:0!important;box-shadow:none!important;object-fit:contain!important;max-width:100vw!important;max-height:100vh!important;max-height:100dvh!important;} #storyViewer:not(.can-video):not(.can-audio) .story-main-image{display:block!important;width:100vw!important;height:auto!important;max-height:100vh!important;max-height:100dvh!important;object-fit:contain!important;} #storyViewer.can-video .story-main-video{display:block!important;width:100vw!important;height:auto!important;max-height:100vh!important;max-height:100dvh!important;object-fit:contain!important;background:#000!important;} #storyViewer.can-audio .story-main-image,#storyViewer.can-video .story-main-image{display:none!important;} #storyViewer .story-progress-bars{position:absolute!important;top:12px!important;left:12px!important;right:12px!important;height:3px!important;z-index:100!important;display:flex!important;gap:3px!important;} #storyViewer .story-progress-seg{height:3px!important;background:rgba(255,255,255,.35)!important;border-radius:99px!important;overflow:hidden!important;} #storyViewer .story-progress-fill{height:100%!important;background:#fff!important;display:block!important;} #storyViewer .story-viewer-head{position:absolute!important;top:34px!important;left:18px!important;right:auto!important;z-index:110!important;display:flex!important;align-items:center!important;gap:8px!important;color:#fff!important;max-width:58vw!important;} #storyViewer .story-author-pic{width:46px!important;height:46px!important;border-radius:50%!important;background-size:cover!important;background-position:center!important;border:1px solid #fff!important;} #storyViewer .story-author-name{display:none!important;} #storyViewer .story-author-time{font-size:17px!important;color:#fff!important;text-shadow:0 1px 5px #000!important;font-weight:700!important;} #storyViewer .story-viewer-tools{position:absolute!important;top:34px!important;right:12px!important;z-index:120!important;display:flex!important;gap:8px!important;} #storyViewer .story-close-btn{position:fixed!important;top:58px!important;left:10px!important;right:auto!important;width:38px!important;height:38px!important;font-size:30px!important;line-height:38px!important;color:#fff!important;background:transparent!important;text-shadow:0 2px 6px #000!important;z-index:140!important;} #storyViewer .story-download-btn{display:none!important;} #storyViewer .story-delete-btn{background:#d9534f!important;color:#fff!important;border-radius:0!important;width:54px!important;height:32px!important;line-height:32px!important;font-size:0!important;position:fixed!important;right:0!important;top:122px!important;z-index:140!important;text-shadow:none!important;} #storyViewer .story-delete-btn:after{content:'حذف';font-size:18px!important;font-family:"Times New Roman",Times,serif!important;font-weight:700!important;} #storyViewer:not(.can-delete) .story-delete-btn{display:none!important;} #storyViewer .story-caption{position:absolute!important;left:50%!important;bottom:84px!important;transform:translateX(-50%)!important;width:88vw!important;color:#fff!important;text-align:center!important;background:transparent!important;text-shadow:0 2px 7px #000!important;font-size:16px!important;z-index:115!important;} #storyViewer .story-viewer-bottom{position:absolute!important;left:16px!important;top:45%!important;bottom:auto!important;z-index:130!important;color:#fff!important;} #storyViewer .story-side-actions{display:flex!important;flex-direction:column!important;align-items:center!important;gap:5px!important;} #storyViewer .story-side-actions button{width:54px!important;height:54px!important;background:transparent!important;border:0!important;box-shadow:none!important;color:#fff!important;font-size:46px!important;line-height:54px!important;text-shadow:0 2px 6px #000!important;} #storyViewer .story-like-count,#storyViewer .story-view-count{font-size:18px!important;font-weight:700!important;color:#fff!important;text-shadow:0 2px 6px #000!important;margin-bottom:10px!important;} #storyViewer .story-extra-actions,#storyViewer .story-nav{display:none!important;} #storyViewer.can-audio .story-audio-cover{display:flex!important;background:#000!important;color:#fff!important;box-shadow:none!important;} /* ===== v81 MOBILE STORY IMAGE NOT AUDIO FINAL FIX ===== */ /* ===== END v81 MOBILE STORY IMAGE NOT AUDIO FINAL FIX ===== */ /* ===== v138 YELLOW MOVEMENT EVENTS (MOBILE + DESKTOP) ===== */ .msg.system-event, .hmsg.system-event, .break.system-event, .msg.system-join-chat, .msg.system-leave-chat, .msg.system-disconnect-chat, .msg.system-logout-chat, .msg.system-room-join, .msg.system-room-leave, .msg.system-room-move, .msg.system-roomkick, .uzr.system-event, .uzr.system-join-chat, .uzr.system-leave-chat, .uzr.system-disconnect-chat, .uzr.system-logout-chat, .uzr.system-room-join, .uzr.system-room-leave, .uzr.system-room-move, .uzr.system-roomkick, body.site-in-room .msg.system-event, body.site-in-room .hmsg.system-event, body.site-in-room .break.system-event, body.site-in-room .msg.system-join-chat, body.site-in-room .msg.system-leave-chat, body.site-in-room .msg.system-disconnect-chat, body.site-in-room .msg.system-logout-chat, body.site-in-room .msg.system-room-join, body.site-in-room .msg.system-room-leave, body.site-in-room .msg.system-room-move, body.site-in-room .msg.system-roomkick, body.site-in-room .uzr.system-event, body.site-in-room .uzr.system-join-chat, body.site-in-room .uzr.system-leave-chat, body.site-in-room .uzr.system-disconnect-chat, body.site-in-room .uzr.system-logout-chat, body.site-in-room .uzr.system-room-join, body.site-in-room .uzr.system-room-leave, body.site-in-room .uzr.system-room-move, body.site-in-room .uzr.system-roomkick{ background:#fff5e8!important; background-image:none!important; border-top:1px solid #efdcc4!important; border-bottom:1px solid #efdcc4!important; color:#111!important; } .uzr.system-event > .uzr, .uzr.system-join-chat > .uzr, .uzr.system-leave-chat > .uzr, .uzr.system-disconnect-chat > .uzr, .uzr.system-logout-chat > .uzr, .uzr.system-room-join > .uzr, .uzr.system-room-leave > .uzr, .uzr.system-room-move > .uzr, .uzr.system-roomkick > .uzr, .uzr.system-event .u-topic, .uzr.system-event .u-msg{ background-color:transparent!important; background-image:none!important; } .msg.system-event .u-msg, .msg.system-event .u-topic, .msg.system-event .tago, .msg.system-join-chat .u-msg, .msg.system-leave-chat .u-msg, .msg.system-disconnect-chat .u-msg, .msg.system-logout-chat .u-msg, .msg.system-room-join .u-msg, .msg.system-room-leave .u-msg, .msg.system-room-move .u-msg, .msg.system-roomkick .u-msg, body.site-in-room .msg.system-event .u-msg, body.site-in-room .msg.system-event .u-topic, body.site-in-room .msg.system-event .tago{ color:#111!important; font-weight:700!important; text-shadow:none!important; } .msg.system-event .u-pic, .msg.system-join-chat .u-pic, .msg.system-leave-chat .u-pic, .msg.system-disconnect-chat .u-pic, .msg.system-logout-chat .u-pic, .msg.system-room-join .u-pic, .msg.system-room-leave .u-pic, .msg.system-room-move .u-pic, .msg.system-roomkick .u-pic{ border:1px solid #d6b954!important; } .msg.system-event .system-room-badge, .msg.system-join-chat .system-room-badge, .msg.system-leave-chat .system-room-badge, .msg.system-disconnect-chat .system-room-badge, .msg.system-logout-chat .system-room-badge, .msg.system-room-join .system-room-badge, .msg.system-room-leave .system-room-badge, .msg.system-room-move .system-room-badge, .msg.system-roomkick .system-room-badge{ background:#116b86!important; color:#fff!important; border-color:#0b5369!important; } /* ===== END v138 YELLOW MOVEMENT EVENTS ===== */ /* ========================================================== V89 FIX: restore desktop wall YouTube + wall comments after body append - applies to #wallYoutubeBox / #wallCommentsPanel when moved to body - keeps mobile layout safe ========================================================== */ body #wallYoutubeBox.wall-youtube-box, body #wallYoutubeBox{ position:fixed !important; left:50% !important; right:auto !important; top:50% !important; bottom:auto !important; transform:translate(-50%,-50%) !important; width:360px !important; max-width:calc(100vw - 28px) !important; min-width:300px !important; z-index:1000002 !important; display:none; direction:rtl !important; background:#111a34 !important; border:1px solid #0a4d63 !important; border-radius:0 0 12px 12px !important; box-shadow:0 18px 38px rgba(0,0,0,.35) !important; overflow:hidden !important; box-sizing:border-box !important; } body #wallYoutubeBox[style*="display: block"], body #wallYoutubeBox[style*="display:block"]{display:block !important;} body #wallYoutubeBox .wall-youtube-head{ height:50px !important;min-height:50px !important;display:flex !important;align-items:center !important;justify-content:space-between !important;padding:8px 12px !important;background:#17677c !important;color:#fff !important;box-sizing:border-box !important;border-bottom:1px solid rgba(0,0,0,.35) !important; } body #wallYoutubeBox .wall-youtube-title{font:bold 15px "Times New Roman",Times,serif !important;color:#fff !important;white-space:nowrap !important;display:flex !important;align-items:center !important;gap:7px !important;} body #wallYoutubeBox .wall-youtube-close{display:flex !important;align-items:center !important;justify-content:center !important;width:34px !important;height:34px !important;min-width:34px !important;border:0 !important;border-radius:8px !important;background:#d60b0b !important;color:#fff !important;font:bold 24px/1 "Times New Roman",Times,serif !important;padding:0 !important;margin:0 !important;} body #wallYoutubeBox .wall-youtube-body{display:block !important;padding:14px !important;background:#111a34 !important;max-height:calc(100vh - 140px) !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch !important;box-sizing:border-box !important;} body #wallYoutubeBox .wall-youtube-search-row{height:40px !important;border:1px solid #34558f !important;border-radius:9px !important;display:flex !important;flex-direction:row-reverse !important;align-items:center !important;gap:8px !important;padding:0 10px !important;background:#0c1428 !important;color:#a9b7cf !important;margin:0 0 8px !important;box-sizing:border-box !important;} body #wallYoutubeBox #wallYoutubeUrl, body #wallYoutubeBox #wallYoutubeCaption{display:block !important;width:100% !important;height:38px !important;box-sizing:border-box !important;border:1px solid #34558f !important;border-radius:9px !important;background:#0c1428 !important;color:#fff !important;outline:none !important;padding:6px 10px !important;margin:0 0 8px !important;font:14px "Times New Roman",Times,serif !important;} body #wallYoutubeBox .wall-youtube-search-row #wallYoutubeUrl{border:0 !important;margin:0 !important;height:36px !important;padding:0 !important;background:transparent !important;} body #wallYoutubeBox .wall-youtube-search-btn{width:28px !important;height:28px !important;min-width:28px !important;border:0 !important;background:transparent !important;color:#b9c9eb !important;font-size:18px !important;padding:0 !important;} body #wallYoutubeBox .wall-youtube-results{margin-top:10px !important;max-height:260px !important;overflow-y:auto !important;overflow-x:hidden !important;border:1px solid #34558f !important;border-radius:9px !important;padding:8px !important;background:#0c1428 !important;display:grid !important;grid-template-columns:1fr 1fr !important;gap:8px !important;box-sizing:border-box !important;} body #wallYoutubeBox .wall-youtube-results:empty{display:none !important;} body #wallYoutubeBox .wall-youtube-card{background:#fff !important;border-radius:6px !important;padding:8px !important;cursor:pointer !important;min-height:92px !important;box-sizing:border-box !important;} body #wallYoutubeBox .wall-youtube-card img{width:100% !important;height:74px !important;object-fit:cover !important;border-radius:4px !important;display:block !important;background:#111 !important;} body #wallYoutubeBox .wall-youtube-card-title{font:bold 11px/1.35 "Times New Roman",Times,serif !important;color:#111 !important;margin-top:5px !important;max-height:32px !important;overflow:hidden !important;text-align:right !important;} body #wallYoutubeBox .wall-youtube-actions{display:flex !important;justify-content:flex-start !important;margin-top:10px !important;} body #wallYoutubeBox .wall-youtube-send{display:inline-flex !important;align-items:center !important;justify-content:center !important;background:#1f77b6 !important;color:#fff !important;border:0 !important;border-radius:9px !important;padding:7px 14px !important;font:bold 14px "Times New Roman",Times,serif !important;} body #wallYoutubeBox .wall-youtube-loading, body #wallYoutubeBox .wall-youtube-empty{grid-column:1/-1 !important;color:#fff !important;text-align:center !important;padding:20px 6px !important;} body #wallCommentsPanel.wall-comments-panel, body #wallCommentsPanel{ position:fixed !important; z-index:1000001 !important; right:12px !important; left:auto !important; top:70px !important; transform:none !important; width:340px !important; max-width:calc(100vw - 24px) !important; height:460px !important; max-height:calc(100vh - 96px) !important; min-height:260px !important; flex-direction:column !important; background:#fff !important; border:1px solid #0f5368 !important; border-radius:0 0 8px 8px !important; box-shadow:0 10px 24px rgba(0,0,0,.35) !important; overflow:hidden !important; direction:rtl !important; box-sizing:border-box !important; } body #wallCommentsPanel[style*="display: flex"], body #wallCommentsPanel[style*="display:flex"]{display:flex !important;} body #wallCommentsPanel .wall-comments-head{flex:0 0 42px !important;height:42px !important;display:flex !important;align-items:center !important;justify-content:space-between !important;padding:5px 8px !important;background:#4f8a7c !important;color:#fff !important;border-bottom:1px solid #333 !important;box-sizing:border-box !important;} body #wallCommentsPanel .wall-comments-title{color:#fff !important;font:bold 16px "Times New Roman",Times,serif !important;} body #wallCommentsPanel .wall-comments-close{display:flex !important;align-items:center !important;justify-content:center !important;width:30px !important;height:30px !important;min-width:30px !important;padding:0 !important;margin:0 !important;border:0 !important;border-radius:7px !important;background:#d60b0b !important;color:#fff !important;font:bold 24px/1 "Times New Roman",Times,serif !important;} body #wallCommentsPanel .wall-comments-post{flex:0 0 auto !important;display:block !important;min-height:78px !important;max-height:132px !important;overflow:auto !important;background:#fff !important;color:#111 !important;border-bottom:1px solid #bbb !important;padding:6px !important;box-sizing:border-box !important;} body #wallCommentsPanel .wall-comments-origin{display:flex !important;align-items:flex-start !important;gap:8px !important;width:100% !important;min-height:54px !important;background:#fff !important;color:#111 !important;} body #wallCommentsPanel .wall-comments-origin-pic{flex:0 0 54px !important;width:54px !important;height:54px !important;object-fit:cover !important;border:1px solid #d0d0d0 !important;background:#eee !important;display:block !important;} body #wallCommentsPanel .wall-comments-origin-body{flex:1 1 auto !important;min-width:0 !important;color:#111 !important;font:bold 15px/1.35 "Times New Roman",Times,serif !important;overflow-wrap:anywhere !important;} body #wallCommentsPanel .wall-comments-origin-topic{display:block !important;color:#111 !important;font:bold 15px "Times New Roman",Times,serif !important;margin-bottom:2px !important;background:transparent !important;} body #wallCommentsPanel .wall-comments-origin-msg{display:block !important;color:#111 !important;font:bold 16px/1.35 "Times New Roman",Times,serif !important;background:#fff !important;overflow-wrap:anywhere !important;} body #wallCommentsPanel .wall-comments-list{flex:1 1 auto !important;display:block !important;min-height:130px !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch !important;background:#f1f3f5 !important;color:#111 !important;padding:4px !important;box-sizing:border-box !important;} body #wallCommentsPanel .wall-comment-item{display:flex !important;align-items:flex-start !important;gap:6px !important;background:#fff !important;color:#111 !important;border-bottom:1px solid #d0d0d0 !important;padding:5px !important;} body #wallCommentsPanel .wall-comment-pic{flex:0 0 36px !important;width:36px !important;height:36px !important;object-fit:cover !important;} body #wallCommentsPanel .wall-comment-body{flex:1 1 auto !important;min-width:0 !important;} body #wallCommentsPanel .wall-comment-line{display:flex !important;justify-content:space-between !important;gap:5px !important;} body #wallCommentsPanel .wall-comment-topic{color:#111 !important;font-weight:bold !important;background:transparent !important;} body #wallCommentsPanel .wall-comment-time{color:#555 !important;font-weight:bold !important;white-space:nowrap !important;} body #wallCommentsPanel .wall-comment-msg{color:#0645ad !important;line-height:1.4 !important;word-break:break-word !important;} body #wallCommentsPanel .wall-comments-sendbox{flex:0 0 48px !important;height:48px !important;display:flex !important;align-items:center !important;gap:6px !important;padding:5px !important;background:#fff !important;border-top:1px solid #bbb !important;box-sizing:border-box !important;} body #wallCommentsPanel .wall-comments-input{flex:1 1 auto !important;width:auto !important;min-width:0 !important;height:36px !important;min-height:36px !important;max-height:36px !important;resize:none !important;background:#fff !important;color:#111 !important;border:1px solid #8ca9b5 !important;padding:7px !important;font-size:15px !important;box-sizing:border-box !important;} body #wallCommentsPanel .wall-comments-send{flex:0 0 42px !important;width:42px !important;height:42px !important;border-radius:8px !important;background:#257485 !important;color:#fff !important;border:0 !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:20px !important;} #d2 .msg.system-event, #d2 .hmsg.system-event, #d2 .break.system-event, #d2 .msg.system-join-chat, #d2 .msg.system-leave-chat, #d2 .msg.system-disconnect-chat, #d2 .msg.system-logout-chat, #d2 .msg.system-room-join, #d2 .msg.system-room-leave, #d2 .msg.system-room-move, #d2 .msg.system-roomkick, #d2 .uzr.system-event, #d2 .uzr.system-join-chat, #d2 .uzr.system-leave-chat, #d2 .uzr.system-disconnect-chat, #d2 .uzr.system-logout-chat, #d2 .uzr.system-room-join, #d2 .uzr.system-room-leave, #d2 .uzr.system-room-move, #d2 .uzr.system-roomkick{ background:#fff5e8 !important; background-image:none !important; color:#111 !important; border-top:1px solid #efdcc4 !important; border-bottom:1px solid #efdcc4 !important; position:relative !important; z-index:1 !important; min-height:30px !important; } #d2 .uzr.system-event > .uzr, #d2 .uzr.system-join-chat > .uzr, #d2 .uzr.system-leave-chat > .uzr, #d2 .uzr.system-disconnect-chat > .uzr, #d2 .uzr.system-logout-chat > .uzr, #d2 .uzr.system-room-join > .uzr, #d2 .uzr.system-room-leave > .uzr, #d2 .uzr.system-room-move > .uzr, #d2 .uzr.system-roomkick > .uzr, #d2 .uzr.system-event .u-topic, #d2 .uzr.system-event .u-msg{ background-color:transparent !important; background-image:none !important; } #d2 .msg.system-event .u-msg, #d2 .msg.system-event .u-topic, #d2 .msg.system-event .tago, #d2 .msg.system-join-chat .u-msg, #d2 .msg.system-leave-chat .u-msg, #d2 .msg.system-disconnect-chat .u-msg, #d2 .msg.system-logout-chat .u-msg, #d2 .msg.system-room-join .u-msg, #d2 .msg.system-room-leave .u-msg, #d2 .msg.system-room-move .u-msg, #d2 .msg.system-roomkick .u-msg{ color:#111 !important; font-weight:700 !important; text-shadow:none !important; } /* ===== END v91 SYSTEM EVENTS VISIBILITY UNDER MIC BAR ===== */ /* ===== v92: member list true color + clear avatars/banner ===== */ #users .uzr, #tlogins .uzr, #d2 .uzr, .lonline .uzr{ opacity:1 !important; filter:none !important; -webkit-filter:none !important; mix-blend-mode:normal !important; } #users .uzr *, #tlogins .uzr *, #d2 .uzr *, .lonline .uzr *{ opacity:1 !important; filter:none !important; -webkit-filter:none !important; mix-blend-mode:normal !important; } #users .u-pic, #users img.u-pic, #tlogins .u-pic, #tlogins img.u-pic, #d2 .u-pic, #d2 img.u-pic, .lonline .u-pic, .lonline img.u-pic{ opacity:1 !important; filter:none !important; -webkit-filter:none !important; image-rendering:auto !important; object-fit:cover !important; object-position:center center !important; background-size:cover !important; background-position:center center !important; background-repeat:no-repeat !important; transform:none; backface-visibility:visible; } #users .uzr.member-has-cover, #tlogins .uzr.member-has-cover, #d2 .uzr.member-has-cover, .lonline .uzr.member-has-cover{ background-size:cover !important; background-position:center center !important; background-repeat:no-repeat !important; background-color:transparent !important; opacity:1 !important; filter:none !important; -webkit-filter:none !important; } #users .uzr.member-has-cover:before, #tlogins .uzr.member-has-cover:before, #d2 .uzr.member-has-cover:before, .lonline .uzr.member-has-cover:before{ display:none !important; content:none !important; background:none !important; } #users .uzr.member-has-cover .u-topic, #tlogins .uzr.member-has-cover .u-topic, #d2 .uzr.member-has-cover .u-topic, .lonline .uzr.member-has-cover .u-topic{ background:transparent !important; background-color:transparent !important; color:inherit !important; text-shadow:0 1px 1px rgba(255,255,255,.9),0 0 2px rgba(0,0,0,.35) !important; opacity:1 !important; } #users .uzr.member-has-cover .u-msg, #tlogins .uzr.member-has-cover .u-msg, #d2 .uzr.member-has-cover .u-msg, .lonline .uzr.member-has-cover .u-msg{ background:transparent !important; background-color:transparent !important; border-radius:0 !important; padding:1px 4px !important; box-shadow:none !important; text-shadow:0 1px 1px rgba(255,255,255,.9),0 0 2px rgba(0,0,0,.35) !important; opacity:1 !important; color:inherit !important; } /* keep away/status visible but not faded */ #users .uzr.not-inroom, #tlogins .uzr.not-inroom, .lonline .uzr.not-inroom{ opacity:1 !important; filter:none !important; -webkit-filter:none !important; } /* ===== END v92 ===== */ /* ===== V93 REAL MEMBER COLORS IN ONLINE LIST ===== */ #users .uzr .u-topic, #tlogins .uzr .u-topic, #d2 .uzr .u-topic, .lonline .uzr .u-topic{ opacity:1 !important; filter:none !important; -webkit-filter:none !important; text-shadow:none !important; } #users .uzr.member-has-cover .u-topic, #tlogins .uzr.member-has-cover .u-topic, #d2 .uzr.member-has-cover .u-topic, .lonline .uzr.member-has-cover .u-topic{ color:var(--v93-user-color, inherit); opacity:1 !important; filter:none !important; -webkit-filter:none !important; } #users .uzr .u-msg, #tlogins .uzr .u-msg, #d2 .uzr .u-msg, .lonline .uzr .u-msg, #users .uzr .user-status-line, #tlogins .uzr .user-status-line, #d2 .uzr .user-status-line, .lonline .uzr .user-status-line{ opacity:1 !important; filter:none !important; -webkit-filter:none !important; } /* ===== END V93 ===== */ /* ===== ROOT DYNAMIC CHAT + RIGHT PANEL ===== المصدر الوحيد لأبعاد الشات والبنلات. لا توجد مقاسات viewport داخل JavaScript. */ :root{ --chat-panel-width:320px; --chat-panel-min:300px; --chat-panel-max:340px; --chat-bottom-bar:34px; } html, body{ width:100% !important; min-width:100% !important; max-width:100% !important; height:100% !important; min-height:100% !important; max-height:100% !important; margin:0 !important; padding:0 !important; overflow:hidden !important; zoom:1 !important; transform:none !important; box-sizing:border-box !important; -webkit-text-size-adjust:100%; text-size-adjust:100%; } body.bg{ display:block !important; } body.bg > .dad{ position:relative !important; display:block !important; width:100% !important; min-width:0 !important; max-width:100% !important; height:100% !important; min-height:100% !important; max-height:100% !important; margin:0 !important; padding:0 !important; overflow:hidden !important; float:none !important; clear:both !important; zoom:1 !important; transform:none !important; box-sizing:border-box !important; } /* ===== CHAT SIZE 1:1 VIDEO SYSTEM V112 ===== JavaScript يمرر أبعاد نافذة المتصفح الفعلية بالبكسل بعد تعويض الزووم. لذلك يبقى الشريط السفلي داخل الجزء المرئي عند تغير أدوات متصفح الجوال. */ body.bg.site-in-room.chat-full-page-zoom > .dad{ width:var(--chat-zoom-viewport-width, 100vw) !important; min-width:var(--chat-zoom-viewport-width, 100vw) !important; max-width:var(--chat-zoom-viewport-width, 100vw) !important; height:var(--chat-zoom-viewport-height, 100vh) !important; min-height:var(--chat-zoom-viewport-height, 100vh) !important; max-height:var(--chat-zoom-viewport-height, 100vh) !important; margin:0 !important; zoom:var(--chat-ui-zoom, 1) !important; transform:none !important; transform-origin:top left !important; } #settings .chat-zoom-size{ display:block !important; width:98% !important; height:38px !important; margin:7px auto 5px !important; padding:0 10px !important; border:1px solid #222 !important; border-radius:2px !important; background:#344b63 !important; color:#fff !important; font:bold 14px "Times New Roman",Times,serif !important; line-height:36px !important; text-align:center !important; text-align-last:center !important; direction:rtl !important; box-sizing:border-box !important; } #settings .chat-zoom-size option{ background:#344b63 !important; color:#fff !important; font:bold 14px "Times New Roman",Times,serif !important; text-align:center !important; direction:rtl !important; } /* ===== END CHAT SIZE 1:1 VIDEO SYSTEM V112 ===== */ body.site-in-room #room{ position:relative !important; display:grid !important; grid-template-rows:minmax(0, 1fr) auto var(--chat-bottom-bar) !important; grid-template-columns:minmax(0, 1fr) !important; width:100% !important; min-width:0 !important; max-width:100% !important; height:100% !important; min-height:0 !important; max-height:100% !important; margin:0 !important; padding:0 !important; overflow:hidden !important; float:none !important; box-sizing:border-box !important; } body.site-in-room #d2{ position:relative !important; grid-row:1 !important; width:100% !important; min-width:0 !important; max-width:100% !important; height:auto !important; min-height:0 !important; max-height:none !important; margin:0 !important; overflow-x:hidden !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y; box-sizing:border-box !important; } body.site-in-room #room > .footer{ position:relative !important; grid-row:2 !important; display:flex !important; align-items:center !important; gap:2px !important; width:100% !important; min-width:0 !important; max-width:100% !important; height:auto !important; min-height:0 !important; margin:0 !important; inset:auto !important; float:none !important; transform:none !important; box-sizing:border-box !important; } body.site-in-room #room > .footer .filw, body.site-in-room #room > .footer #tbox{ flex:1 1 auto !important; width:auto !important; min-width:0 !important; } body.site-in-room #d0{ position:relative !important; grid-row:3 !important; display:flex !important; align-items:stretch !important; width:100% !important; min-width:0 !important; max-width:100% !important; height:var(--chat-bottom-bar) !important; min-height:var(--chat-bottom-bar) !important; max-height:var(--chat-bottom-bar) !important; margin:0 !important; padding-inline-start:1px !important; inset:auto !important; float:none !important; transform:none !important; box-sizing:border-box !important; z-index:4 !important; } body.site-in-room #d0 > .ae{ flex:1 1 0 !important; } body .dpnl.bg.tab-content, body.site-in-room .dpnl{ position:fixed !important; top:0 !important; right:0 !important; bottom:var(--chat-bottom-bar) !important; left:auto !important; width:min(var(--chat-panel-width), 100%) !important; min-width:min(var(--chat-panel-min), 100%) !important; max-width:min(var(--chat-panel-max), 100%) !important; height:auto !important; min-height:0 !important; max-height:none !important; margin:0 !important; padding:20px 0 8px !important; overflow:hidden !important; float:none !important; clear:none !important; zoom:1 !important; transform:none !important; transition:none !important; animation:none !important; border:1px solid !important; border-radius:0 !important; box-sizing:border-box !important; z-index:6000 !important; } body .dpnl > .tab-pane{ position:relative !important; width:100% !important; min-width:0 !important; max-width:100% !important; height:100% !important; min-height:0 !important; max-height:100% !important; margin:0 !important; box-sizing:border-box !important; overflow-x:hidden !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y; } body .dpnl > .tab-pane:not(.active){ display:none !important; visibility:hidden !important; pointer-events:none !important; } body .dpnl > .tab-pane.active{ display:block !important; visibility:visible !important; pointer-events:auto !important; } body .dpnl #settings{ padding:0 5px 78px !important; } button, input, textarea, select, a, label, [role="button"], #d0 > *, .dpnl .btn{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; } /* ===== END ROOT DYNAMIC CHAT + RIGHT PANEL ===== */ /* ===== V95 UNIFIED COMPONENT STYLE ===== نفس القواعد لكل المتصفحات والمنصات دون فروع حسب حجم الجهاز أو CSS محقون من JavaScript. */ .fresh-live-viewer.fresh-live-multi{ width:min(820px, calc(100% - 14px)); max-width:calc(100% - 14px); left:50% !important; right:auto !important; top:64px !important; transform:translateX(-50%); } .fresh-live-multi .fresh-live-body{ height:min(68%, 560px); min-height:190px; display:block; background:#000; } .fresh-live-multi .fresh-live-grid{ height:100%; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-rows:minmax(0, 1fr); gap:5px; overflow:hidden; padding:5px; box-sizing:border-box; } .fresh-live-multi.live-count-0 .fresh-live-grid, .fresh-live-multi.live-count-1 .fresh-live-grid{grid-template-columns:1fr;} .fresh-live-multi.live-count-2 .fresh-live-grid, .fresh-live-multi.live-count-3 .fresh-live-grid, .fresh-live-multi.live-count-4 .fresh-live-grid{grid-template-columns:repeat(2, minmax(0, 1fr));} .fresh-live-multi.live-count-5 .fresh-live-grid, .fresh-live-multi.live-count-6 .fresh-live-grid, .fresh-live-multi.live-count-7 .fresh-live-grid, .fresh-live-multi.live-count-8 .fresh-live-grid, .fresh-live-multi.live-count-9 .fresh-live-grid{grid-template-columns:repeat(3, minmax(0, 1fr));} .fresh-live-tile{ position:relative; height:100%; min-height:0; overflow:hidden; background:#000; border:1px solid rgba(255,215,0,.55); border-radius:8px; } .fresh-live-tile video{ display:block; width:100%; height:100% !important; min-height:0 !important; object-fit:cover; background:#000; } .fresh-live-tile-title{ position:absolute; top:4px; right:4px; left:4px; z-index:2; padding:3px 6px; overflow:hidden; color:#fff; background:rgba(0,0,0,.45); border-radius:6px; font:bold 12px "Times New Roman",Times,serif; text-align:right; white-space:nowrap; text-overflow:ellipsis; } .fresh-live-tile.mine{ border-color:#ffd700; box-shadow:0 0 8px rgba(255,215,0,.45); } /* V192: show the complete camera frame and use one lightweight clear look. */ .fresh-live-tile video, .fresh-live-video{ object-fit:contain !important; object-position:center center !important; filter:brightness(1.04) contrast(1.03) saturate(1.06) !important; background:#000 !important; } .fresh-live-clear-mode{ margin:7px auto 14px; padding:8px 10px; max-width:230px; border:1px solid #e0c15a; border-radius:7px; background:#fff8dc; color:#684d00; font-weight:bold; } .chat-color-swatch-input{ width:58px !important; height:34px !important; padding:0 !important; color:transparent !important; text-shadow:none !important; caret-color:transparent !important; cursor:pointer !important; background-image:none !important; border:1px solid #9fb3c8 !important; border-radius:9px !important; } .chat-color-palette-v86{ position:fixed; z-index:999999; left:50%; top:50%; width:min(380px, calc(100% - 24px)); max-height:78%; padding:12px; overflow:auto; direction:rtl; background:#fff; border:1px solid #cfdceb; border-radius:16px; box-shadow:0 15px 45px rgba(0,0,0,.28); transform:translate(-50%,-50%); } .chat-color-palette-head, .member-color-row-v86, .member-color-actions-v86{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .chat-color-palette-head{ margin-bottom:10px; color:#0b4d68; font-weight:700; } .chat-color-close{ padding:7px 11px; color:#fff; background:#d6424a; border:0; border-radius:9px; font-weight:700; } .chat-color-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:7px; } .chat-color-cell{ height:34px; border:1px solid rgba(0,0,0,.16); border-radius:8px; background-color:var(--chat-palette-color,#fff) !important; background-image:none !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.35); } .chat-color-cell.selected{ outline:3px solid #0c8eb6; outline-offset:2px; } .settings-change-pic{ display:flex !important; align-items:center !important; justify-content:center !important; gap:9px !important; } .settings-change-pic-avatar{ width:34px !important; height:34px !important; min-width:34px !important; border:1px solid #222 !important; border-radius:4px !important; object-fit:cover !important; background:#fff !important; } .mbf-frame-actions{display:flex;justify-content:center;padding:8px 0 10px} .mbf-remove-frame{width:100%;min-height:38px;border:1px solid #9f2028;border-radius:7px;background:#d94b53!important;color:#fff!important;font-weight:bold} .mbf-remove-frame.selected{outline:3px solid #ffd34d;outline-offset:2px} .karaoke-points{grid-template-columns:1fr 1fr !important} .karaoke-points small{padding:4px;border-radius:8px;background:rgba(0,0,0,.35);color:#fff;font-weight:bold} .karaoke-points strong{grid-column:auto !important} .karaoke-actions{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap} .karaoke-open-gifts{border:0;border-radius:7px;padding:8px 12px;background:#8b28bd!important;color:#fff!important;font-weight:bold} .karaoke-wallet{display:inline-flex;align-items:center;min-height:32px;padding:0 10px;border-radius:8px;background:#241332;color:#fff;font-weight:bold} .member-color-panel-v86{ position:fixed; inset:0; z-index:999998; display:flex; align-items:center; justify-content:center; padding:12px; direction:rtl; background:rgba(0,0,0,.45); } .member-color-box-v86{ width:min(420px, calc(100% - 24px)); padding:14px; background:#fff; border-radius:18px; box-shadow:0 18px 50px rgba(0,0,0,.30); } .member-color-title-v86{ margin-bottom:12px; color:#0b4d68; font-size:17px; font-weight:800; text-align:center; } .member-color-row-v86{ margin:8px 0; padding:10px; background:#f8fbff; border:1px solid #e4edf5; border-radius:13px; } .member-color-chip-v86{ width:62px; height:36px; border:1px solid #b8c7d6; border-radius:10px; } .member-color-actions-v86{margin-top:12px;} .member-color-actions-v86 button{ flex:1; padding:11px; border:0; border-radius:12px; font-weight:800; } .member-color-save-v86{color:#fff;background:#1689ad;} .member-color-cancel-v86{color:#445;background:#eef3f8;} /* ===== END V95 UNIFIED COMPONENT STYLE ===== */ /* ===== ROOT MICROPHONE BAR LAYOUT ===== Keep the microphone controls and their background in one grid row. */ body.site-in-room > .dad.fresh-voice-enabled{ display:grid !important; grid-template-rows:42px minmax(0, 1fr) !important; grid-template-columns:minmax(0, 1fr) !important; width:100% !important; height:100% !important; min-height:0 !important; overflow:hidden !important; } body.site-in-room > .dad.fresh-voice-enabled > #freshVoiceBar{ position:relative !important; grid-row:1 !important; grid-column:1 !important; display:flex !important; align-items:center !important; width:100% !important; height:42px !important; min-height:42px !important; max-height:42px !important; margin:0 !important; padding:1px 3px !important; overflow:hidden !important; background-color:var(--chat-template, var(--site-body-bg, #345c73)) !important; background-image:none !important; border:0 !important; border-bottom:1px solid var(--chat-template, var(--site-body-bg, #345c73)) !important; box-sizing:border-box !important; } body.site-in-room > .dad.fresh-voice-enabled > #room{ position:relative !important; grid-row:2 !important; grid-column:1 !important; width:100% !important; height:100% !important; min-height:0 !important; max-height:100% !important; overflow:hidden !important; } /* Disabling room microphones removes both the bar and its reserved row. */ body.site-in-room.room-mic-disabled-hidebar > .dad.fresh-voice-enabled{ grid-template-rows:0 minmax(0, 1fr) !important; } body.site-in-room.room-mic-disabled-hidebar > .dad.fresh-voice-enabled > #freshVoiceBar{ display:none !important; height:0 !important; min-height:0 !important; max-height:0 !important; padding:0 !important; border:0 !important; } /* ===== MICROPHONE SEAT ACTION MENU ===== */ .fresh-voice-seat-menu{ position:fixed !important; z-index:2147483000 !important; display:flex !important; flex-direction:column !important; width:112px !important; padding:5px !important; overflow:hidden !important; direction:rtl !important; background:#d8d8d8 !important; border:0 !important; border-radius:7px !important; box-shadow:0 4px 12px rgba(0,0,0,.28) !important; box-sizing:border-box !important; } .fresh-voice-seat-menu button{ display:block !important; width:100% !important; min-height:31px !important; margin:0 0 2px !important; padding:5px 4px !important; border:0 !important; border-radius:2px !important; color:#fff !important; font:bold 12px "Times New Roman",Times,serif !important; text-align:center !important; cursor:pointer !important; touch-action:manipulation !important; } .fresh-voice-seat-menu button:last-child{margin-bottom:0 !important;} .fresh-seat-menu-pull{background:#e4544d !important;} .fresh-seat-menu-mute{background:#45b7ac !important;} .fresh-seat-menu-profile{background:#4b928b !important;} #freshVoiceBar .fresh-mic-seat.speaker-muted:after{ content:"\\f026"; position:absolute !important; right:2px !important; bottom:2px !important; z-index:4 !important; width:16px !important; height:16px !important; border-radius:50% !important; color:#fff !important; background:#d9534f !important; font:12px/16px FontAwesome !important; text-align:center !important; } html body.site-in-room .dpnl.bg.tab-content{ padding-top:31px !important; background: linear-gradient( to bottom, var(--chat-template, var(--site-body-bg, #4f807d)) 0, var(--chat-template, var(--site-body-bg, #4f807d)) 31px, var(--chat-content, var(--site-content-bg, #fff)) 31px, var(--chat-content, var(--site-content-bg, #fff)) 100% ) !important; border-color:var(--chat-template, var(--site-body-bg, #4f807d)) !important; } html body.site-in-room .dpnl > .pnhead{ position:absolute !important; top:0 !important; left:4px !important; z-index:2 !important; height:30px !important; margin:0 !important; padding:5px 8px !important; background:transparent !important; color:#fff !important; border:0 !important; border-radius:0 !important; line-height:20px !important; } html body.site-in-room .dpnl > label.fa-close, html body.site-in-room .dpnl > label.fa.fa-close{ position:absolute !important; top:1px !important; right:1px !important; z-index:3 !important; width:30px !important; height:29px !important; margin:0 !important; padding:6px 8px !important; background:var(--chat-template, var(--site-body-bg, #4f807d)) !important; color:#fff !important; line-height:15px !important; } html body.site-in-room #users > label.inr, html body.site-in-room #users > label.ninr, html body.site-in-room #users .user-group-header, html body.site-in-room #users .users-inroom-header, html body.site-in-room #users .users-chat-header{ background-color:var(--chat-template, var(--site-body-bg, #4f807d)) !important; background-image:none !important; border-color:var(--chat-template, var(--site-body-bg, #4f807d)) !important; color:#fff !important; } html body.site-in-room #settings .settings-profile-field > .label, html body.site-in-room #settings .settings-profile-color-row > .label, html body.site-in-room #settings #chatZoomSize, html body.site-in-room #settings #voiceServerMode, html body.site-in-room #settings #voiceMicQuality{ background-color:var(--chat-template, var(--site-body-bg, #345c73)) !important; background-image:none !important; border-color:var(--chat-template, var(--site-body-bg, #345c73)) !important; color:#fff !important; } html body.site-in-room #settings #chatZoomSize option, html body.site-in-room #settings #voiceServerMode option, html body.site-in-room #settings #voiceMicQuality option{ background-color:var(--chat-template, var(--site-body-bg, #345c73)) !important; color:#fff !important; } html body.site-in-room #settings .voice-settings-actions{ width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; box-sizing:border-box !important; } html body.site-in-room #settings > #chatZoomSize, html body.site-in-room #settings .voice-settings-actions > .voice-setting-select, html body.site-in-room #settings .voice-settings-actions > .voice-setting-btn, html body.site-in-room #settings .settings-profile-save{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; min-width:100% !important; max-width:100% !important; height:38px !important; min-height:38px !important; max-height:38px !important; margin:4px 0 !important; padding:0 8px !important; border-radius:2px !important; line-height:36px !important; box-sizing:border-box !important; float:none !important; clear:both !important; } html body.site-in-room #settings .voice-settings-actions > .voice-setting-select{ display:block !important; } /* Shared bottom-button geometry. Positioning stays owned by the modern interface so the bar remains at the bottom. */ html body.site-in-room #d0{ display:flex !important; flex-flow:row nowrap !important; align-items:stretch !important; justify-content:flex-start !important; direction:ltr !important; gap:2px !important; height:34px !important; min-height:34px !important; max-height:34px !important; padding:1px !important; overflow-x:hidden !important; overflow-y:hidden !important; white-space:nowrap !important; box-sizing:border-box !important; } html body.site-in-room #d0 > .ae, html body.site-in-room #d0 > label, html body.site-in-room #d0 > button{ flex:1 1 0 !important; width:auto !important; min-width:0 !important; max-width:80px !important; height:32px !important; min-height:32px !important; max-height:32px !important; margin:0 !important; padding:0 5px !important; border:1px solid #111 !important; border-radius:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:4px !important; overflow:hidden !important; color:#fff !important; font:700 12px/30px "Times New Roman",Times,serif !important; box-shadow:none !important; box-sizing:border-box !important; } /* Modern login controls: reference-sized tabs and member-login box only. */ html body.chat-interface-modern:not(.site-in-room) #tlogins .nav.nav-tabs{ display:flex !important; flex-flow:row nowrap !important; direction:ltr !important; width:100% !important; height:41px !important; min-height:41px !important; margin:0 !important; padding:0 !important; border:0 !important; border-bottom:1px solid #ddd !important; background:#fff !important; box-sizing:border-box !important; } html body.chat-interface-modern:not(.site-in-room) #tlogins .nav.nav-tabs > li{ float:none !important; flex:0 0 auto !important; width:auto !important; min-width:94px !important; height:40px !important; margin:0 !important; padding:0 !important; } html body.chat-interface-modern:not(.site-in-room) #tlogins .nav.nav-tabs > li > a{ display:flex !important; align-items:center !important; justify-content:center !important; gap:4px !important; width:100% !important; height:40px !important; margin:0 !important; padding:0 8px !important; border:0 !important; border-left:1px solid #ddd !important; border-radius:0 !important; background:#fff !important; color:var(--site-button-bg, #2a73b4) !important; font:bold 13px "Times New Roman",Times,serif !important; white-space:nowrap !important; box-sizing:border-box !important; } html body.chat-interface-modern:not(.site-in-room) #tlogins .nav.nav-tabs > li.active > a{ border:2px solid #111 !important; color:#555 !important; } html body.chat-interface-modern:not(.site-in-room) #tlogins .nav.nav-tabs > li > a .login-tab-icon{ display:inline-block !important; flex:0 0 14px !important; width:14px !important; height:16px !important; margin:0 !important; padding:0 !important; color:var(--site-button-bg, #2a73b4) !important; font:normal 14px/16px FontAwesome !important; text-align:center !important; } html body.chat-interface-modern:not(.site-in-room) #tlogins .nav.nav-tabs > li > a .member-icon{ color:#555 !important; } html body.chat-interface-modern:not(.site-in-room) #tlogins .nav.nav-tabs > li > a > span{ display:inline-block !important; min-width:0 !important; line-height:18px !important; } html body.chat-interface-modern:not(.site-in-room) #tlogins #l2.active, html body.chat-interface-modern:not(.site-in-room) #tlogins #l2.in{ position:relative !important; display:block !important; width:100% !important; height:76px !important; min-height:76px !important; margin:0 !important; padding:5px 7px !important; background:var(--site-content-bg, #fff) !important; overflow:hidden !important; box-sizing:border-box !important; } html body.chat-interface-modern:not(.site-in-room) #tlogins #l2 br{ display:none !important; } html body.chat-interface-modern:not(.site-in-room) #tlogins #l2 #u2, html body.chat-interface-modern:not(.site-in-room) #tlogins #l2 #pass1{ position:absolute !important; left:7px !important; width:206px !important; min-width:206px !important; max-width:206px !important; height:34px !important; margin:0 !important; padding:4px 6px !important; border:1px solid #111 !important; border-radius:0 !important; background:#fff !important; color:#111 !important; font:14px "Times New Roman",Times,serif !important; direction:rtl !important; box-sizing:border-box !important; } html body.chat-interface-modern:not(.site-in-room) #tlogins #l2 #u2{ top:5px !important; } html body.chat-interface-modern:not(.site-in-room) #tlogins #l2 #pass1{ top:40px !important; } html body.chat-interface-modern:not(.site-in-room) #tlogins #l2 button[onclick*="login"]{ position:absolute !important; top:40px !important; left:226px !important; width:40px !important; min-width:40px !important; max-width:40px !important; height:34px !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:var(--site-button-bg, #4f807d) !important; color:#fff !important; font:bold 13px "Times New Roman",Times,serif !important; line-height:34px !important; } html body.chat-interface-modern:not(.site-in-room) #tlogins #l2 .stealth-eye-btn{ position:absolute !important; top:40px !important; right:7px !important; width:22px !important; min-width:22px !important; height:34px !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; color:#000 !important; display:flex !important; align-items:center !important; justify-content:center !important; } html body.chat-interface-modern:not(.site-in-room) #tlogins #l1.active, html body.chat-interface-modern:not(.site-in-room) #tlogins #l1.in, html body.chat-interface-modern:not(.site-in-room) #tlogins #l3.active, html body.chat-interface-modern:not(.site-in-room) #tlogins #l3.in{ position:relative !important; display:block !important; width:100% !important; height:76px !important; min-height:76px !important; margin:0 !important; padding:5px 7px !important; background:var(--site-content-bg, #fff) !important; overflow:hidden !important; box-sizing:border-box !important; } html body.chat-interface-modern:not(.site-in-room) #tlogins #l1 br, html body.chat-interface-modern:not(.site-in-room) #tlogins #l3 br{ display:none !important; } html body.chat-interface-modern:not(.site-in-room) #tlogins #l1 #u1, html body.chat-interface-modern:not(.site-in-room) #tlogins #l3 #u3, html body.chat-interface-modern:not(.site-in-room) #tlogins #l3 #pass2{ position:absolute !important; left:7px !important; width:206px !important; min-width:206px !important; max-width:206px !important; height:34px !important; margin:0 !important; padding:4px 6px !important; border:1px solid #111 !important; border-radius:0 !important; background:#fff !important; color:#111 !important; font:14px "Times New Roman",Times,serif !important; direction:rtl !important; box-sizing:border-box !important; } html body.chat-interface-modern:not(.site-in-room) #tlogins #l1 #u1{ top:40px !important; } html body.chat-interface-modern:not(.site-in-room) #tlogins #l3 #u3{ top:5px !important; } html body.chat-interface-modern:not(.site-in-room) #tlogins #l3 #pass2{ top:40px !important; } html body.chat-interface-modern:not(.site-in-room) #tlogins #l1 button[onclick*="login"], html body.chat-interface-modern:not(.site-in-room) #tlogins #l3 button[onclick*="login"]{ position:absolute !important; top:40px !important; left:226px !important; width:40px !important; min-width:40px !important; max-width:40px !important; height:34px !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:var(--site-button-bg, #4f807d) !important; color:#fff !important; font:bold 13px "Times New Roman",Times,serif !important; line-height:34px !important; } /* ===== V179 EXACT CLASSIC REFERENCE TYPOGRAPHY - WHOLE CHAT ===== */ html body, html body input, html body textarea, html body select, html body option, html body button, html body label, html body a, html body p, html body span, html body div, html body td, html body th, html body li, html body #settings, html body #settings *, html body #users, html body #users *, html body #rooms, html body #rooms *, html body #chats, html body #chats *, html body #wall, html body #wall * { font-family:"Times New Roman",Times,serif!important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-shadow: none !important; } html body.site-in-room .d2 .u-topic, html body.site-in-room .d2 .u-msg, html body.site-in-room #wall .u-topic, html body.site-in-room #wall .u-msg, html body.site-in-room .private-window .u-topic, html body.site-in-room .private-window .u-msg, html body.site-in-room .system-event .u-topic, html body.site-in-room .system-event .u-msg, html body.site-in-room .chat-announcement-name, html body.site-in-room .chat-announcement-body, html body.site-in-room .chat-announcement-text, html body.site-in-room .chat-reply-quote { font-family:"Times New Roman",Times,serif!important; font-size: 14px !important; font-weight: 700 !important; line-height: 20px !important; } html body.site-in-room .panel-heading, html body.site-in-room .modal-title, html body.site-in-room .pophead, html body.site-in-room .panel-title, html body.site-in-room .nav-tabs > li > a { font-family:"Times New Roman",Times,serif!important; font-size: 14px !important; font-weight: 700 !important; } html body.site-in-room .btn, html body.site-in-room button, html body.site-in-room [role="button"], html body.site-in-room input, html body.site-in-room textarea, html body.site-in-room select { font-family:"Times New Roman",Times,serif!important; font-size: 14px !important; font-weight: 700 !important; } html body .fa:before, html body .fa:after, html body [class^="icon-"]:before, html body [class*=" icon-"]:before { font-family: FontAwesome !important; } html body .glyphicon:before, html body .glyphicon:after { font-family: "Glyphicons Halflings" !important; } /* ===== END V179 ===== */ /* V193: size every tile from the real camera aspect ratio; no empty half. */ .fresh-live-multi .fresh-live-body{height:auto!important;min-height:0!important;max-height:calc(100vh - 145px)!important;overflow:auto!important;} .fresh-live-multi .fresh-live-grid{height:auto!important;grid-auto-rows:auto!important;align-items:start!important;} .fresh-live-tile{height:auto!important;min-height:0!important;aspect-ratio:16/9;} .fresh-live-tile video,.fresh-live-video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;} /* ===== V230.56 LIVE BATTLE + LIKE WALLET GIFT STORE ===== */ #freshLiveViewer .live-battle-hud{background:#171717;color:#fff;padding:5px 8px 7px;direction:ltr;} #freshLiveViewer .live-battle-names,#freshLiveViewer .live-battle-scores{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;font-weight:bold;} #freshLiveViewer .battle-a-name,#freshLiveViewer .battle-a-score{text-align:left;color:#ff4a9e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #freshLiveViewer .battle-b-name,#freshLiveViewer .battle-b-score{text-align:right;color:#27cef0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #freshLiveViewer .live-battle-clock,#freshLiveViewer .battle-multiplier{background:#090909;border-radius:10px;padding:2px 9px;color:#fff;text-align:center;} #freshLiveViewer .live-battle-scorebar{display:flex;height:15px;margin:4px 0 3px;border-radius:12px;overflow:hidden;background:#333;} #freshLiveViewer .live-battle-scorebar i{display:block;min-width:2px;transition:width .18s ease;} #freshLiveViewer .battle-a-bar{background:linear-gradient(90deg,#ff2584,#ff62b0);} #freshLiveViewer .battle-b-bar{background:linear-gradient(90deg,#20d2d4,#25aeea);} #freshLiveViewer .live-battle-actions{display:flex;align-items:center;gap:5px;padding:6px;background:#171717;color:#fff;overflow-x:auto;white-space:nowrap;direction:rtl;} #freshLiveViewer .live-battle-actions button{border:0;border-radius:16px;padding:6px 10px;color:#fff;background:#333;font-weight:bold;white-space:nowrap;} #freshLiveViewer .live-battle-start{background:linear-gradient(90deg,#ff2d86,#15cbd3)!important;} #freshLiveViewer .live-battle-gifts{background:#8854d0!important;} #freshLiveViewer .live-battle-end{background:#d9534f!important;} #freshLiveViewer .live-battle-wallet{background:#fff;color:#e92152;border-radius:14px;padding:5px 9px;font-weight:bold;} #freshLiveViewer .live-battle-judge{display:inline-flex;gap:2px}.live-battle-judge button{background:#bd8714!important;padding:5px 8px!important;} #freshLiveViewer .live-battle-tap{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:5;border:2px solid rgba(255,255,255,.85);border-radius:25px;background:rgba(239,39,100,.86);color:#fff;padding:7px 15px;font-weight:bold;box-shadow:0 3px 13px rgba(0,0,0,.35);touch-action:manipulation;} #freshLiveViewer .live-battle-heart{position:absolute;z-index:8;left:50%;bottom:38px;color:#ff347f;font-size:26px;font-style:normal;pointer-events:none;animation:liveBattleHeart .85s ease-out forwards;} @keyframes liveBattleHeart{0%{opacity:0;transform:translate(-50%,0) scale(.5)}25%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + 20px),-105px) scale(1.35)}} .live-battle-modal{position:fixed;inset:0;z-index:999999;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;direction:rtl;padding:12px;box-sizing:border-box;} .live-battle-card{width:360px;max-width:96vw;max-height:88vh;overflow:auto;background:#fff;border-radius:12px;padding:16px;color:#222;box-shadow:0 12px 40px rgba(0,0,0,.45);text-align:right;} .live-battle-card h3{text-align:center;margin:0 0 14px;color:#10264d}.live-battle-card label{display:block;font-weight:bold;margin:8px 0 4px}.live-battle-card select{width:100%;height:38px;border:1px solid #aaa;border-radius:6px;background:#fff;} .live-battle-card>.battle-confirm,.live-battle-card>.battle-cancel{width:100%;border:0;border-radius:7px;color:#fff;padding:10px;margin-top:10px;font-weight:bold}.live-battle-card>.battle-confirm{background:#159565}.live-battle-card>.battle-cancel{background:#666} .live-gift-store{width:520px}.gift-wallet{text-align:center;background:#fff0f4;color:#d8174e;border-radius:8px;padding:8px;font-weight:bold}.live-gift-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:10px}.live-gift-item{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:105px;border:1px solid #ead8df;border-radius:9px;background:#fff8fb;color:#222;padding:7px}.live-gift-item img,.live-gift-item>span{width:46px;height:46px;object-fit:contain;font-size:35px;line-height:46px}.live-gift-item small{color:#d8174e;font-weight:bold}.live-gift-effect{position:absolute;z-index:7;left:8px;right:8px;bottom:54px;background:linear-gradient(90deg,rgba(129,52,175,.9),rgba(255,45,133,.9));color:#fff;border-radius:22px;padding:5px 10px;display:flex;align-items:center;gap:7px;animation:liveGiftIn .3s ease}.live-gift-effect img,.live-gift-effect>span{width:36px;height:36px;object-fit:contain;font-size:28px}.live-gift-effect b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes liveGiftIn{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}} @media(max-width:520px){.live-gift-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#freshLiveViewer .live-battle-tap span{display:none}#freshLiveViewer .live-battle-tap{padding:6px 12px}.fresh-live-viewer.battle-active .fresh-live-body{max-height:calc(100vh - 245px)!important}} /* ===== V204 WALL ACTION ORDER + FULL IMAGE CLARITY ===== */ /* Keep every existing button color; only arrange heart, reply, then close. */ #wall .d2bc > .mm > .likebc-btn{right:75px !important;} #wall .d2bc > .mm > .commentbc-btn{right:38px !important;} #wall .d2bc > .mm > .delbc-btn{right:4px !important;} /* Show profile and room pictures at their natural ratio without blur or crop. */ #users img.u-pic, #tlogins img.u-pic, #d2 img.u-pic, .lonline img.u-pic, #wall img.u-pic, #upro img.u-pic, #rooms img.room-img, #rooms img.room-pic, .private-window img.u-pic{ object-fit:contain !important; object-position:center center !important; image-rendering:auto !important; opacity:1 !important; filter:none !important; -webkit-filter:none !important; background-color:#fff; } /* The same treatment for avatars implemented as background images. */ #users .u-pic, #tlogins .u-pic, #d2 .u-pic, .lonline .u-pic, #wall .u-pic, #upro .u-pic, .private-window .u-pic{ background-size:contain !important; background-position:center center !important; background-repeat:no-repeat !important; image-rendering:auto !important; opacity:1 !important; filter:none !important; -webkit-filter:none !important; } /* Uploaded chat, wall and story media stays fully visible and proportional. */ .chat-image-message img, #wall .wall-attach-img, #storyViewer .story-main-image, .private-window .chat-image-message img{ max-width:100% !important; height:auto !important; object-fit:contain !important; object-position:center center !important; image-rendering:auto !important; opacity:1 !important; filter:none !important; -webkit-filter:none !important; } /* ===== END V204 ===== */ /* ===== V206 MEMBER / GUEST PROFILE: REAL BLURRED PHOTO LAYER ===== */ /* A real DOM layer is used for compatibility with this chat's old jQuery. */ #upro .upro-topbox{ position:relative !important; display:block !important; height:202px !important; min-height:202px !important; padding:0 !important; overflow:hidden !important; background:#d9d9d9 !important; } #upro .upro-photo-blur{ display:block !important; position:absolute !important; z-index:0 !important; inset:-18px !important; width:calc(100% + 36px) !important; height:calc(100% + 36px) !important; max-width:none !important; max-height:none !important; object-fit:cover !important; object-position:center center !important; filter:blur(16px) saturate(.92) !important; -webkit-filter:blur(16px) saturate(.92) !important; transform:scale(1.12) !important; opacity:1 !important; pointer-events:none !important; } #upro .upro-avatar, #upro.simple-view .upro-avatar{ position:relative !important; z-index:1 !important; display:block !important; width:100% !important; height:202px !important; margin:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; background-color:transparent !important; background-size:contain !important; background-position:center center !important; background-repeat:no-repeat !important; image-rendering:auto !important; filter:none !important; -webkit-filter:none !important; opacity:1 !important; transform:none !important; } #upro .fitimg.u-pic.upro-avatar, #upro.simple-view .fitimg.u-pic.upro-avatar{ width:100% !important; height:202px !important; min-width:100% !important; max-width:100% !important; min-height:202px !important; background-color:transparent !important; background-size:contain !important; background-position:center center !important; background-repeat:no-repeat !important; } #upro .upro-maininfo, #upro.simple-view .upro-maininfo{ display:none !important; } #upro .upro-meta-line{ direction:rtl !important; display:flex !important; justify-content:space-between !important; align-items:center !important; gap:8px !important; } #upro .upro-country{order:1 !important;} #upro .upro-roomtag{order:2 !important;} #upro .upro-room-pic{ width:20px !important; height:20px !important; margin-left:4px !important; object-fit:contain !important; object-position:center !important; filter:none !important; -webkit-filter:none !important; opacity:1 !important; } #upro .upro-action-grid{ direction:rtl !important; } /* ===== V212 PROFILE COLORS + EXACT REFERENCE BUTTONS ===== */ html body.site-in-room #upro .modal-dialog{ width:340px !important; max-width:96vw !important; margin:12px auto !important; } html body.site-in-room #upro .modal-content.upro-card{ border:1px solid var(--chat-template, var(--site-body-bg, #345c73)) !important; border-radius:0 !important; background:var(--chat-content, var(--site-content-bg, #fff)) !important; box-shadow:0 8px 24px rgba(0,0,0,.22) !important; } html body.site-in-room #upro .upro-head{ min-height:38px !important; padding:7px 9px !important; border:0 !important; border-bottom:2px solid rgba(255,255,255,.72) !important; border-radius:0 !important; background:var(--chat-template, var(--site-body-bg, #345c73)) !important; color:#fff !important; } html body.site-in-room #upro .upro-body, html body.site-in-room #upro .upro-meta-line, html body.site-in-room #upro .upro-register-state, html body.site-in-room #upro .upro-action-grid{ background:var(--chat-content, var(--site-content-bg, #fff)) !important; color:var(--chat-text, var(--theme-text, #111)) !important; } html body.site-in-room #upro .upro-meta-line{ padding:7px 6px !important; border-top:1px solid var(--chat-template, var(--site-body-bg, #345c73)) !important; border-bottom:1px solid var(--chat-template, var(--site-body-bg, #345c73)) !important; } html body.site-in-room #upro .upro-country{ color:var(--chat-text, var(--theme-text, #111)) !important; } html body.site-in-room #upro .upro-roomtag .roomh{ min-height:27px !important; padding:2px 6px !important; border:1px solid var(--chat-template, var(--site-body-bg, #345c73)) !important; border-radius:0 !important; background:var(--chat-template, var(--site-body-bg, #345c73)) !important; background-image:none !important; color:#fff !important; box-shadow:none !important; } html body.site-in-room #upro .upro-register-state{ padding:4px 8px 6px !important; font-size:14px !important; } html body.site-in-room #upro .upro-action-grid, html body.site-in-room #upro.simple-view .upro-action-grid{ display:grid !important; grid-template-columns:repeat(3, minmax(0,1fr)) !important; direction:ltr !important; grid-auto-flow:row !important; grid-auto-rows:36px !important; align-content:start !important; align-items:stretch !important; justify-content:stretch !important; gap:4px !important; padding:0 4px 8px !important; width:100% !important; height:auto !important; min-height:0 !important; max-height:none !important; } html body.site-in-room #upro .upro-btn, html body.site-in-room #upro.simple-view .upro-btn{ direction:rtl !important; display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; gap:3px !important; width:100% !important; min-width:0 !important; min-height:36px !important; height:36px !important; padding:3px 4px !important; margin:0 !important; border:1px solid #e4e4e4 !important; border-radius:0 !important; background:var(--chat-content, var(--site-content-bg, #fff)) !important; background-image:none !important; color:var(--chat-text, var(--theme-text, #111)) !important; box-shadow:none !important; transform:none !important; font-size:13px !important; line-height:28px !important; position:static !important; inset:auto !important; float:none !important; clear:none !important; order:initial !important; grid-column:auto !important; grid-row:auto !important; align-self:stretch !important; justify-self:stretch !important; } html body.site-in-room #upro .upro-action-grid .upro-btn[style*="display: none"], html body.site-in-room #upro .upro-action-grid .upro-btn[style*="display:none"], html body.site-in-room #upro .upro-action-grid .upro-btn.hidden-by-perm, html body.site-in-room #upro .upro-action-grid .upro-btn.hideme{ display:none !important; } html body.site-in-room #upro .upro-btn:hover, html body.site-in-room #upro .upro-btn:active{ background:var(--chat-content, var(--site-content-bg, #fff)) !important; background-image:none !important; box-shadow:none !important; transform:none !important; filter:brightness(.97) !important; } html body.site-in-room #upro .upro-btn i{ width:auto !important; min-width:14px !important; margin:0 !important; font-size:14px !important; } html body.site-in-room #upro .upro-btn.upm, html body.site-in-room #upro .upro-btn.unot{ color:var(--chat-text, var(--theme-text, #111)) !important; } html body.site-in-room #upro .upro-btn.ulike, html body.site-in-room #upro .upro-btn.umute, html body.site-in-room #upro .upro-btn.uunmute{ color:#e60000 !important; } html body.site-in-room #upro .upro-btn.own-like-display{ cursor:pointer !important; pointer-events:auto !important; } /* ===== END V212 ===== */ /* ===== V218 FULL LOGIN BANNER + ULTRA CLEAR IMAGES ===== */ /* The login banner keeps one interface-sized frame regardless of source dimensions. */ html body:not(.site-in-room) #frontSiteBanner.front-site-banner, html body.theme-default-style:not(.site-in-room) #frontSiteBanner.front-site-banner{ display:block !important; width:100% !important; height:140px !important; min-height:140px !important; max-height:140px !important; flex:0 0 140px !important; overflow:hidden !important; line-height:0 !important; background:transparent !important; } html body:not(.site-in-room) #frontSiteBanner .front-site-banner-img, html body.theme-default-style:not(.site-in-room) #frontSiteBanner .front-site-banner-img{ display:block !important; width:100% !important; height:140px !important; min-height:140px !important; max-height:140px !important; object-fit:cover !important; object-position:center center !important; image-rendering:auto !important; filter:none !important; -webkit-filter:none !important; transform:none !important; opacity:1 !important; } html body:not(.site-in-room) #mainLoginBanner .main-banner-art{ background-size:contain !important; background-position:center center !important; background-repeat:no-repeat !important; image-rendering:auto !important; filter:none !important; } /* A slightly wider and taller member profile photo stage. */ html body.site-in-room #upro .modal-dialog{ width:380px !important; max-width:96vw !important; } html body.site-in-room #upro .upro-topbox, html body.site-in-room #upro .upro-avatar, html body.site-in-room #upro.simple-view .upro-avatar, html body.site-in-room #upro .fitimg.u-pic.upro-avatar, html body.site-in-room #upro.simple-view .fitimg.u-pic.upro-avatar{ height:225px !important; min-height:225px !important; } html body.site-in-room #upro .upro-photo-blur{ image-rendering:auto !important; } html body.site-in-room #upro .upro-avatar, html body.site-in-room #upro.simple-view .upro-avatar{ background-size:contain !important; background-position:center center !important; background-repeat:no-repeat !important; image-rendering:auto !important; filter:none !important; -webkit-filter:none !important; opacity:1 !important; } /* Member-list banners are larger and retain the complete uploaded artwork. */ #users .uzr.member-has-cover, #tlogins .uzr.member-has-cover, #d2 .uzr.member-has-cover, .lonline .uzr.member-has-cover{ min-height:58px !important; background-size:100% 100% !important; background-position:center center !important; background-repeat:no-repeat !important; image-rendering:auto !important; filter:none !important; -webkit-filter:none !important; opacity:1 !important; } /* Never add browser blur/pixelation to ordinary chat imagery and banners. */ #frontSiteBanner img, #users img, #tlogins img, #d2 img, .lonline img, #wall img, #rooms img, .chat-image-message img, .private-window img, #profileImageViewerImg{ image-rendering:auto !important; filter:none !important; -webkit-filter:none !important; opacity:1 !important; backface-visibility:visible !important; } /* ===== END V218 ===== */ /* ===== V219 REFERENCE UI AT 100% — NO MIRROR / NO COLOR OVERRIDE ===== */ /* Geometry only. Right remains right and left remains left. */ html body.site-in-room{ --chat-bottom-bar:42px; --chat-panel-width:min(350px, calc(100vw - 76px)); --chat-panel-min:min(350px, calc(100vw - 76px)); --chat-panel-max:min(350px, calc(100vw - 76px)); } /* Panel fixed on the RIGHT edge, with the chat still visible on the LEFT. */ html body.site-in-room .dpnl.bg.tab-content{ top:0 !important; right:0 !important; left:auto !important; bottom:var(--chat-bottom-bar) !important; width:var(--chat-panel-width) !important; min-width:var(--chat-panel-min) !important; max-width:var(--chat-panel-max) !important; padding:40px 0 0 !important; border-width:1px !important; border-radius:0 !important; box-shadow:none !important; overflow:hidden !important; background:var(--chat-content, var(--site-content-bg, #fff)) !important; } html body.site-in-room .dpnl.bg.tab-content:before{ content:""; position:absolute; top:0; right:0; left:0; height:40px; background:var(--chat-template, var(--site-body-bg, #345c73)); z-index:0; } html body.site-in-room .dpnl > .pnhead{ position:absolute !important; top:0 !important; left:14px !important; right:auto !important; z-index:2 !important; height:40px !important; margin:0 !important; padding:0 !important; display:flex !important; align-items:center !important; background:transparent !important; border:0 !important; border-radius:0 !important; color:#fff !important; font:700 18px/40px "Times New Roman",Times,serif !important; text-align:left !important; } html body.site-in-room .dpnl > label.fa-close, html body.site-in-room .dpnl > label.fa.fa-close{ position:absolute !important; top:2px !important; right:3px !important; left:auto !important; z-index:4 !important; width:40px !important; height:36px !important; margin:0 !important; padding:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; border-width:1px !important; border-radius:7px !important; font-size:18px !important; line-height:34px !important; } html body.site-in-room .dpnl > .tab-pane{ height:100% !important; padding:0 !important; overflow-x:hidden !important; overflow-y:auto !important; } /* Search and group headers. */ html body.site-in-room #users #usearch{ display:block !important; width:100% !important; height:34px !important; margin:0 !important; padding:4px 10px !important; border-width:0 0 1px !important; border-radius:0 !important; font:700 14px/25px "Times New Roman",Times,serif !important; direction:rtl !important; text-align:left !important; box-sizing:border-box !important; } html body.site-in-room #users > label.inr, html body.site-in-room #users > label.ninr, html body.site-in-room #users .user-group-header{ width:100% !important; height:32px !important; margin:0 !important; padding:0 10px !important; border:0 !important; border-radius:0 !important; font:700 14px/32px "Times New Roman",Times,serif !important; text-align:center !important; } /* Online users: avatar on LEFT, country/number on RIGHT. */ html body.site-in-room #users .uzr, html body:not(.site-in-room) #tlogins .lonline .uzr{ position:relative !important; display:block !important; direction:ltr !important; width:100% !important; min-height:62px !important; margin:0 !important; padding:4px 34px 4px 64px !important; border-width:0 0 1px !important; border-radius:0 !important; box-sizing:border-box !important; overflow:hidden !important; float:none !important; } html body.site-in-room #users .uzr > .u-pic, html body.site-in-room #users .uzr > img.u-pic, html body:not(.site-in-room) #tlogins .lonline .uzr > .u-pic, html body:not(.site-in-room) #tlogins .lonline .uzr > img.u-pic{ position:absolute !important; top:3px !important; left:5px !important; right:auto !important; width:56px !important; min-width:56px !important; max-width:56px !important; height:56px !important; min-height:56px !important; max-height:56px !important; margin:0 !important; padding:0 !important; border-radius:0 !important; object-fit:cover !important; object-position:center center !important; image-rendering:auto !important; float:none !important; } html body.site-in-room #users .uzr > .ustat, html body:not(.site-in-room) #tlogins .lonline .uzr > .ustat{ position:absolute !important; top:3px !important; left:0 !important; right:auto !important; width:4px !important; height:56px !important; margin:0 !important; } html body.site-in-room #users .uzr > .co, html body.site-in-room #users .uzr > img.co, html body:not(.site-in-room) #tlogins .lonline .uzr > .co{ position:absolute !important; top:5px !important; right:5px !important; left:auto !important; width:19px !important; height:13px !important; margin:0 !important; object-fit:cover !important; float:none !important; } html body.site-in-room #users .uzr > div.fl, html body:not(.site-in-room) #tlogins .lonline .uzr > div.fl{ display:block !important; width:100% !important; margin:0 !important; padding:0 !important; float:none !important; direction:ltr !important; text-align:left !important; } html body.site-in-room #users .uzr .u-topic, html body:not(.site-in-room) #tlogins .lonline .uzr .u-topic{ display:block !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:0 3px !important; font:700 16px/27px "Times New Roman",Times,serif !important; direction:rtl !important; text-align:left !important; } html body.site-in-room #users .uzr .u-msg, html body:not(.site-in-room) #tlogins .lonline .uzr .u-msg{ display:block !important; width:100% !important; margin:0 !important; padding:0 3px !important; font:700 13px/22px "Times New Roman",Times,serif !important; direction:rtl !important; text-align:left !important; } /* Rooms: image stays LEFT, title beside it, count stays RIGHT. */ html body.site-in-room #rooms .bgg{ height:40px !important; min-height:40px !important; padding:3px 5px !important; box-sizing:border-box !important; } html body.site-in-room #rooms .bgg .btn{ min-height:34px !important; height:34px !important; margin:0 !important; padding:0 10px !important; border-radius:1px !important; font:700 14px/32px "Times New Roman",Times,serif !important; } html body.site-in-room #rooms .room{ min-height:62px !important; padding:4px 70px 4px 64px !important; border-width:0 0 1px !important; border-radius:0 !important; direction:ltr !important; text-align:left !important; } /* Wall reference: avatar LEFT; time, reply and heart at far RIGHT. */ html body.site-in-room #wall #d2bc, html body.site-in-room #wall .d2bc{ display:flex !important; flex-direction:column !important; align-items:stretch !important; } html body.site-in-room #wall .d2bc > .mm{ grid-template-columns:58px minmax(0,1fr) !important; min-height:64px !important; column-gap:7px !important; margin:0 !important; padding:3px !important; border-width:0 0 1px !important; direction:ltr !important; } html body.site-in-room #wall .d2bc > .mm > .u-pic{ grid-column:1 !important; width:56px !important; height:56px !important; margin:0 !important; object-fit:cover !important; object-position:center !important; image-rendering:auto !important; } html body.site-in-room #wall .d2bc > .mm > .uzr{ grid-column:2 !important; padding:0 4px 25px 0 !important; direction:ltr !important; text-align:left !important; } html body.site-in-room #wall .d2bc > .mm .u-topic{ font:700 15px/21px "Times New Roman",Times,serif !important; direction:rtl !important; text-align:left !important; } html body.site-in-room #wall .d2bc > .mm .u-msg{ margin:0 !important; padding:0 3px !important; font:700 15px/21px "Times New Roman",Times,serif !important; direction:rtl !important; text-align:left !important; } html body.site-in-room #wall .d2bc > .mm > .tago{ top:2px !important; right:4px !important; left:auto !important; font:700 12px/18px "Times New Roman",Times,serif !important; } html body.site-in-room #wall .d2bc > .mm > .commentbc-btn{ position:absolute !important; right:3px !important; left:auto !important; bottom:3px !important; width:47px !important; height:25px !important; border-radius:0 !important; } html body.site-in-room #wall .d2bc > .mm > .likebc-btn{ position:absolute !important; right:52px !important; left:auto !important; bottom:3px !important; width:47px !important; height:25px !important; border-radius:0 !important; } html body.site-in-room #wall .d2bc > .mm > .delbc-btn{ position:absolute !important; right:101px !important; left:auto !important; bottom:3px !important; width:25px !important; height:25px !important; border-radius:0 !important; } html body.site-in-room #wall .wall-input-box{ min-height:44px !important; padding:3px !important; gap:3px !important; } html body.site-in-room #wall .wall-input-box button, html body.site-in-room #wall .wall-input-box .emobc{ width:38px !important; min-width:38px !important; height:38px !important; min-height:38px !important; margin:0 !important; border-radius:2px !important; font-size:16px !important; } html body.site-in-room #wall .wall-input-box .tboxbc{ height:38px !important; min-height:38px !important; font:700 14px/28px "Times New Roman",Times,serif !important; } /* Settings buttons and fields: centered text; image/icon anchored on LEFT. */ html body.site-in-room #settings{ padding:5px 6px 72px !important; } html body.site-in-room #settings .settings-profile-field, html body.site-in-room #settings .settings-profile-color-row{ min-height:42px !important; margin:0 0 3px !important; } html body.site-in-room #settings .settings-profile-field > .label, html body.site-in-room #settings .settings-profile-color-row > .label{ min-height:40px !important; font:700 16px/38px "Times New Roman",Times,serif !important; border-radius:0 !important; } html body.site-in-room #settings input, html body.site-in-room #settings select{ font:700 15px/38px "Times New Roman",Times,serif !important; } html body.site-in-room #settings > #chatZoomSize, html body.site-in-room #settings .voice-settings-actions > .voice-setting-select, html body.site-in-room #settings .voice-settings-actions > .voice-setting-btn, html body.site-in-room #settings .settings-profile-save{ position:relative !important; height:44px !important; min-height:44px !important; max-height:44px !important; margin:4px 0 !important; padding:0 44px !important; border-width:1px !important; border-radius:2px !important; font:700 16px/42px "Times New Roman",Times,serif !important; text-align:center !important; } html body.site-in-room #settings .voice-setting-btn > img, html body.site-in-room #settings .voice-setting-btn > i, html body.site-in-room #settings .voice-setting-btn > .fa{ position:absolute !important; left:8px !important; right:auto !important; top:50% !important; transform:translateY(-50%) !important; margin:0 !important; } html body.site-in-room #settings .voice-btn-pic{ width:34px !important; height:34px !important; object-fit:cover !important; image-rendering:auto !important; } /* Microphone controls remain on the LEFT exactly as shown. */ html body.site-in-room #freshVoiceBar{ direction:ltr !important; justify-content:flex-start !important; gap:3px !important; padding:2px 4px !important; } html body.site-in-room #freshVoiceBar > button{ height:38px !important; min-height:38px !important; margin:0 !important; border-radius:2px !important; box-sizing:border-box !important; } /* Bottom navigation keeps equal boxes, linked colors and readable 100% text. */ html body.site-in-room #d0{ direction:ltr !important; height:var(--chat-bottom-bar) !important; min-height:var(--chat-bottom-bar) !important; max-height:var(--chat-bottom-bar) !important; gap:2px !important; padding:2px !important; } html body.site-in-room #d0 > .ae, html body.site-in-room #d0 > label, html body.site-in-room #d0 > button{ height:38px !important; min-height:38px !important; max-height:38px !important; max-width:none !important; padding:0 5px !important; border-radius:1px !important; font:700 14px/36px "Times New Roman",Times,serif !important; } /* ===== END V219 ===== */ /* ===== V220 COMPACT PANELS + EXACT PHOTO ROW HEIGHT + RIGHT ACTION GROUP ===== */ /* Header is compact like the reference, not oversized. */ html body.site-in-room .dpnl.bg.tab-content{ padding-top:32px !important; } html body.site-in-room .dpnl.bg.tab-content:before{ height:32px !important; } html body.site-in-room .dpnl > .pnhead{ top:0 !important; left:12px !important; right:auto !important; height:32px !important; padding:0 !important; font:700 15px/32px "Times New Roman",Times,serif !important; } html body.site-in-room .dpnl > label.fa-close, html body.site-in-room .dpnl > label.fa.fa-close{ top:1px !important; right:2px !important; left:auto !important; width:32px !important; height:30px !important; padding:0 !important; border-radius:6px !important; font-size:15px !important; line-height:28px !important; } /* Online row is exactly the avatar height; extra text alone may grow it. */ html body.site-in-room #users .uzr, html body:not(.site-in-room) #tlogins .lonline .uzr{ min-height:56px !important; height:auto !important; padding:0 30px 0 62px !important; overflow:hidden !important; } html body.site-in-room #users .uzr > .u-pic, html body.site-in-room #users .uzr > img.u-pic, html body:not(.site-in-room) #tlogins .lonline .uzr > .u-pic, html body:not(.site-in-room) #tlogins .lonline .uzr > img.u-pic{ top:0 !important; left:5px !important; right:auto !important; width:56px !important; min-width:56px !important; max-width:56px !important; height:56px !important; min-height:56px !important; max-height:56px !important; } html body.site-in-room #users .uzr > .ustat, html body:not(.site-in-room) #tlogins .lonline .uzr > .ustat{ top:0 !important; height:56px !important; } html body.site-in-room #users .uzr .u-topic, html body:not(.site-in-room) #tlogins .lonline .uzr .u-topic{ min-height:27px !important; font:700 15px/27px "Times New Roman",Times,serif !important; } html body.site-in-room #users .uzr .u-msg, html body:not(.site-in-room) #tlogins .lonline .uzr .u-msg{ min-height:22px !important; margin:0 !important; font:700 13px/22px "Times New Roman",Times,serif !important; } /* Wall row starts at photo height, and grows only when its text needs more lines. */ html body.site-in-room #wall .d2bc > .mm{ grid-template-columns:56px minmax(0,1fr) !important; min-height:56px !important; height:auto !important; column-gap:5px !important; padding:0 !important; overflow:hidden !important; } html body.site-in-room #wall .d2bc > .mm > .u-pic{ width:56px !important; height:56px !important; min-height:56px !important; margin:0 !important; } html body.site-in-room #wall .d2bc > .mm > .uzr{ min-height:56px !important; height:auto !important; padding:0 3px 25px 0 !important; overflow:visible !important; } html body.site-in-room #wall .d2bc > .mm .u-topic{ min-height:20px !important; margin:0 !important; font:700 14px/20px "Times New Roman",Times,serif !important; } html body.site-in-room #wall .d2bc > .mm .u-msg{ min-height:18px !important; height:auto !important; margin:0 !important; padding:0 2px !important; font:700 14px/19px "Times New Roman",Times,serif !important; overflow:visible !important; } /* One tight group at the FAR RIGHT: reply, heart, delete. */ html body.site-in-room #wall .d2bc > .mm > .commentbc-btn, html body.site-in-room #wall .d2bc > .mm > .likebc-btn, html body.site-in-room #wall .d2bc > .mm > .delbc-btn{ bottom:2px !important; width:27px !important; min-width:27px !important; max-width:27px !important; height:22px !important; min-height:22px !important; padding:0 2px !important; margin:0 !important; border-radius:0 !important; } html body.site-in-room #wall .d2bc > .mm > .commentbc-btn{ right:2px !important; left:auto !important; } html body.site-in-room #wall .d2bc > .mm > .likebc-btn{ right:31px !important; left:auto !important; } html body.site-in-room #wall .d2bc > .mm > .delbc-btn{ right:60px !important; left:auto !important; } /* Smaller panel boxes matching the reference proportions at 100%. */ html body.site-in-room #settings{ padding:4px 5px 64px !important; } html body.site-in-room #settings .settings-profile-field, html body.site-in-room #settings .settings-profile-color-row{ min-height:32px !important; height:32px !important; margin:0 0 2px !important; } html body.site-in-room #settings .settings-profile-field > .label, html body.site-in-room #settings .settings-profile-color-row > .label{ min-height:32px !important; height:32px !important; padding:0 6px !important; font:700 14px/30px "Times New Roman",Times,serif !important; } html body.site-in-room #settings .settings-profile-field > input, html body.site-in-room #settings .settings-profile-color-row > input{ min-height:32px !important; height:32px !important; padding:0 6px !important; font:700 14px/30px "Times New Roman",Times,serif !important; } html body.site-in-room #settings > #chatZoomSize, html body.site-in-room #settings .voice-settings-actions > .voice-setting-select, html body.site-in-room #settings .voice-settings-actions > .voice-setting-btn, html body.site-in-room #settings .settings-profile-save{ height:35px !important; min-height:35px !important; max-height:35px !important; margin:3px 0 !important; padding:0 38px !important; font:700 14px/33px "Times New Roman",Times,serif !important; } html body.site-in-room #settings .voice-btn-pic{ width:29px !important; height:29px !important; } /* ===== END V220 ===== */ /* ===== V221 EXACT SETTINGS STACK + USER TOP ALIGN + FINAL WALL ORDER ===== */ /* Settings: label above the field exactly like the reference. */ html body.site-in-room #settings .settings-profile-card{ display:block !important; width:100% !important; margin:1px 0 7px !important; padding:0 !important; direction:ltr !important; } html body.site-in-room #settings .settings-profile-field{ display:grid !important; grid-template-columns:1fr !important; grid-template-rows:25px 27px !important; width:100% !important; height:52px !important; min-height:52px !important; max-height:52px !important; margin:0 0 2px !important; padding:0 !important; } html body.site-in-room #settings .settings-profile-field > .label{ grid-row:1 !important; justify-self:start !important; width:44% !important; min-width:132px !important; height:25px !important; min-height:25px !important; max-height:25px !important; margin:0 !important; padding:3px 5px !important; border:0 !important; border-radius:0 !important; font:700 14px/19px "Times New Roman",Times,serif !important; text-align:center !important; direction:rtl !important; box-sizing:border-box !important; } html body.site-in-room #settings .settings-profile-field > input{ grid-row:2 !important; display:block !important; width:100% !important; min-width:100% !important; max-width:100% !important; height:27px !important; min-height:27px !important; max-height:27px !important; margin:0 !important; padding:2px 6px !important; border-width:1px !important; border-radius:0 !important; font:700 14px/23px "Times New Roman",Times,serif !important; direction:rtl !important; text-align:right !important; box-sizing:border-box !important; } html body.site-in-room #settings .settings-profile-color-row{ display:grid !important; grid-template-columns:minmax(132px,44%) 68px 1fr !important; align-items:center !important; width:100% !important; height:26px !important; min-height:26px !important; max-height:26px !important; margin:0 0 1px !important; direction:ltr !important; } html body.site-in-room #settings .settings-profile-color-row > .label{ width:100% !important; height:26px !important; min-height:26px !important; max-height:26px !important; margin:0 !important; padding:3px 5px !important; font:700 14px/20px "Times New Roman",Times,serif !important; } html body.site-in-room #settings .settings-profile-color-row > input{ display:block !important; width:64px !important; min-width:64px !important; max-width:64px !important; height:24px !important; min-height:24px !important; max-height:24px !important; margin:0 4px !important; padding:0 !important; } html body.site-in-room #settings .settings-profile-save{ height:36px !important; min-height:36px !important; max-height:36px !important; margin:6px 0 0 !important; padding:0 8px !important; font:700 14px/34px "Times New Roman",Times,serif !important; } /* Keep the original feature set, but put the reference controls first. */ html body.site-in-room #settings .voice-settings-actions{ display:flex !important; flex-direction:column !important; align-items:stretch !important; } html body.site-in-room #settings #voiceServerMode{order:1 !important;} html body.site-in-room #settings #voiceMicQuality{order:2 !important;} html body.site-in-room #settings .settings-change-pic{order:3 !important;} html body.site-in-room #settings .settings-delete-pic{order:4 !important;} html body.site-in-room #settings #voiceDisablePm{order:5 !important;} html body.site-in-room #settings #voiceDisableNot{order:6 !important;} html body.site-in-room #settings .settings-logout{order:7 !important;} html body.site-in-room #settings #voiceChangerMode{order:8 !important;} html body.site-in-room #settings #vocalEffectsMode{order:9 !important;} html body.site-in-room #settings .settings-member-banner{order:10 !important;} html body.site-in-room #settings .voice-settings-actions .pmsg{order:11 !important;} html body.site-in-room #settings .voice-settings-actions .redit{order:12 !important;} html body.site-in-room #settings .voice-settings-actions .cp{order:13 !important;} /* Online users: row and photo are identical in height; name begins at the TOP. */ html body.site-in-room #users .uzr, html body:not(.site-in-room) #tlogins .lonline .uzr{ position:relative !important; display:block !important; width:100% !important; height:56px !important; min-height:56px !important; max-height:56px !important; margin:0 !important; padding:0 30px 0 62px !important; overflow:hidden !important; direction:ltr !important; box-sizing:border-box !important; } html body.site-in-room #users .uzr > .u-pic, html body.site-in-room #users .uzr > img.u-pic, html body:not(.site-in-room) #tlogins .lonline .uzr > .u-pic, html body:not(.site-in-room) #tlogins .lonline .uzr > img.u-pic{ top:0 !important; left:5px !important; right:auto !important; width:56px !important; height:56px !important; min-width:56px !important; min-height:56px !important; max-width:56px !important; max-height:56px !important; background-size:cover !important; background-position:center center !important; background-repeat:no-repeat !important; image-rendering:auto !important; } html body.site-in-room #users .uzr > div.fl, html body:not(.site-in-room) #tlogins .lonline .uzr > div.fl{ position:absolute !important; top:0 !important; left:62px !important; right:30px !important; width:auto !important; height:56px !important; margin:0 !important; padding:0 !important; float:none !important; direction:ltr !important; } html body.site-in-room #users .uzr > div.fl > div.fl, html body:not(.site-in-room) #tlogins .lonline .uzr > div.fl > div.fl{ display:flex !important; align-items:flex-start !important; width:100% !important; height:27px !important; margin:0 !important; padding:0 !important; float:none !important; } html body.site-in-room #users .uzr > div.fl > div.fl > div.fl, html body:not(.site-in-room) #tlogins .lonline .uzr > div.fl > div.fl > div.fl{ flex:1 1 auto !important; width:auto !important; min-width:0 !important; margin:0 !important; padding:0 !important; float:none !important; } html body.site-in-room #users .uzr .u-topic, html body:not(.site-in-room) #tlogins .lonline .uzr .u-topic{ display:block !important; width:100% !important; height:27px !important; margin:0 !important; padding:0 3px !important; font:700 15px/27px "Times New Roman",Times,serif !important; direction:rtl !important; text-align:left !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } html body.site-in-room #users .uzr .u-msg, html body:not(.site-in-room) #tlogins .lonline .uzr .u-msg{ display:block !important; width:100% !important; height:25px !important; min-height:25px !important; margin:0 !important; padding:0 3px !important; font:700 13px/25px "Times New Roman",Times,serif !important; direction:rtl !important; text-align:left !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } html body.site-in-room #users .uzr .user-status-line, html body:not(.site-in-room) #tlogins .lonline .uzr .user-status-line{ display:block !important; width:100% !important; height:25px !important; line-height:25px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } /* Final wall order from FAR RIGHT: delete, reply, heart. */ html body.site-in-room #wall .d2bc > .mm > .delbc-btn{ right:2px !important; left:auto !important; } html body.site-in-room #wall .d2bc > .mm > .commentbc-btn{ right:31px !important; left:auto !important; } html body.site-in-room #wall .d2bc > .mm > .likebc-btn{ right:60px !important; left:auto !important; } /* Without a delete button, reply remains at the far right and heart beside it. */ html body.site-in-room #wall .d2bc > .mm:not(:has(> .delbc-btn)) > .commentbc-btn{ right:2px !important; } html body.site-in-room #wall .d2bc > .mm:not(:has(> .delbc-btn)) > .likebc-btn{ right:31px !important; } /* ===== END V221 ===== */ /* ===== V222 SETTINGS FINAL ORDER + WALL EXACT PHOTO HEIGHT ===== */ /* Keep the three main selectors literal: their text starts from the LEFT. */ html body.site-in-room #settings > #chatZoomSize, html body.site-in-room #settings #voiceServerMode, html body.site-in-room #settings #voiceMicQuality{ direction:rtl !important; text-align:left !important; text-align-last:left !important; } html body.site-in-room #settings > #chatZoomSize option, html body.site-in-room #settings #voiceServerMode option, html body.site-in-room #settings #voiceMicQuality option{ direction:rtl !important; text-align:left !important; } /* Logout is always the final settings action. */ html body.site-in-room #settings .settings-logout{ order:99 !important; } /* A short wall post is exactly one avatar high; only real extra text grows it. */ html body.site-in-room #wall .d2bc > .mm{ min-height:56px !important; height:auto !important; grid-auto-rows:minmax(56px,auto) !important; padding:0 !important; row-gap:0 !important; box-sizing:border-box !important; } html body.site-in-room #wall .d2bc > .mm > .u-pic{ width:56px !important; height:56px !important; min-width:56px !important; min-height:56px !important; max-width:56px !important; max-height:56px !important; align-self:start !important; } html body.site-in-room #wall .d2bc > .mm > .uzr{ min-height:56px !important; height:auto !important; margin:0 !important; padding:0 88px 0 0 !important; box-sizing:border-box !important; } html body.site-in-room #wall .d2bc > .mm > .uzr > div:first-child{ min-height:20px !important; height:20px !important; margin:0 !important; padding:0 !important; } html body.site-in-room #wall .d2bc > .mm .u-topic{ min-height:20px !important; height:20px !important; line-height:20px !important; } html body.site-in-room #wall .d2bc > .mm .u-msg{ min-height:0 !important; height:auto !important; margin:0 !important; padding:0 2px !important; line-height:18px !important; } /* ===== END V222 ===== */ /* ===== V223 ALIGNED SETTINGS + STATUS COLOR + STABLE LISTS ===== */ /* All option text follows one consistent left edge inside its box. */ html body.site-in-room #settings > #chatZoomSize, html body.site-in-room #settings .voice-settings-actions > .voice-setting-select{ direction:rtl !important; text-align:left !important; text-align-last:left !important; padding-left:42px !important; padding-right:12px !important; } html body.site-in-room #settings > #chatZoomSize option, html body.site-in-room #settings .voice-settings-actions > .voice-setting-select option{ direction:rtl !important; text-align:left !important; } /* Decoration and status stay on the same right-aligned input edge. */ html body.site-in-room #settings .settings-profile-field > input{ direction:rtl !important; text-align:right !important; } /* Member status is directly below the decoration, on the LEFT. */ html body.site-in-room #users .uzr .u-msg, html body.site-in-room #users .uzr .user-status-line, html body:not(.site-in-room) #tlogins .lonline .uzr .u-msg, html body:not(.site-in-room) #tlogins .lonline .uzr .user-status-line{ direction:rtl !important; text-align:left !important; justify-content:flex-start !important; padding-left:3px !important; padding-right:3px !important; } /* Avoid image repaint animation while a panel is hidden and shown again. */ html body.site-in-room #users .u-pic, html body.site-in-room #rooms .room-pic, html body.site-in-room #users .member-cover-layer, html body.site-in-room #users .member-frame-layer{ animation:none !important; transition:none !important; } /* ===== END V223 ===== */ /* ===== V224 SINGLE GROUP HEADERS + LITERAL LEFT STATUS ===== */ html body.site-in-room #users .uzr .u-msg, html body.site-in-room #users .uzr .user-status-line, html body:not(.site-in-room) #tlogins .lonline .uzr .u-msg, html body:not(.site-in-room) #tlogins .lonline .uzr .user-status-line{ direction:ltr !important; unicode-bidi:plaintext !important; text-align:left !important; justify-content:flex-start !important; } /* Only the two canonical group titles may be visible. */ html body.site-in-room #users > label.inr:not(.users-inroom-header), html body.site-in-room #users > label.ninr:not(.users-chat-header){ display:none !important; } /* ===== END V224 ===== */ /* ===== V225 WALL MEDIA: BUTTON FIRST, FULL IMAGE ON CLICK ===== */ html body.site-in-room #wall .wall-collapsed-image{ display:block !important; width:100% !important; max-width:100% !important; margin:3px 0 0 !important; padding:0 !important; overflow:visible !important; } html body.site-in-room #wall .wall-show-image-btn{ display:inline-block !important; width:auto !important; min-width:116px !important; height:30px !important; margin:0 !important; padding:3px 8px !important; border:0 !important; border-radius:0 !important; background:#eeeeef !important; color:#111 !important; font:700 14px/24px "Times New Roman",Times,serif !important; text-align:center !important; cursor:pointer !important; } html body.site-in-room #wall .wall-full-image-link{ width:100% !important; max-width:100% !important; margin:2px 0 0 !important; padding:0 !important; overflow:visible !important; } html body.site-in-room #wall .wall-full-inline-image{ display:block !important; width:auto !important; max-width:100% !important; height:auto !important; max-height:none !important; margin:0 !important; padding:0 !important; border-radius:0 !important; object-fit:contain !important; object-position:left top !important; } html body.site-in-room #wall .wall-video-preview, html body.site-in-room #wall .wall-video-preview .wall-attach-video{ display:block !important; width:240px !important; max-width:100% !important; height:auto !important; max-height:none !important; margin:3px 0 0 !important; object-fit:contain !important; object-position:left top !important; overflow:visible !important; } /* ===== END V225 ===== */ /* ===== V226 WALL NO-SHRINK + PERSISTENT STATUS COLOR ===== */ /* Never compress old wall posts/media when the list grows; scroll the list instead. */ html body.site-in-room #wall .d2bc > .mm{ flex:0 0 auto !important; flex-shrink:0 !important; } html body.site-in-room #wall .d2bc > .mm .wall-collapsed-image, html body.site-in-room #wall .d2bc > .mm .wall-full-image-link, html body.site-in-room #wall .d2bc > .mm .wall-full-inline-image, html body.site-in-room #wall .d2bc > .mm .wall-video-preview{ flex-shrink:0 !important; } /* The saved status color must win over the global theme text color. */ html body.site-in-room #users .uzr .u-msg, html body.site-in-room #users .uzr .user-status-line, html body:not(.site-in-room) #tlogins .lonline .uzr .u-msg, html body:not(.site-in-room) #tlogins .lonline .uzr .user-status-line{ color:var(--member-status-color, inherit) !important; } /* ===== END V226 ===== */ /* Laptop keeps the original compact navigation; phone boxes remain unchanged. */ @media (min-width:769px){ html body.site-in-room #d0{ justify-content:flex-start !important; } html body.site-in-room #d0 > .ae, html body.site-in-room #d0 > label, html body.site-in-room #d0 > button{ flex:0 0 82px !important; width:82px !important; min-width:82px !important; max-width:82px !important; } } /* Composer uses content color and keeps the writing field fully visible. */ html body.site-in-room #room > .tablebox.footer, html body.site-in-room #room > .footer{ height:42px !important; min-height:42px !important; max-height:42px !important; padding:3px 2px !important; background:var(--chat-content, var(--site-content-bg, #fff)) !important; overflow:hidden !important; } html body.site-in-room #tbox, html body.site-in-room #room > .footer textarea#tbox, html body.site-in-room #room > .tablebox.footer textarea#tbox{ height:34px !important; min-height:34px !important; max-height:34px !important; padding:5px 8px !important; line-height:22px !important; background:var(--chat-content, var(--site-content-bg, #fff)) !important; color:var(--chat-text, #111) !important; overflow:hidden !important; } html body.site-in-room #room > .footer > button, html body.site-in-room #room > .tablebox.footer > button, html body.site-in-room #room > .footer > .btn, html body.site-in-room #room > .tablebox.footer > .btn{ height:34px !important; min-height:34px !important; max-height:34px !important; background-color:var(--chat-buttons, var(--site-button-bg, #438ac7)) !important; } /* صورة الابتسامة تبقى بألوانها الأصلية ولا تتلوّن بلون أزرار النطاق. */ html body.site-in-room #room > .footer > img.emobox, html body.site-in-room #room > .tablebox.footer > img.emobox{ flex:0 0 34px !important; width:34px !important; min-width:34px !important; max-width:34px !important; height:34px !important; min-height:34px !important; max-height:34px !important; padding:2px !important; margin:0 !important; background:transparent !important; border:0 !important; object-fit:contain !important; } html body.site-in-room #upro .upro-register-state{ display:none !important; } /* Name background follows the text only, never the full member row. */ html body.site-in-room #users .uzr .u-topic, html body:not(.site-in-room) #tlogins .lonline .uzr .u-topic{ display:inline-block !important; width:auto !important; min-width:0 !important; max-width:100% !important; padding:0 4px !important; vertical-align:top !important; } /* V230.12: quiet reconnect indicator and compact theme-bound private chat. */ html body #chatReconnectBadge{ position:fixed!important;top:8px!important;left:50%!important;transform:translateX(-50%)!important; z-index:2147483000!important;padding:6px 11px!important;border-radius:7px!important; display:flex!important;align-items:center!important;gap:7px!important; background:#fff2f2!important;color:#b40000!important;border:2px solid #d40000!important; font:700 12px "Times New Roman",Times,serif!important;box-shadow:0 2px 10px rgba(180,0,0,.28)!important; } html body #chatReconnectBadge .reconnect-tower{ position:relative!important;display:inline-flex!important;align-items:center!important;justify-content:center!important; width:22px!important;height:22px!important;color:#d40000!important;font-size:15px!important; } html body #chatReconnectBadge .reconnect-tower>.fa-signal{ position:relative!important;z-index:2!important;color:#d40000!important; } html body #chatReconnectBadge .reconnect-tower>.fa-circle-o-notch{ position:absolute!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important; color:#ff3030!important;font-size:22px!important;opacity:.9!important; } html body .kashf-table .kashf-full-ip{ direction:ltr!important;unicode-bidi:isolate!important;white-space:nowrap!important; } html body .kashf-table .kashf-full-ip+ .kashf-full-ip{ margin-top:3px!important;padding-top:3px!important;border-top:1px dotted rgba(0,0,0,.2)!important; } html body.site-in-room .private-window{ position:absolute!important;top:1px!important;left:0!important;right:auto!important; width:min(500px,100vw)!important;max-width:min(500px,100vw)!important; height:min(490px,calc(100vh - 90px))!important;max-height:calc(100vh - 90px)!important; min-height:180px!important;padding:0!important;border-radius:0!important; overflow:hidden!important;box-sizing:border-box!important; border:1px solid var(--chat-template,var(--site-body-bg,#345c73))!important; background:var(--chat-content,#fff)!important; } html body.site-in-room .private-window>.head{ position:absolute!important;top:0!important;left:0!important;right:0!important; height:30px!important;min-height:30px!important;max-height:30px!important; margin:0!important;padding:0!important;overflow:hidden!important; background:var(--chat-template,var(--site-body-bg,#345c73))!important;color:#fff!important; } html body.site-in-room .private-window>.head .btn, html body.site-in-room .private-window>.head .label{ height:28px!important;min-height:28px!important;max-height:28px!important; margin:1px!important;padding:5px 8px!important;border-radius:0!important; background:var(--chat-buttons,var(--chat-template,#345c73))!important;color:#fff!important; } html body.site-in-room .private-window>.cont{ position:absolute!important;top:30px!important;left:0!important;right:0!important;bottom:0!important; width:100%!important;height:auto!important;min-height:0!important;overflow:hidden!important; background:var(--chat-content,#fff)!important; } html body.site-in-room .private-window>.cont>.d2{ position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:36px!important; width:100%!important;height:auto!important;min-height:0!important;overflow-y:auto!important; background:var(--chat-content,#fff)!important;color:var(--chat-text,#111)!important; } html body.site-in-room .private-window.has-private-reply>.cont>.d2{bottom:92px!important;} html body.site-in-room .private-window .private-reply-preview{ position:absolute!important;left:2px!important;right:2px!important;bottom:36px!important;z-index:6!important; width:auto!important;height:54px!important;min-height:54px!important;max-height:54px!important; margin:0!important;padding:3px 34px 3px 8px!important;overflow:hidden!important;box-sizing:border-box!important; } html body.site-in-room .private-window .private-reply-preview .chat-reply-label, html body.site-in-room .private-window .private-reply-preview .chat-reply-author, html body.site-in-room .private-window .private-reply-preview .chat-reply-text{line-height:14px!important;} html body.site-in-room .private-window .private-typing-indicator{ position:absolute!important;right:7px!important;bottom:39px!important;z-index:7!important; display:none;align-items:center!important;justify-content:center!important;direction:ltr!important; width:38px!important;height:18px!important;padding:2px 5px!important;margin:0!important; border-radius:10px!important;background:rgba(255,255,255,.94)!important; border:1px solid color-mix(in srgb,var(--chat-template,#345c73) 35%,transparent)!important; box-shadow:0 1px 3px rgba(0,0,0,.12)!important;box-sizing:border-box!important; } html body.site-in-room .private-window.has-private-reply .private-typing-indicator{bottom:95px!important;} html body.site-in-room .private-window .private-typing-indicator.is-typing{display:flex!important;} html body.site-in-room .private-window .private-typing-indicator span{ display:block!important;width:5px!important;height:5px!important;margin:0 2px!important; border-radius:50%!important;background:var(--chat-template,#345c73)!important; animation:privateTypingDot 1s infinite ease-in-out!important; } html body.site-in-room .private-window .private-typing-indicator span:nth-child(2){animation-delay:.15s!important;} html body.site-in-room .private-window .private-typing-indicator span:nth-child(3){animation-delay:.3s!important;} @keyframes privateTypingDot{0%,60%,100%{transform:translateY(0);opacity:.38}30%{transform:translateY(-3px);opacity:1}} html body.site-in-room .private-window>.cont>.footer{ position:absolute!important;left:0!important;right:0!important;bottom:0!important; width:100%!important;height:36px!important;min-height:36px!important;max-height:36px!important; display:flex!important;align-items:center!important;gap:2px!important;padding:2px!important; overflow:hidden!important;box-sizing:border-box!important;border-radius:0!important; border-top:1px solid var(--chat-template,var(--site-body-bg,#345c73))!important; background:var(--chat-content,#fff)!important; } html body.site-in-room .private-window>.cont>.footer>.btn, html body.site-in-room .private-window>.cont>.footer>button{ flex:0 0 32px!important;width:32px!important;height:30px!important;min-height:30px!important; margin:0!important;padding:0!important;border-radius:0!important; background:var(--chat-buttons,var(--chat-template,#345c73))!important;color:#fff!important; } html body.site-in-room .private-window>.cont>.footer>.emo{ flex:0 0 28px!important;width:28px!important;height:28px!important;margin:0!important;padding:2px!important; object-fit:contain!important;background:transparent!important; } html body.site-in-room .private-window>.cont>.footer>.tbox{ flex:1 1 auto!important;width:auto!important;min-width:40px!important;height:30px!important; min-height:30px!important;max-height:30px!important;margin:0!important;padding:4px 6px!important; box-sizing:border-box!important;background:var(--chat-content,#fff)!important;color:var(--chat-text,#111)!important; border:1px solid var(--chat-template,var(--site-body-bg,#345c73))!important; } html body.site-in-room .private-window .mm{position:relative!important;padding-right:49px!important;box-sizing:border-box!important;} html body.site-in-room .private-window .private-message-actions{ position:absolute!important;top:1px!important;right:2px!important;z-index:5!important; display:flex!important;direction:ltr!important;align-items:center!important;gap:2px!important; width:auto!important;height:22px!important;margin:0!important;padding:0!important; } html body.site-in-room .private-window .private-message-actions .chat-message-action{ display:inline-flex!important;align-items:center!important;justify-content:center!important; width:22px!important;min-width:22px!important;max-width:22px!important;height:22px!important;min-height:22px!important;max-height:22px!important; margin:0!important;padding:0!important;border:0!important;border-radius:0!important; background:var(--chat-buttons,var(--site-button-bg,#438ac7))!important;color:#fff!important;cursor:pointer!important; } html body.site-in-room .private-window .private-message-actions .delpm-btn{background:#d9534f!important;} html body.site-in-room .private-window .private-message-actions .delpm-btn:disabled{background:#999!important;opacity:.55!important;cursor:not-allowed!important;} /* V230.13: video-matched row rhythm, live status line and persisted notifications. */ html body.site-in-room #users>.uzr, html body.site-in-room #users>div.uzr, html body.site-in-room #chats>.uzr, html body.site-in-room #d2>div.uzr, html body.site-in-room #d2>div.msg, html body.site-in-room #d2>.uzr, html body.site-in-room #d2>.msg, html body.site-in-room #d2bc>.uzr, html body.site-in-room #d2bc>.msg{ border-bottom:1px solid #d8dcef!important; border-top:0!important;border-left:0!important;border-right:0!important; border-radius:0!important;box-sizing:border-box!important; box-shadow:inset 0 -1px 0 #d8dcef!important; } html body.site-in-room #users>.uzr{position:relative!important} html body.site-in-room #users .uzr .u-msg{ position:absolute!important;left:62px!important;right:auto!important;bottom:3px!important; display:block!important;float:none!important;clear:none!important; width:auto!important;max-width:calc(100% - 82px)!important;min-height:15px!important; margin:0!important;padding:0 2px!important; text-align:left!important;direction:ltr!important;white-space:nowrap!important; overflow:hidden!important;text-overflow:ellipsis!important; font:400 12px/15px "Times New Roman",Times,serif!important; background:transparent!important; } html body.site-in-room #notificationsButton{position:relative!important;width:100%!important;margin:4px 0!important} html body.site-in-room #notificationsBadge{margin-top:-8px!important;padding:1px 4px!important} html body.site-in-room .chat-notifications-panel{ position:absolute!important;z-index:2200!important;top:0!important;right:0!important; width:min(360px,100vw)!important;height:calc(100% - 42px)!important; background:var(--chat-content,#fff)!important;color:var(--chat-text,#111)!important; border:1px solid var(--chat-template,#345c73)!important;overflow:hidden!important; } html body.site-in-room .chat-notifications-head{ height:38px!important;display:flex!important;align-items:center!important;gap:8px!important; padding:3px!important;font:700 15px "Times New Roman",Times,serif!important; background:var(--chat-template,#345c73)!important;color:#fff!important; } html body.site-in-room .chat-notifications-head .btn{width:32px!important;height:30px!important;padding:0!important;background:var(--chat-buttons,#345c73)!important} html body.site-in-room .chat-notifications-head>span{flex:1!important} html body.site-in-room .chat-notifications-list{height:calc(100% - 38px)!important;overflow-y:auto!important} html body.site-in-room .chat-notification-item{display:flex!important;direction:ltr!important;gap:7px!important;padding:7px!important;border-bottom:1px solid rgba(70,95,130,.18)!important;background:var(--chat-content,#fff)!important} html body.site-in-room .chat-notification-item.is-unread{box-shadow:inset 4px 0 0 var(--chat-template,#345c73)!important} html body.site-in-room .chat-notification-pic{width:42px!important;height:42px!important;object-fit:cover!important;flex:none!important} html body.site-in-room .chat-notification-body{direction:rtl!important;text-align:right!important;min-width:0!important;flex:1!important} html body.site-in-room .chat-notification-text{font:700 13px/19px "Times New Roman",Times,serif!important} html body.site-in-room .chat-notification-time{font:400 10px/14px "Times New Roman",Times,serif!important;opacity:.65!important} html body.site-in-room .chat-notifications-empty{padding:30px 10px!important;text-align:center!important;opacity:.65!important} /* V230.15: consistent separators, default name colors and left notifications. */ html body.site-in-room #users > .uzr, html body.site-in-room #chats > .uzr, html body.site-in-room #chats > .private-item, html body.site-in-room #d2 > .msg, html body.site-in-room #d2 > .uzr, html body.site-in-room #d2 > .mm, html body.site-in-room #d2bc > .msg, html body.site-in-room #d2bc > .uzr, html body.site-in-room #d2bc > .mm, html body.site-in-room .private-window > .cont > .d2 > .msg, html body.site-in-room .private-window > .cont > .d2 > .uzr, html body.site-in-room .private-window > .cont > .d2 > .mm{ border-bottom:1px solid #c8ccd3 !important; border-radius:0 !important; box-shadow:none !important; } html body.site-in-room #users > .uzr:not(.member-has-cover), html body.site-in-room #chats > .uzr:not(.member-has-cover){ background-color:var(--chat-content, var(--site-content-bg, #ffffff)) !important; } html body.site-in-room #notificationsButton{ background:#54565a !important; color:#ffffff !important; border-color:#45474a !important; } html body.site-in-room .chat-notifications-panel{ left:0 !important; right:auto !important; } html body.site-in-room .chat-notification-body, html body.site-in-room .chat-notification-text, html body.site-in-room .chat-notification-time{ color:#4b4d50 !important; text-align:left !important; } html body.site-in-room .chat-notification-body{ align-self:center !important; direction:rtl !important; } /* ===== V230.16 VIDEO-MATCHED SEPARATORS + NESTED ADDONS/NOTIFICATIONS ===== */ /* The separator belongs to the complete row, including the private-chat wrapper. */ html body.site-in-room #users > .uzr, html body.site-in-room #chats > .cc, html body.site-in-room #chats > .uzr, html body.site-in-room #d2 > .mm, html body.site-in-room #d2 > .msg, html body.site-in-room #d2 > .uzr, html body.site-in-room #d2bc > .mm, html body.site-in-room #d2bc > .msg, html body.site-in-room .private-window > .cont > .d2 > .mm, html body.site-in-room .private-window > .cont > .d2 > .msg{ border-top:0 !important; border-right:0 !important; border-left:0 !important; border-bottom:1px solid #afc1d3 !important; border-radius:0 !important; box-shadow:inset 0 -1px 0 rgba(175,193,211,.7) !important; box-sizing:border-box !important; } html body.site-in-room #chats > .cc{ display:block !important; width:100% !important; margin:0 !important; } /* Default names follow the chat content; member-selected colors remain inline. */ html body.site-in-room #users > .uzr:not(.member-has-cover), html body.site-in-room #chats > .cc:not(.member-has-cover){ background-color:var(--chat-content, var(--site-content-bg, #ffffff)) !important; } /* Status: literal far-left line below the member name, dark gray by default. */ html body.site-in-room #users .uzr .u-msg, html body.site-in-room #users .uzr .user-status-line, html body:not(.site-in-room) #tlogins .lonline .uzr .u-msg, html body:not(.site-in-room) #tlogins .lonline .uzr .user-status-line{ position:absolute !important; left:62px !important; right:30px !important; bottom:3px !important; width:auto !important; max-width:none !important; min-height:15px !important; margin:0 !important; padding:0 2px !important; direction:ltr !important; text-align:left !important; color:var(--member-status-color, #4b4d50) !important; font:400 12px/15px "Times New Roman",Times,serif !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; background:transparent !important; } /* Profile status follows the reference: centered directly below the profile photo. */ html body #upro .upro-topbox, html body #upro.simple-view .upro-topbox{ display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:0 !important; padding:0 !important; } html body #upro .upro-avatar, html body #upro.simple-view .upro-avatar{ width:100% !important; max-width:100% !important; height:200px !important; min-height:200px !important; flex:0 0 200px !important; margin:0 !important; border-width:0 0 1px !important; border-radius:0 !important; background-size:contain !important; background-position:center center !important; background-repeat:no-repeat !important; } html body #upro .upro-maininfo, html body #upro.simple-view .upro-maininfo{ display:block !important; width:100% !important; margin:0 !important; padding:5px 10px 7px !important; box-sizing:border-box !important; } html body #upro .upro-name-line{ display:none !important; } html body #upro .upro-status-row{ width:100% !important; min-height:18px !important; margin:0 !important; color:var(--member-status-color, #4b4d50) !important; text-align:center !important; direction:rtl !important; font:400 13px/18px "Times New Roman",Times,serif !important; } /* Add-ons and notifications replace the settings contents inside the same panel. */ html body.site-in-room #settings{ position:relative !important; overflow:hidden !important; } html body.site-in-room #settings .settings-inner-view{ width:100% !important; height:100% !important; min-height:0 !important; margin:0 !important; box-sizing:border-box !important; } html body.site-in-room #settingsMainPanel{ overflow-y:auto !important; background:var(--chat-content, #ffffff) !important; } html body.site-in-room #settingsAddonsPanel, html body.site-in-room #notificationsPanel{ overflow:hidden !important; background:var(--chat-content, #ffffff) !important; color:var(--chat-text, #111111) !important; } html body.site-in-room #settingsAddonsButton{ display:block !important; width:100% !important; min-height:40px !important; margin:0 0 4px !important; background:#8744c8 !important; color:#ffffff !important; border:0 !important; font:700 14px/40px "Times New Roman",Times,serif !important; } html body.site-in-room #settings .settings-inner-head, html body.site-in-room #settings .chat-notifications-head{ display:flex !important; align-items:center !important; width:100% !important; height:40px !important; min-height:40px !important; gap:6px !important; padding:4px !important; box-sizing:border-box !important; background:var(--chat-template, #345c73) !important; color:#ffffff !important; } html body.site-in-room #settings .settings-inner-head > span, html body.site-in-room #settings .chat-notifications-head > span{ flex:1 !important; text-align:center !important; font:700 14px/30px "Times New Roman",Times,serif !important; } html body.site-in-room #settings .settings-inner-back{ flex:0 0 32px !important; width:32px !important; height:30px !important; padding:0 !important; line-height:30px !important; } html body.site-in-room #settings .settings-addon-entry{ display:flex !important; align-items:center !important; justify-content:space-between !important; width:calc(100% - 12px) !important; min-height:46px !important; margin:8px 6px !important; padding:0 12px !important; border:1px solid rgba(0,0,0,.25) !important; border-radius:4px !important; background:var(--chat-buttons, #438ac7) !important; color:#ffffff !important; font:700 14px/44px "Times New Roman",Times,serif !important; text-align:right !important; } html body.site-in-room #settings select.settings-addon-entry{ display:block !important; height:46px !important; max-height:46px !important; background:var(--chat-template, #345c73) !important; border-color:var(--chat-template, #345c73) !important; color:#fff !important; line-height:normal !important; } html body.site-in-room #settings select.settings-addon-entry option{ background:var(--chat-template, #345c73) !important; color:#fff !important; } html body.site-in-room #settings .settings-addon-entry:before{ margin-left:8px !important; } html body.site-in-room #settings #notificationsButton{position:relative !important;} html body.site-in-room #settings #notificationsBadge{ position:static !important; margin:0 auto 0 0 !important; } html body.site-in-room #settings .chat-notifications-panel{ position:relative !important; inset:auto !important; z-index:auto !important; width:100% !important; height:100% !important; border:0 !important; } html body.site-in-room #settings .chat-notifications-list{ height:calc(100% - 40px) !important; overflow-y:auto !important; } /* ===== END V230.16 ===== */ /* ===== V230.17 VISIBLE ROW SEPARATORS + BOTTOM ADDONS + PROFILE STATUS ===== */ html body.site-in-room #users > .uzr, html body.site-in-room #chats > .cc, html body.site-in-room #d2 > .mm, html body.site-in-room #d2 > .msg, html body.site-in-room #d2 > .uzr, html body.site-in-room #d2bc > .mm, html body.site-in-room #d2bc > .msg, html body.site-in-room .private-window > .cont > .d2 > .mm, html body.site-in-room .private-window > .cont > .d2 > .msg{ width:100% !important; margin:0 !important; border-top:0 !important; border-right:0 !important; border-left:0 !important; border-bottom:1px solid #cbd7eb !important; border-radius:0 !important; box-shadow:none !important; box-sizing:border-box !important; } html body.site-in-room #settings .voice-settings-actions > #settingsAddonsButton{ order:999 !important; flex:0 0 40px !important; width:100% !important; min-height:40px !important; margin:8px 0 4px !important; } html body #upro .modal-body.upro-body{ display:flex !important; flex-direction:column !important; } html body #upro .modal-body.upro-body > .upro-topbox{ order:1 !important; } html body #upro .modal-body.upro-body > .upro-meta-line{ order:2 !important; direction:ltr !important; } html body #upro .upro-topbox > .upro-maininfo, html body #upro.simple-view .upro-topbox > .upro-maininfo{ display:none !important; } html body #upro .modal-body.upro-body > .upro-status-under-photo{ order:3 !important; display:block !important; flex:0 0 auto !important; width:100% !important; min-height:30px !important; margin:0 !important; padding:5px 8px 6px !important; color:var(--member-status-color, #4b4d50) !important; background:var(--chat-content, var(--site-content-bg, #ffffff)) !important; text-align:center !important; direction:rtl !important; font:400 14px/19px "Times New Roman",Times,serif !important; box-sizing:border-box !important; } html body #upro .modal-body.upro-body > .upro-action-grid{ order:4 !important; } html body #upro .modal-body.upro-body > .upro-admin-area{ order:5 !important; } /* ===== END V230.17 ===== */ /* ===== V230.18 SETTINGS SCROLL + NOTIFICATION CARDS + SEARCH + PROFILE GRID ===== */ /* One scroll surface fills the panel; obsolete bottom padding must not cover buttons. */ html body.site-in-room .dpnl.bg.tab-content > #settings.tab-pane{ height:100% !important; min-height:0 !important; max-height:100% !important; padding:0 !important; overflow:hidden !important; box-sizing:border-box !important; } html body.site-in-room #settings > #settingsMainPanel{ height:100% !important; min-height:0 !important; max-height:100% !important; padding:4px 5px 10px !important; overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior:contain !important; -webkit-overflow-scrolling:touch !important; box-sizing:border-box !important; } html body.site-in-room #settings #chatZoomSize, html body.site-in-room #settings .voice-settings-actions > .voice-setting-select, html body.site-in-room #settings .voice-settings-actions > .voice-setting-btn{ height:36px !important; min-height:36px !important; max-height:36px !important; margin:3px 0 !important; border-radius:1px !important; font:600 13px/34px "Times New Roman",Times,serif !important; box-sizing:border-box !important; } html body.site-in-room #settings .settings-profile-field > .label, html body.site-in-room #settings .settings-profile-color-row > .label, html body.site-in-room #settings .settings-profile-field > input, html body.site-in-room #settings .settings-profile-color-row > input{ font-family:"Times New Roman",Times,serif!important; font-size:13px !important; } html body.site-in-room #settings #voiceServerMode{order:1 !important;} html body.site-in-room #settings #voiceMicQuality{order:2 !important;} html body.site-in-room #settings .settings-change-pic{order:3 !important;} html body.site-in-room #settings .settings-delete-pic{order:4 !important;} html body.site-in-room #settings #voiceDisablePm{order:5 !important;} html body.site-in-room #settings #voiceDisableNot{order:6 !important;} html body.site-in-room #settings #voiceChangerMode{order:7 !important;} html body.site-in-room #settings #vocalEffectsMode{order:8 !important;} html body.site-in-room #settings .voice-settings-actions .pmsg{order:9 !important;} html body.site-in-room #settings .voice-settings-actions .redit{order:10 !important;} html body.site-in-room #settings .voice-settings-actions .cp{order:11 !important;} html body.site-in-room #settings .settings-logout{order:12 !important;} html body.site-in-room #settings .voice-settings-actions > #settingsAddonsButton{ order:13 !important; flex:0 0 36px !important; height:36px !important; min-height:36px !important; max-height:36px !important; margin:3px 0 8px !important; line-height:34px !important; } /* Live search beats legacy rows that declare display:block !important. */ html body.site-in-room #users > .uzr.member-search-hidden, html body.site-in-room #users .uzr.member-search-hidden{ display:none !important; visibility:hidden !important; pointer-events:none !important; } /* Notification cards follow the reference: photo/name/time above the message. */ html body.site-in-room #settings #notificationsPanel{ padding:0 !important; } html body.site-in-room #settings #notificationsList{ height:calc(100% - 40px) !important; padding:8px 10px 18px !important; overflow-y:auto !important; background:var(--chat-content, #ffffff) !important; box-sizing:border-box !important; } html body.site-in-room #settings #notificationsList > .chat-notification-item{ display:flex !important; flex-direction:column !important; width:calc(100% - 12px) !important; min-height:94px !important; margin:8px auto 12px !important; padding:9px 11px 10px !important; border:1px solid #777777 !important; border-radius:10px !important; background:#f1f2f3 !important; box-shadow:none !important; box-sizing:border-box !important; } html body.site-in-room #settings .chat-notification-top{ display:flex !important; align-items:center !important; width:100% !important; min-height:32px !important; gap:8px !important; direction:ltr !important; } html body.site-in-room #settings .chat-notification-pic{ flex:0 0 32px !important; width:32px !important; height:32px !important; margin:0 !important; border-radius:2px !important; object-fit:cover !important; } html body.site-in-room #settings .chat-notification-actor{ display:inline-flex !important; align-items:center !important; min-height:28px !important; padding:2px 6px !important; border-radius:5px !important; background:#ffffff !important; color:#171a1d !important; font:600 12px/22px "Times New Roman",Times,serif !important; } html body.site-in-room #settings .chat-notification-time{ margin-left:auto !important; color:#64696f !important; font:400 11px/18px "Times New Roman",Times,serif !important; } html body.site-in-room #settings .chat-notification-body{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; min-height:36px !important; margin:7px 0 0 !important; padding:5px 7px !important; border:1px solid #e1e3e5 !important; border-radius:9px !important; background:#f8f9fa !important; box-sizing:border-box !important; } html body.site-in-room #settings .chat-notification-text{ width:100% !important; color:#141920 !important; text-align:center !important; direction:rtl !important; font:600 13px/19px "Times New Roman",Times,serif !important; } /* Flex items must never shrink the permissions grid underneath the admin fields. */ html body.site-in-room #upro .modal-body.upro-body{ display:flex !important; flex-direction:column !important; align-items:stretch !important; max-height:calc(100vh - 68px) !important; overflow-x:hidden !important; overflow-y:auto !important; } html body.site-in-room #upro .modal-body.upro-body > .upro-topbox, html body.site-in-room #upro .modal-body.upro-body > .upro-meta-line, html body.site-in-room #upro .modal-body.upro-body > .upro-status-under-photo, html body.site-in-room #upro .modal-body.upro-body > .upro-action-grid, html body.site-in-room #upro .modal-body.upro-body > .upro-admin-area{ flex:0 0 auto !important; } /* V230.66 — اختيار أيقونة السوبر من زر التميّز في بروفايل العضو */ .super-icon-picker-layer{ position:fixed!important;inset:0!important;z-index:2147483200!important; display:flex!important;align-items:center!important;justify-content:center!important; padding:14px!important;background:rgba(8,18,31,.58)!important;direction:rtl!important; } .super-icon-picker-card{ width:min(430px,calc(100vw - 28px))!important;max-height:min(620px,calc(100vh - 28px))!important; overflow:hidden!important;background:#fff!important;border:2px solid var(--site-button-bg,#345c73)!important; border-radius:14px!important;box-shadow:0 18px 45px rgba(0,0,0,.32)!important; } .super-icon-picker-head{ height:48px!important;display:flex!important;align-items:center!important;justify-content:space-between!important; padding:0 12px!important;background:var(--site-button-bg,#345c73)!important;color:#fff!important; font:bold 16px "Times New Roman",Times,serif!important; } .super-icon-picker-head button{ width:34px!important;height:34px!important;border:0!important;border-radius:8px!important; background:#d9534f!important;color:#fff!important;font:bold 23px/30px "Times New Roman",Times,serif!important;cursor:pointer!important; } .super-icon-picker-note{padding:10px 12px!important;background:#f4f7fa!important;color:#30465b!important;text-align:center!important;font:bold 13px "Times New Roman",Times,serif!important;} .super-icon-picker-grid{ max-height:500px!important;overflow-y:auto!important;padding:12px!important; display:grid!important;grid-template-columns:repeat(4,minmax(62px,1fr))!important;gap:9px!important; } .super-icon-choice,.super-icon-remove{ height:72px!important;border:1px solid #cbd8e5!important;border-radius:10px!important;background:#fff!important; display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;padding:6px!important; } .super-icon-choice img{max-width:58px!important;max-height:58px!important;object-fit:contain!important;display:block!important;} .super-icon-choice.selected,.super-icon-remove.selected{outline:3px solid #29a8ff!important;border-color:#1578ba!important;background:#eaf7ff!important;} .super-icon-remove{flex-direction:column!important;gap:3px!important;color:#c93434!important;font:bold 11px "Times New Roman",Times,serif!important;} .super-icon-remove i{font-size:24px!important;} .super-icon-empty{grid-column:1/-1!important;padding:24px 10px!important;text-align:center!important;color:#777!important;font:bold 13px "Times New Roman",Times,serif!important;} @media(max-width:480px){.super-icon-picker-grid{grid-template-columns:repeat(3,minmax(60px,1fr))!important;}} html body.site-in-room #upro .modal-body.upro-body > .upro-action-grid{ height:auto !important; max-height:none !important; overflow:visible !important; grid-auto-rows:35px !important; gap:3px !important; padding:0 4px 8px !important; } html body.site-in-room #upro .modal-body.upro-body > .upro-action-grid > .upro-btn{ height:35px !important; min-height:35px !important; font:600 12px/29px "Times New Roman",Times,serif !important; } /* ===== END V230.18 ===== */ /* ===== V230.19 VIDEO SCALE + LOCKED APPEARANCE + ANCHORED GAMES ===== */ html body.site-in-room{ --chat-bottom-bar:44px; --chat-microphone-bar:46px; } html body.site-in-room > .dad.fresh-voice-enabled{ grid-template-rows:var(--chat-microphone-bar) minmax(0,1fr) !important; } html body.site-in-room > .dad.fresh-voice-enabled > #freshVoiceBar, html body.site-in-room #freshVoiceBar{ height:var(--chat-microphone-bar) !important; min-height:var(--chat-microphone-bar) !important; max-height:var(--chat-microphone-bar) !important; gap:3px !important; padding:2px 3px !important; } html body.site-in-room #freshVoiceBar > .fresh-speaker, html body.site-in-room #freshVoiceBar > .fresh-mic-seat, html body.site-in-room #freshVoiceBar > .fresh-music-btn{ width:41px !important; min-width:41px !important; height:41px !important; min-height:41px !important; max-height:41px !important; margin:0 !important; } html body.site-in-room #freshVoiceBar > .fresh-live-btn{ min-width:68px !important; height:41px !important; min-height:41px !important; max-height:41px !important; } html body.site-in-room #freshVoiceBar .fresh-speaker > i, html body.site-in-room #freshVoiceBar .fresh-mic-seat > i, html body.site-in-room #freshVoiceBar .fresh-music-btn > i{ font-size:28px !important; } html body.site-in-room #d2 > .mm, html body.site-in-room #d2 > .msg, html body.site-in-room #d2 > .uzr{ min-height:54px !important; font-family:"Times New Roman",Times,serif!important; } html body.site-in-room #d2 > .mm .u-pic, html body.site-in-room #d2 > .msg .u-pic, html body.site-in-room #d2 > .uzr > .u-pic{ width:51px !important; min-width:51px !important; max-width:51px !important; height:51px !important; min-height:51px !important; max-height:51px !important; border-radius:0 !important; } html body.site-in-room #d2 .u-topic{ font-family:"Times New Roman",Times,serif!important; font-size:16px !important; font-weight:700 !important; line-height:21px !important; } html body.site-in-room #d2 .u-msg{ font-family:"Times New Roman",Times,serif!important; font-size:16px !important; font-weight:600 !important; line-height:21px !important; } html body.site-in-room #room > .tablebox.footer, html body.site-in-room #room > .footer{ height:44px !important; min-height:44px !important; max-height:44px !important; padding:3px 2px !important; } html body.site-in-room #tbox, html body.site-in-room #room > .footer > button, html body.site-in-room #room > .tablebox.footer > button, html body.site-in-room #room > .footer > .btn, html body.site-in-room #room > .tablebox.footer > .btn{ height:37px !important; min-height:37px !important; max-height:37px !important; font-family:"Times New Roman",Times,serif!important; } html body.site-in-room #room > .footer > img.emobox, html body.site-in-room #room > .tablebox.footer > img.emobox{ flex:0 0 37px !important; width:37px !important; min-width:37px !important; max-width:37px !important; height:37px !important; min-height:37px !important; max-height:37px !important; } html body.site-in-room #d0 > .ae, html body.site-in-room #d0 > label, html body.site-in-room #d0 > button{ height:40px !important; min-height:40px !important; max-height:40px !important; font:700 14px/38px "Times New Roman",Times,serif !important; } html body.site-in-room #settings #chatZoomSize, html body.site-in-room #settings .voice-settings-actions > .voice-setting-select, html body.site-in-room #settings .voice-settings-actions > .voice-setting-btn{ height:37px !important; min-height:37px !important; max-height:37px !important; font:700 14px/35px "Times New Roman",Times,serif !important; } html body.site-in-room #settings #memberFrameButton{order:7 !important;} html body.site-in-room #settings #memberBackgroundButton{order:8 !important;} html body.site-in-room #settings #voiceChangerMode{order:9 !important;} html body.site-in-room #settings #vocalEffectsMode{order:10 !important;} html body.site-in-room #settings .voice-settings-actions .pmsg{order:11 !important;} html body.site-in-room #settings .voice-settings-actions .redit{order:12 !important;} html body.site-in-room #settings .voice-settings-actions .cp{order:13 !important;} html body.site-in-room #settings .settings-logout{order:14 !important;} html body.site-in-room #settings .voice-settings-actions > #settingsAddonsButton{ order:15 !important; flex:0 0 37px !important; height:37px !important; min-height:37px !important; max-height:37px !important; margin:3px 0 10px !important; line-height:35px !important; } html body.site-in-room #settings #gamesPanel{ display:none; overflow:hidden !important; background:var(--chat-content,#fff) !important; } html body.site-in-room #settings #gamesButton{ background:#277b68 !important; } html body.site-in-room #settings .chat-games-head > .fa-refresh{ width:31px !important; height:30px !important; padding:0 !important; } html body.site-in-room #settings .chat-games-content{ height:calc(100% - 40px) !important; padding:12px 9px 18px !important; overflow-x:hidden !important; overflow-y:auto !important; text-align:center !important; box-sizing:border-box !important; font-family:"Times New Roman",Times,serif!important; } html body.site-in-room #settings .chat-games-title, html body.site-in-room #settings .chat-game-current-title{ margin:3px 0 12px !important; color:var(--chat-text,#222) !important; font:700 14px/22px "Times New Roman",Times,serif !important; } html body.site-in-room #settings .chat-games-types{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:5px !important; margin:0 0 14px !important; } html body.site-in-room #settings .chat-game-type{ min-height:51px !important; padding:5px 3px !important; border:1px solid #c4c8cc !important; border-radius:4px !important; background:#f3f5f7 !important; color:#202428 !important; font:600 12px/17px "Times New Roman",Times,serif !important; } html body.site-in-room #settings .chat-game-type.selected{ border-color:var(--chat-template,#48776a) !important; background:var(--chat-template,#48776a) !important; color:#fff !important; } html body.site-in-room #settings .chat-game-start, html body.site-in-room #settings .chat-game-opponent{ display:block !important; width:100% !important; min-height:40px !important; margin:8px 0 !important; padding:0 8px !important; border:1px solid #778087 !important; border-radius:3px !important; box-sizing:border-box !important; font:700 14px/38px "Times New Roman",Times,serif !important; } html body.site-in-room #settings .chat-game-start{ background:var(--chat-template,#48776a) !important; color:#fff !important; } html body.site-in-room #settings .chat-game-start.challenge{ background:#315d79 !important; } html body.site-in-room #settings .chat-game-divider, html body.site-in-room #settings .chat-game-message{ margin:13px 0 5px !important; font:600 13px/21px "Times New Roman",Times,serif !important; } html body.site-in-room #settings .chat-game-players{ display:flex !important; align-items:stretch !important; justify-content:space-between !important; gap:7px !important; margin:0 0 8px !important; } html body.site-in-room #settings .chat-game-player{ display:flex !important; align-items:center !important; justify-content:center !important; flex:1 1 0 !important; min-width:0 !important; min-height:38px !important; gap:5px !important; padding:4px !important; border:1px solid #d1d5d9 !important; border-radius:5px !important; font:600 11px/18px "Times New Roman",Times,serif !important; } html body.site-in-room #settings .chat-game-player.active{ border-color:#289970 !important; background:#e6f5ed !important; } html body.site-in-room #settings .chat-game-player-pic{ flex:0 0 28px !important; width:28px !important; height:28px !important; object-fit:cover !important; } html body.site-in-room #settings .chat-game-status{ min-height:34px !important; margin:6px 0 10px !important; font:700 14px/30px "Times New Roman",Times,serif !important; } html body.site-in-room #settings .chat-game-status.finished{ color:#187f53 !important; } html body.site-in-room #settings .chat-game-board.xo{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:6px !important; width:min(264px,100%) !important; margin:0 auto 12px !important; } html body.site-in-room #settings .chat-game-cell{ aspect-ratio:1/1 !important; padding:0 !important; border:1px solid #9ca6ae !important; border-radius:5px !important; background:#f7f8fa !important; font:700 39px/1 "Times New Roman",Times,serif !important; } html body.site-in-room #settings .chat-game-cell.mark-x{color:#1674b4 !important;} html body.site-in-room #settings .chat-game-cell.mark-o{color:#e04862 !important;} html body.site-in-room #settings .chat-game-board.four{ display:grid !important; grid-template-columns:repeat(7,minmax(0,1fr)) !important; gap:4px !important; width:100% !important; padding:7px !important; border-radius:7px !important; background:#235a94 !important; box-sizing:border-box !important; } html body.site-in-room #settings .chat-game-four-cell{ aspect-ratio:1/1 !important; padding:0 !important; border:1px solid rgba(0,0,0,.2) !important; border-radius:50% !important; background:#edf1f5 !important; } html body.site-in-room #settings .chat-game-four-cell.mark-x{background:#f3cf42 !important;} html body.site-in-room #settings .chat-game-four-cell.mark-o{background:#ef5562 !important;} html body.site-in-room #settings .chat-game-rps{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:7px !important; margin:12px 0 !important; } html body.site-in-room #settings .chat-game-rps-choice{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; min-height:84px !important; border:1px solid #aeb7bf !important; border-radius:6px !important; background:#f4f5f7 !important; } html body.site-in-room #settings .chat-game-rps-choice > span{font-size:34px !important;} html body.site-in-room #settings .chat-game-rps-choice > small{font:700 12px/20px "Times New Roman",Times,serif !important;} html body.site-in-room #settings .chat-game-rps-choice.selected{border:2px solid #24815e !important;} html body.site-in-room #settings .chat-game-choice-result{font:600 13px/23px "Times New Roman",Times,serif !important;} .chat-feature-overlay{ position:fixed !important; inset:0 !important; z-index:2147483500 !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:14px !important; background:rgba(0,0,0,.58) !important; box-sizing:border-box !important; } .chat-feature-dialog{ width:min(350px,calc(100vw - 28px)) !important; padding:17px !important; border:1px solid rgba(255,255,255,.12) !important; border-radius:13px !important; background:#151515 !important; color:#fff !important; text-align:center !important; box-sizing:border-box !important; font-family:"Times New Roman",Times,serif!important; } .chat-feature-title{ margin:0 0 9px !important; color:#f4cf55 !important; font:700 17px/26px "Times New Roman",Times,serif !important; } .chat-feature-copy{ margin:0 0 12px !important; color:#fff !important; font:500 13px/21px "Times New Roman",Times,serif !important; } .appearance-password-input{ width:100% !important; height:39px !important; padding:0 9px !important; border:1px solid #777 !important; border-radius:4px !important; background:#fff !important; color:#111 !important; box-sizing:border-box !important; } .appearance-password-error{ min-height:22px !important; color:#ff8b8b !important; font:500 12px/21px "Times New Roman",Times,serif !important; } .chat-feature-actions{ display:flex !important; gap:8px !important; margin:8px 0 0 !important; } .chat-feature-actions > button{ flex:1 1 0 !important; min-height:39px !important; border:0 !important; border-radius:5px !important; font:700 14px/35px "Times New Roman",Times,serif !important; } .chat-feature-confirm{background:#488b68 !important;color:#fff !important;} .chat-feature-cancel{background:#383838 !important;color:#fff !important;} .game-invite-pic{ width:53px !important; height:53px !important; margin:2px 0 8px !important; border-radius:5px !important; object-fit:cover !important; } html body.site-in-room #upro .modal-body.upro-body > .upro-game-challenges{ order:4 !important; display:flex !important; flex:0 0 auto !important; gap:5px !important; padding:4px 5px 7px !important; } html body.site-in-room #upro .modal-body.upro-body > .upro-game-challenges[style*="display: none"]{ display:none !important; } html body.site-in-room #upro .upro-game-button{ flex:1 1 0 !important; min-height:34px !important; border:1px solid #c7cdd2 !important; border-radius:16px !important; background:#f7f8fa !important; color:#1b2630 !important; font:700 12px/29px "Times New Roman",Times,serif !important; } html body.site-in-room #upro .modal-body.upro-body > .upro-action-grid{order:5 !important;} html body.site-in-room #upro .modal-body.upro-body > .upro-admin-area{order:6 !important;} /* ===== END V230.19 ===== */ /* ===== V230.20 REFERENCE TYPOGRAPHY + GOLD PREMIUM ACCESS ===== */ html body.site-in-room > .dad, html body.site-in-room > .dad #room, html body.site-in-room > .dad #room *, html body.site-in-room > .dad #settings, html body.site-in-room > .dad #settings *, html body.site-in-room > .dad #users, html body.site-in-room > .dad #users *, html body.site-in-room > .dad #rooms, html body.site-in-room > .dad #rooms *, html body.site-in-room > .dad #chats, html body.site-in-room > .dad #chats *, html body.site-in-room > .dad #wall, html body.site-in-room > .dad #wall *, html body.site-in-room #upro, html body.site-in-room #upro *, html body.site-in-room .chat-feature-overlay, html body.site-in-room .chat-feature-overlay *{ font-family:"Times New Roman",Times,serif!important; font-weight:700 !important; letter-spacing:0 !important; } html body.site-in-room .fa::before, html body.site-in-room .fa::after{ font-family:FontAwesome !important; } html body.site-in-room .glyphicon::before{ font-family:"Glyphicons Halflings" !important; } html body.site-in-room > .dad #d2 .u-topic, html body.site-in-room > .dad #wall .u-topic, html body.site-in-room > .dad #chats .u-topic, html body.site-in-room > .dad .private-window .u-topic, html body.site-in-room > .dad .chat-announcement-name{ font-family:"Times New Roman",Times,serif!important; font-size:18px !important; font-weight:700 !important; line-height:23px !important; } html body.site-in-room > .dad #d2 .u-msg, html body.site-in-room > .dad #wall .u-msg, html body.site-in-room > .dad #chats .u-msg, html body.site-in-room > .dad .private-window .u-msg, html body.site-in-room > .dad .chat-announcement-body, html body.site-in-room > .dad .chat-announcement-text, html body.site-in-room > .dad .chat-reply-quote{ font-family:"Times New Roman",Times,serif!important; font-size:17px !important; font-weight:700 !important; line-height:23px !important; } html body.site-in-room > .dad #users .u-topic, html body.site-in-room > .dad #rooms .u-topic{ font-family:"Times New Roman",Times,serif!important; font-size:16px !important; font-weight:700 !important; line-height:21px !important; } html body.site-in-room > .dad > #room{ grid-template-rows:minmax(0,1fr) 42px 46px !important; } html body.site-in-room > .dad > #room > .tablebox.footer, html body.site-in-room > .dad > #room > .footer{ height:42px !important; min-height:42px !important; max-height:42px !important; gap:2px !important; padding:2px !important; } html body.site-in-room > .dad > #room > .footer > button, html body.site-in-room > .dad > #room > .tablebox.footer > button{ flex:0 0 36px !important; width:36px !important; min-width:36px !important; max-width:36px !important; height:36px !important; min-height:36px !important; max-height:36px !important; font-family:"Times New Roman",Times,serif!important; font-weight:700 !important; } html body.site-in-room > .dad > #room > .footer > button.fa-send, html body.site-in-room > .dad > #room > .tablebox.footer > button.fa-send{ flex:0 0 auto !important; width:auto !important; min-width:62px !important; max-width:none !important; padding:0 6px !important; font-size:15px !important; } html body.site-in-room > .dad > #room > .footer > img.emobox, html body.site-in-room > .dad > #room > .tablebox.footer > img.emobox{ flex:0 0 36px !important; width:36px !important; min-width:36px !important; max-width:36px !important; height:36px !important; min-height:36px !important; max-height:36px !important; } html body.site-in-room > .dad > #room > .footer > #tbox, html body.site-in-room > .dad > #room > .tablebox.footer > #tbox{ height:36px !important; min-height:36px !important; max-height:36px !important; font-family:"Times New Roman",Times,serif!important; font-size:15px !important; font-weight:700 !important; line-height:23px !important; } html body.site-in-room > .dad > #room > #d0{ display:flex !important; height:46px !important; min-height:46px !important; max-height:46px !important; align-items:stretch !important; justify-content:space-between !important; gap:2px !important; padding:1px !important; overflow:hidden !important; } html body.site-in-room > .dad > #room > #d0 > .ae, html body.site-in-room > .dad > #room > #d0 > label, html body.site-in-room > .dad > #room > #d0 > button{ flex:1 1 0 !important; width:auto !important; min-width:0 !important; max-width:none !important; height:42px !important; min-height:42px !important; max-height:42px !important; gap:3px !important; padding:0 3px !important; white-space:nowrap !important; font-family:"Times New Roman",Times,serif!important; font-size:15px !important; font-weight:700 !important; line-height:40px !important; } html body.site-in-room > .dad > #room > #d0 > label::before, html body.site-in-room > .dad > #room > #d0 > .ae::before{ flex:0 0 auto !important; margin:0 !important; font-family:FontAwesome !important; font-size:16px !important; } html body.site-in-room > .dad > #room > #d0 > [data-target="#wall"] > .bwall, html body.site-in-room > .dad > #room > #d0 > [data-target="#users"] > .busers{ display:inline-flex !important; visibility:visible !important; opacity:1 !important; flex:0 0 auto !important; min-width:1ch !important; margin:0 !important; font-family:"Times New Roman",Times,serif!important; font-size:15px !important; font-weight:700 !important; line-height:inherit !important; } html body.site-in-room > .dad #settings #premiumFeaturesButton.premium-features-button{ order:3 !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; padding:0 10px !important; border:1px solid #d7b74c !important; background-color:#101008 !important; background-image:linear-gradient(108deg,#080808 4%,#151409 35%,#695509 52%,#d4b43c 70%,#f2d866 79%,#111009 96%) !important; background-size:220% 100% !important; color:#fff3bf !important; box-shadow:0 0 5px rgba(228,191,76,.65) !important; text-shadow:0 0 8px rgba(255,217,100,.62) !important; animation:premiumGoldSweep 2.5s linear infinite,premiumGoldPulse 1.3s ease-in-out infinite alternate !important; } html body.site-in-room > .dad #settings #premiumFeaturesButton > .premium-features-title, html body.site-in-room > .dad #settings #premiumFeaturesButton > .premium-features-diamonds{ position:static !important; inset:auto !important; display:inline !important; flex:0 0 auto !important; margin:0 !important; padding:0 !important; transform:none !important; font-family:"Times New Roman",Times,serif!important; font-size:16px !important; font-weight:700 !important; line-height:35px !important; } html body.site-in-room > .dad #settings #premiumFeaturesButton > .premium-features-title{ color:#fff3bf !important; } html body.site-in-room > .dad #settings #premiumFeaturesButton > .premium-features-diamonds{ color:#9ff3e5 !important; } @keyframes premiumGoldSweep{ 0%{background-position:0% 50%;} 100%{background-position:220% 50%;} } @keyframes premiumGoldPulse{ from{box-shadow:0 0 4px rgba(240,202,75,.5);} to{box-shadow:0 0 13px rgba(255,218,93,.98),0 0 2px rgba(255,226,131,.8) inset;} } html body.site-in-room > .dad #settings .settings-change-pic{order:4 !important;} html body.site-in-room > .dad #settings .settings-delete-pic{order:5 !important;} html body.site-in-room > .dad #settings #voiceDisablePm{order:6 !important;} html body.site-in-room > .dad #settings #voiceDisableNot{order:7 !important;} html body.site-in-room > .dad #settings #voiceChangerMode{order:8 !important;} html body.site-in-room > .dad #settings #vocalEffectsMode{order:9 !important;} html body.site-in-room > .dad #settings .voice-settings-actions .pmsg{order:10 !important;} html body.site-in-room > .dad #settings .voice-settings-actions .redit{order:11 !important;} html body.site-in-room > .dad #settings .voice-settings-actions .cp{order:12 !important;} html body.site-in-room > .dad #settings .settings-logout{order:13 !important;} html body.site-in-room > .dad #settings .voice-settings-actions > #settingsAddonsButton{order:14 !important;} html body #premiumFeaturesOverlay.premium-features-overlay{ display:none !important; } html body #premiumFeaturesOverlay.premium-features-overlay.is-open{ display:flex !important; } html body #premiumFeaturesOverlay .premium-features-dialog{ border-color:#aa9035 !important; box-shadow:0 0 20px rgba(231,193,76,.25) !important; } html body #premiumFeaturesOverlay .premium-feature-option, html body #premiumFeaturesOverlay .premium-feature-close{ display:flex !important; width:100% !important; min-height:42px !important; margin:8px 0 0 !important; align-items:center !important; justify-content:center !important; gap:8px !important; border:1px solid #73632d !important; border-radius:4px !important; background:#25241b !important; color:#fff2bf !important; font-family:"Times New Roman",Times,serif!important; font-size:15px !important; font-weight:700 !important; } html body #premiumFeaturesOverlay .premium-feature-close{ border-color:#444 !important; background:#353535 !important; color:#fff !important; } @media (max-width:420px){ html body.site-in-room > .dad > #room > #d0 > .ae, html body.site-in-room > .dad > #room > #d0 > label, html body.site-in-room > .dad > #room > #d0 > button{ gap:2px !important; padding:0 2px !important; font-size:clamp(12px,3.8vw,15px) !important; } html body.site-in-room > .dad > #room > #d0 > label::before, html body.site-in-room > .dad > #room > #d0 > .ae::before{ font-size:15px !important; } html body.site-in-room > .dad > #room > #d0 > [data-target="#wall"] > .bwall, html body.site-in-room > .dad > #room > #d0 > [data-target="#users"] > .busers{ font-size:inherit !important; } } @media (min-width:769px){ html body.site-in-room > .dad > #room > #d0{ justify-content:flex-start !important; } html body.site-in-room > .dad > #room > #d0 > .ae, html body.site-in-room > .dad > #room > #d0 > label, html body.site-in-room > .dad > #room > #d0 > button{ flex:0 0 88px !important; width:88px !important; min-width:88px !important; max-width:88px !important; } } /* ===== END V230.20 ===== */ /* ===== V230.21 LUDO STAR + BILLIARDS ===== */ html body.site-in-room > .dad #settings .chat-games-types{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } html body.site-in-room > .dad #settings .chat-game-type{ min-height:49px !important; padding:4px 2px !important; font-family:"Times New Roman",Times,serif!important; font-size:12px !important; font-weight:700 !important; line-height:17px !important; } html body.site-in-room > .dad #settings .chat-ludo-board{ display:grid !important; grid-template-columns:repeat(15,minmax(0,1fr)) !important; grid-template-rows:repeat(15,minmax(0,1fr)) !important; gap:1px !important; width:min(310px,100%) !important; aspect-ratio:1/1 !important; margin:0 auto 8px !important; padding:3px !important; border:2px solid #31363b !important; border-radius:5px !important; background:#c9cdd1 !important; box-shadow:0 2px 8px rgba(0,0,0,.22) !important; box-sizing:border-box !important; } html body.site-in-room > .dad #settings .chat-ludo-cell{ position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; min-width:0 !important; min-height:0 !important; border-radius:1px !important; background:#eceff1 !important; box-sizing:border-box !important; } html body.site-in-room > .dad #settings .chat-ludo-cell.track{ border:1px solid #c0c5c9 !important; background:#fff !important; } html body.site-in-room > .dad #settings .chat-ludo-cell.yard-red{background:#f3b6b6 !important;} html body.site-in-room > .dad #settings .chat-ludo-cell.yard-blue{background:#a9cdec !important;} html body.site-in-room > .dad #settings .chat-ludo-cell.home-red, html body.site-in-room > .dad #settings .chat-ludo-cell.start-red{background:#e84f59 !important;} html body.site-in-room > .dad #settings .chat-ludo-cell.home-blue, html body.site-in-room > .dad #settings .chat-ludo-cell.start-blue{background:#338fd0 !important;} html body.site-in-room > .dad #settings .chat-ludo-cell.ludo-center{ background:conic-gradient(#e84f59 0 25%,#f0cd45 25% 50%,#338fd0 50% 75%,#43a96b 75%) !important; } html body.site-in-room > .dad #settings .chat-ludo-cell.track.ludo-center{border:1px solid #c0c5c9 !important;} html body.site-in-room > .dad #settings .chat-ludo-cell.yard-spot{ border:2px solid rgba(255,255,255,.9) !important; border-radius:50% !important; box-shadow:0 0 0 1px rgba(0,0,0,.18) inset !important; } html body.site-in-room > .dad #settings .chat-ludo-pawn{ position:absolute !important; z-index:4 !important; left:50% !important; top:50% !important; width:13px !important; min-width:13px !important; max-width:13px !important; height:13px !important; min-height:13px !important; max-height:13px !important; margin:0 !important; padding:0 !important; border:1px solid #fff !important; border-radius:50% 50% 48% 48% !important; color:#fff !important; font-family:"Times New Roman",Times,serif!important; font-size:7px !important; font-weight:700 !important; line-height:11px !important; box-shadow:0 1px 3px rgba(0,0,0,.55) !important; transform:translate(-50%,-50%) !important; } html body.site-in-room > .dad #settings .chat-ludo-pawn:nth-of-type(2){transform:translate(-82%,-82%) !important;} html body.site-in-room > .dad #settings .chat-ludo-pawn:nth-of-type(3){transform:translate(-18%,-82%) !important;} html body.site-in-room > .dad #settings .chat-ludo-pawn:nth-of-type(4){transform:translate(-82%,-18%) !important;} html body.site-in-room > .dad #settings .chat-ludo-pawn:nth-of-type(5){transform:translate(-18%,-18%) !important;} html body.site-in-room > .dad #settings .chat-ludo-pawn.red{background:#c91d31 !important;} html body.site-in-room > .dad #settings .chat-ludo-pawn.blue{background:#126cb5 !important;} html body.site-in-room > .dad #settings .chat-ludo-pawn.movable{ z-index:7 !important; cursor:pointer !important; animation:chatLudoPawnPulse .72s ease-in-out infinite alternate !important; } @keyframes chatLudoPawnPulse{ from{box-shadow:0 0 0 2px rgba(255,213,49,.75),0 1px 3px rgba(0,0,0,.55);} to{box-shadow:0 0 0 4px rgba(255,221,73,.38),0 0 9px rgba(255,210,27,.95);} } html body.site-in-room > .dad #settings .chat-ludo-controls{ display:grid !important; grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr) !important; align-items:center !important; gap:6px !important; width:min(310px,100%) !important; margin:0 auto 6px !important; } html body.site-in-room > .dad #settings .chat-ludo-score{ min-width:0 !important; padding:4px !important; border-radius:4px !important; color:#fff !important; font:700 11px/19px "Times New Roman",Times,serif !important; text-align:center !important; } html body.site-in-room > .dad #settings .chat-ludo-score.red{background:#c93242 !important;} html body.site-in-room > .dad #settings .chat-ludo-score.blue{background:#227ebd !important;} html body.site-in-room > .dad #settings .chat-ludo-dice{ width:54px !important; height:46px !important; padding:0 !important; border:1px solid #555 !important; border-radius:7px !important; background:#fff !important; color:#111 !important; font-size:31px !important; line-height:42px !important; box-shadow:0 2px 5px rgba(0,0,0,.2) !important; } html body.site-in-room > .dad #settings .chat-ludo-dice:disabled{opacity:.58 !important;} html body.site-in-room > .dad #settings .chat-game-last-action{ margin:4px auto 8px !important; color:var(--chat-text,#222) !important; font:700 12px/20px "Times New Roman",Times,serif !important; text-align:center !important; } html body.site-in-room > .dad #settings .chat-billiards-wrap{ width:100% !important; max-width:340px !important; margin:0 auto 8px !important; } html body.site-in-room > .dad #settings .chat-billiards-table{ position:relative !important; width:100% !important; aspect-ratio:100/56 !important; border:9px solid #57341f !important; border-radius:11px !important; background:radial-gradient(circle at center,#21905e 0,#116744 72%,#0a4a32 100%) !important; box-shadow:0 3px 9px rgba(0,0,0,.35),0 0 0 2px #bd8844 inset !important; overflow:hidden !important; box-sizing:border-box !important; cursor:crosshair !important; } html body.site-in-room > .dad #settings .chat-pool-pocket{ position:absolute !important; z-index:1 !important; width:8.2% !important; aspect-ratio:1 !important; border-radius:50% !important; background:#080808 !important; box-shadow:0 0 0 2px rgba(0,0,0,.45) !important; transform:translate(-50%,-50%) !important; } html body.site-in-room > .dad #settings .chat-pool-ball{ position:absolute !important; z-index:5 !important; display:flex !important; align-items:center !important; justify-content:center !important; width:4.4% !important; aspect-ratio:1 !important; border:1px solid rgba(0,0,0,.58) !important; border-radius:50% !important; color:#fff !important; font:700 7px/1 "Times New Roman",Times,serif !important; box-shadow:-1px 2px 3px rgba(0,0,0,.48),1px -1px 2px rgba(255,255,255,.7) inset !important; transform:translate(-50%,-50%) !important; transition:left .45s ease,top .45s ease !important; pointer-events:none !important; } html body.site-in-room > .dad #settings .chat-pool-ball.ball-cue{background:#fff !important;color:#111 !important;} html body.site-in-room > .dad #settings .chat-pool-ball.ball-1{background:#e1bc16 !important;color:#111 !important;} html body.site-in-room > .dad #settings .chat-pool-ball.ball-2{background:#2269bf !important;} html body.site-in-room > .dad #settings .chat-pool-ball.ball-3{background:#d62f3a !important;} html body.site-in-room > .dad #settings .chat-pool-ball.ball-4{background:#733ba5 !important;} html body.site-in-room > .dad #settings .chat-pool-ball.ball-5{background:#e6791e !important;} html body.site-in-room > .dad #settings .chat-pool-ball.ball-6{background:#198954 !important;} html body.site-in-room > .dad #settings .chat-pool-guide{ position:absolute !important; z-index:3 !important; width:34% !important; height:2px !important; border-top:1px dashed rgba(255,255,255,.92) !important; transform-origin:0 50% !important; pointer-events:none !important; } html body.site-in-room > .dad #settings .chat-pool-score{ display:grid !important; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important; align-items:center !important; gap:6px !important; margin:7px 0 4px !important; font:700 11px/20px "Times New Roman",Times,serif !important; } html body.site-in-room > .dad #settings .chat-pool-score span{overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;} html body.site-in-room > .dad #settings .chat-pool-score strong{padding:2px 9px !important;border-radius:10px !important;background:#20282e !important;color:#fff !important;} html body.site-in-room > .dad #settings .chat-pool-controls{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:5px 8px !important; align-items:end !important; margin:5px 0 !important; } html body.site-in-room > .dad #settings .chat-pool-controls label{ display:flex !important; flex-direction:column !important; gap:2px !important; font:700 11px/17px "Times New Roman",Times,serif !important; } html body.site-in-room > .dad #settings .chat-pool-controls input[type="range"]{width:100% !important;margin:0 !important;} html body.site-in-room > .dad #settings .chat-pool-shoot{ grid-column:1/-1 !important; min-height:38px !important; border:1px solid #0d5138 !important; border-radius:4px !important; background:#177d54 !important; color:#fff !important; font:700 14px/34px "Times New Roman",Times,serif !important; } html body.site-in-room #upro .upro-game-challenges{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; } html body.site-in-room #upro .upro-game-challenges[style*="display: none"]{display:none !important;} html body.site-in-room #upro .upro-game-button > span{ position:static !important; margin:0 3px !important; font-size:14px !important; } @media (max-width:360px){ html body.site-in-room > .dad #settings .chat-ludo-board{width:286px !important;max-width:100% !important;} html body.site-in-room > .dad #settings .chat-pool-controls{grid-template-columns:1fr !important;} html body.site-in-room > .dad #settings .chat-pool-shoot{grid-column:1 !important;} } /* ===== END V230.21 ===== */ /* ===== V230.22 MOBILE SCALE + ACCESSIBLE PICKERS + SETTINGS ORDER ===== */ html body.site-in-room{ --chat-bottom-bar:39px; } html body.site-in-room > .dad #d2 .u-topic, html body.site-in-room > .dad #wall .u-topic, html body.site-in-room > .dad #chats .u-topic, html body.site-in-room > .dad .private-window .u-topic, html body.site-in-room > .dad .chat-announcement-name{ font-size:16px !important; line-height:21px !important; } html body.site-in-room > .dad #d2 .u-msg, html body.site-in-room > .dad #wall .u-msg, html body.site-in-room > .dad #chats .u-msg, html body.site-in-room > .dad .private-window .u-msg, html body.site-in-room > .dad .chat-announcement-body, html body.site-in-room > .dad .chat-announcement-text, html body.site-in-room > .dad .chat-reply-quote{ font-size:15px !important; line-height:20px !important; } html body.site-in-room > .dad #users .u-topic, html body.site-in-room > .dad #rooms .u-topic{ font-size:15px !important; line-height:19px !important; } html body.site-in-room > .dad > #room{ grid-template-rows:minmax(0,1fr) 37px 39px !important; } html body.site-in-room > .dad > #room > .tablebox.footer, html body.site-in-room > .dad > #room > .footer{ height:37px !important; min-height:37px !important; max-height:37px !important; gap:2px !important; padding:2px !important; } html body.site-in-room > .dad > #room > .footer > button, html body.site-in-room > .dad > #room > .tablebox.footer > button{ flex:0 0 32px !important; width:32px !important; min-width:32px !important; max-width:32px !important; height:32px !important; min-height:32px !important; max-height:32px !important; font-size:14px !important; } html body.site-in-room > .dad > #room > .footer > button.fa-send, html body.site-in-room > .dad > #room > .tablebox.footer > button.fa-send{ flex:0 0 auto !important; width:auto !important; min-width:54px !important; max-width:none !important; padding:0 5px !important; font-size:13px !important; } html body.site-in-room > .dad > #room > .footer > img.emobox, html body.site-in-room > .dad > #room > .tablebox.footer > img.emobox{ flex:0 0 32px !important; width:32px !important; min-width:32px !important; max-width:32px !important; height:32px !important; min-height:32px !important; max-height:32px !important; } html body.site-in-room > .dad > #room > .footer > #tbox, html body.site-in-room > .dad > #room > .tablebox.footer > #tbox{ height:32px !important; min-height:32px !important; max-height:32px !important; font-size:13px !important; line-height:21px !important; } html body.site-in-room > .dad > #room > #d0{ height:39px !important; min-height:39px !important; max-height:39px !important; gap:2px !important; padding:1px !important; } html body.site-in-room > .dad > #room > #d0 > .ae, html body.site-in-room > .dad > #room > #d0 > label, html body.site-in-room > .dad > #room > #d0 > button{ height:36px !important; min-height:36px !important; max-height:36px !important; gap:2px !important; padding:0 2px !important; font-size:13px !important; line-height:34px !important; } html body.site-in-room > .dad > #room > #d0 > label::before, html body.site-in-room > .dad > #room > #d0 > .ae::before{ font-size:14px !important; } html body.site-in-room > .dad > #room > #d0 > [data-target="#wall"] > .bwall, html body.site-in-room > .dad > #room > #d0 > [data-target="#users"] > .busers{ font-size:13px !important; } html body #memberBannerFramePanel.member-banner-frame-panel{ display:flex !important; top:max(8px,env(safe-area-inset-top,0px)) !important; bottom:max(8px,env(safe-area-inset-bottom,0px)) !important; height:auto !important; max-height:calc(100dvh - 16px) !important; flex-direction:column !important; overflow:hidden !important; } html body #memberBannerFramePanel.member-banner-frame-panel > .mbf-head{ flex:0 0 34px !important; height:34px !important; line-height:34px !important; } html body #memberBannerFramePanel.member-banner-frame-panel > .mbf-body{ flex:1 1 auto !important; height:auto !important; min-height:0 !important; overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior:contain !important; -webkit-overflow-scrolling:touch !important; } html body #memberBannerFramePanel.member-banner-frame-panel > .mbf-save-row{ position:relative !important; bottom:auto !important; z-index:8 !important; flex:0 0 auto !important; margin:0 !important; padding:7px 8px calc(7px + env(safe-area-inset-bottom,0px)) !important; border-top:1px solid #d5d5d5 !important; background:#eee !important; box-shadow:0 -3px 9px rgba(0,0,0,.1) !important; } html body.site-in-room > .dad #settings #voiceServerMode{order:1 !important;} html body.site-in-room > .dad #settings #voiceMicQuality{order:2 !important;} html body.site-in-room > .dad #settings #voiceChangerMode{order:3 !important;} html body.site-in-room > .dad #settings #vocalEffectsMode{order:4 !important;} html body.site-in-room > .dad #settings .voice-settings-actions > #voiceChangerMode, html body.site-in-room > .dad #settings .voice-settings-actions > #vocalEffectsMode{ border-color:var(--chat-template,var(--site-body-bg,#345c73)) !important; background:var(--chat-template,var(--site-body-bg,#345c73)) !important; color:#fff !important; } html body.site-in-room > .dad #settings #premiumFeaturesButton.premium-features-button{order:5 !important;} html body.site-in-room > .dad #settings .voice-settings-actions > #settingsAddonsButton{ order:6 !important; border:1px solid #bd79ff !important; background-color:#7634b7 !important; background-image:linear-gradient(112deg,#45176d 0%,#7634b7 35%,#bc7fff 55%,#7634b7 74%,#45176d 100%) !important; background-size:200% 100% !important; color:#fff !important; text-shadow:0 0 6px rgba(237,215,255,.7) !important; animation:addonsPurpleSweep 2.3s linear infinite,addonsPurplePulse 1.15s ease-in-out infinite alternate !important; } html body.site-in-room > .dad #settings .settings-change-pic{order:7 !important;} html body.site-in-room > .dad #settings .settings-delete-pic{order:8 !important;} html body.site-in-room > .dad #settings #voiceDisablePm{order:9 !important;} html body.site-in-room > .dad #settings #voiceDisableNot{order:10 !important;} html body.site-in-room > .dad #settings .voice-settings-actions .pmsg{order:11 !important;} html body.site-in-room > .dad #settings .voice-settings-actions .redit{order:12 !important;} html body.site-in-room > .dad #settings .voice-settings-actions .cp{order:13 !important;} html body.site-in-room > .dad #settings .settings-logout{order:14 !important;} @keyframes addonsPurpleSweep{ 0%{background-position:0% 50%;} 100%{background-position:200% 50%;} } @keyframes addonsPurplePulse{ from{box-shadow:0 0 4px rgba(159,91,238,.55);} to{box-shadow:0 0 13px rgba(188,126,255,.98),0 0 3px rgba(225,201,255,.85) inset;} } /* ===== END V230.22 ===== */ /* ===== V230.25 FULL PRESENCE RAIL + FRAMED MEMBER STATUS SQUARE ===== */ /* Ordinary profiles: the presence rail always covers the complete avatar/row height. */ html body.site-in-room #users .uzr:not(.member-has-frame) > .ustat, html body:not(.site-in-room) #tlogins .lonline .uzr:not(.member-has-frame) > .ustat{ position:absolute !important; top:0 !important; bottom:0 !important; left:0 !important; right:auto !important; display:block !important; width:4px !important; min-width:4px !important; max-width:4px !important; height:100% !important; min-height:100% !important; max-height:none !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; object-fit:fill !important; z-index:14 !important; } /* Framed profiles: use a compact square in the current presence-state color. */ html body.site-in-room #users .uzr.member-has-frame > .ustat, html body:not(.site-in-room) #tlogins .lonline .uzr.member-has-frame > .ustat{ position:absolute !important; top:1px !important; bottom:auto !important; left:0 !important; right:auto !important; display:block !important; width:13px !important; min-width:13px !important; max-width:13px !important; height:13px !important; min-height:13px !important; max-height:13px !important; margin:0 !important; padding:0 !important; border:1px solid rgba(255,255,255,.92) !important; border-radius:0 !important; box-sizing:border-box !important; object-fit:fill !important; box-shadow:0 0 0 1px rgba(0,0,0,.18) !important; z-index:15 !important; } /* ===== END V230.25 ===== */ /* ===== V230.26 REAL FULL-HEIGHT STATUS + BLINKING FRAME SQUARE ===== */ /* PreserveAspectRatio=none in the SVG lets this rail actually fill the avatar. */ html body.site-in-room #users .uzr:not(.member-has-frame) > .ustat{ top:0 !important; bottom:auto !important; width:4px !important; min-width:4px !important; max-width:4px !important; height:56px !important; min-height:56px !important; max-height:56px !important; border-radius:0 !important; object-fit:fill !important; } /* A framed member receives a true filled, sharp-cornered, blinking square. */ html body.site-in-room #users .uzr.member-has-frame > .ustat{ top:1px !important; left:0 !important; width:12px !important; min-width:12px !important; max-width:12px !important; height:12px !important; min-height:12px !important; max-height:12px !important; border:0 !important; border-radius:0 !important; box-shadow:0 0 0 1px rgba(255,255,255,.88),0 0 3px rgba(0,0,0,.24) !important; object-fit:fill !important; animation:memberPresenceSquareBlink .9s steps(1,end) infinite !important; z-index:18 !important; } @keyframes memberPresenceSquareBlink{ 0%,49%{opacity:1;} 50%,99%{opacity:.28;} 100%{opacity:1;} } /* Public/login front page: show member portraits and frames, never status rails. */ html body:not(.site-in-room) #tlogins .lonline .uzr > .ustat, html body:not(.site-in-room) #tlogins .lonline .uzr.member-has-frame > .ustat, html body:not(.site-in-room) #tlogins .lonline .uzr:not(.member-has-frame) > .ustat{ display:none !important; visibility:hidden !important; width:0 !important; min-width:0 !important; max-width:0 !important; height:0 !important; min-height:0 !important; max-height:0 !important; animation:none !important; } /* Logged-out pinned members keep the same complete uploaded-frame composite. */ html body:not(.site-in-room) #tlogins .lonline .uzr.member-frame-custom{ height:82px !important; min-height:82px !important; max-height:82px !important; padding-left:90px !important; overflow:hidden !important; } html body:not(.site-in-room) #tlogins .lonline .uzr.member-frame-custom > .member-avatar-composite{ display:block !important; visibility:visible !important; opacity:1 !important; left:3px !important; top:1px !important; width:80px !important; height:80px !important; } /* ===== END V230.26 ===== */ /* ===== V230.28 PROFILE IMAGE / BANNER / TRANSPARENT NAME COLORS ===== */ /* The uploaded banner is carried in a CSS variable so later theme rules cannot erase it. */ html body.site-in-room #users .uzr.member-has-cover, html body:not(.site-in-room) #tlogins .lonline .uzr.member-has-cover, html body #chats .uzr.member-has-cover{ background-image:var(--member-cover-image) !important; background-size:100% 100% !important; background-position:center center !important; background-repeat:no-repeat !important; background-color:transparent !important; } /* No white name pill unless white (or another color) was explicitly selected. */ html body #users .uzr .u-topic:not(.member-name-bg-enabled), html body #tlogins .lonline .uzr .u-topic:not(.member-name-bg-enabled), html body #d2 .msg:not(.adminmail) .u-topic:not(.member-name-bg-enabled), html body #d2 .mm:not(.adminmail) .u-topic:not(.member-name-bg-enabled){ background:transparent !important; background-color:transparent !important; background-image:none !important; box-shadow:none !important; } html body .u-topic.member-name-bg-enabled{ background-color:var(--member-name-bg,#ffffff) !important; } /* ===== V230.59 DECORATED MEMBER NAME BIDI FIX ===== Let the first strong character choose the visual direction. This keeps Arabic names RTL while names such as 𝐳𝒂𝒗𝒆ــــــ𝒏𝒅𝒆𝒓 in their typed order. */ html body.site-in-room #users .uzr .u-topic, html body:not(.site-in-room) #tlogins .lonline .uzr .u-topic{ direction:ltr !important; unicode-bidi:plaintext !important; } /* ===== END V230.59 ===== */ /* ===== V230.60 KARAOKE TALENT + 3D BATTLE ===== */ #freshVoiceBar .fresh-karaoke-btn{position:relative;flex:0 0 76px;height:39px;margin:0 2px;border:1px solid #0b2c46;border-radius:3px;background:linear-gradient(145deg,#7224ad,#d62f90);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:3px;font:bold 10px "Times New Roman",Times,serif;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)} #freshVoiceBar .fresh-karaoke-btn span{font-size:20px;line-height:1}#freshVoiceBar .fresh-karaoke-btn b{font-size:10px;white-space:nowrap} #freshVoiceBar .fresh-karaoke-btn.active{background:linear-gradient(135deg,#ff1f72,#ff9d00);animation:karaokeButtonPulse 1s infinite} @keyframes karaokeButtonPulse{50%{box-shadow:0 0 14px #ff3a8c,inset 0 0 0 2px #fff;transform:translateY(-1px)}} #freshVoiceBar .fresh-mic-seat.speaking{z-index:4;animation:micSpeakingPulse .48s ease-in-out infinite alternate!important;filter:saturate(1.35) brightness(1.13)!important} #freshVoiceBar .fresh-mic-seat.speaking:after{content:' ';position:absolute;inset:-3px;border:3px solid #39ff88;border-radius:5px;box-shadow:0 0 5px #39ff88,0 0 13px #18e96c,0 0 22px rgba(38,255,129,.8);pointer-events:none} @keyframes micSpeakingPulse{from{transform:scale(.97);box-shadow:0 0 4px #39ff88!important}to{transform:scale(1.045);box-shadow:0 0 18px #39ff88!important}} .karaoke-competition-panel{position:fixed;top:52px;right:8px;width:440px;max-width:calc(100vw - 16px);max-height:calc(100vh - 65px);overflow:auto;z-index:360000;background:radial-gradient(circle at top,#32145b,#12091f 68%);border:2px solid #e8b5ff;border-radius:12px;color:#fff;direction:rtl;box-shadow:0 10px 35px rgba(0,0,0,.55);font-family:"Times New Roman",Times,serif} .karaoke-head{position:sticky;top:0;z-index:4;display:grid;grid-template-columns:minmax(0,1fr) auto 32px;align-items:center;gap:7px;height:40px;padding:0 8px;background:linear-gradient(90deg,#7b24b2,#d82b8d);box-sizing:border-box}.karaoke-head b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.karaoke-clock{padding:4px 8px;border-radius:12px;background:#090611;font:bold 12px monospace}.karaoke-close{width:28px;height:28px;border:0;border-radius:50%;background:#e44b52;color:#fff;font-size:21px;line-height:25px} .karaoke-title{text-align:center;padding:7px;color:#ffe176;font:bold 16px "Times New Roman",Times,serif;text-shadow:0 0 8px #ff4fce}.karaoke-contestants{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:7px}.karaoke-contestant{position:relative;min-width:0;padding:8px;border:1px solid rgba(255,255,255,.25);border-radius:11px;background:linear-gradient(155deg,rgba(255,255,255,.13),rgba(0,0,0,.24));text-align:center;overflow:hidden;transition:.2s}.karaoke-contestant.speaking{border-color:#4cff91;box-shadow:0 0 18px rgba(76,255,145,.72),inset 0 0 14px rgba(76,255,145,.18);transform:translateY(-2px)}.karaoke-contestant.winner{border-color:#ffe269;box-shadow:0 0 18px #e2b100}.karaoke-contestant.winner:before{content:'🏆';position:absolute;top:4px;left:5px;font-size:23px}.karaoke-stage-number{position:absolute;top:5px;right:6px;width:22px;height:22px;border-radius:50%;background:#ff328a;line-height:22px;font-weight:bold}.karaoke-contestant>img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 0 11px rgba(255,255,255,.55)}.karaoke-name{display:block;height:25px;line-height:25px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:15px}.karaoke-points{display:grid;grid-template-columns:1fr 1fr auto;gap:3px;align-items:center;margin:4px 0;font-size:11px}.karaoke-points span{padding:4px;border-radius:8px;background:rgba(0,0,0,.35)}.karaoke-points strong{padding:4px 6px;border-radius:8px;background:#f7c928;color:#271800}.karaoke-like{width:100%;height:32px;border:0;border-radius:16px;background:linear-gradient(90deg,#ff1f68,#ff5a91);color:#fff;font-weight:bold}.karaoke-judge-vote{display:flex;gap:4px;margin-top:5px}.karaoke-score-select{width:62px;height:29px;background:#fff;color:#111;border:0;border-radius:5px}.karaoke-vote{flex:1;border:0;border-radius:5px;background:#ffc928;color:#211400;font-weight:bold}.karaoke-judges{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:7px;border-top:1px solid rgba(255,255,255,.15);font-size:11px}.karaoke-judge{display:inline-flex;align-items:center;gap:3px;padding:3px 6px;border-radius:13px;background:#34204a}.karaoke-judge.voted{background:#087f4b}.karaoke-judge img{width:21px;height:21px;border-radius:50%;object-fit:cover}.karaoke-actions{padding:7px;text-align:center}.karaoke-end-round{border:0;border-radius:7px;padding:8px 15px;background:#d8454d;color:#fff;font-weight:bold}.karaoke-float-heart{position:absolute;bottom:30px;left:50%;z-index:6;color:#ff347c;font-size:25px;font-style:normal;pointer-events:none;animation:karaokeHeartFly .85s forwards}@keyframes karaokeHeartFly{to{transform:translate(-35px,-90px) rotate(-20deg) scale(1.8);opacity:0}} .karaoke-start-modal{position:fixed;inset:0;z-index:470000;background:rgba(4,0,12,.72);display:flex;align-items:center;justify-content:center;padding:10px;direction:rtl}.karaoke-start-card{width:460px;max-width:96vw;max-height:94vh;overflow:auto;padding:14px;border:2px solid #e8b5ff;border-radius:13px;background:linear-gradient(160deg,#39125e,#13091f);color:#fff;box-shadow:0 12px 40px #000}.karaoke-start-card h3{text-align:center;color:#ffe56e;margin:3px 0 12px}.karaoke-start-card h4{margin:10px 0 5px}.karaoke-start-card label{display:block;margin:5px 0;font-weight:bold}.karaoke-start-card input,.karaoke-start-card select{width:100%;height:35px;border:1px solid #b895cf;border-radius:6px;background:#fff;color:#111;padding:3px 6px;box-sizing:border-box}.karaoke-start-grid,.karaoke-judge-picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.karaoke-start-actions{display:flex;gap:7px;margin-top:12px}.karaoke-start-actions button{flex:1;height:38px;border:0;border-radius:7px;color:#fff;font-weight:bold}.karaoke-start-confirm{background:#1ba964}.karaoke-start-cancel{background:#d64a52} .battle-round-intro{position:fixed;inset:0;z-index:900000;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle,rgba(93,20,132,.92),rgba(5,2,12,.96));color:#fff;perspective:900px;direction:ltr;transition:.6s}.battle-round-intro.leave{opacity:0;transform:scale(1.22)}.round-rays{position:absolute;width:150vmax;height:150vmax;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.13) 0 5deg,transparent 5deg 14deg);animation:roundRaySpin 10s linear infinite}.live-round-intro{background:radial-gradient(circle,rgba(12,108,141,.94),rgba(2,10,19,.97))}.round-title{position:relative;font:900 clamp(22px,5vw,54px) "Times New Roman",Times,serif;color:#ffe15b;text-shadow:0 0 8px #ff8c00,0 0 28px #ff3c94;animation:roundTitleDrop .55s both}.round-versus{position:relative;display:flex;align-items:center;gap:clamp(18px,7vw,70px);margin:24px 0}.round-versus>div{display:flex;flex-direction:column;align-items:center;gap:7px;width:130px;text-align:center}.round-versus img{width:90px;height:90px;border-radius:50%;border:4px solid #fff;object-fit:cover;box-shadow:0 0 25px #fa4bd8}.round-versus strong{font:900 46px Impact;color:#ffdf39;text-shadow:3px 3px 0 #b10b61;animation:versusBeat .65s infinite alternate}.round-countdown{position:relative;width:88px;height:88px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#f72585;border:5px solid #fff;font:900 42px Impact;box-shadow:0 0 30px #f72585;animation:versusBeat .7s infinite alternate}@keyframes roundRaySpin{to{transform:rotate(360deg)}}@keyframes roundTitleDrop{from{transform:translateY(-70px) rotateX(-70deg);opacity:0}}@keyframes versusBeat{to{transform:scale(1.16)}} .live-gift-3d-layer{position:fixed;inset:0;z-index:920000;display:flex;align-items:center;justify-content:center;pointer-events:none;background:radial-gradient(circle,rgba(125,41,181,.26),transparent 65%);opacity:0;perspective:1000px;transition:.45s}.live-gift-3d-layer.show{opacity:1}.live-gift-3d-layer.leave{opacity:0;transform:scale(1.18)}.gift-3d-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:min(380px,88vw);height:min(380px,70vh);transform-style:preserve-3d;animation:giftStageEntry .8s cubic-bezier(.2,1.5,.4,1) both}.gift-3d-icon{position:relative;z-index:3;transform-style:preserve-3d;animation:giftIcon3d 2.2s ease-in-out infinite}.gift-3d-icon img{width:min(190px,48vw);height:min(190px,48vw);object-fit:contain;filter:drop-shadow(0 18px 15px rgba(0,0,0,.55)) drop-shadow(0 0 18px #ffda4b)}.gift-3d-icon>span{display:block;font-size:min(150px,38vw);filter:drop-shadow(0 16px 12px rgba(0,0,0,.55))}.gift-3d-ring{position:absolute;width:270px;height:270px;border:9px solid rgba(255,213,56,.75);border-left-color:#f72585;border-radius:50%;transform:rotateX(72deg) translateZ(-30px);box-shadow:0 0 30px #ffd93d;animation:giftRingSpin 1.6s linear infinite}.gift-3d-stage>b{position:relative;z-index:4;margin-top:10px;padding:7px 15px;border-radius:18px;background:rgba(0,0,0,.72);color:#fff;font-size:17px}.gift-3d-stage>strong{position:relative;z-index:4;margin-top:5px;color:#ffe35f;font:900 23px "Times New Roman",Times,serif;text-shadow:0 0 10px #ff6b00}.gift-3d-stars{position:absolute;inset:0}.gift-3d-stars i{position:absolute;left:calc(3% + (var(--i) * 5.2%));top:calc(8% + (var(--i) * 4.3%));color:#ffe760;font-size:18px;animation:giftStar 1.2s calc(var(--i)*-.07s) infinite alternate}.lion-gift{background:radial-gradient(circle,rgba(255,123,0,.4),rgba(37,4,0,.42),transparent 72%)}.lion-gift .gift-3d-icon img{width:min(270px,65vw);height:min(270px,65vw);filter:drop-shadow(0 22px 20px #000) drop-shadow(0 0 32px #ff9500)}.lion-gift .gift-3d-ring{width:330px;height:330px;border-color:#ffaf18;border-left-color:#fff1a8}@keyframes giftStageEntry{from{transform:translateZ(-700px) rotateY(-70deg) scale(.25);opacity:0}to{transform:translateZ(0) rotateY(0) scale(1);opacity:1}}@keyframes giftIcon3d{0%,100%{transform:rotateY(-17deg) translateZ(35px) translateY(0)}50%{transform:rotateY(17deg) translateZ(70px) translateY(-13px)}}@keyframes giftRingSpin{to{transform:rotateX(72deg) rotateZ(360deg) translateZ(-30px)}}@keyframes giftStar{to{transform:translateY(-22px) scale(1.6) rotate(80deg);opacity:.25}} @media(max-width:520px){#freshVoiceBar .fresh-karaoke-btn{flex-basis:48px;width:48px;min-width:48px}#freshVoiceBar .fresh-karaoke-btn b{display:none}.karaoke-competition-panel{top:43px;right:3px;max-width:calc(100vw - 6px);max-height:calc(100vh - 48px)}.karaoke-contestants{gap:4px;padding:4px}.karaoke-contestant{padding:5px}.karaoke-contestant>img{width:52px;height:52px}.karaoke-points{grid-template-columns:1fr 1fr}.karaoke-points strong{grid-column:1/3}.karaoke-start-grid,.karaoke-judge-picks{grid-template-columns:1fr}.round-versus>div{width:94px}.round-versus img{width:72px;height:72px}.gift-3d-stage{height:330px}} @media(prefers-reduced-motion:reduce){#freshVoiceBar .fresh-mic-seat.speaking,.battle-round-intro *,.live-gift-3d-layer *{animation-duration:.01ms!important;animation-iteration-count:1!important}} /* ===== END V230.60 ===== */ #settings .settings-profile-reset-colors{ display:flex !important; align-items:center !important; justify-content:center !important; float:none !important; width:100% !important; min-height:34px !important; margin:5px 0 0 !important; border:1px solid #9e3333 !important; border-radius:0 !important; background:#d9534f !important; color:#fff !important; font:bold 13px "Times New Roman",Times,serif !important; } .chat-color-none{ position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; background:#f4f4f4 !important; color:#e00000 !important; font:bold 25px/1 "Times New Roman",Times,serif !important; } .member-color-reset-v86{color:#fff !important;background:#d9534f !important;} /* ===== END V230.28 ===== */ /* ===== V230.36 SHARED IMAGE ROOM / MESSAGE BANNER ===== */ #mkr .th-mkr-content{max-height:calc(100vh - 36px)!important;overflow:hidden!important;} #mkr .th-mkr-body{max-height:calc(100vh - 86px)!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;} html body.site-in-room #rooms .room.room-has-full-banner, html body.site-in-room #rooms [class*=" r"].room-has-full-banner{ position:relative!important; display:block!important; width:100%!important; height:auto!important; min-height:0!important; aspect-ratio:2/1!important; padding:0!important; margin:0!important; overflow:hidden!important; background:#111!important; cursor:pointer!important; } html body.site-in-room #rooms .room-has-full-banner .room-full-banner{ position:absolute!important; inset:0!important; display:block!important; width:100%!important; height:100%!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; object-fit:fill!important; image-rendering:auto!important; z-index:1!important; } html body.site-in-room #rooms .room-has-full-banner .room-banner-count{ position:absolute!important; right:auto!important; left:50%!important; top:auto!important; bottom:4px!important; transform:translateX(-50%)!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:3px!important; min-width:66px!important; height:34px!important; padding:0 7px!important; color:#fff!important; border-radius:4px!important; font:bold 15px/34px "Times New Roman",Times,serif!important; z-index:4!important; } html body.site-in-room #rooms .room-has-full-banner .room-banner-count *{color:#fff!important;} /* A message banner is the existing message image itself. No avatar, title or description is drawn over artwork that already contains its own wording. */ html body.site-in-room #d2 .adminmail.admin-message-banner, html body.site-in-room #d2 .admin-public-msg.admin-message-banner, html body.site-in-room #d2 .admin-welcome-msg.admin-message-banner{ display:block!important; width:100%!important; min-height:0!important; height:auto!important; margin:0!important; padding:0!important; border:1px solid #bfd2f6!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; overflow:hidden!important; box-sizing:border-box!important; } html body.site-in-room #d2 .admin-message-banner .admin-message-banner-link{ display:block!important; width:100%!important; height:auto!important; margin:0!important; padding:0!important; line-height:0!important; } html body.site-in-room #d2 .admin-message-banner .admin-message-banner-image{ display:block!important; width:100%!important; max-width:100%!important; height:auto!important; max-height:none!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; object-fit:fill!important; image-rendering:auto!important; } /* ===== END V230.36 ===== */ /* ===== V230.37 RELIABLE FULL BANNERS + THEMED PANEL BARS ===== */ /* The saved room image becomes the full room tile. No room name or description is placed over artwork that already contains them. */ html body.site-in-room #rooms .room.room-has-full-banner{ height:210px!important; min-height:210px!important; aspect-ratio:auto!important; padding:0!important; background:#111!important; } html body.site-in-room #rooms .room.room-has-full-banner > .room-full-banner{ position:absolute!important; inset:0!important; display:block!important; width:100%!important; max-width:none!important; height:100%!important; max-height:none!important; object-fit:fill!important; margin:0!important; padding:0!important; border:0!important; } /* The banner image is the complete message row, with all old avatar/title/body elements removed by the renderer. */ html body.site-in-room #d2 .admin-message-banner{ min-height:64px!important; } html body.site-in-room #d2 .admin-message-banner > .admin-message-banner-link, html body.site-in-room #d2 .admin-message-banner > .admin-message-banner-link > .admin-message-banner-image{ display:block!important; width:100%!important; max-width:none!important; min-height:64px!important; margin:0!important; padding:0!important; } /* Replace the hard-coded red/green bars with the chat template color selected in the control panel. */ html body.site-in-room #rooms > .bgg:first-child, html body.site-in-room #rooms > .label-primary:first-child{ background:var(--chat-template,var(--theme-header-bg,#345c73))!important; background-image:none!important; border-color:var(--chat-template,var(--theme-header-bg,#345c73))!important; } html body.site-in-room .kashf-popup-themed > .head, html body.site-in-room .mobile-kashf-pop.kashf-popup-themed > .head{ background:var(--chat-template,var(--theme-header-bg,#345c73))!important; background-image:none!important; border-color:var(--chat-template,var(--theme-header-bg,#345c73))!important; color:#fff!important; } html body.site-in-room .kashf-popup-themed > .head .title{color:#fff!important;} /* ===== END V230.37 ===== */ /* ===== V230.44 POPUP STACK ===== Cloned popups do not retain the hidden #pop/#not template id. Give the actual visible window a shared stacking hook, without observers or extra touch handlers on the message stream. */ html body.site-in-room .chat-front-popup{ z-index:2147483500!important; pointer-events:auto!important; isolation:isolate!important; } html body.site-in-room .chat-front-popup, html body.site-in-room .chat-front-popup *{ -webkit-tap-highlight-color:transparent; } /* ===== END V230.44 ===== */ /* ===== V230.46 SEPARATE SUPERVISOR ROW BANNER ===== This is deliberately separate from the existing member background and frame. The row keeps its click handler so the normal profile still opens. */ html body.site-in-room #users > .uzr.member-has-row-banner, html body:not(.site-in-room) #tlogins .lonline > .uzr.member-has-row-banner{ display:block!important; position:relative!important; width:100%!important; height:92px!important; min-height:92px!important; max-height:92px!important; padding:0!important; overflow:hidden!important; cursor:pointer!important; background-image:var(--member-row-banner-image)!important; background-size:100% 100%!important; background-position:center center!important; background-repeat:no-repeat!important; background-color:transparent!important; } html body.site-in-room #users > .uzr.member-has-row-banner > *, html body:not(.site-in-room) #tlogins .lonline > .uzr.member-has-row-banner > *{ visibility:hidden!important; pointer-events:none!important; } .member-row-banner-panel .member-row-banner-help{ margin:0 0 10px; padding:9px; border:1px solid #d7dce3; background:#f6f8fb; color:#34495e; text-align:right; font-size:13px; line-height:1.55; } .member-row-banner-panel .member-row-banner-preview{ width:100%; height:92px; display:flex; align-items:center; justify-content:center; overflow:hidden; border:2px solid #345c73; background:#fff; color:#777; } .member-row-banner-panel .member-row-banner-preview img{ display:block; width:100%; height:100%; object-fit:fill; } html body.site-in-room #settings .settings-member-row-banner{order:5!important;} /* ===== END V230.46 ===== */ /* ===== V230.39 SAME-FILE RESPONSIVE BANNER OVERRIDE ===== */ /* These rules stay in the normal chat stylesheet. High specificity prevents older compact room rules from restoring the thumbnail layout. */ html body.site-in-room .dpnl #rooms > .room.room-has-full-banner, html body.site-in-room .dad .dpnl #rooms > .room.room-has-full-banner{ position:relative!important; display:block!important; float:none!important; clear:both!important; width:100%!important; max-width:100%!important; height:210px!important; min-height:210px!important; max-height:210px!important; aspect-ratio:auto!important; padding:0!important; margin:0!important; overflow:hidden!important; background:#111!important; } html body.site-in-room .dpnl #rooms > .room.room-has-full-banner > img.room-full-banner, html body.site-in-room .dad .dpnl #rooms > .room.room-has-full-banner > img.room-full-banner{ position:absolute!important; inset:0!important; top:0!important; right:0!important; bottom:0!important; left:0!important; display:block!important; float:none!important; width:100%!important; min-width:100%!important; max-width:none!important; height:100%!important; min-height:100%!important; max-height:none!important; object-fit:fill!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; z-index:1!important; } html body.site-in-room .dad #d2 > .msg.admin-message-banner, html body.site-in-room .dad #d2 > .mm.admin-message-banner, html body.site-in-room .dad #d2 > .adminmail.admin-message-banner{ position:relative!important; display:block!important; width:100%!important; max-width:100%!important; height:auto!important; min-height:64px!important; margin:0!important; padding:0!important; overflow:hidden!important; background:transparent!important; box-sizing:border-box!important; } html body.site-in-room .dad #d2 > .admin-message-banner > .admin-message-banner-link, html body.site-in-room .dad #d2 > .admin-message-banner > .admin-message-banner-link > img.admin-message-banner-image{ display:block!important; float:none!important; width:100%!important; min-width:100%!important; max-width:none!important; height:auto!important; min-height:64px!important; max-height:none!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; object-fit:fill!important; line-height:0!important; } /* ===== END V230.39 SAME-FILE BANNERS ===== */ /* ===== V230.40 ROOM WELCOME CARD + MESSAGE BANNER ROUTE ===== */ /* Room welcomes are normal in-chat rows, never floating notices. Keep the room picture and the familiar red underlined welcome title. */ html body.site-in-room #d2 > .room-welcome-message{ display:block!important; width:100%!important; min-height:44px!important; height:auto!important; box-sizing:border-box!important; } html body.site-in-room #d2 > .room-welcome-message .u-pic{ display:block!important; width:46px!important; height:46px!important; margin:1px!important; object-fit:cover!important; background-size:cover!important; background-position:center!important; } html body.site-in-room #d2 > .room-welcome-message .u-topic{ color:#d00000!important; font-weight:700!important; text-decoration:underline!important; } html body.site-in-room #d2 > .room-welcome-message .u-msg{ color:#111!important; } /* Banner artwork is the complete message box. This selector intentionally covers the exact direct row produced through the public-message channel. */ html body.site-in-room #d2 > .admin-message-banner, html body.site-in-room .dad #d2 > .admin-message-banner{ display:block!important; width:100%!important; max-width:100%!important; height:auto!important; min-height:64px!important; margin:0!important; padding:0!important; overflow:hidden!important; background:transparent!important; box-sizing:border-box!important; } html body.site-in-room #d2 > .admin-message-banner > .admin-message-banner-link, html body.site-in-room #d2 > .admin-message-banner > .admin-message-banner-link > .admin-message-banner-image{ display:block!important; float:none!important; width:100%!important; min-width:100%!important; max-width:none!important; height:auto!important; min-height:64px!important; max-height:none!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; object-fit:fill!important; line-height:0!important; } /* ===== END V230.40 ===== */ /* ===== V230.41 CLEAN PICTURES + NORMAL MESSAGE-SIZE BANNER ===== */ /* Empty alt text and zero text metrics prevent browsers from printing member or room names over delayed image elements. */ html body img.u-pic, html body img.room-pic, html body img.room-full-banner, html body img.admin-message-banner-image{ color:transparent!important; text-indent:-9999px!important; font-size:0!important; line-height:0!important; } /* The banner fills one normal 52px chat row on desktop and mobile. */ html body.site-in-room #d2 > .admin-message-banner, html body.site-in-room .dad #d2 > .admin-message-banner{ height:52px!important; min-height:52px!important; max-height:52px!important; } html body.site-in-room #d2 > .admin-message-banner > .admin-message-banner-link, html body.site-in-room #d2 > .admin-message-banner > .admin-message-banner-link > .admin-message-banner-image, html body.site-in-room .dad #d2 > .admin-message-banner > .admin-message-banner-link, html body.site-in-room .dad #d2 > .admin-message-banner > .admin-message-banner-link > .admin-message-banner-image{ width:100%!important; min-width:100%!important; max-width:100%!important; height:52px!important; min-height:52px!important; max-height:52px!important; object-fit:fill!important; overflow:hidden!important; } /* ===== END V230.41 ===== */ /* ===== V230.48 MMZ SITE RIGHTS ===== */ /* The rights bar is a light, fixed flex child below the scrollable online list. */ html body:not(.site-in-room) #tlogins > #siteRights.site-rights{ order:26!important; position:relative!important; z-index:3!important; display:flex!important; flex:0 0 auto!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; width:100%!important; min-height:42px!important; margin:0!important; padding:5px 8px 4px!important; box-sizing:border-box!important; border:0!important; border-top:1px solid rgba(69,91,118,.24)!important; border-radius:0!important; background:var(--chat-content,var(--site-content-bg,#fff))!important; color:var(--chat-text,var(--theme-text,#26374a))!important; text-align:center!important; font-family:"Times New Roman",Times,serif!important; line-height:1.2!important; overflow:hidden!important; } html body:not(.site-in-room) #siteRights .site-rights-name{ display:block!important; max-width:100%!important; color:inherit!important; font-size:12px!important; font-weight:400!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } html body:not(.site-in-room) #siteRights .site-rights-name a{ color:var(--site-button-bg,var(--theme-primary,var(--m-primary,#2a73b4)))!important; font-weight:700!important; text-decoration:none!important; } html body:not(.site-in-room) #siteRights .site-rights-name a:hover, html body:not(.site-in-room) #siteRights .site-rights-name a:focus{ text-decoration:underline!important; outline:none!important; } html body:not(.site-in-room) #siteRights .site-rights-tagline{ display:block!important; max-width:100%!important; margin-top:2px!important; color:inherit!important; font-size:11px!important; font-weight:400!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; opacity:.78!important; } /* ===== END V230.48 ===== */ /* ===== V230.49 ALL CHAT BUTTONS FOLLOW ADMIN BUTTON COLOR ===== */ /* Native buttons and button-like controls inherit only the domain's button color. Layout, icons and microphone artwork remain untouched. */ html body.site-in-room button:not(#chatButtonThemeGuard1):not(#chatButtonThemeGuard2):not(#chatButtonThemeGuard3), html body.site-in-room input[type="button"]:not(#chatButtonThemeGuard1):not(#chatButtonThemeGuard2):not(#chatButtonThemeGuard3), html body.site-in-room input[type="submit"]:not(#chatButtonThemeGuard1):not(#chatButtonThemeGuard2):not(#chatButtonThemeGuard3), html body.site-in-room .btn:not(#chatButtonThemeGuard1):not(#chatButtonThemeGuard2):not(#chatButtonThemeGuard3), html body.site-in-room .ae:not(#chatButtonThemeGuard1):not(#chatButtonThemeGuard2):not(#chatButtonThemeGuard3), html body.site-in-room .voice-setting-btn:not(#chatButtonThemeGuard1):not(#chatButtonThemeGuard2):not(#chatButtonThemeGuard3), html body.site-in-room .chat-message-action:not(#chatButtonThemeGuard1):not(#chatButtonThemeGuard2):not(#chatButtonThemeGuard3), html body.site-in-room a.sendbtn:not(#chatButtonThemeGuard1):not(#chatButtonThemeGuard2):not(#chatButtonThemeGuard3), html body.site-in-room label.sendbtn:not(#chatButtonThemeGuard1):not(#chatButtonThemeGuard2):not(#chatButtonThemeGuard3), html body.site-in-room .label-danger:not(#chatButtonThemeGuard1):not(#chatButtonThemeGuard2):not(#chatButtonThemeGuard3){ background-color:var(--chat-buttons,var(--site-button-bg,#438ac7))!important; color:#fff!important; border-color:var(--chat-buttons,var(--site-button-bg,#438ac7))!important; } /* These old rules used template, green, red, blue, gold or purple backgrounds. Bind them explicitly with equal/higher specificity to the admin button color. */ html body.site-in-room > .dad > #room > #d0 > .ae, html body.site-in-room > .dad > #room > #d0 > label, html body.site-in-room > .dad > #room > #d0 > button, html body.site-in-room > .dad > #room > .footer > #btnLeaveRoom, html body.site-in-room > .dad > #room > .tablebox.footer > #btnLeaveRoom, html body.site-in-room > .dad #settings .settings-profile-field > .label, html body.site-in-room > .dad #settings .settings-profile-color-row > .label, html body.site-in-room > .dad #settings #chatZoomSize, html body.site-in-room > .dad #settings #chatZoomSize option, html body.site-in-room > .dad #settings .voice-settings-actions > .voice-setting-select, html body.site-in-room > .dad #settings .voice-settings-actions > .voice-setting-select option, html body.site-in-room > .dad #settings .voice-settings-actions > .voice-setting-btn, html body.site-in-room > .dad #settings .settings-profile-save, html body.site-in-room > .dad #settings .settings-profile-reset-colors, html body.site-in-room > .dad #settings .settings-addon-entry, html body.site-in-room > .dad #settings .settings-addon-entry option, html body.site-in-room > .dad #settings .settings-inner-back, html body.site-in-room > .dad #settings #premiumFeaturesButton.premium-features-button, html body.site-in-room > .dad #settings .voice-settings-actions > #settingsAddonsButton, html body.site-in-room #premiumFeaturesOverlay .premium-feature-option, html body.site-in-room #premiumFeaturesOverlay .premium-feature-close{ background-color:var(--chat-buttons,var(--site-button-bg,#438ac7))!important; background-image:none!important; color:#fff!important; border-color:var(--chat-buttons,var(--site-button-bg,#438ac7))!important; text-shadow:none!important; } /* Keep custom mic/voice artwork while binding the button surface beneath it. */ html body.site-in-room #freshVoiceBar#freshVoiceBar > button, html body.site-in-room #freshVoiceBar#freshVoiceBar > .fresh-mic-seat, html body.site-in-room #freshVoiceSeatMenu#freshVoiceSeatMenu > button{ background-color:var(--chat-buttons,var(--site-button-bg,#438ac7))!important; border-color:var(--chat-buttons,var(--site-button-bg,#438ac7))!important; } /* ===== END V230.49 ===== */ /* ===== V230.50 RESTORE INTENTIONAL SETTINGS BUTTON PALETTE ===== */ /* Only these settings controls keep their original colors. All other chat controls continue to follow --chat-buttons from the admin panel. */ html body.site-in-room #settings .settings-profile-save:not(#settingsColorGuard1):not(#settingsColorGuard2):not(#settingsColorGuard3){ background-color:#5abd61!important; background-image:none!important; color:#fff!important; border-color:#16651f!important; } html body.site-in-room #settings .settings-profile-reset-colors:not(#settingsColorGuard1):not(#settingsColorGuard2):not(#settingsColorGuard3){ background-color:#d9534f!important; background-image:none!important; color:#fff!important; border-color:#9e3333!important; } html body.site-in-room #settings .settings-change-pic:not(#settingsColorGuard1):not(#settingsColorGuard2):not(#settingsColorGuard3), html body.site-in-room #settings #voiceDisablePm:not(#settingsColorGuard1):not(#settingsColorGuard2):not(#settingsColorGuard3), html body.site-in-room #settings #voiceDisableNot:not(#settingsColorGuard1):not(#settingsColorGuard2):not(#settingsColorGuard3), html body.site-in-room #settings .voice-settings-actions .pmsg:not(#settingsColorGuard1):not(#settingsColorGuard2):not(#settingsColorGuard3), html body.site-in-room #settings .voice-settings-actions .redit:not(#settingsColorGuard1):not(#settingsColorGuard2):not(#settingsColorGuard3), html body.site-in-room #settings .voice-settings-actions .cp:not(#settingsColorGuard1):not(#settingsColorGuard2):not(#settingsColorGuard3){ background-color:#f8f8ff!important; background-image:none!important; color:#111!important; border-color:#222!important; text-shadow:none!important; } html body.site-in-room #settings .settings-delete-pic:not(#settingsColorGuard1):not(#settingsColorGuard2):not(#settingsColorGuard3){ background-color:#d9534f!important; background-image:none!important; color:#000!important; border-color:#222!important; text-shadow:none!important; } html body.site-in-room #settings .settings-member-row-banner:not(#settingsColorGuard1):not(#settingsColorGuard2):not(#settingsColorGuard3){ background-color:#3fb4e8!important; background-image:none!important; color:#fff!important; border-color:#222!important; text-shadow:none!important; } html body.site-in-room #settings .settings-logout:not(#settingsColorGuard1):not(#settingsColorGuard2):not(#settingsColorGuard3){ background-color:#d64a55!important; background-image:none!important; color:#fff!important; border-color:#222!important; text-shadow:none!important; } html body.site-in-room #settings #premiumFeaturesButton:not(#settingsColorGuard1):not(#settingsColorGuard2):not(#settingsColorGuard3){ border-color:#d7b74c!important; background-color:#101008!important; background-image:linear-gradient(108deg,#080808 4%,#151409 35%,#695509 52%,#d4b43c 70%,#f2d866 79%,#111009 96%)!important; background-size:220% 100%!important; color:#fff3bf!important; text-shadow:0 0 8px rgba(255,217,100,.62)!important; animation:premiumGoldSweep 2.5s linear infinite,premiumGoldPulse 1.3s ease-in-out infinite alternate!important; } html body.site-in-room #settings #settingsAddonsButton:not(#settingsColorGuard1):not(#settingsColorGuard2):not(#settingsColorGuard3){ border-color:#bd79ff!important; background-color:#7634b7!important; background-image:linear-gradient(112deg,#45176d 0%,#7634b7 35%,#bc7fff 55%,#7634b7 74%,#45176d 100%)!important; background-size:200% 100%!important; color:#fff!important; text-shadow:0 0 6px rgba(237,215,255,.7)!important; animation:addonsPurpleSweep 2.3s linear infinite,addonsPurplePulse 1.15s ease-in-out infinite alternate!important; } html body.site-in-room #settings #notificationsButton:not(#settingsColorGuard1):not(#settingsColorGuard2):not(#settingsColorGuard3){ background-color:#dd738e!important; background-image:none!important; color:#fff!important; border-color:#dd738e!important; } html body.site-in-room #settings #gamesButton:not(#settingsColorGuard1):not(#settingsColorGuard2):not(#settingsColorGuard3){ background-color:#277b68!important; background-image:none!important; color:#fff!important; border-color:#277b68!important; } html body.site-in-room #settings #voiceChangerMode, html body.site-in-room #settings #voiceChangerMode option, html body.site-in-room #settings #vocalEffectsMode, html body.site-in-room #settings #vocalEffectsMode option{ background-color:#a30544!important; background-image:none!important; color:#fff!important; border-color:#a30544!important; } /* ===== END V230.50 ===== */ /* ===== V230.51 CLASSIC SPEAKER + MUSIC BUTTON COLORS ===== */ html body.site-in-room #freshVoiceBar .fresh-speaker:not(#voiceClassicColorGuard1):not(#voiceClassicColorGuard2):not(#voiceClassicColorGuard3){ background-color:#2ec265!important; background-image:none!important; color:#000!important; border-color:#082a37!important; } html body.site-in-room #freshVoiceBar .fresh-speaker.muted:not(#voiceClassicColorGuard1):not(#voiceClassicColorGuard2):not(#voiceClassicColorGuard3){ background-color:#d94a4a!important; } html body.site-in-room #freshVoiceBar .fresh-speaker i{ color:#000!important; } html body.site-in-room #freshVoiceBar .fresh-music-btn:not(#voiceClassicColorGuard1):not(#voiceClassicColorGuard2):not(#voiceClassicColorGuard3){ background-color:#10294d!important; background-image:none!important; color:#ffd95a!important; border-color:#082a37!important; } html body.site-in-room #freshVoiceBar .fresh-music-btn.playing:not(#voiceClassicColorGuard1):not(#voiceClassicColorGuard2):not(#voiceClassicColorGuard3){ background-color:#1fb35b!important; } html body.site-in-room #freshVoiceBar .fresh-music-btn i{ color:#ffd95a!important; } /* ===== END V230.51 ===== */ /* ===== V230.52 CLASSIC SEPARATED BUTTON SHAPE ===== */ html body.site-in-room > .dad > #room > #d0{ gap:2px!important; padding:1px!important; } html body.site-in-room > .dad > #room > #d0 > .ae:not(#classicButtonShapeGuard1):not(#classicButtonShapeGuard2):not(#classicButtonShapeGuard3), html body.site-in-room > .dad > #room > #d0 > label:not(#classicButtonShapeGuard1):not(#classicButtonShapeGuard2):not(#classicButtonShapeGuard3), html body.site-in-room > .dad > #room > #d0 > button:not(#classicButtonShapeGuard1):not(#classicButtonShapeGuard2):not(#classicButtonShapeGuard3){ background-color:var(--chat-buttons,var(--site-button-bg,#438ac7))!important; border:1px solid #08151c!important; border-radius:2px!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)!important; box-sizing:border-box!important; margin:0!important; } html body.site-in-room > .dad > #room > .footer > button:not(#classicButtonShapeGuard1):not(#classicButtonShapeGuard2):not(#classicButtonShapeGuard3), html body.site-in-room > .dad > #room > .tablebox.footer > button:not(#classicButtonShapeGuard1):not(#classicButtonShapeGuard2):not(#classicButtonShapeGuard3), html body.site-in-room > .dad > #room > .footer > .btn:not(#classicButtonShapeGuard1):not(#classicButtonShapeGuard2):not(#classicButtonShapeGuard3), html body.site-in-room > .dad > #room > .tablebox.footer > .btn:not(#classicButtonShapeGuard1):not(#classicButtonShapeGuard2):not(#classicButtonShapeGuard3){ background-color:var(--chat-buttons,var(--site-button-bg,#438ac7))!important; border:1px solid #08151c!important; border-radius:2px!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)!important; box-sizing:border-box!important; } html body.site-in-room #freshVoiceBar > button:not(#classicButtonShapeGuard1):not(#classicButtonShapeGuard2):not(#classicButtonShapeGuard3), html body.site-in-room #freshVoiceBar > .fresh-mic-seat:not(#classicButtonShapeGuard1):not(#classicButtonShapeGuard2):not(#classicButtonShapeGuard3){ border:1px solid #082a37!important; border-radius:3px!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)!important; box-sizing:border-box!important; } /* ===== END V230.52 ===== */ /* ===== V230.53 COMPACT CONTROLS + CLASSIC WALL + ROOM LOCK + FULL MIC ICON ===== */ /* Match the shorter classic composer and navigation rows without changing their touch width or the separated V230.52 button shape. */ html body.site-in-room{ --chat-bottom-bar:35px; } html body.site-in-room > .dad > #room{ grid-template-rows:minmax(0,1fr) 34px 35px !important; } html body.site-in-room > .dad > #room > .tablebox.footer, html body.site-in-room > .dad > #room > .footer{ height:34px !important; min-height:34px !important; max-height:34px !important; padding:1px !important; } html body.site-in-room > .dad > #room > .footer > button, html body.site-in-room > .dad > #room > .tablebox.footer > button, html body.site-in-room > .dad > #room > .footer > img.emobox, html body.site-in-room > .dad > #room > .tablebox.footer > img.emobox{ width:30px !important; min-width:30px !important; max-width:30px !important; height:30px !important; min-height:30px !important; max-height:30px !important; } html body.site-in-room > .dad > #room > .footer > button.fa-send, html body.site-in-room > .dad > #room > .tablebox.footer > button.fa-send{ width:auto !important; min-width:52px !important; max-width:none !important; font-size:13px !important; } html body.site-in-room > .dad > #room > .footer > #tbox, html body.site-in-room > .dad > #room > .tablebox.footer > #tbox{ height:30px !important; min-height:30px !important; max-height:30px !important; font-size:13px !important; line-height:20px !important; } html body.site-in-room > .dad > #room > #d0{ height:35px !important; min-height:35px !important; max-height:35px !important; } html body.site-in-room > .dad > #room > #d0 > .ae, html body.site-in-room > .dad > #room > #d0 > label, html body.site-in-room > .dad > #room > #d0 > button{ height:32px !important; min-height:32px !important; max-height:32px !important; font-size:13px !important; line-height:30px !important; } /* Like, reply/comments and delete/close retain the fixed classic wall blue. */ html body.site-in-room #wall .d2bc > .mm > .likebc-btn:not(#wallClassicColorGuard1):not(#wallClassicColorGuard2):not(#wallClassicColorGuard3), html body.site-in-room #wall .d2bc > .mm > .commentbc-btn:not(#wallClassicColorGuard1):not(#wallClassicColorGuard2):not(#wallClassicColorGuard3), html body.site-in-room #wall .d2bc > .mm > .delbc-btn:not(#wallClassicColorGuard1):not(#wallClassicColorGuard2):not(#wallClassicColorGuard3){ background-color:#255a96 !important; background-image:none !important; border-color:#fff !important; color:#fff !important; } /* Password rooms use the bundled Font Awesome lock, so no missing image can hide the indicator. */ html body.site-in-room #rooms .room-password-lock{ display:inline-block !important; margin:0 4px 0 1px !important; color:#d19a20 !important; font-size:14px !important; line-height:1 !important; vertical-align:middle !important; text-shadow:0 1px 0 #fff !important; } /* A custom microphone/diamond image replaces the complete seat surface. */ html body.site-in-room #freshVoiceBar > .fresh-mic-seat.has-custom-mic-icon, html body.site-in-room .room-mic-btn.has-custom-mic-icon, html body.site-in-room .room-mic-slot.has-custom-mic-icon, html body.site-in-room .room-mic-seat.has-custom-mic-icon{ background-color:transparent !important; background-size:100% 100% !important; background-position:center !important; background-repeat:no-repeat !important; padding:0 !important; } /* Safari/iPhone-safe full-page scaling. Width and height are compensated by JavaScript, while transform performs the visible scaling on every panel. */ body.bg.site-in-room.chat-full-page-zoom > .dad{ zoom:1 !important; transform:scale(var(--chat-ui-zoom,1)) !important; transform-origin:top left !important; } /* ===== END V230.53 ===== */ /* ===== V230.54 WALL HEART + PROFILE THEME + LOCKED ROOM PERMISSIONS ===== */ /* Only the wall heart returns to the compact classic red shown in the reference. */ html body.site-in-room #wall .d2bc > .mm > .likebc-btn:not(#wallClassicColorGuard1):not(#wallClassicColorGuard2):not(#wallClassicColorGuard3){ background-color:#d9534f !important; background-image:none !important; border-color:#fff !important; color:#fff !important; } html body.site-in-room #wall .d2bc > .mm > .commentbc-btn:not(#wallClassicColorGuard1):not(#wallClassicColorGuard2):not(#wallClassicColorGuard3), html body.site-in-room #wall .d2bc > .mm > .delbc-btn:not(#wallClassicColorGuard1):not(#wallClassicColorGuard2):not(#wallClassicColorGuard3){ background-color:#255a96 !important; background-image:none !important; border-color:#fff !important; color:#fff !important; } /* All originally-blue profile surfaces follow the chat button color live. */ html body.site-in-room #upro .upro-head, html body.site-in-room #upro .upro-roomtag .roomh, html body.site-in-room #upro .upro-edit-label:not(.red):not(.blue){ background-color:var(--chat-buttons,var(--site-button-bg,#2f6380)) !important; background-image:none !important; border-color:var(--chat-buttons,var(--site-button-bg,#2f6380)) !important; color:#fff !important; } /* Heart on the left and the compact value immediately on its right. */ html body.site-in-room #upro .upro-btn.ulike, html body.site-in-room #upro.simple-view .upro-btn.ulike{ direction:ltr !important; flex-direction:row !important; justify-content:center !important; align-items:center !important; gap:0 !important; color:#f00000 !important; font-family:"Times New Roman",Times,serif!important; line-height:1 !important; } html body.site-in-room #upro .upro-btn.ulike > i.fa{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:auto !important; min-width:0 !important; margin:0 !important; color:#f00000 !important; font-size:15px !important; line-height:1 !important; } html body.site-in-room #upro .upro-btn.ulike > .upro-btn-count{ display:inline-block !important; width:auto !important; min-width:0 !important; max-width:none !important; margin:0 !important; padding:0 !important; overflow:visible !important; color:#f00000 !important; font:700 12px/1 "Times New Roman",Times,serif !important; white-space:nowrap !important; text-align:left !important; } /* Restore the tidy legacy editor order: label right, field center, action left. */ html body.site-in-room #upro .upro-admin-area{ direction:rtl !important; padding:0 8px 10px !important; } html body.site-in-room #upro .upro-edit-row{ direction:rtl !important; display:flex !important; align-items:center !important; gap:5px !important; margin-top:5px !important; min-height:29px !important; } html body.site-in-room #upro .upro-edit-label{ display:flex !important; align-items:center !important; justify-content:center !important; flex:0 0 82px !important; width:82px !important; min-width:82px !important; height:29px !important; min-height:29px !important; margin:0 !important; padding:0 4px !important; box-sizing:border-box !important; font:bold 12px/29px "Times New Roman",Times,serif !important; text-align:center !important; white-space:nowrap !important; } html body.site-in-room #upro .upro-edit-label.red, html body.site-in-room #upro .upro-edit-label.blue{ background:#fff !important; background-image:none !important; border-color:transparent !important; justify-content:center !important; text-align:center !important; } html body.site-in-room #upro .upro-edit-label.red{color:#e60000 !important;} html body.site-in-room #upro .upro-edit-label.blue{color:#087cff !important;} html body.site-in-room #upro .upro-edit-input{ flex:1 1 auto !important; width:auto !important; min-width:0 !important; height:29px !important; min-height:29px !important; margin:0 !important; padding:3px 6px !important; box-sizing:border-box !important; } html body.site-in-room #upro .upro-save-btn{ flex:0 0 58px !important; width:58px !important; min-width:58px !important; height:29px !important; min-height:29px !important; margin:0 !important; padding:0 4px !important; box-sizing:border-box !important; line-height:27px !important; text-align:center !important; } html body.site-in-room #upro .upro-edit-row.roombox .upro-edit-label{ flex:0 0 100% !important; width:100% !important; min-width:100% !important; margin:0 !important; } /* ===== END V230.54 ===== */ /* ===== V230.55 MEMBER ROW BANNER SAVE + HORIZONTAL MIC SEATS ===== */ /* The row-banner panel has its own id. Keep its save button in a dedicated, always-visible footer instead of letting it fall below the mobile viewport. */ html body #memberRowBannerPanel.member-banner-frame-panel{ display:flex !important; flex-direction:column !important; top:max(8px,env(safe-area-inset-top,0px)) !important; bottom:max(8px,env(safe-area-inset-bottom,0px)) !important; height:auto !important; max-height:calc(100dvh - 16px) !important; overflow:hidden !important; z-index:2147483200 !important; box-sizing:border-box !important; } html body #memberRowBannerPanel.member-banner-frame-panel, html body #memberRowBannerPanel.member-banner-frame-panel *{ box-sizing:border-box !important; } html body #memberRowBannerPanel.member-banner-frame-panel > .mbf-head{ flex:0 0 34px !important; height:34px !important; min-height:34px !important; line-height:34px !important; } html body #memberRowBannerPanel.member-banner-frame-panel > .mbf-body{ flex:1 1 auto !important; height:auto !important; min-height:0 !important; overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior:contain !important; -webkit-overflow-scrolling:touch !important; } html body #memberRowBannerPanel.member-banner-frame-panel > .mbf-save-row{ position:relative !important; bottom:auto !important; z-index:8 !important; display:block !important; visibility:visible !important; flex:0 0 auto !important; width:100% !important; margin:0 !important; padding:7px 8px calc(7px + env(safe-area-inset-bottom,0px)) !important; border-top:1px solid #d5d5d5 !important; background:#eee !important; box-shadow:0 -3px 9px rgba(0,0,0,.1) !important; } html body #memberRowBannerPanel.member-banner-frame-panel > .mbf-save-row > .mrb-save{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; min-height:38px !important; margin:0 !important; } html body #memberRowBannerBackdrop.member-banner-frame-backdrop{ pointer-events:auto !important; } /* Extra microphone seats stay at their normal size and use native horizontal touch scrolling. Native scrolling avoids extra pointer listeners on chat. */ html body.site-in-room > .dad.fresh-voice-enabled > #freshVoiceBar, html body.site-in-room #freshVoiceBar{ display:flex !important; flex-wrap:nowrap !important; justify-content:flex-start !important; overflow-x:auto !important; overflow-y:hidden !important; overscroll-behavior-x:contain !important; overscroll-behavior-y:none !important; -webkit-overflow-scrolling:touch !important; touch-action:pan-x !important; scrollbar-width:thin !important; scrollbar-color:rgba(255,255,255,.55) rgba(0,0,0,.16) !important; } html body.site-in-room #freshVoiceBar > .fresh-speaker, html body.site-in-room #freshVoiceBar > .fresh-music-btn, html body.site-in-room #freshVoiceBar > .fresh-live-btn, html body.site-in-room #freshVoiceBar > .fresh-mic-seat{ flex-shrink:0 !important; } html body.site-in-room #freshVoiceBar::-webkit-scrollbar{ height:3px !important; } html body.site-in-room #freshVoiceBar::-webkit-scrollbar-track{ background:rgba(0,0,0,.16) !important; } html body.site-in-room #freshVoiceBar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.58) !important; border-radius:3px !important; } /* ===== END V230.55 ===== */ /* ===== V230.67: FULL MEMBER STATUS + LIVE PRESENCE LAYOUT ===== */ html body.site-in-room #users .uzr, html body:not(.site-in-room) #tlogins .lonline .uzr{ min-height:78px!important; height:auto!important; } html body.site-in-room #users .uzr .u-msg, html body.site-in-room #users .uzr .user-status-line, html body:not(.site-in-room) #tlogins .lonline .uzr .u-msg, html body:not(.site-in-room) #tlogins .lonline .uzr .user-status-line{ white-space:normal!important; overflow:hidden!important; text-overflow:clip!important; display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; line-clamp:2!important; line-height:16px!important; max-height:32px!important; bottom:4px!important; word-break:break-word!important; } #upro .upro-status-row, #upro .upro-status-under-photo, #upro .u-msg{ height:auto!important; max-height:none!important; min-height:28px!important; white-space:normal!important; overflow:visible!important; text-overflow:clip!important; line-height:20px!important; word-break:break-word!important; } /* ===== END V230.67 ===== */ /* ===== V230.68: ORIGINAL AVATAR LEVEL + EXPANDING STATUS ONLY ===== */ html body.site-in-room #users .uzr, html body:not(.site-in-room) #tlogins .lonline .uzr{ min-height:56px!important; height:auto!important; max-height:none!important; } html body.site-in-room #users .uzr > .u-pic, html body.site-in-room #users .uzr > img.u-pic, html body:not(.site-in-room) #tlogins .lonline .uzr > .u-pic, html body:not(.site-in-room) #tlogins .lonline .uzr > img.u-pic{ top:0!important; width:56px!important; height:56px!important; min-width:56px!important; min-height:56px!important; max-width:56px!important; max-height:56px!important; } html body.site-in-room #users .uzr > div.fl, html body:not(.site-in-room) #tlogins .lonline .uzr > div.fl{ position:relative!important; top:auto!important; left:auto!important; right:auto!important; width:100%!important; min-height:56px!important; height:auto!important; max-height:none!important; } html body.site-in-room #users .uzr .u-msg, html body.site-in-room #users .uzr .user-status-line, html body:not(.site-in-room) #tlogins .lonline .uzr .u-msg, html body:not(.site-in-room) #tlogins .lonline .uzr .user-status-line{ position:relative!important; left:auto!important; right:auto!important; bottom:auto!important; width:100%!important; max-width:none!important; min-height:16px!important; height:auto!important; max-height:none!important; margin:0!important; padding:0 3px!important; display:block!important; white-space:normal!important; overflow:visible!important; text-overflow:clip!important; -webkit-line-clamp:unset!important; line-clamp:unset!important; line-height:16px!important; word-break:normal!important; overflow-wrap:break-word!important; } /* الحائط يستعمل كامل خانة النص ويلف الكلام الطبيعي عند المسافات. */ html body.site-in-room #wall .d2bc > .mm > .uzr{ padding:0 3px 25px 0!important; min-width:0!important; width:auto!important; } html body.site-in-room #wall .d2bc > .mm .u-msg{ display:block!important; width:100%!important; max-width:none!important; min-width:0!important; height:auto!important; max-height:none!important; white-space:normal!important; word-break:normal!important; overflow-wrap:break-word!important; overflow:visible!important; line-height:21px!important; } /* ===== END V230.68 ===== */ /* ===== V230.69: COMPACT REFERENCE MEMBER ROW + UNCUT STATUS ===== */ /* صف العضو مطابق للمرجع: صورة 50px من أول حد الصف، الاسم فوق والحالة تحته. */ html body.site-in-room #users .uzr, html body:not(.site-in-room) #tlogins .lonline .uzr, html body.site-in-room #users .uzr.member-frame-custom, html body:not(.site-in-room) #tlogins .lonline .uzr.member-frame-custom{ position:relative!important; width:100%!important; min-height:50px!important; height:auto!important; max-height:none!important; margin:0!important; padding:0 28px 0 56px!important; border-width:0 0 1px!important; border-style:solid!important; border-color:#d4dceb!important; border-radius:0!important; box-sizing:border-box!important; overflow:hidden!important; direction:ltr!important; } /* الصورة العادية لا ترتفع ولا تكبر عن حدود الصف. */ html body.site-in-room #users .uzr > .u-pic, html body.site-in-room #users .uzr > img.u-pic, html body:not(.site-in-room) #tlogins .lonline .uzr > .u-pic, html body:not(.site-in-room) #tlogins .lonline .uzr > img.u-pic{ position:absolute!important; top:0!important; left:4px!important; right:auto!important; width:50px!important; height:50px!important; min-width:50px!important; min-height:50px!important; max-width:50px!important; max-height:50px!important; margin:0!important; padding:0!important; border:1px solid #d6d6d6!important; border-radius:0!important; object-fit:cover!important; object-position:center!important; background-size:cover!important; background-position:center!important; box-sizing:border-box!important; } /* الإطار والصورة داخله يصغران كقطعة واحدة إلى نفس 50px. */ html body.site-in-room #users .uzr.member-frame-custom > .member-avatar-composite, html body:not(.site-in-room) #tlogins .lonline .uzr.member-frame-custom > .member-avatar-composite{ position:absolute!important; top:0!important; left:4px!important; right:auto!important; width:50px!important; height:50px!important; min-width:50px!important; min-height:50px!important; max-width:50px!important; max-height:50px!important; margin:0!important; transform:scale(.625)!important; transform-origin:top left!important; overflow:visible!important; } /* محتوى الاسم والحالة هو الذي يحدد ارتفاع الصف عند طول الحالة. */ html body.site-in-room #users .uzr > div.fl, html body:not(.site-in-room) #tlogins .lonline .uzr > div.fl{ position:relative!important; top:auto!important; left:auto!important; right:auto!important; display:block!important; width:100%!important; min-height:50px!important; height:auto!important; max-height:none!important; margin:0!important; padding:0!important; float:none!important; overflow:visible!important; box-sizing:border-box!important; } html body.site-in-room #users .uzr > div.fl > div.fl, html body:not(.site-in-room) #tlogins .lonline .uzr > div.fl > div.fl{ display:flex!important; align-items:flex-start!important; width:100%!important; min-height:24px!important; height:24px!important; margin:0!important; padding:0!important; float:none!important; } html body.site-in-room #users .uzr .u-topic, html body:not(.site-in-room) #tlogins .lonline .uzr .u-topic{ display:block!important; width:100%!important; min-height:24px!important; height:24px!important; max-height:24px!important; margin:0!important; padding:0 3px!important; font:700 14px/24px "Times New Roman",Times,serif!important; direction:rtl!important; text-align:left!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; box-sizing:border-box!important; } html body.site-in-room #users .uzr .u-msg, html body.site-in-room #users .uzr .user-status-line, html body:not(.site-in-room) #tlogins .lonline .uzr .u-msg, html body:not(.site-in-room) #tlogins .lonline .uzr .user-status-line{ position:relative!important; inset:auto!important; display:block!important; float:none!important; clear:both!important; width:100%!important; min-width:0!important; min-height:18px!important; height:auto!important; max-height:none!important; margin:0!important; padding:0!important; font:400 12px/18px "Times New Roman",Times,serif!important; direction:rtl!important; text-align:left!important; white-space:normal!important; word-break:normal!important; overflow-wrap:break-word!important; overflow:visible!important; text-overflow:clip!important; -webkit-line-clamp:unset!important; line-clamp:unset!important; box-sizing:border-box!important; } html body.site-in-room #users .uzr .u-msg > .user-status-line, html body:not(.site-in-room) #tlogins .lonline .uzr .u-msg > .user-status-line{ padding:0 3px 5px!important; } /* شريط الحضور يساوي ارتفاع الصورة في الصف العادي. */ html body.site-in-room #users .uzr:not(.member-has-frame) > .ustat{ top:0!important; height:50px!important; min-height:50px!important; max-height:50px!important; } /* ===== END V230.69 ===== */ /* ===== V230.70: LARGE BOUNDED AVATAR + REBUILT STATUS + SAUDI WALL CLOCK ===== */ /* إعادة الصورة إلى القياس السابق الكبير داخل حدها، مع بقاء الصف مدمجًا. */ html body.site-in-room #users .uzr, html body:not(.site-in-room) #tlogins .lonline .uzr, html body.site-in-room #users .uzr.member-frame-custom, html body:not(.site-in-room) #tlogins .lonline .uzr.member-frame-custom{ min-height:56px!important; height:auto!important; max-height:none!important; padding:0 28px 0 58px!important; overflow:hidden!important; } html body.site-in-room #users .uzr > .u-pic, html body.site-in-room #users .uzr > img.u-pic, html body:not(.site-in-room) #tlogins .lonline .uzr > .u-pic, html body:not(.site-in-room) #tlogins .lonline .uzr > img.u-pic{ top:0!important; left:0!important; width:56px!important; height:56px!important; min-width:56px!important; min-height:56px!important; max-width:56px!important; max-height:56px!important; border:1px solid #cfd5de!important; border-radius:0!important; object-fit:cover!important; background-size:cover!important; } html body.site-in-room #users .uzr.member-frame-custom > .member-avatar-composite, html body:not(.site-in-room) #tlogins .lonline .uzr.member-frame-custom > .member-avatar-composite{ top:0!important; left:0!important; width:56px!important; height:56px!important; min-width:56px!important; min-height:56px!important; max-width:56px!important; max-height:56px!important; transform:scale(.7)!important; transform-origin:top left!important; } html body.site-in-room #users .uzr > div.fl, html body:not(.site-in-room) #tlogins .lonline .uzr > div.fl{ min-height:56px!important; height:auto!important; max-height:none!important; overflow:visible!important; } html body.site-in-room #users .uzr > div.fl > div.fl, html body:not(.site-in-room) #tlogins .lonline .uzr > div.fl > div.fl{ min-height:25px!important; height:25px!important; } html body.site-in-room #users .uzr .u-topic, html body:not(.site-in-room) #tlogins .lonline .uzr .u-topic{ min-height:25px!important; height:25px!important; max-height:25px!important; font:700 14px/25px "Times New Roman",Times,serif!important; } /* الحالة مبنية كسطر مستقل كامل العرض مثل نص الحائط، بلا تعويم أو قص. */ html body.site-in-room #users .uzr .u-msg, html body:not(.site-in-room) #tlogins .lonline .uzr .u-msg{ all:unset; position:static!important; display:block!important; float:none!important; clear:both!important; width:100%!important; min-width:0!important; min-height:20px!important; height:auto!important; max-height:none!important; margin:0!important; padding:0!important; box-sizing:border-box!important; direction:rtl!important; text-align:left!important; font:400 13px/20px "Times New Roman",Times,serif!important; color:var(--member-status-color,#777)!important; white-space:normal!important; word-break:normal!important; overflow-wrap:break-word!important; overflow:visible!important; text-overflow:clip!important; } html body.site-in-room #users .uzr .u-msg > .user-status-line, html body:not(.site-in-room) #tlogins .lonline .uzr .u-msg > .user-status-line{ all:unset; position:static!important; display:block!important; float:none!important; clear:both!important; width:100%!important; min-width:0!important; min-height:20px!important; height:auto!important; max-height:none!important; margin:0!important; padding:0 4px 5px!important; box-sizing:border-box!important; direction:rtl!important; text-align:left!important; font:400 13px/20px "Times New Roman",Times,serif!important; color:var(--member-status-color,#777)!important; white-space:normal!important; word-break:normal!important; overflow-wrap:break-word!important; overflow:visible!important; text-overflow:clip!important; -webkit-line-clamp:unset!important; line-clamp:unset!important; } html body.site-in-room #users .uzr:not(.member-has-frame) > .ustat{ height:56px!important; min-height:56px!important; max-height:56px!important; } /* الساعة صف مستقل داخل الحائط؛ إخفاؤها يلغي مساحتها بالكامل. */ .dpnl #wall.tab-pane, .dpnl #wall.tab-pane.active{ grid-template-rows:auto auto minmax(0,1fr) 48px!important; } .dpnl #wallStories{grid-row:1!important;} .dpnl #wall #wallSaudiClock{grid-row:2!important;grid-column:1!important;} .dpnl #wall #d2bc, .dpnl #wall .d2bc{grid-row:3!important;} .dpnl #wall .wall-input-box{grid-row:4!important;} html body.site-in-room #wallSaudiClock[hidden]{display:none!important;} html body.site-in-room #wallSaudiClock:not([hidden]){ position:relative!important; float:none!important; clear:both!important; display:flex!important; flex:0 0 82px!important; align-items:center!important; justify-content:center!important; gap:13px!important; width:100%!important; height:82px!important; min-height:82px!important; max-height:82px!important; margin:0!important; padding:7px 12px!important; overflow:hidden!important; box-sizing:border-box!important; direction:ltr!important; color:#fff!important; background: radial-gradient(circle at 18% 10%,rgba(255,255,255,.2),transparent 30%), linear-gradient(125deg,#071a2f 0%,var(--chat-template,#345c73) 48%,#0b8068 100%)!important; border:0!important; border-bottom:1px solid rgba(0,0,0,.3)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.18)!important; z-index:2!important; } .wall-saudi-clock-face{ position:relative!important; flex:0 0 66px!important; width:66px!important; height:66px!important; border-radius:50%!important; background:radial-gradient(circle at 38% 32%,#fffdf1 0%,#f7d96b 62%,#e6a928 100%)!important; border:3px solid #f7f1c8!important; box-shadow:0 0 0 2px rgba(12,28,44,.72),0 3px 9px rgba(0,0,0,.38),inset 0 0 0 2px rgba(122,78,0,.2)!important; box-sizing:border-box!important; } .wall-clock-number{ position:absolute!important; z-index:2!important; color:#23354a!important; font:700 9px/10px "Times New Roman",Times,serif!important; direction:ltr!important; } .wall-clock-n12{top:3px!important;left:50%!important;transform:translateX(-50%)!important;} .wall-clock-n3{right:4px!important;top:50%!important;transform:translateY(-50%)!important;} .wall-clock-n6{bottom:3px!important;left:50%!important;transform:translateX(-50%)!important;} .wall-clock-n9{left:4px!important;top:50%!important;transform:translateY(-50%)!important;} .wall-clock-hand{ position:absolute!important; left:50%!important; bottom:50%!important; z-index:4!important; display:block!important; width:2px!important; border-radius:2px!important; transform:translateX(-50%) rotate(var(--hand-angle,0deg))!important; transform-origin:50% 100%!important; } .wall-clock-hour{height:17px!important;width:4px!important;background:#243247!important;} .wall-clock-minute{height:23px!important;width:3px!important;background:#243247!important;} .wall-clock-second{height:25px!important;width:1px!important;background:#d62e2e!important;} .wall-clock-center{ position:absolute!important; left:50%!important; top:50%!important; z-index:6!important; width:7px!important; height:7px!important; border-radius:50%!important; background:#d62e2e!important; border:1px solid #fff7cf!important; transform:translate(-50%,-50%)!important; box-shadow:0 1px 2px rgba(0,0,0,.35)!important; } .wall-saudi-clock-info{ min-width:0!important; max-width:190px!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; direction:rtl!important; text-align:center!important; line-height:1!important; } .wall-saudi-clock-zone{ color:#dffcf4!important; font:700 11px/16px "Times New Roman",Times,serif!important; white-space:nowrap!important; } .wall-saudi-clock-digital{ direction:ltr!important; color:#fff!important; font:700 25px/29px "Times New Roman",Times,serif!important; letter-spacing:1px!important; text-shadow:0 2px 4px rgba(0,0,0,.38)!important; white-space:nowrap!important; } .wall-saudi-clock-date{ display:block!important; max-width:100%!important; color:#fff3b0!important; font:400 10px/15px "Times New Roman",Times,serif!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } /* ===== END V230.70 ===== */ /* V230.71: dedicated member content replaces legacy floated containers. */ html body :is(#users#users,#tlogins#tlogins) .uzr:has(> .member-row-content){ min-height:64px!important;height:auto!important;max-height:none!important; padding:0 26px 0 66px!important;float:none!important;box-sizing:border-box!important; } html body :is(#users#users,#tlogins#tlogins) .uzr > .member-row-content{ display:block!important;position:relative!important;width:100%!important;min-width:0!important; min-height:64px!important;height:auto!important;max-height:none!important;float:none!important; margin:0!important;padding:0!important;overflow:visible!important; } html body :is(#users#users,#tlogins#tlogins) .member-row-name{ display:flex!important;align-items:flex-start!important;min-width:0!important;height:25px!important; margin:0!important;padding:0!important;overflow:hidden!important; } html body :is(#users#users,#tlogins#tlogins) .member-row-name > div{min-width:0!important;flex:1!important;float:none!important;} html body :is(#users#users,#tlogins#tlogins) .uzr .member-row-content .u-topic{ margin:0!important;padding:0 3px!important;line-height:25px!important;text-align:left!important; } html body :is(#users#users,#tlogins#tlogins) .uzr .member-row-content :is(.u-msg,.user-status-line){ position:static!important;inset:auto!important;float:none!important;clear:none!important; display:block!important;width:100%!important;max-width:none!important;min-width:0!important; height:auto!important;max-height:none!important;min-height:0!important; margin:0!important;padding:0!important;white-space:pre-wrap!important;overflow:visible!important; word-break:normal!important;overflow-wrap:anywhere!important; -webkit-line-clamp:unset!important;line-clamp:unset!important; font:400 13px/20px "Times New Roman",Times,serif!important;text-align:left!important;direction:rtl!important; box-sizing:border-box!important;color:var(--member-status-color,#777)!important; } html body :is(#users#users,#tlogins#tlogins) .uzr .member-row-content .member-row-status{padding:0 3px 3px!important;} html body :is(#users#users,#tlogins#tlogins) .uzr:has(> .member-row-content) > .u-pic{ position:absolute!important;left:0!important;top:0!important;bottom:0!important; width:64px!important;min-width:64px!important;max-width:64px!important; height:100%!important;min-height:0!important;max-height:none!important; margin:0!important;border:1px solid #cfd5de!important;box-sizing:border-box!important; object-fit:contain!important;background-size:contain!important;transform:none!important; } html body :is(#users#users,#tlogins#tlogins) .uzr.member-frame-custom:has(> .member-row-content) > .member-avatar-composite{ left:0!important;top:0!important;width:64px!important;min-width:64px!important;max-width:64px!important; height:100%!important;min-height:0!important;max-height:none!important;transform:none!important; } html body :is(#users#users,#tlogins#tlogins) .member-avatar-composite > .frame-photo-window{ left:10%!important;top:10%!important;width:80%!important;height:80%!important; } html body :is(#users#users,#tlogins#tlogins) .member-avatar-composite > .member-avatar-frame-layer{ width:100%!important;height:100%!important;min-width:0!important;min-height:0!important; max-width:none!important;max-height:none!important;background-size:100% 100%!important; } html body.site-in-room #users .uzr:not(.member-has-frame) > .ustat{ height:100%!important;max-height:none!important;min-height:0!important; } /* Yellow alarm clock: lightweight CSS artwork, functional hour/minute/second hands. */ html body.site-in-room #wallSaudiClock:not([hidden]){height:132px!important;min-height:132px!important;max-height:132px!important;flex-basis:132px!important;} html body #wallSaudiClock .wall-saudi-clock-face{ width:94px!important;height:94px!important;flex-basis:94px!important;border:5px solid #357aac!important; background:radial-gradient(ellipse at 41% 38%,white 0 7%,transparent 8%),radial-gradient(ellipse at 59% 38%,white 0 7%,transparent 8%),#f7d824!important; box-shadow:0 4px 0 #ef953f,0 5px 10px #0004!important; } html body #wallSaudiClock .wall-saudi-clock-face:before, html body #wallSaudiClock .wall-saudi-clock-face:after{ content:"";position:absolute;width:32px;height:17px;top:-17px;background:#ff964c;border-radius:28px 28px 3px 3px; } html body #wallSaudiClock .wall-saudi-clock-face:before{left:-7px;transform:rotate(-28deg);} html body #wallSaudiClock .wall-saudi-clock-face:after{right:-7px;transform:rotate(28deg);} html body #wallSaudiClock .wall-clock-hour{height:25px!important;background:#ed8531!important;width:5px!important;} html body #wallSaudiClock .wall-clock-minute{height:34px!important;background:#ed8531!important;width:4px!important;} html body #wallSaudiClock .wall-clock-second{height:36px!important;} html body #wallSaudiClock .wall-clock-number{font-size:11px!important;color:#24618f!important;} html body #wallSaudiClock .wall-clock-smile{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);font:24px/1 "Times New Roman",Times,serif;color:#805529;pointer-events:none;} /* Optional Saudi National Day. Static decoration: no particles, GIFs or extra timers. */ html body.saudi-national-theme{ --chat-template:#086548!important;--chat-buttons:#086548!important;--site-button-bg:#086548!important; --theme-primary:#086548!important;--theme-header-bg:#074936!important;--theme-outer-bg:#043d2d!important; } html body.saudi-national-theme #mainLoginBanner{ background:repeating-linear-gradient(45deg,transparent 0 28px,#d7bc6420 29px 30px),linear-gradient(125deg,#023b2b,#087e56)!important; border:1px solid #d7bc64!important;box-shadow:inset 0 0 0 4px #ffffff12!important; } html body.saudi-national-theme #mainLoginBanner:after{ content:"🇸🇦 عزّنا بطبعنا 🇸🇦";display:block;padding:12px;color:#ffe5a0;font:bold 18px/1.6 "Times New Roman",Times,serif;text-align:center; } html body.saudi-national-theme :is(.pnhead,.user-group-header,.upro-head){ background:linear-gradient(110deg,#04452f,#09815b,#04452f)!important; border-bottom:2px solid #d7bc64!important;color:white!important; } html body.saudi-national-theme .pnhead:after{content:" 🇸🇦";font-size:14px;} html body.saudi-national-theme #room{ background:repeating-linear-gradient(45deg,#ffffff05 0 1px,transparent 1px 18px),#064d37!important; } html body.saudi-national-theme #d0{border-top:2px solid #d7bc64!important;} html body.saudi-national-theme #mainLoginLinks{border-bottom:2px solid #d7bc64!important;} html body.saudi-national-theme #mainLoginBanner :is(.main-title,.main-sub,.main-url){color:#fff4cc!important;} /* V230.72 — Saudi National Day artwork. Scoped, optional, and locally served. */ .saudi-national-art{display:none!important;} html body.saudi-national-theme #saudiNationalWelcome{ display:block!important;position:relative;clear:both;float:none;width:calc(100% - 16px);box-sizing:border-box; margin:8px auto 12px;border:1px solid #c9a65b;border-radius:12px;overflow:hidden; background:radial-gradient(ellipse at 50% 15%,#167a56,transparent 65%),#033f2d; box-shadow:0 4px 12px #002b2626,inset 0 0 0 4px #d6ba6c16;color:#ffedbd; } html body.saudi-national-theme .saudi-ceremony{ display:grid;grid-template-columns:minmax(55px,1fr) minmax(145px,1.7fr) minmax(55px,1fr); align-items:end;gap:5px;padding:16px 12px 0;min-height:200px; background:url('saudi-national-skyline.svg') center bottom/100% auto no-repeat; } html body.saudi-national-theme .saudi-leader{ display:block;width:100%;max-width:165px;height:190px;justify-self:center;border:1px solid #cfb56e; border-radius:70px 70px 0 0;background-position:center top;background-size:cover;background-repeat:no-repeat; box-shadow:0 0 0 4px #dfc17b12;box-sizing:border-box; } html body.saudi-national-theme .saudi-king{background-image:url('saudi-national-king.jpg');} html body.saudi-national-theme .saudi-prince{background-image:url('saudi-national-prince.jpg');} html body.saudi-national-theme .saudi-ceremony-title{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding-bottom:14px;min-width:0;} html body.saudi-national-theme .saudi-emblem{display:block;width:48px;height:48px;background:url('saudi-national-emblem.svg') center/contain no-repeat;} html body.saudi-national-theme .saudi-eyebrow{font:11px/1.5 "Times New Roman",Times,serif;color:#e7ce8e;} html body.saudi-national-theme .saudi-ceremony-title strong{font:bold clamp(20px,3.5vw,34px)/1.5 "Times New Roman",Times,serif;color:#fff2c8;text-shadow:0 2px 0 #002d21;} html body.saudi-national-theme .saudi-occasion{font:11px/1.8 "Times New Roman",Times,serif;color:#fff3d0;} html body.saudi-national-theme .saudi-waving-flag{ display:block;position:relative;width:81px;height:54px;flex:none; background:url('saudi-national-flag.svg') center/contain no-repeat;transform-origin:right center; animation:saudi-flag-breeze 5s ease-in-out infinite;box-shadow:0 3px 8px #001d2240; } html body.saudi-national-theme .saudi-waving-flag:after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(100deg,#fff0 5%,#ffffff1c 30%,#00000013 55%,#ffffff15 77%,transparent); } html body.saudi-national-theme .saudi-banner-bottom{ display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 16px;padding:7px 12px; border-top:1px solid #c9a65b80;background:#002b20b3;font:12px/1.7 "Times New Roman",Times,serif; } html body.saudi-national-theme .saudi-banner-bottom a{color:#e3cf9c;font:10px/1.5 "Times New Roman",Times,serif;text-decoration:underline;} html body.saudi-national-theme.site-in-room #room > .saudi-chat-atmosphere{ display:block!important;position:absolute;inset:0 0 90px;overflow:hidden;pointer-events:none;z-index:0; background:url('saudi-national-skyline.svg') center bottom/100% auto no-repeat,#f4f8f3; } html body.saudi-national-theme.site-in-room .saudi-chat-atmosphere .saudi-waving-flag{ position:absolute;top:42%;right:7%;width:clamp(100px,22vw,280px);height:auto;aspect-ratio:3/2;opacity:.09; } html body.saudi-national-theme.site-in-room .saudi-chat-atmosphere .saudi-emblem{ position:absolute;left:6%;bottom:10%;width:clamp(75px,15vw,190px);height:auto;aspect-ratio:1;opacity:.2; } html body.saudi-national-theme.site-in-room #room > #d2{z-index:1;background:transparent!important;} html body.saudi-national-theme.site-in-room #d2:before{ content:"اليوم الوطني السعودي • دام عزّك يا وطن";display:block;box-sizing:border-box;width:100%; padding:14px 44px;text-align:center;color:#f8e7b0;font:bold 13px/1.8 "Times New Roman",Times,serif; background:url('saudi-national-emblem.svg') 12px center/30px 30px no-repeat,linear-gradient(110deg,#03452f,#08764e,#03452f); border-bottom:2px solid #c4a458;pointer-events:none; } html body.saudi-national-theme :is(#mainLoginLinks>a,#tlogins .nav-tabs>li>a){ background-image:url('saudi-national-emblem.svg'),linear-gradient(115deg,#03452f,#0a7250)!important; background-position:7px center,center!important;background-size:22px 22px,cover!important;background-repeat:no-repeat!important; padding-left:33px!important;color:#fff0c4!important;border-color:#ba9a54!important; } html body.saudi-national-theme.site-in-room #room > #d0 > label.ae{ background-image:url('saudi-national-emblem.svg'),linear-gradient(115deg,#03452f,#0a7250)!important; background-position:right 4px bottom 2px,center!important;background-size:14px 14px,cover!important; background-repeat:no-repeat!important;border-color:#c8aa63!important;color:#fff2c8!important; box-shadow:inset 0 2px 0 #e9d39955!important; } html body.saudi-national-theme #frontSiteBanner{border:1px solid #c8aa63!important;box-shadow:0 0 0 3px #c8aa6318!important;} html body.saudi-national-theme .user-group-header{ background-image:url('saudi-national-emblem.svg'),linear-gradient(110deg,#03452f,#08764e)!important; background-position:8px center,center!important;background-size:22px 22px,cover!important;background-repeat:no-repeat!important; } @keyframes saudi-flag-breeze{0%,100%{transform:perspective(500px) rotateY(-7deg) skewY(-1deg);}50%{transform:perspective(500px) rotateY(7deg) skewY(1deg);}} @media(prefers-reduced-motion:reduce){html body.saudi-national-theme .saudi-waving-flag{animation:none!important;}} /* V230.73: compact wall clock and profile game actions. */ html body.site-in-room #wallSaudiClock:not([hidden]){height:76px!important;min-height:76px!important;max-height:76px!important;flex-basis:76px!important;padding:10px 8px 4px!important;gap:12px!important;} html body #wallSaudiClock .wall-saudi-clock-face{zoom:.58;} html body #wallSaudiClock .wall-saudi-clock-digital{font-size:13px!important;line-height:18px!important;} html body #wallSaudiClock .wall-saudi-clock-date{font-size:10px!important;line-height:15px!important;} html body.site-in-room #upro#upro .upro-game-challenges{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:3px!important;margin:4px 0!important;padding:0!important;} html body.site-in-room #upro#upro .upro-game-button{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;height:42px!important;min-height:42px!important;max-height:42px!important;padding:3px 1px!important;border-radius:5px!important;font:700 10px/13px "Times New Roman",Times,serif!important;white-space:normal!important;} html body.site-in-room #upro#upro .upro-game-button > span{font:700 10px/13px "Times New Roman",Times,serif!important;margin:0!important;} html body.site-in-room #upro#upro .upro-game-button :is(i,img){font-size:12px!important;max-width:16px!important;max-height:16px!important;} html body.site-in-room #upro#upro .upro-game-button > span.fa{font-family:FontAwesome!important;font-weight:normal!important;font-size:12px!important;} /* V230.74: one viewport and one scroll container for all profile browsers. */ html body #upro#upro{position:fixed!important;top:var(--profile-view-top,0px)!important;left:var(--profile-view-left,0px)!important;right:auto!important;bottom:auto!important;width:var(--profile-view-width,100vw)!important;height:var(--profile-view-height,100dvh)!important;max-height:none!important;min-height:0!important;padding:0!important;overflow:hidden!important;} html body #upro#upro .modal-dialog{height:calc(100% - 16px)!important;max-height:none!important;margin:8px auto!important;max-width:calc(100% - 16px)!important;transform:none!important;} html body #upro#upro .modal-content.upro-card{display:flex!important;flex-direction:column!important;height:100%!important;min-height:0!important;max-height:none!important;width:100%!important;box-sizing:border-box!important;overflow:hidden!important;} html body #upro#upro .upro-head{flex:0 0 auto!important;} html body #upro#upro .modal-body.upro-body{flex:1 1 0!important;min-height:0!important;height:auto!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;} html body #wall .wall-input-box .sndbc{flex:0 0 66px!important;width:66px!important;min-width:66px!important;white-space:nowrap!important;padding:4px 7px!important;letter-spacing:normal!important;} html body #wall .wall-input-box .tboxbc{flex:1 1 0!important;min-width:0!important;width:auto!important;} /* V230.75: private rows have their own layout, independent of member cards. */ html body.site-in-room #chats#chats > .cc{ display:flex!important;direction:ltr!important;align-items:center!important;gap:4px!important; height:58px!important;min-height:58px!important;padding:1px 2px!important; background:#fafafa!important;border:1px solid #d4d9e4!important;box-shadow:none!important; overflow:hidden!important; } html body.site-in-room #chats#chats > .cc > .uzr{ display:grid!important;grid-template-columns:3px 54px minmax(0,1fr)!important; gap:2px!important;align-items:stretch!important;flex:1 1 0!important; width:auto!important;min-width:0!important;height:54px!important;min-height:0!important; padding:0!important;margin:0!important;float:none!important;border:0!important; background:transparent!important;box-shadow:none!important;overflow:hidden!important; } html body.site-in-room #chats#chats .cc .ustat{ grid-column:1!important;width:3px!important;height:54px!important;margin:0!important; } html body.site-in-room #chats#chats .cc .u-pic{ grid-column:2!important;width:54px!important;height:54px!important;min-width:54px!important; max-width:54px!important;max-height:54px!important;margin:0!important;padding:0!important; object-fit:cover!important;background-size:cover!important;border-radius:0!important;float:none!important; } html body.site-in-room #chats#chats .cc .member-row-content{ grid-column:3!important;min-width:0!important;width:100%!important; display:flex!important;flex-direction:column!important;justify-content:center!important; gap:2px!important;margin:0!important;padding:0 2px!important;overflow:hidden!important; } html body.site-in-room #chats#chats .cc .member-row-name{ display:flex!important;align-items:center!important;min-width:0!important;height:24px!important; } html body.site-in-room #chats#chats .cc .member-row-name > div{width:auto!important;min-width:0!important;flex:1!important;} html body.site-in-room #chats#chats .cc .u-topic{ display:block!important;max-width:100%!important;margin:0!important;padding:0!important; font-size:17px!important;line-height:24px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important; } html body.site-in-room #chats#chats .cc .u-msg{ position:static!important;display:block!important;float:none!important;width:100%!important; height:24px!important;max-height:24px!important;margin:0!important;padding:0!important; font-size:16px!important;line-height:24px!important;color:#888!important; text-align:left!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important; } html body.site-in-room #chats#chats .cc .co, html body.site-in-room #chats#chats .cc .muted{display:none!important;} html body.site-in-room #chats#chats .cc > .pm-list-delete:not(#pmColorGuard1):not(#pmColorGuard2){ flex:0 0 56px!important;width:56px!important;height:28px!important;box-sizing:border-box!important; align-self:flex-end!important;display:flex!important;align-items:center!important;justify-content:center!important; gap:1px!important;margin:0 0 1px!important;padding:2px!important;font-size:15px!important;line-height:20px!important; background:#d9534f!important;background-image:none!important;color:#fff!important; border:1px solid #111!important;border-radius:1px!important;box-shadow:none!important;cursor:pointer!important; } html body.site-in-room .private-window.private-window:not(#pmColorGuard1):not(#pmColorGuard2):not(#pmColorGuard3):not(#pmColorGuard4){ border:1px solid #202a30!important;border-radius:1px!important; } html body.site-in-room .private-window.private-window:not(#pmColorGuard1):not(#pmColorGuard2):not(#pmColorGuard3):not(#pmColorGuard4) > .head{border-bottom:1px solid #202a30!important;} html body.site-in-room .private-window.private-window:not(#pmColorGuard1):not(#pmColorGuard2):not(#pmColorGuard3):not(#pmColorGuard4) > .head > .btn, html body.site-in-room .private-window.private-window:not(#pmColorGuard1):not(#pmColorGuard2):not(#pmColorGuard3):not(#pmColorGuard4) > .head > .fa-user{ border:1px solid #17232c!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)!important; border-radius:0!important; } html body.site-in-room .private-window.private-window:not(#pmColorGuard1):not(#pmColorGuard2):not(#pmColorGuard3):not(#pmColorGuard4) > .head > .btn-info{background:#5bc0de!important;} html body.site-in-room .private-window.private-window:not(#pmColorGuard1):not(#pmColorGuard2):not(#pmColorGuard3):not(#pmColorGuard4) > .head > .phide{background:#d9534f!important;} html body.site-in-room #wall#wall .wall-input-box .sndbc{ display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:3px!important; flex:0 0 66px!important;width:66px!important;min-width:66px!important;max-width:66px!important; height:34px!important;min-height:34px!important;max-height:34px!important; padding:3px 5px!important;margin:0 2px!important;box-sizing:border-box!important; font-size:16px!important;line-height:24px!important;white-space:nowrap!important;border-radius:1px!important; } html body.site-in-room #wall#wall .wall-input-box .sndbc:before{font-size:16px!important;margin:0!important;} /* V230.76: private geometry follows the same scaled parent as the chat. */ html body.site-in-room .private-window.private-window{ width:min(500px,100%)!important;max-width:100%!important; height:56%!important;max-height:calc(100% - 76px)!important;min-height:180px!important; } html body.site-in-room .private-window.private-window.pm-expanded{ height:calc(100% - 76px)!important; } html body.site-in-room .private-window.private-window > .head{ display:flex!important;align-items:center!important;direction:ltr!important;gap:1px!important; } html body.site-in-room .private-window.private-window > .head > .fa-user{order:0;flex:0 0 30px;} html body.site-in-room .private-window.private-window > .head > .pm-peer-heading{ order:1!important;display:flex!important;align-items:center!important;gap:3px!important; flex:1 1 0!important;min-width:0!important;width:auto!important;height:28px!important; margin:0!important;padding:0!important;background:transparent!important;border:0!important;float:none!important; } html body.site-in-room .private-window.private-window .pm-peer-heading > .ustat{flex:0 0 3px!important;} html body.site-in-room .private-window.private-window .pm-peer-heading > .u-pic{ flex:0 0 24px!important;width:24px!important;height:24px!important;margin:0!important; } html body.site-in-room .private-window.private-window .pm-peer-heading > .filw{ flex:1 1 0!important;width:auto!important;min-width:0!important; } html body.site-in-room .private-window.private-window .pm-peer-heading .filw > div{ display:flex!important;align-items:center!important;min-width:0!important;width:100%!important; } html body.site-in-room .private-window.private-window .pm-peer-heading .filw > div > div{ flex:1 1 0!important;min-width:0!important;width:auto!important; } html body.site-in-room .private-window.private-window .pm-peer-heading .u-topic{ display:block!important;width:100%!important;max-width:100%!important; font:700 16px/26px "Times New Roman",Times,serif!important;text-align:center!important; white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important; padding:0 2px!important; } html body.site-in-room .private-window.private-window > .head > .btn-info{order:2!important;} html body.site-in-room .private-window.private-window > .head > .phide{order:3!important;} html body.site-in-room .private-window.private-window > .head > .wc{order:4!important;} html body.site-in-room .private-window.private-window > .head > .btn{ flex:0 0 30px!important;width:30px!important;min-width:30px!important;padding:5px!important; } html body :is(#users#users,#tlogins#tlogins) .uzr .member-row-content .member-row-status{ margin-top:4px!important;font:400 14px/21px "Times New Roman",Times,serif!important; } html body :is(#users#users,#tlogins#tlogins) .uzr .member-row-content .member-row-status.default-member-status{ color:#999!important; } /* Natural wrapping uses the available text column; avatars and direction stay as before. */ html body.site-in-room #wall#wall .d2bc > .mm .u-msg{ font:700 16px/24px "Times New Roman",Times,serif!important; width:100%!important;max-width:100%!important;min-width:0!important; white-space:pre-wrap!important;word-break:normal!important;overflow-wrap:break-word!important; height:auto!important;max-height:none!important;text-overflow:clip!important; } /* ===== V230.78 COMPACT SIMPLE PROFILE + GIFT NAME + SELF ROOM MOVE ===== */ /* العضو/الزائر الذي لا يملك صلاحيات إدارية يعود للبروفايل الصغير مثل الواجهة القديمة. */ html body #upro#upro.simple-view .modal-dialog{ width:365px!important; max-width:calc(100vw - 16px)!important; height:auto!important; max-height:calc(var(--profile-view-height,100dvh) - 16px)!important; margin:8px auto!important; } html body #upro#upro.simple-view .modal-content.upro-card{ width:100%!important; height:auto!important; min-height:0!important; max-height:calc(var(--profile-view-height,100dvh) - 16px)!important; display:block!important; overflow:hidden!important; } html body #upro#upro.simple-view .modal-body.upro-body{ display:block!important; height:auto!important; min-height:0!important; max-height:calc(var(--profile-view-height,100dvh) - 58px)!important; overflow-y:auto!important; overflow-x:hidden!important; } html body.site-in-room #upro#upro.simple-view .upro-game-challenges{ display:none!important; } /* الهدية لها خانة مستقلة بجانب الاسم، فلا تختفي الكتابة بعد إرسال الهدية. */ html body :is(#users#users,#tlogins#tlogins) .member-row-name > .u-gift.member-row-gift{ flex:0 0 18px!important; width:18px!important; min-width:18px!important; max-width:18px!important; height:18px!important; margin:3px 2px 0 0!important; padding:0!important; float:none!important; display:block!important; object-fit:contain!important; } html body :is(#users#users,#tlogins#tlogins) .member-row-name > div{ flex:1 1 0!important; width:auto!important; min-width:0!important; overflow:hidden!important; } /* ===== END V230.78 ===== */ /* V231.01: browser-sized landing page; do not subtract the keyboard in script. */ html body:not(.site-in-room) .dad > #tlogins#tlogins{ height:100vh!important;max-height:100vh!important; height:100dvh!important;max-height:100dvh!important; min-height:0!important; overflow-y:auto!important; } html body:not(.site-in-room) #tlogins#tlogins > .lonline{ flex:1 1 0!important;min-height:60px!important;overflow-y:auto!important; } html body:not(.site-in-room) #tlogins#tlogins > #siteRights.site-rights{ flex:0 0 auto!important;min-height:36px!important;height:auto!important; padding:4px 5px calc(4px + env(safe-area-inset-bottom,0px))!important; overflow:visible!important; } html body:not(.site-in-room) #siteRights#siteRights .site-rights-name, html body:not(.site-in-room) #siteRights#siteRights .site-rights-name a{ font:400 10px/14px "Times New Roman",Times,serif!important; white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:break-word!important; } html body:not(.site-in-room) #siteRights#siteRights .site-rights-tagline{ font:400 9px/12px "Times New Roman",Times,serif!important;white-space:normal!important;overflow:visible!important;margin-top:1px!important; } /* V230.85: system serif face matching the supplied Arabic reference; no font download. */ html body, html body *:not(.glyphicon){font-family:"Times New Roman",Times,serif!important;} html body .fa::before,html body .fa::after{font-family:FontAwesome!important;} html body .glyphicon,html body .glyphicon::before{font-family:"Glyphicons Halflings"!important;} /* ===== V230.92: full-row artwork, larger frames and restored profile edges ===== 650 x 186 is the artwork reference; its half-size display ceiling is 93px. Actual image proportions choose the row height within 64–93px. Framed portraits reserve at least 74px; only artwork participates in row flow. */ html body :is(#users#users,#tlogins#tlogins) .uzr.member-artwork-row{ position:relative!important;display:block!important;box-sizing:border-box!important; width:100%!important;min-height:var(--member-artwork-min-height,64px)!important;height:auto!important;max-height:93px!important; margin:0!important;padding:0!important;border-width:0 0 1px!important; overflow:hidden!important;background-size:100% 100%!important; } html body :is(#users#users,#tlogins#tlogins) .uzr.member-artwork-row > img.member-row-artwork, html body .member-banner-frame-panel .mbf-preview.member-artwork-row > img.member-row-artwork{ display:block!important;visibility:visible!important;position:relative!important;inset:auto!important; width:100%!important;min-width:100%!important;max-width:100%!important; height:auto!important;min-height:calc(var(--member-artwork-min-height,64px) - 1px)!important;max-height:92px!important; margin:0!important;padding:0!important;border:0!important;border-radius:0!important; object-fit:fill!important;object-position:center!important;image-rendering:auto!important; float:none!important;transform:none!important;filter:none!important;opacity:1!important; box-sizing:border-box!important;pointer-events:none!important;z-index:0!important; } html body :is(#users#users,#tlogins#tlogins) .uzr.member-artwork-row > .member-row-content{ display:flex!important;flex-direction:column!important;justify-content:flex-start!important; position:absolute!important;top:2px!important;bottom:0!important;left:76px!important;right:26px!important; width:auto!important;min-width:0!important;height:auto!important;min-height:0!important;max-height:100%!important; margin:0!important;padding:0!important;overflow-x:hidden!important;overflow-y:auto!important;z-index:2!important; } html body :is(#users#users,#tlogins#tlogins) .uzr.member-artwork-row > .member-row-content .member-row-name{ flex:0 0 25px!important;margin-top:0!important; } html body :is(#users#users,#tlogins#tlogins) .uzr.member-artwork-row > .member-row-content .member-row-status{ flex:0 0 auto!important;margin-bottom:0!important; } /* A banner-only row shows exactly its image and remains clickable as a profile. */ html body :is(#users#users,#tlogins#tlogins) .uzr.member-artwork-row.member-has-row-banner > :not(.member-row-artwork){ display:none!important; } /* All row decorations overlay the artwork; an empty floated mute label must never create another line below a short banner. */ html body :is(#users#users,#tlogins#tlogins) .uzr.member-artwork-row > :not(.member-row-artwork){ position:absolute!important; } html body :is(#users#users,#tlogins#tlogins) .uzr.member-artwork-row > .muted{ left:auto!important;right:5px!important;top:auto!important;bottom:2px!important; margin:0!important;padding:0!important;float:none!important;z-index:3!important; } html body :is(#users#users,#tlogins#tlogins) .uzr.member-artwork-row > .muted:not(.fa-ban){display:none!important;} html body :is(#users#users,#tlogins#tlogins) .uzr.member-artwork-row::before, html body :is(#users#users,#tlogins#tlogins) .uzr.member-artwork-row::after{ display:none!important;content:none!important; } /* V231.00: top-aligned member artwork, with a 72px frame and 60px photo opening. */ html body :is(#users#users,#tlogins#tlogins) .uzr.member-has-frame:not(.member-has-row-banner){ --member-artwork-min-height:74px; min-height:74px!important; } html body :is(#users#users,#tlogins#tlogins) .uzr.member-has-frame:not(.member-artwork-row){padding-left:86px!important;} html body :is(#users#users,#tlogins#tlogins) .uzr.member-has-frame:has(> .member-row-content) > :is(.member-avatar-composite,.u-pic){ position:absolute!important;left:8px!important;top:1px!important;bottom:auto!important;right:auto!important; width:72px!important;min-width:72px!important;max-width:72px!important; height:72px!important;min-height:72px!important;max-height:72px!important; margin:0!important;transform:none!important; } html body :is(#users#users,#tlogins#tlogins) .uzr.member-artwork-row.member-has-cover > .u-pic{ position:absolute!important;left:12px!important;top:3px!important;bottom:auto!important;right:auto!important; width:60px!important;min-width:60px!important;max-width:60px!important; height:60px!important;min-height:60px!important;max-height:60px!important; margin:0!important;transform:none!important;z-index:2!important; } html body :is(#users#users,#tlogins#tlogins) .uzr.member-artwork-row.member-has-frame > :is(.member-avatar-composite,.u-pic){ left:12px!important;top:1px!important;bottom:auto!important;margin:0!important;width:72px!important;min-width:72px!important;max-width:72px!important; height:72px!important;min-height:72px!important;max-height:72px!important;z-index:2!important; } html body :is(#users#users,#tlogins#tlogins) .uzr.member-artwork-row.member-has-frame > .member-row-content{left:88px!important;} html body :is(#users#users,#tlogins#tlogins) .member-avatar-composite > .frame-photo-window{ left:6px!important;top:6px!important;width:60px!important;height:60px!important; } html body :is(#users#users,#tlogins#tlogins) .member-avatar-composite > .member-avatar-frame-layer{ background-size:contain!important;background-position:center!important;image-rendering:auto!important; } /* Cover and frame members share the same compact, colored presence indicator. */ html body.site-in-room #users#users .uzr.member-has-cover:not(.member-has-row-banner) > .ustat{ display:block!important;visibility:visible!important;position:absolute!important; top:1px!important;left:1px!important;right:auto!important;bottom:auto!important; width:12px!important;min-width:12px!important;max-width:12px!important; height:12px!important;min-height:12px!important;max-height:12px!important; margin:0!important;padding:0!important;border:0!important;border-radius:0!important; object-fit:fill!important;box-shadow:0 0 0 1px rgba(255,255,255,.88),0 0 3px rgba(0,0,0,.24)!important; animation:memberPresenceSquareBlink .9s steps(1,end) infinite!important;z-index:18!important; } /* Preview and gallery obey the same limits, including very wide uploaded GIFs. */ html body .member-banner-frame-panel .mbf-preview.member-artwork-row{ display:block!important;position:relative!important;width:100%!important; height:auto!important;min-height:var(--member-artwork-min-height,64px)!important;max-height:93px!important; padding:0!important;overflow:hidden!important;box-sizing:border-box!important; } html body .member-banner-frame-panel .mbf-preview.member-artwork-row > img.member-row-artwork{ min-height:calc(var(--member-artwork-min-height,64px) - 2px)!important;max-height:91px!important; } html body .member-banner-frame-panel .mbf-preview.member-artwork-row > :is(.u-pic,.member-avatar-composite){ position:absolute!important;left:12px!important;top:3px!important;bottom:auto!important;right:auto!important; width:60px!important;height:60px!important;min-width:60px!important;max-width:60px!important; min-height:60px!important;max-height:60px!important;margin:0!important;transform:none!important;z-index:2!important; } html body .member-banner-frame-panel .mbf-preview.member-has-frame{ --member-artwork-min-height:74px;min-height:74px!important; } html body .member-banner-frame-panel .mbf-preview.member-has-frame > :is(.u-pic,.member-avatar-composite){ position:absolute!important;left:12px!important;top:1px!important;bottom:auto!important;right:auto!important; width:72px!important;height:72px!important;min-width:72px!important;max-width:72px!important; min-height:72px!important;max-height:72px!important;margin:0!important;transform:none!important; } html body .member-banner-frame-panel .mbf-preview.member-has-frame .frame-photo-window{ display:block!important;position:absolute!important;overflow:hidden!important;border-radius:50%!important; left:6px!important;top:6px!important;width:60px!important;height:60px!important;margin:0!important;padding:0!important;border:0!important; } html body .member-banner-frame-panel .mbf-preview.member-has-frame .frame-photo-window > img.u-pic{ position:absolute!important;inset:0!important;width:100%!important;height:100%!important; min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important; margin:0!important;padding:0!important;border:0!important;border-radius:50%!important;transform:none!important; } html body .member-banner-frame-panel .mbf-preview .member-avatar-frame-layer{ width:100%!important;height:100%!important;min-width:0!important;min-height:0!important; max-width:none!important;max-height:none!important;inset:0!important;background-size:contain!important; } html body .member-banner-frame-panel .mbf-preview.member-artwork-row > .mbf-preview-info{ position:absolute!important;left:76px!important;right:5px!important;top:2px!important;bottom:0!important; display:flex!important;flex-direction:column!important;justify-content:flex-start!important;min-width:0!important; } html body .member-banner-frame-panel .mbf-preview.member-has-frame > .mbf-preview-info{ position:absolute!important;left:88px!important;right:5px!important;top:2px!important;bottom:0!important; display:flex!important;flex-direction:column!important;justify-content:flex-start!important; } html body .member-banner-frame-panel .mbf-banners{grid-template-columns:minmax(0,1fr)!important;} html body .member-banner-frame-panel .mbf-banner-choice, html body .member-row-banner-panel .member-row-banner-preview{ display:block!important;width:100%!important;height:auto!important;min-height:64px!important;max-height:93px!important; padding:0!important;overflow:hidden!important;box-sizing:border-box!important; } html body .member-banner-frame-panel .mbf-banner-choice-image, html body .member-row-banner-panel .member-row-banner-preview img{ display:block!important;width:100%!important;height:auto!important;min-height:62px!important;max-height:89px!important; object-fit:fill!important;object-position:center!important;image-rendering:auto!important;margin:0!important; } /* List portraits have no duplicate CSS background behind the actual image. */ html body :is(#users#users,#tlogins#tlogins,#d2#d2,#chats#chats) img.u-pic, html body .private-window img.u-pic, html body .member-banner-frame-panel img.u-pic{ object-fit:contain!important;object-position:center!important;background-image:none!important; background-size:contain!important;image-rendering:auto!important; } html body :is(#users#users,#tlogins#tlogins) .member-has-frame img.u-pic, html body .member-banner-frame-panel .mbf-preview.member-has-frame img.u-pic{ object-fit:cover!important;object-position:center!important;background-image:none!important; } html body :is(#users,#tlogins,#d2,#chats) img:is(.u-ico,.co,.emoi),html body.site-in-room .emobox{ object-fit:contain!important;object-position:center!important;image-rendering:auto!important; } html body.site-in-room :is(.room-mic-btn,.room-mic-slot,.room-mic-seat,.fresh-mic-seat).has-custom-mic-icon{ background-size:contain!important;background-position:center!important;image-rendering:auto!important; } /* One fixed photo stage for both simple and privileged profiles; no mismatched crop. */ html body #upro#upro .upro-topbox{ display:block!important;position:relative!important;flex:0 0 auto!important; height:clamp(120px,32vh,225px)!important;min-height:0!important;max-height:none!important; padding:0!important;overflow:hidden!important; } html body #upro#upro .upro-topbox > .upro-avatar{ display:block!important;position:absolute!important;inset:0!important; width:100%!important;min-width:0!important;max-width:100%!important; height:100%!important;min-height:0!important;max-height:100%!important; margin:0!important;padding:0!important;border:0!important;flex:none!important; background-image:none!important;transform:none!important;overflow:hidden!important; } html body #upro#upro .upro-avatar > img.upro-avatar-image{ display:block!important;width:100%!important;height:100%!important; min-width:0!important;min-height:0!important;max-width:100%!important;max-height:100%!important; object-fit:contain!important;object-position:center!important;image-rendering:auto!important; margin:0!important;padding:0!important;border:0!important;filter:none!important;transform:none!important; } /* Restore the soft colored sides behind the sharp, complete profile picture. */ html body #upro#upro .upro-photo-blur{ display:block!important;position:absolute!important;inset:-18px!important;z-index:0!important; width:calc(100% + 36px)!important;height:calc(100% + 36px)!important; max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:center!important; filter:blur(16px) saturate(.92)!important;-webkit-filter:blur(16px) saturate(.92)!important; transform:scale(1.12)!important;opacity:1!important;pointer-events:none!important; } html body #upro#upro .upro-topbox > .upro-avatar{z-index:1!important;background-color:transparent!important;} html body #profileImageViewer.profile-image-viewer{ z-index:2147483646!important;inset:0!important;padding:48px 8px 8px!important; align-items:center!important;justify-content:center!important; } html body #profileImageViewerImg.profile-image-viewer-img{ width:100%!important;height:100%!important;min-width:0!important;min-height:0!important; max-width:100%!important;max-height:100%!important;object-fit:contain!important; object-position:center!important;box-shadow:none!important;transform:none!important; } /* ===== END V230.92 IMAGE LAYOUT ===== */ /* The list ends above the 34px composer and the navigation row at every size. */ html body.site-in-room .dpnl.bg.tab-content{ bottom:calc(var(--chat-bottom-bar,35px) + 34px)!important; } /* Native zoom lays out and paints text/icons/images at the selected size. Layout containment keeps fixed panels relative to the compensated chat root, as with the legacy transform fallback, without a scaled bitmap of the chat. */ @supports (zoom:1){ body.bg.site-in-room.chat-full-page-zoom > .dad{ zoom:var(--chat-ui-zoom,1)!important; transform:none!important; contain:layout!important; } } /* ===== END V230.90 ===== */ /* ===== V230.93 MEMBER NUMBERS, ENTRY CHOICE AND PROFILE NOTICE ===== */ /* Width only: existing anchors, controls and composer clearance remain. */ html body .filter-panel, html body #memberBannerFramePanel.member-banner-frame-panel, html body #memberRowBannerPanel.member-banner-frame-panel{ width:350px!important;max-width:calc(100vw - 16px)!important; } html body :is(#users#users,#tlogins#tlogins) .uzr > .member-number{ position:absolute!important;top:19px!important;right:4px!important;left:auto!important; width:auto!important;max-width:36px!important;height:13px!important;margin:0!important;padding:0!important; color:#555!important;font:400 10px/13px "Times New Roman",Times,serif!important; direction:ltr!important;text-align:right!important;white-space:nowrap!important; overflow:hidden!important;text-overflow:ellipsis!important;z-index:4!important; } html body :is(#users#users,#tlogins#tlogins) .uzr.member-has-cover > .member-number{ color:#fff!important;text-shadow:0 1px 2px #000,0 0 3px #000!important; } html body :is(#users#users,#tlogins#tlogins) .uzr > .member-number[hidden]{display:none!important;} html body :is(#users#users,#tlogins#tlogins) .uzr:not(.member-artwork-row):has(> .member-row-content){padding-right:40px!important;} html body :is(#users#users,#tlogins#tlogins) .uzr.member-artwork-row > .member-row-content{right:40px!important;} /* Same sender/recipient check governs both this class and the send handler. */ html body #upro#upro .ugift.profile-gift-allowed:not(.perm-hidden){display:flex!important;} .profile-notice-dialog{ position:fixed;box-sizing:border-box;width:340px;max-width:calc(100vw - 16px); margin:0;padding:0 6px 6px;background:#f4f4f4;border:1px solid #8ba3a1;border-radius:3px; box-shadow:0 5px 22px #0005;color:#222;overflow:auto; font:14px/1.4 "Times New Roman",Times,serif;direction:rtl; } .profile-notice-dialog *{box-sizing:border-box;} .profile-notice-head{ display:flex;align-items:center;justify-content:space-between;direction:ltr; height:32px;margin:0 -6px 5px;padding:0 7px;color:#fff;font-weight:bold; background:var(--site-header-bg,var(--chat-header,#4d7d7b)); } .profile-notice-close{border:0;background:transparent;color:inherit;font:bold 25px/28px Arial;cursor:pointer;padding:0 3px;} .profile-notice-recipient{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 2px 4px;font-size:12px;} .profile-notice-input{ display:block;width:100%;height:78px;min-height:56px;max-height:180px;resize:vertical; margin:0;padding:6px;border:1px solid #ccc;border-radius:0;background:#fff;color:#111; font:14px/1.5 "Times New Roman",Times,serif;direction:rtl;unicode-bidi:plaintext; } .profile-notice-input:focus{outline:2px solid var(--site-header-bg,#4d7d7b);outline-offset:-2px;} .profile-notice-actions{display:flex;align-items:center;justify-content:space-between;margin-top:5px;} .profile-notice-send{border:0;padding:6px 9px;color:white;background:var(--site-header-bg,#4d7d7b);font:bold 14px "Times New Roman",Times,serif;cursor:pointer;} .profile-notice-send:disabled{opacity:.65;cursor:default;} .profile-notice-emoji{padding:0 3px;border:0;background:none;font-size:24px;line-height:32px;cursor:pointer;} .profile-notice-error{font-size:12px;color:#a52828;} .profile-notice-error:empty{display:none;} /* Original distinguished animation retained; the royal choice uses a separate crest. */ .royal-welcome-layer{left:12px;max-width:calc(100vw - 24px);} .royal-entry-toast{max-width:calc(100vw - 24px);} .royal-entry-crowned{ --royal-accent:#174b75;--royal-jewel:#57c6ff;--royal-glow:#a5dcff; width:350px;min-height:178px;filter:drop-shadow(0 7px 10px #0007); } .royal-entry-crowned.royal-entry-female{--royal-accent:#75214c;--royal-jewel:#ec66ad;--royal-glow:#ffd1e9;} .royal-entry-crowned .royal-entry-aura{ inset:30px 15px 20px 0;background:radial-gradient(ellipse at 25% 50%,var(--royal-glow),transparent 68%); box-shadow:none;opacity:.65; } .royal-entry-crowned .royal-entry-pic-wrap{left:10px;right:auto;top:48px;width:112px;height:112px;z-index:3;} .royal-entry-crowned .royal-entry-pic{left:12px;right:auto;top:12px;width:88px;height:88px;object-fit:cover;border:2px solid #fff1c0;} .royal-entry-crowned .royal-entry-frame{ inset:0;animation:none;border:3px double #ffe9a5; background:repeating-conic-gradient(#fff4c7 0deg 6deg,#b78229 7deg 16deg,#ffdf82 17deg 23deg); mask:radial-gradient(circle,transparent 57%,#000 59%); -webkit-mask:radial-gradient(circle,transparent 57%,#000 59%); filter:drop-shadow(0 0 4px #f6d278); } .royal-entry-crown{position:absolute;left:-14px;top:-46px;width:140px;height:88px;overflow:visible;z-index:4;filter:drop-shadow(0 3px 3px #412708aa);} .royal-crown-jewel{fill:var(--royal-jewel);} .royal-entry-crowned .royal-entry-ribbon{ left:101px;right:0;top:78px;min-width:0;height:64px;padding:6px 17px 7px 20px; border:2px solid #e2be65;border-radius:2px 10px 10px 2px;gap:2px;flex-direction:column; background:linear-gradient(115deg,#080f18,var(--royal-accent) 58%,#17202a); box-shadow:inset 0 1px 0 #fff9,inset 0 -3px 0 #9a682b,0 3px 8px #0005; text-shadow:0 1px 2px #000; } .royal-entry-crowned .royal-entry-ribbon:after{display:none;} .royal-entry-crowned .royal-entry-title{color:#fce3a0;font-size:12px;max-width:100%;} .royal-entry-crowned .royal-entry-name{color:#fff8e1;font-size:19px;line-height:26px;max-width:100%;} .royal-entry-crowned .royal-entry-sub{left:130px;right:8px;top:149px;text-align:center;font-size:11px;color:#ffe8ab;background:#151a24e6;box-shadow:none;padding:2px 5px;} .royal-entry-spark{position:absolute;left:8px;top:21px;width:20px;height:20px;z-index:5;background:#fff9de;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:royalCrestShine 1.8s ease-in-out infinite;} @keyframes royalCrestShine{0%,100%{opacity:.25;transform:scale(.6) rotate(0deg);}50%{opacity:1;transform:scale(1.15) rotate(25deg);}} @media(max-width:360px){ .royal-entry-toast:not(.royal-entry-crowned) .royal-entry-ribbon{min-width:0;width:calc(100% - 98px);gap:3px;padding:0 12px;} .royal-entry-toast:not(.royal-entry-crowned) .royal-entry-ribbon:after{display:none;} .royal-entry-title{overflow:hidden;text-overflow:ellipsis;} } @media(prefers-reduced-motion:reduce){ .royal-entry-toast{transition:none;transform:none;} .royal-entry-frame,.royal-entry-spark{animation:none;} } /* ===== END V230.93 ===== */ /* ===== V230.94 EXIT, CONVERSATION EMOJI AND NOTICE REPLIES ===== */ html body.chat-exiting :is(.dpnl,.modal,#cw,#pop,.private-window,.chat-front-popup,.member-banner-frame-panel,.filter-panel,#roomVoiceBar,#voiceControlPanel,#freshVoiceBar,#d0,#room){ display:none!important;visibility:hidden!important;pointer-events:none!important; } html body.chat-exiting #tlogins{display:block!important;visibility:visible!important;} html body #d2 .u-msg img.emoi, html body .private-window .d2 .u-msg img.emoi, html body .profile-notice-body img.emoi{ width:24px!important;max-width:24px!important;height:auto!important;max-height:24px!important; vertical-align:middle!important;object-fit:contain!important;image-rendering:auto!important; } /* The gift action remains discoverable on a super profile, with delivery eligibility enforced by the client handler and the server. */ html body #upro#upro .ugift.profile-gift-visible:not(.perm-hidden){display:flex!important;} html body #upro#upro .ugift.profile-gift-visible[aria-disabled="true"]{opacity:.72;} html body .profile-notice-popup{ width:260px;max-width:calc(100% - 24px)!important;box-sizing:border-box;cursor:default; padding:5px 7px 7px!important;border-radius:5px;overflow:hidden; } .profile-notice-popup .profile-notice-dismiss{ position:absolute;top:3px;right:4px;width:22px;height:22px;padding:0;border:0; background:transparent;color:#4d7d7b;font:22px/22px Arial;cursor:pointer; } .profile-notice-sender{display:flex;align-items:center;gap:6px;clear:both;margin:6px 0 4px;min-width:0;} .profile-notice-avatar{width:36px!important;height:36px!important;flex:0 0 36px;object-fit:contain;border-radius:4px;} .profile-notice-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:bold;} .profile-notice-body{clear:both;display:block;width:100%;padding:5px;text-align:center;direction:rtl;white-space:pre-wrap;overflow-wrap:anywhere;} .profile-notice-reply{ display:block;float:left;clear:both;margin:3px 0 0;padding:3px 10px;border:0;border-radius:16px; background:#fff;color:var(--site-header-bg,#4d7d7b);font:bold 12px/20px "Times New Roman",Times,serif;cursor:pointer; } .profile-notice-reply[hidden]{display:none!important;} /* ===== END V230.94 ===== */ /* V230.94: reference panel bounds and popups in the same layout as their buttons. */ html body.site-in-room .dpnl.bg.tab-content{ top:0!important;bottom:var(--chat-bottom-bar,35px)!important; width:min(350px,75%)!important;min-width:0!important;max-width:min(350px,75%)!important; } html body.site-in-room #chatFloatingLayer{ position:absolute!important;inset:0!important;margin:0!important;padding:0!important; border:0!important;overflow:visible!important;pointer-events:none!important;z-index:2147483600!important; } html body #chatFloatingLayer > .chat-local-popup{ pointer-events:auto!important;box-sizing:border-box!important; min-width:0!important;min-height:0!important;height:auto!important; overflow-x:hidden!important;overflow-y:auto!important;zoom:1!important;transform:none!important; } html body.chat-exiting #chatFloatingLayer{display:none!important;} /* V230.97: keyboard layout restored to V230.88–V230.93. The normal document handles focus/keyboard panning. Only the explicit chat zoom control uses layout-viewport dimensions; popups keep local coordinates. */ /* V230.98: member links; scoped to their controls, never the chat viewport. */ html body #settings#settings #settingsSocialLink{ display:flex!important;align-items:center!important;justify-content:space-between!important;gap:9px!important; position:relative!important;overflow:hidden!important;min-height:42px!important;padding:3px 12px!important; color:#fff!important;background:#08090c!important;border:1px solid #414452!important;border-radius:4px!important; text-shadow:0 1px 4px #000!important;cursor:pointer!important;order:7!important; } html body #settingsSocialLink .social-platform{ display:inline-flex!important;align-items:center!important;width:32px!important;height:32px!important; flex:0 0 32px!important;animation:memberSocialFloat 3.4s ease-in-out infinite; } html body #settingsSocialLink .social-platform:nth-of-type(2){animation-delay:-1.1s;} html body #settingsSocialLink .social-platform:last-child{animation-delay:-2.2s;} html body #settingsSocialLink .social-setting-title{flex:1!important;text-align:center!important;font-weight:bold!important;} html body #settingsSocialLink svg,html body .member-social-link svg{display:block!important;width:100%!important;height:100%!important;pointer-events:none!important;} @keyframes memberSocialFloat{0%,100%{transform:rotate(-7deg) translateY(1px);filter:drop-shadow(0 0 2px #39d9e5);}50%{transform:rotate(7deg) translateY(-2px);filter:drop-shadow(0 0 4px #d444b9);}} /* V231.01: never expose member media controls on the login page. */ html body #tlogins#tlogins .member-social-link.member-social-link{display:none!important;} html body #users#users .uzr.member-has-social{position:relative!important;} html body #users#users .uzr.member-has-social > button.member-social-link.member-social-link{ display:block!important;position:absolute!important;left:auto!important;right:4px!important;top:3px!important;bottom:auto!important; width:24px!important;height:23px!important;min-width:24px!important;min-height:23px!important; padding:1px!important;margin:0!important;border:0!important;border-radius:5px!important; background:rgba(255,255,255,.92)!important;box-shadow:0 1px 3px #0005!important;z-index:8!important;cursor:pointer!important; } html body .member-social-link:focus-visible,html body #settingsSocialLink:focus-visible{outline:2px solid #20acdd!important;outline-offset:2px;} html body .member-social-overlay{position:fixed;inset:0;z-index:2147482000;background:#0008;display:flex;align-items:center;justify-content:center;padding:12px;box-sizing:border-box;} html body .member-social-editor{width:480px;max-width:100%;max-height:90vh;overflow:auto;background:#fff;color:#172b3b;border-radius:10px;box-shadow:0 12px 36px #0006;} html body .member-social-editor header{display:flex;align-items:center;justify-content:space-between;min-height:46px;padding:8px 12px;color:#fff;} html body .member-social-editor form{padding:14px;margin:0;} html body .member-social-editor label{display:block;float:none;margin:10px 0 4px;} html body #memberSocialUrl{display:block;box-sizing:border-box;width:100%;height:44px;min-height:44px;font-size:16px!important;border:1px solid #89939f;border-radius:6px;padding:8px;background:#fff;color:#18252f;} html body .member-social-editor .social-form-error{min-height:22px;margin:6px 0;color:#ae1e30;} html body .member-social-editor footer{display:flex;gap:7px;justify-content:flex-start;flex-wrap:wrap;} html body .member-social-editor .social-close,html body #memberSocialMedia .social-close{background:#e91926;color:white;border:0;cursor:pointer;width:30px;height:30px;border-radius:50%;font-size:22px;line-height:28px;} html body #memberSocialMedia{position:fixed;z-index:2147481000;left:24px;top:60px;width:600px;max-width:calc(100vw - 48px);height:680px;max-height:calc(100vh - 104px);display:flex;flex-direction:column;background:#070708;color:#fff;border:1px solid #313135;border-radius:10px;box-shadow:0 5px 20px #0007;overflow:hidden;} html body #memberSocialMedia header{display:flex;align-items:center;gap:7px;flex:0 0 44px;padding:6px 9px;box-sizing:border-box;direction:ltr;} html body #memberSocialMedia .social-media-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;} html body #memberSocialMedia .social-minimize{width:30px;height:30px;border:0;border-radius:50%;background:#2945ed;color:#fff;font-size:22px;cursor:pointer;} html body #memberSocialMedia .social-media-body{display:flex;flex:1;flex-direction:column;min-height:0;} html body #memberSocialMedia .social-media-player{flex:1;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center;} html body #memberSocialMedia iframe{display:block;width:100%;height:100%;border:0;background:#080809;} html body #memberSocialMedia .social-media-external{display:block;flex:0 0 auto;color:#fff;text-align:center;padding:9px;border-top:1px solid #333;text-decoration:underline;direction:rtl;} html body #memberSocialMedia .social-media-fallback{padding:25px;text-align:center;direction:rtl;} html body #memberSocialMedia .social-media-fallback svg{width:64px;height:64px;} html body #memberSocialMedia.social-minimized{height:44px!important;width:300px;} html body #memberSocialMedia.social-minimized .social-media-body{display:none!important;} @media(max-width:640px){html body #memberSocialMedia{left:10px;top:16px;width:calc(100vw - 20px);max-width:calc(100vw - 20px);max-height:calc(100vh - 90px);}} @media(prefers-reduced-motion:reduce){html body #settingsSocialLink .social-platform{animation:none;}} /* V230.99: media on the right; list portraits fill their existing frame. */ html body #users#users .uzr.member-has-social > :is(.co,.member-number){right:32px!important;left:auto!important;} html body #users#users .uzr.member-has-social > .member-row-content{right:68px!important;} html body :is(#users#users,#tlogins#tlogins) .uzr.uzr img.u-pic.u-pic{ object-fit:cover!important;object-position:center!important;background-size:cover!important; } /* V231.03: one contestant uses the complete karaoke stage. */ .karaoke-contestants.karaoke-solo{grid-template-columns:minmax(0,1fr)!important;} /* V231.09: reference orange text, count and icon; retain button background. */ html body.site-in-room #d0 .bottom-nav-alert:not(#notifyGuard1):not(#notifyGuard2):not(#notifyGuard3), html body.site-in-room #d0 .bottom-nav-alert:not(#notifyGuard1):not(#notifyGuard2):not(#notifyGuard3)::before, html body.site-in-room #d0 .bottom-nav-alert:not(#notifyGuard1):not(#notifyGuard2):not(#notifyGuard3) span{ color:#ffa500!important;text-shadow:none!important;animation:none!important; } /* V231.10: stories in the online list, fixed left/right reference layout. */ html body #users #wallStories{direction:ltr!important;text-align:left!important;display:flex!important;gap:6px!important;position:relative!important;clear:both!important;min-height:94px!important;padding:6px!important;flex-wrap:nowrap!important;} html body #users #wallStories .story-bubble{flex:0 0 60px!important;width:60px!important;margin:0!important;} html body #users #wallStories .story-owner-ring{width:60px!important;height:80px!important;border-radius:18px!important;} html body #users #wallStories .story-owner-ring:before,html body #users #wallStories .story-owner-ring:after{border-radius:18px!important;} html body #users #wallStories .story-thumb{position:relative!important;width:54px!important;height:74px!important;border-radius:15px!important;overflow:hidden!important;} html body #users #wallStories .story-owner-photo,html body #users #wallStories .story-add-photo{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border-radius:15px!important;object-fit:cover!important;} html body #users #wallStories .add-thumb .fa-plus{position:absolute!important;left:16px!important;bottom:3px!important;width:25px!important;height:25px!important;line-height:25px!important;border-radius:50%!important;background:#fff!important;color:#345c73!important;z-index:5!important;} html body #users #wallStories .add-story .story-name{display:none!important;} html body #storyViewer .story-viewer-head{left:10px!important;right:auto!important;top:22px!important;direction:rtl!important;background:rgba(255,255,255,.88)!important;color:#222!important;border-radius:17px!important;padding:8px 12px!important;max-width:68%!important;} html body #storyViewer .story-author-name,html body #storyViewer .story-author-time{color:#222!important;text-shadow:none!important;} html body #storyViewer .story-viewer-tools{right:10px!important;left:auto!important;top:22px!important;} html body #storyViewer .story-viewer-bottom{left:10px!important;right:auto!important;top:60%!important;bottom:auto!important;} html body #storyViewer .story-side-actions{direction:ltr!important;gap:2px!important;} html body #storyViewer .story-side-actions button{border:1px solid #ffffff20!important;border-radius:28px!important;background:#0004!important;width:48px!important;height:48px!important;font-size:32px!important;line-height:48px!important;} html body #storyViewer .story-like-btn.active{color:#ec0050!important;} html body #storyViewer .story-reply-count{color:white!important;font-size:15px!important;margin-bottom:8px!important;} html body #storyViewer .story-sheet{position:absolute!important;left:0!important;right:0!important;bottom:0!important;height:74%!important;background:white!important;color:#222!important;border-radius:26px 26px 0 0!important;z-index:300!important;display:flex!important;flex-direction:column!important;direction:rtl!important;overflow:hidden!important;} html body #storyViewer .story-sheet[hidden]{display:none!important;} .story-sheet-head{position:relative;text-align:center;padding:14px;border-bottom:1px solid #eee;flex:none;} .story-sheet-head button{position:absolute;right:10px;top:8px;border:0;border-radius:50%;font-size:26px;background:#f4f4f4;color:#222;} .story-sheet-list{flex:1;min-height:0;overflow:auto;padding:12px;} .story-comment{padding:10px;border-bottom:1px solid #eee;text-align:right;overflow-wrap:anywhere;} .story-comment p{margin:5px 0;white-space:pre-wrap;} .story-sheet-form{display:flex;flex:none;gap:6px;padding:8px;direction:ltr;border-top:1px solid #eee;} .story-sheet-form input{flex:1;min-width:0;border:1px solid #ddd;border-radius:22px;padding:9px;direction:rtl;font-size:16px;} .story-sheet-form button{border:0;border-radius:22px;background:#345c73;color:white;padding:8px 14px;} html body #storyViewer .story-nav{display:block!important;position:absolute!important;top:42%!important;z-index:125!important;width:32px!important;height:44px!important;opacity:.5!important;} html body #storyViewer .story-prev{left:0!important;right:auto!important;} html body #storyViewer .story-next{right:0!important;left:auto!important;} html body #storyViewer.single-story .story-nav{display:none!important;} html body #storyViewer .story-progress-bars,html body #storyViewer .story-viewer-tools{direction:ltr!important;} /* V231.11 — Yemen 26 September. Scoped decorative theme; no layout/viewport timers. */ .yemen-national-art{display:none!important;} html body.yemen-national-theme{--chat-template:#5c1823!important;--chat-buttons:#5c1823!important;--site-button-bg:#5c1823!important;--theme-primary:#5c1823!important;--theme-header-bg:#23191b!important;--theme-outer-bg:#171519!important;} /* V231.14: the main site banner remains visible independently of the occasion banner. */ html body.yemen-national-theme #yemenNationalWelcome{display:block!important;position:relative;float:none;clear:both;box-sizing:border-box;width:100%;overflow:hidden;background:radial-gradient(ellipse at 90% 15%,#901e354d,transparent 50%),radial-gradient(ellipse at 8% 70%,#006b473d,transparent 45%),#141418;color:#f8e7bb;border:1px solid #b99450;isolation:isolate;} #yemenNationalWelcome .yn-tricolor{height:5px;background:linear-gradient(to left,#c61d35 0 33.33%,#fff 33.33% 66.66%,#171719 66.66%);} #yemenNationalWelcome .yn-crownline{display:flex;justify-content:space-between;gap:8px;padding:10px 16px;border-bottom:1px solid #d6b36c33;color:#d6bd88;font:12px/1.6 Tahoma,Arial,sans-serif;} #yemenNationalWelcome .yn-celebration{position:relative;text-align:center;padding:20px 12px 42px;background:url('yemen-national-skyline.svg') center bottom/auto 125px repeat-x;} #yemenNationalWelcome .yn-celebration:before{content:"";position:absolute;inset:8px;pointer-events:none;border:1px solid #d6b36c30;clip-path:polygon(0 0,20% 0,20% 1%,1% 1%,1% 20%,0 20%,0 0,100% 0,100% 20%,99% 20%,99% 1%,80% 1%,80% 0);} #yemenNationalWelcome .yn-flags{display:flex;align-items:center;justify-content:center;gap:18px;} #yemenNationalWelcome .yn-flags img,#yemenNationalWelcome .yn-yemen-flag{display:block;object-fit:contain;width:66px;height:44px;border:1px solid #e8d09a66;box-shadow:0 4px 14px #0006;} #yemenNationalWelcome .yn-yemen-flag{background:linear-gradient(#ce1634 0 33.33%,#fff 33.33% 66.66%,#111 66.66%);} #yemenNationalWelcome .yn-flag-link{color:#d5b472;font-size:22px;} #yemenNationalWelcome .yn-date{display:inline-flex;direction:ltr;align-items:center;gap:12px;margin:5px 0 0;font:bold clamp(70px,12vw,100px)/1 Georgia,serif;color:#ecd49c;text-shadow:0 2px 1px #704f20,0 0 30px #f2c77230;} #yemenNationalWelcome .yn-date span{font:bold 20px/1.5 Tahoma,Arial,sans-serif;writing-mode:vertical-rl;color:#fff3cf;} #yemenNationalWelcome h2{font:bold clamp(25px,5vw,40px)/1.6 "Times New Roman",serif;color:#fff0c9;margin:0;} #yemenNationalWelcome .yn-tagline{font:13px/1.8 Tahoma,Arial,sans-serif;color:#e5d4bc;margin:3px 0;} #yemenNationalWelcome .yn-divider{display:flex;align-items:center;justify-content:center;gap:12px;color:#ccaa64;font-size:10px;margin:9px auto;width:min(75%,320px);} #yemenNationalWelcome .yn-divider:before,#yemenNationalWelcome .yn-divider:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,#c4a15c,transparent);} #yemenNationalWelcome .yn-solidarity{display:inline-block;max-width:100%;box-sizing:border-box;padding:7px 12px;margin:0;border:1px solid #d1ae6255;border-radius:5px;background:linear-gradient(100deg,#47202adb,#113d2edb);color:#fff4d8;font:bold clamp(13px,2.6vw,18px)/1.8 Tahoma,Arial,sans-serif;} #yemenNationalWelcome .yn-verse{position:relative;margin:9px 0 0;font:bold 17px/1.7 "Times New Roman",serif;color:#fff3d1;text-shadow:0 2px 5px #000;} #yemenNationalWelcome .yn-footer{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 24px;padding:9px 14px;border-top:1px solid #b9945066;background:#0e0e12;font:bold 12px/1.6 Tahoma,Arial,sans-serif;color:#ecd6a5;} #yemenNationalWelcome .yn-footer span{color:#c3b7a1;} html body.yemen-national-theme :is(.pnhead,.user-group-header,.upro-head){background:linear-gradient(115deg,#251c20,#681d2c,#251c20)!important;border-bottom:2px solid #b99450!important;color:#fff0ca!important;} html body.yemen-national-theme #room{background:#211a20!important;} html body.yemen-national-theme.site-in-room #d2:before{content:"🇾🇪 26 سبتمبر • يمن المجد والعزّة 🇾🇪\Aمن صنعاء إلى الرياض… أخوّة ووفاء وسلام 🇸🇦";display:block;box-sizing:border-box;white-space:pre-line;padding:14px 10px;text-align:center;font:bold 14px/1.9 "Times New Roman",serif;color:#ffeac0;background:linear-gradient(115deg,#281c23,#621c2b 50%,#143d30);border-bottom:2px solid #c4a15c;pointer-events:none;} html body.yemen-national-theme :is(#mainLoginLinks>a,#tlogins .nav-tabs>li>a){background:linear-gradient(110deg,#281c23,#622333)!important;color:#ffeac0!important;border-color:#b99450!important;} html body.yemen-national-theme.site-in-room #room > #d0 > label.ae{background:linear-gradient(115deg,#261e25,#5a2430)!important;border-color:#ac8b50!important;box-shadow:inset 0 2px 0 #efcf8350!important;} html body.yemen-national-theme #d0{border-top:2px solid #b99450!important;} /* Motion is isolated to ornament; it never blocks clicks or changes geometry. */ #yemenNationalWelcome .yn-flag-link{animation:yn-jewel-glow 4s ease-in-out infinite;} @keyframes yn-jewel-glow{0%,100%{opacity:.6;text-shadow:0 0 0 transparent;}50%{opacity:1;text-shadow:0 0 12px #f5d48b;}} @media(prefers-reduced-motion:reduce){#yemenNationalWelcome .yn-flag-link{animation:none;}} /* V231.12 — two wall tabs; panel remains in the existing flex layout. */ html body #wall .wall-contest-tabs{display:flex!important;flex:0 0 auto!important;width:100%;padding:4px;gap:4px;background:#f1f3f3;box-sizing:border-box;} html body #wall .wall-contest-tabs button{flex:1;min-width:0;border:0;border-radius:18px;padding:7px 3px;font:inherit;background:transparent;color:#333;} html body #wall .wall-contest-tabs button.active{background:var(--chat-buttons,#4d7c79);color:white;} html body #wall.contest-tab-open > :is(#wallSaudiClock,#d2bc,.wall-input-box){display:none!important;} html body #wall #wallContestPanel{flex:1 1 0!important;min-height:0;overflow-y:auto;overflow-x:hidden;width:100%;background:#f8f9fc;color:#18202b;box-sizing:border-box;padding:9px;font-size:14px;} html body #wall #wallContestPanel[hidden],html body #wall #wcHostControls[hidden]{display:none!important;} #wcFeedback{color:#b32c38;font-weight:bold;white-space:pre-wrap;} #wcContent h3{font-size:18px;line-height:1.6;margin:8px 0;overflow-wrap:anywhere;} #wcContent p{margin:6px 0;overflow-wrap:anywhere;} .wc-entry-note{color:#616b77;font-size:11px;} .wc-leader{display:flex;align-items:center;gap:8px;padding:9px;background:linear-gradient(115deg,#153442,#386c71);border:1px solid #d2b270;border-radius:9px;color:#fff1c9;} .wc-leader img{height:40px;width:40px;object-fit:cover;border-radius:50%;} .wc-leader .wc-badge{object-fit:contain;width:32px;height:32px;border-radius:0;} #wcContent .wc-question-image{display:block;max-height:300px;max-width:100%;width:100%;object-fit:contain;border-radius:8px;background:#15232d;} .wc-answer,.wc-results{padding:10px;border:1px solid #cbb264;background:#fff9de;border-radius:8px;margin:8px 0;} .wc-messages{max-height:200px;overflow-y:auto;background:white;padding:6px;border:1px solid #d9dfe4;margin-top:8px;} .wc-messages:empty{display:none;} #wcHostControls{padding:8px 0;} #wcHostControls .btn{margin:3px;white-space:normal;} #wcRoundForm{padding:8px;border:1px solid #bfcbd3;border-radius:6px;background:white;} #wcRoundForm summary{cursor:pointer;font-weight:bold;padding:6px;} #wcRoundForm input,#wcRoundForm select{display:block;box-sizing:border-box;max-width:100%;width:100%;margin:6px 0;padding:8px;min-height:36px;font-size:16px;} #wcGuessForm{display:flex;gap:5px;padding:8px 0;position:sticky;bottom:0;background:#f8f9fc;} #wcGuessForm input{flex:1;min-width:0;width:0;padding:8px;font-size:16px;} #wcGuessForm button{flex:0 0 auto;} html body .dpnl #wall > .wall-contest-tabs{grid-row:1!important;grid-column:1!important;} html body .dpnl #wall.contest-tab-open{grid-template-rows:auto minmax(0,1fr)!important;} html body .dpnl #wall #wallContestPanel{grid-row:2!important;grid-column:1!important;} /* V231.13 — native collapsed banner paints compactly before JavaScript loads. */ #yemenNationalWelcome > .yn-compact{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;list-style:none;padding:12px 10px;color:#ffe9b4;background:linear-gradient(110deg,#142c26,#49202e);font:bold 14px/1.7 Tahoma,Arial,sans-serif;min-height:48px;box-sizing:border-box;} #yemenNationalWelcome > .yn-compact::-webkit-details-marker{display:none;} #yemenNationalWelcome .yn-expand-label,#yemenNationalWelcome .yn-collapse-label{font-size:11px;white-space:nowrap;} #yemenNationalWelcome:not([open]) > :not(summary){display:none!important;} #yemenNationalWelcome:not([open]) .yn-collapse-label,#yemenNationalWelcome[open] .yn-expand-label{display:none;} #wcSessionOptions{padding:8px;border:1px solid #ccd3d9;border-radius:8px;background:#fff;} #wcSessionOptions label{display:block;margin:6px 0;} #wcSessionOptions input,#wcSessionOptions select{font-size:16px;padding:6px;max-width:100%;box-sizing:border-box;} .wc-session-status{padding:8px;background:#fff3cf;border:1px solid #d8bc76;font-weight:bold;border-radius:6px;} /* V231.19: name on its own line, with a consistent gap before text/emoji. */ html body :is(#d2,.private-window .d2) .chat-message-row .chat-message-content{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:2px!important;padding:1px 2px 2px!important;} html body :is(#d2,.private-window .d2) .chat-message-row .chat-message-content > div:first-child{min-height:22px!important;flex:0 0 auto!important;} html body :is(#d2,.private-window .d2) .chat-message-row .u-topic{padding:0 2px!important;margin-top:0!important;margin-bottom:0!important;line-height:22px!important;} html body :is(#d2,.private-window .d2) .chat-message-row .u-msg{padding:0 2px!important;margin:0!important;line-height:24px!important;min-height:24px;} html body :is(#d2,.private-window .d2) .chat-message-row .u-msg img.emoi{width:20px!important;height:20px!important;max-height:20px!important;max-width:20px!important;object-fit:contain!important;vertical-align:middle!important;} #filterMonitorButton{position:absolute;right:3px;top:65%;z-index:1050;border-radius:50%;border:2px solid #e19733;background:#192b37;color:#fff;width:34px;height:42px;padding:2px;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:14px;} #filterMonitorButton b{font-size:11px;line-height:12px;} #filterMonitorPanel{position:fixed;z-index:2200;border:2px solid var(--theme-header-bg,#4c7d7b);background:#f4f5fa;display:flex;flex-direction:column;box-sizing:border-box;font:13px/1.5 Tahoma,Arial;} #filterMonitorPanel header{display:flex;align-items:center;justify-content:space-between;padding:5px 8px;background:var(--theme-header-bg,#4c7d7b);color:white;} #filterMonitorPanel button{cursor:pointer;} #filterMonitorPanel .monitor-close{background:#d9534f;color:#fff;border:0;font-size:22px;} #filterMonitorPanel .monitor-clear{background:#c52239;color:#fff;border:0;padding:4px;} #filterMonitorPanel .monitor-scope{width:100%;height:30px;} #filterMonitorPanel .monitor-rows{overflow:auto;min-height:0;flex:1;padding:5px;} #filterMonitorPanel .monitor-card{border:1px solid #ddd;background:#fff;border-radius:4px;padding:7px;margin-bottom:7px;text-align:center;overflow-wrap:anywhere;} #filterMonitorPanel .monitor-type{display:inline-block;background:#c52239;color:white;border-radius:4px;padding:1px 24px;} #filterMonitorPanel .monitor-author{display:flex;gap:5px;align-items:center;text-align:right;} #filterMonitorPanel img{width:28px;height:28px;object-fit:cover;} #filterMonitorPanel p{margin:4px 0;background:#f7f7fa;white-space:pre-wrap;} body.site-in-room .site-subpage-links{display:none;} .site-subpage-links{padding:10px;text-align:center;} /* V231.19: profile reference heart and number, unaffected by RTL or theme color. */ html body #upro#upro .upro-btn.ulike{direction:ltr!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:0!important;color:#ff0000!important;} html body #upro#upro .upro-btn.ulike > i.fa{color:#ff0000!important;font-size:16px!important;line-height:1!important;margin:0!important;padding:0!important;} html body #upro#upro .upro-btn.ulike > .upro-btn-count{color:#ff0000!important;font:700 16px/1 Arial,sans-serif!important;letter-spacing:0!important;margin:0!important;padding:0!important;} /* V231.21 monitor dimensions are clamped to the visible viewport in JS. */ html body #filterMonitorPanel{overflow:hidden!important;box-sizing:border-box!important;} #filterMonitorPanel > header,#filterMonitorPanel > button,#filterMonitorPanel > select{flex:0 0 auto;min-width:0;max-width:100%;box-sizing:border-box;} #filterMonitorPanel .monitor-rows{min-width:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;} #filterMonitorPanel .monitor-card,#filterMonitorPanel .monitor-author{min-width:0;overflow-wrap:anywhere;} html body .fresh-music-btn{position:relative!important;} html body .fresh-music-btn .music-owner-name{position:absolute;left:1px;right:1px;bottom:0;display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:bold 8px/11px Arial!important;background:#17232c;color:#fff!important;pointer-events:none;} html body .fresh-music-btn.needs-play:after{content:'▶';position:absolute;right:0;top:0;background:#ffad28;color:#15232d;font:12px Arial;border-radius:50%;padding:2px;} #freshRoomMusicPanel .music-owner{font-weight:bold;color:#ffd67c;padding:3px 0;overflow-wrap:anywhere;}