/**
 * Zebridge Bot — Floating Chat Widget Styles
 * Premium light theme: white surfaces, #151515 ink, #FFB716 gold accents.
 * Zebridge brand: SHARP SQUARE corners everywhere (border-radius: 0),
 * soft shadows, smooth transitions.
 *
 * Colors are literal hex (the panel is appended to <body>, outside any theme scope).
 */

/* ==========================================
   Floating Trigger Button
   ========================================== */
.zb-bot-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99998;
  width: 56px;
  height: 56px;
  /* The theme declares a bare `button { padding: 15px 45px }`, which turned this
     56x56 target into a 90x56 box with a 0px-wide content area and crushed the
     logo to zero width. A class selector outranks an element selector, so no
     !important is needed here. */
  padding: 0;
  background: #FFB716;
  border: none;
  border-radius: 0 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(255, 183, 22, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.25s ease;
}

.zb-bot-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(255, 183, 22, 0.6);
}

/* The theme also ships `button:hover { background:#151515; color:#fff; z-index:1 }`
   (wp-content/themes/zidex/css/styles32d4.css). `button:hover` is specificity 0,1,1
   while .zb-bot-btn is only 0,1,0, and the widget's own :hover rule declared no
   background at all - so on hover the gold trigger was painted near-black AND fell
   from z-index 99998 to 1. Over the dark hero and the #151515 footer the button
   then simply disappeared while staying clickable: the "the bot button vanishes
   when I hover it" report, most visible on pages whose section behind it is dark.
   Lock paint and layer for every interaction state; an id selector plus
   !important cannot be out-ranked by a theme element rule.
   :not(.zb-bot-btn--hidden) is essential: the trigger is deliberately faded out
   while the panel is open and it still holds focus after the click, so a blanket
   !important here would bring the hidden button back on top of the panel.
   opacity/visibility are left alone on purpose - the theme never touches them and
   the --hidden state owns them. */
#zb-bot-btn:not(.zb-bot-btn--hidden):hover,
#zb-bot-btn:not(.zb-bot-btn--hidden):focus,
#zb-bot-btn:not(.zb-bot-btn--hidden):focus-visible,
#zb-bot-btn:not(.zb-bot-btn--hidden):active {
  background: #FFB716 !important;
  color: #151515 !important;
  z-index: 99998 !important;
}

.zb-bot-btn--hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.6);
}

/* The trigger's mark is the chat glyph below, not the logo.
   /favicon.png is a ROUND orange badge carrying the ZEBRIDGE wordmark: at 30px it
   would be an unreadable circle stacked on the dark glyph, inside a square gold
   button. It was also never actually seen - the theme's `button { padding:
   15px 45px }` left this flex item a 0px content box, so it rendered at width 0
   on every page since the widget shipped. Fixing the padding brought it back, so
   it is hidden deliberately here to keep the button looking exactly as visitors
   know it. The <img> stays in the DOM (and the JS error fallback stays valid):
   to switch to the logo, delete the display line and give .zb-bot-btn__icon
   `display: none`. */
.zb-bot-btn__logo {
  display: none;
  position: relative;
  z-index: 2;
  width: 30px;
  height: 30px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.zb-bot-btn__icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Subtle emanating ripple rings (attention cue, non-intrusive). */
.zb-bot-btn__pulse,
.zb-bot-btn__ripple {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 2px solid #FFB716;
  background: transparent;
  pointer-events: none;
  animation: zbBotRipple 2.8s ease-out infinite;
}

.zb-bot-btn__ripple { animation-delay: 1.4s; }

.zb-bot-btn:hover .zb-bot-btn__pulse,
.zb-bot-btn:hover .zb-bot-btn__ripple { animation-play-state: paused; }

@keyframes zbBotRipple {
  0%   { transform: scale(1);   opacity: 0.65; }
  100% { transform: scale(1.85); opacity: 0; }
}

/* ==========================================
   Multilingual incentive teaser
   ========================================== */
.zb-bot-teaser {
  position: fixed;
  right: 92px;
  bottom: 34px;
  z-index: 99998;
  max-width: 230px;
  background: #FFFFFF;
  color: #151515;
  border: 1px solid #E7E9EE;
  border-left: 3px solid #FFB716;
  border-radius: 0 !important;
  box-shadow: 0 8px 24px rgba(21, 21, 21, 0.14);
  padding: 11px 30px 11px 14px;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  line-height: 1.35;
  cursor: pointer;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
  animation: zbBotTeaserIn 0.45s ease;
}

.zb-bot-teaser::after {
  content: '';
  position: absolute;
  right: -7px;
  bottom: 16px;
  width: 12px;
  height: 12px;
  background: #FFFFFF;
  border-top: 1px solid #E7E9EE;
  border-right: 1px solid #E7E9EE;
  transform: rotate(45deg);
}

.zb-bot-teaser__text {
  display: inline-block;
  font-weight: 600;
  color: #151515;
}

.zb-bot-teaser--swap .zb-bot-teaser__text {
  animation: zbBotTextIn 0.45s ease;
}

.zb-bot-teaser__close {
  position: absolute;
  top: 1px;
  right: 4px;
  background: none;
  border: none;
  color: #151515;
  opacity: 0.4;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  transition: opacity 0.15s;
}

.zb-bot-teaser__close:hover,
.zb-bot-teaser__close:focus,
.zb-bot-teaser__close:active {
  /* The theme's `button:hover { background:#151515; color:#fff }` also reached this
     glyph (its own :hover rule only touched opacity), turning a faint ✕ on a white
     card into a black chip. Same leak as the trigger, smaller victim. */
  background: transparent !important;
  color: #151515 !important;
  opacity: 0.9;
}

.zb-bot-teaser--hidden {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

@keyframes zbBotTeaserIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes zbBotTextIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ==========================================
   Chat Panel
   ========================================== */
.zb-bot-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  width: 380px;
  height: 520px;
  max-height: calc(100vh - 48px);
  background: #FFFFFF;
  border: 1px solid #E7E9EE;
  border-radius: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  box-shadow: 0 12px 40px rgba(21, 21, 21, 0.16), 0 2px 8px rgba(21, 21, 21, 0.08);
}

.zb-bot-panel--open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ==========================================
   Header
   ========================================== */
.zb-bot-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: #FFFFFF;
  border-bottom: 1px solid #E7E9EE;
  flex-shrink: 0;
  position: relative;
}

