/* Comments in the artifact viewer (#5182): the side panel (a bottom sheet on a phone), the cards, the composer, the highlights. */
.artifact-viewer-content { display: flex; flex-direction: column; }
.artifact-viewer-main { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.artifact-viewer-main > .artifact-viewer-body { flex: 1 1 auto; min-width: 0; }
.artifact-viewer.ac-on .artifact-viewer-content { width: min(1240px, 96vw); }

::highlight(ac-comment) { background-color: color-mix(in srgb, var(--accent) 28%, transparent); text-decoration: underline; text-decoration-color: var(--accent); }
::highlight(ac-active) { background-color: color-mix(in srgb, var(--accent) 55%, transparent); text-decoration: underline; text-decoration-color: var(--accent); }

.ac-panel { flex: 0 0 340px; width: 340px; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; border-left: 1px solid var(--border); background: var(--bg-secondary); padding: var(--space-md); gap: var(--space-sm); box-sizing: border-box; }
.ac-panel[hidden] { display: none; }
.ac-head { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; position: sticky; top: calc(-1 * var(--space-md)); z-index: 1; margin: calc(-1 * var(--space-md)) calc(-1 * var(--space-md)) 0; padding: var(--space-md); background: var(--bg-secondary); }
.ac-title { margin: 0; font-size: var(--fs-lg, 1rem); flex: 1 1 auto; }
.ac-count { margin-left: 8px; color: var(--text-muted); font-weight: 400; }
.ac-filters { display: flex; gap: 2px; padding: 2px; border-radius: var(--radius-lg); background: var(--bg-tertiary); }
.ac-filter { border: 0; background: transparent; color: var(--text-secondary); border-radius: var(--radius-md); padding: 2px 10px; font-size: var(--fs-sm, 0.8125rem); cursor: pointer; }
.ac-filter[aria-pressed="true"] { background: var(--bg-primary); color: var(--text-primary); }
.ac-sheet-close { display: none; }
.ac-toggle { display: none; }
.ac-note { margin: 0; padding: 6px 10px; border-radius: var(--radius-md); background: var(--bg-tertiary); color: var(--text-secondary); font-size: var(--fs-sm, 0.8125rem); }
.ac-list { display: flex; flex-direction: column; gap: var(--space-sm); list-style: none; margin: 0; padding: 0; }
.ac-empty { margin: 0; color: var(--text-muted); font-size: var(--fs-sm, 0.8125rem); }
.ac-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-sm); background: var(--bg-primary); cursor: pointer; }
.ac-card.ac-active { border-color: var(--accent); }
.ac-card.ac-resolved { opacity: 0.8; }
.ac-quote { margin: 0 0 6px; padding-left: 8px; border-left: 3px solid var(--accent); color: var(--text-secondary); font-size: var(--fs-sm, 0.8125rem); overflow-wrap: anywhere; }
.ac-quote.ac-orphan { border-left-color: var(--warning); font-style: italic; }
.ac-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-sm, 0.8125rem); color: var(--text-secondary); }
.ac-author { color: var(--text-primary); font-weight: 600; }
.ac-kind, .ac-pill { border: 1px solid var(--border); border-radius: 999px; padding: 0 6px; font-size: 0.6875rem; color: var(--text-secondary); }
.ac-pill-resolved { color: var(--success); border-color: color-mix(in srgb, var(--success) 50%, var(--border)); }
.ac-pill-orphan { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 50%, var(--border)); }
.ac-body { margin: 4px 0 0; font-size: var(--fs-md, 0.875rem); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-primary); }
.ac-reply { margin: 8px 0 0 10px; padding-left: 10px; border-left: 2px solid var(--border); }
.ac-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ac-act, .ac-jump, .ac-whole, .ac-lock, .ac-cancel, .ac-send { font-size: var(--fs-sm, 0.8125rem); }
.ac-act, .ac-jump { background: none; border: 0; color: var(--text-secondary); padding: 2px 6px; cursor: pointer; }
.ac-act:hover, .ac-jump:hover { color: var(--text-primary); text-decoration: underline; }
.ac-composer { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ac-input { width: 100%; box-sizing: border-box; resize: vertical; padding: 8px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-primary); color: var(--text-primary); font: inherit; }
.ac-composer-row { display: flex; align-items: center; gap: 8px; }
.ac-counter { flex: 1; color: var(--text-muted); font-size: var(--fs-sm, 0.8125rem); }
.ac-error { margin: 0; color: var(--error-text, var(--error)); font-size: var(--fs-sm, 0.8125rem); }
.ac-error[hidden] { display: none; }
.ac-selbtn { position: fixed; z-index: 120; }
.ac-selbtn[hidden] { display: none; }

