/* Loaded after legacy homepage styles so this is the final visual layer. */
@media (min-width: 921px) {
  :root[data-theme="light"] .product-main {
    position: relative;
    background: #FFFFFF;
  }

  :root[data-theme="light"] .product-main::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(ellipse 50% 36% at 50% 42%, rgba(194, 225, 255, 0.88) 0%, rgba(214, 235, 255, 0.66) 48%, rgba(248, 252, 255, 0) 78%);
    content: "";
    opacity: 1;
    pointer-events: none;
    transition: opacity 500ms cubic-bezier(.2, 0, 0, 1);
  }

  :root[data-theme="light"] .product-shell.has-ai-messages .product-main::before {
    opacity: 0;
  }

  :root[data-theme="light"] .site-header,
  :root[data-theme="light"] .workspace-shell {
    position: relative;
    z-index: 1;
  }

  :root[data-theme="light"] .workspace-sidebar {
    background: #FFFFFF;
  }

  :root[data-theme="light"] .site-header {
    min-height: 60px;
    border-bottom-color: transparent;
    background: rgba(255, 255, 255, 0.96);
  }

  :root[data-theme="light"] .nav-links a { padding: 20px 0 19px; }

  :root[data-theme="light"] .workspace-shell,
  :root[data-theme="light"] .workspace-track,
  :root[data-theme="light"] .workspace-view {
    height: calc(100vh - 60px);
    min-height: 0;
  }

  :root[data-theme="light"] .music-view iframe,
  :root[data-theme="light"] .release-view { height: calc(100vh - 60px); }

  :root[data-theme="light"] .header-actions .primary-button.small {
    width: 52px;
    min-width: 52px;
    min-height: 32px;
    padding: 0 12px;
  }

  /* Give the composer a little more breathing room below the hero glow. */
  :root[data-theme="light"] .ai-chat-shell {
    height: min(630px, calc(100vh - 150px));
  }
}