/**
 * Manic Pixels Web OS — Screenshot CSS
 */

.mp-ss {
  display:        flex;
  flex-direction: column;
  height:         100%;
  background:     var(--mp-window-bg-solid, #14141e);
  font-family:    var(--mp-font-ui, system-ui, sans-serif);
  color:          var(--mp-menu-fg, #e8e8f0);
  user-select:    none;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */

.mp-ss-toolbar {
  display:     flex;
  align-items: center;
  gap:         8px;
  row-gap:     6px;
  padding:     8px 12px;
  min-height:  52px;  /* garante espaço mínimo para uma linha de controles */
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  flex-wrap:   wrap;
}

.mp-ss-label {
  font-size:   11px;
  color:       rgba(255,255,255,0.45);
}

.mp-ss-select {
  background:   rgba(255,255,255,0.07);
  border:       1px solid rgba(255,255,255,0.12);
  border-radius: 5px;
  color:        var(--mp-menu-fg, #e8e8f0);
  font-family:  var(--mp-font-ui, system-ui, sans-serif);
  font-size:    12px;
  padding:      4px 8px;
  cursor:       pointer;
  outline:      none;
}
.mp-ss-select:focus { border-color: var(--mp-accent, #3daee9); }

/* ── Botões ───────────────────────────────────────────────────────────────── */

.mp-ss-btn {
  display:       flex;
  align-items:   center;
  gap:           6px;
  padding:       6px 14px;
  border:        1px solid rgba(255,255,255,0.12);
  border-radius: 5px;
  background:    rgba(255,255,255,0.06);
  color:         var(--mp-menu-fg, #e8e8f0);
  font-family:   var(--mp-font-ui, system-ui, sans-serif);
  font-size:     12px;
  cursor:        pointer;
  transition:    background 0.1s, opacity 0.1s;
  white-space:   nowrap;
}
.mp-ss-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.mp-ss-btn:hover:not(:disabled) { background: rgba(255,255,255,0.12); }
.mp-ss-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.mp-ss-btn--primary {
  background:    var(--mp-accent, #3daee9);
  border-color:  transparent;
  color:         #fff;
  font-weight:   600;
  margin-left:   auto;
}
.mp-ss-btn--primary:hover { background: var(--mp-accent-hover, #5cb8f0); }
.mp-ss-btn--save {
  background:  rgba(var(--mp-accent-rgb,61,174,233), 0.15);
  border-color: rgba(var(--mp-accent-rgb,61,174,233), 0.35);
  color:        var(--mp-accent, #3daee9);
}

/* ── Preview ─────────────────────────────────────────────────────────────── */

.mp-ss-preview {
  flex:           1;
  position:       relative;
  overflow:       hidden;
  background:     rgba(0,0,0,0.25);
  display:        flex;
  align-items:    center;
  justify-content: center;
}

.mp-ss-empty {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            12px;
  color:          rgba(255,255,255,0.25);
  font-size:      12px;
  text-align:     center;
}

.mp-ss-canvas {
  max-width:  100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}

.mp-ss-countdown {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       120px;
  font-weight:     700;
  color:           rgba(255,255,255,0.7);
  background:      rgba(0,0,0,0.5);
  pointer-events:  none;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.mp-ss-footer {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  gap:           8px;
  padding:       8px 12px;
  border-top:    1px solid rgba(255,255,255,0.06);
  flex-shrink:   0;
}

.mp-ss-info {
  font-size:  11px;
  color:      rgba(255,255,255,0.4);
}

.mp-ss-actions {
  display: flex;
  gap:     8px;
}