@media (max-width: 900px){
  .idea_uploader .control_buttons .upload_button{
    width: 25% !important;
    max-width: 200px;
    min-width: 120px;
    margin: 0.75rem auto;
    display: block;
  }
}

/* ===========================
   IDEA UPLOADER — MOBILE FIRST
   =========================== */
/* Type picker defaults: CLOSED */
.type-picker .type-slider{
  display: none;
  transform-origin: top center;
  transform: scaleY(0);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

/* OPEN */
.type-picker .type-slider.open{
  display: flex;
  transform: scaleY(1);
  opacity: 1;
  pointer-events: auto;
}

.idea_uploader{
  border-radius: 16px;
  color: white;
  font-family: "loubag", sans-serif;

  display: flex;
  flex-direction: column;
  align-items: center;

  position: relative;
  width: min(600px, 92vw); /* ✅ responsive */
  margin: 0 auto;
}

/* wrappers */
.mode_wrapper{
  padding: 1em;
  margin-top: .5em;
  margin-bottom: 1em;
  border-radius: 14px;
  width: 100%;
}

.mode_wrapper_no_border{
  border: none !important;

  width: 100%;
}

/* labels / titles */
.idea_uploader label{
  margin: 1em !important;
  font-family: "askwhy";
  font-size: 1.5em;
}

.widget_title{
  font-family: "anthem";
  font-size: 3em;
  margin: .25em;
}

.content_field{ text-align: center; }

/* ===========================
   EDITOR (summernote)
   =========================== */
.idea_uploader .content_field_wrapper .note-editor .note-editable{
  height: 250px;
  scrollbar-width: none;

  padding: 1em;
  color: white !important;
  background: #121524;
  caret-color: white;
  margin: 1em auto;
  text-align: center;
  font-family: "loubag";
  font-size: 1rem; /* ✅ readable default */
}
.idea_uploader .content_field_wrapper .note-editor .note-editable::-webkit-scrollbar{
  display:none;
}

/* Summernote: make the whole editor responsive */
.idea_uploader .note-editor{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.idea_uploader .note-editor .note-editable{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Summernote toolbar can also overflow */
.idea_uploader .note-editor .note-toolbar,
.idea_uploader .note-editor .note-statusbar{
  max-width: 100% !important;
  box-sizing: border-box;
  overflow-x: auto;           /* lets toolbar scroll instead of spilling */
}

/* ===========================
   URL INPUT
   =========================== */
.url_field input{
  width: min(520px, 92vw);
  font-size: 1em;
  font-family: "loubag", sans-serif;
  color: #ffffff;

  outline: none;
  transition: all 0.3s ease;

  background: transparent !important;
  border-radius: 12px;
  text-align: center;

  border: 1px solid rgba(255,255,255,.22) !important;
  padding: .65rem .75rem;
  margin: 0 auto 1em;
}

.url_field input::placeholder{
  color: rgba(255,255,255,.70);
  opacity: 1;
  transition: opacity 0.3s ease;
  font-style: italic;
}
.url_field input:focus::placeholder{ opacity: 0; }

.url_field input:focus{
  animation: pulse 0.4s ease;
  box-shadow: 0 0 0 3px rgba(110,143,255,.25);
  border-color: rgba(110,143,255,.6) !important;
}

@keyframes pulse{
  0%   { transform: scale(1);   box-shadow: 0 0 0px rgba(110,143,255,0); }
  50%  { transform: scale(1.02); box-shadow: 0 0 10px rgba(110,143,255,.35); }
  100% { transform: scale(1);   box-shadow: 0 0 0px rgba(110,143,255,0); }
}

/* ===========================
   TYPE PICKER ( + button + menu )
   =========================== */

/* give the + button breathing room on mobile */
.type-picker{
  position: relative;
  width: 100%;

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

  padding: 1.25rem 1rem 1.75rem; /* ✅ ample space */
  margin: .75rem auto 1rem;
}

.type-toggle{
  position: relative;
  width: 78px;
  height: 78px;

  border-radius: 50%;

  display: grid;
  place-items: center;

  font-size: 2.3rem;
  line-height: 1;

  /* ✅ exactly the surface panel color */
  background: var(--surface-panel);
  color: var(--text-light, #fff);

  box-shadow:
    0 18px 45px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.18);

  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;

  /* keeps the “glassy” look consistent with grid-stack */
  backdrop-filter: saturate(110%) blur(1px);
}


.type-toggle:hover{
  transform: translateY(-1px);

}

/* if you still use fold-in/out classes */
.type-toggle.fold-out{ transform: scale(0); opacity: 0; }
.type-toggle.fold-in{ transform: scale(1); opacity: 1; }

/* the menu */
.type-slider{
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;

  width: min(560px, calc(100vw - 24px)); /* ✅ never run off screen */
  max-width: 560px;

  display: flex;
  flex-wrap: wrap;             /* ✅ wraps instead of overflowing */
  justify-content: center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 18px;

  background: rgba(255,255,255,.95);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 20px 70px rgba(0,0,0,.22);

  opacity: 0;
  pointer-events: none;

  transition: transform .2s ease, opacity .2s ease;
  z-index: 60;
}

.type-slider.open{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scaleY(1);
}

/* menu items */
.type-item{
  width: 92px;                 /* ✅ comfy tap target */
  padding: .6em .5em;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;

  border-radius: 14px;
  cursor: pointer;

  font-family: "loubag", sans-serif;
  font-size: .95em;

  color: #1b2436;              /* readable on white menu */
  background: transparent;

  transition: background .15s ease, transform .15s ease;
}

.type-item:hover{
  background: rgba(46,69,102,.08);
  transform: translateY(-1px);
}

.type-item i{
  font-size: 1.6em;
  line-height: 1;
}
.type-item span{
  font-size: 0.8em;
  opacity: .85;
}

/* ===========================
   RESPONSIVE TWEAKS
   =========================== */
@media (max-width: 380px){
  .type-toggle{ width: 72px; height: 72px; font-size: 2.1rem; }
  .type-item{ width: 84px; }
}

@media (min-width: 900px){
  .type-picker{
    padding: .9rem 1rem 1.1rem;
    margin: .25rem auto .75rem;
  }
  .type-toggle{
    width: 92px;
    height: 92px;
    font-size: 2.8rem;
  }
}
/* stop any other .open rule from nuking translateX */
.type-picker .type-slider{
  left: 50%;
  right: auto;
  margin-left: 0;
  transform: translateX(-50%) scaleY(0);
}

.type-picker .type-slider.open{
  transform: translateX(-50%) scaleY(1) !important;
}
/* ===========================
   MOBILE: MENU MUST NEVER CLIP
   =========================== */
@media (max-width: 640px){

  /* keep the + roomy */
  .type-picker{ padding: 1.5rem 1rem 2rem; }

  /* turn menu into a fixed centered popover */
  .type-picker .type-slider{
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    transform: translate(-50%, -50%) scaleY(0) !important;
    width: min(560px, calc(100vw - 20px)) !important;

    /* if you have a lot of items, let them wrap */
    max-width: calc(100vw - 20px) !important;
  }

  .type-picker .type-slider.open{
    transform: translate(-50%, -50%) scaleY(1) !important;
  }
}