/* AI Workspace Header Nav tweaks */
.nav-container.main-nav > li > a {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    letter-spacing: 0.3px;
}
.nav-container.main-nav > li > a:hover {
    color: #333;
}
.nav-container.main-nav > li.active > a {
    color: #6d468c;
    color: var(--primary, #6d468c);
}

.edin-sidebar-list-item.active .lottie img{
    box-shadow: 0 0 6px 4px rgba(255,255,255,0.9);
    background: white;
    border-radius: 50%;
}

    /* Base Container */
.ai-workspace-container {
    height:100%;
    display: flex;
    flex-direction: column;
    animation: pageLoad 0.6s ease-out;
    overflow: hidden;
}

/* Page load entrance */
@keyframes pageLoad {
    0% { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Staggered entrance for child panels */
.ai-config-panel {
    animation: panelSlideIn 0.5s ease-out 0.1s both;
}
.ai-output-panel {
    animation: panelSlideIn 0.5s ease-out 0.25s both;
}
@keyframes panelSlideIn {
    0% { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Stagger form sections inside config */
.ai-config-panel .ai-form-section:nth-child(1) { animation: formFadeIn 0.4s ease-out 0.2s both; }
.ai-config-panel .ai-form-section:nth-child(2) { animation: formFadeIn 0.4s ease-out 0.3s both; }
.ai-config-panel .ai-form-section:nth-child(3) { animation: formFadeIn 0.4s ease-out 0.4s both; }
.ai-config-panel .ai-form-section:nth-child(4) { animation: formFadeIn 0.4s ease-out 0.5s both; }
.ai-config-panel .ai-form-section:nth-child(5) { animation: formFadeIn 0.4s ease-out 0.6s both; }
@keyframes formFadeIn {
    0% { opacity: 0; transform: translateX(-10px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* Header */
.ai-header {
    padding: 24px 40px;
    border-bottom: 1px solid #eee;
}

.ai-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.ai-header h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #111;
    margin: 0;
}

.ai-header-subtitle {
    color: #666;
}
.ai-tool-nav{
    flex: 0;
}
/* Tool Tabs */
.ai-tool-tabs {
    display: flex;
    gap: 8px;
}

.ai-tool-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    background: transparent;
    color: #555;
    font-weight: 500;
}

.ai-tool-tab:hover {
    background: #f5f5f5;
}

.ai-tool-tab.active {
    background: #6d468c;
    color: #fff;
}

.ai-tool-tab i {
    font-size: 1rem;
}

.ai-tool-tab.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ai-tool-tab.disabled:hover {
    background: transparent;
}

.ai-tool-tab .coming-soon {
    background: rgba(0,0,0,0.1);
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-tool-tab.active .coming-soon {
    background: rgba(255,255,255,0.2);
}

/* Main Content */
.ai-main {
    display: flex;
    flex:1;
    height: 100%;
    overflow: auto;
    gap: 18px;
}

/* Left Panel - Config */
.ai-config-panel {
    flex: 0 0 540px;
    width: 540px;
    max-width: 540px;
    min-width: 540px;
    width:33%;
    border-right: 2px solid #e5e7eb;
    background: #fff;
    border-radius:12px;
}

/* Right Panel - Output */
.ai-output-panel {
    flex: 1;
    width: 0;
    display: flex;
    flex-direction: column;
    background: #f9fafb;
}

/* Form Sections */
.ai-form-section {
    margin-bottom: 28px;
}

.ai-form-section:last-child {
    margin-bottom: 0;
}

.ai-form-label {

    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
    display: block;
}

/* Dropdowns Row */
.ai-dropdowns {
    display: flex;
    gap: 12px;
    width: 100%;
}

.ai-dropdown-wrapper {
    flex: 1;
    min-width: 0;
}

.ai-dropdown-wrapper label {
    display: block;
    color: #888;
    margin-bottom: 6px;
}

/* Custom Dropdown Styles */
.ai-custom-dropdown {
    position: relative;
}

.ai-dropdown-trigger {
    width: 100%;
    padding: 10px 32px 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    transition: all 0.15s ease;
    background: #fff;
    cursor: pointer;
    display: block;
    min-height: 40px;
    text-align: left;
    overflow: hidden;
    position: relative;
}

.ai-dropdown-trigger:hover {
    border-color: #bbb;
}

.ai-dropdown-trigger.open {
    border-color: #6d468c;
    box-shadow: 0 0 0 2px rgba(109,70,140,0.1);
}

.ai-dropdown-trigger.disabled {
    background: #f9f9f9;
    cursor: not-allowed;
    color: #bbb;
}

.ai-dropdown-trigger .placeholder {
    color: #aaa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    padding-right: 20px;
}

.ai-dropdown-trigger .selected-text {
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    padding-right: 20px;
}

.ai-dropdown-trigger .arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;

    transition: transform 0.15s ease;
}

.ai-dropdown-trigger.open .arrow {
    transform: translateY(-50%) rotate(180deg);
}

.ai-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.ai-dropdown-menu .dropdown-item {
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.1s ease;
}

.ai-dropdown-menu .dropdown-item:hover {
    background: #f5f5f5;
}

.ai-dropdown-menu .dropdown-item.selected {
    background: #6d468c;
    color: #fff;
}

.ai-dropdown-menu .no-options {
    padding: 12px;
    color: #aaa;
    text-align: center;
}

/* 12081 phase-3 fixB: course-picker disambiguation. Two courses can share a
   byte-identical name (a live course and an IMSCC-import copy), so every option
   carries a muted "<status> · <contentBank> · created <Mon YYYY>" line. Layout
   only — .dropdown-item already supplies the padding and hover. */
.ai-dropdown-menu .dropdown-item.ai-atc-course-option {
    display: block;
    line-height: 1.3;
}

.ai-atc-course-name {
    display: block;
}

.ai-atc-course-meta {
    display: block;
    margin-top: 2px;
    font-size: 0.7rem;
    color: #9ca3af;
}

/* Keep the muted line legible against the selected row's purple fill. */
.ai-dropdown-menu .dropdown-item.selected .ai-atc-course-meta {
    color: rgba(255, 255, 255, 0.75);
}

/* Same qualifier on the closed trigger, inline so it does not change its height. */
.ai-atc-course-meta-inline {
    font-size: 0.7rem;
    color: #9ca3af;
    margin-left: 6px;
}

/* Standards List */
.ai-standards-list {
    max-height: 200px;
    overflow-y: auto;
    margin-top: 12px;
}

.ai-standard-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #f8f8f8;
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ai-standard-item:hover {
    background: #f0f0f0;
}

.ai-standard-item .code {
    font-weight: 600;
    color: #6d468c;
    color: var(--primary)
}

.ai-standard-item .desc {
    color: #666;
    line-height: 1.4;
}

.ai-standard-item .add-btn {
    /*background: #3b82f6;*/
    border: none;
    color: #fff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.ai-standard-item .add-btn:hover {
    background: #5a3775;
}

/* Selected Standards */
.ai-selected-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.ai-selected-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.ai-selected-header span {
    font-weight: 600;
    color: #333;
}

.ai-selected-count {
    color: #666;
    background: #eee;
    padding: 2px 8px;
    border-radius: 10px;
}

.ai-selected-standards {
    max-height: 120px;
    overflow-y: auto;
}

.ai-selected-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: #f3eef7;
    border-radius: 6px;
    margin-bottom: 6px;
    border: 1px solid #e0d1ec;
}

.ai-selected-item .code {
    font-weight: 600;
    color: #6d468c;
    color: var(--primary);
}

.ai-selected-item .desc {
    color: #666;
}

.ai-selected-item .remove-btn,
.ai-file-item .remove-btn {
    background: none;
    border: none;
    color: #999;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.ai-selected-item .remove-btn:hover,
.ai-file-item .remove-btn:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* ============================================ */
/* Template Selection Cards                     */
/* ============================================ */

.ai-template-cards {
    display: flex;
    gap: 12px;
}

.ai-template-card {
    flex: 1;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.ai-template-card:hover {
    border-color: #bbb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

.ai-template-card.selected {
    border-color: var(--primary, #6d468c);
    box-shadow: 0 0 0 1px var(--primary, #6d468c), 0 2px 8px rgba(109,70,140,0.15);
}

.ai-template-card-header {
    padding: 14px 12px;
    text-align: center;
    color: #fff;
}

.ai-template-card-header i {
    font-size: 1.4rem;
}

.ai-template-card-body {
    padding: 10px 12px 6px;
    flex: 1;
}

.ai-template-card-name {
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
    font-size: 0.85rem;
}

.ai-template-card-desc {
    color: #6b7280;
    font-size: 0.72rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ai-template-card-features {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

.ai-template-feature {
    font-size: 0.65rem;
    background: #f3f4f6;
    color: #6b7280;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.ai-template-card.selected .ai-template-feature {
    background: #f3eef7;
    color: var(--primary, #6d468c);
}

.ai-template-card-actions {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #f3f4f6;
}

.ai-template-preview-btn {
    background: none;
    border: 1px solid #e5e7eb;
    color: #6b7280;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ai-template-preview-btn:hover {
    background: #f9fafb;
    border-color: #9ca3af;
    color: #374151;
}

.ai-template-selected-badge {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary, #6d468c);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
}

/* ============================================ */
/* Template Preview Modal                       */
/* ============================================ */

.ai-preview-overlay {
    z-index: 10001;
}

.ai-preview-modal {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.25);
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ai-preview-modal-header {
    padding: 18px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.ai-preview-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-preview-modal-title i {
    font-size: 1.2rem;
}

.ai-preview-modal-title h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
}

.ai-preview-modal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-preview-select-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;
    color: #fff;
}

.ai-preview-close-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #f3f4f6;
    border: none;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    font-size: 1rem;
}

.ai-preview-close-btn:hover {
    background: #e5e7eb;
    color: #374151;
}

.ai-preview-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background: #f9fafb;
}

.ai-preview-content {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.ai-preview-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: #9ca3af;
}

.ai-preview-loading i {
    font-size: 1.5rem;
    margin-bottom: 12px;
}

.ai-preview-modal-footer {
    padding: 12px 24px;
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.ai-preview-footer-features {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Upload Zone */
.ai-upload-zone {
    border: 2px dashed #d1c4e0;
    border-radius: 12px;
    padding: 28px;
    text-align: center;
    background: #faf8fc;
    transition: all 0.25s ease;
    cursor: pointer;
}
.ai-upload-zone:hover {
    border-color: #6d468c;
    background: #f3eef7;
}
.ai-upload-zone--dragover {
    border-color: #6d468c;
    background: #ede5f5;
    transform: scale(1.01);
    box-shadow: 0 0 0 4px rgba(109, 70, 140, 0.1);
}
.ai-upload-icon {
    font-size: 2rem;
    color: #6d468c;
    margin-bottom: 8px;
    display: block;
}
.ai-upload-text {
    font-weight: 600;
    color: #6d468c;
    margin: 4px 0 2px;
}
.ai-upload-subtext {
    color: #999;
    font-size: 0.85rem;
    margin: 0;
}
.ai-upload-formats {
    color: #bbb;
    font-size: 0.75rem;
    margin: 8px 0 0;
    letter-spacing: 0.3px;
}

/* 12081: upload size/count limit line, shown under every upload surface */
.ai-upload-limit {
    color: #999;
    font-size: 0.7rem;
    margin: 4px 0 0;
}

/* 12081: required marker on the Source Materials label */
.ai-required-mark {
    color: #dc2626;
    font-weight: 700;
    margin-left: 2px;
}

/* 12081: hint shown above a disabled Launch Lotty button */
.ai-generate-hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 8px;
    padding: 8px 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    color: #92400e;
    font-size: 0.75rem;
    line-height: 1.35;
}
.ai-generate-hint i {
    color: #f59e0b;
    margin-top: 2px;
    flex-shrink: 0;
}

/* 12081: "Add Images" trigger for the separate image-upload modal */
.ai-image-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1.5px dashed #e0d1ec;
    border-radius: 8px;
    background: #fff;
    color: #6d468c;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.ai-image-open-btn:hover {
    background: #f3eef7;
    border-color: #6d468c;
}
.ai-image-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #6d468c;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
}

/* 12081: image-upload modal — reuses the Add-to-Course modal shell */
.ai-image-modal {
    max-width: 520px;
}

.ai-file-list {
    margin-top: 12px;
}

.ai-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #f8f8f8;
    border-radius: 6px;
    margin-bottom: 6px;
}

.ai-file-item .file-name {
    color: #333;
}

.ai-file-item .file-size {
    color: #999;
    margin-left: 8px;
}

/* Textarea */
.ai-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    resize: vertical;
    min-height: 100px;
    transition: border-color 0.15s ease;
    font-family: inherit;
}

.ai-textarea:focus {
    outline: none;
    border-color: #6d468c;
    box-shadow: 0 0 0 2px rgba(109,70,140,0.1);
}

.ai-textarea::placeholder {
    color: #bbb;
}

/* Generate Button */
.ai-generate-btn {
    width: 100%;
    background: linear-gradient(135deg, #6d468c, #8b5fbf);
    border: none;
    color: #fff;
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
    box-shadow: 0 4px 15px rgba(109, 70, 140, 0.3);
}

.ai-generate-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #5a3775, #7a4fad);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(109, 70, 140, 0.4);
}

.ai-generate-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.ai-generate-lotty-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}
.ai-working-dots {
    animation: workingDots 1.5s ease-in-out infinite;
}
@keyframes workingDots {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.ai-reset-link {
    display: block;
    text-align: center;
    margin-top: 12px;
    color: #888;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
}

.ai-reset-link:hover {
    color: #555;
}

/* Output Panel */
.ai-output-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.ai-output-header h2 {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.ai-copy-btn {
    background: #fff;
    border: 1px solid #ddd;
    color: #555;
    padding: 6px 12px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ai-copy-btn:hover {
    background: #f5f5f5;
    border-color: #bbb;
}

/* Output Empty */
.ai-output-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #bbb;
    position: relative;
    min-height: 300px;
    padding: 40px 20px;
}

.ai-output-empty i {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.ai-output-empty p {
}

/* Inline Template Preview (right panel, before generation) */
.ai-output-empty-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.ai-inline-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 16px 20px 20px;
    animation: panelSlideIn 0.4s ease-out both;
}

.ai-inline-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    flex-shrink: 0;
}

.ai-inline-preview-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.ai-inline-preview-title i {
    color: var(--primary, #6d468c);
    font-size: 0.9rem;
}

.ai-inline-preview-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-inline-preview-badge {
    display: inline-block;
    padding: 3px 10px;
    background: #f3eef7;
    color: var(--primary, #6d468c);
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
}

.ai-inline-preview-badge--length {
    background: #e0f2fe;
    color: #0369a1;
}

.ai-inline-preview-hint {
    padding: 8px 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    color: #92400e;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-bottom: 12px;
}

.ai-inline-preview-hint i {
    color: #f59e0b;
    flex-shrink: 0;
    font-size: 0.85rem;
}

.ai-inline-preview-body {
    flex: 1;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
}

.ai-inline-preview-body .ai-preview-content {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* 12081: video feature removed from Lotty per client request.
   Hide iframes in preview when "No Video" is selected
.ai-no-video iframe {
    display: none !important;
}
*/

/* 12081: blueprint drag-reorder removed from Lotty per client request.
   "Drag sections to reorder" controls bar + Reset Order button.
   Inner comment delimiters were stripped so this block nests.

 Drag-and-drop controls bar above preview
.ai-inline-preview-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    margin-bottom: 8px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    flex-shrink: 0;
}

.ai-inline-preview-controls-hint {
    font-size: 0.75rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-inline-preview-controls-hint i {
    color: #9ca3af;
    font-size: 0.85rem;
}

.ai-reset-order-btn {
    padding: 4px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s ease;
}

.ai-reset-order-btn:hover {
    background: #f3eef7;
    border-color: #6d468c;
    color: #6d468c;
}
*/

/* 12081: ALL drag-and-drop removed from Lotty per client request.
   This block styled the grip handles and drag states shared by BOTH the
   blueprint reorder and arrange mode. The blueprint preview survives as a
   read-only preview and needs none of it. Inner comment delimiters were
   stripped so this block nests.

 Draggable section wrapper (added by JS to each top-level page child)
.ai-draggable-section {
    position: relative !important;
    transition: outline 0.15s ease, background-color 0.15s ease;
    outline: 2px dashed rgba(109, 70, 140, 0.25);
    outline-offset: 2px;
    margin-left: 32px !important;
}

.ai-draggable-section:hover {
    outline-color: rgba(109, 70, 140, 0.7);
    background-color: rgba(109, 70, 140, 0.03);
}

 Drag handle injected at the top-left of each draggable section
.ai-drag-handle {
    position: absolute;
    top: 50%;
    left: -32px;
    transform: translateY(-50%);
    width: 26px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #6d468c;
    color: #fff;
    border-radius: 4px;
    cursor: grab;
    z-index: 10;
    font-size: 0.85rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    transition: background 0.15s ease, transform 0.15s ease;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: none;
}

.ai-drag-handle:hover {
    background: #553573;
    transform: translateY(-50%) scale(1.1);
}

.ai-drag-handle:active {
    cursor: grabbing;
}

 Icon inside handle shouldn't intercept mouse events — let SortableJS see the handle
.ai-drag-handle i,
.ai-drag-handle svg {
    pointer-events: none;
}

 While SortableJS is dragging, disable text selection on the whole preview
.ai-preview-content.is-dragging,
.ai-preview-content.is-dragging * {
    user-select: none !important;
    -webkit-user-select: none !important;
}

 SortableJS states (no longer used — kept for compat)
.ai-sortable-ghost {
    opacity: 0.3;
    background: #f3eef7;
}

.ai-sortable-chosen {
    outline: 2px solid #6d468c !important;
}

 Native HTML5 drag state — section being dragged
.ai-dragging {
    opacity: 0.4 !important;
    outline-color: #6d468c !important;
    background: rgba(109, 70, 140, 0.05) !important;
}
*/

/* Content type counts (pages/assignments/discussions) */
.ai-content-counts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-content-count-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.ai-content-count-label {
    font-size: 0.85rem;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.ai-content-count-label i {
    color: #6d468c;
    width: 18px;
    text-align: center;
}

.ai-count-auto-hint {
    margin-left: 6px;
    font-size: 0.7rem;
    font-weight: 500;
    color: #6b7280;
    background: #f3f4f6;
    padding: 1px 6px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-count-reset-link {
    margin-left: 6px;
    font-size: 0.7rem;
    font-weight: 500;
    color: #6d468c;
    cursor: pointer;
    text-decoration: underline;
}

.ai-count-reset-link:hover {
    color: #553573;
}

.ai-count-stepper {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ai-count-stepper button {
    width: 24px;
    height: 24px;
    border: 1px solid #d1d5db;
    background: #fff;
    border-radius: 4px;
    color: #374151;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    transition: all 0.15s ease;
}

.ai-count-stepper button:hover {
    background: #f3eef7;
    border-color: #6d468c;
    color: #6d468c;
}

.ai-count-stepper input {
    width: 40px;
    height: 24px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    text-align: center;
    font-size: 0.85rem;
    color: #374151;
    -moz-appearance: textfield;
}

.ai-count-stepper input::-webkit-outer-spin-button,
.ai-count-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 12081: arrange mode removed from Lotty per client request.
   Arrange-mode hint banner, arrange render gutter, and the Rearrange button
   active state. Inner comment delimiters were stripped so this block nests.

 Arrange mode hint banner above the generated content
.ai-arrange-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin: 0 0 12px 0;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    color: #92400e;
    font-size: 0.85rem;
}

.ai-arrange-hint i {
    color: #f59e0b;
    flex-shrink: 0;
}

 The arrange-mode render leaves a left gutter for the drag handles
.ai-arrange-render {
    padding-left: 8px;
}

 The Rearrange button in active state
.ai-copy-btn.is-active {
    background: #6d468c !important;
    color: #fff !important;
    border-color: #6d468c !important;
}
*/

/* =============================================================
   Chat (agentic refinement) section
   ============================================================= */
.ai-chat-section {
    display: flex;
    flex-direction: column;
    padding: 12px 16px 16px;
    border-top: 1px solid #e5e7eb;
    background: #fafbfc;
    gap: 10px;
}

.ai-chat-history {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
    padding: 2px 2px;
}

.ai-chat-message {
    display: flex;
    width: 100%;
}

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

.ai-chat-message-assistant {
    justify-content: flex-start;
}

.ai-chat-bubble {
    max-width: 78%;
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 0.78rem;
    line-height: 1.4;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.ai-chat-message-user .ai-chat-bubble {
    background: #6d468c;
    color: #fff;
    border-bottom-right-radius: 4px;
}

.ai-chat-message-assistant .ai-chat-bubble {
    background: #fff;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    border-bottom-left-radius: 4px;
}

.ai-chat-bubble-text {
    white-space: pre-wrap;
    font-size: 0.78rem;
    line-height: 1.4;
}

.ai-chat-bubble-text p,
.ai-chat-bubble-text span,
.ai-chat-bubble-text div,
.ai-chat-bubble-text li {
    font-size: inherit !important;
    line-height: inherit !important;
    margin: 0 0 4px 0;
}

.ai-chat-bubble-text p:last-child,
.ai-chat-bubble-text div:last-child {
    margin-bottom: 0;
}

/* Tool activity rows inside an assistant bubble */
.ai-chat-tool-activity {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ai-chat-tool-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: #6b7280;
}

.ai-chat-tool-row.is-running {
    color: #92400e;
}

.ai-chat-tool-row.is-done {
    color: #047857;
}

.ai-chat-tool-row.is-error {
    color: #b91c1c;
}

.ai-chat-tool-row i {
    width: 14px;
    text-align: center;
}

/* Typing indicator (3 bouncing dots) shown while assistant is thinking */
.ai-chat-typing {
    display: inline-flex;
    gap: 4px;
    padding: 4px 0;
}

.ai-chat-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9ca3af;
    animation: ai-chat-bounce 1s infinite ease-in-out;
}

.ai-chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.ai-chat-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes ai-chat-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
    40% { transform: translateY(-4px); opacity: 1; }
}

/* Input row */
.ai-chat-input-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.ai-chat-input {
    flex: 1;
    min-height: 34px;
    max-height: 100px;
    padding: 7px 12px;
    border: 1px solid #d1d5db;
    border-radius: 18px;
    font-size: 0.8rem;
    font-family: inherit;
    resize: none;
    outline: none;
    transition: border-color 0.15s ease;
    background: #fff;
}

.ai-chat-input:focus {
    border-color: #6d468c;
    box-shadow: 0 0 0 3px rgba(109, 70, 140, 0.12);
}

.ai-chat-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #6d468c;
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    flex-shrink: 0;
}

.ai-chat-send-btn:hover:not(:disabled) {
    background: #553573;
    transform: scale(1.05);
}

.ai-chat-send-btn:disabled {
    background: #d1d5db;
    cursor: not-allowed;
}

/* 12081 phase-2: "Undo last AI change" — a quiet text button above the chat
   input, deliberately understated so it never competes with Send. */
.ai-chat-undo-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
    /* 12081 phase-5 redo: the row carries the undo/redo pair. The n-1 toggle
       makes exactly one of them present at a time, so this gap is defensive —
       it only matters if both snapshots are ever armed together, which the
       current design cannot produce but a future history stack would. */
    gap: 6px;
}

.ai-chat-undo-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid #e0d1ec;
    border-radius: 6px;
    background: #fff;
    color: #6d468c;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ai-chat-undo-btn:hover:not(:disabled) {
    background: #f3eef7;
    border-color: #6d468c;
}

.ai-chat-undo-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* "Add All to Course" button in the items list header */
.ai-add-all-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff !important;
}

.ai-add-all-btn i,
.ai-add-all-btn .fas,
.ai-add-all-btn .fa {
    color: #fff !important;
}

.ai-add-all-count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
}

/* 12081 fix: "Added" badge on generated items that have reached a course, so a
   partial add is visible instead of silent. */
.ai-item-added-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #d1fae5;
    color: #065f46;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}
.ai-item-added-badge i {
    font-size: 0.65rem;
}

/* 12081 phase-3.5: a page that was regenerated AFTER being added to a course.
   Same pill geometry as the Added badge it replaces, in amber — the course
   still holds the older content until the teacher adds it again. */
.ai-item-stale-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: help;
}
.ai-item-stale-badge i {
    font-size: 0.65rem;
}

/* 12081 phase-3.5: retry button on a failed page card. Sits inside the card's
   blurb row, so it must not inherit the card's click target — the handler calls
   stopPropagation. Styled as a compact inline action, not a primary button:
   retrying is a recovery, not the main path. */
.ai-item-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid #0074C5;
    border-radius: 12px;
    background: #ffffff;
    color: #0074C5;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.ai-item-retry-btn:hover {
    background: #0074C5;
    color: #ffffff;
}
.ai-item-retry-btn i {
    font-size: 0.68rem;
}

/* 12081 phase-3: "Page 2 of 6" on page items. Same pill geometry as the type
   and added badges, in the neutral workspace purple so it reads as position
   rather than status. Hidden entirely on single-page lessons. */
.ai-item-page-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    background: #f3eef7;
    color: #6d468c;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}

/* 12081 phase-3: outline-degraded notice. Reuses .ai-items-unadded-hint for the
   pill itself; these only add the dismiss affordance. */
.ai-lesson-warning-text {
    flex: 1;
}

.ai-lesson-warning-dismiss {
    border: none;
    background: transparent;
    color: #92400e;
    cursor: pointer;
    padding: 0 2px;
    font-size: 0.75rem;
    opacity: 0.7;
    flex-shrink: 0;
}

.ai-lesson-warning-dismiss:hover {
    opacity: 1;
}

/* 12081 fix: hint under the items-list header when some items are still un-added */
.ai-items-unadded-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    padding: 6px 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    color: #92400e;
    font-size: 0.75rem;
}
.ai-items-unadded-hint i {
    color: #f59e0b;
    flex-shrink: 0;
}

/* 12081 fix: warning in the Add-to-Course success panel when other generated
   items have not been added yet */
.ai-atc-unadded-warning {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 8px 0 0;
    padding: 8px 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    color: #92400e;
    font-size: 0.78rem;
    text-align: left;
    line-height: 1.4;
}
.ai-atc-unadded-warning i {
    color: #f59e0b;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Bulk modal — list of items to be added */
.ai-atc-bulk-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px;
    background: #fafbfc;
}

.ai-atc-bulk-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #f3f4f6;
}

.ai-atc-bulk-item-title {
    flex: 1;
    font-size: 0.85rem;
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-atc-bulk-item-points {
    background: #fef3c7;
    color: #92400e;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
}

/* Bulk modal results */
.ai-atc-bulk-results {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
    margin-bottom: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px;
    background: #fafbfc;
}

.ai-atc-bulk-result-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #d1fae5;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #065f46;
}

.ai-atc-bulk-result-row.is-error {
    background: #fee2e2;
    color: #991b1b;
}

.ai-atc-bulk-result-row > i {
    flex-shrink: 0;
}

.ai-atc-bulk-result-type {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.75;
}

.ai-atc-bulk-result-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-atc-bulk-result-error {
    font-size: 0.75rem;
    font-style: italic;
}

/* Multi-item generated items list view */
.ai-items-list-wrap {
    padding: 0;
}

.ai-items-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    color: #374151;
    font-weight: 600;
    font-size: 0.95rem;
}

.ai-items-list-header i {
    color: #6d468c;
    margin-right: 8px;
}

.ai-items-list-count {
    font-size: 0.8rem;
    font-weight: 500;
    color: #6b7280;
    background: #f3f4f6;
    padding: 3px 10px;
    border-radius: 12px;
}

.ai-items-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ai-item-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.ai-item-card:hover {
    border-color: #6d468c;
    box-shadow: 0 4px 12px rgba(109, 70, 140, 0.12);
    transform: translateY(-1px);
}

.ai-item-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.ai-item-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 12px;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.ai-item-card-title {
    flex: 1;
    font-weight: 600;
    color: #1f2937;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-item-card-points {
    background: #fef3c7;
    color: #92400e;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
}

.ai-item-card-arrow {
    color: #9ca3af;
    font-size: 0.85rem;
    transition: transform 0.15s ease;
}

.ai-item-card:hover .ai-item-card-arrow {
    color: #6d468c;
    transform: translateX(2px);
}

.ai-item-card-blurb {
    font-size: 0.82rem;
    color: #6b7280;
    line-height: 1.4;
    padding-left: 4px;
}

/* Truncation notice on an item card (list view) */
.ai-item-card-warning {
    font-size: 0.78rem;
    color: #92400e;
    line-height: 1.4;
    padding-left: 4px;
    margin-top: 4px;
}

.ai-item-card-warning i {
    margin-right: 4px;
    color: #d97706;
}

/* Truncation banner shown above an open item's content (detail view) */
.ai-item-warning-banner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 12px 0;
    padding: 10px 12px;
    background-color: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #92400e;
    line-height: 1.45;
}

