:root {
    --sade-primary: var(--primary-color);
    --sade-primary-2: var(--accent-color);
    --sade-primary-rgb: 59, 130, 246;
    --sade-ink: #10142f;
    --sade-muted: #667085;
    --sade-border: #e6e8f3;
    --sade-soft: #f8f7ff;
    --sade-panel: #ffffff;
    --sade-dark: var(--sidebar-background-dark);
    --sade-dark-2: var(--background-dark);
    --sade-green: #16a34a;
    --sade-shadow: 0 16px 48px rgba(24, 20, 80, .08);
}

.sade-assistant-shell {
    min-height: 100vh;
    background: #f7f8fc;
    color: var(--sade-ink);
}

.sade-top-header {
    height: 72px;
    background: linear-gradient(90deg, var(--sade-dark), var(--sade-dark-2));
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding: 0 24px;
}

.assistant-top-bar {
    height: 72px;
    color: #fff;
}

.assistant-top-title {
    color: #fff;
    font-weight: 750;
    margin: 0;
    line-height: 1.15;
}

.status-pill,
.saved-indicator,
.edit-mode-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1;
    padding: .45rem .7rem;
}

.status-pill {
    background: rgba(22, 163, 74, .22);
    border: 1px solid rgba(74, 222, 128, .38);
    color: #dcfce7;
}

.saved-indicator {
    color: #22c55e;
}

.sade-body {
    padding: 0;
}

.sade-main-layout {
    min-height: 100vh;
    width: 100%;
}

.customer-tasks-nav {
    width: 304px;
    flex: 0 0 304px;
    padding: 24px 16px;
    background: #fff;
    border-right: 1px solid var(--sade-border);
    overflow-y: auto;
}

.nav-heading {
    margin-bottom: 18px;
}

.nav-heading h5,
.card-title,
.step-title {
    font-weight: 800;
}

.task-nav-card,
.hidden-tasks-row {
    position: relative;
    width: 100%;
    display: block;
    text-align: left;
    border: 1px solid transparent;
    border-radius: 12px;
    background: #fff;
    color: var(--sade-ink);
    padding: 16px 42px 16px 16px;
    margin-bottom: 10px;
    box-shadow: 0 8px 24px rgba(16, 20, 47, .04);
    cursor: pointer;
}

.task-nav-card:hover,
.task-nav-card.selected,
.task-nav-card.task-nav-card--selected {
    border-color: rgba(var(--sade-primary-rgb), .75);
    background: linear-gradient(180deg, #fff, #fbfaff);
    box-shadow: 0 0 0 3px rgba(var(--sade-primary-rgb), .12), 0 10px 28px rgba(16, 20, 47, .08);
}

.task-card-title-row {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    margin-bottom: .55rem;
}

.task-card-title {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 800;
    color: var(--sade-primary);
}

.task-card-channel-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    margin-left: auto;
    padding-right: .1rem;
    color: var(--sade-primary);
    flex: 0 0 auto;
}

.task-card-channel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.task-card-meta-row {
    display: grid;
    grid-template-columns: minmax(80px, max-content) minmax(112px, 1fr);
    column-gap: .9rem;
    align-items: end;
    width: 100%;
}

.task-card-status {
    justify-self: start;
    align-self: end;
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    border-radius: 999px;
    padding: .25rem .5rem;
    font-size: .76rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.task-card-status.active {
    background: rgba(22, 163, 74, .16);
    color: #15803d;
}

.task-card-status.paused {
    background: rgba(180, 35, 24, .12);
    color: #b42318;
}

.task-card-status.hidden,
.task-card-status.unknown {
    background: rgba(102, 112, 133, .14);
    color: var(--sade-muted);
}

.task-card-timestamp {
    justify-self: end;
    align-self: end;
    display: grid;
    gap: .08rem;
    min-width: 0;
    max-width: 100%;
    color: var(--sade-muted);
    font-size: .76rem;
    font-weight: 750;
    line-height: 1.12;
    text-align: right;
    white-space: nowrap;
}

.task-card-timestamp-label {
    color: var(--sade-primary);
    font-weight: 850;
}

.task-card-timestamp-value {
    overflow: hidden;
    text-overflow: ellipsis;
}


.task-card-description {
    display: block;
    color: var(--sade-muted);
    font-size: .78rem;
    line-height: 1.35;
    margin-top: .35rem;
}

.draft-message {
    align-items: center;
}

.draft-preview-card {
    border: 1px solid var(--sade-border);
    border-radius: 12px;
    padding: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(16, 20, 47, .04);
}

.draft-preview-card p {
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 12px;
}

.draft-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.task-card-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sade-primary);
}

.hidden-tasks-row {
    display: flex;
    justify-content: space-between;
    box-shadow: none;
    font-weight: 750;
}

.sade-editor-host {
    flex: 1 1 auto;
    min-width: 0;
    padding: 22px 18px;
    overflow: auto;
}

.sade-editor-host.has-ai-chat {
    max-width: calc(100% - 384px);
}

.conversation-editor,
.editor-detail-view {
    max-width: 1040px;
    margin: 0 auto;
}

.editor-tabs > .rz-tabview-nav
{
    padding-left: 8px;
}

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

.agent-settings-field {
    display: grid;
    gap: 6px;
    min-width: 0;
    font-weight: 650;
    color: var(--sade-ink);
}

.agent-settings-field > span,
.agent-settings-subtitle {
    font-size: .9rem;
    font-weight: 750;
    color: var(--sade-ink);
}

