:root{--primary:#562AE8;--primary2:#562AE8;--bg:#fafafa;--card:#ffffff;--card-rgb:255,255,255;--text:#262626;--text2:#8e8e8e;--text3:#c7c7c7;--border:#dbdbdb;--input-bg:#f0f2f5;--shadow:0 1px 3px rgba(0,0,0,.1);--bottom-bar:60px;--top-bar:56px;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px)}[data-theme="dark"]{--bg:#000;--card:#1c1c1e;--card-rgb:28,28,30;--text:#f5f5f5;--text2:#8e8e8e;--text3:#3a3a3c;--border:#2c2c2e;--input-bg:#2c2c2e}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{height:100%;font-family:'Cairo','Inter',sans-serif;background:var(--bg);color:var(--text);overflow:hidden}.page{display:none;position:fixed;inset:0;overflow:hidden}.page.active{display:flex;flex-direction:column}::-webkit-scrollbar{width:0;height:0}#loadingScreen{display:none;position:fixed;inset:0;background:var(--bg);z-index:9999;align-items:center;justify-content:center;flex-direction:column;gap:16px}.spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.top-bar{position:fixed;top:0;left:0;right:0;height:calc(var(--top-bar) + var(--sat));background:var(--card);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:var(--sat) 16px 0;z-index:100}.top-logo{font-family:'Pacifico',cursive;font-size:15px;color:#2AABEE;position:absolute;left:50%;transform:translateX(-50%)}.top-icons{display:flex;gap:4px}.icon-btn{width:40px;height:40px;border-radius:50%;border:none;background:transparent;color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s}.icon-btn:active{background:var(--input-bg)}.icon-btn svg{width:24px;height:24px}.bottom-bar{position:fixed;bottom:0;left:0;right:0;height:calc(var(--bottom-bar) + var(--sab));background:var(--card);border-top:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-around;padding-bottom:var(--sab);z-index:100}.nav-btn{flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:none;background:transparent;color:var(--text2);cursor:pointer;transition:color .2s}.nav-btn.active{color:#000000}.nav-btn svg{width:26px;height:26px}[data-theme="dark"] .nav-btn.active{color:#ffffff !important}.nav-btn.center-btn{flex:1;position:relative;top:0;background:transparent;border-radius:0;width:auto;height:100%;box-shadow:none;color:var(--text2);transition:none}.nav-btn.center-btn:active{transform:none;box-shadow:none}.nav-btn.center-btn svg{width:26px;height:26px}.logo-icon{width:72px;height:72px;background:linear-gradient(135deg,#562AE8,#562AE8);border-radius:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;box-shadow:0 4px 20px rgba(86,42,232,.4)}.logo-icon svg{width:36px;height:36px}.logo-text{font-family:'Pacifico',cursive;font-size:32px;background:linear-gradient(135deg,#562AE8,#562AE8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.2}.toast{position:fixed;bottom:calc(var(--bottom-bar) + var(--sab) + 12px);left:50%;transform:translateX(-50%);background:rgba(20,20,20,.9);color:#fff;padding:10px 22px;border-radius:20px;font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .3s;white-space:nowrap;z-index:999;backdrop-filter:blur(8px)}.toast.show{opacity:1}.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;opacity:0;pointer-events:none;transition:opacity .3s}.drawer-overlay.open{opacity:1;pointer-events:all}.drawer{position:fixed;top:0;left:-300px;bottom:0;width:300px;background:var(--card);z-index:201;transition:left .3s ease;box-shadow:4px 0 24px rgba(0,0,0,.18);display:flex;flex-direction:column}.drawer.open{left:0}.drawer-head{display:flex;align-items:center;gap:12px;padding:calc(48px + var(--sat)) 20px 20px;background:linear-gradient(135deg,#562AE8,#562AE8)}.drawer-ava{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.25);overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drawer-ava img{width:100%;height:100%;object-fit:cover}.drawer-name{font-weight:800;color:white;font-size:16px}.drawer-user{font-size:13px;color:rgba(255,255,255,.8);margin-top:2px}.drawer-menu{padding:12px;flex:1}.drawer-menu button{width:100%;padding:14px 16px;text-align:left;border:none;background:transparent;color:var(--text);font-size:15px;font-family:'Inter',sans-serif;font-weight:600;cursor:pointer;border-radius:10px;transition:background .2s;display:flex;align-items:center;gap:12px}.drawer-menu button:active{background:var(--input-bg)}.drawer-divider{height:1px;background:var(--border);margin:8px 16px}.btn-primary{width:100%;padding:15px;border-radius:12px;border:none;background:#562AE8;color:white;font-size:16px;font-weight:800;font-family:'Inter',sans-serif;cursor:pointer;transition:opacity .2s,transform .1s;box-shadow:0 4px 16px rgba(83,70,234,.35);letter-spacing:.3px}.btn-primary:active{transform:scale(.98);opacity:.9}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.in-app-notif{position:fixed;top:calc(16px + var(--sat));left:12px;right:12px;z-index:99998;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 4px 24px rgba(0,0,0,0.18);cursor:pointer;animation:slideDownNotif 0.35s cubic-bezier(.32,1,.23,1);max-width:480px;margin:0 auto}.in-app-notif-icon{font-size:22px;flex-shrink:0}.in-app-notif-text{flex:1;min-width:0}.in-app-notif-title{font-weight:800;font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.in-app-notif-body{font-size:13px;color:var(--text2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.in-app-notif-close{background:none;border:none;color:var(--text3);cursor:pointer;font-size:16px;padding:2px 4px;flex-shrink:0;line-height:1}@keyframes slideDownNotif{from{transform:translateY(-80px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOutNotif{from{transform:translateY(0);opacity:1}to{transform:translateY(-80px);opacity:0}}[data-theme="dark"] .bottom-bar{background:var(--card) !important;border-top-color:var(--border) !important}[data-theme="dark"] .nav-btn{color:rgba(255,255,255,0.45) !important}[data-theme="dark"] .nav-btn.active{color:#ffffff !important}[data-theme="dark"] .nav-btn svg{stroke:currentColor !important;fill:none !important}[data-theme="dark"] .nav-btn.active svg{stroke:#ffffff !important}html,body{touch-action:pan-x pan-y;-ms-touch-action:pan-x pan-y}input,textarea,select,button{touch-action:manipulation;-ms-touch-action:manipulation}[data-theme="dark"] .chat-messages{background-image:url('../icons/chat-bg-dark.jpg') !important;background-attachment:local !important}
/* ===== Create Menu Sheet ===== */
.create-menu-sheet{position:fixed;left:0;right:0;bottom:0;z-index:600;display:none;flex-direction:column;background:var(--card);border-radius:16px 16px 0 0;padding:8px 0 calc(env(safe-area-inset-bottom,0px)+8px);transform:translateY(110%);transition:transform .28s cubic-bezier(.32,1,.23,1);box-shadow:0 -2px 24px rgba(0,0,0,.15);visibility:hidden}
.create-menu-sheet.open{transform:translateY(0);visibility:visible}
.create-menu-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:4px auto 12px}
.create-menu-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 24px;border:none;background:none;color:var(--text);font-size:17px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;transition:background .15s}
.create-menu-item:active{background:var(--input-bg)}
.create-menu-label{font-size:17px;font-weight:700}
.create-menu-icon{width:36px;height:36px;border-radius:10px;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text)}
.create-menu-divider{height:1px;background:var(--border);margin:0 24px}

