#wupi-root,
#wupi-root * {
  box-sizing: border-box;
}

#wupi-root [hidden] { display: none !important; }

#wupi-root {
  --wupi-primary: #0071DD;
  --wupi-font: Roboto, Arial, sans-serif;
  --wupi-text: #16191d;
  --wupi-muted: #68727d;
  --wupi-soft: #f4f6f8;
  --wupi-line: #dfe5ea;
  --wupi-white: #ffffff;
  --wupi-side-offset: 18px;
  position: fixed;
  bottom: 22px;
  z-index: 999999;
  color: var(--wupi-text);
  font-family: var(--wupi-font);
  font-size: 14px;
  line-height: 1.45;
}

#wupi-root.wupi-right { right: var(--wupi-side-offset); }
#wupi-root.wupi-left { left: var(--wupi-side-offset); }

/* A webhely témája ne örökítsen rózsaszín kereteket vagy gombstílust a chatre. */
#wupi-root button,
#wupi-root input,
#wupi-root textarea,
#wupi-root a {
  font-family: var(--wupi-font) !important;
  box-shadow: none !important;
  outline-offset: 2px;
}

#wupi-root button,
#wupi-root input,
#wupi-root textarea {
  border-color: transparent !important;
}

#wupi-root a {
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Összecsukott WUPI: a buborék és az avatar EGYETLEN közös jobb/bal élhez
   igazodik. A DOM-ban is a buborék van előbb és a profilkép utána, ezért egy
   témastílus sem tudja megfordítani őket. */
#wupi-root .wupi-launcher {
  width: min(320px, var(--wupi-safe-width, 320px), calc(100vw - 20px)) !important;
  max-width: min(320px, var(--wupi-safe-width, 320px), calc(100vw - 20px)) !important;
  transition: opacity .18s ease, transform .18s ease;
}

#wupi-root .wupi-launcher-button {
  appearance: none !important;
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  justify-items: end !important;
  align-items: end !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--wupi-text) !important;
  cursor: pointer !important;
  text-align: right !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#wupi-root.wupi-left .wupi-launcher-button {
  justify-items: start !important;
  text-align: left !important;
}

#wupi-root .wupi-launcher-copy { grid-row: 1 !important; }
#wupi-root .wupi-launcher-avatar { grid-row: 2 !important; }

#wupi-root .wupi-launcher-avatar {
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  min-height: 62px !important;
  padding: 3px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 1px solid rgba(18,35,52,.08) !important;
  box-shadow: 0 4px 12px rgba(18,35,52,.08) !important;
  overflow: visible !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  justify-self: end !important;
}

#wupi-root.wupi-left .wupi-launcher-avatar { justify-self: start !important; }

#wupi-root .wupi-launcher-avatar img,
#wupi-root .wupi-launcher-avatar .wupi-launcher-mark {
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: grid !important;
  place-items: center !important;
  background: #fff !important;
  color: var(--wupi-primary) !important;
  font-weight: 900 !important;
  font-size: 22px !important;
}

#wupi-root .wupi-online-dot {
  position: absolute !important;
  right: -1px !important;
  bottom: 2px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #31c451 !important;
  border: 3px solid #fff !important;
  box-shadow: 0 1px 4px rgba(18,35,52,.18) !important;
  z-index: 3 !important;
}

#wupi-root .wupi-launcher-copy {
  position: relative !important;
  width: fit-content !important;
  max-width: 320px !important;
  min-width: 164px !important;
  min-height: 46px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 12px 44px 12px 16px !important;
  margin: 0 !important;
  border: 1px solid rgba(18,35,52,.075) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.985) !important;
  box-shadow: 0 10px 28px rgba(18,35,52,.12), 0 2px 7px rgba(18,35,52,.05) !important;
  text-align: left !important;
  overflow: visible !important;
  justify-self: end !important;
  opacity: 0;
  transform: translateY(5px) scale(.985);
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}

#wupi-root .wupi-launcher-copy[hidden] { display: none !important; }
#wupi-root .wupi-launcher-copy.is-visible { opacity: 1; transform: none; }

#wupi-root.wupi-left .wupi-launcher-copy {
  align-items: flex-start !important;
  text-align: left !important;
  justify-self: start !important;
}

#wupi-root .wupi-launcher-copy::after {
  content: '';
  position: absolute;
  bottom: -5px;
  width: 10px;
  height: 10px;
  background: #fff;
  transform: rotate(45deg);
  box-shadow: 1px 1px 0 rgba(18,35,52,.06);
}

/* A nyíl közepe pontosan a 62px-es avatar közepére mutat. */
#wupi-root.wupi-right .wupi-launcher-copy::after {
  right: 26px;
  border-right: 1px solid rgba(18,35,52,.06);
  border-bottom: 1px solid rgba(18,35,52,.06);
}

