apps/desktop/src/renderer/styles/chat-header.css

/* ============================================================================
   Chat header bar + chat shell layout
   ----------------------------------------------------------------------------
   #546 PR2 (relocate — zero visual change) split the overlay surfaces that
   used to live here into their own files: toast.css, palette.css, help.css,
   error.css, hero.css. The composer streaming top-sweep moved to
   composer.css. What remains is the header bar (`.maka-chat-header`), the
   #1032 composer-adjacent health notice, and the chat shell layout
   (`.maka-chat-shell` / `.maka-chatViewport` / `.maka-chatContent` /
   `.maka-chat-jump-bottom`). The header status cluster was removed.     */


.maka-chat-header {
  height: 32px;
  display: flex;
  align-items: flex-end;
  gap: var(--space-1);
  /* The header is also a drag strip, so its box must stop before the
     absolutely-positioned .maka-workspace-top-actions toolbar instead of
     merely padding content away from it. Otherwise the transparent drag
     region covers the titlebar icon buttons. */
  margin-right: var(--maka-workspace-top-actions-inset);
  padding: 0 var(--space-2-5);
  background: transparent;
  border-bottom: 0;
  transition: margin-left var(--duration-large) var(--ease-drawer);
  -webkit-app-region: drag;
}

.maka-shell-2col[data-sidebar-state="collapsed"] .maka-chat-header {
  margin-left: var(--maka-sidebar-collapsed-topbar-inset);
}

/* #1032: hard-block session health notice sits above the composer,
   outside the message scroll area (sibling of maka-composer-interaction-slot).
   It is a peer of the composer form, so it must resolve to the SAME box as the
   composer card: capped at the chat measure, centered, and inset by the
   composer's own `--space-6` gutters. The old `margin: 0 var(--space-3)` left it
   uncapped, so on a wide window the notice ran the full chat column while the
   composer stayed at 680px — a visibly mismatched edge. Same formula as
   `.maka-composer-no-model-hint` / `.maka-composer-revision-notice`. */
.maka-session-health-notice {
  width: min(var(--maka-chat-measure), calc(100% - (2 * var(--space-6))));
  max-width: var(--maka-chat-measure);
  margin: 0 auto var(--space-2);
  -webkit-app-region: no-drag;
}

.maka-session-health-notice-alert {
  width: 100%;
  box-sizing: border-box;
}

.maka-session-health-notice-action {
  appearance: none;
  border: var(--border-width-hairline) solid oklch(from var(--border) l c h / 0.9);
  background: var(--background-elevated);
  color: var(--foreground);
  border-radius: var(--radius-surface);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  cursor: default;
}

.maka-session-health-notice-action:hover {
  background: var(--state-hover-bg);
}

.maka-session-health-notice-action:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* PR-REMOVE-CHAT-TAB (WAWQAQ msg d401938d 2026-06-23): the
   browser-style session tab + the duplicate "新建对话" plus button at
   the top-left of the chat header are removed. ~95 LOC of .maka-chat-tab*
   rules came out with them. Session name + model live in the sidebar;
   create-session lives in the sidebar new-task button. */

.maka-chat-header-spacer {
  flex: 1;
}

/* PR-MEMORY-VISIBILITY-INDICATOR-0: small clickable pill that fires
   when local MEMORY.md is being injected into the agent's system
   prompt. Tone matches the existing info badge family. */
.maka-chat-header-memory-pill {
  appearance: none;
  background: oklch(from var(--nav-active) l c h / 0.10);
  border: var(--border-width-hairline) solid oklch(from var(--nav-active) l c h / 0.25);
  color: var(--nav-active);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 1px var(--space-1-5);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  -webkit-app-region: no-drag;
  margin-right: var(--space-1);
  margin-bottom: var(--space-0-5);
  white-space: nowrap;
  flex: 0 0 auto;
}

.maka-chat-header-memory-pill:hover {
  background: oklch(from var(--nav-active) l c h / 0.18);
}

.maka-chat-header-memory-pill:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.maka-chat-header-mode-pill {
  border: var(--border-width-hairline) solid oklch(from var(--info) l c h / 0.32);
  background: oklch(from var(--info) l c h / 0.10);
  color: var(--info-text);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 1px var(--space-1-5);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  -webkit-app-region: no-drag;
  margin-right: var(--space-1);
  margin-bottom: var(--space-0-5);
  white-space: nowrap;
  flex: 0 0 auto;
}

.maka-chat-header-mode-pill svg {
  flex: 0 0 auto;
}

/* Goal kill-switch pill: an active autonomous loop is warning-tinted (not the
   neutral info tone of the deep-research pill) and clears the goal on click.
   No `cursor: pointer` — native convention reserves the hand for links; the
   pill is a UiButton and uses the default arrow like every other control. */
.maka-chat-header-mode-pill[data-mode="goal"] {
  border-color: oklch(from var(--warning) l c h / 0.38);
  background: oklch(from var(--warning) l c h / 0.12);
  color: var(--warning-text);
}
.maka-chat-header-mode-pill[data-mode="goal"]:hover {
  background: oklch(from var(--warning) l c h / 0.18);
}

.messages {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

.maka-chatViewport {
    height: 100%;
    overscroll-behavior: contain;
  }

.maka-chatContent {
    position: relative;
    min-height: 100%;
    padding-inline: clamp(var(--space-6), 4vw, var(--space-10));
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

.maka-chat-shell {
    position: relative;
    min-height: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
  }

.maka-chat-jump-bottom {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: var(--h-control-md);
    height: var(--h-control-md);
    display: grid;
    place-items: center;
    border: var(--border-width-hairline) solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--background);
    color: var(--foreground-secondary);
  box-shadow: var(--shadow-medium);
  opacity: 1;
  transition:
    transform var(--duration-emphasized) var(--ease-out-strong),
    opacity var(--duration-emphasized) var(--ease-out-strong),
    background var(--duration-quick) var(--ease-out-strong);
  }

.maka-chat-jump-bottom:hover {
    color: var(--foreground);
    background: var(--state-hover-bg);
    transform: translateX(-50%) translateY(var(--lift-hover));
  }

.maka-chat-jump-bottom:active {
    transform: translateX(-50%);
    background: var(--state-selected-bg);
  }