/* =====================================================================
   LEO — the HubHacks chat helper  (css/leo.css)
   =====================================================================
   Styles for the chat bubble in the bottom-right corner of every page.
   Colours come from the site's brand variables in css/styles.css, so
   changing --rbc-blue / --rbc-gold there re-colours Leo too.
   The answers Leo gives live in js/leo.js.
   ===================================================================== */

.leo-root { --leo-ease: cubic-bezier(.2, .9, .3, 1.2); position: fixed; right: 20px; bottom: 20px; z-index: 1000; font-family: var(--font-body); }

/* ---------- Launcher button ---------- */
.leo-launcher {
  position: relative; width: 68px; height: 68px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--rbc-blue-deep); box-shadow: 0 10px 30px -8px rgb(0 43 92 / 0.6), 0 0 0 4px rgb(255 210 0 / 0.9);
  display: grid; place-items: center; transition: transform .25s var(--leo-ease);
  animation: leo-float 3.2s ease-in-out infinite;
}
.leo-launcher:hover { transform: scale(1.07); }
.leo-launcher:focus-visible { outline: 3px solid var(--rbc-blue); outline-offset: 4px; }
.leo-launcher svg { width: 54px; height: 54px; }
.leo-launcher::after { /* soft pulsing ring */
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--rbc-gold);
  animation: leo-ring 2.6s ease-out infinite; pointer-events: none;
}
.leo-launcher .leo-x { position: absolute; inset: 0; display: grid; place-items: center; color: var(--white); font-size: 1.6rem; opacity: 0; transform: rotate(-90deg); transition: .25s; }
.leo-open .leo-launcher { animation: none; }
.leo-open .leo-launcher::after { display: none; }
.leo-open .leo-launcher svg { opacity: 0; transform: scale(.4); }
.leo-open .leo-launcher .leo-x { opacity: 1; transform: none; }
.leo-launcher svg { transition: .25s; }

/* ---------- "Hi, I'm Leo" greeting bubble ---------- */
.leo-hello {
  position: absolute; right: 80px; bottom: 12px; width: max-content; max-width: 230px;
  background: var(--white); color: var(--text-main); border-radius: 16px 16px 4px 16px; padding: .7rem .95rem;
  box-shadow: 0 12px 30px -10px rgb(0 43 92 / 0.35); font-size: .92rem; line-height: 1.4; cursor: pointer;
  opacity: 0; transform: translateY(8px) scale(.9); transform-origin: bottom right; pointer-events: none;
  transition: opacity .3s, transform .35s var(--leo-ease);
}
.leo-hello b { color: var(--rbc-blue); }
.leo-hello.show { opacity: 1; transform: none; pointer-events: auto; }
.leo-open .leo-hello { display: none; }

/* ---------- Chat panel ---------- */
.leo-panel {
  position: absolute; right: 0; bottom: 84px; width: min(380px, calc(100vw - 32px)); height: min(600px, calc(100vh - 120px));
  display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: #f5f8fc;
  box-shadow: 0 30px 70px -20px rgb(0 43 92 / 0.55), 0 0 0 1px rgb(0 43 92 / 0.08);
  opacity: 0; transform: translateY(16px) scale(.92); transform-origin: bottom right; visibility: hidden;
  transition: opacity .25s, transform .35s var(--leo-ease), visibility 0s .35s;
}
.leo-open .leo-panel { opacity: 1; transform: none; visibility: visible; transition: opacity .25s, transform .35s var(--leo-ease); }

.leo-head {
  position: relative; display: flex; align-items: center; gap: .8rem; padding: 1.1rem 1.1rem 1.25rem;
  background: var(--rbc-blue-deep); color: var(--white); overflow: hidden;
}
.leo-head::before { /* gold glow behind the avatar */
  content: ""; position: absolute; width: 180px; height: 180px; left: -50px; top: -80px; border-radius: 50%;
  background: radial-gradient(circle, rgb(255 210 0 / 0.35), transparent 70%); animation: leo-glow 5s ease-in-out infinite;
}
.leo-head .leo-avatar { position: relative; width: 48px; height: 48px; flex: none; border-radius: 50%; background: rgb(255 255 255 / 0.1); display: grid; place-items: center; }
.leo-head .leo-avatar svg { width: 44px; height: 44px; }
.leo-head .leo-title { position: relative; flex: 1; min-width: 0; }
.leo-head strong { display: block; font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.leo-head small { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: rgb(255 255 255 / 0.75); }
.leo-head small::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 3px rgb(61 220 132 / 0.25); }
.leo-close { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgb(255 255 255 / 0.1); color: var(--white); font-size: 1.1rem; cursor: pointer; display: grid; place-items: center; }
.leo-close:hover { background: rgb(255 255 255 / 0.2); }

