/* ================================================================
   RIYAZ MOHAMMAD — LinkedIn Portfolio v3
   Mobile-first, premium, smooth, no plugins
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── TOKENS ── */
:root {
  --li-blue: #0a66c2;
  --li-blue-dk: #004182;
  --li-blue-lt: #e8f0fe;
  --bg: #f3f2ef;
  --white: #ffffff;
  --t1: rgba(0,0,0,.9);
  --t2: rgba(0,0,0,.6);
  --t3: rgba(0,0,0,.4);
  --border: rgba(0,0,0,.1);
  --border-lt: rgba(0,0,0,.06);
  --green: #5cb85c;
  --gold: #e9a800;
  --red: #cc1016;
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 9999px;
  --sh-card: 0 0 0 1px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.06);
  --sh-hover: 0 6px 24px rgba(0,0,0,.14);
  --sh-nav: 0 1px 4px rgba(0,0,0,.1);
  --f: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ease: cubic-bezier(.4,0,.2,1);
  --tr: .2s var(--ease);
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:14px;}
body{
  font-family:var(--f);
  background:var(--bg);
  color:var(--t1);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background 0.5s var(--ease);
}
a{color:var(--li-blue);text-decoration:none;transition:var(--tr);}
a:hover{text-decoration:underline;}
img{display:block;max-width:100%;height:auto;}
button,input{font-family:var(--f);border:none;background:none;cursor:pointer;outline:none;}
ul,ol{list-style:none;}

/* ── LENIS SMOOTH SCROLL REQUIRED CSS ── */
html.lenis, html.lenis body {
  height: auto;
}
.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

/* ================================================================
   FOCUS MODE (Manual Scroll)
   ================================================================ */
body.focused {
  background: #ffffff;
}

#app {
  padding-top: 64px; /* space for fixed navbar */
  display: flex;
  justify-content: center;
  gap: 24px;
  padding-left: 16px;
  padding-right: 16px;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  will-change: transform;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

body.focused #app {
  transform: translateY(-52px);
}

#navbar {
  will-change: transform, opacity;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
body.focused #navbar {
  transform: translateY(-100%);
  opacity: 0;
}
.sidebar-l, .sidebar-r {
  will-change: transform, opacity;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
body.focused .sidebar-l {
  opacity: 0;
  transform: translateX(-40px);
  pointer-events: none;
}
body.focused .sidebar-r {
  opacity: 0;
  transform: translateX(40px);
  pointer-events: none;
}
body.focused .feed-wrap {
  z-index: 100;
  height: calc(100vh - 12px);
  max-height: none;
}


/* Post Clean up during Focus Mode (Portfolio View) */
.composer, .post-head, .p-reacts, .p-foot, .p-badge, .p-company, .p-period {
  /* GPU-friendly: only animate opacity + transform, no layout-triggering max-height */
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 1;
  transform: scaleY(1);
  transform-origin: top;
  overflow: hidden;
}

body.focused .composer,
body.focused .post-head,
body.focused .p-reacts,
body.focused .p-foot,
body.focused .p-badge,
body.focused .p-company,
body.focused .p-period {
  opacity: 0 !important;
  transform: scaleY(0) !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

body.focused .post {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  margin-bottom: 60px;
  padding: 0 16px;
  transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), margin 0.5s cubic-bezier(0.22, 1, 0.36, 1), padding 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

body.focused .p-title {
  font-size: 28px;
  line-height: 1.3;
  margin-bottom: 14px;
}

body.focused .p-text {
  font-size: 16px;
  line-height: 1.7;
}

body.focused .p-ul li {
  font-size: 15px;
  line-height: 1.7;
}

body.focused .techs, body.focused .skills {
  gap: 7px;
  margin: 8px 0 12px;
}

body.focused .tech, body.focused .skill-tag {
  font-size: 12.5px;
  padding: 4px 12px;
}

body.focused .metrics {
  gap: 10px;
  margin: 10px 0 14px;
}

body.focused .metric-v {
  font-size: 22px;
}

body.focused .metric-l {
  font-size: 11px;
}

/* Fallback/reset transition on mobile */
.p-title {
  transition: font-size 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ================================================================
   PRELOADER
   ================================================================ */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}
#preloader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader-logo {
  width: 72px;
  height: 72px;
  fill: var(--li-blue);
  animation: pulseScale 1.6s ease-in-out infinite;
}
@keyframes pulseScale {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.12); opacity: 1; }
}

