/* ============================================================
   World-Funambule — design tokens
   Concept : le fil tendu entre les mondes qu'on construit.
   ============================================================ */

:root {
  --bg: #15171c;
  --bg-card: #1d2027;
  --bg-raised: #262a33;
  --wire: #e8b04b;
  --wire-dim: #6b5a32;
  --velvet: #8a3b3b;
  --text: #e8e6e0;
  --text-dim: #9a9aa3;
  --border: #2e323c;

  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
}

.hidden { display: none !important; }

/* ---------- Logo ---------- */

.wf-logo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.2rem;
  letter-spacing: -0.01em;
  margin: 0;
}
.wf-logo span { color: var(--wire); }
.wf-logo--small { font-size: 1.3rem; }

/* ---------- Auth screen ---------- */

#auth-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at top, rgba(232, 176, 75, 0.08), transparent 60%),
    var(--bg);
}

.auth-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2.5rem;
  width: min(380px, 90vw);
  position: relative;
}

.auth-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--wire), transparent);
}

.auth-tagline {
  color: var(--text-dim);
  font-style: italic;
  margin: 0.4rem 0 1.8rem;
  font-family: var(--font-display);
}

.auth-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.auth-tab {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-dim);
  padding: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.auth-tab.active {
  color: var(--wire);
  border-bottom-color: var(--wire);
}

.auth-form { display: flex; flex-direction: column; gap: 1rem; }

.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.auth-remember {
  flex-direction: row !important;
  align-items: center;
  gap: 0.5rem !important;
  cursor: pointer;
}
.auth-remember input { width: auto; }

.auth-form input {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.6rem 0.7rem;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.auth-form input:focus {
  outline: none;
  border-color: var(--wire);
}

.auth-form button[type="submit"] {
  background: var(--wire);
  color: #1a1208;
  border: none;
  border-radius: 3px;
  padding: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 0.3rem;
}

.auth-error {
  color: #e8847a;
  font-size: 0.85rem;
  min-height: 1.2em;
  margin: 0;
}

/* ---------- App header ---------- */

.wf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 2rem;
  border-bottom: 1px solid var(--border);
}

#presence-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.4rem 2rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
  font-size: 0.8rem;
  color: var(--text-dim);
}

.presence-banner-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--bg-card);
  border-radius: 10px;
  padding: 0.15rem 0.6rem;
}

.presence-banner-watchtogether {
  background: var(--wire-dim);
  color: var(--wire);
  font-weight: 600;
}

.wf-user {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--text-dim);
  font-size: 0.9rem;
}

/* ---------- Bandeau aperçu joueur ---------- */

#preview-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: #4a3318;
  border-bottom: 2px solid var(--wire);
  color: var(--wire);
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
}

#preview-banner .btn-ghost {
  color: var(--wire);
  border-color: var(--wire);
}

.preview-player-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-raised);
  border-radius: 3px;
  padding: 0.6rem 0.9rem;
  cursor: pointer;
}
.preview-player-row:hover { background: var(--bg-card); border: 1px solid var(--wire-dim); }

.btn-ghost {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 0.4rem 0.9rem;
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.85rem;
}
.btn-ghost:hover { border-color: var(--wire); color: var(--wire); }

.btn-ghost.btn-danger { color: var(--velvet); border-color: var(--velvet); }
.btn-ghost.btn-danger:hover { color: #fff; background: var(--velvet); }

/* ---------- Panneau admin (voir #admin-overlay, app.js) ---------- */
.admin-tab {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-dim);
  padding: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.admin-tab.active { color: var(--wire); border-bottom-color: var(--wire); }

/* ---------- Bandeau des tables en vocal (voir voice-sidebar.js) ---------- */

#voice-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 240px;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 1rem;
  z-index: 60;
}

/* Décale tout le reste de l'appli plutôt que de superposer le bandeau
   (position:fixed) par-dessus — cohérent avec la largeur fixe ci-dessus. */
#app-screen { margin-left: 240px; }

.voice-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 0.95rem;
  margin-bottom: 0.8rem;
}

.voice-sidebar-table {
  background: var(--bg-raised);
  border-radius: 4px;
  padding: 0.6rem 0.7rem;
  margin-bottom: 0.6rem;
}

.voice-sidebar-table-name {
  font-family: var(--font-display);
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
}

.voice-sidebar-participant {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-dim);
  padding: 0.15rem 0;
}

