/* ==================================================================
   AI API Gateway — Overview tab (dashboard.php) — all colors reuse
   the --aiapi-* tokens declared in panel.css.
   ================================================================== */

.aiapi-ov-header { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.aiapi-ov-header-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: var(--aiapi-primary-soft);
    color: var(--aiapi-primary);
    border-radius: 100%;
}
.aiapi-ov-header-icon--plain {
	width:auto; height:auto; background:none; border-radius:0;
	color: var(--aiapi-primary);
}
.aiapi-ov-title { margin:0; font-size:18px; font-weight:700; color: var(--aiapi-foreground); }
.aiapi-ov-subtitle { margin:2px 0 0; font-size:12.5px; color: var(--aiapi-muted-foreground); }

.aiapi-ov-eyebrow {
	display:flex; align-items:center; gap:6px;
	font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
	color: var(--aiapi-muted-foreground); margin-bottom:6px;
}
.aiapi-ov-section-title { margin:0 0 14px; font-size:16px; font-weight:700; color: var(--aiapi-foreground); }

/* ---- Glance + credit ---- */
.aiapi-ov-glance { display:grid; grid-template-columns: 1fr 21rem; margin-bottom:16px; }
.aiapi-ov-glance-main { padding:20px; }
.aiapi-ov-glance-head { display:flex; justify-content:space-between; margin-bottom:14px; }
.aiapi-ov-glance-side {
	padding:20px; border-inline-start:1px solid var(--aiapi-card-border);
	background-color: var(--aiapi-primary-soft);
	display:flex; flex-direction:column; gap:10px;
}
@media (max-width: 900px) {
	.aiapi-ov-glance { grid-template-columns: 1fr; }
	.aiapi-ov-glance-side { border-inline-start:none; border-top:1px solid var(--aiapi-card-border); }
}

.aiapi-ov-stats-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap:12px; }
.aiapi-ov-stat-card {
	background-color: var(--aiapi-card); border:1px solid var(--aiapi-card-border);
	border-radius: var(--aiapi-radius-sm); padding:12px; position:relative; overflow:hidden;
}
.aiapi-ov-stat-top { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color: var(--aiapi-muted-foreground); margin-bottom:8px; }
.aiapi-ov-stat-value { font-family: ui-monospace, monospace; font-size:19px; font-weight:700; color: var(--aiapi-foreground); }
.aiapi-ov-stat-caption { font-size:10.5px; color: var(--aiapi-muted-foreground-soft); margin-top:2px; }
.aiapi-ov-spark { width:100%; height:28px; margin-top:8px; display:block; opacity:.8; }

.aiapi-ov-credit-head { display:flex; justify-content:space-between; align-items:center; font-size:12px; color: var(--aiapi-muted-foreground); font-weight:600; }
.aiapi-ov-credit-status { display:flex; align-items:center; gap:5px; font-size:11px; }
.aiapi-ov-credit-dot { width:6px; height:6px; border-radius:999px; }
.aiapi-ov-credit-dot.is-healthy { background: var(--aiapi-success); }
.aiapi-ov-credit-dot.is-low { background: var(--aiapi-danger); }
.aiapi-ov-credit-value { font-family: ui-monospace, monospace; font-size:26px; font-weight:700; color: var(--aiapi-foreground); }
.aiapi-ov-credit-mini-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.aiapi-ov-credit-mini {
	background: var(--aiapi-card); border-radius:8px; padding:8px 10px;
	display:flex; flex-direction:column; gap:4px; font-size:11px; color: var(--aiapi-muted-foreground);
}
.aiapi-ov-credit-mini span { display:flex; align-items:center; gap:5px; }
.aiapi-ov-credit-mini strong { font-size:12.5px; color: var(--aiapi-foreground); }
.aiapi-ov-credit-actions { display:flex; gap:8px; margin-top:4px; }

/* ---- Get started ---- */
.aiapi-ov-getstarted { margin-bottom:16px; }

/* Sits right after the "Usage Overview" chart / API-keys+API-info row,
   neither of which declares a bottom margin — without this it was
   flush against the box above it. */
