:root {
  --bg-deep:#0b1320;
  --text:#f5f7fa;
  --muted:#b7c0ce;
  --accent:#00ffd1;
  --accent-soft: rgba(0,255,209,0.35);
}

*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  padding:0;
  color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

/* ---------------- SPLASH ---------------- */
.page-splash{
  background: radial-gradient(100% 100% at 50% 0%, #0c1824 0%, #0b1320 60%, #07101a 100%);
}
.splash{max-width:900px;margin:48px auto;padding:16px;display:grid;gap:16px}
.splash h1{margin:0 0 8px 0;font-size:28px}
.card{background: rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:16px;padding:16px}
.card h2{margin:0 0 8px 0}
.card ul{margin:8px 0 0 18px}
.btn{
  display:inline-grid;place-items:center;cursor:pointer;
  border:none;outline:none;border-radius:14px;
  padding:12px 16px;font-weight:600;
  color:#0a0f14;
  background:linear-gradient(180deg,#fefefe,#b9c2ce);
  box-shadow: inset 0 1px 0 #fff, 0 8px 18px rgba(0,0,0,0.25);
}
.enter-btn{justify-self:center;margin-top:8px}

/* ---------------- WOODLAND LANDING ---------------- */
.page-woodland{
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.85) 100%),
    url("./assets/hero/bear-family-landingpage.png") center / cover no-repeat fixed;
}
.woodland-header{padding:32px 16px;text-align:center}
.woodland-header h1{margin:0 0 6px 0;font-size:32px}
.tagline{color:var(--muted);margin:0}

.paw-grid{
  max-width:980px;margin:24px auto 48px auto;
  display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));
  gap:24px;align-items:center;justify-items:center;padding:0 16px;
}