#wupi-root.wupi-left .wupi-launcher-copy::after {
  left: 26px;
  border-right: 1px solid rgba(18,35,52,.06);
  border-bottom: 1px solid rgba(18,35,52,.06);
}

.wupi-launcher-teaser-kicker {
  color: var(--wupi-primary);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.15;
}

#wupi-root .wupi-launcher-teaser-text {
  width: auto !important;
  max-width: 260px !important;
  min-width: 0 !important;
  color: var(--wupi-text) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.36 !important;
  letter-spacing: -.005em !important;
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  transition: opacity .13s ease, transform .13s ease;
}

#wupi-root .wupi-launcher-teaser-text.is-changing {
  opacity: 0;
  transform: translateY(2px);
}

#wupi-root .wupi-launcher-dismiss {
  position: absolute !important;
  top: 8px !important;
  right: 9px !important;
  width: 22px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  color: #8a939d !important;
  background: #f3f5f7 !important;
  border: 1px solid rgba(18,35,52,.035) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 4 !important;
  transition: background .15s ease, color .15s ease, transform .15s ease !important;
}

#wupi-root .wupi-launcher-dismiss:hover,
#wupi-root .wupi-launcher-dismiss:focus-visible {
  color: #16191d !important;
  background: #e9edf1 !important;
  transform: scale(1.04) !important;
}

/* A bezáró ne fedje le a rövid szöveget. */
#wupi-root .wupi-launcher-copy { padding-right: 44px !important; }

.wupi-launcher-button:hover .wupi-launcher-copy,
.wupi-launcher-button:focus-visible .wupi-launcher-copy {
  border-color: rgba(0,113,221,.14);
  box-shadow: 0 5px 15px rgba(18,35,52,.10);
}
.wupi-launcher-button:hover .wupi-launcher-avatar,
.wupi-launcher-button:focus-visible .wupi-launcher-avatar {
  transform: translateY(-1px);
}

.wupi-launcher.is-open {
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}

.wupi-panel-chat {
  position: absolute;
  bottom: 0;
  width: min(350px, calc(100vw - 28px));
  height: min(565px, calc(100vh - 36px));
  background: #fff;
  border: 0 !important;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(20,33,46,.12), 0 2px 8px rgba(20,33,46,.05) !important;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(12px) scale(.985);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.wupi-right .wupi-panel-chat { right: 0; }
.wupi-left .wupi-panel-chat { left: 0; }
.wupi-panel-chat.is-open { opacity: 1; transform: none; pointer-events: auto; }

.wupi-panel-chat.is-consent-mode {
  height: auto;
  max-height: min(620px, calc(100vh - 36px));
}

.wupi-panel-chat.is-chat-mode {
  height: min(565px, calc(100vh - 36px));
}

.wupi-header {
  min-height: 68px;
  padding: 10px 12px;
  background: var(--wupi-primary);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 11px;
}

.wupi-header-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--wupi-primary);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-weight: 900;
  font-size: 20px;
}

.wupi-header-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wupi-header-copy { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; }
.wupi-header-copy strong { color: #fff; font-size: 17px; line-height: 1.15; }
.wupi-header-copy small { color: rgba(255,255,255,.84); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wupi-window-controls {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

#wupi-root .wupi-control {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer;
  box-shadow: none !important;
}

#wupi-root .wupi-control-end {
  background: #d93b3b !important;
}

#wupi-root .wupi-control-minimize {
  background: #e39a22 !important;
}

#wupi-root .wupi-control-support {
  background: #2f9a58 !important;
  font-size: 12px !important;
  padding-left: 2px !important;
}

#wupi-root .wupi-control:hover,
#wupi-root .wupi-control:focus-visible {
  color: #fff !important;
  filter: brightness(.94);
  transform: translateY(-1px);
}

.wupi-consent {
  flex: 1 1 auto;
  padding: 18px 18px 16px;
  overflow: auto;
  background: #fff;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}

.wupi-consent-kicker {
  margin-bottom: 7px;
  color: var(--wupi-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.wupi-consent h3 {
  margin: 0 0 11px;
  color: var(--wupi-text);
  font-size: 20px;
  line-height: 1.2;
}

.wupi-consent-text {
  color: #525d67;
  font-size: 13px;
  line-height: 1.55;
}

.wupi-legal-boxes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin: 14px 0 14px;
}

.wupi-legal-box {
  padding: 11px 12px;
  border: 0 !important;
  border-radius: 10px;
  background: #f2f5f7;
  color: #424c55;
  box-shadow: none !important;
}

.wupi-legal-box strong {
  display: block;
  margin-bottom: 3px;
  color: var(--wupi-text);
  font-size: 12px;
}

.wupi-legal-box span {
  display: block;
  font-size: 11.5px;
  line-height: 1.5;
}

#wupi-root .wupi-legal-box a,
#wupi-root .wupi-consent-check a {
  background: transparent !important;
  color: var(--wupi-primary) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  font-weight: 750;
  border: 0 !important;
}

#wupi-root .wupi-legal-box a:hover,
#wupi-root .wupi-consent-check a:hover {
  color: var(--wupi-primary) !important;
  opacity: .78;
}

