/* _content/Rame.Blazor.Server/Components/AI/AgentDesignerRoot.razor.rz.scp.css */
/* ============================================================
   AgentDesignerRoot — Full-screen settings-style layout
   ============================================================ */

.designer-root[b-dbuz9ghnzf] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-bg-secondary, #f8fafc);
    overflow: hidden;
    position: relative;
}

/* ── Saving overlay ── */

.saving-overlay[b-dbuz9ghnzf] {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(4px);
}

.saving-overlay__content[b-dbuz9ghnzf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 48px;
    border-radius: 16px;
    background: var(--color-bg-primary, #ffffff);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
    border: 1px solid var(--color-border, #e2e8f0);
}

.saving-spinner[b-dbuz9ghnzf] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border, #e2e8f0);
    border-top-color: var(--color-primary, #6366f1);
    border-radius: 50%;
    animation: saving-spin-b-dbuz9ghnzf 0.7s linear infinite;
}

@keyframes saving-spin-b-dbuz9ghnzf {
    to { transform: rotate(360deg); }
}

.saving-overlay__text[b-dbuz9ghnzf] {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary, #1e293b);
}

.saving-overlay__hint[b-dbuz9ghnzf] {
    font-size: 12px;
    color: var(--color-text-tertiary, #94a3b8);
}

/* ── Header ── */

.designer-header[b-dbuz9ghnzf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 56px;
    background: var(--color-bg-primary, #ffffff);
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    flex-shrink: 0;
    box-shadow: 0 1px 3px var(--color-shadow, rgba(0,0,0,0.06));
    z-index: 10;
}

/* Back button */
.btn-back[b-dbuz9ghnzf] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--color-text-secondary, #64748b);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.btn-back:hover[b-dbuz9ghnzf] {
    background: var(--color-bg-tertiary, #f1f5f9);
    color: var(--color-text-primary, #1e293b);
}

.header-left[b-dbuz9ghnzf] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.header-agent-info[b-dbuz9ghnzf] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.agent-name[b-dbuz9ghnzf] {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.unsaved-pill[b-dbuz9ghnzf] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--color-warning-light, #fef3c7);
    color: #92400e;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}

.header-right[b-dbuz9ghnzf] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Inline toasts */
.inline-toast[b-dbuz9ghnzf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inline-toast--error[b-dbuz9ghnzf] {
    background: var(--color-error-light, #fee2e2);
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.inline-toast--success[b-dbuz9ghnzf] {
    background: var(--color-success-light, #dcfce7);
    color: #166534;
    border: 1px solid #86efac;
}

/* Save button */
.btn-save[b-dbuz9ghnzf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1.5px solid var(--color-border, #e2e8f0);
    background: var(--color-bg-secondary, #f8fafc);
    color: var(--color-text-tertiary, #94a3b8);
    font-size: 13px;
    font-weight: 500;
    cursor: not-allowed;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-save--active[b-dbuz9ghnzf] {
    background: var(--color-primary, #6366f1);
    border-color: var(--color-primary, #6366f1);
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(99, 102, 241, 0.35);
}

.btn-save--active:hover[b-dbuz9ghnzf] {
    background: var(--color-primary-hover, #4f46e5);
    border-color: var(--color-primary-hover, #4f46e5);
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.45);
}

/* ── Body layout ── */

.designer-body[b-dbuz9ghnzf] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ── Sidebar navigation ── */

.sidebar-nav[b-dbuz9ghnzf] {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 16px 10px;
    gap: 2px;
    background: var(--color-bg-primary, #ffffff);
    border-right: 1px solid var(--color-border, #e2e8f0);
    overflow-y: auto;
}

.nav-item[b-dbuz9ghnzf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease, color 0.12s ease;
    position: relative;
    color: var(--color-text-secondary, #64748b);
}

.nav-item:hover[b-dbuz9ghnzf] {
    background: var(--color-bg-tertiary, #f1f5f9);
    color: var(--color-text-primary, #1e293b);
}

.nav-item--active[b-dbuz9ghnzf] {
    background: var(--color-primary-light, #e0e7ff);
    color: var(--color-primary, #6366f1);
}

.nav-item--active[b-dbuz9ghnzf]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: var(--color-primary, #6366f1);
    border-radius: 0 3px 3px 0;
}

.nav-item--active:hover[b-dbuz9ghnzf] {
    background: var(--color-primary-light, #e0e7ff);
    color: var(--color-primary, #6366f1);
}

.nav-icon[b-dbuz9ghnzf] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.nav-label[b-dbuz9ghnzf] {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

/* ── Content area ── */

.content-area[b-dbuz9ghnzf] {
    flex: 1;
    overflow-y: auto;
    padding: 28px 32px;
    min-width: 0;
}

/* ── Dark mode ── */

:global([data-rame-theme="dark"]) .designer-root[b-dbuz9ghnzf] {
    background: #0f172a;
}

:global([data-rame-theme="dark"]) .designer-header[b-dbuz9ghnzf] {
    background: #1e293b;
    border-bottom-color: #334155;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

:global([data-rame-theme="dark"]) .btn-back[b-dbuz9ghnzf] {
    color: #94a3b8;
}

:global([data-rame-theme="dark"]) .btn-back:hover[b-dbuz9ghnzf] {
    background: #0f172a;
    color: #e2e8f0;
}

:global([data-rame-theme="dark"]) .agent-name[b-dbuz9ghnzf] {
    color: #f1f5f9;
}

:global([data-rame-theme="dark"]) .unsaved-pill[b-dbuz9ghnzf] {
    background: rgba(251, 191, 36, 0.2);
    color: #fcd34d;
}

:global([data-rame-theme="dark"]) .btn-save[b-dbuz9ghnzf] {
    background: #1e293b;
    border-color: #334155;
    color: #475569;
}

:global([data-rame-theme="dark"]) .btn-save--active[b-dbuz9ghnzf] {
    background: var(--color-primary, #6366f1);
    border-color: var(--color-primary, #6366f1);
    color: #ffffff;
}

:global([data-rame-theme="dark"]) .inline-toast--error[b-dbuz9ghnzf] {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

:global([data-rame-theme="dark"]) .inline-toast--success[b-dbuz9ghnzf] {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
    color: #86efac;
}

:global([data-rame-theme="dark"]) .sidebar-nav[b-dbuz9ghnzf] {
    background: #1e293b;
    border-right-color: #334155;
}

:global([data-rame-theme="dark"]) .nav-item[b-dbuz9ghnzf] {
    color: #94a3b8;
}

:global([data-rame-theme="dark"]) .nav-item:hover[b-dbuz9ghnzf] {
    background: #0f172a;
    color: #e2e8f0;
}

:global([data-rame-theme="dark"]) .nav-item--active[b-dbuz9ghnzf] {
    background: rgba(99, 102, 241, 0.18);
    color: #818cf8;
}

:global([data-rame-theme="dark"]) .nav-item--active:hover[b-dbuz9ghnzf] {
    background: rgba(99, 102, 241, 0.18);
    color: #818cf8;
}

:global([data-rame-theme="dark"]) .nav-item--active[b-dbuz9ghnzf]::before {
    background: #818cf8;
}

:global([data-rame-theme="dark"]) .saving-overlay[b-dbuz9ghnzf] {
    background: rgba(15, 23, 42, 0.82);
}

:global([data-rame-theme="dark"]) .saving-overlay__content[b-dbuz9ghnzf] {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

:global([data-rame-theme="dark"]) .saving-spinner[b-dbuz9ghnzf] {
    border-color: #334155;
    border-top-color: #818cf8;
}

:global([data-rame-theme="dark"]) .saving-overlay__text[b-dbuz9ghnzf] {
    color: #f1f5f9;
}

:global([data-rame-theme="dark"]) .saving-overlay__hint[b-dbuz9ghnzf] {
    color: #64748b;
}

/* ========== TABLET / MOBILE — HORIZONTAL TABS + FULL-WIDTH CONTENT ========== */
@media (max-width: 1024px) {
    .designer-body[b-dbuz9ghnzf] {
        flex-direction: column;
    }

    .sidebar-nav[b-dbuz9ghnzf] {
        flex-direction: row;
        width: 100%;
        height: auto;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: none;
        border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
        padding: var(--rame-space-2, 8px);
        gap: var(--rame-space-1, 4px);
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .nav-item[b-dbuz9ghnzf] {
        flex: 0 0 auto;
        flex-direction: row;
        scroll-snap-align: start;
        padding: var(--rame-space-2, 8px) var(--rame-space-3, 12px);
        white-space: nowrap;
        min-height: 40px;
    }

    .nav-icon[b-dbuz9ghnzf] {
        width: 18px;
        height: 18px;
    }

    .nav-label[b-dbuz9ghnzf] {
        font-size: 13px;
    }

    .content-area[b-dbuz9ghnzf] {
        width: 100%;
        flex: 1 1 auto;
        padding: var(--rame-space-4, 16px);
    }

    .designer-header[b-dbuz9ghnzf] {
        flex-wrap: wrap;
        gap: var(--rame-space-2, 8px);
        padding: var(--rame-space-3, 12px);
    }

    .header-left[b-dbuz9ghnzf],
    .header-right[b-dbuz9ghnzf] {
        flex: 1 1 auto;
    }

    .header-right[b-dbuz9ghnzf] {
        justify-content: flex-end;
    }
}

@media (max-width: 640px) {
    .agent-name[b-dbuz9ghnzf] {
        font-size: 14px;
    }

    .btn-save[b-dbuz9ghnzf] {
        padding: var(--rame-space-2, 8px) var(--rame-space-3, 12px);
        font-size: 13px;
    }

    .inline-toast[b-dbuz9ghnzf] {
        flex: 1 1 100%;
        order: 99;
    }
}
/* _content/Rame.Blazor.Server/Components/AI/Flows/AgentFlowDesigner.razor.rz.scp.css */
.flow-studio[b-t9ocezgvrt] {
    --flow-cat-trigger: var(--rame-primary, #0084ff);
    --flow-cat-llm: #7c3aed;
    --flow-cat-knowledge: var(--rame-accent, #00a884);
    --flow-cat-control: #475569;
    --flow-cat-action: #f59e0b;
    --flow-cat-terminal: var(--rame-success, #25d366);
    --flow-canvas-bg: var(--rame-bg-secondary, #f7f8fa);
    --flow-paper: var(--rame-bg-primary, #ffffff);
    --flow-rule: var(--rame-border-light, #e4e6eb);

    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: var(--flow-canvas-bg);
    font-family: 'DM Sans', system-ui, sans-serif;
    color: var(--rame-text-primary, #1c1e21);
}

.flow-studio-bar[b-t9ocezgvrt] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    padding: 18px 24px;
    background: var(--flow-paper);
    border-bottom: 1px solid var(--flow-rule);
    align-items: center;
}

.flow-studio-bar-left[b-t9ocezgvrt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.flow-studio-eyebrow[b-t9ocezgvrt] {
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--rame-text-tertiary, #8a8d91);
}

.flow-studio-bar-left h2[b-t9ocezgvrt] {
    margin: 0;
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--rame-text-primary, #1c1e21);
    line-height: 1.1;
}

.flow-studio-meta[b-t9ocezgvrt] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--rame-text-secondary, #65676b);
}

.flow-version-tag[b-t9ocezgvrt] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--rame-success-light, #e6f9ed);
    color: var(--rame-success-hover, #20ba5a);
    border: 1px solid var(--rame-success, #25d366);
}

.flow-version-tag--draft[b-t9ocezgvrt] {
    background: var(--rame-bg-tertiary, #f0f2f5);
    color: var(--rame-text-secondary, #65676b);
    border-color: var(--flow-rule);
}

.flow-version-pub[b-t9ocezgvrt] { font-size: 11px; }

.flow-unsaved-dot[b-t9ocezgvrt] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rame-warning, #ff9800);
    box-shadow: 0 0 0 4px rgba(255, 152, 0, 0.18);
    margin-left: 4px;
    animation: flow-pulse-b-t9ocezgvrt 1.6s ease-out infinite;
}

@keyframes flow-pulse-b-t9ocezgvrt {
    0% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.45); }
    100% { box-shadow: 0 0 0 6px rgba(255, 152, 0, 0); }
}

.flow-studio-bar-right[b-t9ocezgvrt] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.flow-studio-toggle[b-t9ocezgvrt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--flow-rule);
    background: var(--flow-paper);
    color: var(--rame-text-secondary, #65676b);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.flow-studio-toggle:hover[b-t9ocezgvrt] {
    background: var(--rame-bg-tertiary, #f0f2f5);
    color: var(--rame-text-primary, #1c1e21);
}

.flow-studio-toggle--on[b-t9ocezgvrt] {
    background: var(--rame-primary-light, #e6f3ff);
    color: var(--rame-primary, #0084ff);
    border-color: var(--rame-primary, #0084ff);
}

.flow-studio-shell[b-t9ocezgvrt] {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    flex: 1;
    overflow: hidden;
    position: relative;
}

.flow-studio-loading[b-t9ocezgvrt] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rame-text-secondary, #65676b);
    font-style: italic;
}

.flow-studio-palette[b-t9ocezgvrt] {
    width: 264px;
    background: var(--flow-paper);
    border-right: 1px solid var(--flow-rule);
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.flow-studio-palette-search input[b-t9ocezgvrt] {
    width: 100%;
    background: var(--rame-bg-secondary, #f7f8fa);
    border: 1px solid var(--flow-rule);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 12px;
    font-family: inherit;
    color: var(--rame-text-primary, #1c1e21);
}

.flow-studio-palette-search input:focus[b-t9ocezgvrt] {
    outline: none;
    background: var(--flow-paper);
    border-color: var(--rame-primary, #0084ff);
    box-shadow: 0 0 0 3px var(--rame-primary-light, #e6f3ff);
}

.flow-studio-palette-group[b-t9ocezgvrt] { display: flex; flex-direction: column; gap: 6px; }

.flow-studio-palette-group-label[b-t9ocezgvrt] {
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--rame-text-tertiary, #8a8d91);
    padding-left: 4px;
}

.flow-studio-palette-items[b-t9ocezgvrt] { display: flex; flex-direction: column; gap: 3px; }

.flow-studio-palette-item[b-t9ocezgvrt] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--rame-text-primary, #1c1e21);
    font-family: inherit;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s, transform 0.1s, box-shadow 0.1s;
}

.flow-studio-palette-item:hover[b-t9ocezgvrt] {
    background: var(--rame-bg-tertiary, #f0f2f5);
    border-color: var(--flow-rule);
    transform: translateX(2px);
}

.flow-studio-palette-item--trigger:hover[b-t9ocezgvrt] { box-shadow: inset 3px 0 0 var(--flow-cat-trigger); }
.flow-studio-palette-item--llm:hover[b-t9ocezgvrt] { box-shadow: inset 3px 0 0 var(--flow-cat-llm); }
.flow-studio-palette-item--knowledge:hover[b-t9ocezgvrt] { box-shadow: inset 3px 0 0 var(--flow-cat-knowledge); }
.flow-studio-palette-item--control:hover[b-t9ocezgvrt] { box-shadow: inset 3px 0 0 var(--flow-cat-control); }
.flow-studio-palette-item--action:hover[b-t9ocezgvrt] { box-shadow: inset 3px 0 0 var(--flow-cat-action); }
.flow-studio-palette-item--terminal:hover[b-t9ocezgvrt] { box-shadow: inset 3px 0 0 var(--flow-cat-terminal); }

.flow-studio-palette-icon[b-t9ocezgvrt] { font-size: 16px; line-height: 1; flex-shrink: 0; }
.flow-studio-palette-label[b-t9ocezgvrt] { flex: 1; line-height: 1.3; }

.flow-studio-canvas-wrap[b-t9ocezgvrt] { position: relative; overflow: hidden; min-width: 0; }

.flow-studio-connect-toast[b-t9ocezgvrt] {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--rame-text-primary, #1c1e21);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    animation: flow-toast-in-b-t9ocezgvrt 0.18s ease-out;
    max-width: 90%;
}

.flow-studio-connect-toast code[b-t9ocezgvrt] {
    background: rgba(255, 255, 255, 0.1);
    padding: 1px 6px;
    border-radius: 3px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
}

.flow-studio-connect-toast button[b-t9ocezgvrt] {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    flex-shrink: 0;
}

.flow-studio-connect-toast button:hover[b-t9ocezgvrt] { background: rgba(255, 255, 255, 0.22); }

@keyframes flow-toast-in-b-t9ocezgvrt {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

.flow-studio-empty[b-t9ocezgvrt] {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 14px 14px, rgba(15, 23, 42, 0.07) 1px, transparent 1.5px) 0 0 / 28px 28px,
        var(--flow-canvas-bg);
}

.flow-studio-empty-frame[b-t9ocezgvrt] {
    max-width: 520px;
    background: var(--flow-paper);
    border: 1px solid var(--flow-rule);
    border-radius: 16px;
    padding: 36px 40px;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 24px 48px -24px rgba(15, 23, 42, 0.16);
    text-align: left;
}

.flow-studio-empty-eyebrow[b-t9ocezgvrt] {
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--rame-primary, #0084ff);
}

.flow-studio-empty-frame h3[b-t9ocezgvrt] {
    margin: 8px 0 12px;
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: var(--rame-text-primary, #1c1e21);
}

.flow-studio-empty-frame p[b-t9ocezgvrt] {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--rame-text-secondary, #65676b);
}

.flow-studio-empty-action[b-t9ocezgvrt] {
    background: var(--rame-text-primary, #1c1e21);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: -0.005em;
    transition: transform 0.1s, background 0.1s;
}

.flow-studio-empty-action:hover[b-t9ocezgvrt] { background: #000; transform: translateY(-1px); }

.flow-studio-empty-actions[b-t9ocezgvrt] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.flow-studio-empty-action--alt[b-t9ocezgvrt] {
    background: var(--rame-bg-primary, #ffffff);
    color: var(--rame-text-primary, #1c1e21);
    border: 1px solid var(--rame-border-light, #e4e6eb);
}

.flow-studio-empty-action--alt:hover[b-t9ocezgvrt] {
    background: var(--rame-bg-secondary, #f7f8fa);
    border-color: var(--rame-text-primary, #1c1e21);
    transform: translateY(-1px);
}

.flow-studio-canvas-scroll[b-t9ocezgvrt] {
    position: absolute;
    inset: 0;
    overflow: auto;
    background:
        radial-gradient(circle at 14px 14px, rgba(15, 23, 42, 0.07) 1px, transparent 1.5px) 0 0 / 28px 28px,
        var(--flow-canvas-bg);
}

.flow-studio-canvas[b-t9ocezgvrt] { position: relative; min-width: 100%; min-height: 100%; }

/* Rubber-band selection overlay drawn by flowCanvasInterop while dragging on the
   empty canvas. Translucent fill + accent border. */
[b-t9ocezgvrt] .flow-rubberband {
    background: rgba(0, 132, 255, 0.12);
    border: 1.5px dashed rgba(0, 132, 255, 0.65);
    border-radius: 4px;
    pointer-events: none;
}

.flow-studio-edges[b-t9ocezgvrt] { position: absolute; inset: 0; pointer-events: none; z-index: 1; }

.flow-studio-edges[b-t9ocezgvrt]  g.flow-studio-edge { pointer-events: auto; cursor: pointer; }

.flow-studio-edges[b-t9ocezgvrt]  .flow-studio-edge-stroke {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    transition: stroke-width 0.12s, opacity 0.12s;
    opacity: 0.78;
}

.flow-studio-edges[b-t9ocezgvrt]  .flow-studio-edge-hit {
    fill: none;
    stroke: transparent;
    stroke-width: 16;
    stroke-linecap: round;
}

.flow-studio-edges[b-t9ocezgvrt]  .flow-studio-edge--trigger .flow-studio-edge-stroke { stroke: var(--flow-cat-trigger); }
.flow-studio-edges[b-t9ocezgvrt]  .flow-studio-edge--llm .flow-studio-edge-stroke { stroke: var(--flow-cat-llm); }
.flow-studio-edges[b-t9ocezgvrt]  .flow-studio-edge--knowledge .flow-studio-edge-stroke { stroke: var(--flow-cat-knowledge); }
.flow-studio-edges[b-t9ocezgvrt]  .flow-studio-edge--control .flow-studio-edge-stroke { stroke: var(--flow-cat-control); }
.flow-studio-edges[b-t9ocezgvrt]  .flow-studio-edge--action .flow-studio-edge-stroke { stroke: var(--flow-cat-action); }
.flow-studio-edges[b-t9ocezgvrt]  .flow-studio-edge--terminal .flow-studio-edge-stroke { stroke: var(--flow-cat-terminal); }

.flow-studio-edges[b-t9ocezgvrt]  g.flow-studio-edge:hover .flow-studio-edge-stroke {
    stroke-width: 3.5;
    opacity: 1;
}

.flow-studio-edges[b-t9ocezgvrt]  .flow-studio-edge-label {
    fill: var(--rame-text-secondary, #65676b);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    text-anchor: middle;
    paint-order: stroke;
    stroke: var(--flow-canvas-bg);
    stroke-width: 4;
    stroke-linejoin: round;
    pointer-events: none;
}

.flow-studio-edges[b-t9ocezgvrt]  .flow-studio-pending-pulse {
    fill: var(--rame-primary, #0084ff);
    fill-opacity: 0.3;
    stroke: var(--rame-primary, #0084ff);
    stroke-width: 2;
    animation: flow-handle-pulse-b-t9ocezgvrt 1.2s ease-out infinite;
}

@keyframes flow-handle-pulse-b-t9ocezgvrt {
    0% { r: 8; fill-opacity: 0.45; }
    100% { r: 16; fill-opacity: 0; }
}

.flow-studio-side[b-t9ocezgvrt] {
    background: var(--flow-paper);
    border-left: 1px solid var(--flow-rule);
    overflow-y: auto;
    width: 340px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.flow-studio-side--config[b-t9ocezgvrt] { width: 380px; padding: 0; }
/* _content/Rame.Blazor.Server/Components/AI/Flows/FlowEdgesPanel.razor.rz.scp.css */
.flow-edges-panel[b-y9aqyr8n2u] {
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.flow-edges-header[b-y9aqyr8n2u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flow-edges-header h4[b-y9aqyr8n2u] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--rame-text-primary, #1c1e21);
}

.btn-add-edge[b-y9aqyr8n2u] {
    background: var(--rame-primary, #0084ff);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.btn-add-edge:disabled[b-y9aqyr8n2u] {
    opacity: 0.5;
    cursor: not-allowed;
}

.flow-edges-empty[b-y9aqyr8n2u] {
    margin: 0;
    font-size: 12px;
    color: var(--rame-text-secondary, #65676b);
    background: var(--rame-bg-tertiary, #f0f2f5);
    padding: 12px;
    border-radius: 8px;
    line-height: 1.5;
}

.flow-edges-list[b-y9aqyr8n2u] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.flow-edge-row[b-y9aqyr8n2u] {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 8px;
    background: var(--rame-bg-secondary, #f7f8fa);
    border-radius: 8px;
}

.flow-edge-segment[b-y9aqyr8n2u] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.flow-edge-segment-label[b-y9aqyr8n2u] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--rame-text-tertiary, #8a8d91);
}

.flow-edge-segment select[b-y9aqyr8n2u] {
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 12px;
    margin-bottom: 2px;
}

.flow-edge-arrow[b-y9aqyr8n2u] {
    color: var(--rame-text-tertiary, #8a8d91);
    font-size: 18px;
    align-self: center;
}
/* _content/Rame.Blazor.Server/Components/AI/Flows/FlowExecutionInspector.razor.rz.scp.css */
.flow-execution-inspector[b-itwzp249og] {
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.flow-execution-inspector-header[b-itwzp249og] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
}

.flow-execution-inspector-header h4[b-itwzp249og] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--rame-text-primary, #1c1e21);
}

.flow-execution-inspector-header input[b-itwzp249og] {
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.flow-execution-inspector-error[b-itwzp249og] {
    background: var(--rame-error-light, #ffebee);
    color: var(--rame-error-text, #c62828);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
}

.flow-execution-inspector-empty[b-itwzp249og] {
    margin: 0;
    font-size: 12px;
    color: var(--rame-text-tertiary, #8a8d91);
    font-style: italic;
}

.flow-execution-list[b-itwzp249og] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.flow-execution-row[b-itwzp249og] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    background: var(--rame-bg-secondary, #f7f8fa);
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
}

.flow-execution-row.selected[b-itwzp249og] {
    border-color: var(--rame-primary, #0084ff);
    background: var(--rame-primary-light, #e6f3ff);
}

.flow-execution-status[b-itwzp249og] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    color: #ffffff;
}

.flow-execution-status.status-running[b-itwzp249og] { background: var(--rame-info, #2196f3); }
.flow-execution-status.status-completed[b-itwzp249og] { background: var(--rame-text-tertiary, #8a8d91); }
.flow-execution-status.status-escalated[b-itwzp249og] { background: var(--rame-warning, #ff9800); }
.flow-execution-status.status-resolved[b-itwzp249og] { background: var(--rame-success, #25d366); }
.flow-execution-status.status-stopped[b-itwzp249og] { background: var(--rame-error, #ef5350); }

.flow-execution-summary[b-itwzp249og] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.flow-execution-version[b-itwzp249og] {
    font-size: 11px;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--rame-text-primary, #1c1e21);
}

.flow-execution-times[b-itwzp249og] {
    font-size: 11px;
    color: var(--rame-text-secondary, #65676b);
}

.flow-execution-current-node[b-itwzp249og] {
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--rame-text-tertiary, #8a8d91);
}

.flow-execution-detail[b-itwzp249og] {
    border-top: 1px solid var(--rame-border-light, #e4e6eb);
    padding-top: 12px;
}

.flow-execution-detail h5[b-itwzp249og] {
    margin: 0 0 8px 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rame-text-secondary, #65676b);
}

.flow-execution-state-json[b-itwzp249og] {
    background: var(--rame-bg-tertiary, #f0f2f5);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 200px;
    overflow-y: auto;
    margin: 0 0 14px 0;
    color: var(--rame-text-primary, #1c1e21);
}

.flow-execution-log-list[b-itwzp249og] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 280px;
    overflow-y: auto;
}

.flow-execution-log-row[b-itwzp249og] {
    display: grid;
    grid-template-columns: 90px 1fr auto auto;
    gap: 10px;
    padding: 6px 10px;
    background: var(--rame-bg-secondary, #f7f8fa);
    border-radius: 4px;
    font-size: 11px;
    align-items: center;
    border-left: 3px solid transparent;
}

.flow-execution-log-row.result-failed[b-itwzp249og] {
    border-left-color: var(--rame-error, #ef5350);
    background: var(--rame-error-light, #ffebee);
}

.flow-execution-log-row.result-yielded[b-itwzp249og] {
    border-left-color: var(--rame-info, #2196f3);
}

.flow-execution-log-row.result-branched[b-itwzp249og] {
    border-left-color: var(--rame-warning, #ff9800);
}

.flow-execution-log-time[b-itwzp249og] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--rame-text-tertiary, #8a8d91);
}

.flow-execution-log-node code[b-itwzp249og] {
    font-size: 10px;
    color: var(--rame-text-tertiary, #8a8d91);
}

.flow-execution-log-result[b-itwzp249og] {
    font-weight: 600;
    color: var(--rame-text-secondary, #65676b);
}

.flow-execution-log-error[b-itwzp249og] {
    color: var(--rame-error, #ef5350);
    cursor: help;
}
/* _content/Rame.Blazor.Server/Components/AI/Flows/FlowNodeCard.razor.rz.scp.css */
.flow-node[b-mwgtkq9io7] {
    position: absolute;
    width: 280px;
    height: 132px;
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: 12px;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 8px 16px -10px rgba(15, 23, 42, 0.18);
    cursor: pointer;
    z-index: 2;
    font-family: 'DM Sans', system-ui, sans-serif;
    transition: transform 0.12s ease, box-shadow 0.14s ease, border-color 0.14s ease;
    user-select: none;
    overflow: visible;
}

.flow-node:hover[b-mwgtkq9io7] {
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.05), 0 14px 28px -12px rgba(15, 23, 42, 0.24);
}

.flow-node--selected[b-mwgtkq9io7] {
    border-color: var(--rame-text-primary, #1c1e21);
    box-shadow: 0 0 0 2px var(--rame-text-primary, #1c1e21), 0 14px 30px -12px rgba(15, 23, 42, 0.28);
}

.flow-node--connecting-from[b-mwgtkq9io7] {
    border-color: var(--rame-primary, #0084ff);
    box-shadow: 0 0 0 2px var(--rame-primary, #0084ff), 0 0 0 6px var(--rame-primary-light, #e6f3ff);
}

.flow-node--connect-target[b-mwgtkq9io7] {
    border-style: dashed;
    border-color: var(--rame-primary, #0084ff);
}

.flow-node-marker[b-mwgtkq9io7] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.flow-node-marker[data-category="trigger"][b-mwgtkq9io7] { background: linear-gradient(90deg, var(--rame-primary, #0084ff), var(--rame-primary-dark, #0066cc)); }
.flow-node-marker[data-category="llm"][b-mwgtkq9io7] { background: linear-gradient(90deg, #8b5cf6, #6d28d9); }
.flow-node-marker[data-category="knowledge"][b-mwgtkq9io7] { background: linear-gradient(90deg, var(--rame-accent, #00a884), #007a60); }
.flow-node-marker[data-category="control"][b-mwgtkq9io7] { background: linear-gradient(90deg, #64748b, #334155); }
.flow-node-marker[data-category="action"][b-mwgtkq9io7] { background: linear-gradient(90deg, #fbbf24, #d97706); }
.flow-node-marker[data-category="terminal"][b-mwgtkq9io7] { background: linear-gradient(90deg, var(--rame-success, #25d366), var(--rame-success-hover, #20ba5a)); }

.flow-node-head[b-mwgtkq9io7] {
    position: absolute;
    top: 12px;
    left: 16px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    user-select: none;
}

/* The whole card is draggable; inner buttons override with their own cursor. */
.flow-node[b-mwgtkq9io7] {
    cursor: grab;
    user-select: none;
}

.flow-node button[b-mwgtkq9io7],
.flow-node .te-wrapper[b-mwgtkq9io7],
.flow-node input[b-mwgtkq9io7],
.flow-node select[b-mwgtkq9io7],
.flow-node textarea[b-mwgtkq9io7] {
    cursor: auto;
}

.flow-node button[b-mwgtkq9io7] {
    cursor: pointer;
}

.flow-node--dragging[b-mwgtkq9io7] {
    cursor: grabbing;
    z-index: 30;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
    opacity: 0.95;
    transition: none;
}

.flow-node-eyebrow[b-mwgtkq9io7] {
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--rame-text-tertiary, #8a8d91);
}

.flow-node--trigger .flow-node-eyebrow[b-mwgtkq9io7] { color: var(--rame-primary, #0084ff); }
.flow-node--llm .flow-node-eyebrow[b-mwgtkq9io7] { color: #7c3aed; }
.flow-node--knowledge .flow-node-eyebrow[b-mwgtkq9io7] { color: var(--rame-accent, #00a884); }
.flow-node--control .flow-node-eyebrow[b-mwgtkq9io7] { color: #475569; }
.flow-node--action .flow-node-eyebrow[b-mwgtkq9io7] { color: #d97706; }
.flow-node--terminal .flow-node-eyebrow[b-mwgtkq9io7] { color: var(--rame-success-hover, #20ba5a); }

.flow-node-trash[b-mwgtkq9io7] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--rame-text-tertiary, #8a8d91);
    cursor: pointer;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.12s, background 0.12s, color 0.12s;
}

.flow-node:hover .flow-node-trash[b-mwgtkq9io7] { opacity: 1; }

.flow-node-trash:hover[b-mwgtkq9io7] {
    background: var(--rame-error-light, #ffebee);
    color: var(--rame-error, #ef5350);
}

.flow-node-body[b-mwgtkq9io7] {
    position: absolute;
    top: 36px;
    left: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.flow-node-icon[b-mwgtkq9io7] {
    font-size: 22px;
    line-height: 1;
    margin-bottom: 4px;
}

.flow-node-title[b-mwgtkq9io7] {
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--rame-text-primary, #1c1e21);
    line-height: 1.2;
}

.flow-node-id[b-mwgtkq9io7] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--rame-text-tertiary, #8a8d91);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: transparent;
    padding: 0;
}

.flow-node-input-handle[b-mwgtkq9io7] {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flow-node-input-handle .flow-node-handle-dot[b-mwgtkq9io7] {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--rame-bg-primary, #ffffff);
    border: 2px solid var(--rame-text-tertiary, #8a8d91);
    transition: transform 0.12s, background 0.12s, border-color 0.12s;
}

.flow-node-input-handle:hover .flow-node-handle-dot[b-mwgtkq9io7] {
    transform: scale(1.3);
    border-color: var(--rame-text-primary, #1c1e21);
}

.flow-node-input-handle--target .flow-node-handle-dot[b-mwgtkq9io7] {
    border-color: var(--rame-primary, #0084ff);
    background: var(--rame-primary-light, #e6f3ff);
    animation: flow-handle-blink-b-mwgtkq9io7 1.4s ease-in-out infinite;
}

@keyframes flow-handle-blink-b-mwgtkq9io7 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.25); }
}

.flow-node-output-stack[b-mwgtkq9io7] {
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 22px;
}

.flow-node-output-handle[b-mwgtkq9io7] {
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.flow-node-output-handle .flow-node-handle-dot[b-mwgtkq9io7] {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--rame-text-primary, #1c1e21);
    border: 2px solid var(--rame-bg-primary, #ffffff);
    box-shadow: 0 0 0 1px var(--rame-text-primary, #1c1e21);
    transition: transform 0.12s, background 0.12s;
}

.flow-node--trigger .flow-node-output-handle .flow-node-handle-dot[b-mwgtkq9io7] { background: var(--rame-primary, #0084ff); box-shadow: 0 0 0 1px var(--rame-primary, #0084ff); }
.flow-node--llm .flow-node-output-handle .flow-node-handle-dot[b-mwgtkq9io7] { background: #7c3aed; box-shadow: 0 0 0 1px #7c3aed; }
.flow-node--knowledge .flow-node-output-handle .flow-node-handle-dot[b-mwgtkq9io7] { background: var(--rame-accent, #00a884); box-shadow: 0 0 0 1px var(--rame-accent, #00a884); }
.flow-node--control .flow-node-output-handle .flow-node-handle-dot[b-mwgtkq9io7] { background: #475569; box-shadow: 0 0 0 1px #475569; }
.flow-node--action .flow-node-output-handle .flow-node-handle-dot[b-mwgtkq9io7] { background: #d97706; box-shadow: 0 0 0 1px #d97706; }
.flow-node--terminal .flow-node-output-handle .flow-node-handle-dot[b-mwgtkq9io7] { background: var(--rame-success, #25d366); box-shadow: 0 0 0 1px var(--rame-success, #25d366); }

.flow-node-output-handle:hover .flow-node-handle-dot[b-mwgtkq9io7] {
    transform: scale(1.35);
}

.flow-node-handle-label[b-mwgtkq9io7] {
    position: absolute;
    bottom: 22px;
    white-space: nowrap;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    color: var(--rame-text-secondary, #65676b);
    background: var(--rame-bg-primary, #ffffff);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--rame-border-light, #e4e6eb);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s, transform 0.12s;
    pointer-events: none;
}

.flow-node-output-handle:hover .flow-node-handle-label[b-mwgtkq9io7] {
    opacity: 1;
    transform: translateY(0);
}

.flow-node--connecting-from .flow-node-output-handle .flow-node-handle-dot[b-mwgtkq9io7] {
    transform: scale(1.4);
    box-shadow: 0 0 0 4px var(--rame-primary-light, #e6f3ff);
}
/* _content/Rame.Blazor.Server/Components/AI/Flows/FlowNodeConfigPanel.razor.rz.scp.css */
.flow-config-panel[b-cyc422eod3] {
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.flow-config-panel-empty[b-cyc422eod3] {
    padding: 32px;
    text-align: center;
    color: var(--rame-text-secondary, #65676b);
}

.flow-config-panel-empty h4[b-cyc422eod3] {
    margin: 0 0 8px 0;
    color: var(--rame-text-primary, #1c1e21);
    font-size: 14px;
}

.flow-config-panel-empty p[b-cyc422eod3] {
    margin: 0;
    font-size: 12px;
}

.flow-config-panel-header[b-cyc422eod3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
    background: var(--rame-bg-secondary, #f7f8fa);
}

.flow-config-icon[b-cyc422eod3] {
    font-size: 22px;
    line-height: 1;
}

.flow-config-info[b-cyc422eod3] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.flow-config-label[b-cyc422eod3] {
    font-size: 14px;
    font-weight: 600;
    color: var(--rame-text-primary, #1c1e21);
}

.flow-config-id[b-cyc422eod3] {
    font-size: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--rame-text-tertiary, #8a8d91);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-delete-node[b-cyc422eod3] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--rame-text-tertiary, #8a8d91);
    font-size: 18px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.btn-delete-node:hover[b-cyc422eod3] {
    background: var(--rame-error-light, #ffebee);
    color: var(--rame-error, #ef5350);
}

.flow-config-panel-body[b-cyc422eod3] {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
}

.flow-config-no-fields[b-cyc422eod3] {
    margin: 0;
    font-size: 12px;
    color: var(--rame-text-tertiary, #8a8d91);
    font-style: italic;
    padding: 16px;
    background: var(--rame-bg-tertiary, #f0f2f5);
    border-radius: 8px;
    text-align: center;
}
/* _content/Rame.Blazor.Server/Components/AI/Flows/FlowOperandPicker.razor.rz.scp.css */
.op-picker[b-hfi9gj2ow7] {
    position: relative;
    width: 100%;
}

.op-picker-trigger[b-hfi9gj2ow7] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    color: var(--rame-text-primary, #1c1e21);
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s;
    text-align: left;
}

.op-picker-trigger:hover[b-hfi9gj2ow7] {
    border-color: var(--rame-primary, #0084ff);
}

.op-picker--open .op-picker-trigger[b-hfi9gj2ow7] {
    border-color: var(--rame-primary, #0084ff);
    box-shadow: 0 0 0 2px var(--rame-primary-light, #e6f3ff);
}

.op-picker-placeholder[b-hfi9gj2ow7] {
    flex: 1 1 auto;
    color: var(--rame-text-tertiary, #8a8d91);
    font-style: italic;
}

.op-picker-trigger-scope[b-hfi9gj2ow7] {
    flex: 0 0 auto;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.6;
}

.op-picker-trigger-name[b-hfi9gj2ow7] {
    flex: 0 0 auto;
    font-weight: 600;
}

.op-picker-trigger-path[b-hfi9gj2ow7] {
    flex: 1 1 auto;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--rame-text-tertiary, #8a8d91);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.op-picker-caret[b-hfi9gj2ow7] {
    flex: 0 0 auto;
    color: var(--rame-text-tertiary, #8a8d91);
    font-size: 11px;
}

.op-picker-scope-Flow[b-hfi9gj2ow7],
.op-picker-scope-flow[b-hfi9gj2ow7] {
    background: #e3f2fd;
    color: #0d47a1;
    border: 1px solid #90caf9;
}

.op-picker-scope-Lead[b-hfi9gj2ow7],
.op-picker-scope-lead[b-hfi9gj2ow7] {
    background: #e8f5e9;
    color: #1b5e20;
    border: 1px solid #a5d6a7;
}

.op-picker-scope-Conversation[b-hfi9gj2ow7],
.op-picker-scope-conversation[b-hfi9gj2ow7] {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffcc80;
}

.op-picker-scope-AdReferral[b-hfi9gj2ow7],
.op-picker-scope-ad_referral[b-hfi9gj2ow7] {
    background: #fce4ec;
    color: #880e4f;
    border: 1px solid #f8bbd0;
}

.op-picker-scope-System[b-hfi9gj2ow7],
.op-picker-scope-system[b-hfi9gj2ow7] {
    background: #f3e5f5;
    color: #4a148c;
    border: 1px solid #ce93d8;
}

.op-picker-popover[b-hfi9gj2ow7] {
    position: absolute;
    z-index: 100;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 360px;
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.op-picker-search[b-hfi9gj2ow7] {
    padding: 8px 10px;
    border: none;
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
    font-size: 13px;
    background: var(--rame-bg-secondary, #f7f8fa);
    color: var(--rame-text-primary, #1c1e21);
    outline: none;
}

.op-picker-search:focus[b-hfi9gj2ow7] {
    background: var(--rame-bg-primary, #ffffff);
}

.op-picker-groups[b-hfi9gj2ow7] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 0;
}

.op-picker-group[b-hfi9gj2ow7] {
    display: flex;
    flex-direction: column;
}

.op-picker-group-header[b-hfi9gj2ow7] {
    padding: 6px 10px 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--rame-text-tertiary, #8a8d91);
}

.op-picker-option[b-hfi9gj2ow7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    color: var(--rame-text-primary, #1c1e21);
    transition: background 0.08s;
}

.op-picker-option:hover[b-hfi9gj2ow7] {
    background: var(--rame-primary-light, #e6f3ff);
}

.op-picker-option--current[b-hfi9gj2ow7] {
    background: var(--rame-primary-light, #e6f3ff);
    font-weight: 600;
}

.op-picker-option-name[b-hfi9gj2ow7] {
    flex: 0 1 auto;
    font-weight: 500;
}

.op-picker-option-meta[b-hfi9gj2ow7] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.op-picker-option-path[b-hfi9gj2ow7] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--rame-text-tertiary, #8a8d91);
    background: var(--rame-bg-secondary, #f7f8fa);
    padding: 1px 6px;
    border-radius: 4px;
}

.op-picker-option-type[b-hfi9gj2ow7] {
    font-size: 10px;
    color: var(--rame-text-tertiary, #8a8d91);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.op-picker-empty[b-hfi9gj2ow7] {
    padding: 6px 10px;
    font-size: 12px;
    font-style: italic;
    color: var(--rame-text-tertiary, #8a8d91);
}
/* _content/Rame.Blazor.Server/Components/AI/Flows/FlowPublishButton.razor.rz.scp.css */
.flow-publish-wrapper[b-q4z6fz0gsy] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
}

.btn-publish[b-q4z6fz0gsy] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--rame-success, #25d366);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, transform 0.08s;
}

.btn-publish:hover:not(:disabled)[b-q4z6fz0gsy] {
    background: var(--rame-success-hover, #20ba5a);
    transform: translateY(-1px);
}

.btn-publish:disabled[b-q4z6fz0gsy] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-publish-icon[b-q4z6fz0gsy] {
    font-size: 14px;
    line-height: 1;
}

.spinner[b-q4z6fz0gsy] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin-b-q4z6fz0gsy 0.7s linear infinite;
}

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

.flow-publish-errors[b-q4z6fz0gsy] {
    width: 100%;
    background: var(--rame-error-light, #ffebee);
    border: 1px solid var(--rame-error-border, #ffcdd2);
    border-left: 3px solid var(--rame-error, #ef5350);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 12px;
    color: var(--rame-error-text, #c62828);
}

.flow-publish-errors strong[b-q4z6fz0gsy] {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
}

.flow-publish-errors ul[b-q4z6fz0gsy] {
    margin: 0;
    padding-left: 18px;
    line-height: 1.6;
}

.flow-publish-errors code[b-q4z6fz0gsy] {
    background: rgba(198, 40, 40, 0.1);
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.flow-publish-success[b-q4z6fz0gsy] {
    background: var(--rame-success-light, #e6f9ed);
    border: 1px solid var(--rame-success, #25d366);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--rame-success-hover, #20ba5a);
    font-weight: 500;
}
/* _content/Rame.Blazor.Server/Components/AI/Flows/FlowVariablesPanel.razor.rz.scp.css */
.flow-variables-panel[b-6gdm6g7t5j] {
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.flow-variables-header[b-6gdm6g7t5j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flow-variables-header h4[b-6gdm6g7t5j] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--rame-text-primary, #1c1e21);
}

.btn-add-var[b-6gdm6g7t5j] {
    background: var(--rame-primary, #0084ff);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}

.btn-add-var:hover[b-6gdm6g7t5j] {
    background: var(--rame-primary-hover, #0073e6);
}

.flow-variables-empty[b-6gdm6g7t5j] {
    margin: 0;
    font-size: 12px;
    color: var(--rame-text-secondary, #65676b);
    line-height: 1.5;
    padding: 10px 12px;
    background: var(--rame-bg-tertiary, #f0f2f5);
    border-radius: 8px;
}

.flow-variables-empty code[b-6gdm6g7t5j],
.flow-variables-hint code[b-6gdm6g7t5j] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    background: var(--rame-bg-primary, #ffffff);
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid var(--rame-border-light, #e4e6eb);
    color: var(--rame-text-primary, #1c1e21);
}

.flow-variables-hint[b-6gdm6g7t5j] {
    margin: 0 0 4px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--rame-text-secondary, #65676b);
    background: var(--rame-info-light, #e3f2fd);
    border-left: 3px solid var(--rame-info, #2196f3);
    padding: 8px 12px;
    border-radius: 6px;
}

.flow-variables-list[b-6gdm6g7t5j] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.flow-variable-row[b-6gdm6g7t5j] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: var(--rame-bg-secondary, #f7f8fa);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: 8px;
}

.var-row-top[b-6gdm6g7t5j] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.var-row-top .var-name[b-6gdm6g7t5j] {
    flex: 1 1 auto;
    min-width: 0;
}

.var-row-meta[b-6gdm6g7t5j] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.var-row-meta .var-type[b-6gdm6g7t5j] {
    flex: 1 1 120px;
    min-width: 0;
}

.var-row-mapping[b-6gdm6g7t5j] {
    border-top: 1px dashed var(--rame-border-light, #e4e6eb);
    padding-top: 8px;
}

.var-row-mapping .var-opportunity-label[b-6gdm6g7t5j] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.var-opportunity-caption[b-6gdm6g7t5j] {
    font-size: 11px;
    font-weight: 500;
    color: var(--rame-text-secondary, #65676b);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.flow-variable-row .var-name[b-6gdm6g7t5j],
.flow-variable-row .var-type[b-6gdm6g7t5j],
.flow-variable-row .var-opportunity-property[b-6gdm6g7t5j] {
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 13px;
    color: var(--rame-text-primary, #1c1e21);
    width: 100%;
    box-sizing: border-box;
}

.flow-variable-row .var-name:focus[b-6gdm6g7t5j],
.flow-variable-row .var-type:focus[b-6gdm6g7t5j],
.flow-variable-row .var-opportunity-property:focus[b-6gdm6g7t5j] {
    outline: none;
    border-color: var(--rame-primary, #0084ff);
    box-shadow: 0 0 0 2px var(--rame-primary-light, #e6f3ff);
}

.var-required[b-6gdm6g7t5j] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--rame-text-secondary, #65676b);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    flex: 0 0 auto;
}

.var-required input[type="checkbox"][b-6gdm6g7t5j] {
    margin: 0;
}

.var-usage-badge[b-6gdm6g7t5j] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--rame-primary-light, #e6f3ff);
    color: var(--rame-primary, #0084ff);
    white-space: nowrap;
    flex: 0 0 auto;
    margin-left: auto;
}

.var-usage-badge.var-usage-zero[b-6gdm6g7t5j] {
    background: var(--rame-bg-tertiary, #f0f2f5);
    color: var(--rame-text-tertiary, #8a8d91);
}

.btn-delete-var[b-6gdm6g7t5j] {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--rame-text-tertiary, #8a8d91);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.btn-delete-var:hover[b-6gdm6g7t5j] {
    background: var(--rame-error-light, #ffebee);
    color: var(--rame-error, #ef5350);
    border-color: var(--rame-error, #ef5350);
}
/* _content/Rame.Blazor.Server/Components/AI/Flows/FlowVersionsPanel.razor.rz.scp.css */
.flow-versions-panel[b-r18csyqz17] {
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: 10px;
    padding: 16px;
}

.flow-versions-panel h4[b-r18csyqz17] {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--rame-text-primary, #1c1e21);
}

.flow-versions-empty[b-r18csyqz17] {
    margin: 0;
    font-size: 12px;
    color: var(--rame-text-tertiary, #8a8d91);
    font-style: italic;
}

.flow-versions-list[b-r18csyqz17] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.flow-version-row[b-r18csyqz17] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--rame-bg-secondary, #f7f8fa);
    border-radius: 6px;
    border-left: 3px solid transparent;
}

.flow-version-row.is-active[b-r18csyqz17] {
    border-left-color: var(--rame-success, #25d366);
    background: var(--rame-success-light, #e6f9ed);
}

.flow-version-tag[b-r18csyqz17] {
    font-size: 11px;
    font-weight: 700;
    color: var(--rame-text-primary, #1c1e21);
    background: var(--rame-bg-primary, #ffffff);
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--rame-border-light, #e4e6eb);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.flow-version-meta[b-r18csyqz17] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.flow-version-date[b-r18csyqz17] {
    font-size: 12px;
    color: var(--rame-text-primary, #1c1e21);
}

.flow-version-author[b-r18csyqz17] {
    font-size: 11px;
    color: var(--rame-text-tertiary, #8a8d91);
}

.flow-version-active-pill[b-r18csyqz17] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--rame-success, #25d366);
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 999px;
}
/* _content/Rame.Blazor.Server/Components/AI/Flows/TemplateAwareTextEditor.razor.rz.scp.css */
.te-wrapper[b-bkzqncs01h] {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.te-row[b-bkzqncs01h] {
    display: flex;
    align-items: stretch;
    gap: 6px;
    width: 100%;
}

[b-bkzqncs01h] .te-editor {
    flex: 1 1 auto;
    min-height: 80px;
    padding: 8px 10px;
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    color: var(--rame-text-primary, #1c1e21);
    outline: none;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-y: auto;
    max-height: 320px;
    cursor: text;
}

.te-singleline[b-bkzqncs01h]  .te-editor {
    min-height: 36px;
    max-height: 36px;
    overflow-y: hidden;
}

[b-bkzqncs01h] .te-editor:focus,
[b-bkzqncs01h] .te-editor:focus-within {
    border-color: var(--rame-primary, #0084ff);
    box-shadow: 0 0 0 2px var(--rame-primary-light, #e6f3ff);
}

[b-bkzqncs01h] .te-editor.te-empty::before {
    content: attr(aria-placeholder);
    color: var(--rame-text-tertiary, #8a8d91);
    pointer-events: none;
    display: inline-block;
}

[b-bkzqncs01h] .te-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 8px;
    margin: 0 2px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
    cursor: default;
    user-select: none;
    vertical-align: baseline;
    white-space: nowrap;
}

[b-bkzqncs01h] .te-chip::before {
    content: "•";
    margin-right: 4px;
    opacity: 0.6;
}

[b-bkzqncs01h] .te-chip-flow {
    background: #e3f2fd;
    color: #0d47a1;
    border: 1px solid #90caf9;
}

[b-bkzqncs01h] .te-chip-lead {
    background: #e8f5e9;
    color: #1b5e20;
    border: 1px solid #a5d6a7;
}

[b-bkzqncs01h] .te-chip-conversation {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffcc80;
}

[b-bkzqncs01h] .te-chip-ad_referral {
    background: #fce4ec;
    color: #880e4f;
    border: 1px solid #f8bbd0;
}

[b-bkzqncs01h] .te-chip-system {
    background: #f3e5f5;
    color: #4a148c;
    border: 1px solid #ce93d8;
}

.te-picker-button[b-bkzqncs01h] {
    flex: 0 0 auto;
    align-self: flex-start;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--rame-border-light, #e4e6eb);
    background: var(--rame-bg-secondary, #f7f8fa);
    color: var(--rame-text-secondary, #65676b);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.te-picker-button:hover[b-bkzqncs01h] {
    background: var(--rame-primary-light, #e6f3ff);
    color: var(--rame-primary, #0084ff);
    border-color: var(--rame-primary, #0084ff);
}

.te-picker-popover[b-bkzqncs01h] {
    position: absolute;
    z-index: 100;
    top: 100%;
    right: 0;
    margin-top: 4px;
    width: 320px;
    max-height: 360px;
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.te-picker-search[b-bkzqncs01h] {
    padding: 8px 10px;
    border: none;
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
    font-size: 13px;
    background: var(--rame-bg-secondary, #f7f8fa);
    color: var(--rame-text-primary, #1c1e21);
    outline: none;
}

.te-picker-search:focus[b-bkzqncs01h] {
    background: var(--rame-bg-primary, #ffffff);
}

.te-picker-groups[b-bkzqncs01h] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 0;
}

.te-picker-group[b-bkzqncs01h] {
    display: flex;
    flex-direction: column;
}

.te-picker-group-header[b-bkzqncs01h] {
    padding: 6px 10px 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--rame-text-tertiary, #8a8d91);
}

.te-picker-option[b-bkzqncs01h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    color: var(--rame-text-primary, #1c1e21);
    transition: background 0.08s;
}

.te-picker-option:hover[b-bkzqncs01h] {
    background: var(--rame-primary-light, #e6f3ff);
}

.te-picker-option-name[b-bkzqncs01h] {
    font-weight: 500;
}

.te-picker-option-type[b-bkzqncs01h] {
    font-size: 10px;
    color: var(--rame-text-tertiary, #8a8d91);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.te-picker-empty[b-bkzqncs01h] {
    padding: 6px 10px;
    font-size: 12px;
    font-style: italic;
    color: var(--rame-text-tertiary, #8a8d91);
}

.te-picker-footer[b-bkzqncs01h] {
    padding: 6px 10px;
    border-top: 1px solid var(--rame-border-light, #e4e6eb);
    display: flex;
    justify-content: flex-end;
}

.te-picker-close[b-bkzqncs01h] {
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: 6px;
    font-size: 12px;
    color: var(--rame-text-secondary, #65676b);
    cursor: pointer;
}

.te-picker-close:hover[b-bkzqncs01h] {
    background: var(--rame-bg-secondary, #f7f8fa);
    color: var(--rame-text-primary, #1c1e21);
}
/* _content/Rame.Blazor.Server/Components/AI/Tabs/AgentDataFieldsTab.razor.rz.scp.css */
/* ============================================================
   AgentDataFieldsTab — Table-style field list
   ============================================================ */

.data-fields-tab[b-5iz7ixge4a] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Tab header ── */

.tab-header[b-5iz7ixge4a] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.tab-header-left[b-5iz7ixge4a] {
    flex: 1;
    min-width: 0;
}

.tab-title[b-5iz7ixge4a] {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary, #1e293b);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}

.tab-subtitle[b-5iz7ixge4a] {
    font-size: 13px;
    color: var(--color-text-secondary, #64748b);
    margin: 0;
}

/* ── Info banner ── */

.info-banner[b-5iz7ixge4a] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    font-size: 13px;
    color: #1e40af;
    flex-shrink: 0;
}

/* ── Empty state ── */

.empty-state[b-5iz7ixge4a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 32px;
    background: var(--color-bg-primary, #ffffff);
    border: 1.5px dashed var(--color-border, #e2e8f0);
    border-radius: 12px;
    gap: 12px;
}

.empty-state__icon[b-5iz7ixge4a] {
    color: var(--color-text-tertiary, #94a3b8);
}

.empty-state__title[b-5iz7ixge4a] {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-secondary, #64748b);
    margin: 0;
}

.empty-state__desc[b-5iz7ixge4a] {
    font-size: 13px;
    color: var(--color-text-tertiary, #94a3b8);
    margin: 0;
    max-width: 320px;
    line-height: 1.5;
}

/* ── Fields table ── */

.fields-table-wrapper[b-5iz7ixge4a] {
    background: var(--color-bg-primary, #ffffff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px var(--color-shadow, rgba(0,0,0,0.04));
}

.fields-table[b-5iz7ixge4a] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.fields-table thead tr[b-5iz7ixge4a] {
    background: var(--color-bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.fields-table thead th[b-5iz7ixge4a] {
    padding: 10px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.fields-table tbody tr[b-5iz7ixge4a] {
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    transition: background 0.1s;
}

.fields-table tbody tr:last-child[b-5iz7ixge4a] {
    border-bottom: none;
}

.fields-table tbody tr:hover[b-5iz7ixge4a] {
    background: var(--color-bg-secondary, #f8fafc);
}

.fields-table tbody td[b-5iz7ixge4a] {
    padding: 12px 14px;
    vertical-align: top;
}

.row--disabled[b-5iz7ixge4a] {
    opacity: 0.5;
}

/* Column widths */
.col-order[b-5iz7ixge4a] { width: 40px; }
.col-type[b-5iz7ixge4a] { width: 100px; }
.col-name[b-5iz7ixge4a] { min-width: 200px; }
.col-required[b-5iz7ixge4a] { width: 100px; }
.col-enabled[b-5iz7ixge4a] { width: 80px; text-align: center; }
.col-actions[b-5iz7ixge4a] { width: 100px; }

.order-chip[b-5iz7ixge4a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--color-bg-tertiary, #f1f5f9);
    color: var(--color-text-secondary, #64748b);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
}

.field-display-name[b-5iz7ixge4a] {
    display: block;
    font-weight: 600;
    color: var(--color-text-primary, #1e293b);
    margin-bottom: 2px;
}

.field-tech-name[b-5iz7ixge4a] {
    display: block;
    font-size: 11px;
    color: var(--color-text-tertiary, #94a3b8);
    font-family: ui-monospace, monospace;
}

.field-hint[b-5iz7ixge4a] {
    font-size: 11px;
    color: var(--color-text-tertiary, #94a3b8);
    line-height: 1.4;
}

.field-label-optional[b-5iz7ixge4a] {
    font-size: 10px;
    font-weight: 400;
    color: var(--color-text-tertiary, #94a3b8);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 4px;
}

.field-instructions[b-5iz7ixge4a] {
    display: block;
    font-size: 12px;
    color: var(--color-text-secondary, #64748b);
    font-style: italic;
    margin-top: 4px;
    line-height: 1.4;
}

.type-badge[b-5iz7ixge4a] {
    display: inline-flex;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: var(--color-bg-tertiary, #f1f5f9);
    color: var(--color-text-secondary, #64748b);
}

.required-badge[b-5iz7ixge4a] {
    display: inline-flex;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: var(--color-warning-light, #fef3c7);
    color: #92400e;
}

.optional-badge[b-5iz7ixge4a] {
    display: inline-flex;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    color: var(--color-text-tertiary, #94a3b8);
}

.row-actions[b-5iz7ixge4a] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Add form ── */

.add-form[b-5iz7ixge4a] {
    background: var(--color-bg-primary, #ffffff);
    border: 1.5px solid var(--color-primary, #6366f1);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.12);
}

.add-form__header[b-5iz7ixge4a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--color-primary-light, #e0e7ff);
    border-bottom: 1px solid rgba(99, 102, 241, 0.2);
}

.add-form__title[b-5iz7ixge4a] {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary, #6366f1);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.add-form__grid[b-5iz7ixge4a] {
    display: grid;
    grid-template-columns: 1fr 1fr 180px auto;
    gap: 12px;
    padding: 16px;
    align-items: end;
}

.add-form__actions[b-5iz7ixge4a] {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: var(--color-bg-secondary, #f8fafc);
    border-top: 1px solid var(--color-border, #e2e8f0);
}

/* ── Shared ── */

.field-row[b-5iz7ixge4a] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0 16px 16px;
}

.field-row:first-of-type[b-5iz7ixge4a] {
    padding-top: 0;
}

.field-row--center[b-5iz7ixge4a] {
    justify-content: flex-end;
    align-items: center;
}

.field-label[b-5iz7ixge4a] {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.field-input[b-5iz7ixge4a] {
    width: 100%;
}

/* ── Buttons ── */

.btn-primary[b-5iz7ixge4a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--color-primary, #6366f1);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
    flex-shrink: 0;
}

.btn-primary:hover[b-5iz7ixge4a] {
    background: var(--color-primary-hover, #4f46e5);
}

.btn-secondary[b-5iz7ixge4a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    color: var(--color-text-secondary, #64748b);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.btn-secondary:hover[b-5iz7ixge4a] {
    background: var(--color-bg-secondary, #f8fafc);
    color: var(--color-text-primary, #1e293b);
}

.btn-icon[b-5iz7ixge4a] {
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-border, #e2e8f0);
    background: var(--color-bg-primary, #ffffff);
    color: var(--color-text-secondary, #64748b);
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.12s ease;
    flex-shrink: 0;
}

.btn-icon:hover:not([disabled])[b-5iz7ixge4a] {
    background: var(--color-bg-tertiary, #f1f5f9);
    color: var(--color-text-primary, #1e293b);
    border-color: var(--color-border-strong, #cbd5e1);
}

.btn-icon[disabled][b-5iz7ixge4a] {
    opacity: 0.3;
    cursor: not-allowed;
}

.btn-icon--danger:hover:not([disabled])[b-5iz7ixge4a] {
    background: var(--color-error-light, #fee2e2);
    color: var(--color-error, #ef4444);
    border-color: #fca5a5;
}

/* ── Dark mode ── */

:global([data-rame-theme="dark"]) .tab-header[b-5iz7ixge4a] {
    border-bottom-color: #334155;
}

:global([data-rame-theme="dark"]) .tab-title[b-5iz7ixge4a] {
    color: #f1f5f9;
}

:global([data-rame-theme="dark"]) .info-banner[b-5iz7ixge4a] {
    background: rgba(30, 64, 175, 0.15);
    border-color: rgba(191, 219, 254, 0.2);
    color: #93c5fd;
}

:global([data-rame-theme="dark"]) .fields-table-wrapper[b-5iz7ixge4a] {
    background: #1e293b;
    border-color: #334155;
}

:global([data-rame-theme="dark"]) .fields-table thead tr[b-5iz7ixge4a] {
    background: #0f172a;
    border-bottom-color: #334155;
}

:global([data-rame-theme="dark"]) .fields-table thead th[b-5iz7ixge4a] {
    color: #94a3b8;
}

:global([data-rame-theme="dark"]) .fields-table tbody tr[b-5iz7ixge4a] {
    border-bottom-color: #334155;
}

:global([data-rame-theme="dark"]) .fields-table tbody tr:hover[b-5iz7ixge4a] {
    background: #0f172a;
}

:global([data-rame-theme="dark"]) .order-chip[b-5iz7ixge4a] {
    background: #334155;
    color: #94a3b8;
}

:global([data-rame-theme="dark"]) .field-display-name[b-5iz7ixge4a] {
    color: #e2e8f0;
}

:global([data-rame-theme="dark"]) .type-badge[b-5iz7ixge4a] {
    background: #334155;
    color: #94a3b8;
}

:global([data-rame-theme="dark"]) .required-badge[b-5iz7ixge4a] {
    background: rgba(146, 64, 14, 0.3);
    color: #fcd34d;
}

:global([data-rame-theme="dark"]) .empty-state[b-5iz7ixge4a] {
    background: #1e293b;
    border-color: #334155;
}

:global([data-rame-theme="dark"]) .add-form[b-5iz7ixge4a] {
    background: #1e293b;
}

:global([data-rame-theme="dark"]) .add-form__header[b-5iz7ixge4a] {
    background: rgba(99, 102, 241, 0.2);
}

:global([data-rame-theme="dark"]) .add-form__actions[b-5iz7ixge4a] {
    background: #0f172a;
    border-top-color: #334155;
}

:global([data-rame-theme="dark"]) .btn-icon[b-5iz7ixge4a] {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

/* ========== MOBILE STACK ========== */
@media (max-width: 640px) {
    .tab-header[b-5iz7ixge4a],
    .add-form__actions[b-5iz7ixge4a],
    .row-actions[b-5iz7ixge4a] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--rame-space-2, 8px);
    }

    .tab-header > *[b-5iz7ixge4a],
    .add-form__actions > *[b-5iz7ixge4a],
    .row-actions > *[b-5iz7ixge4a] {
        width: 100%;
    }

    .add-form__grid[b-5iz7ixge4a] {
        grid-template-columns: 1fr !important;
        gap: var(--rame-space-2, 8px);
    }

    table[b-5iz7ixge4a] {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    input[b-5iz7ixge4a],
    textarea[b-5iz7ixge4a],
    select[b-5iz7ixge4a] {
        font-size: 16px; /* prevents iOS auto-zoom */
    }
}
/* _content/Rame.Blazor.Server/Components/AI/Tabs/AgentEscalationTab.razor.rz.scp.css */
/* ============================================================
   AgentEscalationTab — Strategy card + rules list + add panel
   ============================================================ */

.escalation-tab[b-wtx60bbmoq] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Tab header ── */

.tab-header[b-wtx60bbmoq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.tab-header-left[b-wtx60bbmoq] {
    flex: 1;
    min-width: 0;
}

.tab-title[b-wtx60bbmoq] {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary, #1e293b);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}

.tab-subtitle[b-wtx60bbmoq] {
    font-size: 13px;
    color: var(--color-text-secondary, #64748b);
    margin: 0;
}

/* ── Two-column layout ── */

.escalation-layout[b-wtx60bbmoq] {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.rules-panel[b-wtx60bbmoq] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Strategy card ── */

.strategy-card[b-wtx60bbmoq] {
    background: var(--color-bg-primary, #ffffff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px var(--color-shadow, rgba(0,0,0,0.04));
}

.strategy-card__header[b-wtx60bbmoq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--color-bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.strategy-icon[b-wtx60bbmoq] {
    color: var(--color-primary, #6366f1);
}

.strategy-card__title[b-wtx60bbmoq] {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-primary, #1e293b);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.strategy-card__body[b-wtx60bbmoq] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.strategy-card__separator[b-wtx60bbmoq] {
    height: 1px;
    background: var(--color-border, #e2e8f0);
    margin: 2px 0;
}

.field-hint[b-wtx60bbmoq] {
    font-size: 11px;
    color: var(--color-text-tertiary, #94a3b8);
    line-height: 1.4;
}

/* ── Empty state ── */

.empty-state[b-wtx60bbmoq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 32px;
    background: var(--color-bg-primary, #ffffff);
    border: 1.5px dashed var(--color-border, #e2e8f0);
    border-radius: 12px;
    gap: 12px;
}

.empty-state__icon[b-wtx60bbmoq] {
    color: var(--color-text-tertiary, #94a3b8);
}

.empty-state__title[b-wtx60bbmoq] {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-secondary, #64748b);
    margin: 0;
}

.empty-state__desc[b-wtx60bbmoq] {
    font-size: 13px;
    color: var(--color-text-tertiary, #94a3b8);
    margin: 0;
    max-width: 320px;
    line-height: 1.5;
}

/* ── Rules list ── */

.rules-list[b-wtx60bbmoq] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rule-card[b-wtx60bbmoq] {
    background: var(--color-bg-primary, #ffffff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.15s ease;
    box-shadow: 0 1px 3px var(--color-shadow, rgba(0,0,0,0.04));
}

.rule-card:hover[b-wtx60bbmoq] {
    box-shadow: 0 3px 10px var(--color-shadow, rgba(0,0,0,0.08));
}

.rule-card--disabled[b-wtx60bbmoq] {
    opacity: 0.5;
}

.rule-header[b-wtx60bbmoq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--color-bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.rule-header-left[b-wtx60bbmoq] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.trigger-badge[b-wtx60bbmoq] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.rule-actions[b-wtx60bbmoq] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rule-body[b-wtx60bbmoq] {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Rule textarea ── */

.rule-textarea[b-wtx60bbmoq] {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    color: var(--color-text-primary, #1e293b);
    background: var(--color-bg-primary, #ffffff);
    outline: none;
    resize: vertical;
    transition: border-color 0.15s, box-shadow 0.15s;
    line-height: 1.5;
}

.rule-textarea:focus[b-wtx60bbmoq] {
    border-color: var(--color-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.rule-spin[b-wtx60bbmoq] {
    max-width: 160px;
}

/* ── Add panel ── */

.add-panel[b-wtx60bbmoq] {
    width: 320px;
    flex-shrink: 0;
    background: var(--color-bg-primary, #ffffff);
    border: 1.5px solid var(--color-primary, #6366f1);
    border-radius: 12px;
    overflow: hidden;
    position: sticky;
    top: 0;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
}

.add-panel__header[b-wtx60bbmoq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--color-primary-light, #e0e7ff);
    border-bottom: 1px solid rgba(99, 102, 241, 0.2);
}

.add-panel__title[b-wtx60bbmoq] {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary, #6366f1);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.add-panel__body[b-wtx60bbmoq] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.add-panel__footer[b-wtx60bbmoq] {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: var(--color-bg-secondary, #f8fafc);
    border-top: 1px solid var(--color-border, #e2e8f0);
}

/* ── Shared field styles ── */

.field-row[b-wtx60bbmoq] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.field-label[b-wtx60bbmoq] {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.field-input[b-wtx60bbmoq] {
    width: 100%;
}

/* ── Buttons ── */

.btn-primary[b-wtx60bbmoq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--color-primary, #6366f1);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
    flex-shrink: 0;
}

.btn-primary:hover[b-wtx60bbmoq] {
    background: var(--color-primary-hover, #4f46e5);
}

.btn-secondary[b-wtx60bbmoq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    color: var(--color-text-secondary, #64748b);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.btn-secondary:hover[b-wtx60bbmoq] {
    background: var(--color-bg-secondary, #f8fafc);
    color: var(--color-text-primary, #1e293b);
}

.btn-icon[b-wtx60bbmoq] {
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-border, #e2e8f0);
    background: var(--color-bg-primary, #ffffff);
    color: var(--color-text-secondary, #64748b);
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.12s ease;
    flex-shrink: 0;
}

.btn-icon:hover:not([disabled])[b-wtx60bbmoq] {
    background: var(--color-bg-tertiary, #f1f5f9);
    color: var(--color-text-primary, #1e293b);
    border-color: var(--color-border-strong, #cbd5e1);
}

.btn-icon[disabled][b-wtx60bbmoq] {
    opacity: 0.3;
    cursor: not-allowed;
}

.btn-icon--danger:hover:not([disabled])[b-wtx60bbmoq] {
    background: var(--color-error-light, #fee2e2);
    color: var(--color-error, #ef4444);
    border-color: #fca5a5;
}

/* ── Dark mode ── */

:global([data-rame-theme="dark"]) .tab-header[b-wtx60bbmoq] {
    border-bottom-color: #334155;
}

:global([data-rame-theme="dark"]) .tab-title[b-wtx60bbmoq] {
    color: #f1f5f9;
}

:global([data-rame-theme="dark"]) .strategy-card[b-wtx60bbmoq] {
    background: #1e293b;
    border-color: #334155;
}

:global([data-rame-theme="dark"]) .strategy-card__header[b-wtx60bbmoq] {
    background: #0f172a;
    border-bottom-color: #334155;
}

:global([data-rame-theme="dark"]) .strategy-card__title[b-wtx60bbmoq] {
    color: #e2e8f0;
}

:global([data-rame-theme="dark"]) .rule-card[b-wtx60bbmoq] {
    background: #1e293b;
    border-color: #334155;
}

:global([data-rame-theme="dark"]) .rule-header[b-wtx60bbmoq] {
    background: #0f172a;
    border-bottom-color: #334155;
}

:global([data-rame-theme="dark"]) .rule-textarea[b-wtx60bbmoq] {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

:global([data-rame-theme="dark"]) .empty-state[b-wtx60bbmoq] {
    background: #1e293b;
    border-color: #334155;
}

:global([data-rame-theme="dark"]) .add-panel[b-wtx60bbmoq] {
    background: #1e293b;
}

:global([data-rame-theme="dark"]) .add-panel__header[b-wtx60bbmoq] {
    background: rgba(99, 102, 241, 0.2);
}

:global([data-rame-theme="dark"]) .add-panel__footer[b-wtx60bbmoq] {
    background: #0f172a;
    border-top-color: #334155;
}

:global([data-rame-theme="dark"]) .btn-icon[b-wtx60bbmoq] {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

/* ========== MOBILE STACK ========== */
@media (max-width: 640px) {
    .tab-header[b-wtx60bbmoq],
    .escalation-layout[b-wtx60bbmoq],
    .rule-header[b-wtx60bbmoq],
    .add-panel__footer[b-wtx60bbmoq] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--rame-space-2, 8px);
    }

    .tab-header > *[b-wtx60bbmoq],
    .escalation-layout > *[b-wtx60bbmoq],
    .rule-header > *[b-wtx60bbmoq],
    .add-panel__footer > *[b-wtx60bbmoq] {
        width: 100%;
    }

    .add-panel[b-wtx60bbmoq] {
        width: 100%;
        position: static;
    }

    table[b-wtx60bbmoq] {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    input[b-wtx60bbmoq],
    textarea[b-wtx60bbmoq],
    select[b-wtx60bbmoq] {
        font-size: 16px; /* prevents iOS auto-zoom */
    }
}
/* _content/Rame.Blazor.Server/Components/AI/Tabs/AgentFlowTab.razor.rz.scp.css */
.agent-flow-tab[b-6ask683vgm] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.agent-flow-tab-empty[b-6ask683vgm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px;
    color: var(--rame-text-secondary, #65676b);
    background: var(--rame-bg-secondary, #f7f8fa);
    border-radius: 12px;
    text-align: center;
}

.btn-create-flow[b-6ask683vgm] {
    background: var(--rame-primary, #0084ff);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}

.btn-create-flow:hover[b-6ask683vgm] {
    background: var(--rame-primary-hover, #0073e6);
}
/* _content/Rame.Blazor.Server/Components/AI/Tabs/AgentIdentityTab.razor.rz.scp.css */
/* ============================================================
   AgentIdentityTab — Two-column form layout
   ============================================================ */

.identity-tab[b-q41pw1482v] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Tab page header ── */

.tab-header[b-q41pw1482v] {
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    margin-bottom: 4px;
}

.tab-title[b-q41pw1482v] {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary, #1e293b);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}

.tab-subtitle[b-q41pw1482v] {
    font-size: 13px;
    color: var(--color-text-secondary, #64748b);
    margin: 0;
}

/* ── Two-column layout ── */

.identity-layout[b-q41pw1482v] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
    max-width: 720px;
}

.identity-main[b-q41pw1482v] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.identity-sidebar[b-q41pw1482v] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Section cards ── */

.section-card[b-q41pw1482v] {
    background: var(--color-bg-primary, #ffffff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px var(--color-shadow, rgba(0,0,0,0.04));
}

.section-card--sticky[b-q41pw1482v] {
    position: sticky;
    top: 0;
}

.section-card__header[b-q41pw1482v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--color-bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.section-card__body[b-q41pw1482v] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-title[b-q41pw1482v] {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-primary, #1e293b);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 0;
}

.section-badge[b-q41pw1482v] {
    padding: 2px 8px;
    background: var(--color-primary-light, #e0e7ff);
    color: var(--color-primary, #6366f1);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

/* ── Field rows ── */

.field-row[b-q41pw1482v] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.field-row--spaced[b-q41pw1482v] {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border, #e2e8f0);
}

.field-label[b-q41pw1482v] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary, #1e293b);
}

.field-label--checkbox[b-q41pw1482v] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.field-hint[b-q41pw1482v] {
    font-size: 12px;
    color: var(--color-text-tertiary, #94a3b8);
    margin: 0;
    line-height: 1.5;
}

.field-input[b-q41pw1482v] {
    width: 100%;
}

/* ── Behavior checkboxes ── */

.behavior-checks[b-q41pw1482v] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.check-row[b-q41pw1482v] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    cursor: pointer;
}

.check-row:last-child[b-q41pw1482v] {
    border-bottom: none;
    padding-bottom: 0;
}

.check-row:first-child[b-q41pw1482v] {
    padding-top: 0;
}

.check-text[b-q41pw1482v] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.check-label[b-q41pw1482v] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary, #1e293b);
    line-height: 1.4;
}

.check-hint[b-q41pw1482v] {
    font-size: 12px;
    color: var(--color-text-tertiary, #94a3b8);
    line-height: 1.4;
}

/* ── Reactivation section ── */

.reactivation-badge[b-q41pw1482v] {
    background: var(--color-success-light, #dcfce7);
    color: var(--color-success, #16a34a);
}

.reactivation-settings[b-q41pw1482v] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border, #e2e8f0);
}

.threshold-header[b-q41pw1482v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.threshold-value[b-q41pw1482v] {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary, #6366f1);
    font-variant-numeric: tabular-nums;
}

.check-row--no-border[b-q41pw1482v] {
    border-bottom: none;
    padding-bottom: 0;
}

/* ── Behavior info ── */

.behavior-info[b-q41pw1482v] {
    padding: 10px 14px;
    background: var(--color-bg-secondary, #f8fafc);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 8px;
    margin-bottom: 4px;
}

.behavior-info__text[b-q41pw1482v] {
    font-size: 12px;
    color: var(--color-text-secondary, #64748b);
    line-height: 1.5;
}

/* ── Reactivation rules ── */

.reactivation-rules[b-q41pw1482v] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.rule-row[b-q41pw1482v] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: var(--color-bg-secondary, #f8fafc);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 8px;
}

.rule-fields[b-q41pw1482v] {
    display: flex;
    flex: 1;
    gap: 8px;
    flex-wrap: wrap;
}

.rule-field[b-q41pw1482v] {
    flex: 1;
    min-width: 150px;
}

.rule-delete[b-q41pw1482v] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--color-text-tertiary, #94a3b8);
    font-size: 14px;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    transition: all 0.15s ease;
}

.rule-delete:hover[b-q41pw1482v] {
    background: var(--color-danger-light, #fef2f2);
    color: var(--color-danger, #ef4444);
}

.rule-field--bypass[b-q41pw1482v],
.rule-field--context[b-q41pw1482v] {
    flex: 0 0 auto;
    min-width: auto;
    display: flex;
    align-items: center;
}

.rule-bypass-label[b-q41pw1482v] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.rule-bypass-text[b-q41pw1482v] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-secondary, #64748b);
}

.rule-add[b-q41pw1482v] {
    align-self: flex-start;
    padding: 6px 14px;
    border: 1px dashed var(--color-border, #e2e8f0);
    background: transparent;
    color: var(--color-primary, #6366f1);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.rule-add:hover[b-q41pw1482v] {
    border-color: var(--color-primary, #6366f1);
    background: var(--color-primary-light, #e0e7ff);
}

/* ── Resolution section ── */

.resolution-badge[b-q41pw1482v] {
    background: var(--color-info-light, #dbeafe);
    color: var(--color-info, #2563eb);
}

.resolution-settings[b-q41pw1482v] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border, #e2e8f0);
}

/* ── Model metrics (right column) ── */

.model-metrics[b-q41pw1482v] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.metric-item[b-q41pw1482v] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.metric-item:first-child[b-q41pw1482v] {
    padding-top: 0;
}

.metric-item:last-child[b-q41pw1482v] {
    border-bottom: none;
    padding-bottom: 0;
}

.metric-header[b-q41pw1482v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.metric-label[b-q41pw1482v] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary, #1e293b);
}

.metric-value[b-q41pw1482v] {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary, #6366f1);
    font-variant-numeric: tabular-nums;
}

/* ── Dark mode ── */

:global([data-rame-theme="dark"]) .tab-header[b-q41pw1482v] {
    border-bottom-color: #334155;
}

:global([data-rame-theme="dark"]) .tab-title[b-q41pw1482v] {
    color: #f1f5f9;
}

:global([data-rame-theme="dark"]) .tab-subtitle[b-q41pw1482v] {
    color: #94a3b8;
}

:global([data-rame-theme="dark"]) .section-card[b-q41pw1482v] {
    background: #1e293b;
    border-color: #334155;
}

:global([data-rame-theme="dark"]) .section-card__header[b-q41pw1482v] {
    background: #0f172a;
    border-bottom-color: #334155;
}

:global([data-rame-theme="dark"]) .section-title[b-q41pw1482v] {
    color: #e2e8f0;
}

:global([data-rame-theme="dark"]) .section-badge[b-q41pw1482v] {
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
}

:global([data-rame-theme="dark"]) .field-label[b-q41pw1482v] {
    color: #e2e8f0;
}

:global([data-rame-theme="dark"]) .check-label[b-q41pw1482v] {
    color: #e2e8f0;
}

:global([data-rame-theme="dark"]) .check-row[b-q41pw1482v] {
    border-bottom-color: #334155;
}

:global([data-rame-theme="dark"]) .field-row--spaced[b-q41pw1482v] {
    border-top-color: #334155;
}

:global([data-rame-theme="dark"]) .metric-item[b-q41pw1482v] {
    border-bottom-color: #334155;
}

:global([data-rame-theme="dark"]) .metric-label[b-q41pw1482v] {
    color: #e2e8f0;
}

:global([data-rame-theme="dark"]) .reactivation-badge[b-q41pw1482v] {
    background: rgba(22, 163, 74, 0.2);
    color: #4ade80;
}

:global([data-rame-theme="dark"]) .resolution-badge[b-q41pw1482v] {
    background: rgba(37, 99, 235, 0.2);
    color: #60a5fa;
}

:global([data-rame-theme="dark"]) .resolution-settings[b-q41pw1482v] {
    border-top-color: #334155;
}

:global([data-rame-theme="dark"]) .reactivation-settings[b-q41pw1482v] {
    border-top-color: #334155;
}

:global([data-rame-theme="dark"]) .behavior-info[b-q41pw1482v] {
    background: #0f172a;
    border-color: #334155;
}

:global([data-rame-theme="dark"]) .behavior-info__text[b-q41pw1482v] {
    color: #94a3b8;
}

:global([data-rame-theme="dark"]) .rule-row[b-q41pw1482v] {
    background: #0f172a;
    border-color: #334155;
}

:global([data-rame-theme="dark"]) .rule-delete:hover[b-q41pw1482v] {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

:global([data-rame-theme="dark"]) .rule-add[b-q41pw1482v] {
    border-color: #334155;
    color: #818cf8;
}

:global([data-rame-theme="dark"]) .rule-add:hover[b-q41pw1482v] {
    border-color: #818cf8;
    background: rgba(99, 102, 241, 0.15);
}

:global([data-rame-theme="dark"]) .rule-bypass-text[b-q41pw1482v] {
    color: #94a3b8;
}

/* ========== MOBILE STACK ========== */
@media (max-width: 640px) {
    .threshold-header[b-q41pw1482v],
    .metric-header[b-q41pw1482v],
    .rule-row[b-q41pw1482v],
    .rule-fields[b-q41pw1482v] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--rame-space-2, 8px);
    }

    .threshold-header > *[b-q41pw1482v],
    .metric-header > *[b-q41pw1482v],
    .rule-row > *[b-q41pw1482v],
    .rule-fields > *[b-q41pw1482v] {
        width: 100%;
    }

    .rule-field[b-q41pw1482v] {
        min-width: 0;
    }

    table[b-q41pw1482v] {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    input[b-q41pw1482v],
    textarea[b-q41pw1482v],
    select[b-q41pw1482v] {
        font-size: 16px; /* prevents iOS auto-zoom */
    }
}
/* _content/Rame.Blazor.Server/Components/AI/Tabs/AgentInstructionsTab.razor.rz.scp.css */
/* ============================================================
   AgentInstructionsTab
   ============================================================ */

.instructions-tab[b-4k41jgmbfb] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Tab header ── */

.tab-header[b-4k41jgmbfb] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.tab-header-left[b-4k41jgmbfb] {
    flex: 1;
    min-width: 0;
}

.tab-header-actions[b-4k41jgmbfb] {
    flex-shrink: 0;
}

.tab-title[b-4k41jgmbfb] {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary, #1e293b);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}

.tab-subtitle[b-4k41jgmbfb] {
    font-size: 13px;
    color: var(--color-text-secondary, #64748b);
    margin: 0;
}

/* ── Two-panel layout ── */

.instructions-layout[b-4k41jgmbfb] {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.instructions-list-panel[b-4k41jgmbfb] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Empty state ── */

.empty-state[b-4k41jgmbfb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 32px;
    background: var(--color-bg-primary, #ffffff);
    border: 1.5px dashed var(--color-border, #e2e8f0);
    border-radius: 12px;
    gap: 12px;
}

.empty-state__icon[b-4k41jgmbfb] {
    color: var(--color-text-tertiary, #94a3b8);
}

.empty-state__title[b-4k41jgmbfb] {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-secondary, #64748b);
    margin: 0;
}

.empty-state__desc[b-4k41jgmbfb] {
    font-size: 13px;
    color: var(--color-text-tertiary, #94a3b8);
    margin: 0;
    max-width: 320px;
    line-height: 1.5;
}

/* ── Instruction list ── */

.instruction-list[b-4k41jgmbfb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.instruction-card[b-4k41jgmbfb] {
    background: var(--color-bg-primary, #ffffff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.instruction-card:hover[b-4k41jgmbfb] {
    box-shadow: 0 2px 8px var(--color-shadow, rgba(0,0,0,0.08));
    border-color: var(--color-border-strong, #cbd5e1);
}

.instruction-card--disabled[b-4k41jgmbfb] {
    opacity: 0.5;
}

.instruction-header[b-4k41jgmbfb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--color-bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.instruction-header-left[b-4k41jgmbfb] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.order-number[b-4k41jgmbfb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--color-border, #e2e8f0);
    color: var(--color-text-secondary, #64748b);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.block-badge[b-4k41jgmbfb] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.instruction-actions[b-4k41jgmbfb] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.instruction-body[b-4k41jgmbfb] {
    padding: 12px 14px;
}

.instruction-textarea[b-4k41jgmbfb] {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 6px;
    padding: 9px 11px;
    font-size: 13px;
    font-family: inherit;
    color: var(--color-text-primary, #1e293b);
    background: var(--color-bg-primary, #ffffff);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    line-height: 1.5;
}

.instruction-textarea--tall[b-4k41jgmbfb] {
    min-height: 120px;
}

.instruction-textarea:focus[b-4k41jgmbfb] {
    border-color: var(--color-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

/* ── Add panel ── */

.add-panel[b-4k41jgmbfb] {
    width: 340px;
    flex-shrink: 0;
    background: var(--color-bg-primary, #ffffff);
    border: 1.5px solid var(--color-primary, #6366f1);
    border-radius: 12px;
    overflow: hidden;
    position: sticky;
    top: 0;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
}

.add-panel__header[b-4k41jgmbfb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--color-primary-light, #e0e7ff);
    border-bottom: 1px solid rgba(99, 102, 241, 0.2);
}

.add-panel__title[b-4k41jgmbfb] {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary, #6366f1);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.add-panel__body[b-4k41jgmbfb] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.add-panel__footer[b-4k41jgmbfb] {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: var(--color-bg-secondary, #f8fafc);
    border-top: 1px solid var(--color-border, #e2e8f0);
}

/* ── Shared field styles ── */

.field-row[b-4k41jgmbfb] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.field-label[b-4k41jgmbfb] {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.field-input[b-4k41jgmbfb] {
    width: 100%;
}

/* ── Buttons ── */

.btn-primary[b-4k41jgmbfb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--color-primary, #6366f1);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
}

.btn-primary:hover[b-4k41jgmbfb] {
    background: var(--color-primary-hover, #4f46e5);
}

.btn-secondary[b-4k41jgmbfb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    color: var(--color-text-secondary, #64748b);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.btn-secondary:hover[b-4k41jgmbfb] {
    background: var(--color-bg-secondary, #f8fafc);
    color: var(--color-text-primary, #1e293b);
}

.btn-icon[b-4k41jgmbfb] {
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-border, #e2e8f0);
    background: var(--color-bg-primary, #ffffff);
    color: var(--color-text-secondary, #64748b);
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.12s ease;
    flex-shrink: 0;
}

.btn-icon:hover:not([disabled])[b-4k41jgmbfb] {
    background: var(--color-bg-tertiary, #f1f5f9);
    color: var(--color-text-primary, #1e293b);
    border-color: var(--color-border-strong, #cbd5e1);
}

.btn-icon[disabled][b-4k41jgmbfb] {
    opacity: 0.3;
    cursor: not-allowed;
}

.btn-icon--danger:hover:not([disabled])[b-4k41jgmbfb] {
    background: var(--color-error-light, #fee2e2);
    color: var(--color-error, #ef4444);
    border-color: #fca5a5;
}

/* ── Dark mode ── */

:global([data-rame-theme="dark"]) .tab-header[b-4k41jgmbfb] {
    border-bottom-color: #334155;
}

:global([data-rame-theme="dark"]) .tab-title[b-4k41jgmbfb] {
    color: #f1f5f9;
}

:global([data-rame-theme="dark"]) .instruction-card[b-4k41jgmbfb] {
    background: #1e293b;
    border-color: #334155;
}

:global([data-rame-theme="dark"]) .instruction-card:hover[b-4k41jgmbfb] {
    border-color: #475569;
}

:global([data-rame-theme="dark"]) .instruction-header[b-4k41jgmbfb] {
    background: #0f172a;
    border-bottom-color: #334155;
}

:global([data-rame-theme="dark"]) .order-number[b-4k41jgmbfb] {
    background: #334155;
    color: #94a3b8;
}

:global([data-rame-theme="dark"]) .instruction-textarea[b-4k41jgmbfb] {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

:global([data-rame-theme="dark"]) .empty-state[b-4k41jgmbfb] {
    background: #1e293b;
    border-color: #334155;
}

:global([data-rame-theme="dark"]) .add-panel[b-4k41jgmbfb] {
    background: #1e293b;
    border-color: #6366f1;
}

:global([data-rame-theme="dark"]) .add-panel__header[b-4k41jgmbfb] {
    background: rgba(99, 102, 241, 0.2);
}

:global([data-rame-theme="dark"]) .add-panel__footer[b-4k41jgmbfb] {
    background: #0f172a;
    border-top-color: #334155;
}

:global([data-rame-theme="dark"]) .btn-icon[b-4k41jgmbfb] {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

/* ========== MOBILE STACK ========== */
@media (max-width: 640px) {
    .tab-header[b-4k41jgmbfb],
    .instructions-layout[b-4k41jgmbfb],
    .instruction-header[b-4k41jgmbfb],
    .add-panel__footer[b-4k41jgmbfb] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--rame-space-2, 8px);
    }

    .tab-header > *[b-4k41jgmbfb],
    .instructions-layout > *[b-4k41jgmbfb],
    .instruction-header > *[b-4k41jgmbfb],
    .add-panel__footer > *[b-4k41jgmbfb] {
        width: 100%;
    }

    .add-panel[b-4k41jgmbfb] {
        width: 100%;
        position: static;
    }

    table[b-4k41jgmbfb] {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    input[b-4k41jgmbfb],
    textarea[b-4k41jgmbfb],
    select[b-4k41jgmbfb] {
        font-size: 16px; /* prevents iOS auto-zoom */
    }
}
/* _content/Rame.Blazor.Server/Components/AI/Tabs/AgentKnowledgeTab.razor.rz.scp.css */
/* ============================================================
   AgentKnowledgeTab — Two-column card grid
   ============================================================ */

.knowledge-tab[b-h3i2mib8or] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Tab header ── */

.tab-header[b-h3i2mib8or] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.tab-header-left[b-h3i2mib8or] {
    flex: 1;
    min-width: 0;
}

.tab-title[b-h3i2mib8or] {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary, #1e293b);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}

.tab-subtitle[b-h3i2mib8or] {
    font-size: 13px;
    color: var(--color-text-secondary, #64748b);
    margin: 0;
    line-height: 1.5;
}

/* ── Pending badge ── */

.pending-badge[b-h3i2mib8or] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--color-warning-light, #fef3c7);
    border: 1px solid #fde68a;
    border-radius: 8px;
    flex-shrink: 0;
}

.pending-badge__count[b-h3i2mib8or] {
    font-size: 16px;
    font-weight: 800;
    color: #92400e;
}

.pending-badge__label[b-h3i2mib8or] {
    font-size: 12px;
    color: #92400e;
    white-space: nowrap;
}

/* ── Loading state ── */

.loading-state[b-h3i2mib8or] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 40px 0;
    color: var(--color-text-secondary, #64748b);
    font-size: 13px;
}

.loading-spinner[b-h3i2mib8or] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-border, #e2e8f0);
    border-top-color: var(--color-primary, #6366f1);
    border-radius: 50%;
    animation: spin-b-h3i2mib8or 0.7s linear infinite;
}

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

/* ── Empty state ── */

.empty-state[b-h3i2mib8or] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 64px 32px;
    background: var(--color-bg-primary, #ffffff);
    border: 1.5px dashed var(--color-border, #e2e8f0);
    border-radius: 12px;
    gap: 12px;
}

.empty-state__icon[b-h3i2mib8or] {
    color: var(--color-text-tertiary, #94a3b8);
}

.empty-state__title[b-h3i2mib8or] {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary, #1e293b);
    margin: 0;
}

.empty-state__hint[b-h3i2mib8or] {
    font-size: 13px;
    color: var(--color-text-tertiary, #94a3b8);
    margin: 0;
    max-width: 380px;
    line-height: 1.6;
}

/* ── Knowledge grid ── */

.knowledge-grid[b-h3i2mib8or] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 14px;
}

.knowledge-card[b-h3i2mib8or] {
    background: var(--color-bg-primary, #ffffff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    box-shadow: 0 1px 3px var(--color-shadow, rgba(0,0,0,0.04));
}

.knowledge-card:hover[b-h3i2mib8or] {
    box-shadow: 0 4px 12px var(--color-shadow, rgba(0,0,0,0.1));
    border-color: var(--color-border-strong, #cbd5e1);
}

.knowledge-card__body[b-h3i2mib8or] {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.knowledge-card__question[b-h3i2mib8or] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.q-icon[b-h3i2mib8or] {
    color: var(--color-primary, #6366f1);
    flex-shrink: 0;
    margin-top: 1px;
}

.knowledge-card__q-text[b-h3i2mib8or] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary, #1e293b);
    margin: 0;
    line-height: 1.5;
}

.knowledge-card__answer[b-h3i2mib8or] {
    font-size: 13px;
    color: var(--color-text-secondary, #64748b);
    margin: 0;
    line-height: 1.6;
    padding-left: 20px;
}

.knowledge-card__meta[b-h3i2mib8or] {
    font-size: 11px;
    color: var(--color-text-tertiary, #94a3b8);
    padding-left: 20px;
    margin-top: auto;
}

.knowledge-card__actions[b-h3i2mib8or] {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: var(--color-bg-secondary, #f8fafc);
    border-top: 1px solid var(--color-border, #e2e8f0);
}

/* ── Buttons ── */

.btn-approve[b-h3i2mib8or] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    justify-content: center;
    padding: 8px 12px;
    background: var(--color-success-light, #dcfce7);
    color: #166534;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s ease;
    font-family: inherit;
}

.btn-approve:hover:not([disabled])[b-h3i2mib8or] {
    background: #bbf7d0;
    border-color: #86efac;
}

.btn-reject[b-h3i2mib8or] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    justify-content: center;
    padding: 8px 12px;
    background: var(--color-bg-primary, #ffffff);
    color: var(--color-text-secondary, #64748b);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s ease;
    font-family: inherit;
}

.btn-reject:hover:not([disabled])[b-h3i2mib8or] {
    background: var(--color-error-light, #fee2e2);
    color: var(--color-error, #ef4444);
    border-color: #fca5a5;
}

.btn-approve[disabled][b-h3i2mib8or], .btn-reject[disabled][b-h3i2mib8or], .btn-edit[disabled][b-h3i2mib8or] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-edit[b-h3i2mib8or] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    padding: 8px 12px;
    background: var(--color-bg-primary, #ffffff);
    color: var(--color-primary, #6366f1);
    border: 1px solid var(--color-primary, #6366f1);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s ease;
    font-family: inherit;
}

.btn-edit:hover:not([disabled])[b-h3i2mib8or] {
    background: #eef2ff;
    border-color: #4f46e5;
}

.knowledge-card__answer-edit[b-h3i2mib8or] {
    width: 100%;
    font-size: 13px;
    color: var(--color-text-secondary, #64748b);
    line-height: 1.6;
    padding: 8px 10px 8px 20px;
    border: 1px solid var(--color-primary, #6366f1);
    border-radius: 8px;
    resize: vertical;
    font-family: inherit;
    background: var(--color-bg-primary, #ffffff);
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.knowledge-card__answer-edit:focus[b-h3i2mib8or] {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* ── Dark mode ── */

:global([data-rame-theme="dark"]) .tab-header[b-h3i2mib8or] {
    border-bottom-color: #334155;
}

:global([data-rame-theme="dark"]) .tab-title[b-h3i2mib8or] {
    color: #f1f5f9;
}

:global([data-rame-theme="dark"]) .pending-badge[b-h3i2mib8or] {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
}

:global([data-rame-theme="dark"]) .pending-badge__count[b-h3i2mib8or],
:global([data-rame-theme="dark"]) .pending-badge__label[b-h3i2mib8or] {
    color: #fcd34d;
}

:global([data-rame-theme="dark"]) .empty-state[b-h3i2mib8or] {
    background: #1e293b;
    border-color: #334155;
}

:global([data-rame-theme="dark"]) .empty-state__title[b-h3i2mib8or] {
    color: #e2e8f0;
}

:global([data-rame-theme="dark"]) .knowledge-card[b-h3i2mib8or] {
    background: #1e293b;
    border-color: #334155;
}

:global([data-rame-theme="dark"]) .knowledge-card:hover[b-h3i2mib8or] {
    border-color: #475569;
}

:global([data-rame-theme="dark"]) .knowledge-card__q-text[b-h3i2mib8or] {
    color: #e2e8f0;
}

:global([data-rame-theme="dark"]) .knowledge-card__actions[b-h3i2mib8or] {
    background: #0f172a;
    border-top-color: #334155;
}

:global([data-rame-theme="dark"]) .btn-approve[b-h3i2mib8or] {
    background: rgba(22, 101, 52, 0.3);
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.3);
}

:global([data-rame-theme="dark"]) .btn-approve:hover:not([disabled])[b-h3i2mib8or] {
    background: rgba(22, 101, 52, 0.5);
}

:global([data-rame-theme="dark"]) .btn-reject[b-h3i2mib8or] {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

:global([data-rame-theme="dark"]) .btn-edit[b-h3i2mib8or] {
    background: #1e293b;
    color: #a5b4fc;
    border-color: #6366f1;
}

:global([data-rame-theme="dark"]) .btn-edit:hover:not([disabled])[b-h3i2mib8or] {
    background: rgba(99, 102, 241, 0.15);
}

:global([data-rame-theme="dark"]) .knowledge-card__answer-edit[b-h3i2mib8or] {
    background: #0f172a;
    color: #cbd5e1;
    border-color: #6366f1;
}

/* ========== MOBILE STACK ========== */
@media (max-width: 640px) {
    .tab-header[b-h3i2mib8or],
    .knowledge-card__actions[b-h3i2mib8or] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--rame-space-2, 8px);
    }

    .tab-header > *[b-h3i2mib8or],
    .knowledge-card__actions > *[b-h3i2mib8or] {
        width: 100%;
    }

    .knowledge-grid[b-h3i2mib8or] {
        grid-template-columns: 1fr !important;
    }

    table[b-h3i2mib8or] {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    input[b-h3i2mib8or],
    textarea[b-h3i2mib8or],
    select[b-h3i2mib8or] {
        font-size: 16px; /* prevents iOS auto-zoom */
    }
}
/* _content/Rame.Blazor.Server/Components/AI/Tabs/AgentSourcesTab.razor.rz.scp.css */
/* ============================================================
   AgentSourcesTab — Knowledge sources management
   Uses Rame Design System tokens
   ============================================================ */

.sources-tab[b-hquqqgv5xh] {
    display: flex;
    flex-direction: column;
    gap: var(--rame-space-5, 20px);
}

/* ========== TAB HEADER ========== */

.tab-header[b-hquqqgv5xh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--rame-space-4, 16px);
    padding-bottom: var(--rame-space-4, 16px);
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
}

.tab-header__text[b-hquqqgv5xh] {
    flex: 1;
    min-width: 0;
}

.tab-title[b-hquqqgv5xh] {
    font-size: var(--rame-text-3xl, 20px);
    font-weight: var(--rame-font-bold, 700);
    color: var(--rame-text-primary, #1c1e21);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}

.tab-subtitle[b-hquqqgv5xh] {
    font-size: var(--rame-text-sm, 12px);
    color: var(--rame-text-secondary, #65676b);
    margin: 0;
    line-height: 1.5;
}

/* ========== ADD SOURCE BUTTON ========== */

.btn-add-source[b-hquqqgv5xh] {
    display: inline-flex;
    align-items: center;
    gap: var(--rame-space-2, 8px);
    padding: var(--rame-space-2, 8px) var(--rame-space-4, 16px);
    background: var(--color-primary, #6366f1);
    color: #ffffff;
    border: none;
    border-radius: var(--rame-radius-md, 8px);
    font-size: var(--rame-text-sm, 12px);
    font-weight: var(--rame-font-semibold, 600);
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    white-space: nowrap;
    font-family: inherit;
    flex-shrink: 0;
}

.btn-add-source:hover[b-hquqqgv5xh] {
    background: #4f46e5;
    transform: translateY(-1px);
}

.btn-add-source:active[b-hquqqgv5xh] {
    transform: translateY(0);
}

/* ========== ADD PANEL ========== */

.add-panel[b-hquqqgv5xh] {
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: var(--rame-radius-lg, 12px);
    overflow: hidden;
    box-shadow: var(--rame-shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
}

.add-panel__header[b-hquqqgv5xh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--rame-space-3, 12px) var(--rame-space-4, 16px);
    background: var(--rame-bg-secondary, #f7f8fa);
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
}

.add-panel__title[b-hquqqgv5xh] {
    display: flex;
    align-items: center;
    gap: var(--rame-space-2, 8px);
    font-size: var(--rame-text-base, 14px);
    font-weight: var(--rame-font-semibold, 600);
    color: var(--rame-text-primary, #1c1e21);
}

.btn-back[b-hquqqgv5xh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--rame-bg-tertiary, #f0f2f5);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: var(--rame-radius-sm, 4px);
    color: var(--rame-text-secondary, #65676b);
    cursor: pointer;
    transition: all 0.12s;
    padding: 0;
}

.btn-back:hover[b-hquqqgv5xh] {
    background: var(--rame-bg-hover, #e4e6eb);
    color: var(--rame-text-primary, #1c1e21);
}

.btn-close-panel[b-hquqqgv5xh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: var(--rame-radius-sm, 4px);
    color: var(--rame-text-tertiary, #8a8d91);
    cursor: pointer;
    transition: all 0.12s;
    padding: 0;
}

.btn-close-panel:hover[b-hquqqgv5xh] {
    background: var(--rame-bg-tertiary, #f0f2f5);
    color: var(--rame-text-primary, #1c1e21);
}

/* ========== TYPE PICKER ========== */

.type-picker[b-hquqqgv5xh] {
    display: flex;
    flex-direction: column;
}

.type-card[b-hquqqgv5xh] {
    display: flex;
    align-items: center;
    gap: var(--rame-space-3, 12px);
    padding: var(--rame-space-3, 12px) var(--rame-space-4, 16px);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
    cursor: pointer;
    transition: background 0.12s;
    text-align: left;
    width: 100%;
    font-family: inherit;
}

.type-card:last-child[b-hquqqgv5xh] {
    border-bottom: none;
}

.type-card:hover[b-hquqqgv5xh] {
    background: var(--rame-bg-secondary, #f7f8fa);
}

.type-card__icon[b-hquqqgv5xh] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--rame-radius-md, 8px);
    flex-shrink: 0;
}

.type-card__icon--text[b-hquqqgv5xh] {
    background: #e8e0ff;
    color: #6d28d9;
}

.type-card__icon--url[b-hquqqgv5xh] {
    background: var(--rame-info-light, #e3f2fd);
    color: var(--rame-info, #2196f3);
}

.type-card__icon--video[b-hquqqgv5xh] {
    background: #fee2e2;
    color: #dc2626;
}

.type-card__icon--file[b-hquqqgv5xh] {
    background: var(--rame-success-light, #e6f9ed);
    color: var(--rame-success, #25d366);
}

.type-card__icon--responsefile[b-hquqqgv5xh] {
    background: #fce7f3;
    color: #db2777;
}

.type-card__info[b-hquqqgv5xh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.type-card__name[b-hquqqgv5xh] {
    font-size: var(--rame-text-base, 14px);
    font-weight: var(--rame-font-semibold, 600);
    color: var(--rame-text-primary, #1c1e21);
}

.type-card__desc[b-hquqqgv5xh] {
    font-size: var(--rame-text-xs, 11px);
    color: var(--rame-text-tertiary, #8a8d91);
}

.type-card__badge[b-hquqqgv5xh] {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: var(--rame-radius-2xl, 20px);
    font-size: 10px;
    font-weight: var(--rame-font-bold, 700);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.type-card__badge--info[b-hquqqgv5xh] {
    background: var(--rame-info-light, #e3f2fd);
    color: var(--rame-info-text, #1565c0);
}

.type-card__badge--video[b-hquqqgv5xh] {
    background: #fee2e2;
    color: #dc2626;
}

.type-card__arrow[b-hquqqgv5xh] {
    color: var(--rame-text-muted, #b0b3b8);
    flex-shrink: 0;
    transition: transform 0.15s;
}

.type-card:hover .type-card__arrow[b-hquqqgv5xh] {
    transform: translateX(2px);
    color: var(--rame-text-secondary, #65676b);
}

/* ========== SOURCE FORM ========== */

.source-form[b-hquqqgv5xh] {
    padding: var(--rame-space-4, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--rame-space-3, 12px);
}

.form-hint[b-hquqqgv5xh] {
    font-size: var(--rame-text-xs, 11px);
    color: var(--rame-text-tertiary, #8a8d91);
    margin: 0;
    line-height: 1.5;
    padding: var(--rame-space-2, 8px) var(--rame-space-3, 12px);
    background: var(--rame-bg-secondary, #f7f8fa);
    border-radius: var(--rame-radius-md, 8px);
    border-left: 3px solid var(--rame-border-medium, #d0d3d9);
}

.field-row[b-hquqqgv5xh] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.field-row--toggle[b-hquqqgv5xh] {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--rame-bg-subtle, #f8f9fa);
    border-radius: var(--rame-radius-lg, 10px);
    border: 1px solid var(--rame-border, #e0e0e0);
}

.toggle-label[b-hquqqgv5xh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.field-hint[b-hquqqgv5xh] {
    font-size: var(--rame-text-xs, 11px);
    color: var(--rame-text-tertiary, #8a8d91);
    line-height: 1.4;
}

.field-label[b-hquqqgv5xh] {
    font-size: var(--rame-text-xs, 11px);
    font-weight: var(--rame-font-semibold, 600);
    color: var(--rame-text-secondary, #65676b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.field-input[b-hquqqgv5xh] {
    width: 100%;
}

.source-form__actions[b-hquqqgv5xh] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--rame-space-2, 8px);
    padding-top: var(--rame-space-2, 8px);
    border-top: 1px solid var(--rame-border-light, #e4e6eb);
}

.btn-submit[b-hquqqgv5xh] {
    display: inline-flex;
    align-items: center;
    gap: var(--rame-space-2, 8px);
    padding: var(--rame-space-2, 8px) var(--rame-space-4, 16px);
    background: var(--rame-primary, #0084ff);
    color: #ffffff;
    border: none;
    border-radius: var(--rame-radius-md, 8px);
    font-size: var(--rame-text-sm, 12px);
    font-weight: var(--rame-font-semibold, 600);
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
}

.btn-submit:hover:not([disabled])[b-hquqqgv5xh] {
    background: var(--rame-primary-hover, #0073e6);
}

.btn-submit[disabled][b-hquqqgv5xh] {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-cancel[b-hquqqgv5xh] {
    display: inline-flex;
    align-items: center;
    padding: var(--rame-space-2, 8px) var(--rame-space-3, 12px);
    background: transparent;
    color: var(--rame-text-secondary, #65676b);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: var(--rame-radius-md, 8px);
    font-size: var(--rame-text-sm, 12px);
    font-weight: var(--rame-font-medium, 500);
    cursor: pointer;
    transition: all 0.12s;
    font-family: inherit;
}

.btn-cancel:hover[b-hquqqgv5xh] {
    background: var(--rame-bg-tertiary, #f0f2f5);
    border-color: var(--rame-border-medium, #d0d3d9);
}

/* ========== DROPZONE ========== */

.dropzone[b-hquqqgv5xh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--rame-space-2, 8px);
    padding: var(--rame-space-6, 24px);
    border: 2px dashed var(--rame-border-medium, #d0d3d9);
    border-radius: var(--rame-radius-lg, 12px);
    background: var(--rame-bg-secondary, #f7f8fa);
    transition: all 0.2s;
    text-align: center;
    min-height: 120px;
}

.dropzone--active[b-hquqqgv5xh] {
    border-color: var(--rame-primary, #0084ff);
    background: var(--rame-primary-light, #e6f3ff);
}

.dropzone--uploading[b-hquqqgv5xh] {
    border-style: solid;
    border-color: var(--rame-primary, #0084ff);
    background: var(--rame-primary-light, #e6f3ff);
}

.dropzone__icon[b-hquqqgv5xh] {
    color: var(--rame-text-muted, #b0b3b8);
}

.dropzone--active .dropzone__icon[b-hquqqgv5xh] {
    color: var(--rame-primary, #0084ff);
}

.dropzone__text[b-hquqqgv5xh] {
    font-size: var(--rame-text-sm, 12px);
    color: var(--rame-text-secondary, #65676b);
}

.dropzone__text--filename[b-hquqqgv5xh] {
    font-weight: var(--rame-font-semibold, 600);
    color: var(--rame-text-primary, #1c1e21);
    word-break: break-all;
}

.dropzone__browse[b-hquqqgv5xh] {
    font-size: var(--rame-text-sm, 12px);
    color: var(--rame-primary, #0084ff);
    font-weight: var(--rame-font-semibold, 600);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dropzone__browse:hover[b-hquqqgv5xh] {
    color: var(--rame-primary-hover, #0073e6);
}

.dropzone__browse[b-hquqqgv5xh]  input[type="file"] {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.dropzone__hint[b-hquqqgv5xh] {
    font-size: 10px;
    color: var(--rame-text-muted, #b0b3b8);
}

.dropzone__uploading[b-hquqqgv5xh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--rame-space-3, 12px);
}

.upload-spinner[b-hquqqgv5xh] {
    width: 24px;
    height: 24px;
    border: 2px solid var(--rame-border-light, #e4e6eb);
    border-top-color: var(--rame-primary, #0084ff);
    border-radius: var(--rame-radius-full, 50%);
    animation: spin-b-hquqqgv5xh 0.7s linear infinite;
}

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

/* ========== VALIDATION & STATUS ========== */

.validation-error[b-hquqqgv5xh] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--rame-text-xs, 11px);
    color: var(--rame-error, #ef5350);
    margin: 0;
}

.upload-status[b-hquqqgv5xh] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--rame-text-xs, 11px);
    margin: 0;
    padding: var(--rame-space-2, 8px) var(--rame-space-3, 12px);
    border-radius: var(--rame-radius-md, 8px);
}

.upload-status--success[b-hquqqgv5xh] {
    color: #166534;
    background: var(--rame-success-light, #e6f9ed);
}

.upload-status--error[b-hquqqgv5xh] {
    color: var(--rame-error-text, #c62828);
    background: var(--rame-error-light, #ffebee);
}

/* ========== SOURCES LIST (PRIMARY CONTENT) ========== */

.sources-list[b-hquqqgv5xh] {
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: var(--rame-radius-lg, 12px);
    overflow: hidden;
    box-shadow: var(--rame-shadow-xs, 0 1px 2px rgba(0,0,0,0.05));
}

.sources-list__header[b-hquqqgv5xh] {
    display: flex;
    align-items: center;
    gap: var(--rame-space-2, 8px);
    padding: var(--rame-space-3, 12px) var(--rame-space-4, 16px);
    background: var(--rame-bg-secondary, #f7f8fa);
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
}

.sources-list__title[b-hquqqgv5xh] {
    font-size: var(--rame-text-xs, 11px);
    font-weight: var(--rame-font-bold, 700);
    color: var(--rame-text-secondary, #65676b);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    flex: 1;
}

.sources-count[b-hquqqgv5xh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--color-primary, #6366f1);
    color: #ffffff;
    border-radius: var(--rame-radius-2xl, 20px);
    font-size: 10px;
    font-weight: var(--rame-font-bold, 700);
}

/* ========== SOURCE ITEM (ROW) ========== */

.source-item[b-hquqqgv5xh] {
    display: flex;
    align-items: center;
    gap: var(--rame-space-3, 12px);
    padding: var(--rame-space-3, 12px) var(--rame-space-4, 16px);
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
    transition: background 0.1s;
}

.source-item:last-child[b-hquqqgv5xh] {
    border-bottom: none;
}

.source-item:hover[b-hquqqgv5xh] {
    background: var(--rame-bg-secondary, #f7f8fa);
}

.source-item--disabled[b-hquqqgv5xh] {
    opacity: 0.5;
}

.source-item__type-icon[b-hquqqgv5xh] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--rame-radius-md, 8px);
    flex-shrink: 0;
}

.source-item__type-icon--manualtext[b-hquqqgv5xh] {
    background: #e8e0ff;
    color: #6d28d9;
}

.source-item__type-icon--url[b-hquqqgv5xh] {
    background: var(--rame-info-light, #e3f2fd);
    color: var(--rame-info, #2196f3);
}

.source-item__type-icon--videourl[b-hquqqgv5xh] {
    background: #fee2e2;
    color: #dc2626;
}

.source-item__type-icon--fileupload[b-hquqqgv5xh] {
    background: var(--rame-success-light, #e6f9ed);
    color: var(--rame-success, #25d366);
}

.source-item__type-icon--responsefile[b-hquqqgv5xh] {
    background: #fce7f3;
    color: #db2777;
}

.source-item__content[b-hquqqgv5xh] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--rame-space-3, 12px);
}

.source-item__main[b-hquqqgv5xh] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.source-item__name[b-hquqqgv5xh] {
    font-size: var(--rame-text-base, 14px);
    font-weight: var(--rame-font-semibold, 600);
    color: var(--rame-text-primary, #1c1e21);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.source-item__desc[b-hquqqgv5xh] {
    font-size: var(--rame-text-xs, 11px);
    color: var(--rame-text-tertiary, #8a8d91);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.source-item__meta[b-hquqqgv5xh] {
    display: flex;
    align-items: center;
    gap: var(--rame-space-2, 8px);
    flex-shrink: 0;
}

.source-type-badge[b-hquqqgv5xh] {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: var(--rame-radius-2xl, 20px);
    font-size: 10px;
    font-weight: var(--rame-font-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--rame-bg-tertiary, #f0f2f5);
    color: var(--rame-text-secondary, #65676b);
    flex-shrink: 0;
}

.source-type-badge--manualtext[b-hquqqgv5xh] {
    background: #e8e0ff;
    color: #6d28d9;
}

.source-type-badge--url[b-hquqqgv5xh] {
    background: var(--rame-info-light, #e3f2fd);
    color: var(--rame-info-text, #1565c0);
}

.source-type-badge--videourl[b-hquqqgv5xh] {
    background: #fee2e2;
    color: #dc2626;
}

.source-type-badge--fileupload[b-hquqqgv5xh] {
    background: var(--rame-success-light, #e6f9ed);
    color: #166534;
}

.source-type-badge--responsefile[b-hquqqgv5xh] {
    background: #fce7f3;
    color: #db2777;
}

.source-badge--attachable[b-hquqqgv5xh] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--rame-radius-2xl, 20px);
    font-size: 10px;
    font-weight: var(--rame-font-semibold, 600);
    background: #fce7f3;
    color: #db2777;
    flex-shrink: 0;
}

/* ========== EMBED STATUS BADGES ========== */

.embed-status[b-hquqqgv5xh] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--rame-radius-2xl, 20px);
    font-size: 10px;
    font-weight: var(--rame-font-semibold, 600);
    flex-shrink: 0;
}

.embed-status--ready[b-hquqqgv5xh] {
    background: var(--rame-success-light, #e6f9ed);
    color: #166534;
}

.embed-status--pending[b-hquqqgv5xh] {
    background: var(--rame-warning-light, #fff3e0);
    color: var(--rame-warning-text, #e65100);
}

.embed-status--ondemand[b-hquqqgv5xh] {
    background: var(--rame-info-light, #e3f2fd);
    color: var(--rame-info-text, #1565c0);
}

/* ========== SOURCE ACTIONS ========== */

.source-item__actions[b-hquqqgv5xh] {
    display: flex;
    align-items: center;
    gap: var(--rame-space-2, 8px);
    flex-shrink: 0;
}

.btn-icon-delete[b-hquqqgv5xh] {
    width: 28px;
    height: 28px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--rame-text-muted, #b0b3b8);
    border-radius: var(--rame-radius-sm, 4px);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.12s ease;
    flex-shrink: 0;
}

.btn-icon-delete:hover[b-hquqqgv5xh] {
    background: var(--rame-error-light, #ffebee);
    color: var(--rame-error, #ef5350);
    border-color: var(--rame-error-border, #ffcdd2);
}

/* ========== EMPTY STATE ========== */

.empty-state[b-hquqqgv5xh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--rame-space-3, 12px);
    padding: var(--rame-space-10, 40px) var(--rame-space-4, 16px);
    text-align: center;
    background: var(--rame-bg-primary, #ffffff);
    border: 1px dashed var(--rame-border-medium, #d0d3d9);
    border-radius: var(--rame-radius-lg, 12px);
}

.empty-state__icon[b-hquqqgv5xh] {
    color: var(--rame-text-muted, #b0b3b8);
}

.empty-state__title[b-hquqqgv5xh] {
    font-size: var(--rame-text-lg, 15px);
    font-weight: var(--rame-font-semibold, 600);
    color: var(--rame-text-primary, #1c1e21);
    margin: 0;
}

.empty-state__desc[b-hquqqgv5xh] {
    font-size: var(--rame-text-sm, 12px);
    color: var(--rame-text-tertiary, #8a8d91);
    margin: 0;
    max-width: 380px;
    line-height: 1.5;
}

/* ========== RESPONSIVE ========== */

@media (max-width: 640px) {
    .tab-header[b-hquqqgv5xh] {
        flex-direction: column;
        gap: var(--rame-space-3, 12px);
    }

    .source-item__content[b-hquqqgv5xh] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--rame-space-2, 8px);
    }

    .source-item__meta[b-hquqqgv5xh] {
        flex-wrap: wrap;
    }
}

/* ========== DARK MODE ========== */

:global([data-rame-theme="dark"]) .tab-header[b-hquqqgv5xh] {
    border-bottom-color: var(--rame-border-light, #404040);
}

:global([data-rame-theme="dark"]) .tab-title[b-hquqqgv5xh] {
    color: var(--rame-text-primary, #f0f0f0);
}

:global([data-rame-theme="dark"]) .tab-subtitle[b-hquqqgv5xh] {
    color: var(--rame-text-secondary, #c8c8c8);
}

:global([data-rame-theme="dark"]) .add-panel[b-hquqqgv5xh] {
    background: var(--rame-bg-primary, #1e1e1e);
    border-color: var(--rame-border-light, #404040);
}

:global([data-rame-theme="dark"]) .add-panel__header[b-hquqqgv5xh] {
    background: var(--rame-bg-secondary, #282828);
    border-bottom-color: var(--rame-border-light, #404040);
}

:global([data-rame-theme="dark"]) .add-panel__title[b-hquqqgv5xh] {
    color: var(--rame-text-primary, #f0f0f0);
}

:global([data-rame-theme="dark"]) .btn-back[b-hquqqgv5xh] {
    background: var(--rame-bg-tertiary, #333333);
    border-color: var(--rame-border-light, #404040);
    color: var(--rame-text-secondary, #c8c8c8);
}

:global([data-rame-theme="dark"]) .btn-back:hover[b-hquqqgv5xh] {
    background: var(--rame-bg-hover, #3a3a3a);
    color: var(--rame-text-primary, #f0f0f0);
}

:global([data-rame-theme="dark"]) .btn-close-panel[b-hquqqgv5xh] {
    color: var(--rame-text-tertiary, #a0a0a0);
}

:global([data-rame-theme="dark"]) .btn-close-panel:hover[b-hquqqgv5xh] {
    background: var(--rame-bg-tertiary, #333333);
    color: var(--rame-text-primary, #f0f0f0);
}

:global([data-rame-theme="dark"]) .type-card[b-hquqqgv5xh] {
    border-bottom-color: var(--rame-border-light, #404040);
}

:global([data-rame-theme="dark"]) .type-card:hover[b-hquqqgv5xh] {
    background: var(--rame-bg-secondary, #282828);
}

:global([data-rame-theme="dark"]) .type-card__name[b-hquqqgv5xh] {
    color: var(--rame-text-primary, #f0f0f0);
}

:global([data-rame-theme="dark"]) .type-card__desc[b-hquqqgv5xh] {
    color: var(--rame-text-tertiary, #a0a0a0);
}

:global([data-rame-theme="dark"]) .type-card__icon--text[b-hquqqgv5xh] {
    background: rgba(109, 40, 217, 0.25);
    color: #c084fc;
}

:global([data-rame-theme="dark"]) .type-card__icon--url[b-hquqqgv5xh] {
    background: rgba(33, 150, 243, 0.2);
    color: #64b5f6;
}

:global([data-rame-theme="dark"]) .type-card__icon--video[b-hquqqgv5xh] {
    background: rgba(220, 38, 38, 0.2);
    color: #f87171;
}

:global([data-rame-theme="dark"]) .type-card__icon--file[b-hquqqgv5xh] {
    background: rgba(37, 211, 102, 0.2);
    color: #4ade80;
}

:global([data-rame-theme="dark"]) .type-card__icon--responsefile[b-hquqqgv5xh] {
    background: rgba(219, 39, 119, 0.2);
    color: #f472b6;
}

:global([data-rame-theme="dark"]) .type-card__badge--info[b-hquqqgv5xh] {
    background: rgba(33, 150, 243, 0.2);
    color: #64b5f6;
}

:global([data-rame-theme="dark"]) .type-card__badge--video[b-hquqqgv5xh] {
    background: rgba(220, 38, 38, 0.2);
    color: #f87171;
}

:global([data-rame-theme="dark"]) .type-card__arrow[b-hquqqgv5xh] {
    color: var(--rame-text-muted, #888888);
}

:global([data-rame-theme="dark"]) .source-form[b-hquqqgv5xh] {
    border-top-color: var(--rame-border-light, #404040);
}

:global([data-rame-theme="dark"]) .form-hint[b-hquqqgv5xh] {
    background: var(--rame-bg-secondary, #282828);
    color: var(--rame-text-tertiary, #a0a0a0);
    border-left-color: var(--rame-border-medium, #505050);
}

:global([data-rame-theme="dark"]) .field-label[b-hquqqgv5xh] {
    color: var(--rame-text-secondary, #c8c8c8);
}

:global([data-rame-theme="dark"]) .source-form__actions[b-hquqqgv5xh] {
    border-top-color: var(--rame-border-light, #404040);
}

:global([data-rame-theme="dark"]) .btn-cancel[b-hquqqgv5xh] {
    color: var(--rame-text-secondary, #c8c8c8);
    border-color: var(--rame-border-light, #404040);
}

:global([data-rame-theme="dark"]) .btn-cancel:hover[b-hquqqgv5xh] {
    background: var(--rame-bg-tertiary, #333333);
    border-color: var(--rame-border-medium, #505050);
}

:global([data-rame-theme="dark"]) .dropzone[b-hquqqgv5xh] {
    background: var(--rame-bg-secondary, #282828);
    border-color: var(--rame-border-medium, #505050);
}

:global([data-rame-theme="dark"]) .dropzone--active[b-hquqqgv5xh] {
    border-color: var(--rame-primary, #3b9eff);
    background: rgba(59, 158, 255, 0.1);
}

:global([data-rame-theme="dark"]) .dropzone--uploading[b-hquqqgv5xh] {
    border-color: var(--rame-primary, #3b9eff);
    background: rgba(59, 158, 255, 0.1);
}

:global([data-rame-theme="dark"]) .dropzone__icon[b-hquqqgv5xh] {
    color: var(--rame-text-muted, #888888);
}

:global([data-rame-theme="dark"]) .dropzone__text[b-hquqqgv5xh] {
    color: var(--rame-text-secondary, #c8c8c8);
}

:global([data-rame-theme="dark"]) .dropzone__text--filename[b-hquqqgv5xh] {
    color: var(--rame-text-primary, #e4e6eb);
}

:global([data-rame-theme="dark"]) .dropzone__browse[b-hquqqgv5xh] {
    color: var(--rame-primary, #3b9eff);
}

:global([data-rame-theme="dark"]) .upload-status--success[b-hquqqgv5xh] {
    background: rgba(37, 211, 102, 0.15);
    color: #4ade80;
}

:global([data-rame-theme="dark"]) .upload-status--error[b-hquqqgv5xh] {
    background: rgba(239, 83, 80, 0.15);
    color: #ff8a8a;
}

:global([data-rame-theme="dark"]) .sources-list[b-hquqqgv5xh] {
    background: var(--rame-bg-primary, #1e1e1e);
    border-color: var(--rame-border-light, #404040);
}

:global([data-rame-theme="dark"]) .sources-list__header[b-hquqqgv5xh] {
    background: var(--rame-bg-secondary, #282828);
    border-bottom-color: var(--rame-border-light, #404040);
}

:global([data-rame-theme="dark"]) .sources-list__title[b-hquqqgv5xh] {
    color: var(--rame-text-secondary, #c8c8c8);
}

:global([data-rame-theme="dark"]) .source-item[b-hquqqgv5xh] {
    border-bottom-color: var(--rame-border-light, #404040);
}

:global([data-rame-theme="dark"]) .source-item:hover[b-hquqqgv5xh] {
    background: var(--rame-bg-secondary, #282828);
}

:global([data-rame-theme="dark"]) .source-item__type-icon--manualtext[b-hquqqgv5xh] {
    background: rgba(109, 40, 217, 0.25);
    color: #c084fc;
}

:global([data-rame-theme="dark"]) .source-item__type-icon--url[b-hquqqgv5xh] {
    background: rgba(33, 150, 243, 0.2);
    color: #64b5f6;
}

:global([data-rame-theme="dark"]) .source-item__type-icon--videourl[b-hquqqgv5xh] {
    background: rgba(220, 38, 38, 0.2);
    color: #f87171;
}

:global([data-rame-theme="dark"]) .source-item__type-icon--fileupload[b-hquqqgv5xh] {
    background: rgba(37, 211, 102, 0.2);
    color: #4ade80;
}

:global([data-rame-theme="dark"]) .source-item__type-icon--responsefile[b-hquqqgv5xh] {
    background: rgba(219, 39, 119, 0.2);
    color: #f472b6;
}

:global([data-rame-theme="dark"]) .source-item__name[b-hquqqgv5xh] {
    color: var(--rame-text-primary, #f0f0f0);
}

:global([data-rame-theme="dark"]) .source-item__desc[b-hquqqgv5xh] {
    color: var(--rame-text-tertiary, #a0a0a0);
}

:global([data-rame-theme="dark"]) .source-type-badge[b-hquqqgv5xh] {
    background: var(--rame-bg-tertiary, #333333);
    color: var(--rame-text-secondary, #c8c8c8);
}

:global([data-rame-theme="dark"]) .source-type-badge--manualtext[b-hquqqgv5xh] {
    background: rgba(109, 40, 217, 0.25);
    color: #c084fc;
}

:global([data-rame-theme="dark"]) .source-type-badge--url[b-hquqqgv5xh] {
    background: rgba(33, 150, 243, 0.2);
    color: #64b5f6;
}

:global([data-rame-theme="dark"]) .source-type-badge--videourl[b-hquqqgv5xh] {
    background: rgba(220, 38, 38, 0.2);
    color: #f87171;
}

:global([data-rame-theme="dark"]) .source-type-badge--fileupload[b-hquqqgv5xh] {
    background: rgba(37, 211, 102, 0.2);
    color: #4ade80;
}

:global([data-rame-theme="dark"]) .source-type-badge--responsefile[b-hquqqgv5xh] {
    background: rgba(219, 39, 119, 0.2);
    color: #f472b6;
}

:global([data-rame-theme="dark"]) .embed-status--ready[b-hquqqgv5xh] {
    background: rgba(37, 211, 102, 0.15);
    color: #4ade80;
}

:global([data-rame-theme="dark"]) .embed-status--pending[b-hquqqgv5xh] {
    background: rgba(255, 152, 0, 0.15);
    color: #ffc978;
}

:global([data-rame-theme="dark"]) .embed-status--ondemand[b-hquqqgv5xh] {
    background: rgba(33, 150, 243, 0.15);
    color: #64b5f6;
}

:global([data-rame-theme="dark"]) .source-badge--attachable[b-hquqqgv5xh] {
    background: rgba(219, 39, 119, 0.2);
    color: #f472b6;
}

:global([data-rame-theme="dark"]) .field-row--toggle[b-hquqqgv5xh] {
    background: var(--rame-bg-secondary, #2a2a2a);
    border-color: var(--rame-border, #3a3a3a);
}

:global([data-rame-theme="dark"]) .btn-icon-delete[b-hquqqgv5xh] {
    color: var(--rame-text-muted, #888888);
}

:global([data-rame-theme="dark"]) .btn-icon-delete:hover[b-hquqqgv5xh] {
    background: rgba(239, 83, 80, 0.15);
    color: #ff8a8a;
    border-color: rgba(239, 83, 80, 0.3);
}

:global([data-rame-theme="dark"]) .empty-state[b-hquqqgv5xh] {
    background: var(--rame-bg-primary, #1e1e1e);
    border-color: var(--rame-border-medium, #505050);
}

:global([data-rame-theme="dark"]) .empty-state__title[b-hquqqgv5xh] {
    color: var(--rame-text-primary, #f0f0f0);
}

:global([data-rame-theme="dark"]) .empty-state__desc[b-hquqqgv5xh] {
    color: var(--rame-text-tertiary, #a0a0a0);
}

:global([data-rame-theme="dark"]) .empty-state__icon[b-hquqqgv5xh] {
    color: var(--rame-text-muted, #888888);
}

/* ========== MOBILE STACK (additional rules) ========== */
@media (max-width: 640px) {
    .source-form__actions[b-hquqqgv5xh],
    .source-item[b-hquqqgv5xh] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--rame-space-2, 8px);
    }

    .source-form__actions > *[b-hquqqgv5xh],
    .source-item > *[b-hquqqgv5xh] {
        width: 100%;
    }

    .field-row--toggle[b-hquqqgv5xh] {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    table[b-hquqqgv5xh] {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    input[b-hquqqgv5xh],
    textarea[b-hquqqgv5xh],
    select[b-hquqqgv5xh] {
        font-size: 16px; /* prevents iOS auto-zoom */
    }
}
/* _content/Rame.Blazor.Server/Components/AI/Tabs/AgentTestingTab.razor.rz.scp.css */
/* ============================================================
   AgentTestingTab — Full-height chat experience
   ============================================================ */

.testing-tab[b-tttyg7q974] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}

/* ── Testing header ── */

.testing-header[b-tttyg7q974] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    flex-shrink: 0;
}

.testing-header-left[b-tttyg7q974] {
    flex: 1;
    min-width: 0;
}

.tab-title[b-tttyg7q974] {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary, #1e293b);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}

.tab-subtitle[b-tttyg7q974] {
    font-size: 13px;
    color: var(--color-text-secondary, #64748b);
    margin: 0;
}

.btn-clear[b-tttyg7q974] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: transparent;
    color: var(--color-text-tertiary, #94a3b8);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 7px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-clear:hover[b-tttyg7q974] {
    color: var(--color-error, #ef4444);
    border-color: #fca5a5;
    background: var(--color-error-light, #fee2e2);
}

/* ── Chat container — fills remaining space ── */

.chat-container[b-tttyg7q974] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-primary, #ffffff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px var(--color-shadow, rgba(0,0,0,0.06));
    /* Use viewport-based height to fill the full available space */
    min-height: calc(100vh - 260px);
}

/* ── Messages area ── */

.messages-area[b-tttyg7q974] {
    flex: 1;
    overflow-y: auto;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    scroll-behavior: smooth;
}

/* ── Empty chat state ── */

.chat-empty[b-tttyg7q974] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 12px;
    text-align: center;
    padding: 48px 32px;
}

.chat-empty__icon[b-tttyg7q974] {
    color: var(--color-text-tertiary, #94a3b8);
    opacity: 0.6;
}

.chat-empty__title[b-tttyg7q974] {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-secondary, #64748b);
    margin: 0;
}

.chat-empty__desc[b-tttyg7q974] {
    font-size: 13px;
    color: var(--color-text-tertiary, #94a3b8);
    margin: 0;
    max-width: 280px;
    line-height: 1.6;
}

/* ── Messages ── */

.message[b-tttyg7q974] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.message--user[b-tttyg7q974] {
    justify-content: flex-end;
}

.message--assistant[b-tttyg7q974] {
    justify-content: flex-start;
}

/* Message avatars */
.message-avatar[b-tttyg7q974] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 2px;
}

.message-avatar--agent[b-tttyg7q974] {
    background: var(--color-primary-light, #e0e7ff);
    color: var(--color-primary, #6366f1);
}

.message-avatar--user[b-tttyg7q974] {
    background: var(--color-bg-tertiary, #f1f5f9);
    color: var(--color-text-secondary, #64748b);
}

/* Bubbles */
.message-bubble[b-tttyg7q974] {
    max-width: 68%;
    padding: 11px 15px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.message--user .message-bubble[b-tttyg7q974] {
    background: var(--color-primary, #6366f1);
    color: #ffffff;
    border-bottom-right-radius: 4px;
}

.message--assistant .message-bubble[b-tttyg7q974] {
    background: var(--color-bg-secondary, #f8fafc);
    color: var(--color-text-primary, #1e293b);
    border: 1px solid var(--color-border, #e2e8f0);
    border-bottom-left-radius: 4px;
}

/* ── Typing indicator ── */

.message-bubble--typing[b-tttyg7q974] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 14px 16px;
}

.typing-dot[b-tttyg7q974] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-text-tertiary, #94a3b8);
    animation: bounce-b-tttyg7q974 1.2s infinite;
}

.typing-dot:nth-child(2)[b-tttyg7q974] { animation-delay: 0.2s; }
.typing-dot:nth-child(3)[b-tttyg7q974] { animation-delay: 0.4s; }

@keyframes bounce-b-tttyg7q974 {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-5px); }
}

/* ── Error banner ── */

.error-banner[b-tttyg7q974] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--color-error-light, #fee2e2);
    color: #991b1b;
    border-top: 1px solid #fca5a5;
    font-size: 13px;
    flex-shrink: 0;
}

/* ── Input area ── */

.input-area[b-tttyg7q974] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid var(--color-border, #e2e8f0);
    background: var(--color-bg-primary, #ffffff);
    flex-shrink: 0;
}

.chat-input[b-tttyg7q974] {
    flex: 1;
    padding: 10px 13px;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 10px;
    font-size: 13px;
    font-family: inherit;
    color: var(--color-text-primary, #1e293b);
    background: var(--color-bg-secondary, #f8fafc);
    outline: none;
    resize: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    line-height: 1.5;
}

.chat-input:focus[b-tttyg7q974] {
    border-color: var(--color-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
    background: var(--color-bg-primary, #ffffff);
}

.chat-input:disabled[b-tttyg7q974] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-send[b-tttyg7q974] {
    width: 42px;
    height: 42px;
    background: var(--color-primary, #6366f1);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-send:hover:not([disabled])[b-tttyg7q974] {
    background: var(--color-primary-hover, #4f46e5);
    transform: translateY(-1px);
}

.btn-send:active:not([disabled])[b-tttyg7q974] {
    transform: translateY(0);
}

.btn-send[disabled][b-tttyg7q974] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

/* Spinner */
.spinner-small[b-tttyg7q974] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin-b-tttyg7q974 0.7s linear infinite;
}

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

/* ── Dark mode ── */

:global([data-rame-theme="dark"]) .testing-header[b-tttyg7q974] {
    border-bottom-color: #334155;
}

:global([data-rame-theme="dark"]) .tab-title[b-tttyg7q974] {
    color: #f1f5f9;
}

:global([data-rame-theme="dark"]) .chat-container[b-tttyg7q974] {
    background: #1e293b;
    border-color: #334155;
}

:global([data-rame-theme="dark"]) .message--assistant .message-bubble[b-tttyg7q974] {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

:global([data-rame-theme="dark"]) .message-avatar--agent[b-tttyg7q974] {
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
}

:global([data-rame-theme="dark"]) .message-avatar--user[b-tttyg7q974] {
    background: #334155;
    color: #94a3b8;
}

:global([data-rame-theme="dark"]) .input-area[b-tttyg7q974] {
    background: #1e293b;
    border-top-color: #334155;
}

:global([data-rame-theme="dark"]) .chat-input[b-tttyg7q974] {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

:global([data-rame-theme="dark"]) .chat-input:focus[b-tttyg7q974] {
    background: #0f172a;
}

:global([data-rame-theme="dark"]) .error-banner[b-tttyg7q974] {
    background: rgba(239, 68, 68, 0.15);
    border-top-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

/* ========== MOBILE STACK ========== */
@media (max-width: 640px) {
    .testing-header[b-tttyg7q974] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--rame-space-2, 8px);
    }

    .testing-header > *[b-tttyg7q974] {
        width: 100%;
    }

    .chat-container[b-tttyg7q974] {
        min-height: calc(100vh - 220px);
    }

    .message-bubble[b-tttyg7q974] {
        max-width: 85%;
    }

    table[b-tttyg7q974] {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    input[b-tttyg7q974],
    textarea[b-tttyg7q974],
    select[b-tttyg7q974] {
        font-size: 16px; /* prevents iOS auto-zoom */
    }
}
/* _content/Rame.Blazor.Server/Components/Analytics/AdDetailDrawer.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
   Ad Detail Drawer — editorial redesign
   Cinematic hero + KPIs with per-platform breakdown +
   sparkline + enriched leads table + external link CTA.
   ═══════════════════════════════════════════════════════ */

.ad-drawer[b-3ou1t18h1n] {
    --ig-stroke: #d62976;
    --fb-stroke: #1877f2;

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(720px, 100vw);
    background: var(--rame-bg-primary, #ffffff);
    box-shadow: -16px 0 48px -8px rgba(15, 23, 42, 0.14);
    z-index: 1101;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 360ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 360ms;
    outline: none;
    visibility: hidden;
    pointer-events: none;
}

.ad-drawer.is-open[b-3ou1t18h1n] {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 360ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear;
}

.ad-drawer-backdrop[b-3ou1t18h1n] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.38);
    backdrop-filter: blur(2px) saturate(110%);
    -webkit-backdrop-filter: blur(2px) saturate(110%);
    z-index: 1100;
    animation: backdropFade-b-3ou1t18h1n 240ms ease-out both;
}

@keyframes backdropFade-b-3ou1t18h1n {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════ */

.ad-drawer__hero[b-3ou1t18h1n] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 360px;
    overflow: hidden;
    flex-shrink: 0;
    isolation: isolate;
}

.ad-drawer__hero-media[b-3ou1t18h1n] {
    position: absolute;
    inset: 0;
    background: var(--rame-bg-tertiary, #1f2126);
    overflow: hidden;
}

.ad-drawer__hero[data-platform="ig"] .ad-drawer__hero-media[b-3ou1t18h1n] {
    background: linear-gradient(135deg, #feda75 0%, #fa7e1e 22%, #d62976 50%, #962fbf 75%, #4f5bd5 100%);
}

.ad-drawer__hero[data-platform="fb"] .ad-drawer__hero-media[b-3ou1t18h1n] {
    background: linear-gradient(135deg, #1877f2 0%, #0a4fb8 100%);
}

.ad-drawer__hero[data-platform="neutral"] .ad-drawer__hero-media[b-3ou1t18h1n] {
    background: linear-gradient(135deg, #334155 0%, #0f172a 100%);
}

/* Multi-platform: smooth IG→FB blend. Avoids picking a side when the ad
   actually ran across both feeds. The badges in the top-left still report
   the real attribution. */
.ad-drawer__hero[data-platform="multi"] .ad-drawer__hero-media[b-3ou1t18h1n] {
    background: linear-gradient(115deg,
        #d62976 0%,
        #962fbf 30%,
        #4f5bd5 55%,
        #1877f2 100%);
}

.ad-drawer__hero-el[b-3ou1t18h1n] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.ad-drawer__hero-fallback[b-3ou1t18h1n] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    pointer-events: none;
}

.ad-drawer__hero-fallback svg[b-3ou1t18h1n] {
    opacity: 0.78;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

/* Edge gradient so overlay content reads on any image. */
.ad-drawer__hero[b-3ou1t18h1n]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0) 30%,
        rgba(0, 0, 0, 0) 70%,
        rgba(0, 0, 0, 0.32) 100%
    );
    pointer-events: none;
}

.ad-drawer__hero-overlay[b-3ou1t18h1n] {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 14px 16px;
    pointer-events: none;
}

.ad-drawer__hero-platforms[b-3ou1t18h1n] {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: auto;
}

.ad-drawer__platform[b-3ou1t18h1n] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    color: #ffffff;
    border-radius: 999px;
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.ad-drawer__platform--ig[b-3ou1t18h1n] {
    background: linear-gradient(120deg, rgba(214, 41, 118, 0.92), rgba(150, 47, 191, 0.92));
}

.ad-drawer__platform--fb[b-3ou1t18h1n] {
    background: linear-gradient(120deg, rgba(24, 119, 242, 0.92), rgba(10, 79, 184, 0.92));
}

.ad-drawer__platform--neutral[b-3ou1t18h1n] {
    background: rgba(31, 41, 55, 0.78);
}

.ad-drawer__close[b-3ou1t18h1n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background-color 140ms ease, transform 140ms ease;
    pointer-events: auto;
}

.ad-drawer__close:hover[b-3ou1t18h1n] {
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.04);
}

.ad-drawer__close:focus-visible[b-3ou1t18h1n] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
}

/* ═══════════════════════════════════════════════════════
   BODY
   ═══════════════════════════════════════════════════════ */

.ad-drawer__body[b-3ou1t18h1n] {
    flex: 1;
    overflow-y: auto;
    padding: 22px 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    scrollbar-width: thin;
}

/* === Copy === */

.ad-drawer__copy[b-3ou1t18h1n] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ad-drawer__headline[b-3ou1t18h1n] {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -0.012em;
    color: var(--rame-text-primary, #0f172a);
}

.ad-drawer__body-text[b-3ou1t18h1n] {
    margin: 0;
    font-size: 13px;
    line-height: 1.62;
    color: var(--rame-text-secondary, #475569);
    white-space: pre-wrap;
    word-break: break-word;
}

/* === KPIs === */

.ad-drawer__kpis[b-3ou1t18h1n] {
    display: grid;
    grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr;
    align-items: stretch;
    gap: 14px;
    padding: 18px 16px;
    background: var(--rame-bg-secondary, #fafbfc);
    border: 1px solid var(--rame-border-light, #eef0f4);
    border-radius: 14px;
}

.ad-drawer__kpi[b-3ou1t18h1n] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ad-drawer__kpi-divider[b-3ou1t18h1n] {
    width: 1px;
    background: var(--rame-border-light, #eef0f4);
    align-self: stretch;
}

.ad-drawer__kpi-value[b-3ou1t18h1n] {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.028em;
    color: var(--rame-text-primary, #0f172a);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

.ad-drawer__kpi-label[b-3ou1t18h1n] {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rame-text-tertiary, #94a3b8);
}

.ad-drawer__kpi-breakdown[b-3ou1t18h1n] {
    display: inline-flex;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.ad-drawer__kpi-chip[b-3ou1t18h1n] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px 2px 6px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background: var(--rame-bg-tertiary, #f0f2f5);
    color: var(--rame-text-secondary, #475569);
}

.ad-drawer__kpi-chip-dot[b-3ou1t18h1n] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ad-drawer__kpi-chip--ig .ad-drawer__kpi-chip-dot[b-3ou1t18h1n] {
    background: var(--ig-stroke);
}

.ad-drawer__kpi-chip--fb .ad-drawer__kpi-chip-dot[b-3ou1t18h1n] {
    background: var(--fb-stroke);
}

.ad-drawer__kpi-chip--neutral .ad-drawer__kpi-chip-dot[b-3ou1t18h1n] {
    background: var(--rame-text-tertiary, #94a3b8);
}

/* === Secondary operational KPIs ===
   Sit below the headline metrics card. Slightly smaller numbers so visual
   hierarchy reads: bold totals first, then context. Three lines per cell
   (value · label · extra context) — the extra line is where the user
   actually decides whether the number is good or bad. */

.ad-drawer__sub-kpis[b-3ou1t18h1n] {
    display: grid;
    grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr;
    align-items: stretch;
    gap: 14px;
    padding: 16px 16px;
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #eef0f4);
    border-radius: 14px;
}

.ad-drawer__sub-kpi[b-3ou1t18h1n] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ad-drawer__sub-kpi-divider[b-3ou1t18h1n] {
    width: 1px;
    background: var(--rame-border-light, #eef0f4);
    align-self: stretch;
}

.ad-drawer__sub-kpi-value[b-3ou1t18h1n] {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--rame-text-primary, #0f172a);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

.ad-drawer__sub-kpi-label[b-3ou1t18h1n] {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rame-text-tertiary, #94a3b8);
}

.ad-drawer__sub-kpi-extra[b-3ou1t18h1n] {
    font-size: 11px;
    color: var(--rame-text-secondary, #475569);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

.ad-drawer__sub-kpi-extra--warn[b-3ou1t18h1n] {
    color: #b45309;
    font-weight: 600;
}

/* === Dates === */

.ad-drawer__dates[b-3ou1t18h1n] {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    padding: 4px 4px 0;
}

.ad-drawer__date[b-3ou1t18h1n] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ad-drawer__date-label[b-3ou1t18h1n] {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rame-text-tertiary, #94a3b8);
}

.ad-drawer__date-value[b-3ou1t18h1n] {
    font-size: 13px;
    color: var(--rame-text-primary, #0f172a);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* === Leads section === */

.ad-drawer__leads-section[b-3ou1t18h1n] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ad-drawer__leads-section-header[b-3ou1t18h1n] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.ad-drawer__section-title[b-3ou1t18h1n] {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rame-text-tertiary, #94a3b8);
}

.ad-drawer__leads-count[b-3ou1t18h1n] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--rame-text-secondary, #475569);
    font-variant-numeric: tabular-nums;
}

.ad-drawer__leads-table[b-3ou1t18h1n] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rame-border-light, #eef0f4);
    border-radius: 12px;
    overflow: hidden;
    background: var(--rame-bg-primary, #ffffff);
}

.ad-drawer__leads-head[b-3ou1t18h1n] {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) 36px minmax(0, 1.4fr) minmax(0, 1.1fr);
    gap: 12px;
    padding: 10px 14px;
    background: var(--rame-bg-secondary, #fafbfc);
    border-bottom: 1px solid var(--rame-border-light, #eef0f4);
    font-size: 9.5px;
    font-weight: 700;
    color: var(--rame-text-tertiary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.ad-drawer__leads-head-right[b-3ou1t18h1n] {
    text-align: right;
}

.ad-drawer__leads-count-of[b-3ou1t18h1n] {
    color: var(--rame-text-tertiary, #94a3b8);
    font-weight: 500;
    margin-left: 4px;
}

/* ═══════════════════════════════════════════════════════
   Leads toolbar — search + sort
   ═══════════════════════════════════════════════════════ */

.ad-drawer__leads-toolbar[b-3ou1t18h1n] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.ad-drawer__search[b-3ou1t18h1n] {
    position: relative;
    flex: 1;
    min-width: 220px;
    display: flex;
    align-items: center;
}

.ad-drawer__search-icon[b-3ou1t18h1n] {
    position: absolute;
    left: 12px;
    color: var(--rame-text-tertiary, #94a3b8);
    pointer-events: none;
}

.ad-drawer__search-input[b-3ou1t18h1n] {
    width: 100%;
    padding: 9px 36px 9px 34px;
    font-size: 13px;
    line-height: 1.3;
    color: var(--rame-text-primary, #0f172a);
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #eef0f4);
    border-radius: 10px;
    outline: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.ad-drawer__search-input[b-3ou1t18h1n]::placeholder {
    color: var(--rame-text-tertiary, #94a3b8);
}

.ad-drawer__search-input:focus[b-3ou1t18h1n] {
    border-color: var(--rame-primary, #0084ff);
    box-shadow: 0 0 0 3px rgba(0, 132, 255, 0.14);
}

.ad-drawer__search-clear[b-3ou1t18h1n] {
    position: absolute;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--rame-bg-tertiary, #f0f2f5);
    color: var(--rame-text-secondary, #475569);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.ad-drawer__search-clear:hover[b-3ou1t18h1n] {
    background: var(--rame-border-light, #e6e8ec);
    color: var(--rame-text-primary, #0f172a);
}

.ad-drawer__sort[b-3ou1t18h1n] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ad-drawer__sort label[b-3ou1t18h1n] {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rame-text-tertiary, #94a3b8);
}

.ad-drawer__sort-select[b-3ou1t18h1n],
.ad-drawer__page-size-select[b-3ou1t18h1n] {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--rame-bg-primary, #ffffff);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    border: 1px solid var(--rame-border-light, #eef0f4);
    border-radius: 10px;
    padding: 8px 30px 8px 12px;
    font-size: 12.5px;
    color: var(--rame-text-primary, #0f172a);
    cursor: pointer;
    transition: border-color 120ms ease;
}

.ad-drawer__sort-select:focus[b-3ou1t18h1n],
.ad-drawer__page-size-select:focus[b-3ou1t18h1n] {
    outline: none;
    border-color: var(--rame-primary, #0084ff);
    box-shadow: 0 0 0 3px rgba(0, 132, 255, 0.14);
}

/* ═══════════════════════════════════════════════════════
   Filter chips
   ═══════════════════════════════════════════════════════ */

.ad-drawer__chips[b-3ou1t18h1n] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ad-drawer__chip-group[b-3ou1t18h1n] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ad-drawer__chip-group-label[b-3ou1t18h1n] {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rame-text-tertiary, #94a3b8);
    margin-right: 4px;
    min-width: 70px;
}

.ad-drawer__chip[b-3ou1t18h1n] {
    --chip-bg: var(--rame-bg-tertiary, #f0f2f5);
    --chip-color: var(--rame-text-secondary, #475569);
    --chip-border: transparent;

    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--chip-color);
    background: var(--chip-bg);
    border: 1px solid var(--chip-border);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease;
    user-select: none;
}

.ad-drawer__chip:hover[b-3ou1t18h1n] {
    background: var(--rame-border-light, #e6e8ec);
}

.ad-drawer__chip.is-active[b-3ou1t18h1n] {
    background: var(--rame-text-primary, #0f172a);
    color: #ffffff;
    border-color: var(--rame-text-primary, #0f172a);
}

.ad-drawer__chip--ig.is-active[b-3ou1t18h1n] {
    background: linear-gradient(120deg, #d62976 0%, #962fbf 100%);
    border-color: transparent;
    color: #ffffff;
}

.ad-drawer__chip--fb.is-active[b-3ou1t18h1n] {
    background: linear-gradient(120deg, #1877f2 0%, #0a4fb8 100%);
    border-color: transparent;
    color: #ffffff;
}

.ad-drawer__chip--won.is-active[b-3ou1t18h1n] {
    background: #15803d;
    border-color: transparent;
    color: #ffffff;
}

.ad-drawer__chip--lost.is-active[b-3ou1t18h1n] {
    background: #9f1239;
    border-color: transparent;
    color: #ffffff;
}

.ad-drawer__chip--active.is-active[b-3ou1t18h1n] {
    background: var(--rame-primary, #0084ff);
    border-color: transparent;
    color: #ffffff;
}

.ad-drawer__chip--ghost[b-3ou1t18h1n] {
    background: transparent;
    border: 1px dashed var(--rame-border-medium, #d4d7dd);
}

.ad-drawer__chip--ghost:hover[b-3ou1t18h1n] {
    border-color: var(--rame-primary, #0084ff);
    color: var(--rame-primary, #0084ff);
}

/* ═══════════════════════════════════════════════════════
   Empty state inside leads section
   ═══════════════════════════════════════════════════════ */

.ad-drawer__leads-empty[b-3ou1t18h1n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px 16px;
    border: 1px dashed var(--rame-border-medium, #d4d7dd);
    border-radius: 12px;
    color: var(--rame-text-tertiary, #94a3b8);
    font-size: 12.5px;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════
   Pagination
   ═══════════════════════════════════════════════════════ */

.ad-drawer__pagination[b-3ou1t18h1n] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 4px 4px 0;
}

.ad-drawer__pagination-info[b-3ou1t18h1n] {
    font-size: 11.5px;
    color: var(--rame-text-secondary, #475569);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.ad-drawer__pagination-info-of[b-3ou1t18h1n] {
    color: var(--rame-text-tertiary, #94a3b8);
    font-weight: 500;
    margin-left: 4px;
}

.ad-drawer__pagination-nav[b-3ou1t18h1n] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ad-drawer__page-btn[b-3ou1t18h1n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: var(--rame-bg-primary, #ffffff);
    color: var(--rame-text-secondary, #475569);
    border: 1px solid var(--rame-border-light, #eef0f4);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.ad-drawer__page-btn:hover:not(:disabled)[b-3ou1t18h1n] {
    background: var(--rame-bg-secondary, #fafbfc);
    border-color: var(--rame-border-medium, #d4d7dd);
    color: var(--rame-text-primary, #0f172a);
}

.ad-drawer__page-btn:disabled[b-3ou1t18h1n] {
    opacity: 0.4;
    cursor: not-allowed;
}

.ad-drawer__page-indicator[b-3ou1t18h1n] {
    font-size: 11.5px;
    color: var(--rame-text-secondary, #475569);
    padding: 0 8px;
    font-variant-numeric: tabular-nums;
}

.ad-drawer__page-indicator strong[b-3ou1t18h1n] {
    color: var(--rame-text-primary, #0f172a);
    font-weight: 700;
}

.ad-drawer__page-size[b-3ou1t18h1n] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.ad-drawer__page-size-label[b-3ou1t18h1n] {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rame-text-tertiary, #94a3b8);
}

/* ═══════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════ */

.ad-drawer__footer[b-3ou1t18h1n] {
    display: flex;
    justify-content: flex-end;
    padding: 14px 24px;
    border-top: 1px solid var(--rame-border-light, #eef0f4);
    flex-shrink: 0;
    background: var(--rame-bg-primary, #ffffff);
}

.ad-drawer__meta-btn[b-3ou1t18h1n] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    background: var(--rame-text-primary, #0f172a);
    color: #ffffff;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.005em;
    text-decoration: none;
    transition: background-color 140ms ease, transform 140ms ease;
}

.ad-drawer__meta-btn:hover[b-3ou1t18h1n] {
    background: #1e293b;
    transform: translateY(-1px);
}

.ad-drawer__meta-btn:focus-visible[b-3ou1t18h1n] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.25);
}

/* ═══════════════════════════════════════════════════════
   LOADING
   ═══════════════════════════════════════════════════════ */

.ad-drawer__loading[b-3ou1t18h1n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex: 1;
    color: var(--rame-text-tertiary, #94a3b8);
}

.ad-drawer__spinner[b-3ou1t18h1n] {
    width: 30px;
    height: 30px;
    border: 2px solid var(--rame-border-light, #eef0f4);
    border-top-color: var(--rame-primary, #0084ff);
    border-radius: 50%;
    animation: spin-b-3ou1t18h1n 0.8s linear infinite;
}

@keyframes spin-b-3ou1t18h1n {
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════
   DARK
   ═══════════════════════════════════════════════════════ */

:global([data-rame-theme="dark"]) .ad-drawer[b-3ou1t18h1n] {
    background: var(--rame-bg-primary, #0f1115);
    box-shadow: -16px 0 48px -8px rgba(0, 0, 0, 0.6);
}

:global([data-rame-theme="dark"]) .ad-drawer__body[b-3ou1t18h1n],
:global([data-rame-theme="dark"]) .ad-drawer__footer[b-3ou1t18h1n] {
    background: var(--rame-bg-primary, #0f1115);
}

:global([data-rame-theme="dark"]) .ad-drawer__headline[b-3ou1t18h1n] {
    color: var(--rame-text-primary, #f1f5f9);
}

:global([data-rame-theme="dark"]) .ad-drawer__kpis[b-3ou1t18h1n] {
    background: var(--rame-bg-secondary, #16181c);
    border-color: var(--rame-border-light, #26282d);
}

:global([data-rame-theme="dark"]) .ad-drawer__kpi-divider[b-3ou1t18h1n] {
    background: var(--rame-border-light, #26282d);
}

:global([data-rame-theme="dark"]) .ad-drawer__kpi-value[b-3ou1t18h1n] {
    color: var(--rame-text-primary, #f1f5f9);
}

:global([data-rame-theme="dark"]) .ad-drawer__kpi-chip[b-3ou1t18h1n] {
    background: rgba(255, 255, 255, 0.05);
    color: var(--rame-text-secondary, #cbd5e1);
}

:global([data-rame-theme="dark"]) .ad-drawer__leads-table[b-3ou1t18h1n] {
    background: var(--rame-bg-secondary, #16181c);
    border-color: var(--rame-border-light, #26282d);
}

:global([data-rame-theme="dark"]) .ad-drawer__leads-head[b-3ou1t18h1n] {
    background: var(--rame-bg-tertiary, #1f2126);
    border-bottom-color: var(--rame-border-light, #26282d);
}

:global([data-rame-theme="dark"]) .ad-drawer__date-value[b-3ou1t18h1n] {
    color: var(--rame-text-primary, #f1f5f9);
}

:global([data-rame-theme="dark"]) .ad-drawer__meta-btn[b-3ou1t18h1n] {
    background: var(--rame-primary, #0084ff);
}

:global([data-rame-theme="dark"]) .ad-drawer__meta-btn:hover[b-3ou1t18h1n] {
    background: #006edc;
}

:global([data-rame-theme="dark"]) .ad-drawer__footer[b-3ou1t18h1n] {
    border-top-color: var(--rame-border-light, #26282d);
}

:global([data-rame-theme="dark"]) .ad-drawer__search-input[b-3ou1t18h1n],
:global([data-rame-theme="dark"]) .ad-drawer__sort-select[b-3ou1t18h1n],
:global([data-rame-theme="dark"]) .ad-drawer__page-size-select[b-3ou1t18h1n],
:global([data-rame-theme="dark"]) .ad-drawer__page-btn[b-3ou1t18h1n] {
    background-color: var(--rame-bg-secondary, #16181c);
    border-color: var(--rame-border-light, #26282d);
    color: var(--rame-text-primary, #f1f5f9);
}

:global([data-rame-theme="dark"]) .ad-drawer__chip[b-3ou1t18h1n] {
    background: rgba(255, 255, 255, 0.05);
    color: var(--rame-text-secondary, #cbd5e1);
}

:global([data-rame-theme="dark"]) .ad-drawer__chip:hover[b-3ou1t18h1n] {
    background: rgba(255, 255, 255, 0.1);
}

:global([data-rame-theme="dark"]) .ad-drawer__chip.is-active[b-3ou1t18h1n] {
    background: var(--rame-primary, #0084ff);
    color: #ffffff;
}

:global([data-rame-theme="dark"]) .ad-drawer__search-clear[b-3ou1t18h1n] {
    background: rgba(255, 255, 255, 0.08);
    color: var(--rame-text-secondary, #cbd5e1);
}

:global([data-rame-theme="dark"]) .ad-drawer__leads-empty[b-3ou1t18h1n] {
    border-color: var(--rame-border-light, #26282d);
}

:global([data-rame-theme="dark"]) .ad-drawer__page-indicator strong[b-3ou1t18h1n],
:global([data-rame-theme="dark"]) .ad-drawer__pagination-info[b-3ou1t18h1n] {
    color: var(--rame-text-primary, #f1f5f9);
}

:global([data-rame-theme="dark"]) .ad-drawer__sub-kpis[b-3ou1t18h1n] {
    background: var(--rame-bg-secondary, #16181c);
    border-color: var(--rame-border-light, #26282d);
}

:global([data-rame-theme="dark"]) .ad-drawer__sub-kpi-divider[b-3ou1t18h1n] {
    background: var(--rame-border-light, #26282d);
}

:global([data-rame-theme="dark"]) .ad-drawer__sub-kpi-value[b-3ou1t18h1n] {
    color: var(--rame-text-primary, #f1f5f9);
}

:global([data-rame-theme="dark"]) .ad-drawer__sub-kpi-extra--warn[b-3ou1t18h1n] {
    color: #fbbf24;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    .ad-drawer__hero[b-3ou1t18h1n] {
        aspect-ratio: 16 / 12;
    }

    .ad-drawer__kpis[b-3ou1t18h1n],
    .ad-drawer__sub-kpis[b-3ou1t18h1n] {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: none;
        gap: 16px;
    }

    .ad-drawer__kpi-divider[b-3ou1t18h1n],
    .ad-drawer__sub-kpi-divider[b-3ou1t18h1n] {
        display: none;
    }

    .ad-drawer__leads-head[b-3ou1t18h1n] {
        grid-template-columns: minmax(0, 1.4fr) 28px minmax(0, 1fr);
    }

    .ad-drawer__leads-head > :nth-child(3)[b-3ou1t18h1n] {
        display: none;
    }

    .ad-drawer__pagination[b-3ou1t18h1n] {
        grid-template-columns: 1fr;
        gap: 8px;
        text-align: center;
    }

    .ad-drawer__pagination-info[b-3ou1t18h1n],
    .ad-drawer__pagination-nav[b-3ou1t18h1n],
    .ad-drawer__page-size[b-3ou1t18h1n] {
        justify-self: center;
    }

    .ad-drawer__chip-group[b-3ou1t18h1n] {
        flex-wrap: wrap;
    }

    .ad-drawer__chip-group-label[b-3ou1t18h1n] {
        min-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ad-drawer[b-3ou1t18h1n],
    .ad-drawer__close[b-3ou1t18h1n],
    .ad-drawer__meta-btn[b-3ou1t18h1n] {
        transition: none;
    }
}
/* _content/Rame.Blazor.Server/Components/Analytics/Ads/AdCard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
   Ad Card — Refined editorial layout
   Cinematic creative thumbnail with overlay platform badges,
   editorial headline / body, then a numbers-first stats block
   capped by a share-of-voice bar. Hairlines, not boxes.
   ═══════════════════════════════════════════════════════ */

.ad-card[b-rui3mqgrnm] {
    --ig-from: #feda75;
    --ig-via-1: #fa7e1e;
    --ig-via-2: #d62976;
    --ig-via-3: #962fbf;
    --ig-to: #4f5bd5;
    --ig-solid: #d62976;
    --fb-solid: #1877f2;
    --fb-deep: #0a4fb8;

    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #e6e8ec);
    border-radius: 14px;
    overflow: hidden;
    isolation: isolate;
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 160ms ease;
}

.ad-card.is-clickable[b-rui3mqgrnm] {
    cursor: pointer;
}

.ad-card.is-clickable:hover[b-rui3mqgrnm] {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px -16px rgba(15, 23, 42, 0.18),
                0 4px 12px -6px rgba(15, 23, 42, 0.08);
    border-color: var(--rame-border-medium, #d4d7dd);
}

.ad-card.is-clickable:focus-visible[b-rui3mqgrnm] {
    outline: none;
    border-color: var(--rame-primary, #0084ff);
    box-shadow: 0 0 0 3px rgba(0, 132, 255, 0.18);
}

/* ═══════════════════════════════════════════════════════
   Media — cinematic 1:1 frame with fallback under media
   ═══════════════════════════════════════════════════════ */

.ad-card__media[b-rui3mqgrnm] {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--rame-bg-tertiary, #f1f3f7);
}

.ad-card__media-el[b-rui3mqgrnm] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Branded placeholder lives behind the media element. If the media is missing
   or fails (onerror removes the el), the placeholder is revealed naturally. */
.ad-card__media-fallback[b-rui3mqgrnm] {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9);
}

.ad-card__media-fallback-glyph[b-rui3mqgrnm] {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
    opacity: 0.85;
}

/* Platform-specific gradient backdrop (only visible if media is missing). */
.ad-card__media[data-platform="ig"][b-rui3mqgrnm] {
    background: linear-gradient(135deg, var(--ig-from) 0%, var(--ig-via-1) 22%, var(--ig-via-2) 50%, var(--ig-via-3) 75%, var(--ig-to) 100%);
}

.ad-card__media[data-platform="fb"][b-rui3mqgrnm] {
    background: linear-gradient(135deg, var(--fb-solid) 0%, var(--fb-deep) 100%);
}

.ad-card__media[data-platform="neutral"][b-rui3mqgrnm] {
    background: linear-gradient(135deg, #475569 0%, #1f2937 100%);
}

/* Multi-platform: smooth IG→FB blend so the placeholder doesn't bias visually
   toward one surface when the ad actually ran on several. */
.ad-card__media[data-platform="multi"][b-rui3mqgrnm] {
    background: linear-gradient(115deg,
        var(--ig-via-2) 0%,
        var(--ig-via-3) 30%,
        var(--ig-to) 55%,
        var(--fb-solid) 100%);
}

/* Subtle bottom vignette to ensure legend & badges read on any creative. */
.ad-card__media[b-rui3mqgrnm]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.32) 0%,
        rgba(0, 0, 0, 0) 28%,
        rgba(0, 0, 0, 0) 70%,
        rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
}

.ad-card__media-overlay[b-rui3mqgrnm] {
    position: absolute;
    inset: 10px;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    pointer-events: none;
    gap: 8px;
}

/* ═══════════════════════════════════════════════════════
   Platform badges on the creative
   ═══════════════════════════════════════════════════════ */

.ad-card__platforms[b-rui3mqgrnm] {
    display: inline-flex;
    gap: 6px;
}

.ad-card__platform[b-rui3mqgrnm] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    color: #ffffff;
    border-radius: 999px;
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.ad-card__platform--ig[b-rui3mqgrnm] {
    background: linear-gradient(120deg, rgba(214, 41, 118, 0.92), rgba(150, 47, 191, 0.92));
}

.ad-card__platform--fb[b-rui3mqgrnm] {
    background: linear-gradient(120deg, rgba(24, 119, 242, 0.92), rgba(10, 79, 184, 0.92));
}

.ad-card__platform--neutral[b-rui3mqgrnm] {
    background: rgba(31, 41, 55, 0.78);
}

.ad-card__platform svg[b-rui3mqgrnm] {
    display: block;
}

/* ═══════════════════════════════════════════════════════
   Media chip (video/foto indicator)
   ═══════════════════════════════════════════════════════ */

.ad-card__media-chip[b-rui3mqgrnm] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    color: rgba(255, 255, 255, 0.96);
    background: rgba(0, 0, 0, 0.55);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.ad-card__media-chip.is-video[b-rui3mqgrnm] {
    background: rgba(0, 0, 0, 0.7);
}

.ad-card__media-chip svg[b-rui3mqgrnm] {
    display: block;
}

/* ═══════════════════════════════════════════════════════
   Body — typography-first
   ═══════════════════════════════════════════════════════ */

.ad-card__body[b-rui3mqgrnm] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 16px 18px;
    flex: 1;
}

.ad-card__headline[b-rui3mqgrnm] {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.32;
    letter-spacing: -0.005em;
    color: var(--rame-text-primary, #0f172a);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ad-card__excerpt[b-rui3mqgrnm] {
    margin: 0;
    margin-top: -6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--rame-text-tertiary, #6b7280);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* ═══════════════════════════════════════════════════════
   Stats — the editorial KPI row
   Display number is the hero. Tabular numerals always.
   ═══════════════════════════════════════════════════════ */

.ad-card__stats[b-rui3mqgrnm] {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    align-items: end;
    column-gap: 14px;
    padding-top: 4px;
}

.ad-card__stat[b-rui3mqgrnm] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ad-card__stat-value[b-rui3mqgrnm] {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--rame-text-primary, #0f172a);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

.ad-card__stat-label[b-rui3mqgrnm] {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rame-text-tertiary, #94a3b8);
}

.ad-card__stat-divider[b-rui3mqgrnm] {
    width: 1px;
    height: 28px;
    background: var(--rame-border-light, #e6e8ec);
    align-self: end;
    margin-bottom: 6px;
}

/* ═══════════════════════════════════════════════════════
   Platform breakdown — share-of-voice bar + legend
   ═══════════════════════════════════════════════════════ */

.ad-card__breakdown[b-rui3mqgrnm] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 2px;
}

.ad-card__bar[b-rui3mqgrnm] {
    display: flex;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--rame-bg-tertiary, #eef0f4);
    gap: 2px;
}

.ad-card__bar-seg[b-rui3mqgrnm] {
    height: 100%;
    min-width: 4px;
    transition: filter 160ms ease;
}

.ad-card__bar-seg--ig[b-rui3mqgrnm] {
    background: linear-gradient(90deg, var(--ig-via-2) 0%, var(--ig-via-3) 100%);
}

.ad-card__bar-seg--fb[b-rui3mqgrnm] {
    background: linear-gradient(90deg, var(--fb-solid) 0%, var(--fb-deep) 100%);
}

.ad-card__bar-seg--neutral[b-rui3mqgrnm] {
    background: var(--rame-text-tertiary, #94a3b8);
}

.ad-card.is-clickable:hover .ad-card__bar-seg[b-rui3mqgrnm] {
    filter: saturate(1.15) brightness(1.04);
}

.ad-card__legend[b-rui3mqgrnm] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-variant-numeric: tabular-nums;
}

.ad-card__legend-item[b-rui3mqgrnm] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.ad-card__legend-dot[b-rui3mqgrnm] {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.ad-card__legend-dot--ig[b-rui3mqgrnm] {
    background: linear-gradient(135deg, var(--ig-via-2), var(--ig-via-3));
}

.ad-card__legend-dot--fb[b-rui3mqgrnm] {
    background: linear-gradient(135deg, var(--fb-solid), var(--fb-deep));
}

.ad-card__legend-dot--neutral[b-rui3mqgrnm] {
    background: var(--rame-text-tertiary, #94a3b8);
}

.ad-card__legend-text[b-rui3mqgrnm] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1;
}

.ad-card__legend-name[b-rui3mqgrnm] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--rame-text-secondary, #475569);
    letter-spacing: 0.005em;
}

.ad-card__legend-num[b-rui3mqgrnm] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--rame-text-primary, #0f172a);
    font-variant-numeric: tabular-nums;
}

.ad-card__legend-pct[b-rui3mqgrnm] {
    font-size: 10px;
    color: var(--rame-text-tertiary, #94a3b8);
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════
   Dark theme
   ═══════════════════════════════════════════════════════ */

:global([data-rame-theme="dark"]) .ad-card[b-rui3mqgrnm] {
    background: var(--rame-bg-secondary, #16181c);
    border-color: var(--rame-border-light, #26282d);
}

:global([data-rame-theme="dark"]) .ad-card.is-clickable:hover[b-rui3mqgrnm] {
    box-shadow: 0 16px 36px -16px rgba(0, 0, 0, 0.6),
                0 4px 12px -6px rgba(0, 0, 0, 0.4);
    border-color: var(--rame-border-medium, #3a3d44);
}

:global([data-rame-theme="dark"]) .ad-card__media[b-rui3mqgrnm] {
    background-color: var(--rame-bg-tertiary, #1f2126);
}

:global([data-rame-theme="dark"]) .ad-card__bar[b-rui3mqgrnm] {
    background: rgba(255, 255, 255, 0.06);
}

:global([data-rame-theme="dark"]) .ad-card__stat-divider[b-rui3mqgrnm] {
    background: var(--rame-border-light, #26282d);
}

:global([data-rame-theme="dark"]) .ad-card__legend-num[b-rui3mqgrnm] {
    color: var(--rame-text-primary, #f1f5f9);
}

:global([data-rame-theme="dark"]) .ad-card__headline[b-rui3mqgrnm] {
    color: var(--rame-text-primary, #f1f5f9);
}

:global([data-rame-theme="dark"]) .ad-card__stat-value[b-rui3mqgrnm] {
    color: var(--rame-text-primary, #f1f5f9);
}

/* ═══════════════════════════════════════════════════════
   Reduced motion
   ═══════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .ad-card[b-rui3mqgrnm] {
        transition: none;
    }
    .ad-card.is-clickable:hover[b-rui3mqgrnm] {
        transform: none;
    }
}
/* _content/Rame.Blazor.Server/Components/Analytics/Ads/AdGridControls.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
   Ad Grid Controls — refined filter bar
   Sits above the cards grid. Two DxComboBoxes + a live count.
   Hairline borders, generous spacing, tabular numerals.
   ═══════════════════════════════════════════════════════ */

.ad-grid-controls[b-3egik2qxz5] {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    padding: 14px 16px;
    background: var(--rame-bg-secondary, #fafbfc);
    border: 1px solid var(--rame-border-light, #eef0f4);
    border-radius: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.ad-grid-controls__group[b-3egik2qxz5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
}

.ad-grid-controls__label[b-3egik2qxz5] {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rame-text-tertiary, #94a3b8);
}

.ad-grid-controls__field[b-3egik2qxz5] {
    min-width: 180px;
}

/* DevExpress combobox shouldn't fight the design — softer border, less chrome. */
[b-3egik2qxz5] .ad-grid-controls__combo .dxbs-edit-input {
    font-size: 13px;
}

.ad-grid-controls__meta[b-3egik2qxz5] {
    margin-left: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding-bottom: 6px;
}

.ad-grid-controls__count-value[b-3egik2qxz5] {
    font-size: 22px;
    font-weight: 600;
    color: var(--rame-text-primary, #0f172a);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.018em;
    line-height: 1;
}

.ad-grid-controls__count-label[b-3egik2qxz5] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rame-text-tertiary, #94a3b8);
}

.ad-grid-controls__count-extra[b-3egik2qxz5] {
    font-size: 11px;
    color: var(--rame-text-tertiary, #94a3b8);
    font-variant-numeric: tabular-nums;
    margin-left: 8px;
}

/* Dark theme */
:global([data-rame-theme="dark"]) .ad-grid-controls[b-3egik2qxz5] {
    background: var(--rame-bg-secondary, #16181c);
    border-color: var(--rame-border-light, #26282d);
}

:global([data-rame-theme="dark"]) .ad-grid-controls__count-value[b-3egik2qxz5] {
    color: var(--rame-text-primary, #f1f5f9);
}

/* Responsive */
@media (max-width: 720px) {
    .ad-grid-controls[b-3egik2qxz5] {
        flex-direction: column;
        align-items: stretch;
    }

    .ad-grid-controls__group[b-3egik2qxz5] {
        min-width: 0;
    }

    .ad-grid-controls__meta[b-3egik2qxz5] {
        margin-left: 0;
        padding-bottom: 0;
        padding-top: 4px;
        border-top: 1px solid var(--rame-border-light, #eef0f4);
    }
}
/* _content/Rame.Blazor.Server/Components/Analytics/Ads/AdLeadRow.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
   Ad Lead Row — table row inside the detail drawer
   Five columns: Name · Platform · Seller · Product · Status
   Tabular numerals, hairline separators, hover focus.
   ═══════════════════════════════════════════════════════ */

.ad-lead-row[b-rbg39hbgpp] {
    --ig-stroke: #d62976;
    --fb-stroke: #1877f2;

    display: grid;
    grid-template-columns: minmax(0, 1.6fr) 36px minmax(0, 1.4fr) minmax(0, 1.1fr);
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 10px 14px;
    background: var(--rame-bg-primary, #ffffff);
    border: none;
    border-bottom: 1px solid var(--rame-border-light, #f0f1f4);
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: background-color 140ms ease;
}

.ad-lead-row:last-of-type[b-rbg39hbgpp] {
    border-bottom: none;
}

.ad-lead-row:hover[b-rbg39hbgpp] {
    background: var(--rame-bg-secondary, #fafbfc);
}

.ad-lead-row:focus-visible[b-rbg39hbgpp] {
    outline: none;
    box-shadow: inset 2px 0 0 var(--rame-primary, #0084ff);
    background: var(--rame-bg-secondary, #fafbfc);
}

.ad-lead-row.is-won[b-rbg39hbgpp] {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.05), transparent 60%);
}

/* === Name === */
.ad-lead-row__name[b-rbg39hbgpp] {
    font-size: 13px;
    font-weight: 600;
    color: var(--rame-text-primary, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* === Platform === */
.ad-lead-row__platform[b-rbg39hbgpp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ad-lead-row__platform-chip[b-rbg39hbgpp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    color: #ffffff;
    flex-shrink: 0;
}

.ad-lead-row__platform-chip--ig[b-rbg39hbgpp] {
    background: linear-gradient(135deg, var(--ig-stroke) 0%, #962fbf 100%);
}

.ad-lead-row__platform-chip--fb[b-rbg39hbgpp] {
    background: linear-gradient(135deg, var(--fb-stroke) 0%, #0a4fb8 100%);
}

.ad-lead-row__platform-chip--neutral[b-rbg39hbgpp] {
    background: var(--rame-bg-tertiary, #f0f2f5);
    color: var(--rame-text-tertiary, #94a3b8);
    font-size: 11px;
    font-weight: 600;
}

/* === Seller === */
.ad-lead-row__seller[b-rbg39hbgpp] {
    min-width: 0;
}

.ad-lead-row__seller-name[b-rbg39hbgpp] {
    font-size: 12px;
    color: var(--rame-text-secondary, #475569);
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* === Status === */
.ad-lead-row__status[b-rbg39hbgpp] {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
}

.ad-lead-row__pill[b-rbg39hbgpp] {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid transparent;
    background: var(--rame-bg-tertiary, #f0f2f5);
    color: var(--rame-text-secondary, #475569);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.ad-lead-row__empty[b-rbg39hbgpp] {
    font-size: 11px;
    color: var(--rame-text-tertiary, #94a3b8);
    font-style: italic;
}

/* Dark theme */
:global([data-rame-theme="dark"]) .ad-lead-row[b-rbg39hbgpp] {
    background: var(--rame-bg-secondary, #16181c);
    border-bottom-color: var(--rame-border-light, #26282d);
}

:global([data-rame-theme="dark"]) .ad-lead-row:hover[b-rbg39hbgpp] {
    background: var(--rame-bg-tertiary, #1f2126);
}

:global([data-rame-theme="dark"]) .ad-lead-row__name[b-rbg39hbgpp] {
    color: var(--rame-text-primary, #f1f5f9);
}

:global([data-rame-theme="dark"]) .ad-lead-row__pill[b-rbg39hbgpp] {
    background: rgba(255, 255, 255, 0.05);
}

/* === Responsive: collapse seller column on narrow drawer === */
@media (max-width: 540px) {
    .ad-lead-row[b-rbg39hbgpp] {
        grid-template-columns: minmax(0, 1.4fr) 28px minmax(0, 1fr);
        row-gap: 4px;
    }
    .ad-lead-row__seller[b-rbg39hbgpp] {
        display: none;
    }
}
/* _content/Rame.Blazor.Server/Components/Analytics/BranchComparisonTable.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
   Branch Comparison Table — cloned from ResumenEjecutivoView
   card/table/badge/avatar tokens to keep visual parity.
   ═══════════════════════════════════════════════════════ */

.dashboard__card[b-amwyqdieq7] {
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: var(--rame-radius-lg, 12px);
    padding: var(--rame-space-5, 20px);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.dashboard__card:hover[b-amwyqdieq7] {
    box-shadow: var(--rame-shadow-md, 0 2px 8px rgba(0,0,0,0.1));
    border-color: var(--rame-border-medium, #d0d3d9);
}

.dashboard__card--full[b-amwyqdieq7] {
    grid-column: 1 / -1;
}

.dashboard__card-header[b-amwyqdieq7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--rame-space-4, 16px);
    gap: var(--rame-space-3, 12px);
}

.dashboard__card-title[b-amwyqdieq7] {
    font-size: var(--rame-text-base, 14px);
    font-weight: var(--rame-font-semibold, 600);
    color: var(--rame-text-primary, #1c1e21);
    margin: 0;
}

.dashboard__card-count[b-amwyqdieq7] {
    font-size: var(--rame-text-xs, 11px);
    color: var(--rame-text-tertiary, #8a8d91);
    white-space: nowrap;
}

.dashboard__table-wrap[b-amwyqdieq7] {
    overflow-x: clip;
    overflow-y: visible;
    margin: 0 calc(var(--rame-space-5, 20px) * -1);
    padding: 0 var(--rame-space-5, 20px);
}

.dashboard__table[b-amwyqdieq7] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--rame-text-sm, 12px);
}

.dashboard__th[b-amwyqdieq7] {
    padding: var(--rame-space-2, 8px) var(--rame-space-3, 12px);
    text-align: left;
    font-weight: var(--rame-font-semibold, 600);
    color: var(--rame-text-tertiary, #8a8d91);
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    white-space: nowrap;
}

.dashboard__th--right[b-amwyqdieq7] {
    text-align: right;
}

.dashboard__tr[b-amwyqdieq7] {
    transition: background 0.15s ease;
}

.dashboard__tr:hover[b-amwyqdieq7] {
    background: var(--rame-bg-secondary, #f7f8fa);
}

.dashboard__td[b-amwyqdieq7] {
    padding: var(--rame-space-3, 12px) var(--rame-space-3, 12px);
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
    color: var(--rame-text-primary, #1c1e21);
    white-space: nowrap;
    vertical-align: middle;
}

.dashboard__tr:last-child .dashboard__td[b-amwyqdieq7] {
    border-bottom: none;
}

.dashboard__td--right[b-amwyqdieq7] {
    text-align: right;
}

.dashboard__td--mono[b-amwyqdieq7] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    letter-spacing: -0.2px;
}

.dashboard__td--name[b-amwyqdieq7] {
    display: flex;
    align-items: center;
    gap: var(--rame-space-2, 8px);
    font-weight: var(--rame-font-medium, 500);
}

.dashboard__avatar[b-amwyqdieq7] {
    width: 28px;
    height: 28px;
    border-radius: var(--rame-radius-full, 50%);
    background: var(--rame-primary-light, #e6f3ff);
    color: var(--rame-primary, #0084ff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: var(--rame-font-semibold, 600);
    flex-shrink: 0;
}

.dashboard__badge[b-amwyqdieq7] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--rame-radius-2xl, 20px);
    font-size: 11px;
    font-weight: var(--rame-font-semibold, 600);
    font-variant-numeric: tabular-nums;
    background: var(--rame-bg-tertiary, #f0f2f5);
    color: var(--rame-text-secondary, #65676b);
}

.dashboard__badge--success[b-amwyqdieq7] {
    background: var(--rame-success-light, #e6f9ed);
    color: var(--rame-success, #25d366);
}

.dashboard__badge--warn[b-amwyqdieq7] {
    background: var(--rame-warning-light, #fff3e0);
    color: var(--rame-warning-text, #e65100);
}

/* ========== DARK MODE ========== */

:global([data-rame-theme="dark"]) .dashboard__card[b-amwyqdieq7] {
    background: var(--rame-bg-primary, #1e1e1e);
    border-color: var(--rame-border-light, #404040);
}

:global([data-rame-theme="dark"]) .dashboard__card:hover[b-amwyqdieq7] {
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
    border-color: var(--rame-border-medium, #505050);
}

:global([data-rame-theme="dark"]) .dashboard__card-title[b-amwyqdieq7] {
    color: var(--rame-text-primary, #f0f0f0);
}

:global([data-rame-theme="dark"]) .dashboard__td[b-amwyqdieq7] {
    color: var(--rame-text-primary, #f0f0f0);
    border-bottom-color: var(--rame-border-light, #404040);
}

:global([data-rame-theme="dark"]) .dashboard__th[b-amwyqdieq7] {
    border-bottom-color: var(--rame-border-light, #404040);
    color: var(--rame-text-tertiary, #a0a0a0);
}

:global([data-rame-theme="dark"]) .dashboard__tr:hover[b-amwyqdieq7] {
    background: var(--rame-bg-hover, #3a3a3a);
}

:global([data-rame-theme="dark"]) .dashboard__avatar[b-amwyqdieq7] {
    background: rgba(0, 132, 255, 0.15);
    color: var(--rame-primary, #3b9eff);
}

:global([data-rame-theme="dark"]) .dashboard__badge[b-amwyqdieq7] {
    background: var(--rame-bg-tertiary, #333333);
}

:global([data-rame-theme="dark"]) .dashboard__badge--success[b-amwyqdieq7] {
    background: rgba(37, 211, 102, 0.12);
    color: var(--rame-success, #2ecc71);
}

:global([data-rame-theme="dark"]) .dashboard__badge--warn[b-amwyqdieq7] {
    background: rgba(255, 152, 0, 0.12);
    color: var(--rame-warning, #ffb347);
}

/* ========== RESPONSIVE ========== */

@media (max-width: 640px) {
    .dashboard__table[b-amwyqdieq7] {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
/* _content/Rame.Blazor.Server/Components/Analytics/DateRangeSelector.razor.rz.scp.css */
.date-range-selector[b-y2u6npjwh3] {
    display: flex;
    align-items: center;
    gap: var(--rame-space-4, 16px);
    flex-wrap: wrap;
}

.date-range-selector__presets[b-y2u6npjwh3] {
    display: flex;
    gap: var(--rame-space-1, 4px);
    background: var(--rame-bg-tertiary, #f0f2f5);
    border-radius: var(--rame-radius-md, 8px);
    padding: 3px;
}

.date-range-selector__btn[b-y2u6npjwh3] {
    padding: 6px 14px;
    border: none;
    background: transparent;
    border-radius: var(--rame-radius-sm, 4px);
    font-size: var(--rame-text-sm, 12px);
    font-weight: var(--rame-font-medium, 500);
    color: var(--rame-text-secondary, #65676b);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.date-range-selector__btn:hover[b-y2u6npjwh3] {
    color: var(--rame-text-primary, #1c1e21);
    background: var(--rame-bg-hover, #e4e6eb);
}

.date-range-selector__btn--active[b-y2u6npjwh3] {
    background: var(--rame-bg-primary, #ffffff);
    color: var(--rame-primary, #0084ff);
    box-shadow: var(--rame-shadow-xs, 0 1px 2px rgba(0,0,0,0.05));
    font-weight: var(--rame-font-semibold, 600);
}

.date-range-selector__custom[b-y2u6npjwh3] {
    display: flex;
    align-items: center;
    gap: var(--rame-space-2, 8px);
}

.date-range-selector__separator[b-y2u6npjwh3] {
    color: var(--rame-text-tertiary, #8a8d91);
    font-size: var(--rame-text-sm, 12px);
}

[b-y2u6npjwh3] .date-range-selector__input {
    max-width: 140px;
}

[b-y2u6npjwh3] :global([data-rame-theme="dark"]) .date-range-selector__presets {
    background: var(--rame-bg-tertiary, #333333);
}

[b-y2u6npjwh3] :global([data-rame-theme="dark"]) .date-range-selector__btn--active {
    background: var(--rame-bg-primary, #1e1e1e);
}

/* ========== MOBILE / TABLET RESPONSIVE ========== */
@media (max-width: 1024px) {
    .date-range-selector[b-y2u6npjwh3] {
        width: 100%;
        flex: 1 1 auto;
        min-width: 0;
    }
}
/* _content/Rame.Blazor.Server/Components/Analytics/KpiCard.razor.rz.scp.css */
/* ═══════════════════════════════════════
   KPI Card — Rame Design System
   ═══════════════════════════════════════ */

.kpi[b-lbl91iq7ni] {
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: var(--rame-radius-lg, 12px);
    padding: var(--rame-space-5, 20px);
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    animation: kpiEnter-b-lbl91iq7ni 0.4s ease-out both;
    position: relative;
}

.kpi:hover[b-lbl91iq7ni] {
    box-shadow: var(--rame-shadow-md, 0 2px 8px rgba(0,0,0,0.1));
    border-color: var(--rame-border-medium, #d0d3d9);
    transform: translateY(-2px);
}

.kpi--loading[b-lbl91iq7ni] {
    opacity: 0.5;
    pointer-events: none;
}

/* Top row: label group + trend */
.kpi__top[b-lbl91iq7ni] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rame-space-2, 8px);
}

/* ========== LABEL GROUP ========== */

.kpi__label-group[b-lbl91iq7ni] {
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
    min-width: 0;
}

.kpi__label[b-lbl91iq7ni] {
    font-size: var(--rame-text-xs, 11px);
    font-weight: var(--rame-font-semibold, 600);
    color: var(--rame-text-tertiary, #8a8d91);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* ========== INFO ICON ========== */

.kpi__info[b-lbl91iq7ni] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    cursor: default;
    position: relative;
    color: var(--rame-text-muted, #b0b3b8);
    transition: color 0.15s ease;
}

.kpi__info:hover[b-lbl91iq7ni] {
    color: var(--rame-text-tertiary, #8a8d91);
}

.kpi__info svg[b-lbl91iq7ni] {
    display: block;
}

/* ========== TOOLTIP ========== */

.kpi__tooltip[b-lbl91iq7ni] {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    z-index: 100;

    width: 220px;
    padding: 9px 12px;

    background: #1c1e21;
    color: #f0f0f0;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: 0.1px;
    text-transform: none;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.22), 0 1px 4px rgba(0,0,0,0.14);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.kpi__tooltip[b-lbl91iq7ni]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1c1e21;
}

.kpi__info:hover .kpi__tooltip[b-lbl91iq7ni] {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}

/* Trend badge */
.kpi__trend[b-lbl91iq7ni] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    font-weight: var(--rame-font-semibold, 600);
    padding: 2px 8px;
    border-radius: var(--rame-radius-2xl, 20px);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}

.kpi__trend--up[b-lbl91iq7ni] {
    background: var(--rame-success-light, #e6f9ed);
    color: var(--rame-success, #25d366);
}

.kpi__trend--down[b-lbl91iq7ni] {
    background: var(--rame-error-light, #ffebee);
    color: var(--rame-error, #ef5350);
}

.kpi__trend--neutral[b-lbl91iq7ni] {
    background: var(--rame-bg-tertiary, #f0f2f5);
    color: var(--rame-text-tertiary, #8a8d91);
}

/* Main value */
.kpi__value[b-lbl91iq7ni] {
    font-size: 28px;
    font-weight: var(--rame-font-bold, 700);
    color: var(--rame-text-primary, #1c1e21);
    line-height: 1.1;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
}

/* ========== SUBTITLE ========== */

.kpi__sub[b-lbl91iq7ni] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 2px;
}

.kpi__sub-label[b-lbl91iq7ni] {
    font-size: var(--rame-text-xs, 11px);
    color: var(--rame-text-tertiary, #8a8d91);
    letter-spacing: 0.1px;
}

.kpi__sub-period[b-lbl91iq7ni] {
    font-size: 10px;
    color: var(--rame-text-muted, #b0b3b8);
    letter-spacing: 0.15px;
    font-variant-numeric: tabular-nums;
}

/* Entrance animation */
@keyframes kpiEnter-b-lbl91iq7ni {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kpi[b-lbl91iq7ni] {
        animation: none;
    }
}

/* ========== DARK MODE ========== */

:global([data-rame-theme="dark"]) .kpi[b-lbl91iq7ni] {
    background: var(--rame-bg-primary, #1e1e1e);
    border-color: var(--rame-border-light, #404040);
}

:global([data-rame-theme="dark"]) .kpi:hover[b-lbl91iq7ni] {
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
    border-color: var(--rame-border-medium, #505050);
}

:global([data-rame-theme="dark"]) .kpi__value[b-lbl91iq7ni] {
    color: var(--rame-text-primary, #f0f0f0);
}

:global([data-rame-theme="dark"]) .kpi__trend--up[b-lbl91iq7ni] {
    background: rgba(37, 211, 102, 0.12);
    color: var(--rame-success, #2ecc71);
}

:global([data-rame-theme="dark"]) .kpi__trend--down[b-lbl91iq7ni] {
    background: rgba(239, 83, 80, 0.12);
    color: var(--rame-error, #ff6b6b);
}

:global([data-rame-theme="dark"]) .kpi__trend--neutral[b-lbl91iq7ni] {
    background: var(--rame-bg-tertiary, #333333);
    color: var(--rame-text-tertiary, #a0a0a0);
}

:global([data-rame-theme="dark"]) .kpi__info[b-lbl91iq7ni] {
    color: #555555;
}

:global([data-rame-theme="dark"]) .kpi__info:hover[b-lbl91iq7ni] {
    color: var(--rame-text-tertiary, #a0a0a0);
}

:global([data-rame-theme="dark"]) .kpi__tooltip[b-lbl91iq7ni] {
    background: #0d0e10;
    color: #e8e8e8;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3);
}

:global([data-rame-theme="dark"]) .kpi__tooltip[b-lbl91iq7ni]::after {
    border-top-color: #0d0e10;
}

/* ========== MOBILE RESPONSIVE ========== */
@media (max-width: 640px) {
    .kpi[b-lbl91iq7ni] {
        padding: var(--rame-space-3, 12px);
    }

    .kpi__value[b-lbl91iq7ni] {
        font-size: 22px;
    }

    .kpi__label[b-lbl91iq7ni] {
        font-size: 12px;
    }
}
/* _content/Rame.Blazor.Server/Components/Analytics/TablePager.razor.rz.scp.css */
.table-pager[b-8811o20ncw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--rame-space-3, 12px);
    padding: var(--rame-space-3, 12px) 0 0;
    border-top: 1px solid var(--rame-border-light, #e4e6eb);
    margin-top: var(--rame-space-2, 8px);
}

.table-pager__btn[b-8811o20ncw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: var(--rame-radius-md, 8px);
    background: var(--rame-bg-primary, #ffffff);
    color: var(--rame-text-secondary, #65676b);
    cursor: pointer;
    transition: all 0.15s ease;
}

.table-pager__btn:hover:not(:disabled)[b-8811o20ncw] {
    border-color: var(--rame-primary, #0084ff);
    color: var(--rame-primary, #0084ff);
    background: var(--rame-primary-light, #e6f3ff);
}

.table-pager__btn:disabled[b-8811o20ncw] {
    opacity: 0.35;
    cursor: not-allowed;
}

.table-pager__info[b-8811o20ncw] {
    font-size: var(--rame-text-xs, 11px);
    font-weight: var(--rame-font-medium, 500);
    color: var(--rame-text-tertiary, #8a8d91);
    font-variant-numeric: tabular-nums;
    min-width: 40px;
    text-align: center;
}

/* Dark mode */
:global([data-rame-theme="dark"]) .table-pager[b-8811o20ncw] {
    border-top-color: var(--rame-border-light, #404040);
}

:global([data-rame-theme="dark"]) .table-pager__btn[b-8811o20ncw] {
    background: var(--rame-bg-primary, #1e1e1e);
    border-color: var(--rame-border-light, #404040);
    color: var(--rame-text-secondary, #b0b0b0);
}

:global([data-rame-theme="dark"]) .table-pager__btn:hover:not(:disabled)[b-8811o20ncw] {
    border-color: var(--rame-primary, #3b9eff);
    color: var(--rame-primary, #3b9eff);
    background: rgba(0, 132, 255, 0.12);
}
/* _content/Rame.Blazor.Server/Components/Channels/ChannelConnectionStatus.razor.rz.scp.css */
.channel-connection-status[b-vutb65w6gq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--rame-space-4, 16px);
    border: 1px solid var(--rame-border-color, #e0e0e0);
    border-radius: var(--rame-radius-md, 8px);
    background: var(--rame-bg-secondary, #f8f9fa);
    gap: var(--rame-space-4, 16px);
}

.connection-info[b-vutb65w6gq] {
    display: flex;
    flex-direction: column;
    gap: var(--rame-space-2, 8px);
}

.channel-header[b-vutb65w6gq] {
    display: flex;
    align-items: center;
    gap: var(--rame-space-2, 8px);
}

.channel-type-badge[b-vutb65w6gq] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--rame-radius-full, 50px);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.channel-type-badge.instagram[b-vutb65w6gq] {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: #fff;
}

.channel-type-badge.whatsapp[b-vutb65w6gq] {
    background: #25d366;
    color: #fff;
}

.channel-type-badge.default[b-vutb65w6gq] {
    background: var(--rame-bg-tertiary, #e9ecef);
    color: var(--rame-text-secondary, #6c757d);
}

.account-name[b-vutb65w6gq] {
    font-size: 14px;
    font-weight: 500;
    color: var(--rame-text-primary, #212529);
}

.status-row[b-vutb65w6gq] {
    display: flex;
    align-items: center;
    gap: var(--rame-space-2, 8px);
    flex-wrap: wrap;
}

.status-indicator[b-vutb65w6gq] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-indicator.connected[b-vutb65w6gq] {
    background: var(--rame-success, #25d366);
}

.status-indicator.disconnected[b-vutb65w6gq] {
    background: var(--rame-danger, #dc3545);
}

.status-text[b-vutb65w6gq] {
    font-size: 13px;
    font-weight: 500;
}

.status-text.connected[b-vutb65w6gq] {
    color: var(--rame-success, #25d366);
}

.status-text.disconnected[b-vutb65w6gq] {
    color: var(--rame-danger, #dc3545);
}

.token-expiry[b-vutb65w6gq] {
    font-size: 12px;
    color: var(--rame-text-muted, #999);
}

.token-expiry.expiring-soon[b-vutb65w6gq] {
    color: #e67e22;
    font-weight: 500;
}

.token-expiry.expired[b-vutb65w6gq] {
    color: var(--rame-danger, #dc3545);
}

.reconnect-button[b-vutb65w6gq] {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: var(--rame-radius-md, 8px);
    background: var(--rame-primary, #0084ff);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s;
}

.reconnect-button:hover[b-vutb65w6gq] {
    background: var(--rame-primary-hover, #0070d6);
    color: #fff;
    text-decoration: none;
}

:global([data-rame-theme="dark"]) .channel-connection-status[b-vutb65w6gq] {
    background: var(--rame-bg-secondary, #1e1e2e);
    border-color: var(--rame-border-color, #333);
}

:global([data-rame-theme="dark"]) .account-name[b-vutb65w6gq] {
    color: var(--rame-text-primary, #e0e0e0);
}
/* _content/Rame.Blazor.Server/Components/Conversations/ActivityCard.razor.rz.scp.css */
/* ============================================================
   Activity Card — Inline timeline event
   Refined Slack/Linear-style notification for chat timeline.
   Uses Rame Design System tokens.
   ============================================================ */

.activity-card-wrapper[b-od9sm5udtp] {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 14px 0;
    animation: activityFadeIn-b-od9sm5udtp 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.activity-card[b-od9sm5udtp] {
    /* Fixed canonical width for visual consistency across all activity types */
    width: 360px;
    box-sizing: border-box;
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #e9edef);
    border-radius: 12px;
    padding: 14px 16px 14px 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ============================================================
   ROW 1 — icon + headline + timestamp (CSS Grid for alignment)
   ============================================================ */

.activity-row-top[b-od9sm5udtp] {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: start;
    column-gap: 12px;
}

.activity-icon-circle[b-od9sm5udtp] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Icon color & background are themed below via .theme-* */
}

/* Theme variants — subtle tinted background, saturated icon color */
.theme-primary .activity-icon-circle[b-od9sm5udtp] {
    background: rgba(0, 132, 255, 0.12);
    color: var(--rame-primary, #0084ff);
}

.theme-success .activity-icon-circle[b-od9sm5udtp] {
    background: rgba(37, 211, 102, 0.14);
    color: var(--rame-accent-dark, #007a60);
}

.theme-error .activity-icon-circle[b-od9sm5udtp] {
    background: rgba(239, 83, 80, 0.13);
    color: var(--rame-error, #ef5350);
}

.theme-info .activity-icon-circle[b-od9sm5udtp] {
    background: rgba(33, 150, 243, 0.12);
    color: var(--rame-info, #2196f3);
}

.theme-neutral .activity-icon-circle[b-od9sm5udtp] {
    background: var(--rame-bg-tertiary, #f0f2f5);
    color: var(--rame-text-secondary, #54656f);
}

.activity-headline[b-od9sm5udtp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    /* Visually align text with the center of the icon row */
    padding-top: 1px;
}

.activity-title[b-od9sm5udtp] {
    font-size: 13px;
    font-weight: 600;
    color: var(--rame-text-primary, #111b21);
    line-height: 1.3;
    letter-spacing: -0.1px;
}

.activity-description[b-od9sm5udtp] {
    font-size: 12px;
    color: var(--rame-text-secondary, #54656f);
    line-height: 1.4;
    word-break: break-word;
}

.activity-time[b-od9sm5udtp] {
    font-size: 11px;
    color: var(--rame-text-meta, #667781);
    line-height: 1.3;
    flex-shrink: 0;
    padding-top: 2px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
}

/* ============================================================
   ROW 2 — meta (stage transition + view link)
   Both items align to the same left edge, indented past the icon
   to create a clean visual line under the title.
   ============================================================ */

.activity-meta[b-od9sm5udtp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Indent equals icon width (32px) + grid column-gap (12px) = 44px */
    padding-left: 44px;
}

/* ----- Stage transition with dot indicators (no text shadow!) ----- */

.stage-transition[b-od9sm5udtp] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.stage-chip[b-od9sm5udtp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--rame-bg-tertiary, #f0f2f5);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--rame-text-primary, #111b21);
    line-height: 1.4;
    letter-spacing: -0.1px;
    border: 1px solid var(--rame-border-light, #e9edef);
}

.stage-dot[b-od9sm5udtp] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.stage-name[b-od9sm5udtp] {
    white-space: nowrap;
}

.stage-arrow[b-od9sm5udtp] {
    color: var(--rame-text-tertiary, #8a8d91);
    font-size: 13px;
    line-height: 1;
    font-weight: 400;
    user-select: none;
}

/* ----- "Ver oportunidad" action button ----- */

.activity-link[b-od9sm5udtp] {
    align-self: flex-start;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--rame-primary, #0084ff);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.15s ease;
    line-height: 1.3;
}

.activity-link:hover[b-od9sm5udtp] {
    color: var(--rame-primary-hover, #0073e6);
}

.activity-link:focus-visible[b-od9sm5udtp] {
    outline: 2px solid var(--rame-primary, #0084ff);
    outline-offset: 3px;
    border-radius: 3px;
}

.activity-link-arrow[b-od9sm5udtp] {
    transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
    display: inline-block;
    font-size: 13px;
    line-height: 1;
}

.activity-link:hover .activity-link-arrow[b-od9sm5udtp] {
    transform: translateX(3px);
}

/* ============================================================
   Animation
   ============================================================ */

@keyframes activityFadeIn-b-od9sm5udtp {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .activity-card-wrapper[b-od9sm5udtp] {
        animation: none;
    }

    .activity-link-arrow[b-od9sm5udtp] {
        transition: none;
    }
}

/* ============================================================
   DARK MODE
   ============================================================ */

:global([data-rame-theme="dark"]) .activity-card[b-od9sm5udtp] {
    background: var(--rame-bg-secondary, #282828);
    border-color: var(--rame-border-medium, #505050);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
}

:global([data-rame-theme="dark"]) .activity-title[b-od9sm5udtp] {
    color: var(--rame-text-primary, #f0f0f0);
}

:global([data-rame-theme="dark"]) .activity-description[b-od9sm5udtp] {
    color: var(--rame-text-secondary, #c8c8c8);
}

:global([data-rame-theme="dark"]) .activity-time[b-od9sm5udtp] {
    color: var(--rame-text-meta, #a8a8a8);
}

:global([data-rame-theme="dark"]) .stage-chip[b-od9sm5udtp] {
    background: var(--rame-bg-tertiary, #333333);
    border-color: var(--rame-border-medium, #505050);
    color: var(--rame-text-primary, #f0f0f0);
}

:global([data-rame-theme="dark"]) .stage-dot[b-od9sm5udtp] {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

:global([data-rame-theme="dark"]) .stage-arrow[b-od9sm5udtp] {
    color: var(--rame-text-tertiary, #a0a0a0);
}

:global([data-rame-theme="dark"]) .activity-link[b-od9sm5udtp] {
    color: var(--rame-primary, #3b9eff);
}

:global([data-rame-theme="dark"]) .activity-link:hover[b-od9sm5udtp] {
    color: var(--rame-primary-hover, #60b0ff);
}

/* Theme circle backgrounds — slightly more saturated in dark mode */
:global([data-rame-theme="dark"]) .theme-primary .activity-icon-circle[b-od9sm5udtp] {
    background: rgba(59, 158, 255, 0.18);
    color: var(--rame-primary, #3b9eff);
}

:global([data-rame-theme="dark"]) .theme-success .activity-icon-circle[b-od9sm5udtp] {
    background: rgba(46, 204, 113, 0.18);
    color: var(--rame-success, #2ecc71);
}

:global([data-rame-theme="dark"]) .theme-error .activity-icon-circle[b-od9sm5udtp] {
    background: rgba(255, 107, 107, 0.18);
    color: var(--rame-error, #ff6b6b);
}

:global([data-rame-theme="dark"]) .theme-info .activity-icon-circle[b-od9sm5udtp] {
    background: rgba(91, 192, 222, 0.18);
    color: var(--rame-info, #5bc0de);
}

:global([data-rame-theme="dark"]) .theme-neutral .activity-icon-circle[b-od9sm5udtp] {
    background: var(--rame-bg-tertiary, #333333);
    color: var(--rame-text-secondary, #c8c8c8);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 600px) {
    .activity-card[b-od9sm5udtp] {
        width: 100%;
        max-width: 360px;
        padding: 12px 14px;
    }

    .activity-row-top[b-od9sm5udtp] {
        column-gap: 10px;
    }

    .activity-meta[b-od9sm5udtp] {
        padding-left: 42px;
    }
}
/* _content/Rame.Blazor.Server/Components/Conversations/AudioRecorder.razor.rz.scp.css */
/* Audio Recorder Component - Matching Attach Button Style */
/* Uses Rame Design System tokens - see /css/design-system/_tokens.css */

.audio-recorder[b-6ytrymxnw6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ========== BASE BUTTON STYLE (Matches .btn-attach) ========== */

.mic-button[b-6ytrymxnw6],
.cancel-button[b-6ytrymxnw6],
.stop-button[b-6ytrymxnw6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--rame-bg-primary, #ffffff);
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
    box-shadow: var(--rame-shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.08));
    position: relative;
    color: var(--rame-text-secondary, #54656f);
}

.mic-button[b-6ytrymxnw6]::before,
.cancel-button[b-6ytrymxnw6]::before,
.stop-button[b-6ytrymxnw6]::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rame-success, #25d366) 0%, var(--rame-success-hover, #20ba5a) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

/* ========== MICROPHONE BUTTON (Idle State) ========== */

.mic-button:hover:not(:disabled)[b-6ytrymxnw6] {
    background: var(--rame-bg-primary, #ffffff);
    transform: scale(1.12) rotate(15deg);
    box-shadow: var(--rame-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));
}

.mic-button:hover:not(:disabled)[b-6ytrymxnw6]::before {
    opacity: 0.1;
}

.mic-button:active:not(:disabled)[b-6ytrymxnw6] {
    transform: scale(0.92) rotate(0deg);
    transition-duration: 0.1s;
}

.mic-button:disabled[b-6ytrymxnw6] {
    cursor: not-allowed;
    opacity: 0.4;
}

/* ========== RECORDING CONTROLS CONTAINER ========== */

.recording-controls[b-6ytrymxnw6] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--rame-bg-primary, #ffffff);
    padding: 6px;
    border-radius: 28px;
    animation: slideIn-b-6ytrymxnw6 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: var(--rame-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.1));
}

@keyframes slideIn-b-6ytrymxnw6 {
    from {
        opacity: 0;
        transform: translateX(20px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* ========== CANCEL BUTTON ========== */

.cancel-button[b-6ytrymxnw6] {
    color: var(--rame-text-meta, #667781);
}

.cancel-button:hover[b-6ytrymxnw6] {
    background: var(--rame-error-light, #ffebee);
    color: var(--rame-error, #ef5350);
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(239, 83, 80, 0.2);
}

.cancel-button:hover[b-6ytrymxnw6]::before {
    background: linear-gradient(135deg, var(--rame-error, #ef5350) 0%, #e53935 100%);
    opacity: 0.1;
}

.cancel-button:active[b-6ytrymxnw6] {
    transform: scale(0.92);
    transition-duration: 0.1s;
}

/* ========== RECORDING INDICATOR ========== */

.recording-indicator[b-6ytrymxnw6] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
}

.pulse-dot[b-6ytrymxnw6] {
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, var(--rame-error, #ef5350) 0%, #e53935 100%);
    border-radius: 50%;
    animation: pulse-b-6ytrymxnw6 1.2s ease-in-out infinite;
    box-shadow: var(--rame-shadow-error, 0 0 8px rgba(239, 83, 80, 0.5));
}

@keyframes pulse-b-6ytrymxnw6 {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 8px rgba(239, 83, 80, 0.5);
    }
    50% {
        opacity: 0.6;
        transform: scale(0.85);
        box-shadow: 0 0 4px rgba(239, 83, 80, 0.3);
    }
}

.duration[b-6ytrymxnw6] {
    font-size: 14px;
    font-weight: 600;
    color: var(--rame-text-primary, #111b21);
    min-width: 36px;
    font-variant-numeric: tabular-nums;
    font-family: var(--rame-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

/* ========== WAVE ANIMATION ========== */

.wave-animation[b-6ytrymxnw6] {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 24px;
    padding: 0 8px;
}

.wave-bar[b-6ytrymxnw6] {
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--rame-success, #25d366) 0%, var(--rame-accent-dark, #128C7E) 100%);
    border-radius: 2px;
    animation: wave-b-6ytrymxnw6 0.6s ease-in-out infinite;
}

.wave-bar:nth-child(1)[b-6ytrymxnw6] { animation-delay: 0s; }
.wave-bar:nth-child(2)[b-6ytrymxnw6] { animation-delay: 0.1s; }
.wave-bar:nth-child(3)[b-6ytrymxnw6] { animation-delay: 0.2s; }
.wave-bar:nth-child(4)[b-6ytrymxnw6] { animation-delay: 0.3s; }
.wave-bar:nth-child(5)[b-6ytrymxnw6] { animation-delay: 0.4s; }

@keyframes wave-b-6ytrymxnw6 {
    0%, 100% {
        transform: scaleY(0.3);
    }
    50% {
        transform: scaleY(1);
    }
}

/* ========== STOP/SEND BUTTON ========== */

.stop-button[b-6ytrymxnw6] {
    background: linear-gradient(135deg, var(--rame-success, #25d366) 0%, var(--rame-success-hover, #20ba5a) 100%);
    color: #ffffff;
    box-shadow: var(--rame-shadow-success, 0 2px 8px rgba(37, 211, 102, 0.35));
}

.stop-button[b-6ytrymxnw6]::before {
    background: linear-gradient(135deg, var(--rame-success, #25d366) 0%, var(--rame-success-hover, #20ba5a) 100%);
}

.stop-button:hover[b-6ytrymxnw6] {
    background: linear-gradient(135deg, var(--rame-success-hover, #20ba5a) 0%, var(--rame-success-dark, #1ea952) 100%);
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.5);
}

.stop-button:hover[b-6ytrymxnw6]::before {
    opacity: 0.15;
}

.stop-button:active[b-6ytrymxnw6] {
    transform: scale(0.92);
    box-shadow: 0 2px 6px rgba(37, 211, 102, 0.3);
    transition-duration: 0.1s;
}

/* ========== PROCESSING STATE ========== */

.processing-indicator[b-6ytrymxnw6] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: var(--rame-bg-primary, #ffffff);
    border-radius: 24px;
    color: var(--rame-text-meta, #667781);
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--rame-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.1));
    animation: fadeIn-b-6ytrymxnw6 0.3s ease;
}

.spinner[b-6ytrymxnw6] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--rame-border-medium, #e9edef);
    border-top-color: var(--rame-success, #25d366);
    border-radius: 50%;
    animation: spin-b-6ytrymxnw6 0.8s linear infinite;
}

@keyframes spin-b-6ytrymxnw6 {
    to {
        transform: rotate(360deg);
    }
}

/* ========== ERROR MESSAGE ========== */

.error-message[b-6ytrymxnw6] {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: 8px;
    padding: 10px 14px;
    background: linear-gradient(135deg, var(--rame-error, #ef5350) 0%, #e53935 100%);
    color: white;
    font-size: 12px;
    font-weight: 500;
    border-radius: 10px;
    text-align: center;
    animation: errorSlide-b-6ytrymxnw6 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: var(--rame-shadow-error, 0 4px 12px rgba(239, 83, 80, 0.3));
}

@keyframes errorSlide-b-6ytrymxnw6 {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeIn-b-6ytrymxnw6 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ========== RESPONSIVE ========== */

@media (max-width: 768px) {
    .mic-button[b-6ytrymxnw6],
    .cancel-button[b-6ytrymxnw6],
    .stop-button[b-6ytrymxnw6] {
        width: 40px;
        height: 40px;
    }

    .recording-controls[b-6ytrymxnw6] {
        gap: 8px;
        padding: 5px;
    }

    .duration[b-6ytrymxnw6] {
        font-size: 13px;
    }

    .wave-animation[b-6ytrymxnw6] {
        padding: 0 6px;
    }
}

/* ========== ACCESSIBILITY ========== */

.mic-button:focus-visible[b-6ytrymxnw6],
.cancel-button:focus-visible[b-6ytrymxnw6],
.stop-button:focus-visible[b-6ytrymxnw6] {
    outline: 2px solid var(--rame-success, #25d366);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .mic-button[b-6ytrymxnw6],
    .cancel-button[b-6ytrymxnw6],
    .stop-button[b-6ytrymxnw6],
    .recording-controls[b-6ytrymxnw6],
    .pulse-dot[b-6ytrymxnw6],
    .wave-bar[b-6ytrymxnw6],
    .spinner[b-6ytrymxnw6] {
        animation: none;
        transition: none;
    }

    .mic-button:hover[b-6ytrymxnw6],
    .cancel-button:hover[b-6ytrymxnw6],
    .stop-button:hover[b-6ytrymxnw6] {
        transform: none !important;
    }
}
/* _content/Rame.Blazor.Server/Components/Conversations/ChatHeader.razor.rz.scp.css */
/* Professional Chat Header - Refined Enterprise Design */
/* Uses Rame Design System tokens - see /css/design-system/_tokens.css */

.chat-header[b-htmrwlnj95] {
    padding: var(--rame-space-3, 12px) var(--rame-space-4, 16px);
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
    background: var(--rame-bg-primary, #ffffff) !important;
    display: flex;
    align-items: center;
    gap: var(--rame-space-3, 12px);
    position: relative;
}

/* ========== AVATAR ========== */

.header-avatar[b-htmrwlnj95] {
    width: 42px;
    height: 42px;
    border-radius: var(--rame-radius-full, 50%);
    background: linear-gradient(135deg, var(--rame-accent, #00a884) 0%, var(--rame-success, #25d366) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 168, 132, 0.25);
}

.avatar-image[b-htmrwlnj95] {
    width: 100%;
    height: 100%;
    border-radius: var(--rame-radius-full, 50%);
    object-fit: cover;
}

.avatar-initials[b-htmrwlnj95] {
    color: #ffffff;
    font-size: 15px;
    font-weight: var(--rame-font-bold, 700);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ========== HEADER INFO ========== */

.header-info[b-htmrwlnj95] {
    flex: 1;
    min-width: 0;
}

.header-name-row[b-htmrwlnj95] {
    display: flex;
    align-items: center;
    gap: var(--rame-space-2, 8px);
    margin-bottom: 2px;
}

.header-info h5[b-htmrwlnj95] {
    margin: 0;
    font-size: var(--rame-text-xl, 16px);
    font-weight: var(--rame-font-semibold, 600);
    color: var(--rame-text-primary, #111b21);
    letter-spacing: -0.2px;
    line-height: var(--rame-line-height-tight, 1.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-info h5.contact-name-clickable[b-htmrwlnj95] {
    cursor: pointer;
    transition: var(--rame-transition-base, color 0.2s ease);
}

.header-info h5.contact-name-clickable:hover[b-htmrwlnj95] {
    color: var(--rame-primary, #0084ff);
    text-decoration: underline;
}

.lead-stage-badge[b-htmrwlnj95] {
    font-size: var(--rame-text-xs, 11px);
    font-weight: var(--rame-font-semibold, 600);
    padding: 2px 8px;
    border-radius: 10px;
    color: #ffffff;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ========== PRIORITY SELECTOR ========== */

.priority-selector[b-htmrwlnj95] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 8px;
    flex-shrink: 0;
}

.priority-option[b-htmrwlnj95] {
    width: 10px;
    height: 10px;
    border-radius: var(--rame-radius-full, 50%);
    border: none;
    padding: 0;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.priority-option:hover[b-htmrwlnj95] {
    opacity: 0.9;
    transform: scale(1.2);
}

.priority-option-active[b-htmrwlnj95] {
    opacity: 1;
    transform: scale(1.3);
}

.priority-option-high[b-htmrwlnj95] {
    background: rgba(239, 83, 80, 1);
}

.priority-option-high.priority-option-active[b-htmrwlnj95] {
    box-shadow: 0 0 0 3px rgba(239, 83, 80, 0.35);
}

.priority-option-medium[b-htmrwlnj95] {
    background: rgba(255, 152, 0, 1);
}

.priority-option-medium.priority-option-active[b-htmrwlnj95] {
    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.35);
}

.priority-option-low[b-htmrwlnj95] {
    background: rgba(138, 141, 145, 1);
}

.priority-option-low.priority-option-active[b-htmrwlnj95] {
    box-shadow: 0 0 0 3px rgba(138, 141, 145, 0.35);
}

.priority-option:focus-visible[b-htmrwlnj95] {
    outline: 2px solid var(--rame-primary, #0084ff);
    outline-offset: 2px;
}

/* ========== STAGE SELECTOR ========== */

.stage-selector-area[b-htmrwlnj95] {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.stage-trigger[b-htmrwlnj95] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--rame-text-xs, 11px);
    font-weight: var(--rame-font-semibold, 600);
    padding: 2px 8px;
    border-radius: 10px;
    color: #ffffff;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.stage-trigger[b-htmrwlnj95]::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 3.5px solid rgba(255, 255, 255, 0.7);
    margin-left: 3px;
    transition: transform 0.2s ease;
}

.stage-trigger.is-open[b-htmrwlnj95]::after {
    transform: rotate(180deg);
}

.stage-trigger:hover[b-htmrwlnj95] {
    filter: brightness(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.stage-backdrop[b-htmrwlnj95] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.stage-panel[b-htmrwlnj95] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: max-content;
    min-width: 180px;
    max-width: 260px;
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    z-index: 100;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.stage-panel.is-visible[b-htmrwlnj95] {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.stage-panel[b-htmrwlnj95]::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 16px;
    width: 10px;
    height: 10px;
    background: var(--rame-bg-primary, #ffffff);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-left: 1px solid rgba(0, 0, 0, 0.06);
    transform: rotate(45deg);
    z-index: 1;
}

.stage-list[b-htmrwlnj95] {
    max-height: 240px;
    overflow-y: auto;
    margin: 0 -4px;
    padding: 0 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--rame-border-light, #e4e6eb) transparent;
}

.stage-list[b-htmrwlnj95]::-webkit-scrollbar {
    width: 4px;
}

.stage-list[b-htmrwlnj95]::-webkit-scrollbar-track {
    background: transparent;
}

.stage-list[b-htmrwlnj95]::-webkit-scrollbar-thumb {
    background: var(--rame-border-light, #e4e6eb);
    border-radius: 4px;
}

.stage-item[b-htmrwlnj95] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    transition: background 0.12s ease;
    color: var(--rame-text-primary, #111b21);
}

.stage-item:hover:not(.is-disabled):not(.is-current)[b-htmrwlnj95] {
    background: rgba(0, 132, 255, 0.06);
}

.stage-item.is-current[b-htmrwlnj95] {
    background: rgba(0, 132, 255, 0.08);
}

.stage-item.is-disabled[b-htmrwlnj95] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.stage-dot[b-htmrwlnj95] {
    width: 8px;
    height: 8px;
    border-radius: var(--rame-radius-full, 50%);
    flex-shrink: 0;
}

.stage-item-name[b-htmrwlnj95] {
    font-size: var(--rame-text-base, 13px);
    font-weight: var(--rame-font-medium, 500);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stage-item-check[b-htmrwlnj95] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stage-item-check[b-htmrwlnj95]  svg {
    display: block;
}

.stage-terminal-icon[b-htmrwlnj95] {
    flex-shrink: 0;
    font-size: 12px;
    line-height: 1;
}

.stage-terminal-won[b-htmrwlnj95] {
    font-size: 11px;
}

.stage-terminal-lost[b-htmrwlnj95] {
    color: var(--rame-text-tertiary, #8696a0);
    font-weight: 700;
    font-size: 11px;
}

/* ========== ASSIGNMENT AREA ========== */

.assignment-area[b-htmrwlnj95] {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.assignment-triggers-group[b-htmrwlnj95] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ── Trigger Pills (clickable) ── */

.assignment-trigger[b-htmrwlnj95] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--rame-text-xs, 11px);
    font-weight: var(--rame-font-semibold, 600);
    padding: 3px 10px;
    border-radius: 24px;
    color: #ffffff;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.assignment-trigger[b-htmrwlnj95]::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4px solid rgba(255, 255, 255, 0.7);
    margin-left: 3px;
    transition: transform 0.2s ease;
}

.assignment-trigger.is-open[b-htmrwlnj95]::after {
    transform: rotate(180deg);
}

.assignment-trigger[b-htmrwlnj95]  svg {
    display: block;
    flex-shrink: 0;
}

.assignment-trigger-ai[b-htmrwlnj95] {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
}

.assignment-trigger-ai:hover[b-htmrwlnj95] {
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);
}

.assignment-trigger-seller[b-htmrwlnj95] {
    background: linear-gradient(135deg, var(--rame-primary, #0084ff) 0%, var(--rame-primary-hover, #0073ea) 100%);
}

.assignment-trigger-seller:hover[b-htmrwlnj95] {
    box-shadow: 0 2px 8px rgba(0, 132, 255, 0.35);
}

/* Unassigned state — ghost button */
.assignment-trigger-empty[b-htmrwlnj95] {
    background: transparent;
    color: var(--rame-text-tertiary, #8696a0);
    border: 1.5px dashed var(--rame-border-medium, #d1d5db);
    box-shadow: none;
    padding: 2px 10px;
    gap: 3px;
}

.assignment-trigger-empty[b-htmrwlnj95]::after {
    border-top-color: var(--rame-text-tertiary, #8696a0);
}

.assignment-trigger-empty:hover[b-htmrwlnj95] {
    color: var(--rame-primary, #0084ff);
    border-color: var(--rame-primary, #0084ff);
    background: rgba(0, 132, 255, 0.06);
    box-shadow: none;
}

.assignment-trigger-empty:hover[b-htmrwlnj95]::after {
    border-top-color: var(--rame-primary, #0084ff);
}

.trigger-plus[b-htmrwlnj95] {
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

/* ── Backdrop (click-outside catcher) ── */

.assignment-backdrop[b-htmrwlnj95] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

/* ── Assignment Panel (dropdown) ── */

.assignment-panel[b-htmrwlnj95] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 260px;
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    z-index: 100;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.assignment-panel.is-visible[b-htmrwlnj95] {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.assignment-panel[b-htmrwlnj95]::before {
    content: '';
    position: absolute;
    top: -5px;
    right: 16px;
    width: 10px;
    height: 10px;
    background: var(--rame-bg-primary, #ffffff);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-left: 1px solid rgba(0, 0, 0, 0.06);
    transform: rotate(45deg);
    z-index: 1;
}

/* ── Panel Section ── */

.panel-section[b-htmrwlnj95] {
    padding: 10px 12px;
}

.panel-section + .panel-section[b-htmrwlnj95] {
    border-top: 1px solid var(--rame-border-light, #e4e6eb);
}

.panel-section-header[b-htmrwlnj95] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.panel-section-label[b-htmrwlnj95] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--rame-text-tertiary, #8696a0);
}

/* ── AI Toggle ── */

.ai-toggle-row[b-htmrwlnj95] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--rame-bg-secondary, #f8f9fa);
    transition: background 0.15s ease;
}

.ai-toggle-info[b-htmrwlnj95] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-toggle-icon[b-htmrwlnj95] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(124, 58, 237, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-toggle-icon[b-htmrwlnj95]  svg {
    display: block;
}

.ai-toggle-text[b-htmrwlnj95] {
    font-size: var(--rame-text-base, 13px);
    font-weight: var(--rame-font-medium, 500);
    color: var(--rame-text-primary, #111b21);
}

.ai-toggle-desc[b-htmrwlnj95] {
    font-size: 10px;
    color: var(--rame-text-tertiary, #8696a0);
    margin-top: 1px;
}

/* Toggle Switch */

.toggle-switch[b-htmrwlnj95] {
    width: 36px;
    height: 20px;
    border-radius: 20px;
    background: var(--rame-border-medium, #d1d5db);
    position: relative;
    cursor: pointer;
    border: none;
    padding: 0;
    transition: background 0.25s ease;
    flex-shrink: 0;
}

.toggle-switch[b-htmrwlnj95]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toggle-switch.is-on[b-htmrwlnj95] {
    background: #7c3aed;
}

.toggle-switch.is-on[b-htmrwlnj95]::after {
    transform: translateX(16px);
}

/* ── Seller List ── */

.seller-list[b-htmrwlnj95] {
    max-height: 180px;
    overflow-y: auto;
    margin: 0 -4px;
    padding: 0 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--rame-border-light, #e4e6eb) transparent;
}

.seller-list[b-htmrwlnj95]::-webkit-scrollbar {
    width: 4px;
}

.seller-list[b-htmrwlnj95]::-webkit-scrollbar-track {
    background: transparent;
}

.seller-list[b-htmrwlnj95]::-webkit-scrollbar-thumb {
    background: var(--rame-border-light, #e4e6eb);
    border-radius: 4px;
}

.seller-item[b-htmrwlnj95] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    transition: background 0.12s ease;
    color: var(--rame-text-primary, #111b21);
}

.seller-item:hover[b-htmrwlnj95] {
    background: rgba(0, 132, 255, 0.06);
}

.seller-item.is-selected[b-htmrwlnj95] {
    background: rgba(0, 132, 255, 0.06);
}

.seller-item-avatar[b-htmrwlnj95] {
    width: 28px;
    height: 28px;
    border-radius: var(--rame-radius-full, 50%);
    background: linear-gradient(135deg, var(--rame-primary, #0084ff), var(--rame-primary-hover, #0073ea));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
}

.seller-item-name[b-htmrwlnj95] {
    font-size: var(--rame-text-base, 13px);
    font-weight: var(--rame-font-medium, 500);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seller-item-check[b-htmrwlnj95] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.12s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.seller-item-check[b-htmrwlnj95]  svg {
    display: block;
}

.seller-item.is-selected .seller-item-check[b-htmrwlnj95] {
    opacity: 1;
}

/* Remove seller action */

.seller-remove[b-htmrwlnj95] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    transition: background 0.12s ease;
    color: var(--rame-text-tertiary, #8696a0);
    font-size: var(--rame-text-sm, 12px);
    font-weight: var(--rame-font-medium, 500);
    margin-top: 2px;
    border-top: 1px solid var(--rame-border-light, #e4e6eb);
    padding-top: 8px;
}

.seller-remove:hover[b-htmrwlnj95] {
    background: #fef2f2;
    color: #dc2626;
}

.seller-remove[b-htmrwlnj95]  svg {
    display: block;
    flex-shrink: 0;
    opacity: 0.6;
}

.seller-remove:hover[b-htmrwlnj95]  svg {
    opacity: 1;
}

/* ========== CHANNEL INFO ========== */

.header-channel[b-htmrwlnj95] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--rame-text-secondary, #667781);
}

.header-channel-widget[b-htmrwlnj95] {
    gap: 5px;
}

.header-meta-row[b-htmrwlnj95] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.header-channel small[b-htmrwlnj95] {
    color: inherit;
    font-size: var(--rame-text-base, 13px);
    font-weight: var(--rame-font-normal, 400);
}

.header-meta-separator[b-htmrwlnj95] {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--rame-text-tertiary, #b8c0c8);
    flex-shrink: 0;
}

.header-widget-icon[b-htmrwlnj95] {
    flex-shrink: 0;
    display: block;
}

/* ── Widget Origin Chip ── */

.widget-origin-chip[b-htmrwlnj95] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 5px;
    background: var(--rame-primary-light, #e6f3ff);
    border: 1px solid rgba(0, 132, 255, 0.1);
    border-radius: 10px;
    color: var(--rame-primary, #0084ff);
    text-decoration: none;
    font-size: var(--rame-text-xs, 11px);
    font-weight: var(--rame-font-medium, 500);
    line-height: 1;
    max-width: min(100%, 280px);
    margin-left: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 1;
    min-width: 0;
}

.widget-origin-chip:hover[b-htmrwlnj95] {
    background: rgba(0, 132, 255, 0.1);
    border-color: rgba(0, 132, 255, 0.22);
    box-shadow: 0 1px 4px rgba(0, 132, 255, 0.1);
    color: var(--rame-primary-hover, #0073e6);
}

.widget-origin-chip:focus-visible[b-htmrwlnj95] {
    outline: 2px solid rgba(0, 132, 255, 0.28);
    outline-offset: 1px;
}

.widget-origin-chip[b-htmrwlnj95]  .chip-globe {
    flex-shrink: 0;
    opacity: 0.65;
}

.chip-url-text[b-htmrwlnj95] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.widget-origin-chip[b-htmrwlnj95]  .chip-arrow {
    flex-shrink: 0;
    opacity: 0.4;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.widget-origin-chip:hover[b-htmrwlnj95]  .chip-arrow {
    opacity: 0.75;
    transform: translate(1px, -1px);
}

/* ========== CHANNEL ICONS ========== */

.channel-icon[b-htmrwlnj95] {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.channel-whatsapp[b-htmrwlnj95] {
    background-color: var(--rame-success, #25d366);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: 100%;
    -webkit-mask-size: 100%;
}

.channel-instagram[b-htmrwlnj95] {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border-radius: 4px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: 100%;
    -webkit-mask-size: 100%;
}

.channel-email[b-htmrwlnj95] {
    background-color: var(--rame-text-secondary, #667781);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E") no-repeat center;
    mask-size: 100%;
    -webkit-mask-size: 100%;
}

.channel-widget[b-htmrwlnj95] {
    background-color: var(--rame-primary, #0084ff);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10h10'/%3E%3Cpath d='M7 14h6'/%3E%3Cpath d='M4 5h16v10H8l-4 4V5z'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10h10'/%3E%3Cpath d='M7 14h6'/%3E%3Cpath d='M4 5h16v10H8l-4 4V5z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: 100%;
    -webkit-mask-size: 100%;
}

.channel-facebook[b-htmrwlnj95] {
    background-color: var(--rame-primary, #0084ff);
    border-radius: var(--rame-radius-full, 50%);
}

.channel-default[b-htmrwlnj95] {
    background-color: var(--rame-text-secondary, #667781);
    border-radius: var(--rame-radius-full, 50%);
}

/* ========== LEARN BUTTON ========== */

.btn-learn-conversation[b-htmrwlnj95] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    color: var(--rame-text-secondary, #667781);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: var(--rame-radius-full, 50%);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.btn-learn-conversation:hover:not([disabled])[b-htmrwlnj95] {
    background: #eef2ff;
    color: #6366f1;
    border-color: #6366f1;
}

.btn-learn-conversation[disabled][b-htmrwlnj95] {
    opacity: 0.6;
    cursor: not-allowed;
}

.learn-spinner[b-htmrwlnj95] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(99, 102, 241, 0.3);
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: learn-spin-b-htmrwlnj95 0.7s linear infinite;
    display: inline-block;
}

@keyframes learn-spin-b-htmrwlnj95 {
    to { transform: rotate(360deg); }
}

/* ========== COTIZAR (quotation) ========== */

.quote-area[b-htmrwlnj95] {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* Trigger: round icon button, matching the "learn" button but brand-tinted. */
.quote-trigger[b-htmrwlnj95] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    color: var(--rame-text-secondary, #667781);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: var(--rame-radius-full, 50%);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.quote-trigger:hover[b-htmrwlnj95],
.quote-trigger.is-open[b-htmrwlnj95] {
    background: rgba(0, 132, 255, 0.08);
    color: var(--rame-primary, #0084ff);
    border-color: var(--rame-primary, #0084ff);
}
.quote-trigger[b-htmrwlnj95]  svg { display: block; flex-shrink: 0; }

.quote-backdrop[b-htmrwlnj95] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.quote-panel[b-htmrwlnj95] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05);
    z-index: 100;
    padding: 10px;
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.quote-panel.is-visible[b-htmrwlnj95] {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Primary action: build a new quotation. */
.quote-new[b-htmrwlnj95] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    font-size: var(--rame-text-sm, 13px);
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, var(--rame-primary, #0084ff) 0%, var(--rame-primary-hover, #0073ea) 100%);
    transition: box-shadow 0.15s ease, transform 0.05s ease;
}
.quote-new:hover[b-htmrwlnj95] { box-shadow: 0 3px 10px rgba(0, 132, 255, 0.35); }
.quote-new:active[b-htmrwlnj95] { transform: translateY(1px); }
.quote-new-icon[b-htmrwlnj95] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    flex-shrink: 0;
}

.quote-reuse[b-htmrwlnj95] { margin-top: 10px; }

/* Search box with leading icon and trailing spinner */
.quote-search-wrap[b-htmrwlnj95] {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
.quote-search-icon[b-htmrwlnj95] {
    position: absolute;
    left: 10px;
    display: inline-flex;
    color: var(--rame-text-tertiary, #8696a0);
    pointer-events: none;
}
.quote-search-icon[b-htmrwlnj95]  svg { display: block; }
.quote-search[b-htmrwlnj95] {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 30px 8px 32px;
    border: 1.5px solid var(--rame-border-light, #e4e6eb);
    border-radius: 9px;
    font-family: inherit;
    font-size: 13px;
    color: var(--rame-text-primary, #111b21);
    background: var(--rame-bg-secondary, #f7f8fa);
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.quote-search:focus[b-htmrwlnj95] {
    border-color: var(--rame-primary, #0084ff);
    background: var(--rame-bg-primary, #fff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rame-primary, #0084ff) 12%, transparent);
}
.quote-search[b-htmrwlnj95]::placeholder { color: var(--rame-text-tertiary, #8696a0); }

/* Loading ring (search field + load-more button) */
.quote-spinner[b-htmrwlnj95] {
    width: 13px;
    height: 13px;
    border: 2px solid color-mix(in srgb, var(--rame-primary, #0084ff) 25%, transparent);
    border-top-color: var(--rame-primary, #0084ff);
    border-radius: 50%;
    animation: quote-spin-b-htmrwlnj95 0.6s linear infinite;
    flex-shrink: 0;
}
.quote-search-wrap .quote-spinner[b-htmrwlnj95] { position: absolute; right: 10px; }
.quote-spinner-dark[b-htmrwlnj95] {
    border-color: color-mix(in srgb, var(--rame-text-secondary, #667781) 30%, transparent);
    border-top-color: var(--rame-text-secondary, #667781);
}
@keyframes quote-spin-b-htmrwlnj95 { to { transform: rotate(360deg); } }

.quote-list[b-htmrwlnj95] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 320px;
    overflow-y: auto;
    margin: 0 -4px;
    padding: 0 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--rame-border-light, #e4e6eb) transparent;
}
.quote-list[b-htmrwlnj95]::-webkit-scrollbar { width: 5px; }
.quote-list[b-htmrwlnj95]::-webkit-scrollbar-thumb { background: var(--rame-border-light, #e4e6eb); border-radius: 3px; }
.quote-list[b-htmrwlnj95]::-webkit-scrollbar-track { background: transparent; }

.quote-item[b-htmrwlnj95] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 8px;
    border: none;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    transition: background 0.12s ease;
}
.quote-item.is-active[b-htmrwlnj95] { background: color-mix(in srgb, var(--rame-primary, #0084ff) 9%, transparent); }
.quote-item:active[b-htmrwlnj95] { transform: translateY(0.5px); }

.quote-thumb[b-htmrwlnj95] {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 9px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--rame-primary, #0084ff) 20%, transparent),
        color-mix(in srgb, var(--rame-primary, #0084ff) 6%, transparent));
}
.quote-thumb img[b-htmrwlnj95] { width: 100%; height: 100%; object-fit: cover; }
.quote-thumb-initial[b-htmrwlnj95] { font-size: 16px; font-weight: 700; color: var(--rame-primary, #0084ff); }

.quote-item-body[b-htmrwlnj95] { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.quote-item-head[b-htmrwlnj95] { display: flex; align-items: baseline; gap: 8px; }
.quote-item-title[b-htmrwlnj95] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--rame-text-primary, #111b21);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.quote-item-date[b-htmrwlnj95] {
    flex-shrink: 0;
    font-size: 10.5px;
    color: var(--rame-text-tertiary, #8696a0);
}
.quote-item-meta[b-htmrwlnj95] {
    font-size: 11.5px;
    color: var(--rame-text-secondary, #667781);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.quote-item-tags[b-htmrwlnj95] { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 1px; }
.quote-chip[b-htmrwlnj95] {
    font-size: 9.5px;
    font-weight: 700;
    padding: 1.5px 6px;
    border-radius: 5px;
    line-height: 1.5;
}
.quote-chip-template[b-htmrwlnj95] {
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--rame-primary, #0084ff);
    background: color-mix(in srgb, var(--rame-primary, #0084ff) 12%, transparent);
}
.quote-chip-usage[b-htmrwlnj95] {
    font-weight: 600;
    color: #1a7f55;
    background: rgba(26, 127, 85, 0.1);
}

.quote-more[b-htmrwlnj95] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin-top: 4px;
    padding: 8px;
    border: none;
    border-radius: 9px;
    background: var(--rame-bg-secondary, #f7f8fa);
    color: var(--rame-text-secondary, #667781);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.quote-more:hover:not(:disabled)[b-htmrwlnj95] {
    background: color-mix(in srgb, var(--rame-primary, #0084ff) 10%, transparent);
    color: var(--rame-primary, #0084ff);
}
.quote-more:disabled[b-htmrwlnj95] { cursor: default; opacity: 0.8; }

.quote-skeleton[b-htmrwlnj95] { display: flex; flex-direction: column; gap: 6px; padding: 4px; }
.quote-skeleton span[b-htmrwlnj95] {
    height: 40px;
    border-radius: 9px;
    background: linear-gradient(90deg,
        var(--rame-bg-secondary, #f0f2f5) 25%,
        color-mix(in srgb, var(--rame-bg-secondary, #f0f2f5) 55%, #fff) 50%,
        var(--rame-bg-secondary, #f0f2f5) 75%);
    background-size: 200% 100%;
    animation: quote-shimmer-b-htmrwlnj95 1.2s ease-in-out infinite;
}
@keyframes quote-shimmer-b-htmrwlnj95 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.quote-empty[b-htmrwlnj95] {
    padding: 18px 9px;
    text-align: center;
    font-size: 12px;
    color: var(--rame-text-tertiary, #8696a0);
}

.quote-hint[b-htmrwlnj95] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding: 6px 4px 2px;
    border-top: 1px solid var(--rame-border-light, #e4e6eb);
    font-size: 10.5px;
    color: var(--rame-text-tertiary, #8696a0);
}
.quote-hint-keys[b-htmrwlnj95] {
    flex-shrink: 0;
    letter-spacing: 0.3px;
    opacity: 0.85;
}

:global([data-rame-theme="dark"]) .quote-panel[b-htmrwlnj95] {
    background: var(--rame-bg-tertiary, #2a2a2a);
    border-color: rgba(255, 255, 255, 0.08);
}
:global([data-rame-theme="dark"]) .quote-search[b-htmrwlnj95] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--rame-text-primary, #f0f0f0);
}
:global([data-rame-theme="dark"]) .quote-search:focus[b-htmrwlnj95] { background: rgba(255, 255, 255, 0.06); }
:global([data-rame-theme="dark"]) .quote-item-title[b-htmrwlnj95] { color: var(--rame-text-primary, #f0f0f0); }
:global([data-rame-theme="dark"]) .quote-item.is-active[b-htmrwlnj95] { background: rgba(0, 132, 255, 0.16); }
:global([data-rame-theme="dark"]) .quote-more[b-htmrwlnj95] { background: rgba(255, 255, 255, 0.05); }
:global([data-rame-theme="dark"]) .quote-hint[b-htmrwlnj95] { border-top-color: rgba(255, 255, 255, 0.08); }
:global([data-rame-theme="dark"]) .quote-chip-usage[b-htmrwlnj95] { color: #4ade80; background: rgba(74, 222, 128, 0.12); }

/* ========== CUSTOM TOOLTIPS ========== */

[data-tooltip][b-htmrwlnj95] {
    position: relative;
}

[data-tooltip][b-htmrwlnj95]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    background: rgba(15, 23, 42, 0.92);
    color: #ffffff;
    font-size: 10px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 5px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    letter-spacing: 0.1px;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

[data-tooltip][b-htmrwlnj95]::before {
    content: "";
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    border: 4px solid transparent;
    border-bottom-color: rgba(15, 23, 42, 0.92);
    pointer-events: none;
    opacity: 0;
    z-index: 1000;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

[data-tooltip]:hover[b-htmrwlnj95]::after,
[data-tooltip]:hover[b-htmrwlnj95]::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ========== DARK MODE ========== */

[b-htmrwlnj95] [data-rame-theme="dark"] .stage-panel {
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.2);
}

[b-htmrwlnj95] [data-rame-theme="dark"] .stage-panel::before {
    border-color: rgba(255, 255, 255, 0.06);
}

[b-htmrwlnj95] [data-rame-theme="dark"] .stage-item:hover:not(.is-disabled):not(.is-current) {
    background: rgba(0, 132, 255, 0.12);
}

[b-htmrwlnj95] [data-rame-theme="dark"] .stage-item.is-current {
    background: rgba(0, 132, 255, 0.15);
}

[b-htmrwlnj95] [data-rame-theme="dark"] .assignment-panel {
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.2);
}

[b-htmrwlnj95] [data-rame-theme="dark"] .assignment-panel::before {
    border-color: rgba(255, 255, 255, 0.06);
}

[b-htmrwlnj95] [data-rame-theme="dark"] .ai-toggle-row {
    background: var(--rame-bg-tertiary, #2a2f35);
}

[b-htmrwlnj95] [data-rame-theme="dark"] .toggle-switch {
    background: var(--rame-border-light, #353a40);
}

[b-htmrwlnj95] [data-rame-theme="dark"] .toggle-switch::after {
    background: var(--rame-bg-primary, #1a1d21);
}

[b-htmrwlnj95] [data-rame-theme="dark"] .seller-item:hover,
[b-htmrwlnj95] [data-rame-theme="dark"] .seller-item.is-selected {
    background: rgba(0, 132, 255, 0.12);
}

[b-htmrwlnj95] [data-rame-theme="dark"] .seller-remove:hover {
    background: rgba(220, 38, 38, 0.1);
    color: #f87171;
}

[b-htmrwlnj95] [data-rame-theme="dark"] .header-meta-separator {
    background: rgba(197, 208, 220, 0.45);
}

[b-htmrwlnj95] [data-rame-theme="dark"] .header-channel {
    color: var(--rame-text-secondary, #c5d0dc);
}

[b-htmrwlnj95] [data-rame-theme="dark"] .widget-origin-chip {
    background: rgba(59, 158, 255, 0.1);
    border-color: rgba(59, 158, 255, 0.15);
    color: var(--rame-primary, #3b9eff);
}

[b-htmrwlnj95] [data-rame-theme="dark"] .widget-origin-chip:hover {
    background: rgba(59, 158, 255, 0.18);
    border-color: rgba(59, 158, 255, 0.28);
    box-shadow: 0 1px 4px rgba(59, 158, 255, 0.12);
}

@media (max-width: 900px) {
    .header-name-row[b-htmrwlnj95] {
        flex-wrap: wrap;
    }

    .header-meta-row[b-htmrwlnj95] {
        align-items: flex-start;
    }

    .header-origin-link[b-htmrwlnj95] {
        max-width: 100%;
    }
}

/* ── Email channel route row ── */
.email-route[b-htmrwlnj95] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--rame-text-secondary, #6b7280);
    font-family: var(--rame-font-mono, monospace);
    margin-left: 10px;
}
.email-route svg[b-htmrwlnj95] { width: 11px; height: 11px; color: var(--rame-text-tertiary, #9ca3af); }
.route-addr[b-htmrwlnj95] { color: var(--rame-text-secondary, #6b7280); }

/* ========== MOBILE / TABLET TWEAKS ==========
   Strategy: name takes its own first line so the chrome (priority dots,
   stage selector, assignment, learn button) wraps to a second row with
   real breathing room instead of all squeezed onto one line. */
@media (max-width: 1024px) {
    .chat-header[b-htmrwlnj95] {
        padding: var(--rame-space-2, 8px) var(--rame-space-3, 12px);
        gap: var(--rame-space-2, 8px);
        align-items: flex-start;        /* avatar + info top-aligned when info wraps */
    }

    .header-avatar[b-htmrwlnj95] {
        width: 36px;
        height: 36px;
    }

    .header-info[b-htmrwlnj95] {
        min-width: 0;
        flex: 1 1 auto;
    }

    .header-name-row[b-htmrwlnj95] {
        flex-wrap: wrap;
        column-gap: var(--rame-space-2, 8px);
        row-gap: var(--rame-space-2, 8px);
        align-items: center;
    }

    .contact-name-clickable[b-htmrwlnj95] {
        flex: 1 1 100%;                 /* claim a whole line so chrome wraps below */
        font-size: 15px;
    }
}

@media (max-width: 640px) {
    .chat-header[b-htmrwlnj95] {
        padding: var(--rame-space-2, 8px);
    }

    .header-avatar[b-htmrwlnj95] {
        width: 32px;
        height: 32px;
    }

    .priority-selector[b-htmrwlnj95] {
        gap: 4px;
    }

    .priority-option[b-htmrwlnj95] {
        width: 14px;
        height: 14px;
    }

    .stage-selector-area .stage-trigger[b-htmrwlnj95],
    .assignment-area .assignment-trigger[b-htmrwlnj95] {
        padding: 4px 8px;
        font-size: 11px;
    }

    .btn-learn-conversation[b-htmrwlnj95] {
        width: 28px;
        height: 28px;
    }

    .header-meta-row[b-htmrwlnj95] {
        font-size: 11px;
    }
}
/* _content/Rame.Blazor.Server/Components/Conversations/ChatInput.razor.rz.scp.css */
/* Premium Chat Input - Refined & Polished */
/* Uses Rame Design System tokens - see /css/design-system/_tokens.css */

/* ====================================================================
   EMAIL COMPOSE — renders in place of chat-input when channel is Email
   ==================================================================== */

.email-compose[b-3i36440in5] {
    background: var(--rame-bg-primary, #fff);
    border-top: 1px solid var(--rame-border-light, #e4e6eb);
    padding: 12px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

/* Reset browser defaults for every interactive element inside the compose area.
   Without this, inputs get the default 2px inset border and buttons get a
   gray bevel — that was the main visual mess in the chat reply panel. */
.email-compose input[b-3i36440in5],
.email-compose textarea[b-3i36440in5],
.email-compose button[b-3i36440in5] {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.email-compose button[b-3i36440in5] { cursor: pointer; }
.email-compose button:disabled[b-3i36440in5] { cursor: not-allowed; }
.email-compose input:focus[b-3i36440in5],
.email-compose textarea:focus[b-3i36440in5] { outline: none; box-shadow: none; }

/* Recipients row */
.compose-recipients[b-3i36440in5] {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
    gap: 10px;
}
.recipients-value[b-3i36440in5] {
    min-width: 0;
    display: flex;
    align-items: center;
}
.recipients-missing[b-3i36440in5] {
    font-size: 12px;
    color: var(--rame-text-tertiary, #9ca3af);
    font-style: italic;
}
.label[b-3i36440in5] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rame-text-tertiary, #9ca3af);
}
.chip-to[b-3i36440in5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    background: var(--rame-bg-secondary, #f7f8fa);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: 20px;
    font-size: 13px;
    color: var(--rame-text-primary, #111827);
    max-width: 100%;
    overflow: hidden;
}
.chip-to .chip-email[b-3i36440in5] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mini-avatar[b-3i36440in5] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--rame-primary, #0084ff), #1460b8);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    flex-shrink: 0;
}
.add-cc[b-3i36440in5] {
    font-size: 12px;
    color: var(--rame-primary, #0084ff);
    font-weight: 500;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: var(--rame-radius-sm, 6px);
    transition: background .12s;
}
.add-cc:hover[b-3i36440in5] { background: var(--rame-bg-hover, #f3f4f6); }

/* CC row */
.compose-cc[b-3i36440in5] {
    display: grid;
    grid-template-columns: 64px 1fr;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
    gap: 10px;
}
.cc-input[b-3i36440in5] {
    font-size: 13px;
    color: var(--rame-text-primary, #111827);
    width: 100%;
}
.cc-input[b-3i36440in5]::placeholder { color: var(--rame-text-tertiary, #9ca3af); }

/* Subject row */
.compose-subject[b-3i36440in5] {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
    gap: 10px;
}
.subject-input[b-3i36440in5] {
    font-size: 15px;
    font-weight: 500;
    color: var(--rame-text-primary, #111827);
    width: 100%;
}
.subject-input[b-3i36440in5]::placeholder { color: var(--rame-text-tertiary, #9ca3af); font-weight: 400; }
.template-hint[b-3i36440in5] {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--rame-primary, #0084ff);
    background: color-mix(in srgb, var(--rame-primary, #0084ff) 10%, transparent);
    padding: 3px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}

/* Rich body */
.compose-body[b-3i36440in5] {
    padding: 10px 0 4px;
    min-height: 140px;
    display: flex;
    flex-direction: column;
}
[b-3i36440in5] .compose-html-editor {
    min-height: 140px;
    border: none;
    border-radius: 0;
    overflow: visible;
}
[b-3i36440in5] .compose-html-editor .dxbl-html-editor-content,
[b-3i36440in5] .compose-html-editor .dx-htmleditor-content {
    min-height: 110px;
    line-height: 1.6;
    padding: 6px 2px;
    background: transparent;
    color: var(--rame-text-primary, #111827);
}

/* Footer toolbar */
.compose-footer[b-3i36440in5] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--rame-border-light, #e4e6eb);
    position: relative;
}
.compose-footer .spacer[b-3i36440in5] { flex: 1; }

.tool-btn[b-3i36440in5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: var(--rame-radius-md, 8px);
    color: var(--rame-text-secondary, #6b7280);
    font-size: 12px;
    font-weight: 500;
    transition: background .12s, color .12s;
}
.tool-btn:hover[b-3i36440in5] { background: var(--rame-bg-hover, #f3f4f6); color: var(--rame-text-primary, #111827); }
.tool-btn svg[b-3i36440in5] { width: 15px; height: 15px; }

.tool-btn-primary[b-3i36440in5] {
    background: var(--rame-primary, #0084ff);
    color: white !important;
    font-weight: 600;
    height: 36px;
    padding: 0 18px;
}
.tool-btn-primary:hover:not(:disabled)[b-3i36440in5] {
    background: var(--rame-primary-hover, #0070d8);
    transform: translateY(-1px);
    box-shadow: var(--rame-shadow-md, 0 4px 12px rgba(0,132,255,0.25));
}
.tool-btn-primary:disabled[b-3i36440in5] { opacity: 0.45; cursor: not-allowed; transform: none; }
.tool-btn-primary .spinner[b-3i36440in5] {
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-3i36440in5 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes spin-b-3i36440in5 { to { transform: rotate(360deg); } }

/* Dark mode email compose */
:global([data-rame-theme="dark"]) .email-compose[b-3i36440in5] {
    background: var(--rame-bg-primary, #1e1e1e);
    border-top-color: var(--rame-border-medium, #3d3d3d);
}
:global([data-rame-theme="dark"]) .compose-recipients[b-3i36440in5],
:global([data-rame-theme="dark"]) .compose-cc[b-3i36440in5],
:global([data-rame-theme="dark"]) .compose-subject[b-3i36440in5],
:global([data-rame-theme="dark"]) .compose-footer[b-3i36440in5] {
    border-color: var(--rame-border-medium, #3d3d3d);
}

.chat-input[b-3i36440in5] {
    padding: 12px 16px;
    border-top: 1px solid var(--rame-border-medium, #e9edef);
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--rame-bg-tertiary, #f0f2f5);
}

.input-row[b-3i36440in5] {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

/* ========== ERROR MESSAGES ========== */

.connection-error[b-3i36440in5],
.upload-error[b-3i36440in5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(135deg, var(--rame-warning-light, #fff3e0) 0%, var(--rame-warning-border, #ffe0b2) 100%);
    border-left: 3px solid var(--rame-warning, #ff9800);
    border-radius: 8px;
    animation: errorSlideIn-b-3i36440in5 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.12);
}

@keyframes errorSlideIn-b-3i36440in5 {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.error-icon[b-3i36440in5] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 152, 0, 0.1);
}

.error-message[b-3i36440in5] {
    flex: 1;
    color: var(--rame-warning-text, #e65100);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
}

/* ========== INPUT FIELD ========== */

.message-input[b-3i36440in5] {
    flex: 1;
    padding: 11px 18px;
    border: none;
    border-radius: 24px;
    font-size: 15px;
    line-height: 20px;
    background: var(--rame-bg-primary, #ffffff);
    color: var(--rame-text-primary, #111b21);
    transition: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    outline: none;
    font-family: var(--rame-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    box-shadow: var(--rame-shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.05));
    resize: none;
    min-height: 42px;
    max-height: 120px;
    overflow-y: auto;
    field-sizing: content;
}

.message-input[b-3i36440in5]::placeholder {
    color: var(--rame-text-muted, #8696a0);
}

.message-input:focus[b-3i36440in5] {
    box-shadow: var(--rame-shadow-focus-success, 0 0 0 2px rgba(37, 211, 102, 0.25)), 0 2px 8px rgba(0, 0, 0, 0.08);
}

.message-input:disabled[b-3i36440in5] {
    background: var(--rame-border-medium, #e9edef);
    color: var(--rame-text-muted, #8696a0);
    cursor: not-allowed;
    box-shadow: none;
}

/* ========== SEND BUTTON (Matches .btn-attach style) ========== */

.btn-send[b-3i36440in5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: var(--rame-bg-primary, #ffffff);
    color: var(--rame-text-muted, #8696a0);
    box-shadow: var(--rame-shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.08));
    flex-shrink: 0;
    position: relative;
}

.btn-send[b-3i36440in5]::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rame-success, #25d366) 0%, var(--rame-success-hover, #20ba5a) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

/* Active state - has content to send */
.btn-send.active[b-3i36440in5] {
    background: linear-gradient(135deg, var(--rame-success, #25d366) 0%, var(--rame-success-hover, #20ba5a) 100%);
    color: #ffffff;
    box-shadow: var(--rame-shadow-success, 0 2px 8px rgba(37, 211, 102, 0.35));
}

.btn-send.active:hover[b-3i36440in5] {
    background: linear-gradient(135deg, var(--rame-success-hover, #20ba5a) 0%, var(--rame-success-dark, #1ea952) 100%);
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.5);
    transform: scale(1.08);
}

.btn-send.active:hover[b-3i36440in5]::before {
    opacity: 0.15;
}

.btn-send.active:active[b-3i36440in5] {
    transform: scale(0.92);
    box-shadow: 0 2px 6px rgba(37, 211, 102, 0.3);
    transition-duration: 0.1s;
}

/* Disabled state */
.btn-send:disabled[b-3i36440in5] {
    cursor: not-allowed;
    transform: none !important;
    opacity: 0.4;
}

.btn-send:disabled:hover[b-3i36440in5] {
    transform: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.spinner[b-3i36440in5] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin-b-3i36440in5 0.8s linear infinite;
}

@keyframes spin-b-3i36440in5 {
    to { transform: rotate(360deg); }
}

/* ========== SCHEDULE BUTTON (Matches .btn-attach style — same shape language) ========== */

.btn-schedule[b-3i36440in5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: var(--rame-bg-primary, #ffffff);
    color: var(--rame-text-secondary, #54656f);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
    box-shadow: var(--rame-shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.08));
    position: relative;
}

/* Same green-halo on hover as attach/mic — keeps the button family coherent. */
.btn-schedule[b-3i36440in5]::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rame-success, #25d366) 0%, var(--rame-success-hover, #20ba5a) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.btn-schedule:hover:not(:disabled)[b-3i36440in5] {
    background: var(--rame-bg-primary, #ffffff);
    color: var(--rame-text-primary, #1f2937);
    transform: scale(1.08);
    box-shadow: var(--rame-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));
}

.btn-schedule:hover:not(:disabled)[b-3i36440in5]::before {
    opacity: 0.08;
}

.btn-schedule:not(:disabled):active[b-3i36440in5] {
    transform: scale(0.92);
    transition-duration: 0.1s;
}

.btn-schedule:disabled[b-3i36440in5] {
    cursor: not-allowed;
    opacity: 0.4;
}

/* ========== SCHEDULE POPUP (shared by Programar and Reprogramar dialogs) ========== */

.schedule-picker-body[b-3i36440in5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 2px 2px;
}

.schedule-picker-label[b-3i36440in5] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--rame-text-muted, #8696a0);
}

.schedule-picker-hint[b-3i36440in5] {
    font-size: 12px;
    color: var(--rame-text-muted, #8696a0);
    margin: 4px 0 0;
    line-height: 1.5;
}

/* Horizontal footer — DxPopup's default footer slot stacks children vertically,
   so the explicit flex wrapper inside FooterTemplate fixes the layout. */
.schedule-picker-footer[b-3i36440in5] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}

/* DevExpress generates the DxDateEdit input inside its own wrapper. The picker has
   to sit on its own line full-width inside the popup body. */
[b-3i36440in5] .schedule-picker-date {
    width: 100%;
    display: block;
}

[b-3i36440in5] .schedule-picker-date .dxbs-edit {
    width: 100%;
}

/* Tighten the popup chrome so the body and footer breathe consistently. */
[b-3i36440in5] .rame-schedule-popup .modal-content,
[b-3i36440in5] .rame-schedule-popup .dxbl-popup-content {
    border-radius: var(--rame-radius-lg, 12px);
    overflow: hidden;
}

[b-3i36440in5] .rame-schedule-popup .modal-header,
[b-3i36440in5] .rame-schedule-popup .dxbl-popup-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
}

[b-3i36440in5] .rame-schedule-popup .modal-title,
[b-3i36440in5] .rame-schedule-popup .dxbl-popup-header-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--rame-text-primary, #1f2937);
}

[b-3i36440in5] .rame-schedule-popup .modal-body,
[b-3i36440in5] .rame-schedule-popup .dxbl-popup-body {
    padding: 16px 18px 12px;
}

[b-3i36440in5] .rame-schedule-popup .modal-footer,
[b-3i36440in5] .rame-schedule-popup .dxbl-popup-footer {
    padding: 12px 18px 14px;
    border-top: 1px solid var(--rame-border-light, #e4e6eb);
    background: var(--rame-bg-subtle, #f8f9fa);
}

/* ========== ATTACH BUTTON ========== */

/* Target both the class and the actual input element generated by Blazor */
.file-input[b-3i36440in5],
input[type="file"].file-input[b-3i36440in5],
[b-3i36440in5] input[type="file"].file-input,
[b-3i36440in5] .file-input input[type="file"] {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -9999 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}

.btn-attach[b-3i36440in5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--rame-bg-primary, #ffffff);
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
    box-shadow: var(--rame-shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.08));
    position: relative;
}

.btn-attach[b-3i36440in5]::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rame-success, #25d366) 0%, var(--rame-success-hover, #20ba5a) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.btn-attach:not(.disabled):hover[b-3i36440in5] {
    background: var(--rame-bg-primary, #ffffff);
    transform: scale(1.12) rotate(15deg);
    box-shadow: var(--rame-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));
}

.btn-attach:not(.disabled):hover[b-3i36440in5]::before {
    opacity: 0.1;
}

.btn-attach:not(.disabled):active[b-3i36440in5] {
    transform: scale(0.92) rotate(0deg);
    transition-duration: 0.1s;
}

.btn-attach.disabled[b-3i36440in5] {
    cursor: not-allowed;
    opacity: 0.4;
}

/* ========== ATTACHMENTS PREVIEW ========== */

.attachments-preview[b-3i36440in5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
    padding: 14px;
    background: var(--rame-bg-primary, #ffffff);
    border-radius: 12px;
    border: 1px solid var(--rame-border-medium, #e9edef);
    max-height: 260px;
    overflow-y: auto;
    animation: previewExpand-b-3i36440in5 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: var(--rame-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.06));
}

@keyframes previewExpand-b-3i36440in5 {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.95);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        max-height: 260px;
    }
}

/* ========== ATTACHMENT CARDS ========== */

.attachment-card[b-3i36440in5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: var(--rame-bg-chat, #f7f9fa);
    border-radius: 10px;
    border: 1.5px solid transparent;
    transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    animation: cardSlideIn-b-3i36440in5 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    position: relative;
    overflow: hidden;
}

.attachment-card[b-3i36440in5]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease;
}

.attachment-card:hover[b-3i36440in5]::before {
    left: 100%;
}

.attachment-card:nth-child(1)[b-3i36440in5] { animation-delay: 0.05s; }
.attachment-card:nth-child(2)[b-3i36440in5] { animation-delay: 0.1s; }
.attachment-card:nth-child(3)[b-3i36440in5] { animation-delay: 0.15s; }
.attachment-card:nth-child(4)[b-3i36440in5] { animation-delay: 0.2s; }
.attachment-card:nth-child(5)[b-3i36440in5] { animation-delay: 0.25s; }
.attachment-card:nth-child(6)[b-3i36440in5] { animation-delay: 0.3s; }
.attachment-card:nth-child(7)[b-3i36440in5] { animation-delay: 0.35s; }
.attachment-card:nth-child(8)[b-3i36440in5] { animation-delay: 0.4s; }

@keyframes cardSlideIn-b-3i36440in5 {
    from {
        opacity: 0;
        transform: translateX(-24px) scale(0.92);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.attachment-card:hover[b-3i36440in5] {
    background: var(--rame-bg-primary, #ffffff);
    border-color: var(--rame-border-medium, #e9edef);
    box-shadow: var(--rame-shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.12));
    transform: translateY(-3px);
}

.attachment-card.media-image:hover[b-3i36440in5] {
    border-color: var(--rame-attachment-image, #00897b);
}

.attachment-card.media-video:hover[b-3i36440in5] {
    border-color: var(--rame-attachment-video, #5e35b1);
}

.attachment-card.media-audio:hover[b-3i36440in5] {
    border-color: var(--rame-attachment-audio, #e91e63);
}

.attachment-card.media-document:hover[b-3i36440in5] {
    border-color: var(--rame-attachment-document, #1976d2);
}

.attachment-card-content[b-3i36440in5] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

/* ========== ATTACHMENT ICON/THUMBNAIL ========== */

.attachment-icon-wrapper[b-3i36440in5] {
    flex-shrink: 0;
}

.attachment-thumbnail[b-3i36440in5] {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--rame-border-medium, #e9edef);
    box-shadow: var(--rame-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.15));
    position: relative;
    cursor: zoom-in;
    transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.attachment-thumbnail:hover[b-3i36440in5] {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    transform: scale(1.08);
}

.attachment-thumbnail:active[b-3i36440in5] {
    transform: scale(1.02);
    transition-duration: 0.1s;
}

.attachment-thumbnail img[b-3i36440in5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.attachment-thumbnail:hover img[b-3i36440in5] {
    filter: brightness(0.7);
}

.attachment-thumbnail[b-3i36440in5]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.attachment-thumbnail[b-3i36440in5]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border: 2px solid white;
    border-radius: 2px;
    opacity: 0;
    z-index: 1;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-sizing: border-box;
}

.attachment-thumbnail:hover[b-3i36440in5]::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

.attachment-thumbnail:hover[b-3i36440in5]::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
}

.attachment-type-icon[b-3i36440in5] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
}

.media-image .attachment-type-icon[b-3i36440in5] {
    background: linear-gradient(135deg, #00897b15 0%, #00897b25 100%);
}

.media-video .attachment-type-icon[b-3i36440in5] {
    background: linear-gradient(135deg, #5e35b115 0%, #5e35b125 100%);
}

.media-audio .attachment-type-icon[b-3i36440in5] {
    background: linear-gradient(135deg, #e91e6315 0%, #e91e6325 100%);
}

.media-document .attachment-type-icon[b-3i36440in5] {
    background: linear-gradient(135deg, #1976d215 0%, #1976d225 100%);
}

.attachment-card:hover .attachment-type-icon[b-3i36440in5] {
    transform: scale(1.08) rotate(3deg);
}

/* ========== ATTACHMENT INFO ========== */

.attachment-info[b-3i36440in5] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.attachment-name[b-3i36440in5] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--rame-text-primary, #111b21);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.1px;
}

.attachment-meta[b-3i36440in5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
}

.attachment-size[b-3i36440in5] {
    color: var(--rame-text-meta, #667781);
    font-weight: 500;
}

.attachment-type-badge[b-3i36440in5] {
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 10px;
    transition: all 0.2s ease;
}

.media-image .attachment-type-badge[b-3i36440in5] {
    background: rgba(0, 137, 123, 0.12);
    color: #00695c;
}

.media-video .attachment-type-badge[b-3i36440in5] {
    background: rgba(94, 53, 177, 0.12);
    color: #4527a0;
}

.media-audio .attachment-type-badge[b-3i36440in5] {
    background: rgba(233, 30, 99, 0.12);
    color: #c2185b;
}

.media-document .attachment-type-badge[b-3i36440in5] {
    background: rgba(25, 118, 210, 0.12);
    color: #1565c0;
}

/* ========== REMOVE BUTTON ========== */

.btn-remove-attachment[b-3i36440in5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--rame-text-muted, #8696a0);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
    font-size: 0;
}

.btn-remove-attachment:hover[b-3i36440in5] {
    background: var(--rame-error, #ef5350);
    color: #ffffff;
    transform: scale(1.05) rotate(90deg);
    box-shadow: var(--rame-shadow-error, 0 2px 6px rgba(239, 83, 80, 0.35));
}

.btn-remove-attachment:active[b-3i36440in5] {
    transform: scale(0.92) rotate(90deg);
    transition-duration: 0.1s;
}

/* ========== SCROLLBAR STYLING ========== */

.attachments-preview[b-3i36440in5]::-webkit-scrollbar {
    width: 8px;
}

.attachments-preview[b-3i36440in5]::-webkit-scrollbar-track {
    background: var(--rame-bg-tertiary, #f0f2f5);
    border-radius: 4px;
}

.attachments-preview[b-3i36440in5]::-webkit-scrollbar-thumb {
    background: var(--rame-scrollbar-thumb, #d1d7db);
    border-radius: 4px;
    transition: background 0.2s ease;
}

.attachments-preview[b-3i36440in5]::-webkit-scrollbar-thumb:hover {
    background: var(--rame-text-muted, #8696a0);
}

/* ========== RESPONSIVE DESIGN ========== */

@media (max-width: 768px) {
    .chat-input[b-3i36440in5] {
        padding: 10px 12px;
    }

    .message-input[b-3i36440in5] {
        font-size: 14px;
        padding: 10px 16px;
    }

    .btn-send[b-3i36440in5],
    .btn-attach[b-3i36440in5] {
        width: 40px;
        height: 40px;
    }

    .attachments-preview[b-3i36440in5] {
        grid-template-columns: 1fr;
        max-height: 220px;
    }

    .attachment-thumbnail[b-3i36440in5] {
        width: 48px;
        height: 48px;
    }

    .attachment-type-icon[b-3i36440in5] {
        width: 42px;
        height: 42px;
    }
}

@media (max-width: 480px) {
    .attachment-name[b-3i36440in5] {
        font-size: 12.5px;
    }

    .attachment-meta[b-3i36440in5] {
        font-size: 10.5px;
    }

    .attachments-preview[b-3i36440in5] {
        max-height: 180px;
    }
}

/* ========== ACCESSIBILITY ========== */

.btn-attach:focus-visible[b-3i36440in5],
.btn-send:focus-visible[b-3i36440in5],
.btn-remove-attachment:focus-visible[b-3i36440in5] {
    outline: 2px solid var(--rame-success, #25d366);
    outline-offset: 2px;
}

.message-input:focus-visible[b-3i36440in5] {
    outline: none;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .attachments-preview[b-3i36440in5],
    .connection-error[b-3i36440in5],
    .upload-error[b-3i36440in5],
    .attachment-card[b-3i36440in5],
    .btn-attach:hover[b-3i36440in5],
    .btn-send.active:hover[b-3i36440in5],
    .btn-remove-attachment:hover[b-3i36440in5],
    .attachment-type-icon[b-3i36440in5],
    .spinner[b-3i36440in5] {
        animation: none;
        transform: none !important;
    }
}

/* ========== TEMPLATE SELECTOR INTEGRATION ========== */

.session-warning[b-3i36440in5] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--rame-warning-lighter, #fff8e1) 0%, var(--rame-warning-border, #ffecb3) 100%);
    border-left: 3px solid var(--rame-warning-dark, #ffc107);
    border-radius: 8px;
    animation: warningSlideIn-b-3i36440in5 0.3s ease;
}

@keyframes warningSlideIn-b-3i36440in5 {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.session-warning .warning-icon[b-3i36440in5] {
    font-size: 18px;
}

.session-warning .warning-text[b-3i36440in5] {
    flex: 1;
    font-size: 13px;
    color: var(--rame-text-primary, #5d4037);
    line-height: 1.4;
}

.btn-open-templates[b-3i36440in5] {
    padding: 8px 16px;
    background: var(--rame-accent, #00a884);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-open-templates:hover[b-3i36440in5] {
    background: var(--rame-accent-hover, #008f72);
    transform: translateY(-1px);
}

.btn-template[b-3i36440in5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--rame-bg-tertiary, #f0f2f5);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    font-size: 18px;
}

.btn-template:hover[b-3i36440in5] {
    background: var(--rame-border-light, #e4e6eb);
    transform: scale(1.05);
}

.btn-template:active[b-3i36440in5] {
    transform: scale(0.95);
}

/* ========== SESSION WINDOW BLOCKING STATES ========== */

/* ============================================================
   Completely blocked state — clean single-row notice
   ============================================================ */

.session-blocked-notice-v2[b-3i36440in5] {
    display: grid;
    grid-template-columns: 32px 1fr;
    align-items: start;
    column-gap: 12px;
    padding: 14px 16px;
    background: var(--rame-bg-primary, #ffffff);
    border-radius: 12px;
    border: 1px solid var(--rame-border-light, #e9edef);
    animation: blockedSlideInV2-b-3i36440in5 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes blockedSlideInV2-b-3i36440in5 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.blocked-icon-compact[b-3i36440in5] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--rame-bg-tertiary, #f0f2f5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rame-text-meta, #667781);
    flex-shrink: 0;
}

.blocked-text-compact[b-3i36440in5] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding-top: 1px;
}

.blocked-title-v2[b-3i36440in5] {
    font-size: 13px;
    font-weight: 600;
    color: var(--rame-text-primary, #111b21);
    line-height: 1.3;
    letter-spacing: -0.1px;
}

.blocked-description[b-3i36440in5] {
    font-size: 12px;
    color: var(--rame-text-secondary, #54656f);
    line-height: 1.5;
}

/* Inline highlight for "template aprobado" — subtle pill */
.blocked-highlight[b-3i36440in5] {
    background: var(--rame-info-light, #e3f2fd);
    color: var(--rame-info-text, #1565c0);
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
}

/* Template required state - has templates available */
.session-template-required[b-3i36440in5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--rame-warning-lighter, #fff8e1) 0%, var(--rame-warning-border, #ffecb3) 100%);
    border-radius: 12px;
    border: 1px solid var(--rame-warning-border, #ffe082);
    animation: templateRequiredSlideIn-b-3i36440in5 0.3s ease;
}

@keyframes templateRequiredSlideIn-b-3i36440in5 {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.template-required-header[b-3i36440in5] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.template-required-icon[b-3i36440in5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(245, 124, 0, 0.1);
    flex-shrink: 0;
}

.template-required-text[b-3i36440in5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.template-required-title[b-3i36440in5] {
    font-size: 14px;
    font-weight: 600;
    color: var(--rame-warning-text, #e65100);
}

.template-required-subtitle[b-3i36440in5] {
    font-size: 12px;
    color: var(--rame-warning-text, #bf360c);
    opacity: 0.85;
}

.btn-use-template[b-3i36440in5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--rame-accent, #00a884) 0%, var(--rame-accent-hover, #008f72) 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 168, 132, 0.3);
}

.btn-use-template:hover[b-3i36440in5] {
    background: linear-gradient(135deg, var(--rame-accent-hover, #008f72) 0%, var(--rame-accent-dark, #007a60) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 168, 132, 0.4);
}

.btn-use-template:active[b-3i36440in5] {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 168, 132, 0.3);
}

.btn-use-template .btn-icon[b-3i36440in5] {
    font-size: 16px;
}

/* ========== RESPONSIVE ADJUSTMENTS FOR BLOCKING STATES ========== */

@media (max-width: 600px) {
    .session-blocked-notice-v2[b-3i36440in5] {
        padding: 12px 14px;
        grid-template-columns: 28px 1fr;
        column-gap: 10px;
    }

    .blocked-icon-compact[b-3i36440in5] {
        width: 28px;
        height: 28px;
    }

    .blocked-title-v2[b-3i36440in5] {
        font-size: 12.5px;
    }

    .blocked-description[b-3i36440in5] {
        font-size: 11.5px;
    }

    .session-template-required[b-3i36440in5] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .template-required-header[b-3i36440in5] {
        justify-content: center;
        text-align: center;
    }

    .template-required-text[b-3i36440in5] {
        align-items: center;
    }

    .btn-use-template[b-3i36440in5] {
        justify-content: center;
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .session-blocked-notice-v2[b-3i36440in5],
    .session-template-required[b-3i36440in5] {
        animation: none;
    }

    .btn-use-template:hover[b-3i36440in5] {
        transform: none;
    }
}

/* ========== DROP ZONE OVERLAY ========== */

.chat-input[b-3i36440in5] {
    position: relative;
}

.drop-overlay[b-3i36440in5] {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 10;
    background: rgba(0, 168, 132, 0.08);
    border: 2px dashed var(--rame-accent, #00a884);
    border-radius: inherit;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    animation: dropOverlayFadeIn-b-3i36440in5 0.2s ease;
}

:global(.chat-input.drag-over) .drop-overlay[b-3i36440in5] {
    display: flex;
}

@keyframes dropOverlayFadeIn-b-3i36440in5 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.drop-overlay-content[b-3i36440in5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: var(--rame-bg-primary, #ffffff);
    border-radius: 12px;
    box-shadow: var(--rame-shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.12));
}

.drop-overlay-content span[b-3i36440in5] {
    font-size: 14px;
    font-weight: 600;
    color: var(--rame-accent, #00a884);
    letter-spacing: -0.2px;
}

/* ========== DARK MODE OVERRIDES ========== */

:global([data-rame-theme="dark"]) .connection-error[b-3i36440in5],
:global([data-rame-theme="dark"]) .upload-error[b-3i36440in5] {
    background: linear-gradient(135deg, var(--rame-warning-light, #3d3020) 0%, var(--rame-warning-lighter, #3d3520) 100%);
    border-left-color: var(--rame-warning, #ffb347);
    box-shadow: 0 2px 8px rgba(255, 179, 71, 0.15);
}

:global([data-rame-theme="dark"]) .error-icon[b-3i36440in5] {
    background: rgba(255, 179, 71, 0.2);
}

:global([data-rame-theme="dark"]) .error-message[b-3i36440in5] {
    color: var(--rame-warning-text, #ffc978);
}

:global([data-rame-theme="dark"]) .attachments-preview[b-3i36440in5] {
    background: var(--rame-bg-secondary, #282828);
    border-color: var(--rame-border-medium, #505050);
}

:global([data-rame-theme="dark"]) .attachment-card[b-3i36440in5] {
    background: var(--rame-bg-tertiary, #333333);
}

:global([data-rame-theme="dark"]) .attachment-card[b-3i36440in5]::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

:global([data-rame-theme="dark"]) .attachment-card:hover[b-3i36440in5] {
    background: var(--rame-bg-hover, #3a3a3a);
    border-color: var(--rame-border-medium, #505050);
}

:global([data-rame-theme="dark"]) .attachment-name[b-3i36440in5] {
    color: var(--rame-text-primary, #f0f0f0);
}

:global([data-rame-theme="dark"]) .attachment-size[b-3i36440in5] {
    color: var(--rame-text-meta, #a8a8a8);
}

:global([data-rame-theme="dark"]) .attachment-type-badge[b-3i36440in5] {
    background: rgba(255, 255, 255, 0.1);
}

:global([data-rame-theme="dark"]) .media-image .attachment-type-badge[b-3i36440in5] {
    background: rgba(0, 137, 123, 0.25);
    color: #4db6ac;
}

:global([data-rame-theme="dark"]) .media-video .attachment-type-badge[b-3i36440in5] {
    background: rgba(94, 53, 177, 0.25);
    color: #9575cd;
}

:global([data-rame-theme="dark"]) .media-audio .attachment-type-badge[b-3i36440in5] {
    background: rgba(233, 30, 99, 0.25);
    color: #f48fb1;
}

:global([data-rame-theme="dark"]) .media-document .attachment-type-badge[b-3i36440in5] {
    background: rgba(25, 118, 210, 0.25);
    color: #64b5f6;
}

:global([data-rame-theme="dark"]) .media-image .attachment-type-icon[b-3i36440in5] {
    background: linear-gradient(135deg, rgba(0, 137, 123, 0.2) 0%, rgba(0, 137, 123, 0.3) 100%);
}

:global([data-rame-theme="dark"]) .media-video .attachment-type-icon[b-3i36440in5] {
    background: linear-gradient(135deg, rgba(94, 53, 177, 0.2) 0%, rgba(94, 53, 177, 0.3) 100%);
}

:global([data-rame-theme="dark"]) .media-audio .attachment-type-icon[b-3i36440in5] {
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.2) 0%, rgba(233, 30, 99, 0.3) 100%);
}

:global([data-rame-theme="dark"]) .media-document .attachment-type-icon[b-3i36440in5] {
    background: linear-gradient(135deg, rgba(25, 118, 210, 0.2) 0%, rgba(25, 118, 210, 0.3) 100%);
}

:global([data-rame-theme="dark"]) .session-warning[b-3i36440in5] {
    background: linear-gradient(135deg, var(--rame-warning-light, #3d3020) 0%, var(--rame-warning-lighter, #3d3520) 100%);
    border-left-color: var(--rame-warning-dark, #e6a23c);
}

:global([data-rame-theme="dark"]) .session-warning .warning-text[b-3i36440in5] {
    color: var(--rame-warning-text, #ffc978);
}

:global([data-rame-theme="dark"]) .session-blocked-notice-v2[b-3i36440in5] {
    background: var(--rame-bg-secondary, #282828);
    border-color: var(--rame-border-medium, #505050);
}

:global([data-rame-theme="dark"]) .blocked-icon-compact[b-3i36440in5] {
    background: var(--rame-bg-tertiary, #333333);
    color: var(--rame-text-tertiary, #a0a0a0);
}

:global([data-rame-theme="dark"]) .blocked-title-v2[b-3i36440in5] {
    color: var(--rame-text-primary, #f0f0f0);
}

:global([data-rame-theme="dark"]) .blocked-description[b-3i36440in5] {
    color: var(--rame-text-secondary, #c8c8c8);
}

:global([data-rame-theme="dark"]) .blocked-highlight[b-3i36440in5] {
    background: var(--rame-info-light, #1a2d3d);
    color: var(--rame-info-text, #7dd3f0);
}

:global([data-rame-theme="dark"]) .session-template-required[b-3i36440in5] {
    background: linear-gradient(135deg, var(--rame-warning-light, #3d3020) 0%, var(--rame-warning-lighter, #3d3520) 100%);
    border-color: var(--rame-warning-border, #5a4530);
}

:global([data-rame-theme="dark"]) .template-required-icon[b-3i36440in5] {
    background: rgba(255, 179, 71, 0.2);
}

:global([data-rame-theme="dark"]) .template-required-title[b-3i36440in5] {
    color: var(--rame-warning-text, #ffc978);
}

:global([data-rame-theme="dark"]) .template-required-subtitle[b-3i36440in5] {
    color: var(--rame-warning-text, #ffc978);
}

:global([data-rame-theme="dark"]) .drop-overlay[b-3i36440in5] {
    background: rgba(0, 168, 132, 0.12);
    border-color: var(--rame-accent, #00a884);
}

:global([data-rame-theme="dark"]) .drop-overlay-content[b-3i36440in5] {
    background: var(--rame-bg-secondary, #282828);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* ====================================================================
   Replying-to strip — appears above the input when the user is composing
   a quoted reply. Mirrors WhatsApp Web styling: vertical accent bar +
   author/snippet stack + cancel button.
   ==================================================================== */
.replying-to-strip[b-3i36440in5] {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 8px 12px;
    margin: 6px 8px 0;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
}
.replying-to-bar[b-3i36440in5] {
    width: 3px;
    background: var(--rame-primary, #0084ff);
    border-radius: 2px;
    flex-shrink: 0;
}
.replying-to-body[b-3i36440in5] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.replying-to-author[b-3i36440in5] {
    font-size: 12px;
    font-weight: 600;
    color: var(--rame-primary, #0084ff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.replying-to-snippet[b-3i36440in5] {
    font-size: 13px;
    color: var(--rame-text-secondary, rgba(0, 0, 0, 0.6));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.replying-to-cancel[b-3i36440in5] {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0 6px;
    font-size: 18px;
    line-height: 1;
    color: var(--rame-text-secondary, rgba(0, 0, 0, 0.6));
    align-self: center;
}
.replying-to-cancel:hover[b-3i36440in5] {
    color: var(--rame-text-primary, #222);
}

/* Informational strip shown above the input on Instagram when we are between 24h and 7d
   of the last inbound AND the channel has the Human Agent permission enabled. The send
   path will inject Meta's human_agent tag silently — the strip is just a passive cue so
   sellers understand why the input is still open. */
.human-agent-extension-strip[b-3i36440in5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 0 12px 6px;
    background: var(--rame-bg-info-subtle, #e7f1ff);
    border: 1px solid var(--rame-border-info, #b6d4fe);
    border-radius: 8px;
    color: var(--rame-text-info, #0d6efd);
    font-size: 12px;
    line-height: 1.3;
}
.human-agent-extension-strip .extension-icon[b-3i36440in5] {
    display: inline-flex;
    align-items: center;
}
.human-agent-extension-strip .extension-text[b-3i36440in5] {
    font-weight: 500;
}

/* ========== MOBILE — SAFE AREA + MIN 16PX FONT TO PREVENT iOS ZOOM ========== */
@media (max-width: 1024px) {
    .chat-input[b-3i36440in5] {
        padding-bottom: calc(var(--rame-space-3, 12px) + env(safe-area-inset-bottom));
    }

    .chat-input .message-input[b-3i36440in5],
    .chat-input textarea[b-3i36440in5],
    .chat-input input[type="text"][b-3i36440in5] {
        font-size: 16px; /* prevents iOS auto-zoom on focus */
    }
}
/* _content/Rame.Blazor.Server/Components/Conversations/ChatMainPanel.razor.rz.scp.css */
/* Professional Chat Main Panel - Refined Enterprise Design */
/* Uses Rame Design System tokens - see /css/design-system/_tokens.css */

/* ========== EDIT SCHEDULED POPUP ========== */

.edit-scheduled-body[b-10ju1kuy2v] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 2px 2px;
}

.edit-scheduled-label[b-10ju1kuy2v] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--rame-text-muted, #8696a0);
}

.edit-scheduled-textarea[b-10ju1kuy2v] {
    width: 100%;
    min-height: 110px;
    padding: 10px 12px;
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: var(--rame-text-primary, #1f2937);
    background: var(--rame-bg-primary, #ffffff);
    resize: vertical;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.edit-scheduled-textarea:focus[b-10ju1kuy2v] {
    outline: none;
    border-color: var(--rame-success, #25d366);
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.18);
}

.edit-scheduled-hint[b-10ju1kuy2v] {
    font-size: 12px;
    color: var(--rame-text-muted, #8696a0);
    margin: 4px 0 0;
    line-height: 1.5;
}

.edit-scheduled-footer[b-10ju1kuy2v] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}

[b-10ju1kuy2v] .rame-edit-scheduled-popup .modal-content,
[b-10ju1kuy2v] .rame-edit-scheduled-popup .dxbl-popup-content {
    border-radius: var(--rame-radius-lg, 12px);
    overflow: hidden;
}

[b-10ju1kuy2v] .rame-edit-scheduled-popup .modal-header,
[b-10ju1kuy2v] .rame-edit-scheduled-popup .dxbl-popup-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
}

[b-10ju1kuy2v] .rame-edit-scheduled-popup .modal-title,
[b-10ju1kuy2v] .rame-edit-scheduled-popup .dxbl-popup-header-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--rame-text-primary, #1f2937);
}

[b-10ju1kuy2v] .rame-edit-scheduled-popup .modal-body,
[b-10ju1kuy2v] .rame-edit-scheduled-popup .dxbl-popup-body {
    padding: 16px 18px 12px;
}

[b-10ju1kuy2v] .rame-edit-scheduled-popup .modal-footer,
[b-10ju1kuy2v] .rame-edit-scheduled-popup .dxbl-popup-footer {
    padding: 12px 18px 14px;
    border-top: 1px solid var(--rame-border-light, #e4e6eb);
    background: var(--rame-bg-subtle, #f8f9fa);
}

/* ========== RESCHEDULE POPUP (Same shape language as the schedule popup) ========== */

.reschedule-picker-body[b-10ju1kuy2v] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 2px 2px;
}

.reschedule-picker-label[b-10ju1kuy2v] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--rame-text-muted, #8696a0);
}

.reschedule-picker-hint[b-10ju1kuy2v] {
    font-size: 12px;
    color: var(--rame-text-muted, #8696a0);
    margin: 4px 0 0;
    line-height: 1.5;
}

/* Horizontal footer (DxPopup stacks DxButton children vertically by default). */
.reschedule-picker-footer[b-10ju1kuy2v] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}

[b-10ju1kuy2v] .reschedule-picker-date {
    width: 100%;
    display: block;
}

[b-10ju1kuy2v] .reschedule-picker-date .dxbs-edit {
    width: 100%;
}

[b-10ju1kuy2v] .rame-reschedule-popup .modal-content,
[b-10ju1kuy2v] .rame-reschedule-popup .dxbl-popup-content {
    border-radius: var(--rame-radius-lg, 12px);
    overflow: hidden;
}

[b-10ju1kuy2v] .rame-reschedule-popup .modal-header,
[b-10ju1kuy2v] .rame-reschedule-popup .dxbl-popup-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
}

[b-10ju1kuy2v] .rame-reschedule-popup .modal-title,
[b-10ju1kuy2v] .rame-reschedule-popup .dxbl-popup-header-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--rame-text-primary, #1f2937);
}

[b-10ju1kuy2v] .rame-reschedule-popup .modal-body,
[b-10ju1kuy2v] .rame-reschedule-popup .dxbl-popup-body {
    padding: 16px 18px 12px;
}

[b-10ju1kuy2v] .rame-reschedule-popup .modal-footer,
[b-10ju1kuy2v] .rame-reschedule-popup .dxbl-popup-footer {
    padding: 12px 18px 14px;
    border-top: 1px solid var(--rame-border-light, #e4e6eb);
    background: var(--rame-bg-subtle, #f8f9fa);
}


.chat-main[b-10ju1kuy2v] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--rame-bg-primary, #ffffff);
    position: relative;
    overflow: hidden;
}

.learn-notification[b-10ju1kuy2v] {
    padding: 8px 16px;
    background: #eef2ff;
    border-bottom: 1px solid #c7d2fe;
    color: #3730a3;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}

:global([data-rame-theme="dark"]) .learn-notification[b-10ju1kuy2v] {
    background: rgba(99, 102, 241, 0.15);
    border-bottom-color: rgba(99, 102, 241, 0.3);
    color: #a5b4fc;
}

.no-conversation-selected[b-10ju1kuy2v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: linear-gradient(180deg, var(--rame-bg-secondary, #f7f8fa) 0%, var(--rame-bg-primary, #ffffff) 100%);
    color: var(--rame-text-tertiary, #8a8d91);
    text-align: center;
    padding: var(--rame-space-10, 40px) var(--rame-space-5, 20px);
    animation: fadeIn-b-10ju1kuy2v 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.no-conversation-selected[b-10ju1kuy2v]::before {
    content: "\01F4AC";
    font-size: 80px;
    margin-bottom: 20px;
    opacity: 0.4;
    display: block;
    animation: floatIcon-b-10ju1kuy2v 3s ease-in-out infinite;
}

@keyframes floatIcon-b-10ju1kuy2v {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

.no-conversation-selected p[b-10ju1kuy2v] {
    margin: 0;
    font-size: var(--rame-text-xl, 16px);
    font-weight: var(--rame-font-medium, 500);
    letter-spacing: 0.2px;
    color: var(--rame-text-secondary, #65676b);
}

@keyframes fadeIn-b-10ju1kuy2v {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Loading state */
.chat-main.loading[b-10ju1kuy2v]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--rame-primary, #0084ff), transparent);
    animation: loadingSlide-b-10ju1kuy2v 1.5s ease-in-out infinite;
}

@keyframes loadingSlide-b-10ju1kuy2v {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* ========== DARK MODE OVERRIDES ========== */

:global([data-rame-theme="dark"]) .chat-main[b-10ju1kuy2v] {
    background: var(--rame-bg-chat, #1a1a1a);
}

:global([data-rame-theme="dark"]) .no-conversation-selected[b-10ju1kuy2v] {
    background: linear-gradient(180deg, var(--rame-bg-secondary, #282828) 0%, var(--rame-bg-chat, #1a1a1a) 100%);
    color: var(--rame-text-muted, #888888);
}

:global([data-rame-theme="dark"]) .no-conversation-selected p[b-10ju1kuy2v] {
    color: var(--rame-text-secondary, #c8c8c8);
}

/* ========== MOBILE / TABLET — HIDE WHEN PARENT FLAGS DETAIL-INACTIVE ==========
   Self-contained modifier (no :global needed): the parent passes
   IsHiddenOnMobile and the component adds chat-main--hidden-mobile.
   The base .chat-main keeps its desktop layout untouched. */
@media (max-width: 1024px) {
    .chat-main[b-10ju1kuy2v] {
        width: 100%;
        height: 100dvh;
    }

    .chat-main.chat-main--hidden-mobile[b-10ju1kuy2v] {
        display: none;
    }
}
/* _content/Rame.Blazor.Server/Components/Conversations/ConversationFilterPanel.razor.rz.scp.css */
/* ConversationFilterPanel — compact filter bar with chip dropdowns */
/* Popovers float over the conversation list: no pushing, no covering. */

/* ── Container ── */

.filter-panel[b-drcc3ybwyk] {
    background: var(--rame-bg-primary, #ffffff);
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
}

/* ── Filter chips row ── */

.filter-row[b-drcc3ybwyk] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 12px 10px;
    flex-wrap: nowrap;
}

/* ── Base chip ── */

.fchip[b-drcc3ybwyk] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 5px 9px;
    height: 30px;
    border: 1.5px solid var(--rame-border-light, #e4e6eb);
    border-radius: 20px;
    background: var(--rame-bg-primary, #ffffff);
    color: var(--rame-text-secondary, #65676b);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.13s ease, border-color 0.13s ease, color 0.13s ease;
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
}

.fchip:hover[b-drcc3ybwyk] {
    background: var(--rame-bg-tertiary, #f0f2f5);
    border-color: var(--rame-border-medium, #d0d3d9);
    color: var(--rame-text-primary, #1c1e21);
}

.fchip--active[b-drcc3ybwyk] {
    background: var(--rame-primary, #0084ff);
    border-color: var(--rame-primary, #0084ff);
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 132, 255, 0.22);
}

.fchip--active:hover[b-drcc3ybwyk] {
    background: #0077e6;
    border-color: #0077e6;
    color: #ffffff;
}

/* Purple variant for AI chip */
.fchip--purple[b-drcc3ybwyk] {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(124, 58, 237, 0.22);
}

.fchip--purple:hover[b-drcc3ybwyk] {
    background: #6d28d9;
    border-color: #6d28d9;
    color: #ffffff;
}

/* Chevron arrow */
.fchip-arrow[b-drcc3ybwyk] {
    flex-shrink: 0;
    opacity: 0.7;
    transition: transform 0.18s ease;
    margin-left: 1px;
}

.fchip-arrow--open[b-drcc3ybwyk] {
    transform: rotate(180deg);
}

/* ── Dropdown container ── */

.fdrop[b-drcc3ybwyk] {
    position: relative;
    flex-shrink: 0;
}

/* When open, keep the chip visually highlighted */
.fchip--open[b-drcc3ybwyk] {
    background: var(--rame-bg-tertiary, #f0f2f5);
    border-color: var(--rame-border-medium, #d0d3d9);
    color: var(--rame-text-primary, #1c1e21);
}

.fchip--active.fchip--open[b-drcc3ybwyk] {
    background: var(--rame-primary, #0084ff);
    border-color: var(--rame-primary, #0084ff);
    color: #ffffff;
}

.fchip--purple.fchip--open[b-drcc3ybwyk] {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #ffffff;
}

/* ── Popover panel ── */

.fpop[b-drcc3ybwyk] {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 200;
    min-width: 160px;
    max-width: 220px;
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: var(--rame-radius-md, 8px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 240px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--rame-border-medium, #d0d3d9) transparent;
    animation: fpop-in-b-drcc3ybwyk 0.12s ease;
}

.fpop[b-drcc3ybwyk]::-webkit-scrollbar {
    width: 3px;
}

.fpop[b-drcc3ybwyk]::-webkit-scrollbar-track {
    background: transparent;
}

.fpop[b-drcc3ybwyk]::-webkit-scrollbar-thumb {
    background: var(--rame-border-medium, #d0d3d9);
    border-radius: 3px;
}

@keyframes fpop-in-b-drcc3ybwyk {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Anchor popover to right edge for items near the end */
.fpop--right[b-drcc3ybwyk] {
    left: auto;
    right: 0;
}

/* ── Popover items ── */

.fpop-item[b-drcc3ybwyk] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 8px;
    border: none;
    background: transparent;
    color: var(--rame-text-secondary, #65676b);
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.12s ease, color 0.12s ease;
    white-space: nowrap;
    line-height: 1.3;
}

.fpop-item:hover[b-drcc3ybwyk] {
    background: var(--rame-bg-tertiary, #f0f2f5);
    color: var(--rame-text-primary, #1c1e21);
}

.fpop-item--sel[b-drcc3ybwyk] {
    background: var(--rame-primary-light, #e6f3ff);
    color: var(--rame-primary, #0084ff);
    font-weight: 500;
}

.fpop-item--sel:hover[b-drcc3ybwyk] {
    background: #d4ecff;
    color: var(--rame-primary, #0084ff);
}

.fpop-item--purple[b-drcc3ybwyk] {
    color: #7c3aed;
}

.fpop-item--purple.fpop-item--sel[b-drcc3ybwyk] {
    background: #f3e8ff;
    color: #7c3aed;
}

.fpop-item--purple:hover[b-drcc3ybwyk] {
    background: #f3e8ff;
    color: #6d28d9;
}

.fpop-divider[b-drcc3ybwyk] {
    height: 1px;
    background: var(--rame-border-light, #e4e6eb);
    margin: 3px 0;
}

.fpop-label[b-drcc3ybwyk] {
    font-size: 10px;
    font-weight: 600;
    color: var(--rame-text-tertiary, #8a8d91);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 4px 8px 2px;
}

/* ── Priority dots ── */

.priority-dot[b-drcc3ybwyk] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.priority-dot--high[b-drcc3ybwyk]   { background: var(--rame-error, #ef5350); }
.priority-dot--medium[b-drcc3ybwyk] { background: var(--rame-warning, #ff9800); }
.priority-dot--low[b-drcc3ybwyk]    { background: var(--rame-success, #25d366); }

/* ── Stage dot ── */

.stage-dot[b-drcc3ybwyk] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

/* ── Dark mode ── */

:global([data-rame-theme="dark"]) .filter-panel[b-drcc3ybwyk] {
    background: var(--rame-bg-primary, #1e1e1e);
    border-bottom-color: var(--rame-border-medium, #3a3a3a);
}

:global([data-rame-theme="dark"]) .fchip[b-drcc3ybwyk] {
    background: var(--rame-bg-tertiary, #2d2d2d);
    border-color: var(--rame-border-medium, #4a4a4a);
    color: var(--rame-text-secondary, #c0c0c0);
}

:global([data-rame-theme="dark"]) .fchip:hover[b-drcc3ybwyk] {
    background: #363636;
    border-color: #5a5a5a;
    color: var(--rame-text-primary, #f0f0f0);
}

:global([data-rame-theme="dark"]) .fchip--active[b-drcc3ybwyk] {
    background: var(--rame-primary, #3b9eff);
    border-color: var(--rame-primary, #3b9eff);
    color: #ffffff;
}

:global([data-rame-theme="dark"]) .fchip--open[b-drcc3ybwyk] {
    background: #363636;
    border-color: #5a5a5a;
    color: var(--rame-text-primary, #f0f0f0);
}

:global([data-rame-theme="dark"]) .fchip--active.fchip--open[b-drcc3ybwyk] {
    background: var(--rame-primary, #3b9eff);
    border-color: var(--rame-primary, #3b9eff);
    color: #ffffff;
}

:global([data-rame-theme="dark"]) .fpop[b-drcc3ybwyk] {
    background: var(--rame-bg-secondary, #252525);
    border-color: var(--rame-border-medium, #404040);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 1px 6px rgba(0, 0, 0, 0.2);
}

:global([data-rame-theme="dark"]) .fpop-item[b-drcc3ybwyk] {
    color: var(--rame-text-secondary, #c0c0c0);
}

:global([data-rame-theme="dark"]) .fpop-item:hover[b-drcc3ybwyk] {
    background: #363636;
    color: var(--rame-text-primary, #f0f0f0);
}

:global([data-rame-theme="dark"]) .fpop-item--sel[b-drcc3ybwyk] {
    background: rgba(59, 158, 255, 0.15);
    color: var(--rame-primary, #3b9eff);
}

:global([data-rame-theme="dark"]) .fpop-item--sel:hover[b-drcc3ybwyk] {
    background: rgba(59, 158, 255, 0.22);
}

:global([data-rame-theme="dark"]) .fpop-divider[b-drcc3ybwyk] {
    background: var(--rame-border-medium, #404040);
}

:global([data-rame-theme="dark"]) .fpop-label[b-drcc3ybwyk] {
    color: #666;
}
/* _content/Rame.Blazor.Server/Components/Conversations/ConversationItem.razor.rz.scp.css */
/* Professional Conversation Item - Refined Enterprise Design with Clear Hierarchy */
/* Uses Rame Design System tokens - see /css/design-system/_tokens.css */

/* ── Email subject preview ── */
.preview-email-subject[b-1i6gtuh0tt] {
    font-style: italic;
    color: var(--rame-text-primary, #111827);
    font-weight: 500;
}
.subject-tag[b-1i6gtuh0tt] {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rame-primary, #0084ff);
    background: color-mix(in srgb, var(--rame-primary, #0084ff) 10%, transparent);
    padding: 1px 5px;
    border-radius: 3px;
    margin-right: 4px;
    flex-shrink: 0;
}

.conversation-item[b-1i6gtuh0tt] {
    padding: 12px 16px;
    padding-left: 12px;
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
    cursor: pointer;
    transition: var(--rame-transition-spring, all 0.2s cubic-bezier(0.16, 1, 0.3, 1));
    position: relative;
    background: var(--rame-bg-primary, #ffffff);
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.stage-indicator[b-1i6gtuh0tt] {
    width: 3px;
    align-self: stretch;
    border-radius: 1.5px;
    flex-shrink: 0;
}


.conversation-item[b-1i6gtuh0tt]::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(135deg, var(--rame-primary, #0084ff) 0%, var(--rame-primary-hover, #0073ea) 100%);
    transition: var(--rame-transition-spring, width 0.2s cubic-bezier(0.16, 1, 0.3, 1));
    z-index: 2;
}

.conversation-item:hover[b-1i6gtuh0tt] {
    background: linear-gradient(135deg, var(--rame-bg-secondary, #f7f8fa) 0%, var(--rame-bg-primary, #ffffff) 100%);
    transform: translateX(2px);
}

.conversation-item:hover[b-1i6gtuh0tt]::after {
    width: 3px;
}

.conversation-item.selected[b-1i6gtuh0tt] {
    background: linear-gradient(135deg, var(--rame-primary-light, #e7f3ff) 0%, var(--rame-primary-lighter, #f0f8ff) 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 132, 255, 0.1);
}

.conversation-item.selected[b-1i6gtuh0tt]::after {
    width: 3px;
    box-shadow: 0 0 8px rgba(0, 132, 255, 0.3);
}

.conversation-info[b-1i6gtuh0tt] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
}

/* ========== PRIORITY DOT INDICATOR ========== */

.priority-dot[b-1i6gtuh0tt] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: var(--rame-radius-full, 50%);
    flex-shrink: 0;
    margin-right: 5px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.priority-dot-high[b-1i6gtuh0tt] {
    background: rgba(239, 83, 80, 1);
    box-shadow: 0 0 0 2px rgba(239, 83, 80, 0.2);
}

.priority-dot-medium[b-1i6gtuh0tt] {
    background: rgba(255, 152, 0, 0.9);
    box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.2);
}

.priority-dot-low[b-1i6gtuh0tt] {
    background: rgba(138, 141, 145, 0.7);
}

/* ========== HEADER ROW (Lead Name + Time) ========== */

.conversation-header-row[b-1i6gtuh0tt] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--rame-space-2, 8px);
    width: 100%;
}

.conversation-title[b-1i6gtuh0tt] {
    font-weight: var(--rame-font-semibold, 600);
    font-size: 14.5px;
    color: var(--rame-text-primary, #1c1e21);
    letter-spacing: -0.1px;
    line-height: var(--rame-line-height-tight, 1.3);
    transition: var(--rame-transition-base, color 0.2s ease);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-meta-time[b-1i6gtuh0tt] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.message-time[b-1i6gtuh0tt] {
    font-size: var(--rame-text-xs, 11px);
    color: var(--rame-text-tertiary, #8a8d91);
    font-weight: var(--rame-font-medium, 500);
    letter-spacing: 0.2px;
}

.conversation-item:hover .conversation-title[b-1i6gtuh0tt] {
    color: var(--rame-primary, #0084ff);
}

.conversation-item.selected .conversation-title[b-1i6gtuh0tt] {
    color: var(--rame-primary-dark, #0073ea);
    font-weight: var(--rame-font-bold, 700);
}

/* ========== METADATA ROW (Pills + Unread Badge) ========== */

.conversation-metadata-row[b-1i6gtuh0tt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--rame-space-2, 8px);
    width: 100%;
}

.metadata-pills[b-1i6gtuh0tt] {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.metadata-pill[b-1i6gtuh0tt] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--rame-text-xs, 11px);
    font-weight: var(--rame-font-medium, 500);
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: var(--rame-transition-base, all 0.2s ease);
}

.pill-icon[b-1i6gtuh0tt] {
    flex-shrink: 0;
}

.pill-widget-icon[b-1i6gtuh0tt] {
    display: block;
}

.pill-text[b-1i6gtuh0tt] {
    line-height: 1;
}

/* Channel pill styling */
.pill-channel[b-1i6gtuh0tt] {
    background: var(--rame-bg-secondary, #f7f8fa);
    color: var(--rame-text-secondary, #65676b);
    border: 1px solid var(--rame-border-light, #e4e6eb);
}

.pill-channel.channel-whatsapp[b-1i6gtuh0tt] {
    background: rgba(37, 211, 102, 0.1);
    border-color: rgba(37, 211, 102, 0.3);
    color: var(--rame-accent-dark, #128C7E);
}

.pill-channel.channel-instagram[b-1i6gtuh0tt] {
    background: rgba(225, 48, 108, 0.1);
    border-color: rgba(225, 48, 108, 0.3);
    color: #e1306c;
}

.pill-channel.channel-email[b-1i6gtuh0tt] {
    background: rgba(102, 119, 129, 0.1);
    border-color: rgba(102, 119, 129, 0.3);
    color: var(--rame-text-secondary, #667781);
}

.pill-channel.channel-facebook[b-1i6gtuh0tt] {
    background: rgba(0, 132, 255, 0.1);
    border-color: rgba(0, 132, 255, 0.3);
    color: var(--rame-primary, #0084ff);
}

.pill-channel.channel-widget[b-1i6gtuh0tt] {
    background: var(--rame-bg-secondary, #f7f8fa);
    color: var(--rame-text-secondary, #65676b);
    border: 1px solid var(--rame-border-light, #e4e6eb);
}

/* Stage pill styling */
.pill-stage[b-1i6gtuh0tt] {
    background: color-mix(in srgb, var(--stage-color, #6b7280) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--stage-color, #6b7280) 40%, transparent);
    color: color-mix(in srgb, var(--stage-color, #6b7280) 85%, black);
}

/* Assignment pill styling */
.pill-assignment[b-1i6gtuh0tt] {
    padding: 2px 6px;
}

.pill-assignment-ai[b-1i6gtuh0tt] {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(124, 58, 237, 0.2);
}

.pill-assignment-seller[b-1i6gtuh0tt] {
    background: linear-gradient(135deg, var(--rame-primary, #0084ff) 0%, var(--rame-primary-hover, #0073ea) 100%);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 132, 255, 0.2);
}

.pill-assignment[b-1i6gtuh0tt]  svg {
    display: block;
}

/* Unread badge */
.unread-badge[b-1i6gtuh0tt] {
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--rame-success, #25D366) 0%, var(--rame-accent-dark, #128C7E) 100%);
    color: #ffffff;
    font-size: var(--rame-text-xs, 11px);
    font-weight: var(--rame-font-bold, 700);
    /* Fixed height + flex centering so single-digit counts render as a true
       circle regardless of the active DevExpress theme. Fluent themes adjust
       default line-height which broke the previous padding-based sizing.
       99+ stays pill-shaped via border-radius 50% + auto-grown width. */
    padding: 0 6px;
    border-radius: var(--rame-radius-full, 50%);
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(18, 140, 126, 0.25);
    animation: badgePop-b-1i6gtuh0tt 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Empty unread badge — manual mark-as-unread state, no count.
   Pure circular dot reads as the universal "unread" cue (Gmail/iOS),
   inherits the green gradient + drop shadow from .unread-badge. */
.unread-badge.unread-badge-empty[b-1i6gtuh0tt] {
    width: 10px;
    height: 10px;
    min-width: 10px;
    padding: 0;
    border-radius: var(--rame-radius-full, 50%);
}

@keyframes badgePop-b-1i6gtuh0tt {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ========== MESSAGE PREVIEW ========== */

.message-preview[b-1i6gtuh0tt] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--rame-text-sm, 12px);
    color: var(--rame-text-secondary, #65676b);
    line-height: var(--rame-line-height-base, 1.4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-preview .preview-text[b-1i6gtuh0tt] {
    color: var(--rame-text-secondary, #65676b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-item.selected .message-preview .preview-text[b-1i6gtuh0tt] {
    color: var(--rame-text-primary, #1c1e21);
    font-weight: var(--rame-font-medium, 500);
}

/* ========== CHANNEL ICONS ========== */

.channel-icon[b-1i6gtuh0tt] {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.channel-icon.icon-whatsapp[b-1i6gtuh0tt] {
    background-color: var(--rame-success, #25d366);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: 100%;
    -webkit-mask-size: 100%;
}

.channel-icon.icon-instagram[b-1i6gtuh0tt] {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border-radius: 3px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: 100%;
    -webkit-mask-size: 100%;
}

.channel-icon.icon-email[b-1i6gtuh0tt] {
    background-color: var(--rame-text-secondary, #667781);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E") no-repeat center;
    mask-size: 100%;
    -webkit-mask-size: 100%;
}

.channel-icon.icon-facebook[b-1i6gtuh0tt] {
    background-color: var(--rame-primary, #0084ff);
    border-radius: var(--rame-radius-full, 50%);
}

.channel-icon.icon-default[b-1i6gtuh0tt] {
    background-color: var(--rame-text-secondary, #667781);
    border-radius: var(--rame-radius-full, 50%);
}

/* Animation for new conversations */
@keyframes conversationSlideIn-b-1i6gtuh0tt {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.conversation-item:first-child[b-1i6gtuh0tt] {
    animation: conversationSlideIn-b-1i6gtuh0tt 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ========== CUSTOM TOOLTIPS ========== */

[data-tooltip][b-1i6gtuh0tt] {
    position: relative;
}

[data-tooltip][b-1i6gtuh0tt]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(15, 23, 42, 0.92);
    color: #ffffff;
    font-size: 11px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    letter-spacing: 0.1px;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

[data-tooltip][b-1i6gtuh0tt]::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 5px solid transparent;
    border-top-color: rgba(15, 23, 42, 0.92);
    pointer-events: none;
    opacity: 0;
    z-index: 1000;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

[data-tooltip]:hover[b-1i6gtuh0tt]::after,
[data-tooltip]:hover[b-1i6gtuh0tt]::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ========== CONTEXT MENU (right-click on a conversation item) ========== */

.context-menu-backdrop[b-1i6gtuh0tt] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 999;
}

.context-menu[b-1i6gtuh0tt] {
    position: fixed;
    z-index: 1000;
    min-width: 220px;
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: 8px;
    box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.14),
        0 4px 8px rgba(15, 23, 42, 0.06);
    padding: 6px;
    animation: contextMenuFadeIn-b-1i6gtuh0tt 0.14s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes contextMenuFadeIn-b-1i6gtuh0tt {
    from { opacity: 0; transform: translateY(-3px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.context-menu-item[b-1i6gtuh0tt] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: var(--rame-text-sm, 13px);
    font-weight: var(--rame-font-medium, 500);
    color: var(--rame-text-primary, #1c1e21);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    text-align: left;
}

.context-menu-item:hover[b-1i6gtuh0tt],
.context-menu-item:focus-visible[b-1i6gtuh0tt] {
    background: var(--rame-bg-secondary, #f7f8fa);
    color: var(--rame-primary-dark, #0073ea);
    outline: none;
}

.context-menu-dot[b-1i6gtuh0tt] {
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: var(--rame-radius-full, 50%);
    background: linear-gradient(135deg, var(--rame-success, #25D366) 0%, var(--rame-accent-dark, #128C7E) 100%);
    box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.18);
    flex-shrink: 0;
}

/* _content/Rame.Blazor.Server/Components/Conversations/ConversationSidebar.razor.rz.scp.css */
/* Professional Conversation Sidebar - Refined Enterprise Design */
/* Uses Rame Design System tokens - see /css/design-system/_tokens.css */

.chat-sidebar[b-tdntutzru0] {
    width: var(--rame-sidebar-width, 360px);
    border-right: 1px solid var(--rame-border-light, #e4e6eb);
    display: flex;
    flex-direction: column;
    background: var(--rame-bg-primary, #ffffff);
}

.chat-header[b-tdntutzru0] {
    padding: var(--rame-space-4, 18px) var(--rame-space-5, 20px);
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
    background: linear-gradient(135deg, var(--rame-bg-secondary, #f7f8fa) 0%, var(--rame-bg-primary, #ffffff) 100%);
    position: relative;
}

.chat-header[b-tdntutzru0]::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rame-border-light, #e4e6eb) 50%, transparent);
}

.chat-header h5[b-tdntutzru0] {
    margin: 0;
    font-size: var(--rame-text-2xl, 18px);
    font-weight: var(--rame-font-bold, 700);
    color: var(--rame-text-primary, #1c1e21);
    letter-spacing: -0.3px;
}

.conversation-list[b-tdntutzru0] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--rame-bg-secondary, #f7f8fa);
    margin-top: var(--rame-space-2, 8px);
}

/* Custom Scrollbar */
.conversation-list[b-tdntutzru0]::-webkit-scrollbar {
    width: 6px;
}

.conversation-list[b-tdntutzru0]::-webkit-scrollbar-track {
    background: var(--rame-scrollbar-track, transparent);
}

.conversation-list[b-tdntutzru0]::-webkit-scrollbar-thumb {
    background: var(--rame-scrollbar-thumb, #d0d3d9);
    border-radius: 3px;
    transition: var(--rame-transition-base, background 0.2s ease);
}

.conversation-list[b-tdntutzru0]::-webkit-scrollbar-thumb:hover {
    background: var(--rame-scrollbar-thumb-hover, #b8bcc4);
}

/* Conversation count in header */
.conversation-count[b-tdntutzru0] {
    font-size: var(--rame-text-sm, 12px);
    color: var(--rame-text-secondary, #65676b);
    font-weight: var(--rame-font-medium, 500);
    margin-left: var(--rame-space-2, 8px);
}

.chat-header[b-tdntutzru0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Load More Button Styles */
.load-more-container[b-tdntutzru0] {
    padding: var(--rame-space-4, 16px);
    text-align: center;
    background: var(--rame-bg-primary, #ffffff);
    border-top: 1px solid var(--rame-border-light, #e4e6eb);
}

.load-more-btn[b-tdntutzru0] {
    background: linear-gradient(135deg, var(--rame-bg-tertiary, #f0f2f5) 0%, var(--rame-bg-secondary, #e4e6eb) 100%);
    border: 1px solid var(--rame-border-medium, #d0d3d9);
    border-radius: var(--rame-radius-md, 8px);
    padding: 10px 24px;
    cursor: pointer;
    font-size: var(--rame-text-base, 13px);
    font-weight: var(--rame-font-semibold, 600);
    color: var(--rame-text-primary, #1c1e21);
    transition: var(--rame-transition-base, all 0.2s ease);
    display: inline-flex;
    align-items: center;
    gap: var(--rame-space-2, 8px);
}

.load-more-btn:hover:not(:disabled)[b-tdntutzru0] {
    background: linear-gradient(135deg, var(--rame-bg-secondary, #e4e6eb) 0%, var(--rame-border-medium, #d0d3d9) 100%);
    border-color: var(--rame-border-dark, #b8bcc4);
    transform: translateY(-1px);
    box-shadow: var(--rame-shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.1));
}

.load-more-btn:active:not(:disabled)[b-tdntutzru0] {
    transform: translateY(0);
    box-shadow: none;
}

.load-more-btn:disabled[b-tdntutzru0] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ========== DARK MODE OVERRIDES ========== */

:global([data-rame-theme="dark"]) .chat-sidebar[b-tdntutzru0] {
    background: var(--rame-bg-primary, #1e1e1e);
    border-right-color: var(--rame-border-medium, #505050);
}

:global([data-rame-theme="dark"]) .chat-header[b-tdntutzru0] {
    background: linear-gradient(135deg, var(--rame-bg-tertiary, #333333) 0%, var(--rame-bg-secondary, #282828) 100%);
    border-bottom-color: var(--rame-border-medium, #505050);
}

:global([data-rame-theme="dark"]) .chat-header[b-tdntutzru0]::after {
    background: linear-gradient(90deg, transparent, var(--rame-border-medium, #505050) 50%, transparent);
}

:global([data-rame-theme="dark"]) .chat-header h5[b-tdntutzru0] {
    color: var(--rame-text-primary, #f0f0f0);
}

:global([data-rame-theme="dark"]) .conversation-list[b-tdntutzru0] {
    background: var(--rame-bg-secondary, #282828);
}

:global([data-rame-theme="dark"]) .conversation-count[b-tdntutzru0] {
    color: var(--rame-text-secondary, #c8c8c8);
}

:global([data-rame-theme="dark"]) .load-more-container[b-tdntutzru0] {
    background: var(--rame-bg-secondary, #282828);
    border-top-color: var(--rame-border-medium, #505050);
}

:global([data-rame-theme="dark"]) .load-more-btn[b-tdntutzru0] {
    background: linear-gradient(135deg, var(--rame-bg-tertiary, #333333) 0%, var(--rame-bg-hover, #3a3a3a) 100%);
    border-color: var(--rame-border-medium, #505050);
    color: var(--rame-text-primary, #f0f0f0);
}

:global([data-rame-theme="dark"]) .load-more-btn:hover:not(:disabled)[b-tdntutzru0] {
    background: linear-gradient(135deg, var(--rame-bg-hover, #3a3a3a) 0%, var(--rame-border-dark, #606060) 100%);
    border-color: var(--rame-border-dark, #606060);
}

/* ========== MOBILE / TABLET — FULL WIDTH SIDEBAR, HIDE WHEN PARENT FLAGS ========== */
/* Self-contained modifier (no :global needed): the parent passes
   IsHiddenOnMobile and the component adds chat-sidebar--hidden-mobile. */
@media (max-width: 1024px) {
    .chat-sidebar[b-tdntutzru0] {
        width: 100% !important;
        border-right: none;
    }

    .chat-sidebar.chat-sidebar--hidden-mobile[b-tdntutzru0] {
        display: none;
    }
}
/* _content/Rame.Blazor.Server/Components/Conversations/EmailTemplateSelector.razor.rz.scp.css */
/* Email Template Selector — modal overlay matching the prototype style */

.email-tpl-overlay[b-zy1rdgs6qy] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    animation: overlayFadeIn-b-zy1rdgs6qy 0.15s ease;
}

@keyframes overlayFadeIn-b-zy1rdgs6qy {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.email-tpl-container[b-zy1rdgs6qy] {
    width: 440px;
    max-width: 95vw;
    max-height: 70vh;
    background: var(--rame-bg-primary, #fff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: var(--rame-radius-lg, 12px);
    box-shadow: var(--rame-shadow-xl, 0 20px 60px rgba(0,0,0,0.18));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: containerSlideUp-b-zy1rdgs6qy 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes containerSlideUp-b-zy1rdgs6qy {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header */
.email-tpl-header[b-zy1rdgs6qy] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
    flex-shrink: 0;
}

.header-icon-wrap[b-zy1rdgs6qy] {
    width: 36px;
    height: 36px;
    border-radius: var(--rame-radius-md, 8px);
    background: color-mix(in srgb, var(--rame-primary, #0084ff) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rame-primary, #0084ff);
    flex-shrink: 0;
}

.header-icon-wrap svg[b-zy1rdgs6qy] { width: 16px; height: 16px; }

.header-text[b-zy1rdgs6qy] { flex: 1; }
.header-text h2[b-zy1rdgs6qy] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--rame-text-primary, #111827);
}
.header-text p[b-zy1rdgs6qy] {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--rame-text-tertiary, #9ca3af);
}

.btn-close[b-zy1rdgs6qy] {
    width: 30px;
    height: 30px;
    border-radius: var(--rame-radius-md, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rame-text-secondary, #6b7280);
    transition: background 0.1s;
}
.btn-close:hover[b-zy1rdgs6qy] { background: var(--rame-bg-hover, #f3f4f6); }

/* Body */
.email-tpl-body[b-zy1rdgs6qy] {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tpl-loading[b-zy1rdgs6qy], .tpl-empty[b-zy1rdgs6qy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px;
    color: var(--rame-text-tertiary, #9ca3af);
    font-size: 13px;
}

.tpl-spinner[b-zy1rdgs6qy] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--rame-border-light, #e4e6eb);
    border-top-color: var(--rame-primary, #0084ff);
    border-radius: 50%;
    animation: spin-b-zy1rdgs6qy 0.7s linear infinite;
}
@keyframes spin-b-zy1rdgs6qy { to { transform: rotate(360deg); } }

/* Search */
.tpl-search-bar[b-zy1rdgs6qy] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--rame-bg-input, #f9fafb);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: var(--rame-radius-md, 8px);
    padding: 0 12px;
    height: 36px;
    flex-shrink: 0;
}
.tpl-search-bar svg[b-zy1rdgs6qy] { width: 14px; height: 14px; color: var(--rame-text-tertiary, #9ca3af); flex-shrink: 0; }
.tpl-search-bar input[b-zy1rdgs6qy] {
    flex: 1;
    background: transparent;
    font-size: 13px;
    color: var(--rame-text-primary, #111827);
}
.tpl-search-bar input[b-zy1rdgs6qy]::placeholder { color: var(--rame-text-tertiary, #9ca3af); }

/* Template list */
.tpl-list[b-zy1rdgs6qy] { display: flex; flex-direction: column; gap: 4px; }

.tpl-item[b-zy1rdgs6qy] {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--rame-radius-md, 8px);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.12s, border-color 0.12s;
}
.tpl-item:hover[b-zy1rdgs6qy] { background: var(--rame-bg-secondary, #f7f8fa); }
.tpl-item.selected[b-zy1rdgs6qy] {
    background: color-mix(in srgb, var(--rame-primary, #0084ff) 6%, transparent);
    border-color: color-mix(in srgb, var(--rame-primary, #0084ff) 20%, var(--rame-border-light, #e4e6eb));
}

.tpl-thumb[b-zy1rdgs6qy] {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: var(--rame-bg-secondary, #f7f8fa);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
    padding: 6px;
    flex-shrink: 0;
}
.tpl-thumb[b-zy1rdgs6qy]::before, .tpl-thumb[b-zy1rdgs6qy]::after {
    content: '';
    height: 2px;
    border-radius: 1px;
    background: var(--rame-border-medium, #d1d5db);
}
.tpl-thumb[b-zy1rdgs6qy]::after { width: 65%; }

.tpl-thumb.thumb-accent[b-zy1rdgs6qy] { background: color-mix(in srgb, var(--rame-primary, #0084ff) 12%, transparent); }
.tpl-thumb.thumb-accent[b-zy1rdgs6qy]::before, .tpl-thumb.thumb-accent[b-zy1rdgs6qy]::after { background: var(--rame-primary, #0084ff); }
.tpl-thumb.thumb-warm[b-zy1rdgs6qy] { background: #fff7e6; }
.tpl-thumb.thumb-warm[b-zy1rdgs6qy]::before, .tpl-thumb.thumb-warm[b-zy1rdgs6qy]::after { background: #c98e1e; }
.tpl-thumb.thumb-cool[b-zy1rdgs6qy] { background: #e6f7f2; }
.tpl-thumb.thumb-cool[b-zy1rdgs6qy]::before, .tpl-thumb.thumb-cool[b-zy1rdgs6qy]::after { background: #0a8a66; }

.tpl-info[b-zy1rdgs6qy] { min-width: 0; }
.tpl-info strong[b-zy1rdgs6qy] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--rame-text-primary, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 1px;
}
.tpl-info span[b-zy1rdgs6qy] {
    font-size: 11px;
    color: var(--rame-text-tertiary, #9ca3af);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tpl-category[b-zy1rdgs6qy] {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rame-text-tertiary, #9ca3af);
    background: var(--rame-bg-tertiary, #f3f4f6);
    padding: 2px 7px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Footer */
.email-tpl-footer[b-zy1rdgs6qy] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--rame-border-light, #e4e6eb);
    flex-shrink: 0;
}

.btn-cancel[b-zy1rdgs6qy] {
    height: 34px;
    padding: 0 14px;
    border-radius: var(--rame-radius-md, 8px);
    font-size: 13px;
    color: var(--rame-text-secondary, #6b7280);
    background: var(--rame-bg-secondary, #f7f8fa);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    transition: background 0.12s;
}
.btn-cancel:hover[b-zy1rdgs6qy] { background: var(--rame-bg-hover, #f3f4f6); }

.btn-insert[b-zy1rdgs6qy] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 16px;
    border-radius: var(--rame-radius-md, 8px);
    font-size: 13px;
    font-weight: 600;
    background: var(--rame-primary, #0084ff);
    color: white;
    transition: background 0.12s, opacity 0.12s;
}
.btn-insert:hover:not(:disabled)[b-zy1rdgs6qy] { background: var(--rame-primary-hover, #0070d8); }
.btn-insert:disabled[b-zy1rdgs6qy] { opacity: 0.45; cursor: not-allowed; }

/* Dark mode */
:global([data-rame-theme="dark"]) .email-tpl-container[b-zy1rdgs6qy] {
    background: var(--rame-bg-primary, #1e1e1e);
    border-color: var(--rame-border-medium, #3d3d3d);
}
:global([data-rame-theme="dark"]) .tpl-search-bar[b-zy1rdgs6qy] { background: var(--rame-bg-input, #2a2a2a); border-color: var(--rame-border-medium, #3d3d3d); }
:global([data-rame-theme="dark"]) .tpl-item:hover[b-zy1rdgs6qy] { background: var(--rame-bg-hover, #2a2a2a); }
/* _content/Rame.Blazor.Server/Components/Conversations/EmojiPicker.razor.rz.scp.css */
/* Inline emoji picker host — embedded inside the message menu. */
.emoji-picker-host[b-m0fxgd5ykt] {
    display: block;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

[b-m0fxgd5ykt] emoji-picker {
    --background: var(--rame-bg-primary, #ffffff);
    --border-color: var(--rame-border-light, rgba(0, 0, 0, 0.06));
    --button-active-background: var(--rame-primary-soft, rgba(33, 150, 243, 0.10));
    --button-hover-background: var(--rame-bg-hover, rgba(0, 0, 0, 0.05));
    --indicator-color: var(--rame-primary, #2196f3);
    --num-columns: 8;
    width: 100%;
    height: 320px;
    display: block;
    border: 0;
    border-radius: 8px;
}
/* _content/Rame.Blazor.Server/Components/Conversations/MensajeItem.razor.rz.scp.css */
/* WhatsApp-Inspired Message Design - Refined & Polished */
/* Uses Rame Design System tokens - see /css/design-system/_tokens.css */

/* ====================================================================
   SCHEDULED MESSAGE BADGE — strip at the top of a Status=Scheduled bubble.
   Visually distinct from a regular bubble (blue dashed border) so the seller
   knows the message is pending and the action buttons (reschedule/cancel)
   are the obvious way to manage it.
   ==================================================================== */

.scheduled-badge[b-zakr3y888q] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 12px;
    margin: 0 0 8px;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.10) 0%, rgba(13, 110, 253, 0.04) 100%);
    border: 1px dashed rgba(13, 110, 253, 0.40);
    border-radius: 10px;
    font-size: 12px;
    color: var(--rame-text-secondary, #54656f);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.scheduled-badge-label[b-zakr3y888q] {
    flex: 1;
    font-weight: 600;
    color: #0d6efd;
    letter-spacing: 0.01em;
    line-height: 1.3;
}

.scheduled-badge-actions[b-zakr3y888q] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.scheduled-action[b-zakr3y888q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    color: var(--rame-text-secondary, #54656f);
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    padding: 0;
}

.scheduled-action:hover[b-zakr3y888q] {
    background: #ffffff;
    color: #0d6efd;
    transform: scale(1.08);
    box-shadow: 0 2px 6px rgba(13, 110, 253, 0.18);
}

.scheduled-action:active[b-zakr3y888q] {
    transform: scale(0.94);
}

.scheduled-action.scheduled-action-danger:hover[b-zakr3y888q] {
    background: #ffffff;
    color: #dc3545;
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.22);
}

/* Dark mode — keep the blue identity but rebalance the surface so the badge
   does not become a glaring patch on a dark conversation. */
:global([data-rame-theme="dark"]) .scheduled-badge[b-zakr3y888q] {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.14) 0%, rgba(96, 165, 250, 0.04) 100%);
    border-color: rgba(96, 165, 250, 0.45);
    box-shadow: none;
}

:global([data-rame-theme="dark"]) .scheduled-badge-label[b-zakr3y888q] {
    color: #93c5fd;
}

:global([data-rame-theme="dark"]) .scheduled-action[b-zakr3y888q] {
    background: rgba(255, 255, 255, 0.08);
    color: var(--rame-text-secondary, #c8c8c8);
}

:global([data-rame-theme="dark"]) .scheduled-action:hover[b-zakr3y888q] {
    background: rgba(255, 255, 255, 0.15);
    color: #93c5fd;
}

:global([data-rame-theme="dark"]) .scheduled-action.scheduled-action-danger:hover[b-zakr3y888q] {
    background: rgba(220, 53, 69, 0.20);
    color: #fca5a5;
}


/* ====================================================================
   EMAIL MESSAGE CARD — channel-adaptive layout
   These classes are only rendered when IsEmailMessage == true.
   ==================================================================== */

.email-msg[b-zakr3y888q] {
    background: var(--rame-bg-primary, #fff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: var(--rame-radius-lg, 12px);
    overflow: hidden;
    transition: box-shadow .15s ease, border-color .15s ease;
    max-width: 820px;
    width: 100%;
    align-self: flex-start;
    margin-bottom: 14px;
}
.email-msg:hover[b-zakr3y888q] {
    border-color: var(--rame-border-medium, #d1d5db);
    box-shadow: var(--rame-shadow-sm, 0 1px 6px rgba(0,0,0,0.06));
}
.email-msg.outbound[b-zakr3y888q] {
    align-self: flex-end;
    background: color-mix(in srgb, var(--rame-primary, #0084ff) 4%, var(--rame-bg-primary, #fff));
    border-color: color-mix(in srgb, var(--rame-primary, #0084ff) 16%, var(--rame-border-light, #e4e6eb));
}

.email-msg header[b-zakr3y888q] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
}
.msg-avatar[b-zakr3y888q] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--rame-primary, #0084ff), #1460b8);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.email-msg.outbound .msg-avatar[b-zakr3y888q] {
    background: linear-gradient(140deg, #3791e0, #1460b8);
}
.msg-from-to[b-zakr3y888q] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.msg-from[b-zakr3y888q] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.msg-from strong[b-zakr3y888q] {
    font-size: 13px;
    font-weight: 600;
    color: var(--rame-text-primary, #111827);
}
.addr[b-zakr3y888q] {
    font-family: var(--rame-font-mono, monospace);
    font-size: 11px;
    color: var(--rame-text-tertiary, #9ca3af);
}
.msg-to[b-zakr3y888q] {
    font-size: 11px;
    color: var(--rame-text-tertiary, #9ca3af);
    font-family: var(--rame-font-mono, monospace);
}
.msg-date[b-zakr3y888q] {
    font-size: 11px;
    color: var(--rame-text-tertiary, #9ca3af);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}
.msg-actions[b-zakr3y888q] {
    display: inline-flex;
    gap: 2px;
    opacity: 0;
    transition: opacity .12s ease;
}
.email-msg:hover .msg-actions[b-zakr3y888q] { opacity: 1; }
.icon-btn[b-zakr3y888q] {
    width: 28px;
    height: 28px;
    border-radius: var(--rame-radius-md, 8px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--rame-text-secondary, #6b7280);
    transition: background .12s;
}
.icon-btn:hover[b-zakr3y888q] { background: var(--rame-bg-hover, #f3f4f6); }
.icon-btn svg[b-zakr3y888q] { width: 14px; height: 14px; }

.msg-body[b-zakr3y888q] {
    padding: 16px 18px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--rame-text-primary, #111827);
}
.msg-body p[b-zakr3y888q] { margin: 0 0 12px; }
.msg-body p:last-child[b-zakr3y888q] { margin-bottom: 0; }
.msg-body ul[b-zakr3y888q], .msg-body ol[b-zakr3y888q] { margin: 0 0 12px; padding-left: 20px; }
.msg-body strong[b-zakr3y888q] { font-weight: 600; }
.msg-body a[b-zakr3y888q] { color: var(--rame-primary, #0084ff); text-decoration: underline; }
.msg-body blockquote[b-zakr3y888q] {
    border-left: 3px solid var(--rame-border-medium, #d1d5db);
    padding: 6px 0 6px 14px;
    color: var(--rame-text-secondary, #6b7280);
    margin: 12px 0;
    font-size: 13px;
}

/* Attachments row */
.msg-attachments[b-zakr3y888q] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 18px 14px;
}
.att-pill[b-zakr3y888q] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px 0 6px;
    background: var(--rame-bg-secondary, #f7f8fa);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: var(--rame-radius-md, 8px);
    transition: border-color .12s, background .12s;
    cursor: pointer;
}
.att-pill:hover[b-zakr3y888q] { border-color: var(--rame-primary, #0084ff); background: var(--rame-bg-primary, #fff); }
.att-ico[b-zakr3y888q] {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--rame-font-mono, monospace);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.att-ico.pdf[b-zakr3y888q] { background: #fbe4e4; color: #a8312b; }
.att-ico.doc[b-zakr3y888q] { background: #deebfe; color: #1458a8; }
.att-ico.xls[b-zakr3y888q] { background: #e3f5ea; color: #16794a; }
.att-ico.img[b-zakr3y888q] { background: linear-gradient(135deg, #ffb199, #ff5f6d); color: white; }

.att-name[b-zakr3y888q] {
    font-size: 12px;
    color: var(--rame-text-primary, #111827);
    font-weight: 500;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.att-size[b-zakr3y888q] {
    font-size: 10px;
    color: var(--rame-text-tertiary, #9ca3af);
    font-variant-numeric: tabular-nums;
}

/* Dark mode for email cards */
:global([data-rame-theme="dark"]) .email-msg[b-zakr3y888q] {
    background: var(--rame-bg-primary, #1e1e1e);
    border-color: var(--rame-border-medium, #3d3d3d);
}
:global([data-rame-theme="dark"]) .email-msg.outbound[b-zakr3y888q] {
    background: color-mix(in srgb, var(--rame-primary, #0084ff) 10%, var(--rame-bg-primary, #1e1e1e));
}
:global([data-rame-theme="dark"]) .att-ico.pdf[b-zakr3y888q] { background: #3a1e1e; color: #f07a75; }
:global([data-rame-theme="dark"]) .att-ico.doc[b-zakr3y888q] { background: #1b2f4a; color: #87b5f0; }
:global([data-rame-theme="dark"]) .att-ico.xls[b-zakr3y888q] { background: #183629; color: #7fd6a7; }

.message[b-zakr3y888q] {
    display: flex;
    flex-direction: column;
    max-width: min(450px, 75%);
    margin-bottom: 8px;
    animation: messageSlideIn-b-zakr3y888q 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ========== MESSAGE GROUPING ========== */

/* Mensaje único (solo en su grupo) */
.message.group-single[b-zakr3y888q] {
    margin-bottom: 16px;
}

/* Primer mensaje del grupo - espacio extra arriba */
.message.group-first[b-zakr3y888q] {
    margin-top: 16px;
}

/* Último mensaje del grupo - espacio extra abajo */
.message.group-last[b-zakr3y888q] {
    margin-bottom: 16px;
}

/* Mensajes en medio del grupo - espacio mínimo */
.message.group-middle[b-zakr3y888q] {
    margin-bottom: 4px;
}

/* Primer mensaje de la conversación no necesita margin-top extra */
.message.group-first:first-child[b-zakr3y888q],
.message.group-single:first-child[b-zakr3y888q] {
    margin-top: 0;
}

@keyframes messageSlideIn-b-zakr3y888q {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.message-received[b-zakr3y888q] {
    align-self: flex-start;
}

.message-sent[b-zakr3y888q] {
    align-self: flex-end;
}

/* Message Bubble */
.message-bubble[b-zakr3y888q] {
    background: var(--rame-bg-primary, #ffffff);
    padding: 8px 12px 6px 12px;
    border-radius: 7.5px;
    box-shadow: var(--rame-shadow-sm, 0 1px 0.5px rgba(0, 0, 0, 0.13));
    position: relative;
}

.message-sent .message-bubble[b-zakr3y888q] {
    background: var(--rame-message-sent-bg, #d9fdd3);
}

.message-received .message-bubble[b-zakr3y888q] {
    background: var(--rame-message-received-bg, #ffffff);
}

/* ========== BUBBLE GROUPING RADIUS ========== */

/* Mensajes recibidos - agrupación visual */
.message-received.group-first .message-bubble[b-zakr3y888q] {
    border-top-left-radius: 7.5px;
    border-bottom-left-radius: 3px;
}

.message-received.group-middle .message-bubble[b-zakr3y888q] {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.message-received.group-last .message-bubble[b-zakr3y888q] {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 7.5px;
}

.message-received.group-single .message-bubble[b-zakr3y888q] {
    border-top-left-radius: 7.5px;
    border-bottom-left-radius: 7.5px;
}

/* Mensajes enviados - agrupación visual */
.message-sent.group-first .message-bubble[b-zakr3y888q] {
    border-top-right-radius: 7.5px;
    border-bottom-right-radius: 3px;
}

.message-sent.group-middle .message-bubble[b-zakr3y888q] {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.message-sent.group-last .message-bubble[b-zakr3y888q] {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 7.5px;
}

.message-sent.group-single .message-bubble[b-zakr3y888q] {
    border-top-right-radius: 7.5px;
    border-bottom-right-radius: 7.5px;
}

.message-text[b-zakr3y888q] {
    font-size: 14.2px;
    line-height: 19px;
    color: var(--rame-text-primary, #111b21);
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: var(--rame-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
}

/* Message Meta - Time and status inline with text */
.message-meta[b-zakr3y888q] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 8px;
    vertical-align: bottom;
    float: right;
    margin-top: 2px;
}

.message-time[b-zakr3y888q] {
    font-size: 11px;
    color: var(--rame-text-tertiary, rgba(0, 0, 0, 0.45));
    font-weight: 400;
    letter-spacing: 0.1px;
}

.message-sent .message-time[b-zakr3y888q] {
    color: var(--rame-text-tertiary, rgba(0, 0, 0, 0.45));
}

/* Footer standalone para mensajes solo con attachments */
.message-footer-standalone[b-zakr3y888q] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    padding: 4px 8px 0;
}

.message-footer-standalone .message-time[b-zakr3y888q] {
    font-size: 11px;
    color: var(--rame-text-tertiary, rgba(0, 0, 0, 0.45));
    font-weight: 400;
}

.message-status[b-zakr3y888q] {
    display: inline-flex;
    align-items: center;
    color: var(--rame-text-secondary, #667781);
}

.status-pending[b-zakr3y888q] {
    animation: statusPulse-b-zakr3y888q 1.5s ease-in-out infinite;
}

@keyframes statusPulse-b-zakr3y888q {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.status-sent[b-zakr3y888q] {
    color: var(--rame-message-status-sent, #53bdeb);
    animation: statusPop-b-zakr3y888q 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes statusPop-b-zakr3y888q {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.status-delivered[b-zakr3y888q] {
    color: var(--rame-text-secondary, #667781);
    animation: statusPop-b-zakr3y888q 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.status-read[b-zakr3y888q] {
    color: var(--rame-message-status-sent, #53bdeb);
    animation: statusPop-b-zakr3y888q 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.status-failed[b-zakr3y888q] {
    animation: statusShake-b-zakr3y888q 0.5s ease;
}

@keyframes statusShake-b-zakr3y888q {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* Failed Message State */
.message-sent.has-failed .message-bubble[b-zakr3y888q] {
    background: var(--rame-error-light, #ffebee);
    border: 1px solid var(--rame-error-border, #ffcdd2);
}

.message-sent.has-failed[b-zakr3y888q] {
    cursor: pointer;
    transition: transform 0.15s ease;
}

.message-sent.has-failed:hover[b-zakr3y888q] {
    transform: scale(1.02);
}

.message-sent.has-failed:active[b-zakr3y888q] {
    transform: scale(0.98);
}

/* ========== UNIFIED MEDIA BUBBLE (WhatsApp Style) ========== */

.message-media-bubble[b-zakr3y888q] {
    background: var(--rame-bg-primary, #ffffff);
    border-radius: 7.5px;
    box-shadow: var(--rame-shadow-sm, 0 1px 1px rgba(0, 0, 0, 0.06));
    overflow: hidden;
    max-width: 330px;
    position: relative;
    border: 1px solid var(--rame-border-light, rgba(0, 0, 0, 0.06));
}

.message-sent .message-media-bubble[b-zakr3y888q] {
    background: var(--rame-message-sent-bg, #d9fdd3);
    border-color: rgba(0, 0, 0, 0.04);
}

.message-received .message-media-bubble[b-zakr3y888q] {
    background: var(--rame-bg-primary, #ffffff);
    border-color: var(--rame-border-light, rgba(0, 0, 0, 0.08));
}

/* Caption area inside media bubble */
.media-caption[b-zakr3y888q] {
    padding: 6px 8px 6px 8px;
}

.media-caption .message-text[b-zakr3y888q] {
    font-size: 14.2px;
    line-height: 19px;
    color: var(--rame-text-primary, #111b21);
    white-space: pre-wrap;
    word-wrap: break-word;
    display: block;
}

.media-caption .message-meta[b-zakr3y888q] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 8px;
    vertical-align: bottom;
    float: right;
    margin-top: 2px;
}

/* Overlay time/status for media-only messages */
.media-meta-overlay[b-zakr3y888q] {
    position: absolute;
    bottom: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.media-meta-overlay .message-time[b-zakr3y888q] {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 400;
    letter-spacing: 0.1px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.media-meta-overlay .message-status[b-zakr3y888q] {
    color: rgba(255, 255, 255, 0.95);
}

.media-meta-overlay .status-sent[b-zakr3y888q] {
    color: var(--rame-message-status-sent, #53bdeb);
}

.media-meta-overlay .status-delivered[b-zakr3y888q] {
    color: rgba(255, 255, 255, 0.95);
}

.media-meta-overlay .status-read[b-zakr3y888q] {
    color: var(--rame-message-status-sent, #53bdeb);
}

/* ========== IMAGE ATTACHMENTS ========== */

.message-images-grid[b-zakr3y888q] {
    display: grid;
    gap: 2px;
    overflow: hidden;
    background: var(--rame-bg-secondary, #f0f2f5);
}

/* Remove margin when inside unified bubble */
.message-media-bubble .message-images-grid[b-zakr3y888q] {
    margin-bottom: 0;
    border-radius: 0;
}

/* Top corners rounded when no caption */
.message-media-bubble:not(.has-caption) .message-images-grid[b-zakr3y888q] {
    border-radius: 7.5px 7.5px 0 0;
}

/* Standalone grid (legacy support) */
.message > .message-images-grid[b-zakr3y888q] {
    border-radius: 7.5px;
    margin-bottom: 8px;
}

/* Alineación de imágenes según tipo de mensaje */
.message-sent .message-images-grid[b-zakr3y888q] {
    margin-left: auto;
}

.message-received .message-images-grid[b-zakr3y888q] {
    margin-right: auto;
}

.message-images-grid.grid-single[b-zakr3y888q] {
    grid-template-columns: 1fr;
    max-width: 330px;
}

.message-images-grid.grid-two[b-zakr3y888q] {
    grid-template-columns: repeat(2, 1fr);
    max-width: 330px;
}

.message-images-grid.grid-three[b-zakr3y888q] {
    grid-template-columns: repeat(2, 1fr);
    max-width: 330px;
}

.message-images-grid.grid-three .attachment-image-wrapper:first-child[b-zakr3y888q] {
    grid-column: 1 / -1;
}

.message-images-grid.grid-four[b-zakr3y888q] {
    grid-template-columns: repeat(2, 1fr);
    max-width: 330px;
}

.message-images-grid.grid-multiple[b-zakr3y888q] {
    grid-template-columns: repeat(3, 1fr);
    max-width: 330px;
}

.attachment-image-wrapper[b-zakr3y888q] {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
    cursor: pointer;
    background: var(--rame-bg-secondary, #f0f2f5);
}

.attachment-image[b-zakr3y888q] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.attachment-image-wrapper:hover .attachment-image[b-zakr3y888q] {
    transform: scale(1.05);
}

.image-overlay[b-zakr3y888q] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
    opacity: 0;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 8px;
}

.attachment-image-wrapper:hover .image-overlay[b-zakr3y888q] {
    opacity: 1;
}

.expand-icon[b-zakr3y888q] {
    color: white;
    background: rgba(0,0,0,0.3);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.expand-icon svg[b-zakr3y888q] {
    width: 14px;
    height: 14px;
    stroke: white;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

/* ========== VIDEO ATTACHMENTS ========== */

.attachment-video[b-zakr3y888q] {
    overflow: hidden;
    background: #000;
    position: relative;
}

/* Standalone video (not in unified bubble) */
.message > .attachment-video[b-zakr3y888q] {
    border-radius: 7.5px;
    margin-bottom: 8px;
    max-width: 330px;
}

/* Video inside unified bubble */
.message-media-bubble .attachment-video[b-zakr3y888q] {
    border-radius: 0;
    margin-bottom: 0;
}

/* Alineación de videos según tipo de mensaje */
.message-sent > .attachment-video[b-zakr3y888q] {
    margin-left: auto;
}

.message-received > .attachment-video[b-zakr3y888q] {
    margin-right: auto;
}

.video-player[b-zakr3y888q] {
    width: 100%;
    display: block;
    max-height: 400px;
    object-fit: contain;
}

.video-info[b-zakr3y888q] {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    backdrop-filter: blur(4px);
}

/* ========== AUDIO ATTACHMENTS ========== */

.attachment-audio[b-zakr3y888q] {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 7.5px;
    margin-bottom: 8px;
    overflow: hidden;
    max-width: 330px;
}

/* Audio inside unified bubble */
.message-media-bubble .attachment-audio[b-zakr3y888q] {
    border-radius: 0;
    margin-bottom: 0;
    max-width: none;
}

.message-sent .attachment-audio[b-zakr3y888q] {
    background: rgba(0, 0, 0, 0.06);
    margin-left: auto;
}

.message-received .attachment-audio[b-zakr3y888q] {
    margin-right: auto;
}

.audio-player-custom[b-zakr3y888q] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
}

.audio-icon-wrapper[b-zakr3y888q] {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rame-success, #25d366) 0%, var(--rame-success-dark, #20ba5a) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(37, 211, 102, 0.3);
}

.audio-icon[b-zakr3y888q] {
    width: 22px;
    height: 22px;
    color: white;
}

.audio-controls[b-zakr3y888q] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.native-audio[b-zakr3y888q] {
    width: 100%;
    height: 40px;
    min-width: 200px;
}

.audio-details[b-zakr3y888q] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.audio-name[b-zakr3y888q] {
    font-size: 12px;
    color: var(--rame-text-secondary, #667781);
    font-weight: 500;
}

/* ========== DOCUMENT ATTACHMENTS ========== */

.attachment-document[b-zakr3y888q] {
    border-radius: 7.5px;
    overflow: hidden;
    margin-bottom: 8px;
    background: rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    max-width: 330px;
}

/* Document inside unified bubble */
.message-media-bubble .attachment-document[b-zakr3y888q] {
    border-radius: 0;
    margin-bottom: 0;
    max-width: none;
}

.message-sent .attachment-document[b-zakr3y888q] {
    background: rgba(0, 0, 0, 0.06);
    margin-left: auto;
}

.message-received .attachment-document[b-zakr3y888q] {
    margin-right: auto;
}

.attachment-document:hover[b-zakr3y888q] {
    background: rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.message-sent .attachment-document:hover[b-zakr3y888q] {
    background: rgba(0, 0, 0, 0.1);
}

.document-card[b-zakr3y888q] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    text-decoration: none;
    color: inherit;
}

.document-icon-wrapper[b-zakr3y888q] {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rame-primary, #0084ff) 0%, var(--rame-primary-dark, #0073ea) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 132, 255, 0.3);
}

.document-icon[b-zakr3y888q] {
    width: 22px;
    height: 22px;
    color: white;
}

.document-details[b-zakr3y888q] {
    flex: 1;
    min-width: 0;
}

.document-name[b-zakr3y888q] {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--rame-text-primary, #111b21);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.document-meta[b-zakr3y888q] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--rame-text-secondary, #667781);
}

.document-type[b-zakr3y888q] {
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
}

.message-sent .document-type[b-zakr3y888q] {
    background: rgba(0, 0, 0, 0.12);
}

.download-button[b-zakr3y888q] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.download-icon[b-zakr3y888q] {
    width: 18px;
    height: 18px;
    color: var(--rame-text-secondary, #667781);
    transition: all 0.2s ease;
}

.document-card:hover .download-button[b-zakr3y888q] {
    background: var(--rame-success, #25d366);
    transform: scale(1.1);
}

.document-card:hover .download-icon[b-zakr3y888q] {
    color: white;
}

.document-card:active .download-button[b-zakr3y888q] {
    transform: scale(0.95);
}

/* ========== RESPONSIVE DESIGN ========== */

@media (max-width: 768px) {
    .message[b-zakr3y888q] {
        max-width: 85%;
    }

    .message-images-grid.grid-single[b-zakr3y888q],
    .message-images-grid.grid-two[b-zakr3y888q],
    .message-images-grid.grid-three[b-zakr3y888q],
    .message-images-grid.grid-four[b-zakr3y888q],
    .message-images-grid.grid-multiple[b-zakr3y888q],
    .attachment-video[b-zakr3y888q] {
        max-width: 280px;
    }
}

@media (max-width: 480px) {
    .message[b-zakr3y888q] {
        max-width: 90%;
    }

    .message-text[b-zakr3y888q] {
        font-size: 13.5px;
        line-height: 18px;
    }

    .message-images-grid.grid-single[b-zakr3y888q],
    .message-images-grid.grid-two[b-zakr3y888q],
    .message-images-grid.grid-three[b-zakr3y888q],
    .message-images-grid.grid-four[b-zakr3y888q],
    .message-images-grid.grid-multiple[b-zakr3y888q],
    .attachment-video[b-zakr3y888q] {
        max-width: 240px;
    }
}

/* ========== ACCESSIBILITY ========== */

.attachment-image-wrapper:focus[b-zakr3y888q],
.document-card:focus[b-zakr3y888q],
.message-sent.has-failed:focus[b-zakr3y888q] {
    outline: 2px solid var(--rame-success, #25d366);
    outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .message[b-zakr3y888q],
    .attachment-image[b-zakr3y888q],
    .status-pending[b-zakr3y888q],
    .status-sent[b-zakr3y888q],
    .status-delivered[b-zakr3y888q],
    .status-read[b-zakr3y888q],
    .status-failed[b-zakr3y888q],
    .message-sent.has-failed[b-zakr3y888q] {
        animation: none;
    }

    .attachment-image-wrapper:hover .attachment-image[b-zakr3y888q],
    .message-sent.has-failed:hover[b-zakr3y888q] {
        transform: none;
    }
}

/* ========== BUTTON CLICK CHIP ========== */

.button-click-chip[b-zakr3y888q] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    margin-bottom: 4px;
    background: rgba(0, 168, 132, 0.12);
    color: #00725a;
    border: 1px solid rgba(0, 168, 132, 0.28);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    align-self: flex-start;
    max-width: fit-content;
}

.message.is-button-click[b-zakr3y888q] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

:global([data-rame-theme="dark"]) .button-click-chip[b-zakr3y888q] {
    background: rgba(16, 185, 129, 0.18);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.35);
}

/* ========== FORWARDED CHIP ========== */

.forwarded-chip[b-zakr3y888q] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    margin-bottom: 4px;
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 500;
    font-style: italic;
    align-self: flex-start;
}

:global([data-rame-theme="dark"]) .forwarded-chip[b-zakr3y888q] {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
}

/* ========== LOCATION CARD ========== */

.location-card[b-zakr3y888q] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 4px;
    background: #e6f0e9;
    border: 1px solid #bfdec9;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    max-width: 300px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.location-card:hover[b-zakr3y888q] {
    background: #d7e8dd;
    border-color: #a6cdb2;
}

.location-card__icon[b-zakr3y888q] {
    font-size: 28px;
    flex-shrink: 0;
}

.location-card__body[b-zakr3y888q] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.location-card__name[b-zakr3y888q] {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.location-card__address[b-zakr3y888q] {
    font-size: 11px;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.location-card__coords[b-zakr3y888q] {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: #64748b;
}

.location-card__cta[b-zakr3y888q] {
    padding: 4px 10px;
    background: #00a884;
    color: white;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

:global([data-rame-theme="dark"]) .location-card[b-zakr3y888q] {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
}

:global([data-rame-theme="dark"]) .location-card__name[b-zakr3y888q] {
    color: #f1f5f9;
}

:global([data-rame-theme="dark"]) .location-card__address[b-zakr3y888q],
:global([data-rame-theme="dark"]) .location-card__coords[b-zakr3y888q] {
    color: #94a3b8;
}

/* ====================================================================
   AD REFERRAL CARD — shown above the bubble when the message arrived
   from a CTWA / CTM ad click. Per-platform accent color on the left
   border (Facebook blue, Instagram pink, generic gray).
   ==================================================================== */

.ad-referral-card[b-zakr3y888q] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 340px;
    padding: 8px 12px;
    margin-bottom: 4px;
    background: var(--rame-bg-primary, #fff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-left-width: 3px;
    border-radius: var(--rame-radius-md, 8px);
    text-decoration: none;
    color: inherit;
    transition: background-color .15s ease, border-color .15s ease;
}

.ad-referral-card:hover[b-zakr3y888q] {
    background: var(--rame-bg-secondary, #f8f9fa);
    border-color: var(--rame-border-medium, #d1d5db);
}

.ad-referral-card.ad-accent--facebook[b-zakr3y888q] {
    border-left-color: #1877F2;
}

.ad-referral-card.ad-accent--instagram[b-zakr3y888q] {
    border-left-color: #E1306C;
}

.ad-referral-card.ad-accent--default[b-zakr3y888q] {
    border-left-color: var(--rame-text-tertiary, #9ca3af);
}

.ad-referral-card__head[b-zakr3y888q] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rame-text-tertiary, #9ca3af);
}

.ad-referral-card.ad-accent--facebook .ad-referral-card__head[b-zakr3y888q] {
    color: #1877F2;
}

.ad-referral-card.ad-accent--instagram .ad-referral-card__head[b-zakr3y888q] {
    color: #E1306C;
}

.ad-referral-card__icon[b-zakr3y888q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ad-referral-card__platform[b-zakr3y888q] {
    line-height: 1;
}

.ad-referral-card__headline[b-zakr3y888q] {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--rame-text-primary, #111827);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ad-referral-card__source[b-zakr3y888q] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--rame-text-secondary, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ad-referral-card__source span[b-zakr3y888q] {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dark mode */
:global([data-rame-theme="dark"]) .ad-referral-card[b-zakr3y888q] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

:global([data-rame-theme="dark"]) .ad-referral-card:hover[b-zakr3y888q] {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
}

:global([data-rame-theme="dark"]) .ad-referral-card__headline[b-zakr3y888q] {
    color: #f1f5f9;
}

:global([data-rame-theme="dark"]) .ad-referral-card__source[b-zakr3y888q] {
    color: #94a3b8;
}

:global([data-rame-theme="dark"]) .ad-referral-card.ad-accent--default .ad-referral-card__head[b-zakr3y888q] {
    color: #94a3b8;
}

/* ====================================================================
   Story-reply card — rendered above a bubble when the inbound message
   is the user's reply to one of OUR Instagram stories (or our reply to
   the lead's story). Vertical thumbnail framed by the Instagram
   gradient ring, neutral card body so the actual message stays the hero.
   ==================================================================== */

.story-reply-card[b-zakr3y888q] {
    display: flex;
    align-items: stretch;
    gap: 10px;
    max-width: 320px;
    padding: 8px 12px 8px 8px;
    margin-bottom: 4px;
    background: var(--rame-bg-primary, #fff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: var(--rame-radius-md, 10px);
    position: relative;
    overflow: hidden;
}

/* Whisper of Instagram in the card surface — a 2px accent strip on the
   left edge, painted with the brand gradient. Keeps the body neutral. */
.story-reply-card[b-zakr3y888q]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, #f09433 0%, #dc2743 50%, #bc1888 100%);
}

/* ---- Media (thumbnail with gradient ring) ---- */
.story-reply-card__media[b-zakr3y888q] {
    position: relative;
    flex-shrink: 0;
    width: 38px;
    aspect-ratio: 9 / 16;
    border-radius: 6px;
    padding: 1.5px;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02);
}

.story-reply-card__media--clickable[b-zakr3y888q] {
    cursor: pointer;
}

.story-reply-card__media--clickable:hover[b-zakr3y888q] {
    filter: brightness(1.05);
}

.story-reply-card__ring[b-zakr3y888q] {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.story-reply-card__thumb[b-zakr3y888q] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4.5px;
    background: #0f172a;
    display: block;
}

.story-reply-card__thumb--missing[b-zakr3y888q] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.55);
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.06), transparent 60%),
        linear-gradient(160deg, #312e81 0%, #581c87 100%);
}

.story-reply-card__overlay[b-zakr3y888q] {
    position: absolute;
    inset: 0;
    border-radius: 4.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.95);
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.35) 100%);
    pointer-events: none;
}

/* ---- Text body ---- */
.story-reply-card__body[b-zakr3y888q] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    flex: 1;
    padding-right: 2px;
}

.story-reply-card__eyebrow[b-zakr3y888q] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c2185b;
    line-height: 1;
}

.story-reply-card__title[b-zakr3y888q] {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--rame-text-primary, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dark mode */
:global([data-rame-theme="dark"]) .story-reply-card[b-zakr3y888q] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

:global([data-rame-theme="dark"]) .story-reply-card__title[b-zakr3y888q] {
    color: #f1f5f9;
}

:global([data-rame-theme="dark"]) .story-reply-card__eyebrow[b-zakr3y888q] {
    color: #f472b6;
}

/* Outbound (our reply to their story): mirror the orientation lightly so the
   user can read direction at a glance — eyebrow accent flips to neutral. */
.message-sent .story-reply-card__eyebrow[b-zakr3y888q] {
    color: var(--rame-text-tertiary, #6b7280);
}

:global([data-rame-theme="dark"]) .message-sent .story-reply-card__eyebrow[b-zakr3y888q] {
    color: #94a3b8;
}

/* ====================================================================
   Instagram-native attachment cards. Renders specialized previews for
   story_mention, ig_reel, share, template, fallback, unsupported_type.
   Shared scaffold (.ig-card), variant skins applied via BEM modifiers.
   ==================================================================== */

.ig-card[b-zakr3y888q] {
    display: flex;
    align-items: stretch;
    gap: 10px;
    max-width: 340px;
    padding: 8px;
    margin-bottom: 4px;
    background: var(--rame-bg-primary, #fff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: var(--rame-radius-md, 10px);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    position: relative;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.ig-card:hover[b-zakr3y888q] {
    background: var(--rame-bg-secondary, #f8f9fa);
    border-color: var(--rame-border-medium, #d1d5db);
}

.ig-card:active[b-zakr3y888q] {
    transform: scale(0.98);
}

/* Whisper of Instagram in the surface — 3px accent strip on left.
   Each variant tunes its own gradient direction below. */
.ig-card[b-zakr3y888q]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
    background: linear-gradient(180deg, #f09433 0%, #dc2743 50%, #bc1888 100%);
}

/* ---- Body (text column) ---- */
.ig-card__body[b-zakr3y888q] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.ig-card__body--padded[b-zakr3y888q] {
    padding: 4px 4px 2px;
}

.ig-card__eyebrow[b-zakr3y888q] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
}

.ig-card__eyebrow--story[b-zakr3y888q] {
    color: #c2185b;
}

.ig-card__eyebrow--reel[b-zakr3y888q] {
    color: #6f1aa4;
}

.ig-card__eyebrow--share[b-zakr3y888q] {
    color: var(--rame-text-secondary, #6b7280);
}

.ig-card__eyebrow--muted[b-zakr3y888q] {
    color: var(--rame-text-tertiary, #9ca3af);
}

.ig-card__title[b-zakr3y888q] {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--rame-text-primary, #111827);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ig-card__caption[b-zakr3y888q] {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--rame-text-secondary, #374151);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ig-card__hint[b-zakr3y888q] {
    font-size: 11px;
    font-style: italic;
    color: var(--rame-text-tertiary, #9ca3af);
}

/* ---- Thumbs ---- */

.ig-card__thumb-frame[b-zakr3y888q] {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    aspect-ratio: 9 / 16;
    border-radius: 6px;
    padding: 1.5px;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    overflow: hidden;
}

.ig-card__thumb[b-zakr3y888q] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4.5px;
    background: #0f172a;
    display: block;
}

.ig-card__play[b-zakr3y888q] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

.ig-card__thumb-square[b-zakr3y888q] {
    position: relative;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--rame-bg-secondary, #f3f4f6);
}

.ig-card__thumb-square img[b-zakr3y888q] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ig-card__thumb-square--icon[b-zakr3y888q] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rame-text-tertiary, #6b7280);
}

.ig-card__thumb-square--muted[b-zakr3y888q] {
    background: rgba(148, 163, 184, 0.12);
}

/* ---- Reel large media variant ---- */

.ig-card--reel[b-zakr3y888q] {
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    max-width: 280px;
}

.ig-card--reel .ig-card__body[b-zakr3y888q] {
    padding: 8px 12px 10px;
    gap: 4px;
}

.ig-card__media-large[b-zakr3y888q] {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    max-height: 360px;
    background: #000;
    overflow: hidden;
}

.ig-card__video[b-zakr3y888q] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ig-card__cover[b-zakr3y888q] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    display: block;
}

.ig-card__play-overlay[b-zakr3y888q] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.95);
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 60%);
    pointer-events: none;
}

.ig-card--reel[b-zakr3y888q]::before {
    background: linear-gradient(180deg, #7c2bbf 0%, #c930a0 50%, #ff5e57 100%);
}

/* ---- Share variant — flatter, link-style ---- */

.ig-card--share[b-zakr3y888q]::before {
    background: var(--rame-border-medium, #d1d5db);
}

.ig-card--share:hover[b-zakr3y888q] {
    border-color: var(--rame-border-medium, #d1d5db);
}

/* ---- Fallback variant — drained of color, signals "unavailable" ---- */

.ig-card--fallback[b-zakr3y888q] {
    cursor: default;
    background: var(--rame-bg-secondary, #f9fafb);
    border-style: dashed;
}

.ig-card--fallback:hover[b-zakr3y888q] {
    background: var(--rame-bg-secondary, #f9fafb);
}

.ig-card--fallback:active[b-zakr3y888q] {
    transform: none;
}

.ig-card--fallback[b-zakr3y888q]::before {
    background: linear-gradient(180deg, #9ca3af 0%, #6b7280 100%);
}

/* ---- Dark mode ---- */

:global([data-rame-theme="dark"]) .ig-card[b-zakr3y888q] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

:global([data-rame-theme="dark"]) .ig-card:hover[b-zakr3y888q] {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
}

:global([data-rame-theme="dark"]) .ig-card__title[b-zakr3y888q] {
    color: #f1f5f9;
}

:global([data-rame-theme="dark"]) .ig-card__caption[b-zakr3y888q] {
    color: #cbd5e1;
}

:global([data-rame-theme="dark"]) .ig-card__eyebrow--story[b-zakr3y888q] {
    color: #f472b6;
}

:global([data-rame-theme="dark"]) .ig-card__eyebrow--reel[b-zakr3y888q] {
    color: #c084fc;
}

:global([data-rame-theme="dark"]) .ig-card__thumb-square[b-zakr3y888q] {
    background: rgba(255, 255, 255, 0.06);
}

:global([data-rame-theme="dark"]) .ig-card--fallback[b-zakr3y888q] {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ====================================================================
   Reactions hover actions — WhatsApp Web style.
   Show the discreet caret on hover; the dropdown menu only appears after
   the caret is clicked, controlled by the child component's own state.
   Uses ::deep to reach the isolated MessageHoverActions component.
   ==================================================================== */
.message-with-actions[b-zakr3y888q] {
    position: relative;
}
.message-with-actions:hover[b-zakr3y888q]  .msg-caret {
    display: flex;
}
/* Keep the caret visible while the menu is open so the user can still see
   the affordance even after the mouse leaves the bubble. */
.message-with-actions:has(::deep .msg-menu)[b-zakr3y888q]  .msg-caret {
    display: flex;
}

/* Reserve top-right space so the hover caret never overlaps message text.
   Caret is 28x22 absolutely positioned at top-right of the bubble wrapper.
   Bubbles that hold user text need extra padding-right to keep the first
   line clear of the caret area. WhatsApp Web uses the same approach. */
.message-with-actions .message-bubble[b-zakr3y888q] {
    padding-right: 32px;
}
.message-with-actions .message-media-bubble.has-caption .media-caption[b-zakr3y888q] {
    padding-right: 32px;
}

/* Quote-jump highlight: brief pulse when user clicks a quote-preview to navigate to the original message. */
.message.message-jump-highlight[b-zakr3y888q] {
    animation: messageJumpPulse-b-zakr3y888q 1.5s ease-out;
}
@keyframes messageJumpPulse-b-zakr3y888q {
    0% { background-color: rgba(0, 132, 255, 0.18); }
    100% { background-color: transparent; }
}

/* ====================================================================
   TEMPLATE BUTTONS — outbound WhatsApp template quick-reply / URL / phone
   Rendered below the bubble for messages sent from a WhatsAppTemplate.
   Read-only: clicking them does nothing on our side (WhatsApp owns the
   interaction; tapping on the lead's side comes back as a button-click
   inbound message).
   ==================================================================== */
.template-buttons[b-zakr3y888q] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
    max-width: 100%;
    width: 100%;
}
.template-button[b-zakr3y888q] {
    background: var(--rame-bg-primary, #fff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    padding: 9px 14px;
    border-radius: 8px;
    color: #00a884;
    font-weight: 500;
    font-size: 13.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.08);
    cursor: default;
    user-select: none;
}
.template-button svg[b-zakr3y888q] {
    flex-shrink: 0;
    opacity: 0.9;
}
.template-button--quick-reply[b-zakr3y888q] {
    color: #00a884;
}
.template-button--url[b-zakr3y888q],
.template-button--phone[b-zakr3y888q] {
    color: #027eb5;
}
/* _content/Rame.Blazor.Server/Components/Conversations/MensajesList.razor.rz.scp.css */
/* Professional Message List - Refined Enterprise Design */
/* Uses Rame Design System tokens - see /css/design-system/_tokens.css */

.chat-messages[b-evtwv61cx5] {
    flex: 1;
    padding: var(--rame-space-6, 24px) var(--rame-space-5, 20px);
    overflow-y: auto;
    overflow-x: hidden;
    background: linear-gradient(180deg, var(--rame-bg-secondary, #f7f8fa) 0%, var(--rame-bg-primary, #ffffff) 100%);
    display: flex;
    flex-direction: column;
    position: relative;
    scroll-behavior: smooth;
}

/* Custom Scrollbar */
.chat-messages[b-evtwv61cx5]::-webkit-scrollbar {
    width: 6px;
}

.chat-messages[b-evtwv61cx5]::-webkit-scrollbar-track {
    background: var(--rame-scrollbar-track, transparent);
}

.chat-messages[b-evtwv61cx5]::-webkit-scrollbar-thumb {
    background: var(--rame-scrollbar-thumb, #d0d3d9);
    border-radius: 3px;
    transition: var(--rame-transition-base, background 0.2s ease);
}

.chat-messages[b-evtwv61cx5]::-webkit-scrollbar-thumb:hover {
    background: var(--rame-scrollbar-thumb-hover, #b8bcc4);
}

.no-messages[b-evtwv61cx5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--rame-text-tertiary, #8a8d91);
    text-align: center;
    padding: var(--rame-space-10, 40px) var(--rame-space-5, 20px);
    animation: fadeIn-b-evtwv61cx5 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.no-messages[b-evtwv61cx5]::before {
    content: "\01F4AC";
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
    display: block;
    animation: floatIcon-b-evtwv61cx5 3s ease-in-out infinite;
}

@keyframes floatIcon-b-evtwv61cx5 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.no-messages p[b-evtwv61cx5] {
    margin: 0;
    font-size: var(--rame-text-lg, 15px);
    font-weight: var(--rame-font-medium, 500);
    letter-spacing: 0.2px;
}

@keyframes fadeIn-b-evtwv61cx5 {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Date Divider - centered inline separator, WhatsApp-style */
.date-divider[b-evtwv61cx5] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin: 18px 0 10px;
    padding: 0 8px;
    pointer-events: none;
    user-select: none;
}

.date-divider span[b-evtwv61cx5] {
    display: inline-block;
    max-width: 70%;
    padding: 4px 12px;
    font-size: 11.5px;
    font-weight: var(--rame-font-medium, 500);
    letter-spacing: 0.15px;
    line-height: 1.4;
    color: var(--rame-text-secondary, #54656f);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: 8px;
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04);
    text-transform: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* ========== EMAIL THREAD GROUPS ========== */

.chat-messages--email[b-evtwv61cx5] {
    background: var(--rame-bg-secondary, #f7f8fa);
    padding: var(--rame-space-6, 24px);
    gap: var(--rame-space-6, 24px);
    flex-direction: column;
}

.thread-group[b-evtwv61cx5] {
    position: relative;
}

.thread-group > header[b-evtwv61cx5] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: var(--rame-radius-md, 8px);
    background: var(--rame-bg-primary, #fff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    cursor: pointer;
    user-select: none;
    transition: background .12s;
}

.thread-group > header:hover[b-evtwv61cx5] { background: var(--rame-bg-hover, #f3f4f6); }

.thread-group > header .subject[b-evtwv61cx5] {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: var(--rame-text-primary, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.thread-group > header .count[b-evtwv61cx5] {
    font-size: 10px;
    color: var(--rame-text-tertiary, #9ca3af);
    padding: 2px 8px;
    background: var(--rame-bg-tertiary, #f3f4f6);
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.thread-group > header .caret[b-evtwv61cx5] {
    color: var(--rame-text-tertiary, #9ca3af);
    transition: transform .15s ease;
    flex-shrink: 0;
}
.thread-group > header .caret svg[b-evtwv61cx5] { width: 12px; height: 12px; display: block; }
.thread-group.collapsed > header .caret[b-evtwv61cx5] { transform: rotate(-90deg); }

.thread-messages[b-evtwv61cx5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 16px;
    border-left: 2px solid var(--rame-border-light, #e4e6eb);
    margin-left: 16px;
}

/* ========== DARK MODE OVERRIDES ========== */

:global([data-rame-theme="dark"]) .chat-messages[b-evtwv61cx5] {
    background: linear-gradient(180deg, var(--rame-bg-secondary, #282828) 0%, var(--rame-bg-chat, #1a1a1a) 100%);
}

:global([data-rame-theme="dark"]) .no-messages[b-evtwv61cx5] {
    color: var(--rame-text-muted, #888888);
}

:global([data-rame-theme="dark"]) .date-divider span[b-evtwv61cx5] {
    color: var(--rame-text-secondary, #c8c8c8);
    background: rgba(40, 40, 40, 0.82);
    border-color: var(--rame-border-medium, #3d3d3d);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.35),
        0 4px 12px rgba(0, 0, 0, 0.25);
}

/* ========== MOBILE TWEAKS ========== */
@media (max-width: 640px) {
    .chat-messages[b-evtwv61cx5] {
        padding: var(--rame-space-2, 8px);
    }
}
/* _content/Rame.Blazor.Server/Components/Conversations/MessageHoverActions.razor.rz.scp.css */
/* Message hover actions — WhatsApp Web inspired
   Discreet caret on the bubble corner; click expands a clean dropdown menu.
   Caret visibility is toggled from the parent bubble's :hover state via ::deep
   (see MensajeItem.razor.css). Uses Rame Design System tokens. */

/* ========== CARET (chevron affordance) ========== */

.msg-caret[b-90gr2b25eh] {
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: 22px;
    border: 0;
    background: transparent;
    color: var(--rame-text-secondary, #65676b);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 4;
    border-radius: 0 var(--rame-radius-md, 8px) 0 8px;
    transition: color 120ms ease, transform 120ms ease;
}

/* Soft radial halo that fades into the bubble — replaces the old harsh vertical gradient.
   Rendered as a pseudo-element so it does not catch pointer events. */
.msg-caret[b-90gr2b25eh]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        ellipse 130% 110% at 50% 100%,
        var(--rame-message-received-bg, #ffffff) 30%,
        rgba(255, 255, 255, 0) 75%
    );
    pointer-events: none;
    z-index: -1;
}

.msg-caret svg[b-90gr2b25eh] {
    position: relative;
    transition: transform 120ms ease;
}

.msg-caret:hover[b-90gr2b25eh] {
    color: var(--rame-text-primary, #1c1e21);
}

.msg-caret:hover svg[b-90gr2b25eh] {
    transform: translateY(1px);
}

.msg-caret:active svg[b-90gr2b25eh] {
    transform: translateY(2px) scale(0.92);
}

/* On outbound bubbles the halo must blend with the green bubble background instead of white */
:host-context(.message-sent) .msg-caret[b-90gr2b25eh] {
    color: rgba(11, 65, 50, 0.65);
}

:host-context(.message-sent) .msg-caret[b-90gr2b25eh]::before {
    background: radial-gradient(
        ellipse 130% 110% at 50% 100%,
        var(--rame-message-sent-bg, #d9fdd3) 30%,
        rgba(217, 253, 211, 0) 75%
    );
}

:host-context(.message-sent) .msg-caret:hover[b-90gr2b25eh] {
    color: rgba(11, 65, 50, 0.95);
}

/* ========== OUTSIDE-CLICK OVERLAY ========== */

.msg-menu-overlay[b-90gr2b25eh] {
    position: fixed;
    inset: 0;
    z-index: 950;
    background: transparent;
    cursor: default;
}

/* ========== MENU CONTAINER ========== */

.msg-menu[b-90gr2b25eh] {
    position: absolute;
    bottom: 26px;
    z-index: 960;
    min-width: 220px;
    max-width: calc(100vw - 24px);
    padding: var(--rame-space-1, 4px);
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: 14px;
    box-shadow:
        0 -20px 48px -12px rgba(0, 0, 0, 0.22),
        0 -6px 16px -6px rgba(0, 0, 0, 0.10),
        0 0 0 0.5px rgba(0, 0, 0, 0.04);
    animation: msgMenuIn-b-90gr2b25eh 180ms cubic-bezier(0.2, 0.9, 0.32, 1.0);
}

/* Outbound bubbles sit on the right side of the chat, so anchor the menu to
   the bubble's right edge — it projects leftward into the chat area.
   `left: auto` is explicit so no ancestor or stale style accidentally shifts
   the menu to the right of the bubble. */
.msg-menu.from-right[b-90gr2b25eh] {
    right: 0;
    left: auto;
    transform-origin: bottom right;
}

/* Inbound bubbles sit on the left side. Anchoring to the bubble's right edge
   would push the menu under the conversation sidebar. Anchor by the left edge
   so the menu projects rightward into the chat area instead. */
.msg-menu.from-left[b-90gr2b25eh] {
    left: 0;
    right: auto;
    transform-origin: bottom left;
}

@keyframes msgMenuIn-b-90gr2b25eh {
    from { opacity: 0; transform: translateY(8px) scale(0.94); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ========== QUICK-PICK ROW ========== */

.msg-menu-quickpick[b-90gr2b25eh] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 4px;
}

.quick-emoji[b-90gr2b25eh],
.quick-more[b-90gr2b25eh] {
    flex: 1 1 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 6px 0;
    font-size: 20px;
    line-height: 1;
    border-radius: var(--rame-radius-full, 50%);
    color: var(--rame-text-secondary, #65676b);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    transition:
        background 120ms ease,
        transform 160ms cubic-bezier(0.2, 0.9, 0.32, 1.4);
}

.quick-emoji span[b-90gr2b25eh] {
    transform-origin: center;
    transition: transform 200ms cubic-bezier(0.2, 0.9, 0.32, 1.6);
    will-change: transform;
}

.quick-emoji:hover[b-90gr2b25eh] {
    background: var(--rame-bg-hover, #e4e6eb);
}

.quick-emoji:hover span[b-90gr2b25eh] {
    transform: scale(1.35) translateY(-1px);
}

.quick-emoji:active span[b-90gr2b25eh] {
    transform: scale(1.15) translateY(0);
}

.quick-more[b-90gr2b25eh] {
    flex: 0 0 36px;
    margin-left: 2px;
    background: var(--rame-bg-tertiary, #f0f2f5);
    color: var(--rame-text-secondary, #65676b);
}

.quick-more:hover[b-90gr2b25eh] {
    background: var(--rame-bg-hover, #e4e6eb);
    color: var(--rame-text-primary, #1c1e21);
}

.quick-more.active[b-90gr2b25eh] {
    background: var(--rame-primary-light, #e6f3ff);
    color: var(--rame-primary, #0084ff);
}

.quick-more svg[b-90gr2b25eh] {
    transition: transform 200ms cubic-bezier(0.2, 0.9, 0.32, 1.4);
}

.quick-more.active svg[b-90gr2b25eh] {
    transform: rotate(45deg);
}

/* ========== DIVIDER ========== */

.msg-menu-divider[b-90gr2b25eh] {
    height: 1px;
    margin: 4px 8px;
    background: var(--rame-border-light, #e4e6eb);
}

/* ========== MENU ITEMS (Reply, etc.) ========== */

.msg-menu-item[b-90gr2b25eh] {
    display: flex;
    align-items: center;
    gap: var(--rame-space-3, 12px);
    width: calc(100% - 4px);
    margin: 0 2px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: var(--rame-text-base, 14px);
    font-weight: var(--rame-font-medium, 500);
    color: var(--rame-text-primary, #1c1e21);
    text-align: left;
    transition: background 120ms ease;
}

.msg-menu-item:hover[b-90gr2b25eh] {
    background: var(--rame-bg-hover, #e4e6eb);
}

.msg-menu-item:active[b-90gr2b25eh] {
    background: var(--rame-bg-tertiary, #f0f2f5);
}

.msg-menu-item svg[b-90gr2b25eh] {
    flex-shrink: 0;
    color: var(--rame-text-secondary, #65676b);
}

.msg-menu-item:hover svg[b-90gr2b25eh] {
    color: var(--rame-text-primary, #1c1e21);
}

/* ========== EMBEDDED PICKER ========== */

.msg-menu-picker[b-90gr2b25eh] {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--rame-border-light, #e4e6eb);
}

/* ========== MOBILE: place caret + menu below the bubble ========== */

@media (max-width: 600px) {
    .msg-caret[b-90gr2b25eh] {
        top: auto;
        bottom: -22px;
    }
    /* On mobile the caret sits under the bubble, so the menu must drop below it. */
    .msg-menu[b-90gr2b25eh] {
        top: 26px;
        bottom: auto;
    }
    .msg-menu.from-right[b-90gr2b25eh] { transform-origin: top right; }
    .msg-menu.from-left[b-90gr2b25eh]  { transform-origin: top left; }
    @keyframes msgMenuIn-b-90gr2b25eh {
        from { opacity: 0; transform: translateY(-8px) scale(0.94); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }
}

/* ========== REDUCED MOTION ========== */

@media (prefers-reduced-motion: reduce) {
    .msg-menu[b-90gr2b25eh],
    .quick-emoji span[b-90gr2b25eh],
    .quick-emoji[b-90gr2b25eh],
    .quick-more[b-90gr2b25eh],
    .quick-more svg[b-90gr2b25eh],
    .msg-caret[b-90gr2b25eh],
    .msg-caret svg[b-90gr2b25eh],
    .msg-menu-item[b-90gr2b25eh] {
        animation: none !important;
        transition: none !important;
    }
}

/* ========== DARK MODE OVERRIDES ========== */

:global([data-rame-theme="dark"]) .msg-caret[b-90gr2b25eh] {
    color: rgba(255, 255, 255, 0.55);
}

:global([data-rame-theme="dark"]) .msg-caret[b-90gr2b25eh]::before {
    background: radial-gradient(
        ellipse 130% 110% at 50% 100%,
        var(--rame-message-received-bg, #2a2a2a) 30%,
        rgba(42, 42, 42, 0) 75%
    );
}

:global([data-rame-theme="dark"]) .msg-caret:hover[b-90gr2b25eh] {
    color: rgba(255, 255, 255, 0.92);
}

:global([data-rame-theme="dark"] :host-context(.message-sent)) .msg-caret[b-90gr2b25eh] {
    color: rgba(220, 240, 230, 0.65);
}

:global([data-rame-theme="dark"] :host-context(.message-sent)) .msg-caret[b-90gr2b25eh]::before {
    background: radial-gradient(
        ellipse 130% 110% at 50% 100%,
        var(--rame-message-sent-bg, #005c4b) 30%,
        rgba(0, 92, 75, 0) 75%
    );
}

:global([data-rame-theme="dark"] :host-context(.message-sent)) .msg-caret:hover[b-90gr2b25eh] {
    color: rgba(255, 255, 255, 0.95);
}

:global([data-rame-theme="dark"]) .msg-menu[b-90gr2b25eh] {
    background: var(--rame-bg-secondary, #282828);
    border-color: var(--rame-border-medium, #505050);
    box-shadow:
        0 20px 48px -12px rgba(0, 0, 0, 0.6),
        0 6px 16px -6px rgba(0, 0, 0, 0.4),
        0 0 0 0.5px rgba(255, 255, 255, 0.04);
}

:global([data-rame-theme="dark"]) .quick-emoji[b-90gr2b25eh] {
    color: var(--rame-text-secondary, #c8c8c8);
}

:global([data-rame-theme="dark"]) .quick-emoji:hover[b-90gr2b25eh] {
    background: var(--rame-bg-hover, #3a3a3a);
}

:global([data-rame-theme="dark"]) .quick-more[b-90gr2b25eh] {
    background: var(--rame-bg-tertiary, #333333);
    color: var(--rame-text-secondary, #c8c8c8);
}

:global([data-rame-theme="dark"]) .quick-more:hover[b-90gr2b25eh] {
    background: var(--rame-bg-hover, #3a3a3a);
    color: var(--rame-text-primary, #f0f0f0);
}

:global([data-rame-theme="dark"]) .quick-more.active[b-90gr2b25eh] {
    background: var(--rame-primary-light, #1a3a5c);
    color: var(--rame-primary, #3b9eff);
}

:global([data-rame-theme="dark"]) .msg-menu-divider[b-90gr2b25eh] {
    background: var(--rame-border-medium, #505050);
}

:global([data-rame-theme="dark"]) .msg-menu-item[b-90gr2b25eh] {
    color: var(--rame-text-primary, #f0f0f0);
}

:global([data-rame-theme="dark"]) .msg-menu-item:hover[b-90gr2b25eh] {
    background: var(--rame-bg-hover, #3a3a3a);
}

:global([data-rame-theme="dark"]) .msg-menu-item:active[b-90gr2b25eh] {
    background: var(--rame-bg-tertiary, #333333);
}

:global([data-rame-theme="dark"]) .msg-menu-item svg[b-90gr2b25eh] {
    color: var(--rame-text-secondary, #c8c8c8);
}

:global([data-rame-theme="dark"]) .msg-menu-item:hover svg[b-90gr2b25eh] {
    color: var(--rame-text-primary, #f0f0f0);
}

:global([data-rame-theme="dark"]) .msg-menu-picker[b-90gr2b25eh] {
    border-top-color: var(--rame-border-medium, #505050);
}
/* _content/Rame.Blazor.Server/Components/Conversations/MessageQuotePreview.razor.rz.scp.css */
.quote-preview[b-09850towlq] {
    display: flex;
    gap: 8px;
    padding: 6px 10px;
    margin-bottom: 4px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    cursor: pointer;
    max-width: 100%;
    overflow: hidden;
}

.quote-preview:hover[b-09850towlq] {
    background: rgba(0, 0, 0, 0.07);
}

.quote-bar[b-09850towlq] {
    width: 3px;
    background: var(--primary, #2196f3);
    border-radius: 2px;
    flex-shrink: 0;
}

.quote-body[b-09850towlq] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.quote-author[b-09850towlq] {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary, #2196f3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quote-snippet[b-09850towlq] {
    font-size: 13px;
    color: var(--text-secondary, rgba(0, 0, 0, 0.6));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* _content/Rame.Blazor.Server/Components/Conversations/MessageReactionsBadge.razor.rz.scp.css */
/* Message reactions badge — WhatsApp Web inspired
   A small white pill that hangs off the bottom edge of the message bubble.
   Uses Rame Design System tokens; no own/other color distinction (WhatsApp shows
   all reactions as identical white chips — semantics come from emoji + position). */

.reactions-badge[b-w574qmqqz3] {
    display: inline-flex;
    gap: 3px;
    /* Pull the badge up so it overlaps the bubble's bottom edge */
    margin-top: -10px;
    margin-bottom: 4px;
    padding: 0 6px;
    z-index: 2;
    position: relative;
    /* Always anchor to the right edge of the bubble, regardless of bubble side */
    align-self: flex-end;
}

.reaction-pill[b-w574qmqqz3] {
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: var(--rame-radius-2xl, 20px);
    padding: 2px 7px 2px 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.08),
        0 0 0 0.5px rgba(0, 0, 0, 0.02);
    transition:
        transform 140ms cubic-bezier(0.2, 0.9, 0.32, 1.4),
        box-shadow 140ms ease,
        background 140ms ease;
}

.reaction-pill:hover[b-w574qmqqz3] {
    transform: translateY(-1px) scale(1.06);
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.12),
        0 0 0 0.5px rgba(0, 0, 0, 0.04);
}

.reaction-pill:active[b-w574qmqqz3] {
    transform: translateY(0) scale(0.98);
}

/* "Own" reaction — the only affordance is a slightly tinted background to
   hint that clicking will remove it. Subtle, not screaming. */
.reaction-pill.own[b-w574qmqqz3] {
    background: var(--rame-primary-light, #e6f3ff);
    border-color: var(--rame-primary-light, #e6f3ff);
}

.reaction-pill.own:hover[b-w574qmqqz3] {
    background: var(--rame-bg-hover, #e4e6eb);
    border-color: var(--rame-border-light, #e4e6eb);
}

.reaction-emoji[b-w574qmqqz3] {
    font-size: 13px;
    line-height: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* ========== DARK MODE OVERRIDES ========== */

:global([data-rame-theme="dark"]) .reaction-pill[b-w574qmqqz3] {
    background: var(--rame-bg-secondary, #282828);
    border-color: var(--rame-border-medium, #505050);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.4),
        0 0 0 0.5px rgba(255, 255, 255, 0.04);
}

:global([data-rame-theme="dark"]) .reaction-pill:hover[b-w574qmqqz3] {
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.5),
        0 0 0 0.5px rgba(255, 255, 255, 0.06);
}

:global([data-rame-theme="dark"]) .reaction-pill.own[b-w574qmqqz3] {
    background: var(--rame-primary-light, #1a3a5c);
    border-color: var(--rame-primary-light, #1a3a5c);
}

:global([data-rame-theme="dark"]) .reaction-pill.own:hover[b-w574qmqqz3] {
    background: var(--rame-bg-hover, #3a3a3a);
    border-color: var(--rame-border-medium, #505050);
}
/* _content/Rame.Blazor.Server/Components/Conversations/QuotationSendPopup.razor.rz.scp.css */
.qsend-body[b-y4hchxahwm] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 2px;
}

/* Quotation summary card */
.qsend-card[b-y4hchxahwm] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--rame-bg-secondary, #f7f8fa);
    border: 1px solid var(--rame-border-light, #e4e6eb);
}
.qsend-card__icon[b-y4hchxahwm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--rame-primary, #0084ff) 12%, transparent);
    flex-shrink: 0;
}
.qsend-card__info[b-y4hchxahwm] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qsend-card__title[b-y4hchxahwm] {
    font-size: 14px;
    font-weight: 700;
    color: var(--rame-text-primary, #111b21);
}
.qsend-card__sub[b-y4hchxahwm] {
    font-size: 12px;
    color: var(--rame-text-secondary, #667781);
}

/* Editable caption (defaults to the quotation's per-quotation message) */
.qsend-message[b-y4hchxahwm] { display: flex; flex-direction: column; gap: 5px; }
.qsend-message__label[b-y4hchxahwm] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--rame-text-tertiary, #8696a0);
}
.qsend-message__input[b-y4hchxahwm] {
    width: 100%;
    resize: vertical;
    min-height: 64px;
    padding: 9px 11px;
    border: 1.5px solid var(--rame-border-dark, #d0d3d9);
    border-radius: 9px;
    font-family: inherit;
    font-size: 13px;
    color: var(--rame-text-primary, #111b21);
    background: var(--rame-bg-primary, #fff);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.qsend-message__input:focus[b-y4hchxahwm] {
    border-color: var(--rame-primary, #0084ff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rame-primary, #0084ff) 14%, transparent);
}
.qsend-message__hint[b-y4hchxahwm] {
    font-size: 11px;
    color: var(--rame-text-tertiary, #8696a0);
}
.qsend-message__hint code[b-y4hchxahwm] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--rame-bg-secondary, #f0f2f5);
    padding: 1px 5px;
    border-radius: 4px;
    color: var(--rame-primary, #0084ff);
}

/* "Se enviará a [Lead]" — makes the chat context unmistakable */
.qsend-target[b-y4hchxahwm] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    padding: 2px 2px;
    font-size: 13px;
}
.qsend-target__label[b-y4hchxahwm] { color: var(--rame-text-tertiary, #8696a0); }
.qsend-target__lead[b-y4hchxahwm] {
    font-weight: 700;
    color: var(--rame-primary, #0084ff);
}
.qsend-target__channel[b-y4hchxahwm] { color: var(--rame-text-secondary, #667781); }

.qsend-error[b-y4hchxahwm] {
    font-size: 12.5px;
    color: var(--rame-error, #ef5350);
    background: #fff0f0;
    border-radius: 8px;
    padding: 8px 10px;
}

.qsend-footer[b-y4hchxahwm] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
/* _content/Rame.Blazor.Server/Components/Conversations/TemplateSelector.razor.rz.scp.css */
/* ========================================
   TEMPLATE SELECTOR MODAL - Professional UI/UX
   Uses Rame Design System tokens - see /css/design-system/_tokens.css
   ======================================== */

/* ========== MODAL OVERLAY ========== */

.template-modal-overlay[b-u72zh3bi0t] {
    position: fixed;
    inset: 0;
    background: rgba(11, 20, 26, 0.75);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    animation: fadeIn-b-u72zh3bi0t 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fadeIn-b-u72zh3bi0t {
    to {
        opacity: 1;
    }
}

/* ========== MODAL CONTAINER ========== */

.template-modal-container[b-u72zh3bi0t] {
    background: var(--rame-bg-primary, #ffffff);
    border-radius: 16px;
    box-shadow: var(--rame-shadow-xl, 0 24px 48px rgba(0, 0, 0, 0.24)), 0 12px 24px rgba(0, 0, 0, 0.16);
    width: 100%;
    max-width: 900px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    animation: modalSlideIn-b-u72zh3bi0t 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
}

@keyframes modalSlideIn-b-u72zh3bi0t {
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* ========== MODAL HEADER ========== */

.template-modal-header[b-u72zh3bi0t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    border-bottom: 1px solid var(--rame-border-medium, #e9edef);
    background: linear-gradient(135deg, var(--rame-bg-primary, #ffffff) 0%, var(--rame-bg-secondary, #f8f9fa) 100%);
    flex-shrink: 0;
}

.header-title-section[b-u72zh3bi0t] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.header-icon[b-u72zh3bi0t] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--rame-success-lighter, #e7f8f5) 0%, #d0f2e9 100%);
    color: var(--rame-accent, #00a884);
    flex-shrink: 0;
}

.header-text[b-u72zh3bi0t] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.modal-title[b-u72zh3bi0t] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--rame-text-primary, #111b21);
    letter-spacing: -0.3px;
}

.modal-subtitle[b-u72zh3bi0t] {
    margin: 0;
    font-size: 13px;
    color: var(--rame-text-meta, #667781);
    font-weight: 400;
}

.btn-close-modal[b-u72zh3bi0t] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--rame-text-secondary, #54656f);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    flex-shrink: 0;
}

.btn-close-modal:hover[b-u72zh3bi0t] {
    background: var(--rame-bg-tertiary, #f0f2f5);
    color: var(--rame-text-primary, #111b21);
    transform: rotate(90deg);
}

.btn-close-modal:active[b-u72zh3bi0t] {
    transform: rotate(90deg) scale(0.9);
}

/* ========== MODAL CONTENT ========== */

.template-modal-content[b-u72zh3bi0t] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px 32px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Scrollbar styling */
.template-modal-content[b-u72zh3bi0t]::-webkit-scrollbar {
    width: 8px;
}

.template-modal-content[b-u72zh3bi0t]::-webkit-scrollbar-track {
    background: var(--rame-bg-tertiary, #f0f2f5);
    border-radius: 4px;
}

.template-modal-content[b-u72zh3bi0t]::-webkit-scrollbar-thumb {
    background: var(--rame-scrollbar-thumb, #d1d7db);
    border-radius: 4px;
    transition: background 0.2s;
}

.template-modal-content[b-u72zh3bi0t]::-webkit-scrollbar-thumb:hover {
    background: var(--rame-text-muted, #8696a0);
}

/* ========== LOADING STATE ========== */

.template-loading-state[b-u72zh3bi0t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 20px;
}

.loading-spinner[b-u72zh3bi0t] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--rame-border-medium, #e9edef);
    border-top-color: var(--rame-accent, #00a884);
    border-radius: 50%;
    animation: spin-b-u72zh3bi0t 0.8s linear infinite;
}

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

.loading-text[b-u72zh3bi0t] {
    margin: 0;
    font-size: 15px;
    color: var(--rame-text-meta, #667781);
    font-weight: 500;
}

/* ========== EMPTY STATE ========== */

.template-empty-state[b-u72zh3bi0t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
    text-align: center;
}

.empty-icon[b-u72zh3bi0t] {
    font-size: 64px;
    opacity: 0.3;
    filter: grayscale(1);
}

.empty-title[b-u72zh3bi0t] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--rame-text-primary, #111b21);
}

.empty-description[b-u72zh3bi0t] {
    margin: 0;
    font-size: 14px;
    color: var(--rame-text-meta, #667781);
    max-width: 400px;
}

/* ========== SEARCH BAR ========== */

.template-search-bar[b-u72zh3bi0t] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--rame-bg-tertiary, #f0f2f5);
    border-radius: 12px;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.template-search-bar:focus-within[b-u72zh3bi0t] {
    background: var(--rame-bg-primary, #ffffff);
    border-color: var(--rame-accent, #00a884);
    box-shadow: 0 0 0 4px rgba(0, 168, 132, 0.1);
}

.search-icon[b-u72zh3bi0t] {
    color: var(--rame-text-muted, #8696a0);
    flex-shrink: 0;
    transition: color 0.2s;
}

.template-search-bar:focus-within .search-icon[b-u72zh3bi0t] {
    color: var(--rame-accent, #00a884);
}

.search-input[b-u72zh3bi0t] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 15px;
    color: var(--rame-text-primary, #111b21);
    outline: none;
    font-family: inherit;
}

.search-input[b-u72zh3bi0t]::placeholder {
    color: var(--rame-text-muted, #8696a0);
}

.btn-clear-search[b-u72zh3bi0t] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--rame-text-muted, #8696a0);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.btn-clear-search:hover[b-u72zh3bi0t] {
    background: var(--rame-border-medium, #e9edef);
    color: var(--rame-text-primary, #111b21);
    transform: rotate(90deg);
}

/* ========== TEMPLATES GRID ========== */

.templates-grid[b-u72zh3bi0t] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    animation: gridFadeIn-b-u72zh3bi0t 0.4s ease;
}

@keyframes gridFadeIn-b-u72zh3bi0t {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== TEMPLATE CARD ========== */

.template-card[b-u72zh3bi0t] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--rame-bg-secondary, #f8f9fa);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
    position: relative;
    overflow: hidden;
}

.template-card[b-u72zh3bi0t]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(0, 168, 132, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s;
}

.template-card:hover[b-u72zh3bi0t] {
    background: var(--rame-bg-primary, #ffffff);
    border-color: var(--rame-border-medium, #e9edef);
    box-shadow: var(--rame-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.08));
    transform: translateY(-2px);
}

.template-card:hover[b-u72zh3bi0t]::before {
    opacity: 1;
}

.template-card.selected[b-u72zh3bi0t] {
    background: linear-gradient(135deg, var(--rame-success-lighter, #e7f8f5) 0%, #d0f2e9 100%);
    border-color: var(--rame-accent, #00a884);
    box-shadow: 0 8px 24px rgba(0, 168, 132, 0.2);
}

.template-card.selected[b-u72zh3bi0t]::before {
    opacity: 0;
}

.template-card:active[b-u72zh3bi0t] {
    transform: translateY(0) scale(0.98);
}

/* ========== TEMPLATE CARD HEADER ========== */

.template-card-header[b-u72zh3bi0t] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.template-card-title[b-u72zh3bi0t] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.template-name[b-u72zh3bi0t] {
    font-size: 14px;
    font-weight: 600;
    color: var(--rame-text-primary, #111b21);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.selected-badge[b-u72zh3bi0t] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--rame-accent, #00a884);
    color: #ffffff;
    flex-shrink: 0;
    animation: badgePop-b-u72zh3bi0t 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes badgePop-b-u72zh3bi0t {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.template-category-badge[b-u72zh3bi0t] {
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--rame-text-secondary, #54656f);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.template-card.selected .template-category-badge[b-u72zh3bi0t] {
    background: rgba(0, 168, 132, 0.2);
    color: var(--rame-accent-dark, #006d5b);
}

/* ========== TEMPLATE PREVIEW ========== */

.template-preview[b-u72zh3bi0t] {
    margin: 0;
    font-size: 13px;
    color: var(--rame-text-meta, #667781);
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.template-meta[b-u72zh3bi0t] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.template-card.selected .template-meta[b-u72zh3bi0t] {
    border-top-color: rgba(0, 168, 132, 0.2);
}

.variables-count[b-u72zh3bi0t] {
    font-size: 11px;
    color: var(--rame-text-muted, #8696a0);
    font-weight: 500;
}

.template-card.selected .variables-count[b-u72zh3bi0t] {
    color: var(--rame-accent, #00a884);
    font-weight: 600;
}

/* ========== TEMPLATE DETAILS PANEL ========== */

.template-details-panel[b-u72zh3bi0t] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    background: linear-gradient(135deg, var(--rame-bg-secondary, #f8f9fa) 0%, var(--rame-bg-primary, #ffffff) 100%);
    border: 2px solid var(--rame-accent, #00a884);
    border-radius: 16px;
    animation: panelSlideIn-b-u72zh3bi0t 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 8px 24px rgba(0, 168, 132, 0.12);
}

@keyframes panelSlideIn-b-u72zh3bi0t {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.details-header[b-u72zh3bi0t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.details-title[b-u72zh3bi0t] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--rame-text-primary, #111b21);
}

.btn-deselect[b-u72zh3bi0t] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--rame-text-muted, #8696a0);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-deselect:hover[b-u72zh3bi0t] {
    background: var(--rame-border-medium, #e9edef);
    color: var(--rame-text-primary, #111b21);
    transform: rotate(90deg);
}

/* ========== VARIABLES SECTION ========== */

.variables-section[b-u72zh3bi0t] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.variables-header[b-u72zh3bi0t] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rame-text-secondary, #54656f);
}

.variables-header svg[b-u72zh3bi0t] {
    color: var(--rame-accent, #00a884);
}

.variable-field[b-u72zh3bi0t] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.variable-label[b-u72zh3bi0t] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--rame-text-primary, #111b21);
}

.variable-index[b-u72zh3bi0t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    background: linear-gradient(135deg, var(--rame-accent, #00a884) 0%, var(--rame-accent-hover, #008f72) 100%);
    color: #ffffff;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Courier New', monospace;
}

.variable-input[b-u72zh3bi0t] {
    padding: 12px 16px;
    border: 2px solid var(--rame-border-medium, #e9edef);
    border-radius: 10px;
    font-size: 14px;
    color: var(--rame-text-primary, #111b21);
    background: var(--rame-bg-primary, #ffffff);
    outline: none;
    transition: all 0.2s;
    font-family: inherit;
}

.variable-input[b-u72zh3bi0t]::placeholder {
    color: var(--rame-text-muted, #8696a0);
}

.variable-input:focus[b-u72zh3bi0t] {
    border-color: var(--rame-accent, #00a884);
    box-shadow: 0 0 0 4px rgba(0, 168, 132, 0.1);
}

/* ========== PREVIEW SECTION ========== */

.preview-section[b-u72zh3bi0t] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background: var(--rame-bg-chat, #e5ddd5);
    border-radius: 12px;
}

.preview-header[b-u72zh3bi0t] {
    font-size: 12px;
    font-weight: 600;
    color: var(--rame-text-meta, #667781);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.preview-message[b-u72zh3bi0t] {
    padding: 12px 16px;
    background: var(--rame-message-sent-bg, #dcf8c6);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--rame-text-primary, #111b21);
    box-shadow: var(--rame-shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.08));
}

.preview-message strong[b-u72zh3bi0t] {
    color: var(--rame-accent, #00a884);
    font-weight: 600;
}

/* ========== MODAL FOOTER ========== */

.template-modal-footer[b-u72zh3bi0t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px;
    border-top: 1px solid var(--rame-border-medium, #e9edef);
    background: var(--rame-bg-secondary, #f8f9fa);
    flex-shrink: 0;
    gap: 20px;
}

.footer-info[b-u72zh3bi0t] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--rame-text-meta, #667781);
}

.footer-info .info-icon[b-u72zh3bi0t] {
    color: var(--rame-warning, #f59e0b);
}

.footer-actions[b-u72zh3bi0t] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-footer-cancel[b-u72zh3bi0t] {
    padding: 12px 24px;
    background: transparent;
    border: 2px solid var(--rame-border-medium, #e9edef);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--rame-text-secondary, #54656f);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.btn-footer-cancel:hover[b-u72zh3bi0t] {
    background: var(--rame-bg-tertiary, #f0f2f5);
    border-color: var(--rame-scrollbar-thumb, #d1d7db);
    color: var(--rame-text-primary, #111b21);
}

.btn-footer-cancel:active[b-u72zh3bi0t] {
    transform: scale(0.96);
}

.btn-footer-schedule[b-u72zh3bi0t] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: transparent;
    border: 2px solid var(--rame-accent, #00a884);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--rame-accent, #00a884);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.btn-footer-schedule:hover[b-u72zh3bi0t] {
    background: rgba(0, 168, 132, 0.08);
    transform: translateY(-2px);
}

.btn-footer-schedule:active[b-u72zh3bi0t] {
    transform: translateY(0) scale(0.98);
}

.btn-footer-schedule:disabled[b-u72zh3bi0t] {
    border-color: var(--rame-text-muted, #8696a0);
    color: var(--rame-text-muted, #8696a0);
    cursor: not-allowed;
    transform: none;
}

.btn-footer-schedule:disabled:hover[b-u72zh3bi0t] {
    background: transparent;
    transform: none;
}

.btn-footer-send[b-u72zh3bi0t] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    background: linear-gradient(135deg, var(--rame-accent, #00a884) 0%, var(--rame-accent-hover, #008f72) 100%);
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
    box-shadow: 0 4px 12px rgba(0, 168, 132, 0.3);
    font-family: inherit;
}

.btn-footer-send:hover[b-u72zh3bi0t] {
    background: linear-gradient(135deg, var(--rame-accent-hover, #008f72) 0%, var(--rame-accent-dark, #007a60) 100%);
    box-shadow: 0 6px 20px rgba(0, 168, 132, 0.4);
    transform: translateY(-2px);
}

.btn-footer-send:active[b-u72zh3bi0t] {
    transform: translateY(0) scale(0.98);
}

.btn-footer-send:disabled[b-u72zh3bi0t] {
    background: var(--rame-text-muted, #8696a0);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn-footer-send:disabled:hover[b-u72zh3bi0t] {
    transform: none;
}

/* ========== RESPONSIVE DESIGN ========== */

@media (max-width: 768px) {
    .template-modal-container[b-u72zh3bi0t] {
        max-width: 95vw;
        max-height: 90vh;
    }

    .template-modal-header[b-u72zh3bi0t],
    .template-modal-content[b-u72zh3bi0t],
    .template-modal-footer[b-u72zh3bi0t] {
        padding-left: 20px;
        padding-right: 20px;
    }

    .templates-grid[b-u72zh3bi0t] {
        grid-template-columns: 1fr;
    }

    .modal-title[b-u72zh3bi0t] {
        font-size: 18px;
    }

    .modal-subtitle[b-u72zh3bi0t] {
        font-size: 12px;
    }

    .footer-info[b-u72zh3bi0t] {
        font-size: 11px;
    }

    .template-modal-footer[b-u72zh3bi0t] {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .footer-actions[b-u72zh3bi0t] {
        width: 100%;
    }

    .btn-footer-cancel[b-u72zh3bi0t],
    .btn-footer-schedule[b-u72zh3bi0t],
    .btn-footer-send[b-u72zh3bi0t] {
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .header-title-section[b-u72zh3bi0t] {
        gap: 12px;
    }

    .header-icon[b-u72zh3bi0t] {
        width: 40px;
        height: 40px;
    }

    .header-icon svg[b-u72zh3bi0t] {
        width: 20px;
        height: 20px;
    }

    .modal-title[b-u72zh3bi0t] {
        font-size: 16px;
    }

    .template-modal-content[b-u72zh3bi0t] {
        padding: 16px 20px;
    }

    .template-details-panel[b-u72zh3bi0t] {
        padding: 16px;
    }
}

/* ========== ACCESSIBILITY ========== */

.btn-close-modal:focus-visible[b-u72zh3bi0t],
.btn-clear-search:focus-visible[b-u72zh3bi0t],
.btn-deselect:focus-visible[b-u72zh3bi0t],
.btn-footer-cancel:focus-visible[b-u72zh3bi0t],
.btn-footer-send:focus-visible[b-u72zh3bi0t] {
    outline: 2px solid var(--rame-accent, #00a884);
    outline-offset: 2px;
}

.search-input:focus-visible[b-u72zh3bi0t],
.variable-input:focus-visible[b-u72zh3bi0t] {
    outline: none;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .template-modal-overlay[b-u72zh3bi0t],
    .template-modal-container[b-u72zh3bi0t],
    .template-card[b-u72zh3bi0t],
    .template-details-panel[b-u72zh3bi0t],
    .selected-badge[b-u72zh3bi0t],
    .loading-spinner[b-u72zh3bi0t],
    .btn-close-modal:hover[b-u72zh3bi0t],
    .btn-deselect:hover[b-u72zh3bi0t],
    .btn-clear-search:hover[b-u72zh3bi0t],
    .btn-footer-send:hover[b-u72zh3bi0t] {
        animation: none;
        transform: none !important;
        transition: none;
    }
}

/* ========== DARK MODE OVERRIDES ========== */

:global([data-rame-theme="dark"]) .template-card.selected[b-u72zh3bi0t] {
    background: linear-gradient(135deg, var(--rame-success-light, #1a3d2a) 0%, var(--rame-success-lighter, #1a3025) 100%);
    border-color: var(--rame-accent, #00c9a7);
}

:global([data-rame-theme="dark"]) .template-category-badge[b-u72zh3bi0t] {
    background: rgba(255, 255, 255, 0.1);
    color: var(--rame-text-secondary, #c8c8c8);
}

:global([data-rame-theme="dark"]) .template-card.selected .template-category-badge[b-u72zh3bi0t] {
    background: rgba(0, 201, 167, 0.25);
    color: var(--rame-accent, #00c9a7);
}

:global([data-rame-theme="dark"]) .header-icon[b-u72zh3bi0t] {
    background: linear-gradient(135deg, var(--rame-success-light, #1a3d2a) 0%, var(--rame-success-lighter, #1a3025) 100%);
}

:global([data-rame-theme="dark"]) .template-details-panel[b-u72zh3bi0t] {
    background: linear-gradient(135deg, var(--rame-bg-secondary, #282828) 0%, var(--rame-bg-primary, #1e1e1e) 100%);
    border-color: var(--rame-accent, #00c9a7);
}

:global([data-rame-theme="dark"]) .preview-section[b-u72zh3bi0t] {
    background: var(--rame-bg-tertiary, #333333);
}

:global([data-rame-theme="dark"]) .preview-message[b-u72zh3bi0t] {
    background: var(--rame-message-sent-bg, #005c4b);
}

:global([data-rame-theme="dark"]) .template-card[b-u72zh3bi0t]::before {
    background: linear-gradient(135deg, transparent 0%, rgba(0, 201, 167, 0.1) 100%);
}
/* _content/Rame.Blazor.Server/Components/DesignSystem/RameAvatar.razor.rz.scp.css */
/* RameAvatar - Scoped styles using design tokens */

.rame-avatar[b-snsi06ujmy] {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rame-radius-full, 50%);
    flex-shrink: 0;
    background: var(--rame-avatar-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
}

/* ========== SIZE VARIANTS ========== */

.rame-avatar-sm[b-snsi06ujmy] {
    width: var(--rame-avatar-sm, 32px);
    height: var(--rame-avatar-sm, 32px);
}

.rame-avatar-md[b-snsi06ujmy] {
    width: var(--rame-avatar-md, 40px);
    height: var(--rame-avatar-md, 40px);
}

.rame-avatar-lg[b-snsi06ujmy] {
    width: var(--rame-avatar-lg, 48px);
    height: var(--rame-avatar-lg, 48px);
}

.rame-avatar-xl[b-snsi06ujmy] {
    width: 64px;
    height: 64px;
}

/* ========== INITIALS ========== */

.rame-avatar-initials[b-snsi06ujmy] {
    color: white;
    font-weight: var(--rame-font-bold, 700);
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    line-height: 1;
    user-select: none;
}

.rame-avatar-sm .rame-avatar-initials[b-snsi06ujmy] {
    font-size: var(--rame-text-xs, 11px);
}

.rame-avatar-md .rame-avatar-initials[b-snsi06ujmy] {
    font-size: var(--rame-text-sm, 13px);
}

.rame-avatar-lg .rame-avatar-initials[b-snsi06ujmy] {
    font-size: var(--rame-text-md, 14px);
}

.rame-avatar-xl .rame-avatar-initials[b-snsi06ujmy] {
    font-size: var(--rame-text-xl, 18px);
}

/* ========== IMAGE ========== */

.rame-avatar-image[b-snsi06ujmy] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ========== STATUS INDICATOR ========== */

.rame-avatar-status[b-snsi06ujmy] {
    position: absolute;
    border: 2px solid var(--rame-bg-primary, #ffffff);
    border-radius: var(--rame-radius-full, 50%);
}

.rame-avatar-sm .rame-avatar-status[b-snsi06ujmy] {
    width: 8px;
    height: 8px;
    bottom: 0;
    right: 0;
}

.rame-avatar-md .rame-avatar-status[b-snsi06ujmy] {
    width: 10px;
    height: 10px;
    bottom: 0;
    right: 0;
}

.rame-avatar-lg .rame-avatar-status[b-snsi06ujmy],
.rame-avatar-xl .rame-avatar-status[b-snsi06ujmy] {
    width: 12px;
    height: 12px;
    bottom: 2px;
    right: 2px;
}

.status-online[b-snsi06ujmy] {
    background-color: var(--rame-status-online, #42b72a);
}

.status-away[b-snsi06ujmy] {
    background-color: var(--rame-warning, #ff9800);
}

.status-busy[b-snsi06ujmy] {
    background-color: var(--rame-error, #ef5350);
}

.status-offline[b-snsi06ujmy] {
    background-color: var(--rame-text-tertiary, #8a8d91);
}

/* ========== ACCESSIBILITY ========== */

@media (prefers-reduced-motion: reduce) {
    .rame-avatar[b-snsi06ujmy] {
        transition: none;
    }
}
/* _content/Rame.Blazor.Server/Components/DesignSystem/RameBadge.razor.rz.scp.css */
/* RameBadge - Scoped styles using design tokens */

.rame-badge[b-v3hk0iabii] {
    display: inline-flex;
    align-items: center;
    gap: var(--rame-space-1, 4px);
    font-weight: var(--rame-font-semibold, 600);
    white-space: nowrap;
    border-radius: var(--rame-radius-pill, 24px);
    transition: var(--rame-transition-fast, 0.15s ease);
}

/* ========== SIZE VARIANTS ========== */

.rame-badge-sm[b-v3hk0iabii] {
    padding: 2px 6px;
    font-size: var(--rame-text-xs, 10px);
}

.rame-badge-md[b-v3hk0iabii] {
    padding: 3px 8px;
    font-size: var(--rame-text-sm, 11px);
}

.rame-badge-lg[b-v3hk0iabii] {
    padding: 4px 12px;
    font-size: var(--rame-text-base, 13px);
}

/* ========== COLOR VARIANTS ========== */

.rame-badge-default[b-v3hk0iabii] {
    background: var(--rame-bg-tertiary, #f0f2f5);
    color: var(--rame-text-secondary, #65676b);
}

.rame-badge-primary[b-v3hk0iabii] {
    background: var(--rame-primary-light, #e7f3ff);
    color: var(--rame-primary, #0084ff);
}

.rame-badge-success[b-v3hk0iabii] {
    background: var(--rame-success-lighter, #e8f5e9);
    color: var(--rame-success, #25d366);
}

.rame-badge-warning[b-v3hk0iabii] {
    background: var(--rame-warning-light, #fff3e0);
    color: var(--rame-warning-text, #e65100);
}

.rame-badge-danger[b-v3hk0iabii] {
    background: var(--rame-error-light, #ffebee);
    color: var(--rame-error, #ef5350);
}

.rame-badge-info[b-v3hk0iabii] {
    background: var(--rame-info-light, #f0f9ff);
    color: var(--rame-info-text, #0c4a6e);
}

.rame-badge-custom[b-v3hk0iabii] {
    /* Custom colors applied via inline style */
}

/* ========== ICON ========== */

.rame-badge-icon[b-v3hk0iabii] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ========== HOVER EFFECTS ========== */

.rame-badge:hover[b-v3hk0iabii] {
    box-shadow: var(--rame-shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.05));
}

/* ========== ACCESSIBILITY ========== */

@media (prefers-reduced-motion: reduce) {
    .rame-badge[b-v3hk0iabii] {
        transition: none;
    }
}
/* _content/Rame.Blazor.Server/Components/DesignSystem/RameButton.razor.rz.scp.css */
/* RameButton - Scoped styles using design tokens */

.rame-button[b-owithjdjet] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rame-space-2, 8px);
    border: none;
    border-radius: var(--rame-radius-lg, 8px);
    font-family: var(--rame-font-family, inherit);
    font-weight: var(--rame-font-semibold, 600);
    cursor: pointer;
    transition: var(--rame-transition-spring, 0.3s cubic-bezier(0.22, 0.61, 0.36, 1));
    outline: none;
    text-decoration: none;
    white-space: nowrap;
}

.rame-button:focus-visible[b-owithjdjet] {
    outline: 2px solid var(--rame-primary, #0084ff);
    outline-offset: 2px;
}

.rame-button:disabled[b-owithjdjet] {
    cursor: not-allowed;
    opacity: 0.5;
}

/* ========== SIZE VARIANTS ========== */

.rame-button-sm[b-owithjdjet] {
    height: var(--rame-button-sm, 32px);
    padding: 0 var(--rame-space-3, 12px);
    font-size: var(--rame-text-sm, 12px);
}

.rame-button-md[b-owithjdjet] {
    height: var(--rame-button-md, 40px);
    padding: 0 var(--rame-space-4, 16px);
    font-size: var(--rame-text-md, 14px);
}

.rame-button-lg[b-owithjdjet] {
    height: var(--rame-button-lg, 44px);
    padding: 0 var(--rame-space-5, 20px);
    font-size: var(--rame-text-lg, 15px);
}

/* Icon-only buttons */
.rame-button.icon-only[b-owithjdjet] {
    padding: 0;
}

.rame-button.icon-only.rame-button-sm[b-owithjdjet] {
    width: var(--rame-button-sm, 32px);
}

.rame-button.icon-only.rame-button-md[b-owithjdjet] {
    width: var(--rame-button-md, 40px);
}

.rame-button.icon-only.rame-button-lg[b-owithjdjet] {
    width: var(--rame-button-lg, 44px);
}

/* Circular icon buttons */
.rame-button.icon-only[b-owithjdjet] {
    border-radius: var(--rame-radius-full, 50%);
}

/* ========== COLOR VARIANTS ========== */

/* Primary */
.rame-button-primary[b-owithjdjet] {
    background: linear-gradient(135deg, var(--rame-success, #25d366) 0%, var(--rame-success-hover, #20ba5a) 100%);
    color: white;
    box-shadow: var(--rame-shadow-success, 0 2px 8px rgba(37, 211, 102, 0.35));
}

.rame-button-primary:hover:not(:disabled)[b-owithjdjet] {
    background: linear-gradient(135deg, var(--rame-success-hover, #20ba5a) 0%, var(--rame-success-dark, #1ea952) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
}

.rame-button-primary:active:not(:disabled)[b-owithjdjet] {
    transform: translateY(0);
    box-shadow: var(--rame-shadow-success, 0 2px 8px rgba(37, 211, 102, 0.35));
}

/* Secondary */
.rame-button-secondary[b-owithjdjet] {
    background: var(--rame-bg-primary, #ffffff);
    color: var(--rame-text-secondary, #65676b);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    box-shadow: var(--rame-shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.05));
}

.rame-button-secondary:hover:not(:disabled)[b-owithjdjet] {
    background: var(--rame-bg-secondary, #f7f8fa);
    border-color: var(--rame-border-dark, #d0d3d9);
    color: var(--rame-text-primary, #1c1e21);
}

/* Success */
.rame-button-success[b-owithjdjet] {
    background: linear-gradient(135deg, var(--rame-success, #25d366) 0%, var(--rame-success-hover, #20ba5a) 100%);
    color: white;
    box-shadow: var(--rame-shadow-success, 0 2px 8px rgba(37, 211, 102, 0.35));
}

.rame-button-success:hover:not(:disabled)[b-owithjdjet] {
    background: linear-gradient(135deg, var(--rame-success-hover, #20ba5a) 0%, var(--rame-success-dark, #1ea952) 100%);
    transform: translateY(-1px);
}

/* Danger */
.rame-button-danger[b-owithjdjet] {
    background: var(--rame-error, #ef5350);
    color: white;
    box-shadow: var(--rame-shadow-error, 0 2px 8px rgba(239, 83, 80, 0.35));
}

.rame-button-danger:hover:not(:disabled)[b-owithjdjet] {
    background: #e53935;
    transform: translateY(-1px);
}

/* Ghost */
.rame-button-ghost[b-owithjdjet] {
    background: transparent;
    color: var(--rame-text-secondary, #65676b);
}

.rame-button-ghost:hover:not(:disabled)[b-owithjdjet] {
    background: var(--rame-bg-hover, #f0f2f5);
    color: var(--rame-text-primary, #1c1e21);
}

/* Link */
.rame-button-link[b-owithjdjet] {
    background: transparent;
    color: var(--rame-primary, #0084ff);
    padding: 0;
    height: auto;
}

.rame-button-link:hover:not(:disabled)[b-owithjdjet] {
    text-decoration: underline;
}

/* ========== LOADING STATE ========== */

.rame-button.loading[b-owithjdjet] {
    pointer-events: none;
}

.rame-button-spinner[b-owithjdjet] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: rame-spin-b-owithjdjet 0.8s linear infinite;
}

@keyframes rame-spin-b-owithjdjet {
    to {
        transform: rotate(360deg);
    }
}

/* ========== ICON & TEXT ========== */

.rame-button-icon[b-owithjdjet] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rame-button-text[b-owithjdjet] {
    flex: 1;
}

/* ========== ACCESSIBILITY ========== */

@media (prefers-reduced-motion: reduce) {
    .rame-button[b-owithjdjet] {
        transition: none;
    }

    .rame-button-spinner[b-owithjdjet] {
        animation: none;
    }

    .rame-button:hover:not(:disabled)[b-owithjdjet] {
        transform: none;
    }
}
/* _content/Rame.Blazor.Server/Components/DesignSystem/RameCard.razor.rz.scp.css */
/* RameCard - Scoped styles using design tokens */

.rame-card[b-dryvh3ob7a] {
    background: var(--rame-bg-primary, #ffffff);
    border-radius: var(--rame-radius-xl, 10px);
    overflow: hidden;
    transition: var(--rame-transition-spring, 0.3s cubic-bezier(0.22, 0.61, 0.36, 1));
}

/* ========== VARIANTS ========== */

.rame-card-default[b-dryvh3ob7a] {
    border: 1px solid var(--rame-border-light, #e4e6eb);
    box-shadow: var(--rame-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}

.rame-card-elevated[b-dryvh3ob7a] {
    border: none;
    box-shadow: var(--rame-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.12));
}

.rame-card-outlined[b-dryvh3ob7a] {
    border: 1px solid var(--rame-border-light, #e4e6eb);
    box-shadow: none;
}

.rame-card-flat[b-dryvh3ob7a] {
    border: none;
    box-shadow: none;
    background: var(--rame-bg-secondary, #f7f8fa);
}

/* ========== SELECTABLE STATE ========== */

.rame-card.selectable[b-dryvh3ob7a] {
    cursor: pointer;
}

.rame-card.selectable:hover[b-dryvh3ob7a] {
    border-color: var(--rame-border-dark, #d0d3d9);
    box-shadow: var(--rame-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.12));
    transform: translateY(-2px);
}

.rame-card.selectable:active[b-dryvh3ob7a] {
    transform: translateY(0) scale(0.98);
}

.rame-card.selected[b-dryvh3ob7a] {
    border-color: var(--rame-primary, #0084ff);
    box-shadow: 0 0 0 3px rgba(0, 132, 255, 0.1), var(--rame-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.08));
}

/* ========== COLOR BAR ========== */

.rame-card-color-bar[b-dryvh3ob7a] {
    height: 4px;
    width: 100%;
}

/* ========== HEADER ========== */

.rame-card-header[b-dryvh3ob7a] {
    padding: var(--rame-space-3, 12px) var(--rame-space-4, 16px);
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
    background: var(--rame-bg-secondary, #f7f8fa);
}

/* ========== CONTENT ========== */

.rame-card-content[b-dryvh3ob7a] {
    padding: var(--rame-space-4, 16px);
}

/* ========== FOOTER ========== */

.rame-card-footer[b-dryvh3ob7a] {
    padding: var(--rame-space-3, 12px) var(--rame-space-4, 16px);
    border-top: 1px solid var(--rame-border-light, #e4e6eb);
    background: var(--rame-bg-secondary, #f7f8fa);
}

/* ========== ACCESSIBILITY ========== */

.rame-card:focus[b-dryvh3ob7a] {
    outline: 2px solid var(--rame-primary, #0084ff);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .rame-card[b-dryvh3ob7a] {
        transition: none;
    }

    .rame-card.selectable:hover[b-dryvh3ob7a],
    .rame-card.selectable:active[b-dryvh3ob7a] {
        transform: none;
    }
}
/* _content/Rame.Blazor.Server/Components/EmailTemplates/EmailTemplateDesignerRoot.razor.rz.scp.css */
/* ==========================================================================
   EmailTemplateDesignerRoot — isolated styles
   Mirrors design-prototypes/email-designer/styles.css with Blazor CSS isolation.
   ========================================================================== */

.email-designer[b-andzqtrja0] {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    min-height: 0;
    position: relative;
}

/* =================== Saving overlay =================== */

.saving-overlay[b-andzqtrja0] {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 50;
    font-size: var(--rame-text-sm);
    color: var(--rame-text-secondary);
}

:global([data-rame-theme="dark"]) .saving-overlay[b-andzqtrja0] {
    background: rgba(30, 30, 40, 0.7);
}

.saving-spinner[b-andzqtrja0] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--rame-border-light);
    border-top-color: var(--rame-primary);
    border-radius: 50%;
    animation: spin-b-andzqtrja0 0.8s linear infinite;
}

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

/* =================== Top bar =================== */

.email-designer__topbar[b-andzqtrja0] {
    display: flex;
    align-items: center;
    gap: var(--rame-space-4);
    padding: 0 var(--rame-space-5);
    height: 60px;
    border-bottom: 1px solid var(--rame-border-light);
    background: var(--rame-bg-primary);
    position: relative;
    z-index: 10;
}

.email-designer__back[b-andzqtrja0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: var(--rame-radius-md);
    color: var(--rame-text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.email-designer__back:hover[b-andzqtrja0] {
    background: var(--rame-bg-hover);
    color: var(--rame-text-primary);
}

.email-designer__back:focus-visible[b-andzqtrja0] {
    outline: none;
    box-shadow: var(--rame-shadow-focus-primary);
}

.email-designer__back svg[b-andzqtrja0] {
    width: 18px;
    height: 18px;
}

.email-designer__breadcrumb[b-andzqtrja0] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.email-designer__breadcrumb-eyebrow[b-andzqtrja0] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rame-text-tertiary);
    flex-shrink: 0;
}

.email-designer__breadcrumb-sep[b-andzqtrja0] {
    color: var(--rame-border-medium);
    font-weight: 300;
    flex-shrink: 0;
}

.email-designer__title[b-andzqtrja0] {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--rame-text-primary);
    background: transparent;
    border: none;
    outline: none;
    padding: 2px 6px;
    margin: -2px -6px;
    border-radius: var(--rame-radius-sm);
    min-width: 120px;
    max-width: 380px;
    transition: background 0.12s ease;
}

.email-designer__title:hover[b-andzqtrja0],
.email-designer__title:focus[b-andzqtrja0] {
    background: var(--rame-bg-tertiary);
}

.email-designer__topbar-spacer[b-andzqtrja0] {
    flex: 1;
}

.unsaved-badge[b-andzqtrja0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--rame-warning) 30%, transparent);
    border-radius: 6px;
    background: var(--rame-warning-light);
    color: var(--rame-warning-text);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    flex-shrink: 0;
    white-space: nowrap;
}

.unsaved-badge[b-andzqtrja0]::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--rame-warning);
    border-radius: 50%;
    flex-shrink: 0;
}

.email-designer__save-btn[b-andzqtrja0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    border-radius: var(--rame-radius-md);
    background: var(--rame-bg-tertiary);
    color: var(--rame-text-secondary);
    border: 1px solid var(--rame-border-light);
    font-size: var(--rame-text-sm);
    font-weight: 600;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.email-designer__save-btn.active[b-andzqtrja0] {
    background: var(--rame-text-primary);
    color: var(--rame-bg-primary);
    border-color: var(--rame-text-primary);
}

.email-designer__save-btn.active:hover[b-andzqtrja0] {
    transform: translateY(-1px);
    box-shadow: var(--rame-shadow-md);
}

.email-designer__save-btn:disabled[b-andzqtrja0] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.email-designer__save-btn svg[b-andzqtrja0] {
    width: 14px;
    height: 14px;
}

/* Inline toasts */
.inline-toast[b-andzqtrja0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--rame-radius-md);
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
    max-width: 280px;
}

.inline-toast--error[b-andzqtrja0] {
    background: var(--rame-error-light);
    color: var(--rame-error-text);
}

.inline-toast--success[b-andzqtrja0] {
    background: var(--rame-success-light);
    color: var(--rame-success-dark);
}

.inline-toast--warning[b-andzqtrja0] {
    background: var(--rame-warning-light);
    color: var(--rame-warning-text);
    cursor: help;
    min-width: 32px;
    justify-content: center;
}

/* =================== Main grid =================== */

.email-designer__main[b-andzqtrja0] {
    display: grid;
    grid-template-columns: 300px 1fr 340px;
    min-height: 0;
    overflow: hidden;
}

.pane[b-andzqtrja0] {
    min-height: 0;
    overflow-y: auto;
    background: var(--rame-bg-primary);
}

.pane--settings[b-andzqtrja0] {
    border-right: 1px solid var(--rame-border-light);
    background: var(--rame-bg-secondary);
    padding: var(--rame-space-5) 0;
    overflow-y: auto;
}

.pane--editor[b-andzqtrja0] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--rame-bg-primary);
}

.pane--palette[b-andzqtrja0] {
    border-left: 1px solid var(--rame-border-light);
    background: var(--rame-bg-primary);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.pane--palette.palette--highlighted[b-andzqtrja0] {
    box-shadow: inset 0 0 0 2px var(--rame-primary);
}

/* =================== Settings pane =================== */

.settings-section[b-andzqtrja0] {
    padding: 0 var(--rame-space-5) var(--rame-space-5);
    margin-bottom: var(--rame-space-2);
    border-bottom: 1px solid var(--rame-border-light);
}

.settings-section:last-child[b-andzqtrja0] {
    border-bottom: none;
}

.settings-section > header[b-andzqtrja0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--rame-space-4) 0 var(--rame-space-3);
    cursor: pointer;
    user-select: none;
}

.settings-section > header .eyebrow[b-andzqtrja0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rame-text-secondary);
}

.settings-section > header .count-chip[b-andzqtrja0] {
    font-family: monospace;
    font-size: 10px;
    font-weight: 500;
    color: var(--rame-text-tertiary);
    background: var(--rame-bg-tertiary);
    padding: 1px 6px;
    border-radius: 3px;
}

.settings-section > header .caret[b-andzqtrja0] {
    color: var(--rame-text-tertiary);
    transition: transform 0.15s ease;
}

.settings-section > header .caret svg[b-andzqtrja0] {
    width: 12px;
    height: 12px;
    display: block;
}

.settings-section.collapsed > header .caret[b-andzqtrja0] {
    transform: rotate(-90deg);
}

.settings-section.collapsed > .settings-section__body[b-andzqtrja0] {
    display: none;
}

.field-group[b-andzqtrja0] {
    display: flex;
    flex-direction: column;
    gap: var(--rame-space-3);
}

.field label[b-andzqtrja0] {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--rame-text-secondary);
    margin-bottom: 4px;
}

.field input[type="text"][b-andzqtrja0],
.field textarea[b-andzqtrja0] {
    width: 100%;
    padding: 8px 10px;
    background: var(--rame-bg-primary);
    border: 1px solid var(--rame-border-light);
    border-radius: var(--rame-radius-md);
    font-size: var(--rame-text-sm);
    color: var(--rame-text-primary);
    font-family: inherit;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    box-sizing: border-box;
}

.field textarea[b-andzqtrja0] {
    resize: vertical;
    min-height: 62px;
    line-height: 1.5;
}

.field input[type="text"]:focus[b-andzqtrja0],
.field textarea:focus[b-andzqtrja0] {
    outline: none;
    border-color: var(--rame-primary);
    box-shadow: var(--rame-shadow-focus-primary);
}

.toggle-row[b-andzqtrja0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 0;
}

.toggle-row .toggle-label[b-andzqtrja0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toggle-row .toggle-label strong[b-andzqtrja0] {
    font-size: var(--rame-text-sm);
    font-weight: 500;
    color: var(--rame-text-primary);
}

.toggle-row .toggle-label span[b-andzqtrja0] {
    font-size: var(--rame-text-xs);
    color: var(--rame-text-tertiary);
}

/* Attachments */
.attachment-list[b-andzqtrja0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.attachment-row[b-andzqtrja0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--rame-bg-primary);
    border: 1px solid var(--rame-border-light);
    border-radius: var(--rame-radius-md);
    transition: border-color 0.12s ease;
}

.attachment-row:hover[b-andzqtrja0] {
    border-color: var(--rame-border-medium);
}

.attachment-icon[b-andzqtrja0] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-family: monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.attachment-icon.pdf[b-andzqtrja0] {
    background: #fbe4e4;
    color: #a8312b;
}

.attachment-icon.doc[b-andzqtrja0] {
    background: #deebfe;
    color: #1458a8;
}

.attachment-icon.img[b-andzqtrja0] {
    background: #e3f5ea;
    color: #16794a;
}

:global([data-rame-theme="dark"]) .attachment-icon.pdf[b-andzqtrja0] { background: #3a1e1e; color: #f07a75; }
:global([data-rame-theme="dark"]) .attachment-icon.doc[b-andzqtrja0] { background: #1b2f4a; color: #87b5f0; }
:global([data-rame-theme="dark"]) .attachment-icon.img[b-andzqtrja0] { background: #183629; color: #7fd6a7; }

.attachment-name[b-andzqtrja0] {
    flex: 1;
    min-width: 0;
}

.attachment-name strong[b-andzqtrja0] {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--rame-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-name span[b-andzqtrja0] {
    font-size: 10px;
    color: var(--rame-text-tertiary);
    font-variant-numeric: tabular-nums;
}

.attachment-remove[b-andzqtrja0] {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: var(--rame-text-tertiary);
    opacity: 0;
    transition: opacity 0.12s, color 0.12s, background 0.12s;
    border: none;
    background: transparent;
    cursor: pointer;
}

.attachment-row:hover .attachment-remove[b-andzqtrja0] {
    opacity: 1;
}

.attachment-remove:hover[b-andzqtrja0] {
    background: var(--rame-error-light);
    color: var(--rame-error);
}

.attachment-remove svg[b-andzqtrja0] {
    width: 13px;
    height: 13px;
}

.dropzone[b-andzqtrja0] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    padding: 14px;
    border: 1.5px dashed var(--rame-border-medium);
    border-radius: var(--rame-radius-md);
    color: var(--rame-text-tertiary);
    font-size: 12px;
    text-align: center;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
    cursor: pointer;
    overflow: hidden;
}

.dropzone:hover[b-andzqtrja0] {
    border-color: var(--rame-primary);
    color: var(--rame-primary);
}

.dropzone svg[b-andzqtrja0] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* The native InputFile fills the dropzone so the entire surface is clickable. */
.dropzone[b-andzqtrja0]  input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.dropzone--busy[b-andzqtrja0] {
    pointer-events: none;
    opacity: 0.7;
    border-style: solid;
    border-color: var(--rame-primary);
    color: var(--rame-primary);
}

.upload-error[b-andzqtrja0] {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: var(--rame-radius-sm);
    background: var(--rame-error-light);
    color: var(--rame-error-text);
    font-size: 11px;
    line-height: 1.4;
}

/* Section hint (small explanatory text inside a collapsible section body) */
.section-hint[b-andzqtrja0] {
    margin: 0 0 var(--rame-space-3);
    font-size: 11px;
    line-height: 1.5;
    color: var(--rame-text-tertiary);
}

/* Variables table */
.var-table[b-andzqtrja0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.var-row[b-andzqtrja0] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--rame-border-light);
    border-radius: var(--rame-radius-md);
    background: var(--rame-bg-primary);
}

.var-row__fields[b-andzqtrja0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.var-row__fields input[b-andzqtrja0] {
    width: 100%;
    padding: 5px 8px;
    font-size: 11px;
    font-family: inherit;
    background: var(--rame-bg-secondary);
    border: 1px solid var(--rame-border-light);
    border-radius: var(--rame-radius-sm);
    color: var(--rame-text-primary);
    box-sizing: border-box;
}

.var-row__fields input:focus[b-andzqtrja0] {
    outline: none;
    border-color: var(--rame-primary);
}

.var-row__remove[b-andzqtrja0] {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--rame-text-tertiary);
    font-size: 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
}

.var-row__remove:hover[b-andzqtrja0] {
    background: var(--rame-error-light);
    color: var(--rame-error);
}

.add-row-btn[b-andzqtrja0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border-radius: var(--rame-radius-md);
    background: var(--rame-bg-primary);
    border: 1px dashed var(--rame-border-medium);
    color: var(--rame-text-secondary);
    font-size: 12px;
    font-weight: 500;
    transition: all 0.12s ease;
    align-self: flex-start;
    margin-top: 4px;
    cursor: pointer;
}

.add-row-btn:hover[b-andzqtrja0] {
    color: var(--rame-primary);
    border-color: var(--rame-primary);
}

/* =================== Editor pane =================== */

.editor-bar[b-andzqtrja0] {
    display: flex;
    align-items: center;
    gap: var(--rame-space-3);
    padding: 12px 24px;
    border-bottom: 1px solid var(--rame-border-light);
    background: var(--rame-bg-primary);
    flex-shrink: 0;
}

.editor-tabs[b-andzqtrja0] {
    display: inline-flex;
    background: var(--rame-bg-tertiary);
    border-radius: var(--rame-radius-md);
    padding: 3px;
    gap: 2px;
}

.editor-tab[b-andzqtrja0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--rame-text-secondary);
    transition: all 0.12s ease;
    border: none;
    background: transparent;
    cursor: pointer;
}

.editor-tab svg[b-andzqtrja0] {
    width: 13px;
    height: 13px;
    opacity: 0.7;
}

.editor-tab.active[b-andzqtrja0] {
    background: var(--rame-bg-primary);
    color: var(--rame-text-primary);
    box-shadow: var(--rame-shadow-xs);
}

.editor-tab.active svg[b-andzqtrja0] {
    opacity: 1;
}

.editor-bar-spacer[b-andzqtrja0] {
    flex: 1;
}

.editor-bar-meta[b-andzqtrja0] {
    font-size: 11px;
    color: var(--rame-text-tertiary);
    font-variant-numeric: tabular-nums;
}

.editor-scroll[b-andzqtrja0] {
    flex: 1;
    overflow-y: auto;
    padding: var(--rame-space-8) clamp(var(--rame-space-8), 6vw, 80px) var(--rame-space-10);
}

/* Subject input */
.subject-line[b-andzqtrja0] {
    display: flex;
    align-items: center;
    gap: var(--rame-space-3);
    padding-bottom: var(--rame-space-4);
    margin-bottom: var(--rame-space-5);
    border-bottom: 1px solid var(--rame-border-light);
}

.subject-line label[b-andzqtrja0] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rame-text-tertiary);
    flex-shrink: 0;
}

.subject-input-wrapper[b-andzqtrja0] {
    flex: 1;
    min-width: 0;
}

.subject-input-field[b-andzqtrja0] {
    width: 100%;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--rame-text-primary);
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    padding: 4px 0;
    min-width: 0;
}

.subject-input-field[b-andzqtrja0]::placeholder {
    color: var(--rame-text-tertiary);
    font-size: 18px;
}

/* DxHtmlEditor wrapper */
.html-editor-wrapper[b-andzqtrja0] {
    min-height: 360px;
    display: flex;
    flex-direction: column;
}

/* DxHtmlEditor overrides via ::deep — targets DevExpress internal classes */
[b-andzqtrja0] .rame-html-editor {
    min-height: 360px;
    border-radius: var(--rame-radius-md);
    border: 1px solid var(--rame-border-light);
    overflow: hidden;
}

[b-andzqtrja0] .rame-html-editor .dx-htmleditor-content,
[b-andzqtrja0] .rame-html-editor .dxbl-html-editor-content {
    min-height: 300px;
    line-height: 1.65;
    background: var(--rame-bg-primary);
    color: var(--rame-text-primary);
}

/* Plain text editor */
.plain-text-editor[b-andzqtrja0] {
    width: 100%;
    min-height: 320px;
    padding: 16px;
    border: 1px solid var(--rame-border-light);
    border-radius: var(--rame-radius-md);
    background: var(--rame-bg-primary);
    color: var(--rame-text-primary);
    font-family: monospace;
    font-size: 13px;
    line-height: 1.6;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.12s, box-shadow 0.12s;
}

.plain-text-editor:focus[b-andzqtrja0] {
    outline: none;
    border-color: var(--rame-primary);
    box-shadow: var(--rame-shadow-focus-primary);
}

/* Status strip */
.doc-status[b-andzqtrja0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--rame-space-8);
    padding-top: var(--rame-space-4);
    border-top: 1px solid var(--rame-border-light);
    font-size: 11px;
    color: var(--rame-text-tertiary);
}

.doc-status .status-dot[b-andzqtrja0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.doc-status .status-dot[b-andzqtrja0]::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rame-success);
}

.doc-status .status-error[b-andzqtrja0] {
    color: var(--rame-error);
    font-weight: 500;
}

/* =================== Palette pane =================== */

.palette-search[b-andzqtrja0] {
    padding: var(--rame-space-5) var(--rame-space-5) var(--rame-space-3);
    border-bottom: 1px solid var(--rame-border-light);
    flex-shrink: 0;
}

.search-shell[b-andzqtrja0] {
    display: flex;
    align-items: center;
    background: var(--rame-bg-input);
    border-radius: var(--rame-radius-md);
    padding: 0 10px;
    height: 34px;
    gap: 8px;
    transition: background 0.12s ease, box-shadow 0.12s ease;
}

.search-shell:focus-within[b-andzqtrja0] {
    background: var(--rame-bg-primary);
    box-shadow: inset 0 0 0 1px var(--rame-primary), var(--rame-shadow-focus-primary);
}

.search-shell svg[b-andzqtrja0] {
    width: 14px;
    height: 14px;
    color: var(--rame-text-tertiary);
    flex-shrink: 0;
}

.search-shell input[b-andzqtrja0] {
    flex: 1;
    font-size: 13px;
    background: transparent;
    color: var(--rame-text-primary);
    border: none;
    outline: none;
    font-family: inherit;
}

.search-shell input[b-andzqtrja0]::placeholder {
    color: var(--rame-text-tertiary);
}

.palette-body[b-andzqtrja0] {
    flex: 1;
    overflow-y: auto;
    padding: var(--rame-space-2) 0 0;
    min-height: 0;
}

.palette-group[b-andzqtrja0] {
    border-bottom: 1px solid var(--rame-border-light);
    padding: var(--rame-space-2) 0 var(--rame-space-3);
}

.palette-group > header[b-andzqtrja0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px var(--rame-space-5);
    cursor: pointer;
    user-select: none;
}

.palette-group > header .caret[b-andzqtrja0] {
    margin-left: auto;
    color: var(--rame-text-tertiary);
    transition: transform 0.15s ease;
}

.palette-group > header .caret svg[b-andzqtrja0] {
    width: 10px;
    height: 10px;
    display: block;
}

.palette-group.collapsed > header .caret[b-andzqtrja0] {
    transform: rotate(-90deg);
}

.palette-group.collapsed > .palette-items[b-andzqtrja0] {
    display: none;
}

.palette-group > header .group-name[b-andzqtrja0] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rame-text-primary);
}

.palette-group > header .group-count[b-andzqtrja0] {
    font-family: monospace;
    font-size: 10px;
    color: var(--rame-text-tertiary);
}

.palette-items[b-andzqtrja0] {
    padding: 2px 0;
}

.palette-item[b-andzqtrja0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px var(--rame-space-5);
    position: relative;
    transition: background 0.1s ease;
}

.palette-item:hover[b-andzqtrja0] {
    background: var(--rame-bg-secondary);
}

.palette-item .path[b-andzqtrja0] {
    font-family: monospace;
    font-size: 12px;
    font-weight: 500;
    color: var(--rame-text-primary);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.palette-item .hint[b-andzqtrja0] {
    font-size: 10px;
    color: var(--rame-text-tertiary);
    padding-right: 8px;
    white-space: nowrap;
    transition: opacity 0.12s ease;
}

.palette-item .insert-btn[b-andzqtrja0] {
    position: absolute;
    right: 10px;
    height: 22px;
    padding: 0 10px;
    border-radius: 4px;
    background: var(--rame-primary);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.palette-item:hover .insert-btn[b-andzqtrja0] {
    opacity: 1;
    transform: translateX(0);
}

.palette-item:hover .hint[b-andzqtrja0] {
    opacity: 0;
}

/* Entity color dots */
.entity-dot[b-andzqtrja0] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.entity-dot[data-entity="lead"][b-andzqtrja0] { background: var(--rame-primary); }
.entity-dot[data-entity="opportunity"][b-andzqtrja0] { background: var(--rame-success); }
.entity-dot[data-entity="conversation"][b-andzqtrja0] { background: var(--rame-warning); }
.entity-dot[data-entity="seller"][b-andzqtrja0] { background: #8b5cf6; }
.entity-dot[data-entity="applicationuser"][b-andzqtrja0] { background: #8b5cf6; }
.entity-dot[data-entity="message"][b-andzqtrja0] { background: var(--rame-accent); }

/* Live preview */
.live-preview[b-andzqtrja0] {
    border-top: 1px solid var(--rame-border-light);
    background: var(--rame-bg-secondary);
    padding: var(--rame-space-4) var(--rame-space-5) var(--rame-space-5);
    flex-shrink: 0;
}

.live-preview header[b-andzqtrja0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--rame-space-3);
}

.eyebrow[b-andzqtrja0] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rame-text-tertiary);
}

.sample-chip[b-andzqtrja0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    background: var(--rame-bg-primary);
    border: 1px solid var(--rame-border-light);
    border-radius: var(--rame-radius-full);
    font-size: 11px;
    color: var(--rame-text-secondary);
}

.sample-chip[b-andzqtrja0]::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ff9f7e, #b14a2e);
}

.preview-card[b-andzqtrja0] {
    background: var(--rame-bg-primary);
    border: 1px solid var(--rame-border-light);
    border-radius: var(--rame-radius-lg);
    overflow: hidden;
    box-shadow: var(--rame-shadow-sm);
}

.preview-card .preview-subject[b-andzqtrja0] {
    padding: var(--rame-space-3) var(--rame-space-4);
    border-bottom: 1px solid var(--rame-border-light);
    background: var(--rame-bg-secondary);
}

.preview-card .preview-subject .eyebrow[b-andzqtrja0] {
    display: block;
    margin-bottom: 3px;
}

.preview-card .preview-subject strong[b-andzqtrja0] {
    font-size: 13px;
    font-weight: 500;
    color: var(--rame-text-primary);
    line-height: 1.35;
    display: block;
}

.preview-card .preview-body[b-andzqtrja0] {
    padding: var(--rame-space-3) var(--rame-space-4);
    font-size: 11px;
    line-height: 1.55;
    color: var(--rame-text-secondary);
    max-height: 140px;
    overflow: hidden;
}

.preview-card .preview-body p[b-andzqtrja0] {
    margin: 0 0 6px;
}

/* =================== Inline variable popover =================== */

.var-popover-host[b-andzqtrja0] {
    position: relative;
    flex-shrink: 0;
}

.insert-var-btn[b-andzqtrja0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--rame-border-light);
    border-radius: 6px;
    background: var(--rame-bg-primary);
    color: var(--rame-primary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    font-family: inherit;
    white-space: nowrap;
}

.insert-var-btn:hover[b-andzqtrja0] {
    background: var(--rame-primary);
    color: #fff;
    border-color: var(--rame-primary);
}

.insert-var-btn svg[b-andzqtrja0] {
    width: 12px;
    height: 12px;
}

.var-popup[b-andzqtrja0] {
    position: absolute;
    top: calc(100% + 6px);
    z-index: 30;
    width: 320px;
    max-height: 320px;
    background: var(--rame-bg-primary);
    border: 1px solid var(--rame-border-light);
    border-radius: var(--rame-radius-md);
    box-shadow: var(--rame-shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.var-popup--right[b-andzqtrja0] {
    right: 0;
    left: auto;
}

.var-search[b-andzqtrja0] {
    width: 100%;
    padding: 9px 12px;
    border: none;
    border-bottom: 1px solid var(--rame-border-light);
    font-size: 13px;
    outline: none;
    background: var(--rame-bg-secondary);
    color: var(--rame-text-primary);
    font-family: inherit;
    box-sizing: border-box;
}

.var-search:focus[b-andzqtrja0] {
    background: var(--rame-bg-primary);
}

.var-list[b-andzqtrja0] {
    flex: 1;
    overflow-y: auto;
    max-height: 260px;
}

.var-item[b-andzqtrja0] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rame-border-light);
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background 0.1s;
    font-family: inherit;
}

.var-item:hover[b-andzqtrja0] {
    background: var(--rame-bg-secondary);
}

.var-item:last-child[b-andzqtrja0] {
    border-bottom: none;
}

.var-category[b-andzqtrja0] {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--rame-text-tertiary);
    font-weight: 600;
    letter-spacing: 0.06em;
}

.var-name[b-andzqtrja0] {
    font-family: monospace;
    font-size: 12px;
    color: var(--rame-text-primary);
}

.var-empty[b-andzqtrja0] {
    padding: 14px 12px;
    font-size: 12px;
    color: var(--rame-text-tertiary);
    text-align: center;
    font-style: italic;
}

/* =================== Validation banner =================== */

.validation-banner[b-andzqtrja0] {
    margin-top: var(--rame-space-5);
    padding: var(--rame-space-4) var(--rame-space-5);
    border: 1px solid color-mix(in srgb, var(--rame-error) 35%, transparent);
    background: var(--rame-error-light);
    color: var(--rame-error-text);
    border-radius: var(--rame-radius-md);
}

.validation-banner strong[b-andzqtrja0] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

.validation-banner p[b-andzqtrja0] {
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--rame-error-text);
}

.validation-banner ul[b-andzqtrja0] {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.55;
}

/* =================== Full preview tab =================== */

.full-preview[b-andzqtrja0] {
    border: 1px solid var(--rame-border-light);
    border-radius: var(--rame-radius-md);
    background: var(--rame-bg-primary);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 360px;
    box-shadow: var(--rame-shadow-sm);
}

.full-preview__meta[b-andzqtrja0] {
    padding: var(--rame-space-4) var(--rame-space-5);
    background: var(--rame-bg-secondary);
    border-bottom: 1px solid var(--rame-border-light);
}

.full-preview__meta .eyebrow[b-andzqtrja0] {
    display: block;
    margin-bottom: 4px;
}

.full-preview__meta strong[b-andzqtrja0] {
    font-size: 16px;
    font-weight: 500;
    color: var(--rame-text-primary);
    line-height: 1.35;
    display: block;
}

.full-preview__frame[b-andzqtrja0] {
    flex: 1;
    width: 100%;
    min-height: 360px;
    border: none;
    background: #ffffff;
}

.full-preview__empty[b-andzqtrja0] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--rame-space-6);
    color: var(--rame-text-tertiary);
    font-style: italic;
    font-size: 13px;
}

.full-preview__footer[b-andzqtrja0] {
    padding: 8px var(--rame-space-5);
    background: var(--rame-bg-secondary);
    border-top: 1px solid var(--rame-border-light);
    font-size: 11px;
    color: var(--rame-text-tertiary);
    font-variant-numeric: tabular-nums;
}

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

@media (max-width: 1200px) {
    .email-designer__main[b-andzqtrja0] {
        grid-template-columns: 280px 1fr;
    }

    .pane--palette[b-andzqtrja0] {
        display: none;
    }
}

@media (max-width: 900px) {
    .email-designer__main[b-andzqtrja0] {
        grid-template-columns: 1fr;
    }

    .pane--settings[b-andzqtrja0] {
        display: none;
    }
}
/* _content/Rame.Blazor.Server/Components/Instagram/InstagramCommentDesignerRoot.razor.rz.scp.css */
/* Instagram Comment Designer - Uses Rame Design System */
/* See /css/design-system/_tokens.css for token definitions */

.ig-designer[b-fot6rn37is] {
    --ig-brand: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100vh;
    background: var(--rame-bg-secondary, #f7f8fa);
    font-family: var(--rame-font-family, sans-serif);
    color: var(--rame-text-primary, #1c1e21);
}

.ig-designer--empty[b-fot6rn37is] {
    align-items: center;
    justify-content: center;
    color: var(--rame-text-secondary, #65676b);
}

/* ========== TOP BAR ========== */

.ig-topbar[b-fot6rn37is] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: var(--rame-space-4, 16px);
    padding: var(--rame-space-3, 12px) var(--rame-space-5, 20px);
    background: var(--rame-bg-primary, #ffffff);
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
    box-shadow: var(--rame-shadow-xs, 0 1px 2px rgba(0,0,0,0.05));
}

.ig-iconbtn[b-fot6rn37is] {
    display: inline-flex;
    align-items: center;
    gap: var(--rame-space-1, 4px);
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--rame-text-secondary, #65676b);
    font-size: var(--rame-text-base, 14px);
    font-weight: var(--rame-font-medium, 500);
    padding: var(--rame-space-2, 8px);
    border-radius: var(--rame-radius-md, 8px);
    transition: background 0.15s ease, color 0.15s ease;
}

.ig-iconbtn:hover[b-fot6rn37is] {
    background: var(--rame-bg-hover, #e4e6eb);
    color: var(--rame-text-primary, #1c1e21);
}

.ig-back__chevron[b-fot6rn37is] {
    font-size: 20px;
    line-height: 1;
    margin-top: -2px;
}

.ig-topbar__title[b-fot6rn37is] {
    display: flex;
    align-items: center;
    gap: var(--rame-space-2, 8px);
    font-size: var(--rame-text-xl, 16px);
    font-weight: var(--rame-font-semibold, 600);
}

.ig-topbar__glyph[b-fot6rn37is] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--rame-radius-md, 8px);
    background: var(--ig-brand);
    box-shadow: var(--rame-shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
}

.ig-topbar__right[b-fot6rn37is] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--rame-space-3, 12px);
}

.ig-pill[b-fot6rn37is] {
    display: inline-flex;
    align-items: center;
    gap: var(--rame-space-1, 4px);
    font-size: var(--rame-text-xs, 11px);
    font-weight: var(--rame-font-semibold, 600);
    padding: 4px 10px;
    border-radius: var(--rame-radius-2xl, 20px);
}

.ig-pill--muted[b-fot6rn37is] { background: var(--rame-bg-tertiary, #f0f2f5); color: var(--rame-text-secondary, #65676b); }
.ig-pill--warn[b-fot6rn37is]  { background: var(--rame-warning-light, #fff3e0); color: var(--rame-warning-text, #e65100); }
.ig-pill--ok[b-fot6rn37is]    { background: var(--rame-success-light, #e6f9ed); color: var(--rame-success, #25d366); }

.ig-save[b-fot6rn37is] {
    display: inline-flex;
    align-items: center;
    gap: var(--rame-space-2, 8px);
    padding: var(--rame-space-2, 8px) var(--rame-space-5, 20px);
    border: none;
    border-radius: var(--rame-radius-md, 8px);
    background: var(--ig-brand);
    color: #fff;
    font-size: var(--rame-text-base, 14px);
    font-weight: var(--rame-font-semibold, 600);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.ig-save:hover:not(:disabled)[b-fot6rn37is] {
    transform: translateY(-1px);
    box-shadow: var(--rame-shadow-md, 0 2px 8px rgba(0,0,0,0.1));
}

.ig-save:disabled[b-fot6rn37is] { opacity: 0.6; cursor: not-allowed; }

.ig-banner[b-fot6rn37is] {
    padding: var(--rame-space-3, 12px) var(--rame-space-5, 20px);
    font-size: var(--rame-text-base, 14px);
}

.ig-banner--error[b-fot6rn37is] {
    background: var(--rame-error-light, #ffebee);
    color: var(--rame-error-text, #c62828);
    border-bottom: 1px solid var(--rame-error-border, #ffcdd2);
}

/* ========== BODY LAYOUT ========== */

.ig-body[b-fot6rn37is] {
    flex: 1;
    display: flex;
    gap: var(--rame-space-6, 24px);
    padding: var(--rame-space-6, 24px);
    overflow: auto;
    align-items: flex-start;
}

.ig-config[b-fot6rn37is] {
    flex: 1;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: var(--rame-space-5, 20px);
}

.ig-preview[b-fot6rn37is] {
    width: 360px;
    flex-shrink: 0;
    position: sticky;
    top: var(--rame-space-6, 24px);
}

/* ========== CARDS ========== */

.ig-card[b-fot6rn37is] {
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: var(--rame-radius-lg, 12px);
    padding: var(--rame-space-5, 20px);
    display: flex;
    flex-direction: column;
    gap: var(--rame-space-4, 16px);
    box-shadow: var(--rame-shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
}

.ig-card__title[b-fot6rn37is] {
    display: flex;
    align-items: center;
    gap: var(--rame-space-2, 8px);
    margin: 0;
    font-size: var(--rame-text-lg, 15px);
    font-weight: var(--rame-font-semibold, 600);
    color: var(--rame-text-primary, #1c1e21);
}

.ig-step[b-fot6rn37is] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--rame-radius-full, 50%);
    background: var(--ig-brand);
    color: #fff;
    font-size: var(--rame-text-xs, 11px);
    font-weight: var(--rame-font-bold, 700);
}

/* ========== FIELDS ========== */

.ig-field[b-fot6rn37is] { display: flex; flex-direction: column; gap: var(--rame-space-2, 8px); }

.ig-label[b-fot6rn37is] {
    font-size: var(--rame-text-sm, 12px);
    font-weight: var(--rame-font-semibold, 600);
    color: var(--rame-text-secondary, #65676b);
}

.ig-input[b-fot6rn37is],
.ig-textarea[b-fot6rn37is] {
    width: 100%;
    box-sizing: border-box;
    padding: var(--rame-space-3, 12px);
    border: 1px solid var(--rame-border-medium, #d0d3d9);
    border-radius: var(--rame-radius-md, 8px);
    background: var(--rame-bg-primary, #ffffff);
    color: var(--rame-text-primary, #1c1e21);
    font-family: inherit;
    font-size: var(--rame-text-base, 14px);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ig-textarea[b-fot6rn37is] { resize: vertical; line-height: 1.5; }

.ig-input:focus[b-fot6rn37is],
.ig-textarea:focus[b-fot6rn37is] {
    outline: none;
    border-color: var(--rame-primary, #0084ff);
    box-shadow: var(--rame-shadow-focus-primary, 0 0 0 3px rgba(0,132,255,0.2));
}

.ig-hint[b-fot6rn37is] {
    font-size: var(--rame-text-xs, 11px);
    color: var(--rame-text-tertiary, #8a8d91);
}

[b-fot6rn37is] .ig-combo { width: 100%; }

/* ========== SWITCH ROWS ========== */

.ig-switchrow[b-fot6rn37is] {
    display: flex;
    align-items: center;
    gap: var(--rame-space-4, 16px);
    width: 100%;
    text-align: left;
    background: var(--rame-bg-secondary, #f7f8fa);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: var(--rame-radius-md, 8px);
    padding: var(--rame-space-3, 12px) var(--rame-space-4, 16px);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.ig-switchrow:hover[b-fot6rn37is] { border-color: var(--rame-border-medium, #d0d3d9); }

.ig-switchrow__text[b-fot6rn37is] { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ig-switchrow__title[b-fot6rn37is] { font-size: var(--rame-text-base, 14px); font-weight: var(--rame-font-medium, 500); color: var(--rame-text-primary, #1c1e21); }
.ig-switchrow__sub[b-fot6rn37is] { font-size: var(--rame-text-xs, 11px); color: var(--rame-text-tertiary, #8a8d91); }

.ig-switch[b-fot6rn37is] {
    flex-shrink: 0;
    width: 42px;
    height: 24px;
    border-radius: var(--rame-radius-2xl, 20px);
    background: var(--rame-border-dark, #b8bcc4);
    position: relative;
    transition: background 0.2s ease;
}

.ig-switch[b-fot6rn37is]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: var(--rame-radius-full, 50%);
    background: #fff;
    box-shadow: var(--rame-shadow-sm, 0 1px 3px rgba(0,0,0,0.2));
    transition: transform 0.2s ease;
}

.ig-switch.is-on[b-fot6rn37is] { background: var(--rame-success, #25d366); }
.ig-switch.is-on[b-fot6rn37is]::after { transform: translateX(18px); }

/* ========== SEGMENTED ========== */

.ig-segmented[b-fot6rn37is] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    background: var(--rame-bg-tertiary, #f0f2f5);
    border-radius: var(--rame-radius-md, 8px);
}

.ig-segmented--3[b-fot6rn37is] { grid-template-columns: 1fr 1fr 1fr; }

.ig-seg[b-fot6rn37is] {
    border: none;
    background: transparent;
    padding: var(--rame-space-2, 8px) var(--rame-space-3, 12px);
    border-radius: var(--rame-radius-sm, 6px);
    font-size: var(--rame-text-sm, 12px);
    font-weight: var(--rame-font-semibold, 600);
    color: var(--rame-text-secondary, #65676b);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.ig-seg.is-active[b-fot6rn37is] {
    background: var(--rame-bg-primary, #ffffff);
    color: var(--rame-text-primary, #1c1e21);
    box-shadow: var(--rame-shadow-xs, 0 1px 2px rgba(0,0,0,0.05));
}

/* ========== POST PICKER ========== */

.ig-postgrid[b-fot6rn37is] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: var(--rame-space-2, 8px);
    max-height: 320px;
    overflow-y: auto;
    padding: 2px;
}

.ig-post[b-fot6rn37is] {
    position: relative;
    aspect-ratio: 1 / 1;
    border: 2px solid transparent;
    border-radius: var(--rame-radius-md, 8px);
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    background: var(--rame-bg-tertiary, #f0f2f5);
    transition: transform 0.12s ease, border-color 0.12s ease;
}

.ig-post:hover[b-fot6rn37is] { transform: scale(1.03); }
.ig-post img[b-fot6rn37is] { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-post.is-selected[b-fot6rn37is] { border-color: #dc2743; }

.ig-post__check[b-fot6rn37is] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: var(--rame-radius-full, 50%);
    background: var(--ig-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--rame-shadow-sm, 0 1px 3px rgba(0,0,0,0.3));
}

.ig-postgrid-state[b-fot6rn37is] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--rame-space-3, 12px);
    padding: var(--rame-space-6, 24px);
    background: var(--rame-bg-secondary, #f7f8fa);
    border: 1px dashed var(--rame-border-medium, #d0d3d9);
    border-radius: var(--rame-radius-md, 8px);
    color: var(--rame-text-secondary, #65676b);
    font-size: var(--rame-text-sm, 12px);
    text-align: center;
}

.ig-postgrid-state--empty .ig-input[b-fot6rn37is] { margin-top: var(--rame-space-1, 4px); }

.ig-spinner-sm[b-fot6rn37is] {
    width: 26px;
    height: 26px;
    border: 3px solid var(--rame-border-light, #e4e6eb);
    border-top-color: #dc2743;
    border-radius: var(--rame-radius-full, 50%);
    animation: ig-spin-b-fot6rn37is 0.9s linear infinite;
}

@keyframes ig-spin-b-fot6rn37is { to { transform: rotate(360deg); } }

/* ========== KEYWORD CHIPS ========== */

.ig-chips[b-fot6rn37is] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rame-space-2, 8px);
    padding: var(--rame-space-2, 8px);
    border: 1px solid var(--rame-border-medium, #d0d3d9);
    border-radius: var(--rame-radius-md, 8px);
    background: var(--rame-bg-primary, #ffffff);
    min-height: 44px;
    align-items: center;
}

.ig-chip[b-fot6rn37is] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 5px 12px;
    border-radius: var(--rame-radius-2xl, 20px);
    background: var(--rame-primary-light, #e6f3ff);
    color: var(--rame-primary-dark, #0066cc);
    font-size: var(--rame-text-sm, 12px);
    font-weight: var(--rame-font-semibold, 600);
}

.ig-chip__x[b-fot6rn37is] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: var(--rame-radius-full, 50%);
    background: rgba(0,0,0,0.08);
    color: inherit;
    cursor: pointer;
}

.ig-chip__x:hover[b-fot6rn37is] { background: rgba(0,0,0,0.18); }

.ig-chip-input[b-fot6rn37is] {
    flex: 1;
    min-width: 140px;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--rame-text-base, 14px);
    color: var(--rame-text-primary, #1c1e21);
    padding: 4px;
}

/* ========== PREVIEW (Instagram DM mockup) ========== */

.ig-preview__label[b-fot6rn37is] {
    font-size: var(--rame-text-xs, 11px);
    font-weight: var(--rame-font-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rame-text-tertiary, #8a8d91);
    margin-bottom: var(--rame-space-3, 12px);
}

.ig-phone[b-fot6rn37is] {
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: var(--rame-radius-xl, 16px);
    padding: var(--rame-space-4, 16px);
    box-shadow: var(--rame-shadow-lg, 0 4px 12px rgba(0,0,0,0.15));
    position: relative;
}

.ig-phone__notch[b-fot6rn37is] {
    width: 90px;
    height: 5px;
    border-radius: var(--rame-radius-2xl, 20px);
    background: var(--rame-border-medium, #d0d3d9);
    margin: 0 auto var(--rame-space-4, 16px);
}

.ig-dm__header[b-fot6rn37is] {
    display: flex;
    align-items: center;
    gap: var(--rame-space-3, 12px);
    padding-bottom: var(--rame-space-3, 12px);
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
}

.ig-avatar[b-fot6rn37is] {
    width: 40px;
    height: 40px;
    border-radius: var(--rame-radius-full, 50%);
    background: var(--ig-brand);
    flex-shrink: 0;
}

.ig-dm__who[b-fot6rn37is] { display: flex; flex-direction: column; }
.ig-dm__name[b-fot6rn37is] { font-size: var(--rame-text-base, 14px); font-weight: var(--rame-font-semibold, 600); color: var(--rame-text-primary, #1c1e21); }
.ig-dm__meta[b-fot6rn37is] { font-size: var(--rame-text-xs, 11px); color: var(--rame-text-tertiary, #8a8d91); }

.ig-dm__thread[b-fot6rn37is] {
    display: flex;
    flex-direction: column;
    gap: var(--rame-space-3, 12px);
    padding-top: var(--rame-space-4, 16px);
}

.ig-comment-ref[b-fot6rn37is] {
    display: flex;
    align-items: center;
    gap: var(--rame-space-2, 8px);
    padding: var(--rame-space-2, 8px);
    background: var(--rame-bg-secondary, #f7f8fa);
    border-radius: var(--rame-radius-md, 8px);
    align-self: flex-end;
    max-width: 85%;
}

.ig-comment-ref__thumb[b-fot6rn37is] {
    width: 36px;
    height: 36px;
    border-radius: var(--rame-radius-sm, 6px);
    object-fit: cover;
    flex-shrink: 0;
}

.ig-comment-ref__thumb--ph[b-fot6rn37is] { background: var(--ig-brand); display: block; }

.ig-comment-ref__text[b-fot6rn37is] { display: flex; flex-direction: column; }
.ig-comment-ref__user[b-fot6rn37is] { font-size: var(--rame-text-xs, 11px); color: var(--rame-text-tertiary, #8a8d91); }
.ig-comment-ref__body[b-fot6rn37is] { font-size: var(--rame-text-sm, 12px); font-weight: var(--rame-font-semibold, 600); color: var(--rame-text-primary, #1c1e21); }

.ig-bubble[b-fot6rn37is] {
    align-self: flex-start;
    max-width: 85%;
    padding: var(--rame-space-3, 12px) var(--rame-space-4, 16px);
    background: var(--ig-brand);
    color: #fff;
    border-radius: 18px 18px 18px 4px;
    font-size: var(--rame-text-base, 14px);
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.ig-publicreply[b-fot6rn37is] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--rame-text-xs, 11px);
    color: var(--rame-text-secondary, #65676b);
    font-style: italic;
}

/* ========== RESPONSIVE ========== */

@media (max-width: 980px) {
    .ig-body[b-fot6rn37is] { flex-direction: column; }
    .ig-config[b-fot6rn37is] { max-width: none; width: 100%; }
    .ig-preview[b-fot6rn37is] { width: 100%; position: static; }
}

@media (prefers-reduced-motion: reduce) {
    .ig-save[b-fot6rn37is], .ig-post[b-fot6rn37is], .ig-switch[b-fot6rn37is], .ig-switch[b-fot6rn37is]::after { transition: none; }
    .ig-spinner-sm[b-fot6rn37is] { animation: none; }
}

/* ========== DARK MODE OVERRIDES ========== */

:global([data-rame-theme="dark"]) .ig-designer[b-fot6rn37is] { background: var(--rame-bg-primary, #1e1e1e); }
:global([data-rame-theme="dark"]) .ig-topbar[b-fot6rn37is] { background: var(--rame-bg-secondary, #282828); border-bottom-color: var(--rame-border-medium, #505050); }
:global([data-rame-theme="dark"]) .ig-card[b-fot6rn37is] { background: var(--rame-bg-secondary, #282828); border-color: var(--rame-border-medium, #505050); }
:global([data-rame-theme="dark"]) .ig-card__title[b-fot6rn37is],
:global([data-rame-theme="dark"]) .ig-switchrow__title[b-fot6rn37is],
:global([data-rame-theme="dark"]) .ig-dm__name[b-fot6rn37is],
:global([data-rame-theme="dark"]) .ig-comment-ref__body[b-fot6rn37is] { color: var(--rame-text-primary, #f0f0f0); }
:global([data-rame-theme="dark"]) .ig-input[b-fot6rn37is],
:global([data-rame-theme="dark"]) .ig-textarea[b-fot6rn37is],
:global([data-rame-theme="dark"]) .ig-chips[b-fot6rn37is] { background: var(--rame-bg-input, #2a2a2a); border-color: var(--rame-border-medium, #505050); color: var(--rame-text-primary, #f0f0f0); }
:global([data-rame-theme="dark"]) .ig-chip-input[b-fot6rn37is] { color: var(--rame-text-primary, #f0f0f0); }
:global([data-rame-theme="dark"]) .ig-switchrow[b-fot6rn37is] { background: var(--rame-bg-tertiary, #333333); border-color: var(--rame-border-medium, #505050); }
:global([data-rame-theme="dark"]) .ig-segmented[b-fot6rn37is] { background: var(--rame-bg-tertiary, #333333); }
:global([data-rame-theme="dark"]) .ig-seg.is-active[b-fot6rn37is] { background: var(--rame-bg-primary, #1e1e1e); color: var(--rame-text-primary, #f0f0f0); }
:global([data-rame-theme="dark"]) .ig-phone[b-fot6rn37is] { background: var(--rame-bg-secondary, #282828); border-color: var(--rame-border-medium, #505050); }
:global([data-rame-theme="dark"]) .ig-comment-ref[b-fot6rn37is] { background: var(--rame-bg-tertiary, #333333); }
:global([data-rame-theme="dark"]) .ig-dm__header[b-fot6rn37is] { border-bottom-color: var(--rame-border-medium, #505050); }
/* _content/Rame.Blazor.Server/Components/Leads/KanbanCard.razor.rz.scp.css */
/* Professional Kanban Card - Refined Enterprise Design */
/* Uses Rame Design System tokens - see /css/design-system/_tokens.css */

.kanban-card[b-p3sk9i3n84] {
    background: var(--rame-bg-primary, #ffffff);
    border-radius: 10px;
    margin-bottom: 10px;
    box-shadow: var(--rame-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
    cursor: grab;
    transition: all 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
    overflow: hidden;
    border: 1px solid var(--rame-border-light, #e4e6eb);
    animation: cardSlideIn-b-p3sk9i3n84 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes cardSlideIn-b-p3sk9i3n84 {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.kanban-card:hover[b-p3sk9i3n84] {
    box-shadow: var(--rame-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.12));
    border-color: var(--rame-border-medium, #d0d3d9);
    transform: translateY(-2px);
}

.kanban-card:active[b-p3sk9i3n84] {
    cursor: grabbing;
    transform: translateY(0) scale(0.98);
}

.kanban-card.dragging[b-p3sk9i3n84] {
    opacity: 0.65;
    transform: rotate(3deg) scale(1.02);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
    border-color: var(--rame-primary, #0084ff);
    animation: none;
}

.card-color-bar[b-p3sk9i3n84] {
    height: 4px;
    width: 100%;
}

.card-content[b-p3sk9i3n84] {
    padding: 12px;
}

.card-header[b-p3sk9i3n84] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    position: relative;
}

.card-avatar[b-p3sk9i3n84] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--rame-avatar-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
}

.avatar-initials[b-p3sk9i3n84] {
    color: white;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.card-info[b-p3sk9i3n84] {
    flex: 1;
    min-width: 0;
}

.card-lead-name[b-p3sk9i3n84] {
    font-weight: 600;
    font-size: 14px;
    color: var(--rame-text-primary, #1c1e21);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-opportunity-name[b-p3sk9i3n84] {
    font-size: 12px;
    color: var(--rame-text-secondary, #65676b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic;
}

/* Chat button - siempre visible */
.card-chat-button[b-p3sk9i3n84] {
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--rame-bg-secondary, #f0f2f5);
    color: var(--rame-text-secondary, #65676b);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    padding: 0;
}

.card-chat-button:hover[b-p3sk9i3n84] {
    background: var(--rame-bg-secondary, #f0f2f5);
    color: var(--rame-primary, #0084ff);
    transform: scale(1.1);
}

.card-chat-button:active[b-p3sk9i3n84] {
    transform: scale(0.95);
}

/* Tags editing state - allow dropdown overflow and elevate above sibling cards */
.kanban-card.editing-tags[b-p3sk9i3n84] {
    overflow: visible;
    z-index: 100;
    position: relative;
}

.card-value[b-p3sk9i3n84] {
    font-size: 16px;
    font-weight: 700;
    color: var(--rame-success, #00a86b);
    margin: 10px 0;
    padding: 6px 10px;
    background: linear-gradient(135deg, var(--rame-success-light, #e8f5e9) 0%, #f1f8f4 100%);
    border-radius: 6px;
    display: inline-block;
    box-shadow: 0 1px 2px rgba(0, 168, 107, 0.1);
    border: 1px solid rgba(0, 168, 107, 0.1);
}

.card-seller[b-p3sk9i3n84] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--rame-text-secondary, #65676b);
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.seller-icon[b-p3sk9i3n84] {
    font-weight: 700;
    color: var(--rame-text-tertiary, #8a8d91);
}

.card-footer[b-p3sk9i3n84] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid var(--rame-bg-secondary, #f0f2f5);
    font-size: 11px;
}

.time-label[b-p3sk9i3n84] {
    color: var(--rame-text-tertiary, #8a8d91);
}

.time-value[b-p3sk9i3n84] {
    color: var(--rame-text-secondary, #65676b);
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
    .kanban-card[b-p3sk9i3n84] {
        border-radius: 8px;
    }

    .card-content[b-p3sk9i3n84] {
        padding: 10px;
    }

    .card-avatar[b-p3sk9i3n84] {
        width: 36px;
        height: 36px;
    }

    .avatar-initials[b-p3sk9i3n84] {
        font-size: 13px;
    }

    .card-lead-name[b-p3sk9i3n84] {
        font-size: 13px;
    }

    .card-value[b-p3sk9i3n84] {
        font-size: 15px;
        padding: 5px 8px;
    }
}

/* Accessibility */
.kanban-card:focus[b-p3sk9i3n84] {
    outline: 2px solid var(--rame-primary, #0084ff);
    outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .kanban-card[b-p3sk9i3n84],
    .kanban-card:hover[b-p3sk9i3n84],
    .kanban-card:active[b-p3sk9i3n84],
    .kanban-card.dragging[b-p3sk9i3n84] {
        animation: none;
        transition: none;
        transform: none;
    }
}

/* ========== MOBILE TWEAKS ========== */
@media (max-width: 640px) {
    .kanban-card[b-p3sk9i3n84] {
        padding: var(--rame-space-3, 12px);
    }

    .kanban-card .card-lead-name[b-p3sk9i3n84] {
        font-size: 14px;
    }
}
/* _content/Rame.Blazor.Server/Components/Leads/KanbanColumn.razor.rz.scp.css */
/* Professional Kanban Column - Refined Enterprise Design */
/* Uses Rame Design System tokens - see /css/design-system/_tokens.css */

.kanban-column[b-mhzelkwuaq] {
    min-width: 300px;
    max-width: 340px;
    background: var(--rame-bg-primary, #ffffff);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--rame-shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.06));
    transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    max-height: calc(100vh - 200px);
    border: 1px solid var(--rame-border-light, #e4e6eb);
}

/* Valid drop target during drag */
.kanban-column.drag-over[b-mhzelkwuaq] {
    background: linear-gradient(135deg, var(--rame-primary-light, #e7f3ff) 0%, #f0f7ff 100%);
    border: 2px solid var(--rame-primary, #0084ff);
    box-shadow: 0 6px 16px rgba(0, 132, 255, 0.25);
    transform: scale(1.02);
}

/* Column is an allowed drop target during drag */
.kanban-column.drop-allowed[b-mhzelkwuaq] {
    border: 2px dashed var(--rame-success, #4CAF50);
    background: linear-gradient(135deg, #f1f8e9 0%, var(--rame-bg-primary, #ffffff) 100%);
}

/* Column is NOT an allowed drop target during drag */
.kanban-column.drop-disabled[b-mhzelkwuaq] {
    opacity: 0.5;
    border: 2px dashed var(--rame-scrollbar-thumb, #bcc0c4);
    background: linear-gradient(135deg, var(--rame-bg-secondary, #f5f5f5) 0%, #eeeeee 100%);
    pointer-events: none;
    position: relative;
}

.kanban-column.drop-disabled[b-mhzelkwuaq]::after {
    content: "No permitido";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    z-index: 10;
    white-space: nowrap;
}

.kanban-column.drag-over[b-mhzelkwuaq]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    padding: 2px;
    background: linear-gradient(135deg, var(--rame-primary, #0084ff), #00a8ff);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.5;
    animation: borderPulse-b-mhzelkwuaq 1.5s ease-in-out infinite;
}

@keyframes borderPulse-b-mhzelkwuaq {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.7;
    }
}

.column-header[b-mhzelkwuaq] {
    padding: 14px 18px;
    border-top: 4px solid transparent;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(135deg, var(--rame-bg-tertiary, #fafbfc) 0%, var(--rame-bg-primary, #ffffff) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    position: relative;
}

.column-header[b-mhzelkwuaq]::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rame-border-light, #e4e6eb) 50%, transparent);
}

.column-title[b-mhzelkwuaq] {
    font-weight: 700;
    font-size: 14px;
    color: var(--rame-text-primary, #1c1e21);
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.2px;
}

.stage-color-dot[b-mhzelkwuaq] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

.kanban-column:hover .stage-color-dot[b-mhzelkwuaq] {
    transform: scale(1.1);
}

.column-count[b-mhzelkwuaq] {
    background: linear-gradient(135deg, var(--rame-border-light, #e4e6eb) 0%, #f0f2f5 100%);
    color: var(--rame-text-secondary, #65676b);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    box-shadow: var(--rame-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
    min-width: 24px;
    text-align: center;
}

.column-content[b-mhzelkwuaq] {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    min-height: 100px;
}

.column-content[b-mhzelkwuaq]::-webkit-scrollbar {
    width: 6px;
}

.column-content[b-mhzelkwuaq]::-webkit-scrollbar-track {
    background: transparent;
}

.column-content[b-mhzelkwuaq]::-webkit-scrollbar-thumb {
    background: var(--rame-border-light, #e4e6eb);
    border-radius: 3px;
}

.column-content[b-mhzelkwuaq]::-webkit-scrollbar-thumb:hover {
    background: var(--rame-scrollbar-thumb, #bcc0c4);
}

.empty-column[b-mhzelkwuaq] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 120px;
    color: var(--rame-text-tertiary, #8a8d91);
    font-size: 13px;
    font-style: italic;
    gap: 8px;
}

.empty-column[b-mhzelkwuaq]::before {
    content: "📋";
    font-size: 32px;
    opacity: 0.3;
    font-style: normal;
}

/* Load More Button */
.kanban-load-more[b-mhzelkwuaq] {
    padding: 12px 8px;
    text-align: center;
    margin-top: 8px;
}

.kanban-load-more .load-more-btn[b-mhzelkwuaq] {
    background: linear-gradient(135deg, #f0f2f5 0%, var(--rame-border-light, #e4e6eb) 100%);
    border: 1px solid var(--rame-border-medium, #d0d3d9);
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--rame-text-secondary, #65676b);
    transition: all 0.2s ease;
    width: 100%;
}

.kanban-load-more .load-more-btn:hover:not(:disabled)[b-mhzelkwuaq] {
    background: linear-gradient(135deg, var(--rame-border-light, #e4e6eb) 0%, var(--rame-border-medium, #d0d3d9) 100%);
    color: var(--rame-text-primary, #1c1e21);
    border-color: var(--rame-scrollbar-thumb-hover, #b8bcc4);
}

.kanban-load-more .load-more-btn:active:not(:disabled)[b-mhzelkwuaq] {
    transform: translateY(1px);
}

.kanban-load-more .load-more-btn:disabled[b-mhzelkwuaq] {
    opacity: 0.6;
    cursor: not-allowed;
}

.column-footer[b-mhzelkwuaq] {
    padding: 8px 16px;
    border-top: 1px solid var(--rame-border-light, #e4e6eb);
    background: var(--rame-bg-tertiary, #fafbfc);
    border-radius: 0 0 8px 8px;
    flex-shrink: 0;
}

.probability-label[b-mhzelkwuaq] {
    font-size: 11px;
    color: var(--rame-text-secondary, #65676b);
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 768px) {
    .kanban-column[b-mhzelkwuaq] {
        min-width: 260px;
        max-width: 280px;
    }

    .column-header[b-mhzelkwuaq] {
        padding: 12px 14px;
    }

    .column-title[b-mhzelkwuaq] {
        font-size: 13px;
    }

    .stage-color-dot[b-mhzelkwuaq] {
        width: 10px;
        height: 10px;
    }

    .column-count[b-mhzelkwuaq] {
        font-size: 11px;
        padding: 3px 8px;
    }
}

@media (max-width: 480px) {
    .kanban-column[b-mhzelkwuaq] {
        min-width: 240px;
        max-width: 260px;
    }

    .empty-column[b-mhzelkwuaq] {
        height: 100px;
    }

    .empty-column[b-mhzelkwuaq]::before {
        font-size: 28px;
    }
}

/* Accessibility */
.kanban-column:focus-within[b-mhzelkwuaq] {
    box-shadow: 0 0 0 2px var(--rame-primary, #0084ff);
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .kanban-column[b-mhzelkwuaq],
    .kanban-column.drag-over[b-mhzelkwuaq],
    .stage-color-dot[b-mhzelkwuaq] {
        animation: none;
        transition: none;
        transform: none;
    }
}

/* ========== MOBILE: HIDE INACTIVE COLUMNS, ACTIVE FILLS BOARD WIDTH ========== */
@media (max-width: 640px) {
    .kanban-column[b-mhzelkwuaq] {
        width: 100% !important;
        min-width: 0;
        max-width: none;            /* override desktop's 340px cap so the active column fills the board */
        flex: 1 1 auto;
        max-height: none;           /* let the column grow with its cards instead of clipping at 100vh - 200px */
    }

    .kanban-column:not(.kanban-column--mobile-active)[b-mhzelkwuaq] {
        display: none;
    }

    .kanban-column.kanban-column--mobile-active[b-mhzelkwuaq] {
        display: flex;
    }
}
/* _content/Rame.Blazor.Server/Components/Leads/KanbanFilterPanel.razor.rz.scp.css */
/* KanbanFilterPanel — compact chip-based filter bar for kanban board */

/* ── Container ── */

.kanban-filter-panel[b-t9vm0ylmjl] {
    background: var(--rame-bg-primary, #ffffff);
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
    flex-shrink: 0;
}

/* ── Filter chips row ── */

.kf-row[b-t9vm0ylmjl] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 12px 10px;
    flex-wrap: nowrap;
}

/* ── Base chip ── */

.kf-chip[b-t9vm0ylmjl] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 5px 9px;
    height: 30px;
    border: 1.5px solid var(--rame-border-light, #e4e6eb);
    border-radius: 20px;
    background: var(--rame-bg-primary, #ffffff);
    color: var(--rame-text-secondary, #65676b);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.13s ease, border-color 0.13s ease, color 0.13s ease;
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
}

.kf-chip:hover[b-t9vm0ylmjl] {
    background: var(--rame-bg-tertiary, #f0f2f5);
    border-color: var(--rame-border-medium, #d0d3d9);
    color: var(--rame-text-primary, #1c1e21);
}

.kf-chip--active[b-t9vm0ylmjl] {
    background: var(--rame-primary, #0084ff);
    border-color: var(--rame-primary, #0084ff);
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 132, 255, 0.22);
}

.kf-chip--active:hover[b-t9vm0ylmjl] {
    background: #0077e6;
    border-color: #0077e6;
    color: #ffffff;
}

.kf-chip-arrow[b-t9vm0ylmjl] {
    flex-shrink: 0;
    opacity: 0.7;
    transition: transform 0.18s ease;
    margin-left: 1px;
}

.kf-chip-arrow--open[b-t9vm0ylmjl] {
    transform: rotate(180deg);
}

/* ── Dropdown container ── */

.kf-drop[b-t9vm0ylmjl] {
    position: relative;
    flex-shrink: 0;
}

.kf-chip--open[b-t9vm0ylmjl] {
    background: var(--rame-bg-tertiary, #f0f2f5);
    border-color: var(--rame-border-medium, #d0d3d9);
    color: var(--rame-text-primary, #1c1e21);
}

.kf-chip--active.kf-chip--open[b-t9vm0ylmjl] {
    background: var(--rame-primary, #0084ff);
    border-color: var(--rame-primary, #0084ff);
    color: #ffffff;
}

/* ── Popover panel ── */

.kf-pop[b-t9vm0ylmjl] {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 200;
    min-width: 160px;
    max-width: 220px;
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: var(--rame-radius-md, 8px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 240px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--rame-border-medium, #d0d3d9) transparent;
    animation: kf-pop-in-b-t9vm0ylmjl 0.12s ease;
}

.kf-pop[b-t9vm0ylmjl]::-webkit-scrollbar {
    width: 3px;
}

.kf-pop[b-t9vm0ylmjl]::-webkit-scrollbar-track {
    background: transparent;
}

.kf-pop[b-t9vm0ylmjl]::-webkit-scrollbar-thumb {
    background: var(--rame-border-medium, #d0d3d9);
    border-radius: 3px;
}

@keyframes kf-pop-in-b-t9vm0ylmjl {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kf-pop--right[b-t9vm0ylmjl] {
    left: auto;
    right: 0;
}

/* ── Popover items ── */

.kf-pop-item[b-t9vm0ylmjl] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 8px;
    border: none;
    background: transparent;
    color: var(--rame-text-secondary, #65676b);
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.12s ease, color 0.12s ease;
    white-space: nowrap;
    line-height: 1.3;
}

.kf-pop-item:hover[b-t9vm0ylmjl] {
    background: var(--rame-bg-tertiary, #f0f2f5);
    color: var(--rame-text-primary, #1c1e21);
}

.kf-pop-item--sel[b-t9vm0ylmjl] {
    background: var(--rame-primary-light, #e6f3ff);
    color: var(--rame-primary, #0084ff);
    font-weight: 500;
}

.kf-pop-item--sel:hover[b-t9vm0ylmjl] {
    background: #d4ecff;
    color: var(--rame-primary, #0084ff);
}

.kf-pop-divider[b-t9vm0ylmjl] {
    height: 1px;
    background: var(--rame-border-light, #e4e6eb);
    margin: 3px 0;
}

/* ── Priority dots ── */

.kf-priority-dot[b-t9vm0ylmjl] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.kf-priority-dot--high[b-t9vm0ylmjl]   { background: var(--rame-error, #ef5350); }
.kf-priority-dot--medium[b-t9vm0ylmjl] { background: var(--rame-warning, #ff9800); }
.kf-priority-dot--low[b-t9vm0ylmjl]    { background: var(--rame-success, #25d366); }

/* ── Dark mode ── */

:global([data-rame-theme="dark"]) .kanban-filter-panel[b-t9vm0ylmjl] {
    background: var(--rame-bg-primary, #1e1e1e);
    border-bottom-color: var(--rame-border-medium, #3a3a3a);
}

:global([data-rame-theme="dark"]) .kf-chip[b-t9vm0ylmjl] {
    background: var(--rame-bg-tertiary, #2d2d2d);
    border-color: var(--rame-border-medium, #4a4a4a);
    color: var(--rame-text-secondary, #c0c0c0);
}

:global([data-rame-theme="dark"]) .kf-chip:hover[b-t9vm0ylmjl] {
    background: #363636;
    border-color: #5a5a5a;
    color: var(--rame-text-primary, #f0f0f0);
}

:global([data-rame-theme="dark"]) .kf-chip--active[b-t9vm0ylmjl] {
    background: var(--rame-primary, #3b9eff);
    border-color: var(--rame-primary, #3b9eff);
    color: #ffffff;
}

:global([data-rame-theme="dark"]) .kf-chip--open[b-t9vm0ylmjl] {
    background: #363636;
    border-color: #5a5a5a;
    color: var(--rame-text-primary, #f0f0f0);
}

:global([data-rame-theme="dark"]) .kf-chip--active.kf-chip--open[b-t9vm0ylmjl] {
    background: var(--rame-primary, #3b9eff);
    border-color: var(--rame-primary, #3b9eff);
    color: #ffffff;
}

:global([data-rame-theme="dark"]) .kf-pop[b-t9vm0ylmjl] {
    background: var(--rame-bg-secondary, #252525);
    border-color: var(--rame-border-medium, #404040);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 1px 6px rgba(0, 0, 0, 0.2);
}

:global([data-rame-theme="dark"]) .kf-pop-item[b-t9vm0ylmjl] {
    color: var(--rame-text-secondary, #c0c0c0);
}

:global([data-rame-theme="dark"]) .kf-pop-item:hover[b-t9vm0ylmjl] {
    background: #363636;
    color: var(--rame-text-primary, #f0f0f0);
}

:global([data-rame-theme="dark"]) .kf-pop-item--sel[b-t9vm0ylmjl] {
    background: rgba(59, 158, 255, 0.15);
    color: var(--rame-primary, #3b9eff);
}

:global([data-rame-theme="dark"]) .kf-pop-item--sel:hover[b-t9vm0ylmjl] {
    background: rgba(59, 158, 255, 0.22);
}

:global([data-rame-theme="dark"]) .kf-pop-divider[b-t9vm0ylmjl] {
    background: var(--rame-border-medium, #404040);
}
/* _content/Rame.Blazor.Server/Components/Leads/KanbanFilters.razor.rz.scp.css */
/* Professional Kanban Filters - Refined Enterprise Design */
/* Uses Rame Design System tokens - see /css/design-system/_tokens.css */

.kanban-filters[b-qqwcn03yb4] {
    background: var(--rame-bg-primary, #ffffff);
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
    padding: 16px 20px;
    flex-shrink: 0;
    position: relative;
}

.kanban-filters[b-qqwcn03yb4]::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rame-border-light, #e4e6eb) 50%, transparent);
}

.filters-header[b-qqwcn03yb4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.filters-title[b-qqwcn03yb4] {
    font-weight: 700;
    font-size: 15px;
    color: var(--rame-text-primary, #1c1e21);
    letter-spacing: -0.2px;
}

.filters-content[b-qqwcn03yb4] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.filter-group[b-qqwcn03yb4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 160px;
}

.filter-label[b-qqwcn03yb4] {
    font-size: 12px;
    color: var(--rame-text-secondary, #65676b);
    font-weight: 600;
    letter-spacing: 0.2px;
}

.filter-input[b-qqwcn03yb4] {
    padding: 8px 12px;
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: 8px;
    font-size: 13px;
    color: var(--rame-text-primary, #1c1e21);
    background: var(--rame-bg-primary, #ffffff);
    transition: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    font-family: var(--rame-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
}

.filter-input:hover[b-qqwcn03yb4] {
    border-color: var(--rame-border-dark, #d0d3d9);
}

.filter-input:focus[b-qqwcn03yb4] {
    outline: none;
    border-color: var(--rame-primary, #0084ff);
    background: var(--rame-bg-primary, #ffffff);
    box-shadow: var(--rame-shadow-focus-primary, 0 0 0 3px rgba(0, 132, 255, 0.1));
}

.filter-input[b-qqwcn03yb4]::placeholder {
    color: var(--rame-text-tertiary, #8a8d91);
}

/* Select styling */
select.filter-input[b-qqwcn03yb4] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2365676b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

select.filter-input:focus[b-qqwcn03yb4] {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230084ff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .kanban-filters[b-qqwcn03yb4] {
        padding: 12px 16px;
    }

    .filters-content[b-qqwcn03yb4] {
        gap: 12px;
    }

    .filter-group[b-qqwcn03yb4] {
        min-width: 140px;
        flex: 1;
    }

    .refresh-btn[b-qqwcn03yb4] {
        padding: 6px 12px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .filters-header[b-qqwcn03yb4] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .refresh-btn[b-qqwcn03yb4] {
        align-self: stretch;
    }

    .filters-content[b-qqwcn03yb4] {
        flex-direction: column;
    }

    .filter-group[b-qqwcn03yb4] {
        min-width: 100%;
    }
}
/* _content/Rame.Blazor.Server/Components/Leads/KanbanTagEditor.razor.rz.scp.css */
/* KanbanTagEditor - Inline Tag Editor for Kanban Cards */
/* Uses Rame Design System tokens - see /css/design-system/_tokens.css */

.tags-area-wrapper[b-le8s1v8gyh] {
    margin-bottom: 8px;
}

/* ========== VIEW / HOVER MODE ========== */

.tags-edit-trigger[b-le8s1v8gyh] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 4px;
    border-radius: 6px;
    border: 1.5px dashed transparent;
    cursor: pointer;
    min-height: 28px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.tags-edit-trigger.hovered[b-le8s1v8gyh] {
    border-color: var(--rame-border-medium, #d0d3d9);
    background: var(--rame-bg-secondary, #f7f8fa);
}

.tags-edit-trigger.hovered .tag-badge[b-le8s1v8gyh] {
    opacity: 0.85;
}

.tags-edit-hint[b-le8s1v8gyh] {
    display: none;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    color: var(--rame-primary, #0084ff);
    white-space: nowrap;
    margin-left: 2px;
    user-select: none;
}

.tags-edit-trigger.hovered .tags-edit-hint[b-le8s1v8gyh] {
    display: flex;
}

.tags-empty-label[b-le8s1v8gyh] {
    font-size: 11px;
    color: var(--rame-text-tertiary, #8a8d91);
}

.tags-edit-trigger.hovered .tags-empty-label[b-le8s1v8gyh] {
    color: var(--rame-primary, #0084ff);
}

/* Tag badges in view mode */
.tag-badge[b-le8s1v8gyh] {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    color: var(--rame-text-primary, #1c1e21);
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: opacity 0.2s ease;
}

.tag-badge.tag-more[b-le8s1v8gyh] {
    background: linear-gradient(135deg, var(--rame-text-tertiary, #8a8d91) 0%, var(--rame-text-secondary, #65676b) 100%);
    color: #ffffff;
}

/* ========== EDIT MODE ========== */

.tags-editor-container[b-le8s1v8gyh] {
    position: relative;
}

.tags-active-row[b-le8s1v8gyh] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    padding: 6px 8px;
    background: var(--rame-bg-secondary, #f7f8fa);
    border: 1.5px solid var(--rame-primary, #0084ff);
    border-radius: 8px;
    box-shadow: 0 0 0 3px rgba(0, 132, 255, 0.1);
    min-height: 36px;
    cursor: text;
}

.tag-chip-editable[b-le8s1v8gyh] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 4px 3px 8px;
    border-radius: 24px;
    color: var(--rame-text-primary, #1c1e21);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    white-space: nowrap;
    animation: chipAppear-b-le8s1v8gyh 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes chipAppear-b-le8s1v8gyh {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}

.tag-chip-remove[b-le8s1v8gyh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.15);
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    color: inherit;
    transition: background 0.15s ease;
    line-height: 1;
}

.tag-chip-remove:hover[b-le8s1v8gyh] {
    background: rgba(0, 0, 0, 0.3);
}

.tag-chip-remove:focus-visible[b-le8s1v8gyh] {
    outline: 2px solid var(--rame-primary, #0084ff);
    outline-offset: 1px;
}

.tags-search-input[b-le8s1v8gyh] {
    flex: 1;
    min-width: 60px;
    border: none;
    background: transparent;
    outline: none;
    font-size: 12px;
    color: var(--rame-text-primary, #1c1e21);
    font-family: inherit;
    padding: 2px 4px;
}

.tags-search-input[b-le8s1v8gyh]::placeholder {
    color: var(--rame-text-tertiary, #8a8d91);
}

/* ========== DROPDOWN ========== */

.tag-picker-dropdown[b-le8s1v8gyh] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 600;
    overflow: hidden;
    animation: dropdownSlideIn-b-le8s1v8gyh 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes dropdownSlideIn-b-le8s1v8gyh {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.dropdown-section-label[b-le8s1v8gyh] {
    padding: 8px 12px 4px;
    font-size: 10px;
    font-weight: 700;
    color: var(--rame-text-tertiary, #8a8d91);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dropdown-tag-list[b-le8s1v8gyh] {
    list-style: none;
    max-height: 160px;
    overflow-y: auto;
    padding: 2px 4px 6px;
    margin: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--rame-border-light, #e4e6eb) transparent;
}

.dropdown-tag-list[b-le8s1v8gyh]::-webkit-scrollbar { width: 4px; }
.dropdown-tag-list[b-le8s1v8gyh]::-webkit-scrollbar-track { background: transparent; }
.dropdown-tag-list[b-le8s1v8gyh]::-webkit-scrollbar-thumb {
    background: var(--rame-border-light, #e4e6eb);
    border-radius: 2px;
}

.dropdown-tag-item[b-le8s1v8gyh] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    color: var(--rame-text-primary, #1c1e21);
    transition: background 0.15s ease;
    user-select: none;
}

.dropdown-tag-item:hover[b-le8s1v8gyh] {
    background: var(--rame-bg-hover, #f0f2f5);
}

.dropdown-tag-item.is-assigned[b-le8s1v8gyh] {
    opacity: 0.5;
}

.dropdown-tag-item.is-focused[b-le8s1v8gyh] {
    background: var(--rame-primary-light, #e7f3ff);
    color: var(--rame-primary, #0084ff);
}

.dropdown-tag-dot[b-le8s1v8gyh] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dropdown-tag-name[b-le8s1v8gyh] {
    flex: 1;
    font-weight: 500;
}

.dropdown-empty[b-le8s1v8gyh] {
    padding: 16px 12px;
    text-align: center;
    font-size: 12px;
    color: var(--rame-text-tertiary, #8a8d91);
    font-style: italic;
    list-style: none;
}

/* ========== FOOTER ACTIONS ========== */

.dropdown-error[b-le8s1v8gyh] {
    margin: 0 8px 6px;
    padding: 6px 8px;
    border: 1px solid var(--rame-error-border, #ffc9c9);
    border-radius: 6px;
    background: var(--rame-error-light, #fff5f5);
    color: var(--rame-error-text, #842029);
    font-size: 11px;
    line-height: 1.35;
}

.dropdown-footer[b-le8s1v8gyh] {
    padding: 6px 8px;
    border-top: 1px solid var(--rame-border-light, #e4e6eb);
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.dropdown-action-btn[b-le8s1v8gyh] {
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    line-height: 1.4;
}

.btn-cancel[b-le8s1v8gyh] {
    background: var(--rame-bg-tertiary, #f0f2f5);
    color: var(--rame-text-secondary, #65676b);
    border: 1px solid var(--rame-border-light, #e4e6eb);
}

.btn-cancel:hover[b-le8s1v8gyh] {
    background: var(--rame-border-light, #e4e6eb);
    color: var(--rame-text-primary, #1c1e21);
}

.btn-save[b-le8s1v8gyh] {
    background: var(--rame-primary, #0084ff);
    color: #ffffff;
    border: 1px solid var(--rame-primary, #0084ff);
}

.btn-save:hover:not(:disabled)[b-le8s1v8gyh] {
    background: var(--rame-primary-hover, #0073ea);
    border-color: var(--rame-primary-hover, #0073ea);
}

.btn-save:disabled[b-le8s1v8gyh] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ========== ACCESSIBILITY ========== */

.tags-edit-trigger:focus-visible[b-le8s1v8gyh] {
    outline: 2px solid var(--rame-primary, #0084ff);
    outline-offset: 2px;
}

/* ========== DARK MODE ========== */

:global([data-rame-theme="dark"]) .tags-edit-trigger.hovered[b-le8s1v8gyh] {
    border-color: var(--rame-border-medium, #505050);
    background: var(--rame-bg-secondary, #282828);
}

:global([data-rame-theme="dark"]) .tags-empty-label[b-le8s1v8gyh] {
    color: var(--rame-text-tertiary, #a0a0a0);
}

:global([data-rame-theme="dark"]) .tags-active-row[b-le8s1v8gyh] {
    background: var(--rame-bg-secondary, #282828);
    border-color: var(--rame-primary, #3b9eff);
    box-shadow: 0 0 0 3px rgba(59, 158, 255, 0.15);
}

:global([data-rame-theme="dark"]) .tags-search-input[b-le8s1v8gyh] {
    color: var(--rame-text-primary, #f0f0f0);
}

:global([data-rame-theme="dark"]) .tag-picker-dropdown[b-le8s1v8gyh] {
    background: var(--rame-bg-secondary, #282828);
    border-color: var(--rame-border-medium, #505050);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

:global([data-rame-theme="dark"]) .dropdown-tag-item[b-le8s1v8gyh] {
    color: var(--rame-text-primary, #f0f0f0);
}

:global([data-rame-theme="dark"]) .dropdown-tag-item:hover[b-le8s1v8gyh] {
    background: var(--rame-bg-hover, #3a3a3a);
}

:global([data-rame-theme="dark"]) .dropdown-tag-item.is-focused[b-le8s1v8gyh] {
    background: var(--rame-primary-light, #1a3a5c);
    color: var(--rame-primary, #3b9eff);
}

:global([data-rame-theme="dark"]) .dropdown-error[b-le8s1v8gyh] {
    border-color: var(--rame-error, #ef5350);
    background: rgba(239, 83, 80, 0.12);
    color: var(--rame-error, #ef5350);
}

:global([data-rame-theme="dark"]) .dropdown-footer[b-le8s1v8gyh] {
    border-top-color: var(--rame-border-light, #404040);
}

:global([data-rame-theme="dark"]) .btn-cancel[b-le8s1v8gyh] {
    background: var(--rame-bg-tertiary, #333333);
    color: var(--rame-text-secondary, #c8c8c8);
    border-color: var(--rame-border-medium, #505050);
}

:global([data-rame-theme="dark"]) .btn-cancel:hover[b-le8s1v8gyh] {
    background: var(--rame-bg-hover, #3a3a3a);
}

:global([data-rame-theme="dark"]) .tag-chip-editable[b-le8s1v8gyh] {
    border-color: rgba(255, 255, 255, 0.15);
}

:global([data-rame-theme="dark"]) .tag-chip-remove[b-le8s1v8gyh] {
    background: rgba(255, 255, 255, 0.2);
}

:global([data-rame-theme="dark"]) .tag-chip-remove:hover[b-le8s1v8gyh] {
    background: rgba(255, 255, 255, 0.35);
}

/* ========== REDUCED MOTION ========== */

@media (prefers-reduced-motion: reduce) {
    .tags-edit-trigger[b-le8s1v8gyh],
    .tag-chip-editable[b-le8s1v8gyh],
    .tag-picker-dropdown[b-le8s1v8gyh],
    .dropdown-tag-item[b-le8s1v8gyh] {
        animation: none;
        transition: none;
    }
}
/* _content/Rame.Blazor.Server/Components/Quotations/QuotationAiThinking.razor.rz.scp.css */
.qat[b-mfezcz7t8i] {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--brand, var(--rame-brand, #0f6cbd));
    font-size: 12px; font-weight: 600; line-height: 1;
}
.qat--onbrand[b-mfezcz7t8i] { color: #fff; }

/* Main sparkle: breathes and tilts, with two satellite sparks twinkling around it */
.qat__spark[b-mfezcz7t8i] { position: relative; display: inline-flex; animation: qat-breathe-b-mfezcz7t8i 1.6s ease-in-out infinite; }
.qat__spark[b-mfezcz7t8i]::before, .qat__spark[b-mfezcz7t8i]::after {
    content: ''; position: absolute; background: currentColor; opacity: 0;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    animation: qat-twinkle-b-mfezcz7t8i 1.6s ease-in-out infinite;
}
.qat__spark[b-mfezcz7t8i]::before { width: 6px; height: 6px; top: -4px; right: -6px; animation-delay: .35s; }
.qat__spark[b-mfezcz7t8i]::after { width: 4px; height: 4px; bottom: -3px; left: -5px; animation-delay: .85s; }

.qat__dots[b-mfezcz7t8i] { display: inline-flex; gap: 3px; align-items: center; }
.qat__dots span[b-mfezcz7t8i] {
    width: 3px; height: 3px; border-radius: 50%; background: currentColor;
    opacity: .25; animation: qat-dot-b-mfezcz7t8i 1.2s ease-in-out infinite;
}
.qat__dots span:nth-child(2)[b-mfezcz7t8i] { animation-delay: .2s; }
.qat__dots span:nth-child(3)[b-mfezcz7t8i] { animation-delay: .4s; }

@keyframes qat-breathe-b-mfezcz7t8i {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.25) rotate(12deg); }
}
@keyframes qat-twinkle-b-mfezcz7t8i {
    0%, 100% { opacity: 0; transform: scale(.4); }
    50% { opacity: .9; transform: scale(1); }
}
@keyframes qat-dot-b-mfezcz7t8i {
    0%, 100% { opacity: .25; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
    .qat__spark[b-mfezcz7t8i], .qat__spark[b-mfezcz7t8i]::before, .qat__spark[b-mfezcz7t8i]::after, .qat__dots span[b-mfezcz7t8i] { animation: none; }
    .qat__spark[b-mfezcz7t8i]::before, .qat__spark[b-mfezcz7t8i]::after { opacity: .6; transform: none; }
    .qat__dots span[b-mfezcz7t8i] { opacity: .7; }
}
/* _content/Rame.Blazor.Server/Components/Quotations/QuotationBuilder.razor.rz.scp.css */
/* Quotation Builder — bespoke, sketch-inspired UI.
   Uses the Rame Design System tokens + per-client --rame-brand accent.
   Native HTML controls (no DevExpress chrome) styled here, fully scoped to this page. */

.qb[b-t41v94v2bs] {
    --brand: var(--rame-brand, var(--rame-primary, #0f6cbd));
    --qf-radius: 9px;
    --qf-border: var(--rame-border-dark, #d0d3d9);
    font-family: 'DM Sans', var(--rame-font-family, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--rame-bg-secondary, #f7f8fa);
    font-size: var(--rame-text-base, 13px);
    color: var(--rame-text-primary, #1c1e21);
}

/* ===== Topbar ===== */
.qb__topbar[b-t41v94v2bs] {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: var(--rame-space-3, 12px);
    padding: 11px var(--rame-space-4, 16px);
    background: var(--rame-bg-primary, #fff);
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
    box-shadow: var(--rame-shadow-xs, 0 1px 2px rgba(0,0,0,.05));
    flex-wrap: wrap;
}
.qb__back[b-t41v94v2bs] {
    border: 1.5px solid var(--qf-border); background: var(--rame-bg-primary, #fff);
    border-radius: var(--qf-radius); width: 34px; height: 34px; cursor: pointer;
    font-size: 16px; color: var(--rame-text-secondary, #65676b); transition: all .15s;
}
.qb__back:hover[b-t41v94v2bs] { border-color: var(--brand); color: var(--brand); }
.qb__heading[b-t41v94v2bs] { display: flex; align-items: center; gap: var(--rame-space-2, 8px); }
.qb__title[b-t41v94v2bs] { font-weight: 700; font-size: var(--rame-text-lg, 15px); }
.qb__chip[b-t41v94v2bs] { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 3px 10px; border-radius: 20px; background: var(--rame-bg-tertiary, #f0f2f5); color: var(--rame-text-secondary, #65676b); }
.qb__chip--draft[b-t41v94v2bs] { background: #fff3e0; color: #e65100; }
.qb__chip--sent[b-t41v94v2bs] { background: #e3f2fd; color: #1565c0; }
.qb__chip--accepted[b-t41v94v2bs] { background: #e6f9ed; color: #1b8a4b; }
.qb__chip--rejected[b-t41v94v2bs], .qb__chip--expired[b-t41v94v2bs] { background: #ffebee; color: #c62828; }
.qb__anchors[b-t41v94v2bs] { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.qb__anchors button[b-t41v94v2bs] { font-size: 11px; font-weight: 600; color: var(--rame-text-secondary, #65676b); background: none; border: none; cursor: pointer; padding: 6px 11px; border-radius: 7px; transition: all .15s; }
.qb__anchors button:hover[b-t41v94v2bs] { background: color-mix(in srgb, var(--brand) 9%, transparent); color: var(--brand); }
.qb__save[b-t41v94v2bs] { margin-left: var(--rame-space-2, 8px); }

/* Context banner: makes it explicit the quotation belongs to a specific chat/lead. */
.qb__context[b-t41v94v2bs] {
    display: flex; align-items: center; gap: 8px;
    padding: 8px var(--rame-space-4, 16px);
    font-size: var(--rame-text-sm, 13px);
    color: var(--rame-text-secondary, #65676b);
    background: color-mix(in srgb, var(--brand) 7%, var(--rame-bg-primary, #fff));
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
}
.qb__context strong[b-t41v94v2bs] { color: var(--rame-text-primary, #1c1e21); }

/* ===== Split layout ===== */
/* Fluid two-column split: the preview rail grows with the viewport (wider on laptops) instead of a
   fixed width, clamped so it never gets too narrow or absurdly wide. Stacks on small screens. */
.qb__layout[b-t41v94v2bs] { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) clamp(440px, 42%, 720px); grid-template-rows: minmax(0, 1fr); gap: var(--rame-space-4, 16px); padding: var(--rame-space-4, 16px); overflow: hidden; min-height: 0; }
.qb__canvas[b-t41v94v2bs] { overflow-y: auto; padding-right: var(--rame-space-2, 8px); display: flex; flex-direction: column; gap: var(--rame-space-4, 16px); }
/* Rail fills the full row height so the live preview uses all available vertical space. */
.qb__rail[b-t41v94v2bs] { display: flex; flex-direction: column; gap: var(--rame-space-3, 12px); align-self: stretch; min-height: 0; overflow-y: auto; }

/* Narrow screens (tablets / small laptops): stack the form on top and the preview below. */
@media (max-width: 980px) {
    .qb__layout[b-t41v94v2bs] { grid-template-columns: 1fr; grid-template-rows: auto minmax(360px, 60vh); overflow-y: auto; }
    .qb__canvas[b-t41v94v2bs] { overflow-y: visible; }
    .qb__rail[b-t41v94v2bs] { min-height: 360px; }
}

/* ===== Cards ===== */
.qb-card[b-t41v94v2bs] { background: var(--rame-bg-primary, #fff); border: 1px solid var(--rame-border-light, #e4e6eb); border-radius: 14px; padding: 18px 20px; box-shadow: var(--rame-shadow-xs, 0 1px 2px rgba(0,0,0,.05)); scroll-margin-top: 70px; display: flex; flex-direction: column; gap: 14px; }
.qb-card__head[b-t41v94v2bs] { display: flex; align-items: center; gap: var(--rame-space-2, 8px); }
.qb-card__head h3[b-t41v94v2bs] { font-size: var(--rame-text-lg, 15px); font-weight: 700; color: var(--brand); margin: 0; flex: 1; }
.qb-card__head-action[b-t41v94v2bs] { margin-left: auto; }

.qb-grid[b-t41v94v2bs] { display: grid; gap: 12px; }
.qb-grid--2[b-t41v94v2bs] { grid-template-columns: 1fr 1fr; }
.qb-grid--3[b-t41v94v2bs] { grid-template-columns: 1fr 1fr 1fr; }
.qb-grid--4[b-t41v94v2bs] { grid-template-columns: 1fr 1fr 1fr 1fr; }
.qb-grid--ground[b-t41v94v2bs] { grid-template-columns: 1.5fr 1.5fr 130px 1fr 32px; align-items: end; }
.qb-grid--hl[b-t41v94v2bs] { grid-template-columns: 1fr 90px 2fr 32px; align-items: end; }
.qb-grid--hotelrow[b-t41v94v2bs] { display: flex; gap: 12px; align-items: flex-end; }
.qb-grid--hotelrow > .qb-field[b-t41v94v2bs] { flex: 1; min-width: 0; }
.qb-grid--hotelrow > .qb-remove[b-t41v94v2bs] { flex: 0 0 auto; margin-bottom: 6px; }
.qb-field[b-t41v94v2bs] { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.qb-field label[b-t41v94v2bs] { font-size: 10px; font-weight: 600; color: var(--rame-text-secondary, #65676b); text-transform: uppercase; letter-spacing: .4px; }
.qb-field--narrow[b-t41v94v2bs] { max-width: 220px; }

/* ===== Native form controls (replace DevExpress) ===== */
.qf-in[b-t41v94v2bs] {
    width: 100%; box-sizing: border-box;
    border: 1.5px solid var(--qf-border); border-radius: var(--qf-radius);
    padding: 8px 11px; font-size: var(--rame-text-base, 13px); font-family: inherit;
    color: var(--rame-text-primary, #1c1e21); background: var(--rame-bg-primary, #fff);
    outline: none; transition: border-color .15s, box-shadow .15s;
}
.qf-in[b-t41v94v2bs]::placeholder { color: var(--rame-text-tertiary, #8a8d91); }
.qf-in:focus[b-t41v94v2bs] { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent); }
.qf-in[readonly][b-t41v94v2bs] { background: var(--rame-bg-tertiary, #f0f2f5); color: var(--rame-text-secondary, #65676b); cursor: default; }
.qf-ta[b-t41v94v2bs] { resize: vertical; min-height: 58px; line-height: 1.5; }
.qf-in--iata[b-t41v94v2bs] { text-transform: uppercase; font-weight: 700; letter-spacing: 1.5px; text-align: center; }
.qf-sel[b-t41v94v2bs] {
    appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a7890' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 11px center;
}

/* ===== Switch toggle ===== */
.qf-sw[b-t41v94v2bs] { position: relative; display: inline-block; width: 38px; height: 21px; flex-shrink: 0; }
.qf-sw input[b-t41v94v2bs] { position: absolute; opacity: 0; width: 0; height: 0; }
.qf-sw-sl[b-t41v94v2bs] { position: absolute; inset: 0; background: var(--qf-border); border-radius: 11px; cursor: pointer; transition: .2s; }
.qf-sw-sl[b-t41v94v2bs]::before { content: ''; position: absolute; width: 15px; height: 15px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.qf-sw input:checked + .qf-sw-sl[b-t41v94v2bs] { background: var(--brand); }
.qf-sw input:checked + .qf-sw-sl[b-t41v94v2bs]::before { transform: translateX(17px); }

/* ===== Buttons ===== */
.qf-btn[b-t41v94v2bs] { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1.5px solid transparent; border-radius: var(--qf-radius); padding: 8px 15px; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .15s; white-space: nowrap; }
.qf-btn:disabled[b-t41v94v2bs] { opacity: .55; cursor: not-allowed; }
.qf-btn--ghost[b-t41v94v2bs] { background: var(--rame-bg-primary, #fff); border-color: var(--qf-border); color: var(--rame-text-secondary, #65676b); }
.qf-btn--ghost:hover:not(:disabled)[b-t41v94v2bs] { border-color: var(--brand); color: var(--brand); }
.qf-btn--primary[b-t41v94v2bs] { background: var(--brand); color: #fff; }
.qf-btn--primary:hover:not(:disabled)[b-t41v94v2bs] { filter: brightness(.94); transform: translateY(-1px); }
.qf-btn--success[b-t41v94v2bs] { background: var(--rame-success, #25d366); color: #fff; }
.qf-btn--success:hover:not(:disabled)[b-t41v94v2bs] { filter: brightness(.96); }
.qf-btn--ai[b-t41v94v2bs] { background: var(--brand); color: #fff; }
.qf-btn--ai:hover:not(:disabled)[b-t41v94v2bs] { filter: brightness(.94); }
/* AI working state: sheen sweeping across the button while parsing */
.qf-btn--ai.is-thinking[b-t41v94v2bs] {
    background: linear-gradient(110deg, var(--brand) 25%, color-mix(in srgb, var(--brand) 70%, #fff) 50%, var(--brand) 75%);
    background-size: 250% 100%;
    animation: qb-ai-sheen-b-t41v94v2bs 1.8s linear infinite;
}
.qf-btn--ai.is-thinking:disabled[b-t41v94v2bs] { opacity: 1; cursor: progress; }
@keyframes qb-ai-sheen-b-t41v94v2bs { from { background-position: 125% 0; } to { background-position: -125% 0; } }
@media (prefers-reduced-motion: reduce) { .qf-btn--ai.is-thinking[b-t41v94v2bs] { animation: none; background: var(--brand); } }
.qf-btn--block[b-t41v94v2bs] { width: 100%; }

/* ===== Sub-cards (flight blocks / hotel options) ===== */
.qb-subcard[b-t41v94v2bs] { border: 1px solid var(--rame-border-light, #e4e6eb); border-radius: 12px; padding: 14px; background: var(--rame-bg-secondary, #f7f8fa); display: flex; flex-direction: column; gap: 12px; }
.qb-subcard--rec[b-t41v94v2bs] { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.qb-subcard__head[b-t41v94v2bs] { display: flex; align-items: center; gap: var(--rame-space-2, 8px); font-weight: 600; font-size: var(--rame-text-sm, 12px); }
.qb-subcard__head > span:first-child[b-t41v94v2bs] { color: var(--rame-text-primary, #1c1e21); }
.qb-subcard__head .qb-remove[b-t41v94v2bs] { margin-left: auto; }
.qb-rec-toggle[b-t41v94v2bs] { font-size: 11px; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: var(--rame-text-secondary, #65676b); }
.qb-seg[b-t41v94v2bs] { background: var(--rame-bg-primary, #fff); border: 1px solid var(--rame-border-light, #e4e6eb); border-radius: 10px; padding: 12px; }

/* ===== Private panel (internal cost/fee data) ===== */
.qb-private[b-t41v94v2bs] { background: var(--rame-warning-lighter, #fff8ee); border: 1px solid var(--rame-warning-border, #f0d9a8); border-radius: 11px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.qb-private__head[b-t41v94v2bs] { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #b8860b; }
.qb-private-inline label[b-t41v94v2bs] { color: #b8860b; }

/* ===== PNR box ===== */
.qb-pnr[b-t41v94v2bs] { background: var(--rame-bg-secondary, #f7f8fa); border: 1.5px dashed color-mix(in srgb, var(--brand) 45%, var(--rame-border-medium, #e9edef)); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.qb-pnr__label[b-t41v94v2bs] { font-size: 10px; font-weight: 700; color: var(--rame-text-secondary, #65676b); text-transform: uppercase; letter-spacing: .4px; }
.qb-pnr__ta[b-t41v94v2bs] { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; background: var(--rame-bg-primary, #fff); }
.qb-pnr__actions[b-t41v94v2bs] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qb-pnr__photo-lbl[b-t41v94v2bs] { font-size: 11px; color: var(--rame-text-secondary, #65676b); font-weight: 600; }
.qb-hint[b-t41v94v2bs] { font-size: 11px; color: var(--rame-warning-text, #e65100); }

/* Price-only flight block: detail not loaded yet (no segments) */
.qb-pending[b-t41v94v2bs] { background: var(--rame-bg-secondary, #f7f8fa); border: 1.5px dashed var(--rame-border-medium, #e9edef); border-radius: 11px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.qb-pending__txt[b-t41v94v2bs] { font-size: 12px; font-weight: 600; color: var(--rame-text-secondary, #65676b); }
.qb-pending .qb-hint[b-t41v94v2bs] { color: var(--rame-text-muted, #8a8d91); }

/* ===== File upload (styled label, hides native input) ===== */
.qb-upload[b-t41v94v2bs] { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 7px 13px; border: 1.5px solid var(--qf-border); border-radius: var(--qf-radius); background: var(--rame-bg-primary, #fff); font-size: 11px; font-weight: 600; color: var(--rame-text-secondary, #65676b); transition: all .15s; }
.qb-upload:hover[b-t41v94v2bs] { border-color: var(--brand); color: var(--brand); }
.qb-upload[b-t41v94v2bs]  input[type="file"] { display: none; }

/* ===== Add / remove ===== */
.qb-add[b-t41v94v2bs] { display: inline-flex; align-items: center; gap: 6px; width: 100%; justify-content: center; border: 1.5px dashed var(--qf-border); background: transparent; color: var(--rame-text-secondary, #65676b); border-radius: 10px; padding: 11px; cursor: pointer; font-size: 12px; font-weight: 600; font-family: inherit; transition: all .15s; }
.qb-add:hover[b-t41v94v2bs] { border-color: var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, transparent); }
.qb-add-link[b-t41v94v2bs] { background: none; border: none; color: var(--brand); cursor: pointer; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; font-family: inherit; align-self: flex-start; }
.qb-remove[b-t41v94v2bs] { background: none; border: none; color: var(--rame-text-muted, #b0b3b8); cursor: pointer; font-size: 11px; font-weight: 600; font-family: inherit; padding: 4px 6px; border-radius: 6px; transition: all .15s; }
.qb-remove:hover[b-t41v94v2bs] { color: var(--rame-error, #ef5350); background: #fff0f0; }
.qb-remove--inline[b-t41v94v2bs] { font-size: 14px; }

/* Hotel catalog link/create affordances (build-time) */
.qb-catalog-add[b-t41v94v2bs] { background: none; border: none; color: var(--brand); cursor: pointer; font-size: 10.5px; font-weight: 600; font-family: inherit; padding: 3px 0 0; display: inline-flex; align-items: center; gap: 4px; }
.qb-catalog-add:hover[b-t41v94v2bs] { text-decoration: underline; }
.qb-catalog-chip[b-t41v94v2bs] { display: inline-block; margin-top: 3px; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }

/* ===== IATA hint ===== */
.qb-iata[b-t41v94v2bs] { position: relative; }
.qb-iata-hint[b-t41v94v2bs] { font-size: 10px; color: var(--rame-text-tertiary, #8a8d91); min-height: 13px; }

/* ===== Tramo card ===== */
.qb-tramo[b-t41v94v2bs] { border: 1px solid var(--rame-border-light, #e4e6eb); border-radius: 11px; padding: 12px; background: var(--rame-bg-primary, #fff); }
.qb-tramo__head[b-t41v94v2bs] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.qb-tramo__label[b-t41v94v2bs] { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--rame-text-primary, #1c1e21); }
.qb-tramo__grid[b-t41v94v2bs] { display: grid; grid-template-columns: 1.1fr 1fr .8fr 1fr .8fr auto; gap: 8px; align-items: start; }
.qb-tramo__plus[b-t41v94v2bs] { align-items: flex-start; }
@media (max-width: 680px) { .qb-tramo__grid[b-t41v94v2bs] { grid-template-columns: 1fr 1fr; } }

/* ===== Hotel mode cards ===== */
.qb-modecards[b-t41v94v2bs] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rame-space-2, 8px); }
.qb-modecard[b-t41v94v2bs] { text-align: left; cursor: pointer; border: 1.5px solid var(--rame-border-light, #e4e6eb); border-radius: 11px; padding: 13px 16px; background: var(--rame-bg-primary, #fff); transition: all .15s; display: flex; flex-direction: column; gap: 3px; font-family: inherit; }
.qb-modecard:hover[b-t41v94v2bs] { border-color: var(--brand); }
.qb-modecard--on[b-t41v94v2bs] { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent); }
.qb-modecard strong[b-t41v94v2bs] { font-size: 12px; font-weight: 700; color: var(--rame-text-primary, #1c1e21); }
.qb-modecard--on strong[b-t41v94v2bs] { color: var(--brand); }
.qb-modecard span[b-t41v94v2bs] { font-size: 11px; color: var(--rame-text-secondary, #65676b); line-height: 1.4; }

/* ===== Multi-select chips (occupancy tiers) ===== */
.qb-chips[b-t41v94v2bs] { display: flex; gap: 7px; flex-wrap: wrap; }
.qb-chip[b-t41v94v2bs] { padding: 6px 14px; border-radius: var(--rame-radius-pill, 22px); border: 1.5px solid var(--qf-border); font-size: 12px; font-weight: 600; cursor: pointer; color: var(--rame-text-secondary, #65676b); background: var(--rame-bg-primary, #fff); font-family: inherit; transition: all .15s; }
.qb-chip:hover[b-t41v94v2bs] { border-color: var(--brand); color: var(--brand); }
.qb-chip--on[b-t41v94v2bs] { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }

/* Manual per-base price inputs (shown under the occupancy chips) */
.qb-occ-prices[b-t41v94v2bs] { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.qb-occ-prices .qb-hint[b-t41v94v2bs] { margin-bottom: 2px; }
.qb-occ-price[b-t41v94v2bs] { display: flex; align-items: center; gap: 10px; }
.qb-occ-price label[b-t41v94v2bs] { flex: 1; font-size: var(--rame-text-sm, 12px); color: var(--rame-text-secondary, #65676b); }
.qb-occ-price .qf-in[b-t41v94v2bs] { width: 150px; flex-shrink: 0; }

/* ===== Price rail — occupancy tiers ===== */
.qb__price-occ[b-t41v94v2bs] { display: flex; align-items: baseline; justify-content: space-between; padding: 3px 0; }
.qb__price-occ > span:first-child[b-t41v94v2bs] { font-size: 11px; opacity: .8; }
.qb__price-occ-val[b-t41v94v2bs] { font-size: 20px; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .qb-modecards[b-t41v94v2bs] { grid-template-columns: 1fr; } }

/* ===== Toggles ===== */
.qb-toggles[b-t41v94v2bs] { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--rame-border-light, #e4e6eb); }
.qb-toggle[b-t41v94v2bs] { display: flex; align-items: center; gap: 10px; font-size: var(--rame-text-base, 13px); color: var(--rame-text-primary, #1c1e21); }

/* ===== Overrides (collapsible) ===== */
.qb-overrides[b-t41v94v2bs] { border-top: 1px solid var(--rame-border-light, #e4e6eb); padding-top: 12px; }
.qb-overrides summary[b-t41v94v2bs] { font-size: var(--rame-text-sm, 12px); font-weight: 600; color: var(--brand); cursor: pointer; }
.qb-overrides .qb-field[b-t41v94v2bs] { margin-top: 10px; }

/* ===== Cover photo (URL + picker trigger) ===== */
.qb-cover-row[b-t41v94v2bs] { display: flex; gap: var(--rame-space-2, 8px); align-items: center; }
.qb-cover-row .qf-in[b-t41v94v2bs] { flex: 1; }
.qb-cover-row .qf-btn[b-t41v94v2bs] { flex-shrink: 0; }
.qb-cover__credit[b-t41v94v2bs] { display: block; margin-top: 6px; }
.qb-cover__credit a[b-t41v94v2bs] { color: var(--brand); text-decoration: none; }
.qb-cover__credit a:hover[b-t41v94v2bs] { text-decoration: underline; }

/* ===== Photo picker modal ===== */
.qb-modal[b-t41v94v2bs] { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(17, 19, 24, .55); backdrop-filter: blur(2px); }
.qb-modal__panel[b-t41v94v2bs] { width: 100%; max-width: 640px; max-height: 86vh; display: flex; flex-direction: column; gap: 12px; background: var(--rame-bg-primary, #fff); border-radius: 16px; padding: 18px 20px 16px; box-shadow: 0 16px 48px rgba(0,0,0,.28); }
.qb-modal__panel--sm[b-t41v94v2bs] { max-width: 380px; }
.qb-modal__actions[b-t41v94v2bs] { display: flex; justify-content: flex-end; gap: 8px; }
.qb-field--required label[b-t41v94v2bs] { color: var(--rame-error, #ef5350); }
.qb-modal__head[b-t41v94v2bs] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qb-modal__title[b-t41v94v2bs] { font-size: var(--rame-text-lg, 15px); font-weight: 700; color: var(--rame-text-primary, #1c1e21); }
.qb-modal__x[b-t41v94v2bs] { border: none; background: none; cursor: pointer; font-size: 16px; line-height: 1; color: var(--rame-text-tertiary, #8a8d91); width: 30px; height: 30px; border-radius: 8px; transition: all .12s; }
.qb-modal__x:hover[b-t41v94v2bs] { background: var(--rame-bg-tertiary, #f0f2f5); color: var(--rame-text-primary, #1c1e21); }
.qb-modal__state[b-t41v94v2bs] { font-size: var(--rame-text-sm, 12px); color: var(--rame-text-secondary, #65676b); padding: 18px 0; text-align: center; }
.qb-modal__grid[b-t41v94v2bs] { grid-template-columns: repeat(4, 1fr); overflow-y: auto; margin-top: 0; padding: 2px; min-height: 0; }
.qb-modal__grid .qb-unsplash__item img[b-t41v94v2bs] { height: 104px; }
.qb-modal__credit[b-t41v94v2bs] { font-size: 10px; color: var(--rame-text-tertiary, #8a8d91); text-align: right; }

/* ===== Unsplash result grid ===== */
.qb-unsplash__search[b-t41v94v2bs] { display: flex; gap: var(--rame-space-2, 8px); align-items: center; }
.qb-unsplash__search .qf-in[b-t41v94v2bs] { flex: 1; }
.qb-unsplash__grid[b-t41v94v2bs] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.qb-unsplash__item[b-t41v94v2bs] { position: relative; padding: 0; border: 2px solid transparent; border-radius: var(--rame-radius-lg, 10px); overflow: hidden; cursor: pointer; background: none; transition: border-color .12s ease, transform .12s ease; }
.qb-unsplash__item:hover[b-t41v94v2bs] { border-color: var(--brand); transform: translateY(-1px); }
.qb-unsplash__item img[b-t41v94v2bs] { width: 100%; height: 96px; object-fit: cover; display: block; }
.qb-unsplash__author[b-t41v94v2bs] { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 7px 4px; font-size: 9.5px; line-height: 1.2; color: #fff; text-align: left; background: linear-gradient(transparent, rgba(0,0,0,.7)); opacity: 0; transition: opacity .12s ease; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-unsplash__item:hover .qb-unsplash__author[b-t41v94v2bs] { opacity: 1; }
.qb-unsplash__item.is-picked[b-t41v94v2bs] { border-color: var(--brand); }
.qb-unsplash__check[b-t41v94v2bs] { position: absolute; top: 5px; right: 5px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); box-shadow: 0 1px 4px rgba(0,0,0,.3); }

/* ===== Live preview ===== */
.qb__preview[b-t41v94v2bs] { background: var(--rame-bg-primary, #fff); border: 1px solid var(--rame-border-light, #e4e6eb); border-radius: 14px; overflow: hidden; box-shadow: var(--rame-shadow-sm, 0 1px 3px rgba(0,0,0,.08)); display: flex; flex-direction: column; min-height: 360px; flex: 1; }
.qb__preview-label[b-t41v94v2bs] { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--rame-text-tertiary, #8a8d91); padding: 9px 13px; border-bottom: 1px solid var(--rame-border-light, #e4e6eb); }
.qb__preview-frame[b-t41v94v2bs] { width: 100%; flex: 1; border: none; background: #fff; }

/* ===== Price rail ===== */
.qb__price[b-t41v94v2bs] { background: var(--rame-text-primary, #1c1e21); color: #fff; border-radius: 14px; padding: 18px; text-align: center; }
.qb__price-lbl[b-t41v94v2bs] { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; opacity: .7; }
.qb__price-val[b-t41v94v2bs] { font-size: 32px; font-weight: 800; line-height: 1.1; margin-top: 4px; color: var(--brand); font-variant-numeric: tabular-nums; }
.qb__price-tot[b-t41v94v2bs] { font-size: var(--rame-text-sm, 12px); opacity: .75; margin-top: 4px; font-variant-numeric: tabular-nums; }

.qb__buttons[b-t41v94v2bs] { display: flex; flex-direction: column; gap: var(--rame-space-2, 8px); }
.qb__msg[b-t41v94v2bs] { font-size: var(--rame-text-sm, 12px); padding: 9px 12px; border-radius: 9px; }
.qb__msg--ok[b-t41v94v2bs] { background: var(--rame-success-light, #e6f9ed); color: #1b8a4b; }
.qb__msg--err[b-t41v94v2bs] { background: var(--rame-error-light, #ffebee); color: var(--rame-error-text, #c62828); }

/* ===== Loading ===== */
.qb-loading[b-t41v94v2bs] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 60vh; color: var(--rame-text-secondary, #65676b); }
.qb-spinner[b-t41v94v2bs] { width: 32px; height: 32px; border: 3px solid var(--rame-border-light, #e4e6eb); border-top-color: var(--brand); border-radius: 50%; animation: qb-spin-b-t41v94v2bs .7s linear infinite; }
@keyframes qb-spin-b-t41v94v2bs { to { transform: rotate(360deg); } }

/* ===== Responsive ===== */
@media (max-width: 1100px) {
    .qb__layout[b-t41v94v2bs] { grid-template-columns: 1fr; overflow: visible; }
    .qb__canvas[b-t41v94v2bs] { overflow-y: visible; }
    .qb__rail[b-t41v94v2bs] { position: static; max-height: none; }
    .qb__preview[b-t41v94v2bs] { min-height: 300px; }
}
@media (max-width: 640px) {
    .qb-grid--2[b-t41v94v2bs], .qb-grid--3[b-t41v94v2bs], .qb-grid--4[b-t41v94v2bs], .qb-grid--ground[b-t41v94v2bs] { grid-template-columns: 1fr 1fr; }
}

/* ===== Dark mode ===== */
:global([data-rame-theme="dark"]) .qb[b-t41v94v2bs] { background: var(--rame-bg-primary, #1e1e1e); }
:global([data-rame-theme="dark"]) .qb__topbar[b-t41v94v2bs],
:global([data-rame-theme="dark"]) .qb-card[b-t41v94v2bs],
:global([data-rame-theme="dark"]) .qb__preview[b-t41v94v2bs] { background: var(--rame-bg-secondary, #282828); border-color: var(--rame-border-medium, #505050); }
:global([data-rame-theme="dark"]) .qb-subcard[b-t41v94v2bs],
:global([data-rame-theme="dark"]) .qb-seg[b-t41v94v2bs],
:global([data-rame-theme="dark"]) .qb-tramo[b-t41v94v2bs],
:global([data-rame-theme="dark"]) .qb-modecard[b-t41v94v2bs],
:global([data-rame-theme="dark"]) .qb-upload[b-t41v94v2bs],
:global([data-rame-theme="dark"]) .qb-pnr[b-t41v94v2bs] { background: var(--rame-bg-tertiary, #333); }
:global([data-rame-theme="dark"]) .qf-in[b-t41v94v2bs] { background: var(--rame-bg-tertiary, #333); color: var(--rame-text-primary, #f0f0f0); border-color: var(--rame-border-medium, #505050); }
:global([data-rame-theme="dark"]) .qb__preview-frame[b-t41v94v2bs] { background: #fff; }

/* ===== Branch banner (mandatory, sits above everything so it can't be missed) ===== */
.qb-branch[b-t41v94v2bs] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 14px;
    border: 1.5px solid color-mix(in srgb, var(--brand) 35%, transparent);
    background: color-mix(in srgb, var(--brand) 8%, var(--rame-bg-primary, #fff));
    box-shadow: var(--rame-shadow-xs, 0 1px 2px rgba(0,0,0,.05));
}
.qb-branch--missing[b-t41v94v2bs] {
    border-color: var(--rame-error, #ef5350);
    background: color-mix(in srgb, var(--rame-error, #ef5350) 8%, var(--rame-bg-primary, #fff));
}
.qb-branch__icon[b-t41v94v2bs] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand);
}
.qb-branch--missing .qb-branch__icon[b-t41v94v2bs] { background: var(--rame-error, #ef5350); }
.qb-branch__body[b-t41v94v2bs] { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.qb-branch__label[b-t41v94v2bs] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--rame-text-secondary, #65676b);
}
.qb-branch__req[b-t41v94v2bs] { color: var(--rame-error, #ef5350); }
.qb-branch__select[b-t41v94v2bs] { max-width: 340px; font-weight: 600; }
.qb-branch__hint[b-t41v94v2bs] { font-size: 11px; color: var(--rame-text-tertiary, #8a8d91); }

:global([data-rame-theme="dark"]) .qb-branch[b-t41v94v2bs] {
    background: color-mix(in srgb, var(--brand) 16%, var(--rame-bg-secondary, #282828));
    border-color: color-mix(in srgb, var(--brand) 45%, transparent);
}

/* Circuit card: visually separates each circuit and its nested editors */
.qb-circuit[b-t41v94v2bs] {
    border: 1.5px solid var(--rame-border-medium, #d0d3d9);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 14px;
    background: var(--rame-bg-secondary, #f7f8fa);
}
.qb-circuit > .qb-field > label[b-t41v94v2bs] { font-weight: 600; }
.qb-circuit > * + *[b-t41v94v2bs] { margin-top: 12px; }
.qb-circuit > .qb-field[b-t41v94v2bs] { margin-top: 16px; }
.qb-circuit > .qb-field > label[b-t41v94v2bs] { text-transform: uppercase; letter-spacing: .4px; font-size: 11px; color: var(--rame-text-secondary, #65676b); }

/* Hint under "Marcar como enviada" and under the shared comparison dates. */
.qb-sent-hint[b-t41v94v2bs] {
    margin: -4px 0 8px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--rame-text-secondary, #65676b);
    text-align: center;
}
/* _content/Rame.Blazor.Server/Components/Quotations/QuotationCatalogPicker.razor.rz.scp.css */
/* Self-contained picker styling. CSS isolation does not cross component boundaries, so the input is
   styled here (matching the builder's .qf-in look via the shared --rame design tokens) rather than
   inheriting the parent's classes. */
.qcp[b-1tlnfh157c] { position: relative; }

.qcp__field[b-1tlnfh157c] { position: relative; display: flex; align-items: center; }

/* Leading icon: search by default, check when linked. */
.qcp__lead[b-1tlnfh157c] {
    position: absolute; left: 9px; display: inline-flex; align-items: center; pointer-events: none;
    color: var(--rame-text-tertiary, #8a8d91);
}
.qcp--linked .qcp__lead[b-1tlnfh157c] { color: var(--rame-brand, #0f6cbd); }

.qcp__input[b-1tlnfh157c] {
    width: 100%;
    border: 1.5px solid var(--rame-border-dark, #d0d3d9);
    border-radius: var(--rame-radius-lg, 9px);
    padding: 7px 11px 7px 30px;            /* room for the leading icon */
    font-family: inherit;
    font-size: var(--rame-text-base, 13px);
    color: var(--rame-text-primary, #1c1e21);
    background: var(--rame-bg-primary, #fff);
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.qcp__input[b-1tlnfh157c]::placeholder { color: var(--rame-text-tertiary, #b0b3b8); }
.qcp__input:focus[b-1tlnfh157c] {
    border-color: var(--rame-brand, #0f6cbd);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rame-brand, #0f6cbd) 14%, transparent);
}
.qcp__input--upper[b-1tlnfh157c] { text-transform: uppercase; font-weight: 700; letter-spacing: 1.5px; text-align: center; }

/* Linked state: brand accent bar + tinted field, so it reads clearly as "a real system record"
   (compact — works even in the narrow IATA columns; the check icon on the left confirms it). */
.qcp--linked .qcp__input[b-1tlnfh157c] {
    border-color: var(--rame-brand, #0f6cbd);
    box-shadow: inset 3px 0 0 var(--rame-brand, #0f6cbd);
    background: color-mix(in srgb, var(--rame-brand, #0f6cbd) 5%, var(--rame-bg-primary, #fff));
}

/* ----- Dropdown ----- */
.qcp__menu[b-1tlnfh157c] {
    position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 50;
    background: var(--rame-bg-primary, #fff);
    border: 1.5px solid var(--rame-border-dark, #d0d3d9);
    border-radius: var(--rame-radius-lg, 10px);
    box-shadow: 0 10px 28px rgba(0,0,0,.16);
    max-height: 270px; overflow-y: auto; padding: 5px;
    animation: qcp-pop-b-1tlnfh157c .12s ease-out;
}
@keyframes qcp-pop-b-1tlnfh157c { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.qcp__section[b-1tlnfh157c] {
    font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
    color: var(--rame-text-tertiary, #8a8d91);
    padding: 6px 9px 4px;
}

.qcp__item[b-1tlnfh157c] {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    font-family: inherit; padding: 7px 9px; border-radius: 7px; transition: background .12s;
}
.qcp__item:hover[b-1tlnfh157c] { background: color-mix(in srgb, var(--rame-brand, #0f6cbd) 9%, transparent); }
.qcp__item-main[b-1tlnfh157c] { font-size: 12.5px; font-weight: 600; color: var(--rame-text-primary, #1c1e21); }
.qcp__item-sub[b-1tlnfh157c] { font-size: 10.5px; color: var(--rame-text-secondary, #65676b); }

/* Status rows (searching / empty). */
.qcp__status[b-1tlnfh157c] {
    display: flex; align-items: center; gap: 8px;
    padding: 9px; font-size: 12px; color: var(--rame-text-secondary, #65676b);
}
.qcp__status--empty[b-1tlnfh157c] { font-style: italic; }
.qcp__spin[b-1tlnfh157c] {
    width: 13px; height: 13px; border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--rame-brand, #0f6cbd) 25%, transparent);
    border-top-color: var(--rame-brand, #0f6cbd);
    animation: qcp-spin-b-1tlnfh157c .6s linear infinite;
}
@keyframes qcp-spin-b-1tlnfh157c { to { transform: rotate(360deg); } }

/* Create action: visually distinct (filled accent icon) so "create new in the system" is unmistakable. */
.qcp__create[b-1tlnfh157c] {
    display: flex; align-items: center; gap: 9px;
    width: 100%; text-align: left; cursor: pointer; font-family: inherit;
    margin-top: 4px; padding: 8px 9px; border: none; border-radius: 7px;
    border-top: 1px solid var(--rame-border-light, #e4e6eb);
    background: color-mix(in srgb, var(--rame-brand, #0f6cbd) 7%, transparent);
    transition: background .12s;
}
.qcp__create:hover[b-1tlnfh157c] { background: color-mix(in srgb, var(--rame-brand, #0f6cbd) 14%, transparent); }
.qcp__create-icon[b-1tlnfh157c] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
    background: var(--rame-brand, #0f6cbd);
}
.qcp__create-body[b-1tlnfh157c] { display: flex; flex-direction: column; gap: 1px; }
.qcp__create-main[b-1tlnfh157c] { font-size: 12.5px; font-weight: 700; color: var(--rame-brand, #0f6cbd); }
.qcp__create-sub[b-1tlnfh157c] { font-size: 10px; color: var(--rame-text-secondary, #65676b); }

/* ----- Dark mode ----- */
:global([data-rame-theme="dark"]) .qcp__input[b-1tlnfh157c] {
    background: var(--rame-bg-tertiary, #2a2a2a);
    color: var(--rame-text-primary, #f0f0f0);
    border-color: var(--rame-border-medium, #505050);
}
:global([data-rame-theme="dark"]) .qcp--linked .qcp__input[b-1tlnfh157c] {
    background: color-mix(in srgb, var(--rame-brand, #0f6cbd) 16%, var(--rame-bg-tertiary, #2a2a2a));
    border-color: var(--rame-brand, #0f6cbd);
}
:global([data-rame-theme="dark"]) .qcp__menu[b-1tlnfh157c] {
    background: var(--rame-bg-tertiary, #2a2a2a);
    border-color: var(--rame-border-medium, #505050);
}
:global([data-rame-theme="dark"]) .qcp__item-main[b-1tlnfh157c] { color: var(--rame-text-primary, #f0f0f0); }
:global([data-rame-theme="dark"]) .qcp__create[b-1tlnfh157c] { border-top-color: var(--rame-border-medium, #505050); }
/* _content/Rame.Blazor.Server/Components/Quotations/QuotationClassChips.razor.rz.scp.css */
.qcc[b-190w46a4q2] { display: flex; gap: 7px; flex-wrap: wrap; }
.qcc__chip[b-190w46a4q2] {
    padding: 7px 15px;
    border-radius: var(--rame-radius-pill, 22px);
    border: 1.5px solid var(--rame-border-dark, #d0d3d9);
    font-size: var(--rame-text-sm, 12px);
    font-weight: 600;
    cursor: pointer;
    color: var(--rame-text-secondary, #65676b);
    background: var(--rame-bg-primary, #fff);
    font-family: inherit;
    transition: all .15s;
}
.qcc__chip:hover[b-190w46a4q2] { border-color: var(--rame-brand, #0f6cbd); color: var(--rame-brand, #0f6cbd); }
.qcc__chip--on[b-190w46a4q2] {
    border-color: var(--rame-brand, #0f6cbd);
    background: color-mix(in srgb, var(--rame-brand, #0f6cbd) 12%, transparent);
    color: var(--rame-brand, #0f6cbd);
}
:global([data-rame-theme="dark"]) .qcc__chip[b-190w46a4q2] {
    background: var(--rame-bg-tertiary, #333);
    color: var(--rame-text-secondary, #c8c8c8);
}
/* _content/Rame.Blazor.Server/Components/Quotations/QuotationMoneyInput.razor.rz.scp.css */
.qmi[b-bx2fnt3a98] { position: relative; display: flex; align-items: center; }
.qmi__input[b-bx2fnt3a98] {
    width: 100%;
    border: 1.5px solid var(--rame-border-dark, #d0d3d9);
    border-radius: var(--rame-radius-xl, 10px);
    padding: 7px 11px;
    font-size: var(--rame-text-base, 13px);
    font-family: inherit;
    color: var(--rame-text-primary, #1c1e21);
    background: var(--rame-bg-primary, #fff);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.qmi__input:focus[b-bx2fnt3a98] {
    border-color: var(--rame-brand, #0f6cbd);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rame-brand, #0f6cbd) 14%, transparent);
}
.qmi__affix[b-bx2fnt3a98] { position: absolute; font-size: 12px; font-weight: 600; color: var(--rame-text-secondary, #65676b); pointer-events: none; }
.qmi__affix--pre[b-bx2fnt3a98] { left: 11px; }
.qmi__affix--suf[b-bx2fnt3a98] { right: 12px; }
.qmi:has(.qmi__affix--pre) .qmi__input[b-bx2fnt3a98] { padding-left: 38px; }
.qmi--suffix .qmi__input[b-bx2fnt3a98] { padding-right: 30px; }

:global([data-rame-theme="dark"]) .qmi__input[b-bx2fnt3a98] {
    background: var(--rame-bg-tertiary, #333);
    color: var(--rame-text-primary, #f0f0f0);
    border-color: var(--rame-border-medium, #505050);
}
/* _content/Rame.Blazor.Server/Components/Quotations/TokenHighlightTextarea.razor.rz.scp.css */
.tht[b-6fatet8ach] { position: relative; width: 100%; }

/* The backdrop and the textarea MUST share identical box metrics so the highlighted
   text sits exactly under the (transparent) editable text. */
.tht__backdrop[b-6fatet8ach],
.tht__input[b-6fatet8ach] {
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1.5px solid transparent;
    border-radius: 9px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.45;
    letter-spacing: normal;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Backdrop: provides the field background + the colored text. */
.tht__backdrop[b-6fatet8ach] {
    position: absolute;
    inset: 0;
    color: var(--rame-text-primary, #1c1e21);
    background: var(--rame-bg-primary, #fff);
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

/* Textarea on top: transparent text (the backdrop shows through), visible caret. */
.tht__input[b-6fatet8ach] {
    position: relative;
    z-index: 1;
    display: block;
    min-height: 64px;
    resize: vertical;
    background: transparent;
    color: transparent;
    -webkit-text-fill-color: transparent;
    caret-color: var(--rame-text-primary, #1c1e21);
    border-color: var(--rame-border-dark, #d0d3d9);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tht__input[b-6fatet8ach]::placeholder {
    color: var(--rame-text-tertiary, #b0b3b8);
    -webkit-text-fill-color: var(--rame-text-tertiary, #b0b3b8);
}
.tht__input:focus[b-6fatet8ach] {
    border-color: var(--rame-primary, #0084ff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rame-primary, #0084ff) 14%, transparent);
}

/* The highlighted token. */
.tht__tok[b-6fatet8ach] {
    color: var(--rame-primary, #0084ff);
    font-weight: 600;
    background: color-mix(in srgb, var(--rame-primary, #0084ff) 12%, transparent);
    border-radius: 4px;
    padding: 0 1px;
}

:global([data-rame-theme="dark"]) .tht__backdrop[b-6fatet8ach] {
    background: var(--rame-bg-tertiary, #2a2a2a);
    color: var(--rame-text-primary, #f0f0f0);
}
:global([data-rame-theme="dark"]) .tht__input[b-6fatet8ach] {
    caret-color: var(--rame-text-primary, #f0f0f0);
    border-color: var(--rame-border-medium, #505050);
}
/* _content/Rame.Blazor.Server/Components/Shared/FilterSearchBar.razor.rz.scp.css */
/* FilterSearchBar — reusable search bar for filter panels */

.filter-search-bar[b-k01otlz8eq] {
    position: relative;
    padding: 10px 12px 8px;
    display: flex;
    align-items: center;
}

[b-k01otlz8eq] .fsb-icon {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
}

.fsb-input[b-k01otlz8eq] {
    width: 100%;
    padding: 8px 32px 8px 30px;
    border: 1.5px solid var(--rame-border-light, #e4e6eb);
    border-radius: var(--rame-radius-md, 8px);
    font-size: 12px;
    color: var(--rame-text-primary, #1c1e21);
    background: var(--rame-bg-secondary, #f7f8fa);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    line-height: 1.4;
}

.fsb-input[b-k01otlz8eq]::placeholder {
    color: var(--rame-text-tertiary, #8a8d91);
}

.fsb-input:focus[b-k01otlz8eq] {
    border-color: var(--rame-primary, #0084ff);
    background: var(--rame-bg-primary, #ffffff);
    box-shadow: 0 0 0 3px rgba(0, 132, 255, 0.10);
}

.fsb-clear[b-k01otlz8eq] {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: transparent;
    color: var(--rame-text-tertiary, #8a8d91);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: var(--rame-radius-sm, 4px);
    transition: color 0.15s ease;
    line-height: 1;
}

.fsb-clear:hover[b-k01otlz8eq] {
    color: var(--rame-error, #ef5350);
}

.fsb-badge[b-k01otlz8eq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 20px;
    background: var(--rame-primary, #0084ff);
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

/* ── Dark mode ── */

:global([data-rame-theme="dark"]) .fsb-input[b-k01otlz8eq] {
    background: var(--rame-bg-tertiary, #2d2d2d);
    border-color: var(--rame-border-medium, #4a4a4a);
    color: var(--rame-text-primary, #f0f0f0);
}

:global([data-rame-theme="dark"]) .fsb-input[b-k01otlz8eq]::placeholder {
    color: var(--rame-text-tertiary, #888);
}

:global([data-rame-theme="dark"]) .fsb-input:focus[b-k01otlz8eq] {
    border-color: var(--rame-primary, #3b9eff);
    background: var(--rame-bg-secondary, #252525);
    box-shadow: 0 0 0 3px rgba(59, 158, 255, 0.14);
}

:global([data-rame-theme="dark"]) .fsb-clear[b-k01otlz8eq] {
    color: #666;
}

:global([data-rame-theme="dark"]) .fsb-clear:hover[b-k01otlz8eq] {
    color: var(--rame-error, #ef5350);
}
/* _content/Rame.Blazor.Server/Components/Shared/ImageLightbox.razor.rz.scp.css */
/* Image Lightbox - Full Screen Image Viewer */

.lightbox-overlay[b-02dz86h71j] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    animation: lightboxFadeIn-b-02dz86h71j 0.2s ease-out;
    backdrop-filter: blur(8px);
}

@keyframes lightboxFadeIn-b-02dz86h71j {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.lightbox-container[b-02dz86h71j] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.lightbox-content[b-02dz86h71j] {
    max-width: 90%;
    max-height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.lightbox-image[b-02dz86h71j] {
    max-width: 100%;
    max-height: calc(100vh - 80px);
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: imageZoomIn-b-02dz86h71j 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes imageZoomIn-b-02dz86h71j {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.lightbox-video[b-02dz86h71j] {
    max-width: 100%;
    max-height: calc(100vh - 80px);
    border-radius: 8px;
    background: #000;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: imageZoomIn-b-02dz86h71j 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lightbox-close[b-02dz86h71j] {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10000;
    backdrop-filter: blur(10px);
}

.lightbox-close:hover[b-02dz86h71j] {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1) rotate(90deg);
}

.lightbox-close:active[b-02dz86h71j] {
    transform: scale(0.95) rotate(90deg);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .lightbox-container[b-02dz86h71j] {
        padding: 20px;
    }

    .lightbox-close[b-02dz86h71j] {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
    }

    .lightbox-image[b-02dz86h71j],
    .lightbox-video[b-02dz86h71j] {
        max-height: calc(100vh - 40px);
    }
}

/* Accessibility */
.lightbox-close:focus-visible[b-02dz86h71j] {
    outline: 2px solid var(--rame-success, #25d366);
    outline-offset: 2px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .lightbox-overlay[b-02dz86h71j],
    .lightbox-image[b-02dz86h71j],
    .lightbox-video[b-02dz86h71j],
    .lightbox-close:hover[b-02dz86h71j] {
        animation: none;
        transform: none !important;
    }
}
/* _content/Rame.Blazor.Server/Components/Templates/Sections/TemplateContentSection.razor.rz.scp.css */
.section-tab[b-503a0zkja2] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 720px;
}

.tab-header[b-503a0zkja2] {
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    margin-bottom: 4px;
}

.tab-title[b-503a0zkja2] {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary, #1e293b);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}

.tab-subtitle[b-503a0zkja2] {
    font-size: 13px;
    color: var(--color-text-secondary, #64748b);
    margin: 0;
}

.section-card[b-503a0zkja2] {
    background: var(--color-bg-primary, #ffffff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.section-card__header[b-503a0zkja2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--color-bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.section-card__body[b-503a0zkja2] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-title[b-503a0zkja2] {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-primary, #1e293b);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 0;
}

.field-row[b-503a0zkja2] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.field-label[b-503a0zkja2] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary, #1e293b);
}

.required[b-503a0zkja2] {
    color: #dc2626;
}

.field-hint[b-503a0zkja2] {
    font-size: 12px;
    color: var(--color-text-tertiary, #94a3b8);
    margin: 0;
    line-height: 1.5;
}

[b-503a0zkja2] .field-input {
    width: 100%;
}

.header-toggle[b-503a0zkja2] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary, #64748b);
    cursor: pointer;
    margin-left: auto;
}

.header-type-cards[b-503a0zkja2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    margin-top: 6px;
}

.header-type-card[b-503a0zkja2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 10px;
    background: var(--color-bg-primary, #ffffff);
    border: 1.5px solid var(--color-border, #e2e8f0);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.header-type-card:hover:not(:disabled)[b-503a0zkja2] {
    border-color: var(--color-primary, #6366f1);
    background: var(--color-bg-secondary, #f8fafc);
}

.header-type-card.is-selected[b-503a0zkja2] {
    border-color: var(--color-primary, #6366f1);
    background: var(--color-primary-light, #eef2ff);
    color: var(--color-primary, #6366f1);
}

.header-type-card:disabled[b-503a0zkja2] {
    opacity: 0.6;
    cursor: not-allowed;
}

.header-type-icon[b-503a0zkja2] {
    font-size: 22px;
    font-weight: 700;
}

.header-type-label[b-503a0zkja2] {
    font-size: 12px;
    font-weight: 500;
}

.field-row--inline[b-503a0zkja2] {
    display: flex;
    gap: 12px;
}

.field-col[b-503a0zkja2] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;
}

/* ============================================================
   Media preview card (after upload)
   ============================================================ */

.media-preview[b-503a0zkja2] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    margin-bottom: 10px;
}

.media-preview__thumb[b-503a0zkja2] {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-preview__image[b-503a0zkja2] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.media-preview__icon[b-503a0zkja2] {
    font-size: 28px;
    line-height: 1;
}

.media-preview__info[b-503a0zkja2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.media-preview__name[b-503a0zkja2] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text-primary, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.media-preview__meta[b-503a0zkja2] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--color-text-tertiary, #94a3b8);
}

.media-preview__badge[b-503a0zkja2] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.media-preview__link[b-503a0zkja2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-secondary, #64748b);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

.media-preview__link:hover[b-503a0zkja2] {
    color: var(--color-primary, #6366f1);
}

.media-preview__remove[b-503a0zkja2] {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #94a3b8;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.media-preview__remove:hover[b-503a0zkja2] {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

/* ============================================================
   Uploader (drag & drop surface)
   ============================================================ */

.uploader-wrapper[b-503a0zkja2] {
    position: relative;
    display: block;
}

/* Hide the native <input type=file> rendered by <InputFile> via ::deep,
   since CSS isolation scope doesn't reach children rendered by child components. */
[b-503a0zkja2] .uploader-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

[b-503a0zkja2] .uploader-input:disabled {
    cursor: not-allowed;
}

.uploader-surface[b-503a0zkja2] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--color-bg-primary, #ffffff);
    border: 1.5px dashed var(--color-border-medium, #cbd5e1);
    border-radius: 10px;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    pointer-events: none; /* clicks go to the input above */
}

.uploader-wrapper:hover .uploader-surface[b-503a0zkja2] {
    border-color: var(--color-primary, #6366f1);
    background: #f5f7ff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
}

.uploader-surface.is-uploading[b-503a0zkja2] {
    border-style: solid;
    border-color: var(--color-primary, #6366f1);
    background: #f5f7ff;
    cursor: progress;
}

.uploader-icon[b-503a0zkja2] {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-light, #eef2ff);
    color: var(--color-primary, #6366f1);
    border-radius: 10px;
    flex-shrink: 0;
}

.uploader-text[b-503a0zkja2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.uploader-text__primary[b-503a0zkja2] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text-primary, #0f172a);
    letter-spacing: -0.01em;
}

.uploader-text__secondary[b-503a0zkja2] {
    font-size: 12px;
    color: var(--color-text-tertiary, #94a3b8);
}

.uploader-spinner[b-503a0zkja2] {
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(99, 102, 241, 0.2);
    border-top-color: var(--color-primary, #6366f1);
    border-radius: 50%;
    animation: uploader-spin-b-503a0zkja2 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes uploader-spin-b-503a0zkja2 {
    to { transform: rotate(360deg); }
}

.field-error[b-503a0zkja2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    margin-top: 6px;
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    max-width: fit-content;
}

/* ============================================================
   Dark mode
   ============================================================ */

:global([data-rame-theme="dark"]) .media-preview[b-503a0zkja2] {
    background: linear-gradient(180deg, #1e293b 0%, #17212f 100%);
    border-color: #334155;
}

:global([data-rame-theme="dark"]) .media-preview__thumb[b-503a0zkja2] {
    background: #0f172a;
}

:global([data-rame-theme="dark"]) .media-preview__name[b-503a0zkja2] {
    color: #f1f5f9;
}

:global([data-rame-theme="dark"]) .media-preview__badge[b-503a0zkja2] {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.3);
}

:global([data-rame-theme="dark"]) .uploader-surface[b-503a0zkja2] {
    background: #1e293b;
    border-color: #334155;
}

:global([data-rame-theme="dark"]) .uploader-wrapper:hover .uploader-surface[b-503a0zkja2] {
    background: rgba(99, 102, 241, 0.08);
    border-color: #818cf8;
}

:global([data-rame-theme="dark"]) .uploader-icon[b-503a0zkja2] {
    background: rgba(99, 102, 241, 0.18);
    color: #a5b4fc;
}

:global([data-rame-theme="dark"]) .uploader-text__primary[b-503a0zkja2] {
    color: #f1f5f9;
}

:global([data-rame-theme="dark"]) .field-error[b-503a0zkja2] {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}
/* _content/Rame.Blazor.Server/Components/Templates/Sections/TemplateSettingsSection.razor.rz.scp.css */
.section-tab[b-jy5rjsnoc9] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 720px;
}

.tab-header[b-jy5rjsnoc9] {
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    margin-bottom: 4px;
}

.tab-title[b-jy5rjsnoc9] {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary, #1e293b);
    margin: 0 0 4px;
}

.tab-subtitle[b-jy5rjsnoc9] {
    font-size: 13px;
    color: var(--color-text-secondary, #64748b);
    margin: 0;
}

.section-card[b-jy5rjsnoc9] {
    background: var(--color-bg-primary, #ffffff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.section-card__body[b-jy5rjsnoc9] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.field-row[b-jy5rjsnoc9] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.field-label[b-jy5rjsnoc9] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary, #1e293b);
}

.field-hint[b-jy5rjsnoc9] {
    font-size: 12px;
    color: var(--color-text-tertiary, #94a3b8);
    margin: 0;
    line-height: 1.5;
}

[b-jy5rjsnoc9] .field-input {
    width: 100%;
}
/* _content/Rame.Blazor.Server/Components/Templates/Sections/TemplateStatsSection.razor.rz.scp.css */
.section-tab[b-cz20yg4i99] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 720px;
}

.tab-header[b-cz20yg4i99] {
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    margin-bottom: 4px;
}

.tab-title[b-cz20yg4i99] {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary, #1e293b);
    margin: 0 0 4px;
}

.tab-subtitle[b-cz20yg4i99] {
    font-size: 13px;
    color: var(--color-text-secondary, #64748b);
    margin: 0;
}

.stats-loading[b-cz20yg4i99] {
    padding: 24px;
    color: var(--color-text-secondary, #64748b);
    text-align: center;
}

.stats-empty[b-cz20yg4i99] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 16px;
    background: var(--color-bg-primary, #ffffff);
    border: 1px dashed #d1d5db;
    border-radius: 12px;
    text-align: center;
}

.stats-empty__icon[b-cz20yg4i99] {
    font-size: 40px;
}

.stats-empty__title[b-cz20yg4i99] {
    font-size: 15px;
    font-weight: 600;
    color: #374151;
    margin: 0;
}

.stats-empty__desc[b-cz20yg4i99] {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

.stats-grid[b-cz20yg4i99] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.stat-card[b-cz20yg4i99] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: var(--color-bg-primary, #ffffff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.stat-card__label[b-cz20yg4i99] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary, #64748b);
}

.stat-card__value[b-cz20yg4i99] {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text-primary, #0f172a);
    font-variant-numeric: tabular-nums;
}

.stat-card__value--error[b-cz20yg4i99] {
    color: #dc2626;
}

.stat-card__pct[b-cz20yg4i99] {
    font-size: 12px;
    color: var(--color-text-tertiary, #94a3b8);
    font-variant-numeric: tabular-nums;
}

.section-card[b-cz20yg4i99] {
    background: var(--color-bg-primary, #ffffff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.section-card__header[b-cz20yg4i99] {
    padding: 14px 20px;
    background: var(--color-bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.section-card__body[b-cz20yg4i99] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.section-title[b-cz20yg4i99] {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-primary, #1e293b);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 0;
}

.button-bar[b-cz20yg4i99] {
    display: grid;
    grid-template-columns: 180px 1fr 40px;
    align-items: center;
    gap: 12px;
}

.button-bar__label[b-cz20yg4i99] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.button-bar__text[b-cz20yg4i99] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.button-bar__payload[b-cz20yg4i99] {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: var(--color-text-tertiary, #94a3b8);
}

.button-bar__track[b-cz20yg4i99] {
    height: 8px;
    background: var(--color-bg-tertiary, #f1f5f9);
    border-radius: 4px;
    overflow: hidden;
}

.button-bar__fill[b-cz20yg4i99] {
    height: 100%;
    background: linear-gradient(90deg, #00a884 0%, #25d366 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.button-bar__count[b-cz20yg4i99] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary, #1e293b);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
/* _content/Rame.Blazor.Server/Components/Templates/Sections/TemplateStatusSection.razor.rz.scp.css */
.section-tab[b-alo5o3vw8u] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 720px;
}

.tab-header[b-alo5o3vw8u] {
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    margin-bottom: 4px;
}

.tab-title[b-alo5o3vw8u] {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary, #1e293b);
    margin: 0 0 4px;
}

.tab-subtitle[b-alo5o3vw8u] {
    font-size: 13px;
    color: var(--color-text-secondary, #64748b);
    margin: 0;
}

.section-card[b-alo5o3vw8u] {
    background: var(--color-bg-primary, #ffffff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.section-card__body[b-alo5o3vw8u] {
    padding: 20px;
}

.status-info[b-alo5o3vw8u] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info-row[b-alo5o3vw8u] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border-light, #f1f5f9);
}

.info-row:last-of-type[b-alo5o3vw8u] {
    border-bottom: none;
}

.info-row--alert[b-alo5o3vw8u] {
    background: #fee2e2;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #fca5a5;
}

.info-label[b-alo5o3vw8u] {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 180px;
}

.info-value[b-alo5o3vw8u] {
    font-size: 14px;
    color: var(--color-text-primary, #1e293b);
}

.info-value--mono[b-alo5o3vw8u] {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    word-break: break-all;
}

.status-description[b-alo5o3vw8u] {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--color-bg-secondary, #f8fafc);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-secondary, #475569);
}
/* _content/Rame.Blazor.Server/Components/Templates/TemplateButtonsEditor.razor.rz.scp.css */
.buttons-editor[b-q3c4xuwffc] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.be-header[b-q3c4xuwffc] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.be-header-text[b-q3c4xuwffc] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.be-title[b-q3c4xuwffc] {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.be-subtitle[b-q3c4xuwffc] {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

.be-header-right[b-q3c4xuwffc] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.be-counter[b-q3c4xuwffc] {
    padding: 4px 10px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 12px;
    font-weight: 600;
    border-radius: 12px;
}

.be-counter--full[b-q3c4xuwffc] {
    background: #fef3c7;
    color: #92400e;
}

.be-btn-primary[b-q3c4xuwffc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #00a884;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}

.be-btn-primary:hover:not(:disabled)[b-q3c4xuwffc] {
    background: #008f6f;
}

.be-btn-primary:disabled[b-q3c4xuwffc] {
    background: #d1d5db;
    cursor: not-allowed;
}

.be-warning[b-q3c4xuwffc] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    color: #92400e;
    font-size: 13px;
}

.be-warning svg[b-q3c4xuwffc] {
    flex-shrink: 0;
}

.be-empty[b-q3c4xuwffc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    text-align: center;
}

.be-empty-icon[b-q3c4xuwffc] {
    color: #9ca3af;
}

.be-empty-title[b-q3c4xuwffc] {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin: 0;
}

.be-empty-desc[b-q3c4xuwffc] {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    max-width: 380px;
}

.be-list[b-q3c4xuwffc] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.be-card[b-q3c4xuwffc] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.be-card:hover[b-q3c4xuwffc] {
    border-color: #d1d5db;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.be-card-top[b-q3c4xuwffc] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.be-order-chip[b-q3c4xuwffc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 24px;
    padding: 0 8px;
    background: #eff6ff;
    color: #1e40af;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid #bfdbfe;
}

.be-type-icon[b-q3c4xuwffc] {
    font-size: 18px;
    line-height: 1;
}

.be-reorder[b-q3c4xuwffc] {
    display: inline-flex;
    gap: 4px;
    margin-left: auto;
}

.be-btn-icon[b-q3c4xuwffc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.be-btn-icon:hover:not(:disabled)[b-q3c4xuwffc] {
    background: #f3f4f6;
    color: #1f2937;
    border-color: #d1d5db;
}

.be-btn-icon:disabled[b-q3c4xuwffc] {
    opacity: 0.4;
    cursor: not-allowed;
}

.be-btn-delete[b-q3c4xuwffc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent;
    color: #9ca3af;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.be-btn-delete:hover[b-q3c4xuwffc] {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

.be-fields[b-q3c4xuwffc] {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 1.2fr 1.6fr;
    gap: 10px;
}

.be-field[b-q3c4xuwffc] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.be-label[b-q3c4xuwffc] {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

[b-q3c4xuwffc] .be-input {
    width: 100%;
}

@media (max-width: 900px) {
    .be-fields[b-q3c4xuwffc] {
        grid-template-columns: 1fr;
    }
}
/* _content/Rame.Blazor.Server/Components/Templates/TemplateDesignerRoot.razor.rz.scp.css */
/* ============================================================
   TemplateDesignerRoot — Sidebar + content + preview layout
   ============================================================ */

.designer-root[b-507ud44n96] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-bg-secondary, #f8fafc);
    overflow: hidden;
    position: relative;
}

/* ── Saving overlay ── */

.saving-overlay[b-507ud44n96] {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(4px);
}

.saving-overlay__content[b-507ud44n96] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 48px;
    border-radius: 16px;
    background: var(--color-bg-primary, #ffffff);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
    border: 1px solid var(--color-border, #e2e8f0);
}

.saving-spinner[b-507ud44n96] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border, #e2e8f0);
    border-top-color: var(--color-primary, #6366f1);
    border-radius: 50%;
    animation: saving-spin-b-507ud44n96 0.7s linear infinite;
}

@keyframes saving-spin-b-507ud44n96 {
    to { transform: rotate(360deg); }
}

.saving-overlay__text[b-507ud44n96] {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary, #1e293b);
}

/* ── Header ── */

.designer-header[b-507ud44n96] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 56px;
    background: var(--color-bg-primary, #ffffff);
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    flex-shrink: 0;
    box-shadow: 0 1px 3px var(--color-shadow, rgba(0,0,0,0.06));
    z-index: 10;
}

.btn-back[b-507ud44n96] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--color-text-secondary, #64748b);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.btn-back:hover[b-507ud44n96] {
    background: var(--color-bg-tertiary, #f1f5f9);
    color: var(--color-text-primary, #1e293b);
}

.header-left[b-507ud44n96] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.header-template-info[b-507ud44n96] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.template-name[b-507ud44n96] {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.status-pill[b-507ud44n96] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}

.status-pill--draft[b-507ud44n96] {
    background: #f1f5f9;
    color: #475569;
}

.status-pill--pending[b-507ud44n96] {
    background: #fef3c7;
    color: #92400e;
}

.status-pill--approved[b-507ud44n96] {
    background: #dcfce7;
    color: #166534;
}

.status-pill--rejected[b-507ud44n96] {
    background: #fee2e2;
    color: #991b1b;
}

.status-pill--disabled[b-507ud44n96] {
    background: #e5e7eb;
    color: #374151;
}

.unsaved-pill[b-507ud44n96] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--color-warning-light, #fef3c7);
    color: #92400e;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}

.header-right[b-507ud44n96] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.inline-toast[b-507ud44n96] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inline-toast--error[b-507ud44n96] {
    background: var(--color-error-light, #fee2e2);
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.inline-toast--success[b-507ud44n96] {
    background: var(--color-success-light, #dcfce7);
    color: #166534;
    border: 1px solid #86efac;
}

.inline-toast--warning[b-507ud44n96] {
    background: var(--color-warning-light, #fef3c7);
    color: #92400e;
    border: 1px solid #fcd34d;
}

.btn-secondary[b-507ud44n96],
.btn-submit[b-507ud44n96],
.btn-save[b-507ud44n96] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-secondary[b-507ud44n96] {
    background: var(--color-bg-secondary, #f8fafc);
    border: 1.5px solid var(--color-border, #e2e8f0);
    color: var(--color-text-secondary, #64748b);
}

.btn-secondary:hover:not(:disabled)[b-507ud44n96] {
    background: var(--color-bg-tertiary, #f1f5f9);
    color: var(--color-text-primary, #1e293b);
}

.btn-submit[b-507ud44n96] {
    background: #00a884;
    border: 1.5px solid #00a884;
    color: white;
}

.btn-submit:hover:not(:disabled)[b-507ud44n96] {
    background: #008f6f;
    border-color: #008f6f;
}

.btn-submit:disabled[b-507ud44n96] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-save[b-507ud44n96] {
    border: 1.5px solid var(--color-border, #e2e8f0);
    background: var(--color-bg-secondary, #f8fafc);
    color: var(--color-text-tertiary, #94a3b8);
    cursor: not-allowed;
}

.btn-save--active[b-507ud44n96] {
    background: var(--color-primary, #6366f1);
    border-color: var(--color-primary, #6366f1);
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(99, 102, 241, 0.35);
}

.btn-save--active:hover[b-507ud44n96] {
    background: var(--color-primary-hover, #4f46e5);
    border-color: var(--color-primary-hover, #4f46e5);
}

/* ── Banners ── */

.locked-banner[b-507ud44n96],
.validation-banner[b-507ud44n96] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 20px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.locked-banner[b-507ud44n96] {
    background: #fef3c7;
    color: #92400e;
    border-bottom-color: #fde68a;
}

.validation-banner[b-507ud44n96] {
    background: #fee2e2;
    color: #991b1b;
    border-bottom-color: #fca5a5;
}

.locked-banner svg[b-507ud44n96],
.validation-banner svg[b-507ud44n96] {
    flex-shrink: 0;
    margin-top: 2px;
}

.locked-banner__content[b-507ud44n96],
.validation-banner__content[b-507ud44n96] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.locked-banner__title[b-507ud44n96],
.validation-banner__title[b-507ud44n96] {
    font-size: 13px;
    font-weight: 600;
}

.locked-banner__text[b-507ud44n96] {
    font-size: 12px;
    color: #78350f;
    line-height: 1.5;
}

.validation-banner__list[b-507ud44n96] {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    color: #7f1d1d;
    line-height: 1.6;
}

.validation-banner__more[b-507ud44n96] {
    font-style: italic;
    opacity: 0.75;
}

.submit-error-count[b-507ud44n96] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    margin-left: 6px;
    background: rgba(255,255,255,0.25);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}

/* ── Body ── */

.designer-body[b-507ud44n96] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.sidebar-nav[b-507ud44n96] {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 16px 10px;
    gap: 2px;
    background: var(--color-bg-primary, #ffffff);
    border-right: 1px solid var(--color-border, #e2e8f0);
    overflow-y: auto;
}

.nav-item[b-507ud44n96] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease, color 0.12s ease;
    position: relative;
    color: var(--color-text-secondary, #64748b);
}

.nav-item:hover[b-507ud44n96] {
    background: var(--color-bg-tertiary, #f1f5f9);
    color: var(--color-text-primary, #1e293b);
}

.nav-item--active[b-507ud44n96] {
    background: var(--color-primary-light, #e0e7ff);
    color: var(--color-primary, #6366f1);
}

.nav-item--active[b-507ud44n96]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: var(--color-primary, #6366f1);
    border-radius: 0 3px 3px 0;
}

.nav-icon[b-507ud44n96] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.nav-label[b-507ud44n96] {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.content-area[b-507ud44n96] {
    flex: 1;
    overflow-y: auto;
    padding: 28px 32px;
    min-width: 0;
}

/* ── Preview panel ── */

.preview-panel[b-507ud44n96] {
    width: 380px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-primary, #ffffff);
    border-left: 1px solid var(--color-border, #e2e8f0);
    overflow: hidden;
}

.preview-panel__header[b-507ud44n96] {
    padding: 14px 20px;
    background: var(--color-bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.preview-panel__title[b-507ud44n96] {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-primary, #1e293b);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.preview-panel__body[b-507ud44n96] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* ── Dark mode ── */

:global([data-rame-theme="dark"]) .designer-root[b-507ud44n96] {
    background: #0f172a;
}

:global([data-rame-theme="dark"]) .designer-header[b-507ud44n96],
:global([data-rame-theme="dark"]) .sidebar-nav[b-507ud44n96],
:global([data-rame-theme="dark"]) .preview-panel[b-507ud44n96] {
    background: #1e293b;
    border-color: #334155;
}

:global([data-rame-theme="dark"]) .template-name[b-507ud44n96] {
    color: #f1f5f9;
}

:global([data-rame-theme="dark"]) .nav-item[b-507ud44n96] {
    color: #94a3b8;
}

:global([data-rame-theme="dark"]) .nav-item:hover[b-507ud44n96] {
    background: #0f172a;
    color: #e2e8f0;
}

:global([data-rame-theme="dark"]) .nav-item--active[b-507ud44n96] {
    background: rgba(99, 102, 241, 0.18);
    color: #818cf8;
}

:global([data-rame-theme="dark"]) .preview-panel__header[b-507ud44n96] {
    background: #0f172a;
    border-bottom-color: #334155;
}

:global([data-rame-theme="dark"]) .preview-panel__title[b-507ud44n96] {
    color: #f1f5f9;
}
/* _content/Rame.Blazor.Server/Components/Templates/TemplateVariablesEditor.razor.rz.scp.css */
.variables-editor[b-msqpmsmo5r] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.ve-header[b-msqpmsmo5r] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.ve-header-text[b-msqpmsmo5r] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ve-title[b-msqpmsmo5r] {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.ve-subtitle[b-msqpmsmo5r] {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

.ve-btn-primary[b-msqpmsmo5r] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #00a884;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ve-btn-primary:hover[b-msqpmsmo5r] {
    background: #008f6f;
}

.ve-empty[b-msqpmsmo5r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    text-align: center;
}

.ve-empty-icon[b-msqpmsmo5r] {
    color: #9ca3af;
}

.ve-empty-title[b-msqpmsmo5r] {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin: 0;
}

.ve-empty-desc[b-msqpmsmo5r] {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    max-width: 320px;
}

.ve-list[b-msqpmsmo5r] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ve-card[b-msqpmsmo5r] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ve-card:hover[b-msqpmsmo5r] {
    border-color: #d1d5db;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ve-card-top[b-msqpmsmo5r] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ve-index-chip[b-msqpmsmo5r] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: #ecfdf5;
    color: #065f46;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid #a7f3d0;
}

.ve-btn-insert[b-msqpmsmo5r] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 5px 10px;
    background: transparent;
    color: #4b5563;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ve-btn-insert:hover[b-msqpmsmo5r] {
    background: #f3f4f6;
    color: #1f2937;
    border-color: #9ca3af;
}

.ve-btn-delete[b-msqpmsmo5r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent;
    color: #9ca3af;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ve-btn-delete:hover[b-msqpmsmo5r] {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

.ve-fields[b-msqpmsmo5r] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.ve-field[b-msqpmsmo5r] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ve-label[b-msqpmsmo5r] {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

[b-msqpmsmo5r] .ve-input {
    width: 100%;
}

@media (max-width: 900px) {
    .ve-fields[b-msqpmsmo5r] {
        grid-template-columns: 1fr;
    }
}
/* _content/Rame.Blazor.Server/Components/Workflows/BlockEditors/Actions/AssignSellerEditor.razor.rz.scp.css */
/* ========================================
   ASSIGN SELLER EDITOR
   Component for AssignSeller action configuration
   ======================================== */

.assign-seller-editor[b-ugmacwxr0c] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ========== FIELDS ========== */

.config-field[b-ugmacwxr0c] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label[b-ugmacwxr0c] {
    font-size: 12px;
    font-weight: 600;
    color: var(--rame-text-secondary, #555);
}

.field-hint[b-ugmacwxr0c] {
    font-size: 11px;
    color: var(--rame-text-tertiary, #94a3b8);
    font-style: italic;
}

/* ========== INPUT STYLES ========== */

[b-ugmacwxr0c] .config-input {
    width: 100%;
}

[b-ugmacwxr0c] .config-input .dxbs-editor-input-container {
    border-radius: 6px;
    border-color: var(--rame-border-light, #e2e8f0);
    background: var(--rame-bg-primary, #fff);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[b-ugmacwxr0c] .config-input .dxbs-editor-input-container:focus-within {
    border-color: var(--rame-primary, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* ========== DARK MODE ========== */

:root[data-theme="dark"] .assign-seller-editor[b-ugmacwxr0c] {
    /* Dark mode adjustments handled by CSS variables */
}
/* _content/Rame.Blazor.Server/Components/Workflows/BlockEditors/Actions/CallWebhookEditor.razor.rz.scp.css */
/* ========================================
   CALL WEBHOOK EDITOR
   Component for CallWebhook action configuration
   ======================================== */

.call-webhook-editor[b-vt3aizwcil] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ========== FIELDS ========== */

.config-field[b-vt3aizwcil] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label[b-vt3aizwcil] {
    font-size: 12px;
    font-weight: 600;
    color: var(--rame-text-secondary, #555);
}

.field-hint[b-vt3aizwcil] {
    font-size: 11px;
    color: var(--rame-text-tertiary, #94a3b8);
    font-style: italic;
}

/* ========== INPUT STYLES ========== */

[b-vt3aizwcil] .config-input {
    width: 100%;
}

[b-vt3aizwcil] .config-input .dxbs-editor-input-container {
    border-radius: 6px;
    border-color: var(--rame-border-light, #e2e8f0);
    background: var(--rame-bg-primary, #fff);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[b-vt3aizwcil] .config-input .dxbs-editor-input-container:focus-within {
    border-color: var(--rame-primary, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* ========== DARK MODE ========== */

:root[data-theme="dark"] .call-webhook-editor[b-vt3aizwcil] {
    /* Dark mode adjustments handled by CSS variables */
}
/* _content/Rame.Blazor.Server/Components/Workflows/BlockEditors/Actions/ChangeStageEditor.razor.rz.scp.css */
/* ========================================
   CHANGE STAGE EDITOR
   Component for ChangeStage action configuration
   ======================================== */

.change-stage-editor[b-9t2hlp50ec] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ========== FIELDS ========== */

.config-field[b-9t2hlp50ec] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label[b-9t2hlp50ec] {
    font-size: 12px;
    font-weight: 600;
    color: var(--rame-text-secondary, #555);
}

.field-hint[b-9t2hlp50ec] {
    font-size: 11px;
    color: var(--rame-text-tertiary, #94a3b8);
    font-style: italic;
}

/* ========== INPUT STYLES ========== */

[b-9t2hlp50ec] .config-input {
    width: 100%;
}

[b-9t2hlp50ec] .config-input .dxbs-editor-input-container {
    border-radius: 6px;
    border-color: var(--rame-border-light, #e2e8f0);
    background: var(--rame-bg-primary, #fff);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[b-9t2hlp50ec] .config-input .dxbs-editor-input-container:focus-within {
    border-color: var(--rame-primary, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* ========== STAGE ITEM ========== */

.stage-item[b-9t2hlp50ec] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.stage-color[b-9t2hlp50ec] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.stage-name[b-9t2hlp50ec] {
    color: var(--rame-text-primary, #334155);
    font-size: 13px;
}

/* ========== DARK MODE ========== */

:root[data-theme="dark"] .change-stage-editor[b-9t2hlp50ec] {
    /* Dark mode adjustments handled by CSS variables */
}
/* _content/Rame.Blazor.Server/Components/Workflows/BlockEditors/Actions/CreateOpportunityEditor.razor.rz.scp.css */
/* ========================================
   CREATE OPPORTUNITY EDITOR
   Component for CreateOpportunity action configuration
   ======================================== */

.create-opportunity-editor[b-33o28jxtj8] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ========== FIELDS ========== */

.config-field[b-33o28jxtj8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label[b-33o28jxtj8] {
    font-size: 12px;
    font-weight: 600;
    color: var(--rame-text-secondary, #555);
}

/* ========== INPUT STYLES (DevExpress deep) ========== */

[b-33o28jxtj8] .config-input {
    width: 100%;
}

[b-33o28jxtj8] .config-input .dxbs-editor-input-container {
    border-radius: 6px;
    border-color: var(--rame-border-light, #e2e8f0);
    background: var(--rame-bg-primary, #fff);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[b-33o28jxtj8] .config-input .dxbs-editor-input-container:focus-within {
    border-color: var(--rame-primary, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* ========== DARK MODE ========== */

:root[data-theme="dark"] .create-opportunity-editor[b-33o28jxtj8] {
    /* Dark mode adjustments handled by CSS variables */
}
/* _content/Rame.Blazor.Server/Components/Workflows/BlockEditors/Actions/CreateScheduledEventEditor.razor.rz.scp.css */
/* ========================================
   CREATE SCHEDULED EVENT EDITOR
   Component for CreateScheduledEvent action configuration
   ======================================== */

.create-scheduled-event-editor[b-3ibnq49am6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ========== FIELDS ========== */

.config-field[b-3ibnq49am6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.config-field--checkbox[b-3ibnq49am6] {
    flex-direction: row;
    align-items: center;
}

.field-label[b-3ibnq49am6] {
    font-size: 12px;
    font-weight: 600;
    color: var(--rame-text-secondary, #555);
}

.field-hint[b-3ibnq49am6] {
    font-size: 11px;
    color: var(--rame-text-tertiary, #94a3b8);
    font-style: italic;
}

.entity-context-label[b-3ibnq49am6] {
    font-size: 11px;
    color: var(--rame-text-secondary, #64748b);
    padding: 4px 8px;
    background: var(--rame-bg-secondary, #f1f5f9);
    border-radius: 4px;
    display: inline-block;
}

/* ========== INPUT STYLES ========== */

[b-3ibnq49am6] .config-input {
    width: 100%;
}

[b-3ibnq49am6] .config-input .dxbs-editor-input-container {
    border-radius: 6px;
    border-color: var(--rame-border-light, #e2e8f0);
    background: var(--rame-bg-primary, #fff);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[b-3ibnq49am6] .config-input .dxbs-editor-input-container:focus-within {
    border-color: var(--rame-primary, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* ========== DATE MODE SELECTOR ========== */

.start-date-mode-selector[b-3ibnq49am6] {
    display: flex;
    gap: 0;
    border: 1px solid var(--rame-border-light, #e2e8f0);
    border-radius: 6px;
    overflow: hidden;
}

.mode-tab[b-3ibnq49am6] {
    flex: 1;
    padding: 8px 12px;
    background: var(--rame-bg-secondary, #f8fafc);
    border: none;
    color: var(--rame-text-secondary, #64748b);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mode-tab:not(:last-child)[b-3ibnq49am6] {
    border-right: 1px solid var(--rame-border-light, #e2e8f0);
}

.mode-tab:hover:not(.mode-tab--active)[b-3ibnq49am6] {
    background: var(--rame-bg-primary, #fff);
    color: var(--rame-text-primary, #334155);
}

.mode-tab--active[b-3ibnq49am6] {
    background: var(--rame-primary, #3b82f6);
    color: white;
}

/* ========== DATE PROPERTY ITEM ========== */

.date-property-item[b-3ibnq49am6] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    color: var(--rame-text-primary, #334155);
    font-size: 13px;
}

.date-property-item svg[b-3ibnq49am6] {
    color: var(--rame-text-secondary, #64748b);
}

/* ========== EMPTY STATE ========== */

.empty-state-box[b-3ibnq49am6] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: var(--rame-warning-light, #fef3c7);
    border-radius: 6px;
    border: 1px solid var(--rame-warning-border, #fcd34d);
    font-size: 12px;
    color: var(--rame-warning-dark, #92400e);
}

.empty-state-box svg[b-3ibnq49am6] {
    flex-shrink: 0;
}

/* ========== DROPDOWN ITEM ========== */

.event-dropdown-item[b-3ibnq49am6] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.color-dot[b-3ibnq49am6] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ========== REMINDER CHIPS ========== */

.reminder-chips-container[b-3ibnq49am6] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.reminder-chip[b-3ibnq49am6] {
    padding: 6px 12px;
    background: var(--rame-bg-secondary, #f8fafc);
    border: 1px solid var(--rame-border-light, #e2e8f0);
    border-radius: 20px;
    color: var(--rame-text-secondary, #64748b);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.reminder-chip:hover:not(.reminder-chip--selected)[b-3ibnq49am6] {
    background: var(--rame-bg-primary, #fff);
    border-color: var(--rame-primary-light, #93c5fd);
}

.reminder-chip--selected[b-3ibnq49am6] {
    background: var(--rame-primary, #3b82f6);
    border-color: var(--rame-primary, #3b82f6);
    color: white;
}

/* ========== OUTPUT VARIABLES SECTION ========== */

.event-output-section[b-3ibnq49am6] {
    margin-top: 8px;
    border: 1px solid var(--rame-border-light, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
}

.output-section-toggle[b-3ibnq49am6] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    background: var(--rame-bg-secondary, #f8fafc);
    border: none;
    color: var(--rame-text-secondary, #64748b);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.output-section-toggle:hover[b-3ibnq49am6] {
    background: var(--rame-bg-tertiary, #f1f5f9);
}

.output-badge[b-3ibnq49am6] {
    margin-left: auto;
    padding: 2px 8px;
    background: var(--rame-info-light, #e0f2fe);
    color: var(--rame-info, #0284c7);
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}

.output-variables-list[b-3ibnq49am6] {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--rame-bg-primary, #fff);
    border-top: 1px solid var(--rame-border-light, #e2e8f0);
}

.output-variable-item[b-3ibnq49am6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    background: var(--rame-bg-secondary, #f8fafc);
    border-radius: 4px;
}

.output-variable-item code[b-3ibnq49am6] {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 11px;
    color: var(--rame-info, #0284c7);
    background: var(--rame-info-light, #e0f2fe);
    padding: 2px 6px;
    border-radius: 3px;
}

.output-variable-item span[b-3ibnq49am6] {
    font-size: 11px;
    color: var(--rame-text-secondary, #64748b);
}

/* ========== DARK MODE ========== */

:root[data-theme="dark"] .create-scheduled-event-editor[b-3ibnq49am6] {
    /* Dark mode adjustments handled by CSS variables */
}

:root[data-theme="dark"] .mode-tab--active[b-3ibnq49am6] {
    background: var(--rame-primary, #3b82f6);
}

:root[data-theme="dark"] .reminder-chip--selected[b-3ibnq49am6] {
    background: var(--rame-primary, #3b82f6);
}
/* _content/Rame.Blazor.Server/Components/Workflows/BlockEditors/Actions/SendEmailEditor.razor.rz.scp.css */
/* ========================================
   SEND EMAIL EDITOR
   Component for email action configuration
   ======================================== */

.send-email-editor[b-8u448rg1z6] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ========== FIELDS ========== */

.config-field[b-8u448rg1z6] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}

.config-field--inline[b-8u448rg1z6] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.field-header[b-8u448rg1z6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.field-label[b-8u448rg1z6] {
    font-size: 12px;
    font-weight: 600;
    color: var(--rame-text-secondary, #555);
}

.field-label--inline[b-8u448rg1z6] {
    margin: 0;
    font-weight: 500;
}

.field-hint[b-8u448rg1z6] {
    font-size: 11px;
    color: var(--rame-text-tertiary, #94a3b8);
    font-style: italic;
    margin-top: 2px;
}

/* ========== INPUT STYLES ========== */

[b-8u448rg1z6] .config-input {
    width: 100%;
}

[b-8u448rg1z6] .config-input .dxbs-editor-input-container {
    border-radius: 6px;
    border-color: var(--rame-border-light, #e2e8f0);
    background: var(--rame-bg-primary, #fff);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[b-8u448rg1z6] .config-input .dxbs-editor-input-container:focus-within {
    border-color: var(--rame-primary, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* ========== VARIABLE PICKER ========== */

.insert-var-btn[b-8u448rg1z6] {
    background: transparent;
    border: 1px solid var(--rame-border-light, #e2e8f0);
    color: var(--rame-primary, #3b82f6);
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.insert-var-btn:hover[b-8u448rg1z6] {
    background: var(--rame-primary, #3b82f6);
    color: #fff;
    border-color: var(--rame-primary, #3b82f6);
}

.var-popup[b-8u448rg1z6] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    max-height: 320px;
    background: var(--rame-bg-primary, #fff);
    border: 1px solid var(--rame-border-light, #e2e8f0);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-top: 4px;
}

.var-search[b-8u448rg1z6] {
    padding: 8px 12px;
    border: none;
    border-bottom: 1px solid var(--rame-border-light, #e2e8f0);
    font-size: 13px;
    outline: none;
    background: transparent;
    color: var(--rame-text-primary, #1f2937);
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

.var-search:focus[b-8u448rg1z6] {
    background: var(--rame-bg-subtle, #f8fafc);
}

.var-list[b-8u448rg1z6] {
    flex: 1;
    overflow-y: auto;
    max-height: 250px;
}

.var-item[b-8u448rg1z6] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 6px 12px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rame-border-subtle, #f1f5f9);
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background 0.1s;
    font-family: inherit;
}

.var-item:hover[b-8u448rg1z6] {
    background: var(--rame-primary-subtle, #eff6ff);
}

.var-item:last-child[b-8u448rg1z6] {
    border-bottom: none;
}

.var-category[b-8u448rg1z6] {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--rame-text-tertiary, #94a3b8);
    font-weight: 500;
    letter-spacing: 0.3px;
}

.var-name[b-8u448rg1z6] {
    font-size: 12px;
    color: var(--rame-text-primary, #1f2937);
}

.var-empty[b-8u448rg1z6] {
    padding: 12px;
    font-size: 12px;
    color: var(--rame-text-tertiary, #94a3b8);
    text-align: center;
    font-style: italic;
}

/* ========== MODE TOGGLE ========== */

.mode-toggle[b-8u448rg1z6] {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: var(--rame-bg-subtle, #f1f5f9);
    border-radius: var(--rame-radius-full, 999px);
    align-self: flex-start;
}

.mode-toggle-btn[b-8u448rg1z6] {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--rame-text-secondary, #555);
    background: transparent;
    border: none;
    border-radius: var(--rame-radius-full, 999px);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
    letter-spacing: -0.005em;
}

.mode-toggle-btn:hover[b-8u448rg1z6] {
    color: var(--rame-text-primary, #1f2937);
}

.mode-toggle-btn--active[b-8u448rg1z6] {
    background: var(--rame-bg-primary, #fff);
    color: var(--rame-primary, #3b82f6);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

/* ========== TEMPLATE PREVIEW CARD ========== */

.template-preview-card[b-8u448rg1z6] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--rame-border-light, #e2e8f0);
    border-radius: 8px;
    background: var(--rame-bg-subtle, #f8fafc);
}

.template-preview-header[b-8u448rg1z6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.template-preview-label[b-8u448rg1z6] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rame-text-tertiary, #94a3b8);
}

/* "AUTO-FILLED" pill — mirrors the visual style from design-prototypes/email-chat. */
.template-hint-pill[b-8u448rg1z6] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: color-mix(in srgb, var(--rame-primary, #3b82f6) 10%, transparent);
    color: var(--rame-primary, #3b82f6);
    border-radius: var(--rame-radius-full, 999px);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.template-preview-subject[b-8u448rg1z6] {
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.template-preview-field[b-8u448rg1z6] {
    font-size: 11px;
    font-weight: 600;
    color: var(--rame-text-tertiary, #94a3b8);
    min-width: 52px;
}

.template-preview-value[b-8u448rg1z6] {
    font-size: 13px;
    color: var(--rame-text-primary, #1f2937);
    font-weight: 500;
}

.template-preview-body[b-8u448rg1z6] {
    font-size: 12px;
    color: var(--rame-text-secondary, #555);
    line-height: 1.5;
    max-height: 120px;
    overflow: hidden;
    padding: 8px 10px;
    background: var(--rame-bg-primary, #fff);
    border: 1px solid var(--rame-border-subtle, #f1f5f9);
    border-radius: 6px;
}

.template-preview-footer[b-8u448rg1z6] {
    display: flex;
    justify-content: flex-end;
}

.template-preview-link[b-8u448rg1z6] {
    font-size: 12px;
    font-weight: 500;
    color: var(--rame-primary, #3b82f6);
    text-decoration: none;
    transition: color 0.15s;
}

.template-preview-link:hover[b-8u448rg1z6] {
    color: var(--rame-primary-hover, #2563eb);
    text-decoration: underline;
}

/* ========== DARK MODE ========== */

:root[data-theme="dark"] .var-popup[b-8u448rg1z6] {
    background: var(--rame-bg-elevated, #1e293b);
    border-color: var(--rame-border-dark, #334155);
}

:root[data-theme="dark"] .var-search[b-8u448rg1z6] {
    color: var(--rame-text-primary-dark, #f1f5f9);
    border-bottom-color: var(--rame-border-dark, #334155);
}

:root[data-theme="dark"] .var-item:hover[b-8u448rg1z6] {
    background: var(--rame-primary-dark-subtle, #1e3a5f);
}

:root[data-theme="dark"] .var-name[b-8u448rg1z6] {
    color: var(--rame-text-primary-dark, #f1f5f9);
}

:root[data-theme="dark"] .mode-toggle[b-8u448rg1z6] {
    background: var(--rame-bg-elevated, #1e293b);
}

:root[data-theme="dark"] .mode-toggle-btn[b-8u448rg1z6] {
    color: var(--rame-text-secondary-dark, #94a3b8);
}

:root[data-theme="dark"] .mode-toggle-btn:hover[b-8u448rg1z6] {
    color: var(--rame-text-primary-dark, #f1f5f9);
}

:root[data-theme="dark"] .mode-toggle-btn--active[b-8u448rg1z6] {
    background: var(--rame-bg-primary-dark, #0f172a);
    color: var(--rame-primary, #3b82f6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .template-preview-card[b-8u448rg1z6] {
    background: var(--rame-bg-elevated, #1e293b);
    border-color: var(--rame-border-dark, #334155);
}

:root[data-theme="dark"] .template-preview-body[b-8u448rg1z6] {
    background: var(--rame-bg-primary-dark, #0f172a);
    border-color: var(--rame-border-dark, #334155);
    color: var(--rame-text-secondary-dark, #cbd5e1);
}

:root[data-theme="dark"] .template-preview-value[b-8u448rg1z6] {
    color: var(--rame-text-primary-dark, #f1f5f9);
}

/* ========== RECIPIENT MODE PICKER (Opción A) ========== */

.recipient-mode-grid[b-8u448rg1z6] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 4px;
}

.recipient-card[b-8u448rg1z6] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 9px 12px;
    background: var(--rame-bg-primary, #fff);
    border: 1px solid var(--rame-border-light, #e2e8f0);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
    text-align: left;
    font-family: inherit;
}

.recipient-card:hover[b-8u448rg1z6] {
    border-color: var(--rame-primary, #3b82f6);
    background: var(--rame-bg-subtle, #f8fafc);
}

.recipient-card--active[b-8u448rg1z6] {
    border-color: var(--rame-primary, #3b82f6);
    background: color-mix(in srgb, var(--rame-primary, #3b82f6) 8%, transparent);
    box-shadow: inset 0 0 0 1px var(--rame-primary, #3b82f6);
}

.recipient-card__title[b-8u448rg1z6] {
    font-size: 12px;
    font-weight: 600;
    color: var(--rame-text-primary, #1f2937);
    line-height: 1.2;
}

.recipient-card--active .recipient-card__title[b-8u448rg1z6] {
    color: var(--rame-primary, #3b82f6);
}

.recipient-card__hint[b-8u448rg1z6] {
    font-size: 11px;
    color: var(--rame-text-tertiary, #94a3b8);
    line-height: 1.35;
}

/* ========== ROLE CHIPS (UsersInRoles) ========== */

.role-chip-grid[b-8u448rg1z6] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.role-chip[b-8u448rg1z6] {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 14px;
    background: var(--rame-bg-primary, #fff);
    border: 1px solid var(--rame-border-light, #e2e8f0);
    border-radius: 9999px;
    color: var(--rame-text-secondary, #475569);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: all 0.12s ease;
    font-family: inherit;
}

.role-chip:hover[b-8u448rg1z6] {
    border-color: var(--rame-primary, #3b82f6);
    color: var(--rame-primary, #3b82f6);
}

.role-chip--active[b-8u448rg1z6] {
    background: var(--rame-primary, #3b82f6);
    border-color: var(--rame-primary, #3b82f6);
    color: #fff;
}

/* ========== USER PICKER (SpecificUsers) ========== */

.user-search[b-8u448rg1z6] {
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 6px;
    border: 1px solid var(--rame-border-light, #e2e8f0);
    border-radius: 6px;
    font-size: 13px;
    box-sizing: border-box;
    font-family: inherit;
}

.user-list[b-8u448rg1z6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--rame-border-light, #e2e8f0);
    border-radius: 6px;
    background: var(--rame-bg-primary, #fff);
}

.user-row[b-8u448rg1z6] {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
    font-family: inherit;
    border-bottom: 1px solid var(--rame-border-subtle, #f1f5f9);
}

.user-row:last-child[b-8u448rg1z6] { border-bottom: none; }

.user-row:hover[b-8u448rg1z6] {
    background: var(--rame-bg-subtle, #f8fafc);
}

.user-row--active[b-8u448rg1z6] {
    background: color-mix(in srgb, var(--rame-primary, #3b82f6) 6%, transparent);
}

.user-row__check[b-8u448rg1z6] {
    color: var(--rame-primary, #3b82f6);
    font-weight: 700;
    font-size: 14px;
    text-align: center;
}

.user-row__main[b-8u448rg1z6] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.user-row__name[b-8u448rg1z6] {
    font-size: 13px;
    font-weight: 500;
    color: var(--rame-text-primary, #1f2937);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-row__email[b-8u448rg1z6] {
    font-size: 11px;
    color: var(--rame-text-tertiary, #94a3b8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-row__roles[b-8u448rg1z6] {
    font-size: 10px;
    color: var(--rame-text-tertiary, #94a3b8);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.user-row--empty[b-8u448rg1z6] {
    padding: 14px;
    color: var(--rame-text-tertiary, #94a3b8);
    font-style: italic;
    font-size: 12px;
    text-align: center;
    cursor: default;
}
/* _content/Rame.Blazor.Server/Components/Workflows/BlockEditors/Actions/SendInternalNotificationEditor.razor.rz.scp.css */
/* ========================================
   SEND INTERNAL NOTIFICATION EDITOR
   Component for SendInternalNotification action configuration
   ======================================== */

.send-notification-editor[b-jpsz9k1wb8] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ========== FIELDS ========== */

.config-field[b-jpsz9k1wb8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-label[b-jpsz9k1wb8] {
    font-size: 12px;
    font-weight: 600;
    color: var(--rame-text-secondary, #555);
}

.field-hint[b-jpsz9k1wb8] {
    font-size: 11px;
    color: var(--rame-text-tertiary, #94a3b8);
    font-style: italic;
    line-height: 1.4;
}

/* ========== INPUT STYLES (DevExpress deep) ========== */

[b-jpsz9k1wb8] .config-input {
    width: 100%;
}

[b-jpsz9k1wb8] .config-input .dxbs-editor-input-container {
    border-radius: 6px;
    border-color: var(--rame-border-light, #e2e8f0);
    background: var(--rame-bg-primary, #fff);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[b-jpsz9k1wb8] .config-input .dxbs-editor-input-container:focus-within {
    border-color: var(--rame-primary, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* ========== TYPE PILL GROUP ========== */

.type-pill-group[b-jpsz9k1wb8] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.type-pill[b-jpsz9k1wb8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1.5px solid var(--rame-border-light, #e2e8f0);
    border-radius: 20px;
    background: var(--rame-bg-primary, #fff);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--rame-text-secondary, #64748b);
    transition: all 0.15s ease;
}

.type-pill:hover[b-jpsz9k1wb8] {
    background: var(--rame-bg-secondary, #f8fafc);
}

.type-pill-dot[b-jpsz9k1wb8] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.type-pill-label[b-jpsz9k1wb8] {
    line-height: 1;
}

/* Info */
.type-pill--info .type-pill-dot[b-jpsz9k1wb8] {
    background: #3b82f6;
}
.type-pill--info.type-pill--selected[b-jpsz9k1wb8] {
    border-color: #3b82f6;
    background: #eff6ff;
    color: #1d4ed8;
}

/* Warning */
.type-pill--warning .type-pill-dot[b-jpsz9k1wb8] {
    background: #f97316;
}
.type-pill--warning.type-pill--selected[b-jpsz9k1wb8] {
    border-color: #f97316;
    background: #fff7ed;
    color: #c2410c;
}

/* Error */
.type-pill--error .type-pill-dot[b-jpsz9k1wb8] {
    background: #ef4444;
}
.type-pill--error.type-pill--selected[b-jpsz9k1wb8] {
    border-color: #ef4444;
    background: #fef2f2;
    color: #b91c1c;
}

/* Success */
.type-pill--success .type-pill-dot[b-jpsz9k1wb8] {
    background: #22c55e;
}
.type-pill--success.type-pill--selected[b-jpsz9k1wb8] {
    border-color: #22c55e;
    background: #f0fdf4;
    color: #15803d;
}

/* ========== RECIPIENT TOGGLE ========== */

.recipient-toggle[b-jpsz9k1wb8] {
    display: flex;
    border: 1px solid var(--rame-border-light, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
    background: var(--rame-bg-secondary, #f8fafc);
}

.recipient-option[b-jpsz9k1wb8] {
    flex: 1;
    padding: 7px 10px;
    background: transparent;
    border: none;
    border-right: 1px solid var(--rame-border-light, #e2e8f0);
    font-size: 12px;
    font-weight: 500;
    color: var(--rame-text-secondary, #64748b);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    line-height: 1;
}

.recipient-option:last-child[b-jpsz9k1wb8] {
    border-right: none;
}

.recipient-option:hover:not(.recipient-option--selected)[b-jpsz9k1wb8] {
    background: var(--rame-bg-primary, #fff);
    color: var(--rame-text-primary, #334155);
}

.recipient-option--selected[b-jpsz9k1wb8] {
    background: var(--rame-primary, #3b82f6);
    color: #fff;
    font-weight: 600;
}

.recipient-detail[b-jpsz9k1wb8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
}

/* ========== DARK MODE ========== */

:root[data-theme="dark"] .send-notification-editor[b-jpsz9k1wb8] {
    /* Dark mode adjustments handled by CSS variables */
}

:root[data-theme="dark"] .type-pill[b-jpsz9k1wb8] {
    background: var(--rame-bg-secondary, #1e293b);
    border-color: var(--rame-border-light, #334155);
    color: var(--rame-text-secondary, #94a3b8);
}

:root[data-theme="dark"] .type-pill--info.type-pill--selected[b-jpsz9k1wb8] {
    background: rgba(59, 130, 246, 0.15);
    border-color: #3b82f6;
    color: #93c5fd;
}

:root[data-theme="dark"] .type-pill--warning.type-pill--selected[b-jpsz9k1wb8] {
    background: rgba(249, 115, 22, 0.15);
    border-color: #f97316;
    color: #fdba74;
}

:root[data-theme="dark"] .type-pill--error.type-pill--selected[b-jpsz9k1wb8] {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
    color: #fca5a5;
}

:root[data-theme="dark"] .type-pill--success.type-pill--selected[b-jpsz9k1wb8] {
    background: rgba(34, 197, 94, 0.15);
    border-color: #22c55e;
    color: #86efac;
}

:root[data-theme="dark"] .recipient-toggle[b-jpsz9k1wb8] {
    background: var(--rame-bg-secondary, #1e293b);
    border-color: var(--rame-border-light, #334155);
}

:root[data-theme="dark"] .recipient-option[b-jpsz9k1wb8] {
    border-color: var(--rame-border-light, #334155);
    color: var(--rame-text-secondary, #94a3b8);
}

:root[data-theme="dark"] .recipient-option--selected[b-jpsz9k1wb8] {
    background: var(--rame-primary, #3b82f6);
    color: #fff;
}
/* _content/Rame.Blazor.Server/Components/Workflows/BlockEditors/Actions/TagEditor.razor.rz.scp.css */
/* ========================================
   TAG EDITOR
   Component for AddTag/RemoveTag action configuration
   ======================================== */

.tag-editor[b-hqd64gyb4a] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ========== FIELDS ========== */

.config-field[b-hqd64gyb4a] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label[b-hqd64gyb4a] {
    font-size: 12px;
    font-weight: 600;
    color: var(--rame-text-secondary, #555);
}

.field-hint[b-hqd64gyb4a] {
    font-size: 11px;
    color: var(--rame-text-tertiary, #94a3b8);
    font-style: italic;
}

/* ========== INPUT STYLES ========== */

[b-hqd64gyb4a] .config-input {
    width: 100%;
}

[b-hqd64gyb4a] .config-input .dxbs-editor-input-container {
    border-radius: 6px;
    border-color: var(--rame-border-light, #e2e8f0);
    background: var(--rame-bg-primary, #fff);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[b-hqd64gyb4a] .config-input .dxbs-editor-input-container:focus-within {
    border-color: var(--rame-primary, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* ========== TAG ITEM ========== */

.tag-item[b-hqd64gyb4a] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.tag-color[b-hqd64gyb4a] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.tag-name[b-hqd64gyb4a] {
    color: var(--rame-text-primary, #334155);
    font-size: 13px;
}

/* ========== DARK MODE ========== */

:root[data-theme="dark"] .tag-editor[b-hqd64gyb4a] {
    /* Dark mode adjustments handled by CSS variables */
}
/* _content/Rame.Blazor.Server/Components/Workflows/BlockEditors/Actions/UpdateFieldEditor.razor.rz.scp.css */
/* ========================================
   UPDATE FIELD EDITOR
   Component for UpdateField action configuration
   ======================================== */

.update-field-editor[b-6osyovmhsi] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ========== FIELDS ========== */

.config-field[b-6osyovmhsi] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label[b-6osyovmhsi] {
    font-size: 12px;
    font-weight: 600;
    color: var(--rame-text-secondary, #555);
}

.field-hint[b-6osyovmhsi] {
    font-size: 11px;
    color: var(--rame-text-tertiary, #94a3b8);
    font-style: italic;
}

.config-hint[b-6osyovmhsi] {
    font-size: 11px;
    color: var(--rame-text-secondary, #64748b);
}

.config-hint.possible-values[b-6osyovmhsi] {
    padding: 6px 8px;
    background: var(--rame-info-light, #f0f9ff);
    border-radius: 4px;
    border: 1px solid var(--rame-info-border, #bae6fd);
}

/* ========== INPUT STYLES ========== */

[b-6osyovmhsi] .config-input {
    width: 100%;
}

[b-6osyovmhsi] .config-input .dxbs-editor-input-container {
    border-radius: 6px;
    border-color: var(--rame-border-light, #e2e8f0);
    background: var(--rame-bg-primary, #fff);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[b-6osyovmhsi] .config-input .dxbs-editor-input-container:focus-within {
    border-color: var(--rame-primary, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* ========== DARK MODE ========== */

:root[data-theme="dark"] .update-field-editor[b-6osyovmhsi] {
    /* Dark mode adjustments handled by CSS variables */
}
/* _content/Rame.Blazor.Server/Components/Workflows/BlockEditors/Common/CriteriaFilterSection.razor.rz.scp.css */
/* ========================================
   CRITERIA FILTER SECTION
   Reusable filter controls component
   ======================================== */

.criteria-filter-section[b-z4vy5l26hk] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.criteria-filter-section.disabled[b-z4vy5l26hk] {
    opacity: 0.6;
    pointer-events: none;
}

/* ========== FILTER CONTROLS ========== */

.criteria-filter-controls[b-z4vy5l26hk] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-edit-criteria[b-z4vy5l26hk] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--rame-bg-secondary, #f8fafc);
    border: 1px solid var(--rame-border-light, #e2e8f0);
    border-radius: 6px;
    color: var(--rame-text-secondary, #64748b);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-edit-criteria:hover:not(:disabled)[b-z4vy5l26hk] {
    background: var(--rame-bg-primary, #fff);
    border-color: var(--rame-primary, #3b82f6);
    color: var(--rame-primary, #3b82f6);
}

.btn-edit-criteria:disabled[b-z4vy5l26hk] {
    cursor: not-allowed;
    opacity: 0.5;
}

.btn-edit-criteria.has-filter[b-z4vy5l26hk] {
    background: var(--rame-primary-light, #eff6ff);
    border-color: var(--rame-primary, #3b82f6);
    color: var(--rame-primary, #3b82f6);
}

.btn-edit-criteria svg[b-z4vy5l26hk] {
    flex-shrink: 0;
}

.btn-clear-criteria[b-z4vy5l26hk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--rame-bg-secondary, #f8fafc);
    border: 1px solid var(--rame-border-light, #e2e8f0);
    border-radius: 6px;
    color: var(--rame-text-secondary, #64748b);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-clear-criteria:hover:not(:disabled)[b-z4vy5l26hk] {
    background: var(--rame-error-light, #fef2f2);
    border-color: var(--rame-error, #ef4444);
    color: var(--rame-error, #ef4444);
}

.btn-clear-criteria:disabled[b-z4vy5l26hk] {
    cursor: not-allowed;
    opacity: 0.5;
}

/* ========== FILTER SUMMARY ========== */

.criteria-summary[b-z4vy5l26hk] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    background: var(--rame-info-light, #f0f9ff);
    border-radius: 6px;
    border: 1px solid var(--rame-info-border, #bae6fd);
}

.summary-label[b-z4vy5l26hk] {
    font-size: 11px;
    font-weight: 600;
    color: var(--rame-info, #0284c7);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.summary-content[b-z4vy5l26hk] {
    font-size: 11px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    color: var(--rame-text-primary, #334155);
    background: var(--rame-bg-primary, #fff);
    padding: 4px 8px;
    border-radius: 4px;
    word-break: break-word;
    white-space: pre-wrap;
}

/* ========== HINT TEXT ========== */

.field-hint[b-z4vy5l26hk] {
    font-size: 11px;
    color: var(--rame-text-tertiary, #94a3b8);
    font-style: italic;
    line-height: 1.4;
}

/* ========== DARK MODE ========== */

:root[data-theme="dark"] .criteria-filter-section[b-z4vy5l26hk] {
    /* Dark mode adjustments handled by CSS variables */
}

:root[data-theme="dark"] .criteria-summary[b-z4vy5l26hk] {
    background: rgba(14, 165, 233, 0.1);
    border-color: rgba(14, 165, 233, 0.3);
}

:root[data-theme="dark"] .summary-content[b-z4vy5l26hk] {
    background: var(--rame-bg-secondary, #1e293b);
}
/* _content/Rame.Blazor.Server/Components/Workflows/BlockEditors/Common/TextWithVariables.razor.rz.scp.css */
/* ========================================
   TEXT WITH VARIABLES
   Reusable text input with inline variable picker
   ======================================== */

.twv-field[b-nzqjgfnm6z] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

/* ========== LABEL ROW ========== */

.twv-label-row[b-nzqjgfnm6z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.twv-label[b-nzqjgfnm6z] {
    font-size: 12px;
    font-weight: 600;
    color: var(--rame-text-secondary, #555);
    line-height: 1;
}

/* ========== PICKER BUTTON ========== */

.twv-picker-wrapper[b-nzqjgfnm6z] {
    position: relative;
}

.twv-picker-btn[b-nzqjgfnm6z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    height: 22px;
    background: var(--rame-bg-secondary, #f8fafc);
    border: 1px solid var(--rame-border-light, #e2e8f0);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1;
}

.twv-picker-btn-label[b-nzqjgfnm6z] {
    font-size: 11px;
    font-weight: 700;
    font-family: 'Consolas', 'Monaco', monospace;
    color: var(--rame-text-secondary, #64748b);
    letter-spacing: 0.5px;
}

.twv-picker-btn:hover[b-nzqjgfnm6z] {
    background: var(--rame-primary-light, #eff6ff);
    border-color: var(--rame-primary, #3b82f6);
}

.twv-picker-btn:hover .twv-picker-btn-label[b-nzqjgfnm6z] {
    color: var(--rame-primary, #3b82f6);
}

.twv-picker-btn.active[b-nzqjgfnm6z] {
    background: var(--rame-primary-light, #eff6ff);
    border-color: var(--rame-primary, #3b82f6);
}

.twv-picker-btn.active .twv-picker-btn-label[b-nzqjgfnm6z] {
    color: var(--rame-primary, #3b82f6);
}

/* ========== DROPDOWN ========== */

.twv-backdrop[b-nzqjgfnm6z] {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.twv-dropdown[b-nzqjgfnm6z] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 1000;
    min-width: 260px;
    max-height: 280px;
    overflow: hidden;
    background: var(--rame-bg-primary, #fff);
    border: 1px solid var(--rame-border-light, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
}

.twv-dropdown-inner[b-nzqjgfnm6z] {
    overflow-y: auto;
    max-height: 280px;
    padding: 4px;
}

/* ========== VARIABLE GROUPS ========== */

.twv-group[b-nzqjgfnm6z] {
    margin-bottom: 4px;
}

.twv-group:last-child[b-nzqjgfnm6z] {
    margin-bottom: 0;
}

.twv-group-header[b-nzqjgfnm6z] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--rame-text-tertiary, #94a3b8);
    padding: 6px 8px 4px;
    border-bottom: 1px solid var(--rame-border-light, #e2e8f0);
    margin-bottom: 2px;
}

/* ========== VARIABLE ROWS ========== */

.twv-variable-row[b-nzqjgfnm6z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    background: transparent;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease;
}

.twv-variable-row:hover[b-nzqjgfnm6z] {
    background: var(--rame-bg-secondary, #f8fafc);
}

.twv-var-display[b-nzqjgfnm6z] {
    font-size: 12px;
    color: var(--rame-text-primary, #334155);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.twv-var-path[b-nzqjgfnm6z] {
    font-size: 10px;
    font-family: 'Consolas', 'Monaco', monospace;
    color: var(--rame-primary, #3b82f6);
    background: var(--rame-primary-light, #eff6ff);
    padding: 2px 5px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ========== NATIVE INPUT ========== */

.twv-input[b-nzqjgfnm6z] {
    width: 100%;
    padding: 7px 10px;
    font-size: 13px;
    font-family: inherit;
    color: var(--rame-text-primary, #334155);
    background: var(--rame-bg-primary, #fff);
    border: 1px solid var(--rame-border-light, #e2e8f0);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.twv-input[b-nzqjgfnm6z]::placeholder {
    color: var(--rame-text-tertiary, #94a3b8);
}

.twv-input:focus[b-nzqjgfnm6z] {
    border-color: var(--rame-primary, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.twv-textarea[b-nzqjgfnm6z] {
    resize: vertical;
    line-height: 1.5;
    min-height: 60px;
}

/* ========== HINT TEXT ========== */

.twv-hint[b-nzqjgfnm6z] {
    font-size: 11px;
    color: var(--rame-text-tertiary, #94a3b8);
    font-style: italic;
    line-height: 1.4;
}

/* ========== DARK MODE ========== */

:root[data-theme="dark"] .twv-dropdown[b-nzqjgfnm6z] {
    background: var(--rame-bg-secondary, #1e293b);
    border-color: var(--rame-border-light, #334155);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
}

:root[data-theme="dark"] .twv-group-header[b-nzqjgfnm6z] {
    border-color: var(--rame-border-light, #334155);
}

:root[data-theme="dark"] .twv-variable-row:hover[b-nzqjgfnm6z] {
    background: var(--rame-bg-primary, #0f172a);
}

:root[data-theme="dark"] .twv-input[b-nzqjgfnm6z] {
    background: var(--rame-bg-secondary, #1e293b);
    color: var(--rame-text-primary, #e2e8f0);
    border-color: var(--rame-border-light, #334155);
}

:root[data-theme="dark"] .twv-input:focus[b-nzqjgfnm6z] {
    border-color: var(--rame-primary, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
/* _content/Rame.Blazor.Server/Components/Workflows/BlockEditors/Control/ConditionEditor.razor.rz.scp.css */
/* ========================================
   CONDITION EDITOR
   Component for condition/branch block configuration
   ======================================== */

.condition-editor[b-svfioxneez] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ========== FIELDS ========== */

.config-field[b-svfioxneez] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label[b-svfioxneez] {
    font-size: 12px;
    font-weight: 600;
    color: var(--rame-text-secondary, #555);
}

.field-hint[b-svfioxneez] {
    font-size: 11px;
    color: var(--rame-text-tertiary, #94a3b8);
    font-style: italic;
}

/* ========== COMBOBOX STYLES ========== */

[b-svfioxneez] .config-input {
    width: 100%;
}

[b-svfioxneez] .config-input .dxbs-editor-input-container {
    border-radius: 6px;
    border-color: var(--rame-border-light, #e2e8f0);
    background: var(--rame-bg-primary, #fff);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[b-svfioxneez] .config-input .dxbs-editor-input-container:focus-within {
    border-color: var(--rame-primary, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* ========== CONDITION FIELD ITEM ========== */

.condition-field-item[b-svfioxneez] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.condition-field-item .field-category[b-svfioxneez] {
    font-size: 10px;
    color: var(--rame-text-tertiary, #94a3b8);
    text-transform: uppercase;
    padding: 2px 6px;
    background: var(--rame-bg-secondary, #f1f5f9);
    border-radius: 3px;
    min-width: 70px;
    text-align: center;
}

.condition-field-item .field-name[b-svfioxneez] {
    color: var(--rame-text-primary, #334155);
    font-size: 13px;
    flex: 1;
}

.condition-field-item .field-type[b-svfioxneez] {
    font-size: 10px;
    color: var(--rame-text-secondary, #64748b);
    padding: 2px 6px;
    background: var(--rame-success-light, #ecfdf5);
    border-radius: 3px;
}

/* ========== DARK MODE ========== */

:root[data-theme="dark"] .condition-editor[b-svfioxneez] {
    /* Dark mode adjustments handled by CSS variables */
}

/* ========== CRITERIA FILTER BUTTONS ========== */

.btn-configure-criteria[b-svfioxneez] {
    width: 100%;
    padding: 10px 16px;
    border: 1.5px dashed var(--rame-border-medium, #cbd5e1);
    border-radius: 8px;
    background: var(--rame-bg-secondary, #f8fafc);
    color: var(--rame-text-secondary, #64748b);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.btn-configure-criteria:hover[b-svfioxneez] {
    border-color: var(--rame-primary, #6366f1);
    color: var(--rame-primary, #6366f1);
    background: rgba(99, 102, 241, 0.04);
}

.criteria-summary[b-svfioxneez] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    background: var(--rame-bg-secondary, #f8fafc);
    border: 1px solid var(--rame-border-light, #e2e8f0);
    border-radius: 8px;
    font-size: 12px;
    font-family: 'Consolas', monospace;
}

.criteria-text[b-svfioxneez] {
    flex: 1;
    color: var(--rame-text-primary, #1e293b);
    word-break: break-word;
}

.btn-edit-criteria[b-svfioxneez] {
    flex-shrink: 0;
    padding: 2px 8px;
    border: 1px solid var(--rame-primary, #6366f1);
    border-radius: 4px;
    background: transparent;
    color: var(--rame-primary, #6366f1);
    font-size: 11px;
    cursor: pointer;
    font-weight: 600;
}

.btn-edit-criteria:hover[b-svfioxneez] {
    background: var(--rame-primary, #6366f1);
    color: #fff;
}
/* _content/Rame.Blazor.Server/Components/Workflows/BlockEditors/Control/DelayEditor.razor.rz.scp.css */
/* ========================================
   DELAY EDITOR
   Component for delay/wait block configuration
   ======================================== */

.delay-editor[b-0eexyu3pnb] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ========== FIELDS ========== */

.config-field[b-0eexyu3pnb] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label[b-0eexyu3pnb] {
    font-size: 12px;
    font-weight: 600;
    color: var(--rame-text-secondary, #555);
}

.field-hint[b-0eexyu3pnb] {
    font-size: 11px;
    color: var(--rame-text-tertiary, #94a3b8);
    font-style: italic;
}

/* ========== DELAY INPUT GROUP ========== */

.delay-input-group[b-0eexyu3pnb] {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

[b-0eexyu3pnb] .delay-value {
    flex: 0 0 100px;
}

[b-0eexyu3pnb] .delay-unit {
    flex: 1;
    min-width: 120px;
}

[b-0eexyu3pnb] .delay-value .dxbs-editor-input-container,
[b-0eexyu3pnb] .delay-unit .dxbs-editor-input-container {
    border-radius: 6px;
    border-color: var(--rame-border-light, #e2e8f0);
    background: var(--rame-bg-primary, #fff);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[b-0eexyu3pnb] .delay-value .dxbs-editor-input-container:focus-within,
[b-0eexyu3pnb] .delay-unit .dxbs-editor-input-container:focus-within {
    border-color: var(--rame-primary, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* ========== DARK MODE ========== */

:root[data-theme="dark"] .delay-editor[b-0eexyu3pnb] {
    /* Dark mode adjustments handled by CSS variables */
}
/* _content/Rame.Blazor.Server/Components/Workflows/BlockEditors/Triggers/EntityTriggerEditor.razor.rz.scp.css */
/* ========================================
   ENTITY TRIGGER EDITOR
   Component for entity-based trigger configuration
   ======================================== */

.entity-trigger-editor[b-b9anqh72eo] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ========== FIELDS ========== */

.config-field[b-b9anqh72eo] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label[b-b9anqh72eo] {
    font-size: 12px;
    font-weight: 600;
    color: var(--rame-text-secondary, #555);
}

.field-hint[b-b9anqh72eo] {
    font-size: 11px;
    color: var(--rame-text-tertiary, #94a3b8);
    font-style: italic;
}

/* ========== INPUT STYLES ========== */

[b-b9anqh72eo] .config-input {
    width: 100%;
}

[b-b9anqh72eo] .config-input .dxbs-editor-input-container {
    border-radius: 6px;
    border-color: var(--rame-border-light, #e2e8f0);
    background: var(--rame-bg-primary, #fff);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[b-b9anqh72eo] .config-input .dxbs-editor-input-container:focus-within {
    border-color: var(--rame-primary, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* ========== DARK MODE ========== */

:root[data-theme="dark"] .entity-trigger-editor[b-b9anqh72eo] {
    /* Dark mode adjustments handled by CSS variables */
}
/* _content/Rame.Blazor.Server/Components/Workflows/BlockEditors/Triggers/SchedulingTriggerEditor.razor.rz.scp.css */
/* ========================================
   SCHEDULING TRIGGER EDITOR
   Component for scheduling-based trigger configuration
   ======================================== */

.scheduling-trigger-editor[b-bvbjdy8bpp] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ========== FIELDS ========== */

.config-field[b-bvbjdy8bpp] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label[b-bvbjdy8bpp] {
    font-size: 12px;
    font-weight: 600;
    color: var(--rame-text-secondary, #555);
}

.field-hint[b-bvbjdy8bpp] {
    font-size: 11px;
    color: var(--rame-text-tertiary, #94a3b8);
    font-style: italic;
}

/* ========== INPUT STYLES ========== */

[b-bvbjdy8bpp] .config-input {
    width: 100%;
}

[b-bvbjdy8bpp] .config-input .dxbs-editor-input-container {
    border-radius: 6px;
    border-color: var(--rame-border-light, #e2e8f0);
    background: var(--rame-bg-primary, #fff);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[b-bvbjdy8bpp] .config-input .dxbs-editor-input-container:focus-within {
    border-color: var(--rame-primary, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* ========== DROPDOWN ITEM ========== */

.event-dropdown-item[b-bvbjdy8bpp] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.color-dot[b-bvbjdy8bpp] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ========== DARK MODE ========== */

:root[data-theme="dark"] .scheduling-trigger-editor[b-bvbjdy8bpp] {
    /* Dark mode adjustments handled by CSS variables */
}
/* _content/Rame.Blazor.Server/Components/Workflows/ConfigurationPanel/ConfigurationPanel.razor.rz.scp.css */
/* ========================================
   CONFIGURATION PANEL
   Main container for block configuration
   ======================================== */

.configuration-panel[b-bhqc3ovlj2] {
    display: flex;
    flex-direction: column;
    width: 0;
    min-width: 0;
    height: 100%;
    align-self: stretch;
    background: var(--rame-bg-primary, #fff);
    border-left: none;
    overflow: hidden;
    opacity: 0;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.configuration-panel.visible[b-bhqc3ovlj2] {
    width: 320px;
    min-width: 320px;
    border-left: 1px solid var(--rame-border-light, #e2e8f0);
    opacity: 1;
}

/* ========== HEADER ========== */

.config-header[b-bhqc3ovlj2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    background: linear-gradient(to right, var(--rame-bg-secondary, #f8fafc), var(--rame-bg-primary, #ffffff));
    border-bottom: 1px solid var(--rame-border-light, #e2e8f0);
    flex-shrink: 0;
}

.config-icon[b-bhqc3ovlj2] {
    font-size: 18px;
}

.config-title[b-bhqc3ovlj2] {
    font-size: 14px;
    font-weight: 600;
    color: var(--rame-text-primary, #334155);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-close-config[b-bhqc3ovlj2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--rame-text-secondary, #64748b);
    font-size: 20px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-close-config:hover[b-bhqc3ovlj2] {
    background: var(--rame-bg-secondary, #f1f5f9);
    color: var(--rame-text-primary, #334155);
}

/* ========== BODY ========== */

.config-body[b-bhqc3ovlj2] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ========== FIELDS ========== */

.config-field[b-bhqc3ovlj2] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label[b-bhqc3ovlj2] {
    font-size: 12px;
    font-weight: 600;
    color: var(--rame-text-secondary, #555);
}

/* ========== INPUT STYLES ========== */

[b-bhqc3ovlj2] .config-input {
    width: 100%;
}

[b-bhqc3ovlj2] .config-input .dxbs-editor-input-container {
    border-radius: 6px;
    border-color: var(--rame-border-light, #e2e8f0);
    background: var(--rame-bg-primary, #fff);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[b-bhqc3ovlj2] .config-input .dxbs-editor-input-container:focus-within {
    border-color: var(--rame-primary, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* ========== SCROLLBAR ========== */

.config-body[b-bhqc3ovlj2]::-webkit-scrollbar {
    width: 6px;
}

.config-body[b-bhqc3ovlj2]::-webkit-scrollbar-track {
    background: transparent;
}

.config-body[b-bhqc3ovlj2]::-webkit-scrollbar-thumb {
    background: var(--rame-border-light, #e2e8f0);
    border-radius: 3px;
}

.config-body[b-bhqc3ovlj2]::-webkit-scrollbar-thumb:hover {
    background: var(--rame-border-medium, #cbd5e1);
}

/* ========== RESPONSIVE ========== */

@media (max-width: 1024px) {
    .configuration-panel.visible[b-bhqc3ovlj2] {
        width: 280px;
        min-width: 280px;
    }
}

@media (max-width: 768px) {
    .configuration-panel.visible[b-bhqc3ovlj2] {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 100;
        box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
    }
}

/* ========== DARK MODE ========== */

:global([data-rame-theme="dark"]) .configuration-panel[b-bhqc3ovlj2] {
    background: var(--rame-bg-secondary, #282828);
}

:global([data-rame-theme="dark"]) .configuration-panel.visible[b-bhqc3ovlj2] {
    border-left-color: var(--rame-border-medium, #505050);
}

:global([data-rame-theme="dark"]) .config-header[b-bhqc3ovlj2] {
    background: linear-gradient(to right, var(--rame-bg-tertiary, #333333), var(--rame-bg-secondary, #282828));
    border-bottom-color: var(--rame-border-medium, #505050);
}

:global([data-rame-theme="dark"]) .config-title[b-bhqc3ovlj2] {
    color: var(--rame-text-primary, #f0f0f0);
}

:global([data-rame-theme="dark"]) .btn-close-config[b-bhqc3ovlj2] {
    color: var(--rame-text-muted, #888888);
}

:global([data-rame-theme="dark"]) .btn-close-config:hover[b-bhqc3ovlj2] {
    background: var(--rame-bg-hover, #3a3a3a);
    color: var(--rame-text-primary, #f0f0f0);
}

:global([data-rame-theme="dark"]) .field-label[b-bhqc3ovlj2] {
    color: var(--rame-text-secondary, #c8c8c8);
}

:global([data-rame-theme="dark"])[b-bhqc3ovlj2]  .config-input .dxbs-editor-input-container {
    border-color: var(--rame-border-medium, #505050);
    background: var(--rame-bg-tertiary, #333333);
}

:global([data-rame-theme="dark"]) .config-body[b-bhqc3ovlj2]::-webkit-scrollbar-thumb {
    background: var(--rame-border-medium, #505050);
}

:global([data-rame-theme="dark"]) .config-body[b-bhqc3ovlj2]::-webkit-scrollbar-thumb:hover {
    background: var(--rame-text-muted, #888888);
}
/* _content/Rame.Blazor.Server/Components/Workflows/CriteriaEntitySelector.razor.rz.scp.css */
/* ========================================
   CRITERIA ENTITY SELECTOR
   Component for entity type selection with filter
   ======================================== */

.criteria-entity-selector[b-g0qejyqth7] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
}

/* ========== HEADER ========== */

.selector-header[b-g0qejyqth7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.header-icon[b-g0qejyqth7] {
    font-size: 18px;
}

.header-title[b-g0qejyqth7] {
    font-size: 13px;
    font-weight: 700;
    color: #333;
}

/* ========== INFO ICON ========== */

.header-info-trigger[b-g0qejyqth7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    color: #9ca3af;
    cursor: help;
    transition: color 0.15s ease;
}

.header-info-trigger:hover[b-g0qejyqth7] {
    color: #3b82f6;
}

/* ========== CONTENT ========== */

.selector-content[b-g0qejyqth7] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ========== FIELDS ========== */

.selector-field[b-g0qejyqth7] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label[b-g0qejyqth7] {
    font-size: 12px;
    font-weight: 600;
    color: #555;
}

.field-hint[b-g0qejyqth7] {
    font-size: 11px;
    color: #999;
    font-style: italic;
}

/* ========== ENTITY TYPE SELECT ========== */

[b-g0qejyqth7] .entity-type-select {
    width: 100%;
}

[b-g0qejyqth7] .entity-type-select .dxbs-editor-input-container {
    border-radius: 6px;
    border-color: #ddd;
    background: #fff;
}

[b-g0qejyqth7] .entity-type-select .dxbs-editor-input-container:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.15);
}

/* ========== FILTER SECTION ========== */

.filter-field[b-g0qejyqth7] {
    padding: 12px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.filter-controls[b-g0qejyqth7] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-edit-filter[b-g0qejyqth7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.btn-edit-filter:hover[b-g0qejyqth7] {
    background: #f0f4ff;
    border-color: #3b82f6;
    color: #3b82f6;
}

.btn-edit-filter.has-filter[b-g0qejyqth7] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: transparent;
    color: #fff;
}

.btn-edit-filter.has-filter:hover[b-g0qejyqth7] {
    filter: brightness(1.08);
}

.btn-edit-filter svg[b-g0qejyqth7] {
    flex-shrink: 0;
}

.btn-clear-filter[b-g0qejyqth7] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    color: #999;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-clear-filter:hover[b-g0qejyqth7] {
    background: #ffebee;
    border-color: #f44336;
    color: #f44336;
}

/* ========== FILTER SUMMARY ========== */

.filter-summary[b-g0qejyqth7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
    padding: 10px 12px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.summary-label[b-g0qejyqth7] {
    font-size: 10px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-content[b-g0qejyqth7] {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 11px;
    color: #3b82f6;
    background: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid #e3e8ff;
    word-break: break-word;
}

/* ========== MAX COUNT INPUT ========== */

[b-g0qejyqth7] .max-count-input {
    width: 100%;
}

[b-g0qejyqth7] .max-count-input .dxbs-editor-input-container {
    border-radius: 6px;
    border-color: #ddd;
    background: #fff;
}

[b-g0qejyqth7] .max-count-input .dxbs-editor-input-container:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.15);
}

/* ========== ACCESSIBILITY ========== */

.btn-edit-filter:focus-visible[b-g0qejyqth7],
.btn-clear-filter:focus-visible[b-g0qejyqth7] {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}
/* _content/Rame.Blazor.Server/Components/Workflows/CriteriaFilterModal.razor.rz.scp.css */
/* ========================================
   CRITERIA FILTER MODAL - Professional UI/UX
   Uses Rame Design System tokens - see /css/design-system/_tokens.css
   ======================================== */

/* ========== MODAL OVERLAY ========== */

.criteria-modal-overlay[b-y5fl4bk3ra] {
    position: fixed;
    inset: 0;
    background: rgba(11, 20, 26, 0.75);
    backdrop-filter: blur(4px);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    animation: fadeIn-b-y5fl4bk3ra 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fadeIn-b-y5fl4bk3ra {
    to {
        opacity: 1;
    }
}

/* ========== MODAL CONTAINER ========== */

.criteria-modal-container[b-y5fl4bk3ra] {
    background: var(--rame-bg-primary, #ffffff);
    border-radius: 16px;
    box-shadow: var(--rame-shadow-xl, 0 24px 48px rgba(0, 0, 0, 0.24)), 0 12px 24px rgba(0, 0, 0, 0.16);
    width: 100%;
    max-width: 700px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    animation: modalSlideIn-b-y5fl4bk3ra 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
}

@keyframes modalSlideIn-b-y5fl4bk3ra {
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* ========== MODAL HEADER ========== */

.criteria-modal-header[b-y5fl4bk3ra] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--rame-border-medium, #e9edef);
    background: linear-gradient(135deg, var(--rame-bg-primary, #ffffff) 0%, var(--rame-bg-secondary, #f8f9fa) 100%);
    flex-shrink: 0;
}

.header-title-section[b-y5fl4bk3ra] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
}

.header-icon[b-y5fl4bk3ra] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ede7f6 0%, #d1c4e9 100%);
    color: #673ab7;
    flex-shrink: 0;
}

.header-text[b-y5fl4bk3ra] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.modal-title[b-y5fl4bk3ra] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--rame-text-primary, #111b21);
    letter-spacing: -0.3px;
}

.modal-subtitle[b-y5fl4bk3ra] {
    margin: 0;
    font-size: 12px;
    color: var(--rame-text-meta, #667781);
    font-weight: 400;
}

.btn-close-modal[b-y5fl4bk3ra] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--rame-text-secondary, #54656f);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    flex-shrink: 0;
}

.btn-close-modal:hover[b-y5fl4bk3ra] {
    background: var(--rame-bg-tertiary, #f0f2f5);
    color: var(--rame-text-primary, #111b21);
    transform: rotate(90deg);
}

.btn-close-modal:active[b-y5fl4bk3ra] {
    transform: rotate(90deg) scale(0.9);
}

/* ========== MODAL CONTENT ========== */

.criteria-modal-content[b-y5fl4bk3ra] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 24px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Scrollbar styling */
.criteria-modal-content[b-y5fl4bk3ra]::-webkit-scrollbar {
    width: 8px;
}

.criteria-modal-content[b-y5fl4bk3ra]::-webkit-scrollbar-track {
    background: var(--rame-bg-tertiary, #f0f2f5);
    border-radius: 4px;
}

.criteria-modal-content[b-y5fl4bk3ra]::-webkit-scrollbar-thumb {
    background: var(--rame-scrollbar-thumb, #d1d7db);
    border-radius: 4px;
    transition: background 0.2s;
}

.criteria-modal-content[b-y5fl4bk3ra]::-webkit-scrollbar-thumb:hover {
    background: var(--rame-text-muted, #8696a0);
}

/* ========== EMPTY STATE ========== */

.criteria-empty-state[b-y5fl4bk3ra] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    gap: 12px;
    text-align: center;
}

.criteria-empty-state .empty-icon[b-y5fl4bk3ra] {
    color: var(--rame-text-muted, #8696a0);
    opacity: 0.5;
}

.criteria-empty-state .empty-title[b-y5fl4bk3ra] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--rame-text-primary, #111b21);
}

.criteria-empty-state .empty-description[b-y5fl4bk3ra] {
    margin: 0;
    font-size: 13px;
    color: var(--rame-text-meta, #667781);
    max-width: 300px;
}

/* ========== FILTER BUILDER SECTION ========== */

.filter-builder-section[b-y5fl4bk3ra] {
    background: var(--rame-bg-secondary, #f8f9fa);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid var(--rame-border-light, #e0e0e0);
}

/* DxFilterBuilder styling within modal */
[b-y5fl4bk3ra] .criteria-modal-filter-builder {
    border: 1px solid var(--rame-border-light, #e0e0e0);
    border-radius: 8px;
    background: var(--rame-bg-primary, #fff);
    min-height: 200px;
    font-size: 13px;
}

[b-y5fl4bk3ra] .criteria-modal-filter-builder .dxbl-filter-builder-item-field {
    background: var(--rame-primary-lighter, #f0f4ff);
    border-radius: 4px;
    padding: 6px 10px;
    font-weight: 500;
}

[b-y5fl4bk3ra] .criteria-modal-filter-builder .dxbl-filter-builder-item-operation {
    color: var(--rame-primary, #3b82f6);
    font-weight: 600;
}

[b-y5fl4bk3ra] .criteria-modal-filter-builder .dxbl-filter-builder-item-value {
    background: var(--rame-bg-primary, #fff);
    border: 1px solid var(--rame-border-light, #ddd);
    border-radius: 4px;
}

[b-y5fl4bk3ra] .criteria-modal-filter-builder .dxbl-filter-builder-group {
    padding: 12px;
    border-left: 3px solid var(--rame-primary, #3b82f6);
    background: var(--rame-bg-secondary, #f8f9fa);
    border-radius: 6px;
    margin: 6px 0;
}

[b-y5fl4bk3ra] .criteria-modal-filter-builder .dxbl-filter-builder-group-operator {
    font-weight: 600;
    color: var(--rame-primary-dark, #2563eb);
}

/* Tree view styling for hierarchical fields */
[b-y5fl4bk3ra] .criteria-modal-filter-builder .dxbl-filter-builder-field-list {
    max-height: 350px;
    overflow-y: auto;
}

[b-y5fl4bk3ra] .criteria-modal-filter-builder .dxbl-treeview-node {
    padding: 6px 10px;
    border-radius: 4px;
    transition: background 0.15s;
}

[b-y5fl4bk3ra] .criteria-modal-filter-builder .dxbl-treeview-node:hover {
    background: var(--rame-primary-lighter, #f0f4ff);
}

[b-y5fl4bk3ra] .criteria-modal-filter-builder .dxbl-treeview-node-text {
    font-size: 13px;
}

[b-y5fl4bk3ra] .criteria-modal-filter-builder .dxbl-treeview-node-expandable .dxbl-treeview-node-text {
    font-weight: 600;
    color: var(--rame-text-primary, #333);
}

/* ========== HELP SECTION ========== */

.criteria-help-section[b-y5fl4bk3ra] {
    background: var(--rame-info-lighter, #f0f4ff);
    border-radius: 8px;
    padding: 14px 16px;
    border-left: 3px solid var(--rame-primary, #3b82f6);
}

.criteria-help-section .help-header[b-y5fl4bk3ra] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rame-primary, #3b82f6);
    margin-bottom: 10px;
}

.criteria-help-section .help-content[b-y5fl4bk3ra] {
    font-size: 12px;
    color: var(--rame-text-secondary, #54656f);
    line-height: 1.5;
}

.criteria-help-section .help-content p[b-y5fl4bk3ra] {
    margin: 0 0 8px 0;
}

.criteria-help-section .help-content p:last-child[b-y5fl4bk3ra] {
    margin-bottom: 0;
}

.criteria-help-section .help-functions[b-y5fl4bk3ra] {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 11px;
    background: var(--rame-bg-primary, #fff);
    padding: 10px 12px;
    border-radius: 6px;
    line-height: 1.8;
    margin-top: 6px;
}

.criteria-help-section .help-functions code[b-y5fl4bk3ra] {
    background: var(--rame-info-light, #e3f2fd);
    color: var(--rame-info-text, #1976d2);
    padding: 2px 6px;
    border-radius: 3px;
}

/* ========== FILTER PREVIEW SECTION ========== */

.filter-preview-section[b-y5fl4bk3ra] {
    background: var(--rame-warning-lighter, #fff8e1);
    border-radius: 8px;
    padding: 14px 16px;
    border: 1px solid var(--rame-warning-border, #ffe082);
}

.filter-preview-section .preview-header[b-y5fl4bk3ra] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rame-warning-text, #f57c00);
    margin-bottom: 10px;
}

.filter-preview-section .preview-content[b-y5fl4bk3ra] {
    font-size: 12px;
    background: var(--rame-bg-primary, #fff);
    padding: 10px 12px;
    border-radius: 6px;
    overflow-x: auto;
}

.filter-preview-section .preview-content code[b-y5fl4bk3ra] {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    color: var(--rame-text-primary, #333);
    word-break: break-word;
    white-space: pre-wrap;
}

/* ========== MODAL FOOTER ========== */

.criteria-modal-footer[b-y5fl4bk3ra] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-top: 1px solid var(--rame-border-medium, #e9edef);
    background: var(--rame-bg-secondary, #f8f9fa);
    flex-shrink: 0;
    gap: 16px;
}

.footer-left[b-y5fl4bk3ra] {
    display: flex;
    align-items: center;
}

.footer-actions[b-y5fl4bk3ra] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-footer-clear[b-y5fl4bk3ra] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: transparent;
    border: 1px solid var(--rame-border-medium, #e9edef);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--rame-error, #f44336);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.btn-footer-clear:hover:not(:disabled)[b-y5fl4bk3ra] {
    background: var(--rame-error-light, #ffebee);
    border-color: var(--rame-error-border, #ffcdd2);
}

.btn-footer-clear:disabled[b-y5fl4bk3ra] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-footer-cancel[b-y5fl4bk3ra] {
    padding: 10px 20px;
    background: transparent;
    border: 2px solid var(--rame-border-medium, #e9edef);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rame-text-secondary, #54656f);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.btn-footer-cancel:hover[b-y5fl4bk3ra] {
    background: var(--rame-bg-tertiary, #f0f2f5);
    border-color: var(--rame-scrollbar-thumb, #d1d7db);
    color: var(--rame-text-primary, #111b21);
}

.btn-footer-cancel:active[b-y5fl4bk3ra] {
    transform: scale(0.96);
}

.btn-footer-apply[b-y5fl4bk3ra] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: linear-gradient(135deg, var(--rame-primary, #3b82f6) 0%, var(--rame-primary-dark, #2563eb) 100%);
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
    box-shadow: var(--rame-shadow-primary, 0 2px 8px rgba(59, 130, 246, 0.25));
    font-family: inherit;
}

.btn-footer-apply:hover[b-y5fl4bk3ra] {
    filter: brightness(1.08);
    box-shadow: 0 3px 12px rgba(59, 130, 246, 0.35);
}

.btn-footer-apply:active[b-y5fl4bk3ra] {
    filter: brightness(0.95);
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.2);
}

/* ========== RESPONSIVE DESIGN ========== */

@media (max-width: 768px) {
    .criteria-modal-container[b-y5fl4bk3ra] {
        max-width: 95vw;
        max-height: 90vh;
    }

    .criteria-modal-header[b-y5fl4bk3ra],
    .criteria-modal-content[b-y5fl4bk3ra],
    .criteria-modal-footer[b-y5fl4bk3ra] {
        padding-left: 16px;
        padding-right: 16px;
    }

    .modal-title[b-y5fl4bk3ra] {
        font-size: 16px;
    }

    .modal-subtitle[b-y5fl4bk3ra] {
        font-size: 11px;
    }

    .criteria-modal-footer[b-y5fl4bk3ra] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .footer-left[b-y5fl4bk3ra] {
        order: 2;
    }

    .footer-actions[b-y5fl4bk3ra] {
        order: 1;
        width: 100%;
    }

    .btn-footer-clear[b-y5fl4bk3ra] {
        width: 100%;
        justify-content: center;
    }

    .btn-footer-cancel[b-y5fl4bk3ra],
    .btn-footer-apply[b-y5fl4bk3ra] {
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .header-title-section[b-y5fl4bk3ra] {
        gap: 10px;
    }

    .header-icon[b-y5fl4bk3ra] {
        width: 38px;
        height: 38px;
    }

    .header-icon svg[b-y5fl4bk3ra] {
        width: 20px;
        height: 20px;
    }

    .modal-title[b-y5fl4bk3ra] {
        font-size: 15px;
    }

    .criteria-modal-content[b-y5fl4bk3ra] {
        padding: 14px 16px;
    }

    .filter-builder-section[b-y5fl4bk3ra] {
        padding: 12px;
    }
}

/* ========== ACCESSIBILITY ========== */

.btn-close-modal:focus-visible[b-y5fl4bk3ra],
.btn-footer-clear:focus-visible[b-y5fl4bk3ra],
.btn-footer-cancel:focus-visible[b-y5fl4bk3ra],
.btn-footer-apply:focus-visible[b-y5fl4bk3ra] {
    outline: 2px solid var(--rame-primary, #3b82f6);
    outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .criteria-modal-overlay[b-y5fl4bk3ra],
    .criteria-modal-container[b-y5fl4bk3ra],
    .btn-close-modal:hover[b-y5fl4bk3ra],
    .btn-footer-apply:hover[b-y5fl4bk3ra] {
        animation: none;
        transform: none !important;
        transition: none;
    }
}

/* ========== DARK MODE OVERRIDES ========== */

:global([data-rame-theme="dark"]) .header-icon[b-y5fl4bk3ra] {
    background: linear-gradient(135deg, var(--rame-primary-light, #1a3a5c) 0%, var(--rame-primary-lighter, #1a2d42) 100%);
    color: var(--rame-primary, #3b9eff);
}

:global([data-rame-theme="dark"]) .filter-builder-section[b-y5fl4bk3ra] {
    background: var(--rame-bg-tertiary, #333333);
    border-color: var(--rame-border-medium, #505050);
}

:global([data-rame-theme="dark"])[b-y5fl4bk3ra]  .criteria-modal-filter-builder {
    background: var(--rame-bg-secondary, #282828);
    border-color: var(--rame-border-medium, #505050);
}

:global([data-rame-theme="dark"])[b-y5fl4bk3ra]  .criteria-modal-filter-builder .dxbl-filter-builder-item-field {
    background: var(--rame-primary-light, #1a3a5c);
}

:global([data-rame-theme="dark"])[b-y5fl4bk3ra]  .criteria-modal-filter-builder .dxbl-filter-builder-group {
    background: var(--rame-bg-tertiary, #333333);
    border-left-color: var(--rame-primary, #3b9eff);
}

:global([data-rame-theme="dark"])[b-y5fl4bk3ra]  .criteria-modal-filter-builder .dxbl-treeview-node:hover {
    background: var(--rame-primary-light, #1a3a5c);
}

:global([data-rame-theme="dark"])[b-y5fl4bk3ra]  .criteria-modal-filter-builder .dxbl-treeview-node-expandable .dxbl-treeview-node-text {
    color: var(--rame-text-primary, #f0f0f0);
}
/* _content/Rame.Blazor.Server/Components/Workflows/CronExpressionEditor.razor.rz.scp.css */
/* ========================================
   CRON EXPRESSION EDITOR - Professional Visual Editor
   Compact, intuitive cron builder for workflow designer
   ======================================== */

/* ========== CONTAINER ========== */

.cron-editor[b-do2m6ybgng] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* ========== SECTIONS ========== */

.cron-section[b-do2m6ybgng] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.section-label[b-do2m6ybgng] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

/* ========== PRESET SELECTOR ========== */

[b-do2m6ybgng] .cron-preset-select {
    width: 100%;
}

[b-do2m6ybgng] .cron-preset-select .dxbs-editor-input-container {
    border-radius: 6px;
    border-color: #ddd;
    transition: border-color 0.2s;
}

[b-do2m6ybgng] .cron-preset-select .dxbs-editor-input-container:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.preset-item[b-do2m6ybgng] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.preset-icon[b-do2m6ybgng] {
    font-size: 18px;
    flex-shrink: 0;
}

.preset-info[b-do2m6ybgng] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.preset-label[b-do2m6ybgng] {
    font-size: 13px;
    font-weight: 500;
    color: #333;
}

.preset-description[b-do2m6ybgng] {
    font-size: 11px;
    color: #999;
}

/* ========== CUSTOM CONFIGURATION ========== */

.cron-custom-config[b-do2m6ybgng] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

/* ========== TIME INPUTS ========== */

.time-inputs[b-do2m6ybgng] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.time-input-group[b-do2m6ybgng] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.time-label[b-do2m6ybgng] {
    font-size: 11px;
    color: #666;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[b-do2m6ybgng] .time-input {
    width: 100%;
}

[b-do2m6ybgng] .time-input .dxbs-editor-input-container {
    border-radius: 4px;
    border-color: #ddd;
}

[b-do2m6ybgng] .time-input input {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.time-separator[b-do2m6ybgng] {
    font-size: 20px;
    font-weight: 600;
    color: #3b82f6;
    margin-top: 18px;
}

/* ========== FREQUENCY SELECTOR ========== */

[b-do2m6ybgng] .cron-frequency-select {
    width: 100%;
}

[b-do2m6ybgng] .cron-frequency-select .dxbs-editor-input-container {
    border-radius: 6px;
    border-color: #ddd;
}

[b-do2m6ybgng] .cron-frequency-select .dxbs-editor-input-container:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* ========== WEEKDAYS SELECTOR ========== */

.weekdays-selector[b-do2m6ybgng] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.weekday-btn[b-do2m6ybgng] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
    min-width: 42px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    font-family: inherit;
    gap: 2px;
}

.weekday-btn:hover[b-do2m6ybgng] {
    background: #f8f9fa;
    border-color: #3b82f6;
    transform: translateY(-1px);
}

.weekday-btn.selected[b-do2m6ybgng] {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-color: #3b82f6;
    color: #fff;
}

.weekday-btn.selected:hover[b-do2m6ybgng] {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
}

.weekday-abbr[b-do2m6ybgng] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.weekday-name[b-do2m6ybgng] {
    font-size: 8px;
    font-weight: 500;
    opacity: 0.8;
}

/* ========== DAY OF MONTH INPUT ========== */

[b-do2m6ybgng] .day-of-month-input {
    width: 100%;
}

[b-do2m6ybgng] .day-of-month-input .dxbs-editor-input-container {
    border-radius: 6px;
    border-color: #ddd;
}

[b-do2m6ybgng] .day-of-month-input input {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
}

/* ========== ADVANCED MODE ========== */

.advanced-header[b-do2m6ybgng] {
    display: flex;
    align-items: center;
}

.btn-toggle-advanced[b-do2m6ybgng] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    width: 100%;
    justify-content: flex-start;
}

.btn-toggle-advanced:hover[b-do2m6ybgng] {
    background: #f0f4ff;
    border-color: #3b82f6;
    color: #3b82f6;
}

.toggle-icon[b-do2m6ybgng] {
    font-size: 10px;
    transition: transform 0.2s;
}

.advanced-content[b-do2m6ybgng] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    margin-top: 8px;
}

[b-do2m6ybgng] .cron-direct-input {
    width: 100%;
}

[b-do2m6ybgng] .cron-direct-input input {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    font-weight: 600;
    color: #3b82f6;
}

[b-do2m6ybgng] .cron-direct-input .dxbs-editor-input-container {
    border-radius: 6px;
    border-color: #ddd;
}

[b-do2m6ybgng] .cron-direct-input .dxbs-editor-input-container:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.cron-syntax-help[b-do2m6ybgng] {
    padding: 12px;
    background: #fff;
    border-radius: 6px;
    border-left: 3px solid #3b82f6;
}

.cron-syntax-help strong[b-do2m6ybgng] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.cron-syntax-help ul[b-do2m6ybgng] {
    margin: 0;
    padding-left: 18px;
    list-style: none;
}

.cron-syntax-help li[b-do2m6ybgng] {
    font-size: 11px;
    color: #666;
    line-height: 1.8;
    position: relative;
}

.cron-syntax-help li[b-do2m6ybgng]::before {
    content: '•';
    position: absolute;
    left: -12px;
    color: #3b82f6;
    font-weight: bold;
}

.cron-syntax-help code[b-do2m6ybgng] {
    background: #e3f2fd;
    color: #1976d2;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-weight: 600;
}

/* ========== PREVIEW SECTION ========== */

.cron-preview[b-do2m6ybgng] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #f0f4ff 0%, #fff8f0 100%);
    border-radius: 8px;
    border: 1px solid #e3e8ff;
}

.preview-header[b-do2m6ybgng] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

.preview-icon[b-do2m6ybgng] {
    font-size: 18px;
}

.preview-title[b-do2m6ybgng] {
    font-size: 12px;
    font-weight: 700;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.preview-content[b-do2m6ybgng] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.preview-row[b-do2m6ybgng] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.preview-label[b-do2m6ybgng] {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    min-width: 120px;
    flex-shrink: 0;
}

.preview-value[b-do2m6ybgng] {
    font-size: 12px;
    color: #333;
    flex: 1;
}

.preview-value code[b-do2m6ybgng] {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 12px;
    font-weight: 600;
    background: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    color: #3b82f6;
    border: 1px solid #e3e8ff;
}

.preview-value.next-run[b-do2m6ybgng] {
    font-weight: 600;
    color: #3b82f6;
}

.preview-value.description[b-do2m6ybgng] {
    font-weight: 500;
    color: #333;
}

/* ========== FIELD HINTS ========== */

.field-hint[b-do2m6ybgng] {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: #999;
    font-style: italic;
}

/* ========== RESPONSIVE DESIGN ========== */

@media (max-width: 480px) {
    .weekday-name[b-do2m6ybgng] {
        display: none;
    }

    .time-inputs[b-do2m6ybgng] {
        flex-direction: column;
        gap: 12px;
    }

    .time-separator[b-do2m6ybgng] {
        display: none;
    }
}

/* ========== ACCESSIBILITY ========== */

.weekday-btn:focus-visible[b-do2m6ybgng],
.btn-toggle-advanced:focus-visible[b-do2m6ybgng] {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .weekday-btn:hover[b-do2m6ybgng],
    .btn-toggle-advanced:hover[b-do2m6ybgng] {
        transform: none !important;
        transition: none;
    }

    .toggle-icon[b-do2m6ybgng] {
        transition: none;
    }
}
/* _content/Rame.Blazor.Server/Components/Workflows/FieldChangedEditor.razor.rz.scp.css */
/* ========================================
   FIELD CHANGED EDITOR
   Component for selecting fields to monitor
   ======================================== */

.field-changed-editor[b-4t3e173ism] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
}

/* ========== HEADER ========== */

.editor-header[b-4t3e173ism] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.header-icon[b-4t3e173ism] {
    font-size: 18px;
}

.header-title[b-4t3e173ism] {
    font-size: 13px;
    font-weight: 700;
    color: #333;
}

/* ========== INFO ========== */

.editor-info[b-4t3e173ism] {
    padding: 10px 12px;
    background: #fff3cd;
    border-radius: 6px;
    border-left: 3px solid #ffc107;
}

.editor-info small[b-4t3e173ism] {
    font-size: 12px;
    color: #856404;
}

/* ========== CONTENT ========== */

.editor-content[b-4t3e173ism] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ========== FIELDS ========== */

.editor-field[b-4t3e173ism] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label[b-4t3e173ism] {
    font-size: 12px;
    font-weight: 600;
    color: #555;
}

/* ========== TAG BOX STYLES ========== */

[b-4t3e173ism] .fields-tagbox {
    width: 100%;
}

[b-4t3e173ism] .fields-tagbox .dxbs-editor-input-container {
    border-radius: 6px;
    border-color: #ddd;
    background: #fff;
    min-height: 40px;
}

[b-4t3e173ism] .fields-tagbox .dxbs-editor-input-container:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.15);
}

[b-4t3e173ism] .fields-tagbox .dxbs-tag {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
}

[b-4t3e173ism] .fields-tagbox .dxbs-tag-remove-button {
    color: rgba(255, 255, 255, 0.8);
}

[b-4t3e173ism] .fields-tagbox .dxbs-tag-remove-button:hover {
    color: #fff;
}

/* ========== TEXT BOX STYLES ========== */

[b-4t3e173ism] .fields-textbox {
    width: 100%;
}

[b-4t3e173ism] .fields-textbox .dxbs-editor-input-container {
    border-radius: 6px;
    border-color: #ddd;
    background: #fff;
}

[b-4t3e173ism] .fields-textbox .dxbs-editor-input-container:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.15);
}

/* ========== SELECTION SUMMARY ========== */

.selection-summary[b-4t3e173ism] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border-radius: 6px;
    border: 1px solid #28a745;
}

.summary-icon[b-4t3e173ism] {
    font-size: 14px;
}

.summary-text[b-4t3e173ism] {
    font-size: 12px;
    font-weight: 500;
    color: #155724;
}

/* ========== EMPTY HINT ========== */

.empty-hint[b-4t3e173ism] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: #e3f2fd;
    border-radius: 6px;
    border: 1px solid #90caf9;
}

.hint-icon[b-4t3e173ism] {
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}

.hint-text[b-4t3e173ism] {
    font-size: 12px;
    color: #1565c0;
    line-height: 1.4;
}
/* _content/Rame.Blazor.Server/Components/Workflows/InactivityTimeoutEditor.razor.rz.scp.css */
/* ========================================
   INACTIVITY TIMEOUT EDITOR
   Compact editor for timeout configuration
   ======================================== */

.inactivity-editor[b-rloy6diwr0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ========== MODE SELECTOR ========== */

.inactivity-mode-section[b-rloy6diwr0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mode-label[b-rloy6diwr0] {
    font-size: 12px;
    font-weight: 600;
    color: #555;
}

.mode-buttons[b-rloy6diwr0] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* ========== INPUT SECTION ========== */

.timeout-input-section[b-rloy6diwr0] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.timeout-value-group[b-rloy6diwr0] {
    display: flex;
    align-items: center;
    gap: 10px;
}

[b-rloy6diwr0] .timeout-input {
    flex: 1;
    max-width: 120px;
}

[b-rloy6diwr0] .timeout-input input {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

[b-rloy6diwr0] .timeout-input .dxbs-editor-input-container {
    border-radius: 6px;
    border-color: #ddd;
}

[b-rloy6diwr0] .timeout-input .dxbs-editor-input-container:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.15);
}

.timeout-unit[b-rloy6diwr0] {
    font-size: 13px;
    font-weight: 500;
    color: #666;
}

/* ========== QUICK PRESETS ========== */

.quick-presets[b-rloy6diwr0] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.preset-btn[b-rloy6diwr0] {
    padding: 6px 12px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.preset-btn:hover[b-rloy6diwr0] {
    background: #f0f4ff;
    border-color: #3b82f6;
    color: #3b82f6;
}

.preset-btn.active[b-rloy6diwr0] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: #3b82f6;
    color: #fff;
}

/* ========== PREVIEW ========== */

.timeout-preview[b-rloy6diwr0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #f0f4ff 0%, #fff8f0 100%);
    border-radius: 6px;
    border: 1px solid #e3e8ff;
}

.preview-icon[b-rloy6diwr0] {
    font-size: 16px;
}

.preview-text[b-rloy6diwr0] {
    font-size: 12px;
    color: #555;
    font-weight: 500;
}

/* ========== ACCESSIBILITY ========== */

.preset-btn:focus-visible[b-rloy6diwr0] {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}
/* _content/Rame.Blazor.Server/Components/Workflows/SpecificDateEditor.razor.rz.scp.css */
/* ========================================
   SPECIFIC DATE EDITOR
   Editor for specific date/time configuration
   ======================================== */

.specific-date-editor[b-g2f0mmvxsr] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ========== DATE INPUT ========== */

.date-input-section[b-g2f0mmvxsr] {
    width: 100%;
}

[b-g2f0mmvxsr] .date-input {
    width: 100%;
}

[b-g2f0mmvxsr] .date-input .dxbs-editor-input-container {
    border-radius: 6px;
    border-color: #ddd;
}

[b-g2f0mmvxsr] .date-input .dxbs-editor-input-container:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.15);
}

/* ========== QUICK DATES ========== */

.quick-dates[b-g2f0mmvxsr] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.quick-date-btn[b-g2f0mmvxsr] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.quick-date-btn:hover[b-g2f0mmvxsr] {
    background: #f0f4ff;
    border-color: #3b82f6;
    color: #3b82f6;
    transform: translateY(-1px);
}

.quick-date-btn:active[b-g2f0mmvxsr] {
    transform: translateY(0);
}

.btn-icon[b-g2f0mmvxsr] {
    font-size: 14px;
}

.btn-text[b-g2f0mmvxsr] {
    font-weight: 600;
}

/* ========== DATE PREVIEW ========== */

.date-preview[b-g2f0mmvxsr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #f0f4ff 0%, #fff8f0 100%);
    border-radius: 8px;
    border: 1px solid #e3e8ff;
}

.preview-icon[b-g2f0mmvxsr] {
    font-size: 20px;
    flex-shrink: 0;
}

.preview-content[b-g2f0mmvxsr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.preview-date[b-g2f0mmvxsr] {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    text-transform: capitalize;
}

.preview-time[b-g2f0mmvxsr] {
    font-size: 12px;
    color: #666;
}

.preview-countdown[b-g2f0mmvxsr] {
    padding: 4px 10px;
    background: #fff;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: #3b82f6;
    border: 1px solid #e3e8ff;
    white-space: nowrap;
}

/* ========== ACCESSIBILITY ========== */

.quick-date-btn:focus-visible[b-g2f0mmvxsr] {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* ========== RESPONSIVE ========== */

@media (max-width: 400px) {
    .quick-dates[b-g2f0mmvxsr] {
        flex-direction: column;
    }

    .quick-date-btn[b-g2f0mmvxsr] {
        justify-content: center;
    }

    .date-preview[b-g2f0mmvxsr] {
        flex-direction: column;
        text-align: center;
    }

    .preview-countdown[b-g2f0mmvxsr] {
        align-self: center;
    }
}
/* _content/Rame.Blazor.Server/Components/Workflows/VariableValueEditor.razor.rz.scp.css */
/* VariableValueEditor - Uses Rame Design System */
/* See /css/design-system/_tokens.css for token definitions */

.variable-value-editor[b-vuc7xnuhdj] {
    display: flex;
    flex-direction: column;
    gap: var(--rame-space-2, 8px);
    padding: var(--rame-space-3, 12px);
    background: var(--rame-bg-secondary, #f7f8fa);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: var(--rame-radius-md, 8px);
}

.variable-header[b-vuc7xnuhdj] {
    display: flex;
    align-items: center;
    gap: var(--rame-space-2, 8px);
}

.variable-placeholder[b-vuc7xnuhdj] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: var(--rame-text-sm, 12px);
    font-weight: var(--rame-font-semibold, 600);
    color: var(--rame-primary, #0084ff);
    background: var(--rame-primary-light, #e6f3ff);
    padding: var(--rame-space-1, 4px) var(--rame-space-2, 8px);
    border-radius: var(--rame-radius-sm, 4px);
}

.variable-description[b-vuc7xnuhdj] {
    font-size: var(--rame-text-sm, 12px);
    color: var(--rame-text-secondary, #65676b);
    flex: 1;
}

/* ========== VARIABLE ROW ========== */

.variable-row[b-vuc7xnuhdj] {
    display: flex;
    gap: var(--rame-space-2, 8px);
    align-items: flex-start;
}

[b-vuc7xnuhdj] .mode-combo {
    width: 120px;
    flex-shrink: 0;
}

/* ========== VALUE INPUT ========== */

.value-input[b-vuc7xnuhdj] {
    min-height: 38px;
}

[b-vuc7xnuhdj] .property-dropdown {
    width: 100%;
}

.property-tree-container[b-vuc7xnuhdj] {
    max-height: 250px;
    overflow-y: auto;
    padding: var(--rame-space-2, 8px);
}


[b-vuc7xnuhdj] .manual-input {
    width: 100%;
}

.default-value-display[b-vuc7xnuhdj] {
    display: flex;
    align-items: center;
    gap: var(--rame-space-2, 8px);
    padding: var(--rame-space-2, 8px) var(--rame-space-3, 12px);
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: var(--rame-radius-md, 8px);
    min-height: 38px;
}

.default-label[b-vuc7xnuhdj] {
    font-size: var(--rame-text-xs, 11px);
    color: var(--rame-text-tertiary, #8a8d91);
}

.default-value[b-vuc7xnuhdj] {
    font-size: var(--rame-text-sm, 12px);
    color: var(--rame-text-primary, #1c1e21);
    font-style: italic;
}

.no-properties-warning[b-vuc7xnuhdj] {
    display: flex;
    align-items: center;
    gap: var(--rame-space-2, 8px);
    padding: var(--rame-space-2, 8px) var(--rame-space-3, 12px);
    background: var(--rame-warning-light, #fff3e0);
    border: 1px solid var(--rame-warning, #ff9800);
    border-radius: var(--rame-radius-md, 8px);
    font-size: var(--rame-text-sm, 12px);
    color: var(--rame-warning-text, #e65100);
}

/* ========== DARK MODE OVERRIDES ========== */

:global([data-rame-theme="dark"]) .variable-value-editor[b-vuc7xnuhdj] {
    background: var(--rame-bg-secondary, #282828);
    border-color: var(--rame-border-medium, #505050);
}

:global([data-rame-theme="dark"]) .variable-placeholder[b-vuc7xnuhdj] {
    color: var(--rame-primary, #3b9eff);
    background: var(--rame-primary-light, #1a3a5c);
}

:global([data-rame-theme="dark"]) .variable-description[b-vuc7xnuhdj] {
    color: var(--rame-text-secondary, #c8c8c8);
}

:global([data-rame-theme="dark"]) .default-value-display[b-vuc7xnuhdj] {
    background: var(--rame-bg-tertiary, #333333);
    border-color: var(--rame-border-medium, #505050);
}

:global([data-rame-theme="dark"]) .default-label[b-vuc7xnuhdj] {
    color: var(--rame-text-tertiary, #a0a0a0);
}

:global([data-rame-theme="dark"]) .default-value[b-vuc7xnuhdj] {
    color: var(--rame-text-primary, #f0f0f0);
}
/* _content/Rame.Blazor.Server/Components/Workflows/WhatsAppTemplateEditor.razor.rz.scp.css */
/* ========================================
   WHATSAPP TEMPLATE EDITOR
   Component for WhatsApp template configuration
   ======================================== */

.whatsapp-template-editor[b-38xrrxud6v] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
}

/* ========== HEADER ========== */

.editor-header[b-38xrrxud6v] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.header-icon[b-38xrrxud6v] {
    font-size: 18px;
}

.header-title[b-38xrrxud6v] {
    font-size: 13px;
    font-weight: 700;
    color: #333;
}

/* ========== FIELDS ========== */

.editor-field[b-38xrrxud6v] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label[b-38xrrxud6v] {
    font-size: 12px;
    font-weight: 600;
    color: #555;
}

.field-hint[b-38xrrxud6v] {
    font-size: 11px;
    color: #999;
    font-style: italic;
}

/* ========== SECTIONS ========== */

.editor-section[b-38xrrxud6v] {
    padding: 12px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.section-label[b-38xrrxud6v] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin-bottom: 10px;
}

/* ========== COMBOBOX STYLES ========== */

[b-38xrrxud6v] .template-select,
[b-38xrrxud6v] .phone-field-select {
    width: 100%;
}

[b-38xrrxud6v] .template-select .dxbs-editor-input-container,
[b-38xrrxud6v] .phone-field-select .dxbs-editor-input-container {
    border-radius: 6px;
    border-color: #ddd;
    background: #fff;
}

[b-38xrrxud6v] .template-select .dxbs-editor-input-container:focus-within,
[b-38xrrxud6v] .phone-field-select .dxbs-editor-input-container:focus-within {
    border-color: #25d366;
    box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.15);
}

/* ========== VARIABLE MAPPINGS ========== */

.variable-mappings[b-38xrrxud6v] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.variable-row[b-38xrrxud6v] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.variable-info[b-38xrrxud6v] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.variable-placeholder[b-38xrrxud6v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.variable-description[b-38xrrxud6v] {
    font-size: 12px;
    color: #666;
}

[b-38xrrxud6v] .variable-select,
[b-38xrrxud6v] .variable-select-dropdown {
    width: 100%;
}

[b-38xrrxud6v] .variable-select .dxbs-editor-input-container,
[b-38xrrxud6v] .variable-select-dropdown .dxbs-editor-input-container {
    border-radius: 6px;
    border-color: #ddd;
    background: #fff;
}

[b-38xrrxud6v] .variable-select .dxbs-editor-input-container:focus-within,
[b-38xrrxud6v] .variable-select-dropdown .dxbs-editor-input-container:focus-within {
    border-color: #25d366;
    box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.15);
}

/* ========== VARIABLE TREE DROPDOWN ========== */

.variable-tree-container[b-38xrrxud6v] {
    max-height: 300px;
    overflow-y: auto;
    padding: 8px;
}

[b-38xrrxud6v] .variable-tree {
    font-size: 13px;
}

[b-38xrrxud6v] .variable-tree .dxbs-tree-view-node {
    padding: 2px 0;
}

[b-38xrrxud6v] .variable-tree .dxbs-tree-view-item {
    padding: 6px 8px;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

[b-38xrrxud6v] .variable-tree .dxbs-tree-view-item:hover {
    background: #f5f5f5;
}

.tree-node-selectable[b-38xrrxud6v] {
    color: #333;
    cursor: pointer;
}

.tree-node-selectable:hover[b-38xrrxud6v] {
    color: #25d366;
}

.tree-node-parent[b-38xrrxud6v] {
    color: #666;
    font-weight: 600;
    cursor: default;
}

/* ========== PREVIEW SECTION ========== */

.preview-section[b-38xrrxud6v] {
    margin-top: 4px;
    background: #f0f2f5;
}

.whatsapp-preview[b-38xrrxud6v] {
    background: #e5ddd5;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4cdc4' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    padding: 16px;
    border-radius: 8px;
    min-height: 80px;
}

.whatsapp-bubble[b-38xrrxud6v] {
    background: #dcf8c6;
    padding: 10px 12px;
    border-radius: 8px;
    max-width: 100%;
    position: relative;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.whatsapp-bubble[b-38xrrxud6v]::before {
    content: '';
    position: absolute;
    right: -6px;
    top: 0;
    border-width: 8px 0 8px 8px;
    border-style: solid;
    border-color: transparent transparent transparent #dcf8c6;
}

.bubble-header[b-38xrrxud6v] {
    font-weight: 600;
    font-size: 13px;
    color: #333;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.bubble-body[b-38xrrxud6v] {
    font-size: 13px;
    color: #303030;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.bubble-footer[b-38xrrxud6v] {
    font-size: 11px;
    color: #667781;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* ========== EMPTY STATE ========== */

.empty-state[b-38xrrxud6v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    background: #fff;
    border-radius: 8px;
    border: 2px dashed #e0e0e0;
}

.empty-icon[b-38xrrxud6v] {
    font-size: 28px;
    opacity: 0.6;
}

.empty-text[b-38xrrxud6v] {
    font-size: 12px;
    color: #999;
    text-align: center;
}

/* ========== ACCESSIBILITY ========== */

[b-38xrrxud6v] .template-select:focus-within,
[b-38xrrxud6v] .phone-field-select:focus-within,
[b-38xrrxud6v] .variable-select:focus-within {
    outline: none;
}
/* _content/Rame.Blazor.Server/Components/Workflows/WorkflowAddStepButton.razor.rz.scp.css */
.add-step-connector[b-j2u13t0wm7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.connector-line[b-j2u13t0wm7] {
    width: 2px;
    height: 18px;
    background: #e2e8f0;
}

.btn-add-step[b-j2u13t0wm7] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #94a3b8;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.15s;
    opacity: 0;
}

.add-step-connector:hover .btn-add-step[b-j2u13t0wm7] {
    opacity: 1;
    border-color: #6366f1;
    color: #6366f1;
    background: #eef2ff;
    transform: scale(1.15);
}

.branch-label[b-j2u13t0wm7] {
    font-size: 10px;
    font-weight: 600;
    color: #94a3b8;
    padding: 1px 6px;
    margin: 1px 0;
}
/* _content/Rame.Blazor.Server/Components/Workflows/WorkflowConditionBranches.razor.rz.scp.css */
/* =====================================================
   CONDITION BRANCHES — split / merge layout
   ===================================================== */

.condition-branches[b-qcmhqrew2r] {
    display: flex;
    gap: 20px;
    width: 740px;
    max-width: 100%;
    position: relative;
    padding-top: 28px;   /* space for the top T-connector arms */
    padding-bottom: 36px; /* space for bottom merge connector */
}

/* ── Top horizontal bar that splits from center down into branches ── */
.condition-branches[b-qcmhqrew2r]::before {
    content: '';
    position: absolute;
    top: 0;
    /* Span between the centers of the two branches:
       each branch is 350px, gap 20px → centers at 175px and 545px
       draw from center-of-left to center-of-right */
    left: 175px;
    right: 175px;
    height: 2px;
    background: linear-gradient(to right, #bbf7d0, #e2e8f0 50%, #fecaca);
}

/* ── Bottom center merge connector ── */
.condition-branches[b-qcmhqrew2r]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 36px;
    background: #e2e8f0;
    pointer-events: none;
}

/* ── Individual branch container ── */
.branch[b-qcmhqrew2r] {
    flex: 0 0 350px;
    width: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    border-radius: 12px;
    padding: 12px 12px 10px;
    position: relative;
    box-sizing: border-box;
    overflow: visible;
}

.branch.branch-true[b-qcmhqrew2r] {
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
}

.branch.branch-false[b-qcmhqrew2r] {
    background: #fff5f5;
    border: 1.5px solid #fecaca;
}

/* ── Vertical drop line from the top horizontal bar into each branch ── */
.branch[b-qcmhqrew2r]::before {
    content: '';
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 28px;
    pointer-events: none;
}

.branch.branch-true[b-qcmhqrew2r]::before {
    background: #86efac;
}

.branch.branch-false[b-qcmhqrew2r]::before {
    background: #fca5a5;
}

/* ── Branch header pill ── */
.branch-header[b-qcmhqrew2r] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 12px;
    border-radius: 20px;
    margin-bottom: 10px;
    align-self: center;
    display: flex;
    align-items: center;
    gap: 5px;
}

.branch-header.true[b-qcmhqrew2r] {
    background: #dcfce7;
    color: #16a34a;
    border: 1px solid #86efac;
    box-shadow: 0 1px 3px rgba(22, 163, 74, 0.15);
}

.branch-header.false[b-qcmhqrew2r] {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fca5a5;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.15);
}

/* ── Step cards & connectors fill branch width ── */
[b-qcmhqrew2r] .step-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

[b-qcmhqrew2r] .add-step-connector {
    width: 100%;
}
/* _content/Rame.Blazor.Server/Components/Workflows/WorkflowStepCard.razor.rz.scp.css */
.step-card[b-9q67sehlpl] {
    position: relative;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-left: 4px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    overflow: hidden;
    width: 320px;
    max-width: 100%;
}

.step-card:hover[b-9q67sehlpl] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.step-card.selected[b-9q67sehlpl] {
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.35);
}

.step-card.category-action[b-9q67sehlpl] {
    border-left-color: #6366f1;
}

.step-card.category-condition[b-9q67sehlpl] {
    border-left-color: #8b5cf6;
}

.step-card.category-delay[b-9q67sehlpl] {
    border-left-color: #64748b;
}

.step-card.has-errors[b-9q67sehlpl] {
    border-color: #ef4444;
    border-left-color: #ef4444;
    background: #fef2f2;
}

.step-card-header[b-9q67sehlpl] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 6px;
}

.step-icon[b-9q67sehlpl] {
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

.step-title[b-9q67sehlpl] {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.validation-badge[b-9q67sehlpl] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-delete[b-9q67sehlpl] {
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: #94a3b8;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transition: opacity 0.12s, color 0.12s, background 0.12s;
}

.step-card:hover .btn-delete[b-9q67sehlpl] {
    opacity: 1;
}

.btn-delete:hover[b-9q67sehlpl] {
    color: #ef4444;
    background: #fef2f2;
}

.step-card-body[b-9q67sehlpl] {
    padding: 0 12px 10px;
}

.step-subtitle[b-9q67sehlpl] {
    font-size: 11px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.step-subtitle.unconfigured[b-9q67sehlpl] {
    font-style: italic;
    color: #94a3b8;
}

.step-errors[b-9q67sehlpl] {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.error-text[b-9q67sehlpl] {
    font-size: 11px;
    color: #ef4444;
}
/* _content/Rame.Blazor.Server/Components/Workflows/WorkflowStepPickerPanel.razor.rz.scp.css */
.picker-overlay[b-jxkcpp3shd] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.picker-panel[b-jxkcpp3shd] {
    background: var(--rame-bg-primary, #fff);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    width: 480px;
    max-width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.picker-header[b-jxkcpp3shd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--rame-border-light, #e2e8f0);
}

.picker-title[b-jxkcpp3shd] {
    font-size: 16px;
    font-weight: 600;
    color: var(--rame-text-primary, #1e293b);
}

.btn-close-picker[b-jxkcpp3shd] {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--rame-text-secondary, #64748b);
    font-size: 20px;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}

.btn-close-picker:hover[b-jxkcpp3shd] {
    background: var(--rame-bg-tertiary, #f1f5f9);
    color: var(--rame-text-primary, #1e293b);
}

.picker-body[b-jxkcpp3shd] {
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.picker-section[b-jxkcpp3shd] {}

.section-title[b-jxkcpp3shd] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rame-text-secondary, #64748b);
    margin: 0 0 10px;
}

.picker-grid[b-jxkcpp3shd] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.picker-item[b-jxkcpp3shd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    border: 1.5px solid var(--rame-border-light, #e2e8f0);
    border-radius: 10px;
    background: var(--rame-bg-primary, #fff);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.picker-item:hover[b-jxkcpp3shd] {
    border-color: var(--rame-primary, #6366f1);
    background: var(--rame-primary-bg, #eef2ff);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.picker-item.control:hover[b-jxkcpp3shd] {
    border-color: var(--rame-accent, #8b5cf6);
    background: rgba(139, 92, 246, 0.05);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
}

.picker-item.trigger:hover[b-jxkcpp3shd] {
    border-color: var(--rame-warning, #f59e0b);
    background: rgba(245, 158, 11, 0.05);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

.picker-emoji[b-jxkcpp3shd] {
    font-size: 22px;
    line-height: 1;
}

.picker-name[b-jxkcpp3shd] {
    font-size: 11px;
    font-weight: 500;
    color: var(--rame-text-primary, #1e293b);
    line-height: 1.3;
}
/* _content/Rame.Blazor.Server/Components/Workflows/WorkflowTriggerCard.razor.rz.scp.css */
.trigger-card[b-j4ump1edba] {
    position: relative;
    background: #fffbeb;
    border: 1.5px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: 10px;
    padding: 14px 16px 12px;
    cursor: pointer;
    transition: all 0.15s;
    width: 320px;
    max-width: 100%;
}

.trigger-card:hover[b-j4ump1edba] {
    border-color: #f59e0b;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
    transform: translateY(-1px);
}

.trigger-card.selected[b-j4ump1edba] {
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
}

.trigger-card.has-errors[b-j4ump1edba] {
    background: #fef2f2;
    border-color: #ef4444;
    border-left-color: #ef4444;
}

.trigger-badge[b-j4ump1edba] {
    position: absolute;
    top: -9px;
    left: 14px;
    background: #f59e0b;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 2px 8px;
    border-radius: 20px;
}

.trigger-card-inner[b-j4ump1edba] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.trigger-icon[b-j4ump1edba] {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}

.trigger-info[b-j4ump1edba] {
    flex: 1;
    min-width: 0;
}

.trigger-title[b-j4ump1edba] {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

.trigger-subtitle[b-j4ump1edba] {
    font-size: 11px;
    color: #64748b;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trigger-subtitle.unconfigured[b-j4ump1edba] {
    font-style: italic;
    color: #94a3b8;
}

.trigger-card-actions[b-j4ump1edba] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.validation-badge[b-j4ump1edba] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-change-trigger[b-j4ump1edba] {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.btn-change-trigger:hover[b-j4ump1edba] {
    background: #fde68a;
    border-color: #f59e0b;
}

.trigger-errors[b-j4ump1edba] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #fecaca;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.error-text[b-j4ump1edba] {
    font-size: 11px;
    color: #ef4444;
}
/* _content/Rame.Blazor.Server/Editors/Analytics/ResumenEjecutivoView.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
   Resumen Ejecutivo Dashboard — Rame Design System
   Aesthetic: Refined Observatory — clean depth, spacious
   ═══════════════════════════════════════════════════════ */

/* ========== LAYOUT ========== */

.dashboard[b-3vse2cire1] {
    padding: var(--rame-space-8, 32px);
    display: flex;
    flex-direction: column;
    gap: var(--rame-space-8, 32px);
    max-width: 1440px;
    margin: 0 auto;
    font-family: var(--rame-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
}

/* ========== HEADER ========== */

.dashboard__header[b-3vse2cire1] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--rame-space-4, 16px);
    padding-bottom: var(--rame-space-6, 24px);
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
}

.dashboard__header-left[b-3vse2cire1] {
    display: flex;
    flex-direction: column;
    gap: var(--rame-space-1, 4px);
}

.dashboard__title[b-3vse2cire1] {
    font-size: 26px;
    font-weight: var(--rame-font-bold, 700);
    color: var(--rame-text-primary, #1c1e21);
    margin: 0;
    letter-spacing: -0.5px;
    line-height: 1.15;
}

.dashboard__subtitle[b-3vse2cire1] {
    font-size: var(--rame-text-sm, 12px);
    color: var(--rame-text-tertiary, #8a8d91);
    margin: 0;
    letter-spacing: 0.2px;
}

/* ========== HEADER CONTROLS ========== */

.dashboard__header-controls[b-3vse2cire1] {
    display: flex;
    align-items: center;
    gap: var(--rame-space-3, 12px);
}

.dashboard__currency-select[b-3vse2cire1] {
    appearance: none;
    -webkit-appearance: none;
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: var(--rame-radius-md, 8px);
    padding: 6px 28px 6px 12px;
    font-size: var(--rame-text-sm, 12px);
    font-weight: var(--rame-font-medium, 500);
    color: var(--rame-text-primary, #1c1e21);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8d91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dashboard__currency-select:hover[b-3vse2cire1] {
    border-color: var(--rame-border-medium, #d0d3d9);
}

.dashboard__currency-select:focus[b-3vse2cire1] {
    outline: none;
    border-color: var(--rame-primary, #0084ff);
    box-shadow: 0 0 0 2px rgba(0, 132, 255, 0.15);
}

.dashboard__currency-label[b-3vse2cire1] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: var(--rame-radius-md, 8px);
    font-size: var(--rame-text-sm, 12px);
    font-weight: var(--rame-font-medium, 500);
    color: var(--rame-text-secondary, #65676b);
    background: var(--rame-bg-tertiary, #f0f2f5);
}

/* Branch DxComboBox — forced to visually match the currency pill above (same
   height/radius/border/font), since it sits in the same header row. SizeMode.Small
   gives the closest baseline; ::deep + !important override the theme's default
   editor chrome (DevExpress editors draw border/background/height on the root
   .dxbl-edit element, which is exactly what CssClass attaches to here). */
.dashboard__branch-select[b-3vse2cire1] {
    min-width: 180px;
}

[b-3vse2cire1] .dashboard__branch-select {
    border: 1px solid var(--rame-border-light, #e4e6eb) !important;
    border-radius: var(--rame-radius-md, 8px) !important;
    background: var(--rame-bg-primary, #ffffff) !important;
    min-height: 30px !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[b-3vse2cire1] .dashboard__branch-select:hover {
    border-color: var(--rame-border-medium, #d0d3d9) !important;
}

[b-3vse2cire1] .dashboard__branch-select:focus-within {
    border-color: var(--rame-primary, #0084ff) !important;
    box-shadow: 0 0 0 2px rgba(0, 132, 255, 0.15) !important;
}

[b-3vse2cire1] .dashboard__branch-select-input {
    font-size: var(--rame-text-sm, 12px) !important;
    font-weight: var(--rame-font-medium, 500) !important;
    color: var(--rame-text-primary, #1c1e21) !important;
}

:global([data-rame-theme="dark"])[b-3vse2cire1]  .dashboard__branch-select {
    background-color: var(--rame-bg-primary, #1e1e1e) !important;
    border-color: var(--rame-border-light, #404040) !important;
}

:global([data-rame-theme="dark"])[b-3vse2cire1]  .dashboard__branch-select:hover {
    border-color: var(--rame-border-medium, #505050) !important;
}

:global([data-rame-theme="dark"])[b-3vse2cire1]  .dashboard__branch-select-input {
    color: var(--rame-text-primary, #f0f0f0) !important;
}

/* ========== TABS ========== */

.dashboard__tabs[b-3vse2cire1] {
    display: flex;
    gap: var(--rame-space-1, 4px);
    overflow-x: auto;
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
    margin-top: -8px;
    padding-bottom: 0;
    scrollbar-width: thin;
}

.dashboard__tabs[b-3vse2cire1]::-webkit-scrollbar {
    height: 2px;
}

.dashboard__tab[b-3vse2cire1] {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 10px var(--rame-space-3, 12px);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: var(--rame-text-sm, 13px);
    font-weight: var(--rame-font-medium, 500);
    color: var(--rame-text-tertiary, #8a8d91);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    border-radius: var(--rame-radius-sm, 4px) var(--rame-radius-sm, 4px) 0 0;
}

.dashboard__tab:hover[b-3vse2cire1] {
    color: var(--rame-text-primary, #1c1e21);
    background: var(--rame-bg-tertiary, #f0f2f5);
}

.dashboard__tab:focus-visible[b-3vse2cire1] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 132, 255, 0.18);
}

.dashboard__tab--active[b-3vse2cire1] {
    color: var(--rame-primary, #0084ff);
    border-bottom-color: var(--rame-primary, #0084ff);
    font-weight: var(--rame-font-semibold, 600);
}

.dashboard__tab--active:hover[b-3vse2cire1] {
    background: transparent;
}

.dashboard__tab-count[b-3vse2cire1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    margin-left: 2px;
    background: var(--rame-bg-tertiary, #f0f2f5);
    color: var(--rame-text-secondary, #65676b);
    border-radius: 999px;
    font-size: 10px;
    font-weight: var(--rame-font-semibold, 600);
}

.dashboard__tab--active .dashboard__tab-count[b-3vse2cire1] {
    background: rgba(0, 132, 255, 0.12);
    color: var(--rame-primary, #0084ff);
}

:global([data-rame-theme="dark"]) .dashboard__tabs[b-3vse2cire1] {
    border-bottom-color: var(--rame-border-light, #2a2d31);
}

:global([data-rame-theme="dark"]) .dashboard__tab:hover[b-3vse2cire1] {
    background: rgba(255, 255, 255, 0.04);
}

:global([data-rame-theme="dark"]) .dashboard__tab-count[b-3vse2cire1] {
    background: rgba(255, 255, 255, 0.08);
    color: var(--rame-text-secondary, #a0a0a0);
}

/* ========== SECTIONS ========== */

.dashboard__section[b-3vse2cire1] {
    display: flex;
    flex-direction: column;
    gap: var(--rame-space-5, 20px);
    animation: sectionReveal-b-3vse2cire1 0.5s ease-out both;
    animation-delay: calc(var(--section-index, 0) * 0.15s);
}

@keyframes sectionReveal-b-3vse2cire1 {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dashboard__section-header[b-3vse2cire1] {
    display: flex;
    align-items: center;
}

.dashboard__section-badge[b-3vse2cire1] {
    display: inline-flex;
    align-items: center;
    gap: var(--rame-space-2, 8px);
    padding: 6px 14px 6px 10px;
    border-radius: var(--rame-radius-2xl, 20px);
    font-size: var(--rame-text-xs, 11px);
    font-weight: var(--rame-font-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.dashboard__section-badge--general[b-3vse2cire1] {
    background: var(--rame-primary-light, #e6f3ff);
    color: var(--rame-primary, #0084ff);
}

.dashboard__section-badge--travel[b-3vse2cire1] {
    background: var(--rame-warning-light, #fff3e0);
    color: var(--rame-warning-text, #e65100);
}

.dashboard__section-badge--ai[b-3vse2cire1] {
    background: #f3e8ff;
    color: #7c3aed;
}

/* ========== KPI GRID ========== */

.dashboard__kpis[b-3vse2cire1] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--rame-space-4, 16px);
}

.dashboard__kpis--compact[b-3vse2cire1] {
    grid-template-columns: repeat(2, 1fr);
}

/* Headline row carrying the two win-rate splits alongside the other KPIs. Declared BEFORE the
   responsive section on purpose: the media queries below share its specificity and must win. */
.dashboard__kpis--five[b-3vse2cire1] {
    grid-template-columns: repeat(5, 1fr);
}

/* ========== CARD SYSTEM ========== */

.dashboard__grid[b-3vse2cire1] {
    display: grid;
    gap: var(--rame-space-4, 16px);
}

.dashboard__grid--main[b-3vse2cire1] {
    grid-template-columns: 1.6fr 1fr;
}

.dashboard__grid--main-three[b-3vse2cire1] {
    grid-template-columns: 1.4fr 1fr 1fr;
}

.dashboard__grid--half[b-3vse2cire1] {
    grid-template-columns: 1fr 1fr;
}

.dashboard__grid--triple[b-3vse2cire1] {
    grid-template-columns: repeat(3, 1fr);
}

.dashboard__card[b-3vse2cire1] {
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: var(--rame-radius-lg, 12px);
    padding: var(--rame-space-5, 20px);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
    animation: cardReveal-b-3vse2cire1 0.4s ease-out both;
    animation-delay: calc(var(--section-index, 0) * 0.15s + 0.1s);
}

.dashboard__card:hover[b-3vse2cire1] {
    box-shadow: var(--rame-shadow-md, 0 2px 8px rgba(0,0,0,0.1));
    border-color: var(--rame-border-medium, #d0d3d9);
}

.dashboard__card--wide[b-3vse2cire1] {
    min-width: 0;
}

.dashboard__card--full[b-3vse2cire1] {
    grid-column: 1 / -1;
}

@keyframes cardReveal-b-3vse2cire1 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dashboard__card-header[b-3vse2cire1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--rame-space-4, 16px);
    gap: var(--rame-space-3, 12px);
}

.dashboard__card-title[b-3vse2cire1] {
    font-size: var(--rame-text-base, 14px);
    font-weight: var(--rame-font-semibold, 600);
    color: var(--rame-text-primary, #1c1e21);
    margin: 0;
}

.dashboard__card-count[b-3vse2cire1] {
    font-size: var(--rame-text-xs, 11px);
    color: var(--rame-text-tertiary, #8a8d91);
    white-space: nowrap;
}

.dashboard__card-tag[b-3vse2cire1] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--rame-radius-sm, 4px);
    font-size: 10px;
    font-weight: var(--rame-font-semibold, 600);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.dashboard__card-tag--green[b-3vse2cire1] {
    background: var(--rame-success-light, #e6f9ed);
    color: var(--rame-success, #25d366);
}

.dashboard__card-tag--amber[b-3vse2cire1] {
    background: var(--rame-warning-light, #fff3e0);
    color: var(--rame-warning-text, #e65100);
}

.dashboard__card-tag--blue[b-3vse2cire1] {
    background: var(--rame-primary-light, #e6f3ff);
    color: var(--rame-primary, #0084ff);
}

/* ========== EMPTY STATE ========== */

.dashboard__empty[b-3vse2cire1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--rame-space-3, 12px);
    height: 220px;
    color: var(--rame-text-tertiary, #8a8d91);
    font-size: var(--rame-text-sm, 12px);
}

/* ========== TABLES ========== */

.dashboard__table-wrap[b-3vse2cire1] {
    overflow-x: clip;
    overflow-y: visible;
    margin: 0 calc(var(--rame-space-5, 20px) * -1);
    padding: 0 var(--rame-space-5, 20px);
}

.dashboard__table[b-3vse2cire1] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--rame-text-sm, 12px);
}

.dashboard__th[b-3vse2cire1] {
    padding: var(--rame-space-2, 8px) var(--rame-space-3, 12px);
    text-align: left;
    font-weight: var(--rame-font-semibold, 600);
    color: var(--rame-text-tertiary, #8a8d91);
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    white-space: nowrap;
}

.dashboard__th--right[b-3vse2cire1] {
    text-align: right;
}

/* ========== TABLE HEADER TOOLTIP ========== */

.dashboard__th-info[b-3vse2cire1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    cursor: default;
    position: relative;
    color: var(--rame-text-muted, #b0b3b8);
    transition: color 0.15s ease;
    vertical-align: middle;
    margin-left: 4px;
}

.dashboard__th-info:hover[b-3vse2cire1] {
    color: var(--rame-text-tertiary, #8a8d91);
}

.dashboard__th-info svg[b-3vse2cire1] {
    display: block;
}

.dashboard__th-tooltip[b-3vse2cire1] {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    z-index: 100;

    width: 220px;
    padding: 9px 12px;
    white-space: normal;
    text-align: left;

    background: #1c1e21;
    color: #f0f0f0;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: 0.1px;
    text-transform: none;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.22), 0 1px 4px rgba(0,0,0,0.14);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.dashboard__th-tooltip[b-3vse2cire1]::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 12px;
    border: 5px solid transparent;
    border-top-color: #1c1e21;
}

.dashboard__th-info:hover .dashboard__th-tooltip[b-3vse2cire1] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}

.dashboard__tr[b-3vse2cire1] {
    transition: background 0.15s ease;
}

.dashboard__tr:hover[b-3vse2cire1] {
    background: var(--rame-bg-secondary, #f7f8fa);
}

.dashboard__td[b-3vse2cire1] {
    padding: var(--rame-space-3, 12px) var(--rame-space-3, 12px);
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
    color: var(--rame-text-primary, #1c1e21);
    white-space: nowrap;
    vertical-align: middle;
}

.dashboard__tr:last-child .dashboard__td[b-3vse2cire1] {
    border-bottom: none;
}

.dashboard__td--right[b-3vse2cire1] {
    text-align: right;
}

.dashboard__td--mono[b-3vse2cire1] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    letter-spacing: -0.2px;
}

.dashboard__td--name[b-3vse2cire1] {
    display: flex;
    align-items: center;
    gap: var(--rame-space-2, 8px);
    font-weight: var(--rame-font-medium, 500);
}

.dashboard__td--muted[b-3vse2cire1] {
    color: var(--rame-text-tertiary, #8a8d91);
}

/* Avatar circles */
.dashboard__avatar[b-3vse2cire1] {
    width: 28px;
    height: 28px;
    border-radius: var(--rame-radius-full, 50%);
    background: var(--rame-primary-light, #e6f3ff);
    color: var(--rame-primary, #0084ff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: var(--rame-font-semibold, 600);
    flex-shrink: 0;
}

.dashboard__avatar--small[b-3vse2cire1] {
    width: 24px;
    height: 24px;
    font-size: 10px;
}

/* Badge pills */
.dashboard__badge[b-3vse2cire1] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--rame-radius-2xl, 20px);
    font-size: 11px;
    font-weight: var(--rame-font-semibold, 600);
    font-variant-numeric: tabular-nums;
    background: var(--rame-bg-tertiary, #f0f2f5);
    color: var(--rame-text-secondary, #65676b);
}

.dashboard__badge--success[b-3vse2cire1] {
    background: var(--rame-success-light, #e6f9ed);
    color: var(--rame-success, #25d366);
}

.dashboard__badge--warn[b-3vse2cire1] {
    background: var(--rame-warning-light, #fff3e0);
    color: var(--rame-warning-text, #e65100);
}

/* ========== RESPONSIVE ========== */

@media (max-width: 1200px) {
    .dashboard__kpis[b-3vse2cire1] {
        grid-template-columns: repeat(2, 1fr);
    }
    .dashboard__grid--main[b-3vse2cire1],
    .dashboard__grid--main-three[b-3vse2cire1],
    .dashboard__grid--half[b-3vse2cire1],
    .dashboard__grid--triple[b-3vse2cire1] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .dashboard[b-3vse2cire1] {
        padding: var(--rame-space-4, 16px);
        gap: var(--rame-space-6, 24px);
    }
    .dashboard__kpis[b-3vse2cire1],
    .dashboard__kpis--compact[b-3vse2cire1] {
        grid-template-columns: 1fr;
    }
    .dashboard__header[b-3vse2cire1] {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard__section[b-3vse2cire1],
    .dashboard__card[b-3vse2cire1] {
        animation: none;
    }
}

/* ========== DARK MODE ========== */

:global([data-rame-theme="dark"]) .dashboard__title[b-3vse2cire1] {
    color: var(--rame-text-primary, #f0f0f0);
}

:global([data-rame-theme="dark"]) .dashboard__header[b-3vse2cire1] {
    border-bottom-color: var(--rame-border-light, #404040);
}

:global([data-rame-theme="dark"]) .dashboard__section-badge--general[b-3vse2cire1] {
    background: rgba(0, 132, 255, 0.12);
    color: var(--rame-primary, #3b9eff);
}

:global([data-rame-theme="dark"]) .dashboard__section-badge--travel[b-3vse2cire1] {
    background: rgba(255, 152, 0, 0.12);
    color: var(--rame-warning, #ffb347);
}

:global([data-rame-theme="dark"]) .dashboard__section-badge--ai[b-3vse2cire1] {
    background: rgba(139, 92, 246, 0.16);
    color: #a78bfa;
}

:global([data-rame-theme="dark"]) .dashboard__card[b-3vse2cire1] {
    background: var(--rame-bg-primary, #1e1e1e);
    border-color: var(--rame-border-light, #404040);
}

:global([data-rame-theme="dark"]) .dashboard__card:hover[b-3vse2cire1] {
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
    border-color: var(--rame-border-medium, #505050);
}

:global([data-rame-theme="dark"]) .dashboard__card-title[b-3vse2cire1] {
    color: var(--rame-text-primary, #f0f0f0);
}

:global([data-rame-theme="dark"]) .dashboard__card-tag--green[b-3vse2cire1] {
    background: rgba(37, 211, 102, 0.12);
}

:global([data-rame-theme="dark"]) .dashboard__card-tag--amber[b-3vse2cire1] {
    background: rgba(255, 152, 0, 0.12);
}

:global([data-rame-theme="dark"]) .dashboard__card-tag--blue[b-3vse2cire1] {
    background: rgba(0, 132, 255, 0.12);
}

:global([data-rame-theme="dark"]) .dashboard__td[b-3vse2cire1] {
    color: var(--rame-text-primary, #f0f0f0);
    border-bottom-color: var(--rame-border-light, #404040);
}

:global([data-rame-theme="dark"]) .dashboard__th[b-3vse2cire1] {
    border-bottom-color: var(--rame-border-light, #404040);
    color: var(--rame-text-tertiary, #a0a0a0);
}

:global([data-rame-theme="dark"]) .dashboard__tr:hover[b-3vse2cire1] {
    background: var(--rame-bg-hover, #3a3a3a);
}

:global([data-rame-theme="dark"]) .dashboard__avatar[b-3vse2cire1] {
    background: rgba(0, 132, 255, 0.15);
    color: var(--rame-primary, #3b9eff);
}

:global([data-rame-theme="dark"]) .dashboard__badge[b-3vse2cire1] {
    background: var(--rame-bg-tertiary, #333333);
}

:global([data-rame-theme="dark"]) .dashboard__badge--success[b-3vse2cire1] {
    background: rgba(37, 211, 102, 0.12);
    color: var(--rame-success, #2ecc71);
}

:global([data-rame-theme="dark"]) .dashboard__badge--warn[b-3vse2cire1] {
    background: rgba(255, 152, 0, 0.12);
    color: var(--rame-warning, #ffb347);
}

:global([data-rame-theme="dark"]) .dashboard__currency-select[b-3vse2cire1] {
    background-color: var(--rame-bg-primary, #1e1e1e);
    border-color: var(--rame-border-light, #404040);
    color: var(--rame-text-primary, #f0f0f0);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

:global([data-rame-theme="dark"]) .dashboard__currency-select:hover[b-3vse2cire1] {
    border-color: var(--rame-border-medium, #505050);
}

:global([data-rame-theme="dark"]) .dashboard__currency-label[b-3vse2cire1] {
    background: var(--rame-bg-tertiary, #333333);
    color: var(--rame-text-secondary, #b0b0b0);
}

:global([data-rame-theme="dark"]) .dashboard__th-info[b-3vse2cire1] {
    color: #555555;
}

:global([data-rame-theme="dark"]) .dashboard__th-info:hover[b-3vse2cire1] {
    color: var(--rame-text-tertiary, #a0a0a0);
}

:global([data-rame-theme="dark"]) .dashboard__th-tooltip[b-3vse2cire1] {
    background: #0d0e10;
    color: #e8e8e8;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3);
}

:global([data-rame-theme="dark"]) .dashboard__th-tooltip[b-3vse2cire1]::after {
    border-top-color: #0d0e10;
}


/* === Ad Performance Section ===
   Post-card layout: subtle channel/media header, square media (1:1) with branded
   placeholder behind it (so failed downloads show channel color + icon, not a broken
   image), caption-style headline+body, prominent stats. Inspired by social feed
   aesthetics without cloning IG/FB UI. */

.ads-grid[b-3vse2cire1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--rame-space-4, 16px);
}

.ad-card[b-3vse2cire1] {
    display: flex;
    flex-direction: column;
    background: var(--rame-bg-primary, #ffffff);
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: var(--rame-radius-md, 10px);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.ad-card--clickable[b-3vse2cire1] {
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
}

.ad-card:hover[b-3vse2cire1],
.ad-card--clickable:hover[b-3vse2cire1] {
    box-shadow: var(--rame-shadow-md, 0 4px 14px rgba(0, 0, 0, 0.08));
    transform: translateY(-2px);
    border-color: var(--rame-border-medium, #d0d3d9);
}

.ad-card--clickable:focus-visible[b-3vse2cire1] {
    outline: none;
    border-color: var(--rame-primary, #0084ff);
    box-shadow: 0 0 0 2px rgba(0, 132, 255, 0.18);
}

/* === Card header: channel badge + media chip === */

.ad-card-header[b-3vse2cire1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rame-space-2, 8px);
    padding: 10px 12px 8px;
}

.ad-source-badge[b-3vse2cire1] {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: var(--rame-radius-sm, 4px);
    font-size: 10px;
    font-weight: var(--rame-font-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: var(--rame-info-light, #e3f2fd);
    color: var(--rame-info, #0084ff);
}

/* Channel-specific badge tint — kept subtle so it's recognizable but doesn't fight
   the more saturated media frame below. */
.ad-source-badge--instagramad[b-3vse2cire1],
.ad-source-badge--instagrampost[b-3vse2cire1],
.ad-source-badge--instagramdirect[b-3vse2cire1] {
    background: rgba(214, 41, 118, 0.10);
    color: #c2185b;
}

.ad-source-badge--facebookad[b-3vse2cire1],
.ad-source-badge--facebookpost[b-3vse2cire1],
.ad-source-badge--facebookmessengerdirect[b-3vse2cire1] {
    background: rgba(24, 119, 242, 0.10);
    color: #1877f2;
}

.ad-source-badge--whatsappdirect[b-3vse2cire1] {
    background: rgba(37, 211, 102, 0.12);
    color: #128c7e;
}

.ad-source-badge--emaildirect[b-3vse2cire1] {
    background: rgba(234, 67, 53, 0.10);
    color: #c5221f;
}

.ad-media-chip[b-3vse2cire1] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--rame-bg-tertiary, #f0f2f5);
    color: var(--rame-text-secondary, #65676b);
    border-radius: 999px;
    font-size: 10px;
    font-weight: var(--rame-font-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.ad-media-chip--video[b-3vse2cire1] {
    background: rgba(28, 30, 33, 0.92);
    color: #ffffff;
}

/* === Square media frame (1:1) === */

.ad-thumb-wrap[b-3vse2cire1] {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--rame-bg-tertiary, #f0f2f5);
}

.ad-thumb[b-3vse2cire1] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.ad-thumb--video[b-3vse2cire1] {
    background-color: #000;
    cursor: pointer;
}

/* Branded placeholder is rendered ALWAYS underneath the media. If media is missing
   (no MediaUrl) or fails to load (the inline onerror handler removes the <img>/<video>),
   the placeholder is exposed naturally. */
.ad-thumb-placeholder[b-3vse2cire1] {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.95);
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.ad-thumb-placeholder[b-3vse2cire1]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.18), transparent 55%);
    pointer-events: none;
}

.ad-thumb-placeholder > *[b-3vse2cire1] {
    position: relative;
    z-index: 1;
}

.ad-thumb-placeholder-label[b-3vse2cire1] {
    font-size: 11px;
    font-weight: var(--rame-font-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 0 12px;
}

/* Channel-specific placeholder backgrounds (cover the wrap so they show through
   when media is missing/broken). */
.ad-thumb-wrap--source-instagramad[b-3vse2cire1],
.ad-thumb-wrap--source-instagrampost[b-3vse2cire1],
.ad-thumb-wrap--source-instagramdirect[b-3vse2cire1] {
    background: linear-gradient(135deg, #feda75 0%, #fa7e1e 22%, #d62976 50%, #962fbf 75%, #4f5bd5 100%);
}

.ad-thumb-wrap--source-facebookad[b-3vse2cire1],
.ad-thumb-wrap--source-facebookpost[b-3vse2cire1],
.ad-thumb-wrap--source-facebookmessengerdirect[b-3vse2cire1] {
    background: linear-gradient(135deg, #1877f2 0%, #0a4fb8 100%);
}

.ad-thumb-wrap--source-whatsappdirect[b-3vse2cire1] {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
}

.ad-thumb-wrap--source-emaildirect[b-3vse2cire1] {
    background: linear-gradient(135deg, #ea4335 0%, #c5221f 100%);
}

.ad-thumb-wrap--source-website[b-3vse2cire1],
.ad-thumb-wrap--source-referral[b-3vse2cire1],
.ad-thumb-wrap--source-phone[b-3vse2cire1],
.ad-thumb-wrap--source-inperson[b-3vse2cire1],
.ad-thumb-wrap--source-manual[b-3vse2cire1],
.ad-thumb-wrap--source-other[b-3vse2cire1],
.ad-thumb-wrap--source-unknown[b-3vse2cire1] {
    background: linear-gradient(135deg, #4b5563 0%, #1f2937 100%);
}

/* === Caption-style meta === */

.ad-meta[b-3vse2cire1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    flex: 1;
}

.ad-headline[b-3vse2cire1] {
    margin: 0;
    font-size: var(--rame-text-sm, 13px);
    font-weight: var(--rame-font-semibold, 600);
    line-height: 1.35;
    color: var(--rame-text-primary, #1c1e21);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ad-body-excerpt[b-3vse2cire1] {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--rame-text-tertiary, #8a8d91);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* === Stats (unchanged structure, slight density tweak) === */

.ad-stats[b-3vse2cire1] {
    display: flex;
    border-top: 1px solid var(--rame-border-light, #e4e6eb);
    background: var(--rame-bg-secondary, #fafbfc);
}

.ad-stat[b-3vse2cire1] {
    flex: 1;
    padding: 10px var(--rame-space-3, 12px);
    text-align: center;
    border-right: 1px solid var(--rame-border-light, #e4e6eb);
}

.ad-stat:last-child[b-3vse2cire1] {
    border-right: none;
}

.ad-stat-value[b-3vse2cire1] {
    display: block;
    font-size: var(--rame-text-xl, 18px);
    font-weight: var(--rame-font-bold, 700);
    color: var(--rame-text-primary, #1c1e21);
    line-height: 1.2;
}

.ad-stat-label[b-3vse2cire1] {
    display: block;
    font-size: 10px;
    color: var(--rame-text-tertiary, #8a8d91);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

/* === Section badge variant for the ads tab === */

.dashboard__section-badge--ads[b-3vse2cire1] {
    color: #d62976;
    background: rgba(214, 41, 118, 0.08);
}

/* === Dark theme overrides === */

:global([data-rame-theme="dark"]) .ad-card[b-3vse2cire1] {
    background: var(--rame-bg-secondary, #1a1c1e);
    border-color: var(--rame-border-light, #2a2d31);
}

:global([data-rame-theme="dark"]) .ad-thumb-wrap[b-3vse2cire1] {
    background-color: var(--rame-bg-tertiary, #232629);
}

:global([data-rame-theme="dark"]) .ad-stats[b-3vse2cire1] {
    background: rgba(255, 255, 255, 0.02);
    border-top-color: var(--rame-border-light, #2a2d31);
}

:global([data-rame-theme="dark"]) .ad-stat[b-3vse2cire1] {
    border-right-color: var(--rame-border-light, #2a2d31);
}

:global([data-rame-theme="dark"]) .ad-media-chip[b-3vse2cire1] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--rame-text-secondary, #a0a0a0);
}

:global([data-rame-theme="dark"]) .ad-source-badge[b-3vse2cire1] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--rame-text-secondary, #a0a0a0);
}

:global([data-rame-theme="dark"]) .dashboard__section-badge--ads[b-3vse2cire1] {
    background: rgba(214, 41, 118, 0.15);
    color: #f48fb1;
}

/* ========== MOBILE / TABLET RESPONSIVE ========== */

/* Tablet (≤1024px): 2-col KPI grid, stacked header */
@media (max-width: 1024px) {
    .dashboard[b-3vse2cire1] {
        padding: var(--rame-space-4, 16px);
    }

    .dashboard__header[b-3vse2cire1] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--rame-space-3, 12px);
    }

    .dashboard__header-controls[b-3vse2cire1] {
        flex-wrap: wrap;
        width: 100%;
    }

    .dashboard__currency-select[b-3vse2cire1] {
        flex: 1 1 auto;
        min-width: 120px;
    }

    .dashboard__kpis[b-3vse2cire1] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .dashboard__grid[b-3vse2cire1],
    .dashboard__grid--main[b-3vse2cire1],
    .dashboard__grid--main-three[b-3vse2cire1],
    .dashboard__grid--half[b-3vse2cire1] {
        grid-template-columns: 1fr !important;
    }

    .dashboard__title[b-3vse2cire1] {
        font-size: 22px;
    }
}

/* Mobile (≤640px): 1-col KPI, smaller paddings */
@media (max-width: 640px) {
    .dashboard[b-3vse2cire1] {
        padding: var(--rame-space-3, 12px);
    }

    .dashboard__kpis[b-3vse2cire1] {
        grid-template-columns: 1fr !important;
    }

    .dashboard__title[b-3vse2cire1] {
        font-size: 20px;
    }

    .dashboard__subtitle[b-3vse2cire1] {
        font-size: 13px;
    }

    .dashboard__section[b-3vse2cire1] {
        margin-bottom: var(--rame-space-4, 16px);
    }

    .dashboard__leaderboard[b-3vse2cire1],
    .dashboard table[b-3vse2cire1] {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
/* _content/Rame.Blazor.Server/Editors/Conversations/ConversationChatListView.razor.rz.scp.css */
/* Professional Chat Container - Refined Enterprise Design */
/* Uses Rame Design System tokens - see /css/design-system/_tokens.css */

.chat-container[b-i9fx4jgtx6] {
    margin-top: 15px;
    display: flex;
    height: 100%;
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: var(--rame-radius-2xl, 12px);
    overflow: hidden;
    background: var(--rame-bg-primary, #ffffff);
    box-shadow: var(--rame-shadow-md, 0 2px 12px rgba(0, 0, 0, 0.08));
}

/* Nested context (inside a parent DetailView tab): give the container a fixed
   viewport-relative height so the message panel scrolls internally instead of
   stretching the parent layout to fit the entire conversation. */
.chat-container--nested[b-i9fx4jgtx6] {
    height: calc(100vh - 280px);
    min-height: 500px;
}

/* ========== MOBILE / TABLET — STACK-NAVEGABLE ========== */
@media (max-width: 1024px) {
    .chat-container[b-i9fx4jgtx6] {
        margin-top: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        height: 100dvh; /* honors iOS virtual keyboard */
    }
}
/* _content/Rame.Blazor.Server/Editors/FinanceProgress/FinanceProgressComponent.razor.rz.scp.css */
/* Read-only finance progress bar. Uses DevExpress theme CSS variables so it adapts to light/dark. */
.fp-track[b-qrsy89x672] {
    position: relative;
    height: 20px;
    width: 100%;
    min-width: 120px;
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--dxbl-gray-200, #eeeeee);
    border: 1px solid var(--dxbl-border-color, #dddddd);
}

.fp-fill[b-qrsy89x672] {
    height: 100%;
    background-color: var(--dxbl-success, #4caf50);
    transition: width 0.3s ease;
}

.fp-label[b-qrsy89x672] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding-left: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--dxbl-body-color, #333333);
    white-space: nowrap;
    pointer-events: none;
}
/* _content/Rame.Blazor.Server/Editors/Leads/OpportunityKanbanView.razor.rz.scp.css */
/* Professional Kanban Container - Refined Enterprise Design */
/* Uses Rame Design System tokens - see /css/design-system/_tokens.css */

.kanban-container[b-j6ydb7plvx] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: linear-gradient(135deg, var(--rame-bg-secondary, #f7f8fa) 0%, var(--rame-bg-tertiary, #fafbfc) 100%);
    overflow: hidden;
}

.kanban-board[b-j6ydb7plvx] {
    display: flex;
    gap: 20px;
    padding: 20px;
    overflow-x: auto;
    flex: 1;
    align-items: flex-start;
}

/* Custom Professional Scrollbar */
.kanban-board[b-j6ydb7plvx]::-webkit-scrollbar {
    height: 10px;
}

.kanban-board[b-j6ydb7plvx]::-webkit-scrollbar-track {
    background: var(--rame-border-light, #e4e6eb);
    border-radius: 5px;
    margin: 0 20px;
}

.kanban-board[b-j6ydb7plvx]::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--rame-scrollbar-thumb, #bcc0c4) 0%, #a8acb0 100%);
    border-radius: 5px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: background 0.2s ease;
}

.kanban-board[b-j6ydb7plvx]::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, var(--rame-text-tertiary, #8a8d91) 0%, #75787c 100%);
}

.kanban-board[b-j6ydb7plvx]::-webkit-scrollbar-thumb:active {
    background: var(--rame-text-secondary, #65676b);
}

.kanban-empty[b-j6ydb7plvx] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: var(--rame-text-tertiary, #8a8d91);
    gap: 12px;
    padding: 40px;
    text-align: center;
}

.kanban-empty p[b-j6ydb7plvx] {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
}

.kanban-empty p:first-child[b-j6ydb7plvx] {
    font-size: 16px;
    font-weight: 600;
    color: var(--rame-text-secondary, #65676b);
}

/* Loading state */
.kanban-container.loading[b-j6ydb7plvx]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--rame-primary, #0084ff), transparent);
    animation: loadingSlide-b-j6ydb7plvx 1.5s ease-in-out infinite;
}

@keyframes loadingSlide-b-j6ydb7plvx {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .kanban-board[b-j6ydb7plvx] {
        gap: 16px;
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .kanban-board[b-j6ydb7plvx] {
        gap: 12px;
        padding: 12px;
    }

    .kanban-board[b-j6ydb7plvx]::-webkit-scrollbar {
        height: 6px;
    }

    .kanban-empty[b-j6ydb7plvx] {
        padding: 20px;
    }

    .kanban-empty p:first-child[b-j6ydb7plvx] {
        font-size: 14px;
    }

    .kanban-empty p[b-j6ydb7plvx] {
        font-size: 13px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .kanban-container.loading[b-j6ydb7plvx]::after {
        animation: none;
    }
}

/* ========== MOBILE STAGE PICKER WRAPPER ========== */
/* Base styles outside @media — the wrapper element carries rame-mobile-only
   (from Phase 1) so it is hidden on desktop and these styles never paint. */
.kanban-mobile-stage-picker[b-j6ydb7plvx] {
    padding: var(--rame-space-3, 12px) var(--rame-space-4, 16px);
    background: var(--rame-bg-secondary, #f7f8fa);
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
}

.kanban-mobile-stage-combo[b-j6ydb7plvx] {
    width: 100%;
}

/* ========== MOBILE: STACK BOARD VERTICALLY + REDUCE PADDING ========== */
@media (max-width: 640px) {
    .kanban-board[b-j6ydb7plvx] {
        flex-direction: column !important;
        height: auto;
        overflow-x: hidden;
        gap: var(--rame-space-3, 12px);
        padding: var(--rame-space-3, 12px);  /* was 20px — give the active column more breathing room edge-to-edge */
    }
}
/* _content/Rame.Blazor.Server/Editors/Templates/TemplatePreview.razor.rz.scp.css */
.whatsapp-preview-container[b-ilev6b7dca] {
    padding: 16px;
    background: #f0f2f5;
    border-radius: 8px;
    min-height: 300px;
}

.whatsapp-phone-frame[b-ilev6b7dca] {
    max-width: 360px;
    margin: 0 auto;
    background: #e5ddd5;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.whatsapp-header[b-ilev6b7dca] {
    background: #075e54;
    color: white;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.whatsapp-avatar[b-ilev6b7dca] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #128c7e;
}

.whatsapp-contact-name[b-ilev6b7dca] {
    font-weight: 500;
    font-size: 16px;
}

.whatsapp-chat-area[b-ilev6b7dca] {
    padding: 16px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABPSURBVEiJ7c5BDQAgDASwXfx7JqBIH6lHJcCMAwAAuIMkt+0kIzPoJLpJbpLUiQkAAG7bk+wkt+3dA/+IbiQRAABU9Jb0d2IAAPgC/AFzNQyAZfYYIAAAAABJRU5ErkJggg==");
    min-height: 200px;
}

.whatsapp-bubble[b-ilev6b7dca] {
    background: #dcf8c6;
    padding: 8px 12px;
    border-radius: 8px;
    max-width: 85%;
    position: relative;
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
}

.whatsapp-bubble.outgoing[b-ilev6b7dca] {
    margin-left: auto;
    border-top-right-radius: 0;
}

.wa-media-container[b-ilev6b7dca] {
    margin: -8px -12px 8px -12px;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.wa-media[b-ilev6b7dca] {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    display: block;
}

.wa-media-placeholder[b-ilev6b7dca] {
    background: #e0e0e0;
    padding: 24px;
    text-align: center;
    color: #666;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.wa-media-icon[b-ilev6b7dca] {
    font-size: 32px;
}

.wa-header[b-ilev6b7dca] {
    font-weight: 600;
    margin-bottom: 4px;
    color: #303030;
    font-size: 15px;
}

.wa-body[b-ilev6b7dca] {
    white-space: pre-wrap;
    word-wrap: break-word;
    color: #303030;
    font-size: 14.2px;
    line-height: 1.4;
}

.wa-footer[b-ilev6b7dca] {
    font-size: 13px;
    color: #667781;
    margin-top: 4px;
}

.wa-time[b-ilev6b7dca] {
    font-size: 11px;
    color: #667781;
    text-align: right;
    margin-top: 4px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
}

.wa-check[b-ilev6b7dca] {
    color: #53bdeb;
}

.wa-buttons-container[b-ilev6b7dca] {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 85%;
    margin-left: auto;
}

.wa-button[b-ilev6b7dca] {
    background: white;
    border: 1px solid #e0e0e0;
    padding: 10px 16px;
    border-radius: 8px;
    text-align: center;
    color: #00a884;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
}

.wa-button:hover[b-ilev6b7dca] {
    background: #f5f5f5;
}

.wa-button.url-button[b-ilev6b7dca],
.wa-button.phone-button[b-ilev6b7dca] {
    color: #00a884;
}

.wa-empty-message[b-ilev6b7dca] {
    text-align: center;
    padding: 24px;
    color: #667781;
    font-style: italic;
    background: white;
    border-radius: 8px;
    margin-top: 16px;
}

.wa-location-placeholder[b-ilev6b7dca] {
    background: linear-gradient(135deg, #cfe8dc 0%, #e6f1ea 100%);
    padding: 16px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.wa-location-text[b-ilev6b7dca] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    color: #303030;
}

.wa-location-text strong[b-ilev6b7dca] {
    font-weight: 600;
}

.wa-coords[b-ilev6b7dca] {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #667781;
}
/* _content/Rame.Blazor.Server/Editors/Workflows/Components/BlockPalette.razor.rz.scp.css */
.workflow-palette[b-lhy4k8w1c2] {
    width: 220px;
    background: #fff;
    border-right: 1px solid #e0e0e0;
    overflow-y: auto;
    padding: 16px;
}

.workflow-palette h4[b-lhy4k8w1c2] {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.palette-section[b-lhy4k8w1c2] {
    margin-bottom: 20px;
}

.palette-section h5[b-lhy4k8w1c2] {
    margin: 0 0 8px 0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 4px;
    border-bottom: 2px solid;
}

.section-trigger[b-lhy4k8w1c2] {
    color: #667eea;
    border-color: #667eea !important;
}

.section-action[b-lhy4k8w1c2] {
    color: #00a86b;
    border-color: #00a86b !important;
}

.section-delay[b-lhy4k8w1c2] {
    color: #0084ff;
    border-color: #0084ff !important;
}

.palette-block[b-lhy4k8w1c2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: #f8f9fa;
    border-radius: 6px;
    cursor: grab;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.palette-block:hover[b-lhy4k8w1c2] {
    background: #fff;
    border-color: #ddd;
    transform: translateX(4px);
}

.palette-block.trigger:hover[b-lhy4k8w1c2] {
    border-color: #667eea;
}

.palette-block.action:hover[b-lhy4k8w1c2] {
    border-color: #00a86b;
}

.palette-block.delay:hover[b-lhy4k8w1c2],
.palette-block.condition:hover[b-lhy4k8w1c2] {
    border-color: #0084ff;
}

.block-icon[b-lhy4k8w1c2] {
    font-size: 18px;
}

.block-name[b-lhy4k8w1c2] {
    font-size: 13px;
    color: #333;
}
/* _content/Rame.Blazor.Server/Editors/Workflows/Components/WorkflowBlock.razor.rz.scp.css */
/* Professional Workflow Block - Refined Enterprise Design */
/* Uses Rame Design System tokens - see /css/design-system/_tokens.css */

.workflow-block[b-uty6lvo5ss] {
    position: absolute;
    background: var(--rame-bg-primary, #fff);
    border-radius: 8px;
    box-shadow: var(--rame-shadow-md, 0 2px 8px rgba(0,0,0,0.1));
    cursor: move;
    transition: box-shadow 0.2s, transform 0.2s;
    user-select: none;
}

.workflow-block:hover[b-uty6lvo5ss] {
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.workflow-block.selected[b-uty6lvo5ss] {
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
}

/* Validation error state */
.workflow-block.has-errors[b-uty6lvo5ss] {
    border: 2px solid var(--rame-error, #f44336);
    animation: error-pulse-b-uty6lvo5ss 2s ease-in-out infinite;
}

@keyframes error-pulse-b-uty6lvo5ss {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3);
    }
    50% {
        box-shadow: 0 4px 16px rgba(244, 67, 54, 0.5);
    }
}

.validation-indicator[b-uty6lvo5ss] {
    font-size: 14px;
    margin-left: auto;
    cursor: help;
    animation: warning-bounce-b-uty6lvo5ss 1s ease-in-out infinite;
}

@keyframes warning-bounce-b-uty6lvo5ss {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-2px);
    }
}

.block-header[b-uty6lvo5ss] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px 8px 0 0;
    color: white;
    font-weight: 500;
}

.block-header.trigger[b-uty6lvo5ss] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.block-header.action[b-uty6lvo5ss] {
    background: linear-gradient(135deg, var(--rame-success, #00a86b) 0%, #00c853 100%);
}

.block-header.condition[b-uty6lvo5ss] {
    background: linear-gradient(135deg, var(--rame-warning, #ff9800) 0%, #ffc107 100%);
}

.block-header.delay[b-uty6lvo5ss] {
    background: linear-gradient(135deg, var(--rame-accent, #0084ff) 0%, #00b4ff 100%);
}

.block-icon[b-uty6lvo5ss] {
    font-size: 18px;
}

.block-title[b-uty6lvo5ss] {
    flex: 1;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-delete-block[b-uty6lvo5ss] {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
}

.workflow-block:hover .btn-delete-block[b-uty6lvo5ss] {
    opacity: 1;
}

.btn-delete-block:hover[b-uty6lvo5ss] {
    background: rgba(255,255,255,0.4);
}

.block-body[b-uty6lvo5ss] {
    padding: 10px 12px;
}

.block-subtitle[b-uty6lvo5ss] {
    font-size: 12px;
    color: var(--rame-text-secondary, #666);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.block-subtitle.placeholder[b-uty6lvo5ss] {
    color: var(--rame-text-tertiary, #999);
    font-style: italic;
}

.block-ports[b-uty6lvo5ss] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.port[b-uty6lvo5ss] {
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--rame-bg-primary, #fff);
    border: 2px solid var(--rame-text-secondary, #666);
    border-radius: 50%;
    pointer-events: auto;
    cursor: crosshair;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    z-index: 10;
}

/* Larger hit area for ports */
.port[b-uty6lvo5ss]::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 50%;
}

.port:hover[b-uty6lvo5ss] {
    transform: scale(1.4);
    border-color: #667eea;
    box-shadow: 0 0 8px rgba(102, 126, 234, 0.5);
}

.port-input[b-uty6lvo5ss] {
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
}

.port-output[b-uty6lvo5ss] {
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
}

/* Port active states during connection */
.port-active[b-uty6lvo5ss] {
    background: var(--rame-primary-light, #e3f2fd);
    border-color: var(--rame-info, #2196f3);
    animation: port-pulse-b-uty6lvo5ss 1s ease-in-out infinite;
}

.port-connecting[b-uty6lvo5ss] {
    background: #667eea;
    border-color: #667eea;
    transform: translateY(-50%) scale(1.3);
}

@keyframes port-pulse-b-uty6lvo5ss {
    0%, 100% {
        transform: translateY(-50%) scale(1);
        box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.4);
    }
    50% {
        transform: translateY(-50%) scale(1.1);
        box-shadow: 0 0 0 8px rgba(33, 150, 243, 0);
    }
}
/* _content/Rame.Blazor.Server/Editors/Workflows/WorkflowDesignerView.razor.rz.scp.css */
/* Designer shell */
.workflow-designer[b-k3dgxrzsu2] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #f1f5f9;
    overflow: hidden;
}

/* Header — clean and minimal */
.workflow-header[b-k3dgxrzsu2] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
    z-index: 10;
}

.btn-back[b-k3dgxrzsu2] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #64748b;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.btn-back:hover[b-k3dgxrzsu2] {
    background: #f1f5f9;
    color: #1e293b;
}

.workflow-title[b-k3dgxrzsu2] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-k3dgxrzsu2] .workflow-name-input {
    max-width: 400px;
}

[b-k3dgxrzsu2] .workflow-name-input input {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    padding: 6px 10px;
    transition: all 0.15s;
}

[b-k3dgxrzsu2] .workflow-name-input input:hover {
    border-color: #e2e8f0;
    background: #f8fafc;
}

[b-k3dgxrzsu2] .workflow-name-input input:focus {
    border-color: #6366f1;
    background: #fff;
    outline: none;
}

.unsaved-indicator[b-k3dgxrzsu2] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    flex-shrink: 0;
    animation: blink-b-k3dgxrzsu2 1.5s ease-in-out infinite;
}

@keyframes blink-b-k3dgxrzsu2 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.workflow-actions[b-k3dgxrzsu2] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.btn-save[b-k3dgxrzsu2] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: #6366f1;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s, opacity 0.15s;
}

.btn-save:not(:disabled):hover[b-k3dgxrzsu2] {
    background: #4f46e5;
    transform: translateY(-1px);
}

.btn-save:disabled[b-k3dgxrzsu2] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Error banner */
.error-banner[b-k3dgxrzsu2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: #fef2f2;
    border-bottom: 1px solid #fecaca;
    color: #dc2626;
    font-size: 13px;
    flex-shrink: 0;
}

.error-banner button[b-k3dgxrzsu2] {
    background: transparent;
    border: none;
    color: #dc2626;
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 4px;
    line-height: 1;
}

/* Builder area */
.workflow-builder-area[b-k3dgxrzsu2] {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
    min-height: 0;
}

/* Left palette panel */
.workflow-palette[b-k3dgxrzsu2] {
    width: 260px;
    flex-shrink: 0;
    background: #ffffff;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 0;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
}

.palette-header[b-k3dgxrzsu2] {
    padding: 16px 16px 10px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
}

.palette-header-title[b-k3dgxrzsu2] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #64748b;
    margin: 0 0 2px;
}

.palette-header-hint[b-k3dgxrzsu2] {
    font-size: 10px;
    color: #94a3b8;
    margin: 0;
}

.palette-trigger-item[b-k3dgxrzsu2] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: grab;
    transition: background 0.12s, border-left-color 0.12s;
    border-bottom: 1px solid #f8fafc;
    border-left: 3px solid transparent;
}

.palette-trigger-item:hover[b-k3dgxrzsu2] {
    background: #fffbeb;
    border-left-color: #f59e0b;
}

.palette-trigger-item:active[b-k3dgxrzsu2] {
    cursor: grabbing;
    background: #fef3c7;
}

.palette-item-icon-wrap[b-k3dgxrzsu2] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    transition: background 0.12s, border-color 0.12s;
}

.palette-trigger-item:hover .palette-item-icon-wrap[b-k3dgxrzsu2] {
    background: #fef9c3;
    border-color: #fde68a;
}

.palette-item-info[b-k3dgxrzsu2] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.palette-item-name[b-k3dgxrzsu2] {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.palette-item-drag-hint[b-k3dgxrzsu2] {
    font-size: 10px;
    color: #94a3b8;
    line-height: 1;
}

/* Scrollable step chain wrapper */
.workflow-step-chain-scroll[b-k3dgxrzsu2] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px 80px;
    scroll-behavior: smooth;
}

/* Step chain inner content (constrained width) */
.workflow-step-chain[b-k3dgxrzsu2] {
    width: 760px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* Trigger drop zone */
.trigger-drop-zone[b-k3dgxrzsu2] {
    width: 320px;
    min-height: 90px;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: default;
    transition: all 0.2s;
    background: #fff;
}

.trigger-drop-zone.drag-over[b-k3dgxrzsu2] {
    border-color: #f59e0b;
    background: #fffbeb;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15);
}

.drop-zone-icon[b-k3dgxrzsu2] {
    font-size: 28px;
    opacity: 0.5;
}

.drop-zone-title[b-k3dgxrzsu2] {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    margin: 0;
}

.drop-zone-hint[b-k3dgxrzsu2] {
    font-size: 11px;
    color: #94a3b8;
    margin: 0;
}

/* Config drawer — width is controlled by the inner ConfigurationPanel */
.workflow-config-drawer[b-k3dgxrzsu2] {
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

/* ========== MOBILE / TABLET — READ-ONLY MODE ========== */
@media (max-width: 1024px) {
    .workflow-builder-area[b-k3dgxrzsu2],
    .workflow-palette[b-k3dgxrzsu2],
    .workflow-actions[b-k3dgxrzsu2],
    .btn-save[b-k3dgxrzsu2] {
        pointer-events: none;
    }

    .workflow-builder-area[b-k3dgxrzsu2] {
        opacity: 0.85;
    }

    .workflow-header[b-k3dgxrzsu2] {
        flex-wrap: wrap;
        gap: var(--rame-space-2, 8px);
    }

    .workflow-title[b-k3dgxrzsu2] {
        font-size: 16px;
    }
}
/* _content/Rame.Blazor.Server/Pages/AgentDesignerPage.razor.rz.scp.css */
.agent-designer-page[b-pfrfz19yz4] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100vh;
    background: var(--color-bg-secondary, #f8fafc);
}

.loading-container[b-pfrfz19yz4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 1rem;
    color: var(--rame-text-secondary, #64748b);
}

.spinner[b-pfrfz19yz4] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--rame-border-light, #e0e0e0);
    border-top-color: var(--rame-primary, #667eea);
    border-radius: 50%;
    animation: spin-b-pfrfz19yz4 1s linear infinite;
}

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

.error-container[b-pfrfz19yz4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 1rem;
    text-align: center;
}

.error-container h3[b-pfrfz19yz4] {
    color: var(--rame-error, #f44336);
    margin: 0;
}

[b-pfrfz19yz4] .confirm-exit-modal .dxbl-popup-body {
    padding: 0;
}

[b-pfrfz19yz4] .confirm-exit-modal .dxbl-popup-content {
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.05),
        0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.confirm-modal[b-pfrfz19yz4] {
    width: 420px;
    background: var(--rame-bg-primary, #ffffff);
}

.confirm-modal__header[b-pfrfz19yz4] {
    padding: 32px 32px 24px;
    text-align: center;
    border-bottom: 1px solid var(--rame-border-light, #f1f5f9);
}

.confirm-modal__icon[b-pfrfz19yz4] {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rame-warning-light, #fef3c7);
    border-radius: 14px;
    color: var(--rame-warning, #d97706);
}

.confirm-modal__icon svg[b-pfrfz19yz4] {
    width: 28px;
    height: 28px;
}

.confirm-modal__title[b-pfrfz19yz4] {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 600;
    color: var(--rame-text-primary, #0f172a);
    letter-spacing: -0.025em;
}

.confirm-modal__subtitle[b-pfrfz19yz4] {
    margin: 0;
    font-size: 14px;
    color: var(--rame-text-secondary, #64748b);
    font-weight: 400;
}

.confirm-modal__body[b-pfrfz19yz4] {
    padding: 24px 32px;
}

.confirm-modal__body p[b-pfrfz19yz4] {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--rame-text-secondary, #475569);
}

.confirm-modal__actions[b-pfrfz19yz4] {
    display: flex;
    gap: 10px;
    padding: 20px 24px 24px;
    background: var(--rame-bg-tertiary, #f8fafc);
    border-top: 1px solid var(--rame-border-light, #f1f5f9);
}

.confirm-btn[b-pfrfz19yz4] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.confirm-btn svg[b-pfrfz19yz4] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.confirm-btn--danger[b-pfrfz19yz4] {
    background: transparent;
    color: var(--rame-error, #dc2626);
    border: 1px solid var(--rame-error-border, #fecaca);
}

.confirm-btn--danger:hover[b-pfrfz19yz4] {
    background: var(--rame-error-light, #fef2f2);
    border-color: #fca5a5;
}

.confirm-btn--ghost[b-pfrfz19yz4] {
    background: var(--rame-bg-primary, #ffffff);
    color: var(--rame-text-secondary, #475569);
    border: 1px solid var(--rame-border-light, #e2e8f0);
}

.confirm-btn--ghost:hover[b-pfrfz19yz4] {
    background: var(--rame-bg-tertiary, #f8fafc);
    border-color: var(--rame-border-medium, #cbd5e1);
    color: var(--rame-text-primary, #334155);
}

.confirm-btn--primary[b-pfrfz19yz4] {
    background: var(--rame-text-primary, #0f172a);
    color: #ffffff;
    border: 1px solid var(--rame-text-primary, #0f172a);
}

.confirm-btn--primary:hover[b-pfrfz19yz4] {
    background: var(--rame-text-secondary, #1e293b);
    border-color: var(--rame-text-secondary, #1e293b);
}

.btn[b-pfrfz19yz4] {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary[b-pfrfz19yz4] {
    background: linear-gradient(135deg, var(--rame-primary, #3b82f6) 0%, var(--rame-primary-hover, #2563eb) 100%);
    color: white;
}

:global([data-rame-theme="dark"] .confirm-modal)[b-pfrfz19yz4] {
    background: #282828 !important;
}

:global([data-rame-theme="dark"] .confirm-modal__header)[b-pfrfz19yz4] {
    border-bottom-color: #505050 !important;
}

:global([data-rame-theme="dark"] .confirm-modal__icon)[b-pfrfz19yz4] {
    background: #3d3020 !important;
    color: #ffb347 !important;
}

:global([data-rame-theme="dark"] .confirm-modal__title)[b-pfrfz19yz4] {
    color: #f0f0f0 !important;
}

:global([data-rame-theme="dark"] .confirm-modal__subtitle)[b-pfrfz19yz4] {
    color: #c8c8c8 !important;
}

:global([data-rame-theme="dark"] .confirm-modal__body p)[b-pfrfz19yz4] {
    color: #c8c8c8 !important;
}

:global([data-rame-theme="dark"] .confirm-modal__actions)[b-pfrfz19yz4] {
    background: #333333 !important;
    border-top-color: #505050 !important;
}

:global([data-rame-theme="dark"] .confirm-btn--danger)[b-pfrfz19yz4] {
    background: transparent !important;
    color: #ff6b6b !important;
    border-color: #5a3030 !important;
}

:global([data-rame-theme="dark"] .confirm-btn--ghost)[b-pfrfz19yz4] {
    background: #282828 !important;
    color: #e0e0e0 !important;
    border-color: #505050 !important;
}

:global([data-rame-theme="dark"] .confirm-btn--primary)[b-pfrfz19yz4] {
    background: #3b9eff !important;
    color: #ffffff !important;
    border-color: #3b9eff !important;
}
/* _content/Rame.Blazor.Server/Pages/EmailTemplateDesignerPage.razor.rz.scp.css */
.email-designer-page[b-9a4mdtzgw9] {
    display: grid;
    grid-template-rows: 1fr;
    height: 100%;
    min-height: 100vh;
    overflow: hidden;
    background: var(--rame-bg-primary);
}

.loading-container[b-9a4mdtzgw9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 1rem;
    color: var(--rame-text-secondary);
}

.spinner[b-9a4mdtzgw9] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--rame-border-light);
    border-top-color: var(--rame-primary);
    border-radius: 50%;
    animation: spin-b-9a4mdtzgw9 1s linear infinite;
}

@keyframes spin-b-9a4mdtzgw9 {
    to { transform: rotate(360deg); }
}

.error-container[b-9a4mdtzgw9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 1rem;
    text-align: center;
}

.error-container h3[b-9a4mdtzgw9] {
    color: var(--rame-error);
    margin: 0;
}

[b-9a4mdtzgw9] .confirm-exit-modal .dxbl-popup-body {
    padding: 0;
}

[b-9a4mdtzgw9] .confirm-exit-modal .dxbl-popup-content {
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.05),
        0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.confirm-modal[b-9a4mdtzgw9] {
    width: 420px;
    background: var(--rame-bg-primary);
}

.confirm-modal__header[b-9a4mdtzgw9] {
    padding: 32px 32px 24px;
    text-align: center;
    border-bottom: 1px solid var(--rame-border-light);
}

.confirm-modal__icon[b-9a4mdtzgw9] {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rame-warning-light);
    border-radius: 14px;
    color: var(--rame-warning);
}

.confirm-modal__icon svg[b-9a4mdtzgw9] {
    width: 28px;
    height: 28px;
}

.confirm-modal__title[b-9a4mdtzgw9] {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 600;
    color: var(--rame-text-primary);
    letter-spacing: -0.025em;
}

.confirm-modal__subtitle[b-9a4mdtzgw9] {
    margin: 0;
    font-size: 14px;
    color: var(--rame-text-secondary);
    font-weight: 400;
}

.confirm-modal__body[b-9a4mdtzgw9] {
    padding: 24px 32px;
}

.confirm-modal__body p[b-9a4mdtzgw9] {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--rame-text-secondary);
}

.confirm-modal__actions[b-9a4mdtzgw9] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    padding: 16px 24px 20px;
    background: var(--rame-bg-tertiary);
    border-top: 1px solid var(--rame-border-light);
}

.confirm-btn[b-9a4mdtzgw9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    white-space: nowrap;
}

.confirm-btn svg[b-9a4mdtzgw9] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.confirm-btn--danger[b-9a4mdtzgw9] {
    background: transparent;
    color: var(--rame-error);
    border: 1px solid var(--rame-error-border);
}

.confirm-btn--danger:hover[b-9a4mdtzgw9] {
    background: var(--rame-error-light);
}

.confirm-btn--ghost[b-9a4mdtzgw9] {
    background: var(--rame-bg-primary);
    color: var(--rame-text-secondary);
    border: 1px solid var(--rame-border-light);
}

.confirm-btn--ghost:hover[b-9a4mdtzgw9] {
    background: var(--rame-bg-tertiary);
    color: var(--rame-text-primary);
}

.confirm-btn--primary[b-9a4mdtzgw9] {
    background: var(--rame-text-primary);
    color: #ffffff;
    border: 1px solid var(--rame-text-primary);
}

.confirm-btn--primary:hover[b-9a4mdtzgw9] {
    background: var(--rame-text-secondary);
}

.btn[b-9a4mdtzgw9] {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary[b-9a4mdtzgw9] {
    background: var(--rame-primary);
    color: white;
}
/* _content/Rame.Blazor.Server/Pages/InstagramCommentDesignerPage.razor.rz.scp.css */
/* Instagram Comment Designer Page chrome - Uses Rame Design System */
/* See /css/design-system/_tokens.css for token definitions */

.ig-comment-designer-page[b-omftw31yjv] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100vh;
    background: var(--rame-bg-secondary, #f7f8fa);
}

/* ========== LOADING / ERROR ========== */

.ig-loading-container[b-omftw31yjv],
.ig-error-container[b-omftw31yjv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 60vh;
    gap: var(--rame-space-4, 16px);
    color: var(--rame-text-secondary, #65676b);
    text-align: center;
}

.ig-spinner[b-omftw31yjv] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--rame-border-light, #e4e6eb);
    border-top-color: var(--rame-primary, #0084ff);
    border-radius: var(--rame-radius-full, 50%);
    animation: ig-spin-b-omftw31yjv 1s linear infinite;
}

@keyframes ig-spin-b-omftw31yjv {
    to { transform: rotate(360deg); }
}

.ig-error-container h3[b-omftw31yjv] {
    color: var(--rame-error, #ef5350);
    margin: 0;
}

.ig-btn-primary[b-omftw31yjv] {
    padding: var(--rame-space-2, 8px) var(--rame-space-4, 16px);
    border: none;
    border-radius: var(--rame-radius-md, 8px);
    font-size: var(--rame-text-base, 14px);
    font-weight: var(--rame-font-semibold, 600);
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, var(--rame-primary, #0084ff) 0%, var(--rame-primary-hover, #0073e6) 100%);
}

/* ========== UNSAVED CHANGES MODAL ========== */

[b-omftw31yjv] .ig-confirm-exit-modal .dxbl-popup-body {
    padding: 0;
}

[b-omftw31yjv] .ig-confirm-exit-modal .dxbl-popup-content {
    border-radius: var(--rame-radius-lg, 12px);
    overflow: hidden;
    box-shadow: var(--rame-shadow-xl, 0 8px 24px rgba(0,0,0,0.2));
}

.ig-confirm-modal[b-omftw31yjv] {
    width: 420px;
    max-width: 90vw;
    background: var(--rame-bg-primary, #ffffff);
}

.ig-confirm-modal__header[b-omftw31yjv] {
    padding: var(--rame-space-6, 24px) var(--rame-space-8, 32px);
    text-align: center;
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
}

.ig-confirm-modal__title[b-omftw31yjv] {
    margin: 0 0 var(--rame-space-1, 4px);
    font-size: var(--rame-text-3xl, 20px);
    font-weight: var(--rame-font-semibold, 600);
    color: var(--rame-text-primary, #1c1e21);
}

.ig-confirm-modal__subtitle[b-omftw31yjv] {
    margin: 0;
    font-size: var(--rame-text-base, 14px);
    color: var(--rame-text-secondary, #65676b);
}

.ig-confirm-modal__actions[b-omftw31yjv] {
    display: flex;
    gap: var(--rame-space-2, 8px);
    padding: var(--rame-space-5, 20px) var(--rame-space-6, 24px);
    background: var(--rame-bg-tertiary, #f0f2f5);
    border-top: 1px solid var(--rame-border-light, #e4e6eb);
}

.ig-confirm-btn[b-omftw31yjv] {
    flex: 1;
    padding: var(--rame-space-3, 12px) var(--rame-space-4, 16px);
    border: 1px solid transparent;
    border-radius: var(--rame-radius-md, 8px);
    font-size: var(--rame-text-sm, 12px);
    font-weight: var(--rame-font-semibold, 600);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.ig-confirm-btn--danger[b-omftw31yjv] {
    background: transparent;
    color: var(--rame-error-text, #c62828);
    border-color: var(--rame-error-border, #ffcdd2);
}

.ig-confirm-btn--danger:hover[b-omftw31yjv] {
    background: var(--rame-error-light, #ffebee);
}

.ig-confirm-btn--ghost[b-omftw31yjv] {
    background: var(--rame-bg-primary, #ffffff);
    color: var(--rame-text-secondary, #65676b);
    border-color: var(--rame-border-light, #e4e6eb);
}

.ig-confirm-btn--ghost:hover[b-omftw31yjv] {
    background: var(--rame-bg-tertiary, #f0f2f5);
}

.ig-confirm-btn--primary[b-omftw31yjv] {
    background: var(--rame-text-primary, #1c1e21);
    color: #ffffff;
    border-color: var(--rame-text-primary, #1c1e21);
}

.ig-confirm-btn--primary:hover[b-omftw31yjv] {
    background: var(--rame-text-secondary, #65676b);
    border-color: var(--rame-text-secondary, #65676b);
}

/* ========== DARK MODE OVERRIDES (popup content is portaled to <html>) ========== */

:global([data-rame-theme="dark"] .ig-confirm-modal)[b-omftw31yjv] {
    background: var(--rame-bg-secondary, #282828) !important;
}

:global([data-rame-theme="dark"] .ig-confirm-modal__header)[b-omftw31yjv] {
    border-bottom-color: var(--rame-border-medium, #505050) !important;
}

:global([data-rame-theme="dark"] .ig-confirm-modal__title)[b-omftw31yjv] {
    color: var(--rame-text-primary, #f0f0f0) !important;
}

:global([data-rame-theme="dark"] .ig-confirm-modal__subtitle)[b-omftw31yjv] {
    color: var(--rame-text-secondary, #c8c8c8) !important;
}

:global([data-rame-theme="dark"] .ig-confirm-modal__actions)[b-omftw31yjv] {
    background: var(--rame-bg-tertiary, #333333) !important;
    border-top-color: var(--rame-border-medium, #505050) !important;
}

:global([data-rame-theme="dark"] .ig-confirm-btn--ghost)[b-omftw31yjv] {
    background: var(--rame-bg-secondary, #282828) !important;
    color: var(--rame-text-secondary, #e0e0e0) !important;
    border-color: var(--rame-border-medium, #505050) !important;
}

:global([data-rame-theme="dark"] .ig-confirm-btn--primary)[b-omftw31yjv] {
    background: var(--rame-primary, #3b9eff) !important;
    border-color: var(--rame-primary, #3b9eff) !important;
}
/* _content/Rame.Blazor.Server/Pages/QuotationBuilderPage.razor.rz.scp.css */
.quotation-builder-page[b-43z8xvwctf] {
    height: calc(100vh - 60px);
    overflow: hidden;
}
/* _content/Rame.Blazor.Server/Pages/QuotationPdfDesignerPage.razor.rz.scp.css */
.pdfd[b-0gfude15u2] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--rame-bg-secondary, #f7f8fa);
    font-family: var(--rame-font-family, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
}

.pdfd__bar[b-0gfude15u2] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 11px 16px;
    background: var(--rame-bg-primary, #fff);
    border-bottom: 1px solid var(--rame-border-light, #e4e6eb);
}

.pdfd__heading[b-0gfude15u2] {
    flex: 1;
    min-width: 0;
}

.pdfd__title[b-0gfude15u2] {
    font-weight: 700;
    font-size: 15px;
    color: var(--rame-text-primary, #1c1e21);
}

.pdfd__subtitle[b-0gfude15u2] {
    font-size: 12px;
    color: var(--rame-text-secondary, #65676b);
    margin-top: 1px;
}

.pdfd__body[b-0gfude15u2] {
    flex: 1;
    display: grid;
    grid-template-columns: 340px 1fr;
    min-height: 0;
}

.pdfd__panel[b-0gfude15u2] {
    border-right: 1px solid var(--rame-border-light, #e4e6eb);
    background: var(--rame-bg-primary, #fff);
    padding: 16px;
    overflow-y: auto;
}

.pdfd__group[b-0gfude15u2] {
    margin-bottom: 22px;
}

.pdfd__group-h[b-0gfude15u2] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--rame-text-secondary, #65676b);
    margin-bottom: 10px;
}

.pdfd__color-row[b-0gfude15u2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 13px;
    color: var(--rame-text-primary, #1c1e21);
}

.pdfd__color-row input[type="color"][b-0gfude15u2] {
    width: 42px;
    height: 28px;
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: 6px;
    background: none;
    cursor: pointer;
    padding: 0;
}

.pdfd__styles[b-0gfude15u2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.pdfd__style[b-0gfude15u2] {
    padding: 9px 10px;
    font-size: 12px;
    font-weight: 600;
    border: 1.5px solid var(--rame-border-light, #e4e6eb);
    border-radius: 8px;
    background: var(--rame-bg-primary, #fff);
    color: var(--rame-text-primary, #1c1e21);
    cursor: pointer;
    transition: all .12s;
}

.pdfd__style:hover[b-0gfude15u2] {
    border-color: var(--rame-primary, #0f6cbd);
}

.pdfd__style--on[b-0gfude15u2] {
    border-color: var(--rame-primary, #0f6cbd);
    background: var(--rame-primary, #0f6cbd);
    color: #fff;
}

.pdfd__list[b-0gfude15u2] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pdfd__item[b-0gfude15u2] {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: 8px;
    background: var(--rame-bg-primary, #fff);
}

.pdfd__item--off[b-0gfude15u2] {
    opacity: .55;
}

.pdfd__move[b-0gfude15u2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pdfd__item-main[b-0gfude15u2] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pdfd__item-top[b-0gfude15u2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pdfd__title-input[b-0gfude15u2] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    padding: 5px 8px;
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: 6px;
    color: var(--rame-text-primary, #1c1e21);
    background: var(--rame-bg-primary, #fff);
}

.pdfd__item-color[b-0gfude15u2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--rame-text-secondary, #65676b);
}

.pdfd__item-color input[type="color"][b-0gfude15u2] {
    width: 34px;
    height: 24px;
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: 5px;
    background: none;
    cursor: pointer;
    padding: 0;
}

.pdfd__reset[b-0gfude15u2] {
    border: 1px solid var(--rame-border-light, #e4e6eb);
    background: var(--rame-bg-primary, #fff);
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 4px 7px;
    color: var(--rame-text-secondary, #65676b);
}

.pdfd__reset:hover[b-0gfude15u2] {
    border-color: var(--rame-primary, #0f6cbd);
    color: var(--rame-primary, #0f6cbd);
}

.pdfd__status[b-0gfude15u2] {
    margin-top: 12px;
    font-size: 12px;
    color: var(--rame-success, #2e7d32);
}

.pdfd__error[b-0gfude15u2] {
    padding: 24px;
    color: var(--rame-error, #c62828);
}

.pdfd__preview[b-0gfude15u2] {
    min-height: 0;
    padding: 16px;
    overflow: hidden;
}

.pdfd__frame[b-0gfude15u2] {
    width: 100%;
    height: 100%;
    border: 1px solid var(--rame-border-light, #e4e6eb);
    border-radius: 8px;
    background: #fff;
}

.pdfd__nopreview[b-0gfude15u2] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--rame-text-secondary, #65676b);
    font-size: 13px;
}
/* _content/Rame.Blazor.Server/Pages/TemplateDesignerPage.razor.rz.scp.css */
.template-designer-page[b-r1ag1m5n4y] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100vh;
    background: var(--color-bg-secondary, #f8fafc);
}

.loading-container[b-r1ag1m5n4y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 1rem;
    color: var(--rame-text-secondary, #64748b);
}

.spinner[b-r1ag1m5n4y] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--rame-border-light, #e0e0e0);
    border-top-color: var(--rame-primary, #667eea);
    border-radius: 50%;
    animation: spin-b-r1ag1m5n4y 1s linear infinite;
}

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

.error-container[b-r1ag1m5n4y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 1rem;
    text-align: center;
}

.error-container h3[b-r1ag1m5n4y] {
    color: var(--rame-error, #f44336);
    margin: 0;
}

[b-r1ag1m5n4y] .confirm-exit-modal .dxbl-popup-body {
    padding: 0;
}

[b-r1ag1m5n4y] .confirm-exit-modal .dxbl-popup-content {
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.05),
        0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.confirm-modal[b-r1ag1m5n4y] {
    width: 420px;
    background: var(--rame-bg-primary, #ffffff);
}

.confirm-modal__header[b-r1ag1m5n4y] {
    padding: 32px 32px 24px;
    text-align: center;
    border-bottom: 1px solid var(--rame-border-light, #f1f5f9);
}

.confirm-modal__icon[b-r1ag1m5n4y] {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rame-warning-light, #fef3c7);
    border-radius: 14px;
    color: var(--rame-warning, #d97706);
}

.confirm-modal__icon svg[b-r1ag1m5n4y] {
    width: 28px;
    height: 28px;
}

.confirm-modal__title[b-r1ag1m5n4y] {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 600;
    color: var(--rame-text-primary, #0f172a);
    letter-spacing: -0.025em;
}

.confirm-modal__subtitle[b-r1ag1m5n4y] {
    margin: 0;
    font-size: 14px;
    color: var(--rame-text-secondary, #64748b);
    font-weight: 400;
}

.confirm-modal__body[b-r1ag1m5n4y] {
    padding: 24px 32px;
}

.confirm-modal__body p[b-r1ag1m5n4y] {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--rame-text-secondary, #475569);
}

.confirm-modal__actions[b-r1ag1m5n4y] {
    display: flex;
    gap: 10px;
    padding: 20px 24px 24px;
    background: var(--rame-bg-tertiary, #f8fafc);
    border-top: 1px solid var(--rame-border-light, #f1f5f9);
}

.confirm-btn[b-r1ag1m5n4y] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.confirm-btn svg[b-r1ag1m5n4y] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.confirm-btn--danger[b-r1ag1m5n4y] {
    background: transparent;
    color: var(--rame-error, #dc2626);
    border: 1px solid var(--rame-error-border, #fecaca);
}

.confirm-btn--danger:hover[b-r1ag1m5n4y] {
    background: var(--rame-error-light, #fef2f2);
    border-color: #fca5a5;
}

.confirm-btn--ghost[b-r1ag1m5n4y] {
    background: var(--rame-bg-primary, #ffffff);
    color: var(--rame-text-secondary, #475569);
    border: 1px solid var(--rame-border-light, #e2e8f0);
}

.confirm-btn--ghost:hover[b-r1ag1m5n4y] {
    background: var(--rame-bg-tertiary, #f8fafc);
    border-color: var(--rame-border-medium, #cbd5e1);
    color: var(--rame-text-primary, #334155);
}

.confirm-btn--primary[b-r1ag1m5n4y] {
    background: var(--rame-text-primary, #0f172a);
    color: #ffffff;
    border: 1px solid var(--rame-text-primary, #0f172a);
}

.confirm-btn--primary:hover[b-r1ag1m5n4y] {
    background: var(--rame-text-secondary, #1e293b);
    border-color: var(--rame-text-secondary, #1e293b);
}

.btn[b-r1ag1m5n4y] {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary[b-r1ag1m5n4y] {
    background: linear-gradient(135deg, var(--rame-primary, #3b82f6) 0%, var(--rame-primary-hover, #2563eb) 100%);
    color: white;
}
/* _content/Rame.Blazor.Server/Pages/WorkflowDesignerPage.razor.rz.scp.css */
/* Professional Workflow Designer Page - Uses Rame Design System */
/* See /css/design-system/_tokens.css for token definitions */

.workflow-designer-page[b-ibwynxqe3t] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--rame-bg-secondary, #f5f5f5);
}

.loading-container[b-ibwynxqe3t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 1rem;
    color: var(--rame-text-secondary, #64748b);
}

.spinner[b-ibwynxqe3t] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--rame-border-light, #e0e0e0);
    border-top-color: var(--rame-primary, #667eea);
    border-radius: 50%;
    animation: spin-b-ibwynxqe3t 1s linear infinite;
}

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

.error-container[b-ibwynxqe3t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 1rem;
    text-align: center;
}

.error-container h3[b-ibwynxqe3t] {
    color: var(--rame-error, #f44336);
    margin: 0;
}

/* ========================================
   CONFIRM EXIT MODAL
   Refined minimal design with Design System
   ======================================== */

[b-ibwynxqe3t] .confirm-exit-modal .dxbl-popup-body {
    padding: 0;
}

[b-ibwynxqe3t] .confirm-exit-modal .dxbl-popup-content {
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.05),
        0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.confirm-modal[b-ibwynxqe3t] {
    width: 420px;
    background: var(--rame-bg-primary, #ffffff);
}

/* Header Section */
.confirm-modal__header[b-ibwynxqe3t] {
    padding: 32px 32px 24px;
    text-align: center;
    border-bottom: 1px solid var(--rame-border-light, #f1f5f9);
}

.confirm-modal__icon[b-ibwynxqe3t] {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rame-warning-light, #fef3c7);
    border-radius: 14px;
    color: var(--rame-warning, #d97706);
}

.confirm-modal__icon svg[b-ibwynxqe3t] {
    width: 28px;
    height: 28px;
}

.confirm-modal__title[b-ibwynxqe3t] {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 600;
    color: var(--rame-text-primary, #0f172a);
    letter-spacing: -0.025em;
}

.confirm-modal__subtitle[b-ibwynxqe3t] {
    margin: 0;
    font-size: 14px;
    color: var(--rame-text-secondary, #64748b);
    font-weight: 400;
}

/* Body Section */
.confirm-modal__body[b-ibwynxqe3t] {
    padding: 24px 32px;
}

.confirm-modal__body p[b-ibwynxqe3t] {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--rame-text-secondary, #475569);
}

/* Actions Section */
.confirm-modal__actions[b-ibwynxqe3t] {
    display: flex;
    gap: 10px;
    padding: 20px 24px 24px;
    background: var(--rame-bg-tertiary, #f8fafc);
    border-top: 1px solid var(--rame-border-light, #f1f5f9);
}

/* Buttons Base */
.confirm-btn[b-ibwynxqe3t] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.confirm-btn svg[b-ibwynxqe3t] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Danger Button (Descartar) */
.confirm-btn--danger[b-ibwynxqe3t] {
    background: transparent;
    color: var(--rame-error, #dc2626);
    border: 1px solid var(--rame-error-border, #fecaca);
}

.confirm-btn--danger:hover[b-ibwynxqe3t] {
    background: var(--rame-error-light, #fef2f2);
    border-color: #fca5a5;
}

.confirm-btn--danger:active[b-ibwynxqe3t] {
    background: #fee2e2;
}

/* Ghost Button (Seguir editando) */
.confirm-btn--ghost[b-ibwynxqe3t] {
    background: var(--rame-bg-primary, #ffffff);
    color: var(--rame-text-secondary, #475569);
    border: 1px solid var(--rame-border-light, #e2e8f0);
}

.confirm-btn--ghost:hover[b-ibwynxqe3t] {
    background: var(--rame-bg-tertiary, #f8fafc);
    border-color: var(--rame-border-medium, #cbd5e1);
    color: var(--rame-text-primary, #334155);
}

.confirm-btn--ghost:active[b-ibwynxqe3t] {
    background: var(--rame-bg-secondary, #f1f5f9);
}

/* Primary Button (Guardar y salir) */
.confirm-btn--primary[b-ibwynxqe3t] {
    background: var(--rame-text-primary, #0f172a);
    color: #ffffff;
    border: 1px solid var(--rame-text-primary, #0f172a);
}

.confirm-btn--primary:hover[b-ibwynxqe3t] {
    background: var(--rame-text-secondary, #1e293b);
    border-color: var(--rame-text-secondary, #1e293b);
}

.confirm-btn--primary:active[b-ibwynxqe3t] {
    background: #334155;
}

/* Keep btn-primary for error container */
.btn[b-ibwynxqe3t] {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary[b-ibwynxqe3t] {
    background: linear-gradient(135deg, var(--rame-primary, #3b82f6) 0%, var(--rame-primary-hover, #2563eb) 100%);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-ibwynxqe3t] {
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    transform: translateY(-1px);
}

.btn-primary:disabled[b-ibwynxqe3t] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   DARK MODE OVERRIDES
   Using higher specificity for DxPopup which renders outside component scope
   ======================================== */

:global([data-rame-theme="dark"] .confirm-modal)[b-ibwynxqe3t] {
    background: #282828 !important;
}

:global([data-rame-theme="dark"] .confirm-modal__header)[b-ibwynxqe3t] {
    border-bottom-color: #505050 !important;
}

:global([data-rame-theme="dark"] .confirm-modal__icon)[b-ibwynxqe3t] {
    background: #3d3020 !important;
    color: #ffb347 !important;
}

:global([data-rame-theme="dark"] .confirm-modal__title)[b-ibwynxqe3t] {
    color: #f0f0f0 !important;
}

:global([data-rame-theme="dark"] .confirm-modal__subtitle)[b-ibwynxqe3t] {
    color: #c8c8c8 !important;
}

:global([data-rame-theme="dark"] .confirm-modal__body p)[b-ibwynxqe3t] {
    color: #c8c8c8 !important;
}

:global([data-rame-theme="dark"] .confirm-modal__actions)[b-ibwynxqe3t] {
    background: #333333 !important;
    border-top-color: #505050 !important;
}

/* Danger Button (Descartar) - Dark Mode */
:global([data-rame-theme="dark"] .confirm-btn--danger)[b-ibwynxqe3t] {
    background: transparent !important;
    color: #ff6b6b !important;
    border-color: #5a3030 !important;
}

:global([data-rame-theme="dark"] .confirm-btn--danger:hover)[b-ibwynxqe3t] {
    background: #3d2020 !important;
    border-color: #7a4040 !important;
    color: #ff8a8a !important;
}

/* Ghost Button (Seguir editando) - Dark Mode */
:global([data-rame-theme="dark"] .confirm-btn--ghost)[b-ibwynxqe3t] {
    background: #282828 !important;
    color: #e0e0e0 !important;
    border-color: #505050 !important;
}

:global([data-rame-theme="dark"] .confirm-btn--ghost:hover)[b-ibwynxqe3t] {
    background: #3a3a3a !important;
    border-color: #606060 !important;
    color: #ffffff !important;
}

/* Primary Button (Guardar y salir) - Dark Mode */
:global([data-rame-theme="dark"] .confirm-btn--primary)[b-ibwynxqe3t] {
    background: #3b9eff !important;
    color: #ffffff !important;
    border-color: #3b9eff !important;
}

:global([data-rame-theme="dark"] .confirm-btn--primary:hover)[b-ibwynxqe3t] {
    background: #60b0ff !important;
    border-color: #60b0ff !important;
    color: #ffffff !important;
}

:global([data-rame-theme="dark"] .confirm-exit-modal .dxbl-popup-content)[b-ibwynxqe3t] {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}