/* ---------- Zen, der Sprachassistent (js/30-zen.js) ----------
   So hat Evi es gewollt: ein Satz, und daraus wird ein Termin, eine Aufgabe
   oder ein Einkauf. Ein Knopf ueber der Reiterleiste oeffnet ein Blatt mit
   Eingabe und Mikrofon, darunter die Karte mit dem Verstandenen und die
   Rueckfrage als Sprechblase mit Antworten zum Antippen. Farben nur aus den
   Toenen des Designs; Zeiten und Kurven aus der Politur. */

/* Der Knopf schwebt rechts ueber der Reiterleiste - dort liegt der Daumen.
   Er liegt ueber der Seite, darum mit Schatten (siehe Politur). Er traegt
   sein Wort, ein Zeichen allein muss man sich merken. */
.zen-knopf{
  position:fixed;z-index:45;
  right:16px;bottom:calc(78px + var(--leiste-unten, env(safe-area-inset-bottom, 0px)));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  width:60px;height:60px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid transparent;
  background:var(--accent);color:var(--on-accent);
  background:linear-gradient(to bottom, var(--glanz-knopf, rgba(255,255,255,.2)), rgba(255,255,255,0) 60%), var(--accent);
  box-shadow:var(--shadow-lift);
  font-family:var(--font-body);font-size:11px;font-weight:700;line-height:1;letter-spacing:.02em;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform var(--dur, .22s) var(--ease-feder, ease), box-shadow var(--dur, .22s) var(--ease, ease);
}
.zen-knopf:active{transform:scale(.94);transition-duration:.06s;}
/* Zen ist eine kleine runde Blase (so hat Evi es gewollt): oben der
   Roboterkopf, darunter klein sein Name. */
.zkn-kreis{display:grid;place-items:center;flex:none;margin-top:1px;}
.zkn-kreis svg{width:27px;height:27px;}
/* Steht unten eine Meldung, tritt der Knopf so lange zurueck - sonst laege
   er auf "Rueckgaengig" (die Meldung kann zweizeilig sein, Ausweichen nach
   oben reichte nicht immer). */
body:has(.toast.show) .zen-knopf{opacity:0;transform:scale(.85);pointer-events:none;}
.zen-knopf{transition:transform var(--dur, .22s) var(--ease-feder, ease), opacity var(--dur, .22s) var(--ease, ease), box-shadow var(--dur, .22s) var(--ease, ease);}
/* Am Ende der Seite bleibt Platz, damit der Knopf nichts verdeckt. */
#app:has(> .zen-knopf){padding-bottom:170px;}
@media (min-width:760px){
  .zen-knopf{right:24px;bottom:24px;}
  #app:has(> .zen-knopf){padding-bottom:96px;}
}

/* ---------- Das Blatt ---------- */
.zen-kopf{display:flex;align-items:center;gap:12px;margin:0 44px 16px 0;min-width:0;}
.zen-marke{
  flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:var(--on-accent);
  box-shadow:inset 0 1px 0 var(--glanz-knopf, rgba(255,255,255,.2));
}
.zen-marke, .zf-marke{font-family:var(--font-display);font-weight:700;line-height:1;letter-spacing:-.02em;}
.zen-marke{font-size:23px;}
.zen-kopf-txt{min-width:0;}
.modal.zen .zen-kopf h3{margin:0;font-size:21px;line-height:1.15;}
.zen-kopf .modal-sub{margin:2px 0 0;font-size:13.5px;color:var(--ink-soft);}

/* Die Eingabe: ein Feld, rechts ein runder Knopf - leer das Mikrofon,
   mit Text der Pfeil zum Abschicken (wie beim Schreiben einer Nachricht). */
