/* editor.css — Editor layout, dropzone, file queue and AB Roll lanes */
/* Editor layout */
.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr);
                  border: 1px solid var(--line); border-radius: 0 var(--r) var(--r) 0;
                  background: var(--paper); box-shadow: var(--shadow); margin-bottom: 1.4rem; }
.editor-main { min-width: 0; padding: 1.5rem 1.5rem 1.4rem; }
.editor-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
                   align-items: end; gap: 1.5rem; margin-bottom: 1.2rem; }
.editor-heading.ab-heading { display: block; }
.field { display: grid; gap: .35rem; min-width: 0; }
.field label { color: var(--ink-soft); font-size: .75rem; font-weight: 700; }
select, input[type="text"] { width: 100%; min-width: 0; min-height: 42px; padding: .55rem .75rem;
                              border: 1px solid var(--line-strong); border-radius: var(--r-xs);
                              background: white; color: var(--ink); font-size: .92rem;
                              transition: border-color .15s, box-shadow .15s; }
select:hover, input[type="text"]:hover { border-color: var(--teal); }
select:focus, input[type="text"]:focus { border-color: var(--teal);
                                            box-shadow: 0 0 0 3px var(--teal-glow); outline: none; }

/* Dropzone */
.dropzone { position: relative; min-width: 0; margin-bottom: 1rem;
            border: 2px dashed #9bc4bf; border-radius: var(--r);
            background: linear-gradient(180deg, #fbfffe 0%, #f4faf8 100%); transition: all .2s ease; }
.dropzone:hover { border-color: var(--teal);
                   background: linear-gradient(180deg, #effaf7 0%, #e3f3ef 100%); }
.dropzone.dragging { border-color: var(--teal); border-style: solid; background: var(--teal-soft);
                      transform: translateY(-2px); box-shadow: var(--shadow-teal); }
.dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; margin: -1px;
                                padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; white-space: nowrap; }
.dropzone.compact { border-radius: var(--r-sm); }
.dropzone-label { display: flex; align-items: center; gap: 1rem; min-width: 0;
                   padding: 1.4rem 1.4rem 1.1rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dropzone-label.compact-label { min-height: 96px; padding: 1rem; text-align: center;
                                  justify-content: center; }
.upload-icon { display: grid; width: 54px; height: 54px; flex: 0 0 54px;
                place-items: center; border-radius: 50%;
                background: var(--teal-soft); color: var(--teal); transition: transform .25s; }
.upload-icon svg { width: 32px; fill: none; stroke: currentColor;
                    stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.dropzone:hover .upload-icon { transform: scale(1.06) rotate(-4deg); background: var(--teal); color: white; }
.dropzone-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; line-height: 1.4; }
.dropzone-label.compact-label .dropzone-copy { align-items: center; }
.dropzone-copy strong { color: var(--teal-dark); font-size: 1rem; font-weight: 700; }
.dropzone-copy span { color: var(--muted); font-size: .78rem; }
.select-files-button, .add-more-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; padding: .45rem .85rem; border: 1px solid var(--teal);
  border-radius: var(--r-xs); color: var(--teal-dark);
  font-size: .78rem; font-weight: 700; white-space: nowrap; cursor: pointer;
  transition: all .15s;
}
.select-files-button:hover, .add-more-button:hover { background: var(--teal); color: white; }
.upload-formats { margin: 0; padding: 0 1.4rem 1rem 6.5rem; color: var(--muted); font-size: .72rem; }

/* Queue (file list) */
.queue { margin-top: 1rem; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.queue-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
               padding: .75rem .85rem; border-bottom: 1px solid var(--line); background: #f7f8f5; }
.queue-head > div { display: flex; min-width: 0; flex-direction: column; }
.queue-head strong { font-size: .86rem; }
.queue-head span { color: var(--muted); font-size: .7rem; }
.file-list { margin: 0; padding: 0; list-style: none; }
.file-list.single-list { margin-top: .55rem; border: 1px solid var(--line);
                          border-radius: var(--r-sm); background: white; overflow: hidden; }
/* Multi-file AB Roll lanes: same boxed look as the single-list variant but
   keep the index column so users see 01, 02, 03 ... for reordering context. */
.abroll-zone .file-list { margin-top: .55rem; border: 1px solid var(--line);
                          border-radius: var(--r-sm); background: white; overflow: hidden; }
.abroll-zone .file-list:empty::before { content: 'ยังไม่มีไฟล์ในคิว'; display: block;
                                          padding: 1.25rem; color: var(--muted);
                                          font-size: .82rem; text-align: center; }
.empty-queue { padding: 1.25rem; color: var(--muted); font-size: .82rem; text-align: center; }
.file-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto;
             align-items: center; gap: .8rem; min-width: 0;
             padding: .68rem .85rem; border-bottom: 1px solid var(--line); }
/* Reorder + remove live in one column so the filename keeps the free space. */
.file-actions { display: flex; align-items: center; gap: .15rem; }
.move-file { width: 26px; height: 26px; padding: 0; border: 1px solid var(--line);
             border-radius: 5px; background: var(--paper); color: var(--ink-soft);
             font-size: .58rem; line-height: 1; cursor: pointer;
             transition: background .15s, border-color .15s, color .15s; }
.move-file:hover:not(:disabled) { background: var(--teal-soft); border-color: var(--teal);
                                  color: var(--teal-dark); }
.move-file:disabled { opacity: .28; cursor: default; }
.move-file:focus-visible, .remove-file:focus-visible, .ghost:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 2px; }
.file-row:last-child { border-bottom: 0; }
.file-list.single-list .file-row { grid-template-columns: minmax(0, 1fr) auto; }
.file-index { color: var(--teal); font-family: Sora, sans-serif; font-size: .8rem; font-weight: 800; }
.file-copy { display: flex; min-width: 0; flex-direction: column; }
.file-copy strong { overflow: hidden; font-size: .82rem;
                     text-overflow: ellipsis; white-space: nowrap; }
.file-copy small { margin-top: .1rem; color: var(--muted); font-size: .68rem; }
.file-type { padding: .15rem .4rem; border: 1px solid var(--line); border-radius: 4px;
              color: var(--muted); font-size: .65rem; font-weight: 700; }
.remove-file { padding: .25rem .5rem; border: 0; background: transparent; color: var(--red);
                font-size: .75rem; font-weight: 700; cursor: pointer; transition: background .15s; }
.queue-summary-line { margin: .6rem 0 0; }
.remove-file:hover { background: var(--red-soft); border-radius: 4px; }

/* Mode hint */
.mode-hint { margin: .8rem 0 0; padding: .7rem .85rem; border: 1px solid #f0bf7c;
              border-radius: var(--r-xs); background: var(--amber-soft); color: #79480e;
              font-size: .8rem; animation: slide-down .25s ease; }
.mode-hint[data-state="error"] { border-color: #efb0a9; background: var(--red-soft); color: var(--red); }
.mode-hint[data-state="warning"] { border-color: #f0bf7c; background: var(--amber-soft); color: #79480e; }
.mode-hint[hidden] { display: none; }
@keyframes slide-down { from { opacity: 0; transform: translateY(-6px); }
                          to { opacity: 1; transform: translateY(0); } }

/* Mode guide (in editor aside) */

/* Editor action (footer row inside editor-main) */
/* Sticky submit bar.
 * With a long queue the primary action sat below the fold, so adding files and
 * pressing start meant scrolling twice. It bleeds to the panel edges so the
 * row reads as a bar rather than a floating button, and it sits BELOW the
 * progress panel in the DOM (the panels were reordered in index.html) so it
 * never covers the upload progress it describes. */
.editor-action { position: sticky; bottom: 0; z-index: 5;
                 display: flex; align-items: center; justify-content: space-between;
                 gap: 1.25rem; flex-wrap: wrap;
                 margin: 1.15rem -1.5rem -1.4rem; padding: 1rem 1.5rem;
                 border-top: 1px solid var(--line);
                 background: var(--paper);
                 box-shadow: 0 -10px 24px rgba(15, 32, 28, .07); }
.editor-action p { display: flex; min-width: 0; flex-direction: column; margin: 0;
                     color: var(--ink-soft); font-size: .8rem; }
.editor-action p strong { color: var(--ink); font-weight: 700; }
.editor-action p span { color: var(--muted); font-size: .72rem; }

/* One line that explains what the CURRENT mode select does.
 * Replaces the removed sidebar, which repeated the same two facts a third time
 * away from the control that changes them. */
.mode-desc {
  margin: .4rem 0 0; max-width: 30rem;
  color: var(--muted); font-size: .78rem; line-height: 1.45;
}

/* The queue only exists once it has something to show. An empty 126px box
 * saying "ยังไม่มีไฟล์ในคิว" competes with the dropzone above it. */
.queue.is-empty { display: none; }

.footer-note { color: var(--muted); font-size: .74rem; }