/* Actionable alert/advisor feed — top-left stack, below the top bar. Free of
   the bottom-left context panel + minimap and the top-right overlay panels. */
#v2-alert-feed {
  position: absolute;
  top: 70px;
  left: 16px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 280px;
  max-width: 40vw;
  pointer-events: none;
}

.alert-item {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(13, 17, 23, 0.94);
  border: 1px solid var(--neon-muted);
  border-left-width: 3px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 11px;
  animation: alert-in 200ms ease-out;
}
.alert-clickable { cursor: pointer; }
.alert-clickable:hover { background: rgba(0, 212, 255, 0.1); }

.alert-icon { font-size: 14px; line-height: 1; }
.alert-text { flex: 1; letter-spacing: 0.3px; }
.alert-loc { color: var(--ink-muted); margin-left: 2px; }

.alert-dismiss {
  background: transparent;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 11px;
  padding: 0 2px;
  line-height: 1;
}
.alert-dismiss:hover { color: var(--neon-primary); }

/* Severity accents via the left border. */
.alert-success { border-left-color: var(--success); }
.alert-danger  { border-left-color: var(--danger); }
.alert-warning { border-left-color: var(--warning); }
.alert-info    { border-left-color: var(--neon-primary); }

@keyframes alert-in {
  from { transform: translateX(-12px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* Sticky server-unreachable banner: a slow danger pulse signals the client is
   still retrying. Non-interactive (no dismiss / no fly-to), so default cursor. */
.alert-offline {
  cursor: default;
  border-color: var(--danger);
  animation: alert-in 200ms ease-out, alert-offline-pulse 1.6s ease-in-out infinite;
}
.alert-offline .alert-icon { color: var(--danger); }

/* Animated trailing dots so "reconnecting" reads as live, not stuck. */
.alert-ellipsis::after {
  content: '';
  animation: alert-ellipsis 1.4s steps(4, end) infinite;
}

@keyframes alert-offline-pulse {
  0%, 100% { border-left-color: var(--danger); background: rgba(13, 17, 23, 0.94); }
  50%      { border-left-color: var(--warning); background: rgba(255, 51, 68, 0.12); }
}
@keyframes alert-ellipsis {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
}

@media (prefers-reduced-motion: reduce) {
  .alert-item { animation: none; }
  .alert-offline { animation: none; }
  .alert-ellipsis::after { content: '...'; animation: none; }
}

/* Phones: the advisor feed spans most of the width so messages read on one or
   two lines instead of being squeezed into a 40vw column. */
@media (max-width: 640px) {
  #v2-alert-feed {
    left: 8px;
    right: 8px;
    top: calc(70px + env(safe-area-inset-top, 0px));
    width: auto;
    max-width: none;
  }
}