/**
 * EssayCraft Pro — The menu button, in all three panels
 * Copyright (c) 2026 Blade Research Inc. All rights reserved.
 * Proprietary software. Unauthorized copying, distribution, or use is prohibited.
 *
 * ONE button, THREE identities. The admin's Control Room, the editor's Workroom
 * and the client's dashboard each get the same shape and the same motion, in
 * their own colour, with their own name under it.
 *
 * WHY A LABEL AT ALL
 * A bare ☰ is a guess. It is the only way back to navigation on a phone, it sits
 * in the corner of a full-screen app where there is no other chrome to explain
 * it, and it looks identical in all three panels — so nothing tells you which
 * product you are holding. "ADMIN MENU" under the icon costs 8 pixels of height
 * and removes the guess entirely.
 *
 * WHAT THIS FILE DOES NOT DO
 * It never sets `display`. Both panels hide this button above 900px, where the
 * rail is permanently on screen and a menu button would be a lie. That rule
 * lives in app.css and editor.css and is deliberately left alone.
 *
 * All motion is transform/opacity only — no layout thrash — and all of it is
 * switched off under prefers-reduced-motion.
 */

/* ══════════════════════ THE BUTTON ══════════════════════ */
.ecp-mb {
  /* display is owned by the host stylesheet — see the note above */
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px;

  width: auto !important;
  min-width: 54px;
  height: 46px !important;
  padding: 5px 9px !important;

  border: none !important;
  border-radius: 13px !important;
  /* The host stylesheets paint their own flat background on this button
     (--c-bg3 in the client app, --wr-soft in the Workroom). Clear it, or it
     sits behind the gradient and bleeds at the rounded corners. */
  background: transparent !important;
  font-size: 0 !important;              /* kills the leftover ☰ glyph metrics */
  cursor: pointer;
  font-family: inherit;
  color: #fff !important;

  position: relative;
  overflow: hidden;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1),
              box-shadow .22s ease,
              filter .22s ease;
}

/* The colour wash sits in a pseudo-element so the open state can cross-fade
   to a second gradient instead of hard-swapping backgrounds. */
.ecp-mb::before,
.ecp-mb::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  z-index: -1;
  transition: opacity .3s ease;
}
.ecp-mb::before { background: linear-gradient(135deg, var(--mb-a), var(--mb-b)); opacity: 1; }
.ecp-mb::after  { background: linear-gradient(135deg, var(--mb-b), var(--mb-a)); opacity: 0; }
.ecp-mb.is-open::before { opacity: 0; }
.ecp-mb.is-open::after  { opacity: 1; }

.ecp-mb:hover  { transform: translateY(-1.5px); box-shadow: 0 6px 18px var(--mb-glow); }
.ecp-mb:active { transform: translateY(0) scale(.94); transition-duration: .09s; }
.ecp-mb:focus-visible { outline: 2.5px solid var(--mb-b); outline-offset: 3px; }

/* ══════════════════════ ROLE COLOURS ══════════════════════
   Change a panel's colour by changing two values. Nothing else references them. */
