/* Medical Interface CSS - Single Chat View */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

:root {
--vh: 1vh; /* Fallback for viewport height */
}

body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: linear-gradient(135deg, #e8f2ff 0%, #f0f8ff 100%);
min-height: 100vh;
color: #2d3748;
font-size: 14px;
line-height: 1.5;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
overscroll-behavior: none;
}

/* Use dynamic viewport height for mobile keyboard support */
:root {
--vh: 1vh;
--keyboard-height: 0px; /* Will be updated by JS when keyboard shows */
}

main {
height: 100vh;
height: 100dvh; /* Dynamic viewport height */
height: -webkit-fill-available; /* iOS specific */
display: flex;
flex-direction: column;
}

/* Chat Interface Container */
.chat-interface {
display: flex;
flex-direction: column;
height: 100vh;
height: 100dvh; /* Dynamic viewport height for better mobile support */
height: -webkit-fill-available; /* iOS specific */
position: relative;
overflow: hidden;
}

/* Scenario Header */
.scenario-header {
display: none;
background: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid #e2e8f0;
padding: 20px 24px;
backdrop-filter: blur(10px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.scenario-info h2 {
font-size: 24px;
font-weight: 600;
color: #1a202c;
margin-bottom: 4px;
}

.scenario-info p {
color: #718096;
font-size: 14px;
}

.scenario-actions {
display: flex;
gap: 12px;
}

/* Main Chat Container */
.main-chat-container {
display: flex;
flex: 1;
overflow: hidden;
min-height: 0; /* Important for flexbox children */
}

/* Staff Panel */
.staff-panel {
width: 320px;
background: rgba(255, 255, 255, 0.9);
border-right: 1px solid #e2e8f0;
padding: 20px;
overflow-y: auto;
backdrop-filter: blur(10px);
max-height: calc(100vh - 120px);
}

.staff-panel h3 {
font-size: 16px;
font-weight: 600;
color: #1a202c;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 8px;
}

.staff-panel h3 i {
color: #4299e1;
}

/* Staff List */
#staff-list {
display: flex;
flex-direction: column;
gap: 8px;
}

.staff-item {
padding: 10px 18px;
background: rgba(255, 255, 255, 0.9);
border: 2px solid #e2e8f0;
border-radius: 20px;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
min-height: 40px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.staff-item:hover {
background: rgba(66, 153, 225, 0.05);
border-color: rgba(66, 153, 225, 0.3);
transform: translateY(-1px);
}

.staff-item:active {
transform: translateY(0);
}

.staff-item.selected {
background: rgba(66, 153, 225, 0.1);
border-color: #4299e1;
box-shadow: 0 2px 8px rgba(66, 153, 225, 0.2);
}

/* Color coding for staff members */
.staff-item[data-color="blue"] { 
border-color: #7dd3fc; 
background: linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0%, rgba(14, 165, 233, 0.12) 100%); 
}
.staff-item[data-color="green"] { 
border-color: #86efac; 
background: linear-gradient(135deg, rgba(22, 163, 74, 0.08) 0%, rgba(22, 163, 74, 0.12) 100%); 
}
.staff-item[data-color="purple"] { 
border-color: #c4b5fd; 
background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(124, 58, 237, 0.12) 100%); 
}
.staff-item[data-color="orange"] { 
border-color: #fdba74; 
background: linear-gradient(135deg, rgba(234, 88, 12, 0.08) 0%, rgba(234, 88, 12, 0.12) 100%); 
}
.staff-item[data-color="pink"] { 
border-color: #f9a8d4; 
background: linear-gradient(135deg, rgba(219, 39, 119, 0.08) 0%, rgba(219, 39, 119, 0.12) 100%); 
}
.staff-item[data-color="teal"] { 
border-color: #5eead4; 
background: linear-gradient(135deg, rgba(13, 148, 136, 0.08) 0%, rgba(13, 148, 136, 0.12) 100%); 
}
.staff-item[data-color="yellow"] { 
border-color: #fde047; 
background: linear-gradient(135deg, rgba(202, 138, 4, 0.08) 0%, rgba(202, 138, 4, 0.12) 100%); 
}
.staff-item[data-color="red"] { 
border-color: #fca5a5; 
background: linear-gradient(135deg, rgba(220, 38, 38, 0.08) 0%, rgba(220, 38, 38, 0.12) 100%); 
}

