/* DaisyUI + Tailwind (via CDN) handle the overall look.
   This file only covers the bits they don't: the code editor, the live-preview
   iframe, chat formatting, and the demo canvas. */

/* ---------- PaiCode brand ---------- */
.paicode-pai {
  background: linear-gradient(90deg, #6366f1 0%, #a855f7 55%, #ec4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.paicode-code { color: #1f1235; }
.paicode-grad {
  background: linear-gradient(90deg, #6366f1 0%, #a855f7 55%, #ec4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.editor-wrap { border-radius: 0.5rem; overflow: hidden; }
.CodeMirror {
  height: 380px;
  border-radius: 0.5rem;
  font-family: "Fira Code", Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.5;
}
.CodeMirror-hints {
  z-index: 100;
  font-family: "Fira Code", Consolas, monospace;
  font-size: 0.85rem;
}
/* plain-textarea fallback if CodeMirror fails to load */
#code-editor { width: 100%; height: 380px; }

.preview-wrap iframe {
  width: 100%;
  height: 520px;
  border: 0;
  border-radius: 0.5rem;
  background: #000;
}

/* keep newlines and code snippets readable in coach replies */
.chat-bubble { white-space: pre-wrap; word-break: break-word; }
.chat-bubble.md { white-space: normal; }
.chat-bubble.md .md-pre {
  white-space: pre-wrap; background: rgba(0,0,0,0.10); border-radius: 0.4rem;
  padding: 0.5rem 0.6rem; margin: 0.35rem 0; overflow-x: auto;
  font-family: "Fira Code", Consolas, monospace; font-size: 0.78rem; line-height: 1.4;
}
.chat-bubble.md .md-code {
  background: rgba(0,0,0,0.12); border-radius: 0.25rem; padding: 0 0.25rem;
  font-family: "Fira Code", Consolas, monospace; font-size: 0.85em;
}
.chat-bubble.md .code-block--chat {
  margin: 0.4rem 0 0.2rem;
  padding: 1.5rem 0.7rem 0.55rem;
  font-size: 0.72rem;
  line-height: 1.5;
  border-radius: 0.5rem;
}
.chat-bubble.md .code-block--chat .copy-btn {
  font-size: 0.62rem; padding: 0.1rem 0.4rem;
}
.chat-bubble.md .code-block--chat .code-pre {
  white-space: pre-wrap;
}

#game { max-width: 100%; height: auto; }

@media (max-width: 1100px) {
  .CodeMirror, #code-editor { height: 320px; }
}

/* ---------- Error / output console ---------- */
.run-console { background: #0c0f22; color: #d7e0ff; border-radius: 0.5rem; padding: 12px 14px;
  font-family: "Fira Code", Consolas, monospace; font-size: 0.8rem; line-height: 1.45;
  max-height: 260px; overflow: auto; }
.run-console .rc-good { color: #4ade80; font-weight: 700; }
.run-console .rc-bad { color: #ff7b87; font-weight: 700; }
.run-console .rc-warn { color: #ffd166; font-weight: 700; margin-top: 6px; }
.run-console .rc-line { color: #ffd9a8; }
.run-console .rc-pre { white-space: pre-wrap; margin: 4px 0 0; }
.run-console .rc-dim { opacity: 0.75; }
.run-console .rc-actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Lint markers in the editor ---------- */
.gdc-lint-underline { text-decoration: underline wavy #ff7b87; text-decoration-skip-ink: none; }
.gdc-lint-gutter { width: 16px; }
.gdc-lint-dot { color: #ff7b87; font-weight: 800; cursor: help; }

/* ---------- Coach diff view ---------- */
#diff-body { font-family: "Fira Code", Consolas, monospace; line-height: 1.4; }
#diff-body .diff-add { background: rgba(74,222,128,0.18); color: #166534; white-space: pre-wrap; }
#diff-body .diff-del { background: rgba(255,123,135,0.18); color: #9f1239; white-space: pre-wrap; text-decoration: line-through; }
#diff-body .diff-ctx { opacity: 0.7; white-space: pre-wrap; }

/* ---------- Current-stage hero ---------- */
.hero-stage {
  background: linear-gradient(120deg, #9a3412 0%, #c2410c 50%, #ea580c 100%);
  color: #fff;
}
.hero-stage .progress { background-color: rgba(255,255,255,0.28); }

/* ---------- Certificate ---------- */
.cert-card {
  border: 4px double #d97706;
  background:
    radial-gradient(circle at 1rem 1rem, rgba(217,119,6,0.10) 0, rgba(217,119,6,0) 60%),
    #fffdf5;
  color: #3b2a14;
}
@media print {
  body * { visibility: hidden !important; }
  #cert-modal, #cert-modal * { visibility: visible !important; }
  #cert-modal { position: absolute; inset: 0; display: block; }
  #cert-modal .modal-action, #cert-print { display: none !important; }
}
/* ---------- Step deck (slide carousel inside a milestone) ---------- */
.step-deck { padding: 1rem 1rem 0.85rem; display: flex; flex-direction: column; min-height: 320px; }
.step-content { font-size: 0.95rem; line-height: 1.6; flex: 1; min-height: 200px; }
.step-content .step-lead { margin-bottom: 0.6rem; font-weight: 500; }
.step-content .step-text { color: #1f2937; }
.step-content .step-tip {
  background: #fef3c7; border-left: 3px solid #f59e0b; border-radius: 0.4rem;
  padding: 0.5rem 0.7rem; color: #78350f; font-weight: 600;
}
.step-content .step-note {
  background: #eef2ff; border-left: 3px solid #6366f1; border-radius: 0.4rem;
  padding: 0.5rem 0.7rem; color: #312e81;
}
.step-content .step-text code { background: #e5e7eb; border-radius: 3px; padding: 1px 5px; font-size: 0.85em; font-family: "Fira Code", Consolas, monospace; }
.step-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.75rem; }
.step-dots { display: flex; gap: 0.3rem; align-items: center; flex: 1; justify-content: center; flex-wrap: wrap; }
.step-dot {
  width: 9px; height: 9px; border-radius: 999px; background: #d1d5db;
  cursor: pointer; transition: transform 0.12s, background 0.12s;
  border: none; padding: 0;
}
.step-dot:hover { transform: scale(1.25); background: #9ca3af; }
.step-dot.active { background: #ea580c; transform: scale(1.35); }
.step-dot.done { background: #16a34a; }

/* ---------- Code block (with Copy button) ---------- */
.code-block {
  position: relative; background: #0f172a; color: #e2e8f0; border-radius: 0.5rem;
  padding: 2rem 0.85rem 0.75rem; font-family: "Fira Code", Consolas, monospace;
  font-size: 0.78rem; line-height: 1.55; overflow-x: auto;
}
.code-block .code-caption {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.65rem; opacity: 0.65; margin-bottom: 0.35rem;
  text-transform: lowercase; letter-spacing: 0.05em; font-family: inherit;
}
.code-block .code-pre { margin: 0; white-space: pre; tab-size: 4; }
.code-block .copy-btn {
  position: absolute; top: 0.4rem; right: 0.4rem;
  background: rgba(255,255,255,0.08); color: #e2e8f0; border: none;
  border-radius: 0.35rem; padding: 0.2rem 0.5rem; font-size: 0.7rem;
  display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer;
  font-family: ui-sans-serif, system-ui, sans-serif; font-weight: 600;
}
.code-block .copy-btn:hover { background: rgba(255,255,255,0.18); }
.code-block .copy-btn.copied { background: #16a34a; color: white; }

/* Tiny Python syntax-highlight palette */
.code-block .t-kw  { color: #f472b6; font-weight: 700; }     /* keywords */
.code-block .t-bn  { color: #60a5fa; }                       /* builtins */
.code-block .t-str { color: #fde68a; }                       /* strings */
.code-block .t-com { color: #94a3b8; font-style: italic; }   /* comments */
.code-block .t-num { color: #fbbf24; }                       /* numbers */
.code-block .t-dec { color: #c084fc; }                       /* decorators */

/* ---------- Coach rail (always-visible right-side panel that expands) ---------- */
.coach-rail {
  position: fixed; top: 64px; right: 0; bottom: 0;
  width: min(420px, 95vw); z-index: 40;
  display: flex; align-items: stretch;
  /* Default: collapsed to a thin handle sticking out on the right. */
  transform: translateX(calc(100% - 56px));
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.coach-rail > * { pointer-events: auto; }
.coach-rail.open { transform: translateX(0); }

.coach-handle {
  flex: 0 0 56px; width: 56px;
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
  color: #fff; border: 0; border-radius: 0.75rem 0 0 0.75rem;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 0.5rem; padding: 1rem 0; cursor: pointer; box-shadow: -4px 0 12px rgba(0,0,0,0.12);
  position: relative;
  transition: transform 200ms ease;
}
.coach-handle:hover { transform: scale(1.04); }
.coach-rail.open .coach-handle { box-shadow: none; }
.coach-handle-label {
  writing-mode: vertical-rl; transform: rotate(180deg);
  letter-spacing: 0.16em; font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase;
}
.coach-unread {
  position: absolute; top: 8px; right: 8px;
  width: 12px; height: 12px; border-radius: 999px;
  background: #facc15; border: 2px solid #fff;
  box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.6);
  animation: coach-pulse 1.4s ease-out infinite;
}
@keyframes coach-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(250, 204, 21, 0); }
  100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); }
}

.coach-panel {
  flex: 1 1 auto;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  display: flex;
  height: 100%;
}
.coach-panel .card-body { height: 100%; }
.coach-panel #chat { max-height: none; flex: 1 1 auto; }

/* Reserve horizontal room so the always-visible rail doesn't overlap content.
   `!important` because Tailwind's CDN JIT injects `.px-4` rules after this
   stylesheet — without it the right-side rule loses the cascade. */
.page-wrap { padding-right: 84px !important; }
@media (min-width: 640px) { .page-wrap { padding-right: 96px !important; } }

/* ---------- Celebration burst (modal headline) ---------- */
.celebrate-burst {
  animation: celebrate-pop 600ms ease-out both;
}
@keyframes celebrate-pop {
  0% { transform: scale(0.4) rotate(-20deg); opacity: 0; }
  60% { transform: scale(1.25) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}