/* Rules that only apply on /friends/ — loaded by that page after style.css. */
.messages-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
  height: calc(100vh - 220px);
  min-height: 480px;
  margin-top: 4px;
}

.messages-list-pane { overflow-y: auto; padding-right: 2px; }

.messages-thread-pane {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

@media (max-width: 760px) {
  .messages-layout { grid-template-columns: 1fr; height: auto; }
  .messages-thread-pane { display: none; height: 70vh; }
  .messages-layout.thread-active .messages-list-pane { display: none; }
  .messages-layout.thread-active .messages-thread-pane { display: flex; }
}

.friend-row, .friend-request-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease;
}

.friend-row:hover, .friend-request-row:hover { background: var(--glass-bg); }

.friend-row.active { background: rgb(var(--brass-rgb) / 0.16); }

.friend-row-name { font-weight: 600; font-size: 0.88rem; color: var(--bone); }

.friend-row-preview { font-size: 0.76rem; color: var(--ash); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }

.friend-row-unread {
  margin-left: auto;
  background: var(--blood-dim);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 6px;
  flex-shrink: 0;
}

.thread-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}

.friend-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
}

.friend-search-row:hover { background: var(--glass-bg); }

.chat-row {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.chat-row.mine { flex-direction: row-reverse; }

.chat-row-body { max-width: 75%; }

.chat-row.mine .chat-row-body { display: flex; flex-direction: column; align-items: flex-end; }

.chat-row-meta { margin: 0 0 3px; font-size: 0.78rem; color: var(--ash); }

.chat-row.mine .chat-row-meta { text-align: right; }

.chat-bubble {
  display: inline-block;
  position: relative;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.chat-row.mine .chat-bubble {
  background: linear-gradient(135deg, rgb(var(--brass-rgb) / 0.22), rgb(var(--brass-rgb) / 0.1));
  border-color: rgb(var(--brass-rgb) / 0.35);
}