/* ===========================================================
   home-rail-layout.css — Feed stays centered + rail sits in right empty space
   PREMIUM POLISH (no layout change)
   + Tighter row layout (bigger avatar, less gap to Follow)
   + Long names WRAP (not ellipsis)
   =========================================================== */

:root{
  --mi-feed-w: 720px;
  --mi-rail-w: 340px;
  --mi-gap: 18px;
  --mi-rail-top: 86px; /* adjust if your header height differs */

  /* Premium tokens */
  --mi-rail-radius: 16px;
  --mi-rail-shadow: 0 10px 28px rgba(0,0,0,.08);
  --mi-rail-shadow-hover: 0 14px 40px rgba(0,0,0,.12);
  --mi-rail-border: rgba(0,0,0,.08);
  --mi-rail-bg: rgba(255,255,255,.92);
}

/* ONLY on Home: remove the container clamp so rail is not clipped */
body.mi-home-wide #app.container,
body.mi-home-wide main.container#app{
  max-width: none !important;
  width: 100% !important;
}

/* Shell takes full width */
#miHomeShell{
  width: 100%;
  position: relative;
}

/* FEED: always centered on the screen */
#miHomeFeedCol{
  width: 100%;
  max-width: var(--mi-feed-w);
  margin-left: auto;
  margin-right: auto;
}

/* RAIL: do NOT affect centering — pin it to the right edge area */
#miHomeRail{
  width: var(--mi-rail-w);
  position: fixed;
  top: var(--mi-rail-top);
  right: var(--mi-gap);
  z-index: 2;
}

/* ---------- PREMIUM LOOK (only styling, no layout changes) ---------- */

/* Make the rail card feel premium */
#miHomeRail .card{
  border-radius: var(--mi-rail-radius) !important;
  border: 1px solid var(--mi-rail-border) !important;
  background: var(--mi-rail-bg) !important;
  box-shadow: var(--mi-rail-shadow) !important;
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  overflow: hidden; /* keeps rounded corners clean */
  transition: box-shadow .18s ease, transform .18s ease;
}

#miHomeRail .card:hover{
  box-shadow: var(--mi-rail-shadow-hover) !important;
}

/* Header spacing + nicer refresh button (still same place/size) */
#miHomeRail #miPeopleRefresh{
  background: rgba(255,255,255,.75) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 12px !important;
  font-weight: 800;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

#miHomeRail #miPeopleRefresh:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
  background: rgba(255,255,255,.95) !important;
}

#miHomeRail #miPeopleRefresh:active{
  transform: translateY(0px);
}

/* Row polish */
#miHomeRail .mi-sug-row{
  padding: 10px 10px !important;       /* tiny tighten */
  margin: 6px 0 !important;
  border-bottom: none !important;      /* remove harsh separators */
  border-radius: 14px;
  transition: background .12s ease, transform .12s ease, box-shadow .12s ease;

  /* tighten internal spacing without changing structure */
  gap: 10px !important;
}

#miHomeRail .mi-sug-row:hover{
  background: rgba(22,163,74,.06);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
}

/* Avatar: larger + premium ring */
#miHomeRail .mi-sug-row img{
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}

/* The text column: allow wrapping and take available width */
#miHomeRail .mi-sug-row > div[style*="min-width:0"]{
  flex: 1 1 auto;
  min-width: 0 !important;
}

/* Name: WRAP if long (override inline ellipsis styles) */
#miHomeRail .mi-sug-row > div[style*="min-width:0"] > div:first-child{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  line-height: 1.15 !important;
}

#miHomeRail .mi-sug-row a{
  display: inline-block;
  font-weight: 900;
  letter-spacing: .1px;
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Meta text: cleaner */
#miHomeRail .mi-sug-row .meta{
  opacity: .85;
  margin-top: 2px !important;
}

/* Reduce the “flex spacer” so Follow button sits closer to the name */
#miHomeRail .mi-sug-row > div[style*="flex:1"]{
  flex: 0 0 6px !important; /* was huge; now just a tiny spacer */
}

/* Follow button: slightly more compact so row feels wider */
#miHomeRail .mi-sug-follow.btn{
  padding: 7px 11px !important;
  min-width: 86px;
  background: linear-gradient(180deg, rgba(22,163,74,1) 0%, rgba(16,130,58,1) 100%) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 10px 18px rgba(22,163,74,.22);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

#miHomeRail .mi-sug-follow.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(22,163,74,.28);
  filter: brightness(1.02);
}

#miHomeRail .mi-sug-follow.btn:active{
  transform: translateY(0px);
  box-shadow: 0 10px 18px rgba(22,163,74,.22);
}

#miHomeRail .mi-sug-follow.btn:disabled{
  opacity: .75;
  box-shadow: none;
  filter: none;
  transform: none;
}

/* If screen is too narrow for feed+rail, hide rail */
@media (max-width: 1140px){
  #miHomeRail{
    display: none !important;
  }
}