/* Bouton dans le header (pas flottant, pour ne jamais chevaucher le logo
   ou les autres boutons) qui ouvre le bandeau en tiroir sur petit écran —
   inutile en dessous de la media query : le bandeau est déjà visible en
   permanence sur grand écran. */
#voice-sidebar-toggle { display: none; }

@media (max-width: 900px) {
  #app-screen { margin-left: 0; }
  #voice-sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 4px 0 16px rgba(0,0,0,0.4);
  }
  #voice-sidebar.open { transform: translateX(0); }
  #voice-sidebar-toggle { display: inline-flex; align-items: center; gap: 0.3rem; }
}

/* ---------- The Wire (nav) ---------- */

.wf-wire {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 4rem;
  padding: 2.5rem 2rem 1.5rem;
  margin: 0 2rem;
}

.wf-wire::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--wire-dim) 10%, var(--wire-dim) 90%, transparent);
}

.wire-point {
  position: relative;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-body);
  z-index: 1;
  padding: 0;
}

.wire-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg-raised);
  border: 2px solid var(--wire-dim);
  transition: all 0.2s ease;
}

.wire-point.active .wire-dot {
  background: var(--wire);
  border-color: var(--wire);
  box-shadow: 0 0 12px rgba(232, 176, 75, 0.5);
}

.wire-label {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-dim);
}
.wire-point.active .wire-label { color: var(--wire); }

.wire-sub {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---------- Campaign bar ---------- */

.campaign-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0 2rem 1.5rem;
  justify-content: center;
}

.campaign-bar select {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.5rem 0.8rem;
  border-radius: 3px;
  font-family: var(--font-body);
  min-width: 220px;
}

/* ---------- Module content ---------- */

#module-content {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 2rem 4rem;
}

.module-section h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  margin-bottom: 0.3rem;
}

.module-hint {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.entry-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 2rem;
}

.entry-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--wire-dim);
  border-radius: 3px;
  padding: 0.9rem 1.1rem;
}

.entry-card h3 {
  margin: 0 0 0.2rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.entry-card .entry-type {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wire);
  margin-bottom: 0.3rem;
}

.entry-card p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.9rem;
}

.empty-state {
  color: var(--text-dim);
  font-style: italic;
  padding: 2rem 0;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 4px;
}

.inline-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.inline-form .row { display: flex; gap: 0.8rem; }
.inline-form .row > * { flex: 1; }

.inline-form input,
.inline-form select,
.inline-form textarea {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.55rem 0.7rem;
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.inline-form textarea { resize: vertical; min-height: 70px; }

.inline-form button {
  align-self: flex-start;
  background: var(--wire);
  color: #1a1208;
  border: none;
  padding: 0.55rem 1.2rem;
  border-radius: 3px;
  font-weight: 600;
  cursor: pointer;
}

.track-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  margin: 0.2rem;
}

.track-chip .mood-tag {
  color: var(--velvet);
  font-size: 0.7rem;
  text-transform: uppercase;
}

.harp-source-toggle {
  display: flex;
  gap: 1.5rem;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.harp-source-toggle label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.harp-source-toggle input[type="radio"] {
  width: auto;
}

.inline-form input[type="file"] {
  padding: 0.45rem 0.5rem;
}

.harp-upload-status {
  margin: 0;
  font-size: 0.8rem;
  color: var(--wire);
  min-height: 1.1em;
}

.scry-private {
  border-left-color: var(--velvet);
}

/* ---------- PJ : création de personnage ---------- */

.pj-new-type-banner {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--wire-dim);
  border-radius: 4px;
  padding: 0.7rem 1rem;
  margin-bottom: 1.2rem;
}

.pj-new-type-icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}

.pj-new-type-hint {
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.4;
}

.pj-new-type-pnj { border-left-color: var(--wire); }
.pj-new-type-creature { border-left-color: var(--velvet); }

.pj-field-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.pj-field-optional {
  font-weight: 400;
  font-style: italic;
  opacity: 0.75;
}

.pj-checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.6rem 0.8rem;
  color: var(--text);
  font-size: 0.88rem;
  cursor: pointer;
}
.pj-checkbox-row input[type="checkbox"] { width: auto; }
.pj-checkbox-row:hover { border-color: var(--wire-dim); }

.pj-new-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.2rem;
}

/* Spécificité plus élevée que ".inline-form button" (fond doré par défaut,
   pensé pour le bouton principal) pour que le bouton Annuler garde bien
   son style discret de .btn-ghost dans ce contexte. */
