/*
 * Engineering AI Hub — Design Tokens
 *
 * Each category has its own base value. All other values in that
 * category are calculated from it. Change the base → everything adjusts.
 * Every computed value is divisible by 4.
 *
 * Client overrides are applied via a <style> tag that redefines
 * the variables marked [CLIENT-CONFIGURABLE].
 */

/* Font loaded via next/font/google in layout.tsx */

:root {
  --font-family-base: 'Manrope'; /* [CLIENT-CONFIGURABLE] */
  --font-family-fallback: system-ui, -apple-system, sans-serif; /* fixed */
  --font-family: var(--font-family-base), var(--font-family-fallback);

  /* ═══════════════════════════════════════════
     TYPOGRAPHY — base: 16px
     Scale: 14*  16  18*  20  24  32  44
     (*  exception from ÷4 rule)
     ═══════════════════════════════════════════ */

  --base-text: 16px;

  --text-xs: calc(var(--base-text) * 0.875); /* 14px — Hinweis-/Hilfetexte, Meta (= text-sm) */
  --text-sm: calc(var(--base-text) * 0.875); /* 14px — kleinster Fließtext */
  --text-base: var(--base-text); /* 16px */
  --text-md: calc(var(--base-text) * 1.125); /* 18px — exception from ÷4 rule */
  --text-lg: calc(var(--base-text) * 1.25); /* 20px */
  --text-xl: calc(var(--base-text) * 1.5); /* 24px */
  --text-2xl: calc(var(--base-text) * 2); /* 32px */
  --text-3xl: calc(var(--base-text) * 2.75); /* 44px */

  --leading-tight: 1.2;
  --leading-snug: 1.3;
  --leading-normal: 1.4;
  --leading-relaxed: 1.5;

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* ═══════════════════════════════════════════
     SPACING — base: 8px
     Scale: 4  8  12  16  20  24  32  48  64
     ═══════════════════════════════════════════ */

  --base-space: 8px;

  --space-xs: calc(var(--base-space) * 0.5); /*  4px */
  --space-sm: var(--base-space); /*  8px */
  --space-md: calc(var(--base-space) * 1.5); /* 12px */
  --space-lg: calc(var(--base-space) * 2); /* 16px */
  --space-xl: calc(var(--base-space) * 2.5); /* 20px */
  --space-2xl: calc(var(--base-space) * 3); /* 24px */
  --space-3xl: calc(var(--base-space) * 4); /* 32px */
  --space-4xl: calc(var(--base-space) * 6); /* 48px */
  --space-5xl: calc(var(--base-space) * 8); /* 64px */
  --space-6xl: calc(var(--base-space) * 10); /* 80px */
  --space-7xl: calc(var(--base-space) * 12.5); /* 100px */

  /* ═══════════════════════════════════════════
     COMPONENT SIZES
     Fixed UI element sizes: badges, icons, avatars, controls.
     Scale: 16  20  24  32  40  80
     ═══════════════════════════════════════════ */

  --size-badge-sm: 16px; /* notification dot, tight badge */
  --size-badge: 20px; /* standard badge / pill */
  --size-icon-sm: 16px; /* small inline icon */
  --size-icon: 20px; /* default nav icon */
  --size-icon-lg: 24px; /* large icon */
  --size-avatar-sm: 32px; /* sidebar user avatar, agent dot */
  --size-avatar: 40px; /* header avatar */
  --size-avatar-lg: 80px; /* agent card avatar */

  --sidebar-width: 300px; /* desktop sidebar fixed width */
  --max-content-width: 1280px; /* max width of page content area */

  /* Height reserved at the very top of the viewport for a full-width app
     banner (e.g. the portal MFA prompt). Default 0 — a banner that wants to
     push the fixed header/content down sets this on document.documentElement
     while mounted and resets it to 0 on unmount. Sidebar + PageShell add it to
     their top offset / padding so nothing is overlapped. */
  --app-banner-offset: 0px;

  /* ═══════════════════════════════════════════
     BORDER RADIUS — base: 8px [CLIENT-CONFIGURABLE]
     Scale: 8  12  16  20
     ═══════════════════════════════════════════ */

  --base-radius: 8px;

  --radius-sm: var(--base-radius); /*  8px */
  --radius: calc(var(--base-radius) * 1.5); /* 12px */
  --radius-lg: calc(var(--base-radius) * 2); /* 16px */
  --radius-xl: calc(var(--base-radius) * 2.5); /* 20px */
  --radius-full: 9999px;

  /* ═══════════════════════════════════════════
     SHADOWS — base: 4px
     Offsets/blurs: 4  8  12  16
     ═══════════════════════════════════════════ */

  --base-shadow: 4px;

  --shadow-sm: 0 0 var(--base-shadow) rgba(0, 0, 0, 0.04);
  --shadow: 0 var(--base-shadow) calc(var(--base-shadow) * 2) rgba(0, 0, 0, 0.06);
  --shadow-md:
    0 var(--base-shadow) calc(var(--base-shadow) * 3) rgba(0, 0, 0, 0.06),
    0 var(--base-shadow) var(--base-shadow) rgba(0, 0, 0, 0.04);
  --shadow-lg:
    0 calc(var(--base-shadow) * 2) calc(var(--base-shadow) * 4) rgba(0, 0, 0, 0.08),
    0 var(--base-shadow) calc(var(--base-shadow) * 2) rgba(0, 0, 0, 0.04);

  /* ═══════════════════════════════════════════
     COLORS — FIXED (not client-configurable)
     ═══════════════════════════════════════════ */

  /* Text */
  --color-title: #292524; /* stone-800 */
  --color-body: #44403c; /* stone-700 */
  --color-secondary: #78716c; /* stone-500  - non important text */
  --color-placeholder: #a8a29e; /* stone-400 — placeholder text */

  /* Backgrounds */
  --color-bg: color-mix(in srgb, var(--color-primary-light) 20%, white); /* light brand tint */
  --color-card: #ffffff; /* white */
  --color-surface-hover: #f5f5f4; /* stone-100 */
  --color-surface-subtle: #fafaf9; /* stone-50 — gesperrte/readonly Felder: als
                                      "nicht editierbar" erkennbar, ohne den
                                      Wert wie bei `disabled` auszugrauen */
  --color-surface-muted: #9ca3af; /* gray-400 — cold neutral, used for disabled/locked surfaces */

  /* Borders */
  --color-border: #e7e5e4; /* stone-200 */
  --color-border-subtle: #f5f5f4; /* stone-100 */

  /* Semantic — each traffic-light color has a solid tone, a strong `-fg`
     (dark text/icon on the tint), a light `-bg` tint and a `-border`. These
     are the single source for status colors; agents must not hard-code the hex. */
  --color-danger: #dc2626; /* red-600 */
  --color-danger-fg: #991b1b; /* red-800 — strong text/icon on danger tint */
  --color-danger-bg: #fef2f2; /* red-50 */
  --color-danger-border: #fecaca; /* red-200 */

  --color-success: #16a34a; /* green-600 */
  --color-success-fg: #166534; /* green-800 — strong text/icon on success tint */
  --color-success-bg: #f0fdf4; /* green-50 */
  --color-success-border: #bbf7d0; /* green-200 */

  --color-warning: #f59e0b; /* amber-500 */
  --color-warning-fg: #92400e; /* amber-800 — strong text/icon on warning tint */
  --color-warning-bg: #fffbeb; /* amber-50 */
  --color-warning-border: #fde68a; /* amber-200 */

  --color-info: #3b82f6; /* blue-500 */
  --color-info-fg: #1e40af; /* blue-800 — strong text/icon on info tint */
  --color-info-bg: #eff6ff; /* blue-50 */
  --color-info-border: #bfdbfe; /* blue-200 */

  /* ═══════════════════════════════════════════
     COLORS — [CLIENT-CONFIGURABLE]
     ═══════════════════════════════════════════ */

  --color-primary: #122d6e; /* dark blue — header bg, dark surfaces, brand identity */
  --color-accent: #ff5100; /* orange — CTA buttons, active tabs, links, highlights */
  /* Soft tint of primary — same hue, full saturation, hochgezogen auf 85% lightness.
     Entspricht dem bisher hart codierten #B4D6FF für den Default-Primary, zieht
     nun aber automatisch bei Client-Branding mit: setzt der Superadmin Orange,
     wird primary-light ein helles Pfirsich, Marine → helles Pastellblau, usw. */
  --color-primary-light: color-mix(in oklch, var(--color-primary) 15%, white);

  /* ═══════════════════════════════════════════
     Z-INDEX
     ═══════════════════════════════════════════ */

  --z-sticky: 10;
  --z-floating: 20;
  --z-dropdown: 30;
  --z-modal: 40;
  --z-overlay: 50;
  --z-toast: 60;
  /* Hover-Tooltips sind cursor-gebunden und ephemer (pointer-events: none) —
     nichts darf sie überdecken. Deutlich über der Skala, weil einzelne
     Agent-Dialoge außerhalb der Skala liegen (z. B. Gutachtrudes Foto-/
     Norm-Picker auf 1001) und der Bubble-Portal nach document.body sonst
     hinter ihnen landet. */
  --z-tooltip: 1100;

  /* ═══════════════════════════════════════════
     TRANSITIONS
     ═══════════════════════════════════════════ */

  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
}

