/* Alerts (alerts.js): the Feed's fourth page and one alert's own page. The Feed's own palette (feed.css --feed-*), round
   marks and circles, the Terminal's buttons; one place to restyle it. */

/* The count on the Alerts tab: a small circle beside the word, the Feed's own count look. */
.feed-app .feed-switch-count{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:9px;background:var(--feed-accent);color:var(--feed-on-accent);font-size:11px;font-weight:700;line-height:18px;font-variant-numeric:tabular-nums}
.feed-app .feed-switch-count[data-digits="3"]{font-size:9px}
/* Alerts' kinds are many: they wrap, four to a row on a phone. */
.feed-menu-wrap .feed-menu-pills{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}
.feed-menu-dot{display:block;width:12px;height:12px;border-radius:50%;background:var(--feed-accent)}

/* A row's kind, where the alert concerns no agent: its icon in the face's circle. */
.feed-face.alert-face{background:var(--feed-soft);color:var(--feed-accent)}
.feed-face.alert-face .icon{width:24px;height:24px}

/* One alert. */
.alert-detail{display:grid;gap:12px;max-width:640px;margin:0 auto;padding:8px 4px 32px;color:var(--feed-ink,var(--ink));animation:alert-in .2s ease-out}
@keyframes alert-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.feed-list-pane .feed-content{animation:none}
.feed-app:not(.has-thread) .alert-list{animation:alert-list-in .2s ease-out}
@keyframes alert-list-in{from{opacity:.4}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.alert-detail,.feed-app:not(.has-thread) .alert-list{animation:none}}
body.reduced-motion .alert-detail,body.reduced-motion .alert-list{animation:none}

