/* GoalFlow — messagerie entre amis, pensée d'abord pour le téléphone :
   plein écran, zones sûres, cibles tactiles de 44 px, texte à 16 px (pas de
   zoom à la saisie). Sur ordinateur, la même interface devient un panneau. */

.gf-chat-trigger{position:relative}
.gf-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--coral);color:#fff;font-size:10px;font-weight:800;font-style:normal;line-height:1}
.gf-chat-trigger .gf-badge{position:absolute;top:0;right:-3px;box-shadow:0 0 0 2px var(--surface)}
.gf-badge[hidden]{display:none}
html.gf-chat-open,html.gf-chat-open body{overflow:hidden}

/* Au-dessus des fenêtres (100) : on ouvre une discussion depuis la fiche d'un objectif. */
.gf-chat{position:fixed;inset:0;z-index:110;display:flex;flex-direction:column;height:100%;height:100dvh;background:var(--surface);color:var(--ink);animation:gf-chat-up .26s var(--ease-out)}
@keyframes gf-chat-up{from{transform:translateY(28px);opacity:.4}to{transform:none;opacity:1}}
.gf-chat [hidden]{display:none!important}

/* ---- En-tête ------------------------------------------------------------------ */
.gf-chat-head{position:relative;z-index:2;display:flex;align-items:center;gap:2px;min-height:62px;padding:calc(8px + env(safe-area-inset-top,0px)) 6px 8px;border-bottom:1px solid var(--line);background:var(--surface)}
.gf-chat-icon{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:transparent;color:var(--ink-soft);transition:background .15s}
.gf-chat-icon:hover,.gf-chat-icon:active{background:var(--surface-soft)}
.gf-chat-title{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:0 6px}
.gf-chat-title>div{display:grid;gap:1px;min-width:0}
.gf-chat-title strong{overflow:hidden;font-size:18px;font-weight:800;letter-spacing:-.03em;text-overflow:ellipsis;white-space:nowrap}
.gf-chat-title.is-person strong{font-size:16px;font-weight:750;letter-spacing:-.01em}
.gf-chat-title span{overflow:hidden;color:var(--muted);font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.gf-chat-title span.is-online{color:var(--mint);font-weight:700}

/* ---- Vues ---------------------------------------------------------------------- */
.gf-chat-view{position:relative;display:flex;flex-direction:column;flex:1;min-height:0}
.gf-chat-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}

