/* ============================================================================
   GalleryOS — App shell layout (sidebar rail, top bar chrome)
   ============================================================================ */

.dark body.gos-app,
body.gos-app {
  background: var(--gos-bg);
  color: var(--gos-text-primary);
}

.gos-app main,
.gos-app #content-area {
  background: var(--gos-bg);
}

/* All list/detail/form scroll surfaces use design-token page bg */
.gos-app #content-area .list-view,
.gos-app #content-area .detail-display,
.gos-app #content-area .form-view {
  background: var(--gos-bg) !important;
}

/* —— Chrome bar tokens (mobile topbar + desktop header) —— */
body.gos-app {
  --gos-chrome-bar-accent: none;
  --gos-chrome-bar-bg: linear-gradient(
    180deg,
    color-mix(in srgb, var(--gos-bg) 86%, var(--gos-dashboard-surface) 14%) 0%,
    color-mix(in srgb, var(--gos-bg) 92%, var(--gos-dashboard-surface) 8%) 100%
  );
  --gos-chrome-bar-fade: linear-gradient(
    180deg,
    color-mix(in srgb, var(--gos-bg) 35%, transparent) 0%,
    transparent 100%
  );
}

html:not(.dark) body.gos-app {
  --gos-chrome-bar-bg: linear-gradient(
    180deg,
    color-mix(in srgb, #ffffff 88%, var(--gos-bg) 12%) 0%,
    color-mix(in srgb, var(--gos-bg) 94%, #ffffff 6%) 100%
  );
  background:
    radial-gradient(ellipse 90% 55% at 12% -8%, color-mix(in srgb, var(--gos-accent) 7%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse 70% 45% at 92% 8%, color-mix(in srgb, var(--gos-accent) 4%, transparent) 0%, transparent 50%),
    var(--gos-bg);
}

main.gos-immersive-chrome {
  background: var(--gos-bg);
}

/* Per-view accent overlays — mirror detail canvas radial gradients */
main[data-gos-view="artist-detail"] {
  --gos-chrome-bar-accent:
    radial-gradient(circle at 8% -10%, color-mix(in srgb, var(--gos-accent) 16%, transparent) 0%, transparent 42%),
    radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--gos-accent) 8%, transparent) 0%, transparent 36%);
}

main[data-gos-view="exhibition-detail"],
main[data-gos-view="fair-detail"],
main[data-gos-view="install-detail"],
main[data-gos-view="news-detail"],
main[data-gos-view="shop-detail"],
main[data-gos-view="newsletter-detail"],
main[data-gos-view="contact-submission-detail"],
main[data-gos-view="resident-detail"] {
  --gos-chrome-bar-accent:
    radial-gradient(circle at 10% -8%, color-mix(in srgb, var(--gos-accent) 14%, transparent) 0%, transparent 40%);
}

.gos-chrome-bar {
  position: relative;
  isolation: isolate;
  background: var(--gos-chrome-bar-accent), var(--gos-chrome-bar-bg) !important;
  border-bottom: none !important;
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

.gos-chrome-bar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28px;
  pointer-events: none;
  background: var(--gos-chrome-bar-fade);
  transform: translateY(100%);
  z-index: 0;
}

#gos-app-header.gos-chrome-bar {
  min-height: 3rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

main.gos-immersive-chrome > #gos-mobile-topbar .gos-mobile-topbar__btn {
  color: var(--gos-text-secondary);
}

main.gos-immersive-chrome > #gos-mobile-topbar .gos-mobile-topbar__btn:hover,
main.gos-immersive-chrome > #gos-mobile-topbar .gos-mobile-topbar__btn:focus-visible {
  color: var(--gos-text-primary);
  background: var(--gos-surface-elevated);
}

main.gos-immersive-chrome > #gos-mobile-topbar .gos-mobile-topbar__title,
main.gos-immersive-chrome > #gos-mobile-topbar .gos-mobile-topbar__wordmark {
  color: var(--gos-text-primary);
}

/* Desktop app header — mobile/tablet use #gos-mobile-topbar only */
#gos-app-header {
  display: none;
}

@media (min-width: 1024px) {
  #gos-app-header:not(.hidden) {
    display: flex;
  }
}

main.gos-immersive-chrome[data-gos-view="dashboard"] > #gos-app-header,
main.gos-immersive-chrome[data-gos-view="profile"] > #gos-app-header,
main.gos-immersive-chrome[data-gos-view^="settings-"] > #gos-app-header {
  display: none !important;
}

/* —— Mobile topbar layout & polish —— */
#gos-mobile-topbar.gos-mobile-topbar {
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid color-mix(in srgb, var(--gos-border) 70%, transparent);
  transition: background-color var(--gos-duration-fast, 180ms) var(--gos-ease-out, ease),
    border-color var(--gos-duration-fast, 180ms) var(--gos-ease-out, ease);
}

#gos-mobile-topbar .gos-mobile-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 3.5rem;
  padding: 0.25rem 0.625rem 0.25rem 0.375rem;
  position: relative;
  z-index: 1;
}

#gos-mobile-topbar .gos-mobile-topbar__leading {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  min-width: 0;
  flex: 1 1 auto;
}

