/* [TS-1430] S5 — the chat widget's own styles. Scoped to .ffchat so a host page's stylesheet and
   this one cannot reach into each other; site/styles.css is untouched by this slice. */
.ffchat { position: fixed; right: 18px; bottom: 18px; z-index: 60; font-size: 15px; }
.ffchat-bubble {
  display: block; margin-left: auto; padding: 12px 20px; border: 0; border-radius: 24px;
  background: #123c69; color: #fff; font: inherit; font-weight: 600; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.ffchat-bubble:focus-visible, .ffchat-close:focus-visible, .ffchat-send:focus-visible,
.ffchat-input:focus-visible { outline: 3px solid #123c69; outline-offset: 2px; }
.ffchat-panel {
  display: flex; flex-direction: column; width: min(360px, calc(100vw - 36px));
  height: min(460px, calc(100vh - 120px)); margin-bottom: 10px; background: #fff;
  border: 1px solid #b9c0c9; border-radius: 10px; overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
}
/* THE PANEL IS CLOSED UNTIL IT IS OPENED, AND THIS RULE IS WHAT MAKES THAT TRUE.
   The UA stylesheet says `[hidden] { display: none }` at specificity (0,0,1); the class
   selector above is (0,1,0) and out-specifies it, so `panel.hidden = true` set the
   attribute and changed nothing. MEASURED IN A BROWSER on 2026-09-10: the widget shipped
   open on every page load. This restores the intent at a specificity that wins, and it is
   why site/chat-widget.js toggles `el.hidden` rather than inline styles. */
.ffchat-panel[hidden] { display: none; }

.ffchat-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; background: #123c69; color: #fff; font-weight: 600;
}
.ffchat-close {
  border: 0; background: transparent; color: #fff; font-size: 22px; line-height: 1;
  cursor: pointer; padding: 0 4px;
}
.ffchat-log { flex: 1 1 auto; overflow-y: auto; padding: 12px 14px; margin: 0; }
.ffchat-msg {
  margin: 0 0 10px; padding: 8px 11px; border-radius: 10px; max-width: 85%;
  white-space: pre-wrap; word-wrap: break-word;
}
.ffchat-you { margin-left: auto; background: #123c69; color: #fff; }
.ffchat-bot { background: #eef1f5; color: #16202b; }
.ffchat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #dfe3e8; }
.ffchat-input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 16px; padding: 9px 11px;
  border: 1px solid #b9c0c9; border-radius: 6px;
}
.ffchat-send {
  border: 0; border-radius: 6px; padding: 9px 16px; font: inherit; font-weight: 600;
  background: #123c69; color: #fff; cursor: pointer;
}
.ffchat-send[disabled], .ffchat-input[disabled] { opacity: 0.6; cursor: default; }
@media (max-width: 480px) {
  .ffchat { right: 10px; bottom: 10px; left: 10px; }
  .ffchat-panel { width: auto; }
}