/* Overall app container */
html, body { margin: 0; padding: 0; height: 100%; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.app-root { display: flex; flex-direction: column; height: 100vh; }

/* Top bar */
.top-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; height: 48px; background-color: #20232a; color: #ffffff; }
.app-logo { font-weight: 600; }
.user-menu { display: flex; align-items: center; gap: 8px; cursor: pointer; }

/* Main layout: sidebar + chat */
.main-layout { flex: 1; display: flex; min-height: 0; }

/* Sidebar */
.sidebar { width: 280px; display: flex; flex-direction: column; border-right: 1px solid #e0e0e0; background-color: #fafafa; }
.sidebar-header { padding: 8px; border-bottom: 1px solid #e0e0e0; }
.conversation-search-input { width: 100%; padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; box-sizing: border-box; }
.sidebar-actions { padding: 8px; border-bottom: 1px solid #e0e0e0; }
.sidebar-new-conversation { width: 100%; padding: 6px 0; font-size: 14px; border-radius: 4px; border: 1px solid #0078d4; background-color: #0078d4; color: #ffffff; cursor: pointer; }
.sidebar-new-conversation:hover { background-color: #005fa3; }

.conversation-list { flex: 1; overflow-y: auto; }
.conversation-item { display: flex; justify-content: space-between; padding: 8px 10px; cursor: pointer; border-bottom: 1px solid #f0f0f0; }
.conversation-item:hover { background-color: #f0f0f0; }
.conversation-item-active { background-color: #e3f2fd; }
.conversation-item-main { overflow: hidden; }
.conversation-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversation-last-message { font-size: 12px; color: #666666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversation-meta { font-size: 11px; color: #999999; margin-left: 8px; }

/* Chat panel */
.chat-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* Chat header */
.chat-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; border-bottom: 1px solid #e0e0e0; background-color: #ffffff; }
.chat-header-main { display: flex; flex-direction: column; }
.chat-title { font-size: 16px; font-weight: 600; }
.chat-subtitle { font-size: 12px; color: #777777; }
.chat-header-actions { display: flex; align-items: center; gap: 12px; }
.chat-retention-label { font-size: 12px; margin-right: 4px; }
.chat-retention-select { font-size: 12px; padding: 2px 4px; }
.chat-clear-button { font-size: 12px; padding: 4px 8px; border-radius: 4px; border: 1px solid #d32f2f; background-color: #ffffff; color: #d32f2f; cursor: pointer; }
.chat-clear-button:hover { background-color: #ffebee; }

/* Messages area */
.message-list-container { flex: 1; overflow-y: auto; padding: 12px 16px; background-color: #e5ddd5; }
.message-list { display: flex; flex-direction: column; gap: 6px; }

.message-row { display: flex; }
.message-row-incoming { justify-content: flex-start; }
.message-row-outgoing { justify-content: flex-end; }

.message-bubble { max-width: 70%; padding: 8px 10px; border-radius: 12px; font-size: 14px; line-height: 1.4; background-color: #ffffff; position: relative; }
.message-row-outgoing .message-bubble { background-color: #dcf8c6; }
.message-text { margin-bottom: 4px; white-space: pre-wrap; word-wrap: break-word; }
.message-media { margin-bottom: 4px; }
.message-image { max-width: 100%; border-radius: 8px; display: block; }
.message-meta { font-size: 11px; color: #777777; text-align: right; }

/* Composer */
.composer-container { border-top: 1px solid #e0e0e0; background-color: #ffffff; padding: 8px 16px; }
.message-form { margin: 0; }
.composer-inner { display: flex; align-items: flex-end; gap: 8px; }
.composer-main { flex: 1; }
.composer-textarea { width: 100%; resize: none; min-height: 36px; max-height: 120px; padding: 6px 8px; border-radius: 4px; border: 1px solid #cccccc; font-size: 14px; box-sizing: border-box; }
.composer-side { display: flex; align-items: center; gap: 8px; }
.composer-attach-label { cursor: pointer; font-size: 18px; line-height: 1; }
.composer-attach-input { display: none; }
.composer-send-button { padding: 6px 12px; border-radius: 4px; border: 1px solid #0078d4; background-color: #0078d4; color: #ffffff; font-size: 14px; cursor: pointer; }
.composer-send-button:hover { background-color: #005fa3; }

.chat-header-left { display: flex; align-items: center; gap: 10px; }
.chat-mobile-back { display: none; padding: 6px 10px; border-radius: 4px; border: 1px solid #cccccc; background-color: #ffffff; cursor: pointer; }

/* Mobile: show one pane at a time */
@media (max-width: 800px) {
    .sidebar { width: 100%; }
    .chat-panel { width: 100%; }
    .chat-mobile-back { display: inline-block; }

    /* Default: show sidebar, hide chat */
    .app-root.is-mobile .sidebar { display: flex; }
    .app-root.is-mobile .chat-panel { display: none; }

    /* When a conversation is open: hide sidebar, show chat */
    .app-root.is-mobile.is-chat-open .sidebar { display: none; }
    .app-root.is-mobile.is-chat-open .chat-panel { display: flex; }
}