/* App Card Styling */
.ws-interpreter-app-card {
    width: 280px;
    background: var(--ws-bg-base);
    border: 1px solid var(--ws-border-muted);
    border-radius: calc(var(--ws-border-radius) / 2);
    padding: 2rem 1.4rem; /* more vertical padding */
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

    .ws-interpreter-app-card:hover {
        transform: translateY(-4px);
        border-color: var(--ws-primary-hover);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    }

    .ws-interpreter-app-card .e-btn {
        width: 100%;
    }
/* Centering Card Content */
.ws-interpreter-center-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    text-align: center;
    margin-bottom: 1.6rem;
}

/* Icon */
.ws-interpreter-app-icon {
    font-size: 3rem;
    color: var(--ws-text-base);
    margin-bottom: 1rem;
}

/* Card Text */
.ws-interpreter-card-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ws-text-base);
    margin-bottom: 0.6rem;
}

.ws-interpreter-card-text {
    font-size: 0.97rem;
    color: var(--ws-text-muted);
    margin-bottom: 1.8rem; /* space before button */
}

/* Button */
/*.btn-action {*/
    /*padding: 0.6rem;*/
    /*width: 100%;
}*/
.ws-interpreter-additional-instructions{
    height:85px;
}

.ws-interpreter-api-definitions-layout {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    min-height: 400px; /* optional, so columns have height */
}

.ws-interpreter-api-definitions-tree {
    flex: 0 0 350px; /* fixed width, no grow/shrink */
    min-width: 0; /* allows shrinking if needed */
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    overflow: hidden;
}

.ws-interpreter-api-definitions-tree-content {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.ws-interpreter-api-definitions-detail {
    flex: 1; /* takes remaining space */
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    overflow: hidden;
}

.ws-interpreter-api-definitions-detail-content {
    flex: 1;
    overflow: auto;
    min-height: 0;
    padding: 0.5rem;
}
.ws-interpreter-api-selection-detail-card.e-card {
    border: none !important;
}
.ws-interpreter-api-definitions-detail-content.e-card {
    border: none !important;
}

.ws-interpreter-root
.ws-interpreter-api-definitions-detail-content
.e-card,
.ws-interpreter-root
.ws-interpreter-api-definitions-detail-content
e-card-header {
    border: none !important;
}

    .ws-interpreter-apimethod {
        font-weight: bold;
    }
.ws-interpreter-apimethod-post{
    color: #FFB400;
}
.ws-interpreter-apimethod-get{
    color: #0CBB52;
}
.ws-interpreter-apimethod-put{
    color:#097BED
}
.ws-interpreter-apimethod-patch{
    color: #D11FB5;
}
.ws-interpreter-apimethod-delete{
    color: #EB2013
}
.ws-interpreter-apimethod-default {
    color: #6b7280;
}

.ws-interpreter-api-tree-item-inactive {
    color: #9ca3af;
    font-weight: normal;
    opacity: 0.75;
}

/* Detail card */
.ws-interpreter-api-definition-detail-loading,
.ws-interpreter-api-definition-detail-empty,
.ws-interpreter-api-definition-detail-error {
    padding: 1rem;
    color: #6b7280;
}
.ws-interpreter-api-definition-detail-error {
    color: #b91c1c;
    background: #fef2f2;
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
}
.ws-interpreter-api-definition-detail-card {
    padding: 1.0rem;
}
.ws-interpreter-api-definition-detail-header {
    margin-bottom: 1rem;
}
.ws-interpreter-api-definition-detail-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}
.ws-interpreter-api-definition-detail-section {
    margin-bottom: 1.25rem;
}
.ws-interpreter-api-definition-detail-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: #374151;
}
.ws-interpreter-api-definition-metadata {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 1rem;
    font-size: 0.875rem;    
}

.ws-interpreter-api-definition-metadata dt {
    font-weight: 500;
    color: #6b7280;
}
.ws-interpreter-api-definition-metadata dd {
    margin: 0;
}
    .ws-interpreter-api-definition-metadata code {
        font-size: 0.8125rem;
        background: #f3f4f6;
        padding: 0.125rem 0.375rem;
        color: var(--ws-text-muted-rgb);
        border-radius: 0.25rem;
    }
.ws-interpreter-api-definition-json-block {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    overflow-x: auto;
    margin: 0.5rem 0;
}
.ws-interpreter-api-definition-json-block code {
    background: none;
    padding: 0;
}
.ws-interpreter-api-definition-schema-root,
.ws-interpreter-api-definition-schema-children {
    margin-left: 0.5rem;
}
.ws-interpreter-api-definition-schema-property {
    margin: 0.25rem 0;
}
.ws-interpreter-api-definition-schema-property-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}
.ws-interpreter-api-definition-schema-property-name {
    font-weight: 600;
    color: #1f2937;
}
.ws-interpreter-api-definition-schema-property-type {
    color: #059669;
    font-weight: 500;
}
.ws-interpreter-api-definition-schema-badge {
    font-size: 0.75rem;
    color: #6b7280;
    background: #f3f4f6;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
}
.ws-interpreter-api-definition-schema-array-item {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0.25rem 0 0 0;
}
.ws-interpreter-api-definition-required {
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
}
.ws-interpreter-api-definition-required .ws-interpreter-api-definition-detail-section-title {
    color: #b45309;
}
.ws-interpreter-api-definition-required-paths {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
}
    .ws-interpreter-api-definition-required-paths code {
        font-size: 0.8125rem;
        background: #fef3c7;
        padding: 0.125rem 0.375rem;
        border-radius: 0.25rem;
        color: var(--ws-text-muted-rgb);
    }

