/*
 * =========================================
 * ECHO ROOM - Комната Эха (Редизайн 2026)
 * =========================================
 */

.echo-room {
  position: relative;
  background: var(--bg-primary);
  padding: 0;
  overflow: hidden;
}

/* Ambient gradient overlay */
.echo-room::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, var(--bg-surface-hover) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  opacity: 40%;
}

.vibe-shift .echo-room::before {
  background: radial-gradient(circle at 50% 50%, oklch(from var(--bg-surface-hover) l c h) 0%, transparent 60%);
  animation: aurora-borealis 10s ease-in-out infinite;
  opacity: 60%;
}

@keyframes aurora-borealis {
  0%, 100% { opacity: 50%; transform: scale(1); }
  50% { opacity: 80%; transform: scale(1.1); }
}

#echo-radar {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 25%;
  pointer-events: none;
}

.echo-room__ui {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  height: 100%;
  pointer-events: none;
}

/* =========================================
   ECHO ROOM HEADER
   ========================================= */
.echo-room__header {
  padding: var(--space-3) var(--container-pad-mobile);
  padding-top: calc(var(--space-3) + var(--safe-top));
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  pointer-events: auto;
  background: transparent;
  position: relative;
}

.echo-room__header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, oklch(50% 0.02 265deg / 8%), transparent);
  pointer-events: none;
}

.search-status {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  animation: search-status-in var(--duration-slow) var(--ease-out-quart);
}

.search-status__copy {
  min-width: 0;
}

.search-status__eyebrow {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  line-height: var(--line-height-tight);
  text-transform: uppercase;
}

.search-status__line {
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-status__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

@keyframes search-status-in {
  from { opacity: 0%; transform: translateY(4px); }
  to { opacity: 100%; transform: translateY(0); }
}

body.vibe-shift .search-status__line,
body.vibe-shift .search-status__eyebrow {
  font-family: var(--font-vibe);
  text-transform: uppercase;
}

body.vibe-shift .search-status {
  border-radius: 0;
}

@media (width < 560px) {
  .search-status { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
  .search-status__actions { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .search-status { animation: none; }
}

@media (width >= 768px) {
  .echo-room__header {
    padding: var(--space-3) var(--container-pad-tablet);
    padding-top: calc(var(--space-3) + var(--safe-top));
  }
}

@media (width >= 1200px) {
  .echo-room__header {
    padding: var(--space-3) var(--container-pad-desktop);
    padding-top: calc(var(--space-3) + var(--safe-top));
  }
}

.echo-room__dev-controls {
  display: flex;
  gap: var(--space-1);
}

/* =========================================
   ECHO ROOM COOLDOWN
   ========================================= */
.echo-room__cooldown {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
  padding: var(--space-1) var(--space-3);
  background: var(--bg-secondary);
  border: var(--border-default);
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-sm);
  letter-spacing: var(--tracking-tight);
}

.vibe-shift .echo-room__cooldown {
  background: var(--bg-surface);
  border-color: var(--border-default);
  border-radius: 0;
  box-shadow: var(--shadow-xs);
  animation: cooldown-flicker 3s ease-in-out infinite;
}

@keyframes cooldown-flicker {
  0%, 100% { opacity: 100%; }
  50% { opacity: 95%; }
  51% { opacity: 100%; }
  52% { opacity: 98%; }
}

/* =========================================
   ECHO ROOM DROPS SPACE
   ========================================= */
.echo-room__drops-space {
  flex: 1;
  position: relative;
  overflow: hidden;
  pointer-events: auto;
}

/* =========================================
   ECHO DROP
   ========================================= */
.echo-drop {
  position: absolute;
  left: var(--drop-x, 50%);
  padding: 10px 18px;
  background: var(--bg-elevated);
  border: 1px solid oklch(88% 0.008 260deg);
  border-radius: var(--radius-sm);
  pointer-events: auto;
  cursor: pointer;
  z-index: 10;
  transition: all var(--duration-normal) var(--ease-out-quart);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(400px, 90vw);
  user-select: none;
  -webkit-user-select: none;

  /* Randomization vars (fallback) */
  --drift-x: 0px;
  --rotation: 0deg;
  --delay: 0ms;

  /* Base animation - main flight */
  animation:
    float-up 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
    float-wobble 1.5s ease-in-out infinite;
  animation-delay: var(--delay);

  /* Quiet Luxury: глубокий многослойный shading */
  box-shadow:
    0 1px 0 oklch(99% 0.002 260deg),                /* top highlight */
    0 -1px 0 oklch(85% 0.01 260deg),                /* bottom shadow */
    inset 0 1px 0 oklch(99.5% 0.001 260deg / 60%),   /* inner top glow */
    inset 0 -1px 1px oklch(82% 0.015 260deg / 25%),  /* inner bottom shadow */
    0 6px 20px oklch(15% 0.02 260deg / 12%),         /* ambient occlusion */
    0 2px 6px oklch(15% 0.02 260deg / 8%);          /* contact shadow */
}

/* Specular highlight — фрезерованный верх */
.echo-drop::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45%;
  background: linear-gradient(
    180deg,
    oklch(100% 0 0deg / 22%) 0%,
    oklch(100% 0 0deg / 8%) 60%,
    transparent 100%
  );
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  pointer-events: none;
  opacity: 100%;
}

/* Ambient occlusion — глубина в нижней части */
.echo-drop::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 1px;
  right: 1px;
  height: 35%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    oklch(88% 0.012 260deg / 18%) 100%
  );
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  pointer-events: none;
  z-index: 0;
}