.zb-bot-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  background: linear-gradient(90deg, #FFB716 0%, #E89A1B 100%);
}

.zb-bot-header__logo {
  width: 36px;
  height: 36px;
  background: #FFFFFF;
  border: 2px solid #FFB716;
  border-radius: 0 !important;
  object-fit: contain;
  padding: 2px;
  box-shadow: 0 2px 8px rgba(255, 183, 22, 0.35);
  flex-shrink: 0;
}

/* Agent profile photo, shown beside the title once a human is online / has taken
   over. Round avatar in the same gold ring family as the logo. */
.zb-bot-header__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50% !important;
  object-fit: cover;
  border: 2px solid #FFB716;
  box-shadow: 0 2px 8px rgba(255, 183, 22, 0.30);
  flex-shrink: 0;
  background: #EEE;
}

.zb-bot-header__title {
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #151515;
  flex: 1;
}

/* Title + live presence share one stacked column (Hybrid Chat badge). */
.zb-bot-header__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.zb-bot-header__meta .zb-bot-header__title { flex: 0 1 auto; }
.zb-bot-presence {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.2px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zb-bot-presence__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b0b3b8;
  flex: 0 0 auto;
}
.zb-bot-presence--online {
  color: #1a7f43;
}
.zb-bot-presence--online .zb-bot-presence__dot {
  background: #2ec46b;
  box-shadow: 0 0 0 3px rgba(46, 196, 107, 0.18);
}

.zb-bot-header__lang {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #8A5A00;
  background: #FFF6E0;
  border: 1px solid #FFD97A;
  padding: 3px 9px;
  border-radius: 0 !important;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.zb-bot-header__lang:hover {
  background: #FFEFCC;
  border-color: #FFC24D;
}
.zb-bot-header__lang .zb-bot-flag {
  margin-right: 0;
}
.zb-bot-header__lang-code {
  line-height: 1;
}

.zb-bot-header__close {
  background: none;
  border: none;
  color: #151515;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  opacity: 0.55;
  transition: opacity 0.15s, color 0.15s;
}

/* Same theme leak as above: lock the paint, keep the author's intent (a faint ✕
   that firms up to gold on hover, never a black chip on the white header). */
#zb-bot-panel .zb-bot-header__close:hover,
#zb-bot-panel .zb-bot-header__close:focus,
#zb-bot-panel .zb-bot-header__close:active {
  background: transparent !important;
  color: #E89A1B !important;
  opacity: 1;
}

/* ==========================================
   Persistent switch-to-agent bar (R1)
   ========================================== */
