#miniSurvey {
  position: fixed;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 9999;
}

#miniSurvey.hidden {
  display: none !important;
}

:root {
  --accent-mix-12: color-mix(in srgb, var(--accent-primary) 12%, transparent);
  --accent-mix-22: color-mix(in srgb, var(--accent-primary) 22%, transparent);
  --accent-mix-28: color-mix(in srgb, var(--accent-primary) 28%, transparent);
  --accent-mix-32: color-mix(in srgb, var(--accent-primary) 32%, transparent);
  --chip-bg: color-mix(in srgb, var(--bg-secondary) 88%, var(--text-fourthly) 3%);
  --input-bg: color-mix(in srgb, var(--bg-secondary) 85%, var(--text-fourthly) 6%);
  --input-bg-focus: color-mix(in srgb, var(--bg-secondary) 80%, var(--text-fourthly) 10%);
  --chip-active-top: color-mix(in srgb, var(--bg-septenary) 42%, transparent);
  --chip-active-bot: color-mix(in srgb, var(--bg-septenary) 14%, transparent);
  --shadow-accent: 0 8px 18px color-mix(in srgb, var(--accent-primary) 45%, transparent);
}

#miniSurvey .mini-survey__card {
  min-width: 280px;
  max-width: 360px;
  background: var(--bg-septennary);
  color: var(--text-primary);
  border-radius: 5px;
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--space-sm);
  transform: translateY(-6px) scale(.985);
  opacity: 0;
  animation: ms-pop .18s ease-out forwards;
  backdrop-filter: saturate(120%) blur(2px);
  border: 1px solid #2FBED2
}

@keyframes ms-pop {
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

#miniSurvey .ms-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
  padding: calc(var(--space-md) - 2px) var(--space-md);
  background-color: var(--bg-quindecennary);
  border-radius: 5px 5px 0 0;
  border-bottom: 1px solid #2FBED2
}

#miniSurvey .ms-title {
  font-weight: 700;
  font-size: var(--font-size-lg);
  letter-spacing: .25px;
  background: var(--text-fifthly);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--text-primary);
}

#miniSurvey #miniSurveyClose {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast), transform .06s ease;
}

#miniSurvey #miniSurveyClose:hover {
  background: var(--accent-mix-12);
  color: var(--text-primary);
}

#miniSurvey #miniSurveyClose:active {
  transform: scale(.9);
}

#miniSurvey #miniSurveyQuestion {
  font-size: var(--font-size-md);
  line-height: 1.35;
  font-weight: 600;
  color: var(--text-primary);
  padding: 0 var(--space-md);
  margin-bottom: var(--space-sm);
  overflow-wrap: break-word;
  word-break: break-word;
}

#miniSurvey #miniSurveyControls {
  display: grid;
  gap: var(--space-sm);
  padding: 0 var(--space-md);
}

#miniSurvey #miniSurveyControls.ms-grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  padding: 0 var(--space-md);
}

#miniSurvey #miniSurveyControls.ms-grid-5 {
  grid-template-columns: repeat(5, minmax(44px, 1fr));
}

#miniSurvey #miniSurveyControls.ms-text .ms-input {
  width: 100%;
  margin-inline: 0;
  resize: none;
}

.ms-chip {
  height: 36px;
  padding: 0 var(--space-sm);
  border-radius: 999px;
  border: 1px solid transparent;
  background: #2FBED2;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: box-shadow var(--transition-fast),
  background var(--transition-fast),
  transform .05s ease;
  box-shadow: 0px 1px 2px 0px #00000040;

}

.ms-chip:hover {
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--accent-primary) 65%, transparent);
}

.ms-chip:active {
  transform: translateY(1px);
}

.ms-chip.active {
  color: var(--accent-primary-hover);
  background: linear-gradient(180deg, var(--chip-active-top), var(--chip-active-bot));
  box-shadow: 0 0 12px 3px color-mix(in srgb, var(--accent-primary-hover) 80%, transparent);
}

