@layer components {
  .elevate-toast {
    /* Reset popover user-agent defaults so position modifiers can anchor the host correctly */
    @apply fixed z-[99999] w-full max-w-[380px] px-4 sm:px-0 py-0 pointer-events-none transition-all duration-300 ease-in-out inset-auto m-0 h-auto bg-transparent border-0 overflow-visible;
  }
  /* Placement */
  .elevate-toast--position--top-left {
    @apply left-0 top-0 mt-4 ml-4 sm:mt-6 sm:ml-6;
  }
  .elevate-toast--position--top-center {
    @apply left-1/2 -translate-x-1/2 top-0 mt-4 sm:mt-6;
  }
  .elevate-toast--position--top-right {
    @apply right-0 top-0 mt-4 mr-4 sm:mt-6 sm:mr-6;
  }
  .elevate-toast--position--bottom-left {
    @apply left-0 bottom-0 mb-4 ml-4 sm:ml-6 sm:mb-6;
  }
  .elevate-toast--position--bottom-center {
    @apply left-1/2 -translate-x-1/2 bottom-0 mb-4 sm:mb-6;
  }
  .elevate-toast--position--bottom-right {
    @apply right-0 bottom-0 mb-4 mr-4 sm:mr-6 sm:mb-6;
  }
}
/* Toast Notifications */
.toast-item {
  /* Position + visual state are driven by CSS custom properties set by data-attribute rules below.
     The transition list mirrors Sonner: separate timings for transform/opacity/scale/top/bottom and a faster height tween. */
  @apply absolute w-full left-0 select-none z-[var(--toast-z-index,100)] top-[var(--toast-top,auto)] bottom-[var(--toast-bottom,auto)] [transform:var(--toast-transform,translateY(0))] [scale:var(--toast-scale,100%)] opacity-[var(--toast-opacity,1)] [transition:transform_400ms_ease,opacity_400ms_ease,scale_400ms_ease,top_400ms_ease,bottom_400ms_ease,height_200ms_ease];
}
/* Initial hidden state for enter animation */
.toast-item[data-mounted="false"] {
  @apply opacity-0;
}
.toast-item[data-mounted="false"][data-position*="bottom"] {
  @apply [transform:translateY(100%)];
}
.toast-item[data-mounted="false"][data-position*="top"] {
  @apply [transform:translateY(-100%)];
}
/* Removed state for exit animation */
.toast-item[data-removed="true"] {
  @apply opacity-0 [scale:95%] pointer-events-none;
}
/* In stacked mode, removed toasts should slide away */
.toast-item[data-removed="true"][data-expanded="false"][data-position*="bottom"] {
  @apply [transform:translateY(calc(var(--toast-index)_*_14px_+_5%))];
}
.toast-item[data-removed="true"][data-expanded="false"][data-position*="top"] {
  @apply [transform:translateY(calc(-1_*_(var(--toast-index)_*_14px_+_5%)))];
}
/* Overflow toasts (removed due to limit) slide in opposite direction */
.toast-item[data-removed="true"][data-overflow="true"][data-expanded="false"][data-position*="bottom"] {
  @apply [transform:translateY(calc(-1_*_(var(--toast-index)_*_14px_+_25%)))] [scale:78%];
}
.toast-item[data-removed="true"][data-overflow="true"][data-expanded="false"][data-position*="top"] {
  @apply [transform:translateY(calc(var(--toast-index)_*_14px_+_25%))] [scale:78%];
}
/* Pointer events based on visibility */
.toast-item[data-visible="false"] {
  @apply pointer-events-none;
}
/* Expanded mode styles */
.toast-item[data-expanded="true"] {
  @apply [--toast-scale:100%] h-[var(--initial-height)];
}
.toast-item[data-expanded="true"][data-position*="bottom"] {
  @apply [--toast-top:auto] [--toast-bottom:var(--toast-offset,0px)] [--toast-transform:translateY(0)];
}
.toast-item[data-expanded="true"][data-position*="top"] {
  @apply [--toast-top:var(--toast-offset,0px)] [--toast-bottom:auto] [--toast-transform:translateY(0)];
}
/* Stacked mode styles */
.toast-item[data-expanded="false"][data-front="true"] {
  @apply [--toast-scale:100%] [--toast-opacity:1] h-[var(--initial-height)];
}
.toast-item[data-expanded="false"][data-front="true"][data-position*="bottom"] {
  @apply [--toast-top:auto] [--toast-bottom:0px] [--toast-transform:translateY(0)];
}
.toast-item[data-expanded="false"][data-front="true"][data-position*="top"] {
  @apply [--toast-top:0px] [--toast-bottom:auto] [--toast-transform:translateY(0)];
}
/* Non-front toasts in stack - Sonner approach */
.toast-item[data-expanded="false"]:not([data-front="true"]) {
  @apply h-[var(--front-toast-height)] overflow-hidden [--toast-scale:calc(100%_-_(var(--toast-index)_*_6%))] flex flex-col;
}
.toast-item[data-expanded="false"]:not([data-front="true"])[data-position*="bottom"] {
  /* Content at top, bottom gets cut */
  @apply [--toast-top:auto] [--toast-bottom:0px] [--toast-transform:translateY(calc(-1_*_var(--toast-index)_*_14px))] justify-start;
}
.toast-item[data-expanded="false"]:not([data-front="true"])[data-position*="top"] {
  /* Content at bottom, top gets cut */
  @apply [--toast-top:0px] [--toast-bottom:auto] [--toast-transform:translateY(calc(var(--toast-index)_*_14px))] justify-end;
}
/* Hidden toasts (beyond 3rd) */
.toast-item[data-expanded="false"][data-visible="false"] {
  @apply [--toast-opacity:0] [--toast-scale:82%];
}
.toast-item[data-expanded="false"][data-visible="false"][data-position*="bottom"] {
  @apply [--toast-top:auto] [--toast-bottom:-200px] [--toast-transform:translateY(0)];
}
.toast-item[data-expanded="false"][data-visible="false"][data-position*="top"] {
  @apply [--toast-top:-200px] [--toast-bottom:auto] [--toast-transform:translateY(0)];
}
/* Toast content card */
.elevate-toast--content {
  @apply relative w-full bg-white p-3 sm:max-w-[380px] border border-[var(--color-secondary-200,rgba(72,72,72,0.20))] rounded-[14px] shadow-[0_16px_40px_-12px_rgba(56,56,56,0.20),0_2px_6px_rgba(56,56,56,0.05)] [transition:all_200ms_cubic-bezier(0.4,0,0.2,1)] overflow-hidden;
}
.elevate-toast--content--rich {
  @apply p-0;
}
/* Layout row: plate + text + close.
   Default to items-center so plate, title, and close align perfectly when there is no description.
   When a description is present (no .toast-no-description class), switch to items-start and offset
   the text column / close button so they line up with the 32px plate's vertical center. */