.ai-item-warning-banner i {
    margin-top: 2px;
    color: #d97706;
}

/* Item-view wrapper: flex column so the header is structurally always at top
   and only the content area below it scrolls. */
.ai-item-view-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.ai-item-view-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

/* Item detail header: pinned at top by the flex layout, never scrolls away */
.ai-item-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 0;
    flex-wrap: wrap;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    flex: 0 0 auto;
}

.ai-back-to-list-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ai-back-to-list-btn:hover {
    background: #f3eef7;
    border-color: #6d468c;
    color: #6d468c;
}

.ai-item-detail-title {
    font-weight: 600;
    color: #1f2937;
    font-size: 0.95rem;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-item-detail-add-btn {
    margin-left: auto;
    flex-shrink: 0;
}

/* Item status badges (pending / generating / done / error) */
.ai-item-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-left: auto;
    flex-shrink: 0;
}

.ai-item-status-pending .ai-item-status-badge,
.ai-item-card.ai-item-status-pending .ai-item-status-badge {
    background: #f3f4f6;
    color: #6b7280;
}

.ai-item-status-generating .ai-item-status-badge,
.ai-item-card.ai-item-status-generating .ai-item-status-badge {
    background: #fef3c7;
    color: #92400e;
}

.ai-item-status-done .ai-item-status-badge,
.ai-item-card.ai-item-status-done .ai-item-status-badge {
    background: #d1fae5;
    color: #047857;
}

