/* Public Clavis question widget — client only. */
.public-clavis-embed,
.public-clavis-modal-card {
  background: rgba(48, 71, 94, 0.72);
  border: 1px solid var(--border, rgba(221,221,221,0.18));
  border-radius: 14px;
  color: var(--text, #DDDDDD);
  box-shadow: 0 14px 34px rgba(0,0,0,0.20);
}

.public-clavis-embed { margin: 0 auto; padding: 0.85rem; width: 100%; max-width: 100%; }

.public-clavis-beta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
  padding: 0.18rem 0.52rem;
  border: 1px solid var(--border, rgba(221,221,221,0.18));
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-dim, #F05454);
  background: rgba(34,40,49,0.38);
}

.public-clavis-copy {
  color: var(--text-muted, var(--muted, rgba(221,221,221,0.74)));
  font-size: 0.78rem;
  line-height: 1.45;
  margin: 0 0 0.55rem;
}

.public-clavis-form { display: grid; gap: 0.5rem; }

.public-clavis-field {
  min-height: 58px;
  height: 58px;
  resize: none;
  width: 100%;
  border: 1px solid var(--border, rgba(221,221,221,0.18));
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  background: rgba(34,40,49,0.62);
  color: var(--text, #DDDDDD);
  font: inherit;
  line-height: 1.5;
  outline: none;
}

.public-clavis-field:focus {
  border-color: var(--border-hover, rgba(240,84,84,0.58));
  box-shadow: 0 0 0 3px rgba(240,84,84,0.12);
}

.public-clavis-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

.public-clavis-submit,
.public-clavis-reset,
.public-clavis-floating,
.public-clavis-close {
  border: 0;
  cursor: pointer;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
}

.public-clavis-submit,
.public-clavis-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 0.72rem 1rem;
  font-size: 0.84rem;
}

.public-clavis-submit { background: var(--accent, #F05454); color: var(--bg, #222831) !important; position: relative; }
.public-clavis-submit:disabled,
.public-clavis-field:disabled {
  cursor: wait;
  opacity: 0.72;
}
.public-clavis-submit[aria-busy="true"]::after {
  content: '';
  width: 0.75em;
  height: 0.75em;
  margin-left: 0.5rem;
  border: 2px solid rgba(34,40,49,0.35);
  border-top-color: var(--bg, #222831);
  border-radius: 50%;
  animation: public-clavis-spin 0.75s linear infinite;
}
.public-clavis-reset { display: none; background: transparent; color: var(--text, #DDDDDD) !important; border: 1px solid var(--border, rgba(221,221,221,0.18)); }
.public-clavis-status { min-height: 1.2rem; font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted, var(--muted, rgba(221,221,221,0.74))); }

@keyframes public-clavis-spin { to { transform: rotate(360deg); } }

.public-clavis-loader {
  display: none;
  align-items: center;
  gap: 0.42rem;
  margin-top: 0.62rem;
  padding: 0.58rem 0.72rem;
  border: 1px solid rgba(240,84,84,0.24);
  border-radius: 10px;
  background: rgba(34,40,49,0.34);
  color: var(--text-muted, rgba(221,221,221,0.74));
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.public-clavis-embed.is-pending .public-clavis-loader,
.public-clavis-modal-body.is-pending .public-clavis-loader {
  display: inline-flex;
}

.public-clavis-loader span {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--accent, #F05454);
  opacity: 0.35;
  animation: public-clavis-pulse 0.9s ease-in-out infinite;
}

.public-clavis-loader span:nth-child(2) { animation-delay: 0.12s; }
.public-clavis-loader span:nth-child(3) { animation-delay: 0.24s; }
.public-clavis-loader em { font-style: normal; }

@keyframes public-clavis-pulse {
  0%, 100% { transform: translateY(0); opacity: 0.28; }
  50% { transform: translateY(-3px); opacity: 1; }
}

.public-clavis-answer {
  display: none;
  margin-top: 0.85rem;
  padding: 0.9rem;
  border: 1px solid var(--border, rgba(221,221,221,0.18));
  border-radius: 12px;
  background: rgba(34,40,49,0.38);
  color: var(--text, #DDDDDD);
  font-size: 0.86rem;
  line-height: 1.65;
  white-space: pre-wrap;
}

.public-clavis-disclaimer { margin-top: 0.75rem; color: var(--dim, rgba(221,221,221,0.55)); font-family: 'JetBrains Mono', monospace; font-size: 0.64rem; line-height: 1.5; }

.public-clavis-floating {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.82rem 1rem;
  border-radius: 999px;
  background: var(--accent, #F05454);
  color: var(--bg, #222831) !important;
  box-shadow: 0 16px 42px rgba(0,0,0,0.34);
}

.public-clavis-modal { position: fixed; inset: 0; z-index: 220; display: none; align-items: flex-end; justify-content: flex-end; padding: 1.25rem; background: rgba(0,0,0,0.42); }
.public-clavis-modal.open { display: flex; }
.public-clavis-modal-card { width: min(430px, calc(100vw - 2.5rem)); padding: 1.1rem; }
.public-clavis-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.7rem; }
.public-clavis-modal-title { font-size: 1rem; margin: 0; }
.public-clavis-close { width: 34px; height: 34px; border-radius: 50%; background: rgba(34,40,49,0.62); color: var(--text, #DDDDDD) !important; border: 1px solid var(--border, rgba(221,221,221,0.18)); }

@media (max-width: 640px) {
  .public-clavis-embed { padding: 0.8rem; width: 100%; max-width: 100%; }
  .public-clavis-field { min-height: 72px; height: 72px; }
  .public-clavis-actions { align-items: stretch; }
  .public-clavis-submit,
  .public-clavis-reset { width: 100%; }
  .public-clavis-answer { max-height: 42vh; overflow: auto; }
  .public-clavis-floating { right: 1rem; bottom: 1rem; }
  .public-clavis-modal { align-items: flex-end; padding: 0.8rem; }
  .public-clavis-modal-card { width: 100%; max-height: calc(100vh - 1.6rem); overflow: auto; }
}