/* css/components/modal_recap.css */

/* Uses .modal-overlay and .modal-content from modal_call.css or global modal styles */

.recap-modal { /* Content box for session-recap-screen */
    max-width: 650px;
    text-align: left; /* Override default center */
    padding: 0; /* Header/footer/body control padding */
}

.recap-modal .modal-title { /* For <h2>Call Debrief</h2> */
    text-align: center; font-size: 1.8em;
    color: var(--primary-color); margin-bottom: var(--spacing-xs);
    padding-top: var(--spacing-lg); /* Add padding if no separate header */
}
.recap-modal .modal-subtitle { /* For #recap-connector-name */
    text-align: center; font-size: 1.1em; color: var(--text-color-muted);
    margin-bottom: var(--spacing-lg); font-weight: var(--font-weight-medium);
}
/* If using .modal-header for recap title area, style it accordingly */

.recap-body-content { /* Class for the main scrollable body of recap */
    padding: var(--spacing-md) var(--spacing-lg);
}
.recap-body-content p { font-size: 0.95em; color: var(--text-color-dark); margin-bottom: var(--spacing-xs); }
.recap-body-content p strong { color: var(--text-color-dark); font-weight: var(--font-weight-medium); }

.recap-section {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px dashed var(--border-color-light);
}
.recap-section:last-child { border-bottom: none; margin-bottom: 0; }

.recap-section h4 {
    font-size: 1.1em; color: var(--primary-color);
    margin-bottom: var(--spacing-sm); display: flex; align-items: center;
}
.recap-section h4 i { margin-right: var(--spacing-sm); font-size: 1.05em; opacity: 0.9; }

.recap-section ul { list-style: none; padding-left: var(--spacing-xs); }
.recap-section ul li {
    font-size: 0.9em; color: var(--text-color-muted);
    margin-bottom: var(--spacing-xs); padding-left: var(--spacing-lg); position: relative;
}
.recap-section ul li::before { /* Custom bullet */
    content: '✓'; color: var(--success-color);
    position: absolute; left: 0; top: 1px;
    font-weight: var(--font-weight-bold); font-size: 1.1em;
}

.simple-close-btn { /* For #close-recap-btn and other simple modal close buttons */
    position: absolute; top: var(--spacing-md); right: var(--spacing-md);
    background: none; border: none; font-size: 1.8em;
    color: var(--text-color-muted); line-height: 1; cursor: pointer;
    padding: var(--spacing-xs);
}
.simple-close-btn:hover { color: var(--text-color-dark); }

.recap-actions {
    /* Uses .modal-footer base styles */
    text-align: center; /* Center button if only one */
    justify-content: center;
    padding: var(--spacing-lg);
}
/* Uses .modal-btn and .primary-btn from buttons.css for #recap-download-transcript-btn */

/* Dark Mode Adjustments for Recap Modal */
body.dark-mode .recap-modal .modal-title { color: var(--primary-color-lighter); }
body.dark-mode .recap-modal .modal-subtitle { color: #a0a3a8; }
body.dark-mode .recap-body-content p { color: var(--text-color-light); }
body.dark-mode .recap-body-content p strong { color: var(--text-color-light); }
body.dark-mode .recap-section { border-bottom-color: var(--border-color-dark); }
body.dark-mode .recap-section h4 { color: var(--primary-color-lighter); }
body.dark-mode .recap-section ul li { color: #b0b3b8; }
body.dark-mode .recap-section ul li::before { color: #32cd32; /* Brighter green */ }
body.dark-mode .simple-close-btn { color: #8a8d91; }
body.dark-mode .simple-close-btn:hover { color: var(--text-color-light); }