/* ==========================================================================
   cass-toasts.css — toast surface owned by Cass dispatcher
   --------------------------------------------------------------------------
   Sits next to the existing #toasts host (top-right) but uses its own
   stacking container so we don't collide with app.js toast() calls. Cyan
   accent, dark navy background, severity variants. iPad-friendly: 44px
   minimum tap targets on the close button, slide-in is GPU-accelerated.

   This file is loaded after styles.css via the Caddy /srv/ static mount.
   ========================================================================== */

.cass-toasts {
  position: fixed;
  top: 88px;                 /* below topbar + cmdbar */
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
  max-width: min(420px, calc(100vw - 32px));
  pointer-events: none;       /* host transparent — children re-enable */
}

.cass-toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  min-height: 56px;
  background: #0f172a;
  color: #e2e8f0;
  border: 1px solid rgba(0, 212, 255, 0.35);
  border-left: 4px solid #00D4FF;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.45),
              0 0 0 1px rgba(0, 212, 255, 0.08) inset;
  font: 500 14px/1.4 "Inter", system-ui, sans-serif;
  letter-spacing: -0.01em;
  transform: translateX(0);
  opacity: 1;
  animation: cass-toast-in 280ms cubic-bezier(.2,.9,.3,1.1);
  will-change: transform, opacity;
}

.cass-toast.is-leaving {
  animation: cass-toast-out 280ms ease-in forwards;
}

.cass-toast__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 212, 255, 0.15);
  color: #00D4FF;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}

.cass-toast__msg {
  color: #f8fafc;
  word-break: break-word;
}

.cass-toast__close {
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  transition: background 120ms ease, color 120ms ease;
  /* iPad: keep tap target generous */
  padding: 0;
}
.cass-toast__close:hover,
.cass-toast__close:focus-visible {
  color: #f1f5f9;
  background: rgba(148, 163, 184, 0.12);
  outline: none;
}

/* ---- severity variants ---- */
.cass-toast--success {
  border-left-color: #00D4FF;
  border-color: rgba(0, 212, 255, 0.35);
}
.cass-toast--success .cass-toast__check {
  background: rgba(0, 212, 255, 0.18);
  color: #00D4FF;
}

.cass-toast--info {
  border-left-color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.35);
}
.cass-toast--info .cass-toast__check {
  background: rgba(96, 165, 250, 0.18);
  color: #93c5fd;
}

.cass-toast--confirm {
  border-left-color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.4);
  background: #1c1917;
  /* gentle pulse to draw eye to the awaiting-confirm state */
  animation: cass-toast-in 280ms cubic-bezier(.2,.9,.3,1.1),
             cass-toast-pulse 2.6s ease-in-out 280ms infinite;
}
.cass-toast--confirm .cass-toast__check {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

.cass-toast--error {
  border-left-color: #ef4444;
  border-color: rgba(239, 68, 68, 0.4);
  background: #1f1011;
}
.cass-toast--error .cass-toast__check {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

/* ---- animations ---- */
@keyframes cass-toast-in {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes cass-toast-out {
  to   { transform: translateX(120%); opacity: 0; }
}
@keyframes cass-toast-pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(2, 6, 23, 0.45), 0 0 0 0 rgba(245, 158, 11, 0.35); }
  50%      { box-shadow: 0 8px 24px rgba(2, 6, 23, 0.45), 0 0 0 6px rgba(245, 158, 11, 0); }
}

/* ---- reduced motion: drop slide + pulse ---- */
@media (prefers-reduced-motion: reduce) {
  .cass-toast,
  .cass-toast--confirm,
  .cass-toast.is-leaving {
    animation: none;
    transform: none;
  }
}

/* ---- mobile / iPad portrait: shrink padding, stack to full width ---- */
@media (max-width: 640px) {
  .cass-toasts {
    top: auto;
    bottom: 88px;          /* above the cass-orb */
    right: 12px;
    left: 12px;
    max-width: none;
  }
  .cass-toast {
    min-height: 64px;
  }
}

/* ==========================================================================
   Cass conversation-drawer log rows (used by dispatcher logToDrawer)
   ========================================================================== */
.cass-log-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  font: 400 13px/1.5 "Inter", system-ui, sans-serif;
}
.cass-log-row__role {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  align-self: start;
  padding-top: 2px;
}
.cass-log-row--user .cass-log-row__role { color: #00D4FF; }
.cass-log-row--cass .cass-log-row__role { color: #fbbf24; }
.cass-log-row__text {
  color: #e2e8f0;
  word-break: break-word;
}
.cass-log-row__meta {
  grid-column: 2;
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}