/* ═══════════════════════════════════════════════════════════════════════════
   Aiory Embeds — zentrales Design-System für alle Chat-Einbettungen
   (Shopping-/Travel-/Journey-Modals, Wetter, Crypto, Media/Bildgenerierung).

   Lädt NACH aion-chat.css und überschreibt deren verstreute Widget-Stile mit
   der konsolidierten Juli-Designlinie (Referenz:
   aionity_markets_web/html/shopping-structured-redesign.html + aion-structured.css).

   Tokens gelten seitenweit auf html.aion-chat-page; Light-Theme kippt nur die
   Token-Werte, die Komponenten-Regeln bleiben identisch.
   ═══════════════════════════════════════════════════════════════════════════ */

html.aion-chat-page {
    /* Flächen */
    --aion-panel: #0b1020;
    --aion-panel-2: #0e1428;
    --aion-surface: rgba(255, 255, 255, 0.025);
    --aion-surface-hover: rgba(255, 255, 255, 0.045);
    --aion-surface-strong: rgba(255, 255, 255, 0.06);
    /* Text */
    --aion-ink: #f1f5f9;
    --aion-body: #cbd5e1;
    --aion-muted: #94a3b8;
    --aion-muted-2: #64748b;
    /* Linien */
    --aion-line: rgba(255, 255, 255, 0.08);
    --aion-line-strong: rgba(255, 255, 255, 0.2);
    /* Marken-Akzent (Violett) */
    --aion-accent-rgb: 168, 85, 247;
    --aion-accent-text: #d8b4fe;
    --aion-accent-link: #c4b5fd;
    --aion-accent-link-hover: #ddd6fe;
    /* CTA (Sky — „Zum Shop", Hauptaktionen) */
    --aion-cta-rgb: 56, 189, 248;
    --aion-cta-text: #7dd3fc;
    --aion-cta-text-hover: #bae6fd;
    /* Semantik */
    --aion-good-rgb: 16, 185, 129;
    --aion-good-text: #6ee7b7;
    --aion-good-text-strong: #a7f3d0;
    --aion-warn-rgb: 245, 158, 11;
    --aion-warn-text: #fde68a;
    --aion-bad-rgb: 239, 68, 68;
    --aion-bad-text: #fca5a5;
    /* Radien */
    --aion-r-modal: 18px;
    --aion-r-card: 14px;
    --aion-r-md: 12px;
    --aion-r-input: 10px;
    --aion-r-img: 11px;
    --aion-r-chip: 7px;
    --aion-r-pill: 999px;
}
html.aion-chat-page.theme-light {
    --aion-panel: #ffffff;
    --aion-panel-2: #f8fafc;
    --aion-surface: rgba(15, 23, 42, 0.03);
    --aion-surface-hover: rgba(15, 23, 42, 0.055);
    --aion-surface-strong: rgba(15, 23, 42, 0.07);
    --aion-ink: #0f172a;
    --aion-body: #334155;
    --aion-muted: #64748b;
    --aion-muted-2: #94a3b8;
    --aion-line: rgba(15, 23, 42, 0.1);
    --aion-line-strong: rgba(15, 23, 42, 0.25);
    --aion-accent-rgb: 124, 58, 237;
    --aion-accent-text: #6d28d9;
    --aion-accent-link: #7c3aed;
    --aion-accent-link-hover: #5b21b6;
    --aion-cta-rgb: 2, 132, 199;
    --aion-cta-text: #0369a1;
    --aion-cta-text-hover: #075985;
    --aion-good-rgb: 5, 150, 105;
    --aion-good-text: #047857;
    --aion-good-text-strong: #065f46;
    --aion-warn-rgb: 180, 83, 9;
    --aion-warn-text: #92400e;
    --aion-bad-rgb: 220, 38, 38;
    --aion-bad-text: #b91c1c;
}

/* ═══════════════════════════════════════════════════════════════════════════
   1) GEMEINSAMER MODAL-RAHMEN  (Shopping / Travel / Journey)
   ═══════════════════════════════════════════════════════════════════════════ */

html.aion-chat-page .shopping-widget,
html.aion-chat-page .travel-widget,
html.aion-chat-page .journey-widget {
    background: var(--aion-panel);
    border: 1px solid var(--aion-line);
    border-radius: var(--aion-r-modal);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
html.aion-chat-page.theme-light .shopping-widget,
html.aion-chat-page.theme-light .travel-widget,
html.aion-chat-page.theme-light .journey-widget {
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
}
html.aion-chat-page .shopping-header,
html.aion-chat-page .travel-header,
html.aion-chat-page .journey-header {
    background: transparent;
    border-bottom: 1px solid var(--aion-line);
}
html.aion-chat-page .shopping-header h3,
html.aion-chat-page .travel-header h3,
html.aion-chat-page .journey-header h3 {
    color: var(--aion-ink);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Formular-Kopf im Section-Header-Idiom (Icon + Titel + dünner Divider) */
html.aion-chat-page .shopping-search-header h4,
html.aion-chat-page .travel-search-header h4,
html.aion-chat-page .journey-search-header h4 {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--aion-ink);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
html.aion-chat-page .shopping-search-header h4::after,
html.aion-chat-page .travel-search-header h4::after,
html.aion-chat-page .journey-search-header h4::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--aion-line);
    margin-left: 4px;
}
html.aion-chat-page .shopping-search-subtitle,
html.aion-chat-page .travel-search-subtitle,
html.aion-chat-page .journey-search-subtitle {
    color: var(--aion-muted);
    font-size: 0.85rem;
}

/* Labels */
html.aion-chat-page .shopping-form-group label,
html.aion-chat-page .travel-form-group label,
html.aion-chat-page .journey-form-group label,
html.aion-chat-page .travel-search-type > label,
html.aion-chat-page .journey-search-type > label {
    color: var(--aion-body);
    font-size: 0.8rem;
    font-weight: 600;
}

