/* =====================================================
   AIFT HOME MOBILE — SIMPLE LINKEDIN STYLE
   Replace entire mobile-home.css
===================================================== */

.mobile-nav{
  display:none;
}

@media(max-width:1024px){
  .layout{
    grid-template-columns:1fr!important;
  }

  .left-col,
  .right-col{
    display:none!important;
  }
}

@media(max-width:760px){

  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  a,
  button,
  label,
  input,
  textarea,
  select,
  [role="button"],
  [tabindex]{
    -webkit-tap-highlight-color:transparent!important;
  }

body{
    background:#ffffff!important;
    padding-bottom:56px!important;
}

  .container{
    width:100%!important;
    max-width:100%!important;
    padding:0!important;
  }

.page{
  padding:54px 0 0!important;
  background:#fff!important;
}

/* =====================================================
   MOBILE TOPBAR — PRODUCTION REPLACEMENT
===================================================== */

.topbar{
  position:fixed!important;

  top:0!important;
  left:0!important;
  right:0!important;

  z-index:5000!important;

  width:100%!important;

  background:#fff!important;

  border-bottom:
    1px solid
    #e5e7eb!important;

  box-shadow:none!important;

  transform:
    translateY(0);

  transition:
    transform .28s ease,
    background .25s ease,
    backdrop-filter .25s ease,
    border-color .25s ease!important;
}


.topbar.is-glass{
  background:
    rgba(255,255,255,.92)!important;

  backdrop-filter:
    blur(14px)!important;

  -webkit-backdrop-filter:
    blur(14px)!important;

  border-bottom-color:
    rgba(229,231,235,.65)!important;
}


.topbar.is-hidden{
  transform:
    translateY(-110%)!important;
}


/* =====================================================
   MOBILE TOPBAR INNER
===================================================== */

.top-inner{
  width:100%!important;
  max-width:100%!important;

  height:58px!important;
  min-height:58px!important;

  margin:0!important;

  padding:
    7px
    10px!important;

  display:grid!important;

  grid-template-columns:
    38px
    minmax(0,1fr)
    38px!important;

  align-items:center!important;

  gap:8px!important;
}


/* =====================================================
   LEFT PROFILE AVATAR
===================================================== */

.brand{
  order:initial!important;

  width:38px!important;
  height:38px!important;

  min-width:38px!important;
  max-width:38px!important;

  padding:0!important;
  margin:0!important;

  display:block!important;

  border:0!important;
  border-radius:50%!important;

  overflow:hidden!important;

  background:#eef2f7!important;
}


.brand img{
  display:none!important;
}


.brand::before{
  content:"";

  display:block!important;

  width:38px!important;
  height:38px!important;

  border-radius:50%!important;

  background-image:
    var(--mobile-avatar);

  background-size:cover!important;
  background-position:center!important;

  background-color:#e5e7eb!important;
}


/* =====================================================
   MOBILE SEARCH
===================================================== */

.search{
  order:initial!important;

  position:relative!important;

  width:100%!important;
  max-width:none!important;
  min-width:0!important;

  margin:0!important;

  flex:none!important;

  display:block!important;
}


/* SEARCH INPUT */

.search input{
  width:100%!important;
  height:40px!important;

  min-width:0!important;

  padding:
    0
    38px
    0
    38px!important;

  border:
    1px solid
    #cbd5e1!important;

  border-radius:
    999px!important;

  background:#f7f9fb!important;

  color:#172033!important;

  font-size:16px!important;
  line-height:1!important;
  font-weight:500!important;

  outline:none!important;

  box-shadow:none!important;

  appearance:none!important;

  -webkit-appearance:none!important;

  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease!important;
}


.search input::placeholder{
  color:#6b7280!important;

  font-size:15px!important;
  font-weight:450!important;
}


.search input:focus{
  border-color:#5b9ee2!important;

  background:#fff!important;

  box-shadow:
    0
    0
    0
    3px
    rgba(10,102,194,.09)!important;
}


/* =====================================================
   SEARCH ICON
===================================================== */

.search > svg{
  position:absolute!important;

  left:13px!important;
  top:50%!important;

  width:17px!important;
  height:17px!important;

  transform:
    translateY(-50%)!important;

  z-index:2!important;

  pointer-events:none!important;

  fill:none!important;

  stroke:#64748b!important;

  stroke-width:2!important;
}


.search:focus-within > svg{
  stroke:#0a66c2!important;
}


/* =====================================================
   SEARCH CLEAR BUTTON
===================================================== */

.search-clear{
  position:absolute!important;

  top:50%!important;
  right:6px!important;

  z-index:3!important;

  width:28px!important;
  height:28px!important;

  transform:
    translateY(-50%)!important;

  padding:0!important;

  display:grid!important;
  place-items:center!important;

  border:0!important;
  border-radius:50%!important;

  background:transparent!important;

  color:#64748b!important;

  font-size:18px!important;
  line-height:1!important;
}


.search-clear.hidden{
  display:none!important;
}


.search-clear:active{
  background:#eef2f6!important;
}


/* =====================================================
   RIGHT TOPBAR ACTION
===================================================== */

.top-nav{
  order:initial!important;

  width:38px!important;
  min-width:38px!important;

  margin:0!important;

  display:flex!important;

  align-items:center!important;
  justify-content:center!important;

  gap:0!important;
}


/*
  Hide all desktop navigation items on mobile.
*/

.top-nav .top-link{
  display:none!important;
}


/*
  Keep only Messaging on the right side.

  Current home.html order:
  1 Home
  2 Network
  3 Jobs
  4 Messaging
  5 Alerts
  6 Me
*/

.top-nav
.top-link:nth-child(4){
  width:38px!important;
  height:38px!important;

  min-width:38px!important;

  padding:0!important;

  display:flex!important;

  align-items:center!important;
  justify-content:center!important;

  border:0!important;

  border-radius:50%!important;

  background:transparent!important;

  color:#475569!important;
}


.top-nav
.top-link:nth-child(4)
span{
  display:none!important;
}


.top-nav
.top-link:nth-child(4)
svg{
  width:23px!important;
  height:23px!important;

  stroke:currentColor!important;

  stroke-width:2!important;
}


/*
  Desktop avatar / notification badge do not belong
  in this compact mobile topbar.
*/

.top-avatar,
.nav-badge{
  display:none!important;
}


/* =====================================================
   GLOBAL SEARCH DROPDOWN — MOBILE
===================================================== */

.search-panel{
  position:fixed!important;

  top:64px!important;

  left:8px!important;
  right:8px!important;

  width:auto!important;
  max-width:none!important;

  max-height:
    calc(
      100dvh -
      80px
    )!important;

  overflow-x:hidden!important;
  overflow-y:auto!important;

  border:
    1px solid
    #d8dee7!important;

  border-radius:14px!important;

  background:#fff!important;

  box-shadow:
    0
    16px
    40px
    rgba(15,23,42,.18)!important;

  z-index:6000!important;

  -webkit-overflow-scrolling:
    touch!important;
}

/* ================= FEED — INSTAGRAM CLEAN WHITE ================= */

  .layout,
  .feed-col{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    background:#fff!important;
  }

  #feedMount,
  #feedMount .aift-feed-shell,
  #feedMount .aift-feed-list{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    gap:0!important;
    background:#fff!important;
  }

  #feedMount .aift-composer{
    display:none!important;
  }

  #feedMount .aift-post-card,
  #feedMount .post-card,
  #feedMount .feed-post,
  #feedMount .feed-item,
  #feedMount article.card{
    width:100%!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:#fff!important;
    overflow:hidden!important;
  }

  #feedMount .aift-post-card + .aift-post-card{
    margin-top:0!important;
    border-top:0!important;
  }

  #feedMount .aift-post-header{
    padding:10px 12px 7px!important;
    background:#fff!important;
  }

  #feedMount .aift-avatar{
    width:34px!important;
    height:34px!important;
    border-radius:50%!important;
  }

  #feedMount .aift-author{
    gap:8px!important;
  }

  #feedMount .aift-author-name strong{
    font-size:13px!important;
    font-weight:800!important;
    color:#111!important;
    max-width:165px!important;
  }

  #feedMount .aift-author-text span{
    font-size:11px!important;
    color:#666!important;
    max-width:185px!important;
  }

  #feedMount .aift-post-text{
    padding:2px 12px 8px!important;
    font-size:13.5px!important;
    line-height:1.45!important;
    color:#222!important;
    background:#fff!important;
  }

  #feedMount .aift-media-wrap,
  #feedMount .aift-carousel{
    width:100%!important;
    margin:0!important;
    border-radius:0!important;
    background:#fff!important;
    overflow:hidden!important;
  }

  #feedMount .aift-post-media,
  #feedMount .aift-carousel-slide img,
  #feedMount .aift-carousel-slide video{
    width:100%!important;
    max-height:620px!important;
    object-fit:cover!important;
    border-radius:0!important;
    background:#fff!important;
  }

  #feedMount .aift-post-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    padding:6px 12px 6px!important;
    margin:0!important;
    border:0!important;
    background:#fff!important;
  }

  #feedMount .aift-left-actions{
    display:flex!important;
    align-items:center!important;
    gap:15px!important;
  }

  #feedMount .aift-action-btn{
    width:auto!important;
    height:28px!important;
    min-width:auto!important;
    padding:0!important;
    gap:4px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#262626!important;
  }

  #feedMount .aift-action-btn svg{
    width:19px!important;
    height:19px!important;
    stroke-width:2!important;
  }

  #feedMount .aift-action-btn strong{
    font-size:11px!important;
    font-weight:700!important;
    color:#555!important;
    line-height:1!important;
  }

  #feedMount .aift-action-btn:hover{
    background:transparent!important;
  }

  #feedMount .aift-post-stats{
    display:none!important;
    height:0!important;
    padding:0!important;
    margin:0!important;
    overflow:hidden!important;
  }

  #feedMount .aift-comments-inline-container,
  #feedMount .aift-inline-comments{
    background:#fff!important;
    border:0!important;
  }
  /* ================= BOTTOM NAV ================= */

  .mobile-nav{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    height:78px!important;
    z-index:4000!important;
    display:grid!important;
    grid-template-columns:repeat(5,1fr)!important;
    background:#fff!important;
    border-top:1px solid #d8d8d8!important;
    box-shadow:none!important;
  }

  .mobile-nav button,
  .mobile-nav a{
    border:0!important;
    background:#fff!important;
    color:#777!important;
    text-decoration:none!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    height:100%!important;
    font-size:13px!important;
    font-weight:500!important;
  }

  .mobile-nav button.active,
  .mobile-nav a.active{
    color:#111!important;
  }

  .mobile-nav svg{
    width:32px!important;
    height:32px!important;
    stroke:currentColor!important;
    fill:none!important;
    stroke-width:2.4!important;
  }

  .mobile-create svg{
    width:34px!important;
    height:34px!important;
    padding:3px!important;
    border-radius:7px!important;
    background:#8a8a8a!important;
    stroke:#fff!important;
  }

  .mobile-create span{
    display:none!important;
  }

  .mobile-create::after{
    content:"Post";
    color:#777;
    font-size:13px;
    font-weight:500;
  }
}

