/* Issue #30: eigene Tokens dieser Datei (Farbe auf Markenflaeche).
   --on-brand ist absichtlich hier definiert, nicht in styles.css: die Datei
   bleibt eigenstaendig und styles.css wird nicht angefasst. */
:root{--on-brand:#fff}

/* ============================================================
   Issue #30 — Dashboard-Feinschliff nach Nutzer-Feedback
   (a) Handlungsbedarf-Zeilen in der Posteingang-Kachel
   (b) Direkt-Join-Knopf in der Kalender-Kachel
   (c) Virtueller Assistent als ein-/ausklappbare Bubble
   (d) Aufgaben-Kachel prominenter
   Aktivitaeten-Feed entfaellt (HTML entfernt).
   ============================================================ */

/* ---------- (a) Posteingang: Handlungsbedarf statt Betreff-Liste ---------- */
.hb-zeile{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;
  border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent);
  transition:background var(--dur-1) ease}
.hb-zeile:last-of-type{border-bottom:none}
.hb-zeile:hover{background:var(--hover)}
.hb-i{width:26px;height:26px;flex:none;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);background:color-mix(in srgb,var(--c,var(--mod)) 12%,transparent);
  color:var(--c,var(--mod))}
.hb-i svg{width:14px;height:14px}
.hb-l{flex:1;min-width:0;font-size:13px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-n{flex:none;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--text2);min-width:20px;text-align:right}
/* Nur wenn es etwas zu tun gibt, wird die Zahl zur Farbe (Farbe als Signal) */
.hb-aktiv .hb-n{color:var(--c,var(--mod))}
.hb-zeile:not(.hb-aktiv){opacity:.62}
.hb-fuss{display:flex;align-items:center;gap:7px;padding:9px 14px;cursor:pointer;
  font-size:12.5px;font-weight:600;color:var(--mail);
  border-top:1px solid var(--border);background:color-mix(in srgb,var(--mail) 4%,transparent)}
.hb-fuss:hover{background:color-mix(in srgb,var(--mail) 9%,transparent)}
.hb-fuss svg:last-child{margin-left:auto}

/* ---------- (b) Kalender: Direkt-Join ---------- */
.ag-join{flex:none;display:inline-flex;align-items:center;gap:5px;align-self:center;
  padding:5px 10px;border-radius:var(--r-sm);font-size:12px;font-weight:600;
  text-decoration:none;color:var(--on-brand,#fff);background:var(--brand-teams);
  border:1px solid transparent;transition:filter var(--dur-1) ease}
.ag-join:hover{filter:brightness(1.12)}
.ag-join:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
/* Ganztägige/kompakte Agenda: Knopf darf nicht umbrechen */
.ag-item{align-items:flex-start}

/* ---------- (c) Virtueller Assistent (Bubble) ---------- */
.va{position:fixed;right:20px;bottom:20px;z-index:var(--z-msgr-pop,950);
  display:flex;flex-direction:column;align-items:flex-end;gap:10px}
/* FALLE (Issue #32, live gemessen): .va-panel{display:flex} weiter unten
   UEBERSCHREIBT die Browser-Regel `[hidden]{display:none}` — das Panel blieb
   mit hidden=true 400px breit und sichtbar, das Minimieren war wirkungslos
   (Nutzer: "geht trotzdem nicht minimieren"). Deshalb explizit abschalten. */
.va-panel[hidden]{display:none !important}
/* FALLE (Issue #32): Die Messenger-Leiste (#msgrSide, 62px) und das
   Talk-Chat-Fenster (#msgrPopups, right:78px/width:280px/z-index:950) belegen
   genau die Ecke rechts unten. Die Bubble lag mit right:82px/bottom:20px
   MITTEN in diesem Streifen (live gemessen: pop 1242-1522 / bottom 891-950,
   va 1466-1518 / 878-930). Loesung: Die Bubble sitzt jetzt OBERHALB der
   Messenger-Popups. Deren Hoehe liefert vaLagePruefen() als --va-popup-h
   (0 wenn nichts offen) -> kein hartkodierter Abstand, kein Ueberlappen. */
body:not(.msgr-collapsed) .va{right:calc(230px + 20px)}
body.msgr-collapsed .va{right:82px}
.va{bottom:calc(20px + var(--va-popup-h, 0px))}
.va{z-index:calc(var(--z-msgr-pop, 950) + 1)}
.va-knopf{width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2,#7a5af8));
  box-shadow:0 6px 20px color-mix(in srgb,var(--accent) 45%,transparent);
  transition:transform var(--dur-2) ease,box-shadow var(--dur-2) ease;position:relative}
.va-knopf:hover{transform:translateY(-2px);
  box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 55%,transparent)}
