/* =============================================================================
   fc-chat.css — structure for the mounted Friday chat.

   Deliberately contains no brand decisions. Every colour, radius, font and
   shadow is a variable the host page sets, so the same markup sits inside a
   restrained corporate concept and a neon technical one without either looking
   like it borrowed the other's widget.

   Defaults below are neutral, so a page that forgets to theme it still gets
   something legible rather than something broken.
   ============================================================================= */

.fc{
  --fc-bg:#fff;
  --fc-panel:#faf9f7;
  --fc-line:rgba(0,0,0,.1);
  --fc-text:#15181c;
  --fc-muted:#697078;
  --fc-accent:#2f6df0;
  --fc-accent-ink:#fff;
  --fc-her-bg:#f1f3f6;
  --fc-her-text:#15181c;
  --fc-you-bg:var(--fc-accent);
  --fc-you-text:var(--fc-accent-ink);
  --fc-radius:14px;
  --fc-bubble:16px;
  --fc-font:inherit;
  --fc-shadow:0 20px 44px rgba(0,0,0,.09);

  display:flex; flex-direction:column; overflow:hidden;
  background:var(--fc-bg); color:var(--fc-text);
  border:1px solid var(--fc-line); border-radius:var(--fc-radius);
  box-shadow:var(--fc-shadow); font-family:var(--fc-font);
}

.fc-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.fc__bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.8rem 1.1rem; border-bottom:1px solid var(--fc-line);
  background:var(--fc-panel);
  font:600 .6875rem/1 var(--fc-font); letter-spacing:.14em; text-transform:uppercase;
}
.fc__live{display:flex;align-items:center;gap:.55rem;color:var(--fc-text)}
.fc__live i{width:.45rem;height:.45rem;border-radius:50%;background:var(--fc-accent);
  font-style:normal;animation:fcPulse 2s ease-in-out infinite}
@keyframes fcPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.8)}}
.fc__left{color:var(--fc-muted);letter-spacing:.1em}

.fc__log{
  padding:1.15rem 1.1rem; overflow-y:auto;
  height:clamp(230px,32vh,340px);
  display:flex; flex-direction:column; gap:.7rem;
  scrollbar-width:thin;
}
.fc__log::-webkit-scrollbar{width:5px}
.fc__log::-webkit-scrollbar-thumb{background:var(--fc-line);border-radius:4px}

.fc .msg{max-width:86%}
.fc .msg p{
  margin:0; padding:.75rem 1rem; border-radius:var(--fc-bubble);
  font-size:.9rem; line-height:1.6; white-space:pre-wrap;
}
.fc .msg--her{align-self:flex-start}
.fc .msg--her p{background:var(--fc-her-bg);color:var(--fc-her-text);border-bottom-left-radius:5px}
.fc .msg--her strong{font-weight:700}
.fc .msg--her a{color:var(--fc-accent);text-decoration:underline}
.fc .msg--you{align-self:flex-end}
.fc .msg--you p{background:var(--fc-you-bg);color:var(--fc-you-text);border-bottom-right-radius:5px}

.fc .msg.is-typing p{display:flex;gap:.3rem;align-items:center;min-height:2.7rem}
.fc .msg.is-typing i{width:.35rem;height:.35rem;border-radius:50%;background:var(--fc-muted);
  animation:fcDot 1.3s ease-in-out infinite}