/* ═══════════════════════════════════════════
   BASE ELEMENT STYLES
   ═══════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-family);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-body);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100dvh;
}

/* Standardisierter Platzhalter: einheitlich --text-sm (14px) und die
   Placeholder-Farbe für ALLE nativen Felder. Einzelne Felder können das
   per eigenem ::placeholder überschreiben. opacity:1, weil Firefox
   Placeholder sonst zusätzlich abdunkelt. */
input::placeholder,
textarea::placeholder {
  font-size: var(--text-sm);
  color: var(--color-placeholder);
  opacity: 1;
}

/* ═══════════════════════════════════════════
   TYPOGRAPHY — Semantic Text Styles
   Mobile-first, scales up at md and lg.
   Body text stays --base-text on all devices.

   Breakpoints:
     md  = 768px   (tablets)
     lg  = 1024px  (desktop)

   Scale: 12  16  18*  20  24  32  44
   (* 18px is the only exception from ÷4 rule)

   Scale reference (at --base-text: 16px):
              Mobile    Tablet    Desktop
   h1        24px      32px      44px
   h2        20px      24px      32px
   h3        20px      20px      24px
   h4        18px      20px      20px
   subtitle  16px      16px      16px
   body      16px      16px      16px
   small     14px      14px      14px
   overline  14px      14px      14px
   ═══════════════════════════════════════════ */

