/* ---- which view is showing ---------------------------------------------- */
/* body[data-view] is "lobby" or "room"; before either, only the top bar shows. */

body:not([data-view="room"]) :is(.stage, .toolbar, .brush-menu, .room-bar, .people, .room-only) { display: none; }
body:not([data-view="lobby"]) :is(.lobby, .lobby-only) { display: none; }
body:not([data-view]) :is(.chat-panel, #chatToggle) { display: none; }
body:not(.chat-open) .chat-panel { display: none; }

/* View-only visitors watch: no tools, no drawing cursor. */
body.view-only .toolbar,
body.view-only .brush-menu,
body.view-only .brush-ring { display: none; }
body.view-only canvas { cursor: default; }
body.view-only .stage { padding-bottom: 32px; }

/* Things only the room owner sees. */
body:not(.is-owner) .owner-only { display: none !important; }
body:not(.view-only) .viewers-only { display: none; }

/* The chat sits beside the canvas (or the lobby's rooms) on wide screens:
   the content, toolbar and toasts centre themselves in the space left of it.
   On narrow screens the chat opens over everything instead (see chat.css). */
@media (min-width: 901px) {
  body.chat-open { --side: 352px; }
  body[data-view].chat-open :is(.stage, .lobby) { padding-right: calc(24px + var(--side)); }
  body[data-view].chat-open :is(.toolbar, .toasts) { left: calc(50% - var(--side) / 2); }
  body[data-view].chat-open .toolbar { max-width: calc(100vw - 24px - var(--side)); }
}