.ai-item-status-error .ai-item-status-badge,
.ai-item-card.ai-item-status-error .ai-item-status-badge {
    background: #fee2e2;
    color: #b91c1c;
}

/* Card-level visual state for in-progress items */
.ai-item-card.ai-item-status-generating {
    border-color: #fde68a;
    background: linear-gradient(180deg, #fffbeb 0%, #fff 60%);
}

.ai-item-card.ai-item-status-pending {
    opacity: 0.65;
}

.ai-item-card.ai-item-status-error {
    border-color: #fecaca;
    background: linear-gradient(180deg, #fef2f2 0%, #fff 60%);
}

/* Live preview pane (when viewing an in-progress item). The container scrolls;
   the auto-scroll-bottom directive keeps the view glued to the latest content
   unless the user scrolls up. */
.ai-item-live-preview {
    position: relative;
    overflow-y: auto;
    max-height: calc(100vh - 280px);
}

.ai-item-streaming-indicator {
    position: sticky;
    bottom: 12px;
    margin: 14px auto 0;
    width: fit-content;
    padding: 8px 16px;
    background: #6d468c;
    color: #fff;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(109, 70, 140, 0.25);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-item-streaming-indicator i {
    color: #fff;
}

/* Media placeholders shown during streaming (real media is restored when done) */
.ai-streaming-media-placeholder {
    display: inline-block;
    padding: 24px 18px;
    margin: 8px 0;
    background: #f3f4f6;
    border: 1px dashed #9ca3af;
    border-radius: 8px;
    color: #6b7280;
    font-size: 0.85rem;
    font-style: italic;
    text-align: center;
    min-width: 200px;
}

.ai-streaming-image-placeholder {
    display: inline-block;
    min-width: 80px;
    min-height: 60px;
    background: #f3f4f6;
    border: 1px dashed #d1d5db;
    border-radius: 6px;
    color: #9ca3af;
    font-size: 0.7rem;
    text-align: center;
    vertical-align: middle;
    line-height: 60px;
}

.ai-streaming-image-placeholder::after {
    content: "🖼️";
}

/* 12081: video feature removed from Lotty per client request.
   Video URL Toggle + Input
.ai-video-toggle {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.ai-video-btn {
    flex: 1;
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ai-video-btn:hover {
    background: #f3eef7;
    border-color: #6d468c;
}

.ai-video-btn.active {
    background: #6d468c;
    color: #fff;
    border-color: #6d468c;
    box-shadow: 0 2px 8px rgba(109, 70, 140, 0.25);
}

.ai-video-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.78rem;
    color: #374151;
    background: #fff;
    outline: none;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

.ai-video-input:focus {
    border-color: #6d468c;
    box-shadow: 0 0 0 2px rgba(109, 70, 140, 0.1);
}
*/

/* Output Content */
.ai-output-content {
    /*flex: 1;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;*/
}

.ai-editor-wrapper {
    flex: 1;
    min-width: 0;
}

.ai-editor-wrapper #multi-input {
    width: 100%;
}

.ai-editor-wrapper .fr-box {
    min-height: 300px;
}

.ai-editor-wrapper .fr-wrapper {
    min-height: 250px;
}

/* =========================================================================
   Lotty editor — course-component render parity (Round 3, corrected)

   Generated lesson HTML renders correctly in the Rearrange view (a plain
   bind-unsafe-html div in normal app DOM) but degrades inside Froala's
   editable surface (.fr-element / .fr-view). Class-based CSS DOES apply there
   (CSS :hover works, so the hover-card reveal flips correctly) — what's lost
   is the layout that the generated markup drives through INLINE styles:
     • .nzr-hover-cards-box carries `--nzr-hover-card-width` inline → the cards'
       width; without it they size oddly and wrap unevenly (the "2-1-1" wrap).
     • .nzr-hover-card-front has NO class rule at all — its parchment background
       and min-height live only on the inline style, so the front collapses.
     • .nzr-hover-card-overlay gets `display:flex; align-items:center` inline →
       vertically-centered overlay text; without it the text top-aligns.
   These rules reproduce the REAL component CSS (values copied from css/style.css)
   as class rules with sensible fallbacks, scoped to the Lotty editor only
   (`.ai-editor-wrapper` is used by no other editor in the app). Specificity
   `.ai-editor-wrapper .fr-element ...` (>= 0,3,0) beats Froala's own
   `.fr-element` base rules regardless of stylesheet load order.

   IN scope: CSS-driven interactions (the hover reveal is preserved — it is a
   CSS :hover, not JS). NOT restored (JS behaviors that legitimately do not run
   in a contenteditable): carousel motion, tab switching, modal/collapse toggles.
   Parity here means: hover-card fronts show the parchment art in a correct grid,
   the hover reveal still works with vertically-centered overlay text, and the
   nzr pill buttons render as pills — matching a real course page at rest.
   ========================================================================= */

/* Keep Froala's editable base typography from tinting component text/fonts. */
.ai-editor-wrapper .fr-element {
    font-family: inherit;
    color: inherit;
}

/* Hover-cards container — flex-wrap row of fixed-width cards (real markup uses
   .nzr-hover-cards-box / .nzr-hover-card, NOT .nzr-3dFlipBox). */
.ai-editor-wrapper .fr-element .nzr-hover-cards-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}
/* Card width comes from an inline `--nzr-hover-card-width` on the box; add a
   340px fallback so cards keep a sane width (and wrap evenly) even if that
   inline custom property doesn't resolve in this context. */
