/* AWS Chat Widget Styles */

#launch-widget-btn {
  position: fixed;
  bottom: 5px;
  right: 5px;
  background-color: #2378CD;
  color: white;
  border: none;
  padding: 18px 20px 18px 50px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  background-image: url('https://i.postimg.cc/05VJQ9HK/icons8-message-96.png');
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: 20px center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

#launch-widget-btn:hover {
  background-color: #1a5fa3;
}

/* ---------- Defaults (desktop) ---------- */
:root {
  /* Frame */
  --frame-w: 420px;
  --frame-h: 620px;
  --frame-right: 40px;
  --frame-bottom: 80px;
  --frame-radius: 18px;
  --frame-shadow: 0 24px 48px rgba(0, 0, 0, .3);

  /* FABs (open/close buttons) */
  --fab-size: 56px;
  --fab-font: 700 26px/1 Arial, sans-serif;
  --fab-right: 20px;
  --fab-bottom: 20px;
  --fab-bg: #2378CD;
  --fab-fg: #fff;

  /* Brand */
  --j2-primary: #123456;

  /* Safe areas */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

/* ---------- Tablets / small laptops ---------- */
@media (max-width:900px) {
  :root {
    --frame-w: min(90vw, 420px);
    --frame-h: min(85vh, 620px);
    --frame-right: 16px;
    --frame-bottom: 20px;
    --frame-radius: 16px;
    --frame-shadow: 0 16px 32px rgba(0, 0, 0, .28);
  }
}

/* ---------- Phones ---------- */
@media (max-width:600px) {
  :root {
    --frame-w: 90vw;
    --frame-h: 80vh;
    --frame-right: 5vw;
    --frame-bottom: 8vh;
    --frame-radius: 16px;

    --fab-size: 52px;
    --fab-font: 700 24px/1 Arial, sans-serif;
    --fab-right: 5px;
    --fab-bottom: 5px;
  }
}

/* ---------- Widget frame ---------- */
#amazon-connect-widget-frame {
  left: auto !important;
  position: fixed !important;
  right: calc(var(--frame-right) + var(--safe-r)) !important;
  bottom: calc(var(--frame-bottom) + var(--safe-b)) !important;
  width: var(--frame-w) !important;
  height: var(--frame-h) !important;
  border-radius: var(--frame-radius);
  box-shadow: var(--frame-shadow);
  overflow: hidden;
  transform: translateY(20px) scale(.98);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 9998;
}

#amazon-connect-widget-frame.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#amazon-connect-widget-frame:not(.show) {
  pointer-events: none;
}

/* Scrollbars (optional) */
#amazon-connect-widget-frame ::-webkit-scrollbar {
  width: 8px;
}

#amazon-connect-widget-frame ::-webkit-scrollbar-thumb {
  background: var(--j2-primary);
  border-radius: 10px;
}

/* ---------- Shared FAB style (open & close) ---------- */
#amazon-connect-open-widget-button,
#amazon-connect-close-widget-button {
  all: initial !important;
  box-sizing: border-box !important;
  position: fixed !important;
  right: calc(var(--fab-right) + var(--safe-r)) !important;
  bottom: calc(var(--fab-bottom) + var(--safe-b)) !important;

  width: var(--fab-size) !important;
  height: var(--fab-size) !important;
  border-radius: 50% !important;
  background: var(--fab-bg) !important;
  color: var(--fab-fg) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-shadow: 0 6px 14px rgba(0, 0, 0, .28) !important;
  cursor: pointer !important;
  z-index: 10000 !important;
  transition: transform .15s ease !important;
}

/* Hide AWS internals */
#amazon-connect-open-widget-button>*,
#amazon-connect-close-widget-button>* {
  display: none !important;
}

/* Icons */
#amazon-connect-open-widget-button::after {
  content: "\25B2"; /* â–² up */
  font: var(--fab-font);
}

#amazon-connect-close-widget-button::after {
  content: "\25BC"; /* â–¼ down */
  font: var(--fab-font);
}

/* Hover/active states */
#amazon-connect-open-widget-button:hover,
#amazon-connect-close-widget-button:hover {
  transform: scale(1.06);
}

#amazon-connect-open-widget-button:active,
#amazon-connect-close-widget-button:active {
  transform: scale(.96);
}

#nav-btn {
  display: inline-block;
  margin: 40px auto 0;
  padding: 14px 28px;
  background: #2378CD;
  color: #fff;
  font: 600 18px/1 Arial, sans-serif;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
  transition: transform .15s ease, background .2s ease;
}

#nav-btn:hover {
  background: #1a5fa3;
  transform: scale(1.03);
}

#nav-btn:active {
  transform: scale(.97);
}