.echo-drop:hover {
  border-color: oklch(82% 0.012 260deg);
  box-shadow:
    0 1px 0 oklch(99% 0.002 260deg),
    0 -1px 0 oklch(82% 0.015 260deg),
    inset 0 1px 0 oklch(99.5% 0.001 260deg / 60%),
    inset 0 -1px 1px oklch(80% 0.018 260deg / 28%),
    0 10px 30px oklch(15% 0.02 260deg / 18%),
    0 4px 10px oklch(15% 0.02 260deg / 12%);
  transform: translateY(-2px);
}

.echo-drop:active {
  transform: scale(0.94) translateY(0) !important;
  box-shadow:
    0 1px 0 oklch(99% 0.002 260deg),
    inset 0 2px 4px oklch(82% 0.015 260deg / 35%);
}

.echo-drop--tapped {
  background: oklch(from var(--accent-primary) calc(l + 8%) c h);
  border-color: var(--accent-primary);
  pointer-events: none;
  animation: echo-tapped 0.5s var(--spring-md);
  box-shadow:
    0 0 0 1px var(--accent-primary),
    0 0 20px oklch(from var(--accent-primary) l c h / 45%),
    0 0 40px oklch(from var(--accent-primary) l c h / 25%),
    inset 0 1px 0 oklch(99% 0.002 260deg / 40%);
}

