/**
 * Container-based icon interaction system.
 * Lottie playback is driven by lottie-init.js; this file defines layout,
 * pointer routing, and focus-within coordination for interactive containers.
 *
 * @see docs/architecture/interaction-system.md
 */

/* --- Canonical utility classes --- */

.cts-interact {
  /* Interactive shell: hover/focus on this node triggers child icon motion via JS. */
}

/* All Lottie icons defer pointer hit-testing to their parent container. */
.lottie-icon[data-animation] {
  pointer-events: none;
}

.cts-interact-icon,
.interactive-icon,
.nav-icon,
.card-icon {
  pointer-events: none;
}

.cts-interact-icon.lottie-icon,
.interactive-icon.lottie-icon,
.nav-icon.lottie-icon,
.card-icon.lottie-icon {
  /* Icons never steal pointer events from their parent container. */
  pointer-events: none;
}

/* Active interaction state (set by lottie-init.js while container is hovered/focused). */
.is-cts-interacting .cts-interact-icon.lottie-icon,
.is-cts-interacting .interactive-icon.lottie-icon,
.is-cts-interacting .nav-icon.lottie-icon,
.is-cts-interacting .card-icon.lottie-icon {
  /* Playback is JS-driven; class marks coordinated container state for optional styling. */
}

/* --- Semantic aliases (existing platform markup) --- */

.interactive-item:hover .interactive-icon,
.interactive-item:focus-within .interactive-icon,
.interactive-card:hover .card-icon,
.interactive-card:focus-within .card-icon,
.nav-item:hover .nav-icon,
.nav-item:focus-within .nav-icon,
.cts-interact:hover .cts-interact-icon,
.cts-interact:focus-within .cts-interact-icon {
  /* Container hover/focus-within scopes icon reactivity to the full row/card/button. */
}

/* Sidebar */
.app-sidebar__rail-item:hover .lottie-icon,
.app-sidebar__rail-item:focus-visible .lottie-icon,
.app-sidebar__menu-item:hover .lottie-icon,
.app-sidebar__menu-item:focus-visible .lottie-icon,
.app-sidebar__toggle:hover .lottie-icon,
.app-sidebar__toggle:focus-visible .lottie-icon {
  pointer-events: none;
}

/* Topbar & dropdowns */
.app-topbar .nav-link:hover .lottie-icon,
.app-topbar .nav-link:focus-visible .lottie-icon,
.app-topbar .dropdown-item:hover .lottie-icon,
.app-topbar .dropdown-item:focus-visible .lottie-icon,
.dropdown-item:hover .lottie-icon,
.dropdown-item:focus-visible .lottie-icon {
  pointer-events: none;
}

/* Buttons */
.btn:hover .lottie-icon,
.btn:focus-visible .lottie-icon {
  pointer-events: none;
}

/* Feed actions */
.feed-action:hover .lottie-icon,
.feed-action:focus-visible .lottie-icon,
.feed-action:focus-within .lottie-icon {
  pointer-events: none;
}

/* Collaboration & messaging */
.collab-icon-button:hover .lottie-icon,
.collab-icon-button:focus-visible .lottie-icon,
.collab-notification-item:hover .lottie-icon,
.collab-notification-item:focus-visible .lottie-icon,
.chat-widget__icon-button:hover .lottie-icon,
.chat-widget__icon-button:focus-visible .lottie-icon,
.chat-widget__collapsed-main:hover .lottie-icon,
.chat-widget__collapsed-main:focus-visible .lottie-icon,
.chat-widget__conversation-row:hover .lottie-icon,
.chat-widget__conversation-row:focus-visible .lottie-icon {
  pointer-events: none;
}

/* Cards & notification rows */
.card:hover .lottie-icon,
.card:focus-within .lottie-icon,
.admin-upload-notification-card:hover .lottie-icon,
.admin-upload-notification-card:focus-visible .lottie-icon {
  pointer-events: none;
}

/* Marketing landing blocks */
.lp-feature:hover .lottie-icon,
.lp-feature:focus-within .lottie-icon {
  pointer-events: none;
}

/* Opt-out: icon-only trigger for exceptional standalone icons */
[data-cts-interact-icon-only].lottie-icon {
  pointer-events: auto;
}

[data-cts-interact-off] .lottie-icon {
  pointer-events: none;
}

/* Touch / coarse pointer: rely on click/focus; no hover-dependent visual shift */
@media (hover: none), (pointer: coarse) {
  .cts-interact:hover .cts-interact-icon,
  .interactive-item:hover .interactive-icon,
  .interactive-card:hover .card-icon {
    /* Hover styles suppressed; lottie-init.js skips pointerenter on coarse pointers. */
  }
}