.ui-root .ui-shell__body--chat { display: flex; overflow: hidden; }
.ui-chat { --ui-chat-shell-gutter: max(12px, env(safe-area-inset-left)); min-inline-size: 0; min-block-size: 0; inline-size: 100%; display: flex; flex-direction: column; gap: var(--ui-space-3); padding-block: var(--ui-space-3); box-sizing: border-box; }
/* History uses the space left by the editor instead of shrinking its controls
 * when a reply applies a larger saved text size. Both regions retain scrolling. */
.ui-chat__reading { flex: 1 1 0; min-block-size: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; scrollbar-gutter: stable; }
.ui-chat__reading:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
.ui-root .ui-chat__sample > .ui-button:focus-visible { outline-offset: calc(-.125rem - 1px); }
.ui-chat__history { display: flex; flex-direction: column; gap: 22px; padding-block: 8px; }
.ui-chat__history:empty { display: none; }
/* The two distinct whole canvases share one passive ending in the reader.
 * One unavailable image leaves its sibling anchored to its own edge. When
 * neither can draw, the whole row and its flex gap retire together. */
.ui-root .ui-chat__fringes { display: none; flex: 0 0 68px; align-self: stretch; align-items: flex-end; block-size: 68px; overflow: clip; pointer-events: none; user-select: none; }
.ui-root .ui-chat__fringe { display: none; flex: 0 0 68px; inline-size: 68px; block-size: 68px; pointer-events: none; user-select: none; }
.ui-root .ui-chat__fringe[data-art-placement="chat.fringe.right"] { margin-inline-start: auto; }
.ui-root .ui-chat__fringe > .ui-block-art__content { display: none; }
.ui-root .ui-chat__fringe > .ui-block-art__visual { inline-size: 68px; block-size: 68px; }
@media (forced-colors: none) and (height > 640px) {
  @container app-frame (width > 20em) {
    /* This mobile paper mode gives paint the full page width. Native content
     * keeps its inner gutter. Hiding the desktop scrollbar grip removes its
     * reserved strip; focusable native wheel/touch/keyboard scrolling remains.
     * Width is independent of image loading/failure. Other modes keep the
     * original reader gutter and scrollbar behavior. */
    .ui-root .ui-chat { inline-size: calc(100% + 2 * var(--ui-chat-shell-gutter)); margin-inline: calc(-1 * var(--ui-chat-shell-gutter)); padding-inline: var(--ui-chat-shell-gutter); }
    .ui-root .ui-chat__reading { box-sizing: border-box; inline-size: calc(100% + 2 * var(--ui-chat-shell-gutter)); margin-inline: calc(-1 * var(--ui-chat-shell-gutter)); padding-inline: var(--ui-chat-shell-gutter); scrollbar-gutter: auto; scrollbar-width: none; }
    .ui-root .ui-chat__reading::-webkit-scrollbar { display: none; }
    .ui-root .ui-chat__fringes { margin-inline: calc(-1 * var(--ui-chat-shell-gutter)); }
    /* Offset intact squares by their own transparent margins, then let only
     * the paper-ending owner clip the outer branches at its edges. */
    .ui-root .ui-chat__fringe[data-art-placement="chat.fringe.left"] { inset-inline-start: calc(-68px * 76 / 1254 - 2px); inset-block-start: calc(68px * 71 / 1254 + 2px); }
    .ui-root .ui-chat__fringe[data-art-placement="chat.fringe.right"] { inset-inline-end: calc(-68px * 30 / 1254 - 2px); inset-block-start: calc(68px * 36 / 1254 + 2px); }
    .ui-root .ui-chat:has(> .ui-chat__reading > .ui-chat__fringes:not([hidden]) > .ui-chat__fringe:not([hidden]):is([data-art-status="loading"], [data-art-status="loaded"]) > .ui-block-art__visual:not([hidden])) { gap: 0; }
    /* Short conversations end at the paper bottom; long ones keep normal flow. */
    .ui-root .ui-chat__fringes:not([hidden]):has(> .ui-chat__fringe:not([hidden]):is([data-art-status="loading"], [data-art-status="loaded"]) > .ui-block-art__visual:not([hidden])) { display: flex; margin-block-start: auto; }
    .ui-root .ui-chat__fringe:is([data-art-status="loading"], [data-art-status="loaded"]):has(> .ui-block-art__visual:not([hidden])) { display: block; }
  }
}
/* Live replies are direct children of the reader's flex column. Their paper
 * must grow with streamed text instead of shrinking to the decorative minimum. */
