/* =========================================================
   NOTIQ — BRAND DESIGN SYSTEM
   ---------------------------------------------------------
   Ownership rule:
   - Notiq owns brand tokens, typography, app canvas and
     Notiq-specific components.
   - The selected Radzen theme owns the visual personality of
     Radzen cards, buttons, inputs, dropdowns, dialogs, grids,
     tabs, switches, etc.

   IMPORTANT:
   Do not map Radzen surface/radius/component variables here.
   Doing so makes Software, Material, Standard and Humanistic
   look nearly identical.
   ========================================================= */

:root {
    /* Brand */
    --notiq-primary: #635bff;
    --notiq-primary-hover: #554df0;
    --notiq-primary-dark: #4f46e5;
    --notiq-primary-soft: #eef0ff;
    --notiq-accent: #18b6a4;
    --notiq-accent-dark: #0f9687;
    --notiq-accent-soft: #e8faf7;

    /* App shell / custom Notiq surfaces */
    --notiq-background: #f8f9fb;
    --notiq-surface: #ffffff;
    --notiq-surface-soft: #f4f6f8;
    --notiq-sidebar: #11182b;
    --notiq-sidebar-hover: #1b2440;
    --notiq-sidebar-active: rgba(99, 91, 255, 0.18);
    --notiq-sidebar-border: rgba(255, 255, 255, 0.06);

    /* Text */
    --notiq-text-primary: #17191f;
    --notiq-text-secondary: #667085;
    --notiq-text-muted: #6b7280;
    --notiq-text-tertiary: #98a2b3;
    --notiq-text-on-dark: #f8fafc;
    --notiq-text-on-dark-muted: #b8c0d4;

    /* Borders */
    --notiq-border: #e8eaf0;
    --notiq-border-strong: #d8dce5;

    /* Semantic */
    --notiq-success: #16a34a;
    --notiq-success-soft: #ecfdf3;
    --notiq-warning: #f59e0b;
    --notiq-warning-soft: #fffaeb;
    --notiq-danger: #dc2626;
    --notiq-danger-soft: #fef2f2;
    --notiq-info: #0284c7;
    --notiq-info-soft: #eff8ff;

    /* Notiq-owned component geometry */
    --notiq-radius-sm: 6px;
    --notiq-radius-md: 8px;
    --notiq-radius-lg: 12px;

    /* Shadows */
    --notiq-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.035);
    --notiq-shadow-md: 0 10px 28px rgba(16, 24, 40, 0.07);
    --notiq-shadow-drawer: -8px 0 28px rgba(16, 24, 40, 0.12);

    /* Motion */
    --notiq-motion-fast: 120ms;
    --notiq-motion-default: 160ms;
    --notiq-motion-slow: 220ms;

    /*
       Brand-only Radzen mapping.
       Keep this deliberately small. We want the selected Radzen
       theme to retain its own surfaces, radii, spacing and elevation.
    */
    --rz-primary: var(--notiq-primary);
    --rz-primary-dark: var(--notiq-primary-dark);
    --rz-primary-lighter: var(--notiq-primary-soft);
    --rz-success: var(--notiq-success);
    --rz-warning: var(--notiq-warning);
    --rz-danger: var(--notiq-danger);
    --rz-info: var(--notiq-info);
}

::selection {
    color: #ffffff;
    background: var(--notiq-primary);
}

:where(button, a, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid var(--notiq-primary);
    outline-offset: 2px;
}

.notiq-surface,
.notiq-panel,
.notiq-card {
    border: 1px solid var(--notiq-border);
    border-radius: var(--notiq-radius-lg);
    background: var(--notiq-surface);
    box-shadow: var(--notiq-shadow-sm);
}

html,
body {
    min-height: 100%;
    margin: 0;
    color: var(--notiq-text-primary);
    background: var(--notiq-background);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
}

body {
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

a {
    color: var(--notiq-primary);
    text-decoration: none;
}

a:hover {
    color: var(--notiq-primary-dark);
}

/* Notiq-specific semantic badge colors. Radzen still owns badge geometry. */
.notiq-badge-queued {
    color: #4338ca;
    background: var(--notiq-primary-soft);
}

.notiq-badge-sent,
.notiq-badge-delivered {
    color: #15803d;
    background: var(--notiq-success-soft);
}

.notiq-badge-failed {
    color: #b42318;
    background: var(--notiq-danger-soft);
}

.notiq-badge-scheduled {
    color: #b54708;
    background: var(--notiq-warning-soft);
}

.notiq-badge-processing {
    color: #026aa2;
    background: var(--notiq-info-soft);
}

/* =========================================================
   Standard Page Structure
   ========================================================= */

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

.notiq-page-header-content {
    min-width: 0;
}

.notiq-page-title {
    margin: 0;
    color: var(--notiq-text-primary);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
}

.notiq-page-description {
    max-width: 760px;
    margin: 6px 0 0;
    color: var(--notiq-text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.notiq-page-header-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
}

/* =========================================================
   Filter Bar
   ========================================================= */

.notiq-filter-bar {
    padding: 16px;
    background: #ffffff;
    border: 1px solid var(--notiq-border);
    border-radius: var(--notiq-radius-md);
}

.notiq-filter-search {
    width: 100%;
    max-width: 340px;
}

/* =========================================================
   Channel Colors
   ========================================================= */

.notiq-channel-sms {
    color: #4338ca;
    background: #eef0ff;
}

.notiq-channel-email {
    color: #0369a1;
    background: #eaf7ff;
}

.notiq-channel-whatsapp {
    color: #087a55;
    background: #e8faf2;
}

/* =========================================================
   Loading / Empty State
   ========================================================= */

.notiq-data-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    padding: 32px;
    text-align: center;
}

.notiq-data-state-icon {
    margin-bottom: 12px;
    color: var(--notiq-text-tertiary);
    font-size: 40px;
}

.notiq-data-state-title {
    margin: 0;
    color: var(--notiq-text-primary);
    font-size: 16px;
    font-weight: 650;
}

.notiq-data-state-description {
    max-width: 420px;
    margin: 6px 0 0;
    color: var(--notiq-text-secondary);
    font-size: 13px;
}

/* =========================================================
   Responsive
   ========================================================= */

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

    .notiq-page-title {
        font-size: 22px;
    }

    .notiq-page-header-actions {
        width: 100%;
    }

        .notiq-page-header-actions .rz-button {
            width: 100%;
        }

    .notiq-filter-search {
        max-width: none;
    }

    .rz-dialog-wrapper .rz-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px;
    }
}