.zb-bot-agentbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(90deg, #FFF6E0 0%, #FDEBC4 100%);
  border-bottom: 1px solid #FFD97A;
  flex-shrink: 0;
}
.zb-bot-agentbar__msg {
  flex: 1;
  min-width: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  line-height: 1.3;
  color: #6B4E00;
}
.zb-bot-cta-agent {
  flex: 0 0 auto;
  cursor: pointer;
  border: none;
  background: #FFB716;
  color: #151515;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 8px 12px;
  border-radius: 0 !important;
  box-shadow: 0 2px 8px rgba(255, 183, 22, 0.40);
  transition: background 0.15s, transform 0.05s;
  animation: zb-cta-pulse 1.8s ease-out infinite;
}
.zb-bot-cta-agent:hover { background: #E89A1B; animation-play-state: paused; }
.zb-bot-cta-agent:active { transform: translateY(1px); }
/* Attention pulse: a soft gold halo breathing behind the switch-to-agent CTA. */
@keyframes zb-cta-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 183, 22, 0.55), 0 2px 8px rgba(255, 183, 22, 0.40); }
  70%  { box-shadow: 0 0 0 10px rgba(255, 183, 22, 0), 0 2px 8px rgba(255, 183, 22, 0.40); }
  100% { box-shadow: 0 0 0 0 rgba(255, 183, 22, 0), 0 2px 8px rgba(255, 183, 22, 0.40); }
}
@media (prefers-reduced-motion: reduce) {
  .zb-bot-cta-agent { animation: none; }
}
.zb-bot-agentbar__close {
  flex: 0 0 auto;
  cursor: pointer;
  border: none;
  background: none;
  color: #8A5A00;
  font-size: 18px;
  line-height: 1;
  padding: 2px 4px;
  opacity: 0.6;
}
.zb-bot-agentbar__close:hover { opacity: 1; }

/* ==========================================
   Messages Area
   ========================================== */
.zb-bot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
  background: #FBFBFC;
}

.zb-bot-messages::-webkit-scrollbar {
  width: 5px;
}

.zb-bot-messages::-webkit-scrollbar-track {
  background: #F1F2F4;
}

.zb-bot-messages::-webkit-scrollbar-thumb {
  background: #D1D5DB;
  border-radius: 4px !important;
}

.zb-bot-messages::-webkit-scrollbar-thumb:hover {
  background: #FFB716;
}

/* Message rows */
.zb-bot-msg {
  display: flex;
  max-width: 85%;
}

.zb-bot-msg--user {
  align-self: flex-end;
}

.zb-bot-msg--bot {
  align-self: flex-start;
}

.zb-bot-msg--anim {
  animation: zbBotFadeIn 0.25s ease;
}

@keyframes zbBotFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Bubbles */
.zb-bot-msg--user .zb-bot-bubble {
  background: #FFB716;
  color: #151515;
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  border-radius: 10px !important;
  box-shadow: 0 2px 10px rgba(255, 183, 22, 0.3);
}

.zb-bot-msg--bot .zb-bot-bubble {
  background: #FFFFFF;
  color: #151515;
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.55;
  border: 1px solid #E7E9EE;
  border-left: 3px solid #FFB716;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(21, 21, 21, 0.08), 0 4px 14px rgba(21, 21, 21, 0.06);
}

.zb-bot-bubble strong {
  font-weight: 700;
  color: #151515;
}

.zb-bot-msg--user .zb-bot-bubble strong {
  color: #151515;
}

.zb-bot-bubble code {
  background: #FFF6E0;
  color: #8A5A00;
  padding: 1px 5px;
  border-radius: 4px !important;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 12px;
}

/* ==========================================
   Typing Indicator
   ========================================== */
.zb-bot-typing {
  display: flex;
  gap: 5px;
  padding: 10px 16px;
  align-self: flex-start;
}

.zb-bot-typing span {
  width: 7px;
  height: 7px;
  background: #FFB716;
  border-radius: 50% !important;
  animation: zbBotBounce 1.4s infinite;
}

.zb-bot-typing span:nth-child(2) { animation-delay: 0.2s; }
.zb-bot-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes zbBotBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* Labelled human-typing row. The bare dots above are the AI "still thinking"
   state; this one names the adviser so the two read differently. */
.zb-bot-typing-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 8px;
  align-self: flex-start;
}

.zb-bot-typing-row .zb-bot-typing {
  padding: 0;
}

.zb-bot-typing__label {
  font-size: 12px;
  font-style: italic;
  color: #8A5A00;
}

/* Render spins a free instance down after 15 idle minutes and it then takes
   ~23s to answer the first request. Three bouncing dots cannot tell "the bot is
   thinking" apart from "the server is booting", so the long wait gets its own
   labelled line, switched on from zb-bot.js only past the threshold. */
.zb-bot-wake {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 0 16px 10px;
  align-self: flex-start;
  font-size: 12px;
  font-style: italic;
  color: #8A5A00;
}

/* Declared after .zb-bot-wake on purpose: both are single classes, so the one
   that turns the line on has to come last to win. */
.zb-bot-wake--on {
  display: flex;
}

/* ==========================================
   Receipt ticks (WhatsApp-style ladder)
   ========================================== */
/* Drawn inside the visitor's own gold bubble. Scoped to #zb-bot-panel and
   !important on colour: the zidex theme paints element text broadly, and a tick
   that silently turns dark is a lie about the receipt state. */
#zb-bot-panel .zb-bot-ticks {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -3px;   /* fuse the pair of ✓ into one double tick */
  vertical-align: 1px;
  font-family: 'Segoe UI', Arial, sans-serif !important;
}