.agent-settings-field-wide {
    grid-column: 1 / -1;
}

.agent-settings-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    color: var(--sade-ink);
    font-weight: 650;
}

.agent-settings-channel-picker,
.agent-settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0;
}

.agent-settings-section {
    display: grid;
    gap: 16px;
    padding-top: 16px;
}

.agent-settings-forwarding {
    display: grid;
    gap: 12px;
}

.agent-settings-rule-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 12px;
    align-items: end;
    padding: 12px;
    border: 1px solid var(--sade-border);
    border-radius: 10px;
    background: var(--sade-soft);
}

@media (max-width: 900px) {
    .agent-settings-grid,
    .agent-settings-rule-row {
        grid-template-columns: 1fr;
    }

    .agent-settings-rule-row > .rz-button {
        justify-self: start;
    }
}

.path-header-card,
.flow-window-card,
.path-settings-card,
.detail-card,
.manual-editor-card {
    border: 1px solid var(--sade-border);
    border-radius: 14px;
    background: var(--sade-panel);
    box-shadow: var(--sade-shadow);
    margin-bottom: 18px;
}

.header-icon,
.detail-icon,
.settings-icon,
.ai-logo,
.bot-avatar,
.step-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f0ebff;
    color: var(--sade-primary);
    flex: 0 0 auto;
}

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

.path-header-content {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) auto;
    align-items: stretch;
    gap: 1.5rem;
}

.agent-identity {
    min-width: 260px;
    padding-right: .5rem;
}

.agent-title-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 1rem;
    width: 100%;
}

.agent-title-content {
    min-width: 0;
    padding-top: .05rem;
}

.agent-title-row .card-title {
    margin: 0;
    line-height: 1.05;
}

.agent-settings-button {
    align-self: start;
    flex: 0 0 auto;
    margin: 0;
}

.channel-row {
    margin-top: 1.05rem;
    color: var(--sade-muted);
    font-size: .85rem;
}

.header-inline-icon-text,
.ready-title-row {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    line-height: 1.2;
}

.header-inline-icon-text.centered,
.summary-label.header-inline-icon-text {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
}

.path-header-card .rz-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.path-summary {
    color: var(--sade-ink);
    align-items: stretch !important;
}

.path-summary > div {
    align-self: stretch;
}

.path-summary > div:not(.ready-box) {
    border-left: 1px solid var(--sade-border);
    padding: 0 1.5rem;
    min-width: 150px;
}

.primary-task-summary,
.language-summary {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.summary-label {
    display: block;
    color: var(--sade-muted);
    font-size: .8rem;
    margin-bottom: .45rem;
}

.ready-box {
    display: grid;
    gap: .2rem;
    min-width: 200px;
    margin-left: 1.5rem;
    padding: 1rem;
    border-radius: 12px;
    padding: 16px;
}

.flow-window-title-row {
    margin-bottom: 20px;
}

.flow-window-title-row h5 span {
    color: var(--sade-muted);
    font-weight: 650;
}

.steps-list {
    display: grid;
    gap: 12px;
}

.step-card-wrapper {
    position: relative;
    display: block;
}

.step-card-wrapper:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 21px;
    bottom: -18px;
    height: 22px;
    border-left: 2px dashed #c9c9e8;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8d8ff;
    background: #fff;
    color: var(--sade-primary);
    font-weight: 800;
}

.step-card {
    border: 1px solid var(--sade-border);
    border-radius: 12px;
    box-shadow: none;
}

.step-card.selected {
    border-color: var(--sade-primary);
    box-shadow: 0 0 0 3px rgba(var(--sade-primary-rgb), .10);
}

.step-main {
    min-width: 280px;
}

.step-icon {
    width: 42px;
    height: 42px;
}

.step-preview {
    flex: 1 1 auto;
    min-width: 260px;
    white-space: pre-line;
    border: 1px solid var(--sade-border);
    border-radius: 10px;
    padding: 12px 14px;
    background: #fbfbff;
    color: #28304f;
    font-size: .9rem;
}

.chip-row {
    margin-top: .45rem;
    flex-wrap: wrap;
}

.step-chip,
.readonly-pill-row span {
    display: inline-flex;
    border: 1px solid #dcd6ff;
    border-radius: 8px;
    background: #f6f3ff;
    color: var(--sade-primary);
    padding: .25rem .45rem;
    font-size: .78rem;
    font-weight: 750;
}

