/* ═══════════════════════════════════════════════════════════════
   Lady Belle's avatar stage, Tales of Lady Belle website (20 Oct)
   STRUCTURE, SIZES, STATES AND BEHAVIOR: AVATAR-STAGE-SPEC v1.2 (copied from avataragency avatarstages/stages.css).
   COLORS ONLY: the Lady Belle "Fresh & Airy" mood (Michael, 20 Oct: light & airy, not the AvatarAgency theme).
   Everything is scoped to #ladybelle-stage so the page's own .btn / .panel styles never collide with it.
   ═══════════════════════════════════════════════════════════════ */
#ladybelle-stage {
  --st-bg: #ffffff;                       /* panel */
  --st-bg2: #f4f9f8;
  --st-text: #2C3E55;                     /* the site's deep blue-gray */
  --st-mid: rgba(44,62,85,.78);
  --st-mute: #6B7685;
  --st-line: rgba(44,62,85,.10);
  --st-line-strong: rgba(44,62,85,.18);
  --st-accent: #5FA9AD;                   /* deep sky: arrows, hover edges, focus */
  --st-sky: #A8DADC; --st-sky-d: #8FCBCE;
  --st-mint: #C9E4CA; --st-mint-d: #B5D9B7;
  --st-butter: #F7E9A0; --st-butter-l: #FBF3CC;
  --st-red: #B33A2F;                      /* the collar red, for errors only */
  --ease: cubic-bezier(.22,.7,.3,1);
}

/* ═════════ The stage ═════════ */
#ladybelle-stage { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); background: var(--st-bg); color: var(--st-text);
  border-radius: 26px; overflow: hidden; min-height: 560px; font-family: var(--sans);
  box-shadow: 0 50px 100px -40px rgba(44,62,85,.35), 0 0 0 1px rgba(143,203,206,.7), 0 0 0 6px rgba(201,228,202,.35); }
#ladybelle-stage .stage-av { position: relative; background: #e9e2d8 url("../assets/belle/ladybelle-poster.jpg") center / cover no-repeat; min-height: 100%; }
#ladybelle-stage .ava-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the cursor-following Belle (site.js) sits over the video at rest */
#ladybelle-stage .stage-frames { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
#ladybelle-stage .stage-frames.on { opacity: 1; }
#ladybelle-stage .stage-av::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 20%, transparent 70%, rgba(44,62,85,.22)); }
#ladybelle-stage .ava-badge { position: absolute; z-index: 4; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--st-text);
  background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#ladybelle-stage .ava-caption { position: absolute; z-index: 2; left: 50%; bottom: 78px; transform: translateX(-50%); width: min(88%, 560px); text-align: center; pointer-events: none; display: grid; gap: 6px; }
#ladybelle-stage .ava-caption:empty { display: none; }
#ladybelle-stage .ava-caption .cap { justify-self: center; padding: 9px 15px; border-radius: 12px; font-size: 15.5px; line-height: 1.45; color: var(--st-text);
  background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: lbCapIn .35s var(--ease); }
#ladybelle-stage .ava-caption .cap.you { background: var(--st-butter); color: var(--st-text); font-weight: 600; }
#ladybelle-stage .ava-caption .cap b { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-right: 8px; opacity: .7; }
@keyframes lbCapIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#ladybelle-stage .ava-ctrls { position: absolute; z-index: 5; left: 18px; right: 18px; bottom: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#ladybelle-stage .ava-sound { position: absolute; z-index: 5; top: 10px; right: 14px; width: 52px; height: 52px; padding: 0; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  color: var(--st-text); background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: color .2s, border-color .2s; }
#ladybelle-stage .ava-sound svg { width: 28px; height: 28px; }
#ladybelle-stage .ava-sound:hover { border-color: var(--st-accent); }
#ladybelle-stage .ava-sound[aria-pressed="true"] { color: #fff; background: var(--st-accent); border-color: var(--st-accent); }
#ladybelle-stage .ava-sound:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; }
#ladybelle-stage .ava-sound-label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px; font: 700 10px/1 var(--sans);
  letter-spacing: .16em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 3px rgba(44,62,85,.85); white-space: nowrap; }
