/* FK chat : la conversation « Let's talk » (note vocale ou message), partagée par /contact/ (dans la page)
   et /links/ (encart qui monte par-dessus la page). Fontes et couleurs suivent la page hôte quand elle
   déclare --display / --serif / --sans (site) ou --display / --text (/links/), sinon celles du site. */
.fkc{
  --fkc-ink:#F5F0E8; --fkc-gold:#C9A96E; --fkc-dark:#0A0908;
  --fkc-line:rgba(201,169,110,.2); --fkc-soft:rgba(245,240,232,.55); --fkc-faint:rgba(245,240,232,.4);
  --fkc-fk:rgba(245,240,232,.07); --fkc-me:rgba(201,169,110,.16);
  /* tints, one name each: a host page can restate them for its own ground */
  --fkc-wash:rgba(245,240,232,.02); --fkc-hair:rgba(201,169,110,.15); --fkc-edge:rgba(201,169,110,.4); --fkc-dim:rgba(245,240,232,.45); --fkc-bar:rgba(245,240,232,.35); --fkc-time:rgba(245,240,232,.6); --fkc-well:rgba(245,240,232,.05); --fkc-rule:rgba(201,169,110,.25); --fkc-hint:rgba(245,240,232,.25); --fkc-hint2:rgba(245,240,232,.3); --fkc-edge2:rgba(201,169,110,.35); --fkc-err-c:#E3A28A;
  --fkc-display:var(--display,'The Foriene',Georgia,serif);
  --fkc-serif:var(--serif,var(--display,'Cormorant Garamond',Georgia,serif));
  --fkc-sans:var(--sans,var(--text,'Outfit',sans-serif));
  display:flex; flex-direction:column; width:100%; min-width:0; max-width:100%; color:var(--fkc-ink);
  border:1px solid var(--fkc-line); background:var(--fkc-wash);
  font-family:var(--fkc-sans);
}
.fkc *,.fkc *::before,.fkc *::after{box-sizing:border-box}
.fkc [hidden]{display:none !important}

.fkc-head{display:flex; align-items:center; gap:.9rem; padding:1rem 1.2rem; border-bottom:1px solid var(--fkc-hair)}
.fkc-avatar{width:40px; height:40px; border-radius:50%; object-fit:contain; padding:8px; border:1px solid var(--fkc-edge); flex:none}
.fkc-who{display:flex; flex-direction:column; line-height:1.3; flex:1; min-width:0}
.fkc-who strong{font-family:var(--fkc-serif); font-size:1.25rem; font-weight:500}
.fkc-who span{font-size:.72rem; font-weight:300; color:var(--fkc-gold)}
.fkc-close{flex:none; width:44px; height:44px; border:0; background:none; color:var(--fkc-soft); cursor:pointer; display:grid; place-items:center; margin-right:-.5rem}
.fkc-close:hover{color:var(--fkc-ink)}

.fkc-thread{display:flex; flex-direction:column; gap:.7rem; padding:1.4rem 1.2rem; min-height:300px; max-height:min(56vh,520px); overflow-y:auto; scrollbar-width:none; overscroll-behavior:contain}
.fkc-thread::-webkit-scrollbar{display:none}
.fkc-msg{max-width:84%; padding:.8rem 1rem .55rem; font-size:.9rem; font-weight:300; line-height:1.6; opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease; overflow-wrap:anywhere}
.fkc-msg.in{opacity:1; transform:none}
.fkc-meta{display:block; margin-top:.25rem; font-size:.62rem; letter-spacing:.04em; color:var(--fkc-faint)}
.fkc-fk{align-self:flex-start; background:var(--fkc-fk); border-radius:2px 14px 14px 14px}
.fkc-lead{font-family:var(--fkc-display); font-size:1.5rem; line-height:1.1; text-transform:uppercase; display:block; margin-bottom:.15rem}
.fkc-lead em{text-transform:none; color:var(--fkc-gold)}
/* the display faces draw a poor apostrophe in capitals (Foriene and Bodoni alike): a text serif draws it */
.fkc-ap{font-family:'Cormorant Garamond',Georgia,serif}
.fkc :focus-visible{outline:1px solid var(--fkc-gold); outline-offset:2px}
.fkc :focus:not(:focus-visible){outline:none}
.fkc input:focus-visible,.fkc textarea:focus-visible{outline:none} /* their gold underline already marks the focus */
.fkc-me{align-self:flex-end; background:var(--fkc-me); border-radius:14px 2px 14px 14px}
.fkc-me .fkc-meta{text-align:right}
.fkc-typing{align-self:flex-start; display:flex; gap:4px; padding:.9rem 1rem; background:var(--fkc-fk); border-radius:2px 14px 14px 14px}
.fkc-typing i{width:6px; height:6px; border-radius:50%; background:var(--fkc-dim); animation:fkcDot 1.1s infinite ease-in-out}
.fkc-typing i:nth-child(2){animation-delay:.15s}
.fkc-typing i:nth-child(3){animation-delay:.3s}
@keyframes fkcDot{0%,80%,100%{opacity:.3; transform:translateY(0)} 40%{opacity:1; transform:translateY(-3px)}}

