/* ==========================================================================
   Q.Suite Control Panel — design system
   Brand-aligned with Cyvy (indigo/violet). Light, data-dense admin theme.
   Class names are preserved 1:1 with the Razor markup; restyling only.
   ========================================================================== */

@font-face {
    font-family: "Lexend";
    src: url("/landing/fonts/Lexend-VariableFont_wght.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-display: swap;
}

:root {
    color-scheme: light;

    /* Surfaces & neutrals */
    --bg: #f5f6fc;
    --surface: #ffffff;
    --surface-2: #f3f5fd;
    --surface-3: #eef1fb;
    --line: #e6e8f4;
    --line-strong: #d6daec;
    --text: #171a33;
    --text-soft: #3a405f;
    --muted: #6c7390;

    /* Brand (Cyvy) */
    --brand: #5b68e8;
    --brand-dark: #4954d4;
    --brand-darker: #3a45b8;
    --brand-2: #8b85f4;
    --brand-3: #5ca8fb;
    --brand-deep: #161a3c;
    --brand-deep-2: #1f2350;
    --brand-soft: #eef0fe;
    --brand-soft-2: #e4e7fd;
    --brand-ring: rgba(91, 104, 232, .32);
    --brand-grad: linear-gradient(135deg, #6b73ec 0%, #5b68e8 55%, #5ca8fb 130%);

    /* Status */
    --green: #0f8a52;
    --green-soft: #e7f8ef;
    --green-line: #b6e6cb;
    --amber: #9a5b00;
    --amber-soft: #fff5e3;
    --amber-line: #f3d39a;
    --red: #c5392b;
    --red-soft: #fdeeec;
    --red-line: #f4c0ba;

    /* Radius scale */
    --r-xs: 7px;
    --r-sm: 9px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-pill: 999px;

    /* Elevation */
    --shadow-xs: 0 1px 2px rgba(20, 24, 54, .05);
    --shadow-sm: 0 2px 6px rgba(20, 24, 54, .06), 0 1px 2px rgba(20, 24, 54, .04);
    --shadow: 0 10px 26px rgba(28, 33, 74, .08), 0 2px 6px rgba(28, 33, 74, .05);
    --shadow-lg: 0 24px 60px rgba(24, 28, 64, .16), 0 6px 16px rgba(24, 28, 64, .08);

    font-family: "Lexend", "Segoe UI", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 1.5;
}

/* Subtle ambient brand wash behind the whole app */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(820px 520px at 100% -10%, rgba(92, 168, 251, .10), transparent 60%),
        radial-gradient(720px 480px at -10% 0%, rgba(139, 133, 244, .10), transparent 55%);
}

a {
    color: inherit;
    text-decoration: none;
}

::selection {
    background: var(--brand-soft-2);
    color: var(--brand-darker);
}

button,
input,
select,
textarea {
    font: inherit;
}

/* ----------------------------------------------------------------- Buttons */

button:not([class*="mud-"]),
.primary-link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: var(--r-sm);
    padding: 0 16px;
    background: var(--brand-grad);
    color: #fff;
    font-weight: 600;
    letter-spacing: .005em;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(91, 104, 232, .28), inset 0 1px 0 rgba(255, 255, 255, .18);
    transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}

button:not([class*="mud-"]):hover,
.primary-link:hover {
    filter: brightness(1.04);
    box-shadow: 0 7px 18px rgba(91, 104, 232, .34), inset 0 1px 0 rgba(255, 255, 255, .2);
    transform: translateY(-1px);
}

button:not([class*="mud-"]):active,
.primary-link:active {
    transform: translateY(0);
    box-shadow: 0 3px 9px rgba(91, 104, 232, .26);
}

button:not([class*="mud-"]):disabled {
    cursor: not-allowed;
    opacity: .5;
    box-shadow: none;
    transform: none;
    filter: grayscale(.2);
}

button:not([class*="mud-"]):focus-visible,
.primary-link:focus-visible,
.ghost-button:focus-visible,
a:focus-visible,
input:not([class*="mud-"]):focus-visible,
select:not([class*="mud-"]):focus-visible,
textarea:not([class*="mud-"]):focus-visible,
.nav-link:focus-visible,
.table-row:focus-visible,
.dense-row:focus-visible,
summary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--brand-ring);
}

.ghost-button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    padding: 0 15px;
    background: var(--surface);
    color: var(--text-soft);
    font-weight: 600;
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}

.ghost-button:hover {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-darker);
    transform: translateY(-1px);
}

.danger-button {
    border: 1px solid var(--red-line);
    background: var(--red-soft);
    color: var(--red);
    box-shadow: none;
}

.danger-button:hover {
    background: #fbe1dd;
    border-color: var(--red);
    color: var(--red);
    filter: none;
}

/* ------------------------------------------------------------ Form controls */

input:not([class*="mud-"]),
select:not([class*="mud-"]),
textarea:not([class*="mud-"]) {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    padding: 8px 12px;
    background: var(--surface);
    color: var(--text);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

input:not([class*="mud-"])::placeholder,
textarea:not([class*="mud-"])::placeholder {
    color: #9aa1bd;
}

input:not([class*="mud-"]):hover,
select:not([class*="mud-"]):hover,
textarea:not([class*="mud-"]):hover {
    border-color: #c2c8e0;
}

input:not([class*="mud-"]):focus,
select:not([class*="mud-"]):focus,
textarea:not([class*="mud-"]):focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
}

input[type="checkbox"]:not([class*="mud-"]) {
    width: 18px;
    min-height: 18px;
    accent-color: var(--brand);
}

label:not([class*="mud-"]) {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}

.checkbox-label {
    min-height: 40px;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    align-content: center;
    color: var(--text);
}

/* -------------------------------------------------------------- Typography */

h1,
h2,
p {
    margin: 0;
}

h1 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
}

h2 {
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -.01em;
}

small {
    color: var(--muted);
}

.eyebrow {
    display: inline-block;
    margin-bottom: 4px;
    color: var(--brand);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------- App shell */

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
}

.app-shell.app-shell-login {
    grid-template-columns: minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 22px 16px;
    border-right: 1px solid rgba(255, 255, 255, .07);
    background: linear-gradient(180deg, var(--brand-deep-2) 0%, var(--brand-deep) 60%, #11142f 100%);
    color: #fff;
    overflow: hidden;
}

.sidebar::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    top: -120px;
    right: -140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 133, 244, .35), transparent 70%);
    filter: blur(20px);
    pointer-events: none;
}

.brand-block {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.brand-block strong {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.brand-block span,
.sidebar-meta span {
    display: block;
    color: rgba(214, 219, 255, .58);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.brand-mark {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 11px;
    object-fit: contain;
    background: rgba(255, 255, 255, .06);
    padding: 5px;
    box-shadow: 0 6px 14px rgba(2, 8, 30, .35), inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.nav-section-label {
    position: relative;
    z-index: 1;
    padding: 0 10px;
    color: rgba(214, 219, 255, .42);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.nav-stack {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 4px;
}

.nav-link {
    position: relative;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: var(--r-sm);
    padding: 0 12px;
    color: rgba(225, 228, 255, .74);
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}

.nav-link svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .85;
}

.nav-link:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

.nav-link.active {
    background: linear-gradient(90deg, rgba(124, 122, 248, .26), rgba(124, 122, 248, .08));
    color: #fff;
}

.nav-link.active::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 22px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, var(--brand-2), var(--brand-3));
}

.nav-link.active svg {
    opacity: 1;
}

.sidebar-meta {
    position: relative;
    z-index: 1;
    margin-top: auto;
    display: grid;
    gap: 3px;
    padding: 12px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    overflow-wrap: anywhere;
}

.sidebar-meta strong {
    font-size: 13px;
    font-weight: 600;
}

/* --------------------------------------------------------------- Main area */

.main-surface {
    min-width: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    min-width: 0;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 26px;
    border-bottom: 1px solid var(--line);
    background: rgba(250, 251, 254, .82);
    backdrop-filter: saturate(160%) blur(14px);
}

.topbar .eyebrow {
    margin-bottom: 2px;
}

.topbar strong {
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -.01em;
}

.identity-block {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--muted);
    font-size: 14px;
}

.identity-block > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 8px;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    color: var(--brand-darker);
    font-weight: 600;
    font-size: 13px;
}

.identity-block > span::before {
    content: "";
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand-grad);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55);
}

.page-content {
    min-width: 0;
    padding: 26px;
    max-width: 1480px;
    width: 100%;
}

.page-heading,
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.command-group {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.command-group.wrap {
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------- Tenant hero */

.tenant-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 22px;
    background:
        radial-gradient(120% 140% at 0% 0%, var(--brand-soft) 0%, transparent 45%),
        linear-gradient(180deg, #ffffff 0%, var(--surface-2) 100%);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.tenant-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--brand-grad);
}

.tenant-hero p {
    margin-top: 8px;
    color: var(--muted);
}

.tenant-actions {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
}

.tenant-action {
    min-width: 136px;
    min-height: 58px;
    display: grid;
    align-content: center;
    gap: 3px;
    border: 1px solid var(--brand-soft-2);
    border-radius: var(--r-md);
    padding: 10px 14px;
    background: var(--surface);
    color: var(--brand-dark);
    box-shadow: var(--shadow-xs);
    transition: border-color .15s ease, background .15s ease, transform .12s ease, box-shadow .15s ease;
}

.tenant-action:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.tenant-action span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.tenant-action strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

.tenant-action-secondary {
    border-color: transparent;
    background: var(--brand-grad);
    box-shadow: 0 6px 16px rgba(91, 104, 232, .26);
}

.tenant-action-secondary:hover {
    border-color: transparent;
    background: var(--brand-grad);
    filter: brightness(1.05);
}

.tenant-action-secondary span,
.tenant-action-secondary strong {
    color: #fff;
}

.tenant-action-secondary span {
    color: rgba(255, 255, 255, .82);
}

/* ------------------------------------------------------------------ Login */

.login-shell {
    min-height: calc(100vh - 4px);
    display: grid;
    place-items: center;
    padding: 32px 20px;
    background:
        radial-gradient(900px 600px at 50% -10%, rgba(139, 133, 244, .16), transparent 60%),
        radial-gradient(700px 500px at 100% 100%, rgba(92, 168, 251, .14), transparent 55%);
}

.login-panel {
    position: relative;
    width: min(440px, 100%);
    display: grid;
    gap: 22px;
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.login-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--brand-grad);
}

.login-brand {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
}

.login-brand img {
    width: 60px;
    height: 60px;
    border-radius: var(--r-md);
    object-fit: contain;
    background: var(--brand-soft);
    padding: 8px;
    box-shadow: var(--shadow-sm);
}

.login-brand h1 {
    font-size: 24px;
}

.login-panel .form-stack button {
    margin-top: 4px;
    min-height: 44px;
}

.login-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
}

.login-divider::before,
.login-divider::after {
    content: "";
    height: 1px;
    background: var(--line);
}

/* ------------------------------------------------------------ Form layouts */

.form-stack,
.form-grid {
    display: grid;
    gap: 14px;
}

.form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid.compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 16px;
}

/* ----------------------------------------------------------- Metric tiles */

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.metric-tile,
.panel {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.metric-tile {
    position: relative;
    display: grid;
    gap: 7px;
    padding: 18px;
    overflow: hidden;
    transition: transform .14s ease, box-shadow .16s ease, border-color .16s ease;
}

.metric-tile::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--brand-grad);
    opacity: .85;
}

.metric-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--brand-soft-2);
}

.metric-tile span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}

.metric-tile strong {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text);
}

.tenant-metrics .metric-tile {
    min-height: 96px;
}

.tenant-metrics .metric-tile strong {
    font-size: 25px;
}

/* --------------------------------------------------------------- Grids */

.split-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 16px;
}

.tenant-detail-grid {
    display: grid;
    grid-template-columns: minmax(360px, .9fr) minmax(520px, 1.35fr);
    gap: 16px;
    align-items: start;
}

.workspace-detail-grid {
    grid-template-columns: minmax(320px, .85fr) minmax(420px, 1.15fr);
}

.workspace-permission-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.panel {
    padding: 18px;
}

/* ------------------------------------------------------------ Lists/tables */

.dense-list,
.data-table {
    display: grid;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--surface);
}

.dense-row,
.table-row {
    display: grid;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    text-align: left;
    transition: background .13s ease;
}

.dense-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.table-row {
    grid-template-columns: minmax(220px, 1.4fr) minmax(130px, .8fr) minmax(130px, .8fr) auto;
    width: 100%;
}

.table-row:last-child,
.dense-row:last-child {
    border-bottom: 0;
}

.table-row:hover,
.dense-row:hover {
    background: var(--brand-soft);
}

.table-row span:first-child,
.dense-row span:first-child {
    display: grid;
    gap: 2px;
}

.table-row strong,
.dense-row strong {
    font-weight: 600;
}

/* ------------------------------------------------------------------ Chips */

.status-chip {
    width: fit-content;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--r-pill);
    padding: 0 11px;
    background: var(--surface-3);
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
}

.warning-chip {
    background: var(--amber-soft);
    color: var(--amber);
}

.danger-chip {
    background: var(--red-soft);
    color: var(--red);
}

.live-chip {
    background: var(--green-soft);
    color: var(--green);
}

.live-chip::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(15, 138, 82, .16);
}

/* ----------------------------------------------------------- Permissions */

.permission-workbench {
    margin-top: 16px;
}

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

.permission-item {
    grid-template-columns: minmax(0, 1fr) 150px;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

.permission-item span {
    display: grid;
    gap: 2px;
}

/* ------------------------------------------------------------------ Audit */

.audit-toolbar {
    display: grid;
    grid-template-columns: auto minmax(260px, 1fr) 150px auto;
    align-items: end;
    gap: 12px;
    margin-bottom: 14px;
}

.audit-toolbar > div:first-child {
    display: grid;
    gap: 2px;
    min-width: 110px;
}

.audit-toolbar > div:first-child strong {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.audit-toolbar > div:first-child span {
    color: var(--muted);
    font-size: 13px;
}

.audit-policy {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    border: 1px solid var(--brand-soft-2);
    border-radius: var(--r-md);
    padding: 12px 14px;
    background: var(--brand-soft);
    color: var(--brand-darker);
}

.audit-policy span {
    color: var(--brand-dark);
}

.audit-table .audit-row {
    grid-template-columns: minmax(320px, 1.8fr) minmax(190px, .8fr) minmax(190px, .8fr) minmax(220px, 1fr);
}

.audit-narrative strong,
.audit-narrative small {
    overflow-wrap: anywhere;
}

.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    color: var(--muted);
}

/* ------------------------------------------------------------ Module cards */

.module-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
    margin-bottom: 12px;
}

.module-search small {
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
    padding-bottom: 11px;
}

.module-card-list {
    display: grid;
    gap: 9px;
    max-height: 520px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}

.module-card-list::-webkit-scrollbar {
    width: 8px;
}

.module-card-list::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: var(--r-pill);
}

.module-card {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(160px, .9fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 74px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    transition: border-color .14s ease, box-shadow .14s ease;
}

.module-card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-sm);
}

.module-card.enabled {
    border-color: var(--green-line);
    background: linear-gradient(180deg, #fbfffc, #f3fbf6);
}

.module-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.module-main-openable {
    cursor: pointer;
}

.module-main-openable:hover strong {
    color: var(--brand);
}

.module-main span:last-child,
.module-meta,
.tenant-user-row span:first-child {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.module-main strong,
.module-main small,
.tenant-user-row strong,
.tenant-user-row small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.module-meta {
    justify-items: start;
}

.module-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--r-pill);
    background: #c4cadb;
}

.status-dot.on {
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(15, 138, 82, .14);
}

/* -------------------------------------------------------------- Tenant users */

.tenant-user-workbench {
    display: grid;
    grid-template-columns: minmax(260px, .78fr) minmax(360px, 1fr);
    gap: 16px;
    align-items: start;
}

.tenant-user-form {
    display: grid;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 16px;
    background: var(--surface-2);
}

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

