body.has-chat-workspace { overflow: hidden; padding-bottom: 0; }
body.has-chat-workspace .app-shell { padding-bottom: 0; }
body.has-chat-workspace.has-chat-overflow-fallback { overflow: auto; padding-bottom: 0; }
body.has-chat-workspace .toast-region { top: 80px; bottom: auto; max-width: calc(100vw - 28px); pointer-events: none; }

#view[data-workspace-kind="chat"] {
  display: flex;
  flex-direction: column;
  height: var(--chat-workspace-height, calc(100dvh - 130px));
  min-height: 0;
  padding-bottom: 0;
}
#view[data-workspace-kind="chat"] > .workflow-heading { flex: none; margin-bottom: 18px; }
#view[data-workspace-kind="chat"] > .resume-notice { flex: none; }
#view .source-chat-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: stretch;
  gap: 22px;
  min-height: 0;
  min-width: 0;
  flex: 1;
}
#view .source-chat-history { min-height: 0; padding-right: 16px; overflow: auto; }
#view .source-chat-history > summary { font-size: 13px; }
#view .source-chat-history-list { max-height: none; padding: 0; }
#view .source-chat-history-row { border-radius: 4px; }
#view .source-chat-history-row.selected { background: var(--strong); border-color: var(--navigation-accent); }
#view .source-chat-open b { font-size: 13px; line-height: 1.6; }
#view .source-chat-open small { font-size: 11px; }
#view .source-chat-history-actions { gap: 6px; }
#view .source-chat-history-actions .text-button { min-height: 44px; padding: 6px 8px; font-size: 12px; }
#view .source-chat-new { margin: 6px 0 12px; font-size: 13px; }
#view .source-chat-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  height: 100%;
  min-height: 0;
  min-width: 0;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}
#view .source-chat-main:not(:has(.source-chat-footer)) { grid-template-rows: auto minmax(0, 1fr) auto; }
#view .source-chat-header { padding: 12px 0; gap: 10px; min-height: 48px; }
#view .source-chat-header > div:first-child { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
#view .source-chat-header > div:first-child b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.5;
}
#view .source-chat-header small { margin: 0; font-size: 11px; }
#view .source-chat-header .mode-switch { width: auto; padding: 2px; min-height: 0; }
#view .source-chat-header .mode-option { min-height: 38px; padding: 5px 10px; }
#view .source-chat-header .mode-option b { font-size: 11px; }
#view .source-chat-header .mode-option small { display: none; }
#view .source-chat-scroll { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 18px 6px 18px 0; scrollbar-width: thin; scroll-padding-bottom: 16px; }
#view .source-chat-welcome { max-width: 570px; margin: 8px auto 0; padding: 0; }
#view .source-chat-welcome > .workflow-logo { width: 44px; height: 44px; border: 1px solid color-mix(in srgb, var(--workspace-accent) 20%, var(--line)); border-radius: 8px; background: color-mix(in srgb, var(--workspace-accent) 8%, var(--panel)); color: var(--workspace-accent); }
#view .source-chat-welcome > .workflow-logo svg { width: 28px; height: 28px; }
#view .source-chat-welcome p { margin: 10px 0 14px; padding: 10px 12px; border-left: 2px solid var(--workspace-accent); background: color-mix(in srgb, var(--workspace-accent) 4%, var(--panel)); font-size: 15px; line-height: 1.8; color: var(--text); }
#view .source-chat-examples { gap: 8px; margin: 0; }
#view .source-chat-examples button {
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
}
#view .source-chat-examples button:hover { border-color: var(--workspace-accent); background: color-mix(in srgb, var(--workspace-accent) 6%, var(--panel)); }
#view .source-chat-examples button svg { display: block; width: 16px; height: 16px; color: var(--workspace-accent); }
#view .source-chat-message { max-width: 820px; padding: 0; margin: 0 auto 22px; }
#view .source-chat-message.user { margin-left: 30px; padding: 12px 14px; background: var(--strong); border: 1px solid var(--line); border-radius: 8px; }
#view .source-chat-message header b { font-size: 12px; color: var(--navigation-accent); }
#view .source-chat-message.user header b { color: var(--muted); }
#view .source-chat-message header .text-button { padding-inline: 12px; }
#view .source-chat-text { font-size: 15px; line-height: 1.85; }
#view .source-chat-error { flex-wrap: wrap; padding: 12px; gap: 10px; font-size: 13px; }
#view .source-chat-error .button { font-size: 13px; }
#view #workflowForm.source-chat-composer,
#view #chatFollowup.source-chat-composer {
  margin: 0 0 12px;
  padding: 10px 12px;
  min-width: 0;
  border: 1px solid var(--line2);
  border-radius: 8px;
  background: var(--field-surface);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--ink) 4%, transparent);
}
#view .source-chat-composer:focus-within { border-color: var(--navigation-accent); box-shadow: 0 0 0 2px var(--strong); }
#view .source-chat-composer textarea {
  display: block;
  width: 100%;
  height: 56px;
  min-height: 56px;
  max-height: 128px;
  padding: 0;
  border: 0;
  outline: 0;
  resize: none;
  font-size: 16px;
  line-height: 1.75;
  background: transparent;
  color: var(--ink);
}
#view .source-chat-compose-footer { margin-top: 6px; gap: 8px; min-height: 44px; flex-wrap: wrap; }
#view .source-chat-compose-footer > small { font-size: 11px; min-width: 0; flex: 1 1 10em; overflow-wrap: anywhere; }
#view .source-chat-compose-footer > div { margin-left: auto; }
#view .source-chat-compose-footer .cost { display: inline; font-size: 11px; white-space: normal; }
#view .source-chat-compose-footer .cost b { font-size: 12px; }
#view .source-chat-compose-footer .text-button { padding: 8px 6px; font-size: 12px; }
#view .source-chat-send {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 8px;
  background: var(--navigation-accent);
  color: var(--control-on-selected);
}
#view .source-chat-send svg { width: 23px; height: 23px; }
#view .source-chat-footer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 6px; padding: 0 0 4px; margin-top: -8px; }
#view .source-chat-footer .text-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 4px 6px; gap: 4px; font-size: 12px; white-space: nowrap; }
#view .source-chat-footer .danger { width: 44px; padding: 0; }