/* a voice bubble */
.fkc-vb{display:flex; align-items:center; gap:.8rem; min-width:220px}
.fkc-play{flex:none; width:36px; height:36px; border-radius:50%; border:0; background:var(--fkc-gold); color:var(--fkc-dark); display:grid; place-items:center; cursor:pointer}
.fkc-play .i-pause{display:none}
.fkc-vb.playing .i-play{display:none}
.fkc-vb.playing .i-pause{display:block}
.fkc-wave{flex:1 1 0; width:0; display:flex; align-items:center; gap:2px; height:28px; min-width:0}
.fkc-wave span{flex:1; background:var(--fkc-bar); border-radius:1px}
.fkc-wave span.on{background:var(--fkc-gold)}
.fkc-vtime{font-size:.72rem; color:var(--fkc-time); font-variant-numeric:tabular-nums}

/* the « where should I reply » card */
.fkc-card{max-width:100%; width:100%; align-self:stretch; background:var(--fkc-well); border:1px solid var(--fkc-line); border-radius:14px; padding:1rem 1.1rem 1.1rem}
.fkc-grid{display:grid; grid-template-columns:1fr 1fr; gap:.2rem 1rem; margin-top:.4rem}
.fkc-f{display:flex; flex-direction:column}
.fkc-grid label{font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--fkc-gold); margin:.8rem 0 .2rem}
.fkc-grid input{width:100%; background:transparent; border:0; border-bottom:1px solid var(--fkc-rule); border-radius:0; padding:.6rem 0; font-family:var(--fkc-sans); font-size:16px; font-weight:300; color:var(--fkc-ink); outline:none}
.fkc-grid input:focus{border-color:var(--fkc-gold)}
.fkc-grid input::placeholder{color:var(--fkc-hint)}
/* what the note already said, folded under one line the couple can open */
.fkc-heard{display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin:-.1rem 0 .2rem; padding-bottom:.7rem; border-bottom:1px solid var(--fkc-hair); font-size:.85rem; font-weight:300; color:var(--fkc-ink)}
.fkc-heard span{min-width:0; overflow-wrap:anywhere}
.fkc-edit{flex:none; min-height:44px; padding:0 .2rem; background:none; border:0; font-family:var(--fkc-sans); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--fkc-gold); cursor:pointer}
.fkc-edit:hover{opacity:.75}
.fkc-planner{margin-top:1rem}
.fkc-plabel{display:block; font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--fkc-gold); margin-bottom:.55rem}
.fkc-pills{display:flex; flex-wrap:wrap; gap:.5rem}
.fkc-pill{min-height:44px; padding:0 1.1rem; background:transparent; border:1px solid var(--fkc-edge2); color:var(--fkc-ink); font-family:var(--fkc-sans); font-size:.7rem; font-weight:300; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; transition:background .2s, color .2s, border-color .2s}
.fkc-pill[aria-checked="true"]{background:var(--fkc-gold); border-color:var(--fkc-gold); color:var(--fkc-dark)}
.fkc-hp{position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0}
.fkc-consent{display:flex; gap:.7rem; align-items:flex-start; margin-top:1rem; font-size:.72rem; font-weight:300; line-height:1.55; color:var(--fkc-soft); cursor:pointer}
.fkc-consent input{flex:none; width:18px; height:18px; margin-top:.1rem; accent-color:var(--fkc-gold)}
.fkc-send{margin-top:1.1rem; width:100%; min-height:48px; border:0; background:var(--fkc-gold); color:var(--fkc-dark); font-family:var(--fkc-sans); font-size:.65rem; font-weight:500; letter-spacing:.3em; text-transform:uppercase; cursor:pointer}
.fkc-send[disabled]{opacity:.6; cursor:wait}
.fkc-err{margin-top:.6rem; font-size:.75rem; color:var(--fkc-err-c); min-height:1em}

