.comms-body { --comms-inset: 20px; }
.comms-action-queue > .comms-action-row { position: relative; display: block; padding: 0; overflow: hidden; touch-action: pan-y pinch-zoom; }
.comms-row-content { position: relative; z-index: 1; display: grid; grid-template-columns: 20px minmax(0, 1fr) 12px; gap: 8px 10px; align-items: baseline; padding: 16px var(--comms-inset); background: var(--surface); transform: translateX(var(--comms-drag, 0)); transition: transform 160ms var(--ease), background-color var(--dur); }
.comms-action-row:is(:hover, :focus-within) > .comms-row-content { background: var(--surface-2); }
.comms-row-copy { min-width: 0; }
.comms-row-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 7px; }
.comms-row-meta > .queue-source { flex: 1; min-width: 0; margin-top: 0; }
.comms-row-actions { display: flex; flex: none; justify-content: flex-end; gap: 2px; }
.comms-icon-action { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--ink-3); border-radius: 4px; }
.comms-icon-action svg { width: 18px; height: 18px; }
.comms-icon-action:not(:disabled):is(:hover, :focus-visible) { color: var(--hot); background: var(--surface-audio); }
.comms-icon-action:not(:disabled):active { background: var(--screen); }
.comms-row-feedback { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 var(--comms-inset) 12px; background: var(--surface); color: var(--ink-3); font: var(--type-micro); }
.comms-action-row:is([data-phase="error"], [data-phase="conflict"]) .comms-row-feedback { color: var(--hot); }
.comms-retry, .comms-undo button { flex: none; min-height: 44px; padding: 8px; color: var(--ink-1); font: var(--type-micro); text-decoration: underline; text-underline-offset: 3px; }
.comms-retry:is(:hover, :focus-visible), .comms-undo button:is(:hover, :focus-visible) { color: var(--hot); }
.comms-undo { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; color: var(--ink-2); font: var(--type-micro); }
.comms-snooze-picker { position: relative; z-index: 2; padding: 0 var(--comms-inset) 14px; background: var(--surface-2); }
.comms-snooze-heading { display: flex; justify-content: space-between; align-items: center; }
.comms-snooze-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.comms-snooze-option { min-height: 44px; padding: 8px 4px; border: 1px solid var(--line-strong); border-radius: 3px; color: var(--ink-1); font: var(--type-micro); background: var(--surface-audio); }
.comms-snooze-option:is(:hover, :focus-visible) { border-color: var(--hot); color: var(--hot); }
.comms-set-aside { margin: 18px calc(-1 * var(--comms-inset)) -18px; border-top: 1px solid var(--line); }
.comms-set-aside > summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 14px var(--comms-inset); cursor: pointer; list-style: none; }
.comms-set-aside > summary::-webkit-details-marker { display: none; }
.comms-set-aside > summary:is(:hover, :focus-visible) { background: var(--surface-2); }
.comms-set-aside > summary svg { margin-left: auto; width: 14px; height: 14px; }
.comms-set-aside[open] > summary svg { transform: rotate(180deg); }
.comms-set-aside > .comms-queue { margin: 0; }
.comms-aside-state { display: block; margin-top: 8px; color: var(--ink-3); font: var(--type-micro); }
.comms-swipe-hint { position: absolute; z-index: 0; inset-block: 0; display: flex; align-items: center; gap: 7px; color: var(--ink-2); font: var(--type-label); opacity: 0; }
.comms-swipe-hint svg { width: 17px; height: 17px; }
.comms-swipe-seen { left: var(--comms-inset); color: var(--good); }
.comms-swipe-snooze { right: var(--comms-inset); color: var(--hot); }
.comms-action-row[data-swiping] > .comms-row-content { transition: none; }
.comms-action-row[data-swiping="seen"] > .comms-swipe-seen, .comms-action-row[data-swiping="snooze"] > .comms-swipe-snooze { opacity: 1; }
@media (max-width: 760px) { .comms-body { --comms-inset: 16px; } }
@media (prefers-reduced-motion: reduce) {
  .comms-row-content { transform: none; transition: none; }
  .comms-action-row[data-swiping="seen"] > .comms-row-content { box-shadow: inset 3px 0 var(--good); }
  .comms-action-row[data-swiping="snooze"] > .comms-row-content { box-shadow: inset -3px 0 var(--hot); }
  .comms-action-row[data-swiping] > .comms-swipe-hint { opacity: 0; }
}