/* ═══ ActNow OS · Glas-Rahmen (Ebene `app`, 21.10.2026) ══════════════════════════════════════════
   Seitenleiste, Handy-Leisten, Glocke, Aufgaben-Leiste, Frühstücks-Chip und Hintergrund im
   „Glass Cockpit“-Look. Etappe 2 ersetzt den Rahmen durch Basecoat-Bausteine; bis dahin bekommt
   der bestehende Rahmen hier die neue Optik. */

/* ── Aurora statt bunter Kugeln: dieselben 3 Elemente, ruhig und in Markenfarben ── */
.orb-layer .orb { filter: blur(70px); opacity: .9; }
.orb-layer .orb-1, [data-mood] .orb-layer .orb-1 { background: radial-gradient(circle, var(--aurora-1), transparent 66%); }
.orb-layer .orb-2, [data-mood] .orb-layer .orb-2 { background: radial-gradient(circle, var(--aurora-2), transparent 66%); }
.orb-layer .orb-3, [data-mood] .orb-layer .orb-3 { background: radial-gradient(circle, var(--aurora-4), transparent 66%); }

/* ── Seitenleiste ── */
.sidebar {
  background: var(--sidebar);
  -webkit-backdrop-filter: var(--glass-blur-v);
  backdrop-filter: var(--glass-blur-v);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2);
}
.nav-section-title { color: var(--subtle-foreground); letter-spacing: .08em; }
.nav-link {
  color: var(--muted-foreground);
  border-radius: 12px;
  transition: background-color var(--dur-2) ease, color var(--dur-2) ease, transform var(--dur-1) var(--ease-spring);
}
.nav-link .icon { color: currentColor; }
.nav-link:hover { background: var(--surface-hover); color: var(--foreground); }
.nav-link.active {
  background: var(--selected);
  color: var(--foreground);
  box-shadow: var(--glass-edge);
}
.nav-link.active .icon { color: var(--primary-ink); }
.sidebar-clock { color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.sidebar-user { background: var(--muted); border: 1px solid var(--border); border-radius: 14px; }
.sidebar-user:hover { background: var(--surface-hover); }
.theme-toggle { background: var(--muted); border-color: var(--border); }
.theme-toggle-btn.active { background: var(--card-solid); color: var(--foreground); box-shadow: var(--shadow-1); }

/* ── Handy: untere Navigation und Menü-Knopf ── */
.bottom-nav {
  background: var(--sidebar);
  border-top: 1px solid var(--border);
  -webkit-backdrop-filter: var(--glass-blur-v);
  backdrop-filter: var(--glass-blur-v);
}
.bottom-nav .nav-link.active, .bottom-nav .bn-item.active, .bottom-nav [aria-current="page"] { color: var(--primary-ink); }
.sidebar-toggle {
  background: var(--card);
  border: 1px solid var(--border);
  -webkit-backdrop-filter: var(--glass-blur-v);
  backdrop-filter: var(--glass-blur-v);
  color: var(--foreground);
  border-radius: 14px;
}

/* ── Glocke ── */
.inbox-bell {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--foreground);
  box-shadow: var(--shadow-2);
  transition: transform var(--dur-1) var(--ease-spring), background-color var(--dur-2) ease;
}
.inbox-bell:hover { background: var(--surface-press); }

/* ── Aufgaben-Leiste unten (wird in Etappe 2 zum ＋-Blatt) ── */
.qt-sticky-bar {
  background: var(--popover);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-3);
  -webkit-backdrop-filter: var(--glass-blur-v);
  backdrop-filter: var(--glass-blur-v);
}

/* ── Chat-Knopf (verschwindet in Etappe 3) — ruhiger, in Markenfarbe ── */
#chat-bubble {
  background: var(--card);
  color: var(--primary-ink);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-2);
  -webkit-backdrop-filter: var(--glass-blur-v);
  backdrop-filter: var(--glass-blur-v);
}

/* ── Seitenfach der Glocke ── */
.premium-drawer { background: var(--popover); border-left-color: var(--border); }

/* ── Meldungen (Toasts): Glas-Pille. Computer unten rechts über dem Chat-Knopf, Handy oben.
      Bei offenem Fenster zieht core/modal den Behälter ins Fenster (Browser-Oberebene). ── */
@media (min-width: 821px) { #toast-container { bottom: 92px; } }
@media (max-width: 820px) {
  #toast-container {
    top: calc(env(safe-area-inset-top) + 10px); bottom: auto; left: 12px; right: 12px;
    align-items: center;
  }
  #toast-container .toast { max-width: 100%; }
}
.toast {
  background: var(--popover);
  color: var(--foreground);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  box-shadow: var(--shadow-3);
  -webkit-backdrop-filter: var(--glass-blur-v);
  backdrop-filter: var(--glass-blur-v);
  pointer-events: none;   /* Meldungen haben keine Knöpfe — sie dürfen nie einen Klick abfangen */
}
/* Zeichen statt Emoji: kleiner farbiger Kreis */
.toast-icon {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: 13px; font-weight: 800; line-height: 1;
}
.toast-success .toast-icon { background: var(--success-soft); color: var(--success); }
.toast-error   .toast-icon { background: var(--destructive-soft); color: var(--destructive); }
.toast-info    .toast-icon { background: var(--info-soft); color: var(--info); }
.toast-warning .toast-icon { background: var(--warning-soft); color: var(--warning); }
.toast-success .toast-icon::before { content: '✓'; }
.toast-error   .toast-icon::before { content: '✕'; }
.toast-info    .toast-icon::before { content: 'i'; font-style: italic; font-family: Georgia, serif; }
.toast-warning .toast-icon::before { content: '!'; }

/* Aufklappbare Gruppen in der Seitenleiste (Werkzeuge, Weitere) */
.nav-stack-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  border: 0; background: transparent; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  padding: 2px 8px 3px; color: var(--subtle-foreground);
  border-radius: 8px; transition: color var(--dur-2) ease;
}
.nav-stack-toggle:hover { color: var(--foreground); }
.nav-stack-toggle .icon { transition: transform var(--dur-2) var(--ease-out); }
.nav-stack.open .nav-stack-toggle .icon { transform: rotate(180deg); }
.nav-stack-items[hidden] { display: none; }