/* z4-new — 由該區 agent 維護
   新增資料：灰色斜面表單（1995 對話框語法）× 液晶日期、霓虹掃描上傳艙、全像主按鈕。
   手機：單欄＋送出列固定在工作列上方；電腦（≥720px）：左表單 / 右上傳兩欄。 */

.v-new{--z4-bar:54px;--z4-task:54px;counter-reset:z4;gap:12px;padding-top:12px;position:relative}
/* 開窗動畫結束後不保留 transform，否則 position:fixed 的送出列會被困在頁面內 */
.v-new.enter{animation-fill-mode:backwards}

/* ---- 標頭：返回＋標題同一列 ---- */
.v-new > .back{min-height:40px;padding:4px 10px;font-size:.86rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;line-height:32px}
.v-new > h1{line-height:1.25}

/* ---- 欄位標籤：液晶序號 ---- */
.v-new .field{gap:4px;min-width:0}
.v-new .field > label{display:flex;align-items:center;gap:8px;line-height:1.3;font-size:.86rem;color:var(--ink)}
.v-new .field > label::before,.v-new .drop b::before{counter-increment:z4;content:counter(z4,decimal-leading-zero);
  font-family:var(--lcdf);font-size:1rem;line-height:1;padding:2px 5px 1px;background:var(--lcd);color:var(--lcd-ink);box-shadow:var(--in);
  text-shadow:0 0 5px rgba(124,255,233,.7);letter-spacing:.06em}
.v-new .field input{min-height:44px}
.v-new .field input:focus,.v-new .field textarea:focus{outline:1px dotted var(--ink);outline-offset:-5px;box-shadow:var(--in),0 0 0 2px var(--chrome),0 0 0 3px var(--sel),0 0 12px 2px rgba(43,246,255,.55)}
.v-new .field input::placeholder,.v-new .field textarea::placeholder{color:#8A9099}

/* 日期＝液晶讀數 */
.v-new #dDate{background:var(--lcd);color:var(--lcd-ink);font-family:var(--lcdf);font-size:1.3rem;letter-spacing:.08em;line-height:1;
  color-scheme:dark;text-shadow:0 0 6px rgba(124,255,233,.6);padding:6px 11px}
.v-new #dDate::-webkit-calendar-picker-indicator{filter:invert(.75) sepia(1) hue-rotate(120deg) saturate(4);cursor:pointer;padding:6px;margin-right:-4px}

/* 文字框＝橫線筆記紙 */
.v-new #dText{min-height:150px;line-height:24px;font-size:.95rem;padding:9px 12px;
  background:var(--field) repeating-linear-gradient(transparent 0 23px,#DCE8F0 23px 24px) 0 9px/100% 24px local}

.v-new .two{gap:8px}
.v-new > .note{line-height:1.6}

/* ---- 上傳區：舊式資料夾拖放 × 霓虹掃描艙 ---- */
.v-new .drop{min-height:120px;gap:3px;padding:12px 18px 14px;justify-content:center;overflow:hidden;isolation:isolate;
  background:#04121A;color:#BFFFF6;box-shadow:var(--in),inset 0 0 36px rgba(43,246,255,.16);
  outline:2px dashed var(--neon);outline-offset:-9px;transition:background .15s,box-shadow .15s}
.v-new .drop::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(transparent,rgba(43,246,255,.16) 50%,transparent) 0 -80px/100% 80px no-repeat,
    repeating-linear-gradient(0deg,rgba(43,246,255,.07) 0 1px,transparent 1px 3px);
  animation:none}
