/* ============================================================
   REHAN SHAHID v10 HOTFIX
   Fixes: mobile overflow, drawers, AI typing, social colors.
   ============================================================ */

html,body{
  max-width:100%!important;
  overflow-x:hidden!important;
}
body{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
img,svg,video,canvas,iframe{
  max-width:100%;
}

/* Make premium cards and containers respect narrow iPhone widths */
.container,.cpo-container,.ilab-container,.ilab-body,.atl-ohero,.atl-grid,.atl-filter-row,.atl-onav,.ilab-nav,.cpo-body,.cpo-grid,.grid-2,.hero-grid{
  max-width:100%!important;
}
.card,.glass,.cta-card,.demo-card,.service,.skill,.network-card,.cpo-card,.atl-card,.ilab-card,.ilab-panel,.ilab-weather-card{
  min-width:0!important;
  max-width:100%!important;
}

/* Keep page headings from cutting off on mobile */
.cpo-title,
.ilab-hero h1,
.atl-ohero h1{
  max-width:100%!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
  text-wrap:balance;
}

/* Social and CTA official brand colors — protected from theme overrides */
.social-cta-row .btn,
.hero-actions .btn,
.cta-card .btn{
  isolation:isolate;
}
.btn.whatsapp,
a.btn[href*="wa.me"],
a.social[href*="wa.me"] .social-icon{
  background:linear-gradient(135deg,#25D366 0%,#128C7E 100%)!important;
  color:#04140a!important;
  border-color:rgba(37,211,102,.62)!important;
  box-shadow:0 16px 42px rgba(37,211,102,.22),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.btn-telegram,
a.btn[href*="t.me"],
a.social[href*="t.me"] .social-icon{
  background:linear-gradient(135deg,#2AABEE 0%,#168ACD 100%)!important;
  color:#fff!important;
  border-color:rgba(42,171,238,.62)!important;
  box-shadow:0 16px 42px rgba(42,171,238,.20),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.btn.instagram,
a.btn[href*="instagram.com"],
a.social[href*="instagram.com"] .social-icon{
  background:linear-gradient(135deg,#FEDA75 0%,#FA7E1E 22%,#D62976 58%,#962FBF 78%,#4F5BD5 100%)!important;
  color:#fff!important;
  border-color:rgba(214,41,118,.62)!important;
  box-shadow:0 16px 42px rgba(214,41,118,.20),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.btn.threads,
a.btn[href*="threads.com"],
a.social[href*="threads.com"] .social-icon{
  background:linear-gradient(135deg,#171717 0%,#000 100%)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.38)!important;
  box-shadow:0 16px 42px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.16)!important;
}
.btn.tiktok,
a.btn[href*="tiktok.com"],
a.social[href*="tiktok.com"] .social-icon{
  background:linear-gradient(135deg,#00F2EA 0%,#111 46%,#FF0050 100%)!important;
  color:#fff!important;
  border-color:rgba(0,242,234,.50)!important;
  box-shadow:0 16px 42px rgba(255,0,80,.18),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.btn.facebook,
a.btn[href*="facebook.com"],
a.social[href*="facebook.com"] .social-icon{
  background:linear-gradient(135deg,#1877F2 0%,#0f5bc9 100%)!important;
  color:#fff!important;
  border-color:rgba(24,119,242,.62)!important;
  box-shadow:0 16px 42px rgba(24,119,242,.20),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
a.btn[href*="reddit.com"],
a.social[href*="reddit.com"] .social-icon{
  background:linear-gradient(135deg,#FF4500 0%,#FF7A45 100%)!important;
  color:#fff!important;
  border-color:rgba(255,69,0,.62)!important;
}
a.btn[href*="x.com"],a.btn[href*="twitter.com"],
a.social[href*="x.com"] .social-icon,a.social[href*="twitter.com"] .social-icon{
  background:linear-gradient(135deg,#000 0%,#1f1f1f 100%)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.42)!important;
}
a.btn[href*="youtube.com"],
a.social[href*="youtube.com"] .social-icon{
  background:linear-gradient(135deg,#FF0000 0%,#CC0000 100%)!important;
  color:#fff!important;
  border-color:rgba(255,0,0,.62)!important;
}
a.btn[href*="spotify.com"],
a.social[href*="spotify.com"] .social-icon,
.social-icon.spotify{
  background:linear-gradient(135deg,#1DB954 0%,#1ED760 100%)!important;
  color:#031407!important;
  border-color:rgba(29,185,84,.62)!important;
}
a.btn[href*="linkedin.com"],
a.social[href*="linkedin.com"] .social-icon,
.social-icon.linkedin{
  background:linear-gradient(135deg,#0A66C2 0%,#0077B5 100%)!important;
  color:#fff!important;
  border-color:rgba(10,102,194,.62)!important;
}
a.btn[href^="mailto:"],
a.social[href^="mailto:"] .social-icon,
.social-icon.e{
  background:linear-gradient(135deg,#EA4335 0%,#FBBC05 48%,#34A853 100%)!important;
  color:#fff!important;
  border-color:rgba(234,67,53,.50)!important;
}
.social-icon svg,.social-cta-row .icon svg,.hero-actions .icon svg{
  width:1.2em!important;
  height:1.2em!important;
  display:block!important;
}
.social strong,.social small,.social b{
  color:inherit!important;
}
.social small{opacity:.76!important;}

/* Live drawer: no longer covers body text in the middle of the page */
#rs-drawer-toggle{
  pointer-events:auto!important;
  touch-action:manipulation!important;
  z-index:2147483050!important;
}
#rs-drawer-backdrop{
  z-index:2147483100!important;
  pointer-events:none!important;
}
#rs-drawer-backdrop.open{
  pointer-events:auto!important;
}
#rs-live-panel{
  z-index:2147483200!important;
  transform:translate3d(-106%,0,0)!important;
  will-change:transform!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
#rs-live-panel.drawer-open{
  transform:translate3d(0,0,0)!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
body.rs-live-drawer-open{overflow:hidden!important;}

/* Main mobile menu: reliable top drawer, not blurred/blocked */
#mobileMenu.mobile-menu,
.mobile-menu#mobileMenu{
  display:block!important;
  visibility:hidden!important;
  pointer-events:none!important;
  opacity:0!important;
  z-index:2147483000!important;
  transform:translate3d(0,-14px,0) scale(.985)!important;
  transition:opacity .22s ease,transform .28s cubic-bezier(.23,1,.32,1),visibility .22s ease!important;
  filter:none!important;
}
#mobileMenu.mobile-menu.open,
.mobile-menu#mobileMenu.open{
  visibility:visible!important;
  pointer-events:auto!important;
  opacity:1!important;
  transform:translate3d(0,0,0) scale(1)!important;
  filter:none!important;
}
body.menu-open::before,
body.menu-open::after{
  display:none!important;
  content:none!important;
  opacity:0!important;
  pointer-events:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
#hamburger,#theme-btn{
  pointer-events:auto!important;
  touch-action:manipulation!important;
  z-index:2147482000!important;
}

/* Floating AI panel/typing polish */
#rsAIPanel.rs-ai-panel{
  z-index:2147483300!important;
}
.rs-ai-msg-body p .rs-type-cursor,
.msg-text .rs-type-cursor{
  display:inline-block;
  width:.55em;
  height:1em;
  margin-left:2px;
  border-radius:4px;
  vertical-align:-.14em;
  background:currentColor;
  animation:rsCursorBlink .75s steps(2,end) infinite;
}
@keyframes rsCursorBlink{50%{opacity:.1}}
.rs-ai-msg.rs-ai-bot.rs-typing-live .rs-ai-msg-body,
.msg.bot.rs-typing-live .msg-body{
  box-shadow:0 12px 34px rgba(215,168,77,.16),inset 0 1px 0 rgba(255,255,255,.08)!important;
}

@media (max-width:768px){
  body{background-attachment:scroll!important;}
  .container{width:min(100% - 28px,var(--max))!important;}
  .section{padding-left:0!important;padding-right:0!important;}
  .hero-actions,.social-cta-row{width:100%!important;}
  .social-cta-row{grid-template-columns:1fr 1fr!important;gap:10px!important;}
  .social-cta-row .btn{min-width:0!important;font-size:12px!important;letter-spacing:.02em!important;padding:0 10px!important;}
  .cta-card{padding:26px 20px!important;border-radius:30px!important;overflow:hidden!important;}
  .cta-card p{font-size:clamp(1rem,4.25vw,1.14rem)!important;line-height:1.72!important;overflow-wrap:break-word!important;}

  /* Drawer toggle becomes a compact bottom-left floating button */
  #rs-drawer-toggle{
    left:14px!important;
    right:auto!important;
    top:auto!important;
    bottom:calc(108px + env(safe-area-inset-bottom))!important;
    width:48px!important;
    height:48px!important;
    border-radius:18px!important;
    border:1px solid rgba(215,168,77,.42)!important;
    background:linear-gradient(145deg,rgba(215,168,77,.28),rgba(8,7,5,.86))!important;
    box-shadow:0 14px 38px rgba(0,0,0,.42),0 0 0 1px rgba(255,228,163,.08) inset!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    opacity:.95!important;
  }
  #rs-drawer-toggle:hover,#rs-drawer-toggle.hovered{width:48px!important;}
  #rs-drawer-toggle .dt-line{background:#ffd580!important;width:16px!important;height:2px!important;}
  #rs-live-panel{width:min(340px,88vw)!important;}

  #mobileMenu.mobile-menu,
  .mobile-menu#mobileMenu{
    top:78px!important;
    left:12px!important;
    right:12px!important;
    width:auto!important;
    max-height:calc(100dvh - 96px)!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch!important;
    border-radius:26px!important;
  }

  .page-topbar{
    height:auto!important;
    min-height:58px!important;
    padding:14px 16px!important;
    gap:10px!important;
    overflow:hidden!important;
  }
  .page-topbar a,.page-topbar small{
    min-width:0!important;
    max-width:50%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    letter-spacing:.05em!important;
    font-size:clamp(.78rem,3.2vw,1rem)!important;
  }

  .cpo-body,.ilab-body{
    padding-left:14px!important;
    padding-right:14px!important;
    overflow:hidden!important;
  }
  .cpo-header,.ilab-hero,.atl-ohero{
    padding-left:0!important;
    padding-right:0!important;
    overflow:hidden!important;
  }
  .cpo-title{
    font-size:clamp(2.72rem,13vw,4.2rem)!important;
    line-height:.88!important;
    letter-spacing:-.045em!important;
  }
  .cpo-subtitle,.ilab-hero-sub,.atl-ohero p{
    max-width:100%!important;
    font-size:clamp(1rem,4.1vw,1.16rem)!important;
    line-height:1.65!important;
  }
  .cpo-toolbar{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .cpo-count{justify-content:center!important;width:100%!important;}
  .cpo-grid{
    grid-template-columns:1fr 1fr!important;
    gap:14px!important;
  }
  .cpo-card{padding:20px 10px!important;border-radius:26px!important;}
  .cpo-avatar,.friend-avatar{width:86px!important;height:86px!important;}

  .ilab-hero h1{
    font-size:clamp(2.62rem,12vw,4.05rem)!important;
    line-height:.9!important;
    letter-spacing:-.052em!important;
  }
  .ilab-hero-label,.atl-badge,.cpo-badge{
    max-width:100%!important;
    white-space:normal!important;
    text-align:center!important;
    justify-content:center!important;
  }
  .ilab-hero-stats{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    justify-items:stretch!important;
  }
  .ilab-hero-stat{
    width:100%!important;
    max-width:100%!important;
    white-space:normal!important;
    justify-content:center!important;
    text-align:center!important;
    padding:14px 16px!important;
  }

  .atl-onav,.ilab-nav{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    padding:14px!important;
    overflow:hidden!important;
  }
  .atl-onav-brand,.ilab-nav-brand{
    min-width:0!important;
    flex:1 1 auto!important;
  }
  .atl-onav-title,.ilab-nav-brand strong{
    font-size:clamp(.9rem,3.8vw,1.1rem)!important;
    line-height:1.25!important;
    white-space:normal!important;
  }
  .atl-onav-back,.ilab-back-btn{
    flex:0 1 auto!important;
    max-width:48%!important;
    min-width:0!important;
    padding:12px 13px!important;
    border-radius:22px!important;
    font-size:clamp(.78rem,3.2vw,.95rem)!important;
    line-height:1.25!important;
    white-space:normal!important;
  }
  .atl-ohero h1{
    font-size:clamp(2.55rem,12.2vw,4rem)!important;
    line-height:.92!important;
    letter-spacing:-.05em!important;
  }
  .atl-filter-row{
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:center!important;
    gap:10px!important;
    padding-inline:14px!important;
  }
  .atl-chip{
    min-width:0!important;
    flex:1 1 calc(50% - 12px)!important;
    max-width:calc(50% - 8px)!important;
    padding:13px 10px!important;
    font-size:clamp(.78rem,3.2vw,.92rem)!important;
  }
  .atl-grid{
    padding-left:14px!important;
    padding-right:14px!important;
  }
}

@media (max-width:390px){
  .cpo-grid{gap:12px!important;}
  .cpo-avatar,.friend-avatar{width:78px!important;height:78px!important;}
  .atl-chip{font-size:.78rem!important;}
  .social-cta-row .btn{font-size:11px!important;}
}