/* small phones */
@media(max-width:390px){
  .search input{
    font-size:20px!important;
    height:46px!important;
  }

  #feedMount .aift-media-wrap{
    width:calc(100% - 36px)!important;
  }

  #feedMount .aift-post-header,
  #feedMount .aift-post-text,
  #feedMount .aift-post-actions{
    padding-left:18px!important;
    padding-right:18px!important;
  }
}

/* safe area */
@supports(padding:max(0px)){
  @media(max-width:760px){

    body{
      padding-bottom:calc(56px + env(safe-area-inset-bottom))!important;
    }

    .mobile-nav{
      height:calc(54px + env(safe-area-inset-bottom))!important;
      padding-bottom:env(safe-area-inset-bottom)!important;
    }
  }
}
/* =====================================================
   AIFT MOBILE FINAL POLISH V3
===================================================== */

@media(max-width:760px){

  .top-inner{
    height:54px!important;
    padding:6px 10px!important;
    gap:8px!important;
  }

  .brand,
  .brand::before{
    width:32px!important;
    min-width:32px!important;
    height:32px!important;
  }

  .search input{
    height:36px!important;
    font-size:15px!important;
    padding-left:38px!important;
    padding-right:14px!important;
    border-width:1px!important;
  }

  .search svg{
    width:18px!important;
    height:18px!important;
    left:12px!important;
  }

  .top-nav .top-link:nth-child(4){
    display:none!important;
  }

  .top-nav .top-link:nth-child(5){
    display:flex!important;
    position:relative!important;
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
    border:0!important;
    background:transparent!important;
    color:#666!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
  }

  .top-nav .top-link:nth-child(5) span:not(.nav-badge){
    display:none!important;
  }

  .top-nav .top-link:nth-child(5) svg{
    width:25px!important;
    height:25px!important;
    stroke-width:2.35!important;
  }

  .top-nav .top-link:nth-child(5) .nav-badge{
    display:flex;
    top:-2px!important;
    right:-2px!important;
    min-width:15px!important;
    height:15px!important;
    padding:0 4px!important;
    font-size:8px!important;
    border:2px solid #fff!important;
  }

  .top-nav .top-link:nth-child(5) .nav-badge.hidden{
    display:none!important;
  }

  .mobile-nav{
    height:50px!important;
    min-height:50px!important;
    background:linear-gradient(
      to bottom,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.88) 72%,
      rgba(255,255,255,.45) 100%
    )!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    border-top:1px solid rgba(216,216,216,.65)!important;
    box-shadow:none!important;
    transform:translateY(0) scale(1)!important;
    transform-origin:bottom center!important;
    transition:
      transform .34s cubic-bezier(.22,1,.36,1),
      opacity .24s ease!important;
  }

