/* Local theme artwork and palettes keep text on readable surfaces. */
:root {
  --theme-art: url('/assets/picnic.png');
  --theme-ink: #243c58;
  --theme-quiet: #536b80;
  --theme-surface: #fffdf7;
  --theme-line: #bdd2e7;
  --theme-soft: #e5eef9;
  --theme-button: #e2edfa;
  --theme-hover: #cedff4;
  --theme-accent: #316cba;
  --theme-link: #245fa9;
  --theme-on-accent: #fff;
  --theme-selected: #d6e5fb;
  --theme-back: #eef5fc;
  --theme-rail: #f3f8fff0;
  --theme-content: #f7fbffe8;
  --theme-header: #fbfdfff0;
  --theme-input: #fffffced;
  --theme-pattern: #99b8e31a;
  --theme-ok: #38674b;
  --theme-ok-bg: #eaf2e2ee;
  --theme-ok-line: #b9cbb0;
  --theme-bad: #973e3e;
  --theme-bad-bg: #fce9e2;
  --theme-warn: #87572c;
  --theme-card: #fffdf7aa;
  --theme-focus: #316cba44;
  --theme-shade: #20395266;
}
:root[data-theme='cafe'] {
  --avatar-sheet: url('/assets/avatars/cafe-v1.png');
  color-scheme: light;
  color: #3d342b;
  background: #eee5d5;
  --theme-art: url('/assets/themes/cafe-v1.png');
  --theme-ink: #3d342b;
  --theme-quiet: #706152;
  --theme-surface: #fff9ed;
  --theme-line: #cfc0a7;
  --theme-soft: #efe5d3;
  --theme-button: #ebdfc9;
  --theme-hover: #dfceb0;
  --theme-accent: #506747;
  --theme-link: #425c38;
  --theme-on-accent: #fffdf3;
  --theme-selected: #d9e1cc;
  --theme-back: #e4d8c3;
  --theme-rail: #f6efdfef;
  --theme-content: #fcf6e8e6;
  --theme-header: #fff8eaf0;
  --theme-input: #fffaf0ed;
  --theme-pattern: #95784a13;
  --theme-ok: #49623c;
  --theme-ok-bg: #e6ead6ee;
  --theme-ok-line: #b9c4a1;
  --theme-bad: #923d34;
  --theme-bad-bg: #fae5dcef;
  --theme-warn: #8b592c;
  --theme-card: #fff9ec9c;
  --theme-focus: #627b4e55;
  --theme-shade: #392b2166;
  --muted: var(--theme-quiet);
  --accent: var(--theme-accent);
  --line: var(--theme-line);
  --surface: var(--theme-surface);
}
:root[data-theme='neon'] {
  --avatar-sheet: url('/assets/avatars/neon-v1.png');
  color-scheme: dark;
  color: #f3eefa;
  background: #171124;
  --theme-art: url('/assets/themes/neon-v1.png');
  --theme-ink: #f3eefa;
  --theme-quiet: #b8abc9;
  --theme-surface: #21182f;
  --theme-line: #59416d;
  --theme-soft: #30223f;
  --theme-button: #382549;
  --theme-hover: #4c3263;
  --theme-accent: #c193fc;
  --theme-link: #cbb0ff;
  --theme-on-accent: #251335;
  --theme-selected: #51346b;
  --theme-back: #191124;
  --theme-rail: #20162eef;
  --theme-content: #191223e8;
  --theme-header: #241a32f0;
  --theme-input: #21182fed;
  --theme-pattern: #ce8cff0b;
  --theme-ok: #98dfcf;
  --theme-ok-bg: #1e3939ee;
  --theme-ok-line: #427a70;
  --theme-bad: #ffb5c4;
  --theme-bad-bg: #482338ed;
  --theme-warn: #f2ca8e;
  --theme-card: #30213b9c;
  --theme-focus: #d69cff55;
  --theme-shade: #0c071dcc;
  --muted: var(--theme-quiet);
  --accent: var(--theme-accent);
  --line: var(--theme-line);
  --surface: var(--theme-surface);
}
:root[data-theme='everyday'] {
  --avatar-sheet: url('/assets/avatars/everyday-v1.png');
  color-scheme: light;
  color: #273b39;
  background: #edf1ef;
  --theme-art: url('/assets/themes/everyday-v1.png');
  --theme-ink: #273b39;
  --theme-quiet: #596c68;
  --theme-surface: #fcfcf8;
  --theme-line: #bdccc5;
  --theme-soft: #e4ebe7;
  --theme-button: #e2ebe6;
  --theme-hover: #d1dfd7;
  --theme-accent: #356459;
  --theme-link: #2c5e53;
  --theme-on-accent: #fff;
  --theme-selected: #d4e5dc;
  --theme-back: #edf1ef;
  --theme-rail: #f5f7f3f5;
  --theme-content: #f7f9f5e8;
  --theme-header: #fafcf8f5;
  --theme-input: #fffffcf5;
  --theme-pattern: transparent;
  --theme-ok: #35624e;
  --theme-ok-bg: #e6efe7f2;
  --theme-ok-line: #afc7b7;
  --theme-bad: #973f3f;
  --theme-bad-bg: #f7e5e2;
  --theme-warn: #865a28;
  --theme-card: #fcfdf9bf;
  --theme-focus: #35645944;
  --theme-shade: #1e322955;
  --muted: var(--theme-quiet);
  --accent: var(--theme-accent);
  --line: var(--theme-line);
  --surface: var(--theme-surface);
}
:root[data-theme='mall'] {
  color-scheme: light;
  color: #3f2945;
  background: #fbf0f4;
  --theme-art: url('/assets/themes/mall-v1.png');
  --theme-ink: #3f2945;
  --theme-quiet: #755b75;
  --theme-surface: #fff9f7;
  --theme-line: #ddbed0;
  --theme-soft: #f8e6ef;
  --theme-button: #f4dfeb;
  --theme-hover: #ecd0e2;
  --theme-accent: #a13678;
  --theme-link: #872761;
  --theme-on-accent: #fff;
  --theme-selected: #f1d5e9;
  --theme-back: #fbf0f4;
  --theme-rail: #fff4f7f0;
  --theme-content: #fff8f7e6;
  --theme-header: #fff9faf2;
  --theme-input: #fffdfbf5;
  --theme-pattern: #df8ec014;
  --theme-ok: #226878;
  --theme-ok-bg: #e0f1f2f0;
  --theme-ok-line: #a4cdd3;
  --theme-bad: #a33250;
  --theme-bad-bg: #ffe5ec;
  --theme-warn: #855220;
  --theme-card: #fff8f6b3;
  --theme-focus: #b43a8840;
  --theme-shade: #391b3b66;
  --muted: var(--theme-quiet);
  --accent: var(--theme-accent);
  --line: var(--theme-line);
  --surface: var(--theme-surface);
}
:root[data-theme='beach'] {
  --avatar-sheet: url('/assets/avatars/beach-v1.png');
  --theme-art: url('/assets/themes/beach-v1.png');
  --theme-ink: #263f43;
  --theme-quiet: #586d6b;
  --theme-surface: #fffdf3;
  --theme-line: #c9d6c4;
  --theme-soft: #e7efe4;
  --theme-button: #e2eddf;
  --theme-hover: #d1e3cf;
  --theme-accent: #27706c;
  --theme-link: #205e5a;
  --theme-selected: #d1e7df;
  --theme-back: #f4f3e8;
  --theme-rail: #f9f8edf2;
  --theme-content: #fffdf2e8;
  --theme-header: #fffdf3f5;
  --theme-input: #fffef8f5;
  --theme-pattern: #c1a56810;
  --theme-card: #fffdf3b3;
  --theme-focus: #27706c44;
  --theme-shade: #183c4666;
}
:root[data-theme='pool'] {
  --avatar-sheet: url('/assets/avatars/pool-v1.png');
  --theme-art: url('/assets/themes/pool-v1.png');
  --theme-ink: #23464d;
  --theme-quiet: #506f72;
  --theme-surface: #f9fffc;
  --theme-line: #acd2cf;
  --theme-soft: #ddf1ec;
  --theme-button: #d7eee8;
  --theme-hover: #c3e5df;
  --theme-accent: #177575;
  --theme-link: #146163;
  --theme-selected: #c6e7e3;
  --theme-back: #eaf7f5;
  --theme-rail: #eefbf7f2;
  --theme-content: #f1fffbe8;
  --theme-header: #f6fffbf5;
  --theme-input: #fafffdf5;
  --theme-pattern: #3cbeb812;
  --theme-card: #f6fffbb3;
  --theme-focus: #1b818144;
  --theme-shade: #164f5966;
  --theme-ok: #23675c;
  --theme-ok-bg: #e0f2eaf0;
  --theme-ok-line: #a2cdbd;
}
:root[data-theme='trans'] {
  --avatar-sheet: url('/assets/avatars/trans-v1.png');
  --theme-art: url('/assets/themes/trans-v1.png');
  --theme-ink: #3f3650;
  --theme-quiet: #6e627c;
  --theme-surface: #fffbfe;
  --theme-line: #d5c5dc;
  --theme-soft: #f4e8f2;
  --theme-button: #eedff0;
  --theme-hover: #e5d2e9;
  --theme-accent: #8c497e;
  --theme-link: #78396c;
  --theme-selected: #e8d6ec;
  --theme-back: #f8eff6;
  --theme-rail: #fff3faf2;
  --theme-content: #fff7fde8;
  --theme-header: #fff9fef5;
  --theme-input: #fffcfff5;
  --theme-pattern: #59b5d51a;
  --theme-card: #fff9feb3;
  --theme-focus: #a7669644;
  --theme-shade: #41324d66;
  --theme-ok: #286780;
  --theme-ok-bg: #e3f2f9f0;
  --theme-ok-line: #aacbdc;
}
/* Structural/layout rules stay in picnic-theme.css; these are color overrides. */
html {
  body {
    background-color: var(--theme-back);
    background-image:
      linear-gradient(90deg, var(--theme-pattern) 50%, transparent 50%),
      linear-gradient(var(--theme-pattern) 50%, transparent 50%);
  }
  button {
    color: var(--theme-ink);
    background-color: var(--theme-button);
    border-color: var(--theme-line);
  }
  button:hover:not(:disabled) {
    background-color: var(--theme-hover);
  }
  input,
  textarea,
  select {
    color: var(--theme-ink);
    background: var(--theme-input);
    border-color: var(--theme-line);
  }
  input::placeholder,
  textarea::placeholder,
  #message::placeholder {
    color: var(--theme-quiet);
  }
  a,
  .text-button {
    color: var(--theme-link);
  }
  .text-button,
  .icon-button {
    background: transparent;
    border-color: transparent;
  }
  .icon-button {
    color: var(--theme-quiet);
  }
  .text-button:hover:not(:disabled) {
    background: var(--theme-soft);
  }
  .primary,
  .brand-mark {
    background: var(--theme-accent);
    color: var(--theme-on-accent);
  }
  .primary:hover:not(:disabled) {
    background: var(--theme-link);
    color: var(--theme-on-accent);
  }
  .brand-mark {
    box-shadow: 3px 3px 0 var(--theme-line);
  }
  .subtle-button {
    color: var(--theme-ink);
    background: var(--theme-soft);
    border-color: var(--theme-line);
  }
  .danger-subtle,
  .voice-actions [aria-pressed='true'] {
    color: var(--theme-bad);
    background: var(--theme-bad-bg);
  }
  .danger-subtle:hover:not(:disabled) {
    color: var(--theme-bad);
    background: var(--theme-soft);
  }
  .eyebrow,
  .auth-footer,
  .server-note,
  .channel-hint,
  .header-hash,
  .meta .you {
    color: var(--theme-ok);
  }
  .status-dot,
  .presence-avatar[data-online='true']::after {
    background: var(--theme-ok);
  }
  .auth-card,
  dialog {
    color: var(--theme-ink);
    background: var(--theme-surface);
    border-color: var(--theme-line);
    box-shadow: 0 20px 80px var(--theme-shade);
  }
  .auth-card::before {
    background-color: var(--theme-back);
    background-image: var(--theme-art);
    border-color: var(--theme-line);
  }
  .auth-card h1 {
    color: var(--theme-ink);
  }
  #chat {
    background-color: var(--theme-back);
    background-image: var(--theme-art);
    background-position: center 48%;
  }
  #sidebar,
  #peopleRail {
    background: var(--theme-rail);
    border-color: var(--theme-line);
  }
  .section-title,
  .person-copy small,
  .voice-occupancy,
  .channel-transport,
  .people-group-title,
  #offlineTitle,
  .day-divider,
  .msg time,
  .meta time,
  .composer-meta,
  .runner-meta,
  #runnerHelp,
  .runner-eyebrow {
    color: var(--theme-quiet);
  }
  .channel {
    color: var(--theme-ink);
    background: transparent;
    border-color: transparent;
  }
  .channel:hover:not(:disabled) {
    background: var(--theme-soft);
  }
  .channel.active {
    color: var(--theme-ink);
    background: var(--theme-soft);
    border-color: var(--theme-line);
  }
  .channel.active:hover:not(:disabled) {
    background: var(--theme-selected);
  }
  .channel-symbol {
    color: var(--theme-link);
  }
  .channel.voice.active .channel-hint {
    color: var(--theme-ok);
  }
  .sidebar-bottom::before {
    background-color: var(--theme-back);
    background-image: var(--theme-art);
    border-color: var(--theme-surface);
  }
  .account,
  .avatar,
  .msg.own .avatar {
    color: var(--theme-ink);
    background: var(--theme-soft);
    border-color: var(--theme-line);
  }
  #content {
    background: var(--theme-content);
  }
  .chat-header {
    background: var(--theme-header);
    border-color: var(--theme-line);
  }
  #connection {
    color: var(--theme-ok);
  }
  #connection[data-state='offline'] {
    color: var(--theme-warn);
  }
  #messages {
    scrollbar-color: var(--theme-line) transparent;
  }
  .empty-symbol {
    color: var(--theme-ok);
    background: var(--theme-ok-bg);
  }
  .messageBody,
  #message,
  .runner-heading strong {
    color: var(--theme-ink);
  }
  .compose-box {
    background: var(--theme-input);
    border-color: var(--theme-line);
  }
  .compose-box:focus-within {
    border-color: var(--theme-accent);
    box-shadow: 0 0 0 3px var(--theme-focus);
  }
  #message {
    background: transparent;
  }
  .composer-meta #sendStatus {
    color: var(--theme-link);
  }
  #sendStatus[data-tone='error'] {
    color: var(--theme-bad);
  }
  #voiceStatus {
    background: var(--theme-ok-bg);
    border-color: var(--theme-ok-line);
  }
  .screen-hint,
  .call-options label {
    color: var(--theme-ok);
  }
  #shareScreen[aria-pressed='true'] {
    color: var(--theme-on-accent);
    background: var(--theme-accent);
  }
  #participants li {
    color: var(--theme-ink);
    background: var(--theme-card);
  }
  #participants li.speaking {
    border-color: var(--theme-ok);
  }
  #participants .locally-muted {
    border-color: var(--theme-warn);
  }

  dialog::backdrop,
  #sidebarBackdrop {
    background: var(--theme-shade);
  }
  #notice {
    color: var(--theme-ok);
    background: var(--theme-surface);
    border-color: var(--theme-ok-line);
  }
  #notice[data-tone='error'] {
    color: var(--theme-bad);
    background: var(--theme-surface);
    border-color: var(--theme-bad);
  }
  #runnerPanel,
  .online-section,
  #offlineTitle,
  .voice-preview-people {
    border-color: var(--theme-line);
  }
  .presence-avatar::after {
    border-color: var(--theme-surface);
  }
  .voice-channel-card {
    background: var(--theme-card);
    border-color: var(--theme-line);
  }
  .voice-channel-card.occupied {
    background: var(--theme-ok-bg);
    border-color: var(--theme-ok-line);
  }
  .occupied .voice-occupancy {
    color: var(--theme-ok);
  }
}
.theme-launch {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 38px;
  margin-bottom: 8px;
  font-size: 12px;
  background: transparent;
  border: 1px solid var(--theme-line);
  color: var(--theme-quiet);
}
.theme-launch span {
  font-size: 19px;
  color: var(--theme-link);
}
#themeDialog {
  width: min(660px, calc(100% - 28px));
  height: min(780px, calc(100dvh - 32px));
  overflow: hidden;
}
#themeDialog[open] {
  display: flex;
  flex-direction: column;
}
#themeDialog > :not(#themeForm) {
  flex-shrink: 0;
}
#themeForm {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}
#themeForm > :not(#themeChoices) {
  flex-shrink: 0;
}
#themeDialog > p {
  max-width: 48ch;
  line-height: 1.6;
}
#themeChoices {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  border: 0;
  padding: 4px;
  margin: 16px -4px 10px;
}
#themeCards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
#themeChoices legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.theme-choice {
  position: relative;
  margin: 0;
  cursor: pointer;
  min-width: 0;
}
.theme-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.theme-item .theme-choice {
  display: block;
  flex: 1;
}
.theme-library-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}
.theme-library-heading p {
  color: var(--theme-quiet);
  margin: 0;
}
.theme-library-heading button {
  flex-shrink: 0;
}
.appearance-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  flex-shrink: 0;
  margin-top: 12px;
}
.appearance-controls label {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
}
.appearance-controls select {
  width: 100%;
  min-width: 0;
  margin: 0;
}
.theme-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.theme-card-actions small {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--theme-quiet);
}
.theme-card-actions button {
  padding: 4px 8px;
  min-height: 32px;
  font-size: 12px;
}
.theme-card img.theme-no-art {
  visibility: hidden;
}
.theme-choice input {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 18px;
  height: 18px;
  z-index: 1;
  accent-color: var(--theme-accent);
}
.theme-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid var(--theme-line);
  border-radius: 13px;
  background: var(--theme-surface);
  color: var(--theme-ink);
}
.theme-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  object-position: center;
}
/* Keep faces and the neon signs in the crop of the taller Mall illustration. */
html[data-theme='mall'] #chat {
  background-position: center 22%;
}
html[data-custom-theme] #chat {
  background-position: var(--custom-background-position);
}
.theme-choice input[value='mall'] + .theme-card img {
  object-position: center 22%;
}

