/* ==========================================================================
 * OST Mesh — desktop social layout.
 * mesh-mobile.js builds a real social app (Feed / Chats / Pay / Play /
 * Profile views + a tab bar) but its view CSS only applied under 760px, so
 * desktop got the raw pavilion: keys, fingerprints and a connect box first.
 * Same views on desktop, with the tab bar as a left rail.
 * ========================================================================== */
@media (min-width: 761px) {
  /* one view at a time, exactly like the phone */
  #ost-mesh-pavilion .ost-mesh-shell[data-view] [data-mesh-view] { display: none !important; }
  #ost-mesh-pavilion .ost-mesh-shell[data-view="feed"] [data-mesh-view~="feed"],
  #ost-mesh-pavilion .ost-mesh-shell[data-view="chats"] [data-mesh-view~="chats"],
  #ost-mesh-pavilion .ost-mesh-shell[data-view="pay"] [data-mesh-view~="pay"],
  #ost-mesh-pavilion .ost-mesh-shell[data-view="play"] [data-mesh-view~="play"],
  #ost-mesh-pavilion .ost-mesh-shell[data-view="profile"] [data-mesh-view~="profile"] { display: block !important; }

  /* shell leaves room for the rail */
  #ost-mesh-pavilion.is-open .ost-mesh-shell[data-view] { max-width: 880px; margin-left: auto; margin-right: auto; }
  #ost-mesh-pavilion.is-open .ost-mesh-shell[data-view] > .ost-mesh-head { order: -1; }

  /* tab bar → left rail */
  #ost-mesh-pavilion.is-open .omm-tabbar {
    display: flex !important; flex-direction: column; gap: 6px;
    position: fixed; z-index: 30; top: 50%; transform: translateY(-50%);
    left: max(16px, calc(50% - 440px - 128px));
    width: 104px; padding: 10px 8px; border-radius: 22px;
    background: rgba(6, 10, 20, .92); border: 1px solid rgba(94, 234, 212, .22);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  }
  #ost-mesh-pavilion.is-open .omm-tab {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: none; border: 0; border-radius: 14px; padding: 10px 4px;
    color: #7fa8c4; font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer;
    transition: background .15s, color .15s;
  }
  #ost-mesh-pavilion.is-open .omm-tab .i { font-size: 22px; line-height: 1; }
  #ost-mesh-pavilion.is-open .omm-tab:hover { background: rgba(94, 234, 212, .08); color: #d9fff4; }
  #ost-mesh-pavilion.is-open .omm-tab.on { background: linear-gradient(135deg, rgba(0, 255, 176, .18), rgba(0, 212, 255, .14)); color: #00ffb0; }

  /* not enough room beside the shell: pad it so the rail never covers content */
  @media (max-width: 1160px) { #ost-mesh-pavilion.is-open .ost-mesh-shell[data-view] { padding-left: 132px; } }

  /* Profile reads like a profile: raw identity pills are developer detail */
  #ost-mesh-pavilion.is-open .ost-mesh-id > div:not(.ost-mesh-id-actions) { display: none; }
  #ost-mesh-pavilion.is-open .ost-mesh-id { background: none; border: 0; padding: 0; }
}