/* ==================================================================
   AI API Gateway — Public Panel Stylesheet
   ==================================================================
   Design-token architecture
   --------------------------------------------------------------
   Every color, radius and shadow used anywhere in the public panel
   is a CSS custom property declared once below. Two things matter
   for dark mode to work correctly:

   1. Tokens are declared on `.aiapi-panel` (light/default values).
   2. The SAME tokens are re-declared, with dark values, on any
      `.aiapi-panel` that is a descendant of an element carrying
      `data-aiapi-theme="dark"` — *and* on a `.aiapi-panel` that
      carries the attribute itself.

   Why both selectors are required: the full panel shell
   (`AIAPI_Full_Panel`) nests a *second* `.aiapi-panel` inside every
   tab (dashboard.php, wallet.php, keys.php, ...). Custom properties
   normally inherit down the DOM, but each nested `.aiapi-panel`
   re-declares the base (light) token block on itself — so without
   the extra descendant rule below, every nested tab would silently
   reset back to light mode even while the outer shell is dark. The
   descendant selector has higher specificity than the plain
   `.aiapi-panel` base rule, so it always wins, no matter how deep
   the nesting is.

   Do not remove either dark rule, and do not lower its specificity
   below `.aiapi-panel` — that is the exact bug this file fixes.
   ================================================================== */

.aiapi-panel {
	/* ---- Surface & text ---- */
	--aiapi-background: #f5f6fa;
	--aiapi-foreground: #3a3a3a;
	--aiapi-foreground-secondary: #475569;
	--aiapi-card: #ffffff;
	--aiapi-card-border: #e6e9ef;
	--aiapi-card-border-strong: #d8dce6;
	--aiapi-muted: #f1f4f9;
	--aiapi-muted-foreground: #64748b;
	--aiapi-muted-foreground-soft: #94a3b8;

	/* ---- Typography ---- */
	--aiapi-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Vazirmatn, Roboto, sans-serif;

	/* ---- Brand ---- */
	--aiapi-primary: #222222;
	--aiapi-primary-hover: #4338ca;
	--aiapi-primary-soft: #E4E4E4;
	--aiapi-primary-foreground: #ffffff;

	/* ---- Semantic accents (color / tint / border / on-accent text) ---- */
	--aiapi-success: #16a34a;
	--aiapi-success-bg: rgba(22, 163, 74, 0.12);
	--aiapi-success-border: rgba(22, 163, 74, 0.35);
	--aiapi-success-foreground: #ffffff;

	--aiapi-danger: #dc2626;
	--aiapi-danger-bg: rgba(220, 38, 38, 0.12);
	--aiapi-danger-border: rgba(220, 38, 38, 0.35);
	--aiapi-danger-foreground: #ffffff;

	--aiapi-info: #2563eb;
	--aiapi-info-bg: rgba(37, 99, 235, 0.12);
	--aiapi-info-border: rgba(37, 99, 235, 0.35);
	--aiapi-info-foreground: #ffffff;

	--aiapi-warning: #d97706;
	--aiapi-warning-bg: rgba(217, 119, 6, 0.12);
	--aiapi-warning-border: rgba(217, 119, 6, 0.35);
	--aiapi-warning-foreground: #ffffff;

	/* ---- Category accent colors (flat, single tone, NEVER a gradient) --
	   Used to color the main content cards across the workspace, profile,
	   and admin panels. Independent of the --aiapi-primary preset system
	   below: a person can still pick a brand preset while these stay put,
	   since they exist to help the eye tell cards apart, not to reflect
	   brand identity. Mirrors admin-shell.css's `.aiapi-admin` tokens so
	   values match everywhere `.aiapi-card-block`/`.aiapi-stat-card` are
	   used (public panel here; wp-admin re-declares the same values on
	   `.aiapi-admin`, which shares this element with `.aiapi-panel`). ---- */
	--aiapi-accent-blue:          #2563eb;
	--aiapi-accent-blue-bg:       rgba(37, 99, 235, .07);
	--aiapi-accent-blue-border:   rgba(37, 99, 235, .24);

	--aiapi-accent-purple:        #7c3aed;
	--aiapi-accent-purple-bg:     rgba(124, 58, 237, .07);
	--aiapi-accent-purple-border: rgba(124, 58, 237, .24);

	--aiapi-accent-green:         #059669;
	--aiapi-accent-green-bg:      rgba(5, 150, 105, .07);
	--aiapi-accent-green-border:  rgba(5, 150, 105, .24);

	--aiapi-accent-amber:         #d97706;
	--aiapi-accent-amber-bg:      rgba(217, 119, 6, .08);
	--aiapi-accent-amber-border:  rgba(217, 119, 6, .26);

	--aiapi-accent-rose:          #e11d48;
	--aiapi-accent-rose-bg:       rgba(225, 29, 72, .07);
	--aiapi-accent-rose-border:   rgba(225, 29, 72, .24);

	--aiapi-accent-teal:          #0d9488;
	--aiapi-accent-teal-bg:       rgba(13, 148, 136, .07);
	--aiapi-accent-teal-border:   rgba(13, 148, 136, .24);

	/* ---- Shape ---- */
	--aiapi-radius: 1rem;
	--aiapi-radius-sm: 0.75rem;
	--aiapi-radius-xs: 0.5rem;

	/* ---- Elevation ---- */
	--aiapi-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
	--aiapi-shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.06);
	--aiapi-shadow-md: 0 8px 24px -4px rgba(15, 23, 42, 0.1), 0 2px 8px -2px rgba(15, 23, 42, 0.06);

	/* ---- Interactive surfaces ---- */
	--aiapi-input-bg: #ffffff;
	--aiapi-code-bg: #f1f4f9;
	--aiapi-focus-ring: 0 0 0 3px var(--aiapi-primary-soft);
	--aiapi-selection-bg: rgba(79, 70, 229, 0.18);
	--aiapi-scrollbar-thumb: #cbd2de;
	--aiapi-scrollbar-track: transparent;

	font-family: var(--aiapi-font-family);
	color: var(--aiapi-foreground);
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	line-height: 1.55;
	font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* Form controls & buttons don't inherit font-family by default in    */
