styles.css

/* Track Changes — styles
 *
 * Conventions:
 *  - `tc-` prefix on every class to avoid clashes.
 *  - Colors use Obsidian CSS variables where possible so themes drive them.
 *  - Inline rendering must be visually quiet enough to read prose around it.
 */

/* ---------- Author hue palette ----------
 *
 * Per-author tinting. The hue index is set by JS via data-author-hue="0..7"
 * (see src/authors.ts) on chips, panel messages/cards, reading-mode comment
 * icons, AND every inline mark (addition/deletion/substitution/highlight) in
 * both live-preview and source mode. Saturation/lightness are fixed so the
 * result is legible across themes.
 *
 * Two signals are layered without colliding:
 *   - the OPERATION (add/del/highlight) is communicated by the green/red/yellow
 *     background — those stay exactly as before;
 *   - the AUTHOR is communicated by a hue-colored border (left border on block
 *     elements, bottom-border "underline" on inline marks), so the background
 *     stays free for the operation color.
 *
 * One rule per index sets `--tc-hue`; the selectors below consume it. */
[data-author-hue="0"] { --tc-hue: 210; } /* blue */
[data-author-hue="1"] { --tc-hue: 280; } /* purple */
[data-author-hue="2"] { --tc-hue: 150; } /* green */
[data-author-hue="3"] { --tc-hue: 30; }  /* orange */
[data-author-hue="4"] { --tc-hue: 340; } /* pink */
[data-author-hue="5"] { --tc-hue: 190; } /* teal */
[data-author-hue="6"] { --tc-hue: 50; }  /* yellow */
[data-author-hue="7"] { --tc-hue: 0; }   /* red — Claude */

/* Chip: hue drives its border + faint background fill. */
.tc-chip[data-author-hue] {
  border-color: hsla(var(--tc-hue), 70%, 55%, 0.4);
  background: hsla(var(--tc-hue), 70%, 55%, 0.08);
}

/* Panel message / suggestion card / diff block: hue as a left border. The
 * operation/semantic background is set per-class and is left untouched. */
.tc-message[data-author-hue],
.tc-card[data-author-hue],
.tc-diff[data-author-hue] {
  border-left: 3px solid hsla(var(--tc-hue), 70%, 55%, 0.6);
}

/* Reading-mode comment icon: hue tints the glyph itself. */
.tc-rm-comment[data-author-hue] {
  color: hsla(var(--tc-hue), 70%, 50%, 0.9);
  background: transparent;
  border: none;
}

/* Inline marks (live-preview + source mode): hue as a bottom-border
 * "underline". `border-bottom` doesn't conflict with line-through, and leaves
 * the operation background (green/red/yellow) doing its own job. */
.tc-addition[data-author-hue],
.tc-deletion[data-author-hue],
.tc-highlight[data-author-hue],
.tc-sub-old[data-author-hue],
.tc-sub-new[data-author-hue],
.tc-sub-raw-old[data-author-hue],
.tc-sub-raw-new[data-author-hue],
.tc-raw-comment[data-author-hue] {
  border-bottom: 2px solid hsla(var(--tc-hue), 70%, 50%, 0.55);
}

/* ---------- Inline (editor / live preview) ---------- */

.tc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  margin: 0 2px;
  border-radius: 10px;
  font-size: 0.72em;
  line-height: 1.5;
  cursor: pointer;
  user-select: none;
  /* inline-flex doesn't compute a clean text baseline; "middle" sits on the
   * x-height which lines up with surrounding prose better than "baseline". */
  vertical-align: middle;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-secondary);
  color: var(--text-normal);
  white-space: nowrap;
}
.tc-chip:hover {
  background: var(--background-modifier-hover);
}
@keyframes tc-chip-blink {
  0%, 33%, 66%, 100% {
    box-shadow: 0 0 0 0 var(--interactive-accent);
    filter: brightness(1);
  }
  16%, 50%, 83% {
    box-shadow: 0 0 0 2px var(--interactive-accent);
    filter: brightness(1.25);
  }
}
.tc-chip-flash {
  animation: tc-chip-blink 1.2s ease-in-out;
}
.tc-chip-you {
  border-color: rgba(0, 122, 204, 0.4);
  background: rgba(0, 122, 204, 0.08);
}
.tc-chip-named {
  /* hue/background come from [data-author-hue="N"] selectors above */
}
.tc-chip-icon {
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.75;
}
.tc-chip-num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-muted);
}
.tc-chip-badge {
  background: var(--background-modifier-border);
  color: var(--text-muted);
  border-radius: 8px;
  font-size: 0.85em;
  padding: 0 5px;
  margin-left: 2px;
}