#gos-mobile-topbar .gos-mobile-topbar__trailing {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  flex-shrink: 0;
}

#gos-mobile-topbar .gos-mobile-topbar__identity {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
  height: 2.5rem;
}

#gos-mobile-topbar .gos-mobile-topbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--gos-radius-md, 12px);
  background: transparent;
  color: var(--gos-text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    color var(--gos-duration-fast, 180ms) var(--gos-ease-out, ease),
    background-color var(--gos-duration-fast, 180ms) var(--gos-ease-out, ease),
    transform var(--gos-duration-fast, 180ms) var(--gos-ease-spring, ease);
}

#gos-mobile-topbar .gos-mobile-topbar__btn:hover {
  color: var(--gos-text-primary);
  background: var(--gos-hover-fill);
}

#gos-mobile-topbar .gos-mobile-topbar__btn:active {
  transform: scale(0.94);
  background: var(--gos-hover-fill-strong);
}

#gos-mobile-topbar .gos-mobile-topbar__search:hover,
#gos-mobile-topbar .gos-mobile-topbar__search:focus-visible {
  color: var(--gos-accent);
  background: var(--gos-accent-soft);
}

#gos-mobile-topbar .gos-mobile-topbar__search:active {
  color: var(--gos-accent);
}

#gos-mobile-topbar .gos-mobile-topbar__mount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
}

#gos-mobile-topbar .gos-mobile-topbar__mount .gos-notifications-bell {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--gos-radius-md, 12px);
  transition:
    color var(--gos-duration-fast, 180ms) var(--gos-ease-out, ease),
    background-color var(--gos-duration-fast, 180ms) var(--gos-ease-out, ease),
    transform var(--gos-duration-fast, 180ms) var(--gos-ease-spring, ease);
}

#gos-mobile-topbar .gos-mobile-topbar__mount .gos-notifications-bell:active {
  transform: scale(0.94);
}

#gos-mobile-topbar .gos-mobile-topbar__mount--avatar .gos-avatar-menu__trigger {
  width: 2.125rem;
  height: 2.125rem;
  transition:
    border-color var(--gos-duration-fast, 180ms) var(--gos-ease-out, ease),
    box-shadow var(--gos-duration-fast, 180ms) var(--gos-ease-out, ease),
    transform var(--gos-duration-fast, 180ms) var(--gos-ease-spring, ease);
}

#gos-mobile-topbar .gos-mobile-topbar__mount--avatar .gos-avatar-menu__trigger:active {
  transform: scale(0.94);
}

#gos-mobile-topbar .gos-mobile-topbar__mount--avatar .gos-avatar-menu__initials {
  font-size: 12px;
  letter-spacing: -0.02em;
}

/* Brand ↔ title crossfade (absolute stack, no layout jump) */
#gos-mobile-topbar .gos-mobile-topbar__brand,
#gos-mobile-topbar .gos-mobile-topbar__title {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  max-width: 100%;
  transition:
    opacity var(--gos-duration-medium, 360ms) var(--gos-ease-out, ease),
    visibility var(--gos-duration-medium, 360ms) var(--gos-ease-out, ease);
}

#gos-mobile-topbar .gos-mobile-topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#gos-mobile-topbar .gos-mobile-topbar__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 7px;
  background: var(--gos-text-primary);
  color: var(--gos-bg);
  flex-shrink: 0;
}

html.dark #gos-mobile-topbar .gos-mobile-topbar__mark,
.dark #gos-mobile-topbar .gos-mobile-topbar__mark {
  background: #fff;
  color: #000;
}

#gos-mobile-topbar .gos-mobile-topbar__wordmark {
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--gos-text-primary);
  white-space: nowrap;
}

#gos-mobile-topbar .gos-mobile-topbar__wordmark span {
  color: var(--gos-text-secondary);
  font-weight: 600;
}

#gos-mobile-topbar .gos-mobile-topbar__title,
#gos-mobile-page-title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--gos-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: inherit;
  cursor: default;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  padding-right: 0.25rem;
}

body.gos-mobile-title-active #gos-mobile-topbar .gos-mobile-topbar__brand {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.gos-mobile-title-active #gos-mobile-topbar .gos-mobile-topbar__title,
body.gos-mobile-title-active #gos-mobile-page-title {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

@media (min-width: 1024px) {
  #gos-mobile-topbar.gos-mobile-topbar {
    display: none;
  }
}

/* Desktop sidebar must never occupy layout below lg — even if JS strips `hidden` */
@media (max-width: 1023px) {
  .gos-sidebar--desktop {
    display: none !important;
  }
}

