/* MESSAGES */
.messages-page { padding:24px 0 40px; }
.messages-layout { display:grid; grid-template-columns:320px 1fr; gap:0; border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; background:var(--white); height:calc(100vh - var(--header-h) - 80px); min-height:500px; }

.conv-list { border-right:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden; }
.conv-list__header { padding:16px 20px; border-bottom:1px solid var(--border); }
.conv-list__title { font-family:var(--font-display); font-size:16px; font-weight:700; }
.conv-list__search { padding:12px 16px; border-bottom:1px solid var(--border); }
.conv-list__search input { width:100%; padding:8px 12px 8px 34px; border:1.5px solid var(--gray-200); border-radius:var(--r-md); font-size:13px; outline:none; background:var(--surface); }
.conv-list__body { flex:1; overflow-y:auto; }

.conv-item { display:flex; align-items:center; gap:12px; padding:14px 16px; cursor:pointer; transition:background var(--t-fast); border-bottom:1px solid var(--border); position:relative; }
.conv-item:hover { background:var(--gray-50); }
.conv-item.active { background:var(--primary-50); }
.conv-item.active::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--primary); }
.conv-item__info { flex:1; min-width:0; }
.conv-item__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:3px; }
.conv-item__name { font-size:14px; font-weight:600; color:var(--dark-2); }
.conv-item__time { font-size:11px; color:var(--gray-400); flex-shrink:0; }
.conv-item__listing { font-size:12px; color:var(--primary); font-weight:500; margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conv-item__preview { font-size:13px; color:var(--gray-400); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conv-item__unread { width:20px; height:20px; border-radius:50%; background:var(--primary); color:white; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

.chat-area { display:flex; flex-direction:column; overflow:hidden; }
.chat-header { padding:14px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; }
.chat-header__info { flex:1; }
.chat-header__name { font-family:var(--font-display); font-size:15px; font-weight:700; line-height:1.2; }
.chat-header__listing { font-size:12px; color:var(--primary); font-weight:500; }
.chat-header__status { font-size:12px; color:var(--success); display:flex; align-items:center; gap:4px; }
.chat-header__status::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--success); }

.chat-body { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:16px; }
.chat-date-sep { text-align:center; font-size:11px; font-weight:600; color:var(--gray-400); margin:8px 0; }

.msg { display:flex; gap:8px; max-width:75%; }
.msg--mine { margin-left:auto; flex-direction:row-reverse; }
.msg--other { margin-right:auto; }
.msg__bubble { padding:11px 15px; border-radius:18px; font-size:14px; line-height:1.55; }
.msg--other .msg__bubble { background:var(--gray-100); color:var(--dark-2); border-radius:4px 18px 18px 18px; }
.msg--mine .msg__bubble { background:var(--primary); color:var(--white); border-radius:18px 4px 18px 18px; }
.msg__meta { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--gray-400); margin-top:4px; justify-content:flex-end; }
.msg--mine .msg__meta { justify-content:flex-end; }
.ticks { display:flex; gap:1px; }
.tick { width:12px; height:12px; color:var(--gray-300); }
.tick.read { color:var(--info); }

.chat-footer { padding:14px 16px; border-top:1px solid var(--border); display:flex; gap:10px; align-items:flex-end; }
.chat-input-wrap { flex:1; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-xl); padding:10px 16px; display:flex; gap:10px; align-items:flex-end; transition:all var(--t-fast); }
.chat-input-wrap:focus-within { border-color:var(--primary); background:var(--white); }
.chat-input { flex:1; border:none; outline:none; background:transparent; font-size:14px; resize:none; max-height:120px; line-height:1.5; }
.chat-input::placeholder { color:var(--gray-400); }
.chat-send { width:40px; height:40px; border-radius:50%; background:var(--primary); color:white; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all var(--t-fast); flex-shrink:0; border:none; }
.chat-send:hover { background:var(--primary-dark); transform:scale(1.05); }

.chat-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:var(--gray-400); gap:16px; }
.chat-empty svg { width:64px; height:64px; opacity:0.3; }
.chat-empty p { font-size:15px; }

@media(max-width:768px){
  .messages-layout { grid-template-columns:1fr; height:auto; }
  .conv-list { height:300px; border-right:none; border-bottom:1px solid var(--border); }
  .chat-area { height:calc(100vh - var(--header-h) - 380px); min-height:400px; }
}
@media(max-width:480px){
  .messages-page { padding: 16px 0 72px; }
  .conv-list { height: 250px; }
  .conv-list__header { padding: 14px 16px; }
  .conv-list__title { font-size: 15px; }
  .conv-item { padding: 12px 14px; gap: 10px; }
  .chat-body { padding: 14px; gap: 12px; }
  .chat-footer { padding: 10px 12px; }
  .chat-header { padding: 12px 14px; gap: 10px; }
  .msg { max-width: 85%; }
  .msg__bubble { padding: 9px 13px; font-size: 13px; }
  .chat-send { width: 36px; height: 36px; }
  .chat-empty svg { width: 48px; height: 48px; }
  .chat-empty p { font-size: 14px; }
}
@media(max-width:360px){
  .conv-list { height: 220px; }
  .conv-item { padding: 10px 12px; }
  .conv-item__name { font-size: 13px; }
  .conv-item__preview { font-size: 12px; }
  .chat-body { padding: 10px; }
  .msg__bubble { padding: 8px 11px; font-size: 13px; }
}