body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; }
.login-page { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(135deg, #e7f8ee, #f5f7fa); }
.login-card { width: min(420px, calc(100% - 32px)); padding: 36px; background: white; border-radius: 18px; box-shadow: 0 18px 55px rgba(0,0,0,.10); }
.login-mark { width: 64px; height: 64px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 18px; color: white; background: #16a34a; font-size: 32px; }
.info-box { background: var(--bs-body-bg); border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.qr-wrap { min-height: 230px; display: grid; place-items: center; background: #fafafa; margin: -8px -8px 16px; }
.qr-wrap img { max-width: 220px; image-rendering: pixelated; }
.qr-placeholder { color: #98a2ad; padding: 30px; }
.status-ready { background: #198754; color: white; }.status-qr { background: #ffc107; color: #212529; }.status-disconnected,.status-error { background: #dc3545; color: white; }.status-authenticated { background: #0dcaf0; color: #212529; }
.chat-messages { height: 55vh; overflow-y: auto; background: #f3f6f8; }
.message-bubble { max-width: 75%; padding: 9px 12px; margin-bottom: 10px; border-radius: 12px; white-space: pre-wrap; }
.message-in { background: white; margin-right: auto; }.message-out { background: #d9fdd3; margin-left: auto; }
.chat-media { display: block; max-width: 260px; max-height: 260px; border-radius: 8px; margin-bottom: 6px; object-fit: contain; background: #eef1f3; }
.chat-file { display: inline-flex; gap: 7px; align-items: center; margin-bottom: 6px; padding: 8px 10px; border-radius: 7px; background: rgba(0,0,0,.06); color: inherit; text-decoration: none; }
.media-modal-image { max-height: 75vh; object-fit: contain; }
.media-modal-frame { width: 100%; height: 75vh; border: 0; }
.unread-contact { background: #eefbf2; font-weight: 600; }
.unread-contact small { font-weight: 400; }
.api-profile-picker { width: 100%; min-width: 0; }
.api-profile-picker .bootstrap-select { width: 100% !important; min-width: 0; }
.api-profile-picker .bootstrap-select > .dropdown-toggle { white-space: nowrap; }
.api-profile-picker .bootstrap-select .filter-option-inner-inner { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.api-profile-picker .bootstrap-select .dropdown-menu { width: 100%; min-width: 100% !important; max-width: 100%; }
.api-profile-picker .bootstrap-select .dropdown-item, .api-profile-picker .bootstrap-select .dropdown-item .text { white-space: normal; overflow-wrap: anywhere; }