/* Mobile drawer is only for viewports below lg */
@media (min-width: 1024px) {
  #mobile-sidebar,
  #mobile-menu-overlay {
    display: none !important;
  }

  .gos-sidebar--desktop {
    display: flex;
    flex-direction: column;
    width: 17rem;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    transition: width var(--gos-duration-medium, 360ms) var(--gos-ease-spring, cubic-bezier(0.22, 1, 0.36, 1));
  }

  .gos-sidebar--desktop.gos-sidebar--rail {
    --gos-nav-width-rail: 4.25rem;
    --gos-nav-rail-icon-size: 2.5rem;
    width: var(--gos-nav-width-rail);
    background:
      radial-gradient(ellipse 120% 40% at 50% -8%, color-mix(in srgb, var(--gos-accent) 10%, transparent) 0%, transparent 55%),
      linear-gradient(180deg, color-mix(in srgb, var(--gos-surface) 70%, transparent) 0%, transparent 22%),
      var(--gos-bg);
    box-shadow:
      inset -1px 0 0 color-mix(in srgb, var(--gos-border) 80%, transparent),
      4px 0 24px color-mix(in srgb, var(--gos-text-primary) 3%, transparent);
  }

  .dark .gos-sidebar--desktop.gos-sidebar--rail {
    background:
      radial-gradient(ellipse 120% 40% at 50% -8%, color-mix(in srgb, var(--gos-accent) 14%, transparent) 0%, transparent 55%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 24%),
      var(--gos-bg);
    box-shadow:
      inset -1px 0 0 rgba(255, 255, 255, 0.06),
      6px 0 28px rgba(0, 0, 0, 0.28);
  }

  .gos-sidebar--rail .gos-sidebar__brand-text,
  .gos-sidebar--rail .gos-ws-meta,
  .gos-sidebar--rail .gos-ws-caret {
    display: none !important;
  }

  .gos-sidebar--rail .gos-sidebar__head {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem 0.625rem;
    min-height: 0;
    border-bottom-color: transparent;
  }

  .gos-sidebar--rail .gos-sidebar__brand {
    justify-content: center;
  }

  .gos-sidebar--rail .gos-sidebar__brand-mark {
    width: 2rem;
    height: 2rem;
    border-radius: 9px;
    box-shadow:
      0 1px 0 color-mix(in srgb, #fff 45%, transparent) inset,
      0 4px 12px color-mix(in srgb, var(--gos-text-primary) 10%, transparent);
    transition: transform var(--gos-duration-fast, 180ms) var(--gos-ease-spring, cubic-bezier(0.22, 1, 0.36, 1)),
                box-shadow var(--gos-duration-fast, 180ms) ease;
  }

  .gos-sidebar--rail .gos-sidebar__brand:hover .gos-sidebar__brand-mark {
    transform: scale(1.06);
  }

  .dark .gos-sidebar--rail .gos-sidebar__brand-mark {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.14) inset,
      0 6px 16px rgba(0, 0, 0, 0.35);
  }

  .gos-sidebar--rail .gos-sidebar__toolbar {
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
  }

  .gos-sidebar--rail .gos-ws-switcher-mount {
    padding: 0.125rem 0.5rem 0.625rem;
    display: flex;
    justify-content: center;
    border-bottom: 0;
    position: relative;
  }

  .gos-sidebar--rail .gos-ws-switcher-mount::after {
    content: '';
    position: absolute;
    left: 28%;
    right: 28%;
    bottom: 0;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, var(--gos-border) 90%, transparent) 50%,
      transparent
    );
  }

  .gos-sidebar--rail .gos-ws-switcher {
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .gos-sidebar--rail .gos-ws-btn {
    justify-content: center;
    align-items: center;
    width: var(--gos-nav-rail-icon-size, 2.5rem);
    min-width: var(--gos-nav-rail-icon-size, 2.5rem);
    min-height: var(--gos-nav-rail-icon-size, 2.5rem);
    height: var(--gos-nav-rail-icon-size, 2.5rem);
    padding: 0;
    margin: 0 auto;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--gos-border) 70%, transparent);
    background: color-mix(in srgb, var(--gos-surface) 88%, transparent);
    box-shadow:
      0 1px 0 color-mix(in srgb, #fff 40%, transparent) inset,
      0 1px 3px color-mix(in srgb, var(--gos-text-primary) 4%, transparent);
    transform: none;
    transition: background var(--gos-duration-fast, 180ms) ease,
                border-color var(--gos-duration-fast, 180ms) ease,
                box-shadow var(--gos-duration-fast, 180ms) ease,
                transform var(--gos-duration-fast, 180ms) var(--gos-ease-spring, cubic-bezier(0.22, 1, 0.36, 1));
  }

  .gos-sidebar--rail .gos-ws-btn:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--gos-accent) 22%, var(--gos-border));
    box-shadow:
      0 1px 0 color-mix(in srgb, #fff 45%, transparent) inset,
      0 4px 12px color-mix(in srgb, var(--gos-text-primary) 6%, transparent);
  }

  .gos-sidebar--rail .gos-ws-btn::before {
    display: none;
  }

  .gos-sidebar--rail .gos-ws-avatar {
    margin: 0;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 8px;
  }

  .gos-sidebar--rail .gos-ws-btn[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--gos-accent) 28%, var(--gos-border));
    background: color-mix(in srgb, var(--gos-accent) 8%, var(--gos-surface));
  }

  .gos-sidebar--rail .gos-sidebar__body {
    position: relative;
    min-width: 0;
    width: 100%;
  }

  .gos-sidebar--rail .gos-sidebar__footer {
    padding: 0.5rem 0.5rem;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    background: transparent;
    border-top-color: transparent;
    position: relative;
  }

  .gos-sidebar--rail .gos-sidebar__footer::before {
    content: '';
    position: absolute;
    left: 28%;
    right: 28%;
    top: 0;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, var(--gos-border) 90%, transparent) 50%,
      transparent
    );
  }

  .gos-sidebar--rail .gos-sidebar__account {
    padding: 0;
    border-bottom: 0;
  }

  .gos-sidebar--rail .gos-sidebar-profile__meta,
  .gos-sidebar--rail .gos-sidebar-profile__chevron,
  .gos-sidebar--rail .gos-account-role-pill {
    display: none !important;
  }

  .gos-sidebar--rail .gos-avatar-menu--sidebar .gos-avatar-menu__trigger.gos-sidebar-profile {
    justify-content: center;
    width: var(--gos-nav-rail-icon-size, 2.5rem);
    min-height: var(--gos-nav-rail-icon-size, 2.5rem);
    height: var(--gos-nav-rail-icon-size, 2.5rem);
    padding: 0;
    margin: 0 auto;
    border-radius: 12px;
    background: transparent;
    border: 1px solid transparent;
    transition: background var(--gos-duration-fast, 180ms) ease,
                border-color var(--gos-duration-fast, 180ms) ease,
                transform var(--gos-duration-fast, 180ms) var(--gos-ease-spring, cubic-bezier(0.22, 1, 0.36, 1));
  }

  .gos-sidebar--rail .gos-avatar-menu--sidebar .gos-avatar-menu__trigger.gos-sidebar-profile:hover,
  .gos-sidebar--rail .gos-avatar-menu--sidebar .gos-avatar-menu__trigger.gos-sidebar-profile[aria-expanded="true"] {
    background: color-mix(in srgb, var(--gos-text-primary) 5%, transparent);
    border-color: color-mix(in srgb, var(--gos-border) 80%, transparent);
    transform: translateY(-1px);
  }

  .gos-sidebar--rail .gos-sidebar-profile__avatar {
    width: 1.875rem;
    height: 1.875rem;
    font-size: 10px;
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--gos-bg) 80%, transparent),
      0 0 0 3px color-mix(in srgb, var(--gos-accent) 35%, transparent);
  }
}

