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

.select[readonly],
.input:read-only {
  cursor: not-allowed;
  background-color: #f0f0f0;
  color: rgba(0, 0, 0, 0.4);
  border: none;
}

.scroll-height {
  height: 150px !important;
  overflow-y: auto;
}

.passowrd-errors {
  position: relative !important;
  bottom: 15px !important;
}

.accept-privacy-policy-errors {
  position: relative !important;
  bottom: 20px !important;
}

.chat-bubble {
  max-width: 70% !important;
}

/* Feedback Modal Jitter & Glow Animation */
@keyframes jitterShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px) rotate(-1deg); }
  40% { transform: translateX(6px) rotate(1deg); }
  60% { transform: translateX(-4px) rotate(-1deg); }
  80% { transform: translateX(4px) rotate(1deg); }
}

@keyframes errorGlow {
  0%, 100% { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } /* Default Tailwind shadow-2xl */
  50% { box-shadow: 0 0 25px 8px rgba(239, 68, 68, 0.4); } /* Red highlight */
}

.modal-jitter {
  animation: jitterShake 0.4s ease-in-out, errorGlow 0.6s ease-in-out;
}

/* Official Drawflow Base Styles */
.drawflow,
.drawflow .parent-node {
  position: relative
}

.parent-drawflow {
  display: flex;
  overflow: hidden;
  touch-action: none;
  outline: 0
}

.drawflow {
  width: 100%;
  height: 100%;
  user-select: none;
  perspective: 0;
}

.drawflow .drawflow-node {
  display: flex;
  align-items: center;
  position: absolute;
  background: white;
  min-width: 15rem;
  min-height: 4rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  color: black;
  z-index: 2;
  padding: 15px;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1)
}

.drawflow .drawflow-node.selected {
  border-color: #3b82f6;
}

.drawflow .drawflow-node:hover {
  cursor: move
}

.drawflow .drawflow-node .inputs,
.drawflow .drawflow-node .outputs {
  width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column
}

.drawflow .drawflow-node .inputs {
  margin-right: -10px
}

.drawflow .drawflow-node .outputs {
  margin-left: 20px
}

/* Enhanced Nodes Dots */
.drawflow .drawflow-node .input,
.drawflow .drawflow-node .output {
  position: relative;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  border: 2px solid #3b82f6;
  cursor: crosshair;
  z-index: 1;
  margin-bottom: 5px
}

.drawflow .drawflow-node .input:hover,
.drawflow .drawflow-node .output:hover {
  background: #3b82f6
}

/* SVG Connections */
.drawflow .connection {
  position: absolute;
  pointer-events: none
}

.drawflow .connection .main-path {
  fill: none;
  stroke-width: 4px;
  stroke: #9ca3af;
  pointer-events: auto
}

.drawflow .connection .main-path:hover {
  stroke: #3b82f6;
  cursor: pointer
}

.drawflow .connection .point {
  cursor: move;
  stroke: #000;
  stroke-width: 2;
  fill: #fff;
  pointer-events: auto
}

.drawflow .connection .point.selected,
.drawflow .connection .point:hover {
  fill: #3b82f6
}

/* CRITICAL: SVG Overlay Pointer Events */
.drawflow svg {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  pointer-events: none
}

.drawflow svg path {
  pointer-events: auto
}

/* Deletion Button */
.drawflow-delete {
  position: absolute;
  display: block;
  width: 24px;
  height: 24px;
  background: #ef4444;
  color: #fff;
  z-index: 4;
  border: 2px solid #fff;
  line-height: 20px;
  font-weight: 700;
  text-align: center;
  border-radius: 50%;
  font-family: monospace;
  cursor: pointer;
  top: -12px;
  right: -12px;
}

/* Custom interactions */
.drawflow-node input,
.drawflow-node textarea {
  cursor: text;
}

.drawflow-node input:focus,
.drawflow-node textarea:focus {
  cursor: text;
}