/* === Reveal animation for chatbar === */
.chatbar{ opacity:0; transform: translateY(8px) scale(.98); filter: blur(2px); }
.chatbar.reveal{ animation: chatIn 720ms cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes chatIn{
  0%{ opacity:0; transform: translateY(8px) scale(.98); filter: blur(2px); }
  100%{ opacity:1; transform: none; filter: none; }
}
/* Ensure caret is visible */
.chatbar .input{ caret-color:#111; }

/* === Chatbar (scoped) === */
.chatbar-wrap{ display:flex; justify-content:center; margin-top:16px; }
.chatbar{ display:flex; align-items: center; gap:8px; padding:10px 10px; border:1px solid #e6e6e6; background:#fff; border-radius:16px; box-shadow: 0 6px 24px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04); width:min(780px, 92vw); }
.chatbar:focus-within{ border-color:#d5d5d5; box-shadow:0 0 0 3px rgba(17,17,17,.04), 0 6px 24px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04); }
.chatbar .input{ flex:1 1 auto; min-height:24px; max-height:220px; width:100%; border:0; resize:none; background:transparent; color:#0b0b0b; font: inherit; line-height:1.35; padding:10px 8px; }
.chatbar .input::placeholder{ color:#6b6b6b; }
.chatbar .input:focus{ outline:none; }
.chatbar .btn{ -webkit-appearance:none; appearance:none; border:0; background:transparent; cursor:pointer; border-radius:10px; padding:8px; display:inline-flex; align-items:center; justify-content:center; }
.chatbar .btn:disabled{ opacity:1; cursor:not-allowed; }
.chatbar .btn:focus-visible{ outline:2px solid #111; outline-offset:2px; }
.chatbar .icon{ width:24px; height:24px; color:#ffc893; } /* orange arrow */
@media (max-width: 767px){
  .chatbar-wrap{ margin-top:12px; }
  .chatbar{ border-radius:14px; padding:8px; }
  .chatbar .input{ padding:8px 6px; }
}

/* Ghost placeholder overlay (animates grey text itself) */
.chatbar .input-wrap{ position:relative; flex:1 1 auto; }
.chatbar .ghost-ph{
  position:absolute;
  left:8px; right:8px; top:10px;
  color:#6b6b6b; /* same as ::placeholder */
  font: inherit;
  line-height:1.35;
  white-space:pre-wrap;
  pointer-events:none;
  z-index:0;
}
.chatbar .input{ position:relative; z-index:1; background:transparent; }

/* Hide native placeholder while demo typing runs to prevent flicker */
.chatbar.typing .input::placeholder{ color: inherit; }


/* Ensure ghost text is left-aligned regardless of parent alignment */
.chatbar .input-wrap{ position:relative; flex:1 1 auto; text-align:left; }


.chatbar .ghost-ph{ text-align:left; }
.chatbar .ghost-ph{ display:none !important; }


/* === Vertical centering fix: text & send arrow aligned === */
.chatbar{ align-items: center !important; }
.chatbar .btn{ display: inline-flex; align-items: center; justify-content: center; }
.chatbar .btn svg{ display:block; }
.chatbar .input{ line-height: 1.25; padding-top: 10px; padding-bottom: 10px; }


/* Error state for invalid URL in chatbar */
.chatbar-error .chatbar{
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239,68,68,0.25);
}
.chatbar-error .input{
  color: #b91c1c;
}


/* Support error class directly on chatbar as well */
.chatbar.chatbar-error{
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239,68,68,0.25);
}
.chatbar.chatbar-error .input,
.chatbar-error .input::placeholder{
  color: #b91c1c;
}