/* One measured visible viewport for handheld roots. CSS3D iframe sizing is
 * intentionally owned by the workstation, so embedded desktops skip this. */
:root {
  --display-height: 100vh;
  --display-width: 100%;
  --display-top: 0px;
  --display-left: 0px;
  --display-safe-top: env(safe-area-inset-top, 0px);
  --display-safe-right: env(safe-area-inset-right, 0px);
  --display-safe-bottom: env(safe-area-inset-bottom, 0px);
  --display-safe-left: env(safe-area-inset-left, 0px);
}
@supports (height: 100svh) { :root { --display-height: 100svh; } }
@supports (height: 100dvh) { :root { --display-height: 100dvh; } }
html[data-display-keyboard="true"] { --display-safe-bottom: 0px; }
html[data-display-viewport="true"],
html[data-display-viewport="true"] body { min-height: 0 !important; overflow: hidden; overscroll-behavior: none; }
html[data-display-viewport="true"] #screen {
  position: fixed !important;
  inset: var(--display-top) auto auto var(--display-left) !important;
  width: var(--display-width) !important;
  height: var(--display-height) !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 0 !important;
}
html[data-display-viewport="true"] #screen > .search-overlay {
  inset: 0;
  width: 100%;
  height: 100%;
  padding: max(12px, var(--display-safe-top)) max(14px, var(--display-safe-right)) max(12px, var(--display-safe-bottom)) max(14px, var(--display-safe-left));
  overflow: hidden;
}
html[data-display-viewport="true"] .search-overlay .spotlight { max-height: 100%; min-height: 0; }
html[data-display-viewport="true"] .search-overlay .search-results { flex: 1; max-height: none; min-height: 0; }
/* The manager is a child of #screen and follows its measured height. Avoid
 * adding the visual offset a second time; only its safe edges need padding. */
html[data-display-viewport="true"] .portfolio-manager {
  min-height: 0;
  padding: var(--display-safe-top) var(--display-safe-right) var(--display-safe-bottom) var(--display-safe-left);
}
html[data-display-viewport="true"] .portfolio-manager .pm-window { height: 100%; max-height: 100%; min-height: 0; }
html[data-display-viewport="true"] .portfolio-manager .pm-header { padding-top: 12px; }
html[data-display-viewport="true"] .portfolio-manager .pm-footer { padding-bottom: 11px; }
html[data-display-viewport="true"] .portfolio-manager .pm-editor,
html[data-display-viewport="true"] .portfolio-manager .pm-panel,
html[data-display-viewport="true"] .portfolio-manager .pm-form { min-height: 0; }
html[data-display-keyboard="true"][data-display-viewport="true"] .portfolio-manager .pm-header-flower { display: none; }
@media (max-width: 560px) {
  /* While typing, keep the current form and save feedback visible. The
   * project picker returns as soon as the keyboard closes. */
  html[data-display-keyboard="true"][data-display-viewport="true"] .portfolio-manager .pm-project-list { display: none; }
  html[data-display-keyboard="true"][data-display-viewport="true"] .portfolio-manager .pm-footer { gap: 4px; padding-top: 7px; padding-bottom: 7px; }
}

.display-layer[hidden], .display-layer [hidden] { display: none !important; }
.display-layer {
  box-sizing: border-box;
  position: fixed;
  inset: var(--display-top) auto auto var(--display-left);
  z-index: 1080;
  display: grid;
  align-items: end;
  justify-items: center;
  width: var(--display-width);
  height: var(--display-height);
  overflow: hidden;
  padding: max(12px, var(--display-safe-top)) max(10px, var(--display-safe-right)) max(10px, var(--display-safe-bottom)) max(10px, var(--display-safe-left));
  color: #67556f;
  font-family: inherit;
}
.display-scrim { position: absolute; inset: 0; background: #49364a40; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.display-sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(480px, 100%);
  max-height: 100%;
  min-height: 0;
  border: 1px solid #fffcf5;
  border-radius: 27px;
  background: #fffaf4;
  box-shadow: 0 20px 75px #46334c45, inset 0 1px 0 #fff;
  overflow: hidden;
  outline: none;
  animation: display-arrive .22s ease-out both;
}
.display-sheet-header { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 10px 15px 0 23px; }
.display-eyebrow { color: #aa97a5; font-size: 9px; font-weight: 550; letter-spacing: 1.8px; }
.display-close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 14px; background: #efe6f0; color: #947a9b; }
.display-close svg { width: 18px; height: 18px; }
.display-sheet-body { min-height: 0; padding: 6px 23px 9px; overflow: auto; overscroll-behavior: contain; }
.display-app-icon { display: block; width: 56px; height: 56px; margin: 1px 0 16px; border-radius: 16px; }
.display-sheet h2 { margin: 0 0 11px; color: #705b7c; font-size: clamp(20px, 5.1vw, 25px); font-weight: 550; line-height: 1.35; letter-spacing: -.5px; }
.display-sheet p { margin: 0; font-size: 12px; line-height: 1.8; color: #978397; }
.display-main-actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 20px 0 21px; }
.display-main-actions button { display: inline-flex; justify-content: center; align-items: center; gap: 22px; flex: 1 1 160px; min-height: 48px; padding: 11px 16px; border: 1px solid #d8c6de; border-radius: 14px; font: inherit; font-size: 12px; font-weight: 550; }
.display-primary { background: #a088b1; color: #fffaf9; box-shadow: inset 0 1px 0 #ffffff35; }
.display-secondary { background: #f2eaf4; color: #8e759b; }
.display-main-actions button:disabled { opacity: .55; cursor: wait; }
.display-install-guide { margin-top: 20px; padding: 17px 16px; border: 1px solid #e8dfe8; border-radius: 18px; background: #f8f2f5; }
.display-install-guide h3 { margin: 0 0 13px; color: #8b7398; font-size: 12px; font-weight: 600; }
.display-install-steps { display: grid; gap: 11px; margin: 0; padding-left: 18px; color: #9a859d; font-size: 11px; line-height: 1.7; }
.display-install-steps li { padding-left: 3px; }
.display-install-steps li::marker { color: #ac92b5; font-weight: 650; }
.display-copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; }
.display-copy-row input { flex: 1 1 150px; width: 100%; min-width: 0; min-height: 44px; padding: 9px 10px; border: 1px solid #e3d6e6; border-radius: 10px; background: #fffafc; color: #9b83a6; font: inherit; font-size: 16px; }
.display-copy-row button { min-height: 44px; padding: 9px 10px; border: 0; border-radius: 10px; background: #eaddf0; color: #957ca2; font: inherit; font-size: 11px; }
.display-sheet .display-system-note { margin-top: 15px; color: #af9daa; font-size: 10px; line-height: 1.8; }
.display-sheet .display-feedback { min-height: 20px; margin-top: 12px; color: #a17992; font-size: 11px; }
.display-sheet-footer { flex: none; padding: 4px 23px 15px; }
.display-done { display: block; width: 100%; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 13px; background: transparent; color: #9c84a8; font: inherit; font-size: 12px; }
.display-layer :is(button, input, a):focus-visible { outline: 3px solid #a58abd; outline-offset: 2px; }
@keyframes display-arrive { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
html[data-device="tablet"] .display-layer { align-items: center; }
@media (prefers-reduced-motion: reduce) { .display-sheet { animation: none; } }
body.reduce-motion .display-sheet { animation: none; }