/* Comment threads. Rails are layout-derived connector paths. */

.replies-content .answer-item{padding-bottom:8px}
.replies-content .answer-copy{font-size:17px;line-height:1.4}
.replies-heading{padding:8px 16px;display:flex;align-items:center;justify-content:space-between}
.replies-heading>b{font-size:14px;font-weight:600}
.replies-heading .btn.text{color:var(--muted);font-size:13px}

.thread-branch{position:relative;padding:8px 16px 4px;border-bottom:1px solid var(--hairline)}
.comment-node{display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--avatar-content-gap);position:relative;z-index:1}
.comment-avatar{padding-top:4px}
.comment-avatar>*{position:relative;border-radius:50%;background:var(--bg)}
.comment-avatar .avatar{width:32px!important;height:32px!important}
.comment-byline{display:flex;align-items:center;gap:8px;min-height:28px}
.comment-byline>b{min-width:0;font-size:14px;font-weight:600;letter-spacing:-.15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.comment-byline time{font-size:13px;color:var(--muted);white-space:nowrap;flex-shrink:0}
.comment-byline .tag{font-size:12px;padding:0 4px;white-space:nowrap;flex-shrink:0}
.comment-byline>.icon-button{margin:-8px 0 -8px auto;align-self:center;color:var(--muted);padding:12px;flex-shrink:0}
.comment-byline>.icon-button svg{width:18px;height:18px}
.comment-main{min-width:0}
.comment-main>p{font-size:15px;line-height:1.4;letter-spacing:-.15px;margin:4px 0 0;overflow-wrap:anywhere}
.comment-main .reaction-row{gap:16px;min-height:44px}
.comment-main .reaction-row>button{min-height:44px;font-size:12px}
.comment-main .reaction-row svg{width:18px;height:18px}

.thread-children{margin-left:calc(32px + var(--avatar-content-gap))}
.thread-children .comment-node{grid-template-columns:26px minmax(0,1fr);gap:var(--avatar-content-gap);margin:4px 0}
.thread-children .comment-avatar .avatar{width:26px!important;height:26px!important}
.thread-children .comment-main>p{font-size:15px}
.thread-children .comment-byline>b{font-size:14px}
.reply-context-label{font-size:12px;color:var(--muted);margin:0 0 4px}

.phone .branch-toggle{display:flex;align-items:center;gap:8px;min-height:44px;background:none;border:0;padding:4px 0;color:var(--muted);font-size:13px;font-weight:500;margin-left:calc(32px + var(--avatar-content-gap))}
.phone .branch-toggle[aria-expanded="false"]{margin-left:calc(32px + var(--avatar-content-gap))}
.collapsed-reply-anchor{width:18px;height:18px;display:grid;place-items:center;background:var(--bg);border-radius:50%}
.collapsed-reply-anchor svg{width:16px;height:16px}

.reply-composer-dock{display:flex;align-items:center;gap:var(--avatar-content-gap);background:var(--surface);border:0;border-radius:999px;padding:4px 8px 4px 16px}
.reply-composer-dock>button:not(.icon-button){flex:1;min-height:44px;border:0;background:none;font-size:15px;text-align:left;color:var(--muted)}
.phone:has(.replies-content) .phone-footer{border:0;background:linear-gradient(transparent,var(--bg) 22%);padding:16px 12px 24px}

.reply-target{border-left:2px solid var(--outline);padding:4px 0 4px 12px;margin:12px 0 20px}
.reply-target b{font-size:13px;font-weight:600}
.reply-target p{font-size:14px;line-height:1.5;color:var(--muted)}
.sheet form>.small svg{width:13px;height:13px;vertical-align:middle}

.answer-item{position:relative}
.answer-layout{position:relative;z-index:1}
.comment-avatar>*,.answer-avatar>.avatar,.answer-avatar>.avatar-placeholder,
.preview-avatar,.preview-child>.avatar{outline:0}
.connector-svg path{stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.preview-avatar{align-self:start;width:28px;height:28px}