/* Astrid persona UI — visual layer only. No chat behavior or API changes. */
.ai-chat-root {
  --astrid-persona-avatar: url('/images/astrid/astrid-avatar.webp');
  --astrid-persona-hero: url('/images/astrid/astrid-hero.webp');
}

/* The approved character represents the assistant in the launcher and header. */
.ai-chat-root .ai-chat-toggle__mark,
.ai-chat-root .ai-chat-avatar {
  display: block;
  flex-shrink: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: #dfecff;
  background-image: var(--astrid-persona-avatar), linear-gradient(145deg, #e2eeff, #b9d8ff);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: transparent;
  font-size: 0;
  box-shadow: 0 3px 11px rgba(34, 94, 178, .18);
}

.ai-chat-root .ai-chat-toggle__mark {
  width: 41px;
  height: 41px;
  flex-basis: 41px;
}

.ai-chat-root .ai-chat-avatar {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
}

.ai-chat-root .ai-chat-toggle {
  border-radius: 999px;
  padding-left: 7px;
  gap: 10px;
}

/* Use the hero image without changing starter-prompt values or click handling. */
.ai-chat-root .ai-chat-empty {
  justify-content: flex-start;
  min-height: min-content;
  max-width: 370px;
  gap: 9px;
  margin: auto;
  padding: 12px 10px;
}

.ai-chat-root .ai-chat-empty__mark {
  display: block;
  flex: 0 0 auto;
  width: min(100%, 268px);
  height: 151px;
  border: 0;
  border-radius: 26px;
  background-color: #e8f2ff;
  background-image: var(--astrid-persona-hero), linear-gradient(150deg, #f7fbff, #ddecff);
  background-repeat: no-repeat;
  background-position: center 24%;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(119, 165, 229, .10);
  color: transparent;
  font-size: 0;
}

.ai-chat-root .ai-chat-empty strong {
  font-size: 19px;
  letter-spacing: -.02em;
}

.ai-chat-root .ai-chat-empty p {
  max-width: 305px;
  font-size: 12.5px;
  line-height: 1.45;
}

.ai-chat-root .ai-chat-empty__label {
  margin-top: 2px;
}

.ai-chat-root .ai-chat-suggestions {
  gap: 7px;
}

.ai-chat-root .ai-chat-suggestions button {
  min-height: 40px;
  border-color: #d8e6f8;
  background-color: rgba(255,255,255,.94);
}

.ai-chat-root .ai-chat-messages {
  background: linear-gradient(180deg, #eef5ff 0%, #f4f7fc 60%, #f6f9fe 100%);
}

/* A compact portrait next to every existing Astrid message, incl. typing. */
.ai-chat-root .ai-chat-messages > .ai-chat-message--assistant {
  position: relative;
  margin-left: 40px;
  max-width: calc(100% - 40px);
  border-color: #e0e9f7;
  box-shadow: 0 3px 12px rgba(19, 62, 135, .045);
}

.ai-chat-root .ai-chat-messages > .ai-chat-message--assistant::before {
  content: '';
  position: absolute;
  top: 0;
  left: -40px;
  width: 32px;
  height: 32px;
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: #dfeeff;
  background-image: var(--astrid-persona-avatar), linear-gradient(145deg, #e2eeff, #b9d8ff);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  box-shadow: 0 3px 9px rgba(24, 84, 169, .12);
}

.ai-chat-root .ai-chat-messages > .ai-chat-message--assistant.ai-chat-message--has-products {
  max-width: calc(100% - 40px);
}

.ai-chat-root .ai-chat-panel--expanded .ai-chat-empty__mark {
  width: 320px;
  height: 205px;
}

@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  .ai-chat-root .ai-chat-avatar {
    width: 41px;
    height: 41px;
    flex-basis: 41px;
  }

  .ai-chat-root .ai-chat-empty {
    margin: auto;
    max-width: 345px;
    padding: 8px 9px 12px;
    gap: 9px;
  }

  .ai-chat-root .ai-chat-empty__mark,
  .ai-chat-root .ai-chat-panel--expanded .ai-chat-empty__mark {
    width: min(100%, 256px);
    height: 162px;
  }

  .ai-chat-root.ai-chat-root--mobile-open .ai-chat-empty {
    min-height: min-content;
    margin: auto;
    padding: 8px 9px 12px;
  }

  .ai-chat-root .ai-chat-messages > .ai-chat-message--assistant,
  .ai-chat-root .ai-chat-messages > .ai-chat-message--assistant.ai-chat-message--has-products {
    max-width: calc(100% - 40px);
  }
}

@media (max-height: 720px) {
  .ai-chat-root .ai-chat-empty__mark,
  .ai-chat-root .ai-chat-panel--expanded .ai-chat-empty__mark {
    height: 126px;
  }
}

@media (max-width: 360px) {
  .ai-chat-root .ai-chat-empty__mark,
  .ai-chat-root .ai-chat-panel--expanded .ai-chat-empty__mark {
    height: 126px;
    width: 225px;
  }

  .ai-chat-root .ai-chat-empty strong {
    font-size: 17px;
  }

  .ai-chat-root .ai-chat-avatar {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
}


/* The current Kazakh welcome renderer replaces its children with plain text.
   Restore the character using only CSS, leaving language handling unchanged. */
.ai-chat-root .ai-chat-empty:not(:has(.ai-chat-empty__mark))::before {
  content: '';
  display: block;
  flex: 0 0 auto;
  width: min(100%, 268px);
  height: 151px;
  margin-bottom: 12px;
  border-radius: 26px;
  background: #e8f2ff var(--astrid-persona-hero) center 24% / cover no-repeat;
}
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  .ai-chat-root .ai-chat-empty:not(:has(.ai-chat-empty__mark))::before {
    width: min(100%, 256px);
    height: 142px;
  }
}