/* ---------- slash menu ---------- */

#slash, #suggest {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  z-index: 5;
}
#slash { overflow-y: auto; overscroll-behavior: contain; } /* max-height (four rows) is set from app.js */
/* While centered, open downward so the menu never covers the title. */
#app:not(.active) #slash, #app:not(.active) #suggest { top: calc(100% + 8px); bottom: auto; }
#suggest li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 9px;
  cursor: pointer;
}
#suggest li.sel { background: var(--surface-2); }
#suggest .ico { flex: none; width: 16px; text-align: center; color: var(--muted); font-size: 13px; }
#suggest .txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
#suggest .txt b { color: var(--fg); font-weight: 600; }
#suggest .tag { flex: none; font-size: 12px; color: var(--accent); }
#suggest .hint { flex: none; font-size: 12px; color: var(--muted); opacity: 0; }
#suggest li.sel .hint { opacity: 0.8; }
#slash li, .list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 9px;
  cursor: pointer;
}
#slash li .name { font-family: var(--mono); font-size: 14px; min-width: 76px; flex: none; white-space: nowrap; }
#slash li .desc, .list li .detail { color: var(--muted); font-size: 13px; }
#slash li.sel, .list li.sel { background: var(--surface-2); }

/* ---------- command menu (hamburger button left of the composer) ---------- */

#menu-btn {
  width: 36px;
  height: 36px;
  flex: none;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
#menu-btn:hover, #menu-btn[aria-expanded="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* Pinned to the top, so it stays centred on the first line (6px padding + 24px line = 36px) as the message grows. */
#menu-btn { margin-left: -10px; align-self: flex-start; }
#menu-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#cmdmenu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  max-height: min(60vh, 520px); /* app.js fits it to the room available */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  z-index: 5;
}
#cmdmenu[hidden] { display: none; }
#app:not(.active) #cmdmenu { top: calc(100% + 8px); bottom: auto; }
#cmdmenu .group {
  padding: 10px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: default;
}
#cmdmenu li:not(.group) {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 6px 12px;
  border-radius: 9px;
  cursor: pointer;
}
#cmdmenu li:not(.group):hover, #cmdmenu li.sel { background: var(--surface-2); }
#cmdmenu li:not(.group) { flex-wrap: wrap; gap: 0 12px; }
/* Hamburger menu: seven rows (a command-menu row each), always unfolding upward.
   Two rows of recent files, a rule, then my last apps | latest public apps in three columns over five rows. */
#panelmenu {
  --row: 34.6px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  z-index: 5;
}
#panelmenu[hidden] { display: none; }
/* Both menus: opening, a menu rises out of the composer and unrolls away from it, from the hamburger's corner;
   closing, it settles back and fades. Menu.js hides it once the closing animation ends. */
#panelmenu, #cmdmenu { transform-origin: 22px 100%; animation: panel-in 320ms cubic-bezier(0.16, 1, 0.3, 1); }
#panelmenu.closing, #cmdmenu.closing { animation: panel-out 170ms cubic-bezier(0.4, 0, 1, 1) forwards; pointer-events: none; }
/* On the start screen the / menu opens below the composer, so it unrolls downward. */
#app:not(.active) #cmdmenu { transform-origin: 22px 0; animation-name: panel-in-down; }
#app:not(.active) #cmdmenu.closing { animation-name: panel-out-down; }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); clip-path: inset(calc(100% - 24px) -32px -32px -32px round 14px); }
  60% { opacity: 1; }
  to { opacity: 1; transform: none; clip-path: inset(-32px -32px -32px -32px round 14px); }
}
@keyframes panel-out {
  to { opacity: 0; transform: translateY(8px) scale(0.98); }
}
@keyframes panel-in-down {
  from { opacity: 0; transform: translateY(-10px) scale(0.97); clip-path: inset(-32px -32px calc(100% - 24px) -32px round 14px); }
  60% { opacity: 1; }
  to { opacity: 1; transform: none; clip-path: inset(-32px -32px -32px -32px round 14px); }
}
@keyframes panel-out-down {
  to { opacity: 0; transform: translateY(-8px) scale(0.98); }
}
@media (prefers-reduced-motion: reduce) {
  #panelmenu, #cmdmenu, #app:not(.active) #cmdmenu { animation: panel-fade 120ms ease-out; }
  #panelmenu.closing, #cmdmenu.closing, #app:not(.active) #cmdmenu.closing { animation: panel-fade 120ms ease-in reverse forwards; }
}
@keyframes panel-fade { from { opacity: 0; } }
#panelmenu .pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: var(--row); }
/* The right padding keeps the last file clear of the section's "more…" link. */
#panelmenu .pfiles { padding-left: 44px; padding-right: 64px; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: calc(3 * var(--row)); box-sizing: border-box; height: calc(3 * var(--row)); transition: height 300ms cubic-bezier(0.16, 1, 0.3, 1); }
/* Unfolded by its "more…", the section grows to twice its height and scrolls through every file and folder;
   the top padding keeps the first row clear of the header (which names the folder). */
