/* The writing room follows the visual viewport, including a mobile keyboard. */
@media (max-width: 1024px) {
  html[data-theme] body[data-page="chat"] {
    height: var(--app-height, 100dvh);
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }
  html[data-theme] body[data-page="chat"] .workspace {
    display: flex;
    flex-direction: column;
    height: var(--app-height, 100dvh);
    min-height: 0;
    max-height: var(--app-height, 100dvh);
    padding-top: 0;
    padding-bottom: 16px;
    padding-inline: clamp(12px, 2.4vw, 24px);
    overflow: hidden;
  }
  html[data-theme] body[data-page="chat"] .topbar {
    flex: 0 0 auto;
    margin-bottom: 0;
  }
  html[data-theme] body[data-page="chat"] #view {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
  html[data-theme] .chat-v2 {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding-top: 10px;
  }
  html[data-theme] .chat-v2 .chat-page-heading {
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
  }
  html[data-theme] .chat-v2 .chat-page-label { font-size: 11px; letter-spacing: .1em; }
  html[data-theme] .chat-v2 .chat-page-heading h1 {
    max-width: none;
    margin-top: 5px;
    font-size: clamp(20px, 2.6vw, 25px);
    line-height: 1.25;
  }
  html[data-theme] .chat-v2 .chat-catalog-link {
    flex-shrink: 0;
    min-height: 44px;
    padding: 7px 0 7px 8px;
    font-size: 12px;
  }
  html[data-theme] .chat-v2 .chat-layout {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: 180px minmax(0, 1fr);
    min-height: 0;
    height: auto;
    max-height: none;
    margin: 0;
    overflow: hidden;
    border-radius: 16px;
  }
  html[data-theme] .chat-v2 .chat-main {
    display: flex;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }
  html[data-theme] .chat-v2 .chat-header {
    flex: 0 0 auto;
    min-height: 64px;
    gap: 10px;
    padding: 8px 16px;
  }
  html[data-theme] .chat-v2 .chat-header-leading {
    flex: 1;
    min-width: 0;
    gap: 8px;
  }
  html[data-theme] .chat-v2 .model-select {
    min-width: 0;
    min-height: 44px;
    gap: 9px;
  }
  html[data-theme] .chat-v2 .model-meta { min-width: 0; gap: 3px; }
  html[data-theme] .chat-v2 .model-meta strong,
  html[data-theme] .chat-v2 .model-meta small {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  html[data-theme] .chat-v2 .model-meta strong { font-size: 14px; }
  html[data-theme] .chat-v2 .model-meta small { font-size: 12px; }
  html[data-theme] .chat-v2 .model-select > .icon { margin-left: 1px; flex-shrink: 0; }
  html[data-theme] .chat-v2 .chat-body {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding: 22px 20px;
    gap: 24px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-padding-block: 16px;
  }
  html[data-theme] .chat-v2 .chat-empty {
    width: 100%;
    min-width: 0;
    min-height: min-content;
    max-width: 620px;
    margin: auto;
    padding: 8px 0;
  }
  html[data-theme] .chat-v2 .chat-empty h2 { font-size: clamp(28px, 4vw, 38px); line-height: 1.18; }
  html[data-theme] .chat-v2 .chat-empty > p { margin: 12px 0 19px; font-size: 13px; line-height: 1.7; }
  html[data-theme] .chat-v2 .chat-welcome-symbol { margin-bottom: 17px; }
  html[data-theme] .chat-v2 .chat-welcome-label { margin-bottom: 8px; }
  html[data-theme] .chat-v2 .chat-suggestions { gap: 8px; }
  html[data-theme] .chat-v2 .chat-suggestions .chat-suggestion {
    min-height: 112px;
    padding: 12px 12px 26px;
  }
  html[data-theme] .chat-v2 .chat-suggestion-top { margin-bottom: 10px; }
  html[data-theme] .chat-v2 .chat-suggestion > strong { font-size: 12px; }
  html[data-theme] .chat-v2 .chat-suggestion-description { display: none; }
  html[data-theme] .chat-v2 .chat-composer-wrap {
    flex: 0 0 auto;
    min-width: 0;
    padding: 8px 14px 10px;
  }
  html[data-theme] .chat-v2 .chat-composer {
    margin: 0;
    padding: 12px 12px 7px;
    border-radius: 13px;
  }
  html[data-theme] .chat-v2 #chat-input {
    width: 100%;
    min-height: 48px;
    max-height: 140px;
    font-size: 16px;
    line-height: 1.5;
    resize: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  html[data-theme] .chat-v2 .chat-composer-bottom { min-height: 44px; margin-top: 4px; gap: 8px; }
  html[data-theme] .chat-v2 .chat-composer-tools { min-width: 0; gap: 8px; }
  html[data-theme] .chat-v2 .chat-composer-submit { flex-shrink: 0; gap: 8px; }
  html[data-theme] .chat-v2 .chat-send,
  html[data-theme] .chat-v2 .chat-attachment-button {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  html[data-theme] .chat-v2 .chat-send { border-radius: 11px; }
  html[data-theme] .chat-v2 .chat-cost { min-width: 0; font-size: 12px; }
  html[data-theme] .chat-v2 .chat-cost small { font-size: 11px; white-space: nowrap; }
  html[data-theme] .chat-v2 .chat-disclaimer { margin-top: 6px; max-width: none; font-size: 11px; line-height: 1.45; }
  html[data-theme] .chat-v2 .chat-file-chip { max-width: 100%; margin-bottom: 8px; padding: 2px 5px 2px 9px; }
  html[data-theme] .chat-v2 .chat-file-chip > span { min-width: 0; max-width: 210px; }
  html[data-theme] .chat-v2 .chat-file-chip > small { display: none; }
  html[data-theme] .chat-v2 .chat-file-chip > button { width: 44px; height: 44px; flex-shrink: 0; }
  html[data-theme] .chat-v2 .message { max-width: 100%; min-width: 0; gap: 10px; }
  html[data-theme] .chat-v2 .message-content { min-width: 0; font-size: 15px; line-height: 1.75; overflow-wrap: anywhere; }
  html[data-theme] .chat-v2 .message-text { overflow-wrap: anywhere; word-break: normal; }
  html[data-theme] .chat-v2 .message-content :is(pre, code) { max-width: 100%; }
  html[data-theme] .chat-v2 .message-content pre { overflow-x: auto; white-space: pre; -webkit-overflow-scrolling: touch; }
  html[data-theme] .chat-v2 .message.user .message-content { padding: 12px 14px; }
  html[data-theme] .chat-v2 .message-avatar { width: 28px; height: 28px; flex-shrink: 0; }
  html[data-theme] .chat-v2 .message-author { flex-wrap: wrap; gap: 6px; }
  html[data-theme] .chat-v2 .message-file { max-width: 100%; font-size: 12px; overflow-wrap: anywhere; }
  html[data-theme] .chat-v2 .chat-context-panel { display: none; }
  html[data-theme] .chat-v2 .chat-sidebar {
    display: flex;
    position: relative;
    inset: auto;
    width: auto;
    max-width: none;
    min-height: 0;
    padding: 16px 10px 12px;
    transform: none;
    visibility: visible;
    overflow: hidden;
    box-shadow: none;
  }
  html[data-theme] .chat-v2 .conversation-list { flex: 1 1 auto; min-height: 0; max-height: none; overscroll-behavior: contain; }
  html[data-theme] .chat-v2 .conversation-item { min-height: 56px; padding: 11px 9px; }
  html[data-theme] .chat-v2 .conversation-item strong { font-size: 12px; }
  html[data-theme] .chat-v2 .conversation-item small { font-size: 11px; }
  html[data-theme] .chat-v2 .chat-new-button { min-height: 44px; }
  html[data-theme] .chat-v2 .chat-sidebar-note { padding-top: 15px; }
  html[data-theme] .chat-v2 .chat-private { margin-top: 12px; font-size: 11px; }
  html[data-theme] .chat-v2 .chat-history-toggle,
  html[data-theme] .chat-v2 .chat-history-close,
  html[data-theme] .chat-v2 .chat-mobile-new { display: none; }
  html[data-theme] .chat-v2 .chat-history-overlay { display: none; }
  html[data-theme] body[data-page="chat"].keyboard-open .chat-v2 .chat-page-heading { display: none; }
  html[data-theme] body[data-page="chat"].keyboard-open .chat-v2 { padding-top: 4px; }
  html[data-theme] body[data-page="chat"].keyboard-open .chat-v2 .chat-empty > :not(h2) { display: none; }
  html[data-theme] body[data-page="chat"].keyboard-open .chat-v2 .chat-empty { justify-content: flex-start; padding: 5px 0; }
  html[data-theme] body[data-page="chat"].keyboard-open .chat-v2 .chat-empty h2 { font-size: 23px; }
  html[data-theme] body[data-page="chat"].keyboard-open .chat-v2 .chat-header { min-height: 52px; padding-block: 4px; }
  html[data-theme] body[data-page="chat"].keyboard-open .chat-v2 .chat-disclaimer { display: none; }
  html[data-theme] body[data-page="chat"].keyboard-open .chat-v2 .chat-composer-wrap { padding-bottom: 5px; }
}

@media (max-width: 767px) {
  html[data-theme] body[data-page="chat"] .workspace {
    padding-inline: 10px;
    padding-bottom: calc(var(--mobile-nav-height, 68px) + env(safe-area-inset-bottom, 0px) + 8px);
  }
  html[data-theme] .chat-v2 { padding-top: 6px; }
  html[data-theme] .chat-v2 .chat-page-heading { gap: 8px; margin-bottom: 9px; }
  html[data-theme] .chat-v2 .chat-page-label { font-size: 10px; letter-spacing: .07em; }
  html[data-theme] .chat-v2 .chat-page-heading h1 { font-size: 18px; margin-top: 3px; line-height: 1.25; }
  html[data-theme] .chat-v2 .chat-catalog-link { min-width: 44px; min-height: 44px; font-size: 11px; gap: 4px; }
  html[data-theme] .chat-v2 .chat-layout { grid-template-columns: minmax(0, 1fr); border-radius: 13px; }
  html[data-theme] .chat-v2 .chat-header { min-height: 62px; padding: 7px 10px; gap: 6px; }
  html[data-theme] .chat-v2 .chat-header-leading { gap: 4px; }
  html[data-theme] .chat-v2 .chat-header-trailing { flex-shrink: 0; gap: 0; }
  html[data-theme] .chat-v2 .chat-session-label { display: none; }
  html[data-theme] .chat-v2 .chat-model-mark { display: none; }
  html[data-theme] .chat-v2 .model-meta small { font-size: 11px; }
  html[data-theme] .chat-v2 .chat-body { padding: 16px 14px; gap: 21px; }
  html[data-theme] .chat-v2 .chat-empty { margin: auto 0; padding: 4px 0; }
  html[data-theme] .chat-v2 .chat-welcome-symbol { width: 33px; height: 33px; margin-bottom: 12px; border-radius: 11px; }
  html[data-theme] .chat-v2 .chat-welcome-symbol > .icon { width: 20px; height: 20px; }
  html[data-theme] .chat-v2 .chat-welcome-label { margin-bottom: 6px; font-size: 10px; letter-spacing: .08em; }
  html[data-theme] .chat-v2 .chat-empty h2 { font-size: clamp(25px, 7vw, 32px); }
  html[data-theme] .chat-v2 .chat-empty > p { margin: 10px 0 15px; font-size: 13px; line-height: 1.6; }
  html[data-theme] .chat-v2 .chat-suggestions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(156px, 64%);
    grid-template-columns: none;
    gap: 8px;
    width: 100%;
    padding: 1px 1px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  html[data-theme] .chat-v2 .chat-suggestions .chat-suggestion {
    min-height: 101px;
    padding: 12px 12px 25px;
    border-radius: 11px;
    scroll-snap-align: start;
  }
  html[data-theme] .chat-v2 .chat-suggestion-top { margin-bottom: 7px; }
  html[data-theme] .chat-v2 .chat-suggestion > strong { font-size: 13px; line-height: 1.4; margin: 0; }
  html[data-theme] .chat-v2 .chat-suggestion-top > small { font-size: 11px; }
  html[data-theme] .chat-v2 .chat-composer-wrap { padding: 7px 8px 8px; }
  html[data-theme] .chat-v2 .chat-composer { padding: 10px 10px 5px; }
  html[data-theme] .chat-v2 #chat-input { min-height: 47px; max-height: 120px; padding-bottom: 3px; font-size: 16px; }
  html[data-theme] .chat-v2 .chat-composer-bottom { gap: 5px; }
  html[data-theme] .chat-v2 .chat-composer-tools { gap: 5px; }
  html[data-theme] .chat-v2 .chat-enter-hint { display: none; }
  html[data-theme] .chat-v2 .chat-cost small { display: none; }
  html[data-theme] .chat-v2 .chat-composer-divider { display: none; }
  html[data-theme] .chat-v2 .chat-disclaimer { margin-top: 6px; padding-inline: 3px; font-size: 11px; line-height: 1.4; }
  html[data-theme] .chat-v2 .chat-file-chip > span { max-width: 160px; }
  html[data-theme] .chat-v2 .chat-sidebar {
    position: absolute;
    z-index: 8;
    inset: 0 auto 0 0;
    width: min(280px, 90%);
    max-width: none;
    padding: 14px 12px;
    transform: translateX(-101%);
    visibility: hidden;
    border-right: 1px solid var(--chat-line);
    background: var(--chat-panel);
    box-shadow: 14px 0 30px #0005;
    transition: transform 220ms ease, visibility 220ms ease;
  }
  html[data-theme] .chat-v2.history-is-open .chat-sidebar { transform: translateX(0); visibility: visible; }
  html[data-theme] .chat-v2 .chat-sidebar-heading { gap: 6px; padding: 0 0 0 5px; margin-bottom: 12px; }
  html[data-theme] .chat-v2 .chat-sidebar-heading > span { font-size: 15px; }
  html[data-theme] .chat-v2 .chat-history-toggle,
  html[data-theme] .chat-v2 .chat-history-close,
  html[data-theme] .chat-v2 .chat-mobile-new {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--chat-line);
    border-radius: 9px;
    background: var(--chat-panel);
    color: var(--chat-muted);
  }
  html[data-theme] .chat-v2 .chat-history-close { border-color: transparent; background: transparent; }
  html[data-theme] .chat-v2 .chat-history-toggle > .icon,
  html[data-theme] .chat-v2 .chat-history-close > .icon,
  html[data-theme] .chat-v2 .chat-mobile-new > .icon { width: 19px; height: 19px; }
  html[data-theme] .chat-v2 .chat-history-overlay {
    display: block;
    position: absolute;
    z-index: 7;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #03081299;
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease, visibility 220ms ease;
  }
  html[data-theme] .chat-v2.history-is-open .chat-history-overlay { opacity: 1; visibility: visible; }
  html[data-theme] .chat-v2 .chat-private { padding-top: 12px; line-height: 1.5; }
  html[data-theme] .chat-v2 .chat-sidebar-note { padding-top: 12px; padding-bottom: 10px; }
  html[data-theme] .chat-v2 .message { gap: 8px; }
  html[data-theme] .chat-v2 .message-avatar { width: 24px; height: 24px; border-radius: 7px; }
  html[data-theme] .chat-v2 .message-avatar > svg { width: 20px; height: 20px; }
  html[data-theme] .chat-v2 .message-content { font-size: 15px; line-height: 1.7; }
  html[data-theme] .chat-v2 .message.user .message-content { padding: 10px 12px; }
  html[data-theme] .chat-v2 .message-author { font-size: 12px; margin-bottom: 6px; }
  html[data-theme] body[data-page="chat"].keyboard-open .workspace {
    padding-bottom: max(3px, env(safe-area-inset-bottom, 0px));
  }
  html[data-theme] body[data-page="chat"].keyboard-open .chat-v2 .chat-header { min-height: 52px; padding: 4px 8px; }
}

@media (max-width: 1024px) and (max-height: 640px) {
  html[data-theme] .chat-v2 { padding-top: 3px; }
  html[data-theme] .chat-v2 .chat-page-heading { margin-bottom: 6px; }
  html[data-theme] .chat-v2 .chat-page-label { display: none; }
  html[data-theme] .chat-v2 .chat-page-heading h1 { margin: 0; font-size: 16px; }
  html[data-theme] .chat-v2 .chat-catalog-link { min-height: 44px; font-size: 11px; }
  html[data-theme] .chat-v2 .chat-header { min-height: 52px; padding-block: 4px; }
  html[data-theme] .chat-v2 .chat-empty { justify-content: flex-start; margin-block: 0; }
  html[data-theme] .chat-v2 .chat-welcome-symbol,
  html[data-theme] .chat-v2 .chat-welcome-label,
  html[data-theme] .chat-v2 .chat-empty > p { display: none; }
  html[data-theme] .chat-v2 .chat-empty h2 { margin-bottom: 12px; font-size: 24px; }
  html[data-theme] .chat-v2 .chat-empty h2 br { display: none; }
  html[data-theme] .chat-v2 .chat-empty h2 > span { margin-left: .2em; }
  html[data-theme] .chat-v2 .chat-suggestions .chat-suggestion { min-height: 75px; padding-block: 9px 19px; }
  html[data-theme] .chat-v2 .chat-suggestion-top { display: none; }
  html[data-theme] .chat-v2 .chat-composer-wrap { padding-top: 4px; padding-bottom: 5px; }
  html[data-theme] .chat-v2 #chat-input { min-height: 36px; max-height: 84px; }
  html[data-theme] .chat-v2 .chat-disclaimer { display: none; }
  html[data-theme] .chat-v2 .chat-sidebar-note { display: none; }
  html[data-theme] .chat-v2 .chat-list-label { margin-top: 16px; }
}

@media (max-width: 767px) and (max-height: 480px) {
  html[data-theme] body[data-page="chat"] .mobile-bottom-nav { display: none; }
  html[data-theme] body[data-page="chat"] .workspace {
    padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
  }
  html[data-theme] body[data-page="chat"] .chat-page-heading { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] .chat-v2 .chat-body,
  html[data-theme] .chat-v2 .chat-suggestions { scroll-behavior: auto; }
  html[data-theme] .chat-v2 .chat-sidebar,
  html[data-theme] .chat-v2 .chat-history-overlay { transition: none; }
}