#zb-bot-panel .zb-bot-ticks--block {
  display: block;
  margin: 3px 0 0;
  text-align: right;
}

#zb-bot-panel .zb-bot-ticks[data-state="sent"],
#zb-bot-panel .zb-bot-ticks[data-state="delivered"] {
  color: rgba(21, 21, 21, .48) !important;
}

#zb-bot-panel .zb-bot-ticks[data-state="read"] {
  color: #0B6BCB !important;
}

/* ==========================================
   Quick-Action Chips
   ========================================== */
.zb-bot-chips {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 16px 12px;
  background: #FFFFFF;
}

.zb-bot-chip {
  background: #FFFFFF;
  border: 1.5px solid #FFB716;
  color: #151515;
  padding: 6px 14px;
  font-size: 12px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  border-radius: 16px !important;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(21, 21, 21, 0.06);
  transition: background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.zb-bot-chip:hover {
  background: #FFB716;
  color: #151515;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 183, 22, 0.35);
}

/* ==========================================
   Theme-leak neutralizer (CRITICAL)
   ========================================== */
/* The zidex theme (wp-content/themes/zidex/css/styles32d4.css) declares:
     button::before, button::after { background:#151515; position:absolute; z-index:-1 }
     button::after { height:100%; width:0 }
     button:hover:after { width:100% }
   That is a BLACK overlay sliding across every <button> on hover/focus, and on
   touch devices it sticks after a tap. Because it is a separate pseudo-element,
   no amount of `background !important` on the button itself can beat it -- this
   is why the send button kept turning black right after the first message was
   sent. The booking widget documents the same fix (see css/booking.css).
   Only <button> elements are targeted: the widget's own decorative pseudo-
   elements live on .zb-bot-teaser / .zb-bot-header (divs) and must stay. */
#zb-bot-panel button::before,
#zb-bot-panel button::after,
#zb-bot-btn::before,
#zb-bot-btn::after {
  display: none !important;
  content: normal !important;
}

/* Confine any stray absolutely-positioned theme child to the button box
   instead of letting it resolve against the fixed panel. NOTE: deliberately no
   `isolation`/`transform`/`filter` here -- those create a stacking context,
   which is what lifts the theme's z-index:-1 overlay ON TOP of the button's own
   background (the real reason the gold turned black while :hover was stuck). */
#zb-bot-panel .zb-bot-send,
#zb-bot-panel .zb-bot-attach,
#zb-bot-panel .zb-bot-chip,
#zb-bot-panel .zb-bot-reg__submit,
#zb-bot-panel .zb-bot-engage__btn {
  position: relative;
}

/* ==========================================
   Input Row
   ========================================== */
.zb-bot-input-row {
  display: flex;
  align-items: stretch;
  gap: 8px !important;
  /* Symmetric inset so neither icon button sits flush against a panel edge. */
  padding: 12px 14px !important;
  border-top: 1px solid #E7E9EE;
  background: #FFFFFF;
  flex-shrink: 0;
}

#zb-bot-panel .zb-bot-input-row > .zb-bot-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.zb-bot-input {
  flex: 1;
  min-width: 0;
  background: #F7F8FA;
  border: 1.5px solid #E7E9EE;
  color: #151515;
  padding: 10px 14px;
  font-size: 13.5px;
  font-family: 'Montserrat', sans-serif;
  border-radius: 6px !important;
  outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.zb-bot-input::placeholder {
  color: #9CA3AF;
}

.zb-bot-input:focus {
  border-color: #FFB716;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(255, 183, 22, 0.15);
}

/* Icon buttons (send + attach).
   Every rule is scoped to #zb-bot-panel so it outranks the theme's class
   selectors regardless of load order, and geometry/paint are locked with
   !important: the zidex theme ships a mobile rule for button[type="submit"]
   (padding: 12px 20px !important, min-width, font-size) plus a global
   ::selection { background: #151515 }, which together stretched the send
   button and painted it black after a tap. */
#zb-bot-panel .zb-bot-send,
#zb-bot-panel .zb-bot-attach {
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 10px !important;
  /* Button font-size is zeroed so stray theme text can't widen the box; the
     glyph span below restores its own size. */
  font-size: 0 !important;
  line-height: 1 !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

/* The icon itself is a text glyph (immune to theme svg/path cascade rules). */
#zb-bot-panel .zb-bot-ico {
  display: block;
  font-size: 19px;
  line-height: 1;
  font-family: 'Segoe UI Symbol', 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', sans-serif !important;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

#zb-bot-panel .zb-bot-send {
  background: #FFB716 !important;
  background-color: #FFB716 !important;
  background-image: none !important;
  color: #151515 !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(255, 183, 22, 0.4) !important;
}