.staff-item[data-color="blue"]:hover { border-color: #0ea5e9; background: rgba(14, 165, 233, 0.2); }
.staff-item[data-color="green"]:hover { border-color: #16a34a; background: rgba(22, 163, 74, 0.2); }
.staff-item[data-color="purple"]:hover { border-color: #7c3aed; background: rgba(124, 58, 237, 0.2); }
.staff-item[data-color="orange"]:hover { border-color: #ea580c; background: rgba(234, 88, 12, 0.2); }
.staff-item[data-color="pink"]:hover { border-color: #db2777; background: rgba(219, 39, 119, 0.2); }
.staff-item[data-color="teal"]:hover { border-color: #0d9488; background: rgba(13, 148, 136, 0.2); }
.staff-item[data-color="yellow"]:hover { border-color: #ca8a04; background: rgba(202, 138, 4, 0.2); }
.staff-item[data-color="red"]:hover { border-color: #dc2626; background: rgba(220, 38, 38, 0.2); }

.staff-item[data-color="blue"].selected { border-color: #0ea5e9; background: rgba(14, 165, 233, 0.25); box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3); }
.staff-item[data-color="green"].selected { border-color: #16a34a; background: rgba(22, 163, 74, 0.25); box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3); }
.staff-item[data-color="purple"].selected { border-color: #7c3aed; background: rgba(124, 58, 237, 0.25); box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3); }
.staff-item[data-color="orange"].selected { border-color: #ea580c; background: rgba(234, 88, 12, 0.25); box-shadow: 0 2px 8px rgba(234, 88, 12, 0.3); }
.staff-item[data-color="pink"].selected { border-color: #db2777; background: rgba(219, 39, 119, 0.25); box-shadow: 0 2px 8px rgba(219, 39, 119, 0.3); }
.staff-item[data-color="teal"].selected { border-color: #0d9488; background: rgba(13, 148, 136, 0.25); box-shadow: 0 2px 8px rgba(13, 148, 136, 0.3); }
.staff-item[data-color="yellow"].selected { border-color: #ca8a04; background: rgba(202, 138, 4, 0.25); box-shadow: 0 2px 8px rgba(202, 138, 4, 0.3); }
.staff-item[data-color="red"].selected { border-color: #dc2626; background: rgba(220, 38, 38, 0.25); box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3); }

.staff-role {
color: #1a202c;
font-size: 15px;
font-weight: 600;
white-space: nowrap;
letter-spacing: -0.01em;
}

.staff-item.selected .staff-role {
color: #2b6cb0;
}

/* Touch feedback for mobile */
@media (hover: none) {
.staff-item:active {
transform: scale(0.98);
transition: transform 0.1s ease;
}
}

/* Chat Area */
.chat-area {
flex: 1;
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
min-width: 0;
min-height: 0; /* Important for flexbox shrinking */
overflow: hidden;
position: relative; /* For iOS keyboard handling */
}

.chat-header {
background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
padding: 16px 24px;
border-bottom: 1px solid #e2e8f0;
font-weight: 500;
color: #1a202c;
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
transition: all 0.3s ease;
}

.chat-header[style*="display: none"] + .chat-messages {
/* When header is hidden, expand messages area */
height: calc(100% - 80px); /* Subtract only the input container height */
}



/* Chat Messages - ENHANCED SCROLLING */
.chat-messages {
flex: 1;
padding: 24px;
overflow-y: auto;
overflow-x: hidden;
background: #f8fafc;
display: flex;
flex-direction: column;
gap: 16px;
/* min-height removed to allow flexbox to handle shrinking naturally */
/* max-height removed to allow chat-messages to fill available space */
scrollbar-width: thin;
scrollbar-color: #cbd5e0 #f1f1f1;
}

.chat-message {
max-width: 70%;
padding: 12px 16px;
border-radius: 12px;
word-wrap: break-word;
word-break: break-word;
line-height: 1.5;
position: relative;
flex-shrink: 0;
}

.chat-message.user {
background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
color: white;
align-self: flex-end;
border-bottom-right-radius: 4px;
}

.chat-message.assistant {
background: white;
border: 1px solid #e2e8f0;
align-self: flex-start;
border-bottom-left-radius: 4px;
color: #2d3748;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Color-coded chat messages to match staff colors */
.chat-message[data-staff-color="blue"] { border-left: 4px solid #0ea5e9; }
.chat-message[data-staff-color="green"] { border-left: 4px solid #16a34a; }
.chat-message[data-staff-color="purple"] { border-left: 4px solid #7c3aed; }
.chat-message[data-staff-color="orange"] { border-left: 4px solid #ea580c; }
.chat-message[data-staff-color="pink"] { border-left: 4px solid #db2777; }
.chat-message[data-staff-color="teal"] { border-left: 4px solid #0d9488; }
.chat-message[data-staff-color="yellow"] { border-left: 4px solid #ca8a04; }
.chat-message[data-staff-color="red"] { border-left: 4px solid #dc2626; }

.chat-message.assistant[data-staff-color="blue"] { border-left: 4px solid #0ea5e9; background: rgba(14, 165, 233, 0.15); }
.chat-message.assistant[data-staff-color="green"] { border-left: 4px solid #16a34a; background: rgba(22, 163, 74, 0.15); }
.chat-message.assistant[data-staff-color="purple"] { border-left: 4px solid #7c3aed; background: rgba(124, 58, 237, 0.15); }
.chat-message.assistant[data-staff-color="orange"] { border-left: 4px solid #ea580c; background: rgba(234, 88, 12, 0.15); }
.chat-message.assistant[data-staff-color="pink"] { border-left: 4px solid #db2777; background: rgba(219, 39, 119, 0.15); }
.chat-message.assistant[data-staff-color="teal"] { border-left: 4px solid #0d9488; background: rgba(13, 148, 136, 0.15); }
.chat-message.assistant[data-staff-color="yellow"] { border-left: 4px solid #ca8a04; background: rgba(202, 138, 4, 0.15); }
.chat-message.assistant[data-staff-color="red"] { border-left: 4px solid #dc2626; background: rgba(220, 38, 38, 0.15); }

/* Staff identifier for messages */
.message-staff-tag {
font-size: 11px;
font-weight: 600;
opacity: 0.8;
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.chat-message.assistant .message-staff-tag {
color: #4299e1;
}

.chat-message.user .message-staff-tag {
color: rgba(255, 255, 255, 0.8);
}

/* Chat Placeholder */
.chat-placeholder {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: #718096;
text-align: center;
flex-direction: column;
gap: 16px;
}

.chat-placeholder i {
font-size: 48px;
color: #cbd5e0;
}

/* Chat Input */
.chat-input-container {
padding: 8px 20px;
background: white;
border-top: 1px solid #e2e8f0;
flex-shrink: 0;
position: relative;
z-index: 100;
/* iOS safe area support */
padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

.chat-input-group {
display: flex;
gap: 8px;
align-items: flex-end;
flex-wrap: wrap;
}

.chat-input {
flex: 1;
padding: 12px 16px;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 16px; /* Prevents zoom on iOS */
resize: none;
min-height: 36px;
max-height: 120px;
font-family: inherit;
transition: all 0.2s ease;
width: 100%;
min-width: 0;
}

.chat-input:focus {
outline: none;
border-color: #4299e1;
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
}

.chat-input:disabled {
background: #f7fafc;
color: #718096;
cursor: not-allowed;
}

#send-btn {
padding: 12px 16px;
min-width: 80px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}

#send-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}

/* Hide download text on mobile */
@media (max-width: 480px) {
.download-text {
display: none;
}
}

/* Buttons */
button[data-primary] {
background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
color: white;
border: none;
padding: 12px 20px;
border-radius: 8px;
font-weight: 500;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 2px 8px rgba(66, 153, 225, 0.3);
min-height: 44px;
min-width: 44px;
touch-action: manipulation;
}

button[data-primary]:hover:not(:disabled) {
background: linear-gradient(135deg, #3182ce 0%, #2c5aa0 100%);
box-shadow: 0 4px 12px rgba(66, 153, 225, 0.4);
transform: translateY(-1px);
}

button[data-secondary] {
background: rgba(255, 255, 255, 0.9);
color: #4a5568;
border: 1px solid #e2e8f0;
padding: 12px 20px;
border-radius: 8px;
font-weight: 500;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
min-width: 44px;
touch-action: manipulation;
}

button[data-secondary]:hover {
background: #f7fafc;
border-color: #cbd5e0;
}

button[data-danger] {
background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
color: white;
border: none;
padding: 12px 20px;
border-radius: 8px;
font-weight: 500;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 2px 8px rgba(245, 101, 101, 0.3);
min-height: 44px;
min-width: 44px;
touch-action: manipulation;
}

button[data-danger]:hover {
background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
transform: translateY(-1px);
}

/* Loading Animation */
.loading-dots {
display: flex;
align-items: center;
gap: 4px;
}

.loading-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #718096;
animation: loading 1.4s infinite ease-in-out;
}

.loading-dot:nth-child(1) { animation-delay: -0.32s; }
.loading-dot:nth-child(2) { animation-delay: -0.16s; }

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

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

.empty-state i {
font-size: 48px;
margin-bottom: 16px;
color: #cbd5e0;
}

.empty-state h3 {
font-size: 18px;
margin-bottom: 8px;
color: #4a5568;
}

/* Modals */
[data-modal] {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 2000;
align-items: center;
justify-content: center;
padding: 20px;
backdrop-filter: blur(4px);
}

[data-modal][data-active] {
display: flex;
}

[data-modal] > div {
background: white;
border-radius: 16px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
width: 100%;
max-width: 600px;
max-height: 80vh;
overflow: hidden;
}

[data-modal] header {
background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
padding: 24px;
border-bottom: 1px solid #e2e8f0;
}

[data-modal] header h3 {
font-size: 18px;
font-weight: 600;
color: #1a202c;
}

[data-modal] .body {
padding: 24px;
overflow-y: auto;
}

[data-modal] footer {
padding: 24px;
border-top: 1px solid #e2e8f0;
display: flex;
justify-content: flex-end;
gap: 12px;
background: #f7fafc;
}

/* Forms */
form > div {
margin-bottom: 20px;
}

label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #2d3748;
font-size: 14px;
}

input, textarea {
width: 100%;
padding: 12px 16px;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 14px;
transition: all 0.2s ease;
background: rgba(255, 255, 255, 0.9);
font-family: inherit;
}

input:focus, textarea:focus {
outline: none;
border-color: #4299e1;
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
background: white;
}

textarea {
resize: vertical;
min-height: 100px;
font-family: inherit;
}

/* Enhanced Responsive Design */
@media (max-width: 768px) {
body {
font-size: 16px; /* Better readability on mobile */
overflow: hidden; /* Prevent body scrolling */
position: fixed;
width: 100%;
height: 100vh;
height: 100dvh; /* Dynamic viewport height for better mobile support */
height: -webkit-fill-available;
margin: 0;
padding: 0;
/* iOS specific */
-webkit-overflow-scrolling: touch;
touch-action: manipulation;
}

main {
height: 100vh;
height: 100dvh;
height: -webkit-fill-available;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
}

.chat-interface {
height: 100%;
height: calc(100vh - var(--keyboard-height));
height: calc(100dvh - var(--keyboard-height));
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
transition: height 0.3s ease;
}

.scenario-header {
padding: 12px 16px;
flex-shrink: 0;
position: relative;
z-index: 1000;
min-height: 60px;
}

.scenario-info h2 {
font-size: 18px;
margin-bottom: 2px;
}

.scenario-info p {
font-size: 11px;
}

.main-chat-container {
flex-direction: column;
flex: 1;
overflow: hidden;
display: flex;
min-height: 0; /* Important for flex children */
}

/* Mobile Staff Panel - Always visible at top */
.staff-panel {
width: 100%;
padding: 10px 16px;
border-right: none;
border-bottom: 1px solid #e2e8f0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
flex-shrink: 0;
height: auto;
min-height: 56px;
max-height: 56px;
}

.staff-panel h3 {
display: none; /* Hide header on mobile */
}

#staff-list {
flex-direction: row;
gap: 8px;
padding-bottom: 4px;
flex-wrap: nowrap;
height: 100%;
align-items: center;
}

.staff-item {
min-width: auto;
flex-shrink: 0;
padding: 8px 14px;
white-space: nowrap;
height: 36px;
display: flex;
align-items: center;
}

.staff-role {
font-size: 12px;
}

/* Mobile Chat Area - Fixed layout */
.chat-area {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0; /* Critical for proper flex behavior */
position: relative;
}

/* Smooth transitions for keyboard appearance */
.chat-area,
.chat-messages {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-header {
padding: 10px 16px;
font-size: 14px;
flex-shrink: 0;
z-index: 10;
background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
transition: all 0.3s ease;
min-height: 40px;
}

/* When header is hidden on mobile, expand chat messages */
.chat-header[style*="display: none"] {
padding: 0;
margin: 0;
border: none;
min-height: 0;
}

.chat-header[style*="display: none"] + .chat-messages {
/* Take up the space freed by hidden header */
flex: 1;
}

.chat-messages {
padding: 12px;
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
min-height: 0;
scrollbar-width: thin;
/* Optimize for mobile scrolling performance */
will-change: scroll-position;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}

.chat-message {
max-width: 85%;
font-size: 14px;
padding: 8px 12px;
}

.message-staff-tag {
font-size: 10px;
}

/* Mobile Chat Input - Always visible at bottom */
.chat-input-container {
padding: 10px 12px;
flex-shrink: 0;
background: white;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
border-top: 1px solid #e2e8f0;
min-height: 60px;
display: flex;
align-items: center;
/* iOS fixes */
position: sticky;
bottom: 0;
z-index: 1000;
-webkit-transform: translateZ(0);
transform: translateZ(0);
width: 100%;
}

.chat-input-group {
gap: 4px;
width: 100%;
display: flex;
align-items: center;
}

.chat-input {
font-size: 16px; /* Prevents zoom on iOS */
padding: 8px 12px;
min-height: 36px;
max-height: 80px;
}

#send-btn {
padding: 8px 12px;
min-width: 60px;
font-size: 12px;
height: 36px;
}

#download-transcript-btn {
padding: 8px 10px;
font-size: 12px;
height: 36px;
}

#download-transcript-btn i {
margin: 0; /* Icon only on mobile */
}

#download-transcript-btn::after {
content: none; /* Hide text on mobile */
}

/* Mobile Modal Adjustments */
[data-modal] {
padding: 16px;
}

[data-modal] > div {
max-width: 100%;
max-height: 90vh;
margin: 0;
}

[data-modal] header {
padding: 16px;
}

[data-modal] header h3 {
font-size: 16px;
}

[data-modal] .body {
padding: 16px;
max-height: calc(90vh - 120px);
}

[data-modal] footer {
padding: 16px;
gap: 8px;
}

/* Mobile Form Adjustments */
input, textarea {
font-size: 16px; /* Prevents zoom on iOS */
padding: 10px 14px;
}

/* Chat placeholder adjustments */
.chat-placeholder {
padding: 20px;
font-size: 14px;
}

.chat-placeholder i {
font-size: 36px;
}

/* Alert positioning for mobile */
.alert {
top: auto;
bottom: 20px;
right: 20px;
left: 20px;
min-width: auto;
max-width: calc(100vw - 40px);
}
}

/* Extra small devices and iPhone specific */
@media (max-width: 480px) {
/* Ensure proper initial layout on very small screens */
body, main, .chat-interface {
height: calc(var(--vh, 1vh) * 100);
max-height: -webkit-fill-available;
}

/* Keyboard-visible states for better mobile handling */
body.keyboard-visible .chat-interface,
body.android-keyboard-visible .chat-interface,
body.input-focused .chat-interface {
height: 100vh; /* Use static viewport height when keyboard is visible */
}

body.keyboard-visible .chat-messages,
body.android-keyboard-visible .chat-messages,
body.input-focused .chat-messages {
/* Allow messages area to shrink when keyboard appears */
flex: 1 1 auto;
min-height: 100px; /* Ensure minimum visibility */
}

body.keyboard-visible .chat-header,
body.android-keyboard-visible .chat-header,
body.input-focused .chat-header {
/* Hide header when keyboard is visible to save space */
display: none !important;
}

body.keyboard-visible .staff-panel,
body.android-keyboard-visible .staff-panel,
body.input-focused .staff-panel {
/* Optionally hide staff panel when typing */
max-height: 0;
padding: 0;
overflow: hidden;
border: none;
transition: all 0.3s ease;
}

/* Ensure chat area uses flexbox properly */
.main-chat-container {
flex: 1 1 0;
min-height: 0;
display: flex;
flex-direction: column;
}

.chat-area {
flex: 1 1 0;
min-height: 0;
display: flex;
flex-direction: column;
position: relative;
}

.chat-messages {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/* Smooth transition when keyboard appears/disappears */
transition: flex 0.3s ease, min-height 0.3s ease;
}

/* Ensure input container is always visible */
.chat-input-container {
flex: 0 0 auto;
position: relative;
z-index: 2000;
background: white;
/* Add safe area padding for devices with home indicator */
padding-bottom: max(8px, env(safe-area-inset-bottom));
/* Keep input at bottom when keyboard appears */
position: sticky;
bottom: 0;
}

.scenario-header {
min-height: 50px;
max-height: 50px;
}

.scenario-info h2 {
font-size: 16px;
margin-bottom: 0;
}

.scenario-info p {
display: none; /* Hide description on very small screens to save space */
}

.scenario-actions button {
font-size: 12px;
padding: 8px 10px;
}

.staff-panel {
min-height: 48px;
max-height: 48px;
padding: 8px 12px;
}

.staff-item {
min-width: auto;
padding: 6px 10px;
height: 32px;
}

.staff-role {
font-size: 11px;
}

.chat-header {
min-height: 36px;
padding: 8px 12px;
}

.chat-message {
max-width: 90%;
font-size: 14px;
}

.chat-input-container {
min-height: 56px;
padding: 8px 10px;
}

.chat-input {
min-height: 34px;
padding: 6px 10px;
font-size: 16px;
}

#send-btn {
height: 34px;
min-width: 50px;
padding: 6px 10px;
}

#download-transcript-btn {
height: 34px;
padding: 6px 8px;
}

#send-btn span {
display: none; /* Hide "Send" text, keep icon only */
}
}

/* Landscape orientation adjustments */
@media (max-height: 500px) and (orientation: landscape) {
.scenario-header {
padding: 10px 16px;
}

.scenario-info h2 {
font-size: 18px;
margin-bottom: 2px;
}

.staff-panel {
padding: 8px 16px;
}

.chat-header {
padding: 8px 16px;
}

.chat-messages {
padding: 12px;
}

.chat-input-container {
padding: 8px 16px;
}

/* Keep the fixed layout in landscape too */
body {
position: fixed;
overflow: hidden;
}

.main-chat-container {
overflow: hidden;
}
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
/* Fix for iOS Safari bottom bar */
body {
min-height: 100vh;
min-height: -webkit-fill-available;
height: 100%;
}

main {
min-height: 100vh;
min-height: -webkit-fill-available;
height: 100%;
}

.chat-interface {
min-height: 100vh;
min-height: -webkit-fill-available;
height: 100%;
}

/* Force chat area to use available space properly */
.chat-area {
min-height: 0;
flex: 1 1 auto;
}

.chat-messages {
flex: 1 1 auto;
min-height: 0;
}

/* Ensure chat input is always visible */
.chat-input-container {
position: sticky;
bottom: 0;
z-index: 1000;
background: white;
padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 768px) {
/* Use environment variables for safe areas */
.scenario-header {
padding-top: calc(12px + env(safe-area-inset-top));
}

.chat-input-container {
padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
padding-left: calc(12px + env(safe-area-inset-left, 0px));
padding-right: calc(12px + env(safe-area-inset-right, 0px));
}

/* Ensure proper height calculation with safe areas */
.main-chat-container {
height: 100%;
max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}

/* Fix for iOS keyboard */
.chat-interface {
position: relative;
overflow: hidden;
}

/* Ensure messages area can shrink when keyboard appears */
.chat-messages {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
}
}

/* Enhanced Scrollbar Styling */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}

::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}

::-webkit-scrollbar-thumb {
background: #cbd5e0;
border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
background: #9ca3af;
}

.chat-messages::-webkit-scrollbar {
width: 6px;
}

.chat-messages::-webkit-scrollbar-thumb {
background: #e2e8f0;
border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
background: #cbd5e0;
}

/* Smooth scrolling for mobile */
.chat-messages,
.staff-panel {
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}

/* Alert Styles */
.alert {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
min-width: 300px;
padding: 16px 20px;
border-radius: 8px;
font-weight: 500;
font-size: 14px;
opacity: 0;
transform: translateX(100%);
transition: all 0.3s ease;
}

.alert.success {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
}

.alert.error {
background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
color: white;
}

.alert.info {
background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
color: white;
}

.alert.show {
opacity: 1;
transform: translateX(0);
}


/* ============================================ */
/* EDUCATOR PORTAL STYLES */
/* ============================================ */

/* Additional educator-specific styles */
.educator-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px 24px;
    text-align: center;
}

.educator-header h1 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 8px;
}

.educator-header p {
    opacity: 0.9;
    font-size: 16px;
}

.educator-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

.scenario-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.scenario-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.scenario-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.scenario-card h3 {
    color: #1a202c;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

.scenario-card .description {
    color: #4a5568;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
}

.scenario-card .meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    font-size: 12px;
    color: #718096;
}

.scenario-card .actions {
    display: flex;
    gap: 8px;
}

.create-scenario-card {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.create-scenario-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(72, 187, 120, 0.3);
}

.create-scenario-card i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.9;
}

.create-scenario-card h3 {
    color: white;
    margin-bottom: 8px;
}

.create-scenario-card p {
    opacity: 0.9;
    text-align: center;
}

.character-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.character-tag {
    background: #e2e8f0;
    color: #2d3748;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

/* Form styles for modals */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-full-width {
    grid-column: 1 / -1;
}

.character-editor {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    background: #f8fafc;
}

.character-editor h4 {
    color: #1a202c;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.remove-character-btn {
    background: #fed7d7;
    color: #c53030;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

@media (max-width: 768px) {
    .scenario-grid {
        grid-template-columns: 1fr;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* iOS Safe Area and Keyboard Support */
@supports (padding: max(0px)) {
    .chat-interface {
        /* Use environment variables for iOS keyboard handling */
        padding-bottom: env(keyboard-inset-height, 0);
    }
    
    .chat-input-container {
        /* Ensure input stays above keyboard and home indicator */
        padding-bottom: max(8px, env(safe-area-inset-bottom));
        margin-bottom: env(keyboard-inset-height, 0);
    }
}

/* iOS-specific viewport handling */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari specific styles */
    .chat-interface {
        height: -webkit-fill-available;
    }
    
    /* When input is focused on iOS */
    input:focus ~ * .chat-messages,
    .chat-input:focus ~ * .chat-messages {
        /* Messages area shrinks when keyboard appears */
        max-height: calc(100vh - 250px);
    }
}

/* Android-specific keyboard handling */
@media screen and (max-width: 768px) {
    /* Visual Viewport API support for modern browsers */
    @supports (height: 100dvh) {
        .chat-interface {
            height: 100dvh;
        }
        
        body.keyboard-visible .chat-interface,
        body.android-keyboard-visible .chat-interface {
            /* Use smaller viewport when keyboard is visible */
            height: calc(100dvh - env(keyboard-inset-height, 0px));
        }
    }
}