.ai-editor-wrapper .fr-element .nzr-hover-card {
    width: var(--nzr-hover-card-width, 340px);
    flex: 0 0 auto;
}
.ai-editor-wrapper .fr-element .nzr-hover-card-content {
    background-color: #fff;
    border-radius: 15px;
    max-width: 370px;
    padding: 14px;
}
.ai-editor-wrapper .fr-element .nzr-hover-card-border {
    border-radius: 16px;
    overflow: hidden;
}
.ai-editor-wrapper .fr-element .nzr-hover-card-body {
    position: relative;
    overflow: hidden;
    width: 100%;
    border-radius: 0 0 14px 14px;
}
/* Front layer has no class-based rule in the app — reproduce its box so the
   inline parchment background renders at full size instead of collapsing to a
   dark strip. The per-card background url() stays on the inline style. */
.ai-editor-wrapper .fr-element .nzr-hover-card-front {
    min-height: 150px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
/* Overlay — absolute full-cover, hidden at rest, revealed on hover. The hover
   reveal is a CSS :hover and MUST keep working, so opacity is left un-!important
   and the :hover / aria-expanded rules stay. Re-assert the flex centering the
   inline style provides so overlay text is vertically centered, not top-aligned. */
.ai-editor-wrapper .fr-element .nzr-hover-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    overflow: auto;
    transition: 0.5s ease;
    display: flex !important;
    align-items: center !important;
    justify-content: center;
}
.ai-editor-wrapper .fr-element .nzr-hover-card-overlay:hover,
.ai-editor-wrapper .fr-element .nzr-hover-card[aria-expanded="true"] .nzr-hover-card-overlay {
    opacity: 1;
}
.ai-editor-wrapper .fr-element .nzr-hover-card-text {
    font-size: 18px;
    line-height: 1.5;
    padding: 30px;
    text-align: center;
}

/* Buttons — real markup uses .nzr-button (+ the .nzr-ag-btn image pill), NOT
   Bootstrap .btn. Reproduce them so "Check Your Answer" / "Learn more" render
   as the styled pill rather than bare text. Values copied from css/style.css;
   the relative image url resolves the same from _ai-workspace/ as from css/. */
.ai-editor-wrapper .fr-element .nzr-button {
    display: inline-block;
    border: 0;
    border-radius: 10px;
    padding: 12px 27px;
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.ai-editor-wrapper .fr-element .nzr-button-sm {
    padding: 6px 21px;
}
.ai-editor-wrapper .fr-element .nzr-ag-btn {
    background: url(../__courses-components/img/Sci/ag-button.png) no-repeat 50% transparent;
    background-size: 100% 100%;
    color: black;
    font-size: 20px;
    line-height: 1;
}
.ai-editor-wrapper .fr-element .nzr-ag-btn:hover {
    background-image: url(../__courses-components/img/Sci/ag-button-hover.png);
}

/* Streaming Preview */
.ai-streaming-preview {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    overflow-anchor: none;
}

.ai-streaming-preview img {
    /* Prevent images from causing layout shifts while loading */
    max-width: 100%;
    height: auto;
}

/* Output Loading */
.ai-output-loading {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ai-output-loading i {
    font-size: 2rem;
    color: #6d468c;
    margin-bottom: 16px;
}

.ai-output-loading p {
    color: #666;
}

/* Empty State */
.ai-empty-state {
    text-align: center;
    padding: 20px;
    color: #aaa;
}

.ai-empty-state i {
    font-size: 1.5rem;
    margin-bottom: 8px;
}

/* Badge */
.ai-badge {

    color: #666;
    background: #eee;
    padding: 2px 8px;
    border-radius: 10px;
}

/* Spinner */
.ai-loading-spinner {
    animation: spin 1s linear infinite;
}

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

/* Feedback Section */
.ai-feedback-section {
    margin-top: 16px;
    padding: 18px;
    border-top: 1px solid #eee;
}

.ai-feedback-input-row {
    display: flex;
    gap: 8px;
}

.ai-feedback-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 20px;
    transition: border-color 0.15s ease;
}

.ai-feedback-input:focus {
    outline: none;
    border-color: #6d468c;
}

.ai-feedback-input::placeholder {
    color: #bbb;
}

.ai-feedback-input:disabled {
    background: #f9f9f9;
    cursor: not-allowed;
}

.ai-feedback-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #6d468c;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.ai-feedback-btn:hover:not(:disabled) {
    background: #5a3775;
}

.ai-feedback-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* Mode Toggle */
.ai-mode-toggle {
    display: flex;
    gap: 2px;
    background: #f0f0f0;
    padding: 3px;
    border-radius: 6px;
    flex-shrink: 0;
}

.ai-mode-btn {
    padding: 6px 10px;
    border: none;
    background: transparent;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    color: #888;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ai-mode-btn:hover:not(.active) {
    background: #e5e5e5;
}

.ai-mode-btn.active {
    background: #fff;
    color: #333;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.ai-mode-btn.active.smart-mode {
    color: #7c3aed;
}

.ai-mode-btn.active.fast-mode {
    color: #059669;
}

/* Feedback History */
.ai-feedback-history {
    max-height: 100px;
    overflow-y: auto;
    margin-bottom: 10px;
}

.ai-history-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #f5f5f5;
    border-radius: 6px;
    margin-bottom: 6px;
    color: #555;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ai-history-item:hover {
    background: #eee;
}

.ai-history-item i {
    color: #aaa;

}

.ai-history-item span {
    flex: 1;
}

.ai-history-item .ai-revert-icon {
    opacity: 0;
    color: #888;
}

.ai-history-item:hover .ai-revert-icon {
    opacity: 1;
}

.ai-history-item.ai-history-initial {
    background: #f3eef7;
}

.ai-history-item.ai-history-initial i:first-child {
    color: #6d468c;
}

/* Placeholder Content */
.ai-placeholder-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    text-align: center;
}

.ai-placeholder-content i {
    font-size: 3rem;
    color: #ddd;
    margin-bottom: 16px;
}

.ai-placeholder-content h3 {
    color: #999;
    font-weight: 500;
    margin-bottom: 8px;
}

.ai-placeholder-content p {
    color: #bbb;
}

/* Module Content */
.ai-module-content {
    display: none;
}

.ai-module-content.active {
    display: flex;
    flex: 1;
    gap: 18px;
    height: 100%;
}

/* Modal */
.ai-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.ai-modal {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    width: 90%;
}

.ai-modal-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-modal-header i {
    color: #f59e0b;
    font-size: 1.2rem;
}

.ai-modal-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.ai-modal-body {
    padding: 20px;
}

.ai-modal-body p {
    margin: 0 0 12px 0;
    color: #555;
    line-height: 1.5;
}

.ai-modal-body .ai-revert-text {
    background: #f5f5f5;
    padding: 10px 12px;
    border-radius: 6px;
    color: #333;
}

.ai-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.ai-modal-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background 0.15s ease;
}

.ai-modal-btn-cancel {
    background: #f0f0f0;
    color: #555;
}

.ai-modal-btn-cancel:hover {
    background: #e5e5e5;
}

.ai-modal-btn-confirm {
    background: #ef4444;
    color: #fff;
}

.ai-modal-btn-confirm:hover {
    background: #dc2626;
}

/* Responsive */
@media (max-width: 992px) {
    .ai-main {
        flex-direction: column;
    }
    .ai-config-panel {
        flex: none;
        border-right: none;
        border-bottom: 1px solid #eee;
    }
    .ai-tool-tabs {
        flex-wrap: wrap;
    }
}

/* ============================================ */
/* Response Analysis Module                     */
/* ============================================ */

.ra-container {
    flex: 1;
    width: 100%;
    /*background: #f0f2f5;*/
    padding: 28px 32px;
    overflow-y: auto;

}

.ra-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.ra-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ra-header-left i {
    font-size: 1rem;
    color: #6b7280;
}

.ra-title {
    font-weight: 700;
    color: #374151;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.ra-filters-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.ra-filter-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ra-filter-group label {

    font-weight: 600;
    color: #6b7280;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ra-search-wrapper {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.ra-search-input {
    width: 100%;
    padding: 8px 14px 8px 32px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;

    color: #374151;
    outline: none;
    min-height: 36px;
    transition: border-color 0.15s ease;
}

.ra-search-input:focus {
    border-color: #6d468c;
    box-shadow: 0 0 0 2px rgba(109,70,140,0.1);
}

.ra-search-input::placeholder {
    color: #9ca3af;
}

.ra-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;

    pointer-events: none;
}

.ra-search-spinner {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;

}

.ra-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    margin-top: 4px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.ra-search-results .ra-menu-item .ra-student-school {

    color: #9ca3af;
    margin-left: 8px;
    flex-shrink: 0;
    white-space: nowrap;
}



/* RA Dropdowns */
.ra-dropdown {
    position: relative;
}

.ra-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;

    color: #374151;
    cursor: pointer;
    min-width: 160px;
    max-width: 220px;
    transition: border-color 0.15s ease;
}

.ra-dropdown-trigger:hover {
    border-color: #9ca3af;
}

.ra-dropdown-trigger.disabled {
    background: #f9fafb;
    cursor: not-allowed;
    color: #9ca3af;
}

.ra-dropdown-trigger .ra-trigger-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ra-dropdown-trigger .ra-arrow {
    color: #9ca3af;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.ra-dropdown-trigger.open .ra-arrow {
    transform: rotate(180deg);
}

.ra-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    margin-top: 4px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.ra-menu-item {
    padding: 10px 14px;

    cursor: pointer;
    transition: background 0.1s ease;
    color: #374151;
}

.ra-menu-item:hover {
    background: #f3f4f6;
}

.ra-menu-item.selected {
    background: #f3eef7;
    color: #5a3775;
}

.ra-menu-empty {
    padding: 14px;
    color: #9ca3af;
    text-align: center;

}

/* Analyze Button */
.ra-analyze-btn-group {
    display: flex;
    position: relative;
}

.ra-analyze-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #059669;
    color: #fff;
    border: none;
    border-radius: 8px 0 0 8px;

    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ra-analyze-btn:hover:not(:disabled) {
    background: #047857;
}

.ra-analyze-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ra-analyze-split-btn {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    background: #059669;
    color: #fff;
    border: none;
    border-left: 1px solid rgba(255,255,255,0.25);
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ra-analyze-split-btn:hover {
    background: #047857;
}

.ra-submissions-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 280px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    margin-top: 4px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.ra-submissions-menu .ra-menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ra-sub-date {
    color: #9ca3af;

    flex-shrink: 0;
    margin-left: 12px;
}

/* Stats Row */
.ra-stats-row {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.ra-stat-card {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid #e5e7eb;
}

.ra-stat-card.green-bg {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: transparent;
}

.ra-stat-card.red-bg {
    background: linear-gradient(135deg, #f87171, #dc2626);
    border-color: transparent;
}

.ra-stat-card.red-bg .ra-stat-value,
.ra-stat-card.red-bg .ra-stat-label {
    color: #fff;
}

.ra-stat-card.red-bg .ra-stat-label {
    color: rgba(255,255,255,0.85);
}

.ra-stat-card.gray-bg {
    background: #f3f4f6;
    border-color: #e5e7eb;
}

.ra-stat-card.risk-medium {
    border-color: #f59e0b;
}

.ra-stat-card.risk-medium .ra-stat-value {
    color: #d97706;
}

.ra-stat-card.risk-high {
    border-color: #ef4444;
}

.ra-stat-card.risk-high .ra-stat-value {
    color: #dc2626;
}

.ra-stat-card.risk-low .ra-stat-value {
    color: #059669;
}

.ra-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

.ra-stat-card.green-bg .ra-stat-value {
    color: #fff;
}

.ra-stat-label {
    font-weight: 600;
    color: #9ca3af;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: 6px;
}

.ra-stat-card.green-bg .ra-stat-label {
    color: rgba(255,255,255,0.85);
}

/* Sections */
.ra-section {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid #e5e7eb;
}

.ra-section:last-child {
    margin-bottom: 0;
}

.ra-section-title {

    font-weight: 700;
    color: #6b7280;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ra-section-title i {

}

/* Score Trend Chart */
.ra-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 170px;
    padding: 0 10px;
}

.ra-bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 90px;
}

.ra-bar-label {

    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.ra-bar {
    width: 160px;
    border-radius: 6px 6px 0 0;
    min-height: 4px;
    transition: height 0.6s ease;
}

.ra-bar-month {

    color: #9ca3af;
    margin-top: 10px;
    font-weight: 500;
}

.ra-bar-month.current {
    color: #059669;
    font-weight: 700;
}

/* Similarity Check */
.ra-check-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid #f3f4f6;
}

.ra-check-item:first-child {
    padding-top: 0;
}

.ra-check-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ra-check-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

}