/* ---------- Messages ---------- */
.leo-log { flex: 1; overflow-y: auto; padding: 1.1rem 1rem .5rem; display: flex; flex-direction: column; gap: .6rem; scroll-behavior: smooth; }
.leo-row { display: flex; align-items: flex-end; gap: .5rem; animation: leo-in .35s var(--leo-ease) both; }
.leo-row.me { justify-content: flex-end; }
.leo-row .leo-mini { width: 28px; height: 28px; flex: none; }
.leo-msg { max-width: 82%; padding: .65rem .9rem; border-radius: 18px; font-size: .93rem; line-height: 1.5; overflow-wrap: anywhere; }
.leo-row.bot .leo-msg { background: var(--white); color: var(--text-main); border-bottom-left-radius: 6px; box-shadow: 0 2px 8px -3px rgb(0 43 92 / 0.18); }
.leo-row.me .leo-msg { background: var(--rbc-blue); color: var(--white); border-bottom-right-radius: 6px; }
.leo-msg p { margin: 0 0 .45em; } .leo-msg p:last-child { margin: 0; }
.leo-msg ul { margin: .3em 0 .45em; padding-left: 1.1em; } .leo-msg li { margin: .15em 0; }
.leo-msg a { color: var(--rbc-blue); font-weight: 600; }
.leo-msg .leo-note { display: block; margin-top: .45em; padding: .45em .6em; border-radius: 10px; background: rgb(255 210 0 / 0.18); font-size: .86rem; }

/* typing dots */
.leo-typing { display: inline-flex; gap: 4px; padding: .8rem .95rem; }
.leo-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--rbc-blue); opacity: .35; animation: leo-dot 1.1s infinite; }
.leo-typing i:nth-child(2) { animation-delay: .15s; } .leo-typing i:nth-child(3) { animation-delay: .3s; }

/* ---------- Suggestion chips ---------- */
/* Options wrap onto extra lines so none are hidden past the panel edge.
   Very long lists scroll up and down inside a short, capped area. */
.leo-chips { display: flex; flex-wrap: wrap; gap: .4rem; max-height: 12.5rem; overflow-y: auto; padding: .35rem 1rem .6rem; flex: none; }
.leo-chips:empty { padding: 0; }
.leo-chip {
  flex: none; border: 1px solid rgb(0 93 170 / 0.3); background: var(--white); color: var(--rbc-blue); border-radius: 999px;
  padding: .38rem .75rem; font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; transition: .2s;
}
.leo-chip:hover { background: var(--rbc-blue); color: var(--white); border-color: var(--rbc-blue); transform: translateY(-1px); }

/* ---------- Input ---------- */
.leo-form { display: flex; gap: .5rem; padding: .7rem .8rem .8rem; background: var(--white); border-top: 1px solid var(--border); }
.leo-form input {
  flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 999px; padding: .7rem 1rem; font: inherit; font-size: .95rem;
  color: var(--text-main); background: #f5f8fc; outline: none; transition: border-color .2s, box-shadow .2s;
}
.leo-form input:focus { border-color: var(--rbc-blue); box-shadow: 0 0 0 3px rgb(0 93 170 / 0.15); background: var(--white); }
.leo-send { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; background: var(--rbc-gold); color: var(--rbc-blue-deep); cursor: pointer; display: grid; place-items: center; transition: transform .2s var(--leo-ease); }
.leo-send:hover { transform: scale(1.08) rotate(-8deg); }
.leo-send svg { width: 20px; height: 20px; }
.leo-foot { text-align: center; font-size: .72rem; color: var(--text-soft); background: var(--white); padding: 0 1rem .6rem; margin: 0; }

/* ---------- Leo's face animation ---------- */
.leo-eye { transform-box: fill-box; transform-origin: center; animation: leo-blink 4.5s infinite; }

/* ---------- Animations ---------- */
@keyframes leo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes leo-ring  { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.45); opacity: 0; } }
@keyframes leo-glow  { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(20px, 10px); } }
@keyframes leo-in    { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes leo-dot   { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-5px); opacity: 1; } }
@keyframes leo-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

/* Phones: the panel becomes a sheet across the bottom of the screen */
@media (max-width: 520px) {
  .leo-root { right: 14px; bottom: 14px; }
  .leo-launcher { width: 60px; height: 60px; } .leo-launcher svg { width: 48px; height: 48px; }
  .leo-panel { position: fixed; right: 8px; left: 8px; bottom: 84px; width: auto; height: min(78vh, 620px); }
  .leo-hello { right: 70px; }
}

/* People who turn off motion in their device settings get no animation */
@media (prefers-reduced-motion: reduce) {
  .leo-root *, .leo-root *::before, .leo-root *::after { animation: none !important; transition: none !important; }
}

/* A spot on the page reached from a link in Leo's answer flashes briefly */
.leo-flash { animation: leo-flash 2.2s ease-out 1; border-radius: 16px; }
@keyframes leo-flash { 0%, 35% { box-shadow: 0 0 0 4px var(--rbc-gold, #ffd200); } 100% { box-shadow: 0 0 0 4px transparent; } }
@media (prefers-reduced-motion: reduce) { .leo-flash { animation: none; } }