/* ==========================================================================
 nav-rail-tooltip.css — Nav-Rail Hover-Tooltip (Rich-Card)

 Konsument: web/js/ui/nav-rail-tooltip.js (nutzt Popover-SSOT)

 Rich-Card als Hover-Tooltip auf den Rail-Buttons. Ersetzt den frueheren
 minimalen CSS-`::after`-Tooltip aus layout.css. Optisch angelehnt an die
 Persona-Karte (.mention-user-card / .muc-*) — gleiches Vokabular fuer
 Schatten, Border, Animation, damit alle Hover-Karten konsistent wirken.

 Aus web/styles/nav-rail-tooltip.css verschoben in
 die Mirror-Topologie zu web/js/ui/.
 ========================================================================== */

.nav-rail-tooltip-popup.app-popover {
  /* Popover-Default ueberschreiben: groesseres Border-Radius + Shadow,
     damit es zur Persona-Karte passt. */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-tooltip);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 0;
  overflow: hidden;
  /* Tooltip-Layer aus tokens.css — bleibt ueber Drawer/Modal/Toast.
 hardcoded 1500 (Pre-Token-Aera) → var(--z-tooltip). */
  z-index: var(--z-tooltip);
  animation: lod-fade-slide-in var(--duration-quick) var(--ease-out-soft);
  pointer-events: auto;
}

.nrt-card {
  width: 280px;
  max-width: calc(100vw - 80px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3-5);
  font-family: var(--font-sans, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif);
}

.nrt-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nrt-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-lg);
}
.nrt-icon img {
  width: 20px;
  height: 20px;
  /* Modul-Icon in Brand-Farbe (dunkelblau) tinten — gleiche Filter-Recipe
     wie Page-Header-Icons im Light-Theme (siehe layout.css). */
  filter: invert(13%) sepia(15%) saturate(1200%) hue-rotate(190deg) brightness(95%);
}

.nrt-title {
  font-size: 15px;
  font-weight: var(--fw-semibold, 600);
  color: var(--color-text);
  line-height: 1.25;
}

.nrt-description {
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-secondary);
}