.add-step-bottom {
    width: 100%;
    margin-top: 18px;
    padding: 15px;
    border-radius: 12px;
    border: 1px dashed rgba(var(--sade-primary-rgb), .45);
    background: rgba(var(--sade-primary-rgb), .08);
    color: var(--sade-primary);
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    text-align: center;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.add-step-bottom:hover {
    background: rgba(var(--sade-primary-rgb), .14);
    border-color: rgba(var(--sade-primary-rgb), .7);
}

.path-settings-card {
    background: linear-gradient(180deg, #fff, #fbf8ff);
}

.detail-title-row {
    margin-bottom: 22px;
}

.detail-grid,
.settings-grid {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 16px 20px;
    margin-top: 24px;
    align-items: center;
}

.detail-grid label {
    color: #475467;
    font-weight: 750;
}

.readonly-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

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

.setting-tile {
    min-height: 180px;
    border: 1px solid var(--sade-border);
    border-radius: 14px;
    box-shadow: none;
}

.edit-mode-pill {
    color: var(--sade-primary);
    background: #f1edff;
    border: 1px solid #ddd3ff;
}

.ai-chat-column {
    width: 384px;
    flex: 0 0 384px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-left: 1px solid var(--sade-border);
    min-height: 100vh;
}

.ai-chat-header {
    padding: 20px 22px;
    border-bottom: 1px solid var(--sade-border);
}

.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px;
    overflow: auto;
    flex: 1 1 auto;
}

.chat-message {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
}

.chat-message p {
    margin: 0;
    border: 1px solid var(--sade-border);
    border-radius: 12px;
    padding: 14px;
    background: #fff;
    color: #344054;
    box-shadow: 0 8px 24px rgba(16, 20, 47, .04);
}

.chat-message.user {
    justify-content: flex-end;
}

.chat-message.user p {
    background: var(--sade-primary);
    color: #fff;
    border-color: var(--sade-primary);
}

body.dark-theme .sade-assistant-app-theme {
    --sade-ink: var(--text-dark);
    --sade-muted: rgba(249, 250, 251, .68);
    --sade-border: rgba(249, 250, 251, .14);
    --sade-soft: var(--background-dark);
    --sade-panel: var(--card-dark);
    --sade-shadow: 0 16px 48px rgba(0, 0, 0, .20);
    background: var(--background-dark);
    color: var(--text-dark);
}

body.dark-theme .sade-assistant-app-theme .customer-tasks-nav,
body.dark-theme .sade-assistant-app-theme .ai-chat-column {
    background: var(--background-dark);
    border-color: var(--sade-border);
}

body.dark-theme .sade-assistant-app-theme .task-nav-card,
body.dark-theme .sade-assistant-app-theme .draft-preview-card,
body.dark-theme .sade-assistant-app-theme .hidden-tasks-row,
body.dark-theme .sade-assistant-app-theme .path-header-card,
body.dark-theme .sade-assistant-app-theme .flow-window-card,
body.dark-theme .sade-assistant-app-theme .path-settings-card,
body.dark-theme .sade-assistant-app-theme .detail-card,
body.dark-theme .sade-assistant-app-theme .manual-editor-card,
body.dark-theme .sade-assistant-app-theme .step-card,
body.dark-theme .sade-assistant-app-theme .setting-tile,
body.dark-theme .sade-assistant-app-theme .chat-message p {
    background: var(--sade-panel);
    border-color: var(--sade-border);
    color: var(--text-dark);
}

body.dark-theme .sade-assistant-app-theme .task-nav-card:hover,
body.dark-theme .sade-assistant-app-theme .task-nav-card.selected,
body.dark-theme .sade-assistant-app-theme .task-nav-card.task-nav-card--selected {
    background: var(--card-listactive-active);
    border-color: rgba(var(--sade-primary-rgb), .82);
}

body.dark-theme .sade-assistant-app-theme .header-icon,
body.dark-theme .sade-assistant-app-theme .detail-icon,
body.dark-theme .sade-assistant-app-theme .settings-icon,
body.dark-theme .sade-assistant-app-theme .ai-logo,
body.dark-theme .sade-assistant-app-theme .bot-avatar,
body.dark-theme .sade-assistant-app-theme .step-icon,
body.dark-theme .sade-assistant-app-theme .step-number {
    background: var(--input-dark);
    border-color: var(--sade-border);
    color: var(--sade-primary);
}

body.dark-theme .sade-assistant-app-theme .step-preview,
body.dark-theme .sade-assistant-app-theme .step-chip,
body.dark-theme .sade-assistant-app-theme .readonly-pill-row span,
body.dark-theme .sade-assistant-app-theme .edit-mode-pill {
    background: var(--input-dark);
    border-color: var(--sade-border);
    color: var(--text-dark);
}

body.dark-theme .sade-assistant-app-theme .add-step-bottom {
    background: rgba(var(--sade-primary-rgb), .12);
    border-color: rgba(var(--sade-primary-rgb), .45);
    color: var(--sade-primary);
}

body.dark-theme .sade-assistant-app-theme .add-step-bottom:hover {
    background: rgba(var(--sade-primary-rgb), .18);
    border-color: rgba(var(--sade-primary-rgb), .72);
}

body.dark-theme .sade-assistant-app-theme .chat-message.user p {
    background: var(--sade-primary);
    border-color: var(--sade-primary);
    color: #fff;
}

.bot-avatar {
    width: 34px;
    height: 34px;
}

.chat-input-wrap {
    padding: 18px;
    border-top: 1px solid var(--sade-border);
}

.chat-input-wrap small {
    display: block;
    text-align: center;
    color: var(--sade-muted);
    margin-top: .5rem;
}

@media (max-width: 1280px) {
    .path-header-content,
    .step-card > .rz-card-content > .rz-stack {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .path-header-content {
        display: flex;
    }

    .path-summary {
        flex-wrap: wrap;
        gap: 1rem !important;
    }

    .path-summary > div:not(.ready-box) {
        padding-left: 0;
        border-left: none;
    }

    .ready-box {
        margin-left: 0;
    }

    .sade-editor-host.has-ai-chat {
        max-width: none;
    }
}

@media (max-width: 980px) {
    .sade-main-layout {
        flex-direction: column !important;
    }

    .customer-tasks-nav,
    .ai-chat-column {
        width: 100%;
        flex-basis: auto;
        min-height: auto;
    }

    .settings-grid,
    .detail-grid {
        grid-template-columns: 1fr;
    }
}

.task-nav-card.selected,
.task-nav-card.task-nav-card--selected {
    border-color: var(--sade-primary);
    box-shadow: 0 0 0 3px rgba(var(--sade-primary-rgb), .18), 0 10px 28px rgba(16, 20, 47, .08);
}

body.dark-theme .sade-assistant-app-theme .task-nav-card.selected,
body.dark-theme .sade-assistant-app-theme .task-nav-card.task-nav-card--selected {
    border-color: var(--sade-primary);
    background: linear-gradient(135deg, rgba(var(--sade-primary-rgb), .16), rgba(var(--sade-primary-rgb), .07));
    box-shadow: inset 0 0 0 1px rgba(var(--sade-primary-rgb), .34), 0 0 0 2px rgba(var(--sade-primary-rgb), .36);
}

body.dark-theme .sade-assistant-app-theme .task-card-status.active {
    background: rgba(22, 163, 74, .22);
    color: #86efac;
}

body.dark-theme .sade-assistant-app-theme .task-card-status.paused {
    background: rgba(248, 113, 113, .16);
    color: #fca5a5;
}

.conversation-step-layout {
    display: grid;
    grid-template-columns: auto auto minmax(180px, .9fr) minmax(0, 1fr) max-content;
    gap: 1rem;
    align-items: center;
    justify-items: center;
    min-width: 0;
}

.conversation-step-drag-row {
    min-width: 0;
}

.conversation-step-conversation-row {
    margin-left: 4rem;
    width: calc(100% - 4rem);
}

.conversation-step-system-row {
    margin-left: 0;
}

.conversation-step-drag-row .conversation-step-drag-handle {
    cursor: grab;
}

.conversation-step-drag-row .conversation-step-drag-handle:active {
    cursor: grabbing;
}

.conversation-step-drag-row .conversation-step-drag-handle:hover,
.conversation-step-drag-chosen .conversation-step-drag-handle {
    box-shadow: 0 0 0 3px rgba(var(--sade-primary-rgb), .16);
    color: var(--sade-primary);
}

.conversation-step-drag-ghost {
    opacity: .45;
}

.conversation-step-drag-active {
    opacity: .85;
}

.conversation-step-insert-divider
{
    width: auto;
    max-width: 100%;
    min-height: 22px;
    border: 0;
    background: transparent;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 2px 4rem;
    cursor: pointer;
}


.conversation-step-insert-divider.connects-steps {
    position: relative;
    min-height: 5px;
    background-image: linear-gradient(to bottom, rgba(var(--sade-primary-rgb), .42) 50%, transparent 0);
    background-position: 35px 0;
    background-repeat: repeat-y;
    background-size: 2px 8px;
}

.conversation-step-insert-divider.connects-steps span {
    width: 18px;
    height: 18px;
}

.conversation-step-insert-divider::before,
.conversation-step-insert-divider::after {
    content: "";
    height: 1px;
    flex: 1 1 auto;
    background: transparent;
    transition: background-color .12s ease;
}

.conversation-step-insert-divider span {
    width: 24px;
    height: 24px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 .5rem;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.conversation-step-insert-divider:hover::before,
.conversation-step-insert-divider:hover::after,
.conversation-step-insert-divider.drag-over::before,
.conversation-step-insert-divider.drag-over::after {
    background: rgba(var(--sade-primary-rgb), .42);
}

.conversation-step-insert-divider:hover span,
.conversation-step-insert-divider.drag-over span,
.conversation-step-insert-divider.empty span {
    background: #fff;
    border-color: rgba(var(--sade-primary-rgb), .35);
    color: var(--sade-primary);
}

.conversation-step-insert-divider.empty {
    min-height: 64px;
    border: 1px dashed rgba(var(--sade-primary-rgb), .3);
    border-radius: 8px;
}

.conversation-step-type-icon {
    border: 1px solid #d8d8ff;
    border-radius: 12px;
    background: #f7f5ff;
    color: var(--sade-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.conversation-step-title-panel {
    justify-self: stretch;
    min-width: 0;
    padding: 12px 14px;
}

.conversation-step-custom-content {
    grid-column: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: 100%;
    min-width: 0;
    min-height: 48px;
}

.conversation-step-speech-input {
    width: 100%;
}

.conversation-step-option-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.conversation-step-parameter-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.conversation-step-parameter-chip {
    border: 1px solid var(--sade-border);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    max-width: 100%;
    padding: .25rem .7rem;
    font-size: .85rem;
    line-height: 1.2;
}

.conversation-step-option-chip {
    border: 1px solid var(--sade-border);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 30px;
    max-width: 100%;
    padding: .25rem .7rem;
    font: inherit;
    font-size: .85rem;
    line-height: 1.2;
    cursor: default;
}

.conversation-step-option-chip.has-target-flow {
    border-color: rgba(var(--sade-primary-rgb), .35);
    color: var(--sade-primary);
    cursor: pointer;
}

.conversation-step-option-chip.has-target-flow:hover {
    background: rgba(var(--sade-primary-rgb), .08);
}

.conversation-step-option-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-step-option-chip .rz-icon {
    font-size: 1rem;
}

.conversation-step-actions {
    grid-column: 5;
    justify-self: end;
    justify-content: flex-end;
    white-space: nowrap;
}

body.dark-theme .sade-assistant-app-theme .conversation-step-title-panel,
body.dark-theme .sade-assistant-app-theme .conversation-step-type-icon {
    border-color: var(--sade-border);
    color: var(--text-dark);
}

body.dark-theme .sade-assistant-app-theme .conversation-step-option-chip {
    background: var(--input-dark);
    color: var(--text-dark);
}

body.dark-theme .sade-assistant-app-theme .conversation-step-parameter-chip {
    background: var(--input-dark);
    color: var(--text-dark);
}

body.dark-theme .sade-assistant-app-theme .conversation-step-option-chip.has-target-flow {
    color: var(--sade-primary);
}

body.dark-theme .sade-assistant-app-theme .conversation-step-insert-divider:hover span,
body.dark-theme .sade-assistant-app-theme .conversation-step-insert-divider.drag-over span,
body.dark-theme .sade-assistant-app-theme .conversation-step-insert-divider.empty span {
    background: var(--input-dark);
}


@media (max-width: 1280px) {
    .conversation-step-layout {
        grid-template-columns: auto auto minmax(0, 1fr);
    }

    .conversation-step-custom-content,
    .conversation-step-actions {
        grid-column: 3;
    }

    .conversation-step-actions {
        justify-self: stretch;
        justify-content: center;
    }
}

body.dark-theme .sade-assistant-app-theme .conversation-step-insert-divider.connects-steps {
    background-image: linear-gradient(to bottom, rgba(var(--sade-primary-rgb), .55) 50%, transparent 0);
}


.conversation-flow-graph {
    display: grid;
    gap: 1rem;
}

.conversation-flow-graph-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--sade-border);
    border-radius: 12px;
    background: var(--sade-soft);
}

.conversation-flow-graph-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: .25rem .7rem;
    border: 1px solid rgba(var(--sade-primary-rgb), .25);
    border-radius: 999px;
    background: rgba(var(--sade-primary-rgb), .08);
    color: var(--sade-primary);
    font-size: .85rem;
    font-weight: 800;
    white-space: nowrap;
}

.conversation-flow-graph-canvas {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    min-height: 240px;
    padding: 1rem;
    border: 1px solid var(--sade-border);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--sade-primary-rgb), .06), transparent 45%);
}

