:root{--room-bar:#7dc2cf;--room-dark:#70a9b6;--room-bg:#b8dee4;--room-panel:#e6f5fa}
.mobile-only{display:none!important}
/* The four original sheets replace the previous emoji sprite on both clients. */
.inline-smiley{background:none!important;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;vertical-align:middle;padding:0;border:0;flex:none}.inline-smiley img{width:100%;height:100%;object-fit:contain}.emoji-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:0;background:white;direction:ltr;padding:3px}.emoji-grid .inline-smiley{width:100%;height:auto;aspect-ratio:1}.emoji-panel{width:402px;max-width:calc(100vw - 16px);background:white}.emoji-tabs{background:var(--room-bar);display:flex;align-items:center;padding:8px;gap:13px;direction:ltr}.emoji-tabs button{background:transparent;border:0;opacity:.45;font-size:26px;min-width:30px}.emoji-tabs button.selected{opacity:1}.emoji-tabs #closeEmoji{margin-left:auto;opacity:1}.message-avatar,.bubble-content time{display:none}.bubble-content{display:contents}.chat-image{display:block;max-width:240px;max-height:280px;border-radius:8px;object-fit:contain}
.leave-overlay{position:fixed;inset:0;z-index:150;background:#fff5;display:flex;align-items:center;justify-content:center;direction:rtl}.leave-overlay section{width:100%;max-width:520px;background:white;box-shadow:0 0 2px #555;color:#111}.leave-overlay p{margin:0;padding:24px 18px;font:19px Tahoma;text-align:right;border-bottom:1px solid #ccc}.leave-overlay footer{display:flex;direction:ltr;justify-content:flex-end;gap:7px;padding:7px 12px;background:#f5f5f5}.leave-overlay button{border:1px solid var(--room-dark);border-radius:3px;background:var(--room-bar);min-width:90px;padding:10px 25px;color:#102a30;font:18px Tahoma}
#mediaPanel{position:fixed;z-index:45;bottom:58px;left:8px;display:flex;direction:ltr;background:white;border:1px solid #ccc;box-shadow:0 1px 5px #7776;padding:7px;gap:12px;color:#222}#mediaPanel>div{display:grid;grid-template-columns:1fr 1fr;gap:6px}#mediaPanel>div:last-child{grid-template-columns:1fr;border-left:1px solid #ddd;padding-left:8px}#mediaPanel b{grid-column:1/-1;font:13px Tahoma;text-align:center}#mediaPanel button{display:flex;align-items:center;flex-direction:column;border:0;background:#fafafa;font-size:25px;padding:6px}#mediaPanel button span{font:10px Tahoma}
.mobile-room-menu{position:fixed;right:5px;top:65px;z-index:55;display:flex;flex-direction:column;background:#303030;color:white;box-shadow:0 3px 8px #0007;width:170px;max-height:75dvh;overflow:auto;direction:rtl}.mobile-room-menu button{border:0;border-bottom:1px solid #666;background:transparent;color:white;padding:17px 12px;text-align:right;font:16px Tahoma}
.mobile-full-panel{position:fixed;inset:0;z-index:65;display:flex;flex-direction:column;background:var(--room-panel);direction:rtl;font:14px Tahoma;color:#333}.mobile-full-panel>header{background:var(--room-bar);display:flex;align-items:center;padding:7px;gap:8px;direction:ltr;min-height:52px;flex:none;border-bottom:1px solid var(--room-dark)}.mobile-full-panel>header>img{width:36px;height:36px;object-fit:contain}.mobile-full-panel>header>button{border:0;background:transparent;font:28px Arial;color:white}.mobile-full-panel>header nav{display:flex;flex:1;gap:8px;align-items:center}.mobile-full-panel>header nav button{border:1px solid #6596a4;border-radius:50%;height:31px;width:31px;padding:0;background:#95c8d3;color:#e7edf1;font-size:23px}.mobile-full-panel>header nav button.selected{background:#ca75a6;color:white;border-color:#a54482}.mobile-full-panel>h2{margin:0;padding:7px;text-align:center;background:var(--room-bar);color:white;font:16px Tahoma;flex:none}.mobile-full-panel #adminContent,.mobile-full-panel>form{overflow:auto;padding:12px;flex:1;min-height:0}.mobile-full-panel label{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin:10px 0}.mobile-full-panel input:not([type=radio],[type=checkbox],[type=range],[type=color]),.mobile-full-panel select,.mobile-full-panel textarea{width:100%;padding:9px;border:1px solid #ccc;border-radius:0;background:white;color:#222;font:15px Tahoma;min-width:0}.mobile-full-panel textarea{min-height:85px;resize:vertical}.mobile-full-panel input[type=number]{width:80px!important}.mobile-full-panel input[type=checkbox],.mobile-full-panel input[type=radio]{accent-color:var(--room-dark);width:20px;height:20px}.mobile-full-panel fieldset{border:0;border-top:1px solid #999;padding:10px 0;margin:18px 0}.mobile-full-panel fieldset label{justify-content:flex-start}.mobile-full-panel h3{font:17px Tahoma;color:#666;border-bottom:1px solid #999;padding-bottom:8px;margin-top:18px}.mobile-full-panel button:not(header button){border:1px solid var(--room-dark);background:var(--room-bar);color:#14323e;padding:8px;font:13px Tahoma}.mobile-full-panel footer{position:sticky;bottom:-12px;padding:8px;background:var(--room-bar);text-align:left;margin:14px -12px -12px}.mobile-full-panel footer button{background:var(--room-dark)!important;color:white!important;min-width:95px}.mobile-full-panel #adminStatus{padding:4px 12px;color:#b11;background:var(--room-panel);flex:none}.admin-row{padding:15px 0;border-bottom:1px solid #ccc;display:flex;justify-content:space-between;gap:12px;align-items:center}.admin-row strong{font-weight:normal}.admin-entry{background:#fff;border-bottom:1px solid #ccc;padding:12px 6px;position:relative}.admin-entry p{margin:7px 0}.admin-entry small{display:block;color:#777;direction:ltr;text-align:right}.admin-entry button{margin-top:9px}.admin-hint{font:12px/1.8 Tahoma;color:#687b83}.permission-member{display:flex;align-items:center;border-bottom:1px solid #ccc;padding:10px 0;gap:7px;direction:ltr}.permission-member>div{flex:1;min-width:0}.permission-member b{display:block}.permission-member small{font-size:10px;color:#777}.permission-icons{display:flex;gap:5px;color:#3798c8;font-size:17px}.permission-member>button{margin-left:auto}.mobile-full-panel [data-role=admin]{color:#1645cd}.mobile-full-panel [data-role=superadmin]{color:#278524}.mobile-full-panel [data-role=master]{color:#c92117}.mobile-full-panel [data-role=member]{color:#ae25d4}
@media(min-width:751px){.mobile-full-panel{inset:5vh 20%;box-shadow:0 5px 25px #0006}.mobile-room-menu{display:none!important}}
@media(max-width:750px){
 .mobile-only{display:flex!important}.brand-logo{background:url('/roomsyria-logo.png') center/contain no-repeat}.directory-header{height:75px;background:var(--room-bar);border:0;border-radius:0}.directory-window,.directory-header>nav,.action-strip{display:none}.directory-actions{height:75px}.directory-actions .brand-logo{width:62px;height:62px;top:6px;left:calc(50% - 31px);right:auto;transform:none}.directory-home{height:calc(100dvh - 130px);padding:0;display:block}.directory-sections{border:0;border-radius:0;height:100%}.directory-content{display:none;height:100%;border:0;border-radius:0}.mobile-directory-detail .directory-sections{display:none}.mobile-directory-detail .directory-content{display:flex}.section-row{height:58px;gap:9px;padding:4px 12px;direction:rtl}.section-row strong{font:15px Tahoma}.section-row .directory-flag{width:40px;height:38px;order:0;flex:none}.directory-counts{font-size:11px;justify-content:flex-start;gap:12px;flex-wrap:nowrap}.section-row.selected{background:white}.directory-heading{background:var(--room-panel);min-height:85px;gap:6px}.directory-heading h1{font:15px Tahoma;text-align:center}.directory-heading .room-tools{justify-content:center}.directory-heading input{font-size:13px;width:180px;max-width:100%}.directory-heading select{width:90px;font-size:11px}.directory-heading #mobileDirectoryBack{border:0;background:transparent;font:13px Tahoma;color:#356979;padding:6px}.directory-room{min-height:90px;padding:7px 12px}.directory-room-title{font:15px Tahoma}.room-users{font-size:12px}.room-enter{font-size:12px;padding:6px 15px}.favorite-room{font-size:28px}#mobileDirectoryNav{height:55px;position:fixed;bottom:0;left:0;right:0;align-items:stretch;justify-content:space-around;background:var(--room-bar);direction:rtl;z-index:5}#mobileDirectoryNav button{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:transparent;color:white;font-size:23px;border:0}#mobileDirectoryNav span{font:10px Tahoma}#mobileDirectoryNav button.selected{background:#ffffff20}.in-room #mobileDirectoryNav{display:none!important}
 body.in-room{background:var(--room-bg)}#inside{padding:0;height:100dvh;grid-template-rows:66px minmax(0,1fr);direction:ltr}.window-title,.classic-menu,.audio-row,.statusbar{display:none!important}#mobileHeader{background:var(--room-bar);border-bottom:2px solid var(--room-dark);align-items:center;justify-content:space-between;position:relative;padding:5px 8px;min-width:0;z-index:30}#mobileHeader .official-logo{position:absolute;width:44px;height:44px;object-fit:contain;left:calc(50% - 22px)}#mobileHeader nav{display:flex;gap:8px;align-items:center}#mobileHeader nav button{border:0;background:transparent;padding:0;font-size:27px;color:#f2d04b;line-height:1;min-width:24px;text-shadow:1px 1px #666}#mobileHeader #mobileMenuToggle{color:#f4f4f4;font-size:31px}#mobileMicState{display:flex;align-items:center;gap:3px;border:0;border-radius:9px;background:white;padding:4px;width:112px;min-height:48px;direction:ltr;color:#666;font:12px Tahoma}#mobileMicState img{width:25px;height:31px;object-fit:contain}#mobileMicState small{display:block;font-size:10px;margin-top:3px}.desktop-grid{display:block;min-height:0;padding:0;overflow:hidden}.desktop-grid .members{display:none}.show-mobile-members .desktop-grid .members{display:flex;position:fixed;z-index:40;inset:66px 0 0;background:var(--room-panel);width:auto;border:0;border-radius:0}.show-mobile-members .member-toolbar{background:var(--room-bar);height:38px}.show-mobile-members .person{min-height:58px;background:#fff;gap:10px;padding:8px;border-bottom:1px solid #ccc}.show-mobile-members .person .avatar-sprite{transform:scale(1.5);margin:0 5px}.show-mobile-members .person-name{font-size:16px!important}.show-mobile-members .room-brand{display:none}.show-mobile-members .member-bottom{height:42px;background:var(--room-bar);font-size:13px}.show-mobile-members #toggleMembers{margin-left:auto}.chat{height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto;border:0;border-radius:0;width:100%;min-height:0;background:var(--room-bg)}.chat-tabs{display:none}.show-mobile-private .chat-tabs{display:flex;position:fixed;z-index:35;inset:66px 0 auto;min-height:44px;background:white;direction:ltr;overflow:auto}.conversation{border:0;margin:0;padding:10px 8px;background-color:var(--room-bg);background-image:linear-gradient(#b8dee4ec,#b8dee4ec),url('/roomsyria-logo.png');background-size:auto,contain;background-repeat:repeat,repeat-y;background-position:center;min-height:0;overflow:auto}.welcome{margin:0 0 12px;padding:0;border:0;background:none}.welcome>div{background:white;border:0;border-radius:15px;min-height:0;padding:10px 6px;box-shadow:none}.welcome span,.welcome>div>span{display:none}.welcome b{font:16px Tahoma;color:#555}.messages{padding:0;gap:10px}.bubble{display:flex;align-items:flex-start;gap:7px;padding:0;margin:10px 0;background:transparent;min-height:35px;direction:ltr;grid-template-columns:none}.message-avatar{display:inline-block!important;margin-top:2px;position:static;flex:none}.bubble-content{display:block;background:white;border-radius:0 13px 13px 13px;position:relative;min-width:90px;max-width:calc(100% - 40px);padding:8px 10px;text-align:left;overflow-wrap:anywhere}.bubble-content:before{content:'';position:absolute;left:-8px;top:0;border-top:9px solid white;border-left:9px solid transparent}.bubble .name-tag{background:none!important;box-shadow:none;border:0;padding:0;min-width:0;display:inline;font-size:13px!important;color:#111!important;vertical-align:top}.bubble-content time{display:inline;font:10px Tahoma;color:#aaa;margin-left:12px}.bubble .message-text{display:block;margin-top:7px;line-height:1.5}.bubble .chat-image{margin-top:8px;max-width:100%;max-height:240px}.bubble .name-kind-mark{max-height:17px}.compose{height:54px;min-height:54px;display:block;background:var(--room-bar);border-top:2px solid var(--room-dark);position:relative;padding:0}.compose-tools{height:52px;background:transparent;border:0;display:flex;align-items:center;gap:4px;padding:4px 6px;direction:ltr}.compose-tools>button{display:none}.compose-tools #mobileComposeMic,.compose-tools #moreToggle,.compose-tools #emojiToggle,.compose-tools #sendBtn{display:flex!important;align-items:center;justify-content:center;background:none!important;border:0;padding:0;position:static;flex:none;width:32px;height:39px;box-shadow:none;margin:0;color:#515151;min-width:0}.compose-tools #mobileComposeMic img{width:26px;height:34px;object-fit:contain}.compose-tools #mobileComposeMic[aria-pressed=true]{background:#e3f3d8!important;border-radius:5px}.compose-tools #moreToggle{font-size:24px;border:1px solid #65818a;border-radius:50%;height:30px;width:30px}.compose-tools #moreToggle:after{content:'•••';font:bold 19px Arial;letter-spacing:0}.compose-tools #emojiToggle{margin-left:auto;font-size:25px}.compose-tools #emojiToggle:after{content:'😀'}.compose-tools #sendBtn{font-size:0;width:28px}.compose-tools #sendBtn span{display:block;font-size:28px;color:#a6bd46;text-shadow:1px 1px #666}.compose .send{position:absolute;bottom:5px;left:82px;right:76px;margin:0;height:40px;padding:0;border:0;display:block}.compose #message{width:100%;height:40px;min-height:0;border:1px solid #bbb;border-radius:5px;background:white;padding:8px;font:15px Tahoma;line-height:22px;resize:none;margin:0;text-align:right;box-shadow:inset 0 2px 4px #ddd}.compose #message::placeholder{color:#bbb}.emoji-panel{display:block;position:absolute;left:0;right:0;bottom:0;width:100%;max-width:none;border:0;box-shadow:none;margin:0;padding:0}.emoji-tabs{height:44px;padding:3px 10px;gap:12px}.emoji-tabs button{font-size:24px;padding:0;min-width:26px;height:36px}.emoji-grid{height:calc(min(52dvh,400px) - 44px);overflow:auto;align-content:start;padding:0 5px;grid-template-columns:repeat(8,minmax(0,1fr))}.emoji-open .compose{height:calc(54px + min(52dvh,400px))}.emoji-open .compose .send{bottom:calc(5px + min(52dvh,400px))}.emoji-open .compose-tools #emojiToggle:after{content:'▦'}.emoji-open #mediaPanel{bottom:calc(58px + min(52dvh,400px))}.tool-popup{bottom:58px!important;max-width:calc(100vw - 12px)}.leave-overlay p{font-size:18px;padding:21px 14px}.leave-overlay section{max-width:none}.leave-overlay footer{padding:6px 12px}.leave-overlay button{min-width:90px;padding:9px 24px;font-size:17px}.member-menu{z-index:80}.me-menu{z-index:70}.profile-overlay{z-index:75}.login-overlay{background:var(--room-panel)}.login-title,.login-footer{background:var(--room-bar)}#toast{bottom:65px;font-size:12px;max-width:90vw}.mobile-full-panel .official-logo{display:block}
}
@media(max-width:750px){
 .messages{background:transparent!important;background-image:none!important}
 .bubble{flex-wrap:nowrap}.bubble-content{width:fit-content;flex:0 1 auto}
 .compose-tools #mobileComposeMic{order:0}.compose-tools #moreToggle{order:1}
 .compose-tools #emojiToggle{order:3}.compose-tools #sendBtn{order:4}
 .emoji-panel{transform:none}
 .show-mobile-members .desktop-grid .members{flex-direction:column}
 .show-mobile-members #people{flex:1;min-height:0;overflow:auto}
 .room-event{font:11px Tahoma;color:#40974e;text-align:center;margin:7px 0;background:#ffffff55;border-radius:5px;padding:4px}
}
 .emoji-tabs img{width:29px;height:29px;object-fit:contain;vertical-align:middle}
@media(max-width:750px){
 #mobileHeader nav button img{width:30px;height:30px;object-fit:contain;mix-blend-mode:multiply}
 .compose-tools #moreToggle{background:url('/assets/mobile-ui/more.png') center/contain no-repeat!important;border:0}.compose-tools #moreToggle:after{content:''}
 .compose-tools #sendBtn{background:url('/assets/mobile-ui/send.png') center/contain no-repeat!important}.compose-tools #sendBtn span{visibility:hidden}
 .compose-tools #emojiToggle{background:url('/assets/mobile-ui/category-faces.png') center/29px no-repeat!important;background-blend-mode:multiply}.compose-tools #emojiToggle:after{content:''}
 .emoji-open .compose-tools #emojiToggle{background-image:url('/assets/mobile-ui/keyboard.png')!important}.emoji-open .compose-tools #emojiToggle:after{content:''}
}

.emoji-tabs button:first-child{margin-left:0}
@media(max-width:750px){#mobileHeader .official-logo,.mobile-full-panel>header>img{border-radius:50%}}

@media(max-width:750px){
 .section-row .directory-flag{width:36px;height:30px}
 .show-mobile-members .member-toolbar{display:flex;align-items:center;min-height:38px}
 .show-mobile-members .member-toolbar:after{content:'الأعضاء';color:#fff;flex:1;text-align:center;order:1;font:14px Tahoma}
 .show-mobile-members .member-toolbar>button{display:none;background-image:none!important;font:14px Tahoma;color:#fff;flex:none}
 .show-mobile-members .member-toolbar #meBtn{display:block;order:0;padding:8px;background:transparent;color:white;border:0}
 .show-mobile-members .member-toolbar #toggleMembers{display:block;order:2;font:25px Arial;width:40px;padding:3px;margin:0;background:none}
 .show-mobile-members .person[data-role=master] .person-name{color:#c92117!important}
 .show-mobile-members .person[data-role=superadmin] .person-name{color:#278524!important}
 .show-mobile-members .person[data-role=admin] .person-name{color:#1645cd!important}
}

@media(max-width:750px){.conversation,.show-mobile-members .members{touch-action:pan-y pinch-zoom}.show-mobile-members .desktop-grid .members{animation:member-panel-in .16s ease-out}@keyframes member-panel-in{from{transform:translateX(-20%);opacity:.6}to{transform:translateX(0);opacity:1}}}
@media(prefers-reduced-motion:reduce){.show-mobile-members .desktop-grid .members{animation:none}}

/* Fit the visible viewport above a phone keyboard and keep the latest message in view. */
@media(max-width:750px){
 body.in-room.room-visual-viewport #inside{position:fixed;left:0;right:0;top:var(--room-visible-top,0px);width:100%;height:var(--room-visible-height,100dvh)!important;min-height:0}
 body.in-room.room-composer-focused .conversation{display:flex;flex-direction:column;padding-bottom:0;scroll-behavior:auto}
 body.in-room.room-composer-focused #welcome{flex:none}
 body.in-room.room-composer-focused #messages{flex:none;margin-top:auto;padding-bottom:0;min-height:0;max-height:none;overflow:visible}
 body.in-room.room-composer-focused #messages .bubble:last-child{margin-bottom:0!important}
}
