/* Brainy Lab: creation tiles, sidebar extras, locked mic, skin picker, and the Looks (skins).
   Lives in its own file because the page's security rules only allow stylesheets from our own site.
   Default look = "Sunny Studio". Other looks switch on with a class on <body>: skin-tech, skin-galaxy, skin-jungle. */

.bl-ico { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.17em; flex-shrink: 0; }
#btnMic[hidden], #btnMicLocked[hidden] { display: none !important; }

/* ---------- Creation tiles ---------- */
.bl-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; flex-shrink: 0; }
@media (min-width: 640px) { .bl-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1200px) { .bl-tiles { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

.bl-tile {
  --n: #ec4899;
  position: relative; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  min-height: 218px; padding: 20px 12px 14px;
  border-radius: 30px; border: 2px solid var(--tb);
  background: linear-gradient(170deg, var(--t1), var(--t2));
  box-shadow: 0 14px 26px -14px var(--tsh), inset 0 1px 0 rgba(255,255,255,.9);
}
.bl-tile::after { /* sparkle corner */
  content: '\2726'; position: absolute; top: 10px; right: 14px; font-size: 1rem; color: var(--tb2); opacity: .55;
}
.bl-tile-glow {
  position: absolute; top: -34px; left: 50%; width: 170px; height: 170px; margin-left: -85px; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,0) 66%);
}
.bl-tile-icon {
  position: relative; z-index: 1; width: 84px; height: 84px; border-radius: 26px; background: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 2.9rem; line-height: 1;
  box-shadow: 0 10px 20px -8px var(--tsh), 0 0 0 5px rgba(255,255,255,.55);
}
.bl-tile:hover .bl-tile-icon { transform: scale(1.06); }
.bl-tile-pic { width: 86%; height: 86%; object-fit: contain; margin: auto; }
.bl-tile-title { position: relative; z-index: 1; font-weight: 900; font-size: 1.12rem; line-height: 1.1; color: var(--tt); margin-top: 6px; }
.bl-tile-sub { position: relative; z-index: 1; font-weight: 800; font-size: .76rem; color: var(--ts2); }
.bl-chips { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 2px; }
.bl-chips i { font-style: normal; font-weight: 800; font-size: .64rem; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.75); color: var(--ts2); }
.bl-tile-go {
  position: relative; z-index: 1; margin-top: auto; font-weight: 900; font-size: .78rem; color: #fff;
  padding: 6px 16px; border-radius: 999px; background: var(--tb2); box-shadow: 0 6px 12px -6px var(--tsh);
}

