/* =====================================================================
   Agenic UI Components
   ---------------------------------------------------------------------
   Site-wide, single-source primitives. Each component:
   • styled exclusively via tokens.css
   • themable via local CSS-vars (no need to wrap in extra selectors)
   • offers variants via BEM-suffix modifiers only (`.ag-x--variant`)

   Add a new variant here — never re-create the look on a component-
   specific selector (e.g. `.agenic-chatbot__suggestion-btn`).
   ===================================================================== */


/* ── Chip ────────────────────────────────────────────────────────────
   Compact, inline action / filter / suggestion. Pill-shaped.

   Variants:
     .ag-chip               Default — light scheme (on bright backdrop)
     .ag-chip--inverse      Glass scheme (on dark/gradient backdrop)
     .ag-chip--solid        Filled brand — strongest emphasis
     .ag-chip--ghost        Borderless — least emphasis
     .ag-chip--sm           Smaller padding/font
     .ag-chip--icon-only    Square, icon-only

   State:
     .ag-chip.is-active     Pressed/Selected
     :hover / :active / :disabled
   ──────────────────────────────────────────────────────────────────── */

.ag-chip {
    /* Themable contract — Variants/Bridge dürfen ausschließlich diese
       Custom-Properties verändern. So bleibt der einzige Override-Punkt
       in elementor-bridge.css genau ein Selektor pro Property. */
    --chip-bg:        var(--color-surface-muted);
    --chip-border:    var(--color-border-subtle);
    --chip-text:      var(--color-text-default);
    --chip-bg-hover:  var(--c-neutral-200);
    --chip-bg-active: var(--c-neutral-300);
    --chip-border-hover: var(--c-neutral-400);
    --chip-fs:        var(--fs-150);
    --chip-fw:        var(--fw-medium);
    --chip-px:        var(--space-3);
    --chip-py:        var(--space-2);

    all: unset;

    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);

    padding: var(--chip-py) var(--chip-px);
    border: 1px solid var(--chip-border);
    background: var(--chip-bg);
    color: var(--chip-text);
    border-radius: var(--radius-pill);

    font-family: var(--font-sans);
    font-size: var(--chip-fs);
    font-weight: var(--chip-fw);
    line-height: 1.4;
    white-space: nowrap;

    cursor: pointer;
    box-sizing: border-box;

    transition:
        background var(--motion-base) var(--ease-out),
        border-color var(--motion-base) var(--ease-out),
        color var(--motion-base) var(--ease-out),
        transform var(--motion-fast) var(--ease-out);
}

.ag-chip:hover {
    background: var(--chip-bg-hover);
    border-color: var(--chip-border-hover);
}
.ag-chip:active {
    background: var(--chip-bg-active);
}
.ag-chip:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
}
.ag-chip:disabled,
.ag-chip[aria-disabled="true"] {
    cursor: default;
    opacity: .4;
}

/* Icon inside chip */
.ag-chip > svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    flex-shrink: 0;
}

/* ── Variant: inverse  (Glas auf dunklem Backdrop) ─────────────── */

.ag-chip--inverse {
    --chip-bg:           var(--color-surface-glass);
    --chip-border:       var(--color-border-on-inverse-strong);
    --chip-text:         var(--color-text-on-inverse);
    --chip-bg-hover:     var(--color-surface-glass-mid);
    --chip-bg-active:    var(--color-surface-glass-mid);
    --chip-border-hover: var(--color-border-on-inverse-strong);
    backdrop-filter:         blur(var(--blur-glass-sm));
    -webkit-backdrop-filter: blur(var(--blur-glass-sm));
}

/* ── Variant: solid  (Brand-Gradient) ──────────────────────────── */

.ag-chip--solid {
    --chip-bg:           var(--gradient-brand-horizontal);
    --chip-border:       transparent;
    --chip-text:         var(--color-brand-ink);
    --chip-bg-hover:     var(--gradient-brand-horizontal);
    --chip-bg-active:    var(--gradient-brand-horizontal);
    --chip-border-hover: transparent;
    --chip-fw:           var(--fw-semibold);
}
.ag-chip--solid:hover  { filter: brightness(1.08); }
.ag-chip--solid:active { filter: brightness(.95); }

/* ── Variant: ghost  (kein Hintergrund) ────────────────────────── */

.ag-chip--ghost {
    --chip-bg:        transparent;
    --chip-border:    transparent;
    --chip-bg-hover:  var(--color-surface-muted);
    --chip-border-hover: var(--color-border-subtle);
}
.ag-chip--ghost.ag-chip--inverse {
    --chip-bg:        transparent;
    --chip-border:    transparent;
    --chip-bg-hover:  var(--color-surface-glass);
    --chip-border-hover: var(--color-border-on-inverse);
}

