/* assistant.css — styles for the Camera Sudoku Assistant page. Scoped under .asst-wrap. */

.asst-wrap { max-width: 640px; margin: 0 auto; padding: 8px 10px 40px; font-family: Verdana, Geneva, sans-serif; }
.asst-wrap h1 { font-size: 26px; margin: 6px 0 4px; }
.asst-intro { color: #555; font-size: 14px; margin: 0 0 14px; line-height: 1.4; }

/* Mode tabs */
.asst-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.asst-tab {
  flex: 1 1 auto; min-width: 90px; padding: 10px 8px; border: 1px solid #cfd6e4;
  background: #f4f6fb; border-radius: 8px; cursor: pointer; font-size: 14px; text-align: center;
  color: #222; transition: background .15s, border-color .15s;
}
.asst-tab.active { background: #2b6cff; border-color: #2b6cff; color: #fff; font-weight: bold; }
.asst-tab .asst-lock { font-size: 11px; opacity: .8; }

/* Capture area */
.asst-capture-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.asst-btn {
  display: inline-block; padding: 11px 16px; border-radius: 8px; border: none; cursor: pointer;
  font-size: 15px; background: #2b6cff; color: #fff;
}
.asst-btn.secondary { background: #eef1f7; color: #234; border: 1px solid #cfd6e4; }
.asst-btn:disabled { opacity: .5; cursor: not-allowed; }
.asst-file-label { display: inline-block; }
.asst-file-label input[type=file] { display: none; }

/* Fullscreen camera overlay with live auto-capture */
.asst-cam-overlay {
  position: fixed; inset: 0; z-index: 10000; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.asst-cam-frame { position: relative; width: 100%; height: 100%; overflow: hidden; }
#asst-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.asst-cam-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.asst-cam-reticle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 78vmin; height: 78vmin; max-width: 92%; max-height: 70%;
  border: 2px dashed rgba(255,255,255,.55); border-radius: 10px; pointer-events: none;
}
.asst-cam-guide {
  position: absolute; left: 0; right: 0; top: 18px; text-align: center; pointer-events: none;
  color: #fff; font-size: 15px; text-shadow: 0 1px 3px rgba(0,0,0,.8); padding: 0 12px;
}
.asst-cam-controls {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 12px;
  justify-content: center; padding: 18px 12px calc(18px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
}
#asst-warp { margin: 8px 0; }
#asst-warp canvas { width: 160px; height: 160px; border: 1px solid #ccc; border-radius: 6px; }

.asst-status { min-height: 20px; margin: 8px 0; font-size: 14px; color: #2b6cff; }
.asst-quota-label { font-size: 12px; color: #888; float: right; }

/* Editable grid */
#asst-editor { margin-top: 10px; }
.asst-grid { border-collapse: collapse; margin: 0 auto; background: #fff; border: 3px solid #222; }
.asst-cell { border: 1px solid #b9c0cc; padding: 0; }
.asst-cell.asst-box-right { border-right: 3px solid #222; }
.asst-cell.asst-box-bottom { border-bottom: 3px solid #222; }
.asst-cell input {
  width: 38px; height: 38px; text-align: center; font-size: 20px; border: none; outline: none;
  padding: 0; background: transparent; color: #111; -moz-appearance: textfield;
}
.asst-cell input:focus { background: #dce8ff; }
.asst-cell.asst-given input { font-weight: bold; color: #000; background: #eef0f3; }
.asst-cell.asst-lowconf { background: #fff6d6; }       /* OCR unsure -> review */
.asst-cell.asst-conflict input { background: #ffd4d4; color: #b00; }
.asst-cell.asst-wrong input { background: #ffd4d4; color: #b00; }
.asst-cell.asst-hint { background: #d4ffd9; box-shadow: inset 0 0 0 2px #1aa83a; }

@media only screen and (max-width: 480px) {
  .asst-cell input { width: 9.6vw; height: 9.6vw; font-size: 5.2vw; }
}

/* Actions */
.asst-actions { text-align: center; margin: 14px 0; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.asst-hint-box { margin: 10px auto; max-width: 520px; background: #eef7ee; border: 1px solid #bfe3c4;
  border-radius: 8px; padding: 10px 12px; font-size: 14px; color: #205227; min-height: 0; }
.asst-hint-box:empty { display: none; }

/* Modals (upsell / quota) */
.asst-modal {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9999;
  align-items: center; justify-content: center;
}
.asst-modal[style*="display: block"], .asst-modal.open { display: flex; }
.asst-modal-card {
  background: #fff; border-radius: 12px; padding: 22px; max-width: 360px; width: 88%;
  text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.3);
}
.asst-modal-card h3 { margin: 0 0 10px; font-size: 19px; }
.asst-modal-card p { color: #555; font-size: 14px; line-height: 1.45; margin: 0 0 16px; }
.asst-modal-actions { display: flex; gap: 8px; justify-content: center; }

/* solve.php entry banner */
.asst-entry {
  display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 4px; padding: 9px 14px;
  background: #2b6cff; color: #fff !important; border-radius: 8px; text-decoration: none; font-size: 15px;
}
.asst-entry:hover { background: #1f57d6; }
.asst-entry .asst-cam-ico { font-size: 18px; line-height: 1; }