.wupi-consent-checks {
  display: grid;
  gap: 8px;
  margin: 16px 0 12px;
}

.wupi-consent-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 10px;
  padding: 0;
  color: #353c43;
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
}

#wupi-root .wupi-consent-check input {
  appearance: auto !important;
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  margin: 1px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  accent-color: var(--wupi-primary);
  box-shadow: none !important;
}

.wupi-start,
.wupi-contact-form button,
.wupi-transcript-form button,
.wupi-new-conversation {
  appearance: none !important;
  border: 0 !important;
  background: var(--wupi-primary) !important;
  color: #fff !important;
  border-radius: 10px !important;
  cursor: pointer;
  font-weight: 800 !important;
  box-shadow: none !important;
}

.wupi-start {
  width: 100%;
  padding: 13px 16px !important;
  font-size: 14px !important;
}

.wupi-start:hover,
.wupi-contact-form button:hover,
.wupi-transcript-form button:hover,
.wupi-new-conversation:hover {
  background: var(--wupi-primary) !important;
  color: #fff !important;
  opacity: .88;
}

.wupi-start:disabled,
#wupi-root button:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.wupi-chat {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--wupi-soft);
}

.wupi-messages {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 18px 15px 10px;
  scroll-behavior: smooth;
}

.wupi-message {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 89%;
  margin: 0 0 12px;
}

.wupi-message.visitor {
  margin-left: auto;
  align-items: flex-end;
}

.wupi-bubble {
  padding: 10px 12px;
  background: #fff;
  color: var(--wupi-text);
  border: 0 !important;
  border-radius: 10px;
  box-shadow: none !important;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 13.5px;
  line-height: 1.5;
}

.wupi-message.visitor .wupi-bubble {
  background: var(--wupi-primary);
  color: #fff;
  border-radius: 10px;
}

.wupi-message.agent .wupi-bubble {
  background: #eaf5ff;
  color: var(--wupi-text);
  border: 0 !important;
}

.wupi-message.agent .wupi-bubble::before {
  content: 'Ügyintéző';
  display: block;
  margin-bottom: 4px;
  color: var(--wupi-primary);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.wupi-actions {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  margin-top: 6px;
}

.wupi-actions.is-many {
  max-height: 210px;
  overflow-y: auto;
  padding-right: 3px;
}

#wupi-root .wupi-action {
  appearance: none !important;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--wupi-primary) !important;
  text-align: left;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1.3;
  cursor: pointer;
  box-shadow: none !important;
}

#wupi-root .wupi-action:hover,
#wupi-root .wupi-action:focus-visible {
  background: #eaf4ff !important;
  color: var(--wupi-primary) !important;
}

.wupi-action-link {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.wupi-action-label {
  min-width: 0;
}

.wupi-action-kind {
  flex: 0 0 auto;
  padding: 3px 6px;
  border-radius: 999px;
  background: #edf2f6;
  color: #63707c;
  font-size: 9px;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}

.wupi-action-static {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 7px 9px;
  border: 0 !important;
  border-radius: 7px;
  background: #eaf4ff;
  color: var(--wupi-primary);
  font-size: 11px;
  font-weight: 800;
}

.wupi-typing {
  padding: 0 15px 7px;
  color: #7b858f;
  font-size: 11px;
}

.wupi-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px 10px 9px;
  background: #fff;
  border: 0 !important;
}

#wupi-root .wupi-input,
#wupi-root .wupi-contact-form input,
#wupi-root .wupi-transcript-form input {
  width: 100%;
  border: 1px solid var(--wupi-line) !important;
  background: #fff !important;
  color: var(--wupi-text) !important;
  box-shadow: none !important;
  outline: none;
}

#wupi-root .wupi-input:focus,
#wupi-root .wupi-contact-form input:focus,
#wupi-root .wupi-transcript-form input:focus {
  border-color: var(--wupi-primary) !important;
  box-shadow: 0 0 0 2px rgba(0,113,221,.09) !important;
}

.wupi-input {
  flex: 1;
  min-height: 42px;
  max-height: 110px;
  resize: none;
  border-radius: 10px !important;
  padding: 10px 11px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

.wupi-send {
  appearance: none !important;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--wupi-primary) !important;
  color: #fff !important;
  cursor: pointer;
  font-size: 16px !important;
  box-shadow: none !important;
}