.ui-chat__message { flex-shrink: 0; }
.ui-chat__message { position: relative; box-sizing: border-box; min-inline-size: 0; max-inline-size: 90%; color: var(--ui-text); }
.ui-chat__bubble { position: relative; box-sizing: border-box; padding: 12px 14px; border: 1px solid #e7e4d9; border-radius: 14px; background: #fff; box-shadow: 0 2px 8px rgb(76 77 48 / .055); }
.ui-chat__message[data-role="user"] { align-self: flex-end; }
/* Contain the leaf's transparent overhang without adding a bubble scroll owner. */
.ui-chat__message[data-role="user"] .ui-chat__bubble { background: #eaf1db; border-color: #eaf1db; padding-inline-end: 50px; overflow: clip; }
.ui-chat__message[data-role="assistant"] { align-self: flex-start; }
.ui-chat__message[data-role="assistant"] .ui-chat__bubble { padding-inline-start: 64px; min-block-size: 74px; }
.ui-chat__time { display: block; margin-block-start: 4px; text-align: end; color: var(--ui-secondary); font-size: var(--ui-secondary-size); line-height: var(--ui-secondary-line); overflow-wrap: anywhere; }
.ui-chat__day { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; align-self: stretch; gap: 8px; color: var(--ui-secondary); font-size: var(--ui-secondary-size); line-height: var(--ui-secondary-line); overflow-wrap: anywhere; text-align: center; }
.ui-chat__day::before, .ui-chat__day::after { content: ''; flex: 1 1 0; max-inline-size: 5rem; border-block-start: 1px solid currentColor; opacity: .45; }
.ui-chat__day-leaf { flex: 0 0 20px; inline-size: 20px; block-size: 24px; object-fit: contain; pointer-events: none; user-select: none; }
.ui-chat__message p, .ui-chat__answer { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
/* Live save status can wrap at enlarged text sizes. Keep the whole label in
 * flow so its height separates messages without covering the preceding reply. */
.ui-chat__speaker { display: block; margin-block-end: 4px; color: var(--ui-secondary); font-size: var(--ui-secondary-size); line-height: var(--ui-secondary-line); overflow-wrap: anywhere; }
.ui-chat__message[data-role="user"] .ui-chat__speaker { position: absolute; margin: 0; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ui-chat__leaf { position: absolute; inline-size: 36px; block-size: 36px; object-fit: contain; inset-inline-start: 9px; inset-block-start: 12px; pointer-events: none; user-select: none; }
.ui-chat__message[data-role="assistant"] .ui-chat__leaf { inline-size: 48px; block-size: 48px; }
/* The dedicated pair paints about 33 x 29px inside its intact 48px canvas.
 * Transparent margins put the leaves at the bubble's lower trailing corner;
 * the native body also clears the whole canvas, without rotation or cropping. */
.ui-chat__message[data-role="user"] .ui-chat__leaf { inline-size: 48px; block-size: 48px; inset-inline-start: auto; inset-inline-end: -3px; inset-block-start: auto; inset-block-end: -8px; }
.ui-chat__actions, .ui-chat__recovery-list { padding-inline-start: var(--ui-space-5); overflow-wrap: anywhere; }
.ui-chat__actions li, .ui-chat__recovery-list li { margin-block: var(--ui-space-2); }
.ui-chat__toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 8px; align-items: start; padding-block: 8px; border-block-end: 1px solid #e4e7dc; }
.ui-root .ui-chat__toolbar > .ui-button { min-inline-size: 44px; min-block-size: 44px; inline-size: auto; padding: 4px 6px; justify-self: start; text-align: start; font-size: var(--ui-secondary-size); line-height: var(--ui-secondary-line); }
.ui-chat__toolbar > .ui-button .ui-button__label { text-wrap: balance; }
.ui-chat__toolbar > .ui-button:only-of-type { grid-column: 1 / -1; }
.ui-chat__toolbar > .ui-chat__status { grid-column: 1 / -1; }
.ui-chat__toolbar > .ui-chat__status { margin: 0; }
.ui-chat__status { font-size: var(--ui-secondary-size); line-height: var(--ui-secondary-line); color: var(--ui-secondary); }
.ui-chat__status[data-error="true"] { color: var(--ui-danger); }
.ui-root .ui-chat-composer { flex: 0 0 auto; min-block-size: 0; max-block-size: 65%; overflow-y: auto; overscroll-behavior-y: contain; gap: 4px; padding: 4px 0 0; border: 0; border-block-start: 1px solid #e8e5db; background: transparent; box-shadow: none; }
.ui-chat-composer__row { display: flex; align-items: center; gap: 6px; min-inline-size: 0; }
.ui-chat-composer__field { flex: 1 1 0; min-inline-size: 0; }
.ui-chat-composer__label { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ui-chat-composer__box { display: flex; align-items: center; gap: 2px; padding: 4px; min-inline-size: 0; border: 1px solid #dcded1; border-radius: 26px; background: #fff; box-shadow: 0 2px 5px rgb(76 77 48 / .035); }
.ui-chat-composer__input { box-sizing: border-box; flex: 1 1 0; inline-size: 0; min-inline-size: 0; block-size: 64px; min-block-size: 44px; resize: none; padding: 4px 6px; border: 0; border-radius: 18px; color: var(--ui-text); background: transparent; font: inherit; font-weight: 400; line-height: var(--ui-body-line); }
.ui-chat-composer__input:placeholder-shown { block-size: max(44px, calc(2 * var(--ui-body-line) + 8px)); }
.ui-chat-composer__input::placeholder { color: var(--ui-secondary); opacity: 1; }
.ui-chat-composer__input:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
.ui-chat-composer__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--ui-space-2); }
.ui-chat-composer__actions .ui-button { inline-size: auto; flex: 0 1 auto; }
.ui-chat-composer__actions:not(:has(button:not([hidden]))) { display: none; }
.ui-root .ui-chat-composer__box .ui-chat-composer__microphone { flex: 0 0 44px; inline-size: 44px; block-size: 44px; min-inline-size: 44px; min-block-size: 44px; padding: 8px; border: 0; border-radius: 50%; touch-action: none; color: var(--ui-heading); }
.ui-chat-composer__microphone .ui-button__label, .ui-chat-composer__send .ui-button__label { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ui-chat-composer__microphone-glyph, .ui-chat-composer__send-glyph { flex-shrink: 0; inline-size: 24px; block-size: 24px; background: currentColor; pointer-events: none; }
.ui-root .ui-chat-composer__send { flex: 0 0 48px; inline-size: 48px; block-size: 48px; min-inline-size: 48px; min-block-size: 48px; padding: 10px; border-radius: 50%; }
.ui-chat-composer__microphone[aria-pressed="true"] { background: var(--ui-selection); outline: 2px solid var(--ui-primary); }
.ui-chat-composer__options { font-size: var(--ui-secondary-size); line-height: var(--ui-secondary-line); }
.ui-chat-composer__options summary, .ui-chat__recovery > summary { cursor: pointer; min-block-size: 44px; padding-block: .5rem; display: list-item; list-style-position: inside; }
.ui-chat-composer__options .ui-button { inline-size: auto; }
.ui-chat-composer__status, .ui-chat-composer__offline { margin: 0; font-size: var(--ui-secondary-size); line-height: var(--ui-secondary-line); overflow-wrap: anywhere; }
.ui-chat__recovery-argument { white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-chat-access { padding-block: var(--ui-space-4); }
.ui-chat-access fieldset { display: grid; gap: var(--ui-space-3); min-inline-size: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-card); }
.ui-chat-access legend { font-weight: 600; }
.ui-chat-access__choice { display: flex; align-items: flex-start; gap: var(--ui-space-3); min-block-size: var(--ui-target-min); overflow-wrap: anywhere; }
.ui-chat-access__choice input { inline-size: 1.25rem; block-size: 1.25rem; flex-shrink: 0; accent-color: var(--ui-primary); }
.ui-chat-access__choice span { min-inline-size: 0; }
.ui-chat-access > button[type="submit"] .ui-button__label { text-wrap: balance; }
.ui-chat [hidden] { display: none !important; }
@media (min-width: 360px) and (min-height: 641px) {
  .ui-chat-composer__input:placeholder-shown { block-size: max(44px, calc(var(--ui-body-line) + 8px)); }
}
@media (forced-colors: active) {
  .ui-chat__bubble, .ui-chat-composer__box { border-color: CanvasText; }
  .ui-chat__leaf { display: none; }
  /* Keep mask fills visible in the system palette; buttons retain native adjustment. */
  .ui-chat-composer__microphone-glyph, .ui-chat-composer__send-glyph { forced-color-adjust: none; background: ButtonText; }
  .ui-chat-composer__microphone:disabled .ui-chat-composer__microphone-glyph,
  .ui-chat-composer__send:disabled .ui-chat-composer__send-glyph { background: GrayText; }
}

/* Narrow recovery footers give the chosen text size room before wrapping.
 * Other dialogs and the shared action material keep their existing geometry. */
@media (max-width: 359px) {
  .ui-root .ui-chat__recovery .ui-dialog__actions { padding-inline: 12px; }
  .ui-root .ui-chat__recovery .ui-dialog__actions .ui-button__label { text-wrap: balance; }
}

/* Narrow layouts, including enlarged saved text, spend less space on gaps. */
@container app-frame (max-width: 20em) {
  .ui-root .ui-chat { gap: 8px; padding-block: 4px; }
  .ui-root .ui-chat__reading { gap: 8px; }
}

/* Short viewports keep the chosen type size. Spend less space on padding and
 * decorative layout, while keeping the editor and its inline mic together.
 * Voice options and longer content remain in their native local scrollports. */
@media (max-height: 640px) {
  .ui-root .ui-chat { gap: 2px; padding-block: 0; }
  .ui-root .ui-chat__reading { flex: 1 1 0; gap: 8px; }
  .ui-root .ui-chat .ui-button { min-inline-size: 44px; min-block-size: 44px; padding: 4px 8px; }
  /* Native recovery pills keep the shared ring outside their idle label track. */
  .ui-root .ui-chat .ui-chat__recovery .ui-dialog__actions > .ui-button:where([data-variant="primary"], [data-variant="secondary"]):where(:has(> .ui-button__label:first-child + .ui-button__busy:last-child)) { padding-inline: 12px; }
  .ui-root .ui-chat-composer { max-block-size: 62%; padding-block-start: 0; }
  .ui-root .ui-chat-composer__box { padding-block: 2px; }
  .ui-root .ui-chat-composer__input:placeholder-shown { padding-block: 0; block-size: calc(2 * var(--ui-body-line)); }
  .ui-root .ui-chat__message { max-inline-size: 96%; }
  .ui-root .ui-chat-composer__actions { gap: 4px; }
  .ui-root .ui-chat-composer__options summary, .ui-root .ui-chat__recovery > summary { padding-block: 4px; }
}

/* 她主动发来的消息（照片日记的回复）：带一张她在小世界里的画面 */
.ui-root .ui-chat__moments { display: grid; gap: 12px; }
.ui-root .ui-chat__moments[hidden] { display: none; }
.ui-root .ui-chat__moment-photo { margin: 8px 0 0; overflow: hidden; border-radius: 14px; max-width: 220px; aspect-ratio: 3 / 4; background: #f3f1e4; }
.ui-root .ui-chat__moment-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ui-root .ui-chat__moment-time { margin: 2px 0 0; font-size: .75rem; color: var(--ui-secondary); }

/* 她带回来的小纪念物（聊天里的照片回信下面） */
.ui-root .ui-chat__moment-gift { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 10px; border-radius: 14px; background: #f6f2e3; }
.ui-root .ui-chat__moment-gift img { width: 40px; height: 40px; object-fit: contain; }
.ui-root .ui-chat__moment-gift span { display: grid; font-size: .8125rem; }
.ui-root .ui-chat__moment-gift small { color: var(--ui-secondary); }

/* 小世界来信：聊天最上面、默认收起 */
.ui-root .ui-chat__letters { border: 1px solid #ece5d3; border-radius: 16px; background: #fffdf6; padding: 0 12px; }
.ui-root .ui-chat__letters[hidden] { display: none; }
.ui-root .ui-chat__letters-summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; color: var(--ui-heading); font-weight: 600; font-size: .9375rem; }
.ui-root .ui-chat__letters-summary::marker { color: var(--ui-secondary); }
.ui-root .ui-chat__letters-new { padding: 0 8px; border-radius: 999px; background: #c0564b; color: #fff; font-size: .75rem; line-height: 1.6; }
.ui-root .ui-chat__letters-new[hidden] { display: none; }
.ui-root .ui-chat__letters[open] { padding-bottom: 12px; }