.pj-new-actions .btn-ghost {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-weight: 400;
}
.pj-new-actions .btn-ghost:hover { border-color: var(--wire); color: var(--wire); }

/* ---------- Notifications discrètes (voir notifications.js) ---------- */

#wf-notifications {
  position: fixed;
  top: 80px;
  right: 1.5rem;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(320px, 90vw);
}

.wf-notification-toast {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--bg-card);
  border: 1px solid var(--wire-dim);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  font-size: 0.85rem;
  cursor: pointer;
  animation: wf-notification-in 0.2s ease-out;
}

.wf-notification-toast.wf-notification-clickable:hover {
  border-color: var(--wire);
}

.wf-notification-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

@keyframes wf-notification-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Modal générique ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 11, 14, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.8rem;
  width: min(480px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}

/* Session Live : panneau flottant, pas une vraie modale — pas de fond
   sombre bloquant (pointer-events:none sur le conteneur), pour pouvoir
   continuer à cliquer/naviguer dans le reste du site pendant qu'il reste
   ouvert. La fenêtre elle-même réactive pointer-events pour rester
   utilisable, et se déplace en glissant son en-tête (voir session-live.js). */
.session-live-floating {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}

.session-live-window {
  position: fixed;
  top: 70px;
  right: 20px;
  pointer-events: auto;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}

.session-live-window .modal-header {
  cursor: move;
  user-select: none;
}

/* Carte Lore en plein écran : bandeau de cartes à gauche + la carte
   elle-même dans le reste de l'espace — au-dessus de tout le reste
   (session live, lecteur Harp, chat) puisque le but est de maximiser
   l'espace utile pendant que c'est ouvert. */
.lore-map-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--bg);
  display: flex;
}

.lore-map-fullscreen-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 1rem;
  gap: 0.6rem;
  overflow-y: auto;
}

.lore-map-fullscreen-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  margin-bottom: 0.4rem;
}

.lore-map-fullscreen-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0.5rem 0.6rem;
  color: var(--text);
  cursor: pointer;
  font-family: var(--font-body);
}

.lore-map-fullscreen-item:hover { background: var(--bg-raised); }
.lore-map-fullscreen-item.active {
  background: var(--bg-raised);
  border-color: var(--wire-dim);
  color: var(--wire);
}

.lore-map-fullscreen-main {
  flex: 1;
  overflow: auto;
  padding: 1rem 1.5rem;
}

.modal-header h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin: 0;
}

/* ---------- Membres ---------- */

.members-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}

.member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-raised);
  border-radius: 3px;
  padding: 0.5rem 0.8rem;
}

.presence-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.3rem;
}
.presence-dot.presence-online { background: #4caf50; }   /* vert : actif dans les 90 dernières secondes */
.presence-dot.presence-offline { background: var(--text-dim); opacity: 0.5; }

.role-pill {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-dim);
}

.role-pill.gm {
  color: var(--wire);
  border: 1px solid var(--wire-dim);
}

.member-remove-btn {
  background: none;
  border: none;
  color: var(--velvet);
  cursor: pointer;
  font-size: 0.8rem;
}

/* ---------- Scry : sous-onglets (Journal / Codex / Mindmap) ---------- */

.scry-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.scry-tab {
  background: none;
  border: none;
  color: var(--text-dim);
  padding: 0.5rem 0.9rem;
  font-family: var(--font-body);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.scry-tab.active {
  color: var(--wire);
  border-bottom-color: var(--wire);
}

/* ---------- Scry : Codex (partages) ---------- */

.share-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.7rem;
}

.share-card.censored {
  border-left: 3px solid var(--velvet);
  font-style: italic;
  color: var(--text-dim);
}

.share-card .share-meta {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 0.4rem;
}

.recipient-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.7rem;
}

.recipient-checkboxes label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text);
}

.recipient-checkboxes input[type="checkbox"] {
  width: auto;
}

/* ---------- Scry : Mindmap ---------- */

.mindmap-viewport {
  position: relative;
  width: 100%;
  height: 480px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-card);
}

.mindmap-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: grab;
  transform-origin: top left;
  transition: transform 0.08s ease-out;
}

.mindmap-zoom-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.mindmap-zoom-controls .btn-ghost {
  padding: 0.3rem 0.7rem;
  font-size: 0.95rem;
  line-height: 1;
}

.mindmap-svg-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

