.chat-page { height: 100%; overflow: hidden; }
.chat-page .app-shell,
.chat-page .app-stage { height: 100dvh; min-height: 0; }
.chat-page .app-stage { display: grid; grid-template-rows: 64px minmax(0, 1fr); }
.chat-model-summary { margin-top: auto; padding: 13px; display: grid; gap: 5px; background: var(--app-nav-soft); border: 1px solid color-mix(in srgb, var(--app-nav-text) 8%, transparent); border-radius: 12px; }
.chat-model-summary span { color: var(--app-nav-muted); font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.chat-model-summary strong { color: var(--app-nav-text); font-size: 13px; }
.chat-model-summary small { color: var(--app-nav-muted); font-size: 10px; line-height: 1.45; }

.chat-workspace { min-width: 0; min-height: 0; padding: 18px 22px 22px; display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 14px; }
.chat-history,
.chat-thread { min-height: 0; overflow: hidden; background: var(--app-panel); border: 1px solid var(--app-line); border-radius: 15px; box-shadow: 0 8px 24px var(--app-shadow); }
.chat-history { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.chat-history > header { min-height: 64px; padding: 0 14px 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--app-line); }
.chat-history > header > div { display: grid; gap: 3px; }
.chat-history > header strong { font-size: 14px; }
.chat-history > header span { color: var(--app-faint); font-size: 10px; }
.chat-history > header button { min-height: 34px; padding: 0 11px; color: var(--app-nav-text); background: var(--app-nav); border: 0; border-radius: 8px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.chat-history-list { min-height: 0; padding: 7px; overflow-y: auto; }
.chat-history-row { position: relative; margin-bottom: 3px; display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: center; border-radius: 9px; }
.chat-history-row.is-active { background: var(--app-accent-soft); }
.chat-history-open { min-width: 0; min-height: 52px; padding: 8px 7px 8px 10px; display: grid; align-content: center; gap: 4px; color: var(--app-ink); background: transparent; border: 0; font: inherit; text-align: left; cursor: pointer; }
.chat-history-open strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.chat-history-open span { color: var(--app-faint); font-size: 10px; }
.chat-history-delete { width: 28px; height: 28px; display: grid; place-items: center; color: var(--app-faint); background: transparent; border: 0; border-radius: 7px; font-size: 15px; cursor: pointer; }
.chat-history-delete:hover { color: #b44c45; background: color-mix(in srgb, #b44c45 10%, transparent); }
.chat-local-note { margin: 0; padding: 12px 14px; color: var(--app-faint); border-top: 1px solid var(--app-line); font-size: 10px; line-height: 1.4; }

.chat-thread { display: grid; grid-template-rows: 64px minmax(0, 1fr) auto; }
.chat-thread-header { min-width: 0; padding: 0 16px 0 20px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--app-line); }
.chat-thread-title { min-width: 0; display: grid; gap: 3px; }
.chat-thread-title strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.chat-thread-title span { color: var(--app-faint); font-size: 10px; }
.chat-model-picker { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--app-faint); font-size: 10px; font-weight: 700; }
.chat-model-picker select { min-width: 132px; height: 36px; padding: 0 30px 0 10px; color: var(--app-ink); background: var(--app-panel-soft); border: 1px solid var(--app-line); border-radius: 9px; font: inherit; font-size: 12px; font-weight: 650; }
.chat-history-toggle { display: none; }

.chat-messages { min-height: 0; padding: 24px clamp(18px, 6vw, 76px); overflow-y: auto; scroll-behavior: smooth; }
.chat-empty { min-height: 100%; display: grid; place-content: center; justify-items: center; text-align: center; }
.chat-empty .app-nav-icon { width: 42px; height: 42px; margin-bottom: 14px; color: var(--app-accent); background: var(--app-accent-soft); border-radius: 13px; font-size: 23px; }
.chat-empty h1 { margin: 0; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.03em; }
.chat-empty p { max-width: 430px; margin: 9px 0 0; color: var(--app-muted); font-size: 13px; line-height: 1.6; }
.chat-message { max-width: 760px; margin: 0 auto 22px; display: grid; gap: 7px; }
.chat-message-head { display: flex; align-items: center; gap: 8px; color: var(--app-faint); font-size: 10px; }
.chat-message-mark { width: 24px; height: 24px; display: grid; place-items: center; color: var(--app-nav-text); background: var(--app-nav); border-radius: 7px; font-size: 9px; font-weight: 750; }
.chat-message.is-assistant .chat-message-mark { color: var(--app-accent); background: var(--app-accent-soft); }
.chat-message-body { padding-left: 32px; color: var(--app-ink); font-size: 14px; line-height: 1.72; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-message.is-user .chat-message-body { font-weight: 580; }
.chat-thinking { max-width: 760px; margin: 0 auto 22px; padding-left: 32px; color: var(--app-faint); font-size: 12px; }

.chat-composer-wrap { padding: 0 clamp(18px, 6vw, 76px) 18px; }
.chat-status { min-height: 18px; max-width: 760px; margin: 0 auto 5px; color: #b44c45; font-size: 11px; }
.chat-composer { max-width: 760px; min-height: 54px; margin: 0 auto; padding: 7px 7px 7px 14px; display: flex; align-items: flex-end; gap: 9px; background: var(--app-panel-soft); border: 1px solid var(--app-line); border-radius: 14px; box-shadow: 0 6px 20px var(--app-shadow); }
.chat-composer:focus-within { border-color: color-mix(in srgb, var(--app-accent) 55%, var(--app-line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 10%, transparent); }
.chat-composer textarea { width: 100%; max-height: 150px; min-height: 38px; padding: 9px 0 6px; resize: none; color: var(--app-ink); background: transparent; border: 0; outline: 0; font: inherit; font-size: 14px; line-height: 1.45; }
.chat-composer textarea::placeholder { color: var(--app-faint); }
.chat-composer button { min-width: 58px; height: 40px; color: var(--app-nav-text); background: var(--app-nav); border: 0; border-radius: 10px; font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
.chat-composer button:disabled { opacity: .4; cursor: default; }
.chat-composer-note { max-width: 760px; margin: 6px auto 0; color: var(--app-faint); font-size: 9px; text-align: center; }
.chat-history-backdrop { display: none; }
button:focus-visible,
select:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }

@media (max-width: 960px) {
  .chat-workspace { grid-template-columns: 210px minmax(0, 1fr); padding-inline: 14px; }
  .chat-messages,
  .chat-composer-wrap { padding-inline: 20px; }
}

@media (max-width: 720px) {
  .chat-page .app-shell,
  .chat-page .app-stage { height: 100dvh; min-height: 0; }
  .chat-page .app-stage { grid-template-rows: 54px minmax(0, 1fr); }
  .chat-workspace { padding: 0; display: block; }
  .chat-thread { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; grid-template-rows: 58px minmax(0, 1fr) auto; }
  .chat-thread-header { padding-inline: 12px; gap: 10px; }
  .chat-history-toggle { min-height: 34px; padding: 0 9px; display: inline-flex; align-items: center; color: var(--app-muted); background: var(--app-panel-soft); border: 1px solid var(--app-line); border-radius: 8px; font: inherit; font-size: 10px; font-weight: 700; }
  .chat-thread-title { display: none; }
  .chat-model-picker { margin-left: auto; }
  .chat-model-picker span { display: none; }
  .chat-model-picker select { min-width: 116px; height: 34px; }
  .chat-history { position: fixed; z-index: 310; inset: 0 auto 0 0; width: min(86vw, 320px); border: 0; border-radius: 0 15px 15px 0; box-shadow: 18px 0 50px rgba(0,0,0,.28); transform: translateX(-105%); transition: transform .2s ease; }
  .chat-page.is-history-open .chat-history { transform: translateX(0); }
  .chat-history-backdrop { position: fixed; z-index: 300; inset: 0; width: 100%; height: 100%; display: block; background: rgba(8, 12, 9, .38); border: 0; }
  .chat-messages { padding: 20px 15px; }
  .chat-message { margin-bottom: 20px; }
  .chat-message-body { padding-left: 0; font-size: 14px; }
  .chat-composer-wrap { padding: 0 11px calc(10px + env(safe-area-inset-bottom)); }
  .chat-composer { min-height: 50px; padding-left: 12px; border-radius: 13px; }
  .chat-composer-note { display: none; }
}