/* GPA page tidy styles */

/* Progress bar initial state (JS can still update width later) */
#bar { width: 33%; }

/* Floating chat button/panel positions */
#gpaChatBtn {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1050;
}

#gpaChatPanel {
  position: fixed;
  right: 1rem;
  bottom: 5.5rem;
  width: 340px;
  max-height: 70vh;
  z-index: 1050;
}

/* wherever you keep styles */
#gpaChatPanel .msg-bot { white-space: pre-line; }
#gpaChatPanel .msg-bot ol,
#gpaChatPanel .msg-bot ul { margin: .25rem 0 0 1rem; }
#gpaChatPanel .msg-bot li { margin: .15rem 0; }

/* Scrollable chat body */
#gpaChatPanel .card-body {
  overflow: auto;
}

#gpaChatLog{
  max-height: 560px;           /* adjust */
  overflow-y: auto;
  overscroll-behavior: contain; /* prevent scroll chaining to page */
  scroll-behavior: smooth;
}

/* Ensure tags always visible and nicely aligned */
#gpaChatLog .msg { gap: .25rem; }
#gpaChatLog .msg .badge { font-size: .75rem; }
#gpaChatLog .msg-user .badge { background-color: var(--bs-primary); }
#gpaChatLog .msg-bot  .badge { background-color: var(--bs-secondary); }

/* Fallback: if some other renderer forgets the badge,
   still show a label via ::before so you’re never without tags */
#gpaChatLog .msg-user:not(:has(.badge))::before {
  content: "You";
  display: inline-block;
  margin-right: .5rem;
  padding: .25rem .5rem;
  border-radius: .5rem;
  background: var(--bs-primary);
  color: #fff;
  font-size: .75rem;
}
#gpaChatLog .msg-bot:not(:has(.badge))::before {
  content: "Advisor";
  display: inline-block;
  margin-right: .5rem;
  padding: .25rem .5rem;
  border-radius: .5rem;
  background: var(--bs-secondary);
  color: #fff;
  font-size: .75rem;
}