.mobile-nav.is-pulled-down{
  transform:translateY(calc(100% + 12px)) scale(.98)!important;
  opacity:0!important;
  pointer-events:none!important;
}

  .mobile-nav button,
  .mobile-nav a{
    background:transparent!important;
    font-size:9px!important;
    gap:0!important;
    padding:1px 0!important;
    line-height:1!important;
  }

  .mobile-nav svg{
    width:19px!important;
    height:19px!important;
  }

  .mobile-create::after{
    font-size:9px!important;
  }

  .mobile-create svg{
    width:21px!important;
    height:21px!important;
    padding:1px!important;
  }
}

@supports(padding:max(0px)){
  @media(max-width:760px){

    body{
      padding-bottom:calc(52px + env(safe-area-inset-bottom))!important;
    }

    .mobile-nav{
      height:calc(50px + env(safe-area-inset-bottom))!important;
      padding-bottom:env(safe-area-inset-bottom)!important;
    }
  }
}
/* =====================================================
   MOBILE TOP RIGHT: USE NOTIFICATION ICON INSTEAD OF MESSAGE
   Paste at the bottom of mobile-home.css
===================================================== */

@media(max-width:760px){

  /* Hide mobile message icon */
  .top-nav .top-link:nth-child(4){
    display:none!important;
  }

  /* Show mobile notification icon */
  .top-nav .top-link:nth-child(5){
    display:flex!important;
    position:relative!important;
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
    border:0!important;
    background:transparent!important;
    color:#666!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
  }

  .top-nav .top-link:nth-child(5) span:not(.nav-badge){
    display:none!important;
  }

.top-nav .top-link:nth-child(5) svg{
    width:25px!important;
    height:25px!important;
    stroke-width:2.35!important;
}

  /* Show notification badge only when not hidden */
  .top-nav .top-link:nth-child(5) .nav-badge{
    display:flex;
    top:-2px!important;
    right:-2px!important;
    min-width:15px!important;
    height:15px!important;
    padding:0 4px!important;
    font-size:8px!important;
    border:2px solid #fff!important;
  }

  .top-nav .top-link:nth-child(5) .nav-badge.hidden{
    display:none!important;
  }
}
/* =====================================================
   INSTAGRAM STYLE POST SEPARATION
===================================================== */

