@push('styles')
<link rel="stylesheet" href="{{ asset('vendor/report-libs/css/select2.min.css') }}?v={{ @filemtime(public_path('vendor/report-libs/css/select2.min.css')) ?: time() }}">
<link rel="stylesheet" href="{{ asset('vendor/report-libs/css/jquery.dataTables.min.css') }}?v={{ @filemtime(public_path('vendor/report-libs/css/jquery.dataTables.min.css')) ?: time() }}">
<style>
    body.pushv2-modal-open {
        overflow: hidden;
    }

    .pushv2-page {
        --pushv2-bg: #f8fafc;
        --pushv2-card: #ffffff;
        --pushv2-border: #dbe3ef;
        --pushv2-border-strong: #c5d3e6;
        --pushv2-text: #0f172a;
        --pushv2-muted: #64748b;
        --pushv2-primary: #0f172a;
        --pushv2-primary-soft: #eff6ff;
        --pushv2-accent: #2563eb;
        --pushv2-accent-soft: #dbeafe;
        --pushv2-success: #059669;
        --pushv2-success-soft: #d1fae5;
        --pushv2-warning: #d97706;
        --pushv2-warning-soft: #fef3c7;
        --pushv2-danger: #dc2626;
        --pushv2-danger-soft: #fee2e2;
        --pushv2-shadow: 0 18px 38px rgba(15, 23, 42, 0.06);
        background: var(--pushv2-bg);
        min-height: 100vh;
        padding: 0 6px 24px;
    }

    .pushv2-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 16px;
    }

    .pushv2-header-copy {
        display: grid;
        gap: 10px;
    }

    .pushv2-header-summary {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .pushv2-summary-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-radius: 999px;
        border: 1px solid var(--pushv2-border);
        background: rgba(255, 255, 255, 0.92);
        color: var(--pushv2-muted);
        padding: 8px 12px;
        font-size: 12px;
        font-weight: 700;
    }

    .pushv2-title {
        margin: 0;
        color: var(--pushv2-text);
        font-size: 1.6rem;
        font-weight: 800;
        letter-spacing: -0.02em;
    }

    .pushv2-subtitle {
        margin: 4px 0 0;
        color: var(--pushv2-muted);
        font-size: 13px;
        line-height: 1.6;
    }

    .pushv2-header-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .pushv2-app-chip,
    .pushv2-link,
    .pushv2-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 6px;
        padding: 10px 16px;
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .pushv2-app-chip {
        background: var(--pushv2-success-soft);
        color: var(--pushv2-success);
    }

    .pushv2-link,
    .pushv2-button.secondary {
        border: 1px solid var(--pushv2-border);
        background: #fff;
        color: var(--pushv2-text);
    }

    .pushv2-link:hover,
    .pushv2-button.secondary:hover {
        border-color: var(--pushv2-border-strong);
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
        transform: translateY(-1px);
    }

    .pushv2-button {
        border: 1px solid transparent;
        cursor: pointer;
    }

    .pushv2-button:disabled {
        opacity: 0.7;
        cursor: wait;
        transform: none;
        box-shadow: none;
    }

    .pushv2-button.loading {
        position: relative;
    }

    .pushv2-button.loading::before {
        content: '';
        width: 14px;
        height: 14px;
        border-radius: 999px;
        border: 2px solid currentColor;
        border-right-color: transparent;
        display: inline-block;
        animation: pushv2-btn-spin 0.7s linear infinite;
    }

    @keyframes pushv2-btn-spin {
        to {
            transform: rotate(360deg);
        }
    }

    .pushv2-button.primary {
        background: var(--pushv2-primary);
        color: #fff;
    }

    .pushv2-button.primary:hover {
        box-shadow: 0 16px 30px rgba(15, 23, 42, 0.16);
        transform: translateY(-1px);
    }

    .pushv2-button.warning {
        background: var(--pushv2-warning-soft);
        border-color: #fcd34d;
        color: #92400e;
    }

    .pushv2-button.danger {
        background: var(--pushv2-danger-soft);
        border-color: #fecaca;
        color: var(--pushv2-danger);
    }

    .pushv2-status {
        display: none;
        margin-bottom: 14px;
        border-radius: 16px;
        padding: 12px 14px;
        border: 1px solid transparent;
        font-size: 13px;
        font-weight: 600;
    }

    .pushv2-status.success {
        display: block;
        background: #ecfdf5;
        border-color: #a7f3d0;
        color: #047857;
    }

    .pushv2-status.error {
        display: block;
        background: #fef2f2;
        border-color: #fecaca;
        color: #b91c1c;
    }

    .pushv2-status.info {
        display: block;
        background: #eff6ff;
        border-color: #bfdbfe;
        color: #1d4ed8;
    }

    .pushv2-layout {
        display: grid;
        grid-template-columns: 320px minmax(0, 1fr);
        gap: 18px;
    }

    .pushv2-hero {
        background:
            radial-gradient(circle at top right, rgba(37, 99, 235, 0.12), transparent 32%),
            linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.98));
        border: 1px solid var(--pushv2-border);
        border-radius: 28px;
        padding: 22px 24px;
        box-shadow: var(--pushv2-shadow);
        margin-bottom: 18px;
    }

    .pushv2-hero-top {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        align-items: flex-start;
    }

    .pushv2-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-radius: 999px;
        background: var(--pushv2-primary-soft);
        color: var(--pushv2-accent);
        padding: 7px 12px;
        font-size: 12px;
        font-weight: 800;
        margin-bottom: 12px;
    }

    .pushv2-hero-metrics {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin-top: 18px;
    }

    .pushv2-hero-metric {
        border: 1px solid rgba(197, 211, 230, 0.9);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.9);
        padding: 16px;
    }

    .pushv2-hero-metric-label {
        color: var(--pushv2-muted);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .pushv2-hero-metric-value {
        margin-top: 8px;
        color: var(--pushv2-text);
        font-size: 24px;
        font-weight: 800;
        line-height: 1;
    }

    .pushv2-sidebar,
    .pushv2-main {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .pushv2-card {
        background: var(--pushv2-card);
        border: 1px solid var(--pushv2-border);
        border-radius: 22px;
        box-shadow: var(--pushv2-shadow);
    }

    .pushv2-card-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        padding: 20px 22px 0;
    }

    .pushv2-card-title {
        margin: 0;
        color: var(--pushv2-text);
        font-size: 18px;
        font-weight: 800;
    }

    .pushv2-card-copy {
        margin: 6px 0 0;
        color: var(--pushv2-muted);
        font-size: 13px;
        line-height: 1.6;
    }

    .pushv2-card-body {
        padding: 20px 22px 22px;
    }

    .pushv2-card-actions {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
    }

    .pushv2-type-grid {
        display: grid;
        gap: 12px;
    }

    .pushv2-type-card {
        width: 100%;
        border: 1px solid var(--pushv2-border);
        border-radius: 22px;
        padding: 16px;
        background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
        text-align: left;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .pushv2-type-card:hover {
        border-color: #bfd1ea;
        transform: translateY(-1px);
        box-shadow: 0 18px 24px rgba(15, 23, 42, 0.08);
    }

    .pushv2-type-card.active {
        border-color: #93c5fd;
        background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
        box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
    }

    .pushv2-type-top {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: center;
        margin-bottom: 10px;
    }

    .pushv2-type-icon {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #e0ecff;
        color: #1d4ed8;
        font-size: 18px;
        font-weight: 800;
    }

    .pushv2-type-badge {
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        padding: 4px 10px;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .pushv2-type-badge.push {
        background: #dbeafe;
        color: #1d4ed8;
    }

    .pushv2-type-badge.inapp {
        background: #ede9fe;
        color: #6d28d9;
    }

    .pushv2-type-badge.drawer {
        background: #ffedd5;
        color: #c2410c;
    }

    .pushv2-type-title {
        color: var(--pushv2-text);
        font-size: 15px;
        font-weight: 800;
    }

    .pushv2-type-copy {
        margin-top: 4px;
        color: var(--pushv2-muted);
        font-size: 12px;
        line-height: 1.6;
    }

    .pushv2-checklist {
        display: grid;
        gap: 12px;
    }

    .pushv2-check-item {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 12px;
        align-items: flex-start;
        border: 1px solid var(--pushv2-border);
        border-radius: 18px;
        background: #fff;
        padding: 14px;
    }

    .pushv2-check-index {
        width: 34px;
        height: 34px;
        border-radius: 999px;
        background: #d1fae5;
        color: #047857;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 800;
    }

    .pushv2-check-title {
        color: var(--pushv2-text);
        font-size: 14px;
        font-weight: 800;
    }

    .pushv2-check-copy {
        margin-top: 4px;
        color: var(--pushv2-muted);
        font-size: 12px;
        line-height: 1.55;
    }

    .pushv2-stat-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .pushv2-stat-card {
        border: 1px solid var(--pushv2-border);
        border-radius: 18px;
        padding: 16px;
        background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    }

    .pushv2-stat-label {
        color: var(--pushv2-muted);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .pushv2-stat-value {
        margin-top: 8px;
        color: var(--pushv2-text);
        font-size: 24px;
        font-weight: 800;
        line-height: 1;
    }

    .pushv2-list {
        display: grid;
        gap: 10px;
    }

    .pushv2-list-item {
        width: 100%;
        border: 1px solid var(--pushv2-border);
        border-radius: 18px;
        padding: 14px;
        background: #fff;
        text-align: left;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .pushv2-list-item:hover {
        border-color: #bfd1ea;
        background: #f8fbff;
    }

    .pushv2-list-item.active {
        border-color: #bfdbfe;
        background: #eff6ff;
        box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
    }

    .pushv2-list-title {
        color: var(--pushv2-text);
        font-size: 14px;
        font-weight: 800;
        line-height: 1.5;
    }

    .pushv2-list-copy {
        margin-top: 4px;
        color: var(--pushv2-muted);
        font-size: 12px;
        line-height: 1.6;
    }

    .pushv2-empty {
        border: 1px dashed var(--pushv2-border);
        border-radius: 18px;
        padding: 18px;
        color: var(--pushv2-muted);
        font-size: 13px;
        text-align: center;
    }

    .pushv2-form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .pushv2-context-strip {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
        border: 1px solid var(--pushv2-border);
        border-radius: 20px;
        background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
        padding: 16px 18px;
        margin-bottom: 18px;
    }

    .pushv2-context-copy {
        color: var(--pushv2-muted);
        font-size: 13px;
        line-height: 1.6;
    }

    .pushv2-context-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
    }

    .pushv2-field {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 0;
    }

    .pushv2-field.full {
        grid-column: 1 / -1;
    }

    .pushv2-label {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
        color: var(--pushv2-text);
        font-size: 13px;
        font-weight: 800;
        width: fit-content;
        max-width: 100%;
    }

    .pushv2-hint {
        color: var(--pushv2-muted);
        font-size: 12px;
        font-weight: 600;
    }

    .pushv2-input,
    .pushv2-select,
    .pushv2-textarea {
        width: 100%;
        min-width: 0;
        border: 1px solid var(--pushv2-border-strong);
        border-radius: 10px;
        background: #fff;
        color: var(--pushv2-text);
        padding: 11px 14px;
        font-size: 13px;
        line-height: 1.4;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
        box-sizing: border-box;
    }

    .pushv2-input,
    .pushv2-select {
        min-height: 46px;
    }

    .pushv2-input:focus,
    .pushv2-select:focus,
    .pushv2-textarea:focus {
        outline: none;
        border-color: #60a5fa;
        box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.16);
    }

    .pushv2-select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center;
        background-size: 16px;
        padding-right: 40px;
    }

    .pushv2-input[type="file"] {
        padding: 6px 10px;
        display: flex;
        align-items: center;
    }

    .pushv2-input[type="file"]::file-selector-button {
        margin-right: 10px;
        border: 1px solid var(--pushv2-border-strong);
        border-radius: 8px;
        background: #fff;
        color: var(--pushv2-text);
        padding: 8px 12px;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
    }

    .pushv2-textarea {
        min-height: 128px;
        resize: vertical;
    }

    .pushv2-panel {
        grid-column: 1 / -1;
        border: 1px solid var(--pushv2-border);
        border-radius: 20px;
        background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
        padding: 18px;
    }

    .pushv2-panel-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 14px;
    }

    .pushv2-panel-title {
        margin: 0;
        color: var(--pushv2-text);
        font-size: 15px;
        font-weight: 800;
    }

    .pushv2-panel-copy {
        margin: 4px 0 0;
        color: var(--pushv2-muted);
        font-size: 12px;
        line-height: 1.6;
    }

    .pushv2-inline-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .pushv2-hidden {
        display: none !important;
    }

    .pushv2-icon-btn {
        width: 38px;
        height: 38px;
        border-radius: 999px;
        border: 1px solid var(--pushv2-border-strong);
        background: #fff;
        color: var(--pushv2-text);
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
    }

    .pushv2-icon-btn.hidden-btn {
        visibility: hidden;
    }

    .pushv2-preview {
        display: grid;
        grid-template-columns: 300px minmax(0, 1fr);
        gap: 16px;
        align-items: stretch;
    }

    .pushv2-phone {
        border-radius: 30px;
        background: #0f172a;
        padding: 12px;
        box-shadow: 0 28px 40px rgba(15, 23, 42, 0.18);
    }

    .pushv2-phone-screen {
        border-radius: 22px;
        background: #fff;
        padding: 16px;
        min-height: 250px;
    }

    .pushv2-phone-time {
        text-align: right;
        color: var(--pushv2-muted);
        font-size: 11px;
        margin-bottom: 14px;
    }

    .pushv2-preview-card {
        display: flex;
        gap: 12px;
        border: 1px solid var(--pushv2-border);
        border-radius: 18px;
        background: #f8fafc;
        padding: 12px;
    }

    .pushv2-preview-icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        background: #dbeafe;
        color: #2563eb;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 800;
        flex-shrink: 0;
    }

    .pushv2-preview-icon svg,
    .pushv2-ref-preview-symbol svg,
    .pushv2-ref-drawer-icon svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .pushv2-preview-title {
        color: var(--pushv2-text);
        font-size: 13px;
        font-weight: 800;
        line-height: 1.5;
    }

    .pushv2-preview-body {
        margin-top: 4px;
        color: var(--pushv2-muted);
        font-size: 12px;
        line-height: 1.55;
    }

    .pushv2-preview-meta-grid {
        display: grid;
        gap: 12px;
    }

    .pushv2-meta-card {
        border: 1px solid var(--pushv2-border);
        border-radius: 18px;
        background: #fff;
        padding: 16px;
    }

    .pushv2-meta-label {
        color: var(--pushv2-muted);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .pushv2-meta-value {
        margin-top: 8px;
        color: var(--pushv2-text);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.6;
        word-break: break-word;
    }

    .pushv2-preview-image {
        display: none;
        width: 100%;
        max-height: 170px;
        object-fit: cover;
        border-radius: 16px;
        border: 1px solid var(--pushv2-border);
        margin-top: 14px;
    }

    .pushv2-preview-image.visible {
        display: block;
    }

    .pushv2-priority-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .pushv2-priority-chip {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 1px solid var(--pushv2-border-strong);
        border-radius: 16px;
        background: #fff;
        color: var(--pushv2-text);
        min-height: 48px;
        font-size: 13px;
        font-weight: 800;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .pushv2-priority-chip.active {
        border-color: #60a5fa;
        background: #eff6ff;
        color: #1d4ed8;
        box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
    }

    .pushv2-footer-actions {
        grid-column: 1 / -1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        border-top: 1px solid var(--pushv2-border);
        padding-top: 16px;
    }

    .pushv2-footer-left,
    .pushv2-footer-right {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
    }

    .pushv2-note {
        color: var(--pushv2-muted);
        font-size: 12px;
        line-height: 1.6;
    }

    .pushv2-main-card .select2-container {
        width: 100% !important;
        min-width: 0;
        max-width: 100%;
    }

    .pushv2-main-card .select2-container--default .select2-selection--single,
    .pushv2-main-card .select2-container--default .select2-selection--multiple {
        min-height: 46px;
        border: 1px solid var(--pushv2-border-strong);
        border-radius: 10px;
        background: #fff;
        padding: 6px 14px;
        box-sizing: border-box;
    }

    .pushv2-main-card .select2-container--default.select2-container--focus .select2-selection--single,
    .pushv2-main-card .select2-container--default.select2-container--focus .select2-selection--multiple,
    .pushv2-main-card .select2-container--default.select2-container--open .select2-selection--single,
    .pushv2-main-card .select2-container--default.select2-container--open .select2-selection--multiple {
        border-color: #60a5fa;
        box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.16);
    }

    .pushv2-main-card .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: var(--pushv2-text);
        line-height: 32px;
        padding-left: 0;
        padding-right: 24px;
        font-size: 13px;
    }

    .pushv2-main-card .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 44px;
        right: 10px;
    }

    .pushv2-main-card .select2-container--default .select2-selection--multiple {
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    .pushv2-main-card .select2-container--default .select2-selection--multiple .select2-selection__rendered {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        width: 100%;
        max-width: 100%;
        padding: 0 !important;
        overflow: hidden;
        box-sizing: border-box;
    }

    .pushv2-main-card .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background: #eef2ff;
        border: 1px solid #c7d2fe;
        color: #4338ca;
        border-radius: 999px;
        padding: 3px 8px;
        margin-top: 0;
        margin-right: 0;
        max-width: 100%;
        font-size: 11px;
    }

    .pushv2-main-card .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        color: #6366f1;
        margin-right: 6px;
    }

    .pushv2-main-card .select2-container--default .select2-search--inline {
        display: flex;
        flex: 1 1 120px;
        min-width: 120px;
        max-width: 100%;
        margin-top: 0;
    }

    .pushv2-main-card .select2-container--default .select2-search--inline .select2-search__field {
        width: 100% !important;
        min-width: 0;
        margin-top: 0;
        font-size: 13px;
        line-height: 1.4;
    }

    .pushv2-main-card .select2-dropdown {
        border: 1px solid var(--pushv2-border-strong);
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 18px 32px rgba(15, 23, 42, 0.1);
    }

    .pushv2-main-card .select2-search--dropdown .select2-search__field {
        border: 1px solid var(--pushv2-border-strong);
        border-radius: 8px;
        padding: 8px 10px;
        font-size: 12px;
    }

    .pushv2-main-card .select2-results__option {
        padding: 10px 12px;
        font-size: 12px;
    }

    .pushv2-main-card .select2-results__option--highlighted[aria-selected] {
        background: #2563eb;
        color: #fff;
    }

    .pushv2-ref-shell {
        display: grid;
        gap: 18px;
    }

    .pushv2-ref-topbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 18px;
        padding: 18px 22px;
        border-radius: 22px;
        border: 1px solid var(--pushv2-border);
        background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
        box-shadow: var(--pushv2-shadow);
    }

    .pushv2-ref-topbar-title {
        display: grid;
        gap: 6px;
    }

    .pushv2-ref-topbar-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .pushv2-ref-type-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .pushv2-ref-type-tab {
        border: 1px solid var(--pushv2-border);
        border-radius: 20px;
        background: #fff;
        padding: 18px 16px;
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-items: center;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .pushv2-ref-type-tab:hover {
        border-color: #c7d6eb;
        transform: translateY(-1px);
        box-shadow: 0 18px 28px rgba(15, 23, 42, 0.08);
    }

    .pushv2-ref-type-tab.active {
        border-color: #93c5fd;
        background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
        box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
    }

    .pushv2-ref-type-icon {
        width: 48px;
        height: 48px;
        border-radius: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #dbeafe;
        color: #1d4ed8;
        font-size: 18px;
        font-weight: 800;
    }

    .pushv2-ref-type-heading {
        color: var(--pushv2-text);
        font-size: 15px;
        font-weight: 800;
    }

    .pushv2-ref-type-copy {
        color: var(--pushv2-muted);
        font-size: 12px;
    }

    .pushv2-ref-form-card {
        background: #fff;
        border: 1px solid var(--pushv2-border);
        border-radius: 24px;
        box-shadow: var(--pushv2-shadow);
        padding: 24px;
    }

    .pushv2-ref-form-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        margin-bottom: 18px;
    }

    .pushv2-ref-status-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-radius: 999px;
        background: #e8f5e9;
        color: #2e7d32;
        padding: 8px 14px;
        font-size: 12px;
        font-weight: 800;
        white-space: nowrap;
    }

    .pushv2-ref-status-dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: #34a853;
    }

    .pushv2-ref-support-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 18px;
    }

    .pushv2-ref-support-card {
        border: 1px solid var(--pushv2-border);
        border-radius: 18px;
        padding: 16px;
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    }

    .pushv2-ref-form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 24px;
    }

    .pushv2-ref-target-options {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        margin-top: 8px;
    }

    .pushv2-ref-target-option {
        display: flex;
        align-items: center;
        gap: 10px;
        border: 1px solid var(--pushv2-border);
        border-radius: 16px;
        background: #fff;
        padding: 14px 16px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .pushv2-ref-target-option.active {
        border-color: #93c5fd;
        background: #eff6ff;
    }

    .pushv2-ref-target-option.disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .pushv2-ref-target-option span {
        display: grid;
        gap: 2px;
    }

    .pushv2-ref-target-option small {
        color: var(--pushv2-muted);
        font-size: 11px;
    }

    .pushv2-ref-preview-grid {
        display: grid;
        grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
        gap: 18px;
        align-items: start;
    }

    .pushv2-ref-preview-pane {
        min-height: 330px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pushv2-ref-inapp-preview {
        width: 100%;
        min-height: 330px;
        border-radius: 20px;
        background: #f8fafc;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pushv2-ref-inapp-modal {
        position: relative;
        width: min(100%, 320px);
        border-radius: 18px;
        background: #fff;
        padding: 24px;
        text-align: center;
        box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12);
    }

    .pushv2-ref-close-btn {
        position: absolute;
        top: 10px;
        right: 14px;
        border: none;
        background: none;
        color: var(--pushv2-muted);
        font-size: 20px;
        cursor: default;
    }

    .pushv2-ref-preview-symbol {
        width: 52px;
        height: 52px;
        border-radius: 18px;
        background: #ede9fe;
        color: #6d28d9;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: 800;
        margin: 0 auto 14px;
    }

    .pushv2-ref-preview-title {
        color: var(--pushv2-text);
        font-size: 15px;
        font-weight: 800;
        line-height: 1.5;
    }

    .pushv2-ref-preview-body {
        margin-top: 6px;
        color: var(--pushv2-muted);
        font-size: 13px;
        line-height: 1.6;
    }

    .pushv2-ref-inapp-actions {
        display: flex;
        gap: 10px;
        justify-content: center;
        margin-top: 16px;
    }

    .pushv2-ref-inapp-actions button {
        border: none;
        border-radius: 10px;
        padding: 8px 16px;
        background: #e5e7eb;
        color: var(--pushv2-text);
        font-size: 12px;
        font-weight: 700;
    }

    .pushv2-ref-inapp-actions button.primary {
        background: #6d28d9;
        color: #fff;
    }

    .pushv2-ref-preview-hint {
        margin-top: 12px;
        color: var(--pushv2-muted);
        font-size: 11px;
    }

    .pushv2-ref-drawer-preview {
        width: 100%;
        min-height: 330px;
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid var(--pushv2-border);
        background: #fff;
    }

    .pushv2-ref-drawer-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #1d4ed8;
        color: #fff;
        padding: 16px 18px;
        font-weight: 700;
    }

    .pushv2-ref-drawer-badge {
        width: 22px;
        height: 22px;
        border-radius: 999px;
        background: #dc2626;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 800;
    }

    .pushv2-ref-drawer-body {
        padding: 18px;
    }

    .pushv2-ref-drawer-item {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 12px;
        align-items: start;
        border-bottom: 1px solid #eef2f7;
        padding-bottom: 14px;
    }

    .pushv2-ref-drawer-icon {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        background: #dbeafe;
        color: #1d4ed8;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 800;
    }

    .pushv2-ref-stats-bar {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }

    .pushv2-ref-stat-card {
        border: 1px solid var(--pushv2-border);
        border-radius: 18px;
        background: #fff;
        padding: 16px;
        display: grid;
        gap: 8px;
    }

    .pushv2-ref-stat-value {
        color: var(--pushv2-text);
        font-size: 24px;
        font-weight: 800;
        line-height: 1;
    }

    .pushv2-console-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        align-items: start;
    }

    .pushv2-console-topbar,
    .pushv2-console-tabs-card,
    .pushv2-console-side-panel-card,
    .pushv2-console-type-wrap,
    .pushv2-console-form-card {
        background: #fff;
        border: 1px solid var(--pushv2-border);
        border-radius: 18px;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    }

    .pushv2-console-tabs-card {
        padding: 12px 16px;
    }

    .pushv2-console-tabs {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 0;
    }

    .pushv2-console-nav-item {
        border: 1px solid var(--pushv2-border);
        background: #fff;
        border-radius: 999px;
        color: #5f6368;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        font-size: 12px;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
    }

    .pushv2-console-nav-item:hover {
        background: #f8fbff;
        border-color: #bfd1ea;
        color: var(--pushv2-text);
    }

    .pushv2-console-nav-item.active {
        background: #e8f0fe;
        color: #1a73e8;
        border-color: #93c5fd;
        box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.08);
    }

    .pushv2-console-nav-icon {
        width: 18px;
        height: 18px;
        border-radius: 999px;
        background: #eef2f7;
        color: #374151;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: 800;
        flex-shrink: 0;
    }

    .pushv2-console-nav-item.active .pushv2-console-nav-icon {
        background: #dbeafe;
        color: #1a73e8;
    }

    .pushv2-console-nav-badge {
        margin-left: 2px;
        border-radius: 999px;
        background: #eef1f5;
        color: #6b7280;
        padding: 3px 8px;
        font-size: 10px;
        font-weight: 700;
        white-space: nowrap;
    }

    .pushv2-console-side-panel-card {
        padding: 18px 20px;
    }

    .pushv2-console-side-panel {
        display: grid;
        gap: 12px;
    }

    .pushv2-console-side-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
    }

    .pushv2-console-side-title {
        color: var(--pushv2-text);
        font-size: 13px;
        font-weight: 800;
    }

    .pushv2-console-side-copy {
        margin-top: 6px;
        color: var(--pushv2-muted);
        font-size: 12px;
        line-height: 1.55;
    }

    .pushv2-console-side-stack {
        margin-top: 12px;
        display: grid;
        gap: 10px;
    }

    .pushv2-console-side-cta {
        min-width: 148px;
    }

    .pushv2-data-card {
        width: 100%;
    }

    .pushv2-reports-shell {
        display: grid;
        gap: 12px;
    }

    .pushv2-report-kpis,
    .pushv2-report-panel-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px;
    }

    .pushv2-report-panel-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }

    .pushv2-report-card {
        border: 1px solid var(--pushv2-border);
        border-radius: 18px;
        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        padding: 16px;
        display: grid;
        gap: 12px;
    }

    .pushv2-report-kpi-value {
        color: var(--pushv2-text);
        font-size: 24px;
        line-height: 1;
        font-weight: 800;
    }

    .pushv2-report-kpi-copy,
    .pushv2-report-empty-copy {
        color: var(--pushv2-muted);
        font-size: 12px;
        line-height: 1.6;
    }

    .pushv2-report-section-title {
        color: var(--pushv2-text);
        font-size: 13px;
        font-weight: 800;
    }

    .pushv2-report-summary-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .pushv2-report-summary-item {
        border: 1px solid #e6edf7;
        border-radius: 14px;
        background: #fff;
        padding: 12px;
        display: grid;
        gap: 6px;
    }

    .pushv2-report-summary-label {
        color: var(--pushv2-muted);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .pushv2-report-summary-value {
        color: var(--pushv2-text);
        font-size: 16px;
        font-weight: 800;
        line-height: 1.35;
    }

    .pushv2-report-stack {
        display: grid;
        gap: 10px;
    }

    .pushv2-report-activity-item {
        border: 1px solid #e6edf7;
        border-radius: 14px;
        background: #fff;
        padding: 12px 14px;
        display: grid;
        gap: 8px;
    }

    .pushv2-report-activity-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
    }

    .pushv2-report-activity-title {
        color: var(--pushv2-text);
        font-size: 13px;
        font-weight: 800;
    }

    .pushv2-report-activity-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .pushv2-report-empty {
        border: 1px dashed #cbd5e1;
        border-radius: 18px;
        background: #fbfdff;
        padding: 18px;
        text-align: center;
        display: grid;
        gap: 6px;
    }

    .pushv2-table-container {
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0.5rem 1rem 1rem;
        position: relative;
    }

    .pushv2-data-table {
        width: 100% !important;
        border-collapse: separate;
        border-spacing: 0;
        min-width: 820px;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

    .pushv2-data-table thead {
        background: linear-gradient(to bottom, #fafbfc 0%, #f8fafc 100%);
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .pushv2-data-table thead th {
        padding: 16px 20px;
        text-align: left;
        font-size: 0.875rem;
        font-weight: 700;
        color: #374151;
        border-bottom: 2px solid #e5e7eb;
        border-right: 1px solid #f0f0f0;
        white-space: nowrap;
        background-color: transparent !important;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

    .pushv2-data-table thead th:last-child {
        border-right: none;
    }

    .pushv2-data-table tbody td {
        padding: 16px 20px;
        border-bottom: 1px solid #f3f4f6;
        border-right: 1px solid #f9fafb;
        font-size: 0.875rem;
        color: #374151;
        vertical-align: middle;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

    .pushv2-data-table tbody td:last-child {
        border-right: none;
    }

    #pushv2-campaigns-table tbody td.sorting_1,
    #pushv2-campaigns-table tbody td.sorting_2,
    #pushv2-campaigns-table tbody td.sorting_3,
    #pushv2-segments-table tbody td.sorting_1,
    #pushv2-segments-table tbody td.sorting_2,
    #pushv2-segments-table tbody td.sorting_3 {
        background-color: transparent !important;
    }

    .pushv2-data-table tbody tr {
        transition: background-color 0.15s ease;
    }

    .pushv2-data-table tbody tr:nth-child(even) {
        background-color: #fafbfc;
    }

    .pushv2-data-table tbody tr:nth-child(odd) {
        background-color: #fff;
    }

    .pushv2-data-table tbody tr:hover {
        background-color: #f0f4ff !important;
    }

    .notif-stack {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
    }

    .pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 7px 12px;
        border-radius: 999px;
        font-size: 12px;
        line-height: 1;
        font-weight: 700;
        border: 1px solid transparent;
        white-space: nowrap;
    }

    .pill.segment,
    .pill.device,
    .pill.muted {
        background: #eef2ff;
        color: #4f46e5;
        border-color: #e0e7ff;
    }

    .pill.success {
        background: #ecfdf5;
        color: #047857;
        border-color: #a7f3d0;
    }

    .pill.warning {
        background: #fffbeb;
        color: #b45309;
        border-color: #fde68a;
    }

    .pill.danger {
        background: #fef2f2;
        color: #b91c1c;
        border-color: #fecaca;
    }

    .notif-message-title {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

    .notif-message-title strong {
        color: #0f172a;
        font-size: 14px;
        font-weight: 700;
    }

    .notif-muted {
        color: #64748b;
        font-size: 12px;
    }

    .notif-plain-link {
        border: none;
        padding: 0;
        background: transparent;
        color: #2563eb;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
    }

    .notif-plain-link:hover {
        color: #1d4ed8;
        text-decoration: underline;
    }

    .action-buttons {
        display: flex;
        gap: 6px;
        align-items: center;
    }

    .action-button {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        background-color: #f8fafc;
        color: #6b7280;
        text-decoration: none;
    }

    .action-button .icon {
        width: 18px;
        height: 18px;
        display: block;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
    }

    #pushv2-segments-table .action-button.view {
        color: #64748b;
        background-color: #f1f5f9;
    }

    #pushv2-segments-table .action-button.view:hover {
        background-color: #e2e8f0;
        color: #334155;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(100, 116, 139, 0.2);
    }

    #pushv2-campaigns-table .action-button.view {
        color: #2563eb;
        background-color: #eff6ff;
    }

    #pushv2-campaigns-table .action-button.view:hover {
        background-color: #dbeafe;
        color: #1d4ed8;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(37, 99, 235, 0.18);
    }

    #pushv2-campaigns-table .action-button.delete,
    #pushv2-segments-table .action-button.delete {
        color: #dc2626;
        background-color: #fef2f2;
    }

    #pushv2-campaigns-table .action-button.delete:hover,
    #pushv2-segments-table .action-button.delete:hover {
        background-color: #fee2e2;
        color: #b91c1c;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
    }

    .pushv2-field-error {
        display: none;
        margin-top: 6px;
        color: var(--pushv2-danger);
        font-size: 12px;
        font-weight: 600;
    }

    .pushv2-field-error.visible {
        display: block;
    }

    .pushv2-inline-status {
        min-height: 20px;
        font-size: 12px;
        font-weight: 600;
    }

    .pushv2-inline-status.success {
        color: var(--pushv2-success);
    }

    .pushv2-inline-status.error {
        color: var(--pushv2-danger);
    }

    .pushv2-input.is-invalid,
    .pushv2-select.is-invalid,
    .pushv2-textarea.is-invalid {
        border-color: #fca5a5;
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
    }

    .pushv2-modal {
        position: fixed;
        inset: 0;
        z-index: 1200;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: rgba(15, 23, 42, 0.45);
        backdrop-filter: blur(2px);
    }

    .pushv2-modal.open {
        display: flex;
    }

    .pushv2-modal-card {
        width: min(760px, 100%);
        max-height: calc(100vh - 48px);
        overflow: auto;
        border-radius: 20px;
        background: #fff;
        border: 1px solid var(--pushv2-border);
        box-shadow: 0 24px 50px rgba(15, 23, 42, 0.22);
    }

    .pushv2-modal-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 18px 20px;
        border-bottom: 1px solid #e5e7eb;
    }

    .pushv2-modal-title {
        margin: 0;
        color: var(--pushv2-text);
        font-size: 18px;
        font-weight: 800;
    }

    .pushv2-modal-close {
        width: 36px;
        height: 36px;
        border-radius: 999px;
        border: 1px solid var(--pushv2-border);
        background: #fff;
        color: var(--pushv2-muted);
        font-size: 18px;
        cursor: pointer;
    }

    .pushv2-modal-body {
        display: grid;
        gap: 16px;
        padding: 20px;
    }

    .pushv2-modal-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }

    .pushv2-modal-actions-group {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-left: auto;
    }

    .pushv2-segment-rules {
        display: grid;
        gap: 10px;
    }

    .pushv2-segment-rule-row {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(120px, 0.8fr) minmax(0, 1fr) 44px;
        gap: 10px;
        align-items: center;
    }

    .pushv2-rule-value-slot {
        min-width: 0;
    }

    .pushv2-segment-rule-remove {
        width: 38px;
        height: 38px;
        border-radius: 999px;
        border: 1px solid var(--pushv2-border-strong);
        background: #fff;
        color: var(--pushv2-text);
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
    }

    .pushv2-modal .select2-container {
        width: 100% !important;
        min-width: 0;
    }

    .pushv2-modal .select2-container .select2-selection--single {
        min-height: 42px;
        border: 1px solid var(--pushv2-border-strong);
        border-radius: 10px;
        background: #fff;
    }

    .pushv2-modal .select2-container .select2-selection--single .select2-selection__rendered {
        padding: 10px 38px 10px 12px;
        line-height: 20px;
        color: var(--pushv2-text);
        font-size: 13px;
    }

    .pushv2-modal .select2-container .select2-selection--single .select2-selection__arrow {
        height: 100%;
        right: 8px;
    }

    .pushv2-modal .select2-container .select2-selection--multiple {
        min-height: 42px;
        border: 1px solid var(--pushv2-border-strong);
        border-radius: 10px;
        background: #fff;
        padding: 4px 8px;
        box-sizing: border-box;
    }

    .pushv2-modal .select2-container .select2-selection--multiple .select2-selection__rendered {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 0;
    }

    .pushv2-modal .select2-container .select2-selection--multiple .select2-selection__choice {
        margin: 0;
        border: 1px solid #dbeafe;
        border-radius: 999px;
        background: #eff6ff;
        color: #1d4ed8;
        font-size: 11px;
        font-weight: 700;
        padding: 2px 8px 2px 6px;
    }

    .pushv2-modal .select2-container .select2-selection--multiple .select2-selection__choice__remove {
        color: #1d4ed8;
        margin-right: 6px;
    }

    .pushv2-modal .select2-dropdown {
        border: 1px solid var(--pushv2-border-strong);
        border-radius: 12px;
        box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
        overflow: hidden;
        z-index: 10060 !important;
    }

    .pushv2-modal .select2-dropdown .select2-search--dropdown {
        padding: 10px;
        background: #fff;
    }

    .pushv2-modal .select2-dropdown .select2-search__field {
        border: 1px solid var(--pushv2-border-strong);
        border-radius: 10px;
        padding: 8px 10px;
        font-size: 13px;
        color: var(--pushv2-text);
    }

    .pushv2-modal .select2-dropdown .select2-results__options {
        max-height: 260px;
    }

    .pushv2-modal .select2-dropdown .select2-results__option {
        padding: 10px 12px;
        font-size: 13px;
        color: var(--pushv2-text);
        background: #fff;
    }

    .pushv2-modal .select2-dropdown .select2-results__option--highlighted[aria-selected] {
        background: #2563eb;
        color: #fff;
    }

    .pushv2-modal .select2-dropdown .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
        background: #eff6ff;
        color: #1d4ed8;
    }

    #pushv2-campaigns-table_wrapper .dataTables_length,
    #pushv2-segments-table_wrapper .dataTables_length {
        padding: 0.5rem 1rem 0.75rem 1rem;
        margin-bottom: 0;
    }

    #pushv2-campaigns-table_wrapper .dataTables_length label,
    #pushv2-segments-table_wrapper .dataTables_length label {
        font-weight: 600;
        color: #374151;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    #pushv2-campaigns-table_wrapper .dataTables_length select,
    #pushv2-segments-table_wrapper .dataTables_length select {
        padding: 6px 10px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        margin: 0 8px;
        font-size: 14px;
        background-color: #fff;
        color: #374151;
        cursor: pointer;
    }

    #pushv2-campaigns-table_wrapper .dataTables_filter,
    #pushv2-segments-table_wrapper .dataTables_filter {
        padding: 0.5rem 1rem 0.75rem 1rem;
        margin-bottom: 0;
    }

    #pushv2-campaigns-table_wrapper .dataTables_filter label,
    #pushv2-segments-table_wrapper .dataTables_filter label {
        position: relative;
        font-weight: 600;
        color: #374151;
        font-size: 0;
        display: flex;
        align-items: center;
        gap: 0;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

    #pushv2-campaigns-table_wrapper .dataTables_filter label::before,
    #pushv2-segments-table_wrapper .dataTables_filter label::before {
        content: '';
        position: absolute;
        left: 12px;
        top: 50%;
        width: 16px;
        height: 16px;
        transform: translateY(-50%);
        pointer-events: none;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%236b7280' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E") no-repeat center;
        opacity: 0.75;
    }

    #pushv2-campaigns-table_wrapper .dataTables_filter input,
    #pushv2-segments-table_wrapper .dataTables_filter input {
        margin-left: 0 !important;
        padding: 8px 12px 8px 38px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 0.875rem;
        width: 280px;
        color: #111827;
        font-family: 'Plus Jakarta Sans', sans-serif !important;
    }

    #pushv2-campaigns-table_wrapper .dataTables_filter input:focus,
    #pushv2-segments-table_wrapper .dataTables_filter input:focus {
        outline: none;
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    #pushv2-campaigns-table_wrapper .dataTables_info,
    #pushv2-segments-table_wrapper .dataTables_info {
        padding: 12px 1rem;
        color: #6b7280;
        font-weight: 600;
        font-size: 14px;
    }

    #pushv2-campaigns-table_wrapper .dataTables_paginate,
    #pushv2-segments-table_wrapper .dataTables_paginate {
        margin-top: 0;
        padding: 12px 1rem;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
    }

    #pushv2-campaigns-table_wrapper .dataTables_paginate .paginate_button,
    #pushv2-segments-table_wrapper .dataTables_paginate .paginate_button {
        padding: 6px 12px;
        margin: 0 2px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #fff;
        color: #374151 !important;
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s ease;
        min-width: 36px;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #pushv2-campaigns-table_wrapper .dataTables_paginate .paginate_button.current,
    #pushv2-segments-table_wrapper .dataTables_paginate .paginate_button.current {
        background: #fff !important;
        color: #111827 !important;
        border-color: #d1d5db !important;
        border-width: 2px;
        font-weight: 700;
    }

    #pushv2-campaigns-table_wrapper .dataTables_paginate .paginate_button:hover,
    #pushv2-segments-table_wrapper .dataTables_paginate .paginate_button:hover {
        background: #f9fafb;
        border-color: #d1d5db;
        color: #111827 !important;
    }

    #pushv2-campaigns-table_wrapper .dataTables_paginate .paginate_button.disabled,
    #pushv2-campaigns-table_wrapper .dataTables_paginate .paginate_button.disabled:hover,
    #pushv2-segments-table_wrapper .dataTables_paginate .paginate_button.disabled,
    #pushv2-segments-table_wrapper .dataTables_paginate .paginate_button.disabled:hover {
        opacity: 0.5;
        cursor: not-allowed;
        background: #f9fafb !important;
        color: #9ca3af !important;
    }

    .pushv2-console-main {
        display: grid;
        gap: 18px;
    }

    .pushv2-console-topbar {
        padding: 16px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
    }

    .pushv2-console-topbar-title {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .pushv2-console-topbar-title h1 {
        margin: 0;
        font-size: 18px;
        font-weight: 800;
        color: var(--pushv2-text);
        letter-spacing: -0.02em;
    }

    .pushv2-console-title-icon {
        width: 28px;
        height: 28px;
        border-radius: 10px;
        background: #eff6ff;
        color: #1a73e8;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 800;
    }

    .pushv2-console-title-icon svg,
    .pushv2-console-nav-icon svg,
    .pushv2-console-type-icon svg,
    .pushv2-console-section-icon svg,
    .pushv2-console-target-glyph svg,
    .pushv2-console-topbar-chip svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
    }

    .pushv2-console-topbar-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .pushv2-console-topbar-chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-radius: 999px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        color: #64748b;
        padding: 8px 12px;
        font-size: 12px;
        font-weight: 700;
    }

    .pushv2-console-topbar-chip strong {
        color: var(--pushv2-text);
    }

    .pushv2-console-refresh {
        min-width: 42px;
        padding: 10px 12px;
    }

    .pushv2-console-type-wrap {
        padding: 8px;
    }

    .pushv2-console-type-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .pushv2-console-type-tab {
        width: 100%;
        border: 2px solid transparent;
        border-radius: 14px;
        background: #f8fafc;
        padding: 16px 14px;
        display: grid;
        justify-items: center;
        gap: 4px;
        text-align: center;
        cursor: pointer;
        transition: all 0.22s ease;
    }

    .pushv2-console-type-tab:hover {
        background: #f1f5f9;
        transform: translateY(-1px);
    }

    .pushv2-console-type-tab.active {
        background: #e8f0fe;
        border-color: #3b82f6;
        box-shadow: 0 8px 20px rgba(59, 130, 246, 0.16);
    }

    .pushv2-console-type-icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        background: #dbeafe;
        color: #1d4ed8;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 800;
    }

    .pushv2-console-type-tab[data-format="inapp"] .pushv2-console-type-icon {
        background: #efe7ff;
        color: #7c3aed;
    }

    .pushv2-console-type-tab[data-format="drawer"] .pushv2-console-type-icon {
        background: #ffedd5;
        color: #ea580c;
    }

    .pushv2-console-type-title {
        color: var(--pushv2-text);
        font-size: 14px;
        font-weight: 800;
    }

    .pushv2-console-type-copy {
        color: var(--pushv2-muted);
        font-size: 12px;
        line-height: 1.4;
    }

    .pushv2-console-type-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        padding: 2px 10px;
        font-size: 11px;
        font-weight: 800;
    }

    .pushv2-console-type-badge.push {
        background: #e3f2fd;
        color: #1565c0;
    }

    .pushv2-console-type-badge.inapp {
        background: #f3e8ff;
        color: #9333ea;
    }

    .pushv2-console-type-badge.drawer {
        background: #fff3e0;
        color: #ea580c;
    }

    .pushv2-console-form-card {
        padding: 22px 24px;
    }

    .pushv2-console-form-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 20px;
    }

    .pushv2-console-heading {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .pushv2-console-section-icon {
        width: 24px;
        height: 24px;
        border-radius: 8px;
        background: #e8f0fe;
        color: #1a73e8;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 900;
        flex-shrink: 0;
    }

    .pushv2-console-section-copy {
        margin: 6px 0 0;
        color: var(--pushv2-muted);
        font-size: 12px;
        line-height: 1.55;
    }

    .pushv2-console-form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 22px;
    }

    .pushv2-console-form-grid > *,
    .pushv2-console-media-grid > *,
    .pushv2-console-target,
    #pushv2-segment-field {
        min-width: 0;
    }

    .pushv2-required {
        color: #d93025;
        margin-left: 0;
        line-height: 1;
        flex-shrink: 0;
    }

    .pushv2-console-media-grid {
        display: grid;
        grid-template-columns: minmax(0, 180px) minmax(0, 1fr) minmax(0, 104px);
        gap: 14px;
        align-items: start;
    }

    .pushv2-inline-thumb-preview {
        min-height: 48px;
        border: 1px solid var(--pushv2-border-strong);
        border-radius: 14px;
        background: #f8fafc;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
    }

    .pushv2-inline-thumb-preview img {
        display: none;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .pushv2-inline-thumb-preview.has-image img {
        display: block;
    }

    .pushv2-inline-thumb-preview span {
        color: var(--pushv2-muted);
        font-size: 12px;
        font-weight: 700;
    }

    .pushv2-inline-thumb-preview.has-image span {
        display: none;
    }

    .pushv2-console-settings,
    .pushv2-console-target,
    .pushv2-console-preview {
        grid-column: 1 / -1;
        border: 1px solid #e8edf5;
        border-radius: 14px;
        background: #f8fafc;
        padding: 18px;
    }

    .pushv2-console-settings {
        border-left: 4px solid #7c3aed;
    }

    .pushv2-console-panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 14px;
    }

    .pushv2-console-panel-title {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--pushv2-text);
        font-size: 14px;
        font-weight: 800;
    }

    .pushv2-console-panel-copy {
        margin-top: 4px;
        color: var(--pushv2-muted);
        font-size: 12px;
        line-height: 1.5;
    }

    .pushv2-console-settings-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .pushv2-console-setting-card {
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        background: #fff;
        padding: 14px;
        display: grid;
        gap: 10px;
    }

    .pushv2-console-setting-label {
        color: #5f6368;
        font-size: 12px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .pushv2-console-mini-grid {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 8px;
        align-items: center;
    }

    .pushv2-console-inline-label {
        color: var(--pushv2-muted);
        font-size: 12px;
        font-weight: 600;
    }

    .pushv2-console-checklist {
        display: grid;
        gap: 8px;
        color: var(--pushv2-text);
        font-size: 12px;
    }

    .pushv2-console-checklist label {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .pushv2-console-auto-dismiss {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        align-items: center;
    }

    .pushv2-console-target-options {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .pushv2-console-target-card {
        border: 2px solid transparent;
        border-radius: 12px;
        background: #fff;
        padding: 14px 16px;
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        transition: all 0.2s ease;
        min-width: 0;
    }

    .pushv2-console-target-card.active {
        background: #e8f0fe;
        border-color: #3b82f6;
    }

    .pushv2-console-target-card input {
        margin: 0;
    }

    .pushv2-console-target-title {
        color: var(--pushv2-text);
        font-size: 13px;
        font-weight: 800;
    }

    .pushv2-console-target-meta {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .pushv2-console-target-glyph {
        width: 28px;
        height: 28px;
        border-radius: 999px;
        background: #eef2ff;
        color: #4f46e5;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .pushv2-console-target-card[data-target-mode-card="topic"] .pushv2-console-target-glyph {
        background: #fff1f2;
        color: #e11d48;
    }

    .pushv2-console-target-card[data-target-mode-card="segment"] .pushv2-console-target-glyph {
        background: #eef2ff;
        color: #4f46e5;
    }

    .pushv2-console-target-card[data-target-mode-card="token"] .pushv2-console-target-glyph {
        background: #ecfeff;
        color: #0f766e;
    }

    .pushv2-console-target-copy {
        color: var(--pushv2-muted);
        font-size: 11px;
        line-height: 1.35;
    }

    .pushv2-console-users-chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-radius: 999px;
        background: #f1f5f9;
        color: #64748b;
        padding: 6px 12px;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
    }

    .pushv2-console-audience-fields {
        margin-top: 12px;
        display: grid;
        gap: 12px;
        min-width: 0;
    }

    .pushv2-console-audience-fields > * {
        min-width: 0;
    }

    .pushv2-console-schedule {
        grid-column: 1 / -1;
        display: grid;
        gap: 12px;
    }

    .pushv2-console-radio-row {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }

    .pushv2-console-radio-row label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--pushv2-text);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }

    .pushv2-console-preview {
        border: 1px dashed #d2dbe9;
        background: #fbfcfe;
    }

    .pushv2-console-preview-frame {
        min-height: 330px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 8px 0 0;
    }

    .pushv2-console-stats {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }

    .pushv2-console-stat-card {
        border: 1px solid #e8edf5;
        border-radius: 12px;
        background: #fff;
        padding: 14px 16px;
        display: grid;
        gap: 8px;
    }

    .pushv2-console-stat-card .pushv2-meta-label {
        text-transform: none;
        letter-spacing: 0;
    }

    .pushv2-console-stat-card .pushv2-ref-stat-value {
        font-size: 16px;
    }

    .pushv2-console-stat-card.type .pushv2-ref-stat-value {
        color: #7c3aed;
    }

    .pushv2-console-note {
        grid-column: 1 / -1;
        color: var(--pushv2-muted);
        font-size: 12px;
        line-height: 1.55;
    }

    .pushv2-console-actions {
        grid-column: 1 / -1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        padding-top: 8px;
    }

    .pushv2-console-actions-left,
    .pushv2-console-actions-right {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .pushv2-button.success {
        background: #34a853;
        color: #fff;
    }

    .pushv2-button.success:hover {
        box-shadow: 0 14px 26px rgba(52, 168, 83, 0.22);
        transform: translateY(-1px);
    }

    .pushv2-button.accent {
        background: #fbbc04;
        color: #1f2937;
    }

    .pushv2-button.soft {
        background: #fff;
        color: var(--pushv2-text);
        border: 1px solid var(--pushv2-border);
    }

    .pushv2-button.force-visible {
        display: inline-flex !important;
    }

    .pushv2-button.is-disabled {
        opacity: 0.55;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
    }

    .pushv2-console-hidden-select {
        position: absolute;
        opacity: 0;
        pointer-events: none;
        width: 0;
        height: 0;
    }

    .pushv2-progress-modal .pushv2-modal-card {
        max-width: 960px;
        width: min(960px, calc(100vw - 32px));
    }

    .pushv2-progress-shell {
        display: grid;
        gap: 16px;
    }

    .pushv2-progress-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        padding: 18px;
        border-radius: 18px;
        border: 1px solid #bfdbfe;
        background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
    }

    .pushv2-progress-title {
        margin: 0 0 6px;
        font-size: 22px;
        font-weight: 800;
        color: var(--pushv2-heading);
    }

    .pushv2-progress-copy,
    .pushv2-progress-empty {
        margin: 0;
        font-size: 13px;
        color: var(--pushv2-muted);
    }

    .pushv2-progress-meta {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .pushv2-progress-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        border-radius: 999px;
        background: #fff;
        border: 1px solid var(--pushv2-border);
        font-size: 12px;
        font-weight: 700;
        color: #1e3a8a;
    }

    .pushv2-progress-card,
    .pushv2-progress-issues,
    .pushv2-progress-footer {
        padding: 18px;
        border-radius: 16px;
        border: 1px solid var(--pushv2-border);
        background: #fff;
    }

    .pushv2-progress-bar-row,
    .pushv2-progress-issues-head,
    .pushv2-progress-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }

    .pushv2-progress-footer-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        flex-wrap: wrap;
    }

    .pushv2-progress-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--pushv2-text);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }

    .pushv2-progress-toggle input {
        width: 16px;
        height: 16px;
        accent-color: #2563eb;
    }

    .pushv2-progress-track {
        width: 100%;
        height: 12px;
        border-radius: 999px;
        background: #e5eef9;
        overflow: hidden;
        margin-top: 12px;
    }

    .pushv2-progress-fill {
        height: 100%;
        width: 0;
        border-radius: 999px;
        background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);
        transition: width 0.25s ease;
    }

    .pushv2-progress-batches {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
        gap: 12px;
    }

    .pushv2-progress-batch {
        display: grid;
        gap: 4px;
        padding: 14px;
        border-radius: 14px;
        border: 1px solid var(--pushv2-border);
        background: var(--pushv2-panel);
    }

    .pushv2-progress-batch.is-completed {
        background: #f0fdf4;
        border-color: #bbf7d0;
    }

    .pushv2-progress-batch.is-processing {
        background: #eff6ff;
        border-color: #93c5fd;
    }

    .pushv2-progress-batch.is-failed {
        background: #fef2f2;
        border-color: #fecaca;
    }

    .pushv2-progress-batch-label {
        font-size: 14px;
        font-weight: 700;
        color: var(--pushv2-heading);
    }

    .pushv2-progress-batch-range,
    .pushv2-progress-batch-status {
        font-size: 12px;
        color: var(--pushv2-muted);
    }

    .pushv2-progress-issues-list {
        display: grid;
        gap: 8px;
        margin-top: 12px;
    }

    .pushv2-progress-issue {
        display: grid;
        grid-template-columns: minmax(120px, 180px) 1fr auto;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 12px;
        border: 1px solid #fed7aa;
        background: #fff7ed;
        font-size: 13px;
        color: #7c2d12;
    }

    .pushv2-progress-issue-status {
        font-weight: 700;
        text-transform: capitalize;
    }

    @media (max-width: 1200px) {
        .pushv2-layout,
        .pushv2-preview {
            grid-template-columns: 1fr;
        }

        .pushv2-hero-metrics {
            grid-template-columns: 1fr;
        }

        .pushv2-console-layout,
        .pushv2-ref-preview-grid,
        .pushv2-ref-support-grid,
        .pushv2-ref-stats-bar {
            grid-template-columns: 1fr;
        }

        .pushv2-console-type-tabs,
        .pushv2-console-settings-grid,
        .pushv2-console-stats,
        .pushv2-console-target-options,
        .pushv2-console-media-grid,
        .pushv2-segment-rule-row {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 900px) {
        .pushv2-header {
            flex-direction: column;
            align-items: stretch;
        }

        .pushv2-header-actions,
        .pushv2-link,
        .pushv2-button {
            width: 100%;
        }

        .pushv2-form,
        .pushv2-inline-grid,
        .pushv2-stat-grid,
        .pushv2-priority-grid,
        .pushv2-ref-form-grid,
        .pushv2-ref-target-options,
        .pushv2-ref-type-tabs {
            grid-template-columns: 1fr;
        }

        .pushv2-footer-actions {
            align-items: stretch;
        }

        .pushv2-footer-left,
        .pushv2-footer-right {
            width: 100%;
        }

        .pushv2-hero-top,
        .pushv2-context-strip,
        .pushv2-ref-topbar,
        .pushv2-ref-form-header,
        .pushv2-console-topbar,
        .pushv2-console-form-header,
        .pushv2-console-actions {
            flex-direction: column;
            align-items: stretch;
        }

        .pushv2-console-tabs,
        .pushv2-console-nav-item,
        .pushv2-console-topbar-actions,
        .pushv2-console-actions-left,
        .pushv2-console-actions-right {
            width: 100%;
        }

        .pushv2-progress-head,
        .pushv2-progress-issue,
        .pushv2-report-summary-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
@endpush

<x-filament-panels::page>
    <div class="pushv2-page">
        <div id="pushv2-status" class="pushv2-status"></div>
        <div class="pushv2-console-layout">
            <div class="pushv2-console-main">
                <div class="pushv2-console-topbar">
                    <div class="pushv2-console-topbar-title">
                        <span class="pushv2-console-title-icon" aria-hidden="true">
                            <svg viewBox="0 0 24 24">
                                <path d="M3 11v2"></path>
                                <path d="M6 9v6"></path>
                                <path d="M10 8l7-3v14l-7-3H6a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2h4Z"></path>
                                <path d="M10 16v4a2 2 0 0 0 2 2h1"></path>
                            </svg>
                        </span>
                        <h1>Send Notification</h1>
                    </div>
                    <div class="pushv2-console-topbar-actions">
                        <span id="pushv2-recipient-chip" class="pushv2-console-topbar-chip">
                            <svg viewBox="0 0 24 24" aria-hidden="true">
                                <path d="M16 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2"></path>
                                <circle cx="9.5" cy="7" r="3"></circle>
                                <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
                                <path d="M16 4.13a4 4 0 0 1 0 5.74"></path>
                            </svg>
                            <strong>0</strong> recipients
                        </span>
                        <button type="button" id="pushv2-refresh-btn" class="pushv2-button secondary pushv2-console-refresh">Refresh</button>
                    </div>
                </div>

                <div class="pushv2-console-tabs-card">
                    <nav class="pushv2-console-tabs" aria-label="Push notification v2 sections">
                        <button type="button" class="pushv2-console-nav-item active" data-sidebar-view="notifications">
                            <span class="pushv2-console-nav-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24">
                                    <path d="M15 17h5l-1.4-1.4A2 2 0 0 1 18 14.2V11a6 6 0 1 0-12 0v3.2a2 2 0 0 1-.6 1.4L4 17h5"></path>
                                    <path d="M10 17a2 2 0 0 0 4 0"></path>
                                </svg>
                            </span>
                            <span>Notifications</span>
                            <span class="pushv2-console-nav-badge">New</span>
                        </button>
                        <button type="button" class="pushv2-console-nav-item" data-sidebar-view="campaigns">
                            <span class="pushv2-console-nav-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24">
                                    <rect x="3" y="4" width="18" height="16" rx="2"></rect>
                                    <path d="M3 10h18"></path>
                                    <path d="M9 20V10"></path>
                                </svg>
                            </span>
                            <span>Campaigns</span>
                        </button>
                        <button type="button" class="pushv2-console-nav-item" data-sidebar-view="reports">
                            <span class="pushv2-console-nav-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24">
                                    <path d="M4 19h16"></path>
                                    <path d="M7 16V9"></path>
                                    <path d="M12 16V5"></path>
                                    <path d="M17 16v-4"></path>
                                </svg>
                            </span>
                            <span>Reports</span>
                        </button>
                        <button type="button" class="pushv2-console-nav-item" data-sidebar-view="segments">
                            <span class="pushv2-console-nav-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24">
                                    <path d="M18 21v-2a4 4 0 0 0-3-3.87"></path>
                                    <path d="M14 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
                                    <circle cx="8" cy="7" r="3"></circle>
                                    <path d="M18 11a3 3 0 1 0 0-6"></path>
                                </svg>
                            </span>
                            <span>Segments</span>
                        </button>
                        <button type="button" class="pushv2-console-nav-item" data-sidebar-view="settings">
                            <span class="pushv2-console-nav-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24">
                                    <circle cx="12" cy="12" r="3"></circle>
                                    <path d="M19.4 15a1.7 1.7 0 0 0 .34 1.87l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6 1.7 1.7 0 0 1-2 0 1.7 1.7 0 0 0-1-.6 1.7 1.7 0 0 0-1.87.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-.6-1 1.7 1.7 0 0 1 0-2 1.7 1.7 0 0 0 .6-1 1.7 1.7 0 0 0-.34-1.87l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-.6 1.7 1.7 0 0 1 2 0 1.7 1.7 0 0 0 1 .6 1.7 1.7 0 0 0 1.87-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.7 1.7 0 0 0 19.4 9c0 .37.14.73.4 1a1.7 1.7 0 0 1 0 2c-.26.27-.4.63-.4 1Z"></path>
                                </svg>
                            </span>
                            <span>Settings</span>
                        </button>
                    </nav>
                </div>

                <div id="pushv2-sidebar-panel" class="pushv2-console-side-panel-card pushv2-hidden">
                    <div class="pushv2-console-side-panel">
                        <div class="pushv2-console-side-header">
                            <div>
                                <div id="pushv2-sidebar-panel-title" class="pushv2-console-side-title">Saved Campaigns</div>
                                <p id="pushv2-sidebar-panel-copy" class="pushv2-console-side-copy">Load an existing V2 compose into the editor.</p>
                            </div>
                            <button type="button" id="pushv2-sidebar-primary-btn" class="pushv2-button primary pushv2-console-side-cta pushv2-hidden">Create Compose</button>
                        </div>
                        <div class="pushv2-console-side-stack">
                            <div id="pushv2-sidebar-placeholder" class="pushv2-empty pushv2-hidden"></div>
                            <div id="pushv2-message-list" class="pushv2-data-card pushv2-hidden">
                                <div class="pushv2-table-container">
                                    <table id="pushv2-campaigns-table" class="pushv2-data-table display">
                                        <thead>
                                            <tr>
                                                <th>ID</th>
                                                <th>Title</th>
                                                <th>Segments</th>
                                                <th>Devices</th>
                                                <th>Type</th>
                                                <th>Action</th>
                                                <th>Created</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td colspan="8">Loading saved compose...</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div id="pushv2-segment-list" class="pushv2-data-card pushv2-hidden">
                                <div class="pushv2-table-container">
                                    <table id="pushv2-segments-table" class="pushv2-data-table display">
                                        <thead>
                                            <tr>
                                                <th>ID</th>
                                                <th>Title</th>
                                                <th>Description</th>
                                                <th>Rules</th>
                                                <th>Created</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td colspan="6">Loading segments...</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div id="pushv2-report-list" class="pushv2-data-card pushv2-hidden">
                                <div id="pushv2-report-body" class="pushv2-reports-shell"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <input id="pushv2-format" type="hidden" value="push">

                <div class="pushv2-console-type-wrap">
                    <div class="pushv2-console-type-tabs">
                        <button type="button" class="pushv2-console-type-tab active" data-format="push">
                            <span class="pushv2-console-type-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24">
                                    <path d="M15 17h5l-1.4-1.4A2 2 0 0 1 18 14.2V11a6 6 0 1 0-12 0v3.2a2 2 0 0 1-.6 1.4L4 17h5"></path>
                                    <path d="M10 17a2 2 0 0 0 4 0"></path>
                                </svg>
                            </span>
                            <span class="pushv2-console-type-title">Push Notification</span>
                            <span class="pushv2-console-type-copy">System tray • FCM</span>
                            <span class="pushv2-console-type-badge push">Most Used</span>
                        </button>
                        <button type="button" class="pushv2-console-type-tab" data-format="inapp">
                            <span class="pushv2-console-type-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24">
                                    <rect x="3" y="5" width="18" height="14" rx="2"></rect>
                                    <path d="M8 9h8"></path>
                                    <path d="M8 13h5"></path>
                                </svg>
                            </span>
                            <span class="pushv2-console-type-title">In-App Message</span>
                            <span class="pushv2-console-type-copy">Popup • Modal • Banner</span>
                            <span class="pushv2-console-type-badge inapp">Interactive</span>
                        </button>
                        <button type="button" class="pushv2-console-type-tab" data-format="drawer">
                            <span class="pushv2-console-type-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24">
                                    <path d="M5 4h10a3 3 0 0 1 3 3v10"></path>
                                    <path d="M5 20h10a3 3 0 0 0 3-3V7"></path>
                                    <path d="M8 12h10"></path>
                                    <path d="m14 8 4 4-4 4"></path>
                                </svg>
                            </span>
                            <span class="pushv2-console-type-title">Drawer Message</span>
                            <span class="pushv2-console-type-copy">Side panel • Bell icon</span>
                            <span class="pushv2-console-type-badge drawer">Inbox Style</span>
                        </button>
                    </div>
                </div>

                <section class="pushv2-console-form-card pushv2-main-card">
                    <div class="pushv2-console-form-header">
                        <div>
                            <div class="pushv2-console-heading">
                                <span id="pushv2-section-icon" class="pushv2-console-section-icon" aria-hidden="true">
                                    <svg viewBox="0 0 24 24">
                                        <path d="M15 17h5l-1.4-1.4A2 2 0 0 1 18 14.2V11a6 6 0 1 0-12 0v3.2a2 2 0 0 1-.6 1.4L4 17h5"></path>
                                        <path d="M10 17a2 2 0 0 0 4 0"></path>
                                    </svg>
                                </span>
                                <h2 id="pushv2-editor-title" class="pushv2-card-title">Push Notification (FCM)</h2>
                            </div>
                            <p id="pushv2-editor-copy" class="pushv2-console-section-copy">Save draft content first, then use Send Notification only when you want to dispatch immediately from the stored V2 compose.</p>
                        </div>
                        <span class="pushv2-ref-status-badge">
                            <span class="pushv2-ref-status-dot"></span>
                            <span id="pushv2-format-label">Ready to Send</span>
                        </span>
                    </div>

                    <form id="pushv2-form" class="pushv2-console-form-grid">
                        <div class="pushv2-field full">
                            <label class="pushv2-label" for="pushv2-title">Title <span class="pushv2-required">*</span></label>
                            <input id="pushv2-title" class="pushv2-input" type="text" maxlength="500" placeholder="Notification title">
                        </div>

                        <div class="pushv2-field full">
                            <label class="pushv2-label" for="pushv2-description">Description <span class="pushv2-required">*</span></label>
                            <textarea id="pushv2-description" class="pushv2-textarea" placeholder="Notification body or internal description"></textarea>
                        </div>

                        <div class="pushv2-field full">
                            <div class="pushv2-console-media-grid">
                                <div class="pushv2-field">
                                    <label class="pushv2-label" for="pushv2-thumb-type">Thumb Type</label>
                                    <select id="pushv2-thumb-type" class="pushv2-select">
                                        <option value="browse">Manual Browse</option>
                                        <option value="url">Type URL</option>
                                    </select>
                                </div>

                                <div class="pushv2-field" id="pushv2-thumb-url-field">
                                    <label class="pushv2-label" for="pushv2-thumb-url">Image / Icon URL</label>
                                    <input id="pushv2-thumb-url" class="pushv2-input" type="text" maxlength="4000" placeholder="https://example.com/thumb.jpg">
                                </div>

                                <div class="pushv2-field pushv2-hidden" id="pushv2-thumb-file-field">
                                    <label class="pushv2-label" for="pushv2-thumb-file">Browse</label>
                                    <input id="pushv2-thumb-file" class="pushv2-input" type="file" accept=".jpg,.jpeg,.png,.gif,.webp">
                                </div>

                                <div class="pushv2-field">
                                    <label class="pushv2-label" for="pushv2-inline-thumb-preview">Preview</label>
                                    <div id="pushv2-inline-thumb-preview" class="pushv2-inline-thumb-preview">
                                        <img id="pushv2-inline-thumb-image" alt="Image preview">
                                        <span id="pushv2-inline-thumb-empty">Preview</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="pushv2-field full">
                            <label class="pushv2-label" for="pushv2-deeplink">Deep Link / Action URL</label>
                            <input id="pushv2-deeplink" class="pushv2-input" type="text" maxlength="4000" placeholder="https://example.com/article/6027">
                        </div>

                        <div class="pushv2-field">
                            <label class="pushv2-label" for="pushv2-device">Device <span class="pushv2-required">*</span></label>
                            <select id="pushv2-device" class="pushv2-select"></select>
                        </div>

                        <div class="pushv2-field">
                            <label class="pushv2-label" for="pushv2-type">Type</label>
                            <select id="pushv2-type" class="pushv2-select">
                                <option value="custom">Custom</option>
                            </select>
                        </div>

                        <div class="pushv2-field pushv2-hidden" id="pushv2-drawer-priority-field">
                            <label class="pushv2-label" for="pushv2-priority">Drawer Priority</label>
                            <select id="pushv2-priority" class="pushv2-select">
                                <option value="low">Low</option>
                                <option value="normal" selected>Normal</option>
                                <option value="high">High</option>
                            </select>
                        </div>

                        <section class="pushv2-console-settings pushv2-hidden" id="pushv2-inapp-settings">
                            <div class="pushv2-console-panel-head">
                                <div>
                                    <div class="pushv2-console-panel-title">In-App Message Settings</div>
                                    <p class="pushv2-console-panel-copy">Use the same Firebase-style controls for previewing in-app behavior without touching the existing push backend rules.</p>
                                </div>
                            </div>
                            <div class="pushv2-console-settings-grid">
                                <div class="pushv2-console-setting-card">
                                    <label class="pushv2-console-setting-label" for="pushv2-inapp-frequency-count">Frequency Cap</label>
                                    <div class="pushv2-console-mini-grid">
                                        <input id="pushv2-inapp-frequency-count" class="pushv2-input" type="number" min="1" value="5">
                                        <select id="pushv2-inapp-frequency-unit" class="pushv2-select">
                                            <option value="minute">Minute</option>
                                            <option value="hour" selected>Hour</option>
                                            <option value="day">Day</option>
                                            <option value="week">Week</option>
                                            <option value="month">Month</option>
                                            <option value="session">Session</option>
                                            <option value="lifetime">Lifetime (once only)</option>
                                        </select>
                                    </div>
                                    <span class="pushv2-console-inline-label">Example: 5 times per hour</span>
                                </div>

                                <div class="pushv2-console-setting-card">
                                    <label class="pushv2-console-setting-label" for="pushv2-inapp-display">Display Behavior</label>
                                    <select id="pushv2-inapp-display" class="pushv2-select">
                                        <option value="Show immediately on app open" selected>Show immediately on app open</option>
                                        <option value="Show after 3 seconds delay">Show after 3 seconds delay</option>
                                        <option value="Show on specific screen">Show on specific screen</option>
                                        <option value="Show after user action (event)">Show after user action (event)</option>
                                    </select>
                                </div>

                                <div class="pushv2-console-setting-card">
                                    <div class="pushv2-console-setting-label">Closable Settings</div>
                                    <div class="pushv2-console-checklist">
                                        <label><input id="pushv2-inapp-closable" type="checkbox" checked> Can be closed by user</label>
                                        <label><input id="pushv2-inapp-auto-dismiss" type="checkbox" checked> Auto-dismiss after</label>
                                    </div>
                                    <div class="pushv2-console-auto-dismiss">
                                        <input id="pushv2-inapp-auto-seconds" class="pushv2-input" type="number" min="1" value="10">
                                        <span class="pushv2-console-inline-label">seconds</span>
                                    </div>
                                </div>

                                <div class="pushv2-console-setting-card">
                                    <label class="pushv2-console-setting-label" for="pushv2-inapp-min-time">Minimum Time Between Shows</label>
                                    <div class="pushv2-console-auto-dismiss">
                                        <input id="pushv2-inapp-min-time" class="pushv2-input" type="number" min="1" value="30">
                                        <span class="pushv2-console-inline-label">minutes</span>
                                    </div>
                                </div>

                                <div class="pushv2-console-setting-card">
                                    <label class="pushv2-console-setting-label" for="pushv2-inapp-expiration">Expiration</label>
                                    <div class="pushv2-console-auto-dismiss">
                                        <input id="pushv2-inapp-expiration" class="pushv2-input" type="number" min="1" value="7">
                                        <span class="pushv2-console-inline-label">days</span>
                                    </div>
                                </div>

                                <div class="pushv2-console-setting-card">
                                    <label class="pushv2-console-setting-label" for="pushv2-inapp-priority">Priority</label>
                                    <select id="pushv2-inapp-priority" class="pushv2-select">
                                        <option value="high">High (appear on top)</option>
                                        <option value="normal" selected>Normal</option>
                                        <option value="low">Low (allow others first)</option>
                                    </select>
                                </div>
                            </div>
                        </section>

                        <section class="pushv2-console-target">
                            <div class="pushv2-console-panel-head">
                                <div>
                                    <div class="pushv2-console-panel-title">Target Audience</div>
                                    <p class="pushv2-console-panel-copy">Segment delivery remains the active V2 path today. Topic and Device Token are available for UI parity and preview switching.</p>
                                </div>
                                <span id="pushv2-target-count" class="pushv2-console-users-chip">0 recipients</span>
                            </div>

                            <div class="pushv2-console-target-options">
                                <label class="pushv2-console-target-card" data-target-mode-card="topic">
                                    <input id="pushv2-target-topic" type="radio" name="pushv2-target-mode" value="topic">
                                    <span class="pushv2-console-target-meta">
                                        <span class="pushv2-console-target-glyph" aria-hidden="true">
                                            <svg viewBox="0 0 24 24">
                                                <path d="M3 11v2"></path>
                                                <path d="M6 9v6"></path>
                                                <path d="M10 8l7-3v14l-7-3H6a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2h4Z"></path>
                                                <path d="M10 16v4a2 2 0 0 0 2 2h1"></path>
                                            </svg>
                                        </span>
                                        <span>
                                            <span class="pushv2-console-target-title">Topic</span>
                                            <span class="pushv2-console-target-copy">Subscribed users</span>
                                        </span>
                                    </span>
                                </label>
                                <label class="pushv2-console-target-card active" data-target-mode-card="segment">
                                    <input id="pushv2-target-segment" type="radio" name="pushv2-target-mode" value="segment" checked>
                                    <span class="pushv2-console-target-meta">
                                        <span class="pushv2-console-target-glyph" aria-hidden="true">
                                            <svg viewBox="0 0 24 24">
                                                <circle cx="7" cy="7" r="3"></circle>
                                                <circle cx="17" cy="7" r="3"></circle>
                                                <circle cx="12" cy="17" r="3"></circle>
                                                <path d="M9.5 9.5 10.8 13"></path>
                                                <path d="M14.5 9.5 13.2 13"></path>
                                            </svg>
                                        </span>
                                        <span>
                                            <span class="pushv2-console-target-title">Segment</span>
                                            <span class="pushv2-console-target-copy">Analytics audience</span>
                                        </span>
                                    </span>
                                </label>
                                <label class="pushv2-console-target-card" data-target-mode-card="token">
                                    <input id="pushv2-target-token" type="radio" name="pushv2-target-mode" value="token">
                                    <span class="pushv2-console-target-meta">
                                        <span class="pushv2-console-target-glyph" aria-hidden="true">
                                            <svg viewBox="0 0 24 24">
                                                <rect x="7" y="2" width="10" height="20" rx="2"></rect>
                                                <path d="M11 18h2"></path>
                                                <path d="M10 6h4"></path>
                                            </svg>
                                        </span>
                                        <span>
                                            <span class="pushv2-console-target-title">Device Token</span>
                                            <span class="pushv2-console-target-copy">Specific user</span>
                                        </span>
                                    </span>
                                </label>
                            </div>

                            <div class="pushv2-console-audience-fields">
                                <div id="pushv2-topic-field" class="pushv2-field pushv2-hidden">
                                    <label class="pushv2-label" for="pushv2-topic-name">Topic Name</label>
                                    <input id="pushv2-topic-name" class="pushv2-input" type="text" maxlength="255" placeholder="corey_test">
                                </div>

                                <div id="pushv2-segment-field" class="pushv2-field">
                                    <label class="pushv2-label" for="pushv2-segments">Segment <span class="pushv2-required">*</span></label>
                                    <select id="pushv2-segments" class="pushv2-select" multiple></select>
                                </div>

                                <div id="pushv2-token-field" class="pushv2-field pushv2-hidden">
                                    <label class="pushv2-label" for="pushv2-device-token">Device Token</label>
                                    <input id="pushv2-device-token" class="pushv2-input" type="text" maxlength="5000" placeholder="fcm_abcdef123456...">
                                </div>
                            </div>
                        </section>

                        <section class="pushv2-console-schedule">
                            <div class="pushv2-field">
                                <label class="pushv2-label">Schedule</label>
                                <div class="pushv2-console-radio-row">
                                    <label><input id="pushv2-action-now-radio" type="radio" name="pushv2-action-mode" value="now" checked> Send Now</label>
                                    <label><input id="pushv2-action-schedule-radio" type="radio" name="pushv2-action-mode" value="schedule"> Schedule</label>
                                </div>
                                <select id="pushv2-action" class="pushv2-select pushv2-console-hidden-select">
                                    <option value="now" selected>Now</option>
                                    <option value="schedule">Schedule</option>
                                </select>
                            </div>

                            <div id="pushv2-schedule-field" class="pushv2-field pushv2-hidden">
                                <label class="pushv2-label" for="pushv2-schedule-time">Schedule Time</label>
                                <input id="pushv2-schedule-time" class="pushv2-input" type="datetime-local">
                            </div>
                        </section>

                        <section class="pushv2-console-preview">
                            <div class="pushv2-console-panel-head">
                                <div>
                                    <div class="pushv2-console-panel-title">Live Preview</div>
                                    <p class="pushv2-console-panel-copy">Preview changes as you switch between push, in-app, and drawer layouts.</p>
                                </div>
                            </div>

                            <div class="pushv2-console-preview-frame">
                                <div id="pushv2-push-preview" class="pushv2-ref-preview-pane">
                                    <div class="pushv2-phone">
                                        <div class="pushv2-phone-screen">
                                            <div id="pushv2-preview-time" class="pushv2-phone-time">--:--</div>
                                            <div class="pushv2-preview-card">
                                                <div class="pushv2-preview-icon" aria-hidden="true">
                                                    <svg viewBox="0 0 24 24">
                                                        <path d="M15 17h5l-1.4-1.4A2 2 0 0 1 18 14.2V11a6 6 0 1 0-12 0v3.2a2 2 0 0 1-.6 1.4L4 17h5"></path>
                                                        <path d="M10 17a2 2 0 0 0 4 0"></path>
                                                    </svg>
                                                </div>
                                                <div>
                                                    <div id="pushv2-preview-title" class="pushv2-preview-title">Notification title</div>
                                                    <div id="pushv2-preview-body" class="pushv2-preview-body">Notification description will appear here.</div>
                                                </div>
                                            </div>
                                            <img id="pushv2-preview-image" class="pushv2-preview-image" alt="Notification thumbnail preview">
                                        </div>
                                    </div>
                                </div>

                                <div id="pushv2-inapp-preview" class="pushv2-ref-preview-pane pushv2-hidden">
                                    <div class="pushv2-ref-inapp-preview">
                                        <div class="pushv2-ref-inapp-modal">
                                            <button type="button" class="pushv2-ref-close-btn">×</button>
                                            <div class="pushv2-ref-preview-symbol" aria-hidden="true">
                                                <svg viewBox="0 0 24 24">
                                                    <rect x="3" y="5" width="18" height="14" rx="2"></rect>
                                                    <path d="M8 9h8"></path>
                                                    <path d="M8 13h5"></path>
                                                </svg>
                                            </div>
                                            <div id="pushv2-inapp-title" class="pushv2-ref-preview-title">Notification title</div>
                                            <div id="pushv2-inapp-body" class="pushv2-ref-preview-body">Notification description will appear here.</div>
                                            <div class="pushv2-ref-inapp-actions">
                                                <button type="button">Dismiss</button>
                                                <button type="button" class="primary">View Details</button>
                                            </div>
                                            <div id="pushv2-inapp-preview-hint" class="pushv2-ref-preview-hint">Shows 5 times per hour • Closable • Auto-dismiss after 10s</div>
                                        </div>
                                    </div>
                                </div>

                                <div id="pushv2-drawer-preview" class="pushv2-ref-preview-pane pushv2-hidden">
                                    <div class="pushv2-ref-drawer-preview">
                                        <div class="pushv2-ref-drawer-header">
                                            <span>Inbox</span>
                                            <span class="pushv2-ref-drawer-badge">3</span>
                                        </div>
                                        <div class="pushv2-ref-drawer-body">
                                            <div class="pushv2-ref-drawer-item">
                                                <div class="pushv2-ref-drawer-icon" aria-hidden="true">
                                                    <svg viewBox="0 0 24 24">
                                                        <path d="M5 4h10a3 3 0 0 1 3 3v10"></path>
                                                        <path d="M5 20h10a3 3 0 0 0 3-3V7"></path>
                                                        <path d="M8 12h10"></path>
                                                        <path d="m14 8 4 4-4 4"></path>
                                                    </svg>
                                                </div>
                                                <div>
                                                    <div id="pushv2-drawer-title" class="pushv2-ref-preview-title">Notification title</div>
                                                    <div id="pushv2-drawer-body" class="pushv2-ref-preview-body">Notification description will appear here.</div>
                                                    <div id="pushv2-drawer-preview-hint" class="pushv2-ref-preview-hint">Priority: Normal • Just now</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>

                        <div class="pushv2-console-stats">
                            <div class="pushv2-console-stat-card">
                                <span class="pushv2-meta-label">Total Recipients</span>
                                <span id="pushv2-preview-total" class="pushv2-ref-stat-value">0</span>
                            </div>
                            <div class="pushv2-console-stat-card">
                                <span class="pushv2-meta-label">Est. Opens/Views</span>
                                <span id="pushv2-preview-views" class="pushv2-ref-stat-value">0</span>
                            </div>
                            <div class="pushv2-console-stat-card">
                                <span class="pushv2-meta-label">Engagement Rate</span>
                                <span id="pushv2-preview-engagement" class="pushv2-ref-stat-value">0%</span>
                            </div>
                            <div class="pushv2-console-stat-card type">
                                <span class="pushv2-meta-label">Type</span>
                                <span id="pushv2-stat-format" class="pushv2-ref-stat-value">Push</span>
                                <span id="pushv2-stat-mode" class="pushv2-hidden">Now</span>
                            </div>
                        </div>

                        <div class="pushv2-console-note" id="pushv2-save-note">Save Content stores the current V2 compose only. Send Notification stays available only for saved immediate sends.</div>

                        <div class="pushv2-console-actions">
                            <div class="pushv2-console-actions-left">
                                <button type="button" id="pushv2-reset-btn" class="pushv2-button soft">Reset</button>
                                <button type="button" id="pushv2-test-btn" class="pushv2-button accent">Test Device</button>
                            </div>
                            <div class="pushv2-console-actions-right">
                                <button type="submit" id="pushv2-save-btn" class="pushv2-button primary">Save Content</button>
                                <button type="button" id="pushv2-dispatch-btn" class="pushv2-button success force-visible is-disabled" disabled>Send Notification</button>
                            </div>
                        </div>
                    </form>
                </section>
            </div>

            <div id="pushv2-segment-modal" class="pushv2-modal" aria-hidden="true">
                <div class="pushv2-modal-card">
                    <div class="pushv2-modal-head">
                        <h3 id="pushv2-segment-modal-title" class="pushv2-modal-title">Create Segment</h3>
                        <button type="button" class="pushv2-modal-close" data-pushv2-segment-close>&times;</button>
                    </div>
                    <div class="pushv2-modal-body">
                        <div class="pushv2-field">
                            <label class="pushv2-label" for="pushv2-segment-title">Title <span class="pushv2-meta-label" style="color: var(--pushv2-danger);">*</span></label>
                            <input id="pushv2-segment-title" class="pushv2-input" type="text" maxlength="100" placeholder="Segment title">
                            <div id="pushv2-segment-title-error" class="pushv2-field-error"></div>
                        </div>
                        <div class="pushv2-field">
                            <label class="pushv2-label" for="pushv2-segment-description">Description</label>
                            <textarea id="pushv2-segment-description" class="pushv2-textarea" placeholder="Segment description"></textarea>
                        </div>
                        <div class="pushv2-field">
                            <div class="pushv2-panel-head" style="margin-bottom: 10px;">
                                <div>
                                    <div class="pushv2-panel-title">Rules <span class="pushv2-meta-label" style="color: var(--pushv2-danger);">*</span></div>
                                </div>
                                <button type="button" id="pushv2-segment-add-rule" class="pushv2-button secondary">Add Rule</button>
                            </div>
                            <div id="pushv2-segment-rules" class="pushv2-segment-rules"></div>
                            <div id="pushv2-segment-rules-error" class="pushv2-field-error"></div>
                        </div>
                        <div class="pushv2-modal-actions">
                            <div id="pushv2-segment-modal-status" class="pushv2-inline-status" aria-live="polite"></div>
                            <div class="pushv2-modal-actions-group">
                                <button type="button" class="pushv2-button secondary" data-pushv2-segment-close>Cancel</button>
                                <button type="button" id="pushv2-segment-save-btn" class="pushv2-button primary">Save Segment</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="pushv2-dispatch-progress-modal" class="pushv2-modal pushv2-progress-modal" aria-hidden="true">
                <div class="pushv2-modal-card">
                    <div class="pushv2-modal-head">
                        <div>
                            <h3 id="pushv2-dispatch-progress-title" class="pushv2-modal-title">Sending Notification...</h3>
                            <div id="pushv2-dispatch-progress-caption" class="pushv2-modal-subtitle">We are processing recipients in batches. This may take a few minutes.</div>
                        </div>
                        <button type="button" class="pushv2-modal-close" data-pushv2-progress-close>&times;</button>
                    </div>
                    <div class="pushv2-modal-body">
                        <div class="pushv2-progress-shell">
                            <div class="pushv2-progress-head">
                                <div>
                                    <div id="pushv2-dispatch-progress-stage" class="pushv2-progress-title">Preparing notification...</div>
                                    <p id="pushv2-dispatch-progress-copy" class="pushv2-progress-copy">We are processing recipients in batches. This may take a few minutes.</p>
                                </div>
                                <div class="pushv2-progress-meta">
                                    <span id="pushv2-dispatch-progress-status" class="pushv2-progress-chip">Preparing</span>
                                    <span id="pushv2-dispatch-progress-elapsed" class="pushv2-progress-chip">00:00 elapsed</span>
                                </div>
                            </div>

                            <div class="pushv2-progress-card">
                                <div class="pushv2-progress-bar-row">
                                    <strong id="pushv2-dispatch-progress-counts">0 / 0</strong>
                                    <strong id="pushv2-dispatch-progress-percent">0%</strong>
                                </div>
                                <div class="pushv2-progress-track">
                                    <div id="pushv2-dispatch-progress-fill" class="pushv2-progress-fill"></div>
                                </div>
                            </div>

                            <div id="pushv2-dispatch-progress-batches" class="pushv2-progress-batches"></div>

                            <div class="pushv2-progress-issues">
                                <div class="pushv2-progress-issues-head">
                                    <strong>Issues</strong>
                                    <span id="pushv2-dispatch-progress-issues-count" class="pushv2-meta-label">0 found</span>
                                </div>
                                <div id="pushv2-dispatch-progress-issues-list" class="pushv2-progress-issues-list">
                                    <p class="pushv2-progress-empty">No issues found yet.</p>
                                </div>
                            </div>

                            <div class="pushv2-progress-footer">
                                <label class="pushv2-progress-toggle" for="pushv2-dispatch-progress-notify">
                                    <input type="checkbox" id="pushv2-dispatch-progress-notify" checked>
                                    <span>Notify me when completed</span>
                                </label>
                                <div class="pushv2-progress-footer-actions">
                                    <button type="button" class="pushv2-button secondary" data-pushv2-progress-close>Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-filament-panels::page>

@push('scripts')
<script src="{{ asset('vendor/report-libs/js/jquery-3.6.0.min.js') }}?v={{ @filemtime(public_path('vendor/report-libs/js/jquery-3.6.0.min.js')) ?: time() }}"></script>
<script src="{{ asset('vendor/report-libs/js/select2.min.js') }}?v={{ @filemtime(public_path('vendor/report-libs/js/select2.min.js')) ?: time() }}"></script>
<script src="{{ asset('vendor/report-libs/js/jquery.dataTables.min.js') }}?v={{ @filemtime(public_path('vendor/report-libs/js/jquery.dataTables.min.js')) ?: time() }}"></script>
<script>
    (function () {
        'use strict';

        const endpoints = {
            token: '/admin/api/tokens/current',
            filters: '/admin/api/operations/push-notification-v2/filters',
            reports: '/admin/api/operations/push-notification-v2/reports',
            segments: '/admin/api/operations/push-notification-v2/segments',
            segmentOptions: '/admin/api/operations/push-notification-v2/segment-options',
            packageOptions: '/admin/api/operations/push-notification-v2/package-options',
            messages: '/admin/api/operations/push-notification-v2/messages',
            thumbUpload: '/admin/api/operations/push-notification-v2/messages/thumb-upload',
            segment(id) {
                return '/admin/api/operations/push-notification-v2/segments/' + encodeURIComponent(String(id || '').trim());
            },
            message(id) {
                return '/admin/api/operations/push-notification-v2/messages/' + encodeURIComponent(String(id || '').trim());
            },
            messageDispatchProgress(id) {
                return '/admin/api/operations/push-notification-v2/messages/' + encodeURIComponent(String(id || '').trim()) + '/dispatch-progress';
            },
            messageDispatch(id) {
                return '/admin/api/operations/push-notification-v2/messages/' + encodeURIComponent(String(id || '').trim()) + '/dispatch';
            },
        };

        const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
        const statusBox = document.getElementById('pushv2-status');
        const appChip = document.getElementById('pushv2-app-chip');
        const messageCount = document.getElementById('pushv2-message-count');
        const segmentCount = document.getElementById('pushv2-segment-count');
        const messageList = document.getElementById('pushv2-message-list');
        const segmentList = document.getElementById('pushv2-segment-list');
        const reportList = document.getElementById('pushv2-report-list');
        const reportBody = document.getElementById('pushv2-report-body');
        const messageTableBody = document.querySelector('#pushv2-campaigns-table tbody');
        const segmentTableBody = document.querySelector('#pushv2-segments-table tbody');
        const sidebarPanel = document.getElementById('pushv2-sidebar-panel');
        const sidebarPanelTitle = document.getElementById('pushv2-sidebar-panel-title');
        const sidebarPanelCopy = document.getElementById('pushv2-sidebar-panel-copy');
        const sidebarPrimaryButton = document.getElementById('pushv2-sidebar-primary-btn');
        const sidebarPlaceholder = document.getElementById('pushv2-sidebar-placeholder');
        const editorTitle = document.getElementById('pushv2-editor-title');
        const editorCopy = document.getElementById('pushv2-editor-copy');
        const sectionIcon = document.getElementById('pushv2-section-icon');
        const formatLabel = document.getElementById('pushv2-format-label');
        const saveNote = document.getElementById('pushv2-save-note');
        const saveButton = document.getElementById('pushv2-save-btn');
        const dispatchButton = document.getElementById('pushv2-dispatch-btn');
        const testButton = document.getElementById('pushv2-test-btn');
        const refreshButton = document.getElementById('pushv2-refresh-btn');
        const resetButton = document.getElementById('pushv2-reset-btn');
        const recipientChip = document.getElementById('pushv2-recipient-chip');
        const titleInput = document.getElementById('pushv2-title');
        const descriptionInput = document.getElementById('pushv2-description');
        const deviceSelect = document.getElementById('pushv2-device');
        const formatInput = document.getElementById('pushv2-format');
        const thumbTypeSelect = document.getElementById('pushv2-thumb-type');
        const thumbUrlField = document.getElementById('pushv2-thumb-url-field');
        const thumbUrlInput = document.getElementById('pushv2-thumb-url');
        const thumbFileField = document.getElementById('pushv2-thumb-file-field');
        const thumbFileInput = document.getElementById('pushv2-thumb-file');
        const deeplinkInput = document.getElementById('pushv2-deeplink');
        const prioritySelect = document.getElementById('pushv2-priority');
        const segmentsSelect = document.getElementById('pushv2-segments');
        const typeSelect = document.getElementById('pushv2-type');
        const actionSelect = document.getElementById('pushv2-action');
        const scheduleField = document.getElementById('pushv2-schedule-field');
        const scheduleInput = document.getElementById('pushv2-schedule-time');
        const drawerPriorityField = document.getElementById('pushv2-drawer-priority-field');
        const inappSettings = document.getElementById('pushv2-inapp-settings');
        const targetCount = document.getElementById('pushv2-target-count');
        const statFormat = document.getElementById('pushv2-stat-format');
        const statMode = document.getElementById('pushv2-stat-mode');
        const previewTotal = document.getElementById('pushv2-preview-total');
        const previewViews = document.getElementById('pushv2-preview-views');
        const previewEngagement = document.getElementById('pushv2-preview-engagement');
        const inlineThumbPreview = document.getElementById('pushv2-inline-thumb-preview');
        const inlineThumbImage = document.getElementById('pushv2-inline-thumb-image');

        const topicField = document.getElementById('pushv2-topic-field');
        const topicInput = document.getElementById('pushv2-topic-name');
        const segmentField = document.getElementById('pushv2-segment-field');
        const tokenField = document.getElementById('pushv2-token-field');
        const tokenInput = document.getElementById('pushv2-device-token');
        const targetModeInputs = Array.from(document.querySelectorAll('input[name="pushv2-target-mode"]'));
        const actionNowRadio = document.getElementById('pushv2-action-now-radio');
        const actionScheduleRadio = document.getElementById('pushv2-action-schedule-radio');
        const inappFrequencyCount = document.getElementById('pushv2-inapp-frequency-count');
        const inappFrequencyUnit = document.getElementById('pushv2-inapp-frequency-unit');
        const inappDisplay = document.getElementById('pushv2-inapp-display');
        const inappClosable = document.getElementById('pushv2-inapp-closable');
        const inappAutoDismiss = document.getElementById('pushv2-inapp-auto-dismiss');
        const inappAutoSeconds = document.getElementById('pushv2-inapp-auto-seconds');
        const inappMinTime = document.getElementById('pushv2-inapp-min-time');
        const inappExpiration = document.getElementById('pushv2-inapp-expiration');
        const inappPriority = document.getElementById('pushv2-inapp-priority');
        const inappPreviewHint = document.getElementById('pushv2-inapp-preview-hint');
        const drawerPreviewHint = document.getElementById('pushv2-drawer-preview-hint');

        const previewTime = document.getElementById('pushv2-preview-time');
        const previewTitle = document.getElementById('pushv2-preview-title');
        const previewBody = document.getElementById('pushv2-preview-body');
        const previewImage = document.getElementById('pushv2-preview-image');
        const pushPreview = document.getElementById('pushv2-push-preview');
        const inappPreview = document.getElementById('pushv2-inapp-preview');
        const drawerPreview = document.getElementById('pushv2-drawer-preview');
        const inappPreviewTitle = document.getElementById('pushv2-inapp-title');
        const inappPreviewBody = document.getElementById('pushv2-inapp-body');
        const drawerPreviewTitle = document.getElementById('pushv2-drawer-title');
        const drawerPreviewBody = document.getElementById('pushv2-drawer-body');
        const typeWrap = document.querySelector('.pushv2-console-type-wrap');
        const mainCard = document.querySelector('.pushv2-main-card');

        const segmentModal = document.getElementById('pushv2-segment-modal');
        const dispatchProgressModal = document.getElementById('pushv2-dispatch-progress-modal');
        const segmentModalTitle = document.getElementById('pushv2-segment-modal-title');
        const segmentTitleInput = document.getElementById('pushv2-segment-title');
        const segmentTitleError = document.getElementById('pushv2-segment-title-error');
        const segmentDescriptionInput = document.getElementById('pushv2-segment-description');
        const segmentRulesBox = document.getElementById('pushv2-segment-rules');
        const segmentRulesError = document.getElementById('pushv2-segment-rules-error');
        const segmentModalStatus = document.getElementById('pushv2-segment-modal-status');
        const saveSegmentButton = document.getElementById('pushv2-segment-save-btn');
        const addSegmentRuleButton = document.getElementById('pushv2-segment-add-rule');
        const dispatchProgressTitle = document.getElementById('pushv2-dispatch-progress-title');
        const dispatchProgressCaption = document.getElementById('pushv2-dispatch-progress-caption');
        const dispatchProgressStage = document.getElementById('pushv2-dispatch-progress-stage');
        const dispatchProgressCopy = document.getElementById('pushv2-dispatch-progress-copy');
        const dispatchProgressStatus = document.getElementById('pushv2-dispatch-progress-status');
        const dispatchProgressElapsed = document.getElementById('pushv2-dispatch-progress-elapsed');
        const dispatchProgressCounts = document.getElementById('pushv2-dispatch-progress-counts');
        const dispatchProgressPercent = document.getElementById('pushv2-dispatch-progress-percent');
        const dispatchProgressFill = document.getElementById('pushv2-dispatch-progress-fill');
        const dispatchProgressBatches = document.getElementById('pushv2-dispatch-progress-batches');
        const dispatchProgressIssuesCount = document.getElementById('pushv2-dispatch-progress-issues-count');
        const dispatchProgressIssuesList = document.getElementById('pushv2-dispatch-progress-issues-list');
        const dispatchProgressNotifyCheckbox = document.getElementById('pushv2-dispatch-progress-notify');

        const form = document.getElementById('pushv2-form');
        const select2Enabled = Boolean(window.jQuery && window.jQuery.fn && window.jQuery.fn.select2);

        let bearerToken = '';
        let currentAppId = '';
        let deviceTypeMeta = [];
        let segmentFilterMeta = [];
        let messageRows = [];
        let segmentRows = [];
        let reportSummary = null;
        let segmentOptions = [];
        const packageOptionLabels = new Map();
        let editingMessageId = '';
        let editingMessageDispatchStatus = '';
        let editingMessageThumb = '';
        let segmentLoadPromise = null;
        let messageLoadPromise = null;
        let reportSummaryLoadPromise = null;
        const dispatchNotifyPreferenceKey = 'push.notifications.v2.notify-on-complete';
        const dispatchCompletionNotifications = new Set();
        const dispatchProgressState = {
            active: false,
            messageId: '',
            pollTimer: null,
            pollRequest: null,
            completing: false,
            awaitingDispatch: false,
            pendingStageLabel: '',
            pendingCopy: '',
            payload: null,
            notifyOnComplete: true,
        };
        let editingSegmentId = '';
        let currentSidebarView = 'notifications';
        let statusHideTimer = null;
        let segmentModalHideTimer = null;
        let messageDataTable = null;
        let segmentDataTable = null;

        function asId(value) {
            return String(value ?? '').trim();
        }

        function hasShownDispatchCompletion(messageId) {
            const normalizedId = asId(messageId);
            return normalizedId !== '' && dispatchCompletionNotifications.has(normalizedId);
        }

        function markDispatchCompletionShown(messageId) {
            const normalizedId = asId(messageId);
            if (normalizedId !== '') {
                dispatchCompletionNotifications.add(normalizedId);
            }
        }

        function escapeHtml(value) {
            return String(value ?? '')
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#39;');
        }

        function consoleIconSvg(name) {
            const icons = {
                push: `
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M15 17h5l-1.4-1.4A2 2 0 0 1 18 14.2V11a6 6 0 1 0-12 0v3.2a2 2 0 0 1-.6 1.4L4 17h5"></path>
                        <path d="M10 17a2 2 0 0 0 4 0"></path>
                    </svg>
                `,
                inapp: `
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <rect x="3" y="5" width="18" height="14" rx="2"></rect>
                        <path d="M8 9h8"></path>
                        <path d="M8 13h5"></path>
                    </svg>
                `,
                drawer: `
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M5 4h10a3 3 0 0 1 3 3v10"></path>
                        <path d="M5 20h10a3 3 0 0 0 3-3V7"></path>
                        <path d="M8 12h10"></path>
                        <path d="m14 8 4 4-4 4"></path>
                    </svg>
                `,
                recipients: `
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M16 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2"></path>
                        <circle cx="9.5" cy="7" r="3"></circle>
                        <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
                        <path d="M16 4.13a4 4 0 0 1 0 5.74"></path>
                    </svg>
                `,
            };

            return icons[name] || icons.push;
        }

        function renderRecipientChip(count) {
            return consoleIconSvg('recipients') + '<strong>' + escapeHtml(String(count)) + '</strong> recipients';
        }

        function normalizeMessageTypeLabel(value) {
            const normalized = String(value || '').trim().toLowerCase();
            if (!normalized) {
                return '-';
            }

            if (normalized === 'vod') {
                return 'CUSTOM';
            }

            return normalized.toUpperCase();
        }

        function renderPill(label, variant = 'muted') {
            return '<span class="pill ' + escapeHtml(variant) + '">' + escapeHtml(label || '-') + '</span>';
        }

        function renderPillStack(items, variant = 'muted') {
            if (!Array.isArray(items) || !items.length) {
                return '<span class="notif-muted">-</span>';
            }

            return '<div class="notif-stack">' + items.map((item) => renderPill(item, variant)).join('') + '</div>';
        }

        function hasDataTableSupport() {
            return Boolean(window.jQuery && window.jQuery.fn && typeof window.jQuery.fn.DataTable === 'function');
        }

        function destroyDataTable(instance, selector) {
            if (!hasDataTableSupport()) {
                return null;
            }

            if (instance && typeof instance.destroy === 'function') {
                instance.destroy();
            } else if (window.jQuery.fn.DataTable.isDataTable(selector)) {
                window.jQuery(selector).DataTable().destroy();
            }

            return null;
        }

        function dataTableProcessingMarkup(label) {
            return `<span class="sms-dt-processing-pill">${escapeHtml(label || 'Loading records...')}</span>`;
        }

        function configureDataTableProcessing(selector, instance, label) {
            if (!hasDataTableSupport() || !instance) {
                return instance;
            }

            const $table = window.jQuery(selector);
            const $wrapper = $table.closest('.dataTables_wrapper');

            if (!$wrapper.length) {
                return instance;
            }

            const updateProcessingMarkup = (nextLabel) => {
                const $processing = $wrapper.find('.dataTables_processing');

                if (!$processing.length) {
                    return;
                }

                $processing.html(dataTableProcessingMarkup(nextLabel || label));
            };

            $wrapper.addClass('sms-dt-wrapper');
            updateProcessingMarkup(label);

            $table.off('.pushLoader');
            $table.on('processing.dt.pushLoader', function (_event, _settings, processing) {
                updateProcessingMarkup(label);
                $wrapper.toggleClass('sms-dt-processing', Boolean(processing));
                $wrapper.find('.dataTables_processing').toggleClass('processing-visible', Boolean(processing));
            });

            return instance;
        }

        function setDataTableLoading(instance, isLoading, label) {
            if (!instance || !window.jQuery || typeof instance.table !== 'function') {
                return;
            }

            const $table = window.jQuery(instance.table().node());
            const $wrapper = $table.closest('.dataTables_wrapper');

            if (!$wrapper.length) {
                return;
            }

            const $processing = $wrapper.find('.dataTables_processing');
            if ($processing.length) {
                $processing.html(dataTableProcessingMarkup(label));
                $processing.toggleClass('processing-visible', Boolean(isLoading));
            }

            $wrapper.toggleClass('sms-dt-processing', Boolean(isLoading));
        }

        function initializeSidebarTable(selector, order = [[0, 'desc']], processingLabel = 'Loading records...') {
            if (!hasDataTableSupport()) {
                return null;
            }

            const $table = window.jQuery(selector);
            if (!$table.length) {
                return null;
            }

            const tableElement = $table.get(0);
            const tableBody = tableElement instanceof HTMLTableElement ? tableElement.tBodies[0] : null;
            const placeholderRow = tableBody?.rows?.length === 1 ? tableBody.rows[0] : null;
            const placeholderCell = placeholderRow?.cells?.length === 1 ? placeholderRow.cells[0] : null;

            if (placeholderCell && Number(placeholderCell.colSpan || 0) > 1) {
                tableBody.innerHTML = '';
            }

            return $table.DataTable({
                order,
                pageLength: 10,
                processing: true,
                lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
                autoWidth: false,
                responsive: false,
                language: {
                    processing: dataTableProcessingMarkup(processingLabel),
                    search: '',
                    searchPlaceholder: 'Search records...',
                    lengthMenu: 'Show _MENU_ entries',
                    info: 'Showing _START_ to _END_ of _TOTAL_ entries',
                    infoEmpty: 'Showing 0 to 0 of 0 entries',
                    emptyTable: 'No records found.',
                    zeroRecords: 'No matching records found.',
                    paginate: {
                        previous: 'Previous',
                        next: 'Next',
                    },
                },
                columnDefs: [
                    {
                        targets: -1,
                        orderable: false,
                        searchable: false,
                    },
                ],
                initComplete() {
                    const wrapper = this.api().table().container();
                    const searchInput = wrapper.querySelector('.dataTables_filter input');

                    if (searchInput instanceof HTMLInputElement) {
                        searchInput.placeholder = 'Search records...';
                    }

                    configureDataTableProcessing(selector, this.api(), processingLabel);
                },
            });
        }

        function adjustSidebarTable(instance) {
            if (!instance || typeof instance.columns?.adjust !== 'function') {
                return;
            }

            window.setTimeout(function () {
                instance.columns.adjust();
            }, 0);
        }

        function renderEditIcon() {
            return `
                <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 20h9"></path>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"></path>
                </svg>
            `;
        }

        function renderViewIcon() {
            return `
                <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                </svg>
            `;
        }

        function renderDeleteIcon() {
            return `
                <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7"></path>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11v6"></path>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 11v6"></path>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7h16"></path>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7V4h6v3"></path>
                </svg>
            `;
        }

        function openSegmentModal() {
            if (!(segmentModal instanceof HTMLElement)) {
                return;
            }

            segmentModal.classList.add('open');
            segmentModal.setAttribute('aria-hidden', 'false');
            document.body.classList.add('pushv2-modal-open');
        }

        function closeSegmentModal() {
            if (!(segmentModal instanceof HTMLElement)) {
                return;
            }

            segmentModal.classList.remove('open');
            segmentModal.setAttribute('aria-hidden', 'true');
            document.body.classList.remove('pushv2-modal-open');
        }

        function notifyPushAction(message, type = 'info') {
            const text = String(message || '').trim();
            if (text === '') {
                return;
            }

            const normalizedType = String(type || 'info').trim().toLowerCase();
            const alertType = normalizedType === 'error' ? 'danger' : normalizedType;

            if (typeof window.showAppAlert === 'function') {
                window.showAppAlert(text, alertType, 5000);
                return;
            }

            if (typeof window.showReportNotification === 'function') {
                window.showReportNotification(text, alertType);
                return;
            }

            if (window.Filament?.notification) {
                const notification = Filament.notification().title(text);

                if (alertType === 'success') {
                    notification.success();
                } else if (alertType === 'danger') {
                    notification.danger();
                } else if (alertType === 'warning') {
                    notification.warning();
                } else {
                    notification.info();
                }

                notification.send();
                return;
            }

            console[alertType === 'danger' ? 'error' : 'log'](text);
        }

        function loadBooleanPreference(key, fallback = true) {
            try {
                const stored = window.localStorage?.getItem(key);
                if (stored === null) {
                    return fallback;
                }

                return stored === '1';
            } catch (error) {
                return fallback;
            }
        }

        function storeBooleanPreference(key, value) {
            try {
                window.localStorage?.setItem(key, value ? '1' : '0');
            } catch (error) {
                console.warn('Unable to persist push preference.', error);
            }
        }

        async function ensureBrowserNotificationPermission() {
            if (!dispatchProgressState.notifyOnComplete || !('Notification' in window)) {
                return 'unsupported';
            }

            if (Notification.permission === 'granted' || Notification.permission === 'denied') {
                return Notification.permission;
            }

            try {
                return await Notification.requestPermission();
            } catch (error) {
                return Notification.permission || 'default';
            }
        }

        function showBrowserCompletionNotification(message) {
            const text = String(message || '').trim();
            if (
                text === ''
                || !dispatchProgressState.notifyOnComplete
                || !('Notification' in window)
                || Notification.permission !== 'granted'
                || document.visibilityState === 'visible'
            ) {
                return;
            }

            try {
                const notification = new Notification('Push Notification V2', {
                    body: text,
                    tag: 'push-notifications-v2-dispatch',
                });

                window.setTimeout(function () {
                    notification.close();
                }, 7000);
            } catch (error) {
                console.warn('Unable to show browser notification.', error);
            }
        }

        function syncDispatchNotifyPreference() {
            const checked = dispatchProgressNotifyCheckbox instanceof HTMLInputElement
                ? dispatchProgressNotifyCheckbox.checked
                : true;

            dispatchProgressState.notifyOnComplete = checked;
            storeBooleanPreference(dispatchNotifyPreferenceKey, checked);
        }

        function setModalStatus(message = '', type = '') {
            if (segmentModalHideTimer) {
                window.clearTimeout(segmentModalHideTimer);
                segmentModalHideTimer = null;
            }

            if (String(message || '').trim() !== '' && String(type || '').trim() !== '') {
                notifyPushAction(message, type);
            }
        }

        function setFieldError(field, node, message = '') {
            const hasError = String(message || '').trim() !== '';

            if (field instanceof HTMLElement) {
                field.classList.toggle('is-invalid', hasError);
            }

            if (node instanceof HTMLElement) {
                node.textContent = String(message || '');
                node.classList.toggle('visible', hasError);
            }
        }

        function relationLabel(value = '') {
            const normalized = String(value || '').trim().toLowerCase();

            if (normalized === 'is') {
                return 'Is';
            }

            if (normalized === '>') {
                return 'Greater Than';
            }

            if (normalized === '<') {
                return 'Less Than';
            }

            return normalized !== '' ? normalized : 'Is';
        }

        function segmentFilterByType(type = '') {
            const normalized = String(type || '').trim().toLowerCase();
            return Array.isArray(segmentFilterMeta)
                ? segmentFilterMeta.find((entry) => String(entry?.key || '').trim().toLowerCase() === normalized) || null
                : null;
        }

        function filterLabelForType(type = '') {
            return String(segmentFilterByType(type)?.label || type || 'Rule').trim();
        }

        function cachePackageOptions(options = []) {
            const packageFilter = segmentFilterByType('package');
            const mergedOptions = new Map(
                (Array.isArray(packageFilter?.options) ? packageFilter.options : []).map((option) => {
                    const value = String(option?.value ?? '').trim();
                    const label = String(option?.label ?? option?.value ?? '').trim() || value;
                    return [value, { value, label }];
                })
            );

            options.forEach((option) => {
                const value = String(option?.value ?? '').trim();
                if (value === '') {
                    return;
                }

                const label = String(option?.label ?? option?.value ?? '').trim() || value;
                packageOptionLabels.set(value, label);
                mergedOptions.set(value, { value, label });
            });

            if (packageFilter) {
                packageFilter.options = Array.from(mergedOptions.values());
            }
        }

        function optionLabelForRuleValue(type = '', value = '') {
            const filter = segmentFilterByType(type);
            const normalizedValue = String(value || '').trim();
            const options = Array.isArray(filter?.options) ? filter.options : [];
            const match = options.find((option) => String(option?.value ?? '').trim() === normalizedValue);

            if (match?.label) {
                return String(match.label).trim();
            }

            if (String(type || '').trim().toLowerCase() === 'package' && packageOptionLabels.has(normalizedValue)) {
                return String(packageOptionLabels.get(normalizedValue) || normalizedValue).trim();
            }

            return normalizedValue;
        }

        function segmentTypeOptions(selectedType = '') {
            const normalizedSelected = String(selectedType || '').trim().toLowerCase();

            return ['<option value="">Select</option>'].concat((Array.isArray(segmentFilterMeta) ? segmentFilterMeta : []).map((filter) => {
                const value = String(filter?.key || '').trim();
                const selected = value.toLowerCase() === normalizedSelected ? ' selected' : '';
                return '<option value="' + escapeHtml(value) + '"' + selected + '>' + escapeHtml(String(filter?.label || value)) + '</option>';
            })).join('');
        }

        function segmentRelationOptions(type = '', selectedRelation = '') {
            const filter = segmentFilterByType(type);
            const availableRelations = Array.isArray(filter?.relations) && filter.relations.length ? filter.relations : ['is'];
            const normalizedSelected = String(selectedRelation || availableRelations[0] || 'is').trim().toLowerCase();

            return availableRelations.map((relation) => {
                const value = String(relation || '').trim();
                const selected = value.toLowerCase() === normalizedSelected ? ' selected' : '';
                return '<option value="' + escapeHtml(value) + '"' + selected + '>' + escapeHtml(relationLabel(value)) + '</option>';
            }).join('');
        }

        function segmentValueControl(type = '', selectedValue = '') {
            const filter = segmentFilterByType(type);
            const value = String(selectedValue || '').trim();

            if (Array.isArray(filter?.options) && filter.options.length) {
                const options = [...filter.options];
                if (String(type || '').trim().toLowerCase() === 'package' && value !== '' && !options.some((option) => String(option?.value ?? '').trim() === value)) {
                    options.unshift({
                        value,
                        label: optionLabelForRuleValue(type, value),
                    });
                }

                return '<select class="pushv2-select pushv2-rule-value">'
                    + ['<option value="">Select</option>'].concat(options.map((option) => {
                        const optionValue = String(option?.value || '').trim();
                        const selected = optionValue === value ? ' selected' : '';
                        return '<option value="' + escapeHtml(optionValue) + '"' + selected + '>' + escapeHtml(String(option?.label || optionValue)) + '</option>';
                    })).join('')
                    + '</select>';
            }

            return '<input class="pushv2-input pushv2-rule-value" type="text" maxlength="255" placeholder="Value" value="' + escapeHtml(value) + '">';
        }

        function buildPackageOptionsUrl({ search = '', page = 1, perPage = 10, selected = [] } = {}) {
            const params = new URLSearchParams();

            if (String(search).trim() !== '') {
                params.set('search', String(search).trim());
            }

            params.set('page', String(Math.max(1, Number(page) || 1)));
            params.set('per_page', String(Math.max(1, Number(perPage) || 10)));

            (Array.isArray(selected) ? selected : []).forEach((value) => {
                const normalizedValue = String(value ?? '').trim();
                if (normalizedValue !== '') {
                    params.append('selected[]', normalizedValue);
                }
            });

            const query = params.toString();
            return query === '' ? endpoints.packageOptions : `${endpoints.packageOptions}?${query}`;
        }

        async function hydratePackageOptionLabels(values = []) {
            const selected = Array.from(new Set((Array.isArray(values) ? values : [])
                .map((value) => String(value ?? '').trim())
                .filter((value) => value !== '' && !packageOptionLabels.has(value))));

            if (selected.length === 0) {
                return;
            }

            const response = await apiRequest(buildPackageOptionsUrl({
                selected,
                perPage: Math.max(10, selected.length),
            }), {
                method: 'GET',
            });

            cachePackageOptions(Array.isArray(response?.data) ? response.data : []);
        }

        function packageRuleValuesFromSegments(rows = []) {
            return (Array.isArray(rows) ? rows : []).flatMap((row) => (
                Array.isArray(row?.rules)
                    ? row.rules
                        .filter((rule) => String(rule?.type || '').trim().toLowerCase() === 'package')
                        .map((rule) => String(rule?.value || '').trim())
                    : []
            )).filter((value) => value !== '');
        }

        function buildSegmentRuleRow(rule = {}) {
            const row = document.createElement('div');
            const type = String(rule?.type || '').trim().toLowerCase();
            const relation = String(rule?.relation || segmentFilterByType(type)?.relations?.[0] || 'is').trim().toLowerCase();
            const value = String(rule?.value || '').trim();

            row.className = 'pushv2-segment-rule-row';
            row.innerHTML = `
                <select class="pushv2-select pushv2-rule-type">${segmentTypeOptions(type)}</select>
                <select class="pushv2-select pushv2-rule-relation">${segmentRelationOptions(type, relation)}</select>
                <div class="pushv2-rule-value-slot">${segmentValueControl(type, value)}</div>
                <button type="button" class="pushv2-segment-rule-remove" aria-label="Remove rule">-</button>
            `;

            return row;
        }

        function syncSegmentRuleRow(row) {
            if (!(row instanceof HTMLElement)) {
                return;
            }

            const typeField = row.querySelector('.pushv2-rule-type');
            const relationField = row.querySelector('.pushv2-rule-relation');
            const valueSlot = row.querySelector('.pushv2-rule-value-slot');
            const type = String(typeField?.value || '').trim().toLowerCase();
            const currentRelation = String(relationField?.value || '').trim().toLowerCase();
            const currentValue = String(row.querySelector('.pushv2-rule-value')?.value || '').trim();

            if (relationField instanceof HTMLSelectElement) {
                relationField.innerHTML = segmentRelationOptions(type, currentRelation);
            }

            if (valueSlot instanceof HTMLElement) {
                valueSlot.innerHTML = segmentValueControl(type, currentValue);
            }

            initSegmentRuleValueSelects(row);
        }

        function ensureSegmentRuleRows() {
            if (!(segmentRulesBox instanceof HTMLElement) || segmentRulesBox.children.length > 0) {
                return;
            }

            segmentRulesBox.appendChild(buildSegmentRuleRow());
            initSegmentRuleValueSelects(segmentRulesBox.lastElementChild);
        }

        function initSegmentRuleValueSelects(root = segmentRulesBox) {
            if (!select2Enabled || !window.jQuery || !(root instanceof Element)) {
                return;
            }

            const rows = root.matches('.pushv2-segment-rule-row')
                ? [root]
                : Array.from(root.querySelectorAll('.pushv2-segment-rule-row'));

            rows.forEach((row) => {
                const type = String(row.querySelector('.pushv2-rule-type')?.value || '').trim().toLowerCase();
                const valueField = row.querySelector('.pushv2-rule-value');

                if (!(valueField instanceof HTMLSelectElement) || type !== 'package') {
                    return;
                }

                const currentValue = String(valueField.value || '').trim();

                refreshSelect(valueField, {
                    dropdownParent: window.jQuery(segmentModal),
                    placeholder: 'Search packages',
                    minimumInputLength: 0,
                    ajax: {
                        delay: 250,
                        transport(params, success, failure) {
                            apiRequest(buildPackageOptionsUrl({
                                search: params?.data?.term || '',
                                page: params?.data?.page || 1,
                                perPage: 10,
                            }), {
                                method: 'GET',
                            })
                                .then(success)
                                .catch(failure);

                            return { abort() {} };
                        },
                        processResults(data) {
                            const results = Array.isArray(data?.data) ? data.data : [];
                            cachePackageOptions(results);

                            return {
                                results: results.map((option) => ({
                                    id: String(option?.value ?? '').trim(),
                                    text: String(option?.label ?? option?.value ?? '').trim(),
                                })),
                                pagination: {
                                    more: Boolean(data?.meta?.pagination?.more),
                                },
                            };
                        },
                        cache: true,
                    },
                });

                if (currentValue !== '' && !packageOptionLabels.has(currentValue)) {
                    hydratePackageOptionLabels([currentValue]).then(() => {
                        const normalizedValue = String(currentValue).trim();
                        const label = optionLabelForRuleValue('package', normalizedValue);

                        if (!Array.from(valueField.options).some((option) => String(option.value).trim() === normalizedValue)) {
                            valueField.appendChild(new Option(label, normalizedValue, true, true));
                        }

                        window.jQuery(valueField).trigger('change.select2');
                    }).catch(() => null);
                }
            });
        }

        function clearSegmentValidation() {
            setFieldError(segmentTitleInput, segmentTitleError, '');
            setFieldError(null, segmentRulesError, '');

            Array.from(segmentRulesBox?.querySelectorAll('.pushv2-rule-type, .pushv2-rule-relation, .pushv2-rule-value') || []).forEach((field) => {
                if (field instanceof HTMLElement) {
                    field.classList.remove('is-invalid');
                }
            });
        }

        function resetSegmentModal() {
            editingSegmentId = '';
            setModalStatus();
            clearSegmentValidation();

            if (segmentTitleInput instanceof HTMLInputElement) {
                segmentTitleInput.value = '';
            }

            if (segmentDescriptionInput instanceof HTMLTextAreaElement) {
                segmentDescriptionInput.value = '';
            }

            if (segmentRulesBox instanceof HTMLElement) {
                segmentRulesBox.innerHTML = '';
            }

            if (segmentModalTitle instanceof HTMLElement) {
                segmentModalTitle.textContent = 'Create Segment';
            }

            if (saveSegmentButton instanceof HTMLButtonElement) {
                saveSegmentButton.disabled = false;
                saveSegmentButton.classList.remove('loading');
                saveSegmentButton.textContent = 'Save Segment';
            }

            ensureSegmentRuleRows();
        }

        function populateSegmentModal(row = {}) {
            editingSegmentId = asId(row?.id);
            clearSegmentValidation();
            setModalStatus();

            if (segmentTitleInput instanceof HTMLInputElement) {
                segmentTitleInput.value = String(row?.title || '');
            }

            if (segmentDescriptionInput instanceof HTMLTextAreaElement) {
                segmentDescriptionInput.value = String(row?.description || '');
            }

            if (segmentRulesBox instanceof HTMLElement) {
                segmentRulesBox.innerHTML = '';
                const rules = Array.isArray(row?.rules) && row.rules.length ? row.rules : [{}];
                rules.forEach((rule) => {
                    segmentRulesBox.appendChild(buildSegmentRuleRow(rule));
                });
                initSegmentRuleValueSelects(segmentRulesBox);
            }

            if (segmentModalTitle instanceof HTMLElement) {
                segmentModalTitle.textContent = 'Edit Segment';
            }

            if (saveSegmentButton instanceof HTMLButtonElement) {
                saveSegmentButton.textContent = 'Update Segment';
            }
        }

        function readSegmentRules() {
            return Array.from(segmentRulesBox?.querySelectorAll('.pushv2-segment-rule-row') || []).map((row) => ({
                type: String(row.querySelector('.pushv2-rule-type')?.value || '').trim(),
                relation: String(row.querySelector('.pushv2-rule-relation')?.value || '').trim(),
                value: String(row.querySelector('.pushv2-rule-value')?.value || '').trim(),
            }));
        }

        function validateSegmentForm() {
            clearSegmentValidation();

            const payload = {
                title: String(segmentTitleInput?.value || '').trim(),
                description: String(segmentDescriptionInput?.value || '').trim(),
                rules: [],
            };

            let message = '';

            readSegmentRules().forEach((rule, index) => {
                const row = segmentRulesBox?.children[index];
                const typeField = row?.querySelector('.pushv2-rule-type');
                const relationField = row?.querySelector('.pushv2-rule-relation');
                const valueField = row?.querySelector('.pushv2-rule-value');

                if (rule.type === '') {
                    typeField?.classList.add('is-invalid');
                    message = message || 'Select a valid rule type.';
                }

                if (rule.relation === '') {
                    relationField?.classList.add('is-invalid');
                    message = message || 'Select a valid rule relation.';
                }

                if (rule.value === '') {
                    valueField?.classList.add('is-invalid');
                    message = message || 'Rule value is required.';
                }

                if (rule.type !== '' && rule.relation !== '' && rule.value !== '') {
                    payload.rules.push(rule);
                }
            });

            if (payload.title === '') {
                setFieldError(segmentTitleInput, segmentTitleError, 'Segment title is required.');
                message = message || 'Segment title is required.';
            }

            if (payload.rules.length === 0) {
                setFieldError(null, segmentRulesError, message || 'Add at least one valid segment rule.');
                message = message || 'Add at least one valid segment rule.';
            } else if (message !== '') {
                setFieldError(null, segmentRulesError, message);
            }

            return {
                isValid: payload.title !== '' && payload.rules.length > 0 && message === '',
                payload,
                message,
            };
        }

        function setSegmentModalBusyState(isBusy) {
            if (!(saveSegmentButton instanceof HTMLButtonElement)) {
                return;
            }

            saveSegmentButton.disabled = isBusy;
            saveSegmentButton.classList.toggle('loading', isBusy);
            saveSegmentButton.textContent = isBusy
                ? (editingSegmentId !== '' ? 'Updating...' : 'Saving...')
                : (editingSegmentId !== '' ? 'Update Segment' : 'Save Segment');
        }

        async function saveSegment() {
            hideStatus();
            setModalStatus();
            setSegmentModalBusyState(true);

            try {
                const validation = validateSegmentForm();
                if (!validation.isValid) {
                    setModalStatus(validation.message || 'Please fix the highlighted segment fields.', 'error');
                    return;
                }

                const isEditing = editingSegmentId !== '';
                const response = await apiRequest(isEditing ? endpoints.segment(editingSegmentId) : endpoints.segments, {
                    method: isEditing ? 'PUT' : 'POST',
                    body: JSON.stringify(validation.payload),
                });

                await Promise.all([loadSegments(), loadSegmentOptions(), loadReportSummary()]);
                updatePreview();
                segmentModalHideTimer = window.setTimeout(function () {
                    closeSegmentModal();
                    resetSegmentModal();
                    showStatus(response?.message || (isEditing ? 'Segment updated successfully.' : 'Segment created successfully.'), 'success');
                }, 700);
            } catch (error) {
                if (error?.validationErrors?.title) {
                    setFieldError(segmentTitleInput, segmentTitleError, String(error.validationErrors.title[0] || ''));
                }

                if (error?.validationErrors?.rules) {
                    setFieldError(null, segmentRulesError, String(error.validationErrors.rules[0] || ''));
                }

                setModalStatus(error.message || 'Unable to save segment.', 'error');
            } finally {
                setSegmentModalBusyState(false);
            }
        }

        function openComposeEditor() {
            hideStatus();
            resetForm();
            updateSidebarView('notifications');
            mainCard?.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }

        async function editMessageFromTable(id) {
            if (id === '') {
                return;
            }

            hideStatus();

            try {
                const response = await apiRequest(endpoints.message(id), {
                    method: 'GET',
                });

                if (!response?.data) {
                    throw new Error('Notification content not found.');
                }

                populateForm(response.data);
                updateSidebarView('notifications');
                mainCard?.scrollIntoView({ behavior: 'smooth', block: 'start' });
            } catch (error) {
                showStatus(error.message || 'Unable to load notification content.', 'error');
            }
        }

        async function deleteMessageFromTable(id) {
            if (id === '' || !window.confirm('Delete this V2 campaign compose? This action cannot be undone.')) {
                return;
            }

            try {
                await apiRequest(endpoints.message(id), { method: 'DELETE' });

                if (editingMessageId === id) {
                    resetForm();
                }

                await Promise.all([loadMessages(), loadReportSummary()]);
                showStatus('V2 notification content deleted successfully.', 'success');
            } catch (error) {
                showStatus(error.message || 'Unable to delete notification content.', 'error');
            }
        }

        async function deleteSegmentFromTable(id) {
            if (id === '' || !window.confirm('Delete this V2 segment? This action cannot be undone.')) {
                return;
            }

            try {
                await apiRequest(endpoints.segment(id), { method: 'DELETE' });
                await Promise.all([loadSegments(), loadSegmentOptions(), loadReportSummary()]);
                updatePreview();
                showStatus('V2 notification segment deleted successfully.', 'success');
            } catch (error) {
                showStatus(error.message || 'Unable to delete segment.', 'error');
            }
        }

        function showStatus(message, type = 'info') {
            if (statusHideTimer) {
                window.clearTimeout(statusHideTimer);
                statusHideTimer = null;
            }

            notifyPushAction(message, type);
        }

        function hideStatus() {
            if (statusHideTimer) {
                window.clearTimeout(statusHideTimer);
                statusHideTimer = null;
            }

        }

        function setBusyButtonState(button, isBusy, busyLabel = 'Working...') {
            if (!(button instanceof HTMLButtonElement)) {
                return;
            }

            if (!button.dataset.originalLabel) {
                button.dataset.originalLabel = button.textContent || '';
            }

            if (isBusy) {
                button.disabled = true;
                button.classList.add('loading');
                button.textContent = busyLabel;
                return;
            }

            button.disabled = false;
            button.classList.remove('loading');
            button.textContent = button.dataset.originalLabel || button.textContent || '';
        }

        function setButtonLabel(button, label) {
            if (!(button instanceof HTMLButtonElement)) {
                return;
            }

            button.textContent = label;
            button.dataset.originalLabel = label;
        }

        function formatElapsedSeconds(totalSeconds) {
            const seconds = Math.max(0, Number(totalSeconds) || 0);
            const hours = Math.floor(seconds / 3600);
            const minutes = Math.floor((seconds % 3600) / 60);
            const remainder = seconds % 60;
            const parts = [minutes, remainder].map((part) => String(part).padStart(2, '0'));

            if (hours > 0) {
                parts.unshift(String(hours).padStart(2, '0'));
            }

            return parts.join(':');
        }

        function dispatchStatusLabel(status) {
            return ({
                pending: 'Pending',
                queued: 'Queued',
                processing: 'In Progress',
                sent: 'Sent',
                completed: 'Completed',
                failed: 'Failed',
                invalid: 'Invalid',
                cancelled: 'Cancelled',
                scheduled: 'Scheduled',
                saved: 'Saved',
            })[String(status || '').trim().toLowerCase()] || 'Preparing';
        }

        function openDispatchProgressModal() {
            if (!(dispatchProgressModal instanceof HTMLElement)) {
                return;
            }

            dispatchProgressModal.classList.add('open');
            dispatchProgressModal.setAttribute('aria-hidden', 'false');
            document.body.classList.add('pushv2-modal-open');
        }

        function closeDispatchProgressModal() {
            if (!(dispatchProgressModal instanceof HTMLElement)) {
                return;
            }

            if (dispatchProgressState.active) {
                syncDispatchNotifyPreference();
                showStatus(
                    dispatchProgressState.notifyOnComplete
                        ? 'Notification dispatch is still running in background. We will notify you when it completes.'
                        : 'Notification dispatch is still running in background.',
                    'info'
                );
            }

            dispatchProgressModal.classList.remove('open');
            dispatchProgressModal.setAttribute('aria-hidden', 'true');
            document.body.classList.remove('pushv2-modal-open');
        }

        function buildDispatchBatchCards(total, batchSize, status, processed) {
            const totalCount = Math.max(0, Number(total) || 0);
            const safeBatchSize = Math.max(10, Number(batchSize) || 200);
            const totalBatches = totalCount > 0 ? Math.ceil(totalCount / safeBatchSize) : 0;
            const activeStatus = String(status || '').trim().toLowerCase();
            const processedCount = Math.max(0, Number(processed) || 0);
            const completedBatches = totalBatches > 0 ? Math.min(totalBatches, Math.floor(processedCount / safeBatchSize)) : 0;
            const currentBatch = ['queued', 'processing'].includes(activeStatus) && totalBatches > 0
                ? Math.min(totalBatches, Math.max(completedBatches + 1, 1))
                : (activeStatus === 'completed' ? totalBatches : 0);

            if (totalBatches <= 0) {
                return [];
            }

            const maxVisible = 8;
            let start = 1;
            if (currentBatch > maxVisible) {
                start = Math.max(1, currentBatch - 3);
            }
            let end = Math.min(totalBatches, start + maxVisible - 1);
            start = Math.max(1, end - maxVisible + 1);

            const cards = [];

            for (let batchNo = start; batchNo <= end; batchNo += 1) {
                let cardStatus = 'pending';

                if (activeStatus === 'failed' && batchNo === currentBatch && currentBatch > 0) {
                    cardStatus = 'failed';
                } else if (batchNo <= completedBatches) {
                    cardStatus = 'completed';
                } else if (['queued', 'processing'].includes(activeStatus) && batchNo === currentBatch) {
                    cardStatus = 'processing';
                } else if (activeStatus === 'completed') {
                    cardStatus = 'completed';
                }

                cards.push({
                    batchNo,
                    rangeStart: ((batchNo - 1) * safeBatchSize) + 1,
                    rangeEnd: Math.min(totalCount, batchNo * safeBatchSize),
                    status: cardStatus,
                });
            }

            return cards;
        }

        function renderDispatchProgress() {
            const payload = dispatchProgressState.payload || {};
            const status = String(payload.status || '').trim().toLowerCase();
            const total = Math.max(0, Number(payload.total_count) || 0);
            const processed = Math.max(0, Number(payload.processed_count) || 0);
            const percent = Math.max(0, Math.min(100, Number(payload.progress_percent) || 0));
            const stageLabel = String(payload.stage_label || dispatchProgressState.pendingStageLabel || 'Preparing notification...');
            const stageCopy = String(payload.dispatch_status_message || dispatchProgressState.pendingCopy || 'We are processing recipients in batches. This may take a few minutes.');
            const batchCards = buildDispatchBatchCards(total, payload.batch_size || 200, status, processed);
            const issues = Array.isArray(payload.issues) ? payload.issues : [];

            if (dispatchProgressTitle instanceof HTMLElement) {
                dispatchProgressTitle.textContent = total > 0 ? 'Sending Notification...' : 'Preparing Notification...';
            }
            if (dispatchProgressCaption instanceof HTMLElement) {
                dispatchProgressCaption.textContent = total > 0
                    ? 'We are processing recipients in batches. This may take a few minutes.'
                    : 'We are preparing recipients and validating the dispatch.';
            }
            if (dispatchProgressStage instanceof HTMLElement) {
                dispatchProgressStage.textContent = stageLabel;
            }
            if (dispatchProgressCopy instanceof HTMLElement) {
                dispatchProgressCopy.textContent = stageCopy;
            }
            if (dispatchProgressStatus instanceof HTMLElement) {
                dispatchProgressStatus.textContent = dispatchStatusLabel(status);
            }
            if (dispatchProgressElapsed instanceof HTMLElement) {
                dispatchProgressElapsed.textContent = `${formatElapsedSeconds(payload.elapsed_seconds || 0)} elapsed`;
            }
            if (dispatchProgressCounts instanceof HTMLElement) {
                dispatchProgressCounts.textContent = `${processed.toLocaleString()} / ${total.toLocaleString()}`;
            }
            if (dispatchProgressPercent instanceof HTMLElement) {
                dispatchProgressPercent.textContent = `${percent}%`;
            }
            if (dispatchProgressFill instanceof HTMLElement) {
                dispatchProgressFill.style.width = `${percent}%`;
            }
            if (dispatchProgressBatches instanceof HTMLElement) {
                dispatchProgressBatches.innerHTML = batchCards.map((card) => `
                    <div class="pushv2-progress-batch is-${escapeHtml(card.status)}">
                        <div class="pushv2-progress-batch-label">Batch ${escapeHtml(String(card.batchNo))}</div>
                        <div class="pushv2-progress-batch-range">${escapeHtml(String(card.rangeStart))} - ${escapeHtml(String(card.rangeEnd))}</div>
                        <div class="pushv2-progress-batch-status">${escapeHtml(dispatchStatusLabel(card.status))}</div>
                    </div>
                `).join('');
            }
            if (dispatchProgressIssuesCount instanceof HTMLElement) {
                dispatchProgressIssuesCount.textContent = `${issues.length} found`;
            }
            if (dispatchProgressIssuesList instanceof HTMLElement) {
                if (!issues.length) {
                    dispatchProgressIssuesList.innerHTML = '<p class="pushv2-progress-empty">No issues found yet.</p>';
                } else {
                    dispatchProgressIssuesList.innerHTML = issues.map((issue) => `
                        <div class="pushv2-progress-issue">
                            <div>${escapeHtml(String(issue.reference || issue.id || '-'))}</div>
                            <div>${escapeHtml(String(issue.message || 'Delivery skipped during dispatch.'))}</div>
                            <div class="pushv2-progress-issue-status">${escapeHtml(dispatchStatusLabel(issue.status || 'failed'))}</div>
                        </div>
                    `).join('');
                }
            }
        }

        function stopDispatchProgressPolling() {
            if (dispatchProgressState.pollTimer) {
                window.clearInterval(dispatchProgressState.pollTimer);
                dispatchProgressState.pollTimer = null;
            }
        }

        async function pollDispatchProgress() {
            if (!dispatchProgressState.active || dispatchProgressState.messageId === '' || dispatchProgressState.awaitingDispatch) {
                return;
            }

            if (dispatchProgressState.pollRequest) {
                return dispatchProgressState.pollRequest;
            }

            const trackedMessageId = asId(dispatchProgressState.messageId);
            const request = (async () => {
                try {
                    const response = await apiRequest(endpoints.messageDispatchProgress(trackedMessageId), { method: 'GET' });

                    if (!idEquals(trackedMessageId, dispatchProgressState.messageId)) {
                        return;
                    }

                    dispatchProgressState.payload = response?.data || {};
                    renderDispatchProgress();
                    updateEditorMeta();

                    const status = String(dispatchProgressState.payload?.status || '').trim().toLowerCase();
                    if (['completed', 'failed', 'cancelled'].includes(status)) {
                        if (dispatchProgressState.completing) {
                            return;
                        }

                        dispatchProgressState.completing = true;
                        const completedMessageId = asId(dispatchProgressState.messageId);
                        dispatchProgressState.active = false;
                        stopDispatchProgressPolling();
                        await Promise.all([loadMessages(), loadReportSummary()]);

                        if (editingMessageId !== '' && idEquals(editingMessageId, dispatchProgressState.messageId)) {
                            const refreshed = await apiRequest(endpoints.message(dispatchProgressState.messageId), { method: 'GET' });
                            if (refreshed?.data) {
                                populateForm(refreshed.data);
                            }
                        } else {
                            updateEditorMeta();
                        }

                        syncDispatchNotifyPreference();
                        const completionMessage = dispatchProgressState.payload?.dispatch_status_message || 'Push Notification V2 dispatch completed.';
                        if (!hasShownDispatchCompletion(completedMessageId)) {
                            markDispatchCompletionShown(completedMessageId);
                            showStatus(completionMessage, status === 'completed' ? 'success' : 'error');
                            showBrowserCompletionNotification(completionMessage);
                        }
                    }
                } catch (error) {
                    console.warn('Unable to refresh V2 dispatch progress.', error);
                } finally {
                    if (dispatchProgressState.pollRequest === request) {
                        dispatchProgressState.pollRequest = null;
                    }
                }
            })();

            dispatchProgressState.pollRequest = request;
            return request;
        }

        function startDispatchProgress(messageId, pendingStageLabel, pendingCopy) {
            syncDispatchNotifyPreference();
            dispatchProgressState.active = true;
            dispatchProgressState.messageId = asId(messageId);
            dispatchProgressState.completing = false;
            dispatchProgressState.awaitingDispatch = true;
            dispatchProgressState.pollRequest = null;
            if (dispatchProgressState.messageId !== '') {
                dispatchCompletionNotifications.delete(dispatchProgressState.messageId);
            }
            dispatchProgressState.pendingStageLabel = String(pendingStageLabel || 'Preparing notification...');
            dispatchProgressState.pendingCopy = String(pendingCopy || 'We are processing recipients in batches. This may take a few minutes.');
            dispatchProgressState.payload = null;
            void ensureBrowserNotificationPermission();
            renderDispatchProgress();
            openDispatchProgressModal();
            updateEditorMeta();
            stopDispatchProgressPolling();
            dispatchProgressState.pollTimer = window.setInterval(() => {
                void pollDispatchProgress();
            }, 2500);
        }

        function formatDate(value) {
            if (!value) {
                return '-';
            }

            const date = new Date(value);
            if (Number.isNaN(date.getTime())) {
                return String(value);
            }

            return date.toLocaleString();
        }

        function formatTableDate(value) {
            if (!value) {
                return '-';
            }

            const date = new Date(value);
            if (Number.isNaN(date.getTime())) {
                return String(value);
            }

            return date.toLocaleString('en-US', {
                year: 'numeric',
                month: 'short',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
            });
        }

        function shortText(value, maxLength = 110) {
            const text = String(value || '').trim();
            if (text.length <= maxLength) {
                return text;
            }

            return text.slice(0, maxLength - 3) + '...';
        }

        function select2BaseConfig(overrides = {}) {
            return {
                width: '100%',
                ...overrides,
            };
        }

        function refreshSelect(select, config = {}) {
            if (!(select instanceof HTMLSelectElement) || !select2Enabled) {
                return;
            }

            const $select = window.jQuery(select);
            if ($select.data('select2')) {
                $select.select2('destroy');
            }

            $select.select2(select2BaseConfig(config));
        }

        function refreshAllSelects() {
            refreshSelect(deviceSelect, {
                minimumResultsForSearch: Infinity,
            });
            refreshSelect(prioritySelect, {
                minimumResultsForSearch: Infinity,
            });
            refreshSelect(thumbTypeSelect, {
                minimumResultsForSearch: Infinity,
            });
            refreshSelect(typeSelect, {
                minimumResultsForSearch: Infinity,
            });
            refreshSelect(segmentsSelect, {
                closeOnSelect: false,
                placeholder: 'Select notification segments',
            });
        }

        function updatePreviewTime() {
            if (!(previewTime instanceof HTMLElement)) {
                return;
            }

            previewTime.textContent = new Intl.DateTimeFormat('en-US', {
                hour: 'numeric',
                minute: '2-digit',
            }).format(new Date());
        }

        function selectedSegmentIds() {
            return Array.from(segmentsSelect?.selectedOptions || [])
                .map((option) => asId(option.value))
                .filter((id) => id !== '');
        }

        function selectedSegmentTitles() {
            return Array.from(segmentsSelect?.selectedOptions || [])
                .map((option) => String(option.textContent || '').trim())
                .filter((value) => value !== '');
        }

        function selectedDeviceTypes() {
            const value = String(deviceSelect?.value || '').trim().toLowerCase();
            return value ? [value] : [];
        }

        function currentTargetMode() {
            const selected = targetModeInputs.find((input) => input instanceof HTMLInputElement && input.checked);

            return String(selected?.value || 'segment').trim().toLowerCase() || 'segment';
        }

        function setTargetMode(mode = 'segment') {
            const normalizedMode = String(mode || 'segment').trim().toLowerCase() || 'segment';

            targetModeInputs.forEach((input) => {
                if (!(input instanceof HTMLInputElement)) {
                    return;
                }

                input.checked = input.value === normalizedMode;
            });

            document.querySelectorAll('[data-target-mode-card]').forEach((card) => {
                const isActive = String(card.getAttribute('data-target-mode-card') || '').trim().toLowerCase() === normalizedMode;
                card.classList.toggle('active', isActive);
            });

            topicField?.classList.toggle('pushv2-hidden', normalizedMode !== 'topic');
            segmentField?.classList.toggle('pushv2-hidden', normalizedMode !== 'segment');
            tokenField?.classList.toggle('pushv2-hidden', normalizedMode !== 'token');
        }

        function syncActionRadiosFromSelect() {
            const mode = String(actionSelect?.value || 'now').trim().toLowerCase() === 'schedule' ? 'schedule' : 'now';

            if (actionNowRadio instanceof HTMLInputElement) {
                actionNowRadio.checked = mode === 'now';
            }

            if (actionScheduleRadio instanceof HTMLInputElement) {
                actionScheduleRadio.checked = mode === 'schedule';
            }
        }

        function updateSidebarView(view = 'notifications') {
            const normalizedView = String(view || 'notifications').trim().toLowerCase() || 'notifications';
            currentSidebarView = normalizedView;
            const showNotifications = normalizedView === 'notifications';

            document.querySelectorAll('[data-sidebar-view]').forEach((button) => {
                const isActive = String(button.getAttribute('data-sidebar-view') || '').trim().toLowerCase() === normalizedView;
                button.classList.toggle('active', isActive);
            });

            const showCampaigns = normalizedView === 'campaigns';
            const showSegments = normalizedView === 'segments';
            const showReports = normalizedView === 'reports';
            const showPanel = showCampaigns || showSegments || normalizedView === 'reports' || normalizedView === 'settings';

            typeWrap?.classList.toggle('pushv2-hidden', !showNotifications);
            mainCard?.classList.toggle('pushv2-hidden', !showNotifications);
            sidebarPanel?.classList.toggle('pushv2-hidden', !showPanel);
            messageList?.classList.toggle('pushv2-hidden', !showCampaigns);
            segmentList?.classList.toggle('pushv2-hidden', !showSegments);
            reportList?.classList.toggle('pushv2-hidden', !showReports);

            if (sidebarPrimaryButton instanceof HTMLButtonElement) {
                const shouldShowPrimary = showCampaigns || showSegments;
                sidebarPrimaryButton.classList.toggle('pushv2-hidden', !shouldShowPrimary);
                sidebarPrimaryButton.textContent = showSegments ? 'Create Segment' : 'Create Compose';
            }

            if (sidebarPlaceholder instanceof HTMLElement) {
                sidebarPlaceholder.classList.toggle('pushv2-hidden', showCampaigns || showSegments || showReports);
            }

            if (!(sidebarPanelTitle instanceof HTMLElement) || !(sidebarPanelCopy instanceof HTMLElement)) {
                return;
            }

            if (showCampaigns) {
                sidebarPanelTitle.textContent = 'Campaign Compose';
                sidebarPanelCopy.textContent = 'Load an existing V2 compose into the editor.';
                if (sidebarPlaceholder instanceof HTMLElement) {
                    sidebarPlaceholder.textContent = '';
                }
                adjustSidebarTable(messageDataTable);
                return;
            }

            if (showSegments) {
                sidebarPanelTitle.textContent = 'Saved Notification Segments';
                sidebarPanelCopy.textContent = 'Manage saved audience groups for V2 dispatch.';
                if (sidebarPlaceholder instanceof HTMLElement) {
                    sidebarPlaceholder.textContent = '';
                }
                adjustSidebarTable(segmentDataTable);
                return;
            }

            if (showReports) {
                sidebarPanelTitle.textContent = 'Reports';
                sidebarPanelCopy.textContent = 'Saved compose, segment totals, and recent delivery snapshots for the active V2 app.';
                renderReportsPanel();
                return;
            }

            sidebarPanelTitle.textContent = normalizedView === 'settings' ? 'Settings' : 'Reports';
            sidebarPanelCopy.textContent = normalizedView === 'settings'
                ? 'Cloud Tasks, payload keys, and current V2 delivery rules stay separate from the existing push page.'
                : 'Saved compose and segment counts update here as your V2 data refreshes.';

            if (sidebarPlaceholder instanceof HTMLElement) {
                sidebarPlaceholder.textContent = normalizedView === 'settings'
                    ? 'Use the editor on the right to manage the active V2 compose. Settings here are informational only for now.'
                    : 'Refresh the page to update saved compose and audience totals.';
            }
        }

        function setInlineThumbPreview(url = '') {
            const previewUrl = String(url || '').trim();
            if (!(inlineThumbPreview instanceof HTMLElement) || !(inlineThumbImage instanceof HTMLImageElement)) {
                return;
            }

            if (previewUrl !== '') {
                inlineThumbImage.src = previewUrl;
                inlineThumbPreview.classList.add('has-image');
                return;
            }

            inlineThumbImage.removeAttribute('src');
            inlineThumbPreview.classList.remove('has-image');
        }

        function updateThumbTypeField() {
            const isUrl = String(thumbTypeSelect?.value || 'browse').trim().toLowerCase() === 'url';

            thumbUrlField?.classList.toggle('pushv2-hidden', !isUrl);
            thumbFileField?.classList.toggle('pushv2-hidden', isUrl);
        }

        function updateActionField() {
            const isScheduled = String(actionSelect?.value || 'now').trim().toLowerCase() === 'schedule';

            scheduleField?.classList.toggle('pushv2-hidden', !isScheduled);
            syncActionRadiosFromSelect();
        }

        function currentPreviewImageUrl() {
            if (String(thumbTypeSelect?.value || 'browse').trim().toLowerCase() === 'url') {
                return String(thumbUrlInput?.value || '').trim();
            }

            const file = thumbFileInput?.files && thumbFileInput.files[0] ? thumbFileInput.files[0] : null;
            return file ? URL.createObjectURL(file) : (editingMessageThumb || '');
        }

        function audienceEstimate() {
            const mode = currentTargetMode();
            const topic = String(topicInput?.value || '').trim();
            const token = String(tokenInput?.value || '').trim();
            const segments = selectedSegmentTitles();

            if (mode === 'token') {
                return token !== '' ? 1 : 0;
            }

            if (mode === 'topic') {
                return topic !== '' ? 1 : 0;
            }

            return segments.length;
        }

        function updatePreview() {
            updatePreviewTime();

            const title = String(titleInput?.value || '').trim() || 'Notification title';
            const description = String(descriptionInput?.value || '').trim() || 'Notification description will appear here.';
            const segments = selectedSegmentTitles();
            const targetMode = currentTargetMode();
            const topic = String(topicInput?.value || '').trim();
            const token = String(tokenInput?.value || '').trim();
            const device = String(deviceSelect?.selectedOptions?.[0]?.textContent || deviceSelect?.value || 'All').trim();
            const action = String(actionSelect?.value || 'now').trim().toLowerCase() === 'schedule'
                ? ('Scheduled for ' + (scheduleInput?.value ? formatDate(scheduleInput.value) : 'a future time'))
                : 'Now';
            const deeplink = String(deeplinkInput?.value || '').trim();
            const imageUrl = currentPreviewImageUrl();
            const format = String(formatInput?.value || 'push').trim().toLowerCase();
            const mode = String(actionSelect?.value || 'now').trim().toLowerCase();
            const totalRecipients = audienceEstimate();
            const estimatedViewsValue = totalRecipients <= 0
                ? 0
                : (totalRecipients === 1 ? 1 : Math.max(1, Math.round(totalRecipients * (format === 'push' ? 0.38 : 0.31))));
            const engagementValue = totalRecipients <= 0
                ? 0
                : Math.min(100, Math.round((estimatedViewsValue / totalRecipients) * 100));
            const frequencyCount = String(inappFrequencyCount?.value || '5').trim() || '5';
            const frequencyUnit = String(inappFrequencyUnit?.value || 'hour').trim() || 'hour';
            const autoSeconds = String(inappAutoSeconds?.value || '10').trim() || '10';
            const drawerPriority = String(prioritySelect?.value || 'normal').trim().toLowerCase();

            previewTitle.textContent = title;
            previewBody.textContent = shortText(description, 150);
            if (inappPreviewTitle instanceof HTMLElement) {
                inappPreviewTitle.textContent = title;
            }
            if (inappPreviewBody instanceof HTMLElement) {
                inappPreviewBody.textContent = shortText(description, 180);
            }
            if (drawerPreviewTitle instanceof HTMLElement) {
                drawerPreviewTitle.textContent = title;
            }
            if (drawerPreviewBody instanceof HTMLElement) {
                drawerPreviewBody.textContent = shortText(description, 110);
            }
            if (targetCount instanceof HTMLElement) {
                if (targetMode === 'topic') {
                    targetCount.textContent = topic !== '' ? '1 topic selected' : '0 recipients';
                } else if (targetMode === 'token') {
                    targetCount.textContent = token !== '' ? '1 recipient' : '0 recipients';
                } else {
                    targetCount.textContent = totalRecipients + (totalRecipients === 1 ? ' recipient' : ' recipients');
                }
            }
            if (recipientChip instanceof HTMLElement) {
                recipientChip.innerHTML = renderRecipientChip(totalRecipients);
            }
            if (statFormat instanceof HTMLElement) {
                statFormat.textContent = format === 'inapp' ? 'In-App' : (format === 'drawer' ? 'Drawer' : 'Push');
            }
            if (statMode instanceof HTMLElement) {
                statMode.textContent = mode === 'schedule' ? 'Schedule' : 'Now';
            }
            if (previewTotal instanceof HTMLElement) {
                previewTotal.textContent = String(totalRecipients);
            }
            if (previewViews instanceof HTMLElement) {
                previewViews.textContent = String(estimatedViewsValue);
            }
            if (previewEngagement instanceof HTMLElement) {
                previewEngagement.textContent = String(engagementValue) + '%';
            }
            if (inappPreviewHint instanceof HTMLElement) {
                inappPreviewHint.textContent = 'Shows ' + frequencyCount + ' times per ' + frequencyUnit + ' • '
                    + (inappClosable?.checked ? 'Closable' : 'Pinned') + ' • '
                    + (inappAutoDismiss?.checked ? ('Auto-dismiss after ' + autoSeconds + 's') : 'Manual dismiss');
            }
            if (drawerPreviewHint instanceof HTMLElement) {
                drawerPreviewHint.textContent = 'Priority: ' + (drawerPriority.charAt(0).toUpperCase() + drawerPriority.slice(1)) + ' • Just now';
            }

            if (imageUrl) {
                previewImage.src = imageUrl;
                previewImage.classList.add('visible');
            } else {
                previewImage.removeAttribute('src');
                previewImage.classList.remove('visible');
            }

            setInlineThumbPreview(imageUrl);
        }

        function updateEditorMeta() {
            const isEditing = editingMessageId !== '';
            const action = String(actionSelect?.value || 'now').trim().toLowerCase();
            const targetMode = currentTargetMode();
            const isDispatchLocked = dispatchProgressState.active
                && editingMessageId !== ''
                && idEquals(dispatchProgressState.messageId, editingMessageId);
            const hasPersistedActiveDispatch = ['queued', 'processing'].includes(String(editingMessageDispatchStatus || '').trim().toLowerCase());
            const isContentLocked = isDispatchLocked || hasPersistedActiveDispatch;
            const canDispatch = isEditing && action !== 'schedule' && targetMode === 'segment' && !isContentLocked;

            if (dispatchButton instanceof HTMLButtonElement) {
                dispatchButton.disabled = !canDispatch;
                dispatchButton.classList.toggle('is-disabled', !canDispatch);
            }

            if (saveButton instanceof HTMLButtonElement) {
                saveButton.disabled = isContentLocked;
                saveButton.classList.toggle('is-disabled', isContentLocked);
            }

            if (isEditing) {
                setButtonLabel(saveButton, 'Update Content');
                setButtonLabel(dispatchButton, 'Send Notification');
                if (editorCopy instanceof HTMLElement) {
                    editorCopy.textContent = isContentLocked
                        ? 'Notification sending is in progress. Update Content is temporarily disabled until dispatch completes.'
                        : (action === 'schedule'
                        ? 'Edit the stored V2 compose and save to re-sync Cloud Tasks scheduling. Scheduled content does not use the send button.'
                        : 'Edit the stored V2 compose and use Send Notification only when you want an immediate manual dispatch.');
                }
                saveNote.textContent = isContentLocked
                    ? 'Update Content stays disabled while Send Notification is processing for this compose.'
                    : (action === 'schedule'
                    ? 'Edit mode updates the stored compose and re-syncs the Cloud Tasks schedule. Use "Send Notification" only for manual immediate dispatch.'
                    : (targetMode === 'segment'
                        ? 'Edit mode updates the stored compose first. Use "Send Notification" to dispatch the current saved content.'
                        : 'Segment targeting is the active V2 delivery path right now. Switch back to Segment before sending.'));
                return;
            }

            setButtonLabel(saveButton, 'Save Content');
            setButtonLabel(dispatchButton, 'Send Notification');
            if (editorCopy instanceof HTMLElement) {
                editorCopy.textContent = 'Save draft content first, then use Send Notification only when you want to dispatch immediately from the stored V2 compose.';
            }
            saveNote.textContent = action === 'schedule'
                ? 'Create mode saves the schedule and links Cloud Tasks automatically. Delivery begins from the saved schedule without using the send button.'
                : 'Create mode saves the content only. Push delivery happens only when you click the explicit send button.';
        }

        function updateFormatCards() {
            const format = String(formatInput?.value || 'push').trim().toLowerCase() || 'push';

            Array.from(document.querySelectorAll('[data-format]')).forEach((element) => {
                element.classList.toggle('active', String(element.getAttribute('data-format') || '') === format);
            });

            pushPreview?.classList.toggle('pushv2-hidden', format !== 'push');
            inappPreview?.classList.toggle('pushv2-hidden', format !== 'inapp');
            drawerPreview?.classList.toggle('pushv2-hidden', format !== 'drawer');
            drawerPriorityField?.classList.toggle('pushv2-hidden', format !== 'drawer');
            inappSettings?.classList.toggle('pushv2-hidden', format !== 'inapp');

            if (formatLabel instanceof HTMLElement) {
                formatLabel.textContent = 'Ready to Send';
            }

            if (editorTitle instanceof HTMLElement) {
                editorTitle.textContent = format === 'inapp'
                    ? 'In-App Message'
                    : (format === 'drawer' ? 'Drawer Message' : 'Push Notification (FCM)');
            }

            if (sectionIcon instanceof HTMLElement) {
                sectionIcon.innerHTML = consoleIconSvg(format);
                sectionIcon.style.background = format === 'inapp'
                    ? '#efe7ff'
                    : (format === 'drawer' ? '#ffedd5' : '#e8f0fe');
                sectionIcon.style.color = format === 'inapp'
                    ? '#7c3aed'
                    : (format === 'drawer' ? '#ea580c' : '#1a73e8');
            }
        }

        async function fetchBearerToken(forceRefresh = false) {
            if (!forceRefresh && bearerToken) {
                return bearerToken;
            }

            const response = await fetch(endpoints.token, {
                method: 'GET',
                credentials: 'same-origin',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': csrf,
                },
            });

            const data = await response.json().catch(() => ({}));
            if (!response.ok || !data.token) {
                throw new Error(data.message || 'Unable to fetch bearer token.');
            }

            bearerToken = String(data.token);

            return bearerToken;
        }

        async function apiRequest(url, options = {}, hasRetried = false) {
            const token = await fetchBearerToken(hasRetried);
            const response = await fetch(url, {
                credentials: 'same-origin',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'Authorization': 'Bearer ' + token,
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': csrf,
                },
                ...options,
            });

            const data = await response.json().catch(() => ({}));
            if (!response.ok) {
                if (response.status === 401 && !hasRetried) {
                    bearerToken = '';
                    return apiRequest(url, options, true);
                }

                const error = new Error(data.message || 'Request failed.');
                error.validationErrors = data.errors || data.validationErrors || {};
                throw error;
            }

            return data;
        }

        async function apiFormRequest(url, formData, hasRetried = false) {
            const token = await fetchBearerToken(hasRetried);
            const response = await fetch(url, {
                method: 'POST',
                credentials: 'same-origin',
                headers: {
                    'Accept': 'application/json',
                    'Authorization': 'Bearer ' + token,
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': csrf,
                },
                body: formData,
            });

            const data = await response.json().catch(() => ({}));
            if (!response.ok) {
                if (response.status === 401 && !hasRetried) {
                    bearerToken = '';
                    return apiFormRequest(url, formData, true);
                }

                throw new Error(data.message || 'Upload failed.');
            }

            return data;
        }

        function renderDeviceOptions() {
            const values = Array.isArray(deviceTypeMeta) && deviceTypeMeta.length
                ? deviceTypeMeta
                : ['all', 'android', 'ios', 'web', 'other'];

            const existingValue = String(deviceSelect?.value || 'all').trim().toLowerCase() || 'all';
            deviceSelect.innerHTML = values.map((value) => {
                const normalized = String(value || '').trim().toLowerCase();
                const label = normalized === 'all'
                    ? 'All'
                    : normalized.charAt(0).toUpperCase() + normalized.slice(1);

                return '<option value="' + escapeHtml(normalized) + '">' + escapeHtml(label) + '</option>';
            }).join('');

            deviceSelect.value = values.includes(existingValue) ? existingValue : 'all';
            refreshSelect(deviceSelect, {
                minimumResultsForSearch: Infinity,
            });
        }

        function renderSegmentOptions() {
            const selectedIds = new Set(selectedSegmentIds());

            segmentsSelect.innerHTML = segmentOptions.map((segment) => (
                '<option value="' + escapeHtml(asId(segment.id)) + '">' + escapeHtml(segment.title || 'Segment') + '</option>'
            )).join('');

            Array.from(segmentsSelect.options).forEach((option) => {
                option.selected = selectedIds.has(asId(option.value));
            });

            refreshSelect(segmentsSelect, {
                closeOnSelect: false,
                placeholder: 'Select notification segments',
            });
            renderSegmentCards();
            updatePreview();
        }

        function renderMessageCards() {
            if (!(messageList instanceof HTMLElement) || !(messageTableBody instanceof HTMLElement)) {
                return;
            }

            messageDataTable = destroyDataTable(messageDataTable, '#pushv2-campaigns-table');

            messageTableBody.innerHTML = messageRows.map((row) => {
                const id = asId(row.id);
                const title = String(row.title || '-').trim() || '-';
                const description = String(row.description || '').trim();
                const actionLabel = String(row.action || 'now').trim().toUpperCase();
                const typeLabel = normalizeMessageTypeLabel(row.type);
                const devices = (Array.isArray(row.device_types) && row.device_types.length
                    ? row.device_types
                    : (row.device ? [row.device] : [])
                ).map((device) => String(device || '').toUpperCase()).filter(Boolean);
                const segments = Array.isArray(row.segments) ? row.segments : [];
                const segmentCount = Number(row.segment_count || 0);
                const segmentTitles = segments.length
                    ? segments.map((segment) => segment?.title || 'Segment')
                    : (segmentCount > 0
                        ? [String(segmentCount) + ' segment' + (segmentCount === 1 ? '' : 's')]
                        : []);

                return `
                    <tr>
                        <td>${escapeHtml(id)}</td>
                        <td>
                            <div class="notif-message-title">
                                <strong>${escapeHtml(title)}</strong>
                                <span class="notif-muted">${escapeHtml(description || '-')}</span>
                            </div>
                        </td>
                        <td>${renderPillStack(segmentTitles, 'segment')}</td>
                        <td>${renderPillStack(devices, 'device')}</td>
                        <td>${renderPill(typeLabel, 'muted')}</td>
                        <td>${escapeHtml(actionLabel)}</td>
                        <td data-order="${escapeHtml(String(row.created_at || ''))}">${escapeHtml(formatTableDate(row.created_at))}</td>
                        <td>
                            <div class="action-buttons">
                                <button type="button" class="action-button view pushv2-message-edit-btn" title="View or Edit Compose" data-message-id="${escapeHtml(id)}">${renderViewIcon()}</button>
                                <button type="button" class="action-button delete pushv2-message-delete-btn" title="Delete compose" data-message-id="${escapeHtml(id)}">${renderDeleteIcon()}</button>
                            </div>
                        </td>
                    </tr>
                `;
            }).join('');

            messageDataTable = initializeSidebarTable('#pushv2-campaigns-table', [[6, 'desc']], 'Loading saved compose...');
        }

        function renderSegmentCards() {
            if (!(segmentList instanceof HTMLElement) || !(segmentTableBody instanceof HTMLElement)) {
                return;
            }

            segmentDataTable = destroyDataTable(segmentDataTable, '#pushv2-segments-table');

            segmentTableBody.innerHTML = segmentRows.map((row) => {
                const id = asId(row.id);
                const description = String(row.description || '').trim();
                const rulesCount = Number(row.rule_count || (Array.isArray(row.rules) ? row.rules.length : 0));

                return `
                    <tr>
                        <td>${escapeHtml(id)}</td>
                        <td>
                            <div class="notif-message-title">
                                <strong>${escapeHtml(row.title || 'Segment')}</strong>
                            </div>
                        </td>
                        <td>${escapeHtml(description || '-')}</td>
                        <td><button type="button" class="notif-plain-link pushv2-segment-edit-btn" data-segment-id="${escapeHtml(id)}">View ${escapeHtml(String(rulesCount))} rule(s)</button></td>
                        <td data-order="${escapeHtml(String(row.created_at || ''))}">${escapeHtml(formatTableDate(row.created_at))}</td>
                        <td>
                            <div class="action-buttons">
                                <button type="button" class="action-button view pushv2-segment-edit-btn" title="View or Edit segment" data-segment-id="${escapeHtml(id)}">${renderViewIcon()}</button>
                                <button type="button" class="action-button delete pushv2-segment-delete-btn" title="Delete segment" data-segment-id="${escapeHtml(id)}">${renderDeleteIcon()}</button>
                            </div>
                        </td>
                    </tr>
                `;
            }).join('');

            segmentDataTable = initializeSidebarTable('#pushv2-segments-table', [[4, 'desc']], 'Loading segments...');
        }

        function updateSidebarStats() {
            if (messageCount instanceof HTMLElement) {
                messageCount.textContent = String(messageRows.length);
            }

            if (segmentCount instanceof HTMLElement) {
                segmentCount.textContent = String(segmentRows.length);
            }

            renderReportsPanel();
        }

        function formatInteger(value) {
            const normalized = Number(value || 0);

            if (!Number.isFinite(normalized)) {
                return '0';
            }

            return new Intl.NumberFormat('en-US').format(normalized);
        }

        function normalizeCampaignStatus(value) {
            return String(value || '').trim().toLowerCase();
        }

        function campaignStatusVariant(status) {
            const normalized = normalizeCampaignStatus(status);

            if (normalized === 'completed') {
                return 'success';
            }

            if (normalized === 'failed' || normalized === 'cancelled') {
                return 'danger';
            }

            if (normalized === 'processing' || normalized === 'queued') {
                return 'warning';
            }

            return 'muted';
        }

        function campaignStatusLabel(status) {
            const normalized = normalizeCampaignStatus(status);

            if (normalized === '') {
                return 'Draft';
            }

            return normalized
                .split('_')
                .map((part) => part ? part.charAt(0).toUpperCase() + part.slice(1) : '')
                .join(' ');
        }

        function renderReportsPanel() {
            if (!(reportBody instanceof HTMLElement)) {
                return;
            }

            const summary = reportSummary && typeof reportSummary === 'object' ? reportSummary : {};
            const savedCampaigns = Number(summary.saved_campaigns ?? messageRows.length ?? 0);
            const savedSegments = Number(summary.saved_segments ?? segmentRows.length ?? 0);
            const dispatchRuns = Number(summary.dispatch_runs ?? 0);
            const completedDispatches = Number(summary.completed_dispatches ?? 0);
            const failedDispatches = Number(summary.failed_dispatches ?? 0);
            const totalRecipients = Number(summary.total_recipients ?? 0);
            const totalSent = Number(summary.total_sent ?? 0);
            const totalInvalid = Number(summary.total_invalid ?? 0);
            const latestCampaign = summary.latest_campaign && typeof summary.latest_campaign === 'object'
                ? summary.latest_campaign
                : null;
            const recentCampaigns = Array.isArray(summary.recent_campaigns) ? summary.recent_campaigns : [];

            if (savedCampaigns === 0 && savedSegments === 0 && recentCampaigns.length === 0) {
                reportBody.innerHTML = `
                    <div class="pushv2-report-empty">
                        <div class="pushv2-report-section-title">No report data yet</div>
                        <p class="pushv2-report-empty-copy">Create a V2 compose or save a segment to start seeing summary activity here.</p>
                    </div>
                `;
                return;
            }

            const latestSegments = Array.isArray(latestCampaign?.filters?.segment_ids)
                ? latestCampaign.filters.segment_ids.length
                : 0;
            const latestDevices = Array.isArray(latestCampaign?.filters?.device_types)
                ? latestCampaign.filters.device_types.map((device) => String(device || '').toUpperCase()).filter(Boolean)
                : [];
            const deliveryRate = totalRecipients > 0 ? Math.round((totalSent / totalRecipients) * 100) : 0;

            const latestCampaignHtml = latestCampaign
                ? `
                    <div class="pushv2-report-activity-head">
                        <div class="pushv2-report-activity-title">${escapeHtml(latestCampaign.name || latestCampaign.title || 'Latest dispatch')}</div>
                        ${renderPill(campaignStatusLabel(latestCampaign.status), campaignStatusVariant(latestCampaign.status))}
                    </div>
                    <div class="pushv2-report-summary-grid">
                        <div class="pushv2-report-summary-item">
                            <span class="pushv2-report-summary-label">Send Mode</span>
                            <span class="pushv2-report-summary-value">${escapeHtml(campaignStatusLabel(latestCampaign.send_mode || 'now'))}</span>
                        </div>
                        <div class="pushv2-report-summary-item">
                            <span class="pushv2-report-summary-label">Updated</span>
                            <span class="pushv2-report-summary-value">${escapeHtml(formatTableDate(latestCampaign.updated_at || latestCampaign.created_at))}</span>
                        </div>
                        <div class="pushv2-report-summary-item">
                            <span class="pushv2-report-summary-label">Segments</span>
                            <span class="pushv2-report-summary-value">${escapeHtml(String(latestSegments || 0))}</span>
                        </div>
                        <div class="pushv2-report-summary-item">
                            <span class="pushv2-report-summary-label">Devices</span>
                            <span class="pushv2-report-summary-value">${escapeHtml(latestDevices.join(', ') || 'All')}</span>
                        </div>
                        <div class="pushv2-report-summary-item">
                            <span class="pushv2-report-summary-label">Recipients</span>
                            <span class="pushv2-report-summary-value">${escapeHtml(formatInteger(latestCampaign.total_count || 0))}</span>
                        </div>
                        <div class="pushv2-report-summary-item">
                            <span class="pushv2-report-summary-label">Sent / Invalid</span>
                            <span class="pushv2-report-summary-value">${escapeHtml(formatInteger(latestCampaign.sent_count || 0))} / ${escapeHtml(formatInteger(latestCampaign.invalid_count || 0))}</span>
                        </div>
                    </div>
                    ${String(latestCampaign.last_error || '').trim() !== ''
                        ? `<p class="pushv2-report-kpi-copy">${escapeHtml(shortText(latestCampaign.last_error, 180))}</p>`
                        : '<p class="pushv2-report-kpi-copy">No delivery error recorded for the latest dispatch.</p>'}
                `
                : `
                    <div class="pushv2-report-empty">
                        <div class="pushv2-report-section-title">No dispatch activity yet</div>
                        <p class="pushv2-report-empty-copy">Saved compose and segment totals are available, but no V2 dispatch run has been recorded yet.</p>
                    </div>
                `;

            const recentCampaignsHtml = recentCampaigns.length
                ? recentCampaigns.slice(0, 5).map((campaign) => `
                    <div class="pushv2-report-activity-item">
                        <div class="pushv2-report-activity-head">
                            <div class="pushv2-report-activity-title">${escapeHtml(campaign.name || campaign.title || 'Dispatch')}</div>
                            ${renderPill(campaignStatusLabel(campaign.status), campaignStatusVariant(campaign.status))}
                        </div>
                        <div class="pushv2-report-activity-meta">
                            <span class="notif-muted">${escapeHtml(formatInteger(campaign.total_count || 0))} recipients</span>
                            <span class="notif-muted">${escapeHtml(formatInteger(campaign.sent_count || 0))} sent</span>
                            <span class="notif-muted">${escapeHtml(formatInteger(campaign.invalid_count || 0))} invalid</span>
                            <span class="notif-muted">${escapeHtml(formatTableDate(campaign.updated_at || campaign.created_at))}</span>
                        </div>
                    </div>
                `).join('')
                : `
                    <div class="pushv2-report-empty">
                        <div class="pushv2-report-section-title">No recent dispatches</div>
                        <p class="pushv2-report-empty-copy">Dispatch attempts will appear here after you send or schedule a V2 notification.</p>
                    </div>
                `;

            reportBody.innerHTML = `
                <div class="pushv2-report-kpis">
                    <div class="pushv2-report-card">
                        <span class="pushv2-meta-label">Saved Compose</span>
                        <div class="pushv2-report-kpi-value">${escapeHtml(formatInteger(savedCampaigns))}</div>
                        <p class="pushv2-report-kpi-copy">Visible V2 compose records for the active app.</p>
                    </div>
                    <div class="pushv2-report-card">
                        <span class="pushv2-meta-label">Saved Segments</span>
                        <div class="pushv2-report-kpi-value">${escapeHtml(formatInteger(savedSegments))}</div>
                        <p class="pushv2-report-kpi-copy">Audience groups currently available for dispatch.</p>
                    </div>
                    <div class="pushv2-report-card">
                        <span class="pushv2-meta-label">Dispatch Runs</span>
                        <div class="pushv2-report-kpi-value">${escapeHtml(formatInteger(dispatchRuns))}</div>
                        <p class="pushv2-report-kpi-copy">${escapeHtml(formatInteger(completedDispatches))} completed, ${escapeHtml(formatInteger(failedDispatches))} failed.</p>
                    </div>
                    <div class="pushv2-report-card">
                        <span class="pushv2-meta-label">Devices Sent</span>
                        <div class="pushv2-report-kpi-value">${escapeHtml(formatInteger(totalSent))}</div>
                        <p class="pushv2-report-kpi-copy">${escapeHtml(formatInteger(totalRecipients))} targeted, ${escapeHtml(formatInteger(totalInvalid))} invalid, ${escapeHtml(String(deliveryRate))}% delivery.</p>
                    </div>
                </div>
                <div class="pushv2-report-panel-grid">
                    <section class="pushv2-report-card">
                        <div class="pushv2-report-section-title">Latest Dispatch Summary</div>
                        ${latestCampaignHtml}
                    </section>
                    <section class="pushv2-report-card">
                        <div class="pushv2-report-section-title">Recent Delivery Activity</div>
                        <div class="pushv2-report-stack">${recentCampaignsHtml}</div>
                    </section>
                </div>
            `;
        }

        function resetForm() {
            editingMessageId = '';
            editingMessageDispatchStatus = '';
            editingMessageThumb = '';
            stopDispatchProgressPolling();
            dispatchProgressState.active = false;
            dispatchProgressState.messageId = '';
            dispatchProgressState.pollRequest = null;
            dispatchProgressState.completing = false;
            dispatchProgressState.awaitingDispatch = false;
            dispatchProgressState.pendingStageLabel = '';
            dispatchProgressState.pendingCopy = '';
            dispatchProgressState.payload = null;
            dispatchProgressState.notifyOnComplete = loadBooleanPreference(dispatchNotifyPreferenceKey, true);

            titleInput.value = '';
            descriptionInput.value = '';
            deviceSelect.value = 'all';
            if (formatInput instanceof HTMLInputElement) {
                formatInput.value = 'push';
            }
            thumbTypeSelect.value = 'browse';
            thumbUrlInput.value = '';
            if (thumbFileInput instanceof HTMLInputElement) {
                thumbFileInput.value = '';
            }
            deeplinkInput.value = '';
            if (prioritySelect instanceof HTMLSelectElement) {
                prioritySelect.value = 'normal';
            }
            typeSelect.value = 'custom';
            actionSelect.value = 'now';
            scheduleInput.value = '';
            if (topicInput instanceof HTMLInputElement) {
                topicInput.value = '';
            }
            if (tokenInput instanceof HTMLInputElement) {
                tokenInput.value = '';
            }
            if (inappFrequencyCount instanceof HTMLInputElement) {
                inappFrequencyCount.value = '5';
            }
            if (inappFrequencyUnit instanceof HTMLSelectElement) {
                inappFrequencyUnit.value = 'hour';
            }
            if (inappDisplay instanceof HTMLSelectElement) {
                inappDisplay.value = 'Show immediately on app open';
            }
            if (inappClosable instanceof HTMLInputElement) {
                inappClosable.checked = true;
            }
            if (inappAutoDismiss instanceof HTMLInputElement) {
                inappAutoDismiss.checked = true;
            }
            if (inappAutoSeconds instanceof HTMLInputElement) {
                inappAutoSeconds.value = '10';
            }
            if (inappMinTime instanceof HTMLInputElement) {
                inappMinTime.value = '30';
            }
            if (inappExpiration instanceof HTMLInputElement) {
                inappExpiration.value = '7';
            }
            if (inappPriority instanceof HTMLSelectElement) {
                inappPriority.value = 'normal';
            }
            if (dispatchProgressNotifyCheckbox instanceof HTMLInputElement) {
                dispatchProgressNotifyCheckbox.checked = dispatchProgressState.notifyOnComplete;
            }

            Array.from(segmentsSelect.options).forEach((option) => {
                option.selected = false;
            });

            setTargetMode('segment');
            updateThumbTypeField();
            updateActionField();
            refreshAllSelects();
            updateFormatCards();
            updateEditorMeta();
            renderMessageCards();
            renderSegmentCards();
            updateSidebarView('notifications');
            updatePreview();
        }

        function toDateTimeLocal(value) {
            if (!value) {
                return '';
            }

            const date = new Date(value);
            if (Number.isNaN(date.getTime())) {
                return '';
            }

            const pad = (part) => String(part).padStart(2, '0');

            return [
                date.getFullYear(),
                pad(date.getMonth() + 1),
                pad(date.getDate()),
            ].join('-') + 'T' + [pad(date.getHours()), pad(date.getMinutes())].join(':');
        }

        function populateForm(row = {}) {
            editingMessageId = asId(row.id);
            editingMessageDispatchStatus = String(row.campaign_status || '').trim().toLowerCase();
            editingMessageThumb = String(row.thumb || '').trim();

            titleInput.value = String(row.title || '');
            descriptionInput.value = String(row.description || '');
            deviceSelect.value = String(
                row.device || (Array.isArray(row.device_types) && row.device_types.length ? row.device_types[0] : 'all')
            ).trim().toLowerCase() || 'all';
            if (formatInput instanceof HTMLInputElement) {
                formatInput.value = String(row.format || row.meta?.v2_format || 'push').trim().toLowerCase() || 'push';
            }
            thumbTypeSelect.value = String(row.thumb_type || 'browse').trim().toLowerCase() === 'url' ? 'url' : 'browse';
            thumbUrlInput.value = thumbTypeSelect.value === 'url' ? String(row.thumb || '') : '';
            if (thumbFileInput instanceof HTMLInputElement) {
                thumbFileInput.value = '';
            }
            deeplinkInput.value = String(row.deeplink || '');
            if (prioritySelect instanceof HTMLSelectElement) {
                prioritySelect.value = String(row.priority || row.meta?.v2_priority || 'normal').trim().toLowerCase() || 'normal';
            }
            typeSelect.value = 'custom';
            actionSelect.value = String(row.action || 'now').trim().toLowerCase() === 'schedule' ? 'schedule' : 'now';
            scheduleInput.value = toDateTimeLocal(row.schedule_time || '');

            const selectedIds = Array.isArray(row.filters?.segment_ids) && row.filters.segment_ids.length
                ? row.filters.segment_ids.map((id) => asId(id))
                : (Array.isArray(row.segments) ? row.segments.map((segment) => asId(segment?.id)) : []);

            Array.from(segmentsSelect.options).forEach((option) => {
                option.selected = selectedIds.includes(asId(option.value));
            });

            setTargetMode('segment');

            updateThumbTypeField();
            updateActionField();
            refreshAllSelects();
            updateFormatCards();
            updateEditorMeta();
            renderMessageCards();
            renderSegmentCards();
            updateSidebarView('notifications');
            updatePreview();
        }

        async function loadFilters() {
            const response = await apiRequest(endpoints.filters, {
                method: 'GET',
            });

            segmentFilterMeta = Array.isArray(response?.data?.segment_filters) ? response.data.segment_filters : [];
            const packageFilter = segmentFilterByType('package');
            cachePackageOptions(Array.isArray(packageFilter?.options) ? packageFilter.options : []);
            deviceTypeMeta = Array.isArray(response?.data?.device_types) ? response.data.device_types : [];
            currentAppId = asId(response?.meta?.app_id || currentAppId);
            if (appChip instanceof HTMLElement) {
                appChip.textContent = currentAppId || '--';
            }
            renderDeviceOptions();
            resetSegmentModal();
        }

        async function loadSegmentOptions() {
            const response = await apiRequest(endpoints.segmentOptions, {
                method: 'GET',
            });

            segmentOptions = Array.isArray(response?.data) ? response.data : [];
            currentAppId = asId(response?.meta?.app_id || currentAppId);
            if (appChip instanceof HTMLElement) {
                appChip.textContent = currentAppId || '--';
            }
            renderSegmentOptions();
        }

        async function loadReportSummary() {
            if (reportSummaryLoadPromise) {
                return reportSummaryLoadPromise;
            }

            const request = (async () => {
                const response = await apiRequest(endpoints.reports, {
                    method: 'GET',
                });

                reportSummary = response?.data && typeof response.data === 'object'
                    ? response.data
                    : null;
                currentAppId = asId(response?.meta?.app_id || currentAppId);
                if (appChip instanceof HTMLElement) {
                    appChip.textContent = currentAppId || '--';
                }
                renderReportsPanel();
            })();

            reportSummaryLoadPromise = request;

            try {
                return await request;
            } finally {
                if (reportSummaryLoadPromise === request) {
                    reportSummaryLoadPromise = null;
                }
            }
        }

        async function loadSegments() {
            if (segmentLoadPromise) {
                return segmentLoadPromise;
            }

            const table = segmentDataTable || initializeSidebarTable('#pushv2-segments-table', [[4, 'desc']], 'Loading segments...');
            const request = (async () => {
                if (table) {
                    segmentDataTable = table;
                    configureDataTableProcessing('#pushv2-segments-table', table, 'Loading segments...');
                    setDataTableLoading(table, true, 'Loading segments...');
                }

                try {
                    const response = await apiRequest(endpoints.segments + '?limit=100', {
                        method: 'GET',
                    });

                    segmentRows = Array.isArray(response?.data) ? response.data : [];
                    await hydratePackageOptionLabels(packageRuleValuesFromSegments(segmentRows));
                    currentAppId = asId(response?.meta?.app_id || currentAppId);
                    if (appChip instanceof HTMLElement) {
                        appChip.textContent = currentAppId || '--';
                    }
                    renderSegmentCards();
                    updateSidebarStats();
                } finally {
                    if (table || segmentDataTable) {
                        setDataTableLoading(segmentDataTable || table, false, 'Loading segments...');
                    }
                }
            })();

            segmentLoadPromise = request;

            try {
                return await request;
            } finally {
                if (segmentLoadPromise === request) {
                    segmentLoadPromise = null;
                }
            }
        }

        async function loadMessages() {
            if (messageLoadPromise) {
                return messageLoadPromise;
            }

            const table = messageDataTable || initializeSidebarTable('#pushv2-campaigns-table', [[6, 'desc']], 'Loading saved compose...');
            const request = (async () => {
                if (table) {
                    messageDataTable = table;
                    configureDataTableProcessing('#pushv2-campaigns-table', table, 'Loading saved compose...');
                    setDataTableLoading(table, true, 'Loading saved compose...');
                }

                try {
                    const response = await apiRequest(endpoints.messages + '?limit=100', {
                        method: 'GET',
                    });

                    messageRows = Array.isArray(response?.data) ? response.data : [];
                    currentAppId = asId(response?.meta?.app_id || currentAppId);
                    if (appChip instanceof HTMLElement) {
                        appChip.textContent = currentAppId || '--';
                    }
                    renderMessageCards();
                    updateSidebarStats();
                } finally {
                    if (table || messageDataTable) {
                        setDataTableLoading(messageDataTable || table, false, 'Loading saved compose...');
                    }
                }
            })();

            messageLoadPromise = request;

            try {
                return await request;
            } finally {
                if (messageLoadPromise === request) {
                    messageLoadPromise = null;
                }
            }
        }

        async function uploadThumbIfNeeded() {
            const thumbType = String(thumbTypeSelect?.value || 'browse').trim().toLowerCase();
            if (thumbType === 'url') {
                return String(thumbUrlInput?.value || '').trim();
            }

            const file = thumbFileInput?.files && thumbFileInput.files[0] ? thumbFileInput.files[0] : null;
            if (!file) {
                return editingMessageThumb || '';
            }

            const formData = new FormData();
            formData.append('file', file);

            const response = await apiFormRequest(endpoints.thumbUpload, formData);

            editingMessageThumb = String(response?.data?.url || '').trim();

            return editingMessageThumb;
        }

        function buildPayload() {
            const targetMode = currentTargetMode();
            const payload = {
                title: String(titleInput?.value || '').trim(),
                description: String(descriptionInput?.value || '').trim(),
                segment_ids: selectedSegmentIds(),
                device_types: selectedDeviceTypes(),
                device: String(deviceSelect?.value || '').trim().toLowerCase(),
                type: 'custom',
                format: String(formatInput?.value || 'push').trim().toLowerCase() || 'push',
                priority: String(prioritySelect?.value || 'normal').trim().toLowerCase() || 'normal',
                thumb_type: String(thumbTypeSelect?.value || 'browse').trim().toLowerCase(),
                thumb: '',
                action: String(actionSelect?.value || 'now').trim().toLowerCase(),
                schedule_time: String(scheduleInput?.value || '').trim() || null,
                deeplink: String(deeplinkInput?.value || '').trim(),
            };

            if (!payload.title) {
                throw new Error('Content title is required.');
            }

            if (!payload.description) {
                throw new Error('Content description is required.');
            }

            if (targetMode !== 'segment') {
                throw new Error('Segment targeting is the active V2 delivery path right now. Switch back to Segment to save or send.');
            }

            if (!payload.segment_ids.length) {
                throw new Error('Select at least one segment.');
            }

            if (!payload.device_types.length) {
                throw new Error('Select a device.');
            }

            if (payload.action === 'schedule' && !payload.schedule_time) {
                throw new Error('Schedule time is required for scheduled content.');
            }

            return payload;
        }

        async function saveMessage() {
            hideStatus();

            const isEditing = editingMessageId !== '';
            setBusyButtonState(saveButton, true, isEditing ? 'Updating...' : 'Saving...');
            if (dispatchButton instanceof HTMLButtonElement) {
                setBusyButtonState(dispatchButton, false);
                dispatchButton.disabled = true;
            }

            try {
                const payload = buildPayload();
                payload.thumb = await uploadThumbIfNeeded();

                const response = await apiRequest(isEditing ? endpoints.message(editingMessageId) : endpoints.messages, {
                    method: isEditing ? 'PUT' : 'POST',
                    body: JSON.stringify(payload),
                });

                await Promise.all([
                    loadMessages(),
                    loadSegmentOptions(),
                    loadReportSummary(),
                ]);

                const messageId = asId(response?.data?.id || editingMessageId);

                if (messageId !== '') {
                    const refreshed = await apiRequest(endpoints.message(messageId), {
                        method: 'GET',
                    });

                    if (refreshed?.data) {
                        populateForm(refreshed.data);
                    }
                }

                showStatus(
                    response?.message || (isEditing
                        ? 'Notification content updated successfully.'
                        : 'Notification content saved successfully.'),
                    'success'
                );
            } finally {
                setBusyButtonState(saveButton, false);
                setBusyButtonState(dispatchButton, false);
                updateEditorMeta();
            }
        }

        async function dispatchEditedMessage() {
            hideStatus();

            if (editingMessageId === '') {
                throw new Error('Select an existing compose before sending.');
            }

            const isScheduleDispatch = String(actionSelect?.value || 'now') === 'schedule';
            const shouldTrackDispatchProgress = !isScheduleDispatch;
            setBusyButtonState(dispatchButton, true, isScheduleDispatch ? 'Scheduling...' : 'Sending...');
            if (saveButton instanceof HTMLButtonElement) {
                setBusyButtonState(saveButton, false);
                saveButton.disabled = true;
            }

            try {
                if (shouldTrackDispatchProgress) {
                    startDispatchProgress(
                        editingMessageId,
                        'Preparing notification...',
                        'We are processing recipients in batches. This may take a few minutes.'
                    );
                }

                const response = await apiRequest(endpoints.messageDispatch(editingMessageId), {
                    method: 'POST',
                });

                if (shouldTrackDispatchProgress) {
                    dispatchProgressState.awaitingDispatch = false;
                    await pollDispatchProgress();
                } else {
                    await Promise.all([loadMessages(), loadReportSummary()]);
                    const refreshed = await apiRequest(endpoints.message(editingMessageId), {
                        method: 'GET',
                    });

                    if (refreshed?.data) {
                        populateForm(refreshed.data);
                    }
                    showStatus(response?.message || 'Notification scheduled successfully.', 'success');
                }
            } catch (error) {
                if (shouldTrackDispatchProgress && dispatchProgressState.active) {
                    dispatchProgressState.awaitingDispatch = false;
                    dispatchProgressState.active = false;
                    stopDispatchProgressPolling();
                    dispatchProgressState.payload = {
                        status: 'failed',
                        stage_label: 'Notification failed',
                        dispatch_status_message: error.message || 'Unable to send notification.',
                        issues: [],
                        total_count: 0,
                        processed_count: 0,
                        progress_percent: 0,
                        elapsed_seconds: 0,
                    };
                    renderDispatchProgress();
                    openDispatchProgressModal();
                    updateEditorMeta();
                }

                throw error;
            } finally {
                setBusyButtonState(dispatchButton, false);
                setBusyButtonState(saveButton, false);
                updateEditorMeta();
            }
        }

        form?.addEventListener('submit', async function (event) {
            event.preventDefault();

            try {
                await saveMessage();
            } catch (error) {
                showStatus(error.message || 'Unable to save notification content.', 'error');
            }
        });

        dispatchButton?.addEventListener('click', async function () {
            try {
                await dispatchEditedMessage();
            } catch (error) {
                showStatus(error.message || 'Unable to send notification.', 'error');
            }
        });

        refreshButton?.addEventListener('click', async function () {
            hideStatus();

            try {
                await Promise.all([
                    loadFilters(),
                    loadSegmentOptions(),
                    loadSegments(),
                    loadMessages(),
                    loadReportSummary(),
                ]);
                updateSidebarView('notifications');
                updatePreview();
                updateEditorMeta();
                showStatus('Push notification V2 refreshed successfully.', 'success');
            } catch (error) {
                showStatus(error.message || 'Unable to refresh V2 data.', 'error');
            }
        });

        resetButton?.addEventListener('click', function () {
            hideStatus();
            if (editingMessageId !== '') {
                const active = messageRows.find((row) => asId(row.id) === editingMessageId);
                if (active) {
                    populateForm(active);
                    return;
                }
            }

            resetForm();
        });

        document.querySelectorAll('[data-sidebar-view]').forEach((button) => {
            button.addEventListener('click', function () {
                updateSidebarView(String(button.getAttribute('data-sidebar-view') || 'notifications'));
            });
        });

        sidebarPrimaryButton?.addEventListener('click', function () {
            if (currentSidebarView === 'segments') {
                resetSegmentModal();
                openSegmentModal();
                return;
            }

            openComposeEditor();
        });

        document.querySelectorAll('[data-pushv2-segment-close]').forEach((button) => {
            button.addEventListener('click', function () {
                closeSegmentModal();
                resetSegmentModal();
            });
        });

        document.querySelectorAll('[data-pushv2-progress-close]').forEach((button) => {
            button.addEventListener('click', function () {
                closeDispatchProgressModal();
            });
        });

        dispatchProgressNotifyCheckbox?.addEventListener('change', function () {
            syncDispatchNotifyPreference();
            if (dispatchProgressState.notifyOnComplete) {
                void ensureBrowserNotificationPermission();
            }
        });

        document.addEventListener('keydown', function (event) {
            if (event.key === 'Escape' && segmentModal?.classList.contains('open')) {
                closeSegmentModal();
                resetSegmentModal();
                return;
            }

            if (event.key === 'Escape' && dispatchProgressModal?.classList.contains('open')) {
                closeDispatchProgressModal();
            }
        });

        segmentModal?.addEventListener('click', function (event) {
            if (event.target === segmentModal) {
                closeSegmentModal();
                resetSegmentModal();
            }
        });

        dispatchProgressModal?.addEventListener('click', function (event) {
            if (event.target === dispatchProgressModal) {
                closeDispatchProgressModal();
            }
        });

        segmentTitleInput?.addEventListener('input', function () {
            setFieldError(segmentTitleInput, segmentTitleError, '');
            setModalStatus();
        });

        segmentDescriptionInput?.addEventListener('input', function () {
            setModalStatus();
        });

        addSegmentRuleButton?.addEventListener('click', function () {
            segmentRulesBox?.appendChild(buildSegmentRuleRow());
            initSegmentRuleValueSelects(segmentRulesBox?.lastElementChild || segmentRulesBox);
        });

        saveSegmentButton?.addEventListener('click', function () {
            saveSegment().catch(() => null);
        });

        segmentRulesBox?.addEventListener('change', function (event) {
            const target = event.target instanceof Element ? event.target : null;
            const row = target?.closest('.pushv2-segment-rule-row');

            if (!row) {
                return;
            }

            if (target.classList.contains('pushv2-rule-type')) {
                syncSegmentRuleRow(row);
            }

            clearSegmentValidation();
            setModalStatus();
        });

        segmentRulesBox?.addEventListener('click', function (event) {
            const target = event.target instanceof Element ? event.target.closest('button') : null;
            if (!(target instanceof HTMLButtonElement) || !target.classList.contains('pushv2-segment-rule-remove')) {
                return;
            }

            const row = target.closest('.pushv2-segment-rule-row');
            row?.remove();
            ensureSegmentRuleRows();
            clearSegmentValidation();
            setModalStatus();
        });

        document.querySelectorAll('[data-format]').forEach((button) => {
            button.addEventListener('click', function () {
                if (formatInput instanceof HTMLInputElement) {
                    formatInput.value = String(button.getAttribute('data-format') || 'push').trim().toLowerCase() || 'push';
                    updateFormatCards();
                    updatePreview();
                }
            });
        });

        targetModeInputs.forEach((input) => {
            input.addEventListener('change', function () {
                setTargetMode(String(input.value || 'segment'));
                updateEditorMeta();
                renderSegmentCards();
                updatePreview();
            });
        });

        messageList?.addEventListener('click', async function (event) {
            const target = event.target instanceof Element ? event.target.closest('[data-message-id]') : null;
            if (!(target instanceof HTMLElement)) {
                return;
            }

            const id = asId(target.dataset.messageId);
            if (id === '') {
                return;
            }

            if (target.classList.contains('pushv2-message-delete-btn')) {
                await deleteMessageFromTable(id);
                return;
            }

            await editMessageFromTable(id);
        });

        segmentList?.addEventListener('click', function (event) {
            const target = event.target instanceof Element ? event.target.closest('[data-segment-id]') : null;
            if (!(target instanceof HTMLElement)) {
                return;
            }

            const id = asId(target.dataset.segmentId);
            if (id === '') {
                return;
            }

            if (target.classList.contains('pushv2-segment-edit-btn')) {
                const row = segmentRows.find((entry) => asId(entry.id) === id);
                if (row) {
                    populateSegmentModal(row);
                    openSegmentModal();
                }
                return;
            }

            if (target.classList.contains('pushv2-segment-delete-btn')) {
                deleteSegmentFromTable(id).catch(() => null);
                return;
            }

            Array.from(segmentsSelect.options).forEach((option) => {
                if (asId(option.value) === id) {
                    option.selected = !option.selected;
                }
            });

            if (select2Enabled && window.jQuery) {
                window.jQuery(segmentsSelect).trigger('change');
            }

            renderSegmentCards();
            updatePreview();
        });

        thumbTypeSelect?.addEventListener('change', function () {
            updateThumbTypeField();
            updatePreview();
        });

        actionNowRadio?.addEventListener('change', function () {
            if (actionNowRadio.checked) {
                actionSelect.value = 'now';
                updateActionField();
                updateEditorMeta();
                updatePreview();
            }
        });

        actionScheduleRadio?.addEventListener('change', function () {
            if (actionScheduleRadio.checked) {
                actionSelect.value = 'schedule';
                updateActionField();
                updateEditorMeta();
                updatePreview();
            }
        });

        actionSelect?.addEventListener('change', function () {
            updateActionField();
            updateEditorMeta();
            updatePreview();
        });

        [titleInput, descriptionInput, thumbUrlInput, deeplinkInput, scheduleInput, prioritySelect, topicInput, tokenInput, inappFrequencyCount, inappFrequencyUnit, inappDisplay, inappClosable, inappAutoDismiss, inappAutoSeconds, inappMinTime, inappExpiration, inappPriority].forEach((input) => {
            input?.addEventListener('input', updatePreview);
            input?.addEventListener('change', updatePreview);
        });

        deviceSelect?.addEventListener('change', updatePreview);
        segmentsSelect?.addEventListener('change', function () {
            renderSegmentCards();
            updatePreview();
        });
        thumbFileInput?.addEventListener('change', updatePreview);

        testButton?.addEventListener('click', function () {
            if (currentTargetMode() !== 'token') {
                showStatus('Switch Target Audience to Device Token to preview a single-device V2 test flow.', 'info');
                return;
            }

            showStatus('Device-token preview is ready. Save the compose first before using the normal V2 dispatch flow.', 'info');
        });

        async function initialize() {
            dispatchProgressState.notifyOnComplete = loadBooleanPreference(dispatchNotifyPreferenceKey, true);
            if (dispatchProgressNotifyCheckbox instanceof HTMLInputElement) {
                dispatchProgressNotifyCheckbox.checked = dispatchProgressState.notifyOnComplete;
            }
            refreshAllSelects();
            setTargetMode('segment');
            updateSidebarView('notifications');
            syncActionRadiosFromSelect();
            updateThumbTypeField();
            updateActionField();
            updatePreview();
            updateFormatCards();
            updateEditorMeta();

            try {
                await Promise.all([
                    loadFilters(),
                    loadSegmentOptions(),
                    loadSegments(),
                    loadMessages(),
                    loadReportSummary(),
                ]);

                refreshAllSelects();
                updateSidebarView('notifications');
                updatePreview();
                updateEditorMeta();
            } catch (error) {
                showStatus(error.message || 'Unable to load push notification V2.', 'error');
            }
        }

        initialize();
    }());
</script>
@endpush