/* Orbyte unified theme bridge.
   Keep every product surface on the active --bg-* palette so built-in and
   user-defined themes recolor the complete desktop/mobile UI consistently. */

:root {
  --ui-app: var(--bg-0, #0b0d11);
  --ui-canvas: var(--bg-1, #111419);
  --ui-sidebar: var(--bg-2, #181c23);
  --ui-surface: var(--bg-3, #202630);
  --ui-raised: var(--bg-4, #292f39);
  --ui-border: var(--line, rgba(255,255,255,.1));
  --ui-text: var(--text, #f5f7fa);
  --ui-muted: var(--muted, #a7afbd);
  --ui-faint: var(--faint, #788393);
  --ui-accent: var(--brand, #4e65f6);
  --ui-accent-hover: var(--brand-hover, #3f52c7);
  --ui-hover: color-mix(in srgb, var(--ui-text) 7%, transparent);
  --ui-selected: color-mix(in srgb, var(--ui-accent) 18%, var(--ui-surface));
  --ui-overlay: color-mix(in srgb, var(--ui-app) 72%, transparent);
  --ui-shadow: 0 18px 56px color-mix(in srgb, var(--ui-app) 64%, transparent);

  /* Bridge newer component tokens back to the theme the user selected. */
  --app-bg: var(--ui-app);
  --surface-primary: var(--ui-canvas);
  --surface-secondary: var(--ui-sidebar);
  --surface-elevated: var(--ui-surface);
  --surface-hover: var(--ui-raised);
  --text-primary: var(--ui-text);
  --text-secondary: var(--ui-muted);
  --text-muted: var(--ui-faint);
  --accent: var(--ui-accent);
  --accent-hover: var(--ui-accent-hover);
  --border-subtle: var(--ui-border);
  --glass-bg: color-mix(in srgb, var(--ui-sidebar) 88%, transparent);
  --glass-border: color-mix(in srgb, var(--ui-text) 14%, transparent);

  --ds-base: var(--ui-app);
  --ds-sidebar: var(--ui-sidebar);
  --ds-canvas: var(--ui-canvas);
  --ds-raised: var(--ui-surface);
  --ds-border: var(--ui-border);
  --ds-hover: var(--ui-hover);
  --ds-selected: var(--ui-selected);
  --ds-input: var(--ui-surface);

  --obx-base: var(--ui-app);
  --obx-rail: var(--ui-app);
  --obx-side: var(--ui-sidebar);
  --obx-chat: var(--ui-canvas);
  --obx-panel: var(--ui-surface);
  --obx-raised: var(--ui-raised);
  --obx-hover: var(--ui-hover);
  --obx-active: var(--ui-selected);
  --obx-border: var(--ui-border);
  --obx-border-strong: var(--ui-border);
  --obx-text: var(--ui-text);
  --obx-muted: var(--ui-muted);
  --obx-faint: var(--ui-faint);
}

/* A consistent light foundation; retain the user's chosen accent. */
html[data-theme="light"] {
  --ui-app: #eef1f5;
  --ui-canvas: #ffffff;
  --ui-sidebar: #f6f7f9;
  --ui-surface: #ffffff;
  --ui-raised: #e9edf2;
  --ui-border: #d9dee7;
  --ui-text: #20242c;
  --ui-muted: #606a78;
  --ui-faint: #778292;
  --ui-hover: rgba(25, 35, 50, .06);
  --ui-selected: color-mix(in srgb, var(--ui-accent) 13%, white);
  color-scheme: light;
}
html[data-theme="light"] body :is(.guild-rail,.channel-panel,.server-head,.me-bar,.chat-panel,.chat-head,#messages,.messages,.composer-wrap,.composer,.member-panel,.settings-nav,.settings-page,.settings-grid,.mobile-root-page,#mobileMessagesPage,#mobileNotificationsPage,#mobileYouPage,.mobile-page-header,.mobile-page-scroll,.mobile-friends-toolbar,.mobile-friends-list,.mobile-dm-row,.mobile-friend-row,.mobile-notification-row,.mobile-bottom-nav,#mobileBottomNav,.mobile-server-hero) {
  background-color: var(--ui-canvas) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
}
html[data-theme="light"] body :is(.guild-rail,.channel-panel,.server-head,.me-bar,.settings-nav,.mobile-page-header,.mobile-bottom-nav,#mobileBottomNav) { background-color: var(--ui-sidebar) !important; }
html[data-theme="light"] body :is(.channel,.dm-channel,.member,.dm-row,.mobile-dm-row,.mobile-friend-row,.mobile-notification-row):hover { background-color: var(--ui-hover) !important; }
html[data-theme="light"] body :is(.channel.active,.dm-channel.active,.member.active,.dm-row.active) { background-color: var(--ui-selected) !important; }

html[data-theme] body,
html[data-theme] #app,
html[data-theme] #app.app-shell {
  background-color: var(--ui-app) !important;
  color: var(--ui-text) !important;
}

/* Desktop shell: no neutral gray islands; every pane follows the theme. */
html[data-orbyte-client="desktop"] body :is(.guild-rail, .mobile-guild-rail) {
  background: var(--ui-app) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
}

html[data-orbyte-client="desktop"] body :is(.channel-panel, .member-panel, .server-head, .me-bar) {
  background: var(--ui-sidebar) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
}

html[data-orbyte-client="desktop"] body :is(.chat-panel, .chat-head, #messages, .messages, .composer-wrap) {
  background: var(--ui-canvas) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
}

html[data-orbyte-client="desktop"] body :is(.composer, .message-composer, .field, input, textarea, select) {
  background-color: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
}

html[data-orbyte-client="desktop"] body :is(.channel, .dm-channel, .member, .dm-row):hover {
  background-color: var(--ui-hover) !important;
}

html[data-orbyte-client="desktop"] body :is(.channel, .dm-channel, .member, .dm-row).active {
  background-color: var(--ui-selected) !important;
  color: var(--ui-text) !important;
}

/* Settings use the same canvas/sidebar/surface hierarchy as the main app. */
html[data-theme] body #settingsOverlay:not(.hidden) {
  background: var(--ui-app) !important;
  color: var(--ui-text) !important;
}

html[data-theme] body #settingsOverlay > .modal.wide,
html[data-theme] body #settingsOverlay .settings-grid,
html[data-theme] body #settingsOverlay .settings-grid > div:last-child,
html[data-theme] body #settingsOverlay .settings-page {
  background: var(--ui-canvas) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
}

html[data-theme] body #settingsOverlay > .modal.wide > .modal-head,
html[data-theme] body #settingsOverlay .settings-nav {
  background: var(--ui-sidebar) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
}

html[data-theme] body #settingsOverlay .settings-nav button {
  background: transparent !important;
  color: var(--ui-muted) !important;
}

html[data-theme] body #settingsOverlay .settings-nav button:hover {
  background: var(--ui-hover) !important;
  color: var(--ui-text) !important;
}

html[data-theme] body #settingsOverlay .settings-nav button.active {
  background: var(--ui-selected) !important;
  color: var(--ui-text) !important;
}

html[data-theme] body #settingsOverlay :is(
  .settings-item, .settings-row, .notification-settings-card, .security-card,
  .wallpaper-card, .activity-settings-card, .case-card, .account-bots-card,
  .orbyte-profile-theme-setting, .theme-card, .home-card
) {
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
  box-shadow: none !important;
}

html[data-theme] body #settingsOverlay :is(input, textarea, select, .field) {
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
  color-scheme: inherit;
}

html[data-theme] body :is(.modal, .ui-dialog-modal, .context-menu, .dropdown-menu, .popover, .bottom-sheet, .action-sheet, .sheet, .menu-panel) {
  background-color: var(--ui-sidebar) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow) !important;
}

/* Mobile shares the exact palette, while keeping its platform-specific layout. */
html[data-orbyte-client="mobile"] body :is(.mobile-root-page, .mobile-page-scroll, #mobileMessagesPage, #mobileNotificationsPage, #mobileYouPage) {
  background-color: var(--ui-canvas) !important;
  color: var(--ui-text) !important;
}

html[data-orbyte-client="mobile"] body :is(.mobile-page-header, .mobile-bottom-nav, #mobileBottomNav) {
  background-color: color-mix(in srgb, var(--ui-sidebar) 90%, transparent) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
}

html[data-theme] body :is(.help, .muted, .message-time, .message-timestamp) { color: var(--ui-muted) !important; }
html[data-theme] body :is(.faint, .channel-category-head, .member-group-title) { color: var(--ui-faint) !important; }
html[data-theme] body :is(a, .link, .text-link) { color: var(--ui-accent-hover); }

@media (prefers-reduced-transparency: reduce) {
  html[data-theme] body :is(.chat-head, .server-head, .mobile-page-header, .mobile-bottom-nav, #mobileBottomNav) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: var(--ui-sidebar) !important;
  }
}

/* Profile viewer: banner-led, single-surface layout inspired by the supplied
   reference while preserving Orbyte's theme variables and existing actions. */
html[data-orbyte-client="desktop"] body #profileOverlay:not(.hidden) {
  padding: 24px !important;
  background: var(--ui-overlay) !important;
  backdrop-filter: blur(12px) saturate(120%) !important;
}

