/* Promotions Guy live chat widget. Brand: dark #0A1008, accent #52ED00
   (green only ever as a background with dark text). Every class is prefixed pgc-. */
.pgc-section { padding: 48px 0; background: #f4f7f2; }
.pgc-dock { max-width: 760px; }
.pgc-box {
  --pgc-dark: #0A1008; --pgc-green: #52ED00; --pgc-line: #dfe4dc; --pgc-muted: #4a5348;
  display: flex; flex-direction: column; background: #fff; color: #1b1f1a;
  border: 2px solid var(--pgc-line); border-radius: 16px; overflow: hidden;
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.pgc-box[hidden], .pgc-box [hidden], .pgc-fab[hidden] { display: none !important; }
.pgc-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; background: var(--pgc-dark); color: #fff; }
.pgc-head > div { flex: 1; min-width: 0; }
.pgc-title { margin: 0 0 4px; font: 700 1.6rem/1.1 "Akshar", system-ui, sans-serif; color: #fff; }
.pgc-sub { margin: 0; color: #e6ebe4; font-size: .95rem; }
.pgc-close {
  display: none; flex: none; width: 40px; height: 40px; border: 2px solid #fff; border-radius: 999px;
  background: transparent; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.pgc-floating .pgc-close { display: block; }
.pgc-mute {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; padding: 0;
  border: 2px solid #fff; border-radius: 999px; background: transparent; color: #fff; cursor: pointer;
}
.pgc-mute[aria-pressed="true"] { opacity: .7; }
.pgc-mute:focus-visible, .pgc-close:focus-visible { outline: 3px solid var(--pgc-green); outline-offset: 2px; }

.pgc-start { display: grid; gap: 12px; padding: 18px; }
.pgc-row { display: grid; gap: 12px; }
.pgc-field { display: grid; gap: 4px; font-weight: 600; color: var(--pgc-dark); }
.pgc-box input, .pgc-box textarea {
  width: 100%; font: inherit; font-weight: 400; color: #1b1f1a; padding: 10px 12px;
  border: 1.5px solid #9aa596; border-radius: 10px; background: #fff;
}
.pgc-box input:focus, .pgc-box textarea:focus { border-color: var(--pgc-dark); outline: 3px solid var(--pgc-green); outline-offset: 0; }
.pgc-trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.pgc-btn {
  justify-self: start; min-height: 46px; padding: 10px 22px; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--pgc-green); background: var(--pgc-green); color: var(--pgc-dark);
  font: 600 1.1rem/1 "Akshar", system-ui, sans-serif; letter-spacing: .02em;
}
.pgc-btn:hover { background: #46cc00; border-color: #46cc00; }
.pgc-btn:disabled { opacity: .6; cursor: default; }
.pgc-err { margin: 0; min-height: 0; color: #a3160b; font-weight: 600; }
.pgc-err:empty { display: none; }

.pgc-chat { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.pgc-msgs {
  list-style: none; margin: 0; padding: 14px; display: flex; flex-direction: column; gap: 10px;
  min-height: 220px; max-height: 420px; overflow-y: auto; background: #f4f7f2;
}
.pgc-msg { max-width: 85%; padding: 8px 12px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pgc-who { display: block; font-size: .8rem; margin-bottom: 2px; color: var(--pgc-muted); }
.pgc-me { align-self: flex-end; background: var(--pgc-dark); color: #fff; border-bottom-right-radius: 4px; }
.pgc-me .pgc-who { color: #c9d2c6; }
.pgc-them { align-self: flex-start; background: #fff; border: 1px solid var(--pgc-line); border-bottom-left-radius: 4px; }
.pgc-notice { margin: 0; padding: 10px 14px; background: #fff; border-top: 1px solid var(--pgc-line); color: var(--pgc-muted); }
.pgc-notice a { color: var(--pgc-dark); font-weight: 600; }
.pgc-ended { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 10px 14px; background: #fff; border-top: 1px solid var(--pgc-line); }
.pgc-ended-text { margin: 0; font-weight: 700; color: var(--pgc-dark); }
.pgc-send { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--pgc-line); }
.pgc-send textarea { flex: 1; resize: none; min-height: 46px; }
.pgc-send .pgc-btn { align-self: flex-end; }
.pgc-chat .pgc-err { padding: 0 12px 10px; }

/* Floating button, bottom-right on every screen size */
.pgc-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 900;
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 12px 20px;
  border: 2px solid var(--pgc-dark, #0A1008); border-radius: 999px; cursor: pointer;
  background: #52ED00; color: #0A1008; box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
  font: 700 1.1rem/1 "Akshar", system-ui, sans-serif; letter-spacing: .02em;
}
.pgc-fab:hover { background: #46cc00; }
/* Small phones: a smaller button, and room at the bottom of the page so it never hides the last content */
@media (max-width: 639px) {
  .pgc-fab { right: 12px; bottom: 12px; padding: 10px 16px; }
  html.pgc-has-fab body { padding-bottom: 76px; }
}
.pgc-badge { background: #0A1008; color: #fff; border-radius: 999px; padding: 2px 8px; font-size: .85rem; }

/* Floating panel: full screen on phones, a card bottom-right on wider screens */
.pgc-floating {
  position: fixed; inset: 0; z-index: 1000; border-radius: 0; border: 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
}
.pgc-floating .pgc-start { overflow-y: auto; }
.pgc-floating .pgc-msgs { flex: 1; max-height: none; }
html.pgc-open { overflow: hidden; }
@media (min-width: 640px) {
  .pgc-row { grid-template-columns: 1fr 1fr; }
  .pgc-floating {
    inset: auto 20px 20px auto; width: 390px; height: min(620px, calc(100vh - 40px));
    border-radius: 16px; border: 2px solid var(--pgc-dark);
  }
  html.pgc-open { overflow: auto; }
}

/* Staff photo (or coloured initials) beside staff messages */
.pgc-staffrow { align-self: flex-start; display: flex; align-items: flex-end; gap: 6px; max-width: 90%; min-width: 0; }
.pgc-staffrow .pgc-msg { max-width: none; min-width: 0; }
.pgc-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px;
  border-radius: 50%; overflow: hidden; background: #3a4537; color: #fff;
  font: 700 .75rem/1 "Akshar", system-ui, sans-serif; letter-spacing: .02em; user-select: none;
}
.pgc-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }