* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: #0e1621; color: #e7e9ec; }

.login-body { height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-box { background: #17212b; padding: 32px; border-radius: 12px; display: flex; flex-direction: column; gap: 12px; width: 280px; }
.login-box h1 { margin: 0 0 8px; font-size: 18px; text-align: center; }
.login-box input { padding: 10px; border-radius: 8px; border: 1px solid #2b3947; background: #0e1621; color: #fff; }
.login-box button { padding: 10px; border-radius: 8px; border: none; background: #4ea4f6; color: #fff; font-weight: 600; cursor: pointer; }
.login-box .error { color: #f66; margin: 0; font-size: 13px; text-align: center; }

#app { height: 100vh; }
.screen { height: 100%; }
.hidden { display: none !important; }

#profile-screen { display: flex; flex-direction: column; align-items: center; padding: 40px 16px; gap: 16px; }
#profile-screen h1 { font-size: 20px; }
.profile-list { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 900px; }
.profile-card { background: #17212b; border-radius: 10px; padding: 16px 20px; min-width: 160px; text-align: center; cursor: pointer; border: 1px solid #2b3947; }
.profile-card:hover { background: #1f2c38; }
.profile-card .bot-dir { color: #7a8a99; font-size: 12px; }
.profile-card .phone { font-size: 15px; margin-top: 4px; }

#chat-screen { display: flex; height: 100%; }
.sidebar { width: 320px; background: #17212b; display: flex; flex-direction: column; border-right: 1px solid #0e1621; }
.sidebar-header { display: flex; align-items: center; gap: 8px; padding: 10px; border-bottom: 1px solid #0e1621; }
.sidebar-header button, .sidebar-header a { background: none; border: none; color: #4ea4f6; cursor: pointer; text-decoration: none; font-size: 13px; }
#current-account { flex: 1; font-size: 13px; color: #9fb0bf; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialog-list { overflow-y: auto; flex: 1; }
.dialog-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #0e1621; }
.dialog-item:hover, .dialog-item.active { background: #2b3947; }
.dialog-item .name { font-weight: 600; font-size: 14px; }
.dialog-item .preview { font-size: 12px; color: #8aa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialog-item .unread { background: #4ea4f6; color: #fff; border-radius: 10px; padding: 1px 7px; font-size: 11px; float: right; }

.chat-area { flex: 1; display: flex; flex-direction: column; }
.chat-header { padding: 14px; font-weight: 600; border-bottom: 1px solid #0e1621; }
.message-list { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.msg { max-width: 60%; padding: 8px 12px; border-radius: 10px; background: #182533; align-self: flex-start; font-size: 14px; }
.msg.out { background: #2b5278; align-self: flex-end; }
.msg .meta { display: block; font-size: 10px; color: #9fb0bf; margin-top: 4px; }
.send-form { display: flex; align-items: center; padding: 10px; gap: 8px; border-top: 1px solid #0e1621; }
.send-form input#message-input { flex: 1; padding: 10px; border-radius: 8px; border: 1px solid #2b3947; background: #0e1621; color: #fff; }
.send-form button { padding: 10px 16px; border-radius: 8px; border: none; background: #4ea4f6; color: #fff; cursor: pointer; }
.attach-btn { cursor: pointer; font-size: 20px; padding: 4px; }
.file-name { font-size: 12px; color: #9fb0bf; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.msg img.media-photo, .msg video, .msg img.media-sticker { max-width: 260px; max-height: 320px; border-radius: 8px; display: block; }
.msg audio { width: 240px; }
.msg .media-doc { display: flex; align-items: center; gap: 8px; background: #0e1621; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: #e7e9ec; }
.msg .media-doc .icon { font-size: 20px; }
.msg .caption { margin-top: 6px; }
.media-placeholder { display: flex; align-items: center; gap: 8px; background: #0e1621; padding: 10px 12px; border-radius: 8px; cursor: pointer; min-width: 200px; }
.media-placeholder:hover { background: #16222e; }
.media-placeholder .icon { font-size: 22px; }
.media-placeholder .label { font-size: 13px; color: #cdd9e3; }