/* ================================================================
   INTRO SPLASH SCREEN
   ================================================================ */
#intro{
  position:fixed;inset:0;z-index:9999;
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .6s var(--ease),visibility .6s;
  overflow:hidden;
}
#intro.hidden{opacity:0;visibility:hidden;pointer-events:none;}

.intro-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:1000px;
  animation:introIn .7s var(--ease) forwards;
}
@keyframes introIn{from{opacity:0;}to{opacity:1;}}

.intro-text{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:40px 24px;
}
.intro-text h1{
  font-family:'Outfit',var(--f);
  font-size:clamp(3.2rem, 7.5vw, 6.2rem);
  font-weight:100;
  color:var(--t1);
  line-height:0.95;
  margin-bottom:24px;
  letter-spacing:-0.03em;
}
.intro-text h1 span{
  font-weight:300;
  color:var(--li-blue);
}
.intro-text p{
  font-size:clamp(1.15rem, 2.2vw, 1.6rem);
  color:var(--t2);
  font-weight:200;
  margin-bottom:10px;
  line-height:1.4;
}
.intro-tag{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--li-blue-lt);color:var(--li-blue);
  padding:6px 14px;border-radius:var(--r-full);
  font-size:.8rem;font-weight:600;margin-top:16px;
  width:fit-content;
}
.intro-tag::before{content:'●';font-size:8px;animation:blink 1s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.3;}}
.intro-location{font-size:.85rem;color:var(--t3);margin-top:16px;display:flex;align-items:center;justify-content:center;gap:6px;}
.intro-location svg{width:14px;height:14px;fill:var(--t3);}

@media(max-width:768px){
  .intro-text h1{
    font-family:var(--f);
    font-size:clamp(2rem, 8vw, 3.2rem);
    font-weight:900;
    line-height:1.1;
    margin-bottom:12px;
    letter-spacing:normal;
  }
  .intro-text h1 span{
    font-weight:900;
    color:var(--li-blue);
  }
  .intro-text p{
    font-size:clamp(0.95rem, 2vw, 1.25rem);
    font-weight:400;
    font-family:var(--f);
    margin-bottom:8px;
  }
  .intro-location{justify-content:center;}
}

/* ================================================================
   MAIN APP — hidden until intro done
   ================================================================ */
#app{
  opacity:0;transition:opacity .5s .2s var(--ease), transform 0.5s var(--ease);
  padding-top:52px;
  min-height:100vh;
}
#app.visible{opacity:1;}

/* ================================================================
   NAVBAR
   ================================================================ */
#navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:52px;background:#fff;
  border-bottom:1px solid var(--border);
  box-shadow:var(--sh-nav);
  display:flex;align-items:center;
}
.nb-inner{
  max-width:1128px;width:100%;margin:0 auto;
  padding:0 12px;display:flex;align-items:center;gap:6px;
}
.nb-logo svg{width:34px;height:34px;fill:var(--li-blue);}
.nb-search{position:relative;flex-shrink:0;}
.nb-search input{
  width:220px;height:34px;background:#eef3f8;
  border:1px solid transparent;border-radius:var(--r-sm);
  padding:0 10px 0 32px;font-size:13px;transition:var(--tr);
}
.nb-search input:focus{outline:none;background:#fff;border-color:var(--li-blue);}
.nb-search input::placeholder{color:var(--t3);}
.nb-search-ic{position:absolute;left:9px;top:50%;transform:translateY(-50%);}
.nb-search-ic svg{width:14px;height:14px;fill:var(--t3);}
.nb-nav{display:flex;align-items:center;gap:1px;margin-left:auto;}
.nb-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:4px 9px 0;height:52px;border-bottom:2px solid transparent;
  color:var(--t2);transition:var(--tr);text-decoration:none;min-width:48px;cursor:pointer;
}
.nb-item:hover,.nb-item.active{color:var(--t1);border-bottom-color:var(--t1);text-decoration:none;}
.nb-item-ic{position:relative;display:flex;width:24px;height:24px;align-items:center;justify-content:center;margin-bottom:1px;}
.nb-item-ic svg{width:24px;height:24px;fill:currentColor;}
.nb-item-lbl{font-size:10.5px;white-space:nowrap;padding-bottom:4px;}
.nb-badge{position:absolute;top:-4px;right:-6px;background:var(--red);color:#fff;font-size:9px;font-weight:700;min-width:15px;height:15px;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;padding:0 3px;}
.nb-pfp-btn{display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 9px 0;height:52px;border-bottom:2px solid transparent;color:var(--t2);min-width:48px;cursor:pointer;transition:var(--tr);}
.nb-pfp-btn:hover{color:var(--t1);border-bottom-color:var(--t1);}
.nb-pfp{width:22px;height:22px;border-radius:50%;object-fit:cover;}
.nb-divider{width:1px;height:22px;background:var(--border);margin:0 3px;}

/* ================================================================
   PAGE LAYOUT
   ================================================================ */
.page{
  max-width:1128px;margin:0 auto;padding:20px 12px 80px;
  display:grid;
  grid-template-columns:225px 1fr 290px;
  gap:14px;align-items:start;
}

/* ================================================================
   CARDS
   ================================================================ */
.card{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-card);transition:box-shadow var(--tr);
}
.card:hover{box-shadow:var(--sh-hover);}

/* ================================================================
   LEFT SIDEBAR
   ================================================================ */
.sidebar-l{position:sticky;top:64px;display:flex;flex-direction:column;gap:8px;}

