/* ==========================================================================
   Joy — Awareness AI
   Scoped under .joy-* so it cannot leak into the theme or Elementor styles.
   ========================================================================== */

:root {
  --joy-accent: #12b5d8;
  --joy-accent-deep: #0b7fa0;
  --joy-navy: #1e2f5f;
}

:where(#joy-root),
:where(#joy-root) * {
  box-sizing: border-box;
}

#joy-root {
  --joy-ink: #14213d;
  --joy-body: #3b4a63;
  --joy-muted: #6b7a91;
  --joy-line: #e2eaf2;
  --joy-line-soft: #eef3f8;
  --joy-surface: #ffffff;
  --joy-canvas: #f7fafc;
  --joy-bubble-bot: #f1f7fb;
  --joy-radius: 18px;
  --joy-radius-sm: 12px;
  --joy-shadow-lift: 0 2px 6px rgba(20, 33, 61, 0.06), 0 12px 28px rgba(20, 33, 61, 0.1);
  --joy-shadow-panel: 0 4px 12px rgba(20, 33, 61, 0.08), 0 24px 64px rgba(20, 33, 61, 0.18);
  --joy-ease: cubic-bezier(0.22, 1, 0.36, 1);

  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 999999;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--joy-body);
  -webkit-font-smoothing: antialiased;
}

/* Theme firewall.
   This used to be wrapped entirely in :where() for ZERO specificity, so the
   bare .joy-* rules below would win. Zero also loses to every theme rule, and
   Elementor's global kit styles each element with .elementor-kit-N h2 /
   .elementor-kit-N button at (0,1,1) — so the panel heading rendered at 60px
   in the site serif and the header icon buttons inherited padding 16px 32px.

   The rules below now score (1,0,1): above anything the theme can write
   without an id, and still below the .joy-* component rules, which carry
   #joy-root and score (1,1,0). Every .joy-* selector in this file is
   prefixed for exactly that reason — keep it that way when adding rules. */
#joy-root :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: normal;
  text-transform: none;
}

#joy-root :is(button, input, textarea, select) {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  min-width: 0;
  letter-spacing: normal;
  text-transform: none;
  box-shadow: none;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}

#joy-root button {
  cursor: pointer;
}

/* font: inherit matters here — the handoff buttons and source cards are <a>,
   and the theme styles links directly, so the widget font never reaches them
   by inheritance alone. Without this they render in the site's Open Sans. */
#joy-root a {
  font: inherit;
  text-decoration: none;
  letter-spacing: normal;
  text-transform: none;
  box-shadow: none;
}

/* Textarea is deliberately excluded — the composer field shows its own ring. */
#joy-root :is(button, a, [tabindex]):focus-visible {
  outline: 2px solid var(--joy-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

#joy-root textarea:focus-visible {
  outline: none;
}

/* ------------------------------------------------------------------ launcher */

#joy-root .joy-launcher {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 20px 9px 11px;
  background: var(--joy-surface);
  border: 1px solid var(--joy-line);
  border-radius: 999px;
  box-shadow: var(--joy-shadow-lift);
  transition: transform 0.28s var(--joy-ease), box-shadow 0.28s var(--joy-ease);
  margin-left: auto;
}

#joy-root .joy-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(20, 33, 61, 0.08), 0 18px 40px rgba(20, 33, 61, 0.16);
}

#joy-root .joy-launcher__mark {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--joy-accent) 0%, var(--joy-accent-deep) 100%);
  color: #fff;
}

#joy-root .joy-launcher__mark svg {
  width: 21px;
  height: 21px;
  display: block;
}

/* ---- Joy's photo -------------------------------------------------------
   The photo fills its circle edge to edge. The gradient behind it is only
   visible in .has-mark state (no avatar configured, or the image failed),
   which is why the mark rules above still matter. */
#joy-root .joy-face {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%;
}

#joy-root .joy-launcher__mark:not(.has-mark),
#joy-root .joy-header__mark:not(.has-mark) {
  background: #fff;
  padding: 0;
}

#joy-root .joy-header__mark:not(.has-mark) {
  overflow: hidden;
}

/* Presence dot, carried over from the original launcher. The circle must stay
   overflow:visible for the dot to sit on its edge, so the photo is clipped by
   its own border-radius (see .joy-launcher__mark > *) rather than by the wrapper. */
#joy-root .joy-launcher__mark {
  position: relative;
  overflow: visible;
}

#joy-root .joy-launcher__mark > * {
  border-radius: 50%;
  overflow: hidden;
}

