.ai-overlay {
  position: absolute;
  top: 38.3%;
  left: 70.55%;
  z-index: 4;
  display: grid;
  grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr);
  gap: 0.5cqw;
  width: 26.1cqw;
  height: 36cqw;
  padding: 1.02cqw;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.985);
  border: 1px solid rgba(215, 223, 220, 0.96);
  border-radius: 0.78cqw;
  box-shadow: 0 0.72cqw 2.1cqw rgba(18, 48, 39, 0.13);
}

.ai-header h2,
.ai-header p,
.ai-draw-heading h3,
.ai-response p {
  margin: 0;
}

.ai-header h2 {
  color: #121919;
  font-size: 1.16cqw;
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: 0;
}

.ai-header p {
  margin-top: 0.32cqw;
  color: #4a5451;
  font-size: 0.76cqw;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 0;
}

.ai-prompt {
  display: block;
  width: 100%;
  min-height: 4.18cqw;
  padding: 0.72cqw 0.9cqw;
  resize: none;
  color: #202826;
  background: #f4faf6;
  border: 0.13cqw solid rgba(0, 107, 69, 0.22);
  border-radius: 0.5cqw;
  box-shadow: inset 0 0.08cqw 0.35cqw rgba(18, 48, 39, 0.04);
  font: inherit;
  font-size: 0.82cqw;
  font-weight: 650;
  line-height: 1.24;
  letter-spacing: 0;
}

.ai-prompt:focus {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.ai-speak,
.ai-interpret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 0.46cqw;
  font-size: 0.98cqw;
  font-weight: 850;
  letter-spacing: 0;
  white-space: nowrap;
}

.ai-speak {
  gap: 0.58cqw;
  min-height: 2.58cqw;
  color: var(--brand-strong);
  background: #ffffff;
  border: 0.12cqw solid rgba(0, 107, 69, 0.34);
}

.ai-speak svg {
  width: 1.36cqw;
  height: 1.36cqw;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.ai-draw-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 1.6cqw;
}

.ai-draw-heading h3 {
  color: #1f2725;
  font-size: 0.78cqw;
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: 0;
}

.ai-draw-heading button {
  display: inline-flex;
  align-items: center;
  gap: 0.24cqw;
  padding: 0;
  color: #565f5c;
  background: transparent;
  border: 0;
  border-radius: 0.3cqw;
  font-size: 0.72cqw;
  font-weight: 700;
  letter-spacing: 0;
}

.ai-sketch {
  position: relative;
  height: 8.55cqw;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(223, 229, 228, 0.82);
  border-radius: 0.6cqw 0.52cqw 0.68cqw 0.5cqw;
  box-shadow: inset 0 0 1.1cqw rgba(18, 48, 39, 0.025);
}

