/* The Info & Media Panel (docs/info-media-panel.md): the Bottom Gallery's glass pill at the foot of the player, with tabs and tiles */

#infoMediaPanel {
  --im-tile-w: 112px;
  --im-tile-h: 64px;
  --im-margin: 10px;
  position: absolute;
  z-index: 40;
  left: 50%;
  bottom: var(--im-margin);
  transform: translateX(-50%);
  width: min(820px, 75vw);
  max-width: calc(100vw - 30px);
  padding: 8px 10px 10px;
  border-radius: 20px;
  color: var(--text-main, #fff);
  font-family: inherit;
  transition:
    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    width 0.3s;
}
#infoMediaPanel[hidden] {
  display: none;
}

/* Widths, as the Bottom Gallery's */
#infoMediaPanel.im-w-compact {
  width: min(560px, 50vw);
}
#infoMediaPanel.im-w-wide {
  width: 95vw;
}
#infoMediaPanel.im-w-full {
  width: 100vw;
  max-width: 100vw;
  bottom: 0;
  border-radius: 0;
  border-inline-start: none;
  border-inline-end: none;
  border-bottom: none;
}

/* Closed: the panel goes below the edge, and its handle stays on the edge */
#infoMediaPanel.im-closed {
  transform: translate(-50%, calc(100% + var(--im-margin)));
}
#infoMediaPanel.im-w-full.im-closed {
  transform: translate(-50%, 100%);
}
#infoMediaPanel.im-closed .im-inner {
  visibility: hidden;
  transition: visibility 0s 0.4s;
}