.gos-sidebar-collapse-btn {
  display: none;
}

@media (min-width: 1024px) {
  .gos-sidebar-collapse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: var(--gos-text-secondary);
    cursor: pointer;
    transition: background var(--gos-duration-fast, 180ms) ease,
                color var(--gos-duration-fast, 180ms) ease,
                transform var(--gos-duration-fast, 180ms) var(--gos-ease-spring, cubic-bezier(0.22, 1, 0.36, 1));
  }

  .gos-sidebar-collapse-btn:hover {
    background: var(--gos-hover-fill);
    color: var(--gos-text-primary);
  }

  .gos-sidebar--rail .gos-sidebar-collapse-btn {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--gos-border) 85%, transparent);
    background: color-mix(in srgb, var(--gos-surface) 90%, transparent);
    color: var(--gos-text-soft);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--gos-text-primary) 4%, transparent);
  }

  .gos-sidebar--rail .gos-sidebar-collapse-btn:hover {
    color: var(--gos-text-primary);
    border-color: color-mix(in srgb, var(--gos-accent) 25%, var(--gos-border));
    background: var(--gos-surface);
    transform: scale(1.06);
  }

  .gos-sidebar--rail .gos-sidebar-collapse-btn .iconify[data-icon="lucide:panel-left-close"] {
    display: none;
  }

  .gos-sidebar--rail .gos-sidebar-collapse-btn .iconify[data-icon="lucide:panel-left-open"] {
    display: inline-block;
  }

  .gos-sidebar--desktop:not(.gos-sidebar--rail) .gos-sidebar-collapse-btn .iconify[data-icon="lucide:panel-left-open"] {
    display: none;
  }
}

/* Top bar chrome — stack above #content-area so header dropdowns remain interactive */
#g-os-app-header,
#gos-app-header {
  position: relative;
  z-index: 50;
  overflow: visible;
}

@media (max-width: 1023px) {
  #gos-app-header {
    display: none !important;
  }
}

/* Mobile topbar sits above app header so avatar/quick-create menus are not covered */
#gos-mobile-topbar {
  position: relative;
  z-index: 60;
  overflow: visible;
}

.gos-header-end {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* Avatar menu */
.gos-avatar-menu {
  position: relative;
}

.gos-avatar-menu__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid var(--gos-border);
  background: var(--gos-surface);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--gos-duration-fast, 180ms), box-shadow var(--gos-duration-fast, 180ms);
}

.gos-avatar-menu__trigger:hover,
.gos-avatar-menu__trigger[aria-expanded="true"] {
  border-color: var(--gos-accent);
  box-shadow: 0 0 0 3px var(--gos-accent-soft, rgba(0, 115, 255, 0.1));
}

.gos-avatar-menu__trigger img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gos-avatar-menu__initials {
  font-size: 11px;
  font-weight: 700;
  color: var(--gos-text-primary);
}

