/* === BMO v4 - PNG Face, Dual Popout === */
:root {
    --mode-color: #4ECDC4; --mode-color-dark: #3DBDB5; --mode-color-glow: rgba(78, 205, 196, 0.35);
    --screen-bg: #1a2a2a; --bg: #1a1a2e; --panel-bg: #16213e;
    --text: #e8e8e8; --text-dim: #999; --border: #2a2a4a; --radius: 16px; --t: 0.5s;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI',system-ui,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; }
.app-container { display:flex; gap:24px; max-width:1200px; margin:0 auto; padding:20px; min-height:100vh; align-items:flex-start; }

/* Face */
.bmo-character { flex:0 0 280px; position:sticky; top:20px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.bmo-frame { background:linear-gradient(180deg,var(--mode-color),var(--mode-color-dark)); border-radius:24px; padding:12px; width:100%; aspect-ratio:4/3; box-shadow:0 0 50px var(--mode-color-glow),0 8px 32px rgba(0,0,0,0.3),inset 0 2px 0 rgba(255,255,255,0.2),inset 0 -4px 0 rgba(0,0,0,0.15); border:3px solid var(--mode-color-dark); transition:all var(--t) ease; }
.bmo-screen { background:var(--screen-bg); border-radius:13px; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; border:2px solid #0d1a1a; box-shadow:inset 0 0 30px rgba(0,0,0,0.3); overflow:hidden; padding:2px; }
.bmo-face-img { width:100%; height:100%; object-fit:fill; }
.bmo-status { color:var(--mode-color); font-size:9px; font-family:monospace; letter-spacing:2px; text-transform:uppercase; opacity:0.7; margin-top:2px; transition:color var(--t) ease; }

/* Indicators */
.indicators { display:flex; flex-direction:column; gap:5px; width:100%; }
.indicator { display:flex; align-items:center; gap:7px; padding:5px 12px; background:var(--panel-bg); border-radius:16px; border:1px solid var(--border); font-size:11px; }
.ind-dot { width:7px; height:7px; border-radius:50%; background:var(--mode-color); box-shadow:0 0 6px var(--mode-color); transition:all var(--t) ease; }
.ind-label { color:var(--text); font-weight:600; }
.model-indicator .ind-label { font-family:monospace; font-size:10px; color:var(--text-dim); }

/* Chat */
.chat-panel { flex:1; background:var(--panel-bg); border-radius:var(--radius); display:flex; flex-direction:column; height:calc(100vh - 40px); min-height:600px; border:1px solid var(--border); overflow:hidden; }
.chat-header { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid var(--border); background:rgba(0,0,0,0.2); flex-wrap:wrap; gap:6px; }
.chat-header h1 { font-size:17px; color:var(--mode-color); letter-spacing:1px; transition:color var(--t) ease; }
.header-controls { display:flex; gap:5px; align-items:center; flex-wrap:wrap; }
.mode-selector,.model-selector { display:flex; gap:3px; }
.mode-btn { padding:5px 10px; border:1px solid var(--border); border-radius:14px; background:transparent; color:var(--text-dim); cursor:pointer; font-size:11px; transition:all 0.2s; white-space:nowrap; }
.mode-btn:hover { border-color:var(--mode-color); color:var(--mode-color); }
.mode-btn.active { background:var(--mode-color); color:var(--bg); border-color:var(--mode-color); font-weight:600; transition:all var(--t) ease; }
.model-btn { width:32px; height:32px; border-radius:50%; border:1px solid var(--border); background:transparent; color:var(--text-dim); cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
.model-btn:hover { border-color:var(--mode-color); color:var(--mode-color); }
.model-btn.active { background:var(--mode-color); color:var(--bg); border-color:var(--mode-color); transition:all var(--t) ease; }
.icon-btn { width:32px; height:32px; border-radius:7px; border:1px solid var(--border); background:transparent; color:var(--text-dim); cursor:pointer; font-size:15px; display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
.icon-btn:hover { border-color:var(--mode-color); color:var(--mode-color); }

/* Messages */
.chat-messages { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; scroll-behavior:smooth; }
.chat-messages::-webkit-scrollbar { width:4px; }
.chat-messages::-webkit-scrollbar-track { background:transparent; }
.chat-messages::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.message { display:flex; gap:8px; max-width:88%; animation:msg-in 0.25s ease-out; }
@keyframes msg-in { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }
.bmo-message { align-self:flex-start; }
.user-message { align-self:flex-end; flex-direction:row-reverse; }
.msg-avatar { font-size:22px; flex-shrink:0; width:32px; height:32px; display:flex; align-items:center; justify-content:center; }
.msg-content { background:rgba(255,255,255,0.04); padding:9px 12px; border-radius:12px; border:1px solid var(--border); line-height:1.45; font-size:13px; }
.user-message .msg-content { background:rgba(78,205,196,0.07); border-color:var(--mode-color-glow); }
.msg-tags { display:flex; gap:5px; margin-top:5px; }
.tag { font-size:9px; padding:2px 7px; border-radius:8px; background:rgba(255,255,255,0.04); color:var(--text-dim); }
.mode-tag { border:1px solid var(--mode-color); color:var(--mode-color); }
.typing-dots { display:flex; gap:3px; padding:5px 0; }
.typing-dots span { width:5px; height:5px; background:var(--mode-color); border-radius:50%; animation:type-dot 1.2s infinite; }
.typing-dots span:nth-child(2) { animation-delay:0.2s; }
.typing-dots span:nth-child(3) { animation-delay:0.4s; }
@keyframes type-dot { 0%,60%,100%{opacity:0.3;transform:translateY(0);} 30%{opacity:1;transform:translateY(-3px);} }

/* Input */
.chat-input-area { padding:10px 14px; border-top:1px solid var(--border); background:rgba(0,0,0,0.2); }
.input-row { display:flex; gap:7px; align-items:center; }
.chat-input { flex:1; padding:9px 12px; border:1px solid var(--border); border-radius:20px; background:rgba(255,255,255,0.03); color:var(--text); font-size:13px; outline:none; transition:border-color 0.2s; }
.chat-input:focus { border-color:var(--mode-color); }
.chat-input::placeholder { color:var(--text-dim); }
.mic-btn,.send-btn { width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:rgba(255,255,255,0.03); color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; flex-shrink:0; }
.mic-btn:hover,.send-btn:hover { background:rgba(78,205,196,0.1); border-color:var(--mode-color); color:var(--mode-color); }
.mic-btn.recording { background:#FF6B6B; border-color:#FF6B6B; color:white; animation:pulse-rec 1.5s infinite; }
@keyframes pulse-rec { 0%,100%{box-shadow:0 0 0 0 rgba(255,107,107,0.4);} 50%{box-shadow:0 0 0 8px rgba(255,107,107,0);} }
.send-btn:disabled { opacity:0.35; cursor:not-allowed; }
.listening-indicator { display:flex; align-items:center; gap:7px; padding:6px 0 2px; color:#FF6B6B; font-size:11px; }
.pulse-ring { width:7px; height:7px; border-radius:50%; background:#FF6B6B; animation:pulse-ring 1s infinite; }
@keyframes pulse-ring { 0%{box-shadow:0 0 0 0 rgba(255,107,107,0.5);} 100%{box-shadow:0 0 0 6px rgba(255,107,107,0);} }

/* Fullscreen Face */
.app-container.fullscreen-focus { max-width:100vw; padding:0; height:100vh; justify-content:center; align-items:center; background:var(--bg); }
.app-container.fullscreen-focus .chat-panel,.app-container.fullscreen-focus .indicators { display:none; }
.app-container.fullscreen-focus .bmo-character { flex:0 0 auto; position:static; width:100vw; height:100vh; max-width:100vw; }
.app-container.fullscreen-focus .bmo-frame { width:100vw; height:100vh; aspect-ratio:auto; border-radius:0; padding:0; border:none; box-shadow:0 0 120px var(--mode-color-glow); }
.app-container.fullscreen-focus .bmo-screen { border-radius:0; border:none; width:100%; height:100%; }
.app-container.fullscreen-focus .bmo-status { font-size:16px; }

/* Chat popout - chat only, keeps face on main */
.app-container.popout { max-width:520px; padding:0; }
.app-container.popout .chat-panel { height:100vh; border-radius:0; }
.app-container.popout .bmo-character { display:none; }

/* Face popout - face only, keeps chat on main */
.app-container.face-popout { max-width:100vw; padding:0; height:100vh; justify-content:center; align-items:center; background:var(--bg); }
.app-container.face-popout .chat-panel { display:none; }
.app-container.face-popout .indicators { display:none; }
.app-container.face-popout .bmo-character { flex:1; max-width:600px; max-height:90vh; position:static; }

@media (max-width:768px) { .app-container { flex-direction:column; padding:8px; align-items:center; } .bmo-character { flex:none; position:static; max-width:200px; } .chat-panel { height:70vh; } }