html[data-orbyte-client="desktop"] body #profileOverlay .profile-card.orbyte-r40-profile {
  width: min(860px, calc(100vw - 48px)) !important;
  height: min(680px, calc(100dvh - 48px)) !important;
  max-width: 860px !important;
  max-height: 680px !important;
  overflow: hidden !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 22px !important;
  background: var(--ui-canvas) !important;
  color: var(--ui-text) !important;
  box-shadow: 0 30px 100px color-mix(in srgb, var(--ui-app) 74%, transparent) !important;
}

html[data-orbyte-client="desktop"] body #profileOverlay .profile-card.orbyte-r40-profile .orbyte-r40-banner {
  height: 172px !important;
  min-height: 172px !important;
  border-radius: 21px 21px 0 0 !important;
  background-size: cover !important;
  background-position: center !important;
}

html[data-orbyte-client="desktop"] body #profileOverlay .profile-card.orbyte-r40-profile .orbyte-r40-shell {
  display: block !important;
  height: calc(100% - 172px) !important;
  max-height: none !important;
  overflow: auto !important;
  background: var(--ui-canvas) !important;
}

html[data-orbyte-client="desktop"] body #profileOverlay .profile-card.orbyte-r40-profile .orbyte-r40-sidebar {
  overflow: visible !important;
  padding: 0 24px !important;
  background: var(--ui-canvas) !important;
  border: 0 !important;
}

html[data-orbyte-client="desktop"] body #profileOverlay .profile-card.orbyte-r40-profile .orbyte-r40-sidebar > :not(.orbyte-r40-hero) {
  display: none !important;
}

html[data-orbyte-client="desktop"] body #profileOverlay .profile-card.orbyte-r40-profile .orbyte-r40-hero {
  position: relative !important;
  min-height: 142px !important;
  margin: 0 !important;
  padding: 0 0 16px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-orbyte-client="desktop"] body #profileOverlay .profile-card.orbyte-r40-profile .orbyte-r40-identity {
  display: grid !important;
  grid-template-columns: 126px minmax(0, 1fr) !important;
  align-items: end !important;
  gap: 16px !important;
  min-height: 102px !important;
}

