/* optionnels/synchro-supabase/discussion.css — discussion des tableaux collaboratifs (discussion.js)
   Bulle et cloche de la barre du haut, panneau de discussion, fiche (assignées, commentaires), repères des cartes,
   menu des notifications. Chargée après profil.css (pastilles des membres). */

 .discussion-avatar,.card-discussion-avatar{font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;}

 /* ---- Barre du haut ---- */
 .discussion-boutons{display:flex; align-items:center; gap:calc(3px * var(--ui-scale-factor));}
 .discussion-boutons [hidden]{display:none;}
 .topbar .discussion-btn{position:relative;}
 .discussion-compteur{
 position:absolute; top:calc(-3px * var(--ui-scale-factor)); right:calc(-3px * var(--ui-scale-factor));
 min-width:calc(13px * var(--ui-scale-factor)); height:calc(13px * var(--ui-scale-factor)); padding:0 calc(3px * var(--ui-scale-factor)); box-sizing:border-box;
 border-radius:calc(7px * var(--ui-scale-factor)); background:#ff5d6c; color:#fff; box-shadow:0 0 0 calc(1.5px * var(--ui-scale-factor)) var(--surface);
 font:700 calc(8px * var(--ui-scale-factor))/calc(13px * var(--ui-scale-factor)) system-ui; text-align:center; pointer-events:none;
 }
 .discussion-compteur[hidden]{display:none;}

 /* ---- Pastille d'un membre (messages, notifications, fiche) ---- */
 .discussion-avatar{
 display:inline-flex; align-items:center; justify-content:center; flex:none; border-radius:50%;
 width:round(calc(20px * var(--ui-scale-factor)),1px); height:round(calc(20px * var(--ui-scale-factor)),1px);
 background:var(--profil-couleur,#7d8799); color:#fff; font-weight:700; font-size:calc(9px * var(--ui-scale-factor)); line-height:1; text-shadow:0 0 calc(2px * var(--ui-scale-factor)) rgba(0,0,0,.4);
 }
 .discussion-avatar.a-smiley{background:color-mix(in srgb,var(--profil-couleur,#7d8799) 30%,var(--surface-2)); box-shadow:inset 0 0 0 var(--anneau,1.5px) var(--profil-couleur,#7d8799); text-shadow:none; font-size:calc(11px * var(--ui-scale-factor));}
 .discussion-vide{margin:0; padding:calc(8px * var(--ui-scale-factor)) calc(4px * var(--ui-scale-factor)); color:var(--text-faint); font-size:calc(9.5px * var(--ui-scale-factor));}
 .discussion-lien{border:0; padding:0; background:none; color:var(--accent); font:600 calc(9px * var(--ui-scale-factor)) system-ui; cursor:pointer;}
 .discussion-lien:hover{text-decoration:underline;}

 /* ---- Fil de messages ---- */
 .discussion-fil{display:flex; flex-direction:column; gap:calc(8px * var(--ui-scale-factor)); overflow-y:auto; overscroll-behavior:contain;}
 .discussion-msg{display:flex; gap:calc(7px * var(--ui-scale-factor)); align-items:flex-start;}
 .discussion-msg-corps{min-width:0; flex:1 1 auto;}
 .discussion-msg-tete{display:flex; align-items:baseline; gap:calc(6px * var(--ui-scale-factor));}
 .discussion-msg-nom{font-weight:700; font-size:calc(9.5px * var(--ui-scale-factor)); color:var(--text);}
 .discussion-msg-heure{font-size:calc(8.5px * var(--ui-scale-factor)); color:var(--text-faint);}
 .discussion-effacer{margin-left:auto; border:0; background:none; padding:0 calc(3px * var(--ui-scale-factor)); color:var(--text-faint); font-size:calc(12px * var(--ui-scale-factor)); line-height:1; cursor:pointer; opacity:0;}
 .discussion-msg:hover .discussion-effacer,.discussion-effacer:focus-visible{opacity:1;}
 .discussion-effacer:hover{color:var(--text);}
 .discussion-msg-texte{margin-top:calc(1.5px * var(--ui-scale-factor)); color:var(--text-dim); font-size:calc(10px * var(--ui-scale-factor)); line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere;}
 .discussion-cite{color:var(--accent); font-weight:650;}
 .discussion-cite.moi{padding:0 calc(2px * var(--ui-scale-factor)); border-radius:calc(3px * var(--ui-scale-factor)); background:color-mix(in srgb,var(--accent) 18%,transparent);}

 /* ---- Zone de saisie et liste des mentions ---- */
 .discussion-saisie{position:relative; display:flex; align-items:flex-end; gap:calc(6px * var(--ui-scale-factor));}
 .discussion-saisie textarea{
 flex:1 1 auto; min-width:0; resize:none; box-sizing:border-box; min-height:calc(27px * var(--ui-scale-factor)); max-height:calc(120px * var(--ui-scale-factor));
 padding:calc(6px * var(--ui-scale-factor)) calc(7.5px * var(--ui-scale-factor)); border:calc(1px * var(--ui-scale-factor)) solid var(--border); border-radius:calc(6px * var(--ui-scale-factor));
 background:var(--surface-2); color:var(--text); font:calc(10px * var(--ui-scale-factor))/1.4 system-ui;
 }
 .discussion-saisie textarea:focus{outline:none; border-color:color-mix(in srgb,var(--accent) 70%,var(--border));}
 .discussion-envoyer{flex:none; height:calc(27px * var(--ui-scale-factor));}
 .discussion-mentions{
 position:absolute; left:0; bottom:calc(100% + calc(4px * var(--ui-scale-factor))); z-index:10; display:flex; flex-direction:column;
 min-width:calc(170px * var(--ui-scale-factor)); padding:calc(3px * var(--ui-scale-factor)); background:var(--surface); border:calc(1px * var(--ui-scale-factor)) solid var(--border);
 border-radius:calc(7px * var(--ui-scale-factor)); box-shadow:0 calc(8px * var(--ui-scale-factor)) calc(22px * var(--ui-scale-factor)) rgba(0,0,0,.4);
 }
 .discussion-mentions[hidden]{display:none;}
 .discussion-mention{display:flex; align-items:center; gap:calc(6px * var(--ui-scale-factor)); padding:calc(4px * var(--ui-scale-factor)) calc(6px * var(--ui-scale-factor)); border:0; border-radius:calc(5px * var(--ui-scale-factor)); background:none; color:var(--text); font:500 calc(9.5px * var(--ui-scale-factor)) system-ui; text-align:left; cursor:pointer;}
 .discussion-mention.actif,.discussion-mention:hover{background:var(--surface-3);}

 /* ---- Panneau de discussion du tableau (à droite, sous la barre du haut) ---- */
 .discussion-panneau{
 position:fixed; right:0; bottom:0; z-index:900; display:flex; flex-direction:column; gap:calc(8px * var(--ui-scale-factor));
 width:min(calc(300px * var(--ui-scale-factor)),100vw); box-sizing:border-box; padding:calc(10px * var(--ui-scale-factor));
 background:var(--surface); border-left:calc(1px * var(--ui-scale-factor)) solid var(--border); box-shadow:calc(-10px * var(--ui-scale-factor)) 0 calc(28px * var(--ui-scale-factor)) rgba(0,0,0,.35);
 animation:discussionEntree .16s ease-out;
 }
 .discussion-panneau[hidden]{display:none;}
 @keyframes discussionEntree{from{opacity:0; transform:translateX(calc(12px * var(--ui-scale-factor)));}to{opacity:1; transform:none;}}
 .discussion-panneau-tete{display:flex; align-items:flex-start; justify-content:space-between; gap:calc(8px * var(--ui-scale-factor)); padding-bottom:calc(6px * var(--ui-scale-factor)); border-bottom:calc(1px * var(--ui-scale-factor)) solid var(--border-soft);}
 .discussion-panneau-tete h2{margin:0; font-size:calc(12px * var(--ui-scale-factor)); color:var(--text);}
 .discussion-panneau-titre{display:block; margin-top:calc(1.5px * var(--ui-scale-factor)); color:var(--text-faint); font-size:calc(9px * var(--ui-scale-factor)); overflow-wrap:anywhere;}
 .discussion-panneau .discussion-fil{flex:1 1 auto; min-height:0; padding-right:calc(2px * var(--ui-scale-factor));}
 @media (max-width:700px){ .discussion-panneau{width:100vw; border-left:0;} }

 /* ---- Fiche d'une carte : personnes assignées, commentaires ---- */
 .discussion-assignes-rangee{display:flex; flex-wrap:wrap; gap:calc(4px * var(--ui-scale-factor));}
 .discussion-assigne{
 display:inline-flex; align-items:center; gap:calc(4px * var(--ui-scale-factor)); max-width:100%; padding:calc(2px * var(--ui-scale-factor)) calc(7px * var(--ui-scale-factor)) calc(2px * var(--ui-scale-factor)) calc(2px * var(--ui-scale-factor));
 border:calc(1px * var(--ui-scale-factor)) solid var(--border-soft); border-radius:calc(12px * var(--ui-scale-factor)); background:transparent; color:var(--text-dim);
 font:500 calc(9px * var(--ui-scale-factor)) system-ui; cursor:pointer; opacity:.6;
 }
 .discussion-assigne .discussion-avatar{width:round(calc(16px * var(--ui-scale-factor)),1px); height:round(calc(16px * var(--ui-scale-factor)),1px); font-size:calc(8px * var(--ui-scale-factor));}
 .discussion-assigne span:last-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
 .discussion-assigne:hover{opacity:1;}
 .discussion-assigne.actif{opacity:1; color:var(--text); border-color:color-mix(in srgb,var(--accent) 60%,var(--border)); background:color-mix(in srgb,var(--accent) 14%,transparent);}
 .discussion-commentaires{display:flex; flex-direction:column; gap:calc(6px * var(--ui-scale-factor)); padding:calc(8px * var(--ui-scale-factor)) calc(9px * var(--ui-scale-factor)); border-top:calc(1px * var(--ui-scale-factor)) solid var(--border-soft);}
 .discussion-commentaires h3{margin:0; font-size:calc(10px * var(--ui-scale-factor)); color:var(--text);}
 .discussion-commentaires .discussion-fil{max-height:calc(170px * var(--ui-scale-factor));}

 /* ---- Sur une carte : nombre de commentaires et personnes assignées ---- */
 .card-discussion{display:flex; align-items:center; justify-content:flex-end; gap:calc(2px * var(--ui-scale-factor)); margin-top:calc(4px * var(--ui-scale-factor)); pointer-events:none;}
 .card-discussion-commentaires{display:inline-flex; align-items:center; gap:calc(2px * var(--ui-scale-factor)); margin-right:auto; color:var(--text-faint); font:600 calc(8.5px * var(--ui-scale-factor)) system-ui;}
 .card-discussion-commentaires .tb-icone{width:calc(10px * var(--ui-scale-factor)); height:calc(10px * var(--ui-scale-factor));}
 .card-discussion .discussion-avatar{width:round(calc(15px * var(--ui-scale-factor)),1px); height:round(calc(15px * var(--ui-scale-factor)),1px); font-size:calc(7.5px * var(--ui-scale-factor)); box-shadow:0 0 0 round(calc(1.5px * var(--ui-scale-factor)),1px) var(--surface-2);}
 .card-discussion .discussion-avatar.a-smiley{font-size:calc(9px * var(--ui-scale-factor)); box-shadow:inset 0 0 0 var(--anneau,1.5px) var(--profil-couleur,#7d8799),0 0 0 round(calc(1.5px * var(--ui-scale-factor)),1px) var(--surface-2);}
 .card-discussion-plus{color:var(--text-faint); font:600 calc(8px * var(--ui-scale-factor)) system-ui; margin-left:calc(2px * var(--ui-scale-factor));}

 /* ---- Menu des notifications ---- */
 .discussion-notifs{width:min(calc(300px * var(--ui-scale-factor)),calc(100vw - calc(16px * var(--ui-scale-factor)))); max-height:min(calc(380px * var(--ui-scale-factor)),70vh); overflow-y:auto;}
 .discussion-notifs-tete{display:flex; align-items:center; justify-content:space-between; gap:calc(8px * var(--ui-scale-factor)); padding:calc(4px * var(--ui-scale-factor)) calc(6px * var(--ui-scale-factor)) calc(6px * var(--ui-scale-factor)); font:700 calc(10px * var(--ui-scale-factor)) system-ui; color:var(--text);}
 .topbar-menu-item.discussion-notif{align-items:flex-start; white-space:normal;}
 .discussion-notif .discussion-avatar{margin-top:calc(1px * var(--ui-scale-factor));}
 .discussion-notif-texte{display:flex; flex-direction:column; gap:calc(2px * var(--ui-scale-factor)); min-width:0; color:var(--text-dim); font-weight:500; line-height:1.35;}
 .discussion-notif.non-lue .discussion-notif-texte > span:first-child{color:var(--text); font-weight:650;}
 .discussion-notif.non-lue::after{content:''; flex:none; align-self:center; width:round(calc(6px * var(--ui-scale-factor)),1px); height:round(calc(6px * var(--ui-scale-factor)),1px); border-radius:50%; background:var(--accent);}
 .discussion-notif-extrait{color:var(--text-faint); font-size:calc(9px * var(--ui-scale-factor)); overflow-wrap:anywhere;}
 .discussion-notif-heure{color:var(--text-faint); font-size:calc(8.5px * var(--ui-scale-factor));}
 .topbar-menu-item.discussion-notif > .discussion-avatar{flex:none;}
 .topbar-menu-item.discussion-notif > .discussion-notif-texte{flex:1 1 auto;}

/* Rappel d'échéance dans la cloche : pastille calendrier à la place de l'avatar de l'auteur */
.discussion-rappel-icone{background:color-mix(in srgb,#e3b155 26%,var(--surface-2)); color:#e3b155;}
.discussion-rappel-icone svg{width:round(calc(12px * var(--ui-scale-factor)),1px); height:round(calc(12px * var(--ui-scale-factor)),1px);}