/* ─── Inbox page (feed) ─────────────────────────────────────────────────── */

#dashboard-layout.inbox-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: min(100%, 52rem);
    margin: 0 auto;
    width: 100%;
}

.inbox-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.25rem 0.35rem 0.5rem;
    border-bottom: 1px solid var(--border-primary);
}

.inbox-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.inbox-subtitle {
    margin: 0.25rem 0 0;
    font-size: var(--font-size-controls);
    color: var(--text-secondary);
}

.inbox-header-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}

.inbox-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);
    background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
    color: var(--accent-primary);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 35%, transparent);
}

.inbox-unread-badge {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* ─── Summary tiles ─────────────────────────────────────────────────────────
   Same grammar as the health view's tiles (.health-view-tiles) so the two feeds
   read as one system: auto-fit so the row reflows instead of overflowing when a
   sidebar or narrow window squeezes the container. Tiles that filter are real
   <button>s; the rest are plain readouts. */
.inbox-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    gap: 0.5rem;
    padding: 0 0.35rem;
}

.inbox-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border-primary);
    border-radius: var(--layout-radius-sm, 8px);
    background: var(--background-secondary);
    font-family: inherit;
    text-align: left;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

button.inbox-tile {
    cursor: pointer;
}

button.inbox-tile:hover {
    border-color: color-mix(in srgb, var(--accent-primary) 45%, var(--border-primary));
    background: color-mix(in srgb, var(--accent-primary) 7%, var(--background-secondary));
}

.inbox-tile.is-active {
    border-color: color-mix(in srgb, var(--accent-primary) 55%, transparent);
    background: color-mix(in srgb, var(--accent-primary) 12%, var(--background-secondary));
}

.inbox-tile-label {
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.inbox-tile-value {
    font-size: 1.05rem;
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

/* Unread is the number the inbox exists to drive down: tint it toward the accent
   when there is something to read, plain when the inbox is clear. */
.inbox-tile--unread:not(.inbox-tile--zero) .inbox-tile-value {
    color: var(--accent-primary);
}

.page-nav-btn--inbox {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.5rem;
    /* Icon-width of separation from the page tabs so the inbox reads as its own
       group rather than another page tab. */
    margin-left: 1.15rem;
}

.page-nav-btn--inbox .page-tab-icon {
    margin-right: 0;
}

/* Line-style inbox glyph, matched to the header health icon (monochrome,
   currentColor, ~1.15rem) so the two read as one visual family. */
.page-tab-icon--svg {
    width: 1.15rem;
    height: 1.15rem;
    display: inline-flex;
    align-items: center;
    color: currentColor;
    flex-shrink: 0;
    vertical-align: middle;
}

.page-nav-btn--inbox .page-inbox-badge {
    display: none !important;
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
    animation: none !important;
    box-shadow: none !important;
}

.page-nav-btn--inbox .page-inbox-badge.is-inbox-badge-visible {
    display: inline-flex !important;
    min-width: 1.35rem;
    padding: 0.1rem 0.4rem;
    margin-left: 0;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 35%, transparent);
    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);
    background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
    color: var(--accent-primary);
    align-items: center;
    justify-content: center;
}

/* Discoverability: gentle motion on the new Inbox tab until opened or intro toast seen */
@keyframes inbox-tab-icon-attention {
    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }
    18% {
        transform: scale(1.14) rotate(-7deg);
    }
    36% {
        transform: scale(1.08) rotate(6deg);
    }
    54% {
        transform: scale(1.12) rotate(-4deg);
    }
    72% {
        transform: scale(1.06) rotate(2deg);
    }
}

@keyframes inbox-tab-button-glow {
    0%,
    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-primary) 0%, transparent);
    }
    50% {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 22%, transparent);
    }
}

@keyframes inbox-badge-pulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-primary) 0%, transparent);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 18%, transparent);
    }
}

@keyframes inbox-badge-pop {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.28);
    }
    100% {
        transform: scale(1);
    }
}

.page-nav-btn--inbox.is-inbox-new:not(.active) {
    animation: inbox-tab-button-glow 2.8s ease-in-out infinite;
    border-radius: var(--layout-radius-sm, 8px);
}