/* Inputs / Selects — einheitlich für alle drei Modals */
html.aion-chat-page .shopping-form-group input,
html.aion-chat-page .shopping-form-group select,
html.aion-chat-page .travel-form-group input,
html.aion-chat-page .travel-form-group select,
html.aion-chat-page .journey-form-group input {
    background: var(--aion-surface);
    border: 1px solid var(--aion-line);
    border-radius: var(--aion-r-input);
    color: var(--aion-ink);
    transition: border-color 0.16s, background 0.16s, box-shadow 0.16s;
}
html.aion-chat-page .shopping-form-group input:focus,
html.aion-chat-page .shopping-form-group select:focus,
html.aion-chat-page .travel-form-group input:focus,
html.aion-chat-page .travel-form-group select:focus,
html.aion-chat-page .journey-form-group input:focus {
    background: var(--aion-surface-hover);
    border-color: rgba(var(--aion-accent-rgb), 0.55);
    box-shadow: 0 0 0 3px rgba(var(--aion-accent-rgb), 0.12);
    outline: none;
}
html.aion-chat-page .shopping-form-group input::placeholder,
html.aion-chat-page .travel-form-group input::placeholder,
html.aion-chat-page .journey-form-group input::placeholder {
    color: var(--aion-muted-2);
}
/* Grid-Overflow-Hardening (Travel hatte es, Shopping/Journey nicht) */
html.aion-chat-page .shopping-form-group,
html.aion-chat-page .journey-form-group {
    min-width: 0;
}

/* Typ-/Modus-Chips (Travel: Alles/Flüge/Hotels/Pauschal · Journey: Nah/Fern) */
html.aion-chat-page .travel-type-btn,
html.aion-chat-page .journey-type-btn {
    background: var(--aion-surface);
    border: 1px solid var(--aion-line);
    border-radius: var(--aion-r-pill);
    color: var(--aion-body);
    font-size: 0.82rem;
    font-weight: 600;
    transition: border-color 0.16s, background 0.16s, color 0.16s;
}
html.aion-chat-page .travel-type-btn:hover,
html.aion-chat-page .journey-type-btn:hover {
    border-color: var(--aion-line-strong);
    background: var(--aion-surface-hover);
    color: var(--aion-ink);
}
html.aion-chat-page .travel-type-btn.active,
html.aion-chat-page .journey-type-btn.active {
    background: rgba(var(--aion-accent-rgb), 0.14);
    border-color: rgba(var(--aion-accent-rgb), 0.45);
    color: var(--aion-accent-text);
}

/* Hinweise */
html.aion-chat-page .shopping-filter-hint,
html.aion-chat-page .journey-filter-hint,
html.aion-chat-page .shopping-mode-hint,
html.aion-chat-page .travel-mode-hint,
html.aion-chat-page .journey-mode-hint,
html.aion-chat-page .shopping-portals-hint,
html.aion-chat-page .travel-portals-hint,
html.aion-chat-page .journey-portals-hint {
    color: var(--aion-muted-2);
    font-size: 0.78rem;
    border: 1px dashed var(--aion-line);
    border-radius: var(--aion-r-md);
    padding: 8px 12px;
    background: transparent;
}

/* Aktions-Buttons: Hauptaktion = Sky-CTA, KI-Aktion = Marken-Violett */
html.aion-chat-page .shopping-search-btn-main,
html.aion-chat-page .travel-search-btn-main,
html.aion-chat-page .journey-search-btn-main {
    background: rgba(var(--aion-cta-rgb), 0.1);
    border: 1px solid rgba(var(--aion-cta-rgb), 0.4);
    border-radius: var(--aion-r-md);
    color: var(--aion-cta-text);
    font-weight: 700;
    transition: background 0.16s, border-color 0.16s, color 0.16s;
}
html.aion-chat-page .shopping-search-btn-main:hover,
html.aion-chat-page .travel-search-btn-main:hover,
html.aion-chat-page .journey-search-btn-main:hover {
    background: rgba(var(--aion-cta-rgb), 0.18);
    border-color: rgba(var(--aion-cta-rgb), 0.6);
    color: var(--aion-cta-text-hover);
}
html.aion-chat-page .shopping-ai-search-btn,
html.aion-chat-page .travel-ai-search-btn,
html.aion-chat-page .journey-ai-search-btn {
    background: rgba(var(--aion-accent-rgb), 0.12);
    border: 1px solid rgba(var(--aion-accent-rgb), 0.4);
    border-radius: var(--aion-r-md);
    color: var(--aion-accent-text);
    font-weight: 700;
    transition: background 0.16s, border-color 0.16s, color 0.16s;
}
html.aion-chat-page .shopping-ai-search-btn:hover,
html.aion-chat-page .travel-ai-search-btn:hover,
html.aion-chat-page .journey-ai-search-btn:hover {
    background: rgba(var(--aion-accent-rgb), 0.2);
    border-color: rgba(var(--aion-accent-rgb), 0.6);
    color: var(--aion-accent-link-hover);
}

/* Ergebnis-Kopf + Zurück-Button */
html.aion-chat-page .shopping-back-btn,
html.aion-chat-page .travel-back-btn {
    background: var(--aion-surface);
    border: 1px solid var(--aion-line);
    border-radius: var(--aion-r-input);
    color: var(--aion-body);
    transition: border-color 0.16s, background 0.16s;
}
html.aion-chat-page .shopping-back-btn:hover,
html.aion-chat-page .travel-back-btn:hover {
    border-color: var(--aion-line-strong);
    background: var(--aion-surface-hover);
    color: var(--aion-ink);
}
html.aion-chat-page .shopping-results-title h4,
html.aion-chat-page .travel-results-title h4 {
    color: var(--aion-ink);
    font-weight: 700;
}
html.aion-chat-page .travel-results-title h4 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Sektions-Überschriften (h5) + Kategorie-Label als Badge */
html.aion-chat-page .shopping-portals-section h5,
html.aion-chat-page .travel-portals-section h5,
html.aion-chat-page .journey-portals-section h5,
html.aion-chat-page .shopping-deals-section h5,
html.aion-chat-page .travel-deals-section h5,
html.aion-chat-page .shopping-web-results h5,
html.aion-chat-page .travel-web-results h5 {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--aion-ink);
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
html.aion-chat-page .shopping-portals-section h5::after,
html.aion-chat-page .travel-portals-section h5::after,
html.aion-chat-page .journey-portals-section h5::after,
html.aion-chat-page .shopping-deals-section h5::after,
html.aion-chat-page .travel-deals-section h5::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--aion-line);
    margin-left: 4px;
}
html.aion-chat-page .shopping-portal-cat-label,
html.aion-chat-page .travel-portal-cat-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--aion-body);
    background: var(--aion-surface-strong);
    border: 1px solid var(--aion-line);
    border-radius: var(--aion-r-pill);
    padding: 3px 9px;
}

