:root {
  --mazoszop-ivory: #F8F6F2;
  --mazoszop-soft: #EFE9E2;
  --mazoszop-graphite: #262B2F;
  --mazoszop-sage-dark: #5F786B;
  --mazoszop-sage: #7E9B8A;
  --mazoszop-champagne: #C9A77C;
  --mazoszop-heading: #202326;
  --mazoszop-text: #555B60;
}

.mazoszop-root, .mazoszop-root * { box-sizing: border-box; }
.mazoszop-root {
  position: fixed;
  z-index: 9998;
  right: 18px;
  bottom: calc(132px + env(safe-area-inset-bottom, 0px));
  width: 112px;
  height: 122px;
  pointer-events: none;
  font-family: inherit;
  color: var(--mazoszop-text);
}
.mazoszop-root > * { pointer-events: auto; }
.mazoszop-mascot {
  position: absolute;
  inset: auto 0 0 auto;
  display: block;
  width: 107px;
  height: 116px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: var(--mazoszop-bg-x, 800%) var(--mazoszop-bg-y, 1100%);
  background-position: var(--mazoszop-x, 0%) var(--mazoszop-y, 0%);
  box-shadow: none;
  cursor: pointer;
  filter: drop-shadow(0 9px 10px rgba(38, 43, 47, .18));
  transition: transform .18s ease, filter .18s ease;
}
.mazoszop-mascot:hover { transform: translateY(-3px); filter: drop-shadow(0 11px 12px rgba(38, 43, 47, .24)); }
.mazoszop-mascot:focus-visible { outline: 3px solid var(--mazoszop-champagne); outline-offset: 3px; }
.mazoszop-panel {
  position: absolute;
  display: flex;
  flex-direction: column;
  right: 0;
  bottom: calc(100% + 12px);
  width: min(410px, calc(100vw - 28px));
  max-height: min(650px, calc(100vh - 285px));
  overflow: hidden;
  border: 1px solid rgba(95, 120, 107, .22);
  border-radius: 22px;
  background: var(--mazoszop-ivory);
  box-shadow: 0 24px 64px rgba(32, 35, 38, .22);
}
.mazoszop-panel[hidden], .mazoszop-help-bubble[hidden] { display: none !important; }
.mazoszop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 18px;
  color: #fff;
  background: var(--mazoszop-graphite);
}
.mazoszop-header h2 { margin: 0; color: #fff; font-size: 19px; line-height: 1.2; letter-spacing: .01em; }
.mazoszop-header p { margin: 3px 0 0; color: rgba(255,255,255,.76); font-size: 12px; }
.mazoszop-header-actions { display: flex; gap: 7px; }
.mazoszop-header-actions button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.08);
  font: 500 22px/1 Arial, sans-serif;
  cursor: pointer;
}
.mazoszop-header-actions button:hover, .mazoszop-header-actions button:focus-visible { background: var(--mazoszop-sage-dark); outline: 0; }
.mazoszop-messages {
  flex: 1 1 auto;
  min-height: 155px;
  max-height: min(310px, 38vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 17px 17px 8px;
  background: linear-gradient(180deg, var(--mazoszop-ivory), #fff 74%);
}
.mazoszop-message {
  width: fit-content;
  max-width: 88%;
  margin: 0 0 11px;
  padding: 10px 13px;
  border-radius: 14px 14px 14px 4px;
  color: var(--mazoszop-text);
  background: var(--mazoszop-soft);
  font-size: 14px;
  line-height: 1.48;
  white-space: pre-wrap;
}
.mazoszop-message--user { margin-left: auto; border-radius: 14px 14px 4px 14px; color: #fff; background: var(--mazoszop-sage-dark); }
.mazoszop-message--status { color: var(--mazoszop-sage-dark); background: transparent; font-size: 13px; font-style: italic; }
.mazoszop-quick-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 7px; padding: 7px 17px 12px; background: #fff; }
.mazoszop-quick-actions button {
  padding: 7px 9px;
  border: 1px solid rgba(95,120,107,.28);
  border-radius: 999px;
  color: var(--mazoszop-graphite);
  background: #fff;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.mazoszop-quick-actions button:hover, .mazoszop-quick-actions button:focus-visible { color: #fff; background: var(--mazoszop-sage-dark); outline: 0; }
.mazoszop-form { display: grid; flex: 0 0 auto; grid-template-columns: 1fr auto; gap: 9px; padding: 13px 14px 14px; border-top: 1px solid rgba(95,120,107,.18); background: var(--mazoszop-soft); }
.mazoszop-form textarea {
  width: 100%;
  min-height: 47px;
  max-height: 108px;
  margin: 0;
  padding: 10px 11px;
  resize: vertical;
  border: 1px solid rgba(38,43,47,.2);
  border-radius: 12px;
  color: var(--mazoszop-heading);
  background: #fff;
  font: inherit;
  font-size: 14px;
  line-height: 1.35;
}
.mazoszop-form textarea:focus { border-color: var(--mazoszop-sage-dark); outline: 2px solid rgba(126,155,138,.28); }
.mazoszop-form button { align-self: end; min-height: 47px; padding: 0 15px; border: 0; border-radius: 12px; color: #fff; background: var(--mazoszop-sage-dark); font: 600 13px/1 inherit; cursor: pointer; }
.mazoszop-form button:hover, .mazoszop-form button:focus-visible { background: var(--mazoszop-graphite); outline: 0; }
.mazoszop-form button:disabled { cursor: wait; opacity: .55; }
.mazoszop-products { display: grid; gap: 10px; margin: 2px 0 13px; }
.mazoszop-product { display: grid; grid-template-columns: 86px 1fr; overflow: hidden; border: 1px solid rgba(95,120,107,.18); border-radius: 14px; background: #fff; box-shadow: 0 7px 20px rgba(38,43,47,.08); }
.mazoszop-product img { width: 86px; height: 100%; min-height: 124px; object-fit: contain; background: #fff; }
.mazoszop-product__body { padding: 10px 11px 11px; }
.mazoszop-product h3 { margin: 0 0 4px; color: var(--mazoszop-heading); font-size: 14px; line-height: 1.25; }
.mazoszop-product p { margin: 0 0 4px; color: var(--mazoszop-text); font-size: 11px; line-height: 1.35; }
.mazoszop-product .mazoszop-product__price { color: var(--mazoszop-heading); font-size: 13px; font-weight: 700; }
.mazoszop-product .mazoszop-product__stock { color: var(--mazoszop-sage-dark); font-weight: 600; }
.mazoszop-product a { display: inline-block; margin-top: 5px; padding: 6px 9px; border-radius: 8px; color: #fff; background: var(--mazoszop-sage-dark); font-size: 11px; font-weight: 700; text-decoration: none; }
.mazoszop-product a:hover, .mazoszop-product a:focus-visible { background: var(--mazoszop-graphite); outline: 2px solid var(--mazoszop-champagne); }
.mazoszop-help-bubble { position: absolute; right: 94px; bottom: 26px; width: max-content; max-width: min(250px, calc(100vw - 145px)); padding: 10px 13px; border: 1px solid rgba(95,120,107,.18); border-radius: 13px 13px 4px 13px; color: var(--mazoszop-heading); background: #fff; box-shadow: 0 12px 32px rgba(38,43,47,.16); font-size: 13px; }
.mazoszop-root .screen-reader-text { position: absolute !important; overflow: hidden; width: 1px; height: 1px; margin: -1px; padding: 0; clip: rect(0 0 0 0); border: 0; white-space: nowrap; }

@media (min-width: 601px) and (max-width: 782px) {
  .mazoszop-root { right: 16px; bottom: calc(132px + env(safe-area-inset-bottom, 0px)); width: 98px; height: 108px; }
  .mazoszop-mascot { width: 96px; height: 104px; }
  .mazoszop-panel { right: 0; bottom: calc(100% + 10px); width: 410px; max-height: min(600px, calc(100vh - 270px)); }
  .mazoszop-root[data-checkout="1"] { width: 86px; height: 94px; }
  .mazoszop-root[data-checkout="1"] .mazoszop-mascot { width: 83px; height: 90px; }
}

@media (max-width: 600px) {
  .mazoszop-root { right: 12px; bottom: calc(130px + env(safe-area-inset-bottom, 0px)); width: 82px; height: 89px; }
  .mazoszop-mascot { width: 78px; height: 85px; }
  .mazoszop-panel { right: 0; bottom: calc(100% + 10px); width: calc(100vw - 36px); max-height: 66vh; border-radius: 18px; }
  .mazoszop-messages { max-height: 30vh; padding: 14px 13px 6px; }
  .mazoszop-header { padding: 13px 14px; }
  .mazoszop-quick-actions { padding: 6px 13px 10px; }
  .mazoszop-form { padding: 10px; }
  .mazoszop-help-bubble { right: 72px; bottom: 17px; }
  .mazoszop-root[data-checkout="1"] { bottom: calc(116px + env(safe-area-inset-bottom, 0px)); width: 72px; height: 78px; }
  .mazoszop-root[data-checkout="1"] .mazoszop-mascot { width: 69px; height: 75px; }
}

@media (max-width: 340px) {
  .mazoszop-panel { width: calc(100vw - 32px); right: -2px; }
  .mazoszop-product { grid-template-columns: 72px 1fr; }
  .mazoszop-product img { width: 72px; }
  .mazoszop-help-bubble { max-width: 195px; }
}

@media (prefers-reduced-motion: reduce) {
  .mazoszop-mascot { transition: none; }
  .mazoszop-mascot:hover { transform: none; }
}