/* ============================================
   Pixia - OCR PDF (ocr.html)
   Complements css/ai-tool.css (.at-* primitives)
   Scope: body.at-ocr-pdf
   ============================================ */

body.at-ocr-pdf {
  --op-accent: #059669;
  --op-accent-2: #10b981;
  --op-accent-d: #047857;
  --op-line: var(--glass-border);
  --op-soft: var(--bg-secondary);
}

body.at-ocr-pdf .at-kicker {
  background: linear-gradient(135deg, #059669, #10b981);
}

body.at-ocr-pdf .at-drop-icon {
  background: linear-gradient(135deg, rgba(5, 150, 105, .18), rgba(16, 185, 129, .18));
  color: #047857;
}

body.at-ocr-pdf .at-btn {
  background: linear-gradient(135deg, #059669, #10b981);
  box-shadow: 0 16px 34px -18px rgba(5, 150, 105, .95);
}

/* ---------- Layout ---------- */
.op-tool {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 344px);
  gap: 22px;
  align-items: start;
}

.op-col,
.op-side {
  min-width: 0;
  display: grid;
  gap: 18px;
  align-content: start;
}

/* Settings column follows the page scroll (sticky) while the main column scrolls. */
.op-side {
  position: sticky;
  inset-block-start: 84px;
  align-self: start;
}

@media (max-width: 900px) {
  .op-tool { grid-template-columns: 1fr; }
  .op-side { position: static; }
}

/* ---------- Panel heads ---------- */
.op-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-end: 4px;
}

.op-head h2 { margin: 0; }

.op-count {
  margin-inline-start: auto;
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.op-clear {
  margin-inline-start: 8px;
  flex: none;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-secondary);
  font: 600 12px/1 var(--font-body);
  cursor: pointer;
  transition: border-color .2s var(--at-ease), color .2s var(--at-ease), background .2s var(--at-ease);
}

.op-clear:hover { border-color: #ef4444; color: #ef4444; background: color-mix(in srgb, #ef4444 10%, var(--glass-bg)); }

.op-hint {
  margin: 0 0 4px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-tertiary);
}

/* ---------- Empty state ---------- */
.op-empty {
  padding: 26px 18px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13.5px;
  line-height: 1.7;
  border: 1px dashed var(--glass-border);
  border-radius: var(--at-radius-md);
}

.op-empty[hidden] { display: none; }

/* ---------- Document blocks ---------- */
.op-doc {
  border: 1px solid var(--glass-border);
  border-radius: var(--at-radius-lg);
  background: var(--glass-bg);
  overflow: hidden;
}

.op-doc + .op-doc { margin-block-start: 14px; }

.op-doc.is-error { border-color: color-mix(in srgb, #ef4444 45%, var(--glass-border)); }

.op-doc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-block-end: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--accent-primary) 5%, transparent);
}

.op-doc-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--op-accent) 14%, transparent);
  color: var(--op-accent-d);
}

.op-doc-icon svg { width: 20px; height: 20px; }

.op-doc-info { min-width: 0; flex: 1; }

.op-doc-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.op-doc-sub { font-size: 11.5px; color: var(--text-muted); }

.op-status {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-muted);
  white-space: nowrap;
}

.op-status.is-working { color: var(--op-accent-d); border-color: color-mix(in srgb, var(--op-accent) 40%, transparent); background: color-mix(in srgb, var(--op-accent) 10%, var(--glass-bg)); }
.op-status.is-done    { color: #047857; border-color: color-mix(in srgb, #10b981 40%, transparent); background: color-mix(in srgb, #10b981 12%, var(--glass-bg)); }
.op-status.is-error   { color: #dc2626; border-color: color-mix(in srgb, #ef4444 40%, transparent); background: color-mix(in srgb, #ef4444 10%, var(--glass-bg)); }

.op-icon-btn {
  flex: 0 0 auto;
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 7px;
  border-radius: 8px;
  display: inline-flex;
  transition: color .2s var(--at-ease), background .2s var(--at-ease);
}

.op-icon-btn svg { width: 17px; height: 17px; }
.op-icon-btn:hover:not(:disabled) { color: var(--op-accent-d); background: color-mix(in srgb, var(--op-accent) 12%, transparent); }
.op-icon-btn.is-dl:hover:not(:disabled) { color: #7c3aed; background: color-mix(in srgb, #7c3aed 12%, transparent); }
.op-icon-btn.op-remove:hover:not(:disabled) { color: #ef4444; background: color-mix(in srgb, #ef4444 12%, transparent); }
.op-icon-btn:disabled { opacity: .3; cursor: default; }

/* ---------- Page grid ---------- */
.op-pages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 12px;
  padding: 14px;
}

.op-page {
  position: relative;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: var(--op-soft);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s var(--at-ease), box-shadow .2s var(--at-ease), transform .2s var(--at-ease);
}

.op-page:hover { border-color: color-mix(in srgb, var(--op-accent) 55%, var(--glass-border)); transform: translateY(-1px); }

.op-page.is-active {
  border-color: var(--op-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--op-accent) 30%, transparent);
}

.op-page-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--op-soft);
}

.op-page-num {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-start: 6px;
  font: 700 10.5px/1 var(--font-body);
  color: #fff;
  background: rgba(15, 23, 42, .68);
  border-radius: 6px;
  padding: 3px 6px;
}