/* Portal-/Shop-Kacheln — Kartenstil der Juli-Linie */
html.aion-chat-page .shopping-portal-btn,
html.aion-chat-page .travel-portal-btn {
    background: var(--aion-surface);
    border: 1px solid var(--aion-line);
    border-radius: var(--aion-r-md);
    color: var(--aion-body);
    transition: border-color 0.16s, background 0.16s, transform 0.16s;
}
html.aion-chat-page .shopping-portal-btn:hover,
html.aion-chat-page .travel-portal-btn:hover {
    border-color: var(--aion-line-strong);
    background: var(--aion-surface-hover);
    color: var(--aion-ink);
    transform: translateY(-2px);
}
html.aion-chat-page .shopping-portal-name,
html.aion-chat-page .travel-portal-name {
    color: inherit;
}

/* Deal-/Schnäppchen-Karten: einheitlich Amber (vorher Shopping rot / Travel amber) */
html.aion-chat-page .shopping-deals-section h5,
html.aion-chat-page .travel-deals-section h5 {
    color: var(--aion-warn-text);
}
html.aion-chat-page .shopping-deal-card,
html.aion-chat-page .travel-deal-card {
    background: rgba(var(--aion-warn-rgb), 0.07);
    border: 1px solid rgba(var(--aion-warn-rgb), 0.35);
    border-radius: var(--aion-r-md);
    transition: border-color 0.16s, background 0.16s, transform 0.16s;
}
html.aion-chat-page .shopping-deal-card:hover,
html.aion-chat-page .travel-deal-card:hover {
    background: rgba(var(--aion-warn-rgb), 0.12);
    border-color: rgba(var(--aion-warn-rgb), 0.55);
    transform: translateY(-2px);
}

