/* ============================================================
   AiFX Copilot — PWA. Avatar stage + chat + idle game.
   iOS-aware (safe-area), glassy, fluid.
   ============================================================ */
:root{
  --bg:#070810; --panel:rgba(255,255,255,0.05); --panel-2:rgba(255,255,255,0.08);
  --ink:#eef1f8; --dim:#9aa3ba; --faint:#4a5168;
  --accent:#5b8cff; --accent-2:#00e0c6; --accent-3:#b06bff; --warn:#ff5b7f;
  --ember:#ffb060;
  --ok:#37e0a0; --line:rgba(255,255,255,0.1);
  /* Auftrag 46 — mirror-glass tokens (frosted, floating, soft depth) */
  --glass:rgba(20,26,46,0.40); --glass-2:rgba(28,34,58,0.55);
  --glass-border:rgba(255,255,255,0.16);
  --glass-shadow:0 10px 34px rgba(0,0,0,0.40);
  --glass-blur:saturate(150%) blur(16px);
  --ease:cubic-bezier(0.16,1,0.3,1);
  --safe-t: env(safe-area-inset-top,0px);
  --safe-b: env(safe-area-inset-bottom,0px);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;}
body{
  /* warmer, deeper field: cool aurora up top, a soft ember glow below */
  background:
    radial-gradient(120% 80% at 50% -12%, rgba(91,140,255,.20), transparent 55%),
    radial-gradient(95% 70% at 88% 112%, rgba(255,140,90,.12), transparent 55%),
    radial-gradient(130% 95% at 50% 0%, #0f1426, #070810 64%);
  color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  display:flex;flex-direction:column;
  /* iOS portrait: pin the shell to the *dynamic* viewport so the composer never
     hides behind Safari's bottom toolbar (100% / vh resolve to the large viewport).
     100% stays as the fallback for engines without dvh. */
  height:100dvh;
  width:100%;max-width:100vw;overflow-x:hidden;
  overscroll-behavior:none;                 /* no rubber-band past the fixed shell */
  /* full safe-area: notch top, home-indicator bottom, + sides for completeness */
  padding-top:var(--safe-t);padding-bottom:var(--safe-b);
  padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);
  -webkit-font-smoothing:antialiased; touch-action:manipulation;
}
/* slow drifting aurora behind everything (calm "life" in the chat view) */
body::before{
  content:"";position:fixed;inset:-25%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 30% at 28% 32%, rgba(0,224,198,.12), transparent 60%),
    radial-gradient(34% 28% at 72% 58%, rgba(176,107,255,.12), transparent 60%),
    radial-gradient(30% 24% at 55% 88%, rgba(255,176,96,.08), transparent 60%);
  filter:blur(22px);
  animation:auroraDrift 28s ease-in-out infinite alternate;
}
@keyframes auroraDrift{from{transform:translate3d(-3%,-2%,0) scale(1.02);}
                       to{transform:translate3d(4%,3%,0) scale(1.08);}}

/* ---------- Mirror-glass utility (Auftrag 46) ---------- */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------- Top bar ---------- */
.bar{display:flex;align-items:center;justify-content:space-between;
     padding:12px 18px;flex:0 0 auto;position:relative;z-index:6;
     border-bottom:1px solid rgba(255,255,255,.05);}
.bar .id{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-0.02em;}
.bar .id .dot{width:8px;height:8px;border-radius:50%;background:var(--accent-2);
              box-shadow:0 0 12px var(--accent-2);}
.bar .state{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);}
.bar .state.busy{color:var(--accent-2);} .bar .state.listening{color:var(--warn);}

/* ---------- Avatar stage ---------- */
.stage{flex:1 1 auto;position:relative;display:flex;align-items:center;justify-content:center;
       min-height:0;}
#avatar{width:100%;height:100%;display:block;}

/* ============================================================
   MINIVERSE HOOK — avatar ⇄ miniverse transition styling.
   #warp: full-stage glow stage.js fades in at the scene-swap peak
   to hide the exact swap frame (opacity is driven per-RAF by JS,
   so NO css transition on it). mode-miniverse re-skins the shell
   while the walkable world is active.
   ============================================================ */
