/* ═══════════════════════════════════════════════════
   Notification Center — slide-out panel + toasts
   ═══════════════════════════════════════════════════ */

/* ── Bell button in toolbar ── */
.notification-bell {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 15px;
  line-height: 1;
  position: relative;
  transition: color 0.15s;
  flex-shrink: 0;
}

.notification-bell:hover {
  color: var(--text);
}

.notification-bell--has-unread {
  animation: notification-bell-periodic-ring 5s ease-in-out infinite;
  transform-origin: 50% 10%;
}

/* Shake briefly (~0.6s) every 5s so the bell stays visually alive while unread
   items remain, without being obnoxious. Sitting still for most of the cycle
   keeps peripheral vision calm. */
@keyframes notification-bell-periodic-ring {
  0%,
  14%,
  100% {
    transform: rotate(0deg) scale(1);
  }
  2% {
    transform: rotate(14deg) scale(1.05);
  }
  5% {
    transform: rotate(-11deg) scale(1.08);
  }
  8% {
    transform: rotate(8deg) scale(1.03);
  }
  11% {
    transform: rotate(-5deg) scale(1);
  }
}

.notification-bell__badge {
  position: absolute;
  top: 0;
  right: 2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.5);
  transition:
    opacity 0.2s,
    transform 0.2s;
}

.notification-bell__badge--visible {
  opacity: 1;
  transform: scale(1);
}

/* ── Notification center panel ── */
.notification-center {
  position: fixed;
  top: 32px; /* below Electron titleBarOverlay (32px) */
  right: 0;
  bottom: 0;
  width: var(--notif-dock-width, 360px);
  max-width: 100vw;
  background: var(--panel);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  container-type: inline-size;
  container-name: notif-dock;
}

/* Pinned: panel becomes the 3rd grid column of .frame instead of an overlay.
   The outer grid already reserves the width, so we reset positioning.
   The 32px top padding clears the Electron titleBarOverlay — without it the
   header's action buttons (Ack/Clear/pin/close) sit behind the native Windows
   min/max/close controls at the top-right of the window. */
.notification-center--pinned {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  width: auto;
  max-width: none;
  grid-column: 3;
  padding-top: 32px;
  box-shadow: none;
  z-index: auto;
}

.notif-dock-resize-handle {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 10px;
  cursor: col-resize;
  z-index: 50;
  background: transparent;
  transition: background 0.15s;
}

.notif-dock-resize-handle:hover,
.notif-dock-resize-handle--active {
  background: var(--accent);
}

.notification-center__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.notification-center__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.notification-center__title-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: #1a1a1a;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.notification-center__actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.notification-center__action {
  border: none;
  background: rgba(var(--tint), 0.06);
  color: var(--muted);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
}

.notification-center__action:hover {
  background: rgba(var(--tint), 0.12);
  color: var(--text);
}

.notification-center__action--danger:hover {
  color: var(--danger);
}

.notification-center__action-icon {
  display: none;
  font-size: 13px;
  line-height: 1;
}

/* Narrow dock: collapse text labels into icons so the header stops wrapping
   when the user shrinks the panel. Threshold picked just above the point
   where "Ack finished" starts to break onto two lines. */
