/* ============================================================================
   MILAN — "Silver pill" mobile home skin (additive, mobile/PWA only)
   --------------------------------------------------------------------------
   Matches the approved design screenshot: dark navy canvas, components as
   bright silver pills with dark navy text. Desktop untouched. Loaded LAST.
   NOTE: the premium skin uses !important everywhere, so overrides here must
   carry `html.milan-premium-ui` specificity or they silently lose.
   ========================================================================== */
@media (max-width: 760px) {

  /* ---- header owns its width: nothing may extend past the screen -------- */
  body .topbar,
  html.milan-premium-ui .topbar {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  body .topinner,
  html.milan-premium-ui .topinner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    grid-template-columns: 1fr !important;
    padding: 10px 12px 12px !important;
  }
  body .topinner > *, html.milan-premium-ui .topinner > * { min-width: 0 !important; }
  body .search,
  html.milan-premium-ui .search {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    grid-template-columns: 1fr !important;
  }
  body .search input,
  html.milan-premium-ui .search input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    background: rgba(13, 21, 43, 0.92) !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    border-radius: 22px !important;
    color: #e7ecff !important;
    min-height: 48px;
    padding: 0 16px !important;
    font-size: 15px !important;
  }
  body .search input::placeholder { color: #6f81ab !important; }

  /* ---- shared silver pill recipe ---------------------------------------- */
  body .topActions button,
  html.milan-premium-ui .topActions button,
  .milan-filter-chips .milan-chip,
  #milan-feed-tabs .milan-feed-tab,
  .milan-ai-btn,
  .milan-ai-chip,
  .milan-flow-btn {
    background: linear-gradient(180deg, #ffffff 0%, #dde4f2 100%) !important;
    color: #17203a !important;
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
    border-radius: 16px !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 #fff !important;
    text-shadow: none !important;
  }

  /* ---- top actions: compact so ALL FIVE fit on one row ------------------ */
  body .topActions,
  html.milan-premium-ui .topActions {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;      /* safety: swipe if a locale runs long */
    scrollbar-width: none !important;
  }
  body .topActions::-webkit-scrollbar,
  html.milan-premium-ui .topActions::-webkit-scrollbar { display: none !important; }
  body .topActions button,
  html.milan-premium-ui .topActions button {
    flex: 1 1 0 !important;
    min-width: 58px !important;
    max-width: 96px;
    padding: 8px 6px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    min-height: 46px;
    white-space: normal !important;   /* "AI Chat" may take two tight lines */
  }
  body .topActions .health,
  html.milan-premium-ui .topActions .health {
    border-radius: 16px !important;
    font-weight: 900 !important;
    flex: 0 0 auto !important;
  }

  /* ---- filter chips (All / Photos / Videos / Audio / Text / Files) ------ */
  .milan-filter-chips { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
  .milan-filter-chips .milan-chip {
    border-radius: 999px !important;
    padding: 9px 16px !important;
    font-size: 14px !important;
  }
  .milan-filter-chips .milan-chip.active {
    outline: 2px solid #3b82f6 !important;
    outline-offset: -1px;
  }

  /* ---- greeting ---------------------------------------------------------- */
  #milan-greeting {
    font-size: 19px !important;
    font-weight: 900 !important;
    color: #f4f7ff !important;
    padding: 8px 2px 6px !important;
  }

  /* ---- feed tabs: compact, swipeable, none ever half-hidden -------------- */
  #milan-feed-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px !important;
    padding: 2px 2px 6px !important;
  }
  #milan-feed-tabs::-webkit-scrollbar { display: none; }
  #milan-feed-tabs .milan-feed-tab {
    flex: 0 0 auto !important;
    border-radius: 999px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    opacity: 1 !important;
  }
  #milan-feed-tabs .milan-feed-tab.active {
    outline: 2px solid #3b82f6 !important;
    outline-offset: -1px;
  }

  /* ---- composer ----------------------------------------------------------- */
  .card.composer {
    border-radius: 26px !important;
    padding: 16px 14px !important;
  }
  .card.composer::before {
    content: "Create Post";
    display: block;
    font-size: 24px;
    font-weight: 900;
    color: #f4f7ff;
    margin: 0 0 12px;
  }
  .card.composer textarea {
    border-radius: 16px !important;
    min-height: 112px !important;   /* full placeholder stays visible */
    font-size: 15px !important;
  }

  /* ---- AI helper pills ----------------------------------------------------- */
  .milan-ai-btn, .milan-ai-chip {
    border-radius: 999px !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
    margin: 4px 6px 4px 0 !important;
    white-space: nowrap !important;
  }
  .milan-flow-btn {
    border-radius: 999px !important;
    padding: 10px 16px !important;
    font-size: 13.5px !important;
  }

  /* ---- bottom navigation --------------------------------------------------- */
  body.milan-mobile-ui .milanBottomNav,
  html.milan-premium-ui .milanBottomNav {
    background: rgba(8, 14, 32, 0.92) !important;
    border: 1px solid rgba(203, 213, 235, 0.35) !important;
    border-radius: 28px !important;
    padding: 8px !important;
    gap: 6px !important;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.5) !important;
  }
  body.milan-mobile-ui .milanBottomNav button,
  html.milan-premium-ui .milanBottomNav button {
    background: linear-gradient(180deg, #ffffff 0%, #dde4f2 100%) !important;
    color: #17203a !important;
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
    border-radius: 20px !important;
    font-weight: 900 !important;
    font-size: 11px !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 #fff !important;
    min-height: 54px !important;
  }
  body.milan-mobile-ui .milanBottomNav button b,
  html.milan-premium-ui .milanBottomNav button b {
    font-size: 20px !important;
    line-height: 1.05 !important;
  }
  body.milan-mobile-ui .milanBottomNav button.active,
  html.milan-premium-ui .milanBottomNav button.active {
    background: linear-gradient(180deg, #ffffff 0%, #cfd9ee 100%) !important;
    color: #101a33 !important;
    outline: 2px solid #3b82f6 !important;
    outline-offset: -1px;
  }
  .milanBottomNav button .nbDot { background: #ef4444 !important; color: #fff !important; }

  /* ======================================================================
     FIT & VISIBILITY
     ====================================================================== */
  html, body { overflow-x: hidden !important; }
  img, video, iframe, canvas { max-width: 100% !important; }

  /* content always clears the fixed bottom nav */
  body.milan-mobile-ui,
  html.milan-premium-ui body {
    padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* floating buttons: above the nav AND spread out so they never stack
     on one another (this was overlapping before):
       right side — Ask MILAN low, palette above it
       left side  — burger low, launcher above it                       */
  .ma-fab      { right: 14px !important; bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important; }
  .mcm-fab     { right: 14px !important; bottom: calc(172px + env(safe-area-inset-bottom, 0px)) !important; }
  #milan-burger{ left: 14px !important;  bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important; }
  .mlz-fab     { left: 14px !important;  bottom: calc(172px + env(safe-area-inset-bottom, 0px)) !important; }
  #milan-fab   { right: 14px !important; bottom: calc(244px + env(safe-area-inset-bottom, 0px)) !important; }
  #milan-btt   { left: 14px !important;  bottom: calc(244px + env(safe-area-inset-bottom, 0px)) !important; }

  .ma-panel {
    bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100vh - 150px) !important;
  }

  /* People / Alerts / Saved sheet: last items never hide behind the nav */
  #milanMobileSheet .sheetCard {
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .modal { max-height: 86vh !important; overflow: auto !important; }
}