/* APPICS — Proaktive Agenten-Karten RYN + NOVA (Konzept B, Winchester-
   Entscheid 10.09. 05:3x: Muster der Yuna-Karte gilt fuer ALLE Agenten;
   Auftrag KIMI-WEB-AGENT-PROAKTIV-RYN-NOVA-20260912, 12.09.).
   Praefix pagent- (Kollisions-grep 12.09. = 0 Treffer in css/*.css, js/*.js).
   Spiegel der Yuna-Karten-Optik (css/pro-yuna.css) in der WEB-Palette
   (--mint #a9f3e1 / --brandteal #87D9CF aus css/app.css :root) — Avatar =
   echtes Agenten-Bild aus img/messenger/agents/ (Auftrag Punkt 6), nicht der
   Yuna-Buchstaben-Orb. Keine Emojis, Icons = Lucide-Stil (agent-card.js pic).
   Stempel 0912proaktiv + 0913nachzug (Nachzug 13.09.: is-beside)
   + 0913nachzug2 (Nachzug2 13.09.: is-strip — einzeiliger Strip in freier
   Bande statt Sheet unter dem Kopf; das Sheet deckte auf 390 die Upload-
   Kachel bzw. #aiPrompt). */

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

/* Nachzug 13.09. (POSITION): Karte/Orb im "beside"-Modus (Composer/AI-Lab)
   liegen NEBEN dem Bezugselement (Desktop seitlich, mobil Strip in freier
   Bande) und muessen ueber ALLEN Composer-Chips schweben — der
   Fix-Chip (.fix-chip) hat z-index 1200. Position selbst setzt
   agent-proaktiv.js inline (gemessen am Bezugselement). */
.pagent-card.is-beside { z-index: 1300; }
.pagent-orbbtn.is-beside { z-index: 1300; }

/* Strip-Modus (Nachzug2, mobil/eng): EINE Zeile — Avatar + Kurztext
   (= spoken, per JS gesetzt) + Skip/Yes. Say/Mute/X entfallen im Strip
   (Mute bleibt auf Desktop erreichbar; mobil gilt Skip = 24 h Ruhe).
   Die Hoehe bleibt <= ~38 px, damit die freien Banden zwischen Kacheln,
   Choose category und Eingabefeld reichen. */