@keyframes echo-tapped {
  0% { transform: scale(1); }
  35% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.echo-drop--ghost {
  opacity: 25%;
  border-style: dashed;
  border-color: oklch(82% 0.01 260deg);
  pointer-events: none;
  background: oklch(96% 0.008 260deg);
  box-shadow: none;
  animation: float-ghost 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: var(--delay);
}

@keyframes float-ghost {
  0% { opacity: 0%; transform: translateY(72px); }
  12% { opacity: 25%; transform: translateY(0); }
  85% { opacity: 15%; }
  100% { opacity: 0%; transform: translateY(-280px); }
}

.echo-drop__phrase {
  position: relative;
  z-index: 1;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: 0.008em;
  text-shadow: 0 1px 0 oklch(100% 0 0deg / 40%);
}

.echo-drop__tag {
  position: relative;
  z-index: 1;
  font-size: var(--font-size-sm);
}

/* =========================================
   VIBE SHIFT ECHO DROP - Aggressive glitched flight
   ========================================= */
.vibe-shift .echo-drop {
  background: oklch(12% 0.015 260deg);
  border-color: oklch(20% 0.02 260deg);
  border-radius: 0;
  color: oklch(90% 0.01 160deg);
  box-shadow:
    0 0 0 1px oklch(75% 0.2 130deg / 8%),
    0 4px 12px oklch(0% 0 0deg / 60%);
  position: relative;

  /* Grain texture overlay */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(/%23noise)' opacity='0.08'/%3E%3C/svg%3E");

  /* Aggressive glitched animation in vibe */
  animation:
    float-up-vibe 2.75s cubic-bezier(0.05, 0.7, 0.1, 1) forwards,
    float-wobble-vibe 0.15s steps(4) infinite;
  animation-delay: var(--delay);
}

/* Chromatic aberration border glow — агрессивный Void Noise */
.vibe-shift .echo-drop::before {
  content: '';
  position: absolute;
  inset: -4px;
  background: transparent;
  border: 1px solid oklch(88% 0.26 130deg / 25%);
  z-index: -1;
  animation: echo-border-glitch 3s ease-in-out infinite;
}

@keyframes echo-border-glitch {
  0%, 100% { transform: translate(0, 0); opacity: 25%; }
  25% { transform: translate(-1px, 0); opacity: 45%; }
  27% { transform: translate(1px, 0); opacity: 35%; }
  50% { transform: translate(0, 1px); opacity: 20%; }
  55% { transform: translate(0, -1px); opacity: 40%; }
}

/* Specular highlight disabled в Vibe Shift */
.vibe-shift .echo-drop::after {
  display: none;
}

/* AO disabled в Vibe Shift */
.vibe-shift .echo-drop::before {
  display: none;
}

@keyframes float-up-vibe {
  0% {
    opacity: 0%;
    transform: translateY(72px) translateX(0) skewX(0deg) scale(0.88);
  }

  10% {
    opacity: 100%;
    transform: translateY(0) translateX(calc(var(--drift-x) * 0.15)) skewX(-0.5deg) scale(1);
  }

  25% {
    transform: translateY(-50px) translateX(calc(var(--drift-x) * 0.4)) skewX(0deg) scale(1.02);
  }

  50% {
    opacity: 90%;
    transform: translateY(-150px) translateX(calc(var(--drift-x) * 0.7)) skewX(0.3deg) scale(1);
  }

  80% {
    opacity: 40%;
  }

  100% {
    opacity: 0%;
    transform: translateY(-280px) translateX(var(--drift-x)) skewX(-0.2deg) scale(0.9);
  }
}

/* Jittery wobble for vibe - adds "digital instability" */
@keyframes float-wobble-vibe {
  0%, 100% { margin-left: 0; }
  25% { margin-left: -1px; }
  50% { margin-left: 2px; }
  75% { margin-left: -1px; }
}

.vibe-shift .echo-drop:hover {
  box-shadow:
    0 0 0 1px oklch(88% 0.26 130deg / 35%),
    0 0 20px oklch(88% 0.26 130deg / 20%);
  animation: echo-hover-glitch 0.25s var(--spring-md);
}

@keyframes echo-hover-glitch {
  0% { transform: translate(0); filter: none; }
  20% { transform: translate(-1px, 0); filter: url("#chromatic-aberration"); }
  40% { transform: translate(1px, 0); filter: none; }
  60% { transform: translate(-0.5px, 0); filter: url("#chromatic-aberration"); }
  80% { transform: translate(0.5px, 0); }
  100% { transform: translate(0); filter: none; }
}

.vibe-shift .echo-drop:active {
  box-shadow:
    0 0 0 2px oklch(88% 0.26 130deg / 50%),
    0 0 30px oklch(88% 0.26 130deg / 30%);
}

.vibe-shift .echo-drop--tapped {
  background: oklch(18% 0.04 260deg);
  border-color: oklch(75% 0.2 130deg);
  box-shadow:
    0 0 0 2px oklch(75% 0.2 130deg / 60%),
    0 0 40px oklch(75% 0.2 130deg / 40%);
}

.vibe-shift .echo-drop--ghost {
  opacity: 25%;
  border-color: oklch(30% 0.025 260deg);
  background: oklch(15% 0.02 260deg);
  animation: float-ghost-vibe 2.75s cubic-bezier(0.05, 0.7, 0.1, 1) forwards;
  animation-delay: var(--delay);
}

@keyframes float-ghost-vibe {
  0% { opacity: 0%; transform: translateY(72px); }
  10% { opacity: 25%; transform: translateY(0); }
  80% { opacity: 15%; }
  100% { opacity: 0%; transform: translateY(-280px); }
}

.vibe-shift .echo-drop__phrase {
  color: oklch(90% 0.01 160deg);
  text-shadow: none;
  letter-spacing: 0.02em;
}

/* =========================================
   FLOAT UP ANIMATION - Premium layered
   ========================================= */
@keyframes float-up {
  0% {
    opacity: 0%;
    transform: translateY(72px) translateX(0) rotate(var(--rotation)) scale(0.92);
  }

  8% {
    opacity: 85%;
    transform: translateY(12px) translateX(calc(var(--drift-x) * 0.2)) rotate(calc(var(--rotation) * 0.5)) scale(0.98);
  }

  15% {
    opacity: 100%;
    transform: translateY(-8px) translateX(calc(var(--drift-x) * 0.4)) rotate(calc(var(--rotation) * 0.2)) scale(1.02);
  }

  30% {
    transform: translateY(-60px) translateX(calc(var(--drift-x) * 0.6)) rotate(0deg) scale(1);
  }

  60% {
    opacity: 85%;
    transform: translateY(-160px) translateX(calc(var(--drift-x) * 0.8)) rotate(0deg) scale(0.98);
  }

  85% {
    opacity: 50%;
  }

  100% {
    opacity: 0%;
    transform: translateY(-280px) translateX(var(--drift-x)) rotate(0deg) scale(0.92);
  }
}

/* Micro-wobble layer - adds "air" and complexity */
@keyframes float-wobble {
  0%, 100% {
    margin-left: 0;
  }

  25% {
    margin-left: 1px;
  }

  75% {
    margin-left: -1px;
  }
}

/* =========================================
   ECHO ROOM INPUT CONTAINER
   ========================================= */
.echo-room__input-container {
  z-index: 10;
  padding: var(--space-3) var(--container-pad-mobile);
  padding-bottom: calc(var(--space-3) + var(--safe-bottom));
  background: var(--bg-secondary);
  border-top: var(--border-subtle);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: background var(--duration-normal) var(--ease-out-quart), border-color var(--duration-normal) var(--ease-out-quart);
  box-shadow: 0 -1px 0 var(--ao-outer);
  position: relative;
}

.echo-room__input-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, oklch(50% 0.02 265deg / 10%), transparent);
  pointer-events: none;
}

