/* ==========================================================================
   QueTogether — Messages (chattgränssnitt)
   ========================================================================== */
.chat { display: grid; grid-template-columns: 300px 1fr; height: calc(100vh - var(--topbar-h)); }
.chat-list { border-right: 1px solid var(--border); overflow-y: auto; display: flex; flex-direction: column; }
.chat-list .cl-head { padding: var(--sp-5) var(--sp-5) var(--sp-3); }
.chat-list .cl-head h2 { font-size: 1.4rem; }
.chat-search { padding: 0 var(--sp-4) var(--sp-3); }
.conv {
  display: flex; align-items: center; gap: 12px;
  padding: 12px var(--sp-4); cursor: pointer;
  border-left: 3px solid transparent;
}
.conv:hover { background: var(--surface); }
.conv.is-active { background: var(--surface-2); border-left-color: var(--primary); }
.conv .cv-meta { flex: 1; min-width: 0; }
.conv .cv-meta .cv-top { display: flex; justify-content: space-between; }
.conv .cv-meta strong { font-size: .92rem; }
.conv .cv-meta .cv-time { font-size: .72rem; color: var(--text-dim); }
.conv .cv-meta .cv-last { font-size: .82rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv .cv-badge { background: var(--primary); color: #fff; font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: var(--r-full); }

.chat-main { display: flex; flex-direction: column; min-width: 0; }
.chat-topbar { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
.chat-topbar .ct-meta strong { display: block; }
.chat-topbar .ct-meta span { font-size: .8rem; color: var(--online); }
.chat-topbar .ct-actions { margin-left: auto; display: flex; gap: 8px; }
.chat-body { flex: 1; overflow-y: auto; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.msg { max-width: 62%; padding: 10px 15px; border-radius: 16px; font-size: .92rem; line-height: 1.45; }
.msg.in { background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; align-self: flex-start; }
.msg.out { background: var(--gradient); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.msg-time { font-size: .68rem; color: var(--text-dim); margin: 0 6px; }
.msg-day { text-align: center; font-size: .74rem; color: var(--text-dim); margin: var(--sp-2) 0; }
.chat-input { padding: var(--sp-4); border-top: 1px solid var(--border); display: flex; gap: 10px; align-items: center; }
.chat-clip-share {
  align-self: flex-end; max-width: 62%;
  border-radius: 16px; overflow: hidden; border: 1px solid var(--border-strong);
  background: linear-gradient(160deg,#3b1d6e,#12121a); position: relative; aspect-ratio: 16/10; width: 240px;
}
.chat-clip-share .ccs-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.chat-clip-share .ccs-cap { position: absolute; left: 10px; bottom: 8px; font-size: .78rem; font-weight: 600; }

@media (max-width: 820px) {
  .chat { grid-template-columns: 1fr; }
  .chat-list { display: none; }
}