.gos-avatar-menu__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 80;
  min-width: 11rem;
  padding: 0.375rem;
  background: var(--gos-surface);
  border: 1px solid var(--gos-border);
  border-radius: 12px;
  box-shadow: var(--gos-shadow-elevated);
  display: none;
}

.gos-avatar-menu__dropdown.is-open {
  display: block;
  animation: gosShellMenuIn 0.18s var(--gos-ease-out, ease);
}

@keyframes gosShellMenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.gos-avatar-menu__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 13px;
  color: var(--gos-text-primary);
  cursor: pointer;
  text-align: left;
}

.gos-avatar-menu__item:hover {
  background: var(--gos-hover-fill);
}

.gos-avatar-menu__sep {
  height: 1px;
  background: var(--gos-border);
  margin: 0.25rem 0.375rem;
}

.gos-avatar-menu__header {
  padding: 0.5rem 0.625rem 0.375rem;
}

.gos-avatar-menu__header-name {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--gos-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gos-avatar-menu__header-email {
  display: block;
  margin-top: 0.125rem;
  font-size: 10px;
  color: var(--gos-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gos-avatar-menu--sidebar {
  width: 100%;
}

.gos-avatar-menu--sidebar .gos-avatar-menu__trigger.gos-sidebar-profile {
  width: 100%;
  border-radius: 10px;
  border: 0;
  height: auto;
  min-height: 0;
  box-shadow: none;
}

.gos-avatar-menu--sidebar .gos-avatar-menu__trigger.gos-sidebar-profile:hover,
.gos-avatar-menu--sidebar .gos-avatar-menu__trigger.gos-sidebar-profile[aria-expanded="true"] {
  border-color: transparent;
  box-shadow: none;
  background: var(--gos-hover-fill);
}

.gos-avatar-menu--sidebar .gos-account-role-pill {
  flex-shrink: 0;
  font-size: 10px;
  padding: 2px 7px;
}

.gos-avatar-menu__dropdown--sidebar {
  top: auto;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 0;
}

.gos-avatar-menu__dropdown--sidebar .gos-avatar-menu__header--rail {
  display: none;
}

/* Rail: escape narrow sidebar — fixed flyout beside the avatar */
.gos-sidebar--rail .gos-avatar-menu__dropdown--sidebar.is-open,
.gos-avatar-menu__dropdown--sidebar.is-rail-flyout.is-open {
  position: fixed;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 90;
  width: 13.75rem;
  min-width: 13.75rem;
  max-width: calc(100vw - 1.5rem);
  padding: 0.375rem;
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--gos-surface) 96%, #fff) 0%, var(--gos-surface) 100%);
  border: 1px solid color-mix(in srgb, var(--gos-border) 90%, transparent);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  box-shadow:
    0 20px 56px rgba(0, 0, 0, 0.16),
    0 4px 16px rgba(0, 0, 0, 0.06),
    0 0 0 1px color-mix(in srgb, var(--gos-text-primary) 3%, transparent);
  animation: gosAvatarRailFlyIn 0.2s var(--gos-ease-spring, cubic-bezier(0.22, 1, 0.36, 1));
}

.dark .gos-sidebar--rail .gos-avatar-menu__dropdown--sidebar.is-open,
.dark .gos-avatar-menu__dropdown--sidebar.is-rail-flyout.is-open {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, var(--gos-surface) 40%);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

.gos-sidebar--rail .gos-avatar-menu__dropdown--sidebar .gos-avatar-menu__header--rail,
.gos-avatar-menu__dropdown--sidebar.is-rail-flyout .gos-avatar-menu__header--rail {
  display: block;
}

.gos-sidebar--rail .gos-avatar-menu__dropdown--sidebar .gos-avatar-menu__header.gos-avatar-menu__header--rail,
.gos-avatar-menu__dropdown--sidebar.is-rail-flyout .gos-avatar-menu__header.gos-avatar-menu__header--rail {
  padding: 0.625rem 0.75rem 0.5rem;
}

.gos-sidebar--rail .gos-avatar-menu__dropdown--sidebar .gos-avatar-menu__item,
.gos-avatar-menu__dropdown--sidebar.is-rail-flyout .gos-avatar-menu__item {
  white-space: nowrap;
  padding: 0.5625rem 0.75rem;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  gap: 0.75rem;
}

.gos-sidebar--rail .gos-avatar-menu__dropdown--sidebar .gos-avatar-menu__item .iconify,
.gos-avatar-menu__dropdown--sidebar.is-rail-flyout .gos-avatar-menu__item .iconify {
  flex-shrink: 0;
  color: var(--gos-text-secondary);
}

.gos-sidebar--rail .gos-avatar-menu__dropdown--sidebar .gos-avatar-menu__item:hover .iconify,
.gos-avatar-menu__dropdown--sidebar.is-rail-flyout .gos-avatar-menu__item:hover .iconify {
  color: var(--gos-text-primary);
}

.gos-sidebar--rail .gos-avatar-menu__dropdown--sidebar .gos-avatar-menu__item[data-gos-avatar-action="signout"],
.gos-avatar-menu__dropdown--sidebar.is-rail-flyout .gos-avatar-menu__item[data-gos-avatar-action="signout"] {
  color: color-mix(in srgb, #ef4444 88%, var(--gos-text-primary));
}

.gos-sidebar--rail .gos-avatar-menu__dropdown--sidebar .gos-avatar-menu__item[data-gos-avatar-action="signout"] .iconify,
.gos-avatar-menu__dropdown--sidebar.is-rail-flyout .gos-avatar-menu__item[data-gos-avatar-action="signout"] .iconify {
  color: inherit;
}

.gos-avatar-menu__dropdown--sidebar.is-rail-flyout::before {
  content: '';
  position: absolute;
  left: -5px;
  bottom: var(--gos-avatar-rail-caret, 18px);
  width: 10px;
  height: 10px;
  background: var(--gos-surface);
  border-left: 1px solid color-mix(in srgb, var(--gos-border) 90%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--gos-border) 90%, transparent);
  transform: rotate(45deg);
  pointer-events: none;
}

@keyframes gosAvatarRailFlyIn {
  from {
    opacity: 0;
    transform: translateX(-8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Workspace switcher — rail flyout (portaled beside collapsed sidebar) */
.gos-ws-menu.is-rail-flyout.is-open {
  position: fixed;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 90;
  width: 16.5rem;
  min-width: 16.5rem;
  max-width: calc(100vw - 1.5rem);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.375rem;
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--gos-surface) 96%, #fff) 0%, var(--gos-surface) 100%);
  border: 1px solid color-mix(in srgb, var(--gos-border) 90%, transparent);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  box-shadow:
    0 20px 56px rgba(0, 0, 0, 0.16),
    0 4px 16px rgba(0, 0, 0, 0.06),
    0 0 0 1px color-mix(in srgb, var(--gos-text-primary) 3%, transparent);
  animation: gosWsRailFlyIn 0.2s var(--gos-ease-spring, cubic-bezier(0.22, 1, 0.36, 1));
}

.dark .gos-ws-menu.is-rail-flyout.is-open {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, var(--gos-surface) 40%);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

.gos-ws-menu.is-rail-flyout::before {
  content: '';
  position: absolute;
  left: -5px;
  top: var(--gos-ws-rail-caret, 18px);
  width: 10px;
  height: 10px;
  background: var(--gos-surface);
  border-left: 1px solid color-mix(in srgb, var(--gos-border) 90%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--gos-border) 90%, transparent);
  transform: rotate(45deg);
  pointer-events: none;
}

.gos-ws-menu.is-rail-flyout .gos-ws-menu__label {
  padding: 0.625rem 0.75rem 0.375rem;
  letter-spacing: 0.08em;
}

.gos-ws-menu.is-rail-flyout .gos-ws-item {
  white-space: nowrap;
  padding: 0.5625rem 0.75rem;
  border-radius: 10px;
  font-weight: 500;
  gap: 0.75rem;
}

.gos-ws-menu.is-rail-flyout .gos-ws-item-meta {
  min-width: 0;
}

.gos-ws-menu.is-rail-flyout .gos-ws-name {
  max-width: 100%;
}

.gos-ws-menu.is-rail-flyout .gos-ws-item__icon {
  flex-shrink: 0;
}

.gos-ws-menu.is-rail-flyout .gos-ws-item[data-action="new"] {
  color: var(--gos-accent);
}

.gos-ws-menu.is-rail-flyout .gos-ws-item[data-action="new"] .gos-ws-item__icon {
  color: inherit;
}

@keyframes gosWsRailFlyIn {
  from {
    opacity: 0;
    transform: translateX(-8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.gos-sidebar__account {
  padding: 0.25rem;
  border-bottom: 1px solid var(--gos-border);
}

.gos-sidebar__footer-settings {
  flex-shrink: 0;
  padding: 0.25rem;
}

.gos-sidebar__footer {
  flex-shrink: 0;
  border-top: 1px solid var(--gos-border);
  display: flex;
  flex-direction: column;
}

.gos-avatar-menu__badge {
  margin-left: auto;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.125rem;
  text-align: center;
  background: var(--gos-accent);
  color: #fff;
}

/* Quick create */
.gos-quick-create {
  position: relative;
}

.gos-quick-create__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--gos-border);
  background: var(--gos-surface);
  font-size: 12px;
  font-weight: 600;
  color: var(--gos-text-primary);
  cursor: pointer;
  transition: background var(--gos-duration-fast, 180ms);
}

.gos-quick-create__btn:hover {
  background: var(--gos-hover-fill);
}

.gos-quick-create__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 80;
  min-width: 13.5rem;
  padding: 0.375rem;
  background: var(--gos-surface);
  border: 1px solid var(--gos-border);
  border-radius: 12px;
  box-shadow: var(--gos-shadow-elevated);
  display: none;
}

.gos-quick-create__menu.is-open {
  display: block;
}

.gos-quick-create__menu.is-fixed {
  position: fixed;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 10040;
  max-height: min(22rem, calc(100vh - 1.5rem));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Body-ported menus keep surface tokens even outside the shell tree */
body > .gos-quick-create__menu.is-fixed {
  z-index: 10040;
}

.gos-quick-create.is-open {
  z-index: 10040;
}

.gos-quick-create__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 13px;
  color: var(--gos-text-primary);
  cursor: pointer;
  text-align: left;
}

.gos-quick-create__item:hover {
  background: var(--gos-hover-fill);
}

/* Notifications panel — JS anchors to the active bell */
.gos-notifications-panel {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  width: min(22rem, calc(100vw - 2rem));
  max-height: min(28rem, calc(100vh - 1.5rem));
  display: none;
  flex-direction: column;
  background: var(--gos-surface);
  border: 1px solid var(--gos-border);
  border-radius: 14px;
  box-shadow: var(--gos-shadow-elevated);
  overflow: hidden;
}

.gos-notifications-panel.is-open {
  display: flex;
}

.gos-notifications-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--gos-border);
}

.gos-notifications-panel__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--gos-text-primary);
}

