/**
 * ITR Chatbot — widget styles
 *
 * All brand decisions live in the :root token block below; change tokens, not rules.
 * Every class is prefixed `itrc-` to avoid colliding with theme styles on WordPress.
 */

:root {
  /* Brand (sampled from ITR-Logo.png) */
  --itrc-orange: #f36f21;
  --itrc-orange-soft: #fde5d6;   /* tint for user bubbles */
  --itrc-orange-deep: #9a4108;   /* readable orange for text on tints */
  --itrc-indigo: #2a2a86;
  --itrc-indigo-deep: #1e1e66;   /* hover/active surfaces */
  --itrc-indigo-soft: #eeeef7;   /* tint for bot bubbles */

  /* Neutrals */
  --itrc-ink: #23233c;
  --itrc-ink-faint: #6b6b85;
  --itrc-bg: #ffffff;
  --itrc-line: #e3e3ee;

  /* Type — inherits the site's body font by default; swap when theme fonts are known */
  --itrc-font: inherit;

  /* Geometry */
  --itrc-radius: 14px;
  --itrc-shadow: 0 8px 32px rgba(30, 30, 102, 0.22);
}

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

.itrc-launcher {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 99990;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: var(--itrc-orange);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--itrc-shadow);
  transition: transform 0.15s ease, background 0.15s ease;
}
.itrc-launcher:hover { transform: scale(1.06); }
.itrc-launcher:focus-visible {
  outline: 3px solid var(--itrc-indigo);
  outline-offset: 2px;
}
.itrc-launcher svg { width: 26px; height: 26px; }

/* One gentle "I'm here" breath on page load — the only unprompted motion */
@keyframes itrc-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
.itrc-launcher.itrc-breathe { animation: itrc-breathe 1.2s ease-in-out 1.5s 1; }

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

.itrc-panel {
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 99991;
  width: 372px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 120px);
  display: none;
  flex-direction: column;
  background: var(--itrc-bg);
  border-radius: var(--itrc-radius);
  box-shadow: var(--itrc-shadow);
  overflow: hidden;
  font-family: var(--itrc-font);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--itrc-ink);
}
.itrc-panel.itrc-open { display: flex; }

@keyframes itrc-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.itrc-panel.itrc-open { animation: itrc-rise 0.22s ease; }

/* Small screens: take over the viewport */
@media (max-width: 480px) {
  .itrc-panel {
    right: 8px;
    left: 8px;
    bottom: 8px;
    width: auto;
    height: auto;
    top: 8px;
    max-height: none;
  }
}

/* ---------- Header ---------- */

.itrc-header {
  background: var(--itrc-indigo);
  color: #fff;
  padding: 14px 16px 12px;
  flex-shrink: 0;
}
.itrc-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* The logo mark sits in a white circle so it stays crisp on the indigo header */
.itrc-logo {
  width: 36px;
  height: 36px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.itrc-logo img {
  width: 24px;
  height: 24px;
  display: block;
}
.itrc-header-title {
  flex: 1;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em; /* echoes the spaced caps of the ITR wordmark */
  text-transform: uppercase;
}
.itrc-header-sub {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 2px;
}
.itrc-iconbtn {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: flex;
  opacity: 0.85;
}
.itrc-iconbtn:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }
.itrc-iconbtn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.itrc-iconbtn svg { width: 18px; height: 18px; }

/* ---------- Message area ---------- */

.itrc-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-behavior: smooth;
}

.itrc-msg {
  max-width: 82%;
  padding: 9px 13px;
  border-radius: var(--itrc-radius);
  animation: itrc-rise 0.18s ease;
  overflow-wrap: break-word;
}
.itrc-msg--bot {
  align-self: flex-start;
  background: var(--itrc-indigo-soft);
  color: var(--itrc-ink);
  border-bottom-left-radius: 4px;
}
.itrc-msg a {
  color: var(--itrc-orange-deep);
  font-weight: 600;
  text-decoration: underline;
  overflow-wrap: anywhere; /* long URLs must wrap, not overflow the bubble */
}
.itrc-msg a:hover { color: var(--itrc-orange); }
.itrc-msg a:focus-visible {
  outline: 2px solid var(--itrc-indigo);
  outline-offset: 1px;
  border-radius: 3px;
}
.itrc-msg--user {
  align-self: flex-end;
  background: var(--itrc-orange-soft);
  color: var(--itrc-orange-deep);
  font-weight: 600;
  border-bottom-right-radius: 4px;
}

/* Typing indicator */
.itrc-typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 12px 14px;
  background: var(--itrc-indigo-soft);
  border-radius: var(--itrc-radius);
  border-bottom-left-radius: 4px;
}
.itrc-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--itrc-indigo);
  opacity: 0.4;
  animation: itrc-blink 1s infinite;
}
.itrc-typing span:nth-child(2) { animation-delay: 0.15s; }
.itrc-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes itrc-blink {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.9; }
}

/* ---------- Options ---------- */

.itrc-options {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  padding: 4px 14px 14px;
  flex-shrink: 0;
}
.itrc-option {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  color: var(--itrc-indigo);
  background: #fff;
  border: 1.5px solid var(--itrc-indigo);
  border-radius: 999px;
  padding: 7px 15px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  text-decoration: none;
}
.itrc-option:hover {
  background: var(--itrc-indigo);
  color: #fff;
}
.itrc-option:focus-visible {
  outline: 2px solid var(--itrc-orange);
  outline-offset: 2px;
}
/* Link-type options (open a page / email) get the orange action treatment */
.itrc-option--link {
  border-color: var(--itrc-orange);
  color: var(--itrc-orange-deep);
}
.itrc-option--link:hover {
  background: var(--itrc-orange);
  border-color: var(--itrc-orange);
  color: #fff;
}

/* ---------- Input nodes (name/email questions) ---------- */

.itrc-inputrow {
  display: flex;
  gap: 6px;
  width: 100%;
}
.itrc-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 14px;
  padding: 8px 14px;
  border: 1.5px solid var(--itrc-line);
  border-radius: 999px;
  color: var(--itrc-ink);
  background: #fff;
}
.itrc-input::placeholder { color: var(--itrc-ink-faint); }
.itrc-input:focus {
  outline: none;
  border-color: var(--itrc-indigo);
}
.itrc-send {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--itrc-indigo);
  border: 1.5px solid var(--itrc-indigo);
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.itrc-send:hover { background: var(--itrc-indigo-deep); }
.itrc-send:focus-visible {
  outline: 2px solid var(--itrc-orange);
  outline-offset: 2px;
}
.itrc-hint {
  width: 100%;
  text-align: right;
  font-size: 12px;
  color: #b3261e;
  min-height: 0;
}
.itrc-hint:empty { display: none; }
.itrc-skip {
  background: none;
  border: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--itrc-ink-faint);
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 4px;
}
.itrc-skip:hover { color: var(--itrc-ink); }
.itrc-skip:focus-visible { outline: 2px solid var(--itrc-indigo); }

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

.itrc-footer {
  padding: 6px 14px 9px;
  font-size: 11px;
  color: var(--itrc-ink-faint);
  text-align: center;
  border-top: 1px solid var(--itrc-line);
  flex-shrink: 0;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .itrc-launcher,
  .itrc-launcher.itrc-breathe,
  .itrc-panel.itrc-open,
  .itrc-msg,
  .itrc-typing span {
    animation: none;
    transition: none;
  }
}