/* ============================================================
   Themes "Agentic" + "Agentic Light" — Effekte & Komponenten-Politur
   Basis: agentic-ui-kit, Akzent: ST0RMNET-Orange.
   Gescoped auf :is(html.agentic, html.agenticlight).
   Farb-Tokens: :root.agentic / :root.agenticlight in css/main.css
   ============================================================ */

/* ------------------------------------------------------------
   1. Atmosphaere: Hintergrund-Gradient + Wabengitter
   ------------------------------------------------------------ */
:is(html.agentic, html.agenticlight) body {
  background:
    radial-gradient(90% 70% at 82% 12%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 52%),
    radial-gradient(70% 60% at 8% 0%, color-mix(in srgb, var(--accent-2) 12%, transparent) 0%, transparent 48%),
    radial-gradient(120% 80% at 100% 0%, var(--bg-2) 0%, transparent 55%),
    var(--background);
  color: var(--text-dim);
}

:is(html.agentic, html.agenticlight) body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .62;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%23ffa23a' stroke-opacity='0.1'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zM28 66v34M0 50L-28 66M56 50l28 16'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 100px;
  -webkit-mask-image: radial-gradient(150% 110% at 78% 4%, #000 34%, transparent 86%);
          mask-image: radial-gradient(150% 110% at 78% 4%, #000 34%, transparent 86%);
}

:is(html.agentic, html.agenticlight) body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.014) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.75) 40%, transparent 100%);
}

:is(html.agentic, html.agenticlight) a { color: var(--accent); }
:is(html.agentic, html.agenticlight) ::selection { background: var(--ring-bloom); color: var(--background); }

:is(html.agentic, html.agenticlight) .main-h2,
:is(html.agentic, html.agenticlight) st0rm-tilebox > .headline { color: var(--text); }

/* Scrollbars: dezenter, ohne Schachtschatten */
:is(html.agentic, html.agenticlight) ::-webkit-scrollbar-track {
  box-shadow: none;
  background: transparent;
}
:is(html.agentic, html.agenticlight) ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 38%, transparent);
}
:is(html.agentic, html.agenticlight) ::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ------------------------------------------------------------
   2. Signature: umlaufender Lichtrand (nur KI-Sendebutton)
   ------------------------------------------------------------ */
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes agentic-orbit { to { --angle: 360deg; } }

:is(html.agentic, html.agenticlight) .aia-send-btn {
  position: relative;
  isolation: isolate;
}

:is(html.agentic, html.agenticlight) .aia-send-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--angle),
    var(--ring-dim) 0deg, var(--ring-dim) 250deg,
    var(--accent) 310deg, var(--accent-hi) 340deg, var(--accent) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: agentic-orbit 4.2s linear infinite;
  pointer-events: none;
}

:is(html.agentic, html.agenticlight) .aia-send-btn::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--angle),
    transparent 0deg, transparent 290deg, var(--ring-bloom) 335deg, transparent 360deg);
  filter: blur(11px);
  opacity: .9;
  animation: agentic-orbit 4.2s linear infinite;
  pointer-events: none;
}

/* ------------------------------------------------------------
   3. App-Shell: Topbar (Glas) + linkes Menue
   ------------------------------------------------------------ */
:is(html.agentic, html.agenticlight) .menu-top {
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
    color-mix(in srgb, var(--background) 58%, transparent);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 16px 42px -34px rgba(0,0,0,.95);
}

:is(html.agentic, html.agenticlight) .menu-left-toggle {
  border-color: var(--hairline);
  background: color-mix(in srgb, var(--glass) 84%, transparent);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

:is(html.agentic, html.agenticlight) body.nontouch .menu-left-toggle:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
  border-color: var(--ring-dim);
  color: var(--accent);
}

:is(html.agentic, html.agenticlight) .menu-left {
  border-right: 1px solid var(--hairline-2);
}

/* ------------------------------------------------------------
   4. Tiles (Menue + Tilebox)
   ------------------------------------------------------------ */
:is(html.agentic, html.agenticlight) st0rm-menu-tile,
:is(html.agentic, html.agenticlight) st0rm-tile {
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    var(--glass);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  color: var(--text);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-sizing: border-box;
}

:is(html.agentic, html.agenticlight) body.nontouch st0rm-menu-tile:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
}

