.hsw-widget {
  position: fixed;
  z-index: 99999;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  width: auto;
}

/* Defaults */
.hsw-widget { --hsw-offset-x: 18px; --hsw-offset-y: 18px; }

/* Positioning */
.hsw-widget[data-position="bottom_right"] { right: var(--hsw-offset-x); bottom: var(--hsw-offset-y); }
.hsw-widget[data-position="bottom_left"] { left: var(--hsw-offset-x); bottom: var(--hsw-offset-y); }
.hsw-widget[data-position="top_right"] { right: var(--hsw-offset-x); top: var(--hsw-offset-y); }
.hsw-widget[data-position="top_left"] { left: var(--hsw-offset-x); top: var(--hsw-offset-y); }
.hsw-widget[data-position="middle_right"] { right: var(--hsw-offset-x); top: 50%; transform: translateY(-50%); }
.hsw-widget[data-position="middle_left"] { left: var(--hsw-offset-x); top: 50%; transform: translateY(-50%); }

.hsw-fab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(0,0,0,0.12);
  cursor: pointer;
  border-radius: 999px;
  padding: 12px 14px;
  background: #ffffff;
  color: #111111;
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
  max-width: min(360px, calc(100vw - 36px));
  transition: transform 160ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.hsw-fab:focus { outline: 3px solid rgba(0, 0, 0, 0.18); outline-offset: 3px; }

.hsw-fab-mark {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(0,0,0,0.75);
  display: inline-block;
}

/* Office hours: green pulse on the dot */
.hsw-widget.hsw-online .hsw-fab-mark {
  background: #1bb35e;
  animation: hswPulse 1.8s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(27, 179, 94, 0.55);
}

@keyframes hswPulse {
  0% { box-shadow: 0 0 0 0 rgba(27, 179, 94, 0.55); }
  65% { box-shadow: 0 0 0 10px rgba(27, 179, 94, 0.0); }
  100% { box-shadow: 0 0 0 0 rgba(27, 179, 94, 0.0); }
}

/* Hover wow: subtle lift + neon yellow ring */
.hsw-fab::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  filter: blur(0.2px);
  transition: opacity 200ms ease;
  box-shadow:
    0 0 0 1px rgba(255, 215, 0, 0.35),
    0 0 18px rgba(255, 215, 0, 0.25),
    0 0 32px rgba(255, 215, 0, 0.18);
}

.hsw-fab:hover {
  transform: translateY(-1px);
  border-color: rgba(0,0,0,0.18);
  box-shadow: 0 18px 52px rgba(0,0,0,0.16);
}

.hsw-fab:hover::after {
  opacity: 1;
  animation: hswNeonRing 1.2s ease-in-out infinite;
}

@keyframes hswNeonRing {
  0% { box-shadow:
    0 0 0 1px rgba(255, 215, 0, 0.30),
    0 0 16px rgba(255, 215, 0, 0.22),
    0 0 28px rgba(255, 215, 0, 0.16); }
  50% { box-shadow:
    0 0 0 1px rgba(255, 215, 0, 0.55),
    0 0 22px rgba(255, 215, 0, 0.34),
    0 0 40px rgba(255, 215, 0, 0.22); }
  100% { box-shadow:
    0 0 0 1px rgba(255, 215, 0, 0.30),
    0 0 16px rgba(255, 215, 0, 0.22),
    0 0 28px rgba(255, 215, 0, 0.16); }
}

.hsw-fab-text {
  font-size: 13px;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

/* Panel is absolutely positioned so it does not push the button away from the edge */
.hsw-panel {
  position: absolute;
  width: min(380px, calc(100vw - 36px));
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 26px 70px rgba(0,0,0,0.18);
  background: #ffffff;
  color: #111111;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 160ms ease, transform 160ms ease;
  transform: translateY(8px);
}

/* Align panel to the same side as the widget */
.hsw-widget[data-position$="_right"] .hsw-panel { right: 0; }
.hsw-widget[data-position$="_left"] .hsw-panel { left: 0; }

/* Default open direction (upwards). Works well for bottom and middle positions. */
.hsw-panel { bottom: calc(100% + 10px); }

/* For top positions, open downwards */
.hsw-widget[data-position^="top_"] .hsw-panel { top: calc(100% + 10px); bottom: auto; }

.hsw-widget[data-open="true"] .hsw-panel { opacity: 1; pointer-events: auto; transform: translateY(0); }

.hsw-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 14px 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}