#zb-bot-panel .zb-bot-send .zb-bot-ico { color: #151515 !important; }

#zb-bot-panel .zb-bot-send:hover,
#zb-bot-panel .zb-bot-send:focus,
#zb-bot-panel .zb-bot-send:active {
  background: #E89A1B !important;
  background-color: #E89A1B !important;
  color: #151515 !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(255, 183, 22, 0.5) !important;
}

#zb-bot-panel .zb-bot-send:hover .zb-bot-ico { transform: translateX(1px); }

/* Feedback on press uses shadow only -- never a transform on the button
   itself (see the stacking-context note above). */
#zb-bot-panel .zb-bot-send:active {
  background: #D98E14 !important;
  background-color: #D98E14 !important;
  box-shadow: 0 1px 3px rgba(255, 183, 22, 0.45) !important;
}

/* Neutralise the theme's dark ::selection on both icon buttons. */
#zb-bot-panel .zb-bot-send::selection,
#zb-bot-panel .zb-bot-send::-moz-selection,
#zb-bot-panel .zb-bot-attach::selection,
#zb-bot-panel .zb-bot-attach::-moz-selection,
#zb-bot-panel .zb-bot-ico::selection,
#zb-bot-panel .zb-bot-ico::-moz-selection {
  background: transparent !important;
  color: inherit !important;
}

/* ==========================================
   Attach (paperclip) button + file sharing
   ========================================== */
/* Geometry/paint come from the shared #zb-bot-panel icon-button lock above.
   The fill is deliberately gold-tinted (it used to be #FFFFFF, which read as
   an empty white square once the theme erased the icon). */
#zb-bot-panel .zb-bot-attach {
  background: #FFF6E0 !important;
  background-color: #FFF6E0 !important;
  background-image: none !important;
  color: #8A5A00 !important;
  border: 1.5px solid #FFD97A !important;
  box-shadow: 0 1px 3px rgba(255, 183, 22, 0.18) !important;
}

#zb-bot-panel .zb-bot-attach .zb-bot-ico { color: #8A5A00 !important; }

#zb-bot-panel .zb-bot-attach:hover,
#zb-bot-panel .zb-bot-attach:focus,
#zb-bot-panel .zb-bot-attach:active {
  background: #FFE9B5 !important;
  background-color: #FFE9B5 !important;
  color: #8A5A00 !important;
  border-color: #FFB716 !important;
  box-shadow: 0 3px 10px rgba(255, 183, 22, 0.3) !important;
}

/* Attachment cards rendered inside a chat bubble. */
.zb-bot-att {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  color: inherit;
  border-radius: 6px !important;
}