.ai-sketch-art {
  position: absolute;
  inset: 0.12cqw 0.35cqw;
  z-index: 1;
  display: block;
  width: calc(100% - 0.7cqw);
  height: calc(100% - 0.24cqw);
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.ai-sketch-step {
  position: absolute;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  min-width: var(--sketch-w);
  min-height: var(--sketch-h, 2.35cqw);
  padding: 0.22cqw 0.58cqw;
  color: var(--sketch-ink);
  background: transparent;
  border: 0;
  border-radius: 0.42cqw 0.34cqw 0.48cqw 0.38cqw;
  box-shadow: none;
  font-family: "Comic Sans MS", "Segoe Print", "Bradley Hand", cursive;
  font-size: 0.86cqw;
  font-weight: 850;
  font-style: italic;
  line-height: 1.08;
  letter-spacing: 0;
  text-align: center;
  transform: rotate(var(--sketch-tilt, -0.8deg));
}

.ai-sketch-employee {
  --sketch-ink: #1a8753;
  --sketch-w: 5.1cqw;
  --sketch-tilt: -0.7deg;
  left: 3.52cqw;
  top: 0.9cqw;
}

.ai-sketch-request {
  --sketch-ink: #2b6ebd;
  --sketch-w: 4.85cqw;
  --sketch-tilt: 0.9deg;
  left: 9.35cqw;
  top: 0.9cqw;
}

.ai-sketch-manager {
  --sketch-ink: #d28718;
  --sketch-w: 5.35cqw;
  --sketch-h: 3.05cqw;
  --sketch-tilt: -1deg;
  left: 14.78cqw;
  top: 0.62cqw;
}

.ai-sketch-record {
  --sketch-ink: #693db2;
  --sketch-w: 6.05cqw;
  --sketch-tilt: 0.5deg;
  left: 14.32cqw;
  top: 5.17cqw;
}

.ai-sketch-arrow {
  position: absolute;
  display: none;
  color: #333a38;
  font-family: "Comic Sans MS", "Segoe Print", "Bradley Hand", cursive;
  font-size: 1.48cqw;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0.04cqw 0.02cqw 0 rgba(51, 58, 56, 0.18);
}

.ai-sketch-arrow-employee {
  left: 6.75cqw;
  top: 1.82cqw;
  transform: rotate(-2deg);
}

.ai-sketch-arrow-request {
  left: 14.16cqw;
  top: 1.82cqw;
  transform: rotate(2deg);
}

.ai-sketch-arrow-record {
  left: 18.9cqw;
  top: 4.15cqw;
  transform: rotate(-1deg);
}

.ai-interpret {
  gap: 0.48cqw;
  min-height: 2.54cqw;
  color: #ffffff;
  background: #d89117;
  border: 0;
  box-shadow: inset 0 -0.16cqw 0 rgba(0, 0, 0, 0.13);
}

.ai-interpret span:first-child {
  font-size: 1.12cqw;
  line-height: 1;
}

.ai-response {
  display: grid;
  grid-template-columns: 2.35cqw minmax(0, 1fr);
  gap: 0.7cqw;
  min-height: 0;
  padding: 0.72cqw;
  color: #39423f;
  background: #f9fbfa;
  border: 1px solid rgba(223, 229, 228, 0.98);
  border-radius: 0.48cqw;
  box-shadow: 0 0.34cqw 0.84cqw rgba(18, 48, 39, 0.07);
}

.ai-response-avatar {
  display: grid;
  place-items: center;
  width: 2.35cqw;
  height: 2.35cqw;
  background: #ffffff;
  border: 0.12cqw solid rgba(0, 107, 69, 0.44);
  border-radius: 999px;
}

.ai-response-avatar img {
  display: block;
  width: 1.75cqw;
  height: 1.75cqw;
  object-fit: contain;
}

.ai-response p {
  color: #3f4946;
  font-size: 0.76cqw;
  font-weight: 650;
  line-height: 1.18;
  letter-spacing: 0;
}

.ai-helpful {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.62cqw;
  margin-top: 0.28cqw;
  color: #4d5653;
  font-size: 0.72cqw;
  font-weight: 800;
  letter-spacing: 0;
}

.ai-helpful span {
  margin-right: auto;
}

.ai-helpful button {
  display: inline-grid;
  place-items: center;
  width: 1.55cqw;
  height: 1.55cqw;
  padding: 0;
  color: #68716e;
  background: transparent;
  border: 0;
  border-radius: 0.32cqw;
}

.ai-helpful svg {
  width: 1.18cqw;
  height: 1.18cqw;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.ai-speak:hover,
.ai-speak:focus-visible,
.ai-speak.is-active,
.ai-interpret:hover,
.ai-interpret:focus-visible,
.ai-interpret.is-active,
.ai-draw-heading button:hover,
.ai-draw-heading button:focus-visible,
.ai-draw-heading button.is-active,
.ai-sketch-step:hover,
.ai-sketch-step:focus-visible,
.ai-sketch-step.is-active,
.ai-helpful button:hover,
.ai-helpful button:focus-visible,
.ai-helpful button.is-active {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}