/* Wolke – Assistentin „die Wolke“ (js/assistent.js): Kachel links unten am Dashboard, Symbol links unten (Handy und Seiten ohne Kachel), Gesprächsfenster. */

/* ---------- Figur ---------- */
.as-figur { display: block; overflow: visible; }
.as-figur .as-schein, .as-figur .as-sonne { transform-box: fill-box; transform-origin: center; }
.as-figur .as-auge { transform-box: fill-box; transform-origin: center; animation: as-blinzeln 6s infinite; }
.as-figur .as-mund { transform-box: fill-box; transform-origin: center top; }
@keyframes as-blinzeln { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.15); } }
@keyframes as-leuchten { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.18); opacity: 1; } }
@keyframes as-reden { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.9); } }
@keyframes as-denken { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-1.6px); } }
[data-zustand="hoert"] .as-schein, [data-zustand="hoert"] .as-sonne { animation: as-leuchten 1.3s ease-in-out infinite; }
[data-zustand="spricht"] .as-mund { animation: as-reden .42s ease-in-out infinite; }
[data-zustand="denkt"] .as-gesicht { animation: as-denken 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .as-figur * { animation: none !important; } }

/* ---------- Kachel am Dashboard (links unten) ---------- */
.infokarte.assistent-karte { background: linear-gradient(160deg, #eef3f5 0%, #f4f2ea 100%); }
.infokarte.assistent-karte:focus-visible { outline: 2px solid var(--salbei); outline-offset: 2px; }
.infokarte .as-karte-mikro { border: 0; cursor: pointer; color: var(--salbei-dunkel); }
.infokarte .as-karte-mikro:hover { background: var(--sonne-hell); }
.rahmen.as-offen .assistent-karte { box-shadow: 0 0 0 2px var(--sonne) inset; }

/* ---------- Symbol links unten ---------- */
.as-knopf {
  --as-sicher: 0px; --as-hoch: 0px;
  position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px) + var(--as-hoch)); z-index: 44;
  width: 60px; height: 60px; padding: 6px 4px 4px; border-radius: 50%; border: 1px solid var(--rand-stark); background: #fff; cursor: pointer;
  box-shadow: 0 4px 18px rgba(40, 50, 45, .16), 0 0 0 4px rgba(255, 216, 107, .18);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), opacity .2s, bottom .25s cubic-bezier(.2, .8, .2, 1);
}
.as-knopf .as-figur { width: 100%; height: 100%; }
.as-knopf:hover { transform: translateY(-2px); }
.as-knopf.rechts { left: auto; right: 12px; }
.as-knopf.weg { transform: translateX(-90px); opacity: 0; pointer-events: none; }
.as-knopf.rechts.weg { transform: translateX(90px); }
/* kein freier Platz: nur ein schmaler Griff ragt in den Seitenrand (14 px), antippen öffnet die Wolke */
.as-knopf.klein { transform: translateX(calc(-100% - 12px + 14px)); opacity: .95; background: var(--sonne-hell); border-color: var(--sonne); }
.as-knopf.rechts.klein { transform: translateX(calc(100% + 12px - 14px)); }
@media (hover: hover) { .as-knopf.klein:hover, .as-knopf.klein:focus-visible { transform: none; opacity: 1; } }
.as-knopf.aus { opacity: 0; pointer-events: none; transform: scale(.6); }
@media (min-width: 701px) {
  .rahmen.auf-start .as-knopf { display: none; }                 /* am Dashboard sitzt die Wolke in der Kachel links unten */
  .as-knopf { left: 18px; bottom: calc(18px + var(--as-hoch)); width: 56px; height: 56px; }
  .as-knopf.rechts { left: auto; right: 18px; }
  .as-knopf.klein { transform: translateX(calc(-100% - 18px + 14px)); }
  .as-knopf.rechts.klein { transform: translateX(calc(100% + 18px - 14px)); }
}
@media print { .as-knopf, .as-fenster { display: none !important; } }

