/* Scoped styles adapted from floor-speeches-overlay(4).zip. */
.floor-speech-overlay {
  --floor-speech-ink: #101a38;
  --floor-speech-muted: #66708c;
  --floor-speech-purple: #6d46f2;
  --floor-speech-purple2: #865cf7;
  --floor-speech-purpleSoft: #f1edff;
  --floor-speech-line: #e6e9f3;
  --floor-speech-green: #27ba62;
  --floor-speech-greenSoft: #eaf9ef;
  --floor-speech-pink: #ff4775;
  --floor-speech-blue: #2f72f5;
  --floor-speech-shadow: 0 28px 85px rgba(25, 30, 55, .28);
}

.floor-speech-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 26px;
  background: rgba(18, 21, 34, .55);
  backdrop-filter: blur(4px);
  z-index: 999;
}

.floor-speech-overlay.open {
  display: flex;
}

.floor-speech-modal {
  width: min(1180px, 100%);
  max-height: calc(100vh - 50px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 28px;
  box-shadow: var(--floor-speech-shadow);
  overflow: hidden;
  animation: floorSpeechPop .22s ease-out;
}

@keyframes floorSpeechPop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.floor-speech-mhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 26px 18px;
  border-bottom: 1px solid var(--floor-speech-line);
}

.floor-speech-head-left {
  display: flex;
  gap: 18px;
  align-items: center;
}

.floor-speech-hero-icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 25%, #fff 0 12%, transparent 13%), linear-gradient(145deg, #f7f2ff, #ded2ff);
  color: #7b4cf4;
  position: relative;
  box-shadow: inset 0 0 0 1px #eee6ff;
}

.floor-speech-hero-icon:before,
.floor-speech-hero-icon:after {
  content: "✦";
  position: absolute;
  color: #ad8cff;
  font-size: 15px;
}

.floor-speech-hero-icon:before {
  right: 9px;
  top: 9px;
}

.floor-speech-hero-icon:after {
  left: 11px;
  top: 17px;
  font-size: 9px;
}

.floor-speech-hero-icon svg {
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 5px 7px rgba(103, 66, 221, .2));
}

.floor-speech-mhead h2 {
  margin: 0 0 5px;
  font-size: 30px;
  letter-spacing: -.02em;
}

.floor-speech-mhead p {
  margin: 0;
  max-width: 470px;
  color: var(--floor-speech-muted);
  line-height: 1.45;
}

.floor-speech-head-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.floor-speech-stance {
  display: flex;
  gap: 12px;
}

/* Author-stylesheet display rules (like the flex above) otherwise override the browser's default
   [hidden] { display: none } user-agent rule, since both match with equal specificity and author
   styles win the cascade regardless - without this, setting the hidden property/attribute from JS
   would have no actual visual effect. */
.floor-speech-stance[hidden] {
  display: none;
}

.floor-speech-stance span {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--floor-speech-line);
  border-radius: 12px;
  padding: 11px 15px;
  font-size: 13px;
  font-weight: 750;
}

.floor-speech-stance .yes {
  border-color: #bce8ca;
  background: #f8fffa;
}

.floor-speech-stance .mid {
  border-color: #f3d899;
  background: #fffdf8;
}

.floor-speech-stance .no {
  border-color: #f6c3d0;
  background: #fffafb;
}

.floor-speech-stance svg {
  width: 18px;
  height: 18px;
}

.floor-speech-close {
  width: 46px;
  height: 46px;
  border: 1px solid #dce0ec;
  background: #fff;
  border-radius: 14px;
  font-size: 30px;
  line-height: 1;
  color: #182342;
  cursor: pointer;
}

.floor-speech-mbody {
  display: grid;
  grid-template-columns: 45% 55%;
  min-height: 0;
  flex: 1;
  border-bottom: 1px solid var(--floor-speech-line);
}

.floor-speech-left {
  min-height: 0;
  border-right: 1px solid var(--floor-speech-line);
  display: flex;
  flex-direction: column;
}

