/* Messages area — padding-top: 0 so sticky children flush to top; spacing added by first child */
.chat-messages {
  flex: 1;
  overflow-y: scroll;
  padding: 0 var(--space-4) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: var(--chat-bg);
  transition: background 0.2s;
}

/* Top spacing for non-shop content. Shop section omits this so its sticky
   tabs sit flush at the top of the scroll viewport. */
.chat-messages > *:first-child:not(.chat-section-welcome) {
  margin-top: var(--space-8);
}

.chat-section-welcome:not(:has(.shop-tabs-wrap)) {
  padding-top: var(--space-8);
}

.chat-section-welcome:has(.shop-tabs-wrap) {
  padding-top: 0;
}

.chat-section-welcome:has(.shop-tabs-wrap) .section-header-top {
  margin-top: var(--space-8);
}

.chat-section-welcome:has(.shop-tabs-wrap) .shop-tabs-wrap {
  padding-top: var(--space-2);
}

/* Once the user has sent messages, the store welcome section is no longer the
   only child. Disable sticky so the tabs scroll away with the products instead
   of hanging at the top of the message thread. */
.chat-messages:has(.chat-msg) .shop-tabs-wrap {
  position: static;
}

.chat-messages::-webkit-scrollbar {
  width: 4px;
}

.chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: var(--chat-scrollbar);
  border-radius: 2px;
}

/* Welcome screen */
.chat-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  padding: var(--space-8) var(--space-4);
  gap: var(--space-4);
}

.chat-welcome-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--chat-text);
  line-height: 1.2;
}

.chat-welcome-ask {
  color: var(--chat-accent);
}

.chat-welcome-subtitle {
  font-size: 1rem;
  color: var(--chat-text-muted);
  max-width: 420px;
  line-height: 1.6;
}

/* Starter prompts */
.chat-starters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-2);
  max-width: 540px;
}

.chat-starter-btn {
  background: var(--chat-starter-bg);
  border: var(--border-width-1) solid var(--chat-border);
  color: var(--chat-starter-text);
  border-radius: 100px;
  padding: var(--space-2) var(--space-4);
  font-size: 0.875rem;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
  font-family: inherit;
  white-space: nowrap;
}

.chat-starter-btn:hover {
  background: var(--chat-surface-hover);
  border-color: var(--chat-accent);
  color: var(--chat-text);
}

/* Individual messages */
.chat-msg {
  display: flex;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  scroll-margin-top: 1rem;
}

.chat-msg.user {
  justify-content: flex-end;
}

.chat-msg.assistant {
  justify-content: flex-start;
  flex-direction: column;
  align-items: flex-start;
}

.chat-msg-bubble {
  padding: 0.7rem var(--space-4);
  border-radius: var(--radius-lg);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 80%;
}

.chat-msg.user .chat-msg-bubble {
  background: var(--chat-surface);
  color: var(--chat-text);
  border-bottom-right-radius: 4px;
}

.chat-msg.assistant .chat-msg-bubble {
  background: var(--chat-accent);
  color: #fff;
  border-bottom-left-radius: 4px;
  border: none;
}

/* Link chips below assistant messages */
.chat-msg-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-width: 80%;
  padding: 0.875rem 0;
}

.chat-msg-link-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem var(--space-3);
  background: var(--chat-surface);
  border: var(--border-width-1) solid var(--chat-border);
  border-radius: var(--radius-full);
  color: var(--chat-text-muted);
  font-size: 0.8125rem;
  text-decoration: none;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
  white-space: nowrap;
  line-height: 1.4;
  font-family: inherit;
}

.chat-msg-link-chip:hover {
  background: var(--chat-surface-hover);
  border-color: var(--chat-text-muted);
  color: var(--chat-text);
}

.chat-msg-link-chip svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.6;
}

/* Message action bar (copy / like / dislike / share) */
.chat-msg-actions {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0;
}

.chat-msg-action-btn {
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 0.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s;
}

.chat-msg-action-btn:hover {
  background: var(--chat-surface-hover);
}

.chat-msg-action-btn img {
  width: 14px;
  height: 14px;
  display: block;
}

/* In dark mode the SVG fills (#555) are near-invisible — invert them */
html[data-theme="dark"] .chat-msg-action-btn img {
  filter: invert(1) opacity(0.8);
}