:is(html.agentic, html.agenticlight) st0rm-menu-tile.selected {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-hi) 22%, transparent), transparent),
    var(--accent);
  border-color: var(--accent);
  color: #1a1208;
  box-shadow: 0 0 18px var(--ring-dim);
}

:is(html.agentic, html.agenticlight) st0rm-tile.selected {
  background-color: color-mix(in srgb, var(--accent) 24%, var(--surface-2));
}

:is(html.agentic, html.agenticlight) body.nontouch st0rm-tile:hover {
  outline: 1px solid var(--ring-dim);
}

/* ------------------------------------------------------------
   5. Headlines & Foldable Sections
   ------------------------------------------------------------ */
:is(html.agentic, html.agenticlight) st0rm-headline,
:is(html.agentic, html.agenticlight) st0rm-tileselectionmasterbox > .main-h2 {
  border: none;
  border-bottom: 1px solid var(--hairline-2);
  background: color-mix(in srgb, var(--background) 42%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  letter-spacing: -0.01em;
}

:is(html.agentic, html.agenticlight) st0rm-foldable-section > st0rm-headline.active {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 68%),
    color-mix(in srgb, var(--surface) 46%, transparent);
  filter: none;
}

:is(html.agentic, html.agenticlight) st0rm-foldable-section > st0rm-headline:hover {
  background-color: var(--hairline-2);
  filter: none;
}

:is(html.agentic, html.agenticlight) st0rm-foldable-section > st0rm-headline:after {
  color: var(--accent);
}

/* ------------------------------------------------------------
   6. Formularfelder & Buttons
   ------------------------------------------------------------ */
:is(html.agentic, html.agenticlight) st0rm-foldable-section input,
:is(html.agentic, html.agenticlight) st0rm-optionsfield-option select,
:is(html.agentic, html.agenticlight) .form-control {
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  color: var(--text);
}

:is(html.agentic, html.agenticlight) st0rm-foldable-section input:hover,
:is(html.agentic, html.agenticlight) st0rm-foldable-section select:hover,
:is(html.agentic, html.agenticlight) st0rm-optionsfield-option select:hover,
:is(html.agentic, html.agenticlight) .form-control:hover {
  border-color: var(--ring-dim);
}

:is(html.agentic, html.agenticlight) st0rm-foldable-section input:focus-within,
:is(html.agentic, html.agenticlight) st0rm-foldable-section select:focus-within,
:is(html.agentic, html.agenticlight) st0rm-optionsfield-option select:focus-within,
:is(html.agentic, html.agenticlight) .form-control:focus-within {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus);
  filter: none;
}

:is(html.agentic, html.agenticlight) .button {
  background-color: var(--accent);
  color: #1a1208 !important;
  border-radius: var(--r-pill);
  font-weight: 600;
}

:is(html.agentic, html.agenticlight) .button:hover:enabled {
  background-color: var(--accent-hover);
}

:is(html.agentic, html.agenticlight) .button-abort {
  background-color: transparent;
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  color: var(--danger) !important;
}

:is(html.agentic, html.agenticlight) .button-abort:hover:enabled {
  background-color: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger) !important;
}

:is(html.agentic, html.agenticlight) .tooltip .tooltiptext {
  background-color: var(--surface-2);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-1);
}

/* ------------------------------------------------------------
   7. Notifications als Glas-Toasts mit Status-Balken
   ------------------------------------------------------------ */
:is(html.agentic, html.agenticlight) .notification {
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012)),
    var(--glass);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--danger);
  border-radius: var(--r-md);
  color: var(--text);
  box-shadow: var(--shadow-2);
}

:is(html.agentic, html.agenticlight) .notification.success { background-color: var(--glass); border-left-color: var(--success); }
:is(html.agentic, html.agenticlight) .notification.info    { background-color: var(--glass); border-left-color: var(--accent); }
:is(html.agentic, html.agenticlight) .notification.warning { background-color: var(--glass); border-left-color: var(--warning); }

:is(html.agentic, html.agenticlight) .closebtn:hover { color: var(--accent); }

/* ------------------------------------------------------------
   8. KI-Assistent: Glas-Flaechen + Beam-Sendebutton
   ------------------------------------------------------------ */
:is(html.agentic, html.agenticlight) .aia-composer,
:is(html.agentic, html.agenticlight) .aia-composer-menu,
:is(html.agentic, html.agenticlight) .aia-modal,
:is(html.agentic, html.agenticlight) .aia-tts-voice-popover-inner {
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.014)),
    var(--glass);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-color: var(--hairline);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    var(--shadow-2);
}