.zen-form{display:flex;align-items:center;gap:8px;margin:0 0 14px;}
.zen-feld{
  flex:1 1 auto;min-width:0;height:50px;
  padding:0 18px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-family:var(--font-body);font-size:16px;   /* unter 16 px zoomt das iPhone */
  transition:border-color var(--dur, .22s) var(--ease, ease), box-shadow var(--dur, .22s) var(--ease, ease), background var(--dur, .22s);
}
.zen-feld::placeholder{color:var(--ink-soft);opacity:.85;}
.zen-feld:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.zen-mik, .zen-los{
  flex:none;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:none;background:var(--accent);color:var(--on-accent);
  box-shadow:inset 0 1px 0 var(--glanz-knopf, rgba(255,255,255,.2));
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform var(--dur-schnell, .14s) var(--ease-feder, ease);
}
.zen-mik svg, .zen-los svg{width:23px;height:23px;}
.zen-mik:active, .zen-los:active{transform:scale(.92);transition-duration:.06s;}
/* Mit Mikrofon: der Pfeil kommt erst, wenn etwas im Feld steht. */
.zen-form.mit-mik .zen-los{display:none;}
.zen-form.mit-mik.hat-text .zen-los{display:grid;}
.zen-form.mit-mik.hat-text:not(.hoert) .zen-mik{display:none;}
.zen-form:not(.mit-mik):not(.hat-text) .zen-los{opacity:.45;}
/* Beim Zuhoeren atmet der Knopf - man sieht, dass Zen gerade hoert. */
.zen-form.hoert .zen-feld{background:var(--accent-soft);border-color:var(--accent);}
.zen-form.hoert .zen-mik{animation:zenHoert 1.3s ease-in-out infinite;}
@keyframes zenHoert{
  0%,100%{box-shadow:0 0 0 0 var(--accent-soft), inset 0 1px 0 var(--glanz-knopf, rgba(255,255,255,.2));}
  50%{box-shadow:0 0 0 9px var(--accent-soft), inset 0 1px 0 var(--glanz-knopf, rgba(255,255,255,.2));}
}

/* Der Hinweis aufs Mikrofon der Tastatur (App vom Startbildschirm oder wenn
   die Spracherkennung des Browsers keinen Text liefert). */
.zen-diktat{
  display:flex;align-items:flex-start;gap:8px;margin:-4px 2px 14px;
  padding:10px 12px;border-radius:14px;
  background:var(--accent-soft);color:var(--ink);
  font-size:13px;line-height:1.45;
  animation:zenFrage var(--dur-ruhig, .34s) var(--ease, ease) both;
}
.zen-diktat[hidden]{display:none;}
.zen-diktat svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--accent-deep);}

/* Das Sprachpaket: fragen, laden, fertig. */
.zen-stimme{margin:-4px 2px 14px;padding:11px 12px;border-radius:14px;background:var(--accent-soft);color:var(--ink);
  font-size:13px;line-height:1.45;animation:zenFrage var(--dur-ruhig, .34s) var(--ease, ease) both;}
.zen-stimme[hidden]{display:none;}
.zen-stimme p{display:flex;align-items:flex-start;gap:8px;margin:0;}
.zen-stimme p svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--accent-deep);}
.zst-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.zst-knoepfe .btn{flex:1 1 130px;}
.zst-kreis{width:16px;height:16px;flex:none;margin-top:1px;border-radius:50%;
  border:2px solid var(--accent-deep);border-right-color:transparent;animation:zstDreh .9s linear infinite;}
@keyframes zstDreh{to{transform:rotate(360deg);}}

/* ---------- Bevor etwas gesagt ist ---------- */
.zen-start{padding:2px 2px 22px;}
.zs-satz{margin:0 0 16px;font-size:14px;line-height:1.55;color:var(--ink-soft);}
.zs-wort{display:block;margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);}
.zs-beispiele{display:flex;flex-direction:column;gap:8px;}
.zs-beispiel{
  text-align:left;cursor:pointer;
  padding:12px 15px;border-radius:16px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-family:var(--font-body);font-size:14.5px;line-height:1.4;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform var(--dur-schnell, .14s) var(--ease-feder, ease), border-color var(--dur, .22s);
}
.zs-beispiel{display:flex;flex-direction:column;align-items:flex-start;gap:3px;}
/* Die Frage klein im Akzent, darunter der Satz, den man sagt. */
.zs-frage{font-size:12px;font-weight:700;line-height:1.3;color:var(--accent-deep);}
.zs-antwort{font-size:14.5px;line-height:1.4;color:var(--ink);}
.zs-beispiel:active{transform:scale(.98);transition-duration:.06s;}
.zs-leise{display:flex;align-items:center;gap:6px;margin:18px 0 0;font-size:12px;line-height:1.45;color:var(--ink-soft);}
.zs-leise svg{width:14px;height:14px;flex:none;}