.gos-notifications-panel__body {
  padding: 0.5rem 0;
  overflow-y: auto;
  font-size: 13px;
  color: var(--gos-text-secondary);
}

.gos-notifications-panel__empty {
  padding: 1rem;
  margin: 0;
}

.gos-notifications-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gos-notifications-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.625rem 1rem;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
  transition: background var(--gos-duration-fast, 180ms);
}

.gos-notifications-item:hover {
  background: var(--gos-hover-fill);
}

.gos-notifications-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 8px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--gos-accent) 12%, transparent);
  color: var(--gos-accent);
}

.gos-notifications-item__body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.gos-notifications-item__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--gos-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gos-notifications-item__meta {
  font-size: 11px;
  color: var(--gos-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gos-notifications-item__chevron {
  flex-shrink: 0;
  color: var(--gos-text-soft);
}

/* Record drawer */
.gos-record-drawer {
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
}

.gos-record-drawer.is-open {
  pointer-events: auto;
}

.gos-record-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 12, 0.45);
  opacity: 0;
  transition: opacity var(--gos-duration-fast, 180ms);
}

.gos-record-drawer.is-open .gos-record-drawer__backdrop {
  opacity: 1;
}

.gos-record-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(28rem, 100vw);
  background: var(--gos-surface);
  border-left: 1px solid var(--gos-border);
  box-shadow: var(--gos-shadow-elevated);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--gos-duration-medium, 360ms) var(--gos-ease-out, ease);
}

