/* Site chat "Ask .bnito": corner bubble + panel. Approved mock-up: chat-corner-v6 (29 Oct).
   Everything is scoped under .bxc so it cannot touch the page. */
.bxc {
  --bxc-ink: #f0eadc;
  --bxc-muted: rgba(240, 234, 220, .72);
  --bxc-faint: rgba(240, 234, 220, .45);
  --bxc-lime: #c8f542;
  --bxc-lime-bright: #d8ff55;
  --bxc-teal: #2fa084;
  --bxc-line: rgba(240, 234, 220, .14);
  --bxc-slate: #14191e;
  --bxc-lift: 0px;
  --bxc-display: "deuterium-variable", 'Archivo', sans-serif;
  --bxc-body: 'Archivo', system-ui, sans-serif;
  --bxc-label: 'Space Mono', monospace;
  --bxc-grad: linear-gradient(135deg, var(--bxc-lime-bright), var(--bxc-lime) 45%, var(--bxc-teal));
  font-family: var(--bxc-body);
  color: var(--bxc-ink);
}
.bxc *, .bxc *::before, .bxc *::after { box-sizing: border-box; }
.bxc [hidden] { display: none !important; }

.bxc-bubble {
  position: fixed; right: 32px; bottom: calc(32px + var(--bxc-lift)); z-index: 9990;
  width: 64px; height: 64px; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  background: var(--bxc-grad); box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease, bottom .2s ease;
}
.bxc-bubble:hover { transform: scale(1.05); }
.bxc-bubble:focus-visible { outline: 2px solid var(--bxc-ink); outline-offset: 3px; }
.bxc-mark {
  width: 40px; height: 26px; background: #080808;
  -webkit-mask: url(/assets/logo.svg) center / contain no-repeat; mask: url(/assets/logo.svg) center / contain no-repeat;
}
.bxc-x { font: 700 22px/1 var(--bxc-body); color: #080808; }

.bxc-nudge {
  position: fixed; right: 108px; bottom: calc(112px + var(--bxc-lift)); z-index: 9990; width: 250px;
  background: var(--bxc-slate); border: 1px solid var(--bxc-line); border-radius: 14px 14px 4px 14px;
  padding: 12px 16px; font-size: 15px; line-height: 1.4; color: var(--bxc-ink); text-align: left; cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4); animation: bxc-in .35s ease both;
}
.bxc-nudge b { display: block; margin-bottom: 4px; font: 400 11px/1.2 var(--bxc-label); letter-spacing: .2em; text-transform: uppercase; color: var(--bxc-lime); }

.bxc-panel {
  position: fixed; right: 32px; bottom: calc(112px + var(--bxc-lift)); z-index: 9991;
  width: 400px; height: min(690px, calc(100vh - 140px - var(--bxc-lift)));
  display: flex; flex-direction: column; overflow: hidden;
  background: rgba(16, 20, 24, .97); border: 1px solid var(--bxc-line); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6); animation: bxc-in .25s ease both;
}
.bxc-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--bxc-line); }
.bxc-head img { width: 46px; height: auto; }
.bxc-title { flex: 1; min-width: 0; }
.bxc-title b { display: block; font: 400 12px/1.4 var(--bxc-label); letter-spacing: .22em; text-transform: uppercase; color: var(--bxc-lime); }
.bxc-title span { font-size: 12.5px; color: var(--bxc-muted); }
.bxc-close { background: none; border: 0; color: var(--bxc-muted); font-size: 18px; cursor: pointer; padding: 6px; }
.bxc-close:focus-visible { outline: 2px solid var(--bxc-lime); border-radius: 6px; }

.bxc-body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.bxc-hello { font: 700 30px/1.05 var(--bxc-display); margin: 2px 0 4px; }
.bxc-hello em { font-style: normal; color: var(--bxc-teal); }
.bxc-m { font-size: 14.5px; line-height: 1.45; padding: 10px 13px; border-radius: 14px; max-width: 86%; white-space: pre-wrap; overflow-wrap: anywhere; }
.bxc-m.bot { background: rgba(240, 234, 220, .07); align-self: flex-start; border-bottom-left-radius: 4px; }
.bxc-m.you { background: linear-gradient(135deg, var(--bxc-lime-bright), var(--bxc-lime)); color: #080808; align-self: flex-end; border-bottom-right-radius: 4px; font-weight: 500; }
.bxc-typing { align-self: flex-start; display: flex; gap: 5px; padding: 12px 14px; background: rgba(240, 234, 220, .07); border-radius: 14px; }
.bxc-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--bxc-muted); animation: bxc-dot 1s infinite ease-in-out; }
.bxc-typing i:nth-child(2) { animation-delay: .15s; }
.bxc-typing i:nth-child(3) { animation-delay: .3s; }