/* Theme sheets share a four-column/two-row slot order. The presence dot stays
   above them; Everyday uses initials underneath instead of anime artwork. */
html[data-theme='everyday'] .avatar > img {
  display: none;
}
.avatar .avatar-themed {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  background-image: var(--avatar-sheet, none);
  background-size: 400% 200%;
  background-position: var(--avatar-x, 0%) var(--avatar-y, 0%);
  background-repeat: no-repeat;
  pointer-events: none;
}
.avatar:is([data-avatar='silver-polo'], [data-avatar='picnic-capy']) {
  --avatar-x: 33.333333%;
}
.avatar:is([data-avatar='monochrome-hoodie'], [data-avatar='amber-braid']) {
  --avatar-x: 66.666667%;
}
.avatar:is([data-avatar='indigo-pony'], [data-avatar='mint-cardigan']) {
  --avatar-x: 100%;
}
.avatar:is(
  [data-avatar='sky-blue'],
  [data-avatar='picnic-capy'],
  [data-avatar='amber-braid'],
  [data-avatar='mint-cardigan']
) {
  --avatar-y: 100%;
}
html[data-custom-avatars] .avatar > img {
  display: none;
}
html[data-custom-avatars] .avatar .avatar-themed {
  background-image: var(--custom-avatar);
  background-size: cover;
  background-position: center;
}
.avatar[data-avatar='azure-bow'] {
  --custom-avatar: var(--custom-avatar-0);
}
.avatar[data-avatar='silver-polo'] {
  --custom-avatar: var(--custom-avatar-1);
}
.avatar[data-avatar='monochrome-hoodie'] {
  --custom-avatar: var(--custom-avatar-2);
}
.avatar[data-avatar='indigo-pony'] {
  --custom-avatar: var(--custom-avatar-3);
}
.avatar[data-avatar='sky-blue'] {
  --custom-avatar: var(--custom-avatar-4);
}
.avatar[data-avatar='picnic-capy'] {
  --custom-avatar: var(--custom-avatar-5);
}
.avatar[data-avatar='amber-braid'] {
  --custom-avatar: var(--custom-avatar-6);
}
.avatar[data-avatar='mint-cardigan'] {
  --custom-avatar: var(--custom-avatar-7);
}
.theme-card strong {
  padding: 12px 12px 4px;
  font-size: 14px;
}
.theme-card small {
  padding: 0 12px 12px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--theme-quiet);
}
.theme-choice input:checked + .theme-card {
  border-color: var(--theme-accent);
  box-shadow: 0 0 0 2px var(--theme-selected);
}
.theme-choice input:focus-visible + .theme-card {
  outline: 3px solid var(--theme-accent);
  outline-offset: 3px;
}
.theme-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
}
.theme-feedback {
  height: 48px;
  overflow-y: auto;
  overflow-wrap: anywhere;
  padding-top: 6px;
}
#themeFeedback {
  margin: 0;
}
#themeForm > .theme-actions {
  margin-top: 8px;
}
#deleteThemeDialog {
  height: min(380px, calc(100dvh - 48px));
  overflow: hidden;
}
#deleteThemeDialog[open] {
  display: flex;
  flex-direction: column;
}
#deleteThemeDialog > p:not(#deleteThemeFeedback) {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
#deleteThemeFeedback {
  max-height: 80px;
  overflow-y: auto;
  overflow-wrap: anywhere;
}
#deleteThemeDialog > .theme-actions {
  flex-shrink: 0;
}
@media (max-width: 500px) {
  #themeCards {
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .theme-card {
    display: grid;
    grid-template-columns: 90px 1fr;
    column-gap: 0;
    min-height: 84px;
  }
  .theme-card img {
    grid-row: 1 / 3;
    height: 100%;
    min-height: 84px;
  }
  .theme-card strong {
    padding: 15px 30px 2px 12px;
  }
  .theme-card small {
    padding-bottom: 12px;
  }
}
/* Camera tiles stay in the current call panel; screens retain their own viewers. */
.camera-grid {
  flex: 1 0 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
  gap: 8px;
}
.camera-tile {
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 10;
  max-height: 180px;
  overflow: hidden;
  border: 1px solid var(--theme-line);
  border-radius: 12px;
  background: #171923;
  color: white;
}
.camera-tile video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.camera-tile video.mirrored {
  transform: scaleX(-1);
}
.camera-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 8px 8px;
  font-size: 12px;
  background: linear-gradient(transparent, #000c);
  pointer-events: none;
}
.camera-tile .camera-watch,
.camera-tile .camera-play {
  position: absolute;
  right: 6px;
  top: 6px;
  background: #171923dc;
  color: white;
  border: 1px solid #ffffff66;
  font-size: 11px;
  padding: 5px 8px;
  min-height: 32px;
}
.camera-tile .camera-play {
  top: 40%;
  left: 20%;
  right: 20%;
}
.camera-status {
  position: absolute;
  top: 40%;
  left: 8px;
  right: 8px;
  text-align: center;
  font-size: 12px;
}
#shareCamera[aria-pressed='true'] {
  color: var(--theme-on-accent);
  background: var(--theme-accent);
}