.gos-record-drawer.is-open .gos-record-drawer__panel {
  transform: translateX(0);
}

.gos-record-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--gos-border);
}

.gos-record-drawer__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--gos-text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gos-record-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
}

.gos-record-drawer__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--gos-border);
}

/* Placeholder views */
.gos-placeholder-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 2rem;
  text-align: center;
  gap: 0.75rem;
}

.gos-placeholder-view__icon {
  color: var(--gos-text-soft);
}

.gos-placeholder-view__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gos-text-primary);
}

.gos-placeholder-view__text {
  font-size: 13px;
  color: var(--gos-text-secondary);
  max-width: 24rem;
}

/* Dev role switcher */
.gos-dev-role-switcher {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background: var(--gos-surface);
  border: 1px dashed var(--gos-warning, #d97706);
  border-radius: 8px;
  font-size: 11px;
  color: var(--gos-text-secondary);
  box-shadow: var(--gos-shadow-card);
}

.gos-dev-role-switcher select {
  font-size: 11px;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--gos-border);
  background: var(--gos-bg);
  color: var(--gos-text-primary);
}

/* Command palette nav sections */
.gos-palette-section {
  padding: 0.5rem 0;
}

.gos-palette-section__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gos-text-secondary);
  padding: 0.25rem 0.75rem 0.375rem;
}

.gos-palette-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  background: transparent;
  font-size: 13px;
  color: var(--gos-text-primary);
  cursor: pointer;
  text-align: left;
  border-radius: 8px;
}

.gos-palette-item:hover,
.gos-palette-item.is-highlighted {
  background: var(--gos-hover-fill);
}

.gos-palette-item__meta {
  margin-left: auto;
  font-size: 10px;
  color: var(--gos-text-soft);
}

.gos-palette-mark {
  background: color-mix(in srgb, var(--gos-accent) 22%, transparent);
  color: var(--gos-accent);
  border-radius: 2px;
  padding: 0 1px;
  font-weight: 600;
}

/* Notifications bell (sidebar toolbar + mobile topbar) */
.gos-notifications-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--gos-text-secondary);
  cursor: pointer;
  transition: background var(--gos-duration-fast, 180ms), color var(--gos-duration-fast, 180ms);
}

.gos-notifications-bell:hover,
.gos-notifications-bell[aria-expanded="true"] {
  background: var(--gos-hover-fill);
  color: var(--gos-text-primary);
}

.gos-sidebar__toolbar-mount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gos-sidebar__toolbar-mount .gos-notifications-bell {
  width: 2rem;
  height: 2rem;
}

.gos-notifications-bell__badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1rem;
  text-align: center;
  background: var(--gos-accent);
  color: #fff;
}

.gos-notifications-bell__badge[hidden] {
  display: none;
}

.gos-quick-create__label {
  display: none;
}

@media (min-width: 640px) {
  .gos-quick-create__label {
    display: inline;
  }
}