:is(html.agentic, html.agenticlight) .aia-drawer {
  border-left-color: var(--hairline);
}

/* Nur die primaere Chat-Aktion traegt den animierten Lichtrand. */
:is(html.agentic, html.agenticlight) .aia-send-btn {
  background: var(--surface);
  color: var(--accent);
}

:is(html.agentic, html.agenticlight) .aia-send-btn:hover {
  background: var(--surface-2);
}

:is(html.agentic, html.agenticlight) .aia-goal-new-btn {
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    var(--glass);
  border: 1px solid var(--hairline);
  color: var(--accent);
  box-shadow: var(--shadow-1);
}

:is(html.agentic, html.agenticlight) .aia-goal-new-btn:hover,
:is(html.agentic, html.agenticlight) .aia-goal-new-btn.is-active {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
  border-color: var(--ring-dim);
}

:is(html.agentic, html.agenticlight) .aia-goal-select,
:is(html.agentic, html.agenticlight) .aia-draft-chip,
:is(html.agentic, html.agenticlight) .aia-candidate,
:is(html.agentic, html.agenticlight) .aia-ctx-planning-stat,
:is(html.agentic, html.agenticlight) .aia-ctx-timeline-hint,
:is(html.agentic, html.agenticlight) .aia-vision-banner,
:is(html.agentic, html.agenticlight) .aia-ctx-vision-hint {
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    color-mix(in srgb, var(--glass) 88%, transparent);
  border-color: var(--hairline);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

/* ------------------------------------------------------------
   Kontext-Karten: gemeinsames Glass-Rezept + Kategorie-Tints
   Jede Farbe bekommt eigenes --ctx-glass-* Token in :root.agentic.
   ------------------------------------------------------------ */
:is(html.agentic, html.agenticlight) .aia-ctx-block-card {
  --ctx-glass-fill: var(--glass);
  --ctx-glass-tint: transparent;
  --ctx-glass-stripe: var(--hairline);
  --ctx-glass-border: var(--hairline);
  --ctx-glass-glow: transparent;

  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ctx-glass-tint) 18%, rgba(255,255,255,.05)), transparent 76%),
    var(--ctx-glass-fill);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  border: 1px solid var(--ctx-glass-border);
  border-left: 3px solid var(--ctx-glass-stripe);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 28px -26px var(--ctx-glass-glow);
}

/* Ziel / Kontext / Draft — Akzent-Glas */
:is(html.agentic, html.agenticlight) .aia-ctx-block-card.is-draft,
:is(html.agentic, html.agenticlight) .aia-ctx-block-card.aia-ctx-cat-context,
:is(html.agentic, html.agenticlight) .aia-ctx-block-card.aia-ctx-cat-goal {
  --ctx-glass-fill: var(--glass-cat-accent);
  --ctx-glass-tint: var(--accent);
  --ctx-glass-stripe: var(--accent);
  --ctx-glass-border: color-mix(in srgb, var(--accent) 42%, var(--hairline));
  --ctx-glass-glow: var(--ring-bloom);
}

/* Fakten — Blau-Glas */
:is(html.agentic, html.agenticlight) .aia-ctx-block-card.aia-ctx-cat-fact {
  --ctx-glass-fill: var(--glass-cat-fact);
  --ctx-glass-tint: var(--aia-chip-fact);
  --ctx-glass-stripe: var(--aia-chip-fact);
  --ctx-glass-border: color-mix(in srgb, var(--aia-chip-fact) 38%, var(--hairline));
  --ctx-glass-glow: color-mix(in srgb, var(--aia-chip-fact) 45%, transparent);
}

/* Entscheidungen — Gold-Glas */
:is(html.agentic, html.agenticlight) .aia-ctx-block-card.aia-ctx-cat-decision {
  --ctx-glass-fill: var(--glass-cat-decision);
  --ctx-glass-tint: var(--aia-chip-decision);
  --ctx-glass-stripe: var(--aia-chip-decision);
  --ctx-glass-border: color-mix(in srgb, var(--aia-chip-decision) 40%, var(--hairline));
  --ctx-glass-glow: color-mix(in srgb, var(--aia-chip-decision) 45%, transparent);
}