/* Liste des discussions */
.gf-chat-search{display:flex;align-items:center;gap:8px;height:44px;margin:12px 16px 2px;padding:0 14px;border-radius:14px;background:var(--surface-soft);color:var(--muted)}
.gf-chat-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:16px}
.gf-chat-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.gf-chat-label{margin:16px 20px 6px;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.gf-chat-contact-row{display:flex;gap:2px;overflow-x:auto;padding:2px 10px 6px;scrollbar-width:none}
.gf-chat-contact-row::-webkit-scrollbar{display:none}
.gf-chat-contact{flex:none;display:grid;justify-items:center;gap:6px;width:74px;padding:8px 2px;border-radius:16px;background:transparent;color:var(--ink-soft);font-size:12px;font-weight:650}
.gf-chat-contact>span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gf-chat-contact:hover,.gf-chat-contact:active{background:var(--surface-soft)}
.gf-chat-conversations{margin:4px 0 0;padding:0 8px;list-style:none}
.gf-chat-item{display:flex;align-items:center;gap:13px;width:100%;min-height:74px;padding:10px 10px;border-radius:18px;background:transparent;color:inherit;text-align:left;transition:background .15s}
.gf-chat-item:hover,.gf-chat-item:active{background:var(--surface-soft)}
.gf-chat-item-text{display:grid;gap:3px;flex:1;min-width:0}
.gf-chat-item-text strong{overflow:hidden;font-size:15px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}
.gf-chat-item-text span{overflow:hidden;color:var(--muted);font-size:14px;text-overflow:ellipsis;white-space:nowrap}
.gf-chat-item.is-unread .gf-chat-item-text strong{font-weight:800}
.gf-chat-item.is-unread .gf-chat-item-text span{color:var(--ink);font-weight:600}
.gf-chat-item-side{display:grid;justify-items:end;align-content:center;gap:6px;flex:none}
.gf-chat-item-side time{color:var(--muted);font-size:12px}
.gf-chat-item.is-unread .gf-chat-item-side time{color:var(--violet);font-weight:750}
.gf-chat-empty-state{display:grid;justify-items:center;gap:10px;margin:auto;padding:36px 28px;text-align:center}
.gf-chat-illustration{display:grid;place-items:center;width:76px;height:76px;margin-bottom:6px;border-radius:26px;background:var(--violet-soft);color:var(--violet)}
.gf-chat-empty-state strong{font-size:19px;letter-spacing:-.02em}
.gf-chat-empty-state p{max-width:290px;margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.gf-chat-empty-state .primary-button{min-height:46px;margin-top:8px;padding:0 22px;font-size:14px;border-radius:14px}
.gf-chat-no-result{margin:22px 20px;color:var(--muted);font-size:14px;text-align:center}

/* Nouveau message */
.gf-chat-new{display:flex;align-items:center;gap:8px;margin:14px 16px 0;padding:6px 6px 6px 16px;border:1.5px solid var(--line);border-radius:16px;transition:border-color .15s}
.gf-chat-new:focus-within{border-color:var(--violet)}
.gf-chat-new label{color:var(--muted);font-size:15px;font-weight:700}
.gf-chat-new input{flex:1;min-width:0;height:44px;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:16px}
.gf-chat-new .primary-button{min-height:44px;padding:0 16px;border-radius:12px;box-shadow:none;font-size:14px}
.gf-chat-hint{margin:10px 20px 0;color:var(--muted);font-size:13px;line-height:1.5}
.gf-chat-people{display:grid;margin:0;padding:0 8px;list-style:none}
.gf-chat-person{display:flex;align-items:center;gap:13px;width:100%;min-height:64px;padding:8px 10px;border-radius:16px;background:transparent;color:inherit;text-align:left}
.gf-chat-person:hover,.gf-chat-person:active{background:var(--surface-soft)}
.gf-chat-person-text{display:grid;gap:2px;min-width:0}
.gf-chat-person-text strong{font-size:15px;font-weight:650}
.gf-chat-person-text span{color:var(--muted);font-size:13px}

/* ---- Discussion ------------------------------------------------------------------ */
.gf-chat-thread{background:var(--surface-soft)}
.gf-chat-messages{display:flex;flex-direction:column;flex:1;min-height:0;margin:0;padding:10px 10px 12px;overflow-y:auto;list-style:none;overscroll-behavior:contain}
.gf-chat-day{align-self:center;margin:16px 0 8px;padding:5px 12px;border-radius:999px;background:var(--surface);color:var(--muted);font-size:12px;font-weight:700;box-shadow:0 1px 2px #2c224c14}
.gf-chat-unread{display:flex;align-items:center;gap:10px;margin:12px 6px 4px;color:var(--coral);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.gf-chat-unread::before,.gf-chat-unread::after{content:"";flex:1;height:1px;background:currentColor;opacity:.35}
.gf-msg{display:flex;align-items:flex-end;gap:6px;max-width:84%;margin-top:10px}
.gf-msg.joins-prev{margin-top:2px}
.gf-msg.is-mine{align-self:flex-end;flex-direction:row-reverse}
.gf-avatar-xs{width:28px;height:28px;font-size:9px}
.gf-avatar-xl{width:76px;height:76px;font-size:24px}
.gf-avatar-spacer{flex:none;width:28px}
.gf-msg-column{display:grid;justify-items:start;gap:3px;min-width:0}
.gf-msg.is-mine .gf-msg-column{justify-items:end}
.gf-bubble{max-width:100%;padding:9px 14px;border-radius:21px;background:var(--surface);color:var(--ink);font-size:16px;line-height:1.38;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:0 1px 1px #2c224c12;-webkit-user-select:text;user-select:text;-webkit-touch-callout:none}
.gf-msg:not(.is-mine).joins-next .gf-bubble{border-bottom-left-radius:7px}
.gf-msg:not(.is-mine).joins-prev .gf-bubble{border-top-left-radius:7px}
.gf-msg.is-mine .gf-bubble{background:var(--violet);color:#fff;box-shadow:none}
.gf-msg.is-mine.joins-next .gf-bubble{border-bottom-right-radius:7px}
.gf-msg.is-mine.joins-prev .gf-bubble{border-top-right-radius:7px}
.gf-bubble a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.gf-msg time{padding:0 8px;color:var(--muted);font-size:11px}
.gf-msg.is-pending .gf-bubble{opacity:.72}
.gf-msg.is-failed .gf-bubble{background:var(--coral-soft);color:var(--coral);cursor:pointer}
.gf-msg.is-failed time{color:var(--coral);font-weight:700}
.gf-msg.is-copied .gf-bubble{animation:gf-copied .5s ease-out}
@keyframes gf-copied{40%{transform:scale(.96)}}

.gf-chat-start{display:grid;justify-items:center;gap:8px;margin:auto 0;padding:28px 12px;text-align:center}
.gf-chat-start strong{margin-top:6px;font-size:18px;letter-spacing:-.02em}
.gf-chat-start p{max-width:280px;margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.gf-chat-starters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px}
.gf-chat-starters button{min-height:40px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-size:14px;font-weight:600}
.gf-chat-starters button:active{background:var(--violet-soft)}

.gf-chat-jump{position:absolute;z-index:2;left:50%;bottom:76px;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 16px;border-radius:999px;background:var(--ink);color:var(--surface);font-size:13px;font-weight:750;box-shadow:var(--shadow-strong);transform:translateX(-50%);animation:gf-chat-jump .2s var(--ease-out)}
@keyframes gf-chat-jump{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translateX(-50%)}}

.gf-chat-composer{display:flex;align-items:flex-end;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--surface)}
.gf-chat-composer textarea{flex:1;min-height:46px;max-height:144px;padding:12px 18px;border:1.5px solid var(--line);border-radius:23px;outline:0;background:var(--surface-soft);color:var(--ink);font:inherit;font-size:16px;line-height:1.3;resize:none;transition:border-color .15s}
.gf-chat-composer textarea:focus{border-color:var(--violet)}
.gf-send{flex:none;display:grid;place-items:center;width:46px;height:46px;padding:0;border-radius:50%;background:var(--violet);color:#fff;transition:transform .15s,opacity .15s}
.gf-send:disabled{opacity:.35;transform:scale(.9);cursor:default}
.gf-send:not(:disabled):active{transform:scale(.88)}
.gf-chat-error{margin:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--coral-soft);color:var(--coral);font-size:13px;font-weight:600}

/* « Écrire » à côté d'un participant, dans la fiche d'un objectif partagé. */
.gf-member-action{margin:0;padding:4px 8px;font-size:11px}

/* ---- Ordinateur : panneau latéral --------------------------------------------- */
@media (min-width:701px){
  .gf-chat{inset:0 0 0 auto;width:400px;height:100%;border-left:1px solid var(--line);box-shadow:var(--shadow-strong);animation-name:gf-chat-side}
  html.gf-chat-open,html.gf-chat-open body{overflow:visible}
  .gf-bubble{font-size:14px}
  .gf-chat-item{min-height:66px}
}
@keyframes gf-chat-side{from{transform:translateX(28px);opacity:.5}to{transform:none;opacity:1}}

/* En-tête du téléphone : place pour la messagerie. Partager et Installer restent
   dans le menu latéral et les réglages. */
/* Bouton « + » flottant : nouvelle discussion, à portée du pouce */
.gf-chat-fab{position:absolute;z-index:3;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));display:grid;place-items:center;width:58px;height:58px;border-radius:20px;background:var(--violet);color:#fff;box-shadow:0 12px 24px #7661dc4d;transition:transform .15s var(--ease-out),box-shadow .15s;animation:gf-chat-fab .22s var(--ease-out)}
.gf-chat-fab:active{transform:scale(.94);box-shadow:0 6px 14px #7661dc40}
.gf-chat-fab:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
@keyframes gf-chat-fab{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
[data-view="list"] .gf-chat-scroll{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}

@media (max-width:700px){
  .topbar .gf-share-trigger,.topbar .install-button{display:none!important}
  .gf-chat-head-new{display:none!important}
}
@media (min-width:701px){
  .gf-chat-fab{display:none!important}
}
