/* ═══════════════════════════════════════════════════════════════════════════
   EDEN PRESENTER FAB + ANNOTATION LAYER
   A lacquered warm-beige shortcut button (bottom-right, every app screen)
   that opens a two-action speed-dial — ANNOTATE and HOME — and a fullscreen
   ink canvas for the sales presenter to draw over any view.
   Material language borrowed from the home destination orbs (finish-kit /
   home-hero): convex gloss, beige lacquer body, machined bevels, olive hairline.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────── root anchor ─────────────── */
.efab-root{
  position:fixed;right:22px;bottom:22px;z-index:38;
  display:flex;flex-direction:column;align-items:flex-end;gap:14px;
  pointer-events:none;
  opacity:1;visibility:visible;
  transition:opacity .8s var(--ease),visibility .8s var(--ease),bottom .45s var(--ease);
}
/* (retired) The villa view used to lift the FAB to bottom:236px to dodge its
   action row. That moved the button between views and still overlapped at other
   viewports; eden-scale.css now pins one position everywhere and the villa
   panel reserves --fab-gutter instead. */
.efab-root>*{pointer-events:auto}
/* never on the intro screen */
.app.is-intro .efab-root{opacity:0;visibility:hidden;pointer-events:none}
/* hidden while the ink layer is up — the tool rail takes its corner */
.efab-root.is-annotating{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s var(--ease),visibility .25s var(--ease)}

/* ─────────────── the lacquered button ─────────────── */
.efab-main{
  position:relative;width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;
  background:
    /* convex gloss — light caught on the lacquer dome */
    radial-gradient(ellipse 68% 42% at 50% 15%,
      rgba(255,255,255,.32), rgba(255,255,255,.06) 58%, transparent 74%),
    /* floor bounce at the base of the dome */
    radial-gradient(ellipse 70% 30% at 50% 108%, rgba(228,201,176,.32), transparent 68%),
    /* beige lacquer body */
    linear-gradient(180deg,var(--eden-beige-3) 0%,var(--eden-beige-2) 52%,var(--eden-beige-1) 100%);
  border:1px solid var(--e-line-strong);
  box-shadow:
    0 0 0 1px rgba(109,96,61,.35),           /* olive hairline ring      */
    inset 0 2px 2px rgba(255,255,255,.35),   /* machined top bevel       */
    inset 0 -2px 3px rgba(63,89,58,.13),     /* under-bevel              */
    inset 0 -14px 22px rgba(63,89,58,.10),   /* body occlusion           */
    0 2px 0 rgba(63,89,58,.10),              /* hard contact edge        */
    0 12px 22px rgba(63,89,58,.16),          /* near elevation           */
    0 28px 50px rgba(63,89,58,.13);          /* far elevation            */
  transition:box-shadow .18s var(--ease);
}
/* inner jewellery hairline */
.efab-main::before{
  content:"";position:absolute;inset:4px;border-radius:50%;
  border:1px solid rgba(109,96,61,.28);pointer-events:none;
}
/* idle glow breath */
.efab-main::after{
  content:"";position:absolute;inset:-9px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(109,96,61,.22),rgba(109,96,61,.05) 55%,transparent 72%);
  opacity:.2;animation:efabBreath 4.6s ease-in-out infinite alternate;
  z-index:-1;
}
@keyframes efabBreath{from{opacity:.14;transform:scale(.94)}to{opacity:.44;transform:scale(1.05)}}
/* the press: the button physically depresses */
.efab-main:active{
  box-shadow:
    0 0 0 1px rgba(109,96,61,.30),
    inset 0 3px 8px rgba(63,89,58,.14),
    inset 0 1px 2px rgba(63,89,58,.16),
    inset 0 -10px 18px rgba(63,89,58,.10),
    0 1px 0 rgba(63,89,58,.10),
    0 6px 12px rgba(63,89,58,.14);
}
/* the Eden Tree of Life, plain (client 2026-08-03: no diamond frame) */
.efab-gem{
  width:26px;height:26px;display:grid;place-items:center;
  transition:transform .45s var(--ease);
}
.efab-tree{
  width:24px;height:24px;object-fit:contain;
  /* bronze PNG re-tinted to Eden green (#3f593a) so it reads on the light
     beige lacquer — chain solved numerically, lands on rgb(62,88,57) */
  filter:brightness(0) saturate(100%) invert(8%) sepia(10%) saturate(5584%) hue-rotate(72deg) brightness(200%) contrast(56%) drop-shadow(0 1px 3px rgba(63,89,58,.22));
  -webkit-user-drag:none;user-select:none;pointer-events:none;
}
.efab-root.is-open .efab-gem{transform:scale(.86)}

/* ─────────────── speed-dial ─────────────── */
.efab-dial{display:flex;flex-direction:column;align-items:flex-end;gap:13px}
/* closed dial must not eat taps — its invisible box was blocking controls
   underneath (e.g. the compare level tabs at 1280×800) */