.im-handle {
  position: absolute;
  top: -36px;
  inset-inline-start: 20px;
  height: 36px;
  padding: 0 14px;
  display: none;
  align-items: center;
  gap: 8px;
  color: var(--text-main, #fff);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  font-family: inherit;
  background: var(--primary-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  cursor: pointer;
}
#infoMediaPanel.im-closed .im-handle {
  display: flex;
}
.im-handle:hover {
  background: var(--bg-dark-hover, rgba(11, 25, 44, 0.85));
}

/* The row of tabs, and the chip and window buttons on its right */
.im-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.im-tabs {
  display: flex;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.im-tabs::-webkit-scrollbar {
  display: none;
}
/* A tab is its title with a straight line under the one that is on: "Underlined Titles", the panel's Tab Style to start with
   (Ben, 2026-10-12: "can you redesign the active tab ... underlined titles, not circled button"; it was a rounded button with
   a line that curved along its foot). The other style, tabs along the top, is below. */
.im-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin: 0 9px;
  padding: 6px 2px 5px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  color: color-mix(in srgb, var(--text-main, #fff) 72%, transparent);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  font-family: inherit;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.im-tab:hover {
  color: var(--text-main, #fff);
  border-bottom-color: rgba(255, 255, 255, 0.35);
  border-bottom-color: color-mix(in srgb, var(--text-main, #fff) 35%, transparent);
}
.im-tab[aria-selected='true'] {
  color: var(--text-main, #fff);
  border-bottom-color: var(--icon-color, #00e5ff);
}

/* "Tabs Along the Top": the tabs stand on top of the panel, as its handle does while it is closed, and are there only while it is
   open (Ben, 2026-10-12: "could the tabs be on top of the panel, similar to the info and media tab when it's closed, but only show
   when it's opened"; the first make of this style kept them inside the panel, on a line across it). The row of tabs and the
   panel's buttons leave the panel: each tab is drawn as the handle is, the one that is on at full strength with the accent
   along its top, the others fainter; the buttons stand on the panel at its other end. A closed panel hides all that is in it,
   so only its handle is on the edge then. */
.im-tabs-tabs .im-head {
  position: absolute;
  inset-inline-end: 16px;
  bottom: 100%;
  inset-inline-start: 16px;
  align-items: flex-end;
  gap: 12px;
}
.im-tabs-tabs .im-tabs {
  align-items: flex-end;
  gap: 3px;
}
.im-tabs-tabs .im-tab,
.im-tabs-tabs .im-tools {
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  background: var(--primary-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  /* each on a layer of its own: without it Chrome left one of the blurred tabs undrawn when the panel first opened, until the
     row was drawn again (seen in the browser check of the active tab's colour, three loads of three; none of eight with this) */
  transform: translateZ(0);
}
.im-tabs-tabs .im-tab {
  height: 32px;
  margin: 0;
  padding: 0 14px;
  /* every tab is the panel's own colour with its words at full strength; the one that is on is told apart by another colour,
     not by the others being faint (they were 55% of the panel's colour with muted words, which could not be read over a
     bright panorama: Ben, 2026-10-12, "i can't see the text on the other tabs ... maybe all green and a different colour for
     active") */
  color: var(--text-main, #fff);
  /* a tab changes at once under the pointer: nothing fades in (Ben: "can the hover state not animate") */
  transition: none;
}
/* The one that is on, and the one under the pointer: white with black words, whatever the theme (Ben, 2026-10-12: "can the
   active colour be white with black text ... the hover state ... just have white background with black text"; the first make
   used the tour's accent, near black on his tour) */
.im-tabs-tabs .im-tab:hover,
.im-tabs-tabs .im-tab[aria-selected='true'] {
  border-color: transparent;
  background: #fff;
  color: #0b0c0e;
  box-shadow: none;
  /* a solid colour has nothing behind it to blur */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.im-tabs-tabs .im-tab[aria-selected='true'] {
  height: 36px;
}
.im-tabs-tabs .im-tab:hover .im-count,
.im-tabs-tabs .im-tab[aria-selected='true'] .im-count {
  background: rgba(11, 12, 14, 0.12);
}
.im-tabs-tabs .im-tools {
  height: 36px;
  padding: 0 8px;
}
/* nothing is above what the tab shows now */
.im-tabs-tabs .im-body {
  margin-top: 0;
}
.im-count {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 11px;
  text-align: center;
}
.im-labels-icon .im-tab {
  margin: 0 6px;
  padding: 6px 3px 5px;
}
.im-tabs-tabs.im-labels-icon .im-tab {
  margin: 0;
  padding: 0 11px;
}

.im-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.im-scope {
  position: relative;
}
.im-scope[hidden] {
  display: none;
}
.im-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.15));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-main, #fff);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.2;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.im-btn[hidden] {
  display: none;
}
.im-chip:hover {
  background: rgba(255, 255, 255, 0.14);
}
.im-menu {
  position: absolute;
  inset-inline-end: 0;
  bottom: calc(100% + 8px);
  z-index: 5;
  min-width: 150px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.15));
  border-radius: 10px;
  /* the tour's panel colour over a dark base, so the menu reads as the panel does and a pale, see-through theme stays readable
     (it was navy on every tour: Ben, 2026-10-11) */
  background-color: #0b0c0e;
  background-image: linear-gradient(var(--primary-bg, rgba(11, 25, 44, 0.96)), var(--primary-bg, rgba(11, 25, 44, 0.96)));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.im-menu[hidden] {
  display: none;
}
.im-menu button {
  padding: 8px 10px 8px 28px;
  position: relative;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-main, #fff);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.2;
  font-family: inherit;
  text-align: start;
  cursor: pointer;
}
.im-menu button:hover,
.im-menu button:focus-visible {
  background: rgba(255, 255, 255, 0.1);
}
/* the keyboard's ring, in the tour's icon colour and inside the item (the player's amber ring and its glow stood 4 px outside it, over
   the menu's edge) */
.im-menu button:focus-visible {
  outline: 2px solid var(--icon-color, #ffaa00) !important;
  outline-offset: -2px !important;
  box-shadow: none !important;
}
.im-menu button[aria-checked='true']::before {
  content: '';
  position: absolute;
  inset-inline-start: 11px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--icon-color, #00e5ff);
}
.im-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main, #fff);
  cursor: pointer;
}
.im-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

#infoMediaPanel button:focus-visible,
#infoMediaPanel a:focus-visible,
#infoMediaPanel .im-reading:focus-visible {
  outline: 2px solid var(--icon-color, #00e5ff);
  outline-offset: 2px;
}
.im-body:focus {
  outline: none;
}

/* What the selected tab shows */
.im-body {
  margin-top: 8px;
  min-height: calc(var(--im-tile-h) + 8px);
}
.im-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scrollbar-width: thin;
}
/* A row with an arrow at each end, as Bottom Nav - Thumbnails has: the arrows are there only while the row is longer than the panel
   is wide (info-media.js says so), and the one at an end the row has reached is faded */
.im-strip {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.im-strip .im-track {
  flex: 1 1 auto;
  min-width: 0;
}
.im-arrow {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: var(--im-tile-h);
  margin-top: 2px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-color: color-mix(in srgb, var(--text-main, #fff) 15%, transparent);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  background: color-mix(in srgb, var(--text-main, #fff) 6%, transparent);
  color: var(--text-main, #fff);
  cursor: pointer;
  transition:
    background 0.2s,
    opacity 0.2s;
}
.im-strip.im-scrolls .im-arrow {
  display: flex;
}
.im-arrow:hover {
  background: rgba(255, 255, 255, 0.15);
  background: color-mix(in srgb, var(--text-main, #fff) 16%, transparent);
}
.im-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}
/* a phone's row is swiped: the arrows would take a fifth of its width */
@media (max-width: 768px) {
  .im-strip.im-scrolls .im-arrow {
    display: none;
  }
}

.im-tile {
  position: relative;
  flex-shrink: 0;
  width: var(--im-tile-w);
  height: var(--im-tile-h);
  display: flex;
  align-items: flex-end;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main, #fff);
  font-family: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.2s,
    border-color 0.2s;
}
.im-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.4);
}
.im-tile:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
}
.im-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.im-name {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 3px 6px 4px;
  overflow: hidden;
  font-weight: 600;
  font-size: 11px;
  line-height: 1.25;
  font-family: inherit;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.im-has-thumb .im-name {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
}
.im-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: -21px 0 0 -15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
}
.im-current {
  border-color: var(--icon-color, #00e5ff);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
  box-shadow: 0 0 12px color-mix(in srgb, var(--icon-color, #00e5ff) 40%, transparent);
}

.im-sound-icon {
  position: absolute;
  top: 7px;
  inset-inline-start: 8px;
  display: flex;
}
.im-length {
  position: absolute;
  top: 9px;
  inset-inline-end: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  color: color-mix(in srgb, var(--text-main, #fff) 75%, transparent);
  font-variant-numeric: tabular-nums;
}
.im-sound.im-playing {
  border-color: var(--icon-color, #00e5ff);
}

.im-doc-icon {
  position: absolute;
  top: 6px;
  inset-inline-start: 7px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.im-format {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.im-doc-pdf {
  color: #ff9e8f;
}
.im-doc-text {
  color: #9fdcff;
}

/* About: the text to read, and a short list of what else there is */
.im-about {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.im-reading {
  flex: 1;
  min-width: 0;
  max-height: 104px;
  overflow-y: auto;
  padding: 2px 8px 2px 2px;
}
.im-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
}
.im-text {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  color: color-mix(in srgb, var(--text-main, #fff) 86%, transparent);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.im-summary {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0 0 0 12px;
  list-style: none;
  border-inline-start: 1px solid var(--glass-border, rgba(255, 255, 255, 0.15));
}
.im-jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  color: color-mix(in srgb, var(--text-main, #fff) 85%, transparent);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.im-jump:hover {
  color: var(--text-main, #fff);
  background: rgba(255, 255, 255, 0.1);
}
.im-empty-note {
  margin: 6px 4px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  color: color-mix(in srgb, var(--text-main, #fff) 70%, transparent);
}
.im-editor-note {
  max-width: 560px;
  line-height: 1.5;
}

/* An open sidebar keeps the panel beside it rather than over its first tabs */
@media (min-width: 769px) {
  body:has(.sidebar-left:not(.sidebar-closed)) #infoMediaPanel {
    left: calc(50% + var(--sidebar-width, 300px) / 2);
    max-width: calc(100vw - var(--sidebar-width, 300px) - 30px);
  }
  body:has(.sidebar-right:not(.sidebar-closed)) #infoMediaPanel {
    left: calc(50% - var(--sidebar-width, 300px) / 2);
    max-width: calc(100vw - var(--sidebar-width, 300px) - 30px);
  }
}

/* The bars above the foot of the player keep clear of the panel, as they do of the Bottom Gallery */
body:has(#infoMediaPanel:not([hidden]):not(.im-closed)) .v2-action-bar.layout-floating {
  bottom: calc(var(--bottom-dock-height, 100px) + var(--action-bar-margin, 10px));
}
body:has(.v2-action-bar.layout-fixed) #infoMediaPanel {
  margin-bottom: 65px;
}
body:has(#infoMediaPanel:not([hidden]):not(.im-closed)).ctrl-bottom-middle .view-controls,
body:has(#infoMediaPanel:not([hidden]):not(.im-closed)).ctrl-bottom-right .view-controls,
body:has(#infoMediaPanel:not([hidden]):not(.im-closed)).ctrl-bottom-left .view-controls {
  bottom: calc(var(--bottom-dock-height, 100px) + 10px);
}

/* Phones: the whole width, on top of the bottom navigation bar */
@media (max-width: 768px) {
  /* Show on Phones unticked: no panel and no handle on a phone (the bars' Room Info icon opens the same in the Media Window) */
  #infoMediaPanel.im-not-on-phones {
    display: none;
  }
  #infoMediaPanel,
  #infoMediaPanel.im-w-compact,
  #infoMediaPanel.im-w-wide,
  #infoMediaPanel.im-w-full {
    --im-tile-w: 96px;
    --im-tile-h: 56px;
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: var(--im-mobile-nav, 0px);
    width: 100vw;
    max-width: 100vw;
    transform: none;
    padding: 6px 8px 8px;
    border-radius: 16px 16px 0 0;
    border-inline-start: none;
    border-inline-end: none;
    border-bottom: none;
  }
  #infoMediaPanel.im-closed,
  #infoMediaPanel.im-w-full.im-closed {
    transform: translateY(100%);
  }
  /* Closed, the panel sits behind the bottom navigation bar, so a see-through bar (Overlay opacity under 100%) showed it there, a coloured
     card under the icons (Ben, 2026-10-29). It is hidden once it has slid down; its handle stays. */
  #infoMediaPanel.im-closed {
    visibility: hidden;
    transition:
      transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
      visibility 0s 0.4s;
  }
  #infoMediaPanel .im-handle {
    visibility: visible;
  }
  .im-handle {
    inset-inline-start: 12px;
  }

  /* A finger needs more to press than a pointer (Ben, 2026-10-11): on a phone the handle, the tabs, the chip and its choices and the
     two round buttons are about 44 px tall, with larger words */
  .im-handle {
    top: -44px;
    height: 44px;
    padding: 0 18px;
    font-size: 15px;
  }
  .im-tab {
    min-height: 42px;
    margin: 0 10px;
    padding: 9px 2px 7px;
    font-size: 15px;
  }
  .im-tabs-tabs .im-tab {
    min-height: 0;
    height: 38px;
    margin: 0;
    padding: 0 13px;
  }
  .im-tabs-tabs .im-tab[aria-selected='true'] {
    height: 42px;
  }
  .im-tabs-tabs .im-tools {
    height: 48px;
    padding: 0 6px;
  }
  .im-tabs-tabs .im-head {
    inset-inline-end: 8px;
    inset-inline-start: 8px;
    gap: 8px;
  }
  .im-chip {
    min-height: 42px;
    padding: 9px 14px;
    font-size: 14px;
  }
  .im-menu button {
    padding: 13px 14px 13px 30px;
    font-size: 15px;
  }
  .im-btn {
    width: 42px;
    height: 42px;
  }
  .im-btn svg {
    width: 17px;
    height: 17px;
  }
  .im-about {
    flex-direction: column;
    gap: 6px;
  }
  .im-summary {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 6px 0 0;
    border-inline-start: none;
    border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.15));
  }
  .im-reading {
    max-height: 90px;
  }
}

/* --- The media window as the browser of the panel's media (media-window.js, opened by the panel) --- */

#mediaWindowModal .mw-browser {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-height: 0;
}
#mediaWindowModal .mw-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
}
#mediaWindowModal .mw-stage-media {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#mediaWindowModal .mw-stage-media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
#mediaWindowModal .mw-stage-media iframe,
#mediaWindowModal .mw-stage-media video {
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}
#mediaWindowModal .mw-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
}
#mediaWindowModal .mw-nav:disabled {
  opacity: 0.25;
  cursor: default;
}
#mediaWindowModal .mw-prev {
  inset-inline-start: 10px;
}
#mediaWindowModal .mw-next {
  inset-inline-end: 10px;
}
#mediaWindowModal .mw-caption {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-main, #e5e7eb);
}
#mediaWindowModal .mw-caption strong {
  margin-inline-end: 8px;
  color: var(--text-main, #fff);
}
#mediaWindowModal .mw-counter {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.7);
  color: color-mix(in srgb, var(--text-main, #fff) 70%, transparent);
  font-variant-numeric: tabular-nums;
}
#mediaWindowModal .mw-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  flex-shrink: 0;
}
#mediaWindowModal .mw-strip button {
  position: relative;
  flex-shrink: 0;
  width: 96px;
  height: 56px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main, #fff);
  font-weight: 600;
  font-size: 10px;
  line-height: 1.2;
  font-family: inherit;
  cursor: pointer;
}
#mediaWindowModal .mw-strip button[aria-current='true'] {
  border-color: var(--icon-color, #818cf8);
}
#mediaWindowModal .mw-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#mediaWindowModal .mw-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#mediaWindowModal .mw-list li {
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}
#mediaWindowModal .mw-item-title {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--text-main, #fff);
}
#mediaWindowModal .mw-item-caption {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  color: color-mix(in srgb, var(--text-main, #fff) 75%, transparent);
}
#mediaWindowModal .mw-list audio {
  width: 100%;
}
#mediaWindowModal .mw-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-main, #fff);
  text-decoration: none;
}
#mediaWindowModal .mw-list a:hover .mw-item-title {
  text-decoration: underline;
}
#mediaWindowModal .mw-list a .mw-item-title {
  margin-bottom: 2px;
}
#mediaWindowModal .mw-format {
  flex-shrink: 0;
  padding: 4px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 11px;
  font-weight: 700;
}

/* Arabic and Hebrew (dir="rtl"): back and previous are on the right and go right, onward and next on the left; their chevrons turn */
[dir='rtl'] .im-arrow svg,
[dir='rtl'] #mediaWindowModal .mw-nav svg {
  transform: scaleX(-1);
}