/* ============================================================
 * style_flower.css — the settings flower
 * ============================================================
 * Record at the centre (red), five petals blooming around it in a warm-to-cool arc:
 * orange, yellow, green, blue, indigo. The collapsed bud is violet.
 *
 * ADAPTIVE SURFACE LAW: 44px targets under pointer:coarse (LAW 5); bloom is a hard-off
 * under reduced motion (LAW 6); no 100vh (LAW 1); position clamps to the viewport in JS.
 * ============================================================ */

/* ONE shared width for the settings bud AND the call-control box, so #3 (equal width) holds
   on every device by construction — change it here and both track it. */
:root { --y-ctrl-w: 46px; }
@media (max-width: 480px) { :root { --y-ctrl-w: 44px; } }   /* still >= 44px touch target */

.flower-root {
  position: fixed;
  z-index: 970;             /* above the call controls, below modal dialogs */
  width: 0;
  height: 0;
  /* left/top are the BUD CENTRE; children are translated relative to it. */
}

/* ── Shared button shell ──────────────────────────────────────────────────── */
.flower-bud,
.flower-petal {
  position: absolute;
  cursor: pointer;
  color: #fff;
  border: 1px solid oklch(100% 0 0 / 0.35);
  -webkit-tap-highlight-color: transparent;
  touch-action: none;       /* the whole thing is draggable */
}
.flower-bud, .flower-core {
  display: grid;
  place-items: center;
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.4),
    0 6px 18px -6px oklch(20% 0.05 280 / 0.6);
}
/* 44px hit area under touch, regardless of the visual size. */
@media (pointer: coarse) {
  .flower-bud::after, .flower-petal::after {
    content: '';
    position: absolute; inset: 50% auto auto 50%;
    translate: -50% -50%;
    width: 44px; height: 44px;
  }
}