h1,
.text-h1 {
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  font-weight: var(--font-bold);
  color: var(--color-title);
  letter-spacing: -0.01em;
}

h2,
.text-h2 {
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  font-weight: var(--font-bold);
  color: var(--color-title);
}

h3,
.text-h3 {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  font-weight: var(--font-bold);
  color: var(--color-title);
}

h4,
.text-h4 {
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  font-weight: var(--font-semibold);
  color: var(--color-title);
}

.text-subtitle {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--font-normal);
  color: var(--color-secondary);
}

.text-body {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  font-weight: var(--font-normal);
  color: var(--color-body);
}

.text-small {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  font-weight: var(--font-normal);
  color: var(--color-secondary);
}

.text-overline {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  font-weight: var(--font-semibold);
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Tablet (≥768px) ─────────────────────── */
@media (min-width: 768px) {
  h1,
  .text-h1 {
    font-size: var(--text-2xl);
  }
  h2,
  .text-h2 {
    font-size: var(--text-xl);
  }
  h4,
  .text-h4 {
    font-size: var(--text-lg);
  }
}

/* ── Desktop (≥1024px) ───────────────────── */
@media (min-width: 1024px) {
  h1,
  .text-h1 {
    font-size: var(--text-3xl);
    letter-spacing: -0.02em;
  }
  h2,
  .text-h2 {
    font-size: var(--text-2xl);
  }
  h3,
  .text-h3 {
    font-size: var(--text-xl);
  }
}

/* ═══════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════ */

* {
  scrollbar-width: thin;
  scrollbar-color: #d6d3d1 transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: #d6d3d1;
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
  background: #a8a29e;
}

/* ═══════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════ */

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Loading placeholder pulse (Skeleton, DataTable loading rows). Central for the
   same reason as the others — a card full of placeholder bars would otherwise
   inject one identical <style> block per bar. */
@keyframes ai-hub-skeleton-pulse {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
}

/* Toast entry: slide down + fade in. Owned centrally so the shared Toast
   carries no inline <style> keyframe. */
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Listening equalizer: bars pulse vertically to signal "the AI is listening".
   Owned centrally (like `spin`) so the shared ListeningEqualizer carries no
   inline keyframe. Per-bar timing comes from --bar-delay / --bar-duration. */
@keyframes equalizer-bar {
  0%,
  100% {
    transform: scaleY(0.35);
  }
  50% {
    transform: scaleY(1);
  }
}

.aih-equalizer-bar {
  transform-origin: center;
  transform: scaleY(0.35);
  animation: equalizer-bar var(--bar-duration, 0.9s) ease-in-out var(--bar-delay, 0s) infinite;
}

/* Respect reduced-motion: hold a calm, static height instead of pulsing. */
@media (prefers-reduced-motion: reduce) {
  .aih-equalizer-bar {
    animation: none;
    transform: scaleY(0.6);
  }
}

/* ═══════════════════════════════════════════
   AGENT COLORS — loaded from shared.agent_colors at runtime.

   Agents mount their palette via useAgentColors() + agentColorsToCssVars()
   on the [data-agent="<slug>"] wrapper. The portal dashboard emits a
   <style> block via agentColorsToStyleBlock() so every AgentCard picks
   up its own primary/primary-light/accent.

   defaults.css defines no per-agent rules — the DB is the single source.
   ═══════════════════════════════════════════ */

/* ─── Layout utilities ───────────────────────────────────────────────────────
 * Responsive layout classes for common patterns.
 * Use these in components and pages — same classes work in dummies and real app.
 */

/* Card surface: white card background, 1px subtle border, large radius, soft
   shadow. Mirrors the `cardSurface` style constant exported from shared-ui —
   use the class for plain markup, the constant when composing inline styles. */
.card-surface {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Dashboard layout: always stacked */
.dashboard-layout,
.dashboard-layout-main,
.dashboard-layout-aside {
  display: contents;
}

/* Agent list: vertical rows, mobile only (<768px) */
.agent-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
@media (min-width: 768px) {
  .agent-list {
    display: none;
  }
}

/* Agent scroll: unused, kept for compatibility */
.agent-scroll {
  display: none;
}

/* Agent grid: hidden on mobile, auto-fill on tablet+ (≥768px) */
.agent-grid {
  display: none;
}
@media (min-width: 768px) {
  .agent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-lg);
  }
}