.fc .msg.is-typing i:nth-child(2){animation-delay:.18s}
.fc .msg.is-typing i:nth-child(3){animation-delay:.36s}
@keyframes fcDot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.fc .card{
  align-self:stretch;border:1px solid var(--fc-line);background:var(--fc-panel);
  border-radius:calc(var(--fc-radius) - 4px);padding:1rem 1.1rem;
}
.fc .card h4{margin:0 0 .4rem;font-size:.95rem;font-weight:700;color:var(--fc-text)}
.fc .card p{margin:0 0 .85rem;color:var(--fc-muted);font-size:.85rem;line-height:1.6}
.fc .card__row{display:flex;flex-wrap:wrap;gap:.5rem}
.fc .card__form{display:grid;gap:.6rem;margin-bottom:.25rem}
.fc .card__form span{display:block;margin-bottom:.3rem;font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fc-muted)}
.fc .card__err{margin:0 0 .5rem;color:#d9483b;font-size:.8rem}

.fc__gate{padding:1.3rem 1.1rem;border-bottom:1px solid var(--fc-line);background:var(--fc-panel)}
.fc__gate-lead{
  margin:0 0 1.1rem;font-size:.9rem;line-height:1.6;color:var(--fc-text);
}
.fc__log:not([hidden]){border-top:1px solid var(--fc-line)}
.fc__row{display:grid;gap:.6rem;margin-bottom:.6rem}
@media (min-width:520px){.fc__row{grid-template-columns:1fr 1fr}}
.fc__gate label{display:block}
.fc__gate span{display:block;margin-bottom:.3rem;font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--fc-muted)}
.fc__gate em{font-style:normal;text-transform:none;letter-spacing:0}
.fc input,.fc textarea{
  width:100%;padding:.65rem .8rem;background:var(--fc-bg);color:var(--fc-text);
  border:1px solid var(--fc-line);border-radius:calc(var(--fc-radius) - 6px);
  font:400 .9rem/1.45 var(--fc-font);
}
.fc input:focus,.fc textarea:focus{outline:none;border-color:var(--fc-accent)}
.fc textarea{resize:none;min-height:2.7rem;max-height:9rem}
.fc__err{margin:0 0 .6rem;color:#d9483b;font-size:.8rem}
.fc__small{margin:.85rem 0 0;color:var(--fc-muted);font-size:.72rem;line-height:1.6}

.fc__sugg{display:flex;flex-wrap:wrap;gap:.45rem;padding:1rem 1.1rem}
.fc__sugg button{
  min-height:40px;padding:.5rem .9rem;cursor:pointer;text-align:left;
  background:transparent;color:var(--fc-muted);
  border:1px solid var(--fc-line);border-radius:999px;
  font:400 .78rem/1.3 var(--fc-font);
  transition:border-color .25s,color .25s;
}
.fc__sugg button:hover{border-color:var(--fc-accent);color:var(--fc-accent)}

.fc__ask{display:flex;gap:.5rem;padding:.9rem 1.1rem;border-top:1px solid var(--fc-line);
  background:var(--fc-panel);align-items:flex-start}
.fc__ask textarea{flex:1}
.fc__ask .btn{flex:0 0 auto}
.fc__ask .btn:disabled{opacity:.4;cursor:default;transform:none;box-shadow:none}
.fc textarea:disabled{opacity:.5}

/* Honeypot: present in the DOM, out of sight and out of the tab order. Not
   display:none, which some bots skip. */
.fc__hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.fc__foot{
  margin:0;padding:.8rem 1.1rem;border-top:1px solid var(--fc-line);
  color:var(--fc-muted);font-size:.7rem;line-height:1.55;
}

@media (prefers-reduced-motion:reduce){
  .fc__live i,.fc .msg.is-typing i{animation:none}
}

/* ── phones ──────────────────────────────────────────────────────────────
   Measured at 375px, not assumed. The labels were rendering at 10.5–11.5px
   and the inputs and suggestion chips at 39–44px tall — under a thumb, and
   under the 12px that stays comfortably legible on a phone held at arm's
   length. Applied by pointer type as well as width, so a touch laptop gets
   the same treatment.
   ------------------------------------------------------------------------ */
@media (hover:none), (max-width:700px){
  .fc__bar{font-size:.75rem}
  .fc__left{font-size:.75rem}
  .fc__small,.fc__foot{font-size:.8125rem;line-height:1.65}
  .fc__gate span,.fc .card__form span{font-size:.75rem}
  .fc .msg p{font-size:.9375rem}
  .fc .card p{font-size:.9rem}
  .fc .card__err,.fc__err{font-size:.8125rem}

  .fc input,.fc textarea{min-height:46px;font-size:1rem}   /* 16px stops iOS zooming on focus */
  .fc__sugg button{min-height:46px;font-size:.8125rem}
  .fc__ask{padding:.8rem .9rem}
  .fc__ask .btn{min-height:46px}
}

/* The `hidden` attribute is a UA rule (`[hidden]{display:none}`) and loses to
   ANY class rule that sets display — .fc__sugg, .fc__ask and .fc__log all set
   flex, so setting el.hidden = true left them on screen. Measured: the panel
   reported four hidden children and rendered all four.
   Everything inside the chat honours `hidden`, without exception. */
.fc [hidden]{display:none!important}