/* ============================================================
   MILAN — UI overhaul to match the approved mockup.
   Authoritative layer. Scoped under html.milan-shell and loaded LAST
   so it wins the cascade over every earlier theme (Krishna, V2, V4,
   premium-sober, premium-ui). Presentation only — no logic touched.
   ============================================================ */

html.milan-shell,
html.milan-shell body {
  --shell-bg:        #0b1220;
  --shell-bg-2:      #0d1526;
  --shell-panel:     #131c2e;
  --shell-panel-2:   #18233a;
  --shell-elev:      #1c2941;
  --shell-line:      rgba(148,163,184,.14);
  --shell-line-2:    rgba(148,163,184,.22);
  --shell-text:      #e8edf6;
  --shell-muted:     #8a99b4;
  --shell-faint:     #5f6f8c;
  --shell-blue:      #3b82f6;
  --shell-blue-2:    #2563eb;
  --shell-green:     #22c55e;
  --shell-radius:    16px;
  --shell-radius-lg: 22px;
}

/* ---- base canvas ---- */
html.milan-shell body {
  background: var(--shell-bg) !important;
  color: var(--shell-text) !important;
  font-family: Inter, "Segoe UI", system-ui, Arial, sans-serif !important;
  letter-spacing: -.005em;
}
html.milan-shell body.dark { background: var(--shell-bg) !important; }
html.milan-shell body::after,
html.milan-shell body::before { display: none !important; content: none !important; }

/* kill leftover decorative animation layers from older themes */
html.milan-shell .heroStar,
html.milan-shell #milan-confetti-canvas,
html.milan-shell .milan-aurora-bar::before { display: none !important; }

/* ---- TOP BAR ---- */
html.milan-shell .topbar {
  background: var(--shell-bg-2) !important;
  border-bottom: 1px solid var(--shell-line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  position: sticky; top: 0; z-index: 60;
}
html.milan-shell .topinner {
  max-width: 1640px !important;
  margin: auto !important;
  display: grid !important;
  grid-template-columns: 300px minmax(360px,1fr) auto !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 14px 26px !important;
}
html.milan-shell .brand { display: flex; align-items: center; gap: 12px; }
html.milan-shell .brand img {
  height: 46px !important; width: 46px !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  animation: none !important;
}
html.milan-shell .brand h1 {
  font-size: 30px !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  background: linear-gradient(120deg,#f59e0b,#ef4444 30%,#ec4899 55%,#3b82f6 85%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important;
  margin: 0 !important;
}
html.milan-shell .brand .tag {
  display: block !important;
  color: var(--shell-muted) !important;
  font-size: 12px !important; font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* search in the centre */
html.milan-shell .search {
  display: grid !important;
  grid-template-columns: 1fr !important;
  position: relative;
}
html.milan-shell .search select { display: none !important; } /* moved into Filters */
html.milan-shell #globalSearch {
  height: 46px !important;
  border-radius: 999px !important;
  background: var(--shell-panel) !important;
  border: 1px solid var(--shell-line) !important;
  color: var(--shell-text) !important;
  padding: 0 18px 0 44px !important;
  font-size: 14px !important;
}
html.milan-shell .search::before {
  content: "🔍";
  position: absolute; left: 16px; top: 50%;
  transform: translateY(-50%);
  font-size: 14px; opacity: .5; pointer-events: none; z-index: 2;
}
html.milan-shell #globalSearch::placeholder { color: var(--shell-faint) !important; }

/* top action cluster */
html.milan-shell .topActions {
  display: flex !important; align-items: center !important;
  justify-content: flex-end !important; gap: 10px !important;
  flex-wrap: nowrap !important;
}
html.milan-shell .topActions button {
  height: 42px !important;
  border-radius: 12px !important;
  background: var(--shell-panel) !important;
  border: 1px solid var(--shell-line) !important;
  color: var(--shell-text) !important;
  font-weight: 700 !important; font-size: 13px !important;
  box-shadow: none !important;
  padding: 0 16px !important;
  display: inline-flex; align-items: center; gap: 8px;
}
html.milan-shell .topActions button:hover {
  background: var(--shell-panel-2) !important;
  border-color: var(--shell-line-2) !important;
  transform: none !important; filter: none !important;
}
html.milan-shell .topActions .danger { background: var(--shell-panel) !important; color: #f87171 !important; }

/* the stacked status pills (Cloud DWN / AI / DWN) live in .navlinks slot */
html.milan-shell .navlinks {
  display: flex !important; flex-direction: column !important;
  align-items: flex-start !important; gap: 3px !important;
  margin-left: 4px;
}
html.milan-shell .navlinks a {
  display: none !important; /* old text links hidden; status injected by JS */
}
html.milan-shell #milan-shell-status {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
html.milan-shell #milan-shell-status .st { display: flex; align-items: center; gap: 7px; color: var(--shell-muted); }
html.milan-shell #milan-shell-status .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--shell-green);
  box-shadow: 0 0 8px rgba(34,197,94,.5);
}
html.milan-shell #milan-shell-status .ok { color: var(--shell-green); }

/* avatar + dropdown trigger */
html.milan-shell #milan-shell-userbtn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 42px; padding: 0 8px 0 4px;
  border-radius: 12px; background: var(--shell-panel);
  border: 1px solid var(--shell-line); cursor: pointer; color: var(--shell-text);
}
html.milan-shell #milan-shell-userbtn .av {
  width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center; font-weight: 900; font-size: 13px; color: #fff;
  background: linear-gradient(135deg,#3b82f6,#7c3aed);
}
html.milan-shell #milan-shell-menu {
  position: absolute; top: 70px; right: 26px; z-index: 200;
  min-width: 220px; padding: 8px;
  background: var(--shell-panel) !important;
  border: 1px solid var(--shell-line-2);
  border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.5);
  display: none; flex-direction: column; gap: 2px;
}
html.milan-shell #milan-shell-menu.open { display: flex; }
html.milan-shell #milan-shell-menu button {
  width: 100%; text-align: left; background: transparent !important;
  border: 0 !important; color: var(--shell-text) !important;
  padding: 11px 12px !important; border-radius: 10px !important;
  font-weight: 600 !important; display: flex; align-items: center; gap: 10px;
  box-shadow: none !important; height: auto !important;
}
html.milan-shell #milan-shell-menu button:hover { background: var(--shell-panel-2) !important; }
html.milan-shell #milan-shell-menu .sep { height: 1px; background: var(--shell-line); margin: 4px 6px; }

