/* styles/notifications.css — notifications bell, panel and settings (T10, task 10.1 / 10.3).
   Same look as the prototype's "Your turn" button and panel (.inbox / .inbox-panel). */

.bell { display: inline-flex; gap: 4px; align-items: center; color: var(--fg); }
.bell svg { width: 15px; height: 15px; flex: none; }
.bell .n { background: var(--bad); }
.bell .n.zero { background: var(--line); color: var(--muted); }

.notif-panel { position: absolute; right: 16px; top: 100%; margin-top: 6px; width: min(380px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 8px; display: grid; gap: 4px; z-index: 6; color: var(--fg); }
.notif-panel > header { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 8px 6px; border-bottom: 1px solid var(--line); }
.notif-panel > header b { font-size: 13px; }
.notif-panel > footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px 2px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.notif-panel .empty { padding: 8px; color: var(--muted); font-size: 13px; }

.notif { text-align: left; background: none; border: 0; border-left: 3px solid transparent; padding: 8px; border-radius: 6px; cursor: pointer; display: grid; gap: 2px; color: inherit; font: inherit; font-size: 13px; width: 100%; min-width: 0; }
.notif:hover { background: var(--sunken); }
.notif.unread { background: var(--accent-soft); }
.notif.unread:hover { background: var(--sunken); }
.notif.turn { border-left-color: var(--turn); }
.notif.bad { border-left-color: var(--bad); }
.notif.warn { border-left-color: var(--turn); }
.notif .nt { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.notif .nt span:last-child { min-width: 0; overflow-wrap: anywhere; }
.notif .nt .key { flex: none; white-space: nowrap; }
.notif small { color: var(--muted); }
.notif .unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; flex: none; align-self: center; }

.notif-set { display: grid; gap: 10px; padding: 4px 8px 8px; font-size: 13px; }
.notif-set h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 6px 0 0; }
.notif-set .switch { padding: 6px 0; border-top: 0; }
.notif-set .checks { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.notif-set .note { color: var(--muted); font-size: 12px; }
.notif-set .slack-off { background: var(--turn-soft); color: var(--turn); border-radius: 6px; padding: 6px 10px; font-size: 12.5px; }

@media (max-width: 600px) {
  .notif-panel { right: 8px; width: calc(100vw - 16px); }
}