/* ==================================================================
   AI API Gateway — Activity + Logs tabs (user panel)
   Every rule is scoped under .aiapi-ins so nothing leaks into other tabs.
   Colours come from the panel's --aiapi-* tokens, so light / dark and the
   Theme Settings drawer keep working.
   ================================================================== */

.aiapi-ins {
	--ins-r: calc(var(--aiapi-radius, 1rem) * .75);
	--ins-ctl: calc(36px + (var(--aiapi-density-scale, 1) - 1) * 22px);
	--ins-line: var(--aiapi-card-border);
	--ins-accent: var(--aiapi-primary);
	--ins-accent-soft: var(--aiapi-primary-soft);
	--ins-ok: #22c55e;
	--ins-err: #ef4444;
	position: relative;
	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
	padding: calc(4px * var(--aiapi-density-scale, 1)) 0 calc(40px * var(--aiapi-density-scale, 1));
	color: var(--aiapi-foreground);
	font-variant-numeric: tabular-nums;
	background: transparent;
}
.aiapi-ins *, .aiapi-ins *::before, .aiapi-ins *::after { box-sizing: border-box; }
.aiapi-ins button { font: inherit; color: inherit; cursor: pointer; }
.aiapi-ins small { font-size: 11px; color: var(--aiapi-muted-foreground); font-weight: 500; }
.aiapi-ins code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; color: var(--aiapi-muted-foreground); }
.aiapi-ins .aiapi-ins-ico { flex: none; }
.aiapi-ins.is-loading .aiapi-ins-body { opacity: .55; transition: opacity .15s; pointer-events: none; }

/* ---------- Header ---------- */
.aiapi-ins-head { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(16px * var(--aiapi-density-scale, 1)); flex-wrap: wrap; margin-bottom: calc(14px * var(--aiapi-density-scale, 1)); }
.aiapi-ins-title { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; color: var(--aiapi-foreground); }
.aiapi-ins-subtitle { margin: calc(4px * var(--aiapi-density-scale, 1)) 0 0; font-size: 13.5px; color: var(--aiapi-muted-foreground); }
.aiapi-ins-toolbar { display: flex; align-items: center; gap: calc(8px * var(--aiapi-density-scale, 1)); flex-wrap: wrap; }
.aiapi-ins-ctl { position: relative; }

.aiapi-ins-pill, .aiapi-ins-select, .aiapi-ins-iconbtn {
	height: var(--ins-ctl); display: inline-flex; align-items: center; gap: calc(8px * var(--aiapi-density-scale, 1));
	border: 1px solid var(--ins-line); background: var(--aiapi-card); color: var(--aiapi-foreground);
	border-radius: calc(var(--aiapi-radius, 1rem) * 0.625); transition: background .12s, border-color .12s, box-shadow .12s;
}
.aiapi-ins-pill { padding: 0 calc(12px * var(--aiapi-density-scale, 1)); border-radius: 999px; font-size: 13px; font-weight: 500; }
.aiapi-ins-iconbtn { width: var(--ins-ctl); justify-content: center; padding: 0; position: relative; border-radius: 999px; }
.aiapi-ins-iconbtn--sm { width: 28px; height: 28px; border-radius: calc(var(--aiapi-radius, 1rem) * 0.5); border-color: transparent; background: transparent; color: var(--aiapi-muted-foreground); }
.aiapi-ins-iconbtn:disabled { opacity: .35; cursor: not-allowed; }
.aiapi-ins-pill:hover, .aiapi-ins-select:hover, .aiapi-ins-iconbtn:hover:not(:disabled) { background: var(--aiapi-muted); border-color: var(--aiapi-card-border-strong); }
.aiapi-ins-pill.is-open, .aiapi-ins-select.is-open, .aiapi-ins-iconbtn.is-on { border-color: var(--ins-accent); box-shadow: 0 0 0 3px var(--ins-accent-soft); }
.aiapi-ins-dot {
	position: absolute; top: -4px; inset-inline-end: -4px; min-width: 16px; height: 16px; padding: 0 calc(4px * var(--aiapi-density-scale, 1));
	border-radius: 999px; background: var(--ins-accent); color: var(--aiapi-primary-foreground);
	font: 600 10px/16px inherit; font-style: normal; text-align: center;
}
.aiapi-ins-select { min-width: 210px; padding: 0 calc(12px * var(--aiapi-density-scale, 1)) 0 calc(8px * var(--aiapi-density-scale, 1)); justify-content: space-between; font-size: 13px; }
[dir="rtl"] .aiapi-ins-select { padding: 0 calc(8px * var(--aiapi-density-scale, 1)) 0 calc(12px * var(--aiapi-density-scale, 1)); }
.aiapi-ins-select-label, .aiapi-ins-select-range { flex: 1; text-align: start; white-space: nowrap; }
.aiapi-ins-select-range { font-size: 12px; padding-inline: calc(6px * var(--aiapi-density-scale, 1)); border-radius: calc(var(--aiapi-radius, 1rem) * 0.375); background: var(--ins-accent-soft); }
.aiapi-ins-badge {
	display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 22px; padding: 0 calc(6px * var(--aiapi-density-scale, 1));
	border: 1px solid var(--ins-line); border-radius: calc(var(--aiapi-radius, 1rem) * 0.375); background: var(--aiapi-card);
	font-size: 11px; font-weight: 500; color: var(--aiapi-muted-foreground); font-family: ui-monospace, Menlo, monospace;
}
.aiapi-ins-badge--ico { min-width: 28px; }