.ra-check-icon.pass {
    background: #d1fae5;
    color: #059669;
}

.ra-check-icon.fail {
    background: #fee2e2;
    color: #dc2626;
}

.ra-check-icon.info {
    background: #e0d1ec;
    color: #5a3775;
}

.ra-check-text h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 3px 0;
}

.ra-check-text p {

    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

/* Growth Areas */
.ra-growth-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid #f3f4f6;
}

.ra-growth-item:first-child {
    padding-top: 0;
}

.ra-growth-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ra-growth-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

}

.ra-growth-icon.up {
    background: #d1fae5;
    color: #059669;
}

.ra-growth-icon.down {
    background: #fee2e2;
    color: #dc2626;
}

.ra-growth-icon.neutral {
    background: #f3f4f6;
    color: #9ca3af;
}

.ra-growth-text h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 3px 0;
}

.ra-growth-text p {

    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

/* RA Empty / Loading States */
.ra-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
    text-align: center;
}

.ra-empty-state i {
    font-size: 3rem;
    color: #d1d5db;
    margin-bottom: 16px;
}

.ra-empty-state h3 {
    color: #6b7280;
    font-weight: 500;
    font-size: 1.1rem;
    margin: 0 0 8px 0;
}

.ra-empty-state p {
    color: #9ca3af;
    font-size: 0.9rem;
    margin: 0;
}

@media (max-width: 768px) {
    .ra-container {
        padding: 20px 16px;
    }
    .ra-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .ra-filters-row {
        flex-direction: column;
        align-items: stretch;
    }
    .ra-stats-row {
        flex-wrap: wrap;
    }
    .ra-stat-card {
        min-width: calc(50% - 12px);
    }
    .ra-chart {
        height: 140px;
    }
    .ra-bar {
        width: 40px;
    }
}

/* ============================================ */
/* Suggestion Chips                             */
/* ============================================ */
.ai-suggestions {
    margin-top: 10px;
}

/* 12081: Lesson Length page-count selector (1-10). Slider for the full-page
   workspace, styled to match the Reading Level slider below; compact stepper for
   the side panel and Froala modal, where there is no room for a slider row. */
.ai-length-level {
    margin-bottom: 16px;
}
.ai-length-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}
.ai-length-label-min,
.ai-length-label-max {
    font-size: 0.75rem;
    font-weight: 600;
    color: #888;
    white-space: nowrap;
    min-width: 28px;
}
.ai-length-label-max {
    text-align: right;
}
.ai-length-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: #e0d1ec;
    outline: none;
    cursor: pointer;
}
.ai-length-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #6d468c;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.ai-length-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #6d468c;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.ai-length-value {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6d468c;
    margin-top: 6px;
}

/* 12081: compact page-count stepper (side panel + Froala modal) */
.ai-length-stepper-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
}
.ai-length-stepper-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6d468c;
}
.ai-length-stepper {
    display: flex;
    align-items: center;
    gap: 4px;
}
.ai-length-stepper button {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #e0d1ec;
    border-radius: 6px;
    background: #fff;
    color: #6d468c;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.ai-length-stepper button:hover:not([disabled]) {
    background: #f3eef7;
    border-color: #6d468c;
}
.ai-length-stepper button[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}
.ai-length-stepper-value {
    min-width: 26px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
}

/* 12081: replaced by the page-count selector above.
   Lesson Length Toggle
.ai-length-toggle {
    display: flex;
    gap: 6px;
    margin-bottom: 4px;
}
.ai-length-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 6px;
    border: 1.5px solid #e0d1ec;
    border-radius: 8px;
    background: #fff;
    color: #6d468c;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.ai-length-btn:hover {
    background: #f3eef7;
    border-color: #6d468c;
}
.ai-length-btn.active {
    background: #6d468c;
    color: #fff;
    border-color: #6d468c;
    box-shadow: 0 2px 8px rgba(109, 70, 140, 0.25);
}
.ai-length-btn i {
    font-size: 0.85rem;
}
.ai-length-hint {
    font-size: 0.65rem;
    font-weight: 400;
    opacity: 0.7;
}
*/

.ai-suggestions-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #999;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 8px;
}
/* Grade level slider */
.ai-grade-level {
    margin-bottom: 16px;
}
.ai-grade-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}
.ai-grade-label-min,
.ai-grade-label-max {
    font-size: 0.75rem;
    font-weight: 600;
    color: #888;
    white-space: nowrap;
    min-width: 28px;
}
.ai-grade-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: #e0d1ec;
    outline: none;
    cursor: pointer;
}
.ai-grade-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #6d468c;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.ai-grade-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #6d468c;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.ai-grade-value {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6d468c;
    margin-top: 6px;
}

.ai-suggestion-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ai-suggestion-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid #e0d1ec;
    border-radius: 20px;
    background: #fff;
    color: #6d468c;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s ease;
    font-weight: 500;
}
.ai-suggestion-chip:hover {
    background: #f3eef7;
    border-color: #6d468c;
}
.ai-suggestion-chip i {
    font-size: 0.7rem;
    opacity: 0.7;
}

/* ============================================ */
/* Lotty Chat Bubble (Empty State)              */
/* ============================================ */
.ai-lotty-intro {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 400px;
}
.ai-lotty-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ai-lotty-bubble {
    background: #f3eef7;
    border-radius: 0 16px 16px 16px;
    padding: 14px 18px;
    color: #4a2d66;
    font-size: 0.9rem;
    line-height: 1.5;
    box-shadow: 0 2px 8px rgba(109, 70, 140, 0.1);
}
.ai-lotty-bubble p {
    margin: 0;
}



/* ============================================ */
/* Water / Bubble Animations (Lotty)            */
/* ============================================ */

/* Lotty avatar pulse glow */
.ai-lotty-avatar {
    animation: lottyFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 4px 12px rgba(109, 70, 140, 0.3));
}
@keyframes lottyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Lotty intro container with floating bubbles */
.ai-lotty-intro {
    position: relative;
}
.ai-lotty-intro::before,
.ai-lotty-intro::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(109, 70, 140, 0.08);
    animation: bubbleFloat 4s ease-in-out infinite;
}
.ai-lotty-intro::before {
    width: 14px;
    height: 14px;
    top: -10px;
    left: 10px;
    animation-delay: 0s;
}
.ai-lotty-intro::after {
    width: 8px;
    height: 8px;
    top: -5px;
    right: 30px;
    animation-delay: 1.5s;
    animation-duration: 3s;
}
@keyframes bubbleFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; }
    50% { transform: translateY(-12px) scale(1.15); opacity: 1; }
}

/* Generate button active state while generating */
.ai-generate-btn:disabled {
    opacity: 0.85;
    background: linear-gradient(135deg, #5a3775, #7a4fad);
}


/* ============================================ */
/* Generating Progress Bar                      */
/* ============================================ */
/* Progress bar — water wave effect (from Axol, purple palette) */
.ai-generating-progress {
    padding: 6px 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    color: #92400e;
    font-size: 0.8rem;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-generating-progress i {
    color: #f59e0b;
}

.ai-generating-bar {

}
.ai-generating-bar {
    position: sticky;
    top: 0;
    overflow: hidden;
    z-index: 99999;
    background: linear-gradient(135deg, #f3eef7, #ede5f5);

}
.ai-generating-steps {
    display: flex;
    gap: 16px;
    align-items: center;
    border-radius: 8px;
    padding: 10px 16px;
    background:
        linear-gradient(90deg,
        rgba(243,238,247,0.0) 0%,
        rgba(224,209,236,0.5) 20%,
        rgba(189,162,215,0.4) 40%,
        rgba(139,95,191,0.3) 55%,
        rgba(189,162,215,0.4) 70%,
        rgba(224,209,236,0.5) 85%,
        rgba(243,238,247,0.0) 100%
        );
    background-size: 250% 100%;
    animation: lottySwimShimmer 2.5s ease-in-out infinite;
}
.ai-gen-step {
    display: flex;
    align-items: center;
    gap: 5px;
    /*font-size: 0.82rem;*/
    color: #999;
    font-weight: 500;
}
.ai-gen-step.active {
    color: #6d468c;
    font-weight: 600;
}
.ai-gen-step.done {
    color: #299393;
}
.ai-gen-step i {
    /*font-size: 0.55rem;*/
}
.ai-refine-content{
    position: sticky;
    z-index: 99999;
    border-radius: 8px;
    overflow: hidden;
    padding: 10px 16px;
    bottom: -24px;
    margin: 1px;
    font-weight: 600;
    background: linear-gradient(135deg, #f3eef7, #ede5f5);
    color: #6d468c;
    &:after{
        position: absolute;
        inset: 0;
        z-index: -1;
        width: 100%;
        height:100%;
        content: '';
        background:
            linear-gradient(90deg,
            rgba(243,238,247,0.0) 0%,
            rgba(224,209,236,0.5) 20%,
            rgba(189,162,215,0.4) 40%,
            rgba(139,95,191,0.3) 55%,
            rgba(189,162,215,0.4) 70%,
            rgba(224,209,236,0.5) 85%,
            rgba(243,238,247,0.0) 100%
            );
        background-size: 250% 100%;
        animation: lottySwimShimmer 2.5s ease-in-out infinite;
    }
}

/* Water wave overlay — two crossing sine waves */
.ai-generating-bar::before {
    content: '';
    position: absolute;
    top: 0; left: -20%; right: -20%; bottom: 0;
    background:
        repeating-linear-gradient(
            100deg,
            transparent 0px,
            rgba(255,255,255,0.18) 4px,
            transparent 8px
        );
    animation: lottyWaveSlide 1.8s linear infinite;
    pointer-events: none;
}
.ai-generating-bar::after {
    content: '';
    position: absolute;
    top: 0; left: -20%; right: -20%; bottom: 0;
    background:
        repeating-linear-gradient(
            80deg,
            transparent 0px,
            rgba(255,255,255,0.12) 6px,
            transparent 12px
        );
    animation: lottyWaveSlide 2.5s linear infinite reverse;
    pointer-events: none;
}

/* Keep step text above the waves */
.ai-generating-steps {
    position: relative;
    z-index: 1;
}

@keyframes lottySwimShimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
@keyframes lottyWaveSlide {
    from { transform: translateX(0); }
    to   { transform: translateX(20px); }
}

/* Floating generating indicator - fixed to bottom of output panel */
.ai-generating-float {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    padding: 14px 24px;
    background: linear-gradient(135deg, #5a3578, #7b4fa2, #6d468c);
    color: #fff;
    overflow: hidden;
    box-shadow: 0 -6px 30px rgba(90, 53, 120, 0.4);
}
.ai-generating-float-shimmer {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.1) 40%,
        rgba(255,255,255,0.2) 50%,
        rgba(255,255,255,0.1) 60%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: lottyFloatShimmer 2s ease-in-out infinite;
}
.ai-generating-float-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}
.ai-generating-float-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.5);
    animation: lottyAvatarPulse 2s ease-in-out infinite;
}
.ai-generating-float-text {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.ai-generating-float-label {
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.3px;
}
.ai-generating-float-dots::after {
    content: '';
    animation: lottyDots 1.5s steps(4, end) infinite;
}
@keyframes lottyDots {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: ''; }
}
.ai-generating-float-sub {
    font-size: 0.75rem;
    opacity: 0.7;
    font-weight: 400;
}
.ai-generating-float-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 20px;
}
.ai-generating-float-bars span {
    width: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.7);
    animation: lottyBarBounce 1.2s ease-in-out infinite;
}
.ai-generating-float-bars span:nth-child(1) { height: 8px; animation-delay: 0s; }
.ai-generating-float-bars span:nth-child(2) { height: 14px; animation-delay: 0.1s; }
.ai-generating-float-bars span:nth-child(3) { height: 20px; animation-delay: 0.2s; }
.ai-generating-float-bars span:nth-child(4) { height: 14px; animation-delay: 0.3s; }
.ai-generating-float-bars span:nth-child(5) { height: 8px; animation-delay: 0.4s; }
@keyframes lottyBarBounce {
    0%, 100% { transform: scaleY(0.5); opacity: 0.4; }
    50% { transform: scaleY(1); opacity: 1; }
}
@keyframes lottyFloatShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes lottyAvatarPulse {
    0%, 100% { border-color: rgba(255,255,255,0.3); transform: scale(1); }
    50% { border-color: rgba(255,255,255,0.8); transform: scale(1.05); }
}

