/* recite — note threads and @-links. Owned by the notes module. Use --trc-* tokens from app.css. */

/* =========================================================================
   The card under the statute text: composer on top, thread below.
   ========================================================================= */

.trc-note-card {
  margin-top: var(--trc-s5);
}

.trc-note-title {
  margin: 0 0 var(--trc-s3);
  font-size: 15px;
  font-weight: 600;
  color: var(--trc-text);
}

/* --------------------------------------------------- head and the fold */

.trc-note-head {
  display: flex;
  align-items: center;
  gap: var(--trc-s2);
  margin-bottom: var(--trc-s3);
}

.trc-note-head .trc-note-title {
  margin: 0;
}

/* "มีร่าง" — a draft is folded away behind the toggle. Silent while the box
   is open, because then the reader can see the text for themselves. */
.trc-note-draft-badge[hidden] { display: none; }

.trc-note-fold {
  flex: none;
  white-space: nowrap;
}

/* Folded: the strip and the thread take the space the textarea had. */
.trc-note-card.is-composer-closed .trc-note-composer { display: none; }

/* The strip's own "เชื่อมมาตรา" exists for the folded state; while the box is
   open its foot carries the same button, and two of them read as two things. */
.trc-note-card:not(.is-composer-closed) .trc-note-conn-connect { display: none; }

.trc-note-card.is-composer-closed .trc-note-conn { margin-top: 0; }

/* ------------------------------------------------------------- composer */

.trc-note-composer[hidden] { display: none; }

.trc-note-composer {
  display: flex;
  flex-direction: column;
  gap: var(--trc-s2);
}

.trc-note-input {
  width: 100%;
}

.trc-note-input-sm {
  min-height: 62px;
  font-size: 13px;
}

.trc-note-composer-foot {
  display: flex;
  align-items: center;
  gap: var(--trc-s2);
  flex-wrap: wrap;
}

/* The status line ("กำลังพิมพ์…" / "บันทึกแล้ว") pushes the button right. */
.trc-note-composer-foot .trc-note-status {
  margin: 0;
  flex: 1 1 auto;
  min-height: 1em;
}

/* =========================================================================
   The connections strip — what this มาตรา reaches, and what reaches it.
   ========================================================================= */

.trc-note-conn {
  margin-top: var(--trc-s3);
  padding-top: var(--trc-s3);
  border-top: var(--trc-border-w) solid var(--trc-border);
}

.trc-note-conn-head {
  display: flex;
  align-items: center;
  gap: var(--trc-s1);
  flex-wrap: wrap;
}

.trc-note-conn-title {
  font-size: var(--trc-fs-sm);
  font-weight: 600;
  color: var(--trc-text-2);
}

.trc-note-conn-row {
  display: flex;
  align-items: baseline;
  gap: var(--trc-s1);
  flex-wrap: wrap;
  margin-top: var(--trc-s2);
}

.trc-note-conn-label {
  flex: none;
}

/* A chip is a real link to the provision. Same wash as an @-mention inside a
   note body, because it IS that mention — seen from the outside. */
.trc-note-conn-chip {
  padding: 1px 6px;
  border-radius: var(--trc-radius-sm);
  background: var(--trc-accent-soft);
  color: var(--trc-accent);
  font-size: var(--trc-fs-sm);
  text-decoration: none;
  white-space: nowrap;
}

.trc-note-conn-chip:hover { text-decoration: underline; }

.trc-note-conn-empty {
  margin: var(--trc-s2) 0 0;
}

/* =========================================================================
   The thread. Indent stops at three levels; the data may nest deeper.
   ========================================================================= */

.trc-note-thread,
.trc-note-children {
  list-style: none;
  margin: var(--trc-s4) 0 0;
  padding: 0;
}

.trc-note-children {
  margin-top: var(--trc-s2);
  padding-inline-start: var(--trc-s4);
  border-inline-start: var(--trc-border-w) solid var(--trc-border);
}

/* Level 3 and deeper: still a thread, but it stops marching off the page. */
.trc-note-children.is-flat {
  padding-inline-start: var(--trc-s2);
  border-inline-start-style: dashed;
}

.trc-note-item {
  padding: var(--trc-s2) 0;
}

.trc-note-item + .trc-note-item {
  border-top: var(--trc-border-w) solid var(--trc-border);
}

/* A nested list already carries its own rule; a second one reads as clutter. */
.trc-note-children > .trc-note-item + .trc-note-item {
  border-top-color: var(--trc-border);
}

.trc-note-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.7;
  color: var(--trc-text);
}

.trc-note-meta {
  display: flex;
  align-items: center;
  gap: var(--trc-s2);
  margin-top: var(--trc-s1);
  flex-wrap: wrap;
}

.trc-note-actions {
  display: flex;
  gap: var(--trc-s1);
  margin-inline-start: auto;
}

/* Actions stay quiet until the note is hovered or something inside it has
   focus — a thread of ten notes should not read as thirty buttons. */
.trc-note-actions .trc-btn {
  opacity: .55;
  transition: opacity .12s ease;
}

.trc-note-item:hover > .trc-note-meta .trc-btn,
.trc-note-item:focus-within > .trc-note-meta .trc-btn {
  opacity: 1;
}

@media (hover: none) {
  .trc-note-actions .trc-btn { opacity: 1; }
}

/* ตอบกลับ is the exception: a reader asked how to write a child note, which
   is what an action that only appears under the pointer earns you. It is
   always legible, and it comes first in the row. */
.trc-note-actions .trc-note-reply-btn {
  opacity: 1;
  color: var(--trc-accent);
  font-weight: 600;
}

