@genesislcap/ai-assistant 15.19.0 → 15.19.1

package/src/main/main.styles.ts

@@ -1,995 +0,0 @@
-import { css } from '@genesislcap/web-core';
-import { settingsModalStyles } from '../components/settings-modal/settings-modal.styles';
-import {
-  AI_COLOUR_AMBER,
-  AI_COLOUR_CYAN,
-  AI_COLOUR_PINK,
-  AI_COLOUR_VIOLET,
-} from '../styles/ai-colours';
-import { menuItemStyles } from '../styles/menu';
-
-const baseStyles = css`
-  :host {
-    /* Shared max width for the conversation column and the composer, so they stay
-       aligned. Override on the host to change both at once. NOTE: the @container
-       threshold that floats the composer can't read this (container queries can't
-       use custom properties), so if you override this below the 1500px default the
-       float still triggers at 1500px. */
-    --ai-conversation-max-width: 1500px;
-
-    /* INTERNAL — not a supported override point, despite sitting beside one.
-       Deliberately NOT --ai-*-namespaced and absent from docs/styling.md: the
-       documented banner surface is ::part(blocked-banner), and this token is
-       plumbing, not a knob. It is the banner's block margin AND the exact
-       amount the resize handle pulls itself up by when it follows the banner —
-       one name, on the host only because a sibling cannot read a custom
-       property declared on the banner (they inherit downward), so the
-       cancellation is structural: change the gap here and both rules move
-       together, instead of two magnitudes ~80 lines apart that only prose kept
-       in sync. A host that overrides it anyway gets a consistent gap, but that
-       is a side effect, not a promise. */
-    --blocked-banner-gap: calc(var(--design-unit) * 1px);
-
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    width: 100%;
-    font-family: var(--body-font);
-    color: var(--neutral-foreground-rest);
-  }
-
-  .chat-wrapper {
-    container-type: inline-size;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: hidden;
-    background-color: var(--neutral-layer-1);
-    border: 1px solid var(--neutral-stroke-rest);
-    border-radius: var(--control-corner-radius) * 1px;
-  }
-
-  .chat-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 3px);
-    border-bottom: 1px solid var(--neutral-stroke-rest);
-    background-color: var(--neutral-layer-2);
-  }
-
-  .chat-header.draggable {
-    cursor: move;
-    user-select: none;
-  }
-
-  .chat-title {
-    font-weight: bold;
-    font-size: 1.2em;
-  }
-
-  .header-actions {
-    display: flex;
-    align-items: center;
-    gap: 2px;
-    margin-left: auto;
-  }
-
-  .settings-button,
-  .popout-button {
-    font-size: 1.2em;
-  }
-
-  ::slotted([slot='header-actions-extra']) {
-    font-size: 1.2em;
-  }
-
-  .splash-wrapper {
-    position: absolute;
-    inset: 0;
-    z-index: 10;
-    overflow: hidden;
-    pointer-events: none;
-  }
-
-  ::slotted([slot='splash']) {
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-
-  .messages {
-    flex: 1;
-
-    /* Allow the scroll area to shrink below its content height so a grown
-       composer (drag-to-resize) takes space from here instead of overflowing
-       the column and clipping the input row's buttons. */
-    min-height: 0;
-    overflow-y: auto;
-    padding: 10px;
-  }
-
-  /* Caps and centres the conversation column inside the (full-width) scroll
-     container, so the scrollbar stays at the panel edge while the messages sit
-     in a readable-width column. Exposed as part="messages-content" so a host
-     can widen it (::part(messages-content) { max-width: none }) or neutralise
-     the wrapper entirely (::part(messages-content) { display: contents }). */
-  .messages-content {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--design-unit) * 2.5px);
-    width: 100%;
-    max-width: var(--ai-conversation-max-width);
-    margin-inline: auto;
-  }
-
-  @keyframes slide-in-right {
-    from {
-      opacity: 0%;
-      transform: translateX(16px);
-    }
-
-    to {
-      opacity: 100%;
-      transform: translateX(0);
-    }
-  }
-
-  @keyframes slide-in-left {
-    from {
-      opacity: 0%;
-      transform: translateX(-16px);
-    }
-
-    to {
-      opacity: 100%;
-      transform: translateX(0);
-    }
-  }
-
-  @keyframes thinking-ring {
-    0% {
-      transform: scale(1);
-      opacity: 60%;
-    }
-
-    100% {
-      transform: scale(1.8);
-      opacity: 0%;
-    }
-  }
-
-  .agent-switch-indicator {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin: 8px 0;
-    color: var(--neutral-foreground-hint, var(--neutral-foreground-rest));
-    opacity: 60%;
-    font-size: 0.75em;
-  }
-
-  .agent-switch-indicator::before,
-  .agent-switch-indicator::after {
-    content: '';
-    flex: 1;
-    height: 1px;
-    background: currentColor;
-  }
-
-  .agent-switch-label {
-    white-space: nowrap;
-  }
-
-  .message-row {
-    display: flex;
-    align-items: flex-start;
-    gap: 8px;
-  }
-
-  .message-row.user {
-    flex-direction: row-reverse;
-    animation: slide-in-right 0.25s ease-out;
-  }
-
-  .message-row.ai,
-  .message-row.ai-thinking,
-  .message-row.ai-function {
-    animation: slide-in-left 0.25s ease-out;
-  }
-
-  .message-row.interaction {
-    flex-direction: column;
-    animation: slide-in-left 0.25s ease-out;
-  }
-
-  /* A 'bubble' interaction reads like a normal assistant message: avatar to the
-     left, bubble to the right — not the full-width column the other interaction
-     presentations use. */
-  .message-row.interaction.present-bubble {
-    flex-direction: row;
-  }
-
-  .avatar {
-    position: relative;
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    background-color: var(--neutral-layer-3);
-    border: 1px solid var(--neutral-stroke-rest);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    font-size: 1em;
-    overflow: hidden;
-  }
-
-  .avatar.ai-thinking {
-    border-color: var(--ai-thinking-color, #7c3aed);
-    overflow: visible;
-  }
-
-  .avatar.ai-thinking::before,
-  .avatar.ai-thinking::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    border-radius: 50%;
-    border: 2px solid var(--ai-thinking-color, #7c3aed);
-    animation: thinking-ring 1.5s ease-out infinite;
-  }
-
-  .avatar.ai-thinking::after {
-    animation-delay: 0.75s;
-  }
-
-  .avatar-img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 50%;
-  }
-
-  .avatar-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-  }
-
-  .avatar-icon svg {
-    /* !important so a consumer-supplied SVG's own inline width/height/style
-       cannot break out of the avatar bounds. */
-    width: 84% !important;
-    height: 84% !important;
-  }
-
-  .message {
-    padding: calc(var(--design-unit) * 2.5px) calc(var(--design-unit) * 3.5px);
-    max-width: 80%;
-    min-width: 70px;
-    font-family: var(--body-font);
-    font-size: 1.1em;
-
-    /* Long unbroken strings (URLs, file paths, tokens, base64) wrap instead of
-       overflowing the bubble. overflow-wrap: anywhere also lets the bubble shrink
-       below such a string's width in the flex row, preventing horizontal overflow. */
-    overflow-wrap: anywhere;
-    word-break: break-word;
-  }
-
-  .message.user {
-    background: linear-gradient(
-      135deg,
-      var(--accent-fill-rest) 0%,
-      color-mix(in srgb, var(--accent-fill-rest) 70%, black) 100%
-    );
-
-    /* The on-accent foreground token that pairs with the --accent-fill-rest background
-       above. It must be the design system's real token name: color is inherited, so an
-       undefined custom property with no fallback is invalid at computed-value time and
-       silently leaves the text at the inherited neutral foreground — which reads as
-       white-ish (fine) on a dark app and near-black (unreadable) on a light one. */
-    color: var(--foreground-on-accent-rest);
-
-    /* Squared "tail" at top-right — the corner nearest the user avatar. */
-    border-radius: 18px 4px 18px 18px;
-    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-fill-rest) 35%, transparent);
-  }
-
-  .message.ai {
-    background: linear-gradient(135deg, var(--neutral-layer-3) 0%, var(--neutral-layer-4) 100%);
-    color: var(--neutral-foreground-rest);
-
-    /* Squared "tail" at top-left — the corner nearest the assistant avatar. */
-    border-radius: 4px 18px 18px;
-    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
-    box-shadow: var(--ai-message-shadow, 0 2px 8px rgb(0 0 0 / 15%));
-  }
-
-  .message.ai-thinking {
-    background: linear-gradient(
-      135deg,
-      color-mix(in srgb, var(--ai-thinking-color, #7c3aed) 12%, transparent) 0%,
-      color-mix(in srgb, var(--ai-thinking-color, #7c3aed) 18%, transparent) 100%
-    );
-    color: var(--neutral-foreground-rest);
-    border-radius: 4px 18px 18px;
-    border-left: 2px solid var(--ai-thinking-color, #7c3aed);
-    font-style: italic;
-    font-size: 0.95em;
-  }
-
-  /* Narration shares the Thinking bubble but is the assistant's commentary (labelled "Working"),
-     not its inner monologue — keep it upright so it reads as action, distinct from italic reasoning. */
-  .message.ai-thinking.narration {
-    font-style: normal;
-  }
-
-  .message.ai-function {
-    background: linear-gradient(135deg, rgb(15 32 39 / 90%) 0%, rgb(30 58 58 / 80%) 100%);
-    color: var(--ai-function-color, #86efac);
-    border-radius: 4px 18px 18px;
-    font-size: 1em;
-    border: 1px solid color-mix(in srgb, var(--ai-function-color, #86efac) 20%, transparent);
-  }
-
-  /* 'label' (default) and 'bare' interactions render the widget chrome-free and
-     full-width — the widget owns its body. */
-  .message-row.interaction.present-label .message,
-  .message-row.interaction.present-bare .message {
-    background: none;
-    border: none;
-    padding: 0;
-    max-width: 100%;
-    width: 100%;
-  }
-
-  /* 'bubble' interactions reuse the standard assistant-message skin so the
-     widget sits inside a normal chat bubble. Padding, max-width and min-width
-     come from the base .message rule. */
-  .message-row.interaction.present-bubble .message {
-    background: linear-gradient(135deg, var(--neutral-layer-3) 0%, var(--neutral-layer-4) 100%);
-    color: var(--neutral-foreground-rest);
-    border-radius: 4px 18px 18px;
-    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
-    box-shadow: var(--ai-message-shadow, 0 2px 8px rgb(0 0 0 / 15%));
-  }
-
-  .sender {
-    font-weight: bold;
-    font-size: 0.9em;
-    margin-bottom: 4px;
-  }
-
-  .payload {
-    font-family: monospace;
-    white-space: pre-wrap;
-    margin: 0;
-    font-size: 0.95em;
-  }
-
-  .payload.unknown-tool {
-    color: var(--error-color, #f87171);
-    border-left: 2px solid color-mix(in srgb, var(--error-color, #f87171) 40%, transparent);
-    padding-left: 8px;
-  }
-
-  .live-sub-agent-trace {
-    animation: slide-in-left 0.25s ease-out;
-    border-left: 2px solid var(--neutral-stroke-rest);
-    padding: 4px 8px;
-    margin: 4px 0;
-    opacity: 80%;
-  }
-
-  .live-sub-agent-name {
-    font-family: monospace;
-    font-size: 0.8em;
-    opacity: 70%;
-    font-style: italic;
-    display: block;
-    margin-bottom: 2px;
-  }
-
-  .sub-agent-trace {
-    margin-top: 6px;
-    border-left: 2px solid var(--neutral-stroke-rest);
-    padding-left: 8px;
-  }
-
-  .sub-agent-trace-summary {
-    font-family: monospace;
-    font-size: 0.85em;
-    opacity: 70%;
-    cursor: pointer;
-    user-select: none;
-    padding: 2px 0;
-  }
-
-  .sub-agent-trace-summary:hover {
-    opacity: 100%;
-  }
-
-  .sub-agent-message {
-    font-family: monospace;
-    font-size: 0.85em;
-    margin-top: 4px;
-  }
-
-  .sub-agent-assistant {
-    opacity: 85%;
-    white-space: pre-wrap;
-  }
-
-  .sub-agent-tool-call {
-    opacity: 60%;
-  }
-
-  .sub-agent-tool-name::before {
-    content: '⚙ ';
-  }
-
-  .sub-agent-tool-result {
-    opacity: 50%;
-    border-left: 1px solid var(--neutral-stroke-rest);
-    padding-left: 6px;
-    white-space: pre-wrap;
-  }
-
-  /* The composer is one bordered box: textarea on top, controls on a bar beneath
-     it, both inside the same surface. It is position:relative so it is the
-     containing block for the two menus, which anchor to its top edge. */
-  .composer {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-
-    /* Matched by the bar's own padding-top below, so the divider between the two
-       sits with equal air above and below it. */
-    gap: calc(var(--design-unit) * 1.5px);
-    padding: calc(var(--design-unit) * 1.5px);
-
-    /* Flush with the panel edges by default, so only the top edge is drawn — side
-       and bottom borders on a full-bleed strip are either invisible or noise, and
-       a radius on square-cut corners reads as a mistake. The transparent border
-       is still declared on all four sides so the box metrics are identical in
-       both modes and crossing the floating threshold cannot reflow the composer.
-       The container query below promotes it to a full, rounded card. */
-    border: 1px solid transparent;
-    border-top-color: var(--neutral-stroke-rest);
-    background-color: var(--neutral-layer-2);
-  }
-
-  .composer-bar {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--design-unit) * 2px);
-
-    /* Pulled out to the composer's padding edges so the divider below spans the
-       full box rather than floating inset from it, with the same amount added
-       back as padding so nothing on the bar actually moves. The inline padding is
-       therefore the composer's own padding PLUS the 8px the textarea's control
-       insets its text by — which is what keeps the leading pill aligned with the
-       placeholder and gives Send the same inset on the right. The block-start
-       padding is the divider's breathing room and pairs with the composer's gap. */
-    margin-inline: calc(var(--design-unit) * -1.5px);
-    padding: calc(var(--design-unit) * 1.5px)
-      calc(var(--design-unit) * 1.5px + var(--design-unit) * 2px) 0;
-
-    /* Off by default, but always PRESENT: painted in the composer's own surface
-       colour so it is invisible while still occupying its 1px, which means an app
-       switching it on gets a line and not a one-pixel reflow of the whole bar.
-       Hosts that want it set --ai-composer-divider to a colour — see
-       docs/styling.md. */
-    border-top: 1px solid var(--ai-composer-divider, var(--neutral-layer-2));
-  }
-
-  .composer-bar-start,
-  .composer-bar-end {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--design-unit) * 1.5px);
-    min-width: 0;
-  }
-
-  .composer-bar-start {
-    flex: 1 1 auto;
-  }
-
-  .composer-bar-end {
-    flex: 0 0 auto;
-    margin-inline-start: auto;
-  }
-
-  /* Mirror the messages column: cap the composer (input row + its buttons, resize
-     handle, attachment chips, agent picker panel, suggestions) at the same max width
-     and centre it, so it does not span full width while the messages sit in a
-     narrower column. These are flex items in the column layout, so margin-inline:auto
-     would disable their default stretch — width:100% keeps them filling up to the
-     cap, and border-box keeps padding/border from overflowing when full-width.
-     Overridable via ::part(input-row) etc. */
-  .composer,
-  .composer-resize-handle,
-  .attachment-chips,
-  .blocked-banner,
-  chat-suggestions {
-    box-sizing: border-box;
-    width: 100%;
-    max-width: var(--ai-conversation-max-width);
-    margin-inline: auto;
-  }
-
-  /* When the assistant is wider than that cap the composer is genuinely constrained,
-     so lift the input row — and the panels that sit above it — into matching
-     floating, rounded, outlined cards with a gap to the bottom. Below the cap they
-     stay full-width and flush (the default border-top). The query resolves against
-     the assistant's own inline-size container (.chat-wrapper). The threshold is a
-     literal because a container query can't read a custom property — keep it equal
-     to the --ai-conversation-max-width default. */
-  @container (width > 1500px) {
-    .composer,
-    chat-suggestions {
-      border: 1px solid var(--neutral-stroke-rest);
-      border-radius: 12px;
-    }
-
-    /* The banner joins the same floating-card family, but keeps its own
-       warning-toned border — overriding it with the neutral stroke would erase
-       the one colour signal it carries. Only the radius needs to match. */
-    .blocked-banner.is-visible {
-      border-radius: 12px;
-    }
-
-    .composer {
-      margin-bottom: 12px;
-    }
-
-    /* Genuinely floating now, so the whole ring is drawn and the focus tint
-       follows it round rather than lighting only the top edge. */
-    .composer:focus-within {
-      border-color: var(--focus-stroke-outer);
-    }
-
-    /* chat-suggestions paints its background on an inner element, so clip it to the
-       rounded corners — otherwise that square inner background bleeds past the radius
-       and the corners read as square with the border hidden behind them. The smaller
-       end margin keeps it a distinct card above the composer without a large void. */
-    chat-suggestions {
-      overflow: hidden;
-      margin-bottom: 8px;
-    }
-  }
-
-  /* Focus lives on the textarea inside, which is visually flush with the box —
-     so lift the ring to the box itself and let the inner control stay quiet.
-     Driven by :focus-within rather than a class: no state to keep in sync.
-     Declared here, below the container query, because that block also styles a
-     bare .composer and a lower-specificity rule may not follow a higher one. */
-  .composer:focus-within {
-    border-top-color: var(--focus-stroke-outer);
-  }
-
-  /* ── Composer control pills ───────────────────────────────────────────────
-     One shape for every icon control on the bar: a round, quiet button that
-     tints on hover. The design-system button paints its surface on :host and
-     pads an inner 'control' part, so the circle is set here and the padding
-     cleared there — otherwise the control's default 16px inline padding forces
-     the host wider than it is tall and the circle becomes a lozenge. */
-  .composer-pill {
-    --pill-size: calc(var(--design-unit) * 7px);
-
-    height: var(--pill-size);
-    min-width: var(--pill-size);
-    border-radius: 999px;
-    color: var(--neutral-foreground-hint);
-    background: var(--neutral-fill-stealth-rest);
-  }
-
-  .composer-pill:hover {
-    color: var(--neutral-foreground-rest);
-    background: var(--neutral-fill-stealth-hover);
-  }
-
-  .composer-pill[disabled] {
-    opacity: 45%;
-  }
-
-  .composer-pill::part(control) {
-    min-width: 0;
-    padding: 0;
-    justify-content: center;
-  }
-
-  /* The agent pill is the one that carries a label, so it is the one that grows.
-     A pill-height radius rather than a circle, and room for the text. */
-  .composer-pill-labelled {
-    max-width: 45%;
-  }
-
-  .composer-pill-labelled::part(control) {
-    gap: calc(var(--design-unit) * 1px);
-    padding: 0 calc(var(--design-unit) * 2px) 0 calc(var(--design-unit) * 1px);
-  }
-
-  /* The glyph keeps the circular footprint the unlabelled pills have, so the
-     three read as one family with the agent one simply extended by its label. */
-  .pill-glyph {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex: 0 0 auto;
-    width: calc(var(--design-unit) * 5px);
-    height: calc(var(--design-unit) * 5px);
-    border-radius: 50%;
-    font-size: 0.8em;
-  }
-
-  .pill-label {
-    overflow: hidden;
-    font-size: 0.75em;
-    font-weight: 600;
-    letter-spacing: 0.02em;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  /* Send keeps the design system's own accent button. The shell around it is
-     inert by default and exists only as a styling hook — see the note in
-     main.template.ts and ::part(send-shell) in docs/styling.md. */
-  .send-shell {
-    display: inline-flex;
-    border-radius: calc(var(--control-corner-radius) * 1px);
-  }
-
-  .send-button {
-    height: calc(var(--design-unit) * 7px);
-  }
-
-  /* The "stopping" state shows a spinner — rotate it (the icon set's glyph is
-     static). Transform-only, so it never affects layout/width. */
-  @keyframes ai-stop-spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  .stop-icon-spinning {
-    /* inline-block so the icon host is transformable — an inline element
-       ignores the transform, which is why the spinner appeared frozen. */
-    display: inline-block;
-    animation: ai-stop-spin 0.8s linear infinite;
-  }
-
-  /* ── Composer menus ───────────────────────────────────────────────────────
-     The agent picker and the session menu are the same panel with different
-     contents. Absolutely positioned against .composer, so opening one neither
-     pushes the transcript up nor covers a half-typed message, and edge-aligned
-     to the button that opened it. */
-  .composer-menu {
-    position: absolute;
-    z-index: 2;
-    box-sizing: border-box;
-    min-width: calc(var(--design-unit) * 55px);
-
-    /* Never wider than the composer, so a long agent name cannot push the menu
-       past the panel edge at narrow widths. */
-    max-width: 100%;
-
-    /* Both the ceiling and the measured headroom apply: whichever is smaller
-       wins, so a tall assistant gets a comfortable menu and a short one gets a
-       scrolling menu rather than one clipped by the wrapper's overflow. */
-    max-height: min(320px, var(--composer-menu-max-height, 320px));
-    overflow-y: auto;
-    padding: calc(var(--design-unit) * 1px);
-    border: 1px solid var(--neutral-stroke-rest);
-    border-radius: calc(var(--control-corner-radius) * 2px);
-    background-color: var(--neutral-layer-3);
-    box-shadow: 0 8px 24px rgb(0 0 0 / 28%);
-
-    /* All three offsets are measured and written by positionComposerMenu() when
-       the menu opens — CSS cannot read the trigger's offset from here. The menu
-       sits directly on top of the button that opened it, in both axes, and grows
-       out of that button's centre. Anchoring to the button rather than to the
-       composer's top edge means it can overlap the last line or two of the
-       textarea; that is the deliberate trade for a menu that reads as belonging
-       to the control, and it is transient. The fallbacks only apply for the one
-       frame before the measurement lands. */
-    left: var(--composer-menu-left, 0);
-    bottom: calc(var(--composer-menu-bottom, 100%) + var(--design-unit) * 2px);
-    transform-origin: var(--composer-menu-origin, 0) bottom;
-    animation: composer-menu-in 0.14s ease-out;
-  }
-
-  .composer-menu.closing {
-    animation: composer-menu-out 0.14s ease-in forwards;
-  }
-
-  @keyframes composer-menu-in {
-    from {
-      opacity: 0%;
-      transform: scale(0.96) translateY(4px);
-    }
-
-    to {
-      opacity: 100%;
-      transform: scale(1) translateY(0);
-    }
-  }
-
-  @keyframes composer-menu-out {
-    from {
-      opacity: 100%;
-      transform: scale(1) translateY(0);
-    }
-
-    to {
-      opacity: 0%;
-      transform: scale(0.96) translateY(4px);
-    }
-  }
-
-  /* The session menu renders its rows directly (the picker is a child element
-     that brings its own copy of the shared row styles). */
-  .session-menu-panel {
-    display: flex;
-    flex-direction: column;
-    gap: 1px;
-  }
-
-  /* Shown in place of the transcript while a manual compaction runs (GENC-1351). */
-  .compacting-indicator {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: calc(var(--design-unit) * 2px);
-    padding: calc(var(--design-unit) * 6px) 0;
-    color: var(--neutral-foreground-hint, var(--neutral-foreground-rest));
-  }
-
-  .compacting-caption {
-    font-size: 0.9em;
-  }
-
-  /* Backend-blocked banner (GENC-1464) — sits between the transcript and the
-     disabled composer. Flat and quiet rather than an error toast: the condition
-     is standing, not a momentary failure, so it should read as part of the
-     chrome the user is now working within. */
-
-  /* The container is ALWAYS in the DOM so the live region is registered before the
-     text arrives (see main.template.ts) — so the bare selector carries only layout,
-     and an unblocked banner is an empty, zero-height, invisible box. Everything
-     that would make it visible hangs off .is-visible. */
-  .blocked-banner {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--design-unit) * 2px);
-  }
-
-  .blocked-banner.is-visible {
-    /* Block axis only. The inline-axis margin is owned by the composer width group
-       above (margin-inline: auto), which centres the banner on the same column as
-       the input row — an inline margin here would fight it. */
-    margin-block: var(--blocked-banner-gap);
-    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 3px);
-    border: calc(var(--stroke-width) * 1px) solid var(--warning-color);
-    border-radius: calc(var(--control-corner-radius) * 1px);
-    background: var(--neutral-layer-2);
-    color: var(--neutral-foreground-rest);
-  }
-
-  /* Partial exhaustion: at least one vendor is walled but the composer is still
-     live, so the banner is advice rather than a wall. Softened to match — same
-     layout, same part, lower alarm. */
-  .blocked-banner.is-partial {
-    border-color: var(--neutral-stroke-rest);
-  }
-
-  .blocked-banner-text {
-    font-size: 0.9em;
-    line-height: 1.4;
-  }
-
-  .chat-input {
-    flex: 1;
-    resize: none;
-    align-self: stretch;
-
-    /* Drag-to-resize. --composer-height (set inline by the handle) pins an
-       explicit height once dragged; unset, height is auto and capped at 150px
-       (the original auto-grow behaviour). The host is sized — not the inner
-       control — because the design system already stretches its control to the
-       host height, and that rule out-specifies anything we could set via
-       ::part(control). Sizing the host (not just its max-height) is what stops
-       a downward drag from squishing the textarea below its natural height. */
-    height: var(--composer-height);
-    max-height: var(--composer-height, 150px);
-  }
-
-  /* The box around the textarea is .composer's job now, so strip the control's
-     own frame — two nested borders is what made the old row look like a field
-     inside a field. */
-  .chat-input::part(control) {
-    border: none;
-    background: transparent;
-  }
-
-  .chat-input:focus-within::part(control) {
-    outline: none;
-    box-shadow: none;
-  }
-
-  /* Full-width grab bar above the input row; drag up/down to resize the composer.
-     Sits above the row so it never overlaps the send/stop controls. */
-  .composer-resize-handle {
-    height: 7px;
-    flex-shrink: 0;
-    cursor: ns-resize;
-    touch-action: none;
-    user-select: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .composer-resize-handle::after {
-    content: '';
-    width: 32px;
-    height: 3px;
-    border-radius: 999px;
-    background-color: var(--neutral-stroke-rest);
-    opacity: 0%;
-    transition: opacity 0.15s ease;
-  }
-
-  .composer-resize-handle:hover::after {
-    opacity: 70%;
-  }
-
-  /* With the banner visible, its block-end margin and the handle's height used
-     to STACK into an ~11px void between the exhausted message and the composer
-     — and the hover pill centres in the handle's own 7px slice, i.e. below the
-     middle of the gap the user actually sees. Pull the handle up over the
-     banner's end margin instead: the handle's height becomes the whole gap and
-     the pill lands dead-centre of it. FAST's when-anchors are comment nodes,
-     so the adjacency holds whenever the handle renders; without a handle
-     (resize disabled) the banner keeps its normal margin before the input row. */
-  .blocked-banner.is-visible + .composer-resize-handle {
-    margin-block-start: calc(var(--blocked-banner-gap) * -1);
-  }
-
-  .file-input {
-    display: none;
-  }
-
-  .thinking-dots {
-    display: flex;
-    align-items: center;
-    align-self: center;
-    gap: 5px;
-    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 3px);
-  }
-
-  .dot {
-    width: 9px;
-    height: 9px;
-    border-radius: 50%;
-    background-image: linear-gradient(145deg, rgb(255 255 255 / 40%) 0%, rgb(0 0 0 / 0%) 100%);
-    animation: dot-bounce 1.5s linear infinite;
-  }
-
-  .dot-1 {
-    background-color: ${AI_COLOUR_AMBER};
-    animation-delay: 0s;
-  }
-
-  .dot-2 {
-    background-color: ${AI_COLOUR_PINK};
-    animation-delay: 0.1s;
-  }
-
-  .dot-3 {
-    background-color: ${AI_COLOUR_CYAN};
-    animation-delay: 0.2s;
-  }
-
-  .dot-4 {
-    background-color: ${AI_COLOUR_VIOLET};
-    animation-delay: 0.3s;
-  }
-
-  @keyframes dot-bounce {
-    0%,
-    50%,
-    100% {
-      transform: scale(1);
-      filter: blur(0);
-    }
-
-    25% {
-      transform: scale(0.6);
-      filter: blur(2px);
-    }
-
-    75% {
-      transform: scale(1.4);
-      filter: blur(2px);
-    }
-  }
-
-  .thinking-waves,
-  .thinking-flowing-waves,
-  .thinking-plasma {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    align-self: center;
-    gap: 6px;
-    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 3px);
-  }
-
-  /* The flowing-waves host is the avatar's height (32px), so drop the top padding
-     the shared rule adds — that keeps the wave line level with the avatar instead
-     of dropping it toward the row's vertical centre. */
-  .thinking-flowing-waves {
-    padding-top: 0;
-  }
-
-  .thinking-caption {
-    font-size: var(--type-ramp-minus-1-font-size, 12px);
-    line-height: var(--type-ramp-minus-1-line-height, 16px);
-    color: var(--neutral-foreground-rest);
-    opacity: 70%;
-  }
-
-  .attachment-chips {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    padding: 0 calc(var(--design-unit) * 3px) calc(var(--design-unit) * 2px);
-  }
-
-  .attachment-chip {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 4px 8px;
-    background-color: var(--neutral-layer-4);
-    border-radius: calc(var(--control-corner-radius) * 1px);
-    font-size: 0.9em;
-    border: 1px solid var(--neutral-stroke-rest);
-  }
-
-  .attachment-chip-error {
-    background-color: var(--error-fill-rest);
-    border-color: var(--error-stroke-rest);
-  }
-
-  .chip-remove {
-    background: none;
-    border: none;
-    color: var(--neutral-foreground-rest);
-    cursor: pointer;
-    font-size: 1.2em;
-    padding: 0 0 0 4px;
-    opacity: 70%;
-  }
-
-  .chip-remove:hover {
-    opacity: 100%;
-  }
-`;
-
-export const styles = css`
-  ${baseStyles}
-  ${
-    /* The session menu's rows. Same partial the agent picker imports into its own
-       shadow root — the one thing that keeps the two menus looking alike. */ ''
-  }
-  ${menuItemStyles}
-  ${settingsModalStyles}
-`;