/* Friends module styles. All colors come from /styles/tokens.css. */

/* --- Side panel body ---------------------------------------------------- */
.friends-panel-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
  padding: var(--space-3, 12px);
  font-family: var(--font-ui);
  color: var(--color-text);
}

.friends-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.875rem;
}
.friends-head-count {
  color: var(--color-accent, #56c2ff);
  font-weight: 600;
}
.friends-head-total {
  color: var(--color-text-muted);
}

.friends-section { margin: 0; }
.friends-section-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2, 8px) 0;
}

/* --- Pending requests --------------------------------------------------- */
.friends-pending {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3, 12px);
}
.friends-pending-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3, 12px);
  align-items: center;
  padding: var(--space-2, 8px) 0;
}
.friends-pending-row + .friends-pending-row {
  border-top: 1px solid var(--color-border);
}
.friends-pending-meta { min-width: 0; }
.friends-pending-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.friends-pending-actions {
  display: flex;
  gap: var(--space-2, 8px);
}

/* --- Add friend --------------------------------------------------------- */
.friends-add-row {
  display: flex;
  gap: var(--space-2, 8px);
  align-items: end;
}
.friends-add-row > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}

/* --- Friend list -------------------------------------------------------- */
.friends-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}
.friends-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3, 12px);
  align-items: center;
  padding: var(--space-2, 8px);
  border-radius: var(--radius-md, 8px);
  transition: background-color var(--duration-fast, 120ms) var(--ease-out, ease-out);
}
.friends-row:hover { background: var(--color-bg-overlay); }

.friends-row-meta { min-width: 0; }
.friends-row-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.friends-row-status {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Status pill */
.friends-status-pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: var(--radius-pill, 999px);
  background: var(--color-bg-overlay);
  color: var(--color-text-muted);
}
.friends-status-pill.is-online { color: #4ade80; }
.friends-status-pill.is-lobby  { color: var(--color-cta, #ff8a3c); }
.friends-status-pill.is-session { color: var(--color-accent, #56c2ff); }
.friends-status-pill.is-offline { color: var(--color-text-subtle); }

.friends-row-action { display: flex; align-items: center; }

/* --- Kebab menu --------------------------------------------------------- */
.friends-kebab-wrap { position: relative; }
.friends-kebab-btn {
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm, 4px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.friends-kebab-btn:hover {
  background: var(--color-bg-overlay);
  color: var(--color-text);
}
.friends-kebab-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  min-width: 180px;
  overflow: hidden;
}
.friends-kebab-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 8px 12px;
  color: var(--color-text);
  font-size: 0.875rem;
  cursor: pointer;
}
.friends-kebab-item:hover { background: var(--color-bg-overlay); }
.friends-kebab-item.is-danger { color: #ef4444; }

/* --- Share-replay modal ------------------------------------------------- */
.share-replay-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  padding: var(--space-2, 8px) 0;
}
.share-replay-list {
  max-height: 50vh;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-2, 8px);
}
.share-replay-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: var(--space-3, 12px);
  align-items: center;
  padding: var(--space-2, 8px);
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
}
.share-replay-row:hover { background: var(--color-bg-overlay); }
.share-replay-row + .share-replay-row { margin-top: 2px; }
.share-replay-row-name { font-weight: 500; }
.share-replay-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2, 8px);
}
.share-replay-note { padding: 0 var(--space-1, 4px); }

/* --- Replay Inbox ------------------------------------------------------- */
.replay-inbox {
  font-family: var(--font-ui);
  color: var(--color-text);
  padding: var(--space-3, 12px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
}
.replay-inbox-head { display: flex; align-items: baseline; justify-content: space-between; }
.replay-inbox-title {
  font-size: 1rem;
  margin: 0;
  font-weight: 600;
}
.replay-inbox-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}
.replay-inbox-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3, 12px);
  align-items: center;
  padding: var(--space-3, 12px);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
}
.replay-inbox-row.is-unopened { border-color: var(--color-accent, #56c2ff); }
.replay-inbox-row-meta { min-width: 0; }
.replay-inbox-row-line1 {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 0.875rem;
}
.replay-inbox-sharer { font-weight: 600; }
.replay-inbox-when, .replay-inbox-sep { color: var(--color-text-muted); font-size: 0.78rem; }
.replay-inbox-row-line2 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.replay-inbox-filename {
  color: var(--color-text);
  font-family: var(--font-mono);
}
.replay-inbox-note {
  margin-top: 6px;
  padding: 6px 8px;
  background: var(--color-bg-overlay);
  border-left: 2px solid var(--color-accent, #56c2ff);
  border-radius: 0 4px 4px 0;
  font-size: 0.85rem;
  color: var(--color-text);
}
.replay-inbox-actions {
  display: flex;
  gap: var(--space-2, 8px);
  align-items: center;
}

/* --- Mobile tweaks ------------------------------------------------------ */
@media (max-width: 767px) {
  .friends-row { grid-template-columns: auto 1fr auto; }
  .friends-pending-row { grid-template-columns: auto 1fr; }
  .friends-pending-actions {
    grid-column: 1 / -1;
    margin-top: var(--space-2, 8px);
  }
  .replay-inbox-row { grid-template-columns: auto 1fr; }
  .replay-inbox-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    margin-top: var(--space-2, 8px);
  }
}