/* notes-ui.css — notes editor UI: theme-aware tables, comment box, quick error buttons, focus */

/* ── Tables: follow the current theme (explicit inline colors are kept) ── */
.editor table td:not([style*="background"]) { background: color-mix(in srgb, var(--accent) 12%, var(--bg-surface, #161b22)); }
.editor table th:not([style*="background"]) { background: color-mix(in srgb, var(--accent) 28%, var(--bg-surface, #161b22)); }
.editor table td:not([style*="border"]),
.editor table th:not([style*="border"]) { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
[data-vocab-row] > td { border-top-color: color-mix(in srgb, var(--accent) 35%, transparent) !important; }

/* ── Comment box ── */
.comment-bubble {
  background: #161b22; border: 1px solid rgba(255,255,255,.1); border-radius: 14px;
  padding: 14px; gap: 12px; width: 400px; max-width: calc(100vw - 24px);
  box-shadow: 0 12px 40px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35);
  font-family: 'Space Grotesk', var(--sans), sans-serif;
  transform-origin: top left;
}
.comment-bubble:not([style*="display: none"]):not([style*="display:none"]) { animation: cbIn .16s ease-out; }
@keyframes cbIn { from { opacity: 0; transform: scale(.96) translateY(4px); } to { opacity: 1; transform: none; } }
.comment-bubble textarea, .comment-bubble input[type="text"] {
  background: #0d1117; color: #e6edf3; border: 1px solid #30363d; border-radius: 10px;
  padding: 10px 12px; font: 400 14px/1.5 'Space Grotesk', var(--sans), sans-serif;
  transition: border-color .15s, box-shadow .15s;
}
.comment-bubble textarea { height: 84px; }
.comment-bubble textarea::placeholder, .comment-bubble input::placeholder { color: #7d8590; }
.comment-bubble textarea:focus, .comment-bubble input[type="text"]:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
.comment-bubble-actions { gap: 8px; align-items: center; }
.comment-bubble-actions button {
  padding: 7px 16px; border-radius: 8px; font: 600 13px 'Space Grotesk', var(--sans), sans-serif;
  transition: background .15s, filter .15s, color .15s;
}
.comment-bubble-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#saveCommentBtn, #saveImgAttachBtn { background: var(--accent); color: #fff; }
#saveCommentBtn:hover, #saveImgAttachBtn:hover { filter: brightness(1.12); }
#cancelCommentBtn, #cancelImgAttachBtn { background: #1c2128; color: #c9d1d9; border: 1px solid #30363d; }
#cancelCommentBtn:hover, #cancelImgAttachBtn:hover { background: #262d36; color: #fff; }
#deleteCommentBtn, #deleteImgAttachBtn { background: transparent; border: none; color: #f87171 !important; }
#deleteCommentBtn:hover, #deleteImgAttachBtn:hover { background: rgba(248,113,113,.12); }

/* ── One-letter error buttons in the toolbar ── */
.toolbar .err-quick-btn {
  min-width: 26px; padding: 3px 6px; font: 700 11px 'Space Grotesk', var(--sans), sans-serif;
  border-radius: 6px; border: 1px solid transparent; cursor: pointer; line-height: 1.4;
}
.toolbar .err-quick-btn {
  color: var(--ec); border-color: color-mix(in srgb, var(--ec) 55%, transparent);
  background: color-mix(in srgb, var(--ec) 16%, #161b22);
  transition: background .12s, color .12s, box-shadow .12s;
}
.toolbar .err-quick-btn:hover, .toolbar .err-quick-btn:active {
  background: var(--ec); color: #0d1117; border-color: var(--ec);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ec) 30%, transparent);
}
.err-quick-grammar        { --ec: #f87171; }
.err-quick-vocabulary     { --ec: #facc15; }
.err-quick-pronunciation  { --ec: #a78bfa; }
.err-quick-missing-word   { --ec: #34d399; }
.err-quick-unnatural      { --ec: #22d3ee; }
.err-quick-repetition     { --ec: #f472b6; }
.err-quick-cohesion       { --ec: #fb923c; }

/* ── Comment hover card ── */
.comment-hover-card {
  position: fixed; z-index: 9800; max-width: 280px; width: max-content;
  padding: 10px 13px; background: #1c2128; color: #e6edf3;
  border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
  font: 400 13.5px/1.5 'Space Grotesk', var(--sans), sans-serif;
  white-space: pre-wrap; overflow-wrap: anywhere; pointer-events: none;
  opacity: 0; transform: translateY(4px) scale(.97); transform-origin: bottom center;
  transition: opacity .14s ease, transform .14s ease;
}
.comment-hover-card.below { transform-origin: top center; transform: translateY(-4px) scale(.97); }
.comment-hover-card.show { opacity: 1; transform: none; }

/* ── No focus box on the editable area ── */
.editor:focus, .editor:focus-visible, .editor:focus-within,
.page:focus, .page:focus-visible, .page-wrapper:focus, .page-wrapper:focus-visible {
  outline: none !important; box-shadow: none;
}

/* ── Notes list paging: "Load older notes" (js/notes.js) — same look as the
   "Written tasks" link above the list ── */
.note-item.notes-load-older {
  margin: 6px 10px 8px; text-align: center;
  border: 1px dashed var(--border-l); border-radius: 8px; border-left: 1px dashed var(--border-l);
}
.note-item.notes-load-older .note-item-title { color: var(--accent); font-weight: 600; }
.note-item.notes-load-older:hover .note-item-title { color: var(--text-strong, var(--text)); }
.note-item.notes-load-older:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 📚 Vocabulary card (✨ AI → Add a vocabulary item): opens / closes with a click on the title */
.ep-vcard { margin: .5em 0; border: 1px solid rgba(252, 211, 77, .35); border-left: 3px solid #fcd34d; border-radius: 10px; background: rgba(252, 211, 77, .06); }
.ep-vcard > summary.ep-vcard-h { list-style: none; cursor: pointer; padding: 8px 12px; user-select: none; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ep-vcard > summary.ep-vcard-h::-webkit-details-marker { display: none; }
.ep-vcard > summary.ep-vcard-h::before { content: '▸'; color: #fcd34d; font-size: .9em; transition: transform .15s; display: inline-block; }
.ep-vcard[open] > summary.ep-vcard-h::before { transform: rotate(90deg); }
.ep-vcard > summary.ep-vcard-h:hover { background: rgba(252, 211, 77, .08); border-radius: 10px; }
.ep-vcard-b { padding: 0 14px 10px 26px; }
.ep-vcard-b > p:first-child { margin-top: 0; }