/* CCF College Assistant. Brand: navy #142634, maroon #79001B, khaki #CCCC98, cream #F4F0E8.
 * Every word of text is full black (#000), Pastor Scott's global rule. */
#ccfa-root { --ccfa-navy: #142634; --ccfa-maroon: #79001B; --ccfa-khaki: #CCCC98; --ccfa-cream: #F4F0E8; font-family: Lato, "Helvetica Neue", Arial, sans-serif; color: #000; }
#ccfa-root * { box-sizing: border-box; }

/* Sits above the theme's back to top button. Measured live 27 Oct 2026: that arrow is 49 by 49,
 * 25px from the right and 86px from the bottom (a PDF button sits under it), so it ends 135px up. */
#ccfa-root .ccfa-bubble { position: fixed; right: 20px; bottom: 150px; z-index: 99998; width: 60px; height: 60px; border-radius: 50%; border: 2px solid #000; background: var(--ccfa-khaki); color: #000; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; padding: 0; }
#ccfa-root .ccfa-bubble:focus-visible { outline: 3px solid var(--ccfa-navy); outline-offset: 3px; }
#ccfa-root.ccfa-is-open .ccfa-bubble { display: none; }
/* On a lesson the bubble says what it is: "Practice Partner". */
#ccfa-root.ccfa-mentor .ccfa-bubble { width: auto; border-radius: 30px; padding: 0 18px 0 14px; gap: 8px; }
#ccfa-root.ccfa-mentor .ccfa-head { padding-right: 140px; }
#ccfa-root .ccfa-bubble-label { font-size: 16px; font-weight: 700; color: #000; white-space: nowrap; }
#ccfa-root .ccfa-reset { position: absolute; right: 44px; top: 9px; border: 1px solid #000; border-radius: 6px; background: #fff; color: #000; font-size: 13px; padding: 4px 8px; cursor: pointer; }

#ccfa-root .ccfa-panel { position: fixed; right: 20px; bottom: 20px; z-index: 99999; width: 380px; max-width: calc(100vw - 32px); height: 560px; max-height: calc(100vh - 40px); background: #fff; border: 2px solid var(--ccfa-navy); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
#ccfa-root .ccfa-panel[hidden] { display: none; }

#ccfa-root .ccfa-head { background: var(--ccfa-cream); border-bottom: 2px solid var(--ccfa-navy); padding: 10px 44px 10px 14px; position: relative; font-size: 17px; color: #000; }
#ccfa-root .ccfa-test { display: block; font-size: 12px; color: #000; background: var(--ccfa-khaki); padding: 2px 6px; margin-top: 4px; border-radius: 4px; width: max-content; max-width: 100%; }
#ccfa-root .ccfa-close { position: absolute; right: 6px; top: 6px; width: 34px; height: 34px; border: 0; background: transparent; font-size: 26px; line-height: 1; color: #000; cursor: pointer; }

#ccfa-root .ccfa-langs { margin: 0; padding: 6px 14px; font-size: 13px; line-height: 1.5; color: #000; background: #fff; border-bottom: 1px solid var(--ccfa-khaki); }
#ccfa-root .ccfa-log { flex: 1; overflow-y: auto; padding: 12px; background: #fff; }
#ccfa-root .ccfa-msg { max-width: 88%; margin: 0 0 10px; padding: 9px 12px; border-radius: 10px; font-size: 15px; line-height: 1.45; color: #000; word-wrap: break-word; }
#ccfa-root .ccfa-msg p { margin: 0 0 8px; color: #000; font-size: 15px; line-height: 1.45; }
#ccfa-root .ccfa-msg p:last-child { margin-bottom: 0; }
#ccfa-root .ccfa-msg a { color: #000; text-decoration: underline; font-weight: 700; word-break: break-all; }
#ccfa-root .ccfa-assistant { background: var(--ccfa-cream); border: 1px solid var(--ccfa-khaki); }
#ccfa-root .ccfa-user { background: var(--ccfa-khaki); margin-left: auto; }
#ccfa-root .ccfa-wait { letter-spacing: 2px; }

#ccfa-root .ccfa-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--ccfa-navy); background: #fff; margin: 0; }
#ccfa-root .ccfa-form textarea { flex: 1; resize: none; font: inherit; font-size: 16px; color: #000; border: 1px solid var(--ccfa-navy); border-radius: 8px; padding: 8px; min-height: 44px; margin: 0; background: #fff; }
#ccfa-root textarea::placeholder { color: #000; opacity: 1; }
#ccfa-root .ccfa-send { border: 2px solid #000; border-radius: 8px; background: var(--ccfa-khaki); color: #000; font-weight: 700; padding: 0 14px; cursor: pointer; font-size: 15px; }
#ccfa-root .ccfa-note { margin: 0; padding: 4px 10px 8px; font-size: 11px; color: #000; background: #fff; }
#ccfa-root .ccfa-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* A phone gets the whole screen. */
@media (max-width: 600px) {
  #ccfa-root .ccfa-panel { right: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; border-radius: 0; border: 0; }
  #ccfa-root .ccfa-bubble { right: 14px; bottom: 150px; }
}