/* BUYAMTO Chat: customer widget. Teal #0E7C86 / deep teal #0B5F67, burnt orange #C94F0A, warm cream. Everything is scoped to .bchat-root. */
.bchat-root { --bchat-teal: #0E7C86; --bchat-deep: #0B5F67; --bchat-orange: #C94F0A; --bchat-cream: #FAF7F0; --bchat-ink: #1A1815; --bchat-line: #E7E1D4; --bchat-muted: #6B655B; position: fixed; z-index: 99990; bottom: var(--bchat-y, 20px); right: var(--bchat-x, 20px); font: 15px/1.45 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--bchat-ink); }
.bchat-root[data-pos="left"] { right: auto; left: var(--bchat-x, 20px); }
.bchat-root *, .bchat-root *::before, .bchat-root *::after { box-sizing: border-box; }
.bchat-root[hidden] { display: none; }

/* Keep the chat out of the way of Add to Cart on product pages (phones and tablets show a sticky buy bar). */
@media (max-width: 849px) { .bchat-onproduct:not(.is-open) { bottom: calc(var(--bchat-y, 20px) + 76px); } }

.bchat-launcher { position: relative; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: linear-gradient(145deg, var(--bchat-teal), var(--bchat-deep)); color: #fff; cursor: pointer; box-shadow: 0 8px 24px rgba(11, 95, 103, .35), 0 2px 6px rgba(26, 24, 21, .18); transition: transform .18s ease, box-shadow .18s ease; min-height: 0; line-height: 1; }
.bchat-launcher:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 28px rgba(11, 95, 103, .4), 0 2px 6px rgba(26, 24, 21, .18); }
.bchat-launcher[hidden] { display: none; }
.bchat-badge { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--bchat-orange); color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; border: 2px solid #fff; }
.bchat-badge[hidden] { display: none; }
.bchat-root button:focus-visible, .bchat-root textarea:focus-visible, .bchat-root .bchat-log:focus-visible, .bchat-root a:focus-visible, .bchat-row.is-failed:focus-visible { outline: 3px solid #F2A672; outline-offset: 2px; }

.bchat-panel { position: absolute; bottom: 0; right: 0; width: 380px; height: min(640px, calc(100dvh - 40px)); display: flex; flex-direction: column; background: var(--bchat-cream); border-radius: 26px; overflow: hidden; box-shadow: 0 24px 60px rgba(26, 24, 21, .28), 0 4px 14px rgba(26, 24, 21, .12); border: 1px solid var(--bchat-line); transform-origin: bottom right; animation: bchat-in .22s cubic-bezier(.2, .8, .2, 1); }
.bchat-root[data-pos="left"] .bchat-panel { right: auto; left: 0; transform-origin: bottom left; }
.bchat-panel[hidden] { display: none; }
@keyframes bchat-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

.bchat-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; background: linear-gradient(135deg, var(--bchat-teal) 0%, var(--bchat-deep) 100%); color: #fff; flex: none; }
.bchat-av { width: 44px; height: 44px; border-radius: 50%; background: #E4F1F2; border: 2px solid rgba(255, 255, 255, .85); object-fit: cover; flex: none; display: block; }
.bchat-who { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.bchat-name { font-size: 16px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bchat-sub { font-size: 12.5px; opacity: .85; }
.bchat-min { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; margin: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; min-height: 0; line-height: 1; transition: background .15s; }
.bchat-min:hover { background: rgba(255, 255, 255, .26); }

.bchat-guest { margin: 0; padding: 8px 14px; background: #fff7ea; border-top: 1px solid var(--bchat-line); font-size: 12.5px; line-height: 1.35; color: var(--bchat-muted); flex: none; }
.bchat-guest[hidden] { display: none; }
.bchat-guest a { color: var(--bchat-deep); font-weight: 700; text-decoration: underline; }
.bchat-log { flex: 1; overflow-y: auto; padding: 18px 14px 8px; display: flex; flex-direction: column; gap: 6px; scroll-behavior: smooth; overscroll-behavior: contain; }
.bchat-row { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; animation: bchat-pop .18s ease-out; }
@keyframes bchat-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bchat-row--support { justify-content: flex-start; }
.bchat-row--customer { justify-content: flex-end; flex-wrap: wrap; }
.bchat-row--support.is-grouped { margin-bottom: -2px; }
.bchat-mav { width: 30px; height: 30px; border-radius: 50%; background: #E4F1F2; object-fit: cover; flex: none; display: block; }
.bchat-mav.is-spacer { visibility: hidden; }
.bchat-bubble { max-width: 78%; padding: 10px 14px; border-radius: 20px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.bchat-row--support .bchat-bubble { background: #fff; border: 1px solid var(--bchat-line); border-bottom-left-radius: 6px; box-shadow: 0 1px 2px rgba(26, 24, 21, .04); }
.bchat-row--customer .bchat-bubble { background: var(--bchat-teal); color: #fff; border-bottom-right-radius: 6px; }
.bchat-bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.bchat-row--support .bchat-bubble a { color: var(--bchat-teal); }
.bchat-row.is-pending .bchat-bubble { opacity: .6; }
.bchat-row.is-failed .bchat-bubble { background: #FBE9E7; color: #8C1D18; border: 1px solid #F0B7B1; }
.bchat-row.is-failed { cursor: pointer; }
.bchat-fail { flex-basis: 100%; text-align: right; font-size: 12px; color: #B3261E; padding-right: 4px; }
.bchat-dots { display: flex; gap: 4px; align-items: center; padding: 14px 16px; }
.bchat-dots i { width: 7px; height: 7px; border-radius: 50%; background: #A8A294; animation: bchat-dot 1.2s infinite ease-in-out; }
.bchat-dots i:nth-child(2) { animation-delay: .15s; }
.bchat-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bchat-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.bchat-note { margin: 8px auto 2px; padding: 6px 12px; border-radius: 999px; background: #F1EDE2; color: var(--bchat-muted); font-size: 12.5px; text-align: center; }
.bchat-note.is-error { background: #FBE9E7; color: #8C1D18; }
.bchat-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.bchat-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 14px 12px; flex: none; }
.bchat-quick[hidden] { display: none; }
.bchat-chip { margin: 0; padding: 8px 14px; border: 1.5px solid var(--bchat-teal); border-radius: 999px; background: #fff; color: var(--bchat-deep); font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.2; cursor: pointer; min-height: 0; text-transform: none; letter-spacing: 0; transition: background .15s, color .15s, transform .1s; }
.bchat-chip:hover { background: var(--bchat-teal); color: #fff; }
.bchat-chip:active { transform: scale(.97); }

.bchat-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; background: #fff; border-top: 1px solid var(--bchat-line); flex: none; margin: 0; }
.bchat-input { flex: 1; min-height: 42px; max-height: 120px; margin: 0; padding: 10px 16px; border: 1.5px solid var(--bchat-line); border-radius: 22px; background: var(--bchat-cream); color: var(--bchat-ink); font: inherit; font-size: 16px; line-height: 1.35; resize: none; box-shadow: none; overflow-y: auto; }
.bchat-input:focus { border-color: var(--bchat-teal); background: #fff; outline: none; }
.bchat-input:focus-visible { outline: 3px solid #F2A672; outline-offset: 1px; }
.bchat-send { display: grid; place-items: center; flex: none; width: 42px; height: 42px; padding: 0; margin: 0; border: 0; border-radius: 50%; background: var(--bchat-orange); color: #fff; cursor: pointer; min-height: 0; line-height: 1; transition: background .15s, opacity .15s, transform .1s; }
.bchat-send:hover:not(:disabled) { background: #A94108; }
.bchat-send:active:not(:disabled) { transform: scale(.94); }
.bchat-send:disabled { opacity: .4; cursor: default; }
.bchat-disc { margin: 0; padding: 0 16px 10px; background: #fff; color: var(--bchat-muted); font-size: 11.5px; line-height: 1.35; text-align: center; flex: none; }
.bchat-disc[hidden] { display: none; }

/* Phones: a pop-up card over a dimmed page, with a clear close (X) button. */
@media (max-width: 600px) {
	.bchat-root.is-open { inset: 0; right: 0; left: 0; bottom: 0; background: rgba(26, 24, 21, .55); }
	.bchat-root.is-open .bchat-panel { position: fixed; top: calc(env(safe-area-inset-top) + 12px); right: 10px; bottom: calc(env(safe-area-inset-bottom) + 10px); left: 10px; width: auto; height: auto; max-height: none; border-radius: 22px; border: 0; transform-origin: center; }
	.bchat-min { width: 40px; height: 40px; background: rgba(255, 255, 255, .22); }
	.bchat-min svg { display: none; }
	.bchat-min::before { content: "\2715"; font-size: 18px; font-weight: 700; line-height: 1; }
	.bchat-form { padding-bottom: 10px; }
	.bchat-disc { padding-bottom: 10px; }
	.bchat-bubble { max-width: 84%; }
}
@media (prefers-reduced-motion: reduce) {
	.bchat-panel, .bchat-row, .bchat-launcher, .bchat-chip, .bchat-send { animation: none !important; transition: none !important; }
	.bchat-dots i { animation: none; opacity: .8; }
	.bchat-log { scroll-behavior: auto; }
}

/* ---------- shopping cards: products, cart, order summary, buttons ---------- */
.bchat-col { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; flex: 1; max-width: calc(100% - 38px); }
.bchat-col .bchat-bubble { max-width: 100%; }
.bchat-card { width: 100%; background: #fff; border: 1px solid var(--bchat-line); border-radius: 18px; padding: 10px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 2px rgba(26, 24, 21, .04); }
.bchat-card__title { font-weight: 700; font-size: 14px; }
.bchat-pill { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: #FFF1E6; color: #8A3607; font-size: 12px; font-weight: 700; }
.bchat-prod { display: flex; gap: 10px; align-items: flex-start; padding: 6px; border-radius: 14px; background: var(--bchat-cream); }
.bchat-prod__img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: none; background: #E4F1F2; }
.bchat-prod__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bchat-prod__name { font-weight: 700; font-size: 14px; line-height: 1.25; color: var(--bchat-ink); text-decoration: none; overflow-wrap: anywhere; }
a.bchat-prod__name:hover { text-decoration: underline; }
.bchat-prod__price { font-size: 13.5px; color: var(--bchat-deep); font-weight: 600; }
.bchat-prod__note { font-size: 12px; color: var(--bchat-muted); }
.bchat-prod__note.is-out { color: #B3261E; font-weight: 600; }
.bchat-line { display: flex; gap: 10px; align-items: flex-start; padding: 4px 0; border-bottom: 1px dashed var(--bchat-line); }
.bchat-line:last-of-type { border-bottom: 0; }
.bchat-line__img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: none; background: #E4F1F2; }
.bchat-line__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bchat-line__name { font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
.bchat-line__sub { font-size: 12.5px; color: var(--bchat-muted); }
.bchat-totals { margin: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 4px; border-top: 1px solid var(--bchat-line); }
.bchat-totals div { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.bchat-totals dt, .bchat-totals dd { margin: 0; }
.bchat-totals .is-strong { font-weight: 800; font-size: 15px; }
.bchat-card__deliver, .bchat-card__note { margin: 0; font-size: 12.5px; color: var(--bchat-muted); overflow-wrap: anywhere; }
.bchat-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.bchat-btn { display: inline-block; margin: 0; padding: 9px 14px; border: 1.5px solid var(--bchat-teal); border-radius: 999px; background: #fff; color: var(--bchat-deep); font: inherit; font-size: 13.5px; font-weight: 700; line-height: 1.2; cursor: pointer; text-decoration: none; text-align: center; min-height: 0; text-transform: none; letter-spacing: 0; transition: background .15s, color .15s, transform .1s; }
.bchat-btn:hover:not(:disabled) { background: var(--bchat-teal); color: #fff; }
.bchat-btn:active:not(:disabled) { transform: scale(.97); }
.bchat-btn:disabled { opacity: .45; cursor: default; }
.bchat-btn.is-small { padding: 5px 11px; font-size: 12.5px; }
.bchat-card--summary .bchat-actions .bchat-btn:first-child, .bchat-card--order .bchat-actions .bchat-btn--link, .bchat-card--cart .bchat-actions .bchat-btn:first-child:last-child { background: var(--bchat-orange); border-color: var(--bchat-orange); color: #fff; }
.bchat-card--summary .bchat-actions .bchat-btn:first-child:hover:not(:disabled), .bchat-card--order .bchat-actions .bchat-btn--link:hover, .bchat-card--cart .bchat-actions .bchat-btn:first-child:last-child:hover:not(:disabled) { background: #A94108; border-color: #A94108; }
.bchat-card--summary .bchat-actions .bchat-btn:first-child { flex: 1 1 100%; }
.bchat-row--support .bchat-card a.bchat-btn { color: var(--bchat-deep); }
.bchat-row--support .bchat-card--order a.bchat-btn--link { color: #fff; }
@media (max-width: 600px) { .bchat-col { max-width: calc(100% - 38px); } }