.aiapi-ov-quick-actions { margin-top:16px; }

.aiapi-ov-getstarted-body { display:grid; grid-template-columns: 1fr 21rem; }
.aiapi-ov-getstarted.is-collapsed .aiapi-ov-getstarted-body { display:none; }

.aiapi-ov-getstarted-summary { display:none; align-items:center; gap:12px; padding:16px 20px; }
.aiapi-ov-getstarted.is-collapsed .aiapi-ov-getstarted-summary { display:flex; }
.aiapi-ov-getstarted-summary-icon {
	width:30px; height:30px; flex-shrink:0; border-radius:999px;
	background: var(--aiapi-success-bg); border:1px solid var(--aiapi-success-border); color: var(--aiapi-success);
	display:flex; align-items:center; justify-content:center;
}
.aiapi-ov-getstarted-summary-text { flex:1; min-width:0; }
.aiapi-ov-getstarted-summary-text > div:first-child { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.aiapi-ov-getstarted-summary-text strong { font-size:13px; font-weight:700; color: var(--aiapi-foreground); }
.aiapi-ov-getstarted-summary-pill {
	font-size:11px; font-weight:600; color: var(--aiapi-muted-foreground);
	background: var(--aiapi-muted); border-radius:999px; padding:2px 10px;
}
.aiapi-ov-getstarted-summary-text p { margin:2px 0 0; font-size:11.5px; color: var(--aiapi-muted-foreground); }

.aiapi-ov-getstarted-main {
	padding:20px;
	background-color: var(--aiapi-card-accent-bg, var(--aiapi-card));
	background-image: linear-gradient(135deg, var(--aiapi-card-accent-bg, transparent), transparent);
}
.aiapi-ov-getstarted-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.aiapi-ov-getstarted-actions { display:flex; align-items:center; gap:8px; }
.aiapi-ov-getstarted-head h3 { margin:2px 0 4px; font-size:17px; font-weight:700; color: var(--aiapi-foreground); }
.aiapi-ov-getstarted-head p { margin:0 0 14px; font-size:12.5px; color: var(--aiapi-muted-foreground); }
@media (max-width: 900px) { .aiapi-ov-getstarted-body { grid-template-columns: 1fr; } }

.aiapi-ov-getstarted-main,
.aiapi-ov-request-card {
	min-width: 0;
}

.aiapi-ov-code-window {
	max-width: 100%;
}

.aiapi-ov-code {
	max-width: 100%;
	box-sizing: border-box;
}

@media (max-width: 640px) {
	.aiapi-ov-step-link {
		flex-wrap: wrap;
	}
	.aiapi-ov-request-status-row {
		flex-wrap: wrap;
	}
	.aiapi-ov-getstarted-main,
	.aiapi-ov-request-card {
		padding: 16px;
	}
}

.aiapi-ov-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.aiapi-ov-step { display:flex; align-items:center; gap:10px; position:relative; }
.aiapi-ov-step-icon {
	width:26px; height:26px; flex-shrink:0; border-radius:999px; border:1px solid var(--aiapi-card-border);
	display:flex; align-items:center; justify-content:center; color: var(--aiapi-muted-foreground);
	position:relative; background: var(--aiapi-card);
}
.aiapi-ov-step:not(:last-child) .aiapi-ov-step-icon::after {
	content:"";
	position:absolute;
	top:100%;
	left:50%;
	transform:translateX(-50%);
	width:2px;
	height:22px;
	background: var(--aiapi-card-border-strong);
}
.aiapi-ov-step.is-done .aiapi-ov-step-icon { background: var(--aiapi-success-bg); border-color: var(--aiapi-success-border); color: var(--aiapi-success); }
.aiapi-ov-step.is-done:not(:last-child) .aiapi-ov-step-icon::after { background: var(--aiapi-success-border); }
.aiapi-ov-step-link {
	flex:1; display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit;
	background: var(--aiapi-card); border:1px solid var(--aiapi-card-border); border-radius: var(--aiapi-radius-sm);
	padding:10px 12px; transition: background-color .15s ease;
}
.aiapi-ov-step-link:hover { background: var(--aiapi-muted); }
.aiapi-ov-step-icon-sm { color: var(--aiapi-muted-foreground); }
.aiapi-ov-step-title { display:block; font-size:12.5px; font-weight:600; color: var(--aiapi-foreground); }
.aiapi-ov-step-desc { display:block; font-size:11px; color: var(--aiapi-muted-foreground); }
.aiapi-ov-step-link svg:last-child { margin-inline-start:auto; color: var(--aiapi-muted-foreground-soft); }

/* Independent color theme for this box — do NOT inherit the parent
   ".aiapi-card-block--purple" accent. Teal reacts to theme the same
   way (light/dark) via --aiapi-accent-teal*. */
.aiapi-ov-request-card {
	--aiapi-card-accent: var(--aiapi-accent-teal);
	--aiapi-card-accent-bg: var(--aiapi-accent-teal-bg);
	--aiapi-card-accent-border: var(--aiapi-accent-teal-border);
}

.aiapi-ov-request-card {
	border-inline-start:1px solid var(--aiapi-card-border); padding:20px;
	display:flex; flex-direction:column; gap:12px;
	background-color: var(--aiapi-card-accent-bg, var(--aiapi-card));
	background-image: linear-gradient(135deg, transparent, var(--aiapi-card-accent-bg, transparent));
}
@media (max-width: 900px) { .aiapi-ov-request-card { border-inline-start:none; border-top:1px solid var(--aiapi-card-border); } }
.aiapi-ov-request-head { display:flex; align-items:center; gap:10px; }
.aiapi-ov-request-head-text { flex:1; min-width:0; }
.aiapi-ov-request-head-text div:first-child { font-size:12.5px; font-weight:600; color: var(--aiapi-foreground); }
.aiapi-ov-request-head-text div:last-child { font-size:11px; color: var(--aiapi-muted-foreground); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.aiapi-ov-code-window {
	background: var(--aiapi-code-bg); border:1px solid var(--aiapi-card-border); border-radius: var(--aiapi-radius-xs);
	overflow:hidden;
}
.aiapi-ov-code-dots { display:flex; align-items:center; gap:6px; padding:8px 12px; border-bottom:1px solid var(--aiapi-card-border); }
.aiapi-ov-code-dots span { width:9px; height:9px; border-radius:999px; display:inline-block; }
.aiapi-ov-code-dots span:nth-child(1) { background:#ff5f57; }
.aiapi-ov-code-dots span:nth-child(2) { background:#febc2e; }
.aiapi-ov-code-dots span:nth-child(3) { background:#28c840; }
.aiapi-ov-code {
	background: transparent; border:none; border-radius:0;
	padding:12px; font-size:11.5px; line-height:1.6; color: var(--aiapi-foreground);
	overflow-x:auto; white-space:pre; font-family: ui-monospace, monospace; margin:0;
}
.aiapi-ov-request-status { display:flex; flex-direction:column; gap:6px; }
.aiapi-ov-request-status-row {
	display:flex; align-items:center; justify-content:space-between; gap:8px;
	background: var(--aiapi-card); border-radius:8px; padding:8px 10px; font-size:11.5px; color: var(--aiapi-foreground);
}
.aiapi-ov-request-status-row span:first-child { display:flex; align-items:center; gap:6px; color: var(--aiapi-muted-foreground); }

/* ---- shared bar chart tweak ---- */
.aiapi-ov-bar-chart { height:160px; }

/* ---- two-column layout ---- */
.aiapi-ov-two-col { display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap:16px; margin-top:16px; }

/* ---- API info endpoint rows ---- */
.aiapi-ov-endpoint-row {
	display:flex; align-items:center; gap:12px; padding:12px 20px; border-top:1px solid var(--aiapi-card-border);
}
.aiapi-ov-endpoint-row:first-child { border-top:none; }
.aiapi-ov-endpoint-dot { width:8px; height:8px; border-radius:999px; flex-shrink:0; }
.aiapi-ov-endpoint-info { min-width:0; flex:1; }
.aiapi-ov-endpoint-label { font-size:12.5px; font-weight:600; color: var(--aiapi-foreground); }
.aiapi-ov-endpoint-url { font-size:11px; font-family: ui-monospace, monospace; color: var(--aiapi-muted-foreground); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aiapi-ov-endpoint-actions { display:flex; gap:2px; flex-shrink:0; }
.aiapi-ov-latency-btn.is-loading { animation: aiapi-ov-spin 1s linear infinite; }
@keyframes aiapi-ov-spin { to { transform: rotate(360deg); } }

/* ---- FAQ accordion ---- */
.aiapi-ov-faq-item { border-top:1px solid var(--aiapi-card-border); }
.aiapi-ov-faq-item:first-child { border-top:none; }
.aiapi-ov-faq-trigger {
	width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
	background:none; border:none; cursor:pointer; padding:12px 20px; text-align:start;
	font-size:12.5px; font-weight:600; color: var(--aiapi-foreground);
}
.aiapi-ov-faq-trigger svg { transition: transform .15s ease; color: var(--aiapi-muted-foreground); flex-shrink:0; }
.aiapi-ov-faq-item.is-open .aiapi-ov-faq-trigger svg { transform: rotate(180deg); }
.aiapi-ov-faq-panel { display:none; padding:0 20px 14px; font-size:12px; color: var(--aiapi-muted-foreground); line-height:1.6; }
.aiapi-ov-faq-item.is-open .aiapi-ov-faq-panel { display:block; }
.aiapi-ov-faq-panel p { margin:0; }

.aiapi-activity-list { display:flex; flex-direction:column; }
.aiapi-activity-row {
	display:flex; align-items:center; gap:10px;
	padding:10px 14px; border-top:1px solid var(--aiapi-card-border);
}

.aiapi-user-footnote {
    margin-top: 20px;
}
.aiapi-user-footnote span {
    display: flex;
    gap: 5px;
}
.aiapi-activity-row:first-child { border-top:none; }
.aiapi-activity-icon {
	width:28px; height:28px; flex:0 0 28px; display:grid; place-items:center;
	border-radius:8px; background: var(--aiapi-primary-soft); color: var(--aiapi-primary);
}
.aiapi-activity-row > div { flex:1 1 auto; min-width:0; }
.aiapi-activity-row strong { display:block; font-size:12.5px; font-weight:650; color: var(--aiapi-foreground); }
.aiapi-activity-row small { display:block; margin-top:2px; font-size:11px; color: var(--aiapi-muted-foreground); }
.aiapi-activity-row b { font-size:12px; font-weight:700; color: var(--aiapi-foreground); white-space:nowrap; }
/* ---- Overview credit action buttons (Top Up / Wallet) ---- */
.aiapi-ov-credit-actions .aiapi-btn {
	gap: 8px;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.aiapi-ov-credit-actions .aiapi-btn:hover {
	transform: translateY(-1px);
	box-shadow: var(--aiapi-shadow-sm);
}
.aiapi-ov-credit-actions .aiapi-btn:active {
	transform: translateY(0);
	box-shadow: none;
}
.aiapi-ov-wallet-link {
	justify-content: space-between;
}
.aiapi-ov-wallet-link svg:last-child {
	opacity: .7;
	transition: opacity .15s ease;
}
.aiapi-ov-wallet-link:hover svg:last-child {
	opacity: 1;
}
[dir="rtl"] .aiapi-ov-wallet-link svg:last-child {
	transform: scaleX(-1);
}

/* ---- Top Up modal (Overview tab) ---- */
.aiapi-ov-topup-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .45);
	z-index: 400;
	opacity: 0;
	pointer-events: none;
	transition: opacity .18s ease;
}
.aiapi-ov-topup-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

.aiapi-ov-topup-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -48%) scale(.97);
	width: min(520px, calc(100vw - 32px));
	max-height: calc(100vh - 64px);
	overflow-y: auto;
	background: var(--aiapi-card);
	border: 1px solid var(--aiapi-card-border);
	border-radius: var(--aiapi-radius);
	box-shadow: var(--aiapi-shadow-md);
	z-index: 401;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
.aiapi-ov-topup-modal.is-open {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, -50%) scale(1);
}

.aiapi-ov-topup-modal-header {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--aiapi-card-border);
	background: var(--aiapi-card);
	z-index: 1;
}
.aiapi-ov-topup-modal-header h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--aiapi-foreground);
}