html[data-orbyte-client="desktop"] body #profileOverlay .profile-card.orbyte-r40-profile .orbyte-r40-avatar {
  width: 126px !important;
  height: 126px !important;
  min-width: 126px !important;
  margin: -54px 0 0 !important;
  border: 6px solid var(--ui-canvas) !important;
  border-radius: 50% !important;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--ui-app) 55%, transparent) !important;
}

html[data-orbyte-client="desktop"] body #profileOverlay .profile-card.orbyte-r40-profile .orbyte-r40-namebox {
  padding-bottom: 8px !important;
}

html[data-orbyte-client="desktop"] body #profileOverlay .profile-card.orbyte-r40-profile .orbyte-r40-name-row h2 {
  font-size: 22px !important;
  line-height: 1.1 !important;
  letter-spacing: -.025em !important;
  color: var(--ui-text) !important;
}

html[data-orbyte-client="desktop"] body #profileOverlay .profile-card.orbyte-r40-profile .orbyte-r40-actions {
  position: absolute !important;
  top: 16px !important;
  right: 0 !important;
  display: flex !important;
  gap: 8px !important;
  margin: 0 !important;
}

html[data-orbyte-client="desktop"] body #profileOverlay .profile-card.orbyte-r40-profile .orbyte-r40-btn {
  min-height: 40px !important;
  border-radius: 8px !important;
}

html[data-orbyte-client="desktop"] body #profileOverlay .profile-card.orbyte-r40-profile .orbyte-r40-content {
  min-height: 0 !important;
  overflow: visible !important;
  padding: 0 24px 28px !important;
  background: var(--ui-canvas) !important;
}

html[data-orbyte-client="desktop"] body #profileOverlay .profile-card.orbyte-r40-profile .orbyte-r40-topline {
  display: none !important;
}

html[data-orbyte-client="desktop"] body #profileOverlay .profile-card.orbyte-r40-profile .orbyte-r40-tabs {
  position: static !important;
  margin: 0 -24px 14px !important;
  padding: 0 24px !important;
  min-height: 52px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-border) !important;
  background: var(--ui-canvas) !important;
  backdrop-filter: none !important;
}

html[data-orbyte-client="desktop"] body #profileOverlay .profile-card.orbyte-r40-profile .orbyte-r40-tab {
  min-height: 52px !important;
  border-radius: 0 !important;
  color: var(--ui-muted) !important;
}

html[data-orbyte-client="desktop"] body #profileOverlay .profile-card.orbyte-r40-profile .orbyte-r40-tab.active {
  color: var(--ui-text) !important;
  box-shadow: inset 0 -2px var(--ui-text) !important;
}

html[data-orbyte-client="desktop"] body #profileOverlay .profile-card.orbyte-r40-profile :is(.orbyte-r40-section, .orbyte-r40-post) {
  border-color: var(--ui-border) !important;
  background: var(--ui-surface) !important;
  box-shadow: none !important;
}

html[data-orbyte-client="desktop"] body #profileOverlay .orbyte-r40-badges img {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
}

/* The legacy profile upgrade layers force each pane to 100% height. In the
   single-column viewer that leaves an empty viewport between the hero and tabs. */
html[data-orbyte-client="desktop"] body #profileOverlay .profile-card.orbyte-r40-profile.r197-upgraded.r1971-clean {
  background: var(--ui-canvas) !important;
  color: var(--ui-text) !important;
}

html[data-orbyte-client="desktop"] body #profileOverlay .profile-card.orbyte-r40-profile.r197-upgraded.r1971-clean .orbyte-r40-shell {
  display: block !important;
  height: calc(100% - 172px) !important;
  max-height: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: auto !important;
  background: var(--ui-canvas) !important;
}

html[data-orbyte-client="desktop"] body #profileOverlay .profile-card.orbyte-r40-profile.r197-upgraded.r1971-clean .orbyte-r40-sidebar,
html[data-orbyte-client="desktop"] body #profileOverlay .profile-card.orbyte-r40-profile.r197-upgraded.r1971-clean .orbyte-r40-content {
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  background: var(--ui-canvas) !important;
  color: var(--ui-text) !important;
}

html[data-orbyte-client="desktop"] body #profileOverlay .profile-card.orbyte-r40-profile.r197-upgraded.r1971-clean .orbyte-r40-sidebar {
  padding: 0 24px !important;
  border: 0 !important;
}

html[data-orbyte-client="desktop"] body #profileOverlay .profile-card.orbyte-r40-profile.r197-upgraded.r1971-clean .orbyte-r40-hero {
  min-height: 142px !important;
  margin: 0 !important;
  padding: 0 0 16px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html[data-orbyte-client="desktop"] body #profileOverlay .profile-card.orbyte-r40-profile.r197-upgraded.r1971-clean .orbyte-r40-content {
  padding: 0 24px 28px !important;
  scrollbar-gutter: auto !important;
}

html[data-orbyte-client="desktop"] body #profileOverlay .profile-card.orbyte-r40-profile.r197-upgraded.r1971-clean .orbyte-r40-topline {
  display: none !important;
}

html[data-orbyte-client="desktop"] body #profileOverlay .profile-card.orbyte-r40-profile.r197-upgraded.r1971-clean .orbyte-r40-tabs {
  position: static !important;
  top: auto !important;
  margin: 0 -24px 14px !important;
  padding: 0 24px !important;
  background: var(--ui-canvas) !important;
  border-color: var(--ui-border) !important;
  backdrop-filter: none !important;
}