.wupi-send:hover,
.wupi-send:focus-visible {
  background: var(--wupi-primary) !important;
  color: #fff !important;
  opacity: .88;
}

.wupi-footnote {
  padding: 0 10px 8px;
  background: #fff;
  color: #929aa2;
  text-align: center;
  font-size: 9px;
}

.wupi-contact-form {
  width: 100%;
  display: grid;
  gap: 6px;
  padding: 9px;
  background: #fff;
  border: 0 !important;
  border-radius: 9px;
  box-shadow: none !important;
}

.wupi-contact-form input,
.wupi-transcript-form input {
  min-height: 39px;
  padding: 8px 10px !important;
  border-radius: 7px !important;
  font-size: 13px !important;
}

.wupi-contact-form button,
.wupi-transcript-form button,
.wupi-new-conversation {
  min-height: 39px;
  padding: 9px 12px !important;
  font-size: 12px !important;
}

.wupi-contact-result,
.wupi-transcript-result {
  min-height: 0;
  color: var(--wupi-muted);
  font-size: 11px;
  line-height: 1.4;
}

.wupi-contact-result.is-success,
.wupi-transcript-result.is-success { color: #267447; }
.wupi-contact-result.is-error,
.wupi-transcript-result.is-error { color: #a63d3d; }

.wupi-closed-panel {
  margin: 0;
  padding: 16px 15px 14px;
  background: #fff;
  border: 0 !important;
  box-shadow: none !important;
}

.wupi-closed-panel > strong {
  display: block;
  margin-bottom: 4px;
  color: var(--wupi-text);
  font-size: 14px;
}

.wupi-closed-panel > span {
  display: block;
  margin-bottom: 11px;
  color: var(--wupi-muted);
  font-size: 11px;
  line-height: 1.45;
}

.wupi-transcript-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  margin-bottom: 8px;
}

.wupi-transcript-form .wupi-transcript-result {
  grid-column: 1 / -1;
}

.wupi-new-conversation {
  width: 100%;
  background: #edf1f4 !important;
  color: #28323b !important;
}

.wupi-new-conversation:hover,
.wupi-new-conversation:focus-visible {
  background: #e3e8ec !important;
  color: #28323b !important;
}

.wupi-inline-error {
  margin-top: 11px;
  padding: 9px 10px;
  border: 0 !important;
  border-radius: 7px;
  background: #fff1f1;
  color: #9d3535;
  font-size: 11px;
}

@media (max-width: 600px) {
  #wupi-root { bottom: 10px; }
  #wupi-root.wupi-right { right: var(--wupi-side-offset); }
  #wupi-root.wupi-left { left: var(--wupi-side-offset); }
  #wupi-root .wupi-launcher { width: min(270px, var(--wupi-safe-width, 270px), calc(100vw - 20px)) !important; max-width: min(270px, var(--wupi-safe-width, 270px), calc(100vw - 20px)) !important; }
  #wupi-root .wupi-launcher-button { gap: 6px !important; }
  #wupi-root .wupi-launcher-avatar { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; padding: 3px !important; margin: 0 !important; }
  #wupi-root .wupi-launcher-avatar img,
  #wupi-root .wupi-launcher-avatar .wupi-launcher-mark { width: 40px !important; height: 40px !important; }
  #wupi-root .wupi-launcher-copy { min-height: 44px !important; height: auto !important; padding: 10px 39px 10px 13px !important; max-width: 270px !important; min-width: 145px !important; border-radius: 13px !important; }
  #wupi-root.wupi-right .wupi-launcher-copy::after { right: 19px !important; }
  #wupi-root.wupi-left .wupi-launcher-copy::after { left: 19px !important; }
  #wupi-root .wupi-launcher-teaser-kicker { font-size: 10px !important; }
  #wupi-root .wupi-launcher-teaser-text { max-width: 218px !important; font-size: 11.5px !important; line-height: 1.34 !important; hyphens: none !important; overflow-wrap: normal !important; }
  .wupi-panel-chat {
    position: fixed;
    left: 10px !important;
    right: 10px !important;
    bottom: 0;
    width: auto;
    height: min(575px, calc(100dvh - 20px));
    border-radius: 10px;
  }
  .wupi-panel-chat.is-consent-mode { height: auto; max-height: calc(100dvh - 20px); }
  .wupi-panel-chat.is-chat-mode { height: min(575px, calc(100dvh - 20px)); }
  .wupi-header-copy small { max-width: 150px; }
  .wupi-consent { padding: 16px 16px 15px; }
  .wupi-transcript-form { grid-template-columns: 1fr; }
  .wupi-transcript-form .wupi-transcript-result { grid-column: auto; }
}