.aiapi-ov-topup-modal-body {
	padding: 20px;
}
.aiapi-ov-topup-modal-body .aiapi-card-block {
	box-shadow: none;
}

@media (max-width: 640px) {
	.aiapi-ov-topup-modal {
		width: calc(100vw - 20px);
		max-height: calc(100vh - 40px);
	}
	.aiapi-ov-topup-modal-body {
		padding: 16px;
	}
}

.aiapi-ov-topup-btn {
    border-radius: 999px;
    background: var(--aiapi-primary);
    color: var(--aiapi-primary-foreground);
}

.aiapi-ov-wallet-link {
    border-radius: 999px;
    color: var(--aiapi-primary);
    background: var(--aiapi-card);
}

/* ---- "First API request" card — full color redesign ---- */
.aiapi-ov-request-head-text div:last-child {
	font-family: ui-monospace, monospace;
	display: inline-block;
	background: var(--aiapi-card-accent-bg, var(--aiapi-muted));
	color: var(--aiapi-card-accent, var(--aiapi-muted-foreground));
	padding: 1px 7px;
	border-radius: 999px;
	font-size: 10.5px;
	margin-top: 3px;
	overflow: visible;
	white-space: nowrap;
}

.aiapi-ov-code-window {
	border-color: var(--aiapi-card-accent-border, var(--aiapi-card-border));
}

