/* style.css — OCR 批量识别 */

:root {
  --bg:       #f8f9fb;
  --surface:  #ffffff;
  --border:   #e5e7eb;
  --text:     #1a1a2e;
  --text2:    #6b7280;
  --accent:   #4f46e5;
  --accent-h: #4338ca;
  --green:    #059669;
  --red:      #dc2626;
  --radius:   10px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[v-cloak] { display: none !important; }

html, body { height: 100%; overflow: hidden; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.5;
}

#app {
  max-width: 1260px; margin: 0 auto; padding: 14px 20px;
  display: flex; flex-direction: column; gap: 10px;
  height: 100vh; overflow: hidden;
}

/* ── Header ─────────────────────────────── */
.header { display: flex; align-items: baseline; justify-content: space-between; flex-shrink: 0; }
.header h1 { font-size: 1.05rem; font-weight: 600; }
.header .sub { font-size: .72rem; color: var(--text2); }

/* ── Toolbar ─────────────────────────────── */
.toolbar{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.toolbar .count{font-size:.8rem;color:var(--text2);margin-right:auto;}
.timer{font-size:.78rem;color:var(--text2);font-variant-numeric:tabular-nums;min-width:40px;}

/* ── Buttons ─────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:.8rem;cursor:pointer;transition:all .12s;white-space:nowrap;}
.btn:hover{background:#f9fafb;border-color:#d1d5db;}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn.primary:hover{background:var(--accent-h);}
.btn:disabled{opacity:.4;cursor:not-allowed;}

/* ── Main ────────────────────────────────── */
.main{display:grid;grid-template-columns:330px 1fr;gap:10px;flex:1;min-height:0;overflow:hidden;}

/* ── Panel ───────────────────────────────── */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .15s;}
.panel.drag-over-panel{box-shadow:0 0 0 2px var(--accent);}
.panel-header{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:.76rem;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border);flex-shrink:0;}
.panel-header .btn-clear-header{margin-left:auto;display:inline-flex;align-items:center;gap:3px;background:none;border:1px solid var(--border);cursor:pointer;color:var(--text2);padding:3px 8px;border-radius:4px;font-size:.7rem;}
.panel-header .btn-clear-header:hover{color:var(--red);border-color:#fecaca;background:#fef2f2;}
.panel-header .btn-clear-header:disabled{opacity:.3;cursor:not-allowed;}

/* ── File List ───────────────────────────── */
.file-list{flex:1;overflow-y:auto;}
.file-item{display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;border-bottom:1px solid #f3f4f6;transition:background .1s;}
.file-item:hover{background:#f9fafb;}
.file-item.active{background:#eef2ff;border-left:2px solid var(--accent);padding-left:12px;}
.file-item .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.dot.pending{background:#d1d5db;}
.dot.processing{background:var(--accent);animation:pulse 1s infinite;}
.dot.done{background:var(--green);}
.dot.error{background:var(--red);}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.file-item .fname{flex:1;font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.file-item .ftime{font-size:.72rem;color:var(--text2);font-variant-numeric:tabular-nums;min-width:40px;text-align:right;}

/* ── Stats ───────────────────────────────── */
.stats{padding:6px 14px;border-top:1px solid var(--border);font-size:.73rem;color:var(--text2);display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0;}
.stats span{font-weight:600;color:var(--text);}

/* ── Preview split ───────────────────────── */
.preview-split{flex:1;display:flex;flex-direction:row;gap:10px;min-height:0;overflow:hidden;}
.preview-split>.panel{flex:1;min-height:0;}
.preview-split>.panel:last-child{flex:0 0 240px;}

.preview-img-wrap{flex:1;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;background:#fafafa;overflow:hidden;}
.preview-img-wrap img{max-width:100%;max-height:100%;object-fit:contain;}

.preview-text-body{flex:1;min-height:0;padding:10px 12px;overflow-y:auto;font-size:.8rem;line-height:1.65;white-space:pre-wrap;}
.preview-text-empty{color:var(--text2);font-style:italic;display:flex;align-items:center;justify-content:center;}

.placeholder-text{color:var(--text2);font-size:.8rem;}

.file-list-empty{
  flex:1;display:flex;align-items:center;justify-content:center;
  color:var(--text2);font-size:.8rem;
}

/* ── Lightbox ────────────────────────────── */
.lightbox{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.lightbox img{max-width:90vw;max-height:90vh;object-fit:contain;user-select:none;cursor:grab;}
.lightbox img:active{cursor:grabbing;}
.lightbox-close{position:absolute;top:14px;right:18px;background:none;border:none;color:#fff;font-size:1.7rem;cursor:pointer;opacity:.65;line-height:1;transition:opacity .15s;}
.lightbox-close:hover{opacity:1;}
.lightbox-zoom{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.12);color:#fff;font-size:.7rem;padding:3px 10px;border-radius:4px;}

/* ── Utility ─────────────────────────────── */
input[type=file]{display:none;}

/* ── Mobile ──────────────────────────────── */
@media (max-width: 768px) {
  #app { padding: 8px 10px; gap: 6px; }

  .header h1 { font-size: .95rem; }
  .header .sub { display: none; }

  .toolbar { flex-wrap: wrap; gap: 5px; }
  .toolbar .count { font-size: .73rem; width: 100%; margin-right: 0; }
  .btn { padding: 6px 10px; font-size: .73rem; border-radius: 5px; }

  /* 三卡片横向滑动 */
  .main {
    display: flex;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  .main>* {
    flex: 0 0 calc(100vw - 20px);
    min-width: calc(100vw - 20px);
    scroll-snap-align: start;
  }

  /* 预览拆成上下 */
  .preview-split {
    flex-direction: column !important;
    gap: 6px;
  }
  .preview-split>.panel:last-child {
    flex: 0 0 auto;
    max-height: 35vh;
  }

  .panel-header { padding: 6px 10px; font-size: .7rem; }
  .file-item { padding: 5px 10px; }
  .file-item .fname { font-size: .75rem; }
  .stats { font-size: .7rem; gap: 8px; }

  .lightbox-close { top: 10px; right: 12px; font-size: 1.4rem; }

  /* 滑动指示点 */
  .mobile-dots {
    display: flex; justify-content: center; gap: 6px;
    padding: 4px 0; flex-shrink: 0;
  }
  .mobile-dots span {
    width: 6px; height: 6px; border-radius: 50%;
    background: #d1d5db; transition: background .2s;
  }
  .mobile-dots span.active { background: var(--accent); }
}

/* 桌面端隐藏指示点 */
@media (min-width: 769px) {
  .mobile-dots { display: none; }
}