.chat-view,
.chat-attachment-viewer {
  --chat-accent: var(--accent, #506577);
  --chat-ink: var(--ink, #22262b);
  --chat-muted: var(--muted, #656b72);
  --chat-line: var(--line, #e4e3de);
  --chat-soft: var(--soft, #f1f0eb);
  --chat-tint: var(--selected, #e9edf0);
  color: var(--chat-ink);
  caret-color: var(--chat-accent);
}
.chat-view { grid-template-columns: 210px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.chat-history { min-height: 0; }
.chat-main-head { flex: 0 0 auto; }
.chat-view :is(button, input, select, textarea, summary):focus-visible,
.chat-attachment-viewer :is(button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--chat-accent);
  outline-offset: 3px;
}
.chat-view .button.secondary,
.chat-attachment-viewer .button.secondary {
  border-color: var(--chat-line);
  color: var(--chat-muted);
  background: #fff;
  box-shadow: none;
}
.chat-view .button.secondary:hover,
.chat-attachment-viewer .button.secondary:hover { background: var(--chat-soft); color: var(--chat-ink); }
.chat-view .button.primary,
.chat-attachment-viewer .button.primary { border-color: var(--chat-accent); background: var(--chat-accent); color: #fff; box-shadow: none; }
.chat-view .button.primary:hover,
.chat-attachment-viewer .button.primary:hover { background: var(--ink, #22262b); border-color: var(--ink, #22262b); }
.chat-view :is(button, select, input, textarea):disabled,
.chat-attachment-viewer :is(button, select, input, textarea):disabled { cursor: not-allowed; }
.chat-view .button:disabled { opacity: .55; }
.chat-history { background: var(--canvas, #faf9f6); border-color: var(--chat-line); }
.chat-history-head { padding: 18px 12px 12px; gap: 8px; }
.chat-history-head strong,
.chat-memory-head strong { color: var(--chat-ink); font-size: 14px; }
.chat-search-label { margin: 0 12px 10px; border-color: var(--chat-line); border-radius: 7px; color: var(--chat-muted); }
.chat-search-label:focus-within { border-color: var(--chat-accent); box-shadow: none; outline: 2px solid var(--chat-soft); outline-offset: 1px; }
.chat-search-label input { color: var(--chat-ink); font-size: 12px; }
.chat-view :is(input, textarea)::placeholder { color: var(--chat-muted); opacity: 1; }
.chat-history-list { padding: 0 7px 12px; }
.chat-history-empty { color: var(--chat-muted); font-size: 12px; padding: 16px 12px; }
.chat-history-row { border-radius: 7px; }
.chat-history-row:hover { background: var(--chat-soft); }
.chat-history-row.active { background: var(--chat-tint); border-color: transparent; }
.chat-history-open { color: var(--chat-ink); padding: 11px 7px 11px 10px; }
.chat-history-open strong { font-size: 12px; }
.chat-history-open small { color: var(--chat-muted); font-variant-numeric: tabular-nums; }
.chat-history-actions .icon-button { color: var(--chat-muted); }
.chat-history-actions .icon-button:hover { background: var(--chat-soft); color: var(--chat-accent); }
.chat-history-close,
.chat-new-mobile { display: none; }
.chat-main-head { min-height: 62px; padding: 11px 24px; border-color: var(--chat-line); }
.chat-main-head strong { color: var(--chat-ink); font-size: 14px; }
.chat-main-head > div > span { color: var(--chat-muted); }
.chat-main-head .button span,
.chat-history-toggle span { color: inherit; font-size: inherit; }
.chat-messages { padding: 26px max(24px, calc((100% - 820px) / 2)); }
.chat-welcome { padding: 22px; }
.chat-welcome-icon { width: 40px; height: 40px; border-radius: 12px; color: var(--chat-accent); background: var(--chat-tint); font-size: 22px; }
.chat-welcome h2 { font-size: 22px; color: var(--chat-ink); font-weight: 600; letter-spacing: -.02em; }
.chat-welcome p { max-width: 380px; color: var(--chat-muted); font-size: 13px; line-height: 1.8; }
.chat-message {
  width: fit-content;
  min-width: min(220px, 100%);
  max-width: min(86%, 780px);
  margin-bottom: 24px;
  padding: 14px 17px;
  border: 0;
  border-radius: 12px;
  background: var(--chat-soft);
  box-shadow: none;
}
.chat-message.user { max-width: min(80%, 690px); padding: 14px 17px; background: var(--chat-soft); border: 0; border-radius: 12px; }
.chat-message.assistant .chat-message-head strong,
.chat-message-head strong { color: var(--chat-ink); font-weight: 600; }
.chat-message-head { gap: 8px; margin-bottom: 8px; }
.chat-message-head span,
.chat-run-elapsed,
.chat-thinking { color: var(--chat-muted); }
.chat-run-elapsed { font-variant-numeric: tabular-nums; }
.chat-user-text,
.chat-markdown { color: var(--chat-ink); line-height: 1.85; }
.chat-markdown { min-width: 0; max-width: 100%; }
.chat-markdown .rich-output-document { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.chat-markdown .rich-output-document table { width: max-content; min-width: 100%; max-width: none; }
.chat-markdown pre { color: #fff; background: var(--ink, #22262b); border-radius: 8px; padding: 13px; }
.chat-message-tools { gap: 4px; }
.chat-message-tools .button { display: inline-flex; gap: 5px; min-height: 32px; padding: 5px 7px; border-color: transparent; background: transparent; color: var(--chat-muted); font-size: 12px; }
.chat-message-tools .button:hover { background: var(--chat-soft); }
.chat-message-status { color: var(--chat-muted); background: var(--chat-soft); border-radius: 5px; }
.chat-message-status.running,
.chat-message-status.queued { background: var(--chat-soft); color: var(--chat-muted); }
.chat-message-status.running::before,
.chat-message-status.queued::before { border-color: var(--control-line, #a0a5a9); border-top-color: var(--chat-accent); }
.chat-web-status,
.chat-web-sources span { color: var(--chat-muted); }
.chat-web-sources { border-color: var(--chat-line); border-radius: 8px; background: #fff; }
.chat-web-sources summary { color: var(--chat-ink); }
.chat-web-sources a { color: var(--chat-accent); text-underline-offset: 3px; }
.chat-compose-wrap { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 12px max(24px, calc((100% - 820px) / 2)) 16px; border-color: var(--chat-line); }
.chat-compose-form { min-width: 0; padding: 0; border: 1px solid var(--control-line, #a0a5a9); border-radius: 12px; background: #fff; box-shadow: none; }
.chat-compose-form:focus-within { border-color: var(--chat-accent); }
.chat-compose-form.chat-drop-active { outline-color: var(--chat-accent); background: var(--canvas, #faf9f6); }
.chat-compose-form textarea { min-height: 78px; max-height: min(var(--chat-compose-height-cap, 320px), 35dvh); resize: none; overflow-y: auto; padding: 15px 16px 10px; border-radius: 12px; background: transparent; color: var(--chat-ink); font-size: 14px; line-height: 1.85; }
.chat-compose-form textarea:focus-visible { outline: 0; }
.chat-compose-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.chat-compose-actions { display: flex; grid-column: 1; grid-row: 1; width: 100%; gap: 5px; padding: 8px 10px; border-top: 1px solid var(--chat-line); justify-content: flex-start; flex-wrap: wrap; }
.chat-compose-actions .button { min-height: 36px; padding: 7px 9px; border-radius: 7px; font-size: 12px; }
.chat-compose-actions #chat-send { margin-left: auto; }
.chat-compose-actions #chat-stop { margin-left: auto; }
.chat-compose-actions #chat-send:not([hidden]) + #chat-stop:not([hidden]) { margin-left: 0; }
.chat-add-files { border-color: transparent !important; background: transparent !important; color: var(--chat-muted) !important; white-space: nowrap; }
.chat-add-files:hover { background: var(--chat-soft) !important; }
.chat-compose-settings { display: flex; grid-column: 1; grid-row: 2; width: 100%; flex-wrap: wrap; gap: 5px; padding: 0 10px 11px; }
.chat-compose-settings label,
.chat-compose-form .chat-mode-field { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; color: var(--chat-muted); font-size: 12px; }
.chat-compose-settings > label:not(.chat-web-switch),
.chat-compose-form .chat-mode-field { padding: 2px 6px; border: 1px solid transparent; border-radius: 6px; background: var(--chat-soft); }
.chat-compose-settings > label:not(.chat-web-switch):hover,
.chat-compose-form .chat-mode-field:hover { border-color: var(--control-line, #a0a5a9); }
.chat-compose-settings select,
.chat-compose-form .chat-mode-field select { width: auto; max-width: 205px; min-width: 0; height: 29px; min-height: 29px; padding: 3px 2px; border: 0; border-radius: 4px; background: transparent; color: var(--chat-muted); font-size: 12px; }
.chat-compose-form .chat-mode-field select { max-width: 96px; color: var(--chat-accent); font-weight: 600; }
.chat-compose-settings .chat-model-field select { max-width: min(42vw, 205px); font-weight: 500; }
.chat-compose-settings .chat-model-field > i { color: var(--chat-muted); font-size: 16px; }
.chat-compose-settings label[for="chat-reasoning"] select { max-width: 92px; }
.chat-image-settings { gap: 6px; flex-wrap: wrap; }
.chat-image-params-toggle { min-height: 34px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; color: var(--chat-muted); background: var(--chat-soft); font-size: 12px; font-weight: 500; }
.chat-image-params-toggle:hover { border-color: var(--control-line, #a0a5a9); }
.chat-image-params-toggle:focus-visible { outline-color: var(--chat-accent); }
.chat-image-settings .chat-image-independent { cursor: pointer; padding: 5px; color: var(--chat-muted); }
.chat-image-independent input,
.chat-web-switch input,
.chat-memory-switch input { width: 16px; height: 16px; min-width: 16px; min-height: 16px; margin: 0; flex: none; accent-color: var(--chat-accent); }
.chat-compose-settings .chat-web-switch { min-height: 34px; gap: 5px; padding: 0 7px; border-color: transparent; border-radius: 6px; color: var(--chat-muted); background: var(--chat-soft); }
.chat-web-switch:has(input:checked) { color: var(--chat-accent); background: var(--chat-tint); border-color: var(--control-line, #a0a5a9); }
.chat-web-switch:focus-within { outline-color: var(--chat-accent); }
.chat-image-params-panel { width: min(340px, calc(100vw - 38px)); max-height: min(480px, 60dvh); overflow-y: auto; color: var(--chat-ink); border: 0; border-radius: 12px; box-shadow: 0 12px 38px rgba(25, 30, 35, .16); }
.chat-compose-settings .chat-image-params-fields label { display: grid; color: var(--chat-muted); }
.chat-compose-settings .chat-image-params-fields select { width: 100%; min-height: 36px; height: 36px; padding: 5px 7px; border: 1px solid var(--chat-line); border-radius: 6px; background: #fff; }
.chat-image-dimensions { background: var(--chat-soft); color: var(--chat-muted); font-variant-numeric: tabular-nums; border-radius: 6px; }
.chat-image-advanced { margin-top: 0; padding-top: 10px; border-top: 1px solid var(--chat-line); }
.chat-image-advanced summary { cursor: pointer; font-size: 12px; font-weight: 500; }
.chat-image-advanced .chat-image-params-fields { margin-top: 10px; }
.chat-image-advanced input { width: 100%; min-height: 36px; padding: 5px 7px; color: var(--chat-ink); border: 1px solid var(--chat-line); border-radius: 6px; background: #fff; }
.chat-compose-help { margin: 10px 3px 0; color: var(--chat-muted); font-size: 12px; }
.chat-compose-help summary { display: flex; align-items: center; gap: 5px; min-height: 25px; list-style: none; }
.chat-compose-help summary::-webkit-details-marker { display: none; }
.chat-compose-help summary::after { content: "\e136"; font-family: "Phosphor"; font-weight: normal; margin-left: 3px; }
.chat-compose-help[open] summary::after { content: "\e13c"; }
.chat-compose-help p { max-width: 75ch; color: var(--chat-muted); line-height: 1.8; }
.chat-compose-hint { color: var(--chat-muted); }
.chat-attachment-list { margin: 0; padding: 9px 12px 0; }
.chat-attachment-list:empty { padding: 0; }
.chat-pending-summary { padding: 2px 0 7px; gap: 10px; border: 0; border-radius: 0; background: transparent; }
.chat-pending-thumb { width: 40px; height: 44px; border-radius: 6px; color: var(--chat-accent); background: var(--chat-soft); box-shadow: 0 2px 5px rgba(23, 51, 37, .14); }
.chat-pending-thumb img,
.chat-pending-card-preview img { object-fit: contain; }
.chat-pending-open,
.chat-pending-clear { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; font-size: 12px; }
.chat-pending-open { color: var(--chat-muted); overflow: visible; }
.chat-pending-open > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-pending-open > i { flex: none; }
.chat-pending-clear { color: var(--danger, #a13a30); padding: 5px 6px; }
.chat-pending-loading { color: var(--chat-muted); }
.chat-pending-gallery { margin-top: 2px; padding: 11px 0; border: 0; border-top: 1px solid var(--chat-line); border-radius: 0; }
.chat-pending-tab { min-height: 32px; color: var(--chat-muted); font-size: 12px; border-radius: 5px; }
.chat-pending-tab[aria-pressed="true"] { border-color: transparent; background: var(--chat-tint); color: var(--chat-accent); }
.chat-pending-card { background: var(--chat-soft); border: 0; border-radius: 7px; }
.chat-pending-card-preview,
.chat-attachment-preview { background: var(--chat-soft); color: var(--chat-accent); }
.chat-pending-card-info strong { color: var(--chat-ink); font-size: 12px; }
.chat-pending-card-info small,
.chat-attachment-stage,
.chat-pending-empty { color: var(--chat-muted); font-size: 11px; }
.chat-pending-tooltip { border: 0; box-shadow: 0 10px 28px rgba(25, 30, 35, .16); }
.chat-pending-tooltip span,
.chat-pending-table-details { color: var(--chat-muted); }
.chat-pending-tooltip i,
.chat-pending-table-details i { color: var(--chat-accent); }
.chat-message-attachment { border-color: var(--chat-line); border-radius: 7px; }
.chat-attachment-info small { color: var(--chat-muted); font-size: 11px; }
.chat-attachment-action,
.chat-attachment-reuse { display: inline-flex; align-items: center; gap: 4px; color: var(--chat-accent); }
.chat-generated-image { margin: 16px 0 0; max-width: 680px; }
.chat-generated-image img { display: block; max-width: 100%; max-height: 650px; object-fit: contain; border-radius: 8px; }
.chat-generated-image figcaption { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: 12px; margin-top: 10px; }
.chat-generated-image figcaption button { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 5px 7px; border: 0; border-radius: 6px; background: transparent; color: var(--chat-accent); font: inherit; cursor: pointer; }
.chat-generated-image figcaption button:hover { background: var(--chat-soft); }
.chat-generated-image .chat-generated-preview { display: block; max-width: 100%; min-height: 0; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.chat-generated-size { border-radius: 5px; background: var(--chat-soft); color: var(--chat-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chat-generated-image figcaption details { color: var(--chat-muted); line-height: 1.8; }
.chat-generated-image figcaption summary { display: flex; align-items: center; gap: 5px; min-height: 30px; }
.chat-memory-panel { border-color: var(--chat-line); box-shadow: -12px 0 36px rgba(25, 30, 35, .16); }
.chat-memory-head span,
.chat-memory-panel form label,
.chat-memory-card small { color: var(--chat-muted); }
.chat-memory-switch,
.chat-memory-card,
.chat-memory-panel textarea { border-color: var(--chat-line); border-radius: 8px; color: var(--chat-ink); }
.chat-memory-card > div { flex-wrap: wrap; }
.chat-memory-card small { font-size: 11px; }
.chat-attachment-viewer[open] { border: 0; color: var(--chat-ink); box-shadow: 0 20px 65px rgba(25, 30, 35, .16); }
.chat-attachment-viewer::backdrop { background: rgba(25, 30, 35, .38); }
.chat-viewer-toolbar select { min-width: 0; max-width: 100%; border: 1px solid var(--chat-line); border-radius: 6px; background: #fff; color: var(--chat-ink); }
.chat-viewer-image-pane,
.chat-table-preview-scroll { min-width: 0; max-width: 100%; border-color: var(--chat-line); background: var(--chat-soft); border-radius: 8px; }
.chat-table-preview-scroll table { min-width: 100%; width: max-content; }
.chat-table-preview-scroll th { background: var(--chat-soft); color: var(--chat-ink); }
.chat-table-preview-scroll :is(th, td) { border-color: var(--chat-line); }
.chat-table-preview-note,
.chat-table-preview-footer { color: var(--chat-muted); }
.chat-table-preview-footer button { border-color: var(--chat-line); color: var(--chat-ink); }
.chat-image-export-form label { color: var(--chat-ink); }
.chat-image-export-form :is(select, input) { min-width: 0; width: min(280px, 100%); max-width: 100%; border-color: var(--chat-line); color: var(--chat-ink); }
.chat-image-export-form p { color: var(--chat-muted); }

@media (min-width: 1051px) {
  .chat-main-head .chat-history-toggle,
  .chat-main-head .chat-new-mobile,
  .chat-history-head .chat-history-close { display: none; }
}
@media (max-width: 1200px) {
  .chat-view { grid-template-columns: 210px minmax(0, 1fr); }
  .chat-history-head { flex-wrap: wrap; }
  .chat-history-head #chat-new { margin-left: auto; }
  .chat-messages,
  .chat-compose-wrap { padding-left: 22px; padding-right: 22px; }
}
@media (max-width: 1050px) {
  .chat-view { display: block; }
  .chat-history { position: absolute; inset: 0 auto 0 0; z-index: 10; width: min(280px, 86%); box-shadow: 12px 0 36px rgba(25, 30, 35, .16); visibility: hidden; pointer-events: none; transform: translateX(-110%); transition: transform .18s ease-out; }
  .chat-view.chat-history-expanded .chat-history { visibility: visible; pointer-events: auto; transform: translateX(0); }
  .chat-main { height: 100%; }
  .chat-history-close,
  .chat-new-mobile,
  .chat-history-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
  .chat-history-toggle { width: auto; min-height: 36px; min-width: 36px; padding: 7px; color: var(--chat-muted); font-size: 12px; }
  .chat-main-head { flex-wrap: wrap; gap: 8px; padding: 9px 16px; }
  .chat-main-head > div { flex: 1; }
  .chat-main-head > .button { min-height: 36px; padding: 5px 8px; font-size: 12px; }
  .chat-main-head #chat-memory-open { margin-left: auto; }
  .chat-message { max-width: 92%; }
  .chat-message.user { max-width: 89%; }
  .chat-history-actions { opacity: 1; }
  .chat-history-actions .icon-button { min-width: 34px; min-height: 34px; width: 34px; height: 34px; }
}
@media (max-width: 760px) {
  .chat-main-head { padding: 8px 12px; gap: 6px; }
  .chat-main-head > div { flex-basis: calc(100% - 76px); }
  .chat-main-head #chat-new-mobile { margin-left: auto; }
  .chat-main-head #chat-memory-open { margin-left: 0; }
  .chat-messages { padding: 20px 14px; }
  .chat-message,
  .chat-message.user { padding: 12px 14px; }
  .chat-message-head { flex-wrap: wrap; gap: 4px 8px; }
  .chat-compose-wrap { padding: 8px 11px 12px; }
  .chat-compose-form textarea { min-height: 76px; padding: 12px 12px 8px; }
  .chat-compose-actions { gap: 4px; padding: 6px 7px; }
  .chat-compose-actions .button { min-height: 40px; padding: 6px 7px; }
  .chat-compose-settings { gap: 4px; padding: 0 8px 8px; }
  .chat-compose-settings label { display: inline-flex; }
  .chat-compose-settings select,
  .chat-compose-form .chat-mode-field select { width: auto; height: 36px; min-height: 36px; }
  .chat-compose-settings .chat-model-field select { width: auto; max-width: min(56vw, 205px); }
  .chat-compose-settings label[for="chat-reasoning"] select { width: auto; max-width: 92px; }
  .chat-image-settings { grid-column: auto; }
  .chat-image-params-toggle,
  .chat-compose-settings .chat-web-switch,
  .chat-image-settings .chat-image-independent { min-height: 40px; }
  .chat-image-params-panel { left: 0; width: min(340px, calc(100vw - 46px)); }
  .chat-compose-help { font-size: 11px; }
  .chat-compose-help summary { min-height: 32px; }
  .chat-attachment-list { padding: 7px 10px 0; }
  .chat-pending-summary { gap: 7px; }
  .chat-pending-thumb { width: 35px; height: 39px; }
  .chat-pending-open,
  .chat-pending-clear { min-height: 40px; font-size: 11px; }
  .chat-pending-cards { max-height: min(240px, 28dvh); }
  .chat-pending-tab { min-height: 36px; }
  .chat-generated-image img { max-height: 420px; }
  .chat-generated-image figcaption button { min-height: 38px; }
  .chat-viewer-toolbar strong { flex-basis: 100%; max-width: 100%; }
  .chat-attachment-viewer[open] { padding: 12px; }
  .chat-image-export-form .chat-export-custom-size { max-width: 100%; }
  .chat-image-export-form .chat-export-custom-size input { width: min(110px, 36vw); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-history,
  .chat-pending-thumb { transition: none; }
}
/* Uploaded images stay compact; generated results retain their full preview. */
.chat-view { font-size:14px; gap:26px; background:var(--canvas,#faf9f6); border:0; }
.chat-history { background:var(--surface,#fff); border-radius:8px; }
.chat-main { background:var(--surface,#fff); border-radius:12px; }
.chat-history-open strong,.chat-search-label input { font-size:14px; }
.chat-user-text,.chat-markdown { font-size:15px; overflow-wrap:anywhere; }
.chat-message { background:transparent; max-width:min(100%,820px); width:100%; padding:12px 0; }
.chat-message.assistant { background:var(--chat-reply-surface,var(--chat-soft)); padding:16px 20px; border-radius:12px; }
.chat-message.assistant .chat-message-tools .button:hover { background:var(--surface,#fff); }
.chat-message.user { background:var(--chat-soft); max-width:min(88%,740px); width:fit-content; padding:14px 17px; }
.chat-view { --chat-user-surface:#6864a5; --chat-user-ink:#fff; }
.chat-message.user { background:var(--chat-user-surface); color:var(--chat-user-ink); border-radius:12px 12px 3px 12px; }
.chat-message.user .chat-user-text,
.chat-message.user .chat-message-head strong,
.chat-message.user .chat-message-head span { color:var(--chat-user-ink); }
.chat-message.user .chat-message-attachment { color:var(--chat-ink); }
.chat-message.user .chat-sent-image { background:transparent; color:var(--chat-user-ink); }
.chat-message.user .chat-sent-image :is(.chat-attachment-action,.chat-attachment-reuse,.chat-attachment-name) { color:var(--chat-user-ink); }
.chat-compose-form textarea { font-size:15px; }
.chat-compose-form { border-color:var(--control-line,#a0a5a9); }
.chat-compose-actions .button,.chat-compose-settings select,.chat-compose-form .chat-mode-field select,.chat-image-params-toggle { font-size:14px; }
.chat-compose-form textarea:focus-visible { outline:2px solid var(--chat-accent); outline-offset:-3px; }
.chat-message-attachments { display:flex; width:100%; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.chat-message-attachment.chat-sent-image { display:grid; grid-template-columns:96px; width:96px; padding:0; border:0; gap:4px; flex:none; }
.chat-sent-image .chat-attachment-preview { width:96px; height:96px; padding:4px; border:1px solid var(--chat-line); border-radius:8px; background:var(--surface,#fff); }
.chat-sent-image .chat-attachment-preview img { width:100%; height:100%; object-fit:contain; border-radius:4px; }
.chat-sent-image .chat-attachment-info { width:100%; min-width:0; }
.chat-sent-image > * { grid-column:1; grid-row:auto; justify-self:stretch; }
.chat-view .button.primary,.chat-attachment-viewer .button.primary { background:var(--ink,#22262b); border-color:var(--ink,#22262b); }
.chat-view .button.primary:hover,.chat-attachment-viewer .button.primary:hover { background:var(--primary-hover,#3a4148); border-color:var(--primary-hover,#3a4148); }
.chat-sent-image .chat-attachment-name { display:block; width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12px; }
.chat-sent-image .chat-attachment-info small { display:none; }
.chat-sent-image :is(.chat-attachment-action,.chat-attachment-reuse) { justify-content:flex-start; min-height:28px; font-size:12px; padding:2px 0; }
.chat-pending-thumb { box-shadow:none; }
.chat-generated-image .chat-generated-preview { width:auto; }
.chat-viewer-toolbar :is(a,button) { cursor:pointer; }
@media(max-width:1050px) { .chat-view { gap:0; } .chat-view.chat-history-expanded .chat-history { z-index:20; } }
@media (pointer:coarse) and (orientation:landscape) { .chat-view { --chat-compose-height-cap:280px; } }
@media(max-width:760px) {
 .chat-user-text,.chat-markdown,.chat-compose-form textarea { font-size:16px; }
 .chat-message-attachment.chat-sent-image { width:80px; grid-template-columns:80px; }
 .chat-sent-image .chat-attachment-preview { width:80px; height:80px; }
 .chat-sent-image :is(.chat-attachment-action,.chat-attachment-reuse) { min-height:44px; }
 .chat-compose-actions .button,.chat-compose-settings select,.chat-compose-form .chat-mode-field select,.chat-image-params-toggle,.chat-compose-settings .chat-web-switch { min-height:44px; height:auto; }
 .chat-viewer-toolbar :is(a,button,select),.chat-generated-image figcaption button { min-height:44px; }
 .chat-main-head > .button,.chat-history-actions .icon-button,.chat-history-toggle { min-height:44px; min-width:44px; }
}

/* The history and message rows must shrink before the bottom composer does. */
.chat-main { display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.chat-compose-wrap { min-height:0; }
.chat-text-params-panel {
  position:absolute; z-index:40; width:280px; padding:16px; border:1px solid var(--chat-line);
  border-radius:12px; background:var(--surface,#fff); color:var(--chat-ink);
  box-shadow:0 12px 38px rgba(25,30,35,.16); overflow-y:auto;
}
.chat-text-params-panel > strong { display:block; margin-bottom:12px; font-size:14px; }
.chat-text-params-panel > label { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:40px; }
.chat-text-params-panel > label + label { margin-top:10px; }
.chat-text-params-panel select { max-width:160px; min-height:36px; }
@media(min-width:761px) {
 .chat-compose-form textarea { min-height:64px; padding:13px 14px 8px; }
 .chat-compose-controls { display:block; }
 .chat-compose-actions { display:flex; flex-wrap:nowrap; align-items:center; gap:6px; padding:8px; }
 .chat-compose-actions > * { flex-shrink:0; }
 .chat-compose-actions > .chat-compose-settings { display:flex; flex:1 1 auto; min-width:0; align-items:center; gap:6px; padding:0; }
 .chat-compose-actions #chat-send { margin-left:auto; }
 .chat-compose-actions > .button { min-height:36px; padding:6px 9px; }
 .chat-compose-actions .chat-add-files { width:36px; min-width:36px; padding:6px; }
 .chat-compose-actions .chat-add-files span { display:none; }
 .chat-compose-actions .chat-mode-field { min-width:0; flex-shrink:1; }
 .chat-compose-actions .chat-mode-field select { max-width:92px; }
 .chat-compose-settings .chat-model-field { flex:0 1 auto; min-width:0; }
 .chat-compose-settings .chat-model-field select { max-width:220px; min-width:110px; }
 .chat-compose-settings #chat-reasoning-field { flex-shrink:0; }
 .chat-compose-settings #chat-reasoning-field > span { display:none; }
 .chat-image-settings { flex-wrap:nowrap; flex-shrink:0; }
 .chat-compose-form.chat-toolbar-compact .chat-compose-actions { gap:5px; }
 .chat-toolbar-compact .chat-model-field { flex:1 1 auto; }
 .chat-toolbar-compact .chat-model-field select { width:100%; min-width:80px; max-width:220px; }
 .chat-toolbar-compact .chat-mode-field select { max-width:90px; }
 .chat-toolbar-compact .chat-image-params-toggle { white-space:nowrap; }
 .chat-toolbar-compact .chat-compose-settings { justify-content:flex-start; }
 .chat-toolbar-compact .chat-text-params-panel select { min-width:100px; }
}