/* Chloe chat widget (PROG-10494). Self-contained: no theme tokens, no Bootstrap. */
.ot-chloe {
  --otc-accent: #6080D0; /* brand blue of the header Registration button */
  --otc-accent-text: #fff;
  --otc-bg: #fff;
  --otc-text: #212529;
  --otc-muted: #6c757d;
  --otc-border: #e5e7eb;
  --otc-me: #e8f0fe;
  --otc-bot: #f3f4f6;
  --otc-radius: 14px;
  --otc-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  --otc-offset-x: 20px;
  /* Bottom-LEFT corner: the Messenger bubble (Chaty plugin) already owns the
     bottom-right one on every page. Sits above the cookie bar (.okt-cookies,
     z-index 9000); the register button lives in the header, so no overlap. */
  --otc-offset-y: 20px;
  position: fixed;
  left: var(--otc-offset-x);
  bottom: var(--otc-offset-y);
  z-index: 9500;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: var(--otc-text);
}
.ot-chloe *, .ot-chloe *::before, .ot-chloe *::after { box-sizing: border-box; }

/* Launcher button */
.ot-chloe__launcher {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 0 0;
  border: 0;
  border-radius: 50%;
  background: var(--otc-accent);
  color: var(--otc-accent-text);
  cursor: pointer;
  box-shadow: var(--otc-shadow);
  transition: transform .15s ease;
}
.ot-chloe__launcher:hover { transform: scale(1.06); }
.ot-chloe__launcher:focus-visible { outline: 3px solid #4c8dff; outline-offset: 2px; }

/* Greeting bubble */
.ot-chloe__bubble {
  position: absolute;
  left: 0;
  bottom: 68px;
  max-width: 300px;
  padding: 12px 36px 12px 14px;
  background: var(--otc-bg);
  border: 1px solid var(--otc-border);
  border-radius: var(--otc-radius);
  box-shadow: var(--otc-shadow);
  cursor: pointer;
  animation: otc-pop .25s ease-out;
}
.ot-chloe__bubble-close,
.ot-chloe__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--otc-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.ot-chloe__bubble-close:hover, .ot-chloe__close:hover { background: rgba(0, 0, 0, .06); }

/* Panel */
.ot-chloe__panel {
  position: absolute;
  left: 0;
  bottom: 68px;
  display: flex;
  flex-direction: column;
  width: 370px;
  max-width: calc(100vw - 2 * var(--otc-offset-x));
  height: 520px;
  max-height: calc(100vh - var(--otc-offset-y) - 90px);
  overflow: hidden;
  background: var(--otc-bg);
  border: 1px solid var(--otc-border);
  border-radius: var(--otc-radius);
  box-shadow: var(--otc-shadow);
  animation: otc-pop .2s ease-out;
}
.ot-chloe__head {
  position: relative;
  padding: 14px 44px 14px 16px;
  background: var(--otc-accent);
  color: var(--otc-accent-text);
}
.ot-chloe__title { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.ot-chloe__mark { display: block; flex: 0 0 auto; height: auto; }
.ot-chloe__launcher img { display: block; height: auto; }
.ot-chloe__head .ot-chloe__close { top: 10px; right: 10px; color: var(--otc-accent-text); }
.ot-chloe__head .ot-chloe__close:hover { background: rgba(255, 255, 255, .15); }

.ot-chloe__notice {
  padding: 8px 14px;
  font-size: 12px;
  color: var(--otc-muted);
  background: #fafafa;
  border-bottom: 1px solid var(--otc-border);
}
.ot-chloe__notice a { color: inherit; text-decoration: underline; }

.ot-chloe__log {
  flex: 1 1 auto;
  padding: 12px 12px 4px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ot-chloe__msg {
  max-width: 85%;
  margin: 0 0 8px;
  padding: 9px 12px;
  border-radius: 12px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ot-chloe__msg--me { margin-left: auto; background: var(--otc-me); border-bottom-right-radius: 4px; }
.ot-chloe__msg--bot, .ot-chloe__msg--operator, .ot-chloe__msg--typing { margin-right: auto; background: var(--otc-bot); border-bottom-left-radius: 4px; }
.ot-chloe__msg--operator { border-left: 3px solid var(--otc-accent); }
.ot-chloe__msg--typing { color: var(--otc-muted); letter-spacing: 2px; }
.ot-chloe__msg--error { margin: 0 auto 8px; font-size: 13px; color: #b42318; background: #fef3f2; }

/* Consent step */
.ot-chloe__consent {
  padding: 10px 12px;
  background: #fffbea;
  border-top: 1px solid #f5e6a3;
  font-size: 13px;
}
.ot-chloe__consent-label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.ot-chloe__consent-label input { margin: 3px 0 0; flex: 0 0 auto; }
.ot-chloe__consent-btn {
  margin: 8px 0 0 auto;
  display: block;
  padding: 6px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--otc-accent);
  color: var(--otc-accent-text);
  font: inherit;
  cursor: pointer;
}
.ot-chloe__consent-btn:disabled { opacity: .45; cursor: default; }

/* Composer */
.ot-chloe__form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px 12px;
  border-top: 1px solid var(--otc-border);
  background: var(--otc-bg);
}
.ot-chloe__input {
  flex: 1 1 auto;
  min-height: 38px;
  max-height: 120px;
  padding: 8px 12px;
  border: 1px solid var(--otc-border);
  border-radius: 10px;
  font: inherit;
  color: inherit;
  resize: none;
  outline: none;
}
.ot-chloe__input:focus { border-color: #9ca3af; }
.ot-chloe__send {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  background: var(--otc-accent);
  color: var(--otc-accent-text);
  cursor: pointer;
}
.ot-chloe__send:disabled { opacity: .45; cursor: default; }

/* Launcher in the Chaty stack (bottom-right): no own button, panel docks to the
   right next to the stack instead of the left corner. */
.ot-chloe--chaty {
  left: auto;
  right: 90px;
  bottom: calc(20px + var(--okt-cookie-h, 0px));
  transition: bottom .6s ease;
}
.ot-chloe__bubble, .ot-chloe__launcher { display: none !important; }
.ot-chloe__msg--waiting {
  margin: 0 auto 8px;
  font-size: 13px;
  color: var(--otc-muted);
  background: #f5f7ff;
  border: 1px dashed #c9d4f2;
  text-align: center;
}
.ot-chloe--chaty .ot-chloe__panel,
.ot-chloe--chaty .ot-chloe__bubble {
  left: auto;
  right: 0;
  bottom: 0;
}

@keyframes otc-pop {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Phone: full-width sheet, launcher a bit smaller, never under the browser bar */
@media (max-width: 480px) {
  .ot-chloe { --otc-offset-x: 12px; --otc-offset-y: 12px; }
  .ot-chloe__launcher { width: 50px; height: 50px; }
  .ot-chloe__panel {
    position: fixed;
    /* Pinned to the left edge and sized by vw, not by left+right: the theme header
       can widen the layout viewport past the screen (377 px on a 360 px phone), and
       right: 0 would then push the sheet's edge and close button off-screen. */
    inset: auto auto 0 0;
    width: 100vw;
    max-width: 100vw;
    height: min(85vh, 640px);
    max-height: 85vh;
    border-radius: var(--otc-radius) var(--otc-radius) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  /* dvh follows the browser's toolbars, so the composer is not hidden under them. */
  @supports (height: 100dvh) {
    .ot-chloe__panel { height: min(85dvh, 640px); max-height: 85dvh; }
  }
  /* iOS Safari zooms the page on focus when the field font is under 16px. */
  .ot-chloe__input { font-size: 16px; }
  .ot-chloe.is-open .ot-chloe__launcher,
  .ot-chloe.is-open .ot-chloe__bubble { display: none; }
  .ot-chloe--chaty { right: 76px; bottom: calc(12px + var(--okt-cookie-h, 0px)); }
  /* Beats `.ot-chloe--chaty .ot-chloe__panel { left: auto; right: 0 }` above. */
  .ot-chloe--chaty .ot-chloe__panel { left: 0; right: auto; }
  /* Full-screen sheet on phones: it must sit above Chaty's stack (z-index ~ 9999). */
  .ot-chloe.is-open { z-index: 2147483000; }
  .ot-chloe__bubble { max-width: calc(100vw - 24px); }
}


@media (prefers-reduced-motion: reduce) {
  .ot-chloe__bubble, .ot-chloe__panel { animation: none; }
  .ot-chloe__launcher { transition: none; }
}