.va-knopf:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.va-knopf svg{width:23px;height:23px}
.va[data-offen="1"] .va-knopf{background:var(--card);color:var(--text);
  border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.va-punkt{position:absolute;top:9px;right:9px;width:9px;height:9px;border-radius:50%;
  background:var(--danger);border:2px solid var(--card)}

.va-panel{width:min(400px,calc(100vw - 40px));max-height:min(620px,calc(100vh - 120px));
  display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:0 18px 50px rgba(15,20,30,.28);overflow:hidden;
  animation:vaIn var(--dur-3) var(--ease-out)}
@keyframes vaIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.va-h{display:flex;align-items:center;gap:9px;padding:11px 14px;
  border-bottom:1px solid var(--border);flex:none;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,var(--card)),var(--card))}
.va-t{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;
  margin-right:auto;color:var(--accent)}
.va-x{border:none;background:none;color:var(--text2);cursor:pointer;width:26px;height:26px;
  border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center}
.va-x:hover{background:var(--hover);color:var(--text)}
.va-chips{display:flex;gap:6px;flex-wrap:wrap;padding:9px 14px;flex:none;
  border-bottom:1px solid var(--border)}
.va-b{overflow-y:auto;flex:1;min-height:120px;padding:10px 0}
.va-start{padding:12px 14px}
.va-greet{font-size:15px;font-weight:700}
.va-sub{font-size:12.5px;color:var(--text2);margin:3px 0 10px;line-height:1.5}
.va-zeilen{display:flex;flex-direction:column;gap:2px}
.va-zeile{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-sm);
  cursor:pointer;font-size:13px;transition:background var(--dur-1) ease}
.va-zeile:hover{background:var(--hover)}
.va-zeile svg{width:14px;height:14px;flex:none;color:var(--accent);stroke-width:1.8}
.va-zeile span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.va-zeile .va-pfeil{color:var(--text2);width:13px;height:13px}
/* Gitea-Issue #77: „Was steht an?" in der Bubble. Die Zeile ist dichter als
   eine .va-zeile: Symbol + Betreff + Typ + Absender. Farbe bleibt Signal
   (Punkt/Icon in Prioritätsfarbe), keine Vollflächen-Tönung. */
.va-aktion{display:flex;align-items:center;gap:8px;border-left:3px solid var(--prio,var(--border));
  background:color-mix(in srgb,var(--prio,var(--accent)) 5%,transparent);margin:1px 0}
