#ui-layer,
.ui-plane {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#ui-layer {
  z-index: 30;
  overflow: hidden;
}

.ui-plane {
  transform: translate(0, 0);
}

.ui-screen {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(70vw, 800px);
  height: auto;
  max-height: 90vh;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  pointer-events: auto;

  color: var(--ui-color);
  background: var(--panel-bg);
  border: 2px solid var(--ui-color);
  box-shadow: 0 0 12px currentColor;

  font-family: var(--font-retro);
  font-size: 14px;
  text-align: left;
}

.ui-screen-content {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 12px;
}

.ui-screen-close {
  position: absolute;
  top: 8px;
  right: 8px;

  width: 20px;
  height: 20px;
  padding: 0;

   display: flex;
  align-items: center;
  justify-content: center;

  color: inherit;
  background: transparent;
  border: 1px solid currentColor;

  font-family: monospace;
  font-size: 20px;
  line-height: 20px;
  text-align: center;
}

.close-arrow {
  display: inline-block;
  line-height: 1;
}

.ui-screen-close.horizontal .close-arrow {
  transform: translateY(-1px);
}

.ui-screen-close:hover,
.color-btn:hover {
  box-shadow: 0 0 4px currentColor;
}

.ui-panel-title {
  margin: 0 32px 12px;
  font-size: 2.0em;
  text-align: center;
  word-break: break-word;
}

.ui-panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: block;
  max-height: 50vh;

  padding-right: 4px;            
  scrollbar-gutter: stable both-edges;     
  scrollbar-width: thin;           
  scrollbar-color: currentColor transparent;
}

.ui-panel-body::-webkit-scrollbar {
  width: 8px;
}

.ui-panel-body::-webkit-scrollbar-track {
  background: transparent;
  margin: 2px 0;                  
}

.ui-panel-body::-webkit-scrollbar-thumb {
  background: currentColor;
  border-radius: 4px;
  border: 2px solid transparent; 
  background-clip: content-box;   
}

.resume-preview,
.resume-preview img,
.ui-panel-body img,
.ui-panel-body iframe {
  width: 100%;
}

.resume-preview img,
.ui-panel-body img {
  display: block;
  height: auto;
}

.ui-panel-body img {
  max-width: 100%;
}

.ui-panel-body iframe {
  border: none;
}

.ui-panel-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  align-items: center;
}

.ui-panel-link {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  color: inherit;
  background: var(--panel-bg);
  border: 1px solid currentColor;
  text-align: center;
  text-decoration: none;
  transition: transform 0.1s ease;
  appearance: none;
  -webkit-appearance: none;
  min-height: 42px;
  line-height: 1.2;
}

.ui-panel-link:active {
  transform: translateY(-2px) scale(1.02);
  background: color-mix(in srgb, currentColor 15%, transparent);
}

body.light-mode .ui-panel-link:not(.color-btn):active {
  color: #111;
  background: rgba(0,0,0,0.08);
}

.ui-content-link,
.ui-content-back {
  color: inherit;
  background: transparent;
  font-family: var(--font-retro);
}

.ui-popout-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-popout-link .link-text,
.popout-indicator img,
#audio-fab img {
  pointer-events: none;
}

.popout-indicator {
  position: absolute;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popout-indicator img {
  width: 12px;
  height: 12px;
  object-fit: contain;
  border: none;
  box-shadow: none;
}

.ui-popout-link:hover .popout-indicator {
  transform: translate(1px, -1px);
}

/* Panel placement */
.slot-upper-left  { margin-left: -90vw; margin-top: -90vh; }
.slot-lower-left  { margin-left: -90vw; margin-top:  90vh; }
.slot-above       { margin-left: 0;        margin-top: -100vh; }
.slot-below       { margin-left: 0;        margin-top:  100vh; }
.slot-upper-right { margin-left:  90vw; margin-top: -90vh; }
.slot-lower-right { margin-left:  90vw; margin-top:  90vh; }