/* Qlegy Brief Wizard — assistant-style chat. Uses the theme's --qlegy-* tokens
   when present, with identical fallbacks so it works on any theme. */

.qbw {
  --qbw-bg: var(--qlegy-surface, #131314);
  --qbw-bg-2: var(--qlegy-bg, #0a0a0b);
  --qbw-line: var(--qlegy-line, rgba(255, 255, 255, 0.08));
  --qbw-line-strong: var(--qlegy-line-strong, rgba(255, 255, 255, 0.16));
  --qbw-fg: var(--qlegy-fg, #f5f5f7);
  --qbw-dim: var(--qlegy-fg-dim, #a1a1a6);
  --qbw-mute: var(--qlegy-fg-mute, #6e6e73);
  --qbw-brand: var(--qlegy-brand, #22d3ee);
  --qbw-brand-2: var(--qlegy-brand-2, #67e8f9);
  --qbw-sans: var(--qlegy-sans, 'Geist', system-ui, -apple-system, sans-serif);
  --qbw-mono: var(--qlegy-mono, ui-monospace, monospace);

  max-width: 640px;
  margin-inline: auto;
  background: var(--qbw-bg);
  border: 1px solid var(--qbw-line);
  border-radius: 24px;
  overflow: hidden;
  font-family: var(--qbw-sans);
  color: var(--qbw-fg);
  display: flex;
  flex-direction: column;
}
.qbw * { box-sizing: border-box; }

/* Head */
.qbw__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--qbw-line);
  background: rgba(255, 255, 255, 0.02);
  position: relative;
}
.qbw__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--qbw-bg-2);
  border: 1px solid var(--qbw-line-strong);
  flex-shrink: 0;
}
.qbw__head-text { display: flex; flex-direction: column; line-height: 1.3; }
.qbw__head-text b { font-size: 14px; font-weight: 600; }
.qbw__status {
  font-family: var(--qbw-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qbw-mute);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.qbw__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
}
.qbw__progress {
  position: absolute;
  bottom: -1px;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  background: transparent;
}
.qbw__progress-bar {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--qbw-brand), var(--qbw-brand-2));
  transition: width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Thread */
.qbw__thread {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 320px;
  max-height: 480px;
  overflow-y: auto;
  scroll-behavior: smooth;
}
/* Thread children must never flex-shrink: the review card has overflow:hidden,
   which lets a full thread crush it to its borders. */
.qbw__thread > * { flex-shrink: 0; }

.qbw__msg {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.55;
  animation: qbw-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  white-space: pre-line;
  overflow-wrap: break-word;
}
@keyframes qbw-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.qbw__msg--bot {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--qbw-line);
  border-start-start-radius: 4px;
  color: var(--qbw-dim);
}
.qbw__msg--user {
  align-self: flex-end;
  background: var(--qbw-fg);
  color: var(--qbw-bg-2);
  border-end-end-radius: 4px;
  font-weight: 500;
}
.qbw__msg--error { border-color: rgba(248, 113, 113, 0.4); color: #fca5a5; }

/* Typing dots */
.qbw__typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 4px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--qbw-line);
  border-radius: 16px;
  border-start-start-radius: 4px;
}
.qbw__typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--qbw-mute);
  animation: qbw-typing 1.2s infinite;
}
.qbw__typing span:nth-child(2) { animation-delay: 0.15s; }
.qbw__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes qbw-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Review card */
.qbw__review {
  align-self: stretch;
  border: 1px solid var(--qbw-line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--qbw-bg-2);
  animation: qbw-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.qbw__review-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 10px 14px;
  border-bottom: 1px solid var(--qbw-line);
  font-size: 13px;
}
.qbw__review-row:last-child { border-bottom: 0; }
.qbw__review-l {
  font-family: var(--qbw-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qbw-mute);
  padding-top: 3px;
}
.qbw__review-v { color: var(--qbw-fg); line-height: 1.5; overflow-wrap: anywhere; }
.qbw__review-edit {
  background: transparent;
  border: 0;
  color: var(--qbw-brand);
  font-size: 11px;
  font-family: var(--qbw-mono);
  cursor: pointer;
  padding: 3px 0;
}
.qbw__review-edit:hover { color: var(--qbw-brand-2); }