/* Streaming content — no per-element animation to avoid flash on reflow */

/* Generate button Lotty icon pulse while idle */
.ai-generate-lotty-icon {
    animation: lottyIconPulse 2s ease-in-out infinite;
}
@keyframes lottyIconPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
    50% { transform: scale(1.08); filter: drop-shadow(0 0 6px rgba(255,255,255,0.4)); }
}

/* Working dots animation - individual dot stagger */
.ai-working-dots {
    letter-spacing: 2px;
    animation: none;
}

/* Lotty bubble subtle entrance */
.ai-lotty-bubble {
    animation: bubbleAppear 0.6s ease-out;
}
@keyframes bubbleAppear {
    0% { opacity: 0; transform: scale(0.9) translateX(-8px); }
    100% { opacity: 1; transform: scale(1) translateX(0); }
}

/* Floating bubble scene behind Lotty intro */
.ai-lotty-scene {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.ai-lotty-bubble-bg {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(109, 70, 140, 0.06) 0%, rgba(109, 70, 140, 0.02) 70%, transparent 100%);
    animation: bgBubbleFloat linear infinite;
}
.ai-bubble-1 { width: 60px; height: 60px; left: 10%; bottom: -60px; animation-duration: 8s; animation-delay: 0s; }
.ai-bubble-2 { width: 35px; height: 35px; left: 30%; bottom: -35px; animation-duration: 6s; animation-delay: 1s; }
.ai-bubble-3 { width: 45px; height: 45px; left: 55%; bottom: -45px; animation-duration: 9s; animation-delay: 2s; }
.ai-bubble-4 { width: 25px; height: 25px; left: 75%; bottom: -25px; animation-duration: 7s; animation-delay: 0.5s; }
.ai-bubble-5 { width: 50px; height: 50px; left: 85%; bottom: -50px; animation-duration: 10s; animation-delay: 3s; }
@keyframes bgBubbleFloat {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    10% { opacity: 0.6; }
    50% { transform: translateY(-50vh) scale(1); opacity: 0.4; }
    100% { transform: translateY(-100vh) scale(0.8); opacity: 0; }
}

/* 12081: component library removed from Lotty per client request.
   Every cl-* class lived only in this feature (the mass-messaging
   template-library is a different, unrelated feature and is untouched).
   Inner comment delimiters stripped so this block nests.

 ==========================================
   Component Library
   ==========================================

 Toggle bar
.cl-toggle-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f9f9fc;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.cl-toggle-bar:hover {
    border-color: #6d468c;
    background: #f3eef7;
}
.cl-toggle-bar i {
    color: #6d468c;
    font-size: 12px;
    transition: transform 0.2s ease;
}
.cl-toggle-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cl-toggle-text {
    font-size: 13px;
    font-weight: 500;
    color: #444;
}
.cl-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    background: #6d468c;
    color: #fff;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

 Selected component chips (collapsed view)
.cl-selected-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.cl-selected-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #f3eef7;
    border: 1px solid #d9cce6;
    border-radius: 16px;
    font-size: 12px;
    animation: clChipIn 0.2s ease;
}
.cl-chip-type {
    color: #6d468c;
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.cl-chip-name {
    color: #444;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cl-chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: rgba(109, 70, 140, 0.15);
    color: #6d468c;
    border-radius: 50%;
    cursor: pointer;
    font-size: 9px;
    transition: all 0.15s ease;
}
.cl-chip-remove:hover {
    background: #6d468c;
    color: #fff;
}

@keyframes clChipIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

 Browser panel
.cl-browser {
    margin-top: 10px;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    animation: clBrowserOpen 0.25s ease;
}
@keyframes clBrowserOpen {
    from { opacity: 0; max-height: 0; }
    to { opacity: 1; max-height: 600px; }
}

 Search row
.cl-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
}
.cl-search-input-wrap {
    position: relative;
    flex: 1;
}
.cl-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 12px;
}
.cl-search-input {
    width: 100%;
    padding: 7px 10px 7px 30px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s ease;
}
.cl-search-input:focus {
    border-color: #6d468c;
}
.cl-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: none;
    background: #f3eef7;
    color: #6d468c;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}
.cl-clear-btn:hover {
    background: #e6d9f0;
}

 Filter rows
.cl-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-bottom: 1px solid #f0f0f0;
    flex-wrap: wrap;
}
.cl-filter-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    flex-shrink: 0;
}
.cl-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.cl-filter-pill {
    padding: 3px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    color: #666;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.cl-filter-pill:hover {
    border-color: #6d468c;
    color: #6d468c;
}
.cl-filter-pill.active {
    background: #6d468c;
    border-color: #6d468c;
    color: #fff;
}

 Component grid
.cl-grid {
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
}
.cl-grid::-webkit-scrollbar {
    width: 5px;
}
.cl-grid::-webkit-scrollbar-thumb {
    background: #d9cce6;
    border-radius: 4px;
}

 Component card
.cl-card {
    border: 1.5px solid transparent;
    border-radius: 8px;
    margin-bottom: 4px;
    transition: all 0.15s ease;
    background: #fafafa;
}
.cl-card:hover {
    background: #f3eef7;
    border-color: #e6d9f0;
}
.cl-card.selected {
    background: #f3eef7;
    border-color: #6d468c;
}
.cl-card-body {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    cursor: pointer;
}
.cl-card-check {
    flex-shrink: 0;
    font-size: 16px;
    color: #ccc;
    transition: color 0.15s ease;
}
.cl-card.selected .cl-card-check {
    color: #6d468c;
}
.cl-card-info {
    flex: 1;
    min-width: 0;
}
.cl-card-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cl-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}
.cl-card-type {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #6d468c;
    background: rgba(109, 70, 140, 0.08);
    padding: 1px 6px;
    border-radius: 4px;
}
.cl-card-cat {
    font-size: 10px;
    color: #999;
}
.cl-card-preview-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: #888;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s ease;
}
.cl-card-preview-btn:hover {
    border-color: #6d468c;
    color: #6d468c;
    background: #f3eef7;
}

 ==========================================
   Component Quick Preview Modal
   ==========================================

.cl-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: clOverlayIn 0.15s ease;
}
@keyframes clOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.cl-modal {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    width: 92%;
    max-width: 680px;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: clModalIn 0.2s ease;
}
@keyframes clModalIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.cl-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
.cl-modal-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.cl-modal-name {
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cl-preview-type-badge {
    display: inline-block;
    padding: 2px 10px;
    background: #f3eef7;
    color: #6d468c;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex-shrink: 0;
}
.cl-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: #f3f4f6;
    color: #666;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.cl-modal-close:hover {
    background: #e5e7eb;
    color: #333;
}

.cl-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #fafafa;
}
.cl-modal-html {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 20px;
    font-size: 14px;
    line-height: 1.6;
    overflow: hidden;
}
.cl-modal-html img {
    max-width: 100%;
    height: auto;
}

.cl-modal-footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 20px;
    border-top: 1px solid #eee;
    flex-shrink: 0;
}

.cl-modal-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 22px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    background: linear-gradient(135deg, #6d468c 0%, #8b5fbf 100%);
    color: #fff;
}
.cl-modal-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(109, 70, 140, 0.35);
}
.cl-modal-action-btn--remove {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
}
.cl-modal-action-btn--remove:hover {
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
}
*/

/* ==========================================
   Add to Course Button & Modal
   ========================================== */

.ai-add-to-course-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    color: #fff;
    transition: all 0.15s ease;
}

.ai-add-to-course-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(109, 70, 140, 0.3);
}

/* 12081 phase-3 fixA: .ai-add-to-course-btn declares `color: #fff` and NO
   background of its own — the purple comes from .is-btn-primary. Used without
   that class it rendered white text on the browser's default grey button face,
   which read as disabled. Per-item add on an already-added item is deliberately
   enabled (re-add to a second course/module), so it needs a legible secondary
   look rather than an accidental grey one. */
.ai-add-to-course-btn--secondary {
    background: #fff;
    color: #6d468c;
    border: 1.5px solid #e0d1ec;
}

.ai-add-to-course-btn--secondary:hover {
    background: #f3eef7;
    border-color: #6d468c;
    color: #6d468c;
    box-shadow: 0 2px 8px rgba(109, 70, 140, 0.18);
}

/* Modal overlay */
.ai-atc-overlay {
    z-index: 10001;
}

/* Modal container */
.ai-atc-modal {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    width: 90%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: clModalIn 0.2s ease;
}

.ai-atc-modal-header {
    padding: 18px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.ai-atc-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-atc-modal-title h4 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1f2937;
}

.ai-atc-modal-body {
    padding: 24px;
}

/* Form fields */
.ai-atc-field {
    margin-bottom: 18px;
}

/* 12081 phase-3: "As separate pages" / "As one booklet" segmented choice in the
   add-to-course modal. Same active/inactive idiom as the lesson-length toggle
   this replaced, so it reads as native to the workspace. */
.ai-push-mode-toggle {
    display: flex;
    gap: 6px;
}

.ai-push-mode-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1.5px solid #e0d1ec;
    border-radius: 8px;
    background: #fff;
    color: #6d468c;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ai-push-mode-btn:hover {
    background: #f3eef7;
    border-color: #6d468c;
}

.ai-push-mode-btn.active {
    background: #6d468c;
    color: #fff;
    border-color: #6d468c;
    box-shadow: 0 2px 8px rgba(109, 70, 140, 0.25);
}

/* 12081 phase-3 fixC: with the third "Everything in one booklet" option the labels
   no longer fit three-across in the modal, so stack them. */
.ai-push-mode-toggle--stacked {
    flex-direction: column;
}

.ai-push-mode-toggle--stacked .ai-push-mode-btn {
    justify-content: flex-start;
}

/* One line of plain-language routing under the segmented control. */
.ai-push-mode-hint {
    margin: 8px 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #6b7280;
}

/* Per-row "→ booklet" / "→ module" destination tag in the items-to-add list, and
   the "in booklet" tag on the result rows. */
.ai-atc-bulk-item-dest {
    flex-shrink: 0;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.ai-atc-bulk-item-dest.is-booklet {
    background: #fef3c7;
    color: #92400e;
}

.ai-atc-bulk-item-dest.is-module {
    background: #eef2ff;
    color: #4338ca;
}

/* Which of the three push shapes the completed run actually used. */
.ai-atc-push-mode-note {
    margin: 8px 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #6b7280;
}

.ai-atc-push-mode-note i {
    margin-right: 4px;
    color: #6d468c;
}

.ai-atc-field:last-child {
    margin-bottom: 0;
}

.ai-atc-field > label {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
    font-size: 0.85rem;
}

.ai-atc-title-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #374151;
    outline: none;
    transition: border-color 0.15s ease;
}

