@charset "utf-8";
/* GLOBAL VARIABLES */
:root { --primary-red: #990000; --primary-blue: #000033; --accent-blue: #000099; --light-bg: #a5a5a5; --border-color: #eee; --mast-height: 120px; --control-height: 70px; }
/* HEADERS: MAST AND NAV */
.mast { margin-top: 0; background: #fff; padding: 20px 10px 10px 10px; text-align: center; }
.mast img { margin: 0 auto; width: 850px; height: auto; }
/* MASTER CONTROLS */
/* Navigation and Mode Switching */
.master-control { padding: 2px 5px; background: #ffffff; width: 800px; margin: 0 auto; text-align: center; margin-bottom: 15px; }
.mode-switcher { display: flex; justify-content: space-between; align-items: center; background: #ffffff; padding: 5px 10px; border-radius: 4px; }
.mode-group, .volume-group, .nav-controls { display: flex; align-items: center; }
.nav-divider { margin: 0 10px; color: #ccc; }
.nav-divider.hidden { display: none; }
.mode-label { font-size: 12px; color: #aaa; font-weight: 400; text-transform: uppercase; margin-right: auto; }
.mode-link, .nav-link, a.mode-link, a.nav-link { font-size: 12px; text-decoration: none; }
.vol-link, a.vol-link { font-size: 16px; text-decoration: none; }
.mode-link:hover, .vol-link:hover, .nav-link:hover, a.mode-link:hover, a.vol-link:hover, a.nav-link:hover { color:#990000; }
.mode-link.active { background-color: #990000; color: #ffffff !important; padding: 4px 8px; border-radius: 4px; }
body.voice-mode .volume-group, body.video-mode .volume-group { display: flex !important; }
/* PREP AND PROGRESS */
/* Progress Tracking */
.prep-header { padding: 10px 0 5px 0; margin: 0 auto; text-align: center; max-width: 800px; }
.prep-text { font-size: 12px; color: #aaa; font-weight: 400; margin: 0; }
.progress-wrapper { background: #e0e0e0; height: 5px; border-radius: 5px; margin: 0 auto; margin-bottom:10px; overflow: hidden; width: 100%; text-align: center; max-width: 750px; }
.progress-fill { width: 0%; height: 10px; background: #000033; border-radius: 5px; transition: width 0.4s ease; }
/* MISCELLANEOUS */
/* Layout Containers and Utilities */
.onboarding-theme { background-color: #ffffff; display: block; margin: 0; padding: 0; }
.app-container { width: 100%; max-width: 800px !important; background: white; margin: 0 auto; opacity: 0; transition: opacity 0.5s ease;}
.app-container.ready-to-show { opacity: 1;}
.copy-container { max-width: 800px; margin: 0 auto; padding: 10px; }
.hidden { display: none; }
.full-width {width:100%;}
.copyright { padding: 20px 5px; font-size: 11px; color: #222; margin: 0 auto; text-align: center; }
#onboarding-container, h1.onboarding, h2.onboarding { margin: 0 auto; }
.access-code-entry{max-width:350px; margin:0 auto; text-align:center;}
h2.enter-code { text-align: center; margin: 0 auto; margin-bottom:10px;}
.access-input { margin: 0 auto; max-width: 320px; }
.interactive-button-container { text-align: center; margin: 5px; }
.ask-question { text-align: center; margin: 0 auto; padding-top: 40px; }
a.ask-question-link:link { font-weight: 700; font-size: 16px; text-transform: uppercase; }
a.ask-question-link:hover { color: #990000; }
/* FORM STYLING */
/* User Input Elements */
.form-group { margin-bottom: 20px; text-align: left; }
label { display: block; font-weight: 400; font-size: 0.9rem; margin-bottom: 8px; color: #333; }
input, select, input#user-input.sli-input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-family: 'Montserrat', sans-serif; font-size: 1rem; }
input:focus { border: 1px solid #666666; outline: none; }
input#access-code.sli-input { max-width: 300px; }
.skip-text { font-size: 0.8rem; color: #777; margin-top: 6px; display: block; font-style: italic; }
.sli-input-wrapper { display: block !important; width: 100%; min-height: 80px; margin: 20px 0; position: relative; z-index: 10; }
.sli-input { display: block !important; font-size: 1.2rem; border: 1px solid #cccccc; background-color: #ffffff !important; color: #333 !important; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); width: 90%; padding: 15px; }
select.sli-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
    padding-right: 2.5rem;
    padding-left: 15px;
    height: auto;
    min-height: 55px;
    line-height: 1.5;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #fff;
    width: 100%;
    cursor: pointer;
    /* Consistency Fixes */
    border: 1px solid var(--border-color) !important;
    outline: none !important;
    border-radius: 4px;
}

select.sli-input:focus {
    border: 1px solid var(--primary-red) !important;
}
.app-container:not(.intro-active) .input-group { display: block !important; visibility: visible !important; opacity: 1 !important; min-height: 100px; }
/* ONBOARDING STEPS */
/* Step Transitions and Cards */
.onboarding-step { display: none; }
.onboarding-step.active { display: block; animation: fadeIn 0.4s ease; }
.onboarding-card { background: #ffffff; padding: 5px 20px; max-width: 800px; width: 90%; text-align: center; }

/* MODE SELECTION */
/* Initial Selection UI */
.mode-container { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; }
.mode-bar { display: flex; align-items: center; background-color: #E2E2E2; color: #990000; padding: 18px 25px; border-radius: 8px; cursor: pointer; transition: transform 0.2s, background-color 0.2s; text-decoration: none; border: none; width: 100%; text-align: left; font-family: 'Montserrat', sans-serif; }
.mode-bar:hover { background-color: #999999; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.mode-icon { width: 40px; height: 40px; margin-right: 20px; flex-shrink: 0; fill: #333; }
.mode-text-group { display: flex; flex-direction: column; }
.mode-title { font-size: 1.25rem; font-weight: 700; text-transform: uppercase; margin-bottom: 2px; font-family: 'Montserrat', sans-serif; }
.mode-description { font-size: 0.85rem; font-weight: 300; line-height: 1.3; opacity: 0.9; color:#333; font-family: 'Montserrat', sans-serif; }
.identity-nav-link { margin-top: 10px; background: none; border: none; cursor: pointer; font-size: 11px; text-transform: uppercase; font-family: 'Montserrat', sans-serif; }
a.identity-nav-link:link { color: #000033; font-family: 'Montserrat', sans-serif; }
a.identity-nav-link:hover { color: #990000; }
/* INTERVIEW STYLES */
/* Q&A Column and Agent UI */
#question-text { font-size: 1.4rem; margin: 0; margin-bottom: 15px; line-height: 1.25; font-weight: 600; text-transform: none; text-align: left !important;}
.question-desc { font-size: 14px; color: #666; margin: 10px 0; text-align: left; font-weight: 400; }
.action-group { margin-top: 20px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: center; width: 100%; clear: both !important; }
.enter-hint { font-size: 12px; color: #999; text-transform: uppercase; font-weight: 400; margin:0 auto;text-align: center;}
.skip-link { color: #666; font-size: 12px; text-transform: uppercase; }
.secondary-actions { font-size: 12px; margin: 0 auto; padding: 0 5px}
.input-error { border: 2px solid #990000 !important; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.shake { animation: shake 0.2s ease-in-out 0s 2; }
/* REVISED AGENT CONSTRAINTS */
#agent-column { margin-bottom: 30px; position: relative; padding-bottom: 40px; }
#video-wrapper {
    position: relative; /* REQUIRED: Acts as the anchor for the absolute speech layer */
    overflow: hidden;   /* REQUIRED: Clips the 2.0 scale zoom */
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    background: #fff;
}

#agent-video-idle {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(2.0);
    transform-origin: center 5%;
    /* Stays in the base flow to provide the background */
}

#agent-video {
    position: absolute; /* Layers vid on top of idle */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    opacity: 0; /* Keeps new vid hidden until buffered */
    transition: opacity 0.4s ease-in-out;
    transform: scale(2.0);
    transform-origin: center 5%;
}

.video-visible {
    opacity: 1 !important;
}

.fade-to-still { opacity: 0; }
.agent-paused { filter: grayscale(0.8) blur(2px); opacity: 0.6; pointer-events: none; }
/* INTRO AND LEARN MORE */
/* Special Formatting for Intro State */
.sli-intro-text { font-size: 1.1rem; line-height: 1.6; color: #444; font-weight: normal; margin-bottom: 20px; }
.hide-avatar { display: none !important; }
.intro-full-width { width: 100% !important; max-width: 800px !important; margin: 0 auto; }
.intro-container { display: flex !important; flex-direction: column !important; }
.intro-button-row { order: 1 !important; margin-bottom: 25px; display: flex; justify-content: flex-start; }
.intro-button-row .sli-button { flex: 1; padding: 14px; font-size: 18px; font-weight:600; text-transform: uppercase; cursor: pointer; border-radius: 4px; display: flex; align-items: center; justify-content: center; background-color:#990000; color:#ffffff; border: none; transition: background-color 0.3s ease, transform 0.1s ease; font-family: 'Montserrat', sans-serif; margin: 5px; display: inline-block; min-width: 120px; }
.intro-button-row .sli-button-secondary { flex: 1; padding: 14px; font-size: 18px; font-weight:600; text-transform: uppercase; cursor: pointer; border-radius: 4px; display: flex; align-items: center; justify-content: center; background-color:#D5D5D5; color:#666666; border: none; transition: background-color 0.3s ease, transform 0.1s ease; font-family: 'Montserrat', sans-serif; margin: 5px; display: inline-block; min-width: 120px; }
/* VIDEO MODE LAYOUT */
/* Grid and Viewport States */
.video-mode .intro-full-width { flex: 0 0 100% !important; }
.app-container.intro-active .action-group { display: block !important; margin-top: 20px !important; max-width: 800px; }
body.video-mode .app-container { max-width: 1000px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
body.video-mode .intro-full-width { grid-column: 1 / span 2 !important; width: 100% !important; max-width: 800px !important; margin: 0 auto; }
body.video-mode .app-container.intro-active { display: block !important; max-width: 800px; }
body.video-mode .app-container:not(.intro-active) { display: none !important; grid-template-columns: 320px 1fr !important; gap: 30px; align-items: start !important; }
body.video-mode .app-container.intro-active .action-group { display: none !important; }
body.video-mode .app-container:not(.intro-active).ready-to-show { display: grid !important; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* AVATAR SELECTION */
/* Persona Choice UI */
.persona-grid { display: flex; justify-content: space-around; margin-top: 30px; }
.persona-option { text-align: center; cursor: pointer; transition: transform 0.2s; }
.persona-option:hover { transform: scale(1.05); }
.avatar-circle { width: 200px; height: 200px; border-radius: 50%; margin: 0 auto 15px; background-size: cover; }
.stan-bg { background-color: #999999; }
.lea-bg { background-color: #888888; }
/* CHOICE CARDS */
/* Interactive Option Cards */
.choice-container { display: flex; gap: 15px; margin: 20px 0; justify-content: center; max-width:800px;}
.choice-cards { display: flex; flex-direction: column; gap: 15px; margin: 20px 0; max-width:800px; }
.choice-card { flex:1; background-color: #E2E2E2; padding: 18px 25px; border-radius: 8px; cursor: pointer; transition: transform 0.2s, background-color 0.2s; text-decoration: none; border: none; text-align: left; font-family: 'Montserrat', sans-serif; }
.choice-card:hover { background-color: #999999; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.choice-card-title { font-size: 1.25rem; font-weight: 700; color: #990000; text-transform: uppercase; margin-bottom: 2px; font-family: 'Montserrat', sans-serif; }
.choice-card-description { font-size: 0.85rem; font-weight: 300; line-height: 1.3; opacity: 0.9; color:#333333; font-family: 'Montserrat', sans-serif; }
/* VOICE & AGENT UI */
/* Speech Recognition and Video Status */
body.voice-active #voice-indicator { display: flex !important; }
/* Video mode: 1/3 avatar left, 2/3 Q&A right */
body.video-mode #app-wrapper {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important; /* Align to left if needed, but flex will handle */
    max-width: 1200px; /* Optional: Cap width for wide screens */
    margin: 0 auto; /* Center the whole container */
    gap: 20px; /* Space between columns */
}
body.video-mode .agent-column {
    display: block !important; /* Show avatar */
    flex: 1 !important;
    max-width: 33% !important;
    min-width: 200px; /* Prevent too narrow on small screens */
}

body.video-mode #question-text {
    width: 100%;
    text-align: left;
}
/* Hide avatar in non-video modes (already may exist, but reinforce) */
body.form-mode .agent-column,
body.voice-mode .agent-column {
    display: none !important;
}
/* For Voice and On-Screen: Full-width Q&A, centered container */
body.form-mode #app-wrapper,
body.voice-mode #app-wrapper {
    display: block !important; /* Single column */
    max-width: 800px !important; /* Match your existing max-width */
    margin: 0 auto !important;
}
body.form-mode .qa-column { width: 100% !important; }
.voice-dot {
    width: 10px;
    height: 10px;
    background-color: #990000;
    border-radius: 50%;
    animation: voice-pulse 2s infinite ease-in-out;
}
.interaction-indicator { position: absolute; bottom: 30px; left: 30px; width: 12px; height: 12px; background: #cccccc; border-radius: 50%; opacity: 0.5; display: none; }
.status-label { color: #666; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }
#agent-status-loader { display: none; position: absolute; bottom: 10px; left: 10px; color: #fff; font-size: 12px; background: rgba(0,0,0,0.6); padding: 4px 10px; border-radius: 4px; z-index: 10; }
#agent-status-loader::before { content: "●"; color: #ff0000; margin-right: 8px; animation: blink 1s ease infinite; }
body.video-active .interaction-indicator { display: block !important; animation: neutral-pulse 3s infinite ease-in-out; }
.pulse-green { border: 2px solid #28a745 !important; box-shadow: 0 0 10px rgba(40,167,69,0.5); transition: all 0.3s ease; animation: pulse-border 1.5s infinite; }
/* KEYFRAMES */
/* Animation Library */
@keyframes voice-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes neutral-pulse { 0%, 100% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(1.2); opacity: 0.6; } }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }
@keyframes pulse-border { 0% { box-shadow: 0 0 0 0 rgba(40,167,69,0.7); } 70% { box-shadow: 0 0 0 10px rgba(40,167,69,0); } 100% { box-shadow: 0 0 0 0 rgba(40,167,69,0); } }
/* SUMMARY LIST */
/* Final Data Review Items */
.summary-item { display: flex; justify-content: space-between; padding: 15px 10px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
.summary-item:hover { background-color: #f9f9f9; }
.summary-item span:first-child { font-weight: 600; font-size: 11px; color: #888; text-transform: uppercase; }
.summary-item span:last-child { font-weight: 400; font-size: 15px; color: var(--primary-red); }
/* UNIVERSAL MODAL STYLES */
.modal-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Dim background */
    backdrop-filter: blur(8px); /* The Glass effect */
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999; /* Ensure it is on top of EVERYTHING */
    align-items: center;
    justify-content: center;
}
.modal-container {
    background: #ffffff;
    width: 90%;
    max-width: 650px;
    max-height: 100vh;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    position: relative;
    display: flex;
    flex-direction: column;
    animation: modalFadeIn 0.3s ease-out;
}
@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 32px;
    color: #999;
    cursor: pointer;
    line-height: 1;
    z-index: 10;
	padding: 0px 5px 0px 0px;
}
.modal-close-btn:hover { color: var(--primary-red); }
.modal-body {
    padding: 20px;
    overflow-y: auto; /* Internal scroll only if content is long */
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}
.modal-close-bottom-button {
    font-family: 'Montserrat', sans-serif;
    padding: 5px 10px;
    margin: 5px;
    display: inline-block;
	width: 33%;
    min-width: 120px;
    cursor: pointer;
    background-color: #fff;
    color: #000033;
    border: 2px solid #000033;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}
.modal-close-bottom-button:hover {
    background-color: #990000;
	border: 2px solid #990000;
    color: #fff;
}
.modal-body ul { padding-left: 20px; }
.modal-body b { color: var(--primary-red); }
.modal-footer { padding: 15px 40px 25px 40px; text-align: right; }

/* Info scroll box for Tell Me More content */
.info-scroll-content::-webkit-scrollbar { width: 4px; }
.info-scroll-content::-webkit-scrollbar-thumb { background: #999999; border-radius: 2px; }
.info-scroll-box {
    max-height: 100vh;
    overflow-y: auto;
    padding: 5px 15px 5px 15px;
	order: 2 !important;
}
.info-scroll-content {
    text-align: left;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
	max-height: 350px;
	overflow-y: auto;
	padding-right: 10px;
}
.info-scroll-content p {
    margin-bottom: 15px;
    text-transform: none;
    text-align: left;
}
.info-scroll-content h3,
.info-scroll-content h4 {
    text-transform: none;
    text-align: left;
    margin-top: 20px;
    margin-bottom: 10px;
}
.info-scroll-content ul {
    margin: 10px 0 10px 20px;
    text-align: left;
}
.info-scroll-content li {
    margin-bottom: 8px;
    text-align: left;
}

/* Q&A Navigation Pieces */
.action-group.intro-hidden {display: none !important;}
.tell-me-more-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-red);
    text-decoration: none;
    margin-left: 10px;
    text-transform: uppercase;
    vertical-align: middle;
    cursor: pointer;
    transition: opacity 0.2s;
}
.tell-me-more-link:hover {
    opacity: 0.7;
    text-decoration: underline;
}
.option-button {
    padding: 10px 20px;
    border: 2px solid #ccc;
    border-radius: 8px;
    background: #f8f8f8;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s;
}
.option-button:hover {
    border-color: #990000;
    background: #ffe;
}
.option-button.selected {
    border-color: #990000;
    background: #990000;
    color: white;
}


/* Video mode: 1/3 avatar left, 2/3 Q&A right */
body.video-mode #app-wrapper {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;  /* Align to left if needed, but flex will handle */
    max-width: 1200px;  /* Optional: Cap width for wide screens */
    margin: 0 auto; /* Center the whole container */
    gap: 20px;  /* Space between columns */
}

body.video-mode .agent-column {
    display: block !important;  /* Show avatar */
    flex: 1 !important;
    max-width: 33% !important;
    min-width: 200px;  /* Prevent too narrow on small screens */
}

body.video-mode .qa-column {
    flex: 2 !important;
    max-width: 67% !important;
}

/* Full-width intro in video mode (when avatar is hidden) */
#app-wrapper.intro-mode {
    display: block !important;
}

#app-wrapper.intro-mode .qa-column {
    max-width: 100% !important;
    width: 100% !important;
}

body.voice-mode .qa-column {
    width: 100% !important;
    max-width: 100% !important;
}

/* Full-width Q&A in voice/video if content blank (force visibility) */
body.voice-mode .qa-column, body.video-mode .qa-column {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Only hide the footer/hint during intro, leave input-group visible for the buttons */
#app-wrapper.intro-mode .action-group, 
#app-wrapper.intro-mode .enter-hint {
    display: none !important;
}

#app-wrapper.intro-mode .input-group {
    display: block !important;
    visibility: visible !important;
}

/* --- OVERRIDE: HIDE FOOTER DURING INTRO REGARDLESS OF MODE --- */
body.form-mode #app-wrapper.intro-mode .enter-hint,
body.voice-mode #app-wrapper.intro-mode .enter-hint,
body.video-mode #app-wrapper.intro-mode .enter-hint {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* --- OVERRIDE: KILL THE FOOTER ON INTRO --- */
/* We stack the selectors to ensure this rule has the highest possible 'weight' */
body.form-mode #app-wrapper.intro-mode .action-group,
body.voice-mode #app-wrapper.intro-mode .action-group,
body.video-mode #app-wrapper.intro-mode .action-group,
#app-wrapper.intro-mode .action-group {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* --- Master Shell Layout Fixes --- */

/* 1. Ensure the dynamic area has a base height so it doesn't vanish */
#dynamic-content-area {
    min-height: 300px;
    display: block !important;
    padding: 10px 20px;
}

/* 2. Fix the centering for the onboarding cards in the Shell */
#app-wrapper.intro-mode .app-container {
    justify-content: center;
    align-items: flex-start;
    padding-top: 40px;
}


/* ==================================================================
   MASTER SHELL ADDITIONS
   ================================================================== */

/* Mode link active state */
.mode-link.active {
    color: #990000;
    font-weight: 600;
}

/* Document Overview Styles */
.doc-overview-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.doc-overview-content ul {
    list-style-position: inside;
}

.doc-overview-content li {
    margin: 10px 0;
    font-size: 16px;
    line-height: 1.6;
}

/* Question Info Link */
.question-info {
    margin: 10px 0 20px 0;
    font-size: 14px;
}

.question-info a {
    color: #000033;
    text-decoration: none;
}

.question-info a:hover {
    color: #990000;
}

/* Summary Styles */
.summary-list {
    max-width: 800px;
    margin: 30px auto;
}

.summary-item {
    background: #f9f9f9;
    border-left: 4px solid #990000;
    padding: 15px 20px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.summary-item:hover {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.summary-question {
    font-weight: 600;
    color: #000033;
    margin-bottom: 8px;
}

.summary-answer {
    color: #555;
    font-size: 16px;
}

.summary-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}
.summary-answer-row { display: flex; justify-content: space-between; align-items: center; }
.summary-edit-link  { font-size: 0.75rem; color: #8b0000; font-weight: 600; margin-left: 16px; white-space: nowrap; }

.sli-button-secondary {
    font-family: 'Montserrat', sans-serif;
    padding: 12px 24px;
    margin: 5px;
    display: inline-block;
	width: 100%;
    min-width: 120px;
    cursor: pointer;
    background-color: #fff;
    color: #000033;
    border: 2px solid #000033;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.sli-button-secondary:hover {
    background-color: #000033;
    color: #fff;
}

/* Fade-in animation */
.app-container {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.app-container.ready-to-show {
    opacity: 1;
}

/* Interview mode adjustments */
body.interview-mode .app-container {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

body.interview-mode #agent-column {
    flex: 1;
    max-width: 400px;
}

body.interview-mode #interview-column {
    flex: 2;
}

/* Responsive adjustments */
@media screen and (max-width: 900px) {
    body.interview-mode .app-container {
        flex-direction: column;
    }
    
    body.interview-mode #agent-column {
        max-width: 100%;
        width: 100%;
    }
}

/* Tell Me More wrapper - left-justified, no icon */
.tell-me-more-wrapper {
    text-align: left;
    margin: 15px 0 10px 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

.tell-me-more-link {
    color: #000033;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
}

.tell-me-more-link:hover {
    color: #990000;
    text-decoration: underline;
}

/* Listening indicator - appears next to Tell Me More */
.listening-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #555;
}

.listening-indicator .voice-dot {
    width: 12px;
    height: 12px;
    background-color: #990000;
    border-radius: 50%;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

/* Summary screen - remove red left border */
.summary-item {
    background: #f9f9f9;
    border-left: none;
    border: 1px solid #ddd;
    padding: 15px 20px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.summary-item:hover {
    background: #fff;
    border-color: #990000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Voice/Video mode - full width Q&A column */
body.interview-mode.mode-voice #interview-column,
body.interview-mode.mode-video #interview-column {
    flex: 1;
    max-width: 100%;
}

body.interview-mode.mode-voice #agent-column,
body.interview-mode.mode-video #agent-column {
    display: none;
}

/* Keep voice indicator visible for voice mode */
body.interview-mode.mode-voice #voice-indicator {
    display: none !important;
}

/* Video mode shows agent column */
body.interview-mode.mode-video #agent-column {
    display: block !important;
    flex: 1;
    max-width: 400px;
}

body.interview-mode.mode-video #interview-column {
    flex: 2;
}


/* ==================================================================
	Voice mode full width, listening indicator fixes
   ================================================================== */

/* Voice mode - full width, no agent column */
body.interview-mode.mode-voice #interview-column {
    flex: 1;
    max-width: 100%;
    width: 100%;
}

body.interview-mode.mode-voice #agent-column {
    display: none !important;
}

/* Video mode - show agent column */
body.interview-mode.mode-video #agent-column {
    display: block !important;
    flex: 1;
    max-width: 400px;
}

body.interview-mode.mode-video #interview-column {
    flex: 2;
}

/* Form mode - full width */
body.interview-mode.mode-form #interview-column {
    flex: 1;
    max-width: 100%;
    width: 100%;
}

body.interview-mode.mode-form #agent-column {
    display: none !important;
}

/* ============================================
   VOICE INDICATORS
   ============================================
*/

/* Voice Status Wrapper */
.voice-status-wrapper {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Voice Indicator Base Styles */
.voice-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
}

/* Speaking Indicator (Red) */
.voice-indicator.speaking .status-label {
    color: #990000;
}

/* Listening Indicator (Green) */
.voice-indicator.listening .status-label {
    color: #21561A;
}

/* Pulse Dots */
.pulse-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: pulse 1.5s ease-in-out infinite;
}

.pulse-dot.red {
    background: #990000;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
}

.pulse-dot.green {
    background: #21561A;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
}

/* Pulse Animation */
@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
    }
    
    50% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(220, 38, 38, 0);
    }
    
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
    }
}

/* Green pulse variation */
.pulse-dot.green {
    animation-name: pulse-green;
}

@keyframes pulse-green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }
    
    50% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
    }
    
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

/* Status Label */
.voice-indicator .status-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ============================================================================
   ASK A QUESTION MODULE STYLES
   ============================================================================ */

.ask-q-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    text-align: center;
}

.ask-q-logo {
    width: 350px;
    margin-bottom: 20px;
}

.ask-q-visuals-wrapper {
    min-height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.ask-q-disclaimer {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #888;
    margin-top: 40px;
    font-style: italic;
    max-width: 300px;
    line-height: 1.4;
}

.ask-q-transcript {
    margin-top: 20px;
    padding: 12px;
    background: #fcfcfc;
    border-top: 1px solid #eee;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-style: italic;
    color: #777;
    width: 85%;
    max-height: 120px; /* Limits size to ~6 lines before scrolling */
    overflow-y: auto;   /* Adds scrollbar if question is very long */
    line-height: 1.4;
    text-align: center;
}

/* Custom Pulse for Thinking State using Brand Blue (#000033) */
@keyframes pulse-thinking {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 0, 51, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(0, 0, 51, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 0, 51, 0); }
}

.pulse-dot.thinking {
    background-color: var(--primary-blue);
    animation: pulse-thinking 1.5s infinite;
}

/* ============================================================================
   REPEATER & CHOICE CARD LAYOUT 
   ============================================================================ */
.choice-card-container { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; }

/* Legacy alias — kept for safety, superseded by .repeater-list-viewport below */
.repeater-list { margin: 20px 0; max-height: 250px; overflow-y: auto; }

.repeater-item { 
    padding: 7px 12px; 
    background: #f9f9f9; 
    margin-bottom: 4px; 
    border-radius: 4px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border: 1px solid var(--border-color); 
}
.repeater-remove-btn { 
    color: var(--primary-red); 
    background: none; 
    border: none; 
    font-weight: 800; 
    cursor: pointer; 
    padding: 0 5px; 
    font-size: 1.2rem; 
}
.repeater-add-container { 
    flex-shrink: 0;
    background: #fff; 
    padding: 15px; 
    border: 1px dashed #cccccc; 
    border-radius: 8px; 
    margin-top: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 16px;
}
.repeater-add-label { 
    font-weight: 600; 
    color: var(--primary-blue); 
    font-size: 10px; 
    text-transform: uppercase; 
    display: block; 
    margin-bottom: 5px; 
}
.repeater-add-btn { 
    margin-top: 10px; 
    background: #444; 
    color: #fff; 
    border: none; 
    padding: 10px 20px; 
    border-radius: 4px; 
    width: 100%; 
    cursor: pointer; 
    font-family: 'Montserrat', sans-serif; 
    font-weight: 600; 
    text-transform: uppercase; 
    font-size: 12px; 
}
/* DUAL-INPUT REPEATER LAYOUT */
.repeater-input-row { 
    display: flex; 
    gap: 10px; 
    margin-bottom: 10px; 
}
.input-details { flex: 3; } /* Wide for description */
.input-amount { flex: 1; }  /* Narrow for numbers */
.repeater-item-data { display: flex; justify-content: space-between; width: 100%; }
.item-val { font-weight: 800; color: var(--primary-red); margin-left: 10px; }

/* VIEWPORT-CONSTRAINED REPEATER CARD (Option 2)
   Forces the repeater screen to fit within the visible viewport so the
   FINISHED: CONTINUE button is always visible without page-level scrolling.
   The results list is the only element that grows; everything else is fixed.
   Tune --repeater-offset if the header height changes on your layout. */
:root { --repeater-offset: 260px; }

.repeater-card {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--repeater-offset));
    overflow: hidden;
}
.repeater-card-header {
    flex-shrink: 0;
}
.repeater-list-viewport {
    flex: 1;
    overflow-y: auto;
    min-height: 60px;
    margin-top: 12px;
    border-radius: 8px;
    background: #fafafa;
    border: 1px solid #f0f0f0;
    scroll-behavior: smooth;
}
.repeater-list-viewport::-webkit-scrollbar { width: 4px; }
.repeater-list-viewport::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }
.repeater-list-viewport::-webkit-scrollbar-thumb:hover { background: #999; }
.repeater-card-footer {
    flex-shrink: 0;
    padding-top: 16px;
}
.repeater-item-count {
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 10px;
    margin-bottom: 2px;
}

/* BANKRUPTCY AUDIT LAYOUT */
.audit-card { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 20px; margin-top: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.audit-header { margin-top: 0; margin-bottom: 15px; font-size: 1.1rem; font-weight: 700; color: #333; }
.audit-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.audit-table th, .audit-table td { padding: 12px 10px; border-bottom: 1px solid #eee; font-size: 14px; }
.audit-table th { font-weight: 600; color: #444; text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; }
.audit-table .col-left { text-align: left !important; }
.audit-table .col-right { text-align: right !important; }
.audit-table tfoot tr, .audit-table .row-total td { font-weight: bold; background: #f8f9fa; border-top: 2px solid #333; }
.audit-summary-grid, .summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; font-size: 13px; margin-bottom: 20px; }
.audit-grid-item, .summary-grid div { text-align: left; font-size: 14px; }
.audit-data-label { font-size: 12px; color: #777; display: block; margin-bottom: 2px; }
.audit-edit-link { color: var(--primary-blue); text-decoration: none; font-size: 11px; font-weight: 600; margin-left: 5px; }
.audit-edit-link:hover { text-decoration: underline; }
.audit-total-box { margin-top: 20px; padding: 15px; border-radius: 8px; text-align: center; border: 1px solid transparent; }
.audit-total-box.blue { background: #f0f7ff; border-color: #cce3ff; }
.audit-total-box.green { background: #f0fff4; border-color: #ccffda; }
.audit-total-box .total-label { font-size: 13px; color: #555; display: block; }
.audit-total-box .total-amount { font-size: 24px; font-weight: 800; }
.audit-total-box.blue .total-amount { color: var(--primary-blue); }
.audit-total-box.green .total-amount { color: #2e7d32; }
.audit-total-box.red { background: #fff5f5; border-color: #ffcdd2; }
.audit-total-box.red .total-amount { color: var(--primary-red); }
.audit-card.master-summary { border: 2px solid var(--primary-blue); }
.statute-cell { font-family: monospace; color: #666; font-size: 0.75rem; }
.row-at-risk { background: #fff5f5; color: #c62828; font-weight: bold; }
.wildcard-footer { background: #e3f2fd; padding: 12px; border-radius: 4px; font-size: 0.8rem; margin-top: 10px; }
.budget-row { display: flex; justify-content: space-between; padding: 5px 0; }
.budget-row.total { font-size: 1.1rem; margin-top: 10px; padding-top: 10px; border-top: 2px solid #eee; }
.means-test-badge { margin-top: 15px; padding: 10px; border-radius: 4px; text-align: center; font-weight: bold; font-size: 0.8rem; }
.means-test-badge.pass { background: #e8f5e9; color: #2e7d32; }
.means-test-badge.alert { background: #ffebee; color: #c62828; }


/* ============================================================================
   DOCUMENT PREVIEW MODAL
   ============================================================================ */

/* Keep blurred background, just adjust container */
#universal-modal[data-preview="true"] .modal-container {
    max-width: 900px;
    width: 95%;
    max-height: 85vh;
    margin: auto;
}

#universal-modal[data-preview="true"] .modal-body {
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 8px;
    max-height: calc(85vh - 40px);
}

#universal-modal[data-preview="true"] #modal-content-area {
    max-height: none;
    overflow: visible;
}

.document-preview-header {
    padding: 0 0 0 30px;
    margin: 0;
}

.document-preview-header h2 {
    color: #000033;
    font-size: 24px;
	font-family: Montserrat, san-serif;
}

.document-preview-disclaimer {
    margin: 0 20px 15px 30px;
    font-size: 14px;
    color: #888888;
    text-align: left;
    font-weight: 400;
	font-family: Montserrat, san-serif;
}

.document-preview-scroll {
    overflow: visible;
    padding: 0 20px 20px 20px;
    background: transparent;
    border: none;
}

.document-preview-scroll .sample-doc-container {
    background: #fff;
    padding: 40px;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Force all child elements to respect container width */
.document-preview-scroll .sample-doc-container * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Specifically override the ul width from onscreen-sample-docs.css */
.document-preview-scroll .sample-doc-container ul {
    width: auto !important;
    max-width: calc(100% - 40px) !important;
    margin: 0 !important;
    padding-left: 20px !important;
}

/* Override any fixed widths in paragraphs */
.document-preview-scroll .sample-doc-container p {
    width: auto !important;
    max-width: 100% !important;
}

/* Prevent text selection in preview */
.document-preview-scroll {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Hide preview on print */
@media print {
    #universal-modal[data-preview="true"] {
        display: none !important;
    }
}


/* MOBILE STYLING */
/* Responsive Viewport Overrides */
@media (max-width: 600px) { 
.mast img { max-width: 350px; } 
.onboarding-card { padding: 10px; margin: 5px; width:90%; max-width: 350px}
.intro-button-row { flex-direction: column; } 
.intro-button-row .sli-button, .intro-button-row .sli-button-secondary { width: 100%; margin-bottom: 5px; } 
h2.enter-code {font-size:18px;}
.mode-title {font-size: 1rem;}
.mode-description {font-size: 0.65rem;}
#question-text { font-size: 1rem;}
.question-desc { font-size: 12px;}
.choice-card-title { font-size: 0.9rem;}
.choice-card-description{font-size:12px}
.master-control{width: 90%}
.sli-button-secondary {font-size:14px}
.summary-question{font-size:12px}
.summary-answer{font-size: 12px; text-align: right;}
.document-preview-header{width:90%}
.document-preview-disclaimer{font-size:12px;}
}
@media (max-width: 900px) { .interview-stage { flex-direction: column; overflow-y: auto; padding: 20px; } .qa-column { overflow-y: visible; } .avatar-column { flex: none; width: 100%; margin-bottom: 20px; } .qa-column .onboarding-card { max-width: 100%; } .persona-grid { flex-direction: column; align-items: center; gap: 20px; } body.video-mode #app-wrapper { flex-direction: column; }
body.video-mode .agent-column, body.video-mode .qa-column { flex: none; width: 100%; }
}
@media (max-width: 768px) {
    body.video-mode #app-wrapper { flex-direction: column !important; }
    body.video-mode .agent-column,
    body.video-mode .qa-column { max-width: 100% !important; flex: none !important;}
	.voice-indicator {  padding: 10px 20px; font-size: 12px; }
    .pulse-dot { width: 10px; height: 10px; }
}