.alert-kind{display:inline-flex;align-items:center;gap:8px;justify-self:start;margin:0;padding:4px 12px 4px 4px;border-radius:999px;background:var(--feed-soft,var(--soft));color:var(--feed-accent,var(--purple));font-size:13px;font-weight:700;line-height:18px}
.alert-kind-mark{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--feed-bg,#fff)}
.alert-kind-mark .icon{width:16px;height:16px}
.alert-title{margin:2px 0 0;font-size:1.3rem;line-height:1.3;font-weight:700;overflow-wrap:anywhere}
.alert-description{margin:0;font-size:15px;line-height:1.5;color:var(--feed-ink,var(--ink))}
.alert-time{display:block;color:var(--feed-muted,var(--muted));font-size:13px;line-height:18px}
.alert-who{display:flex;align-items:center;gap:10px;min-width:0;margin:0;padding:8px 10px 8px 8px;border:1px solid var(--feed-line,var(--line));border-radius:999px;color:inherit;text-decoration:none;justify-self:start;max-width:100%}
a.alert-who:hover{background:color-mix(in srgb,currentColor 5%,transparent)}
.alert-who-face{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;overflow:hidden}
.alert-who-face :is(.chat-face,.portrait-box,[data-portrait]){width:36px!important;height:36px!important;min-width:36px;border-radius:50%!important;overflow:hidden}
.alert-who-name{min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alert-who .icon{flex:none;width:16px;height:16px;color:var(--feed-muted,var(--muted))}

.alert-action{margin:8px 0 0;padding:14px 16px;border-radius:16px;background:var(--feed-fill,var(--soft))}
.alert-action-head{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--feed-muted,var(--muted))}
.alert-need{margin:0;font-size:15px;line-height:1.45;font-weight:600}

.alert-area{display:grid;gap:12px;padding:16px;border:1px solid var(--feed-line,var(--line));border-radius:16px;background:var(--feed-bg,var(--surface,#fff))}
.alert-area>*{min-width:0}
.alert-buttons{display:flex;flex-wrap:wrap;gap:8px}
.alert-buttons .btn{min-height:44px;border-radius:999px}
@media (max-width:520px){.alert-buttons>.btn{flex:1 1 100%;justify-content:center}}
.alert-buttons.alert-secondary{margin-top:2px}
.alert-external .icon{width:16px;height:16px;margin-inline-start:6px;flex:none}
.alert-amount{margin:0;font-size:1.6rem;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.alert-note{margin:0;color:var(--feed-muted,var(--muted));font-size:13px;line-height:1.45}
.alert-facts{display:grid;gap:8px;margin:0}
.alert-facts>div{display:grid;gap:2px}
.alert-facts dt{color:var(--feed-muted,var(--muted));font-size:12px;font-weight:600}
.alert-facts dd{margin:0;font-size:14px;overflow-wrap:anywhere}
.alert-quote{padding:10px 14px;border-radius:16px;background:var(--feed-fill,var(--soft))}
.alert-quote p{margin:0;white-space:pre-wrap}
.alert-steps{display:grid;gap:8px;margin:0;padding:0;list-style:none;counter-reset:step}
.alert-steps li{position:relative;padding-inline-start:34px;min-height:24px;line-height:1.45;counter-increment:step}
.alert-steps li::before{content:counter(step);position:absolute;inset-inline-start:0;top:0;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--feed-soft,var(--soft));color:var(--feed-accent,var(--purple));font-size:12px;font-weight:700}
.alert-tasks{border-top:1px solid var(--feed-line,var(--line));border-bottom:1px solid var(--feed-line,var(--line))}
.alert-tasks>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;cursor:pointer;font-weight:600;list-style:none}
.alert-tasks>summary::-webkit-details-marker{display:none}
.alert-tasks>summary .icon{width:18px;height:18px;transition:transform .2s}
.alert-tasks[open]>summary .icon{transform:rotate(180deg)}
.alert-tasks .feed-rows{margin:0 -16px}

/* A conversation: the last few messages, the chat's composer. */
.alert-talk{display:grid;gap:10px}
.alert-talk-log{display:grid;gap:8px}
.alert-turn{max-width:86%;justify-self:start;padding:8px 12px;border-radius:16px;background:var(--feed-fill,var(--soft))}
.alert-turn.mine{justify-self:end;background:var(--feed-soft,var(--soft))}
.alert-turn-who{display:block;font-size:12px;font-weight:700;color:var(--feed-muted,var(--muted))}
.alert-turn p{margin:2px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.alert-composer{display:flex;gap:8px;align-items:flex-end;margin:0}
.alert-composer textarea{flex:1;min-width:0;min-height:44px;padding:11px 16px;border:1px solid var(--feed-line,var(--line));border-radius:22px;resize:none;font:inherit;background:var(--feed-bg,#fff);color:inherit}
.alert-composer .btn{flex:none;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;justify-content:center}

/* The Authority rows inline: the Authority tab's own rows, without its card. */
.alert-area .agent-authority.auth-inline{margin:0}
.alert-area .auth-inline .auth-row:first-child{padding-top:0}
.alert-area .auth-inline .auth-row:last-of-type{border-bottom:0}
.auth-inline-save{display:flex;justify-content:flex-end;margin-top:6px}
.auth-inline-save .btn{min-height:44px;min-width:120px;border-radius:999px;justify-content:center}
@media (max-width:520px){.auth-inline-save .btn{flex:1}}

.alert-answer .form{display:grid;gap:10px}
.alert-answer textarea{width:100%;min-height:88px}
.alert-foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 16px;padding-top:4px}
.alert-foot .text-button{color:var(--feed-muted,var(--muted));font-size:13px}
.alert-gone{text-align:center;justify-items:center;padding-top:40px}

/* Mail's View (feed.js): a second, smaller control under Who, one capsule of words (the Founder, 24 October 2026). */
.feed-menu-segments{display:flex;gap:2px;padding:3px;border:1px solid var(--feed-line);border-radius:999px;background:var(--feed-bg)}
.feed-app .feed-menu-segment{flex:1 1 0;min-width:0;min-height:34px;margin:0;padding:0 8px;border:0;border-radius:999px;background:none;color:var(--feed-ink);font:inherit;font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer}
.feed-app .feed-menu-segment[aria-checked=true]{background:var(--feed-fill);font-weight:700}
.feed-app .feed-menu-segment:focus-visible{outline:2px solid var(--feed-ink);outline-offset:-2px}

/* Mark all as read, at the top of the list on its right. */
.alert-all-read{display:flex;justify-content:flex-end;margin:0;padding:6px 16px 0}
.alert-all-read .text-button{font-size:13px;color:var(--feed-accent)}