:host, .commentmate-app {
  --commentmate-primary: #2563eb;
  --commentmate-primary-hover: #1d4ed8;
  --commentmate-primary-soft: #dbeafe;
  --commentmate-slate-950: #0f172a;
  --commentmate-slate-800: #1e293b;
  --commentmate-slate-700: #334155;
  --commentmate-slate-600: #475569;
  --commentmate-slate-500: #64748b;
  --commentmate-slate-300: #cbd5e1;
  --commentmate-slate-200: #e2e8f0;
  --commentmate-slate-100: #f1f5f9;
  --commentmate-white: #fff;
  --commentmate-danger: #b91c1c;
  --commentmate-success: #166534;
  color: var(--commentmate-slate-950);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

*, *::before, *::after { box-sizing: border-box; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
button:focus-visible, [contenteditable="true"]:focus-visible { outline: 3px solid var(--commentmate-primary); outline-offset: 2px; }

.commentmate-composer__footer { align-items: center; display: flex; }
.commentmate-secondary-button { background: transparent; border: 1px solid var(--commentmate-slate-300); border-radius: 7px; color: var(--commentmate-slate-800); font-size: 13px; font-weight: 650; min-height: 40px; padding: 0 12px; transition: background-color 170ms ease-out, border-color 170ms ease-out, box-shadow 170ms ease-out, transform 170ms ease-out; }
.commentmate-secondary-button:hover { background: var(--commentmate-slate-100); border-color: var(--commentmate-slate-500); }
.commentmate-secondary-button:not(:disabled):active, .commentmate-icon-button:not(:disabled):active { transform: scale(.97); }
.commentmate-icon-button { align-items: center; background: transparent; border: 0; border-radius: 7px; color: var(--commentmate-slate-600); display: inline-flex; justify-content: center; min-height: 40px; min-width: 40px; padding: 8px; transition: background-color 170ms ease-out, color 170ms ease-out, transform 170ms ease-out; }
.commentmate-icon-button:hover { background: var(--commentmate-slate-100); color: var(--commentmate-slate-950); }
.commentmate-icon { flex: 0 0 auto; }

.commentmate-draft-pin { background: var(--commentmate-primary); border: 2px solid var(--commentmate-white); border-radius: 50%; box-shadow: 0 0 0 3px rgba(37,99,235,.22); height: 12px; pointer-events: none; position: absolute; transform: translate(-50%, -50%); width: 12px; }
.commentmate-pin-layer { inset: 0; pointer-events: none; position: fixed; z-index: 2147482990; }
.commentmate-pin { align-items: center; aspect-ratio: 1; background: var(--commentmate-primary); border: 2px solid var(--commentmate-white); border-radius: 50%; box-shadow: 0 2px 5px rgba(15,23,42,.32); color: var(--commentmate-white); display: flex; font-size: 11px; font-weight: 800; height: 30px; justify-content: center; min-width: 30px; padding: 0; pointer-events: auto; position: absolute; transform: translate(-50%, -50%); transition: background-color 170ms ease-out, box-shadow 180ms ease-out, transform 170ms ease-out; width: 30px; }
.commentmate-pin:hover { background: var(--commentmate-primary-hover); transform: translate(-50%, -50%) scale(1.08); }
.commentmate-pin:active { transform: translate(-50%, -50%) scale(.95); }
.commentmate-pin.is-resolved { background: var(--commentmate-success); }
.commentmate-pin.is-uncertain { background: #a16207; }
.commentmate-pin.is-selected { box-shadow: 0 0 0 4px rgba(147,197,253,.62), 0 3px 8px rgba(30,64,175,.34); }
.commentmate-pin.is-pulsing { animation: commentmate-pin-focus 420ms cubic-bezier(.2,.8,.2,1); }
.commentmate-pin > .commentmate-icon { background: #a16207; border: 1px solid var(--commentmate-white); border-radius: 50%; bottom: -5px; color: var(--commentmate-white); height: 15px; padding: 1px; position: absolute; right: -5px; width: 15px; }

.commentmate-sidebar { --commentmate-sidebar-rail: 52px; background: var(--commentmate-white); border-right: 1px solid var(--commentmate-slate-200); box-shadow: 8px 0 22px rgba(15, 23, 42, .13); container-type: inline-size; display: flex; flex-direction: column; height: 100dvh; left: 0; max-width: calc(100vw - 16px); overflow: visible; position: fixed; right: auto; top: 0; transform: translateX(0); transition: transform 180ms ease-out, width 120ms ease-out; z-index: 2147483010; }
.commentmate-sidebar.is-collapsed { transform: translateX(calc(var(--commentmate-sidebar-rail) - 100%)); }
.commentmate-sidebar__header { align-items: center; border-bottom: 1px solid var(--commentmate-slate-200); display: flex; justify-content: space-between; min-height: 64px; padding: 12px 4px 12px 16px; }
.commentmate-sidebar__collapse { transition: background-color 170ms ease-out, color 170ms ease-out, transform 180ms ease-out; }
.commentmate-sidebar__collapse .commentmate-icon { transform: rotate(180deg); transition: transform 180ms ease-out; }
.commentmate-sidebar.is-collapsed .commentmate-sidebar__collapse .commentmate-icon { transform: rotate(0); }
.commentmate-sidebar h2, .commentmate-composer h2, .commentmate-access-notice h1, .commentmate-mobile-notice h1 { font-size: 20px; letter-spacing: -.025em; line-height: 1.2; margin: 0; }
.commentmate-review-actions { border-bottom: 1px solid var(--commentmate-slate-200); display: grid; gap: 8px; padding: 12px 16px; }
.commentmate-review-actions__controls { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.commentmate-review-actions__controls button { align-items: center; background: var(--commentmate-white); border: 1px solid var(--commentmate-slate-300); border-radius: 7px; color: var(--commentmate-slate-700); display: inline-flex; font-size: 12px; font-weight: 700; gap: 5px; justify-content: center; min-height: 44px; min-width: 0; padding: 5px 7px; text-align: center; transition: background-color 170ms ease-out, border-color 170ms ease-out, color 170ms ease-out, box-shadow 170ms ease-out, transform 170ms ease-out; }
@media (hover:hover) and (pointer:fine) {
 .commentmate-review-actions__controls button:hover:not(:disabled):not(.is-active) { background: var(--commentmate-slate-100); border-color: var(--commentmate-slate-500); color: var(--commentmate-slate-950); }
}
.commentmate-review-actions__controls button:not(:disabled):active { transform: scale(.98); }
.commentmate-review-actions__controls button.is-active { background: var(--commentmate-primary); border-color: var(--commentmate-primary-hover); box-shadow: 0 1px 3px rgba(30,64,175,.34); color: var(--commentmate-white); }
.commentmate-review-action__label { min-width: 0; line-height: 1.15; }
.commentmate-review-actions__status { align-items: flex-start; color: var(--commentmate-slate-600); display: flex; font-size: 12px; gap: 6px; line-height: 1.35; margin: 0; }
.commentmate-review-actions__status .commentmate-icon { color: var(--commentmate-primary); flex: 0 0 auto; margin-top: 1px; }
.commentmate-review-actions__status strong { color: var(--commentmate-slate-800); }
.commentmate-guest-name { border-bottom: 1px solid var(--commentmate-slate-200); padding: 12px 16px; }
.commentmate-guest-name form { align-items: center; display: grid; gap: 8px; grid-template-columns: auto minmax(0, 1fr); }
.commentmate-guest-name label { color: var(--commentmate-slate-800); font-size: 12px; font-weight: 400; white-space: nowrap; }
.commentmate-guest-name__field { min-width: 0; position: relative; }
.commentmate-guest-name input { background: var(--commentmate-white); border: 1px solid var(--commentmate-slate-300); border-radius: 7px; color: var(--commentmate-slate-800); font-size: 12px; font-weight: 650; min-width: 0; height: 40px; padding: 0 38px 0 10px; width: 100%; }
.commentmate-guest-name input[readonly] { background: var(--commentmate-slate-100); }
.commentmate-guest-name input:focus-visible { outline: 2px solid var(--commentmate-primary); outline-offset: 2px; }
.commentmate-guest-name__action { align-items: center; background: transparent; border: 0; border-radius: 5px; color: var(--commentmate-primary); display: flex; height: 32px; justify-content: center; padding: 0; position: absolute; right: 4px; top: 4px; width: 32px; }
.commentmate-guest-name__action:hover:not(:disabled) { background: var(--commentmate-primary-soft); }
.commentmate-text-button { align-items: center; background: transparent; border: 0; border-radius: 5px; color: var(--commentmate-primary); display: inline-flex; font-size: 12px; font-weight: 750; gap: 4px; min-height: 32px; padding: 0 4px; transition: background-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out; }
.commentmate-text-button:hover { background: var(--commentmate-primary-soft); }
.commentmate-text-button:active { transform: scale(.97); }
.commentmate-filters { border-bottom: 1px solid var(--commentmate-slate-200); display: flex; gap: 4px; padding: 10px 16px; }
.commentmate-filters button { align-items: center; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--commentmate-slate-600); display: inline-flex; font-size: 13px; font-weight: 650; gap: 6px; min-height: 36px; padding: 0 8px; }
.commentmate-filters button.is-active { border-bottom-color: var(--commentmate-primary); color: var(--commentmate-primary); font-weight: 800; }
.commentmate-filter-count { align-items: center; background: var(--commentmate-slate-100); border-radius: 999px; color: var(--commentmate-slate-600); display: inline-flex; font-size: 11px; font-variant-numeric: tabular-nums; font-weight: 700; justify-content: center; line-height: 1.4; min-height: 22px; min-width: 24px; padding: 2px 7px; }
.commentmate-filters button.is-active .commentmate-filter-count { background: var(--commentmate-primary-soft); color: var(--commentmate-primary-hover); }
.commentmate-sidebar__list { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: none; padding: 12px; }
.commentmate-sidebar__exit { background: var(--commentmate-white); border-top: 1px solid var(--commentmate-slate-200); flex: 0 0 auto; padding: 12px 16px; }
.commentmate-sidebar__exit a { align-items: center; background: rgba(185, 28, 28, .07); border: 1px solid rgba(185, 28, 28, .24); border-radius: 7px; color: var(--commentmate-danger); display: flex; font-size: 12px; font-weight: 750; gap: 7px; justify-content: center; min-height: 44px; padding: 7px 12px; text-decoration: none; transition: background-color 170ms ease-out, border-color 170ms ease-out, color 170ms ease-out, transform 170ms ease-out; width: 100%; }
.commentmate-sidebar__exit a:hover { background: var(--commentmate-danger); border-color: var(--commentmate-danger); color: var(--commentmate-white); }
.commentmate-sidebar__exit a:focus-visible { background: var(--commentmate-danger); border-color: var(--commentmate-danger); color: var(--commentmate-white); outline: 3px solid #fca5a5; outline-offset: 2px; }
.commentmate-sidebar__exit a:active { transform: scale(.98); }
.commentmate-page-group { background: #f8fafc; border: 1px solid var(--commentmate-slate-200); border-radius: 11px; margin-bottom: 12px; overflow: hidden; }
.commentmate-page-group:last-child { margin-bottom: 0; }
.commentmate-page-group.is-expanded { border-color: #bfdbfe; }
.commentmate-page-group > h3 { font-size: 13px; line-height: 1.4; margin: 0; }
.commentmate-page-group__toggle { align-items: center; appearance: none; background: var(--commentmate-white); border: 0; border-radius: 0; color: var(--commentmate-slate-800); display: flex; gap: 10px; line-height: 1.4; margin: 0; min-height: 68px; padding: 12px; text-align: start; transition: background-color 170ms ease-out; width: 100%; }
.commentmate-page-group__toggle[aria-expanded="true"] { background: #eff6ff; box-shadow: inset 0 -1px 0 #dbeafe; }
.commentmate-page-group__toggle:hover { background: var(--commentmate-slate-100); }
.commentmate-page-group__toggle:focus-visible { outline: 2px solid var(--commentmate-primary); outline-offset: -4px; }
.commentmate-page-group__chevron { align-items: center; color: var(--commentmate-slate-600); display: inline-flex; flex: 0 0 18px; height: 24px; justify-content: center; }
.commentmate-page-group__chevron .commentmate-icon { transform: rotate(90deg); transition: transform 170ms ease-out; }
.commentmate-page-group__toggle[aria-expanded="true"] .commentmate-page-group__chevron { color: var(--commentmate-primary-hover); }
.commentmate-page-group__toggle[aria-expanded="true"] .commentmate-page-group__chevron .commentmate-icon { transform: rotate(-90deg); }
.commentmate-page-group__copy { display: grid; flex: 1; gap: 3px; min-width: 0; }
.commentmate-page-group__title { font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.commentmate-page-group__url { color: var(--commentmate-slate-500); font-size: 11px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.commentmate-page-group__count { align-items: center; background: var(--commentmate-slate-100); border: 1px solid var(--commentmate-slate-200); border-radius: 5px; color: var(--commentmate-slate-600); display: inline-flex; flex: 0 0 auto; font-size: 11px; font-variant-numeric: tabular-nums; font-weight: 750; justify-content: center; line-height: 1.4; min-height: 24px; min-width: 28px; padding: 3px 7px; }
.commentmate-page-group__comments { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 9px; }
.commentmate-comment-card { min-width: 0; max-width: 100%; background: var(--commentmate-white); border: 1px solid var(--commentmate-slate-200); border-radius: 9px; overflow: visible; position: relative; transform-origin: center; transition: border-color 180ms ease-out, box-shadow 180ms ease-out, opacity 220ms ease-out, transform 220ms ease-out; }
.commentmate-comment-card:focus-visible { border-color: var(--commentmate-primary); box-shadow: 0 0 0 3px var(--commentmate-primary-soft); outline: 0; }
.commentmate-comment-card:hover, .commentmate-comment-card:focus-within { border-color: #93c5fd; box-shadow: 0 2px 8px rgba(30,64,175,.09); }
.commentmate-comment-card.is-resolved { background: #f8fafc; }
.commentmate-comment-card.is-selected { border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(147,197,253,.45), 0 4px 12px rgba(30,64,175,.11); }
.commentmate-comment-card.is-pulsing { animation: commentmate-card-focus 420ms cubic-bezier(.2,.8,.2,1); }
.commentmate-comment-card.is-resolving { opacity: .32; pointer-events: none; transform: translateX(12px) scale(.985); }
.commentmate-comment-card__body { align-items: flex-start; background: transparent; border: 0; border-radius: 9px 9px 0 0; color: inherit; display: flex; gap: 10px; min-height: 58px; padding: 12px 116px 8px 12px; text-align: left; transition: background-color 180ms ease-out, transform 150ms ease-out; width: 100%; }
.commentmate-comment-card__body:hover { background: var(--commentmate-slate-100); }
.commentmate-comment-card__body:active { transform: scale(.995); }
.commentmate-comment-card__number { align-items: center; background: var(--commentmate-primary); border-radius: 50%; color: white; display: inline-flex; flex: 0 0 24px; font-size: 11px; font-weight: 800; height: 24px; justify-content: center; transition: box-shadow 180ms ease-out, transform 180ms ease-out; }.is-selected .commentmate-comment-card__number { box-shadow: 0 0 0 3px rgba(37,99,235,.17); transform: scale(1.08); }
.is-resolved .commentmate-comment-card__number { background: var(--commentmate-success); }
.commentmate-comment-card__text { display: grid; flex: 1; gap: 2px; min-width: 0; }
.commentmate-comment-card__text strong { font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.commentmate-comment-card__date { color: var(--commentmate-slate-500); font-size: 11px; line-height: 1.35; }
.commentmate-comment-card__text em { align-items: center; color: #854d0e; display: flex; font-size: 11px; font-style: normal; font-weight: 650; gap: 4px; }
.commentmate-comment-card__summary { align-items: flex-start; background: transparent; border: 0; border-top: 1px solid var(--commentmate-slate-200); color: var(--commentmate-slate-700); display: flex; font-size: 13px; gap: 8px; justify-content: space-between; line-height: 1.45; min-height: 38px; padding: 8px 12px; text-align: left; transition: background-color 180ms ease-out, transform 150ms ease-out; width: 100%; }
.commentmate-comment-card__summary:hover { background: var(--commentmate-slate-100); }
.commentmate-comment-card__summary:active { transform: scale(.995); }
.commentmate-comment-card__summary > :first-child { min-width: 0; }
.commentmate-comment-card__meta { align-items: center; display: flex; gap: 6px; }
.commentmate-comment-status { color: var(--commentmate-slate-600); font-weight: 750; }
.commentmate-comment-card.is-editing { border-color: #f59e0b; box-shadow: 0 0 0 2px #fef3c7, 0 2px 8px rgba(146,64,14,.13); }
.commentmate-comment-card__editing-state { align-items: center; background: #fff7ed; border-radius: 999px; color: #9a3412; display: inline-flex; font-size: 10px; font-weight: 800; gap: 3px; padding: 2px 6px; }
.commentmate-comment-card__quick-actions { display: flex; gap: 4px; opacity: 0; pointer-events: none; position: absolute; right: 8px; top: 8px; transition: opacity 150ms ease-out, visibility 150ms ease-out; visibility: hidden; z-index: 2; }
.commentmate-comment-card:hover .commentmate-comment-card__quick-actions, .commentmate-comment-card:focus-within .commentmate-comment-card__quick-actions, .commentmate-comment-card.is-confirming-delete .commentmate-comment-card__quick-actions { opacity: 1; pointer-events: auto; visibility: visible; }
.commentmate-comment-card__quick-action, .commentmate-asset-promote, .commentmate-comment-card__controls button { align-items: center; background: var(--commentmate-white); border: 1px solid var(--commentmate-slate-200); border-radius: 6px; display: inline-flex; height: 32px; justify-content: center; min-width: 32px; padding: 0; transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out, box-shadow 150ms ease-out, transform 150ms ease-out; }
.commentmate-comment-card__quick-action:not(:disabled):active, .commentmate-asset-promote:not(:disabled):active, .commentmate-comment-card__controls button:not(:disabled):active { transform: scale(.94); }
.commentmate-comment-card__quick-action.is-edit { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.commentmate-comment-card__quick-action.is-edit:hover { background: #dbeafe; border-color: #60a5fa; color: #1e40af; }
.commentmate-comment-card__quick-action.is-approve { background: #ecfdf5; border-color: #86efac; color: #15803d; }
.commentmate-comment-card__quick-action.is-approve:hover { background: #dcfce7; border-color: #4ade80; color: #166534; }
.commentmate-comment-card__quick-action.is-reopen { background: var(--commentmate-primary-soft); border-color: #93c5fd; color: #1d4ed8; }
.commentmate-comment-card__quick-action.is-reopen:hover { background: #bfdbfe; border-color: #60a5fa; color: #1e40af; }
.commentmate-comment-card__quick-action.is-delete { background: #fef2f2; border-color: #fecaca; color: var(--commentmate-danger); }
.commentmate-comment-card__quick-action.is-delete:hover { background: #fee2e2; border-color: #f87171; color: #991b1b; }
.commentmate-delete-confirmation { align-items: center; background: var(--commentmate-white); border: 1px solid #fecaca; border-radius: 8px; box-shadow: 0 5px 14px rgba(15,23,42,.16); display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; position: absolute; right: 8px; top: 46px; width: 188px; z-index: 3; }
.commentmate-delete-confirmation > span { color: var(--commentmate-slate-700); flex: 1 0 100%; font-size: 12px; font-weight: 750; }
.commentmate-delete-confirmation > button { background: var(--commentmate-white); border: 1px solid var(--commentmate-slate-300); border-radius: 6px; color: var(--commentmate-slate-700); font-size: 12px; font-weight: 700; min-height: 32px; padding: 0 8px; }
.commentmate-delete-confirmation .commentmate-danger-button { background: var(--commentmate-danger); border-color: var(--commentmate-danger); color: var(--commentmate-white); }
.commentmate-empty { align-items: center; color: var(--commentmate-slate-500); display: flex; flex-direction: column; gap: 10px; justify-content: center; min-height: 220px; padding: 24px; text-align: center; }
.commentmate-empty p { font-size: 14px; margin: 0; }
.commentmate-comment-thread { max-height: 220px; overflow: auto; overscroll-behavior: contain; overflow-wrap: anywhere; background: #f8fafc; border-top: 1px solid var(--commentmate-slate-200); display: grid; gap: 7px; padding: 9px 12px; }
.commentmate-comment-thread__message { min-width: 0; border-left: 2px solid #bfdbfe; display: grid; gap: 1px; padding-left: 8px; }
.commentmate-comment-thread__message strong { color: var(--commentmate-slate-800); font-size: 12px; }.commentmate-comment-thread__message span { color: var(--commentmate-slate-600); font-size: 12px; line-height: 1.4; }.commentmate-comment-thread__message em { color: var(--commentmate-slate-500); font-size: 10px; font-style: normal; }
.commentmate-comment-assets { align-items: flex-start; border-top: 1px solid var(--commentmate-slate-200); display: flex; flex-direction: column; gap: 8px; padding: 9px 12px; }
.commentmate-comment-assets__file-row, .commentmate-comment-assets__screenshot-row { align-items: center; display: flex; gap: 7px; min-width: 0; }
.commentmate-comment-assets__file { align-items: center; color: var(--commentmate-primary); display: inline-flex; flex: 1; font-size: 12px; font-weight: 700; gap: 5px; min-width: 0; overflow: hidden; text-decoration: none; }.commentmate-comment-assets__file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.commentmate-comment-assets__screenshot-row { align-items: flex-start; }.commentmate-comment-assets__screenshot { background: var(--commentmate-slate-100); border: 1px solid var(--commentmate-slate-200); border-radius: 7px; display: block; flex: 0 0 auto; overflow: hidden; padding: 0; position: relative; text-align: left; transition: border-color 180ms ease-out, box-shadow 180ms ease-out, opacity 180ms ease-out, transform 180ms ease-out; }.commentmate-comment-assets__screenshot:hover, .commentmate-comment-assets__screenshot:focus-visible { border-color: #60a5fa; box-shadow: 0 0 0 2px var(--commentmate-primary-soft); transform: translateY(-1px); }.commentmate-comment-assets__screenshot:active { transform: scale(.98); }.commentmate-comment-assets__screenshot-image { display: block; height: 100%; object-fit: cover; width: 100%; }.commentmate-comment-assets__expand { align-items: center; background: rgba(15,23,42,.74); border-radius: 5px; color: var(--commentmate-white); display: inline-flex; height: 26px; justify-content: center; opacity: 0; pointer-events: none; position: absolute; right: 6px; top: 6px; transition: opacity 150ms ease-out; width: 26px; }.commentmate-comment-assets__screenshot:hover .commentmate-comment-assets__expand, .commentmate-comment-assets__screenshot:focus-visible .commentmate-comment-assets__expand { opacity: 1; }.is-uploaded-image .commentmate-comment-assets__screenshot { border-color: #a7f3d0; height: 88px; width: 150px; }.is-context-screenshot .commentmate-comment-assets__screenshot { border-color: #93c5fd; height: 48px; opacity: .5; width: 78px; }.is-context-screenshot .commentmate-comment-assets__screenshot:hover, .is-context-screenshot .commentmate-comment-assets__screenshot:focus-visible { opacity: 1; }.commentmate-attachment-image__loading, .commentmate-attachment-image__fallback { align-items: center; color: var(--commentmate-slate-500); display: flex; font-size: 10px; height: 100%; justify-content: center; line-height: 1.2; padding: 4px; text-align: center; width: 100%; }
.commentmate-asset-promote { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; flex: 0 0 32px; }.commentmate-asset-promote:hover { background: #dbeafe; border-color: #60a5fa; color: #1e40af; }
.is-uploaded-image.commentmate-comment-assets__screenshot-row { position: relative; }
.is-uploaded-image .commentmate-comment-assets__expand { right: 42px; }
.commentmate-image-asset-actions { position: absolute; right: -2px; top: -1px; z-index: 6; }
.commentmate-image-asset-actions__trigger { align-items: center; background: transparent; border: 0; border-radius: 7px; color: var(--commentmate-white); display: inline-flex; height: 44px; justify-content: center; padding: 0; position: relative; transition: transform 150ms ease-out; width: 44px; }
.commentmate-image-asset-actions__trigger::before { background: rgba(15,23,42,.82); border-radius: 5px; content: ''; height: 32px; position: absolute; transition: background-color 150ms ease-out; width: 32px; }
.commentmate-image-asset-actions__trigger .commentmate-icon { position: relative; }
.commentmate-image-asset-actions__trigger:hover::before, .commentmate-image-asset-actions__trigger[aria-expanded="true"]::before { background: rgba(15,23,42,.96); }
.commentmate-image-asset-actions__trigger:active { transform: scale(.96); }
.commentmate-image-asset-actions__menu { background: var(--commentmate-white); border: 1px solid var(--commentmate-slate-200); border-radius: 8px; box-shadow: 0 10px 24px rgba(15,23,42,.2); display: grid; gap: 2px; max-width: calc(100vw - 24px); min-width: 224px; padding: 4px; position: fixed; z-index: 2147483045; }
.commentmate-image-asset-actions__menu button { align-items: center; background: transparent; border: 0; border-radius: 5px; color: var(--commentmate-slate-800); display: flex; font-size: 13px; font-weight: 650; gap: 8px; min-height: 44px; padding: 0 9px; text-align: left; width: 100%; }
.commentmate-image-asset-actions__menu button:hover:not(:disabled) { background: var(--commentmate-slate-100); color: var(--commentmate-slate-950); }
.commentmate-image-asset-actions__menu button:active:not(:disabled) { transform: scale(.99); }
.commentmate-image-asset-actions__menu button .commentmate-icon { color: var(--commentmate-primary); }
.commentmate-image-asset-actions__error { border-top: 1px solid #fecaca; color: var(--commentmate-danger); font-size: 11px; font-weight: 650; line-height: 1.35; margin: 3px 4px 1px; padding: 7px 5px 2px; }
.commentmate-image-download-dialog { align-items: center; background: rgba(15,23,42,.58); display: flex; height: 100dvh; justify-content: center; left: 0; padding: 16px; position: fixed; top: 0; width: 100vw; z-index: 2147483045; }
.commentmate-image-download-dialog__panel { background: var(--commentmate-white); border: 1px solid var(--commentmate-slate-200); border-radius: 12px; box-shadow: 0 20px 56px rgba(15,23,42,.42); max-height: calc(100dvh - 32px); overflow: auto; width: min(376px, calc(100vw - 32px)); }
.commentmate-image-download-dialog__header { align-items: flex-start; border-bottom: 1px solid var(--commentmate-slate-200); display: flex; gap: 12px; justify-content: space-between; padding: 13px 8px 12px 16px; }
.commentmate-image-download-dialog__header h2 { color: var(--commentmate-slate-950); font-size: 16px; letter-spacing: -.01em; line-height: 1.25; margin: 0; }
.commentmate-image-download-dialog__header p { color: var(--commentmate-slate-600); font-size: 12px; line-height: 1.4; margin: 4px 0 0; overflow-wrap: anywhere; }
.commentmate-image-download-dialog__form { display: grid; gap: 13px; padding: 16px; }
.commentmate-image-download-dialog__switch { align-items: center; color: var(--commentmate-slate-800); display: flex; font-size: 13px; font-weight: 700; gap: 8px; min-height: 28px; }
.commentmate-image-download-dialog__switch input { accent-color: var(--commentmate-primary); height: 17px; margin: 0; width: 17px; }
.commentmate-image-download-dialog__field { color: var(--commentmate-slate-700); display: grid; font-size: 12px; font-weight: 700; gap: 6px; }
.commentmate-image-download-dialog__field > span { align-items: center; display: flex; justify-content: space-between; }
.commentmate-image-download-dialog__field output { color: var(--commentmate-primary); font-variant-numeric: tabular-nums; }
.commentmate-image-download-dialog__field > input, .commentmate-image-download-dialog__number-input { background: var(--commentmate-white); border: 1px solid var(--commentmate-slate-300); border-radius: 7px; color: var(--commentmate-slate-950); min-height: 42px; width: 100%; }
.commentmate-image-download-dialog__field > input { padding: 0 10px; }
.commentmate-image-download-dialog__field > input[type="range"] { accent-color: var(--commentmate-primary); min-height: 24px; padding: 0; }
.commentmate-image-download-dialog__number-input { align-items: center; display: flex; overflow: hidden; }
.commentmate-image-download-dialog__number-input input { background: transparent; border: 0; color: inherit; flex: 1; min-height: 40px; min-width: 0; outline: 0; padding: 0 10px; }
.commentmate-image-download-dialog__number-input span { border-left: 1px solid var(--commentmate-slate-200); color: var(--commentmate-slate-600); font-size: 12px; font-weight: 700; padding: 0 11px; }
.commentmate-image-download-dialog__field > input:focus-visible, .commentmate-image-download-dialog__number-input:focus-within { border-color: var(--commentmate-primary); box-shadow: 0 0 0 3px var(--commentmate-primary-soft); outline: 0; }
.commentmate-image-download-dialog__error { color: var(--commentmate-danger); font-size: 12px; font-weight: 650; line-height: 1.4; margin: -3px 0 0; }
.commentmate-image-download-dialog__actions { align-items: center; display: flex; gap: 8px; justify-content: flex-end; margin-top: 2px; }
.commentmate-image-download-dialog__actions .commentmate-primary-button { min-width: 112px; }
.commentmate-screenshot-state { align-items: center; border-top: 1px solid var(--commentmate-slate-200); color: #854d0e; display: flex; font-size: 11px; font-weight: 650; gap: 4px; margin: 0; padding: 8px 12px; }
.commentmate-comment-card__controls { align-items: center; border-top: 1px solid var(--commentmate-slate-200); display: flex; gap: 5px; justify-content: flex-end; padding: 6px 9px; }.commentmate-comment-card__controls button { color: var(--commentmate-slate-600); gap: 5px; padding: 0 9px; }.commentmate-comment-card__controls button:hover { background: var(--commentmate-primary-soft); border-color: #93c5fd; color: #1d4ed8; }
.commentmate-sidebar__resize { bottom: 0; cursor: col-resize; position: absolute; right: -6px; top: 64px; width: 12px; z-index: 4; }.commentmate-sidebar__resize::after { background: transparent; content: ''; inset: 0 4px; position: absolute; transition: background-color 150ms ease-out; }.commentmate-sidebar__resize:hover::after, .commentmate-sidebar__resize:focus-visible::after { background: var(--commentmate-primary); }.commentmate-sidebar__resize:focus-visible { outline: 3px solid var(--commentmate-primary); outline-offset: 2px; }

.commentmate-composer { background: var(--commentmate-white); border: 1px solid var(--commentmate-slate-200); border-radius: 10px; box-shadow: 0 14px 32px rgba(15,23,42,.24); max-height: calc(100dvh - 24px); max-width: calc(100vw - 24px); overflow: auto; padding: 14px; position: fixed; width: 360px; z-index: 2147483020; }
.commentmate-composer.is-editing { border-color: #f59e0b; box-shadow: 0 0 0 2px #fef3c7, 0 14px 32px rgba(146,64,14,.2); }
.commentmate-composer.is-reply { border-color: #93c5fd; box-shadow: 0 0 0 2px var(--commentmate-primary-soft), 0 14px 32px rgba(30,64,175,.2); }
.commentmate-composer__pointer { border-bottom: 10px solid var(--commentmate-white); border-left: 9px solid transparent; border-right: 9px solid transparent; height: 0; position: absolute; top: -10px; width: 0; }
.commentmate-composer.is-above .commentmate-composer__pointer { border-bottom: 0; border-top: 10px solid var(--commentmate-white); bottom: -10px; top: auto; }
.commentmate-composer__header { align-items: flex-start; display: flex; justify-content: space-between; margin-bottom: 10px; }
.commentmate-composer h2 { font-size: 16px; }
.commentmate-composer__state { align-items: center; color: #9a3412; display: inline-flex; font-size: 11px; font-weight: 800; gap: 4px; letter-spacing: .02em; margin-bottom: 3px; text-transform: uppercase; }
.commentmate-composer__state.is-reply { color: var(--commentmate-primary); }
.commentmate-composer__description { color: var(--commentmate-slate-600); font-size: 12px; line-height: 1.4; margin: 4px 0 0; }
.commentmate-composer__reply-context { background: #f8fafc; border: 1px solid #bfdbfe; border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.commentmate-composer__reply-context > header { align-items: center; background: var(--commentmate-primary-soft); color: #1e40af; display: flex; font-size: 11px; gap: 8px; justify-content: space-between; padding: 6px 9px; }
.commentmate-composer__reply-context > header span { font-weight: 800; }
.commentmate-composer__reply-context > header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.commentmate-composer__reply-context > div { color: var(--commentmate-slate-700); font-size: 12px; line-height: 1.45; max-height: 116px; overflow: auto; padding: 9px; }
.commentmate-composer__reply-context > div > :first-child { margin-top: 0; }
.commentmate-composer__reply-context > div > :last-child { margin-bottom: 0; }
.commentmate-richtext-toolbar { background: var(--commentmate-slate-100); border-radius: 7px 7px 0 0; display: flex; gap: 2px; padding: 4px; }
.commentmate-composer.is-editing .commentmate-richtext-toolbar { background: #fff7ed; }
.commentmate-richtext-toolbar > button, .commentmate-richtext-toolbar__heading-menu > button { align-items: center; background: transparent; border: 0; border-radius: 4px; color: var(--commentmate-slate-600); display: inline-flex; font-size: 14px; height: 30px; justify-content: center; min-width: 30px; padding: 0; position: relative; }
.commentmate-richtext-toolbar > button:hover, .commentmate-richtext-toolbar > button.is-active, .commentmate-richtext-toolbar__heading-menu > button:hover, .commentmate-richtext-toolbar__heading-menu > button.is-active { background: var(--commentmate-white); color: var(--commentmate-primary); }
.commentmate-richtext-toolbar > button::after, .commentmate-richtext-toolbar__heading-menu > button::after { background: var(--commentmate-slate-950); border-radius: 4px; color: var(--commentmate-white); content: attr(data-tooltip); font-size: 11px; font-weight: 650; left: 50%; line-height: 1.2; opacity: 0; padding: 5px 7px; pointer-events: none; position: absolute; top: calc(100% + 7px); transform: translate(-50%, -3px); transition: opacity 150ms ease-out, transform 150ms ease-out; white-space: nowrap; z-index: 5; }
.commentmate-richtext-toolbar > button:hover::after, .commentmate-richtext-toolbar > button:focus-visible::after, .commentmate-richtext-toolbar__heading-menu > button:hover::after, .commentmate-richtext-toolbar__heading-menu > button:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.commentmate-richtext-toolbar__heading-menu { position: relative; }.commentmate-richtext-toolbar__heading-options { background: var(--commentmate-white); border: 1px solid var(--commentmate-slate-200); border-radius: 7px; box-shadow: 0 8px 20px rgba(15,23,42,.18); display: grid; gap: 2px; padding: 4px; position: absolute; right: 0; top: calc(100% + 5px); width: 48px; z-index: 6; }.commentmate-richtext-toolbar__heading-options button { background: transparent; border: 0; border-radius: 4px; color: var(--commentmate-slate-700); font-size: 11px; font-weight: 750; height: 25px; padding: 0; }.commentmate-richtext-toolbar__heading-options button:hover, .commentmate-richtext-toolbar__heading-options button.is-active { background: var(--commentmate-primary-soft); color: #1d4ed8; }
.commentmate-composer__editor { border: 1px solid var(--commentmate-slate-200); border-top: 0; border-radius: 0 0 7px 7px; color: var(--commentmate-slate-950); font-size: 14px; line-height: 1.5; min-height: 112px; outline: 0; padding: 10px; }
.commentmate-composer__editor p { margin: 0 0 8px; }
.commentmate-composer__editor p:last-child { margin-bottom: 0; }
.commentmate-composer__editor h1, .commentmate-composer__editor h2, .commentmate-composer__editor h3, .commentmate-composer__editor h4, .commentmate-composer__editor h5, .commentmate-composer__editor h6 { line-height: 1.25; margin: 0 0 8px; }.commentmate-composer__editor h1 { font-size: 21px; }.commentmate-composer__editor h2 { font-size: 19px; }.commentmate-composer__editor h3 { font-size: 17px; }.commentmate-composer__editor h4 { font-size: 16px; }.commentmate-composer__editor h5 { font-size: 15px; }.commentmate-composer__editor h6 { font-size: 14px; }
.commentmate-composer__editor:empty::before { color: var(--commentmate-slate-500); content: attr(data-placeholder); float: left; pointer-events: none; }
.commentmate-composer__attachments { align-items: center; color: var(--commentmate-slate-500); display: flex; flex-wrap: wrap; font-size: 11px; gap: 8px; margin-top: 10px; }.commentmate-composer__attachments .commentmate-secondary-button { align-items: center; display: inline-flex; gap: 5px; min-height: 34px; padding: 0 9px; }.commentmate-composer__file-list { flex: 1 0 100%; list-style: none; margin: 0; padding: 0; }.commentmate-composer__file-list li { align-items: center; display: flex; gap: 6px; justify-content: space-between; padding: 3px 0; }.commentmate-composer__selected-file { align-items: center; display: flex; flex: 1; gap: 7px; min-width: 0; overflow: hidden; }.commentmate-composer__selected-file > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.commentmate-composer__file-thumbnail { border: 1px solid var(--commentmate-slate-200); border-radius: 4px; display: block; flex: 0 0 38px; height: 38px; object-fit: cover; width: 38px; }.commentmate-composer__file-list button { background: transparent; border: 0; color: var(--commentmate-danger); font-size: 17px; line-height: 1; min-height: 24px; min-width: 24px; }
.commentmate-composer__footer { color: var(--commentmate-slate-500); font-size: 11px; gap: 10px; justify-content: flex-end; margin-top: 10px; }
.commentmate-primary-button { align-items: center; background: var(--commentmate-primary); border: 1px solid var(--commentmate-primary); border-radius: 7px; color: var(--commentmate-white); display: inline-flex; font-size: 13px; font-weight: 750; gap: 7px; justify-content: center; min-height: 44px; padding: 0 13px; transition: background-color 170ms ease-out, transform 170ms ease-out; white-space: nowrap; }
.commentmate-primary-button:not(:disabled):hover { background: var(--commentmate-primary-hover); }
.commentmate-primary-button:not(:disabled):active { transform: scale(.98); }
.commentmate-form-error { color: var(--commentmate-danger); font-size: 12px; font-weight: 600; margin: 8px 0 0; }
.commentmate-visually-hidden { height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; clip: rect(0 0 0 0); white-space: nowrap; }

.commentmate-comment-popover { background: var(--commentmate-white); border: 1px solid #bfdbfe; border-radius: 11px; box-shadow: 0 16px 36px rgba(15,23,42,.25); max-height: calc(100dvh - 24px); max-width: calc(100vw - 24px); overflow: auto; position: fixed; transform-origin: top left; z-index: 2147483025; animation: commentmate-popover-in 220ms cubic-bezier(.2,.8,.2,1); }.commentmate-comment-popover.is-above { transform-origin: bottom left; }
.commentmate-comment-popover__pointer { border-bottom: 10px solid #bfdbfe; border-left: 9px solid transparent; border-right: 9px solid transparent; height: 0; left: 20px; position: absolute; top: -10px; width: 0; }.commentmate-comment-popover__pointer::after { border-bottom: 9px solid var(--commentmate-white); border-left: 8px solid transparent; border-right: 8px solid transparent; content: ''; left: -8px; position: absolute; top: 2px; }.commentmate-comment-popover.is-above .commentmate-comment-popover__pointer { border-bottom: 0; border-top: 10px solid #bfdbfe; bottom: -10px; top: auto; }.commentmate-comment-popover.is-above .commentmate-comment-popover__pointer::after { border-bottom: 0; border-top: 9px solid var(--commentmate-white); bottom: 2px; top: auto; }
.commentmate-comment-popover header { align-items: flex-start; border-bottom: 1px solid var(--commentmate-slate-200); display: flex; justify-content: space-between; padding: 10px 8px 10px 13px; }.commentmate-comment-popover__eyebrow { align-items: center; color: var(--commentmate-primary); display: flex; font-size: 11px; font-weight: 800; gap: 4px; }.commentmate-comment-popover h2 { color: var(--commentmate-slate-950); font-size: 14px; line-height: 1.25; margin: 3px 0 0; }.commentmate-comment-popover__content { color: var(--commentmate-slate-800); font-size: 14px; line-height: 1.5; padding: 13px; }.commentmate-comment-popover__content > :first-child { margin-top: 0; }.commentmate-comment-popover__content > :last-child { margin-bottom: 0; }.commentmate-comment-popover__replies { background: #f8fafc; border-top: 1px solid var(--commentmate-slate-200); display: grid; gap: 6px; padding: 9px 13px; }.commentmate-comment-popover__replies p { overflow-wrap: anywhere; color: var(--commentmate-slate-600); font-size: 12px; line-height: 1.4; margin: 0; }.commentmate-comment-popover__replies strong { color: var(--commentmate-slate-800); }.commentmate-comment-popover footer { align-items: center; border-top: 1px solid var(--commentmate-slate-200); display: flex; gap: 8px; justify-content: space-between; padding: 8px 10px 8px 13px; }.commentmate-comment-popover__status { align-items: center; color: var(--commentmate-primary); display: inline-flex; font-size: 12px; font-weight: 750; gap: 4px; }.commentmate-comment-popover__status.is-resolved { color: var(--commentmate-success); }
.commentmate-comment-popover__header-actions { align-items: center; display: flex; gap: 2px; }
.commentmate-comment-popover__status-action { align-items: center; border: 1px solid; border-radius: 7px; display: inline-flex; height: 36px; justify-content: center; min-width: 36px; padding: 0; transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out; }
.commentmate-comment-popover__status-action:not(:disabled):active { transform: scale(.94); }
.commentmate-comment-popover__status-action.is-resolve { background: #ecfdf5; border-color: #86efac; color: #15803d; }
.commentmate-comment-popover__status-action.is-resolve:hover { background: #dcfce7; border-color: #4ade80; color: #166534; }
.commentmate-comment-popover__status-action.is-reopen { background: var(--commentmate-primary-soft); border-color: #93c5fd; color: #1d4ed8; }
.commentmate-comment-popover__status-action.is-reopen:hover { background: #bfdbfe; border-color: #60a5fa; color: #1e40af; }

.commentmate-loading, .commentmate-access-notice { align-items: center; background: var(--commentmate-white); border: 1px solid var(--commentmate-slate-200); box-shadow: 0 7px 20px rgba(15,23,42,.18); color: var(--commentmate-slate-800); display: flex; gap: 10px; left: 50%; max-width: calc(100vw - 24px); padding: 14px 16px; position: fixed; top: 74px; transform: translateX(-50%); z-index: 2147483020; }
.commentmate-loading { border-radius: 8px; font-size: 14px; font-weight: 650; }
.commentmate-spinner { animation: commentmate-spin .8s linear infinite; border: 2px solid var(--commentmate-primary-soft); border-radius: 50%; border-top-color: var(--commentmate-primary); display: inline-block; height: 18px; width: 18px; }
.commentmate-access-notice { border-radius: 10px; max-width: 520px; padding: 18px; width: calc(100vw - 32px); }
.commentmate-access-notice > svg { color: #a16207; flex: 0 0 auto; }
.commentmate-access-notice p { color: var(--commentmate-slate-600); font-size: 14px; margin: 4px 0 0; }
.commentmate-access-notice .commentmate-secondary-button { margin-left: auto; white-space: nowrap; }
.commentmate-toast { border-radius: 8px; bottom: 18px; box-shadow: 0 5px 18px rgba(15,23,42,.22); color: white; font-size: 14px; font-weight: 650; left: 50%; max-width: calc(100vw - 32px); padding: 11px 14px; position: fixed; transform: translateX(-50%); z-index: 2147483030; }
.commentmate-toast.is-info { background: var(--commentmate-slate-800); }.commentmate-toast.is-success { background: var(--commentmate-success); }.commentmate-toast.is-error { background: var(--commentmate-danger); }
.commentmate-image-modal { align-items: center; background: rgba(15,23,42,.58); display: flex; inset: 0; justify-content: center; padding: 24px; position: fixed; z-index: 2147483040; }
.commentmate-image-modal__dialog { background: var(--commentmate-white); border: 1px solid var(--commentmate-slate-200); border-radius: 12px; box-shadow: 0 20px 56px rgba(15,23,42,.42); max-height: calc(100dvh - 48px); max-width: min(820px, calc(100vw - 48px)); overflow: auto; width: max-content; }
.commentmate-image-modal__header { align-items: center; border-bottom: 1px solid var(--commentmate-slate-200); display: flex; justify-content: space-between; padding: 8px 8px 8px 16px; }
.commentmate-image-modal__header h2 { font-size: 15px; letter-spacing: -.01em; line-height: 1.3; margin: 0; }
.commentmate-image-modal__image-wrap { align-items: center; background: var(--commentmate-slate-100); display: flex; justify-content: center; min-height: 180px; }
.commentmate-image-modal__image { display: block; height: auto; max-height: calc(100dvh - 150px); max-width: min(780px, calc(100vw - 72px)); width: auto; }
.commentmate-image-modal .commentmate-attachment-image__loading, .commentmate-image-modal .commentmate-attachment-image__fallback { font-size: 13px; min-height: 180px; width: 220px; }
.commentmate-mobile-notice { background: var(--commentmate-white); border-radius: 12px; box-shadow: 0 16px 48px rgba(15,23,42,.25); display: flex; flex-direction: column; left: 50%; max-height: calc(100dvh - 32px); max-width: calc(100vw - 32px); overflow: auto; padding: 28px 24px; position: fixed; text-align: center; top: 50%; transform: translate(-50%, -50%); width: 370px; z-index: 2147483030; }
.commentmate-mobile-notice__icon { color: var(--commentmate-primary); margin-bottom: 12px; }.commentmate-mobile-notice p { color: var(--commentmate-slate-600); font-size: 15px; margin: 12px auto 20px; }
.commentmate-mobile-viewer { color: var(--commentmate-slate-500) !important; font-size: 12px !important; margin: -4px auto 12px !important; }
.commentmate-mobile-notice .commentmate-filters { justify-content: center; margin: 0 -24px; padding-left: 16px; padding-right: 16px; }
.commentmate-mobile-comment-list { display: grid; gap: 12px; margin: 14px 0; text-align: left; }
.commentmate-mobile-page-group { border: 1px solid var(--commentmate-slate-200); border-radius: 9px; overflow: hidden; }
.commentmate-mobile-page-group > h2 { color: var(--commentmate-slate-800); font-size: 14px; line-height: 1.3; margin: 0; padding: 12px 12px 0; }
.commentmate-mobile-page-group > p { color: var(--commentmate-slate-500) !important; font-size: 11px !important; margin: 2px 12px 10px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.commentmate-mobile-comment-card { align-items: center; background: var(--commentmate-white); border: 0; border-top: 1px solid var(--commentmate-slate-200); color: var(--commentmate-slate-800); display: flex; gap: 10px; min-height: 58px; padding: 10px 12px; text-align: left; width: 100%; }
.commentmate-mobile-comment-card > span:nth-child(2) { display: grid; flex: 1; gap: 2px; min-width: 0; }
.commentmate-mobile-comment-card > span:nth-child(2) > span { color: var(--commentmate-slate-600); font-size: 13px; line-height: 1.35; }
.commentmate-mobile-comment-card em { color: var(--commentmate-slate-500); font-size: 11px; font-style: normal; }
.commentmate-mobile-notice > .commentmate-primary-button { align-self: center; margin-top: 4px; }

@keyframes commentmate-spin { to { transform: rotate(360deg); } }
@keyframes commentmate-pin-focus { 0% { transform: translate(-50%, -50%) scale(1); } 45% { transform: translate(-50%, -50%) scale(1.24); } 100% { transform: translate(-50%, -50%) scale(1); } }
@keyframes commentmate-card-focus { 0% { transform: scale(1); } 45% { transform: scale(1.018); } 100% { transform: scale(1); } }
@keyframes commentmate-popover-in { from { opacity: 0; transform: translateY(-5px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 700px) {
  .commentmate-image-modal { padding: 12px; }.commentmate-image-modal__dialog { max-height: calc(100dvh - 24px); max-width: calc(100vw - 24px); }.commentmate-image-modal__image { max-height: calc(100dvh - 120px); max-width: calc(100vw - 48px); }
}
@media (hover: none) {
  .commentmate-comment-card__quick-actions { opacity: 1; pointer-events: auto; visibility: visible; }
}
@container (max-width: 359px) {
  .commentmate-review-actions__controls { gap: 6px; }
  .commentmate-review-actions__controls button { padding-left: 0; padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Review actions remain available while long feedback scrolls. */
.commentmate-filters button, .commentmate-filters button.is-active { font-weight: 400; }
.commentmate-comment-popover > header { position: sticky; top: 0; z-index: 2; background: var(--commentmate-white); }
.commentmate-comment-popover { display: flex; flex-direction: column; overflow: hidden; }
.commentmate-comment-popover > header, .commentmate-comment-popover > footer { flex: 0 0 auto; background: var(--commentmate-white); }
.commentmate-comment-popover > header > :first-child { min-width: 0; overflow-wrap: anywhere; }
.commentmate-comment-popover__scroll-content { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.commentmate-comment-popover > footer { position: sticky; bottom: 0; z-index: 2; gap: 8px; }
.commentmate-comment-popover > footer > .commentmate-icon-button { flex: 0 0 32px; margin-left: auto; }
.commentmate-comment-popover__body-row { min-width: 0; }
.commentmate-comment-popover__content { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.commentmate-comment-popover__scroll-content > .commentmate-comment-assets { padding: 0 13px 13px; }
.commentmate-sidebar__exit button { align-items: center; background: #ecfdf5; border: 1px solid #15803d; border-radius: 7px; color: #15803d; display: flex; font-size: 12px; font-weight: 650; gap: 7px; justify-content: center; min-height: 44px; padding: 10px 12px; width: 100%; transition: background-color 170ms ease-out, color 170ms ease-out; }
.commentmate-sidebar__exit button:hover:not(:disabled) { background: #15803d; color: var(--commentmate-white); }
.commentmate-sidebar__exit button:focus-visible { outline: 3px solid #86efac; outline-offset: 2px; }
.commentmate-image-modal__header .commentmate-image-asset-actions { position: relative; inset: auto; margin-left: auto; flex: 0 0 32px; }
.commentmate-image-modal__header .commentmate-image-asset-actions__trigger { opacity: 1; }
.commentmate-image-asset-actions__menu { z-index: 2147483050; }
.commentmate-comment-card.is-resolving { background: #dcfce7; border-color: #86efac; opacity: .75; transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) { .commentmate-comment-card.is-resolving { transform: none; } }

.commentmate-toast { z-index: 2147483055; }

/* Keep action controls independent of the name's intrinsic width. */
.commentmate-comment-card__header { align-items: flex-start; display: flex; flex-wrap: nowrap; gap: 8px; min-width: 0; padding: 10px; }
.commentmate-comment-card__body { flex: 1 1 0; gap: 8px; min-height: 32px; min-width: 0; padding: 0; width: auto; }
.commentmate-comment-card__text { line-height: 1.4; }
.commentmate-comment-card__date { overflow-wrap: anywhere; }
.commentmate-comment-card__quick-actions { flex: 0 0 auto; flex-wrap: nowrap; margin: 0; position: static; }
.commentmate-comment-card__quick-action { flex: 0 0 auto; }
@container (max-width: 360px) {
  /* Keep short names beside the pin; long names can use the next full line. */
  .commentmate-comment-card__header { gap: 4px; padding: 8px; }
  .commentmate-comment-card__body { display: flow-root; }
  .commentmate-comment-card__number { float: inline-start; margin-inline-end: 6px; margin-block-end: 4px; width: 24px; }
  .commentmate-comment-card__text { display: block; }
  .commentmate-comment-card__text strong { display: inline-block; max-width: 100%; overflow-wrap: anywhere; vertical-align: top; }
  .commentmate-comment-card__date { clear: both; display: block; margin-top: 2px; }
}

.commentmate-comment-popover__footer-actions { align-items: center; display: flex; gap: 4px; margin-left: auto; }
.commentmate-comment-popover__footer-actions .commentmate-icon-button { min-height: 32px; min-width: 32px; padding: 6px; }
.commentmate-comment-popover__delete { color: var(--commentmate-danger); }
.commentmate-comment-popover__delete:hover:not(:disabled) { background: #fee2e2; color: #991b1b; }

/* Keep collapsed comments out of the layout and keyboard navigation. */
[hidden] { display:none !important; }
.commentmate-mobile-guidance { position:fixed; bottom:12px; left:64px; right:12px; max-width:360px; padding:8px 12px; background:#fff; border:1px solid #cbd5e1; border-radius:8px; font-size:12px; z-index:3; }
@media (max-width:767px) {
 .commentmate-sidebar { background:rgba(255,255,255,.97); max-height:100dvh; touch-action:pan-y pinch-zoom; }
 .commentmate-sidebar.is-resizing { transition:none; user-select:none; }
 .commentmate-sidebar__header,.commentmate-review-actions,.commentmate-guest-name,.commentmate-filters { flex-shrink:0; }
 .commentmate-sidebar__header { padding-left:12px; }
 .commentmate-sidebar h2 { font-size:18px; }
 .commentmate-review-actions,.commentmate-guest-name { padding:10px 12px; }
 .commentmate-review-actions__controls { gap:6px; }
 .commentmate-review-actions__controls button { -webkit-tap-highlight-color:transparent; }
 .commentmate-review-actions__controls button.is-active:not(:disabled):active { background:var(--commentmate-primary-hover); }
 .commentmate-guest-name form { grid-template-columns:minmax(0,1fr); gap:4px; }
 .commentmate-guest-name input { height:48px; padding-right:50px; }
 .commentmate-guest-name__action { top:2px; right:2px; height:44px; width:44px; }
 .commentmate-sidebar__resize { right:0; top:64px; width:10px; touch-action:none; }
 .commentmate-sidebar__resize::after { background:rgba(100,116,139,.16); inset:36% 2px; border-radius:3px; }
 .commentmate-sidebar__list { padding:8px; }
 .commentmate-sidebar__exit { padding:10px 12px; }
 @supports ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))) {
  .commentmate-sidebar { background:rgba(255,255,255,.90); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
  .commentmate-sidebar .commentmate-page-group { background:rgba(248,250,252,.8); }
  .commentmate-sidebar .commentmate-page-group__toggle { background:rgba(255,255,255,.8); }
  .commentmate-sidebar .commentmate-page-group__toggle[aria-expanded="true"] { background:rgba(239,246,255,.9); }
 }
 .commentmate-composer,.commentmate-comment-popover { border-radius:12px; }
 .commentmate-composer__pointer,.commentmate-comment-popover__pointer { display:none; }
 .commentmate-composer { overflow:auto; overscroll-behavior:contain; padding-bottom:env(safe-area-inset-bottom); }
 .commentmate-composer__footer { position:sticky; bottom:0; background:#fff; padding:10px; z-index:3; }
 .commentmate-composer__editor { font-size:16px; min-height:80px; }
 .commentmate-richtext-toolbar { flex-wrap:wrap; }
}
.commentmate-sidebar { overscroll-behavior:none; overflow-anchor:none; }
.commentmate-comment-thread { overscroll-behavior:none; }
@media (max-width:767px),(pointer:coarse) {
 button,.commentmate-icon-button,.commentmate-comment-popover__status-action,.commentmate-comment-card__quick-action,.commentmate-richtext-toolbar button { min-height:44px; min-width:44px; }
 .commentmate-comment-card__header { gap:2px; padding:6px; }
 .commentmate-pin { min-height:44px; min-width:44px; }
 .commentmate-guest-name input { font-size:16px; }
 .commentmate-guest-name input { height:48px; padding-right:50px; }
 .commentmate-guest-name__action { top:2px; right:2px; height:44px; width:44px; }
}

/* Native modal stays above theme overlays and keeps the draft decision explicit. */
.commentmate-draft-decision { background:var(--commentmate-white); border:1px solid var(--commentmate-slate-200); border-radius:12px; box-shadow:0 18px 60px rgba(15,23,42,.2); color:var(--commentmate-slate-950); margin:auto; max-height:calc(100dvh - 32px); max-width:calc(100vw - 32px); overflow:auto; padding:24px; width:490px; }
.commentmate-draft-decision::backdrop { background:rgba(15,23,42,.32); }
.commentmate-draft-decision h2 { font-size:20px; font-weight:700; letter-spacing:-.02em; line-height:1.3; margin:0 0 10px; }
.commentmate-draft-decision p { color:var(--commentmate-slate-600); font-size:14px; line-height:1.55; margin:0 0 20px; }
.commentmate-draft-decision .commentmate-form-error { color:var(--commentmate-danger); }
.commentmate-draft-decision__actions { align-items:center; display:flex; gap:10px; margin-top:24px; }
.commentmate-draft-decision__actions button { cursor:pointer; min-height:44px; }
.commentmate-draft-decision__actions button:disabled { cursor:not-allowed; }
.commentmate-draft-decision__remove { background:transparent; border:1px solid transparent; border-radius:7px; color:var(--commentmate-danger); font-size:13px; font-weight:650; margin-right:auto; padding:10px 12px; transition:background-color 170ms ease-out; }
.commentmate-draft-decision__remove:hover:not(:disabled) { background:#fef2f2; }
@media (max-width:480px) {
  .commentmate-draft-decision { padding:20px; }
  .commentmate-draft-decision__actions { display:grid; grid-template-columns:1fr 1fr; }
  .commentmate-draft-decision__remove { grid-column:1 / -1; grid-row:1; justify-self:start; }
}