/* ─── AgentCard (shared-ui) ───────────────────────────────────────────────────
 * Eine Kachel je Agent — EIN DOM-Baum, den CSS zwischen zwei Layouts
 * umschaltet (Pflichtregel „ein DOM-Knoten pro Element", CLAUDE.md):
 *   < 768px   Zeile:  Avatar-Quadrat · Text · runder Pfeil-Button
 *   ≥ 768px   Karte:  Farbband · überlappender Avatar-Kreis · CTA unten
 * Deshalb liegen die Styles hier statt inline in AgentCard.tsx: Inline-Styles
 * kennen keinen Breakpoint und schlagen jede Klassenregel.
 * `data-locked` markiert einen nicht lizenzierten Agenten. */
.agent-card {
  --agent-card-avatar: 48px; /* Avatar-Quadrat in der Zeile */
  --agent-card-band: 120px; /* Höhe des Farbbands in der Karte */
  --agent-card-cta: 36px; /* runder Pfeil-Button in der Zeile */
  --agent-card-fav: 32px; /* Favoriten-Herz in der Karte */

  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'media body cta';
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.agent-card__media {
  grid-area: media;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--agent-card-avatar);
  height: var(--agent-card-avatar);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-primary-light);
}

.agent-card[data-locked] .agent-card__media {
  background: var(--color-surface-muted);
  opacity: 0.5;
}

.agent-card__avatar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--agent-card-avatar);
  height: var(--agent-card-avatar);
  object-fit: cover;
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-primary);
}

.agent-card[data-locked] .agent-card__avatar {
  color: white;
}

.agent-card__avatar-icon {
  width: 18px;
  height: 18px;
}

/* Favorit: nur in der Karte — in der schmalen Zeile ist neben Text und
   Pfeil-Button kein Platz dafür. */