@container notif-dock (max-width: 320px) {
  .notification-center__action-label {
    display: none;
  }
  .notification-center__action-icon {
    display: inline-flex;
  }
  .notification-center__action {
    padding: 4px 6px;
    min-width: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Even narrower: tighten the header row so the title + badge + icons all
   fit on one line without horizontal overflow. */
@container notif-dock (max-width: 260px) {
  .notification-center__header {
    padding: 10px 8px;
    gap: 6px;
  }
  .notification-center__title {
    font-size: 12px;
  }
  .notification-center__actions {
    gap: 2px;
  }
}

.notification-center__close {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.12s;
}

.notification-center__close:hover {
  color: var(--text);
}

.notification-center__pin {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  border-radius: 4px;
  transition:
    background 0.12s,
    color 0.12s;
}

.notification-center__pin:hover {
  background: rgba(var(--tint), 0.08);
  color: var(--text);
}

.notification-center__pin--active {
  color: var(--accent);
}

.notification-center__body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.notification-center__empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.notification-center__list {
  position: relative;
}

/* ── Notification item ── */
.notification-item {
  display: grid;
  grid-template-columns: 28px 1fr 24px;
  gap: 6px;
  align-items: start;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}

.notification-item:hover {
  background: rgba(var(--tint), 0.03);
}

.notification-item--unread {
  border-left: 3px solid var(--accent);
  /* Intentionally no background tint — the accent bar plus the ⏳ icon plus
     the quick-action buttons already signal "needs attention". Adding a
     wash on top reads as cluttered when several waiting items stack. */
}

.notification-item--unread .notification-item__title {
  color: var(--accent);
}

.notification-item--unread:hover {
  background: rgba(var(--tint), 0.04);
}

/* --- Day-band separator (Today / Yesterday / weekday / date) --- */
.notif-day-separator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 6px;
  user-select: none;
}
.notif-day-separator__line {
  flex: 1;
  height: 1px;
  background: rgba(var(--tint), 0.08);
}
.notif-day-separator__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* --- "N new ↑" pill shown when user is scrolled down and alerts arrive --- */
.notification-center__new-pill {
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  padding: 4px 12px;
  border-radius: 12px;
  background: var(--accent);
  color: #1a1a1a;
  font-size: 11px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.15s,
    background 0.12s;
}
/* Pinned mode pushes content down 32px (titlebar clearance); shift pill too. */
.notification-center--pinned .notification-center__new-pill {
  top: 84px;
}
.notification-center__new-pill:hover {
  background: #ffb74d;
  transform: translateX(-50%) translateY(-1px);
}
.notif-pill-enter-active,
.notif-pill-leave-active {
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
.notif-pill-enter-from,
.notif-pill-leave-to {
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
}

/* --- Flash highlight for newly-arrived / updated items ---
   Persists until the user hovers the item (or 30s safety timeout).
   Recognition is carried entirely by a strong background wash + the
   existing left accent bar (inherited from the item's waiting/finished/
   review state, overlaid with the accent color via inset shadow when the
   underlying bar is green/red). We intentionally avoid a full-item border
   or outer glow because those read as a frame that collides visually with
   the per-state colored left borders (green for finished, red for urgent,
   etc.) — the user can no longer tell state from flash at a glance. The
   NEW text pill + icon shake do the rest of the "this is new" signaling.
*/
.notification-item--flash {
  background: rgba(var(--tint), 0.07);
  animation: notif-item-flash-enter 0.9s ease-out;
  /* No accent-colored left bar overlay. The row's native border-left
     (green for finished, red for urgent, blue for review, orange for
     waiting — set by the state modifier classes) stays visible and carries
     the semantic "what kind of event is this". Flash recognition comes from
     the warm pulse + NEW pill + icon shake instead. Previously a 5px inset
     shadow in accent orange overwrote green/red borders, making it harder
     to tell state from freshness at a glance. */
}
.notification-item--flash:hover {
  background: rgba(var(--tint), 0.1);
}
/* Short warm pulse on arrival — the orange wash flashes briefly to draw the
   eye, then settles into the neutral elevated tint so body text stays
   readable. The accent left bar carries the persistent "this is new" signal. */
@keyframes notif-item-flash-enter {
  0% {
    background: rgba(255, 164, 36, 0.35);
  }
  60% {
    background: rgba(255, 164, 36, 0.12);
  }
  100% {
    background: rgba(var(--tint), 0.07);
  }
}

/* Unambiguous "NEW" label — text beats subtle color for accessibility and
   for users who skim. Small pill sits inline with the title. */
.notification-item__new-pill {
  display: inline-block;
  padding: 1px 6px;
  margin-right: 6px;
  border-radius: 3px;
  background: var(--accent);
  color: #1a1a1a;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  vertical-align: middle;
  line-height: 1.4;
}

/* Icon shake while the item is flashing — periodic 0.5s shake every 2.5s
   draws the eye intermittently without being a constant jitter. Same
   rhythm as the toolbar bell's notification-bell-periodic-ring but faster
   cadence because the dock is closer to the user's focal area. */
.notification-item--flash .notification-item__icon {
  animation: notif-item-icon-shake 2.5s ease-in-out infinite;
  transform-origin: 50% 60%;
}
@keyframes notif-item-icon-shake {
  0%,
  24%,
  100% {
    transform: rotate(0deg) scale(1);
  }
  4% {
    transform: rotate(18deg) scale(1.15);
  }
  8% {
    transform: rotate(-14deg) scale(1.12);
  }
  12% {
    transform: rotate(10deg) scale(1.08);
  }
  16% {
    transform: rotate(-6deg) scale(1.04);
  }
  20% {
    transform: rotate(2deg) scale(1);
  }
}

.notification-item--selected {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.notification-item--resolved {
  opacity: 0.65;
}
.notification-item--finished {
  border-left: 3px solid #6edfb6;
  /* Subtle green wash — the left bar does the heavy lifting for recognition;
     this just adds a hint of color so the row reads as "completed, awaiting
     ack" rather than "neutral/archived". */
  background: rgba(110, 223, 182, 0.05);
}
.notification-item--finished:hover {
  background: rgba(110, 223, 182, 0.1);
}
.notification-item--finished .notification-item__title {
  color: #6edfb6;
}
.notification-item__quick-actions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.quick-action {
  padding: 2px 8px;
  font-size: 11px;
  border: 1px solid rgba(var(--tint), 0.12);
  background: transparent;
  color: var(--text);
  border-radius: 3px;
  cursor: pointer;
}
.quick-action:hover {
  background: rgba(var(--tint), 0.06);
  border-color: var(--accent);
}

/* --- Return-to-app banner --- */
.return-banner {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: rgba(255, 90, 90, 0.94);
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.return-banner__action {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  padding: 2px 10px;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}
.return-banner__close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}

/* Urgent (permission prompts, task failures) — distinct red styling */
.notification-item--urgent {
  border-left-color: #ff5a5a;
  background: rgba(255, 90, 90, 0.08);
}

.notification-item--urgent:hover {
  background: rgba(255, 90, 90, 0.14);
}

.notification-item--urgent .notification-item__title {
  color: #ff7a7a;
}

.notification-item__icon {
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

/* Review activity notifications (Azure/GitHub PR events) — distinct from
   terminal completions. A colored left-border plus a subtle wash identifies
   the provider at a glance. */
.notification-item--review {
  border-left: 3px solid #7a8cff;
  background: rgba(122, 140, 255, 0.05);
}
.notification-item--review:hover {
  background: rgba(122, 140, 255, 0.1);
}
.notification-item--review-azure {
  border-left-color: #0078d4;
  background: rgba(0, 120, 212, 0.06);
}
.notification-item--review-azure:hover {
  background: rgba(0, 120, 212, 0.12);
}
.notification-item--review-github {
  border-left-color: #238636;
  background: rgba(35, 134, 54, 0.06);
}
.notification-item--review-github:hover {
  background: rgba(35, 134, 54, 0.12);
}

.notification-item__provider-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 0 5px;
  height: 16px;
  margin-right: 4px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
}
.notification-item__provider-badge--azure {
  background: #0078d4;
}
.notification-item__provider-badge--github {
  background: #238636;
}

.notification-toast--review {
  border-left: 3px solid #7a8cff;
}
.notification-toast--review-azure {
  border-left-color: #0078d4;
}
.notification-toast--review-github {
  border-left-color: #238636;
}

.notification-item__content {
  min-width: 0;
}

.notification-item__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.notification-item__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-item__time {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.notification-item__meta {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
}

.notification-item__count {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.02em;
}

.notification-item__body {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.notification-item__remove {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  line-height: 20px;
  opacity: 0;
  transition:
    opacity 0.12s,
    color 0.12s;
}

.notification-item:hover .notification-item__remove {
  opacity: 1;
}

.notification-item__remove:hover {
  color: var(--danger);
}

/* ── Toast popup ── */
.notification-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 320px;
  max-width: calc(100vw - 40px);
  background: var(--panel-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 24px 1fr 20px;
  gap: 8px;
  align-items: start;
  cursor: pointer;
  z-index: 9500;
  backdrop-filter: blur(12px);
}

.notification-toast--waiting {
  border-left: 3px solid #ffb74d;
}

.notification-toast--completed {
  border-left: 3px solid #6edfb6;
}

.notification-toast--urgent {
  border-left: 3px solid #ff5a5a;
  box-shadow: 0 4px 18px rgba(255, 90, 90, 0.3);
}

.notification-toast--urgent .notification-toast__title {
  color: #ff7a7a;
}

.notification-toast--error {
  border-left: 3px solid #ff5a5a;
  background: rgba(255, 90, 90, 0.08);
}

.notification-toast--error .notification-toast__title {
  color: #ff7a7a;
}

.notification-toast__icon {
  font-size: 14px;
  line-height: 20px;
}

.notification-toast__content {
  min-width: 0;
}

.notification-toast__title {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.notification-toast__body {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.notification-toast__close {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  line-height: 20px;
  transition: color 0.12s;
}

.notification-toast__close:hover {
  color: var(--text);
}

/* ── Panel slide transition ── */
.notif-panel-enter-active,
.notif-panel-leave-active {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.notif-panel-enter-from,
.notif-panel-leave-to {
  transform: translateX(100%);
}

/* ── Toast transition ── */
.toast-enter-active {
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease;
}

.toast-leave-active {
  transition:
    transform 0.25s cubic-bezier(0.4, 0, 0.6, 1),
    opacity 0.25s ease;
}

.toast-enter-from {
  transform: translateX(100%) translateY(10px);
  opacity: 0;
}

.toast-leave-to {
  transform: translateX(30px);
  opacity: 0;
}

/* ── Item list transition ── */
.notif-item-enter-active {
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.notif-item-leave-active {
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.notif-item-enter-from {
  opacity: 0;
  transform: translateX(20px);
}

.notif-item-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}

/* ── Notification center tab bar ── */
.notification-center__tabs {
  display: flex;
  gap: 2px;
  align-items: center;
}

.notification-center__tab {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition:
    color 0.15s,
    background 0.15s;
}

.notification-center__tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.notification-center__tab--active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

/* ── Telegram status list ── */
.telegram-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.telegram-status-list {
  display: grid;
  gap: 6px;
  padding: 8px 8px 0 8px;
}

.telegram-status-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
}

.telegram-status-item__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.telegram-status-item__label {
  font-weight: 600;
  font-size: 13px;
  flex: 1;
}

.telegram-status-item__chat {
  font-size: 11px;
  color: var(--muted);
  font-family: monospace;
}

.telegram-status-item__badge {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 10px;
}

.telegram-status-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.telegram-status-item__chip {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  border: 1px solid var(--border);
}

.telegram-status__hint {
  padding: 0 12px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}

.telegram-status__hint code {
  font-size: 11px;
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 4px;
  border-radius: 3px;
}

.telegram-status__actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 8px 8px 8px;
}

.telegram-empty {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  text-align: center;
}

.telegram-empty__title {
  margin: 0;
  font-weight: 600;
}

.telegram-empty__hint {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.telegram-empty__cta {
  align-self: center;
  margin-top: 4px;
}

.tg-badge--ok {
  background: rgba(0, 200, 100, 0.15);
  color: #0c6;
}

.tg-badge--warn {
  background: rgba(255, 180, 0, 0.15);
  color: #fa0;
}