html[data-orbyte-client="desktop"] body #profileOverlay .profile-card.orbyte-r40-profile.r197-upgraded.r1971-clean :is(.orbyte-r40-section,.orbyte-r40-post,.orbyte-r40-empty,.r1971-mutual-panel) {
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
  box-shadow: none !important;
}

/* Login — two-column sign-in card over the supplied Orbyte artwork. */
#authScreen.orbyte-auth-next:has(#loginForm:not(.hidden)) {
  min-height: 100dvh !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  padding: 24px !important;
  background: linear-gradient(120deg,rgb(8 11 18 / 42%),rgb(8 11 18 / 18%)),url('/assets/login/backround.png') center / cover no-repeat fixed !important;
}

#authScreen.orbyte-auth-next:has(#loginForm:not(.hidden)) :is(.orbyte-auth-intro,.auth-logo,.auth-tabs,.orbyte-auth-back-home) { display: none !important; }

#authScreen.orbyte-auth-next:has(#loginForm:not(.hidden)) .auth-card {
  width: min(980px,100%) !important;
  min-height: 0 !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb,var(--ui-surface) 96%,transparent) !important;
  box-shadow: 0 28px 90px rgb(0 0 0 / 48%) !important;
  overflow: hidden !important;
}

#authScreen.orbyte-auth-next:has(#loginForm:not(.hidden)) .legacy-login-shell {
  display: grid !important;
  grid-template-columns: minmax(0,1.35fr) minmax(300px,.85fr) !important;
}

#authScreen.orbyte-auth-next:has(#loginForm:not(.hidden)) .legacy-login-pane { padding: 34px 38px 30px !important; background: transparent !important; }
#authScreen.orbyte-auth-next:has(#loginForm:not(.hidden)) #loginForm { padding: 0 !important; }
#authScreen.orbyte-auth-next:has(#loginForm:not(.hidden)) .r80-login-heading { margin-bottom: 24px !important; text-align: center !important; }
#authScreen.orbyte-auth-next:has(#loginForm:not(.hidden)) .r80-login-heading h2 { margin: 0 !important; font-size: 25px !important; }
#authScreen.orbyte-auth-next:has(#loginForm:not(.hidden)) .r80-login-heading p { margin: 8px 0 0 !important; color: var(--ui-muted) !important; font-size: 15px !important; }
#authScreen.orbyte-auth-next:has(#loginForm:not(.hidden)) #loginForm label { display: block !important; margin: 16px 0 8px !important; color: var(--ui-text) !important; font-size: 14px !important; font-weight: 650 !important; }
.orbyte-required-mark { color: #ff6b72; }
#authScreen.orbyte-auth-next:has(#loginForm:not(.hidden)) #loginForm .field { width: 100% !important; min-height: 46px !important; border: 1px solid var(--ui-border) !important; border-radius: 8px !important; background: var(--ui-canvas) !important; }
#authScreen.orbyte-auth-next:has(#loginForm:not(.hidden)) #loginForm > .help { display: none !important; }
#authScreen.orbyte-auth-next:has(#loginForm:not(.hidden)) .auth-link-row { margin: 6px 0 18px !important; }
#authScreen.orbyte-auth-next:has(#loginForm:not(.hidden)) .auth-text-link { color: var(--ui-accent) !important; }
#authScreen.orbyte-auth-next:has(#loginForm:not(.hidden)) #loginForm .btn.full { min-height: 44px !important; border-radius: 8px !important; background: var(--ui-accent) !important; }
#authScreen.orbyte-auth-next:has(#loginForm:not(.hidden)) .auth-create-account-row { justify-content: flex-start !important; margin-top: 10px !important; color: var(--ui-muted) !important; }
#authScreen.orbyte-auth-next:has(#loginForm:not(.hidden)) .legacy-login-aside { display: grid !important; place-items: center !important; padding: 34px 38px !important; border: 0 !important; background: transparent !important; }
#authScreen.orbyte-auth-next:has(#loginForm:not(.hidden)) .modern-login-options { width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
#authScreen.orbyte-auth-next:has(#loginForm:not(.hidden)) :is(.login-divider,.login-method-tabs) { display: none !important; }
#authScreen.orbyte-auth-next:has(#loginForm:not(.hidden)) .login-method-panel { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
#authScreen.orbyte-auth-next:has(#loginForm:not(.hidden)) [data-login-panel="qr"] .login-qr-layout { display: grid !important; grid-template-columns: 1fr !important; justify-items: center !important; gap: 18px !important; text-align: center !important; }
#authScreen.orbyte-auth-next:has(#loginForm:not(.hidden)) .login-qr-box { width: 178px !important; height: 178px !important; padding: 7px !important; border-radius: 6px !important; background: #fff !important; }
#authScreen.orbyte-auth-next:has(#loginForm:not(.hidden)) .login-qr-box :is(img,canvas,svg) { width: 164px !important; height: 164px !important; }
#authScreen.orbyte-auth-next:has(#loginForm:not(.hidden)) [data-login-panel="qr"] h3 { margin: 0 !important; font-size: 24px !important; }
#authScreen.orbyte-auth-next:has(#loginForm:not(.hidden)) [data-login-panel="qr"] p { max-width: 270px !important; margin: 8px auto 0 !important; color: var(--ui-text) !important; line-height: 1.45 !important; }
#authScreen.orbyte-auth-next:has(#loginForm:not(.hidden)) .pair-code { display: none !important; }
.orbyte-login-email-link,.orbyte-login-qr-back { display: block; margin: 10px auto 0; border: 0; background: transparent; color: var(--ui-accent); font: inherit; font-size: 13px; cursor: pointer; }

@media (max-width:760px) {
  #authScreen.orbyte-auth-next:has(#loginForm:not(.hidden)) { display: grid !important; padding: 16px !important; }
  #authScreen.orbyte-auth-next:has(#loginForm:not(.hidden)) .auth-card { min-height: 0 !important; border: 1px solid var(--ui-border) !important; border-radius: 14px !important; }
  #authScreen.orbyte-auth-next:has(#loginForm:not(.hidden)) .legacy-login-shell { grid-template-columns: 1fr !important; }
  #authScreen.orbyte-auth-next:has(#loginForm:not(.hidden)) .legacy-login-pane { padding: 30px 22px 22px !important; }
  #authScreen.orbyte-auth-next:has(#loginForm:not(.hidden)) .legacy-login-aside { padding: 8px 22px 30px !important; }
}

/* Gradient presets must tint the product, not only the settings window. The
   older Discord-compatibility layer otherwise replaces these with fixed gray. */
html[data-orbyte-client="desktop"] body.orbyte-multicolor-theme {
  --ui-theme-rail: color-mix(in srgb,var(--bg-0) 72%,var(--brand) 28%);
  --ui-theme-side: color-mix(in srgb,var(--bg-2) 80%,var(--brand) 20%);
  --ui-theme-canvas: color-mix(in srgb,var(--bg-3) 85%,var(--brand) 15%);
  --ui-theme-raised: color-mix(in srgb,var(--bg-4) 78%,var(--brand) 22%);
  --ui-theme-line: color-mix(in srgb,var(--line) 66%,var(--brand) 34%);
}

html[data-orbyte-client="desktop"] body.orbyte-multicolor-theme #app.app-shell {
  background: var(--ui-theme-canvas) !important;
  background-image: linear-gradient(135deg,var(--ui-theme-canvas),color-mix(in srgb,var(--ui-theme-side) 88%,var(--brand) 12%)) !important;
}

