/* MIT Media Lab Chat Study - Main Styles */
/* Open WebUI Inspired Interface */

@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&display=swap');

:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-muted: #9ca3af;
    --border-color: #e5e7eb;
    --accent-color: #374151;
    --accent-hover: #1f2937;
    --success-color: #10b981;
    --warning-color: #6b7280;
    --error-color: #ef4444;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
}

/* ====================================== */
/* INSTRUCTION MODAL STYLES */
/* ====================================== */

.instruction-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.instruction-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.instruction-modal-content {
    position: relative;
    background: white;
    border-radius: var(--radius-lg);
    padding: 2rem;
    max-width: 500px;
    width: 90%;
    box-shadow: var(--shadow-lg);
    z-index: 10001;
}

.instruction-modal-content h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-size: 1.5rem;
}

.instruction-modal-content p {
    margin-bottom: 1rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.instruction-modal-content ul {
    margin: 0.5rem 0 1rem 1.5rem;
    color: var(--text-secondary);
}

.instruction-modal-content ul li {
    margin-bottom: 0.5rem;
}

.instruction-modal-content button {
    margin-top: 1rem;
    width: 100%;
}

/* Predict-transition toast: a non-blocking banner (no overlay, no backdrop blur) pinned to
   the top of the screen so the interface stays visible and usable underneath it. */
.predict-transition-toast {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
}
.predict-transition-toast-content {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 1rem 1.5rem;
    max-width: 420px;
    text-align: center;
}
.predict-transition-toast-content h4 {
    margin: 0 0 0.35rem 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}
.predict-transition-toast-content p {
    margin: 0 0 0.5rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.predict-transition-toast-content button {
    margin-top: 0.25rem;
    width: 100%;
}

/* Visualization Explanation Modal - Positioned on left side */
#visualizationExplanationModal {
    justify-content: flex-start;
    padding-left: 15%;
}

#visualizationExplanationModal .instruction-modal-overlay {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
}

#visualizationExplanationModal .instruction-modal-content {
    max-width: 420px;
    margin-left: 0;
}

/* Prompt Refinement Modal - Positioned near top-left (above Back to Config button) */
#promptRefinementModal {
    justify-content: flex-start;
    align-items: flex-start;
    padding-left: 2rem;
    padding-top: 5rem;
}

#promptRefinementModal .instruction-modal-overlay {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
}

#promptRefinementModal .instruction-modal-content {
    max-width: 450px;
    margin-left: 0;
}

/* Avatar Selection Interface Styles */
.avatar-selection-interface {
    padding: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.avatar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 2rem 1rem;
    max-width: 600px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .avatar-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.avatar-option {
    cursor: pointer;
    border: 3px solid transparent;
    border-radius: 50%;
    transition: all 0.3s ease;
    position: relative;
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    aspect-ratio: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-option:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
    border-color: var(--text-muted);
}

.avatar-option img {
    width: 100%;
    height: 100%;
    display: block;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
}

.avatar-check {
    display: none;
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--accent-color);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    z-index: 10;
}

.avatar-check i {
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-option.selected {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-color);
}

