.geo-teams-viewer {
  width: 100%;
  margin: 12px 0;
}

.geo-teams-canvas {
  width: 100%;
  height: auto;
  display: block;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
}

/* Werkruimte: canvas + onderdelen + cups (+ handmatige tools); kan fullscreen */
.geo-teams-editor-frame {
  position: relative;
  margin: 10px 0;
  padding: 10px 12px 12px;
  border: 1px solid #dcdcde;
  border-radius: 8px;
  background: #fcfcfc;
  box-sizing: border-box;
}

.geo-teams-editor-frame__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px 0;
}

.geo-teams-editor-fs.button {
  font-size: 12px;
  min-height: 28px;
  line-height: 26px;
}

.geo-teams-editor-frame:fullscreen,
.geo-teams-editor-frame:-webkit-full-screen {
  margin: 0;
  width: 100%;
  min-height: 100%;
  max-height: 100%;
  border: none;
  border-radius: 0;
  background: #f0f0f1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 16px 20px 24px;
}

.geo-teams-editor-frame:fullscreen .geo-teams-editor-frame__bar,
.geo-teams-editor-frame:-webkit-full-screen .geo-teams-editor-frame__bar {
  flex-shrink: 0;
}

/* Fullscreen = focus op bewerken: geen referentie-overlay, geen AI-preview, geen lange uitleg */
.geo-teams-editor-frame:fullscreen .geo-teams-overlay-panel,
.geo-teams-editor-frame:-webkit-full-screen .geo-teams-overlay-panel,
.geo-teams-editor-frame:fullscreen .geo-teams-ai-preview-wrap,
.geo-teams-editor-frame:-webkit-full-screen .geo-teams-ai-preview-wrap {
  display: none !important;
}

.geo-teams-editor-frame:fullscreen > p.description,
.geo-teams-editor-frame:-webkit-full-screen > p.description {
  display: none !important;
}

/*
 * Fullscreen: zelfde beeldverhouding als buffer (900×620 op het canvas-element).
 * Geen flex-grow / min-height die het hexacon rekken of persen.
 */
.geo-teams-editor-frame:fullscreen .geo-teams-canvas,
.geo-teams-editor-frame:-webkit-full-screen .geo-teams-canvas {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 220px);
  aspect-ratio: 900 / 620;
  margin: 0 auto;
  display: block;
}

@media (max-width: 782px) {
  .geo-teams-editor-frame:fullscreen .geo-teams-canvas,
  .geo-teams-editor-frame:-webkit-full-screen .geo-teams-canvas {
    max-height: calc(100vh - 260px);
  }
}

/* Onderdeel-knoppen: beter contrast (Contour / Vulling / Achtergrond) */
.geo-teams-ai-player .geo-teams-part-buttons,
.geo-teams-simple-viewer .geo-teams-part-buttons {
  gap: 10px;
}

.geo-teams-ai-player button.geo-teams-part-btn,
.geo-teams-simple-viewer button.geo-teams-part-btn {
  min-height: 36px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 6px;
  border: 1px solid #646970;
  background: linear-gradient(180deg, #fdfdfd 0%, #e0e4e9 100%);
  color: #1d2327;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.geo-teams-ai-player button.geo-teams-part-btn:hover,
.geo-teams-simple-viewer button.geo-teams-part-btn:hover {
  border-color: #50575e;
  background: linear-gradient(180deg, #fff 0%, #e8ecf0 100%);
  color: #000;
}

.geo-teams-ai-player button.geo-teams-part-btn.is-selected,
.geo-teams-simple-viewer button.geo-teams-part-btn.is-selected {
  border-color: #2271b1;
  background: linear-gradient(180deg, #e8f4fc 0%, #d0e7f8 100%);
  color: #0a4b78;
  box-shadow: 0 0 0 1px rgba(34, 113, 177, 0.45), 0 1px 3px rgba(0, 0, 0, 0.1);
}