@media(max-width:760px){

  #feedMount .aift-post-card{
    margin-bottom:0!important;
    background:#fff!important;
    position:relative!important;
  }

  #feedMount .aift-post-card:not(:last-child)::after{
    content:"";
    display:block;
    width:100%;
    height:6px;
    background:#fafafa;
  }

}
.mobile-composer-active{
  outline:2px solid rgba(10,102,194,.18);
  box-shadow:0 12px 30px rgba(10,102,194,.12);
}
.start-post-backdrop{
  position:fixed;
  inset:0;
  z-index:999999;
  background:rgba(15,23,42,.55);
  display:none;
  align-items:flex-end;
  justify-content:center;
}

.start-post-backdrop.show{
  display:flex;
}

.start-post-modal{
  width:100%;
  max-width:640px;
  background:#fff;
  border-radius:22px 22px 0 0;
  overflow:hidden;
}

.start-post-head{
  height:54px;
  padding:0 16px;
  border-bottom:1px solid #e5e7eb;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

#startPostText{
  width:100%;
  min-height:220px;
  border:0;
  outline:0;
  resize:none;
  padding:16px;
  font-size:18px;
  font-family:Inter,sans-serif;
}

.start-post-actions{
  border-top:1px solid #e5e7eb;
  padding:12px 16px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

#startPostSubmit{
  background:#0a66c2;
  color:#fff;
}

