/* ============================================================
   COMMS PREVIEW TOAST
   Non-intrusive bottom-center stack that previews new alliance /
   direct / leader messages. Layer does not capture pointer events;
   only inner controls do. Newest toast sits on top of the stack.
   ============================================================ */

.comms-preview-toast-layer {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottom-nav-height, 56px) + var(--ticker-height, 22px) + 14px);
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: auto;
  max-width: min(520px, calc(100vw - 24px));
}

.comms-preview-toast {
  pointer-events: none;

  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-width: 260px;
  max-width: min(520px, calc(100vw - 24px));
  width: 100%;
  box-sizing: border-box;

  background: rgba(10, 14, 24, 0.94);
  border: 1px solid rgba(0, 212, 255, 0.35);
  border-radius: 10px;
  box-shadow: 0 8px 24px var(--scrim-50), 0 0 0 1px rgba(0, 212, 255, 0.08);
  color: #dfe7f5;
  font-size: 0.82rem;
  line-height: 1.3;
}

.comms-preview-toast__body,
.comms-preview-toast__go,
.comms-preview-toast__close {
  pointer-events: auto;
}

.comms-preview-toast__body {
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  outline: none;
  border-radius: 4px;
}

.comms-preview-toast__body:focus-visible {
  outline: 1px solid rgba(0, 212, 255, 0.6);
  outline-offset: 2px;
}

.comms-preview-toast__icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 212, 255, 0.1);
  color: #7ee9ff;
}

.comms-preview-toast__icon svg {
  width: 16px;
  height: 16px;
}

.comms-preview-toast[data-channel="alliance"] .comms-preview-toast__icon {
  background: rgba(255, 210, 120, 0.12);
  color: #ffd478;
}
.comms-preview-toast[data-channel="leader"] .comms-preview-toast__icon {
  background: rgba(190, 140, 255, 0.14);
  color: #c89cff;
}

.comms-preview-toast__meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.comms-preview-toast__from {
  font-weight: 600;
  color: #e8eef8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.comms-preview-toast__channel {
  font-size: 0.72rem;
  color: rgba(200, 215, 235, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.comms-preview-toast__snippet {
  color: rgba(220, 230, 245, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.comms-preview-toast__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.comms-preview-toast__go {
  background: rgba(0, 212, 255, 0.14);
  border: 1px solid rgba(0, 212, 255, 0.4);
  color: #7ee9ff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.comms-preview-toast__go:hover {
  background: rgba(0, 212, 255, 0.24);
  color: #ffffff;
  border-color: rgba(0, 212, 255, 0.7);
}

.comms-preview-toast__close {
  background: transparent;
  border: none;
  color: rgba(220, 230, 245, 0.6);
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 4px;
}
.comms-preview-toast__close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

/* Entrance / exit animate opacity only; transform stays owned by
   the base rule so the mobile override (no centering translate)
   doesn't fight the animation. */
.comms-preview-toast--enter {
  animation: comms-preview-toast-in 200ms ease-out;
}
.comms-preview-toast--leaving {
  animation: comms-preview-toast-out 160ms ease-in forwards;
}

@keyframes comms-preview-toast-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes comms-preview-toast-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@media (max-width: 600px) {
  .comms-preview-toast-layer {
    left: 12px;
    right: 12px;
    transform: none;
    max-width: none;
    align-items: stretch;
  }
  .comms-preview-toast {
    max-width: none;
    min-width: 0;
  }
  .comms-preview-toast__from { max-width: 120px; }
}