/* Authenticated Wrooms reference-dashboard shell.
 * Desktop converts the existing accessible rail into the horizontal top bar
 * shown in the approved Wrooms dashboard reference. App state/routing stays intact.
 */

.app-shell.rock-shell {
  --board-door: #07070a;
  --board-violet: #7c3aed;
  --board-blue: #2563eb;
  --board-mint: #5eead4;
  --board-cyan: #22e6ff;
  --color-bg: #020911;
  --color-surface: #04111c;
  --color-elevated: #082033;
  --color-border: #0b4f68;
  --color-fg: #f4fbff;
  --color-muted: #a8c2cf;
  --color-subtle: #6f9cad;
  --color-accent: var(--board-cyan);
  --color-signal: var(--board-mint);
  --color-ai: #67e8f9;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(70rem 35rem at 70% -20%, rgba(0,229,255,.14), transparent 62%),
    linear-gradient(180deg,#02070d,#03101a 45%,#02070d) !important;
}

.app-shell.rock-shell::before {
  z-index: 0 !important;
  opacity: .34 !important;
  background:
    linear-gradient(rgba(34,230,255,.022) 1px,transparent 1px) 0 0 / 100% 42px,
    linear-gradient(90deg,rgba(34,230,255,.016) 1px,transparent 1px) 0 0 / 64px 100% !important;
  mix-blend-mode: normal !important;
}

.app-shell.rock-shell::after {
  z-index: 0 !important;
  box-shadow: inset 0 0 140px rgba(0,0,0,.42) !important;
}

.app-shell.rock-shell .app-main-col,
.app-shell.rock-shell .stage-body,
.app-shell.rock-shell .page-swap { background: transparent !important; }

.app-shell.rock-shell .rock-stage {
  position: relative;
  z-index: 2;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background:
    radial-gradient(45rem 30rem at 50% 0%,rgba(0,229,255,.055),transparent 68%),
    #03101a !important;
  box-shadow: none !important;
}

.app-shell.rock-shell .rock-stage::before,
.app-shell.rock-shell .rock-stage::after { display:none !important; }

.app-shell.rock-shell .wrooms-floor {
  border-color: rgba(34,230,255,.18) !important;
  background: rgba(2,9,17,.96) !important;
  box-shadow: 0 -12px 34px rgba(0,0,0,.28) !important;
}

.app-shell.rock-shell input,
.app-shell.rock-shell textarea { caret-color: var(--board-cyan) !important; }
.app-shell.rock-shell .section-label { color: var(--board-cyan) !important; }

@media (min-width: 1024px) {
  .app-shell.rock-shell { flex-direction: column !important; }

  .app-shell.rock-shell .rock-rail {
    position: relative !important;
    z-index: 70 !important;
    display: flex !important;
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    flex: 0 0 58px !important;
    flex-direction: row !important;
    align-items: center !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(34,230,255,.26) !important;
    background: rgba(2,10,18,.96) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.35), inset 0 -1px rgba(34,230,255,.08) !important;
    backdrop-filter: blur(18px) saturate(125%);
  }

  .app-shell.rock-shell .rock-rail::before,
  .app-shell.rock-shell .rock-rail::after { display:none !important; }

  .app-shell.rock-shell .rock-rail > nav {
    display: flex !important;
    min-width: 0;
    flex: 1 1 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .22rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: .38rem 23rem .38rem .7rem !important;
    scrollbar-width: none;
  }
  .app-shell.rock-shell .rock-rail > nav::-webkit-scrollbar { display:none; }

  .app-shell.rock-shell .rock-rail .nav-tab {
    width: auto !important;
    height: 42px !important;
    min-width: max-content !important;
    min-height: 42px !important;
    display: inline-flex !important;
    grid-template-columns: none !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .48rem !important;
    padding: 0 .72rem !important;
    border: 1px solid transparent !important;
    border-radius: .7rem !important;
    color: #d8e8ef !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .app-shell.rock-shell .rock-rail .brand-nav-tab {
    padding-inline: .55rem .85rem !important;
    color: #fff !important;
  }

  .app-shell.rock-shell .rock-rail .nav-tab::after {
    content: attr(aria-label);
    display: block !important;
    color: currentColor;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
  }

  .app-shell.rock-shell .rock-rail .brand-nav-tab::after {
    content: "WROOMS";
    letter-spacing: .16em;
    font-size: .78rem;
  }

  .app-shell.rock-shell .rock-rail .nav-tab:hover {
    transform: none !important;
    border-color: rgba(34,230,255,.28) !important;
    color: #fff !important;
    background: rgba(7,38,53,.66) !important;
  }

  .app-shell.rock-shell .rock-rail .nav-tab[aria-current="page"] {
    color: #7df6ff !important;
    border-color: rgba(34,230,255,.78) !important;
    background: linear-gradient(180deg,rgba(0,229,255,.18),rgba(0,171,211,.12)) !important;
    box-shadow: inset 0 0 0 1px rgba(125,246,255,.12), 0 0 18px rgba(0,229,255,.2) !important;
  }

  .app-shell.rock-shell .rock-rail .nav-tab svg { width: 1.2rem !important; height: 1.2rem !important; }

  .app-shell.rock-shell .rock-rail > div:last-child {
    position: absolute !important;
    top: 0 !important;
    right: .45rem !important;
    z-index: 3 !important;
    width: auto !important;
    height: 58px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: .2rem !important;
    padding: .38rem !important;
    border: 0 !important;
    background: linear-gradient(90deg,transparent,rgba(2,10,18,.96) 15%) !important;
  }
  .app-shell.rock-shell .rock-rail > div:last-child .nav-tab {
    width: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
  }
  .app-shell.rock-shell .rock-rail > div:last-child .nav-tab::after { display:none !important; }

  .app-shell.rock-shell .app-main-col {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .app-shell.rock-shell .chrome-top {
    position: absolute !important;
    top: 0 !important;
    right: 8.2rem !important;
    z-index: 76 !important;
    width: min(22rem,28vw) !important;
    height: 58px !important;
    pointer-events: none;
  }

  .app-shell.rock-shell .rock-topbar {
    min-height: 58px !important;
    height: 58px !important;
    padding: .38rem .45rem !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    pointer-events: auto;
  }
  .app-shell.rock-shell .rock-topbar::after { display:none !important; }
  .app-shell.rock-shell .rock-topbar > :not(:first-child) { pointer-events:auto; }
}

@media (max-width: 1023px) {
  .app-shell.rock-shell .rock-stage { margin:0 !important; border-radius:0 !important; }
  .app-shell.rock-shell .rock-topbar {
    border-bottom: 1px solid rgba(34,230,255,.18) !important;
    background: rgba(2,10,18,.95) !important;
  }
  .app-shell.rock-shell .wrooms-dock {
    border-color: rgba(34,230,255,.18) !important;
    background: rgba(2,9,17,.96) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell.rock-shell *,
  .app-shell.rock-shell *::before,
  .app-shell.rock-shell *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}