/* Keep a usable message viewport when system text size makes the chrome taller. */
#view.chat-condensed .source-chat-header { padding-block: 4px; min-height: 38px; }
#view.chat-condensed .source-chat-header small { font-size: 10px; }
#view.chat-condensed .source-chat-scroll { padding-block: 8px; }
#view.chat-condensed .source-chat-message { margin-bottom: 14px; }
#view.chat-condensed .source-chat-message.user { padding-block: 8px; }
#view.chat-condensed .source-chat-composer { padding-block: 7px; }
#view.chat-condensed .source-chat-composer textarea { min-height: max(44px, 1.75em); height: max(44px, 1.75em); }
#view.chat-condensed .source-chat-footer { margin-top: 2px; padding-block: 0; }
#view.chat-condensed .source-chat-footer .text-button { min-height: 38px; padding-block: 4px; }
#view.chat-overflow-fallback { height: auto !important; min-height: 50dvh; overflow: visible; }
#view.chat-overflow-fallback .source-chat-layout { min-height: 50dvh; }
#view.chat-overflow-fallback .source-chat-main { height: auto; min-height: 50dvh; overflow: visible; }
#view.chat-overflow-fallback .source-chat-scroll { max-height: none; overflow: visible; }

@media (max-width: 900px) {
  #view .source-chat-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
  #view .source-chat-history { position: relative; padding: 0; overflow: visible; border: 0; }
  #view .source-chat-history > summary { width: fit-content; }
  #view .source-chat-history[open] > .source-chat-history-body {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 6;
    max-height: min(340px, 55dvh);
    overflow: auto;
    padding: 12px;
    border: 1px solid var(--line2);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: var(--ui-shadow-hover);
  }
  #view .source-chat-history-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  #view .source-chat-history-list { max-height: none; }
}
@media (max-width: 820px) {
  #view[data-workspace-kind="chat"] { height: var(--chat-workspace-height, calc(100dvh - 190px)); padding-bottom: 0; }
  #view[data-workspace-kind="chat"] > .workflow-heading { margin-bottom: 8px; padding-bottom: 10px; }
  #view[data-workspace-kind="chat"] .workflow-heading h1 { font-size: 20px; }
  #view[data-workspace-kind="chat"] .workflow-heading :is(.eyebrow, .workflow-description) { display: none; }
  #view[data-workspace-kind="chat"] .workflow-heading-icon { flex-basis: 34px; width: 34px; height: 38px; }
  #view[data-workspace-kind="chat"] .workflow-heading-icon svg { width: 22px; height: 22px; }
  #view[data-workspace-kind="chat"] > .resume-notice { gap: 6px 12px; margin-bottom: 4px; padding-block: 6px; }
  #view[data-workspace-kind="chat"] .resume-notice small { display: none; }
  #view[data-workspace-kind="chat"] .resume-actions { margin-left: auto; }
  #view[data-workspace-kind="chat"] .resume-actions :is(.button, .text-button) { padding-inline: 6px; font-size: 11px; }
  #view .source-chat-main { border: 0; padding: 0; border-radius: 0; background: transparent; }
  #view .source-chat-header { min-height: 38px; padding: 4px 0 10px; flex-wrap: nowrap; }
  #view .source-chat-header > div:first-child { display: grid; gap: 2px; }
  #view .source-chat-header .mode-switch { flex: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view .source-chat-scroll { padding: 14px 2px 14px 0; }
  #view .source-chat-welcome { margin: 0; }
  #view .source-chat-welcome p { font-size: 14px; }
  #view .source-chat-welcome > .workflow-logo { display: none; }
  #view .source-chat-message.user { margin-left: 20px; background: var(--strong); }
  #view #workflowForm.source-chat-composer,
  #view #chatFollowup.source-chat-composer { margin-bottom: 0; }
  #view .source-chat-footer { margin: 6px 0 0; padding: 0; }
  #view .source-chat-footer .text-button { min-width: 0; white-space: normal; line-height: 1.35; overflow-wrap: anywhere; }
  body.has-chat-workspace.has-chat-overflow-fallback .app-shell { padding-bottom: calc(var(--shell-nav-height, 72px) + 24px); }
  #view.chat-condensed .source-chat-welcome p { margin-top: 0; }
  #view.chat-condensed .source-chat-composer textarea { min-height: max(44px, 1.75em); height: max(44px, 1.75em); max-height: max(76px, 3.5em); }
  #view.chat-keyboard-open > .resume-notice,
  #view.chat-keyboard-open > .workflow-heading,
  #view.chat-keyboard-open .source-chat-history,
  #view.chat-keyboard-open .source-chat-footer,
  #view.chat-keyboard-open .source-chat-header { display: none; }
  #view.chat-keyboard-open .source-chat-layout { display: block; }
  #view.chat-keyboard-open .source-chat-main { grid-template-rows: minmax(0, 1fr) auto; }
  #view.chat-keyboard-open .source-chat-main:not(:has(.source-chat-footer)) { grid-template-rows: minmax(0, 1fr) auto; }
  body.has-chat-keyboard .topbar { display: none; }
  body.has-chat-keyboard .app-layout { padding-top: 10px; }
  body.has-chat-keyboard .sidebar { visibility: hidden; pointer-events: none; }
  #view.chat-condensed .source-chat-header .mode-switch { transform: scale(.94); transform-origin: right center; }
  #view.chat-condensed .source-chat-footer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; }
  #view.chat-condensed .source-chat-footer .danger { width: 44px; margin-left: 0; }
  #view.chat-condensed .source-chat-footer .text-button { white-space: normal; line-height: 1.35; }
}
@media (max-width: 820px) and (max-height: 520px) {
  body.has-chat-workspace .topbar { display: none; }
  body.has-chat-workspace .app-layout { padding-top: 10px; }
  #view[data-workspace-kind="chat"] > .workflow-heading { margin-bottom: 4px; padding-bottom: 6px; }
  #view .source-chat-layout { gap: 4px; }
  #view .source-chat-header:not(:has(.mode-switch)) { min-height: 0; height: 0; padding: 0; border: 0; overflow: hidden; visibility: hidden; }
  #view .source-chat-scroll { padding-block: 6px; }
}