.zb-bot-att--img {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.zb-bot-att--img img {
  display: block;
  max-width: 100%;
  max-height: 220px;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid #E7E9EE;
  border-radius: 6px !important;
  box-shadow: 0 1px 4px rgba(21, 21, 21, 0.12);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.zb-bot-att--img:hover img {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(21, 21, 21, 0.18);
}

.zb-bot-att__cap {
  font-size: 11px;
  font-weight: 600;
  color: #8A5A00;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zb-bot-att--file {
  background: #FFFFFF;
  border: 1px solid #E7E9EE;
  border-left: 3px solid #FFB716;
  border-radius: 6px !important;
  padding: 8px 10px;
  min-width: 0;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.zb-bot-att--file:hover {
  border-color: #FFB716;
  box-shadow: 0 3px 10px rgba(21, 21, 21, 0.1);
  transform: translateY(-1px);
}

.zb-bot-msg--user .zb-bot-att--file {
  background: #FFEFCB;
  border-color: #FFD97A;
}

.zb-bot-att__ico {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

.zb-bot-att__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.zb-bot-att__name {
  font-size: 12.5px;
  font-weight: 600;
  color: #151515;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zb-bot-att__sub {
  font-size: 11px;
  color: #6b7280;
}

/* Small inline country flag (registration form + bubbles). */
.zb-bot-flag {
  display: inline-block;
  width: 20px;
  height: 13px;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 6px;
  border: 1px solid rgba(21, 21, 21, 0.15);
  border-radius: 2px !important;
}

/* Registration country row. */
.zb-bot-reg__country {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  margin-top: 2px;
  font-size: 12px;
  background: #FFF9EC;
  border: 1px solid #FFD97A;
  border-radius: 6px !important;
}

.zb-bot-reg__country-label {
  font-weight: 600;
  color: #555555;
}

.zb-bot-reg__country-value {
  display: inline-flex;
  align-items: center;
  color: #151515;
  font-weight: 600;
}

/* Visitor language + country choosers. Used inline in the registration gate and
   inside the header popover, so both stay in sync visually. */
.zb-bot-prefs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 10px;
  margin-top: 2px;
  background: #FFF9EC;
  border: 1px solid #FFD97A;
  border-radius: 6px !important;
}
.zb-bot-prefs .zb-bot-reg__label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.zb-bot-prefs__select {
  border: 1px solid #D8DBE2;
  border-radius: 6px !important;
  padding: 8px 10px;
  font-size: 13px;
  font-family: 'Montserrat', sans-serif;
  color: #151515;
  background: #FFFFFF;
  width: 100%;
  cursor: pointer;
}
.zb-bot-prefs__select:focus {
  outline: none;
  border-color: #FFB716;
  box-shadow: 0 0 0 3px rgba(255, 183, 22, 0.18);
}
.zb-bot-prefs__hint {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  color: #8A5A00;
}

/* Popover that hosts the same choosers for a visitor who already registered. */
.zb-bot-prefs-pop {
  position: absolute;
  top: 52px;
  right: 10px;
  z-index: 12;
  width: 240px;
  max-width: calc(100% - 20px);
  padding: 12px;
  background: #FFFFFF;
  border: 1px solid #E2E5EB;
  border-radius: 8px !important;
  box-shadow: 0 10px 28px rgba(21, 21, 21, 0.18);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.zb-bot-prefs-pop__title {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #151515;
  border-left: 3px solid #FFB716;
  padding-left: 8px;
}
.zb-bot-prefs-pop__done {
  align-self: flex-end;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #151515;
  background: #FFB716;
  border: none;
  border-radius: 0 !important;
  padding: 7px 16px;
  cursor: pointer;
}
.zb-bot-prefs-pop__done:hover {
  background: #ffc22e;
}

/* ==========================================
   Touch responsiveness
   ========================================== */
/* Kill the ~300ms tap delay and the grey tap flash on every interactive
   control — the single biggest perceived-speed win on mobile. */
.zb-bot-btn,
.zb-bot-teaser,
.zb-bot-teaser__close,
.zb-bot-header__close,
.zb-bot-chip,
.zb-bot-send,
.zb-bot-attach,
.zb-bot-input,
.zb-bot-reg__input,
.zb-bot-reg__submit {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Lock the page behind the fullscreen (mobile) panel so the soft keyboard
   can't scroll/shift the document while chatting. */
body.zb-bot-noscroll {
  overflow: hidden;
}

/* ==========================================
   Responsive — full-screen on mobile
   ========================================== */
@media (max-width: 480px) {
  .zb-bot-panel {
    /* Anchor to all four edges and size to the DYNAMIC viewport. The previous
       height:100vh (anchored bottom-only) was taller than the visible area on
       mobile browsers, pushing the header + close button off-screen behind the
       browser chrome — which is why the form looked "stuck" with no way out. */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    border: none;
    border-radius: 0 !important;
    box-shadow: none;
  }

  /* Keep the header clear of notches; the close (X) stays pinned top-right. */
  .zb-bot-header {
    padding: calc(12px + env(safe-area-inset-top)) 14px 12px;
  }

  /* Large, easy-to-hit close target on touch. */
  .zb-bot-header__close {
    font-size: 26px;
    min-width: 44px;
    min-height: 44px;
    padding: 8px 12px;
    opacity: 0.7;
  }

  .zb-bot-messages {
    padding: 14px 12px;
  }

  .zb-bot-input-row {
    gap: 7px !important;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom)) !important;
  }

  /* >=16px input text stops iOS Safari auto-zooming on focus; taller fields
     and a chunky submit button make the form comfortable with a thumb. */
  .zb-bot-input,
  .zb-bot-reg__input {
    font-size: 16px;
    padding: 12px 14px;
  }

  .zb-bot-reg__submit {
    padding: 14px;
    font-size: 14px;
    margin-top: 4px;
  }

  .zb-bot-btn {
    bottom: 16px;
    right: 16px;
  }

  .zb-bot-teaser {
    right: 82px;
    bottom: 24px;
    max-width: 180px;
    font-size: 12px;
    padding: 9px 26px 9px 12px;
  }
}

/* Respect users who prefer reduced motion: drop the ripple + swap animations. */
@media (prefers-reduced-motion: reduce) {
  .zb-bot-btn__pulse,
  .zb-bot-btn__ripple,
  .zb-bot-teaser,
  .zb-bot-teaser--swap .zb-bot-teaser__text {
    animation: none;
  }
}

/* Clickable source / reference links inside bot messages */
.zb-bot-bubble a {
  color: #B78600;
  text-decoration: underline;
  word-break: break-all;
}

/* Registration form shown before the first chat interaction */
.zb-bot-reg {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}
.zb-bot-reg__title {
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #151515;
  border-left: 3px solid #FFB716;
  padding-left: 10px;
  line-height: 1.35;
  margin-bottom: 2px;
}
.zb-bot-reg__label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #555555;
}
.zb-bot-reg__input {
  border: 1px solid #D8DBE2;
  border-radius: 6px !important;
  padding: 9px 11px;
  font-size: 13px;
  font-family: 'Montserrat', sans-serif;
  color: #151515;
  background: #FFFFFF;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.zb-bot-reg__input:focus {
  outline: none;
  border-color: #FFB716;
  box-shadow: 0 0 0 3px rgba(255, 183, 22, 0.15);
}
.zb-bot-reg__err {
  color: #C0392B;
  font-size: 11px;
  font-weight: 600;
}
.zb-bot-reg__submit {
  background: #FFB716;
  color: #151515;
  border: none;
  border-radius: 6px !important;
  padding: 11px;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.12s;
}
.zb-bot-reg__submit:hover {
  background: #E89A1B;
  box-shadow: 0 3px 10px rgba(255, 183, 22, 0.4);
  transform: translateY(-1px);
}

/* ==========================================
   Agent Engagement Overlay (chat:started)
   Full-panel takeover: priority notice on top, the agent's prompt in the
   middle, three stacked actions at the bottom. Identical structure on mobile
   and desktop (it fills whatever the panel is — 380x520 card or fullscreen).
   ========================================== */
.zb-bot-engage {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  animation: zbBotEngageIn 0.3s ease;
}

.zb-bot-engage__priority {
  flex-shrink: 0;
  background: linear-gradient(90deg, #FFB716 0%, #E89A1B 100%);
  color: #151515;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.3px;
  line-height: 1.35;
  padding: 16px 18px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(255, 183, 22, 0.35);
}

.zb-bot-engage__body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  align-items: flex-start;
  background: #FBFBFC;
}

.zb-bot-engage__prompt {
  align-self: flex-start;
  max-width: 92%;
  background: #FFFFFF;
  color: #151515;
  border: 1px solid #E7E9EE;
  border-left: 3px solid #FFB716;
  border-radius: 0 !important;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.55;
  box-shadow: 0 1px 3px rgba(21, 21, 21, 0.08), 0 4px 14px rgba(21, 21, 21, 0.06);
}

.zb-bot-engage__prompt a {
  color: #B78600;
  text-decoration: underline;
  word-break: break-all;
}

.zb-bot-engage__actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid #E7E9EE;
  background: #FFFFFF;
}

.zb-bot-engage__btn {
  width: 100%;
  border-radius: 6px !important;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.4px;
  padding: 13px 16px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.12s, box-shadow 0.15s, border-color 0.15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.zb-bot-engage__btn--primary {
  background: #FFB716;
  color: #151515;
  border: none;
  box-shadow: 0 2px 10px rgba(255, 183, 22, 0.4);
}

.zb-bot-engage__btn--primary:hover {
  background: #E89A1B;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255, 183, 22, 0.5);
}

.zb-bot-engage__btn--ghost {
  background: #FFFFFF;
  color: #151515;
  border: 1.5px solid #FFB716;
}

.zb-bot-engage__btn--ghost:hover {
  background: #FFF6E0;
}

.zb-bot-engage__btn--muted {
  background: #FFFFFF;
  color: #6b7280;
  border: 1px solid #E7E9EE;
}

.zb-bot-engage__btn--muted:hover {
  color: #151515;
  border-color: #C7CBD3;
}

@keyframes zbBotEngageIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
  /* Keep the priority notice clear of the notch on fullscreen mobile. */
  .zb-bot-engage__priority {
    padding: calc(18px + env(safe-area-inset-top)) 16px 16px;
    font-size: 15px;
  }

  .zb-bot-engage__prompt {
    font-size: 15px;
  }

  .zb-bot-engage__btn {
    padding: 15px 16px;
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zb-bot-engage { animation: none; }
  #zb-bot-panel .zb-bot-sheet { transition: none; }
}

/* ==========================================================================
   Mineral fact sheets: the (?) icon next to each CAMI material + the
   slide-up sheet it opens inside the chat panel.
   Every theme-facing property is !important: the zidex theme ships global
   button/p/ul rules that otherwise stretch the icon and re-indent the sheet.
   ========================================================================== */
#zb-bot-panel .zb-bot-min {
  display: inline-block !important;
  vertical-align: middle !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  margin: 0 0 0 4px !important;
  border: 1px solid #151515 !important;
  border-radius: 50% !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #151515 !important;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  line-height: 16px !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

#zb-bot-panel .zb-bot-min:hover,
#zb-bot-panel .zb-bot-min:focus {
  opacity: 1;
  background: #FFB716 !important;
  background-color: #FFB716 !important;
  border-color: #FFB716 !important;
  color: #151515 !important;
  transform: translateY(-1px);
  outline: none !important;
}

#zb-bot-panel .zb-bot-min:active {
  transform: translateY(0);
}