@media (width >= 768px) {
  .echo-room__input-container {
    padding: var(--space-3) var(--container-pad-tablet);
    padding-bottom: calc(var(--space-3) + var(--safe-bottom));
  }
}

@media (width >= 1200px) {
  .echo-room__input-container {
    padding: var(--space-3) var(--container-pad-desktop);
    padding-bottom: calc(var(--space-3) + var(--safe-bottom));
  }
}

/* =========================================
   TAG GROUP
   ========================================= */
.tag-group {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-1);
  scrollbar-width: none;
}

.tag-group::-webkit-scrollbar {
  display: none;
}

/* Compact chips in tag group */
.tag-group {
  gap: var(--space-1);
}

.tag-group .chip {
  padding: var(--space-2) var(--space-2);
  flex-shrink: 1;
  min-width: 0;
  max-width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
}

.tag-group .chip--active {
  background: var(--accent-primary);
  color: var(--accent-on-accent);
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-md);
}

.tag-group .chip--active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, oklch(100% 0 0deg / 12%) 0%, transparent 100%);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  pointer-events: none;
}

.chip__icon {
  font-size: 1.25em;
  line-height: 1;
  flex-shrink: 0;
}

.chip__text {
  font-size: 10px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

@media (width >= 768px) {
  .tag-group .chip {
    max-width: 100px;
  }
}

/* =========================================
   INPUT ROW
   ========================================= */
.input-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

/* =========================================
   ECHO ROOM FLASH
   ========================================= */
.echo-room__flash {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: var(--space-3) var(--space-6);
  background: var(--accent-primary);
  color: var(--accent-on-accent);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: var(--font-size-base);
  animation: flash-in-out 1s var(--ease-out-quint) forwards;
  z-index: 100;
  letter-spacing: var(--tracking-tight);
  box-shadow: var(--shadow-lg), var(--glow-lg);
}

.echo-room__flash::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, oklch(100% 0 0deg / 18%) 0%, oklch(100% 0 0deg / 6%) 50%, transparent 100%);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  pointer-events: none;
}

.vibe-shift .echo-room__flash {
  border-radius: 0;
  background: var(--bg-surface);
  color: var(--accent-primary);
  border: 2px solid var(--accent-primary);
  text-transform: uppercase;
  font-family: var(--font-vibe);
  box-shadow: var(--glow-lg);
  animation: vibe-flash 1s var(--spring-md) forwards;
}

/* Chromatic aberration effect */
.vibe-shift .echo-room__flash::before {
  content: '';
  position: absolute;
  inset: -4px;
  background: transparent;
  border: 1px solid oklch(88% 0.26 130deg / 40%);
  z-index: -1;
  animation: flash-border-glitch 0.2s infinite alternate;
}

