@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  color-scheme: dark;

  /* Height of the impersonation banner. App.tsx flips this between 0 and
     1.75rem depending on whether the current session is impersonating. The
     fixed top nav and the route container's top padding both read it so the
     banner doesn't collide with chrome or force the whole page to scroll. */
  --impersonation-h: 0px;

  /* Solid colors live as space-separated RGB triplets so tailwind's opacity
     modifiers (bg-danger/20 etc.) can inject <alpha-value>. The legacy
     --color-* hex-style vars are derived from them — raw CSS/chart code keeps
     reading var(--color-x) and stays theme-aware. */
  --color-bg-rgb: 20 20 20;
  --color-surface-rgb: 28 28 30;
  --color-surface-2-rgb: 35 35 37;
  --color-surface-3-rgb: 43 43 46;
  --color-fg-rgb: 245 245 246;
  --color-muted-rgb: 138 138 143;
  --color-subtle-rgb: 90 90 96;
  --color-accent-rgb: 72 90 226;
  --color-accent-ink-rgb: 255 255 255;
  --color-accent-deep-rgb: 49 64 184;
  --color-danger-rgb: 239 90 111;
  --color-warning-rgb: 231 177 90;
  --color-success-rgb: 65 209 149;

  --color-bg: rgb(var(--color-bg-rgb));
  --color-surface: rgb(var(--color-surface-rgb));
  --color-surface-2: rgb(var(--color-surface-2-rgb));
  --color-surface-3: rgb(var(--color-surface-3-rgb));
  --color-border: rgba(255, 255, 255, 0.07);
  --color-border-strong: rgba(255, 255, 255, 0.12);

  --color-fg: rgb(var(--color-fg-rgb));
  --color-muted: rgb(var(--color-muted-rgb));
  --color-subtle: rgb(var(--color-subtle-rgb));

  --color-accent: rgb(var(--color-accent-rgb));
  --color-accent-ink: rgb(var(--color-accent-ink-rgb));
  --color-accent-soft: rgba(72, 90, 226, 0.14);
  --color-accent-deep: rgb(var(--color-accent-deep-rgb));

  --color-danger: rgb(var(--color-danger-rgb));
  --color-warning: rgb(var(--color-warning-rgb));
  --color-success: rgb(var(--color-success-rgb));

  --dot-color: rgba(245, 245, 246, 0.05);
}

:root[data-theme="light"] {
  color-scheme: light;

  /* Only the RGB triplets need overriding — the derived --color-* vars at
     :root re-resolve against these at point of use. */
  --color-bg-rgb: 245 245 245;
  --color-surface-rgb: 252 252 252;
  --color-surface-2-rgb: 239 239 239;
  --color-surface-3-rgb: 230 230 230;
  --color-fg-rgb: 35 35 35;
  --color-muted-rgb: 91 94 102;
  --color-subtle-rgb: 156 159 166;
  --color-danger-rgb: 214 56 64;
  --color-warning-rgb: 184 117 3;
  --color-success-rgb: 31 143 95;

  --color-border: rgba(15, 17, 21, 0.08);
  --color-border-strong: rgba(15, 17, 21, 0.16);
  --color-accent-soft: rgba(72, 90, 226, 0.1);

  --dot-color: rgba(0, 0, 0, 0.06);
}

html,
body,
#root {
  height: 100%;
  overflow-x: clip;
}

body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--color-bg);
  color: var(--color-fg);
}

::selection {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 2px;
}

.superlog-code {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
}

.superlog-code code {
  font-family: inherit;
}

.incident-alert-card {
  opacity: 0;
  transform: translate3d(0, 44px, 0) scale(0.97);
  animation: incident-alert-cycle 5.4s ease-in-out infinite;
}

.incident-summary-card {
  opacity: 0;
  transform: translate3d(-50%, 18px, 0) scale(0.9);
  animation: incident-summary-cycle 5.4s ease-in-out infinite;
}

.severity-main-card {
  animation: severity-card-cycle 7.2s ease-in-out infinite;
}

.severity-shimmer {
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 34%,
    rgba(214, 216, 222, 0.12) 48%,
    transparent 62%,
    transparent 100%
  );
  transform: translateX(-120%);
  contain: paint;
  pointer-events: none;
  animation: severity-shimmer-cycle 7.2s ease-in-out infinite;
}

.severity-old-label {
  opacity: 1;
  animation: severity-old-label-cycle 7.2s ease-in-out infinite;
}

.severity-new-label {
  opacity: 0;
  animation: severity-new-label-cycle 7.2s ease-in-out infinite;
}

.severity-bubble {
  opacity: 0;
  animation: severity-bubble-cycle 7.2s ease-in-out infinite;
}

.severity-final-details {
  animation: severity-final-details-cycle 7.2s ease-in-out infinite;
}

.severity-bubble-one {
  left: 1.25rem;
  top: 0.75rem;
  --bubble-x: 88px;
  --bubble-y: 52px;
}

.severity-bubble-two {
  right: 0.75rem;
  top: 1.5rem;
  --bubble-x: -78px;
  --bubble-y: 42px;
}

.severity-bubble-three {
  left: 50%;
  bottom: 0.75rem;
  transform: translateX(-50%);
  --bubble-x: -8px;
  --bubble-y: -46px;
}

