/* Tutor Quest HUD — motivational daily mission (private tutors only) */
.tutor-quest {
  --tq-ink: #0b3d2e;
  --tq-gold: #e8b84a;
  --tq-coral: #ff6b4a;
  --tq-mint: #1fa97a;
  --tq-sky: #2bb0ed;
  --tq-card: rgba(255, 252, 245, 0.96);
  --tq-shadow: 0 10px 28px rgba(11, 61, 46, 0.18);
  position: fixed;
  z-index: 46;
  left: max(12px, env(safe-area-inset-left));
  right: auto;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  max-width: min(420px, calc(100vw - 24px));
  font-family: Vazirmatn, Tahoma, sans-serif;
  direction: rtl;
  pointer-events: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.tutor-quest.is-placed {
  right: auto !important;
  bottom: auto !important;
}

.tutor-quest.is-dragging {
  opacity: 0.94;
  z-index: 60;
}

.tutor-quest.is-dragging .tutor-quest-chrome,
.tutor-quest.is-dragging .tutor-quest-panel {
  transition: none !important;
  cursor: grabbing;
}

.tutor-quest > * {
  pointer-events: auto;
}

/* First screen must stay calm: hide quest HUD while welcome/empty is visible */
body:is(.desktop-chat, .mobile-chat):has(#emptyState:not([style*="display: none"])) .tutor-quest {
  display: none !important;
}

.tutor-quest-chrome {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
}

/* Familiar mission pill — full vs compact (same style) */
.tutor-quest-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0f5c45 0%, #0b3d2e 55%, #165f3f 100%);
  color: #fff8e7;
  box-shadow: var(--tq-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.tutor-quest-pill .tq-full {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tutor-quest-pill .tq-mini {
  display: none;
  align-items: center;
  gap: 6px;
}

.tutor-quest.is-compact .tutor-quest-pill .tq-full {
  display: none;
}

.tutor-quest.is-compact .tutor-quest-pill .tq-mini {
  display: inline-flex;
}

.tutor-quest.is-compact .tq-min-pill {
  display: none;
}

.tutor-quest:not(.is-compact) .tq-restore-pill {
  display: none;
}

.tutor-quest.is-compact .tutor-quest-panel {
  display: none !important;
}

.tq-ico {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  background: #fff8e7;
  color: #0b3d2e;
  box-shadow: var(--tq-shadow);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.tq-ico:active {
  transform: scale(0.96);
}

.tq-ico svg {
  display: block;
}

.tq-min-pill,
.tq-restore-pill {
  width: 32px;
  height: 32px;
}

.tutor-quest-pill:hover {
  transform: translateY(-1px) scale(1.02);
}

.tutor-quest-pill:active {
  transform: scale(0.98);
}

.tq-flame {
  font-size: 14px;
  filter: drop-shadow(0 0 4px rgba(255, 140, 60, 0.7));
  animation: tq-flicker 1.8s ease-in-out infinite;
}

@keyframes tq-flicker {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

.tq-sep {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.28);
  margin: 0 2px;
}

.tq-ring {
  --tq: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, #0b3d2e 56%, transparent 57%),
    conic-gradient(#e8b84a calc(var(--tq) * 1%), rgba(255, 255, 255, 0.18) 0);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.tq-ring-n {
  font-size: 9px;
  font-weight: 800;
  color: #fff4d6;
}

.tq-mission {
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tq-xp {
  color: var(--tq-gold);
  font-variant-numeric: tabular-nums;
}

.tq-lv {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 11px;
}

.tutor-quest-panel {
  margin-top: 8px;
  background: var(--tq-card);
  color: #16352b;
  border-radius: 18px;
  box-shadow: var(--tq-shadow);
  border: 1px solid rgba(11, 61, 46, 0.08);
  overflow: hidden;
  animation: tq-pop 0.22s ease;
  cursor: grab;
  touch-action: pan-y;
}

.tq-move-hint {
  display: none !important;
}

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

.tq-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 14px 8px;
  background: linear-gradient(180deg, rgba(232, 184, 74, 0.18), transparent);
}

.tq-head strong {
  display: block;
  font-size: 15px;
}

.tq-sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: #4a6b5d;
  line-height: 1.45;
}

.tq-close,
.tq-min {
  border: 0;
  background: rgba(11, 61, 46, 0.08);
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  color: var(--tq-ink);
  touch-action: manipulation;
}

.tq-min.tq-ico {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  box-shadow: none;
}

.tq-close {
  width: 36px;
  padding: 0;
  font-size: 18px;
  font-weight: 400;
}

.tq-head-actions {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: flex-start;
}

.tq-bars {
  padding: 4px 14px 10px;
  display: grid;
  gap: 8px;
}

.tq-bar {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
}

.tq-bar i {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tq-mint), var(--tq-gold));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  max-width: 100%;
  transition: width 0.35s ease;
}

.tq-bar-xp i {
  background: linear-gradient(90deg, var(--tq-sky), var(--tq-gold));
}

.tq-bar span {
  color: #3d5c4f;
}

.tq-bar b {
  font-variant-numeric: tabular-nums;
  color: var(--tq-ink);
  min-width: 42px;
  text-align: left;
}

.tq-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(11, 61, 46, 0.08);
}

.tq-cols section {
  padding: 10px 12px 12px;
  min-height: 110px;
}

.tq-cols section:first-child {
  border-left: 1px solid rgba(11, 61, 46, 0.08);
}

.tq-cols h3 {
  margin: 0 0 6px;
  font-size: 12px;
  color: #0b3d2e;
}

.tq-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  max-height: 132px;
  overflow: auto;
  touch-action: pan-y;
  user-select: text;
  -webkit-user-select: text;
  cursor: default;
}