/* ---- 3-COLUMN LAYOUT ---- */
html.milan-shell .layout {
  max-width: 1640px !important;
  grid-template-columns: 300px minmax(440px,1fr) 360px !important;
  gap: 22px !important;
  padding: 22px 26px !important;
}
html.milan-shell .card,
html.milan-shell .composer,
html.milan-shell .post,
html.milan-shell .rightBox,
html.milan-shell .profileCard,
html.milan-shell .quickCard {
  background: var(--shell-panel) !important;
  border: 1px solid var(--shell-line) !important;
  border-radius: var(--shell-radius-lg) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* ---- LEFT SIDEBAR ---- */
html.milan-shell .leftRail .profileCard { text-align: center; padding: 24px 18px !important; }
html.milan-shell .profileRow { flex-direction: column !important; align-items: center !important; gap: 10px !important; }
html.milan-shell .avatar.lg {
  width: 96px !important; height: 96px !important; border-radius: 999px !important;
  font-size: 34px !important;
  background: var(--shell-elev) !important;
  border: 3px solid var(--shell-blue) !important;
  box-shadow: 0 0 0 4px rgba(59,130,246,.12) !important;
  color: var(--shell-text) !important;
  position: relative;
}
html.milan-shell .profileCard b, html.milan-shell #myName { font-size: 19px !important; font-weight: 800 !important; }
html.milan-shell #myEmail { color: var(--shell-muted) !important; font-size: 13px !important; }
html.milan-shell .did { display: none !important; } /* DID hidden in this clean look */
html.milan-shell .profileCard .mini a,
html.milan-shell #milan-shell-viewprofile {
  color: var(--shell-blue) !important; font-weight: 700; font-size: 13px; text-decoration: none;
}

