/* styles.css — layout & theme for the image annotation tool */
:root {
  --bg: #0f172a;
  --panel: #1e293b;
  --panel-2: #273449;
  --border: #334155;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --accent: #e11d48;
  --accent-2: #2563eb;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: 'Segoe UI', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

#app {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 220px 1fr;
  grid-template-areas: 'toolbar toolbar' 'sidebar main';
  height: 100vh;
}

/* ---------- Toolbar ---------- */
#toolbar {
  grid-area: toolbar;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

#toolbar .title {
  font-weight: 700;
  font-size: 15px;
  margin-right: 10px;
  white-space: nowrap;
}

.divider {
  width: 1px;
  height: 26px;
  background: var(--border);
  margin: 0 4px;
}

button {
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  padding: 7px 12px;
  border-radius: 7px;
  font-size: 13px;
  transition: background 0.15s, border-color 0.15s;
}
button:hover { background: #334155; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.active { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }

.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn-primary:hover { background: #be123c; }

.control {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.control input[type='range'] { width: 80px; }
.control input[type='color'] {
  width: 34px; height: 28px; padding: 0;
  border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer;
}
.control b { color: var(--text); min-width: 18px; text-align: right; }
.control .zoom-val { min-width: 46px; text-align: center; }
.control button { padding: 5px 9px; }

#pageInfo { margin-left: auto; color: var(--muted); font-size: 13px; white-space: nowrap; }

/* ---------- Sidebar (thumbnails) ---------- */
#sidebar {
  grid-area: sidebar;
  background: var(--panel);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 10px;
}
#sidebar h3 { margin: 4px 6px 10px; font-size: 12px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.5px; }

.thumb {
  position: relative;
  margin-bottom: 10px;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: #0b1220;
}
.thumb.active { border-color: var(--accent); }
.thumb img { width: 100%; display: block; cursor: pointer; }

.thumb-index {
  position: absolute; top: 4px; left: 4px;
  background: rgba(0,0,0,0.65); color: #fff;
  font-size: 11px; padding: 1px 7px; border-radius: 10px;
}
.thumb-del {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; padding: 0; line-height: 1;
  background: rgba(0,0,0,0.6); border: none; color: #fff;
  border-radius: 50%; font-size: 15px;
}
.thumb-del:hover { background: var(--accent); }

/* ---------- Main canvas area ---------- */
#canvasWrap {
  grid-area: main;
  position: relative;
  overflow: auto;
  background:
    linear-gradient(45deg, #16203314 25%, transparent 25%) -10px 0/20px 20px,
    #0b1220;
}
/* Stage sizes to the (zoomed) canvas but never below the viewport. Centering is
   done with `margin: auto` on the canvas — unlike justify/align center, auto
   margins collapse to 0 when the canvas overflows, so the left/top edges stay
   reachable by scrolling. */
#canvasStage {
  min-width: 100%;
  min-height: 100%;
  width: max-content;
  box-sizing: border-box;
  display: flex;
  padding: 24px 24px 60px; /* bottom room for the zoom hint */
}
#canvasWrap.dragging { outline: 3px dashed var(--accent-2); outline-offset: -12px; }
.canvas-container { box-shadow: 0 8px 30px rgba(0,0,0,0.5); flex: 0 0 auto; margin: auto; }

#emptyState {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: var(--muted); text-align: center; pointer-events: none;
}
#emptyState .big { font-size: 48px; }
#emptyState .hint { font-size: 14px; }

/* ---------- Right dock: listening + vocabulary tabs ---------- */
#app.dock-open {
  grid-template-columns: 220px 1fr auto;
  grid-template-areas: 'toolbar toolbar toolbar' 'sidebar main listen';
}
#btnListen.has-audio { background: #059669; border-color: #059669; color: #fff; font-weight: 600; }
#btnListen.has-audio:hover { background: #047857; }

#rightDock {
  --dock-w: 400px;
  grid-area: listen;
  position: relative;
  width: var(--dock-w);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-left: 1px solid var(--border);
  min-height: 0;
}
#rightDock[hidden] { display: none; }
#rightDock.collapsed { width: 44px; }
#rightDock.resizing iframe { pointer-events: none; }

#dockResize {
  position: absolute; left: -3px; top: 0; bottom: 0; width: 6px;
  cursor: col-resize; z-index: 2;
}
#dockResize:hover, #rightDock.resizing #dockResize { background: var(--accent-2); }
#rightDock.collapsed #dockResize { display: none; }