/* Large furry paw buttons */
.paw-large{
  width:200px;height:200px;border-radius:999px;display:grid;place-items:center;
  text-decoration:none;position:relative;
  background: radial-gradient(80% 80% at 40% 35%, #7b5a3d 0%, #5a3f2a 70%, #4b3627 100%);
  box-shadow: inset 0 8px 18px rgba(255,255,255,0.15), 0 16px 32px rgba(0,0,0,0.45);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s;
  border: 2px solid rgba(0,0,0,0.35);
}
.paw-large span{
  font-size:22px;font-weight:800;letter-spacing:0.5px;color:#fff;
  text-shadow:0 2px 5px rgba(0,0,0,0.45);
}
.paw-large:hover{transform: translateY(-2px);filter: brightness(1.08) saturate(1.05)}
.paw-large:active{transform: translateY(0);filter: brightness(0.98)}
.paw-parent{background: radial-gradient(80% 80% at 40% 35%, #8a6646 0%, #6a4b35 70%, #563c2b 100%);}
.paw-student{background: radial-gradient(80% 80% at 40% 35%, #946d4b 0%, #6f4f37 70%, #583e2c 100%);}
.paw-teacher{background: radial-gradient(80% 80% at 40% 35%, #7a5a41 0%, #59402c 70%, #4a3326 100%);}

/* ---------------- STUDENT PAGE (chat app) ---------------- */
.page-student{}

@media (min-width:768px){
  .page-student::before{
    content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
    background:
      radial-gradient(120% 100% at 50% 0%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.75) 60%, rgba(0,0,0,0.85) 100%),
      url("./assets/hero/hero-desktop.jpg") center / cover no-repeat;
  }
}
@media (max-width:767px){
  .page-student::before{
    content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
    background:
      radial-gradient(120% 100% at 50% 0%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.75) 60%, rgba(0,0,0,0.85) 100%),
      url("./assets/hero/hero-mobile.jpg") center / cover no-repeat;
  }
}

/* Keep columns transparent to reveal photo */
.left,.right{background:transparent}
.left::after,.right::after{content:"";position:absolute;inset:0;pointer-events:none}
.left::after{background: linear-gradient(90deg, rgba(10,30,20,0.45), rgba(0,0,0,0.00) 60%)}
.right::after{background: linear-gradient(270deg, rgba(12,22,32,0.45), rgba(0,0,0,0.00) 60%)}

/* Layout & chat styles */
.layout{
  display:grid;
  grid-template-columns:300px minmax(360px,1fr) 320px;
  grid-template-rows:auto 1fr auto;
  grid-template-areas:
    "left header right"
    "left main right"
    "left footer right";
  height:100%;
}
.left{grid-area:left;position:relative;border-right:1px solid rgba(255,255,255,0.06);overflow:hidden}
.right{grid-area:right;position:relative;border-left:1px solid rgba(255,255,255,0.06);overflow:hidden}

header{
  grid-area:header;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  backdrop-filter: blur(6px);border-bottom:1px solid rgba(255,255,255,0.06);
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}
.title{display:flex;align-items:center;gap:12px}
.title h1{font-size:18px;font-weight:700;margin:0;letter-spacing:0.2px}
.subtitle{color:var(--muted);font-size:12px}

/* Hide old top voice UI */
.voice-controls{display:none !important;}

main{grid-area:main;display:flex;flex-direction:column;gap:12px;padding:16px 16px 0 16px;min-height:0}
#chat-container{
  flex:1;min-height:0;display:flex;flex-direction:column;
  background:rgba(3,8,14,0.92);backdrop-filter:blur(2px);
  border:1px solid rgba(255,255,255,0.08);border-radius:18px;padding:12px;gap:12px;
  box-shadow:0 24px 48px rgba(0,0,0,0.35) inset;
}
#chat-log{flex:1;overflow:auto;padding:6px 6px 6px 0;display:flex;flex-direction:column;gap:8px}
.msg{max-width:78%;padding:10px 12px;border-radius:14px;line-height:1.35;font-size:14px;color:var(--text)}
.me{align-self:flex-end;background:rgba(255,255,255,0.08)}
.bot{align-self:flex-start;background:rgba(0,255,209,0.08);border:1px solid rgba(0,255,209,0.12)}
.composer{
  display:flex;gap:10px;align-items:center;padding:8px;border-top:1px dashed rgba(255,255,255,0.08);
  position:relative;z-index:20;
}
#tutor-input{
  flex:1;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);
  color:var(--text);padding:12px 12px;border-radius:12px;outline:none;font-size:14px;
}
.btn{
  display:inline-grid;place-items:center;cursor:pointer;border:none;outline:none;border-radius:14px;
  padding:10px 14px;font-weight:600;color:#0a0f14;
  background:linear-gradient(180deg,#fefefe,#b9c2ce);
  box-shadow:inset 0 1px 0 #fff,0 8px 18px rgba(0,0,0,0.25);
}

/* Paw + mic */
.paw-toggle{
  width:54px;height:54px;border-radius:16px;background:transparent;padding:0;position:relative;
  border:1px solid rgba(255,255,255,0.08);box-shadow:0 10px 24px rgba(0,0,0,0.35) inset;
  z-index:21;pointer-events:auto;
}
.paw-svg{width:42px;height:42px;opacity:0.85;pointer-events:none;}
.glow-ring{position:absolute;inset:-4px;border-radius:18px;pointer-events:none;
  box-shadow:0 0 0 0 var(--accent-soft),0 0 0 1px rgba(255,255,255,0.06);
  transition:box-shadow .25s ease;
}
.paw-toggle.active .glow-ring{
  box-shadow:0 0 12px 2px var(--accent),0 0 28px 8px var(--accent-soft),0 0 0 1px rgba(0,255,209,0.35);
}
.mic{
  width:54px;height:54px;border-radius:999px;
  background:linear-gradient(180deg,#e9eef6 0%,#b9c2ce 100%);
  border:1px solid rgba(255,255,255,0.35);
  box-shadow:0 6px 16px rgba(0,0,0,0.35);
  position:relative;z-index:21;pointer-events:auto;
}
.mic .mic-svg{width:22px;height:22px;pointer-events:none;}
.mic.listening{animation:pulse 1.2s ease-in-out infinite;}
@keyframes pulse{
  0%{filter:drop-shadow(0 0 0 rgba(0,255,209,0))}
  50%{filter:drop-shadow(0 0 10px rgba(0,255,209,0.35))}
  100%{filter:drop-shadow(0 0 0 rgba(0,255,209,0))}
}

footer{
  grid-area:footer;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;border-top:1px solid rgba(255,255,255,0.06);
  background:linear-gradient(0deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  position:relative;z-index:1;
}

/* Scrollbars */
#chat-log::-webkit-scrollbar,#resource-content::-webkit-scrollbar{width:10px}
#chat-log::-webkit-scrollbar-thumb,#resource-content::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.12);border-radius:10px;
}

/* ===== Books (sidebar buttons) ===== */
.book {
  display:inline-block;width:100%;max-width:170px;height:92px;
  cursor:pointer;position:relative;margin-left:8px;
  border-radius:12px 8px 8px 12px;border:2px solid rgba(0,0,0,0.55);
  color:#f7d77a;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  text-shadow:0 1px 0 rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.6);
  box-shadow:0 10px 18px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.06);
}
.book:before{
  content:"";position:absolute;left:-10px;top:6px;bottom:6px;width:12px;
  border-radius:8px 0 0 8px;box-shadow:inset -2px 0 4px rgba(0,0,0,.4);
}
.book:after{
  content:"";position:absolute;right:8px;top:12px;bottom:12px;width:7px;
  background:linear-gradient(180deg,#f1e8e0,#e8ded6);
  border-left:1px solid rgba(0,0,0,.15);
  border-right:1px solid rgba(255,255,255,.4);
  filter:drop-shadow(0 0 2px rgba(0,0,0,.15));
}
.book:hover{transform:translateY(-2px);
  box-shadow:0 16px 22px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.08);
}
.book-maroon { background:linear-gradient(135deg,#4b1b27,#5e2130 35%,#3b1520); }
.book-maroon:before{ background:linear-gradient(180deg,#3a1220,#2a0d17); }
.book-forest { background:linear-gradient(135deg,#1f3c26,#23552f 40%,#16371e); }
.book-forest:before{ background:linear-gradient(180deg,#15311b,#0f2413); }
.book-orange { background:linear-gradient(135deg,#8b3a17,#b94e1a 40%,#6a2a0f); }
.book-orange:before{ background:linear-gradient(180deg,#5a1d08,#411606); }
.book-indigo { background:linear-gradient(135deg,#1b234a,#24306a 40%,#131a39); }
.book-indigo:before{ background:linear-gradient(180deg,#12183a,#0d122c); }
.book-purple { background:linear-gradient(135deg,#3f1b6a,#5b2b8f 40%,#2b114a); }
.book-purple:before{ background:linear-gradient(180deg,#2c124a,#1f0d36); }

/* ===== Upload modal ===== */
.modal{
  position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.55);
}
.modal-card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(92vw,720px);background:#0f172a;color:#fff;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 48px rgba(0,0,0,.45);overflow:hidden;
}
.modal-head{
  display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.modal-head .x{
  margin-left:auto;background:transparent;border:none;
  color:#94a3b8;font-size:18px;cursor:pointer;
}
.modal-body{padding:14px 16px;display:grid;gap:12px;}
.modal .actions{display:flex;gap:8px;}
.modal .actions .soft{
  background:rgba(255,255,255,.06);color:#e2e8f0;
  border:1px solid rgba(255,255,255,.12);border-radius:10px;
  padding:8px 12px;cursor:pointer;
}
.modal .actions .danger{border-color:rgba(239,68,68,.45);color:#fecaca;}
.upload-list{display:grid;gap:8px;max-height:48vh;overflow:auto;}
.upload-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px;border:1px solid rgba(255,255,255,.1);
  border-radius:10px;background:rgba(255,255,255,.04);
}
.upload-row .meta .name{font-weight:700;}
.upload-row .meta .sub{font-size:12px;color:#94a3b8;}
.upload-row .delete{
  background:transparent;border:1px solid rgba(255,255,255,.2);
  color:#e2e8f0;border-radius:8px;padding:4px 8px;cursor:pointer;

}
.empty-note{
  padding: 12px;
  color: #cbd5e1;
  background: rgba(255,255,255,.04);
  border: 1px dashed rgba(255,255,255,.15);
  border-radius: 12px;
}


/* ==== Readability upgrades (chat + outlines) ==== */

/* Chat container spacing */
#chat-log {
  font-size: 18px;            /* larger default text */
  line-height: 1.65;          /* relaxed line height */
  letter-spacing: 0.1px;
  padding: 16px;
}

/* Messages */
#chat-log .msg {
  padding: 14px 16px;
  border-radius: 14px;
  margin: 14px 0;
  max-width: 880px;
}

#chat-log .msg.bot {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
}

#chat-log .msg.me {
  background: rgba(0,255,209,0.12);
  border: 1px solid rgba(0,255,209,0.28);
  margin-left: auto;
}

/* Stronger paragraph spacing inside bot messages */
#chat-log .msg.bot p + p { margin-top: 10px; }

/* Make inline code / pre readable if present */
#chat-log .msg pre,
#chat-log .msg code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px;
  line-height: 1.55;
}

/* Hierarchical lists in messages (and in any outline panel) */
#chat-log .msg ul,
#chat-log .msg ol,
.outline-view ul,
.outline-view ol {
  margin: 10px 0 12px 1.2rem;  /* indent + vertical space */
  padding-left: 1.2rem;
}

#chat-log .msg li,
.outline-view li {
  margin: 6px 0;               /* space between list items */
}

#chat-log .msg ul ul,
#chat-log .msg ol ol,
.outline-view ul ul,
.outline-view ol ol {
  margin-top: 6px;
  margin-bottom: 6px;
}

/* Clear bullets/dashes style – crisp and large */
#chat-log .msg ul,
.outline-view ul {
  list-style: disc;
}
#chat-log .msg ul ul,
.outline-view ul ul {
  list-style: circle;
}
#chat-log .msg ul ul ul,
.outline-view ul ul ul {
  list-style: square;
}

/* Headings inside messages/outlines */
#chat-log .msg h1,
#chat-log .msg h2,
#chat-log .msg h3,
.outline-view h1,
.outline-view h2,
.outline-view h3 {
  margin: 14px 0 8px 0;
  line-height: 1.3;
}
#chat-log .msg h1, .outline-view h1 { font-size: 24px; }
#chat-log .msg h2, .outline-view h2 { font-size: 21px; }
#chat-log .msg h3, .outline-view h3 { font-size: 19px; }

/* Mobile friendliness */
@media (max-width: 640px) {
  #chat-log { font-size: 17px; }
  #chat-log .msg { padding: 12px 14px; }
}

/* Print-friendly outline (if you render an outline section or printable view) */
@media print {
  body { background: #fff !important; color: #111 !important; }
  #chat-log, .outline-view {
    font-size: 12pt;
    line-height: 1.6;
  }
  #chat-log .msg.bot, .outline-view {
    background: #fff !important; border: none !important;
  }
}

/* ===== Readability Boost (Subtle ~1.15×) ===== */

/* Chat bubbles */
#chat-log .msg {
  font-size: 1.15rem;      /* ≈18px */
  line-height: 1.45;
  letter-spacing: 0.1px;
  padding: 12px 14px;
  border-radius: 12px;
  margin: 8px 0;
}

#chat-log .msg.bot {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
}

#chat-log .msg.user {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.1);
}

/* Lists inside chat + outline */
#chat-log .msg ul,
.outline-view ul,
.game-card ul {
  margin: 8px 0 8px 1.1em;
  padding: 0;
}

#chat-log .msg li,
.outline-view li,
.game-card li {
  margin: 3px 0;
  padding-left: 2px;
  line-height: 1.4;
}

#chat-log .msg ul > li::marker,
.outline-view ul > li::marker,
.game-card ul > li::marker {
  content: "✨ ";
}

/* Headings */
.outline-view h1,
.game-card h3 {
  font-size: 1.45rem;
  line-height: 1.35;
  margin: 0 0 6px 0;
}

.outline-view h2 {
  font-size: 1.3rem;
  line-height: 1.35;
  margin: 10px 0 4px 0;
}

.outline-view h3 {
  font-size: 1.2rem;
  line-height: 1.35;
  margin: 8px 0 4px 0;
}

/* Outline + game card body text */
.outline-view,
.game-card {
  font-size: 1.15rem;
  line-height: 1.45;
}

/* Inputs + buttons */
.game-card input,
#tutor-input,
#typingInput {
  font-size: 1rem;
  line-height: 1.35;
  padding: 8px 10px;
  border-radius: 8px;
}

.btn,
.game-card .btn,
#send-btn,
#typingCheck,
#typingSkip {
  font-size: 1rem;
  padding: 7px 10px;
  border-radius: 8px;
}

/* Status line */
#status {
  font-size: 0.95rem;
  opacity: 0.85;
}

/* Code/inline blocks */
#chat-log .msg code,
.outline-view code {
  font-size: 1rem;
  padding: 2px 4px;
  border-radius: 5px;
  background: rgba(255,255,255,0.08);
}


/* --- Papa typing indicator --- */
#chat-log .msg.typing {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  opacity: 0.9;
}
#chat-log .msg.typing .typing-label { opacity: 0.9; }
#chat-log .msg.typing .dots {
  display: inline-flex;
  gap: 4px;
  transform: translateY(2px);
}
#chat-log .msg.typing .dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: 0.35;
  animation: papaDot 1.2s infinite ease-in-out;
}
#chat-log .msg.typing .dots i:nth-child(2) { animation-delay: 0.15s; }
#chat-log .msg.typing .dots i:nth-child(3) { animation-delay: 0.30s; }

@keyframes papaDot {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
/* ---- Papa Tour Floating Button ---- */
.tour-fab{
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 4000;               /* above chat */
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
  color: var(--text, #f5f7fa);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  transition: transform .12s ease, background .2s ease, box-shadow .2s ease;
}
.tour-fab:hover{
  transform: translateY(-1px);
  background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,0.16), rgba(255,255,255,0.08));
  box-shadow: 0 10px 24px rgba(0,0,0,0.45);
}
.tour-fab:active{
  transform: translateY(0);
}
/* ===== Papa Bear Guided Tour ===== */
.papa-tour-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
  z-index: 3990; /* just under the bubble + fab */
  pointer-events: none; /* allow clicks to go through unless we add a blocker */
}

.papa-tour-highlight {
  position: absolute;
  border: 2px solid var(--accent, #00ffd1);
  border-radius: 14px;
  box-shadow: 0 0 0 8px rgba(0,255,209,0.15), 0 8px 24px rgba(0,0,0,0.6);
  background: rgba(0,255,209,0.06);
  z-index: 4010;
  pointer-events: none;
}

.papa-tour-bubble {
  position: absolute;
  max-width: 360px;
  background: rgba(20,24,32,0.98);
  color: var(--text,#f5f7fa);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 14px 16px;
  z-index: 4020;
  box-shadow: 0 10px 28px rgba(0,0,0,0.55);
}

.papa-tour-bubble h4 {
  margin: 0 0 6px 0;
  font-size: 1rem;
  letter-spacing: 0.2px;
}
.papa-tour-bubble p {
  margin: 0 0 10px 0;
  line-height: 1.4;
  font-size: 0.95rem;
}

.papa-tour-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.papa-tour-actions .btn {
  font-size: 0.9rem;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
}
.papa-tour-actions .btn.primary {
  background: var(--accent-soft, rgba(0,255,209,0.35));
  border-color: rgba(0,255,209,0.5);
}

/* arrow */
.papa-tour-bubble::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  background: inherit;
  border-left: inherit; border-top: inherit;
  transform: rotate(45deg);
  z-index: -1;
}

/* placement helpers */
.papa-pos-top    .papa-tour-bubble { transform: translate(-50%, calc(-100% - 16px)); }
.papa-pos-right  .papa-tour-bubble { transform: translate(16px, -50%); }
.papa-pos-bottom .papa-tour-bubble { transform: translate(-50%, 16px); }
.papa-pos-left   .papa-tour-bubble { transform: translate(calc(-100% - 16px), -50%); }

.papa-pos-top    .papa-tour-bubble::after { bottom: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); }
.papa-pos-right  .papa-tour-bubble::after { left: -6px; top: 50%; transform: translateY(-50%) rotate(45deg); }
.papa-pos-bottom .papa-tour-bubble::after { top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); }
.papa-pos-left   .papa-tour-bubble::after { right: -6px; top: 50%; transform: translateY(-50%) rotate(45deg); }

/* ----- Papa Tour: always-visible, bottom-left ----- */
#papaTourWrap {
  position: fixed;
  left: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 99999; /* sit on top of everything */
  pointer-events: none; /* container doesn’t eat clicks */
}

#papaTourBtn {
  pointer-events: auto; /* button should be clickable */
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  border: 2px solid rgba(255,255,255,0.35);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.16), rgba(255,255,255,0.06));
  color: var(--text, #f5f7fa);
  font-size: 28px;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.08);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 200ms ease;
}

#papaTourBtn:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 10px 32px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.12);
}

#papaTourBtn:active {
  transform: translateY(0) scale(0.98);
}

