/* ============================================================
 * 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.
 * ============================================================ */

.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;
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  border: 1px solid oklch(100% 0 0 / 0.35);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.4),
    0 6px 18px -6px oklch(20% 0.05 280 / 0.6);
  -webkit-tap-highlight-color: transparent;
  touch-action: none;       /* the whole thing is draggable */
}
/* 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: 46px; height: 46px;
  left: -23px; top: -23px;                    /* 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: colour from --petal-hue, position from --px/--py ─────────────── */
.flower-petal:not(.flower-core) {
  width: 44px; height: 44px;
  left: -22px; top: -22px;
  background: linear-gradient(150deg,
    oklch(68% 0.18 var(--petal-hue)),
    oklch(56% 0.2 var(--petal-hue)));
  /* Collapsed: stacked at the centre, invisible. */
  transform: translate(0, 0) scale(0);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.4s 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)) scale(1);
  opacity: 1;
  pointer-events: auto;
}
/* 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-petal:hover  { filter: brightness(1.1); }
.flower-petal:active { transform: translate(var(--px), var(--py)) scale(0.9); }
.flower-petal:focus-visible { outline: 2px solid #fff; 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 move LEFT ──────────────────────────────────────────────────
   The hex control menu (mic/camera/chat/screen/end/link/fullscreen) defaulted to the RIGHT
   and collided with the corner icons. Those icons are now the flower (top-right by default),
   so the controls take the left edge and the two clusters no longer fight. */
#hex-menu {
  right: auto !important;
  left: 12px !important;
}
@media (max-width: 768px) {
  #hex-menu { left: 8px !important; }
}

/* 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;
}