#panelmenu .pfiles.open { height: calc(6 * var(--row)); padding-top: 14px; padding-right: 44px; grid-template-rows: none; grid-auto-rows: calc(3 * var(--row)); align-content: start; overflow-y: auto; overscroll-behavior: contain; }
@media (prefers-reduced-motion: reduce) {
  #panelmenu .pfiles { transition: none; }
}
/* Six apps in 3x2, centred in the five rows each half spans, between the header and the "Open…" link under them. */
#panelmenu .papps { grid-template-columns: repeat(3, 88px); grid-auto-rows: 62px; height: calc(6.3 * var(--row)); box-sizing: border-box; padding-top: 24px; padding-bottom: 28px; align-content: center; justify-content: center; }
#panelmenu .papps .ptile { height: 48px; }
/* Four apps per side in 2x2, named under their pictures and spread out. */
#panelmenu .pgallery { grid-template-columns: repeat(2, 110px); grid-auto-rows: 79px; column-gap: 24px; }
#panelmenu .pitem {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  border-radius: 9px;
  color: var(--muted);
  cursor: pointer;
}
#panelmenu .pitem svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#panelmenu .pfiles .pitem { flex-direction: column; gap: 4px; padding-top: 12px; }
#panelmenu .pgallery .pitem { flex-direction: column; gap: 5px; }
#panelmenu .pfiles .pitem svg { width: 42px; height: 42px; }
#panelmenu .pname { max-width: 100%; font-size: 12px; line-height: 1; color: var(--muted); white-space: nowrap; pointer-events: none; }
#panelmenu .ptile { height: 26px; aspect-ratio: 16 / 10; border-radius: 5px; box-shadow: 0 0 0 1px var(--border); }
/* Only the icon or screenshot itself is clickable, and it alone gets the hover highlight. */
#panelmenu .pitem { pointer-events: none; cursor: default; }
#panelmenu .pitem > * { pointer-events: auto; cursor: pointer; }
#panelmenu .pitem svg { border-radius: 6px; }
#panelmenu .pitem svg:hover { background: var(--surface-2); box-shadow: 0 0 0 4px var(--surface-2); }
#panelmenu .ptile:hover { box-shadow: 0 0 0 1px var(--border), 0 0 0 4px var(--surface-2); }
#panelmenu .pempty { grid-column: 1 / -1; align-self: center; padding: 0 12px; color: var(--muted); font-size: 13px; text-align: center; }
#panelmenu .psec { position: relative; }
#panelmenu .phead {
  position: absolute;
  top: 6px;
  left: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}
#panelmenu .pmore {
  position: absolute;
  right: 12px;
  bottom: 6px;
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
}
#panelmenu .pmore:hover { color: var(--accent); text-decoration: underline; }
/* Unfolded, the Files link ("Open files…") keeps clear of the list's scrollbar and shows only at the list's end. */
#panelmenu .pfiles.open { padding-bottom: 24px; }
#panelmenu .pfiles.open ~ .pmore { right: 24px; transition: opacity 150ms ease, visibility 150ms; }
#panelmenu .pfiles.open ~ .pmore:not(.shown) { opacity: 0; visibility: hidden; pointer-events: none; }
#panelmenu .prule { height: 1px; margin: 0 6px; background: var(--border); }
#panelmenu .psplit { display: grid; grid-template-columns: 1fr 1px 1fr; }
#panelmenu .pvrule { background: var(--border); margin: 6px 0; }
#cmdmenu .name { font-family: var(--mono); font-size: 14px; min-width: 130px; flex: none; }
#cmdmenu .desc { color: var(--muted); font-size: 13px; flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }