/* Saved states and the vote to clear (saves.js, vote.js). Loaded after room.css. */

/* The vote banner: under the top bar, above the board, for everyone in the room. */
.vote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 16px; background: var(--panel); box-shadow: inset 0 -1px 0 var(--line); color: var(--ink); font: 400 15px var(--sans); }
.vote[hidden] { display: none; }
.vote-text { font-weight: 600; }
.vote-count { font: 400 13px var(--mono); color: var(--ink-2); }
.vote-acts { display: inline-flex; gap: 14px; margin-left: auto; }
.vote-acts[hidden] { display: none; }
.vote.done { color: var(--ink-2); }
.vote.done .vote-text { font-weight: 500; }

/* The saved board on screen: it takes the stage's place, and the live board, its tools and its chat are put away. */
.room.viewing-save #board, .room.viewing-save #stage > .zoom, .room.viewing-save #stage > .tools,
.room.viewing-save #stage > .chat, .room.viewing-save #chat-toggle { display: none; }
.saved-view { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; background: var(--ground); }
.saved-view[hidden] { display: none; }
.saved-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 16px; background: var(--warn-soft); color: var(--warn-ink); font: 400 14px var(--mono); }
.saved-bar .btn { color: var(--warn-ink); }
.saved-bar .btn.primary { color: var(--warn-ink); border-bottom-color: currentColor; }
.saved-bar #saved-chat-btn { margin-left: auto; }
.saved-main { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.saved-view .board.saved-board { position: relative; inset: auto; flex: 1 1 auto; min-width: 0; height: auto; }
.saved-board .item { cursor: default; }
.saved-board .item[data-url], .saved-board .item[data-src] { cursor: pointer; }
.saved-view .chat.saved-chat { position: relative; top: auto; right: auto; bottom: auto; z-index: auto; width: 340px; flex: none; box-shadow: -8px 0 24px rgba(0, 0, 0, .12); }
.saved-view .chat.saved-chat[hidden] { display: none; }
.saved-zoom { z-index: 6; }

/* The picture, big, over everything. */
.picture-big { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 56px 16px 16px; background: rgba(0, 0, 0, .92); }
.picture-big[hidden] { display: none; }
.picture-big img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.picture-big-close { position: absolute; top: 12px; right: 16px; color: #fff; box-shadow: inset 0 -2px 0 #fff; }
.picture-big-close:hover { color: #fff; }

/* The list of saved states, and the note about the limit. */
.saves-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
.save-row { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; background: var(--ground); }
.save-main { min-width: 0; flex: 1 1 180px; }
.save-name { display: block; font: 600 15px/1.3 var(--sans); overflow-wrap: anywhere; }
.save-meta { display: block; font: 400 12px/1.4 var(--mono); color: var(--ink-3); }
.save-acts { display: flex; gap: 12px; flex-wrap: wrap; }
.save-note { font: 400 13px/1.4 var(--mono); color: var(--warn-ink); }
.save-note[hidden] { display: none; }

@media (max-width: 700px) {
  .vote { padding: 8px 10px; font-size: 14px; }
  .vote-acts { margin-left: 0; }
  .saved-view .chat.saved-chat { position: absolute; top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 58vh; border-radius: 16px 16px 0 0; }
  .saved-zoom { display: none; }
  .saved-bar { padding: 8px 10px; }
}