/* ========== CLASS CONFIG MODAL ========== */
/* Shared component for Create Class + Edit Curriculum */

/* Modal overlay & container */
.ccm-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}
.ccm-overlay.active {
    display: flex;
}
.ccm-container {
    background-color: white;
    border-radius: 8px;
    width: 1100px;
    height: 750px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

/* Header */
.ccm-header {
    padding: 20px 32px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.ccm-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
    letter-spacing: -0.3px;
}
.ccm-header-subtitle {
    font-size: 13px;
    color: #666;
    margin-top: 2px;
    font-weight: 400;
}
.ccm-close-btn {
    background: none;
    border: none;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}
.ccm-close-btn:hover { color: #333; }

/* Tab bar */
.ccm-tabs {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    background-color: #f8f9fa;
    padding: 0 32px;
    gap: 8px;
    flex-shrink: 0;
}
.ccm-tab {
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 3px solid transparent;
    position: relative;
    top: 1px;
}
.ccm-tab:hover {
    color: #333;
    background-color: #f0f0f0;
}
.ccm-tab.active {
    color: #059669;
    font-weight: 600;
    border-bottom-color: #059669;
    background-color: white;
}

/* Body / tab content */
.ccm-body {
    padding: 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.ccm-tab-content {
    display: none;
    padding: 28px 32px;
}
.ccm-tab-content.active {
    display: block;
}

/* Section titles & descriptions */
.ccm-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.ccm-section-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Form groups */
.ccm-form-group {
    margin-bottom: 18px;
}
.ccm-form-group label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.ccm-form-group input,
.ccm-form-group select {
    width: 100%;
    padding: 10px 12px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    color: #333;
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}
.ccm-form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M3 5l3 3 3-3z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
.ccm-form-group input:focus,
.ccm-form-group select:focus {
    outline: none;
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
    background-color: white;
}
.ccm-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.ccm-form-hint {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}

/* Error box */
.ccm-error {
    padding: 10px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #dc2626;
    font-size: 12px;
    font-weight: 600;
    margin-top: 12px;
    display: none;
}

/* Info notice (for edit mode framework lock) */
.ccm-info-notice {
    padding: 12px 16px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    color: #1e40af;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 20px;
    display: none;
}
.ccm-info-notice .ccm-info-icon {
    font-weight: 700;
    margin-right: 6px;
}

/* Framework grid */
.ccm-framework-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.ccm-framework-card {
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px 18px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.ccm-framework-card:hover {
    border-color: #a7f3d0;
    background-color: #fafffe;
}
.ccm-framework-card.selected {
    border-color: #059669;
    background-color: #f0fdf4;
}
.ccm-framework-card.dimmed {
    opacity: 0.45;
    border-color: #e8e8e8;
}
.ccm-framework-card.ccm-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
}
.ccm-framework-card.ccm-disabled.selected {
    opacity: 0.7;
}
.ccm-framework-card-icon {
    font-size: 24px;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background-color: #f0fdf4;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ccm-framework-card.selected .ccm-framework-card-icon {
    background-color: #d1fae5;
}
.ccm-framework-card-text {
    flex: 1;
    min-width: 0;
}
.ccm-framework-card-title {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    margin-bottom: 3px;
}
.ccm-framework-card-desc {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}
.ccm-framework-card-check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #d0d0d0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: transparent;
    transition: all 0.15s;
}
.ccm-framework-card.selected .ccm-framework-card-check {
    border-color: #059669;
    background-color: #059669;
    color: white;
}
.ccm-framework-card-badge {
    display: inline-block;
    font-size: 9px;
    color: #059669;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 4px;
    padding: 2px 6px;
    margin-left: 6px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.3px;
    vertical-align: middle;
}
.ccm-framework-card-warning {
    padding: 10px 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    color: #92400e;
    font-size: 12px;
    margin-top: 12px;
    display: none;
}

/* Framework conditionals */
.ccm-conditional {
    display: none;
    margin-top: 16px;
    padding: 16px 20px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}
.ccm-conditional.visible {
    display: block;
}

/* CSV upload */
.ccm-csv-upload {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}
.ccm-csv-dropzone {
    border: 2px dashed #d0d0d0;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    background: #fafbfc;
    cursor: pointer;
    transition: all 0.2s;
}
.ccm-csv-dropzone:hover {
    border-color: #059669;
    background: #f0fdf4;
}
.ccm-csv-dropzone.dragover {
    border-color: #059669;
    background: #ecfdf5;
}
.ccm-csv-dropzone-text {
    font-size: 13px;
    color: #555;
}
.ccm-csv-dropzone-sub {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}
/* Calendar toolbar */
.ccm-cal-toolbar { display: flex; align-items: center; margin-bottom: 8px; gap: 10px; flex-wrap: wrap; }

/* Toolbar toggle (A/B Week, Show weekends) */
.ccm-toolbar-toggle { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-size: 12px; color: #666; user-select: none; white-space: nowrap; }
.ccm-toolbar-toggle input[type="checkbox"] { width: 14px; height: 14px; margin: 0; cursor: pointer; accent-color: #059669; }
.ccm-toolbar-toggle-label { white-space: nowrap; }

/* Upload Schedule button */
.ccm-upload-schedule-btn { margin-left: auto; padding: 5px 14px; font-size: 12px; font-weight: 600; color: #555; background: #fff; border: 1.5px solid #d1d5db; border-radius: 6px; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.ccm-upload-schedule-btn:hover { border-color: #059669; color: #059669; background: #f0fdf4; }

/* Upload status bar (spinner during AI parse) */
.ccm-upload-status { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: #eff6ff; border: 1px solid #93c5fd; border-radius: 6px; margin-bottom: 8px; font-size: 12px; color: #1d4ed8; font-weight: 600; }

/* Select / Save button */
.ccm-select-btn { padding: 6px 18px; font-size: 12px; font-weight: 600; color: #555; background: #fff; border: 1.5px solid #d1d5db; border-radius: 6px; cursor: pointer; transition: all 0.15s; }
.ccm-select-btn:hover { border-color: #3b82f6; color: #3b82f6; }
.ccm-select-btn-active { border-color: #3b82f6; color: #3b82f6; background: #eff6ff; }
.ccm-select-btn-save { background: #059669; color: #fff; border-color: #059669; }
.ccm-select-btn-save:hover { background: #047857; border-color: #047857; color: #fff; }

/* Assignment menu (appears above calendar in selection mode) */
.ccm-assign-menu { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #eff6ff; border: 1px solid #93c5fd; border-radius: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ccm-assign-menu-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; align-items: center; }
.ccm-assign-menu-count { font-size: 12px; font-weight: 700; color: #1d4ed8; white-space: nowrap; margin-right: 4px; }
.ccm-assign-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; font-size: 11px; font-weight: 600; color: #555; background: #fff; border: 1.5px solid #d1d5db; border-radius: 14px; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.ccm-assign-chip:hover { border-color: var(--chip-color); background: #f8f9fa; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.ccm-assign-chip-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* Legacy class painter bar (kept for backward compat) */
.ccm-cal-class-bar { display: none; }
.ccm-class-chip-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.ccm-csv-preview {
    margin-top: 16px;
    display: none;
}
.ccm-csv-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.ccm-csv-preview-title {
    font-size: 12px;
    font-weight: 700;
    color: #333;
}
.ccm-csv-clear-btn {
    font-size: 11px;
    color: #dc2626;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
}
.ccm-csv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}
.ccm-csv-table th {
    background: #f3f4f6;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    padding: 8px 10px;
    text-align: left;
    color: #666;
    letter-spacing: 0.3px;
}
.ccm-csv-table td {
    padding: 8px 10px;
    border-top: 1px solid #f0f0f0;
    color: #333;
}
.ccm-csv-table tr.ccm-csv-row-clickable {
    cursor: pointer;
    transition: background 0.15s;
}
.ccm-csv-table tr.ccm-csv-row-clickable:hover {
    background: #f0fdf4;
}
.ccm-csv-error {
    padding: 10px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #dc2626;
    font-size: 12px;
    margin-top: 8px;
    display: none;
}

/* Saved original schedule file */
.ccm-saved-file-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    font-size: 12px;
}
.ccm-saved-file-icon {
    font-size: 14px;
    flex-shrink: 0;
}
.ccm-saved-file-name {
    font-weight: 700;
    color: #333;
}
.ccm-saved-file-date {
    color: #999;
    font-size: 11px;
}
.ccm-saved-file-btn {
    margin-left: auto;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #059669;
    background: white;
    border: 1px solid #bbf7d0;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}
.ccm-saved-file-btn:hover {
    background: #059669;
    color: white;
    border-color: #059669;
}
.ccm-saved-file-remove {
    padding: 3px 8px;
    font-size: 11px;
    color: #999;
    background: none;
    border: none;
    cursor: pointer;
}
.ccm-saved-file-remove:hover {
    color: #dc2626;
}

/* Document upload zone */
/* Side-by-side upload + paste zones */
.ccm-doc-add-row { display: flex; gap: 12px; margin-bottom: 16px; }
.ccm-doc-add-row > * { flex: 1; }

.ccm-paste-zone {
    border: 2px dashed #d0d0d0;
    border-radius: 8px;
    padding: 32px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.ccm-paste-zone:hover { border-color: #6366f1; background-color: #f5f3ff; }

.ccm-upload-zone {
    border: 2px dashed #d0d0d0;
    border-radius: 8px;
    padding: 32px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.ccm-upload-zone:hover {
    border-color: #059669;
    background-color: #f0fdf4;
}
.ccm-upload-zone-icon { font-size: 28px; margin-bottom: 8px; }
.ccm-upload-zone-text { font-size: 13px; color: #555; margin-bottom: 4px; }
.ccm-upload-zone-hint { font-size: 11px; color: #999; }
.ccm-upload-browse-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    color: white;
    background-color: #059669;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.ccm-upload-browse-btn:hover { background-color: #047857; }

/* Uploaded files list */
.ccm-uploaded-files-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}
.ccm-uploaded-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background-color: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}
.ccm-uploaded-file-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #333;
}
.ccm-uploaded-file-icon { font-size: 16px; }
.ccm-uploaded-file-size { font-size: 11px; color: #999; }
.ccm-uploaded-file-remove {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 16px;
    padding: 0 4px;
    transition: color 0.2s;
}
.ccm-uploaded-file-remove:hover { color: #dc2626; }

/* Document cards (expanded per-file) */
.ccm-doc-card { background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 8px; padding: 14px 16px; margin-bottom: 10px; }
.ccm-doc-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ccm-doc-card-file { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #333; min-width: 0; }
.ccm-doc-card-filename { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccm-doc-field { margin-bottom: 8px; }
.ccm-doc-field-label { display: block; font-size: 11px; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.ccm-doc-input { width: 100%; padding: 7px 10px; font-size: 13px; border: 1px solid #d1d5db; border-radius: 5px; background: white; font-family: inherit; box-sizing: border-box; }
.ccm-doc-input:focus, .ccm-doc-textarea:focus { outline: none; border-color: #059669; box-shadow: 0 0 0 2px rgba(5,150,105,0.15); }
.ccm-doc-textarea { width: 100%; padding: 7px 10px; font-size: 13px; border: 1px solid #d1d5db; border-radius: 5px; background: white; font-family: inherit; resize: vertical; box-sizing: border-box; }
.ccm-doc-status { font-size: 12px; color: #666; display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.ccm-doc-status-pending { color: #2563eb; }
.ccm-doc-status-done { color: #059669; }
.ccm-doc-spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid #93c5fd; border-top-color: #2563eb; border-radius: 50%; animation: ccm-spin 0.8s linear infinite; }
@keyframes ccm-spin { to { transform: rotate(360deg); } }
.ccm-doc-transcription { font-size: 12px; color: #444; background: #f0fdf4; border-color: #a7f3d0; line-height: 1.6; }

/* Paste modal */
.ccm-paste-modal-overlay { position: fixed; inset: 0; z-index: 10001; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; }
.ccm-paste-modal { background: white; border-radius: 10px; padding: 24px; width: 90%; max-width: 560px; box-shadow: 0 8px 32px rgba(0,0,0,0.15); }
.ccm-paste-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.ccm-paste-modal-textarea { width: 100%; min-height: 180px; padding: 12px; font-size: 13px; font-family: inherit; border: 1px solid #d1d5db; border-radius: 6px; resize: vertical; box-sizing: border-box; line-height: 1.6; }
.ccm-paste-modal-textarea:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,0.15); }

/* Textarea */
.ccm-textarea {
    width: 100%;
    min-height: 140px;
    padding: 12px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.ccm-textarea:focus {
    outline: none;
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
    background-color: white;
}

/* Review tab */
.ccm-review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}
.ccm-review-card {
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
}
.ccm-review-card-label {
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.ccm-review-card-value {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}
.ccm-review-card-value.empty {
    color: #d0d0d0;
    font-style: italic;
    font-weight: 400;
    font-size: 13px;
}
.ccm-review-docs-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ccm-review-doc-item {
    font-size: 13px;
    color: #333;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
}
.ccm-review-doc-item:last-child { border-bottom: none; }

/* Action buttons */
.ccm-btn-primary {
    padding: 10px 28px;
    font-size: 13px;
    font-weight: 700;
    color: white;
    background-color: #059669;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ccm-btn-primary:hover { background-color: #047857; }

/* ========== Weekly Calendar Widget ========== */

.ccm-cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.ccm-cal-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}
.ccm-cal-weekend-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    user-select: none;
}
.ccm-cal-weekend-toggle input {
    cursor: pointer;
    accent-color: #059669;
}
.ccm-cal-block-count {
    font-size: 11px;
    color: #999;
    font-weight: 600;
}

/* Scrollable calendar container */
.ccm-cal-container {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: auto;
    max-height: 540px;
}

/* Grid layout */
.ccm-cal-grid {
    display: grid;
    min-width: 100%;
    user-select: none;
}

/* Corner cell (top-left) */
.ccm-cal-corner {
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    position: sticky;
    top: 0;
    z-index: 3;
}

/* Day headers */
.ccm-cal-day-header {
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    border-right: 1px solid #f0f0f0;
    padding: 8px 0;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    z-index: 2;
}
.ccm-cal-day-header:last-child { border-right: none; }

/* Time gutter */
.ccm-cal-gutter {
    position: relative;
    background: #fafbfc;
    border-right: 1px solid #e0e0e0;
}
.ccm-cal-time-label {
    position: absolute;
    right: 8px;
    font-size: 10px;
    color: #999;
    transform: translateY(-50%);
    white-space: nowrap;
}

/* Day columns */
.ccm-cal-day-col {
    position: relative;
    border-right: 1px solid #f0f0f0;
    cursor: crosshair;
    overflow: visible;
}
.ccm-cal-day-col:last-child { border-right: none; }

/* Hour grid lines */
.ccm-cal-hour-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px solid #f0f0f0;
    pointer-events: none;
}
.ccm-cal-half-hour-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dashed #f5f5f5;
    pointer-events: none;
}

/* Schedule blocks */
.ccm-cal-block {
    position: absolute;
    left: 2px;
    right: 2px;
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 11px;
    cursor: pointer;
    overflow: hidden;
    border-left: 3px solid;
    transition: box-shadow 0.15s;
    z-index: 1;
    box-sizing: border-box;
}
.ccm-cal-block:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 2;
}
.ccm-cal-block-label {
    font-weight: 700;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ccm-cal-block-room {
    font-size: 10px;
    color: #666;
    margin-top: 1px;
}
.ccm-cal-block-time {
    font-size: 10px;
    color: #888;
    margin-top: 1px;
}

/* Drag preview */
.ccm-cal-drag-preview {
    position: absolute;
    left: 2px;
    right: 2px;
    background: rgba(5, 150, 105, 0.15);
    border: 1px dashed #059669;
    border-radius: 4px;
    pointer-events: none;
    z-index: 5;
}

/* Inline edit form */
.ccm-cal-edit-form {
    position: absolute;
    left: -4px;
    width: 230px;
    background: white;
    border: 2px solid #059669;
    border-radius: 6px;
    padding: 10px;
    z-index: 10;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    min-height: 90px;
}
.ccm-cal-edit-form input {
    width: 100%;
    padding: 5px 8px;
    font-size: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 4px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}
.ccm-cal-edit-form input:focus {
    outline: none;
    border-color: #059669;
}
.ccm-cal-edit-time {
    font-size: 10px;
    color: #999;
    margin-bottom: 6px;
}
.ccm-cal-edit-time-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.ccm-cal-edit-time-label {
    font-size: 10px;
    color: #888;
    font-weight: 600;
    flex-shrink: 0;
}
.ccm-cal-edit-time-input {
    width: auto !important;
    flex: 1;
    min-width: 0;
    padding: 4px 4px !important;
    font-size: 11px !important;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}
.ccm-cal-edit-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}
.ccm-cal-edit-save {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    color: white;
    background: #059669;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}
.ccm-cal-edit-save:hover { background: #047857; }
.ccm-cal-edit-cancel {
    padding: 3px 8px;
    font-size: 11px;
    color: #666;
    background: #f3f4f6;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    cursor: pointer;
}
.ccm-cal-edit-delete {
    padding: 3px 8px;
    font-size: 11px;
    color: #dc2626;
    background: none;
    border: none;
    cursor: pointer;
    margin-left: auto;
}
.ccm-cal-edit-delete:hover { text-decoration: underline; }

/* Week rotation select */
.ccm-rotation-select {
    padding: 5px 10px;
    font-size: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: white;
    color: #333;
    cursor: pointer;
    font-family: Arial, sans-serif;
}
.ccm-rotation-select:focus {
    outline: none;
    border-color: #059669;
}

/* Week filter pills */
.ccm-cal-week-pills {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}
.ccm-cal-week-pill {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: white;
    color: #666;
    cursor: pointer;
    transition: all 0.15s;
}
.ccm-cal-week-pill:hover {
    border-color: #a7f3d0;
    color: #059669;
}
.ccm-cal-week-pill.active {
    background: #059669;
    color: white;
    border-color: #059669;
}

/* Week badge on blocks */
.ccm-cal-block-badge {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 9px;
    font-weight: 700;
    color: white;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 3px;
    padding: 1px 4px;
    line-height: 1;
    letter-spacing: 0.3px;
}

/* Week select in edit form */
.ccm-cal-edit-form select {
    width: 100%;
    padding: 5px 8px;
    font-size: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 4px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    background: white;
    cursor: pointer;
}
.ccm-cal-edit-form select:focus {
    outline: none;
    border-color: #059669;
}

/* ===== SCHEDULE BLOCK POPUP (Google Calendar-style) ===== */
.ccm-block-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ccm-popup-fadein 0.15s ease;
}

@keyframes ccm-popup-fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ccm-block-popup {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.04);
    width: 440px;
    max-width: 92vw;
    max-height: 85vh;
    overflow-y: auto;
    animation: ccm-popup-slideup 0.2s ease;
}

@keyframes ccm-popup-slideup {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Title row */
.ccm-block-popup-title-row {
    display: flex;
    align-items: center;
    padding: 20px 16px 0 56px;
    gap: 8px;
}

.ccm-block-popup-title {
    flex: 1;
    font-size: 22px;
    font-weight: 400;
    color: #3c4043;
    border: none;
    border-bottom: 2px solid #e0e0e0;
    outline: none;
    padding: 4px 0 8px;
    font-family: inherit;
    background: transparent;
    transition: border-color 0.2s;
}

.ccm-block-popup-title::placeholder {
    color: #80868b;
}

.ccm-block-popup-title:focus {
    border-bottom-color: #059669;
}

.ccm-block-popup-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #5f6368;
    cursor: pointer;
    border: none;
    background: none;
    border-radius: 50%;
    transition: background 0.15s;
    flex-shrink: 0;
}

.ccm-block-popup-close:hover {
    background: #f1f3f4;
}

/* Subtitle */
.ccm-block-popup-subtitle {
    padding: 6px 16px 0 56px;
    font-size: 12px;
    color: #70757a;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Body */
.ccm-block-popup-body {
    padding: 12px 16px 8px;
}

/* Icon-row layout */
.ccm-block-popup-row {
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid #f1f3f4;
}

.ccm-block-popup-row:last-child {
    border-bottom: none;
}

.ccm-block-popup-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #5f6368;
}

.ccm-block-popup-icon-top {
    align-items: flex-start;
    padding-top: 8px;
}

.ccm-block-popup-field {
    flex: 1;
    min-width: 0;
    padding-top: 8px;
}

/* Day & time section */
.ccm-block-popup-datetime {
    margin-bottom: 6px;
}

.ccm-block-popup-day-select {
    font-size: 14px;
    font-family: inherit;
    color: #3c4043;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 6px 8px;
    background: transparent;
    cursor: pointer;
    outline: none;
    font-weight: 500;
    transition: background 0.15s;
}

.ccm-block-popup-day-select:hover {
    background: #f1f3f4;
}

.ccm-block-popup-day-select:focus {
    border-color: #059669;
    background: #fff;
}

.ccm-block-popup-times {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ccm-block-popup-time-select {
    font-size: 14px;
    font-family: inherit;
    color: #3c4043;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 6px 8px;
    background: transparent;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    transition: background 0.15s;
    min-width: 95px;
}

.ccm-block-popup-time-select:hover {
    background: #f1f3f4;
}

.ccm-block-popup-time-select:focus {
    border-color: #059669;
    background: #fff;
    appearance: auto;
    -webkit-appearance: menulist;
}

.ccm-block-popup-dash {
    color: #5f6368;
    font-size: 14px;
    padding: 0 2px;
}

.ccm-block-popup-duration {
    font-size: 12px;
    color: #70757a;
    padding-left: 4px;
    white-space: nowrap;
}

/* Text inputs */
.ccm-block-popup-text-input {
    width: 100%;
    font-size: 14px;
    font-family: inherit;
    color: #3c4043;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    outline: none;
    padding: 4px 0 8px;
    background: transparent;
    transition: border-color 0.2s;
}

.ccm-block-popup-text-input::placeholder {
    color: #80868b;
}

.ccm-block-popup-text-input:focus {
    border-bottom-color: #059669;
}

/* Select inputs */
.ccm-block-popup-select {
    width: 100%;
    font-size: 14px;
    font-family: inherit;
    color: #3c4043;
    border: 1px solid #dadce0;
    border-radius: 4px;
    padding: 8px 10px;
    background: #fff;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
}

.ccm-block-popup-select:focus {
    border-color: #059669;
    box-shadow: 0 0 0 2px rgba(5,150,105,0.12);
}

/* Textarea */
.ccm-block-popup-textarea {
    width: 100%;
    font-size: 14px;
    font-family: inherit;
    color: #3c4043;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    outline: none;
    padding: 4px 0 8px;
    background: transparent;
    resize: vertical;
    min-height: 40px;
    transition: border-color 0.2s;
}

.ccm-block-popup-textarea::placeholder {
    color: #80868b;
}

.ccm-block-popup-textarea:focus {
    border-bottom-color: #059669;
}

/* Color swatches */
.ccm-block-color-swatches {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 2px 0;
}

.ccm-block-color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    outline: none;
    transition: transform 0.1s;
}

.ccm-block-color-swatch:hover {
    transform: scale(1.2);
}

.ccm-block-color-swatch.active {
    border-color: #3c4043;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #3c4043;
}

/* Footer */
.ccm-block-popup-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
}

.ccm-block-popup-footer-left {
    display: flex;
}

.ccm-block-popup-footer-right {
    display: flex;
    gap: 8px;
}

.ccm-block-popup-delete {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #d93025;
    background: none;
    border: 1px solid #dadce0;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}

.ccm-block-popup-delete:hover {
    background: #fce8e6;
    border-color: #d93025;
}

.ccm-block-popup-cancel {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #3c4043;
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}

.ccm-block-popup-cancel:hover {
    background: #f1f3f4;
}

.ccm-block-popup-save {
    padding: 8px 24px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background: #059669;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

.ccm-block-popup-save:hover {
    background: #047857;
}

/* PDF upload spinner */
.ccm-cal-spinner-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
}
.ccm-cal-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e0e0e0;
    border-top-color: #059669;
    border-radius: 50%;
    animation: ccm-spin 0.8s linear infinite;
}
@keyframes ccm-spin {
    to { transform: rotate(360deg); }
}
.ccm-cal-spinner-text {
    font-size: 12px;
    color: #666;
}

/* ========== CLASSES TAB ========== */
.ccm-class-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 10px;
    transition: all 0.15s;
}
.ccm-class-card:hover { border-color: #a7f3d0; }
.ccm-class-card-deselected { opacity: 0.5; border-color: #f0f0f0; background: #fafafa; }
.ccm-class-card-check { flex-shrink: 0; padding-top: 2px; }
.ccm-class-card-check input { accent-color: #059669; width: 16px; height: 16px; cursor: pointer; }
.ccm-class-card-color { flex-shrink: 0; width: 4px; min-height: 40px; border-radius: 2px; align-self: stretch; }
.ccm-class-card-body { flex: 1; min-width: 0; }
.ccm-class-card-name {
    width: 100%;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 4px 6px;
    background: transparent;
    transition: all 0.15s;
    font-family: inherit;
}
.ccm-class-card-name:hover { border-color: #e0e0e0; background: #f8f9fa; }
.ccm-class-card-name:focus { outline: none; border-color: #059669; background: white; box-shadow: 0 0 0 2px rgba(5,150,105,0.1); }
.ccm-class-card-meta { display: flex; gap: 12px; margin-top: 4px; font-size: 12px; color: #666; padding-left: 6px; }
.ccm-class-card-groups { font-weight: 600; }
.ccm-class-card-schedule { font-size: 11px; color: #999; margin-top: 2px; padding-left: 6px; }
.ccm-class-select-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e0e0e0;
}
.ccm-class-select-all { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #333; cursor: pointer; }
.ccm-class-select-all input { accent-color: #059669; }
.ccm-class-count { font-size: 12px; color: #999; }
.ccm-other-commitments { margin-top: 20px; }
.ccm-commitment-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ccm-commitment-item { padding: 5px 10px; background: #f3f4f6; border: 1px solid #e0e0e0; border-radius: 6px; font-size: 11px; color: #555; }
.ccm-commitment-badge { font-size: 9px; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: 0.3px; margin-right: 4px; }
.ccm-review-summary-bar {
    font-size: 15px; color: #333; margin-bottom: 16px; padding: 12px 16px;
    background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px;
}
.ccm-review-class-item { padding: 10px 14px; border: 1px solid #e0e0e0; border-radius: 6px; margin-bottom: 6px; }
.ccm-review-class-name { font-size: 13px; font-weight: 700; color: #333; }
.ccm-review-class-detail { font-size: 11px; color: #666; margin-top: 2px; }
.ccm-review-shared { margin-top: 16px; padding-top: 16px; border-top: 1px solid #e0e0e0; }
.ccm-empty-state { text-align: center; padding: 40px 20px; color: #999; font-size: 13px; }
.ccm-section-title-sm { font-size: 13px; font-weight: 700; color: #333; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.ccm-section-desc { font-size: 12px; color: #888; margin-bottom: 14px; line-height: 1.5; }

/* ===== CLASS CARDS V2 ===== */
.ccm-class-card-v2 { border: 2px solid #e0e0e0; border-radius: 8px; margin-bottom: 10px; overflow: hidden; transition: box-shadow 0.15s; }
.ccm-class-card-v2:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.ccm-card-header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; user-select: none; position: relative; }
.ccm-card-toggle { font-size: 11px; color: inherit; flex-shrink: 0; width: 16px; text-align: center; transition: transform 0.15s; }
.ccm-card-toggle.expanded { transform: rotate(90deg); }
.ccm-card-header-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccm-card-block-badge { font-size: 10px; color: inherit; background: rgba(255,255,255,0.25); border-radius: 10px; padding: 1px 7px; flex-shrink: 0; }
/* Choose Color button */
.ccm-card-color-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: inherit; background: rgba(255,255,255,0.2); border: 1.5px solid rgba(255,255,255,0.4); border-radius: 5px; padding: 3px 10px; cursor: pointer; flex-shrink: 0; white-space: nowrap; transition: background 0.15s; }
.ccm-card-color-btn:hover { background: rgba(255,255,255,0.35); }
.ccm-color-btn-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ccm-card-delete { font-size: 16px; color: inherit; opacity: 0.6; cursor: pointer; flex-shrink: 0; padding: 0 4px; line-height: 1; border: none; background: none; }
.ccm-card-delete:hover { opacity: 1; }

/* Color picker popover */
.ccm-color-popover { position: absolute; top: 100%; right: 8px; z-index: 10; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 8px; display: flex; gap: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.ccm-color-popover-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; outline: none; transition: transform 0.1s; }
.ccm-color-popover-swatch:hover { transform: scale(1.15); }
.ccm-color-popover-swatch.active { border-color: #333; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #333; }
.ccm-color-popover-clear { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #d1d5db; cursor: pointer; padding: 0; outline: none; transition: transform 0.1s; background: #f3f4f6; color: #999; font-size: 16px; line-height: 22px; display: flex; align-items: center; justify-content: center; margin-left: 2px; }
.ccm-color-popover-clear:hover { transform: scale(1.15); border-color: #999; color: #666; }
.ccm-color-popover-clear.active { border-color: #333; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #333; }

.ccm-card-body { padding: 10px 14px 14px 14px; border-top: none; }
.ccm-card-body .ccm-form-group { margin-bottom: 0; margin-top: 8px; }
.ccm-card-body .ccm-form-group:first-child { margin-top: 0; }
.ccm-card-body .ccm-card-row { display: flex; gap: 10px; margin-top: 10px; align-items: flex-end; }
.ccm-card-body .ccm-card-row > * { flex: 1; min-width: 0; }
.ccm-card-body .ccm-card-row .ccm-form-group { margin-top: 0; }
.ccm-card-body input, .ccm-card-body select { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 5px; font-size: 12px; color: #333; background: #fff; outline: none; height: 32px; }
.ccm-card-body input:focus, .ccm-card-body select:focus { border-color: #059669; }
.ccm-card-body label { display: block; font-size: 11px; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 3px; }

/* Custom framework hint */
.ccm-custom-hint { font-size: 11px; color: #059669; margin-top: 6px; font-style: italic; }

/* Locked field (non-editable in edit mode) */
.ccm-locked-field { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 6px; }
.ccm-locked-value { font-size: 13px; color: #374151; font-weight: 500; }
.ccm-locked-badge { font-size: 10px; color: #9ca3af; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; margin-left: auto; }

/* Warning text for immutable fields during class creation */
.ccm-field-warning { font-size: 10px; color: #d97706; margin-top: 4px; line-height: 1.3; }

/* ===== Flat (modernised) class card =====
   Replaces the older dark-gray header bar look. Card is a clean white
   surface with a thin colored left-edge stripe, slim header row, and
   form rows flush in the body. */
.ccm-class-card-v2.ccm-card-flat {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    overflow: visible;
    margin-bottom: 12px;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.ccm-class-card-v2.ccm-card-flat:hover {
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ccm-card-header-flat {
    background: transparent;
    color: #1f2937;
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    cursor: default;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Static (non-collapsible) variant — applied to every header now that the
   collapse toggle has been removed. Keeps the rule available for hover
   chrome without re-introducing a chevron. */
.ccm-card-header-flat.ccm-card-header-static {
    cursor: default;
}
.ccm-card-header-flat .ccm-card-toggle {
    display: none;
}
.ccm-card-header-flat .ccm-card-header-name {
    color: #0f172a;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.1px;
}
.ccm-card-header-flat .ccm-card-block-badge {
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
    padding: 2px 8px;
}
.ccm-card-header-flat .ccm-card-delete {
    color: #94a3b8;
    opacity: 1;
    font-size: 18px;
}
.ccm-card-header-flat .ccm-card-delete:hover { color: #dc2626; }
.ccm-card-name-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(15,23,42,0.06);
}
.ccm-card-body-flat {
    background: #fff !important;
    padding: 16px 18px 18px 18px;
}

/* Inline class-color swatch row (replaces popover) */
.ccm-color-row-group { margin-top: 14px !important; }
.ccm-color-swatch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}
.ccm-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    outline: none;
    transition: transform 0.1s, box-shadow 0.1s;
}
.ccm-swatch:hover { transform: scale(1.12); }
.ccm-swatch.active {
    border-color: #0f172a;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #0f172a;
}
.ccm-swatch-clear {
    background: #fff !important;
    border: 2px solid #d1d5db;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ccm-swatch-clear.active {
    border-color: #0f172a;
    color: #0f172a;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #0f172a;
}

/* Compact color row when it sits inline with two other form fields
   on the same row (Row 3 of the redesigned card). Smaller swatches
   keep the row from blowing out horizontally. */
.ccm-color-row-inline { margin-top: 0 !important; }
.ccm-color-row-inline .ccm-color-swatch-row {
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 6px;
}
.ccm-color-row-inline .ccm-swatch {
    width: 18px;
    height: 18px;
    border-width: 2px;
}
.ccm-color-row-inline .ccm-swatch-clear {
    font-size: 11px;
}
.ccm-form-spacer { height: 32px; }

/* Required-field asterisk + legend below Row 3. */
.ccm-required {
    color: #dc2626;
    font-weight: 700;
    margin-left: 2px;
    cursor: help;
}
.ccm-required-legend {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 8px;
    line-height: 1.4;
}
.ccm-required-legend .ccm-required {
    margin-left: 0;
    margin-right: 4px;
}

/* ===== Meets-on day chips (per-class card) =====
   The minimum-viable scheduling input: pick the weekdays this class
   meets so it surfaces on the teacher calendar. Specific times come
   from the Schedule tab, but this row alone is enough for the
   placeholder to render. */
.ccm-meets-row {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    row-gap: 6px;
}
.ccm-meets-label {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    margin: 0;
    flex: 0 0 auto;
}
.ccm-meets-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ccm-meets-chip {
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.12s ease;
    line-height: 1;
}
.ccm-meets-chip:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #334155;
}
.ccm-meets-chip.active {
    background: #059669;
    border-color: #059669;
    color: #fff;
}
.ccm-meets-chip.active:hover {
    background: #047857;
    border-color: #047857;
}
.ccm-meets-hint {
    flex: 1 1 100%;
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.4;
    margin-top: 2px;
}

/* ===== Connection indicator (lives in the card title row) =====
   Pills show "Connected to: <classA> <classB>"; info-eye opens a
   read-only popover explaining the model; "+ Link class" opens a
   chooser popover with matching classes. Replaces the wide CONNECT
   block that used to sit at the bottom of the form. */
.ccm-conn-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: 8px;
    min-width: 0;
}
.ccm-conn-label {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ccm-conn-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ccm-conn-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
}
.ccm-conn-link-btn {
    font-size: 11px;
    font-weight: 600;
    color: #047857;
    background: #fff;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    padding: 4px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}
.ccm-conn-link-btn:hover {
    background: #ecfdf5;
    border-color: #6ee7b7;
}
.ccm-conn-link-btn.is-disabled {
    color: #cbd5e1;
    border-color: #e5e7eb;
    cursor: not-allowed;
    background: #fff;
}
.ccm-conn-info-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #64748b;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color 0.15s, border-color 0.15s;
}
.ccm-conn-info-btn:hover {
    color: #0f172a;
    border-color: #cbd5e1;
}

/* Popovers — anchored to .ccm-conn-actions (which is position:relative).
   Sits below the title bar; arrow-less, lightly elevated panel. */
.ccm-conn-info-popover,
.ccm-conn-link-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15,23,42,0.12);
    width: 320px;
    max-width: 90vw;
    padding: 14px 16px;
    cursor: default;
}
.ccm-conn-info-title,
.ccm-conn-link-title {
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}
.ccm-conn-info-body {
    font-size: 12px;
    color: #475569;
    line-height: 1.5;
}
.ccm-conn-link-empty {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}
.ccm-conn-link-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
}
.ccm-conn-link-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    font-size: 13px;
    color: #1f2937;
    transition: background 0.12s, border-color 0.12s;
}
.ccm-conn-link-row:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}
.ccm-conn-link-row.is-picked {
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: #065f46;
    font-weight: 600;
}
.ccm-conn-link-check {
    width: 16px;
    color: #047857;
    flex-shrink: 0;
}
.ccm-conn-link-check-box {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #059669;
    flex-shrink: 0;
    pointer-events: none;
}
.ccm-conn-link-row {
    user-select: none;
}

/* ===== Connect to Existing Classes ===== */
.ccm-connect-section { margin-top: 14px; padding: 12px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; }
.ccm-connect-title { font-size: 12px; font-weight: 700; color: #333; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.ccm-connect-optional { font-size: 10px; font-weight: 500; color: #9ca3af; text-transform: none; letter-spacing: 0; padding: 2px 6px; background: #f3f4f6; border-radius: 10px; }
.ccm-connect-desc { font-size: 11px; color: #6b7280; line-height: 1.5; margin-bottom: 8px; }
.ccm-connect-warning { font-size: 11px; color: #d97706; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: 6px 10px; margin-bottom: 10px; line-height: 1.4; }
.ccm-connect-empty { font-size: 11px; color: #9ca3af; font-style: italic; padding: 8px 10px; background: #f9fafb; border-radius: 6px; }
.ccm-connect-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ccm-connect-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12px; font-weight: 600; background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; border-radius: 16px; cursor: pointer; transition: all 0.15s; }
.ccm-connect-toggle:hover { border-color: #059669; color: #059669; }
.ccm-connect-toggle.active { background: #059669; color: #fff; border-color: #059669; }
.ccm-connect-check { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; font-size: 11px; font-weight: 700; }
.ccm-connect-toggle.active .ccm-connect-check { color: #fff; }
.ccm-connected-chip { display: inline-block; padding: 3px 8px; font-size: 11px; font-weight: 600; color: #065f46; background: #d1fae5; border: 1px solid #a7f3d0; border-radius: 10px; }

/* Add card button — compact pill (replaces old full-width dashed bar). Matches
   the visual language of other "+ Add" pills across the app (lesson modal's
   add-section button, gradebook chips, etc.) — same color, same border treatment. */
.ccm-add-card-row {
    margin-top: 14px;
    display: flex;
    justify-content: center;
}
.ccm-add-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: 1px dashed #059669;
    border-radius: 999px;
    background: #fff;
    color: #059669;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.ccm-add-card-btn:hover {
    background: #f0fdf4;
    border-style: solid;
    box-shadow: 0 1px 3px rgba(5, 150, 105, 0.12);
}

/* Class edit dropdown in calendar */
#ccmCalEditClass { width: 100%; padding: 5px 6px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 12px; color: #333; margin-bottom: 4px; }

/* Shared fixed footer pinned at bottom of modal */
.ccm-modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 32px; border-top: 1px solid #e0e0e0; background: white; flex-shrink: 0; border-radius: 0 0 8px 8px; }
.ccm-next-btn { min-width: 100px; }
.ccm-create-skip-btn { min-width: 80px; }
.ccm-btn-secondary { padding: 10px 24px; font-size: 13px; font-weight: 600; color: #374151; background: white; border: 1px solid #d1d5db; border-radius: 6px; cursor: pointer; transition: all 0.2s; letter-spacing: 0.3px; }
.ccm-btn-secondary:hover { border-color: #059669; color: #059669; background: #f0fdf4; }

/* Google Calendar sync button & hint */
.ccm-gcal-sync-btn { padding: 5px 12px; font-size: 12px; font-weight: 600; color: #059669; background: #f0fdf4; border: 1px solid #a7f3d0; border-radius: 6px; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.ccm-gcal-sync-btn:hover { background: #d1fae5; border-color: #059669; }
.ccm-gcal-hint { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; margin: 0 0 4px; background: #f0fdf4; border-radius: 6px; font-size: 12px; color: #555; line-height: 1.5; }

/* Google Calendar gate overlay — shown when not connected */
.ccm-gcal-gate { position: absolute; inset: 0; z-index: 10; background: rgba(255,255,255,0.92); display: flex; align-items: center; justify-content: center; border-radius: 0 0 8px 8px; }
.ccm-gcal-gate-content { text-align: center; max-width: 340px; }
.ccm-gcal-gate-title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 12px 0 6px; }
.ccm-gcal-gate-desc { font-size: 13px; color: #555; line-height: 1.6; margin-bottom: 20px; }
#ccm-schedule { position: relative; }

/* Document class linking */
.ccm-doc-class-link { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; margin-bottom: 8px; padding: 4px 8px; background: #f9fafb; border-radius: 4px; }
.ccm-doc-class-link label { font-size: 11px; color: #555; display: inline-flex; align-items: center; gap: 3px; cursor: pointer; white-space: nowrap; }
.ccm-doc-class-link input[type="checkbox"] { margin: 0; }

/* Expanded review cards */
.ccm-review-card { border: 1px solid #e0e0e0; border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
.ccm-review-card-name { font-size: 14px; font-weight: 700; color: #333; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ccm-review-card-row { font-size: 12px; color: #555; margin-top: 3px; line-height: 1.5; }

/* Curriculum warning */
.ccm-review-warning { background: #fffbeb; border: 1px solid #f59e0b; border-radius: 6px; padding: 10px 14px; margin-top: 16px; font-size: 12px; color: #92400e; line-height: 1.5; }

/* ===== MULTI-SELECT ===== */
.ccm-cal-block-selected {
    outline: 2px solid #3b82f6;
    outline-offset: -1px;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    z-index: 3;
}
.ccm-cal-block-selected:hover {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
    z-index: 3;
}

/* Selection action bar */
.ccm-selection-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: #eff6ff;
    border: 1px solid #93c5fd;
    border-radius: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.ccm-selection-count {
    font-size: 12px;
    font-weight: 700;
    color: #1d4ed8;
    white-space: nowrap;
}
.ccm-selection-label {
    font-size: 11px;
    color: #6b7280;
    font-weight: 600;
    white-space: nowrap;
}
.ccm-selection-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
}
.ccm-selection-class-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #555;
    background: #fff;
    border: 1.5px solid #d1d5db;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.ccm-selection-class-chip:hover {
    border-color: var(--chip-color);
    background: #f8f9fa;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.ccm-selection-btn {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    background: #fff;
    transition: all 0.15s;
    white-space: nowrap;
}
.ccm-selection-btn-deselect {
    color: #6b7280;
}
.ccm-selection-btn-deselect:hover {
    background: #f3f4f6;
}
.ccm-selection-btn-delete {
    color: #dc2626;
    border-color: #fca5a5;
}
.ccm-selection-btn-delete:hover {
    background: #fef2f2;
    border-color: #dc2626;
}

/* Save indicator */
.ccm-save-indicator {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    transition: all 0.2s;
    white-space: nowrap;
}
.ccm-save-saving {
    color: #2563eb;
    background: #eff6ff;
}
.ccm-save-saved {
    color: #059669;
    background: #f0fdf4;
}
.ccm-save-error {
    color: #dc2626;
    background: #fef2f2;
}

/* ===== Per-class term setup (used by student submissions calendar) ===== */
.ccm-term-setup {
    margin-top: 10px;
    margin-bottom: 10px;
}
.ccm-term-details {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}
.ccm-term-summary {
    cursor: pointer;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
    color: #333;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    list-style: none;
}
.ccm-term-summary::-webkit-details-marker { display: none; }
.ccm-term-summary::marker { display: none; }
.ccm-term-summary::before {
    content: '\25B8';
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.15s;
    color: #666;
    font-size: 10px;
}
.ccm-term-details[open] .ccm-term-summary::before {
    transform: rotate(90deg);
}
.ccm-term-hint {
    font-weight: 400;
    color: #999;
    font-size: 12px;
}
.ccm-term-body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ccm-term-row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 150px 150px 2fr;
    gap: 10px;
    align-items: end;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}
.ccm-term-row:last-child { border-bottom: none; padding-bottom: 0; }
.ccm-term-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    padding-bottom: 6px;
}
.ccm-term-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ccm-term-field--wide { min-width: 240px; }
.ccm-term-label {
    font-size: 10px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ccm-term-input {
    font-family: inherit;
    font-size: 12px;
    padding: 5px 8px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
    color: #333;
}
.ccm-term-input:focus {
    outline: none;
    border-color: #059669;
}
@media (max-width: 900px) {
    .ccm-term-row {
        grid-template-columns: 1fr 1fr;
    }
    .ccm-term-name { grid-column: span 2; }
    .ccm-term-field--wide { grid-column: span 2; }
}

/* ================================================================= */
/* ======== REDESIGNED: split-view modal + AI setup assistant ======== */
/* ================================================================= */

.ccm-container-split {
    width: min(1400px, 96vw);
    height: min(860px, 92vh);
}
.ccm-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ccm-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ccm-tab-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b7280;
    font-size: 11px;
    font-weight: 700;
    transition: background 0.2s, color 0.2s;
}
.ccm-tab.active .ccm-tab-num {
    background: #059669;
    color: #fff;
}

/* Split layout: full-width header + footer with the chat panel sitting in
   the middle band between them. */
.ccm-container-split {
    flex-direction: column !important;
}
.ccm-container-split > .ccm-header {
    flex-shrink: 0;
}
.ccm-container-split > .ccm-modal-footer {
    flex-shrink: 0;
}
.ccm-split {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}
.ccm-split-left {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e5e7eb;
    background: #fff;
    min-height: 0;
}
.ccm-split-left .ccm-tabs {
    flex-shrink: 0;
}
.ccm-split-left .ccm-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.ccm-split-right {
    /* Initial width before the split resizer mounts. Sized to roughly match
       the 42% defaultRightFraction the resizer will then snap to — picking
       a generous default here avoids a layout pop the moment the resizer
       wakes up. Teacher can drag the gutter to taste; persisted per user. */
    width: 540px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #f9fafb;
    min-height: 0;
    position: relative;
}
@media (max-width: 1200px) {
    .ccm-split-right { width: 420px; }
}

/* ===== AI chat panel ===== */
.ccm-chat-header {
    padding: 16px 18px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    flex-shrink: 0;
}
.ccm-chat-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ccm-chat-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}
.ccm-chat-title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}
.ccm-chat-status {
    font-size: 11px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 1px;
}
.ccm-chat-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #10b981;
    display: inline-block;
}
.ccm-chat-clear {
    background: none;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    width: 28px; height: 28px;
    color: #6b7280;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.ccm-chat-clear:hover {
    background: #f3f4f6;
    color: #111827;
}
.ccm-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
    min-height: 0;
}
.ccm-chat-welcome {
    text-align: center;
    padding: 24px 12px;
    color: #4b5563;
}
.ccm-chat-welcome-icon {
    font-size: 36px;
    margin-bottom: 12px;
}
.ccm-chat-welcome-title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 6px;
}
.ccm-chat-welcome-desc {
    font-size: 12px;
    line-height: 1.5;
    color: #6b7280;
}
.ccm-chat-msg {
    display: flex;
    margin-bottom: 12px;
}
.ccm-chat-msg-user { justify-content: flex-end; }
.ccm-chat-msg-ai   { justify-content: flex-start; }
.ccm-chat-bubble {
    max-width: 85%;
    padding: 10px 13px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
    word-wrap: break-word;
}
.ccm-chat-bubble-user {
    background: #059669;
    color: #fff;
    border-bottom-right-radius: 4px;
}
.ccm-chat-bubble-ai {
    background: #fff;
    color: #111827;
    border: 1px solid #e5e7eb;
    border-bottom-left-radius: 4px;
}
.ccm-chat-bubble-ai code {
    background: #f3f4f6;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12px;
    font-family: ui-monospace, monospace;
}
.ccm-chat-action-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    align-self: flex-start;
    animation: ccmActionPop 0.35s ease-out;
}
@keyframes ccmActionPop {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
.ccm-chat-msg-ai { flex-direction: column; }
.ccm-chat-typing {
    display: flex;
    gap: 4px;
    padding: 12px 14px;
}
.ccm-chat-typing span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #9ca3af;
    animation: ccmTypingBounce 1.4s infinite ease-in-out both;
}
.ccm-chat-typing span:nth-child(1) { animation-delay: -0.32s; }
.ccm-chat-typing span:nth-child(2) { animation-delay: -0.16s; }
@keyframes ccmTypingBounce {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}
.ccm-chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 18px 8px 18px;
}
.ccm-chat-suggestion {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 11.5px;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1.3;
    text-align: left;
}
.ccm-chat-suggestion:hover {
    border-color: #059669;
    color: #059669;
    background: #f0fdf4;
}
/* Chat input area: textarea on top, button row beneath */
.ccm-chat-input-area {
    padding: 10px 14px 14px 14px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ccm-chat-input {
    width: 100%;
    min-height: 38px;
    max-height: 140px;
    padding: 9px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 13px;
    font-family: inherit;
    resize: none;
    outline: none;
    transition: border-color 0.15s;
    line-height: 1.4;
    box-sizing: border-box;
    display: block;
}
.ccm-chat-input:focus {
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}
.ccm-chat-input-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-start;
}
.ccm-chat-btn {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    padding: 0;
    flex-shrink: 0;
}
.ccm-chat-btn:hover {
    border-color: #059669;
    background: #f0fdf4;
    color: #059669;
}
.ccm-chat-btn.recording {
    background: #fee2e2;
    border-color: #dc2626;
    color: #dc2626;
    animation: ccmMicPulse 1.3s ease-in-out infinite;
}
@keyframes ccmMicPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.3); }
    50%      { box-shadow: 0 0 0 5px rgba(220, 38, 38, 0); }
}
/* Spacer pushes the mic + send cluster to the right edge of the input row.
   Same trick as the unit-plan modal so the retro studio-mic sits adjacent
   to the send arrow rather than buried with the attach buttons. */
.ccm-chat-spacer {
    flex: 1 1 auto;
}
/* Retro studio-mic — matches the unit-plan modal's .up-chat-mic-btn. Round
   button (vs. the square attach buttons on the left) so the eye reads it
   as part of the send action cluster. .recording class is applied by
   window.tcMic; we pulse red exactly like unit-plan + lesson-modal mics. */
.ccm-chat-mic-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s, box-shadow 0.15s;
}
.ccm-chat-mic-btn:hover {
    background: #f0fdf4;
    border-color: #059669;
    color: #059669;
    transform: translateY(-1px);
}
.ccm-chat-mic-btn.recording {
    background: #fee2e2;
    border-color: #dc2626;
    color: #dc2626;
    animation: ccmMicPulse 1.3s ease-in-out infinite;
}
.ccm-chat-send {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: none;
    background: #059669;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    flex-shrink: 0;
    /* margin-left: auto removed — .ccm-chat-spacer above the mic now
       handles right-alignment of the mic + send cluster as a unit. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.ccm-chat-send:hover { background: #047857; }
.ccm-chat-send:active { transform: scale(0.96); }

/* File chip preview bar */
.ccm-chat-file-preview {
    padding: 8px 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    background: #fff;
    border-top: 1px solid #f3f4f6;
    flex-shrink: 0;
}
.ccm-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 4px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    font-size: 12px;
    max-width: 220px;
}
.ccm-file-chip-drive {
    background: #eff6ff;
    border-color: #bfdbfe;
}
.ccm-file-chip-thumb {
    width: 22px; height: 22px;
    object-fit: cover;
    border-radius: 50%;
}
.ccm-file-chip-icon {
    width: 22px; height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    font-size: 11px;
}
.ccm-file-chip-name {
    color: #374151;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ccm-file-chip-remove {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 14px;
    padding: 0 2px;
    line-height: 1;
}
.ccm-file-chip-remove:hover { color: #dc2626; }

/* Attachments inside sent message bubbles */
.ccm-chat-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
.ccm-chat-attachment {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 11.5px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.ccm-chat-attachment-img {
    width: 40px; height: 40px;
    object-fit: cover;
    border-radius: 4px;
}

/* Google Drive picker overlay — appears inside the chat panel */
.ccm-gdrive-picker {
    display: none;
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    max-height: 60%;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    flex-direction: column;
    overflow: hidden;
    z-index: 10;
}
.ccm-gdrive-picker.open { display: flex; }
.ccm-gdrive-picker-header {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}
.ccm-gdrive-picker-title {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
}
.ccm-gdrive-picker-close {
    background: none;
    border: none;
    font-size: 18px;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    width: 22px; height: 22px;
}
.ccm-gdrive-picker-search {
    padding: 10px 14px;
    border-bottom: 1px solid #f3f4f6;
}
.ccm-gdrive-picker-search input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 12px;
    box-sizing: border-box;
}
.ccm-gdrive-picker-files {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
    min-height: 0;
}
.ccm-gdrive-picker-loading,
.ccm-gdrive-picker-empty {
    padding: 16px;
    text-align: center;
    color: #9ca3af;
    font-size: 12px;
}
.ccm-gdrive-file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.15s;
}
.ccm-gdrive-file:hover { background: #f9fafb; }
.ccm-gdrive-file.added { opacity: 0.6; cursor: default; }
.ccm-gdrive-file-icon { font-size: 16px; }
.ccm-gdrive-file-info { flex: 1; min-width: 0; }
.ccm-gdrive-file-name {
    font-size: 12.5px;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ccm-gdrive-file-meta {
    font-size: 11px;
    color: #9ca3af;
}
.ccm-gdrive-file-check {
    color: #059669;
    font-size: 14px;
}
.ccm-gdrive-picker-status {
    padding: 8px 14px;
    font-size: 11px;
    color: #6b7280;
    border-top: 1px solid #f3f4f6;
    min-height: 14px;
}

/* ===== Schedule builder (replaces calendar grid) ===== */
.ccm-sched-hero {
    margin-bottom: 18px;
}
.ccm-sched-pattern {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 18px;
}
.ccm-sched-pattern-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    margin-bottom: 10px;
}
.ccm-sched-pattern-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.ccm-sched-pattern-opt {
    text-align: left;
    border: 2px solid #e5e7eb;
    background: #fff;
    border-radius: 8px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.15s;
}
.ccm-sched-pattern-opt:hover {
    border-color: #10b981;
    background: #f0fdf4;
}
.ccm-sched-pattern-opt.active {
    border-color: #059669;
    background: #ecfdf5;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}
.ccm-sched-pattern-title {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 3px;
}
.ccm-sched-pattern-desc {
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.4;
}
.ccm-sched-day-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ccm-sched-day-picker-label {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-right: 4px;
}
.ccm-sched-day-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s;
}
.ccm-sched-day-chip input {
    display: none;
}
.ccm-sched-day-chip:hover {
    border-color: #059669;
    color: #059669;
}
.ccm-sched-day-chip.active {
    background: #059669;
    border-color: #059669;
    color: #fff;
}
.ccm-sched-rot-input {
    width: 60px;
    padding: 5px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    text-align: center;
}
.ccm-sched-rot-hint {
    font-size: 11.5px;
    color: #6b7280;
}
.ccm-sched-start-date {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #e5e7eb;
}
.ccm-sched-start-date-label {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}
.ccm-sched-start-date-input {
    padding: 5px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    background: #fff;
    color: #111827;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ccm-sched-start-date-input:focus {
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}
.ccm-sched-start-date-hint {
    font-size: 11.5px;
    color: #059669;
    flex: 1 1 100%;
    line-height: 1.4;
}
.ccm-sched-start-date-hint-empty {
    color: #9ca3af;
    font-style: italic;
}
.ccm-sched-week-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #059669;
    margin: 14px 0 8px 0;
}

/* Per-class sub-tabs on Schedule tab — styled as a real tab bar. */
.ccm-sched-class-tabs {
    margin: -4px -4px 18px -4px;
}
.ccm-sched-class-tab-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 2px;
    border-bottom: 2px solid #e5e7eb;
    padding: 0 4px;
}
.ccm-sched-class-tab {
    --tab-accent: #059669;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    position: relative;
    top: 0;
}
.ccm-sched-class-tab:hover {
    color: #111827;
    background: #f3f4f6;
}
.ccm-sched-class-tab.active {
    color: var(--tab-accent, #059669);
    border-bottom-color: var(--tab-accent, #059669);
    background: #ffffff;
}
.ccm-sched-class-tab-all {
    margin-left: auto;
    font-weight: 500;
    font-size: 12.5px;
    color: #9ca3af;
}
.ccm-sched-class-tab-all.active {
    color: #111827;
    border-bottom-color: #111827;
}
.ccm-sched-class-tab-swatch {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #9ca3af;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px #ffffff;
}
.ccm-sched-class-tab-swatch-all {
    background: linear-gradient(135deg, #ef4444 0%, #f59e0b 33%, #10b981 66%, #3b82f6 100%);
}
.ccm-sched-class-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #e5e7eb;
    color: #374151;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
}
.ccm-sched-class-tab.active .ccm-sched-class-tab-count {
    background: color-mix(in srgb, var(--tab-accent, #059669) 18%, transparent);
    color: var(--tab-accent, #059669);
}

/* When a specific class is selected in the sub-tabs, tint the day-card
   grid with that class's accent so the scope is obvious without a banner. */
.ccm-sched-days[data-class-scope="single"] .ccm-sched-day-card {
    border-color: color-mix(in srgb, var(--sched-accent, #059669) 35%, #e5e7eb);
    box-shadow: inset 3px 0 0 var(--sched-accent, #059669);
}
.ccm-sched-days[data-class-scope="single"] .ccm-sched-day-head {
    background: color-mix(in srgb, var(--sched-accent, #059669) 8%, #ffffff);
    border-bottom-color: color-mix(in srgb, var(--sched-accent, #059669) 25%, #e5e7eb);
}
.ccm-sched-days[data-class-scope="single"] .ccm-sched-day-name {
    color: color-mix(in srgb, var(--sched-accent, #059669) 75%, #111827);
}
.ccm-sched-days[data-class-scope="single"] .ccm-sched-period {
    border-left-color: var(--sched-accent, #059669);
}
.ccm-sched-day-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}
.ccm-sched-day-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.ccm-sched-day-head {
    padding: 10px 14px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ccm-sched-day-name {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
}
.ccm-sched-day-rename {
    flex: 1;
    min-width: 90px;
    padding: 3px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    font-size: 11.5px;
    background: #fff;
}
.ccm-sched-day-count {
    margin-left: auto;
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
}
.ccm-sched-periods {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-height: 44px;
}
.ccm-sched-period-empty {
    color: #9ca3af;
    font-size: 12px;
    text-align: center;
    padding: 12px 6px;
    font-style: italic;
}
.ccm-sched-period {
    --period-accent: #9ca3af;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-left: 4px solid var(--period-accent);
    border-radius: 8px;
}
.ccm-sched-period-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.ccm-sched-period-row-top .ccm-sched-period-label {
    flex: 2 1 0;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 10px;
}
.ccm-sched-period-row-top .ccm-sched-period-room {
    flex: 1 1 0;
    min-width: 0;
}
.ccm-sched-period-row-bottom {
    flex-wrap: wrap;
}
.ccm-sched-period-row-bottom .ccm-sched-period-times {
    flex: 1 1 auto;
    justify-content: center;
}
.ccm-sched-period-row-bottom .ccm-sched-period-class {
    flex: 1 1 160px;
    min-width: 0;
}
.ccm-sched-period-label,
.ccm-sched-period-room,
.ccm-sched-period-class,
.ccm-sched-time {
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 12.5px;
    background: #fff;
    color: #111827;
    outline: none;
    min-width: 0;
}
.ccm-sched-period-label:focus,
.ccm-sched-period-room:focus,
.ccm-sched-period-class:focus,
.ccm-sched-time:focus {
    border-color: #059669;
    box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.1);
}
.ccm-sched-period-times {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
}
.ccm-sched-period-times .ccm-sched-time {
    flex: 1 1 0;
    width: auto;
    min-width: 110px;
    text-align: center;
    padding: 6px 6px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: #111827;
    letter-spacing: 0.2px;
}
.ccm-sched-period-times .ccm-sched-time:focus {
    box-shadow: none;
    border: none;
    background: #f0fdf4;
    border-radius: 4px;
}
.ccm-sched-time-sep {
    color: #9ca3af;
    font-weight: 600;
    font-size: 13px;
}
.ccm-sched-period-del {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 18px;
    cursor: pointer;
    width: 22px; height: 22px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.ccm-sched-period-del:hover {
    background: #fee2e2;
    color: #dc2626;
}
.ccm-sched-add-period {
    background: none;
    border: 1px dashed #d1d5db;
    color: #6b7280;
    padding: 8px;
    border-radius: 0;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.15s;
    border-top: 1px dashed #d1d5db;
    border-left: none;
    border-right: none;
    border-bottom: none;
}
.ccm-sched-add-period:hover {
    background: #f0fdf4;
    color: #059669;
}
.ccm-sched-add-plus {
    font-size: 14px;
    font-weight: 700;
    margin-right: 4px;
}
.ccm-sched-empty {
    text-align: center;
    padding: 32px 16px;
    color: #9ca3af;
    font-size: 13px;
    font-style: italic;
    background: #f9fafb;
    border: 1px dashed #e5e7eb;
    border-radius: 8px;
}

/* Collapsible advanced section */
.ccm-sched-advanced {
    margin-top: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fafafa;
}
.ccm-sched-advanced > summary {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    list-style: none;
    user-select: none;
}
.ccm-sched-advanced > summary::-webkit-details-marker { display: none; }
.ccm-sched-advanced > summary::before {
    content: '▸';
    margin-right: 6px;
    transition: transform 0.15s;
    display: inline-block;
}
.ccm-sched-advanced[open] > summary::before {
    transform: rotate(90deg);
}
.ccm-sched-advanced-body {
    padding: 0 14px 14px 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.ccm-sched-advanced-body .ccm-gcal-hint {
    flex-basis: 100%;
    margin-top: 6px;
}

/* Connected pills now live inside the card title row, so the
   floating chain-link badge is no longer needed. */


/* ============================================================
   Weekday picker — "Meets on" field in the class card form.
   Drives the student's Today's Classes filter + weekly calendar.
   ============================================================ */
.ccm-weekday-picker {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.ccm-day-btn {
    flex: 1 1 auto;
    min-width: 56px;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    background: #fff;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    font-family: inherit;
}
.ccm-day-btn:hover {
    border-color: #059669;
    color: #047857;
}
.ccm-day-btn.is-active {
    background: #ecfdf5;
    color: #047857;
    border-color: #059669;
}

/* ============================================================
   AI Setup Assistant — prechat launcher overlay
   ------------------------------------------------------------
   Mirrors the unit-plan / lesson-modal launcher pattern. The
   .ld-launcher base styles (hero head, brainstorm composer,
   2-tile grid, divider) live in lesson-modal.css; below we
   wire the activation toggle to .ccm-split-right.ccm-prechat
   and add the CCM-specific Start button.
   ============================================================ */
.ccm-split-right > .ld-launcher {
    /* Hidden by default — only shows when .ccm-prechat is on the panel. */
    display: none;
    background: #fafaf7;
}
.ccm-split-right.ccm-prechat > .ld-launcher {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}
.ccm-split-right.ccm-prechat > .ccm-chat-header,
.ccm-split-right.ccm-prechat > .ccm-chat-messages,
.ccm-split-right.ccm-prechat > .ccm-chat-file-preview,
.ccm-split-right.ccm-prechat > .ccm-chat-suggestions,
.ccm-split-right.ccm-prechat > .ccm-chat-input-area,
.ccm-split-right.ccm-prechat > .ccm-gdrive-picker {
    display: none !important;
}

/* Start button inside the launcher's brainstorm-foot. Sits to the right
   of the character count; promotes the green Setup brand color. */
.ccm-launcher-send-btn {
    background: linear-gradient(135deg, #16a34a 0%, #059669 100%);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.22);
    transition: transform 0.12s, box-shadow 0.12s;
}
.ccm-launcher-send-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.28);
}