/* browsers (the UA stylesheet resets it to the OS UI font) — every   */
/* <button>/<input>/<select>/<textarea> anywhere in the panel needs   */
/* this explicit rule or it silently ignores the chosen Persian font  */
/* (Vazir/Yekan Bakh/Sahel) no matter what data-aiapi-font is set to. */
/* ------------------------------------------------------------------ */
.aiapi-panel button,
.aiapi-panel input,
.aiapi-panel select,
.aiapi-panel textarea,
.aiapi-panel optgroup,
.aiapi-panel option {
	font-family: var(--aiapi-font-family);
}

/* ------------------------------------------------------------------ */
/* Dark theme — see the architecture note at the top of this file.     */
/* Matches: the element the attribute is set on, AND any `.aiapi-panel`*/
/* nested underneath it (e.g. each tab of the full panel shell).       */
/* ------------------------------------------------------------------ */

.aiapi-panel[data-aiapi-theme="dark"],
[data-aiapi-theme="dark"] .aiapi-panel {
	--aiapi-background: #0a0c12;
	--aiapi-foreground: #e8eaf0;
	--aiapi-foreground-secondary: #aab2c4;
	--aiapi-card: #12141d;
	--aiapi-card-border: rgba(255, 255, 255, 0.08);
	--aiapi-card-border-strong: rgba(255, 255, 255, 0.14);
	--aiapi-muted: #1a1d29;
	--aiapi-muted-foreground: #9aa3b5;
	--aiapi-muted-foreground-soft: #6d7588;

	--aiapi-primary: #818cf8;
	--aiapi-primary-hover: #9aa3fb;
	--aiapi-primary-soft: rgba(129, 140, 248, 0.16);
	--aiapi-primary-foreground: #0a0c12;

	--aiapi-success: #4ade80;
	--aiapi-success-bg: rgba(74, 222, 128, 0.14);
	--aiapi-success-border: rgba(74, 222, 128, 0.35);
	--aiapi-success-foreground: #08150c;

	--aiapi-danger: #f87171;
	--aiapi-danger-bg: rgba(248, 113, 113, 0.14);
	--aiapi-danger-border: rgba(248, 113, 113, 0.35);
	--aiapi-danger-foreground: #1a0a0a;

	--aiapi-info: #60a5fa;
	--aiapi-info-bg: rgba(96, 165, 250, 0.14);
	--aiapi-info-border: rgba(96, 165, 250, 0.35);
	--aiapi-info-foreground: #0a1220;

	--aiapi-warning: #fbbf24;
	--aiapi-warning-bg: rgba(251, 191, 36, 0.14);
	--aiapi-warning-border: rgba(251, 191, 36, 0.35);
	--aiapi-warning-foreground: #1a1405;

	--aiapi-accent-blue:          #60a5fa;
	--aiapi-accent-blue-bg:       rgba(96, 165, 250, .13);
	--aiapi-accent-blue-border:   rgba(96, 165, 250, .32);

	--aiapi-accent-purple:        #a78bfa;
	--aiapi-accent-purple-bg:     rgba(167, 139, 250, .13);
	--aiapi-accent-purple-border: rgba(167, 139, 250, .32);

	--aiapi-accent-green:         #34d399;
	--aiapi-accent-green-bg:      rgba(52, 211, 153, .13);
	--aiapi-accent-green-border:  rgba(52, 211, 153, .32);

	--aiapi-accent-amber:         #fbbf24;
	--aiapi-accent-amber-bg:      rgba(251, 191, 36, .13);
	--aiapi-accent-amber-border:  rgba(251, 191, 36, .32);

	--aiapi-accent-rose:          #fb7185;
	--aiapi-accent-rose-bg:       rgba(251, 113, 133, .13);
	--aiapi-accent-rose-border:   rgba(251, 113, 133, .32);

	--aiapi-accent-teal:          #2dd4bf;
	--aiapi-accent-teal-bg:       rgba(45, 212, 191, .13);
	--aiapi-accent-teal-border:   rgba(45, 212, 191, .32);

	--aiapi-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
	--aiapi-shadow-sm: 0 2px 6px 0 rgba(0, 0, 0, 0.5), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
	--aiapi-shadow-md: 0 12px 32px -6px rgba(0, 0, 0, 0.6), 0 4px 12px -4px rgba(0, 0, 0, 0.5);

	--aiapi-input-bg: #171a25;
	--aiapi-code-bg: #171a25;
	--aiapi-selection-bg: rgba(129, 140, 248, 0.3);
	--aiapi-scrollbar-thumb: #333a4d;
	--aiapi-scrollbar-track: transparent;
}

/* ------------------------------------------------------------------ */
/* Color presets — set by the Theme Settings drawer                    */
/* (public/assets/js/theme-drawer.js -> applyPreset()).                 */
/* Same dual-selector pattern as the dark theme block above: the        */
/* attribute is only ever written on the shell root (the outer         */
/* `.aiapi-panel.aiapi-shell`), so the descendant rule is what makes    */
/* it reach the nested `.aiapi-panel` inside each tab. Placed AFTER     */
/* the dark theme block so a preset wins over the dark defaults too —   */
/* only the brand tokens are touched, so light/dark surfaces, shadows   */
/* and semantic colors are untouched by a preset choice.                */
/* "default" needs no rule: it just leaves the base brand tokens as-is. */
/* ------------------------------------------------------------------ */

.aiapi-panel[data-aiapi-preset="blue"],
[data-aiapi-preset="blue"] .aiapi-panel {
	--aiapi-primary: #2563eb;
	--aiapi-primary-hover: #1d4ed8;
	--aiapi-primary-soft: rgba(37, 99, 235, 0.14);
	--aiapi-primary-foreground: #ffffff;
	--aiapi-focus-ring: 0 0 0 3px var(--aiapi-primary-soft);
}

.aiapi-panel[data-aiapi-preset="green"],
[data-aiapi-preset="green"] .aiapi-panel {
	--aiapi-primary: #059669;
	--aiapi-primary-hover: #047857;
	--aiapi-primary-soft: rgba(5, 150, 105, 0.14);
	--aiapi-primary-foreground: #ffffff;
	--aiapi-focus-ring: 0 0 0 3px var(--aiapi-primary-soft);
}

.aiapi-panel[data-aiapi-preset="purple"],
[data-aiapi-preset="purple"] .aiapi-panel {
	--aiapi-primary: #7c3aed;
	--aiapi-primary-hover: #6d28d9;
	--aiapi-primary-soft: rgba(124, 58, 237, 0.14);
	--aiapi-primary-foreground: #ffffff;
	--aiapi-focus-ring: 0 0 0 3px var(--aiapi-primary-soft);
}

