/* chat.css — Slice N Stay Pikeville chat widget (see chat.js / chat-brain.js).
   Skinned to the site's tokens from site.css: --ink #1c1410, --paper #fffaf4,
   --cream #f3eee6, --ember #c4522a, --line #e4d8cb, --display "Fraunces". */

.scb-root {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 80;
  font-family: var(--sans, "Outfit", ui-sans-serif, system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink, #1c1410);
}

.scb-bubble {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--ink, #1c1410);
  color: var(--cream, #f3eee6);
  border: 1px solid var(--ink, #1c1410);
  border-radius: 999px;
  padding: 7px 18px 7px 8px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(28, 20, 16, 0.28);
}
.scb-bubble:hover,
.scb-bubble:focus-visible {
  background: var(--ember, #c4522a);
  border-color: var(--ember, #c4522a);
  outline: none;
}
.scb-bubble-face {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cream, #f3eee6);
  flex: none;
}
.scb-bubble-label { white-space: nowrap; }
@media (max-width: 520px) {
  /* Very small screens: keep the Woody face, drop the label text. */
  .scb-bubble-label { display: none; }
  .scb-bubble { padding: 7px; }
}

.scb-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: min(360px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  background: var(--paper, #fffaf4);
  border: 1px solid var(--line, #e4d8cb);
  border-radius: 18px;
  box-shadow: 0 16px 44px rgba(28, 20, 16, 0.3);
  overflow: hidden;
}
.scb-panel[hidden] { display: none; }

.scb-head {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ink, #1c1410);
  color: var(--cream, #f3eee6);
  padding: 10px 12px;
}
.scb-head-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--cream, #f3eee6);
  flex: none;
}
.scb-head-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.scb-head-text strong {
  font-family: var(--display, "Fraunces", ui-serif, Georgia, serif);
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.25;
}
.scb-head-text span { font-size: 0.78rem; opacity: 0.85; }

.scb-call {
  background: var(--ember, #c4522a);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 7px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.scb-call:hover,
.scb-call:focus-visible { filter: brightness(1.1); }

.scb-close {
  background: transparent;
  border: 0;
  color: var(--cream, #f3eee6);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
}

.scb-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.scb-msg { display: flex; align-items: flex-end; }
.scb-msg-user { justify-content: flex-end; }
.scb-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line, #e4d8cb);
  flex: none;
  margin-right: 6px;
}
.scb-msg-body {
  max-width: 85%;
  padding: 9px 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line, #e4d8cb);
  overflow-wrap: anywhere;
}
.scb-msg-user .scb-msg-body {
  background: var(--ember, #c4522a);
  border-color: var(--ember, #c4522a);
  color: #fff;
}
.scb-msg-body a { color: var(--ember, #c4522a); font-weight: 600; }
.scb-msg-user .scb-msg-body a { color: #fff; }
.scb-typing .scb-msg-body { color: var(--mist, #6f6258); letter-spacing: 0.2em; }

.scb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px 10px;
}
.scb-chip {
  background: #fff;
  border: 1px solid var(--line, #e4d8cb);
  color: var(--ink, #1c1410);
  border-radius: 999px;
  padding: 6px 11px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.scb-chip:hover,
.scb-chip:focus-visible { background: var(--ink, #1c1410); color: var(--cream, #f3eee6); }

.scb-form {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line, #e4d8cb);
  background: #fff;
}
.scb-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  padding: 9px 12px;
  border: 1px solid var(--line, #e4d8cb);
  border-radius: 999px;
  background: var(--paper, #fffaf4);
  color: var(--ink, #1c1410);
}
.scb-input:focus { outline: 2px solid var(--ember, #c4522a); outline-offset: 0; }
.scb-send {
  background: var(--ember, #c4522a);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 9px 16px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.scb-send:hover,
.scb-send:focus-visible { filter: brightness(1.08); }

.scb-note {
  margin: 0;
  padding: 8px 12px 10px;
  font-size: 0.76rem;
  background: #fff;
  color: var(--mist, #6f6258);
  border-top: 1px dashed var(--line, #e4d8cb);
}
.scb-note a { color: var(--ember, #c4522a); font-weight: 600; }

@media (max-width: 560px) {
  .scb-panel { max-height: calc(100vh - 140px); }
}