/* =========================================================
   NOTIQ SIDEBAR — RADZEN GLOBAL OVERRIDES
   ========================================================= */

.notiq-sidebar,
.notiq-sidebar.rz-sidebar {
    color: #ffffff !important;
    background: radial-gradient( circle at 20% 0%, rgba(99, 91, 255, 0.11), transparent 28% ), #11182b !important;
}

.notiq-sidebar-menu,
.notiq-sidebar-menu.rz-panel-menu,
.notiq-sidebar-menu .rz-panel-menu,
.notiq-sidebar-menu .rz-panel-menu-list,
.notiq-sidebar-menu .rz-navigation-menu {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

    .notiq-sidebar-menu .rz-navigation-item,
    .notiq-sidebar-menu .rz-panel-menu-item {
        width: 100% !important;
        margin: 0 0 3px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .notiq-sidebar-menu .rz-navigation-item-wrapper,
    .notiq-sidebar-menu .rz-panel-menu-item-wrapper {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .notiq-sidebar-menu .rz-navigation-item-link {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 42px !important;
        padding: 9px 11px !important;
        color: #b8c1d6 !important;
        border: 1px solid transparent !important;
        border-radius: 10px !important;
        background: transparent !important;
        box-shadow: none !important;
        text-decoration: none !important;
        transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease !important;
    }

        .notiq-sidebar-menu .rz-navigation-item-link:hover {
            color: #ffffff !important;
            border-color: rgba(255, 255, 255, 0.035) !important;
            background: rgba(255, 255, 255, 0.07) !important;
        }

        .notiq-sidebar-menu .rz-navigation-item-link.rz-state-active,
        .notiq-sidebar-menu .rz-navigation-item-wrapper-active > .rz-navigation-item-link,
        .notiq-sidebar-menu .rz-navigation-item-link-active,
        .notiq-sidebar-menu .rz-navigation-item-wrapper.rz-state-active > .rz-navigation-item-link {
            color: #ffffff !important;
            font-weight: 650 !important;
            border-color: rgba(129, 120, 255, 0.16) !important;
            background: linear-gradient( 90deg, rgba(99, 91, 255, 0.26), rgba(99, 91, 255, 0.14) ) !important;
        }

            .notiq-sidebar-menu .rz-navigation-item-link.rz-state-active::before,
            .notiq-sidebar-menu
            .rz-navigation-item-wrapper-active > .rz-navigation-item-link::before,
            .notiq-sidebar-menu .rz-navigation-item-link-active::before,
            .notiq-sidebar-menu
            .rz-navigation-item-wrapper.rz-state-active > .rz-navigation-item-link::before {
                position: absolute;
                top: 50%;
                left: 0;
                width: 3px;
                height: 21px;
                border-radius: 0 4px 4px 0;
                background: #8b83ff;
                content: "";
                transform: translateY(-50%);
            }

    .notiq-sidebar-menu .rz-navigation-item-icon,
    .notiq-sidebar-menu .rzi {
        width: 21px !important;
        min-width: 21px !important;
        margin-right: 9px !important;
        color: inherit !important;
        font-size: 17px !important;
    }

    .notiq-sidebar-menu .rz-navigation-item-text {
        overflow: hidden;
        color: inherit !important;
        font-size: 12px !important;
        font-weight: inherit !important;
        line-height: 1.35 !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .notiq-sidebar-menu li,
    .notiq-sidebar-menu ul,
    .notiq-sidebar-menu a {
        border-top: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        box-shadow: none !important;
    }

/* Right sidebar must remain light */

.notiq-right-sidebar,
.notiq-right-sidebar.rz-sidebar {
    color: #172033 !important;
    background: #ffffff !important;
}

    .notiq-right-sidebar .rz-card,
    .notiq-right-sidebar .rz-dialog-content {
        color: #172033;
        background: #ffffff;
    }








/* =========================================================
   Standard Page Structure
   ========================================================= */

.notiq-page {
    width: 100%;
}

.notiq-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.notiq-page-header-content {
    min-width: 0;
}

.notiq-page-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}

.notiq-page-eyebrow {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--notiq-primary);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.notiq-page-title {
    margin: 0;
    color: var(--notiq-text-primary);
    font-weight: 700;
    letter-spacing: -0.025em;
}

.notiq-page-description {
    display: block;
    max-width: 720px;
    margin-top: 0.35rem;
    color: var(--notiq-text-secondary);
    line-height: 1.55;
}

.notiq-filter-card,
.notiq-content-card {
    width: 100%;
}

.notiq-content-card {
    padding: 1.25rem;
}

.notiq-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.notiq-muted {
    color: var(--notiq-text-secondary);
}

.notiq-grid-secondary {
    font-size: 0.78rem;
}

/* =========================================================
   Standard Data States
   ========================================================= */

.notiq-data-state {
    display: flex;
    min-height: 260px;
    padding: 2rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-align: center;
}

.notiq-data-state-icon {
    color: var(--notiq-text-tertiary);
    font-size: 2.5rem;
}

.notiq-data-state-icon-error {
    color: var(--notiq-danger);
}

.notiq-data-state-title {
    margin: 0;
    color: var(--notiq-text-primary);
    font-weight: 650;
}

.notiq-data-state-description {
    max-width: 520px;
    margin: 0;
    color: var(--notiq-text-secondary);
    line-height: 1.5;
}

/* =========================================================
   Status Badges
   ========================================================= */

.notiq-status-badge {
    min-width: 76px;
    justify-content: center;
    border-radius: 999px;
    font-weight: 650;
}

.notiq-status-processing {
    position: relative;
}

    .notiq-status-processing::before {
        width: 6px;
        height: 6px;
        margin-right: 6px;
        background: currentColor;
        border-radius: 50%;
        content: "";
    }

/* =========================================================
   Dashboard Cost
   ========================================================= */

.notiq-cost-total {
    display: flex;
    padding: 1rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--notiq-primary-soft);
    border: 1px solid rgba(99, 91, 255, 0.15);
    border-radius: var(--notiq-radius-md);
}

    .notiq-cost-total span {
        color: var(--notiq-text-secondary);
        font-size: 0.875rem;
    }

    .notiq-cost-total strong {
        color: var(--notiq-primary-dark);
        font-size: 1.25rem;
    }

.notiq-cost-row {
    display: flex;
    padding: 0.85rem 0;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--notiq-border);
}

    .notiq-cost-row:last-child {
        border-bottom: 0;
    }

.notiq-cost-row-values {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
}

    .notiq-cost-row-values strong {
        color: var(--notiq-text-primary);
    }

    .notiq-cost-row-values span {
        color: var(--notiq-text-secondary);
        font-size: 0.78rem;
    }

/* =========================================================
   Side Dialog
   ========================================================= */

.rz-dialog-side {
    background: var(--notiq-surface);
    box-shadow: var(--notiq-shadow-drawer);
}

    .rz-dialog-side .rz-dialog-titlebar {
        padding: 1.15rem 1.25rem;
        background: var(--notiq-surface);
        border-bottom: 1px solid var(--notiq-border);
    }

    .rz-dialog-side .rz-dialog-content {
        padding: 1.25rem;
    }

/* =========================================================
   Responsive
   ========================================================= */

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

    .notiq-page-header-actions {
        width: 100%;
        justify-content: stretch;
    }

        .notiq-page-header-actions > *,
        .notiq-page-header-actions .rz-stack {
            width: 100%;
        }

        .notiq-page-header-actions .rz-button {
            flex: 1 1 auto;
        }

    .notiq-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .rz-dialog-side {
        width: 100% !important;
        max-width: 100% !important;
    }

    .notiq-content-card {
        padding: 1rem;
    }
}



