/* Die Susi-App (#194) — auf taskpane.css aufgesetzt: Blasen und Karten wie
   im Outlook-Add-in, dazu was das Handy braucht (Eingabeleiste mit Mikrofon,
   Live-Gespraech, Vorlesen anhalten). Farben aus dem Design-System
   (plattform/portal/eingabe/portal.css). */

:root {
  --grund: #faf7f2; --flaeche: #f6f2ed; --linie: #e2dfdb; --text: #0f1926; --leise: #626a75;
  --akzent: #20395a; --akzent-text: #ffffff; --susi: #ffffff; --ich: #20395a; --fehler: #a32b1c;
}
@media (prefers-color-scheme: dark) {
  :root { --grund: #14191f; --flaeche: #1f262e; --linie: #313a44; --text: #eef1f4; --leise: #a5adb6;
          --akzent: #8fb4dd; --akzent-text: #0f1926; --susi: #1f262e; --ich: #35608f; }
}
[hidden] { display: none !important; }
html, body { height: 100%; width: 100%; overflow-x: hidden; }
body { display: flex; flex-direction: column; font-family: -apple-system, "Segoe UI", Inter, sans-serif; }

.app-kopf { padding-top: calc(env(safe-area-inset-top) + 8px); gap: 4px; }
.wortmarke { display: inline-flex; align-items: center; font-weight: 650; font-size: 20px; color: #20395a; }
.wortmarke svg { width: 26px; height: 26px; margin-right: 1px; }
@media (prefers-color-scheme: dark) { .wortmarke { color: #eef1f4; } }
.app-kopf .status { margin-left: auto; }
.rund { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--akzent);
        display: grid; place-items: center; }
.rund:active { background: var(--flaeche); }
svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rund svg, .rundknopf svg { width: 21px; height: 21px; }

.einrichten { margin: auto; width: 100%; max-width: 22rem; padding: 20px; display: flex; flex-direction: column;
              gap: 12px; text-align: center; color: var(--leise); }
.einrichten b { color: var(--text); font-size: 20px; }
.fehlertext { color: var(--fehler); font-size: 14px; }

.verlauf { flex: 1; min-width: 0; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.blase.ich { color: #fff; }
.blase .klein-knopf { border: 0; background: none; color: var(--leise); font-size: 13px; padding: 6px 0 0;
                      display: inline-flex; gap: 4px; align-items: center; }
.blase .klein-knopf svg { width: 14px; height: 14px; }
.blase .ton { font-size: 12px; opacity: .8; display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
.blase .ton svg { width: 13px; height: 13px; }
.blase details { font-size: 13px; }

.app-unten { padding: 8px 10px calc(env(safe-area-inset-bottom) + 8px); border-top: 1px solid var(--linie); background: var(--grund); }
.leiste, .aufnahme { display: flex; align-items: flex-end; gap: 6px; background: var(--susi); border: 1px solid var(--linie);
                     border-radius: 24px; padding: 6px 6px 6px 14px; }
.leiste textarea { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; resize: none; font: inherit; font-size: 16px;
                   max-height: 140px; padding: 7px 0; background: transparent; color: var(--text); }
.rundknopf { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center;
             background: var(--flaeche); color: var(--akzent); }
.rundknopf.voll { background: var(--akzent); color: var(--akzent-text); }
.aufnahme { align-items: center; border-color: var(--fehler); }
.aufnahme .punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--fehler); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.aufnahme .zeit { flex: 1; font-variant-numeric: tabular-nums; font-weight: 600; }
.aufnahme .rest { color: var(--leise); font-size: 13px; font-weight: 400; }

.stopp { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 76px);
         z-index: 4; border: 0; border-radius: 999px; padding: 10px 18px; background: var(--akzent); color: var(--akzent-text);
         font: inherit; font-size: 15px; font-weight: 600; box-shadow: 0 4px 16px rgba(15, 25, 38, .25); }

.gespraech { position: fixed; inset: 0; z-index: 6; background: var(--grund); display: flex; flex-direction: column;
             align-items: center; justify-content: space-between;
             padding: calc(env(safe-area-inset-top) + 24px) 20px calc(env(safe-area-inset-bottom) + 24px); }
.gespraech-oben { color: var(--leise); text-align: center; min-height: 1.5em; }
.gespraech-mitte { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.welle svg { width: 140px; height: 140px; border-radius: 50%; stroke: none; }
.welle.spricht svg { animation: puls 1.2s ease-in-out infinite; }
@keyframes puls { 50% { box-shadow: 0 0 0 22px rgba(32, 57, 90, .12); } }
.gespraech-text { max-width: 22rem; text-align: center; color: var(--text); font-size: 17px; line-height: 1.5; min-height: 3em; }
.auflegen { border: 0; border-radius: 999px; padding: 14px 34px; background: var(--fehler); color: #fff; font: inherit;
            font-size: 17px; font-weight: 600; }

.blatt { position: fixed; inset: 0; background: rgba(15, 25, 38, .35); display: flex; align-items: flex-end; z-index: 7; }
.blatt > div { width: 100%; background: var(--susi); border-radius: 16px 16px 0 0; padding: 8px 0 calc(env(safe-area-inset-bottom) + 8px); }
.blatt button, .blatt label { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; font: inherit;
                              padding: 14px 20px; color: var(--text); text-align: left; }
.blatt .rot { color: var(--fehler); } .blatt .leise { color: var(--leise); }

/* KEIN HINEINZOOMEN AM IPHONE (#230): Safari zoomt bei jedem Eingabefeld mit
   Schrift unter 16 px — die Kartenfelder haben im Add-in 13 px. In der App
   deshalb 16 px. Den Zoom per viewport abzuschalten waere die falsche Loesung:
   Dann ginge auch das Zoomen mit zwei Fingern nicht mehr. */
.karte input, .karte textarea, .karte select, .karte .ac-input, .karte .ac-textInput { font-size: 16px; }
.karte input[type="checkbox"], .karte input[type="radio"] { font-size: inherit; }