.page-nav-btn--inbox.is-inbox-new:not(.active) .page-tab-icon {
    display: inline-block;
    transform-origin: center bottom;
    animation: inbox-tab-icon-attention 2.8s ease-in-out infinite;
}

.page-nav-btn--inbox.is-inbox-new:not(.active) .page-inbox-badge.is-inbox-badge-visible.is-inbox-badge-live,
.page-nav-btn--inbox .page-inbox-badge.is-inbox-badge-visible.is-inbox-badge-live {
    animation: inbox-badge-pulse 2.2s ease-in-out infinite;
}

.page-nav-btn--inbox .page-inbox-badge.is-inbox-badge-visible.is-inbox-badge-pop {
    animation: inbox-badge-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.no-animations .page-nav-btn--inbox.is-inbox-new,
body.no-animations .page-nav-btn--inbox.is-inbox-new .page-tab-icon,
body.no-animations .page-nav-btn--inbox.is-inbox-new .page-inbox-badge.is-inbox-badge-visible,
body.no-animations .page-inbox-badge.is-inbox-badge-visible.is-inbox-badge-live,
body.no-animations .page-inbox-badge.is-inbox-badge-visible.is-inbox-badge-pop {
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .page-nav-btn--inbox.is-inbox-new,
    .page-nav-btn--inbox.is-inbox-new .page-tab-icon,
    .page-nav-btn--inbox.is-inbox-new .page-inbox-badge.is-inbox-badge-visible,
    .page-inbox-badge.is-inbox-badge-visible.is-inbox-badge-live,
    .page-inbox-badge.is-inbox-badge-visible.is-inbox-badge-pop {
        animation: none !important;
    }
}

.inbox-feed {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.inbox-item {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 0.85rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border-primary);
    border-radius: var(--layout-radius-sm, 8px);
    background: var(--background-secondary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.inbox-item.is-unread {
    border-left: 3px solid var(--accent-primary);
}

.inbox-item:hover {
    border-color: color-mix(in srgb, var(--accent-primary) 42%, var(--border-primary));
    background: color-mix(in srgb, var(--accent-primary) 7%, var(--background-secondary));
}

.inbox-item--highlight {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 35%, transparent);
}

.inbox-item.keyboard-selected {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 28%, transparent);
    background: color-mix(in srgb, var(--accent-primary) 9%, var(--background-secondary));
}

/* 3rem square, shared with the health feed (.health-view-item-icon) so the two
   read as one system. Inbox has no stored favicon — the preview image is shown
   here on `contain`, and a link glyph fills in when there is none. */
.inbox-item-thumb {
    width: 3rem;
    height: 3rem;
    border-radius: calc(var(--layout-radius-sm, 8px) - 2px);
    background: var(--background-primary) center/contain no-repeat;
    border: 1px solid var(--border-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    overflow: hidden;
}

/* Favicon sizing matches the health view's icon (.health-view-item-icon img):
   contained at 1.7rem so a site icon sits centred in the 3rem square rather than
   filling it edge to edge. */
.inbox-item-thumb-img {
    width: 1.7rem;
    height: 1.7rem;
    object-fit: contain;
}

.inbox-item-thumb--placeholder {
    color: var(--text-tertiary);
}

/* Preview still enriching server-side: a soft pulse instead of a static glyph. */
.inbox-item-thumb--loading {
    position: relative;
    overflow: hidden;
    animation: inbox-thumb-pulse 1.4s ease-in-out infinite;
}

@keyframes inbox-thumb-pulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

body.no-animations .inbox-item-thumb--loading {
    animation: none !important;
    opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
    .inbox-item-thumb--loading {
        animation: none !important;
        opacity: 0.7;
    }
}

.inbox-item-title {
    margin: 0;
    font-size: var(--font-size-controls);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    line-height: 1.35;
}

.inbox-item-meta {
    margin: 0.2rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.6rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* Absolute added date ("3 Jul"). Sits between the domain and the relative time:
   the date answers "when", the time "how long ago". Tabular figures keep a
   column of dates from jittering. */
.inbox-item-date {
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.inbox-item-note {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* ─── Snooze ──────────────────────────────────────────────────────────────── */

/* A sleeping card reads quieter than a live one, with a moon marker on the meta. */
.inbox-item.is-snoozed {
    opacity: 0.72;
    border-left: 3px solid color-mix(in srgb, var(--accent-primary) 45%, var(--border-primary));
}

.inbox-item-snooze {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--accent-primary);
    font-weight: var(--font-weight-semibold);
}

.inbox-item-snooze::before {
    content: "💤";
    font-size: 0.85em;
}

/* Duration popover — a floating menu positioned in JS, so it is fixed to the
   viewport and layered above the feed. */
.inbox-snooze-menu {
    position: fixed;
    z-index: 12060;
    display: flex;
    flex-direction: column;
    min-width: 10rem;
    padding: 0.3rem;
    border-radius: var(--layout-radius-sm, 8px);
    border: 1px solid var(--border-primary);
    background: var(--background-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.inbox-snooze-option {
    padding: 0.4rem 0.6rem;
    border: none;
    border-radius: 0.35rem;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
}

.inbox-snooze-option:hover,
.inbox-snooze-option:focus-visible {
    background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
    color: var(--accent-primary);
    outline: none;
}

/* Actions stay collapsed until the row is hovered, focused, or keyboard-selected,
   matching the health view. grid-template-rows 0fr → 1fr animates the row's height
   rather than reserving an empty strip under every card; the buttons keep their box
   (no display:none) so they remain focusable and Tab reveals them via :focus-within. */
.inbox-item-actions {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0;
    opacity: 0;
    transition: grid-template-rows 0.14s ease, opacity 0.12s ease, margin-top 0.14s ease;
}

.inbox-item-actions-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-height: 0;
    overflow: hidden;
}

.inbox-item:hover .inbox-item-actions,
.inbox-item:focus-within .inbox-item-actions,
.inbox-item.keyboard-selected .inbox-item-actions {
    grid-template-rows: 1fr;
    margin-top: 0.55rem;
    opacity: 1;
}

.inbox-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 0.35rem;
    border: 1px solid var(--border-primary);
    background: var(--background-primary);
    color: var(--text-primary);
    font-size: 0.78rem;
    cursor: pointer;
}

.inbox-action-btn kbd {
    font-size: 0.68rem;
    padding: 0.02rem 0.28rem;
    border-radius: 0.25rem;
    border: 1px solid var(--border-secondary);
    background: var(--background-secondary);
    color: var(--text-tertiary);
    line-height: 1.4;
}

.inbox-action-btn:hover {
    border-color: color-mix(in srgb, var(--accent-primary) 45%, transparent);
    color: var(--accent-primary);
}

.inbox-action-btn--danger:hover {
    border-color: color-mix(in srgb, var(--accent-error) 45%, transparent);
    color: var(--accent-error);
}

/* ─── Keyboard legend ────────────────────────────────────────────────────── */

.inbox-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin: 1rem 0 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-secondary);
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.inbox-legend kbd {
    font-size: 0.7rem;
    padding: 0.05rem 0.32rem;
    border-radius: 0.25rem;
    border: 1px solid var(--border-secondary);
    background: var(--background-secondary);
    color: var(--text-secondary);
}

/* ─── Note modal ─────────────────────────────────────────────────────────── */

.inbox-note-modal-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: left;
}

.inbox-note-modal-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.6rem;
    border-radius: 0.4rem;
    border: 1px solid var(--border-primary);
    background: var(--background-primary);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.85rem;
    resize: vertical;
}

.inbox-note-modal-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 25%, transparent);
}

