/* Chat UI specific styles extracted from former inline <style> blocks in chat_ui.html */
.main-content { 
    flex: 1; 
    display: flex; 
    overflow: hidden; 
    height: calc(100vh - 80px); /* Account for header height */
}

.chat-container { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    max-width: 768px; 
    margin: 0 auto; 
    width: 100%;
    height: 100%;
    position: relative;
}

.messages-container { 
    flex: 1; 
    overflow-y: auto; 
    padding: 1rem 2rem 1rem 2rem; 
    scroll-behavior: smooth;
    /* Reserve space for input container */
    padding-bottom: 120px;
    /* Improve scrolling on mobile */
    -webkit-overflow-scrolling: touch;
}
.message-avatar { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; flex-shrink:0; }
.message.user { flex-direction:row-reverse; }
.message.user .message-avatar { background:#1a73e8; color:#fff; }
.message.assistant .message-avatar { background:#34a853; color:#fff; }
.message-thinking { background:#f8f9fa; border:1px solid #e9ecef; border-radius:8px; padding:12px; margin-top:8px; font-size:14px; color:#6c757d; }
.message-thinking summary { cursor:pointer; font-weight:500; }
.input-container { 
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem 2rem 2rem; 
    background: #fff; 
    border-top: 1px solid #e5e5e5;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    z-index: 100;
}
.input-wrapper { position:relative; max-width:768px; margin:0 auto; }
.input-box { display:flex; align-items:flex-end; background:#fff; border:1px solid #dadce0; border-radius:24px; padding:12px; gap:12px; box-shadow:0 2px 6px rgba(0,0,0,0.1); transition:border-color .2s; }
.input-box:focus-within { border-color:#1a73e8; box-shadow:0 2px 6px rgba(26,115,232,0.2); }
.message-input { flex:1; border:none; outline:none; resize:none; font-size:16px; line-height:1.5; max-height:200px; min-height:24px; font-family:inherit; }
.input-actions { display:flex; gap:8px; align-items:center; }
.voice-conversation-btn { width:40px; height:40px; border:none; background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.3s; color:#fff; box-shadow:0 2px 8px rgba(102,126,234,0.3); }
.voice-conversation-btn:hover { transform:scale(1.05); box-shadow:0 4px 12px rgba(102,126,234,0.4); }
.voice-conversation-btn:active { transform:scale(.95); }
.send-btn { width:40px; height:40px; border:none; background:#1a73e8; color:#fff; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s; }
.send-btn:disabled { background:#dadce0; cursor:not-allowed; }
.send-btn:not(:disabled):hover { background:#1557b0; transform:scale(1.05); }
.settings-panel { width:320px; background:#fff; border-left:1px solid #e5e5e5; padding:2rem; overflow-y:auto; transform:translateX(100%); transition:transform .3s ease; }
.settings-panel.open { transform:translateX(0); }
.settings-section { margin-bottom:2rem; }
.settings-section h3 { font-size:16px; font-weight:600; margin-bottom:1rem; color:#202123; }
.setting-item { margin-bottom:1rem; }
.setting-item label { display:block; font-size:14px; font-weight:500; margin-bottom:4px; color:#374151; }
.setting-item input, .setting-item select { width:100%; padding:8px 12px; border:1px solid #dadce0; border-radius:6px; font-size:14px; background:#fff; }
.setting-item input[type=range] { padding:0; }
.checkbox-item { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.range-value { font-size:12px; color:#6b7280; margin-left:8px; }
.status-indicator { padding:8px 12px; border-radius:6px; font-size:14px; margin-bottom:1rem; }
.status-indicator.connected { background:#d1fae5; color:#047857; }
.status-indicator.disconnected { background:#fee2e2; color:#dc2626; }
.status-indicator.processing { background:#fef3c7; color:#d97706; }
.typing-indicator { display:flex; gap:4px; padding:12px; }
.typing-indicator span { width:8px; height:8px; border-radius:50%; background:#9ca3af; animation:typing 1.4s infinite ease-in-out; }
.typing-indicator span:nth-child(1){ animation-delay:-.32s; }
.typing-indicator span:nth-child(2){ animation-delay:-.16s; }
@keyframes typing { 0%,80%,100% { transform:scale(.8); opacity:.5;} 40% { transform:scale(1); opacity:1;} }
.welcome-screen { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    padding: 2rem 2rem 120px; /* Add bottom padding for fixed input */
    min-height: calc(100vh - 200px); /* Ensure minimum height */
}
.welcome-screen h2 { font-size:2rem; font-weight:600; margin-bottom:1rem; color:#202123; }
.welcome-screen p { font-size:1.1rem; color:#6b7280; margin-bottom:2rem; max-width:500px; }
.example-prompts { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1rem; width:100%; max-width:600px; }
.example-prompt { background:#fff; border:1px solid #e5e5e5; border-radius:12px; padding:1rem; cursor:pointer; transition:.2s; }
.example-prompt:hover { border-color:#1a73e8; box-shadow:0 2px 8px rgba(26,115,232,0.1); }
.example-prompt h4 { font-size:14px; font-weight:600; margin-bottom:.5rem; color:#202123; }
.example-prompt p { font-size:13px; color:#6b7280; margin:0; }
#streamingMetricsOverlay { position:fixed; bottom:0; right:0; background:rgba(0,0,0,0.75); color:#fff; font:12px/1.4 monospace; padding:6px 8px; max-height:30vh; width:260px; overflow:auto; border-top-left-radius:6px; display:none; z-index:3000; }
#streamingMetricsOverlay.visible { display:block; }
@media (max-width: 768px) { 
    .main-content { 
        flex-direction: column; 
        height: calc(100vh - 70px); /* Adjusted header height for mobile */
    } 
    
    .chat-container {
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .settings-panel { 
        position: fixed; 
        top: 0; 
        right: 0; 
        height: 100vh; 
        z-index: 1000; 
        box-shadow: -2px 0 10px rgba(0,0,0,0.1);
        width: 90%;
        max-width: 320px;
    } 
    
    .messages-container { 
        padding: 1rem 1rem 120px; /* More space for mobile input */
        height: calc(100vh - 180px); /* Account for header + input */
    } 
    
    .input-container { 
        padding: 0.75rem 1rem 1rem; 
        /* Ensure input is always visible on mobile */
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 101;
        /* Add safe area for mobile devices */
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    } 
    
    .input-box {
        margin: 0;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
    }
    
    .message-content { 
        max-width: 90%; 
    }
    
    .welcome-screen {
        padding: 1rem 1rem 140px; /* Account for mobile input */
        min-height: calc(100vh - 220px);
    }
    
    .example-prompts {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 0.75rem;
    }
    
    .example-prompt {
        padding: 0.75rem;
    }
}
/* Additional mobile optimizations for very small screens */
@media (max-width: 480px) {
    .header {
        padding: 0.75rem 1rem;
    }
    
    .logo {
        font-size: 1.25rem;
    }
    
    .settings-btn {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    .main-content {
        height: calc(100vh - 60px);
    }
    
    .messages-container {
        padding: 0.75rem 0.75rem 130px;
        height: calc(100vh - 190px);
    }
    
    .input-container {
        padding: 0.5rem 0.75rem 0.75rem;
    }
    
    .input-box {
        padding: 8px;
        gap: 8px;
    }
    
    .message-input {
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    .voice-conversation-btn, .send-btn {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }
    
    .welcome-screen {
        padding: 0.75rem 0.75rem 150px;
    }
    
    .welcome-screen h2 {
        font-size: 1.5rem;
    }
    
    .welcome-screen p {
        font-size: 1rem;
    }
}

/* Landscape orientation adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .messages-container {
        height: calc(100vh - 160px);
        padding-bottom: 100px;
    }
    
    .input-container {
        padding: 0.5rem 1rem;
    }
    
    .welcome-screen {
        padding: 1rem 1rem 120px;
        min-height: calc(100vh - 180px);
    }
}

.hidden { display: none !important; }
/* Header adjustments & settings button (moved from inline) */
.header { background:#fff; border-bottom:1px solid #e5e5e5; padding:1rem 2rem; display:flex; justify-content:space-between; align-items:center; box-shadow:0 1px 3px rgba(0,0,0,0.1); }
.logo { font-size:1.5rem; font-weight:600; color:#2d3748; }
.settings-btn { display:flex; align-items:center; gap:8px; padding:8px 16px; border:1px solid #dadce0; background:#fff; border-radius:20px; cursor:pointer; font-size:14px; transition:all .2s; }
.settings-btn:hover { box-shadow:0 1px 3px rgba(0,0,0,0.1); }