/* ===== New Message Banner ===== */
.new-msg-banner{position:fixed;top:calc(12px + var(--sat));left:12px;right:12px;z-index:9999;background:var(--card);border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:12px;box-shadow:0 4px 28px rgba(0,0,0,.22);cursor:pointer;max-width:420px;margin:0 auto;transform:translateY(-110px);opacity:0;transition:transform .35s cubic-bezier(.32,1,.23,1),opacity .35s ease;border:1px solid var(--border)}
.new-msg-banner.show{transform:translateY(0);opacity:1}
.new-msg-banner-ava{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#562AE8,#562AE8);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.new-msg-banner-text{flex:1;min-width:0}
.new-msg-banner-name{font-size:14px;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.01em}
.new-msg-banner-preview{font-size:13px;color:var(--text2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.new-msg-banner-badge{min-width:22px;height:22px;border-radius:999px;background:#e41c23;color:white;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 5px;flex-shrink:0;box-shadow:0 2px 6px rgba(228,28,35,.4)}

/* ===== زر الإنشاء الجديد ===== */
.insta-create-btn svg{width:27px;height:27px}

/* ===== Stacked Notifications ===== */
@keyframes gxNotifIn {
  from { opacity:0; transform:translateY(20px) scale(0.95); }
  to   { opacity:1; transform:translateY(0)    scale(1);    }
}
#gx-notif-stack { position:fixed; bottom:calc(var(--bottom-bar,60px) + var(--sab) + 12px); left:12px; right:12px; z-index:99999; display:flex; flex-direction:column-reverse; gap:8px; pointer-events:none; max-width:480px; margin:0 auto; }

/* ===== INSTAGRAM-STYLE NOTIFICATION BUBBLES ===== */
.notif-bubble {
  position: absolute;
  top: -6px;
  right: -8px;
  display: flex;
  align-items: center;
  gap: 3px;
  background: #e91e63;
  border-radius: 12px;
  padding: 3px 6px 3px 4px;
  border: 2px solid var(--bg);
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(233,30,99,0.45);
  min-width: 28px;
  animation: bubblePop .25s cubic-bezier(.32,1,.23,1);
}
.notif-bubble svg {
  width: 11px;
  height: 11px;
  stroke: white;
  fill: none;
  flex-shrink: 0;
}
.notif-bubble span {
  color: white;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.msg-bubble {
  position: absolute;
  top: -6px;
  right: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e53935;
  border-radius: 12px;
  padding: 4px 6px;
  border: 2px solid var(--bg);
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(229,57,53,0.45);
  min-width: 28px;
  animation: bubblePop .25s cubic-bezier(.32,1,.23,1);
}
.msg-bubble svg {
  width: 13px;
  height: 13px;
  stroke: white;
  fill: none;
  flex-shrink: 0;
}
@keyframes bubblePop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.3}}@keyframes skeletonPulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ── Switch Account Button ── */
#gxSwitchBtn {
  color: var(--text);
  transition: opacity 0.2s;
}
#gxSwitchBtn:active {
  opacity: 0.6;
}