.mindmap-node {
  position: absolute;
  background: var(--bg-raised);
  border: 2px solid var(--wire-dim);
  border-radius: 6px;
  cursor: move;
  user-select: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.mindmap-node span {
  font-size: 0.8rem;
  padding: 0.3rem;
  word-break: break-word;
  line-height: 1.2;
}

.mindmap-node:hover {
  border-color: var(--wire);
}

.mindmap-node.linking {
  border-color: var(--velvet);
  box-shadow: 0 0 10px rgba(138, 59, 59, 0.5);
}

/* Formes */
.mindmap-shape-round { border-radius: 50%; }
.mindmap-shape-square { border-radius: 6px; }
.mindmap-shape-diamond { border-radius: 6px; transform: rotate(45deg); }
.mindmap-shape-diamond span { transform: rotate(-45deg); max-width: 70%; }
.mindmap-shape-hexagon { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); border-radius: 0; }

/* Tailles : la taille réelle en px est posée inline par le JS (left/top/width/height) */
.mindmap-size-small span { font-size: 0.7rem; }
.mindmap-size-large span { font-size: 0.9rem; }

.mindmap-toolbar {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

/* ---------- Tome : Campagne (Arc / Chapitre / Scène) ---------- */

.arc-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--wire);
  border-radius: 4px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.8rem;
}

.arc-header, .chapter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.arc-toggle, .chapter-toggle, .scene-status-pill {
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.05rem;
  cursor: pointer;
  text-align: left;
  padding: 0;
}

.chapter-toggle { font-size: 0.95rem; color: var(--text-dim); }

.arc-body {
  margin-top: 0.8rem;
  padding-left: 0.8rem;
  border-left: 1px solid var(--border);
}

.chapter-card {
  background: var(--bg-raised);
  border-radius: 3px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.5rem;
}

.chapter-body {
  margin-top: 0.6rem;
  padding-left: 0.6rem;
}

.scene-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem;
  cursor: pointer;
  border-radius: 3px;
}
.scene-row:hover { background: var(--bg-card); }

.scene-title { font-size: 0.9rem; }

.scene-status-pill {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.65rem;
  text-transform: uppercase;
  padding: 0.1rem 0.45rem;
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-dim);
  cursor: default;
}
.scene-status-pill.status-jouee { color: var(--wire); border: 1px solid var(--wire-dim); }
.scene-status-pill.status-sautee { color: var(--velvet); border: 1px solid var(--velvet); }

.scene-block textarea, .scene-block input {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.5rem;
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  box-sizing: border-box;
}

.scene-block textarea { min-height: 70px; resize: vertical; }

.lore-tag-option:hover { background: var(--bg-raised); }

/* ---------- Lore : Cartes interactives ---------- */

.map-pin {
  transition: transform 0.15s ease, filter 0.15s ease;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6));
}
.map-pin:hover {
  transform: translate(-50%, -50%) scale(1.25) !important;
  filter: drop-shadow(0 0 6px var(--wire));
}

/* ---------- Lecteur Harp persistant ---------- */

#harp-player-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--wire-dim);
  padding: 0.7rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 150;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.3);
}

#harp-player-bar .player-icon { font-size: 1.3rem; }
#harp-player-bar .player-label { font-family: var(--font-display); flex: 1; }
#harp-player-bar .player-sub { color: var(--text-dim); font-size: 0.8rem; }

/* Chat de table — bulle flottante persistante, au-dessus du lecteur Harp
   (z-index plus élevé) avec assez de marge basse pour ne jamais le
   chevaucher quand les deux sont visibles en même temps. */
#table-chat-widget {
  position: fixed;
  bottom: 90px;
  right: 1.5rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
}

/* Carte en plein écran (voir modules/lore.js, openMapFullscreen) : le
   widget est déplacé dans l'overlay et basculé en bas à gauche plutôt
   qu'à droite, pour rester visible par-dessus la carte sans changer sa
   propre logique de rendu (toujours retrouvé par id, peu importe son
   parent DOM du moment). */
#table-chat-widget.table-chat-bottom-left {
  right: auto;
  left: 1.5rem;
  align-items: flex-start;
}

.table-chat-toggle {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--wire-dim);
  background: var(--bg-card);
  font-size: 1.4rem;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

.table-chat-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--velvet);
  color: #fff;
  border-radius: 999px;
  font-size: 0.7rem;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.table-chat-panel {
  width: min(320px, 85vw);
  max-height: 60vh;
  background: var(--bg-card);
  border: 1px solid var(--wire-dim);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.table-chat-header {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--wire-dim);
  font-family: var(--font-display);
}

.table-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 0.6rem 0.9rem;
  min-height: 120px;
  max-height: 40vh;
}

