*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --navy: #0B1D3E; --blue: #1A56DB; --white: #FFFFFF;
  --gray-50: #F8F9FB; --gray-200: #E2E6ED; --gray-400: #9AA3B0;
  --gray-600: #5A6478; --gray-800: #1E2533;
  --font: 'Inter', sans-serif; --font-d: 'Manrope', sans-serif; --t: .2s ease;
}
html, body { height: 100%; font-family: var(--font); color: var(--gray-800); }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
a { text-decoration: none; color: inherit; }

.messages-wrapper { display: flex; height: 100vh; }

.conv-list { width: 320px; flex-shrink: 0; border-right: 1px solid var(--gray-200); display: flex; flex-direction: column; }
.conv-list-header { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--gray-200); }
.conv-list-header h2 { font-family: var(--font-d); font-size: 1.1rem; font-weight: 800; }
.conv-back { color: var(--gray-600); }
.conv-items { flex: 1; overflow-y: auto; }
.conv-empty { padding: 24px 20px; color: var(--gray-400); font-size: .85rem; }

.conv-item { display: flex; align-items: center; gap: 12px; padding: 14px 20px; cursor: pointer; transition: background var(--t); border-bottom: 1px solid var(--gray-50); }
.conv-item:hover, .conv-item.active { background: var(--gray-50); }
.conv-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--blue); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; flex-shrink: 0; }
.conv-item-body { min-width: 0; }
.conv-item-name { font-weight: 700; font-size: .875rem; margin-bottom: 2px; }
.conv-item-room { font-size: .72rem; color: var(--blue); margin-bottom: 3px; }
.conv-item-preview { font-size: .78rem; color: var(--gray-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.thread-panel { flex: 1; display: flex; flex-direction: column; background: var(--gray-50); }
.thread-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--gray-400); font-size: .9rem; }
.thread-active { display: flex; flex-direction: column; height: 100%; }
.thread-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--white); border-bottom: 1px solid var(--gray-200); }
.thread-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--blue); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; }
.thread-name { font-weight: 700; font-size: .9rem; }
.thread-room { font-size: .75rem; color: var(--gray-400); }
.thread-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px; }

.msg { max-width: 65%; }
.msg-bubble { padding: 10px 14px; border-radius: 18px; font-size: .875rem; line-height: 1.5; }
.msg-time { font-size: .65rem; color: var(--gray-400); margin-top: 3px; }
.msg.sent { align-self: flex-end; }
.msg.sent .msg-bubble { background: var(--blue); color: white; border-radius: 18px 18px 4px 18px; }
.msg.sent .msg-time { text-align: right; }
.msg.received { align-self: flex-start; }
.msg.received .msg-bubble { background: var(--white); border: 1px solid var(--gray-200); border-radius: 18px 18px 18px 4px; }

.thread-input-wrap { display: flex; gap: 10px; padding: 14px 20px; background: var(--white); border-top: 1px solid var(--gray-200); }
.thread-input-wrap input { flex: 1; border: 1.5px solid var(--gray-200); border-radius: 24px; padding: 10px 16px; font-family: var(--font); font-size: .875rem; outline: none; }
.thread-input-wrap input:focus { border-color: var(--blue); }
.thread-input-wrap button { width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: white; display: flex; align-items: center; justify-content: center; }

@media (max-width: 768px) {
  .conv-list { width: 100%; }
  .thread-panel { display: none; }
  .messages-wrapper.thread-open .conv-list { display: none; }
  .messages-wrapper.thread-open .thread-panel { display: flex; }
}