/* Loaded after each page's local styles so desktop refinements cannot undo
   mobile layout. Keep horizontal scrolling local to code/tables, not pages. */
html { min-width: 0; }
body[data-page] { max-width: 100%; }
body[data-page] :is(input, select, textarea) { min-width: 0; }
body[data-page] :is(.modal, .modal-message, .dialog-message, .toast) { overflow-wrap: anywhere; }
/* Notifications must not intercept taps on navigation or editor controls. */
body[data-page] :is(.toast-stack, .toasts) { pointer-events: none; }
body[data-page="admin"] .toast-close { pointer-events: auto; min-width: 36px; min-height: 36px; }
body[data-page] :is(.modal-backdrop, .modal-bg) {
  top: var(--viewport-top, 0px);
  bottom: auto;
  height: var(--viewport-height, 100dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: max(12px, env(safe-area-inset-top));
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
body[data-page] .modal {
  min-width: 0;
  max-height: calc(var(--viewport-height, 100dvh) - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
body[data-page] .modal-actions { flex-wrap: wrap; }
body[data-page] .modal-actions > :is(button, a) { min-height: 44px; height: auto; }
body[data-page="chat"] .memory-modal { overflow: hidden; }
body[data-page="chat"] .memory-body { min-height: 0; }
body[data-page="library"] .modal-head input { min-width: 0; }
body[data-page="library"] .note-content { min-height: 120px; flex: 1 1 auto; }
body[data-page="library"] .modal-head,
body[data-page="library"] .modal-actions { flex-shrink: 0; }
body[data-page="library"] #note-form { height: min(640px, calc(var(--viewport-height, 100dvh) - 32px)); }
body[data-page="shared"] :is(.shared-title, .conversation-head h2, .message-files li) { overflow-wrap: anywhere; }
body[data-page="shared"] .message-body pre { max-width: 100%; }
body[data-page] :is(.message-content, .message-body) table {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 1080px) {
  body[data-page="admin"] .manual-model-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="admin"] .provider-config-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 861px) and (max-width: 1100px) {
  body[data-page="chat"] .chat-main { grid-template-rows: auto minmax(0, 1fr) auto; }
  body[data-page="chat"] .chat-header { height: auto; flex-wrap: wrap; gap: 4px; padding-block: 6px !important; }
  body[data-page="chat"] .header-left { flex-basis: 100%; }
  body[data-page="chat"] .conversation-title { flex: 1; max-width: 100%; }
  body[data-page="chat"] .header-right { width: 100%; flex-wrap: wrap; gap: 6px; }
  body[data-page="chat"] .header-right > .icon-btn { flex: 0 0 44px; width: 44px; height: 44px; }
  body[data-page="chat"] .model-picker { flex: 1 1 156px; }
  body[data-page="chat"] .project-picker { flex: 1 1 138px; }
  body[data-page="chat"] .context-picker-trigger { width: 100%; height: 44px; }
  body[data-page="chat"] .project-picker .context-picker-menu { left: 0; right: auto; }
  body[data-page="chat"] .workspace-pill:not([hidden]) { order: 6; flex: 1 1 200px; max-width: none; }
  body[data-page="chat"] .preview-link:not([hidden]) { order: 7; min-height: 44px; }
}

@media (max-width: 900px) {
  body[data-page="chat"], body[data-page="chat"] .app-shell {
    height: var(--viewport-height, 100dvh);
    max-height: var(--viewport-height, 100dvh);
  }
  body[data-page="chat"] .app-shell { position: fixed; top: var(--viewport-top, 0px); left: 0; }
  body[data-page="chat"] .chat-main { grid-template-rows: auto minmax(0, 1fr) auto; }
  body[data-page="chat"] .composer-zone,
  body[data-page="chat"] .chat-main.history-open .composer-zone {
    padding: 0 max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    max-height: max(44px, calc(var(--viewport-height, 100dvh) - var(--chat-header-height, 106px) - 32px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body[data-page="chat"] .scroll-bottom-btn {
    position: fixed;
    top: auto;
    bottom: calc(var(--composer-height, 140px) + 8px);
    left: calc(var(--chat-left, 0px) + var(--chat-width, 100vw) / 2);
  }
  body[data-page="chat"] .messages { padding: 14px 0 !important; scrollbar-gutter: auto; }
  body[data-page="chat"] .messages-inner { width: calc(100% - 24px); max-width: calc(100% - 24px); }
  body[data-page="chat"] :is(.chat-sidebar, .history-panel) {
    top: var(--viewport-top, 0px);
    bottom: auto;
    height: var(--viewport-height, 100dvh);
    max-height: var(--viewport-height, 100dvh);
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  body[data-page="chat"] .composer textarea {
    max-height: max(44px, min(160px, calc(var(--viewport-height, 100dvh) * .2)));
  }
  body[data-page="chat"] .message-queue { max-height: min(140px, calc(var(--viewport-height, 100dvh) * .18)); }
  body[data-page="chat"] .pending-files { max-height: min(100px, calc(var(--viewport-height, 100dvh) * .12)); overflow-y: auto; }
  body[data-page="chat"] .toast-stack { top: calc(var(--viewport-top, 0px) + var(--chat-header-height, 106px) + 8px); }
}

@media (max-width: 860px) {
  body[data-page="chat"] .chat-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    gap: 4px;
    padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left)) !important;
    backdrop-filter: none;
  }
  body[data-page="chat"] .header-left { gap: 6px; }
  body[data-page="chat"] .conversation-title { display: block; flex: 1; width: 0; max-width: none; }
  body[data-page="chat"] .header-right { width: 100%; gap: 4px; flex-wrap: wrap; }
  body[data-page="chat"] .header-right > .icon-btn { flex: 0 0 44px; }
  body[data-page="chat"] .model-picker { flex: 1 1 110px; }
  body[data-page="chat"] .model-picker .context-picker-trigger { width: 100%; }
  body[data-page="chat"] .context-picker-trigger { height: 44px; }
  body[data-page="chat"] .project-picker .context-picker-trigger { width: 44px; }
  body[data-page="chat"] .workspace-pill:not([hidden]) { display: inline-flex; order: 6; flex: 1 1 160px; max-width: none; }
  body[data-page="chat"] .preview-link:not([hidden]) { order: 7; min-height: 44px; }
  body[data-page="chat"] .preview-link > span:last-child { display: inline; }
  body[data-page="chat"] .context-picker-menu {
    position: fixed;
    top: calc(var(--viewport-top, 0px) + var(--chat-header-height, 106px) + 4px);
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    width: auto !important;
    max-height: calc(var(--viewport-height, 100dvh) - var(--chat-header-height, 106px) - 16px);
  }
  body[data-page="chat"] .context-picker-menu:not([hidden]) { display: flex; flex-direction: column; }
  body[data-page="chat"] .picker-list { min-height: 0; max-height: none; flex: 1 1 auto; overflow-y: auto; }
  body[data-page="chat"] :is(.picker-head, .picker-search, .picker-footer) { flex-shrink: 0; }
  body[data-page="chat"] .welcome { height: auto; min-height: 100%; padding: 24px 0; align-content: center; }
  body[data-page="chat"] .suggestion:nth-child(n+3) { display: grid; }
  body[data-page="chat"] .suggestions { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
  body[data-page="chat"] .message.user .message-body { max-width: 100%; }
  body[data-page="chat"] .message-actions { flex-wrap: wrap; }
  body[data-page="chat"] .code-block-header { flex-wrap: wrap; gap: 6px; padding: 8px; }
  body[data-page="chat"] .code-block-lang { overflow-wrap: anywhere; }
  body[data-page="chat"] .file-card { max-width: 100%; }
  body[data-page="chat"] :is(.message-file, .generated-artifact) { max-width: 100%; }
  body[data-page="chat"] .queue-item { flex-wrap: wrap; }
  body[data-page="chat"] .queue-preview { flex-basis: 80px; }
  body[data-page="chat"] .queue-label { max-width: 100%; white-space: normal; }
  body[data-page="chat"] :is(.tool-btn, .send-btn, .cancel-stream-btn, .icon-btn, .scroll-bottom-btn) { width: 44px; height: 44px; flex-shrink: 0; }
  body[data-page="chat"] .scroll-bottom-btn { top: auto; }
  body[data-page="chat"] .tools-left { min-width: 0; flex: 1; flex-wrap: wrap; }
  body[data-page="chat"] .voice-status { white-space: normal; overflow-wrap: anywhere; }
  body[data-page="chat"] .document-export-menu { max-width: calc(100vw - 48px); }
}

@media (max-width: 800px) {
  body[data-page="admin"] .sidebar {
    z-index: 2500;
    inset: var(--viewport-top, 0px) auto auto 0;
    left: 0;
    width: min(86vw, 300px) !important;
    height: var(--viewport-height, 100dvh);
    transform: translateX(-105%);
    visibility: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: transform .2s, visibility .2s !important;
    padding-top: max(64px, env(safe-area-inset-top)) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
  body[data-page="admin"] .sidebar.open { transform: translateX(0); visibility: visible; }
  body[data-page="admin"] .mobile-nav-toggle { z-index: 2600; width: 44px; height: 44px; top: max(10px, env(safe-area-inset-top)); }
  body[data-page="admin"].nav-open { overflow: hidden; }
  body[data-page="admin"] .sidebar .logo { flex-shrink: 0; }
  body[data-page="admin"] .main { padding: max(72px, calc(env(safe-area-inset-top) + 60px)) 12px max(32px, env(safe-area-inset-bottom)) !important; }
  body[data-page="admin"] .page-header { padding-left: 0; align-items: stretch !important; }
  body[data-page="admin"] .card { overflow: visible !important; }
  body[data-page="admin"] .card-header { flex-wrap: wrap; gap: 12px; padding: 16px !important; }
  body[data-page="admin"] .card-body { padding: 16px !important; }
  body[data-page="admin"] .provider-line { width: 100%; }
  body[data-page="admin"] .provider-select { min-width: 0; max-width: 100%; width: 100%; }
  body[data-page="admin"] :is(.provider-config-grid, .provider-create-form, .manual-model-form, .catalog-toolbar, .form-row) { grid-template-columns: minmax(0, 1fr); }
  body[data-page="admin"] :is(.provider-create-wide, .provider-create-form .provider-actions) { grid-column: 1 / -1; }
  body[data-page="admin"] .reco-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
  body[data-page="admin"] :is(.skills-actions, .skill-install-actions, .provider-actions, .skill-result-actions) { flex-wrap: wrap; }
  body[data-page="admin"] :is(.maintenance-item, .user, .provider-row-item) { flex-wrap: wrap; }
  body[data-page="admin"] .user-copy { overflow-wrap: anywhere; }
  body[data-page="admin"] .user-copy strong { flex-wrap: wrap; }
  body[data-page="admin"] .provider-row-copy { flex-basis: 100%; }
  body[data-page="admin"] .provider-count { width: auto; padding-left: 0; }
  body[data-page="admin"] .reco-toolbar input,
  body[data-page="admin"] .users-toolbar input { min-width: 0; width: 100%; flex-basis: 100%; }
  body[data-page="admin"] .skill-terminal { min-width: 0; max-width: 100%; }
  body[data-page="admin"] .infrastructure-code { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
}

@media (max-width: 760px) {
  body[data-page="library"] .topbar { flex-wrap: wrap; gap: 8px; padding: max(8px, env(safe-area-inset-top)) 0 8px; }
  body[data-page="library"] .top-actions { gap: 6px; margin-left: auto; }
  body[data-page="library"] .library-main { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  body[data-page="library"] .library-sidebar { height: var(--viewport-height, 100dvh); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  body[data-page="library"] .library-sidebar .project-nav { flex: 1; }
  body[data-page="library"] .library-sidebar > :is(.brand, .new-chat, .nav-link, .section-label, .account) { flex-shrink: 0; }
  body[data-page="library"].library-nav-open { overflow: hidden; }
  body[data-page="library"] #close-library-sidebar { align-self: flex-end; flex-shrink: 0; }
  body[data-page="library"] :is(.button, .tiny) { min-width: 44px; min-height: 44px; height: auto; }
  body[data-page="library"] .breadcrumb { flex-wrap: wrap; overflow-wrap: anywhere; }
  body[data-page="library"] .breadcrumb button { min-height: 44px; max-width: 100%; text-align: left; overflow-wrap: anywhere; }
  body[data-page="library"] .file-meta { flex-wrap: wrap; }
  body[data-page="library"] .card-actions { position: static; opacity: 1; justify-content: flex-end; gap: 4px; flex-wrap: wrap; }
  body[data-page="library"] .folder-card { flex-wrap: wrap; }
  body[data-page="library"] .folder-card .card-actions { flex-basis: 100%; }
  body[data-page="library"] .file-card .card-actions { margin-bottom: 8px; }
  body[data-page="library"] .toast-stack { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  body[data-page="library"] .toast { min-width: 0; max-width: 100%; }
}

@media (max-width: 640px) {
  body[data-page] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: 16px !important; }
  body[data-page] :is(.modal-backdrop, .modal-bg) { padding-inline: 10px; }
  body[data-page] .modal { padding: 16px; }
  body[data-page="admin"] .modal { padding: 0; }
  body[data-page="chat"] .memory-modal { padding: 0; }
  body[data-page="chat"] .profile-photo-row { flex-wrap: wrap; }
  body[data-page="chat"] .pending-file { max-width: 100%; }
  body[data-page="chat"] .share-link-row { flex-wrap: wrap; }
  body[data-page="chat"] .share-link-row input { flex-basis: 100%; }
  body[data-page="admin"] .skill-row { grid-template-columns: 36px minmax(0, 1fr); }
  body[data-page="admin"] .skill-row > :is(.switch, .skill-toggle, .skill-actions, .status, .token-limit) { grid-column: 2; justify-self: start; }
  body[data-page="admin"] .model { grid-template-columns: minmax(0, 1fr) auto; }
  body[data-page="admin"] .model-info { grid-column: 1 / -1; }
  body[data-page="admin"] .default-model { grid-column: 1; min-width: 0; }
  body[data-page="admin"] .token-limit { grid-column: 1; }
  body[data-page="shared"] .shared-shell { width: calc(100% - 24px); padding-top: max(16px, env(safe-area-inset-top)); }
  body[data-page="shared"] .shared-top { flex-wrap: wrap; }
  body[data-page="shared"] .shared-title { font-size: 23px; }
  body[data-page="shared"] .message { gap: 7px; }
  body[data-page="shared"] .message-body { padding: 10px; }
  body[data-page="login"] .login-panel { min-height: 100dvh; padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); }
  body[data-page="login"] .auth-shell { width: 100%; min-height: 100dvh; }
}

body[data-page="chat"] .app-shell:not(.sidebar-collapsed) .side-item[data-project] { flex-wrap: wrap; }
body[data-page="chat"] .app-shell:not(.sidebar-collapsed) .side-item[data-project] .item-actions { display: flex; flex-basis: 100%; justify-content: flex-end; flex-wrap: wrap; }

@media (hover: none), (pointer: coarse) {
  body[data-page] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: 16px !important; }
  body[data-page="chat"] .item-actions { display: flex; }
  body[data-page="chat"] :is(.message-actions, .item-actions) { opacity: 1; pointer-events: auto; }
  body[data-page="chat"] :is(.message-action, .item-action, .pending-remove, .code-block-copy, .code-block-expand, .code-block-download, .document-export-option) { min-height: 44px; height: auto; }
  body[data-page="chat"] :is(.item-action, .pending-remove) { min-width: 40px; }
  body[data-page="chat"] :is(.queue-cancel, .queue-approve, .approval-actions button) { min-height: 44px; }
  body[data-page="library"] .card-actions { opacity: 1; }
  body[data-page="admin"] :is(.btn, .default-model, .token-limit, .reco-install) { min-height: 44px !important; }
  body[data-page="admin"] .switch { height: 44px; width: 52px; padding: 13px 5px; }
  body[data-page="admin"] .switch.on::after { transform: translateX(24px); }
}

@media (max-height: 500px) and (max-width: 900px) {
  body[data-page="chat"] .welcome { padding-block: 12px; }
  body[data-page="chat"] .welcome-mark { margin-bottom: 8px; }
  body[data-page="chat"] .composer { padding: 5px 8px; }
  body[data-page="chat"] .composer-model { display: none; }
  body[data-page="chat"] .context-picker-menu .picker-head-copy span { display: none; }
  body[data-page="chat"] .picker-head { padding: 8px 12px; }
}