.aiapi-panel[data-aiapi-preset="rose"],
[data-aiapi-preset="rose"] .aiapi-panel {
	--aiapi-primary: #e11d48;
	--aiapi-primary-hover: #be123c;
	--aiapi-primary-soft: rgba(225, 29, 72, 0.14);
	--aiapi-primary-foreground: #ffffff;
	--aiapi-focus-ring: 0 0 0 3px var(--aiapi-primary-soft);
}

.aiapi-panel[data-aiapi-preset="amber"],
[data-aiapi-preset="amber"] .aiapi-panel {
	--aiapi-primary: #d97706;
	--aiapi-primary-hover: #b45309;
	--aiapi-primary-soft: rgba(217, 119, 6, 0.16);
	--aiapi-primary-foreground: #1a1405;
	--aiapi-focus-ring: 0 0 0 3px var(--aiapi-primary-soft);
}

/* ------------------------------------------------------------------ */
/* Font — set by the Theme Settings drawer (theme-drawer.js ->          */
/* applyFont()). "system" is the built-in default, so it needs no       */
/* override rule. Same dual-selector pattern as dark theme / presets    */
/* above — required here too, since --aiapi-font-family is re-declared  */
/* by the base `.aiapi-panel` rule on every nested tab panel.           */
/* ------------------------------------------------------------------ */

.aiapi-panel[data-aiapi-font="sans"],
[data-aiapi-font="sans"] .aiapi-panel {
	--aiapi-font-family: Roboto, "Helvetica Neue", Arial, Vazirmatn, sans-serif;
}

.aiapi-panel[data-aiapi-font="serif"],
[data-aiapi-font="serif"] .aiapi-panel {
	--aiapi-font-family: Georgia, "Times New Roman", Vazirmatn, serif;
}

/* ---- Persian font group — self-hosted, see aiapi-fonts.css for the   */
/* actual @font-face rules. Each keeps the other two Persian families   */
/* as a fallback (before the generic sans-serif) so Latin/mixed text    */
/* inside a Persian-font panel still renders with a reasonable Persian  */
/* glyph shape instead of jumping straight to the OS default.           */
.aiapi-panel[data-aiapi-font="vazir"],
[data-aiapi-font="vazir"] .aiapi-panel {
	--aiapi-font-family: Vazirmatn, Sahel, "Yekan Bakh", Tahoma, sans-serif;
}

.aiapi-panel[data-aiapi-font="yekan"],
[data-aiapi-font="yekan"] .aiapi-panel {
	--aiapi-font-family: "Yekan Bakh", Vazirmatn, Sahel, Tahoma, sans-serif;
}

.aiapi-panel[data-aiapi-font="sahel"],
[data-aiapi-font="sahel"] .aiapi-panel {
	--aiapi-font-family: Sahel, Vazirmatn, "Yekan Bakh", Tahoma, sans-serif;
}

/* ------------------------------------------------------------------ */
/* Border radius — set by the Theme Settings drawer                    */
/* (theme-drawer.js -> applyRadius()). "lg" is the built-in default     */
/* (matches the base tokens above), so it needs no override rule.      */
/* The three shape tokens are kept in the same relative proportion as   */
/* the base 16 / 12 / 8 scale used everywhere else in this file.        */
/* ------------------------------------------------------------------ */

.aiapi-panel[data-aiapi-radius="none"],
[data-aiapi-radius="none"] .aiapi-panel {
	--aiapi-radius: 0px;
	--aiapi-radius-sm: 0px;
	--aiapi-radius-xs: 0px;
}

.aiapi-panel[data-aiapi-radius="sm"],
[data-aiapi-radius="sm"] .aiapi-panel {
	--aiapi-radius: 0.5rem;
	--aiapi-radius-sm: 0.375rem;
	--aiapi-radius-xs: 0.25rem;
}

.aiapi-panel[data-aiapi-radius="md"],
[data-aiapi-radius="md"] .aiapi-panel {
	--aiapi-radius: 0.75rem;
	--aiapi-radius-sm: 0.5625rem;
	--aiapi-radius-xs: 0.375rem;
}

.aiapi-panel[data-aiapi-radius="xl"],
[data-aiapi-radius="xl"] .aiapi-panel {
	--aiapi-radius: 1.5rem;
	--aiapi-radius-sm: 1.125rem;
	--aiapi-radius-xs: 0.75rem;
}

.aiapi-panel-wide {
	width: 100%;
	max-width: none;
}

/* Fullscreen body override – remove margins and global scroll */
.aiapi-fullscreen-body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	height: 100vh;
	height: 100dvh;
}

.aiapi-panel * {
	box-sizing: border-box;
}

.aiapi-panel ::selection {
	background: var(--aiapi-selection-bg);
}

.aiapi-panel ::placeholder {
	color: var(--aiapi-muted-foreground-soft);
	opacity: 1;
}

/* Firefox scrollbars */
.aiapi-panel {
	scrollbar-color: var(--aiapi-scrollbar-thumb) var(--aiapi-scrollbar-track);
}

/* Chromium / WebKit scrollbars */
.aiapi-panel ::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
.aiapi-panel ::-webkit-scrollbar-track {
	background: var(--aiapi-scrollbar-track);
}
.aiapi-panel ::-webkit-scrollbar-thumb {
	background-color: var(--aiapi-scrollbar-thumb);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: content-box;
}

.aiapi-icon {
	flex-shrink: 0;
	pointer-events: none;
}

/* Visible keyboard focus on every interactive element */
.aiapi-panel a:focus-visible,
.aiapi-panel button:focus-visible,
.aiapi-panel input:focus-visible,
.aiapi-panel .aiapi-btn:focus-visible,
.aiapi-panel .aiapi-icon-btn:focus-visible,
.aiapi-panel .aiapi-tab-btn:focus-visible {
	outline: none;
	box-shadow: var(--aiapi-focus-ring);
	border-radius: var(--aiapi-radius-xs);
}

/* ------------------------------------------------------------------ */
/* Alerts                                                              */
/* ------------------------------------------------------------------ */

.aiapi-alert {
	border-radius: var(--aiapi-radius-sm);
	padding: 12px 16px;
	margin-bottom: 18px;
	font-size: 13.5px;
	border: 1px solid transparent;
}