#ladybelle-stage .ava-sound[aria-pressed="true"] .ava-sound-label { display: none; }
#ladybelle-stage .stage-av.live .ava-sound, #ladybelle-stage .stage-av.live-ready .ava-sound { display: none; }
#ladybelle-stage .ava-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px; border-radius: 999px; font: 700 13.5px var(--sans); color: var(--st-text); cursor: pointer;
  background: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color .2s, background .2s, color .2s; }
#ladybelle-stage .ava-btn svg { width: 16px; height: 16px; }
/* the Talk button: the site's mint pill, larger like the spec's gold one */
#ladybelle-stage .ava-btn.ava-talk { height: 46px; padding: 0 22px; font-size: 15px; background: linear-gradient(180deg, #DDF0DE, var(--st-mint-d)); color: var(--st-text); border-color: rgba(255,255,255,.9);
  box-shadow: 0 10px 24px -10px rgba(44,62,85,.45); }
#ladybelle-stage .ava-btn.ava-talk:hover { filter: brightness(1.04); }
#ladybelle-stage .ava-btn.ava-talk[disabled] { opacity: .7; pointer-events: none; }
#ladybelle-stage .ava-btn.ava-talk.is-on { background: rgba(255,255,255,.88); color: var(--st-text); border-color: var(--st-line-strong); }
#ladybelle-stage .ava-btn.ava-talk.is-soon { background: rgba(255,255,255,.88); }

