/* Chat bubble for the shop page. Self-contained colours (the page's own custom properties are not needed).
   Brass (#b08d6a) is decoration (ring, dots); every text colour passes AA. */
.cw-open, .cw-panel { --cw-ink: #2b2420; --cw-paper: #fbf8f3; --cw-brass: #b08d6a; --cw-oat: #ece2d3; --cw-sage: #cfdcc2; font-family: "IBM Plex Sans Thai", "Noto Sans Thai", "Leelawadee UI", system-ui, sans-serif; }

.cw-open {
  position: fixed; right: 16px; bottom: 16px; z-index: 50; display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 22px 0 18px;
  border: 0; border-radius: 999px; background: var(--cw-ink); color: #f4ede4; font-family: inherit; font-size: 1rem; font-weight: 500; line-height: 1; cursor: pointer;
  box-shadow: 0 0 0 4px rgba(176, 141, 106, .32), 0 14px 32px -8px rgba(43, 36, 32, .55);
  transition: box-shadow .25s, transform .25s;
}
.cw-open::before {
  content: ""; flex: none; width: 22px; height: 22px; background: #d2b48f;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-8l-5 4v-4H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-8l-5 4v-4H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cw-open:hover { transform: translateY(-2px); box-shadow: 0 0 0 6px rgba(176, 141, 106, .4), 0 18px 36px -8px rgba(43, 36, 32, .6); }
.cw-open:focus-visible, .cw-close:focus-visible, .cw-chip:focus-visible, .cw-send:focus-visible { outline: 3px solid #d2b48f; outline-offset: 3px; }

.cw-panel {
  position: fixed; right: 16px; bottom: 88px; z-index: 51; width: min(400px, calc(100vw - 32px)); height: min(620px, calc(100vh - 116px));
  display: flex; flex-direction: column; background: var(--cw-paper); color: var(--cw-ink); border-radius: 24px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(176, 141, 106, .45), 0 30px 70px -20px rgba(43, 36, 32, .55);
}
.cw-panel[hidden] { display: none; }
.cw-head { display: flex; align-items: center; gap: 12px; padding: 14px 10px 14px 18px; background: var(--cw-ink); color: #f4ede4; border-bottom: 3px solid var(--cw-brass); }
.cw-avatar { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(150deg, #e3cba8, #c4a47c); color: var(--cw-ink); font: 600 1.2rem/1 "Noto Serif Thai", Georgia, serif; }
.cw-who { flex: 1; min-width: 0; }
.cw-who strong { display: block; font-weight: 600; font-size: 1.0625rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-sub { display: block; font-size: .8125rem; line-height: 1.4; color: #e3d6c4; }
.cw-close { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #f4ede4; font-size: 28px; line-height: 1; cursor: pointer; }
.cw-close:hover { background: rgba(244, 237, 228, .14); }
.cw-log { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--cw-oat); overscroll-behavior: contain; }
.cw-msg { position: relative; margin: 0; max-width: 86%; padding: 10px 14px; border-radius: 18px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1rem; line-height: 1.6; }
.cw-bot { align-self: flex-start; background: #fff; border-bottom-left-radius: 4px; box-shadow: 0 1px 0 rgba(43, 36, 32, .06); }
.cw-me { align-self: flex-end; background: var(--cw-sage); color: var(--cw-ink); border-bottom-right-radius: 4px; }
/* typing dots: the "…" placeholder text is hidden and three dots take its place */
.cw-wait { min-width: 66px; color: transparent; }
.cw-wait::after { content: ""; position: absolute; left: 16px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--cw-brass); box-shadow: 14px 0 #e3d3bf, 28px 0 #e3d3bf; animation: cw-dots 1.2s infinite; }
@keyframes cw-dots {
  0%, 100% { background: var(--cw-brass); box-shadow: 14px 0 #e3d3bf, 28px 0 #e3d3bf; }
  33% { background: #e3d3bf; box-shadow: 14px 0 var(--cw-brass), 28px 0 #e3d3bf; }
  66% { background: #e3d3bf; box-shadow: 14px 0 #e3d3bf, 28px 0 var(--cw-brass); }
}
.cw-chips { display: flex; gap: 8px; padding: 10px 12px 0; overflow-x: auto; scrollbar-width: none; background: var(--cw-paper); }
.cw-chips::-webkit-scrollbar { display: none; }
.cw-chip { flex: none; min-height: 40px; padding: 0 16px; border: 1px solid var(--cw-brass); border-radius: 999px; background: transparent; color: var(--cw-ink); font: inherit; font-size: .9375rem; cursor: pointer; }
.cw-chip:hover { background: #f1e7d8; }
.cw-form { display: flex; gap: 8px; padding: 10px 12px 12px; background: var(--cw-paper); }
.cw-input { flex: 1; min-width: 0; min-height: 48px; padding: 0 16px; border: 1px solid #d8c9b4; border-radius: 999px; background: #fff; color: var(--cw-ink); font: inherit; font-size: 1rem; }
.cw-input::placeholder { color: #6f6258; }
.cw-input:focus-visible { outline: 3px solid #d2b48f; outline-offset: 1px; }
.cw-send { min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--cw-ink); color: #f4ede4; font: inherit; font-weight: 500; font-size: 1rem; cursor: pointer; }
.cw-send:disabled { opacity: .5; cursor: progress; }

/* phones: a full-height sheet instead of a floating card */
@media (max-width: 600px) {
  .cw-open { right: 14px; bottom: 14px; }
  .cw-open[aria-expanded="true"] { display: none; }
  .cw-panel { top: 12px; right: 0; bottom: 0; left: 0; width: auto; height: auto; border-radius: 24px 24px 0 0; }
  .cw-head { padding-top: 16px; }
  .cw-form { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: no-preference) {
  .cw-panel { animation: cw-in .28s cubic-bezier(.2, .7, .2, 1); }
  .cw-open::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid var(--cw-brass); opacity: 0; animation: cw-ring 3.2s 2s ease-out infinite; pointer-events: none; }
  .cw-msg { animation: cw-msg .22s ease-out; }
}
@media (prefers-reduced-motion: reduce) { .cw-wait::after { animation: none; } }
@keyframes cw-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes cw-msg { from { opacity: 0; transform: translateY(6px); } }
@keyframes cw-ring { 0% { opacity: .7; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.18, 1.45); } }