.ai-atc-title-input:focus {
    border-color: var(--primary, #6d468c);
    box-shadow: 0 0 0 2px rgba(109, 70, 140, 0.1);
}

.ai-atc-title-input::placeholder {
    color: #9ca3af;
}

/* Search input inside course dropdown */
.ai-atc-search-wrap {
    padding: 6px 8px;
    border-bottom: 1px solid #f0f0f0;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}

.ai-atc-search-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.15s ease;
}

.ai-atc-search-input:focus {
    border-color: var(--primary, #6d468c);
}

/* Error message */
.ai-atc-error {
    padding: 10px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    font-size: 0.85rem;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Footer */
.ai-atc-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.ai-atc-confirm-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    color: #fff;
    transition: all 0.15s ease;
}

.ai-atc-confirm-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ai-atc-confirm-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(109, 70, 140, 0.3);
}

/* View link in success state */
.ai-atc-view-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    color: #fff;
    background: var(--primary, #6d468c);
    text-decoration: none;
    transition: all 0.15s ease;
}

.ai-atc-view-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(109, 70, 140, 0.3);
    color: #fff;
    text-decoration: none;
}

/* =====================================================================
   12081 phase-5 — "Open from course" and update-in-place
   ===================================================================== */

/* The affordance. One small secondary button — deliberately NOT a primary,
   because loading existing pages is a side door next to "Add items to
   course…", not a competing main action. Same outline treatment as
   .ai-add-to-course-btn--secondary so the two read as a pair. */
.ai-open-from-course-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1.5px solid #e0d1ec;
    border-radius: 8px;
    background: #fff;
    color: #6d468c;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ai-open-from-course-btn:hover {
    background: #f3eef7;
    border-color: #6d468c;
    box-shadow: 0 2px 8px rgba(109, 70, 140, 0.18);
}

.ai-open-from-course-btn i {
    font-size: 0.75rem;
}

/* "From course" pill — same geometry as the Added and Re-add badges it sits
   beside, in the page purple so it reads as provenance rather than status. */
.ai-item-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #ede4f4;
    color: #55356f;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: help;
}

.ai-item-source-badge i {
    font-size: 0.65rem;
}

/* "Updated 3:42 PM" — a hint, not a badge, so no pill. */
.ai-item-updated-hint {
    font-size: 0.68rem;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
}

/* A failed update is an error, not a warning: the amber of
   .ai-item-card-warning / .ai-item-warning-banner would understate it. */
.ai-item-update-error {
    color: #991b1b;
}

.ai-item-card-warning.ai-item-update-error i,
.ai-item-warning-banner.ai-item-update-error i {
    color: #dc2626;
}

.ai-item-warning-banner.ai-item-update-error {
    background-color: #fef2f2;
    border-color: #fca5a5;
}

.ai-update-in-course-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- the modal's third tier: the module's Lotty pages --- */

.ai-lfc-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 4px;
    font-size: 0.85rem;
    color: #6b7280;
}

.ai-lfc-filter {
    margin-bottom: 8px;
}

.ai-lfc-page-list {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}

.ai-lfc-page-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.12s ease;
}

.ai-lfc-page-row:last-child {
    border-bottom: none;
}

.ai-lfc-page-row:hover {
    background: #faf7fc;
}

.ai-lfc-page-row.is-selected {
    background: #f3eef7;
}

.ai-lfc-page-check {
    color: #6d468c;
    font-size: 0.95rem;
    flex: 0 0 auto;
}

/* The title takes the slack so the booklet tag and the date stay right-aligned
   and a long title truncates rather than wrapping the row. */
.ai-lfc-page-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #111;
    font-weight: 600;
}

.ai-lfc-page-booklet {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 2px 8px;
    border-radius: 10px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.66rem;
    font-weight: 700;
    cursor: help;
}

.ai-lfc-page-booklet i {
    font-size: 0.62rem;
}

.ai-lfc-page-date {
    flex: 0 0 auto;
    font-size: 0.7rem;
    color: #9ca3af;
    white-space: nowrap;
}

/* Spacing when it sits beside another button. The items-list header pushes
   .ai-add-all-btn right with margin-left:auto, so a following sibling would
   otherwise butt straight up against it; the Output header row has no gap of
   its own either. */
.ai-items-list-header .ai-open-from-course-btn,
.ai-output-panel .ai-open-from-course-btn {
    margin-left: 8px;
}

/* =====================================================================
   12081 phase-5 fixes — load-modal note, remove-from-workspace
   ===================================================================== */

/* The load modal's info notes. Same amber pill as .ai-atc-unadded-warning but a
   plain BLOCK paragraph: that class is `display: flex`, which promotes every
   child of the <p> to a flex item — the <i>, each anonymous text run and any
   <strong> — so a sentence with a bold phrase mid-way rendered as stacked
   columns with the bold segment torn out of the flow. Here the icon is inline
   and the text is one continuous flow. */
.ai-lfc-note {
    display: block;
    margin: 8px 0 0;
    padding: 8px 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    color: #92400e;
    font-size: 0.78rem;
    text-align: left;
    line-height: 1.5;
}

.ai-lfc-note i {
    color: #f59e0b;
    margin-right: 4px;
}

/* Bold phrases stay in the sentence rather than becoming their own column. */
.ai-lfc-note strong {
    font-weight: 700;
}

/* Remove-from-workspace control on an item card. Deliberately low-emphasis:
   it sits next to status badges and must not compete with them, so it is a
   muted glyph that only takes colour on hover. */
.ai-item-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #9ca3af;
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.ai-item-remove-btn:hover {
    background: #fee2e2;
    color: #b91c1c;
}

/* Ancestor rules set an icon colour and margin; neutralise both inside the
   button so the glyph stays centred and picks up the hover colour. */
.ai-item-remove-btn i {
    color: inherit;
    margin: 0;
    font-size: 0.75rem;
}

/* =========================================================================
   12081 phase-8 — Template Creation tab.

   Layout only. Every interactive control on this tab reuses an existing
   class (.ai-template-preview-btn, .ai-atc-confirm-btn, .ai-custom-dropdown,
   .ai-atc-course-option, .ai-preview-content, .ai-template-card*), so the
   rules below add structure and spacing and never restyle a shared control.
   ========================================================================= */

.tt-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 18px 24px 24px;
    overflow: auto;
}

/* --- step rail ---------------------------------------------------------- */

.tt-steps {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #e5e7eb;
    flex: 0 0 auto;
}

.tt-step {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #9ca3af;
}

