/* Shared navigation surfaces. */
.bottom-nav {
  border-color: var(--color-border) !important;
  background: var(--color-chrome) !important;
  box-shadow: var(--shadow-card) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-app-theme] main.module-shell > .app-page > .top-card,
body[data-app-theme] main.module-shell .top-card,
body[data-app-theme][data-view="chat"] .chat-head {
  border-color: var(--color-border) !important;
  background: var(--color-chrome) !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-app-theme] main.module-shell .top-card h2,
body[data-app-theme] main.module-shell .top-card button,
body[data-app-theme][data-view="chat"] .chat-head button,
body[data-app-theme][data-view="chat"] .chat-head .material-symbols-outlined {
  color: var(--color-text) !important;
  -webkit-text-fill-color: var(--color-text) !important;
}

body[data-app-theme][data-view="chat"] .chat-head .chat-back,
body[data-app-theme][data-view="chat"] .chat-head .chat-back .material-symbols-outlined {
  color: var(--color-accent) !important;
  -webkit-text-fill-color: var(--color-accent) !important;
}

.bottom-nav button,
.bottom-nav button:not(.chat-orb) {
  color: var(--color-text-muted) !important;
}

.bottom-nav button.active {
  color: var(--color-accent) !important;
}

.bottom-nav .chat-orb,
.bottom-nav .chat-orb.active {
  background: var(--nav-chat-active) !important;
  color: var(--color-on-accent) !important;
  box-shadow: var(--shadow-card) !important;
}

.bottom-nav .chat-orb span.material-symbols-outlined,
.bottom-nav .chat-orb.active span.material-symbols-outlined,
.bottom-nav .chat-orb small,
.bottom-nav .chat-orb.active small {
  color: var(--color-on-accent) !important;
  -webkit-text-fill-color: var(--color-on-accent) !important;
}