.prof-banner{height:52px;background:linear-gradient(135deg,#0a66c2,#004182 50%,#12233a);overflow:hidden;position:relative;}
.prof-banner::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='0.06'%3E%3Cpath d='M15 15L25 5v20zm0 0L5 25h20z'/%3E%3C/g%3E%3C/svg%3E");}
.prof-av-wrap{text-align:center;margin-top:-26px;padding:0 14px;}
.otw{position:relative;display:inline-block;}
.otw::after{content:'Open to work';position:absolute;bottom:1px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;font-size:7px;font-weight:700;padding:2px 5px;border-radius:var(--r-full);white-space:nowrap;border:2px solid #fff;}
.prof-av{width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid #fff;margin:0 auto;box-shadow:0 0 0 2px rgba(10,102,194,.15);}
.prof-body{padding:8px 14px 0;text-align:center;}
.prof-name{font-size:15px;font-weight:700;color:var(--t1);margin-bottom:2px;line-height:1.3;}
.prof-name a{color:inherit;}
.prof-name a:hover{color:var(--li-blue);text-decoration:none;}
.prof-hl{font-size:11.5px;color:var(--t2);line-height:1.4;margin-bottom:5px;}
.prof-loc{font-size:11px;color:var(--t3);display:flex;align-items:center;justify-content:center;gap:3px;margin-bottom:8px;}
.prof-loc svg{width:11px;height:11px;fill:var(--t3);}
.prof-hr{border:none;border-top:1px solid var(--border-lt);}
.prof-stats{padding:6px 14px;}
.prof-stat{display:flex;justify-content:space-between;align-items:center;padding:3px 0;cursor:pointer;}
.prof-stat-l{font-size:11.5px;color:var(--t2);}
.prof-stat-v{font-size:11.5px;font-weight:700;color:var(--li-blue);}
.prof-prem{display:flex;align-items:center;gap:5px;padding:5px 14px 8px;font-size:11.5px;color:#915907;cursor:pointer;}
.prof-prem svg{width:13px;height:13px;fill:var(--gold);}
.prof-saved{border-top:1px solid var(--border-lt);padding:9px 14px;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--t2);cursor:pointer;}
.prof-saved svg{width:15px;height:15px;fill:currentColor;}

.sl-title{font-size:11.5px;font-weight:600;color:var(--t2);padding:10px 14px 5px;}
.sl-link{display:flex;align-items:center;gap:7px;padding:5px 14px;color:var(--t2);font-size:11.5px;font-weight:500;cursor:pointer;transition:var(--tr);}
.sl-link:hover{background:rgba(0,0,0,.03);color:var(--li-blue);text-decoration:none;}
.sl-link svg{width:13px;height:13px;fill:currentColor;flex-shrink:0;}
.sl-foot{display:block;padding:9px 14px;font-size:11.5px;font-weight:500;color:var(--t2);border-top:1px solid var(--border-lt);text-align:center;}
.sl-foot:hover{background:rgba(0,0,0,.03);text-decoration:none;}

/* ================================================================
   FEED COLUMN
   ================================================================ */
.feed-col{display:flex;flex-direction:column;gap:0;min-width:0;}

/* Composer */
.composer{padding:12px 14px;margin-bottom:6px;}
.comp-top{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.comp-av{width:46px;height:46px;border-radius:50%;object-fit:cover;border:1px solid var(--border);flex-shrink:0;}
.comp-input{flex:1;height:38px;border:1.5px solid var(--border);border-radius:var(--r-full);padding:0 14px;font-size:13px;font-family:var(--f);color:var(--t2);font-weight:600;background:transparent;cursor:pointer;}
.comp-input:hover{border-color:var(--t1);}
.comp-input:focus{outline:none;border-color:var(--li-blue);}
.comp-acts{display:flex;align-items:center;justify-content:space-between;}
.comp-btn{display:flex;align-items:center;gap:5px;padding:7px 8px;border-radius:var(--r-sm);font-size:12.5px;font-weight:600;color:var(--t2);flex:1;justify-content:center;}
.comp-btn:hover{background:rgba(0,0,0,.05);color:var(--t1);}
.comp-btn svg{width:19px;height:19px;}

/* Floating Controls */
#floating-ctrl{
  position:fixed;bottom:20px;left:20px;z-index:2000;
  display:flex;align-items:center;gap:5px;
  background:transparent;
}
.dl-btn{display:flex;align-items:center;gap:5px;background:var(--li-blue);color:#fff;padding:7px 14px;border-radius:var(--r-full);font-size:12.5px;font-weight:600;cursor:pointer;transition:var(--tr);text-decoration:none;}
.dl-btn:hover{background:var(--li-blue-dk);text-decoration:none;color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(10,102,194,.3);}
.dl-btn svg{width:15px;height:15px;fill:#fff;}

/* ================================================================
   FEED SCROLL CONTAINER
   ================================================================ */
.feed-wrap{
  position:relative;
  height:calc(100vh - 64px);
  min-height:auto;
  max-height:none;
  border-radius:var(--r-lg);
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  will-change: height;
  transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.feed-wrap::-webkit-scrollbar { display: none; }


/* scroll track */
.feed-track{
  display:flex;flex-direction:column;gap:8px;
  transition: padding-top 0.6s cubic-bezier(0.22, 1, 0.36, 1), padding-bottom 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

body.focused .feed-track {
  padding-top: 45vh;
  padding-bottom: 40vh;
}

/* Controls inside feed-bar */
.feed-ctrl{
  display:flex;align-items:center;gap:5px;
}
.feed-status{
  display:flex;align-items:center;gap:4px;
  background:rgba(0,0,0,.55);color:#fff;
  padding:4px 9px;border-radius:var(--r-full);
  font-size:10.5px;font-weight:500;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.feed-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:dotPulse 1.4s infinite;}
.feed-status.paused .feed-dot{background:#ff9800;animation:none;}
@keyframes dotPulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.feed-toggle{
  background:rgba(0,0,0,.55);color:#fff;border:none;
  border-radius:var(--r-full);padding:4px 9px;
  font-size:10.5px;font-weight:600;cursor:pointer;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;gap:3px;transition:var(--tr);
}
.feed-toggle:hover{background:rgba(0,0,0,.75);}
.feed-toggle svg{width:11px;height:11px;fill:#fff;}

/* ================================================================
   POST CARD
   ================================================================ */
.post{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-card);flex-shrink:0;
  will-change: box-shadow, background, border-color;
  transition:box-shadow .25s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.post:hover{box-shadow:var(--sh-hover);}

.post-head{display:flex;align-items:flex-start;padding:12px 14px 0;gap:9px;}
.p-av{width:46px;height:46px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1px solid var(--border);}
.p-info{flex:1;min-width:0;}
.p-name{font-size:13.5px;font-weight:700;color:var(--t1);line-height:1.3;cursor:pointer;}
.p-name:hover{color:var(--li-blue);}
.p-meta{font-size:11px;color:var(--t2);line-height:1.4;margin-top:1px;}
.p-time{font-size:10.5px;color:var(--t3);display:flex;align-items:center;gap:3px;margin-top:1px;}
.p-time svg{width:11px;height:11px;fill:var(--t3);}
.p-more{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--t2);cursor:pointer;flex-shrink:0;}
.p-more:hover{background:rgba(0,0,0,.07);}
.p-more svg{width:20px;height:20px;fill:currentColor;}

/* Type badge */
.p-badge{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:var(--r-full);font-size:10.5px;font-weight:600;margin:7px 14px 0;}
.b-exp{background:#e8f3ff;color:#0a66c2;}
.b-proj{background:#f0f9ee;color:#31875c;}
.b-edu{background:#fef9e8;color:#8a5c00;}
.b-ach{background:#fdf0f0;color:#a00e11;}
.b-cert{background:#f3eeff;color:#6936c5;}
.b-skill{background:#e8f7f7;color:#1a7a7a;}
.b-about{background:#fff0e8;color:#b05a00;}
.b-icon{width:11px;height:11px;fill:currentColor;}

/* Post body */
.p-body{padding:9px 14px 0;}
.p-title{font-size:14.5px;font-weight:700;color:var(--t1);margin-bottom:6px;line-height:1.4;}
.p-company{font-size:11.5px;color:var(--t2);font-weight:500;margin-bottom:3px;display:flex;align-items:center;gap:5px;}
.p-company svg{width:12px;height:12px;fill:currentColor;}
.p-period{font-size:10.5px;color:var(--t3);margin-bottom:8px;display:flex;align-items:center;gap:5px;}
.p-period svg{width:10px;height:10px;fill:currentColor;}
.p-text{font-size:13.5px;color:var(--t1);line-height:1.6;margin-bottom:9px;}
.p-ul{margin:5px 0 9px;padding:0;}
.p-ul li{font-size:13px;color:var(--t1);line-height:1.6;padding:2px 0 2px 16px;position:relative;}
.p-ul li::before{content:'▸';position:absolute;left:1px;color:var(--li-blue);font-size:9px;top:5px;}

/* ── SLIDESHOW (Natural size to keep original aspect ratio) ── */
.slideshow{
  position:relative;margin:8px 0 9px;
  border-radius:var(--r-md);overflow:hidden;
  background:#f0f0f0;
}
.slideshow-inner{
  width:100%;
  height:auto;
  position: relative;
  background:#f0f0f0;
}
.slide{
  display:none;
  cursor:pointer;
  animation: fadeIn .4s var(--ease);
  width: 100%;
  height: auto;
}
.slide.active{
  display:block;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.slide img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  background:#f0f0f0;
}
/* nav arrows */
.ss-arr{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:5;width:32px;height:32px;border-radius:50%;
  background:rgba(0,0,0,.45);color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:none;transition:var(--tr);backdrop-filter:blur(4px);
}
.ss-arr:hover{background:rgba(0,0,0,.7);}
.ss-arr svg{width:16px;height:16px;fill:#fff;}
.ss-prev{left:8px;} .ss-next{right:8px;}
/* dots */
.ss-dots{
  position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  display:flex;gap:5px;z-index:5;
}
.ss-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.5);
  cursor:pointer;transition:var(--tr);
}
.ss-dot.active{background:#0a66c2;border-color:#fff;width:14px;border-radius:3px;}
/* count badge */
.ss-count{
  position:absolute;top:8px;right:8px;z-index:5;
  background:rgba(0,0,0,.5);color:#fff;
  font-size:10.5px;font-weight:600;
  padding:3px 8px;border-radius:var(--r-full);
  backdrop-filter:blur(4px);
}

/* Metrics */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:7px;margin:7px 0 9px;}
.metric{background:linear-gradient(135deg,#f3f9ff,#e8f0fe);border:1px solid rgba(10,102,194,.1);border-radius:var(--r-md);padding:9px;text-align:center;}
.metric-v{font-size:18px;font-weight:800;color:var(--li-blue);line-height:1.1;margin-bottom:2px;}
.metric-l{font-size:9.5px;color:var(--t2);font-weight:500;}

/* Pills */
.techs,.skills{display:flex;flex-wrap:wrap;gap:5px;margin:5px 0 9px;}
.tech{padding:3px 9px;background:#eef3f8;border-radius:var(--r-full);font-size:11px;font-weight:500;color:var(--li-blue);}
.skill-tag{padding:3px 9px;border:1.5px solid var(--border);border-radius:var(--r-full);font-size:11px;font-weight:500;color:var(--t2);}
.skill-tag:hover{border-color:var(--li-blue);color:var(--li-blue);background:var(--li-blue-lt);}

/* GitHub link preview */
.gh-link{
  border:1px solid var(--border);border-radius:var(--r-md);
  overflow:hidden;margin-bottom:9px;display:block;text-decoration:none;transition:var(--tr);
}
.gh-link:hover{border-color:var(--li-blue);text-decoration:none;}
.gh-bar{height:3px;background:linear-gradient(90deg,var(--li-blue),#0078d7);}
.gh-body{padding:9px 12px;display:flex;align-items:center;gap:9px;}
.gh-ic{width:30px;height:30px;border-radius:var(--r-sm);background:#24292f;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.gh-ic svg{width:16px;height:16px;fill:#fff;}
.gh-title{font-size:12.5px;font-weight:600;color:var(--t1);}
.gh-url{font-size:10.5px;color:var(--t3);}

/* Reactions */
.p-reacts{display:flex;align-items:center;justify-content:space-between;padding:5px 14px;border-top:1px solid var(--border-lt);margin-top:5px;}
.r-left{display:flex;align-items:center;gap:3px;cursor:pointer;}
.r-stack{display:flex;}
.r-em{width:17px;height:17px;border-radius:50%;border:1.5px solid #fff;font-size:11px;display:flex;align-items:center;justify-content:center;margin-left:-3px;background:#eef3f8;}
.r-em:first-child{margin-left:0;}
.r-cnt{font-size:11px;color:var(--t2);margin-left:3px;}
.r-cnt:hover{color:var(--li-blue);}
.r-com{font-size:11px;color:var(--t2);}
.r-com:hover{color:var(--li-blue);}

/* Post footer */
.p-foot{display:flex;align-items:center;padding:3px 8px;border-top:1px solid var(--border-lt);}
.p-btn{display:flex;align-items:center;gap:4px;padding:8px 6px;flex:1;justify-content:center;border-radius:var(--r-sm);font-size:12.5px;font-weight:600;color:var(--t2);cursor:pointer;}
.p-btn:hover{background:rgba(0,0,0,.05);color:var(--t1);}
.p-btn svg{width:19px;height:19px;fill:currentColor;}
.p-btn.liked{color:#378fe9;}
.p-btn.liked svg path{fill:#378fe9;}

/* ================================================================
   RIGHT SIDEBAR
   ================================================================ */
.sidebar-r{position:sticky;top:64px;display:flex;flex-direction:column;gap:8px;}
.rh{display:flex;align-items:center;justify-content:space-between;padding:11px 14px 7px;}
.rh-title{font-size:13.5px;font-weight:700;color:var(--t1);}
.rh-info{width:19px;height:19px;display:flex;align-items:center;justify-content:center;color:var(--t3);cursor:pointer;border-radius:50%;}
.rh-info:hover{background:rgba(0,0,0,.06);}
.rh-info svg{width:15px;height:15px;fill:currentColor;}

.skill-list{padding:0 14px 9px;}
.sk-item{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px solid var(--border-lt);cursor:pointer;}
.sk-item:last-child{border-bottom:none;}
.sk-rank{width:16px;font-size:11.5px;font-weight:700;color:var(--t3);text-align:center;flex-shrink:0;}
.sk-ic{width:26px;height:26px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
.sk-name{font-size:12.5px;font-weight:600;color:var(--t1);}
.sk-meta{font-size:10.5px;color:var(--t3);margin-top:1px;}

.cred-list{padding:0 14px 9px;}
.cred-item{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--border-lt);}
.cred-item:last-child{border-bottom:none;}
.cred-logo{
  width:34px;height:34px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  overflow:hidden;font-size:18px;
}
.cred-name{font-size:11.5px;font-weight:600;color:var(--t1);line-height:1.3;}
.cred-iss{font-size:10.5px;color:var(--t3);}
.cred-lnk{font-size:11px;font-weight:600;color:var(--li-blue);cursor:pointer;white-space:nowrap;}
.cred-lnk:hover{text-decoration:underline;}

.exp-list{padding:0 14px 9px;}
.exp-item{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px solid var(--border-lt);}
.exp-item:last-child{border-bottom:none;}
.exp-ic{width:26px;height:26px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
.exp-name{font-size:12.5px;font-weight:600;color:var(--t1);}
.exp-meta{font-size:10.5px;color:var(--t3);}

.foot-links{padding:9px 14px;display:flex;flex-wrap:wrap;gap:3px 9px;}
.fl{font-size:10.5px;color:var(--t3);cursor:pointer;}
.fl:hover{color:var(--t1);text-decoration:underline;}
.fl-brand{width:100%;font-size:10px;color:var(--t3);margin-top:4px;}

/* ================================================================
   MESSAGING BAR
   ================================================================ */
.msg-bar{
  position:fixed;bottom:0;right:20px;z-index:900;
  width:288px;background:#fff;
  border:1px solid var(--border);border-bottom:none;
  border-radius:var(--r-md) var(--r-md) 0 0;
  box-shadow:0 -2px 10px rgba(0,0,0,.1);
  cursor:pointer;
  transition:height .25s var(--ease);
}
.msg-head{display:flex;align-items:center;padding:9px 12px;gap:7px;}
.msg-head:hover{background:rgba(0,0,0,.03);}
.msg-pfp{width:26px;height:26px;border-radius:50%;object-fit:cover;position:relative;}
.msg-online{position:relative;}
.msg-online::after{
  content:'';position:absolute;bottom:0;right:0;
  width:9px;height:9px;border-radius:50%;
  background:var(--green);border:2px solid #fff;
}
.msg-title{font-size:13.5px;font-weight:600;color:var(--t1);flex:1;}
.msg-acts{display:flex;align-items:center;gap:3px;}
.msg-btn{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--t2);cursor:pointer;}
.msg-btn:hover{background:rgba(0,0,0,.07);}
.msg-btn svg{width:15px;height:15px;fill:currentColor;}

/* ================================================================
   CONTACT MODAL
   ================================================================ */
.modal-bg{
  position:fixed;inset:0;z-index:2000;
  background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;padding:16px;
  opacity:0;visibility:hidden;transition:all .25s var(--ease);
}
.modal-bg.open{opacity:1;visibility:visible;}
.modal{
  background:#fff;border-radius:var(--r-xl);
  max-width:420px;width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  transform:translateY(16px);transition:transform .25s var(--ease);
  max-height:90vh;overflow-y:auto;
}
.modal-bg.open .modal{transform:translateY(0);}
.modal-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border-lt);}
.modal-hd h2{font-size:15px;font-weight:700;color:var(--t1);}
.modal-x{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--t2);cursor:pointer;}
.modal-x:hover{background:rgba(0,0,0,.07);}
.modal-x svg{width:18px;height:18px;fill:currentColor;}
.modal-body{padding:18px;}
.modal-prof{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.modal-pfp{width:60px;height:60px;border-radius:50%;object-fit:cover;border:3px solid var(--li-blue-lt);}
.modal-n{font-size:16px;font-weight:700;color:var(--t1);}
.modal-r{font-size:12px;color:var(--t2);}
.cbtns{display:flex;flex-direction:column;gap:9px;}
.cbtn{
  display:flex;align-items:center;gap:11px;
  padding:11px 14px;border-radius:var(--r-md);
  border:1.5px solid var(--border);cursor:pointer;
  transition:var(--tr);text-decoration:none;color:var(--t1);
}
.cbtn:hover{border-color:var(--li-blue);background:var(--li-blue-lt);text-decoration:none;}
.cbtn-ic{width:34px;height:34px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cbtn-ic svg{width:20px;height:20px;}
.cbtn-text {
  flex: 1;
  min-width: 0; /* allows text truncation inside flexbox */
}
.cbtn-lbl{font-size:10.5px;color:var(--t3);font-weight:500;}
.cbtn-val{
  font-size:12.5px;
  font-weight:600;
  color:var(--t1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cbtn-arr{font-size:15px;color:var(--t3);margin-left:auto;}
.modal-ft{padding:11px 18px;border-top:1px solid var(--border-lt);text-align:center;font-size:11.5px;color:var(--t2);}

/* ================================================================
   LIGHTBOX
   ================================================================ */
.lb{
  position:fixed;inset:0;z-index:3000;
  background:rgba(0,0,0,.93);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:all .25s;
  cursor:zoom-out;
}
.lb.open{opacity:1;visibility:visible;}
.lb img{max-width:90vw;max-height:88vh;border-radius:var(--r-md);object-fit:contain;}
.lb-x{position:absolute;top:14px;right:18px;color:#fff;font-size:26px;cursor:pointer;font-weight:300;line-height:1;}
.lb-x:hover{opacity:.7;}
.lb-arr{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.15);border:none;color:#fff;
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:var(--tr);backdrop-filter:blur(4px);
}
.lb-arr:hover{background:rgba(255,255,255,.3);}
.lb-arr svg{width:20px;height:20px;fill:#fff;}
.lb-prev{left:14px;} .lb-next{right:14px;}
.lb-cnt{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.7);font-size:12px;}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media(max-width:1080px){.page{grid-template-columns:200px 1fr 260px;}}
@media(max-width:880px){
  .page{grid-template-columns:1fr 240px;}
  .sidebar-l{display:none;}
}
@media(max-width:640px){
  #app{padding-top:52px;}
  .page{grid-template-columns:1fr;padding:8px 8px 80px;}
  .sidebar-r{display:none;}
  .nb-search input{width:130px;}
  .nb-item-lbl{display:none !important;}
  .nb-divider, .nb-nav a[title="Work"] { display: none !important; }
  .nb-item{min-width:36px;padding:4px 5px 0;}
  .nb-pfp-btn{min-width:36px;padding:4px 5px 0;}
  .feed-wrap{height:calc(100vh - 120px);min-height:500px;}
  .msg-bar{width:calc(100% - 24px);right:12px;}
  .comp-btn span{display:none;}
  .metrics{grid-template-columns:repeat(2,1fr);}
  .lb img{max-width:100vw;width:100%;border-radius:0;}
  #floating-ctrl{bottom:46px;left:12px;z-index:2001;}
}
@media(max-width:380px){
  .nb-search{display:none;}
  .nb-item{min-width:30px;padding:4px 3px 0;}
}

/* Scrollbar */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:3px;}
::-webkit-scrollbar-track{background:transparent;}