/* =========================================================
   Compact message preview panel
   ========================================================= */

.notiq-preview-panel {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 2rem);
    min-height: 0;
    gap: 0;
    overflow: hidden;
}

.notiq-preview-panel-header {
    flex: 0 0 auto;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--notiq-border, #e5e7eb);
}

.notiq-preview-panel-meta {
    flex: 0 0 auto;
    padding: 0.75rem 0;
}

.notiq-preview-panel-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.notiq-preview-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

    .notiq-preview-tabs > .rz-tabview-panels {
        flex: 1 1 auto;
        min-height: 0;
        padding: 0.75rem 0 0;
        overflow: hidden;
    }

    .notiq-preview-tabs .rz-tabview-panel {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

.notiq-preview-device-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0.5rem;
    overflow: hidden;
    border-radius: 12px;
    background: var(--notiq-surface-muted, #f4f6f8);
}

/* =========================================================
   Mobile preview
   ========================================================= */

.notiq-preview-phone {
    height: min(100%, 690px);
    max-height: 100%;
    aspect-ratio: 390 / 844;
    padding: 6px;
    overflow: hidden;
    border-radius: 32px;
    background: #111827;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.2);
}

.notiq-preview-phone-screen {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: 26px;
    background: #f0f2f5;
}

.notiq-preview-phone-status {
    flex: 0 0 28px;
    height: 28px;
    padding: 0 0.85rem;
    color: #ffffff;
    background: #075e54;
}

    .notiq-preview-phone-status .rzi {
        color: #ffffff;
        font-size: 0.75rem;
    }

.notiq-preview-phone-header {
    flex: 0 0 58px;
    height: 58px;
    padding: 0 0.7rem;
    color: #ffffff;
    background: #075e54;
}

    .notiq-preview-phone-header .rzi,
    .notiq-preview-phone-header .rz-text {
        color: #ffffff;
    }

.notiq-preview-phone-subtitle {
    color: rgba(255, 255, 255, 0.75) !important;
}

.notiq-preview-avatar {
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
}

.notiq-preview-phone-chat {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.75rem;
    overflow: hidden;
    background-color: #efeae2;
    background-image: radial-gradient( circle at 18px 18px, rgba(17, 27, 33, 0.035) 1.5px, transparent 2px );
    background-size: 64px 64px;
}

.notiq-preview-phone-composer {
    flex: 0 0 54px;
    height: 54px;
    padding: 0.45rem 0.55rem;
    background: #f0f2f5;
}

.notiq-preview-phone-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

    .notiq-preview-phone-input .rz-textbox {
        border-radius: 20px;
    }

.notiq-preview-mic {
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
}

/* =========================================================
   Desktop preview
   ========================================================= */

.notiq-preview-desktop {
    width: min(100%, 1000px);
    max-height: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid #d9dde3;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14);
}

.notiq-preview-desktop-screen {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.notiq-preview-desktop-sidebar {
    flex: 0 0 31%;
    width: 31%;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    border-right: 1px solid #d9dde3;
    background: #ffffff;
}

.notiq-preview-desktop-main {
    flex: 1 1 69%;
    width: 69%;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

.notiq-preview-desktop-toolbar,
.notiq-preview-desktop-header {
    flex: 0 0 56px;
    height: 56px;
    padding: 0 0.8rem;
    background: #f0f2f5;
}

.notiq-preview-desktop-search {
    padding: 0.55rem;
    border-bottom: 1px solid #edf0f2;
}

    .notiq-preview-desktop-search .rz-textbox {
        border-radius: 8px;
    }

.notiq-preview-desktop-contact {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid #edf0f2;
    background: #f7f8f8;
}

.notiq-preview-desktop-chat {
    flex: 1 1 auto;
    min-height: 0;
    padding: 1rem 1.5rem;
    overflow: hidden;
    background-color: #efeae2;
    background-image: radial-gradient( circle at 20px 20px, rgba(17, 27, 33, 0.035) 1.5px, transparent 2px );
    background-size: 72px 72px;
}

.notiq-preview-desktop-composer {
    flex: 0 0 58px;
    height: 58px;
    padding: 0.5rem 0.8rem;
    background: #f0f2f5;
}

.notiq-preview-desktop-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

/* =========================================================
   Shared message preview
   ========================================================= */

.notiq-preview-message {
    width: fit-content;
    max-width: 82%;
    padding: 0.5rem 0.65rem;
    border: 0;
    border-radius: 8px 0 8px 8px;
    background: #d9fdd3;
    box-shadow: 0 1px 1px rgba(11, 20, 26, 0.14);
}

.notiq-preview-desktop-message {
    max-width: 62%;
}

.notiq-preview-message-text {
    display: -webkit-box;
    overflow: hidden;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: #111b21;
    line-height: 1.4;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
}

.notiq-preview-message-time {
    color: #667781;
    font-size: 0.68rem;
}

.notiq-preview-read-icon {
    color: #53bdeb;
    font-size: 0.95rem;
}

.notiq-preview-attachment {
    max-width: 100%;
    padding: 0.5rem;
    overflow: hidden;
    border: 0;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.58);
}

    .notiq-preview-attachment .rzi {
        color: #075e54;
        font-size: 1.6rem;
    }

.notiq-preview-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notiq-preview-generic {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* Prevent Radzen side dialog body scrolling for preview */

.rz-dialog-side:has(.notiq-preview-panel) {
    overflow: hidden;
}

    .rz-dialog-side:has(.notiq-preview-panel) .rz-dialog-content {
        height: 100%;
        overflow: hidden;
    }

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 700px) {
    .notiq-preview-panel {
        height: calc(100dvh - 1rem);
    }

    .notiq-preview-device-stage {
        padding: 0.25rem;
    }

    .notiq-preview-phone {
        width: auto;
        max-width: 100%;
        height: min(100%, 660px);
    }

    .notiq-preview-desktop-sidebar {
        display: none;
    }

    .notiq-preview-desktop-main {
        width: 100%;
        flex-basis: 100%;
    }
}



/* =========================================================
   WhatsApp message preview
   ========================================================= */

.notiq-whatsapp-preview-card {
    width: 100%;
    overflow: hidden;
}

.notiq-whatsapp-tabs {
    width: 100%;
}

    .notiq-whatsapp-tabs .rz-tabview-panels {
        padding: 1rem 0 0;
    }

.notiq-whatsapp-preview-stage {
    width: 100%;
    min-height: 620px;
    padding: 1rem;
    overflow: hidden;
    border-radius: 12px;
    background: var(--notiq-background, #f6f7fb);
}

/* Mobile device */

.notiq-whatsapp-mobile-device {
    width: min(100%, 330px);
    aspect-ratio: 390 / 844;
    padding: 6px;
    overflow: hidden;
    border: 0;
    border-radius: 32px;
    background: #111827;
    box-shadow: 0 20px 45px rgba(23, 32, 51, 0.18);
}

.notiq-whatsapp-mobile-screen {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: 26px;
    background: #f0f2f5;
}

.notiq-whatsapp-mobile-status {
    flex: 0 0 27px;
    height: 27px;
    padding: 0 0.75rem;
    color: #ffffff;
    background: #075e54;
}

    .notiq-whatsapp-mobile-status .rz-text,
    .notiq-whatsapp-mobile-status .rzi {
        color: #ffffff;
    }

    .notiq-whatsapp-mobile-status .rzi {
        font-size: 0.72rem;
    }

.notiq-whatsapp-mobile-header {
    flex: 0 0 58px;
    height: 58px;
    padding: 0 0.65rem;
    color: #ffffff;
    background: #075e54;
}

    .notiq-whatsapp-mobile-header .rz-text,
    .notiq-whatsapp-mobile-header .rzi {
        color: #ffffff;
    }

.notiq-whatsapp-mobile-subtitle {
    color: rgba(255, 255, 255, 0.72) !important;
}

.notiq-whatsapp-avatar {
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
}

.notiq-whatsapp-mobile-chat {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.8rem;
    overflow: hidden;
    background-color: #efeae2;
    background-image: radial-gradient( circle at 18px 18px, rgba(17, 27, 33, 0.035) 1.5px, transparent 2px );
    background-size: 64px 64px;
}

.notiq-whatsapp-mobile-composer {
    flex: 0 0 54px;
    height: 54px;
    padding: 0.45rem 0.55rem;
    background: #f0f2f5;
}

.notiq-whatsapp-mobile-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

    .notiq-whatsapp-mobile-input .rz-textbox {
        border-radius: 20px;
    }

.notiq-whatsapp-mic {
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
}

/* Desktop device */

.notiq-whatsapp-desktop-device {
    width: 100%;
    max-width: 920px;
    aspect-ratio: 16 / 10;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--notiq-border, #e6e8f0);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(23, 32, 51, 0.12);
}

.notiq-whatsapp-desktop-screen {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.notiq-whatsapp-desktop-sidebar {
    flex: 0 0 32%;
    width: 32%;
    height: 100%;
    overflow: hidden;
    border-right: 1px solid #d9dde3;
    background: #ffffff;
}

.notiq-whatsapp-desktop-main {
    flex: 1 1 68%;
    width: 68%;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

.notiq-whatsapp-desktop-toolbar,
.notiq-whatsapp-desktop-header {
    flex: 0 0 56px;
    height: 56px;
    padding: 0 0.75rem;
    background: #f0f2f5;
}

.notiq-whatsapp-desktop-search {
    padding: 0.55rem;
    border-bottom: 1px solid #edf0f2;
}

    .notiq-whatsapp-desktop-search .rz-textbox {
        border-radius: 8px;
    }

.notiq-whatsapp-desktop-contact {
    min-height: 70px;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid #edf0f2;
    background: #f7f8f8;
}

.notiq-whatsapp-desktop-chat {
    flex: 1 1 auto;
    min-height: 0;
    padding: 1rem 1.25rem;
    overflow: hidden;
    background-color: #efeae2;
    background-image: radial-gradient( circle at 20px 20px, rgba(17, 27, 33, 0.035) 1.5px, transparent 2px );
    background-size: 72px 72px;
}

.notiq-whatsapp-desktop-composer {
    flex: 0 0 58px;
    height: 58px;
    padding: 0.5rem 0.75rem;
    background: #f0f2f5;
}

.notiq-whatsapp-desktop-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

/* Shared message bubble */

.notiq-whatsapp-message-bubble {
    width: fit-content;
    max-width: 86%;
    padding: 0.55rem 0.65rem;
    border: 0;
    border-radius: 8px 0 8px 8px;
    background: #d9fdd3;
    box-shadow: 0 1px 1px rgba(11, 20, 26, 0.14);
}

.notiq-whatsapp-desktop-message {
    max-width: 68%;
}

.notiq-whatsapp-message-text {
    display: -webkit-box;
    overflow: hidden;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: #111b21;
    line-height: 1.4;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
}

.notiq-whatsapp-message-time {
    color: #667781;
    font-size: 0.68rem;
}

.notiq-whatsapp-read-icon {
    color: #53bdeb;
    font-size: 0.95rem;
}

.notiq-whatsapp-attachment {
    max-width: 100%;
    padding: 0.55rem;
    overflow: hidden;
    border: 0;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.58);
}

    .notiq-whatsapp-attachment .rzi {
        color: #075e54;
        font-size: 1.6rem;
    }

.notiq-preview-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Responsive */

@media (max-width: 1199px) {
    .notiq-whatsapp-preview-stage {
        min-height: 580px;
    }
}

@media (max-width: 700px) {
    .notiq-whatsapp-preview-stage {
        min-height: 560px;
        padding: 0.5rem;
    }

    .notiq-whatsapp-mobile-device {
        width: min(100%, 290px);
    }

    .notiq-whatsapp-desktop-sidebar {
        display: none;
    }

    .notiq-whatsapp-desktop-main {
        width: 100%;
        flex-basis: 100%;
    }

    .notiq-whatsapp-desktop-device {
        aspect-ratio: 4 / 5;
    }
}


/* =========================================================
   SMS mobile preview
   ========================================================= */

.notiq-sms-preview-stage {
    width: 100%;
    min-height: 620px;
    padding: 1rem;
    overflow: hidden;
}

.notiq-sms-phone {
    width: min(100%, 330px);
    aspect-ratio: 390 / 844;
    padding: 6px;
    overflow: hidden;
    border: 0;
    border-radius: 32px;
    background: #111827;
    box-shadow: 0 20px 45px rgba(23, 32, 51, 0.18);
}

.notiq-sms-phone-screen {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: 26px;
    background: #ffffff;
}

.notiq-sms-status-bar {
    flex: 0 0 28px;
    height: 28px;
    padding: 0 0.85rem;
    color: #111827;
    background: #ffffff;
}

    .notiq-sms-status-bar .rzi {
        color: #111827;
        font-size: 0.75rem;
    }

.notiq-sms-header {
    flex: 0 0 64px;
    height: 64px;
    padding: 0 0.55rem;
    color: #111827;
    background: #ffffff;
    border-bottom: 1px solid var(--rz-base-300);
}

    .notiq-sms-header .rzi {
        color: #374151;
    }

.notiq-sms-avatar {
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
}

.notiq-sms-chat-area {
    flex: 1 1 auto;
    min-height: 0;
    padding: 1rem 0.85rem;
    overflow: hidden;
    background: radial-gradient( circle at 18px 18px, rgba(148, 163, 184, 0.08) 1px, transparent 1px ), #f5f6f8;
    background-size: 30px 30px;
}

.notiq-sms-date-label {
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    color: #6b7280;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.notiq-sms-message-bubble {
    width: fit-content;
    max-width: 82%;
    padding: 0.65rem 0.75rem;
    border-radius: 16px 16px 4px 16px;
    color: #ffffff;
    background: var(--rz-primary);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.16);
}

.notiq-sms-message-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: #ffffff;
    line-height: 1.45;
}

.notiq-sms-message-time {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.67rem;
}

.notiq-sms-delivered-icon {
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.9rem;
}

.notiq-sms-composer {
    flex: 0 0 58px;
    height: 58px;
    padding: 0.45rem 0.55rem;
    background: #ffffff;
    border-top: 1px solid var(--rz-base-300);
}

.notiq-sms-composer-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
}

.notiq-sms-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

    .notiq-sms-input.rz-textbox,
    .notiq-sms-input .rz-textbox {
        width: 100%;
        border-radius: 20px;
    }

.notiq-sms-send-button {
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
}

.notiq-sms-navigation {
    flex: 0 0 34px;
    height: 34px;
    padding: 0 5rem;
    background: #ffffff;
    border-top: 1px solid #f1f3f4;
}

    .notiq-sms-navigation .rzi {
        color: #5f6368;
        font-size: 0.8rem;
    }

.notiq-sms-ellipsis {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .notiq-sms-preview-stage {
        min-height: 560px;
        padding: 0.5rem;
    }

    .notiq-sms-phone {
        width: min(100%, 290px);
    }
}



/* =========================================================
   Gmail mobile simulation
   Same preview dimensions as WhatsApp and SMS
   ========================================================= */

.notiq-gmail-preview-stage {
    width: 100%;
    min-height: 620px;
    padding: 1rem;
    overflow: hidden;
}

.notiq-gmail-phone {
    width: min(100%, 330px);
    aspect-ratio: 390 / 844;
    padding: 6px;
    overflow: hidden;
    border: 0;
    border-radius: 32px;
    background: #111827;
    box-shadow: 0 20px 45px rgba(23, 32, 51, 0.18);
}

.notiq-gmail-phone-screen {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: 26px;
    background: #ffffff;
}

.notiq-gmail-status-bar {
    flex: 0 0 28px;
    height: 28px;
    padding: 0 0.85rem;
    color: #202124;
    background: #ffffff;
}

    .notiq-gmail-status-bar .rzi {
        color: #202124;
        font-size: 0.75rem;
    }

.notiq-gmail-header {
    flex: 0 0 56px;
    height: 56px;
    padding: 0 0.55rem;
    color: #3c4043;
    background: #ffffff;
    border-bottom: 1px solid #f1f3f4;
}

    .notiq-gmail-header .rzi {
        color: #3c4043;
    }

.notiq-gmail-content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.9rem;
    overflow: hidden;
    background: #ffffff;
}