/* ---------- Operation mark backgrounds ----------
 *
 * The operation tint is an alpha wash, so what you actually see is the page
 * behind it. The same alpha that reads as a soft tint on a light background
 * all but disappears on a dark one — and per the note at the top of this file
 * the background *is* the operation signal, so on dark themes that signal was
 * effectively lost. Each tint is therefore declared once as a variable and
 * raised under `.theme-dark`, keeping one source of truth per operation.
 *
 * Dark-mode alphas were picked to match the *apparent* tint strength of the
 * light values against Obsidian's default backgrounds, holding to the
 * "visually quiet enough to read prose around it" rule above — they are
 * deliberately not the strongest values that would still be legible. */
body {
  --tc-add-bg: rgba(56, 161, 105, 0.12);
  --tc-del-bg: rgba(220, 38, 38, 0.08);
  --tc-highlight-bg: rgba(252, 211, 77, 0.30);
  --tc-sub-old-bg: rgba(220, 38, 38, 0.06);
  --tc-sub-new-bg: rgba(56, 161, 105, 0.12);
  --tc-sub-old-changed-bg: rgba(220, 38, 38, 0.28);
  --tc-sub-new-changed-bg: rgba(56, 161, 105, 0.30);
  --tc-comment-named-bg: hsla(280, 70%, 55%, 0.12);
  --tc-comment-you-bg: rgba(0, 122, 204, 0.10);
}
.theme-dark {
  --tc-add-bg: rgba(56, 161, 105, 0.32);
  --tc-del-bg: rgba(220, 38, 38, 0.28);
  --tc-highlight-bg: rgba(252, 211, 77, 0.45);
  --tc-sub-old-bg: rgba(220, 38, 38, 0.22);
  --tc-sub-new-bg: rgba(56, 161, 105, 0.32);
  --tc-sub-old-changed-bg: rgba(220, 38, 38, 0.50);
  --tc-sub-new-changed-bg: rgba(56, 161, 105, 0.52);
  --tc-comment-named-bg: hsla(280, 70%, 55%, 0.32);
  --tc-comment-you-bg: rgba(0, 122, 204, 0.30);
}

.tc-addition {
  background: var(--tc-add-bg);
}
.tc-deletion {
  background: var(--tc-del-bg);
  text-decoration: line-through;
}
.tc-highlight {
  background: var(--tc-highlight-bg);
}
/* AI-added text: a two-colour "sunset" gradient on the glyphs (orange → violet).
   A solid fallback colour keeps the text visible if background-clip is
   unsupported; the @supports rule only goes transparent where the clip works.
   Swap the two stops below to retune the colours. */
.tc-aitext {
  color: var(--text-normal);
  background-image: linear-gradient(90deg, #f97316, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .tc-aitext {
    -webkit-text-fill-color: transparent;
  }
}
.tc-sub-old {
  text-decoration: line-through;
  background: var(--tc-sub-old-bg);
}
.tc-sub-new {
  background: var(--tc-sub-new-bg);
}
.tc-sub-raw-old {
  background: var(--tc-sub-old-bg);
  text-decoration: line-through;
}
.tc-sub-raw-new {
  background: var(--tc-sub-new-bg);
}
.tc-raw-comment {
  border-radius: 2px;
}
.tc-raw-comment-named {
  background: var(--tc-comment-named-bg); /* purple — AI */
}
.tc-raw-comment-you {
  background: var(--tc-comment-you-bg); /* blue — matches tc-chip-you */
}
.tc-sub-arrow {
  color: var(--text-muted);
  font-size: 0.9em;
  cursor: pointer;
}
/* Obsidian parses `{~~old~>new~~}` as `~~strikethrough~~`, which would draw
 * a line across our green `new` half. Making the halves inline-block turns
 * them into atomic inline-level boxes — per the CSS Text Decoration spec,
 * an ancestor's text-decoration does not propagate into atomic inline-level
 * descendants, so the parent .cm-strikethrough's line stops at our box
 * boundary. Scoped to our marks only; real ~~strike~~ elsewhere is
 * unaffected. */
.tc-sub-old,
.tc-sub-new,
.tc-sub-raw-old,
.tc-sub-raw-new {
  display: inline-block;
}
.tc-sub-old-changed {
  display: inline;
  background: var(--tc-sub-old-changed-bg);
}
.tc-sub-new-changed {
  display: inline;
  background: var(--tc-sub-new-changed-bg);
}

/* ---------- Right panel ---------- */

