/* ------------------------------------------------------------------
   Brimedge live chat widget
   Loaded on the public site and on the student/parent portals. Every
   selector is prefixed bcw- so it cannot collide with the portal
   stylesheets or the marketing site styles.
   ------------------------------------------------------------------ */

.bcw-root {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9000;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #2c2c2c;
}

/* ---------------- Launcher ---------------- */

.bcw-launcher {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px 13px 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #70167e, #a60c56);
  color: #fff;
  font-family: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(74, 37, 89, 0.34);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
.bcw-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(74, 37, 89, 0.42);
}
.bcw-launcher:focus-visible {
  outline: 3px solid #f8931f;
  outline-offset: 3px;
}
.bcw-launcher[hidden] { display: none; }

.bcw-launcher__dot {
  position: relative;
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: #35d07f;
  box-shadow: 0 0 0 0 rgba(53, 208, 127, 0.7);
  animation: bcw-pulse 2.4s infinite;
}
@keyframes bcw-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(53, 208, 127, 0.65); }
  70%  { box-shadow: 0 0 0 9px rgba(53, 208, 127, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 208, 127, 0); }
}

.bcw-launcher__icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------- Panel ---------------- */

.bcw-panel {
  position: absolute;
  right: 0;
  bottom: 68px;
  width: 384px;
  max-width: calc(100vw - 32px);
  height: 552px;
  max-height: calc(100vh - 132px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(112, 22, 126, 0.14);
  border-radius: 18px;
  box-shadow: 0 18px 54px rgba(45, 20, 56, 0.24);
  transform-origin: bottom right;
  animation: bcw-in 0.2s ease;
}
.bcw-panel[hidden] { display: none; }

@keyframes bcw-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.bcw-head {
  position: relative;
  flex: 0 0 auto;
  padding: 18px 20px;
  background: linear-gradient(135deg, #4a2559, #70167e);
  color: #fff;
}
.bcw-head__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.2;
}
.bcw-head__status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  font-size: 0.74rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
}
.bcw-head__status-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #35d07f;
}
.bcw-head__status-dot[data-state="waiting"] { background: #f8931f; }
.bcw-head__status-dot[data-state="closed"] { background: rgba(255, 255, 255, 0.45); }

.bcw-head__close {
  position: absolute;
  top: 14px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}
.bcw-head__close:hover { background: rgba(255, 255, 255, 0.24); }
.bcw-head__close:focus-visible { outline: 2px solid #f8931f; outline-offset: 2px; }

/* ---------------- Transcript ---------------- */

.bcw-log {
  flex: 1 1 auto;
  /*
   * min-height:0 is what actually makes this scroll. A flex item defaults to an
   * automatic minimum size of its content, so without this the transcript grew
   * to the height of every message ever sent, pushed the contact form and the
   * composer out of the panel, and the panel's overflow:hidden clipped the top
   * of the conversation. That is why the form appeared to sit on top of the
   * earlier messages.
   */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 18px 16px;
  background: #f7f5fa;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bcw-log::-webkit-scrollbar { width: 8px; }
.bcw-log::-webkit-scrollbar-thumb { background: rgba(112, 22, 126, 0.2); border-radius: 8px; }

.bcw-msg {
  max-width: 84%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.88rem;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  box-shadow: 0 1px 2px rgba(45, 20, 56, 0.07);
}
.bcw-msg__time {
  display: block;
  margin-top: 4px;
  font-size: 0.64rem;
  opacity: 0.6;
}

.bcw-msg--bot {
  align-self: flex-start;
  background: #fff;
  color: #333;
  border: 1px solid rgba(112, 22, 126, 0.1);
  border-bottom-left-radius: 5px;
}
.bcw-msg--visitor {
  align-self: flex-end;
  background: linear-gradient(135deg, #70167e, #a60c56);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.bcw-msg--staff {
  align-self: flex-start;
  background: #eaf7f0;
  color: #14512f;
  border: 1px solid rgba(26, 92, 58, 0.22);
  border-bottom-left-radius: 5px;
}
.bcw-msg--staff .bcw-msg__by {
  display: block;
  margin-bottom: 3px;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #1a5c3a;
}
.bcw-msg--pending { opacity: 0.62; font-style: italic; }

.bcw-daystamp {
  align-self: center;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(112, 22, 126, 0.09);
  color: #70167e;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------------- Contact form ---------------- */

.bcw-contact {
  flex: 0 0 auto;
  /*
   * On a short screen the three fields plus the button can be taller than the
   * space left between the header and the composer. Capping it and allowing the
   * block to scroll keeps every field reachable instead of pushing the
   * transcript out of view or clipping the button.
   */
  max-height: 45%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 16px;
  background: #fff8ec;
  border-top: 1px solid rgba(209, 129, 9, 0.28);
}
.bcw-contact[hidden] { display: none; }
.bcw-contact__title {
  margin-bottom: 3px;
  font-size: 0.83rem;
  font-weight: 700;
  color: #4a2559;
}
.bcw-contact__hint {
  margin-bottom: 10px;
  font-size: 0.72rem;
  color: #8a6a3a;
}
.bcw-contact__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.bcw-field { margin-bottom: 8px; }
.bcw-field--wide { grid-column: 1 / -1; }
.bcw-field label {
  display: block;
  margin-bottom: 3px;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #7a6238;
}
.bcw-field input {
  width: 100%;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.84rem;
  color: #2c2c2c;
  background: #fff;
  border: 1.5px solid rgba(209, 129, 9, 0.35);
  border-radius: 8px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bcw-field input:focus {
  border-color: #d18109;
  box-shadow: 0 0 0 3px rgba(209, 129, 9, 0.14);
}
.bcw-btn {
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #70167e, #a60c56);
  color: #fff;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.bcw-btn:hover { opacity: 0.9; }
.bcw-btn:disabled { opacity: 0.55; cursor: default; }
.bcw-btn:focus-visible { outline: 2px solid #d18109; outline-offset: 2px; }
.bcw-btn--ghost {
  background: transparent;
  color: #8a6a3a;
  border: 1px solid rgba(209, 129, 9, 0.4);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

/* ---------------- Composer ---------------- */

.bcw-composer {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 14px;
  background: #fff;
  border-top: 1px solid rgba(112, 22, 126, 0.1);
}
.bcw-composer[hidden] { display: none; }

.bcw-input {
  flex: 1 1 auto;
  max-height: 92px;
  min-height: 40px;
  padding: 9px 13px;
  font-family: inherit;
  font-size: 0.87rem;
  line-height: 1.45;
  color: #2c2c2c;
  background: #f2f1f6;
  border: 1.5px solid rgba(112, 22, 126, 0.16);
  border-radius: 20px;
  outline: none;
  resize: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.bcw-input:focus {
  background: #fff;
  border-color: #70167e;
  box-shadow: 0 0 0 3px rgba(112, 22, 126, 0.1);
}
.bcw-input::placeholder { color: #9a93a8; }

.bcw-send {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #70167e, #a60c56);
  color: #fff;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.bcw-send:hover:not(:disabled) { transform: scale(1.06); }
.bcw-send:disabled { opacity: 0.4; cursor: default; }
.bcw-send:focus-visible { outline: 2px solid #f8931f; outline-offset: 2px; }
.bcw-send svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------- Footer links ---------------- */

.bcw-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px 10px;
  background: #fff;
  font-size: 0.68rem;
  color: #9a93a8;
}
.bcw-foot__link {
  padding: 0;
  border: 0;
  background: none;
  color: #70167e;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.bcw-foot__link:hover { color: #a60c56; }
.bcw-foot__link[hidden] { display: none; }

.bcw-alert {
  flex: 0 0 auto;
  padding: 9px 14px;
  background: #fdecec;
  border-top: 1px solid rgba(192, 57, 43, 0.25);
  color: #a02b21;
  font-size: 0.76rem;
}
.bcw-alert[hidden] { display: none; }

/* ---------------- Small screens ---------------- */

@media (max-width: 480px) {
  .bcw-root {
    right: 0;
    bottom: 0;
    left: 0;
  }
  .bcw-panel {
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    height: 88vh;
    /* dvh follows the collapsing mobile toolbar, so the composer stays reachable */
    height: 88dvh;
    max-height: none;
    border-radius: 18px 18px 0 0;
    transform-origin: bottom center;
  }
  .bcw-launcher {
    margin: 0 16px 16px auto;
    padding: 14px 20px 14px 17px;
  }
  .bcw-launcher__label { display: none; }
  .bcw-launcher { padding-right: 17px; }
  .bcw-msg { max-width: 90%; }
}

@media (max-height: 560px) {
  /* Landscape phone. There is very little vertical room, so the panel uses
     nearly all of it and the form is compacted enough to fit outright rather
     than needing an inner scrollbar to reach the submit button. The transcript
     keeps a usable minimum, and the form still scrolls as a last resort. */
  .bcw-panel {
    height: calc(100vh - 84px);
    max-height: calc(100vh - 84px);
  }
  .bcw-log { min-height: 56px; }
  .bcw-contact {
    max-height: none;
    padding: 10px 14px;
  }
  .bcw-contact__title { margin-bottom: 6px; font-size: 0.78rem; }
  .bcw-contact__hint { display: none; }
  .bcw-contact__row { gap: 6px; }
  .bcw-field { margin-bottom: 6px; }
  .bcw-field label { margin-bottom: 2px; font-size: 0.58rem; }
  .bcw-field input { padding: 6px 8px; font-size: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bcw-panel { animation: none; }
  .bcw-launcher, .bcw-send { transition: none; }
  .bcw-launcher__dot { animation: none; }
}