.tm-slot-ai-panel {
  position: absolute;
  z-index: 6;
  right: 5px;
  bottom: 5px;
  left: 5px;
  display: grid;
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(167, 255, 103, .28);
  border-radius: 8px;
  background: rgba(5, 13, 10, .86);
}

/* /saved is the layout source of truth: the studio replaces its single
   centered plus with exactly two compact slot actions. */
.tm-build__slot .tm-slot-plus {
  display: none !important;
}

.tm-slot-ai-prompt {
  width: 100%;
  min-width: 0;
  border: 1px solid #2d3c3c;
  border-radius: 7px;
  padding: 6px 7px;
  background: #080e0e;
  color: #e8eeee;
  font: inherit;
  font-size: 10px;
  outline: none;
}

.tm-slot-ai-prompt:focus {
  border-color: #82ff57;
}

.tm-slot-ai-reference {
  width: 100%;
  color: #9ba6a6;
  font-size: 9px;
}

.tm-slot-ai-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.tm-slot-ai-state {
  min-height: 14px;
  overflow: hidden;
  color: #9baea2;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-slot-ai-state.is-processing {
  color: #ffd166;
  animation: tm-slot-ai-pulse 1.4s ease-in-out infinite;
}

.tm-slot-ai-state.is-success { color: #a7ff67; }
.tm-slot-ai-state.is-error { color: #ff9c9c; }

@keyframes tm-slot-ai-pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

.tm-slot-ai-button {
  min-width: 0;
  width: 100%;
  min-height: 27px;
  border: 1px solid rgba(130, 255, 87, .36);
  border-radius: 7px;
  padding: 5px 4px;
  background: rgba(130, 255, 87, .08);
  color: #baffaa;
  font: inherit;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.1px;
  white-space: nowrap;
  cursor: pointer;
}

.tm-slot-ai-button:hover { background: rgba(130, 255, 87, .16); }
.tm-slot-ai-button:disabled { opacity: .45; cursor: wait; }

.tm-slot-add-button { border-color: #435454; background: #141e1e; color: #d9e3e1; }
.tm-slot-generate-button { background: rgba(130, 255, 87, .18); color: #caffb9; }
.tm-slot-remove-inline-button { display: inline-flex; align-items: center; justify-content: center; border-color: rgba(255, 129, 125, .55); background: rgba(255, 129, 125, .10); color: #ffaaa6; }
.tm-slot-remove-inline-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tm-build__slot.is-filled > .tm-slot-remove { display: none !important; }
.tm-build__slot.is-generating { border-color: #ffd166; }

.tm-slot-generator-modal {
  position: fixed;
  inset: 0;
  z-index: 1000010;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(2, 7, 7, .88);
  backdrop-filter: blur(8px);
}

.tm-slot-generator-modal.is-open { display: flex; }

.tm-slot-generator-card {
  position: relative;
  width: min(560px, 94vw);
  max-height: 92vh;
  overflow: auto;
  padding: 24px;
  border: 1px solid #3d5a4c;
  border-radius: 17px;
  background: #101b18;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .58);
}

.tm-slot-generator-card h2 { margin: 0 42px 6px 0; font-size: 22px; }
.tm-slot-generator-close { position: absolute; top: 13px; right: 13px; width: 38px; height: 38px; border: 1px solid #3d5a4c; border-radius: 9px; background: #17251f; color: #fff; font-size: 23px; cursor: pointer; }
.tm-slot-generator-scene { white-space: pre-line; color: #9eaea6; font-size: 12px; line-height: 1.5; }
.tm-slot-generator-type { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 16px 0; }
.tm-slot-generator-type button { padding: 10px; border: 1px solid #345044; border-radius: 9px; background: #15221c; color: #aebdb5; font-weight: 800; cursor: pointer; }
.tm-slot-generator-type button.is-active { border-color: #a7ff67; background: rgba(167, 255, 103, .15); color: #caffb9; }
.tm-slot-generator-label { display: block; margin: 12px 0 6px; color: #9eaea6; font-size: 11px; }
.tm-slot-generator-select, .tm-slot-generator-prompt, .tm-slot-generator-reference { width: 100%; box-sizing: border-box; }
.tm-slot-generator-select { padding: 10px; border: 1px solid #345044; border-radius: 8px; background: #09120f; color: #eef8f0; }
.tm-slot-generator-prompt { min-height: 105px; resize: vertical; padding: 10px; border: 1px solid #345044; border-radius: 8px; background: #09120f; color: #eef8f0; font: inherit; font-size: 12px; outline: none; }
.tm-slot-generator-prompt:focus, .tm-slot-generator-select:focus { border-color: #a7ff67; }
.tm-slot-generator-reference { color: #aebdb5; font-size: 11px; }
.tm-slot-generator-check { display: block; margin-top: 11px; color: #dbe8df; font-size: 12px; }
.tm-slot-generator-cost { margin-top: 16px; padding: 11px 12px; border: 1px solid rgba(167, 255, 103, .35); border-radius: 9px; color: #caffb9; font-size: 13px; font-weight: 800; }
.tm-slot-generator-error { min-height: 18px; margin-top: 8px; color: #ff9c9c; font-size: 12px; }
.tm-slot-generator-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.tm-slot-generator-cancel, .tm-slot-generator-submit { padding: 10px 15px; border-radius: 9px; font-weight: 800; cursor: pointer; }
.tm-slot-generator-cancel { background: #21342b; color: #e8f2eb; }
.tm-slot-generator-submit { background: #a7ff67; color: #102114; }