/* Active states (liked / disliked) should be clearly visible */
html[data-theme="dark"] .chat-msg-action-btn.liked img,
html[data-theme="dark"] .chat-msg-action-btn.disliked img {
  filter: invert(1) opacity(0.9);
}

/* Reduce top padding on link chips row when action bar is present */
.chat-msg-actions + .chat-msg-links {
  padding-top: var(--space-3);
}

/* Bold text in assistant bubbles */
.chat-msg.assistant .chat-msg-bubble .chat-inline-link {
  color: inherit;
  text-decoration: none;
  word-break: break-all;
}

.chat-msg.assistant .chat-msg-bubble .chat-inline-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.chat-msg.assistant .chat-msg-bubble strong {
  font-weight: 600;
}

/* Block content inside assistant bubbles */
.chat-msg.assistant .chat-msg-bubble p {
  margin: 0 0 0.6rem;
}

.chat-msg.assistant .chat-msg-bubble p:last-child {
  margin-bottom: 0;
}

.chat-msg.assistant .chat-msg-bubble ul,
.chat-msg.assistant .chat-msg-bubble ol {
  padding-left: var(--space-5);
  margin: 0 0 0.6rem;
}

.chat-msg.assistant .chat-msg-bubble ul:last-child,
.chat-msg.assistant .chat-msg-bubble ol:last-child {
  margin-bottom: 0;
}

.chat-msg.assistant .chat-msg-bubble li {
  margin-bottom: 0.4rem;
  padding-left: 0;
  line-height: 1.6;
}

.chat-msg.assistant .chat-msg-bubble li:last-child {
  margin-bottom: 0;
}

.chat-msg.assistant .chat-msg-bubble blockquote {
  margin: var(--space-2) 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-1) solid var(--chat-border);
  color: var(--chat-text);
  font-style: italic;
  border-radius: var(--radius-lg);
  background: var(--chat-sidebar-bg);
}

.chat-msg.assistant .chat-msg-bubble blockquote:last-child {
  margin-bottom: 0;
}

/* Code block (uses ds-code-block from design-system.css) */
.chat-msg.assistant .chat-msg-bubble .chat-code-block {
  margin: var(--space-2) 0 var(--space-3);
  border-radius: var(--radius-md);
}

.chat-msg.assistant .chat-msg-bubble .chat-code-block:last-child {
  margin-bottom: 0;
}

/* Markdown table */
.chat-msg.assistant .chat-msg-bubble .chat-table-wrap {
  margin: var(--space-2) 0 var(--space-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  border: var(--border-width-1) solid var(--chat-border);
}

.chat-msg.assistant .chat-msg-bubble .chat-table-wrap:last-child {
  margin-bottom: 0;
}

.chat-msg.assistant .chat-msg-bubble .chat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.chat-msg.assistant .chat-msg-bubble .chat-table thead {
  background: var(--chat-sidebar-bg);
}

.chat-msg.assistant .chat-msg-bubble .chat-table th {
  padding: var(--space-2) 0.875rem;
  text-align: left;
  font-weight: 600;
  color: var(--chat-text);
  white-space: nowrap;
  border-bottom: var(--border-width-1) solid var(--chat-border);
}

.chat-msg.assistant .chat-msg-bubble .chat-table td {
  padding: 0.875rem;
  color: var(--chat-assistant-text);
  border-bottom: var(--border-width-1) solid var(--chat-border-subtle);
  vertical-align: top;
}

.chat-msg.assistant .chat-msg-bubble .chat-table tbody tr:last-child td {
  border-bottom: none;
}

/* Typing indicator */
.chat-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-2) var(--space-1);
}

.chat-typing span {
  width: 6px;
  height: 6px;
  background: var(--chat-typing-dot);
  border-radius: 50%;
  will-change: transform;
  animation: typing-bounce 1.2s infinite ease-in-out;
}

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

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

@keyframes typing-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    background: var(--chat-typing-dot);
  }
  30% {
    transform: translateY(-6px);
    background: var(--chat-accent);
  }
}

/* Scroll to bottom button */
.chat-scroll-btn {
  position: absolute;
  bottom: calc(var(--chat-input-height, 96px) + 0.75rem);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s,
    transform 0.2s;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  border: none;
  background: color-mix(in srgb, var(--chat-bg) 70%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--chat-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: var(--shadow-sm);
}

.chat-scroll-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.chat-scroll-btn:hover {
  background: color-mix(in srgb, var(--chat-surface-hover) 80%, transparent);
  color: var(--chat-text);
}