/* ─────────────────────────────────────────────
   share-panel.css — panneau SHARE BEAT + galerie COMMUNITY BEATS
   (src/ui/share-panel.js, 2026-10-01). Caché tant que html.sd-sp-open
   n'est pas posé. html.sd-sp-dock : collé à droite de la machine (qui ne
   bouge pas) ; sinon tiroir par-dessus son bord droit.
   ───────────────────────────────────────────── */
:root { --sp-w: 340px; }

.sp-panel {
  /* Carcasse de la machine (2026-10-01, demande user « cadre arrondi comme le
     shuffle ») : même dégradé, liseré et rayon que .machine (skin sombre +
     clair via les variables). Les sections sont des panneaux encastrés. */
  position: fixed; top: 10px; right: 12px; bottom: 10px;
  width: var(--sp-w); max-width: calc(100vw - 24px);
  z-index: 9999;   /* > bulles d onboarding + bandeau CTA (9998), < modale de compte (10000) */
  display: flex; flex-direction: column; gap: 8px;
  padding: 7px 10px 10px;
  /* Même dégradé que .machine : clair par défaut (machine.css, stop #bfbbb3),
     sombre sous html.sd-skin-dark (skin-dark.css, stop #393a40). */
  background: linear-gradient(180deg, var(--surface-light, #cac6be) 0%, #bfbbb3 8%, var(--surface-light2, #b4b0a8) 100%);
  border: 1px solid var(--border-color, #52545c);
  border-radius: var(--border-radius-machine, 16px);
  box-shadow: 0 26px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  color: #d8d4cc;
  font-family: 'Share Tech Mono', 'OCR B', 'Courier New', monospace;
  font-size: 12px; letter-spacing: .04em;
  transform: translateX(calc(100% + 24px));
  transition: transform .22s ease;
  visibility: hidden;
}
html.sd-sp-open .sp-panel { transform: none; visibility: visible; }
/* Collé à la machine (html.sd-sp-dock, position posée par applyDock) : la
   machine ne bouge pas ; le cadre apparaît en fondu à côté d'elle. */
html.sd-sp-dock .sp-panel { transform: none; opacity: 0; transition: opacity .18s ease; }
html.sd-sp-dock.sd-sp-open .sp-panel { opacity: 1; }

.sp-panel button { font-family: inherit; cursor: pointer; }
html.sd-skin-dark .sp-panel {
  background: linear-gradient(180deg, var(--surface-light, #3e3f45) 0%, #393a40 8%, var(--surface-light2, #34353b) 100%);
}
/* Thème CLAIR : en-tête et onglets comme les touches grises de la machine ;
   les sections restent des panneaux sombres encastrés (comme le SAMPLER). */
html:not(.sd-skin-dark) .sp-panel { box-shadow: 0 26px 70px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.3); }
html:not(.sd-skin-dark) .sp-x { background: #dcd8d0; border-color: #a8a49e; color: #3a342a; }
html:not(.sd-skin-dark) .sp-tabs button:not(.on) {
  background: linear-gradient(180deg, #e2ded6, #c9c5bd); border-color: #a8a49e; color: #3a342a;
  box-shadow: 0 2px 0 #969290;
}
html:not(.sd-skin-dark) .sp-tabs button:not(.on):hover { border-color: #ff7a1a; color: #000; }
.sp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 4px 2px;
}
/* Titre façon logo « SHUFFLE DRUMMER » du bandeau de la machine. */
.sp-title { font-size: 17px; letter-spacing: .26em; color: var(--accent, #ff7a1a); }
.sp-title b { color: var(--text-primary, #eeede8); font-weight: 700; }
.sp-x {
  width: 26px; height: 26px; border-radius: 50%;
  background: #2a2c31; border: 1px solid #3a3d43; color: #ccc; font-size: 12px;
}
.sp-x:hover { color: #fff; border-color: #ff7a1a; }

/* ── YOUR SHARE ── */
/* Panneaux encastrés (comme le compartiment SAMPLER de la machine). */
.sp-mine, .sp-comm {
  background: #0f1012; border: 1px solid var(--border-color, #52545c);
  border-radius: var(--border-radius-panel, 10px);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.5);
}
.sp-mine { flex: 1; min-height: 0; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }

/* ── Onglets YOUR CARD / TOP BEATS (touches façon machine) ── */
.sp-tabs { display: flex; gap: 6px; }
.sp-tabs button {
  flex: 1; height: 30px; border-radius: 4px;
  background: #26282c; border: 1px solid #3a3d43; color: #cfcac0;
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
}
.sp-tabs button:hover { border-color: #ff7a1a; color: #fff; }
.sp-tabs button.on { background: #ff7a1a; border-color: #ff7a1a; color: #1b1c1f; }
.sp-panel[data-tab="top"] .sp-mine,
.sp-panel[data-tab="card"] .sp-comm { display: none; }
.sp-panel[data-mode="error"] .sp-tabs button[data-t="card"] { display: none; }

/* Rendu en cours : la carte s'efface derrière le message. */
.sp-rendering {
  display: none; position: absolute; inset: 0; z-index: 2;
  align-items: center; justify-content: center; text-align: center; padding: 16px;
  background: rgba(8,7,16,.86); color: #ffaa44; font-size: 11px; letter-spacing: .14em; line-height: 1.6;
}
.sp-panel.rendering .sp-rendering { display: flex; }

/* Badge SONG dans TOP BEATS. */
.sp-song-badge {
  display: inline-block; margin-right: 6px; padding: 0 4px; border-radius: 3px;
  background: #2e1260; border: 1px solid #6a40c8; color: #d8b8ff;
  font-size: 9px; letter-spacing: .1em; vertical-align: 1px;
}

/* ── YOUR CARD : la vraie beat card, mise à l'échelle (fitCard) ── */
.sp-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  color: #8a857c; font-size: 10px; letter-spacing: .16em; }
.sp-cardwrap {
  position: relative; flex: 1; min-height: 120px; overflow: hidden;
  border-radius: 14px; background: #080710;
  box-shadow: 0 0 0 1px #2c2845;
}
.sp-cardframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; display: block; }
.sp-link { display: flex; gap: 6px; }
.sp-url {
  flex: 1; min-width: 0; height: 28px; padding: 0 8px;
  background: #121315; border: 1px solid #34363b; border-radius: 4px;
  color: #ffaa44; font-family: inherit; font-size: 11px;
}
.sp-copy, .sp-sort button {
  height: 28px; padding: 0 10px; border-radius: 4px;
  background: #26282c; border: 1px solid #3a3d43; color: #cfcac0;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
}
.sp-copy:hover, .sp-sort button:hover { border-color: #ff7a1a; color: #fff; }
.sp-private-hint { color: #8a857c; font-size: 11px; }
/* Publier = action EN PLUS du lien privé (même violet que SHARE BEAT). */
.sp-pub-open {
  height: 32px; border-radius: 4px;
  background: #2e1260; border: 1px solid #6a40c8; color: #ffaa44;
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
}
.sp-pub-open:hover { border-color: #ff7a1a; color: #fff; }
/* Vue « lien reçu » : la carte seule. */
.sp-panel[data-view="received"] .sp-link,
.sp-panel[data-view="received"] .sp-private-hint,
.sp-panel[data-view="received"] .sp-pub-open,
.sp-panel[data-view="received"] .sp-pub,
.sp-panel[data-view="received"] .sp-published { display: none !important; }
.sp-as { color: #8a857c; font-size: 11px; line-height: 1.5; }
.sp-as b { color: #ffaa44; }
.sp-as-hint { font-size: 10px; }
/* Champ ARTIST : admin seulement (nom imposé dans TOP BEATS) */
.sp-pub .sp-artist-row { display: none; }
.sp-admin-pub .sp-pub .sp-artist-row { display: flex; }
.sp-admin-pub .sp-as { display: none; }
.sp-pub-cancel {
  align-self: center; padding: 0; background: none; border: none;
  color: #8a857c; font-size: 11px; text-decoration: underline;
}
.sp-pub-cancel:hover { color: #cfcac0; }
.sp-pub { display: none; flex-direction: column; gap: 7px; }
.sp-pub label { display: flex; flex-direction: column; gap: 3px; color: #8a857c; font-size: 10px; letter-spacing: .14em; }
.sp-pub input {
  height: 28px; padding: 0 8px; background: #121315; border: 1px solid #34363b; border-radius: 4px;
  color: #eee; font-family: inherit; font-size: 12px;
}
.sp-pub input:focus { outline: none; border-color: #ff7a1a; }
.sp-pub-btn {
  height: 34px; border-radius: 4px; border: none;
  background: #ff7a1a; color: #1b1c1f; font-size: 12px; font-weight: 700; letter-spacing: .12em;
}
.sp-pub-btn:hover { background: #ff9440; }
.sp-pub-btn:disabled { opacity: .6; cursor: wait; }
.sp-pub-note { color: #c9a26a; font-size: 11px; min-height: 0; }
.sp-pub-note:empty { display: none; }
.sp-published { display: none; flex-direction: column; gap: 6px; color: #7fd18a; font-size: 11px; letter-spacing: .08em; }
.sp-see-top {
  height: 30px; border-radius: 4px; border: 1px solid #ff7a1a;
  background: #2a1c10; color: #ffaa44; font-size: 11px; font-weight: 700; letter-spacing: .1em;
}
.sp-see-top:hover { background: #3a2410; }

.sp-err {
  display: none; padding: 9px 11px; border-radius: 8px;
  background: #2a1512; border: 1px solid #6a2a20; color: #ff8a6a; line-height: 1.5;
}
.sp-panel[data-mode="error"] .sp-err { display: block; }
.sp-panel[data-mode="public"] .sp-pub-open { display: none; }
.sp-panel[data-mode="public"] .sp-pub { display: flex; }
.sp-panel[data-mode="done"] .sp-private-hint,
.sp-panel[data-mode="done"] .sp-pub-open { display: none; }
.sp-panel[data-mode="done"] .sp-published { display: flex; }

/* ── TOP BEATS (galerie) ── */
.sp-comm { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
/* Fond du TOP (demande user) : gris-bleu sombre UNI au lieu du noir — la
   trame de points tirée de son échantillon a été retirée (« pk des points ? »). */
.sp-comm { background-color: #23252d; }

.sp-comm-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 12px 8px; color: #8a857c;
}
.sp-comm-sub { font-size: 10px; letter-spacing: .06em; line-height: 1.4; }
.sp-sort { display: flex; gap: 4px; }
.sp-sort button { height: 22px; padding: 0 8px; font-size: 10px; }
.sp-sort button.on { border-color: #ff7a1a; color: #ffaa44; }
.sp-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 14px; }
/* Barre de défilement assortie au thème (NEW, MINE) : fine, gris sombre,
   orange au survol. TOP (10 premiers) : aucune barre visible (la molette
   défile quand même si l'écran est petit). */
.sp-list { scrollbar-width: thin; scrollbar-color: #4a4d55 transparent; }
.sp-list:hover { scrollbar-color: #ff7a1a transparent; }
.sp-list::-webkit-scrollbar { width: 6px; }
.sp-list::-webkit-scrollbar-track { background: transparent; }
.sp-list::-webkit-scrollbar-thumb { background: #4a4d55; border-radius: 3px; }
.sp-list::-webkit-scrollbar-thumb:hover { background: #ff7a1a; }
.sp-list.no-bar { scrollbar-width: none; }
.sp-list.no-bar::-webkit-scrollbar { display: none; }
.sp-empty { padding: 18px 8px; color: #8a857c; line-height: 1.6; }
.sp-row {
  display: flex; align-items: center; gap: 6px;   /* 8 → 6 px : place pour le bouton 🔗 */
  padding: 5px 6px; border-bottom: 1px solid rgba(255,255,255,.07); border-radius: 4px;
}
/* Survols translucides sur le fond gris-bleu. */
.sp-row:hover { background: rgba(255,255,255,.05); }
.sp-row.hl { background: rgba(255,122,26,.14); }
.sp-row.playing { background: rgba(255,122,26,.10); }
.sp-rank { width: 16px; flex: none; text-align: right; color: #6f6a62; font-size: 11px; }
/* Podium : les 3 premiers du TOP (au moins 1 👍) — fond or, argent, bronze ;
   couronne 👑 à la place du « 1 ». */
.sp-rank.r1 { color: #ffc23a; font-weight: 700; font-size: 14px; width: 20px; text-align: center; }
.sp-rank.r2 { color: #e4e9ee; font-weight: 700; }
.sp-rank.r3 { color: #e3a06a; font-weight: 700; }
.sp-row.pod1 { background: linear-gradient(90deg, rgba(255,194,58,.30), rgba(255,194,58,.08)); box-shadow: inset 0 0 0 1px rgba(255,194,58,.55); }
.sp-row.pod2 { background: linear-gradient(90deg, rgba(200,210,222,.24), rgba(200,210,222,.06)); box-shadow: inset 0 0 0 1px rgba(200,210,222,.45); }
.sp-row.pod3 { background: linear-gradient(90deg, rgba(205,127,50,.28), rgba(205,127,50,.07)); box-shadow: inset 0 0 0 1px rgba(205,127,50,.5); }
.sp-row.pod1, .sp-row.pod2, .sp-row.pod3 { margin-bottom: 3px; border-bottom-color: transparent; }
.sp-row.pod1 .sp-artist { color: #ffd77a; }
.sp-row.pod2 .sp-artist { color: #f0f4f8; }
.sp-row.pod3 .sp-artist { color: #f0b98a; }
.sp-row-left { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sp-row-play {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: #2a2c31; border: 1px solid #3a3d43; color: #ffaa44; font-size: 10px;
}
.sp-row-play:hover { border-color: #ff7a1a; }
.sp-row-play:disabled { opacity: .35; cursor: default; }
.sp-row-txt { flex: 1; min-width: 0; }
.sp-row-name {
  flex: 0 0 auto; max-width: 100%; padding: 0; background: none; border: none;
  color: #ece7de; font-size: 11.5px; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-row-name:hover { color: #ffaa44; text-decoration: underline; }
/* Ligne 1 = le beatmaker, en haut et en grand (demande user). */
.sp-row-who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sp-artist {
  color: #ffaa44; font-size: 14px; font-weight: 700; letter-spacing: .04em; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
/* Ligne 2 = titre + infos en retrait. */
.sp-row-sub { display: flex; align-items: baseline; min-width: 0; overflow: hidden; margin-top: 2px; font-size: 10px; }
.sp-row-meta { flex: 1 1 0; min-width: 0; color: #8a857c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-row-age { flex: none; margin-left: auto; padding-left: 6px; color: #ece7de; font-size: 10px; white-space: nowrap; }
.sp-row-wave { display: block; width: 100%; height: 16px; margin-top: 3px; cursor: pointer; }
.sp-like {
  flex: none; height: 27px; min-width: 50px; padding: 0 9px; border-radius: 14px;
  background: #222428; border: 1px solid #3a3d43; color: #f0ebe2; font-size: 13px; font-weight: 700;
}
.sp-like:hover { border-color: #ff7a1a; }
.sp-like.on { background: #3a2410; border-color: #ff7a1a; color: #ffaa44; }
.sp-row-act { gap: 5px; }
/* Colonne d'actions : 👍 en haut, SHARE vert en bas à droite (demande user). */
.sp-row-act { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.sp-share {
  height: 18px; padding: 0 7px; border-radius: 9px;
  background: #13301c; border: 1px solid #2f8f4f; color: #7fe39c;
  font-family: inherit; font-size: 9px; font-weight: 700; letter-spacing: .12em; white-space: nowrap;
}
.sp-share:hover { background: #1a4426; border-color: #3fbf6a; color: #b6ffc9; }
.sp-share.done { background: #3fbf6a; border-color: #3fbf6a; color: #0c1f12; }
/* 💬 : même gabarit que 👍, orange discret quand il y a des commentaires. */
.sp-com {
  flex: none; height: 27px; min-width: 50px; padding: 0 9px; border-radius: 14px;
  background: #222428; border: 1px solid #3a3d43; color: #f0ebe2; font-size: 13px; font-weight: 700;
}
.sp-com:hover { border-color: #ff7a1a; }
.sp-com.has { color: #ffaa44; }
/* Fil de commentaires déplié sous la ligne — police du site, tailles généreuses. */
.sp-thread { margin: 0 4px 8px 4px; padding: 10px 12px; background: rgba(0,0,0,.26); border-radius: 8px;
  font-family: 'Share Tech Mono', 'OCR B', 'Courier New', monospace; }
.sp-th-list { max-height: 240px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #4a4d55 transparent; }
.sp-th-empty { padding: 6px 0; color: #a39e94; font-size: 13px; }
.sp-th-c { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.sp-th-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.sp-th-name { color: #f3eee5; font-weight: 700; }
.sp-th-name.owner { color: #ffaa44; }
.sp-th-tag { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: #ffaa44; border: 1px solid #ff7a1a; border-radius: 8px; padding: 1px 6px; }
.sp-th-age { margin-left: auto; color: #a39e94; font-size: 12px; }
.sp-th-x { background: none; border: none; color: #8a857c; font-size: 13px; padding: 0 3px; }
.sp-th-x:hover { color: #ff5a4a; }
.sp-th-text { margin-top: 3px; color: #e6e1d8; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.sp-th-form { display: flex; gap: 6px; margin-top: 10px; }
.sp-th-in { flex: 1; min-width: 0; height: 34px; padding: 0 12px; border-radius: 17px; background: #1a1c20; border: 1px solid #3a3d43; color: #f3eee5; font-size: 14px; font-family: inherit; }
.sp-th-in:focus { outline: none; border-color: #ff7a1a; }
.sp-th-send { flex: none; height: 34px; padding: 0 16px; border-radius: 17px; background: #3a2410; border: 1px solid #ff7a1a; color: #ffaa44; font-size: 12px; font-weight: 700; letter-spacing: .08em; font-family: inherit; }
.sp-th-send:disabled { opacity: .5; }
.sp-th-note { margin-top: 5px; color: #ff8a7a; font-size: 12px; }
.sp-del { flex: none; background: none; border: none; color: #6f6a62; font-size: 11px; padding: 2px 4px; }
/* Tes beats : étiquette YOU + ✕ bien visible (suppression complète). */
.sp-row.mine { box-shadow: inset 2px 0 0 #6a40c8; }
/* Tes beats sur le podium : barre violette ET liseré or / argent / bronze */
.sp-row.mine.pod1 { box-shadow: inset 2px 0 0 #6a40c8, inset 0 0 0 1px rgba(255,194,58,.55); }
.sp-row.mine.pod2 { box-shadow: inset 2px 0 0 #6a40c8, inset 0 0 0 1px rgba(200,210,222,.45); }
.sp-row.mine.pod3 { box-shadow: inset 2px 0 0 #6a40c8, inset 0 0 0 1px rgba(205,127,50,.5); }
.sp-you {
  flex: none; display: inline-block; padding: 0 4px; border-radius: 3px;
  background: #1f1636; border: 1px solid #6a40c8; color: #c9a8ff;
  font-size: 9px; letter-spacing: .1em; margin-right: 5px; align-self: center;
}
.sp-del.own { color: #ff8a6a; border: 1px solid #6a2a20; border-radius: 50%; width: 22px; height: 22px; padding: 0; }
.sp-del.own:hover { background: #2a1512; color: #ff5050; }
.sp-del:hover { color: #ff5050; }

/* Cadre étroit (240–300 px, collé à la machine sur un écran ~1440 px). */
.sp-panel.sp-narrow { padding: 6px 7px 8px; }
.sp-narrow .sp-title { font-size: 15px; letter-spacing: .2em; }
.sp-narrow .sp-mine { padding: 10px 9px; }
.sp-narrow .sp-pub-open { letter-spacing: .06em; }
.sp-narrow .sp-comm-head { padding: 10px 9px 6px; letter-spacing: .1em; }
.sp-narrow .sp-list { padding: 0 4px 10px; }
.sp-narrow .sp-row { gap: 6px; padding: 5px 3px; }
.sp-narrow .sp-rank { width: 12px; }
.sp-narrow .sp-rank.r1 { width: 16px; font-size: 13px; }

/* Téléphone : tiroir plein écran (aucun défilement horizontal). */
html.sd-mobile .sp-panel {
  top: 0; right: 0; bottom: 0; width: 100vw; max-width: 100vw;
  border: none; border-radius: 0;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
}
html.sd-mobile .sp-list { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); }