/* Autocomplete-Dropdown (Travel + Journey teilen die Klassen) */
html.aion-chat-page .travel-destination-suggestions {
    background: var(--aion-panel-2);
    border: 1px solid var(--aion-line);
    border-radius: var(--aion-r-input);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
html.aion-chat-page.theme-light .travel-destination-suggestions {
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
}
html.aion-chat-page .travel-destination-item:hover,
html.aion-chat-page .travel-destination-item.active {
    background: rgba(var(--aion-accent-rgb), 0.12);
}
html.aion-chat-page .travel-destination-item-label {
    color: var(--aion-ink);
}
html.aion-chat-page .travel-destination-item-sub {
    color: var(--aion-muted-2);
}

/* Journey: Anbieter-Links im Modal */
html.aion-chat-page .journey-provider-link {
    background: var(--aion-surface);
    border: 1px solid var(--aion-line);
    border-radius: var(--aion-r-md);
    color: var(--aion-body);
    transition: border-color 0.16s, background 0.16s, transform 0.16s;
}
html.aion-chat-page .journey-provider-link:hover {
    border-color: var(--aion-line-strong);
    background: var(--aion-surface-hover);
    color: var(--aion-ink);
    transform: translateY(-2px);
}

/* „Zum Shop →"-Pill in den Structured-Picks: .message-text a (Unterstreichung,
   Violett) gewinnt sonst per Spezifität gegen .aion-pick-go — Button sah aus
   wie ein nackter Fließtext-Link. */
html.aion-chat-page .message-text a.aion-pick-go,
html.aion-chat-page a.aion-pick-go {
    color: var(--aion-cta-text);
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
html.aion-chat-page .message-text a.aion-pick-go:hover,
html.aion-chat-page a.aion-pick-go:hover {
    color: var(--aion-cta-text-hover);
    text-decoration: none;
    text-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2) RESPONSIVE-FIXES  (Lücke 481–759px schließen, Journey-Grid mobil)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 760px) {
    html.aion-chat-page .shopping-form-grid,
    html.aion-chat-page .travel-form-grid,
    html.aion-chat-page .journey-form-grid {
        grid-template-columns: 1fr;
    }
    html.aion-chat-page .shopping-search-buttons,
    html.aion-chat-page .travel-search-buttons,
    html.aion-chat-page .journey-search-buttons {
        flex-direction: column;
    }
    html.aion-chat-page .shopping-search-buttons > button,
    html.aion-chat-page .travel-search-buttons > button,
    html.aion-chat-page .journey-search-buttons > button {
        width: 100%;
        justify-content: center;
    }
}
@media (max-width: 600px) {
    html.aion-chat-page .shopping-portal-grid,
    html.aion-chat-page .travel-portal-grid,
    html.aion-chat-page .journey-portal-grid {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    }
    /* Typ-Chips einzeilig halten und horizontal scrollen lassen,
       statt Icon/Text im Chip umzubrechen */
    html.aion-chat-page .travel-type-buttons,
    html.aion-chat-page .journey-type-buttons {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 4px;
    }
    html.aion-chat-page .travel-type-btn,
    html.aion-chat-page .journey-type-btn {
        white-space: nowrap;
        flex: 0 0 auto;
    }
}

/* Journey-Chatkarte: Chips früher eindampfen — schließt die Lücke 521–640px,
   ohne den bestehenden 520px-Breakpoint aus aion-chat.css zu übersteuern */
@media (min-width: 521px) and (max-width: 640px) {
    html.aion-chat-page .journey-prov-chip {
        max-width: 42%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   3) WETTER — Token-Angleich (Rahmen/Flächen, Forecast-Karten)
   ═══════════════════════════════════════════════════════════════════════════ */

html.aion-chat-page .weather-app-container {
    background: linear-gradient(180deg, var(--aion-panel), #080c1c);
    border: 1px solid var(--aion-line);
}
html.aion-chat-page.theme-light .weather-app-container {
    background: linear-gradient(180deg, var(--aion-panel), var(--aion-panel-2));
}
html.aion-chat-page .weather-detail-container {
    background: var(--aion-panel);
    border: 1px solid var(--aion-line);
}
html.aion-chat-page .forecast-day {
    background: var(--aion-surface);
    border: 1px solid var(--aion-line);
    border-radius: var(--aion-r-card);
    transition: border-color 0.16s, background 0.16s;
}
html.aion-chat-page .forecast-day:hover {
    border-color: var(--aion-line-strong);
    background: var(--aion-surface-hover);
}
html.aion-chat-page .forecast-day.today {
    background: rgba(var(--aion-accent-rgb), 0.12);
    border-color: rgba(var(--aion-accent-rgb), 0.45);
}
html.aion-chat-page .weather-detail-item {
    background: var(--aion-surface);
    border: 1px solid var(--aion-line);
    border-radius: var(--aion-r-md);
    align-items: flex-start;
    padding: 10px 12px;
}
html.aion-chat-page .weather-detail-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
    line-height: 1.2;
}
html.aion-chat-page .weather-detail-label {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
}
html.aion-chat-page .weather-detail-copy .weather-detail-value {
    display: block;
    font-size: 0.88rem;
    line-height: 1.3;
    white-space: nowrap;
}
html.aion-chat-page.theme-light .weather-detail-label {
    color: #64748b;
}

/* Rezeptkarten: kleines Vorschaubild statt bilddominanter Hochformat-Karte. */
html.aion-chat-page .recipe-card {
    flex: 0 0 250px;
    min-width: 250px;
    min-height: 112px;
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
}
html.aion-chat-page .recipe-card-image {
    width: 86px;
    height: 100%;
    min-height: 112px;
}
html.aion-chat-page .recipe-card-info {
    min-width: 0;
    padding: 12px;
}
html.aion-chat-page .recipe-card-title {
    font-size: 0.82rem;
    min-height: 0;
    -webkit-line-clamp: 3;
}
@media (max-width: 480px) {
    html.aion-chat-page .recipe-card {
        flex-basis: 225px;
        min-width: 225px;
        grid-template-columns: 74px minmax(0, 1fr);
    }
    html.aion-chat-page .recipe-card-image { width: 74px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   4) CRYPTO-WIDGET — Panel-/Linien-Angleich (Interna bleiben unberührt)
   ═══════════════════════════════════════════════════════════════════════════ */

html.aion-chat-page .crypto-mini-widget {
    background: linear-gradient(180deg, var(--aion-panel), var(--aion-panel-2));
    border: 1px solid var(--aion-line);
}
html.aion-chat-page .crypto-mini-widget:hover {
    border-color: var(--aion-line-strong);
}
html.aion-chat-page .crypto-modal-content {
    background: var(--aion-panel);
    border: 1px solid rgba(var(--aion-accent-rgb), 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   5) MEDIA-KARUSSELL + BILDGENERIERUNG
   ═══════════════════════════════════════════════════════════════════════════ */

html.aion-chat-page .image-card {
    border: 1px solid var(--aion-line);
    border-radius: var(--aion-r-md);
}
html.aion-chat-page .image-card:hover {
    border-color: rgba(var(--aion-accent-rgb), 0.5);
}

/* Generiertes Bild: große, eigenständige Karte statt 160px-Suchkachel.
   KEIN festes Seitenverhältnis — ein 16:9-Poster wurde in der alten 1:1-Karte
   von `object-fit: cover` links und rechts angeschnitten. */
html.aion-chat-page .image-card.image-card--generated {
    flex: 0 0 auto;
    width: min(420px, 100%);
    height: auto;
    aspect-ratio: auto;
    border-radius: var(--aion-r-card);
    border-color: rgba(var(--aion-accent-rgb), 0.35);
    background: var(--aion-surface);
}
html.aion-chat-page .image-card.image-card--generated img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
}
html.aion-chat-page .image-card.image-card--generated:hover {
    border-color: rgba(var(--aion-accent-rgb), 0.6);
}
html.aion-chat-page .image-card-genbadge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--aion-accent-text);
    background: rgba(11, 16, 32, 0.75);
    border: 1px solid rgba(var(--aion-accent-rgb), 0.45);
    border-radius: var(--aion-r-pill);
    padding: 3px 9px;
    backdrop-filter: blur(4px);
    pointer-events: none;
}
html.aion-chat-page.theme-light .image-card-genbadge {
    background: rgba(255, 255, 255, 0.8);
}
html.aion-chat-page .image-card-dl {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--aion-ink);
    background: rgba(11, 16, 32, 0.75);
    border: 1px solid var(--aion-line);
    border-radius: var(--aion-r-input);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.16s, border-color 0.16s, background 0.16s;
}
html.aion-chat-page.theme-light .image-card-dl {
    background: rgba(255, 255, 255, 0.85);
}
html.aion-chat-page .image-card:hover .image-card-dl,
html.aion-chat-page .image-card:focus-within .image-card-dl {
    opacity: 1;
}
html.aion-chat-page .image-card-dl:hover {
    border-color: rgba(var(--aion-accent-rgb), 0.55);
    background: rgba(var(--aion-accent-rgb), 0.25);
}
/* Touch-Geräte haben kein Hover — Download-Button dort immer sichtbar */
@media (hover: none) {
    html.aion-chat-page .image-card-dl {
        opacity: 1;
    }
}
@media (max-width: 600px) {
    html.aion-chat-page .image-card.image-card--generated {
        width: min(320px, 100%);
    }
}