@media (prefers-reduced-motion: no-preference) {
  #papaTourBtn {
    animation: papaPulse 2.2s ease-in-out infinite;
  }
  @keyframes papaPulse {
    0%   { box-shadow: 0 8px 28px rgba(0,0,0,0.35), 0 0 0 0 rgba(0,255,209,0.35); }
    70%  { box-shadow: 0 8px 28px rgba(0,0,0,0.35), 0 0 0 12px rgba(0,255,209,0); }
    100% { box-shadow: 0 8px 28px rgba(0,0,0,0.35), 0 0 0 0 rgba(0,255,209,0); }
  }
}

.papa-tour-chip {
  pointer-events: auto;
  padding: 8px 12px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #f5f7fa);
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  white-space: nowrap;
}

/* Make sure it’s not off-screen on small phones */
@media (max-width: 480px) {
  #papaTourWrap {
    left: 10px;
    bottom: 10px;
    gap: 8px;
  }
  #papaTourBtn {
    width: 56px;
    height: 56px;
    font-size: 24px;
  }
  .papa-tour-chip {
    font-size: 13px;
    padding: 6px 10px;
  }
}
/* Papa Tutorial — force above chat/footer on all pages */
#papaTourWrap {
  position: fixed;
  left: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;

  /* Make sure it sits on top of everything */
  z-index: 2147483647; /* max-ish */
  /* Prevent overlay containers from eating clicks; only children get events */
  pointer-events: none;
}

#papaTourBtn.papa-pill {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 26px;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  cursor: pointer;
  transition: transform .12s ease;
  /* Let the button take clicks even though wrapper is pointer-events:none */
  pointer-events: auto;
}

#papaTourBtn.papa-pill:hover { transform: translateY(-1px) scale(1.03); }
#papaTourBtn.papa-pill:active { transform: translateY(0) scale(0.98); }

#papaTourLabel.papa-label {
  font-size: 14px;
  line-height: 1;
  color: #fff;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 8px 10px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  user-select: none;
  /* Also clickable */
  pointer-events: auto;
}