.comments-screen { --comments-surface: #fff; --comments-raised: #f3fbfa; --comments-text: #001f21; --comments-muted: #476264; --comments-quiet: #6d8182; --comments-border: rgba(0, 63, 66, .16); --comments-primary: #006d70; --comments-danger: #b42318; background: rgba(0, 0, 0, .4); z-index: 62; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; } /* above detail screens (60): comments open over a poll or TBH, like the iOS sheet */
.comments-header { display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; align-items: center; min-height: 44px; padding: 0 16px; }
.comments-header > strong { color: var(--comments-text); font-size: 1.15rem; font-weight: 400; text-align: center; }
.comments-done { justify-self: end; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--comments-text); cursor: pointer; font-size: 1rem; }
.comments-layout { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; width: 100%; max-width: 720px; margin: 0 auto; padding: 0 16px 8px; }
.comments-context { border-bottom: 1px solid var(--comments-border); color: var(--comments-muted); font-size: .9rem; line-height: 1.35; padding: 12px 4px; }
.comments-context p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comment-moderation-notice { align-items: center; background: color-mix(in srgb, var(--comments-danger) 10%, var(--comments-surface)); border: 1px solid color-mix(in srgb, var(--comments-danger) 32%, transparent); border-radius: 16px; display: flex; gap: 12px; justify-content: space-between; margin: 12px 0 0; padding: 12px; }
.comment-moderation-notice strong, .comment-moderation-notice p { display: block; margin: 0; }
.comment-moderation-notice p { color: var(--comments-muted); font-size: .85rem; margin-top: 3px; }
.comment-moderation-notice button { background: none; border: 0; color: var(--comments-primary); font: inherit; font-weight: 700; min-height: 44px; padding: 0 8px; }
.comments-list { display: flex; flex-direction: column; gap: 3px; padding: 8px 0; }
.comment-thread { border-bottom: 1px solid var(--comments-border); padding: 4px 0 9px; }
.comment-row { display: grid; gap: 10px; grid-template-columns: 38px minmax(0, 1fr); padding: 9px 2px; scroll-margin: 90px; }
.comment-row.highlighted { animation: comment-highlight 2.5s ease-out; border-radius: 14px; }
.comment-replies { border-left: 2px solid var(--comments-border); margin-left: 19px; padding-left: 14px; }
.comment-reply { grid-template-columns: 32px minmax(0, 1fr); }
.comment-avatar { height: 38px; width: 38px; }
.comment-reply .comment-avatar { height: 32px; width: 32px; }
.comment-content { min-width: 0; }
.comment-heading { align-items: baseline; display: flex; gap: 8px; }
.comment-heading strong { color: var(--comments-text); font-size: .93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comment-heading time { color: var(--comments-quiet); font-size: .75rem; }
.comment-content > p { color: var(--comments-text); line-height: 1.4; margin: 3px 0 5px; overflow-wrap: anywhere; white-space: pre-wrap; }
.comment-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.comment-actions > button, .comment-load-replies { background: none; border: 0; color: var(--comments-muted); font: inherit; font-size: .78rem; font-weight: 700; min-height: 32px; padding: 0; }
.comment-actions > button.selected { color: var(--comments-primary); }
.comment-reaction-summary { align-items: center; display: inline-flex; gap: 4px; }
.comment-reaction-summary strong { font-size: .75rem; }
.comment-reaction-picker { background: var(--comments-raised); border: 1px solid var(--comments-border); border-radius: 22px; display: inline-flex; gap: 1px; margin-top: 4px; padding: 3px; }
.comment-reaction-picker button { background: none; border: 0; border-radius: 18px; font-size: 1.16rem; height: 36px; width: 36px; }
.comment-reaction-picker button[aria-pressed="true"] { background: color-mix(in srgb, var(--comments-primary) 18%, transparent); }
.comment-load-replies { margin-left: 64px; }
.comments-empty { color: var(--comments-muted); padding: 42px 18px; text-align: center; }
.comments-empty strong { color: var(--comments-text); display: block; }
.comments-empty p { margin: 5px 0 0; }
.comments-screen .comment-composer { flex: 0 0 auto; min-height: 0; background: var(--comments-surface); border-top: 1px solid var(--comments-border); padding: 8px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.comment-composer-row { align-items: flex-end; display: flex; gap: 8px; margin: 0 auto; max-width: 688px; }
.comment-composer textarea { background: var(--comments-raised); border: 1px solid var(--comments-border); border-radius: 18px; color: var(--comments-text); flex: 1; font: inherit; line-height: 1.35; max-height: 112px; min-height: 44px; padding: 11px 14px; resize: vertical; }
.comment-send-button { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; margin: 0 0 2px; padding: 0; border: 2px solid var(--outline); border-radius: 50%; background: var(--peach); color: #000; cursor: pointer; }
.comment-send-button svg { width: 20px; height: 20px; stroke-width: 3; }
.comment-send-button:disabled { opacity: .45; cursor: default; }
.comment-composer-meta { color: var(--comments-quiet); display: flex; font-size: .73rem; justify-content: space-between; margin: 4px auto 0; max-width: 688px; padding: 0 4px; }
.comment-reply-context { align-items: center; color: var(--comments-muted); display: flex; font-size: .8rem; justify-content: space-between; margin: 0 auto 5px; max-width: 688px; }
.comment-reply-context button { background: none; border: 0; color: var(--comments-muted); font-size: 1.25rem; min-height: 32px; min-width: 32px; }
.comment-reactors-dialog { max-height: min(70dvh, 640px); }
.comment-reactors-list { max-height: 52dvh; overflow: auto; padding: 8px 18px; }
.comment-reactor-row { align-items: center; display: grid; gap: 10px; grid-template-columns: 42px minmax(0, 1fr) auto; min-height: 54px; }
.comment-reactor-row > span:last-child { font-size: 1.15rem; }
@keyframes comment-highlight { 0%, 35% { background: color-mix(in srgb, var(--comments-primary) 24%, transparent); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .comment-row.highlighted { animation: none; outline: 2px solid var(--comments-primary); } }
:root[data-theme="dark"] .comments-screen { --comments-surface: #0b2528; --comments-raised: #12363a; --comments-text: #f5ffff; --comments-muted: #b8d2d3; --comments-quiet: #8eaaac; --comments-border: rgba(218, 255, 252, .17); --comments-primary: #74e2dc; --comments-danger: #ff8b82; }
:root[data-theme="dark"] .comment-composer { background: color-mix(in srgb, var(--comments-surface) 94%, transparent); }
/* PollCommentsView: spinner while loading; every action answers to 44px. */
.comments-loading { display: grid; justify-items: center; gap: 10px; }
.comments-spinner { width: 28px; height: 28px; border: 3px solid var(--comments-border); border-top-color: var(--comments-primary); border-radius: 50%; animation: play-gear-spin .8s linear infinite; }
.comment-pending { opacity: .6; }
.comment-actions > button, .comment-load-replies { min-height: 44px; }
.comment-actions { gap: 0 16px; }
.comment-reaction-picker button { width: 44px; height: 44px; border-radius: 22px; }
.comment-reply-context button { min-height: 44px; min-width: 44px; }

/* PollCommentsView is a .medium sheet: it rises from the bottom over the poll. */
.comments-screen:not(.hidden) { animation: comments-backdrop-in .2s ease-out; }
.comments-sheet { width: 100%; max-width: 720px; height: min(calc(100% - 24px), max(62%, 380px)); display: flex; flex-direction: column; margin: 0 auto; overflow: hidden; border-radius: 28px 28px 0 0; background: var(--comments-surface); box-shadow: 0 -6px 30px rgba(0, 0, 0, .2); transform: translateY(var(--sheet-drag, 0px)); animation: comments-sheet-in .28s cubic-bezier(.2, .8, .2, 1); }
.comments-sheet-top { flex: 0 0 auto; padding-top: 6px; touch-action: none; cursor: grab; }
.comments-grabber { display: block; width: 36px; height: 5px; margin: 0 auto 2px; border-radius: 999px; background: var(--comments-border); }
.comment-composer-meta:has(> span:empty) { display: none; }
@keyframes comments-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes comments-backdrop-in { from { background: rgba(0, 0, 0, 0); } to { background: rgba(0, 0, 0, .4); } }
@media (prefers-reduced-motion: reduce) { .comments-screen:not(.hidden), .comments-sheet { animation: none; } }