/* ============================================================
   Social-Fame — AI prompt input (vanilla port of the ai-chat-input
   component) + matching back button. Shared by the landing hero
   and the /chat page.
   ============================================================ */
.prompt {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 640px;
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 12px;
  padding: 8px 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transition: border-color .2s, box-shadow .2s;
}
.prompt:focus-within {
  border-color: #D5006D;
  box-shadow: 0 0 0 1px #D5006D, 0 2px 10px rgba(0,0,0,.06);
}
/* landing hero bar: 30% narrower than the default */
#sf-prompt { max-width: 448px; }

/* moving-border glow — same orbiting pink light as the dock tiles,
   but a quicker lap (4s vs the dock's 10s) */
#sf-prompt::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: 15px;
  background: conic-gradient(from var(--sf-orbit, 0deg),
    transparent 0deg 280deg,
    rgba(213, 0, 109, .45) 315deg,
    #D5006D 340deg,
    rgba(213, 0, 109, .45) 352deg,
    transparent 360deg);
  /* clip the conic to a 3px ring so only the border band glows */
  padding: 3px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: blur(4px);
  animation: sf-orbit-spin 4s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  #sf-prompt::before { animation: none; }
}
.prompt input[type="text"] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: #000;
}
.prompt input[type="text"]:focus { outline: none; }
/* touch devices: 16px stops iOS Safari's focus auto-zoom */
@media (pointer: coarse) {
  .prompt input[type="text"] { font-size: 16px; }
}
.prompt input[type="text"]::placeholder { color: rgba(0,0,0,.45); }
.prompt-send {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: #D5006D;
  color: #FFFFFF;
  cursor: pointer;
  transition: background .2s;
}
.prompt-send:hover:not(:disabled) { background: #b00059; }
.prompt-send:disabled { background: #d1d5db; cursor: default; }
.prompt-send svg { width: 16px; height: 16px; }
.prompt-send:focus-visible {
  outline: 2px solid #D5006D;
  outline-offset: 1px;
}

/* back button — same chrome as the prompt box */
.prompt-back {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  color: #000;
  transition: border-color .2s, color .2s;
}
.prompt-back:hover { border-color: #D5006D; color: #D5006D; }
.prompt-back svg { width: 18px; height: 18px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}