.ms-chip.ms-chip--emoji {
  width: auto;
  min-width: 80px;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;

  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ms-chip--emoji svg {
  width: 26px;
  height: 26px;
  overflow: visible;
  display: block;
  transition: transform 0.2s ease;
}

.ms-chip--emoji.ms-chip--sad {
  background: #FF5252;
  box-shadow: 0 4px 6px rgba(255, 82, 82, 0.25);
}

.ms-chip--emoji.ms-chip--sad svg {
  fill: #FFFFFF;
}

.ms-chip--emoji.ms-chip--sad:hover {
  background: #FF1744;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 15px rgba(255, 23, 68, 0.4);
}

.ms-chip--emoji.ms-chip--sad.active {
  background: #D50000;
  box-shadow: 0 0 0 4px rgba(255, 82, 82, 0.4);
}


.ms-chip--emoji.ms-chip--neutral {
  background: #FFD600;
  box-shadow: 0 4px 6px rgba(255, 214, 0, 0.25);
}

.ms-chip--emoji.ms-chip--neutral svg {
  fill: #212121;
}

.ms-chip--emoji.ms-chip--neutral:hover {
  background: #FFEA00;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 15px rgba(255, 234, 0, 0.4);
}

.ms-chip--emoji.ms-chip--neutral.active {
  background: #FFAB00;
  box-shadow: 0 0 0 4px rgba(255, 214, 0, 0.4);
}


.ms-chip--emoji.ms-chip--happy {
  background: #00E676;
  box-shadow: 0 4px 6px rgba(0, 230, 118, 0.25);
}

.ms-chip--emoji.ms-chip--happy svg {
  fill: #004D40;
}

.ms-chip--emoji.ms-chip--happy svg {
  fill: #FFFFFF;
}

.ms-chip--emoji.ms-chip--happy:hover {
  background: #00C853;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 15px rgba(0, 200, 83, 0.4);
}

.ms-chip--emoji.ms-chip--happy.active {
  background: #00BFA5;
  box-shadow: 0 0 0 4px rgba(0, 230, 118, 0.4);
}


.ms-chip--emoji.active svg {
  transform: scale(1.2);
}

.ms-input {
  width: 100%;
  min-height: 84px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--input-bg);
  color: var(--text-primary);
  padding: 10px 12px;
  font-size: var(--font-size-sm);
  line-height: 1.45;
  outline: none;
  transition: box-shadow var(--transition-fast), background var(--transition-fast);
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--accent-primary) 40%, transparent);
}

.ms-input::placeholder {
  color: var(--text-muted);
}

.ms-input:focus {
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--accent-primary) 65%, transparent);
  background: var(--input-bg-focus);
}

#miniSurvey .mini-survey__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-top: 2px;
  padding: 0 var(--space-md) calc(var(--space-md) - 2px);
}

#miniSurvey #miniSurveySend {
  appearance: none;
  border: 0;
  height: 38px;
  padding: 0 var(--space-md);
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: .25px;
  color: var(--text-primary);
  background: linear-gradient(90deg, var(--accent-primary) 0%, var(--accent-primary-hover) 100%);
  cursor: pointer;
  box-shadow: 0px 1px 2px 0px #00000040;
  transition: transform .06s ease, box-shadow var(--transition-fast),
  opacity var(--transition-fast), filter var(--transition-fast);
}

#miniSurvey #miniSurveySend:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent-primary) 55%, transparent);
}

#miniSurvey #miniSurveySend:active {
  transform: translateY(1px);
}

#miniSurvey #miniSurveySend:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
  filter: grayscale(.3);
}

#miniSurvey #miniSurveySend.hidden {
  display: none;
}

@media (max-width: 480px) {
  #miniSurvey {
    top: auto;
    right: var(--space-sm);
    left: var(--space-sm);
    bottom: var(--space-md);
  }

  #miniSurvey .mini-survey__card {
    max-width: none;
  }

  .ms-chip {
    height: 34px;
    padding: 0 calc(var(--space-sm) - 2px);
  }

  #miniSurvey #miniSurveySend {
    height: 36px;
  }
}