/* ---------- Die Karte mit dem Verstandenen ---------- */
.zen-karte{
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:13px 14px 6px;
  box-shadow:inset 0 1px 0 var(--glanz, rgba(255,255,255,.5)), 0 1px 2px rgba(0,0,0,.04);
}
.zk-satz{margin:0 0 10px;font-size:13px;line-height:1.45;font-style:italic;color:var(--ink-soft);overflow-wrap:anywhere;}
.zk-arten{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px;}
.zk-arten .chip{padding:7px 12px;font-size:12.5px;}
.zk-zeilen{display:flex;flex-direction:column;}
.zk-zeile, .zk-punkt{
  display:grid;grid-template-columns:30px 82px minmax(0,1fr) 16px;align-items:center;gap:8px;
  width:100%;padding:10px 0;margin:0;text-align:left;
  background:none;border:none;border-top:1px solid var(--line);
  font-family:var(--font-body);color:var(--ink);cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.zk-zeilen > :first-child{border-top:none;}
.zk-punkt{grid-template-columns:30px minmax(0,1fr) auto;cursor:default;}
.zk-zeichen{
  width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-deep);
}
.zk-zeichen svg{width:16px;height:16px;}
.zk-wort{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);hyphens:manual;line-height:1.25;}
.zk-wert{font-size:15px;font-weight:600;line-height:1.35;overflow-wrap:anywhere;}
.zk-wert em{
  font-style:normal;font-size:12.5px;font-weight:700;
  display:inline-block;padding:3px 10px;border-radius:999px;
  background:var(--wait-soft);color:var(--wait);
}
.zk-neu{
  font-style:normal;font-size:11px;font-weight:700;margin-left:4px;
  display:inline-block;padding:2px 8px;border-radius:999px;vertical-align:1px;
  background:var(--accent-soft);color:var(--accent-deep);
}
.zk-neu.frag{background:var(--wait-soft);color:var(--wait);}
.zk-leer{font-weight:500;color:var(--ink-soft);}
.zk-stift{display:grid;place-items:center;color:var(--ink-soft);opacity:.55;}
.zk-stift svg{width:14px;height:14px;}
.zk-zeile.fehlt .zk-zeichen{background:var(--wait-soft);color:var(--wait);}
.zk-zeile.an .zk-zeichen{background:var(--wait-soft);color:var(--wait);}
.zk-zeile.an .zk-zeichen svg{fill:currentColor;}
.zk-zeile:active .zk-wert{opacity:.7;}
.zk-punkt .weg-kreuz{margin-left:4px;}

/* ---------- Die Rueckfrage: eine Sprechblase von Zen ---------- */
.zen-frage{display:flex;align-items:flex-start;gap:9px;margin:14px 0 4px;animation:zenFrage var(--dur-ruhig, .34s) var(--ease, ease) both;}
@keyframes zenFrage{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}
.zf-marke{
  flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:var(--on-accent);
}
.zf-marke{font-size:15px;}
.zf-rumpf{
  flex:1 1 auto;min-width:0;
  padding:11px 14px 12px;border-radius:4px 18px 18px 18px;
  background:var(--accent-soft);
  background:color-mix(in srgb, var(--accent) 9%, var(--surface));
  border:1px solid var(--line);
}
.zf-rumpf p{margin:0;font-size:14.5px;font-weight:600;line-height:1.45;color:var(--ink);}
.zf-chips{margin-top:10px;gap:7px;}
.zf-chips .chip{min-height:40px;padding:9px 14px;font-size:13.5px;background:var(--surface);}
.zf-chips .chip.zf-ja{border-color:var(--accent);color:var(--accent-deep);font-weight:700;}

/* ---------- Unten ---------- */
.zen-fuss{margin-top:14px;}
.zen-fuss-zeile{display:flex;gap:8px;margin-top:8px;}
.zen-fuss-zeile .btn{flex:1 1 0;min-height:40px;width:auto;font-size:12.5px;padding:8px 10px;}

@media (max-width:360px){
  .zk-zeile{grid-template-columns:28px 66px minmax(0,1fr) 14px;gap:6px;}
  .zk-zeichen{width:28px;height:28px;}
  .zk-wort{font-size:10px;letter-spacing:.05em;}
  .zk-wert{font-size:14px;}
  .zen-feld{padding:0 14px;}
  .zen-mik, .zen-los, .zen-feld{height:46px;} .zen-mik, .zen-los{width:46px;}
}

@media (hover:hover) and (pointer:fine){
  .zen-knopf:hover{box-shadow:var(--shadow-lift), 0 0 0 3px var(--accent-soft);}
  .zs-beispiel:hover{border-color:var(--accent);}
  .zk-zeile:hover .zk-stift{opacity:1;color:var(--accent-deep);}
}