/* Chat widget styles, from the SEO party's styles.css (Oct 2026). Loaded on every page with concierge.js. */
/* ══ AI CONCIERGE CHAT ══════════════════════════════════════════════
   Floating "Ask about Castle Rock" widget, injected on every page by
   concierge.js. Layout and behavior follow the NaborAI concierge
   pattern; colors use the site's teal and slate tokens. */
.kb-chat { position: fixed; right: 20px; bottom: 20px; z-index: 1500; font-family: var(--font-body); }
.kb-chat-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--slate); color: #fff; border: 1px solid rgba(255,255,255,0.22); border-radius: 999px; padding: 13px 20px; cursor: pointer; box-shadow: 0 14px 34px rgba(0,0,0,0.30); font-family: var(--font-body); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; transition: transform 0.22s ease, background 0.22s ease; }
.kb-chat-btn:hover { transform: translateY(-2px); background: var(--tq-dark); }
.kb-chat-btn:focus-visible { outline: 3px solid var(--tq-mid); outline-offset: 3px; }
.kb-chat-btn svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.kb-chat-panel { position: absolute; right: 0; bottom: 64px; width: 370px; max-width: calc(100vw - 32px); max-height: calc(100vh - 110px); background: #fff; border: 1px solid var(--light-line); border-radius: 10px; box-shadow: 0 26px 64px rgba(31,45,44,0.30); display: none; flex-direction: column; overflow: hidden; }
.kb-chat-panel.open { display: flex; }
.kb-chat-header { display: flex; align-items: center; gap: 12px; padding: 15px 16px; background: var(--slate); color: #fff; flex: none; }
.kb-chat-avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--slate); object-fit: cover; border: 2px solid var(--tq-mid); }
.kb-chat-titles { flex: 1; min-width: 0; }
.kb-chat-title { font-family: var(--font-head); font-size: 1rem; font-weight: 700; margin: 0; color: #fff; line-height: 1.2; }
.kb-chat-sub { display: block; font-size: 0.68rem; color: rgba(255,255,255,0.78); letter-spacing: 0.06em; margin-top: 2px; }
.kb-chat-close { background: none; border: 0; cursor: pointer; padding: 6px; display: grid; place-items: center; border-radius: 6px; }
.kb-chat-close:hover { background: rgba(255,255,255,0.12); }
.kb-chat-close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.kb-chat-close svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }
.kb-chat-messages { padding: 16px; display: flex; flex-direction: column; gap: 11px; flex: 1 1 auto; min-height: 140px; max-height: 330px; overflow-y: auto; background: var(--cream); }
.kb-msg { font-size: 0.88rem; line-height: 1.6; padding: 11px 14px; border-radius: 10px; max-width: 88%; overflow-wrap: anywhere; }
.kb-msg strong { font-weight: 700; }
.kb-bot { align-self: flex-start; background: #fff; color: var(--slate); border: 1px solid var(--light-line); border-bottom-left-radius: 3px; }
.kb-user { align-self: flex-end; background: var(--tq); color: #fff; border-bottom-right-radius: 3px; }
.kb-msg a { color: var(--tq-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.kb-user a { color: #fff; }
.kb-typing { display: flex; gap: 4px; padding: 12px 14px; background: #fff; border: 1px solid var(--light-line); border-radius: 10px; align-self: flex-start; width: fit-content; }
.kb-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--mid-gray); animation: kbBounce 1.2s infinite; }
.kb-typing span:nth-child(2) { animation-delay: 0.15s; }
.kb-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes kbBounce { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.kb-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px 12px; background: var(--cream); flex: none; max-height: 132px; overflow-y: auto; }
.kb-chip { background: #fff; border: 1px solid var(--light-line); color: var(--tq-dark); font-family: var(--font-body); font-size: 0.74rem; font-weight: 700; padding: 7px 12px; border-radius: 999px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.kb-chip:hover, .kb-chip:focus-visible { background: var(--tq); color: #fff; border-color: var(--tq); outline: none; }
.kb-chip-guide { background: var(--tq); color: #fff; border-color: var(--tq); }
.kb-chip-guide::before { content: "\2193"; margin-right: 5px; font-weight: 700; }
.kb-chip-guide:hover, .kb-chip-guide:focus-visible { background: var(--tq-dark); border-color: var(--tq-dark); }
.kb-chat-input { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--light-line); background: #fff; flex: none; margin: 0; }
.kb-chat-field { flex: 1; min-width: 0; border: 1px solid var(--light-line); border-radius: 999px; padding: 10px 15px; font-family: var(--font-body); font-size: 16px; color: var(--slate); background: var(--cream); }
.kb-chat-field:focus { outline: 2px solid var(--tq); outline-offset: 1px; }
.kb-chat-send { width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: var(--tq); cursor: pointer; display: grid; place-items: center; transition: background 0.2s ease; }
.kb-chat-send:hover { background: var(--tq-dark); }
.kb-chat-send:focus-visible { outline: 2px solid var(--slate); outline-offset: 2px; }
.kb-chat-send svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.kb-chat-foot { font-size: 0.68rem; color: var(--mid-gray); text-align: center; padding: 9px 12px; background: var(--cream); border-top: 1px solid var(--light-line); margin: 0; flex: none; }
.kb-chat-foot a { color: var(--tq-dark); font-weight: 700; }
.kb-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 520px) {
  .kb-chat { right: 12px; bottom: 12px; }
  .kb-chat-btn { padding: 14px; }
  .kb-chat-btn .kb-chat-btn-label { display: none; }
  .kb-chat-panel { position: fixed; right: 8px; left: 8px; bottom: 76px; width: auto; max-width: none; max-height: calc(100vh - 92px); }
  .kb-chat-messages { max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kb-chat-btn, .kb-chip, .kb-chat-send { transition: none; }
  .kb-typing span { animation: none; opacity: 0.6; }
}
@media print { .kb-chat { display: none !important; } }