#warp{
  position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0;
  background:radial-gradient(closest-side,
              rgba(176,107,255,0.95), rgba(91,140,255,0.55) 42%, rgba(7,8,16,0) 74%);
  mix-blend-mode:screen; will-change:opacity;
}
.mv-btn{
  position:absolute; z-index:8; top:12px; right:12px;
  padding:9px 15px; border-radius:18px; color:var(--ink); font:inherit; font-size:13px;
  font-weight:600; letter-spacing:.01em; cursor:pointer;
  background:var(--glass); border:1px solid var(--glass-border);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .25s var(--ease), opacity .25s var(--ease);
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.mv-btn:active{transform:scale(.92);}
.mv-btn.enter{background:linear-gradient(135deg, rgba(91,140,255,.42), rgba(176,107,255,.42));
              border-color:rgba(140,170,255,.4);}
/* Auftrag 160 — the "↩ Chat" return button belongs to the chat context, not
   floating over the walkable 3D world. It now shows IN the chat (top-left, so
   it never overlaps the top-right "✦ Universum" enter button) and is hidden
   while the miniverse/cosmos is active. Returning to chat from inside the
   miniverse stays possible via the existing cosmos "Heinzelmännchen" node and
   the Escape key (app.js) — only this overlay button disappears there. */
.mv-btn.back{left:12px; right:auto;}
body.mode-miniverse .mv-btn.enter{display:none;}
body.mode-miniverse .mv-btn.back{display:none;}
/* Auftrag 240 — APP/Universum: the overlay "↩ Chat" (.mv-btn.back) must also
   disappear in the Cosmos hub. cosmos.js now sets body.mode-cosmos exactly while
   the universe is the active view (mirrors the mode-miniverse pattern above), so
   the button stays in the pure chat, vanishes in the universe, and the walkable
   miniverse is untouched. */
body.mode-cosmos .mv-btn.back{display:none;}
/* In the cosmos the chat history recedes; the composer stays as a floating
   glass bar IN the universe (Auftrag 46), tray dimmed.
   Auftrag 240 — black-bar fix: opacity:0 alone left .chat/.tray occupying their
   flex boxes, so a dark strip showed between the cosmos canvas (.stage) and the
   composer. Collapse their layout too → .stage (flex:1) grows to fill down to the
   input line (stage.js's canvas ResizeObserver re-syncs the renderer). Composer
   stays floating. */
body.mode-miniverse .chat, body.mode-cosmos .chat{
  opacity:0; pointer-events:none;
  max-height:0; min-height:0; padding-top:0; padding-bottom:0; overflow:hidden;
}
body.mode-miniverse .tray, body.mode-cosmos .tray{
  opacity:0; pointer-events:none;
  max-height:0; min-height:0; padding:0; margin:0; border:0; overflow:hidden;
}

/* ============================================================
   Cosmos hub — floating mirror-glass UI projected onto nodes.
   Chips are positioned per-frame by cosmos.js (inline transform);
   never override their transform on :active (use brightness).
   ============================================================ */
.cosmos-ui{position:absolute; inset:0; z-index:7; pointer-events:none;}
.cosmos-chip{
  position:absolute; top:0; left:0; pointer-events:auto;
  display:flex; align-items:center; gap:10px; min-height:44px;
  padding:9px 15px 9px 13px; border-radius:16px; font:inherit; cursor:pointer;
  color:var(--ink); text-shadow:0 1px 3px rgba(0,0,0,.55);
  opacity:0; transition:opacity .35s var(--ease); will-change:transform;
}
.cosmos-chip.show{opacity:1;}
.cosmos-chip:active{filter:brightness(1.18);}
.cosmos-chip .dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;
  box-shadow:0 0 12px currentColor, 0 0 4px #fff inset;}
.cosmos-chip .lbl{display:flex;flex-direction:column;line-height:1.15;text-align:left;}
.cosmos-chip .lbl b{font-size:14px;font-weight:700;letter-spacing:-0.01em;}
.cosmos-chip .lbl i{font-size:11px;font-style:normal;color:#c4ccde;letter-spacing:.02em;}
.cosmos-hint{
  position:absolute; left:50%; bottom:calc(20px + var(--safe-b)); transform:translateX(-50%);
  pointer-events:none; padding:9px 17px; border-radius:18px; font-size:12.5px;
  color:var(--ink); letter-spacing:.02em; white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.5); opacity:0; transition:opacity .4s var(--ease);
}
.cosmos-hint.show{opacity:.94;}

/* idle-game overlay sits on the stage when busy */
.game{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
      flex-direction:column;gap:10px;background:rgba(7,8,16,0.4);backdrop-filter:blur(2px);
      z-index:10;/* MINIVERSE HOOK — cover the mv triggers/#warp while busy */}
.game.show{display:flex;}
.game .hint{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);}
#game-canvas{border-radius:16px;border:1px solid var(--line);background:rgba(0,0,0,0.3);
             touch-action:none;}