#joy-root .joy-launcher__mark::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #22c07a;
  border: 2px solid #fff;
}

#joy-root .joy-header__mark:not(.has-mark) {
  border-color: rgba(255, 255, 255, 0.45);
}

#joy-root .joy-welcome__avatar svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Fallback state: the mark is a line drawing, so it needs breathing room
   inside the circle rather than bleeding to the edge like a photo does. */
#joy-root .joy-welcome__avatar.has-mark {
  padding: 15px;
  color: var(--joy-accent-deep);
}

#joy-root .joy-welcome__avatar {
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  display: block;
  margin: 0 0 14px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(30, 47, 95, 0.08),
    0 6px 18px rgba(30, 47, 95, 0.12);
}

#joy-root .joy-launcher__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

#joy-root .joy-launcher__label {
  font-weight: 650;
  font-size: 15px;
  color: var(--joy-ink);
  letter-spacing: -0.01em;
}

#joy-root .joy-launcher__hint {
  font-size: 11.5px;
  font-weight: 550;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--joy-accent-deep);
  margin-top: 2px;
}

/* Teaser bubble */

#joy-root .joy-teaser {
  position: relative;
  max-width: 268px;
  margin: 0 0 12px auto;
  padding: 13px 38px 13px 16px;
  background: var(--joy-surface);
  border: 1px solid var(--joy-line);
  border-radius: 16px 16px 5px 16px;
  box-shadow: var(--joy-shadow-lift);
  font-size: 14px;
  color: var(--joy-ink);
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  transition: opacity 0.4s var(--joy-ease), transform 0.4s var(--joy-ease);
  pointer-events: none;
}

#joy-root .joy-teaser.is-in {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

#joy-root .joy-teaser__dismiss {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--joy-muted);
  transition: background 0.2s, color 0.2s;
}

#joy-root .joy-teaser__dismiss:hover {
  background: var(--joy-line-soft);
  color: var(--joy-ink);
}

/* --------------------------------------------------------------------- panel */

#joy-root .joy-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 396px;
  /* 710px, not 636px: at 636 the welcome message plus three starter prompts
     overflow by 66px and the third prompt sits below the fold on open. The
     min() still caps against the viewport, so short windows are unaffected. */
  height: min(710px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--joy-surface);
  border: 1px solid var(--joy-line);
  border-radius: 22px;
  box-shadow: var(--joy-shadow-panel);
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transform-origin: 100% 100%;
  pointer-events: none;
  transition: opacity 0.3s var(--joy-ease), transform 0.34s var(--joy-ease);
}

#joy-root .joy-panel.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

#joy-root.is-open .joy-launcher,
#joy-root.is-open .joy-teaser {
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
}

/* Header */

#joy-root .joy-header {
  position: relative;
  flex: 0 0 auto;
  padding: 18px 18px 17px;
  background: linear-gradient(135deg, var(--joy-navy) 0%, #1b3f70 52%, var(--joy-accent-deep) 100%);
  color: #fff;
  overflow: hidden;
}

#joy-root .joy-header::after {
  content: "";
  position: absolute;
  right: -56px;
  top: -78px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

#joy-root .joy-header__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

#joy-root .joy-header__mark {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: #fff;
}

#joy-root .joy-header__mark svg {
  width: 22px;
  height: 22px;
  display: block;
}

#joy-root .joy-header__id {
  flex: 1 1 auto;
  min-width: 0;
}

#joy-root .joy-header__title {
  margin: 0;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: #fff;
}

#joy-root .joy-header__subtitle {
  margin: 2px 0 0;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#joy-root .joy-header__actions {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
}

#joy-root .joy-iconbtn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.85);
  transition: background 0.2s, color 0.2s;
}

#joy-root .joy-iconbtn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

#joy-root .joy-iconbtn svg {
  width: 17px;
  height: 17px;
  display: block;
}

/* Log */

#joy-root .joy-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 18px 8px;
  background: var(--joy-canvas);
  scrollbar-width: thin;
  scrollbar-color: #ccd8e4 transparent;
}

#joy-root .joy-log::-webkit-scrollbar {
  width: 8px;
}

#joy-root .joy-log::-webkit-scrollbar-thumb {
  background: #ccd8e4;
  border-radius: 99px;
  border: 2px solid var(--joy-canvas);
}

/* Welcome block */

#joy-root .joy-welcome__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 8px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: #e5f4fa;
  color: var(--joy-accent-deep);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

#joy-root .joy-welcome__eyebrow svg {
  width: 13px;
  height: 13px;
}

