/* SCHH Community Guide chat component.
   Canonical copy: schh-community-guide/webapp/chat.css — the schh-info
   site repo carries a copy at css/guide-chat.css; edit here, then re-copy.

   All colors/fonts come from CSS custom properties so the host page's
   stylesheet can theme it (see css/custom.css in the site repo). The
   fallbacks keep the standalone page at chat.schh.info presentable. */

#guide-app {
  /* Two distinct roles:
     --ga-accent  buttons, toolbar links, and the resident's own message
                  bubbles. Defaults to the site's brand teal (readable
                  with white text, fits the palette); mapped from the
                  theme in css/custom.css. NOT the theme's yellow primary.
     --ga-link    citation links inside answers — a standard readable blue,
                  distinct from the accent so links look like links. */
  --ga-accent: var(--guide-accent, #1a6e6a);
  --ga-accent-text: var(--guide-accent-text, #ffffff);
  --ga-link: var(--guide-link, #1565c0);
  --ga-ink: var(--guide-ink, #222222);
  --ga-muted: var(--guide-muted, #666666);
  --ga-line: var(--guide-line, #dddddd);
  --ga-surface: var(--guide-surface, #ffffff);
  --ga-bg: var(--guide-bg, transparent);
  --ga-font: var(--guide-font, inherit);
  --ga-heading-font: var(--guide-heading-font, inherit);
  --ga-radius: var(--guide-radius, 10px);

  font-family: var(--ga-font);
  font-size: var(--guide-font-size, 17px);
  line-height: 1.5;
  color: var(--ga-ink);
  background: var(--ga-bg);
  max-width: 46em;
  margin: 0 auto;
  padding: 0 1em;
  overflow-x: hidden;  /* belt-and-suspenders against mobile horizontal scroll */
}
#guide-app *, #guide-app *::before, #guide-app *::after { box-sizing: border-box; }
#guide-app h2 { font-family: var(--ga-heading-font); margin-top: 0; }

#guide-app .ga-card {
  background: var(--ga-surface); border: 1px solid var(--ga-line);
  border-radius: var(--ga-radius); padding: 1.5em; max-width: 26em;
  margin: 2em auto;
}
#guide-app .ga-card p { color: var(--ga-muted); }
#guide-app label { display: block; font-size: .9em; margin-bottom: .3em; }
#guide-app input + label { margin-top: 1em; }
#guide-app input[type=email], #guide-app input[type=text] {
  width: 100%; padding: .6em; font-size: 1em;
  border: 1px solid var(--ga-line); border-radius: 6px;
  background: var(--ga-surface); color: var(--ga-ink);
}
#guide-app .ga-otp { letter-spacing: .5em; text-align: center; font-size: 1.4em; }
#guide-app .ga-btn {
  width: 100%; margin-top: 1em; padding: .7em; font-size: 1em; border: 0;
  border-radius: 6px; background: var(--ga-accent); color: var(--ga-accent-text);
  cursor: pointer; font-family: var(--ga-heading-font);
}
#guide-app .ga-btn[disabled] { opacity: .5; cursor: default; }
#guide-app .ga-linkish {
  background: none; border: none; color: var(--ga-accent); cursor: pointer;
  text-decoration: underline; padding: 0; font-size: .9em;
}
#guide-app .ga-note { font-size: .95em; color: var(--ga-muted); margin-top: 1em; }
#guide-app .ga-nudge {
  border: 2px solid var(--ga-accent); border-radius: 6px;
  padding: .8em 1em; margin-top: 1.2em;
}
#guide-app .ga-nudge p { font-size: .95em; margin-bottom: .2em; }
#guide-app .ga-challenge {
  border: 1px solid var(--ga-line); border-radius: 6px;
  padding: .8em 1em; margin-top: 1em; background: var(--ga-bg, transparent);
}
#guide-app .ga-challenge p { font-size: .92em; margin-bottom: .6em; }
#guide-app .ga-invite {
  background: var(--ga-surface); border: 1px solid var(--ga-line);
  border-radius: var(--ga-radius); padding: 1em 1.5em; margin-bottom: 1em;
  max-width: 26em;
}
#guide-app .ga-invite p { color: var(--ga-muted); font-size: .95em; }
#guide-app .ga-error { color: #a33; font-size: .9em; min-height: 1.2em; margin-top: .6em; }