.aiapi-alert-success { background: var(--aiapi-success-bg); color: var(--aiapi-success); border-color: var(--aiapi-success-border); }
.aiapi-alert-error   { background: var(--aiapi-danger-bg);  color: var(--aiapi-danger);  border-color: var(--aiapi-danger-border); }
.aiapi-alert-info    { background: var(--aiapi-info-bg);    color: var(--aiapi-info);    border-color: var(--aiapi-info-border); }

/* ------------------------------------------------------------------ */
/* Generic card block ("bg-card rounded-2xl border shadow-xs")         */
/* ------------------------------------------------------------------ */

.aiapi-card-block {
	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-card-block-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	padding: var(--aiapi-density-card-head-pad, 14px 20px);
	/* Themed header: background/text follow --aiapi-primary /
	   --aiapi-primary-foreground, so the default (black & white) theme
	   gets a soft black header with white text, and every color preset
	   (blue/green/purple/rose/amber) plus dark mode automatically get
	   their own matching header color for free — those tokens already
	   change per theme/preset elsewhere in this file. border-bottom is
	   left transparent (not omitted) so the accent-card override below
	   can keep swapping in its accent border color without also needing
	   to redeclare border-width/style. */
	background: var(--aiapi-primary);
	color: var(--aiapi-primary-foreground);
	border-bottom: 1px solid transparent;
}

.aiapi-card-block-title {
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
	color: inherit;
}

.aiapi-card-block-subtitle {
	font-size: 12px;
	color: var(--aiapi-muted-foreground);
	margin-top: 2px;
}

.aiapi-card-block-body {
	padding: var(--aiapi-density-card-body-pad, 18px 20px);
}

.aiapi-card-block-body-flush {
	padding: 0;
}

#aiapi-nl-section {
    margin-bottom: 15px;
}

.aiapi-user-empty {
    padding: 20px;
	text-align: center;
}

/* Icon boxes ("bg-muted flex size-9 items-center justify-center rounded-lg") */

.aiapi-icon-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--aiapi-radius-xs);
	background: var(--aiapi-muted);
	color: var(--aiapi-foreground);
	flex-shrink: 0;
}

.aiapi-icon-box-sm {
	width: 28px;
	height: 28px;
}

.aiapi-icon-box-primary {
	background: var(--aiapi-primary-soft);
	color: var(--aiapi-primary);
}

/* ------------------------------------------------------------------ */
/* Colored card modifiers — flat single tone, no gradient, no side      */
/* (left/right) border accent. Whole-card soft tint + a full border in  */
/* the accent color, a transparent header that blends into the tint,   */
/* and accent-colored title text/icon. The card body stays on the       */
/* neutral --aiapi-card surface so text and form fields stay crisp on   */
/* top of the tint. Applied to the main content cards of the workspace  */
/* panel, profile panel, and admin panel dashboard. Reacts to light/    */
/* dark automatically since the --aiapi-accent-* tokens above do.       */
/* ------------------------------------------------------------------ */

.aiapi-card-block--blue,
.aiapi-card-block--purple,
.aiapi-card-block--green,
.aiapi-card-block--amber,
.aiapi-card-block--teal,
.aiapi-card-block--rose {
	background: var(--aiapi-card-accent-bg);
	border-color: var(--aiapi-card-accent-border);
}