.gos-quick-create__empty {
  padding: 0.5rem 0.75rem;
  font-size: 12px;
  color: var(--gos-text-secondary);
}

/* Standalone nav command palette */
.gos-nav-palette {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: min(12vh, 6rem) 1rem 1rem;
}

.gos-nav-palette.is-open {
  display: flex;
}

.gos-nav-palette__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 12, 0.5);
  backdrop-filter: blur(3px);
}

.gos-nav-palette__dialog {
  position: relative;
  width: min(32rem, 100%);
  max-height: min(28rem, calc(100vh - 8rem));
  display: flex;
  flex-direction: column;
  background: var(--gos-surface);
  border: 1px solid var(--gos-border);
  border-radius: 14px;
  box-shadow: var(--gos-shadow-elevated);
  overflow: hidden;
  animation: gosShellMenuIn 0.18s var(--gos-ease-out, ease);
}

.gos-nav-palette__input-wrap {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--gos-border);
}

.gos-nav-palette__search-icon {
  color: var(--gos-text-soft);
  flex-shrink: 0;
}

.gos-nav-palette__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 14px;
  color: var(--gos-text-primary);
  outline: none;
}

.gos-nav-palette__esc {
  font-size: 10px;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  border: 1px solid var(--gos-border);
  color: var(--gos-text-soft);
  font-family: inherit;
}

.gos-nav-palette__results {
  flex: 1;
  overflow-y: auto;
  padding: 0.25rem 0.5rem;
}

.gos-nav-palette__empty {
  padding: 0.75rem;
  font-size: 13px;
  color: var(--gos-text-secondary);
}

.gos-nav-palette__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 1rem;
  border-top: 1px solid var(--gos-border);
  font-size: 11px;
  color: var(--gos-text-soft);
  flex-wrap: wrap;
}

.gos-nav-palette__hints {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.gos-nav-palette__dev-preview {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.gos-nav-palette__dev-preview[hidden] {
  display: none;
}

.gos-nav-palette__dev-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gos-warning, #d97706);
}

.gos-nav-palette__dev-select {
  font-size: 11px;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  border: 1px dashed var(--gos-warning, #d97706);
  background: var(--gos-bg);
  color: var(--gos-text-primary);
  font-family: inherit;
}

.gos-nav-palette__foot kbd {
  font-size: 10px;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
  border: 1px solid var(--gos-border);
  margin-right: 0.15rem;
  font-family: inherit;
}

body.gos-record-drawer-open {
  overflow: hidden;
}

/* Phase 3 — scope banner, invites, role preview */
.gos-scope-banner {
  flex-shrink: 0;
  padding: 0.625rem 1rem 0;
  z-index: 5;
}

.gos-scope-banner__inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--gos-accent) 22%, var(--gos-border));
  background: color-mix(in srgb, var(--gos-accent) 7%, var(--gos-surface));
}

.gos-scope-banner__icon {
  flex-shrink: 0;
  color: var(--gos-accent);
}

.gos-scope-banner__copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.gos-scope-banner__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--gos-text-primary);
}

.gos-scope-banner__text {
  font-size: 11.5px;
  color: var(--gos-text-secondary);
}

.gos-scope-banner__cta {
  flex-shrink: 0;
  padding: 0.375rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--gos-border);
  background: var(--gos-surface);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gos-text-primary);
  cursor: pointer;
}

.gos-scope-banner__cta:hover {
  background: var(--gos-hover-fill);
}

.gos-pending-invites {
  padding: 0 0.5rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gos-pending-invite-card {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--gos-accent) 25%, var(--gos-border));
  background: color-mix(in srgb, var(--gos-accent) 6%, var(--gos-surface));
}

.gos-pending-invite-card__eyebrow {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gos-text-soft);
}

.gos-pending-invite-card__title {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--gos-text-primary);
}

.gos-pending-invite-card__meta {
  display: block;
  font-size: 10.5px;
  color: var(--gos-text-secondary);
  text-transform: capitalize;
}

.gos-pending-invite-card__copy {
  flex: 1;
  min-width: 0;
}

.gos-pending-invite-card__actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.gos-pending-invite-card__accept {
  padding: 0.3rem 0.625rem;
  border-radius: 7px;
  border: 0;
  background: var(--gos-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.gos-pending-invite-card__dismiss {
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--gos-text-secondary);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.gos-role-preview-chip[hidden] {
  display: none;
}

.gos-role-preview-chip {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.625rem 0.4rem 0.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #d97706 35%, var(--gos-border));
  background: color-mix(in srgb, #d97706 12%, var(--gos-surface));
  box-shadow: var(--gos-shadow-elevated);
  font-size: 11.5px;
  color: var(--gos-text-primary);
}

.gos-role-preview-chip__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #d97706;
  flex-shrink: 0;
}

.gos-role-preview-chip__exit {
  margin-left: 0.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--gos-border);
  background: var(--gos-surface);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
}

body.gos-workspace-readonly [data-gos-min-role="editor"],
body.gos-workspace-readonly [data-gos-min-role="admin"],
body.gos-workspace-readonly [data-gos-min-role="owner"] {
  pointer-events: none;
  opacity: 0.55;
}