/* css/friends.css
   « Amis » — onglet de la barre du bas, bouton et panneau « Inviter » de la table, toast d'invitation.
   Porté tel quel de la maquette APPROUVÉE (docs/maquettes/amis/amis-maquette.css, mêmes classes), moins les
   conteneurs des options A / B / C écartées par l'utilisateur. Chargée APRÈS les autres feuilles : elle n'en
   redéfinit aucune règle, toutes les classes ci-dessous sont nouvelles (.friends-*, .invite-*, .toast--invite,
   .table-friends-btn…). Couleurs, rayons, espacements et tailles de texte : variables et composants existants
   (--bg2, --border, --radius, --accent, --gold, --danger, .lobby-code-input, .btn, .toast…). */

/* ── Pastille avatar ─────────────────────────────────────────────────────────────────────────────────
   Même rendu que js/ui/look.js::paintAvatar (emoji + fond du catalogue) ; le cadre équipé est l'anneau
   décoratif .avatar-frame (pages.css) posé AUTOUR, sans changer la taille : la marge de 3 px lui laisse la place. */
.friends-av {
  position: relative;
  flex: none;
  width: 44px; height: 44px;
  margin: 3px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.friends-av--sm { width: 36px; height: 36px; font-size: 20px; }

/* ── Contenu de l'onglet ──────────────────────────────────────────────────────────────────────────── */
.friends-body { display: flex; flex-direction: column; min-width: 0; }
.view--friends .friends-body { padding: 4px 16px 20px; }

.friends-title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin: 22px 0 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text2);
}
.friends-body > .friends-title:first-child { margin-top: 0; }
.friends-title__aside { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--accent); }

/* Ton code */
.friends-code {
  display: flex; align-items: center; gap: 12px;
  margin-top: 22px;
  padding: 12px 12px 12px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.friends-body > .friends-code:first-child { margin-top: 0; }
.friends-code__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.friends-code__label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text2); }
/* Les codes sont dorés dans l'appli (toast « Code à partager », .table-code-badge) : même couleur ici. */
.friends-code__value { font-size: 26px; font-weight: 800; letter-spacing: .2em; line-height: 1.15; color: var(--gold); user-select: all; }
.friends-code__copy { flex: none; min-height: 44px; min-width: 96px; }
.friends-hint { margin: 8px 2px 0; font-size: 12px; line-height: 1.5; color: var(--text2); }

/* Ajouter un ami : réutilise tel quel .lobby-join-row / .lobby-code-input / .btn (lobby, table privée). */
.friends-add { margin-top: 0; }
.friends-status { min-height: 1.5em; margin: 8px 2px 0; font-size: 13px; line-height: 1.5; color: var(--text2); }
.friends-status:empty  { min-height: 0; margin: 0; }
.friends-status--ok    { color: var(--accent); }
.friends-status--error { color: var(--danger); }

