/* 大型集合统一收口：外框稳定，条目区独立滚动，分页和状态不随列表消失。 */

:root {
  --collection-height: clamp(320px, calc(100dvh - 300px), 560px);
  --collection-height-compact: clamp(280px, calc(100dvh - 360px), 500px);
  --log-axis-count: 3;
}

.collection-wrap {
  height: auto;
  max-height: var(--collection-height);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.provider-account-section > .collection-wrap {
  max-height: none;
  overflow: hidden;
}

.collection-wrap > .table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.collection-wrap > .table-scroll::-webkit-scrollbar,
#modelList::-webkit-scrollbar,
#usageKeyGrid::-webkit-scrollbar,
.model-source-list-rows::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.collection-wrap > .table-scroll::-webkit-scrollbar-thumb,
#modelList::-webkit-scrollbar-thumb,
#usageKeyGrid::-webkit-scrollbar-thumb,
.model-source-list-rows::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.collection-wrap > .table-scroll > table {
  width: 100%;
}

.collection-wrap > .pagination {
  flex: 0 0 auto;
  background: rgb(25 31 38 / 0.78);
}

/* 模型目录与用量分布也是集合，不让卡片数量把整页向下推。 */

#modelList.model-grid,
#modelList.model-by-model-layout,
#usageKeyGrid {
  height: auto;
  max-height: var(--collection-height);
  min-height: 0;
  overflow: auto;
  align-content: start;
  padding: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

/* Key 用量改为条目列表：信息按行对齐，便于快速比较多个 Key。 */

/* 来源列表只固定真正的大列表，少量来源仍由网格自然排布。 */

.model-source-list-rows {
  height: auto;
  max-height: var(--collection-height-compact);
}

.model-by-model-nav-list {
  max-height: var(--collection-height-compact);
}

.notification-panel {
  height: min(620px, calc(100dvh - 78px));
}

.notification-list {
  flex: 1 1 auto;
  min-height: 0;
}

@media (max-width: 960px) {
.collection-wrap,
  #modelList.model-grid,
  #modelList.model-by-model-layout,
  #usageKeyGrid {
    max-height: clamp(280px, calc(100dvh - 360px), 440px);
  }

.model-source-list-rows {
    max-height: clamp(280px, calc(100dvh - 420px), 380px);
  }

.notification-panel {
    height: min(620px, calc(100dvh - 16px));
  }
}

@media (max-width: 720px) {
.collection-wrap {
    max-height: clamp(260px, calc(100dvh - 500px), 360px);
  }

#modelList.model-grid,
  #modelList.model-by-model-layout {
    max-height: clamp(280px, calc(100dvh - 330px), 430px);
  }

.model-by-model-nav-list {
    max-height: none;
    height: 96px;
  }
}

/* 视图高度收口：页面固定在主区内，只有具体工作卡承载滚动。 */

.console-mode .app-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.console-mode .app-main > .view.active {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.console-mode .view.active > * {
  min-height: 0;
}

.console-mode .view.active .table-section {
  min-height: 0;
  overflow: hidden;
}

.console-mode .view.active .table-section > .table-wrap {
  flex: 1 1 auto;
  height: auto;
  max-height: none;
  min-height: 0;
}

/* 用户首页：激活和摘要保持稳定，Key 列表拿走剩余高度。 */

/* 创建类页面：表单卡和结果卡都固定在视口内，长表单自身滚动。 */

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

#view-admin > .table-section,
#view-invites > .table-section,
#view-notifications > .table-section {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1180px) {
#view-admin.active,
  #view-invites.active,
  #view-notifications.active {
    grid-template-rows: auto minmax(0, 1fr);
  }

#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 {
    height: 100%;
  }

#view-notifications > .notification-compose-shell,
  #view-notifications > .table-section {
    max-height: 520px;
  }
}

@media (max-width: 960px) {
#view-admin.active,
  #view-invites.active,
  #view-notifications.active {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr);
  }

#view-admin > .key-batch-shell,
  #view-invites > .invite-batch-shell,
  #view-notifications > .notification-compose-shell,
  #view-admin > .table-section,
  #view-invites > .table-section,
  #view-notifications > .table-section {
    height: 100%;
  }
}

/* 用户列表和日志列表：列表卡始终占据剩余空间。 */

#view-users > .table-section,
#view-logs > .table-wrap {
  min-height: 0;
}

/* 管理台日志有两个子面板，活动面板内部继续分配筛选、摘要和明细。 */

/* 调用日志筛选：宽屏保持两条完整参数带，不让日期和操作形成断裂的尾行。 */

/* 调用记录：概览、构成和明细保持固定层级，列表只在卡片内部滚动。 */

.log-latency-point {
  fill: #8eb4ff;
  stroke: #17202d;
  stroke-width: 2;
}

.log-latency-point.is-error {
  fill: #ff806b;
}

.log-cache-coverage-line,
.log-cache-read-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.log-cache-coverage-line { stroke: #34d399; }

.log-cache-read-line { stroke: #a78bfa; }

.log-cache-coverage-point,
.log-cache-read-point {
  stroke: #17202d;
  stroke-width: 2;
}

.log-cache-coverage-point { fill: #5ee7b7; }

.log-cache-read-point { fill: #c4b5fd; }

.log-service-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: var(--hair) solid var(--line-soft);
  color: var(--muted);
  font-size: 10.5px;
}

.log-service-row:nth-last-child(-n + 2) { border-bottom: 0; }

.log-service-row span,
.log-service-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-service-row strong {
  color: var(--text);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.log-service-row.is-alert strong { color: #ff9d8e; }

.log-quality-lead {
  display: grid;
  min-width: 0;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: var(--hair) solid var(--line-soft);
}

.log-quality-row {
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: var(--hair) solid var(--line-soft);
  color: var(--muted);
  font-size: 10.5px;
}

.log-quality-row span,
.log-quality-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-quality-row strong {
  color: var(--text);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.log-quality-row.is-ok strong { color: var(--success); }

.log-quality-row.is-bad strong { color: #ff9d8e; }