/* ==== EDITOR PREVIEW — unified classic version ==== */
#editorPreview,
.editor-preview {
  background: none;
  border: 1px solid #ddd;
  height: 200px;
  min-height: 220px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#editorPreview img,
#editorPreview video,
.editor-preview img,
.editor-preview video {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

#editorPreview p,
.editor-preview p {
  color: #777;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Keep preview content from forcing the box to grow */
#editorPreview > *,
.editor-preview > * {
  min-width: 0;                /* flex children can shrink */
}

/* Make the message wrap nicely and not push layout */
#editorPreview p,
.editor-preview p {
  margin: 0;
  padding: 0 8px;              /* a little breathing room */
  white-space: normal;         /* allow wrapping */
  word-break: break-word;      /* break long tokens if needed */
  hyphens: auto;               /* nicer breaking where supported */
  text-align: center;
}

/* ==== EDITOR BUTTON GROUP ==== */
.editor-buttons {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0;
}

.editor-buttons button {
  flex: 1;
}

/* UNSCHEDULED */
.unscheduled-section h4 {
  margin-bottom: 10px;
}

/* Make the editor container a self-contained card */
.editor-fields {
  display: flex;               /* enables gap spacing */
  flex-direction: column;
  gap: 12px;                   /* spacing between all children */
  overflow: hidden;            /* or: display: flow-root;  either prevents margin-collapse */
  /* display: flow-root;  <-- alternative to overflow: hidden */
}

/* Remove external margins that could collapse */
.editor-buttons { margin: 0; }
.editor-notes h3 { margin: 0; }
#notesList { margin: 0; }
#deletePostBtn { margin: 0; width: 100%; } /* optional: full width */

/* Notes list: keep row height stable */
#notesList li{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  margin-bottom:4px;
  background:#f9f9f9;
  border:1px solid #ddd;
  border-radius:6px;
  min-height:40px;             /* optional: lock a comfy height */
}

/* Delete button: reserve space, fade in */
#notesList .note-del{
  width:20px;
  height:20px;
  margin-left:auto;             /* push to the right */
  border:0;
  background:transparent;
  color:#888;
  font-size:16px;
  line-height:20px;
  cursor:pointer;

  opacity:0;
  visibility:hidden;            /* hidden but space is still reserved */
  transition:opacity .15s ease, visibility 0s .15s; /* delay visibility off */
}

/* On hover, reveal without changing size */
#notesList li:hover .note-del{
  opacity:1;
  visibility:visible;           /* becomes visible, no layout shift */
  transition:opacity .15s ease; /* show immediately */
}

/* Note row */
#notesList li{
  display:flex;
  align-items:center;          /* vertical center */
  gap:10px;
  padding:10px 12px;
  margin-bottom:8px;
  background:#f9f9f9;
  border:1px solid #ddd;
  border-radius:8px;
}

/* Keep the text flexible */
#notesList li span{
  flex:1;
}

/* Delete button: perfectly centered square */
#notesList .note-del{
  display:inline-flex;          /* <— change from inline/block */
  align-items:center;           /* vertical center */
  justify-content:center;       /* horizontal center */
  width:24px;
  height:24px;
  border:0;
  background:transparent;
  color:#888;
  font-size:18px;
  line-height:1;                /* avoid baseline sag */
  cursor:pointer;
  flex-shrink:0;

  opacity:0; visibility:hidden;
  transition:opacity .15s ease, visibility 0s .15s;
}
#notesList li:hover .note-del{
  opacity:1; visibility:visible;
  transition:opacity .15s ease;
}

/* Space below the blue Add Note button */
.editor-notes #addNoteBtn{
  margin-top:8px;
  margin-bottom:12px;           /* <— adds space before first note */
}

.upload-label {
  display: inline-block;
  background: #2d52f3;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  padding: 12px 20px;
  border-radius: 6px;
  border: 2px solid var(--pp-black);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}

.upload-label:hover {
  background: #2444d4;
}

.upload-label:active {
  transform: scale(0.97);
}

.filename {
  display: block;
  margin-top: 6px;
  font-size: 0.9rem;
  color: #555;
}