/* Keep the preview's decorative edge outside the clipped image/sticker layer.
   These selectors beat the older profile editor's rounded clipping rules. */
#plusProfileEditorModal .plus-canvas-shell,
#plusProfileEditorModal .plus-canvas-viewport,
#plusProfileEditorModal .plus-profile-canvas,
#plusProfileEditorModal .plus-canvas-profile-content,
#plusProfileEditorModal .plus-preview-profile-shell.profile-modal,
#plusProfileEditorModal .plus-preview-surface {
  overflow: visible !important;
  max-height: none !important;
  min-height: 0 !important;
}
#plusProfileEditorModal .plus-preview-profile-shell.profile-modal {
  height: auto !important;
}
#plusProfileEditorModal .plus-canvas-viewport {
  box-sizing: border-box !important;
  padding: 32px !important;
}
#plusProfileEditorModal .plus-editor-preview-panel {
  grid-template-rows: auto auto auto !important;
  align-content: start !important;
}
#plusProfileEditorModal .plus-profile-preview-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: inherit;
}
#plusProfileEditorModal #plusProfilePreviewFrame {
  display: block;
  max-width: none !important;
  border: 0;
  pointer-events: none;
}
#plusProfileEditorModal #plusCanvasFrame {
  inset: auto !important;
}

/* Keep the original compact pickers. The surrounding Background panel is
   independently scrollable, including the empty space next to its controls. */
#plusProfileEditorModal #plusProfileFrameGrid,
#plusProfileEditorModal #plusProfileGlowBlock .glow-color-list {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}
#plusProfileEditorModal #plusProfileFrameGrid {
  max-height: 310px !important;
  padding: 14px 8px 18px !important;
}
#plusProfileEditorModal #plusProfileGlowBlock .glow-color-list {
  max-height: 260px !important;
}
@media (min-width: 901px) {
  #plusProfileEditorModal #plusProfileFrameGrid { max-height: 330px !important; }
}
@media (max-width: 900px), (pointer: coarse) {
  #plusProfileEditorModal #plusProfileFrameGrid { max-height: 250px !important; }
}
#plusProfileEditorModal .plus-editor-left-panel {
  padding: 18px 24px 24px 16px !important;
}

/* The profile border radius and its frame are concentric. Frame ornaments
   follow the curved corners instead of making a second square silhouette. */
#profileViewSection {
  --profile-surface-radius: 42px;
}
#profileViewSection:is(.has-profile-frame,.has-profile-glow) > .profile-background-frame-outer,
#plusProfileEditorModal #plusCanvasFrame {
  --profile-frame-outset: 11px;
  --profile-frame-radius: calc(var(--profile-surface-radius, 42px) + var(--profile-frame-outset));
  --profile-frame-corner-offset: calc(var(--profile-frame-radius) * .292893 - 22px);
  border-radius: var(--profile-frame-radius) !important;
}
#profileViewSection:is(.has-profile-frame,.has-profile-glow) > .profile-background-frame-outer.profile-outline-glow-layer,
#plusProfileEditorModal #plusCanvasFrame.profile-outline-glow-layer {
  --profile-frame-outset: 0px;
}
:is(.profile-background-frame-outer, #plusCanvasFrame) > .yap-frame-layer {
  border-radius: inherit !important;
}
:is(.profile-background-frame-outer, #plusCanvasFrame) .yap-frame-tl {
  top: var(--profile-frame-corner-offset) !important;
  left: var(--profile-frame-corner-offset) !important;
}
:is(.profile-background-frame-outer, #plusCanvasFrame) .yap-frame-tr {
  top: var(--profile-frame-corner-offset) !important;
  right: var(--profile-frame-corner-offset) !important;
}
:is(.profile-background-frame-outer, #plusCanvasFrame) .yap-frame-br {
  bottom: var(--profile-frame-corner-offset) !important;
  right: var(--profile-frame-corner-offset) !important;
}
:is(.profile-background-frame-outer, #plusCanvasFrame) .yap-frame-bl {
  bottom: var(--profile-frame-corner-offset) !important;
  left: var(--profile-frame-corner-offset) !important;
}
:is(.profile-background-frame-outer, #plusCanvasFrame) .yap-frame-top,
:is(.profile-background-frame-outer, #plusCanvasFrame) .yap-frame-bottom {
  left: calc(var(--profile-frame-radius) + 4px) !important;
  right: calc(var(--profile-frame-radius) + 4px) !important;
}
:is(.profile-background-frame-outer, #plusCanvasFrame) .yap-frame-left,
:is(.profile-background-frame-outer, #plusCanvasFrame) .yap-frame-right {
  top: calc(var(--profile-frame-radius) + 4px) !important;
  bottom: calc(var(--profile-frame-radius) + 4px) !important;
}
@media (max-width: 900px), (max-height: 700px) and (max-width: 1100px) {
  #profileViewSection { --profile-surface-radius: 34px; }
  #plusProfileEditorModal .plus-editor-left-panel {
    padding: 14px 18px 20px !important;
  }
}
