:root {
  --joule-purple-1: #5D36FF;   /* == prod aurora mesh-d1 */
  --joule-purple-2: #7B42F0;
  --joule-purple-3: #A100C2;   /* == prod aurora mesh-c2 */
  --joule-chrome:   #14082F;
  --joule-chrome-2: #1F1340;
  --joule-text:     #f5f5fb;
  --joule-muted:    rgba(245,245,251,.65);
  --joule-radius:   16px;

  /* Issue #392 — aurora mesh layers ported from prod com.sap.das.webclient.
     mesh-d1 == --joule-purple-1, mesh-c2 == --joule-purple-3 (reused). */
  --joule-mesh-a:   #8000dc;
  --joule-mesh-b:   #afd8ff;
  --joule-mesh-c1:  #f1acff;
  --joule-mesh-d2:  #cfc3ff;
}

#joule-panel {
  position: fixed; top: 4rem; right: 1rem;
  width: min(420px, calc(100vw - 2rem));
  height: min(640px, calc(100vh - 5rem));
  display: none;
  flex-direction: column;
  background: var(--joule-chrome);
  color: var(--joule-text);
  border-radius: var(--joule-radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
  z-index: 9000;
  overflow: hidden;
}
#joule-panel:not([hidden]) { display: flex; }
#joule-panel[data-expanded="true"] {
  width: min(720px, calc(100vw - 2rem));
  height: calc(100vh - 5rem);
}

.joule-panel__header {
  display: flex; align-items: center; gap: .5rem;
  padding: .9rem 1rem;
  background: linear-gradient(165deg, var(--joule-purple-1) 0%, var(--joule-purple-2) 45%, var(--joule-purple-3) 100%);
}
.joule-panel__title { flex: 1; margin: 0; font-size: 1rem; font-weight: 600; }
.joule-panel__icon-btn {
  background: none; border: 0; color: inherit;
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; cursor: pointer;
}
.joule-panel__icon-btn:hover { background: rgba(255,255,255,.12); }
.joule-panel__icon-btn svg { width: 16px; height: 16px; fill: currentColor; }

.joule-panel__overflow {
  position: absolute; top: 3.4rem; right: 3rem;
  background: var(--joule-chrome-2);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; padding: .25rem; min-width: 160px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4); z-index: 1;
}
.joule-panel__overflow button {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; color: inherit;
  padding: .5rem .75rem; border-radius: 6px; cursor: pointer; font-size: .9rem;
}
.joule-panel__overflow button:hover { background: rgba(255,255,255,.08); }

.joule-panel__banner { padding: .5rem 1rem; font-size: .85rem; opacity: .85;
  background: rgba(0,0,0,.2); }

.joule-panel__body {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column;
  scroll-behavior: smooth;
  background: var(--joule-chrome);
}

.joule-panel__hero {
  display: flex; flex-direction: column; align-items: center;
  padding: 1.5rem 1rem;
  background: linear-gradient(165deg, var(--joule-purple-1) 0%, var(--joule-purple-2) 45%, var(--joule-purple-3) 100%);
  text-align: center;
}
.joule-panel__hero[hidden] { display: none; }
.joule-panel__hero-mark { margin-bottom: 1rem; }
.joule-panel__hero-greeting { margin: 0 0 1.25rem; font-size: 1.15rem; font-weight: 500; }
.joule-panel__starters {
  display: flex; flex-direction: column; gap: .5rem;
  width: 100%; max-width: 320px;
}
.joule-panel__starter {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: inherit; padding: .55rem .85rem; border-radius: 999px;
  cursor: pointer; font-size: .85rem; text-align: left;
  transition: background .15s;
}
.joule-panel__starter:hover { background: rgba(255,255,255,.22); }

.joule-panel__chat { display: flex; flex-direction: column; }
.joule-panel__chat[hidden] { display: none; }
.joule-panel__footer[hidden] { display: none; }
.joule-panel__transcript {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1rem;
}