.aiapi-card-block--blue   { --aiapi-card-accent: var(--aiapi-accent-blue);   --aiapi-card-accent-bg: var(--aiapi-accent-blue-bg);   --aiapi-card-accent-border: var(--aiapi-accent-blue-border); }
.aiapi-card-block--purple { --aiapi-card-accent: var(--aiapi-accent-purple); --aiapi-card-accent-bg: var(--aiapi-accent-purple-bg); --aiapi-card-accent-border: var(--aiapi-accent-purple-border); }
.aiapi-card-block--green  { --aiapi-card-accent: var(--aiapi-accent-green);  --aiapi-card-accent-bg: var(--aiapi-accent-green-bg);  --aiapi-card-accent-border: var(--aiapi-accent-green-border); }
.aiapi-card-block--amber  { --aiapi-card-accent: var(--aiapi-accent-amber);  --aiapi-card-accent-bg: var(--aiapi-accent-amber-bg);  --aiapi-card-accent-border: var(--aiapi-accent-amber-border); }
.aiapi-card-block--teal   { --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-card-block--rose   { --aiapi-card-accent: var(--aiapi-accent-rose);   --aiapi-card-accent-bg: var(--aiapi-accent-rose-bg);   --aiapi-card-accent-border: var(--aiapi-accent-rose-border); }

.aiapi-card-block--blue .aiapi-card-block-head,
.aiapi-card-block--purple .aiapi-card-block-head,
.aiapi-card-block--green .aiapi-card-block-head,
.aiapi-card-block--amber .aiapi-card-block-head,
.aiapi-card-block--teal .aiapi-card-block-head,
.aiapi-card-block--rose .aiapi-card-block-head {
	/* Accent cards keep their own look (soft tinted background blending
	   into the card body) instead of the plain-card primary-color header
	   above — restore the neutral text color the header used to inherit
	   before that header rule started setting its own color. */
	background: transparent;
	color: var(--aiapi-foreground);
	border-bottom-color: var(--aiapi-card-accent-border);
}

.aiapi-card-block--blue .aiapi-card-block-title,
.aiapi-card-block--purple .aiapi-card-block-title,
.aiapi-card-block--green .aiapi-card-block-title,
.aiapi-card-block--amber .aiapi-card-block-title,
.aiapi-card-block--teal .aiapi-card-block-title,
.aiapi-card-block--rose .aiapi-card-block-title,
.aiapi-card-block--blue .aiapi-card-block-title svg,
.aiapi-card-block--purple .aiapi-card-block-title svg,
.aiapi-card-block--green .aiapi-card-block-title svg,
.aiapi-card-block--amber .aiapi-card-block-title svg,
.aiapi-card-block--teal .aiapi-card-block-title svg,
.aiapi-card-block--rose .aiapi-card-block-title svg {
	color: var(--aiapi-card-accent);
}

.aiapi-card-block--blue .aiapi-icon-box,
.aiapi-card-block--purple .aiapi-icon-box,
.aiapi-card-block--green .aiapi-icon-box,
.aiapi-card-block--amber .aiapi-icon-box,
.aiapi-card-block--teal .aiapi-icon-box,
.aiapi-card-block--rose .aiapi-icon-box {
	background: var(--aiapi-card-accent);
	color: #fff;
}

.aiapi-card-block--blue .aiapi-card-block-body,
.aiapi-card-block--blue .aiapi-card-block-body-flush,
.aiapi-card-block--purple .aiapi-card-block-body,
.aiapi-card-block--purple .aiapi-card-block-body-flush,
.aiapi-card-block--green .aiapi-card-block-body,
.aiapi-card-block--green .aiapi-card-block-body-flush,
.aiapi-card-block--amber .aiapi-card-block-body,
.aiapi-card-block--amber .aiapi-card-block-body-flush,
.aiapi-card-block--teal .aiapi-card-block-body,
.aiapi-card-block--teal .aiapi-card-block-body-flush,
.aiapi-card-block--rose .aiapi-card-block-body,
.aiapi-card-block--rose .aiapi-card-block-body-flush {
	background: var(--aiapi-card);
}

/* ---- Stat cards (workspace "glance" grid, admin dashboard grid) ---- */

.aiapi-stat-card--blue,
.aiapi-stat-card--purple,
.aiapi-stat-card--green,
.aiapi-stat-card--amber,
.aiapi-stat-card--teal,
.aiapi-stat-card--rose {
	background: var(--aiapi-card-accent-bg);
	border-color: var(--aiapi-card-accent-border);
}

.aiapi-stat-card--blue   { --aiapi-card-accent: var(--aiapi-accent-blue);   --aiapi-card-accent-bg: var(--aiapi-accent-blue-bg);   --aiapi-card-accent-border: var(--aiapi-accent-blue-border); }
.aiapi-stat-card--purple { --aiapi-card-accent: var(--aiapi-accent-purple); --aiapi-card-accent-bg: var(--aiapi-accent-purple-bg); --aiapi-card-accent-border: var(--aiapi-accent-purple-border); }
.aiapi-stat-card--green  { --aiapi-card-accent: var(--aiapi-accent-green);  --aiapi-card-accent-bg: var(--aiapi-accent-green-bg);  --aiapi-card-accent-border: var(--aiapi-accent-green-border); }
.aiapi-stat-card--amber  { --aiapi-card-accent: var(--aiapi-accent-amber);  --aiapi-card-accent-bg: var(--aiapi-accent-amber-bg);  --aiapi-card-accent-border: var(--aiapi-accent-amber-border); }
.aiapi-stat-card--teal   { --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-stat-card--rose   { --aiapi-card-accent: var(--aiapi-accent-rose);   --aiapi-card-accent-bg: var(--aiapi-accent-rose-bg);   --aiapi-card-accent-border: var(--aiapi-accent-rose-border); }

.aiapi-stat-card--blue .aiapi-stat-card-top,
.aiapi-stat-card--purple .aiapi-stat-card-top,
.aiapi-stat-card--green .aiapi-stat-card-top,
.aiapi-stat-card--amber .aiapi-stat-card-top,
.aiapi-stat-card--teal .aiapi-stat-card-top,
.aiapi-stat-card--rose .aiapi-stat-card-top,
.aiapi-stat-card--blue .aiapi-stat-card-value,
.aiapi-stat-card--purple .aiapi-stat-card-value,
.aiapi-stat-card--green .aiapi-stat-card-value,
.aiapi-stat-card--amber .aiapi-stat-card-value,
.aiapi-stat-card--teal .aiapi-stat-card-value,
.aiapi-stat-card--rose .aiapi-stat-card-value {
	color: var(--aiapi-card-accent);
}

/* ------------------------------------------------------------------ */
/* Buttons                                                              */
/* ------------------------------------------------------------------ */

.aiapi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1px solid transparent;
	border-radius: var(--aiapi-radius-sm);
	padding: 9px 16px;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
	line-height: 1.2;
}

.aiapi-btn:active { transform: translateY(1px); }

.aiapi-btn:disabled,
.aiapi-btn[aria-disabled="true"] {
	opacity: .5;
	cursor: not-allowed;
	pointer-events: none;
}

.aiapi-btn-primary {
	background: var(--aiapi-primary);
	color: var(--aiapi-primary-foreground);
}

.aiapi-btn-secondary {
	background: var(--aiapi-card);
	color: var(--aiapi-foreground);
	border-color: var(--aiapi-card-border);
}

.aiapi-btn-secondary:hover {
	background: var(--aiapi-muted);
}


.aiapi-btn-dark {
	background: var(--aiapi-foreground);
	color: var(--aiapi-background);
	border-color: var(--aiapi-foreground);
}

.aiapi-btn-dark:hover {
	opacity: .88;
}

.aiapi-btn-sm {
	padding: 6px 12px;
	font-size: 12.5px;
	border-radius: var(--aiapi-radius-xs);
}

.aiapi-btn-block {
	width: 100%;
	margin-top: 14px;
}

/* ------------------------------------------------------------------ */
/* Badges / pills with status dot                                      */
/* ------------------------------------------------------------------ */

.aiapi-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 11px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	border: 1px solid transparent;
}

.aiapi-badge-active   { background: var(--aiapi-success-bg); color: var(--aiapi-success); border-color: var(--aiapi-success-border); }
.aiapi-badge-inactive { background: var(--aiapi-danger-bg);  color: var(--aiapi-danger);  border-color: var(--aiapi-danger-border); }

.aiapi-status-dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	flex-shrink: 0;
}

.aiapi-status-dot-active  { background: var(--aiapi-success); }
.aiapi-status-dot-revoked { background: var(--aiapi-danger); }

.aiapi-muted {
	color: var(--aiapi-muted-foreground);
	font-size: 13px;
	text-align: center;
}

.aiapi-card-block.aiapi-card-block--teal .aiapi-muted {
    color: var(--aiapi-accent-teal);
    font-size: 13px;
    text-align: center;
    background: var(--aiapi-accent-teal-bg);
}

/* ------------------------------------------------------------------ */
/* Row lists (keys / activity / transactions / usage logs)             */
/* ------------------------------------------------------------------ */

.aiapi-list-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 20px;
	border-top: 1px solid var(--aiapi-card-border);
	transition: background-color .15s ease;
}

.aiapi-list-row:first-child { border-top: none; }
.aiapi-list-row:hover { background: var(--aiapi-muted); }

.aiapi-list-row-main {
	min-width: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.aiapi-list-row-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--aiapi-foreground);
	display: flex;
	align-items: center;
	gap: 7px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aiapi-list-row-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 11.5px;
	color: var(--aiapi-muted-foreground);
}