.v-new .drop::after{content:"";position:absolute;left:-30%;right:-30%;bottom:-6px;height:46%;z-index:-1;pointer-events:none;
  transform:perspective(160px) rotateX(58deg);transform-origin:50% 100%;opacity:.55;
  background-image:linear-gradient(rgba(255,79,216,.55) 1px,transparent 1px),linear-gradient(90deg,rgba(43,246,255,.5) 1px,transparent 1px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(transparent,#000 85%);mask-image:linear-gradient(transparent,#000 85%)}
@keyframes z4scan{to{background-position:0 calc(100% + 80px),0 0}}
.v-new .drop input{inset:0;width:100%;height:100%;z-index:2;opacity:0;cursor:pointer;font-size:0}
.v-new .drop .ico{filter:drop-shadow(0 0 8px rgba(255,226,122,.45))}
.v-new .drop b{display:inline-flex;align-items:center;gap:8px;color:var(--neon);text-shadow:0 0 8px rgba(43,246,255,.65);font-size:1.02rem}
.v-new .drop b::before{color:var(--lcd-ink);box-shadow:inset 0 0 0 1px rgba(43,246,255,.5)}
.v-new .drop .small{color:#8CB8B1;font-size:.78rem;line-height:1.55;max-width:34em}
.v-new .drop:hover{background:#062030;box-shadow:var(--in),inset 0 0 44px rgba(43,246,255,.26)}
.v-new .drop:focus-within{outline:2px solid var(--neon);box-shadow:var(--in),inset 0 0 44px rgba(43,246,255,.3)}
.v-new .drop:active{background:#03202A}
.v-new .drop.over{background:#1A0A26;outline:3px dashed var(--neon-2);outline-offset:-10px;
  box-shadow:var(--in),inset 0 0 0 4px rgba(255,79,216,.25),inset 0 0 60px rgba(255,79,216,.45)}
.v-new .drop.over::before{animation:z4scan 1s linear infinite;background:linear-gradient(transparent,rgba(255,79,216,.3) 50%,transparent) 0 -80px/100% 80px no-repeat,repeating-linear-gradient(0deg,rgba(255,79,216,.1) 0 1px,transparent 1px 3px)}
.v-new .drop.over .ico{animation:z4bob .5s steps(2) infinite alternate}
.v-new .drop.over b{color:#FFC6F2;text-shadow:0 0 10px rgba(255,79,216,.9)}
@keyframes z4bob{to{transform:translateY(-4px)}}

/* ---- 檔案清單 ---- */
.v-new .files{gap:0;padding:4px;max-width:100%}
.v-new .file{grid-template-columns:48px minmax(0,1fr) auto;gap:10px;padding:6px 4px;min-height:60px}
.v-new .file .thumb{position:relative}
.v-new .file .thumb::after{content:"";position:absolute;inset:2px;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(43,246,255,.12) 0 1px,transparent 1px 3px)}
.v-new .file .nm{font-size:.9rem}
.v-new .file .st{display:block;width:fit-content;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;padding:0 6px;background:var(--lcd);color:var(--lcd-ink);font-family:var(--lcdf);font-size:.95rem;line-height:1.35;letter-spacing:.04em}
.v-new .file .st.err{background:#2A0008;color:#FF8FA3;white-space:normal}
.v-new .file .ops{gap:3px}
.v-new .file .icon{width:40px;height:40px}
.v-new .file .icon svg{width:16px;height:16px}
.v-new .file .icon:hover{background:var(--chrome-2)}
.v-new .file .icon:focus-visible{outline:1px dotted var(--ink);outline-offset:-5px}
.v-new .file .icon[data-act=removeFile]:hover{color:var(--imp)}

/* 空狀態：虛線收件匣＋液晶計數 */
.v-new .files-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 18px;text-align:center;
  outline:2px dashed #9AA0A8;outline-offset:-8px;background:var(--field) repeating-linear-gradient(0deg,rgba(11,42,146,.035) 0 1px,transparent 1px 3px)}
.v-new .files-empty::before{content:"FILES 00";font-family:var(--lcdf);font-size:1rem;line-height:1;letter-spacing:.1em;padding:3px 8px 2px;
  background:var(--lcd);color:var(--lcd-ink);box-shadow:var(--in);text-shadow:0 0 5px rgba(124,255,233,.6)}
.v-new .files-empty .hint{font-size:.78rem;line-height:1.5;color:var(--ink-2);max-width:22em}

/* ---- 送出列 ---- */
.v-new .actions{gap:8px;flex-wrap:nowrap;min-width:0}
.v-new .actions .btn{min-height:44px}
.v-new .actions .btn.primary{padding-inline:20px}
.v-new .actions .btn.ghost{flex:none}
.v-new .actions .hint{font-family:var(--pixel);font-size:.78rem;color:var(--ink-2);min-width:0}
.v-new .actions > .hint:first-child{flex:1;font-size:.84rem;line-height:1.45;color:var(--ink)}
.v-new .actions .btn ~ .hint{font-family:var(--lcdf);font-size:1.05rem;letter-spacing:.04em;background:var(--lcd);color:var(--lcd-ink);box-shadow:var(--in);
  padding:3px 8px;white-space:nowrap;text-shadow:0 0 5px rgba(124,255,233,.6)}

/* ---------- 手機 ----------
   頁長預算：.wrap 最小高 = 844 − 工作列 54 = 790；#main 從 y78 起，扣狀態列 26、#main 下留白 10，
   .v-new 必須在 y754 前結束才不會多出捲動。送出列固定在 736–790（蓋住狀態列），內容須在 736 前結束。 */
@media (max-width:719px){
  .v-new{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;row-gap:8px;padding-top:0;
    padding-bottom:20px}
  .v-new > *{grid-column:1 / -1;min-width:0}
  .v-new > h1{grid-column:1;grid-row:1;font-size:1.15rem;line-height:1.2}
  .v-new > .back{grid-column:2;grid-row:1;max-width:10em;min-height:40px;line-height:32px;justify-self:end;box-shadow:var(--out);background:var(--chrome)}
  /* 日期說明移到檔案清單後方，讓欄位連續 */
  .v-new > .files,.v-new > .err-box,.v-new > .progress{order:4}
  .v-new > .date-note{order:5;font-size:.76rem;line-height:1.5;padding:5px 9px}
  .v-new > .note:not(.date-note){order:6}
  .v-new > .actions{order:9}
  .v-new .two{grid-template-columns:minmax(0,1fr);gap:6px}
  .v-new .field > label{line-height:1.2}
  .v-new #dText{min-height:136px}
  .v-new .drop{min-height:104px;padding:8px 16px 10px;gap:2px}
  .v-new .drop .ico{transform:scale(.72);margin:-6px 0 -5px}
  .v-new .drop .small{font-size:.72rem;line-height:1.45}
  .v-new .files-empty{min-height:62px}

  .v-new > .actions{position:fixed;z-index:14;left:0;right:0;bottom:calc(var(--z4-task) + env(safe-area-inset-bottom,0px));height:var(--z4-bar);
    margin:0;padding:5px 10px;gap:6px;background:var(--chrome);box-shadow:inset 0 1px var(--hi),inset 0 -1px var(--lo),0 -1px 0 var(--dk),0 -6px 14px rgba(0,0,0,.25)}
  .v-new > .actions::before{content:"";position:absolute;left:0;right:0;top:-3px;height:2px;background:var(--foil);background-size:300% 100%;animation:none}
  .v-new .actions .btn.primary{flex:1;min-width:0;padding-inline:10px}
  .v-new .actions .btn.ghost{order:3;padding-inline:12px}
  /* 剩餘次數：送出列內的液晶小窗（兩行） */
  .v-new .actions .btn ~ .hint{order:2;flex:none;height:44px;width:90px;display:flex;align-items:center;justify-content:center;text-align:center;
    white-space:normal;font-family:var(--pixel);font-size:.74rem;line-height:1.3;letter-spacing:.02em;padding:2px 6px}
}

/* ---------- 電腦：兩欄 ---------- */
@media (min-width:720px){
  .v-new{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);column-gap:16px;row-gap:12px;align-items:start;
    grid-template-rows:auto auto 120px auto;padding-top:14px}
  .v-new > *{grid-column:1 / -1;min-width:0}
  .v-new > h1{grid-column:1;grid-row:1;align-self:center}
  .v-new > .back{grid-column:2;grid-row:1;justify-self:end;align-self:center;max-width:100%}
  .v-new > .two{grid-column:1;grid-row:2}
  .v-new > h1 + .note{grid-column:1;grid-row:2;align-self:stretch}
  .v-new > .field{grid-column:1;grid-row:3 / 5;align-self:stretch}
  .v-new > .field #dText{flex:1;min-height:246px}
  .v-new > .drop{grid-column:2;grid-row:2 / 4;align-self:stretch;min-height:200px}
  .v-new > .files{grid-column:2;grid-row:4;max-height:320px;overflow:auto}
  .v-new .two{grid-template-columns:minmax(0,1fr) 12.5em}
  .v-new #dDate{font-size:1.15rem}
  .v-new .drop .small{font-size:.76rem}
  .v-new > .date-note{padding:5px 10px}
  .v-new > .files-empty{align-self:stretch;min-height:120px}
  .v-new > .actions{margin-top:2px;padding:8px 10px;background:var(--chrome);box-shadow:var(--out)}
  .v-new .actions .btn ~ .hint{margin-left:auto}
  /* 窄右欄：檔名獨佔一行，狀態與按鈕在第二行 */
  .v-new .file{grid-template-columns:48px minmax(0,1fr) auto;grid-template-areas:"th nm nm" "th st ops";row-gap:2px;column-gap:10px;align-items:center}
  .v-new .file > div:not(.thumb):not(.ops){display:contents}
  .v-new .file .thumb{grid-area:th;align-self:start;margin-top:3px}
  .v-new .file .nm{grid-area:nm}
  .v-new .file .st{grid-area:st;margin-top:0}
  .v-new .file .ops{grid-area:ops}
}

/* ===== 整合 r3 ===== */
/* 5. 新增頁手機：返回列與選單列之間留 12px；文字框 180 高 */
@media (max-width:640px){
  .v-new{padding-top:14px}
  .v-new #dText{min-height:180px}
}

/* ===== 整合 r4：剩餘次數放進主按鈕當副標；送出列只剩主按鈕＋取消 ===== */
.v-new .actions .btn.primary{flex-direction:column;gap:0;line-height:1.2}
.v-new .actions .btn.primary .quota{font-family:var(--lcdf);font-size:.95rem;letter-spacing:.04em;opacity:.8}

/* ===== 整合 r5 ===== */
/* 日期欄不要搶過文字框；取消鈕和主按鈕同高 */
.v-new .field input[type=date]{font-size:1.3rem;text-shadow:0 0 4px rgba(124,255,233,.35)}
.v-new .actions .btn{align-self:stretch}

/* 修正（iOS）：日期欄不撐出畫面。iOS 的 date 輸入框有自己的最小寬度、會忽略 width，需取消原生外觀 */
.v-new #dDate{-webkit-appearance:none;appearance:none;display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box;min-height:48px;text-align:left}
.v-new #dDate::-webkit-date-and-time-value{text-align:left;margin:0}
@media (max-width:719px){.v-new #dDate{font-size:1.1rem}}