#guide-app .ga-toolbar {
  display: flex; justify-content: flex-end; align-items: center;
  gap: .5em; padding: .3em 0;
}
#guide-app .ga-toolbar-sep { color: var(--ga-line); }
#guide-app .ga-messages {
  height: var(--guide-chat-height, 60vh); overflow-y: auto; overflow-x: hidden;
  padding: .5em 0;
}
#guide-app .ga-msg { margin: .6em 0; display: flex; }
#guide-app .ga-msg.ga-you { justify-content: flex-end; }
#guide-app .ga-bubble {
  max-width: 85%; padding: .6em .9em; border-radius: 12px; line-height: 1.5;
  overflow-wrap: anywhere;  /* long URLs/tokens wrap instead of forcing scroll */
  min-width: 0;
}
#guide-app .ga-you .ga-bubble {
  background: var(--ga-accent); color: var(--ga-accent-text);
  border-bottom-right-radius: 4px;
}
#guide-app .ga-bot .ga-bubble {
  background: var(--ga-surface); border: 1px solid var(--ga-line);
  border-bottom-left-radius: 4px;
}
#guide-app .ga-bubble a { color: var(--ga-link); }
#guide-app .ga-bubble h2, #guide-app .ga-bubble h3 {
  margin: .7em 0 .3em; font-size: 1.02em; font-family: var(--ga-heading-font);
}
#guide-app .ga-bubble p { margin: .4em 0; }
#guide-app .ga-bubble ul { margin: .3em 0; padding-left: 1.2em; }
#guide-app .ga-bubble table {
  display: block; overflow-x: auto; border-collapse: collapse;
  margin: .6em 0; font-size: .95em;
}
#guide-app .ga-bubble th, #guide-app .ga-bubble td {
  border: 1px solid var(--ga-line); padding: .35em .6em; text-align: left;
  white-space: nowrap;
}
#guide-app .ga-bubble thead th { background: var(--ga-line); font-weight: 600; }
#guide-app .ga-bubble .ga-maplink {
  color: var(--ga-link); text-decoration: none;
  border-bottom: 1px dotted currentColor; white-space: nowrap;
}
#guide-app .ga-bubble .ga-maplink:hover { border-bottom-style: solid; }
#guide-app .ga-mapicon {
  width: .85em; height: .85em; vertical-align: -.12em;
  margin-left: .1em; fill: currentColor; opacity: .55;
}
/* answer feedback thumbs — wrap to their own line below the bot bubble */
#guide-app .ga-msg.ga-bot { flex-wrap: wrap; }
#guide-app .ga-feedback { flex-basis: 100%; display: flex; gap: .15em; padding: .15em 0 0 .3em; }
#guide-app .ga-thumb {
  background: none; border: none; cursor: pointer; padding: .3em;
  color: var(--ga-muted); opacity: .5; line-height: 0; border-radius: 6px;
}
#guide-app .ga-thumb:hover { opacity: 1; background: var(--ga-line); }
#guide-app .ga-thumb svg { width: 1.05em; height: 1.05em; fill: currentColor; }
#guide-app .ga-thumb-dislike svg { transform: rotate(180deg); }
#guide-app .ga-feedback[data-rating="like"] .ga-thumb-like,
#guide-app .ga-feedback[data-rating="dislike"] .ga-thumb-dislike {
  color: var(--ga-accent); opacity: 1;
}
#guide-app .ga-composer { display: flex; gap: .5em; padding: .8em 0 1.2em; }
#guide-app .ga-composer input {
  flex: 1; min-width: 0; padding: .6em; font-size: 1em;
  border: 1px solid var(--ga-line); border-radius: 8px;
  background: var(--ga-surface); color: var(--ga-ink);
}
#guide-app .ga-composer button {
  padding: .6em 1.1em; border: 0; border-radius: 8px; white-space: nowrap;
  background: var(--ga-accent); color: var(--ga-accent-text);
  font-size: 1em; cursor: pointer; font-family: var(--ga-heading-font);
}
#guide-app .ga-hidden { display: none !important; }
#guide-app .ga-typing { color: var(--ga-muted); font-style: italic; }
#guide-app .ga-typing-dots span {
  display: inline-block;
  animation: ga-typing-blink 1.3s infinite both;
}
#guide-app .ga-typing-dots span:nth-child(2) { animation-delay: .2s; }
#guide-app .ga-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes ga-typing-blink {
  0%, 80%, 100% { opacity: .2; }
  40% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #guide-app .ga-typing-dots span { animation: none; }
}