/* Augrafi Lead Agent widget. Colours come from CSS variables that the plugin settings write onto #augla-root. */
#augla-root {
  --augla-accent: #249AA0;
  --augla-head-text: #000000;
  --augla-btn-bg: #000000;
  --augla-btn-text: #249AA0;
  --augla-btn-border: #249AA0;
  --augla-btn-bw: 3px;
  --augla-co-bg: #E27236;
  --augla-co-text: #000000;
  --augla-co-border: #000000;
  --aug-teal: var(--augla-accent);
  --aug-deep: #006C7A;
  --aug-light: #7EBEC5;
  --aug-black: #000000;
  --aug-off: #FCFCFC;
  --aug-green: #25D366;
  --augla-tilt: -2deg;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--aug-off);
  -webkit-font-smoothing: antialiased;
}
#augla-root.augla-pos-left { right: auto; left: 20px; }
#augla-root.augla-no-tilt { --augla-tilt: 0deg; }
#augla-root *, #augla-root *::before, #augla-root *::after { box-sizing: border-box; }
#augla-root p { margin: 0 0 8px; padding: 0; }
#augla-root p:last-child { margin-bottom: 0; }
#augla-root button { font-family: inherit; cursor: pointer; }
#augla-root [hidden] { display: none !important; }

/* ---------- Launcher (shared) ---------- */
#augla-root .augla-launcher {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 0 auto;
  background: var(--augla-btn-bg);
  border: var(--augla-btn-bw) solid var(--augla-btn-border);
  color: var(--augla-btn-text);
  font-family: inherit;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transition: letter-spacing 0.2s ease, transform 0.2s ease;
}
#augla-root.augla-pos-left .augla-launcher { margin: 0 auto 0 0; }
#augla-root .augla-icon { display: block; flex: none; }
#augla-root img.augla-icon { width: 46px; height: 46px; object-fit: contain; margin: -4px -6px -4px -4px; }
#augla-root img.augla-icon.is-custom { width: 32px; height: 32px; margin: 0 2px 0 4px; }
#augla-root svg.augla-icon { width: 26px; height: 26px; margin: 0 2px 0 6px; }
#augla-root .augla-launcher .augla-x { display: none; width: 22px; height: 22px; flex: none; }
#augla-root .augla-launcher .augla-label-close { display: none; }
#augla-root.is-open .augla-launcher .augla-icon,
#augla-root.is-open .augla-launcher .augla-label { display: none; }
#augla-root.is-open .augla-launcher .augla-x { display: block; }
#augla-root.is-open .augla-launcher .augla-label-close { display: block; }
#augla-root.augla-no-icon .augla-launcher { padding-left: 22px; }

/* Style: pill */
#augla-root.augla-style-pill .augla-launcher {
  height: 60px;
  padding: 0 22px 0 8px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1px;
}
#augla-root.augla-style-pill .augla-launcher:hover { letter-spacing: 2px; }
#augla-root.augla-style-pill.is-open .augla-launcher .augla-x { margin-left: 8px; }

/* Style: round */
#augla-root.augla-style-round .augla-launcher {
  width: 66px;
  height: 66px;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
}
#augla-root.augla-style-round .augla-label,
#augla-root.augla-style-round .augla-label-close,
#augla-root.augla-style-round.is-open .augla-label-close { display: none; }
#augla-root.augla-style-round img.augla-icon { width: 60px; height: 60px; margin: 0; }
#augla-root.augla-style-round img.augla-icon.is-custom { width: 36px; height: 36px; }
#augla-root.augla-style-round svg.augla-icon { width: 30px; height: 30px; margin: 0; }
#augla-root.augla-style-round.augla-no-icon .augla-launcher { padding: 0; }
#augla-root.augla-style-round.augla-no-icon .augla-label { display: block; font-size: 11px; font-weight: 800; }
#augla-root.augla-style-round .augla-launcher:hover { transform: rotate(-8deg); }