.game .score{font-variant-numeric:tabular-nums;font-weight:700;font-size:15px;color:var(--accent-2);}

/* ---------- Chat ---------- */
.chat{flex:0 0 auto;max-height:38vh;max-height:38dvh;overflow-y:auto;padding:8px 16px;
      display:flex;flex-direction:column;gap:10px;
      -webkit-overflow-scrolling:touch;mask-image:linear-gradient(transparent,#000 12px);}
.msg{max-width:84%;padding:11px 15px;border-radius:18px;font-size:15px;line-height:1.45;
     animation:pop .35s var(--ease);}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.msg.user{align-self:flex-end;background:linear-gradient(135deg,var(--accent),#3f6fe0);
          border-bottom-right-radius:6px;}
.msg.bot{align-self:flex-start;background:var(--panel-2);border:1px solid var(--line);
         border-bottom-left-radius:6px;}
.msg.bot.thinking{color:var(--dim);font-style:italic;}
.msg.bot.thinking::after{content:"▍";animation:blink 1s steps(2) infinite;}
@keyframes blink{50%{opacity:0}}

/* ---------- Composer (floating glass bar — also reads in the cosmos) ---------- */
.composer{flex:0 0 auto;display:flex;gap:8px;align-items:flex-end;padding:12px 16px 16px;
          position:relative;z-index:8;}
.composer .ta{flex:1;background:var(--glass);border:1px solid var(--glass-border);border-radius:22px;
              -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
              box-shadow:var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.12);
              padding:12px 16px;color:var(--ink);font:inherit;font-size:15px;resize:none;
              max-height:120px;outline:none;transition:border-color .3s;}
.composer .ta::placeholder{color:#aab2c6;}
.composer .ta:focus{border-color:rgba(120,160,255,.6);}
.btn{flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:1px solid var(--glass-border);
     background:var(--glass);color:var(--ink);font-size:19px;cursor:pointer;
     -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
     box-shadow:var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.14);
     display:flex;align-items:center;justify-content:center;transition:all .25s var(--ease);}
.btn:active{transform:scale(.9);}
.btn.send{background:linear-gradient(135deg,var(--accent),var(--accent-3));border:none;
          box-shadow:0 6px 20px rgba(91,140,255,.4);}
.btn.mic.on{background:var(--warn);border:none;animation:micpulse 1.2s infinite;}
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,91,127,.5)}50%{box-shadow:0 0 0 12px rgba(255,91,127,0)}}

/* ---------- Capability tray (iPhone functions) ---------- */
.tray{flex:0 0 auto;display:flex;gap:8px;overflow-x:auto;padding:0 16px 10px;
      -webkit-overflow-scrolling:touch;scrollbar-width:none;}
.tray::-webkit-scrollbar{display:none;}
.cap{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:8px 13px;border-radius:20px;
     background:var(--glass);border:1px solid var(--glass-border);font-size:13px;color:var(--dim);
     -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
     cursor:pointer;white-space:nowrap;transition:all .25s;}
.cap:active{transform:scale(.94);} .cap.ok{color:var(--ok);border-color:rgba(55,224,160,.4);}
.cap .ico{font-size:15px;}

/* settings sheet */
.sheet{position:fixed;inset:0;background:rgba(7,8,16,.7);backdrop-filter:blur(8px);
       display:none;align-items:flex-end;z-index:50;}
.sheet.show{display:flex;animation:fade .3s;}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet .card{background:#0e1320;border:1px solid var(--line);border-radius:24px 24px 0 0;
             width:100%;padding:24px 20px calc(24px + var(--safe-b));}
.sheet h3{margin-bottom:6px;} .sheet p{color:var(--dim);font-size:14px;margin-bottom:16px;}
.sheet input{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:12px;
             padding:12px 14px;color:var(--ink);font:inherit;margin-bottom:12px;outline:none;}