.dock-head {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.dock-tabs { display: flex; gap: 4px; margin-right: auto; }
.dock-tab { padding: 5px 10px; font-size: 12px; white-space: nowrap; }
.dock-tab.active { background: var(--accent-2); border-color: var(--accent-2); color: #fff; font-weight: 600; }
.dock-tab b { font-size: 11px; opacity: 0.85; }
#tabVocab.has-words { border-color: #059669; }
#tabVocab.flash { animation: vocab-flash 0.5s ease-in-out 2; }
@keyframes vocab-flash {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(5, 150, 105, 0.6); }
}
.dock-head > button:not(.dock-tab) { padding: 4px 9px; }
#rightDock.collapsed .dock-head { flex-direction: column; padding: 8px 4px; }
#rightDock.collapsed .dock-tabs { flex-direction: column; margin: 6px 0 0; order: 3; }
#rightDock.collapsed .dock-tab { writing-mode: vertical-rl; padding: 10px 5px; }

/* Only the active tab's body shows; the other stays loaded (audio keeps playing). */
.dock-body { flex: 1; display: none; flex-direction: column; min-height: 0; }
#rightDock[data-tab='listen'] .dock-body[data-for='listen'],
#rightDock[data-tab='vocab'] .dock-body[data-for='vocab'] { display: flex; }
/* Collapsed: hide visually but keep the iframe loaded so audio keeps playing. */
#rightDock.collapsed .dock-body {
  position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none;
}
#listenFrame { flex: 1; width: 100%; border: 0; background: #fff; }

