/* CPA 账户表：操作固定为四等分单行，避免按钮换行把每条账户撑成大卡片。 */

/* 聊天配置固定在输入区下方：常用项一行，能力与自定义模型只占第二行。 */

/* 手机压缩会话栏和发送区，给消息流保留主要空间。 */

/* 手机端补齐触控尺寸与横向分段导航。 */

@media (max-width: 720px) {
#view-runtime .runtime-tabs {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

#view-runtime .runtime-tabs button {
    min-width: 104px;
    min-height: 44px;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

#view-finance > .finance-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

.key-create-advanced[open] {
    width: 100%;
  }

.key-create-advanced-panel {
    position: static;
    width: 100%;
    margin-top: 8px;
  }
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
.console-mode .btn,
  .console-mode .control,
  .console-mode .seg button,
  .console-mode [role="tab"],
  .console-mode .app-nav .nav-item,
  .console-mode .row-actions .btn,
  .console-mode .provider-instance-button {
    min-width: 44px;
    min-height: 44px;
  }

.console-mode input.control,
  .console-mode select.control {
    height: 44px;
  }

.console-mode .btn-icon,
  .console-mode .btn-icon.btn-sm,
  .console-mode .provider-nav-add {
    width: 44px;
    min-width: 44px;
  }

.console-mode .check-hitbox {
    display: inline-flex;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

.console-mode .check-control,
  .console-mode .chat-search-option {
    min-width: 44px;
    min-height: 44px;
  }

.console-mode .user-modal-layer input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .console-mode .modal-layer input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .console-mode .notification-meta button {
    min-height: 44px;
  }
}

@media (hover: none) and (pointer: coarse) {
#view-admin .admin-key-table .row-actions,
  #view-invites .invite-table .row-actions {
    grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
  }

#view-notifications .notification-table td:last-child .btn {
    min-width: 44px;
  }
}

/* 窄屏也保持视图在主区内，长集合只在明确的内容槽内滚动。 */

@media (max-width: 1179px) {
.console-mode .app-main {
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }

#view-user > .key-activation-section,
  #view-admin > .key-batch-shell,
  #view-invites > .invite-batch-shell,
  #view-notifications > .notification-compose-shell,
  #view-finance > .finance-settings {
    min-height: 0;
    overflow: auto;
  }

#view-admin.active,
  #view-invites.active,
  #view-notifications.active,
  #view-usage.active,
  #view-monitor.active {
    overflow-x: clip;
    overflow-y: auto;
  }

#view-usage > .section-block,
  #view-models > #modelList {
    min-height: 0;
    overflow: hidden;
  }

#view-usage > .section-block > .table-wrap,
  #view-usage > .section-block > .table-wrap > .table-scroll,
  #usageKeyGrid,
  #view-models .model-source-list-rows,
  #view-models .model-by-model-detail,
  #view-models .model-provider-grid {
    min-height: 0;
    overflow: auto;
  }

#view-runtime .runtime-workspace,
  #view-runtime .runtime-panel-stack {
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }

#view-finance.active {
    overflow-y: auto;
  }
}

/* 聊天优先填满主区；短视口装不下配置时改由主区滚动。 */

.console-mode .app-header {
  height: calc(var(--h-header) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
}

body.nav-open .app::after {
  inset-block-start: calc(var(--h-header) + env(safe-area-inset-top));
}

body.console-mode .app-nav {
  padding-left: max(8px, env(safe-area-inset-left));
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}

@media (min-width: 961px) and (max-width: 1179px) {
.console-mode .app-main {
    padding-inline: max(28px, env(safe-area-inset-left)) max(28px, env(safe-area-inset-right));
  }
}

@media (max-width: 960px) {
.console-mode .app-main {
    padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right));
  }
}

@media (max-width: 720px) {
.console-mode .app-header {
    padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right));
  }

body.console-mode .app-nav {
    padding-left: max(7px, env(safe-area-inset-left));
  }

.console-mode .app-main {
    padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
  }
}

/* 媒体表单按填写顺序收敛：参考图渐进展开，提交与状态留在字段末尾。 */

/* 触摸设备上输入框字号不小于 16px，避免 iOS 聚焦时自动放大页面。 */

/* 响应式边界：页面不承担子内容的横向滚动，滚动只留在明确的内容槽内。 */

body.console-mode {
  overflow-x: clip;
}

.console-mode .app-main {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

.console-mode .app-main > .view.active,
.console-mode .app-main > .view.active > * {
  min-width: 0;
  max-width: 100%;
}

.console-mode .app-main > .view.active > .panel-head > div:first-child,
.console-mode .app-main > .view.active .panel-head > div:first-child {
  min-width: 0;
}

@media (max-width: 1179px) {
.console-mode .app-main {
    overflow-x: clip;
    overflow-y: auto;
  }

/* 宽表仍可横向查看，但不会把滚动提升到页面底部。 */

.console-mode .collection-wrap > .table-scroll {
    overflow-x: auto;
  }
}

@media (max-width: 1179px) and (max-height: 800px) {
#view-runtime.active {
    height: auto;
    flex: 0 0 auto;
    overflow: visible;
  }

#view-runtime .runtime-workspace {
    flex: 0 0 auto;
    grid-template-rows: auto auto;
    overflow: visible;
  }

#view-runtime .runtime-panel-stack,
  #view-runtime .runtime-panel {
    position: static;
    min-height: auto;
    overflow: visible;
  }

#view-runtime .runtime-default-panel {
    grid-template-rows: max-content max-content;
    align-content: start;
  }

#view-runtime .runtime-default-panel > .section-block {
    overflow: visible;
  }

#view-user.active,
  #view-usage.active {
    grid-template-rows: repeat(4, max-content);
  }

#view-admin.active,
  #view-invites.active,
  #view-notifications.active {
    grid-template-rows: repeat(3, max-content);
  }

#view-user > .table-section,
  #view-admin > .key-batch-shell,
  #view-admin > .table-section,
  #view-invites > .invite-batch-shell,
  #view-invites > .table-section,
  #view-notifications > .notification-compose-shell,
  #view-notifications > .table-section,
  #view-usage > .section-block {
    height: auto;
  }
}

/* 移动端日志按内容纵向阅读，避免三张图表把整页撑成横向画布。 */

/* 平板/窄桌面：Key 和模型各占一列，数值项同行，能力和操作独占一行。 */