/* Ladeskelett während der Bildgenerierung (30-90 s): Platzhalter in
   Kartengröße mit Shimmer-Sweep, wird vom fertigen Bild ersetzt. */
html.aion-chat-page .aion-img-skeleton {
    position: relative;
    width: min(420px, 100%);
    aspect-ratio: 1 / 1;
    margin-top: 0.6rem;
    border-radius: var(--aion-r-card);
    border: 1px solid var(--aion-line);
    background: linear-gradient(180deg, var(--aion-panel), var(--aion-panel-2));
    overflow: hidden;
}
html.aion-chat-page .aion-img-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
        transparent 32%,
        rgba(255, 255, 255, 0.07) 44%,
        rgba(255, 255, 255, 0.14) 50%,
        rgba(255, 255, 255, 0.07) 56%,
        transparent 68%);
    transform: translateX(-100%);
    animation: aionImgSkelSweep 1.7s ease-in-out infinite;
}
html.aion-chat-page.theme-light .aion-img-skeleton::after {
    background: linear-gradient(105deg,
        transparent 32%,
        rgba(15, 23, 42, 0.05) 44%,
        rgba(15, 23, 42, 0.10) 50%,
        rgba(15, 23, 42, 0.05) 56%,
        transparent 68%);
}
@keyframes aionImgSkelSweep {
    to { transform: translateX(100%); }
}
html.aion-chat-page .aion-img-skeleton-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    color: rgba(var(--aion-accent-rgb), 0.55);
    animation: aionImgSkelPulse 2s ease-in-out infinite;
}
@keyframes aionImgSkelPulse {
    0%, 100% { opacity: 0.35; transform: scale(0.97); }
    50%      { opacity: 0.85; transform: scale(1.03); }
}
/* Angedeutete Bildunterschrift wie bei einer echten Karte */
html.aion-chat-page .aion-img-skeleton-bar {
    position: absolute;
    left: 14px;
    height: 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
}
html.aion-chat-page.theme-light .aion-img-skeleton-bar {
    background: rgba(15, 23, 42, 0.09);
}
html.aion-chat-page .aion-img-skeleton-bar--1 { bottom: 34px; width: 58%; }
html.aion-chat-page .aion-img-skeleton-bar--2 { bottom: 16px; width: 34%; }
@media (max-width: 600px) {
    html.aion-chat-page .aion-img-skeleton {
        width: min(320px, 100%);
    }
}
@media (prefers-reduced-motion: reduce) {
    html.aion-chat-page .aion-img-skeleton::after,
    html.aion-chat-page .aion-img-skeleton-icon {
        animation: none;
    }
}

/* News-Leitmeldung: Blur-Fill-Medienbox statt Streifen-Crop — das og-Thumbnail
   bleibt komplett sichtbar (contain), die Ränder füllt eine unscharfe Kopie */
html.aion-chat-page .news-briefing-lead-media {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 9;
    max-height: 300px;
    border-radius: var(--aion-r-input);
    overflow: hidden;
    margin-bottom: 0.75rem;
    background: var(--aion-panel-2);
}
html.aion-chat-page .news-briefing-lead-media .news-briefing-lead-img-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(24px) saturate(1.1);
    transform: scale(1.15);
    opacity: 0.55;
}
html.aion-chat-page .news-briefing-lead-media .news-briefing-lead-img {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    margin: 0;
    border-radius: 0;
    display: block;
}
@media (max-width: 600px) {
    html.aion-chat-page .news-briefing-lead-media {
        aspect-ratio: 16 / 9;
    }
}

/* Lightbox: Download-Aktion (unten mittig über dem Backdrop) */
html.aion-chat-page .image-lightbox .lightbox-dl {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--aion-cta-text);
    background: rgba(11, 16, 32, 0.75);
    border: 1px solid rgba(var(--aion-cta-rgb), 0.4);
    border-radius: var(--aion-r-pill);
    padding: 7px 15px;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    backdrop-filter: blur(4px);
    transition: background 0.16s, border-color 0.16s;
}
html.aion-chat-page .image-lightbox .lightbox-dl:hover {
    background: rgba(var(--aion-cta-rgb), 0.18);
    border-color: rgba(var(--aion-cta-rgb), 0.6);
    color: var(--aion-cta-text-hover);
}

/* ═══════════════════════════════════════════════════════════════════════════
   6) APP-FENSTER — ein Kopf-Idiom für ALLE Aiory-Apps
   (Rechner, Kompass, Termine, Aufgaben, Urlaub, Verbindung, Shopping,
   Wetter, Cloud, Absenderprofile, Live-Chart). Badge via
   window.getAioryAppBadge(icon, farbe) aus close-button.js; der X-Button
   ist bereits zentral vereinheitlicht (.aiory-close, aion-chat.css).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Icon-Badge: gleiche Größe/Radius überall, Akzent je App */
html.aion-chat-page .aiory-app-badge {
    width: 30px;
    height: 30px;
    min-width: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(var(--aion-accent-rgb), 0.12);
    border: 1px solid rgba(var(--aion-accent-rgb), 0.22);
    color: var(--aion-accent-text);
    flex: 0 0 auto;
}
html.aion-chat-page .aiory-app-badge svg {
    width: 17px;
    height: 17px;
}
html.aion-chat-page .aiory-app-badge--cyan {
    background: rgba(34, 211, 238, 0.10);
    border-color: rgba(34, 211, 238, 0.22);
    color: #67e8f9;
}
html.aion-chat-page .aiory-app-badge--sky {
    background: rgba(var(--aion-cta-rgb), 0.10);
    border-color: rgba(var(--aion-cta-rgb), 0.22);
    color: var(--aion-cta-text);
}
html.aion-chat-page .aiory-app-badge--emerald {
    background: rgba(var(--aion-good-rgb), 0.10);
    border-color: rgba(var(--aion-good-rgb), 0.22);
    color: var(--aion-good-text);
}
html.aion-chat-page .aiory-app-badge--amber {
    background: rgba(var(--aion-warn-rgb), 0.10);
    border-color: rgba(var(--aion-warn-rgb), 0.25);
    color: var(--aion-warn-text);
}
html.aion-chat-page .aiory-app-badge--indigo {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.25);
    color: #a5b4fc;
}
html.aion-chat-page.theme-light .aiory-app-badge--cyan {
    background: rgba(8, 145, 178, 0.08);
    border-color: rgba(8, 145, 178, 0.25);
    color: #0e7490;
}
html.aion-chat-page.theme-light .aiory-app-badge--indigo {
    background: rgba(79, 70, 229, 0.08);
    border-color: rgba(79, 70, 229, 0.25);
    color: #4f46e5;
}

