/* Claude 05.10.2026 (E120, A-104): Feinschliff „Wow“ – drei gezielte, kleine Eingriffe, kein Umbau (Begründung: docs/AIONA_E120_OBERFLAECHE.md).
   Alles mit :where() (Spezifität 0): Designs und Vorlagen, die eine eigene Tiefe setzen, behalten sie. Bewegt wird nur transform/opacity. */

/* 1) Eine Tiefe für alle Karten: Einstellungs-Karten, Medienkarten und die Rückfrage-Karte lagen bisher flach bzw. unterschiedlich. */
:root{--e120-tiefe:0 1px 0 rgba(255,255,255,.04) inset,0 8px 22px rgba(0,0,0,.16);--e120-tiefe-hoch:0 1px 0 rgba(255,255,255,.05) inset,0 12px 28px rgba(0,0,0,.24)}
:where(#settings .settings-card,.message-media-card,.agenten-karte){box-shadow:var(--e120-tiefe)}
:where(.message-media-card:hover,.message-media-card:focus-visible){box-shadow:var(--e120-tiefe-hoch)}

/* 2) Tastendruck-Rückmeldung: Knöpfe geben beim Antippen spürbar nach (nur transform), statt stumm zu bleiben. */
:where(#app button:not(:disabled)){transition:transform .12s ease-out}
:where(#app .primary:not(:disabled):active,#app .secondary:not(:disabled):active,#app .text-button:not(:disabled):active,#app .setting-button:active,#app .provider-entry:active){transform:scale(.98)}

/* 3) Lade-Skelette: die Regeln stehen in library.css (.library-skeleton, Keyframe e120-skelett). */
@media (prefers-reduced-motion:reduce){
  :where(#app button:not(:disabled)){transition:none}
  :where(#app .primary:not(:disabled):active,#app .secondary:not(:disabled):active,#app .text-button:not(:disabled):active,#app .setting-button:active,#app .provider-entry:active){transform:none}
}
/* Claude 06.10.2026 (E150, B-071): Verlauf der letzten 7 Tage in der Selbstprüfung (selfcheck.mjs). Nur Theme-Variablen. */
.trend-bars{display:flex;align-items:flex-end;gap:6px;height:96px;margin:8px 0}
.trend-tag{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.trend-saeule{width:100%;max-width:28px;min-height:2px;border-radius:6px 6px 0 0;background:var(--accent);flex:0 0 auto;max-height:64px}
.trend-zahl,.trend-name{line-height:1.2}

/* E150 (B-071): Verlaufssaeulen – Hoehe aus data-stufe 0–10 (kein Inline-Stil, Test progress_styles_are_external) */
.trend-saeule[data-stufe="0"]{height:4%}
.trend-saeule[data-stufe="1"]{height:10%}
.trend-saeule[data-stufe="2"]{height:20%}
.trend-saeule[data-stufe="3"]{height:30%}
.trend-saeule[data-stufe="4"]{height:40%}
.trend-saeule[data-stufe="5"]{height:50%}
.trend-saeule[data-stufe="6"]{height:60%}
.trend-saeule[data-stufe="7"]{height:70%}
.trend-saeule[data-stufe="8"]{height:80%}
.trend-saeule[data-stufe="9"]{height:90%}
.trend-saeule[data-stufe="10"]{height:100%}