/* File discussions are shared by game and path; they do not change translation rooms. */
.commentsIconButton, .commentsTab { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.commentsIconButton { flex: none; width: 38px; height: 38px; padding: 8px; border-radius: 50%; }
.commentsIconButton.active { background: var(--ui-accent-soft); }
.commentsIconButton svg, .commentsTab svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.commentsUnreadBadge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; display: grid; place-items: center; border-radius: 10px; background: #c52f3f; color: #fff; font: 700 10px/18px system-ui, sans-serif; box-shadow: 0 0 0 2px var(--color-bg); }
.editor .sideTabs { flex-wrap: wrap; padding: 4px 5px 2px 0; }
.sideSearchRow { display: flex; align-items: center; gap: 8px; margin-top: calc(.5em * var(--density)); }
.sideSearchRow .sideFilter { flex: 1; min-width: 0; width: auto; margin-top: 0; }
.sideSearchRow > button { flex: none; white-space: nowrap; }
.commentsSidebar { --comments-sidebar-width: 370px; position: fixed; inset: 0 0 0 auto; z-index: 15; width: var(--comments-sidebar-width); max-width: 100vw; box-sizing: border-box; display: flex; flex-direction: column; background: var(--color-bg); border-left: 1px solid var(--ui-border); box-shadow: -4px 0 18px rgba(0,0,0,.06); color: var(--color-font); }
.commentsPanelHeader { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 16px; border-bottom: 1px solid var(--ui-border); }
.commentsPanelHeader h2 { margin: 0 0 5px; font: 600 16px/1.4 system-ui, sans-serif; }
.commentsPanelHeader p { margin: 0; color: var(--ui-muted); font-size: 12px; line-height: 1.5; }
.commentsPanelHeader .commentsFilepath { color: var(--color-font); overflow-wrap: anywhere; margin-bottom: 4px; }
.commentsClose { display: grid; place-items: center; flex: none; box-sizing: border-box; width: 34px; height: 34px; padding: 0; }
.commentsClose svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.commentsList { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px; scrollbar-width: thin; }
.commentCard { margin: 0 0 10px; padding: 13px; background: var(--color-element); border: 1px solid var(--ui-border); border-radius: 8px; overflow-wrap: anywhere; }
.commentCard.unread { border-left: 3px solid var(--ui-accent); padding-left: 11px; }
.commentFileGroup { padding: 0; }
.commentGroupEntry { padding: 13px 13px 13px 10px; border-left: 3px solid transparent; }
.commentGroupEntry + .commentGroupEntry { border-top: 1px solid var(--ui-border); }
.commentGroupEntry.unread { border-left-color: var(--ui-accent); }
.commentByline, .commentMeta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px; }
.commentByline { font-size: 13px; }
.commentByline strong { font-weight: 650; }
.commentLanguage { border: 1px solid var(--ui-border); border-radius: 4px; padding: 1px 5px; font-size: 11px; color: var(--ui-muted); }
.commentUnreadLabel { display: inline-block; flex: none; padding: 1px 6px; border-radius: 4px; background: #c52f3f; color: #fff; font-size: 10px; font-weight: 650; line-height: 1.5; }
.commentMeta { color: var(--ui-muted); font-size: 11px; margin-top: 6px; }
.commentHashBadge { border: 1px solid var(--ui-review); color: var(--ui-review); border-radius: 4px; padding: 1px 5px; }
.commentBody { white-space: pre-wrap; margin: 10px 0 0; font-size: 13px; line-height: 1.65; }
.commentFileLink { display: block; text-align: left; width: 100%; margin-bottom: 10px; padding: 0; border: 0; background: transparent; color: var(--ui-accent); font: 600 12px/1.5 system-ui, sans-serif; overflow-wrap: anywhere; }
.commentFileLink:disabled { opacity: .8; color: var(--ui-muted); cursor: default; }
.commentFileGroup > .commentFileLink { box-sizing: border-box; margin: 0; padding: 13px; border-bottom: 1px solid var(--ui-border); border-radius: 8px 8px 0 0; }
.commentsQuickReply { display: flex; align-items: center; gap: 6px; margin: 0; padding: 10px 12px; border-top: 1px solid var(--ui-border); }
.commentsQuickReply input { flex: 1; min-width: 0; width: 100%; height: 32px; box-sizing: border-box; padding: 5px 8px; font-size: 12px; }
.commentsSendReply { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border-radius: 5px; }
.commentsSendReply svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.commentFileGroup .commentReplyError { padding: 0 12px 10px; }
.commentsEmpty { color: var(--ui-muted); padding: 12px 14px; font-size: 13px; line-height: 1.6; margin: 0; }
.commentsError { color: var(--ui-missing); padding: 6px 14px; font-size: 13px; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
.commentsLoadMore { display: block; width: 100%; padding: 8px; font-size: 12px; }
.editor > .side.commentsActive { display: flex; flex-direction: column; overflow: hidden; }
.commentsActive .sideHeader { flex: none; }
.fileCommentsPanel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fileCommentsPanel .commentsPanelHeader { padding: 10px 12px; }
.commentsComposer { flex: none; margin: 0; padding: 12px; border-top: 1px solid var(--ui-border); background: var(--color-bg); }
.commentsComposer label { display: block; margin-bottom: 6px; font-size: 13px; }
.commentsComposer label span { color: var(--ui-muted); }
.commentsComposer textarea { box-sizing: border-box; width: 100%; min-height: 72px; max-height: 160px; resize: vertical; line-height: 1.5; }
.commentsComposerActions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.commentsComposerActions > span { font-size: 11px; color: var(--ui-muted); }
.commentsComposer .commentsError, .commentsComposer .commentsEmpty { padding: 5px 0; }
:is(.commentsSidebar, .fileCommentsPanel) :is(button, input, textarea, [tabindex]):focus-visible, .commentsIconButton:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
@media (max-width: 1100px) {
  .commentsSidebar { --comments-sidebar-width: 330px; }
}