.agent-card__fav {
  display: none;
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  align-items: center;
  justify-content: center;
  width: var(--agent-card-fav);
  height: var(--agent-card-fav);
  border: none;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.7);
  color: var(--color-placeholder);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.agent-card__fav[data-pinned] {
  color: var(--color-danger);
}

.agent-card__fav-icon {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
}

.agent-card__body {
  grid-area: body;
  min-width: 0;
}

.agent-card__name {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-title);
}

.agent-card__description {
  overflow: hidden;
  font-size: var(--text-sm);
  color: var(--color-secondary);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.agent-card[data-locked] .agent-card__name,
.agent-card[data-locked] .agent-card__description {
  opacity: 0.5;
}

.agent-card__trial {
  display: inline-block;
  margin-top: var(--space-xs);
  padding: 1px var(--space-sm);
  border-radius: var(--radius-full);
  background: var(--color-warning-bg);
  color: var(--color-warning);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

/* Ein Button für beide Layouts: in der Zeile nur das Pfeil-Icon, in der Karte
   der beschriftete CTA. Der Zugangsname bleibt über aria-label gleich. */
.agent-card__cta {
  grid-area: cta;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: var(--agent-card-cta);
  height: var(--agent-card-cta);
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-secondary);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.agent-card__cta:hover {
  background: var(--color-surface-hover);
}

.agent-card__cta-text {
  display: none;
}

.agent-card__cta-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

@media (min-width: 768px) {
  .agent-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 'media' 'body' 'cta';
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    padding: 0 0 var(--space-2xl);
    box-shadow: var(--shadow);
  }

  /* Das Farbband ist ein Pseudo-Element, damit der Avatar als einziges Kind
     darüber hinausragen kann (halbe Höhe nach unten in den Textbereich). */
  .agent-card__media {
    align-items: flex-start;
    width: auto;
    height: auto;
    padding-top: var(--agent-card-band);
    overflow: visible;
    border-radius: 0;
    background: none;
  }

  .agent-card__media::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: var(--agent-card-band);
    background: var(--color-primary-light);
  }

  .agent-card[data-locked] .agent-card__media {
    background: none;
    opacity: 1;
  }

  .agent-card[data-locked] .agent-card__media::before {
    background: var(--color-surface-muted);
    opacity: 0.7;
  }

  .agent-card__avatar {
    position: relative;
    width: var(--size-avatar-lg);
    height: var(--size-avatar-lg);
    margin-top: calc(var(--size-avatar-lg) / -2);
    border: 3px solid var(--color-card);
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: white;
    font-size: var(--text-xl);
  }

  .agent-card[data-locked] .agent-card__avatar {
    background: var(--color-surface-muted);
    opacity: 0.5;
  }

  .agent-card__avatar-icon {
    width: 28px;
    height: 28px;
  }

  .agent-card__fav {
    display: flex;
  }

  .agent-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 var(--space-2xl);
    padding-top: var(--space-lg);
    text-align: center;
  }

  .agent-card__name {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
  }

  .agent-card__description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-top: var(--space-xs);
    line-height: var(--leading-relaxed);
    white-space: normal;
  }

  .agent-card__trial {
    margin-top: var(--space-md);
  }

  .agent-card__cta {
    width: auto;
    height: auto;
    margin: var(--space-lg) var(--space-2xl) 0;
    padding: var(--space-md);
    border-radius: var(--radius);
    background: var(--color-accent);
    color: white;
  }

  /* Nicht lizenziert: dunkler „Demo anfragen"-Button statt CTA-Orange. */
  .agent-card[data-locked] .agent-card__cta {
    background: var(--color-title);
  }

  /* Der dunkle Locked-Hintergrund oben hat die höhere Spezifität und bleibt
     beim Hover stehen — nur die Aufhellung kommt dazu. */
  .agent-card__cta:hover {
    filter: brightness(0.95);
    background: var(--color-accent);
  }

  .agent-card__cta-text {
    display: inline;
  }

  .agent-card__cta-icon {
    width: 14px;
    height: 14px;
  }
}

/* Native <dialog> zentrieren.
   Ohne `margin: auto` pinnt das User-Agent-Stylesheet den showModal()-Dialog
   in die linke obere Ecke. Einzelne Dialoge können den Stil weiter überschreiben. */