.ecp-mb-admin  { --mb-a: #8a6410; --mb-b: #d9a12c; --mb-glow: rgba(201,146,43,.45); }
.ecp-mb-editor { --mb-a: #0b6165; --mb-b: #16b8bd; --mb-glow: rgba(20,169,174,.45); }
.ecp-mb-client { --mb-a: #3b3aa8; --mb-b: #7c6cf0; --mb-glow: rgba(108,99,240,.45); }

.ecp-mb { box-shadow: 0 3px 10px var(--mb-glow); }

/* ══════════════════════ THE ICON ══════════════════════
   Three real bars rather than a ☰ glyph, because a glyph cannot become an X. */
.ecp-mb-ic {
  position: relative;
  width: 19px; height: 13px;
  flex: 0 0 auto;
  pointer-events: none;
}
.ecp-mb-ic i {
  position: absolute; left: 0;
  display: block; width: 100%; height: 2px;
  background: #fff; border-radius: 2px;
  transform-origin: 50% 50%;
  transition: transform .34s cubic-bezier(.62,.01,.31,1.34),
              opacity .18s ease,
              width .28s ease;
}
.ecp-mb-ic i:nth-child(1) { top: 0; }
.ecp-mb-ic i:nth-child(2) { top: 5.5px; }
.ecp-mb-ic i:nth-child(3) { top: 11px; }

/* Idle flourish: the bars fan out very slightly on hover, staggered, so the
   button feels alive before you have committed to pressing it. */
.ecp-mb:hover .ecp-mb-ic i:nth-child(1) { transform: translateX(1.5px); }
.ecp-mb:hover .ecp-mb-ic i:nth-child(2) { transform: translateX(-1.5px); transition-delay: .04s; }
.ecp-mb:hover .ecp-mb-ic i:nth-child(3) { transform: translateX(1.5px);  transition-delay: .08s; }

/* Open: top and bottom bars swing into an X, the middle one gets out of the way
   sideways rather than just fading, which reads as one object folding shut. */
.ecp-mb.is-open .ecp-mb-ic i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.ecp-mb.is-open .ecp-mb-ic i:nth-child(2) { transform: translateX(-14px); opacity: 0; transition-delay: 0s; }
.ecp-mb.is-open .ecp-mb-ic i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ══════════════════════ THE LABEL ══════════════════════ */
.ecp-mb-lbl {
  font-size: 7.6px !important;   /* the button itself is font-size:0 */
  font-weight: 900;
  letter-spacing: .55px;
  text-transform: uppercase;
  line-height: 1;
  color: #fff;
  opacity: .92;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .2s ease, transform .28s cubic-bezier(.34,1.56,.64,1);
}
.ecp-mb:hover .ecp-mb-lbl { opacity: 1; transform: translateY(.5px); }
.ecp-mb.is-open .ecp-mb-lbl { opacity: 1; }

/* ══════════════════════ RIPPLE ══════════════════════
   Pressed feedback that starts where the finger landed. Purely decorative,
   removed by JS the moment it finishes so nothing accumulates in the DOM. */
.ecp-mb-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: -1;
  animation: ecp-mb-ripple .55s cubic-bezier(.2,.6,.3,1) forwards;
}
@keyframes ecp-mb-ripple {
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ══════════════════════ FIRST-RUN HINT ══════════════════════
   A slow halo, three times, the first time this browser ever sees the button.
   It teaches where navigation lives, then never runs again — an animation that
   plays on every visit stops being information and becomes noise. */
.ecp-mb.ecp-mb-hint::after { animation: ecp-mb-halo 2.1s ease-out 3; }
@keyframes ecp-mb-halo {
  0%   { opacity: 0; box-shadow: 0 0 0 0 var(--mb-glow); }
  35%  { opacity: .35; box-shadow: 0 0 0 9px rgba(255,255,255,0); }
  100% { opacity: 0; box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* ══════════════════════ TIGHT SCREENS ══════════════════════ */
@media (max-width: 360px) {
  .ecp-mb { min-width: 46px; padding: 5px 6px !important; }
  .ecp-mb-lbl { font-size: 7px; letter-spacing: .3px; }
}

/* ══════════════════════ RESPECT THE SETTING ══════════════════════
   Someone who has asked their operating system for less motion has usually
   asked for a reason. The button still works and still turns into an X — it
   just stops performing. */
@media (prefers-reduced-motion: reduce) {
  .ecp-mb,
  .ecp-mb::before,
  .ecp-mb::after,
  .ecp-mb-ic i,
  .ecp-mb-lbl { transition-duration: .01ms !important; }
  .ecp-mb:hover { transform: none; }
  .ecp-mb:hover .ecp-mb-ic i { transform: none !important; }
  .ecp-mb.is-open .ecp-mb-ic i:nth-child(1) { transform: translateY(5.5px) rotate(45deg) !important; }
  .ecp-mb.is-open .ecp-mb-ic i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg) !important; }
  .ecp-mb.ecp-mb-hint::after { animation: none; }
  .ecp-mb-ripple { display: none; }
}