/* 大型集合统一收口：外框稳定，条目区独立滚动，分页和状态不随列表消失。 */
: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;
}

#usageKeyGrid {
  max-height: var(--collection-height-compact);
}

/* Key 用量改为条目列表：信息按行对齐，便于快速比较多个 Key。 */
#view-usage .usage-key-list {
  display: grid;
  align-content: start;
  gap: 1px;
  padding: 0;
  border: var(--hair) solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--line-soft);
  overflow: auto;
}

.usage-key-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) minmax(0, 3fr);
  gap: 14px;
  min-width: 0;
  padding: 12px 14px;
  background: var(--paper);
}

.usage-key-row:hover {
  background: var(--fill-2);
}

.usage-key-identity,
.usage-key-metric {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.usage-key-identity {
  justify-content: center;
  gap: 4px;
}

.usage-key-identity strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usage-key-prefix {
  overflow: hidden;
  color: var(--faint);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usage-key-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  align-items: center;
}

.usage-key-metric {
  gap: 4px;
  min-width: 0;
}

.usage-key-metric small {
  color: var(--faint);
  font-size: 10.5px;
  line-height: 1.2;
  white-space: nowrap;
}

.usage-key-metric strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usage-key-metric strong.is-warning {
  color: var(--danger);
}

@media (min-width: 1440px), (max-width: 720px) {
  .usage-key-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .usage-key-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
  }
}

/* 来源列表只固定真正的大列表，少量来源仍由网格自然排布。 */
.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);
  }

  #usageKeyGrid {
    max-height: clamp(260px, calc(100dvh - 420px), 360px);
  }

  .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);
  }

  #usageKeyGrid {
    max-height: clamp(240px, calc(100dvh - 400px), 340px);
  }

  .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-user > .table-section {
  display: flex;
  flex-direction: column;
}

#view-user > .key-activation-section {
  min-height: 0;
  overflow: auto;
}

@media (min-width: 961px) {
  #view-user.active {
    grid-template-rows: auto minmax(190px, auto) minmax(0, 1fr);
  }

  #view-user > .table-section {
    height: 100%;
  }
}

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

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

  #view-user > .table-section {
    height: 100%;
  }
}

/* 创建类页面：表单卡和结果卡都固定在视口内，长表单自身滚动。 */
#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-invites > .invite-batch-shell,
  #view-invites > .table-section {
    max-height: 585px;
  }

  #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;
}

#view-users > .table-section {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

#view-logs > .table-wrap {
  flex: 1 1 auto;
  height: auto;
  max-height: none;
}

/* 管理台日志有两个子面板，活动面板内部继续分配筛选、摘要和明细。 */
#view-logs > .logging-panel:not(.hidden) {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

#view-logs > .logging-panel:not(.hidden) > .table-wrap {
  flex: 1 1 auto;
  height: auto;
  max-height: none;
  min-height: 0;
}

/* 调用日志筛选：宽屏保持两条完整参数带，不让日期和操作形成断裂的尾行。 */
@media (min-width: 721px) {
  body:not(.admin-console-mode) #view-logs > .call-log-filter,
  body.admin-console-mode #view-logs > .logging-panel:not(.hidden) > .call-log-filter {
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
  }

  #view-logs .call-log-filter {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: auto repeat(6, minmax(0, 1fr));
    align-items: center;
    gap: 8px;
    max-height: none;
    margin: 0;
    overflow: visible;
  }

  #view-logs .call-log-filter > .filter-label {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }

  #view-logs .call-log-filter #logFilterKey {
    grid-column: 2 / span 2;
    grid-row: 1;
  }

  #view-logs .call-log-filter #logFilterModel { grid-column: 4; grid-row: 1; }
  #view-logs .call-log-filter #logFilterType { grid-column: 5; grid-row: 1; }
  body.admin-console-mode #view-logs .call-log-filter #logFilterStatus { grid-column: 6; grid-row: 1; }
  body.admin-console-mode #view-logs .call-log-filter #logFilterUser { grid-column: 7; grid-row: 1; }
  body:not(.admin-console-mode) #view-logs .call-log-filter #logFilterStatus {
    grid-column: 6 / span 2;
    grid-row: 1;
  }

  #view-logs .call-log-filter #logFilterRequest {
    grid-column: 2 / span 2;
    grid-row: 2;
  }

  #view-logs .call-log-filter > .filter-range {
    display: grid;
    grid-column: 4 / span 3;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  #view-logs .call-log-filter > .filter-actions {
    display: grid;
    grid-column: 7;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-left: 0;
  }

  #view-logs .call-log-filter > .control,
  #view-logs .call-log-filter > .filter-range,
  #view-logs .call-log-filter > .filter-actions,
  #view-logs .call-log-filter .filter-date,
  #view-logs .call-log-filter > .filter-actions > * {
    width: 100%;
    min-width: 0;
  }

  #view-logs .call-log-filter > .control {
    height: 34px;
    min-height: 34px;
  }
}

