/**
 * Leave-a-Note widget styling — inline mode
 *
 * Bubbles, host replies, and the input all flow inline with the
 * surrounding prose. Long conversations wrap naturally at line ends.
 */

@keyframes leave-message-breathe {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 20, 147, 0);
  }
  50% {
    box-shadow: 0 0 10px 1px rgba(255, 20, 147, 0.6);
  }
}

@keyframes leave-message-bubble-in {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.leave-message-button {
  display: inline-block;
  padding: 0.15em 0.6em;
  margin: 0 0.1em;
  border: 1px solid currentColor;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 0.2em;
  line-height: 1.2;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  vertical-align: baseline;
  animation: leave-message-breathe 2.6s ease-in-out infinite;
}

.leave-message-button:hover,
.leave-message-button:focus {
  background: currentColor;
  color: #ffffff;
  outline: none;
  animation: none;
  box-shadow: 0 0 12px 2px rgba(255, 20, 147, 0.7);
}

/* Conversation container is fully inline — flows with prose */
.leave-message-conv,
.leave-message-list,
.leave-message-input-slot {
  display: inline;
  vertical-align: baseline;
}

/* Each bubble is an inline-block so padding and border render, but it
   participates in line layout and wraps with the rest of the prose. */
.leave-message-bubble {
  display: inline-block;
  padding: 0.1em 0.5em;
  margin: 0.05em 0.15em;
  border-radius: 0.3em;
  border: 1px solid currentColor;
  font: inherit;
  line-height: 1.3;
  vertical-align: baseline;
  word-wrap: break-word;
  white-space: pre-wrap;
  max-width: 100%;
}

.leave-message-bubble.role-visitor {
  background: rgba(127, 127, 127, 0.06);
  font-style: normal;
}

.leave-message-bubble.role-host {
  background: rgba(127, 127, 127, 0.12);
  font-style: italic;
  animation: leave-message-bubble-in 0.35s ease-out;
}

.leave-message-bubble.role-host::before {
  content: "↳ ";
  font-style: normal;
  opacity: 0.5;
}

.leave-message-bubble.sending {
  opacity: 0.5;
}

.leave-message-bubble.error {
  border-style: dashed;
  opacity: 0.7;
}

/* Input form, also inline with the prose flow */
.leave-message-form {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  vertical-align: baseline;
  margin: 0 0.15em;
}

.leave-message-input {
  display: inline-block;
  padding: 0.1em 0.5em;
  border: 1px solid currentColor;
  background: transparent;
  font: inherit;
  color: inherit;
  border-radius: 0.3em;
  line-height: 1.3;
  min-width: 14em;
  max-width: 100%;
}

.leave-message-input:focus {
  outline: none;
  border-color: rgba(255, 20, 147, 0.9);
  box-shadow: 0 0 8px 1px rgba(255, 20, 147, 0.4);
}

.leave-message-form {
  animation: leave-message-breathe 3s ease-in-out infinite;
  border-radius: 0.3em;
}

.leave-message-input::placeholder {
  opacity: 0.5;
  font-style: italic;
}

.leave-message-hint {
  font-size: 0.85em;
  opacity: 0.5;
  font-family: monospace;
}

.leave-message-reset {
  display: inline-block;
  padding: 0.05em 0.45em;
  margin: 0 0 0 0.5em;
  border: 1px dashed currentColor;
  background: transparent;
  font: inherit;
  font-size: 0.85em;
  color: inherit;
  cursor: pointer;
  border-radius: 0.2em;
  opacity: 0.45;
  transition: opacity 0.15s ease, border-color 0.15s ease;
  vertical-align: baseline;
}

.leave-message-reset:hover,
.leave-message-reset:focus {
  opacity: 1;
  outline: none;
}

/* Mobile: keep input usable */
@media (max-width: 600px) {
  .leave-message-input {
    min-width: 10em;
  }
}