/* =========================================================
   CHAT (token-driven)
   Cambia: padding, bubble max width, radius, line height via variabili
   ========================================================= */

/* ===== Chat Main ===== */
main.chat{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100%;
}

/* Messages area */
.messages{
  flex:1;
  padding: var(--contentPadding);
  overflow-y:auto;

  /* smoother scroll */
  scroll-behavior: smooth;
}

/* Message bubble */
.msg{
  max-width: var(--bubbleMaxWidth);
  margin-bottom: 12px;
  padding: 10px 12px;

  border-radius: var(--bubbleRadius);
  line-height: var(--lineHeight);

  white-space: pre-wrap;
  word-break: break-word;

  /* subtle edge */
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

/* User / Assistant colors */
.msg.user{
  margin-left:auto;
  background: var(--user);
  border-color: color-mix(in srgb, var(--user) 55%, transparent);
  color: #0b0f1a; /* keep readable on bright user bubble */
}

.msg.assistant{
  margin-right:auto;
  background: var(--assistant);
  border-color: color-mix(in srgb, var(--assistant) 55%, transparent);
}

/* Optional: nicer code blocks later (kept simple for now) */
.msg code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
}

/* Scrollbar (WebKit) */
.messages::-webkit-scrollbar{
  width:10px;
}
.messages::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: 999px;
}
.messages::-webkit-scrollbar-track{
  background: transparent;
}