.aiapi-list-row-value {
	font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
	font-size: 12.5px;
	color: var(--aiapi-muted-foreground);
	flex-shrink: 0;
}

/* ------------------------------------------------------------------ */
/* Layout helper                                                       */
/* ------------------------------------------------------------------ */

.aiapi-stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ------------------------------------------------------------------ */
/* Stat cards (wallet top stats)                                       */
/* ------------------------------------------------------------------ */

.aiapi-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin-bottom: 16px;
}

.aiapi-stat-card {
	background-color: var(--aiapi-card);
	border: 1px solid var(--aiapi-card-border);
	border-radius: var(--aiapi-radius-sm);
	padding: 14px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 10px;
	min-height: 112px;
}

.aiapi-stat-card-top {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 600;
	color: var(--aiapi-muted-foreground);
}

.aiapi-stat-card-value {
	font-family: ui-monospace, monospace;
	font-size: 21px;
	font-weight: 700;
	color: var(--aiapi-foreground);
}

.aiapi-stat-card-caption {
	font-size: 11px;
	color: var(--aiapi-muted-foreground-soft);
}

/* ------------------------------------------------------------------ */
/* Simple bar chart (usage overview)                                    */
/* ------------------------------------------------------------------ */

.aiapi-bar-chart {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	height: 140px;
	padding: 4px 4px 0;
}

.aiapi-bar-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
	gap: 6px;
}

.aiapi-bar {
	width: 100%;
	max-width: 28px;
	background: var(--aiapi-warning);
	border-radius: 6px 6px 0 0;
	min-height: 4px;
	opacity: 0.85;
}

.aiapi-bar-label {
	font-size: 11px;
	color: var(--aiapi-muted-foreground);
}

/* ------------------------------------------------------------------ */
/* Quick links / actions grid                                          */
/* ------------------------------------------------------------------ */

.aiapi-quick-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 10px;
}

.aiapi-quick-link {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--aiapi-card-border);
	border-radius: var(--aiapi-radius-sm);
	background: var(--aiapi-card);
	text-decoration: none;
	color: inherit;
	transition: background-color .15s ease, border-color .15s ease;
}

.aiapi-quick-link:hover {
	background: var(--aiapi-muted);
	border-color: var(--aiapi-card-border-strong);
}

/* Title + description stack vertically. Both are inline <span>s (kept
   that way so translators/RTL don't have to think about block vs.
   inline), so the wrapper needs to be the flex column — margin-top on
   an inline child has no effect, which is why title/desc used to run
   together on one line. */
.aiapi-quick-link-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.aiapi-quick-link-title {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--aiapi-foreground);
}

.aiapi-quick-link-desc {
	font-size: 11px;
	color: var(--aiapi-muted-foreground);
	line-height: 1.4;
}

/* ------------------------------------------------------------------ */
/* Plans                                                                */
/* ------------------------------------------------------------------ */

.aiapi-plans-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

.aiapi-plan-card {
	background: var(--aiapi-card);
	border: 1px solid var(--aiapi-card-border);
	border-radius: var(--aiapi-radius);
	box-shadow: var(--aiapi-shadow-xs);
	padding: 22px;
	display: flex;
	flex-direction: column;
}

.aiapi-plan-name {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--aiapi-foreground);
}

.aiapi-plan-price {
	font-size: 24px;
	font-weight: 700;
	font-family: ui-monospace, monospace;
	margin-bottom: 14px;
	color: var(--aiapi-primary);
}

.aiapi-plan-price span {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--aiapi-muted-foreground);
	font-family: inherit;
}

.aiapi-plan-features {
	list-style: none;
	margin: 0 0 6px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
	font-size: 13px;
	color: var(--aiapi-foreground);
}

.aiapi-plan-features li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.aiapi-plan-features li .aiapi-icon {
	color: var(--aiapi-success);
	margin-top: 1px;
}

/* ------------------------------------------------------------------ */
/* Icon color utilities                                                */
/* ------------------------------------------------------------------ */

.aiapi-icon-success { color: var(--aiapi-success); }
.aiapi-icon-danger   { color: var(--aiapi-danger); }
.aiapi-icon-warning  { color: var(--aiapi-warning); }

/* ---- Dropdowns (notifications / language / theme / avatar) ---- */

.aiapi-dropdown {
	position: relative;
}

.aiapi-dropdown-panel {
	position: absolute;
	top: calc(100% + 8px);
	inset-inline-end: 0;
	min-width: 220px;
	background: var(--aiapi-card);
	border: 1px solid var(--aiapi-card-border);
	border-radius: var(--aiapi-radius-sm);
	box-shadow: var(--aiapi-shadow-md);
	padding: 6px;
	display: none;
	z-index: 50;
}

.aiapi-dropdown-panel-wide {
	min-width: 280px;
}

.aiapi-dropdown.is-open .aiapi-dropdown-panel {
	display: block;
}

/* Panels that are temporarily reparented and shown as a floating
   element (see .aiapi-dropdown-panel-floating in keys-tab.css) are no
   longer nested inside their ".aiapi-dropdown.is-open" ancestor while
   open, so they carry their own "is-open" state as well. */
.aiapi-dropdown-panel.is-open {
	display: block;
}

.aiapi-dropdown-title {
	font-size: 12px;
	font-weight: 700;
	padding: 6px 8px;
	color: var(--aiapi-muted-foreground);
}

.aiapi-dropdown-empty {
	padding: 14px 8px;
	font-size: 12.5px;
	color: var(--aiapi-muted-foreground-soft);
	text-align: center;
}

.aiapi-dropdown-item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 8px;
	border: none;
	background: none;
	border-radius: var(--aiapi-radius-xs);
	font-size: 12.5px;
	color: var(--aiapi-foreground);
	text-decoration: none;
	cursor: pointer;
	text-align: start;
}

.aiapi-dropdown-item:hover { background: var(--aiapi-muted); }
.aiapi-dropdown-item.is-active { color: var(--aiapi-primary); font-weight: 600; }
.aiapi-dropdown-item-danger { color: var(--aiapi-danger); }
.aiapi-dropdown-item-danger:hover { background: var(--aiapi-danger-bg); }

.aiapi-dropdown-sep {
	height: 1px;
	background: var(--aiapi-card-border);
	margin: 6px 2px;
}