/* ---------- Popovers ---------- */
.aiapi-ins-pop {
	position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60;
	background: var(--aiapi-card); border: 1px solid var(--ins-line); border-radius: calc(var(--aiapi-radius, 1rem) * 0.75);
	box-shadow: 0 12px 32px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .06);
	padding: calc(8px * var(--aiapi-density-scale, 1)); font-size: 13.5px;
}
.aiapi-ins-pop-title { padding: calc(8px * var(--aiapi-density-scale, 1)) calc(10px * var(--aiapi-density-scale, 1)); font-size: 13px; font-weight: 600; }
.aiapi-ins-pop-note { margin: calc(6px * var(--aiapi-density-scale, 1)) calc(10px * var(--aiapi-density-scale, 1)) calc(8px * var(--aiapi-density-scale, 1)); font-size: 12.5px; line-height: 1.6; color: var(--aiapi-muted-foreground); }
.aiapi-ins-pop--tz { width: 290px; }
.aiapi-ins-tzcurrent { display: flex; align-items: center; gap: calc(8px * var(--aiapi-density-scale, 1)); margin: 0 calc(2px * var(--aiapi-density-scale, 1)) calc(8px * var(--aiapi-density-scale, 1)); padding: calc(9px * var(--aiapi-density-scale, 1)) calc(10px * var(--aiapi-density-scale, 1)); border: 1px solid var(--ins-accent); border-radius: calc(var(--aiapi-radius, 1rem) * 0.5); background: var(--ins-accent-soft); color: var(--ins-accent); font-weight: 600; }
.aiapi-ins-tzcurrent span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aiapi-ins-tzselect { display: block; width: calc(100% - 4px); margin: 0 2px calc(8px * var(--aiapi-density-scale, 1)); cursor: pointer; text-overflow: ellipsis; }
.aiapi-ins-tzquick { margin: 0 calc(2px * var(--aiapi-density-scale, 1)); }
.aiapi-ins-radio span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aiapi-ins-radio small { flex: none; direction: ltr; }
.aiapi-ins-pill span { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aiapi-ins-radio { display: flex; align-items: center; gap: calc(10px * var(--aiapi-density-scale, 1)); width: 100%; padding: calc(9px * var(--aiapi-density-scale, 1)) calc(10px * var(--aiapi-density-scale, 1)); border: 0; background: transparent; border-radius: calc(var(--aiapi-radius, 1rem) * 0.5); text-align: start; }
.aiapi-ins-radio:hover { background: var(--aiapi-muted); }
.aiapi-ins-radio i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--aiapi-card-border-strong); position: relative; flex: none; }
.aiapi-ins-radio.is-on i { border-color: var(--ins-accent); }
.aiapi-ins-radio.is-on i::after { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--ins-accent); }