.tt-step.is-active { color: #0074C5; }
.tt-step.is-done { color: #059669; }

.tt-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b7280;
    font-size: 0.75rem;
}

.tt-step.is-active .tt-step-num { background: #0074C5; color: #fff; }
.tt-step.is-done .tt-step-num { background: #059669; color: #fff; }

.tt-step-sep { color: #d1d5db; font-size: 0.7rem; }
.tt-spacer { flex: 1 1 auto; }

/* --- shared panel scaffolding ------------------------------------------- */

.tt-panel { flex: 1 1 auto; min-height: 0; }

.tt-configure,
.tt-preview {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.tt-col { min-width: 0; }
.tt-col-left { flex: 0 0 42%; }
.tt-col-right { flex: 1 1 58%; }

.tt-input { width: 100%; }
.tt-textarea { resize: vertical; font-family: inherit; }

.tt-field-note {
    margin-top: 5px;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #6b7280;
}

.tt-field-note code,
.tt-exported code,
.tt-exclusions code {
    background: #f3f4f6;
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 0.72rem;
}

.tt-field-error {
    margin-top: 4px;
    font-size: 0.75rem;
    color: #b91c1c;
}

.tt-error,
.tt-warn {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    line-height: 1.45;
}

.tt-error { background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; }
.tt-warn { background: #fff8e8; border: 1px solid #e6c76a; color: #92400e; }

.tt-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 16px;
}

/* --- step 1: the verdict ------------------------------------------------ */

.tt-verdict {
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
}

.tt-verdict.is-eligible { border-color: #a7f3d0; background: #f0fdf4; }
.tt-verdict.is-blocked { border-color: #fca5a5; background: #fef2f2; }

.tt-verdict-head {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
}

.tt-verdict.is-eligible .tt-verdict-head i { color: #059669; }
.tt-verdict.is-blocked .tt-verdict-head i { color: #b91c1c; }

.tt-verdict-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
    font-size: 0.8rem;
    color: #374151;
}

.tt-rules { margin-top: 14px; }

.tt-rule {
    display: grid;
    grid-template-columns: 16px 30px minmax(150px, 1fr) 2fr;
    gap: 10px;
    align-items: baseline;
    padding: 5px 0;
    font-size: 0.78rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.tt-rule.is-pass i { color: #059669; }
.tt-rule.is-fail i { color: #b91c1c; }
.tt-rule.is-warn i { color: #d97706; }

.tt-rule-id { font-weight: 700; color: #6b7280; }
.tt-rule-label { color: #111827; }
.tt-rule-detail { color: #6b7280; }

.tt-verdict-actions { margin-top: 14px; }

/* --- step 2: pages ------------------------------------------------------ */

.tt-selected {
    margin-bottom: 12px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    overflow: hidden;
}

.tt-selected-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.tt-selected-row:last-child { border-bottom: none; }

.tt-selected-num {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #0074C5;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

.tt-selected-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #111827;
}

.tt-selected-meta {
    flex: 0 0 auto;
    font-size: 0.7rem;
    color: #6b7280;
}

.tt-move {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    color: #475569;
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
}

.tt-move:disabled { opacity: 0.35; cursor: default; }
.tt-move i { color: inherit; margin: 0; font-size: 0.7rem; }

.tt-inventory {
    max-height: 340px;
    overflow: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.tt-inv-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 7px 10px;
    font-size: 0.8rem;
    border-bottom: 1px solid #f3f4f6;
}

.tt-inv-row:last-child { border-bottom: none; }
.tt-inv-row.is-selected { background: #eff6ff; }
.tt-inv-row.is-unselectable { opacity: 0.55; }

.tt-inv-order {
    flex: 0 0 auto;
    width: 22px;
    color: #9ca3af;
    font-size: 0.72rem;
    text-align: right;
}

.tt-inv-title {
    flex: 0 0 34%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #111827;
}

.tt-inv-meta {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.7rem;
    color: #6b7280;
    line-height: 1.5;
}

.tt-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 10px;
    background: #e5e7eb;
    color: #374151;
    font-size: 0.65rem;
}

.tt-tag.is-warn { background: #fef3c7; color: #92400e; }

/* --- step 2: bands ------------------------------------------------------ */

.tt-bands {
    margin: 8px 0;
    font-size: 0.78rem;
    color: #374151;
    line-height: 1.7;
}

.tt-band-editor { margin-top: 10px; }

.tt-band-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
}

.tt-band-name {
    flex: 0 0 60px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
}

.tt-band-page {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    color: #475569;
    font-size: 0.72rem;
    cursor: pointer;
}

.tt-band-page.selected {
    background: #0074C5;
    border-color: #0074C5;
    color: #fff;
}

/* --- step 2/3: pickers -------------------------------------------------- */

.tt-swatches,
.tt-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 6px;
}

.tt-swatch {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
}

.tt-swatch.selected {
    border-color: #111827;
    box-shadow: 0 0 0 2px #fff inset;
}

.tt-icon {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #475569;
    cursor: pointer;
}

.tt-icon.selected {
    border-color: #0074C5;
    background: #eff6ff;
    color: #0074C5;
}

.tt-icon i { color: inherit; margin: 0; }

/* --- step 3 ------------------------------------------------------------- */

.tt-card-preview { margin-bottom: 18px; }

.tt-budget {
    width: 100%;
    margin: 6px 0 4px;
    border-collapse: collapse;
    font-size: 0.76rem;
}

.tt-budget th,
.tt-budget td {
    padding: 4px 8px;
    text-align: right;
    border-bottom: 1px solid #f3f4f6;
}

.tt-budget th:first-child,
.tt-budget td:first-child { text-align: left; }
.tt-budget th { color: #6b7280; font-weight: 600; }
.tt-budget tr.is-over td { background: #fee2e2; color: #991b1b; }
.tt-budget tr.tt-budget-total td { font-weight: 700; border-top: 2px solid #e5e7eb; }

.tt-exclusions {
    margin: 6px 0;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
    font-size: 0.76rem;
    line-height: 1.6;
    color: #374151;
}

.tt-exclusions > div + div { margin-top: 6px; }

.tt-exported {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    background: #f0fdf4;
    font-size: 0.8rem;
    color: #065f46;
}

.tt-exported-head { font-weight: 600; margin-bottom: 8px; }
.tt-exported-head i { color: #059669; }
.tt-exported ol { margin: 0 0 6px 18px; padding: 0; line-height: 1.6; }

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

.tt-band-tabs { display: flex; gap: 6px; }

.tt-band-tabs .ai-template-preview-btn.selected {
    background: #0074C5;
    border-color: #0074C5;
    color: #fff;
}

.tt-preview-body {
    max-height: 70vh;
    overflow: auto;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
    background: #fff;
}

/* Narrow viewports: the two columns stack rather than crush. */
@media (max-width: 1200px) {
    .tt-configure,
    .tt-preview { flex-direction: column; }

    .tt-col-left,
    .tt-col-right { flex: 1 1 auto; width: 100%; }
}

/* -------------------------------------------------------------------------
   12081 phase-8 fixB — the Templates tab's server-side course search.

   Two additions only: the clear button inside the existing
   .ai-atc-search-wrap (which already supplies the padding, the sticky
   positioning and the border), and the status line under it. Neither rule
   touches a shared control — .tt-search-clear and .tt-search-hint are scoped
   to this tab's dropdown, and the add-to-course pickers use neither.
   ------------------------------------------------------------------------- */

/* .ai-atc-search-wrap is `position: sticky`, which is a positioned ancestor,
   so the button can be absolutely placed against it without a new wrapper. */
.tt-search-clear {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #9ca3af;
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
}

.tt-search-clear:hover {
    background: #f3f4f6;
    color: #374151;
}

.tt-search-clear i {
    color: inherit;
    margin: 0;
    font-size: 0.7rem;
}

/* Sticky under the search box so the count stays visible while scrolling a
   long result list. `top` clears the search wrap above it. */
.tt-search-hint {
    position: sticky;
    top: 46px;
    z-index: 1;
    padding: 5px 10px;
    background: #f9fafb;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.72rem;
    line-height: 1.4;
    color: #6b7280;
}

.tt-search-hint i {
    color: inherit;
    margin: 0;
    font-size: 0.72rem;
}

/* =========================================================================
   12081 phase-8 fixD — the template picker's scroll rail.

   The picker was `display: flex` with `flex: 1` cards, so every template
   added made every card thinner. At five templates (and growing, now that
   the template tool exists) the cards were unreadable.

   SCOPING. Every rule below keys off `.ai-template-rail`, a modifier the
   HOMEPAGE picker's container carries and nobody else does. `.ai-template-
   cards` and `.ai-template-card` are shared with the Templates tab's
   draft-preview card (.tt-card-preview) and are NOT touched here, so that
   card renders exactly as it did. Card internals are untouched throughout —
   this is layout around the cards.

   SIZING. Derived, not guessed. Laid out, the rail's content is
   card, gap, card, gap, card, gap, card…, so a window showing three whole
   cards plus a peek of the fourth is
       W = 3c + 3g + (peek)c        with peek = 0.5
         => c = (W - 3g) / 3.5
   which is exactly the flex-basis below, with W as `100%` of the rail and g
   as the one gap value both the basis and the `gap` property read. Change
   --ai-rail-gap and the arithmetic follows.

   NARROW PANELS. `min-width` is the floor that makes the rail "degrade
   gracefully": once (W - 3g)/3.5 drops below a card's readable width the
   basis stops shrinking, so fewer cards fit in the window and the rail
   simply scrolls further. Without it the cards would keep shrinking until
   the Preview button wrapped.
   ========================================================================= */

.ai-template-rail {
    --ai-rail-gap: 12px;

    gap: var(--ai-rail-gap);
    overflow-x: auto;
    /* One axis being scrollable computes the other to `auto`; pinning it
       hidden keeps a stray vertical scrollbar out of a one-row rail. The
       padding below is what gives the hover lift and the selected ring room
       so neither is clipped by that same overflow. */
    overflow-y: hidden;
    padding: 6px 2px 12px;

    /* `proximity`, not `mandatory`, on purpose: with `scroll-snap-align:
       start` a mandatory rail can refuse to settle on the final card when
       the last snap position sits past the maximum scroll offset, which is
       a much worse failure than a card resting slightly off-alignment.
       Dot clicks position exactly (railScrollTarget), so the one case that
       has to be pixel-perfect does not depend on snapping at all. */
    scroll-snap-type: x proximity;
    scroll-padding-left: 2px;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.ai-template-rail > .ai-template-card {
    /* Overrides the shared `flex: 1`, which is what made cards thinner with
       every template added. */
    flex: 0 0 calc((100% - 3 * var(--ai-rail-gap)) / 3.5);
    min-width: 150px;
    scroll-snap-align: start;
}

/* The rail is focusable so it can be arrow-scrolled; show that it is. */
.ai-template-rail:focus {
    outline: none;
}

.ai-template-rail:focus-visible {
    outline: 2px solid var(--primary, #6d468c);
    outline-offset: 2px;
    border-radius: 10px;
}

/* A slimmer scrollbar than the platform default, so the rail does not read
   as a second content area. Firefox honours the two `scrollbar-*`
   properties; WebKit uses the pseudo-elements. */
.ai-template-rail {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

.ai-template-rail::-webkit-scrollbar {
    height: 6px;
}

.ai-template-rail::-webkit-scrollbar-track {
    background: transparent;
}

.ai-template-rail::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.ai-template-rail::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* --- 12081 phase-8 fixE: arrows and a count, in place of the dots ---------

   The dot row is gone. With ~3.5 cards visible, N cards have only about
   N - 3.5 cards' worth of scroll range, so several dots at the end all
   resolved to the same max-scroll position — one position per card was a
   promise the container could not keep. Arrows answer the only question the
   geometry can answer honestly (is there more this way?), and the caption
   states the catalogue size without implying a mapping.

   The arrows OVERLAY the rail's ends rather than flanking it, so they cost
   the cards no width — which matters at the narrow config-panel widths where
   the min-width floor is already governing. The right-hand one sits over the
   peek card, which is exactly the "there is more" affordance it duplicates.
   -------------------------------------------------------------------------- */

.ai-template-rail-wrap {
    position: relative;
}

.ai-template-rail-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;

    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    background: #fff;
    color: #4b5563;
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ai-template-rail-arrow.is-left {
    left: -6px;
}

.ai-template-rail-arrow.is-right {
    right: -6px;
}

.ai-template-rail-arrow:hover {
    background: #f9fafb;
    border-color: #9ca3af;
    color: #111827;
}

/* Ancestor rules set an icon colour and margin; neutralise both so the
   chevron stays centred and picks up the hover colour. */
.ai-template-rail-arrow i {
    color: inherit;
    margin: 0;
    font-size: 0.75rem;
}

.ai-template-rail-arrow:focus {
    outline: none;
}

.ai-template-rail-arrow:focus-visible {
    outline: 2px solid var(--primary, #6d468c);
    outline-offset: 2px;
}

/* --- the count caption --------------------------------------------------- */

.ai-template-count {
    margin-top: 2px;
    text-align: center;
    font-size: 0.7rem;
    color: #9ca3af;
}

/* =========================================================================
   12081 phase-8 fixF — editing existing templates.

   Appended only: every rule above is untouched, and every class below is new
   to this change. The editor itself reuses the mint wizard's vocabulary
   wherever one already existed (tt-selected-row, tt-move, tt-input,
   tt-swatches, tt-actions, tt-field-note), so what is here is the list view,
   the two badges, and the handful of controls the mint flow has no analogue
   for.
   ========================================================================= */

/* --- the two flows ------------------------------------------------------- */

.tt-modes {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

/* --- the existing-templates list ----------------------------------------- */

.tt-edit-list-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    font-size: 0.78rem;
    color: #6b7280;
}

.tt-edit-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    margin-bottom: 8px;
    background: #ffffff;
}

/* A disabled template is present and dimmed rather than hidden — the picker
   is where it disappears from, and being able to see it here is the whole
   reason this list is its own fetch. */
.tt-edit-row.is-disabled {
    background: #f9fafb;
    opacity: 0.72;
}

.tt-edit-row-swatch {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.tt-edit-row-swatch i { color: inherit; margin: 0; }

.tt-edit-row-main { flex: 1 1 auto; min-width: 0; }

.tt-edit-row-name {
    font-size: 0.86rem;
    font-weight: 600;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tt-edit-row-meta {
    font-size: 0.72rem;
    color: #6b7280;
    margin-top: 2px;
}

.tt-edit-row-families {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tt-edit-row-actions { flex: 0 0 auto; }

/* --- live / disabled --------------------------------------------------- */

.tt-badge {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
}

.tt-badge-on { background: #dcfce7; color: #166534; }
.tt-badge-off { background: #f3f4f6; color: #6b7280; }

/* --- the editor's own controls ------------------------------------------ */

/* A page dropped in this session, still restorable until the save. */
.tt-row-dropped {
    opacity: 0.55;
    text-decoration: line-through;
}

.tt-row-dropped .tt-move { text-decoration: none; }

.tt-enable-row {
    font-size: 0.8rem;
    color: #374151;
}

.tt-enable-row input { margin-right: 6px; }

.tt-family {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 12px 6px 0;
    font-size: 0.8rem;
    font-weight: 400;
    color: #374151;
}

.tt-copy-box {
    margin-top: 10px;
    padding: 12px;
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    background: #fafafa;
}

/* =========================================================================
   12081 phase-8 fixG — the configure step's two selection aids.

   Appended only. The preview MODAL adds no styling at all: it reuses
   .ai-modal-overlay / .ai-preview-modal / .ai-preview-content wholesale, which
   is the point of reusing that shell rather than building a second one. What
   is here is the recommendation banner, the "why" chip, the recommended-row
   tint, the eye button and the preview's one new subheading line.
   ========================================================================= */

/* --- the recommendation banner ------------------------------------------- */

.tt-recommend {
    border: 1px solid rgba(0, 116, 197, 0.25);
    background: rgba(0, 116, 197, 0.04);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
}

/* The honest "nothing to recommend" state reads as information, not as a
   feature that failed. */
.tt-recommend.is-muted {
    border-color: rgba(0, 0, 0, 0.1);
    background: #f9fafb;
}

.tt-recommend-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #111827;
}

.tt-recommend-head i { color: #0074C5; margin: 0; }
.tt-recommend.is-muted .tt-recommend-head i { color: #9ca3af; }

.tt-recommend-confirm {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.78rem;
    color: #374151;
}

/* --- the recommended row, and its chip ----------------------------------- */

.tt-inv-row.is-recommended {
    background: rgba(0, 116, 197, 0.04);
}

.tt-tag.is-recommended {
    background: rgba(0, 116, 197, 0.12);
    color: #0b5c96;
}

/* --- the preview affordance ---------------------------------------------- */

/* Sits at the end of a row; .tt-move already carries the button shape. */
.tt-peek {
    margin-left: auto;
}

.tt-inv-row .tt-peek {
    flex: 0 0 auto;
}

/* --- the preview modal's one addition ------------------------------------ */

/* Says what is being looked at, and that looking changes nothing. Everything
   else in that modal is the existing .ai-preview-* vocabulary. */
.tt-peek-subhead {
    padding: 8px 20px 10px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    font-size: 0.8rem;
    color: #374151;
}

.tt-peek-subhead .tt-field-note {
    display: block;
    margin-top: 2px;
}