/* ── The bud (collapsed): violet ──────────────────────────────────────────── */
.flower-bud {
  width: var(--y-ctrl-w); height: var(--y-ctrl-w);
  left: calc(var(--y-ctrl-w) / -2); top: calc(var(--y-ctrl-w) / -2);   /* centre on the root point */
  background: linear-gradient(150deg, oklch(62% 0.2 300), oklch(50% 0.22 295));
  backdrop-filter: blur(8px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s;
}
.flower-bud:hover  { transform: scale(1.06); }
.flower-bud:active { transform: scale(0.94); }
.flower-bud:focus-visible { outline: 2px solid oklch(80% 0.15 300); outline-offset: 3px; }

/* When open, the bud recedes so the flower reads as one object, not a button with dots. */
.flower-root.is-open .flower-bud {
  transform: scale(0.7);
  opacity: 0.55;
}

/* ── The centre: Record (red) ─────────────────────────────────────────────── */
.flower-core {
  width: 52px; height: 52px;
  left: -26px; top: -26px;
  background: radial-gradient(circle at 35% 30%, oklch(70% 0.22 25), oklch(56% 0.24 25));
  transform: scale(0);                         /* hidden until bloom */
  opacity: 0;
  pointer-events: none;
  transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s;
}
.flower-root.is-open .flower-core {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
/* A gentle pulse so the record heart reads as the primary action. */
@media (prefers-reduced-motion: no-preference) {
  .flower-root.is-open .flower-core::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 oklch(62% 0.24 25 / 0.5);
    animation: flower-pulse 2s ease-out infinite;
  }
}
@keyframes flower-pulse {
  0%   { box-shadow: 0 0 0 0 oklch(62% 0.24 25 / 0.5); }
  70%  { box-shadow: 0 0 0 12px oklch(62% 0.24 25 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(62% 0.24 25 / 0); }
}

/* ── Petals: a real petal silhouette — full rounded outer end tapering to a base that
   points at the core. iOS-class GLASS: translucent hue-tinted, refractive (backdrop-filter),
   specular top rim, hue-tinted hairline border. --petal-hue tints it; --rot aims the base at
   the core; --px/--py place it on the ring. The glyph is counter-rotated to stay upright. ── */
.flower-petal:not(.flower-core) {
  display: grid;
  place-items: center;
  width: 46px;
  height: 56px;
  left: -23px; top: -28px;                 /* centre the petal box on its anchor point */

  /* Leaf/petal outline: fuller, rounder outer end; narrower tapered base toward the core. */
  border-radius: 50% 50% 46% 46% / 66% 66% 34% 34%;

  /* Ultra-glass, tinted by the setting's hue. */
  background: linear-gradient(180deg,
    oklch(80% 0.12 var(--petal-hue) / 0.42),
    oklch(60% 0.17 var(--petal-hue) / 0.28));
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid oklch(92% 0.05 var(--petal-hue) / 0.5);
  box-shadow:
    inset 0 2px 3px oklch(100% 0 0 / 0.5),                     /* specular top rim */
    inset 0 -7px 12px oklch(40% 0.12 var(--petal-hue) / 0.32), /* soft inner underside */
    0 10px 22px -10px oklch(30% 0.12 var(--petal-hue) / 0.6);

  transform: translate(0, 0) rotate(var(--rot)) scale(0);
  transform-origin: 50% 50%;
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.25s ease;
}
.flower-root.is-open .flower-petal:not(.flower-core) {
  transform: translate(var(--px), var(--py)) rotate(var(--rot)) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.petal-ico {
  display: grid; place-items: center; line-height: 0;
  color: #fff;
  transform: rotate(calc(var(--rot) * -1));                    /* keep the glyph upright */
  filter: drop-shadow(0 1px 2px oklch(18% 0.05 280 / 0.65));
}
/* Title: a small glass caption just OUTSIDE the petal, upright, on hover / focus / press.
   It stays in the DOM always (labels are state-reactive), shown on demand so the bloomed ring
   stays clean and the petals keep their shape instead of bloating to fit text. */
.petal-txt {
  position: absolute;
  top: -13px; left: 50%;
  transform: translate(-50%, -50%) rotate(calc(var(--rot) * -1));
  padding: 2px 7px;
  border-radius: 8px;
  background: oklch(22% 0.03 280 / 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s ease;
}
.flower-petal:hover .petal-txt,
.flower-petal:focus-visible .petal-txt,
.flower-petal:active .petal-txt { opacity: 1; }

/* Staggered bloom, so the petals unfurl in sequence rather than snapping out together. */
.flower-root.is-open .flower-petal-sounds   { transition-delay: 0.02s; }
.flower-root.is-open .flower-petal-theme    { transition-delay: 0.06s; }
.flower-root.is-open .flower-petal-fit      { transition-delay: 0.10s; }
.flower-root.is-open .flower-petal-bg       { transition-delay: 0.14s; }
.flower-root.is-open .flower-petal-hide     { transition-delay: 0.18s; }
.flower-root.is-open .flower-petal-collapse { transition-delay: 0.22s; }

.flower-petal:hover  { filter: brightness(1.12); }
.flower-petal:active { transform: translate(var(--px), var(--py)) rotate(var(--rot)) scale(0.92); }
.flower-petal:focus-visible { outline: 2px solid oklch(95% 0.05 var(--petal-hue)); outline-offset: 2px; }

.flower-root.is-dragging { cursor: grabbing; }
.flower-root.is-dragging * { transition: none !important; }   /* follow the finger 1:1 */

/* ── Reduced motion: hard stop ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .flower-bud, .flower-core, .flower-petal { transition: none; }
  .flower-root.is-open .flower-core::before { animation: none; }
}

/* ── Call controls (#hex-menu): DEFAULT position under the flower, on the LEFT ──
   DEFAULTS ONLY — deliberately no `!important` — so the drag handler in hex_menu.js (which
   writes inline left/top/transform/right/bottom) ALWAYS wins and the user can move the menu
   anywhere. A default is a starting point, never a lock.
   REGRESSION NOTE (do not reintroduce): a prior build pinned this with `!important`, which
   overrode the inline drag styles and silently froze a movable menu. Never put `!important`
   on #hex-menu position. `top` sits it below the flower bud and above the attendee strip. */
#hex-menu {
  right: auto;
  left: 8px;                                           /* same left edge as the flower bud */
  /* Directly UNDER the bud: bud top = safe-inset + 8, bud height = --y-ctrl-w, + an 8px gap.
     Clear of the attendee reel at the bottom; still fully draggable (inline styles win). */
  top: calc(env(safe-area-inset-top, 0px) + 8px + var(--y-ctrl-w) + 8px);
  bottom: auto;
  transform: none;
}
/* Swipe-to-switch-sides (R-C5): when the UI is flipped to the RIGHT, the control menu hugs the
   right edge (same right edge as the flower bud). The flower itself is repositioned in JS. */
html.y-side-right #hex-menu {
  left: auto;
  right: 8px;
}

/* The corner icons the flower now contains are hidden — their functions live in the petals.
   The buttons still EXIST in the DOM (the flower petals click() them), they are just not
   shown as a separate stack. */
.notif-settings-btn,
.theme-btn {
  display: none !important;
}

/* Leftover right-side corner buttons (fit / background / hide / screen-view) are now petals. */
.corner-button.toggle-fit,
#bg-change-btn, .corner-button.bg-button,
.corner-button.hide-button,
.corner-button.screen-view-toggle {
  display: none !important;
}

/* #3: the control-menu BOX is exactly the settings-bud width (--y-ctrl-w) on every device.
   box-sizing:border-box so the glass frame + hairline border are included in that width; the
   buttons fill the inner width. Sizing only — position is handled above and by the drag. */
#hex-menu .hex-cluster {
  width: var(--y-ctrl-w);
  box-sizing: border-box;
  padding: 3px 0;                     /* vertical breathing room; 0 horizontal = full-width buttons */
}
#hex-menu .hex-btn {
  width: calc(var(--y-ctrl-w) - 2px);  /* fills the box inside its 1px border; stays >= 44px touch */
  height: calc(var(--y-ctrl-w) - 2px);
}
/* The collapsed cluster stays square at the bud width too. */
#hex-menu.collapsed .hex-cluster { width: var(--y-ctrl-w) !important; height: var(--y-ctrl-w) !important; }

/* Landscape / short viewports: a vertical 8-button stack is TALLER than a landscape phone, so it
   was cropped and collided with the settings bud. Switch to a compact 2-column pad that fits the
   height (no scroll, no overlap). The #3 single-column width-match is a PORTRAIT rule; in landscape
   fitting the controls wins. A max-height + hidden scroll is the safety net for very short screens. */
@media (max-height: 600px) and (orientation: landscape) {
  #hex-menu:not(.collapsed) .hex-cluster {
    display: grid;
    grid-template-columns: repeat(2, var(--y-ctrl-w));
    grid-auto-rows: var(--y-ctrl-w);
    gap: 4px;
    width: auto;
    box-sizing: content-box;
    max-height: calc(var(--app-h, 100dvh) - env(safe-area-inset-top, 0px) - var(--y-ctrl-w) - 26px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
  }
  #hex-menu:not(.collapsed) .hex-cluster::-webkit-scrollbar { display: none; }
}

/* When the flower's Hide pedal is active, everything folds away to just the bud. */
html.ui-hidden #hex-menu,
html.ui-hidden #rec-indicator { display: none !important; }