.aiapi-ins-pop--range { width: 330px; max-width: calc(100vw - 32px); padding: calc(6px * var(--aiapi-density-scale, 1)); }
.aiapi-ins-opt { display: flex; align-items: center; gap: calc(10px * var(--aiapi-density-scale, 1)); width: 100%; padding: calc(7px * var(--aiapi-density-scale, 1)) calc(8px * var(--aiapi-density-scale, 1)); border: 0; background: transparent; border-radius: calc(var(--aiapi-radius, 1rem) * 0.5); text-align: start; }
.aiapi-ins-opt:hover { background: var(--aiapi-muted); }
.aiapi-ins-opt.is-on { background: var(--ins-accent-soft); color: var(--ins-accent); font-weight: 600; }
.aiapi-ins-opt-label { flex: 1; }
.aiapi-ins-opt.is-on .aiapi-ins-badge { color: var(--ins-accent); }
.aiapi-ins-sep { height: 1px; margin: calc(6px * var(--aiapi-density-scale, 1)) calc(4px * var(--aiapi-density-scale, 1)); background: var(--ins-line); }
.aiapi-ins-calgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 calc(4px * var(--aiapi-density-scale, 1)); }
.aiapi-ins-calgrid .aiapi-ins-opt { padding-inline: calc(6px * var(--aiapi-density-scale, 1)); font-size: 13px; }
.aiapi-ins-custom { padding: calc(6px * var(--aiapi-density-scale, 1)) calc(8px * var(--aiapi-density-scale, 1)) calc(8px * var(--aiapi-density-scale, 1)); display: grid; gap: calc(10px * var(--aiapi-density-scale, 1)); }
.aiapi-ins-custom label { display: grid; gap: calc(4px * var(--aiapi-density-scale, 1)); font-size: 12px; color: var(--aiapi-muted-foreground); }
.aiapi-ins-custom input, .aiapi-ins-input {
	width: 100%; height: 36px; padding: 0 calc(10px * var(--aiapi-density-scale, 1)); border: 1px solid var(--ins-line); border-radius: calc(var(--aiapi-radius, 1rem) * 0.5);
	background: var(--aiapi-card); color: var(--aiapi-foreground); font: inherit; font-size: 13px;
}
.aiapi-ins-custom input:focus, .aiapi-ins-input:focus, .aiapi-ins-subsearch input:focus { outline: 0; border-color: var(--ins-accent); box-shadow: 0 0 0 3px var(--ins-accent-soft); }
.aiapi-ins-err { margin: 0; font-size: 12px; color: var(--aiapi-danger); }
.aiapi-ins-custom-actions { display: flex; justify-content: flex-end; gap: calc(8px * var(--aiapi-density-scale, 1)); }
.aiapi-ins-btn {
	height: 34px; padding: 0 calc(14px * var(--aiapi-density-scale, 1)); border: 1px solid var(--ins-line); border-radius: calc(var(--aiapi-radius, 1rem) * 0.5625);
	background: var(--aiapi-card); font-size: 13px; font-weight: 500; transition: background .12s;
}
.aiapi-ins-btn:hover:not(:disabled) { background: var(--aiapi-muted); }
.aiapi-ins-btn:disabled { opacity: .6; cursor: default; }
.aiapi-ins .aiapi-ins-btn.aiapi-ins-btn--primary { background: var(--ins-accent); border-color: var(--ins-accent); color: var(--aiapi-primary-foreground, #fff); }
.aiapi-ins .aiapi-ins-btn.aiapi-ins-btn--primary:hover:not(:disabled) { background: var(--ins-accent); filter: brightness(1.12); }

/* Filter popover (menu + side sub-panel) */
.aiapi-ins-pop--filter { width: 224px; padding: calc(8px * var(--aiapi-density-scale, 1)); }
.aiapi-ins-menu { display: grid; gap: calc(4px * var(--aiapi-density-scale, 1)); }
.aiapi-ins-menu-item { display: flex; align-items: center; gap: calc(8px * var(--aiapi-density-scale, 1)); width: 100%; padding: calc(9px * var(--aiapi-density-scale, 1)) calc(10px * var(--aiapi-density-scale, 1)); border: 0; background: transparent; border-radius: calc(var(--aiapi-radius, 1rem) * 0.5); text-align: start; }
.aiapi-ins-menu-item span { flex: 1; }
.aiapi-ins-menu-item:hover { background: var(--aiapi-muted); }
.aiapi-ins-menu-item.is-on { background: var(--ins-accent-soft); color: var(--ins-accent); font-weight: 600; }
.aiapi-ins-count { font-style: normal; font-size: 11px; padding: 1px calc(7px * var(--aiapi-density-scale, 1)); border-radius: 999px; background: var(--ins-accent); color: var(--aiapi-primary-foreground); }
.aiapi-ins-menu-clear { margin-top: calc(4px * var(--aiapi-density-scale, 1)); padding: calc(8px * var(--aiapi-density-scale, 1)); border: 0; background: transparent; border-top: 1px solid var(--ins-line); color: var(--aiapi-danger); font-size: 12.5px; }
.aiapi-ins-subpanel {
	position: absolute; top: 0; inset-inline-end: calc(100% + 8px); width: 300px;
	background: var(--aiapi-card); border: 1px solid var(--ins-line); border-radius: calc(var(--aiapi-radius, 1rem) * 0.75);
	box-shadow: 0 12px 32px rgba(15, 23, 42, .14); padding: calc(8px * var(--aiapi-density-scale, 1)); display: grid; gap: calc(8px * var(--aiapi-density-scale, 1));
}
.aiapi-ins-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; background: var(--aiapi-muted); border-radius: calc(var(--aiapi-radius, 1rem) * 0.5625); border: 1px solid var(--ins-line); }
.aiapi-ins-seg button { height: 30px; border: 0; background: transparent; border-radius: calc(var(--aiapi-radius, 1rem) * 0.4375); font-size: 13px; color: var(--aiapi-muted-foreground); }
.aiapi-ins-seg button.is-on { background: var(--aiapi-card); color: var(--ins-accent); font-weight: 600; box-shadow: 0 1px 2px rgba(15, 23, 42, .1); }
.aiapi-ins-seg--solo { display: inline-grid; grid-template-columns: auto auto; }
.aiapi-ins-seg--solo button { padding: 0 calc(14px * var(--aiapi-density-scale, 1)); }
.aiapi-ins-subsearch { display: flex; align-items: center; gap: calc(8px * var(--aiapi-density-scale, 1)); padding: 0 calc(8px * var(--aiapi-density-scale, 1)); height: 34px; color: var(--aiapi-muted-foreground); border-bottom: 1px solid var(--ins-line); }
.aiapi-ins-subsearch input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--aiapi-foreground); font: inherit; font-size: 13px; height: 100%; }
.aiapi-ins-subsearch input:focus { box-shadow: none; }
.aiapi-ins-subsearch em { font-style: normal; font-size: 11.5px; white-space: nowrap; }
.aiapi-ins-list { max-height: 320px; overflow-y: auto; display: grid; align-content: start; gap: 1px; }
.aiapi-ins-li { display: flex; align-items: center; gap: calc(10px * var(--aiapi-density-scale, 1)); width: 100%; padding: calc(7px * var(--aiapi-density-scale, 1)) calc(8px * var(--aiapi-density-scale, 1)); border: 0; background: transparent; border-radius: calc(var(--aiapi-radius, 1rem) * 0.5); text-align: start; font-size: 13px; }
.aiapi-ins-li:hover { background: var(--aiapi-muted); }
.aiapi-ins-li-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aiapi-ins-cb { width: 16px; height: 16px; border: 1.5px solid var(--aiapi-card-border-strong); border-radius: calc(var(--aiapi-radius, 1rem) * 0.25); display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--aiapi-primary-foreground); }
.aiapi-ins-li.is-on .aiapi-ins-cb { background: var(--ins-accent); border-color: var(--ins-accent); }
.aiapi-ins-logo { border-radius: calc(var(--aiapi-radius, 1rem) * 0.25); object-fit: contain; flex: none; }
.aiapi-ins-logo-ph { display: inline-block; border-radius: calc(var(--aiapi-radius, 1rem) * 0.25); background: var(--aiapi-muted); flex: none; }
.aiapi-ins-empty-sm { padding: calc(18px * var(--aiapi-density-scale, 1)) calc(10px * var(--aiapi-density-scale, 1)); text-align: center; font-size: 13px; color: var(--aiapi-muted-foreground); }