.aiapi-ov-code-cmd    { color: var(--aiapi-accent-teal); font-weight: 700; }
.aiapi-ov-code-url    { color: var(--aiapi-accent-blue); }
.aiapi-ov-code-flag   { color: var(--aiapi-accent-amber); font-weight: 600; }
.aiapi-ov-code-string { color: var(--aiapi-accent-green); }
.aiapi-ov-code-key    { color: var(--aiapi-accent-rose); }
.aiapi-ov-code-value  { color: var(--aiapi-foreground); font-weight: 600; }
.aiapi-ov-code-token  {
	color: var(--aiapi-foreground);
	font-weight: 600;
	background: var(--aiapi-muted);
	border-radius: 4px;
	padding: 0 4px;
}

.aiapi-ov-request-status-row--green,
.aiapi-ov-request-status-row--blue,
.aiapi-ov-request-status-row--amber,
.aiapi-ov-request-status-row--purple {
	border: 1px solid transparent;
}
.aiapi-ov-request-status-row--green  { background: var(--aiapi-accent-green-bg);  border-color: var(--aiapi-accent-green-border); }
.aiapi-ov-request-status-row--blue   { background: var(--aiapi-accent-blue-bg);   border-color: var(--aiapi-accent-blue-border); }
.aiapi-ov-request-status-row--amber  { background: var(--aiapi-accent-amber-bg);  border-color: var(--aiapi-accent-amber-border); }
.aiapi-ov-request-status-row--purple { background: var(--aiapi-accent-purple-bg); border-color: var(--aiapi-accent-purple-border); }

