/* The clip library, Undo, versions, stop reasons and creators' data controls (v12). Same console look as app.css:
   hairline rules, small square tags, the shared colour tokens. */

/* a toast with one action (Undo, Cancel) */
.toast.act { align-items: center; }
.toast.act .btn { flex: none; height: 26px; padding: 0 10px; font-size: 12.5px; }

/* why a stream stopped, under its monitor */
.monitor .why { color: var(--text-3); font-size: 11.5px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monitor .why.bad { color: var(--t-red); }

/* the versions of a short on its page */
.seg.versions { margin: 0 0 12px; }
.seg.versions button { height: auto; padding: 4px 10px; flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.25; font-weight: 650; }
.seg.versions button span { font-size: 11px; font-weight: 500; color: var(--text-3); }
.seg.versions button.on span { color: var(--text-2); }

/* infinite scroll: the row the next page loads behind */
.more-row { min-height: 28px; padding: 14px 0 4px; text-align: center; color: var(--text-3); font-size: 12.5px; }
.more-row:empty { padding: 0; }
.queue .q.more { display: grid; place-items: center; color: var(--text-2); font-size: 18px; border: 1px dashed var(--rule-2); }

/* account storage against its quota */
.progress.quota { height: 6px; border-radius: 3px; }
.progress.quota.warn i { background: var(--amber); }
.progress.quota.full i { background: var(--red); }
.danger-zone { border-color: rgba(255, 79, 109, .28); }

/* Terms and Privacy at the foot of the sidebar */
.side-foot { display: flex; gap: 12px; padding: 10px 8px 2px; font-size: 11.5px; flex: none; }
.side-foot a { color: var(--text-3); }
.side-foot a:hover { color: var(--text-2); }
@media (max-height: 700px) { .side-foot { padding-top: 6px; } }

/* saving to the creator's computer (devicesync.js, 12.8.13): a small pill while it saves or needs a click, and the
   Settings, Account card's lists */
.devpill { position: fixed; left: 18px; bottom: 18px; z-index: 70; display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 36px));
  padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.4; background: var(--raised); border: 1px solid var(--rule); box-shadow: var(--shadow-pop); }
.devpill > span { min-width: 0; }
.devpill .dim { overflow-wrap: anywhere; }
.devpill .btn, .devpill .icon-btn { flex: none; }
.devpill > .icon { flex: none; color: var(--brand-ink); }
.devpill-spin { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgb(var(--ov) / .2); border-top-color: var(--brand-ink);
  animation: devspin 0.9s linear infinite; }
@keyframes devspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .devpill-spin { animation: none; } }
.devlist { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; font-size: 13px; }
.devlist .row { gap: 10px; }
.devlist .grow { min-width: 0; overflow-wrap: anywhere; }
.exp-note .btn { flex: none; margin-left: auto; }
@media (max-width: 767px) { .devpill { left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); max-width: none; } }

/* raw clips that left our servers for the creator's computer (12.8.13): the card stays, without playback */
.rc-away .rc-media img { filter: saturate(.55) brightness(.8); }
.rc-away-chip { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px;
  border-radius: 999px; font-size: 11.5px; font-weight: 600; background: rgba(3, 6, 20, .72); color: var(--text-2); }
.rc-away-note { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }

/* admin overview: open errors and tickets (errorlog.py) */
.banner-err { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 14px; padding: 10px 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--red, #f06b6b) 45%, transparent); background: color-mix(in srgb, var(--red, #f06b6b) 12%, transparent);
  color: inherit; font: inherit; text-align: left; }

/* Settings, Storage (storage.js, 12.8.14) */
.st-big { font-size: 15px; } .st-big b { font-size: 28px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.st-parts { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; font-size: 13px; color: var(--text-2); }
.st-parts b { color: var(--text, inherit); font-variant-numeric: tabular-nums; }
.st-alert { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.5;
  border: 1px solid color-mix(in srgb, var(--amber, #f0b44c) 50%, transparent); background: color-mix(in srgb, var(--amber, #f0b44c) 12%, transparent); }
.st-alert > .icon { flex: none; margin-top: 2px; color: var(--amber, #f0b44c); }
.st-blocks { min-width: 92px; text-align: center; font-size: 14px; } .st-blocks b { font-size: 22px; font-variant-numeric: tabular-nums; }