/* Two background layers keep the pattern subtle without covering messages or
   intercepting scrolling, text selection, and attachment controls. */
.chat-messages.chat-wallpaper,
.chat-input:not(.chat-composer):has(.chat-composer) {
  background-color: #f7f3ed;
  background-image: linear-gradient(#f7f3ede0, #f7f3ede0), url('/images/chat-doodles.svg');
  background-repeat: repeat;
  background-size: auto, 480px 480px;
  background-position: center top;
}

.dark .chat-messages.chat-wallpaper,
.dark .chat-input:not(.chat-composer):has(.chat-composer) {
  background-color: #0b141a;
  background-image: linear-gradient(#0b141ae8, #0b141ae8), url('/images/chat-doodles.svg');
}

@media (max-width: 640px) {
  .chat-messages.chat-wallpaper,
  .chat-input:not(.chat-composer):has(.chat-composer) {
    background-size: auto, 400px 400px;
  }
}

/* Presentation only: retain both rows, button order and existing hit areas. */
.chat-input:not(.chat-composer) > div:has(.chat-composer) {
  background: transparent;
}

.chat-input:not(.chat-composer) > div:has(.chat-composer) {
  padding: 12px 16px 16px;
}

.chat-input.chat-composer {
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(31, 41, 55, 0.035);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.chat-input.chat-composer:focus-within {
  border-color: rgba(148, 163, 184, 0.36);
  box-shadow: 0 2px 14px rgba(31, 41, 55, 0.05), 0 0 0 2px rgba(148, 163, 184, 0.08);
  --tw-ring-shadow: 0 0 #0000;
}

.chat-composer .chat-textarea::placeholder {
  color: #aab2be;
  opacity: 1;
}

.chat-composer .chat-composer__actions-row :is(.left-icons, .right-icons) > button:not(:has(.lucide-mic, .lucide-send, .lucide-square)):not(.text-red-600),
.chat-composer .chat-composer__actions-row :is(.left-icons, .right-icons) > div > button:not(.text-red-600) {
  color: #929ca9;
  border-radius: 12px;
}

.chat-composer .chat-composer__actions-row :is(.left-icons, .right-icons) > button:not(:has(.lucide-mic, .lucide-send, .lucide-square)):not(.text-red-600):not(:disabled):hover,
.chat-composer .chat-composer__actions-row :is(.left-icons, .right-icons) > div > button:not(.text-red-600):not(:disabled):hover {
  color: #647181;
  background-color: #f3f5f7;
}

.chat-composer .chat-composer__actions-row svg {
  stroke-width: 1.7;
}

.chat-composer .ai-tools > button {
  border: 1px solid #e7ebef;
  border-radius: 12px;
  background: #fff;
  color: #929ca9;
}

.chat-composer .ai-tools > button:not(:disabled):hover {
  background: #f5f7f9;
  color: #647181;
}

.chat-composer .right-icons > button:has(.lucide-mic, .lucide-send) {
  background: #a8afb9;
  color: #fff;
  box-shadow: none;
}

.chat-composer .right-icons > button:has(.lucide-send):not(:disabled) {
  background: #139b7d;
}

.chat-composer .right-icons > button:has(.lucide-mic, .lucide-send):not(:disabled):hover {
  background: #909aa7;
}

.chat-composer .right-icons > button:has(.lucide-send):not(:disabled):hover {
  background: #0d896e;
}

.chat-input:not(.chat-composer):has(.chat-composer) > .chat-ai-toolbar {
  border-color: transparent;
  background: transparent;
}

.chat-input:not(.chat-composer):has(.chat-composer) .chat-ai-toolbar__button {
  border-radius: 12px;
}

html.dark .chat-input:not(.chat-composer) > div:has(.chat-composer),
html.dark .chat-input:not(.chat-composer):has(.chat-composer) > .chat-ai-toolbar {
  background: transparent;
}

html.dark .chat-input.chat-composer {
  background: #18232d;
  border-color: #2a3743;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

html.dark .chat-input.chat-composer:focus-within {
  border-color: #52606d;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.08);
}

html.dark .chat-composer .ai-tools > button {
  background: transparent;
  border-color: #34414d;
  color: #a4afbc;
}

html.dark .chat-composer .ai-tools > button:not(:disabled):hover {
  background: #263441;
  color: #d9e1e9;
}

html.dark .chat-composer .chat-composer__actions-row :is(.left-icons, .right-icons) > button:not(:has(.lucide-mic, .lucide-send, .lucide-square)):not(.text-red-600):not(:disabled):hover,
html.dark .chat-composer .chat-composer__actions-row :is(.left-icons, .right-icons) > div > button:not(.text-red-600):not(:disabled):hover {
  background: #263441;
  color: #d9e1e9;
}

html.dark .chat-composer .chat-textarea::placeholder {
  color: #8b98a7;
}

@media (max-width: 767px) {
  .chat-input:not(.chat-composer) > div:has(.chat-composer) {
    padding: 10px 10px 12px;
  }

  .chat-input.chat-composer {
    padding: 8px;
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-input.chat-composer {
    transition: none;
  }
}