/* Listes (amis, demandes) : même carte que .lobby-row (fond --bg2, bordure, rayon, 8 px d'écart). */
.friends-items { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.friends-row {
  display: flex; align-items: center; gap: 10px;
  min-height: 68px;
  padding: 8px 6px 8px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.friends-row__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.friends-row__name { display: flex; align-items: center; min-width: 0; font-size: 14px; font-weight: 700; color: var(--text); }
.friends-row__pseudo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Badge boutique équipé, à côté du pseudo (même gabarit que .stats-pseudo-badge du profil). */
.friends-badge { flex: none; margin-left: 6px; font-size: 14px; line-height: 1; }
.friends-sub { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--text2); }
.friends-sub__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Statut : une pastille ET un texte (jamais la couleur seule). */
.friends-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.friends-dot--online { background: var(--accent); box-shadow: 0 0 6px rgba(55,230,182,.6); }
.friends-dot--table  { background: var(--gold); }
.friends-dot--off    { box-sizing: border-box; border: 1.5px solid var(--text2); }
.friends-st--online { color: var(--accent); font-weight: 600; }
.friends-st--table  { color: var(--gold);   font-weight: 600; }

/* Actions : toutes ≥ 44 px de haut (cible tactile). */
.friends-act { flex: none; min-height: 44px; }
.friends-iconbtn {
  flex: none; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: transparent; color: var(--text2);
  -webkit-tap-highlight-color: transparent;
}
.friends-iconbtn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.friends-iconbtn:active { color: var(--danger); }
.friends-act--done { color: var(--accent); border-color: var(--accent); }   /* « Invité ✓ » : même code que .shop-item__btn--on */

/* Demande reçue : deux boutons pleine largeur sous l'identité (robuste à 360 px). */
.friends-row--request { flex-wrap: wrap; row-gap: 8px; padding: 10px 12px 12px; }
.friends-row__actions { display: flex; gap: 8px; width: 100%; }
.friends-row__actions .btn { flex: 1; min-height: 44px; }

/* Liste vide : le composant .empty-state existant (centré, --text2). */
.friends-empty.empty-state { padding: 28px 12px 12px; }
.friends-note.empty-state { padding: 40px 20px; }
.friends-note .btn { margin-top: 14px; }

/* Pastille de notification sur l'icône « Amis » de la barre du bas (une demande reçue en attente). */
.nav-btn--dot { position: relative; }
.nav-btn--dot::after {
  content: ''; position: absolute; top: 3px; left: calc(50% + 4px);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--bg2);
}

/* ── Invitation reçue : variante du .toast existant (même fond, bordure, ombre, entrée) avec deux boutons ─ */
.toast--invite { flex-wrap: wrap; row-gap: 10px; cursor: default; }
.toast--invite .toast-body { flex: 1; min-width: 0; }
.toast-actions { display: flex; gap: 8px; width: 100%; }
.toast-actions .btn { flex: 1; min-height: 44px; font-size: 12px; }

/* ── En table : bouton rond « amis » dans l'en-tête + panneau « Inviter un ami » (famille .strategy-panel) ── */
/* Le conteneur colle le code de la table au bord droit, où il est aujourd'hui : rien ne bouge. */
.table-header-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.table-friends-btn {
  position: relative; flex: none;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}
.table-friends-btn[hidden] { display: none; }
.table-friends-btn::before { content: ''; position: absolute; inset: -4px; }        /* zone tactile 44 px, sans dépasser l'en-tête */
.table-friends-btn__ico {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text);
}
.table-friends-btn__ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.friends-btn__dot { position: absolute; top: 3px; right: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--bg); }
.friends-btn__dot[hidden] { display: none; }
.table-friends-btn .friends-btn__dot { top: 0; right: 0; }

.invite-panel {
  position: absolute;
  top: calc(var(--safe-top) + 54px);   /* juste sous l'en-tête de table (~52 px) */
  right: 10px;
  width: min(312px, calc(100% - 20px));
  max-height: 72vh; overflow-y: auto;
  background: rgba(8,8,14,.97);          /* = .strategy-panel */
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(0,0,0,.7);
  z-index: 300;
  padding: 4px 10px 12px;
  transform-origin: top right;
  transform: scale(0.88) translateY(-8px);
  opacity: 0;
  transition: transform .16s ease, opacity .16s ease;
  pointer-events: none;
}
.invite-panel.is-open { transform: scale(1) translateY(0); opacity: 1; pointer-events: auto; }
.invite-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.invite-panel__close { flex: none; width: 44px; height: 44px; padding: 0; font-size: 16px; color: var(--text2); }
.invite-panel__title { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text2); }
.invite-panel .friends-items { gap: 6px; }
.invite-panel .friends-row { min-height: 56px; padding: 6px 6px 6px 10px; background: rgba(255,255,255,.03); }
.invite-panel .friends-row__name { font-size: 13px; }
.invite-panel .friends-hint { margin-top: 10px; }