/* the composer, as in a messaging app */
.fkc-compose{min-width:0; display:flex; align-items:flex-end; gap:.7rem; padding:.8rem 1rem; border-top:1px solid var(--fkc-hair)}
.fkc-compose.off{opacity:.35; pointer-events:none}
.fkc-type{flex:1; min-width:0}
.fkc-type textarea{display:block; width:100%; resize:none; max-height:120px; background:var(--fkc-well); border:1px solid var(--fkc-line); border-radius:22px; padding:.75rem 1rem; font-family:var(--fkc-sans); font-size:16px; font-weight:300; line-height:1.4; color:var(--fkc-ink); outline:none}
.fkc-type textarea:focus{border-color:var(--fkc-gold)}
.fkc-type textarea::placeholder{color:var(--fkc-hint2)}
.fkc-main{flex:none; width:48px; height:48px; border-radius:50%; border:0; background:var(--fkc-gold); color:var(--fkc-dark); display:grid; place-items:center; cursor:pointer; transition:transform .2s}
.fkc-main:active{transform:scale(.94)}
.fkc-main .i-send{display:none}
.fkc-compose.has-text .i-mic,.fkc-compose.recording .i-mic{display:none}
.fkc-compose.has-text .i-send,.fkc-compose.recording .i-send{display:block}
.fkc-rec{flex:1; display:flex; align-items:center; gap:.7rem; min-width:0; height:48px}
.fkc-cancel{flex:none; width:44px; height:44px; border:0; background:none; color:var(--fkc-time); cursor:pointer; display:grid; place-items:center}
.fkc-dot{flex:none; width:9px; height:9px; border-radius:50%; background:#D9534F; animation:fkcPulse 1.2s infinite}
@keyframes fkcPulse{50%{opacity:.25}}
.fkc-rtime{flex:none; font-size:.85rem; font-variant-numeric:tabular-nums}
.fkc-meter{flex:1 1 0; width:0; display:flex; align-items:center; gap:2px; height:26px; min-width:0; overflow:hidden}
.fkc-meter span{flex:none; width:3px; background:var(--fkc-gold); border-radius:1px}
.fkc-rmax{flex:none; font-size:.72rem; color:var(--fkc-bar)}
.fkc-note{padding:0 1.2rem 1rem; font-size:.7rem; font-weight:300; line-height:1.6; color:var(--fkc-faint)}
.fkc-note a{color:var(--fkc-gold)}
.fkc-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- the sheet: the same conversation rising over another page ---------- */
.fkc-sheet{position:fixed; inset:0; z-index:10050; display:flex; align-items:flex-end; justify-content:flex-end; padding:24px; pointer-events:none}
.fkc-sheet::before{content:''; position:absolute; inset:0; background:rgba(10,9,8,.55); opacity:0; transition:opacity .35s ease}
.fkc-sheet.open{pointer-events:auto}
.fkc-sheet.open::before{opacity:1}
.fkc-panel{position:relative; width:min(420px,100%); max-height:calc(100svh - 48px); display:flex; transform:translateY(24px); opacity:0; transition:transform .4s cubic-bezier(.22,.61,.36,1), opacity .3s ease}
.fkc-sheet.open .fkc-panel{transform:none; opacity:1}
.fkc-panel .fkc{background:#100E0C; border-radius:18px; overflow:hidden; box-shadow:0 30px 80px -20px rgba(0,0,0,.7); max-height:100%}
.fkc-panel .fkc-thread{flex:1; max-height:none; min-height:0}
html.fkc-lock,html.fkc-lock body{overflow:hidden}

@media (max-width:760px){
  .fkc-grid{grid-template-columns:1fr}
  .fkc-sheet{padding:0}
  .fkc-panel{width:100%; height:92svh; max-height:92svh; transform:translateY(100%)}
  .fkc-panel .fkc{border-radius:18px 18px 0 0; border-bottom:0; height:100%}
  /* the sheet follows the visible part of the screen (fitViewport in fk-chat.js): above the keyboard when it is open */
  .fkc-sheet{top:var(--fkc-top,0); bottom:auto; height:var(--fkc-vh,100svh)}
  .fkc-sheet .fkc-panel{height:min(92svh, calc(var(--fkc-vh,100svh) - 16px)); max-height:none}
  .fkc-sheet.kb .fkc-panel{height:var(--fkc-vh,100svh)}
  .fkc-sheet.kb .fkc-panel .fkc{border-radius:0}
  .fkc-sheet.kb .fkc-note{display:none}
  .fkc-sheet.kb .fkc-head{padding:.55rem 1rem}
  .fkc-sheet.kb .fkc-avatar{width:32px; height:32px; padding:6px}
  .fkc-sheet.kb .fkc-who strong{font-size:1.05rem}
  .fkc-sheet.kb .fkc-thread{padding:.9rem 1rem}
}
@media (prefers-reduced-motion:reduce){
  .fkc-msg,.fkc-panel,.fkc-sheet::before{transition:none}
  .fkc-typing i,.fkc-dot{animation:none}
}