/* ============================================================
 * STORIES EDITOR (CSS)
 * - Modal fullscreen
 * - Stage 100vh
 * - Media fit (altura como referência)
 * - Tool bar azul + mais opções
 * - Layer boxes + panel
 * ============================================================ */

.stNoScroll { overflow: hidden !important; }

/* Wrapper */
.stEditorWrap{ width:100%; }

/* Pick box */
.stPickBox{
  background:#2d3131;
  padding:16px;
  border-radius:12px;
}
.stPickTitle{ margin:0 0 10px; color:#fff; }
.stPickHint{ color:#cfd3d3; font-size:13px; margin-top:8px; }

/* Modal */
.stModal{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  background:#0b0d10;
}
.stModal.is-open{ display:block; }

/* Topbar */
.stTopbar{
  position:absolute;
  top:0; left:0; right:0;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  z-index:30;
  background:linear-gradient(to bottom, rgba(0,0,0,.72), rgba(0,0,0,0));
}
.stTopRight{ display:flex; gap:8px; }

.stTopBtn{
  background:rgba(255,255,255,.14);
  color:#fff;
  border:0;
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  font-size:14px;
}

.stSendBtn{
  background:#fff200;
  color:#000;
  border:0;
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
  font-size:14px;
}
.stSendBtn.is-loading{
  opacity:.75;
  cursor:default;
}

/* Stage (100vh) */
.stStage{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Media */
.stMediaHolder{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.stMedia{
  height:100vh;
  width:100%;
  object-fit:cover;      /* altura manda, corta lateral */
  max-width:520px;       /* limita no desktop (fica tipo story) */
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  background:#000;
}

/* Em telas grandes, dá um “respiro” (fica mais bonito) */
@media (min-width: 900px){
  .stMedia{ height:92vh; }
}

/* Layers */
.stLayers{
  position:absolute;
  inset:0;
  z-index:20;
  pointer-events:auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Área real onde as layers “encaixam” (alinhada com a mídia) */
.stLayers:before{
  content:"";
  position:absolute;
  width:min(520px, 100%);
  height:100vh;
  max-height:100vh;
  border-radius:16px;
  pointer-events:none;
}

/* Cada layer (posicionamento em %) */
.stLayer{
  position:absolute;
  transform:translate(-50%,-50%);
  touch-action:none; /* importante p/ drag no mobile */
}

/* Caixa da layer */
.stLayerBox{
  padding:10px 12px;
  border-radius:14px;
  min-width:64px;
  max-width:260px;
  box-shadow:0 12px 24px rgba(0,0,0,.26);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.12);
  cursor:grab;
  user-select:none;
}
.stLayerBox:active{ cursor:grabbing; }

/* Tipos */
.stLayerBox--text{ }
.stLayerBox--link{ }
.stLayerBox--countdown{ }
.stLayerBox--music{ }
.stLayerBox--location{ }
.stLayerBox--poll{ padding:12px; }
.stLayerBox--question{ }

/* Text */
.stText{
  font-weight:700;
  line-height:1.15;
  word-break:break-word;
}

/* Link / music / location / countdown */
.stLink,
.stMusic,
.stLocation,
.stCountdown{
  font-weight:800;
  letter-spacing:.2px;
}

/* Poll */
.stPollQ{
  font-weight:800;
  margin-bottom:8px;
  line-height:1.2;
}
.stPollRow{
  display:flex;
  gap:8px;
}
.stPollBtn{
  border:0;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
  background:rgba(255,255,255,.18);
  color:#fff;
}

/* Tools bar (azul) */
.stTools{
  position:absolute;
  left:0; right:0;
  bottom:0;
  z-index:40;
  padding:10px 12px 14px;
  background:linear-gradient(to top, rgba(0,0,0,.86), rgba(0,0,0,0));
}

/* Linha principal (4 opções + mais) */
.stToolsRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

/* Botões das ferramentas */
.stTool{
  background:#1677ff; /* azul */
  border:0;
  color:#fff;
  font-weight:800;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-size:14px;
  box-shadow:0 10px 22px rgba(0,0,0,.25);
}
.stTool:active{ transform: translateY(1px); }

/* Botão "Mais opções" */
.stMoreBtn{
  background:rgba(22,119,255,.18);
  border:1px solid rgba(22,119,255,.45);
  color:#cfe3ff;
  font-weight:800;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
}

/* Linha de opções extras */
.stToolsMore{
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

/* Panel flutuante */
.stPanel{
  position:absolute;
  right:12px;
  top:70px;
  width:min(360px, calc(100% - 24px));
  z-index:60;
  background:rgba(20,24,28,.92);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  box-shadow:0 22px 60px rgba(0,0,0,.40);
  color:#fff;
  overflow:hidden;
}

.stPanelHead{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}
.stPanelTitle{
  font-weight:900;
  font-size:14px;
  letter-spacing:.2px;
}

/* ações do panel */
.stPanelActions{
  display:flex;
  gap:8px;
  padding:10px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.stPanelBtn{
  background:rgba(255,255,255,.12);
  color:#fff;
  border:0;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
  font-size:13px;
}
.stPanelBtnPrimary{
  background:#fff200;
  color:#000;
  border:0;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:900;
  font-size:13px;
  margin-top:10px;
}

.stPanelBody{
  padding:12px 14px 14px;
}

/* Fields */
.stFieldRow{ margin-bottom:12px; }
.stFieldLabel{
  font-size:12px;
  color:#cfd3d3;
  margin-bottom:6px;
}
.stFieldInput,
.stFieldTextarea,
.stFieldSelect{
  width:100%;
  background:#0f1215;
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
}
.stFieldTextarea{ resize:vertical; }

.stRangeWrap{
  display:flex;
  align-items:center;
  gap:10px;
}
.stFieldRange{
  flex:1;
}
.stRangeVal{
  min-width:34px;
  text-align:center;
  font-weight:900;
  background:rgba(255,255,255,.10);
  border-radius:10px;
  padding:8px 10px;
}

.stFieldColor{
  width:100%;
  height:44px;
  padding:0;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:#0f1215;
}

/* Notas */
.stPanelNote{
  margin-top:10px;
  font-size:12px;
  color:#cfd3d3;
  line-height:1.35;
}

/* Mobile: painel vira “bottom sheet” */
@media (max-width: 560px){
  .stPanel{
    left:12px;
    right:12px;
    top:auto;
    bottom:86px; /* acima da barra azul */
    width:auto;
  }
  .stMedia{ max-width:100%; border-radius:0; height:100vh; }
}

/* Ajuste extra: como você usa botão submit amarelo no tema */
button, html input[type="button"], input[type="reset"], input[type="submit"]{
  background: yellow;
  color: black;
  padding: 10px;
}