/* The object name is a quiet label; the action is unmistakably a pressable button. */
#prompt {
  border: 0; border-radius: 0; padding: 0; background: transparent;
  color: #fff7fb; box-shadow: none; cursor: pointer; min-height: 44px;
  max-width: calc(100vw - 36px); line-height: 1.3; font: inherit;
  transition: opacity 180ms ease, transform 180ms ease;
}
#prompt .interaction-object-name {
  display: block; margin: 0 0 8px; font-size: 12px; font-weight: 400;
  letter-spacing: .045em; color: #ead9e3; text-shadow: 0 1px 5px #10080f;
}
#prompt .interaction-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; min-width: 132px; box-sizing: border-box;
  padding: 10px 22px; border: 1.5px solid #f2c1d8; border-radius: 12px;
  background: linear-gradient(180deg, rgba(69, 33, 54, .96), rgba(27, 13, 24, .97));
  box-shadow: 0 3px 0 rgba(10, 5, 9, .75), 0 4px 16px rgba(0, 0, 0, .3);
  font-size: 16px; font-weight: 650; transition: background 140ms ease, transform 140ms ease;
}
#prompt .interaction-key {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 23px; height: 25px; padding: 0 4px; box-sizing: border-box;
  border: 1px solid rgba(255, 239, 248, .6); border-radius: 5px;
  background: rgba(255, 241, 249, .12); font: 600 14px/1 monospace;
}
#prompt [hidden] { display: none !important; }
#prompt:hover .interaction-action { background: #553044; border-color: #fff1f8; }
#prompt:active .interaction-action { transform: translateY(2px); box-shadow: 0 1px 0 rgba(10, 5, 9, .75); }
#prompt:focus-visible { outline: 2px solid #fff1f8; outline-offset: 6px; border-radius: 12px; }
@media (pointer: coarse) { #prompt .interaction-key { display: none; } }
@media (prefers-reduced-motion: reduce) { #prompt, #prompt .interaction-action { transition: none; } }