* { margin: 0; padding: 0; box-sizing: border-box; }
html { height: 100%; }
body {
    height: 100%; overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #0b141a; color: #e9edef;
}

/* === Auth === */
.auth-page {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; min-height: 100dvh;
    background: linear-gradient(135deg, #00a884 0%, #0b141a 50%, #0b141a 100%);
    padding: 20px;
}
.auth-card {
    background: #1f2c33; border-radius: 12px; padding: 40px 32px;
    max-width: 400px; width: 100%;
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.auth-header { text-align: center; margin-bottom: 28px; }
.auth-header h1 { font-size: 24px; }
.auth-header p { color: #8696a0; font-size: 14px; margin-top: 4px; }
.auth-logo { margin-bottom: 12px; display: flex; justify-content: center; }
.auth-logo svg {
    filter: drop-shadow(0 4px 12px rgba(0,168,132,.3));
}
.auth-form .form-group { margin-bottom: 14px; }
.auth-form input:not([type="file"]) {
    width: 100%; padding: 12px 16px; border: 1px solid #2d3b42; border-radius: 8px;
    background: #2a3942; color: #e9edef; font-size: 15px; outline: none;
}
.auth-form input:focus { border-color: #00a884; }
.auth-form input::placeholder { color: #8696a0; }
.btn {
    width: 100%; padding: 12px; border: none; border-radius: 8px;
    font-size: 15px; font-weight: 600; cursor: pointer;
}
.btn-primary { background: #00a884; color: #fff; margin-top: 8px; }
.btn-primary:hover { opacity: .85; }
.auth-footer { text-align: center; margin-top: 20px; color: #8696a0; font-size: 14px; }
.auth-footer a { color: #00a884; text-decoration: none; font-weight: 600; }
.alert {
    padding: 10px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; text-align: center;
}
.alert-error { background: #3c1f1f; color: #ef9a9a; border: 1px solid #5c2a2a; }
.alert-success { background: #1a3a2a; color: #81c784; border: 1px solid #2a5a3a; }
.file-label {
    display: flex; align-items: center; gap: 8px; padding: 10px 16px;
    border: 1px dashed #2d3b42; border-radius: 8px; cursor: pointer; color: #8696a0; font-size: 14px;
}
.file-label input { display: none; }

/* === Chat Layout === */
.chat-app {
    display: flex; height: 100vh; height: 100dvh; width: 100%;
    max-width: 1600px; margin: 0 auto; background: #111b21;
}

/* === Sidebar === */
.sidebar {
    width: 380px; min-width: 380px; background: #111b21;
    border-right: 1px solid #2d3b42; display: flex; flex-direction: column;
    flex-shrink: 0;
}
.sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; background: #1f2c33; min-height: 60px;
}
.current-user { display: flex; align-items: center; gap: 10px; }
.current-user .avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.current-user span { font-weight: 500; font-size: 16px; }
.btn-logout {
    background: none; border: none; color: #8696a0; cursor: pointer;
    padding: 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.btn-logout:hover { background: #2d3b42; color: #e9edef; }
.search-box { padding: 8px 12px; }
.search-box input {
    width: 100%; padding: 8px 12px; border: none; border-radius: 8px;
    background: #1f2c33; color: #e9edef; font-size: 14px; outline: none;
}
.search-box input::placeholder { color: #8696a0; }
.users-list { flex: 1; overflow-y: auto; }
.users-list::-webkit-scrollbar { width: 5px; }
.users-list::-webkit-scrollbar-thumb { background: #2d3b42; border-radius: 3px; }
.user-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    cursor: pointer; border-bottom: 1px solid #1f2c33;
}
.user-item:hover { background: #1f2c33; }
.user-item.active { background: #2a3942; }
.user-item .avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #2a3942; }
.user-item .user-info { flex: 1; min-width: 0; }
.user-item .user-info .name { font-size: 15px; color: #e9edef; }
.user-item .user-info .preview { font-size: 13px; color: #8696a0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-item .user-meta { text-align: right; flex-shrink: 0; }
.user-item .user-meta .time { font-size: 11px; color: #8696a0; }
.user-item .user-meta .unread {
    background: #00a884; color: #fff; border-radius: 50%; min-width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;
    margin-top: 4px; margin-left: auto;
}
.avatar-wrapper { position: relative; display: inline-block; }
.online-dot {
    width: 10px; height: 10px; border-radius: 50%; background: #00a884;
    border: 2px solid #111b21; position: absolute; bottom: 1px; right: 1px;
}

/* === Main Chat === */
.main-chat { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-placeholder {
    flex: 1; display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 40px;
}
.chat-placeholder h2 { font-size: 26px; font-weight: 300; color: #e9edef; margin-bottom: 8px; }
.chat-placeholder p { color: #8696a0; font-size: 14px; max-width: 280px; }

.chat-area { display: none; flex-direction: column; height: 100%; min-height: 0; }
.chat-header {
    display: flex; align-items: center; gap: 12px; padding: 10px 16px;
    background: #1f2c33; min-height: 60px; flex-shrink: 0;
}
.chat-header .avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #2a3942; }
.chat-partner-info { flex: 1; min-width: 0; }
.chat-partner-info span { font-size: 16px; font-weight: 500; }
.chat-partner-info small { font-size: 12px; color: #8696a0; display: block; margin-top: 2px; }
.chat-partner-info small.online { color: #00a884; }

.messages-area {
    flex: 1; overflow-y: auto; padding: 20px 60px; min-height: 0;
}
.messages-area::-webkit-scrollbar { width: 5px; }
.messages-area::-webkit-scrollbar-thumb { background: #2d3b42; border-radius: 3px; }

.date-separator { text-align: center; margin: 16px 0; }
.date-separator span {
    background: #1f2c33; padding: 5px 14px; border-radius: 8px;
    font-size: 11.5px; color: #8696a0;
}

.message { display: flex; margin-bottom: 4px; }
.message.sent { justify-content: flex-end; }
.message.received { justify-content: flex-start; }
.message .bubble {
    padding: 7px 10px 7px 12px; border-radius: 8px;
    font-size: 14px; line-height: 1.45; word-wrap: break-word;
}
.message.sent .bubble { background: #005c4b; border-bottom-right-radius: 4px; }
.message.received .bubble { background: #1f2c33; border-bottom-left-radius: 4px; }
.message .bubble .msg-time {
    font-size: 10.5px; color: rgba(233,237,239,.45); text-align: right;
    margin-top: 2px; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px;
    float: right; margin-left: 8px;
}
.message.sent .bubble .msg-time { color: rgba(233,237,239,.55); }
.message .bubble .msg-time .check { font-size: 13px; }

.message-input { padding: 8px 16px; background: #1f2c33; flex-shrink: 0; }
.message-input form { display: flex; align-items: center; gap: 8px; }
.message-input input {
    flex: 1; padding: 10px 16px; border: none; border-radius: 8px;
    background: #2a3942; color: #e9edef; font-size: 15px; outline: none; min-width: 0;
}
.message-input input::placeholder { color: #8696a0; }
.message-input button {
    background: none; border: none; color: #8696a0; cursor: pointer;
    padding: 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    min-width: 40px; min-height: 40px;
}
.message-input button:hover { color: #00a884; }
.message-input button:disabled { opacity: .35; cursor: default; }
.message-input button.loading svg { animation: spin 1s linear infinite; transform-origin: center; }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.back-btn {
    display: none; background: none; border: none; color: #e9edef;
    cursor: pointer; padding: 6px; border-radius: 50%; align-items: center; justify-content: center;
    min-width: 36px; min-height: 36px;
}
.back-btn:hover { background: #2d3b42; }
.btn-search-toggle {
    display: none; background: none; border: none; color: #8696a0; cursor: pointer;
    padding: 8px; border-radius: 50%; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.btn-search-toggle:hover { color: #e9edef; background: #2d3b42; }

.search-messages {
    display: none; align-items: center; gap: 6px; flex: 1; max-width: 280px;
}
.search-messages input {
    flex: 1; padding: 6px 10px; border: none; border-radius: 8px;
    background: #2a3942; color: #e9edef; font-size: 13px; outline: none; min-width: 0;
}
.search-messages input::placeholder { color: #8696a0; }
.search-messages button {
    background: none; border: none; color: #8696a0; cursor: pointer;
    padding: 4px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.search-messages button:hover { color: #e9edef; }

.chat-partner-info small.typing { color: #00a884; font-style: italic; }

.btn-attach {
    display: flex; align-items: center; justify-content: center;
    color: #8696a0; cursor: pointer; padding: 8px; border-radius: 50%;
    min-width: 40px; min-height: 40px; flex-shrink: 0;
}
.btn-attach:hover { color: #00a884; }
.btn-attach input { display: none; }

.btn-delete {
    display: none; position: absolute; top: -8px; right: -8px;
    background: #3c1f1f; border: 1px solid #5c2a2a; border-radius: 50%;
    color: #ef9a9a; cursor: pointer; padding: 3px; line-height: 0;
    z-index: 2;
}
.message.sent:hover .btn-delete { display: flex; }

.bubble-wrap { position: relative; display: inline-flex; max-width: 65%; }
.message.sent .bubble-wrap { justify-content: flex-end; }
.message.received .bubble-wrap { justify-content: flex-start; }
.message .bubble { max-width: 100%; }

.btn-delete {
    display: none; position: absolute; top: -8px; right: -8px;
    background: #3c1f1f; border: 1px solid #5c2a2a; border-radius: 50%;
    color: #ef9a9a; cursor: pointer; padding: 3px; line-height: 0;
    z-index: 2;
}

.msg-img {
    max-width: 280px; max-height: 280px; border-radius: 6px;
    display: block; margin-bottom: 4px; cursor: pointer;
}
.message.received .msg-img { border-radius: 6px 6px 6px 2px; }
.message.sent .msg-img { border-radius: 6px 6px 2px 6px; }

.message.highlight .bubble {
    box-shadow: 0 0 0 2px #00a884;
}

/* === Error Toast === */
.error-toast {
    position: fixed; top: 12px; left: 50%; transform: translateX(-50%) translateY(-20px);
    background: #3c1f1f; color: #ef9a9a; padding: 10px 20px; border-radius: 8px;
    font-size: 13px; z-index: 999; opacity: 0; transition: opacity .3s, transform .3s;
    pointer-events: none; border: 1px solid #5c2a2a;
}
.error-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

@keyframes msgIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.message { animation: msgIn .15s ease-out; }

/* === Responsivo === */
@media (max-width: 900px) {
    .messages-area { padding: 16px 24px; }
}

@media (max-width: 768px) {
    .sidebar {
        width: 100%; min-width: 100%; position: fixed; top: 0; left: 0;
        height: 100dvh; z-index: 20;
    }
    .sidebar.hidden { display: none; }
    .chat-app { max-width: none; }
    .main-chat { width: 100%; }
    .messages-area { padding: 12px 16px; }
    .bubble-wrap { max-width: 85%; }
    .back-btn { display: flex !important; }
    .chat-placeholder { display: none; }
    .chat-header { min-height: 56px; padding: 8px 12px; }
    .message-input { padding: 6px 12px; }
    .search-messages { max-width: 100%; }
    .msg-img { max-width: 200px; max-height: 200px; }
}

@media (max-width: 480px) {
    .messages-area { padding: 10px 10px; }
    .bubble-wrap { max-width: 90%; }
    .message .bubble { font-size: 13.5px; }
    .message-input { padding: 6px 10px; }
    .sidebar-header { padding: 10px 12px; }
    .user-item { padding: 10px 12px; }
    .msg-img { max-width: 160px; max-height: 160px; }
    .btn-attach { min-width: 36px; min-height: 36px; padding: 6px; }
    .search-messages { max-width: 100%; }
}