.table-chat-message { margin-bottom: 0.6rem; }
.table-chat-message-meta { font-size: 0.75rem; color: var(--text-dim); }
.table-chat-message-content { white-space: pre-wrap; word-break: break-word; }

.table-chat-message-roll .table-chat-message-content {
  border-left: 2px solid var(--wire-dim);
  padding-left: 0.5rem;
}

.table-chat-form {
  display: flex;
  gap: 0.4rem;
  padding: 0.6rem;
  border-top: 1px solid var(--wire-dim);
}

.table-chat-form input {
  flex: 1;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.5rem 0.6rem;
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.harp-player-tracks {
  border-left: 1px solid var(--border);
  padding-left: 1rem;
  overflow-x: auto;
}

/* ---------- Calendrier personnalisé ---------- */

.calendar-weekday-label {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-dim);
  font-weight: 600;
  padding-bottom: 0.3rem;
}

.calendar-day-cell {
  position: relative;
  aspect-ratio: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.calendar-day-cell--empty {
  background: transparent;
  border: none;
}

.calendar-day-cell.has-event {
  border-color: var(--wire-dim);
  background: var(--bg-raised);
  cursor: help;
}

.calendar-day-dot {
  position: absolute;
  bottom: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--wire);
}

.calendar-event-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-card);
  border-left: 3px solid var(--wire-dim);
  border-radius: 3px;
  padding: 0.5rem 0.7rem;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
}

.harp-live-volume {
  accent-color: var(--wire);
}

.harp-link-btn {
  background: none;
  border: 1px solid var(--wire-dim);
  color: var(--wire);
  border-radius: 3px;
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  cursor: pointer;
}
.harp-link-btn:hover { border-color: var(--wire); }

/* ---------- Mirror links ---------- */

.mirror-links-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.mirror-link-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  background: var(--bg-raised);
  border-radius: 3px;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
}

.mirror-link-label { flex: 1; }

.mirror-link-remove {
  color: var(--velvet);
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
}

.lore-tag-link {
  color: var(--wire);
  text-decoration: none;
  border-bottom: 1px dotted var(--wire);
  cursor: pointer;
}
.lore-tag-link:hover { border-bottom-style: solid; }

/* ---------- Recherche globale ---------- */

.wf-search-wrap {
  position: relative;
  flex: 1;
  max-width: 360px;
  margin: 0 1.5rem;
}

#global-search-input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.45rem 0.7rem;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  box-sizing: border-box;
}
#global-search-input:focus { outline: none; border-color: var(--wire); }

#global-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 200;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}

.global-search-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--border);
}
.global-search-row:last-child { border-bottom: none; }
.global-search-row:hover { background: var(--bg-raised); }

/* FAQ — voir faq-data.js (contenu) / faq.js (recherche + affichage) */
#faq-search-input {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.55rem 0.7rem;
  border-radius: 3px;
  font-family: var(--font-body);
}

.faq-category-title {
  font-family: var(--font-display);
  color: var(--wire);
  margin: 1.2rem 0 0.4rem;
}
.faq-category-title:first-child { margin-top: 0; }

.faq-entry {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.5rem 0.8rem;
  margin-bottom: 0.5rem;
}
.faq-entry summary {
  cursor: pointer;
  font-weight: 600;
}
.faq-entry p {
  margin: 0.5rem 0 0;
  line-height: 1.5;
  color: var(--text-dim);
}

/* ============================================================
   RESPONSIVE — adaptation mobile (≤640px)
   ============================================================ */