.aiapi-ov-request-status-row--green  span:first-child { color: var(--aiapi-accent-green); }
.aiapi-ov-request-status-row--blue   span:first-child { color: var(--aiapi-accent-blue); }
.aiapi-ov-request-status-row--amber  span:first-child { color: var(--aiapi-accent-amber); }
.aiapi-ov-request-status-row--purple span:first-child { color: var(--aiapi-accent-purple); }

.aiapi-ov-request-status-row--green  span:last-child,
.aiapi-ov-request-status-row--blue   span:last-child,
.aiapi-ov-request-status-row--amber  span:last-child,
.aiapi-ov-request-status-row--purple span:last-child {
	font-weight: 700;
	font-size: 11px;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--aiapi-card);
	color: var(--aiapi-foreground);
}
.aiapi-bar-chart{height:190px;padding:20px;display:flex;align-items:flex-end;gap:7px}.aiapi-bar-chart-bar{flex:1;min-width:3px;max-width:36px;margin:0 auto;background:var(--aiapi-primary);border-radius:5px 5px 2px 2px;opacity:.82;transition:height .25s ease,opacity .15s ease}.aiapi-bar-chart-bar:hover{opacity:1}
.aiapi-ov-endpoint-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--aiapi-card-border);border-radius:var(--aiapi-radius-sm); margin: 10px; background:var(--aiapi-card)}.aiapi-ov-endpoint-info{display:flex;align-items:center;gap:9px;min-width:0}.aiapi-ov-endpoint-dot{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--aiapi-success)}.aiapi-ov-endpoint-label{display:block;font-size:11px;color:var(--aiapi-foreground)}.aiapi-ov-endpoint-url{display:block;max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:var(--aiapi-muted-foreground);margin-top:2px}.aiapi-ov-endpoint-actions{display:flex;gap:7px;align-items:center}.aiapi-ov-endpoint-row .aiapi-icon-btn.is-copied{color:var(--aiapi-success);background:var(--aiapi-success-bg)}
.aiapi-ov-faq-list{
	margin-top:18px;
	background:var(--aiapi-card);
	border:1px solid var(--aiapi-card-border);
	border-radius:var(--aiapi-radius);
	box-shadow:var(--aiapi-shadow-xs);
	overflow:hidden;
}
.aiapi-ov-faq-list > .aiapi-ov-eyebrow{
	padding:18px 20px 0;
	margin-bottom:6px;
}
.aiapi-ov-faq-list > .aiapi-ov-section-title{
	padding:0 20px;
	margin:0 0 14px;
}
.aiapi-ov-faq-item{border-top:1px solid var(--aiapi-card-border)}
.aiapi-ov-faq-item:first-child{border-top:none}
.aiapi-ov-faq-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 20px;border:0;background:transparent;color:var(--aiapi-foreground);font:inherit;font-size:12px;font-weight:650;text-align:start;cursor:pointer}
.aiapi-ov-faq-trigger svg{transition:transform .18s ease;flex-shrink:0}
.aiapi-ov-faq-item.is-open .aiapi-ov-faq-trigger svg{transform:rotate(180deg)}
.aiapi-ov-faq-panel{display:none;padding:0 20px 14px;color:var(--aiapi-muted-foreground);font-size:11.5px;line-height:1.7}
.aiapi-ov-faq-item.is-open .aiapi-ov-faq-panel{display:block}

/* ------------------------------------------------------------------
   Overflow safety net — flex/grid children need explicit min-width:0
   (or min-height:0) or they refuse to shrink below their content's
   natural size, which pushes wider elements (long URLs, code blocks,
   monospace numbers) outside the panel on narrow/mobile viewports.
   ------------------------------------------------------------------ */

.aiapi-ov-two-col > section,
.aiapi-ov-glance-main,
.aiapi-ov-glance-side,
.aiapi-ov-stat-card,
.aiapi-ov-credit-mini,
.aiapi-ov-endpoint-info,
.aiapi-ov-request-status-row,
.aiapi-activity-row > div,
.aiapi-ov-getstarted-summary-text {
	min-width: 0;
}

.aiapi-ov-endpoint-url,
.activity-row small,
.aiapi-activity-row small {
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 640px) {
	.aiapi-ov-glance-main,
	.aiapi-ov-glance-side {
		padding: 16px;
	}
	.aiapi-ov-two-col > section {
		padding: 16px;
	}
	.aiapi-ov-header {
		flex-wrap: wrap;
	}
	.aiapi-ov-credit-actions {
		flex-wrap: wrap;
	}
	.aiapi-ov-stats-grid {
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	}
}