.conversation-flow-graph-node {
    width: 100%;
    min-height: 92px;
    border: 1px solid var(--sade-border);
    border-radius: 14px;
    background: var(--sade-panel);
    color: var(--sade-ink);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
    padding: 1rem;
    text-align: left;
    box-shadow: 0 10px 28px rgba(16, 20, 47, .06);
}

.conversation-flow-graph-node.current {
    border-color: rgba(var(--sade-primary-rgb), .4);
    box-shadow: 0 0 0 3px rgba(var(--sade-primary-rgb), .10);
}

.conversation-flow-graph-node.target {
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.conversation-flow-graph-node.target:hover:not(:disabled) {
    border-color: rgba(var(--sade-primary-rgb), .55);
    box-shadow: 0 12px 30px rgba(16, 20, 47, .10);
    transform: translateY(-1px);
}

.conversation-flow-graph-node.target:disabled {
    cursor: default;
}

.conversation-flow-graph-node.current-target {
    border-style: dashed;
}

.conversation-flow-graph-node.missing-target {
    opacity: .72;
}

.conversation-flow-graph-node-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(var(--sade-primary-rgb), .10);
    color: var(--sade-primary);
}

.conversation-flow-graph-node-body {
    display: grid;
    gap: .25rem;
    min-width: 0;
}

