/* Algalaa core styles v20260519 - production split. */
/* Algalaa production split core styles v5.24. */
:root{
  /* خلفيات داكنة دافئة (رمادي مائل للبني) + ذهبي فاخر - مطابق للتصميم */
  --bg:#0d0b09; --bg2:#15110d; --card:#1a1510; --card2:#221b14; --card3:#2b2218;
  --elev:#1d1813; --surface:#120f0b;
  --gold:#e3b54a; --gold2:#f3d27a; --gold-deep:#b8881f; --gold-soft:rgba(227,181,74,.13);
  --gold-grad: linear-gradient(135deg, #b8881f 0%, #e3b54a 45%, #f3d27a 72%, #d4a430 100%);
  --gold-shimmer: linear-gradient(90deg, #b8881f, #e3b54a, #f3d27a, #fff0c4, #f3d27a, #e3b54a, #b8881f);
  --text:#f5efe3; --text2:#d4cab5; --muted:#867c6a; --border:#2a2218; --border2:#372d1f;
  --danger:#e0556a; --success:#4cba7d; --accent:#c89a4a;
  --radius:16px; --radius-sm:11px; --radius-lg:22px;
  --shadow-gold: 0 0 24px rgba(227,181,74,.22);
  --shadow-soft: 0 8px 28px rgba(0,0,0,.5);
  --bg-radial: radial-gradient(ellipse 95% 50% at 50% -8%, rgba(227,181,74,.10), transparent 55%), radial-gradient(ellipse at bottom, rgba(184,136,31,.05), transparent 60%), #0d0b09;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg-radial);color:var(--text);font-family:'Cairo',system-ui,sans-serif;min-height:100%;overflow-x:hidden}
body{padding-bottom:64px;background-attachment:fixed}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;background:var(--card2);border:1px solid var(--border);color:var(--text);padding:12px 14px;border-radius:var(--radius-sm);width:100%;font-size:15px;outline:none;transition:.15s}
input:focus,textarea:focus,select:focus{border-color:var(--gold)}
textarea{resize:none}
.autogrow{overflow:hidden;resize:none;min-height:42px;max-height:150px}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:#333;border-radius:3px}

.topbar{position:sticky;top:0;z-index:50;background:rgba(13,11,9,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;display:flex;align-items:center;gap:12px;justify-content:space-between}
/* 🆕 قسم الفيديو ملء الشاشة: إخفاء البار العلوي تماماً */
body.in-video .topbar{display:none !important}
body.in-video main{padding:0 !important;margin:0 !important}
body.in-video #videoFeedRoot,body.in-video .video-feed-root{top:0 !important}
.brand{display:flex;align-items:center;gap:8px;font-weight:900;font-size:18px;color:var(--gold);flex-shrink:0}
.brand img{width:30px;height:30px;border-radius:8px;object-fit:contain}
.search{flex:1;max-width:min(620px,52vw);position:relative}
.search input{background:var(--card2);padding-right:38px;border-radius:24px;border:none;height:38px}
.search svg{position:absolute;right:12px;top:9px;opacity:.6}
.icons{display:flex;gap:8px;flex-shrink:0}
.iconBtn{width:40px;height:40px;border-radius:50%;background:var(--card2);display:flex;align-items:center;justify-content:center;color:var(--gold);position:relative;transition:.15s}
.iconBtn:hover{background:var(--gold-soft)}
.dot{position:absolute;top:6px;left:6px;min-width:16px;height:16px;background:var(--danger);border-radius:50%;font-size:10px;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}
.dot.empty{display:none}

.tabs{display:flex;background:rgba(10,10,10,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);position:sticky;top:58px;z-index:40}
.tabs button{flex:1;padding:14px 0;color:var(--muted);font-weight:600;border-bottom:3px solid transparent;transition:.15s;font-size:14px}
.tabs button.active{color:var(--gold);border-bottom-color:var(--gold)}
.tabs button:hover{background:var(--gold-soft)}

#officialSiteLink{margin-right:6px!important;font-size:11px!important;padding:3px 8px!important;border-radius:12px!important}
button:focus{outline:none}
button:focus-visible{box-shadow:0 0 0 2px rgba(227,181,74,.55)}
.iconBtn,.bottomNav button,.tabs button,.roomControls .ctrlBtn,.minBtn,.callActs button,.profileMenuItem .ico,.compActions button,.mediaPickBtn,.postAct,.scActionBtn{color:var(--muted)}
.iconBtn:hover,.iconBtn.active,.bottomNav button.active,.tabs button.active,.roomControls .ctrlBtn.primary,.roomControls .ctrlBtn:hover,.profileMenuItem:hover,.compActions button:hover,.mediaPickBtn:hover{color:var(--gold)}
.iconBtn svg,.bottomNav svg,.tabs svg,.roomControls svg,.minBtn svg,.callActs svg{stroke:currentColor;fill:none}
.callActs .accept,.callActs .mute{background:var(--gold-soft);color:var(--gold)}
.callActs .end,.callActs .reject,.roomControls .ctrlBtn.danger,.minBtn.leaveBtn{background:var(--card2)!important;color:var(--muted)!important}
.iMic,.iOut{display:inline-block;position:relative;color:currentColor}
.iMic{width:16px;height:22px;border:2px solid currentColor;border-radius:10px}
.iMic:before{content:"";position:absolute;width:12px;height:7px;border:2px solid currentColor;border-top:0;left:50%;bottom:-8px;transform:translateX(-50%);border-radius:0 0 10px 10px}
.iMic:after{content:"";position:absolute;width:2px;height:7px;background:currentColor;left:50%;bottom:-14px;transform:translateX(-50%)}
.iMic.off{opacity:.72}
.iMic.off:after{width:24px;height:2px;bottom:8px;left:-4px;transform:rotate(-38deg);background:currentColor}
.iOut{width:22px;height:16px;border:2px solid currentColor;border-left:0;border-radius:0 12px 12px 0}
.iOut:before{content:"";position:absolute;right:14px;top:3px;border:5px solid transparent;border-right-color:currentColor}
.iOut:after{content:"";position:absolute;right:-7px;top:2px;width:7px;height:8px;border:2px solid currentColor;border-left:0;border-radius:0 10px 10px 0}
.spinnerMini{width:18px;height:18px;border:2px solid rgba(227,181,74,.25);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.audioRouteSheet{position:fixed;inset:auto 12px calc(18px + env(safe-area-inset-bottom));z-index:1700;background:#171717;border:1px solid rgba(227,181,74,.28);border-radius:16px;box-shadow:0 18px 44px rgba(0,0,0,.55);padding:8px;max-width:380px;margin:auto}
.audioRouteSheet button{width:100%;display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;color:var(--muted);font-weight:700;text-align:right}
.audioRouteSheet button.active,.audioRouteSheet button:hover{background:var(--gold-soft);color:var(--gold)}

.page{max-width:680px;margin:0 auto;padding:14px}


.bottomNav{position:fixed;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(5,5,6,.99),rgba(8,8,10,.92));backdrop-filter:blur(18px);border-top:1px solid var(--border);display:flex;justify-content:space-around;align-items:flex-end;padding:8px 0 max(8px,env(safe-area-inset-bottom));z-index:50}
.bottomNav button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:600;transition:color .2s,transform .15s;flex:1;padding:2px 0}
.bottomNav button span{opacity:.85}
.bottomNav button.active span{opacity:1}
.bottomNav button.active svg{filter:drop-shadow(0 0 6px rgba(227,181,74,.45))}
/* زر القلعة المركزي المرتفع */


.bottomNav button[data-tab="rooms"].active svg{filter:none}
/* 🆕 أخفِ bottomNav داخل صفحة الشات الكاملة */
body.in-chat-room .bottomNav{display:none!important}
/* 🆕 صفحة الشات تأخذ الشاشة كاملة بدون scroll */
body.in-chat-room{overflow:hidden}
body.in-chat-room #chatRoom{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  z-index:200;
  background:var(--bg);
  display:flex;flex-direction:column;
  margin:0;padding:0;
}
body.in-chat-room .chatBox{
  height:100vh;height:100dvh;
  width:100%;max-width:100%;
  border-radius:0!important;border:none!important;
  display:flex;flex-direction:column;
}
body.in-chat-room .chatBody{
  flex:1;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
body.in-chat-room .chatInput{
  flex-shrink:0;
  padding-bottom:max(10px, env(safe-area-inset-bottom));
}
@media (max-width:600px){.msg{max-width:86%}.chatInput textarea{font-size:16px}}
body.in-chat-room .chatHead{
  flex-shrink:0;
  padding-top:max(12px, env(safe-area-inset-top));
}
.chatBackBtn,.appCloseBtn,.modalHead button,.roomChatPanel .head .x,.storyViewer .head .x,.scClose,.actionSheet .closeAS{
  min-width:44px;min-height:44px;border-radius:16px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:rgba(227,181,74,.11);border:1px solid rgba(227,181,74,.34);
  color:var(--gold);font-weight:900;line-height:1;
}
.chatBackBtn{padding:0 12px;font-size:24px;flex-shrink:0}
.chatBackBtn span{font-size:13px}
.chatSettingsPanel{
  position:absolute;inset:0;z-index:3;
  background:var(--bg);display:flex;flex-direction:column;
  animation:settingsSlideIn .16s ease-out;
}
.chatSettingsHead{
  padding:max(12px, env(safe-area-inset-top)) 12px 12px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px;background:rgba(10,10,10,.96);
}
.chatSettingsHead h3{color:var(--gold);font-size:17px}
.chatSettingsBody{padding:14px;display:grid;gap:12px;overflow:auto}
.chatSettingsRow{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--card);
}
.chatSettingsRow span{font-weight:800;color:#fff}
.chatSettingsRow select{max-width:120px}
@keyframes settingsSlideIn{from{opacity:.7;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}}
.bottomNav button{padding:8px 16px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;flex:1}
.bottomNav button.active{color:var(--gold)}


.modal{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:1700;display:flex;align-items:center;justify-content:center;padding:16px}
.modalBox{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);width:100%;max-width:480px;max-height:90vh;overflow:auto}
.modalHead{padding:14px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.modalHead h3{color:var(--gold);font-size:17px}
.modalBody{padding:16px}

.hidden{display:none !important}
.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.spinner{width:32px;height:32px;border:3px solid var(--card2);border-top-color:var(--gold);border-radius:50%;animation:rot 1s linear infinite;margin:20px auto}
@keyframes rot{to{transform:rotate(360deg)}}

.comm{padding:10px 14px;border-top:1px solid var(--border);background:var(--bg2)}
.comm .c{display:flex;gap:8px;margin-bottom:8px}
.comm .c .avatar{width:32px;height:32px;font-size:13px}
.comm .cBubble{background:var(--card2);padding:8px 12px;border-radius:14px;flex:1;font-size:13px}
.comm .cBubble .n{font-weight:700;font-size:12px;margin-bottom:2px;color:var(--gold)}
.commForm{display:flex;gap:8px;margin-top:8px}
.commForm input{flex:1;border-radius:18px;background:var(--card2)}

.langBtn{padding:6px 10px;border-radius:8px;background:var(--card2);color:var(--gold);font-size:12px;font-weight:700}

/* ===== Skeleton loaders (احترافي للتطبيقات العالمية) ===== */
.skeleton{
  background:linear-gradient(90deg, var(--card2) 0%, var(--card3) 50%, var(--card2) 100%);
  background-size:200% 100%; animation:skel 1.4s ease-in-out infinite;
  border-radius:var(--radius-sm);
}
@keyframes skel{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skelLine{ height:14px; border-radius:6px; margin-bottom:8px; }
.skelLine.lg{ height:18px; }
.skelLine.sm{ height:11px; width:60%; }
.skelAvatar{ width:42px; height:42px; border-radius:50%; }
.skelImg{ width:100%; aspect-ratio:1; border-radius:12px; }
.skelCard{ padding:14px; background:var(--card); border:1px solid var(--border); border-radius:14px; margin-bottom:12px; }
.skelRow{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }

/* ===== Empty states أنيقة ===== */
.emptyState{ text-align:center; padding:60px 24px; color:var(--muted); }
.emptyState .emIcon{ font-size:52px; margin-bottom:12px; opacity:.5; }
.emptyState .emTitle{ color:var(--text); font-size:16px; font-weight:700; margin-bottom:6px; }
.emptyState .emDesc{ font-size:13.5px; line-height:1.6; max-width:280px; margin:0 auto; }
.emptyState .emCta{ margin-top:18px; padding:10px 22px; background:var(--gold-grad); border:none; color:#1a1510; border-radius:22px; font-weight:800; cursor:pointer; }