html[data-orbyte-client="desktop"] body.orbyte-multicolor-theme #app :is(.guild-rail) {
  background: var(--ui-theme-rail) !important;
  background-image: linear-gradient(180deg,color-mix(in srgb,var(--ui-theme-rail) 88%,var(--brand) 12%),var(--ui-theme-rail)) !important;
  border-color: var(--ui-theme-line) !important;
}

html[data-orbyte-client="desktop"] body.orbyte-multicolor-theme #app :is(.channel-panel,.member-panel) {
  background: var(--ui-theme-side) !important;
  background-image: linear-gradient(180deg,color-mix(in srgb,var(--ui-theme-side) 94%,var(--brand) 6%),var(--ui-theme-side)) !important;
  border-color: var(--ui-theme-line) !important;
}

html[data-orbyte-client="desktop"] body.orbyte-multicolor-theme #app :is(.chat-panel,#messages,.messages,.ds-friends) {
  background: var(--ui-theme-canvas) !important;
  background-image: linear-gradient(145deg,var(--ui-theme-canvas),color-mix(in srgb,var(--ui-theme-canvas) 88%,var(--brand) 12%)) !important;
  border-color: var(--ui-theme-line) !important;
}

html[data-orbyte-client="desktop"] body.orbyte-multicolor-theme #app :is(.chat-head,.server-head,.me-bar,.composer-wrap) {
  background: color-mix(in srgb,var(--ui-theme-side) 86%,var(--brand) 14%) !important;
  border-color: var(--ui-theme-line) !important;
}

html[data-orbyte-client="desktop"] body.orbyte-multicolor-theme #app :is(.composer,#composer,.ds-friends-search) {
  background: var(--ui-theme-raised) !important;
  border-color: var(--ui-theme-line) !important;
  color: var(--text) !important;
}

html[data-orbyte-client="desktop"] body.orbyte-multicolor-theme #app :is(.channel,.dm-channel,.home-card,.friend-row,.member) {
  border-color: color-mix(in srgb,var(--ui-theme-line) 72%,transparent) !important;
}

html[data-orbyte-client="desktop"] body.orbyte-multicolor-theme #app :is(.channel,.dm-channel,.home-card,.friend-row,.member):hover {
  background: color-mix(in srgb,var(--brand) 15%,var(--ui-theme-raised)) !important;
}

html[data-orbyte-client="desktop"] body.orbyte-multicolor-theme #app :is(.channel,.dm-channel).active,
html[data-orbyte-client="desktop"] body.orbyte-multicolor-theme #app .friend-tabs button.active {
  background: color-mix(in srgb,var(--brand) 28%,var(--ui-theme-raised)) !important;
  color: var(--text) !important;
}

html[data-orbyte-client="desktop"] body.orbyte-multicolor-theme :is(#settingsOverlay,#adminOverlay,#serverSettingsOverlay) :is(.settings-nav,.settings-page,.modal,.modal-head,.modal-body,.settings-grid>div:last-child) {
  background-color: var(--ui-theme-side) !important;
  border-color: var(--ui-theme-line) !important;
}

html[data-orbyte-client="desktop"] body.orbyte-multicolor-theme #settingsOverlay :is(.theme-card,.settings-item,.settings-row,.security-card,.case-card,.home-card,.orbyte-layout-choice) {
  background: var(--ui-theme-raised) !important;
  border-color: var(--ui-theme-line) !important;
}

html[data-orbyte-client="desktop"] body.orbyte-multicolor-theme :is(.btn,.head-btn):not(.danger),
html[data-orbyte-client="desktop"] body.orbyte-multicolor-theme #app .btn:not(.danger) {
  border-color: color-mix(in srgb,var(--brand) 55%,var(--ui-theme-line)) !important;
}

