:root { --green: #00a884; --light-bg: #f0f2f5; --border: #e9edef; }
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; }

/* 1. VIEWPORT LOCK */
body { background: #d1d7db; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; }

.app-container { 
    width: 98vw; height: 96vh; 
    display: grid; grid-template-columns: 350px 1fr; 
    background: white; border-radius: 10px; overflow: hidden; 
}

/* 2. SIDEBAR */
.sidebar { border-right: 1px solid var(--border); display: flex; flex-direction: column; background: #fff; }
.sidebar-header { height: 60px; background: var(--light-bg); display: flex; align-items: center; justify-content: space-between; padding: 0 15px; flex-shrink: 0; }
.avatar-circle { width: 42px; height: 42px; border-radius: 50%; color: white; display: grid; place-items: center; font-weight: bold; background-size: cover; background-position: center; flex-shrink: 0; }
.my-bg { background: #516091; }

.search-box { padding: 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
#search-input { width: 100%; padding: 10px; border: none; background: var(--light-bg); border-radius: 8px; outline: none; }
.contact-list { flex: 1; overflow-y: auto; }
.contact-item { padding: 15px; border-bottom: 1px solid #f5f5f5; cursor: pointer; display: flex; align-items: center; }
.contact-item.active { background: #ebebeb; border-left: 5px solid var(--green); }

/* 3. CHAT AREA */
.chat-area { position: relative; background: #efe7de; background-image: url("https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png"); }
.centered-overlay { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #667781; }

.chat-flex-container { display: flex; flex-direction: column; height: 100%; }
.chat-header { height: 60px; background: var(--light-bg); display: flex; align-items: center; padding: 0 15px; border-bottom: 1px solid var(--border); flex-shrink: 0; cursor: pointer; }
.user-meta { flex: 1; margin-left: 12px; }

/* THE FIX: SCROLLABLE MESSAGE DISPLAY */
.message-display { 
    flex: 1; 
    padding: 20px; 
    overflow-y: auto; 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
}

.bubble { padding: 10px 14px; border-radius: 10px; max-width: 65%; font-size: 14.5px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); word-wrap: break-word; }
.sent { align-self: flex-end; background: #dcf8c6; }
.received { align-self: flex-start; background: #fff; }
.bubble img { max-width: 100%; border-radius: 6px; display: block; margin-top: 6px; }

.input-bar { height: 70px; background: var(--light-bg); display: flex; align-items: center; padding: 0 15px; gap: 12px; flex-shrink: 0; }
#msg-input { flex: 1; padding: 12px 16px; border: none; border-radius: 24px; outline: none; }

/* 4. MODALS & UTILS */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 2000; }
.modal-card { background: white; padding: 30px; border-radius: 15px; width: 340px; text-align: center; position: relative; }
.avatar-large { width: 100px; height: 100px; border-radius: 50%; margin: 0 auto 15px; display: grid; place-items: center; font-size: 45px; color: white; background-size: cover; background-position: center; background-color: #516091; }

.hidden { display: none !important; }
.icon-btn { background: none; border: none; cursor: pointer; font-size: 20px; color: #54656f; }
.send-btn { background: var(--green); color: white; border: none; padding: 10px 22px; border-radius: 24px; cursor: pointer; font-weight: bold; }
.text-link { color: var(--green); background: none; border: none; cursor: pointer; font-weight: bold; margin-right: 15px; }
.danger-btn { color: #dc3545; border: 1px solid #dc3545; padding: 6px 12px; border-radius: 6px; background: none; cursor: pointer; }
.close-modal { position: absolute; top: 12px; right: 12px; background: none; border: none; font-size: 22px; cursor: pointer; }
.blocked-banner { padding: 15px; background: #f8d7da; color: #721c24; text-align: center; flex-shrink: 0; }
.emoji-menu { position: absolute; bottom: 85px; left: 60px; background: white; border: 1px solid #ddd; padding: 12px; display: flex; gap: 12px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.styled-input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; margin-top: 10px; }