.notiq-gmail-subject {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #202124;
    line-height: 1.35;
}

.notiq-gmail-star {
    flex: 0 0 auto;
    color: #5f6368;
}

.notiq-gmail-avatar {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
}

.notiq-gmail-recipient-details {
    padding-left: 3rem;
}

.notiq-gmail-message-body {
    padding: 0.2rem 0 0.35rem 3rem;
}

.notiq-gmail-message-text {
    display: -webkit-box;
    overflow: hidden;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: #202124;
    line-height: 1.5;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
}

.notiq-gmail-signature {
    margin-top: 0.4rem;
}

.notiq-gmail-attachment-section {
    padding-top: 0.65rem;
    border-top: 1px solid #f1f3f4;
}

.notiq-gmail-attachment {
    width: 100%;
    padding: 0.6rem;
    border-radius: 10px;
    background: #f8fafd;
}

.notiq-gmail-attachment-icon {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
}

.notiq-gmail-actions {
    padding-left: 3rem;
    margin-top: auto;
}

.notiq-gmail-ellipsis {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notiq-gmail-navigation {
    flex: 0 0 34px;
    height: 34px;
    padding: 0 5rem;
    background: #ffffff;
    border-top: 1px solid #f1f3f4;
}

    .notiq-gmail-navigation .rzi {
        color: #5f6368;
        font-size: 0.8rem;
    }

@media (max-width: 700px) {
    .notiq-gmail-preview-stage {
        min-height: 560px;
        padding: 0.5rem;
    }

    .notiq-gmail-phone {
        width: min(100%, 290px);
    }

    .notiq-gmail-recipient-details,
    .notiq-gmail-message-body,
    .notiq-gmail-actions {
        padding-left: 0;
    }

    .notiq-gmail-content {
        padding: 0.75rem;
    }
}

/* =========================================================
   Shared channel preview container
   ========================================================= */

.notiq-channel-preview-card {
    width: 100%;
    min-height: 100%;
    padding: 1rem;
    overflow: hidden;
    border-radius: 16px;
    background: var(--rz-base-background-color);
}

    .notiq-channel-preview-card > .rz-stack {
        width: 100%;
    }
.notiq-whatsapp-mobile-device,
.notiq-sms-phone,
.notiq-gmail-phone {
    width: min(100%, 330px);
    aspect-ratio: 390 / 844;
    padding: 6px;
    overflow: hidden;
    border: 0;
    border-radius: 32px;
    background: #111827;
    box-shadow: 0 20px 45px rgba(23, 32, 51, 0.18);
}
.notiq-whatsapp-preview-stage,
.notiq-sms-preview-stage,
.notiq-gmail-preview-stage {
    width: 100%;
    min-height: 620px;
    padding: 1rem;
    overflow: hidden;
}



/* Templates page */

.notiq-template-list-title,
.notiq-template-list-code,
.notiq-template-list-summary {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notiq-template-list-title,
.notiq-template-list-code {
    white-space: nowrap;
}

.notiq-template-list-summary {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}




/* =========================================================
   Radzen component states
   ---------------------------------------------------------
   Disabled/hover/pressed component styling intentionally
   remains owned by the active Radzen theme.
   ========================================================= */

/* =========================================================
   NOTIQ LOGIN
   ========================================================= */

.notiq-login-page {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;
    padding: 32px;
    background: #f6f7fb;
}

.notiq-login-background {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

    .notiq-login-background::before {
        position: absolute;
        inset: 0;
        content: "";
        opacity: 0.35;
        background-image: linear-gradient( rgba(99, 91, 255, 0.04) 1px, transparent 1px ), linear-gradient( 90deg, rgba(99, 91, 255, 0.04) 1px, transparent 1px );
        background-size: 44px 44px;
    }

.notiq-login-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
}

.notiq-login-orb-one {
    top: -200px;
    left: -180px;
    width: 560px;
    height: 560px;
    background: rgba(99, 91, 255, 0.2);
}

.notiq-login-orb-two {
    right: -220px;
    bottom: -220px;
    width: 600px;
    height: 600px;
    background: rgba(24, 182, 164, 0.16);
}

.notiq-login-ring {
    position: absolute;
    border: 1px solid rgba(99, 91, 255, 0.12);
    border-radius: 50%;
}

.notiq-login-ring-one {
    top: 7%;
    left: -8%;
    width: 520px;
    height: 250px;
    transform: rotate(-18deg);
}

.notiq-login-ring-two {
    right: -8%;
    bottom: 6%;
    width: 520px;
    height: 250px;
    border-color: rgba(24, 182, 164, 0.13);
    transform: rotate(18deg);
}

/* Shell */

.notiq-login-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    width: min(1000px, 100%);
    min-height: 640px;
    overflow: hidden;
    border: 1px solid #e6e8f0;
    border-radius: 30px;
    background: #ffffff;
    box-shadow: 0 36px 90px rgba(17, 24, 43, 0.14), 0 10px 28px rgba(99, 91, 255, 0.06);
}

/* Visual Panel */

.notiq-login-visual {
    position: relative;
    min-height: 640px;
    overflow: hidden;
    background: radial-gradient( circle at 86% 16%, rgba(99, 91, 255, 0.34), transparent 34% ), radial-gradient( circle at 20% 100%, rgba(24, 182, 164, 0.15), transparent 36% ), #11182b;
}

    .notiq-login-visual::before {
        position: absolute;
        top: -160px;
        right: -150px;
        width: 430px;
        height: 430px;
        content: "";
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 50%;
    }

    .notiq-login-visual::after {
        position: absolute;
        left: -220px;
        bottom: -260px;
        width: 560px;
        height: 560px;
        content: "";
        border: 1px solid rgba(24, 182, 164, 0.12);
        border-radius: 50%;
    }

.notiq-login-visual-brand {
    position: absolute;
    top: 38px;
    left: 38px;
    z-index: 2;
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 17px;
    background: #eef0ff;
    box-shadow: inset 0 1px 0 #ffffff, 0 16px 30px rgba(0, 0, 0, 0.22);
}

    .notiq-login-visual-brand img {
        width: 42px;
        height: 42px;
    }

.notiq-login-art {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: min(450px, 92%);
    height: auto;
    transform: translate(-50%, -46%);
}

.notiq-login-channel-list {
    position: absolute;
    right: 34px;
    bottom: 32px;
    z-index: 2;
    display: flex;
    gap: 10px;
}

    .notiq-login-channel-list span {
        display: grid;
        width: 42px;
        height: 42px;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, 0.11);
        border-radius: 12px;
        color: #ffffff;
        background: rgba(255, 255, 255, 0.07);
        backdrop-filter: blur(12px);
    }

        .notiq-login-channel-list span:first-child {
            color: #aaa5ff;
        }

        .notiq-login-channel-list span:last-child {
            color: #55d8c8;
        }