/* 调用记录：概览、构成和明细保持固定层级，列表只在卡片内部滚动。 */
.log-retention-inline {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding-left: 8px;
  border-left: var(--hair) solid var(--line-soft);
  color: var(--faint);
  white-space: nowrap;
}

#view-logs.active,
#view-logs > .logging-panel:not(.hidden) {
  gap: 10px;
}

.log-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
}

.log-kpi {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-height: 76px;
  padding: 11px 13px !important;
}

.log-kpi-icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: var(--hair) solid rgb(82 143 255 / 0.22);
  border-radius: 12px;
  color: #70a5ff;
  background: rgb(46 112 229 / 0.14);
}

.log-kpi:nth-child(2) .log-kpi-icon {
  border-color: rgb(245 158 11 / 0.22);
  color: #f7ad42;
  background: rgb(217 119 6 / 0.14);
}

.log-kpi:nth-child(3) .log-kpi-icon {
  border-color: rgb(34 197 94 / 0.22);
  color: #4fd17b;
  background: rgb(22 163 74 / 0.14);
}

.log-kpi:nth-child(4) .log-kpi-icon {
  border-color: rgb(168 85 247 / 0.22);
  color: #bd83ff;
  background: rgb(126 34 206 / 0.14);
}

.log-kpi-icon .ui-icon {
  width: 18px;
  height: 18px;
}

.log-kpi-copy {
  min-width: 0;
}

.log-kpi .stat-label {
  margin-bottom: 3px !important;
}

.log-kpi-copy > strong {
  overflow: hidden;
  font-size: 19px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-kpi .stat-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-breakdown-grid {
  display: grid;
  min-width: 0;
  min-height: 0;
  flex: 1 1 0;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
  grid-template-rows: minmax(220px, 1.25fr) minmax(160px, 0.75fr);
  gap: 10px;
  overflow: hidden;
}

body.admin-console-mode .log-breakdown-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
  grid-template-rows: minmax(220px, 1.25fr) minmax(160px, 0.75fr);
}

.log-breakdown-card {
  --log-bar-rgb: 82 143 255;
  display: flex;
  min-width: 0;
  min-height: 0;
  padding: 12px 14px;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  border: var(--hair) solid var(--line-soft);
  border-radius: var(--r-md);
  background: linear-gradient(145deg, rgb(255 255 255 / 0.035), rgb(24 30 37 / 0.24));
}

.log-breakdown-card-alt {
  --log-bar-rgb: 168 85 247;
}

.log-timeline-card {
  grid-row: 1;
  grid-column: 1;
}

.log-quality-card {
  grid-row: 1;
  grid-column: 2;
}

.log-admin-trends-card {
  grid-row: 1;
  grid-column: 1;
}

.log-type-chart {
  grid-row: 1;
  grid-column: 2;
}

.log-model-chart {
  grid-row: 2;
  grid-column: 1;
}

.log-service-card {
  grid-row: 2;
  grid-column: 2;
}

.log-cost-chart {
  grid-row: 2;
  grid-column: 1 / -1;
  --log-bar-rgb: 34 197 94;
}

.log-cost-chart .log-model-bar-chart {
  justify-content: space-evenly;
}