/* Style: speech-bubble tag */
#augla-root.augla-style-bubble .augla-launcher {
  height: 56px;
  padding: 0 18px 0 8px;
  border-radius: 16px 16px 4px 16px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  transform: rotate(calc(var(--augla-tilt) * 1.5));
}
#augla-root.augla-pos-left.augla-style-bubble .augla-launcher { border-radius: 16px 16px 16px 4px; }
#augla-root.augla-style-bubble .augla-launcher:hover { transform: rotate(0deg); }
#augla-root.augla-style-bubble.is-open .augla-launcher .augla-x { margin-left: 6px; }

/* ---------- Callout ---------- */
#augla-root .augla-teaser {
  position: absolute;
  right: 6px;
  bottom: calc(100% + 12px);
  width: max-content;
  max-width: 300px;
  white-space: normal;
  text-align: left;
  background: var(--augla-co-bg);
  color: var(--augla-co-text);
  border: 3px solid var(--augla-co-border);
  border-radius: 12px 12px 4px 12px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  transform: rotate(var(--augla-tilt));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  animation: augla-pop 0.45s ease-out 0.6s both;
}
#augla-root.augla-pos-left .augla-teaser { right: auto; left: 6px; border-radius: 12px 12px 12px 4px; }
#augla-root.augla-co-side .augla-teaser { bottom: 50%; right: calc(100% + 12px); margin-bottom: -20px; border-radius: 12px 4px 12px 12px; }
#augla-root.augla-co-side.augla-pos-left .augla-teaser { right: auto; left: calc(100% + 12px); border-radius: 4px 12px 12px 12px; }
#augla-root .augla-teaser:hover { transform: rotate(0deg); }
#augla-root.is-open .augla-teaser { display: none; }
@keyframes augla-pop {
  from { opacity: 0; transform: translateY(8px) rotate(var(--augla-tilt)); }
  to { opacity: 1; transform: translateY(0) rotate(var(--augla-tilt)); }
}

/* Panel: black, rounded, thick teal border (home page style) */
#augla-root.augla-pos-left .augla-panel { right: auto; left: 0; }
#augla-root .augla-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 18px);
  width: 380px;
  max-width: calc(100vw - 40px);
  height: 580px;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  background: var(--aug-black);
  border: 4px solid var(--aug-teal);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  animation: augla-open 0.35s ease-out both;
}
@keyframes augla-open {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

#augla-root .augla-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px 16px;
  background: var(--aug-teal);
  color: var(--augla-head-text);
  border-bottom: 4px solid var(--aug-black);
}
#augla-root .augla-head img { width: 52px; height: 52px; flex: none; margin: -8px -10px -8px -12px; }
#augla-root .augla-head div { flex: 1; min-width: 0; }
#augla-root .augla-head h2 {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--augla-head-text);
}
#augla-root .augla-head p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.3; color: var(--augla-head-text); }
#augla-root .augla-close {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 2px solid var(--augla-head-text);
  background: transparent;
  color: var(--augla-head-text);
  display: grid;
  place-items: center;
  padding: 0;
}
#augla-root .augla-close svg { width: 18px; height: 18px; }
#augla-root .augla-close:hover { background: var(--augla-head-text); color: var(--aug-teal); }

/* Messages */
#augla-root .augla-log {
  flex: 1;
  overflow-y: auto;
  padding: 18px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--aug-deep) transparent;
}
#augla-root .augla-msg {
  max-width: 86%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
#augla-root .augla-assistant {
  align-self: flex-start;
  background: var(--aug-deep);
  color: #FFFFFF;
  border-bottom-left-radius: 4px;
}
#augla-root .augla-user {
  align-self: flex-end;
  background: var(--aug-off);
  color: var(--aug-black);
  border-bottom-right-radius: 4px;
}
#augla-root .augla-note {
  background: transparent;
  border: 2px dashed var(--aug-light);
  color: var(--aug-off);
}
#augla-root .augla-msg ul { margin: 4px 0 8px; padding-left: 18px; }
#augla-root .augla-msg li { margin: 0 0 4px; padding: 0; list-style: disc; }
#augla-root .augla-msg strong { font-weight: 600; }
#augla-root .augla-msg a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