/* Mobile conversation UI --------------------------------------------------
   One calm, theme-aware scrolling list. Sent and received messages use the
   same left edge on purpose; identity stays explicit through avatar + name. */
@media (max-width: 820px) {
  html[data-orbyte-client="mobile"] {
    color-scheme: dark light;
    --mobile-chat-gutter: 14px;
    --mobile-avatar-size: 38px;
  }

  html[data-orbyte-client="mobile"] body,
  html[data-orbyte-client="mobile"] body #app.app-shell,
  html[data-orbyte-client="mobile"] body .chat-panel {
    background: var(--ui-canvas) !important;
    color: var(--ui-text) !important;
  }

  html[data-orbyte-client="mobile"] body :is(.chat-head, .mobile-page-header) {
    min-height: calc(56px + env(safe-area-inset-top)) !important;
    padding-top: env(safe-area-inset-top) !important;
    background: color-mix(in srgb, var(--ui-sidebar) 94%, transparent) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
    box-shadow: none !important;
    backdrop-filter: blur(20px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(135%) !important;
  }

  html[data-orbyte-client="mobile"] body #messages,
  html[data-orbyte-client="mobile"] body .messages {
    display: block !important;
    min-width: 0 !important;
    padding: 10px 0 max(18px, env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overflow-anchor: none !important;
    overscroll-behavior-y: contain !important;
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: touch !important;
    background: var(--ui-canvas) !important;
    color: var(--ui-text) !important;
  }

  /* Deliberately includes common own/self variants used by older clients. */
  html[data-orbyte-client="mobile"] body #messages > .message,
  html[data-orbyte-client="mobile"] body #messages > .message.own,
  html[data-orbyte-client="mobile"] body #messages > .message.mine,
  html[data-orbyte-client="mobile"] body #messages > .message.self,
  html[data-orbyte-client="mobile"] body #messages > .message[data-own="true"],
  html[data-orbyte-client="mobile"] body #messages > .message[data-self="true"] {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    display: grid !important;
    grid-template-columns: var(--mobile-avatar-size) minmax(0, 1fr) !important;
    align-items: start !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    justify-content: start !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 9px var(--mobile-chat-gutter) !important;
    gap: 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
    transform: none !important;
  }

  html[data-orbyte-client="mobile"] body #messages > .message:active {
    background: var(--ui-hover) !important;
  }

  html[data-orbyte-client="mobile"] body #messages > .message > :is(.avatar, .message-hover-time) {
    grid-column: 1 !important;
    justify-self: start !important;
  }

  html[data-orbyte-client="mobile"] body #messages > .message > .avatar {
    position: relative !important;
    inset: auto !important;
    width: var(--mobile-avatar-size) !important;
    height: var(--mobile-avatar-size) !important;
    min-width: var(--mobile-avatar-size) !important;
    border-radius: 50% !important;
  }

  html[data-orbyte-client="mobile"] body #messages > .message > .message-hover-time {
    width: var(--mobile-avatar-size) !important;
    padding-top: 3px !important;
    color: var(--ui-faint) !important;
    font-size: 10px !important;
    text-align: center !important;
  }

  html[data-orbyte-client="mobile"] body #messages > .message > .message-body {
    grid-column: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  html[data-orbyte-client="mobile"] body #messages .message-meta {
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 6px !important;
    text-align: left !important;
  }

  html[data-orbyte-client="mobile"] body #messages .message-author {
    color: var(--ui-text) !important;
    font-size: 14px !important;
    font-weight: 680 !important;
  }

  html[data-orbyte-client="mobile"] body #messages :is(
    .message-content, .message-attachments, .reply-preview, .message-reactions,
    .system-message-card, .poll-card, .orbyte-rich-embed, .link-embed,
    .voice-message-card, .orbyte-audio-player
  ) {
    align-self: flex-start !important;
    justify-self: start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
    transform: none !important;
  }

  html[data-orbyte-client="mobile"] body #messages .message-content {
    width: auto !important;
    max-width: 100% !important;
    color: var(--ui-text) !important;
    font-size: 15px !important;
    line-height: 1.42 !important;
  }

  html[data-orbyte-client="mobile"] body #messages :is(.reply-preview, .system-message-card) {
    max-width: 100% !important;
    border-color: var(--ui-border) !important;
    background: color-mix(in srgb, var(--ui-accent) 9%, var(--ui-surface)) !important;
    border-radius: 10px !important;
  }

  html[data-orbyte-client="mobile"] body #messages :is(.reaction-chip, .reaction, .reaction-pill) {
    min-height: 30px !important;
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
  }

  /* Neutralize the optional iMessage mode's bubble positioning on phones. */
  html[data-orbyte-client="mobile"][data-ui-layout="imessage"] body.mobile-chat-open #messages > .message {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 9px var(--mobile-chat-gutter) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  html[data-orbyte-client="mobile"] body .composer-wrap {
    padding: 8px 10px max(8px, env(safe-area-inset-bottom)) !important;
    background: color-mix(in srgb, var(--ui-sidebar) 96%, transparent) !important;
    border-top: 1px solid var(--ui-border) !important;
  }

  html[data-orbyte-client="mobile"] body .composer {
    min-height: 48px !important;
    margin: 0 !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 16px !important;
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    box-shadow: none !important;
  }

  html[data-orbyte-client="mobile"] body .composer :is(button, textarea, input) {
    min-height: 44px !important;
  }

  html[data-orbyte-client="mobile"] body :is(.mobile-bottom-nav, #mobileBottomNav) {
    background: color-mix(in srgb, var(--ui-sidebar) 96%, transparent) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
  }

  html[data-orbyte-client="mobile"] body :is(.mobile-bottom-nav, #mobileBottomNav) button.active {
    background: var(--ui-selected) !important;
    color: var(--ui-text) !important;
  }
}

