/* ══════════════════════════════════════════════════════════
   Translation Workspace — 3-Panel Layout
   For pali_translation rooms only
   ══════════════════════════════════════════════════════════ */

/* ── Main Container ── */
.translation-workspace {
  display: flex;
  flex: 1;
  height: calc(100vh - 42px);  /* minus topbar */
  width: 100%;
  max-width: 100vw;
  background: #131620;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Left Panel: Sutta Browser ── */
.trans-left-panel {
  width: 280px;
  min-width: 220px;
  border-right: 1px solid #1e222d;
  background: #131620;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.sutta-browser-header {
  padding: 10px 12px;
  border-bottom: 1px solid #1e222d;
  flex-shrink: 0;
}

.sutta-search {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #252830;
  border-radius: 6px;
  font-size: 12px;
  outline: none;
  background: #0f1117;
  color: #e1e4e8;
  font-family: inherit;
  box-sizing: border-box;
}
.sutta-search:focus { border-color: #5b9cf6; }
.sutta-search::placeholder { color: #3d4455; }

.sutta-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-bottom: 1px solid #1e222d;
  flex-shrink: 0;
  min-height: 34px;
  flex-wrap: wrap;
}
.sutta-breadcrumb-item {
  font-size: 12px;
  color: #5b9cf6;
  cursor: pointer;
  background: none;
  border: none;
  padding: 1px 4px;
  border-radius: 3px;
  font-family: inherit;
  transition: background 0.15s;
}
.sutta-breadcrumb-item:hover { background: rgba(91,156,246,0.15); }
.sutta-breadcrumb-item.current {
  color: #b0b8cc;
  cursor: default;
}
.sutta-breadcrumb-item.current:hover { background: none; }
.sutta-breadcrumb-sep {
  color: #5a6070;
  font-size: 11px;
}

.sutta-browser-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.sutta-browser-content::-webkit-scrollbar { width: 3px; }
.sutta-browser-content::-webkit-scrollbar-thumb { background: #252830; border-radius: 3px; }

/* Pitaka Cards */
.pitaka-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin: 4px 8px;
  border-radius: 8px;
  border: 1px solid #252830;
  background: #1c1f26;
  cursor: pointer;
  transition: all 0.15s;
}
.pitaka-card:hover {
  border-color: #363b48;
  background: #222630;
}
.pitaka-card-icon { font-size: 22px; flex-shrink: 0; }
.pitaka-card-name {
  font-size: 13px;
  font-weight: 600;
  color: #e1e4e8;
}
.pitaka-card-desc {
  font-size: 11px;
  color: #5a6070;
  margin-top: 2px;
}

/* Book/Sutta List */
.browser-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  color: #b0b8cc;
  font-size: 13px;
  border-left: 2px solid transparent;
  transition: all 0.1s;
}
.browser-list-item:hover {
  background: #1a1d27;
}
.browser-list-item.active {
  background: #1a2332;
  border-left-color: #5b9cf6;
  color: #e1e4e8;
}
.browser-list-item .item-ref {
  font-size: 11px;
  color: #5b9cf6;
  font-weight: 600;
  flex-shrink: 0;
  min-width: 36px;
}
.browser-list-item .item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #b0b8cc;
  text-align: left;
}

/* ── Center Panel ── */
.trans-center-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #0f1117;
  overflow: hidden;
}

