/* ================= THE ALTERNATE UX — THE CONVERSATION =================
   One component over `task_comments` (postComment(), loadAltTaskComments(), the canonical
   mention picker), shared by the task drawer's Conversation tab and the note page's Comments
   section — not two stylesheets disagreeing about what `.a-comment` looks like.
   Owns: header, thread/scroll, day boundaries, a message row's four states (mine/unread/
   mentioned/reply), composer, empty/loading/error, and the canonical read-state row
   comment-unread.js injects (markup this design must not fork). Does not own behaviour —
   that's JS/services/, unreachable from a stylesheet.
   The drawer draws an avatar, the note page does not yet — `:has(> .a-av)` switches the two-
   column layout per row instead of forking the design. Every rule is prefixed `.alt-app` so it
   outranks the older bare `.a-comment` in alt-tasks.css and never reaches a production page. */

/* ---------- the tab becomes the scroller, not the drawer ----------
   The composer must be reachable without travelling — `.a-drawer-b` would otherwise make the
   box you write in sit below every remark on a long thread. Here only, the THREAD scrolls
   instead (header fixed top, composer pinned bottom); `.a-conv-b` is set by
   altDrawerComments2() since the body element is rebuilt on every fill. */
.alt-app .a-drawer-b.a-conv-b{ overflow:hidden; padding:0; gap:0; }
.alt-app .a-conv{
  display:flex; flex-direction:column; gap:0; min-height:0; height:100%;
}

/* ---------- who is talking, and how many ---------- */
.alt-app .a-conv-h{
  flex:0 0 auto; display:flex; align-items:center; gap:var(--a-2);
  padding:var(--a-3) 12px var(--a-2); min-width:0;
}
.alt-app .a-conv-h > .a-sec-h{ flex:0 0 auto; }
/* The count is a fact about the thread, not a control — the chip's shape without its border,
   so it cannot be mistaken for something to press. Tabular figures so 9 → 10 does not jump. */
.alt-app .a-conv-n{
  flex:0 0 auto; font:600 11px/1 var(--a-mono); font-variant-numeric:tabular-nums;
  color:var(--a-faint);
}
.alt-app .a-conv-n:empty{ display:none; }
/* The participants sit at the header's end, overlapped — four discs in a row is a list, four
   discs in a stack is a fact ("these people are in this"). Stacked right-to-left so the first
   speaker sits on top. */
.alt-app .a-conv-who{ margin-left:auto; display:flex; flex-direction:row-reverse; flex:0 0 auto; }
.alt-app .a-conv-who > .a-av{
  width:22px; height:22px; font-size:9px; box-shadow:0 0 0 2px var(--a-panel);
}
.alt-app .a-conv-who > .a-av + .a-av{ margin-right:-6px; }
.alt-app .a-conv-who > .a-av.more{ background:var(--a-raised); color:var(--a-dim); font-weight:700; }

/* ---------- the canonical read-state row, in this design's clothes ----------
   The markup is NOT ours — comment-unread.js inserts `.comment-read-row.control-row`, the one
   implementation of read state for the card chip, tab glow and this row alike; forking it would
   be a second answer to "has this been read". Its buttons are re-classed `.a-btn.sm` by
   altConvDressReadRow(); this rule set only owns the tray and the words. Two rows on purpose:
   the sentence and the 430px-wide panel never fit the pair on one line. */
