/* The mode row, and the chat pills --------------------------------------- */

/* The conversations in one game, over the thread. The human-only one wears a
   dashed edge: it is the room where nobody is listening, which is worth
   seeing before you type in it.

   This row is everything about the room rather than the game: the pills, and
   the helpers listening at the right with the + that calls another one in.
   Add chat is in the game's ···. ⚠️ The pills and the chips each scroll
   sideways inside their own box, so a studio's worth of chats and a crowd of
   helpers give way to each other instead of one pushing the other off the
   end. Both need min-width: 0 to be allowed to shrink at all. */
.chat-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  flex: 0 0 auto;
}
.chat-tabs .pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 1px;
}
/* A pill, a room's or a mode's. flex-shrink: 0 and nowrap together: inside a
   scroller a pill keeps its own width and its words on one line, and the row
   scrolls instead of squeezing "Sound effects" into three lines of two
   letters. */
.chat-tab, .modes .mode {
  flex-shrink: 0;
  white-space: nowrap;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--border-soft) 80%, transparent);
  background: none;
  color: var(--muted);
}
/* Something in that room is unread — on Chat, while another mode is up, it is
   the one pill in the row that can be holding something you have not read.
   The mark says so and the words say it too: muted is the studio saying
   "nothing for you in here", and a room with something waiting is not that.
   Before .on and :hover on purpose — the open room and the one under the
   pointer are both being read right now. */
.chat-tab.marked, .modes .mode.marked { color: var(--text); }
.chat-tab:hover:not(:disabled), .modes .mode:hover:not(:disabled) { color: var(--text); background: var(--hover); }
.chat-tab.on, .modes .mode.on { color: #fff; border-color: color-mix(in oklab, var(--look-primary) 70%, transparent); }
/* The chat's own pills sit under the modes, smaller, because a room is not a
   surface. */
.chat-tab { font-size: 12.5px; padding: 5px 11px; }
.chat-tab.on { background: color-mix(in oklab, var(--look-primary) 28%, transparent); }
/* The room where no helper is listening. A dashed edge, not a dot: on a pill
   a dot means one thing — something in there is new — and the dot this room
   used to wear was always on, so it said nothing and looked like unread. */
.chat-tab.quiet-room { border-style: dashed; }
/* The mode row (spec.md §6): one pill per surface the centre can show. */
.modes {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  flex: 0 0 auto;
  overflow-x: auto;
  scrollbar-width: thin;
}
.modes .mode { font-size: 13.5px; padding: 7px 16px; }
.modes .mode.on { background: color-mix(in oklab, var(--look-primary) 32%, transparent); }
.modes .mode .called { margin-left: 6px; }
.modes .mode .unread { margin-left: 6px; }

/* The phone header (spec.md §17): the game's bar, and under it the view
   changer — ‹, the mode you are on and what it is for, ›. The phone's form of
   the pills above, which do not fit across a phone. Shown by narrow.css only;
   it is a grid row of the shell there, so it never scrolls away. */
.phone-header { display: none; flex-direction: column; min-width: 0; background: var(--bg); }
.view-changer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
}
/* A thumb's width each, which is what a cycle pressed over and over needs. */
.view-changer .view-step {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  font-size: 24px;
  line-height: 1;
}
.view-changer .view-step .called, .view-changer .view-step .unread { margin-left: 4px; }
/* The name and the line under it: a button, the whole of the space between
   the arrows, which opens every mode as a list (more() in main.js). The caret
   says it opens; the one on screen in that list wears the pill's own light. */
.view-changer > .more { flex: 1; min-width: 0; }
.view-changer .view-now {
  width: 100%;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.view-changer .view-now.on { background: var(--hover); }
.view-changer .view-name { font-family: var(--ui); font-weight: 700; font-size: 17px; color: var(--text); }
.view-changer .view-name::after { content: '▾'; margin-left: 6px; font-size: 12px; color: var(--muted); }
.view-changer .menu { max-width: calc(100vw - 8px); }
.view-changer .menu-item { white-space: normal; }
.view-changer .menu-sub { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.view-changer .view-what {
  max-width: 100%;
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}