/* Modal-Header der App-Fenster: gleiche Typo + Linien wie Shopping/Travel/
   Journey (Sektion 1), auf die übrigen Apps ausgeweitet. */
html.aion-chat-page .travel-header h3,
html.aion-chat-page .journey-header h3,
html.aion-chat-page .shopping-header h3,
html.aion-chat-page .weather-app-title,
html.aion-chat-page .calc-title-v2,
html.aion-chat-page .compass-title-v2 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--aion-ink);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Rechner/Kompass: alte Icon-Container auf Badge-Optik heben */
html.aion-chat-page .calc-header-v2,
html.aion-chat-page .compass-header-v2 {
    border-bottom: 1px solid var(--aion-line);
}
html.aion-chat-page .calculator-widget-v2,
html.aion-chat-page .compass-widget-v2 {
    background: var(--aion-panel);
    border: 1px solid var(--aion-line);
    border-radius: var(--aion-r-modal);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
html.aion-chat-page.theme-light .calculator-widget-v2,
html.aion-chat-page.theme-light .compass-widget-v2 {
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
}

/* Kompass: Fenster darf nie unter der fixen Navbar verschwinden —
   X-Button war bei niedrigen Viewports unerreichbar. */
html.aion-chat-page #compass-modal,
html.aion-chat-page #travel-modal,
html.aion-chat-page #journey-modal,
html.aion-chat-page #shopping-modal {
    --modal-top-offset: calc(env(safe-area-inset-top, 0px) + var(--aiory-nav-clearance, 84px));
}
@media (max-width: 600px) {
    html.aion-chat-page #compass-modal,
    html.aion-chat-page #travel-modal,
    html.aion-chat-page #journey-modal,
    html.aion-chat-page #shopping-modal {
        --modal-top-offset: calc(env(safe-area-inset-top, 0px) + 12px);
    }
}

/* Termine/Aufgaben: Kopf an gemeinsame Linie angleichen (Badge-Optik
   kommt aus dem Widget-CSS; hier nur Panel/Linien auf Token heben). */
html.aion-chat-page .apw-modal,
html.aion-chat-page .tkw-modal {
    background: var(--aion-panel);
    border: 1px solid var(--aion-line);
    border-radius: var(--aion-r-modal);
}

/* Cloud: Emoji-Ären beendet — SVG-Logo-Badge + ruhige Icon-Farben */
html.aion-chat-page .aion-cloud-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(var(--aion-accent-rgb), 0.14);
    border: 1px solid rgba(var(--aion-accent-rgb), 0.24);
    color: var(--aion-accent-text);
    font-size: 0;
}
html.aion-chat-page .aion-cloud-logo svg {
    width: 19px;
    height: 19px;
}
html.aion-chat-page .aion-cloud-navitem svg,
html.aion-chat-page .aion-cloud-sidefolders .aion-cloud-navitem svg {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 7px;
    flex: 0 0 auto;
    vertical-align: -2px;
    color: var(--aion-muted);
}
html.aion-chat-page .aion-cloud-navitem.is-on svg {
    color: var(--aion-accent-text);
}
html.aion-chat-page .aion-documents-search-icon svg {
    width: 15px;
    height: 15px;
    color: var(--aion-muted);
    display: block;
}
html.aion-chat-page .aion-fm-crumb svg {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 5px;
    vertical-align: -2px;
}
/* Ordner-Symbole in Kachel/Liste/Sidebar: einheitliches SVG in Amber */
html.aion-chat-page .aiory-folder-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fbbf24;
}
html.aion-chat-page.theme-light .aiory-folder-ico {
    color: #b45309;
}
html.aion-chat-page .aiory-folder-ico svg {
    width: 1em;
    height: 1em;
}

/* Buttons in der Cloud-Topbar: Icons statt Text-Glyphen */
html.aion-chat-page .aion-letter-studio-btn svg.aiory-btn-ico {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: -2px;
    flex: 0 0 auto;
}
@media (max-width: 720px) {
    html.aion-chat-page .apw-modal,
    html.aion-chat-page .tkw-modal {
        border-radius: 0;
    }
}

