/* Saved rectangles describe content; hover chrome lives outside them. */
.workspace-card[data-presentation="full"] {
  --frame-side: 10px;
  --frame-top: 52px;
  --frame-bottom: 10px;
  --header-top: -42px;
  --frame-halo-x: 8px;
  --frame-halo-y: 8px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  pointer-events: auto;
}
.workspace-card[data-presentation="full"].frame-below {
  --frame-top: 10px; --frame-bottom: 52px; --header-top: 100%;
}
.workspace-card[data-presentation="full"] .preview-slot { position: relative; pointer-events: auto; box-shadow: var(--card-shadow); }
.workspace-card[data-presentation="full"] .card-handle {
  position: absolute; left: 0; right: 0; top: var(--header-top); height: 42px;
}
.workspace-card[data-presentation="full"] .card-handle,
.workspace-card[data-presentation="full"] .resize-handle { visibility: hidden; pointer-events: none; }
.workspace-card[data-presentation="full"]:is(:hover, .frame-hover, :focus-within, .dragging, .name-editing) {
  z-index: 2;
  pointer-events: auto;
}
.workspace-card[data-presentation="full"]:is(:hover, .frame-hover, .dragging) { z-index: 3; }
.workspace-card[data-presentation="full"]:is(:hover, .frame-hover, :focus-within, .dragging, .name-editing) .preview-slot { box-shadow: none; }
.workspace-card[data-presentation="full"]:is(:hover, .frame-hover, :focus-within, .dragging, .name-editing) .card-handle,
.workspace-card[data-presentation="full"]:is(:hover, .frame-hover, :focus-within, .dragging, .name-editing) .resize-handle {
  visibility: visible; pointer-events: auto;
}
/* Backdrop and hit halo retain hover across the outside overlay. */
.workspace-card[data-presentation="full"]:is(:hover, .frame-hover, :focus-within, .dragging, .name-editing)::before {
  content: ''; position: absolute;
  top: calc(0px - var(--frame-top)); bottom: calc(0px - var(--frame-bottom));
  left: calc(0px - var(--frame-side)); right: calc(0px - var(--frame-side));
  border: 1px solid color-mix(in srgb, CanvasText 18%, transparent);
  border-radius: 24px; background: Canvas; box-shadow: var(--card-shadow);
  z-index: -1; pointer-events: auto;
}
#viewport[data-presentation="full"] .workspace-card[data-presentation="full"]:is(:hover, .frame-hover, :focus-within, .dragging, .name-editing)::after {
  content: ''; position: absolute; z-index: -2;
  top: calc(0px - var(--frame-top) - var(--frame-halo-y));
  bottom: calc(0px - var(--frame-bottom) - var(--frame-halo-y));
  left: calc(0px - var(--frame-side) - var(--frame-halo-x));
  right: calc(0px - var(--frame-side) - var(--frame-halo-x));
  pointer-events: auto;
}
#viewport[data-presentation="full"] .workspace-card[data-presentation="full"] :is(.resize-n, .resize-s) {
  left: 2px; right: 2px; height: calc(var(--frame-halo-y) + 4px);
}
#viewport[data-presentation="full"] .workspace-card[data-presentation="full"] .resize-n { top: calc(0px - var(--frame-top) - var(--frame-halo-y)); }
#viewport[data-presentation="full"] .workspace-card[data-presentation="full"] .resize-s { bottom: calc(0px - var(--frame-bottom) - var(--frame-halo-y)); }
#viewport[data-presentation="full"] .workspace-card[data-presentation="full"] :is(.resize-e, .resize-w) {
  top: calc(12px - var(--frame-top)); bottom: calc(12px - var(--frame-bottom)); width: calc(var(--frame-halo-x) + 4px);
}
#viewport[data-presentation="full"] .workspace-card[data-presentation="full"] .resize-e { right: calc(0px - var(--frame-side) - var(--frame-halo-x)); }
#viewport[data-presentation="full"] .workspace-card[data-presentation="full"] .resize-w { left: calc(0px - var(--frame-side) - var(--frame-halo-x)); }
#viewport[data-presentation="full"] .workspace-card[data-presentation="full"] :is(.resize-ne, .resize-nw, .resize-se, .resize-sw) {
  width: calc(var(--frame-halo-x) + 12px); height: calc(var(--frame-halo-y) + 12px);
}
#viewport[data-presentation="full"] .workspace-card[data-presentation="full"] :is(.resize-ne, .resize-nw) { top: calc(0px - var(--frame-top) - var(--frame-halo-y)); }
#viewport[data-presentation="full"] .workspace-card[data-presentation="full"] :is(.resize-se, .resize-sw) { bottom: calc(0px - var(--frame-bottom) - var(--frame-halo-y)); }
#viewport[data-presentation="full"] .workspace-card[data-presentation="full"] :is(.resize-ne, .resize-se) { right: calc(0px - var(--frame-side) - var(--frame-halo-x)); }
#viewport[data-presentation="full"] .workspace-card[data-presentation="full"] :is(.resize-nw, .resize-sw) { left: calc(0px - var(--frame-side) - var(--frame-halo-x)); }
.workspace-card[data-presentation="full"].dragging { box-shadow: none; }
.workspace-card[data-presentation="full"].dragging::before { border-color: var(--accent); box-shadow: 0 8px 24px #00000028; }
body.dragging .workspace-card[data-presentation="full"] .preview-slot { pointer-events: none; }
body.native-dragging .workspace-card[data-presentation="full"] .preview-slot { pointer-events: none; }