/* ── State: active / pressed ───────────────────────────────────── */

.ag-chip.is-active,
.ag-chip[aria-pressed="true"] {
    --chip-bg:        var(--gradient-brand-horizontal-soft);
    --chip-border:    var(--color-brand-primary);
    --chip-text:      var(--color-text-on-inverse);
}

/* ── Size: sm ──────────────────────────────────────────────────── */

.ag-chip--sm {
    --chip-py: var(--space-1);
    --chip-fs: var(--fs-100);
}

/* ── Size: icon-only ───────────────────────────────────────────── */

.ag-chip--icon-only {
    --chip-px: 0;
    --chip-py: 0;
    width: var(--space-8);
    height: var(--space-8);
    justify-content: center;
}
.ag-chip--icon-only > svg {
    width: 16px;
    height: 16px;
}

/* ── Responsive — Mobile shrink ────────────────────────────────── */

@media (max-width: 640px) {
    .ag-chip {
        --chip-fs: var(--fs-100);
    }
}
@media (max-width: 420px) {
    .ag-chip {
        --chip-py: var(--space-1);
    }
}


/* ── Button ──────────────────────────────────────────────────────────
   Standard-Aktion. Größer als .ag-chip, mit voller Beschriftung.

   Variants:
     .ag-btn--primary       Brand-Solid (Teal)
     .ag-btn--secondary     Neutral-Surface (auf bright Backdrop)
     .ag-btn--accent        Dark-Brand (Teal-700)
     .ag-btn--gradient      Brand-Horizontal-Gradient
     .ag-btn--ghost         Outline-Only
     .ag-btn--inverse       Glas auf dunklem Backdrop
     .ag-btn--sm            Kompakter (für In-Forms)

   State: :hover · :active · :focus-visible · :disabled
   ──────────────────────────────────────────────────────────────────── */

.ag-btn {
    --btn-bg:            var(--color-brand-primary);
    --btn-bg-hover:      var(--c-teal-700, #1f9c8e);
    --btn-text:          var(--color-text-on-inverse, #fff);
    --btn-border:        transparent;
    --btn-border-hover:  transparent;
    --btn-shadow-hover:  0 6px 18px -8px rgba(43,179,163,.65);
    --btn-fs:            var(--fs-200);
    --btn-fw:            var(--fw-semibold);
    --btn-px:            var(--space-5);
    --btn-py:            var(--space-3);
    --btn-radius:        var(--radius-md);

    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);

    padding: var(--btn-py) var(--btn-px);
    background: var(--btn-bg);
    color: var(--btn-text);
    border: 1px solid var(--btn-border);
    border-radius: var(--btn-radius);

    font-family: var(--font-sans);
    font-size: var(--btn-fs);
    font-weight: var(--btn-fw);
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;

    transition:
        background var(--motion-base) var(--ease-out),
        border-color var(--motion-base) var(--ease-out),
        color var(--motion-base) var(--ease-out),
        box-shadow var(--motion-base) var(--ease-out),
        transform var(--motion-fast) var(--ease-out),
        filter var(--motion-base) var(--ease-out);
}

.ag-btn:hover {
    background: var(--btn-bg-hover);
    border-color: var(--btn-border-hover);
    box-shadow: var(--btn-shadow-hover);
}
.ag-btn:active        { transform: translateY(1px); }
.ag-btn:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; }
.ag-btn:disabled,
.ag-btn[aria-disabled="true"] { cursor: default; opacity: .45; filter: none; box-shadow: none; }

.ag-btn > svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }

/* ── Variant: secondary ─────────────────────────────────────────── */
.ag-btn--secondary {
    --btn-bg:           var(--color-surface-muted);
    --btn-bg-hover:     var(--c-neutral-200);
    --btn-text:         var(--color-text-default);
    --btn-shadow-hover: none;
}