/* Form Panel */

.notiq-login-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 640px;
    padding: 58px;
    background: #ffffff;
}

.notiq-login-form-container {
    width: min(100%, 420px);
}

.notiq-login-mobile-logo {
    display: none;
}

.notiq-login-heading {
    margin-bottom: 32px;
    text-align: center;
}

    .notiq-login-heading h1 {
        margin: 0;
        color: #172033;
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: -0.05em;
    }

    .notiq-login-heading p {
        margin: 0;
        color: #667085;
    }

.notiq-login-alert {
    width: 100%;
    margin-bottom: 20px;
    border-radius: 13px;
}

/* Fields */

.notiq-login-field {
    display: grid;
    gap: 7px;
}

    .notiq-login-field .rz-label {
        color: #344054;
        font-size: 0.78rem;
        font-weight: 650;
    }

.notiq-login-input-shell {
    display: flex;
    align-items: center;
    min-height: 56px;
    overflow: hidden;
    border: 1px solid #d0d5dd;
    border-radius: 14px;
    background: #ffffff;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

    .notiq-login-input-shell:hover {
        border-color: #a9a5ff;
    }

    .notiq-login-input-shell:focus-within {
        border-color: #635bff;
        box-shadow: 0 0 0 4px rgba(99, 91, 255, 0.11);
    }

    .notiq-login-input-shell > .rzi {
        flex: 0 0 auto;
        margin-left: 16px;
        color: #667085;
        font-size: 1.15rem;
    }

    .notiq-login-input-shell .rz-textbox,
    .notiq-login-input-shell .rz-password {
        width: 100%;
        min-height: 54px;
        border: 0 !important;
        border-radius: 0 !important;
        outline: 0 !important;
        color: #172033;
        background: transparent !important;
        box-shadow: none !important;
        text-align: left;
    }

    .notiq-login-input-shell input {
        width: 100%;
        min-height: 54px;
        padding-right: 15px;
        border: 0 !important;
        outline: 0 !important;
        color: #172033;
        background: transparent !important;
        box-shadow: none !important;
        text-align: left;
        font-size: 0.92rem;
    }

        .notiq-login-input-shell input:-webkit-autofill,
        .notiq-login-input-shell input:-webkit-autofill:hover,
        .notiq-login-input-shell input:-webkit-autofill:focus {
            -webkit-text-fill-color: #172033 !important;
            -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
            box-shadow: 0 0 0 1000px #ffffff inset !important;
        }

.notiq-login-field .rz-message {
    margin-left: 3px;
    color: #dc2626;
    font-size: 0.73rem;
}

/* Button */

.notiq-login-submit {
    width: 100%;
    min-height: 54px;
    border: 0;
    border-radius: 14px;
    color: #ffffff;
    font-weight: 750;
    background: linear-gradient( 100deg, #635bff, #4f46e5 58%, #18b6a4 );
    box-shadow: 0 16px 30px rgba(99, 91, 255, 0.25);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

    .notiq-login-submit:not(:disabled):hover {
        box-shadow: 0 20px 36px rgba(99, 91, 255, 0.31);
        transform: translateY(-1px);
    }

.notiq-login-security {
    margin-top: 24px;
    color: #667085;
}

    .notiq-login-security .rzi {
        color: #18b6a4;
    }

.notiq-login-footer {
    display: block;
    margin-top: 24px;
    color: #98a2b3;
}

/* Responsive */

@media (max-width: 900px) {
    .notiq-login-page {
        padding: 24px;
    }

    .notiq-login-shell {
        display: block;
        width: min(520px, 100%);
    }

    .notiq-login-visual {
        display: none;
    }

    .notiq-login-form-panel {
        min-height: 640px;
        padding: 48px;
    }

    .notiq-login-mobile-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-bottom: 42px;
    }

        .notiq-login-mobile-logo img {
            width: 45px;
            height: 45px;
        }

        .notiq-login-mobile-logo strong {
            color: #172033;
            font-size: 1.35rem;
            font-weight: 800;
        }
}

@media (max-width: 560px) {
    .notiq-login-page {
        padding: 0;
        background: #ffffff;
    }

    .notiq-login-background {
        display: none;
    }

    .notiq-login-shell {
        width: 100%;
        min-height: 100vh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .notiq-login-form-panel {
        min-height: 100vh;
        align-items: flex-start;
        padding: 30px 20px;
    }

    .notiq-login-mobile-logo {
        justify-content: flex-start;
        margin: 4px 0 54px;
    }

    .notiq-login-heading {
        text-align: left;
    }

        .notiq-login-heading h1 {
            font-size: 1.9rem;
        }
}



/* =========================================
   WhatsApp Conversation Monitor
   ========================================= */

.notiq-conversation-chat {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 0.75rem;
    background: #f7f8fa;
}

.notiq-conversation-row {
    display: flex;
    width: 100%;
    margin-bottom: 0.75rem;
}

    .notiq-conversation-row.incoming {
        justify-content: flex-start;
    }

    .notiq-conversation-row.outgoing {
        justify-content: flex-end;
    }

.notiq-conversation-bubble {
    width: fit-content;
    max-width: 78%;
    padding: 0.7rem 0.85rem;
    border-radius: 0.85rem;
    border: 1px solid var(--rz-base-300);
}

    .notiq-conversation-bubble.incoming {
        background: #ffffff;
        border-top-left-radius: 0.25rem;
    }

    .notiq-conversation-bubble.outgoing {
        background: #e8faf7;
        border-color: #c9eee8;
        border-top-right-radius: 0.25rem;
    }

.notiq-conversation-message-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.notiq-conversation-meta {
    color: var(--rz-text-secondary-color);
    font-size: 0.7rem;
}

@media (max-width: 991px) {
    .notiq-conversation-bubble {
        max-width: 90%;
    }
}


/* =========================================================
   NOTIQ — CENTRAL TYPOGRAPHY SYSTEM
   Single source of truth for all tenant application pages.
   ========================================================= */

:root {
    --notiq-font-family: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;

    --notiq-font-size-2xs: 0.6875rem; /* 11px */
    --notiq-font-size-xs: 0.75rem;    /* 12px */
    --notiq-font-size-sm: 0.8125rem;  /* 13px */
    --notiq-font-size-md: 0.875rem;   /* 14px */
    --notiq-font-size-lg: 1rem;       /* 16px */
    --notiq-font-size-xl: 1.125rem;   /* 18px */
    --notiq-font-size-2xl: 1.25rem;   /* 20px */
    --notiq-font-size-3xl: 1.5rem;    /* 24px */
    --notiq-font-size-page: 1.75rem;  /* 28px */
    --notiq-font-size-metric: 2rem;   /* 32px */

    --notiq-line-tight: 1.15;
    --notiq-line-title: 1.25;
    --notiq-line-body: 1.5;
}

/* Base application text */
html,
body,
button,
input,
textarea,
select,
.rz-component {
    font-family: var(--notiq-font-family);
}

body,
.rz-component {
    font-size: var(--notiq-font-size-md);
    line-height: var(--notiq-line-body);
}

/* Native headings + Radzen TextStyle hierarchy */
h1,
.rz-text-h1 {
    font-size: var(--notiq-font-size-page) !important;
    line-height: var(--notiq-line-tight) !important;
    font-weight: 650 !important;
    letter-spacing: -0.025em;
}

h2,
.rz-text-h2 {
    font-size: var(--notiq-font-size-3xl) !important;
    line-height: 1.2 !important;
    font-weight: 650 !important;
    letter-spacing: -0.02em;
}

h3,
.rz-text-h3 {
    font-size: var(--notiq-font-size-2xl) !important;
    line-height: var(--notiq-line-title) !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em;
}

h4,
.rz-text-h4 {
    font-size: var(--notiq-font-size-xl) !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
}

h5,
.rz-text-h5 {
    font-size: var(--notiq-font-size-lg) !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
}

h6,
.rz-text-h6 {
    font-size: var(--notiq-font-size-md) !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
}

/* Radzen semantic text styles */
.rz-text-subtitle1 {
    font-size: var(--notiq-font-size-md) !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
}

.rz-text-subtitle2 {
    font-size: var(--notiq-font-size-sm) !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
}

.rz-text-body1 {
    font-size: var(--notiq-font-size-md) !important;
    line-height: var(--notiq-line-body) !important;
}

.rz-text-body2 {
    font-size: var(--notiq-font-size-sm) !important;
    line-height: 1.5 !important;
}

.rz-text-caption {
    font-size: var(--notiq-font-size-xs) !important;
    line-height: 1.4 !important;
}

.rz-text-overline {
    font-size: var(--notiq-font-size-2xs) !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
}

/* Notiq page hierarchy */
.notiq-page-title,
.app-page-header h1,
.notiq-dashboard-title {
    font-size: var(--notiq-font-size-page) !important;
    line-height: var(--notiq-line-tight) !important;
    font-weight: 650 !important;
    letter-spacing: -0.025em !important;
}

.notiq-page-description,
.app-page-header p,
.notiq-dashboard-subtitle {
    font-size: var(--notiq-font-size-sm) !important;
    line-height: 1.5 !important;
}

.notiq-page-eyebrow,
.notiq-dashboard-eyebrow {
    font-size: var(--notiq-font-size-2xs) !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
}

/* Reusable metric scale */
.notiq-metric,
.notiq-dashboard-kpi-value,
.notiq-dashboard-total-value {
    font-size: var(--notiq-font-size-metric) !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    letter-spacing: -0.035em !important;
}

.notiq-metric-md,
.notiq-dashboard-cost-value {
    font-size: var(--notiq-font-size-3xl) !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
}

.notiq-dashboard-summary-value {
    font-size: var(--notiq-font-size-lg) !important;
    line-height: 1.25 !important;
}

/* Controls */
.rz-button,
.rz-button-text,
.rz-inputtext,
.rz-textbox,
.rz-dropdown,
.rz-dropdown-item,
.rz-dropdown-label,
.rz-numeric,
.rz-datepicker,
.rz-autocomplete,
.rz-multiselect,
.rz-fileupload,
.rz-menuitem-text {
    font-size: var(--notiq-font-size-sm) !important;
}

.rz-form-field-label,
.rz-fieldset-legend,
label {
    font-size: var(--notiq-font-size-xs);
}

/* Tabs */
.rz-tabview-title,
.rz-tabview-nav-link {
    font-size: var(--notiq-font-size-sm) !important;
}

/* Data grids and tables */
.rz-datatable,
.rz-grid-table,
.rz-data-grid,
.rz-datatable-data td,
.rz-grid-table td {
    font-size: var(--notiq-font-size-sm) !important;
}

.rz-datatable-thead th,
.rz-grid-table thead th,
.rz-column-title {
    font-size: var(--notiq-font-size-xs) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
}

/* Dialogs / alerts / badges */
.rz-dialog-title {
    font-size: var(--notiq-font-size-lg) !important;
    font-weight: 600 !important;
}

.rz-alert,
.rz-notification,
.rz-badge {
    font-size: var(--notiq-font-size-xs);
}

/* Supporting text */
.notiq-muted,
.notiq-dashboard .notiq-muted {
    font-size: var(--notiq-font-size-xs);
    line-height: 1.45;
}

/* Mobile keeps the same hierarchy, only major display text steps down. */
@media (max-width: 767px) {
    h1,
    .rz-text-h1,
    .notiq-page-title,
    .app-page-header h1,
    .notiq-dashboard-title {
        font-size: var(--notiq-font-size-3xl) !important;
    }

    .notiq-metric,
    .notiq-dashboard-kpi-value,
    .notiq-dashboard-total-value {
        font-size: 1.75rem !important;
    }

    .notiq-metric-md,
    .notiq-dashboard-cost-value {
        font-size: 1.35rem !important;
    }
}