/* messages.css — page styles for messages.html. */
body { padding-top: 80px; }
.page-wrap { max-width: 1100px; margin: 0 auto; padding: 2rem 1.2rem 4rem; position: relative; z-index: 2; }
.chat-layout { display: grid; grid-template-columns: 320px 1fr; gap: 1rem; }
.conv-list, .chat-panel { min-height: 520px; }
.conv-item { display: flex; gap: 0.7rem; align-items: center; padding: 0.7rem; border-bottom: 1px solid var(--border); cursor: pointer; }
.conv-item:hover, .conv-item.active { background: rgba(108,99,255,0.1); }
.conv-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.conv-name { font-weight: 600; font-size: 0.9rem; }
.conv-last { color: var(--text-2); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-messages { height: 430px; overflow-y: auto; padding: 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; }
.bubble { max-width: 72%; padding: 0.55rem 0.75rem; border-radius: 10px; font-size: 0.9rem; line-height: 1.5; }
.bubble.me { align-self: flex-end; background: rgba(108,99,255,0.22); border: 1px solid rgba(108,99,255,0.35); }
.bubble.peer { align-self: flex-start; background: rgba(255,255,255,0.05); border: 1px solid var(--border); }
.chat-input-row { display: flex; gap: 0.6rem; padding: 0.8rem; border-top: 1px solid var(--border); }
.msg-img { width: 180px; height: 180px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); display: block; margin-top: .4rem; }
.msg-video { width: min(320px, 75vw); max-height: 240px; border-radius: 10px; border: 1px solid var(--border); display: block; margin-top: .4rem; }
.msg-tools { margin-top: .35rem; display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.msg-file-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .55rem; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--border); font-size: .78rem; color: var(--text-2); }
.dm-attach-hint { color: var(--text-3); font-size: .78rem; margin-left: .2rem; }
@media (max-width: 900px) { .chat-layout { grid-template-columns: 1fr; } }

/* Keep the narrow-screen message composer free of floating decorations. */
@media (max-width: 600px) {
  #sprite-container, #sprite-clock { display: none !important; }
}