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: palette.css, help.css,
   error.css, hero.css. The composer streaming top-sweep moved to
   composer.css. What remains is the unified session context layer, the #1032
   composer-adjacent health notice, and the chat shell layout
   (`.maka-chat-shell` / `.maka-chatContent`). Astryx ChatLayout owns the
   scroll container, dock, blur layer, and scroll-to-bottom control. */


/* #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 plus Astryx balanced dock's `--space-3`.
   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`.

   #1629: the boundary-unreadable notice stands in for the composer it replaces,
   so it is the same kind of peer and shares the formula rather than restating
   it. `.maka-session-health-notice` stays last in each group — the
   session-health-notice layout contract reads its rule body by matching the
   selector immediately before the brace. */
.maka-boundary-unreadable-notice,
.maka-workspace-readiness-notice,
.maka-session-health-notice {
  width: min(
    var(--maka-chat-measure),
    calc(100% - (2 * var(--space-6)) - (2 * var(--space-3)))
  );
  max-width: var(--maka-chat-measure);
  margin: 0 auto var(--space-2);
  -webkit-app-region: no-drag;
}

.maka-boundary-unreadable-notice-alert,
.maka-workspace-readiness-notice-alert,
.maka-session-health-notice-alert {
  width: 100%;
  box-sizing: border-box;
}

/* 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. */

/* Session lineage, revisions, modes, and autonomous-goal state share one
   structural layer. The layer is omitted when no extra context exists. */
.maka-session-context {
  flex: 0 0 auto;
  min-width: 0;
  /* Visual System 2.0 (T2): same pixels, findable name. This band is flush
     inside the conversation plate, so it paints the plate's own tier — the
     point is that it stays INVISIBLE against it. `--background` resolves here
     too (DESIGN.md §2 lists it as a raised alias), but it reads like "the page
     color" at a call site, which is the one thing it is not. */
  background: var(--surface-raised);
  container-type: inline-size;
  -webkit-app-region: no-drag;
}

.maka-session-context__inner {
  min-width: 0;
  min-height: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1-5) var(--space-3);
}

.maka-session-context__lineage,
.maka-session-context__cluster {
  min-width: 0;
}

.maka-session-context__breadcrumbs {
  min-width: 0;
  overflow: hidden;
}

.maka-session-context__breadcrumbs > ol {
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}

.maka-session-context__breadcrumbs > ol > li {
  min-width: 0;
  overflow: hidden;
}

.maka-session-context__breadcrumb-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maka-session-context__cluster {
  width: min(100%, 560px);
  justify-self: end;
}

.maka-session-context__item,
.maka-session-context__revision,
.maka-session-context__goal {
  min-width: 0;
  display: inline-flex;
  align-items: center;
}

.maka-session-context__revision,
.maka-session-context__goal {
  gap: var(--space-1);
  white-space: nowrap;
}

@container (max-width: 620px) {
  .maka-session-context__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  .maka-session-context__cluster {
    width: 100%;
    justify-self: stretch;
  }
}

@container (max-width: 420px) {
  .maka-session-context__inner {
    padding-inline: var(--space-2);
  }
}

.maka-chatContent {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding-inline: clamp(var(--space-3), 4vw, var(--space-10));
}

.maka-chat-layout {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
}

/*
 * Compatibility with Astryx #2573 until its fixed ChatLayout ships in a
 * stable package. Published 0.2.0 gives the message area min-height: 100%,
 * then adds the in-flow dock below it, creating a dock-height phantom range.
 * These are the upstream flex contracts and can be removed on that upgrade.
 */
.maka-chat-layout > :first-child {
  min-height: 0;
  flex: 1 0 auto;
}

.maka-chat-layout > :last-child {
  flex-shrink: 0;
}

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