/* ============================================================
   CONVERSATION — the thread
   The person's turns: ink, 17px, medium. The AI's turns: grey, 15px,
   indented behind a soft rule. One thin line runs down the left,
   a dot marks each turn and is where you can continue from.
============================================================ */
.thread{position:relative;margin:var(--s2) 0 0;padding-left:26px;--thread-x:5px}
.thread::before{content:"";position:absolute;left:var(--thread-x);top:12px;bottom:12px;width:2px;border-radius:2px;background:var(--line)}
.msg{position:relative;margin:0 0 var(--s5)}
.msg::before{content:"";position:absolute;left:-26px;top:.6em;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--line-strong);
  transition:transform var(--t-fast) var(--ease),background var(--t-fast),border-color var(--t-fast)}
.msg.human::before{background:var(--accent);border-color:var(--accent)}
.msg p{margin:0;white-space:pre-wrap;word-break:break-word}
.msg.human p{font-size:1.0625rem;line-height:1.75;color:var(--ink);font-weight:500}
.msg.assistant{padding-left:14px;border-left:2px solid var(--surface-3);margin-left:2px}
.msg.assistant p{color:var(--ink-2);font-size:.9375rem;line-height:1.75}

/* full thread on the detail page: hover a turn → the dot lights up and a small "continue" chip appears */
.full .msg .anchor{position:absolute;left:-36px;top:-4px;width:36px;height:36px;border-radius:50%}
.full .msg .anchor::after{content:attr(data-tip);position:absolute;left:38px;top:4px;background:var(--ink);color:var(--bg);font:500 .75rem/1 var(--font-sans);padding:8px 10px;border-radius:var(--r-pill);white-space:nowrap;opacity:0;transform:translateX(-4px);transition:opacity var(--t-fast),transform var(--t-fast);pointer-events:none;z-index:2}
.full .msg .anchor:hover::after,.full .msg .anchor:focus-visible::after{opacity:1;transform:none}
.full .msg:hover::before{border-color:var(--accent);background:var(--accent);transform:scale(1.15)}
.msg.needs-translation .body{opacity:.6}
.orig{margin-top:8px;font-size:.8125rem;color:var(--ink-2)}
.orig summary{cursor:pointer;list-style:none;display:inline;color:var(--accent-deep);font-weight:500}
.orig summary::-webkit-details-marker{display:none}
.orig p{color:var(--ink-2);font-size:.875rem;margin-top:6px}

.msg.ref{margin-left:-4px;padding:12px 14px;border:1px dashed var(--line-strong);border-radius:var(--r-input);background:var(--surface-2)}
.msg.ref::before{border-style:dashed;border-color:var(--ink-3);background:var(--surface)}
.msg.ref summary{cursor:pointer;color:var(--ink-2);font-size:.875rem;list-style:none;min-height:24px}
.msg.ref summary::-webkit-details-marker{display:none}
.nested{margin:10px 0 6px}
.nested .msg.human p{font-size:1rem}
.nested .msg{margin-bottom:12px}

/* card preview: two clamped turns, no line */
.preview{padding-left:0;margin-top:var(--s3)}
.preview::before{display:none}
.preview .msg{margin-bottom:8px;padding-left:0;border:0}
.preview .msg::before{display:none}
.preview .msg.human p{font-size:.9375rem;line-height:1.6;font-weight:400;color:var(--ink-2)}
.preview .msg.assistant{margin-left:0;padding-left:0}
.preview .msg.assistant p{font-size:.9375rem;color:var(--ink-3)}
.preview .msg p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* publish editor variant */
.thread.edit{margin-top:14px}
.thread.edit .msg.uncertain{background:var(--warn-tint);border-radius:var(--r-input);padding:8px 10px;margin-left:-10px}
.thread.edit .msg.excluded{opacity:.4}
.thread.edit .role{border:0;background:var(--surface-2);font:600 .75rem var(--font-sans);color:var(--ink-2);cursor:pointer;padding:3px 10px;border-radius:var(--r-pill);margin:0 0 4px;min-height:24px}
.thread.edit .role:hover{color:var(--accent-deep);background:var(--accent-tint)}
.thread.edit .num{font-size:.75rem;color:var(--ink-3);margin-right:6px}
.thread.edit .keep{float:right}
.thread.edit textarea{width:100%;border:1px solid transparent;background:transparent;padding:4px 6px;resize:vertical;font:inherit;min-height:0;border-radius:var(--r-sm)}
.thread.edit .msg.human textarea{font-size:1.0625rem;font-weight:500}
.thread.edit textarea:focus{border-color:var(--line-strong);background:var(--surface);box-shadow:none}