/* ---- the sheet ---- */
#zb-bot-panel .zb-bot-sheet {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  max-height: 74%;
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-top: 3px solid #FFB716 !important;
  border-radius: 12px 12px 0 0 !important;
  background: #FFFFFF !important;
  box-shadow: 0 -10px 28px rgba(21, 21, 21, 0.20);
  transform: translateY(105%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s ease, opacity 0.2s ease;
  overflow: hidden;
}

#zb-bot-panel .zb-bot-sheet--open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

#zb-bot-panel .zb-bot-sheet__bar {
  position: relative;
  flex: 0 0 auto;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FBFBFC;
  border-bottom: 1px solid #E7E9EE;
}

#zb-bot-panel .zb-bot-sheet__grip {
  width: 34px;
  height: 4px;
  border-radius: 2px;
  background: #D6D9E0;
  cursor: pointer;
}

#zb-bot-panel .zb-bot-sheet__close {
  position: absolute !important;
  top: 2px !important;
  right: 6px !important;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #151515 !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s ease, background-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

#zb-bot-panel .zb-bot-sheet__close:hover,
#zb-bot-panel .zb-bot-sheet__close:focus {
  opacity: 1;
  background: #F1F2F4 !important;
  outline: none !important;
}

#zb-bot-panel .zb-bot-sheet__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px 18px;
}

