/* AI Chat UI prototype styles */
:root { --ai-bg: #0b0b11; --ai-accent: #3aa0ff; --ai-assistant: #111827; }
/* Make chat area centered and more chatbot-like */
#jp-app { background: linear-gradient(180deg,#050608,#0d0c10); }
#chatroom { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
#message-list { width: 720px; max-width: calc(100% - 40px); height: 520px; overflow:auto; padding: 20px; background: linear-gradient(180deg,#0f0f12,#0b0b0e); border-radius:12px; border:1px solid rgba(255,255,255,0.03); }
.msg-block { margin: 8px 0; display:block; }
.msg-block .msg-header { display:none; }
.msg-block .msg-content { display:inline-block; padding:14px 18px; border-radius:14px; max-width:78%; font-size:15px; }
.msg-block.msg-voyeur .msg-content { background: rgba(255,255,255,0.03); color: #e6e6e6; margin-left:auto; }
.msg-block.msg-system .msg-content { background: linear-gradient(90deg,#0b84ff,#6be1ff); color:#031022; border-radius:18px; }
.msg-block.msg-dom .msg-content { background: linear-gradient(90deg,#ffd166,#ff8c42); color:#111; }
.msg-block.msg-sub .msg-content { background: linear-gradient(90deg,#9be15d,#43d787); color:#04220a; }
/* Input bar large AI style */
#chat-input-bar { width: 720px; max-width: calc(100% - 40px); display:flex; gap:8px; padding:12px; background:transparent; }
#chat-textarea { flex:1; padding:12px 14px; border-radius:12px; background:#0b0b10; color:#fff; border:1px solid rgba(255,255,255,0.04); min-height:48px; max-height:160px; resize:none; }
#chat-send-btn { background:var(--ai-accent); color:white; border-radius:10px; padding:10px 14px; border:none; cursor:pointer; }
/* Floating call modal */
#video-call-modal { position:fixed; right:20px; bottom:20px; width:360px; height:240px; background:#000; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,0.6); overflow:hidden; display:none; z-index:9999; }
#video-call-modal video { width:100%; height:100%; object-fit:cover; background:#000; }
#video-call-controls { position:absolute; left:8px; bottom:8px; display:flex; gap:8px; }
.call-btn { background:rgba(255,255,255,0.06); color:#fff; border-radius:8px; padding:6px 8px; cursor:pointer; border:1px solid rgba(255,255,255,0.04); }
#video-local { position:absolute; width:110px; height:80px; right:8px; top:8px; border-radius:8px; overflow:hidden; border:2px solid rgba(255,255,255,0.06); }
#video-local video { width:100%; height:100%; object-fit:cover; }
@media (max-width:900px){ #message-list, #chat-input-bar { width: calc(100% - 24px); } }