.joule-msg {
  padding: .65rem .85rem; border-radius: 12px; max-width: 85%;
  line-height: 1.5; word-wrap: break-word; font-size: .92rem;
}
.joule-msg--user { align-self: flex-end; background: rgba(255,255,255,.1); }
.joule-msg--assistant { align-self: flex-start; background: var(--joule-chrome-2); }
.joule-msg--error { background: #5a1f1f; }
.joule-msg p { margin: 0 0 .5rem; }
.joule-msg p:last-child { margin-bottom: 0; }
.joule-msg pre { background: rgba(0,0,0,.35); padding: .5rem .65rem; border-radius: 6px; overflow-x: auto; }
.joule-msg code { background: rgba(0,0,0,.35); padding: .1em .3em; border-radius: 3px; font-size: .9em; }
.joule-msg pre code { background: none; padding: 0; }
.joule-msg ul, .joule-msg ol { margin: .25rem 0 .5rem 1.25rem; padding: 0; }
.joule-msg a { color: #b487ff; text-decoration: underline; }
.joule-msg a:hover { color: #d4b8ff; }

.joule-typing {
  display: inline-flex; gap: 4px; align-items: center;
  padding: .65rem .85rem; background: var(--joule-chrome-2); border-radius: 12px;
  align-self: flex-start;
}
.joule-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--joule-muted);
  animation: jouleBlink 1.2s infinite ease-in-out;
}
.joule-typing span:nth-child(2) { animation-delay: .2s; }
.joule-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes jouleBlink { 0%,80%,100% { opacity:.25 } 40% { opacity:1 } }
@media (prefers-reduced-motion: reduce) {
  .joule-typing span { animation: none; opacity: 1; }
}

.joule-tool-chip {
  align-self: flex-start; font-size: .75rem;
  padding: .15rem .55rem; border-radius: 999px;
  background: rgba(255,255,255,.12);
}

.joule-step-citations { align-self: stretch; margin: .25rem 0; }
.joule-step-citations__heading {
  margin: 0 0 .25rem; font-size: .75rem; color: var(--joule-muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.joule-step-citations ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.joule-step-citations li { font-size: .82rem; }
.joule-step-citations__link { color: inherit; text-decoration: underline; }
.joule-step-citations__link:hover { color: var(--joule-purple-2); }
.joule-step-citations__score { font-size: .72rem; color: var(--joule-muted); }

.joule-cards { display: flex; flex-direction: column; gap: .5rem; align-self: stretch; }
.joule-card {
  background: var(--joule-chrome-2);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: .65rem .8rem; cursor: pointer; text-align: left;
  color: inherit; font: inherit;
  transition: background .15s, border-color .15s;
}
.joule-card:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.joule-card__title { font-weight: 600; margin: 0 0 .15rem; font-size: .92rem; }
.joule-card__desc  { margin: 0 0 .25rem; font-size: .82rem; color: var(--joule-muted); }
.joule-card__tag   { font-size: .7rem; color: var(--joule-muted); text-transform: uppercase; letter-spacing: .05em; }

.joule-panel__ai-notice { flex: 1; display: flex; flex-direction: column; min-height: 0;
  background: var(--joule-chrome); }
.joule-panel__ai-notice[hidden] { display: none; }
.joule-panel__ai-notice-header {
  display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.joule-panel__ai-notice-header h3 { margin: 0; font-size: 1rem; }
.joule-panel__ai-notice-body { overflow-y: auto; padding: 1rem; line-height: 1.5; font-size: .9rem; }
.joule-panel__ai-notice-body p { margin: 0 0 .75rem; }

.joule-panel__footer { background: var(--joule-chrome); border-top: 1px solid rgba(255,255,255,.1); }
.joule-panel__form { display: flex; gap: .5rem; padding: .75rem 1rem .25rem; align-items: center; }
.joule-panel__input {
  flex: 1; padding: .65rem .85rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.15);
  background: var(--joule-chrome-2); color: var(--joule-text); font-size: .9rem;
}
.joule-panel__input::placeholder { color: var(--joule-muted); }
.joule-panel__input:focus { outline: none; border-color: var(--joule-purple-2); }
.joule-panel__send {
  width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: var(--joule-purple-1); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.joule-panel__send:hover { background: var(--joule-purple-2); }
.joule-panel__send:disabled { background: rgba(255,255,255,.15); cursor: not-allowed; }
.joule-panel__send svg { width: 16px; height: 16px; }
.joule-panel__disclaimer { margin: 0; padding: 0 1rem .65rem; font-size: .7rem;
  color: var(--joule-muted); text-align: center; }

.joule-mark--small svg { width: 24px; height: 24px; overflow: visible; }
.joule-mark--large svg { width: 64px; height: 64px; overflow: visible;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.35)); }

.joule-panel__icon-btn:focus-visible,
.joule-panel__starter:focus-visible,
.joule-card:focus-visible,
.joule-panel__send:focus-visible {
  outline: 2px solid var(--joule-purple-1);
  outline-offset: 2px;
}

/* Step-help FAB — desktop-only, bottom-right floating action button.
   Hidden by default; revealed by joule.js after ChatConfig.enabled. */
.joule-step-fab {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(165deg, var(--joule-purple-1) 0%, var(--joule-purple-2) 45%, var(--joule-purple-3) 100%);
  color: var(--joule-text);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, .06);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, bottom 200ms ease;
}
/* Issue #102: when the in-flow Previous/Next nav row scrolls into view,
   joule.js sets data-near-nav-bottom on the FAB. The Next pill is right-
   aligned (flex spacer) and the FAB is fixed bottom-right, so they share
   the same horizontal lane — vertical lift is the only escape. The first
   pass at 5rem still kissed the pill on common viewport sizes; bumping to
   8rem clears the row's padding + button + a comfortable gap. On <=960px
   the FAB is display:none (mobile rule below) so this is a no-op there.
   The transition:bottom on .joule-step-fab makes the slide smooth. */
.joule-step-fab[data-near-nav-bottom] {
  bottom: 8rem;
}
.joule-step-fab[hidden] { display: none; }
.joule-step-fab:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .3);
}
.joule-step-fab:focus-visible {
  outline: 2px solid var(--joule-purple-1);
  outline-offset: 2px;
}
.joule-step-fab .joule-mark { color: var(--joule-text); }
.joule-step-fab__label { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .joule-step-fab { transition: none; }
  .joule-step-fab:hover { transform: none; }
}

