/*
 * Spirits of PA Bartender — chat UI styles.
 * Reuses theme tokens (colors, fonts, radius) from style.css.
 * Only structural rules unique to the chat surface live here.
 */

.bartender-page {
  padding-top: calc(var(--padding) * 2);
}

/* Admin-only persona toggle (visible only to logged-in admins) */
.bartender-persona-toggle {
  background: var(--color-light);
  border-bottom: 1px solid rgba(100, 102, 69, 0.2);
  padding: 8px 16px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.85em;
}

.bartender-persona-toggle a[aria-current="page"] {
  font-weight: 700;
  text-decoration: none;
}

.bartender-intro {
  max-width: 630px;
  margin: 0 auto calc(var(--padding) * 2);
  text-align: center;
}

/* Featured image */
.bartender-featured-image {
  max-width: 800px;
  margin: 0 auto calc(var(--padding) * 2);
}

.bartender-featured-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* Chat container */
.bartender-chat {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Message list — flows inline with the page; no internal scroll. */
.bartender-messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Input bar lives in natural document flow below the latest message.
   Collapses out of layout while the bartender is "thinking" so the typing
   indicator becomes the bottom of the visible content. */
.bartender-input-bar {
  /* background: var(--color-white); */
  padding: 16px 0 8px;
  margin-top: 24px;
  /* border-top: 1px solid rgba(100, 102, 69, 0.15); */
  overflow: hidden;
  /* max-height: 240px; */
  transition:
    max-height 0.25s ease,
    opacity 0.2s ease,
    margin-top 0.25s ease,
    padding 0.25s ease,
    border-top-color 0.25s ease;
}

.bartender-chat.is-busy .bartender-input-bar {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-color: transparent;
  pointer-events: none;
}

/* Small breathing room when scrolling a new message into view from below. */
html {
  scroll-padding-bottom: 40px;
}

/* Message row: avatar + bubble. Assistant rows lead with the avatar; user rows
   push the bubble to the right and have no avatar. */
.bartender-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.bartender-row--user {
  justify-content: flex-end;
}

.bartender-avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  /* Nudge down so the avatar centers on the bubble's first line. */
  margin-top: 2px;
}

/* Message bubbles */
.bartender-message {
  max-width: 85%;
  padding: calc(var(--padding) / 2);
  border-radius: var(--radius);
  word-wrap: break-word;
  /* Leave room above when scrollIntoView lands on a message — keeps it from ramming
	   against the site header / top edge of the viewport. */
  scroll-margin-top: 80px;
}

.bartender-message p {
  margin: 0 0 0.6em;
}

.bartender-message p:last-child {
  margin-bottom: 0;
}

.bartender-message ul {
  margin: 0 0 0.6em;
  padding-left: 1.25em;
}

.bartender-message ul:last-child {
  margin-bottom: 0;
}

.bartender-message li {
  margin: 0.15em 0;
}

/* Recipe card — the structured recipe, lifted out of the message flow. */
.bartender-recipe {
  margin: var(--padding) auto calc(var(--padding) / 2) auto;
  padding: var(--padding);
  background: var(--color-light);
  border-radius: var(--radius);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  max-width: 500px;
  position: relative;
  overflow: hidden;

  &:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 30%;
    background: url(/wp-content/themes/bmm_base_s/images/bg-lines-2.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom left;
    transform: rotate(60deg);
    z-index: 1;
    opacity: 0.7;
  }
}

.bartender-recipe__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 3em;
  line-height: 1.15;
  color: var(--color-main);
  margin-bottom: 0.5em;
  position: relative;
  z-index: 2;
}

.bartender-recipe ul,
.bartender-recipe ul:last-child {
  margin: 0;
  padding-left: 1em;
  list-style: disc;
  position: relative;
  z-index: 2;
}

.bartender-recipe li:last-child {
  margin-top: 2rem;
  margin-left: -1em;
  padding-left: 0;
  list-style: none;
}

.bartender-recipe li {
  margin: 0.35em 0;
  padding-left: 0;
}

.bartender-message--assistant {
  background: var(--color-white);
  /* border: 1px solid rgba(100, 102, 69, 0.15); */
}

.bartender-message--user {
  background: var(--color-main);
  color: var(--color-white);
}

.bartender-message.error {
  background: var(--color-accent-3);
  color: var(--color-black);
}

/* Typing indicator */
.bartender-message--typing {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 14px 16px;
}

.bartender-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-main);
  opacity: 0.4;
  animation: bartender-dot 1.2s infinite ease-in-out;
}

.bartender-dot:nth-child(2) {
  animation-delay: 0.2s;
}
.bartender-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes bartender-dot {
  0%,
  80%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

/* Input row */
.bartender-input {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.bartender-input textarea {
  flex: 1;
  min-height: 56px;
  max-height: 300px;
  padding: 14px 16px;
  border: 1px solid rgba(100, 102, 69, 0.25);
  border-radius: var(--radius);
  resize: none;
  font-family: var(--font-body);
  line-height: inherit;
  overflow: hidden;
}

.bartender-input textarea:focus {
  outline: none;
  border-color: var(--color-main);
}

.bartender-input button {
  padding: 14px 24px;
  background: var(--color-main);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-body);
}

.bartender-input button:hover:not(:disabled) {
  background: var(--color-black);
}

.bartender-input button:disabled,
.bartender-input textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.bartender-disclaimer {
  text-align: center;
  font-size: 0.85em;
  opacity: 0.7;
  margin: 0;
  margin-top: calc(var(--padding) / 2);
}

/* Mobile */
@media (max-width: 600px) {
  .bartender-messages {
    padding: 16px;
    min-height: 320px;
  }

  .bartender-message {
    max-width: 92%;
  }

  .bartender-row {
    gap: 8px;
  }

  .bartender-avatar {
    width: 34px;
    height: 34px;
  }

  .bartender-input button {
    padding: 14px 18px;
  }
}