/*
  CHAT_TOPBAR_NEUTRAL_V1
  Topbar-only visual override for /chat.

  Scope:
  - Topbar background/border/spacing
  - Model pill
  - Share/settings/incognito/topbar icon buttons
  - Topbar dropdown surfaces

  Rollback:
  Remove the chat-neutral-dark-v3.css <link> from auth/authstatic/chat.html.
*/

[data-theme="dark"] {
  --topbar-neutral-bg: rgba(32,32,32,.45);  /* GLASS_TOPBAR_V1: was .92 (near-solid) - lower alpha so the blur(20px)+saturate frost actually shows content through */
  --topbar-neutral-hover: rgba(255,255,255,.065);
  --topbar-neutral-border: rgba(255,255,255,.055);
  --topbar-neutral-text: #c6c6c6;
  --topbar-neutral-text-strong: #ececec;
  --topbar-neutral-muted: #9b9b9b;
  --topbar-neutral-dot: #9aa59a;
}

.topbar {
  height: calc(44px + var(--safe-t));
  padding: 0 18px;
  padding-top: var(--safe-t);
  background: var(--topbar-neutral-bg, var(--bg-glass));
  border-bottom: 0;  /* GLASS_TOPBAR_V1: bottom hairline drawn via chat-refine box-shadow so the border doesn't eat the content box and shift buttons 1px up (6.5/7.5 -> 7/7) */
  gap: 8px;
}

.mode-wrap {
  margin: 0;
}

.mode-pill {
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--topbar-neutral-text, var(--tx-2));
  padding: 0 9px;
  font-family: var(--font-b);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
}

.mode-pill:hover,
.mode-pill.open {
  background: var(--topbar-neutral-hover, var(--bg-3));
  border-color: transparent;
  color: var(--topbar-neutral-text-strong, var(--tx));
}

.mode-pill .chev {
  display: none;
}

.topbar .model-dot {
  width: 7px;
  height: 7px;
  box-shadow: none !important;
}

.topbar .model-dot.adaptive {
  background: var(--topbar-neutral-dot, var(--adaptive));
}

.top-right {
  gap: 4px;
}

.top-btn,
.top-ico,
.top-menu,
.top-expand {
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--topbar-neutral-text, var(--tx-2));
  font-family: var(--font-b);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
}

.top-btn {
  padding: 0 9px;
}

.top-btn:hover,
.top-ico:hover,
.top-menu:hover,
.top-expand:hover {
  background: var(--topbar-neutral-hover, var(--bg-3));
  border-color: transparent;
  color: var(--topbar-neutral-text-strong, var(--tx));
}

.top-btn svg,
.top-ico svg,
.top-menu svg,
.top-expand svg {
  color: currentColor;
}

.mode-dd {
  background: var(--bg-1);
  border-color: var(--brd);
  border-radius: 12px;
  box-shadow: var(--sh-lg);
}

.mode-opt:hover,
.mode-opt.on {
  background: var(--bg-2);
}

.mo-label,
.mo-name {
  color: var(--tx);
  font-weight: 600;
}

.mo-sub,
.mo-desc {
  color: var(--tx-3);
}

@media (max-width: 768px) {
  .topbar {
    height: calc(48px + var(--safe-t));
    padding-left: 10px;
    padding-right: 10px;
  }
}