.op-page-conf {
  position: absolute;
  inset-block-end: 6px;
  inset-inline-start: 6px;
  font: 700 10px/1 var(--font-body);
  color: #fff;
  background: rgba(5, 150, 105, .92);
  border-radius: 6px;
  padding: 3px 6px;
}

.op-page-conf.low { background: rgba(220, 38, 38, .92); }
.op-page-conf.mid { background: rgba(180, 83, 9, .92); }

.op-page-veil {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, .55);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  padding: 6px;
}

.op-page-veil[hidden] { display: none; }
.op-page-veil svg { width: 22px; height: 22px; }
.op-page-veil.is-error { background: rgba(153, 27, 27, .82); }

.op-spin {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  animation: op-spin .7s linear infinite;
}

@keyframes op-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .op-page { transition: none; }
}

/* ---------- Settings fields ---------- */
.op-field { display: grid; gap: 7px; margin-block-end: 14px; }
.op-field:last-child { margin-block-end: 0; }

.op-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.op-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding: 11px 38px 11px 13px;
  border-radius: var(--at-radius-md);
  border: 1px solid var(--glass-border);
  background-color: var(--glass-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color .2s var(--at-ease), box-shadow .2s var(--at-ease);
}

[dir="rtl"] .op-select {
  padding: 11px 13px 11px 38px;
  background-position: left 12px center;
}

.op-select:focus-visible {
  outline: none;
  border-color: var(--op-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--op-accent) 22%, transparent);
}

body.at-ocr-pdf .at-switch { margin-block-end: 10px; }
body.at-ocr-pdf .at-switch:last-child { margin-block-end: 0; }

.op-switch-label { display: grid; gap: 3px; min-width: 0; }
.op-switch-label .op-hint { margin: 0; }

.op-advanced {
  margin-block-start: 12px;
  border-block-start: 1px solid var(--glass-border);
  padding-block-start: 14px;
}

.op-advanced > summary {
  cursor: pointer;
  list-style: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.op-advanced > summary::-webkit-details-marker { display: none; }

.op-advanced > summary::after {
  content: "＋";
  float: inline-end;
  color: var(--text-muted);
}

.op-advanced[open] > summary::after { content: "－"; }

.op-advanced > div { margin-block-start: 12px; }

/* ---------- Run / progress ---------- */
.op-actions-stack { display: grid; gap: 10px; }
.op-actions-stack .at-btn { width: 100%; justify-content: center; }

.op-progress {
  display: none;
  margin-block-start: 14px;
  gap: 8px;
}

.op-progress.show { display: grid; }

.op-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--op-soft);
  overflow: hidden;
}

.op-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--op-accent-d), var(--op-accent-2));
  transition: width .3s var(--at-ease);
}

.op-progress-msg {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.op-spinner {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--op-accent) 30%, transparent);
  border-top-color: var(--op-accent);
  animation: op-spin .7s linear infinite;
}

.op-spinner[hidden] { display: none; }

/* ---------- Summary ---------- */
.op-sum { display: grid; gap: 2px; }

.op-sum-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-block-end: 1px solid var(--glass-border);
  font-size: 13px;
}

.op-sum-row:last-child { border-block-end: 0; }
.op-sum-row > span { color: var(--text-tertiary); }
.op-sum-row b {
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.op-sum-row b.is-good { color: #047857; }
.op-sum-row b.is-mid  { color: #b45309; }
.op-sum-row b.is-low  { color: #b91c1c; }

/* ---------- Preview ---------- */
.op-preview-empty {
  padding: 22px 14px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
  line-height: 1.6;
  border: 1px dashed var(--glass-border);
  border-radius: var(--at-radius-md);
  min-height: 67px;
}

.op-preview {
  display: grid;
  gap: 10px;
}

.op-preview[hidden] { display: none; }

.op-preview-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.op-preview-thumb {
  width: 62px;
  height: 82px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: var(--op-soft);
}

.op-preview-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.op-preview-meta { font-size: 11.5px; color: var(--text-muted); }

.op-text {
  display: block;
  width: 100%;
  min-height: 180px;
  max-height: 420px;
  resize: vertical;
  padding: 12px 14px;
  border-radius: var(--at-radius-md);
  border: 1px solid var(--glass-border);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.op-text:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--op-accent) 60%, transparent);
  outline-offset: 1px;
}

.op-preview-bar { display: flex; align-items: center; gap: 10px; }
.op-preview-bar .op-mini { margin-inline-start: auto; }

.op-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-secondary);
  font: 600 12px/1 var(--font-body);
  cursor: pointer;
  transition: border-color .2s var(--at-ease), color .2s var(--at-ease), background .2s var(--at-ease);
}

.op-mini svg { width: 13px; height: 13px; }
.op-mini:hover:not(:disabled) {
  border-color: var(--op-accent);
  color: var(--text-primary);
  background: color-mix(in srgb, var(--op-accent) 10%, var(--glass-bg));
}
.op-mini:disabled { opacity: .45; cursor: default; }

/* ---------- Export ---------- */
.op-export { display: grid; gap: 9px; }
.op-export .at-btn { width: 100%; justify-content: center; }

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
  .op-pages { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .op-doc-head { flex-wrap: wrap; }
}