.tq-list li {
  font-size: 11px;
  line-height: 1.4;
  background: rgba(11, 61, 46, 0.05);
  border-radius: 8px;
  padding: 6px 8px;
}

.tq-done li {
  background: rgba(31, 169, 122, 0.12);
}

.tq-left li {
  background: rgba(255, 107, 74, 0.1);
}

.tq-list li.is-empty {
  background: transparent;
  color: #6a8578;
}

.tq-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 0 12px 12px;
  align-items: center;
}

.tq-cta,
.tq-secondary {
  border: 0;
  border-radius: 12px;
  padding: 11px 12px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

.tq-cta {
  background: linear-gradient(135deg, #ff8a3d, #ff6b4a 40%, #e8b84a);
  color: #2a1608;
  box-shadow: 0 6px 14px rgba(255, 107, 74, 0.28);
}

.tq-cta:hover {
  filter: brightness(1.04);
}

.tq-secondary.tq-ico {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 12px;
  background: rgba(11, 61, 46, 0.08);
  color: var(--tq-ink);
  box-shadow: none;
}

.tutor-quest.is-celebrate .tutor-quest-pill {
  animation: tq-bounce 0.55s ease;
}

.tutor-quest.is-levelup .tutor-quest-pill {
  animation: tq-level 0.7s ease;
  box-shadow: 0 0 0 3px rgba(232, 184, 74, 0.55), var(--tq-shadow);
}

@keyframes tq-bounce {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.08); }
  70% { transform: scale(0.97); }
}

@keyframes tq-level {
  0%, 100% { transform: scale(1) rotate(0); }
  30% { transform: scale(1.12) rotate(-2deg); }
  60% { transform: scale(1.06) rotate(2deg); }
}

.tutor-quest-toast {
  position: fixed;
  bottom: 140px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #0b3d2e;
  color: #fff8e7;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  transition: 0.2s ease;
  z-index: 80;
  pointer-events: none;
}

.tutor-quest-toast.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Mobile: compact floater under header (not over composer) — user can drag anywhere */
body.mobile-chat .tutor-quest:not(.is-placed) {
  top: calc(58px + env(safe-area-inset-top, 0px));
  bottom: auto;
  left: auto;
  right: max(10px, env(safe-area-inset-right, 0px));
  max-width: min(300px, calc(100vw - 20px));
}

body.mobile-chat .tutor-quest.is-placed {
  max-width: min(340px, calc(100vw - 16px));
}

body.mobile-chat .tutor-quest.is-open:not(.is-placed) {
  max-width: min(340px, calc(100vw - 20px));
}

body.mobile-chat .tutor-quest-pill {
  width: auto;
  max-width: 100%;
  justify-content: flex-start;
}

body.mobile-chat .tutor-quest.is-open .tutor-quest-panel {
  max-height: min(58vh, 460px);
  overflow: auto;
}

body.mobile-chat .tq-actions {
  grid-template-columns: 1fr auto;
}

.tq-coach,
.tq-celebrate-banner {
  margin: 0 14px 10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 700;
}

.tq-coach {
  background: rgba(43, 176, 237, 0.12);
  color: #0b4a63;
  border: 1px solid rgba(43, 176, 237, 0.22);
}

.tq-celebrate-banner {
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.28), rgba(31, 169, 122, 0.18));
  color: #0b3d2e;
  border: 1px solid rgba(232, 184, 74, 0.35);
}

.tutor-quest.is-complete .tutor-quest-pill {
  background: linear-gradient(135deg, #1fa97a 0%, #0b3d2e 60%, #165f3f 100%);
}

.tutor-quest.is-complete-pulse .tutor-quest-pill {
  animation: tq-level 0.7s ease;
}

.tutor-quest.is-empty-fresh .tq-ring {
  opacity: 0.85;
}

body.mobile-chat .tq-cols {
  grid-template-columns: 1fr;
}

body.mobile-chat .tq-cols section:first-child {
  border-left: 0;
  border-bottom: 1px solid rgba(11, 61, 46, 0.08);
}

/* Desktop only: just outside the chat stage on its right — not viewport far-edge.
   Panel opens upward. Mobile untouched. */
body.desktop-chat .tutor-quest {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
}

body.desktop-chat .tutor-quest-panel {
  margin-top: 0;
  margin-bottom: 8px;
}

body.desktop-chat .tutor-quest:not(.is-placed) {
  /* Right edge of centered stage (~780) + small gap; clamp so it stays on-screen */
  left: min(
    calc(50% + (min(780px, 100vw - 32px) / 2) + 16px),
    calc(100vw - 16px - 300px)
  );
  right: auto;
  top: auto;
  bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  transform: none;
}

body.desktop-chat .tutor-quest.is-placed,
body.desktop-chat .tutor-quest.is-dragging {
  transform: none;
}

/* Keep clear of open workspace panel on desktop */
body.nabgol-workspace-open .tutor-quest {
  opacity: 0.92;
}