@media (max-width: 767px) {
    /* The viewer follows what the keyboard leaves of the screen (--visual-viewport-height, mobile.js), and the sheet is anchored to the viewer's own bottom, so a composer is never under the keyboard (#5219). */
    .artifact-viewer { height: var(--visual-viewport-height, 100dvh); bottom: auto; }
    .artifact-viewer.ac-on .artifact-viewer-content { width: 100vw; max-height: 100%; height: 100%; border-radius: 0; }
    /* The title gets a row of its own when the buttons would leave it a letter (320 px), and the buttons share the next. */
    .artifact-viewer-header { flex-wrap: wrap; row-gap: 0; }
    .artifact-viewer-title { flex: 1 0 100%; order: -1; padding-bottom: 2px; }
    .artifact-viewer-header .artifact-viewer-download { margin-left: auto; }
    .ac-toggle { display: inline-flex; align-items: center; min-height: 44px; }
    .ac-toggle[hidden] { display: none; }
    .ac-panel { position: absolute; left: 0; right: 0; bottom: 0; width: auto; flex: none; max-height: 70%; border-left: 0; border-top: 1px solid var(--border); border-radius: 12px 12px 0 0; transform: translateY(105%); transition: transform 0.2s ease; z-index: 110; padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px)); }
    .ac-panel.ac-sheet-open { transform: none; }
    .ac-sheet-close { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; order: 2; }
    .ac-head { flex-wrap: wrap; }
    .ac-title { order: 1; }
    .ac-filters { order: 3; flex: 1 0 100%; justify-content: stretch; }
    .ac-filter { flex: 1; }
    /* the composer stays in reach at the sheet's bottom while the list scrolls above it */
    .ac-panel > .ac-composer { position: sticky; bottom: calc(-1 * var(--space-md)); background: var(--bg-secondary); padding: 6px 0 calc(var(--space-md)); margin-bottom: calc(-1 * var(--space-md)); z-index: 1; }
    /* with the keyboard up there is little height: the sheet may use all of the viewer, and the header folds to one row (the filters and the close button; the title is the sheet's own name and
       the filters already say what is shown), so the sticky header and the sticky composer never overlap */
    body.keyboard-open .ac-panel { max-height: 100%; }
    body.keyboard-open .ac-title { display: none; }
    body.keyboard-open .ac-filters { order: 1; flex: 1 1 0; }
    body.keyboard-open .ac-sheet-close { order: 2; }
    .ac-filter, .ac-act, .ac-jump, .ac-whole, .ac-lock, .ac-cancel, .ac-send { min-height: 44px; }
    .ac-act, .ac-jump { padding: 2px 12px; }
}
.ac-deleted { color: var(--text-muted); font-style: italic; }

/* a11y (#5252): the live region is for screen readers only; the document region shows where keyboard focus is */
.ac-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.artifact-viewer-body:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ac-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The docked preview pane (#5311): the same panel and cards beside the document (the pane is wide: maximised, or a full-height column) or, narrower than 720 px, the bottom sheet the phone gets,
   over the document inside the pane. artifact_comments.js decides the same by the pane's own width (sheet()), so the two agree. */
.preview-main > .ac-panel { flex: 0 0 340px; }
@container pv (max-width: 719px) {
    .preview-main > .ac-panel { position: absolute; left: 0; right: 0; bottom: 0; width: auto; flex: none; max-height: 70%; border-left: 0; border-top: 1px solid var(--border); border-radius: 12px 12px 0 0; transform: translateY(105%); z-index: 5; box-shadow: 0 -4px 16px rgba(var(--black-rgb), 0.25); }
    .preview-main > .ac-panel.ac-sheet-open { transform: none; }
    .preview-main > .ac-panel .ac-sheet-close { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; order: 2; }
    .preview-main > .ac-panel .ac-head { flex-wrap: wrap; }
    .preview-main > .ac-panel .ac-title { order: 1; }
    .preview-main > .ac-panel .ac-filters { order: 3; flex: 1 0 100%; justify-content: stretch; }
    .preview-main > .ac-panel .ac-filter { flex: 1; min-height: 44px; }
    .preview-main > .ac-panel > .ac-composer { position: sticky; bottom: calc(-1 * var(--space-md)); background: var(--bg-secondary); padding: 6px 0 calc(var(--space-md)); margin-bottom: calc(-1 * var(--space-md)); z-index: 1; }
}
/* the Comments button sits in the pane's toolbar; artifact_comments.js hides it unless the panel is a sheet (beside the document it is always there) */
.preview-toolbar .ac-toggle:not([hidden]) { display: inline-flex; align-items: center; min-height: 28px; margin-left: auto; flex: 0 0 auto; }
@media (max-width: 767px) { .preview-toolbar .ac-toggle:not([hidden]) { min-height: 44px; min-width: 44px; } } /* a touch target (the rule above is more specific than the phone's own) */