/* Center Tabs */
.trans-center-tabs {
  display: flex;
  gap: 2px;
  padding: 0 12px;
  background: #161920;
  border-bottom: 1px solid #1e222d;
  flex-shrink: 0;
  height: 36px;
  align-items: stretch;
}
.trans-ctab {
  padding: 0 16px;
  border: none;
  background: none;
  font-size: 12px;
  font-weight: 500;
  color: #5a6070;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.trans-ctab:hover { color: #b0b8cc; }
.trans-ctab.active {
  color: #e1e4e8;
  border-bottom-color: #5b9cf6;
}

.trans-center-content {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.trans-tab-pane {
  display: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.trans-tab-pane.active {
  display: flex;
  flex-direction: column;
}

/* ── Chat Tab (reused in workspace) ── */
.trans-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  contain: content;
}
.trans-chat-messages::-webkit-scrollbar { width: 4px; }
.trans-chat-messages::-webkit-scrollbar-thumb { background: #252830; border-radius: 4px; }

.trans-chat-input {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px;
  background: #161920;
  border-top: 1px solid #1e222d;
  flex-shrink: 0;
}
.trans-chat-input textarea {
  flex: 1;
  resize: none;
  border: 1px solid #252830;
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 14px;
  font-family: inherit;
  max-height: 120px;
  outline: none;
  background: #0f1117;
  color: #e1e4e8;
  line-height: 1.5;
  transition: border-color 0.15s;
}
.trans-chat-input textarea:focus { border-color: #5b9cf6; }
.trans-chat-input textarea::placeholder { color: #3d4455; }
.trans-chat-send {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #1d4ed8;
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.trans-chat-send:hover { background: #2563eb; }

/* ── Translation Table Tab ── */
.trans-table-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: #161920;
  border-bottom: 1px solid #1e222d;
  flex-shrink: 0;
}
.trans-sutta-title {
  font-size: 13px;
  font-weight: 600;
  color: #b0b8cc;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trans-progress {
  font-size: 11px;
  color: #5a6070;
  flex-shrink: 0;
}

.trans-table-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
.trans-table-container::-webkit-scrollbar { width: 4px; }
.trans-table-container::-webkit-scrollbar-thumb { background: #252830; border-radius: 4px; }

.trans-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.trans-table thead {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #161920;
}
.trans-table th {
  padding: 8px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #5a6070;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 2px solid #252830;
}
.trans-table th:nth-child(1) { width: 5%; }
.trans-table th:nth-child(2) { width: 40%; }
.trans-table th:nth-child(3) { width: 45%; }
.trans-table th:nth-child(4) { width: 10%; }

/* Virtual scroll spacer */
.trans-table-spacer {
  width: 100%;
}

.trans-table-body {
  position: relative;
}

.trans-row {
  border-bottom: 1px solid #1a1d27;
  transition: background 0.1s;
}
.trans-row:hover { background: rgba(255,255,255,0.04); }
.trans-row td {
  padding: 10px 14px;
  vertical-align: top;
  font-size: 14px;
  line-height: 1.65;
}
.trans-row td:first-child {
  color: #5a6878;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

/* Title/subhead row */
.trans-row-title .trans-pali-cell {
  font-style: normal;
  font-weight: 700;
  color: #e1e4e8;
  font-size: 15px;
}
.trans-row-title {
  background: rgba(255,255,255,0.02);
  border-bottom: 2px solid #252830;
}

/* Pali column */
.trans-pali-cell {
  font-style: italic;
  color: #e6a96f;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}
.trans-pali-cell b {
  font-weight: 700;
  color: #f0c674;
  font-style: normal;
}
.trans-pali-cell .tei-note {
  font-size: 0.85em;
  color: #888;
  font-style: normal;
}

/* Translation cell (editable) */
.trans-edit-cell {
  color: #d1d5de;
  outline: none;
  border-radius: 4px;
  transition: box-shadow 0.15s, background 0.15s;
  min-height: 24px;
  cursor: text;
}
.trans-edit-cell:hover:not(:focus) {
  background: rgba(91,156,246,0.03);
  box-shadow: inset 0 0 0 1px rgba(91,156,246,0.12);
}
.trans-edit-cell:focus {
  box-shadow: inset 0 0 0 1px #5b9cf6;
  background: rgba(91,156,246,0.05);
}
.trans-edit-cell:empty::before {
  content: 'Nhập bản dịch...';
  color: #3d4455;
  font-style: italic;
}

/* Save states */
.trans-edit-cell.saving {
  background: rgba(210,153,34,0.08);
}
.trans-edit-cell.saved {
  animation: savedPulse 0.6s ease;
}
.trans-edit-cell.save-error {
  box-shadow: inset 0 0 0 1px #f85149;
  background: rgba(248,81,73,0.05);
}
@keyframes savedPulse {
  0% { background: rgba(63,185,80,0.12); }
  100% { background: transparent; }
}

/* Status badge */
.trans-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: all 0.15s;
  border: 1px solid;
  user-select: none;
}
.trans-status-badge:hover { filter: brightness(1.2); }
.trans-status-jiva-draft {
  color: #d29922;
  border-color: rgba(210,153,34,0.3);
  background: rgba(210,153,34,0.1);
}
.trans-status-draft {
  color: #7a8296;
  border-color: #363b48;
  background: rgba(122,130,150,0.1);
}
.trans-status-final {
  color: #5b9cf6;
  border-color: rgba(91,156,246,0.3);
  background: rgba(91,156,246,0.1);
}
.trans-status-published {
  color: #3fb950;
  border-color: rgba(63,185,80,0.3);
  background: rgba(63,185,80,0.1);
}
.trans-delete-btn {
  background: none;
  border: none;
  color: #f85149;
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
  margin-left: 4px;
  opacity: 0;
  transition: opacity 0.15s;
  vertical-align: middle;
}
tr:hover .trans-delete-btn { opacity: 0.6; }
.trans-delete-btn:hover { opacity: 1 !important; }
.trans-clear-all-btn {
  background: none;
  border: 1px solid #363b48;
  border-radius: 4px;
  color: #7a8296;
  cursor: pointer;
  font-size: 10px;
  padding: 1px 4px;
  margin-left: 4px;
  opacity: 0.5;
  transition: all 0.15s;
  vertical-align: middle;
}
.trans-clear-all-btn:hover { opacity: 1; color: #f85149; border-color: #f85149; }

/* ── Anuvāda: Apply pattern button ── */
.similar-apply-btn {
  background: rgba(63,185,80,0.15);
  border: 1px solid rgba(63,185,80,0.3);
  color: #3fb950;
  cursor: pointer;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  margin-left: auto;
  white-space: nowrap;
  transition: all 0.15s;
}
.similar-apply-btn:hover { background: rgba(63,185,80,0.3); }
.similar-apply-btn:disabled { opacity: 0.5; cursor: wait; }
.similar-apply-btn.done { color: #3fb950; background: rgba(63,185,80,0.2); }
.similar-result-header { display: flex; align-items: center; gap: 6px; }

/* Selected row in translation table */
.trans-row.selected { background: rgba(91,156,246,0.08); }
.trans-row.selected td:first-child { border-left: 2px solid #5b9cf6; }

/* ── Preview Tab ── */
.trans-preview-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: #161920;
  border-bottom: 1px solid #1e222d;
  flex-shrink: 0;
}
.trans-publish-btn {
  padding: 5px 14px;
  border-radius: 6px;
  background: #238636;
  color: #fff;
  border: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.trans-publish-btn:hover { background: #2ea043; }
.trans-publish-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.trans-preview-container {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.trans-preview-col {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.trans-preview-col::-webkit-scrollbar { width: 4px; }
.trans-preview-col::-webkit-scrollbar-thumb { background: #252830; border-radius: 4px; }
.trans-preview-pali {
  border-right: 1px solid #1e222d;
}
.trans-preview-pali .preview-section {
  color: #e6a96f;
  font-style: italic;
}
.trans-preview-translation .preview-section {
  color: #d1d5de;
}

/* ── Right Panel ── */
.trans-right-panel {
  width: 400px;
  min-width: 300px;
  border-left: 1px solid #1e222d;
  background: #131620;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  flex-grow: 0;
}

/* Right Tabs */
.trans-right-tabs {
  display: flex;
  gap: 2px;
  padding: 0 8px;
  background: #161920;
  border-bottom: 1px solid #1e222d;
  flex-shrink: 0;
  height: 34px;
  align-items: stretch;
}
.trans-rtab {
  padding: 0 10px;
  border: none;
  background: none;
  font-size: 11px;
  font-weight: 500;
  color: #5a6070;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.trans-rtab:hover { color: #b0b8cc; }
.trans-rtab.active {
  color: #e1e4e8;
  border-bottom-color: #e6a96f;
}

.trans-right-content {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.trans-rtab-pane {
  display: none;
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 10px;
}
.trans-rtab-pane::-webkit-scrollbar { width: 3px; }
.trans-rtab-pane::-webkit-scrollbar-thumb { background: #252830; border-radius: 3px; }
.trans-rtab-pane.active { display: block; }

/* DPD Search */
.trans-dpd-search {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #252830;
  border-radius: 6px;
  font-size: 12px;
  outline: none;
  background: #0f1117;
  color: #e1e4e8;
  font-family: inherit;
  box-sizing: border-box;
  margin-bottom: 8px;
}
.trans-dpd-search:focus { border-color: #5b9cf6; }
.trans-dpd-search::placeholder { color: #3d4455; }

/* DPD Entry Card */
.dpd-entry {
  padding: 14px;
  margin-bottom: 10px;
  border: 1px solid #252830;
  border-radius: 8px;
  background: #1c1f26;
}
.dpd-entry-head {
  font-size: 16px;
  font-weight: 700;
  color: #e6a96f;
  margin-bottom: 6px;
}
.dpd-entry-pos {
  font-size: 12px;
  color: #8b9dc3;
  margin-bottom: 8px;
}
.dpd-entry-meaning {
  font-size: 14px;
  color: #d1d5de;
  line-height: 1.7;
  margin-bottom: 6px;
}
.dpd-entry-root {
  font-size: 12px;
  color: #7a8296;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #1e222d;
}

/* A-Terms Entry */
.aterm-entry {
  display: grid;
  grid-template-columns: minmax(100px, 40%) 1fr;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid #1a1d27;
  font-size: 13px;
  align-items: baseline;
}
.aterm-entry:last-child { border-bottom: none; }
.aterm-term {
  color: #e6a96f;
  font-weight: 500;
  font-style: italic;
}
.aterm-count {
  color: #3d4455;
  font-size: 10px;
  flex-shrink: 0;
}
.aterm-translation {
  color: #d1d5de;
  text-align: left;
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── State Overlays ── */
.trans-loading,
.trans-empty,
.trans-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #3d4455;
  font-size: 13px;
  gap: 8px;
  padding: 20px;
  text-align: center;
}
.trans-loading-icon { font-size: 24px; animation: offBlink 1.4s infinite; }
.trans-empty-icon { font-size: 26px; opacity: 0.35; }
.trans-error {
  color: #f85149;
}
.trans-error-icon { font-size: 24px; }
.trans-retry-btn {
  padding: 5px 14px;
  border-radius: 6px;
  border: 1px solid #f85149;
  background: rgba(248,81,73,0.1);
  color: #f85149;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  margin-top: 4px;
}
.trans-retry-btn:hover { background: rgba(248,81,73,0.2); }

/* ── Responsive: hide workspace <1200px ── */
@media (max-width: 1200px) {
  .translation-workspace {
    display: none !important;
  }
  .trans-mobile-warning {
    display: flex !important;
  }
}
.trans-mobile-warning {
  display: none;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 42px);
  color: #5a6070;
  font-size: 14px;
  text-align: center;
  padding: 20px;
  flex-direction: column;
  gap: 8px;
}
.trans-mobile-warning-icon { font-size: 40px; opacity: 0.4; }

/* M/A/T Category Badges */
.item-cat {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  margin-right: 6px;
  min-width: 18px;
  text-align: center;
}
.item-cat-m {
  background: #2d4a22;
  color: #8bc34a;
}
.item-cat-a {
  background: #4a3f22;
  color: #ffc107;
}
.item-cat-t {
  background: #22394a;
  color: #29b6f6;
}
.item-cat-at {
  background: #3a2244;
  color: #ce93d8;
}

/* Chat elements inside workspace */
#transChatPane #chatMessages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
#transChatPane #chatInput {
  border-top: 1px solid var(--border-color, #2d3748);
  padding: 10px;
}
#transChatPane #chatMembers {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-color, #2d3748);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 0 0 auto;
  max-height: 40px;
  overflow-x: auto;
  overflow-y: hidden;
}
/* B1 FIX: Moved to .trans-tab-pane.active - no standalone #transChatPane display */
#transChatPane.active {
  flex-direction: column;
}


/* ── Audit Fixes: Empty states ── */
.trans-preview-container.no-translations .trans-preview-translation {
  flex: 0 0 25%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trans-preview-container.no-translations .trans-preview-pali {
  flex: 0 0 75%;
}

/* ── Audit Fixes: Glossary search ── */
.trans-glossary-search {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #252830;
  border-radius: 6px;
  background: #0f1117;
  color: #d1d5de;
  font-size: 13px;
  margin-bottom: 8px;
  outline: none;
}
.trans-glossary-search:focus { border-color: #5b9cf6; }
.trans-glossary-search::placeholder { color: #4a5468; }

/* ── M/A/T Section Headers ── */
.mat-section-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8b9dc3;
  padding: 10px 14px 4px;
  margin-top: 6px;
  border-top: 1px solid #1e222d;
}
.mat-section-header:first-child {
  border-top: none;
  margin-top: 0;
}
.mat-section-header .mat-icon {
  font-size: 13px;
}
/* ── M/A/T Toggle Bar ── */
.mat-toggle-bar {
  display: flex;
  gap: 2px;
  padding: 6px 10px;
  border-bottom: 1px solid #1e222d;
  background: #13161d;
}
.mat-toggle-btn {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid #252830;
  border-radius: 4px;
  background: transparent;
  color: #5a6070;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.mat-toggle-btn:hover {
  color: #b0b8cc;
  border-color: #3a4050;
}
.mat-toggle-btn.active {
  background: #1a2332;
  color: #5b9cf6;
  border-color: #5b9cf6;
  font-weight: 600;
}


/* Fix: When no translations, hide repeated 'Chua dich' text */
.trans-preview-container.no-translations .trans-preview-translation p {
  display: none;
}
.trans-preview-container.no-translations .trans-preview-translation::before {
  content: 'Chưa có bản dịch';
  color: #4a5468;
  font-style: italic;
  font-size: 14px;
}

/* ── Commentary Panel ── */
.comm-toggle-bar {
  display: flex;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid #1e222d;
  background: #13161d;
}
.comm-toggle-btn {
  flex: 1;
  padding: 4px 8px;
  border: 1px solid #252830;
  border-radius: 4px;
  background: transparent;
  color: #5a6070;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
}
.comm-toggle-btn:hover { color: #b0b8cc; border-color: #3a4050; }
.comm-toggle-btn.active {
  background: #1a2332;
  color: #5b9cf6;
  border-color: #5b9cf6;
  font-weight: 600;
}
.comm-title {
  font-size: 13px;
  font-weight: 600;
  color: #e6a96f;
  padding: 10px 12px 6px;
  border-bottom: 1px solid #1e222d;
}
.comm-section {
  padding: 4px 12px;
  font-size: 13px;
  line-height: 1.7;
  color: #c8ccd6;
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.comm-section:hover {}
.comm-para-num {
  display: none;
}
.comm-text {
  color: #b0b8cc;
  display: block;
  margin-top: 2px;
  line-height: 1.8;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
#commContent {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
}

/* Item count badge in browser */
.item-count {
  color: #5a6070;
  font-size: 11px;
  font-weight: 400;
}
/* Commentary XML bold terms */
.comm-text b {
  font-weight: 700;
  color: #f0c674;
}
.comm-text .tei-note {
  font-size: 0.85em;
  color: #888;
  font-style: normal;
}

/* ── Translation Status Icons ── */
.item-status {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 10px;
  line-height: 1;
}
.status-dot {
  display: inline-block;
  font-size: 11px;
}
.status-inprogress {
  color: #e6a96f;
}
.status-completed {
  color: #5b9cf6;
}
.status-published {
  color: #3fb950;
}

/* ── Sidebar toggle button ── */
.sidebar-toggle-btn {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #252830;
  background: #1c1f26;
  color: #b0b8cc;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.15s;
  opacity: 0;
  pointer-events: none;
}
.sidebar-toggle-btn:hover {
  background: #252830;
  color: #e1e4e8;
}
.translation-workspace.sutta-active .sidebar-toggle-btn {
  opacity: 1;
  pointer-events: auto;
}

/* ── Auto-hide left sidebar when sutta active ── */
.translation-workspace.sutta-active .trans-left-panel {
  display: none;
}
.translation-workspace.sutta-active .trans-center-panel {
  flex: 7;
}
.translation-workspace.sutta-active .trans-right-panel {
  flex: 3;
  width: auto;
  min-width: 280px;
}

/* When sidebar is visible again (toggle back) */
.translation-workspace:not(.sutta-active) .sidebar-toggle-btn {
  opacity: 0;
  pointer-events: none;
}

/* ── A/T Translation Status Badges ── */
.status-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  border-radius: 3px;
  margin-left: 2px;
  vertical-align: middle;
}
.status-badge-done {
  background: #1a3a1a;
  color: #3fb950;
  border: 1px solid #2d5a2d;
}
.status-badge-wip {
  background: #3a2a10;
  color: #e6a96f;
  border: 1px solid #5a4020;
}
.status-badge-pending {
  background: #1c1f26;
  color: #555b6e;
  border: 1px solid #2a2e38;
}

/* ── AI Translation Toggle ── */
.trans-edit-td {
  padding: 0 !important;
}
.trans-cell-wrapper {
  position: relative;
  width: 100%;
}
.trans-cell-wrapper .trans-edit-cell {
  padding: 8px 10px;
  min-height: 32px;
}
.trans-ai-toggle {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid #252830;
  background: #1c1f26;
  color: #888;
  cursor: pointer;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.15s;
  padding: 0;
}
.trans-row:hover .trans-ai-toggle,
.trans-ai-toggle.ai-active {
  opacity: 1;
}
.trans-ai-toggle:hover {
  background: #252830;
  color: #e1e4e8;
}
.trans-ai-toggle.ai-active {
  background: #1a2a3a;
  border-color: #2a4a6a;
  color: #5b9cf6;
}
.trans-cell-ai-view {
  background: #141820 !important;
  color: #8899aa !important;
  font-style: italic;
  border-left: 3px solid #2a4a6a;
  cursor: default;
}

/* ─── Tra cứu split layout ─── */
#transDpdPane.active {
  display: flex !important;
  flex-direction: column;
  padding: 0;
}
.tracuu-section {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tracuu-dpd {
  flex: 1;
  min-height: 100px;
}
.tracuu-similar {
  flex: 2;
  min-height: 120px;
}
.tracuu-divider {
  height: 4px;
  background: #1e222d;
  cursor: row-resize;
  flex-shrink: 0;
  transition: background 0.15s;
}
.tracuu-divider:hover, .tracuu-divider.dragging {
  background: #5b9cf6;
}
.tracuu-section-header {
  padding: 6px 10px;
  flex-shrink: 0;
}
.tracuu-section-title {
  font-size: 10px;
  text-transform: uppercase;
  color: #5a6070;
  font-weight: 600;
  letter-spacing: 0.3px;
  display: block;
  margin-bottom: 4px;
}
.tracuu-section-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 10px 10px;
}
.tracuu-section-body::-webkit-scrollbar { width: 3px; }
.tracuu-section-body::-webkit-scrollbar-thumb { background: #252830; border-radius: 3px; }
.trans-similar-search {
  width: 100%;
  padding: 6px 10px;
  background: #14161c;
  border: 1px solid #252830;
  border-radius: 6px;
  color: #b0b8cc;
  font-size: 12px;
  outline: none;
  box-sizing: border-box;
}
.trans-similar-search:focus {
  border-color: #5b9cf6;
}
/* ─── Similar result cards ─── */
.similar-result {
  padding: 8px 10px;
  margin-bottom: 6px;
  border: 1px solid #252830;
  border-radius: 6px;
  background: #1c1f26;
  cursor: pointer;
  transition: all 0.15s;
}
.similar-result:hover {
  border-color: #363b48;
  background: #222630;
}
.similar-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.similar-ref {
  font-size: 10px;
  color: #5b9cf6;
  font-weight: 600;
}
.similar-score {
  font-size: 10px;
  color: #3fb950;
  font-weight: 600;
}
.similar-pali {
  font-size: 12px;
  color: #e6a96f;
  font-style: italic;
  line-height: 1.4;
  margin-bottom: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.similar-trans {
  font-size: 11px;
  color: #7a8296;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.similar-loading {
  text-align: center;
  padding: 20px 10px;
  color: #5a6070;
  font-size: 12px;
}
.similar-loading .spin {
  display: inline-block;
  animation: offBlink 1s infinite;
}

/* ─── Select-to-lookup ─── */
.trans-pali-cell::selection {
  background: rgba(91,156,246,0.3);
  color: #fff;
}
.def-content {
  font-size: 12px;
  color: #8899aa;
  line-height: 1.5;
}
.def-content strong, .def-content b {
  color: #e6a96f;
}

/* ─── Nút dịch AI ─── */
.trans-ai-btn {
  background: #2a3040;
  color: #8899aa;
  border: 1px solid #353b48;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: 6px;
  white-space: nowrap;
}
.trans-ai-btn:hover {
  background: #353b48;
  color: #e0e0e0;
  border-color: #5b9cf6;
}
.trans-ai-btn-batch {
  background: #1a3050;
  color: #5b9cf6;
  border-color: #2a5090;
}
.trans-ai-btn-batch:hover {
  background: #2a5090;
  color: #fff;
}

/* ─── Row focus & translating ─── */
.trans-row.row-focused {
  outline: 1px solid #5b9cf6;
  outline-offset: -1px;
}
.trans-row.translating {
  background: rgba(91,156,246,0.08) !important;
}
.trans-row.translating .trans-cell {
  opacity: 0.5;
}
@keyframes translateFlash {
  0% { background: rgba(91,156,246,0.2); }
  100% { background: transparent; }
}
.trans-row.translated-flash {
  animation: translateFlash 1.5s ease-out;
}

/* ─── Progress indicator ─── */
.translating-progress {
  color: #5b9cf6 !important;
  font-weight: 500;
}
.translating-progress::before {
  content: '⟳ ';
  display: inline-block;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ─── Sessions sidebar trong translation workspace ─── */
.trans-sessions-sidebar {
  width: 240px;
  min-width: 200px;
  max-width: 300px;
  border-right: 1px solid #252830;
  background: #181c24;
  display: flex !important;
  flex-direction: column;
  overflow-y: auto;
}

/* Preview: paragraph grouping */
.preview-section {
  margin-bottom: 1.4em;
  line-height: 1.75;
  font-size: 15px;
  text-indent: 2em;
}
.preview-section:first-child { text-indent: 0; }
.preview-para-num {
  color: #6b7280;
  font-weight: 600;
  font-size: 0.82em;
  font-style: normal;
  margin-right: 2px;
  text-indent: 0;
  float: left;
  width: 2em;
  text-align: right;
  margin-left: -2em;
}
.preview-untranslated { color: #3d4455; font-style: italic; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CANVAS PANEL (ChatGPT-style)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */


.cvs-toggle-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #1e2232;
  border: 1px solid #2a2f3a;
  color: #aab;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.82em;
  transition: all 0.15s;
}
.cvs-toggle-btn:hover { background: #252a38; color: #dde; border-color: #3a3f4a; }
.cvs-toggle-btn.active { background: #2a3a5a; color: #7aafff; border-color: #4a6a9a; }
/* Show Canvas button when sutta loaded */
.translation-workspace.sutta-active .cvs-toggle-btn { display: flex !important; }

/* Show Canvas button when sutta loaded */
.translation-workspace.sutta-active .cvs-toggle-btn { display: flex !important; }

/* ── Canvas Panel Layout ── */
.canvas-panel {
  display: none;
  flex-direction: column;
  background: #151822;
  border-left: 2px solid #2a2f3a;
  overflow: hidden;
  flex-shrink: 0;
}

/* When Canvas is active: workspace layout changes */
.translation-workspace.canvas-active .trans-right-panel { display: none !important; }
.translation-workspace.canvas-active .trans-center-panel { flex: 1; min-width: 280px; }
.translation-workspace.canvas-active .canvas-panel {
  display: flex;
  flex: none;
  width: var(--canvas-width, 50%);
  min-width: 300px;
  max-width: 80%;
}

/* ── Canvas Resize Handle ── */
.canvas-resize-handle {
  display: none;
  width: 5px;
  cursor: col-resize;
  background: transparent;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  transition: background 0.15s;
}
.canvas-resize-handle:hover,
.canvas-resize-handle.dragging {
  background: #4a9eff44;
}
.canvas-resize-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 32px;
  border-radius: 2px;
  background: #3a4050;
  transition: background 0.15s;
}
.canvas-resize-handle:hover::after,
.canvas-resize-handle.dragging::after {
  background: #5a7090;
}
.translation-workspace.canvas-active .canvas-resize-handle {
  display: block;
}

/* ── Canvas Header ── */
.cvs-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #1a1f2e;
  border-bottom: 1px solid #2a2f3a;
  flex-shrink: 0;
  min-height: 40px;
}
.cvs-title {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.95em;
  font-weight: 600;
  color: #e0e4e8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}
.cvs-toolbar {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.cvs-tool {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  transition: background 0.15s, border-color 0.15s;
}
.cvs-tool:hover {
  background: #252a38;
  border-color: #3a3f4a;
}

/* Annotation type dots */
.cvs-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}
.cvs-dot-issue      { background: #e74c3c; }
.cvs-dot-suggestion { background: #f39c12; }
.cvs-dot-approved   { background: #27ae60; }
.cvs-dot-comment    { background: #3498db; }

.cvs-close-btn {
  background: none;
  border: none;
  color: #666;
  font-size: 1.4em;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
}
.cvs-close-btn:hover { color: #fff; background: #333; }



/* ── Canvas Body ── */
.cvs-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 36px;
  scrollbar-width: thin;
  scrollbar-color: #2a2e3a #0000;
}
.cvs-body::-webkit-scrollbar { width: 5px; }
.cvs-body::-webkit-scrollbar-track { background: transparent; }
.cvs-body::-webkit-scrollbar-thumb { background: #2a2e3a; border-radius: 4px; }
.cvs-body::-webkit-scrollbar-thumb:hover { background: #3a4050; }
.cvs-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #555;
  font-size: 0.95em;
}

/* ── Canvas Document ── */
.cvs-doc {
  max-width: 680px;
  margin: 0 auto;
  padding: 20px 0 60px;
  font-family: 'Noto Serif', Georgia, 'Times New Roman', serif;
}
.cvs-doc-title {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.95em;
  font-weight: 600;
  color: #c8ccd0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid #252a38;
  line-height: 1.6;
}

/* ── Paragraph groups: continuous inline flow ── */
.cvs-group {
  margin: 0 0 16px;
  padding: 2px 0;
  line-height: 1.9;
  color: #d0d4d8;
  font-size: 0.95em;
  text-indent: 2em;
}
.cvs-group:first-of-type {
  text-indent: 0;
}

/* ── Editable sentences: inline within group ── */
.cvs-sent {
  outline: none;
  border-radius: 2px;
  transition: background 0.15s, border-color 0.15s;
  cursor: text;
  caret-color: #7aafff;
}
.cvs-sent:hover:not(:focus):not(.cvs-editing) {
  background: rgba(255,255,255, 0.03);
}
.cvs-sent:focus, .cvs-sent.cvs-editing {
  background: rgba(122, 175, 255, 0.08);
  border-radius: 3px;
  padding: 1px 2px;
  margin: -1px -2px;
}

/* ── Rendered markdown inside sentences ── */
.cvs-sent strong, .cvs-sent b { color: #e8c870; font-weight: 600; }
.cvs-sent em, .cvs-sent i { color: #c8a86e; }
.cvs-sent a { color: #7aafff; text-decoration: none; }
.cvs-sent code {
  background: rgba(255,255,255,0.06);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.9em;
  color: #e8c870;
}

/* Save states */
.cvs-sent.cvs-saving {
  border-bottom: 1px dashed #555;
}
.cvs-sent.cvs-saved {
  background: rgba(39, 174, 96, 0.1) !important;
  transition: background 0.3s;
}
.cvs-sent.cvs-save-error {
  background: rgba(231, 76, 60, 0.1) !important;
  border-bottom: 1px dashed #e74c3c;
}

/* Dirty indicator */
.cvs-sent.cvs-dirty {
  border-bottom: 1px solid rgba(122, 175, 255, 0.3);
}

/* ── Highlights ── */
.cvs-hl {
  border-radius: 2px;
  padding: 1px 0;
  cursor: pointer;
  transition: filter 0.15s;
}
.cvs-hl:hover { filter: brightness(1.3); }
.cvs-hl-issue      { background: rgba(231,76,60,0.25); border-bottom: 2px solid #e74c3c; }
.cvs-hl-suggestion { background: rgba(243,156,18,0.2); border-bottom: 2px solid #f39c12; }
.cvs-hl-approved   { background: rgba(39,174,96,0.2); border-bottom: 2px solid #27ae60; }
.cvs-hl-modified   { background: rgba(52,152,219,0.2); border-bottom: 2px solid #3498db; }
.cvs-hl-comment    { background: rgba(149,165,166,0.15); border-bottom: 2px dashed #95a5a6; }

/* Paragraph-level indicators */
.cvs-indicator {
  display: inline-block;
  font-size: 0.7em;
  cursor: pointer;
  margin: 0 2px;
  vertical-align: middle;
}
.cvs-indicator.cvs-hl-issue      { color: #e74c3c; }
.cvs-indicator.cvs-hl-suggestion { color: #f39c12; }
.cvs-indicator.cvs-hl-approved   { color: #27ae60; }
.cvs-indicator.cvs-hl-comment    { color: #3498db; }

/* ── Canvas Status Bar ── */
.cvs-status {
  font-family: 'Inter', -apple-system, sans-serif;
  padding: 6px 14px;
  font-size: 0.78em;
  color: #666;
  background: #1a1f2e;
  border-top: 1px solid #2a2f3a;
  flex-shrink: 0;
}

/* ── Canvas Options Bar ── */
.cvs-options-bar {
  display: flex;
  gap: 4px;
  padding: 5px 14px;
  background: #181c28;
  border-bottom: 1px solid #252a36;
  flex-shrink: 0;
}
.cvs-opt-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.72em;
  font-weight: 500;
  color: #555a68;
  background: transparent;
  border: 1px solid #2a2f3a;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.cvs-opt-btn:hover {
  color: #8a90a0;
  border-color: #3a4050;
  background: #1e2232;
}
.cvs-opt-btn.active {
  color: #c8d0e0;
  border-color: #4a6090;
  background: #1e2a42;
}
.cvs-opt-icon {
  font-size: 0.9em;
  opacity: 0.7;
}
.cvs-opt-btn.active .cvs-opt-icon {
  opacity: 1;
}

/* ── Canvas Display Logic (Phase 2) ── */
.cvs-jiva-draft {
  font-style: italic;
  color: #a0a8c0;
}
/* jiva badge removed — italic + color is sufficient */
.cvs-reviewed {
  border-left: 2px solid #27ae60;
  padding-left: 4px;
}
.cvs-pali-line {
  font-size: 0.82em;
  color: #5a6070;
  font-style: italic;
  margin-top: 2px;
  margin-bottom: 4px;
  padding-left: 2px;
  line-height: 1.45;
}
/* Preview mode: hide jiva tag, show clean text */
.canvas-panel.cvs-preview-mode .cvs-jiva-draft {
  font-style: normal;
  color: inherit;
}


/* ── A-Terms Highlight on Canvas (Phase 4) ── */
.cvs-aterm-hl {
  border-bottom: 1px dotted #5a7a9a;
  cursor: help;
  transition: border-color 0.15s, background 0.15s;
}
.cvs-aterm-hl:hover {
  border-bottom-color: #8ab0d0;
  background: rgba(90, 122, 154, 0.1);
}

/* ── Comment Cards on Canvas (Phase 5) ── */
/* ── Inline Annotation Markers ── */
.cvs-ann-marker {
  display: inline;
  font-size: 0.72em;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s;
  margin-left: 6px;
  vertical-align: super;
  user-select: none;
  line-height: 1;
}
.cvs-ann-marker:hover { opacity: 1; }
.cvs-ann-marker sup {
  font-size: 0.65em;
  margin-left: 1px;
  font-weight: 600;
}
.cvs-ann-marker-issue { color: #e74c3c; }
.cvs-ann-marker-suggestion { color: #f39c12; }
.cvs-ann-marker-comment { color: #5dade2; }
.cvs-ann-marker-approved { color: #27ae60; }

/* ── Pali A-term underline in Translation table ── */
.pali-aterm {
  border-bottom: 1px dotted #5a7a9a;
  cursor: help;
  transition: border-color 0.15s, background 0.15s;
}
.pali-aterm:hover {
  border-bottom-color: #8ab0d0;
  background: rgba(90, 122, 154, 0.1);
}

/* ── Canvas option-controlled visibility (foundation for Phase 2-5) ── */
/* Pali toggle: show/hide pali text under sentences */
.canvas-panel:not(.cvs-show-pali) .cvs-pali-line { display: none; }
/* A-terms toggle: show/hide term underlines */
.canvas-panel:not(.cvs-show-aterms) .cvs-aterm-hl { text-decoration: none !important; border-bottom: none !important; }
/* Comments toggle: show/hide annotation markers + sidebar */
.canvas-panel:not(.cvs-show-comments) .cvs-indicator { display: none; }
.canvas-panel:not(.cvs-show-comments) .cvs-ann-marker { display: none; }
.canvas-panel:not(.cvs-show-comments) .cvs-ann-sidebar { display: none; }
/* Preview mode: disable editing */
.canvas-panel.cvs-preview-mode .cvs-sent { cursor: default; }
.canvas-panel.cvs-preview-mode .cvs-sent:focus { outline: none; background: none; }

/* ── Selection Popup (floating annotation chooser) ── */
.cvs-sel-popup {
  position: fixed;
  z-index: 1000;
  display: none;
  gap: 2px;
  background: #1e2232;
  border: 1px solid #3a3f4a;
  border-radius: 8px;
  padding: 4px 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.cvs-sel-popup button {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  transition: background 0.12s;
}
.cvs-sel-popup button:hover {
  background: #2a2f3a;
  border-color: #4a4f5a;
}

/* ── Annotation Popover ── */
.cvs-popover {
  position: fixed;
  z-index: 1001;
  display: none;
  width: 330px;
  max-height: 420px;
  background: #1a1e2e;
  border: 1px solid #3a3f4a;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55);
  overflow: hidden;
  font-size: 0.85em;
}
.cvs-popover-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid #2a2f3a;
  font-size: 0.82em;
  color: #888;
}
.cvs-popover-close {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: 1.3em;
  padding: 0 2px;
  line-height: 1;
}
.cvs-popover-close:hover { color: #fff; }
.cvs-popover-list {
  max-height: 280px;
  overflow-y: auto;
  padding: 8px 10px;
}
.cvs-popover-item {
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 6px;
}
.cvs-popover-item:last-child { margin-bottom: 0; }
.cvs-popover-comment { background: rgba(52,152,219,0.07); }
.cvs-popover-issue { background: rgba(231,76,60,0.07); }
.cvs-popover-suggestion { background: rgba(243,156,18,0.07); }
.cvs-popover-approved { background: rgba(39,174,96,0.07); }
.cvs-popover-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.cvs-popover-type { font-size: 0.82em; }
.cvs-popover-author { color: #666; font-size: 0.78em; }
.cvs-popover-quote {
  color: #888;
  font-style: italic;
  font-size: 0.85em;
  padding: 4px 8px;
  background: rgba(0,0,0,0.15);
  border-radius: 4px;
  margin-bottom: 4px;
  border-left: 2px solid #3a3f4a;
}
.cvs-popover-item-body {
  color: #d0d4d8;
  line-height: 1.5;
  margin-bottom: 4px;
}
.cvs-popover-item-sug {
  color: #f39c12;
  font-size: 0.88em;
  margin-bottom: 4px;
}
.cvs-popover-item-acts {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.cvs-popover-item-acts button {
  background: none;
  border: none;
  color: #555;
  cursor: pointer;
  font-size: 0.78em;
  padding: 2px 0;
  transition: color 0.12s;
}
.cvs-popover-item-acts button:hover { color: #ddd; }
.cvs-popover-accept {
  color: #27ae60 !important;
  font-weight: 600;
}
.cvs-popover-accept:hover { color: #2ecc71 !important; }
.cvs-popover-reply-box {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid #2a2f3a;
  align-items: flex-end;
}
.cvs-popover-reply-box textarea {
  flex: 1;
  background: #12141a;
  border: 1px solid #3a3f4a;
  color: #d0d0d0;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 0.88em;
  font-family: inherit;
  resize: none;
  min-height: 32px;
  box-sizing: border-box;
}
.cvs-popover-reply-box textarea:focus {
  outline: none;
  border-color: #5dade2;
}
.cvs-popover-reply-box button {
  background: #3a7bd5;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.82em;
  white-space: nowrap;
}
.cvs-popover-reply-box button:hover { background: #4a8be5; }

/* ── Comment Form Overlay ── */
.cvs-comment-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 500;
}
.cvs-comment-form {
  background: #1e2232;
  border: 1px solid #3a3f4a;
  border-radius: 10px;
  padding: 16px;
  width: 320px;
  max-width: 90%;
}
.cvs-comment-title {
  font-weight: 600;
  color: #d0d0d0;
  margin-bottom: 10px;
  font-size: 0.95em;
}
.cvs-comment-form textarea {
  width: 100%;
  background: #12141a;
  border: 1px solid #3a3f4a;
  color: #d0d0d0;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.9em;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
  box-sizing: border-box;
}
.cvs-comment-form textarea:focus {
  outline: none;
  border-color: #7aafff;
}
.cvs-comment-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}
.cvs-cbtn {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid #3a3f4a;
  cursor: pointer;
  font-size: 0.85em;
}
.cvs-cbtn-cancel {
  background: #252a38;
  color: #999;
}
.cvs-cbtn-cancel:hover { background: #333; color: #ddd; }
.cvs-cbtn-submit {
  background: #3a7bd5;
  color: #fff;
  border-color: #3a7bd5;
}
.cvs-cbtn-submit:hover { background: #4a8be5; }

/* Contenteditable sentence behavior */
.cvs-sent[contenteditable="true"] {
  -webkit-user-modify: read-write-plaintext-only;
  -moz-user-modify: read-write;
  user-select: text;
  word-break: break-word;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   A-TERMS TAB
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.aterms-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #161920;
  border-bottom: 1px solid #1e222d;
}
.aterms-search {
  flex: 1;
  padding: 4px 8px;
  background: #1a1e27;
  border: 1px solid #2a2d35;
  border-radius: 4px;
  color: #d1d5de;
  font-size: 12px;
  outline: none;
}
.aterms-search:focus { border-color: #3b82f6; }
.aterms-stats {
  padding: 3px 10px;
  font-size: 11px;
  color: #6b7280;
  background: #161920;
  border-bottom: 1px solid #1e222d;
}
.aterms-list {
  overflow-y: auto;
  flex: 1;
  padding: 4px;
}
.aterms-list::-webkit-scrollbar { width: 4px; }
.aterms-list::-webkit-scrollbar-thumb { background: #252830; border-radius: 4px; }
.aterms-list::-webkit-scrollbar-thumb:hover { background: #3a4050; }
.aterms-list { scrollbar-width: thin; scrollbar-color: #252830 transparent; }
.aterm-entry {
  padding: 8px 10px;
  border-bottom: 1px solid #1a1e27;
  transition: background 0.15s;
}
.aterm-entry:hover { background: #1a1e27; }
.aterm-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 3px;
}
.aterm-term {
  color: #e6a96f;
  font-weight: 600;
  font-size: 13px;
  font-style: italic;
}
.aterm-count {
  color: #6b7280;
  font-size: 10px;
}
.aterm-expl {
  color: #8b919e;
  font-size: 11.5px;
  line-height: 1.5;
  margin-bottom: 4px;
  word-break: break-word;
}
.aterm-trans-row { display: flex; }
.aterm-trans-input {
  width: 100%;
  padding: 3px 6px;
  background: #12151b;
  border: 1px solid #252830;
  border-radius: 3px;
  color: #d1d5de;
  font-size: 12px;
  font-family: inherit;
  resize: none;
  min-height: 22px;
  overflow: hidden;
  outline: none;
  transition: border-color 0.3s;
}
.aterm-trans-input:focus { border-color: #3b82f6; }
.aterm-trans-input::placeholder { color: #3d4455; }
.aterm-term-trans-row { display: flex; margin-bottom: 2px; }
.aterm-term-trans-input {
  width: 100%;
  padding: 2px 6px;
  background: #0d1117;
  border: 1px solid #1f3a5f;
  border-radius: 3px;
  color: #58a6ff;
  font-size: 11px;
  font-style: italic;
  outline: none;
  transition: border-color 0.3s;
  font-family: inherit;
  resize: none;
  min-height: 22px;
  overflow: hidden;
}
.aterm-term-trans-input:focus { border-color: #3b82f6; }
.aterm-term-trans-input::placeholder { color: #264570; font-style: italic; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BILINGUAL COMMENTARY
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.comm-view-btn {
  padding: 2px 8px;
  background: transparent;
  border: 1px solid #2a2d35;
  border-radius: 3px;
  color: #6b7280;
  font-size: 11px;
  cursor: pointer;
  font-weight: 600;
}
.comm-view-btn.active {
  background: #1e3a5f;
  border-color: #3b82f6;
  color: #93c5fd;
}
.comm-lang-select {
  padding: 2px 4px;
  background: #1a1e27;
  border: 1px solid #2a2d35;
  border-radius: 3px;
  color: #d1d5de;
  font-size: 11px;
  outline: none;
}
.comm-bilingual-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  background: #161920;
  border-bottom: 1px solid #1e222d;
  font-size: 12px;
  color: #8b919e;
}
.comm-bi-stats { color: #6b7280; font-size: 11px; }
.comm-bi-para {
  padding: 10px 12px;
  border-bottom: 1px solid #1a1e27;
}
.comm-bi-para:hover { background: #13161d; }
.comm-bi-pali {
  color: #e6a96f;
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.65;
  margin-bottom: 4px;
}
.comm-bi-pali b {
  color: #f0c674;
  font-weight: 700;
  cursor: help;
  border-bottom: 1px dotted #e8c87066;
}
.comm-bi-num {
  color: #6b7280;
  font-weight: 600;
  font-style: normal;
  font-size: 11px;
}
/* ── Professional commentary translation formatting ── */
.comm-bi-trans {
  text-align: left;
  color: #c8ccd4;
  font-size: 13.5px;
  line-height: 1.75;
  padding: 6px 0 6px 1.5em;
}
.comm-bi-trans b {
  color: #e0dcc8;
  font-weight: 600;
}
.comm-pali-ref {
  color: #b8a882;
  font-style: italic;
  font-size: 0.92em;
}
.comm-quote {
  color: #a8b8d0;
}
.comm-trans-num {
  color: #6b7280;
  font-weight: 600;
  font-size: 11px;
  margin-right: 2px;
}
.comm-bi-empty {
  padding: 4px 0;
}
.comm-translate-btn {
  padding: 3px 10px;
  background: transparent;
  border: 1px dashed #3d4455;
  border-radius: 4px;
  color: #6b7280;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
}
.comm-translate-btn:hover {
  border-color: #3b82f6;
  color: #93c5fd;
  background: #1e3a5f22;
}
.comm-trans-edit {
  width: 100%;
  min-height: 60px;
  padding: 6px 8px;
  background: #12151b;
  border: 1px solid #3b82f6;
  border-radius: 4px;
  color: #d1d5de;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  font-family: inherit;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   A-TERM HOVER TOOLTIP
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.aterm-hover {
  color: #93c5fd;
  border-bottom: 1px dotted #93c5fd66;
  cursor: help;
}
.aterm-tooltip {
  position: fixed;
  z-index: 9999;
  max-width: 300px;
  padding: 8px 12px;
  background: #1a1e27;
  border: 1px solid #2a2d35;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  display: none;
  pointer-events: none;
}
.aterm-tt-term {
  color: #e6a96f;
  font-weight: 600;
  font-style: italic;
  font-size: 13px;
  margin-bottom: 4px;
}
.aterm-tt-expl {
  color: #8b919e;
  font-size: 11.5px;
  line-height: 1.5;
  margin-bottom: 4px;
  max-height: 60px;
  overflow: hidden;
}
.aterm-tt-trans {
  color: #93c5fd;
  font-size: 12px;
  font-weight: 500;
  padding-top: 4px;
  border-top: 1px solid #252830;
}

/* A-Terms pane layout */
#transAtermsPane.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DPD LOOKUP — PRO FORMAT
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.dpd-lookup-path {
  font-size: 11px;
  color: #6b7280;
  padding: 4px 10px;
  background: #161920;
  border-radius: 4px;
  margin-bottom: 6px;
}
.dpd-decon {
  font-size: 11px;
  color: #8b9dc3;
  padding: 3px 10px;
  margin-bottom: 8px;
}
.dpd-entry {
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid #252830;
  border-radius: 6px;
  background: #1a1e27;
}
.dpd-entry-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.dpd-lemma {
  font-size: 15px;
  font-weight: 700;
  color: #e6a96f;
  font-style: italic;
}
.dpd-pos {
  font-size: 11px;
  color: #8b9dc3;
  padding: 1px 6px;
  background: #252830;
  border-radius: 3px;
}
.dpd-freq {
  font-size: 10px;
  color: #6b7280;
  margin-left: auto;
}
.dpd-meaning {
  font-size: 13.5px;
  color: #d1d5de;
  line-height: 1.6;
  margin-bottom: 4px;
  font-weight: 500;
}
.dpd-meaning-lit {
  font-size: 12px;
  color: #8b919e;
  line-height: 1.5;
  margin-bottom: 2px;
}
.dpd-grammar {
  font-size: 11.5px;
  color: #7a8296;
  line-height: 1.5;
  margin: 4px 0;
  padding: 3px 0;
  border-top: 1px solid #1e222d;
}
.dpd-root {
  font-size: 12px;
  color: #93c5fd;
  font-weight: 500;
  margin: 2px 0;
}
.dpd-compound {
  font-size: 11.5px;
  color: #7a8296;
}
.dpd-sanskrit {
  font-size: 11px;
  color: #6b7280;
}
.dpd-commentary {
  font-size: 12px;
  color: #8b919e;
  line-height: 1.5;
  margin: 4px 0;
  padding: 4px 8px;
  background: #12151b;
  border-radius: 4px;
  border-left: 2px solid #2a2d35;
}
.dpd-example {
  font-size: 12px;
  color: #8b919e;
  line-height: 1.5;
  margin: 4px 0;
  padding: 3px 0;
}
.dpd-example-text {
  font-style: italic;
  color: #c8a97a;
}
.dpd-example-src {
  font-size: 10px;
  color: #6b7280;
  margin-left: 6px;
}
.dpd-rel {
  font-size: 11px;
  color: #7a8296;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SIMILAR SEARCH — THRESHOLD + STATS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.similar-threshold-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.similar-threshold-label {
  font-size: 10px;
  color: #6b7280;
  white-space: nowrap;
}
.similar-threshold-select {
  padding: 2px 4px;
  background: #1a1e27;
  border: 1px solid #2a2d35;
  border-radius: 3px;
  color: #d1d5de;
  font-size: 11px;
  outline: none;
}
.similar-stats {
  font-size: 11px;
  color: #6b7280;
  padding: 3px 0;
  margin-bottom: 4px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SIMILAR SEARCH — PAGINATION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.similar-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 0 6px;
}
.similar-pager-btn {
  min-width: 26px;
  height: 24px;
  padding: 0 5px;
  background: #1a1e27;
  border: 1px solid #2a2d35;
  border-radius: 3px;
  color: #8b9dc3;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s;
}
.similar-pager-btn:hover:not(:disabled) {
  background: #252830;
  color: #d1d5de;
}
.similar-pager-btn.active {
  background: #2563eb;
  border-color: #3b82f6;
  color: #fff;
  font-weight: 600;
}
.similar-pager-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.similar-idx {
  font-size: 10px;
  color: #6b7280;
  margin-right: 4px;
  min-width: 20px;
}

/* ── Cache Status Badge ── */
.cache-status-badge {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  border-radius: 8px;
  background: #1a1a2e;
  color: #8b949e;
  border: 1px solid #30363d;
  cursor: default;
  white-space: nowrap;
  vertical-align: middle;
  margin-left: 4px;
}
.cache-status-badge.active {
  background: #0d2818;
  color: #3fb950;
  border-color: #238636;
}
.cache-status-badge.inactive {
  background: #2d1a1a;
  color: #f85149;
  border-color: #da3633;
}
.cache-invalidate-btn {
  background: none;
  border: 1px solid #30363d;
  color: #8b949e;
  font-size: 13px;
  cursor: pointer;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 2px;
  vertical-align: middle;
  line-height: 1;
}
.cache-invalidate-btn:hover {
  color: #f0883e;
  border-color: #f0883e;
}

/* ── Per-term translate button ── */
.aterm-translate-single {
  background: none;
  border: 1px solid #30363d;
  color: #8b949e;
  font-size: 11px;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 3px;
  margin-left: 4px;
  opacity: 0.5;
  transition: opacity 0.2s;
  line-height: 16px;
}
.aterm-translate-single:hover {
  opacity: 1;
  color: #58a6ff;
  border-color: #58a6ff;
}
.aterm-translate-single.translating {
  opacity: 1;
  color: #f0883e;
  border-color: #f0883e;
  animation: pulse-aterm 1s infinite;
}
.aterm-translate-single.done {
  opacity: 1;
  color: #3fb950;
  border-color: #238636;
}
@keyframes pulse-aterm {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}


/* ── Anuvāda: Propagation Panel ── */
.propagate-panel {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; max-width: 90vw;
  max-height: 80vh;
  background: #1e2030;
  border: 1px solid #363b48;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
  z-index: 10000;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.propagate-panel[style*="display: block"] { display: flex !important; }
.propagate-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  background: #252840;
  border-bottom: 1px solid #363b48;
  font-weight: 600; font-size: 14px; color: #c8d1e0;
}
.propagate-close {
  background: none; border: none; color: #7a8296; font-size: 20px;
  cursor: pointer; padding: 0 4px;
}
.propagate-close:hover { color: #f85149; }
.propagate-ref {
  padding: 10px 16px;
  background: rgba(91,156,246,0.06);
  border-bottom: 1px solid #363b48;
}
.propagate-ref-label { font-size: 11px; color: #7a8296; margin-bottom: 4px; }
.propagate-ref-pali { font-size: 12px; color: #e6a96f; font-style: italic; }
.propagate-ref-trans { font-size: 12px; color: #5b9cf6; margin-top: 2px; }
.propagate-body {
  flex: 1; overflow-y: auto; padding: 12px 16px;
}
.propagate-stats { font-size: 12px; color: #7a8296; margin-bottom: 8px; }
.propagate-actions {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #2a2e3f;
}
.propagate-actions label { font-size: 12px; color: #a0aec0; cursor: pointer; }
.propagate-apply-btn {
  background: rgba(63,185,80,0.15); border: 1px solid rgba(63,185,80,0.3);
  color: #3fb950; padding: 6px 14px; border-radius: 8px;
  cursor: pointer; font-size: 12px; font-weight: 600;
  transition: all 0.15s;
}
.propagate-apply-btn:hover { background: rgba(63,185,80,0.25); }
.propagate-apply-btn:disabled { opacity: 0.5; cursor: wait; }
.propagate-list { display: flex; flex-direction: column; gap: 6px; }
.propagate-item {
  padding: 8px 10px; border-radius: 6px;
  background: rgba(255,255,255,0.02); border: 1px solid #2a2e3f;
  transition: all 0.15s;
}
.propagate-item:hover { border-color: #363b48; }
.propagate-item.propagate-done { border-color: rgba(63,185,80,0.3); background: rgba(63,185,80,0.05); }
.propagate-item label { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; color: #c8d1e0; }
.propagate-item-ref { color: #7a8296; }
.propagate-item-pali { font-size: 11px; color: #e6a96f; margin-top: 4px; font-style: italic; }
.propagate-item-trans { font-size: 11px; color: #5b9cf6; margin-top: 2px; }
.propagate-empty { color: #7a8296; text-align: center; padding: 20px; }

/* Propagate button on final rows */
.trans-propagate-btn {
  background: none; border: none; cursor: pointer;
  font-size: 12px; padding: 0 2px; margin-left: 2px;
  opacity: 0; transition: opacity 0.15s; vertical-align: middle;
}
tr:hover .trans-propagate-btn { opacity: 0.6; }
.trans-propagate-btn:hover { opacity: 1 !important; }
/* Inline translate button per row */
.trans-inline-translate-btn {
  background: none;
  border: none;
  color: #3fb950;
  cursor: pointer;
  font-size: 11px;
  padding: 0 2px;
  margin-left: 3px;
  opacity: 0;
  transition: opacity 0.15s;
  vertical-align: middle;
}
tr:hover .trans-inline-translate-btn { opacity: 0.6; }
.trans-inline-translate-btn:hover { opacity: 1 !important; }
.trans-inline-translate-btn.translating {
  opacity: 1 !important;
  color: #d29922;
  animation: spin 1s linear infinite;
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.trans-actions-cell {
  white-space: nowrap;
  text-align: center;
}
/* ── Propagation progress bar ── */
.propagate-progress {
  margin: 8px 0;
}
.propagate-progress-bar {
  height: 4px;
  background: #2a2e3f;
  border-radius: 2px;
  overflow: hidden;
}
.propagate-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3fb950, #5b9cf6);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.propagate-progress-text {
  font-size: 11px;
  color: #7a8296;
  margin-top: 4px;
  text-align: center;
}
/* ── Quick path vs LLM visual distinction ── */
.propagate-item-quick { border-left: 2px solid #3fb950; }
.propagate-item-llm { border-left: 2px solid #d29922; }
.propagate-quick-icon { color: #3fb950; font-size: 13px; }
.propagate-llm-icon { color: #d29922; font-size: 13px; }
.propagate-quick-label { color: #3fb950; font-weight: 600; }
.propagate-llm-label { color: #d29922; font-weight: 600; }
/* Propagation threshold slider */
.propagate-threshold {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #1a1e2e;
  border-bottom: 1px solid #2a2e3f;
  font-size: 12px;
  color: #9da5b4;
}
.propagate-threshold label { white-space: nowrap; }
.propagate-threshold input[type="range"] {
  flex: 1;
  max-width: 160px;
  accent-color: #5b9cf6;
  height: 4px;
}
.propagate-threshold-btn {
  background: #2a3a5a;
  color: #5b9cf6;
  border: 1px solid #3a4a6a;
  border-radius: 4px;
  padding: 2px 10px;
  font-size: 11px;
  cursor: pointer;
}
.propagate-threshold-btn:hover { background: #3a4a6a; }
#thresholdValue { color: #5b9cf6; font-weight: 600; }
/* Canvas: untranslated sentence placeholder */
.cvs-untranslated {
  opacity: 0.35;
  border-bottom: 1px dashed #4a5070;
}
.cvs-untranslated:hover { opacity: 0.6; }
.cvs-untranslated:focus { opacity: 1; border-bottom-color: #5b9cf6; }
.cvs-placeholder {
  font-style: italic;
  color: #e6a96f;
  font-size: 0.9em;
}
/* Canvas: section headings (uddesa) */
.cvs-section-heading {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.88em;
  font-weight: 600;
  color: #c8ccd0;
  margin: 28px 0 12px;
  padding: 8px 0 6px;
  border-bottom: 1px solid #252a38;
  text-indent: 0;
  line-height: 1.6;
}
.cvs-heading-sent {
  color: #e6a96f;
}
.cvs-heading-sent:focus {
  color: #d0d4d8;
}
/* Canvas: centre (colophon / ending) */
.cvs-centre {
  text-align: center;
  margin: 24px 0 12px;
  text-indent: 0;
}
.cvs-centre-sent {
  font-style: italic;
  color: #9da5b4;
  font-size: 0.88em;
}
/* Canvas: gāthā (verse) */
.cvs-gatha {
  margin: 16px 0;
  padding: 12px 24px 12px 36px;
  border-left: 2px solid #2a3a5a;
  text-indent: 0;
  line-height: 1.8;
}
.cvs-gatha-line {
  margin: 2px 0;
  color: #d0d4d8;
  font-size: 0.93em;
}
/* Canvas: unindented paragraph */
.cvs-unindented {
  text-indent: 0 !important;
}
/* ═══════════════════════════════════════════════════════
   Batch Translation Progress Bar
   ═══════════════════════════════════════════════════════ */
.comm-batch-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: #1a2236;
  border-bottom: 1px solid #2a3a5a;
}
.comm-batch-bar {
  flex: 1;
  height: 6px;
  background: #2a3a5a;
  border-radius: 3px;
  overflow: hidden;
}
.comm-batch-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.comm-batch-text {
  font-size: 0.82em;
  color: #9da5b4;
  white-space: nowrap;
}
.comm-batch-stop {
  background: none;
  border: 1px solid #e74c3c;
  color: #e74c3c;
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
  font-size: 0.85em;
  transition: all 0.2s;
}
.comm-batch-stop:hover {
  background: #e74c3c;
  color: #fff;
}

/* ═══════════════════════════════════════════════════════
   A-Term Variable Highlighting in Translations
   ═══════════════════════════════════════════════════════ */
.aterm-var {
  border-bottom: 1.5px dashed #f39c12;
  color: inherit;
  cursor: pointer;
  padding-bottom: 1px;
  transition: all 0.2s;
}
.aterm-var:hover {
  background: rgba(243, 156, 18, 0.1);
  border-bottom-style: solid;
}
.aterm-unresolved {
  border-bottom-color: #e74c3c;
  font-style: italic;
  opacity: 0.8;
}

/* Glossary edit UI in translation tab */
.tg-toolbar { display: flex; gap: 6px; margin-bottom: 8px; }
.tg-toolbar .trans-glossary-search { flex: 1; margin-bottom: 0; }
.tg-add-btn {
  background: #252830; border: 1px solid #3d4455; color: #7ee787;
  font-size: 18px; width: 36px; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.tg-add-btn:hover { background: #2a2e3a; border-color: #7ee787; }
.tg-add-form {
  background: rgba(255,255,255,0.04); border: 1px solid #252830;
  border-radius: 6px; padding: 8px; margin-bottom: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.tg-input {
  background: #0f1117; border: 1px solid #252830; color: #d1d5de;
  padding: 6px 10px; border-radius: 4px; font-size: 13px; width: 100%; box-sizing: border-box;
}
.tg-input:focus { border-color: #5b9cf6; outline: none; }
.tg-add-actions { display: flex; gap: 6px; align-items: center; }
.tg-strict-label { font-size: 12px; color: #8b929e; display: flex; align-items: center; gap: 4px; flex: 1; }
.tg-item { position: relative; }
.tg-delete-btn {
  color: #f85149; font-size: 14px; cursor: pointer;
  opacity: 0; transition: opacity 0.15s; padding: 0 4px;
}
.tg-item:hover .tg-delete-btn { opacity: 1; }
.tg-delete-btn:hover { color: #ff6b63; }

/* Glossary: left-align Vietnamese text */
#transGlossaryList .glossary-item { justify-content: flex-start; }
#transGlossaryList .glossary-pali { min-width: 140px; }
#transGlossaryList .glossary-viet { text-align: left; }