.pagent-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, ein translate koennte transient ins Feld ragen */
.pagent-card.is-compact.is-strip .pagent-card-top { display: contents; }
.pagent-card.is-compact.is-strip .pagent-av { width: 24px; height: 24px; border-width: 1px; box-shadow: none; }
.pagent-card.is-compact.is-strip .pagent-card-id { display: contents; }
.pagent-card.is-compact.is-strip .pagent-card-id b { font-size: .6875rem; }
.pagent-card.is-compact.is-strip .pagent-card-id span { display: none; }
.pagent-card.is-compact.is-strip .pagent-x { display: none; }
.pagent-card.is-compact.is-strip .pagent-text { flex: 1; min-width: 0; margin: 0; font-size: .75rem; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pagent-card.is-compact.is-strip .pagent-row { flex-shrink: 0; gap: 6px; }
.pagent-card.is-compact.is-strip .pagent-ic, .pagent-card.is-compact.is-strip .pagent-sp { display: none; }
.pagent-card.is-compact.is-strip .pagent-btn { min-height: 26px; padding: 0 10px; font-size: .75rem; }

/* Kompakt-Basis (mobil/eng): kleinere Innenabstaende — traegt den Strip. */
.pagent-card.is-compact { padding: 10px 12px 10px; }
.pagent-card.is-compact .pagent-av { width: 34px; height: 34px; }
.pagent-card.is-compact .pagent-card-top { margin-bottom: 6px; }
.pagent-card.is-compact .pagent-text { margin-bottom: 8px; font-size: .8125rem; }

/* Schwebende Karte unten rechts ODER links — der Code (agent-proaktiv.js,
   gemeinsame pickSide aus agent-card.js) waehlt per data-pagent-anchor am
   Bezugselement die Seite mit Platz; Karte steht nie UEBER dem Ziel. */
/* 1026clab9 (Sandro 08.10., Foto 1791461661): Karten-Spacing neu — gleichmaessiges
   Padding 18/18/16, Top-Zeile -> Text 12, Text -> Knoepfe 14, ruhige 1.5er-Zeile,
   Knoepfe 34 hoch (Pill-Hoehe der App). Dieselben Werte traegt der Concierge-Ping
   (.ag-ping) in css/app.css. Stempel-Union in live-ui-source.test.js fortgeschrieben. */
.pagent-card { position: fixed; right: 24px; bottom: 24px; z-index: 380; width: min(400px, calc(100vw - 48px));
  padding: 18px 18px 16px; border: 1px solid rgb(169 243 225 / 32%); border-radius: 16px;
  background: rgb(20 20 30 / 94%); 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(169 243 225 / 10%);
  opacity: 0; transform: translateY(10px) scale(.97);
  transition: opacity 200ms ease, transform 200ms ease; /* Konzept B: Pop-in 200 ms */
  color: var(--ink, #eef0f6); font-family: var(--font, 'Outfit', system-ui, sans-serif); }
.pagent-card.is-in { opacity: 1; transform: none; }
.pagent-card.is-left { right: auto; left: 24px; }

.pagent-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pagent-card-id { display: grid; line-height: 1.25; min-width: 0; }
.pagent-card-id b { font-size: .8125rem; letter-spacing: .12em; color: var(--mint, #a9f3e1); }
.pagent-card-id span { font-size: .6875rem; color: var(--muted, #8e92b2); }
.pagent-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(--muted, #8e92b2); cursor: pointer; flex-shrink: 0; }
.pagent-x:hover { background: rgb(255 255 255 / 8%); color: var(--ink, #eef0f6); }
.pagent-x svg { width: 14px; height: 14px; }

/* Echter Agenten-Avatar (img/messenger/agents/), Mint-Ring wie der Yuna-Orb. */
.pagent-av { display: inline-block; width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; border: 2px solid var(--mint, #a9f3e1);
  box-shadow: 0 0 14px rgb(169 243 225 / 40%); background: var(--panel-2, #232537); }

.pagent-text { margin: 0 0 14px; font-size: .875rem; line-height: 1.5; color: var(--ink, #eef0f6); }

.pagent-row { display: flex; align-items: center; gap: 8px; }
.pagent-sp { flex: 1; }
.pagent-ic { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: 1px solid var(--line, rgb(255 255 255 / 7%)); border-radius: 8px; background: transparent;
  color: var(--muted, #8e92b2); cursor: pointer; }
.pagent-ic:hover { color: var(--mint, #a9f3e1); border-color: var(--mint, #a9f3e1); }
.pagent-ic.is-muted { color: var(--mint, #a9f3e1); border-color: var(--mint, #a9f3e1);
  background: rgb(169 243 225 / 10%); }
.pagent-ic svg { width: 15px; height: 15px; }
.pagent-btn { min-height: 34px; padding: 0 16px; border-radius: 8px; font-size: .8125rem; font-weight: 700;
  cursor: pointer; border: 1px solid transparent; font-family: inherit; }
.pagent-btn-skip { background: transparent; color: var(--muted, #8e92b2); border-color: var(--line, rgb(255 255 255 / 12%)); }
.pagent-btn-skip:hover { color: var(--ink, #eef0f6); }
.pagent-btn-yes { background: var(--mint, #a9f3e1); color: #14141e; }
.pagent-btn-yes:hover { filter: brightness(1.06); }

/* Zurueckgezogener Zustand: nur der Avatar-Orb schwebt (Klick = Karte wieder). */
.pagent-orbbtn { position: fixed; right: 24px; bottom: 24px; z-index: 380; padding: 0; border: 0;
  background: transparent; cursor: pointer; }
.pagent-orbbtn.is-left { right: auto; left: 24px; }
.pagent-orbbtn .pagent-av { transition: transform 200ms ease; }
.pagent-orbbtn:hover .pagent-av { transform: scale(1.08); }

/* Mobil: Karte = Bottom-Sheet ueber der Bottom-Nav (84px-Zone), volle Breite.
   is-left greift nur auf Desktop. */
@media (max-width: 640px) {
  .pagent-card, .pagent-card.is-left { right: 12px; left: 12px; bottom: 92px; width: auto; }
  .pagent-orbbtn, .pagent-orbbtn.is-left { right: 16px; left: auto; bottom: 96px; }
}