.ws-interpreter-api-definition-required-paths code {
        font-size: 0.8125rem;
        background: #fef3c7;
        padding: 0.125rem 0.375rem;
        border-radius: 0.25rem;
}

.ws-interpreter-api-definition-required-skeleton {
    margin-top: 0.5rem;
}
.ws-interpreter-api-definition-example {
    margin: 0.5rem 0;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    overflow: hidden;
}
.ws-interpreter-api-definition-example summary {
    padding: 0.5rem 0.75rem;
    font-weight: 500;
    cursor: pointer;
    background: #f8fafc;
}
.ws-interpreter-api-definition-example pre {
    margin: 0;
    border-radius: 0;
    border-top: 1px solid #e2e8f0;
}
.ws-interpreter-api-definition-detail-muted {
    color: #6b7280;
    font-size: 0.875rem;
    margin: 0;
}

.ws-interpreter-template-mgr-grid-container
{
    min-height:400px;
}

/* ==============================================
   PAGE STYLES - I assume this should be elevated to AgilityIntelligence... 
   ============================================== */
.ws-interpreter-page-header {
    padding: 1rem 0 0 1rem;
}

.ws-interpreter-page-title {
    color: var(--ws-text-base);
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

    .ws-interpreter-page-title .oi {
        color: var(--ws-primary);
        margin-right: 1rem;
    }
/* --------------------------------------------------------------------------
   CARDS
   -------------------------------------------------------------------------- */
/* Card structure */
.ws-interpreter-root .e-card {
    --ws-e-card-font-size-base: var(--ws-font-size);
    --ws-e-card-font-size-label: calc(var(--ws-e-card-font-size-base) * 1.12); 
    --ws-e-card-font-size-header: calc(var(--ws-e-card-font-size-base) * 1.5); 
}

.ws-interpreter-root .e-card, .ws-interpreter-root e-card-header {
    padding: 1rem !important;
    border: 1px solid var(--ws-border-muted) !important;
}
.ws-interpreter-root .e-card, .ws-interpreter-root .e-card-header-caption{

}

.ws-interpreter-root .e-card, .ws-interpreter-root .e-card-header-title {
    font-weight: 600 !important;
    font-size: var(--ws-e-card-font-size-header) !important;
    color: var(--ws-text-base) !important;
    padding-left: 4px !important;
}

.ws-interpreter-root .e-card, .ws-interpreter-root .e-card-content {
}

    .ws-interpreter-root .e-card label {
        font-weight: 600 !important;
        font-size: var(--ws-e-card-font-size-label) !important;
        color: var(--ws-text-base) !important;
        padding-left: 4px !important;
    }

/* ==============================================
   API SELECTION WIZARD STEP STYLES
   ============================================== */

.ws-interpreter-api-selection-card {
    transition: all 0.2s ease;
}

.ws-interpreter-api-selection-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ws-interpreter-api-selection-card-selected {
    border: 2px solid var(--ws-primary, #007bff) !important;
    background-color: rgba(0, 123, 255, 0.05);
}

/* Ensure CardHeader image displays properly */
.ws-interpreter-api-selection-card .e-card-header-image {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    min-height: 64px;
    width: 64px;
}


    .ws-interpreter-api-selection-card-content {
        padding: 0.5rem;
    }

    .ws-interpreter-api-selection-detail-card .e-card-header {
        text-align: left !important;
        justify-content: flex-start !important; /* only matters if header is display:flex */
        align-items: flex-start !important; /* only matters if header is display:flex */
    }

    .ws-interpreter-api-selection-image-container {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f3f4f6;
        border-radius: 0.375rem;
        overflow: hidden;
        min-width: 0;
        min-height: 0;
    }

    .ws-interpreter-api-selection-image-container-card {
        width: 64px;
        height: 64px;
    }

    .ws-interpreter-api-selection-no-image {
        color: #9ca3af;
        font-size: 0.75rem;
        text-align: center;
        padding: 0.25rem;
    }

    .ws-interpreter-api-selection-image {
        max-width: 100%;
        height: auto;
        object-fit: contain;
        display: block;
    }
    /* For containers with fixed dimensions (like the card list), use 100% */
    .ws-interpreter-api-selection-image-container-card .ws-interpreter-api-selection-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    /* For containers without fixed height, let image size naturally */
    .ws-interpreter-api-selection-image-container:not(.ws-interpreter-api-selection-image-container-card) .ws-interpreter-api-selection-image {
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 200px;
    }

    .ws-interpreter-api-selection-name {
        font-size: 1rem;
    }

    .ws-interpreter-api-selection-description {
        font-size: 0.875rem;
        line-height: 1.4;
    }

    .ws-interpreter-api-selection-meta {
        font-size: 0.8125rem;
    }

    @media (max-width: 768px) {
        .ws-interpreter-api-definitions-layout {
            flex-direction: column;
        }

        .ws-interpreter-api-definitions-tree {
            flex: none;
            max-height: 400px;
        }
    }
    /* ==============================================
   LISTBOX TEMPLATE STYLES FOR API SELECTION
   ============================================== */

    .ws-interpreter-template-listbox .e-list-item {
        line-height: 1.5 !important;
        padding: 0 16px !important;
        border: none;
    }

    .e-listbox-container.ws-interpreter-template-listbox .e-list-item.e-selected {
        background-color: var(--ws-bg-muted-light) !important;
        color: var(--ws-text-muted-light) !important;
    }

    .ws-interpreter-list-wrapper {
        height: inherit;
        position: relative;
        padding: 14px 12px 14px 78px;
    }

    .ws-interpreter-root .e-listbox-container .e-list-item {
        height: auto !important;
    }

    .ws-interpreter-list-wrapper .text,
    .ws-interpreter-list-wrapper .description {
        display: block;
        margin: 0;
        padding-bottom: 3px;
        white-space: normal;
    }

    .ws-interpreter-list-wrapper .description {
        font-size: 12px;
        font-weight: 500;
        color: #6b7280;
    }

    .e-listbox-container .ws-interpreter-list-wrapper .text {
        font-weight: bold;
        font-size: 13px;
    }

    .ws-interpreter-list-wrapper .ws-interpreter-api-listbox-image {
        position: absolute;
        left: 5px;
        background-color: transparent;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 50px;
        height: 50px;
        top: calc(50% - 25px);
        display: block;
        border-radius: 0.375rem;
    }

        .ws-interpreter-list-wrapper .ws-interpreter-api-listbox-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 0.375rem;
        }

    .bootstrap4 .ws-interpreter-list-wrapper .ws-interpreter-api-listbox-image {
        top: calc(50% - 25px);
    }
    /* Handle empty or missing API images */
    .ws-interpreter-list-wrapper .ws-interpreter-api-listbox-image:empty {
        background-color: #f3f4f6;
        background-image: none;
    }

        .ws-interpreter-list-wrapper .ws-interpreter-api-listbox-image:empty::after {
            content: "No Image";
            font-size: 10px;
            color: #9ca3af;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }
    /* Handle broken image loads */
    .ws-interpreter-list-wrapper .ws-interpreter-api-listbox-image img {
        background-color: #f3f4f6;
    }

        .ws-interpreter-list-wrapper .ws-interpreter-api-listbox-image img[src=""],
        .ws-interpreter-list-wrapper .ws-interpreter-api-listbox-image img:not([src]) {
            display: none;
        }
    /* --------------------------------------------------------------------------
   DROPDOWN
   -------------------------------------------------------------------------- */
    /* Page size dropdown in grid pager: selected, active, and hover overrides */
    .ws-interpreter-root .e-dropdownbase .e-list-item.e-active, .ws-interpreter-root .e-dropdownbase .e-list-item.e-selected {
        background-color: var(--ws-primary) !important;
        color: var(--ws-primary-text) !important;
    }

    .ws-interpreter-root .e-dropdownbase .e-list-item.e-hover,
    .ws-interpreter-root .e-dropdownbase .e-list-item:hover {
        background-color: var(--ws-primary-hover) !important;
        color: var(--ws-primary-text) !important;
    }
    /* ==============================================
   FIELD SELECTION WIZARD STEP (Step 3)
   ============================================== */

    .ws-interpreter-field-selection-step {
        padding: 0;
    }

    .ws-interpreter-field-selection-header {
        border-bottom: 1px solid #e5e7eb;
        padding-bottom: 0.75rem;
    }

    .ws-interpreter-field-selection-title {
        font-weight: 600;
        color: var(--ws-text-base, #1f2937);
        margin-bottom: 0.25rem;
    }

    .ws-interpreter-field-selection-error {
        color: #b91c1c;
        background: #fef2f2;
        border: 1px solid #fecaca;
        border-radius: 0.375rem;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    /* --- Toolbar --- */

    .ws-interpreter-field-selection-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
    }

    .ws-interpreter-field-selection-toolbar-left {
        flex: 0 0 auto;
        min-width: 200px;
        max-width: 280px;
    }

    .ws-interpreter-field-selection-toolbar-center {
        flex: 0 0 auto;
    }

    .ws-interpreter-field-selection-toolbar-right {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .ws-interpreter-field-selection-search {
        width: 100%;
    }

    .ws-interpreter-field-selection-count {
        font-size: 0.8125rem;
        white-space: nowrap;
    }
    /* --- Two-column layout --- */

    .ws-interpreter-field-selection-layout {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        min-height: 480px;
    }

    .ws-interpreter-field-selection-column {
        flex: 1;
        min-width: 0;
        border: 1px solid #e5e7eb;
        border-radius: 0.375rem;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .ws-interpreter-field-selection-column-header {
        background: #f9fafb;
        border-bottom: 1px solid #e5e7eb;
        padding: 0.625rem 0.75rem;
    }

        .ws-interpreter-field-selection-column-header h6 {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--ws-text-base, #374151);
        }
    /* --- Tree node styles --- */

    .ws-interpreter-field-node-label {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
    }

    .ws-interpreter-field-node-kind-icon {
        font-size: 0.75rem;
        opacity: 0.65;
    }

        .ws-interpreter-field-node-kind-icon.oi-folder {
            color: #6366f1;
        }

        .ws-interpreter-field-node-kind-icon.oi-list {
            color: #0891b2;
        }

        .ws-interpreter-field-node-kind-icon.oi-tag {
            color: #059669;
        }

    .ws-interpreter-field-node-path {
        font-size: 0.8125rem;
        background: #f3f4f6;
        padding: 0.125rem 0.375rem;
        border-radius: 0.25rem;
        color: #4b5563;
    }
    /* --- Required badge --- */

    .ws-interpreter-field-node-required-badge {
        background: #fffbeb;
        color: #b45309 !important;
        border: 1px solid #fcd34d;
        font-size: 0.6875rem;
        font-weight: 600;
        padding: 0.125rem 0.5rem;
        border-radius: 0.25rem;
    }
    /* --- Locked checkbox --- */

    .ws-interpreter-field-node-checkbox-locked {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        opacity: 0.7;
    }

        .ws-interpreter-field-node-checkbox-locked input[type="checkbox"] {
            cursor: not-allowed;
        }

    .ws-interpreter-field-node-lock-icon {
        font-size: 0.625rem;
        color: #b45309;
    }
    /* --- Remove button --- */

    .ws-interpreter-field-node-remove-btn {
        padding: 0.125rem 0.375rem;
        line-height: 1;
        color: #6b7280;
        border: none;
        background: transparent;
    }

        .ws-interpreter-field-node-remove-btn:hover:not(:disabled) {
            color: #dc2626;
            background: #fef2f2;
            border-radius: 0.25rem;
        }

        .ws-interpreter-field-node-remove-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }
    /* --- Responsive --- */

    @media (max-width: 992px) {
        .ws-interpreter-field-selection-layout {
            flex-direction: column;
        }

        .ws-interpreter-field-selection-column {
            min-height: 300px;
        }
    }

    @media (max-width: 768px) {
        .ws-interpreter-field-selection-toolbar {
            flex-direction: column;
            align-items: stretch;
        }

        .ws-interpreter-field-selection-toolbar-left {
            max-width: none;
        }

        .ws-interpreter-field-selection-toolbar-right {
            justify-content: flex-start;
        }
    }
    /* ==============================================
   LAYOUT BUILDER WIZARD STEP (Step 4)
   ============================================== */

    .ws-interpreter-layout-builder-step {
        padding: 0;
    }

    .ws-interpreter-layout-builder-header {
        border-bottom: 1px solid #e5e7eb;
        padding-bottom: 0.75rem;
    }

    .ws-interpreter-layout-builder-title {
        font-weight: 600;
        color: var(--ws-text-base, #1f2937);
        margin-bottom: 0.25rem;
    }

    .ws-interpreter-layout-builder-error {
        color: #b91c1c;
        background: #fef2f2;
        border: 1px solid #fecaca;
        border-radius: 0.375rem;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    /* --- Three-column grid layout --- */

    .ws-interpreter-layout-builder-grid {
        display: grid;
        grid-template-columns: 240px 1fr 280px;
        gap: 1rem;
        min-height: 520px;
    }
    /* --- Column shared styles --- */

    .ws-interpreter-layout-builder-palette,
    .ws-interpreter-layout-builder-canvas,
    .ws-interpreter-layout-builder-props {
        border: 1px solid #e5e7eb;
        border-radius: 0.375rem;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .ws-interpreter-layout-builder-column-header {
        background: #f9fafb;
        border-bottom: 1px solid #e5e7eb;
        padding: 0.625rem 0.75rem;
        flex-shrink: 0;
    }

        .ws-interpreter-layout-builder-column-header h6 {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--ws-text-base, #374151);
        }
    /* --- Left: Field Palette --- */

    .ws-interpreter-layout-builder-palette-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.5rem 0.5rem;
    }

    .ws-interpreter-layout-builder-palette-list {
        overflow-y: auto;
        padding: 0.5rem;
        flex: 1;
    }

    .ws-interpreter-layout-builder-palette-empty {
        padding: 1rem;
        text-align: center;
        font-size: 0.8125rem;
    }

    .ws-interpreter-layout-builder-palette-item {
        display: flex;
        align-items: center;
        padding: 0.5rem 0.625rem;
        margin-bottom: 0.25rem;
        border: 1px solid #e5e7eb;
        border-radius: 0.375rem;
        background: #ffffff;
        cursor: grab;
        transition: all 0.15s ease;
        font-size: 0.8125rem;
    }

        .ws-interpreter-layout-builder-palette-item:hover {
            border-color: var(--ws-primary, #007bff);
            background: rgba(0, 123, 255, 0.04);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        }

        .ws-interpreter-layout-builder-palette-item:active {
            cursor: grabbing;
            opacity: 0.7;
        }

    .ws-interpreter-layout-builder-palette-item-not-draggable {
        cursor: default;
        opacity: 0.85;
    }

        .ws-interpreter-layout-builder-palette-item-not-draggable:hover {
            border-color: #e5e7eb;
            background: #ffffff;
            box-shadow: none;
        }

        .ws-interpreter-layout-builder-palette-item-not-draggable:active {
            cursor: default;
            opacity: 0.85;
        }

    .ws-interpreter-layout-builder-palette-icon {
        font-size: 0.75rem;
        opacity: 0.65;
        flex-shrink: 0;
    }

        .ws-interpreter-layout-builder-palette-icon.oi-folder {
            color: #6366f1;
        }

        .ws-interpreter-layout-builder-palette-icon.oi-list {
            color: #0891b2;
        }

        .ws-interpreter-layout-builder-palette-icon.oi-tag {
            color: #059669;
        }

    .ws-interpreter-layout-builder-palette-item-info {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .ws-interpreter-layout-builder-palette-item-label {
        font-weight: 500;
        color: var(--ws-text-base, #1f2937);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ws-interpreter-layout-builder-palette-item-type {
        font-size: 0.6875rem;
        color: #6b7280;
    }

    .ws-interpreter-layout-builder-palette-required {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        margin-left: auto;
        flex-shrink: 0;
        font-size: 0.625rem;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .ws-interpreter-layout-builder-palette-required-icon {
        font-size: 0.6875rem;
        opacity: 0.8;
        color: #6b7280;
    }
    /* --- Center: Canvas --- */

    .ws-interpreter-layout-builder-canvas-area {
        flex: 1;
        padding: 0.75rem;
        overflow: auto;
        background: #fafbfc;
    }
    /* Group container */

    .ws-interpreter-layout-ui-div {
        position: relative;
        min-height: 80px;
        border: 2px dashed #d1d5db;
        border-radius: 0.375rem;
        padding: 0.75rem;
        margin-bottom: 0.5rem;
        background: #ffffff;
        transition: border-color 0.15s ease, background-color 0.15s ease;
    }

    .ws-interpreter-layout-ui-div-dragover {
        border-color: var(--ws-primary, #007bff);
        background: rgba(0, 123, 255, 0.04);
    }

    .ws-interpreter-layout-ui-div-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 60px;
        color: #9ca3af;
        font-size: 0.8125rem;
        font-style: italic;
    }
    /* Component wrapper (leaf items on canvas) */

    .ws-interpreter-layout-component-wrapper {
        position: relative;
        border: 1px solid #e5e7eb;
        border-radius: 0.375rem;
        padding: 0.625rem 0.75rem;
        margin-bottom: 0.5rem;
        background: #ffffff;
        cursor: grab;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

        .ws-interpreter-layout-component-wrapper:hover {
            border-color: #a5b4fc;
            box-shadow: 0 1px 4px rgba(99, 102, 241, 0.12);
        }

        .ws-interpreter-layout-component-wrapper:active {
            cursor: grabbing;
        }
    /* Component content */

    .ws-interpreter-layout-component-content {
        pointer-events: none;
    }

    .ws-interpreter-layout-component-label {
        display: block;
        font-weight: 500;
        font-size: 0.8125rem;
        color: var(--ws-text-base, #374151);
        margin-bottom: 0.25rem;
    }

    .ws-interpreter-layout-component-control {
        pointer-events: none;
    }

    .ws-interpreter-layout-component-checkbox-row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    /* Textbox preview (native HTML, not Syncfusion — used in canvas) */

    .ws-interpreter-layout-component-textbox-preview {
        border: 1px solid #d1d5db;
        border-radius: 0.25rem;
        padding: 0.375rem 0.5rem;
        font-size: 0.8125rem;
        color: #9ca3af;
        background: #f9fafb;
        min-height: 2rem;
        line-height: 1.4;
    }

    .ws-interpreter-layout-component-numeric-preview {
        font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    }
    /* Grid preview table */

    .ws-interpreter-layout-component-grid-preview {
        border: 1px solid #e5e7eb;
        border-radius: 0.25rem;
        overflow: hidden;
        margin-top: 0.25rem;
    }

    .ws-interpreter-layout-component-grid-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.75rem;
    }

        .ws-interpreter-layout-component-grid-table th {
            background: #f3f4f6;
            border-bottom: 1px solid #e5e7eb;
            padding: 0.375rem 0.5rem;
            font-weight: 600;
            color: #374151;
            text-align: left;
        }

        .ws-interpreter-layout-component-grid-table td {
            padding: 0.375rem 0.5rem;
            color: #9ca3af;
            border-bottom: 1px solid #f3f4f6;
        }
    /* --- Selection & drag overlays --- */

    .ws-interpreter-layout-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 2px solid transparent;
        border-radius: 0.375rem;
        pointer-events: none;
        z-index: 1;
        transition: border-color 0.15s ease;
    }

        .ws-interpreter-layout-overlay.visible {
            border-color: var(--ws-primary, #007bff);
        }

    .ws-interpreter-layout-overlay-label {
        position: absolute;
        top: -1.25rem;
        left: 0.25rem;
        font-size: 0.625rem;
        font-weight: 600;
        color: #ffffff;
        background: var(--ws-primary, #007bff);
        padding: 0.0625rem 0.375rem;
        border-radius: 0.25rem 0.25rem 0 0;
        opacity: 0;
        transition: opacity 0.15s ease;
        pointer-events: none;
        white-space: nowrap;
    }

        .ws-interpreter-layout-overlay-label.visible {
            opacity: 1;
        }
    /* --- Right: Property Panel --- */

    .ws-interpreter-layout-builder-props-content {
        overflow-y: auto;
        padding: 0.75rem;
        flex: 1;
    }

    .ws-interpreter-layout-builder-props-empty {
        padding: 1rem;
        text-align: center;
        font-size: 0.8125rem;
    }

    .ws-interpreter-layout-builder-props-section {
        margin-bottom: 0.875rem;
    }

    .ws-interpreter-layout-builder-props-label {
        display: block;
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.025em;
        color: #6b7280;
        margin-bottom: 0.25rem;
    }

    .ws-interpreter-layout-builder-props-value-readonly {
        font-size: 0.8125rem;
        color: var(--ws-text-base, #1f2937);
        background: #f3f4f6;
        padding: 0.375rem 0.5rem;
        border-radius: 0.25rem;
        word-break: break-all;
    }
    /* Grid column list in props panel */
    /* --- Grid Column ListBox & Properties --- */

    .ws-interpreter-layout-builder-grid-column-listbox-wrapper {
        border: 1px solid #e5e7eb;
        border-radius: 0.375rem;
        overflow: hidden;
    }

        .ws-interpreter-layout-builder-grid-column-listbox-wrapper .e-listbox-wrapper,
        .ws-interpreter-layout-builder-grid-column-listbox-wrapper .ws-interpreter-grid-column-listbox {
            border: none;
        }

    .ws-interpreter-layout-builder-grid-col-item {
        display: flex;
        align-items: center;
        padding: 0.25rem 0;
        font-size: 0.8125rem;
        gap: 0.25rem;
    }

    .ws-interpreter-layout-builder-grid-col-icon {
        font-size: 0.6875rem;
        opacity: 0.6;
        flex-shrink: 0;
    }

    .ws-interpreter-layout-builder-grid-col-caption {
        font-weight: 500;
        color: var(--ws-text-base, #374151);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        min-width: 0;
    }

    .ws-interpreter-layout-builder-grid-col-type {
        font-size: 0.625rem;
        color: #6b7280;
        background: #f3f4f6;
        padding: 0.0625rem 0.375rem;
        border-radius: 0.25rem;
        flex-shrink: 0;
    }

    .ws-interpreter-layout-builder-grid-col-hidden {
        font-size: 0.625rem;
        color: #9ca3af;
        flex-shrink: 0;
    }
    /* Grid Column Properties panel (below the listbox) */

    .ws-interpreter-layout-builder-grid-col-props {
        margin-top: 0.5rem;
        padding-top: 0.625rem;
        border-top: 1px solid #e5e7eb;
    }

        .ws-interpreter-layout-builder-grid-col-props > .ws-interpreter-layout-builder-props-label:first-child {
            font-weight: 600;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            color: #6b7280;
            margin-bottom: 0.5rem;
        }
    /* --- Responsive --- */

    @media (max-width: 1200px) {
        .ws-interpreter-layout-builder-grid {
            grid-template-columns: 200px 1fr 240px;
        }
    }

    @media (max-width: 992px) {
        .ws-interpreter-layout-builder-grid {
            grid-template-columns: 1fr;
            grid-template-rows: auto 1fr auto;
        }

        .ws-interpreter-layout-builder-palette {
            max-height: 200px;
        }

        .ws-interpreter-layout-builder-canvas {
            min-height: 400px;
        }

        .ws-interpreter-layout-builder-props {
            max-height: 300px;
        }
    }
    /* ==============================================
   TEMPLATE WIZARD FOOTER BUTTONS
   ============================================== */

    .ws-interpreter-wizard-footer {
        justify-content: flex-end;
    }

    .ws-interpreter-wizard-footer-btn {
        min-width: 100px;
    }

        .ws-interpreter-wizard-footer-btn .e-btn.e-outline .oi {
        }
    /* ==============================================
   TEMPLATE BASICS WIZARD STEP (Step 1)
   ============================================== */
    .ws-interpreter-template-basics-switch-container {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .ws-interpreter-template-basics-switch-label {
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .ws-interpreter-template-basics-switch-container .e-switch-wrapper {
        display: inline-flex;
        align-items: center;
    }
    /* ==============================================
   MAPPING WIZARD STEP (Step 5)
   ============================================== */
    /* --- Step-level --- */

    .ws-interpreter-mapping-step {
        padding: 0;
    }

    .ws-interpreter-mapping-step-error {
        color: #b91c1c;
        background: #fef2f2;
        border-color: #fecaca !important;
        font-size: 0.875rem;
    }
    /* --- Status badges --- */

    .ws-interpreter-mapping-step-stat {
        font-size: 0.75rem;
        font-weight: 600;
    }
    /* --- Panels --- */

    .ws-interpreter-mapping-list-panel,
    .ws-interpreter-mapping-props-panel {
        min-height: 480px;
        max-height: 640px;
        border-radius: 0.375rem;
    }

    .ws-interpreter-mapping-panel-header {
        flex-shrink: 0;
        border-radius: 0.375rem;
    }

        .ws-interpreter-mapping-panel-header h6 {
            color: var(--ws-text-base, #374151);
        }

    .ws-interpreter-mapping-list-body {
        overflow-y: auto;
    }

    .ws-interpreter-mapping-props-body {
        overflow-y: auto;
    }
    /* --- Status icons --- */

    .ws-interpreter-mapping-status-icon {
        font-size: 0.75rem;
    }
    /* --- Source labels --- */

    .ws-interpreter-mapping-source-label {
        font-weight: 500;
        color: var(--ws-text-base, #1f2937);
        line-height: 1.3;
    }

    .ws-interpreter-mapping-source-meta {
        font-size: 0.6875rem;
        line-height: 1.3;
    }

    .ws-interpreter-mapping-required-badge {
        font-size: 0.5625rem;
        padding: 0.1rem 0.35rem;
        vertical-align: middle;
    }
    /* --- Action buttons --- */

    .ws-interpreter-mapping-action-btn {
        padding: 0.125rem 0.375rem;
        line-height: 1;
        color: #6b7280;
        border: none;
        background: transparent;
        font-size: 0.75rem;
    }

        .ws-interpreter-mapping-action-btn:hover {
            color: #dc2626;
            background: #fef2f2;
            border-radius: 0.25rem;
        }

    .ws-interpreter-mapping-action-btn-inactive {
        color: #059669;
    }

        .ws-interpreter-mapping-action-btn-inactive:hover {
            color: #059669;
            background: #ecfdf5;
        }
    /* --- Properties panel --- */

    .ws-interpreter-mapping-props-readonly {
        font-family: var(--bs-font-monospace);
        font-size: 0.8125rem;
        color: var(--ws-text-base, #374151);
        word-break: break-all;
    }

    .ws-interpreter-mapping-props-empty-icon {
        font-size: 1.5rem;
        color: #d1d5db;
    }
    /* --- Min-width utility --- */

    .ws-interpreter-min-width-0 {
        min-width: 0;
    }
    /* --- Responsive --- */

    @media (max-width: 992px) {
        .ws-interpreter-mapping-list-panel,
        .ws-interpreter-mapping-props-panel {
            min-height: 320px;
            max-height: none;
        }
    }
    /* ======================================================================
   Document Upload & Preview
   ====================================================================== */
    /* ---------- DocUpload: drag-and-drop area ---------- */

    .ws-interpreter-doc-upload-drop-area {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem 1.5rem;
        border: 2px dashed var(--bs-border-color, #c3c3c3);
        border-radius: 8px;
        background: var(--bs-body-bg, #fafafa);
        text-align: center;
        transition: border-color 0.2s, background 0.2s;
        cursor: pointer;
        min-height: 160px;
    }

    .ws-interpreter-doc-upload-drop-area .e-upload .e-upload-files .e-upload-file-list .e-file-container {
        margin-right: 0px !important;
    }


    .ws-interpreter-doc-upload-drop-area:hover,
    .ws-interpreter-doc-upload-drop-area.e-upload-drag-hover {
        border-color: var(--bs-primary, #0d6efd);
        background: color-mix(in srgb, var(--bs-primary, #0d6efd) 5%, transparent);
    }

.ws-interpreter-doc-upload-icon {
    font-size: 2.5rem;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.5rem;
}

.ws-interpreter-doc-upload-text {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.ws-interpreter-doc-upload-hint {
    font-size: 0.8rem;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0;
}

/* hide default SfUploader chrome inside drop area */
.ws-interpreter-doc-upload-drop-area .e-file-select,
.ws-interpreter-doc-upload-drop-area .e-file-drop {
    display: none;
}

/* ---------- DocPreview: container ---------- */

.ws-interpreter-doc-preview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--bs-secondary-color, #6c757d);
    text-align: center;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    min-height: 200px;
}

.ws-interpreter-doc-preview-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.ws-interpreter-doc-preview-container {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Embedded (compact) mode */
.ws-interpreter-doc-preview-embedded {
    max-height: 480px;
}

.ws-interpreter-doc-preview-embedded .ws-interpreter-doc-preview-content {
    flex: 1 1 auto;
    overflow: auto;
    min-height: 0;
}

/* Full mode (inside dialog) */
.ws-interpreter-doc-preview-full {
    height: 100%;
    max-height: none;
}

.ws-interpreter-doc-preview-full .ws-interpreter-doc-preview-content {
    flex: 1 1 auto;
    overflow: auto;
    min-height: 0;
    height: 100%;
}

/* ---------- DocPreview: toolbar ---------- */

.ws-interpreter-doc-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.75rem;
    background: var(--bs-light, #f8f9fa);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    flex-shrink: 0;
}

.ws-interpreter-doc-preview-filename {
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 40px);
}

.ws-interpreter-doc-preview-expand-btn {
    flex-shrink: 0;
}

/* ---------- DocPreview: text / CSV ---------- */

.ws-interpreter-doc-preview-text-wrapper {
    padding: 0;
}

.ws-interpreter-doc-preview-text {
    margin: 0;
    padding: 1rem;
    font-size: 0.85rem;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--bs-body-bg, #fff);
}

.ws-interpreter-doc-preview-csv-table {
    margin: 0;
    font-size: 0.82rem;
}

/* ---------- DocPreview: full-view dialog ---------- */

.ws-interpreter-doc-preview-dialog .e-dlg-content {
    padding: 0;
    overflow: hidden;
    height: calc(100% - 50px);
}

.ws-interpreter-doc-preview-dialog-header {
    display: flex;
    align-items: center;
    font-weight: 600;
}


/* ---------- Template Processor ---------- */

.ws-interpreter-document-process-layout {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    min-height: 480px;
}

.ws-interpreter-document-process-column {
    min-width: 0;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

    /* 65% column */
    .ws-interpreter-document-process-column.left {
        flex: 0 0 55%;
    }

    /* 35% column */
    .ws-interpreter-document-process-column.right {
        flex: 0 1 45%;
    }


/* ========================================================================
   Template Wizard — Review Step
   ======================================================================== */

.ws-interpreter-review-status {
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.ws-interpreter-review-status-complete {
    background-color: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.ws-interpreter-review-status-incomplete {
    background-color: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.ws-interpreter-review-issues-list {
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: #fff;
}

.ws-interpreter-review-issue-item {
    border-bottom: 1px solid #f3f4f6;
}

    .ws-interpreter-review-issue-item:last-child {
        border-bottom: none;
    }

.ws-interpreter-review-goto-btn {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    white-space: nowrap;
}

.ws-interpreter-review-warnings {
    padding: 0.25rem 0;
}

.ws-interpreter-review-card-header {
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
}

.ws-interpreter-review-summary-grid {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ws-interpreter-review-summary-row {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.2rem 0;
}

.ws-interpreter-review-summary-row-block {
    flex-direction: column;
}

.ws-interpreter-review-label {
    font-weight: 600;
    min-width: 160px;
    color: #6b7280;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.ws-interpreter-review-value {
    color: #111827;
    font-size: 0.9rem;
    word-break: break-word;
}

.ws-interpreter-review-summary-divider {
    border-top: 1px solid #e5e7eb;
    margin: 0.35rem 0;
}

.ws-interpreter-review-api-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 4px;
}

.ws-interpreter-review-api-icon-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.9rem;
}

.ws-interpreter-review-instructions-value {
    width: 100%;
}

.ws-interpreter-review-instructions-text {
    display: block;
    white-space: pre-wrap;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.25rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    max-height: 140px;
    overflow-y: auto;
}

/* Mapping summary */

.ws-interpreter-review-stat {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.ws-interpreter-review-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
}

.ws-interpreter-review-stat-label {
    font-size: 0.8rem;
    color: #6b7280;
}

.ws-interpreter-review-missing-required {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}

.ws-interpreter-review-mapping-scroll {
    max-height: 420px;
    overflow-y: auto;
}

.ws-interpreter-review-mapping-section-title {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.ws-interpreter-review-mapping-table {
    font-size: 0.82rem;
    margin-bottom: 0;
}

    .ws-interpreter-review-mapping-table th {
        font-weight: 600;
        color: #6b7280;
        border-top: none;
    }

.ws-interpreter-review-mapping-row-missing {
    background-color: #fef2f2;
}

@media (max-width: 767.98px) {
    .ws-interpreter-review-label {
        min-width: auto;
    }

    .ws-interpreter-review-summary-row {
        flex-direction: column;
        gap: 0;
    }
}

/* ==============================================
   MESSAGE WIZARD STEP (Step 6)
   ============================================== */

.ws-interpreter-message-step {
    padding: 0;
}

.ws-interpreter-message-step-error {
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
}

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

.ws-interpreter-message-step-layout {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    min-height: 400px;
}

.ws-interpreter-message-step-left {
    flex: 0 0 300px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ws-interpreter-message-step-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* --- Section titles --- */

.ws-interpreter-message-step-section-title {
    display: block;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: #374151;
    margin-bottom: 0.375rem;
}

/* --- Variable list --- */

.ws-interpreter-message-step-variable-list {
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    overflow-y: auto;
    max-height: 340px;
}

.ws-interpreter-message-step-variable-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.ws-interpreter-message-step-variable-item:last-child {
    border-bottom: none;
}

.ws-interpreter-message-step-variable-item:hover {
    background: rgba(0, 123, 255, 0.04);
}

.ws-interpreter-message-step-variable-builtin {
    background: #f9fafb;
}

.ws-interpreter-message-step-variable-name {
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--ws-text-base, #1f2937);
}

.ws-interpreter-message-step-variable-token {
    font-size: 0.75rem;
    color: #6b7280;
    background: #f3f4f6;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
    width: fit-content;
}

.ws-interpreter-message-step-variable-empty {
    padding: 1rem;
    text-align: center;
    font-size: 0.8125rem;
}

/* SfListBox styling within variable list */
.ws-interpreter-message-step-variable-list .ws-interpreter-template-listbox {
    border: none;
}

.ws-interpreter-message-step-variable-list .ws-interpreter-template-listbox .e-listbox-container {
    border: none;
}

.ws-interpreter-message-step-variable-list .ws-interpreter-template-listbox .e-list-item {
    padding: 0;
    border-bottom: 1px solid #f3f4f6;
}

.ws-interpreter-message-step-variable-list .ws-interpreter-template-listbox .e-list-item:last-child {
    border-bottom: none;
}

.ws-interpreter-message-step-variable-list .ws-interpreter-template-listbox .e-list-item.e-selected {
    background-color: rgba(0, 123, 255, 0.04);
}

/* --- Helper text --- */

.ws-interpreter-message-step-helper-text {
    font-size: 0.8125rem;
}

.ws-interpreter-message-step-helper-text code {
    font-size: 0.75rem;
    background: #f3f4f6;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
}

/* --- Preview panel --- */

.ws-interpreter-message-step-preview {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.ws-interpreter-message-step-preview-placeholder {
    font-size: 0.8125rem;
    background: #dbeafe;
    color: #1e40af;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
    font-weight: 500;
}

/*Template Selector*/
.ws-interpreter-template-selector {
    height:85%;
}

/* --- Execution message (Template Processor) --- */

.ws-interpreter-execution-message {
    font-size: 1rem;
}

/* --- Responsive --- */

@media (max-width: 768px) {
    .ws-interpreter-message-step-layout {
        flex-direction: column;
    }

    .ws-interpreter-message-step-left {
        flex: none;
    }

    .ws-interpreter-message-step-variable-list {
        max-height: 200px;
    }
}