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

/* --- GLOBAL RESET --- */
* { box-sizing: border-box; outline: none; -webkit-tap-highlight-color: transparent; }
:root { 
    --bg: #0b0b0b; --header: #161616; --input: #1e1e1e; 
    --accent: #0084ff; --text: #e4e6eb; --gray: #b0b3b8; 
    --call-bg: #0f172a; --modal-bg: #1a1a1a;
    --danger: #ff4d4d;
}
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); margin: 0; display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }

/* Header */
header { padding: 10px 15px; background: var(--header); border-bottom: 1px solid #2f2f2f; display: flex; align-items: center; justify-content: space-between; z-index: 100; flex-shrink: 0; }
.brand { display: flex; align-items: center; gap: 10px; }
.logo { width: 35px; height: 35px; background: linear-gradient(135deg, #00c6ff, #0072ff); border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.logo svg { width: 20px; fill: white; }
.info h2 { margin: 0; font-size: 14px; font-weight: 600; }
.info p { margin: 0; font-size: 10px; color: var(--gray); }

/* Model Switcher */
.model-select {
    appearance: none; background: #262626; color: #e4e6eb; border: 1px solid #333;
    padding: 5px 15px; border-radius: 12px; font-size: 11px; font-weight: bold; cursor: pointer; text-align: center;
}
.model-select:focus { border-color: var(--accent); }

.actions { display: flex; gap: 10px; align-items: center; }
.icon-btn { background: transparent; border: none; color: var(--gray); cursor: pointer; padding: 5px; display: flex; align-items: center; transition: 0.2s; }
.icon-btn:hover { color: white; }
.icon-btn svg { width: 22px; height: 22px; fill: currentColor; }

.call-btn { color: #00c6ff; animation: pulse-green 2s infinite; }
@keyframes pulse-green { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }

/* Chat Body */
#chat-box { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 15px; scroll-behavior: smooth; }
.msg { display: flex; gap: 10px; max-width: 100%; align-items: flex-end; }
.msg.user { flex-direction: row-reverse; }
.avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; justify-content: center; align-items: center; background: #262626; border: 1px solid #333; }
.user .avatar { background: var(--accent); border: none; }
.bubble { padding: 10px 15px; border-radius: 18px; font-size: 14px; line-height: 1.6; max-width: 85%; word-wrap: break-word; background: #262626; border: 1px solid #333; position: relative; }
.user .bubble { background: var(--accent); color: white; border: none; border-bottom-right-radius: 4px; }
.ai .bubble { border-bottom-left-radius: 4px; }

/* Code & Syntax */
.markdown-content p { margin: 0 0 8px 0; }
.code-wrapper { margin: 10px 0; border: 1px solid #444; border-radius: 8px; background: #1e1e1e; overflow: hidden; }
.code-header { display: flex; justify-content: space-between; align-items: center; background: #252526; padding: 5px 12px; border-bottom: 1px solid #333; font-size: 11px; color: #aaa; font-family: monospace; }
.markdown-content pre { margin: 0; padding: 0; overflow-x: auto; }
.markdown-content code.hljs { padding: 12px; font-family: 'Fira Code', monospace; font-size: 13px; line-height: 1.5; }
.copy-btn { background: #444; border: none; color: white; padding: 3px 8px; border-radius: 4px; cursor: pointer; font-size: 10px; }
.model-tag { font-size: 9px; color: #666; display: block; text-align: right; margin-top: 5px; font-style: italic; }

.typing-cursor::after { content: '▋'; color: var(--accent); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Footer */
.footer { padding: 10px 15px; background: var(--bg); flex-shrink: 0; }
.input-box { background: var(--input); border-radius: 25px; padding: 5px 8px; display: flex; align-items: center; gap: 5px; border: 1px solid #333; width: 100%; }
.input-box.disabled { opacity: 1; pointer-events: auto; }
.image-mode { border-color: #a855f7; box-shadow: 0 0 10px rgba(168, 85, 247, 0.2); }
input { flex: 1; background: transparent; border: none; color: white; padding: 8px; font-size: 15px; min-width: 0; }

#sendBtn { color: #0084ff; position: relative; }
#stopIcon { fill: var(--danger); display: none; }

#imgBtn.active { color: #a855f7; }
#micBtn.active { color: #ff4d4d; animation: pulse 1s infinite; }
.spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #0084ff; border-radius: 50%; animation: spin 1s infinite; display: none; position: absolute; right: 8px; }
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* SETTINGS MODAL */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 3000; justify-content: center; align-items: center; }
.modal-content { background: var(--modal-bg); padding: 20px; border-radius: 15px; width: 90%; max-width: 350px; border: 1px solid #333; box-shadow: 0 5px 20px rgba(0,0,0,0.5); }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border-bottom: 1px solid #333; padding-bottom: 10px; }
.modal-header h3 { margin: 0; font-size: 16px; }

.setting-item { margin-bottom: 15px; }
.setting-item label { display: block; font-size: 12px; color: #aaa; margin-bottom: 5px; }
.setting-select { 
    width: 100%; background: #262626; color: white; border: 1px solid #444; 
    padding: 10px; border-radius: 8px; outline: none; font-size: 14px; 
    font-family: 'Inter', sans-serif; resize: vertical;
}
.save-btn { width: 100%; background: var(--accent); color: white; border: none; padding: 10px; border-radius: 8px; font-weight: bold; cursor: pointer; margin-top: 10px; }

/* CALL OVERLAY */
#call-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--call-bg); z-index: 2000;
    display: none; flex-direction: column; align-items: center; justify-content: space-between;
    padding: 60px 20px; animation: fadeIn 0.3s;
}
.call-profile { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 40px; }
.call-avatar { 
    width: 140px; height: 140px; 
    background: linear-gradient(135deg, #00c6ff, #0072ff); 
    border-radius: 50%; display: flex; justify-content: center; align-items: center;
    box-shadow: 0 0 40px rgba(0, 132, 255, 0.4); position: relative;
}
.call-avatar svg { width: 70px; height: 70px; fill: white; }
.pulse-ring { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 2px solid #00c6ff; opacity: 0; }
.listening .pulse-ring { animation: ripple 1.5s infinite; }
.speaking .call-avatar { animation: speak-bounce 0.5s infinite alternate; }

.call-status { font-size: 18px; color: #ccc; font-weight: 500; margin-top: 10px; }
.call-controls { display: flex; gap: 30px; margin-bottom: 40px; }
.control-btn { width: 65px; height: 65px; border-radius: 50%; border: none; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.2s; }
.btn-end { background: #ff4d4d; color: white; }
.control-btn svg { width: 30px; height: 30px; fill: currentColor; }

@keyframes ripple { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2); opacity: 0; } }
@keyframes speak-bounce { 0% { transform: scale(1); } 100% { transform: scale(1.05); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Lightbox */
#lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 3000; justify-content: center; align-items: center; }
#lightbox img { max-width: 95%; max-height: 95%; border-radius: 5px; }

/* --- NEW IMAGE GENERATION STYLES --- */

/* 1. Placeholder Box */
.img-placeholder-box {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1 / 1;
    background: #151515;
    border-radius: 12px;
    border: 1px solid #333;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    margin-top: 5px;
}

/* 2. Loading Spinner inside box */
.img-loader {
    width: 40px;
    height: 40px;
    border: 4px solid #333;
    border-top-color: #0084ff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.img-loading-text {
    margin-top: 10px;
    font-size: 12px;
    color: #888;
    font-weight: 500;
}

/* 3. The Generated Image */
.gen-img-final {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
    cursor: zoom-in;
    animation: fadeIn 0.5s ease-in-out;
}

/* 4. Error State inside box */
.img-error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ff4d4d;
    text-align: center;
    padding: 20px;
}

.img-error-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
    fill: currentColor;
}