/* Feld-/Section-Icons (SVG statt Emoji) in den Such-Apps */
html.aion-chat-page .travel-search-header h4 svg,
html.aion-chat-page .journey-search-header h4 svg,
html.aion-chat-page .shopping-search-header h4 svg {
    width: 16px;
    height: 16px;
    color: var(--aion-accent-text);
    flex: 0 0 auto;
}
html.aion-chat-page .travel-form-group label svg,
html.aion-chat-page .journey-form-group label svg,
html.aion-chat-page .shopping-form-group label svg {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 5px;
    vertical-align: -2px;
    color: var(--aion-muted);
}
html.aion-chat-page .travel-type-btn svg,
html.aion-chat-page .journey-type-btn svg {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: -2px;
    flex: 0 0 auto;
}
html.aion-chat-page .travel-ai-search-btn svg,
html.aion-chat-page .journey-ai-search-btn svg,
html.aion-chat-page .shopping-ai-search-btn svg {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 7px;
    vertical-align: -2.5px;
    flex: 0 0 auto;
}
html.aion-chat-page .travel-mode-hint svg,
html.aion-chat-page .journey-mode-hint svg,
html.aion-chat-page .journey-filter-hint svg,
html.aion-chat-page .shopping-mode-hint svg,
html.aion-chat-page .shopping-filter-hint svg {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 5px;
    vertical-align: -2px;
    color: var(--aion-warn-text);
}
html.aion-chat-page .travel-portals-section h5 svg,
html.aion-chat-page .travel-web-results h5 svg,
html.aion-chat-page .travel-tips h5 svg,
html.aion-chat-page .journey-portals-section h5 svg,
html.aion-chat-page .journey-web-results h5 svg,
html.aion-chat-page .shopping-portals-section h5 svg,
html.aion-chat-page .shopping-web-results h5 svg,
html.aion-chat-page .shopping-deals-section h5 svg,
html.aion-chat-page .shopping-tips h5 svg {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: -2px;
    color: var(--aion-accent-text);
}
html.aion-chat-page .travel-portal-cat-label svg,
html.aion-chat-page .shopping-portal-cat-label svg {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 5px;
    vertical-align: -2px;
    color: var(--aion-muted);
}
/* Cloud: SVG-Ordnergrößen je Kontext (Kachel / Zeile / Sidebar / Auswahl) */
html.aion-chat-page .aion-doc-tile-icon .aiory-folder-ico svg {
    width: 30px;
    height: 30px;
}
html.aion-chat-page .aion-doc-row-icon .aiory-folder-ico svg {
    width: 19px;
    height: 19px;
}
html.aion-chat-page .aion-cloud-sidefolder .aiory-folder-ico svg {
    width: 14px;
    height: 14px;
}
html.aion-chat-page .aion-sel-act .aiory-folder-ico svg {
    width: 16px;
    height: 16px;
}
html.aion-chat-page .aion-cloud-newfolder svg {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 6px;
    vertical-align: -2px;
}