.efab-root:not(.is-open) .efab-dial{pointer-events:none}
.efab-item{
  display:flex;align-items:center;gap:12px;
  opacity:0;transform:translateY(16px) scale(.72);pointer-events:none;
  transition:opacity .32s var(--ease),transform .38s var(--ease);
}
/* stagger: nearest rises first, the one above follows */
.efab-root.is-open .efab-item{opacity:1;transform:none;pointer-events:auto}
.efab-root.is-open .efab-item:nth-last-child(1){transition-delay:.02s}
.efab-root.is-open .efab-item:nth-last-child(2){transition-delay:.08s}

.efab-chip{
  padding:6px 12px;border:1px solid var(--e-glass-line);
  background:linear-gradient(145deg,rgba(255,242,235,.90),rgba(254,230,211,.86));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:var(--e-ink-strong);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  white-space:nowrap;box-shadow:0 0 0 1px rgba(63,89,58,.08),0 10px 26px rgba(63,89,58,.13);
  pointer-events:none;
}
.efab-mini{
  position:relative;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;color:var(--e-ink-strong);
  background:
    radial-gradient(ellipse 68% 42% at 50% 15%,
      rgba(255,255,255,.28), rgba(255,255,255,.06) 58%, transparent 74%),
    linear-gradient(180deg,var(--eden-beige-3) 0%,var(--eden-beige-2) 52%,var(--eden-beige-1) 100%);
  border:1px solid var(--e-line-strong);
  box-shadow:
    0 0 0 1px rgba(109,96,61,.30),
    inset 0 2px 2px rgba(255,255,255,.32),
    inset 0 -2px 3px rgba(63,89,58,.13),
    inset 0 -11px 17px rgba(63,89,58,.10),
    0 2px 0 rgba(63,89,58,.10),
    0 10px 20px rgba(63,89,58,.15);
  transition:box-shadow .18s var(--ease);
}
.efab-mini:active{
  box-shadow:
    0 0 0 1px rgba(109,96,61,.26),
    inset 0 3px 7px rgba(63,89,58,.14),
    inset 0 -8px 14px rgba(63,89,58,.09),
    0 1px 0 rgba(63,89,58,.09),
    0 5px 10px rgba(63,89,58,.13);
}
.efab-mini svg{width:19px;height:19px;filter:drop-shadow(0 1px 3px rgba(63,89,58,.18))}

/* ─────────────── annotation layer ─────────────── */
.anno-layer{
  position:fixed;inset:0;z-index:60;
  background:rgba(63,89,58,.10);
}
.anno-layer[hidden]{display:none}
.anno-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  touch-action:none;cursor:crosshair;display:block;
}

/* slim vertical tool rail — bottom-right, over the FAB's corner */
.anno-rail{
  position:absolute;right:22px;bottom:22px;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:11px 8px;
  background:linear-gradient(165deg,rgba(255,242,235,.92),rgba(254,230,211,.88));
  border:1px solid var(--e-glass-line);
  box-shadow:0 0 0 1px rgba(63,89,58,.09),0 24px 60px rgba(63,89,58,.16),inset 0 1px 0 rgba(255,255,255,.5);
  backdrop-filter:blur(18px) saturate(115%);-webkit-backdrop-filter:blur(18px) saturate(115%);
}
.anno-rail::before{
  content:"Ink";display:block;margin-bottom:1px;
  font:400 10px/1 var(--serif);letter-spacing:.3em;text-transform:uppercase;
  text-indent:.3em;color:var(--e-ink-strong);opacity:.85;
}
.anno-tool{
  position:relative;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;color:var(--e-ink-strong);
  background:linear-gradient(180deg,var(--eden-beige-2),var(--eden-beige-1));
  border:1px solid var(--e-line);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 6px 14px rgba(63,89,58,.11);
  transition:box-shadow .18s var(--ease),border-color .18s var(--ease);
}
.anno-tool:active{box-shadow:inset 0 3px 8px rgba(63,89,58,.14),0 2px 6px rgba(63,89,58,.10)}
.anno-tool svg{width:18px;height:18px}
.anno-rail hr{
  width:26px;height:1px;border:0;margin:2px 0;
  background:var(--e-line);
}
/* colour wells */
.anno-color i{
  display:block;width:17px;height:17px;border-radius:50%;
  background:var(--anno-ink);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.4),inset 0 -2px 3px rgba(63,89,58,.11),0 1px 3px rgba(63,89,58,.13);
}
.anno-color[aria-pressed="true"]{
  border-color:var(--eden-olive);
  box-shadow:0 0 0 1px rgba(109,96,61,.5),inset 0 1px 1px rgba(255,255,255,.5),0 6px 14px rgba(63,89,58,.11);
}
/* stroke weight toggle — the dot shows the nib in use */
.anno-weight i{
  display:block;width:7px;height:7px;border-radius:50%;
  background:var(--e-ink-strong);box-shadow:0 1px 3px rgba(63,89,58,.16);
  transition:width .2s var(--ease),height .2s var(--ease);
}
.anno-weight[aria-pressed="true"] i{width:13px;height:13px}

/* ─────────────── reduced motion ─────────────── */
@media (prefers-reduced-motion:reduce){
  .efab-main::after{animation:none;opacity:.22}
  .efab-item{transition-duration:.01ms!important;transition-delay:0s!important}
  .efab-gem{transition:none}
  .efab-root{transition:none}
}