.conversation-flow-graph-node-body strong,
.conversation-flow-graph-node-body small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-flow-graph-node-body small {
    color: var(--sade-muted);
}

.conversation-flow-graph-targets {
    display: grid;
    gap: .85rem;
}

.conversation-flow-graph-edge {
    display: grid;
    grid-template-columns: 64px minmax(220px, 320px) minmax(220px, 1fr);
    gap: .75rem;
    align-items: center;
}

.conversation-flow-graph-arrow {
    display: flex;
    align-items: center;
    color: var(--sade-primary);
}

.conversation-flow-graph-arrow span {
    flex: 1 1 auto;
    border-top: 2px dashed rgba(var(--sade-primary-rgb), .42);
}

.conversation-flow-graph-links {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    min-width: 0;
}

.conversation-flow-graph-links span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
    min-height: 30px;
    padding: .25rem .65rem;
    border: 1px solid var(--sade-border);
    border-radius: 999px;
    background: #fff;
    color: var(--sade-ink);
    font-size: .84rem;
}

.conversation-flow-graph-links .rz-icon {
    color: var(--sade-primary);
    font-size: 1rem;
}

.conversation-flow-graph-empty {
    display: grid;
    place-items: center;
    gap: .35rem;
    min-height: 160px;
    padding: 1rem;
    border: 1px dashed rgba(var(--sade-primary-rgb), .35);
    border-radius: 14px;
    color: var(--sade-muted);
    text-align: center;
}

.conversation-flow-graph-empty .rz-icon {
    color: var(--sade-primary);
    font-size: 2rem;
}

.conversation-flow-graph-empty strong {
    color: var(--sade-ink);
}

body.dark-theme .sade-assistant-app-theme .conversation-flow-graph-summary,
body.dark-theme .sade-assistant-app-theme .conversation-flow-graph-canvas,
body.dark-theme .sade-assistant-app-theme .conversation-flow-graph-node,
body.dark-theme .sade-assistant-app-theme .conversation-flow-graph-links span {
    background: var(--sade-panel);
    border-color: var(--sade-border);
    color: var(--text-dark);
}