.sheet .row{display:flex;gap:10px;}
.sheet button{flex:1;padding:13px;border-radius:14px;border:none;font:inherit;font-weight:700;
              cursor:pointer;}
.sheet .save{background:linear-gradient(135deg,var(--accent),var(--accent-3));color:#fff;}
.sheet .cancel{background:var(--panel-2);color:var(--ink);}

/* ---------- Inkasso-Planet Schau-Overlay (Auftrag 390; Mobil-Layout 460; Milchglas-Optik 470) ----------
   Layout (460): Fullscreen-Modal, Safe-Area-gepolstert, Canvas als flex:1-Kind mit width:100% ->
   getBoundingClientRect liefert die LAYOUT-Größe statt der Attribut-Breite, womit auch die
   resize()-Verdopplung (640->1280->…) entfällt — rein über CSS, ohne Logik-Eingriff.
   Optik (470): Design-Werte des Dashboards (dashboard-v3 globals.css) übertragen — heller
   "Milchglas-Universum"-Look statt dunkel. Die Dunkel-Tokens (--ink/--dim/--glass*) werden NUR
   im Geltungsbereich .inkasso-overlay neu definiert (CSS-Variablen vererben nur abwärts) ->
   Chat/Cosmos/restliche PWA bleiben unberührt; reine Optik, Layout/Logik/460 unverändert. */
.inkasso-overlay{
  /* Dashboard-Tokens lokal überschreiben — leckt NICHT nach außen (nur Nachkommen erben) */
  --ink:#1e293b; --dim:#64748b;
  --glass:rgba(255,255,255,0.55); --glass-2:rgba(255,255,255,0.72);
  --glass-border:rgba(255,255,255,0.65);
  --glass-shadow:0 8px 30px rgba(40,60,120,.10), inset 0 1px 0 rgba(255,255,255,.6);
  --glass-blur:saturate(155%) blur(16px);
  position:fixed; inset:0; z-index:60; display:flex; flex-direction:column;
  /* heller Universum-Hintergrund (globals.css body): periwinkle -> milk -> sky + sanfte Glows */
  background:
    radial-gradient(1200px 800px at 12% -8%, rgba(52,120,255,.10), transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, rgba(139,92,246,.10), transparent 55%),
    radial-gradient(900px 900px at 50% 120%, rgba(56,189,248,.10), transparent 60%),
    linear-gradient(135deg,#e9eefc 0%,#f5f3fb 45%,#e8f1ff 100%);
  color:var(--ink); font-family:'IBM Plex Sans',Inter,system-ui,sans-serif; overscroll-behavior:contain;
  padding-top:var(--safe-t); padding-bottom:var(--safe-b);
  padding-left:env(safe-area-inset-left,0px); padding-right:env(safe-area-inset-right,0px);}
.inkasso-overlay .ink-head{display:flex;align-items:center;gap:10px;flex:0 0 auto;
  padding:12px 14px;border-bottom:1px solid rgba(148,163,184,.30);}
.inkasso-overlay .ink-title{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto;}
.inkasso-overlay .ink-glyph{font-size:22px;flex:0 0 auto;}
.inkasso-overlay .ink-title b{display:block;font-size:15px;line-height:1.2;
  font-family:'DM Sans',system-ui,sans-serif;letter-spacing:-0.01em;color:var(--ink);}
.inkasso-overlay .ink-title i{display:block;font-style:normal;font-size:11px;color:var(--dim);line-height:1.3;}
.inkasso-overlay .ink-shadow{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.04em;
  white-space:nowrap;color:#b45309;background:rgba(245,158,11,.16);
  border:1px solid rgba(245,158,11,.45);border-radius:999px;padding:4px 8px;}
.inkasso-overlay .ink-close{flex:0 0 auto;width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;
  color:var(--ink);background:var(--glass);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);cursor:pointer;}
.inkasso-overlay .ink-close:active{transform:scale(.92);}
.inkasso-overlay .ink-totals{display:flex;flex-wrap:wrap;gap:8px;flex:0 0 auto;padding:10px 14px;}
.inkasso-overlay .ink-chip{display:flex;flex-direction:column;gap:2px;padding:7px 12px;border-radius:12px;
  background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);}
