.sfcc-ask { position: fixed; right: 20px; bottom: 20px; z-index: 99990; font-family: system-ui, sans-serif; }
@supports (padding: env(safe-area-inset-bottom)) {
  .sfcc-ask { right: calc(20px + env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); }
}
.sfcc-ask-fab {
  pointer-events: auto; border: 0; cursor: pointer;
  background: #1c1915; color: #f4f1ea; font: 600 14px/1 system-ui, sans-serif;
  padding: 14px 18px; border-radius: 999px; box-shadow: 0 8px 24px rgba(28,25,21,.25);
}
.sfcc-ask-fab { display: inline-flex; align-items: center; gap: 8px; transition: transform .25s ease, opacity .25s ease; }
.sfcc-ask-ico { flex: none; }
.sfcc-ask-fab:hover, .sfcc-ask-fab:focus-visible { background: #3a342c; }
.sfcc-ask-fab:focus-visible { outline: 3px solid #c9834f; outline-offset: 2px; }
.sfcc-ask-panel {
  pointer-events: auto; position: absolute; right: 0; bottom: 56px;
  width: min(380px, calc(100vw - 32px)); height: min(480px, 70vh);
  background: #fff; color: #1c1915; border: 1px solid #e6dfd2; border-radius: 12px;
  box-shadow: 0 16px 48px rgba(28,25,21,.2); display: flex; flex-direction: column;
  overflow: hidden;
}
.sfcc-ask-panel[hidden] { display: none; }
.sfcc-ask-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid #e6dfd2; background: #f4f1ea;
}
.sfcc-ask-close { border: 0; background: transparent; cursor: pointer; color: #6b6358; font: 13px/1 system-ui; }
.sfcc-ask-log { flex: 1; overflow: auto; padding: 12px; background: #faf8f4; }
.sfcc-ask-b { display: flex; margin: 0 0 10px; }
.sfcc-ask-b--user { justify-content: flex-end; }
.sfcc-ask-b div {
  max-width: 85%; padding: 9px 12px; border-radius: 12px; font-size: 14px; line-height: 1.45;
}
.sfcc-ask-b--user div { background: #1c1915; color: #f4f1ea; border-bottom-right-radius: 3px; }
.sfcc-ask-b--assistant div { background: #fff; border: 1px solid #e6dfd2; border-bottom-left-radius: 3px; }
.sfcc-ask-b a { color: #6b4f2a; }
.sfcc-ask-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #e6dfd2; }
.sfcc-ask-form input {
  flex: 1; border: 1px solid #e6dfd2; border-radius: 8px; padding: 10px 12px; font: 14px/1.3 system-ui;
}
.sfcc-ask-form button {
  border: 0; background: #1c1915; color: #f4f1ea; border-radius: 8px; padding: 0 14px; cursor: pointer; font-weight: 600;
}
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
@media (max-width: 600px) {
  .sfcc-ask-panel { height: min(70vh, 520px); }
  /* a round button on a phone: the bubble alone, still a 52px target, and the words for a screen reader */
  .sfcc-ask-fab { width: 52px; height: 52px; padding: 0; justify-content: center; border-radius: 50%; }
  .sfcc-ask-ico { width: 23px; height: 23px; }
  .sfcc-ask-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .sfcc-ask-tucked .sfcc-ask-fab { transform: translateY(96px); opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { .sfcc-ask-fab { transition: none; } }
/* starter questions under the greeting: tap one to ask it */
.sfcc-ask-starters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.sfcc-ask-starter {
  border: 1px solid #d9cdb8; background: #fff; color: #1c1915; border-radius: 999px; cursor: pointer;
  padding: 8px 12px; font: 500 13px/1.25 system-ui, sans-serif; text-align: left; min-height: 36px;
}
.sfcc-ask-starter:hover, .sfcc-ask-starter:focus-visible { border-color: #6b4f2a; background: #f4f1ea; }
.sfcc-ask-starter:focus-visible { outline: 2px solid #c9834f; outline-offset: 1px; }
/* while an answer is on its way */
.sfcc-ask-wait div { display: inline-flex; gap: 4px; align-items: center; }
.sfcc-ask-wait span { width: 6px; height: 6px; border-radius: 50%; background: #b3a996; animation: sfcc-ask-dot 1s infinite ease-in-out; }
.sfcc-ask-wait span:nth-child(2) { animation-delay: .15s; }
.sfcc-ask-wait span:nth-child(3) { animation-delay: .3s; }
@keyframes sfcc-ask-dot { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sfcc-ask-wait span { animation: none; opacity: .7; } }
/* a phone zooms the whole page into a box whose text is under 16px, so the box is 16px there */
@media (max-width: 600px) { .sfcc-ask-form input { font-size: 16px; } .sfcc-ask-form button { min-height: 44px; } }