/* Breadcrumb: Icon+Text nebeneinander (Tailwind-Preflight-Gegenmittel) */
html.aion-chat-page .aion-fm-crumb {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
html.aion-chat-page .aion-fm-crumb svg {
    margin-right: 0;
}

/* Rechner im Light-Theme: helle Tasten, dunkle Ziffern, violette Operatoren
   (vorher blieb das dunkle Design einfach stehen — unlesbar auf Weiß) */
html.aion-chat-page.theme-light .calc-hist-toggle {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.12);
    color: #64748b;
}
html.aion-chat-page.theme-light .calc-hist-toggle:hover,
html.aion-chat-page.theme-light .calc-hist-toggle.active {
    background: rgba(124, 58, 237, 0.12);
    border-color: rgba(124, 58, 237, 0.4);
    color: #6d28d9;
}
html.aion-chat-page.theme-light .calc-history-v2 {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
html.aion-chat-page.theme-light .calc-history-head {
    color: #0f172a;
    border-bottom-color: rgba(15, 23, 42, 0.08);
}
html.aion-chat-page.theme-light .calc-hist-clear,
html.aion-chat-page.theme-light .calc-hist-back {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.12);
    color: #64748b;
}
html.aion-chat-page.theme-light .calc-hist-item { background: rgba(15, 23, 42, 0.03); color: #0f172a; }
html.aion-chat-page.theme-light .calc-hist-item:hover { background: rgba(124, 58, 237, 0.1); }
html.aion-chat-page.theme-light .calc-hist-expr { color: #64748b; }
html.aion-chat-page.theme-light .calc-hist-res { color: #0f172a; }
html.aion-chat-page.theme-light .calc-history-empty { color: #94a3b8; }
html.aion-chat-page.theme-light .calc-display-v2 {
    background: #f1f5f9;
    border-color: rgba(15, 23, 42, 0.08);
}
html.aion-chat-page.theme-light .calc-expression-v2 {
    color: #64748b;
}
html.aion-chat-page.theme-light .calc-result-v2 {
    color: #0f172a;
}
html.aion-chat-page.theme-light .calc-btn-v2.num {
    background: rgba(15, 23, 42, 0.05);
    color: #0f172a;
}
html.aion-chat-page.theme-light .calc-btn-v2.num:hover {
    background: rgba(15, 23, 42, 0.1);
}
html.aion-chat-page.theme-light .calc-btn-v2.func {
    background: rgba(15, 23, 42, 0.09);
    color: #334155;
}
html.aion-chat-page.theme-light .calc-btn-v2.func:hover {
    background: rgba(15, 23, 42, 0.14);
}
html.aion-chat-page.theme-light .calc-btn-v2.op {
    background: rgba(124, 58, 237, 0.12);
    color: #6d28d9;
}
html.aion-chat-page.theme-light .calc-btn-v2.op:hover {
    background: rgba(124, 58, 237, 0.2);
}
html.aion-chat-page.theme-light .calc-btn-v2.equals {
    background: #7c3aed;
    color: #ffffff;
}

/* Kompass: bewusst dunkel auch im Light-Theme (Instrument-Charakter) —
   nur Header-Farben fixieren, damit Titel/Badge lesbar bleiben */
html.aion-chat-page.theme-light .compass-widget-v2 {
    background: #0b1020;
    border-color: rgba(255, 255, 255, 0.08);
}
html.aion-chat-page.theme-light .compass-title-v2 {
    color: #f1f5f9;
}
html.aion-chat-page.theme-light .compass-header-v2 {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
html.aion-chat-page.theme-light .compass-widget-v2 .aiory-app-badge--indigo {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.25);
    color: #a5b4fc;
}

/* Kopf-Rhythmus: gleicher Abstand zwischen Aktionen und Trennlinie in ALLEN
   App-Fenstern. Shopping/Urlaub/Reise hatten padding-bottom:0 — der 32px hohe
   X-Button endete dadurch 1px über der Linie und lag optisch darauf auf. */
html.aion-chat-page .shopping-header,
html.aion-chat-page .travel-header,
html.aion-chat-page .journey-header,
html.aion-chat-page .calc-header-v2,
html.aion-chat-page .compass-header-v2 {
    padding-bottom: 14px;
    margin-bottom: 16px;
}
/* Termine/Aufgaben/Wetter auf denselben Kopf-Rhythmus (14px + 1px Linie) */
html.aion-chat-page .apw-header,
html.aion-chat-page .tkw-header,
html.aion-chat-page .weather-app-header {
    padding-bottom: 14px;
}

/* ── Bildersuche: responsives Galerie-Grid statt 160px-Scrollreihe (14.07.) ──
   Nur .media-carousel--images (Suchbilder); KI-Großkarten und Videos behalten
   ihr bisheriges Karussell-Layout. */
html.aion-chat-page .media-carousel--images .media-carousel-track {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    overflow: visible;
    scroll-snap-type: none;
}
html.aion-chat-page .media-carousel--images .image-card {
    flex: initial;
    width: 100%;
    min-width: 0;
    height: auto;
    aspect-ratio: 4 / 3;
    cursor: zoom-in;
    scroll-snap-align: unset;
    background: var(--aion-surface);
    border: none;
    border-radius: var(--aion-r-card);
    overflow: hidden;
    transition: box-shadow 0.18s ease;
}
html.aion-chat-page .media-carousel--images .image-card:hover {
    box-shadow: 0 0 0 2px rgba(var(--aion-accent-rgb), 0.55), 0 10px 30px rgba(0, 0, 0, 0.35);
}
html.aion-chat-page .media-carousel--images .image-card img {
    transition: transform 0.25s ease;
}
html.aion-chat-page .media-carousel--images .image-card:hover img {
    transform: scale(1.045);
}
html.aion-chat-page .media-carousel--images .carousel-more-btn {
    flex: initial;
    min-width: 0;
    aspect-ratio: 4 / 3;
    border-radius: var(--aion-r-img);
}
@media (max-width: 480px) {
    html.aion-chat-page .media-carousel--images .media-carousel-track {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

/* Kopfzeile aller Medien-Karussells: SVG-Icon + Titel + Count-Chip */
html.aion-chat-page .media-carousel-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--aion-ink);
    font-weight: 700;
    letter-spacing: -0.01em;
}
html.aion-chat-page .media-carousel-title svg {
    display: inline-block;
    width: 15px;
    height: 15px;
    color: var(--aion-accent-text);
    flex: 0 0 auto;
}
html.aion-chat-page .media-carousel-count {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: var(--aion-r-pill);
    background: var(--aion-surface-strong);
    border: 1px solid var(--aion-line);
    color: var(--aion-muted);
    font-size: 0.7rem;
    font-weight: 700;
}
html.aion-chat-page .image-card-genbadge svg {
    display: inline-block;
    width: 11px;
    height: 11px;
}

/* Quelle-Overlay: etwas lesbarer, weicherer Verlauf */
html.aion-chat-page .media-carousel--images .image-card-overlay {
    padding: 16px 9px 7px;
    font-size: 0.7rem;
    color: #e2e8f0;
    background: linear-gradient(transparent, rgba(2, 6, 23, 0.85));
}


/* ── Mobile 360px: Feinschliff (14.07.) ─────────────────────────────────── */
/* Urlaub: Typ-Buttons (Alles/Flüge/Hotels/Pauschal) liefen rechts aus dem
   Bild (nowrap) — auf schmalen Screens 2x2 umbrechen */
@media (max-width: 480px) {
    html.aion-chat-page .travel-type-buttons {
        flex-wrap: wrap;
    }
    html.aion-chat-page .travel-type-btn {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
    }
}

/* Cloud-Kopfzeile mobil: Brand einzeilig (Untertitel weg), Chips nicht
   umbrechen, X-Button rechtsbündig in der Aktionszeile */
@media (max-width: 840px) {
    html.aion-chat-page .aion-cloud-brandtxt span {
        display: none;
    }
    html.aion-chat-page .aion-cloud-brandtxt strong {
        white-space: nowrap;
    }
    html.aion-chat-page .aion-cloud-navitem,
    html.aion-chat-page .aion-cloud-sidefolder {
        white-space: nowrap;
        flex: 0 0 auto;
    }
    html.aion-chat-page .aion-cloud-topactions .aiory-close {
        margin-left: auto;
    }
}


/* ==================================================================
   Alle App-Fenster auf Mobil randlos - Vorbild ist die Wetter-App.
   Dieses Blatt laedt ZULETZT und hat vorher border-radius/border der
   App-Container wieder gesetzt; die Vollbild-Regeln der einzelnen Apps
   liefen dadurch ins Leere (runde Ecken + Rahmen blieben sichtbar und
   das Fenster nutzte die Flaeche nicht aus). Einheitlicher Umbruch bei
   720px, damit alle Apps denselben Kopf/Rand haben.
   ================================================================== */
@media (max-width: 720px) {
    html.aion-chat-page #weather-modal,
    html.aion-chat-page #compass-modal,
    html.aion-chat-page #shopping-modal,
    html.aion-chat-page #travel-modal,
    html.aion-chat-page #journey-modal {
        --modal-top-offset: env(safe-area-inset-top, 0px);
        --modal-bottom-offset: env(safe-area-inset-bottom, 0px);
        padding: 0;
        padding-top: var(--modal-top-offset);
        padding-bottom: var(--modal-bottom-offset);
        align-items: stretch;
    }
    html.aion-chat-page .apw-backdrop,
    html.aion-chat-page .tkw-backdrop {
        padding: 0;
        align-items: stretch;
    }
    html.aion-chat-page .weather-app-container,
    html.aion-chat-page .compass-widget-v2,
    html.aion-chat-page .shopping-widget,
    html.aion-chat-page .travel-widget,
    html.aion-chat-page .journey-widget,
    html.aion-chat-page .apw-modal,
    html.aion-chat-page .tkw-modal {
        width: 100%;
        max-width: 100%;
        min-height: calc(100dvh - var(--modal-top-offset, 0px) - var(--modal-bottom-offset, 0px));
        max-height: calc(100dvh - var(--modal-top-offset, 0px) - var(--modal-bottom-offset, 0px));
        border-radius: 0;
        border: none;
        box-shadow: none;
    }
}