@media (max-width: 960px) {
  .joule-step-fab { display: none !important; }
}

/* Issue #392 — aurora mesh background.
   Used inside .joule-panel__hero, scaled-down inside .joule-panel__header,
   and as an animated paint on .joule-step-fab (Hugo public site only).
   Source: production Joule Web Client (com.sap.das.webclient v1.37.0). */
.joule-aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.joule-aurora__layer {
  position: absolute;
  bottom: 0;
  left: 0;
  background-repeat: no-repeat;
  width: 200%;
  height: 50%;
  filter: blur(50px);
  will-change: transform;
  pointer-events: none;
  z-index: 0;
}
.joule-aurora__layer--a {
  opacity: 0.2;
  background-image: radial-gradient(ellipse at 50% 130%,
    var(--joule-mesh-a), var(--joule-mesh-a), transparent 50%);
  animation: jouleFloatA 14s ease-in-out infinite;
}
.joule-aurora__layer--b {
  opacity: 0.5;
  background-image: radial-gradient(ellipse at 50% 110%,
    var(--joule-mesh-b), var(--joule-mesh-b), transparent 50%);
  animation: jouleFloatB 12s ease-in-out infinite;
}
.joule-aurora__layer--c {
  opacity: 0.18;
  background-image: radial-gradient(ellipse at 50% 100%,
    var(--joule-mesh-c1), var(--joule-purple-3), transparent 50%);
  animation: jouleFloatC 16s ease-in-out infinite;
}
.joule-aurora__layer--d {
  opacity: 0.18;
  background-image: radial-gradient(ellipse at 50% 100%,
    var(--joule-purple-1), var(--joule-mesh-d2), transparent 50%);
  animation: jouleFloatD 15s ease-in-out infinite;
}