@media (max-width: 640px) {
  /* Header : logo + recherche + user passent en colonnes empilées */
  .wf-header {
    flex-wrap: wrap;
    padding: 0.8rem 1rem;
    gap: 0.6rem;
  }

  .wf-logo--small { font-size: 1.1rem; }

  #presence-banner {
    padding: 0.4rem 1rem;
  }

  .wf-search-wrap {
    order: 3;
    flex: 1 1 100%;
    max-width: none;
    margin: 0;
  }

  .wf-user {
    gap: 0.5rem;
    font-size: 0.8rem;
  }

  #current-username { display: none; } /* l'espace manque ; le nom reste visible dans les paramètres/profil */

  /* Boutons IA/Session live ajoutés dans le header : icône seule sur
     mobile, même logique que le nom d'utilisateur ci-dessus — le texte
     complet prendrait trop de place à côté de la recherche et du menu
     utilisateur. */
  #ai-assistant-btn .btn-label,
  #session-live-btn .btn-label { display: none; }

  /* Nav modules : la "ligne" horizontale devient un espacement plus serré, scrollable */
  .wf-wire {
    gap: 1.5rem;
    padding: 1.2rem 1rem 1rem;
    margin: 0;
    overflow-x: auto;
    justify-content: flex-start;
  }
  .wire-label { font-size: 0.95rem; }
  .wire-sub { font-size: 0.6rem; }

  .campaign-bar {
    flex-wrap: wrap;
    padding: 0 1rem 1rem;
    gap: 0.6rem;
  }
  .campaign-bar select { min-width: 0; flex: 1; }

  #module-content { padding: 0 1rem 5rem; } /* marge basse pour ne pas chevaucher le lecteur Harp */

  .auth-card { padding: 1.5rem; }

  /* Formulaires : les paires de champs (.row) passent en colonne */
  .inline-form .row {
    flex-direction: column;
    gap: 0.6rem;
  }

  .inline-form button,
  .auth-form button[type="submit"] {
    width: 100%;
    align-self: stretch;
    padding: 0.7rem; /* zone tactile confortable */
  }

  /* Annuler/Créer : empilés plutôt que côte à côte, l'espace est trop
     juste pour deux boutons pleine largeur sur la même ligne. */
  .pj-new-actions {
    flex-direction: column-reverse;
  }

  /* .btn-ghost est utilisé partout (✕ supprimer, 🔗 lier, minuteurs...) :
     le padding par défaut (0.4rem vertical) est un peu juste au doigt,
     on l'élargit uniquement sur mobile plutôt que d'agrandir tous les
     boutons partout, y compris sur desktop où l'espace est moins précieux. */
  .btn-ghost {
    padding: 0.6rem 1rem;
  }

  /* Cartes d'entrées : le bouton 🔗/🎵 flottant devient plus facile à toucher */
  .entry-harp-btn {
    font-size: 1rem !important;
    padding: 0.3rem 0.5rem !important;
  }

  /* Modals : prennent presque tout l'écran plutôt qu'une largeur fixe */
  .modal-card {
    width: 94vw !important;
    max-height: 88vh;
    padding: 1.2rem;
  }

  /* Session Live sur mobile : le glissé n'apporte pas grand-chose sur un
     petit écran déjà en pleine largeur, on revient à un centrage simple. */
  .session-live-window {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
  }

  /* Mindmap : canvas plus court, nœuds restent utilisables au doigt */
  .mindmap-viewport { height: 360px; }

  .mindmap-toolbar { flex-wrap: wrap; }

  /* Lecteur Harp persistant : tient sur une ligne plus compacte */
  #harp-player-bar {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }
  #harp-player-bar .player-sub { display: none; }
  .harp-player-tracks { display: none; } /* trop serré sur mobile, le volume reste réglable depuis l'onglet Harp */

  /* Chat de table : bulle plus proche du bord, panneau presque plein écran */
  #table-chat-widget { right: 1rem; bottom: 76px; }
  .table-chat-panel { width: 90vw; }

  /* Notifications : pleine largeur plutôt qu'une colonne étroite à droite */
  #wf-notifications { right: 0.6rem; left: 0.6rem; max-width: none; top: 70px; }

  /* Carte plein écran : bandeau en haut (bande horizontale scrollable)
     plutôt qu'une colonne large qui mangerait tout l'écran étroit. */
  .lore-map-fullscreen { flex-direction: column; }
  .lore-map-fullscreen-sidebar {
    width: auto;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: visible;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .lore-map-fullscreen-item { width: auto; white-space: nowrap; }

  /* Arc/Chapitre : moins d'indentation, l'espace est précieux */
  .arc-body { padding-left: 0.5rem; }
  .chapter-body { padding-left: 0.4rem; }

  /* Toolbar de blocs (scène/template) : wrap propre */
  #scene-blocks-list .scene-block,
  #template-blocks-list .scene-block {
    margin-bottom: 1rem;
  }
}

@media (max-width: 420px) {
  /* Très petits écrans : la nav module passe sur deux lignes plutôt que de scroller */
  .wf-wire { flex-wrap: wrap; overflow-x: visible; justify-content: center; }
}

/* Diff de l'historique de versions (voir modules/tome.js, modules/lore.js) */
.diff-added {
  background: rgba(90, 168, 90, 0.25);
  color: #a8d8a8;
}
.diff-removed {
  background: rgba(138, 59, 59, 0.25);
  color: var(--velvet);
  text-decoration: line-through;
}