/* Respect the app's animation preference for the actions reveal, matching health. */
body.no-animations .inbox-item,
body.no-animations .inbox-item-actions {
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .inbox-item,
    .inbox-item-actions {
        transition: none !important;
    }
}

/* Touch devices have no hover: without this the actions would only ever show on
   tap-focus. */
@media (hover: none) {
    .inbox-item-actions {
        grid-template-rows: 1fr;
        margin-top: 0.55rem;
        opacity: 1;
    }
}

.inbox-empty-state,
.inbox-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-secondary);
}

.inbox-empty-title {
    margin: 0 0 0.35rem;
    font-size: var(--font-size-controls);
    color: var(--text-primary);
}

.inbox-empty-hint {
    margin: 0;
    font-size: 0.85rem;
}

/* ─── Paste choice modal ─────────────────────────────────────────────────── */

.paste-choice-overlay {
    z-index: 12050;
}

.paste-choice-modal {
    max-width: 34rem;
}

.paste-choice-url {
    font-size: 0.82rem;
    color: var(--text-secondary);
    word-break: break-all;
    margin-bottom: 0.65rem;
    padding: 0.45rem 0.55rem;
    border-radius: 0.35rem;
    background: var(--background-secondary);
    border: 1px solid var(--border-secondary);
}

.paste-choice-lead {
    margin: 0 0 0.75rem;
    color: var(--text-primary);
}