.va-aktion:hover{background:color-mix(in srgb,var(--prio,var(--accent)) 10%,transparent)}
.va-aktion .va-ak-t{flex:1;min-width:0;font-weight:600;color:var(--text)}
.va-aktion .va-ak-l{flex:none;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;color:var(--prio,var(--text2));white-space:nowrap}
.va-aktion .va-ak-v{flex:none;max-width:38%;font-size:11.5px;color:var(--text2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.va-plan-h{display:flex;align-items:center;gap:8px;padding:10px 14px 6px;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text2)}
.va-plan-h svg{width:14px;height:14px;color:var(--accent)}
.va-antwort{padding:4px 14px 10px;font-size:13.5px;line-height:1.6}
.va-antwort-fuss{display:flex;gap:7px;justify-content:flex-end;padding:8px 14px 12px;
  border-top:1px solid var(--border);margin-top:8px}
.va-foot{display:flex;gap:7px;align-items:center;padding:10px 14px;flex:none;
  border-top:1px solid var(--border)}
.va-inp{flex:1;border:1px solid var(--border);background:var(--bg);color:var(--text);
  border-radius:20px;padding:8px 14px;font-size:13px;font-family:inherit;outline:none}
.va-inp:focus{border-color:color-mix(in srgb,var(--accent) 55%,var(--border))}

.va-plan-tabs{display:flex;gap:4px;padding:9px 14px 4px;flex:none;flex-wrap:wrap}
.va-ptab{border:1px solid var(--border);background:var(--card);color:var(--text2);
  border-radius:999px;padding:4px 11px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.va-ptab:hover{background:var(--hover);color:var(--text)}
.va-ptab.on{background:color-mix(in srgb,var(--accent) 14%,var(--card));color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.va-zeile .va-dot{color:var(--accent);opacity:.6}

/* ---------- (e) Tagesueberblick im Hero (Issue #32) ---------- */
.hero-brief{background:var(--card);border:1px solid var(--border);
  border-left:4px solid var(--accent);border-radius:var(--r-md);
  margin:0 0 var(--dichte-gap);overflow:hidden}
.hero-brief[hidden]{display:none !important}
.hb-h{display:flex;align-items:center;gap:9px;padding:9px 14px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 7%,var(--card)),var(--card))}
.hb-t{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;
  letter-spacing:.4px;text-transform:uppercase;color:var(--accent);margin-right:auto}
.hb-t svg{width:14px;height:14px}
.hb-x{border:none;background:none;color:var(--text2);cursor:pointer;width:24px;height:24px;
  border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center}
.hb-x:hover{background:var(--hover);color:var(--text)}
.hb-b{padding:11px 14px;font-size:13.5px;line-height:1.6}
/* Gitea-Issue #81: Kopf der Tageszusammenfassung — Chip-Zeile mit Avataren.
   Farbe je Modul als Signal (nur Icon + Kante), keine Vollflächen-Tönung. */
.hb-b .hb-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 9px;
  padding-bottom:9px;border-bottom:1px solid var(--border)}
.hb-avs{display:inline-flex;align-items:center;margin-right:2px;flex:none}
.hb-av{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.2px;
  border:2px solid var(--card);margin-left:-6px}
.hb-av:first-child{margin-left:0}
.hb-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--cf,var(--accent)) 40%,var(--border));
  background:color-mix(in srgb,var(--cf,var(--accent)) 7%,transparent);
  color:var(--cf,var(--accent));font-family:inherit;font-size:11.5px;font-weight:650;
  cursor:pointer;white-space:nowrap;transition:background var(--dur-2) ease}
.hb-chip:hover{background:color-mix(in srgb,var(--cf,var(--accent)) 14%,transparent)}
.hb-chip svg{flex:none;stroke-width:2}
/* Kompakter („ein wenig kleiner"): der Textkörper bekommt eine Höhengrenze und
   scrollt innen. NICHTS wird gekürzt — die vollständige Zusammenfassung bleibt
   lesbar, die Karte nimmt dem Morgen-Blick aber nicht mehr die ganze Höhe weg. */
.hb-b{max-height:min(46vh,430px);overflow-y:auto;overscroll-behavior:contain}
.hb-b ul{margin:0;padding-left:18px}
.hb-b li{margin:2px 0}
.hb-b p{margin:0 0 6px}
.hb-b p:last-child{margin-bottom:0}
.hb-b strong{font-weight:650}
@media(max-width:640px){.hb-b{font-size:13px;padding:10px 12px}}

/* ---------- (d) Aufgaben-Kachel prominenter ---------- */
/* Die Aufgaben stehen jetzt direkt neben dem Posteingang und tragen den
   Aufgaben-Farbanker, damit sie im Morgen-Blick auffallen (Nutzerwunsch:
   "besser integrierter prominenter darstellen"). */
.hub-card-aufgaben{border-left:4px solid color-mix(in srgb,var(--todo) 75%,var(--border))}
.hub-card-aufgaben .hub-h{background:color-mix(in srgb,var(--todo) 5%,transparent)}

/* Mobile: Bubble als schmale Leiste, Panel fast voll breit */
@media(max-width:640px){
  .va{right:12px;bottom:12px}
  body:not(.msgr-collapsed) .va,body.msgr-collapsed .va{right:12px}
  .va-panel{width:calc(100vw - 24px);max-height:76vh}
  .ag-join span{display:none}
}
@media(prefers-reduced-motion:reduce){
  .va-panel{animation:none}
  .va-knopf:hover{transform:none}
}