.floor-speech-toolbar {
  padding: 16px 20px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.floor-speech-toolbar strong {
  font-size: 15px;
}

.floor-speech-toolbar select {
  border: 1px solid #dfe3ef;
  border-radius: 12px;
  padding: 10px 38px 10px 14px;
  background: #fff;
  color: var(--floor-speech-ink);
}

.floor-speech-list {
  overflow: auto;
  padding: 0 14px 16px;
  scrollbar-width: thin;
}

.floor-speech-item {
  width: 100%;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 36px;
  gap: 12px;
  align-items: center;
  padding: 13px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--floor-speech-line);
  border-radius: 15px;
  background: #fff;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: .18s;
}

.floor-speech-item:hover {
  transform: translateY(-1px);
  border-color: #d8cdfd;
}

.floor-speech-item.active {
  border: 2px solid #8b64fa;
  background: linear-gradient(90deg, #fbf8ff, #f7f3ff);
}

.floor-speech-iicon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}

.floor-speech-iicon:after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .42);
}

.floor-speech-iicon svg {
  width: 31px;
  height: 31px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .1));
}

/* A real video's own thumbnail replaces the decorative category icon/circle-backdrop treatment
   above - a live YouTube result has no curated category, and showing its actual thumbnail is more
   honest than a fabricated icon. */
.floor-speech-iicon--photo:after {
  display: none;
}
.floor-speech-iicon--photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The row is no longer itself one giant button (a nested play <a> inside a <button> would be
   invalid/unreliable) - it's a plain container hosting two separate, non-nested interactive
   elements side by side: a select button (title/meta) and a play link (opens the video). Layout
   is unchanged (same 3-column grid the row already used). */
.floor-speech-item-select {
  display: block;
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.floor-speech-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 36px 18px;
  text-align: center;
  color: var(--floor-speech-muted);
  font-size: 13px;
}

.floor-speech-status strong {
  color: var(--floor-speech-ink);
  font-size: 14px;
}

.floor-speech-status-retry {
  margin-top: 4px;
  padding: 8px 16px;
  border: 1px solid var(--floor-speech-purple);
  border-radius: 999px;
  background: #fff;
  color: var(--floor-speech-purple);
  font-weight: 800;
  font-size: 12.5px;
  cursor: pointer;
}

.floor-speech-status-retry:hover {
  background: var(--floor-speech-purpleSoft);
}

