/**
 * Presenter-Ansicht — Tablet/Smartphone, Overview-First-Steuerung, responsive Wortwolke.
 * Stage-Ansicht (#/stage) bleibt unverändert.
 */

.view-present {
  overflow-x: hidden;
  min-width: 0;
  gap: 8px;
}

.view-present .present-head {
  min-width: 0;
  min-height: 0;
}

@media (max-width: 768px) {
  .view-present .present-top--overview {
    flex-direction: column;
    align-items: stretch;
  }

  .view-present .present-top-status,
  .view-present .present-meta {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .view-present .present-event-title {
    max-width: 100%;
  }
}

/* Bühne — Mindesthöhe für Folien (dominant) */
.view-present .present-stage {
  position: relative;
  min-height: min(58dvh, 100%);
  min-width: 0;
  flex: 1 1 auto;
}

/* Wortwolke — Canvas an Container, Rangliste darunter (nicht ausblenden) */
.view-present .wordcloud-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(160px, 22%);
  min-height: min(48dvh, 100%);
  height: 100%;
  min-width: 0;
}

.view-present #wordcloud-canvas {
  width: 100%;
  height: 100%;
  min-height: 220px;
  display: block;
}

.view-present .wordcloud-stage .wordcloud-paper {
  min-height: 220px;
}

@media (max-width: 860px) {
  .view-present .wordcloud-stage {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(220px, 1fr) auto;
    gap: 0;
  }

  .view-present .word-rank {
    display: grid !important;
    border-left: none;
    border-top: 1px solid var(--line);
    max-height: min(28dvh, 220px);
    padding: 10px 12px;
  }

  .view-present .wordcloud-export {
    top: max(8px, env(safe-area-inset-top));
    right: 8px;
  }
}

/* Steuerzone unter der Vorschau */
.view-present .present-control {
  gap: 6px;
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  min-width: 0;
}

.view-present .present-slide-strip {
  margin: 0 -2px;
  padding: 0 2px 4px;
}

.view-present .present-slide-chip {
  max-width: 9.5rem;
}

.view-present .present-special-bar-btns {
  flex-direction: row;
}

@media (max-width: 480px) {
  .view-present .present-special-bar-btns {
    flex-direction: column;
    align-items: stretch;
  }

  .view-present .present-special-bar-btn {
    width: 100%;
    justify-content: flex-start;
  }
}

.view-present .present-toolbar {
  gap: 6px;
}

.view-present .present-nav-overflow {
  position: relative;
  margin-left: auto;
}

.view-present .present-nav-overflow summary::-webkit-details-marker {
  display: none;
}

.view-present .present-nav-overflow[open] .present-toolbar-more {
  border-color: color-mix(in srgb, var(--accent, #0066cc) 45%, var(--line));
  outline: 2px solid var(--focus);
}

.view-present .present-nav-overflow-panel {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: min(100vw - 2rem, 16rem);
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  box-shadow: var(--shadow);
}

@media (max-width: 640px) {
  .view-present .present-nav-overflow-panel {
    position: fixed;
    inset: auto 12px max(12px, env(safe-area-inset-bottom)) 12px;
    max-height: min(50dvh, 100%);
    overflow-y: auto;
    min-width: 0;
  }

  .view-present .present-nav-overflow-panel .btn {
    width: 100%;
    min-height: 48px;
    justify-content: flex-start;
  }

  .view-present .present-panic-btn {
    width: 100%;
  }

  .present-panel-dialog {
    max-width: 100vw;
    width: 100%;
    margin: auto 0 0;
    border-radius: 16px 16px 0 0;
  }

  .present-panel-dialog .presenter-stats-body {
    grid-template-columns: 1fr;
  }
}

/* Moderation — volle Breite auf schmalen Screens */
@media (max-width: 640px) {
  .view-present .moderation-panel {
    position: fixed;
    inset: auto 0 max(0px, env(safe-area-inset-bottom)) 0;
    width: 100%;
    max-height: min(70dvh, 100%);
    border-radius: 16px 16px 0 0;
    top: auto;
    right: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .view-present .reaction-float {
    animation: none;
  }
}