#joy-root .joy-welcome__text {
  margin: 0 0 6px;
  font-size: 15.5px;
  color: var(--joy-ink);
}

#joy-root .joy-welcome__text strong {
  font-weight: 650;
}

#joy-root .joy-welcome__note {
  margin: 12px 0 20px;
  padding-left: 11px;
  border-left: 2px solid var(--joy-line);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--joy-muted);
}

#joy-root .joy-prompts__label {
  margin: 0 0 9px;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--joy-muted);
}

#joy-root .joy-prompts {
  display: grid;
  gap: 7px;
  margin-bottom: 4px;
}

#joy-root .joy-prompt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  background: var(--joy-surface);
  border: 1px solid #d9e4ee;
  box-shadow: 0 1px 2px rgba(20, 33, 61, 0.04);
  border-radius: var(--joy-radius-sm);
  font-size: 14px;
  font-weight: 550;
  color: var(--joy-ink);
  transition: border-color 0.2s, transform 0.2s var(--joy-ease), box-shadow 0.2s;
}

#joy-root .joy-prompt:hover {
  border-color: var(--joy-accent);
  transform: translateX(2px);
  box-shadow: 0 3px 12px rgba(18, 181, 216, 0.14);
}

#joy-root .joy-prompt__text {
  flex: 1 1 auto;
}

#joy-root .joy-prompt__arrow {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--joy-accent);
  opacity: 0.55;
  transition: opacity 0.2s, transform 0.2s var(--joy-ease);
}

#joy-root .joy-prompt:hover .joy-prompt__arrow {
  opacity: 1;
  transform: translateX(2px);
}

/* Messages */

#joy-root .joy-msg {
  display: flex;
  margin-bottom: 14px;
  animation: joy-rise 0.34s var(--joy-ease) both;
}

@keyframes joy-rise {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
}

#joy-root .joy-msg--user {
  justify-content: flex-end;
}

#joy-root .joy-bubble {
  max-width: 86%;
  padding: 11px 14px;
  border-radius: var(--joy-radius);
  font-size: 14.5px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#joy-root .joy-msg--user .joy-bubble {
  background: var(--joy-navy);
  color: #fff;
  border-bottom-right-radius: 6px;
}

#joy-root .joy-msg--bot .joy-bubble {
  background: var(--joy-bubble-bot);
  color: var(--joy-ink);
  border: 1px solid #e3eff6;
  border-bottom-left-radius: 6px;
}

#joy-root .joy-bubble a {
  color: var(--joy-accent-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#joy-root .joy-msg--bot .joy-bubble.is-crisis {
  background: #fff6f2;
  border-color: #f6d4c4;
  color: #6b2d14;
}

#joy-root .joy-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 1px;
  vertical-align: -0.15em;
  background: var(--joy-accent-deep);
  animation: joy-blink 1s steps(2, start) infinite;
}

@keyframes joy-blink {
  50% {
    opacity: 0;
  }
}

/* Typing */

#joy-root .joy-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 13px 15px;
  background: var(--joy-bubble-bot);
  border: 1px solid #e3eff6;
  border-radius: var(--joy-radius);
  border-bottom-left-radius: 6px;
}

#joy-root .joy-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #93a8bd;
  animation: joy-bounce 1.3s infinite ease-in-out;
}

#joy-root .joy-typing span:nth-child(2) {
  animation-delay: 0.16s;
}

#joy-root .joy-typing span:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes joy-bounce {
  0%,
  70%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  35% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* Source cards */

#joy-root .joy-sources {
  margin: -4px 0 16px;
  display: grid;
  gap: 6px;
  max-width: 86%;
}

#joy-root .joy-sources__label {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--joy-muted);
}

#joy-root .joy-source {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--joy-surface);
  border: 1px solid var(--joy-line);
  border-radius: var(--joy-radius-sm);
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--joy-ease);
}

#joy-root .joy-source:hover {
  border-color: var(--joy-accent);
  box-shadow: 0 3px 12px rgba(18, 181, 216, 0.14);
  transform: translateY(-1px);
}

#joy-root .joy-source__icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #e5f4fa;
  color: var(--joy-accent-deep);
}

#joy-root .joy-source__icon svg {
  width: 14px;
  height: 14px;
}

#joy-root .joy-source__body {
  flex: 1 1 auto;
  min-width: 0;
}

#joy-root .joy-source__title {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--joy-ink);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#joy-root .joy-source__meta {
  display: block;
  font-size: 11.5px;
  color: var(--joy-muted);
  margin-top: 1px;
}

/* Error state */