.avatar-selection-actions {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

* {
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* Full-viewport mode — applied when chat interface is active */
body.chat-active {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.chat-active .site-header {
    flex-shrink: 0;
}

body.chat-active #super-container,
body.chat-active .main-container,
body.chat-active .page-content,
body.chat-active #task-main-content,
body.chat-active .dynamic-chat-container {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: none;
    min-height: 0;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.site-header {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.header-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

#experiment-title {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    text-align: center;
    flex: 1;
}

.main-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.5rem 1rem;
    min-height: calc(100vh - 80px);
}

.page-title-header {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 2rem 0;
    text-align: center;
}

.page-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Chat Interface Styling */
.chat-container {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    height: 70vh;
    display: flex;
    flex-direction: column;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.message {
    display: flex;
    gap: 0.75rem;
    max-width: 80%;
    align-items: flex-start;
}

.message.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.message.assistant {
    align-self: flex-start;
}

.message-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.75rem;
    flex-shrink: 0;
}

.message.user .message-avatar {
    background-color: var(--accent-color);
    color: white;
}

.message.assistant .message-avatar {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.message-content {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    word-wrap: break-word;
}

.message.user .message-content {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
    padding: 0.5rem 1rem;
}

.message.assistant .message-content {
    /* background: linear-gradient(to right, rgba(155, 213, 136, 0.4), rgba(255, 143, 139, 0.4)); */
    background: linear-gradient(to right, #E0F7FF, #E5EAFF);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.chat-input-container {
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
}

.chat-input-wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.chat-input {
    flex: 1;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    font-size: 0.875rem;
    resize: none;
    min-height: 2.5rem;
    max-height: 8rem;
    font-family: inherit;
}

.chat-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
}

.chat-input::placeholder {
    color: var(--text-muted);
}

.send-button {
    background-color: var(--accent-color);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    padding: 0 1rem;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.send-button:hover {
    background-color: var(--accent-hover);
}

.send-button:disabled {
    background-color: var(--text-muted);
    cursor: not-allowed;
}

/* Button Styling */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
    font-size: 0.875rem;
    gap: 0.5rem;
}

.btn-primary {
    background-color: var(--accent-color);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--accent-hover);
}

.btn-primary:disabled {
    background-color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-secondary {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background-color: var(--border-color);
}

.right-button {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

/* Form Styling */
.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

.form-control {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.form-control:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
}

/* Card Styling — explicitly override Bootstrap's .card defaults */
.card {
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 1.5rem;
}

.trialbox {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Utility Classes */
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.hidden { display: none !important; }
.mt-4 { margin-top: 1rem; }
.mb-4 { margin-bottom: 1rem; }
.p-4 { padding: 1rem; }

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Enhanced Chat Interface Styles */
.chat-interface {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.chat-left-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-right-panel {
    /* Divider sits 25px further left than the plain 55% split, handing that width to the
       chat log on the right. The sunburst scales to its container, so the loss comes out of
       the whitespace around it rather than shrinking the chart itself. */
    width: calc(55% - 25px);
    min-width: 395px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--border-color);
    position: relative;
}

#chatPersonaChart {
    flex: 1 1 0;
    min-height: 0;
    border: none;
    border-radius: 0;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#chatPersonaChart svg {
    width: 100% !important;
    height: 100% !important;
}

#traitDriftPanel {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#driftAxisContainer {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden; /* vertical timeline only — never scroll the axis sideways */
}

.chat-panel-header {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    height: 65px;
    flex-shrink: 0;
}

.chat-persona-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    height: 48px;
    flex-shrink: 0;
}

.chat-persona-header h4 {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.message {
    display: flex;
    gap: 0.75rem;
    max-width: 80%;
    align-items: flex-start;
    animation: messageSlideIn 0.3s ease-out;
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message.user-message {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.message.assistant-message {
    align-self: flex-start;
}

.message-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.75rem;
    flex-shrink: 0;
}

.message.user-message .message-avatar {
    background-color: var(--accent-color);
    color: white;
}

.message.assistant-message .message-avatar {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.message-content {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    word-wrap: break-word;
    position: relative;
    min-width: 200px;
}

.message.user-message .message-content {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
    padding: 0.5rem 1rem;
}

.message.assistant-message .message-content {
    /* Gradient set dynamically per-message by updateAssistantMessageGradient() in chat.js */
    /* background: linear-gradient(to right, rgba(155, 213, 136, 0.2), rgba(255, 143, 139, 0.2)); */
    background: linear-gradient(to right, #E0F7FF, #E5EAFF);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    opacity: 0.7;
}

.message-sender {
    font-weight: 600;
}

.message-time {
    font-size: 0.7rem;
}

.message-text {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 0;
}

.message-actions {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s;
    margin-top: 0.25rem;
}

.message:hover .message-actions {
    opacity: 1;
}

.action-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    transition: all 0.2s;
}

.action-btn:hover {
    background-color: var(--border-color);
    color: var(--text-primary);
}

.action-btn.liked {
    color: var(--accent-color);
}

.input-container {
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.input-wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.input-actions {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.input-field-container {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    flex: 1;
}

.message-input {
    flex: 1;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    font-size: 0.875rem;
    resize: none;
    min-height: 2.5rem;
    max-height: 8rem;
    font-family: inherit;
    transition: border-color 0.2s;
}

.message-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
}

.message-input::placeholder {
    color: var(--text-muted);
}

.send-button {
    background-color: var(--accent-color);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    padding: 0 1rem;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 3rem;
    justify-content: center;
    align-self: stretch;
}

.send-button:hover:not(:disabled) {
    background-color: var(--accent-hover);
}

.send-button:disabled {
    background-color: var(--text-muted);
    cursor: not-allowed;
}

.input-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.typing-indicator {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.typing-dots {
    display: flex;
    gap: 0.25rem;
}

.typing-dots span {
    width: 4px;
    height: 4px;
    background-color: var(--accent-color);
    border-radius: 50%;
    animation: typingDot 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typingDot {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.input-hints {
    font-size: 0.7rem;
}


.form-text {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* System Prompt Configuration Styles */
.system-prompt-interface {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem;
    height: calc(100vh - 100px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.config-header {
    text-align: center;
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.config-header h3 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.config-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.config-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    flex: 1;
    overflow: hidden;
}

/* Left column: System Prompt Editor */
.system-prompt-editor-column {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.system-prompt-editor-column .form-group {
    margin-bottom: 0.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Allow it to shrink */
    overflow: hidden;
}

.system-prompt-textarea {
    flex: 1;
    min-height: 0; /* Allow proper shrinking */
    resize: none;
    line-height: 1.6;
    overflow-y: auto;
    font-family: 'Geist Mono', monospace;
}

.system-prompt-textarea:focus {
    background-color: var(--bg-primary); /* Lighter shade on focus */
    color: var(--text-primary);
    border-color: var(--accent-color);
    outline: none;
}

/* Right column: Persona Analysis */
.persona-analysis-column {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.persona-section-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.expertise-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.expertise-tag {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
}

.expertise-tag:hover {
    background-color: var(--border-color);
}

.expertise-tag input[type="checkbox"] {
    margin: 0;
}

.response-style-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.personality-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.personality-select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
}

.personality-select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
}

.style-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
}

.style-option:hover {
    background-color: var(--border-color);
}

.style-option input[type="radio"] {
    margin: 0;
}

/* Separate wrappers for each section */
.preview-section-wrapper,
.persona-section-wrapper {
    display: flex;
    flex-direction: column;
}

.preview-section {
    margin-top: 0;
    padding-top: 0;
}

.preview-section h4 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.preview-box {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    min-height: 200px;
    max-height: 300px;
    overflow-y: auto;
    font-size: 0.85rem;
}

/* Persona placeholder when no data */
.persona-placeholder {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-text {
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
    font-style: italic;
}

.config-actions {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem 1.5rem;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.persona-check-buttons {
    flex-shrink: 0;
}

.dynamic-chat-container {
    /* min-height removed — flex chain from body.chat-active controls sizing */
}

/* Persona Vector Visualization Styles */
.persona-visualization {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-top: 0;
    padding-top: 0;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.center-loading-arc {
    transform-origin: 0px 0px;
    animation: centerSpin 0.8s linear infinite;
}

.trait-drift-panel {
    border-top: 1px solid var(--border-color);
    padding: 1rem;
}

.drift-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.drift-header span {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.drift-close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.drift-close-btn:hover {
    color: var(--text-primary);
}

.drift-info-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.drift-info-btn:hover {
    color: var(--accent-primary);
}

.persona-visualization h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.persona-chart {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.persona-bar-item {
    margin-bottom: 1rem;
}

.persona-bar-item:last-child {
    margin-bottom: 0;
}

.persona-bar-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.persona-bar-name {
    color: var(--text-primary);
    font-weight: 500;
    text-transform: capitalize;
}

.persona-bar-value {
    color: var(--text-secondary);
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
}

.persona-bar-track {
    position: relative;
    width: 100%;
    height: 24px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.persona-bar-background {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, 
        var(--error-color) 0%, 
        var(--error-color) 25%, 
        var(--bg-tertiary) 50%, 
        var(--success-color) 75%, 
        var(--success-color) 100%);
    opacity: 0.2;
}

.persona-bar-center {
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: var(--border-color);
    z-index: 1;
}

.persona-bar-fill {
    position: absolute;
    height: 100%;
    background-color: var(--accent-color);
    transition: width 0.6s ease-out, left 0.6s ease-out;
    z-index: 2;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 8px rgba(55, 65, 81, 0.4);
}

.persona-bar-fill.negative {
    background: linear-gradient(to left, var(--accent-color), var(--error-color));
}

.persona-bar-fill.positive {
    background: linear-gradient(to right, var(--accent-color), var(--success-color));
}

.persona-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: 'Courier New', monospace;
}

.persona-axis-tick {
    text-align: center;
    flex: 1;
}

/* Bar Chart Container */
.persona-bar-chart {
    padding: 1rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 10px;
    margin: 1rem 0;
}

#personaBarChartContainer {
    margin: 1rem 0;
}

/* ========================================
   Persona Sunburst Visualization Styles
   ======================================== */

/* Sunburst Container */
.persona-sunburst-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    min-height: 0;
}

#personaChartSunburst,
#chatPersonaChartSunburst {
    flex: 1;
    min-height: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#personaSunburstContainer svg,
#personaChartSunburst svg,
#chatPersonaChartSunburst svg {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

/* Persona Vector Display Modal */
#personaVectorDisplay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 1rem;
}

.persona-vector-results {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.persona-vector-results.error {
    max-width: 500px;
    text-align: center;
}

.persona-vector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 1rem;
}

.persona-vector-header h3 {
    margin: 0;
    font-size: 1.75rem;
    color: #212529;
}

.persona-vector-header .close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6c757d;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    transition: color 0.2s;
}

.persona-vector-header .close-btn:hover {
    color: #dc3545;
}

/* Persona Details Section */
.persona-vector-details {
    margin-top: 1.5rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.persona-vector-details h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: #495057;
}

.persona-vector-ratings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.persona-vector-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: white;
    border-radius: 6px;
    border-left: 3px solid #007bff;
}

.persona-vector-label {
    font-weight: 600;
    color: #495057;
}

.persona-vector-value {
    font-family: 'Courier New', monospace;
    color: #212529;
    font-weight: bold;
}

/* System Prompt Section */
.system-prompt-used {
    margin-top: 1.5rem;
    padding: 1rem;
    background: #f3f4f6;
    border-radius: 8px;
    border-left: 4px solid #374151;
}

.system-prompt-used strong {
    color: #1f2937;
    display: block;
    margin-bottom: 0.5rem;
}

.system-prompt-used p {
    margin: 0;
    color: #495057;
    line-height: 1.6;
}

/* Sunburst-specific styles for persona chart */
#personaChartSunburst {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
}

#personaChartSunburst svg {
    max-width: 100%;
    height: auto;
}

/* Responsive Design */
@media (max-width: 768px) {
    .main-container {
        padding: 1rem 0.5rem;
    }

    .chat-container {
        height: 60vh;
    }

    .message {
        max-width: 90%;
    }

    .site-header .container {
        padding: 0 0.5rem;
    }

    #experiment-title {
        font-size: 1.25rem;
    }

    .chat-interface {
        flex-direction: column;
    }

    .chat-right-panel {
        width: 100%;
        min-width: unset;
        flex: 0 0 45vh;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .input-actions {
        display: none;
    }

    /* Stack form and preview columns on mobile */
    .config-form {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .preview-box,
    .persona-placeholder {
        min-height: 200px;
        max-height: 300px;
    }

    .persona-chart {
        min-height: 300px;
    }
}

/* ============================================
   PRE-TASK SURVEY INLINE STYLES
   ============================================ */

/* Survey Container (inline in right column) */
.survey-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Survey Header Inline */
.survey-header-inline {
    padding: 1rem 0 1rem 0;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 1rem;
}

.survey-header-inline h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.survey-description-inline {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Survey Content Inline */
.survey-content-inline {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.5rem;
}

/* Custom scrollbar for inline survey */
.survey-content-inline::-webkit-scrollbar {
    width: 8px;
}

.survey-content-inline::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 4px;
}

.survey-content-inline::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.survey-content-inline::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Survey Phase Container */
.survey-phase {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 600px;
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Phase Header - scrolls with content */
.phase-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.phase-header h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.phase-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.question-label {
    display: block;
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.5;
}

/* Likert Scale (7-point for Phase 1 and 3) */
.likert-scale {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.likert-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.likert-option input[type="radio"] {
    display: none;
}

.likert-option label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--bg-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    color: var(--text-secondary);
}

.likert-option input[type="radio"]:checked + label {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
    transform: scale(1.05);
}

.likert-option label:hover {
    border-color: var(--accent-color);
    background-color: var(--bg-tertiary);
}

.likert-option input[type="radio"]:checked + label:hover {
    background-color: var(--accent-hover);
}

/* Scale Labels */
.scale-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 0.5rem;
}

/* Phase content wrapper - scrollable section (includes header) */
.phase-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 0.5rem 0 0;
    margin-bottom: 0;
}

/* Phase header inside scrollable content */
.phase-content .phase-header {
    padding-top: 0;
    margin-top: 0;
}

/* Individual survey questions and trait container within phase content */
.phase-content .survey-question {
    margin-bottom: 2rem;
}

.phase-content .survey-question:last-child {
    margin-bottom: 0;
}

.trait-predictions-container {
    /* No need for flex properties here since it's inside phase-content */
    padding-right: 0.5rem;
}

/* Custom scrollbar for scrollable survey content */
.phase-content::-webkit-scrollbar {
    width: 8px;
}

.phase-content::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 4px;
}

.phase-content::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.phase-content::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Trait Pair */
.trait-pair {
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

/* Trait Item */
.trait-item {
    margin-bottom: 0.5rem;
}

.trait-item:last-child {
    margin-bottom: 0;
}

.trait-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Trait Header Wrapper (contains endpoints and tooltip) */
.trait-header-wrapper {
    position: relative;
    margin-bottom: 0.5rem;
}

/* Trait Endpoints Container (left and right labels) */
.trait-endpoints {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Trait Endpoint Labels (for polar scales) */
.trait-endpoint-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Position tooltip icon centered above the scale */
.trait-header-wrapper .trait-tooltip {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* Trait Tooltip */
.trait-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
}

.trait-tooltip .fa-info-circle {
    font-size: 0.85rem;
    color: var(--accent-color);
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.trait-tooltip:hover .fa-info-circle {
    opacity: 1;
}

.trait-tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.95);
    color: var(--text-primary);
    padding: 1.5rem;
    border-radius: 1rem;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.5;
    white-space: normal;
    max-width: 400px;
    min-width: 300px;
    z-index: 10000;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    border: 1px solid rgba(156, 163, 175, 0.2);
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    backdrop-filter: blur(8px);
}

.trait-tooltip:hover .trait-tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Trait Scale (-10 to +10 radio buttons) */
.trait-scale {
    display: flex;
    gap: 0.35rem;
    flex-wrap: nowrap;
    justify-content: center;
}

.trait-scale input[type="radio"] {
    display: none;
}

.trait-scale input[type="radio"] + label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 26px;
    padding: 0 0.1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.trait-scale input[type="radio"]:checked + label {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 2px 4px rgba(55, 65, 81, 0.3);
}

.trait-scale input[type="radio"] + label:hover {
    border-color: var(--accent-color);
    background-color: var(--bg-tertiary);
}

.trait-scale input[type="radio"]:checked + label:hover {
    background-color: var(--accent-hover);
}

.trait-scale-axis {
    display: flex;
    justify-content: space-between;
    padding: 0 28%;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Progressive trait reveal */
.trait-reveal-hidden {
    display: none;
}

.trait-progress-counter {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--accent-color);
    text-align: center;
    margin-bottom: 0.75rem;
    padding: 0.4rem 1rem;
    position: sticky;
    top: 0;
    z-index: 10;
    background: #eff6ff;
    border: 2px solid var(--accent-color);
    border-radius: var(--radius-sm);
}

/* Phase Actions - Fixed at bottom */
.phase-actions {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    padding: 0.75rem 0.5rem 0 0;
    border-top: none;
    margin-top: 0;
    background-color: transparent;
}

.phase-actions .btn {
    min-width: 100px;
    padding: 0.5rem 1.5rem;
    font-size: 0.95rem;
}

/* Button States */
.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--text-muted);
    border-color: var(--text-muted);
}

.btn-primary:disabled:hover {
    background-color: var(--text-muted);
    border-color: var(--text-muted);
    transform: none;
}

/* Responsive Design for Survey Modal */
@media (max-width: 768px) {
    .survey-modal {
        width: 95%;
        max-height: 90vh;
    }

    .survey-content {
        padding: 1.5rem;
    }

    .survey-header {
        padding: 1rem;
    }

    .survey-header h3 {
        font-size: 1.25rem;
    }

    .likert-scale {
        gap: 0.25rem;
    }

    .likert-option label {
        height: 35px;
        font-size: 0.85rem;
    }

    .trait-pair {
        padding: 0.5rem;
    }

    .trait-scale {
        gap: 0.2rem;
    }

    .trait-scale input[type="radio"] + label {
        min-width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    .trait-predictions-container {
        max-height: 40vh;
    }
}

/* ============================================
   END CHAT & PREDICT BEHAVIOR STYLES
   ============================================ */
.end-chat-bar {
    display: flex;
    justify-content: center;
    padding: 0.5rem 1rem;
}

.btn-end-chat {
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s;
}
.btn-end-chat:hover {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

/* Small shortcut in the visualization panel header — same destination as End Chat */
.btn-skip-predict {
    padding: 0.2rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}
.btn-skip-predict:hover {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

/* Predict behavior panel (injected inline below chat) */
.predict-panel {
    border-top: 2px solid #1f2937;
    margin-top: 1rem;
    padding: 1.25rem 0.5rem;
}
.predict-panel .predict-header {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    padding: 12px 16px;
    border-radius: 8px;
    color: white;
    margin-bottom: 1rem;
}
.predict-panel .predict-header h5 { margin: 0 0 4px 0; font-size: 1.115rem; }
.predict-panel .predict-header p  { margin: 0; font-size: 0.915rem; opacity: 0.9; }

.predict-rating-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.predict-rating-item {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 14px;
}
.predict-rating-item .top {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 3px;
}
.predict-rating-item .top .neg { color: #ef4444; }
.predict-rating-item .top .pos { color: #22c55e; }
/* Plain, un-filled track + a styled thumb instead of `accent-color` — accent-color makes
   Chromium fill the track from the left edge to the thumb, which reads as a one-directional
   progress bar. This slider is centered at 0 (neutral) and can move either way, so no fill. */
.predict-rating-item input[type="range"] {
    width: 100%;
    display: block;
    margin: 0; /* drop the browser's default range margin, which sits in this same gap */
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}
.predict-rating-item input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: #c3c9d1;
}
.predict-rating-item input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: #c3c9d1;
}
.predict-rating-item input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -6px; /* center the 16px thumb on the 4px track */
    border-radius: 50%;
    background: #2563eb;
    cursor: pointer;
}
.predict-rating-item input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: #2563eb;
    cursor: pointer;
}
.predict-rating-item .val {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin-top: 1px;
}

/* Calibration results */
.predict-results {
    margin-top: 1rem;
}
/* Results subtitle runs 1px smaller than the quiz header's — later in the file than
   `.predict-panel .predict-header p`, so it wins at equal specificity. */
.predict-results .predict-header p { font-size: 0.8525rem; }
.predict-scores {
    display: flex;
    gap: 16px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
/* Same cell treatment as .predict-rating-item / .predict-breakdown-item */
.predict-score-card {
    flex: 1;
    min-width: 140px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px;
    text-align: center;
}
.predict-score-card .label {
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.predict-score-card .value {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1;
}
.predict-score-card .sub {
    font-size: 11px;
    color: #6b7280;
    margin-top: 4px;
}
/* One shared grid for every row (rather than each row sizing its own) so the label and card
   columns come out the same width on every row, instead of each row's card width depending
   on that row's own label length. */
.predict-breakdown {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    gap: 8px;
}
/* `display: contents` makes the row wrapper disappear as a box — its label + card children
   become direct items of .predict-breakdown's grid, sharing its column tracks. */
.predict-breakdown-row {
    display: contents;
}
.predict-breakdown-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    white-space: nowrap;
    line-height: 1.3;
    /* Padding widens the (max-content) label column, which narrows the card column next to
       it since the two share the row's width. */
    padding: 0 25px;
}
/* Matches .predict-rating-item (the quiz cells) so results read as the same component */
.predict-breakdown-item {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 10px;
}
.predict-breakdown-item .row-top {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 3px;
}
.predict-breakdown-item .accuracy  { font-size: 13px; font-weight: 600; }
/* Predicted (left) and Actual (right) share one row; each is its own two-line block — the
   "Predicted:"/"Actual:" label on top, the value (e.g. "Neutral (0%)") below it via <br>,
   which is what keeps the value from wrapping mid-line the way inline text did. */
.predict-breakdown-item .details {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: #6b7280;
}
.predict-breakdown-item .details .predicted { text-align: left; white-space: nowrap; }
.predict-breakdown-item .details .actual    { text-align: right; white-space: nowrap; }
/* Narrow screens: the fixed label column gets too tight next to the card, so stack the
   label above it instead of squeezing both into one row. Since .predict-breakdown-row is
   `display: contents`, the single-column override lives on the shared grid itself. */
@media (max-width: 480px) {
    .predict-breakdown {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .predict-breakdown-label {
        white-space: normal;
    }
}

/* ============================================
   POST-SURVEY MODAL STYLES
   ============================================ */
.post-survey-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-survey-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.post-survey-content {
    position: relative;
    z-index: 10000;
    background-color: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 700px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 2rem;
}

.post-survey-header {
    margin-bottom: 2rem;
    text-align: center;
}

.post-survey-header h3 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.post-survey-header p {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
}

.post-survey-phase {
    display: block;
}

.post-survey-questions {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.post-survey-questions .survey-question {
    margin-bottom: 1.5rem;
}

.post-survey-questions .question-label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.post-survey-questions .likert-scale {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.post-survey-questions .likert-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.post-survey-questions .likert-option input[type="radio"] {
    margin: 0;
}

.post-survey-questions .likert-option label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    margin: 0;
}

.post-survey-questions .scale-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 0.5rem;
}

.post-survey-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.post-survey-actions .btn {
    padding: 0.625rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
}

/* Scrollbar styling for post-survey content */
.post-survey-content::-webkit-scrollbar {
    width: 8px;
}

.post-survey-content::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.post-survey-content::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius-md);
}

.post-survey-content::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Responsive adjustments for post-survey */
@media (max-width: 768px) {
    .post-survey-content {
        width: 95%;
        padding: 1.5rem;
        max-height: 90vh;
    }
    
    .post-survey-header h3 {
        font-size: 1.5rem;
    }
    
    .post-survey-questions .likert-scale {
        gap: 0.25rem;
    }
    
    .post-survey-questions .likert-option label {
        font-size: 0.75rem;
    }
}

/* ============================================================
   COGNITIVE FORCING FUNCTION HIGHLIGHTS  (?highlight=1,2,3)
   ============================================================ */

/* Highlight 1 — chat message bubble (clickable → navigates to drift + sunburst) */
.message.highlight-swing-msg {
    cursor: pointer;
}
.message.highlight-swing-msg .message-content {
    box-shadow:
        0 0 0 3px rgba(55, 65, 81, 0.9),
        0 0 18px 6px rgba(55, 65, 81, 0.45);
    border-radius: 12px;
}

@keyframes swing-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}

/* Highlight 2 — drift chart dot (SVG element) */
#driftAxisContainer circle.highlight-swing-dot {
    stroke: #374151 !important;
    stroke-width: 3 !important;
    animation: swing-pulse 1.1s ease-in-out infinite;
    filter: drop-shadow(0 0 5px rgba(55, 65, 81, 0.85));
}

/* Highlight 3 — sunburst outer-ring trait arc only (not labels) */
#chatPersonaChart path[data-trait-name].highlight-swing-segment,
#personaChart path[data-trait-name].highlight-swing-segment {
    stroke: #374151 !important;
    stroke-width: 4 !important;
    animation: swing-pulse 1.1s ease-in-out infinite;
    filter: drop-shadow(0 0 7px rgba(55, 65, 81, 0.8));
}

/* Behavioral Swing banner */
.behavioral-swing-banner {
    background: rgba(55, 65, 81, 0.08);
    border: 1px solid rgba(55, 65, 81, 0.25);
    border-radius: 8px;
    padding: 6px 14px;
    margin: 8px 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    text-align: center;
}

/* Sunburst reminder banner (condition 2 tip) */
.sunburst-reminder-banner {
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 8px;
    padding: 6px 14px;
    margin: 8px 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e40af;
    text-align: center;
}

.sunburst-reminder-banner i {
    margin-right: 6px;
    color: #f59e0b;
}

/* Drift chart dot click → scroll-to-message highlight (1.5s then remove) */
#driftAxisContainer circle.drift-dot {
    cursor: pointer;
}

.message.drift-click-highlight {
    position: relative;
}

.message.drift-click-highlight::after {
    content: '';
    position: absolute;
    inset: -4px -8px;
    background-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 22px 8px rgba(255, 255, 255, 0.4);
    border-radius: 14px;
    pointer-events: none;
    z-index: 1;
    animation: highlightFade 1.5s ease-out forwards;
}

@keyframes highlightFade {
    0%   { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; }
}

/* ====================================== */
/* SENTENCE REVEAL MECHANIC               */
/* ====================================== */

/* Instruction callout */
.sentence-reveal-instructions {
    background: #f3f4f6;
    border-left: 4px solid #6b7280;
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.5;
}

/* Container for all sentence blocks */
.sentence-reveal-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Individual sentence block */
.sentence-block {
    position: relative;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background 0.3s;
    border: 2px solid transparent;
}

/* The actual sentence text — blurred by default */
.sentence-block .sentence-text {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #2c3e50;
    font-family: 'Geist Mono', monospace;
    filter: blur(6px);
    user-select: none;
    transition: filter 0.4s ease;
}

/* Clickable overlay */
.sentence-block .sentence-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(248, 249, 250, 0.6);
    border-radius: 6px;
    cursor: not-allowed;
    opacity: 1;
    transition: opacity 0.3s ease;
    gap: 2px;
}

.sentence-block .sentence-overlay .overlay-icon {
    font-size: 1.1rem;
    opacity: 0.4;
}

.sentence-block .sentence-overlay .overlay-label {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 500;
}

/* "Next" sentence — the one the user should click */
.sentence-block.next {
    border-color: #374151;
    background: rgba(55, 65, 81, 0.04);
    animation: pulse-border 1.5s ease-in-out infinite;
}

.sentence-block.next .sentence-overlay {
    cursor: pointer;
    background: rgba(55, 65, 81, 0.08);
}

.sentence-block.next .sentence-overlay .overlay-icon {
    opacity: 0.8;
    color: #374151;
}

.sentence-block.next .sentence-overlay .overlay-label {
    color: #374151;
    font-weight: 600;
}

@keyframes pulse-border {
    0%, 100% { border-color: #374151; box-shadow: 0 0 0 0 rgba(55, 65, 81, 0.15); }
    50%      { border-color: #6b7280; box-shadow: 0 0 8px 2px rgba(55, 65, 81, 0.2); }
}

/* Revealed sentence — blur removed, overlay hidden */
.sentence-block.revealed .sentence-text {
    filter: blur(0);
    user-select: auto;
}

.sentence-block.revealed .sentence-overlay {
    opacity: 0;
    pointer-events: none;
}

.sentence-block.revealed {
    border-color: transparent;
    background: transparent;
    animation: none;
}

/* Progress indicator */
.sentence-reveal-progress {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 0.75rem;
    text-align: center;
    transition: color 0.3s;
}

.sentence-reveal-progress.complete {
    color: #10b981;
    font-weight: 600;
}

/* Button enable animation */
@keyframes btn-activate {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.btn-just-enabled {
    animation: btn-activate 0.4s ease;
}

/* ── Message (transcript) reveal ──────────────────────────────────────── */

.message-reveal-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.message-block {
    position: relative;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: background 0.3s;
}

.message-block .message-bubble {
    filter: blur(6px);
    user-select: none;
    transition: filter 0.4s ease;
}

.message-block .message-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(248, 249, 250, 0.6);
    border-radius: 8px;
    cursor: not-allowed;
    opacity: 1;
    transition: opacity 0.3s ease;
    gap: 2px;
}

.message-block .message-overlay .overlay-icon {
    font-size: 1.1rem;
    opacity: 0.4;
}

.message-block .message-overlay .overlay-label {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 500;
}

.message-block.next {
    border-color: #374151;
    background: rgba(55, 65, 81, 0.04);
    animation: pulse-border 1.5s ease-in-out infinite;
}

.message-block.next .message-overlay {
    cursor: pointer;
    background: rgba(55, 65, 81, 0.08);
}

.message-block.next .message-overlay .overlay-icon {
    opacity: 0.8;
    color: #374151;
}

.message-block.next .message-overlay .overlay-label {
    color: #374151;
    font-weight: 600;
}

.message-block.revealed .message-bubble {
    filter: blur(0);
    user-select: auto;
}

.message-block.revealed .message-overlay {
    opacity: 0;
    pointer-events: none;
}

.message-block.revealed {
    border-color: transparent;
    background: transparent;
    animation: none;
}