/* Reference chip on success */
.qbw__ref {
  align-self: flex-start;
  font-family: var(--qbw-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--qbw-brand);
  border: 1px dashed var(--qbw-line-strong);
  border-radius: 999px;
  padding: 8px 14px;
}
.qbw__restart {
  align-self: flex-start;
  background: transparent;
  border: 0;
  color: var(--qbw-mute);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.qbw__restart:hover { color: var(--qbw-fg); }

/* Input dock */
.qbw__input {
  border-top: 1px solid var(--qbw-line);
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  min-height: 70px;
  display: flex;
  align-items: center;
}
.qbw__form { display: flex; gap: 8px; width: 100%; align-items: flex-end; }
.qbw__field {
  flex: 1;
  background: var(--qbw-bg-2);
  border: 1px solid var(--qbw-line);
  border-radius: 999px;
  padding: 13px 18px;
  color: var(--qbw-fg);
  font-family: var(--qbw-sans);
  font-size: 14px;
  outline: none;
  transition: border-color 0.25s;
  min-width: 0;
}
textarea.qbw__field { border-radius: 16px; resize: none; min-height: 84px; line-height: 1.5; }
.qbw__field:focus { border-color: var(--qbw-brand); }
.qbw__field::placeholder { color: var(--qbw-mute); }
.qbw__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: var(--qbw-fg);
  color: var(--qbw-bg-2);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.qbw__send:hover { transform: translateY(-1px); }
.qbw__send:disabled { opacity: 0.4; cursor: default; transform: none; }
.qbw__send svg { display: block; }
.qbw__skip {
  background: transparent;
  border: 1px solid var(--qbw-line);
  color: var(--qbw-mute);
  border-radius: 999px;
  padding: 12px 16px;
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
  font-family: var(--qbw-sans);
}
.qbw__skip:hover { color: var(--qbw-fg); border-color: var(--qbw-line-strong); }

/* Pills answers */
.qbw__pills { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.qbw__pill {
  padding: 10px 16px;
  border: 1px solid var(--qbw-line-strong);
  background: transparent;
  color: var(--qbw-dim);
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  font-family: var(--qbw-sans);
  transition: all 0.2s;
}
.qbw__pill:hover { background: var(--qbw-fg); color: var(--qbw-bg-2); border-color: var(--qbw-fg); }

/* Submit button (review) */
.qbw__submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  border: 0;
  background: var(--qbw-fg);
  color: var(--qbw-bg-2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--qbw-sans);
  transition: transform 0.2s;
}
.qbw__submit:hover { transform: translateY(-1px); }
.qbw__submit:disabled { opacity: 0.5; transform: none; cursor: default; }

/* Honeypot */
.qbw__hp {
  position: absolute !important;
  inset-inline-start: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Uploaded bot logo */
.qbw__avatar-img,
.qbw-float__icon .qbw__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ---------- Floating launcher ---------- */
.qbw-float {
  position: fixed;
  inset-inline-end: 24px;
  bottom: 24px;
  z-index: 9990;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  font-family: var(--qlegy-sans, 'Geist', system-ui, -apple-system, sans-serif);
}
.qbw-float__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(16, 17, 18, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #f5f5f7;
  cursor: pointer;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.25s;
}
.qbw-float__btn:hover {
  transform: translateY(-2px);
  border-color: rgba(103, 232, 249, 0.45);
}
.qbw-float__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #0a0a0b;
  overflow: hidden;
  flex-shrink: 0;
}
.qbw-float__icon--close { display: none; }
.qbw-float.is-open .qbw-float__icon--open { display: none; }
.qbw-float.is-open .qbw-float__icon--close { display: flex; }
.qbw-float__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding-inline-end: 10px;
  white-space: nowrap;
}
.qbw-float.is-open .qbw-float__label { display: none; }

/* The explicit display below would defeat the hidden attribute — restate it. */
.qbw-float__panel[hidden] { display: none; }

.qbw-float__panel {
  width: min(420px, calc(100vw - 32px));
  max-height: min(680px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
  animation: qbw-panel-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: bottom right;
}
body.rtl .qbw-float__panel { transform-origin: bottom left; }
@keyframes qbw-panel-in {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.qbw-float__panel .qbw { max-width: none; height: 100%; }
.qbw-float__panel .qbw__thread { min-height: 260px; max-height: min(420px, calc(100vh - 320px)); }

@media (max-width: 560px) {
  .qbw { border-radius: 18px; }
  .qbw__thread { max-height: 420px; padding: 18px 14px; }
  .qbw__msg { max-width: 92%; }
  .qbw__review-row { grid-template-columns: 76px 1fr auto; }
  .qbw-float { inset-inline-end: 16px; bottom: 16px; }
}

/* ------------------------------------------------------------------ *
 * Light theme — Settings → Assistant → Chat colors. Overrides the
 * --qbw-* tokens directly so it works regardless of the host theme,
 * plus the few surfaces painted with hardcoded white overlays.
 * ------------------------------------------------------------------ */
.qbw.qbw--light {
  --qbw-bg: #ffffff;
  --qbw-bg-2: #f4f4f5;
  --qbw-line: rgba(0, 0, 0, 0.10);
  --qbw-line-strong: rgba(0, 0, 0, 0.18);
  --qbw-fg: #0a0a0b;
  --qbw-dim: #52525b;
  --qbw-mute: #71717a;
}
.qbw--light .qbw__head { background: rgba(0, 0, 0, 0.02); }
.qbw--light .qbw__msg--bot { background: rgba(0, 0, 0, 0.05); }
.qbw--light .qbw__typing { background: rgba(0, 0, 0, 0.05); }
.qbw--light .qbw__input { background: rgba(0, 0, 0, 0.02); }