/*
 * 9.12c — the ⋮ menu as a side panel (owner 2026-09-25: "not the whole screen,
 * a sidebar").
 *
 * Only the menu LIST comes in, from the side the ⋮ button sits on — the inline
 * end: the right in English or Bengali, the left in Arabic or Urdu, because
 * flex-end and the logical radii follow the page's direction. Every page the
 * menu opens is still a full screen (9.12b), and coming back from one lands in
 * this panel again. The chats stay in view behind it, dimmed; a tap there, the
 * ✕, Escape or the phone's Back all close it through the same history step.
 *
 * Presentation only: the rows, their words and what they do are 9.12's.
 */

.sheet.me-side{padding:0;flex-direction:row;align-items:stretch;justify-content:flex-end;background:rgba(15,23,42,.42);animation:me-side-dim .22s ease both}

.card.me-side{position:relative;width:min(340px,86vw);max-width:86vw;height:auto;max-height:none;padding:0;
  border-radius:0;border-start-start-radius:22px;border-end-start-radius:22px;background:var(--sur);
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:-18px 0 48px -20px rgba(15,23,42,.5);animation:me-side-in .26s cubic-bezier(.2,.8,.2,1) both}
html[dir="rtl"] .card.me-side{box-shadow:18px 0 48px -20px rgba(15,23,42,.5);animation-name:me-side-in-rtl}

/* back from one of its pages: the panel is simply there again, it does not
   fly in a second time */
.sheet.me-side.me-side-back,.card.me-side.me-side-back{animation:none}

.card.me-side .me-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:18px 14px 24px}
.card.me-side .me-body h2{font-size:20px;margin:4px 0 12px;margin-inline-end:52px}

/* the header's back arrow becomes the panel's close button, top end corner */
.card.me-side .me-nav{position:absolute;top:12px;inset-inline-end:12px;height:auto;padding:0;border:none;background:none;z-index:3}
.card.me-side .me-nav .bk{position:relative;width:38px;height:38px;padding:0;justify-content:center;border-radius:12px;background:var(--sur2);color:var(--ink2)}
.card.me-side .me-nav .bk:hover{background:var(--line);color:var(--ink)}
.card.me-side .me-nav .bk svg,.card.me-side .me-nav .bk span{display:none}
.card.me-side .me-nav .bk::before,.card.me-side .me-nav .bk::after{content:'';position:absolute;left:50%;top:50%;width:16px;height:2px;border-radius:2px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.card.me-side .me-nav .bk::after{transform:translate(-50%,-50%) rotate(-45deg)}

@keyframes me-side-in{from{transform:translateX(100%)}to{transform:none}}
@keyframes me-side-in-rtl{from{transform:translateX(-100%)}to{transform:none}}
@keyframes me-side-dim{from{background:rgba(15,23,42,0)}to{background:rgba(15,23,42,.42)}}
@media (prefers-reduced-motion:reduce){.sheet.me-side,.card.me-side{animation:none}}