/* FSBO chat assistant widget. All classes prefixed fc- so nothing collides with styles.css. */

.fc-root { font-family: var(--sans, 'Montserrat', Arial, sans-serif); color: var(--ink, #2a2622); line-height: 1.45; }
.fc-root [hidden] { display: none !important; }
.fc-root button { font: inherit; cursor: pointer; }
.fc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* launcher + greeting */
.fc-launcher {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  width: 58px; height: 58px; border-radius: 50%; border: 0; padding: 0;
  background: var(--red, #ce011f); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(206, 1, 31, 0.4);
}
.fc-launcher svg { width: 26px; height: 26px; }
.fc-launcher:hover { background: var(--red-dk, #a80119); }
.fc-launcher:focus-visible, .fc-root button:focus-visible, .fc-root a:focus-visible { outline: 3px solid var(--ink, #2a2622); outline-offset: 2px; }

.fc-greet {
  position: fixed; right: 20px; bottom: 90px; z-index: 50; width: 230px;
  background: #fff; border-radius: 14px 14px 4px 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.fc-greet-text { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 12px 32px 12px 14px; font-size: 13.5px; color: var(--ink, #2a2622); }
.fc-greet-x { position: absolute; top: 4px; right: 6px; width: 28px; height: 28px; border: 0; background: none; color: var(--muted-2, #b8afa0); font-size: 18px; line-height: 1; }

/* panel */
.fc-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 380px; height: 600px; max-height: calc(100vh - 40px);
  background: var(--cream, #f7f3ee); border-radius: 16px; overflow: hidden;
  box-shadow: 0 16px 48px rgba(42, 38, 34, 0.25);
  display: flex; flex-direction: column;
}
.fc-head { background: var(--red, #ce011f); color: #fff; padding: 12px 14px; display: flex; align-items: center; gap: 10px; flex: none; }
.fc-avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; background: #fff; flex: none; }
.fc-titles b { display: block; font-size: 14.5px; }
.fc-titles span { display: block; font-size: 12px; opacity: 0.9; }
.fc-close { margin-left: auto; width: 40px; height: 40px; border: 0; background: none; color: #fff; font-size: 26px; line-height: 1; border-radius: 50%; }
.fc-close:hover { background: rgba(255, 255, 255, 0.15); }

.fc-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; }
.fc-group { display: flex; flex-direction: column; gap: 8px; }
.fc-bot, .fc-me { max-width: 85%; padding: 9px 12px; border-radius: 14px; font-size: 14.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.fc-bot { background: #fff; border: 1px solid var(--line, #e2dace); align-self: flex-start; border-bottom-left-radius: 4px; }
.fc-me { background: var(--ink, #2a2622); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.fc-typing { color: var(--muted, #8a8278); letter-spacing: 2px; }

.fc-skip { align-self: flex-start; margin-left: 4px; background: none; border: 0; padding: 2px; font-size: 13px; color: var(--muted, #8a8278); text-decoration: underline; }
.fc-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.fc-chip { border: 1.5px solid var(--red, #ce011f); color: var(--red, #ce011f); background: #fff; border-radius: 999px; padding: 7px 13px; font-size: 13.5px; font-weight: 600; text-align: left; }
.fc-chip:hover { background: var(--red, #ce011f); color: #fff; }

.fc-tool {
  align-self: flex-start; width: 85%; display: block;
  background: #fff; border: 1px solid var(--line, #e2dace); border-left: 4px solid var(--red, #ce011f);
  border-radius: 10px; padding: 9px 12px; color: var(--ink, #2a2622);
}
.fc-tool:hover { box-shadow: 0 4px 12px rgba(42, 38, 34, 0.1); color: var(--ink, #2a2622); }
.fc-tool b { display: block; font-size: 14px; }
.fc-tool span { display: block; font-size: 13px; color: var(--muted, #8a8278); }
.fc-tool .fc-open { color: var(--red, #ce011f); font-weight: 700; margin-top: 4px; }

.fc-offer { align-self: flex-start; width: 90%; background: #fff; border: 1px solid var(--line, #e2dace); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 7px; }
.fc-field { font: inherit; font-size: 16px; color: var(--ink, #2a2622); border: 1px solid var(--line-2, #dad2c6); border-radius: 8px; padding: 8px 10px; background: #fbf9f6; width: 100%; }
.fc-field:focus { outline: 2px solid var(--red, #ce011f); outline-offset: 0; border-color: transparent; }
.fc-hint { font-size: 12.5px; color: var(--red, #ce011f); }
.fc-hint:empty { display: none; }
.fc-send { border: 0; border-radius: 8px; padding: 10px; background: var(--red, #ce011f); color: #fff; font-weight: 700; font-size: 14.5px; }
.fc-send:hover { background: var(--red-dk, #a80119); }
.fc-alt { font-size: 12.5px; color: var(--muted, #8a8278); text-align: center; }
.fc-alt a { text-decoration: underline; }

.fc-contact { display: flex; gap: 6px; flex-wrap: wrap; }
.fc-btn { padding: 8px 14px; border-radius: 9px; border: 1px solid var(--line-2, #dad2c6); background: #fff; color: var(--ink, #2a2622); font-weight: 600; font-size: 13.5px; }
.fc-btn-primary { background: var(--red, #ce011f); border-color: var(--red, #ce011f); color: #fff; }
.fc-btn-primary:hover { color: #fff; background: var(--red-dk, #a80119); }

.fc-input { flex: none; background: #fff; border-top: 1px solid var(--line, #e2dace); padding: 10px 12px; display: flex; gap: 8px; align-items: center; margin: 0; }
.fc-box { flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--ink, #2a2622); border: 1px solid var(--line-2, #dad2c6); border-radius: 999px; padding: 9px 14px; background: #fff; }
.fc-box:focus { outline: 2px solid var(--red, #ce011f); outline-offset: 0; border-color: transparent; }
.fc-go { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; background: var(--red, #ce011f); color: #fff; display: flex; align-items: center; justify-content: center; }
.fc-go svg { width: 18px; height: 18px; }
.fc-go:disabled { opacity: 0.5; cursor: default; }

/* phones: launcher sits above the sticky call/text bar (shown at <=760px in styles.css) */
@media (max-width: 760px) {
  .fc-launcher { right: 16px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .fc-greet { right: 16px; bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
}

/* small phones: panel goes full screen */
@media (max-width: 639px) {
  .fc-panel { inset: 0; width: auto; height: 100%; height: 100dvh; max-height: none; border-radius: 0; }
  .fc-input { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  html.fc-open, html.fc-open body { overflow: hidden; }
}

@media (prefers-reduced-motion: no-preference) {
  .fc-panel:not([hidden]) { animation: fc-in 0.18s ease-out; }
  @keyframes fc-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}