.bxc-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.bxc-chip {
  font: 400 11px/1.2 var(--bxc-label); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  background: none; border: 1px solid rgba(200, 245, 66, .55); color: var(--bxc-lime); padding: 7px 11px; border-radius: 999px;
}
.bxc-chip:hover, .bxc-chip:focus-visible { background: rgba(200, 245, 66, .12); outline: none; }
.bxc-chip[aria-pressed="true"] { background: var(--bxc-lime); color: #080808; }
.bxc-chip:disabled { cursor: default; opacity: .55; }
.bxc-chip[aria-pressed="true"]:disabled { opacity: 1; }

.bxc-card { border: 1px solid var(--bxc-line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: rgba(0, 0, 0, .25); }
.bxc-card input, .bxc-card textarea {
  width: 100%; border: 1px solid var(--bxc-line); border-radius: 10px; padding: 10px 12px; background: transparent;
  color: var(--bxc-ink); font: 14px/1.4 var(--bxc-body); resize: vertical;
}
.bxc-card input::placeholder, .bxc-card textarea::placeholder { color: var(--bxc-muted); }
.bxc-card input:focus, .bxc-card textarea:focus { outline: none; border-color: var(--bxc-lime); }
.bxc-go {
  align-self: flex-start; border: 0; cursor: pointer; background: var(--bxc-grad); color: #080808; border-radius: 999px; padding: 10px 18px;
  font: 700 11px/1.2 var(--bxc-label); letter-spacing: .2em; text-transform: uppercase;
}
.bxc-go:disabled { opacity: .5; cursor: default; }
.bxc-card small { font-size: 11.5px; color: var(--bxc-muted); }
.bxc-card small a { color: var(--bxc-lime); }
.bxc-status { font-size: 12.5px; color: var(--bxc-muted); min-height: 1em; }

.bxc-foot { border-top: 1px solid var(--bxc-line); padding: 12px 14px; display: flex; gap: 10px; align-items: center; margin: 0; }
.bxc-in {
  flex: 1; min-width: 0; border: 1px solid var(--bxc-line); border-radius: 999px; padding: 11px 16px; background: transparent;
  color: var(--bxc-ink); font: 16px/1.2 var(--bxc-body); /* 16px stops iOS zooming in */
}
.bxc-in::placeholder { color: var(--bxc-muted); }
.bxc-in:focus { outline: none; border-color: var(--bxc-lime); }
.bxc-send { width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: var(--bxc-lime); color: #080808; font: 700 18px/1 var(--bxc-body); cursor: pointer; }
.bxc-send:disabled { opacity: .5; cursor: default; }
.bxc-fine { font: 400 10px/1.2 var(--bxc-label); letter-spacing: .12em; text-transform: uppercase; color: var(--bxc-faint); text-align: center; padding: 0 0 10px; }
.bxc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 600px) {
  .bxc-bubble { right: 18px; bottom: calc(22px + var(--bxc-lift)); width: 58px; height: 58px; }
  .bxc-nudge { right: 88px; bottom: calc(96px + var(--bxc-lift)); width: min(210px, calc(100vw - 110px)); font-size: 14px; }
  .bxc-panel { inset: 44px 0 var(--bxc-lift) 0; width: auto; height: auto; border-radius: 20px 20px 0 0; border-width: 1px 0 0; } /* stops above the cookie banner */
  .bxc-head img { width: 40px; }
  .bxc-hello { font-size: 27px; }
  .bxc-open .bxc-bubble { display: none; }
}

@keyframes bxc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes bxc-dot { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .bxc-bubble, .bxc-nudge, .bxc-panel { animation: none; transition: none; }
  .bxc-typing i { animation: none; opacity: .7; }
}