#zb-bot-panel .zb-bot-sheet__body::-webkit-scrollbar { width: 5px; }
#zb-bot-panel .zb-bot-sheet__body::-webkit-scrollbar-track { background: #F1F2F4; }
#zb-bot-panel .zb-bot-sheet__body::-webkit-scrollbar-thumb { background: #C9CDD6; }

#zb-bot-panel .zb-bot-sheet__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}

#zb-bot-panel .zb-bot-sheet__img {
  align-self: flex-start;
  max-width: 100%;
  max-height: 120px;
  margin: 0 0 8px;
  border: 1px solid #E7E9EE;
  border-radius: 8px;
  object-fit: cover;
}

#zb-bot-panel .zb-bot-sheet__name {
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Oswald', 'Montserrat', sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #151515 !important;
  text-transform: none !important;
}

#zb-bot-panel .zb-bot-sheet__sym {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid #FFB716;
  border-radius: 4px;
  background: #FFF6E3;
  color: #151515;
  font-family: 'Montserrat', monospace;
  font-size: 11px;
  font-weight: 700;
  vertical-align: 2px;
}

#zb-bot-panel .zb-bot-sheet__cat {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8A9099;
}

#zb-bot-panel .zb-bot-sheet__desc {
  margin: 0 0 12px !important;
  font-size: 13px !important;
  line-height: 1.6;
  color: #2A2C31;
}

#zb-bot-panel .zb-bot-sheet__sec {
  margin: 0 0 12px !important;
  padding: 0 !important;
}

#zb-bot-panel .zb-bot-sheet__sec:last-child { margin-bottom: 0 !important; }

#zb-bot-panel .zb-bot-sheet__label {
  margin: 0 0 5px !important;
  padding: 0 0 0 8px !important;
  border-left: 3px solid #FFB716;
  font-family: 'Oswald', 'Montserrat', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase !important;
  color: #151515 !important;
}

#zb-bot-panel .zb-bot-sheet__list {
  margin: 0 !important;
  padding: 0 0 0 18px !important;
  list-style: disc !important;
}

#zb-bot-panel .zb-bot-sheet__list li {
  margin: 0 0 3px !important;
  padding: 0 !important;
  font-size: 12.5px;
  line-height: 1.5;
  color: #2A2C31;
}

#zb-bot-panel .zb-bot-sheet__text {
  margin: 0 !important;
  font-size: 12.5px;
  line-height: 1.6;
  color: #2A2C31;
}

#zb-bot-panel .zb-bot-sheet__loading,
#zb-bot-panel .zb-bot-sheet__error {
  margin: 0 !important;
  padding: 14px 0 !important;
  font-size: 13px;
  text-align: center;
  color: #8A9099;
}

#zb-bot-panel .zb-bot-sheet__error { color: #B4232C; }

#zb-bot-panel .zb-bot-sheet__retry {
  display: block !important;
  margin: 2px auto 0 !important;
  padding: 6px 14px !important;
  border: 1px solid #151515 !important;
  border-radius: 6px !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #151515 !important;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

#zb-bot-panel .zb-bot-sheet__retry:hover,
#zb-bot-panel .zb-bot-sheet__retry:focus {
  background: #FFB716 !important;
  background-color: #FFB716 !important;
  border-color: #FFB716 !important;
  outline: none !important;
}

@media (max-width: 480px) {
  /* Fullscreen panel: give the sheet more room and a bigger tap target. */
  #zb-bot-panel .zb-bot-sheet { max-height: 82%; }
  #zb-bot-panel .zb-bot-min {
    width: 21px !important;
    min-width: 21px !important;
    height: 21px !important;
    min-height: 21px !important;
    font-size: 12px !important;
    line-height: 19px !important;
  }
}