@keyframes jouleFloatA {
  0%   { transform: translate3d( 10%, 0,   0) scale(1.10); }
  50%  { transform: translate3d(-100%, 0,  0) scale(1.08); }
  100% { transform: translate3d( 10%, 0%,  0) scale(1.18); }
}
@keyframes jouleFloatB {
  0%   { transform: translate3d(-80%, 0,   0) scale(1.10); }
  50%  { transform: translate3d(-10%, 10%, 0) scale(1.08); }
  100% { transform: translate3d(-80%, 0%,  0) scale(1.18); }
}
@keyframes jouleFloatC {
  0%   { transform: translate3d( 30%, 0,   0) scale(1.10); }
  50%  { transform: translate3d(-30%,-10%, 0) scale(1.08); }
  100% { transform: translate3d( 30%, 0%,  0) scale(1.18); }
}
@keyframes jouleFloatD {
  0%   { transform: translate3d(-20%, 0%,  0) scale(1.10); }
  50%  { transform: translate3d( 10%,-10%, 0) scale(1.08); }
  100% { transform: translate3d(-20%, 0%,  0) scale(1.18); }
}

/* Hero — full-strength aurora (replaces the static linear-gradient at the
/* Hero — full-strength aurora (replaces the static linear-gradient at the
   pre-existing .joule-panel__hero rule).
   `flex: 1` makes the hero grow to fill .joule-panel__body's free space so
   the aurora layers (height:50% of hero) cover the whole panel below the
   header — without it the hero only sized to the logo+greeting+starters
   and the aurora bottomed out about halfway down the panel (#392 followup). */
.joule-panel__hero {
  position: relative;
  flex: 1;
  background: var(--joule-chrome);
}
.joule-panel__hero-content {
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  width: 100%;
}
.joule-panel__hero .joule-panel__hero-mark {
  animation: jouleBob 2s ease-in-out infinite;
}

/* Header strip — same paint, smaller scale, larger blur, less motion. */
.joule-panel__header {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg,
    var(--joule-purple-1) 0%, var(--joule-purple-2) 45%, var(--joule-purple-3) 100%);
}
.joule-panel__header > * { position: relative; z-index: 1; }
.joule-panel__header .joule-aurora__layer {
  height: 200%;
  filter: blur(40px);
}

/* Step-help FAB — pill shape gets the aurora as its paint. */
.joule-step-fab {
  background:
    radial-gradient(ellipse at 0% 130%,
      var(--joule-mesh-a), transparent 50%),
    radial-gradient(ellipse at 100% 130%,
      var(--joule-mesh-b), transparent 50%),
    radial-gradient(ellipse at 50% 0%,
      var(--joule-mesh-c1), transparent 60%),
    linear-gradient(165deg,
      var(--joule-purple-1) 0%, var(--joule-purple-2) 45%, var(--joule-purple-3) 100%);
  background-blend-mode: screen, screen, screen, normal;
}

/* Logo bob keyframes (used on .joule-panel__hero-mark above). */
@keyframes jouleBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes jouleBobSettle {
  to { transform: translateY(0); }
}

/* Reduced-motion guard — aurora and bob both stop. The static
   header gradient and FAB linear-gradient remain as the visual fallback. */
@media (prefers-reduced-motion: reduce) {
  .joule-aurora__layer { animation: none; }
  .joule-panel__hero-mark { animation: none; }
}