.inkasso-overlay .ink-chip i{font-style:normal;font-size:10.5px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.03em;}
.inkasso-overlay .ink-chip b{font-size:16px;font-variant-numeric:tabular-nums;color:var(--ink);}
/* Auftrag 591 — Flusssystem-Grundgerüst (statisch): Canvas -> SVG/DOM.
   Becken = DOM mit ECHTEM backdrop-filter-Milchglas (Dashboard-Tokens, NICHT gemalt),
   Kanäle = subtile SVG-Bézier-Pfade (Mittelebene). Keine Animation/Fluss/Füllstände.
   Tiefen-Hierarchie: Becken (z2, groß, echte Zahlen) > Kanäle (z1, subtil) > Stage-bg. */
.inkasso-overlay .ink-flow{flex:1 1 0;min-height:0;width:100%;position:relative;
  overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.inkasso-overlay .ink-stage{position:relative;width:100%;height:760px;}
.inkasso-overlay .ink-channels{position:absolute;inset:0;width:100%;height:100%;
  z-index:1;pointer-events:none;overflow:visible;}
.inkasso-overlay .ink-channels path{fill:none;stroke:rgba(100,116,139,.28);
  stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;}
.inkasso-overlay .ink-channels path.is-fork{stroke:rgba(52,120,255,.24);stroke-dasharray:4 5;}
.inkasso-overlay .ink-channels path.to-side{stroke:rgba(244,63,94,.24);stroke-dasharray:3 5;}

/* Becken: ECHTES Milchglas (backdrop-filter) aus den Dashboard-Tokens, nicht gemalt. */
.inkasso-overlay .ink-basin{position:absolute;transform:translate(-50%,-50%);z-index:2;
  width:clamp(94px,30%,128px);box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  /* Auftrag 594: Radius an die Dashboard-Karten angeglichen (16→14px) → ein
     konsistenter Rundungs-Maßstab über Becken/Chips/Leisten/Schließen-Button. */
  padding:9px 8px 10px;border-radius:14px;text-align:center;
  background:var(--glass);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);
  --accent:#3478ff;}
.inkasso-overlay .ink-basin-head{display:flex;align-items:center;justify-content:center;
  gap:4px;flex-wrap:wrap;line-height:1.1;}
.inkasso-overlay .ink-basin-glyph{font-size:15px;flex:0 0 auto;}
.inkasso-overlay .ink-basin-label{font-size:10.5px;font-weight:600;color:var(--ink);
  letter-spacing:-.01em;}
.inkasso-overlay .ink-basin-count{font-family:'DM Sans',system-ui,sans-serif;font-weight:800;
  font-size:21px;line-height:1.05;color:var(--accent);font-variant-numeric:tabular-nums;}
.inkasso-overlay .ink-basin-sum{font-size:10px;color:var(--dim);font-variant-numeric:tabular-nums;}
/* aktiv (claims>0) hebt sich ab, leer bleibt gedämpft */
.inkasso-overlay .ink-basin.is-active{border-color:var(--accent);}
.inkasso-overlay .ink-basin.is-empty{opacity:.78;}
.inkasso-overlay .ink-basin.is-empty .ink-basin-count{color:#94a3b8;}
/* Rollen im Flusssystem */
.inkasso-overlay .ink-basin.role-source{--accent:#3478ff;}
.inkasso-overlay .ink-basin.role-mouth{--accent:#10b981;width:clamp(104px,34%,140px);}
.inkasso-overlay .ink-basin.role-side{--accent:#f43f5e;width:clamp(86px,26%,116px);}
.inkasso-overlay .ink-basin.role-sink{--accent:#94a3b8;opacity:.72;filter:saturate(.7);}
/* Overflow-Band: reale Zustände ohne Fluss-Platz, ehrlich unter dem Stage */
.inkasso-overlay .ink-overflow{padding:6px 4px 4px;}
.inkasso-overlay .ink-overflow-h{font-size:10.5px;color:var(--dim);text-align:center;
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px;}
.inkasso-overlay .ink-overflow-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.inkasso-overlay .ink-basin-static{position:relative;transform:none;}

/* ============================================================
   Auftrag 592 — Becken-Füllstände + Becken-Leben (GPU, ruhig)
   ------------------------------------------------------------
   Jedes Becken hat eine Wasser-Schicht (.ink-basin-fill) HINTER den Zahlen.
   Der Füllstand ist transform:scaleY(var(--fill)) mit Ursprung unten — GPU-
   getragen, KEIN Per-Frame-Canvas. Die langsame CSS-Transition lässt den Stand
   bei Datenänderung sanft auf den neuen Wert gleiten (alle 6s, nicht per Frame).
   Charaktere stecken in den Rollen: Hauptstrom aktiv/brand, HOLD Stillgewässer
   (ruhig, gedämpft), Erledigt helle Mündung, Niedergeschlagen versickernd. */
.inkasso-overlay .ink-basin{overflow:hidden;}            /* Wasser am Beckenrand clippen */
.inkasso-overlay .ink-basin-fill{
  position:absolute;left:0;right:0;bottom:0;top:0;z-index:0;pointer-events:none;
  transform:scaleY(var(--fill,0));transform-origin:bottom center;
  /* Auftrag 594 (Ruhe): der Pegel gleitet noch langsamer und weicher auf den
     neuen Stand (1600→2200ms), damit Datenwechsel ruhig „atmen" statt zu springen. */
  transition:transform 2200ms cubic-bezier(.22,.61,.36,1);
  /* Wasser: unten tiefer, oben heller (Wasserlinie). Farbe je Rolle (unten).
     Auftrag 594: gedämpfter, seriöser Grundton (kein grelles „Disney-Wasser"). */
  background:linear-gradient(to top, var(--water-deep,rgba(52,120,255,.13)),
                                      var(--water-top,rgba(124,160,224,.26)));}
/* Wasserlinie: feiner heller Saum am oberen Rand des Wassers (594: dezenter). */
.inkasso-overlay .ink-basin-fill::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(to bottom, rgba(255,255,255,.5), transparent);opacity:.5;}
/* Zahlen/Glyphen über dem Wasser halten. */
.inkasso-overlay .ink-basin-head,
.inkasso-overlay .ink-basin-count,
.inkasso-overlay .ink-basin-sum{position:relative;z-index:1;}

/* --- Charaktere der Becken (B+C-Metapher) --- */
/* Auftrag 594: alle Wassertöne gedämpft/seriös abgestimmt — der Charakter (Brand/
   ruhig/Mündung/Versickern) bleibt klar unterscheidbar, aber nichts leuchtet grell. */
/* Hauptstrom + Quelle: aktiv, brand-Ton (gedämpft). */
.inkasso-overlay .ink-basin.role-source .ink-basin-fill,
.inkasso-overlay .ink-basin.role-mid .ink-basin-fill{
  --water-deep:rgba(52,120,255,.13);--water-top:rgba(124,160,224,.28);}
/* HOLD = Stillgewässer: ruhig, abseits, gedämpft (keine Wasserlinien-Bewegung). */
.inkasso-overlay .ink-basin.role-side .ink-basin-fill{
  --water-deep:rgba(120,130,150,.15);--water-top:rgba(214,128,148,.15);}
.inkasso-overlay .ink-basin.role-side .ink-basin-fill::before{opacity:.28;}
/* Erledigt = helles Mündungsbecken: freundlich, aber gedämpft (kein Mint-Grell). */
.inkasso-overlay .ink-basin.role-mouth .ink-basin-fill{
  --water-deep:rgba(16,150,112,.16);--water-top:rgba(150,210,188,.30);}
/* Niedergeschlagen = Versickern: verblassend, unten transparent (sickert weg). */
.inkasso-overlay .ink-basin.role-sink .ink-basin-fill{
  --water-top:rgba(148,163,184,.22);
  background:linear-gradient(to top, transparent, var(--water-top));}
.inkasso-overlay .ink-basin.role-sink .ink-basin-fill::before{opacity:.22;}
/* leeres Becken: kein Wasser sichtbar (--fill=0 -> scaleY 0), Saum aus. */
.inkasso-overlay .ink-basin.is-empty .ink-basin-fill::before{opacity:0;}

/* --- Becken-Leben: sehr langsame, sanfte Wasserlinie. Nur subtil, nur auf
   aktivem Hauptstrom + Mündung. HOLD (Stillgewässer) und Versickerung bleiben
   bewusst ruhig. Animiert nur die Deckkraft (Compositor, kein Layout). --- */
/* Auftrag 594: noch langsamer (7→9s) und engerer Hub (.5→.7) → kaum merkliches
   Atmen statt eines auffälligen Pulses. Ruhe geht vor Effekt. */
@keyframes ink-waterline{0%,100%{opacity:.5;}50%{opacity:.7;}}
.inkasso-overlay .ink-basin.is-active.role-source .ink-basin-fill::before,
.inkasso-overlay .ink-basin.is-active.role-mid .ink-basin-fill::before,
.inkasso-overlay .ink-basin.is-active.role-mouth .ink-basin-fill::before{
  animation:ink-waterline 9s ease-in-out infinite;}
/* ============================================================
   Auftrag 593 — Partikelfluss bei ECHTEN Zustandswechseln (Block 4)
   ------------------------------------------------------------
   Partikel strömen NUR, wenn der Block-1-Diff eine echte Netto-Bewegung zeigt
   (Claims angekommen/abgeflossen). GPU-getragen: SVG <animateMotion> entlang der
   Kanal-Pfade (deklarativ, Compositor) — KEIN Per-Frame-Canvas/clearRect. Zwischen
   den 6s-Refreshes ist es STILL (ruhiger See, nur beim Ereignis kräuselt es). Die
   DECKELUNG (max 12 Partikel/Kanal) sitzt im JS (planParticleFlow). Die Partikel-
   Ebene liegt über den Kanälen, aber UNTER den Becken (z2) — Tropfen fließen unter
   den Milchglas-Becken durch. preserveAspectRatio=none teilt die Geometrie 1:1 mit
   den Kanälen; die Tropfen erscheinen dadurch leicht vertikal gestreckt (Wasser-
   tropfen-Anmutung) — bewusst, im Tausch gegen exakte Pfad-Deckung. */
.inkasso-overlay .ink-particles{position:absolute;inset:0;width:100%;height:100%;
  z-index:1;pointer-events:none;overflow:visible;}
/* Auftrag 594: matte, ruhige Tropfen statt leuchtender Punkte — der glühende
   drop-shadow ("Disney-Wasser") ist raus, die Füllung gedämpft. Die Tropfen
   tragen Bedeutung (Zielrolle-Farbe), sollen aber nicht funkeln. */
.inkasso-overlay .ink-particle{
  fill:rgba(92,138,212,.72);filter:none;}
/* Färbung nach Zielbecken (wohin der Tropfen fließt) — gedämpft, ohne Glühen */
.inkasso-overlay .ink-particle.to-mouth{fill:rgba(22,150,114,.74);filter:none;}   /* Erledigt = Mündung */
.inkasso-overlay .ink-particle.to-side{fill:rgba(208,108,130,.72);filter:none;}   /* HOLD = Seitenbecken */
.inkasso-overlay .ink-particle.to-sink{fill:rgba(148,163,184,.66);filter:none;}   /* Niedergeschlagen */

.inkasso-overlay .ink-foot{display:flex;flex-direction:column;gap:8px;flex:0 0 auto;padding:10px 14px;}
.inkasso-overlay .ink-shadowbar{font-size:12px;border-radius:12px;padding:9px 12px;
  background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);}
.inkasso-overlay .ink-shadowbar.ok{border-color:rgba(16,185,129,.50);}
.inkasso-overlay .ink-shadowbar.warn{border-color:rgba(244,63,94,.55);}
.inkasso-overlay .ink-shadowbar b{color:var(--ink);}
.inkasso-overlay .ink-ticker{font-size:12px;border-radius:12px;padding:9px 12px;
  background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);
  display:flex;flex-wrap:wrap;gap:6px 12px;max-height:84px;overflow-y:auto;
  -webkit-overflow-scrolling:touch;}
.inkasso-overlay .ink-ev{display:inline-flex;gap:5px;align-items:baseline;}
.inkasso-overlay .ink-ev b{color:var(--ink);}
.inkasso-overlay .ink-ev i{font-style:normal;color:var(--dim);font-size:11px;}
.inkasso-overlay .ink-ev.hold b{color:#e11d48;}
.inkasso-overlay .ink-dim{color:var(--dim);}
.inkasso-overlay .ink-effs{flex-basis:100%;margin-top:4px;font-size:11px;}
.inkasso-overlay .ink-readonly{flex:0 0 auto;font-size:10.5px;color:var(--dim);text-align:center;
  padding:6px 14px 10px;}

/* ============================================================
   Auftrag 890 — Becken anklickbar + Erklär-Panel (WAS/WIE/WOMIT/WO)
   ============================================================ */
/* Klick-Affordance: Becken sind interaktiv (Erklärung öffnen). */
.inkasso-overlay .ink-basin{cursor:pointer;}
.inkasso-overlay .ink-basin:hover{filter:brightness(1.04);}
.inkasso-overlay .ink-basin:active{transform:translate(-50%,-50%) scale(.97);}
.inkasso-overlay .ink-basin-static:active{transform:scale(.97);}

/* Hintergrund-Abdeckung: dimmt die Schau leicht ab, fängt Klick-außerhalb. */
.inkasso-overlay .ink-panel-back{position:absolute;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(40,55,100,.16);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}

/* Das Panel selbst — Milchglas aus den lokalen inkasso-overlay-Tokens (glass).
   max-height + scrollbarer Body → langer Text passt mobil in den Viewport. */
.inkasso-overlay .ink-panel{width:min(440px,100%);max-height:min(82vh,640px);
  display:flex;flex-direction:column;border-radius:18px;overflow:hidden;
  background:var(--glass-2);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);color:var(--ink);}
.inkasso-overlay .ink-panel-head{display:flex;align-items:center;gap:10px;flex:0 0 auto;
  padding:14px 14px 12px;border-bottom:1px solid rgba(148,163,184,.28);}
.inkasso-overlay .ink-panel-glyph{font-size:22px;flex:0 0 auto;}
.inkasso-overlay .ink-panel-title{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto;}
.inkasso-overlay .ink-panel-title b{font-size:16px;line-height:1.2;color:var(--ink);}
.inkasso-overlay .ink-panel-title i{font-style:normal;font-size:11px;color:var(--dim);line-height:1.3;}
/* PFLICHT-X: groß (44px) und gut sichtbar, oben rechts — mobil antippbar. */
.inkasso-overlay .ink-panel-close{flex:0 0 auto;width:44px;height:44px;border-radius:12px;
  border:1px solid rgba(148,163,184,.45);background:rgba(255,255,255,.55);color:var(--ink);
  font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.inkasso-overlay .ink-panel-close:hover{background:rgba(255,255,255,.78);}
.inkasso-overlay .ink-panel-close:active{transform:scale(.92);}
.inkasso-overlay .ink-panel-body{flex:1 1 auto;min-height:0;overflow-y:auto;
  -webkit-overflow-scrolling:touch;padding:12px 16px 16px;}
.inkasso-overlay .ink-panel-body section{margin:0 0 12px;}
.inkasso-overlay .ink-panel-body section:last-of-type{margin-bottom:6px;}
.inkasso-overlay .ink-panel-body h4{margin:0 0 3px;font-size:10.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent);}
.inkasso-overlay .ink-panel-body p{margin:0;font-size:13px;line-height:1.45;color:var(--ink);}
.inkasso-overlay .ink-panel-body .ink-panel-path{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;color:var(--dim);word-break:break-word;}
.inkasso-overlay .ink-panel-shadow{margin-top:10px;font-size:11px;font-weight:600;
  padding:8px 10px;border-radius:10px;color:#7c5800;
  background:rgba(245,200,80,.18);border:1px solid rgba(202,138,4,.40);}

@media (max-width:430px){
  .inkasso-overlay .ink-panel-back{padding:10px;align-items:flex-end;}
  .inkasso-overlay .ink-panel{width:100%;max-height:88vh;border-radius:18px 18px 14px 14px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;}
  /* Auftrag 592: Füllstände statisch — kein Gleiten, kein Wasserlinien-Puls. */
  .inkasso-overlay .ink-basin-fill{transition:none!important;}
  .inkasso-overlay .ink-basin-fill::before{animation:none!important;}
  /* Auftrag 593: KEIN Partikelfluss bei reduzierter Bewegung. Das Spawnen wird
     bereits in JS (prefersReducedMotion) übersprungen; dies ist die zweite,
     unabhängige Sicherung, falls doch ein Partikel-Knoten existiert. */
  .inkasso-overlay .ink-particle{display:none!important;}
}