*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}.app{display:flex;height:100vh;max-width:1400px;margin:0 auto;background:#fff;box-shadow:0 0 20px #0000001a}.chat-container{flex:1;display:flex;flex-direction:column;border-right:1px solid #e0e0e0}.chat-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:20px;text-align:center;display:flex;justify-content:space-between;align-items:center}.chat-header h1{margin:0;font-size:24px;font-weight:600;flex:1;text-align:center}.chat-header p{margin:5px 0 0;opacity:.9;font-size:14px}.session-info{margin-top:15px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.flow-badge{background:#fff3;padding:4px 8px;border-radius:12px;font-size:12px;font-weight:600}.stage-info{background:#ffffff26;padding:2px 6px;border-radius:8px;font-size:11px}.progress-bar{background:#fff3;height:6px;width:100px;border-radius:3px;overflow:hidden}.progress-fill{background:#4caf50;height:100%;transition:width .3s ease}.progress-text{font-size:11px;opacity:.9}.chat-messages{flex:1;overflow-y:auto;padding:20px;background:#f8f9fa}.message{margin-bottom:20px;display:flex;align-items:flex-start}.message.user{justify-content:flex-end}.message.assistant{justify-content:flex-start}.message-content{max-width:70%;padding:12px 16px;border-radius:18px;line-height:1.4;font-size:14px}.message.user .message-content{background:#667eea;color:#fff;border-bottom-right-radius:4px}.message.assistant .message-content{background:#fff;color:#333;border:1px solid #e0e0e0;border-bottom-left-radius:4px;box-shadow:0 2px 4px #0000001a}.chat-input-container{padding:20px;background:#fff;border-top:1px solid #e0e0e0}.input-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:8px 0}.control-left,.control-right{display:flex;align-items:center;gap:10px}.audio-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;color:#666}.audio-toggle input[type=checkbox]{margin:0;transform:scale(.9)}.questions-count{font-size:12px;color:#888;background:#f5f5f5;padding:4px 8px;border-radius:8px}.reset-session-button{background:#667eea;color:#fff;border:none;padding:6px 10px;border-radius:6px;font-size:12px;cursor:pointer;transition:background-color .2s}.reset-session-button:hover{background:#5a6fd8}.chat-input-form{display:flex;gap:12px}.chat-input{flex:1;padding:12px 16px;border:2px solid #e0e0e0;border-radius:24px;font-size:14px;outline:none;transition:border-color .2s}.chat-input:focus{border-color:#667eea}.chat-input:disabled{background:#f5f5f5;cursor:not-allowed}textarea.chat-input{resize:vertical;min-height:44px;max-height:120px;font-family:inherit;line-height:1.4}.send-button{background:#667eea;color:#fff;border:none;border-radius:50%;width:44px;height:44px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s;font-size:16px}.send-button:hover:not(:disabled){background:#5a6fd8}.send-button:disabled{background:#ccc;cursor:not-allowed}.metrics-panel{width:350px;background:#f8f9fa;padding:20px;overflow-y:auto;border-left:1px solid #e0e0e0}.metrics-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.metrics-title{font-size:18px;font-weight:600;color:#333;margin:0}.reset-button{background:#dc3545;color:#fff;border:none;padding:6px 12px;border-radius:6px;font-size:12px;cursor:pointer;transition:background-color .2s}.reset-button:hover{background:#c82333}.metric-card{background:#fff;border-radius:8px;padding:16px;margin-bottom:16px;box-shadow:0 2px 4px #0000001a}.metric-card.highlight{border-left:4px solid #dc3545;background:linear-gradient(135deg,#fff,#fff5f5)}.metric-card.mini{padding:12px;margin-bottom:8px}.metric-card.operation{border-left:4px solid #667eea}.metric-card.comparison{border-left:4px solid #ff9800;background:linear-gradient(135deg,#fff,#fffbf0)}.metric-card.info{border-left:4px solid #28a745;background:linear-gradient(135deg,#fff,#f8fff8)}.metric-row{display:flex;gap:8px;margin-bottom:16px}.metric-row .metric-card{flex:1;margin-bottom:0}.metrics-section{margin:20px 0}.metrics-section h3{font-size:14px;color:#333;margin:0 0 12px;padding-bottom:6px;border-bottom:1px solid #e0e0e0}.metric-label{font-size:12px;color:#666;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}.metric-value{font-size:18px;font-weight:600;color:#333}.metric-value.cost{color:#dc3545}.metric-value.tokens{color:#28a745}.metric-value.model{color:#667eea;font-size:14px}.metric-detail{font-size:11px;color:#888;margin-top:4px}.metric-detail.audio{color:#ff9800;font-weight:500}.loading{display:flex;align-items:center;justify-content:center;padding:20px;color:#666}.error{background:#f8d7da;color:#721c24;padding:12px 16px;border-radius:8px;margin:20px;border:1px solid #f5c6cb}.selection-buttons{display:flex;gap:12px;justify-content:center;margin-top:16px}.selection-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:12px 24px;border-radius:24px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 8px #667eea4d;min-width:120px}.selection-btn:hover{transform:translateY(-2px);box-shadow:0 6px 12px #667eea66}.selection-btn:active{transform:translateY(0);box-shadow:0 2px 4px #667eea4d}.message-content.loading{display:flex;align-items:center;gap:8px}.message-content.loading span:after{content:"";animation:dots 1.5s steps(4,end) infinite}@keyframes dots{0%,20%{content:""}40%{content:"."}60%{content:".."}80%,to{content:"..."}}.audio-interface{padding:16px;background:#f8f9fa;border-radius:12px;border:2px dashed #667eea}.audio-controls{display:flex;justify-content:center;align-items:center}.audio-options{display:flex;flex-direction:column;align-items:center;gap:16px}.audio-divider{font-size:14px;color:#666;font-weight:500;position:relative}.audio-divider:before,.audio-divider:after{content:"";position:absolute;top:50%;width:40px;height:1px;background:#ddd}.audio-divider:before{left:-50px}.audio-divider:after{right:-50px}.upload-audio-container{display:flex;flex-direction:column;align-items:center}.upload-button{background:linear-gradient(135deg,#3498db,#2980b9);color:#fff;border:none;padding:12px 24px;border-radius:24px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 8px #3498db4d;display:flex;align-items:center;gap:8px}.upload-button:hover{transform:translateY(-2px);box-shadow:0 6px 12px #3498db66}.upload-button.disabled{background:#ccc;cursor:not-allowed;transform:none;box-shadow:none}.upload-button.disabled:hover{transform:none;box-shadow:none}.record-button{background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff;border:none;padding:12px 24px;border-radius:24px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 8px #e74c3c4d;display:flex;align-items:center;gap:8px}.record-button:hover{transform:translateY(-2px);box-shadow:0 6px 12px #e74c3c66}.recording-controls{display:flex;flex-direction:column;align-items:center;gap:12px}.stop-button{background:linear-gradient(135deg,#34495e,#2c3e50);color:#fff;border:none;padding:12px 24px;border-radius:24px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 8px #34495e4d}.stop-button:hover{transform:translateY(-2px);box-shadow:0 6px 12px #34495e66}.recording-indicator{font-size:14px;font-weight:600;color:#e74c3c;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.audio-preview{display:flex;flex-direction:column;gap:16px}.audio-player{display:flex;justify-content:center}.audio-player audio{width:100%;max-width:400px}.audio-actions{display:flex;gap:12px;justify-content:center}.send-audio-button{background:linear-gradient(135deg,#27ae60,#229954);color:#fff;border:none;padding:10px 20px;border-radius:20px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 3px 6px #27ae604d}.send-audio-button:hover{transform:translateY(-1px);box-shadow:0 4px 8px #27ae6066}.cancel-audio-button{background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff;border:none;padding:10px 20px;border-radius:20px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 3px 6px #e74c3c4d}.cancel-audio-button:hover{transform:translateY(-1px);box-shadow:0 4px 8px #e74c3c66}.audio-message{display:flex;flex-direction:column;gap:8px}.audio-message-text{font-size:14px;color:#333}.audio-message-player{margin-top:8px}.audio-message-player audio{width:100%;max-width:250px}.button-icon{font-size:18px}.button-text{font-size:14px;font-weight:600}.instruction-setup{padding:20px;background:#f8f9fa;border-radius:12px;margin:20px;border:2px solid #e9ecef}.instruction-setup-content h3{color:#495057;margin-bottom:10px;font-size:18px;font-weight:600}.instruction-setup-content p{color:#6c757d;margin-bottom:20px;line-height:1.5}.instruction-textarea-container{margin-bottom:20px}.instruction-textarea-container label{display:block;margin-bottom:8px;font-weight:500;color:#495057}.instruction-textarea{width:100%;padding:12px;border:2px solid #dee2e6;border-radius:8px;font-family:inherit;font-size:14px;line-height:1.5;resize:vertical;min-height:120px;transition:border-color .2s ease}.instruction-textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.instruction-textarea:disabled{background-color:#f8f9fa;color:#6c757d;cursor:not-allowed}.instruction-actions{margin-bottom:20px}.save-instructions-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:8px}.save-instructions-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #667eea4d}.save-instructions-btn:disabled{background:#6c757d;cursor:not-allowed;transform:none;box-shadow:none}.instruction-tips{background:#e3f2fd;padding:16px;border-radius:8px;border-left:4px solid #2196f3}.instruction-tips h4{color:#1976d2;margin-bottom:10px;font-size:14px;font-weight:600}.instruction-tips ul{margin:0;padding-left:20px;color:#424242}.instruction-tips li{margin-bottom:4px;font-size:13px;line-height:1.4}.current-instructions{background:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;padding:16px;margin-bottom:20px}.current-instructions h4{color:#495057;margin-bottom:10px;font-size:14px;font-weight:600}.instructions-preview{background:#fff;border:1px solid #e9ecef;border-radius:6px;padding:12px;font-size:13px;line-height:1.5;color:#495057;white-space:pre-wrap;max-height:120px;overflow-y:auto;margin-bottom:12px}.edit-instructions-btn{background:linear-gradient(135deg,#17a2b8,#138496);color:#fff;border:none;padding:8px 16px;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:6px}.edit-instructions-btn:hover{transform:translateY(-1px);box-shadow:0 3px 8px #17a2b84d}.cancel-edit-btn{background:linear-gradient(135deg,#6c757d,#5a6268);color:#fff;border:none;padding:8px 16px;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:6px;margin-right:8px}.cancel-edit-btn:hover{transform:translateY(-1px);box-shadow:0 3px 8px #6c757d4d}.header-actions{display:flex;gap:12px;align-items:center}.edit-instructions-button{background:linear-gradient(135deg,#17a2b8,#138496);color:#fff;border:none;padding:8px 16px;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px}.edit-instructions-button:hover{transform:translateY(-1px);box-shadow:0 3px 8px #17a2b84d}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.edit-instructions-modal{background:#fff;border-radius:12px;box-shadow:0 10px 30px #0000004d;width:90%;max-width:600px;max-height:80vh;overflow:hidden;display:flex;flex-direction:column}.modal-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:20px;display:flex;justify-content:space-between;align-items:center}.modal-header h3{margin:0;font-size:18px;font-weight:600}.close-button{background:none;border:none;color:#fff;font-size:20px;cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s ease}.close-button:hover{background:#fff3}.modal-content{padding:20px;flex:1;overflow-y:auto}.modal-content label{display:block;margin-bottom:8px;font-weight:500;color:#495057}.edit-textarea{width:100%;padding:12px;border:2px solid #dee2e6;border-radius:8px;font-family:inherit;font-size:14px;line-height:1.5;resize:vertical;min-height:200px;transition:border-color .2s ease}.edit-textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.edit-textarea:disabled{background-color:#f8f9fa;color:#6c757d;cursor:not-allowed}.modal-actions{padding:20px;border-top:1px solid #e9ecef;display:flex;gap:12px;justify-content:flex-end}.cancel-button{background:#6c757d;color:#fff;border:none;padding:10px 20px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.cancel-button:hover:not(:disabled){background:#5a6268;transform:translateY(-1px)}.save-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:10px 20px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px}.save-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #667eea4d}.save-button:disabled{background:#6c757d;cursor:not-allowed;transform:none;box-shadow:none}@media (max-width: 768px){.instruction-setup{margin:10px;padding:15px}.edit-instructions-modal{width:95%;margin:10px}.modal-header,.modal-content{padding:15px}.modal-actions{padding:15px;flex-direction:column}.header-actions{flex-direction:column;gap:8px}}