:root {
    --bg-main: #111417;
    --bg-surface: #1a1f24;
    --bg-bubble-in: #232a31;
    --bg-bubble-out: #0f62fe;
    --text-primary: #f4f4f4;
    --text-muted: #a8a8a8;
    --border-color: #262d35;
    --accent-color: #393939;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

body { background-color: var(--bg-main); color: var(--text-primary); overflow: hidden; height: 100vh; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hidden { display: none !important; }

/* AUTH MECHANICS LAYOUT */
.auth-body { display: flex; align-items: center; justify-content: center; height: 100vh; background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%); }
.auth-card { background: var(--bg-surface); padding: 2.5rem; border-radius: 8px; width: 100%; max-width: 400px; border: 1px solid var(--border-color); box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
.auth-header h2 { font-size: 1.75rem; margin-bottom: 0.5rem; }
.auth-header p { color: var(--text-muted); font-size: 0.875rem; margin-bottom: 2rem; }
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-size: 0.85rem; color: var(--text-muted); }
.form-group input { width: 100%; padding: 0.75rem; border-radius: 4px; background: var(--bg-main); border: 1px solid var(--border-color); color: white; font-size: 1rem; }
.form-group input:focus { border-color: var(--bg-bubble-out); outline: none; }
.btn { padding: 0.75rem 1.5rem; border-radius: 4px; border: none; font-weight: 600; cursor: pointer; font-size: 1rem; transition: background 0.2s; }
.btn-primary { background: var(--bg-bubble-out); color: white; }
.btn-primary:hover { background: #0353e9; }
.btn-block { width: 100%; }
.error-banner { background: #fa4d56; color: white; padding: 0.75rem; border-radius: 4px; margin-bottom: 1rem; font-size: 0.875rem; }

/* RECONSTRUCTED UNIFIED MESSENGER WORKSPACE LAYOUT */
.app-layout { display: grid; grid-template-columns: 320px 1fr 300px; height: 100vh; }
.panel-header { height: 64px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; background: var(--bg-surface); }
.scrollable-list { overflow-y: auto; height: calc(100vh - 120px); }

/* SIDEBAR & CHAT ELEMENTS */
.sidebar-panel { border-right: 1px solid var(--border-color); background: #14191f; }
.search-filter-wrapper { padding: 0.75rem; border-bottom: 1px solid var(--border-color); }
.search-filter-wrapper input { width: 100%; padding: 0.5rem; border-radius: 4px; background: var(--bg-main); border: 1px solid var(--border-color); color: white; }
.thread-card-item { padding: 1rem; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background 0.15s; }
.thread-card-item:hover { background: var(--bg-surface); }
.active-thread { background: var(--accent-color) !important; }
.thread-meta-row { display: flex; justify-content: space-between; margin-bottom: 0.25rem; }
.thread-contact-title { font-weight: 600; font-size: 0.95rem; width: 70%; }
.thread-time { font-size: 0.75rem; color: var(--text-muted); }
.thread-subject-summary { font-size: 0.85rem; color: var(--text-primary); margin-bottom: 0.15rem; }
.thread-excerpt { font-size: 0.8rem; color: var(--text-muted); }
.unread-thread .thread-contact-title { color: var(--bg-bubble-out); }

/* MESSENGER CANVAS STREAM */
.chat-canvas-panel { display: flex; flex-direction: column; background: var(--bg-main); border-right: 1px solid var(--border-color); }
.message-history-flow { flex: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.message-bubble-wrapper { display: flex; width: 100%; }
.inbound-wrapper { justify-content: flex-start; }
.outbound-wrapper { justify-content: flex-end; }
.message-bubble { max-width: 65%; padding: 0.75rem 1rem; border-radius: 12px; position: relative; font-size: 0.95rem; line-height: 1.4; }
.inbound-wrapper .message-bubble { background: var(--bg-bubble-in); color: var(--text-primary); border-top-left-radius: 2px; }
.outbound-wrapper .message-bubble { background: var(--bg-bubble-out); color: white; border-top-right-radius: 2px; }
.message-timestamp { display: block; font-size: 0.7rem; color: var(--text-muted); margin-top: 0.4rem; text-align: right; }
.outbound-wrapper .message-timestamp { color: #e0e0e0; }

.chat-input-footer { padding: 1rem; background: var(--bg-surface); border-top: 1px solid var(--border-color); }
.message-input-form { display: flex; gap: 0.75rem; }
.message-input-form textarea { flex: 1; background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 4px; padding: 0.75rem; color: white; resize: none; font-size: 0.95rem; }
.message-input-form textarea:focus { outline: none; border-color: var(--bg-bubble-out); }
.btn-send { background: var(--bg-bubble-out); color: white; padding: 0 1.5rem; }

/* CRM & UTILITIES RIGHT SIDEBAR */
.crm-meta-panel { background: #14191f; display: flex; flex-direction: column; }
.crm-content { padding: 1rem; display: flex; flex-direction: column; gap: 1.5rem; overflow-y: auto; height: calc(100vh - 64px); }
.crm-block h4 { font-size: 0.85rem; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.75rem; letter-spacing: 0.5px; }
.crm-list-box { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 4px; min-height: 120px; max-height: 220px; overflow-y: auto; padding: 0.5rem; }
.crm-inline-form { display: flex; margin-top: 0.5rem; gap: 0.25rem; }
.crm-inline-form input { flex: 1; background: var(--bg-main); border: 1px solid var(--border-color); padding: 0.4rem; color: white; font-size: 0.85rem; border-radius: 4px; }
.btn-small { padding: 0.25rem 0.75rem; background: var(--accent-color); color: white; font-size: 0.85rem; }
.crm-note-item { padding: 0.4rem; border-bottom: 1px solid var(--border-color); font-size: 0.85rem; }
.note-date { font-size: 0.7rem; color: var(--text-muted); display: block; margin-top: 0.2rem; }
.task-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem; font-size: 0.85rem; }
.task-item.completed .task-title-text { text-decoration: line-through; color: var(--text-muted); }
.empty-notice, .flow-placeholder-message, .list-placeholder { color: var(--text-muted); font-size: 0.85rem; text-align: center; padding: 2rem 1rem; }
.flow-placeholder-message .placeholder-icon { font-size: 3rem; margin-bottom: 0.5rem; color: var(--border-color); }