@keyframes flash-border-glitch {
  0% { transform: translate(0, 0); }
  100% { transform: translate(2px, -2px); }
}

@keyframes vibe-flash {
  0% {
    opacity: 0%;
    transform: translate(-50%, -50%) scale(0.92);
  }

  15% {
    opacity: 100%;
    transform: translate(-50%, -50%) scale(1.05);
  }

  85% {
    opacity: 100%;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0%;
    transform: translate(-50%, -50%) scale(0.96);
  }
}

@keyframes flash-in-out {
  0% {
    opacity: 0%;
    transform: translate(-50%, -50%) scale(0.95);
  }

  15% {
    opacity: 100%;
    transform: translate(-50%, -50%) scale(1);
  }

  85% {
    opacity: 100%;
  }

  100% {
    opacity: 0%;
    transform: translate(-50%, -50%) scale(0.98);
  }
}

/* =========================================
   ECHO DROP MOOD-BASED BEHAVIORS
   Каждое настроение — уникальная физика полёта
   ========================================= */

/* =========================================
   ANXIETY (ТРЕВОГА) — нервное, дёрганое
   Быстрый взлёт, вибрация, резкий easing
   ========================================= */
.echo-drop--anxiety {
  border-color: oklch(from var(--echo-tag-anxiety) l c h / 50%);

  /* Nervous fast animation */
  animation:
    float-up-anxiety 2.3s cubic-bezier(0.3, 0.01, 0.7, 1) forwards,
    float-wobble-anxiety 0.08s steps(2) infinite;
  animation-delay: var(--delay);
}

@keyframes float-up-anxiety {
  0% {
    opacity: 0%;
    transform: translateY(60px) translateX(0) rotate(var(--rotation)) scale(0.9);
  }

  6% {
    opacity: 100%;
    transform: translateY(-5px) translateX(calc(var(--drift-x) * 0.1)) rotate(calc(var(--rotation) * 0.3)) scale(1.03);
  }

  18% {
    transform: translateY(-40px) translateX(calc(var(--drift-x) * 0.3)) rotate(calc(var(--rotation) * 0.1)) scale(1);
  }

  40% {
    opacity: 90%;
    transform: translateY(-120px) translateX(calc(var(--drift-x) * 0.6)) rotate(0deg) scale(0.98);
  }

  70% {
    opacity: 60%;
    transform: translateY(-200px) translateX(calc(var(--drift-x) * 0.8)) rotate(0deg) scale(0.95);
  }

  100% {
    opacity: 0%;
    transform: translateY(-280px) translateX(var(--drift-x)) rotate(0deg) scale(0.9);
  }
}

/* Fast vibration wobble for anxiety */
@keyframes float-wobble-anxiety {
  0%, 100% { margin-left: 0; }
  50% { margin-left: -1px; }
}

/* =========================================
   BOREDOM (СКУКА) — медленное, ленивое
   Плавный полёт, затяжное easing, droop effect
   ========================================= */
.echo-drop--boredom {
  border-color: oklch(from var(--echo-tag-boredom) l c h / 50%);

  /* Lazy slow animation */
  animation:
    float-up-boredom 4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards,
    float-wobble-boredom 2.5s ease-in-out infinite;
  animation-delay: var(--delay);
}

@keyframes float-up-boredom {
  0% {
    opacity: 0%;
    transform: translateY(80px) translateX(0) rotate(calc(var(--rotation) * 0.5)) scale(0.94);
  }

  15% {
    opacity: 100%;
    transform: translateY(10px) translateX(calc(var(--drift-x) * 0.2)) rotate(calc(var(--rotation) * 0.3)) scale(1);
  }

  35% {
    transform: translateY(-50px) translateX(calc(var(--drift-x) * 0.4)) rotate(calc(var(--rotation) * 0.1)) scale(1);
  }

  60% {
    opacity: 85%;
    transform: translateY(-140px) translateX(calc(var(--drift-x) * 0.7)) rotate(0deg) scale(0.97);
  }

  85% {
    opacity: 50%;
  }

  100% {
    opacity: 0%;
    transform: translateY(-300px) translateX(var(--drift-x)) rotate(0deg) scale(0.94);
  }
}

