/* ------------------------------------------------------------------------- *
 * Word Buddy — the conversational guide overlay.
 *
 * Everything is scoped under #wb-* so the whole feature can be removed by
 * deleting three lines from master.blade.php and these files.
 *
 * Two rules shape the layout and must not be undone:
 *   1. No backdrop and no scroll lock. The learner must be able to reach every
 *      part of the page underneath — on a quiz that means all four answers.
 *   2. z-index stays below Bootstrap's modal layer (1050+), so the Sentences
 *      and Meaning modals still open over the panel.
 * ------------------------------------------------------------------------- */

:root {
  --wb-purple: #6b4c9a;
  --wb-purple-dark: #563d7d;
  --wb-ink: #212529;
  --wb-muted: #6c757d;
  --wb-line: #e6e2ee;
  --wb-bg: #ffffff;
  --wb-surface: #f7f5fb;
  --wb-z: 1035;
}

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

#wb-launcher {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: var(--wb-z);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 13px;
  border: none;
  border-radius: 999px;
  background: var(--wb-purple);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  cursor: pointer;
}

#wb-launcher:hover { background: var(--wb-purple-dark); }
#wb-launcher:focus-visible { outline: 3px solid #ffc107; outline-offset: 2px; }
#wb-launcher[hidden] { display: none; }

/* On a quiz the Next button sits bottom-right, so the launcher moves aside. */
body.wb-quiz #wb-launcher { right: auto; left: 16px; }

#wb-launcher .wb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffc107;
  flex: 0 0 auto;
}

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

#wb-panel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: var(--wb-z);
  display: flex;
  flex-direction: column;
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: min(70vh, 560px);
  background: var(--wb-bg);
  border: 1px solid var(--wb-line);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .28);
  overflow: hidden;
  font-size: 14px;
  color: var(--wb-ink);
}

#wb-panel[hidden] { display: none; }

#wb-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--wb-purple);
  color: #fff;
  flex: 0 0 auto;
}

#wb-head strong { font-size: 15px; }

#wb-head .wb-sub {
  font-size: 11px;
  opacity: .85;
  font-weight: 400;
}

#wb-close {
  margin-left: auto;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}

#wb-close:focus-visible { outline: 2px solid #ffc107; }

#wb-log {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px;
  background: var(--wb-surface);
}

/* --- Messages ------------------------------------------------------------ */

.wb-msg {
  max-width: 88%;
  margin-bottom: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  line-height: 1.45;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.wb-msg p { margin: 0 0 .5em; }
.wb-msg p:last-child { margin-bottom: 0; }
.wb-msg ul { margin: .35em 0 0; padding-left: 1.15em; }
.wb-msg li { margin-bottom: .2em; }

.wb-buddy {
  background: #fff;
  border: 1px solid var(--wb-line);
  border-bottom-left-radius: 4px;
}

.wb-learner {
  margin-left: auto;
  background: var(--wb-purple);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.wb-note {
  max-width: 100%;
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff6d9;
  border: 1px solid #ffe08a;
  color: #6b5300;
  font-size: 12.5px;
}

.wb-typing { color: var(--wb-muted); font-style: italic; }

/* --- Suggestions and chips ----------------------------------------------- */

#wb-suggest, #wb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px 8px;
  flex: 0 0 auto;
  background: var(--wb-surface);
}

#wb-suggest:empty, #wb-chips:empty { display: none; }

.wb-chip, .wb-go {
  border: 1px solid var(--wb-purple);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12.5px;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
}

.wb-chip { background: #fff; color: var(--wb-purple); }
.wb-chip:hover { background: #efe9f7; }

.wb-go { background: var(--wb-purple); color: #fff; font-weight: 600; }
.wb-go:hover { background: var(--wb-purple-dark); color: #fff; }

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

#wb-form {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--wb-line);
  background: #fff;
  flex: 0 0 auto;
}

#wb-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--wb-line);
  border-radius: 999px;
  padding: 8px 13px;
  font-size: 14px;
  font-family: inherit;
  resize: none;
  max-height: 84px;
}

#wb-input:focus { outline: none; border-color: var(--wb-purple); }
#wb-input:disabled { background: #f1f1f1; }

#wb-send {
  flex: 0 0 auto;
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  background: var(--wb-purple);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

#wb-send:disabled { background: #b6a8ce; cursor: default; }

/* --- Phone: a bottom sheet, deliberately not a modal --------------------- *
 *
 * No backdrop, no focus trap, no body scroll lock — so the page underneath
 * keeps scrolling and every quiz answer can still be scrolled above the sheet
 * and tapped. word-buddy.js pads the body by the sheet's height to guarantee
 * the last option can clear it.
 */

@media (max-width: 767.98px) {
  #wb-panel {
    right: 0;
    left: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    border-radius: 14px 14px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    max-height: 60vh;
  }

  /* Smaller again during a quiz: the answers matter more than the chat. */
  body.wb-quiz #wb-panel { max-height: min(45vh, 300px); }

  #wb-launcher {
    right: 12px;
    bottom: 12px;
    padding: 9px 14px 9px 11px;
    font-size: 13px;
  }

  body.wb-quiz #wb-launcher { left: 12px; }
}

@media (prefers-reduced-motion: no-preference) {
  #wb-panel { animation: wb-rise .16s ease-out; }
  @keyframes wb-rise {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
  }
}