/* The ··· and its menu, and the @ menu ------------------------------------ */

/* The ··· beside the game's name, and the menu under it. Everything you can
   do to the whole game is in here; the bar itself holds only state. */
.more { position: relative; flex: 0 0 auto; }
/* Not `.dots`: that is the thinking indicator's class, and its animated
   ::after put a fourth dot on the button. */
.bar .more-dots { font-weight: 700; letter-spacing: 0.1em; }
.bar .more-dots.on { color: var(--text); background: var(--hover); }
/* Both menus are fixed and placed from a rectangle on screen — the ··· under
   its button, the @ menu over the composer's box — because the pane they sit
   in moves, and an absolutely placed menu would be clipped by it. */
.menu, .at-menu {
  position: fixed;
  z-index: 60;
  flex-direction: column;
  padding: 5px;
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 34px oklch(0 0 0 / 0.5);
}
.menu {
  /* Placed by placeMenu (main.js) once it is on screen; until then it is
     nowhere rather than at the corner of the window. */
  top: 0;
  right: 0;
  visibility: hidden;
  min-width: 210px;
  display: flex;
}
.menu.placed { visibility: visible; }
.menu-item {
  justify-content: flex-start;
  text-align: left;
  white-space: nowrap;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
}
.menu-item:hover:not(:disabled) { background: var(--hover); color: var(--text); }
/* The one on screen, in a list of places or settings to pick from — the phone's
   modes, the preview's speeds — lit the way a pill is when it is the one. */
.menu-item.on {
  color: #fff;
  background: color-mix(in oklab, var(--look-primary) 32%, transparent);
}
.menu-item.danger { color: var(--danger); }
.menu-item.danger:hover:not(:disabled) { background: color-mix(in oklab, var(--danger) 22%, transparent); }

/* A ··· on a row sits at its right-hand end and opens its menu under
   itself; the row lights up and opens on a click anywhere else in it. */
.step > .more, .file > .more, .strip-row > .more, .commit .more { margin-left: auto; }
.strip-row { position: relative; }
.strip-row > .more { position: absolute; right: 4px; top: 3px; }
.file > .more { margin-left: 4px; }
.more-dots.tiny { padding: 1px 6px; font-size: 13px; }

/* Everybody an @ could reach, over the composer while a name is being typed
   (chats.js). Hidden until there is something to show, so it is never an
   empty card at the corner of the window. */
.at-menu { display: none; min-width: 240px; }
.at-menu.on { display: flex; }
.at-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  min-width: 0;
}
/* Lit by the arrows as well as the pointer, so both ways through the list look
   the same. */
.at-row:hover, .at-row.on { background: var(--hover); }
.at-row .at-name { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
/* Pink is a helper, everywhere in the studio. */
.at-row .at-name.helper { color: var(--agent); }
.at-row .at-what {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  color: var(--muted);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}