/* The Home rail remains visible beside the DM list, including when the
   design-system layout is enabled. Messages themselves stay in one pane. */
@media (max-width: 820px) {
  html[data-orbyte-client="mobile"] body.mobile-tab-messages:not(.mobile-chat-open) .guild-rail {
    display: flex !important;
    visibility: visible !important;
    width: 58px !important;
    left: 0 !important;
    right: auto !important;
    z-index: 30 !important;
  }
  html[data-orbyte-client="mobile"] body.mobile-tab-messages:not(.mobile-chat-open) .channel-panel { display: none !important; }
  html[data-orbyte-client="mobile"] body.mobile-tab-messages:not(.mobile-chat-open) #mobileMessagesPage {
    display: flex !important;
    left: 58px !important;
    right: 0 !important;
    width: calc(100vw - 58px) !important;
    max-width: none !important;
  }
  html[data-orbyte-client="mobile"] body.mobile-tab-messages:not(.mobile-chat-open) #orbyteInboxRailButton {
    display: grid !important;
    visibility: visible !important;
  }
  html[data-orbyte-client="mobile"] body.mobile-tab-messages:not(.mobile-chat-open) .guild-rail > #homeBtn,
  html[data-orbyte-client="mobile"] body.mobile-tab-messages:not(.mobile-chat-open) .guild-rail > #dmRailList,
  html[data-orbyte-client="mobile"] body.mobile-tab-messages:not(.mobile-chat-open) .guild-rail > .rail-separator { display: none !important; }
}

/* Light mode covers the app's older hard-coded mobile surfaces too. */
html[data-orbyte-client="mobile"][data-theme="light"] body :is(
  .guild-rail, .channel-panel, .chat-panel, .chat-head, #messages, .messages,
  #mobileMessagesPage, #mobileNotificationsPage, #mobileYouPage, .mobile-page-header,
  .mobile-page-scroll, .mobile-friends-toolbar, .mobile-friends-list, .mobile-dm-row,
  .mobile-friend-row, .mobile-notification-row, .composer, .composer-wrap,
  .mobile-bottom-nav, #mobileBottomNav, .mobile-server-hero
) {
  background-color: var(--ui-canvas) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
}
html[data-orbyte-client="mobile"][data-theme="light"] body :is(.guild-rail, .mobile-bottom-nav, #mobileBottomNav, .mobile-page-header) {
  background-color: var(--ui-sidebar) !important;
}
html[data-theme="light"] body :is(.mobile-empty-state, .mobile-dm-preview, .mobile-friend-pending) { color: var(--ui-muted) !important; }

/* DMs use the same left aligned, scrollable message rows as server channels. */
html[data-orbyte-client="mobile"] body.mobile-chat-open.mobile-chat-dm #app .messages > .message > .message-body {
  align-items: flex-start !important;
  width: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ui-text) !important;
  box-shadow: none !important;
}
html[data-orbyte-client="mobile"] body.mobile-chat-open.mobile-chat-dm #app .messages > .message.own > .message-body {
  margin-left: 0 !important;
  background: transparent !important;
  color: var(--ui-text) !important;
}

/* Center the refreshed login and signup flows over the supplied backdrop. */
html[data-orbyte-client] #authScreen.auth-screen {
  display: grid !important;
  place-items: center !important;
  min-height: 100dvh !important;
  padding: 24px !important;
  background: linear-gradient(115deg, rgba(8,9,18,.60), rgba(8,9,18,.42)), url('/assets/login/backround.png') center / cover no-repeat fixed !important;
}
html[data-orbyte-client] #authScreen.auth-screen .auth-card {
  width: min(900px, 100%) !important;
  max-width: 900px !important;
  margin: auto !important;
  justify-self: center !important;
}
html[data-orbyte-client] #authScreen.auth-screen .signup-mode { max-height: calc(100dvh - 48px) !important; overflow: auto !important; }

html[data-orbyte-client] #orbyteNativeAlert.overlay:not(.hidden) { display: grid !important; place-items: center !important; position: fixed !important; inset: 0 !important; z-index: 99999 !important; background: var(--ui-overlay) !important; }
html[data-orbyte-client] #orbyteNativeAlert .ui-dialog-modal { width: min(420px, calc(100vw - 32px)) !important; padding: 22px !important; border-radius: 16px !important; }
html[data-orbyte-client] #orbyteNativeAlert .actions { display: flex; justify-content: flex-end; margin-top: 20px; }

#profileOverlay .orbyte-game-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0 16px; }
#profileOverlay .orbyte-game-head h3 { margin:0; font-size:19px; }
#profileOverlay .orbyte-game-head p { margin:4px 0 0; color:var(--ui-muted); font-size:13px; }
#profileOverlay .orbyte-game-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
#profileOverlay .orbyte-game-card { display:flex; align-items:center; gap:12px; min-width:0; padding:10px; border:1px solid var(--ui-border); border-radius:14px; background:var(--ui-surface); color:var(--ui-text); }
#profileOverlay .orbyte-game-card>img,#profileOverlay .orbyte-game-cover { width:64px; height:76px; flex:none; border-radius:9px; object-fit:cover; background:var(--ui-raised); }
#profileOverlay .orbyte-game-cover { display:grid; place-items:center; font-size:25px; }
#profileOverlay .orbyte-game-card>div:nth-child(2) { display:grid; gap:4px; min-width:0; flex:1; }
#profileOverlay .orbyte-game-card strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#profileOverlay .orbyte-game-card span,#profileOverlay .orbyte-game-card small { color:var(--ui-muted); font-size:12px; }
#profileOverlay .orbyte-game-card button { align-self:flex-start; border:0; background:transparent; color:var(--ui-muted); font-size:21px; cursor:pointer; }
#profileOverlay .orbyte-game-add-form { display:grid; gap:10px; margin-top:16px; padding:15px; border:1px solid var(--ui-border); border-radius:14px; background:var(--ui-sidebar); }
#profileOverlay .orbyte-game-add-form[hidden] { display:none; }
#profileOverlay .orbyte-game-add-form label { display:grid; gap:6px; color:var(--ui-muted); font-size:12px; font-weight:700; }
#profileOverlay .orbyte-game-add-form input { min-width:0; min-height:40px; padding:8px 10px; border:1px solid var(--ui-border); border-radius:9px; background:var(--ui-canvas); color:var(--ui-text); }
#profileOverlay .orbyte-game-add-form>div { display:flex; justify-content:flex-end; gap:8px; }
@media(max-width:650px) { #profileOverlay .orbyte-game-grid { grid-template-columns:1fr; } #profileOverlay .orbyte-game-head { align-items:flex-start; flex-direction:column; } }

@media (max-width: 820px) and (prefers-reduced-transparency: reduce) {
  html[data-orbyte-client="mobile"] body :is(.chat-head, .mobile-page-header, .composer-wrap, .mobile-bottom-nav, #mobileBottomNav) {
    background: var(--ui-sidebar) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Exactly four phone destinations. "Home" keeps the existing server rail and
   its Direct Messages entry together, matching the combined Discord pattern. */
@media (max-width: 820px) {
  html[data-orbyte-client="mobile"] body #mobileBottomNav,
  html[data-orbyte-client="mobile"] body #mobileBottomNav > .liquid-glass__content {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-columns: auto !important;
  }

  html[data-orbyte-client="mobile"] body #mobileBottomNav :is(
    [data-mobile-tab="messages"], [data-mobile-tab="feed"]
  ) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html[data-orbyte-client="mobile"] body #mobileBottomNav [data-mobile-tab="map"] { order: 1 !important; }
  html[data-orbyte-client="mobile"] body #mobileBottomNav [data-mobile-tab="servers"] { order: 2 !important; }
  html[data-orbyte-client="mobile"] body #mobileBottomNav [data-mobile-tab="notifications"] { order: 3 !important; }
  html[data-orbyte-client="mobile"] body #mobileBottomNav [data-mobile-tab="you"] { order: 4 !important; }

  html[data-orbyte-client="mobile"] body #mobileBottomNav :is(
    [data-mobile-tab="map"], [data-mobile-tab="servers"],
    [data-mobile-tab="notifications"], [data-mobile-tab="you"]
  ) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    min-width: 0 !important;
  }

  html[data-orbyte-client="mobile"] body.mobile-tab-servers:not(.mobile-chat-open) .guild-rail > #homeBtn {
    display: flex !important;
  }

  /* DMs live in the first, top-left rail slot — never as a fifth tab. */
  html[data-orbyte-client="mobile"] body.mobile-tab-servers:not(.mobile-chat-open) .guild-rail #orbyteInboxRailButton {
    position: sticky !important;
    top: 0 !important;
    z-index: 8 !important;
    order: -100 !important;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    flex: 0 0 50px !important;
    margin: 0 0 4px !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 16px !important;
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    box-shadow: 0 5px 16px color-mix(in srgb, var(--ui-app) 35%, transparent) !important;
  }

  html[data-orbyte-client="mobile"] body.mobile-tab-servers:not(.mobile-chat-open) .guild-rail #orbyteInboxRailButton.active {
    background: var(--ui-accent) !important;
    color: white !important;
  }

  /* Exactly one visual in You: the real avatar when available, otherwise the icon. */
  html[data-orbyte-client="mobile"] body #mobileBottomNav [data-mobile-tab="you"] img.r409-nav-avatar[hidden],
  html[data-orbyte-client="mobile"] body #mobileBottomNav [data-mobile-tab="you"] img.r409-nav-avatar:not([src]),
  html[data-orbyte-client="mobile"] body #mobileBottomNav [data-mobile-tab="you"] img.r409-nav-avatar[src=""] {
    display: none !important;
  }

  html[data-orbyte-client="mobile"] body #mobileBottomNav [data-mobile-tab="you"].has-avatar > :is(svg, i[data-lucide], .ob-you-fallback) {
    display: none !important;
  }

  html[data-orbyte-client="mobile"] body #mobileBottomNav [data-mobile-tab="you"] .r409-nav-avatar {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
  }

  /* Mobile performance: isolate long rows and keep one predictable Y scroller. */
  html[data-orbyte-client="mobile"] body :is(
    #messages > .message, .mobile-dm-row, .mobile-notification-row,
    .channel, .member, #guildList > .guild
  ) {
    content-visibility: auto !important;
    contain: layout paint style !important;
    contain-intrinsic-size: auto 64px !important;
  }

  html[data-orbyte-client="mobile"] body :is(
    #messages, #mobileMessagesScroll, #mobileNotificationsPage .mobile-page-scroll,
    #mobileYouScroll, .channel-scroll
  ) {
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: auto !important;
  }

  html[data-orbyte-client="mobile"] body :is(button, [role="button"], .channel, .guild) {
    touch-action: manipulation !important;
  }
}

html[data-orbyte-client="mobile"].orbyte-perf-lite body :is(
  .mobile-page-header, .chat-head, .composer-wrap, #mobileBottomNav
),
html[data-orbyte-client="mobile"].orbyte-perf-severe body :is(
  .mobile-page-header, .chat-head, .composer-wrap, #mobileBottomNav
) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}