/* The Buddies tab (v16 layout): requests, the buddies list that is also the weekly board, adding a buddy, notices. */

/* Buddies on the left, classes on the right on a desktop; one column on a phone. */
.buddies-layout { display: flex; flex-direction: column; gap: 18px; }
.buddies-side, .buddies-main { min-width: 0; }

/* The buddies card: one row per person, the learner tinted. */
.buddy-row { margin: 0 6px; padding: 6px 4px 6px 8px; border-radius: 14px; }
.buddy-row.me { background: var(--primary-tint); padding-right: 8px; }
/* In the app: green; in another room: orange. */
.buddy-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--success);
}
.buddy-dot.away { background: #C2410C; }
/* Challenge as crossed swords, where the word doesn't fit. */
.buddy-swords { width: 38px; height: 38px; border-radius: 50%; background: var(--primary); box-shadow: 0 3px 8px rgba(109, 74, 255, 0.4); }
/* New class's PRO mark, on the button's top-right corner. */
.buddies-pro-badge {
  position: absolute;
  top: -10px;
  right: -4px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(217, 161, 26, 0.35);
  pointer-events: none;
}

/* Both columns' titles line up, whether or not they hold a button. */
.buddies-label { min-height: 40px; }

@media (min-width: 900px) {
  /* A big window: the tab spreads wider than the usual page, so more class cards sit in a row. */
  .buddies-tab > .page { max-width: 1520px; }
  .buddies-layout { display: grid; grid-template-columns: minmax(360px, 460px) minmax(0, 1fr); gap: 32px; align-items: start; }
  .buddies-main .buddies-actions { grid-template-columns: repeat(2, minmax(0, 300px)); }
  .buddies-main .buddies-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

/* The invite sheet (InviteSheet.kt): fields and banners take the sheet's width; on a desktop the
   sheet is a centred dialog no wider than a phone. */
.invite-sheet .invite-wide { width: 100%; }
.invite-sheet .invite-wide:empty { display: none; }
@media (min-width: 900px) { .invite-sheet { max-width: 420px; margin: 0 auto; } }