/* ---------- Gesprächsfenster ---------- */
.as-fenster {
  position: fixed; left: 20px; bottom: 20px; z-index: 95; width: min(400px, calc(100vw - 40px)); height: min(640px, calc(100vh - 40px));
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rand-stark); border-radius: 18px;
  box-shadow: 0 18px 50px rgba(31, 45, 40, .22); overflow: hidden; animation: as-auf .22s cubic-bezier(.2, .8, .2, 1);
}
.as-fenster[hidden] { display: none; }
@keyframes as-auf { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.as-kopf { display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 8px 14px; border-bottom: 1px solid var(--rand);
  background: linear-gradient(160deg, #eef3f5 0%, #fbf6ea 100%); }
.as-kopf-zeile { display: flex; align-items: center; gap: 10px; }
.as-leiste { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.as-leiste-rest { display: flex; align-items: center; gap: 2px; }
.as-kopf .as-kopf-figur { width: 52px; height: 38px; flex: none; }
.as-titel { flex: 1; min-width: 0; line-height: 1.25; }
.as-kopf b { font-size: 16px; }
.as-kopf small { display: block; color: var(--leise); font-size: 12.5px; }
.as-kopf .icon-knopf { flex: none; }
.as-hinweis { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 8px 14px; background: var(--sonne-hell); color: #6b4a14; font-size: 12.5px; line-height: 1.4; }
.as-hinweis svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.as-hinweis-kurz { display: none; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.as-hinweis.zu { padding-top: 5px; padding-bottom: 5px; }
.as-hinweis.zu .as-hinweis-voll { display: none; }
.as-hinweis.zu .as-hinweis-kurz { display: block; text-decoration: underline; text-decoration-color: rgba(107, 74, 20, .35); }
.as-verlauf { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.as-blase { position: relative; max-width: 88%; padding: 10px 13px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; white-space: normal; }
.as-blase.wolke { align-self: flex-start; background: var(--salbei-zart); border-bottom-left-radius: 5px; padding-right: 34px; }
.as-blase.ich { align-self: flex-end; background: var(--salbei); color: #fff; border-bottom-right-radius: 5px; }
.as-blase.fehler { background: var(--rot-hell); }
.as-blase .textlink { display: block; margin-top: 6px; font-size: 13.5px; }
.as-vorlesen { position: absolute; right: 6px; bottom: 6px; width: 24px; height: 24px; padding: 3px; border: 0; border-radius: 50%; background: transparent; color: var(--leise); cursor: pointer; }
.as-vorlesen:hover { background: #fff; color: var(--salbei-dunkel); }
.as-vorlesen svg { width: 100%; height: 100%; }
.as-blase:first-child { padding-right: 13px; }
.as-denkt { display: flex; gap: 5px; padding: 13px 16px; }
.as-denkt i { width: 7px; height: 7px; border-radius: 50%; background: var(--salbei); opacity: .35; animation: as-punkt 1.1s infinite; }
.as-denkt i:nth-child(2) { animation-delay: .18s; }
.as-denkt i:nth-child(3) { animation-delay: .36s; }
@keyframes as-punkt { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: .9; transform: translateY(-3px); } }
.as-vorschlaege { display: flex; flex-wrap: wrap; gap: 6px; }
.as-vorschlaege button { border: 1px solid var(--rand-stark); background: #fff; border-radius: 999px; padding: 6px 11px; font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; }
.as-vorschlaege button:hover { border-color: var(--salbei); color: var(--salbei-dunkel); }
.as-eingabe { display: flex; gap: 8px; align-items: center; padding: 10px; border-top: 1px solid var(--rand); background: #fff; }
.as-eingabe input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--rand-stark); border-radius: 22px; font: inherit; font-size: 15px; background: var(--grund); }
.as-eingabe input:focus { outline: none; border-color: var(--salbei); background: #fff; }
.as-mikro, .as-senden { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; padding: 0; }
.as-mikro svg, .as-senden svg { width: 21px; height: 21px; position: relative; z-index: 1; }
.as-mikro { background: var(--sonne-hell); color: #8a5a12; }
.as-mikro .as-pegel { --pegel: 0; position: absolute; inset: 0; border-radius: 50%; background: rgba(242, 163, 58, .35); transform: scale(calc(1 + var(--pegel) * .7)); transition: transform .08s; }
.as-mikro.an { background: var(--sonne); color: #fff; }
.as-senden { background: var(--salbei); color: #fff; }

@media (max-width: 700px) {
  .as-fenster { --as-tastatur: 0px; left: 0; right: 0; bottom: var(--as-tastatur); width: 100%; height: min(78dvh, calc(100dvh - var(--as-tastatur) - 24px));
    border-radius: 20px 20px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .as-blase { font-size: 15px; }
}

/* ---------- Stimme wählen ---------- */
.as-kopf .icon-knopf.an { background: var(--sonne-hell); color: #8a5a12; }
.as-stimmen { display: flex; flex-direction: column; gap: 6px; }
.as-stimmen > p { margin: 0 0 6px; font-size: 13.5px; }
.as-stimme { display: flex; align-items: center; gap: 6px; border: 1px solid var(--rand); border-radius: 12px; background: #fff; }
.as-stimme.gewaehlt { border-color: var(--salbei); background: var(--salbei-zart); }
.as-stimme-wahl { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 9px 4px 9px 12px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--text); }
.as-stimme-wahl b { display: block; font-size: 14.5px; font-weight: 600; }
.as-stimme-wahl small { display: block; color: var(--leise); font-size: 12.5px; }
.as-punkt { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--rand-stark); background: #fff; }
.as-stimme.gewaehlt .as-punkt { border-color: var(--salbei); box-shadow: inset 0 0 0 4px #fff; background: var(--salbei); }
.as-stimme-hoeren { flex: none; width: 38px; height: 38px; margin-right: 6px; border: 0; border-radius: 50%; background: var(--sonne-hell); color: #8a5a12; cursor: pointer; display: grid; place-items: center; padding: 0; }
.as-stimme-hoeren svg { width: 16px; height: 16px; }
.as-stimme-hoeren:hover { background: var(--sonne); color: #fff; }
.as-stimme-fertig { align-self: flex-end; margin-top: 6px; }

/* ---------- Was kostet die KI? ---------- */
.as-info { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.5; }
.as-info h3 { margin: 0; font-size: 16px; }
.as-info p { margin: 0; }
.as-preise { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 4px 0; }
.as-preise th { text-align: left; font-weight: 600; color: var(--leise); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; padding: 4px 6px; border-bottom: 1px solid var(--rand); }
.as-preise td { padding: 7px 6px; border-bottom: 1px solid var(--rand); vertical-align: top; }
.as-preise th:last-child, .as-preise td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.as-preise tr.frei td { color: var(--leise); }
.as-info-abo { background: var(--salbei-zart); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.as-info-knoepfe { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 4px; }

/* ---------- KI-Guthaben: Wahl auf der Abo-Seite (abo_ui.js) und Lage im Fenster der Wolke ---------- */
.ki-wahl { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.ki-wahl-zeile { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--rand); border-radius: 12px; cursor: pointer; line-height: 1.5; }
.ki-wahl-zeile:has(input:checked) { border-color: var(--salbei); background: var(--salbei-zart); }
.ki-wahl-zeile input { margin-top: 4px; accent-color: var(--salbei); }
.ki-grenze { padding: 4px 14px 0; }
.ki-grenze[hidden] { display: none; }
.ki-grenze input[type=range] { width: 100%; accent-color: var(--sonne); margin: 10px 0 2px; }
.ki-grenze-skala { display: flex; justify-content: space-between; }
.as-ki-lage { margin: 0; padding: 8px 14px; font-size: 12.5px; line-height: 1.4; background: var(--rot-hell); color: var(--rot); }
.as-ki-lage.weiter { background: var(--sonne-hell); color: #7a4b0f; }
.as-ki-lage[hidden] { display: none; }
.as-kosten-link { display: block; margin-top: 4px; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; text-align: left; }
.as-info .as-wichtig { padding: 10px 12px; border-radius: 12px; background: var(--sonne-hell); color: #6b4a14; }
.as-mikro:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Hauptschalter Stimme / Nur Text und kleine Anzeige des KI-Guthabens (Kopf des Fensters) ---------- */
.as-schalter { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px 0 8px; border-radius: 999px; border: 1px solid var(--rand-stark);
  background: #fff; color: var(--salbei-dunkel); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.as-schalter svg { width: 16px; height: 16px; }
.as-schalter[aria-checked="false"] { background: var(--grund); color: var(--text-2); border-style: dashed; }
.as-schalter:hover { border-color: var(--salbei); }
.as-guthaben { display: flex; align-items: center; gap: 5px; margin-top: 1px; font-size: 11px; color: var(--leise); }
.as-guthaben[hidden] { display: none; }
.as-guthaben i { display: inline-block; width: 28px; height: 4px; border-radius: 99px; background: linear-gradient(to right, var(--salbei) var(--rest, 0%), var(--rand) var(--rest, 0%)); }
.as-guthaben.knapp { color: var(--rot); }
.as-guthaben.knapp i { background: linear-gradient(to right, var(--rot) var(--rest, 0%), var(--rand) var(--rest, 0%)); }
@media (max-width: 420px) {
  .as-kopf { gap: 6px; padding-left: 10px; }
  .as-kopf .as-kopf-figur { width: 38px; height: 28px; }
  .as-kopf .icon-knopf { width: 32px; height: 32px; }
  .as-schalter { padding: 0 8px 0 6px; }
}
/* Erklär-Funktionen (Rundgang, Seite erklären, Einführung, Handbuch) – immer oben im Fenster */
.as-hilfen button { border-color: var(--sonne); background: var(--sonne-hell); color: #7a4b0f; }
.as-hilfen button:hover { border-color: #d98b22; color: #5e390b; }