:host { all: initial; }
.sidebar {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 320px;
  background: #fff;
  border-left: 1px solid #e5e5e5;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 13px;
  overflow: hidden;
  z-index: 2147483647;
  box-shadow: -2px 0 12px rgba(0,0,0,0.05);
  color: #222;
  box-sizing: border-box;
  transition: width 180ms ease;
}
.sidebar.collapsed { width: 28px; }
.sidebar.collapsed .sidebar-body { display: none; }
.sidebar-body {
  height: 100%;
  overflow-y: auto;
  padding: 12px 12px 12px 20px;
  box-sizing: border-box;
}

/* Collapse handle + tool-active indicator */
.sidebar .collapse-btn {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 28px;
  height: 52px;
  background: #3b5e48;
  color: #fff;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  padding: 0;
  font-size: 13px;
  line-height: 52px;
  text-align: center;
  box-shadow: -1px 0 4px rgba(0,0,0,0.1);
  z-index: 1;
}
.sidebar .collapse-btn:hover { background: #3aa373; }
.sidebar .collapse-btn .chev { display: inline-block; transition: transform 180ms ease; }
.sidebar.collapsed .collapse-btn .chev { transform: rotate(180deg); }
.sidebar .collapse-btn .tool-indicator { display: none; font-size: 15px; }
.sidebar.collapsed.tool-active .collapse-btn .chev { display: none; }
.sidebar.collapsed.tool-active .collapse-btn .tool-indicator { display: inline; }
.sidebar.tool-active .collapse-btn { background: #3aa373; }

.sidebar .label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: #888; margin: 12px 0 6px; }
.sidebar header strong { font-size: 14px; color: #3b5e48; }
.sidebar .tools { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sidebar .tools .label { grid-column: 1 / -1; margin-bottom: 0; }
.sidebar .tool { background: #f5f5f5; border: 1px solid transparent; padding: 8px; border-radius: 4px; cursor: pointer; font-size: 12px; text-align: left; }
.sidebar .tool.active { background: #eaf3ed; border-color: #3aa373; color: #3b5e48; }
.sidebar .hint { grid-column: 1 / -1; font-size: 10px; color: #888; margin: 6px 0 0; line-height: 1.4; }
.sidebar .page-row { display: flex; align-items: center; gap: 6px; padding: 5px 6px; margin: 0 -6px; border-radius: 4px; cursor: pointer; }
.sidebar .page-row:hover { background: #f5f5f5; }
.sidebar .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.sidebar .dot.grey  { background: #ccc; }
.sidebar .dot.amber { background: #e6a829; }
.sidebar .dot.green { background: #3aa373; }
.sidebar .page-row .count { margin-left: auto; font-size: 10px; color: #888; }
.sidebar .save-btn { width: 100%; padding: 10px; background: #3b5e48; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; margin-top: 12px; }
.sidebar .save-btn[data-state="saving"] { opacity: 0.6; cursor: wait; }
.sidebar .save-btn[data-state="saved"] { background: #3aa373; }

/* Annotation list cards + edit/delete controls */
.sidebar .notes-list .note { background: #f9f9f9; border-left: 3px solid #3aa373; padding: 6px 8px; border-radius: 3px; margin-bottom: 6px; }
.sidebar .notes-list .note-head { display: flex; align-items: center; gap: 4px; }
.sidebar .notes-list .note .num { background: #3aa373; color: #fff; width: 16px; height: 16px; border-radius: 50%; display: inline-block; text-align: center; font-size: 10px; line-height: 16px; flex-shrink: 0; }
.sidebar .notes-list .note strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sidebar .notes-list .note .type-tag { font-size: 9px; background: #eaf3ed; color: #3b5e48; padding: 1px 5px; border-radius: 8px; text-transform: uppercase; flex-shrink: 0; }
.sidebar .notes-list .note-actions { margin-left: auto; display: flex; gap: 1px; flex-shrink: 0; }
.sidebar .notes-list .note-actions button { background: transparent; border: none; cursor: pointer; font-size: 13px; padding: 1px 5px; color: #888; border-radius: 3px; line-height: 1; }
.sidebar .notes-list .note-actions button:hover { background: #eaf3ed; color: #3b5e48; }
.sidebar .notes-list .note-actions .note-delete:hover { background: #fdecec; color: #c0392b; }
.sidebar .notes-list .note p { margin: 4px 0 0 22px; font-size: 11px; color: #555; white-space: pre-wrap; word-wrap: break-word; }

/* Floating popup modal for adding / editing an annotation */
.reviewer-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2147483647;
  font-family: system-ui, -apple-system, sans-serif;
  animation: reviewer-fade-in 120ms ease;
}
@keyframes reviewer-fade-in { from { opacity: 0 } to { opacity: 1 } }
.reviewer-modal {
  background: #fffceb;
  border: 1px solid #e6a829;
  border-radius: 10px;
  padding: 18px;
  width: 440px;
  max-width: calc(100vw - 40px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  animation: reviewer-pop 160ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes reviewer-pop {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.reviewer-modal .modal-head { margin-bottom: 10px; }
.reviewer-modal .modal-head strong { display: block; color: #3b5e48; font-size: 15px; margin-bottom: 2px; }
.reviewer-modal .modal-prompt { color: #888; font-size: 12px; }
.reviewer-modal .modal-textarea {
  width: 100%;
  min-height: 110px;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  box-sizing: border-box;
  resize: vertical;
  color: #222;
  background: #fff;
}
.reviewer-modal .modal-textarea:focus { outline: none; border-color: #3aa373; box-shadow: 0 0 0 2px rgba(58, 163, 115, 0.15); }
.reviewer-modal .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.reviewer-modal .modal-cancel, .reviewer-modal .modal-ok {
  padding: 7px 18px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.reviewer-modal .modal-cancel { background: transparent; color: #888; border-color: #ddd; }
.reviewer-modal .modal-cancel:hover { background: #f5f5f5; }
.reviewer-modal .modal-ok { background: #3b5e48; color: #fff; font-weight: 500; }
.reviewer-modal .modal-ok:hover { background: #3aa373; }