/* Sidebar nav */
  .happ-nav:hover {
    background: rgba(0, 0, 0, 0.05);
  }
  :global(.dark) .happ-nav:hover {
    background: rgba(255, 255, 255, 0.06);
  }
  .happ-nav.is-active {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  }

  /* Action-item checkboxes */
  .happ-check .happ-check-mark {
    opacity: 0;
    transition: opacity 0.15s ease;
  }
  .happ-check.is-done .happ-check-mark {
    opacity: 1;
  }
  .happ-check.is-done .happ-check-text {
    color: var(--color-dark-subtle);
    text-decoration: line-through;
  }

  /* Note-switch stagger: re-adding .switch-in replays the entrance */
  [data-h-pane].switch-in .di {
    animation: happ-doc-in 0.4s var(--animation-snappy) both;
    animation-delay: calc(var(--i) * 60ms);
  }
  @keyframes happ-doc-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  /* Teaser toast */
  [data-h-toast].show {
    opacity: 1;
    transform: none;
  }

  /* Live pane armed state: JS hides the pieces, the timeline reveals them. */
  .happ-item {
    transition:
      opacity 0.45s var(--animation-smooth),
      transform 0.45s var(--animation-snappy);
  }
  .happ.is-armed .happ-item:not(.on) {
    opacity: 0;
    transform: translateY(8px);
  }

  /* The floating transcription popup enters like the real panel: fade + lift + scale. */
  .happ-pop {
    transition:
      opacity 0.3s var(--animation-smooth),
      transform 0.3s var(--animation-snappy);
  }
  .happ.is-armed .happ-pop:not(.on) {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  .happ-live-doc {
    transition: opacity 0.4s var(--animation-smooth);
  }
  .happ.is-resetting .happ-live-doc {
    opacity: 0;
  }
  .hw {
    transition: opacity 0.16s linear;
  }
  .happ.is-armed .hw:not(.on) {
    opacity: 0;
  }
  /* Loop reset: fade the feed out, strip classes, fade back in. */
  .happ-scroll {
    transition: opacity 0.4s var(--animation-smooth);
    scrollbar-width: none;
  }
  .happ-scroll::-webkit-scrollbar {
    display: none;
  }
  .happ.is-resetting [data-h-scroll] {
    opacity: 0;
  }
  .happ.is-resetting .happ-item,
  .happ.is-resetting .hw {
    transition: none;
  }

  .happ-recdot {
    animation: happ-pulse 1.4s ease-in-out infinite;
  }
  @keyframes happ-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
  }

  .happ-bar {
    height: 22%;
    animation: happ-wave 1.15s ease-in-out infinite;
    animation-delay: calc(var(--wi) * -0.09s);
    transform-origin: center;
  }
  @keyframes happ-wave {
    0%, 100% { height: 18%; }
    50% { height: var(--wh, 70%); }
  }

  @media (prefers-reduced-motion: reduce) {
    .happ-recdot, .happ-bar { animation: none; }
    .happ-bar { height: var(--wh, 45%); }
    [data-h-pane].switch-in .di { animation: none; }
  }