.mcp-thinking-shimmer {
  background: linear-gradient(90deg, #6f6a64, #d7d2ca, #6f6a64);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: mcp-thinking-shimmer 2.4s ease-in-out infinite;
}

.mcp-prompt-appear {
  opacity: 0;
  animation: mcp-prompt-appear 10.2s ease-in-out infinite;
}

.mcp-search-line {
  opacity: 0;
  animation: mcp-search-line-cycle 10.2s ease-in-out infinite;
}

.mcp-searching-text {
  opacity: 0;
  animation: mcp-searching-text-cycle 10.2s ease-in-out infinite;
}

.mcp-searched-text {
  opacity: 0;
  animation: mcp-searched-text-cycle 10.2s ease-in-out infinite;
}

.mcp-created-appear {
  opacity: 0;
  animation: mcp-created-appear 10.2s ease-in-out infinite;
}

.mcp-reply-appear {
  opacity: 0;
  animation: mcp-reply-appear 10.2s ease-in-out infinite;
}

.mcp-reply-type {
  width: 0;
}

.mcp-reply-type-one {
  animation: mcp-reply-type-one 10.2s steps(68, end) infinite;
}

.mcp-reply-type-two {
  animation: mcp-reply-type-two 10.2s steps(34, end) infinite;
}

@keyframes incident-alert-cycle {
  0%,
  8% {
    opacity: 0;
    transform: translate3d(0, 44px, 0) scale(0.97);
  }

  16%,
  54% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  68%,
  100% {
    opacity: 0;
    transform: translate3d(0, -10px, 0) scale(0.84);
  }
}

@keyframes incident-summary-cycle {
  0%,
  58% {
    opacity: 0;
    transform: translate3d(-50%, 18px, 0) scale(0.9);
  }

  72%,
  92% {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate3d(-50%, 0, 0) scale(1);
  }
}

@keyframes severity-card-cycle {
  0%,
  42% {
    transform: translate3d(-50%, 0, 0) scale(1);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
  }

  48%,
  88% {
    transform: translate3d(-50%, 0, 0) scale(1.02);
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(229, 72, 77, 0.28);
  }

  96%,
  100% {
    transform: translate3d(-50%, 0, 0) scale(1);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
  }
}

@keyframes severity-shimmer-cycle {
  0%,
  30% {
    opacity: 0;
    transform: translateX(-120%);
  }

  36% {
    opacity: 1;
  }

  46% {
    opacity: 1;
    transform: translateX(120%);
  }

  54%,
  100% {
    opacity: 0;
    transform: translateX(120%);
  }
}

@keyframes severity-old-label-cycle {
  0%,
  36% {
    opacity: 1;
    transform: translateY(0);
  }

  46%,
  94% {
    opacity: 0;
    transform: translateY(-6px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes severity-new-label-cycle {
  0%,
  38% {
    opacity: 0;
    transform: translateY(6px);
  }

  48%,
  90% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes severity-bubble-cycle {
  0%,
  14% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.94);
  }

  24% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  42%,
  100% {
    opacity: 0;
    transform: translate3d(var(--bubble-x), var(--bubble-y), 0) scale(0.66);
  }
}

@keyframes severity-final-details-cycle {
  0%,
  40% {
    opacity: 0;
    transform: translateY(5px);
  }

  48%,
  90% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(5px);
  }
}

@keyframes mcp-thinking-shimmer {
  0% {
    background-position: 180% 0;
  }

  100% {
    background-position: -80% 0;
  }
}

@keyframes mcp-prompt-appear {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  12%,
  94% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes mcp-search-line-cycle {
  0%,
  16% {
    opacity: 0;
    transform: translateY(8px);
  }

  22%,
  94% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes mcp-searching-text-cycle {
  0%,
  20% {
    opacity: 0;
  }

  24%,
  38% {
    opacity: 1;
  }

  44%,
  100% {
    opacity: 0;
  }
}

@keyframes mcp-searched-text-cycle {
  0%,
  38% {
    opacity: 0;
  }

  46%,
  94% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes mcp-created-appear {
  0%,
  48% {
    opacity: 0;
    transform: translateY(8px);
  }

  56%,
  94% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes mcp-reply-appear {
  0%,
  58% {
    opacity: 0;
    transform: translateY(8px);
  }

  64%,
  94% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes mcp-reply-type-one {
  0%,
  58% {
    width: 0;
  }

  70%,
  94% {
    width: 100%;
  }

  100% {
    width: 0;
  }
}

@keyframes mcp-reply-type-two {
  0%,
  68% {
    width: 0;
  }

  78%,
  94% {
    width: 100%;
  }

  100% {
    width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .incident-alert-card,
  .incident-summary-card,
  .severity-main-card,
  .severity-shimmer,
  .severity-old-label,
  .severity-new-label,
  .severity-bubble,
  .severity-final-details,
  .mcp-thinking-shimmer,
  .mcp-prompt-appear,
  .mcp-search-line,
  .mcp-searching-text,
  .mcp-searched-text,
  .mcp-created-appear,
  .mcp-reply-appear,
  .mcp-reply-type-one,
  .mcp-reply-type-two {
    animation: none;
  }

  .incident-alert-card,
  .incident-summary-card {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }

  .incident-alert-card {
    opacity: 0;
  }

  .severity-main-card {
    transform: translate3d(-50%, 0, 0) scale(1);
  }

  .severity-shimmer,
  .severity-old-label,
  .severity-bubble {
    opacity: 0;
  }

  .severity-new-label {
    opacity: 1;
    transform: translateY(0);
  }

  .severity-final-details {
    opacity: 1;
    transform: translateY(0);
  }

  .mcp-thinking-shimmer {
    color: var(--color-muted);
  }

  .mcp-reply-type {
    width: 100%;
  }

  .mcp-prompt-appear,
  .mcp-search-line,
  .mcp-searched-text,
  .mcp-created-appear,
  .mcp-reply-appear {
    opacity: 1;
    transform: translateY(0);
  }

  .mcp-searching-text {
    opacity: 0;
  }
}