.log-breakdown-head,
.log-owner-line {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.log-breakdown-head h3 {
  margin: 1px 0 0;
  font-size: 13.5px;
  line-height: 1.2;
}

.log-breakdown-head > span,
.log-breakdown-empty {
  color: var(--faint);
  font-size: 10.5px;
}

.log-breakdown-head > span {
  flex: 0 0 auto;
  white-space: nowrap;
}

.log-admin-trend-strip {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.log-admin-trend-pane {
  display: none;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px;
  border-left: var(--hair) solid var(--line-soft);
}

.log-admin-trend-pane.is-active {
  display: flex;
  padding: 0;
  border-left: 0;
}

.log-admin-trend-pane:first-child {
  padding-left: 0;
  border-left: 0;
}

.log-admin-trend-head {
  display: flex;
  min-width: 0;
  flex: 0 0 auto;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.log-admin-trend-head h4 {
  margin: 0;
  color: var(--text);
  font-size: 11px;
  line-height: 1.2;
}

.log-admin-trend-head span {
  min-width: 0;
  overflow: hidden;
  color: var(--faint);
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-timeline-modes {
  flex: 0 0 auto;
  gap: 2px;
  padding: 2px;
}

.log-timeline-modes button {
  min-height: 24px;
  padding-inline: 7px;
  font-size: 10.5px;
}

.log-model-bar-chart {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  align-items: stretch;
  justify-content: space-evenly;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.log-model-column {
  display: flex;
  width: 108px;
  min-width: 0;
  flex: 0 0 108px;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}

.log-model-column-plot {
  display: flex;
  min-height: 32px;
  flex: 1 1 auto;
  flex-direction: column;
}

.log-model-column-count,
.log-model-column-stats,
.log-model-column-cost {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-model-column-track {
  position: relative;
  min-height: 20px;
  flex: 1 1 auto;
  border-bottom: var(--hair) solid rgb(255 255 255 / 0.09);
}

.log-model-column-track > i {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: block;
  width: 38px;
  min-height: 3px;
  transform: translateX(-50%);
  border-radius: 4px 4px 1px 1px;
  background: linear-gradient(180deg, rgb(var(--log-bar-rgb)), rgb(var(--log-bar-rgb) / 0.58));
  box-shadow: 0 0 12px rgb(var(--log-bar-rgb) / 0.24);
}

.log-model-column-label,
.log-owner-line > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-model-column-label {
  font-size: 11.5px;
  font-weight: var(--w-semibold);
}

.log-latency-chart {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.log-latency-svg {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
}

.log-chart-grid-line {
  stroke: rgb(255 255 255 / 0.065);
  stroke-width: 1;
}

.log-chart-y-label {
  fill: var(--faint);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.log-latency-line {
  fill: none;
  stroke: #5b8def;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  filter: drop-shadow(0 4px 8px rgb(58 117 226 / 0.28));
}

.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-cache-legend {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  color: var(--faint);
  font-size: 10px;
}

.log-cache-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.log-cache-legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.log-cache-coverage-dot { background: #34d399; }
.log-cache-read-dot { background: #a78bfa; }

.log-chart-axis {
  display: grid;
  grid-template-columns: repeat(var(--log-axis-count, 3), minmax(0, 1fr));
  gap: 4px;
  color: var(--faint);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.log-chart-axis span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-chart-axis span:not(:first-child):not(:last-child) { text-align: center; }
.log-chart-axis span:last-child { text-align: right; }

.log-donut-panel,
.log-service-panel {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  align-items: center;
}

.log-donut-layout {
  display: grid;
  min-width: 0;
  width: 100%;
  grid-template-columns: minmax(96px, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 14px;
}

.log-donut-visual {
  display: grid;
  width: min(148px, 100%);
  aspect-ratio: 1;
  place-items: center;
  justify-self: center;
  border-radius: 50%;
  box-shadow: 0 0 22px rgb(91 141 239 / 0.14);
}

.log-donut-hole {
  display: grid;
  width: 54%;
  height: 54%;
  place-content: center;
  gap: 1px;
  border: var(--hair) solid var(--line-soft);
  border-radius: 50%;
  background: var(--paper);
  text-align: center;
}

.log-donut-hole strong {
  color: var(--text);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.log-donut-hole span {
  color: var(--faint);
  font-size: 9px;
}

.log-donut-legend {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.log-donut-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 10.5px;
}

.log-donut-row i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

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

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

.log-service-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(32px, 1fr));
  gap: 0 14px;
}

.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-panel {
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px 14px;
}

.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-lead-rate {
  display: grid;
  min-width: 68px;
  gap: 1px;
}

.log-quality-lead-rate strong {
  color: var(--success);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.log-quality-lead.is-attention .log-quality-lead-rate strong {
  color: #ff9d8e;
}

.log-quality-lead-rate span,
.log-quality-lead-copy > span {
  color: var(--faint);
  font-size: 10px;
}

.log-quality-lead-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.log-quality-lead-copy > strong,
.log-quality-lead-copy > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-quality-lead-copy > strong {
  color: var(--text);
  font-size: 11px;
}

.log-quality-progress {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.07);
}

.log-quality-progress > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--success);
}

.log-quality-lead.is-attention .log-quality-progress > i {
  background: #ff806b;
}

.log-quality-metrics {
  display: grid;
  min-height: 0;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(32px, 1fr));
  gap: 0 14px;
}

.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-metrics .log-quality-row:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.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; }

body.admin-console-mode #callLogsPanel .log-kpi:nth-child(2) .log-kpi-icon {
  border-color: rgb(var(--danger-rgb) / 0.22);
  color: #ff9d8e;
  background: rgb(var(--danger-rgb) / 0.12);
}

.log-breakdown-empty {
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  place-items: center;
}

.log-owner-line .tag {
  flex: 0 0 auto;
}

@media (min-width: 1180px) {
  body.admin-console-mode #callLogsPanel .log-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }

  body.admin-console-mode #callLogsPanel .log-table th,
  body.admin-console-mode #callLogsPanel .log-table td {
    white-space: normal;
    overflow-wrap: anywhere;
  }

}

@media (max-width: 960px) {
  .log-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1179px) and (min-width: 721px) {
  .log-breakdown-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(190px, 1fr) minmax(150px, 0.75fr);
  }

  .log-timeline-card {
    grid-row: 1;
    grid-column: 1 / -1;
  }

  .log-quality-card {
    grid-row: 2;
    grid-column: 1;
  }

  .log-cost-chart {
    grid-row: 2;
    grid-column: 2;
  }

  .log-model-chart .log-breakdown-head > span,
  .log-cost-chart .log-breakdown-head > span {
    display: none;
  }

}

@media (max-height: 700px) {
  body.admin-console-mode .log-breakdown-grid {
    grid-template-rows: minmax(170px, 1.15fr) minmax(130px, 0.85fr);
  }
}

@media (max-width: 720px) {
  .log-retention-inline {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }

  .log-breakdown-grid {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .log-breakdown-grid::-webkit-scrollbar,
  #view-logs .call-log-filter::-webkit-scrollbar {
    display: none;
  }

  .log-kpi {
    height: 76px;
    min-height: 76px;
  }

  .log-breakdown-card {
    height: 100%;
    min-height: 0;
    flex: 0 0 min(88vw, 360px);
    scroll-snap-align: start;
  }

  .log-model-column {
    width: 92px;
    flex-basis: 92px;
  }

  .log-cost-chart .log-model-bar-chart {
    justify-content: flex-start;
  }

  body:not(.admin-console-mode) #view-logs > .call-log-filter,
  body.admin-console-mode #view-logs > .logging-panel:not(.hidden) > .call-log-filter {
    display: flex;
    height: 56px;
    max-height: 56px;
    flex: 0 0 56px;
    flex-wrap: nowrap;
    padding-block: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  #view-logs .call-log-filter > .filter-label {
    width: auto;
    margin: 0;
    flex: 0 0 auto;
  }

  #view-logs .call-log-filter > .control {
    width: 172px;
    min-width: 172px;
    flex: 0 0 172px;
    scroll-snap-align: start;
  }

  #view-logs .call-log-filter > #logFilterType,
  #view-logs .call-log-filter > #logFilterStatus,
  #view-logs .call-log-filter > #logFilterUser {
    width: 132px;
    min-width: 132px;
    flex-basis: 132px;
  }

  #view-logs .call-log-filter > .filter-range {
    display: flex;
    width: 340px;
    min-width: 340px;
    flex: 0 0 340px;
    grid-template-columns: none;
    scroll-snap-align: start;
  }

  #view-logs .call-log-filter .filter-date {
    width: auto;
    min-width: 0;
    flex: 1 1 0;
  }

  #view-logs .call-log-filter .filter-range-separator {
    display: inline;
  }

  #view-logs .call-log-filter > .filter-actions {
    display: flex;
    width: 150px;
    min-width: 150px;
    flex: 0 0 150px;
    grid-template-columns: none;
    scroll-snap-align: end;
  }

  #view-logs .call-log-filter > .filter-actions > * {
    min-width: 0;
    flex: 1 1 0;
  }
}

@media (max-height: 700px) {
  .log-kpi {
    min-height: 68px;
    padding-block: 8px !important;
  }

  .log-breakdown-grid {
    grid-template-rows: minmax(150px, 1.15fr) minmax(120px, 0.85fr);
  }

  .log-breakdown-card {
    padding-block: 8px;
    gap: 6px;
  }

  .log-breakdown-head .kicker {
    display: none;
  }

  .log-model-column {
    gap: 1px;
  }
}