/* =========================================================================
   The empty state. It says what can be done, not merely that nothing is.
   ========================================================================= */

.trc-note-empty {
  padding: var(--trc-s2) 0;
}

.trc-note-empty-lead {
  margin: 0 0 var(--trc-s2);
}

.trc-note-empty-how {
  margin: 0;
  padding-inline-start: 1.15em;
  display: flex;
  flex-direction: column;
  gap: var(--trc-s1);
  line-height: 1.65;
}

/* =========================================================================
   Range notes — an `annotations` row whose `note` is set. The quote carries
   the highlight's own colour so the entry and the mark in the statute read
   as one object.
   ========================================================================= */

.trc-note-item-ann {
  cursor: pointer;
}

.trc-note-item-ann .trc-note-children,
.trc-note-item-ann .trc-note-reply,
.trc-note-item-ann textarea,
.trc-note-item-ann .trc-btn {
  cursor: auto;
}

.trc-note-item-ann .trc-btn {
  cursor: pointer;
}

.trc-note-kind {
  margin: 0 0 var(--trc-s1);
  font-size: 11px;
  letter-spacing: .01em;
}

.trc-note-quote {
  margin: 0 0 var(--trc-s2);
  padding: var(--trc-s1) var(--trc-s2);
  border-inline-start: 3px solid var(--trc-border-strong);
  border-radius: 0 var(--trc-radius-sm) var(--trc-radius-sm) 0;
  background: var(--trc-surface-sunk);
  color: var(--trc-text-2);
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The same six tokens the highlight itself uses (app.css `.trc-ann[data-color]`). */
.trc-note-quote[data-color="yellow"] { background: var(--trc-hl-yellow); }
.trc-note-quote[data-color="green"]  { background: var(--trc-hl-green); }
.trc-note-quote[data-color="blue"]   { background: var(--trc-hl-blue); }
.trc-note-quote[data-color="pink"]   { background: var(--trc-hl-pink); }
.trc-note-quote[data-color="purple"] { background: var(--trc-hl-purple); }
.trc-note-quote[data-color="orange"] { background: var(--trc-hl-orange); }

/* trc:annotation-focus landed on this entry: hold the reader's eye on it for
   a moment, then get out of the way. */
.trc-note-item.is-flash {
  animation: trc-note-flash 1.6s ease-out;
  border-radius: var(--trc-radius-sm);
}

@keyframes trc-note-flash {
  0%, 55% { background: var(--trc-accent-soft); }
  100%    { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .trc-note-item.is-flash { animation-duration: .01s; background: var(--trc-accent-soft); }
}

.trc-note-reply,
.trc-note-edit {
  display: flex;
  flex-direction: column;
  gap: var(--trc-s2);
  margin: var(--trc-s2) 0 var(--trc-s2);
}

/* =========================================================================
   @-mentions inside a rendered note.
   ========================================================================= */

.trc-note-link {
  color: var(--trc-accent);
  background: var(--trc-accent-soft);
  border-radius: var(--trc-radius-sm);
  padding: 0 3px;
  text-decoration: none;
  white-space: nowrap;
}

.trc-note-link:hover {
  text-decoration: underline;
}

/* A citation whose provision is not on this device: readable, not clickable. */
.trc-note-link-pending {
  color: var(--trc-text-2);
  background: var(--trc-surface-sunk);
  border-bottom: 1px dotted var(--trc-border-strong);
  cursor: help;
}

/* =========================================================================
   The @ picker. Fixed to the viewport, positioned against the textarea.
   ========================================================================= */

.trc-note-picker {
  position: fixed;
  z-index: 60;
  max-height: 260px;
  overflow-y: auto;
  background: var(--trc-surface);
  border: var(--trc-border-w) solid var(--trc-border-strong);
  border-radius: var(--trc-radius);
  box-shadow: var(--trc-shadow-pop);
  padding: var(--trc-s1);
}

.trc-note-picker[hidden] {
  display: none;
}

.trc-note-picker-hint {
  margin: 0;
  padding: var(--trc-s1) var(--trc-s2);
  font-size: 11px;
  color: var(--trc-text-3);
}

.trc-note-picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.trc-note-picker-item {
  display: flex;
  align-items: baseline;
  gap: var(--trc-s2);
  padding: var(--trc-s2);
  border-radius: var(--trc-radius-sm);
  cursor: pointer;
}

.trc-note-picker-item:hover,
.trc-note-picker-item.is-active {
  background: var(--trc-accent-soft);
}

.trc-note-picker-num {
  font-weight: 600;
  color: var(--trc-text);
}

.trc-note-picker-law {
  margin-inline-start: auto;
  font-size: 12px;
  color: var(--trc-text-3);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .trc-note-children { padding-inline-start: var(--trc-s3); }
  .trc-note-picker { max-height: 45vh; }
}

/* ===== notes column (right of the statute) ===== */

.trc-reader-notes {
  position: sticky;
  top: calc(var(--trc-header-total) + var(--trc-s3));
  max-height: calc(100vh - var(--trc-header-total) - var(--trc-s5));
  max-height: calc(100dvh - var(--trc-header-total) - var(--trc-s5));
  overflow-y: auto;
  min-width: 0;
}

.trc-reader-notes .trc-note-card { margin: 0; }

/* The toggle only exists on narrow screens; the column is always open above. */
.trc-notes-toggle { display: none; }

.trc-note-signedout { text-align: left; }

@media (max-width: 1180px) {
  /* Two columns: index + statute. Notes drop below the text rather than
     squeezing the reading measure. */
  .trc-reader-notes {
    position: static;
    max-height: none;
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .trc-reader-notes { grid-column: auto; }
}