@media (max-width: 720px) {
	.aiapi-ins-subpanel { position: static; width: auto; box-shadow: none; margin-top: calc(4px * var(--aiapi-density-scale, 1)); }
	.aiapi-ins-toolbar { width: 100%; position: relative; }
	.aiapi-ins-ctl--range { flex: 1; }
	.aiapi-ins-select { width: 100%; min-width: 0; }
	/* Popovers anchor to the whole toolbar (not to their small button) so they
	   always span the toolbar width and can never overflow the screen. */
	.aiapi-ins .aiapi-ins-ctl { position: static; }
	.aiapi-ins .aiapi-ins-pop,
	.aiapi-ins .aiapi-ins-pop--tz,
	.aiapi-ins .aiapi-ins-pop--filter,
	.aiapi-ins .aiapi-ins-pop--range {
		inset-inline: 0; width: auto; max-width: none;
	}
	.aiapi-ins .aiapi-ins-list { max-height: 260px; }
	.aiapi-ins .aiapi-ins-pill span { max-width: 140px; }
}

/* ---------- Chips + sub-tabs ---------- */
.aiapi-ins-chips { display: flex; flex-wrap: wrap; gap: calc(6px * var(--aiapi-density-scale, 1)); margin-bottom: calc(10px * var(--aiapi-density-scale, 1)); }
.aiapi-ins-chip { display: inline-flex; align-items: center; gap: calc(6px * var(--aiapi-density-scale, 1)); padding: calc(4px * var(--aiapi-density-scale, 1)) calc(6px * var(--aiapi-density-scale, 1)) calc(4px * var(--aiapi-density-scale, 1)) calc(10px * var(--aiapi-density-scale, 1)); border: 1px solid var(--ins-line); border-radius: 999px; background: var(--aiapi-card); font-size: 12px; }
[dir="rtl"] .aiapi-ins-chip { padding: calc(4px * var(--aiapi-density-scale, 1)) calc(10px * var(--aiapi-density-scale, 1)) calc(4px * var(--aiapi-density-scale, 1)) calc(6px * var(--aiapi-density-scale, 1)); }
.aiapi-ins-chip b { font-weight: 600; }
.aiapi-ins-chip em { font-style: normal; color: var(--aiapi-danger); }
.aiapi-ins-chip span { color: var(--aiapi-muted-foreground); }
.aiapi-ins-chip button { display: inline-flex; border: 0; background: var(--aiapi-muted); border-radius: 50%; width: 18px; height: 18px; align-items: center; justify-content: center; padding: 0; }
.aiapi-ins-chip.is-ex { border-color: var(--aiapi-danger-border); }

.aiapi-ins-tabs { display: flex; gap: calc(22px * var(--aiapi-density-scale, 1)); border-bottom: 1px solid var(--ins-line); margin-bottom: calc(16px * var(--aiapi-density-scale, 1)); overflow-x: auto; scrollbar-width: none; }
.aiapi-ins-tab { position: relative; padding: calc(10px * var(--aiapi-density-scale, 1)) 2px calc(12px * var(--aiapi-density-scale, 1)); border: 0; background: transparent; font-size: 14px; color: var(--aiapi-muted-foreground); white-space: nowrap; display: inline-flex; align-items: center; gap: calc(6px * var(--aiapi-density-scale, 1)); }
.aiapi-ins-tab:hover { color: var(--aiapi-foreground); }
.aiapi-ins-tab.is-active { color: var(--ins-accent); font-weight: 600; }
.aiapi-ins-tab.is-active::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--ins-accent); border-radius: 2px; }
.aiapi-ins-tab-badge { min-width: 18px; height: 18px; padding: 0 calc(5px * var(--aiapi-density-scale, 1)); border-radius: 999px; background: var(--aiapi-danger-bg); color: var(--aiapi-danger); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }

/* ---------- Cards / grids ---------- */
.aiapi-ins-body { display: grid; gap: calc(14px * var(--aiapi-density-scale, 1)); min-width: 0; }
.aiapi-ins-card { background: var(--aiapi-card); border: 1px solid var(--ins-line); border-radius: var(--ins-r); padding: calc(16px * var(--aiapi-density-scale, 1)) calc(18px * var(--aiapi-density-scale, 1)); min-width: 0; }
.aiapi-ins-card-head { display: flex; align-items: center; justify-content: space-between; gap: calc(10px * var(--aiapi-density-scale, 1)); margin-bottom: calc(10px * var(--aiapi-density-scale, 1)); }
.aiapi-ins-card-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.aiapi-ins-link { display: inline-flex; align-items: center; gap: calc(4px * var(--aiapi-density-scale, 1)); padding: 0; border: 0; background: transparent; font-size: 13px; color: var(--aiapi-foreground); text-decoration: underline; text-underline-offset: 3px; }
.aiapi-ins-link:hover { color: var(--ins-accent); }
.aiapi-ins-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(14px * var(--aiapi-density-scale, 1)); }
@media (max-width: 900px) { .aiapi-ins-grid2 { grid-template-columns: minmax(0, 1fr); } }
.aiapi-ins-hint { margin: 0 0 calc(12px * var(--aiapi-density-scale, 1)); font-size: 13px; color: var(--aiapi-muted-foreground); }
.aiapi-ins-emptycard { text-align: center; padding: calc(48px * var(--aiapi-density-scale, 1)) calc(20px * var(--aiapi-density-scale, 1)); color: var(--aiapi-muted-foreground); }
.aiapi-ins-emptycard h3 { margin: calc(10px * var(--aiapi-density-scale, 1)) 0 0; font-size: 14px; font-weight: 500; }

