.message-list {
  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 13px;
}

.message {
  display: flex;

  width: 100%;

  animation:
    messageIn .25s ease;
}

@keyframes messageIn {
  from {
    opacity: 0;
    transform: translateY(7px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message.user {
  justify-content: flex-end;
}

.message.ai {
  justify-content: flex-start;
}

.message-card {
  max-width: min(88%, 690px);

  padding: 11px 12px;

  border-radius: 17px;
}

.message.user .message-card {
  color: var(--text-user-bubble);

  background:
    linear-gradient(
      135deg,
      var(--accent-primary),
      var(--accent-secondary)
    );

  border-bottom-right-radius: 6px;

  box-shadow:
    var(--shadow-md),
    0 0 18px rgba(255, 0, 127, .09);
}

.message.ai .message-card {
  color: var(--text-primary);

  background: var(--bg-ai-bubble);

  border: 1px solid var(--border-color);

  border-bottom-left-radius: 6px;

  box-shadow:
    var(--shadow-md);
}

.message-text {
  white-space: pre-wrap;
  word-break: break-word;

  font-size: .88rem;
  line-height: 1.65;
}

.message-image {
  width: min(100%, 300px);

  margin-bottom: 9px;

  border-radius: 12px;

  object-fit: cover;

  border: 1px solid
    rgba(255, 255, 255, .12);

  box-shadow:
    var(--shadow-sm);
}

.message-meta {
  display: flex;
  align-items: center;
  gap: 7px;

  margin-top: 9px;
}

.message-time {
  color: currentColor;

  font-family:
    var(--font-mono);

  font-size: .57rem;

  opacity: .67;
}

.message-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.message-action {
  width: 27px;
  height: 27px;

  display: grid;
  place-items: center;

  border-radius: 8px;

  color: currentColor;

  opacity: .66;

  background: transparent;

  transition:
    opacity .2s ease,
    color .2s ease,
    box-shadow .15s ease;
}

.message-action:hover {
  opacity: 1;
  color: var(--accent-primary);
}

.message-action.active {
  opacity: 1;
  color: var(--accent-primary);
}

.message-action:active {
  box-shadow: var(--inset-sm);
}

.message.user .message-meta {
  justify-content: flex-end;
}

.message.ai .message-meta {
  justify-content: flex-start;
}

.message.user .message-actions {
  order: 0;
}

.message.user .message-time {
  order: 1;
}

.message.ai .message-actions {
  order: 0;
}

.message.ai .message-time {
  order: 1;
}

.typing-wrap {
  display: flex;
  justify-content: flex-start;

  width: 100%;

  margin-top: 2px;

  animation:
    messageIn .2s ease;
}

.typing-card {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding:
    10px
    12px;

  border-radius: 16px;

  color: var(--text-secondary);

  background: var(--bg-ai-bubble);

  box-shadow: var(--shadow-sm);
}

.typing-label {
  font-size: .72rem;
}

.typing-dots {
  display: inline-flex;
  gap: 3px;
}

.typing-dots span {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: var(--accent-primary);

  animation:
    typingDot 1.1s infinite ease-in-out;
}

.typing-dots span:nth-child(2) {
  animation-delay: .14s;
}

.typing-dots span:nth-child(3) {
  animation-delay: .28s;
}

@keyframes typingDot {
  0%,
  60%,
  100% {
    opacity: .3;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

.message-error {
  margin-top: 5px;

  padding:
    9px
    11px;

  border-radius: 11px;

  color: #ff98ba;

  background:
    rgba(255, 0, 127, .08);

  font-size: .7rem;
}

.ai-small-avatar {
  width: 27px;
  height: 27px;

  margin-right: 7px;

  border: 1px solid var(--accent-primary);

  box-shadow:
    0 0 9px rgba(255, 0, 127, .17);
}

.ai-message-line {
  display: flex;
  align-items: flex-start;
}

.ai-content-wrap {
  min-width: 0;
  flex: 1;
}

.welcome-branding {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  margin-top: 12px;

  color: var(--accent-primary);

  font-size: .66rem;
  font-weight: 700;

  letter-spacing: .05em;
  text-transform: uppercase;
}

.welcome-branding i {
  font-size: .72rem;
}

@media (max-width: 420px) {
  .message-card {
    max-width: 93%;
  }

  .message-text {
    font-size: .85rem;
  }
}

.toast-stack {
  position: fixed;

  left: 50%;
  bottom: 94px;

  z-index: 300;

  width: min(92vw, 390px);

  display: flex;
  flex-direction: column;

  gap: 8px;

  transform:
    translateX(-50%);
}

.toast {
  position: relative;

  display: flex;
  align-items: flex-start;

  gap: 9px;

  padding:
    11px
    12px
    13px;

  overflow: hidden;

  border-radius: 14px;

  color: var(--text-primary);
  background: var(--bg-input-wrapper);

  box-shadow: var(--shadow-md);

  opacity: 0;
  transform: translateY(10px);

  transition:
    opacity .25s ease,
    transform .25s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast > i {
  margin-top: 2px;

  color: var(--accent-primary);
}

.toast span {
  font-size: .75rem;
  line-height: 1.45;
}

.toast-progress {
  position: absolute;

  left: 0;
  bottom: 0;

  height: 2px;
  width: 100%;

  background: var(--accent-primary);

  transform-origin: left;

  animation:
    toastProgress 3.5s linear forwards;
}

.toast.success .toast-progress {
  background: #22c55e;
}

.toast.error .toast-progress {
  background: #ef4444;
}

@keyframes toastProgress {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}