/* Slow, lazy wobble - almost imperceptible */
@keyframes float-wobble-boredom {
  0%, 100% { margin-left: 0; margin-top: 0; }
  50% { margin-left: 2px; margin-top: -1px; }
}

/* =========================================
   ADVENTURE (ПРИКЛЮЧЕНИЕ) — динамичное, spiraling
   Энергичный взлёт, rotation changes, wide X drift
   ========================================= */
.echo-drop--adventure {
  border-color: oklch(from var(--echo-tag-adventure) l c h / 50%);

  /* Spiraling energetic animation */
  animation:
    float-up-adventure 2.8s cubic-bezier(0.18, 0.53, 0.32, 0.95) forwards,
    float-wobble-adventure 0.6s ease-in-out infinite;
  animation-delay: var(--delay);
}

@keyframes float-up-adventure {
  0% {
    opacity: 0%;
    transform: translateY(75px) translateX(0) rotate(calc(var(--rotation) - 8deg)) scale(0.92);
  }

  10% {
    opacity: 100%;
    transform: translateY(0) translateX(calc(var(--drift-x) * 0.15)) rotate(calc(var(--rotation) + 3deg)) scale(1.04);
  }

  25% {
    transform: translateY(-60px) translateX(calc(var(--drift-x) * 0.45)) rotate(calc(var(--rotation) - 2deg)) scale(1.01);
  }

  50% {
    opacity: 92%;
    transform: translateY(-160px) translateX(calc(var(--drift-x) * 0.75)) rotate(calc(var(--rotation) + 1deg)) scale(0.99);
  }

  75% {
    transform: translateY(-250px) translateX(calc(var(--drift-x) * 0.9)) rotate(0deg) scale(0.97);
  }

  100% {
    opacity: 0%;
    transform: translateY(-340px) translateX(var(--drift-x)) rotate(0deg) scale(0.92);
  }
}

/* Spiraling wobble - rotation-like movement */
@keyframes float-wobble-adventure {
  0% { margin-left: 0; }
  25% { margin-left: 3px; }
  50% { margin-left: 0; }
  75% { margin-left: -2px; }
  100% { margin-left: 0; }
}

/* =========================================
   PANIC (ПАНИКА) — трясётся, быстрое исчезновение
   Постоянная вибрация, red glow, исчезает быстрее среднего
   ========================================= */
.echo-drop--panic {
  border-color: var(--echo-tag-anxiety);
  border-style: solid;
  border-width: 1px;

  /* Panic animation - shake + float */
  animation:
    float-up-panic 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
    panic-shake 0.06s steps(3) infinite;
  animation-delay: var(--delay);

  /* Red glow overlay */
  box-shadow:
    0 1px 0 oklch(99% 0.002 260deg),
    0 -1px 0 oklch(85% 0.01 260deg),
    inset 0 1px 0 oklch(99.5% 0.001 260deg / 60%),
    inset 0 -1px 1px oklch(82% 0.015 260deg / 25%),
    0 6px 20px oklch(15% 0.02 260deg / 12%),
    0 2px 6px oklch(15% 0.02 260deg / 8%),
    0 0 0 1px oklch(62% 0.18 18deg / 30%),
    0 0 12px oklch(62% 0.18 18deg / 20%);
}

/* Panic float - fast fade out */
@keyframes float-up-panic {
  0% {
    opacity: 0%;
    transform: translateY(72px) translateX(0) rotate(var(--rotation)) scale(0.92);
  }

  8% {
    opacity: 100%;
    transform: translateY(12px) translateX(calc(var(--drift-x) * 0.2)) rotate(calc(var(--rotation) * 0.5)) scale(0.98);
  }

  15% {
    transform: translateY(-8px) translateX(calc(var(--drift-x) * 0.4)) rotate(calc(var(--rotation) * 0.2)) scale(1.02);
  }

  30% {
    transform: translateY(-60px) translateX(calc(var(--drift-x) * 0.6)) rotate(0deg) scale(1);
  }

  60% {
    opacity: 80%;
    transform: translateY(-140px) translateX(calc(var(--drift-x) * 0.8)) rotate(0deg) scale(0.98);
  }

  85% {
    opacity: 30%;
  }

  100% {
    /* Fades out at the end */
    opacity: 0%;
    transform: translateY(-200px) translateX(var(--drift-x)) rotate(0deg) scale(0.98);
  }
}