.alt-app .a-conv .comment-read-row{
  flex:0 0 auto; display:flex; align-items:center; flex-wrap:wrap; gap:var(--a-2);
  margin:0 12px var(--a-2); padding:8px 10px;
  background:var(--a-raised); border:1px solid var(--a-line-soft); border-radius:var(--a-r);
}
.alt-app .a-conv .comment-read-row .a-btn:first-of-type{ margin-left:auto; }
.alt-app .a-conv .comment-read-row[hidden]{ display:none; }
.alt-app .a-conv .comment-read-note{
  flex:1 1 100%; min-width:0; display:flex; align-items:center; gap:6px;
  font-size:11px; color:var(--a-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Colour never carries this alone — the row says it in words beside the dot, which is why
   comment-unread.js marks the dot aria-hidden. */
.alt-app .a-conv .comment-read-note.unread{ color:var(--a-blue-text); font-weight:600; }
.alt-app .a-conv .comment-read-note .unread-dot{
  width:6px; height:6px; border-radius:50%; background:var(--a-blue); flex:0 0 auto;
}
/* Transparent rather than raised: they sit on a raised tray already, and `.a-btn`'s own ground
   would read as two cards inside a card. Everything else is `.a-btn.sm`'s own. */
.alt-app .a-conv .comment-read-row .a-btn{ flex:0 0 auto; background:transparent; color:var(--a-dim); }
.alt-app .a-conv .comment-read-row .a-btn:hover{ border-color:var(--a-line-strong); color:var(--a-text); }

/* ---------- the thread ----------
   Inside the drawer this is the scroll region; on the note page `.a-comments` is a plain stack
   that scrolls with the note, so only the APPEARANCE is shared, scoped to `.a-conv` for scroll. */
.alt-app .a-comments{ display:flex; flex-direction:column; gap:var(--a-2); min-width:0; }
.alt-app .a-conv > .a-comments{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:0 12px var(--a-2); scroll-padding-bottom:12px;
}
/* An empty or loading thread has one child and a column of empty space; centre it rather than
   leave it clinging to the top of a tall panel. */
.alt-app .a-conv > .a-comments > .a-empty,
.alt-app .a-conv > .a-comments > .a-load,
.alt-app .a-conv > .a-comments > .a-widget-err{ margin:auto 0; }
.alt-app .a-conv > .a-comments > .a-empty{ padding:var(--a-6) var(--a-4); }

/* ---------- one day from the next ----------
   Drawn through the label (not beside it) so the boundary is unmistakable — a thread read weeks
   apart would otherwise be one undifferentiated column. `.a-sec-h` tier, not the fainter one:
   a boundary nobody can see is not a boundary. */
.alt-app .a-conv-day{
  display:flex; align-items:center; gap:var(--a-2); margin:var(--a-2) 0 0;
  font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--a-dim);
}
.alt-app .a-conv-day::before,
.alt-app .a-conv-day::after{ content:''; flex:1 1 auto; height:1px; background:var(--a-line-soft); }
.alt-app .a-conv-day:first-child{ margin-top:0; }

/* ---------- a message ----------
   The avatar is a COLUMN, not a character in the first line — it spans all three grid rows, so
   however long the body runs, the author's mark stays beside the top of what they wrote. */
.alt-app .a-comment{
  display:grid; grid-template-columns:minmax(0,1fr); align-items:start;
  padding:9px 11px; border-radius:var(--a-r);
  background:var(--a-raised); border:1px solid var(--a-line-soft);
  border-left:2px solid var(--a-line-strong);
  transition:border-color var(--a-quick) var(--a-ease);
}
.alt-app .a-comment:has(> .a-av){ grid-template-columns:auto minmax(0,1fr); column-gap:10px; }
.alt-app .a-comment:has(> .a-av) > .a-av{ grid-column:1; grid-row:1 / span 3; margin-top:1px; }
.alt-app .a-comment:has(> .a-av) > .a-comment-h{ grid-column:2; grid-row:1; }
.alt-app .a-comment:has(> .a-av) > .a-comment-b{ grid-column:2; grid-row:2; }
.alt-app .a-comment:has(> .a-av) > .a-comment-a{ grid-column:2; grid-row:3; }
.alt-app .a-comment:hover{ border-left-color:var(--a-blue); }

.alt-app .a-comment-h{
  display:flex; align-items:baseline; gap:var(--a-2); min-width:0; flex-wrap:wrap;
}
.alt-app .a-comment .who{
  font:600 13px/1.3 var(--a-body); color:var(--a-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}
/* The stamp is the smallest thing in the row and sits at the far end — a column of them lines
   up, and none of them competes with a name. */
.alt-app .a-comment .when{
  margin-left:auto; flex:0 0 auto;
  font:500 11px/1 var(--a-mono); color:var(--a-faint); font-variant-numeric:tabular-nums;
}
.alt-app .a-comment-b{
  font-size:13px; line-height:1.55; color:var(--a-text);
  margin:4px 0 0; overflow-wrap:anywhere; white-space:pre-wrap;
}
/* --a-blue-text, not --a-blue: a link is TEXT, and the fill colour measures 4.05:1 on this
   ground where the design system requires 4.5. Underlined, because colour is never alone. */
.alt-app .a-comment-b a{ color:var(--a-blue-text); text-decoration:underline; text-underline-offset:2px; }
.alt-app .a-comment-b a:hover{ text-decoration-thickness:2px; }
.alt-app .a-comment-b a:focus-visible{ outline:2px solid var(--a-ring); outline-offset:2px; border-radius:3px; }

/* ---------- what a message can say about itself ----------
   Each of these is a WORD as well as a colour. A reader who cannot tell the blue edge from the
   grey one still reads "New" and "Mentioned you" in the header. */
.alt-app .a-comment-flag{
  flex:0 0 auto; display:inline-flex; align-items:center; height:16px; padding:0 6px;
  border-radius:var(--a-r-pill); font:700 9px/1 var(--a-body); letter-spacing:.07em;
  text-transform:uppercase; background:var(--a-blue-soft); color:var(--a-blue-text);
}
.alt-app .a-comment-flag:empty{ display:none; }
.alt-app .a-comment.unread{ border-left-color:var(--a-blue); background:var(--a-blue-soft); }
.alt-app .a-comment.at-me{ border-left-color:var(--a-gold); }
.alt-app .a-comment.at-me .a-comment-flag{ background:var(--a-gold-soft); color:var(--a-gold); }
/* My own remark is QUIETER, not louder — in a thread the thing being looked for is what someone
   ELSE said; a page of my own comments in the accent colour buries it. */
.alt-app .a-comment.mine{ background:var(--a-panel); border-left-color:var(--a-line-soft); }
/* Said in a word, not by the shade of the panel — its own element, not a `::after` on `.who`,
   because `.who` truncates and a marker inside it would be the first thing an ellipsis ate. */
.alt-app .a-comment-me{
  flex:0 0 auto; font:600 10px/1 var(--a-body); letter-spacing:.07em; text-transform:uppercase;
  color:var(--a-dim);
}
.alt-app .a-comment-me:empty{ display:none; }
/* A reply is indented and tethered. The thread comes back flat from task_comments, so the
   relationship has to be drawn or it is lost — the indent only repeats what the header names. */
.alt-app .a-comment.is-reply{ margin-left:var(--a-4); }
.alt-app .a-comment-re{
  flex:0 1 auto; min-width:0; font:500 11px/1.3 var(--a-body); color:var(--a-faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.alt-app .a-comment-re:empty{ display:none; }
/* The comment the Message Center or a fresh post sent the reader to, said once. */
.alt-app .a-comment.comment-focused{ outline:2px solid var(--a-ring); outline-offset:2px; }

/* ---------- the actions on a message ----------
   Revealed on hover and focus so a row of buttons doesn't repeat down the thread —
   `:focus-within` keeps them keyboard-reachable; a device with no hover gets them permanently,
   since no gesture there would ever show them. */
.alt-app .a-comment-a{ display:flex; gap:5px; margin-top:6px; opacity:0;
  transition:opacity var(--a-quick) var(--a-ease); }
.alt-app .a-comment:hover .a-comment-a,
.alt-app .a-comment:focus-within .a-comment-a{ opacity:1; }
@media (hover:none){ .alt-app .a-comment-a{ opacity:1; } }
.alt-app .a-comment-a:empty{ display:none; }

/* ---------- the composer ----------
   Pinned to the bottom of the PANEL, not the thread — a button that's a sibling of a growing
   textarea ends up sitting on the words being typed (what happened on the note editor). The
   "ADD A COMMENT" label is kept only as `.a-sr` for a screen reader — the placeholder and the
   header above it already say it visibly. */
.alt-app .a-composer{
  display:flex; flex-direction:column; gap:var(--a-2);
  margin-top:var(--a-3); padding-top:var(--a-3); border-top:1px solid var(--a-line-soft);
}
.alt-app .a-conv > .a-composer{
  flex:0 0 auto; margin-top:0; padding:var(--a-3) 12px; background:var(--a-panel);
  border-top:1px solid var(--a-line);
}
.alt-app .a-composer .a-textarea{ min-height:60px; max-height:190px; resize:vertical; }
.alt-app .a-composer .a-textarea:focus{ border-color:var(--a-blue); }
.alt-app .a-composer-a{
  display:flex; align-items:center; justify-content:flex-end; gap:var(--a-2); flex-wrap:wrap;
}
/* The hint takes its own line so the actions keep theirs — `flex-basis:100%` (not a second
   element) makes a wrapping flex row say "your own line", the same technique
   `.comment-add-row:has(> #taskCommentAi)` uses in CSS/components.css. Secondary action flush
   left, commit action hard right, on one row — matching the composer above. */
.alt-app .a-composer-a .a-hint{ flex:1 1 100%; min-width:0; font-size:11px; }
.alt-app .a-composer-a .a-hint:empty{ display:none; }
/* The commit action is pushed right and everything else falls left — one auto margin absorbs
   the free space to its own left, whether there are one, two or no secondary buttons. */
.alt-app .a-composer-a > .a-btn.primary{ margin-left:auto; }

/* ---------- narrow ----------
   Under a phone's width the drawer is the whole screen and the avatar column is 34px of it.
   The name is still in words on the row, so the disc is what goes. */
@media (max-width:560px){
  .alt-app .a-comment:has(> .a-av){ grid-template-columns:minmax(0,1fr); column-gap:0; }
  .alt-app .a-comment:has(> .a-av) > .a-av{ display:none; }
  .alt-app .a-comment:has(> .a-av) > .a-comment-h,
  .alt-app .a-comment:has(> .a-av) > .a-comment-b,
  .alt-app .a-comment:has(> .a-av) > .a-comment-a{ grid-column:1; }
  .alt-app .a-comment.is-reply{ margin-left:var(--a-3); }
  .alt-app .a-conv-who{ display:none; }
}