.aiapi-dropdown-user { padding: 8px; }
.aiapi-dropdown-user-name { font-size: 13px; font-weight: 700; color: var(--aiapi-foreground); }
.aiapi-dropdown-user-email {
	font-size: 11.5px;
	color: var(--aiapi-muted-foreground);
	margin-top: 1px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aiapi-theme-toggle-icon-dark,
.aiapi-theme-toggle-label-dark { display: none; }

.aiapi-shell[data-aiapi-theme="dark"] .aiapi-theme-toggle-icon-light,
.aiapi-shell[data-aiapi-theme="dark"] .aiapi-theme-toggle-label-light { display: none; }

.aiapi-shell[data-aiapi-theme="dark"] .aiapi-theme-toggle-icon-dark,
.aiapi-shell[data-aiapi-theme="dark"] .aiapi-theme-toggle-label-dark { display: inline-flex; }

/* ---- Avatar ---- */

.aiapi-avatar-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: none;
	background: none;
	cursor: pointer;
	padding: 2px;
	border-radius: 999px;
}

.aiapi-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--aiapi-primary);
	color: var(--aiapi-primary-foreground);
	font-size: 12px;
	font-weight: 700;
}

.aiapi-avatar-chevron {
	display: none;
	color: var(--aiapi-muted-foreground-soft);
}

@media (min-width: 640px) {
	.aiapi-avatar-chevron { display: inline-flex; }
}

/* ================================================================ */
/* Header + Sidebar shell – Full height layout                      */
/* ================================================================ */

.aiapi-shell {
	--aiapi-header-h: 56px;
	--aiapi-sidebar-w: 200px;
	--aiapi-sidebar-w-collapsed: 60px;

	/* ---- Density tokens — set by the Theme Settings drawer          */
	/* (theme-drawer.js -> applyDensity()). "default" is the built-in   */
	/* baseline (matches the values already used below), so it needs   */
	/* no override block. These are custom properties, so they inherit */
	/* normally into the sidebar tabs, card heads/bodies, etc. — any    */
	/* one of those rules can opt in just by referencing the token.     */
	--aiapi-density-header-h: 56px;
	--aiapi-density-main-pad: 20px;
	--aiapi-density-sidebar-pad: 14px 10px;
	--aiapi-density-card-head-pad: 14px 20px;
	--aiapi-density-card-body-pad: 18px 20px;
	--aiapi-density-tab-pad: 8px 14px;
	--aiapi-density-tab-font: 13px;

	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--aiapi-background);
	padding: 0;
	margin: 0;
	width: 100%;
	transition: background-color .2s ease;
}

.aiapi-shell[data-aiapi-density="compact"] {
	--aiapi-density-header-h: 48px;
	--aiapi-density-main-pad: 14px;
	--aiapi-density-sidebar-pad: 10px 8px;
	--aiapi-density-card-head-pad: 10px 16px;
	--aiapi-density-card-body-pad: 12px 16px;
	--aiapi-density-tab-pad: 6px 10px;
	--aiapi-density-tab-font: 12.5px;
}

.aiapi-shell[data-aiapi-density="comfortable"] {
	--aiapi-density-header-h: 64px;
	--aiapi-density-main-pad: 28px;
	--aiapi-density-sidebar-pad: 18px 14px;
	--aiapi-density-card-head-pad: 18px 24px;
	--aiapi-density-card-body-pad: 24px 24px;
	--aiapi-density-tab-pad: 10px 18px;
	--aiapi-density-tab-font: 13.5px;
}

/* ---- Header ---- */

.aiapi-shell-header {
	flex-shrink: 0;
	height: var(--aiapi-density-header-h, 56px);
	display: flex;
	align-items: center;
	padding: 0 14px;
	background: var(--aiapi-background);
	z-index: 10;
}

.aiapi-shell-header-inner {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
}

/* Icon buttons inside header */
.aiapi-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--aiapi-radius-xs);
	border: none;
	background: transparent;
	color: var(--aiapi-muted-foreground);
	cursor: pointer;
	flex-shrink: 0;
	transition: background-color .15s ease, color .15s ease;
}

.aiapi-icon-btn:hover {
	background: var(--aiapi-muted);
	color: var(--aiapi-foreground);
}

.aiapi-sidebar-trigger svg {
	transition: transform .2s ease;
}

.aiapi-shell[dir="rtl"] .aiapi-sidebar-trigger svg {
	transform: scaleX(-1);
}

/* Logo */
.aiapi-shell-logo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 8px;
	border-radius: var(--aiapi-radius-xs);
	text-decoration: none;
	color: inherit;
	font-weight: 700;
	font-size: 13.5px;
	white-space: nowrap;
	overflow: hidden;
}

.aiapi-shell-logo:hover {
	background: var(--aiapi-muted);
}

.aiapi-shell-logo-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: var(--aiapi-radius-xs);
	background: transparent;
	color: var(--aiapi-primary);
	flex-shrink: 0;
	overflow: hidden;
}

.aiapi-shell-logo-text {
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 160px;
	color: var(--aiapi-foreground);
}

.aiapi-shell-header-spacer {
	flex: 1 1 auto;
}

/* Search */
.aiapi-shell-search {
	display: none;
	align-items: center;
	gap: 8px;
	background: var(--aiapi-muted);
	border: 1px solid var(--aiapi-card-border);
	border-radius: var(--aiapi-radius-xs);
	padding: 7px 10px;
	font-size: 12.5px;
	color: var(--aiapi-muted-foreground);
	cursor: pointer;
	white-space: nowrap;
}

.aiapi-shell-search:hover {
	color: var(--aiapi-foreground);
	border-color: var(--aiapi-card-border-strong);
}

.aiapi-shell-kbd {
	margin-inline-start: 10px;
	font-size: 10px;
	padding: 1px 6px;
	border: 1px solid var(--aiapi-card-border);
	border-radius: 4px;
	color: var(--aiapi-muted-foreground-soft);
}

.aiapi-shell-dot {
	position: absolute;
	top: 7px;
	inset-inline-end: 7px;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--aiapi-danger);
	border: 2px solid var(--aiapi-background);
}

.aiapi-hide-mobile {
	display: none;
}

@media (min-width: 640px) {
	.aiapi-shell-search { display: inline-flex; }
	.aiapi-hide-mobile { display: inline-flex; }
}

/* ---- Body (sidebar + main) ---- */

.aiapi-shell-body {
	display: flex;
	flex: 1;
	overflow: hidden;
	gap: 1rem;
	padding: 0 1rem 1rem 1rem;
}