body.dark-theme .sade-assistant-app-theme .conversation-flow-graph-node-icon,
body.dark-theme .sade-assistant-app-theme .conversation-flow-graph-count {
    background: rgba(var(--sade-primary-rgb), .14);
}

@media (max-width: 1280px) {
    .conversation-flow-graph-canvas,
    .conversation-flow-graph-edge {
        grid-template-columns: 1fr;
    }

    .conversation-flow-graph-arrow {
        min-height: 28px;
        justify-content: center;
        transform: rotate(90deg);
    }

    .conversation-flow-graph-links {
        padding-left: 0;
    }
}

@media (max-width: 720px) {
    .conversation-flow-graph-summary {
        flex-direction: column;
    }
}

.conversation-step-generated-row {
    min-width: 0;
    margin-top: .5rem;
}

.conversation-step-generated-row .conversation-step-drag-handle {
    cursor: default;
}

.session-cutoff-editor textarea.form-control {
    min-height: 9rem;
}

.conversation-step-menu {
    position: relative;
    display: inline-flex;
}

.conversation-step-menu-popover {
    position: absolute;
    top: calc(100% + .35rem);
    right: 0;
    z-index: 20;
    min-width: 9rem;
    padding: .35rem;
    border: 1px solid var(--sade-border);
    border-radius: .75rem;
    background: var(--surface);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .18);
}

.conversation-step-menu-item {
    width: 100%;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .65rem;
    text-align: left;
}

.conversation-step-menu-item:hover {
    background: rgba(var(--sade-primary-rgb), .08);
}

.conversation-step-menu-item.danger {
    color: #dc2626;
}

body.dark-theme .sade-assistant-app-theme .conversation-step-menu-popover {
    background: var(--surface-dark);
    border-color: var(--sade-border);
}

body.dark-theme .sade-assistant-app-theme .conversation-step-menu-item {
    color: var(--text-dark);
}

body.dark-theme .sade-assistant-app-theme .conversation-step-menu-item.danger {
    color: #f87171;
}

.step-editor-type-divider {
    border-top: 1px solid var(--sade-border, rgba(148, 163, 184, .25));
    margin: 1rem 0 1.25rem;
}

.select-request-option-step-list {
    gap: 0;
}

.select-request-option-insert-divider {
    margin: .125rem 0;
}

.select-request-option-row .conversation-step-drag-handle {
    cursor: grab;
}

.select-request-option-row .conversation-step-drag-handle:active {
    cursor: grabbing;
}


.confirm-action-route-list {
    gap: .5rem;
}

.confirm-action-route-row .step-card-wrapper {
    width: 100%;
}

.confirm-action-route-card {
    cursor: default;
}

.confirm-action-route-card.selected {
    border-color: rgba(var(--sade-primary-rgb), .58);
    box-shadow: 0 0 0 2px rgba(var(--sade-primary-rgb), .18), var(--sade-shadow-sm, 0 8px 22px rgba(15, 23, 42, .10));
}

.confirm-action-route-layout {
    grid-template-columns: auto auto minmax(180px, .9fr) minmax(0, 1fr) max-content;
}

.confirm-action-route-summary {
    margin-top: 0;
    width: 100%;
}

@media (max-width: 1280px) {
    .confirm-action-route-layout {
        grid-template-columns: auto auto minmax(0, 1fr);
    }
}

body.dark-theme .sade-assistant-app-theme .confirm-action-route-card.selected {
    border-color: rgba(var(--sade-primary-rgb), .66);
    box-shadow: 0 0 0 2px rgba(var(--sade-primary-rgb), .24), 0 14px 30px rgba(0, 0, 0, .22);
}

.select-request-option-action-list {
    gap: 0;
}

.select-request-option-action-insert-divider {
    margin: .125rem 0;
}

.select-request-option-action-row .conversation-step-drag-handle {
    cursor: grab;
}

.select-request-option-action-row .conversation-step-drag-handle:active {
    cursor: grabbing;
}

.select-request-option-action-editor {
    border-top: 1px solid var(--sade-border, rgba(148, 163, 184, .25));
    padding-top: .55rem;
}


.select-request-option-action-card {
    position: relative;
    padding-right: 3.25rem;
}

.select-request-option-action-layout {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
}

.select-request-option-action-layout .conversation-step-actions,
.select-request-option-action-delete {
    grid-column: 4;
    justify-self: end;
}

.select-request-option-action-delete {
    position: absolute;
    top: .65rem;
    right: .75rem;
    z-index: 2;
}

.compact-transition-editor.transition-entry {
    border: 0;
    padding: 0;
    gap: .5rem;
}

.compact-transition-editor .transition-entry__body {
    gap: .5rem;
}

.compact-transition-editor .transition-section {
    padding: .55rem .75rem;
    gap: .35rem;
    border-radius: .65rem;
}

.compact-transition-editor .transition-field-label,
.compact-transition-editor .transition-subeditor label,
.compact-transition-editor label {
    margin-bottom: .15rem;
    font-size: .82rem;
    font-weight: 600;
}

.compact-transition-editor .transition-section__description,
.compact-transition-editor .transition-subeditor small,
.compact-transition-editor small {
    margin-top: .15rem;
    margin-bottom: 0;
    font-size: .76rem;
    line-height: 1.25;
}