.elevate-toast--row {
  @apply flex items-center gap-3;
}
.toast-item:not(.toast-no-description) .elevate-toast--row {
  @apply items-start;
}
.toast-item:not(.toast-no-description) .elevate-toast--text {
  @apply pt-[7px];
}
.toast-item:not(.toast-no-description) .elevate-toast--close {
  @apply mt-[5px];
}
/* Icon plate (32x32 status-tinted square) */
.elevate-toast--plate {
  @apply flex items-center justify-center flex-shrink-0 w-8 h-8 rounded-lg;
}
.elevate-toast--plate-icon {
  @apply w-[18px] h-[18px];
}
.elevate-toast--plate--default,
.elevate-toast--plate--loading {
  @apply bg-tertiary-50 text-secondary-700;
}
.elevate-toast--plate--success {
  @apply bg-success-50 text-success-800;
}
.elevate-toast--plate--error,
.elevate-toast--plate--danger {
  @apply bg-danger-50 text-danger-800;
}
.elevate-toast--plate--info {
  @apply bg-info-50 text-info-800;
}
.elevate-toast--plate--warning {
  @apply bg-warning-50 text-warning-800;
}
.elevate-toast--plate--loading svg {
  @apply animate-[elevate-toast-spin_1.1s_linear_infinite];
}
@keyframes elevate-toast-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* Text column */
.elevate-toast--text {
  @apply flex-1 min-w-0;
}
.elevate-toast--title {
  @apply text-sm font-semibold tracking-[-0.01em] leading-[1.35] text-secondary-900 m-0;
}
.elevate-toast--description {
  @apply text-[13px] font-normal leading-[1.45] text-secondary-700 m-0 mt-0.5;
}
/* Close button — vertical alignment is driven by the row container (items-center / items-start + offset). */
.elevate-toast--close {
  @apply flex-shrink-0 cursor-pointer appearance-none bg-transparent border-0 p-1 m-0 text-secondary-500 leading-[0] [transition:color_100ms_ease-in-out] hover:text-secondary-900;
}
.elevate-toast--close-icon {
  @apply w-3.5 h-3.5;
}
/* Floating variant for rich (custom html) toasts where close overlays content */
.elevate-toast--close--floating {
  @apply absolute top-[10px] right-[10px] m-0;
}