/* Constant intense shake for panic */
@keyframes panic-shake {
  0% { transform: translateX(0) translateX(var(--panic-x, 0)); }
  33% { transform: translateX(-2px) translateX(var(--panic-x, 0)); }
  66% { transform: translateX(2px) translateX(var(--panic-x, 0)); }
  100% { transform: translateX(0) translateX(var(--panic-x, 0)); }
}

/* =========================================
   FREEZE (ЗАМОРОЖЕННОСТЬ) — статичное, зависшее
   Почти не двигается, low opacity
   ========================================= */
.echo-drop--freeze {
  border-color: var(--echo-tag-boredom);

  /* Frozen animation - very slow, minimal movement */
  animation:
    float-up-freeze 5s cubic-bezier(0.32, 0.72, 0.48, 1) forwards;
  animation-delay: var(--delay);
}

@keyframes float-up-freeze {
  0% {
    opacity: 0%;
    transform: translateY(60px) translateX(0) scale(0.96);
  }

  20% {
    opacity: 70%;
    transform: translateY(30px) translateX(calc(var(--drift-x) * 0.1)) scale(0.98);
  }

  50% {
    opacity: 50%;
    transform: translateY(-40px) translateX(calc(var(--drift-x) * 0.3)) scale(0.96);
  }

  100% {
    opacity: 0%;
    transform: translateY(-120px) translateX(calc(var(--drift-x) * 0.4)) scale(0.94);
  }
}

/* =========================================
   SADNESS (ГРУСТЬ) — медленное опускание
   Движется вниз, а не вверх, melancoly easing
   ========================================= */
.echo-drop--sadness {
  border-color: var(--echo-tag-adventure);

  /* Sinking animation - moves DOWN instead of UP */
  animation:
    float-down-sadness 3.5s cubic-bezier(0.4, 0.0, 0.2, 1) forwards,
    float-wobble-sadness 2s ease-in-out infinite;
  animation-delay: var(--delay);
}

@keyframes float-down-sadness {
  0% {
    opacity: 0%;
    transform: translateY(-40px) translateX(0) scale(0.96);
  }

  12% {
    opacity: 90%;
    transform: translateY(-10px) translateX(calc(var(--drift-x) * 0.1)) scale(0.98);
  }

  30% {
    opacity: 80%;
    transform: translateY(30px) translateX(calc(var(--drift-x) * 0.3)) scale(1);
  }

  60% {
    opacity: 60%;
    transform: translateY(100px) translateX(calc(var(--drift-x) * 0.6)) scale(0.98);
  }

  85% {
    opacity: 30%;
  }

  100% {
    opacity: 0%;
    transform: translateY(200px) translateX(var(--drift-x)) scale(0.96);
  }
}

/* Melancholy slow wobble */
@keyframes float-wobble-sadness {
  0%, 100% { margin-left: 0; }
  50% { margin-left: 1px; margin-top: 2px; }
}

/* =========================================
   ECHO ROOM NOTIFICATIONS
   ========================================= */
.echo-room__notifications {
  position: absolute;
  bottom: calc(var(--space-3) * 2 + var(--safe-bottom));
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  pointer-events: none;
  z-index: 1000;
}

.toast--rate-limit {
  padding: var(--space-2) var(--space-4);
  background: var(--color-error);
  color: white;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: toast-in-out 3s var(--ease-out-quart) forwards;
}

@keyframes toast-in-out {
  0% { opacity: 0%; transform: translateY(20px); }
  10% { opacity: 100%; transform: translateY(0); }
  90% { opacity: 100%; transform: translateY(0); }
  100% { opacity: 0%; transform: translateY(-10px); }
}

/* =========================================
   DEV CONTROLS
   ========================================= */
.btn--compact {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  min-width: 40px;
}

/* Vibe Shift кнопки (А+, Б+) */
.btn--vibe {
  background: linear-gradient(135deg, oklch(65% 0.26 130deg), oklch(75% 0.26 150deg));
  color: oklch(15% 0.05 130deg);
  font-weight: 600;
  border: 1px solid oklch(60% 0.26 130deg);
}

.btn--vibe:hover {
  background: linear-gradient(135deg, oklch(70% 0.28 130deg), oklch(80% 0.28 150deg));
  border-color: oklch(65% 0.28 130deg);
  box-shadow: 0 0 12px oklch(65% 0.26 130deg / 50%);
}