.tenant-user-list {
    display: grid;
    gap: 9px;
}

.tenant-user-row {
    width: 100%;
    min-height: 74px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px;
    background: var(--surface);
    color: var(--text);
    text-align: left;
    box-shadow: var(--shadow-xs);
    transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.tenant-user-row:hover,
.tenant-user-row.selected {
    border-color: var(--brand);
    background: var(--brand-soft);
    box-shadow: var(--shadow-sm);
}

.user-row-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

/* --------------------------------------------------------- Status blocks */

.loading-block,
.success-text,
.warning-text,
.error-text {
    padding: 14px 16px;
    border-radius: var(--r-md);
    font-size: 14px;
}

.loading-block {
    position: relative;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    box-shadow: var(--shadow-xs);
    padding-left: 42px;
}

.loading-block::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border-radius: 50%;
    border: 2px solid var(--brand-soft-2);
    border-top-color: var(--brand);
    animation: spin .7s linear infinite;
}

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

.success-text {
    border: 1px solid var(--green-line);
    background: var(--green-soft);
    color: var(--green);
    margin-bottom: 14px;
}

.warning-text {
    border: 1px solid var(--amber-line);
    background: var(--amber-soft);
    color: var(--amber);
    margin-bottom: 14px;
}

.error-text {
    border: 1px solid var(--red-line);
    background: var(--red-soft);
    color: var(--red);
    margin-bottom: 14px;
}

.empty-state {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 160px;
    padding: 20px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-md);
    background: var(--surface-2);
}

.empty-state p,
.empty-inline {
    color: var(--muted);
}

.empty-inline {
    padding: 14px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}

/* ----------------------------------------------------------- Communications */

.communications-workbench {
    display: grid;
    grid-template-columns: minmax(260px, .85fr) minmax(420px, 1.45fr) minmax(300px, .95fr);
    gap: 16px;
    align-items: start;
}

.communications-metrics {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.compact-head {
    margin-bottom: 12px;
}

.conversation-list-panel,
.conversation-thread-panel,
.operations-panel {
    min-height: 640px;
}

.conversation-list {
    display: grid;
    gap: 9px;
    margin-top: 12px;
}

.conversation-row {
    width: 100%;
    min-height: 86px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 12px;
    background: var(--surface);
    color: var(--text);
    text-align: left;
    box-shadow: var(--shadow-xs);
    transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.conversation-row:hover,
.conversation-row.selected {
    border-color: var(--brand);
    background: var(--brand-soft);
    box-shadow: var(--shadow-sm);
}

.conversation-main,
.conversation-meta,
.webhook-item span,
.diagnostic-item summary span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.conversation-main span,
.conversation-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-meta {
    justify-items: end;
}

.thread-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.inline-number {
    width: 118px;
}

.message-list {
    height: 480px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px;
    background:
        radial-gradient(140% 100% at 50% 0%, var(--surface-3), transparent 60%),
        var(--surface-2);
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}

.message-row {
    display: flex;
}

.message-row.outbound {
    justify-content: flex-end;
}

.message-bubble {
    width: min(78%, 560px);
    display: grid;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 14px 14px 14px 4px;
    padding: 11px 13px;
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

.message-row.outbound .message-bubble {
    border-color: transparent;
    border-radius: 14px 14px 4px 14px;
    background: var(--brand-grad);
    color: #fff;
    box-shadow: 0 4px 12px rgba(91, 104, 232, .24);
}

.message-row.outbound .message-bubble .message-meta,
.message-row.outbound .message-bubble small {
    color: rgba(255, 255, 255, .82);
}

.message-media-preview,
.message-media-player {
    width: 100%;
    max-height: 280px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    object-fit: contain;
}

.media-link {
    color: var(--brand);
    font-size: 13px;
    font-weight: 600;
}

.message-row.outbound .media-link {
    color: #fff;
    text-decoration: underline;
}

.message-meta,
.reaction-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
}

.reaction-row {
    justify-content: flex-start;
    flex-wrap: wrap;
}

.composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px auto;
    gap: 10px;
    align-items: end;
    margin-top: 12px;
}

.composer textarea,
.stacked-form textarea {
    width: 100%;
    min-height: 84px;
    resize: vertical;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    font: inherit;
}

.stacked-form {
    display: grid;
    gap: 10px;
}

.stacked-form textarea {
    min-height: 78px;
}

.diagnostic-list,
.webhook-list {
    display: grid;
    gap: 9px;
    max-height: 275px;
    overflow-y: auto;
}

.compact-list {
    max-height: 180px;
    gap: 0.65rem;
}

.diagnostic-item,
.webhook-item {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

.diagnostic-item summary {
    cursor: pointer;
    font-weight: 600;
}

.diagnostic-item p {
    margin-top: 8px;
    color: var(--muted);
}

.diagnostic-item pre {
    max-height: 180px;
    overflow: auto;
    border: 1px solid var(--brand-deep-2);
    border-radius: var(--r-sm);
    padding: 10px;
    background: var(--brand-deep);
    color: #e8ecff;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.webhook-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.panel-divider {
    height: 1px;
    margin: 16px 0;
    background: var(--line);
}

.instance-form,
.add-instance-form {
    margin-bottom: 0;
}

.phone-hint {
    min-height: 36px;
    display: flex;
    align-items: center;
    border: 1px solid var(--amber-line);
    border-radius: var(--r-sm);
    padding: 8px 12px;
    background: var(--amber-soft);
    color: var(--amber);
    font-size: 13px;
}

.phone-hint.valid {
    border-color: var(--green-line);
    background: var(--green-soft);
    color: var(--green);
}

.fixed-settings-panel,
.connection-summary,
.danger-zone,
.polling-status,
.provider-details {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px;
    background: var(--surface-2);
}

.fixed-settings-panel strong,
.connection-summary strong,
.danger-zone strong {
    display: block;
}

.fixed-settings-panel small,
.connection-summary span,
.danger-zone small {
    color: var(--muted);
    font-size: 13px;
}

.evolution-default-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 9px;
}

.evolution-default-badge {
    min-height: 56px;
    display: grid;
    align-content: center;
    gap: 2px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 9px 12px;
    background: var(--surface);
}

.evolution-default-badge strong {
    overflow-wrap: anywhere;
    font-size: 13px;
    line-height: 1.2;
}

.evolution-default-badge small {
    font-size: 12px;
}

.evolution-default-badge.default-enabled {
    border-color: var(--green-line);
    background: var(--green-soft);
}

.evolution-default-badge.default-enabled small {
    color: var(--green);
}

.evolution-default-badge.default-disabled {
    border-color: var(--line);
    background: var(--surface-2);
}

.evolution-default-badge.default-disabled small {
    color: var(--muted);
}

.evolution-default-badge.default-neutral {
    border-color: var(--brand-soft-2);
    background: var(--brand-soft);
}

.evolution-default-badge.default-neutral small {
    color: var(--brand-dark);
}

.webhook-address-card {
    display: grid;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 12px;
    background: var(--surface);
}

.webhook-address-card code {
    display: block;
    overflow-wrap: anywhere;
    border: 1px solid var(--brand-deep-2);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    background: var(--brand-deep);
    color: #e8ecff;
    font-size: 12px;
    line-height: 1.55;
}

/* --------------------------------------------------------------- Groups */

.groups-panel {
    align-content: start;
}

.group-list {
    display: grid;
    gap: 9px;
}

.group-row {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 10px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

.group-name-cell {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.group-icon {
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid var(--brand-soft-2);
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
}

.group-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.group-row strong,
.group-row span,
.group-row small {
    display: block;
    overflow-wrap: anywhere;
}

.group-row span {
    color: var(--text);
    font-size: 13px;
}

/* ----------------------------------------------------------- Prompt editor */

.prompt-settings-panel {
    margin-bottom: 16px;
}

.prompt-editor-layout {
    display: grid;
    grid-template-columns: minmax(260px, .55fr) minmax(0, 1.7fr);
    gap: 18px;
    align-items: start;
}

.prompt-settings-sidebar,
.prompt-editor-main,
.prompt-editor-section {
    display: grid;
    gap: 12px;
}

.runtime-status-grid {
    display: grid;
    gap: 9px;
}

.runtime-status-grid div,
.prompt-help-box,
.prompt-editor-section {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px;
    background: var(--surface-2);
}

.runtime-status-grid span,
.prompt-settings-sidebar small,
.prompt-help-box small,
.prompt-editor-section small {
    color: var(--muted);
    font-size: 12px;
}

.runtime-status-grid strong,
.prompt-help-box code {
    display: block;
    margin-top: 3px;
    overflow-wrap: anywhere;
}

.runtime-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.runtime-flow div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 3px 8px;
    align-items: start;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 12px;
    background: var(--surface-2);
}

.runtime-flow strong,
.runtime-flow small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.runtime-flow small {
    grid-column: 2;
    color: var(--muted);
    font-size: 12px;
}

.prompt-editor-section {
    background: var(--surface);
}

.prompt-editor-section-head,
.template-preview-head {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.prompt-editor-section h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 650;
}

.template-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
    gap: 12px;
    align-items: stretch;
}

.prompt-settings-sidebar label,
.prompt-editor-section label {
    display: grid;
    gap: 6px;
}

.editor-textarea,
.prompt-textarea {
    width: 100%;
    resize: vertical;
    line-height: 1.5;
    tab-size: 2;
    font-family: "Lexend", ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;
}

.editor-textarea {
    min-height: 220px;
}

.classifier-textarea {
    min-height: 260px;
}

.prompt-textarea {
    min-height: 110px;
}

.prompt-textarea.tall {
    min-height: 430px;
}

.tool-settings-stack {
    display: grid;
    gap: 16px;
}

.tool-settings-section {
    display: grid;
    gap: 12px;
    padding: 16px 0;
    border-top: 1px solid var(--line);
}

.tool-settings-section:first-child {
    border-top: 0;
    padding-top: 0;
}

.module-inline-head {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.module-inline-head div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.module-inline-head small {
    color: var(--muted);
}

.template-preview {
    display: grid;
    gap: 8px;
    min-width: 0;
    align-content: start;
    border-left: 3px solid var(--brand);
    padding-left: 14px;
}

.template-preview pre {
    margin: 0;
    max-height: 360px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px;
    background: var(--surface-2);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
}

.danger-zone {
    border-color: var(--red-line);
    background: var(--red-soft);
}

.polling-status {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    border-color: var(--brand-soft-2);
    background: var(--brand-soft);
    color: var(--brand-darker);
    font-size: 13px;
}

.spinner-dot {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
    background: var(--brand);
    animation: pulse-dot 1s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%,
    100% {
        opacity: .35;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

.provider-details summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.command-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.provider-result,
.qr-panel {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px;
    background: var(--surface-2);
}

.provider-result code,
.qr-panel code {
    display: block;
    overflow-wrap: anywhere;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 10px;
    background: var(--surface);
    color: var(--text);
}

.qr-panel {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
}

.connection-qr-panel {
    background: var(--surface);
}

.qr-panel img {
    width: 220px;
    max-width: 100%;
    aspect-ratio: 1;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: #fff;
    object-fit: contain;
    box-shadow: var(--shadow-sm);
}

.json-block {
    max-height: 460px;
    overflow: auto;
    border: 1px solid var(--brand-deep-2);
    border-radius: var(--r-md);
    padding: 14px;
    background: var(--brand-deep);
    color: #e8ecff;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
}

/* --------------------------------------------------------------- Catalog */

.catalog-product-grid {
    display: grid;
    gap: 0.75rem;
}

.catalog-product-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) minmax(120px, auto);
    gap: 0.9rem;
    align-items: center;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    transition: border-color .14s ease, box-shadow .14s ease;
}

.catalog-product-row:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-sm);
}

.catalog-product-row img {
    width: 72px;
    height: 72px;
    border-radius: var(--r-sm);
    object-fit: cover;
    background: var(--surface-2);
}

.catalog-product-row strong,
.catalog-product-row small,
.catalog-product-row p {
    display: block;
}

.catalog-product-row p {
    margin: 0.2rem 0 0;
    color: var(--muted);
    font-size: 0.83rem;
    line-height: 1.35;
    max-height: 2.8em;
    overflow: hidden;
}

.catalog-product-side {
    display: grid;
    justify-items: end;
    gap: 0.35rem;
    text-align: right;
}

/* --------------------------------------------------------------- iFood */

.ifood-workbench-heading h1 {
    letter-spacing: 0;
}

.ifood-metrics {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.ifood-metrics .metric-tile {
    min-width: 0;
}

.ifood-metrics .metric-tile strong {
    min-width: 0;
    font-size: 18px;
    line-height: 1.15;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.ifood-tabbar {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: flex;
    gap: 8px;
    margin: 14px 0 16px;
    overflow-x: auto;
    padding-bottom: 4px;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

button.ifood-tab {
    min-width: 140px;
    min-height: 56px;
    display: grid;
    grid-template-rows: auto auto;
    align-content: center;
    justify-content: start;
    gap: 3px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 9px 12px;
    background: var(--surface);
    color: var(--text);
    text-align: left;
    letter-spacing: 0;
    box-shadow: var(--shadow-xs);
}

button.ifood-tab:hover {
    border-color: var(--line-strong);
    background: var(--surface-2);
    box-shadow: var(--shadow-sm);
    filter: none;
}

button.ifood-tab.active {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand-darker);
    box-shadow: inset 3px 0 0 var(--brand), var(--shadow-xs);
}

.ifood-tab span {
    font-weight: 650;
    line-height: 1.1;
    white-space: nowrap;
}

.ifood-tab small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
}

.ifood-tab.active small {
    color: var(--brand-darker);
}

.ifood-workbench-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .82fr);
    gap: 16px;
    align-items: start;
}

.ifood-credential-panel {
    grid-column: 1 / -1;
}

.ifood-credential-actions {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 1rem;
}

.ifood-credential-actions .muted-text {
    margin: 0;
    max-width: 46rem;
}

.ifood-checklist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
}

.ifood-check-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

