/* APPICS Pro — YUNA schwebende Karte (Konzept B, Winchester-Wahl 10.09. 05:3x;
   Einbau KRITIK11 P6). Praefix pyuna- (Kollisions-grep 10.09. = 0 Treffer in
   css/*.css und js/*.js). Referenz: yamamoto/yuna-konzepte-20260910/yuna-konzept-B.png.
   Orb = Mint-Ring + Buchstabe "Y" (KEIN Gesicht — Konzept-Vorgabe).
   Stempel 0910yuna2: is-left-Variante (Seitenwahl per data-yuna-anchor).
   Stempel 0910sym: Panel-Tabs + Memory/Receipts/Recap-Stile (A1-UI).
   Stempel 0913yunastrip (13.09.): Strip-Modus <=480 px (einzeilig, gemessene
   freie Bande, nie ueber den Hero-CTAs) — KIMI-PRO-YUNA-MOBIL-CTA-20260913. */

.pyuna-card *, .pyuna-panel *, .pyuna-orbbtn * { box-sizing: border-box; }

/* Schwebende Karte unten rechts ODER links — der Code (pro-yuna.js pickSide)
   waehlt per data-yuna-anchor am Ziel-Element die Seite mit Platz (Spec 1). */
.pyuna-card { position: fixed; right: 24px; bottom: 24px; z-index: 380; width: min(400px, calc(100vw - 48px));
  padding: 14px 16px 12px; border: 1px solid rgb(120 221 217 / 35%); border-radius: 16px;
  background: rgb(13 19 31 / 92%); backdrop-filter: blur(14px);
  box-shadow: 0 12px 40px rgb(0 0 0 / 45%), 0 0 0 1px rgb(0 0 0 / 30%), 0 0 24px rgb(120 221 217 / 12%);
  opacity: 0; transform: translateY(10px) scale(.97);
  transition: opacity 200ms ease, transform 200ms ease; /* Spec 1: Pop-in 200 ms */
  color: var(--pro-ink, #e8edf3); font-family: var(--pro-font, inherit); }
.pyuna-card.is-in { opacity: 1; transform: none; }
/* Spec 1: Seitenwahl per Code (data-yuna-anchor) — links, wenn rechts kein
   Platz ist bzw. der Anker rechts steht. Karte nie ueber dem Ziel. */
.pyuna-card.is-left { right: auto; left: 24px; }

.pyuna-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pyuna-card-id { display: grid; line-height: 1.25; min-width: 0; }
.pyuna-card-id b { font-size: .8125rem; letter-spacing: .12em; color: var(--pro-mint, #78ddd9); }
.pyuna-card-id span { font-size: .6875rem; color: var(--pro-muted, #94a0b3); }
.pyuna-x { margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent;
  color: var(--pro-muted, #94a0b3); cursor: pointer; flex-shrink: 0; }
.pyuna-x:hover { background: rgb(255 255 255 / 8%); color: var(--pro-ink, #e8edf3); }
.pyuna-x svg { width: 14px; height: 14px; }

/* Orb-Avatar: Mint-Ring + "Y" (Konzept B, kein Gesicht). */
.pyuna-orb { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, rgb(120 221 217 / 45%), rgb(13 19 31) 70%);
  border: 2px solid var(--pro-mint, #78ddd9);
  box-shadow: 0 0 14px rgb(120 221 217 / 45%), inset 0 0 10px rgb(120 221 217 / 30%); }
.pyuna-orb i { font-style: normal; font-weight: 700; font-size: 1.0625rem; color: var(--pro-mint, #78ddd9); }
.pyuna-orb-sm { width: 34px; height: 34px; }
.pyuna-orb-sm i { font-size: .875rem; }

.pyuna-text { margin: 0 0 10px; font-size: .875rem; line-height: 1.45; color: var(--pro-ink, #e8edf3); }

.pyuna-row { display: flex; align-items: center; gap: 8px; }
.pyuna-sp { flex: 1; }
.pyuna-ic { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: 1px solid var(--pro-line, rgb(255 255 255 / 10%)); border-radius: 8px; background: transparent;
  color: var(--pro-muted, #94a0b3); cursor: pointer; }
.pyuna-ic:hover { color: var(--pro-mint, #78ddd9); border-color: var(--pro-mint, #78ddd9); }
.pyuna-ic.is-muted { color: var(--pro-mint, #78ddd9); border-color: var(--pro-mint, #78ddd9);
  background: rgb(120 221 217 / 10%); }
.pyuna-ic svg { width: 15px; height: 15px; }
.pyuna-btn { min-height: 36px; padding: 0 16px; border-radius: 8px; font-size: .8125rem; font-weight: 700;
  cursor: pointer; border: 1px solid transparent; }
.pyuna-btn-skip { background: transparent; color: var(--pro-muted, #94a0b3); border-color: var(--pro-line, rgb(255 255 255 / 12%)); }
.pyuna-btn-skip:hover { color: var(--pro-ink, #e8edf3); }
.pyuna-btn-yes { background: var(--pro-mint, #78ddd9); color: #0b1220; }
.pyuna-btn-yes:hover { filter: brightness(1.08); }

/* Zurueckgezogener Zustand: nur der Orb schwebt (Spec 3 "zieht sich zurueck"). */
.pyuna-orbbtn { position: fixed; right: 24px; bottom: 24px; z-index: 380; padding: 0; border: 0;
  background: transparent; cursor: pointer; }
.pyuna-orbbtn.is-left { right: auto; left: 24px; }
.pyuna-orbbtn .pyuna-orb { transition: transform 200ms ease; }
.pyuna-orbbtn:hover .pyuna-orb { transform: scale(1.08); }

/* Panel (Spec 3): halbe Breite, rechts angedockt, Konzept-A-Optik. */
.pyuna-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 390; width: min(50vw, 560px);
  display: flex; flex-direction: column; gap: 12px; padding: 20px 22px;
  background: rgb(13 19 31 / 97%); border-left: 1px solid rgb(120 221 217 / 30%);
  box-shadow: -18px 0 48px rgb(0 0 0 / 50%);
  transform: translateX(24px); opacity: 0; transition: transform 200ms ease, opacity 200ms ease;
  color: var(--pro-ink, #e8edf3); font-family: var(--pro-font, inherit); overflow-y: auto; }
.pyuna-panel.is-in { transform: none; opacity: 1; }
.pyuna-panel-top { display: flex; align-items: center; gap: 10px; }
.pyuna-panel-body { display: grid; gap: 10px; font-size: .875rem; line-height: 1.5; }
.pyuna-panel-body p { margin: 0; }
.pyuna-draft { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--pro-line, rgb(255 255 255 / 10%));
  border-radius: 12px; background: rgb(255 255 255 / 3%); }
.pyuna-draft b { font-size: .8125rem; color: var(--pro-mint, #78ddd9); }
.pyuna-draft span { color: var(--pro-muted, #94a0b3); font-size: .8125rem; }
.pyuna-panel-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.pyuna-note { margin: 0; font-size: .8125rem; color: var(--pro-mint, #78ddd9); }
.pyuna-hist { display: grid; gap: 4px; margin-top: 8px; padding-top: 10px;
  border-top: 1px solid var(--pro-line, rgb(255 255 255 / 10%)); font-size: .75rem; color: var(--pro-muted, #94a0b3); }
.pyuna-hist b { color: var(--pro-ink, #e8edf3); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.pyuna-src { margin: auto 0 0; padding-top: 10px; font-size: .6875rem; color: var(--pro-muted, #94a0b3); }

/* Stempel 0922yunaleer (B448, 22.09.): Einrichtungs-Schritte im Leerzustand.
   Eigene Ebene der Pro-Seite, Werte am 22.09. 19:4x aus css/pro.css gemessen:
   --pro-panel #141a27, --pro-mint #78ddd9, --pro-ink #fafbfb, --pro-muted
   #b9bdc5, Schrift ueber --pro-font (Inter). Die Rueckfallwerte stehen nur
   fuer den Fall, dass css/pro.css nicht geladen ist. */
.pyuna-step { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--pro-line, rgb(255 255 255 / 10%));
  border-left: 2px solid var(--pro-mint, #78ddd9); border-radius: 12px;
  background: var(--pro-panel, #141a27); font-family: var(--pro-font, inherit); }
.pyuna-step b { font-size: .8125rem; color: var(--pro-mint, #78ddd9); font-variant-numeric: tabular-nums; }
.pyuna-step span { font-size: .8125rem; color: var(--pro-ink, #fafbfb); }
/* Die Zeile, die benennt, was Yuna NICHT pruefen konnte: ruhig, nicht alarmierend. */
.pyuna-unchecked { margin: 0; font-size: .75rem; line-height: 1.45; color: var(--pro-muted, #b9bdc5); }

/* A1-UI (10.09., Stempel 0910sym): Panel-Tabs Suggestion | Memory | Receipts |
   Recap — INNEN im Panel (Floating-UI-Regel, dasselbe Element). */
.pyuna-tabs { display: flex; gap: 6px; padding: 4px; border-radius: 10px;
  background: rgb(255 255 255 / 4%); border: 1px solid var(--pro-line, rgb(255 255 255 / 10%)); }
.pyuna-tab { flex: 1; min-height: 32px; border: 0; border-radius: 7px; background: transparent;
  color: var(--pro-muted, #94a0b3); font-size: .75rem; font-weight: 700; cursor: pointer; }
.pyuna-tab:hover { color: var(--pro-ink, #e8edf3); }
.pyuna-tab.is-on { background: rgb(120 221 217 / 14%); color: var(--pro-mint, #78ddd9); }
.pyuna-pane { display: grid; gap: 10px; min-height: 0; }
.pyuna-pane[hidden] { display: none; }
.pyuna-load { margin: 0; font-size: .8125rem; color: var(--pro-muted, #94a0b3); }

/* Memory-Tab: fuenf Kategorien als lesbare Notizlisten + Export-Knoepfe. */
.pyuna-mem { display: grid; gap: 10px; }
.pyuna-mem-cat { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--pro-line, rgb(255 255 255 / 10%));
  border-radius: 12px; background: rgb(255 255 255 / 3%); }
.pyuna-mem-cat > b { font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pro-mint, #78ddd9); }
.pyuna-mem-cat ul { margin: 0; padding-left: 16px; display: grid; gap: 3px; }
.pyuna-mem-cat li { font-size: .8125rem; color: var(--pro-ink, #e8edf3); line-height: 1.45; }
.pyuna-mem-none { font-size: .75rem; color: var(--pro-muted, #94a0b3); }
.pyuna-mem-meta { margin: 0; font-size: .6875rem; color: var(--pro-muted, #94a0b3); }
.pyuna-mem-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* Receipts-Tab: lesbare Belegliste (was, wann, Status). */
.pyuna-rc { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pyuna-rc-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--pro-line, rgb(255 255 255 / 10%)); border-radius: 12px;
  background: rgb(255 255 255 / 3%); }
.pyuna-rc-id { display: grid; gap: 2px; min-width: 0; flex: 1; }
.pyuna-rc-id b { font-size: .8125rem; color: var(--pro-ink, #e8edf3); font-weight: 600; }
.pyuna-rc-when { font-size: .6875rem; color: var(--pro-muted, #94a0b3); }
.pyuna-rc-status { flex-shrink: 0; padding: 3px 10px; border-radius: 999px; font-size: .6875rem;
  font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: rgb(120 221 217 / 12%); color: var(--pro-mint, #78ddd9);
  border: 1px solid rgb(120 221 217 / 30%); }

/* Recap-Tab: Uhrzeit + Save (clientseitig, localStorage). */
.pyuna-recap-row { display: flex; gap: 10px; align-items: center; }
.pyuna-recap-row input[type="time"] { min-height: 36px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--pro-line, rgb(255 255 255 / 12%)); background: rgb(255 255 255 / 5%);
  color: var(--pro-ink, #e8edf3); font-size: .875rem; color-scheme: dark; }
.pyuna-recap-line { margin: 0; font-size: .8125rem; color: var(--pro-mint, #78ddd9); }
.pyuna-recap-note { margin: 0; font-size: .75rem; color: var(--pro-muted, #94a0b3); }

/* Mobil (Spec 1): Karte = Bottom-Sheet ueber der Bottom-Nav; Panel = volle Breite.
   is-left greift nur auf Desktop — mobil immer volle Breite. */
@media (max-width: 640px) {
  .pyuna-card, .pyuna-card.is-left { right: 12px; left: 12px; bottom: 76px; width: auto; }
  .pyuna-orbbtn, .pyuna-orbbtn.is-left { right: 16px; left: auto; bottom: 84px; }
  .pyuna-panel { width: 100vw; border-left: 0; }
}

/* Strip-Modus (0913yunastrip, KIMI-PRO-YUNA-MOBIL-CTA-20260913, <=480 px per
   JS): EINE Zeile — Orb + Kurztext (= spoken, per JS gesetzt) + Mute + Skip/Yes.
   Say/X entfallen im Strip (Mute bleibt erreichbar; Skip deckt Schliessen ab).
   Position setzt pro-yuna.js inline (gemessene freie Bande, nie ueber den drei
   Hero-CTAs). Spezifitaet .pyuna-card.is-compact.is-strip schlaegt .pyuna-card
   und die Sheet-Media-Regel (Falle: gleiche Spezifitaet, spaetere Regel). */
.pyuna-card.is-compact.is-strip { display: flex; align-items: center; gap: 8px; padding: 4px 10px;
  border-radius: 12px; transform: none; transition: opacity 200ms ease; } /* kein Pop-in-Versatz: der Strip dockt hart an */
.pyuna-card.is-compact.is-strip .pyuna-card-top { display: contents; }
.pyuna-card.is-compact.is-strip .pyuna-orb { width: 24px; height: 24px; border-width: 1px; box-shadow: none; }
.pyuna-card.is-compact.is-strip .pyuna-orb i { font-size: .75rem; }
.pyuna-card.is-compact.is-strip .pyuna-card-id { display: contents; }
.pyuna-card.is-compact.is-strip .pyuna-card-id b { font-size: .6875rem; }
.pyuna-card.is-compact.is-strip .pyuna-card-id span { display: none; }
.pyuna-card.is-compact.is-strip .pyuna-x { display: none; }
.pyuna-card.is-compact.is-strip .pyuna-text { flex: 1; min-width: 0; margin: 0; font-size: .75rem; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pyuna-card.is-compact.is-strip .pyuna-row { flex-shrink: 0; gap: 6px; }
.pyuna-card.is-compact.is-strip .pyuna-ic[data-pyuna-say], .pyuna-card.is-compact.is-strip .pyuna-sp { display: none; }
.pyuna-card.is-compact.is-strip .pyuna-ic { width: 26px; height: 26px; border-radius: 7px; }
.pyuna-card.is-compact.is-strip .pyuna-ic svg { width: 13px; height: 13px; }
.pyuna-card.is-compact.is-strip .pyuna-btn { min-height: 26px; padding: 0 10px; font-size: .75rem; }