.hsw-title { font-size: 14px; font-weight: 750; letter-spacing: 0.2px; }

.hsw-close {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 10px;
  color: rgba(0,0,0,0.7);
}

.hsw-close:focus { outline: 3px solid rgba(0,0,0,0.18); outline-offset: 2px; }

.hsw-body { padding: 12px 14px 14px 14px; }

.hsw-message {
  margin: 0 0 12px 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(0,0,0,0.72);
}

.hsw-chooser {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 12px;
  background: rgba(0,0,0,0.02);
  margin-bottom: 12px;
}

.hsw-chooser-top { display: grid; gap: 10px; }
.hsw-chooser-title { font-size: 13px; font-weight: 700; color: rgba(0,0,0,0.82); }

.hsw-chooser-start {
  border: 1px solid rgba(0,0,0,0.12);
  background: #ffffff;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
  text-align: left;
}

.hsw-chooser-start:focus { outline: 3px solid rgba(0,0,0,0.18); outline-offset: 2px; }

.hsw-q { margin-top: 12px; }

.hsw-q-title {
  font-size: 12px;
  font-weight: 700;
  color: rgba(0,0,0,0.78);
  margin-bottom: 8px;
}

.hsw-q-options { display: grid; gap: 8px; }

.hsw-q-options button {
  border: 1px solid rgba(0,0,0,0.12);
  background: #ffffff;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 13px;
  text-align: left;
}

.hsw-q-options button:hover { filter: brightness(0.99); }
.hsw-q-options button:focus { outline: 3px solid rgba(0,0,0,0.18); outline-offset: 2px; }

.hsw-chooser-result { margin-top: 10px; border-top: 1px solid rgba(0,0,0,0.08); padding-top: 10px; }
.hsw-result-title { font-size: 13px; font-weight: 750; margin-bottom: 4px; }
.hsw-result-sub { font-size: 12px; color: rgba(0,0,0,0.68); }

.hsw-actions { display: grid; gap: 10px; }

.hsw-btn {
  display: grid;
  gap: 4px;
  text-decoration: none;
  border-radius: 16px;
  padding: 12px 12px;
  border: 1px solid rgba(0,0,0,0.12);
}

.hsw-btn-main { font-weight: 750; font-size: 13px; color: #111111; letter-spacing: 0.2px; }
.hsw-btn-sub { font-size: 12px; color: rgba(0,0,0,0.65); }

.hsw-btn-primary { background: #111111; border-color: #111111; }
.hsw-btn-primary .hsw-btn-main, .hsw-btn-primary .hsw-btn-sub { color: #ffffff; opacity: 0.95; }

.hsw-btn-secondary { background: #ffffff; }

.hsw-footer { margin-top: 12px; display: grid; gap: 6px; }
.hsw-footer-hint { font-size: 12px; color: rgba(0,0,0,0.68); }
.hsw-footer-note { font-size: 11px; color: rgba(0,0,0,0.52); }

@media (prefers-reduced-motion: reduce) {
  .hsw-widget.hsw-online .hsw-fab-mark { animation: none; box-shadow: none; }
  .hsw-fab, .hsw-fab::after { transition: none; animation: none; }
}


/* Brand icons (Iconify) */
.hsw-btn-main {
  display: flex;
  align-items: center;
  gap: 8px;
}

iconify-icon.hsw-ico {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.hsw-btn-primary iconify-icon.hsw-ico {
  color: #ffffff;
}

.hsw-btn-secondary iconify-icon.hsw-ico {
  color: #111111;
}


/* Inline SVG icons */
.hsw-btn-main {
  display: flex;
  align-items: center;
  gap: 8px;
}

svg.hsw-ico {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}