/* Offene Punkte — Violett-Glas */
:is(html.agentic, html.agenticlight) .aia-ctx-block-card.aia-ctx-cat-question {
  --ctx-glass-fill: var(--glass-cat-question);
  --ctx-glass-tint: var(--aia-chip-question);
  --ctx-glass-stripe: var(--aia-chip-question);
  --ctx-glass-border: color-mix(in srgb, var(--aia-chip-question) 38%, var(--hairline));
  --ctx-glass-glow: color-mix(in srgb, var(--aia-chip-question) 45%, transparent);
}

/* Interaktionen — Lila-Glas */
:is(html.agentic, html.agenticlight) .aia-ctx-block-card.aia-ctx-cat-interaction {
  --ctx-glass-fill: var(--glass-cat-interaction);
  --ctx-glass-tint: #5b4d8a;
  --ctx-glass-stripe: #5b4d8a;
  --ctx-glass-border: color-mix(in srgb, #5b4d8a 36%, var(--hairline));
  --ctx-glass-glow: color-mix(in srgb, #5b4d8a 40%, transparent);
}

/* Dateien — Grau-Glas */
:is(html.agentic, html.agenticlight) .aia-ctx-block-card.aia-ctx-cat-file {
  --ctx-glass-fill: var(--glass-cat-file);
  --ctx-glass-tint: #6b7280;
  --ctx-glass-stripe: #6b7280;
  --ctx-glass-border: color-mix(in srgb, #6b7280 34%, var(--hairline));
  --ctx-glass-glow: color-mix(in srgb, #6b7280 35%, transparent);
}

/* Kategorie-Badges & Chip-Labels: volle Farbe (nicht glassy) */
:is(html.agentic, html.agenticlight) .aia-ctx-cat-fact,
:is(html.agentic, html.agenticlight) .aia-chip-label-fact         { background: var(--aia-chip-fact); }
:is(html.agentic, html.agenticlight) .aia-ctx-cat-decision,
:is(html.agentic, html.agenticlight) .aia-chip-label-decision     { background: var(--aia-chip-decision); }
:is(html.agentic, html.agenticlight) .aia-ctx-cat-question,
:is(html.agentic, html.agenticlight) .aia-chip-label-question     { background: var(--aia-chip-question); }
:is(html.agentic, html.agenticlight) .aia-ctx-cat-interaction     { background: #5b4d8a; }
:is(html.agentic, html.agenticlight) .aia-ctx-cat-file            { background: #4a5568; }
:is(html.agentic, html.agenticlight) .aia-ctx-cat-context,
:is(html.agentic, html.agenticlight) .aia-ctx-cat-goal            { background: color-mix(in srgb, var(--accent) 70%, #333 30%); }

:is(html.agentic, html.agenticlight) .aia-ctx-block-text,
:is(html.agentic, html.agenticlight) .aia-ai-text.markdown-body pre {
  background: rgba(0, 0, 0, .24);
  border-color: var(--hairline-2);
}

:is(html.agentic, html.agenticlight) .aia-bubble {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-hi) 20%, transparent), transparent),
    var(--accent);
  box-shadow: 0 10px 30px -20px var(--ring-bloom);
}

:is(html.agentic, html.agenticlight) .aia-cost-btn,
:is(html.agentic, html.agenticlight) .aia-ctx-link,
:is(html.agentic, html.agenticlight) .aia-meta-cost-btn:hover,
:is(html.agentic, html.agenticlight) .aia-copy-btn:hover,
:is(html.agentic, html.agenticlight) .aia-tts-btn:hover:not(:disabled) {
  text-shadow: 0 0 12px var(--ring-bloom);
}

/* ------------------------------------------------------------
   9. Feature Gate / Verbindungs-Overlay
   ------------------------------------------------------------ */
:is(html.agentic, html.agenticlight) #st0rm-app-connecting {
  background: color-mix(in srgb, var(--background) 72%, transparent);
}

:is(html.agentic, html.agenticlight) .st0rm-connecting-card {
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: var(--hairline);
}

/* ------------------------------------------------------------
   10. Reduced Motion: Beam statisch
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  :is(html.agentic, html.agenticlight) .aia-send-btn::before {
    animation: none;
    background: linear-gradient(var(--accent), var(--accent-2));
  }

  :is(html.agentic, html.agenticlight) .aia-send-btn::after {
    animation: none;
    opacity: .35;
  }
}

/* ============================================================
   Agentic Light — Atmosphaere & Lesbarkeit
   ============================================================ */
html.agenticlight body {
  background:
    radial-gradient(90% 70% at 82% 12%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 52%),
    radial-gradient(70% 60% at 8% 0%, color-mix(in srgb, var(--accent-2) 10%, transparent) 0%, transparent 48%),
    radial-gradient(120% 80% at 100% 0%, #ffffff 0%, transparent 55%),
    var(--background);
}

html.agenticlight body::before {
  opacity: .72;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%23ffa23a' stroke-opacity='0.16'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zM28 66v34M0 50L-28 66M56 50l28 16'/%3E%3C/g%3E%3C/svg%3E");
}

html.agenticlight body::after {
  background:
    linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
}

html.agenticlight ::selection {
  background: var(--ring-bloom);
  color: var(--text);
}

html.agenticlight .menu-top {
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.58)),
    color-mix(in srgb, var(--background) 70%, transparent);
  box-shadow: 0 12px 36px -28px rgba(15, 23, 42, .18);
}

html.agenticlight .menu-themes {
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
}

html.agenticlight st0rm-foldable-section > st0rm-headline,
html.agenticlight st0rm-foldable-section > st0rm-headline:after,
html.agenticlight st0rm-optionsfield-option > label {
  color: var(--text);
}

html.agenticlight st0rm-foldable-section input {
  color: var(--text);
}

html.agenticlight st0rm-menu-tile.selected,
html.agenticlight st0rm-tile {
  color: var(--text);
}

html.agenticlight st0rm-menu-tile.selected {
  color: #1a1208;
}

html.agenticlight .aia-ctx-cat-context,
html.agenticlight .aia-ctx-cat-goal {
  background: color-mix(in srgb, var(--accent) 68%, #eef2f7 32%);
}

html.agenticlight .aia-ctx-block-text,
html.agenticlight .aia-ai-text.markdown-body pre {
  background: rgba(15, 23, 42, .05);
  color: var(--text-dim);
}

html.agenticlight .aia-ctx-block-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ctx-glass-tint) 14%, rgba(255,255,255,.55)), transparent 76%),
    var(--ctx-glass-fill);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 10px 28px -26px var(--ctx-glass-glow);
}