.compact-transition-editor .transition-control,
.compact-transition-editor select.form-select,
.compact-transition-editor .form-select {
    min-height: 34px !important;
    height: 34px !important;
    padding-top: .3rem;
    padding-bottom: .3rem;
}

.compact-transition-editor .transition-subeditor {
    margin-top: 0;
}

.step-card.event-type-speak {
    border-left: 4px solid rgba(59, 130, 246, .72);
    background: linear-gradient(90deg, rgba(59, 130, 246, .08), var(--sade-panel) 42%);
}

.step-card.event-type-read-and-confirm {
    border-left: 4px solid rgba(16, 185, 129, .72);
    background: linear-gradient(90deg, rgba(16, 185, 129, .08), var(--sade-panel) 42%);
}

.step-card.event-type-select {
    border-left: 4px solid rgba(var(--sade-primary-rgb), .72);
    background: linear-gradient(90deg, rgba(var(--sade-primary-rgb), .08), var(--sade-panel) 42%);
}

.step-card.event-type-confirm-action {
    border-left: 4px solid rgba(245, 158, 11, .76);
    background: linear-gradient(90deg, rgba(245, 158, 11, .10), var(--sade-panel) 42%);
}

.step-card.event-type-execute-action,
.step-card.event-type-schedule-meeting,
.step-card.event-type-info-request,
.step-card.event-type-move-to-flow,
.step-card.event-type-select-by-rules,
.step-card.event-type-select-product-or-service,
.step-card.event-type-create-parameter,
.step-card.event-type-transition,
.step-card.event-type-select-suitable-person,
.step-card.event-type-session-cutoff,
.step-card.event-type-unknown {
    border-left: 4px solid rgba(100, 116, 139, .62);
    background: linear-gradient(90deg, rgba(100, 116, 139, .08), var(--sade-panel) 42%);
}

.step-card.event-type-session-cutoff {
    border-left-color: rgba(239, 68, 68, .72);
    background: linear-gradient(90deg, rgba(239, 68, 68, .09), var(--sade-panel) 42%);
}

.step-card.event-type-speak .conversation-step-type-icon {
    background: rgba(59, 130, 246, .12);
    border-color: rgba(59, 130, 246, .24);
    color: rgb(37, 99, 235);
}

.step-card.event-type-read-and-confirm .conversation-step-type-icon {
    background: rgba(16, 185, 129, .12);
    border-color: rgba(16, 185, 129, .24);
    color: rgb(5, 150, 105);
}

.step-card.event-type-confirm-action .conversation-step-type-icon {
    background: rgba(245, 158, 11, .14);
    border-color: rgba(245, 158, 11, .28);
    color: rgb(180, 83, 9);
}

.step-card.event-type-session-cutoff .conversation-step-type-icon {
    background: rgba(239, 68, 68, .12);
    border-color: rgba(239, 68, 68, .26);
    color: rgb(220, 38, 38);
}

.conversation-step-speech-input .rz-textbox,
.conversation-step-speech-input.rz-textbox {
    background: rgba(59, 130, 246, .06);
    border-color: rgba(59, 130, 246, .22);
    color: var(--sade-ink);
}

.select-request-empty-alert.rz-alert,
.confirm-action-empty-alert.rz-alert {
    background: rgba(var(--sade-primary-rgb), .08);
    border: 1px solid rgba(var(--sade-primary-rgb), .22);
    color: var(--sade-ink);
}

body.dark-theme .sade-assistant-app-theme .step-card.event-type-speak,
body.dark-theme .sade-assistant-app-theme .step-card.event-type-read-and-confirm,
body.dark-theme .sade-assistant-app-theme .step-card.event-type-select,
body.dark-theme .sade-assistant-app-theme .step-card.event-type-confirm-action,
body.dark-theme .sade-assistant-app-theme .step-card.event-type-execute-action,
body.dark-theme .sade-assistant-app-theme .step-card.event-type-schedule-meeting,
body.dark-theme .sade-assistant-app-theme .step-card.event-type-info-request,
body.dark-theme .sade-assistant-app-theme .step-card.event-type-move-to-flow,
body.dark-theme .sade-assistant-app-theme .step-card.event-type-select-by-rules,
body.dark-theme .sade-assistant-app-theme .step-card.event-type-select-product-or-service,
body.dark-theme .sade-assistant-app-theme .step-card.event-type-create-parameter,
body.dark-theme .sade-assistant-app-theme .step-card.event-type-transition,
body.dark-theme .sade-assistant-app-theme .step-card.event-type-select-suitable-person,
body.dark-theme .sade-assistant-app-theme .step-card.event-type-session-cutoff,
body.dark-theme .sade-assistant-app-theme .step-card.event-type-unknown {
    background: linear-gradient(90deg, rgba(var(--sade-primary-rgb), .10), var(--sade-panel) 46%);
}

body.dark-theme .sade-assistant-app-theme .conversation-step-speech-input .rz-textbox,
body.dark-theme .sade-assistant-app-theme .conversation-step-speech-input.rz-textbox {
    background: var(--input-dark);
    border-color: var(--sade-border);
    color: var(--text-dark);
}

body.dark-theme .sade-assistant-app-theme .select-request-empty-alert.rz-alert,
body.dark-theme .sade-assistant-app-theme .confirm-action-empty-alert.rz-alert {
    background: rgba(var(--sade-primary-rgb), .12);
    border-color: rgba(var(--sade-primary-rgb), .28);
    color: var(--text-dark);
}