import { Controller } from "@hotwired/stimulus";
import { generateUUID } from "../shared/uuid";
// Matches the 400ms transition declared on `.toast-item` in toast.css for both
// the entry (mount) and exit (remove) animations.
const MOUNT_TRANSITION_MS = 400;
// Per-host state lives at module scope so it survives the disconnect/connect
// cycle Stimulus runs when Turbo's permanent-element swap detaches and
// re-inserts the host. Indexed by host id so multiple hosts (rare) don't
// share a queue.
const hostStates = new Map();
function getHostState (hostId) {
  if (!hostStates.has(hostId)) {
    hostStates.set(hostId, {
      toasts: [],
      heights: [],
      autoDismissTimers: {},
      removeTimeouts: new Map(),
      timersPaused: false,
    });
  }
  return hostStates.get(hostId);
}
export default class extends Controller {
  static targets = ["container", "livePolite", "liveAssertive"];
  static values = {
    position: { type: String, default: "top-center" },
    layout: { type: String, default: "default" }, // "default" (stacked) or "expanded" (all visible)
    gap: { type: Number, default: 14 }, // Gap between toasts in expanded mode
    autoDismissDuration: { type: Number, default: 4000 },
    limit: { type: Number, default: 3 }, // Maximum number of visible toasts
  };
  static POSITION_VALUES = [
    "top-left",
    "top-center",
    "top-right",
    "bottom-left",
    "bottom-center",
    "bottom-right",
  ];
  static TOAST_TYPES = [
    "default",
    "success",
    "error",
    "info",
    "warning",
    "danger",
    "loading",
  ];
  static ASSERTIVE_TYPES = new Set(["error", "warning", "danger"]);
  connect () {
    this.hostId = this.element.id || "default";
    this.state = getHostState(this.hostId);
    this.bindStateAccessors();
    this.expanded = this.layoutValue === "expanded";
    this.interacting = false;
    this.isPrimaryController = false;
    this.defaultMountParent = this.element?.parentNode || null;
    this.defaultMountNextSibling = this.element?.nextSibling || null;
    this.hoverZonePadding = 10;
    this._templates = this.collectTemplates();
    this.registerController();
    this.activatePrimaryIfNeeded();
  }
  // Map `this.toasts`, `this.heights`, `this.autoDismissTimers`,
  // `this.removeTimeouts`, `this.timersPaused` to the shared state object so
  // every other method keeps working unchanged while the data persists across
  // controller disconnect/reconnect.
  bindStateAccessors () {
    const state = this.state;
    Object.defineProperties(this, {
      toasts: { get () { return state.toasts; }, set (v) { state.toasts = v; }, configurable: true },
      heights: { get () { return state.heights; }, set (v) { state.heights = v; }, configurable: true },
      autoDismissTimers: { get () { return state.autoDismissTimers; }, set (v) { state.autoDismissTimers = v; }, configurable: true },
      removeTimeouts: { get () { return state.removeTimeouts; }, set (v) { state.removeTimeouts = v; }, configurable: true },
      timersPaused: { get () { return state.timersPaused; }, set (v) { state.timersPaused = v; }, configurable: true },
    });
  }
  collectTemplates () {
    const map = {};
    for (const type of this.constructor.TOAST_TYPES) {
      map[type] = this.element.querySelector(
        `template[data-toast-template][data-toast-type="${type}"]`,
      );
    }
    map.rich = this.element.querySelector("template[data-toast-template-rich]");
    return map;
  }
  updatePositionClasses () {
    const host = this.element;
    if (!host) return;
    for (const value of this.constructor.POSITION_VALUES) {
      host.classList.toggle(`elevate-toast--position--${value}`, value === this.positionValue);
    }
  }
  disconnect () {
    // Stop receiving primary-only events FIRST so no in-flight toast-show
    // can land on a half-torn-down DOM (Turbo navigations can fire mid-disconnect).
    const wasPrimary = this.isPrimaryController;
    if (wasPrimary) {
      this.removePrimaryListeners();
      if (window.toast === this.boundShowToast) {
        delete window.toast;
      }
      if (window.__toastPrimaryController === this) {
        window.__toastPrimaryController = null;
      }
    }
    // NOTE: don't clear toasts or auto-dismiss timers here. The host element
    // is `data-turbo-permanent`, but Turbo still detaches/re-inserts it during
    // navigation, which Stimulus surfaces as disconnect→connect. Persisted
    // state and pending setTimeouts are intentionally left alive so that
    // active toasts survive the swap.
    this.unregisterController();
    this.isPrimaryController = false;
    if (wasPrimary) this.promoteNextPrimaryController();
  }
  showToast (message, options = {}) {
    const detail = {
      type: options.type || "default",
      message: message,
      description: options.description || "",
      position: options.position || window.currentToastPosition || this.positionValue, // Use stored position
      html: options.html || "",
      dangerouslyAllowHtml: options.dangerouslyAllowHtml === true,
    };
    window.dispatchEvent(new CustomEvent("toast-show", { detail }));
  }
  handleToastShow (event) {
    if (!this.isPrimaryController) return;
    event.stopPropagation();
    this.ensureGlobalHostVisible();
    // Update container position if a position is specified for this toast
    if (event.detail.position) {
      this.positionValue = event.detail.position;
      window.currentToastPosition = event.detail.position; // Store globally
      this.updatePositionClasses();
    }
    const toast = {
      id: `toast-${generateUUID()}`,
      mounted: false,
      removed: false,
      message: event.detail.message,
      description: event.detail.description,
      type: event.detail.type,
      html: event.detail.html,
      dangerouslyAllowHtml: event.detail.dangerouslyAllowHtml === true,
    };
    // Add toast at the beginning of the array (newest first)
    this.toasts.unshift(toast);
    // Enforce toast limit synchronously to prevent race conditions
    const activeToasts = this.activeToasts;
    if (activeToasts.length > this.limitValue) {
      const oldestActiveToast = activeToasts[activeToasts.length - 1];
      if (oldestActiveToast && !oldestActiveToast.removed) {
        this.removeToast(oldestActiveToast.id, true);
      }
    }
    this.renderToast(toast);
  }
  handleLayoutChange (event) {
    if (!this.isPrimaryController) return;
    this.layoutValue = event.detail.layout;
    this.expanded = this.layoutValue === "expanded";
    this.updateAllToasts();
  }
  clearAllToasts () {
    // Remove all toast elements from DOM
    const container = this.containerTarget;
    if (container) {
      while (container.firstChild) {
        container.removeChild(container.firstChild);
      }
    }
    // Clear arrays
    this.toasts = [];
    this.heights = [];
    if (this.layoutValue === "default") {
      this.expanded = false;
    }
    this.clearAllAutoDismissTimers();
    if (this.removeTimeouts) {
      for (const timeoutId of this.removeTimeouts.values()) {
        clearTimeout(timeoutId);
      }
      this.removeTimeouts.clear();
    }
    this.hideGlobalHostIfIdle();
  }
  get activeToasts () {
    return this.toasts.filter((t) => !t.removed);
  }
  renderToast (toast) {
    // Three-phase mount, scheduled across two animation frames + one timeout:
    //   Frame 1 — element is now in DOM with data-mounted="false"; measure its
    //             natural height via getBoundingClientRect for layout math.
    //   Frame 2 — flip data-mounted="true" so the CSS transition defined in
    //             toast.css (400ms) animates from the off-screen state to visible.
    //   +400ms — once the entry animation has completed, arm the auto-dismiss
    //             timer. This makes the user-configured autoDismissDuration
    //             measure *visible* time, not total lifetime, so even a 1ms
    //             value yields a perceivable toast (fade-in → 1ms → fade-out)
    //             instead of being swallowed by the entry animation.
    this.ensureGlobalHostVisible();
    const container = this.containerTarget;
    const li = this.createToastElement(toast);
    container.insertBefore(li, container.firstChild);
    this.announceToLiveRegion(toast);
    requestAnimationFrame(() => {
      const toastEl = document.getElementById(toast.id);
      if (toastEl) {
        const height = toastEl.getBoundingClientRect().height;
        this.heights.unshift({
          toastId: toast.id,
          height: height,
        });
        const activeToasts = this.activeToasts;
        requestAnimationFrame(() => {
          toast.mounted = true;
          toastEl.dataset.mounted = "true";
          this.updateAllToasts();
          const activeToastIndex = activeToasts.findIndex((t) => t.id === toast.id);
          if (activeToastIndex < this.limitValue) {
            setTimeout(() => this.scheduleAutoDismiss(toast.id), MOUNT_TRANSITION_MS);
          }
        });
      }
    });
  }
  announceToLiveRegion (toast) {
    const isAssertive = this.constructor.ASSERTIVE_TYPES.has(toast.type);
    const target = isAssertive
      ? (this.hasLiveAssertiveTarget ? this.liveAssertiveTarget : null)
      : (this.hasLivePoliteTarget ? this.livePoliteTarget : null);
    if (!target) return;
    const text = this.extractAnnouncement(toast);
    if (!text) return;
    target.textContent = "";
    requestAnimationFrame(() => { target.textContent = text; });
  }
  extractAnnouncement (toast) {
    if (toast.message) {
      return toast.description ? `${toast.message}. ${toast.description}` : toast.message;
    }
    if (toast.html) {
      if (!toast.dangerouslyAllowHtml) {
        return toast.html.trim();
      }
      const parsed = new DOMParser().parseFromString(toast.html, "text/html");
      return (parsed.body.textContent || "").trim();
    }
    return "";
  }
  scheduleAutoDismiss (toastId) {
    this.clearAutoDismiss(toastId);
    this.autoDismissTimers[toastId] = {
      remainingMs: this.autoDismissDurationValue,
      startedAt: null,
      timeoutId: null,
    };
    if (!this.timersPaused) {
      this.startAutoDismissTimer(toastId);
    }
  }
  startAutoDismissTimer (toastId) {
    const record = this.autoDismissTimers[toastId];
    if (!record || record.timeoutId !== null) return;
    record.startedAt = Date.now();
    record.timeoutId = setTimeout(() => {
      delete this.autoDismissTimers[toastId];
      this.removeToast(toastId);
    }, record.remainingMs);
  }
  clearAutoDismiss (toastId) {
    const record = this.autoDismissTimers[toastId];
    if (!record) return;
    if (record.timeoutId !== null) clearTimeout(record.timeoutId);
    delete this.autoDismissTimers[toastId];
  }
  clearAllAutoDismissTimers () {
    for (const toastId of Object.keys(this.autoDismissTimers || {})) {
      this.clearAutoDismiss(toastId);
    }
  }
  pauseAllAutoDismiss () {
    if (this.timersPaused) return;
    this.timersPaused = true;
    for (const toastId of Object.keys(this.autoDismissTimers)) {
      const record = this.autoDismissTimers[toastId];
      if (record.timeoutId !== null) {
        clearTimeout(record.timeoutId);
        const elapsed = Date.now() - record.startedAt;
        record.remainingMs = Math.max(0, record.remainingMs - elapsed);
        record.timeoutId = null;
        record.startedAt = null;
      }
    }
  }
  resumeAllAutoDismiss () {
    if (!this.timersPaused) return;
    this.timersPaused = false;
    for (const toastId of Object.keys(this.autoDismissTimers)) {
      this.startAutoDismissTimer(toastId);
    }
  }
  createToastElement (toast) {
    const li = toast.html
      ? this.cloneRichTemplate()
      : this.cloneTypeTemplate(toast.type);
    if (!li) return null;
    li.id = toast.id;
    li.style.pointerEvents = "auto";
    li.dataset.mounted = "false";
    li.dataset.removed = "false";
    li.dataset.position = this.positionValue;
    li.dataset.expanded = this.expanded.toString();
    li.dataset.visible = "true";
    li.dataset.front = "false";
    li.dataset.index = "0";
    if (toast.html) {
      this.fillRichToast(li, toast);
    } else {
      this.fillStandardToast(li, toast);
    }
    this.attachCloseHandler(li, toast);
    return li;
  }
  cloneTypeTemplate (type) {
    const safeType = this.constructor.TOAST_TYPES.includes(type) ? type : "default";
    const template = this._templates[safeType] || this._templates.default;
    const node = template?.content.querySelector("li");
    return node ? node.cloneNode(true) : null;
  }
  cloneRichTemplate () {
    const template = this._templates.rich;
    const node = template?.content.querySelector("li");
    return node ? node.cloneNode(true) : null;
  }
  fillStandardToast (li, toast) {
    const messageEl = li.querySelector('[data-toast-slot="message"]');
    if (messageEl) messageEl.textContent = toast.message;
    if (toast.description) {
      const descEl = li.querySelector('[data-toast-slot="description"]');
      if (descEl) descEl.textContent = toast.description;
    } else {
      li.classList.add("toast-no-description");
      li.querySelector('[data-toast-slot="description"]')?.remove();
    }
  }
  fillRichToast (li, toast) {
    const contentEl = li.querySelector('[data-toast-slot="content"]');
    if (!contentEl) return;
    if (toast.dangerouslyAllowHtml) {
      contentEl.innerHTML = toast.html;
    } else {
      console.warn(
        "[Elevate Toast] `html` option ignored: pass `dangerouslyAllowHtml: true` " +
        "to opt into raw HTML rendering. The string was rendered as text instead."
      );
      contentEl.textContent = toast.html;
    }
  }
  attachCloseHandler (li, toast) {
    const closeBtn = li.querySelector('[data-toast-slot="close"]');
    if (!closeBtn) return;
    closeBtn.dataset.toastId = toast.id;
    closeBtn.addEventListener("click", (e) => {
      e.stopPropagation();
      this.removeToast(toast.id);
    });
  }
  removeToast (id, isOverflow = false) {
    const toast = this.toasts.find((t) => t.id === id);
    if (!toast || toast.removed) return;
    const toastEl = document.getElementById(id);
    if (!toastEl) return;
    // Mark as removed
    toast.removed = true;
    toastEl.dataset.removed = "true";
    // Mark if this is an overflow removal
    if (isOverflow) {
      toastEl.dataset.overflow = "true";
    }
    this.clearAutoDismiss(id);
    // Wait for exit animation to complete. Tracked so disconnect()/clearAllToasts()
    // can cancel it before it touches a torn-down DOM.
    const timeoutId = setTimeout(() => {
      this.removeTimeouts.delete(id);
      this.toasts = this.toasts.filter((t) => t.id !== id);
      this.heights = this.heights.filter((h) => h.toastId !== id);
      if (toastEl.parentNode) {
        toastEl.parentNode.removeChild(toastEl);
      }
      this.updateAllToasts();
      this.hideGlobalHostIfIdle();
      if (this.toasts.length >= this.limitValue) {
        const newlyVisibleToast = this.toasts[this.limitValue - 1];
        if (newlyVisibleToast && !this.autoDismissTimers[newlyVisibleToast.id]) {
          this.scheduleAutoDismiss(newlyVisibleToast.id);
        }
      }
    }, MOUNT_TRANSITION_MS);
    this.removeTimeouts.set(id, timeoutId);
  }
  updateAllToasts () {
    requestAnimationFrame(() => {
      const visibleToasts = this.limitValue;
      // Calculate visual index (excluding removed toasts)
      let visualIndex = 0;
      this.toasts.forEach((toast, index) => {
        const toastEl = document.getElementById(toast.id);
        if (!toastEl) return;
        // Handle overflow toasts (removed due to limit) separately
        if (toast.removed && toastEl.dataset.overflow === "true") {
          // Position as if it's the last visible toast
          toastEl.dataset.index = String(this.limitValue - 1);
          toastEl.dataset.visible = "true";
          toastEl.dataset.expanded = this.expanded.toString();
          toastEl.dataset.position = this.positionValue;
          // Set lowest z-index so it appears behind all active toasts
          toastEl.style.setProperty("--toast-z-index", "0");
          toastEl.style.setProperty("--toast-index", String(this.limitValue - 1));
          return;
        }
        // Skip other removed toasts
        if (toast.removed) return;
        const isVisible = visualIndex < visibleToasts;
        const isFront = visualIndex === 0;
        // Calculate offset (cumulative height of non-removed toasts before this one)
        let offset = 0;
        for (let i = 0; i < index; i++) {
          if (this.toasts[i].removed) continue;
          const heightInfo = this.heights.find((h) => h.toastId === this.toasts[i].id);
          if (heightInfo) {
            offset += heightInfo.height + this.gapValue;
          }
        }
        // Update data attributes - CSS will handle styling
        toastEl.dataset.expanded = this.expanded.toString();
        toastEl.dataset.visible = isVisible.toString();
        toastEl.dataset.front = isFront.toString();
        toastEl.dataset.index = visualIndex.toString();
        toastEl.dataset.position = this.positionValue;
        // Set CSS custom properties for dynamic values
        toastEl.style.setProperty("--toast-z-index", String(100 - visualIndex));
        toastEl.style.setProperty("--toast-offset", `${offset}px`);
        toastEl.style.setProperty("--toast-index", String(visualIndex));
        // Set the initial height of this specific toast
        const heightInfo = this.heights.find((h) => h.toastId === toast.id);
        if (heightInfo) {
          toastEl.style.setProperty("--initial-height", `${heightInfo.height}px`);
        }
        // In stacked mode, set all toasts to front toast height for uniform appearance
        if (!this.expanded) {
          const frontHeight = this.heights[0]?.height || 0;
          toastEl.style.setProperty("--front-toast-height", `${frontHeight}px`);
        } else {
          toastEl.style.removeProperty("--front-toast-height");
        }
        // Increment visual index for next non-removed toast
        visualIndex++;
      });
      // Update container height immediately and after transitions complete
      this.updateContainerHeight();
      setTimeout(() => this.updateContainerHeight(), MOUNT_TRANSITION_MS);
    });
  }
  updateContainerHeight () {
    // Count non-removed toasts
    const activeToasts = this.activeToasts;
    if (activeToasts.length === 0) {
      this.containerTarget.style.height = "0px";
      this.hideGlobalHostIfIdle();
      return;
    }
    if (this.expanded) {
      // In expanded mode, calculate total height of all visible non-removed toasts
      let totalHeight = 0;
      const visibleToasts = Math.min(activeToasts.length, this.limitValue);
      for (let i = 0; i < visibleToasts; i++) {
        const heightInfo = this.heights.find((h) => h.toastId === activeToasts[i].id);
        if (heightInfo) {
          totalHeight += heightInfo.height;
          if (i < visibleToasts - 1) {
            totalHeight += this.gapValue;
          }
        }
      }
      this.containerTarget.style.height = totalHeight + "px";
    } else {
      // In stacked mode, calculate based on front non-removed toast + peek amounts
      const frontToast = activeToasts[0];
      const frontHeight = frontToast ? this.heights.find((h) => h.toastId === frontToast.id)?.height || 0 : 0;
      const peekAmount = 24;
      const visibleCount = Math.min(activeToasts.length, this.limitValue);
      const totalHeight = frontHeight + peekAmount * (visibleCount - 1);
      this.containerTarget.style.height = totalHeight + "px";
    }
  }
  registerController () {
    if (!window.__toastControllers) {
      window.__toastControllers = new Set();
    }
    window.__toastControllers.add(this);
  }
  unregisterController () {
    if (window.__toastControllers) {
      window.__toastControllers.delete(this);
    }
  }
  activatePrimaryIfNeeded () {
    const existingPrimary = window.__toastPrimaryController;
    const existingPrimaryConnected = existingPrimary?.element?.isConnected;
    if (existingPrimary && existingPrimary !== this && existingPrimaryConnected) {
      return;
    }
    this.becomePrimaryController();
  }
  becomePrimaryController () {
    if (this.isPrimaryController) return;
    this.isPrimaryController = true;
    window.__toastPrimaryController = this;
    this.initializePositionState();
    this.updatePositionClasses();
    this.mountToGlobalHost();
    this.applyPointerEventPolicy();
    this.boundShowToast = this.showToast.bind(this);
    window.toast = this.boundShowToast;
    this.boundHandleToastShow = this.handleToastShow.bind(this);
    this.boundHandleLayoutChange = this.handleLayoutChange.bind(this);
    this.boundPointerMove = this.handleGlobalPointerMove.bind(this);
    this.boundPointerLeave = this.handleGlobalPointerLeave.bind(this);
    this.boundHandleDialogStateChange = this.handleDialogStateChange.bind(this);
    this.boundPauseTimers = this.pauseAllAutoDismiss.bind(this);
    this.boundResumeTimers = this.resumeAllAutoDismiss.bind(this);
    this.boundVisibilityChange = () => {
      if (document.visibilityState === "hidden") this.pauseAllAutoDismiss();
      else this.resumeAllAutoDismiss();
    };
    window.addEventListener("toast-show", this.boundHandleToastShow);
    window.addEventListener("set-toasts-layout", this.boundHandleLayoutChange);
    window.addEventListener("pointermove", this.boundPointerMove, { passive: true });
    window.addEventListener("pointerleave", this.boundPointerLeave);
    window.addEventListener("blur", this.boundPointerLeave);
    document.addEventListener("visibilitychange", this.boundVisibilityChange);
    if (this.hasContainerTarget) {
      this.containerTarget.addEventListener("focusin", this.boundPauseTimers);
      this.containerTarget.addEventListener("focusout", this.boundResumeTimers);
    }
    this.startDialogStateObserver();
  }
  removePrimaryListeners () {
    if (this.boundHandleToastShow) {
      window.removeEventListener("toast-show", this.boundHandleToastShow);
    }
    if (this.boundHandleLayoutChange) {
      window.removeEventListener("set-toasts-layout", this.boundHandleLayoutChange);
    }
    if (this.boundPointerMove) {
      window.removeEventListener("pointermove", this.boundPointerMove);
    }
    if (this.boundPointerLeave) {
      window.removeEventListener("pointerleave", this.boundPointerLeave);
      window.removeEventListener("blur", this.boundPointerLeave);
    }
    if (this.boundVisibilityChange) {
      document.removeEventListener("visibilitychange", this.boundVisibilityChange);
    }
    if (this.hasContainerTarget) {
      if (this.boundPauseTimers) {
        this.containerTarget.removeEventListener("focusin", this.boundPauseTimers);
      }
      if (this.boundResumeTimers) {
        this.containerTarget.removeEventListener("focusout", this.boundResumeTimers);
      }
    }
    this.stopDialogStateObserver();
  }
  promoteNextPrimaryController () {
    if (!window.__toastControllers?.size) return;
    const candidates = Array.from(window.__toastControllers).filter(
      (controller) => controller?.element?.isConnected,
    );
    if (candidates.length === 0) return;
    // Preference order:
    // 1) inside an open <dialog> (modal flows: toast must mount above the dialog)
    // 2) most recently connected (latest mounted host = most likely the active view)
    const inOpenDialog = candidates.find((c) => c.element.closest("dialog[open]"));
    const next = inOpenDialog || candidates[candidates.length - 1];
    next.becomePrimaryController();
  }
  initializePositionState () {
    const hostPosition = this.detectHostPosition();
    if (hostPosition) {
      this.positionValue = hostPosition;
    } else if (window.currentToastPosition) {
      this.positionValue = window.currentToastPosition;
    }
    window.currentToastPosition = this.positionValue;
  }
  detectHostPosition () {
    if (!this.element) return null;
    for (const value of this.constructor.POSITION_VALUES) {
      if (this.element.classList.contains(`elevate-toast--position--${value}`)) {
        return value;
      }
    }
    return null;
  }
  mountToGlobalHost () {
    this.globalHost = this.element;
    if (!this.globalHost) return;
    if (typeof this.globalHost.showPopover === "function" && !this.globalHost.hasAttribute("popover")) {
      this.globalHost.setAttribute("popover", "manual");
    }
    const mountRoot = this.preferredMountRoot();
    if (!mountRoot) return;
    if (this.globalHost.parentNode !== mountRoot) {
      if (typeof this.globalHost.hidePopover === "function") {
        try {
          if (this.globalHost.matches(":popover-open")) {
            this.globalHost.hidePopover();
          }
        } catch {
          // Ignore popover state errors before remount.
        }
      }
      if (mountRoot === this.defaultMountParent && this.defaultMountNextSibling?.parentNode === mountRoot) {
        mountRoot.insertBefore(this.globalHost, this.defaultMountNextSibling);
      } else {
        mountRoot.appendChild(this.globalHost);
      }
    }
  }
  preferredMountRoot () {
    const openDialog = this.topmostOpenDialog();
    if (openDialog) return openDialog;
    const parentDialog = this.defaultMountParent instanceof Element ? this.defaultMountParent.closest("dialog") : null;
    if (parentDialog && !parentDialog.open) return document.body;
    if (this.defaultMountParent?.tagName === "DIALOG" && !this.defaultMountParent.open) {
      return document.body;
    }
    return this.defaultMountParent || document.body;
  }
  topmostOpenDialog () {
    const openDialogs = Array.from(document.querySelectorAll("dialog[open]")).filter((dialog) => dialog.isConnected);
    if (openDialogs.length === 0) return null;
    return openDialogs[openDialogs.length - 1];
  }
  applyPointerEventPolicy () {
    // Make the host and container "click-through" so the page below the toast
    // overlay stays interactive. Individual toast <li>s re-enable pointer-events
    // in createToastElement (li.style.pointerEvents = "auto") so close buttons
    // and focus still work. Keep these two policies in sync if you change one.
    if (this.element) {
      this.element.style.pointerEvents = "none";
    }
    if (this.hasContainerTarget) {
      this.containerTarget.style.pointerEvents = "none";
    }
  }
  ensureGlobalHostVisible () {
    this.mountToGlobalHost();
    if (!this.globalHost || typeof this.globalHost.showPopover !== "function") return;
    try {
      if (this.globalHost.matches(":popover-open")) {
        this.globalHost.hidePopover();
      }
    } catch {
      // Ignore popover close errors.
    }
    try {
      this.globalHost.showPopover();
    } catch {
      // No-op: keep standard DOM rendering when Popover API isn't available.
    }
  }
  hideGlobalHostIfIdle () {
    if (!this.globalHost || typeof this.globalHost.hidePopover !== "function") return;
    const hasActiveToasts = this.activeToasts.length > 0;
    if (hasActiveToasts) return;
    try {
      if (this.globalHost.matches(":popover-open")) {
        this.globalHost.hidePopover();
      }
    } catch {
      // No-op: host stays visible when popover state isn't available.
    }
  }
  startDialogStateObserver () {
    if (this.dialogStateObserver) return;
    if (!document.body) return;
    this.dialogStateObserver = new MutationObserver(this.boundHandleDialogStateChange);
    this.dialogStateObserver.observe(document.body, {
      subtree: true,
      childList: true,
      attributes: true,
      attributeFilter: ["open"],
    });
  }
  stopDialogStateObserver () {
    if (!this.dialogStateObserver) return;
    this.dialogStateObserver.disconnect();
    this.dialogStateObserver = null;
  }
  handleDialogStateChange () {
    if (!this.isPrimaryController) return;
    this.mountToGlobalHost();
    const hasActiveToasts = this.activeToasts.length > 0;
    if (hasActiveToasts) {
      this.ensureGlobalHostVisible();
    } else {
      this.hideGlobalHostIfIdle();
    }
  }
  setExpandedState (nextExpanded) {
    if (this.layoutValue !== "default") return;
    if (nextExpanded === this.expanded) return;
    if (!nextExpanded && this.interacting) return;
    this.expanded = nextExpanded;
    this.updateAllToasts();
  }
  handleGlobalPointerMove (event) {
    if (!this.isPrimaryController) return;
    if (!this.hasContainerTarget) return;
    // Latch coordinates and resolve once per frame: getBoundingClientRect is
    // a layout read, and pointermove can fire at >100 Hz on modern trackpads.
    this._lastPointer = { x: event.clientX, y: event.clientY };
    if (this._pointerRafScheduled) return;
    this._pointerRafScheduled = true;
    requestAnimationFrame(() => {
      this._pointerRafScheduled = false;
      if (!this.isPrimaryController || !this.hasContainerTarget) return;
      if (this.activeToasts.length === 0) {
        this.setExpandedState(false);
        return;
      }
      const { x, y } = this._lastPointer;
      this.setExpandedState(this.isInHoverZone(x, y));
    });
  }
  handleGlobalPointerLeave () {
    if (!this.isPrimaryController) return;
    this.setExpandedState(false);
  }
  isInHoverZone (clientX, clientY) {
    const rect = this.containerTarget.getBoundingClientRect();
    const pad = this.hoverZonePadding;
    return (
      clientX >= rect.left - pad &&
      clientX <= rect.right + pad &&
      clientY >= rect.top - pad &&
      clientY <= rect.bottom + pad
    );
  }
}