.listen-foot { padding: 8px 10px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.listen-foot a { color: var(--muted); display: block; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listen-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.listen-actions button { padding: 5px 9px; font-size: 12px; }
.listen-hint { margin-top: 6px; }

/* ---------- Vocabulary tab ---------- */
.vocab-list { flex: 1; overflow-y: auto; padding: 10px; }
.vocab-empty { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 6px 2px; }
.vocab-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.vocab-word {
  flex: 0 0 38%; font-weight: 600; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vocab-note {
  flex: 1; min-width: 0;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font-family: inherit; font-size: 12px; padding: 4px 7px;
}
.vocab-note:focus { outline: none; border-color: var(--accent-2); }
.vocab-del {
  flex: 0 0 auto; width: 22px; height: 22px; padding: 0; line-height: 1;
  border-radius: 50%; font-size: 14px; color: var(--muted);
}
.vocab-del:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.vocab-foot { padding: 8px 10px; border-top: 1px solid var(--border); }
.vocab-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.vocab-actions button { padding: 5px 9px; font-size: 12px; }
.vocab-status { margin-top: 6px; font-size: 12px; color: var(--muted); min-height: 16px; }

/* 🎧 hotspot drawn over the detected QR code (sized in % of the canvas box) */
.qr-hotspot {
  position: absolute; z-index: 5;
  min-width: 64px; min-height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 150, 105, 0.18);
  border: 2px solid #059669; border-radius: 6px;
  color: #fff; font-weight: 700; font-size: 13px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.qr-hotspot:hover { background: rgba(5, 150, 105, 0.45); }

.thumb-qr {
  position: absolute; bottom: 4px; left: 4px;
  background: #059669; color: #fff;
  font-size: 11px; padding: 1px 6px; border-radius: 10px;
}

/* ---------- User guide button + modal ---------- */
.btn-help {
  position: relative;
  background: #f59e0b; border-color: #f59e0b; color: #1f1300; font-weight: 700;
}
.btn-help:hover { background: #d97706; border-color: #d97706; }
/* Pulsing dot until the guide has been opened once */
.btn-help.pulse::after {
  content: ''; position: absolute; top: -4px; right: -4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #ef4444; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  animation: help-pulse 1.6s infinite;
}
@keyframes help-pulse {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.help-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(2, 6, 23, 0.7);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.help-backdrop[hidden] { display: none; }
.help-card {
  width: min(860px, 100%); max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.help-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
}
.help-head h2 { margin: 0; font-size: 18px; }
.help-body { overflow-y: auto; padding: 8px 24px 24px; font-size: 14px; line-height: 1.6; }
.help-body h3 { margin: 22px 0 8px; font-size: 15px; color: #fbbf24; scroll-margin-top: 60px; }
.help-body ul, .help-body ol { margin: 6px 0; padding-left: 22px; }
.help-body table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: 13px; }
.help-body th, .help-body td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; vertical-align: top; }
.help-body th { background: var(--panel-2); }
.help-body kbd {
  background: var(--panel-2); border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 4px; padding: 0 5px; font-size: 12px; font-family: inherit;
}
.help-lead { color: var(--muted); }
.help-toc {
  position: sticky; top: 0; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 0; background: var(--panel);
}
.help-toc a {
  color: var(--text); text-decoration: none; font-size: 12px;
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel-2);
}
.help-toc a:hover { border-color: #f59e0b; color: #fbbf24; }
.help-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.help-flow span {
  background: rgba(5, 150, 105, 0.15); border: 1px solid #059669; border-radius: 6px;
  padding: 4px 10px; font-size: 13px;
}
.help-flow i { font-style: normal; color: var(--muted); }

/* Zoom hint: shares the 'main' grid cell with the editor, pinned bottom-center,
   so it stays put while the page scrolls and never blocks clicks. */
#zoomHint {
  grid-area: main;
  align-self: end; justify-self: center;
  margin-bottom: 12px; z-index: 3;
  pointer-events: none;
  padding: 7px 16px; border-radius: 999px;
  background: var(--accent-2); border: 1px solid #60a5fa;
  color: #fff; font-size: 14px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.55);
  animation: zoom-hint-bounce 0.7s ease-in-out 0.3s 3; /* draw attention a few times, then rest */
}
@keyframes zoom-hint-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
#zoomHint[hidden] { display: none; }
#zoomHint kbd {
  background: #fff; color: #1e3a8a; border: 1px solid #bfdbfe; border-bottom-width: 2px;
  border-radius: 4px; padding: 0 6px; font-family: inherit; font-weight: 700;
}

/* Thanh tài khoản ở cuối tab Từ vựng */
.vocab-account { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
.vocab-account-line { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.vocab-account button { padding: 5px 9px; font-size: 12px; }
.vocab-account-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.vocab-account-form { display: flex; flex-direction: column; gap: 6px; }
.vocab-account-form input {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font-family: inherit; font-size: 12px; padding: 6px 8px;
}
.vocab-account-form input:focus { outline: none; border-color: var(--accent-2); }
.vocab-account-hint { font-size: 11px; color: var(--muted); }
.vocab-account-error { margin-top: 6px; font-size: 12px; color: #fca5a5; }

/* ---------- Lưu bài / Gửi thầy ---------- */
.work-status { color: var(--muted); font-size: 12px; margin-left: auto; white-space: nowrap; }
#pageInfo { margin-left: 12px; }

.work-card, .share-card { width: min(560px, 100%); }
.work-list { padding: 14px 20px 20px; overflow-y: auto; }
.work-row { display: flex; gap: 8px; align-items: stretch; margin-bottom: 8px; }
.work-row.current .work-open { border-color: var(--accent-2); }
.work-open {
  flex: 1; text-align: left; display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px; font-size: 13px;
}
.work-open span { color: var(--muted); font-size: 12px; }
.work-del { width: 38px; font-size: 16px; color: var(--muted); }
.work-del:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.share-body { padding: 14px 20px 20px; font-size: 13px; line-height: 1.6; }
.share-row { display: flex; gap: 8px; margin: 10px 0 6px; }
.share-row input {
  flex: 1; min-width: 0; padding: 9px 11px; font-family: inherit; font-size: 13px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 7px; color: var(--text);
}
.share-note { color: var(--muted); font-size: 12px; margin: 6px 0 0; }

/* ---------- Tab "Thầy chấm" ---------- */
.review-body { flex: 1; overflow-y: auto; padding: 12px; font-size: 13px; }
.review-head { color: var(--muted); margin: 0 0 10px; }
.review-comment {
  background: var(--panel-2); border-left: 3px solid var(--accent-2);
  padding: 8px 10px; border-radius: 0 7px 7px 0; margin: 0 0 12px; font-style: italic;
}
.review-row {
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; cursor: pointer;
}
.review-row.wrong { border-left: 3px solid var(--accent); }
.review-row:hover { background: var(--panel-2); }
.review-your { color: var(--muted); }
.review-fix { margin-top: 3px; }
.review-note { margin-top: 3px; color: var(--muted); font-size: 12px; }

/* Dấu đỏ của thầy đè lên ô chữ sai, ngay trên trang đề */
.review-mark {
  position: absolute; z-index: 4; pointer-events: none;
  border: 2px solid var(--accent); border-radius: 4px;
  background: none; /* không tô nền: chữ học sinh viết vẫn đọc rõ */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.75); /* viền sáng để nổi trên nền trắng của đề */
}
.review-mark.flash { animation: review-flash 0.6s ease-in-out 2; }
@keyframes review-flash {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 6px rgba(225, 29, 72, 0.35); }
}
.review-fix-label {
  position: absolute; left: 0; bottom: 100%; margin-bottom: 3px; white-space: nowrap;
  background: var(--accent); color: #fff; font-weight: 700; line-height: 1.35;
  padding: 1px 7px; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.review-fix-label.below { bottom: auto; top: 100%; margin: 3px 0 0; }