html.agenticlight .aia-composer,
html.agenticlight .aia-composer-menu,
html.agenticlight .aia-modal,
html.agenticlight .aia-tts-voice-popover-inner,
html.agenticlight st0rm-menu-tile,
html.agenticlight st0rm-tile,
html.agenticlight .notification {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    var(--shadow-2);
}

/* ============================================================
   Agentic Dark — weichere Typografie (Mobile, Augenfreundlich)
   ============================================================ */
html.agentic body {
  color: var(--text-dim);
}

html.agentic st0rm-foldable-section > st0rm-headline,
html.agentic st0rm-foldable-section > st0rm-headline:after,
html.agentic st0rm-optionsfield-option > label,
html.agentic st0rm-foldable-section input {
  color: var(--text);
}

html.agentic st0rm-menu-tile {
  color: var(--text-dim);
}

html.agentic st0rm-menu-tile.selected {
  color: #1a1208;
}

html.agentic st0rm-ai-assistant {
  --aia-border: color-mix(in srgb, var(--text) 14%, transparent);
}

html.agentic .aia-ai-text,
html.agentic .aia-ai-text.markdown-body {
  color: var(--text);
  opacity: 0.94;
}

html.agentic .aia-msg-meta,
html.agentic .aia-thinking-body {
  color: var(--text-dim);
}

/* ------------------------------------------------------------
   7. Settings Page — Agentic Politur
   ------------------------------------------------------------ */
:is(html.agentic, html.agenticlight) #settings .settings-title {
  color: var(--text);
}

:is(html.agentic, html.agenticlight) #settings .settings-desc {
  color: var(--text-dim);
}

:is(html.agentic, html.agenticlight) #settings .settings-accordion {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: var(--hairline);
}

:is(html.agentic, html.agenticlight) #settings st0rm-foldable-section > st0rm-headline {
  color: var(--text);
  border: none;
  background: transparent;
}

:is(html.agentic, html.agenticlight) #settings st0rm-optionsfield-option > label {
  color: var(--text);
}

:is(html.agentic, html.agenticlight) #settings .settings-theme-grid {
  background: transparent;
}

html.agenticlight #settings .settings-theme-grid > st0rm-menu-tile.selected {
  color: #1a1208;
}