/* Inbox (Work): one card of rows; an unread row carries the accent from its left edge, and a click marks it read */
.inbox-feed { overflow: hidden; }
.inbox-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); align-items: start; width: 100%; text-align: left; }
.inbox-item:last-child { border-bottom: 0; }
.inbox-item:disabled { opacity: 1; }
.inbox-feed .inbox-item.unread { background-image: linear-gradient(90deg, var(--sel), transparent 40%); }
.inbox-feed .inbox-item.unread:hover { background-color: var(--hover); }
.inbox-item:focus-visible { outline-offset: -2px; }
.inbox-item b { font-weight: 700; }
.inbox-item small { display: block; margin-top: 2px; color: var(--text3); font-size: 13px; }
.inbox-item time { font: 12px var(--mono); color: var(--faint); white-space: nowrap; }
.inbox-item .tasks-av { width: 32px; height: 32px; font-size: 11px; }
.inbox-bot { background: var(--chip); border: 1px solid var(--line2); }
.inbox-bot svg.i { width: 15px; height: 15px; color: var(--bad); }
.inbox-none { margin: 0; padding: 22px 16px; color: var(--text3); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
[data-page="inbox"] .tasks-tabs .n { background: var(--chip); color: var(--text2); }
/* a phone: the four tabs fit its width with tighter sides, so none is cut (the Tasks page's nine keep their scroll) */
@media (max-width: 760px) { [data-page="inbox"] .tasks-tabs { gap: 0; } [data-page="inbox"] .tasks-tabs button { padding: 9px 8px; gap: 5px; } }