/* friends-enhance.css — additive styles for the friend-request UX upgrade
 * (2026-05-03). All selectors are extensions of existing widget/bell/social
 * markup. Never overrides anything in css/theme.css, layout.css, matrix.css.
 *
 * Three concerns:
 *  1. .sx-state pills + .sx-time + mobile-scroll tabs in #view-social.
 *  2. .notif-bell-row-fr — friend-request preview row (rich avatar + meta).
 *  3. .friends-widget-panel-large — bigger panel, tab strip, request rows.
 */

/* ── 1) #view-social tweaks ─────────────────────────────────────────────── */

#view-social .sx-state {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(245, 239, 227, 0.06);
  color: var(--sx-text-2, #B8AECA);
  margin-right: 6px;
}
#view-social .sx-state-ok   { background: rgba(72, 224, 164, 0.12); color: var(--sx-mint, #48E0A4); }
#view-social .sx-state-warn { background: rgba(255, 68, 119, 0.12); color: var(--sx-crimson, #FF4477); }

#view-social .sx-time {
  color: var(--sx-text-3, #857698);
  font-size: 12px;
  margin-left: 4px;
  white-space: nowrap;
}

#view-social .sx-empty-cta {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* Mobile-scrollable tab strip — keep panel content readable on phones */
@media (max-width: 600px) {
  #view-social .sx-tabs {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  #view-social .sx-tab { flex-shrink: 0; scroll-snap-align: start; }
}

/* ── 2) Notification-bell friend-request preview row ───────────────────── */

.notif-bell-row.notif-bell-row-fr {
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
}
.notif-bell-row.notif-bell-row-fr .notif-bell-row-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #F0B65C 0%, #c98c3a 100%);
  color: #1a1a1a;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.notif-bell-row.notif-bell-row-fr .notif-bell-row-body { flex: 1; min-width: 0; }
.notif-bell-row.notif-bell-row-fr .notif-bell-row-text strong { color: var(--color-accent, #F0B65C); font-weight: 600; }
.notif-bell-row.notif-bell-row-fr .notif-bell-row-sub {
  color: rgba(255,255,255,0.55);
  font-size: 11.5px;
  margin-top: 2px;
}

.notif-bell-row-actions-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  align-items: stretch;
}
.notif-bell-row-actions-stack .notif-bell-row-btn {
  width: 100%;
  text-align: center;
  white-space: nowrap;
}
.notif-bell-row-btn-danger {
  background: rgba(255, 68, 119, 0.10) !important;
  color: #ffb0c0 !important;
}
.notif-bell-row-btn-danger:hover {
  background: rgba(255, 68, 119, 0.20) !important;
  color: #fff !important;
}

/* ── 3) Friends widget — bigger panel + tabs ───────────────────────────── */

.friends-widget-panel.friends-widget-panel-large {
  width: 380px;
  max-height: 580px;
  display: flex;
  flex-direction: column;
}
@media (max-width: 480px) {
  .friends-widget-panel.friends-widget-panel-large {
    width: calc(100vw - 24px);
    right: 12px;
  }
}

.friends-widget-tabs {
  display: flex;
  gap: 2px;
  padding: 4px 8px 0 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.friends-widget-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  font-weight: 600;
  padding: 9px 6px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: color .12s, border-color .12s;
  font-family: inherit;
}
.friends-widget-tab:hover { color: #fff; }
.friends-widget-tab.is-active {
  color: var(--color-accent, #F0B65C);
  border-bottom-color: var(--color-accent, #F0B65C);
}
.friends-widget-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(240, 182, 92, 0.18);
  color: var(--color-accent, #F0B65C);
  font-size: 10px;
  font-weight: 700;
}
.friends-widget-tab-badge-alert {
  background: rgba(255, 68, 119, 0.20);
  color: #ff8eaa;
}

.friends-widget-panel-large .friends-widget-body {
  flex: 1;
  overflow-y: auto;
  min-height: 200px;
}
.friends-widget-panel-large .friends-widget-body[hidden] { display: none; }

.friends-widget-row.friends-widget-row-req {
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
}
.friends-widget-row-pillbtn {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: #d4d4d6;
  padding: 5px 10px;
  font-size: 11px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all .12s;
}
.friends-widget-row-pillbtn:hover {
  background: rgba(255,255,255,0.10);
  color: #fff;
}
.friends-widget-row-pillbtn.is-primary {
  background: rgba(240, 182, 92, 0.15);
  color: var(--color-accent, #F0B65C);
  border-color: rgba(240, 182, 92, 0.30);
}
.friends-widget-row-pillbtn.is-primary:hover {
  background: rgba(240, 182, 92, 0.25);
}
.friends-widget-row-pillbtn.is-danger {
  background: rgba(255, 68, 119, 0.10);
  color: #ffb0c0;
  border-color: rgba(255, 68, 119, 0.20);
}
.friends-widget-row-pillbtn.is-danger:hover {
  background: rgba(255, 68, 119, 0.20);
  color: #fff;
}
.friends-widget-row-pillbtn:disabled { opacity: 0.5; cursor: not-allowed; }

.friends-widget-row-actions-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
  flex-shrink: 0;
  min-width: 130px;
}
.friends-widget-row-state {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: rgba(255,255,255,0.45);
  margin-right: 6px;
}
.friends-widget-foot-link {
  background: transparent;
  border: none;
  color: var(--color-accent, #F0B65C);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 8px 4px;
  width: 100%;
  text-align: center;
}
.friends-widget-foot-link:hover { text-decoration: underline; }