/* annotation-rail.css -- Refactored 2026-05-12 to consume tokens (WS-Theme). */

.annotation-rail {
  position: absolute; right: -52px; top: var(--space-4);
  width: 36px; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); z-index: var(--z-sticky);
}
.annotation-pin {
  width: 32px; height: 32px; border-radius: var(--radius-full);
  border: 1.5px solid var(--border-default);
  background: var(--accent-subtle-bg);
  color: var(--accent-bg);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  transition: background-color var(--duration-normal) var(--ease-out-quint),
              border-color var(--duration-normal) var(--ease-out-quint),
              box-shadow var(--duration-normal) var(--ease-out-quint),
              color var(--duration-normal) var(--ease-out-quint);
  outline: none; position: relative;
}
.annotation-pin:hover, .annotation-pin:focus-visible {
  background: var(--accent-bg); color: var(--accent-fg); border-color: var(--accent-bg);
  box-shadow: var(--shadow-2);
}
.annotation-pin[data-count="0"] { border-style: dashed; background: transparent; color: var(--fg-tertiary); }
.annotation-pin[data-count="0"]:hover { background: var(--accent-bg); color: var(--accent-fg); border-style: solid; }
.annotation-pin::after {
  content: attr(data-tip); position: absolute; right: calc(100% + var(--space-3)); top: 50%;
  transform: translateY(-50%);
  background: var(--toast-bg); color: var(--toast-fg);
  font-family: var(--font-sans); font-size: var(--font-size-xs); white-space: nowrap;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-xs);
  pointer-events: none; opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out-quint);
  z-index: var(--z-tooltip);
}
.annotation-pin:hover::after { opacity: 1; }
.annotation-drawer {
  /* Sits below the sticky app-nav so the global "Sign out / email" row stays
     visible. --app-nav-height defaults to 47px in tokens.css but each page
     can override it (e.g. when the doc-controls row is also sticky). */
  position: fixed; top: var(--app-nav-height, 47px); right: 0;
  width: var(--drawer-width); height: calc(100vh - var(--app-nav-height, 47px));
  background: var(--rail-bg);
  box-shadow: var(--shadow-4);
  border-left: 1px solid var(--rail-border);
  z-index: var(--z-drawer); display: flex; flex-direction: column;
  font-family: var(--font-sans); font-size: var(--font-size-sm); color: var(--fg-primary);
  transform: translateX(100%);
  transition: transform var(--duration-normal) var(--ease-out-quint);
}
.annotation-drawer.open { transform: translateX(0); }
.annotation-drawer-header {
  padding: var(--space-6) var(--space-6) var(--space-5);
  border-bottom: 1px solid var(--rail-border);
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-shrink: 0;
}
.annotation-drawer-heading {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.annotation-drawer-close {
  background: none; border: none; cursor: pointer;
  color: var(--fg-tertiary);
  font-size: var(--font-size-md); line-height: 1;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs); flex-shrink: 0;
  transition: color var(--duration-fast) var(--ease-out-quint);
}
.annotation-drawer-close:hover { color: var(--fg-primary); }
.annotation-drawer-subheader {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--rail-border);
  background: var(--rail-bg);
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: var(--space-3);
}
.annotation-drawer-subheader .acms-rail-filter-bar {
  flex-wrap: wrap; gap: var(--space-2);
}
.annotation-drawer-subheader .acms-rail-filter-chip {
  font-size: 11px; padding: var(--space-1) var(--space-3);
}
.annotation-show-resolved {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-sans); font-size: var(--font-size-xs);
  color: var(--fg-tertiary); cursor: pointer; user-select: none;
}
.annotation-show-resolved input[type="checkbox"] { margin: 0; cursor: pointer; }
.annotation-drawer-body { flex: 1; overflow-y: auto; padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); background: var(--rail-bg); }
.annotation-thread {
  background: var(--bg-elevated);
  border: 1px solid var(--rail-border);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-3);
}
.annotation-thread.resolved, .annotation-thread.deleted { background: var(--bg-inset); opacity: .7; }
.annotation-thread.deleted { font-style: italic; }
.annotation-thread.is-filtered-out { display: none !important; }
.annotation-thread-meta {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-xs); color: var(--fg-tertiary);
  font-family: var(--font-mono);
}
.annotation-thread-author { color: var(--fg-primary); font-weight: var(--font-weight-semibold); }
.annotation-thread-body { line-height: var(--line-height-snug); color: var(--fg-secondary); }
.annotation-thread-body p { margin: 0 0 var(--space-2); }
.annotation-thread-body p:last-child { margin-bottom: 0; }
.annotation-thread-actions { display: flex; gap: var(--space-3); margin-top: var(--space-3); }
.annotation-thread-btn {
  background: none;
  border: 1px solid var(--rail-border);
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--fg-tertiary);
  padding: var(--space-1) var(--space-3);
  transition: color var(--duration-fast) var(--ease-out-quint),
              border-color var(--duration-fast) var(--ease-out-quint);
}
.annotation-thread-btn:hover { color: var(--accent-bg); border-color: var(--accent-bg); }
.annotation-thread-btn.resolve { color: var(--accent-bg); }
.annotation-thread-btn.delete { color: var(--status-danger-fg); }
.annotation-thread-btn.delete:hover { border-color: var(--status-danger-fg); color: var(--status-danger-fg-hover); }
.annotation-replies {
  margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: 1px solid var(--rail-border);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.annotation-reply {
  padding: var(--space-3) var(--space-4);
  background: var(--bg-inset);
  border-radius: var(--radius-xs);
  border: 1px solid var(--rail-border);
}
.annotation-compose {
  border-top: 1px solid var(--rail-border);
  padding: var(--space-4) var(--space-5);
  flex-shrink: 0; display: flex; flex-direction: column; gap: var(--space-3);
}
.annotation-compose textarea {
  width: 100%; min-height: 72px; resize: vertical;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xs);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--fg-primary);
  background: var(--bg-elevated);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out-quint);
}
.annotation-compose textarea:focus { border-color: var(--border-focus); }
.annotation-compose-row { display: flex; justify-content: flex-end; gap: var(--space-3); }
.annotation-compose-post {
  background: var(--accent-bg);
  color: var(--accent-fg);
  border: none;
  border-radius: var(--radius-xs);
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out-quint);
}
.annotation-compose-post:hover { background: var(--accent-hover); }
.annotation-compose-post:disabled { opacity: .5; cursor: default; }

/* Rail-root: sticky filter strip above the doc body. Holds the WS-Reactions
   filter chip set. Lives outside the per-h2 pin rail so the chips never
   sit inside heading text. */
.annotation-rail-root { display: none; }
.annotation-rail-root:empty { display: none; }

.acms-rail-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.acms-rail-filter-chip {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  color: var(--fg-tertiary);
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-out-quint),
    color var(--duration-fast) var(--ease-out-quint),
    background-color var(--duration-fast) var(--ease-out-quint);
}
.acms-rail-filter-chip:hover {
  border-color: var(--border-strong);
  color: var(--fg-primary);
}
.acms-rail-filter-chip[aria-selected="true"] {
  background: var(--accent-bg);
  border-color: var(--accent-bg);
  color: var(--accent-fg);
}
.acms-rail-filter-chip:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (max-width: 767px) {
  .annotation-rail-root { padding: var(--space-3) var(--space-5); }
  .acms-rail-filter-chip { font-size: 11px; padding: var(--space-1) var(--space-3); }
}