.paste-choice-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.paste-choice-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 0.75rem 0.8rem 0.8rem;
    border: 1px solid var(--border-primary);
    border-radius: var(--layout-radius-sm, 8px);
    background: var(--background-secondary);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.paste-choice-card:hover {
    border-color: color-mix(in srgb, var(--accent-primary) 50%, transparent);
    transform: translateY(-1px);
}

.paste-choice-card-icon {
    font-size: 1.1rem;
}

.paste-choice-card-title {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.paste-choice-card-hint {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

.paste-choice-kbd {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    font-size: 0.68rem;
    padding: 0.1rem 0.3rem;
    border-radius: 0.25rem;
    border: 1px solid var(--border-secondary);
    color: var(--text-tertiary);
}

.paste-choice-remember {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.85rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    cursor: pointer;
}

@media (max-width: 520px) {
    .paste-choice-options {
        grid-template-columns: 1fr;
    }

    .inbox-item {
        grid-template-columns: 3rem 1fr;
    }

    .inbox-item-actions {
        grid-template-rows: 1fr;
        margin-top: 0.55rem;
        opacity: 1;
    }

    .inbox-toolbar {
        flex-wrap: wrap;
    }

    .inbox-tiles {
        grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    }
}

/* ─── Inbox toolbar & date groups (phase 2) ───────────────────────────── */

.inbox-toolbar {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    padding: 0 0.35rem 0.35rem;
}

.inbox-filter-group {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.15rem;
    border-radius: 999px;
    border: 1px solid var(--border-primary);
    background: var(--background-secondary);
}

.inbox-filter-btn {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.78rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    cursor: pointer;
}

.inbox-filter-btn.is-active {
    background: color-mix(in srgb, var(--accent-primary) 16%, transparent);
    color: var(--accent-primary);
}

.inbox-search-input {
    flex: 1 1 12rem;
    min-width: 8rem;
    padding: 0.35rem 0.55rem;
    border-radius: 0.4rem;
    border: 1px solid var(--border-primary);
    background: var(--background-primary);
    color: var(--text-primary);
    font-size: 0.82rem;
}

.inbox-triage-btn,
.inbox-load-more-btn {
    padding: 0.35rem 0.7rem;
    border-radius: 0.4rem;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 40%, transparent);
    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
    color: var(--accent-primary);
    font-size: 0.8rem;
    cursor: pointer;
}

.inbox-load-more-btn {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
}

/* Bulk actions are secondary next to Triage: neutral chrome, not the accent fill. */
.inbox-bulk-btn {
    padding: 0.35rem 0.7rem;
    border-radius: 0.4rem;
    border: 1px solid var(--border-primary);
    background: var(--background-primary);
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
}

.inbox-bulk-btn:hover {
    border-color: color-mix(in srgb, var(--accent-primary) 45%, transparent);
    color: var(--accent-primary);
}

.inbox-date-group {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.inbox-date-group-title {
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.inbox-date-group-items {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

/* ─── Inbox triage overlay ─────────────────────────────────────────────── */

body.inbox-triage-active {
    overflow: hidden;
}

.inbox-triage-overlay {
    position: fixed;
    inset: 0;
    z-index: 12100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: color-mix(in srgb, var(--background-primary) 35%, transparent);
    backdrop-filter: blur(6px);
}

.inbox-triage-card {
    width: min(100%, 40rem);
    max-height: min(92vh, 44rem);
    overflow: auto;
    border-radius: var(--layout-radius-md, 12px);
    border: 1px solid var(--border-primary);
    background: var(--background-secondary);
    box-shadow: 0 18px 48px color-mix(in srgb, #000 22%, transparent);
    padding: 1rem 1.1rem 1.1rem;
}

.inbox-triage-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.inbox-triage-kicker {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
}

.inbox-triage-progress {
    margin: 0.15rem 0 0;
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.inbox-triage-close {
    margin-left: auto;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.inbox-triage-body {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 0.9rem;
}

.inbox-triage-thumb {
    width: 6.5rem;
    height: 6.5rem;
    border-radius: calc(var(--layout-radius-sm, 8px) - 2px);
    background: var(--background-primary) center/cover no-repeat;
    border: 1px solid var(--border-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.inbox-triage-title {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--text-primary);
}

.inbox-triage-meta {
    margin: 0.35rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.inbox-triage-note {
    margin: 0.45rem 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.inbox-triage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1rem;
}

.inbox-triage-actions kbd,
.inbox-action-btn kbd {
    margin-left: 0.25rem;
    font-size: 0.68rem;
    opacity: 0.75;
}

.inbox-triage-hint {
    margin: 0.85rem 0 0;
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

@media (max-width: 520px) {
    .inbox-triage-body {
        grid-template-columns: 1fr;
    }

    .inbox-triage-thumb {
        width: 100%;
        height: 8rem;
    }
}

/* ─── Sort control ──────────────────────────────────────────────────────── */

/* Matches the health view's sort select so the two feeds read as one system. */
.inbox-sort-select {
    padding: 0.35rem 0.5rem;
    border-radius: 0.4rem;
    border: 1px solid var(--border-primary);
    background: var(--background-primary);
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.inbox-sort-select:hover {
    border-color: color-mix(in srgb, var(--accent-primary) 45%, transparent);
    color: var(--accent-primary);
}

/* ─── Multi-select ──────────────────────────────────────────────────────── */

/* The row stays a 2-column grid (thumb + body), identical to the health view so
   the icon sits in the same place with the same padding. The checkbox is not a
   leading column — it overlays the icon's top-left corner, quiet until the row is
   hovered, focused or ticked. The row is position:relative so the absolute
   checkbox anchors to it. */
.inbox-item {
    position: relative;
}

.inbox-item-check {
    position: absolute;
    top: 0.55rem;
    left: 0.55rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.inbox-item-check-input {
    width: 0.95rem;
    height: 0.95rem;
    accent-color: var(--accent-primary);
    cursor: pointer;
    /* A faint backing so the box stays legible over any favicon underneath. */
    border-radius: 0.2rem;
    box-shadow: 0 0 0 2px var(--background-secondary);
    background: var(--background-secondary);
}

/* Quiet until the row is hovered, focused or already ticked — the same
   restraint the row's action buttons use, so an untouched list stays calm. */
.inbox-item-check-input:not(:checked) {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.inbox-item:hover .inbox-item-check-input,
.inbox-item:focus-within .inbox-item-check-input,
.inbox-item.keyboard-selected .inbox-item-check-input,
.inbox-item-check-input:focus-visible {
    opacity: 1;
}

.inbox-item.is-checked {
    border-color: color-mix(in srgb, var(--accent-primary) 55%, transparent);
    background: color-mix(in srgb, var(--accent-primary) 7%, var(--background-secondary));
}

/* ─── Selection action bar ──────────────────────────────────────────────── */

.inbox-selection-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.45rem 0.65rem;
    border-radius: var(--layout-radius-sm, 8px);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 40%, transparent);
    background: color-mix(in srgb, var(--accent-primary) 8%, var(--background-secondary));
}

.inbox-selection-count {
    margin-right: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-primary);
    font-variant-numeric: tabular-nums;
}

.inbox-bulk-btn--danger:hover {
    border-color: color-mix(in srgb, var(--accent-error) 55%, transparent);
    color: var(--accent-error);
}

/* ─── Custom snooze date ────────────────────────────────────────────────── */

.inbox-snooze-custom {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.3rem;
    padding: 0.4rem 0.6rem 0.3rem;
    border-top: 1px solid var(--border-secondary);
}

.inbox-snooze-custom-label {
    font-size: 0.72rem;
    color: var(--text-secondary);
    opacity: 0.85;
}

.inbox-snooze-date {
    padding: 0.3rem 0.4rem;
    border-radius: 0.35rem;
    border: 1px solid var(--border-primary);
    background: var(--background-primary);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.8rem;
}

.inbox-snooze-date:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent-primary) 55%, transparent);
    outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
    .inbox-item-check-input:not(:checked) {
        transition: none;
    }
}

/* ─── Modern layout ─────────────────────────────────────────────────────────
   Scoped to body[data-layout-version="modern"]; classic above is untouched.

   The inbox is the health view's sibling — same container width, same tile and
   row grammar — so this block mirrors the modern section in health-view.css
   rather than inventing a second dialect. Where the two differ (the unread
   marker is the accent, not a severity colour; rows carry a checkbox and a
   selection bar) the difference is called out below.

   Tokens come from layout-modern-tokens.css.
   ------------------------------------------------------------------------- */

body[data-layout-version="modern"] .inbox-tile:focus-visible,
body[data-layout-version="modern"] .inbox-filter-btn:focus-visible,
body[data-layout-version="modern"] .inbox-action-btn:focus-visible,
body[data-layout-version="modern"] .inbox-bulk-btn:focus-visible,
body[data-layout-version="modern"] .inbox-triage-btn:focus-visible,
body[data-layout-version="modern"] .inbox-load-more-btn:focus-visible,
body[data-layout-version="modern"] .inbox-sort-select:focus-visible,
body[data-layout-version="modern"] .inbox-item:focus-visible {
    outline: var(--layout-focus-ring);
    outline-offset: 2px;
}

/* ─── Header ────────────────────────────────────────────────────────────── */

body[data-layout-version="modern"] .inbox-header {
    border-bottom-color: color-mix(in srgb, var(--border-primary) 32%, transparent);
    padding-bottom: 0.7rem;
}

/* ─── Summary tiles ─────────────────────────────────────────────────────── */

body[data-layout-version="modern"] .inbox-tile {
    border-radius: var(--layout-radius-md);
    border-color: var(--layout-surface-border);
    background: var(--layout-surface);
    box-shadow: var(--layout-shadow-sm);
    transition:
        border-color var(--layout-transition),
        background-color var(--layout-transition),
        box-shadow var(--layout-transition),
        transform var(--layout-transition);
}

body[data-layout-version="modern"] button.inbox-tile:hover {
    box-shadow: var(--layout-shadow-md);
    transform: translateY(-1px);
}

body[data-layout-version="modern"] .inbox-tile.is-active {
    border-color: color-mix(in srgb, var(--accent-primary) 55%, transparent);
    box-shadow:
        var(--layout-shadow-sm),
        inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 22%, transparent);
}

/* ─── Toolbar & filters ─────────────────────────────────────────────────── */

body[data-layout-version="modern"] .inbox-filter-group {
    border-radius: var(--layout-radius-pill);
    border-color: var(--layout-surface-border);
    background: var(--layout-surface);
    box-shadow: var(--layout-shadow-sm);
}

body[data-layout-version="modern"] .inbox-filter-btn {
    border-radius: var(--layout-radius-pill);
    transition:
        background-color var(--layout-transition),
        color var(--layout-transition);
}

body[data-layout-version="modern"] .inbox-filter-btn.is-active {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 24%, transparent);
}

body[data-layout-version="modern"] .inbox-search-input,
body[data-layout-version="modern"] .inbox-sort-select {
    border-radius: var(--layout-radius-sm);
    border-color: var(--layout-surface-border);
}

/* Triage keeps its accent fill — it is the button the toolbar exists for — and
   only picks up the modern radius and motion. */
body[data-layout-version="modern"] .inbox-triage-btn,
body[data-layout-version="modern"] .inbox-load-more-btn,
body[data-layout-version="modern"] .inbox-bulk-btn {
    border-radius: var(--layout-radius-sm);
    transition:
        border-color var(--layout-transition),
        color var(--layout-transition),
        background-color var(--layout-transition);
}

body[data-layout-version="modern"] .inbox-bulk-btn {
    border-color: var(--layout-surface-border);
}

body[data-layout-version="modern"] .inbox-bulk-btn:hover {
    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
}

/* ─── Feed rows ─────────────────────────────────────────────────────────── */

body[data-layout-version="modern"] .inbox-item {
    border-radius: var(--layout-radius-md);
    border-color: var(--layout-surface-border);
    background: var(--layout-surface);
    box-shadow: var(--layout-shadow-sm);
    transition:
        border-color var(--layout-transition),
        background-color var(--layout-transition),
        box-shadow var(--layout-transition),
        transform var(--layout-transition);
}

/* Unread is a 3px left border in classic, which a rounded row clips into a
   wedge — the same fix the health view's severity marker needed. Redrawn as an
   inset bar that follows the corner. */
body[data-layout-version="modern"] .inbox-item.is-unread {
    border-left-width: 1px;
    border-left-color: var(--layout-surface-border);
    box-shadow:
        var(--layout-shadow-sm),
        inset 3px 0 0 0 var(--accent-primary);
}

body[data-layout-version="modern"] .inbox-item:hover {
    box-shadow: var(--layout-shadow-md);
    transform: translateY(-1px);
}

/* Every state that sets box-shadow has to restate the unread bar, or hovering
   an unread row erases the one marker that says it is unread. */
body[data-layout-version="modern"] .inbox-item.is-unread:hover {
    box-shadow:
        var(--layout-shadow-md),
        inset 3px 0 0 0 var(--accent-primary);
}

body[data-layout-version="modern"] .inbox-item.keyboard-selected {
    box-shadow:
        var(--layout-shadow-md),
        0 0 0 2px color-mix(in srgb, var(--accent-primary) 28%, transparent);
}

body[data-layout-version="modern"] .inbox-item.keyboard-selected.is-unread {
    box-shadow:
        var(--layout-shadow-md),
        0 0 0 2px color-mix(in srgb, var(--accent-primary) 28%, transparent),
        inset 3px 0 0 0 var(--accent-primary);
}

body[data-layout-version="modern"] .inbox-item--highlight {
    box-shadow:
        var(--layout-shadow-md),
        0 0 0 2px color-mix(in srgb, var(--accent-primary) 35%, transparent);
}

body[data-layout-version="modern"] .inbox-item--highlight.is-unread {
    box-shadow:
        var(--layout-shadow-md),
        0 0 0 2px color-mix(in srgb, var(--accent-primary) 35%, transparent),
        inset 3px 0 0 0 var(--accent-primary);
}

body[data-layout-version="modern"] .inbox-item-thumb {
    border-radius: var(--layout-radius-sm);
    border-color: var(--layout-surface-border);
}

/* ─── Row actions ───────────────────────────────────────────────────────── */

body[data-layout-version="modern"] .inbox-action-btn {
    border-radius: var(--layout-radius-sm);
    border-color: var(--layout-surface-border);
    transition:
        border-color var(--layout-transition),
        color var(--layout-transition),
        background-color var(--layout-transition);
}

body[data-layout-version="modern"] .inbox-action-btn:hover {
    background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
}

body[data-layout-version="modern"] .inbox-action-btn--danger:hover {
    background: color-mix(in srgb, var(--accent-error) 10%, transparent);
}

/* ─── Selection bar ─────────────────────────────────────────────────────── */

body[data-layout-version="modern"] .inbox-selection-bar {
    border-radius: var(--layout-radius-md);
    box-shadow: var(--layout-shadow-sm);
}

/* ─── Empty states ──────────────────────────────────────────────────────── */

/* Classic leaves these as bare centred text; modern gives them the same dashed
   placeholder card the health view and the empty dashboard use, so a cleared
   inbox reads as a deliberate state rather than a failed render. */
body[data-layout-version="modern"] .inbox-empty-state,
body[data-layout-version="modern"] .inbox-empty {
    border: 1px dashed var(--layout-surface-border);
    border-radius: var(--layout-radius-lg);
    background: color-mix(in srgb, var(--background-secondary) 42%, transparent);
}

/* ─── Motion preferences ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    body[data-layout-version="modern"] .inbox-tile,
    body[data-layout-version="modern"] .inbox-item,
    body[data-layout-version="modern"] button.inbox-tile:hover,
    body[data-layout-version="modern"] .inbox-item:hover {
        transition: none;
        transform: none;
    }
}