/* nav menu list */
html.milan-shell .menu {
  padding: 10px !important; margin-top: 14px;
  display: flex !important; flex-direction: column !important; gap: 4px !important;
  grid-template-columns: none !important;
}
html.milan-shell .menu button {
  width: 100% !important; justify-content: flex-start !important; text-align: left !important;
  background: transparent !important; color: var(--shell-muted) !important;
  border-radius: 12px !important; padding: 13px 16px !important;
  font-weight: 700 !important; font-size: 15px !important;
  margin: 0 !important; box-shadow: none !important; min-height: 0 !important;
  display: flex; align-items: center; gap: 14px;
}
html.milan-shell .menu button:hover { background: var(--shell-panel-2) !important; color: var(--shell-text) !important; }
html.milan-shell .menu button.active {
  background: var(--shell-panel-2) !important; color: var(--shell-text) !important;
  border-left: 3px solid var(--shell-blue) !important;
}

/* System Status card (built from .stats) */
html.milan-shell #milan-shell-sysstatus {
  margin-top: 14px; padding: 18px;
  background: var(--shell-panel) !important; border: 1px solid var(--shell-line);
  border-radius: var(--shell-radius-lg);
}
html.milan-shell #milan-shell-sysstatus h4 {
  margin: 0 0 12px; font-size: 16px; font-weight: 800; color: var(--shell-text);
}
html.milan-shell #milan-shell-sysstatus .row {
  display: flex; justify-content: space-between; padding: 7px 0; font-size: 14px;
}
html.milan-shell #milan-shell-sysstatus .row span { color: var(--shell-muted); }
html.milan-shell #milan-shell-sysstatus .row b { color: var(--shell-text); font-weight: 800; }
html.milan-shell .stats { display: none !important; } /* original 2x2 stat grid hidden, replaced */

/* ---- COMPOSER (Create Post) ---- */
html.milan-shell .composer { padding: 22px !important; }
html.milan-shell .composerHead { display: block !important; }
html.milan-shell #composerAvatar { display: none !important; }
html.milan-shell .composer::before {
  content: "Create Post"; display: block;
  font-size: 22px; font-weight: 800; margin-bottom: 16px; color: var(--shell-text);
}
html.milan-shell #postTitle, html.milan-shell #postText {
  background: var(--shell-bg-2) !important;
  border: 1px solid var(--shell-line) !important;
  border-radius: 14px !important; color: var(--shell-text) !important;
}
html.milan-shell #postTitle { height: 52px !important; font-size: 16px !important; margin-bottom: 12px; }
html.milan-shell #postText { min-height: 150px !important; font-size: 15px !important; }
html.milan-shell #postTitle::placeholder, html.milan-shell #postText::placeholder { color: var(--shell-faint) !important; }

html.milan-shell #publishBtn {
  width: 100% !important; height: 52px !important; margin-top: 6px !important;
  border-radius: 14px !important;
  background: var(--shell-panel-2) !important; color: var(--shell-muted) !important;
  border: 1px solid var(--shell-line) !important; font-size: 16px !important; font-weight: 800 !important;
  box-shadow: none !important;
}
html.milan-shell #publishBtn:hover { background: var(--shell-elev) !important; color: var(--shell-text) !important; }

/* Photo/Video button (the modern-upload dropzone trigger / file row) */
html.milan-shell .milan-mu-trigger, html.milan-shell label[for="mediaFile"] {
  background: var(--shell-blue) !important; color: #fff !important;
  border-radius: 12px !important; font-weight: 800 !important;
}
html.milan-shell #privacy {
  background: var(--shell-bg-2) !important; border: 1px solid var(--shell-line) !important;
  color: var(--shell-text) !important; border-radius: 12px !important; height: 46px !important;
}

/* ---- AI ASSISTANT inline panel ---- */
html.milan-shell #milan-ai-assist, html.milan-shell .milan-ai-panel {
  background: var(--shell-bg-2) !important;
  border: 1px solid var(--shell-line) !important;
  border-radius: 16px !important;
}
html.milan-shell .milan-ai-chip,
html.milan-shell .milan-ai-btn {
  background: var(--shell-panel-2) !important;
  border: 1px solid var(--shell-line) !important;
  color: var(--shell-text) !important; border-radius: 12px !important;
}

