/* ==========================================================
   Chat du groupe — bulle flottante (module séparé)
   Reprend les couleurs du site (variables de base.css) en jour et en nuit.
   Toutes les classes commencent par « wc- » : aucun conflit avec le site.
   ========================================================== */
.wc-root{
  --wc-accent:var(--accent-color,#3b82f6); --wc-accent-hover:var(--accent-hover,#2563eb);
  --wc-surface:var(--surface,#fff); --wc-surface-2:var(--surface-2,#f8fafc); --wc-border:var(--border,#e2e8f0);
  --wc-text:var(--text,#1e293b); --wc-title:var(--title,#0f172a); --wc-muted:var(--muted,#64748b);
  --wc-mine:#dbeafe; --wc-mine-text:#1e3a8a;
  --wc-note:#fef3c7; --wc-note-border:#f59e0b; --wc-note-text:#78350f;
  --wc-tag:#e0e7ff; --wc-tag-text:#3730a3; --wc-tag-me:#f59e0b;
  --wc-red:var(--danger,#ef4444);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--wc-text); font-size:14px; line-height:1.4;
}
html.dark .wc-root{
  --wc-mine:#1e3a8a; --wc-mine-text:#dbeafe;
  --wc-note:rgba(120,53,15,.55); --wc-note-text:#fde68a;
  --wc-tag:rgba(67,56,202,.45); --wc-tag-text:#c7d2fe;
}
.wc-root *{ box-sizing:border-box; }
.wc-root [hidden]{ display:none !important; }
.wc-root button{ font-family:inherit; cursor:pointer; }

/* ---------- Bouton flottant ---------- */
.wc-fab{
  position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:48;
  width:56px; height:56px; border-radius:50%; border:none;
  background:var(--wc-accent); color:#fff; font-size:24px;
  box-shadow:0 8px 24px -4px rgba(59,130,246,.55); transition:transform .15s, background-color .15s;
}
.wc-fab:hover{ background:var(--wc-accent-hover); transform:scale(1.05); }
.wc-fab:focus-visible{ outline:3px solid var(--wc-title); outline-offset:3px; }
.wc-badge{
  position:absolute; top:-4px; right:-4px; min-width:22px; height:22px; padding:0 6px;
  border-radius:11px; background:var(--wc-red); color:#fff; font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--wc-surface);
}
.wc-badge.wc-at{ background:var(--wc-tag-me); }

/* ---------- Panneau ---------- */
.wc-panel{
  position:fixed; right:20px; bottom:calc(88px + env(safe-area-inset-bottom,0px)); z-index:48;
  width:380px; height:min(580px, calc(100vh - 120px)); display:flex; flex-direction:column;
  background:var(--wc-surface); border:1px solid var(--wc-border); border-radius:18px;
  box-shadow:0 24px 48px -12px rgba(15,23,42,.35); overflow:hidden;
}
.wc-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--wc-border); }
.wc-head-title{ flex:1; min-width:0; }
.wc-head-title b{ display:block; color:var(--wc-title); font-size:15px; }
.wc-head-title span{ display:block; color:var(--wc-muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wc-icon-btn{ border:none; background:transparent; color:var(--wc-muted); width:32px; height:32px; border-radius:8px; font-size:16px; }
.wc-icon-btn:hover{ background:var(--wc-surface-2); color:var(--wc-title); }

.wc-tabs{ display:flex; gap:4px; padding:8px 12px 0; }
.wc-tabs button{ flex:1; border:none; background:var(--wc-surface-2); color:var(--wc-muted); padding:7px; border-radius:8px; font-size:12px; font-weight:600; }
.wc-tabs button.wc-on{ background:var(--wc-accent); color:#fff; }

.wc-me{ display:flex; align-items:center; gap:8px; padding:8px 14px; font-size:12px; color:var(--wc-muted); border-bottom:1px solid var(--wc-border); }
.wc-me b{ color:var(--wc-title); }
.wc-link{ border:none; background:none; padding:0; color:var(--wc-accent); font-size:12px; font-weight:600; text-decoration:underline; }

/* ---------- Messages ---------- */
.wc-list{ flex:1; overflow-y:auto; padding:12px 12px 4px; display:flex; flex-direction:column; gap:8px; overscroll-behavior:contain; }
.wc-empty{ margin:auto; text-align:center; color:var(--wc-muted); font-size:13px; padding:20px; }
.wc-day{ align-self:center; font-size:11px; font-weight:600; color:var(--wc-muted); background:var(--wc-surface-2); padding:3px 10px; border-radius:10px; margin:4px 0; }
.wc-more{ align-self:center; }
.wc-msg{ display:flex; gap:8px; align-items:flex-end; max-width:92%; }
.wc-msg.wc-mine{ align-self:flex-end; flex-direction:row-reverse; }
.wc-avatar{ flex:none; width:28px; height:28px; border-radius:50%; color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.wc-bubble{ position:relative; min-width:0; background:var(--wc-surface-2); border:1px solid var(--wc-border); border-radius:14px 14px 14px 4px; padding:7px 10px; }
.wc-mine .wc-bubble{ background:var(--wc-mine); color:var(--wc-mine-text); border-color:transparent; border-radius:14px 14px 4px 14px; }
.wc-msg.wc-tagged-me .wc-bubble{ box-shadow:0 0 0 2px var(--wc-tag-me); }
.wc-meta{ display:flex; gap:6px; align-items:baseline; font-size:11px; color:var(--wc-muted); margin-bottom:2px; }
.wc-mine .wc-meta{ color:inherit; opacity:.75; }
.wc-meta b{ color:var(--wc-title); font-size:12px; }
.wc-mine .wc-meta b{ color:inherit; }
.wc-text{ white-space:pre-wrap; overflow-wrap:anywhere; }
.wc-deleted .wc-text{ font-style:italic; color:var(--wc-muted); }
.wc-tag{ background:var(--wc-tag); color:var(--wc-tag-text); border-radius:6px; padding:0 4px; font-weight:600; }
.wc-tag.wc-tag-me{ background:var(--wc-tag-me); color:#fff; }
.wc-del{ position:absolute; top:-8px; left:-8px; width:22px; height:22px; border-radius:50%; border:1px solid var(--wc-border); background:var(--wc-surface); color:var(--wc-muted); font-size:12px; line-height:1; display:none; }
.wc-msg:hover .wc-del, .wc-del:focus{ display:block; }
@media (hover:none){ .wc-mine .wc-del{ display:block; } }

/* Notes */
.wc-note .wc-bubble, .wc-mine.wc-note .wc-bubble{ background:var(--wc-note); color:var(--wc-note-text); border:1px solid var(--wc-note-border); border-left-width:4px; border-radius:10px; }
.wc-note-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }

/* ---------- Zone d'écriture ---------- */
.wc-compose{ position:relative; border-top:1px solid var(--wc-border); padding:8px 10px 10px; display:flex; flex-direction:column; gap:6px; }
.wc-kind{ display:flex; gap:4px; }
.wc-kind button{ border:1px solid var(--wc-border); background:var(--wc-surface); color:var(--wc-muted); border-radius:8px; padding:3px 10px; font-size:12px; font-weight:600; }
.wc-kind button.wc-on{ border-color:var(--wc-accent); color:var(--wc-accent); background:var(--wc-surface-2); }
.wc-kind button.wc-on[data-kind="note"]{ border-color:var(--wc-note-border); color:var(--wc-note-text); background:var(--wc-note); }
.wc-kind .wc-at-btn{ margin-left:auto; }
.wc-row{ display:flex; gap:8px; align-items:flex-end; }
.wc-input{
  flex:1; resize:none; max-height:120px; min-height:40px; padding:9px 12px; border-radius:12px;
  border:1px solid var(--wc-border); background:var(--wc-surface-2); color:var(--wc-text); font:inherit;
}
.wc-input:focus{ outline:none; border-color:var(--wc-accent); box-shadow:0 0 0 3px rgba(59,130,246,.2); }
.wc-send{ flex:none; height:40px; padding:0 14px; border:none; border-radius:12px; background:var(--wc-accent); color:#fff; font-weight:600; }
.wc-send:disabled{ opacity:.5; cursor:not-allowed; }
.wc-error{ color:var(--wc-red); font-size:12px; margin:0; }
.wc-locked{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-top:1px solid var(--wc-border); background:var(--wc-surface-2); font-size:13px; }
.wc-locked span{ flex:1; }
.wc-btn{ border:none; background:var(--wc-accent); color:#fff; border-radius:10px; padding:8px 12px; font-weight:600; font-size:13px; }
.wc-btn.wc-ghost{ background:var(--wc-surface-2); color:var(--wc-title); border:1px solid var(--wc-border); }

/* Suggestions @ */
.wc-suggest{ position:absolute; left:10px; right:10px; bottom:100%; margin-bottom:4px; max-height:200px; overflow-y:auto;
  background:var(--wc-surface); border:1px solid var(--wc-border); border-radius:12px; box-shadow:0 12px 24px -8px rgba(15,23,42,.3); padding:4px; }
.wc-suggest button{ display:flex; align-items:center; gap:8px; width:100%; border:none; background:none; color:var(--wc-text); padding:6px 8px; border-radius:8px; text-align:left; font-size:13px; }
.wc-suggest button.wc-on, .wc-suggest button:hover{ background:var(--wc-surface-2); }
.wc-suggest small{ color:var(--wc-muted); margin-left:auto; }

/* ---------- « Qui es-tu dans le groupe ? » ---------- */
.wc-picker{ position:absolute; inset:0; z-index:2; background:var(--wc-surface); display:flex; flex-direction:column; padding:18px; gap:10px; overflow-y:auto; }
.wc-picker h3{ margin:0; color:var(--wc-title); font-size:17px; }
.wc-picker p{ margin:0; color:var(--wc-muted); font-size:13px; }
.wc-who{ display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.wc-who button{ display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border:1px solid var(--wc-border); border-radius:12px; background:var(--wc-surface-2); color:var(--wc-text); text-align:left; }
.wc-who button:hover, .wc-who button:focus-visible{ border-color:var(--wc-accent); }
.wc-who button.wc-on{ border-color:var(--wc-accent); box-shadow:0 0 0 2px rgba(59,130,246,.3); }
.wc-who .wc-name{ flex:1; font-weight:600; color:var(--wc-title); }
.wc-who small{ color:var(--wc-muted); font-size:11px; text-align:right; }

/* ---------- 🔗 Liens vers une tâche / une colonne ---------- */
.wc-kind .wc-link-btn{ margin-left:auto; }
.wc-kind .wc-at-btn{ margin-left:0; }
.wc-chip{
  display:flex; align-items:center; gap:6px; max-width:100%; margin-top:6px; padding:4px 8px;
  border:1px solid var(--wc-border); border-radius:8px; background:var(--wc-surface); color:var(--wc-title);
  font-size:12px; font-weight:600; text-align:left;
}
.wc-chip span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.wc-chip small{ flex:none; color:var(--wc-muted); font-weight:500; }
button.wc-chip:hover{ border-color:var(--wc-accent); color:var(--wc-accent); }
.wc-chip.wc-gone{ opacity:.65; font-weight:500; }
.wc-chip.wc-gone span{ text-decoration:line-through; }
.wc-linkbar{ display:flex; align-items:center; gap:6px; padding:4px 4px 4px 10px; border-radius:10px; background:var(--wc-surface-2); border:1px dashed var(--wc-accent); font-size:12px; font-weight:600; color:var(--wc-title); }
.wc-linkbar span{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wc-linkbar .wc-icon-btn{ width:24px; height:24px; font-size:12px; }
.wc-linkpick{ position:absolute; left:10px; right:10px; bottom:100%; margin-bottom:4px; max-height:300px; display:flex; flex-direction:column;
  background:var(--wc-surface); border:1px solid var(--wc-border); border-radius:12px; box-shadow:0 12px 24px -8px rgba(15,23,42,.3); padding:6px; z-index:1; }
.wc-linksearch{ width:100%; padding:7px 10px; border-radius:8px; border:1px solid var(--wc-border); background:var(--wc-surface-2); color:var(--wc-text); font:inherit; font-size:13px; }
.wc-linksearch:focus{ outline:none; border-color:var(--wc-accent); }
.wc-linklist{ overflow-y:auto; margin-top:4px; }
.wc-linkgroup{ margin:6px 6px 2px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--wc-muted); }
.wc-linklist button{ display:flex; align-items:center; gap:8px; width:100%; border:none; background:none; color:var(--wc-text); padding:6px 8px; border-radius:8px; text-align:left; font-size:13px; }
.wc-linklist button:hover, .wc-linklist button:focus-visible{ background:var(--wc-surface-2); outline:none; }
.wc-linktitle{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wc-linklist small{ flex:none; color:var(--wc-muted); font-size:11px; }

/* Élément du site surligné quand on clique sur une étiquette du chat */
@keyframes wc-flash{ 0%,100%{ box-shadow:0 0 0 0 rgba(59,130,246,0); } 15%,60%{ box-shadow:0 0 0 4px var(--accent-color,#3b82f6), 0 0 24px 6px rgba(59,130,246,.45); } }
.wc-flash{ animation:wc-flash 2.8s ease-in-out; } /* ne change pas la position (barres du Gantt) */

/* Pendant un glisser-déposer du site : le chat s'efface et laisse passer la souris */
.wc-root.wc-dragging .wc-panel, .wc-root.wc-dragging .wc-fab{ opacity:.15; pointer-events:none; transition:opacity .15s; }
.wc-root.wc-peek .wc-panel{ opacity:.12; pointer-events:none; transition:opacity .2s; }

/* ---------- Téléphone : plein écran ---------- */
@media (max-width:600px){
  .wc-panel{ inset:0; width:auto; height:auto; border-radius:0; border:none; bottom:0; right:0;
    padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); z-index:49; }
  .wc-fab{ right:14px; bottom:calc(14px + env(safe-area-inset-bottom,0px)); }
  .wc-root.wc-open .wc-fab{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .wc-fab{ transition:none; } }