/* notify.css — 260921-cfbell: top-right notification bell (cfn- prefix, owned by notify.js) */
.cfn { position: relative; margin-left: auto; }
.cfn-bell {
  position: relative; width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--card-border, #e2e8f0); background: var(--card, #fff);
  color: var(--primary, #04071D); display: grid; place-items: center; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.cfn-bell:hover, .cfn-bell[aria-expanded="true"] { border-color: var(--accent, #155eef); box-shadow: 0 0 0 3px var(--accent-glow, rgba(21,94,239,.10)); }
.cfn-bell svg { width: 20px; height: 20px; }
.cfn-badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--red, #e93d3d); color: #fff; font: 700 11px/18px Inter, system-ui, sans-serif;
  text-align: center; box-shadow: 0 0 0 2px var(--bg, #f6f8fb);
}
.cfn-badge[hidden] { display: none; }
.cfn-bell.is-ringing svg { animation: cfn-ring .9s ease-in-out; transform-origin: 50% 10%; }
@keyframes cfn-ring {
  0%,100% { transform: rotate(0); } 15% { transform: rotate(18deg); } 30% { transform: rotate(-16deg); }
  45% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 75% { transform: rotate(4deg); }
}
.cfn-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 1000; width: 360px; max-width: calc(100vw - 32px);
  background: var(--card, #fff); border: 1px solid var(--card-border, #e2e8f0); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(4,7,29,.14); overflow: hidden;
}
.cfn-panel[hidden] { display: none; }
.cfn-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--card-border, #e2e8f0); }
.cfn-title { font: 700 14px/1.2 Inter, system-ui, sans-serif; color: var(--primary, #04071D); }
.cfn-sub { font-size: 11px; color: var(--muted-foreground, #64748b); margin-top: 2px; }
.cfn-list { max-height: min(420px, 60vh); overflow-y: auto; }
.cfn-item { display: block; padding: 10px 14px; border-bottom: 1px solid var(--muted, #f1f5f9); color: inherit; text-decoration: none; }
a.cfn-item:hover { background: var(--bg, #f6f8fb); }
.cfn-item.is-unread { background: var(--accent-glow, rgba(21,94,239,.08)); box-shadow: inset 3px 0 0 var(--accent, #155eef); }
.cfn-item.is-cancelled .cfn-name { text-decoration: line-through; opacity: .6; }
.cfn-row1 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.cfn-name { font-weight: 600; font-size: 13px; color: var(--primary, #04071D); }
.cfn-ago { font-size: 11px; color: var(--muted-foreground, #64748b); white-space: nowrap; }
.cfn-row2 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.cfn-row3 { font-size: 12px; color: var(--muted-foreground, #64748b); margin-top: 3px; }
.cfn-row3:empty { display: none; }
.cfn-when { font-size: 12px; color: var(--foreground, #1f2937); }
.cfn-tag { font: 800 9px/1 Inter, system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase; padding: 4px 6px; border-radius: 4px; }
.cfn-tag--g { background: rgba(246,173,85,.18); color: #9a5b0f; }
.cfn-tag--ai { background: var(--accent-glow, rgba(21,94,239,.10)); color: var(--accent, #155eef); }
.cfn-empty { padding: 24px 14px; text-align: center; font-size: 13px; color: var(--muted-foreground, #64748b); }
.cfn-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; background: var(--bg, #f6f8fb); font-size: 12px; }
.cfn-link { background: none; border: 0; padding: 0; color: var(--accent, #155eef); font: 600 12px Inter, system-ui, sans-serif; cursor: pointer; }
.cfn-hint { color: var(--muted-foreground, #64748b); }
.cfn-tag--cal { background: var(--muted, #eef2f7); color: var(--foreground, #1f2937); }
/* 260921-clbell: on phones the bell can sit mid-row (closer portal), so an
   absolutely-positioned panel anchored right:0 runs off the left edge. Pin it
   to the viewport gutters instead; notify.js sets `top` under the bell. */
@media (max-width: 600px) {
  .cfn-panel { position: fixed; left: 16px; right: 16px; width: auto; max-width: none; }
}