/* Sidebar */
.aiapi-sidebar {
	flex-shrink: 0;
	width: var(--aiapi-sidebar-w);
	height: 100%;
	overflow-y: auto;
	padding: var(--aiapi-density-sidebar-pad, 14px 10px);
	border: 1px solid var(--aiapi-card-border);
	border-radius: var(--aiapi-radius);
	background-color: var(--aiapi-muted);
	transition: width .2s ease;
	z-index: 5;
}

.aiapi-shell.is-sidebar-collapsed .aiapi-sidebar {
	width: var(--aiapi-sidebar-w-collapsed);
	padding: 14px 6px;
}
.aiapi-shell.is-sidebar-collapsed .aiapi-tab-btn-label {
	display: none;
}
.aiapi-shell.is-sidebar-collapsed .aiapi-tab-btn {
	justify-content: center;
	padding: 8px;
}

.aiapi-sidebar .aiapi-tabs-nav {
	flex-direction: column;
	background: none;
	padding: 0;
	margin-bottom: 0;
	gap: 2px;
	overflow: visible;
}
.aiapi-sidebar .aiapi-tab-btn {
	width: 100%;
	justify-content: flex-start;
}
.aiapi-sidebar .aiapi-tab-btn.is-active {
	background: var(--aiapi-primary-soft);
	box-shadow: none;
}
.aiapi-sidebar .aiapi-tab-btn.is-active .aiapi-icon {
	color: var(--aiapi-primary);
}

/* Main content (scrollable) */
.aiapi-shell-main {
	flex: 1;
	overflow-y: auto;
	padding: var(--aiapi-density-main-pad, 20px);
	min-width: 0;
	background: var(--aiapi-card);
	border: 1px solid var(--aiapi-card-border);
	border-radius: var(--aiapi-radius);
}

/* Mobile responsive */
@media (max-width: 768px) {
	.aiapi-shell-body {
		flex-direction: column;
		padding: 0 0.5rem 0.5rem 0.5rem;
	}
	.aiapi-sidebar {
		width: 100% !important;
		height: auto;
		max-height: 200px;
		overflow-y: auto;
		border-radius: var(--aiapi-radius) var(--aiapi-radius) 0 0;
		display: none;
	}
	.aiapi-shell.is-sidebar-open .aiapi-sidebar {
		display: block;
	}
	.aiapi-shell-main {
		padding: 12px;
	}
	.aiapi-shell-logo-text {
		max-width: 100px;
	}
}

.wrap:has(.aiapi-panel),
.container:has(.aiapi-panel) {
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.aiapi-panel,
.aiapi-panel-wide {
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box;
}

[dir="rtl"] .aiapi-panel,
[dir="rtl"] .aiapi-panel-wide {
	margin-right: 0 !important;
	margin-left: 0 !important;
}

.aiapi-fullscreen-body .wrap,
.aiapi-fullscreen-body .container,
.aiapi-fullscreen-body #primary,
.aiapi-fullscreen-body #content {
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Real notification items */
.aiapi-notification-item{display:flex;gap:9px;align-items:flex-start;padding:9px 12px;border-top:1px solid var(--aiapi-card-border);color:var(--aiapi-foreground)}
.aiapi-notification-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-notification-item strong{display:block;font-size:11px;font-weight:650}.aiapi-notification-item small{display:block;margin-top:2px;font-size:9px;line-height:1.5;color:var(--aiapi-muted-foreground)}


/* Receipt / attachment upload widget — shared by Wallet + Support */
.aiapi-receipt-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:22px 16px;border:1.5px dashed var(--aiapi-card-border-strong);border-radius:var(--aiapi-radius-sm);background:var(--aiapi-muted);cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
/* Same specificity trick already used for .aiapi-wallet-presets[hidden] in
   wallet-tab.css: a plain class rule that also sets "display" always wins
   over the browser's built-in [hidden]{display:none}, so without this,
   JS setting dropzone.hidden/preview.hidden had no visual effect and both
   the dropzone AND the preview stayed visible at once. */
.aiapi-receipt-dropzone[hidden]{display:none}
.aiapi-receipt-dropzone:hover,.aiapi-receipt-dropzone:focus-visible{border-color:var(--aiapi-primary);outline:none}
.aiapi-receipt-dropzone.is-dragover{border-color:var(--aiapi-primary);background:var(--aiapi-primary-soft)}
.aiapi-receipt-dropzone-icon{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--aiapi-card);border:1px solid var(--aiapi-card-border);color:var(--aiapi-muted-foreground-soft);margin-bottom:4px}
.aiapi-receipt-dropzone-title{font-size:12.5px;font-weight:600;color:var(--aiapi-foreground)}
.aiapi-receipt-dropzone-sub{font-size:11px;color:var(--aiapi-muted-foreground)}
.aiapi-receipt-progress{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.aiapi-receipt-progress-track{width:100%;max-width:220px;height:6px;border-radius:999px;background:var(--aiapi-card-border);overflow:hidden;position:relative}
.aiapi-receipt-progress-bar{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--aiapi-primary),var(--aiapi-primary-hover));transition:width .6s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.aiapi-receipt-progress-bar::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:aiapi-receipt-progress-shine 1.1s linear infinite}
@keyframes aiapi-receipt-progress-shine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.aiapi-receipt-progress-filename{font-size:12px;font-weight:600;color:var(--aiapi-foreground);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aiapi-receipt-preview{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--aiapi-card-border);border-radius:var(--aiapi-radius-sm);background:var(--aiapi-card)}
.aiapi-receipt-preview[hidden]{display:none}
.aiapi-receipt-preview-img{width:56px;height:56px;object-fit:cover;border-radius:var(--aiapi-radius-xs);border:1px solid var(--aiapi-card-border);flex-shrink:0}
.aiapi-receipt-preview-file{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--aiapi-radius-xs);background:var(--aiapi-muted);color:var(--aiapi-muted-foreground);flex-shrink:0;font-size:10px;font-weight:700}
.aiapi-receipt-preview-img[hidden],.aiapi-receipt-preview-file[hidden]{display:none}
.aiapi-receipt-preview-meta{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px}
.aiapi-receipt-preview-meta span{font-size:12px;color:var(--aiapi-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aiapi-support-ticket-attachment{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:11.5px;font-weight:600;color:var(--aiapi-primary)}
@media (max-width:480px){.aiapi-receipt-preview{flex-direction:column;align-items:stretch}.aiapi-receipt-preview-img,.aiapi-receipt-preview-file{width:100%;height:140px}}