.t-pink   { --t1:#fff1f8; --t2:#ffcfe5; --tb:#fbb3d4; --tt:#831843; --ts2:#be185d; --tb2:#ec4899; --tsh:rgba(236,72,153,.55); --n:#ff4fa3; }
.t-blue   { --t1:#f0f7ff; --t2:#c7e0ff; --tb:#a9cdfb; --tt:#1e3a8a; --ts2:#2563eb; --tb2:#3b82f6; --tsh:rgba(59,130,246,.5);  --n:#38bdf8; }
.t-teal   { --t1:#effdfa; --t2:#bdf1e6; --tb:#8fe3d3; --tt:#134e4a; --ts2:#0f766e; --tb2:#14b8a6; --tsh:rgba(20,184,166,.5);  --n:#2dd4bf; }
.t-green  { --t1:#f2fdf5; --t2:#c6f4d3; --tb:#9be8b4; --tt:#14532d; --ts2:#15803d; --tb2:#22c55e; --tsh:rgba(34,197,94,.5);   --n:#4ade80; }
.t-amber  { --t1:#fffbeb; --t2:#fde4a6; --tb:#fbd073; --tt:#78350f; --ts2:#b45309; --tb2:#f59e0b; --tsh:rgba(245,158,11,.5);  --n:#fbbf24; }
.t-purple { --t1:#faf5ff; --t2:#e5cffc; --tb:#d2b0f7; --tt:#581c87; --ts2:#7e22ce; --tb2:#a855f7; --tsh:rgba(168,85,247,.5);  --n:#a78bfa; }


/* ---------- Sidebar extras ---------- */

.bl-side-fill { margin-top: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bl-idea {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 12px 12px 14px; border-radius: 22px; border: 2px dashed #fbbf24;
  background: linear-gradient(180deg, #fffbeb, #fef3c7);
}
.bl-idea-label { font-size: .72rem; font-weight: 900; color: #b45309; text-transform: uppercase; letter-spacing: .06em; }
.bl-idea-text { font-size: .95rem; font-weight: 800; color: #1e293b; line-height: 1.25; }
.bl-idea-btn {
  border: 0; cursor: pointer; font-weight: 900; font-size: .8rem; color: #fff; padding: 6px 16px; border-radius: 999px;
  background: linear-gradient(135deg, #f59e0b, #f97316); box-shadow: 0 8px 14px -8px rgba(249,115,22,.8);
}

/* ---------- Locked microphone ---------- */
.bl-mic-locked {
  position: relative; flex-shrink: 0; width: 48px; height: 48px; border-radius: 999px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; border: 2px solid #fcd34d;
  background: linear-gradient(135deg, #fde68a, #fbbf24); opacity: .85;
}
.bl-mic-locked:hover { opacity: 1; transform: scale(1.06); }
.bl-mic-svg { width: 24px; height: 24px; fill: #fff; filter: drop-shadow(0 1px 1px rgba(120,53,15,.5)); }
.bl-mic-lock {
  position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 999px; background: #fff;
  display: flex; align-items: center; justify-content: center; font-size: .65rem; box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* ---------- Skin picker ---------- */
.bl-modal {
  position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 16px;
  background: rgba(2,6,23,.72); backdrop-filter: blur(6px);
}
.bl-modal.bl-open { display: flex; }
.bl-modal-card { width: min(560px, 100%); max-height: 92vh; overflow-y: auto; background: #fff; color: #0f172a; border-radius: 28px; padding: 22px; box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.bl-modal-head { display: flex; align-items: center; justify-content: space-between; }
.bl-modal-head h3 { margin: 0; font-size: 1.5rem; font-weight: 900; }
.bl-modal-sub { margin: 4px 0 16px; color: #64748b; font-weight: 600; font-size: .9rem; }
.bl-x { border: 0; background: #f1f5f9; color: #334155; width: 36px; height: 36px; border-radius: 999px; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.bl-skins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bl-skin-card {
  position: relative; text-align: left; cursor: pointer; border-radius: 20px; padding: 10px 10px 12px;
  border: 3px solid transparent; background: #f8fafc; display: flex; flex-direction: column; gap: 3px;
  box-shadow: 0 6px 16px -10px rgba(0,0,0,.35); transition: transform .15s;
}
.bl-skin-card:hover { transform: translateY(-3px); }
.bl-skin-card b { font-size: 1rem; color: #0f172a; }
.bl-skin-card small { font-size: .74rem; color: #64748b; font-weight: 700; }
.bl-skin-swatch { height: 64px; border-radius: 14px; margin-bottom: 6px; }
.sk-sunny .bl-skin-swatch  { background: linear-gradient(135deg, #fff1f8, #ffcfe5 40%, #c7e0ff 70%, #fde4a6); }
.sk-tech .bl-skin-swatch   { background: linear-gradient(135deg, #05080f 30%, #00e5c7 31%, #00e5c7 34%, #0b1626 35%, #0b1626 70%, #38bdf8 71%); }
.sk-galaxy .bl-skin-swatch { background: radial-gradient(circle at 25% 30%, #f0abfc 0, transparent 22%), radial-gradient(circle at 75% 60%, #818cf8 0, transparent 28%), #12082f; }
.sk-jungle .bl-skin-swatch { background: linear-gradient(135deg, #0b2a1c, #166534 55%, #facc15); }
.bl-skin-card.bl-picked { border-color: #0ea5e9; background: #ecfeff; }
.bl-skin-card.bl-picked::after { content: '\2713  On'; position: absolute; top: 14px; right: 14px; font-size: .7rem; font-weight: 900; color: #fff; background: #0ea5e9; padding: 2px 8px; border-radius: 999px; }

/* =========================================================
   DARK LOOKS (shared rules; each look just sets the colors)
   ========================================================= */
body.skin-tech, body.skin-galaxy, body.skin-jungle {
  background: var(--sk-bg) !important; color: var(--sk-text);
}
body.skin-tech {
  /* Deep blue-teal base with a glowing grid, so it reads as a tech screen and not a black box */
  --sk-bg: #0b2a45; --sk-card: rgba(8,28,48,.9); --sk-line: rgba(0,229,199,.36); --sk-glow: rgba(0,229,199,.18);
  --sk-acc: #00e5c7; --sk-acc2: #38bdf8; --sk-text: #e6f1ff; --sk-muted: #9fbad2; --sk-inner: #0f3352; --sk-on-acc: #031512;
  --sk-work: radial-gradient(circle at 15% 0%, rgba(0,229,199,.3), transparent 50%), radial-gradient(circle at 90% 100%, rgba(56,189,248,.28), transparent 55%),
    linear-gradient(rgba(0,229,199,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(0,229,199,.12) 1px, transparent 1px);
  --sk-work-size: auto, auto, 38px 38px, 38px 38px;
}
body.skin-galaxy {
  --sk-bg: #0a0520; --sk-card: rgba(22,11,52,.9); --sk-line: rgba(167,139,250,.38); --sk-glow: rgba(192,132,252,.18);
  --sk-acc: #c4a1ff; --sk-acc2: #f0abfc; --sk-text: #f1e9ff; --sk-muted: #b7a6dc; --sk-inner: #1a0e3d; --sk-on-acc: #1b0a40;
  /* Two nebula glows, one ringed-looking planet, then ten star layers at different sizes so the field doesn't look like a grid */
  --sk-work: radial-gradient(circle at 15% 20%, rgba(168,85,247,.4), transparent 42%),
    radial-gradient(circle at 85% 75%, rgba(56,189,248,.25), transparent 45%),
    radial-gradient(circle at 35% 35%, #fbcfe8 0, #be185d 36%, #3b0764 62%, transparent 63%),
    radial-gradient(1.5px 1.5px at 40px 60px, #fff, transparent),
    radial-gradient(1px 1px at 180px 150px, #fff, transparent),
    radial-gradient(2px 2px at 120px 290px, #fde68a, transparent),
    radial-gradient(1px 1px at 60px 200px, #e9d5ff, transparent),
    radial-gradient(1.5px 1.5px at 300px 90px, #fff, transparent),
    radial-gradient(1px 1px at 220px 240px, #fff, transparent),
    radial-gradient(2px 2px at 90px 20px, #f0abfc, transparent),
    radial-gradient(1px 1px at 200px 60px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 350px 300px, #fff, transparent),
    radial-gradient(1px 1px at 20px 280px, #fff, transparent);
  --sk-work-size: auto, auto, 170px 170px, 230px 230px, 310px 310px, 370px 370px, 260px 260px, 420px 420px, 290px 290px, 340px 340px, 250px 250px, 460px 460px, 320px 320px;
  --sk-work-pos: 0 0, 0 0, 80% 78%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  --sk-work-repeat: repeat, repeat, no-repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat;
}
body.skin-jungle {
  --sk-bg: #06140d; --sk-card: rgba(10,34,22,.9); --sk-line: rgba(250,204,21,.38); --sk-glow: rgba(74,222,128,.16);
  --sk-acc: #facc15; --sk-acc2: #4ade80; --sk-text: #f0fdf4; --sk-muted: #a3c9b0; --sk-inner: #0f2e1d; --sk-on-acc: #2a2200;
  /* A painted jungle scene (public/assets/jungle-bg.svg), with a light green veil so the text stays easy to read */
  --sk-work: linear-gradient(rgba(4,20,13,.28), rgba(4,20,13,.28)), url('/assets/jungle-bg.svg');
  --sk-work-size: cover, cover;
  --sk-work-repeat: no-repeat, no-repeat;
}

.skin-tech .lab-workspace-bg, .skin-galaxy .lab-workspace-bg, .skin-jungle .lab-workspace-bg {
  background-color: var(--sk-bg) !important; background-image: var(--sk-work) !important; background-size: var(--sk-work-size) !important;
  background-position: var(--sk-work-pos, 0 0) !important; background-repeat: var(--sk-work-repeat, repeat) !important;
}
.skin-tech .glass-card, .skin-galaxy .glass-card, .skin-jungle .glass-card {
  background: var(--sk-card) !important; border: 1px solid var(--sk-line) !important; color: var(--sk-text);
  box-shadow: 0 0 28px var(--sk-glow), 0 18px 40px -18px rgba(0,0,0,.7) !important;
}
/* text colours that were written for a light page */
.skin-tech .text-slate-950, .skin-tech .text-slate-900, .skin-tech .text-slate-800, .skin-tech .text-slate-700,
.skin-galaxy .text-slate-950, .skin-galaxy .text-slate-900, .skin-galaxy .text-slate-800, .skin-galaxy .text-slate-700,
.skin-jungle .text-slate-950, .skin-jungle .text-slate-900, .skin-jungle .text-slate-800, .skin-jungle .text-slate-700 { color: var(--sk-text) !important; }
.skin-tech .text-slate-600, .skin-tech .text-slate-500, .skin-tech .text-slate-400,
.skin-galaxy .text-slate-600, .skin-galaxy .text-slate-500, .skin-galaxy .text-slate-400,
.skin-jungle .text-slate-600, .skin-jungle .text-slate-500, .skin-jungle .text-slate-400 { color: var(--sk-muted) !important; }
.skin-tech .placeholder\:text-slate-400::placeholder, .skin-galaxy .placeholder\:text-slate-400::placeholder, .skin-jungle .placeholder\:text-slate-400::placeholder { color: var(--sk-muted) !important; }
/* white and pale surfaces */
.skin-tech .bg-white, .skin-tech .bg-slate-50, .skin-tech .bg-slate-100, .skin-tech .bg-white\/95, .skin-tech .bg-white\/90, .skin-tech .bg-white\/80,
.skin-galaxy .bg-white, .skin-galaxy .bg-slate-50, .skin-galaxy .bg-slate-100, .skin-galaxy .bg-white\/95, .skin-galaxy .bg-white\/90, .skin-galaxy .bg-white\/80,
.skin-jungle .bg-white, .skin-jungle .bg-slate-50, .skin-jungle .bg-slate-100, .skin-jungle .bg-white\/95, .skin-jungle .bg-white\/90, .skin-jungle .bg-white\/80 {
  background-color: var(--sk-inner) !important; color: var(--sk-text);
}
.skin-tech .border-slate-200, .skin-tech .border-slate-200\/80, .skin-tech .border-slate-200\/60,
.skin-galaxy .border-slate-200, .skin-galaxy .border-slate-200\/80, .skin-galaxy .border-slate-200\/60,
.skin-jungle .border-slate-200, .skin-jungle .border-slate-200\/80, .skin-jungle .border-slate-200\/60 { border-color: var(--sk-line) !important; }
.skin-tech aside .bg-gradient-to-br, .skin-galaxy aside .bg-gradient-to-br, .skin-jungle aside .bg-gradient-to-br {
  background: linear-gradient(135deg, var(--sk-inner), var(--sk-card)) !important; border-color: var(--sk-acc) !important;
}
/* prompt bar */
.skin-tech form.border-sky-300, .skin-galaxy form.border-sky-300, .skin-jungle form.border-sky-300 { border-color: var(--sk-acc) !important; box-shadow: 0 0 20px var(--sk-glow) !important; }
.skin-tech #promptInput, .skin-galaxy #promptInput, .skin-jungle #promptInput { color: var(--sk-text) !important; }
/* sidebar links */
.skin-tech aside nav a:not(.bg-sky-500):hover, .skin-galaxy aside nav a:not(.bg-sky-500):hover, .skin-jungle aside nav a:not(.bg-sky-500):hover { background: var(--sk-glow) !important; color: var(--sk-acc) !important; }
.skin-tech aside nav a.bg-sky-500, .skin-galaxy aside nav a.bg-sky-500, .skin-jungle aside nav a.bg-sky-500 { background: var(--sk-acc) !important; color: var(--sk-on-acc) !important; box-shadow: 0 0 22px var(--sk-glow) !important; }
/* header and go button */
.skin-tech header, .skin-galaxy header, .skin-jungle header { border-bottom: 1px solid var(--sk-line); box-shadow: 0 6px 30px var(--sk-glow); }
.skin-tech #btnSubmit, .skin-galaxy #btnSubmit, .skin-jungle #btnSubmit { background: linear-gradient(135deg, var(--sk-acc), var(--sk-acc2)) !important; color: var(--sk-on-acc) !important; border-color: transparent !important; }

/* tiles */
.skin-tech .bl-tile, .skin-galaxy .bl-tile, .skin-jungle .bl-tile {
  background: linear-gradient(165deg, var(--sk-inner), var(--sk-card)); border: 2px solid var(--n);
  box-shadow: 0 0 20px -2px color-mix(in srgb, var(--n) 55%, transparent), inset 0 0 26px -12px var(--n);
}
.skin-tech .bl-tile-glow, .skin-galaxy .bl-tile-glow, .skin-jungle .bl-tile-glow { background: radial-gradient(circle, color-mix(in srgb, var(--n) 55%, transparent), transparent 66%); }
.skin-tech .bl-tile-icon, .skin-galaxy .bl-tile-icon, .skin-jungle .bl-tile-icon { background: rgba(255,255,255,.07); box-shadow: 0 0 22px -4px var(--n), inset 0 0 0 2px var(--n); }
.skin-tech .bl-tile-title, .skin-galaxy .bl-tile-title, .skin-jungle .bl-tile-title { color: #fff; }
.skin-tech .bl-tile-sub, .skin-galaxy .bl-tile-sub, .skin-jungle .bl-tile-sub { color: var(--n); }
.skin-tech .bl-chips i, .skin-galaxy .bl-chips i, .skin-jungle .bl-chips i { background: rgba(255,255,255,.07); color: var(--sk-muted); border: 1px solid rgba(255,255,255,.1); }
.skin-tech .bl-tile-go, .skin-galaxy .bl-tile-go, .skin-jungle .bl-tile-go { background: var(--n); color: #06121c; box-shadow: 0 0 16px -2px var(--n); }
.skin-tech .bl-tile::after, .skin-galaxy .bl-tile::after, .skin-jungle .bl-tile::after { color: var(--n); }

/* sidebar extras */
.skin-tech .bl-idea, .skin-galaxy .bl-idea, .skin-jungle .bl-idea { background: var(--sk-inner); border-color: var(--sk-acc); }
.skin-tech .bl-idea-label, .skin-galaxy .bl-idea-label, .skin-jungle .bl-idea-label { color: var(--sk-acc); }
.skin-tech .bl-idea-text, .skin-galaxy .bl-idea-text, .skin-jungle .bl-idea-text { color: var(--sk-text); }
.skin-tech .bl-idea-btn, .skin-galaxy .bl-idea-btn, .skin-jungle .bl-idea-btn { background: var(--sk-acc); color: var(--sk-on-acc); box-shadow: 0 0 16px -2px var(--sk-acc); }
.skin-tech .bl-mic-locked, .skin-galaxy .bl-mic-locked, .skin-jungle .bl-mic-locked { background: var(--sk-inner); border-color: var(--sk-acc); }

/* ---------- "Cyber Ops" extras: sharper, more aggressive ---------- */
.skin-tech .glass-card, .skin-tech .bl-tile, .skin-tech .bl-idea { border-radius: 14px !important; }
.skin-tech .bl-tile-icon { border-radius: 12px; }
.skin-tech .bl-tile-title, .skin-tech .bl-idea-label {
  font-family: 'Bahnschrift', 'Segoe UI Semibold', 'Arial Narrow', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .07em;
}
.skin-tech .bl-tile::after { content: '\25B8'; }
.skin-tech .bl-tile { clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }

@media (prefers-reduced-motion: reduce) {
  .bl-bot-eye-glow { animation: none !important; }
}

/* ---------- Brainy the helper robot ---------- */
.bl-bot-btn { position: relative; border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: transform .2s; }
.bl-bot-btn:hover { transform: scale(1.05); }
.bl-bot-svg { width: clamp(78px, 13vh, 124px); height: clamp(78px, 13vh, 124px); display: block; filter: drop-shadow(0 8px 10px rgba(15,23,42,.28)); }
.bl-bot-bubble {
  font-size: .72rem; font-weight: 800; color: #0c4a6e; background: #e0f7ff; border: 2px solid #7dd3fc;
  padding: 3px 12px; border-radius: 999px; white-space: nowrap;
}
.bl-bot-eye-glow { animation: bl-glow 3.2s ease-in-out infinite; }
@keyframes bl-glow { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }

.bl-helper { width: min(520px, 100%); }
.bl-helper-bubble {
  background: #ecfeff; border: 2px solid #67e8f9; color: #0c4a6e; border-radius: 18px; padding: 12px 14px; margin: 12px 0 10px;
  font-weight: 800; font-size: 1.05rem; line-height: 1.35;
}
.bl-helper-go {
  display: block; width: 100%; margin: 0 0 10px; border: 0; cursor: pointer; padding: 12px; border-radius: 16px; font-weight: 900; font-size: 1.1rem; color: #fff;
  background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: 0 10px 18px -10px rgba(22,163,74,.9);
}
.bl-helper-go[hidden] { display: none; }
.bl-helper-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.bl-helper-chips button {
  border: 2px solid #bae6fd; background: #f0f9ff; color: #075985; font-weight: 800; font-size: .88rem; padding: 8px 12px; border-radius: 999px; cursor: pointer;
}
.bl-helper-chips button:hover { background: #e0f2fe; border-color: #38bdf8; }
.bl-helper-form { display: flex; gap: 8px; }
.bl-helper-form input { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 999px; border: 2px solid #bae6fd; font-size: .95rem; font-weight: 700; color: #0f172a; background: #fff; }
.bl-helper-form button { border: 0; cursor: pointer; padding: 0 20px; border-radius: 999px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.skin-tech .bl-modal-card, .skin-galaxy .bl-modal-card, .skin-jungle .bl-modal-card { background: var(--sk-card); color: var(--sk-text); border: 1px solid var(--sk-line); }
.skin-tech .bl-modal-sub, .skin-galaxy .bl-modal-sub, .skin-jungle .bl-modal-sub { color: var(--sk-muted); }
.skin-tech .bl-helper-bubble, .skin-galaxy .bl-helper-bubble, .skin-jungle .bl-helper-bubble { background: var(--sk-inner); border-color: var(--sk-acc); color: var(--sk-text); }
.skin-tech .bl-helper-chips button, .skin-galaxy .bl-helper-chips button, .skin-jungle .bl-helper-chips button { background: var(--sk-inner); border-color: var(--sk-line); color: var(--sk-text); }
.skin-tech .bl-helper-form input, .skin-galaxy .bl-helper-form input, .skin-jungle .bl-helper-form input { background: var(--sk-inner); border-color: var(--sk-line); color: var(--sk-text); }
.skin-tech .bl-bot-bubble, .skin-galaxy .bl-bot-bubble, .skin-jungle .bl-bot-bubble { background: var(--sk-inner); border-color: var(--sk-acc); color: var(--sk-acc); }
.skin-tech .bl-skin-card, .skin-galaxy .bl-skin-card, .skin-jungle .bl-skin-card { background: var(--sk-inner); }
.skin-tech .bl-skin-card b, .skin-galaxy .bl-skin-card b, .skin-jungle .bl-skin-card b { color: var(--sk-text); }
.skin-tech .bl-x, .skin-galaxy .bl-x, .skin-jungle .bl-x { background: var(--sk-inner); color: var(--sk-text); }

/* ---------- Green microphone (real one and the locked one) ---------- */
#btnMic.from-amber-400 { background-image: linear-gradient(135deg, #22c55e, #15803d) !important; --tw-ring-color: #bbf7d0 !important; box-shadow: 0 6px 14px -6px rgba(21,128,61,.8) !important; }
.bl-mic-locked { border-color: #86efac !important; background: linear-gradient(135deg, #4ade80, #16a34a) !important; }
.bl-mic-svg { filter: drop-shadow(0 1px 1px rgba(5,46,22,.5)); }

/* ---------- Fit the whole screen: no scrolling on normal laptop and desktop screens ---------- */
@media (min-width: 860px) and (min-height: 560px) {
  body { height: 100vh; overflow: hidden; }
  .lab-workspace-bg { height: auto !important; max-height: none !important; flex: 1 1 0 !important; min-height: 0 !important; overflow: hidden !important; }
  .lab-workspace-bg > aside { overflow: hidden !important; padding-top: clamp(10px, 1.6vh, 20px); padding-bottom: clamp(10px, 1.6vh, 20px); }
  .lab-workspace-bg > aside nav { gap: clamp(2px, .5vh, 8px); }
  .lab-workspace-bg > aside nav a { padding-top: clamp(6px, 1.1vh, 12px) !important; padding-bottom: clamp(6px, 1.1vh, 12px) !important; }
  .lab-workspace-bg > main { overflow-y: auto !important; scrollbar-width: thin !important; padding-top: clamp(8px, 1.4vh, 24px); padding-bottom: clamp(8px, 1.4vh, 24px); gap: clamp(8px, 1.5vh, 22px); }
  .lab-workspace-bg > main > * { margin-top: 0 !important; margin-bottom: 0 !important; }
  .bl-tile { min-height: clamp(150px, 24vh, 218px); padding-top: clamp(10px, 1.8vh, 20px); padding-bottom: clamp(8px, 1.3vh, 14px); gap: clamp(2px, .5vh, 6px); }
  .bl-tile-icon { width: clamp(52px, 8.5vh, 84px); height: clamp(52px, 8.5vh, 84px); font-size: clamp(1.7rem, 4.6vh, 2.9rem); border-radius: clamp(16px, 2.6vh, 26px); }
  .bl-tile-title { font-size: clamp(.95rem, 1.9vh, 1.12rem); margin-top: clamp(2px, .6vh, 6px); }
  .bl-tile-glow { display: none; }
  #projectsGrid .h-36 { height: clamp(78px, 15vh, 144px) !important; }
  #projectsGrid .p-3 { padding: clamp(4px, .8vh, 12px) 12px !important; }
  #projectsGrid .glass-card { padding: clamp(6px, 1vh, 10px) !important; }
  #projectsSection > div:first-child { margin-bottom: clamp(4px, 1vh, 16px) !important; }
  .bl-idea { padding: clamp(6px, 1.2vh, 12px) 12px clamp(8px, 1.3vh, 14px); gap: clamp(3px, .6vh, 6px); }
  .bl-side-fill { margin-top: clamp(6px, 1.4vh, 16px); gap: clamp(4px, 1vh, 8px); }
}
@media (min-width: 860px) and (max-height: 860px) {
  .bl-chips { display: none; }
  .bl-tile { min-height: 0; }
}
@media (min-width: 860px) and (max-height: 800px) {
  .bl-tile-sub { display: none; }
}
@media (min-width: 860px) and (min-height: 560px) {
  .lab-workspace-bg > aside > div:first-child > * + * { margin-top: clamp(6px, 1.2vh, 18px) !important; }
  .lab-workspace-bg > aside > div:first-child > div:first-child { padding: clamp(8px, 1.3vh, 16px) 14px !important; }
  .bl-bot-svg { width: clamp(70px, 10.5vh, 118px); height: clamp(70px, 10.5vh, 118px); }
  .lab-workspace-bg > aside > div:last-child { padding-top: clamp(4px, .9vh, 14px) !important; }
}
/* Shorter windows: tighten the left sidebar so it fits without a scrollbar */
@media (min-width: 1024px) and (max-height: 900px) {
  .lab-workspace-bg > aside { padding-top: 8px !important; padding-bottom: 8px !important; }
  .lab-workspace-bg > aside > div:first-child > * + * { margin-top: 8px !important; }
  .lab-workspace-bg > aside nav a { padding-top: 6px !important; padding-bottom: 6px !important; }
  .bl-bot-svg { width: clamp(56px, 8vh, 84px) !important; height: clamp(56px, 8vh, 84px) !important; }
  .bl-side-fill { margin-top: 8px !important; }
  .bl-idea { padding-top: 8px !important; padding-bottom: 8px !important; }
}
/* Very short windows (small laptops): a little less padding still */
@media (min-width: 1024px) and (max-height: 820px) {
  .lab-workspace-bg > aside nav a { padding-top: 4px !important; padding-bottom: 4px !important; }
  .bl-bot-svg { width: 54px !important; height: 54px !important; }
  #projectsGrid .h-36 { height: 118px !important; }
  .lab-workspace-bg > aside > div:last-child { padding-top: 4px !important; }
  .lab-workspace-bg > aside > div:first-child > div:first-child { padding-top: 10px !important; padding-bottom: 10px !important; }
}
/* Short screens (about 760px tall or less, e.g. a laptop at 125% scaling): fit the sidebar and home page without scrolling */
@media (min-width: 1024px) and (max-height: 760px) {
  .lab-workspace-bg > main { padding-top: 6px !important; padding-bottom: 6px !important; gap: 8px !important; }
  .lab-workspace-bg > aside { padding-top: 6px !important; padding-bottom: 6px !important; }
  .lab-workspace-bg > aside nav { gap: 4px !important; }
  .lab-workspace-bg > aside nav a { padding-top: 3px !important; padding-bottom: 3px !important; font-size: .95rem !important; }
  .lab-workspace-bg > aside > div:first-child > * + * { margin-top: 6px !important; }
  .lab-workspace-bg > aside > div:first-child > div:first-child { padding-top: 8px !important; padding-bottom: 8px !important; }
  .lab-workspace-bg > aside > div:last-child { padding-top: 2px !important; }
  .bl-bot-svg { width: 46px !important; height: 46px !important; }
  .bl-idea { padding-top: 6px !important; padding-bottom: 6px !important; gap: 2px !important; }
  .bl-idea-text { font-size: .8rem; line-height: 1.15; }
  .bl-idea-label { display: none; }
  .lab-workspace-bg > aside .w-16 { width: 52px !important; height: 52px !important; min-width: 52px !important; min-height: 52px !important; max-width: 52px !important; max-height: 52px !important; }
  #projectsGrid .h-36 { height: 92px !important; }
  #projectsGrid .glass-card { padding: 6px !important; }
  .lab-workspace-bg > aside nav a span { font-size: 1.2rem; line-height: 1.5rem; }
  #projectsGrid { row-gap: 8px !important; }
}
@media (min-width: 860px) and (max-width: 1499px) { .bl-chips { display: none; } .bl-tile { min-height: 0; } }
@media (min-width: 860px) and (max-height: 720px) {
  .bl-tile-sub { display: none; }
  .bl-idea-text { font-size: .8rem; }
  .bl-idea-label { font-size: .62rem; }
  .lab-workspace-bg > aside > div:last-child p:last-child { display: none; }
  #projectsGrid .p-3 p { display: none; }
  .lab-workspace-bg > main > div:last-child .grid > div { padding-top: 6px !important; padding-bottom: 6px !important; }
  .lab-workspace-bg > main > div:last-child .grid p { display: none; }
}
/* Anything that does not fit stays reachable by scrolling. A thin scroll bar shows there is more below. */
@media (min-width: 860px) and (max-height: 780px) {
  .lab-workspace-bg > aside, .lab-workspace-bg > main { overflow-y: auto !important; scrollbar-width: thin; }
}
/* ---------- Idea suggestions (helper list, idea builder, and chips inside the creation window) ---------- */
.bl-helper { max-height: 94vh; overflow-y: auto; scrollbar-width: thin; }
.bl-helper-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.bl-helper-list button, .bl-studio-ideas button, .bl-brow button {
  border: 2px solid #bae6fd; background: #f0f9ff; color: #075985; font: inherit; font-weight: 800; font-size: .86rem; padding: 7px 12px; border-radius: 14px; cursor: pointer; text-align: left;
}
.bl-helper-list button:hover, .bl-studio-ideas button:hover, .bl-brow button:hover { background: #e0f2fe; border-color: #38bdf8; }
.bl-helper-list button.bl-alt, .bl-studio-ideas button.bl-alt, .bl-helper-builder button.bl-alt { background: #fff; border-style: dashed; text-align: center; }
.bl-helper-builder { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.bl-helper-builder[hidden] { display: none; }
.bl-brow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bl-brow-label { width: 100%; font-weight: 900; font-size: .78rem; color: #475569; text-transform: uppercase; letter-spacing: .05em; }
.bl-brow button { border-radius: 999px; padding: 6px 12px; }
.bl-brow button.on { background: #0ea5e9; border-color: #0284c7; color: #fff; }
.bl-studio-ideas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.bl-studio-ideas-label { width: 100%; font-weight: 900; font-size: .8rem; color: #0369a1; }
.bl-studio-ideas button { border-radius: 999px; font-size: .78rem; padding: 6px 12px; }
.skin-tech .bl-helper-list button, .skin-galaxy .bl-helper-list button, .skin-jungle .bl-helper-list button,
.skin-tech .bl-studio-ideas button, .skin-galaxy .bl-studio-ideas button, .skin-jungle .bl-studio-ideas button,
.skin-tech .bl-brow button, .skin-galaxy .bl-brow button, .skin-jungle .bl-brow button { background: var(--sk-inner); border-color: var(--sk-line); color: var(--sk-text); }
.skin-tech .bl-brow button.on, .skin-galaxy .bl-brow button.on, .skin-jungle .bl-brow button.on { background: var(--sk-acc); color: var(--sk-on-acc); border-color: var(--sk-acc); }
.skin-tech .bl-brow-label, .skin-galaxy .bl-brow-label, .skin-jungle .bl-brow-label, .skin-tech .bl-studio-ideas-label, .skin-galaxy .bl-studio-ideas-label, .skin-jungle .bl-studio-ideas-label { color: var(--sk-acc); }
/* ---------- Creation window: solid white card with dark, easy-to-read text (every look) ---------- */
#studioModal .glass-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(125, 211, 252, .45), transparent 42%),
    radial-gradient(circle at 100% 100%, rgba(244, 114, 182, .32), transparent 46%),
    radial-gradient(circle at 100% 0%, rgba(253, 224, 71, .28), transparent 30%),
    linear-gradient(160deg, #eef6ff 0%, #f8f2ff 55%, #fff4f9 100%) !important;
}
#studioModal h3, #studioModal label, #studioModal #resultBannerTitle, #studioModal #genStatusText,
#studioModal #modalPrompt, #studioModal #genResultBox, #studioModal #genResultText { color: #0f172a !important; }
#studioModal #modalSub, #studioModal #resultBannerSub, #studioModal .text-slate-400, #studioModal .text-slate-500 { color: #334155 !important; }
#studioModal #modalPrompt { background: #ffffff !important; font-size: 1rem; }
#studioModal #genResultBox { background: #eef4ff !important; border-color: #a5b4fc !important; }
#studioModal #resultBannerTitle { font-size: 1.05rem; }
#studioModal #resultBannerSub { font-size: .8rem; font-weight: 800; }
#studioModal #audioActionRow, #studioModal #genImageContainer { background: #ffffff !important; }
#studioModal #genResultText { font-size: 1rem; }
#studioModal #genResultText .text-slate-600 { color: #334155 !important; }

/* Mode chooser: Picture / Game / Storybook / Editor, shown after the description */
.bl-mode-chooser { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bl-mode-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer;
  padding: 10px 4px; border-radius: 18px; border: 3px solid #cbd5e1; background: #ffffff; color: #0f172a;
  font-weight: 900; font-size: .95rem; line-height: 1.1; font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
}
.bl-mode-btn .bl-mode-ico { font-size: 1.7rem; line-height: 1.1; }
.bl-mode-btn:hover { border-color: #818cf8; }
.bl-mode-btn.on { border-color: #4f46e5; background: #eef2ff; box-shadow: 0 0 0 3px #c7d2fe; }
.bl-mode-hint { font-size: .8rem; font-weight: 800; color: #334155; }

/* Paint editor */
.bl-paint-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bl-paint-swatch { width: 34px; height: 34px; border-radius: 999px; border: 3px solid #ffffff; box-shadow: 0 0 0 2px #94a3b8; cursor: pointer; }
.bl-paint-swatch.on { box-shadow: 0 0 0 4px #4f46e5; }
.bl-paint-btn { padding: 8px 14px; border-radius: 999px; border: 2px solid #cbd5e1; background: #ffffff; color: #0f172a; font-weight: 900; font-size: .85rem; cursor: pointer; }
.bl-paint-btn.on { border-color: #4f46e5; background: #eef2ff; }
.bl-paint-btn.primary { border: 0; background: linear-gradient(135deg, #4f46e5, #0ea5e9); color: #ffffff; }
.bl-paint-canvas { width: 100%; height: auto; aspect-ratio: 600 / 420; background: #ffffff; border: 3px solid #94a3b8; border-radius: 18px; touch-action: none; cursor: crosshair; }

@media (max-width: 480px) {
  .bl-mode-btn { font-size: .8rem; }
  .bl-mode-btn .bl-mode-ico { font-size: 1.4rem; }
}

/* ---------- Smaller, tidier tiles; sidebar stays visible on narrower windows ---------- */
.bl-tile { min-height: clamp(116px, 16vh, 150px) !important; padding: 10px 6px 8px !important; border-radius: 24px; gap: 3px !important; }
.bl-tile-icon { width: clamp(44px, 6.6vh, 58px) !important; height: clamp(44px, 6.6vh, 58px) !important; font-size: clamp(1.45rem, 3.9vh, 2.15rem) !important; border-radius: 16px !important; box-shadow: 0 8px 14px -8px var(--tsh), 0 0 0 3px rgba(255,255,255,.5) !important; }
.bl-tile-title { font-size: clamp(.9rem, 1.7vh, 1.02rem) !important; margin-top: 4px !important; }
.bl-tile-sub { font-size: .78rem; color: var(--tt); }
.bl-chips i { font-size: .6rem; padding: 1px 7px; }
.bl-tile-go { font-size: .72rem; padding: 4px 13px; }
.bl-tile::after { top: 8px; right: 11px; font-size: .85rem; }
.bl-tiles { gap: 10px; }
/* Seven tiles on one line: a little narrower type so the names fit the narrower cards */
@media (min-width: 1200px) and (max-width: 1599px) {
  .bl-tile-title { font-size: .92rem !important; }
  .bl-tile-sub { font-size: .66rem; }
  .bl-tile-go { font-size: .68rem; padding: 4px 10px; }
}

@media (min-width: 860px) and (max-width: 1023px) {
  .lab-workspace-bg { flex-direction: row !important; }
  .lab-workspace-bg > aside { display: flex !important; width: 232px !important; margin: 10px !important; padding: 12px !important; }
  .lab-workspace-bg > div.lg\:hidden { display: none !important; }
  .lab-workspace-bg > aside nav a { font-size: 1rem !important; padding-left: 12px !important; padding-right: 12px !important; gap: 10px !important; }
  .lab-workspace-bg > aside .bl-bot-bubble { font-size: .66rem; }
}
@media (min-width: 860px) and (max-width: 1199px) {
  .bl-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lab-workspace-bg > main { overflow-y: auto !important; scrollbar-width: none; -ms-overflow-style: none; }
  .lab-workspace-bg > main::-webkit-scrollbar { display: none; }
  header a[href="privacy.html"] { display: none !important; }
  header > div:last-child > div.hidden.md\:flex { display: none !important; }
  header .font-kid, header p { white-space: nowrap; }
}
@media (min-width: 860px) and (max-width: 1199px) {
  .lab-workspace-bg > main > div:first-child > div { flex-direction: column !important; align-items: stretch !important; }
  .lab-workspace-bg > main > div:first-child form { max-width: 100% !important; width: 100% !important; }
  .lab-workspace-bg > aside { overflow-y: auto !important; scrollbar-width: none; -ms-overflow-style: none; }
  .lab-workspace-bg > aside::-webkit-scrollbar { display: none; }
}
/* Home tiles: the whole card lifts and lights up on hover, not just the icon */
.bl-tile { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease; }
.bl-tile:hover {
  transform: translateY(-6px) scale(1.03);
  border-color: var(--tb2);
  box-shadow: 0 24px 34px -14px var(--tsh), 0 0 0 4px rgba(255,255,255,.85), inset 0 1px 0 rgba(255,255,255,.9);
  filter: saturate(1.15) brightness(1.03);
}
.bl-tile:active { transform: translateY(-2px) scale(1.01); }
.bl-tile:focus-visible { outline: 3px solid var(--tb2); outline-offset: 3px; }
/* ---------- Brainy Lab Games panel and cards (external so the Content-Security-Policy allows them) ---------- */
#brainyGamesPanel:not(.hidden) { display: grid; margin-top: 12px; }
.bl-game-card { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.25rem; border-radius: 1.5rem; border: 2px solid rgba(255, 255, 255, 0.9); box-shadow: 0 8px 18px -8px rgba(15, 23, 42, 0.25); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.bl-game-card:hover { transform: translateY(-3px); }
.bl-game-card-pink { background: linear-gradient(135deg, #fff1f8, #fbcfe8); }
.bl-game-card-teal { background: linear-gradient(135deg, #f0fdfa, #99f6e4); }