/* ── Variant: accent (dunkler Brand) ────────────────────────────── */
.ag-btn--accent {
    --btn-bg:           var(--c-teal-700, #1a7a70);
    --btn-bg-hover:     #135f57;
    --btn-shadow-hover: 0 6px 18px -10px rgba(26,122,112,.7);
}

/* ── Variant: gradient ──────────────────────────────────────────── */
.ag-btn--gradient {
    --btn-bg:           var(--gradient-brand-horizontal);
    --btn-bg-hover:     var(--gradient-brand-horizontal);
    --btn-shadow-hover: 0 6px 18px -8px rgba(43,179,163,.6);
}
.ag-btn--gradient:hover { filter: brightness(1.08); }

/* ── Variant: ghost ─────────────────────────────────────────────── */
.ag-btn--ghost {
    --btn-bg:           transparent;
    --btn-bg-hover:     rgba(43,179,163,.08);
    --btn-text:         var(--color-brand-primary);
    --btn-border:       var(--color-brand-primary);
    --btn-border-hover: var(--color-brand-primary);
    --btn-shadow-hover: none;
}

/* ── Variant: inverse (Glas auf dunklem Backdrop) ───────────────── */
.ag-btn--inverse {
    --btn-bg:           var(--color-surface-glass);
    --btn-bg-hover:     var(--color-surface-glass-mid);
    --btn-text:         var(--color-text-on-inverse);
    --btn-border:       var(--color-border-on-inverse-strong);
    --btn-border-hover: var(--color-border-on-inverse-strong);
    --btn-shadow-hover: none;
    backdrop-filter:         blur(var(--blur-glass-sm));
    -webkit-backdrop-filter: blur(var(--blur-glass-sm));
}

/* ── Size: sm ───────────────────────────────────────────────────── */
.ag-btn--sm {
    --btn-px: var(--space-3);
    --btn-py: var(--space-2);
    --btn-fs: var(--fs-150);
}


/* ── Icon-Button ─────────────────────────────────────────────────────
   Quadratisches/rundes Action-Element nur mit Icon.

   Variants:
     .ag-icon-btn--round    Kreisförmig (Send-Style)
     .ag-icon-btn--square   Border-Radius sm (Rating/Preview-Style)
     .ag-icon-btn--gradient Brand-Gradient-Fill (Send)
     .ag-icon-btn--inverse  Glas auf dunklem Backdrop
     .ag-icon-btn--sm       28 px statt 32 px

   State: :hover · :active · :focus-visible · :disabled · .is-active
   ──────────────────────────────────────────────────────────────────── */

.ag-icon-btn {
    --icon-btn-size:        32px;
    --icon-btn-radius:      var(--radius-md);
    --icon-btn-bg:          var(--color-surface-muted);
    --icon-btn-bg-hover:    var(--c-neutral-200);
    --icon-btn-text:        var(--color-text-default);
    --icon-btn-border:      var(--color-border-subtle);
    --icon-btn-border-hover:var(--c-neutral-400);

    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: var(--icon-btn-size);
    height: var(--icon-btn-size);

    background: var(--icon-btn-bg);
    color: var(--icon-btn-text);
    border: 1px solid var(--icon-btn-border);
    border-radius: var(--icon-btn-radius);

    cursor: pointer;
    box-sizing: border-box;

    transition:
        background var(--motion-base) var(--ease-out),
        border-color var(--motion-base) var(--ease-out),
        color var(--motion-base) var(--ease-out),
        transform var(--motion-fast) var(--ease-out),
        filter var(--motion-base) var(--ease-out);
}
.ag-icon-btn:hover {
    background: var(--icon-btn-bg-hover);
    border-color: var(--icon-btn-border-hover);
}
.ag-icon-btn:active        { transform: scale(.92); }
.ag-icon-btn:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; }
.ag-icon-btn:disabled,
.ag-icon-btn[aria-disabled="true"] { cursor: default; opacity: .45; }

.ag-icon-btn > svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }

/* ── Variant: round ─────────────────────────────────────────────── */
.ag-icon-btn--round { border-radius: var(--radius-pill); }

/* ── Variant: square ────────────────────────────────────────────── */
.ag-icon-btn--square { border-radius: var(--radius-md); }

/* ── Variant: gradient (Send-Style) ─────────────────────────────── */
.ag-icon-btn--gradient {
    --icon-btn-bg:           var(--gradient-brand-horizontal);
    --icon-btn-bg-hover:     var(--gradient-brand-horizontal);
    --icon-btn-text:         var(--color-brand-ink);
    --icon-btn-border:       transparent;
    --icon-btn-border-hover: transparent;
}
.ag-icon-btn--gradient:hover { filter: brightness(1.08); }

/* ── Variant: inverse (Glas auf dunklem Backdrop) ───────────────── */
.ag-icon-btn--inverse {
    --icon-btn-bg:           var(--color-surface-glass);
    --icon-btn-bg-hover:     var(--color-surface-glass-mid);
    --icon-btn-text:         var(--color-text-on-inverse);
    --icon-btn-border:       var(--color-border-on-inverse);
    --icon-btn-border-hover: var(--color-border-on-inverse-strong);
}

/* ── State: active (pressed/toggled) ────────────────────────────── */
.ag-icon-btn.is-active,
.ag-icon-btn[aria-pressed="true"] {
    --icon-btn-bg:     var(--gradient-brand-horizontal-soft);
    --icon-btn-border: var(--color-brand-primary);
    --icon-btn-text:   var(--color-text-on-inverse);
}

/* ── Size: sm ───────────────────────────────────────────────────── */
.ag-icon-btn--sm { --icon-btn-size: 28px; }