body.start-post-open{
  overflow:hidden;
}
/* =========================================
   FINAL MOBILE TOP RIGHT ICON
========================================= */

@media(max-width:760px){

  /* Hide Messaging */
  .top-nav .top-link:nth-child(4){
    display:none!important;
  }

  /* Show Notifications */
  .top-nav .top-link:nth-child(5){
    display:flex!important;
    position:relative!important;
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
    align-items:center!important;
    justify-content:center!important;
    background:transparent!important;
    border:0!important;
    padding:0!important;
    color:#666!important;
  }

  .top-nav .top-link:nth-child(5) svg{
    width:25px!important;
    height:25px!important;
    stroke:#444!important;
    fill:none!important;
    stroke-width:2.3!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
  }

  .top-nav .top-link:nth-child(5) span:not(.nav-badge){
    display:none!important;
  }

  .top-nav .top-link:nth-child(5) .nav-badge{
    display:flex!important;
    position:absolute!important;
    top:-2px!important;
    right:-2px!important;
    min-width:15px!important;
    height:15px!important;
    padding:0 4px!important;
    border-radius:999px!important;
    background:#ef4444!important;
    color:#fff!important;
    font-size:8px!important;
    font-weight:800!important;
    border:2px solid #fff!important;
  }

  .top-nav .top-link:nth-child(5) .nav-badge.hidden{
    display:none!important;
  }
}
/* =========================================
   FINAL SAME NOTIFICATION ICON ON ALL PAGES
========================================= */

@media(max-width:760px){

  .top-nav .top-link:nth-child(4){
    display:none!important;
  }

  .top-nav .top-link:nth-child(5){
    display:flex!important;
    position:relative!important;
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    margin:0!important;
    background:transparent!important;
    border:0!important;
    color:#444!important;
  }

  .top-nav .top-link:nth-child(5) svg{
    width:26px!important;
    height:26px!important;
    display:block!important;
    stroke:#444!important;
    fill:none!important;
    stroke-width:2.55!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
  }

  .top-nav .top-link:nth-child(5) svg path{
    stroke:#444!important;
    fill:none!important;
    stroke-width:2.55!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
  }

  .top-nav .top-link:nth-child(5) span:not(.nav-badge){
    display:none!important;
  }

  .top-nav .top-link:nth-child(5) .nav-badge{
    position:absolute!important;
    top:-4px!important;
    right:-4px!important;
    min-width:17px!important;
    height:17px!important;
    padding:0 5px!important;
    border-radius:999px!important;
    background:#ef4444!important;
    color:#fff!important;
    font-size:9px!important;
    font-weight:900!important;
    border:2px solid #fff!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  .top-nav .top-link:nth-child(5) .nav-badge.hidden{
    display:none!important;
  }
}