/* Support Chat — isolated styles (relies on global CSS variables in :root) */

.chat-modal { 
  max-width: 720px; 
  width: min(720px, 92vw); 
}

.chat-log{
  height: 280px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}

.msg{
  max-width: 80%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--wb-border);
  background: var(--wb-surface-2);
  box-shadow: var(--shadow);
  font-size: 14px;
  line-height: 1.4;
  color: var(--wb-text);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.msg--me{
  margin-left: auto;
  background: linear-gradient(135deg, var(--wb-grad-from), var(--wb-grad-to));
  color: white;
  border-color: transparent;
}

.msg__meta{
  margin-top: 4px;
  font-size: 11px;
  color: var(--wb-text-dim);
}

.chat-ft{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

#chatInput{
  width: 100%;
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid var(--wb-border);
  background: var(--wb-surface-2);
  color: var(--wb-text);
  outline: none;
}

#chatInput:focus{
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(176,137,255,.25);
}

/* Optional: small fade-in for incoming support messages */
@keyframes msgIn {
  from { transform: translateY(4px); opacity: 0 }
  to   { transform: translateY(0);   opacity: 1 }
}
.msg { animation: msgIn 140ms ease-out; }