/* ==========================================================================
   Widgets · the back button, the petal option selector, the Xiao helper. One look everywhere:
   square, dark glass, one accent (#4be3ff), Xiao in gold (#ffe75b).
   ========================================================================== */

/* ---------- back (the members page's button) ---------- */
.wg-back, .mc-backlink { border-radius: 12px !important; }

/* ---------- the petal ---------- */
.wg-petal { position: fixed; inset: 0; z-index: 2147483200; display: grid; place-items: center; padding: calc(env(safe-area-inset-top, 0px) + 16px) 14px calc(env(safe-area-inset-bottom, 0px) + 16px); }
.wg-petal[hidden] { display: none; }
.wg-petal-veil { position: absolute; inset: 0; background: rgba(3, 7, 16, .62); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); opacity: 0; transition: opacity .22s ease; }
.wg-petal.is-in .wg-petal-veil { opacity: 1; }
.wg-petal-stage { position: relative; width: min(440px, 100%); max-height: 100%; overflow-y: auto; display: grid; gap: 14px; justify-items: center; text-align: center; scrollbar-width: none;
  opacity: 0; transform: scale(.94); transition: opacity .2s ease, transform .32s cubic-bezier(.34, 1.56, .64, 1); }
.wg-petal.is-in .wg-petal-stage { opacity: 1; transform: none; }
.wg-petal.is-out .wg-petal-stage { opacity: 0; transform: scale(.97); transition-duration: .18s; }
.wg-kicker { margin: 0 0 6px; font: 700 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .26em; text-transform: uppercase; color: #4be3ff; }
.wg-petal-head h2 { margin: 0; font: 600 clamp(22px, 6vw, 28px)/1.15 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; color: #fff; text-shadow: 0 4px 20px rgba(0, 0, 0, .5); }
.wg-petal-options { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wg-petal-option { appearance: none; position: relative; display: grid; gap: 4px; justify-items: start; text-align: left; padding: 14px 14px; border-radius: 14px; cursor: pointer; color: #eef4ff;
  border: 1px solid rgba(140, 200, 255, .22); background: linear-gradient(160deg, rgba(22, 36, 64, .96), rgba(10, 16, 32, .96)); box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
  opacity: 0; transform: scale(.6) translateY(10px); animation: wg-bloom .5s cubic-bezier(.34, 1.56, .64, 1) forwards; animation-delay: calc(var(--i, 0) * 32ms + 40ms);
  transition: border-color .2s ease, background .2s ease, transform .15s ease; }
@keyframes wg-bloom { to { opacity: 1; transform: none; } }
.wg-petal-option:hover { border-color: rgba(75, 227, 255, .6); }
.wg-petal-option:active { transform: scale(.97); }
.wg-petal-option b { font: 600 15px/1.2 system-ui, sans-serif; }
.wg-petal-option small { font: 600 11.5px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: #8ea2bf; }
.wg-petal-option.is-on { background: linear-gradient(135deg, #1d8fc4, #3fa356); border-color: transparent; color: #fff; box-shadow: 0 14px 34px rgba(29, 143, 196, .4); }
.wg-petal-option.is-on small { color: rgba(255, 255, 255, .85); }
.wg-petal-option.tone-custom { border-style: dashed; }
.wg-dot { width: 12px; height: 12px; border-radius: 4px; display: inline-block; margin-bottom: 2px; }
.wg-petal-option.is-skel { min-height: 62px; background: linear-gradient(100deg, rgba(255, 255, 255, .05) 30%, rgba(255, 255, 255, .12) 50%, rgba(255, 255, 255, .05) 70%); background-size: 200% 100%; animation: wg-bloom .4s ease forwards, wg-shimmer 1.1s linear infinite; }
@keyframes wg-shimmer { to { background-position: -200% 0; } }
/* a few options: a ring around the title, like a flower */
.wg-petal-options.is-ring { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wg-petal-options.is-ring .wg-petal-option { justify-items: center; text-align: center; aspect-ratio: 1.15; align-content: center; border-radius: 18px; }
.wg-petal-empty { color: #8ea2bf; }
.wg-petal-custom { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.wg-petal-custom input { min-width: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(75, 227, 255, .6); background: rgba(10, 16, 32, .96); color: #fff; font: 16px/1.3 system-ui, sans-serif; outline: none; }
.wg-petal-custom button { padding: 0 16px; border-radius: 12px; border: 0; background: #4be3ff; color: #04121c; font: 700 15px/1 system-ui, sans-serif; cursor: pointer; }
.wg-petal-xiao { width: 100%; opacity: 0; transform: translateY(10px); animation: wg-bloom .45s cubic-bezier(.22, 1, .36, 1) .18s forwards; }

/* ---------- the Xiao helper ---------- */
.wg-xiao { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px 40px; gap: 6px; align-items: center; padding: 6px; border-radius: 14px;
  border: 1px solid rgba(255, 231, 91, .45); background: rgba(10, 14, 24, .94); box-shadow: 0 0 24px rgba(255, 231, 91, .08), 0 14px 34px rgba(0, 0, 0, .45); text-align: left; }
.wg-xiao-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 231, 91, .12); color: #ffe75b; }
.wg-xiao svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.wg-xiao input { min-width: 0; border: 0; background: transparent; color: #fff; font: 16px/1.3 system-ui, sans-serif; outline: none; padding: 8px 4px; }
.wg-xiao input::placeholder { color: rgba(255, 231, 91, .55); }
.wg-xiao-mic, .wg-xiao-send { appearance: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); color: #eef4ff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.wg-xiao-send { background: #ffe75b; color: #1d1600; border-color: transparent; }
.wg-xiao-mic.is-rec { color: #ff5d73; border-color: #ff5d73; animation: wg-blink 1s ease-in-out infinite; }
@keyframes wg-blink { 50% { opacity: .45; } }
.wg-xiao.is-busy .wg-xiao-send { opacity: .5; }
.wg-xiao-note { grid-column: 1 / -1; margin: 2px 4px 2px; font: 600 12px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; color: #ffe75b; }
.wg-xiao-note.is-bad { color: #fca5a5; }
@media (prefers-reduced-motion: reduce) { .wg-petal-option, .wg-petal-xiao { animation: none; opacity: 1; transform: none; } .wg-petal-stage { transition: none; } }

/* Back at the top of every petal; a form inside one */
.wg-petal-stage { padding-top: 2px; }
.wg-petal-back { position: sticky; top: 0; z-index: 2; justify-self: start; margin: 0 !important; cursor: pointer; font: 600 14px/1 system-ui, sans-serif; }
.wg-petal-options.is-content { grid-template-columns: minmax(0, 1fr); }
.wg-petal-content { display: grid; gap: 10px; text-align: left; padding: 14px; border-radius: 16px; border: 1px solid rgba(140, 200, 255, .22); background: linear-gradient(160deg, rgba(22, 36, 64, .97), rgba(10, 16, 32, .97)); box-shadow: 0 14px 34px rgba(0, 0, 0, .45); animation: wg-bloom .4s cubic-bezier(.34, 1.56, .64, 1) both; }
.wg-petal-content label { display: grid; gap: 6px; font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; text-transform: uppercase; color: #8ea2bf; }
.wg-petal-content input, .wg-petal-content textarea, .wg-petal-content select { width: 100%; box-sizing: border-box; padding: 12px; border-radius: 12px; border: 1px solid rgba(140, 200, 255, .25); background: rgba(255, 255, 255, .05); color: #fff; font: 16px/1.35 system-ui, sans-serif; letter-spacing: 0; text-transform: none; outline: none; }
.wg-petal-content select option { color: #13233f; }
.wg-petal-content .wg-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }   /* one field per row: DESIGN_RULES.md */
.wg-petal-content .wg-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.wg-petal-content .wg-actions button { padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #fff; font: 600 15px/1 system-ui, sans-serif; cursor: pointer; }
.wg-petal-content .wg-actions .is-primary { background: #4be3ff; color: #04121c; border-color: transparent; }
.wg-petal-content .wg-danger { background: rgba(255, 93, 115, .16) !important; color: #fca5a5 !important; border-color: rgba(255, 93, 115, .4) !important; margin-right: auto; }

/* Xiao sits at the bottom of every petal, like the composer */
.wg-petal-stage { padding-bottom: 96px; }
.wg-petal-xiao { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); width: min(440px, calc(100% - 28px)); transform: translate(-50%, 10px); z-index: 3; }
.wg-petal-xiao:empty { display: none; }
@keyframes wg-rise { to { opacity: 1; transform: translate(-50%, 0); } }
.wg-petal-xiao { animation: wg-rise .45s cubic-bezier(.22, 1, .36, 1) .16s forwards; }
.wg-petal-xiao .wg-xiao { padding: 8px; border-radius: 18px; border-color: rgba(255, 231, 91, .55); box-shadow: 0 0 22px rgba(255, 231, 91, .12), 0 18px 44px rgba(0, 0, 0, .6); }
.wg-petal-xiao .wg-xiao input { font-size: 17px; }

/* v3: still and steady. No sideways drag; Xiao fixed at the bottom from the first frame, lit in like lightning */
.wg-petal { overflow: hidden; overscroll-behavior: contain; touch-action: pan-y; }
.wg-petal-stage { box-sizing: border-box; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; }
.wg-petal-options, .wg-petal-option, .wg-petal-content { box-sizing: border-box; min-width: 0; max-width: 100%; }
.wg-petal-option b, .wg-petal-option small { overflow-wrap: anywhere; }
.wg-petal-xiao { animation: none; opacity: 0; transform: translate(-50%, 0); transition: none; }
.wg-petal.is-in .wg-petal-xiao.is-lit { animation: wg-lightning .55s cubic-bezier(.22, 1, .36, 1) forwards; }
.wg-petal.is-out .wg-petal-xiao { opacity: 0; transition: opacity .18s ease; }
@keyframes wg-lightning {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(.98); filter: brightness(2.4); }
  18% { opacity: 1; filter: brightness(2.6) drop-shadow(0 0 18px rgba(255, 231, 91, .9)); }
  32% { opacity: .55; }
  48% { opacity: 1; filter: brightness(1.6) drop-shadow(0 0 12px rgba(255, 231, 91, .6)); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); filter: none; }
}
/* the writing field (a description): large, first */
.wg-petal-write { width: 100%; box-sizing: border-box; display: grid; gap: 10px; padding: 14px; border-radius: 16px; border: 1px solid rgba(75, 227, 255, .45); background: linear-gradient(160deg, rgba(22, 36, 64, .97), rgba(10, 16, 32, .97)); box-shadow: 0 0 30px rgba(75, 227, 255, .12), 0 14px 34px rgba(0, 0, 0, .45); animation: wg-bloom .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.wg-petal-write textarea { width: 100%; box-sizing: border-box; min-height: 92px; resize: none; padding: 12px; border-radius: 12px; border: 1px solid rgba(140, 200, 255, .25); background: rgba(255, 255, 255, .04); color: #fff; font: 18px/1.45 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; outline: none; }
.wg-petal-write textarea:focus { border-color: rgba(75, 227, 255, .7); box-shadow: 0 0 0 3px rgba(75, 227, 255, .15); }
.wg-petal-write button { justify-self: end; padding: 12px 20px; border-radius: 12px; border: 0; background: #4be3ff; color: #04121c; font: 700 15px/1 system-ui, sans-serif; cursor: pointer; }
.wg-petal-head + .wg-petal-write + .wg-petal-options:not(:empty)::before { content: "Recent"; grid-column: 1 / -1; justify-self: start; font: 700 10px/1 ui-monospace, monospace; letter-spacing: .2em; text-transform: uppercase; color: #8ea2bf; }
/* the AI sparkle */
.wg-sparkle { position: fixed; z-index: 2147483300; pointer-events: none; }
.wg-sparkle i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: var(--h); box-shadow: 0 0 10px var(--h), 0 0 2px #fff; animation: wg-spark var(--t) cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes wg-spark { 0% { opacity: 0; transform: translate(0, 0) scale(.2); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1); } }
.wg-poof { animation: wg-poof .6s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes wg-poof { 0% { opacity: 0; transform: scale(.88); filter: brightness(1.8); } 60% { opacity: 1; filter: brightness(1.25); } 100% { transform: none; filter: none; } }
.wg-glint { animation: wg-glint .5s ease; }
@keyframes wg-glint { 0%, 100% { filter: none; } 35% { filter: brightness(1.35) drop-shadow(0 0 10px rgba(255, 231, 91, .45)); } }
@media (prefers-reduced-motion: reduce) { .wg-petal.is-in .wg-petal-xiao.is-lit { animation: none; opacity: 1; } .wg-poof, .wg-glint { animation: none; } }
.wg-petal-options.is-list { grid-template-columns: minmax(0, 1fr); }

/* v4: screens inside one petal; writing rows; Xiao shaded so nothing shows behind it */
.wg-petal-stage.is-next { animation: wg-next .26s cubic-bezier(.22, 1, .36, 1); }
.wg-petal-stage.is-back { animation: wg-prev .24s cubic-bezier(.22, 1, .36, 1); }
@keyframes wg-next { from { opacity: .3; transform: translateX(14px); } }
@keyframes wg-prev { from { opacity: .3; transform: translateX(-14px); } }
.wg-petal-field { grid-column: 1 / -1; display: grid; gap: 6px; text-align: left; padding: 12px; border-radius: 14px; border: 1px solid rgba(140, 200, 255, .22); background: linear-gradient(160deg, rgba(22, 36, 64, .97), rgba(10, 16, 32, .97)); box-shadow: 0 14px 34px rgba(0, 0, 0, .45); animation: wg-bloom .4s cubic-bezier(.34, 1.56, .64, 1) both; }
.wg-field-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.wg-field-top span { font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; text-transform: uppercase; color: #8ea2bf; }
.wg-field-note { font: 600 11px/1 ui-monospace, monospace; color: #34d399; opacity: 0; transition: opacity .2s ease; }
.wg-field-note.is-on { opacity: 1; }
.wg-field-box { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; align-items: stretch; }
.wg-field-box input, .wg-field-box textarea { width: 100%; box-sizing: border-box; min-width: 0; padding: 12px; border-radius: 12px; border: 1px solid rgba(140, 200, 255, .25); background: rgba(255, 255, 255, .05); color: #fff; font: 16px/1.4 system-ui, sans-serif; outline: none; resize: none; }
.wg-field-box textarea { font: 17px/1.45 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; }
.wg-field-box input:focus, .wg-field-box textarea:focus { border-color: rgba(75, 227, 255, .7); box-shadow: 0 0 0 3px rgba(75, 227, 255, .14); }
.wg-field-mic { appearance: none; border-radius: 12px; border: 1px solid rgba(255, 231, 91, .45); background: rgba(255, 231, 91, .08); color: #ffe75b; display: grid; place-items: center; cursor: pointer; padding: 0; min-height: 44px; }
.wg-field-mic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.wg-field-mic.is-rec { color: #ff5d73; border-color: #ff5d73; animation: wg-blink 1s ease-in-out infinite; }
.wg-petal::after { content: ""; position: fixed; z-index: 2; left: 0; right: 0; bottom: 0; height: calc(env(safe-area-inset-bottom, 0px) + 92px); pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 7, 16, 0), rgba(3, 7, 16, .94) 34%, rgba(3, 7, 16, .99)); }
.wg-petal-xiao { z-index: 3; }
.wg-field-box.is-plain { grid-template-columns: minmax(0, 1fr); }

/* headings inside a petal's list, and options that take the whole row (a checklist, notes) */
.wg-petal-label { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 8px 2px -2px; min-width: 0; }
.wg-petal-label span { font: 700 11px/1.2 ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; color: #8ea2bf; }
.wg-petal-label small { font: 600 12px/1.2 Inter, system-ui, sans-serif; color: #8ea2bf; }
.wg-petal-option.is-wide { grid-column: 1 / -1; }
.wg-petal-option.is-wide small { white-space: normal; overflow-wrap: anywhere; }
.wg-petal-option.tone-done b { text-decoration: line-through; text-decoration-color: rgba(52, 211, 153, .7); color: #a9b8cc; }
.wg-petal-option.tone-add { border-style: dashed; }
.wg-petal-option.tone-paper { background: linear-gradient(160deg, #fff7c2, #fdeb8f); border-color: rgba(0, 0, 0, .08); color: #3a3214; }
.wg-petal-option.tone-paper b { font: 400 17px/1.35 Kalam, "Comic Sans MS", cursive; white-space: normal; overflow-wrap: anywhere; color: #3a3214; }
.wg-petal-option.tone-paper small { color: #6b5d2a; }
/* full-width rows read as a checklist: the dot sits beside the words, the row stays short */
.wg-petal-option.is-wide { grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: center; padding: 11px 14px; }
.wg-petal-option.is-wide > :not(.wg-dot) { grid-column: 2; }
.wg-petal-option.is-wide > .wg-dot { grid-row: 1 / span 2; margin: 0; }
.wg-petal-option.is-wide:not(:has(> .wg-dot)) { grid-template-columns: minmax(0, 1fr); }
.wg-petal-option.is-wide:not(:has(> .wg-dot)) > * { grid-column: 1; }
.wg-petal-option.is-wide b { white-space: normal; overflow-wrap: anywhere; }
/* a long list should not wait: the stagger stops after the first dozen */
.wg-petal-option { animation-delay: calc(min(var(--i, 0), 12) * 32ms + 40ms); }
/* nothing in a petal moves sideways, even mid-bloom */
.wg-petal-stage { overflow-x: clip; }
.wg-dot { box-shadow: inset 0 0 0 1.5px rgba(142, 162, 191, .55); }