/* SiteForge v8 — safe preview + non-overlay controls */

/* Keep the editor workspace at two rows. The status bar stays outside #appShell
   to avoid a MutationObserver feedback loop. */
.workspace {
  grid-template-rows: 72px minmax(0, 1fr) !important;
}

/* Reserve visual space below the canvas so the fixed status bar never covers
   the website preview. */
.canvas-area {
  padding-bottom: 82px !important;
}

.v8-statusbar.v8-statusbar-safe {
  position: fixed !important;
  left: calc(var(--left) + 12px) !important;
  right: calc(var(--right) + 12px) !important;
  bottom: 10px !important;
  top: auto !important;
  width: auto !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(105, 128, 190, .24) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(25, 34, 65, .97), rgba(16, 24, 47, .98)) !important;
  box-shadow: 0 10px 30px rgba(4, 8, 24, .28) !important;
  backdrop-filter: blur(14px);
  pointer-events: auto;
  z-index: 46 !important;
}

body.v8-focus .v8-statusbar.v8-statusbar-safe {
  left: 12px !important;
  right: 12px !important;
}

body.v8-right-collapsed .v8-statusbar.v8-statusbar-safe {
  right: 12px !important;
}

.v8-statusbar.v8-statusbar-safe .v8-status-group {
  gap: 9px;
}

.v8-statusbar.v8-statusbar-safe .v8-status-chip {
  font-size: 11px;
}

.v8-statusbar.v8-statusbar-safe button {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #b8c6e3;
  font-size: 11px;
  font-weight: 750;
}

.v8-statusbar.v8-statusbar-safe button:hover {
  color: #fff;
  border-color: rgba(117, 143, 207, .25);
  background: rgba(45, 58, 104, .72);
}

.v8-docked-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 2px;
  padding-right: 8px;
  border-right: 1px solid rgba(112, 136, 198, .18);
}

.v8-docked-actions #v8AddFab,
.v8-docked-actions #v8CheckFab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid rgba(112, 136, 198, .22);
  border-radius: 9px;
  background: rgba(31, 42, 78, .82);
  color: #dbe5ff;
}

.v8-docked-actions #v8AddFab:hover,
.v8-docked-actions #v8CheckFab:hover {
  background: rgba(48, 63, 113, .92);
}

.v8-docked-actions .sf-icon {
  width: 15px;
  height: 15px;
}

/* The old floating FAB container is no longer needed after its buttons are
   moved into the safe status bar. */
.v8-fab {
  display: none !important;
}

body.v8-presentation .v8-statusbar,
body.v8-preview-open .v8-statusbar,
body.v8-preview-open .v8-fab,
body.v8-preview-open .v8-onboarding,
body.v8-preview-open .toast-region {
  display: none !important;
}

body.v8-presentation .canvas-area {
  padding-bottom: 0 !important;
}

/* ---------------- Full preview ---------------- */
body.v8-preview-open {
  overflow: hidden !important;
}

body.v8-preview-open #modalBackdrop {
  z-index: 10000;
  background: rgba(7, 11, 25, .78);
  backdrop-filter: blur(8px);
}

#previewModal {
  z-index: 10010;
  inset: 12px !important;
  left: 12px !important;
  top: 12px !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  border: 1px solid rgba(118, 143, 207, .32);
  border-radius: 18px;
  background: #10172d;
  box-shadow: 0 34px 100px rgba(3, 7, 22, .58);
  overflow: hidden;
}

#previewModal:not([hidden]) {
  display: grid !important;
  grid-template-rows: 64px minmax(0, 1fr);
}

#previewModal .modal-header {
  min-height: 64px;
  height: 64px;
  padding: 8px 12px 8px 18px;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  border-bottom: 1px solid rgba(111, 135, 199, .22);
  background: linear-gradient(180deg, rgba(24, 33, 64, .98), rgba(18, 26, 51, .98));
  backdrop-filter: blur(18px);
}

#previewModal .modal-header > div:first-child { min-width: 0; }
#previewModal .eyebrow {
  display: block;
  margin-bottom: 2px;
  color: #8cbcff;
  font-size: 10px;
  line-height: 1;
}
#previewModal .modal-header h2 {
  margin: 0;
  overflow: hidden;
  color: #f7f9ff;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.preview-device-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(111, 136, 200, .25);
  border-radius: 12px;
  background: rgba(13, 20, 41, .72);
}
.preview-device-btn {
  min-width: 42px;
  height: 38px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #9faccc;
  font-size: 12px;
  font-weight: 800;
  transition: .16s ease;
}
.preview-device-btn:hover {
  color: #fff;
  background: rgba(47, 61, 108, .62);
}
.preview-device-btn.active {
  color: #fff;
  background: linear-gradient(135deg, #8569ff, #5c88ff 52%, #28c8ff);
  box-shadow: 0 7px 20px rgba(68, 102, 255, .24);
}
.preview-device-btn svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#previewModal .modal-header-actions { gap: 8px; }
#previewModal #previewDownloadBtn {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 11px;
  font-size: 13px;
}
#previewModal [data-close-modal] {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0 !important;
  border-radius: 11px;
  background: rgba(38, 49, 89, .76);
}
#previewModal [data-close-modal]:hover {
  background: rgba(58, 73, 128, .92);
}

#previewModal .preview-modal-body {
  min-width: 0;
  min-height: 0;
  height: auto !important;
  padding: 12px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% -20%, rgba(107, 103, 255, .12), transparent 34%), #0c1328;
}
#previewModal #fullPreviewFrame {
  width: 100%;
  height: 100%;
  max-width: 100%;
  display: block;
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 44px rgba(2, 6, 20, .30);
  transition: width .22s ease, max-width .22s ease, border-radius .18s ease;
}
#previewModal[data-preview-device="desktop"] #fullPreviewFrame {
  width: 100%; max-width: 100%;
}
#previewModal[data-preview-device="tablet"] #fullPreviewFrame {
  width: min(820px, 100%); max-width: 820px;
}
#previewModal[data-preview-device="mobile"] #fullPreviewFrame {
  width: min(410px, 100%); max-width: 410px;
}

@media (max-width: 1180px) {
  .v8-statusbar.v8-statusbar-safe {
    left: 10px !important;
    right: 10px !important;
  }
  .canvas-area { padding-bottom: 76px !important; }
}

@media (max-width: 900px) {
  #previewModal {
    inset: 7px !important;
    left: 7px !important;
    top: 7px !important;
    border-radius: 14px;
  }
  #previewModal:not([hidden]) {
    grid-template-rows: auto minmax(0, 1fr);
  }
  #previewModal .modal-header {
    min-height: 60px;
    height: auto;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 8px 10px 8px 14px;
  }
  .preview-device-switch {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: stretch;
  }
  .preview-device-btn { flex: 1; }
  #previewModal .preview-modal-body { padding: 8px; }
}

@media (max-width: 760px) {
  .workspace {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }
  .canvas-area { padding-bottom: 22px !important; }
  .v8-statusbar.v8-statusbar-safe { display: none !important; }
  #previewModal .eyebrow,
  #previewModal #previewDownloadBtn { display: none; }
  #previewModal .modal-header h2 { font-size: 14px; }
  .preview-device-btn {
    min-width: 0;
    height: 36px;
    padding: 0 8px;
    font-size: 11px;
  }
}