/* ═════════ The panel ═════════ */
#ladybelle-stage .panel { display: flex; flex-direction: column; padding: 22px 22px 18px; background: linear-gradient(180deg, var(--st-bg), var(--st-bg2)); border-left: 1px solid var(--st-line); min-height: 0; }
#ladybelle-stage .panel-top { display: flex; align-items: center; gap: 10px; min-height: 36px; margin-bottom: 14px; }
#ladybelle-stage .panel.is-home .panel-top { display: none; }
@media (min-width: 901px) { #ladybelle-stage .panel.is-home .panel-body { justify-content: center; } }
#ladybelle-stage .panel-back { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--st-line-strong); background: #fff; color: var(--st-text); display: grid; place-items: center; cursor: pointer; }
#ladybelle-stage .panel-back svg { width: 16px; height: 16px; transform: rotate(180deg); }
#ladybelle-stage .panel-back:hover { border-color: var(--st-accent); color: var(--st-accent); }
#ladybelle-stage .panel-back[hidden], #ladybelle-stage .panel-flag[hidden] { display: none; }
#ladybelle-stage .panel-title { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #5E7F55; }
#ladybelle-stage .panel-flag { margin-left: auto; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--st-text); background: var(--st-butter); border-radius: 999px; padding: 4px 10px; }
#ladybelle-stage .panel-body { flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 380px; animation: lbCapIn .35s var(--ease); }
#ladybelle-stage .panel-note { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--st-mute); }
#ladybelle-stage .p-sub { margin: 0; font-size: 14px; color: var(--st-mute); }
#ladybelle-stage .p-actions { display: grid; gap: 9px; margin-top: 4px; }
#ladybelle-stage .p-act { display: grid; grid-template-columns: 38px 1fr 16px; align-items: center; gap: 12px; text-align: left; padding: 13px 14px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--st-line-strong); background: #fff; color: var(--st-text); font: inherit; transition: border-color .2s, background .2s, transform .3s var(--ease), box-shadow .2s; }
#ladybelle-stage .p-act:hover, #ladybelle-stage .p-act.flash { border-color: var(--st-sky-d); background: #F3FAFA; transform: translateX(2px); box-shadow: 0 6px 16px -10px rgba(44,62,85,.35); }
#ladybelle-stage .p-act i { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--st-butter-l); color: var(--st-text); font-style: normal; }
#ladybelle-stage .p-act:nth-child(2) i { background: #E2F1F2; }
#ladybelle-stage .p-act:nth-child(3) i { background: #E6F2E6; }
#ladybelle-stage .p-act:nth-child(4) i { background: #FBEDEB; }
#ladybelle-stage .p-act i svg { width: 18px; height: 18px; }
#ladybelle-stage .p-act b { display: block; font-size: 15px; font-weight: 700; }
#ladybelle-stage .p-act small { display: block; font-size: 12.5px; color: var(--st-mute); margin-top: 2px; }
#ladybelle-stage .p-act > svg { width: 16px; height: 16px; color: var(--st-accent); }
#ladybelle-stage .p-label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--st-mute); margin: 4px 0 0; }
#ladybelle-stage .p-form { display: grid; gap: 10px; }
#ladybelle-stage .p-field { display: grid; gap: 5px; }
#ladybelle-stage .p-field label { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--st-mute); }
#ladybelle-stage .p-field input { font: 15px var(--sans); color: var(--st-text); background: #fff; border: 1px solid var(--st-line-strong); border-radius: 11px; padding: 11px 13px; }
#ladybelle-stage .p-field input:focus { outline: none; border-color: var(--st-accent); background: #F7FBFB; }
#ladybelle-stage .p-field input.flash { border-color: var(--st-accent); box-shadow: 0 0 0 3px rgba(168,218,220,.5); }
#ladybelle-stage .p-field input[aria-invalid="true"] { border-color: var(--st-red); }
#ladybelle-stage .p-check { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--st-text); cursor: pointer; padding: 2px 0; }
#ladybelle-stage .p-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--st-accent); cursor: pointer; flex: none; }
#ladybelle-stage .p-go { margin-top: 4px; justify-self: start; }
#ladybelle-stage .p-msg { margin: 0; font-size: 14px; color: #3f7f83; min-height: 1em; }
#ladybelle-stage .p-msg.err { color: var(--st-red); }
#ladybelle-stage .p-review { display: grid; gap: 12px; }
#ladybelle-stage .p-rv { margin: 0; display: grid; border-radius: 12px; border: 1px solid var(--st-sky-d); background: #F3FAFA; overflow: hidden; }
#ladybelle-stage .p-rv div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 10px 13px; }
#ladybelle-stage .p-rv div + div { border-top: 1px solid var(--st-line); }
#ladybelle-stage .p-rv dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--st-mute); padding-top: 2px; }
#ladybelle-stage .p-rv dd { margin: 0; font-size: 15px; color: var(--st-text); overflow-wrap: anywhere; }
#ladybelle-stage .p-rv-acts { display: flex; flex-wrap: wrap; gap: 10px; }
#ladybelle-stage .p-done { display: grid; justify-items: start; gap: 12px; margin-top: 6px; }
#ladybelle-stage .p-done .tick { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--st-butter); color: var(--st-text); font-size: 26px; font-weight: 800; animation: lbTick .5s var(--ease); }
@keyframes lbTick { from { transform: scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
#ladybelle-stage .p-done h4 { margin: 0; font: 600 21px/1.2 var(--serif); }
#ladybelle-stage .p-done p { margin: 0; color: var(--st-mid); font-size: 14.5px; }
#ladybelle-stage .p-svcs { display: grid; gap: 7px; }
#ladybelle-stage .p-card { flex: none; border-radius: 14px; overflow: hidden; border: 1px solid var(--st-line-strong); background: #fff; }
#ladybelle-stage .p-card > div { padding: 14px 15px 16px; display: grid; gap: 8px; }
#ladybelle-stage .p-card h4 { margin: 0; font: 600 18px/1.25 var(--serif); color: var(--st-text); }
#ladybelle-stage .p-card p { margin: 0; color: var(--st-mid); font-size: 14px; line-height: 1.55; }
#ladybelle-stage .p-svc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 2px; }
/* the fruit cards in "Fruit of the Spirit Values": a soft wash, Kindness highlighted as Book One */
#ladybelle-stage #lb-fruit-kindness { border-color: rgba(179,58,47,.3); background: #FFFBEC; }
#ladybelle-stage .p-card.flash { border-color: var(--st-accent); box-shadow: 0 0 0 3px rgba(168,218,220,.45); }

/* buttons inside the panel (the stage script uses btn-gold / btn-ghost / btn-sm) */
#ladybelle-stage .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px;
  font: 700 13.5px var(--sans); cursor: pointer; text-decoration: none; border: 1px solid transparent; transition: background-color .2s, border-color .2s, transform .2s; }
#ladybelle-stage .btn svg { width: 16px; height: 16px; }
#ladybelle-stage .btn-gold { background: var(--st-sky); color: var(--st-text); }
#ladybelle-stage .btn-gold:hover { background: var(--st-sky-d); transform: translateY(-1px); }
#ladybelle-stage .btn-ghost { background: #fff; color: var(--st-text); border-color: var(--st-line-strong); }
#ladybelle-stage .btn-ghost:hover { border-color: var(--st-accent); color: var(--st-accent); }

/* Kindness Story Time */
#ladybelle-stage .lb-story { display: grid; gap: 12px; }
#ladybelle-stage .lb-art { margin: 0; border-radius: 14px; aspect-ratio: 16 / 9; display: grid; align-content: center; gap: 8px; padding: 18px 20px;
  background: linear-gradient(160deg, #FFFBEA, #F3EEDD); border: 1px dashed var(--st-sky-d); overflow: hidden; }
#ladybelle-stage .lb-art span { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #5E7F55; }
#ladybelle-stage .lb-art figcaption { font: italic 500 15.5px/1.4 var(--serif); color: #5b5246; }
#ladybelle-stage .lb-text p { margin: 0 0 8px; font: 500 17px/1.6 var(--serif); color: var(--st-text); }
#ladybelle-stage .lb-ctrls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
#ladybelle-stage .lb-ctrls .btn[disabled] { opacity: .35; pointer-events: none; }

/* ═════════ Live session ═════════ */
#ladybelle-stage .ava-mount { position: absolute; inset: 0; z-index: 2; overflow: hidden; opacity: 0; transition: opacity .8s cubic-bezier(.4,0,.2,1); background: #e9e2d8; }
#ladybelle-stage .ava-mount > *, #ladybelle-stage .ava-mount video, #ladybelle-stage .ava-mount canvas { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  max-width: none !important; max-height: none !important; margin: 0 !important; border-radius: 0 !important; object-fit: cover; }
#ladybelle-stage .ava-mount, #ladybelle-stage .ava-mount * { overflow: hidden !important; scrollbar-width: none; }
#ladybelle-stage .ava-mount #np_companion-avatar-container { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
#ladybelle-stage .stage-av.live-ready .ava-mount { opacity: 1; }
#ladybelle-stage .stage-av.live-ready .ava-video { opacity: 0; transition: opacity 0s linear .8s; }
#ladybelle-stage .stage-av.live::after { display: none; }
#ladybelle-stage .stage-av.live-ready .ava-ctrls, #ladybelle-stage .stage-av.live-ready .ava-caption { display: none; }
#ladybelle-stage .ava-toast { position: absolute; z-index: 4; left: 50%; top: 62px; transform: translateX(-50%); width: min(88%, 520px); text-align: center; padding: 10px 16px; border-radius: 12px;
  font-size: 14.5px; line-height: 1.45; color: var(--st-text); background: rgba(255,255,255,.92); border: 1px solid var(--st-sky-d); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#ladybelle-stage .ava-toast[hidden] { display: none; }
#ladybelle-stage.is-live .panel-flag { display: none; }

/* ═════════ Desktop: fixed 560 px, the panel scrolls (spec) · Phone: stacked (spec) ═════════ */
@media (min-width: 901px) {
  #ladybelle-stage { height: 560px; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  #ladybelle-stage .panel { min-height: 0; overflow: hidden; }
  #ladybelle-stage .panel-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; margin-right: -4px;
    scrollbar-width: thin; scrollbar-color: rgba(95,169,173,.5) transparent; }
}
@media (max-width: 900px) {
  #ladybelle-stage { grid-template-columns: 1fr; min-height: 0; border-radius: 20px; }
  #ladybelle-stage .stage-av { aspect-ratio: 4 / 3.4; min-height: 0; }
  #ladybelle-stage .ava-caption { bottom: 66px; }
  #ladybelle-stage .ava-caption .cap { font-size: 14.5px; }
  #ladybelle-stage .ava-btn { height: 38px; padding: 0 13px; font-size: 13px; }
  #ladybelle-stage .ava-btn.ava-talk { height: 44px; padding: 0 20px; font-size: 14.5px; }
  #ladybelle-stage .panel { border-left: 0; border-top: 1px solid var(--st-line); padding: 18px 16px 16px; }
  #ladybelle-stage .panel-body { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #ladybelle-stage .panel-body, #ladybelle-stage .ava-caption .cap { animation: none; }
}