#augla-root .augla-typing { display: flex; gap: 5px; padding: 14px 16px; }
#augla-root .augla-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--aug-light);
  animation: augla-dot 1.1s infinite ease-in-out;
}
#augla-root .augla-typing span:nth-child(2) { animation-delay: 0.15s; }
#augla-root .augla-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes augla-dot {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}

/* Quick replies: outlined brand buttons */
#augla-root .augla-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 14px 12px;
}
#augla-root .augla-chip {
  background: var(--aug-black);
  color: var(--aug-teal);
  border: 2px solid var(--aug-teal);
  border-radius: 12px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: left;
  transition: letter-spacing 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
#augla-root .augla-chip:hover { letter-spacing: 1.5px; background: var(--aug-teal); color: var(--aug-black); }

/* Input row */
#augla-root .augla-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 14px 8px;
  border-top: 2px solid var(--aug-deep);
  margin: 0;
}
#augla-root .augla-input {
  flex: 1;
  min-height: 46px;
  max-height: 120px;
  resize: none;
  margin: 0;
  padding: 11px 16px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.45;
  color: #FFFFFF;
  background: var(--aug-black);
  border: 2px solid var(--aug-deep);
  border-radius: 20px;
  outline: none;
  box-shadow: none;
}
#augla-root .augla-input::placeholder { color: var(--aug-light); opacity: 1; }
#augla-root .augla-input:focus { background: var(--aug-deep); border-style: dashed; border-color: var(--aug-light); }
#augla-root .augla-send {
  flex: none;
  height: 46px;
  padding: 0 16px;
  background: var(--aug-black);
  color: var(--aug-teal);
  border: 2px solid var(--aug-teal);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: letter-spacing 0.2s ease;
}
#augla-root .augla-send:hover { letter-spacing: 2px; }
#augla-root .augla-send:disabled, #augla-root .augla-input:disabled { opacity: 0.55; cursor: wait; }
#augla-root .augla-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

#augla-root .augla-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 2px 16px 12px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--aug-light);
}
#augla-root .augla-foot a { color: var(--aug-light); text-decoration: underline; text-underline-offset: 2px; }
#augla-root .augla-foot a.augla-wa { color: var(--aug-green); font-weight: 600; text-decoration: none; }
#augla-root .augla-foot a.augla-wa:hover { text-decoration: underline; }

/* Keyboard focus */
#augla-root button:focus-visible, #augla-root a:focus-visible {
  outline: 3px dashed var(--aug-light);
  outline-offset: 3px;
}

/* Phones: near full-screen sheet */
@media (max-width: 480px) {
  #augla-root { right: 14px; bottom: 14px; }
  #augla-root.augla-pos-left { right: auto; left: 14px; }
  #augla-root.augla-style-pill .augla-launcher { height: 54px; font-size: 14px; padding-right: 18px; }
  #augla-root.augla-style-bubble .augla-launcher { height: 52px; font-size: 14px; }
  #augla-root.augla-style-round .augla-launcher { width: 58px; height: 58px; }
  #augla-root.augla-style-pill img.augla-icon:not(.is-custom) { width: 42px; height: 42px; }
  #augla-root .augla-teaser { font-size: 13px; max-width: 240px; }
  #augla-root.augla-co-side .augla-teaser { bottom: calc(100% + 12px); right: 6px; margin-bottom: 0; }
  #augla-root.augla-co-side.augla-pos-left .augla-teaser { right: auto; left: 6px; }
  #augla-root.augla-co-hide-mobile .augla-teaser { display: none; }
  #augla-root.is-open .augla-panel {
    position: fixed;
    left: 8px;
    right: 8px;
    top: calc(8px + env(safe-area-inset-top, 0px));
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
  }
  #augla-root .augla-input { font-size: 16px; } /* stops iOS zooming in */
}

@media (prefers-reduced-motion: reduce) {
  #augla-root *, #augla-root *::before, #augla-root *::after {
    animation: none !important;
    transition: none !important;
  }
}