/* ---- RIGHT RAIL ---- */
html.milan-shell .rightBox { padding: 20px !important; }
html.milan-shell .sectionTitle { font-size: 18px !important; font-weight: 800 !important; margin-bottom: 14px !important; }
html.milan-shell #peopleSearch {
  background: var(--shell-bg-2) !important; border: 1px solid var(--shell-line) !important;
  border-radius: 999px !important; height: 44px !important; color: var(--shell-text) !important;
}
html.milan-shell .person {
  background: transparent !important; border: 0 !important;
  border-bottom: 1px solid var(--shell-line) !important; border-radius: 0 !important;
  padding: 12px 2px !important;
}
html.milan-shell .person:last-child { border-bottom: 0 !important; }
html.milan-shell .personDid { display: none !important; }
html.milan-shell .avatar {
  border-radius: 999px !important;
  background: linear-gradient(135deg,#3b82f6,#7c3aed) !important;
}
html.milan-shell .notifList .bubble, html.milan-shell .bubble {
  background: transparent !important; border: 0 !important;
  border-bottom: 1px solid var(--shell-line) !important; border-radius: 0 !important;
  padding: 12px 2px !important;
}
html.milan-shell #markReadBtn {
  width: 100% !important; margin-top: 10px !important;
  background: var(--shell-panel-2) !important; border: 1px solid var(--shell-line) !important;
  color: var(--shell-text) !important; border-radius: 12px !important; font-weight: 800 !important;
}

/* ---- FEED POSTS ---- */
html.milan-shell .post { overflow: hidden !important; }
html.milan-shell .postHead { padding: 18px 18px 8px !important; }
html.milan-shell .postTitle { font-size: 17px !important; font-weight: 800 !important; }
html.milan-shell .reactionBar {
  display: flex !important; gap: 4px !important; padding: 6px 12px 12px !important;
  border-top: 1px solid var(--shell-line) !important;
}
html.milan-shell .reactionBar button {
  flex: 1; background: transparent !important; color: var(--shell-muted) !important;
  border-radius: 12px !important; font-weight: 700 !important;
}
html.milan-shell .reactionBar button:hover,
html.milan-shell .reactionBar button.active {
  background: var(--shell-panel-2) !important; color: var(--shell-text) !important;
}
html.milan-shell .media { border-radius: 14px !important; margin: 0 16px 12px !important; background:#05070d !important; }
html.milan-shell .badge {
  background: var(--shell-panel-2) !important; border: 1px solid var(--shell-line) !important;
  color: var(--shell-muted) !important;
}

/* health pill in topbar */
html.milan-shell .health { display: none !important; } /* replaced by status stack */

/* scrollbar */
html.milan-shell ::-webkit-scrollbar { width: 8px; height: 8px; }
html.milan-shell ::-webkit-scrollbar-thumb { background: var(--shell-line-2); border-radius: 99px; }
html.milan-shell ::-webkit-scrollbar-track { background: transparent; }

/* ---- responsive ---- */
@media (max-width: 1200px) {
  html.milan-shell .topinner { grid-template-columns: 1fr auto !important; }
  html.milan-shell .search { grid-column: 1 / -1 !important; order: 3; }
  html.milan-shell .layout { grid-template-columns: 260px 1fr !important; }
  html.milan-shell .rightRail { display: none !important; }
}
@media (max-width: 760px) {
  html.milan-shell .topinner { grid-template-columns: 1fr !important; gap: 12px !important; padding: 12px !important; }
  html.milan-shell .layout { display: block !important; padding: 12px !important; }
  html.milan-shell .leftRail { margin-bottom: 14px; }
  html.milan-shell .menu { flex-direction: row !important; flex-wrap: wrap !important; }
  html.milan-shell .menu button { flex: 1 1 40%; justify-content: center !important; }
  html.milan-shell #milan-shell-status { flex-direction: row !important; flex-wrap: wrap; gap: 10px; }
}