#joy-root .joy-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 13px;
  background: #fff8f4;
  border: 1px solid #f6dccb;
  border-radius: var(--joy-radius-sm);
  font-size: 13.5px;
  color: #7a3f1c;
}

#joy-root .joy-error__retry {
  margin-top: 7px;
  display: inline-block;
  font-size: 13px;
  font-weight: 650;
  color: var(--joy-accent-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Handoff card */

#joy-root .joy-handoff {
  margin: 4px 0 16px;
  padding: 14px;
  background: linear-gradient(140deg, #f2fafd 0%, #ffffff 100%);
  border: 1px solid #d5eef6;
  border-radius: var(--joy-radius-sm);
}

#joy-root .joy-handoff__title {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 650;
  color: var(--joy-ink);
}

#joy-root .joy-handoff__text {
  margin: 0 0 11px;
  font-size: 13px;
  color: var(--joy-body);
}

#joy-root .joy-handoff__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

#joy-root .joy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  transition: transform 0.2s var(--joy-ease), box-shadow 0.2s, background 0.2s;
}

#joy-root .joy-btn--primary {
  background: linear-gradient(135deg, var(--joy-accent) 0%, var(--joy-accent-deep) 100%);
  color: #fff;
  box-shadow: 0 2px 10px rgba(11, 127, 160, 0.28);
}

#joy-root .joy-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(11, 127, 160, 0.34);
}

#joy-root .joy-btn--ghost {
  background: #fff;
  color: var(--joy-navy);
  border: 1px solid var(--joy-line);
}

#joy-root .joy-btn--ghost:hover {
  border-color: var(--joy-accent);
}

/* Composer */

#joy-root .joy-composer {
  flex: 0 0 auto;
  padding: 12px 14px 10px;
  background: var(--joy-surface);
  border-top: 1px solid var(--joy-line);
}

#joy-root .joy-composer__field {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 6px 6px 6px 14px;
  background: var(--joy-canvas);
  border: 1px solid var(--joy-line);
  border-radius: 22px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#joy-root .joy-composer__field:focus-within {
  border-color: var(--joy-accent);
  box-shadow: 0 0 0 3px rgba(18, 181, 216, 0.14);
}

#joy-root .joy-composer textarea {
  flex: 1 1 auto;
  min-height: 24px;
  max-height: 108px;
  padding: 6px 0;
  border: 0;
  background: none;
  resize: none;
  font: inherit;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--joy-ink);
  outline: none;
}

#joy-root .joy-composer textarea::placeholder {
  color: #93a3b6;
}

#joy-root .joy-send {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--joy-accent) 0%, var(--joy-accent-deep) 100%);
  color: #fff;
  transition: opacity 0.2s, transform 0.2s var(--joy-ease);
}

#joy-root .joy-send svg {
  width: 16px;
  height: 16px;
  display: block;
}

#joy-root .joy-send:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

#joy-root .joy-send:not(:disabled):hover {
  transform: scale(1.06);
}

/* Safety footer */

#joy-root .joy-safety {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--joy-line-soft);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--joy-muted);
}

#joy-root .joy-safety__icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: #c96a3e;
}

#joy-root .joy-safety a {
  color: var(--joy-accent-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* Inline CTA usable inside Elementor content */

#joy-root .joy-inline-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--joy-accent) 0%, var(--joy-accent-deep) 100%);
  color: #fff !important;
  font-weight: 650;
  font-size: 15px;
  cursor: pointer;
  border: 0;
  box-shadow: 0 3px 14px rgba(11, 127, 160, 0.26);
  transition: transform 0.2s var(--joy-ease), box-shadow 0.2s;
}

#joy-root .joy-inline-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 22px rgba(11, 127, 160, 0.32);
}

#joy-root .joy-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------- mobile */

@media (max-width: 560px) {
  #joy-root {
    right: 14px;
    bottom: 14px;
    left: 14px;
  }

  #joy-root .joy-launcher {
    padding: 8px 18px 8px 10px;
  }

  #joy-root .joy-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
    transform: translateY(20px);
  }

  #joy-root .joy-header {
    padding-top: max(18px, env(safe-area-inset-top));
  }

  #joy-root .joy-composer {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  #joy-root .joy-bubble,
  #joy-root .joy-sources {
    max-width: 92%;
  }
}

/* -------------------------------------------------------------- preferences */

@media (prefers-reduced-motion: reduce) {
  #joy-root *,
  #joy-root *::before,
  #joy-root *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media (prefers-contrast: more) {
  #joy-root {
    --joy-line: #9fb3c8;
    --joy-muted: #4a5a70;
  }
}