/* Stat cards */
.aiapi-ins-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(12px * var(--aiapi-density-scale, 1)); }
@media (max-width: 1100px) { .aiapi-ins-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .aiapi-ins-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aiapi-ins-stat { background: var(--aiapi-card); border: 1px solid var(--ins-line); border-radius: var(--ins-r); padding: calc(14px * var(--aiapi-density-scale, 1)) calc(16px * var(--aiapi-density-scale, 1)); min-width: 0; }
.aiapi-ins-stat-top { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(8px * var(--aiapi-density-scale, 1)); }
.aiapi-ins-stat-label { font-size: 13px; color: var(--aiapi-foreground-secondary); }
.aiapi-ins-spark { flex: none; max-width: 50%; height: 30px; }
.aiapi-ins-stat-value { display: flex; align-items: baseline; gap: calc(6px * var(--aiapi-density-scale, 1)); font-size: 24px; font-weight: 700; line-height: 1.2; margin-top: 2px; }
.aiapi-ins-stat-sub { margin-top: 2px; }
.aiapi-ins-usd { font-size: 12px; color: var(--aiapi-muted-foreground); }
.aiapi-ins-delta { display: inline-flex; align-items: center; gap: calc(4px * var(--aiapi-density-scale, 1)); margin-top: calc(6px * var(--aiapi-density-scale, 1)); font-size: 12px; color: var(--aiapi-muted-foreground); }
.aiapi-ins-delta b { font-weight: 600; }
.aiapi-ins-delta.is-good b, .aiapi-ins-delta.is-good svg { color: var(--aiapi-success); }
.aiapi-ins-delta.is-bad b, .aiapi-ins-delta.is-bad svg { color: var(--aiapi-danger); }
.aiapi-ins-delta.is-good, .aiapi-ins-delta.is-bad { color: var(--aiapi-muted-foreground); }
.aiapi-ins-pill-new { padding: 2px calc(8px * var(--aiapi-density-scale, 1)); border-radius: 999px; background: var(--aiapi-info-bg); color: var(--aiapi-info); font-size: 11.5px; font-weight: 600; }

/* Top lists */
.aiapi-ins-top { display: grid; }
.aiapi-ins-toprow { display: flex; align-items: center; gap: calc(10px * var(--aiapi-density-scale, 1)); padding: calc(9px * var(--aiapi-density-scale, 1)) 0; border-top: 1px solid var(--ins-line); font-size: 13.5px; }
.aiapi-ins-toprow:first-child { border-top: 0; }
.aiapi-ins-toprow > em { width: 16px; font-style: normal; color: var(--aiapi-muted-foreground); }
.aiapi-ins-keydot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.aiapi-ins-topname { flex: 1; min-width: 0; display: grid; }
.aiapi-ins-topname b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aiapi-ins-topval { white-space: nowrap; font-weight: 500; }

/* ---------- Charts ---------- */
.aiapi-ins-chart { position: relative; width: 100%; direction: ltr; }
.aiapi-ins-chart svg { display: block; overflow: visible; }
.aiapi-ins-chart .g { stroke: var(--ins-line); stroke-dasharray: 3 4; stroke-width: 1; }
.aiapi-ins-chart .yl, .aiapi-ins-chart .xl { fill: var(--aiapi-muted-foreground); font-size: 11.5px; font-family: inherit; }
.aiapi-ins-chart .hl { fill: var(--aiapi-muted); }
.aiapi-ins-chart .b { shape-rendering: crispEdges; }
.aiapi-ins-tip {
	position: absolute; z-index: 5; min-width: 190px; pointer-events: none; padding: calc(10px * var(--aiapi-density-scale, 1)) calc(12px * var(--aiapi-density-scale, 1));
	background: var(--aiapi-card); border: 1px solid var(--ins-line); border-radius: calc(var(--aiapi-radius, 1rem) * 0.625);
	box-shadow: 0 10px 28px rgba(15, 23, 42, .18); font-size: 12.5px; direction: inherit;
}
.aiapi-ins-tip[hidden] { display: none; }
.aiapi-ins-tip-title { display: inline-block; margin: -2px 0 calc(8px * var(--aiapi-density-scale, 1)); padding: 2px calc(9px * var(--aiapi-density-scale, 1)); border-radius: 999px; background: #0b0b0f; color: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.aiapi-ins-tip-row { display: flex; align-items: center; gap: calc(8px * var(--aiapi-density-scale, 1)); padding: 2px 0; }
.aiapi-ins-tip-row i { width: 4px; height: 14px; border-radius: 2px; flex: none; }
.aiapi-ins-tip-row span { flex: 1; color: var(--aiapi-foreground-secondary); }
.aiapi-ins-tip-row b { font-weight: 600; }
.aiapi-ins-tip-total { margin-top: calc(6px * var(--aiapi-density-scale, 1)); padding-top: calc(7px * var(--aiapi-density-scale, 1)); border-top: 1px solid var(--ins-line); }
.aiapi-ins-tip-total span { color: var(--aiapi-foreground); font-weight: 600; }
.aiapi-ins-tip-empty { color: var(--aiapi-muted-foreground); }
.aiapi-ins-legend { display: flex; flex-wrap: wrap; gap: calc(8px * var(--aiapi-density-scale, 1)) calc(16px * var(--aiapi-density-scale, 1)); margin-top: calc(10px * var(--aiapi-density-scale, 1)); padding-top: calc(12px * var(--aiapi-density-scale, 1)); border-top: 1px solid var(--ins-line); font-size: 12.5px; }
.aiapi-ins-legend span { display: inline-flex; align-items: center; gap: calc(6px * var(--aiapi-density-scale, 1)); }
.aiapi-ins-legend i { width: 9px; height: 9px; border-radius: 50%; }

/* ---------- Tables ---------- */
.aiapi-ins-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.aiapi-ins-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.aiapi-ins-table th { padding: calc(10px * var(--aiapi-density-scale, 1)) calc(14px * var(--aiapi-density-scale, 1)); text-align: start; font-weight: 500; font-size: 12.5px; color: var(--aiapi-muted-foreground); white-space: nowrap; border-bottom: 1px solid var(--ins-line); background: transparent; }
.aiapi-ins-table td { padding: calc(11px * var(--aiapi-density-scale, 1)) calc(14px * var(--aiapi-density-scale, 1)); border-bottom: 1px solid var(--ins-line); white-space: nowrap; vertical-align: middle; }
.aiapi-ins-table tbody tr:last-child td { border-bottom: 0; }
.aiapi-ins-table tr.is-click { cursor: pointer; }
.aiapi-ins-table tr.is-click:hover td, .aiapi-ins-table tr.is-sel td { background: var(--aiapi-muted); }
.aiapi-ins-table tr.is-click:focus-visible { outline: 2px solid var(--ins-accent); outline-offset: -2px; }
.aiapi-ins-table tr.is-sel td:first-child { box-shadow: inset 3px 0 0 var(--ins-accent); }
[dir="rtl"] .aiapi-ins-table tr.is-sel td:first-child { box-shadow: inset -3px 0 0 var(--ins-accent); }
.aiapi-ins-namecell { display: inline-flex; align-items: center; gap: calc(8px * var(--aiapi-density-scale, 1)); }
.aiapi-ins-namecell b { font-weight: 500; }
.aiapi-ins-share { display: inline-block; width: 70px; height: 6px; border-radius: 999px; background: var(--aiapi-muted); vertical-align: middle; overflow: hidden; margin-inline-end: calc(8px * var(--aiapi-density-scale, 1)); }
.aiapi-ins-share i { display: block; height: 100%; background: var(--ins-accent); border-radius: 999px; }
.aiapi-ins-share + em { font-style: normal; color: var(--aiapi-muted-foreground); }
.aiapi-ins-num { font-variant-numeric: tabular-nums; }
.aiapi-ins-status { display: inline-flex; align-items: center; padding: 2px calc(9px * var(--aiapi-density-scale, 1)); border-radius: 999px; font-size: 12px; font-weight: 600; }
.aiapi-ins-status.is-ok { background: var(--aiapi-success-bg); color: var(--aiapi-success); }
.aiapi-ins-status.is-err { background: var(--aiapi-danger-bg); color: var(--aiapi-danger); }
.aiapi-ins-status.is-pending { background: var(--aiapi-muted); color: var(--aiapi-muted-foreground); }

/* Logs: histogram + table card */
.aiapi-ins-histcard { padding: calc(12px * var(--aiapi-density-scale, 1)) calc(16px * var(--aiapi-density-scale, 1)) calc(6px * var(--aiapi-density-scale, 1)); }
.aiapi-ins-histhead { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--aiapi-muted-foreground); margin-bottom: calc(6px * var(--aiapi-density-scale, 1)); }
.aiapi-ins-histhead em { font-style: normal; color: var(--aiapi-danger); }
.aiapi-ins-histcard.is-collapsed { padding-bottom: calc(12px * var(--aiapi-density-scale, 1)); }
.aiapi-ins-tablecard { padding: 0; overflow: hidden; }
.aiapi-ins-tablecard .aiapi-ins-table th:first-child, .aiapi-ins-tablecard .aiapi-ins-table td:first-child { padding-inline-start: calc(18px * var(--aiapi-density-scale, 1)); }
.aiapi-ins-emptybox { padding: calc(56px * var(--aiapi-density-scale, 1)) calc(20px * var(--aiapi-density-scale, 1)); text-align: center; color: var(--aiapi-muted-foreground); }
.aiapi-ins-emptybox h3 { margin: calc(12px * var(--aiapi-density-scale, 1)) 0 calc(4px * var(--aiapi-density-scale, 1)); font-size: 15px; color: var(--aiapi-foreground); }
.aiapi-ins-emptybox p { margin: 0; font-size: 13px; }
.aiapi-ins-more { display: flex; justify-content: center; padding: calc(14px * var(--aiapi-density-scale, 1)); border-top: 1px solid var(--ins-line); }
.aiapi-ins-more[hidden] { display: none; }
.aiapi-ins-error { text-align: center; padding: calc(48px * var(--aiapi-density-scale, 1)) calc(16px * var(--aiapi-density-scale, 1)); color: var(--aiapi-muted-foreground); display: grid; justify-items: center; gap: calc(10px * var(--aiapi-density-scale, 1)); }

/* Skeleton */
.aiapi-ins-skeleton { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(12px * var(--aiapi-density-scale, 1)); }
.aiapi-ins-skeleton span { height: 104px; border-radius: var(--ins-r); background: linear-gradient(90deg, var(--aiapi-muted) 25%, var(--aiapi-card) 50%, var(--aiapi-muted) 75%); background-size: 200% 100%; animation: aiapi-ins-shimmer 1.3s infinite linear; }
.aiapi-ins-skeleton--logs { grid-template-columns: 1fr; }
.aiapi-ins-skeleton--logs span { height: 140px; }
.aiapi-ins-skeleton--logs span + span { height: 360px; }
@keyframes aiapi-ins-shimmer { to { background-position: -200% 0; } }

/* ---------- Generation details drawer ---------- */
.aiapi-ins-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(15, 23, 42, .28); opacity: 0; pointer-events: none; transition: opacity .2s; }
.aiapi-ins-scrim.is-open { opacity: 1; pointer-events: auto; }
.aiapi-ins.aiapi-ins-drawer {
	position: fixed; top: 0; bottom: 0; inset-inline-end: 0; z-index: 91; width: 50vw !important; min-width: 420px !important; max-width: 100vw !important; margin: 0; padding: 0;
	display: flex; flex-direction: column; background: var(--aiapi-card); border-inline-start: 1px solid var(--ins-line);
	box-shadow: -12px 0 40px rgba(15, 23, 42, .16); transform: translateX(105%); transition: transform .24s cubic-bezier(.22, .8, .3, 1);
}
.aiapi-ins.aiapi-ins-drawer[dir="rtl"] { transform: translateX(-105%); box-shadow: 12px 0 40px rgba(15, 23, 42, .16); }
.aiapi-ins.aiapi-ins-drawer.is-open { transform: none; }
body.admin-bar .aiapi-ins.aiapi-ins-drawer { top: 32px; }
@media (max-width: 782px) { body.admin-bar .aiapi-ins.aiapi-ins-drawer { top: 46px; } }
/* Mobile / small tablets: drawer is full-screen */
@media (max-width: 782px) { .aiapi-ins.aiapi-ins-drawer { width: 100vw !important; min-width: 0 !important; border-inline-start: 0; } }
.aiapi-ins-dhead { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(12px * var(--aiapi-density-scale, 1)); padding: calc(16px * var(--aiapi-density-scale, 1)) calc(20px * var(--aiapi-density-scale, 1)) calc(14px * var(--aiapi-density-scale, 1)); border-bottom: 1px solid var(--ins-line); }
.aiapi-ins-dhead h2 { margin: 0 0 calc(8px * var(--aiapi-density-scale, 1)); font-size: 16px; font-weight: 600; }
.aiapi-ins-chipmodel { display: inline-flex; align-items: center; gap: calc(6px * var(--aiapi-density-scale, 1)); padding: calc(4px * var(--aiapi-density-scale, 1)) calc(10px * var(--aiapi-density-scale, 1)); border: 1px solid var(--ins-line); border-radius: 999px; font-size: 12.5px; background: var(--aiapi-muted); }
.aiapi-ins-dbody { flex: 1; overflow-y: auto; padding: calc(16px * var(--aiapi-density-scale, 1)) calc(20px * var(--aiapi-density-scale, 1)) calc(24px * var(--aiapi-density-scale, 1)); }
.aiapi-ins-dbody h4 { margin: calc(22px * var(--aiapi-density-scale, 1)) 0 calc(10px * var(--aiapi-density-scale, 1)); font-size: 13.5px; font-weight: 600; }
.aiapi-ins-dstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(10px * var(--aiapi-density-scale, 1)); }
@media (max-width: 480px) { .aiapi-ins-dstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aiapi-ins-dstat { padding: calc(10px * var(--aiapi-density-scale, 1)) calc(12px * var(--aiapi-density-scale, 1)); border: 1px solid var(--ins-line); border-radius: calc(var(--aiapi-radius, 1rem) * 0.625); background: var(--aiapi-muted); display: grid; gap: calc(4px * var(--aiapi-density-scale, 1)); min-width: 0; }
.aiapi-ins-dstat span { display: inline-flex; align-items: center; gap: calc(6px * var(--aiapi-density-scale, 1)); font-size: 12.5px; color: var(--aiapi-muted-foreground); }
.aiapi-ins-dstat b { font-size: 14px; font-weight: 600; display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(4px * var(--aiapi-density-scale, 1)); }
.aiapi-ins-dstat em { width: 100%; font-style: normal; font-size: 11.5px; color: var(--aiapi-muted-foreground); font-weight: 400; }
.aiapi-ins-kvs { display: grid; gap: 2px; }
.aiapi-ins-kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: calc(12px * var(--aiapi-density-scale, 1)); padding: calc(7px * var(--aiapi-density-scale, 1)) 0; font-size: 13px; align-items: center; }
.aiapi-ins-kv > span { color: var(--aiapi-muted-foreground); }
.aiapi-ins-kv > div.is-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.aiapi-ins-copy { display: inline-flex; align-items: center; gap: calc(6px * var(--aiapi-density-scale, 1)); max-width: 100%; }
.aiapi-ins-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; direction: ltr; }
.aiapi-ins-muted { color: var(--aiapi-muted-foreground); }
.aiapi-ins-split { padding: calc(12px * var(--aiapi-density-scale, 1)); border: 1px solid var(--ins-line); border-radius: calc(var(--aiapi-radius, 1rem) * 0.625); }
.aiapi-ins-splitbar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--aiapi-muted); flex: 1; }
.aiapi-ins-splitbar i { background: #3b82f6; }
.aiapi-ins-splitbar b { background: #a855f7; }
.aiapi-ins-splitbar b.is-err { background: var(--ins-err); }
.aiapi-ins-splitleg { display: flex; flex-wrap: wrap; gap: calc(6px * var(--aiapi-density-scale, 1)) calc(16px * var(--aiapi-density-scale, 1)); margin-top: calc(10px * var(--aiapi-density-scale, 1)); font-size: 12.5px; }
.aiapi-ins-splitleg span { display: inline-flex; align-items: center; gap: calc(6px * var(--aiapi-density-scale, 1)); }
.aiapi-ins-splitleg i { width: 9px; height: 9px; border-radius: 50%; }
.aiapi-ins-splitleg i.c1 { background: #3b82f6; }
.aiapi-ins-splitleg i.c2 { background: #a855f7; }
.aiapi-ins-tl { display: flex; align-items: center; gap: calc(10px * var(--aiapi-density-scale, 1)); font-size: 13px; }
.aiapi-ins-tl > span { width: 80px; color: var(--aiapi-muted-foreground); }
.aiapi-ins-tl .aiapi-ins-splitbar b { background: var(--ins-ok); }
.aiapi-ins-tl .aiapi-ins-splitbar b.is-err { background: var(--ins-err); }
.aiapi-ins-tl em { font-style: normal; font-weight: 600; min-width: 64px; text-align: end; }
.aiapi-ins-dfoot { display: flex; justify-content: flex-end; gap: calc(8px * var(--aiapi-density-scale, 1)); padding: calc(12px * var(--aiapi-density-scale, 1)) calc(20px * var(--aiapi-density-scale, 1)); border-top: 1px solid var(--ins-line); }

@media (prefers-reduced-motion: reduce) {
	.aiapi-ins.aiapi-ins-drawer, .aiapi-ins-scrim { transition: none; }
	.aiapi-ins-skeleton span { animation: none; }
}

/* ---------- Small additions ---------- */
.aiapi-ins-titlebox { min-width: 0; }
.aiapi-ins-nowrap { white-space: nowrap; }
.aiapi-ins-rel { display: flex; flex-direction: column; }
.aiapi-ins-table--logs td { white-space: nowrap; }
.aiapi-ins-table--logs td:nth-child(2) .aiapi-ins-namecell b,
.aiapi-ins-table--logs td:nth-child(3) .aiapi-ins-namecell b { overflow: hidden; text-overflow: ellipsis; max-width: 220px; }

/* ---------- Logs table -> cards on mobile (no horizontal scroll) ---------- */
@media (max-width: 640px) {
	.aiapi-ins-tablecard .aiapi-ins-tablewrap { overflow-x: visible; }
	.aiapi-ins-table--logs, .aiapi-ins-table--logs tbody { display: block; width: 100%; }
	.aiapi-ins-table--logs thead { display: none; }
	.aiapi-ins-table--logs tr {
		display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10px * var(--aiapi-density-scale, 1)) calc(12px * var(--aiapi-density-scale, 1));
		padding: calc(14px * var(--aiapi-density-scale, 1)) calc(16px * var(--aiapi-density-scale, 1)); border-bottom: 1px solid var(--ins-line);
	}
	.aiapi-ins-table--logs tbody tr:last-child { border-bottom: 0; }
	.aiapi-ins-table--logs tr.is-sel { background: var(--aiapi-muted); }
	.aiapi-ins-table--logs tr.is-click:hover td, .aiapi-ins-table--logs tr.is-sel td { background: transparent; }
	.aiapi-ins-table--logs tr.is-sel td:first-child, [dir="rtl"] .aiapi-ins-table--logs tr.is-sel td:first-child { box-shadow: none; }
	.aiapi-ins-table--logs tr.is-sel { box-shadow: inset 3px 0 0 var(--ins-accent); }
	[dir="rtl"] .aiapi-ins-table--logs tr.is-sel { box-shadow: inset -3px 0 0 var(--ins-accent); }
	.aiapi-ins-table--logs td, .aiapi-ins-tablecard .aiapi-ins-table--logs td:first-child {
		display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
		padding: 0; border: 0; min-width: 0; white-space: normal; text-align: start;
	}
	.aiapi-ins-table--logs td::before {
		content: attr(data-label); font-size: 11.5px; font-weight: 400; color: var(--aiapi-muted-foreground);
	}
	/* Header row of the card: model (start) + status (end). Date sits under the model. */
	.aiapi-ins-table--logs td:nth-child(2) { order: 1; font-weight: 600; }
	.aiapi-ins-table--logs td:nth-child(9) { order: 2; align-items: flex-end; justify-self: end; }
	.aiapi-ins-table--logs td:nth-child(1) { order: 3; grid-column: 1 / -1; }
	.aiapi-ins-table--logs td:nth-child(2)::before,
	.aiapi-ins-table--logs td:nth-child(9)::before,
	.aiapi-ins-table--logs td:nth-child(1)::before { display: none; }
	.aiapi-ins-table--logs td:nth-child(1) { font-size: 12px; color: var(--aiapi-muted-foreground); padding-bottom: calc(10px * var(--aiapi-density-scale, 1)); border-bottom: 1px dashed var(--ins-line); }
	/* Detail grid */
	.aiapi-ins-table--logs td:nth-child(3) { order: 4; grid-column: 1 / -1; }
	.aiapi-ins-table--logs td:nth-child(4) { order: 5; }
	.aiapi-ins-table--logs td:nth-child(5) { order: 6; }
	.aiapi-ins-table--logs td:nth-child(6) { order: 7; }
	.aiapi-ins-table--logs td:nth-child(7) { order: 8; }
	.aiapi-ins-table--logs td:nth-child(8) { order: 9; }
	.aiapi-ins-table--logs td:nth-child(2) .aiapi-ins-namecell b,
	.aiapi-ins-table--logs td:nth-child(3) .aiapi-ins-namecell b { max-width: 100%; min-width: 0; }
	.aiapi-ins-table--logs td .aiapi-ins-namecell { max-width: 100%; min-width: 0; }
}