/* Native detail composition; the shared comment shadow owns its own visuals. */
dialog.comment-detail-dialog[open]{display:flex;flex-direction:column;height:min(900px,90dvh);overflow:hidden}
.comment-detail-dialog>.modal-header{flex:none;align-items:center}
.comment-detail-dialog .modal-heading{flex:1;min-width:0}
.comment-detail-toggle{flex:none}
.comment-detail-shell{display:flex;flex:1;min-width:0;min-height:0;position:relative;overflow:hidden}
.comment-detail-main{flex:1;min-width:0;overflow:auto;scrollbar-gutter:stable;overscroll-behavior:contain}
.comment-detail-panel{width:360px;flex:none;min-width:0;min-height:0;display:flex;flex-direction:column;border-left:1px solid var(--ui-border);background:var(--ui-surface)}
.comment-detail-source{display:flex;align-items:center;gap:var(--ui-space-3);padding:var(--ui-space-4);border-bottom:1px solid var(--ui-border);flex:none}
.comment-detail-source>div{min-width:0;flex:1}
.comment-detail-source>div>span{display:block;color:var(--ui-muted);font-size:var(--ui-font-size-xs);line-height:var(--ui-line-height-sm)}
.comment-detail-source>div>strong{display:block;font-size:var(--ui-font-size-sm);font-weight:600;overflow-wrap:anywhere}
.comment-detail-host{flex:1;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:0 var(--ui-space-4) var(--ui-space-4)}
.comment-detail-main .detail-columns{grid-template-columns:minmax(0,1fr) 180px;gap:var(--ui-space-5)}
.comment-detail-main .process-steps>li{flex-wrap:wrap}
.comment-detail-main .process-steps>li>[data-comment-type]{margin-left:39px}
.comment-detail-main .md-record-fields>section>h4{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-3);flex-wrap:wrap}
@media(max-width:1100px){.comment-detail-main .detail-columns{display:flex;flex-direction:column-reverse;gap:var(--ui-space-5)}}
@media(max-width:900px){
  .comment-detail-panel{position:absolute;inset:0 0 0 auto;width:min(400px,100%);max-width:100%;z-index:2;box-shadow:var(--ui-shadow)}
  .comment-detail-shell.comments-open:before{content:'';position:absolute;inset:0;background:var(--ui-overlay);z-index:1}
}
@media(max-width:640px){
  .comment-detail-dialog>.modal-header{gap:var(--ui-space-2);flex-wrap:wrap}
  .comment-detail-toggle{margin-left:auto}
}