dialog {
  margin: auto;
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

/* Kein Resize-Griff an Textareas — App-weit verboten. Der diagonale Greifer in
   der unteren Ecke passt nicht zum Design; Höhe steuert `rows`. `!important`
   ist hier bewusst gesetzt: einzelne Komponenten haben wiederholt versucht,
   per Inline-`style={{ resize: ... }}` den Griff doch wieder einzuschalten —
   ohne `!important` gewinnt Inline-CSS immer gegen eine Tag-Regel. */
textarea {
  resize: none !important;
}

/* Einheitlicher Fokus-Rahmen app-weit: dunkler Rand (wie TextField), damit alle
   Eingabefelder denselben Fokus-Zustand zeigen. `!important` überschreibt die
   inline gesetzte border-color roher <input>/<textarea>. Randlose Felder
   (border: none) bleiben unberührt (kein Rand → nichts einzufärben). */
input:focus,
textarea:focus {
  border-color: var(--color-secondary) !important;
  outline: none;
}

/* ─── AudioPlayer (shared-ui) ─────────────────────────────────────────────────
 * Styled audio player: rounded card, circular brand-coloured play button, and a
 * draggable seek bar (the range thumb needs pseudo-elements, so the styles live
 * here rather than inline). Consumed by AudioPlayer.tsx via `.aih-audio*`.
 * Fortschritt kommt aus der --progress Variable, die die Komponente inline setzt
 * (WebKit füllt den Track nicht automatisch). */
.aih-audio {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card, #fff);
  padding: var(--space-sm) var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  box-shadow: var(--shadow-sm);
}

.aih-audio-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-primary) 12%, white);
  color: var(--color-primary);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.aih-audio-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-primary) 20%, white);
}

.aih-audio-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.aih-audio-seek {
  flex: 1;
  min-width: 0;
  height: 14px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

.aih-audio-seek:disabled {
  opacity: 0.5;
  cursor: default;
}

.aih-audio-seek::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--color-primary) 0%,
    var(--color-primary) var(--progress, 0%),
    var(--color-border) var(--progress, 0%),
    var(--color-border) 100%
  );
}

.aih-audio-seek::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--color-border);
}

.aih-audio-seek::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--color-primary);
}

.aih-audio-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid var(--color-card, #fff);
  box-shadow: var(--shadow-sm);
}

.aih-audio-seek::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid var(--color-card, #fff);
  box-shadow: var(--shadow-sm);
}

.aih-audio-time {
  flex-shrink: 0;
  font-size: var(--text-sm);
  color: var(--color-secondary);
  font-variant-numeric: tabular-nums;
}

/* ─── AudioPlayer loudness waveform ───────────────────────────────────────────
 * Shown when the recording decodes client-side (AudioPlayer.tsx). Each bar is
 * one RMS slice of the audio: tall = loud, sliver = silent. A transparent range
 * input sits on top for seek/keyboard/aria; the played bars are filled with the
 * brand colour, the rest are a faint tint, and a thin thumb marks the playhead. */
.aih-audio-wavewrap {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 34px;
  display: flex;
  align-items: center;
}

.aih-audio-wave {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}

.aih-audio-wave-bar {
  flex: 1 1 0;
  min-width: 2px;
  min-height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
  transition: background var(--transition-fast);
}

.aih-audio-wave-bar[data-played='true'] {
  background: var(--color-primary);
}

/* Interaction layer: full-size, visually transparent apart from the playhead. */
.aih-audio-seek--wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
.aih-audio-seek--wave::-webkit-slider-runnable-track {
  height: 100%;
  background: transparent;
}
.aih-audio-seek--wave::-moz-range-track {
  height: 100%;
  background: transparent;
}
.aih-audio-seek--wave::-moz-range-progress {
  background: transparent;
}
.aih-audio-seek--wave::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 3px;
  height: 34px;
  margin-top: 0;
  border-radius: 999px;
  background: var(--color-primary);
  border: none;
  box-shadow: 0 0 0 2px var(--color-card, #fff);
}
.aih-audio-seek--wave::-moz-range-thumb {
  width: 3px;
  height: 34px;
  border-radius: 999px;
  background: var(--color-primary);
  border: none;
  box-shadow: 0 0 0 2px var(--color-card, #fff);
}