.chat-container { width: 90dvw; height: 90dvh; margin: 5dvh auto; background: #141b2f; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); box-sizing: border-box; display: flex; flex-direction: column; padding: 16px; } .chat-header { padding: 0px 4px 12px; border-bottom: 1px solid #2c3554; } .chat-header h1 { margin: 0; font-size: 1.8rem; } .chat-header .subtitle { margin: 4px 0 0; color: #c0c6e0; font-size: 0.95rem; } /* Chat window */ .chat-window { flex: 1; margin-top: 10px; padding: 10px; overflow-y: auto; background: #0d1324; border-radius: 12px; } /* Message bubbles */ .msg-bubble { max-width: 75%; padding: 8px 12px; margin-bottom: 8px; border-radius: 12px; font-size: 0.95rem; line-height: 1.4; } .msg-bubble.user { margin-left: auto; background: #4c6fff; color: #ffffff; border-bottom-right-radius: 4px; } .msg-bubble.assistant { margin-right: auto; background: #1f2840; color: #f5f5f5; border-bottom-left-radius: 4px; } /* Input area */ .chat-input-area { display: flex; gap: 8px; margin-top: 12px; border-top: 1px solid #2c3554; padding-top: 8px; } .chat-input-container { flex: 1; border-radius: 10px; border: 1px solid #2c3554; background: #0d1324; padding: 8px; resize: none; } .chat-input-area textarea { background: transparent; border: none; resize: none; outline: none; color: #f5f5f5; font-size: 0.95rem; width: 100%; } .chat-toolbar { display: flex; justify-content: space-between; } /* Chat toolbar */ .toolbar-btn { background: transparent; border: none; resize: none; outline: none; color: #f5f5f5; cursor: pointer; transition: background 0.2s; } .toolbar-btn { /* background-color: rgba(255, 255, 255, 0.1); */ margin-left: auto; } /* Status and comment text */ .status-comment { margin-top: 6px; font-size: 0.85rem; display: flex; justify-content: space-between; } .status-info { color: #ffce56; } .status-ok { color: #8be48b; } .status-error { color: #ff8080; }