.floor-speech-skeleton-row {
  height: 78px;
  margin-bottom: 8px;
  border-radius: 15px;
  background: linear-gradient(90deg, #f4f2fb 25%, #eee9ff 37%, #f4f2fb 63%);
  background-size: 400% 100%;
  animation: floorSpeechShimmer 1.4s ease infinite;
}

@keyframes floorSpeechShimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.floor-speech-item:nth-child(1) .floor-speech-iicon { background: linear-gradient(145deg, #e9fff1, #d7f7e4); color: #28b967; }
.floor-speech-item:nth-child(2) .floor-speech-iicon { background: linear-gradient(145deg, #e5fbff, #d4f4f4); color: #16b2a5; }
.floor-speech-item:nth-child(3) .floor-speech-iicon { background: linear-gradient(145deg, #edf3ff, #dbe6ff); color: #3f75ef; }
.floor-speech-item:nth-child(4) .floor-speech-iicon { background: linear-gradient(145deg, #fff0f6, #ffe0eb); color: #fb4b7c; }
.floor-speech-item:nth-child(5) .floor-speech-iicon { background: linear-gradient(145deg, #f3edff, #e5dbff); color: #7551ef; }
.floor-speech-item:nth-child(6) .floor-speech-iicon { background: linear-gradient(145deg, #fff4e8, #ffe5c8); color: #f59a24; }
.floor-speech-item:nth-child(7) .floor-speech-iicon { background: linear-gradient(145deg, #fff0f3, #ffdce4); color: #ef4c69; }
.floor-speech-item:nth-child(8) .floor-speech-iicon { background: linear-gradient(145deg, #eaf4ff, #d9e8ff); color: #3278ee; }

.floor-speech-name {
  font-weight: 850;
  font-size: 14px;
  line-height: 1.35;
}

.floor-speech-meta {
  font-size: 12px;
  color: var(--floor-speech-muted);
  margin-top: 6px;
}

.floor-speech-pill {
  display: inline-flex;
  margin-left: 9px;
  color: #168d45;
  background: #eaf9ef;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 850;
}

.floor-speech-play-mini {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f0ebff;
  color: #7046f3;
}

.floor-speech-play-mini svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  margin-left: 2px;
}

.floor-speech-detail {
  min-height: 0;
  overflow: auto;
  padding: 18px 26px 22px;
}

.floor-speech-support {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--floor-speech-greenSoft);
  color: #15924a;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 850;
}

/* See the matching comment on .floor-speech-stance[hidden] - this author-stylesheet display rule
   would otherwise silently defeat the hidden attribute/property set from JS. */
.floor-speech-support[hidden] {
  display: none;
}

.floor-speech-detail h3 {
  font-size: 27px;
  margin: 14px 0 8px;
  letter-spacing: -.02em;
}

.floor-speech-dmeta {
  display: flex;
  gap: 12px;
  align-items: center;
  color: #66718b;
  font-size: 13px;
}

.floor-speech-dmeta span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.floor-speech-dmeta svg {
  width: 17px;
  height: 17px;
}

.floor-speech-desc {
  line-height: 1.62;
  color: #38425f;
  margin: 16px 0 14px;
  font-size: 14px;
  max-width: 680px;
}

.floor-speech-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.floor-speech-tag {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #f4f2fb;
  color: #333d5c;
  font-size: 12px;
  font-weight: 750;
}

.floor-speech-tag.green {
  background: #edf9f2;
}

.floor-speech-tag svg {
  width: 17px;
  height: 17px;
}

.floor-speech-video {
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #090909;
  box-shadow: 0 12px 25px rgba(14, 18, 34, .18);
}

.floor-speech-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.floor-speech-watch-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: #6f45ef;
  font-weight: 850;
  text-decoration: none;
}

/* See the matching comment on .floor-speech-stance[hidden] - without this, toggling this link's
   hidden property from JS (loading/error/empty states) would have no actual visual effect,
   leaving a dead "Watch full speech" link (href="#") visible during those states. */
.floor-speech-watch-link[hidden] {
  display: none;
}

.floor-speech-watch-link:hover {
  text-decoration: underline;
}

.floor-speech-mfoot {
  margin: 16px 20px 18px;
  padding: 13px 16px;
  border: 1px solid #ded5ff;
  border-radius: 14px;
  background: linear-gradient(90deg, #f8f4ff, #fdfbff);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.floor-speech-fcopy {
  display: flex;
  align-items: center;
  gap: 13px;
}

.floor-speech-spark {
  width: 50px;
  height: 50px;
  color: #7347ef;
  display: grid;
  place-items: center;
}

.floor-speech-spark svg {
  width: 42px;
  height: 42px;
}

.floor-speech-fcopy strong {
  display: block;
  font-size: 13px;
}

.floor-speech-fcopy span {
  font-size: 12px;
  color: var(--floor-speech-muted);
}

.floor-speech-request {
  border: 1px solid #986ff7;
  background: #fff;
  color: #6e45ec;
  border-radius: 12px;
  padding: 11px 16px;
  font-weight: 850;
  display: flex;
  gap: 8px;
  align-items: center;
  cursor: pointer;
}

.floor-speech-request svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 900px) {
  .floor-speech-stance {
    display: none;
  }

  .floor-speech-mbody {
    grid-template-columns: 1fr;
  }

  .floor-speech-left {
    max-height: 340px;
    border-right: 0;
    border-bottom: 1px solid var(--floor-speech-line);
  }

  .floor-speech-modal {
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  .floor-speech-overlay {
    padding: 0;
  }

  .floor-speech-mhead {
    padding: 16px;
  }

  .floor-speech-hero-icon {
    width: 58px;
    height: 58px;
  }

  .floor-speech-mhead h2 {
    font-size: 23px;
  }

  .floor-speech-mhead p {
    font-size: 13px;
  }

  .floor-speech-detail {
    overflow: visible;
  }

  .floor-speech-mbody {
    overflow: auto;
  }
}

@media (max-width: 560px) {
  .floor-speech-head-left {
    gap: 11px;
  }

  .floor-speech-hero-icon {
    display: none;
  }

  .floor-speech-mfoot {
    align-items: flex-start;
  }

  .floor-speech-fcopy span {
    display: none;
  }

  .floor-speech-request {
    padding: 10px;
  }

  .floor-speech-item {
    grid-template-columns: 50px minmax(0, 1fr) 32px;
  }

  .floor-speech-iicon {
    width: 46px;
    height: 46px;
  }
}

/* Compact desktop version: same two-column layout, reduced overall footprint. */
@media (min-width: 901px) {
  .floor-speech-overlay {
    padding: 22px;
  }

  .floor-speech-modal {
    width: min(1020px, calc(100vw - 44px));
    max-height: min(760px, calc(100vh - 44px));
    border-radius: 24px;
  }

  .floor-speech-mhead {
    padding: 18px 20px 14px;
  }

  .floor-speech-head-left {
    gap: 14px;
  }

  .floor-speech-hero-icon {
    width: 62px;
    height: 62px;
  }

  .floor-speech-hero-icon svg {
    width: 36px;
    height: 36px;
  }

  .floor-speech-mhead h2 {
    font-size: 25px;
    margin-bottom: 3px;
  }

  .floor-speech-mhead p {
    max-width: 410px;
    font-size: 13px;
    line-height: 1.38;
  }

  .floor-speech-head-right {
    gap: 9px;
  }

  .floor-speech-stance {
    gap: 8px;
  }

  .floor-speech-stance span {
    padding: 9px 12px;
    font-size: 12px;
    border-radius: 11px;
  }

  .floor-speech-stance svg {
    width: 16px;
    height: 16px;
  }

  .floor-speech-close {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 26px;
  }

  .floor-speech-mbody {
    grid-template-columns: 43% 57%;
  }

  .floor-speech-toolbar {
    padding: 13px 16px 10px;
  }

  .floor-speech-toolbar strong {
    font-size: 14px;
  }

  .floor-speech-toolbar select {
    padding: 8px 34px 8px 12px;
    font-size: 13px;
  }

  .floor-speech-list {
    padding: 0 11px 12px;
  }

  .floor-speech-item {
    grid-template-columns: 48px minmax(0, 1fr) 30px;
    gap: 10px;
    padding: 10px 10px;
    margin-bottom: 6px;
    border-radius: 13px;
  }

  .floor-speech-iicon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .floor-speech-iicon svg {
    width: 27px;
    height: 27px;
  }

  .floor-speech-name {
    font-size: 12.5px;
    line-height: 1.27;
  }

  .floor-speech-meta {
    font-size: 10.5px;
    margin-top: 4px;
  }

  .floor-speech-pill {
    margin-left: 6px;
    padding: 2px 7px;
    font-size: 9px;
  }

  .floor-speech-play-mini {
    width: 28px;
    height: 28px;
  }

  .floor-speech-detail {
    padding: 15px 20px 18px;
  }

  .floor-speech-support {
    padding: 5px 9px;
    font-size: 11px;
  }

  .floor-speech-detail h3 {
    font-size: 23px;
    margin: 11px 0 7px;
  }

  .floor-speech-dmeta {
    font-size: 12px;
    gap: 10px;
  }

  .floor-speech-dmeta svg {
    width: 15px;
    height: 15px;
  }

  .floor-speech-desc {
    font-size: 12.5px;
    line-height: 1.55;
    margin: 13px 0 12px;
  }

  .floor-speech-tags {
    gap: 8px;
    margin-bottom: 12px;
  }

  .floor-speech-tag {
    padding: 8px 10px;
    font-size: 11px;
  }

  .floor-speech-tag svg {
    width: 15px;
    height: 15px;
  }

  .floor-speech-video {
    border-radius: 12px;
  }

  .floor-speech-watch-link {
    margin-top: 10px;
    font-size: 12px;
  }

  .floor-speech-mfoot {
    margin: 12px 16px 14px;
    padding: 10px 13px;
    border-radius: 13px;
  }

  .floor-speech-spark {
    width: 42px;
    height: 42px;
  }

  .floor-speech-spark svg {
    width: 35px;
    height: 35px;
  }

  .floor-speech-fcopy {
    gap: 10px;
  }

  .floor-speech-fcopy strong {
    font-size: 12px;
  }

  .floor-speech-fcopy span {
    font-size: 11px;
  }

  .floor-speech-request {
    padding: 9px 13px;
    font-size: 12px;
    border-radius: 11px;
  }
}