.comment-controls { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(88px, calc(env(safe-area-inset-bottom) + 82px)); z-index: 5; display: flex; gap: .65rem; }
.round-control { width: 4rem; height: 4rem; padding: 0; border: 1px solid #ffffff66; border-radius: 50%; color: #fff; background: #111d; box-shadow: 0 4px 24px #0008; touch-action: none; }
.round-control svg { width: 1.65rem; height: 1.65rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.round-control[aria-pressed="true"] { background: #a71919; }
.editor { position: fixed; z-index: 6; right: max(16px, env(safe-area-inset-right)); bottom: max(168px, calc(env(safe-area-inset-bottom) + 162px)); width: min(26rem, calc(100% - 32px)); box-sizing: border-box; padding: 1rem; border: 1px solid #ffffff38; border-radius: 1rem; background: #151515f2; box-shadow: 0 12px 50px #000b; }
.editor[hidden] { display: none; }
.editor p { margin: 0 0 .7rem; }
.editor-time { display: inline; width: auto; }
.editor textarea { box-sizing: border-box; font: inherit; width: 100%; resize: none; padding: .8rem; border: 1px solid #777; border-radius: .65rem; color: #fff; background: #050505; }
.editor-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .75rem; }
.editor button { min-height: 2.75rem; padding: .65rem 1rem; border: 1px solid #ffffff55; border-radius: 999px; color: #fff; background: #292929; }
.editor-save { color: #111 !important; background: #fff !important; }
@media (max-width: 520px) { .round-control { width: 3.6rem; height: 3.6rem; } .editor { right: 16px; bottom: max(104px, calc(env(safe-area-inset-bottom) + 98px)); max-height: calc(100vh - 24px); overflow: auto; } }