.ifood-check-item span:nth-child(2) {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.ifood-check-item strong,
.ifood-check-item small {
    overflow-wrap: anywhere;
}

.ifood-homologation-grid {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.ifood-homologation-row {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(210px, .7fr) 120px 110px;
    gap: 14px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    background: var(--surface);
}

.ifood-homologation-row.heading {
    border: 0;
    padding: 0 12px;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.ifood-homologation-capability {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.ifood-homologation-capability small {
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ifood-homologation-row code {
    overflow-wrap: anywhere;
    color: var(--brand-darker);
}

.ifood-endpoint-list {
    display: grid;
    gap: 9px;
    margin-top: 14px;
}

.ifood-endpoint-row {
    display: grid;
    grid-template-columns: 72px minmax(260px, .75fr) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 12px;
    background: var(--surface-2);
}

.ifood-endpoint-row code {
    overflow-wrap: anywhere;
    color: var(--brand-darker);
}

.ifood-inline-panel {
    display: grid;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px;
    background: var(--surface-2);
}

.ifood-inline-panel h3 {
    margin: 0;
    font-size: 16px;
}

.ifood-mini-list {
    display: grid;
    gap: 8px;
}

.ifood-mini-list article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    background: var(--surface);
}

.ifood-mini-list article > span:first-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.ifood-mini-list strong,
.ifood-mini-list small {
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- Error UI */

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    padding: 14px 24px;
    background: var(--brand-deep);
    color: #fff;
    box-shadow: 0 -8px 24px rgba(16, 20, 48, .3);
}

#blazor-error-ui .reload {
    color: var(--brand-3);
    font-weight: 600;
    text-decoration: underline;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
    opacity: .7;
}

/* --------------------------------------------------------------- Responsive */

@media (max-width: 1040px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
        height: auto;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
        padding: 14px 16px;
    }

    .sidebar::after {
        display: none;
    }

    .brand-block {
        padding: 0;
        border-bottom: 0;
        flex: 1 1 auto;
    }

    .nav-section-label,
    .sidebar-meta {
        display: none;
    }

    .nav-stack {
        flex: 1 1 100%;
        grid-auto-flow: column;
        justify-content: start;
        gap: 6px;
        overflow-x: auto;
    }

    .nav-link.active::before {
        display: none;
    }

    .split-grid,
    .tenant-detail-grid,
    .tenant-user-workbench,
    .module-card,
    .prompt-editor-layout,
    .template-editor-grid,
    .runtime-flow,
    .audit-toolbar,
    .communications-workbench,
    .metric-grid,
    .permission-grid,
    .form-grid,
    .form-grid.compact,
    .two-field-grid,
    .table-row,
    .composer,
    .conversation-row,
    .group-row,
    .webhook-item,
    .audit-table .audit-row,
    .qr-panel {
        grid-template-columns: 1fr;
    }

    .catalog-product-row {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .catalog-product-row img {
        width: 56px;
        height: 56px;
    }

    .catalog-product-side {
        grid-column: 1 / -1;
        justify-items: start;
        text-align: left;
    }

    .ifood-workbench-grid,
    .ifood-check-item,
    .ifood-endpoint-row,
    .ifood-homologation-row,
    .ifood-mini-list article {
        grid-template-columns: 1fr;
    }

    .ifood-credential-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .ifood-homologation-row.heading {
        display: none;
    }

    .audit-policy,
    .pagination-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .tenant-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .tenant-actions {
        justify-content: stretch;
    }

    .tenant-action {
        flex: 1 1 150px;
    }

    .module-search {
        grid-template-columns: 1fr;
    }

    .module-search small {
        padding-bottom: 0;
    }

    .tenant-user-row {
        grid-template-columns: 1fr;
    }

    .user-row-meta {
        justify-content: flex-start;
    }

    .module-actions {
        justify-content: flex-start;
        justify-items: start;
    }

    .conversation-list-panel,
    .conversation-thread-panel,
    .operations-panel {
        min-height: auto;
    }

    .message-list {
        height: 420px;
    }

    .message-bubble {
        width: 100%;
    }
}

/* Omni workspace navigation, team and WhatsApp-style operator inbox. */
.omni-workspace-nav {
    position: sticky;
    z-index: 12;
    top: calc(66px + env(safe-area-inset-top));
    margin: -4px -16px 4px;
    padding: 0 12px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--omni-border);
    border-bottom: 1px solid var(--omni-border);
    background: #fff;
    box-shadow: none;
}
.omni-workspace-nav button {
    min-width: 0;
    min-height: 48px !important;
    padding: 0 8px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--omni-muted) !important;
    box-shadow: none !important;
    font-size: 11px;
    font-weight: 700;
}
.omni-workspace-nav button.active { border-bottom-color: var(--omni-indigo) !important; background: transparent !important; color: var(--omni-navy) !important; }
.omni-workspace-nav:has(button:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.omni-meta-account-alert { margin: 12px 0 16px; padding: 14px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; gap: 10px; border: 1px solid #e4b8a5; border-radius: 14px; background: #fff8f3; color: #73351f; }
.omni-meta-account-alert > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #f5d9cb; font-size: 12px; font-weight: 850; }
.omni-meta-account-alert strong { display: block; color: #5f2b1b; font-size: 12px; line-height: 1.35; }
.omni-meta-account-alert p { margin: 4px 0 0; font-size: 10px; line-height: 1.55; }
.omni-meta-account-alert small { display: block; margin-top: 5px; color: #8b5039; font-size: 9px; line-height: 1.45; }
.omni-meta-account-alert button { min-height: 36px !important; padding: 0 11px !important; border: 1px solid #d59c83 !important; border-radius: 9px !important; background: #fff !important; color: #73351f !important; box-shadow: none !important; font-size: 9px; font-weight: 750; }

@media (max-width: 620px) {
    .omni-meta-account-alert { grid-template-columns: 28px minmax(0, 1fr); }
    .omni-meta-account-alert button { grid-column: 2; justify-self: start; }
}

@media (max-width: 380px) {
    .omni-workspace-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.omni-team-google { padding: 4px 6px; border-radius: 5px; background: #eef8f3; color: var(--omni-green); font-size: 9px; font-weight: 750; }
.omni-invite-form { display: grid; gap: 10px; }
.omni-invite-form label { display: grid; gap: 5px; color: var(--omni-muted); font-size: 10px; font-weight: 650; }
.omni-invite-form input,
.omni-invite-form select { min-height: 46px; border: 1px solid var(--omni-border); border-radius: 12px; background: #fff; color: var(--omni-ink); font-size: 13px; }
.omni-invite-form .omni-primary { margin-top: 2px; }
.omni-team-success { margin: 10px 0 0; color: var(--omni-green); font-size: 10px; font-weight: 650; }
.omni-team-list { display: grid; gap: 0; }
.omni-team-member { padding: 14px 2px; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; border-bottom: 1px solid var(--omni-border); background: transparent; box-shadow: none; }
.omni-team-member.disabled { opacity: .62; }
.omni-team-avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #e9e9ff; color: var(--omni-indigo); font-size: 11px; font-weight: 800; }
.omni-team-identity { min-width: 0; display: grid; gap: 2px; }
.omni-team-identity strong { overflow: hidden; color: var(--omni-navy); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.omni-team-identity span { overflow: hidden; color: var(--omni-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.omni-team-identity small { color: #8992a4; font-size: 8px; }
.omni-team-controls { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.omni-team-controls select { min-height: 39px; border: 1px solid var(--omni-border); border-radius: 10px; background: #fafbfc; color: var(--omni-ink); font-size: 10px; }
.omni-team-controls button { min-height: 39px !important; padding: 0 12px !important; border: 1px solid var(--omni-border) !important; border-radius: 10px !important; background: #fff !important; color: var(--omni-muted) !important; box-shadow: none !important; font-size: 9px; }

.omni-instance-panel { display: grid; gap: 13px; }
.omni-instance-list { display: grid; gap: 12px; }
.omni-instance-card { padding: 14px 2px; display: grid; gap: 13px; border-top: 1px solid var(--omni-border); border-bottom: 1px solid var(--omni-border); background: transparent; box-shadow: none; }
.omni-instance-card.connected { border-color: #cbe8d7; }
.omni-instance-card.disconnected,
.omni-instance-card.missing { border-color: #f0d2d2; }
.omni-instance-card-head { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.omni-instance-symbol { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: #edf2f6; color: var(--omni-navy); font-size: 10px; font-weight: 850; }
.omni-instance-symbol .omni-status-dot { position: absolute; top: -2px; right: -2px; border: 2px solid #fff; }
.omni-instance-profile-image { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }
.omni-instance-name { min-width: 0; display: grid; gap: 2px; }
.omni-instance-name strong { overflow: hidden; color: var(--omni-navy); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.omni-instance-name span { color: var(--omni-muted); font-size: 10px; }
.omni-instance-state { padding: 5px 8px; border-radius: 999px; background: #eef1f5; color: var(--omni-muted); font-size: 8px; font-weight: 750; white-space: nowrap; }
.omni-instance-card.connected .omni-instance-state { background: #eaf7ef; color: var(--omni-green); }
.omni-instance-card.disconnected .omni-instance-state,
.omni-instance-card.missing .omni-instance-state { background: #fff0f0; color: var(--omni-red); }
.omni-instance-card.connecting .omni-instance-state { background: #f1efff; color: var(--omni-indigo); }
.omni-instance-times { padding: 9px 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border-radius: 12px; background: #f7f8fa; color: var(--omni-ink); font-size: 9px; }
.omni-instance-times span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omni-instance-times small { margin-bottom: 2px; display: block; color: var(--omni-muted); font-size: 7px; text-transform: uppercase; letter-spacing: .08em; }
.omni-instance-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.omni-instance-actions button { min-height: 39px !important; padding: 0 12px !important; flex: 1 1 82px; border: 1px solid var(--omni-border) !important; border-radius: 11px !important; background: #fff !important; color: var(--omni-muted) !important; box-shadow: none !important; font-size: 9px; }
.omni-instance-actions button.primary { border-color: transparent !important; background: var(--omni-indigo) !important; color: #fff !important; }
.omni-instance-actions button.danger { color: var(--omni-red) !important; }
.omni-instance-pairing { padding: 14px; display: grid; gap: 12px; border: 1px solid #dfe1ff; border-radius: 15px; background: #f7f7ff; text-align: center; }
.omni-instance-pairing strong { color: var(--omni-navy); font-size: 13px; }
.omni-instance-pairing p { margin: 0; color: var(--omni-muted); font-size: 9px; line-height: 1.45; }
.omni-instance-pairing > small { color: var(--omni-muted); font-size: 8px; }
.omni-pairing-mobile-instructions { display: none; gap: 8px; justify-items: center; }
.omni-pairing-qr { padding: 12px; display: grid; gap: 8px; justify-items: center; border-radius: 12px; background: #fff; }
.omni-pairing-qr img { width: min(260px, 100%); aspect-ratio: 1; object-fit: contain; border-radius: 10px; background: #fff; }
.omni-pairing-computer-link { padding: 12px; display: grid; gap: 8px; border-radius: 12px; background: #fff; }
.omni-pairing-computer-link > small { color: var(--omni-muted); font-size: 8px; }
.omni-pairing-code { display: grid; gap: 3px; }
.omni-pairing-code span { color: var(--omni-muted); font-size: 8px; }
.omni-pairing-code code { padding: 10px 14px; border-radius: 10px; background: var(--omni-navy); color: #fff; font-size: 20px; font-weight: 800; letter-spacing: .12em; user-select: all; }
.omni-pairing-code-waiting { min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--omni-muted); font-size: 9px; }
.omni-pairing-link-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.omni-pairing-link-actions a,
.omni-pairing-link-actions button,
.omni-pairing-create-link { min-height: 39px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--omni-border); border-radius: 11px; background: #fff; color: var(--omni-muted); font: inherit; font-size: 9px; font-weight: 700; text-decoration: none; cursor: pointer; }
.omni-pairing-link-actions .primary { border-color: transparent; background: var(--omni-indigo); color: #fff; }
.omni-pairing-create-link { margin-inline: auto; }
.omni-instance-pairing .mobile-only { display: none; }

@media (hover: none) and (pointer: coarse) {
    .omni-pairing-mobile-instructions { display: grid; }
    .omni-instance-pairing .desktop-only { display: none; }
    .omni-instance-pairing .mobile-only { display: inline-flex; }
}

.omni-inbox-shell {
    height: calc(100dvh - 195px - env(safe-area-inset-top));
    min-height: 520px;
    margin: 0 -16px calc(-36px - env(safe-area-inset-bottom));
    overflow: hidden;
    border-top: 1px solid var(--omni-border);
    background: #fff;
}
.omni-inbox-shell.show-list .omni-chat-pane { display: none; }
.omni-inbox-shell.show-chat .omni-inbox-list { display: none; }
.omni-inbox-shell.show-chat {
    position: fixed;
    z-index: 90;
    top: 0;
    bottom: 0;
    left: 50%;
    width: min(100%, 430px);
    height: 100dvh;
    min-height: 0;
    margin: 0;
    transform: translateX(-50%);
    border: 0;
}
.omni-inbox-list,
.omni-chat-pane { height: 100%; min-height: 0; }
.omni-inbox-list { display: flex; flex-direction: column; background: #fff; }
.omni-inbox-list-head { padding: 14px 16px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.omni-inbox-list-head h2 { margin: 2px 0 0; color: var(--omni-navy); font-size: 21px; letter-spacing: -.04em; }
.omni-inbox-list-actions { display: flex; align-items: center; gap: 8px; }
.omni-realtime-status { display: inline-flex; align-items: center; gap: 6px; color: #70778a; font-size: 11px; font-weight: 800; }
.omni-realtime-status i { width: 8px; height: 8px; border-radius: 50%; background: #9ca5b6; }
.omni-realtime-status.connected { color: #16865c; }
.omni-realtime-status.connected i { background: #20a66e; box-shadow: 0 0 0 4px rgba(32, 166, 110, .12); }
.omni-realtime-status.reconnecting i,
.omni-realtime-status.syncing i { animation: omni-live-pulse 1.2s ease-in-out infinite; }
@keyframes omni-live-pulse { 50% { opacity: .35; transform: scale(.78); } }
.omni-icon-button { width: 40px; min-height: 40px !important; padding: 0 !important; border: 1px solid var(--omni-border) !important; border-radius: 13px !important; background: #fff !important; color: var(--omni-indigo) !important; box-shadow: none !important; font-size: 18px; }
.omni-inbox-inline-error { margin: 0 16px 8px; color: var(--omni-red); font-size: 9px; line-height: 1.4; }
.omni-meta-delivery-alert { margin: 0 16px 10px; padding: 10px 12px; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 9px; border: 1px solid #e4b8a5; border-radius: 10px; background: #fff8f3; color: #73351f; }
.omni-meta-delivery-alert > span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #f5d9cb; font-size: 11px; font-weight: 850; }
.omni-meta-delivery-alert strong { display: block; font-size: 10px; }
.omni-meta-delivery-alert p { margin: 3px 0 0; font-size: 9px; line-height: 1.45; }
.omni-meta-delivery-alert a { display: inline-block; margin-top: 5px; color: #74351e; font-size: 9px; font-weight: 750; text-decoration: underline; text-underline-offset: 2px; }
.omni-meta-delivery-alert.campaign { margin: 12px 0; }
.omni-inbox-search { margin: 0 16px 9px; min-height: 44px; padding: 0 11px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; border: 1px solid var(--omni-border); border-radius: 13px; background: #f7f8fa; }
.omni-inbox-search > span { color: var(--omni-muted); font-size: 19px; }
.omni-inbox-search input { min-width: 0; min-height: 40px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--omni-ink); font-size: 12px; }
.omni-inbox-search button { min-height: 30px !important; padding: 0 5px !important; border: 0 !important; background: transparent !important; color: var(--omni-muted) !important; box-shadow: none !important; }
.omni-inbox-filters { margin: 0 16px 8px; padding: 3px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border-radius: 11px; background: #eef1f5; }
.omni-inbox-filters button { min-height: 34px !important; padding: 0 !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: var(--omni-muted) !important; box-shadow: none !important; font-size: 9px; }
.omni-inbox-filters button.active { background: #fff !important; color: var(--omni-navy) !important; box-shadow: 0 2px 7px rgba(23, 50, 77, .08) !important; }
.omni-conversation-list { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.omni-conversation-list .omni-loading { min-height: 230px; }
.omni-conversation-row { width: 100%; min-height: 76px !important; padding: 10px 16px !important; display: grid !important; grid-template-columns: 50px minmax(0, 1fr); gap: 10px; border: 0 !important; border-bottom: 1px solid #edf0f4 !important; border-radius: 0 !important; background: #fff !important; color: var(--omni-ink) !important; box-shadow: none !important; text-align: left; }
.omni-conversation-row.selected { background: #f3f4ff !important; }
.omni-chat-avatar { width: 50px; height: 50px; overflow: hidden; display: grid; place-items: center; border-radius: 50%; background: #e9e9ff; color: var(--omni-indigo); font-size: 11px; font-weight: 800; }
.omni-chat-avatar.small { width: 42px; height: 42px; }
.omni-chat-avatar img,
.omni-chat-avatar a { width: 100%; height: 100%; display: block; object-fit: cover; }
.omni-conversation-copy { min-width: 0; align-self: center; }
.omni-conversation-copy > div { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.omni-conversation-copy strong { overflow: hidden; color: var(--omni-navy); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.omni-conversation-copy time { flex: 0 0 auto; color: #8a93a3; font-size: 8px; font-weight: 550; }
.omni-conversation-copy > div:nth-child(2) { margin-top: 4px; }
.omni-conversation-preview { min-width: 0; overflow: hidden; color: var(--omni-muted); font-size: 9px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.omni-conversation-copy b { min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: #25a86b; color: #fff; font-size: 8px; }
.omni-conversation-copy small { display: block; margin-top: 3px; color: var(--omni-indigo); font-size: 7px; font-weight: 650; }
.omni-inbox-empty { min-height: 240px; padding: 30px; display: grid; place-items: center; align-content: center; gap: 5px; color: var(--omni-muted); text-align: center; }
.omni-inbox-empty strong { color: var(--omni-navy); font-size: 13px; }
.omni-inbox-empty span { font-size: 9px; }
.omni-inbox-empty.error strong { color: var(--omni-red); }

.omni-chat-pane { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; background: #efeae2; }
.omni-chat-placeholder { height: 100%; grid-row: 1 / -1; display: grid; place-items: center; align-content: center; gap: 8px; background: #f8f9fb; color: var(--omni-muted); text-align: center; }
.omni-chat-placeholder strong { color: var(--omni-navy); font-size: 15px; }
.omni-chat-placeholder p { margin: 0; font-size: 9px; }
.omni-chat-head { min-width: 0; padding: calc(9px + env(safe-area-inset-top)) 10px 9px; display: grid; grid-template-columns: 34px 42px minmax(0, 1fr) auto; align-items: center; gap: 8px; border-bottom: 1px solid #d9dde2; background: #f7f8fa; }
.omni-chat-back { width: 34px; min-height: 38px !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--omni-navy) !important; box-shadow: none !important; font-size: 20px; }
.omni-chat-title { min-width: 0; }
.omni-chat-title strong,
.omni-chat-title span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omni-chat-title strong { color: var(--omni-navy); font-size: 11px; }
.omni-chat-title span { margin-top: 2px; color: var(--omni-muted); font-size: 8px; }
.omni-chat-status-action { min-height: 34px !important; padding: 0 8px !important; border: 1px solid var(--omni-border) !important; border-radius: 9px !important; background: #fff !important; color: var(--omni-muted) !important; box-shadow: none !important; font-size: 8px; }
.omni-chat-messages { min-height: 0; padding: 12px 10px 16px; overflow-y: auto; overscroll-behavior: contain; background-color: #efeae2; background-image: url('/omni/whatsapp-chat-light.jpg'); background-repeat: repeat; background-size: 360px auto; }
.omni-chat-messages .omni-loading { min-height: 260px; }
.omni-chat-date { width: max-content; margin: 8px auto 12px; padding: 5px 9px; border-radius: 8px; background: rgba(255, 255, 255, .88); color: #67737d; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); font-size: 8px; font-weight: 650; }
.omni-message-row { margin: 4px 0; display: flex; flex-direction: column; align-items: flex-start; transition: filter .2s ease; }
.omni-message-row.outbound { align-items: flex-end; }
.omni-message-row.highlight { filter: brightness(.88); }
.omni-message-bubble { max-width: 86%; min-width: 92px; padding: 7px 8px 5px; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.omni-message-row.inbound .omni-message-bubble { border-top-left-radius: 2px; }
.omni-message-row.outbound .omni-message-bubble { border-top-right-radius: 2px; background: #d9fdd3; }
.omni-forwarded { display: block; margin-bottom: 4px; color: #7b878e; font-size: 7px; font-style: italic; }
.omni-quoted-message { width: 100%; min-height: 0 !important; margin-bottom: 5px; padding: 6px 7px !important; display: grid !important; gap: 2px; overflow: hidden; border: 0 !important; border-left: 3px solid #5b5ce2 !important; border-radius: 5px !important; background: rgba(0, 0, 0, .055) !important; color: var(--omni-ink) !important; box-shadow: none !important; text-align: left; }
.omni-quoted-message strong { color: var(--omni-indigo); font-size: 7px; }
.omni-quoted-message span { overflow: hidden; color: #657077; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.omni-message-image { display: block; margin: -3px -4px 5px; overflow: hidden; border-radius: 6px; }
.omni-message-image img { width: 100%; max-height: 310px; display: block; object-fit: cover; }
.omni-message-media-unavailable { min-width: 180px; min-height: 96px; margin: -3px -4px 5px; display: grid; place-items: center; align-content: center; gap: 5px; border-radius: 6px; background: rgba(255, 255, 255, .58); color: #667781; }
.omni-message-media-unavailable span { font-size: 23px; }
.omni-message-media-unavailable small { font-size: 8px; font-weight: 700; }
.omni-message-bubble video { width: 100%; max-height: 300px; margin-bottom: 5px; border-radius: 6px; background: #111; }
.omni-message-bubble audio { width: 250px; max-width: 100%; height: 40px; }
.omni-message-document { min-height: 54px; margin-bottom: 5px; padding: 7px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 7px; border-radius: 7px; background: rgba(0, 0, 0, .055); color: var(--omni-ink); text-decoration: none; }
.omni-message-document > span { width: 32px; height: 36px; display: grid; place-items: center; border-radius: 6px; background: #fff; color: var(--omni-indigo); font-size: 18px; }
.omni-message-document strong,
.omni-message-document small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omni-message-document strong { font-size: 8px; }
.omni-message-document small { color: var(--omni-muted); font-size: 6px; }
.omni-message-document b { color: var(--omni-indigo); font-size: 7px; }
.omni-message-text { color: #182126; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.omni-message-text a { color: #027eb5; }
.omni-message-transcription { margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(0, 0, 0, .08); color: #536067; font-size: 8px; font-style: italic; }
.omni-message-transcription strong { display: block; margin-bottom: 2px; color: #344148; font-size: 6px; font-style: normal; text-transform: uppercase; }
.omni-message-meta { min-height: 14px; margin: 2px -1px -2px 4px; display: flex; align-items: center; justify-content: flex-end; gap: 4px; color: #718087; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 7px; }
.omni-message-meta button { min-height: 20px !important; margin-right: auto; padding: 0 3px !important; border: 0 !important; background: transparent !important; color: #72818a !important; box-shadow: none !important; font-size: 6px; opacity: .5; }
.omni-message-meta span { letter-spacing: -2px; }
.omni-message-meta span.read { color: #039be5; }
.omni-message-meta span.failed { color: var(--omni-red); font-weight: 900; letter-spacing: 0; }
.omni-message-reactions { margin: -3px 8px 0; display: flex; gap: 3px; }
.omni-message-reactions span { padding: 2px 5px; border: 1px solid #e0e3e7; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); font-size: 9px; }
.omni-chat-composer { padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid #d9dde2; background: #f0f2f5; }
.omni-chat-composer > div:last-child { display: grid; grid-template-columns: minmax(0, 1fr) 42px; align-items: end; gap: 6px; }
.omni-chat-composer textarea { max-height: 120px; min-height: 42px; padding: 11px 13px; resize: none; border: 1px solid #e0e3e7; border-radius: 21px; outline: 0; background: #fff; color: var(--omni-ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 12px; }
.omni-send-button { width: 42px; min-height: 42px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: #00a884 !important; color: #fff !important; box-shadow: none !important; font-size: 16px; }
.omni-reply-composer { margin: -1px 3px 6px; padding: 6px 7px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; border-left: 3px solid var(--omni-indigo); border-radius: 5px; background: #fff; }
.omni-reply-composer strong,
.omni-reply-composer span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omni-reply-composer strong { color: var(--omni-indigo); font-size: 7px; }
.omni-reply-composer span { margin-top: 2px; color: var(--omni-muted); font-size: 7px; }
.omni-reply-composer button { min-height: 26px !important; padding: 0 5px !important; border: 0 !important; background: transparent !important; color: var(--omni-muted) !important; box-shadow: none !important; }

/* Omni mobile baseline. Wider workspaces receive a dedicated desktop composition below. */
.omni-viewport,
.omni-login-page {
    --omni-navy: #17324d;
    --omni-indigo: #5b5ce2;
    --omni-green: #16794f;
    --omni-amber: #b7791f;
    --omni-red: #c93c4a;
    --omni-canvas: #fff;
    --omni-ink: #172033;
    --omni-muted: #657085;
    --omni-border: #dde2ea;
    min-height: 100dvh;
    background: #edf1f4;
    color: var(--omni-ink);
    font-family: "Lexend", -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}

.omni-device {
    width: min(100%, 430px);
    min-height: 100dvh;
    margin: 0 auto;
    background: var(--omni-canvas);
    border-inline: 1px solid #e1e5ea;
    box-shadow: none;
}

.omni-header {
    position: sticky;
    z-index: 20;
    top: 0;
    height: calc(66px + env(safe-area-inset-top));
    padding: calc(12px + env(safe-area-inset-top)) 18px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-bottom: 1px solid rgba(221, 226, 234, .8);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.omni-brand,
.omni-login-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--omni-navy);
}

.omni-brand > span:last-child { display: grid; line-height: 1; }
.omni-brand strong,
.omni-login-brand strong { font-size: 24px; letter-spacing: -.06em; font-weight: 750; }
.omni-brand small,
.omni-login-brand small { margin-top: 4px; color: var(--omni-muted); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }

.omni-mark {
    width: 32px;
    height: 32px;
    position: relative;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: var(--omni-navy);
    overflow: hidden;
}

.omni-mark i { position: absolute; border: 2px solid #fff; border-radius: 50%; opacity: .95; }
.omni-mark i:nth-child(1) { width: 7px; height: 7px; background: #fff; }
.omni-mark i:nth-child(2) { width: 18px; height: 18px; border-left-color: transparent; border-bottom-color: transparent; transform: rotate(45deg); }
.omni-mark i:nth-child(3) { width: 27px; height: 27px; border-left-color: transparent; border-bottom-color: transparent; transform: rotate(45deg); opacity: .55; }

.omni-text-button {
    min-height: 0 !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--omni-muted) !important;
}

.omni-account { position: relative; z-index: 2; }
.omni-account-trigger { position: relative; z-index: 2; width: 40px; min-height: 40px !important; padding: 0 !important; display: grid; place-items: center; border: 1px solid var(--omni-border) !important; border-radius: 50% !important; background: #fff !important; color: var(--omni-navy) !important; box-shadow: none !important; font-size: 12px; font-weight: 780; letter-spacing: .01em; }
.omni-account-trigger:hover,
.omni-account-trigger:focus-visible,
.omni-account-trigger[aria-expanded="true"] { border-color: var(--omni-indigo) !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(91, 92, 226, .1) !important; }
.omni-account-backdrop { position: fixed; z-index: 1; inset: 0; background: transparent; }
.omni-account-menu { position: absolute; z-index: 3; top: calc(100% + 9px); right: 0; width: 156px; padding: 6px; border: 1px solid var(--omni-border); border-radius: 13px; background: #fff; box-shadow: 0 13px 32px rgba(23, 50, 77, .18); }
.omni-account-menu-link { min-height: 44px; padding: 0 12px; display: flex; align-items: center; border-radius: 9px; color: var(--omni-navy); font-size: 11px; font-weight: 720; text-decoration: none; }
.omni-account-menu-link:hover,
.omni-account-menu-link:focus-visible { background: #f2f3ff; color: var(--omni-indigo); }
.omni-account-menu form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--omni-border); }
.omni-account-signout { width: 100%; min-height: 44px !important; padding: 0 12px !important; border: 0 !important; border-radius: 9px !important; background: #fff !important; color: var(--omni-red) !important; box-shadow: none !important; font-size: 11px; font-weight: 720; text-align: left; }
.omni-account-signout:hover,
.omni-account-signout:focus-visible { background: #fdeff1 !important; }
.omni-account-welcome > a { width: 40px; min-height: 40px; display: grid; place-items: center; border: 1px solid var(--omni-border); border-radius: 8px; background: #fff; color: var(--omni-navy); font-size: 17px; font-weight: 750; text-decoration: none; }
.omni-account-profile-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 13px; }
.omni-account-avatar { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: #e8e8ff; color: var(--omni-indigo); font-size: 14px; font-weight: 800; letter-spacing: .02em; }
.omni-account-profile-card > div { min-width: 0; display: grid; gap: 3px; }
.omni-account-profile-card strong { overflow: hidden; color: var(--omni-navy); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.omni-account-profile-card span:not(.omni-account-avatar) { overflow: hidden; color: var(--omni-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.omni-account-profile-card small { color: #8992a4; font-size: 9px; }
.omni-account-preferences-card { padding-bottom: 15px; }
.omni-account-section-head { margin-bottom: 14px; }
.omni-account-section-head h2 { margin: 3px 0 0; color: var(--omni-navy); font-size: 20px; letter-spacing: -.035em; }
.omni-language-preference { padding: 13px 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(118px, auto); align-items: center; gap: 12px; border-top: 1px solid var(--omni-border); }
.omni-language-preference > div { min-width: 0; }
.omni-language-preference strong,
.omni-language-preference small { display: block; }
.omni-language-preference strong { color: var(--omni-navy); font-size: 12px; }
.omni-language-preference small { margin-top: 3px; color: var(--omni-muted); font-size: 9px; line-height: 1.45; }
.omni-language-preference form { margin: 0; }
.omni-language-preference select { min-height: 44px; padding: 0 34px 0 12px; border: 1px solid var(--omni-border); border-radius: 12px; background-color: #f8f9fc; color: var(--omni-navy); font-size: 10px; font-weight: 720; }
.omni-notification-preference { padding: 13px 0; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; border-top: 1px solid var(--omni-border); border-bottom: 1px solid var(--omni-border); }
.omni-notification-symbol { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #efefff; color: var(--omni-indigo); font-size: 18px; font-weight: 800; }
.omni-notification-preference > div { min-width: 0; }
.omni-notification-preference strong,
.omni-notification-preference small { display: block; }
.omni-notification-preference strong { color: var(--omni-navy); font-size: 12px; }
.omni-notification-preference small { margin-top: 3px; color: var(--omni-muted); font-size: 9px; line-height: 1.45; }
.omni-notification-switch { width: 52px; min-width: 52px; min-height: 44px !important; padding: 0 !important; display: grid !important; place-items: center; border: 0 !important; border-radius: 12px !important; background: transparent !important; box-shadow: none !important; }
.omni-notification-switch > span { position: relative; width: 48px; height: 28px; border-radius: 999px; background: #cfd5df; transition: background-color .18s ease; }
.omni-notification-switch > span > i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(23, 50, 77, .22); transition: transform .18s ease; }
.omni-notification-switch.enabled > span { background: var(--omni-green); }
.omni-notification-switch.enabled > span > i { transform: translateX(20px); }
.omni-notification-switch:disabled { opacity: .55; }
.omni-notification-state { margin: 11px 0 0; color: var(--omni-muted); font-size: 9px; line-height: 1.5; }
.omni-notification-state.enabled { color: var(--omni-green); }
.omni-notification-state.attention { color: var(--omni-amber); }
.omni-account-feedback { margin: 8px 0 0; padding: 9px 10px; border-radius: 10px; font-size: 9px; line-height: 1.45; }
.omni-account-feedback.success { background: #eef8f2; color: var(--omni-green); }
.omni-account-feedback.error { background: #fff0f1; color: var(--omni-red); }
.omni-account-legal-card { display: grid; gap: 0; }
.omni-account-legal-card > a { min-height: 58px; padding: 12px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; border-top: 1px solid var(--omni-border); color: var(--omni-navy); text-decoration: none; }
.omni-account-legal-card > a span,
.omni-account-legal-card > a small { min-width: 0; display: block; }
.omni-account-legal-card > a span { font-size: 12px; font-weight: 760; }
.omni-account-legal-card > a small { margin-top: 3px; color: var(--omni-muted); font-size: 9px; line-height: 1.4; }
.omni-account-legal-card > a strong { grid-column: 2; grid-row: 1 / span 2; color: var(--omni-indigo); font-size: 16px; }
.omni-account-legal-card > a:hover span,
.omni-account-legal-card > a:focus-visible span { color: var(--omni-indigo); }
.omni-terms-welcome { align-items: flex-start; }
.omni-terms-welcome h1 { margin-bottom: 5px; }
.omni-terms-welcome p { margin: 0; color: var(--omni-muted); font-size: 10px; }
.omni-terms-alert { margin-bottom: 14px; padding: 15px; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 11px; border: 1px solid #efc7c9; border-radius: 16px; background: #fff7f7; }
.omni-terms-alert > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #ffe4e5; color: #ad343c; font-size: 17px; font-weight: 850; }
.omni-terms-alert strong { display: block; color: #7e252b; font-size: 13px; }
.omni-terms-alert p { margin: 5px 0 0; color: #8b4a4f; font-size: 10.5px; line-height: 1.55; }
.omni-terms-document { overflow: hidden; border: 1px solid var(--omni-border); border-radius: 18px; background: #fff; box-shadow: 0 13px 28px rgba(24, 50, 78, .07); }
.omni-terms-document > header,
.omni-terms-document > section { padding: 18px; border-bottom: 1px solid var(--omni-border); }
.omni-terms-document > section:last-child { border-bottom: 0; }
.omni-terms-document > header { background: #f7f8fb; }
.omni-terms-document h2 { margin: 0 0 8px; color: var(--omni-navy); font-size: 15px; line-height: 1.3; letter-spacing: -.02em; }
.omni-terms-document p { margin: 0; color: #566376; font-size: 11px; line-height: 1.7; }
.omni-terms-document p + p { margin-top: 9px; }
.omni-terms-document ul { margin: 0; padding-left: 18px; color: #566376; font-size: 11px; line-height: 1.65; }
.omni-terms-document li + li { margin-top: 6px; }
.omni-terms-document a { color: var(--omni-indigo); font-weight: 720; }
.omni-privacy-facts { margin: 14px 0 0; display: grid; gap: 8px; }
.omni-privacy-facts > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.omni-privacy-facts dt { color: var(--omni-muted); font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.omni-privacy-facts dd { min-width: 0; margin: 0; color: var(--omni-navy); font-size: 10px; font-weight: 720; overflow-wrap: anywhere; }
.omni-terms-document .omni-terms-highlight { background: #fff8ef; }
.omni-terms-document .omni-terms-highlight h2 { color: #8a5113; }
.omni-terms-document .omni-terms-highlight p { color: #795a35; }
.omni-terms-links { margin-top: 12px; display: grid; gap: 7px; }
.omni-terms-links a { min-height: 42px; padding: 10px 12px; display: flex; align-items: center; border: 1px solid #dfe1ff; border-radius: 11px; background: #f6f6ff; font-size: 10px; text-decoration: none; }
.omni-terms-footer { padding: 17px 2px 4px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--omni-muted); font-size: 8.5px; }
.omni-terms-footer a { color: var(--omni-indigo); font-weight: 750; text-decoration: none; white-space: nowrap; }
.omni-content { padding: 18px 16px calc(32px + env(safe-area-inset-bottom)); }
.omni-loading { min-height: 55dvh; display: grid; place-items: center; align-content: center; gap: 15px; color: var(--omni-muted); }
.omni-pulse { width: 34px; height: 34px; border: 3px solid #d9dcff; border-top-color: var(--omni-indigo); border-radius: 50%; animation: omni-spin .8s linear infinite; }
@keyframes omni-spin { to { transform: rotate(360deg); } }

.omni-welcome,
.omni-section-head,
.omni-card-title,
.omni-campaign-top,
.omni-campaign-meta,
.omni-row-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.omni-welcome { margin: 2px 2px 14px; }
.omni-kicker { color: var(--omni-muted); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.omni-welcome h1 { margin: 2px 0 0; color: var(--omni-navy); font-size: 30px; line-height: 1.1; letter-spacing: -.045em; }
.omni-card {
    margin: 0;
    padding: 18px 2px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--omni-border);
    border-radius: 0;
    box-shadow: none;
}

.omni-state-card {
    margin-bottom: 14px;
    padding: 17px;
    border: 1px solid var(--omni-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
}

.omni-card-title { color: var(--omni-muted); font-size: 12px; font-weight: 650; }
.omni-connection-card strong { display: block; margin: 10px 0 1px; color: var(--omni-navy); font-size: 17px; }
.omni-connection-card p { margin: 3px 0 0; color: var(--omni-muted); font-size: 12px; }
.omni-whatsapp-title { display: inline-flex; align-items: center; gap: 8px; }
.omni-connection-warning { color: var(--omni-amber) !important; font-weight: 650; }
.omni-status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--omni-green); box-shadow: 0 0 0 4px rgba(22, 121, 79, .1); }
.omni-status-dot.off { background: var(--omni-amber); box-shadow: 0 0 0 4px rgba(183, 121, 31, .12); }
.omni-test-phone-card { padding-top: 15px; padding-bottom: 14px; }
.omni-test-phone-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.omni-test-phone-head h2 { margin: 0 0 10px; color: var(--omni-navy); font-size: 17px; letter-spacing: -.025em; }
.omni-test-phone-editor { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.omni-test-phone-editor input { min-width: 0; min-height: 46px; border: 1px solid var(--omni-border); border-radius: 12px; background: #fff; color: var(--omni-ink); font-size: 14px; }
.omni-test-phone-editor button { min-width: 72px; min-height: 46px !important; padding: 0 13px !important; border-radius: 12px !important; background: var(--omni-navy) !important; box-shadow: none !important; font-size: 11px; }
.omni-test-phone-editor button.remove { background: #fff1f3 !important; color: var(--omni-red) !important; }
.omni-test-phone-editor button:disabled { opacity: .45; }
.omni-test-phone-foot { min-height: 24px; margin-top: 5px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.omni-test-phone-foot span { min-width: 0; color: var(--omni-muted); font-size: 9px; line-height: 1.35; }
.omni-test-phone-foot span.success { color: var(--omni-green); font-weight: 700; }
.omni-test-phone-foot span.error { color: var(--omni-red); }

.omni-section-head { margin-bottom: 14px; align-items: center; }
.omni-section-head h2 { margin: 0; color: var(--omni-navy); font-size: 20px; letter-spacing: -.035em; }
.omni-provider-badge { min-height: 28px; padding: 3px 0; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; border: 0; border-radius: 0; background: transparent; color: var(--omni-navy); box-shadow: none; font-size: 10px; font-weight: 750; line-height: 1; white-space: nowrap; }
.omni-provider-badge img { display: block; object-fit: contain; }
.omni-provider-badge.meta { background: transparent; color: #0866ff; }
.omni-provider-badge.meta img { width: 24px; height: 16px; }
.omni-provider-badge.evolution { background: transparent; color: #087d58; }
.omni-provider-badge.evolution img { width: 18px; height: 18px; }
.omni-review-skip-note { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: #f0f7f6; color: #35635d; font-size: 12px; line-height: 1.45; }

.omni-draft-bar,
.omni-draft-warning { margin: -2px 0 13px; padding: 10px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 9px; align-items: center; border: 1px solid #d8e9df; border-radius: 13px; background: #f1faf5; }
.omni-draft-bar.restored { border-color: #d7d9ff; background: #f5f5ff; }
.omni-draft-bar.warning,
.omni-draft-warning { border-color: #f1d5a9; background: #fff8eb; }
.omni-draft-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: #dbf1e4; color: var(--omni-green); font-size: 14px; font-weight: 800; }
.omni-draft-bar.restored .omni-draft-icon { background: #e5e6ff; color: var(--omni-indigo); }
.omni-draft-bar.warning .omni-draft-icon { background: #ffebc7; color: var(--omni-amber); }
.omni-draft-bar strong,
.omni-draft-warning strong { display: block; color: var(--omni-navy); font-size: 11px; }
.omni-draft-bar small,
.omni-draft-warning span { display: block; margin-top: 1px; color: var(--omni-muted); font-size: 9px; line-height: 1.4; }
.omni-draft-discard,
.omni-draft-confirm button { min-height: 36px !important; padding: 0 9px !important; border: 1px solid transparent !important; border-radius: 9px !important; background: transparent !important; color: var(--omni-muted) !important; box-shadow: none !important; font-size: 9px; font-weight: 700; }
.omni-draft-discard:hover,
.omni-draft-discard:focus-visible { border-color: var(--omni-border) !important; background: #fff !important; color: var(--omni-red) !important; }
.omni-draft-confirm { display: flex; gap: 3px; }
.omni-draft-confirm button { border-color: var(--omni-border) !important; background: #fff !important; }
.omni-draft-confirm button.danger { border-color: #f1cbd0 !important; color: var(--omni-red) !important; }
.omni-draft-warning { grid-template-columns: 1fr; }

.omni-upload { min-height: 134px; padding: 18px; display: grid !important; place-items: center; align-content: center; gap: 4px !important; border: 1.5px dashed #bbc1d1; border-radius: 16px; background: #f9fafc; color: var(--omni-navy) !important; text-align: center; cursor: pointer; }
.omni-upload:hover,
.omni-upload.has-file { border-color: var(--omni-indigo); background: #f7f7ff; }
.omni-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.omni-upload-icon { width: 35px; height: 35px; display: grid; place-items: center; margin-bottom: 5px; border-radius: 11px; background: #e9e9ff; color: var(--omni-indigo); font-size: 21px; }
.omni-upload strong { font-size: 14px; }
.omni-upload small { color: var(--omni-muted); font-size: 11px; }

.omni-form-grid { display: grid; gap: 13px; margin-top: 16px; }
.omni-form-grid label,
.omni-form-field > label { color: var(--omni-muted); font-size: 11px; font-weight: 650; }
.omni-form-grid input,
.omni-form-grid select,
.omni-form-grid textarea,
.omni-connection-card select { min-height: 46px; border-radius: 12px; border-color: var(--omni-border); background: #fff; color: var(--omni-ink); font-size: 14px; }
.omni-form-grid textarea { resize: vertical; }
.omni-form-grid label > small,
.omni-form-field > small { color: #8a93a6; font-weight: 450; }
.omni-form-field { min-width: 0; }
.omni-attachment-field { padding: 12px; border: 1px solid var(--omni-border); border-radius: 14px; background: #fbfcfe; }
.omni-attachment-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.omni-attachment-heading label { color: var(--omni-muted); font-size: 11px; font-weight: 650; }
.omni-attachment-heading span { color: #8a93a6; font-size: 9px; }
.omni-attachment-actions { margin-top: 9px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 7px; align-items: center; }
.omni-attachment-actions > i { color: #9aa1af; font-size: 9px; font-style: normal; text-align: center; }
.omni-attachment-action { position: relative; min-height: 48px; padding: 7px 9px; display: flex; align-items: center; justify-content: center; gap: 7px; overflow: hidden; border: 1px solid #dfe2e9; border-radius: 11px; background: #fff; color: var(--omni-navy) !important; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, transform .15s ease; }
.omni-attachment-action:hover,
.omni-attachment-action:focus-within { border-color: #c7cbff; background: #f5f5ff; transform: translateY(-1px); }
.omni-attachment-action input,
.omni-attachment-replace input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.omni-attachment-action span { width: 27px; height: 27px; flex: 0 0 27px; display: grid; place-items: center; border-radius: 8px; background: #e9eaff; color: var(--omni-indigo); font-size: 15px; }
.omni-attachment-action.file span { background: #e7f3ee; color: var(--omni-green); }
.omni-attachment-action strong { color: inherit; font-size: 11px; }
.omni-attachment-field > small { display: block; margin-top: 7px; color: #8a93a6; font-size: 9px; line-height: 1.4; }
.omni-attachment-selected { min-width: 0; margin-top: 9px; padding: 8px; display: grid; grid-template-columns: 42px minmax(0, 1fr) 40px; gap: 9px; align-items: center; border: 1px solid #d8dcff; border-radius: 11px; background: #fff; }
.omni-attachment-selected > img,
.omni-attachment-file-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 9px; background: #eef0ff; color: var(--omni-indigo); object-fit: cover; font-size: 20px; }
.omni-attachment-selected > div { min-width: 0; }
.omni-attachment-selected strong,
.omni-attachment-selected small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omni-attachment-selected strong { color: var(--omni-navy); font-size: 11px; }
.omni-attachment-selected small { margin-top: 2px; color: var(--omni-muted); font-size: 9px; }
.omni-attachment-selected button { width: 40px; min-width: 40px; min-height: 40px !important; padding: 0 !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; color: var(--omni-muted) !important; box-shadow: none !important; font-size: 20px; }
.omni-attachment-selected button:hover,
.omni-attachment-selected button:focus-visible { background: #fdebed !important; color: var(--omni-red) !important; }
.omni-attachment-replace { margin-top: 6px; display: flex; gap: 4px; justify-content: flex-end; }
.omni-attachment-replace label { position: relative; min-height: 36px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 8px; color: var(--omni-indigo) !important; cursor: pointer; font-size: 9px !important; font-weight: 700 !important; }
.omni-attachment-replace label:hover,
.omni-attachment-replace label:focus-within { background: #efefff; }
.omni-message-composer { margin-top: 6px; overflow: hidden; border: 1px solid var(--omni-border); border-radius: 14px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.omni-message-composer:focus-within { border-color: var(--omni-indigo); box-shadow: 0 0 0 3px rgba(91, 92, 226, .14); }
.omni-message-composer textarea:not([class*="mud-"]) { width: 100%; min-height: 132px; padding: 12px 13px; border: 0; border-top: 1px solid #edf0f5; border-radius: 0; box-shadow: none; line-height: 1.55; }
.omni-message-composer textarea:not([class*="mud-"]):hover,
.omni-message-composer textarea:not([class*="mud-"]):focus { border-color: #edf0f5; box-shadow: none; }
.omni-format-toolbar { padding: 5px; display: flex; align-items: center; gap: 3px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.omni-format-toolbar::-webkit-scrollbar { display: none; }
.omni-format-toolbar button { flex: 0 0 auto; min-width: 44px; min-height: 44px !important; padding: 0 8px !important; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid transparent !important; border-radius: 9px !important; color: var(--omni-navy) !important; background: transparent !important; box-shadow: none !important; font-size: 14px; }
.omni-format-toolbar button:hover,
.omni-format-toolbar button:focus-visible { border-color: #d9dcff !important; background: #f1f1ff !important; color: var(--omni-indigo) !important; }
.omni-format-toolbar button i { color: var(--omni-muted); font-size: 9px; font-style: normal; font-weight: 650; }
.omni-format-code,
.omni-format-mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 11px; font-weight: 700; }
.omni-format-mono { font-size: 9px; }
.omni-format-quote { font-size: 14px; transform: rotate(180deg); }
.omni-format-divider { width: 1px; height: 23px; flex: 0 0 1px; margin: 0 2px; background: #e1e4eb; }
.omni-template-help { display: block; margin-top: 5px; line-height: 1.45; }
.omni-template-help code { padding: 1px 4px; border-radius: 5px; background: #eef0ff; color: var(--omni-indigo); font-family: inherit; font-size: 10px; font-weight: 750; }
.omni-template-suggestions { margin-top: 7px; max-height: 190px; padding: 8px; display: grid; gap: 5px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #cfd3ff; border-radius: 12px; background: #f8f8ff; box-shadow: 0 9px 24px rgba(23, 50, 77, .09); }
.omni-template-suggestions-title { padding: 2px 4px 4px; color: var(--omni-muted); font-size: 9px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.omni-template-suggestions p { margin: 3px 4px 5px; color: var(--omni-muted); font-size: 11px; font-weight: 450; }
.omni-template-suggestions button { min-height: 42px !important; padding: 7px 9px !important; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid transparent !important; border-radius: 9px !important; background: #fff !important; color: var(--omni-navy) !important; box-shadow: none !important; text-align: left; }
.omni-template-suggestions button:hover,
.omni-template-suggestions button:focus-visible { border-color: #cfd3ff !important; background: #f1f1ff !important; }
.omni-template-suggestions button span { min-width: 0; overflow: hidden; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.omni-template-suggestions button code { flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--omni-indigo); font-family: inherit; font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.omni-ai-assist { margin-top: 10px; padding: 11px; border: 1px solid #d9dcff; border-radius: 14px; background: #f8f8ff; }
.omni-ai-assist-head { display: flex; align-items: center; justify-content: space-between; gap: 11px; }
.omni-ai-assist-head > div { min-width: 0; }
.omni-ai-label { display: flex; align-items: center; gap: 5px; color: var(--omni-indigo); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.omni-ai-label i { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 7px; background: #e6e7ff; font-size: 11px; font-style: normal; }
.omni-ai-assist-head strong,
.omni-ai-assist-head small { display: block; }
.omni-ai-assist-head > div > strong { margin-top: 5px; color: var(--omni-navy); font-size: 12px; }
.omni-ai-assist-head > div > small { margin-top: 2px; color: var(--omni-muted); font-size: 9px; line-height: 1.4; }
.omni-ai-assist-head > button { min-width: 88px; min-height: 44px !important; padding: 0 10px !important; flex: 0 0 auto; border: 1px solid #cfd2ff !important; border-radius: 11px !important; background: #fff !important; color: var(--omni-indigo) !important; box-shadow: none !important; font-size: 10px; font-weight: 800; }
.omni-ai-assist-head > button:disabled { opacity: .48; }
.omni-ai-usage { margin-top: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #e3e5f6; border-radius: 11px; overflow: hidden; background: #fff; }
.omni-ai-usage > span { min-width: 0; padding: 8px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid #eceefa; }
.omni-ai-usage > span:last-child { border-right: 0; }
.omni-ai-usage small { color: var(--omni-muted); font-size: 8px; font-weight: 700; text-transform: uppercase; }
.omni-ai-usage strong { overflow: hidden; color: var(--omni-navy); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.omni-ai-usage em { overflow: hidden; color: var(--omni-green); font-size: 9px; font-style: normal; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.omni-ai-rate em { color: var(--omni-indigo); }
.omni-ai-feedback { margin: 8px 2px 0; font-size: 9px; line-height: 1.4; }
.omni-ai-feedback.error { color: var(--omni-red); }
.omni-ai-feedback.success { color: var(--omni-green); font-weight: 700; }
.omni-ai-rotation-state { margin-top: 9px; padding: 8px 9px; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; border: 1px solid #e0e3ee; border-radius: 11px; background: #fff; }
.omni-ai-rotation-state > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: #eef0ff; color: var(--omni-indigo); font-size: 15px; font-weight: 800; }
.omni-ai-rotation-state strong,
.omni-ai-rotation-state small { display: block; }
.omni-ai-rotation-state strong { color: var(--omni-navy); font-size: 10px; }
.omni-ai-rotation-state small { margin-top: 2px; color: var(--omni-muted); font-size: 9px; line-height: 1.35; }
.omni-ai-rotation-state.ready { border-color: #cde6d8; background: #f5fbf7; }
.omni-ai-rotation-state.ready > span { background: #dff1e7; color: var(--omni-green); }
.omni-ai-rotation-state.incomplete { border-color: #f0d6ae; background: #fffaf1; }
.omni-ai-variant-grid { margin-top: 10px; display: grid; gap: 8px; }
.omni-ai-variant { padding: 9px; border: 1px solid #e0e3ee; border-radius: 12px; background: #fff; }
.omni-ai-variant header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.omni-ai-variant header span { color: var(--omni-muted); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.omni-ai-variant header button { min-height: 38px !important; padding: 0 6px !important; border: 0 !important; background: transparent !important; color: var(--omni-indigo) !important; box-shadow: none !important; font-size: 9px; font-weight: 750; }
.omni-ai-variant-message { margin-top: 5px; padding: 9px 10px; border-radius: 4px 10px 10px 10px; background: #e7f8e3; color: #17231a; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.omni-ai-use { width: 100%; min-height: 42px !important; margin-top: 8px; border: 1px solid #d6d9f7 !important; border-radius: 10px !important; background: #f7f7ff !important; color: var(--omni-indigo) !important; box-shadow: none !important; font-size: 10px; font-weight: 800; }
.omni-wa-preview { margin-top: 11px; overflow: hidden; border: 1px solid #dfe3e8; border-radius: 14px; background: #f7f8fa; }
.omni-wa-preview-head { min-height: 42px; padding: 8px 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border-bottom: 1px solid #e9ecef; }
.omni-wa-preview-head strong { color: var(--omni-navy); font-size: 10px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.omni-wa-preview-head span { color: var(--omni-muted); font-size: 9px; text-align: right; }
.omni-wa-preview-canvas { min-height: 102px; padding: 13px 11px; display: flex; align-items: flex-start; background-color: #efeae2; background-image: radial-gradient(circle at 1px 1px, rgba(67, 76, 70, .06) 1px, transparent 0); background-size: 13px 13px; }
.omni-wa-bubble { position: relative; max-width: 92%; min-width: 94px; padding: 8px 10px; border-radius: 4px 11px 11px 11px; color: #111b21; background: #d9fdd3; box-shadow: 0 1px 1px rgba(11, 20, 26, .13); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.omni-wa-bubble::before { position: absolute; top: 0; left: -7px; width: 8px; height: 9px; content: ""; background: linear-gradient(225deg, #d9fdd3 50%, transparent 51%); }
.omni-wa-bubble.has-media { width: min(260px, 94%); padding: 4px; }
.omni-wa-media-image { width: 100%; max-height: 210px; display: block; border-radius: 8px; object-fit: cover; background: #d5dbd7; }
.omni-wa-document { min-width: 0; padding: 9px; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: center; border-radius: 8px; background: rgba(255, 255, 255, .58); }
.omni-wa-document > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: #fff; color: #16794f; font-size: 18px; }
.omni-wa-document > div { min-width: 0; }
.omni-wa-document strong,
.omni-wa-document small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omni-wa-document strong { font-size: 11px; }
.omni-wa-document small { margin-top: 2px; color: #667781; font-size: 9px; }
.omni-wa-caption { min-height: 1.45em; }
.omni-wa-bubble.has-media .omni-wa-caption { padding: 6px 7px 5px; }
.omni-wa-placeholder { color: #667781; font-style: italic; }
.omni-wa-line { min-height: 1.45em; white-space: pre-wrap; }
.omni-wa-list-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px; align-items: start; }
.omni-wa-list-row > span { min-width: 13px; color: #3b4a54; text-align: right; }
.omni-wa-quote { margin: 2px 0; padding-left: 8px; border-left: 3px solid #00a884; white-space: pre-wrap; }
.omni-wa-inline-code { padding: 1px 3px; border-radius: 3px; background: rgba(11, 20, 26, .09); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: .92em; }
.omni-wa-code-block { max-width: 100%; margin: 3px 0; padding: 7px 8px; overflow-x: auto; border-radius: 5px; background: rgba(11, 20, 26, .09); color: inherit; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: .92em; line-height: 1.45; white-space: pre-wrap; }
.omni-cadence-field { --omni-cadence-color: #699c7c; min-width: 0; padding: 12px 13px 10px; border: 1px solid var(--omni-border); border-radius: 14px; background: #fff; }
.omni-cadence-heading { min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.omni-cadence-heading label { color: var(--omni-muted); font-size: 11px; font-weight: 650; }
.omni-cadence-value { min-width: 82px; padding: 6px 10px; border-radius: 999px; color: #fff; background: var(--omni-cadence-color); box-shadow: 0 4px 10px color-mix(in srgb, var(--omni-cadence-color) 24%, transparent); font-size: 10px; font-weight: 750; text-align: center; transform-origin: center; }
.omni-cadence-value.energy-1 { --omni-cadence-shake: .2px; animation: omni-cadence-energy 8s ease-in-out infinite; }
.omni-cadence-value.energy-2 { --omni-cadence-shake: .45px; animation: omni-cadence-energy 6s ease-in-out infinite; }
.omni-cadence-value.energy-3 { --omni-cadence-shake: .8px; animation: omni-cadence-energy 4.2s ease-in-out infinite; }
.omni-cadence-value.energy-4 { --omni-cadence-shake: 1.15px; animation: omni-cadence-energy 3s ease-in-out infinite; }
.omni-cadence-control { position: relative; min-width: 0; margin-top: 4px; }
.omni-form-grid .omni-cadence-range { position: relative; z-index: 2; width: 100%; height: 44px; min-height: 44px; margin: 0; padding: 0; appearance: none; -webkit-appearance: none; border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none; cursor: grab; }
.omni-form-grid .omni-cadence-range:active { cursor: grabbing; }
.omni-cadence-range::-webkit-slider-runnable-track { height: 10px; border: 0; border-radius: 999px; background: linear-gradient(90deg, #5075d6 0%, #4a99c9 25%, #699c7c 50%, #df8b3c 75%, #d95843 100%); box-shadow: inset 0 1px 2px rgba(23, 50, 77, .12); }
.omni-cadence-range::-webkit-slider-thumb { width: 30px; height: 30px; margin-top: -10px; appearance: none; -webkit-appearance: none; border: 4px solid #fff; border-radius: 50%; background: var(--omni-cadence-color); box-shadow: 0 3px 10px rgba(23, 50, 77, .24); transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.omni-cadence-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(91, 92, 226, .16), 0 3px 10px rgba(23, 50, 77, .24); transform: scale(1.06); }
.omni-cadence-range::-moz-range-track { height: 10px; border: 0; border-radius: 999px; background: linear-gradient(90deg, #5075d6 0%, #4a99c9 25%, #699c7c 50%, #df8b3c 75%, #d95843 100%); box-shadow: inset 0 1px 2px rgba(23, 50, 77, .12); }
.omni-cadence-range::-moz-range-thumb { width: 22px; height: 22px; border: 4px solid #fff; border-radius: 50%; background: var(--omni-cadence-color); box-shadow: 0 3px 10px rgba(23, 50, 77, .24); transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.omni-cadence-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(91, 92, 226, .16), 0 3px 10px rgba(23, 50, 77, .24); transform: scale(1.06); }
.omni-cadence-ticks { position: absolute; z-index: 3; top: 20px; right: 13px; left: 13px; display: grid; grid-template-columns: repeat(5, 1fr); pointer-events: none; }
.omni-cadence-ticks i { width: 3px; height: 3px; justify-self: center; border-radius: 50%; background: rgba(255, 255, 255, .82); box-shadow: 0 0 0 1px rgba(23, 50, 77, .08); }

@keyframes omni-cadence-energy {
    0%, 1.5%, 4.5%, 100% { transform: translateX(0); }
    2.25% { transform: translateX(calc(var(--omni-cadence-shake) * -1)); }
    3% { transform: translateX(var(--omni-cadence-shake)); }
    3.75% { transform: translateX(calc(var(--omni-cadence-shake) * -.45)); }
}

.omni-check { grid-template-columns: 20px 1fr !important; color: var(--omni-ink) !important; font-weight: 500 !important; line-height: 1.45; }
.omni-check input { min-height: 18px; width: 18px; }
.omni-terms-acceptance { margin-top: 14px; padding: 13px; border: 1px solid #d9dde6; border-radius: 13px; background: #f8f9fb; transition: border-color .18s ease, background-color .18s ease; }
.omni-terms-acceptance.accepted { border-color: #b8dfca; background: #f1faf5; }
.omni-terms-acceptance .omni-check { margin: 0; }
.omni-terms-acceptance .omni-check span { font-size: 10.5px; }
.omni-terms-acceptance .omni-check a { color: var(--omni-indigo); font-weight: 800; }
.omni-terms-acceptance > small { margin: 7px 0 0 28px; display: block; color: var(--omni-muted); font-size: 9px; line-height: 1.45; }
.omni-campaign-terms-proof { margin: 12px 0; padding: 11px; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 9px; border: 1px solid #cce5d7; border-radius: 12px; background: #f2faf6; }
.omni-campaign-terms-proof > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: #dff3e7; color: var(--omni-green); font-size: 14px; font-weight: 850; }
.omni-campaign-terms-proof strong,
.omni-campaign-terms-proof small { display: block; }
.omni-campaign-terms-proof strong { color: var(--omni-navy); font-size: 10.5px; }
.omni-campaign-terms-proof small { margin-top: 2px; color: var(--omni-muted); font-size: 8.5px; }
.omni-campaign-terms-proof a { min-height: 38px; padding: 0 10px; display: flex; align-items: center; border: 1px solid #b8dfca; border-radius: 10px; color: var(--omni-green); font-size: 9px; font-weight: 800; text-decoration: none; }
.omni-primary { width: 100%; min-height: 49px !important; margin-top: 15px; border-radius: 9px !important; background: var(--omni-indigo) !important; box-shadow: none !important; }
.omni-form-error { margin: 10px 0 0; color: var(--omni-red); font-size: 12px; line-height: 1.5; }

.omni-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-bottom: 13px; border-block: 1px solid var(--omni-border); }
.omni-metrics span { padding: 10px 6px; border-right: 1px solid var(--omni-border); background: transparent; color: var(--omni-muted); font-size: 9px; text-align: center; text-transform: uppercase; }
.omni-metrics span:last-child { border-right: 0; }
.omni-metrics strong { display: block; color: var(--omni-navy); font-size: 19px; line-height: 1.2; }
.omni-review-rotation { margin: 0 0 12px; padding: 10px; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 9px; border: 1px solid #e1e4ec; border-radius: 12px; background: #f8f9fb; }
.omni-review-rotation > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: #eceef3; color: var(--omni-muted); font-size: 16px; font-weight: 800; }
.omni-review-rotation strong,
.omni-review-rotation small { display: block; }
.omni-review-rotation strong { color: var(--omni-navy); font-size: 11px; }
.omni-review-rotation small { margin-top: 2px; color: var(--omni-muted); font-size: 9px; line-height: 1.4; }
.omni-review-rotation.active { border-color: #cfd3ff; background: #f5f5ff; }
.omni-review-rotation.active > span { background: #e2e3ff; color: var(--omni-indigo); }
.omni-preview { padding: 11px 0; border-top: 1px solid #edf0f5; }
.omni-preview span { color: var(--omni-indigo); font-size: 10px; font-weight: 700; }
.omni-preview-template { margin-left: 7px; padding: 2px 5px; border-radius: 999px; background: #eef0ff; color: var(--omni-indigo); font-size: 8px; font-style: normal; font-weight: 750; }
.omni-preview-attachment { min-width: 0; margin-top: 6px; padding: 6px 8px; display: flex; align-items: center; gap: 6px; border-radius: 8px; background: #f0f1ff; }
.omni-preview-attachment span { width: 23px; height: 23px; flex: 0 0 23px; display: grid; place-items: center; border-radius: 6px; background: #fff; }
.omni-preview-attachment strong { min-width: 0; overflow: hidden; color: var(--omni-navy); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.omni-preview-message { margin-top: 4px; color: var(--omni-ink); font-size: 12px; line-height: 1.45; }
.omni-test-send-panel { margin-top: 12px; padding: 9px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; border: 1px solid #d9dcff; border-radius: 13px; background: #f7f7ff; }
.omni-test-send-panel.sent { border-color: #cde6d8; background: #f2faf6; }
.omni-test-send-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #e5e6ff; color: var(--omni-indigo); font-size: 16px; font-weight: 800; }
.omni-test-send-panel.sent .omni-test-send-icon { background: #dff1e7; color: var(--omni-green); }
.omni-test-send-panel > div { min-width: 0; }
.omni-test-send-panel strong,
.omni-test-send-panel small { display: block; }
.omni-test-send-panel strong { color: var(--omni-navy); font-size: 11px; }
.omni-test-send-panel small { margin-top: 2px; color: var(--omni-muted); font-size: 9px; line-height: 1.35; }
.omni-test-send-panel button { min-height: 42px !important; padding: 0 10px !important; border: 1px solid #cfd2ff !important; border-radius: 10px !important; background: #fff !important; color: var(--omni-indigo) !important; box-shadow: none !important; font-size: 10px; font-weight: 750; }
.omni-test-send-panel button:disabled { color: #9ca3b4 !important; border-color: #e1e4eb !important; background: #f5f6f8 !important; }
.omni-test-send-success { margin: 7px 2px 0; color: var(--omni-green); font-size: 10px; font-weight: 700; }

.omni-history { margin-top: 26px; }
.omni-text-button { color: var(--omni-indigo) !important; font-size: 11px; font-weight: 700; }
.omni-empty { padding: 20px 5px; color: var(--omni-muted); font-size: 12px; text-align: center; }
.omni-campaign-row { margin: 0; padding: 14px 2px; border-bottom: 1px solid var(--omni-border); background: transparent; }
.omni-campaign-top strong { color: var(--omni-navy); font-size: 13px; }
.omni-status { padding: 4px 7px; border-radius: 999px; background: #eef0f4; color: var(--omni-muted); font-size: 8px; font-weight: 750; text-transform: uppercase; }
.omni-status.running,
.omni-status.completed { background: #e6f4ed; color: var(--omni-green); }
.omni-status.paused { background: #fff3df; color: var(--omni-amber); }
.omni-status.failed,
.omni-status.completed_with_errors,
.omni-status.canceled { background: #fdebed; color: var(--omni-red); }
.omni-progress { height: 4px; margin: 11px 0 8px; overflow: hidden; border-radius: 8px; background: #e9edf3; }
.omni-progress i { display: block; height: 100%; border-radius: inherit; background: var(--omni-indigo); transition: width .3s ease; }
.omni-campaign-meta { flex-wrap: wrap; color: var(--omni-muted); font-size: 9px; }
.omni-row-actions { justify-content: flex-end; margin-top: 10px; }
.omni-row-actions button { min-height: 30px !important; padding: 0 10px !important; border: 1px solid var(--omni-border) !important; background: #fff !important; color: var(--omni-indigo) !important; box-shadow: none !important; font-size: 10px; }
.omni-row-actions button.details { margin-right: auto; border-color: #d4d7ff !important; background: #f6f6ff !important; font-weight: 750; }
.omni-row-actions button.danger { color: var(--omni-red) !important; }

.omni-detail-head { margin-bottom: 13px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.omni-detail-head h2 { min-width: 0; margin: 2px 0 0; overflow: hidden; color: var(--omni-navy); font-size: 18px; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.omni-detail-back { width: 38px; min-height: 38px !important; padding: 0 !important; display: grid; place-items: center; border: 1px solid var(--omni-border) !important; border-radius: 12px !important; background: #fff !important; color: var(--omni-navy) !important; box-shadow: none !important; font-size: 18px; }
.omni-detail-loading { min-height: 230px; display: grid; place-items: center; align-content: center; gap: 13px; color: var(--omni-muted); font-size: 11px; }
.omni-detail-loading .omni-pulse { width: 28px; height: 28px; }
.omni-detail-error { padding: 16px; display: grid; gap: 4px; border: 1px solid #f2cbd0; border-radius: 16px; background: #fff5f6; color: var(--omni-red); font-size: 11px; }
.omni-campaign-detail { padding: 16px 2px; border-bottom: 1px solid var(--omni-border); background: transparent; box-shadow: none; }
.omni-detail-status-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.omni-detail-status-line > span:last-child { color: var(--omni-muted); font-size: 8px; text-align: right; }
.omni-current-recipient { margin-top: 13px; padding: 13px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--omni-border); background: transparent; }
.omni-current-recipient div span,
.omni-current-recipient div strong { display: block; }
.omni-current-recipient div span { color: var(--omni-muted); font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.omni-current-recipient div strong { margin-top: 2px; color: var(--omni-navy); font-size: 24px; letter-spacing: -.045em; }
.omni-current-recipient > span { color: var(--omni-indigo); font-size: 10px; font-weight: 750; }
.omni-detail-progress { height: 5px; margin: 10px 1px 13px; overflow: hidden; border-radius: 8px; background: #e9edf3; }
.omni-detail-progress i { display: block; height: 100%; border-radius: inherit; background: var(--omni-indigo); transition: width .3s ease; }
.omni-metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-block: 1px solid #e7e9ef; }
.omni-metric-grid > div { min-width: 0; padding: 10px 7px; border-right: 1px solid #e7e9ef; background: transparent; text-align: center; }
.omni-metric-grid > div:nth-child(3n) { border-right: 0; }
.omni-metric-grid span,
.omni-metric-grid strong { display: block; }
.omni-metric-grid span { color: var(--omni-muted); font-size: 8px; font-weight: 700; text-transform: uppercase; }
.omni-metric-grid strong { margin-top: 2px; color: var(--omni-navy); font-size: 19px; letter-spacing: -.04em; }
.omni-receipt-note { margin: 9px 2px 15px; color: var(--omni-muted); font-size: 8px; line-height: 1.45; }
.omni-recipient-head { margin-bottom: 7px; display: flex; align-items: center; justify-content: space-between; }
.omni-recipient-head strong { color: var(--omni-navy); font-size: 11px; }
.omni-recipient-head span { color: var(--omni-muted); font-size: 8px; }
.omni-recipient-list { max-height: 380px; overflow-y: auto; border: 1px solid #e7e9ef; border-radius: 13px; background: #fff; overscroll-behavior: contain; }
.omni-recipient-row { min-height: 51px; padding: 8px 9px; display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: 8px; border-bottom: 1px solid #eef0f4; }
.omni-recipient-row:last-child { border-bottom: 0; }
.omni-recipient-row.current { background: #f5f5ff; box-shadow: inset 3px 0 var(--omni-indigo); }
.omni-recipient-position { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; background: #f0f2f6; color: var(--omni-muted); font-size: 8px; font-weight: 750; }
.omni-recipient-row.current .omni-recipient-position { background: #e2e3ff; color: var(--omni-indigo); }
.omni-recipient-row > div { min-width: 0; }
.omni-recipient-row > div strong,
.omni-recipient-row > div small { display: block; }
.omni-recipient-row > div strong { overflow: hidden; color: var(--omni-navy); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.omni-recipient-row > div small { margin-top: 2px; color: var(--omni-muted); font-size: 8px; }
.omni-recipient-state { padding: 4px 6px; border-radius: 999px; background: #eef0f4; color: var(--omni-muted); font-size: 7px; font-weight: 780; text-transform: uppercase; }
.omni-recipient-state.sent,
.omni-recipient-state.delivered { background: #e8efff; color: #315caa; }
.omni-recipient-state.read,
.omni-recipient-state.replied { background: #e6f4ed; color: var(--omni-green); }
.omni-recipient-state.sending { background: #ececff; color: var(--omni-indigo); }
.omni-recipient-state.failed,
.omni-recipient-state.canceled { background: #fdebed; color: var(--omni-red); }
.omni-recipient-state.suppressed { background: #fff3df; color: var(--omni-amber); }

.omni-state-card { margin-top: 22dvh; text-align: center; }
.omni-state-card > span { width: 42px; height: 42px; margin: 0 auto; display: grid; place-items: center; border-radius: 50%; background: #fdebed; color: var(--omni-red); font-weight: 800; }
.omni-state-card h1 { color: var(--omni-navy); font-size: 20px; }
.omni-state-card p { color: var(--omni-muted); font-size: 13px; }

.omni-login-page { display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom)); background: #fff; }
.omni-login-card { width: min(100%, 360px); min-width: 0; padding: 28px 8px; background: #fff; border: 0; border-radius: 0; box-shadow: none; }
.omni-login-brand { margin-bottom: 48px; }
.omni-login-brand small { margin-left: -4px; align-self: flex-end; margin-bottom: 4px; }
.omni-login-copy h1 { margin: 6px 0 8px; color: var(--omni-navy); font-size: 30px; letter-spacing: -.05em; }
.omni-login-page h1:focus,
.omni-content h1:focus { outline: none; }
.omni-login-copy p { margin: 0 0 24px; color: var(--omni-muted); font-size: 13px; line-height: 1.6; }
.omni-login-card .g_id_signin { display: grid; place-items: center; min-height: 44px; }
.omni-login-note { display: block; margin-top: 23px; color: #8a93a6; font-size: 10px; line-height: 1.5; text-align: center; }

.omni-install-prompt {
    position: fixed;
    z-index: 1500;
    left: 50%;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: min(calc(100% - 24px), 406px);
    padding: 16px;
    transform: translateX(-50%);
    color: var(--omni-ink);
    background: rgba(255, 255, 255, .98);
    border: 1px solid var(--omni-border);
    border-radius: 20px;
    box-shadow: 0 20px 55px rgba(23, 50, 77, .22);
    animation: omni-install-enter .24s ease-out both;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

@keyframes omni-install-enter {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

.omni-install-close {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 34px;
    min-height: 34px !important;
    padding: 0 !important;
    display: grid;
    place-items: center;
    color: var(--omni-muted) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 22px;
    line-height: 1;
}

.omni-install-lead {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 12px;
    align-items: center;
    padding-right: 28px;
}

.omni-install-lead img { width: 50px; height: 50px; border-radius: 13px; }
.omni-install-lead strong { display: block; margin: 2px 0; color: var(--omni-navy); font-size: 17px; letter-spacing: -.02em; }
.omni-install-lead p { margin: 0; color: var(--omni-muted); font-size: 11px; line-height: 1.45; }

.omni-install-steps {
    margin: 14px 0 2px;
    padding: 12px;
    display: grid;
    grid-template-columns: 25px 1fr;
    gap: 8px 9px;
    align-items: center;
    background: var(--omni-canvas);
    border-radius: 14px;
}

.omni-install-steps > span {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    color: var(--omni-indigo);
    background: #e8e8ff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 750;
}

.omni-install-steps p { margin: 0; color: var(--omni-muted); font-size: 11px; line-height: 1.4; }
.omni-install-steps strong { color: var(--omni-navy); }
.omni-share-icon { display: inline-block; color: var(--omni-indigo); font-size: 16px; font-weight: 800; transform: translateY(1px); }

.omni-install-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 13px; }
.omni-install-actions button { min-height: 44px !important; border-radius: 12px !important; font-size: 12px; font-weight: 700; }
.omni-install-primary { background: var(--omni-indigo) !important; color: #fff !important; box-shadow: 0 7px 16px rgba(91, 92, 226, .2) !important; }
.omni-install-secondary { padding: 0 14px !important; color: var(--omni-muted) !important; background: transparent !important; border: 1px solid var(--omni-border) !important; box-shadow: none !important; }

@media (max-width: 430px) {
    .omni-device { box-shadow: none; }
    .omni-content { padding-left: 14px; padding-right: 14px; }
    .omni-workspace-nav { margin-right: -14px; margin-left: -14px; }
    .omni-inbox-shell { margin-right: -14px; margin-left: -14px; }
    .omni-draft-bar { grid-template-columns: 34px minmax(0, 1fr); }
    .omni-draft-discard,
    .omni-draft-confirm { grid-column: 2; justify-self: start; }
    .omni-wa-preview-head { align-items: flex-start; flex-direction: column; gap: 1px; }
    .omni-wa-preview-head span { text-align: left; }
    .omni-wa-bubble { max-width: 96%; }
    .omni-ai-assist-head { align-items: flex-start; }
    .omni-ai-assist-head > button { min-width: 82px; }
    .omni-ai-usage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .omni-ai-usage > span:nth-child(2) { border-right: 0; }
    .omni-ai-usage > span:last-child { grid-column: 1 / -1; border-top: 1px solid #eceefa; }
    .omni-test-send-panel { grid-template-columns: 34px minmax(0, 1fr); }
    .omni-test-send-panel button { grid-column: 2; justify-self: start; min-width: 100px; }
}

@media (prefers-reduced-motion: reduce) {
    .omni-install-prompt,
    .omni-cadence-value { animation: none !important; }
}

@media (max-width: 560px) {
    .page-content {
        padding: 18px 16px;
    }

    .topbar {
        padding: 12px 16px;
    }

    h1 {
        font-size: 24px;
    }
}

/* ---------------------------------------------------------- MudBlazor bridge
   Helpers that make MudBlazor components (data grids, etc.) sit inside the
   Cyvy design system without clashing with the custom panels above. */

.qs-grid.mud-table {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.qs-grid .mud-table-toolbar {
    min-height: 68px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #ffffff, var(--surface-2));
}

.qs-grid .mud-table-toolbar .mud-typography {
    font-weight: 650;
    letter-spacing: -.01em;
}

.qs-grid .mud-table-head th {
    background: var(--surface-2);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.qs-grid-row {
    cursor: pointer;
    transition: background .13s ease;
}

.qs-grid .mud-table-cell {
    border-bottom: 1px solid var(--line);
}

.qs-cell-stacked {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.qs-cell-stacked strong {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.tenant-grid-link {
    color: inherit;
    text-decoration: none;
}

.tenant-grid-link:hover {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.qs-cell-stacked small {
    color: var(--muted);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.tenant-grid-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    color: var(--muted);
    text-decoration: none;
    transition: background .13s ease, color .13s ease;
}

.tenant-grid-action:hover {
    background: var(--surface-2);
    color: var(--brand);
}

.qs-grid-search {
    width: min(320px, 42vw);
}

.connector-filter {
    width: 150px;
}

.connector-cell,
.connector-detail-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.connector-grid-logo {
    width: 38px;
    height: 38px;
    object-fit: contain;
    flex: 0 0 38px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: #fff;
}

.connector-row-selected .mud-table-cell {
    background: var(--brand-soft);
}

.connector-detail {
    display: grid;
    gap: 14px;
}

.connector-detail-logo {
    width: 52px;
    height: 52px;
    object-fit: contain;
    flex: 0 0 52px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: #fff;
}

.connector-logo-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--brand);
    background: var(--brand-soft);
}

.connector-detail-meta {
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: 13px;
}

/* Dashboard stat cards */
.qs-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-md) !important;
    background: var(--surface);
    box-shadow: var(--shadow-sm) !important;
    transition: transform .14s ease, box-shadow .16s ease, border-color .16s ease;
}

.qs-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow) !important;
    border-color: var(--brand-soft-2);
}

.qs-stat-icon {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
}

.qs-stat-icon .mud-icon-root {
    font-size: 24px;
}

.qs-stat-body {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.qs-stat-body span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}

.qs-stat-body strong {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
}

/* Dashboard panels */
.qs-panel {
    height: 100%;
    padding: 18px !important;
    border: 1px solid var(--line);
    border-radius: var(--r-lg) !important;
    background: var(--surface);
    box-shadow: var(--shadow-sm) !important;
}

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

.qs-list .mud-list-item {
    border-radius: var(--r-sm);
}

.qs-list-row {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

/* Dialog forms */
.qs-dialog-form {
    display: grid;
    gap: 16px;
    min-width: min(420px, 78vw);
}

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

.qs-permission-list {
    display: grid;
    gap: 10px;
    min-width: min(560px, 80vw);
    max-height: min(60vh, 540px);
    overflow-y: auto;
    padding-right: 4px;
}

.qs-permission-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
}

.qs-permission-select {
    width: 150px;
}

.qs-simple-table.mud-table {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
}

.qs-simple-table th {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

@media (max-width: 560px) {
    .qs-dialog-two,
    .qs-permission-row {
        grid-template-columns: 1fr;
    }

    .qs-permission-select {
        width: 100%;
    }
}

@media (max-width: 1040px) {
    .qs-grid .mud-table-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }

    .qs-grid-search {
        width: 100%;
    }
}

/* Omni WhatsApp identity and administrator connection editor. */
.omni-whatsapp-mark {
    --omni-whatsapp-mark-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAS1BMVEVHcEz////////////////////////////////////////////////r+vDc9uXO8tps3ZIAzE4jz2iQ5Km97c+g5roH0VxQ2IJ+4KHEIdFQAAAADXRSTlMANIbD6v+HM2HwFt8+TenAQgAAAPtJREFUeAF9kwWCxSAMRFOZOlb0/hfdL1NY76tCZIJJo+uHERiHaZafLCsa6yJf2XZ8Y9+kceAXx42tWTc0lFaoMHPVM9Y9OX3VfdcJYp0NSumYkmHHq+aVv9mZ5sW/VWRmT3QaleL47WTij4swZ7Un6vYyMDABOVmQeOLFICN17FejdgpPRmEzeyCkAKKukr4YYZMG1NtI9SttycArcQzOKhgHpmVBhirFpeT05YpBeuY9C9ViCdCO4pN0lzGiok4GYhZZwRJM5IqEdNnWOvExvdSyj+V0BWSpS2ZLUAgl5xxVWzIu9p9st9vkfoPdb837Td2YJx6HvpPKAzrFFKvJE7iaAAAAAElFTkSuQmCC");
    width: 28px;
    height: 28px;
    display: inline-block;
    flex: 0 0 auto;
    background-color: transparent;
    background-image: var(--omni-whatsapp-mark-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.omni-whatsapp-mark.large { width: 42px !important; height: 42px !important; background-color: transparent !important; border-radius: 0 !important; }
.omni-heading-with-mark { display: flex; align-items: center; gap: 8px; }
.omni-heading-with-mark .omni-whatsapp-mark { width: 23px; height: 23px; }
.omni-whatsapp-mark.nav { width: 17px; height: 17px; }
.omni-whatsapp-title .omni-whatsapp-mark { width: 20px; height: 20px; }
.omni-instance-symbol .omni-whatsapp-mark { width: 28px; height: 28px; }
.omni-section-actions { display: flex; align-items: center; gap: 7px; }
.omni-compact-primary { min-height: 40px !important; padding: 0 13px !important; border-radius: 11px !important; background: var(--omni-indigo) !important; color: #fff !important; box-shadow: 0 6px 14px rgba(91, 92, 226, .18) !important; font-size: 10px; }
.omni-inline-success { margin-top: -4px; padding: 10px 12px; border: 1px solid #cce7d7; border-radius: 12px; background: #eff9f3; color: var(--omni-green); font-size: 10px; font-weight: 700; line-height: 1.4; }
.omni-state-card .omni-whatsapp-mark { background-color: transparent; background-image: var(--omni-whatsapp-mark-image); }
.omni-state-card > button.primary { min-height: 42px !important; margin-top: 8px; padding: 0 16px !important; border-radius: 12px !important; background: var(--omni-indigo) !important; color: #fff !important; }
.omni-instance-actions button.danger.quiet { border-color: #f1d3d6 !important; background: #fff8f8 !important; }

.omni-instance-editor-backdrop {
    position: fixed;
    z-index: 1800;
    inset: 0;
    padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
    display: grid;
    place-items: center;
    background: rgba(17, 32, 49, .48);
    backdrop-filter: blur(7px);
}

.omni-instance-editor {
    width: min(100%, 390px);
    max-height: calc(100dvh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(17, 32, 49, .28);
}

.omni-instance-editor > header { padding: 17px 17px 13px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--omni-border); }
.omni-instance-editor > header > div { display: flex; align-items: center; gap: 10px; }
.omni-instance-editor h3 { margin: 1px 0 0; color: var(--omni-navy); font-size: 19px; letter-spacing: -.035em; }
.omni-instance-editor > header > button { width: 38px; min-height: 38px !important; padding: 0 !important; border: 1px solid var(--omni-border) !important; border-radius: 11px !important; background: #fff !important; color: var(--omni-muted) !important; box-shadow: none !important; font-size: 21px; }
.omni-instance-editor form { padding: 17px; display: grid; gap: 13px; }
.omni-instance-editor label { display: grid; gap: 6px; color: var(--omni-muted); font-size: 10px; font-weight: 700; }
.omni-instance-editor input { width: 100%; min-height: 48px; border: 1px solid var(--omni-border); border-radius: 13px; background: #fff; color: var(--omni-ink); font-size: 14px; }
.omni-instance-editor input:focus { border-color: var(--omni-indigo); outline: 3px solid rgba(91, 92, 226, .12); }
.omni-instance-editor-warning { margin: 0; padding: 10px 11px; border-radius: 11px; background: #f5f6f8; color: var(--omni-muted); font-size: 9px; line-height: 1.45; }
.omni-instance-editor-warning { background: #fff7e9; color: #96621b; }
.omni-instance-editor-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-top: 2px; }
.omni-instance-editor-actions button { min-height: 44px !important; border: 1px solid var(--omni-border) !important; border-radius: 12px !important; background: #fff !important; color: var(--omni-muted) !important; box-shadow: none !important; font-size: 10px; }
.omni-instance-editor-actions button.primary { border-color: transparent !important; background: var(--omni-indigo) !important; color: #fff !important; }

/* Per-instance WhatsApp activation flow. */
.omni-activation-flow {
    margin: 0 0 14px;
    padding: 14px 2px;
    display: grid;
    gap: 13px;
    border: 0;
    border-bottom: 1px solid #d9dcff;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.omni-instance-card .omni-activation-flow {
    margin: 0;
    padding: 13px 0 0;
    border: 0;
    border-top: 1px solid #edf0f5;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.omni-activation-flow.complete { border-color: #cbe8d7; background: transparent; }
.omni-instance-card .omni-activation-flow.complete { background: transparent; }
.omni-activation-overview { min-width: 0; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 12px; }
.omni-activation-overview h3 { margin: 2px 0 3px; color: var(--omni-navy); font-size: 16px; letter-spacing: -.025em; }
.omni-activation-overview p { margin: 0; color: var(--omni-muted); font-size: 9px; line-height: 1.45; }
.omni-activation-pie { position: relative; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--omni-indigo) var(--omni-activation-progress), #e3e6ef 0); }
.omni-activation-pie::after { position: absolute; inset: 6px; border-radius: 50%; background: #fff; content: ""; box-shadow: inset 0 0 0 1px rgba(23, 50, 77, .05); }
.omni-activation-flow.complete .omni-activation-pie { background: conic-gradient(var(--omni-green) 360deg, #e3e6ef 0); }
.omni-activation-pie span { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 2px; color: var(--omni-navy); }
.omni-activation-pie strong { font-size: 16px; line-height: 1; }
.omni-activation-pie small { color: var(--omni-muted); font-size: 8px; font-weight: 700; }
.omni-activation-steps { margin: 0; padding: 0; display: grid; gap: 8px; list-style: none; }
.omni-activation-steps li { min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 9px; }
.omni-activation-steps li > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: #eceef3; color: #9098a8; font-size: 10px; font-weight: 800; }
.omni-activation-steps strong,
.omni-activation-steps small { display: block; }
.omni-activation-steps strong { color: var(--omni-navy); font-size: 10px; }
.omni-activation-steps small { margin-top: 1px; color: var(--omni-muted); font-size: 8px; line-height: 1.4; }
.omni-activation-steps li.current > span { background: #e2e3ff; color: var(--omni-indigo); box-shadow: none; }
.omni-activation-steps li.complete > span { background: #dff1e7; color: var(--omni-green); }
.omni-activation-steps li.locked { opacity: .62; }
.omni-activation-meta-note { padding: 10px; display: grid; grid-template-columns: 27px minmax(0, 1fr); gap: 8px; border-radius: 12px; background: #fff7e9; color: #805517; }
.omni-activation-meta-note > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; background: #ffe7b8; font-size: 11px; font-weight: 900; }
.omni-activation-meta-note p { margin: 0; font-size: 8px; line-height: 1.5; }
.omni-activation-actions { display: flex; }
.omni-activation-actions a { width: 100%; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--omni-indigo); color: #fff; font-size: 10px; font-weight: 750; text-decoration: none; }
.omni-activation-inline-hint { margin: 10px 0 -3px; padding: 10px 11px; border-radius: 11px; background: #f2f2ff; color: var(--omni-indigo); font-size: 9px; font-weight: 650; line-height: 1.45; }
.omni-chat-activation-gate { padding: 8px 10px; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 8px; border-bottom: 1px solid #d8dbe4; background: #f7f7ff; }
.omni-chat-activation-gate > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: #e2e3ff; color: var(--omni-indigo); font-size: 10px; font-weight: 850; }
.omni-chat-activation-gate strong,
.omni-chat-activation-gate small { display: block; }
.omni-chat-activation-gate strong { color: var(--omni-navy); font-size: 9px; }
.omni-chat-activation-gate small { margin-top: 1px; color: var(--omni-muted); font-size: 7px; line-height: 1.35; }
.omni-chat-activation-gate.locked { background: #f5f6f8; }
.omni-chat-activation-gate.locked > span { background: #e8ebf0; color: #7c8594; }
.omni-chat-composer textarea:disabled { background: #e9ecf1; color: #8992a0; cursor: not-allowed; }
.omni-send-button:disabled { background: #a9b3bd !important; }

@media (max-width: 360px) {
    .omni-activation-overview { grid-template-columns: 62px minmax(0, 1fr); gap: 10px; }
    .omni-activation-pie { width: 62px; height: 62px; }
}

.tenant-api-keys-panel {
    grid-column: 1 / -1;
}

/* Omni desktop workspace: the same Blazor/SignalR surface, composed for a wide viewport. */
.omni-workspace-shell,
.omni-workspace-main {
    min-width: 0;
}

@media (min-width: 900px) {
    .omni-viewport {
        background: #f4f6f8;
    }

    .omni-device {
        width: 100%;
        min-width: 0;
        border-inline: 0;
    }

    .omni-header {
        height: 72px;
        padding: 0 clamp(24px, 3vw, 48px);
    }

    .omni-content {
        width: 100%;
        max-width: 1680px;
        margin: 0 auto;
        padding: 24px clamp(24px, 3vw, 48px) 32px;
    }

    .omni-workspace-shell {
        display: grid;
        grid-template-columns: 220px minmax(0, 1fr);
        align-items: start;
        gap: clamp(24px, 2.4vw, 40px);
    }

    .omni-workspace-sidebar {
        position: sticky;
        top: 96px;
        min-width: 0;
    }

    .omni-workspace-sidebar .omni-welcome {
        margin: 0 0 20px;
        display: grid;
        justify-content: stretch;
        gap: 8px;
    }

    .omni-workspace-sidebar .omni-welcome h1 {
        min-width: 0;
        margin: 0;
        overflow: hidden;
        font-size: 22px;
        line-height: 1.25;
        letter-spacing: -.035em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .omni-workspace-sidebar .omni-provider-badge {
        justify-self: start;
    }

    .omni-workspace-nav,
    .omni-workspace-nav:has(button:nth-child(2):last-child) {
        position: static;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: 4px;
        border: 0;
        background: transparent;
    }

    .omni-workspace-nav button {
        position: relative;
        min-height: 44px !important;
        padding: 0 14px !important;
        justify-content: flex-start;
        border: 0 !important;
        border-radius: 9px !important;
        color: #596579 !important;
        font-size: 13px;
        font-weight: 650;
        text-align: left;
    }

    .omni-workspace-nav button::before {
        position: absolute;
        top: 10px;
        bottom: 10px;
        left: 0;
        width: 3px;
        border-radius: 2px;
        background: transparent;
        content: "";
    }

    .omni-workspace-nav button:hover {
        background: #eaedf1 !important;
        color: var(--omni-navy) !important;
    }

    .omni-workspace-nav button:focus-visible {
        outline: 2px solid rgba(91, 92, 226, .36);
        outline-offset: 2px;
    }

    .omni-workspace-nav button.active {
        border: 0 !important;
        background: #e9eafd !important;
        color: #3435a8 !important;
    }

    .omni-workspace-nav button.active::before {
        background: var(--omni-indigo);
    }

    .omni-workspace-main {
        width: 100%;
        max-width: 1120px;
    }

    .omni-workspace-main.inbox {
        max-width: none;
    }

    .omni-workspace-main.team {
        display: grid;
        grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
        align-items: start;
        gap: 24px;
    }

    .omni-workspace-main.team > .omni-meta-account-alert {
        grid-column: 1 / -1;
    }

    .omni-workspace-main.team > .omni-card {
        padding-top: 0;
    }

    .omni-workspace-main.team > .omni-team-list {
        border-top: 1px solid var(--omni-border);
    }

    .omni-workspace-main.instances,
    .omni-workspace-main.meta {
        max-width: 1240px;
    }

    .omni-instance-list {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        align-items: start;
        gap: 16px;
    }

    .omni-instance-card {
        padding: 18px;
        border: 1px solid var(--omni-border);
        border-radius: 12px;
        background: #fff;
    }

    .omni-instance-card.connected,
    .omni-instance-card.disconnected,
    .omni-instance-card.missing {
        border-color: var(--omni-border);
    }

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

    .omni-form-grid > .omni-form-field,
    .omni-form-grid > .omni-cadence-field,
    .omni-form-grid > .omni-check {
        grid-column: 1 / -1;
    }

    .omni-card {
        padding-block: 24px;
    }

    .omni-content > .omni-account-welcome,
    .omni-content > .omni-account-profile-card,
    .omni-content > .omni-account-preferences-card,
    .omni-content > .omni-account-legal-card {
        width: 100%;
        max-width: 860px;
        margin-right: auto;
        margin-left: auto;
    }

    .omni-content > .omni-terms-welcome,
    .omni-content > .omni-terms-alert,
    .omni-content > .omni-terms-document,
    .omni-content > .omni-terms-footer {
        width: 100%;
        max-width: 960px;
        margin-right: auto;
        margin-left: auto;
    }

    .omni-section-head h2 {
        font-size: 22px;
    }

    .omni-meta-account-alert {
        margin-top: 0;
    }

    .omni-inbox-shell,
    .omni-inbox-shell.show-chat {
        position: static;
        width: 100%;
        height: calc(100dvh - 128px);
        min-height: 620px;
        margin: 0;
        display: grid;
        grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
        transform: none;
        overflow: hidden;
        border: 1px solid #d8dde4;
        border-radius: 12px;
        background: #fff;
    }

    .omni-inbox-shell.show-list .omni-chat-pane,
    .omni-inbox-shell.show-chat .omni-chat-pane {
        display: grid;
    }

    .omni-inbox-shell.show-list .omni-inbox-list,
    .omni-inbox-shell.show-chat .omni-inbox-list {
        display: flex;
    }

    .omni-inbox-list {
        min-width: 0;
        border-right: 1px solid #d8dde4;
    }

    .omni-inbox-list-head {
        padding: 18px 18px 12px;
    }

    .omni-inbox-list-head h2 {
        font-size: 23px;
    }

    .omni-inbox-search,
    .omni-inbox-filters {
        margin-right: 18px;
        margin-left: 18px;
    }

    .omni-inbox-filters button,
    .omni-chat-status-action {
        font-size: 10px;
    }

    .omni-conversation-row {
        min-height: 82px !important;
        padding: 12px 18px !important;
    }

    .omni-conversation-copy strong {
        font-size: 13px;
    }

    .omni-conversation-preview {
        font-size: 10px;
    }

    .omni-conversation-copy time,
    .omni-conversation-copy small {
        font-size: 9px;
    }

    .omni-chat-head {
        min-height: 64px;
        padding: 10px 16px;
        grid-template-columns: 42px minmax(0, 1fr) auto;
        gap: 10px;
    }

    .omni-chat-back {
        display: none !important;
    }

    .omni-chat-title strong {
        font-size: 13px;
    }

    .omni-chat-title span {
        font-size: 10px;
    }

    .omni-chat-messages {
        padding: 18px clamp(20px, 3vw, 40px) 24px;
    }

    .omni-message-bubble {
        max-width: min(70%, 640px);
        padding: 8px 10px 6px;
    }

    .omni-message-text {
        font-size: 13px;
        line-height: 1.45;
    }

    .omni-message-meta,
    .omni-chat-date {
        font-size: 9px;
    }

    .omni-message-meta button,
    .omni-forwarded,
    .omni-quoted-message strong,
    .omni-quoted-message span {
        font-size: 8px;
    }

    .omni-chat-composer {
        padding: 10px 12px;
    }

    .omni-chat-composer > div:last-child {
        grid-template-columns: minmax(0, 1fr) 44px;
        gap: 8px;
    }

    .omni-chat-composer textarea {
        min-height: 44px;
        font-size: 13px;
    }

    .omni-send-button {
        width: 44px;
        min-height: 44px !important;
    }
}

@media (min-width: 900px) and (max-width: 1120px) {
    .omni-workspace-shell {
        grid-template-columns: 190px minmax(0, 1fr);
        gap: 22px;
    }

    .omni-inbox-shell,
    .omni-inbox-shell.show-chat {
        grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
    }
}