.tc-panel {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tc-empty {
  color: var(--text-muted);
  font-style: italic;
}
.tc-header {
  border-bottom: 1px solid var(--background-modifier-border);
  padding-bottom: 8px;
}
.tc-header-title {
  font-weight: 600;
  font-size: 1.05em;
}
.tc-header-counts {
  color: var(--text-muted);
  font-size: 0.85em;
}

.tc-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tc-card {
  border: 1px solid var(--background-modifier-border);
  border-radius: 8px;
  padding: 10px;
  background: var(--background-primary);
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tc-card:hover {
  border-color: var(--interactive-accent);
}
.tc-card-flash {
  box-shadow: 0 0 0 2px var(--interactive-accent);
}
.tc-line-ref {
  font-size: 0.75em;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Author/date meta row on suggestion + highlight cards. Hidden by the panel
 * (the row isn't emitted) when there is neither a resolved author nor a date. */
.tc-card-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.78em;
  color: var(--text-muted);
}
.tc-meta-author {
  font-weight: 600;
}
.tc-meta-date {
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}
.tc-thread-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tc-thread-header .tc-line-ref {
  flex: 1;
}
.tc-thread-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: none;
}
.tc-thread-toggle:hover {
  color: var(--text-normal);
}
.tc-thread-reply-count {
  font-size: 0.75em;
  color: var(--text-muted);
  background: var(--background-modifier-border);
  border-radius: 8px;
  padding: 1px 6px;
  font-variant-numeric: tabular-nums;
}
.tc-thread-preview,
.tc-card-preview {
  display: none;
  font-size: 0.9em;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tc-card-collapsed {
  gap: 4px;
}
.tc-card-collapsed .tc-thread-preview,
.tc-card-collapsed .tc-card-preview {
  display: block;
}
.tc-card-collapsed .tc-messages,
.tc-card-collapsed .tc-reply,
.tc-card-collapsed .tc-card-body {
  display: none;
}
.tc-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tc-card-header .tc-line-ref {
  flex: 1;
}
.tc-card-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: none;
}
.tc-card-toggle:hover {
  color: var(--text-normal);
}
.tc-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tc-messages {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tc-message {
  border-radius: 6px;
  padding: 6px 8px;
  background: var(--background-secondary);
}
.tc-message-you {
  background: rgba(0, 122, 204, 0.08);
  border-left: 3px solid rgba(0, 122, 204, 0.5);
}
.tc-message-named {
  /* hue/background come from [data-author-hue="N"] selectors above */
}
.tc-message-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.tc-message-author {
  font-weight: 600;
}
.tc-message-date {
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  margin-left: 8px;
}
.tc-message-body {
  font-size: 0.92em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.tc-message-body p {
  margin: 0.25em 0;
}
.tc-message-body p:first-child {
  margin-top: 0;
}
.tc-message-body p:last-child {
  margin-bottom: 0;
}

.tc-icon-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
}
.tc-icon-btn:hover {
  color: var(--text-error);
  background: var(--background-modifier-hover);
}

.tc-reply {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tc-reply-input {
  width: 100%;
  resize: vertical;
  font-family: inherit;
  font-size: 0.92em;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-primary);
  color: var(--text-normal);
}
.tc-reply-input:focus {
  outline: none;
  border-color: var(--interactive-accent);
}
.tc-reply-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.tc-btn-primary,
.tc-btn-accept {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border: none;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85em;
}
.tc-btn-primary:hover,
.tc-btn-accept:hover {
  background: var(--interactive-accent-hover);
}
.tc-btn-reject,
.tc-btn-danger {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--background-modifier-border);
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85em;
}
.tc-btn-reject:hover,
.tc-btn-danger:hover {
  border-color: var(--text-error);
  color: var(--text-error);
}

.tc-card-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

/* Diff blocks */
.tc-diff {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.92em;
}
.tc-diff-label {
  font-size: 0.75em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.tc-diff-added {
  background: rgba(56, 161, 105, 0.12);
  border-left: 3px solid rgba(56, 161, 105, 0.6);
  padding: 4px 8px;
  border-radius: 4px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text-muted);
}
.tc-diff-removed {
  background: rgba(220, 38, 38, 0.08);
  border-left: 3px solid rgba(220, 38, 38, 0.5);
  padding: 4px 8px;
  border-radius: 4px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text-muted);
}
.tc-diff-changed {
  color: var(--text-normal);
  border-radius: 2px;
}
.tc-diff-removed .tc-diff-changed {
  background: rgba(220, 38, 38, 0.30);
}
.tc-diff-added .tc-diff-changed {
  background: rgba(56, 161, 105, 0.32);
}
.tc-diff-arrow {
  color: var(--text-muted);
  font-size: 0.85em;
  text-align: center;
}
.tc-diff-highlight {
  background: rgba(252, 211, 77, 0.35);
  border-left: 3px solid rgba(252, 211, 77, 0.8);
  padding: 4px 8px;
  border-radius: 4px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- Reading mode ---------- */

.tc-rm-comment {
  display: inline-flex;
  align-items: center;
  vertical-align: text-bottom;
  margin: 0 2px;
  color: var(--text-muted);
  cursor: help;
}
.tc-rm-comment .svg-icon {
  width: 1em;
  height: 1em;
}
.tc-rm-hidden {
  display: none;
}

/* ---------- Finalize modal ---------- */

.tc-finalize-modal .tc-finalize-summary {
  background: var(--background-secondary);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 8px 0;
}
.tc-finalize-modal .tc-finalize-summary ul {
  margin: 0;
  padding-left: 20px;
}
.tc-finalize-modal .tc-finalize-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.tc-confirm-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}