/* Keep the selected customer task visually locked even when it is not hovered. */
.sade-assistant-app-theme .task-nav-card.selected,
.sade-assistant-app-theme .task-nav-card.task-nav-card--selected,
.sade-assistant-app-theme .task-nav-card[aria-pressed="true"] {
    border-color: var(--sade-primary) !important;
    background: linear-gradient(135deg, rgba(var(--sade-primary-rgb), .16), rgba(var(--sade-primary-rgb), .07)) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--sade-primary-rgb), .34), 0 0 0 2px rgba(var(--sade-primary-rgb), .36), 0 14px 32px rgba(0, 0, 0, .18) !important;
}

@media (min-width: 992px) {
    .select-request-option-action-editor .compact-transition-editor .transition-entry__body {
        display: grid;
        grid-template-columns: minmax(14rem, 0.85fr) minmax(18rem, 1.15fr);
        align-items: stretch;
        gap: .75rem;
    }

    .select-request-option-action-editor .compact-transition-editor .transition-section {
        min-width: 0;
        height: 100%;
    }
}

.session-cutoff-editor__message-cell {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.session-cutoff-editor__message-cell .simple-agent-speech-editor {
    width: 100%;
}


.save-result-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(15, 23, 42, .56);
    backdrop-filter: blur(6px);
}

.save-result-dialog {
    width: min(440px, 100%);
    display: grid;
    gap: 1rem;
    justify-items: center;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .96));
    box-shadow: 0 28px 80px rgba(15, 23, 42, .28);
    color: var(--sade-ink);
    text-align: center;
}

.save-result-dialog-icon {
    display: inline-flex;
    width: 64px;
    height: 64px;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    font-size: 2.1rem;
}

.save-result-dialog.success .save-result-dialog-icon {
    background: rgba(22, 163, 74, .14);
    color: var(--sade-green);
}

.save-result-dialog.failure .save-result-dialog-icon {
    background: rgba(220, 38, 38, .12);
    color: #dc2626;
}

.save-result-dialog-content h2 {
    margin: 0 0 .5rem;
    font-size: 1.35rem;
    font-weight: 850;
    line-height: 1.2;
}

.save-result-dialog-content p {
    margin: 0;
    color: var(--sade-muted);
    line-height: 1.55;
}

.save-result-dialog-button {
    min-width: 120px;
    border-radius: 999px;
    font-weight: 800;
}

body.dark-theme .sade-assistant-app-theme .save-result-dialog {
    background: linear-gradient(180deg, rgba(31, 41, 55, .98), rgba(17, 24, 39, .96));
    border-color: var(--sade-border);
    color: var(--text-dark);
}

body.dark-theme .sade-assistant-app-theme .save-result-dialog-content p {
    color: var(--sade-muted);
}

/* Conversation flow actions: keep dropdown menus opaque above selected cards. */
body.dark-theme .sade-assistant-app-theme .conversation-step-menu-popover,
.sade-assistant-app-theme .conversation-step-menu-popover {
    background: #1f2937 !important;
    border-color: rgba(148, 163, 184, .45) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .45) !important;
    backdrop-filter: none !important;
}

.sade-assistant-app-theme .conversation-step-menu-item {
    background: #1f2937 !important;
    color: #f8fafc !important;
}

.sade-assistant-app-theme .conversation-step-menu-item:hover:not(:disabled) {
    background: #334155 !important;
}

.sade-assistant-app-theme .conversation-step-menu-item.danger {
    color: #f8fafc !important;
}

.sade-assistant-app-theme .conversation-step-menu-item:disabled {
    background: #1f2937 !important;
    color: rgba(248, 250, 252, .45) !important;
}

/* Generated flow start node: keep visual treatment aligned with the generated conversation-end node. */
.sade-assistant-app-theme .step-card.event-type-flow-start {
    border-left-width: 1px !important;
    border-left-color: var(--sade-border) !important;
    background: var(--sade-panel) !important;
}

body.dark-theme .sade-assistant-app-theme .step-card.event-type-flow-start {
    background: var(--sade-panel) !important;
    border-color: var(--sade-border) !important;
}

.sade-assistant-app-theme .step-card.event-type-flow-start .conversation-step-drag-handle {
    cursor: default;
}

/* Keep selected conversation flow card as visible as selected TaskNavigationCard. */
body.dark-theme .sade-assistant-app-theme .conversation-flow-list-card .rz-card.step-card.event-type-move-to-flow.selected.selected-conversation-flow-card,
body.dark-theme .sade-assistant-app-theme .conversation-flow-list-card .step-card.event-type-move-to-flow.selected.selected-conversation-flow-card,
.sade-assistant-app-theme .conversation-flow-list-card .rz-card.step-card.event-type-move-to-flow.selected.selected-conversation-flow-card,
.sade-assistant-app-theme .conversation-flow-list-card .step-card.event-type-move-to-flow.selected.selected-conversation-flow-card {
    border: 1px solid var(--sade-primary) !important;
    border-color: var(--sade-primary) !important;
    border-left-width: 1px !important;
    border-left-color: var(--sade-primary) !important;
    background: linear-gradient(135deg, rgba(var(--sade-primary-rgb), .16), rgba(var(--sade-primary-rgb), .07)) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--sade-primary-rgb), .34), 0 0 0 2px rgba(var(--sade-primary-rgb), .36), 0 14px 32px rgba(0, 0, 0, .18) !important;
}