.ecosystem-assistant {
  --assistant-ink: #12383a;
  --assistant-aqua: #0b9f96;
  --assistant-surface: rgba(248, 253, 251, .97);
  position: fixed;
  z-index: 120;
  right: max(22px, calc(env(safe-area-inset-right) + 16px));
  bottom: calc(82px + env(safe-area-inset-bottom));
  width: 56px;
  height: 56px;
  overflow: visible;
  pointer-events: none;
}

.ecosystem-assistant--docked {
  position: static;
  width: 0;
  height: 0;
}

.ecosystem-assistant__orb {
  position: relative;
  isolation: isolate;
  pointer-events: auto;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .98) 0 4%, transparent 18%),
    radial-gradient(circle at 68% 72%, #5ff4e4 0 7%, transparent 34%),
    conic-gradient(from 18deg, #064f63, #0db9ad 23%, #8af5d1 41%, #5c82e8 61%, #8d5dd7 76%, #0a847e 90%, #064f63);
  box-shadow:
    0 18px 38px rgba(6, 78, 76, .3),
    0 0 22px rgba(42, 225, 204, .22),
    inset 0 0 16px rgba(255, 255, 255, .55);
  display: grid;
  place-items: center;
  overflow: visible;
  cursor: pointer;
  transform: translateZ(0);
  animation: assistant-plasma-float 4.8s ease-in-out infinite;
}

.ecosystem-assistant__orb::before,
.ecosystem-assistant__orb::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}
.ecosystem-assistant__orb::before {
  z-index: 0;
  inset: 5px;
  opacity: .88;
  background:
    radial-gradient(ellipse at 28% 72%, rgba(255, 255, 255, .9) 0 4%, transparent 24%),
    conic-gradient(from 210deg, transparent 0 18%, rgba(212, 255, 245, .88) 24%, transparent 39% 63%, rgba(138, 118, 241, .68) 76%, transparent 91%);
  filter: blur(1px);
  animation: assistant-plasma-swirl 6.8s linear infinite;
}
.ecosystem-assistant__orb::after {
  z-index: 1;
  inset: 10px;
  border: 1px solid rgba(232, 255, 251, .5);
  background: radial-gradient(circle, rgba(4, 53, 61, .14), rgba(3, 41, 50, .62));
  box-shadow: inset 0 0 10px rgba(226, 255, 248, .38);
}
.ecosystem-assistant__orb span {
  position: relative;
  z-index: 2;
  font: 800 .8125rem/1 var(--font-display, "Manrope", sans-serif);
  letter-spacing: .08em;
  text-shadow: 0 1px 7px rgba(0, 35, 39, .8);
}
.ecosystem-assistant__orb i { position: absolute; z-index: -1; inset: 50% auto auto 50%; width: 68px; height: 68px; border: 1px solid rgba(22, 178, 164, .26); border-radius: 50%; box-shadow: 0 0 20px rgba(48, 226, 206, .18); transform: translate(-50%, -50%); animation: assistant-breathe 3.2s ease-in-out infinite; }

.ecosystem-assistant__sheet {
  pointer-events: auto;
  position: fixed;
  z-index: 121;
  left: auto;
  right: max(18px, calc(env(safe-area-inset-right) + 14px));
  bottom: calc(78px + env(safe-area-inset-bottom));
  width: min(420px, calc(100vw - 36px));
  max-height: min(650px, calc(100dvh - 108px));
  padding: 18px;
  color: var(--assistant-ink);
  background: var(--assistant-surface);
  border: 1px solid rgba(26, 117, 112, .13);
  border-radius: 30px;
  box-shadow: 0 32px 90px rgba(14, 48, 49, .28);
  backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(28px, 0, 0) scale(.98);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  display: grid;
  gap: 13px;
}

/* One assistant entry point: the water-plasma orb lives in the centre nav. */
.bottom-nav .ai-nav {
  overflow: visible;
}

.bottom-nav .ai-nav::before {
  display: none;
}

.bottom-nav .ai-nav__mark {
  position: relative;
  isolation: isolate;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  margin-top: -8px;
  overflow: visible;
  color: #fff;
  border: 1px solid rgba(255,255,255,.84);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 25%, rgba(255,255,255,.98) 0 4%, transparent 19%),
    radial-gradient(circle at 70% 72%, #69f5e4 0 7%, transparent 34%),
    conic-gradient(from 18deg, #064f63, #0db9ad 23%, #8af5d1 41%, #5c82e8 61%, #8d5dd7 76%, #0a847e 90%, #064f63);
  box-shadow: 0 10px 24px rgba(6,78,76,.28), 0 0 20px rgba(42,225,204,.2), inset 0 0 13px rgba(255,255,255,.55);
  font: 800 .625rem/1 var(--font-display, "Manrope", sans-serif);
  font-style: normal;
  letter-spacing: .06em;
  text-shadow: 0 1px 7px rgba(0,35,39,.72);
  animation: assistant-plasma-float 4.8s ease-in-out infinite;
}

.bottom-nav .ai-nav__mark::before,
.bottom-nav .ai-nav__mark::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.bottom-nav .ai-nav__mark::before {
  z-index: -1;
  inset: -7px;
  opacity: .72;
  background: radial-gradient(circle, rgba(117,242,225,.24), rgba(99,120,231,.13) 48%, transparent 72%);
  filter: blur(4px);
  animation: assistant-breathe 3.2s ease-in-out infinite;
}

.bottom-nav .ai-nav__mark::after {
  z-index: -1;
  inset: 5px;
  border: 1px solid rgba(232,255,251,.48);
  background: conic-gradient(from 210deg, transparent 0 18%, rgba(212,255,245,.76) 26%, transparent 43% 66%, rgba(138,118,241,.58) 78%, transparent 92%);
  filter: blur(.5px);
  animation: assistant-plasma-swirl 6.8s linear infinite;
}

.bottom-nav .ai-nav[aria-expanded="true"] .ai-nav__mark {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 13px 30px rgba(6,78,76,.34), 0 0 28px rgba(42,225,204,.32), inset 0 0 14px rgba(255,255,255,.66);
}

.ecosystem-assistant__sheet.is-open { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0) scale(1); }
.ecosystem-assistant__sheet header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ecosystem-assistant__sheet header div { display: grid; gap: 3px; }
.ecosystem-assistant__sheet header small { color: var(--assistant-aqua); text-transform: uppercase; letter-spacing: .11em; font: 750 .625rem/1.3 var(--font-display, "Manrope", sans-serif); }
.ecosystem-assistant__sheet header strong { font: 780 clamp(1.1875rem, 4.6vw, 1.75rem)/1.08 var(--font-display, "Manrope", sans-serif); }
.ecosystem-assistant__sheet header button { width: 39px; height: 39px; border: 1px solid rgba(18, 56, 58, .12); border-radius: 50%; color: inherit; background: rgba(255,255,255,.7); font-size: 1.5625rem; }

.ecosystem-assistant__modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.ecosystem-assistant__modes button {
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 9px;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid rgba(19, 113, 108, .13);
  border-radius: 17px;
  color: #315c5d;
  background: rgba(237, 248, 245, .78);
  text-align: left;
  font-family: var(--font-body, "Manrope", sans-serif);
}
.ecosystem-assistant__modes button > span { grid-row: 1 / 3; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #087d77; background: rgba(255,255,255,.86); }
.ecosystem-assistant__modes button > b { align-self: end; font-size: .8125rem; }
.ecosystem-assistant__modes button > small { align-self: start; overflow: hidden; color: #78908f; font-size: .625rem; text-overflow: ellipsis; white-space: nowrap; }
.ecosystem-assistant__modes button.is-active { color: #fff; border-color: transparent; background: linear-gradient(135deg, #0e9188, #0b6668); box-shadow: 0 10px 24px rgba(10, 103, 100, .18); }
.ecosystem-assistant__modes button.is-active > span { color: #075f60; }
.ecosystem-assistant__modes button.is-active > small { color: rgba(255,255,255,.72); }

.ecosystem-assistant__examples { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.ecosystem-assistant__examples::-webkit-scrollbar { display: none; }
.ecosystem-assistant__examples button { flex: 0 0 auto; border: 1px solid rgba(11, 159, 150, .16); border-radius: 999px; padding: 8px 11px; color: #326365; background: rgba(225, 246, 242, .75); font: 650 .75rem/1.2 var(--font-body, "Manrope", sans-serif); }

.ecosystem-assistant__transcript { min-height: 118px; max-height: 290px; overflow: auto; display: grid; align-content: start; gap: 8px; padding: 4px 2px; }
.ecosystem-assistant__bubble { width: fit-content; max-width: 88%; margin: 0; padding: 10px 13px; border-radius: 17px 17px 17px 5px; background: #e8f6f3; color: #254f50; font: 560 .875rem/1.42 var(--font-body, "Manrope", sans-serif); }
.ecosystem-assistant__bubble--user { justify-self: end; border-radius: 17px 17px 5px 17px; color: #fff; background: #137f79; }
.ecosystem-assistant__bubble--plan { background: #fff7de; color: #554a28; }
.ecosystem-assistant__bubble--success { background: #dff5e8; color: #185d3a; }
.ecosystem-assistant__bubble--error { background: #fff0ec; color: #9b4136; }

.ecosystem-assistant__confirm { width: 100%; min-height: 48px; border: 0; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #0f9c92, #08716e); box-shadow: 0 12px 28px rgba(8, 113, 110, .2); font: 760 .875rem/1.2 var(--font-display, "Manrope", sans-serif); }
.ecosystem-assistant__confirm:disabled { opacity: .55; }
.ecosystem-assistant__composer { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; padding: 7px; border: 1px solid rgba(23, 95, 93, .13); border-radius: 20px; background: rgba(255,255,255,.82); }
.ecosystem-assistant__composer button { border: 0; border-radius: 14px; color: #fff; background: #123b3c; font: 800 1.25rem/1 sans-serif; }
.ecosystem-assistant__composer input { min-width: 0; border: 0; outline: 0; color: var(--assistant-ink); background: transparent; font: 600 .875rem/1.3 var(--font-body, "Manrope", sans-serif); }
.ecosystem-assistant__mic { color: #0a8982 !important; background: #dff5f0 !important; }
.ecosystem-assistant__mic.is-recording { color: #fff !important; background: #d45f54 !important; animation: assistant-recording 1s ease-in-out infinite; }
.ecosystem-assistant__privacy { margin: 0; color: #718a8b; text-align: center; font: 520 .625rem/1.35 var(--font-body, "Manrope", sans-serif); }

html[data-theme="dark"] .ecosystem-assistant {
  --assistant-ink: #ecfffb;
  --assistant-surface: rgba(8, 31, 32, .97);
}
html[data-theme="dark"] .ecosystem-assistant__sheet { border-color: rgba(144, 233, 220, .13); box-shadow: 0 32px 90px rgba(0,0,0,.58); }
html[data-theme="dark"] .ecosystem-assistant__sheet header button,
html[data-theme="dark"] .ecosystem-assistant__composer { background: rgba(21, 53, 54, .9); border-color: rgba(170, 234, 224, .14); }
html[data-theme="dark"] .ecosystem-assistant__composer input { color: #ecfffb; }
html[data-theme="dark"] .ecosystem-assistant__examples button { color: #c8eee8; background: rgba(20, 69, 66, .78); }
html[data-theme="dark"] .ecosystem-assistant__modes button { color: #d7f2ee; border-color: rgba(145,226,216,.14); background: rgba(18, 60, 59, .82); }
html[data-theme="dark"] .ecosystem-assistant__modes button.is-active { color: #fff; background: linear-gradient(135deg, #0d8d84, #164c60); }
html[data-theme="dark"] .ecosystem-assistant__bubble { color: #d9f7f2; background: #174746; }
html[data-theme="dark"] .ecosystem-assistant__bubble--user { color: #fff; background: #0b8179; }
html[data-theme="dark"] .ecosystem-assistant__bubble--plan { color: #fff0ba; background: #4a421f; }
html[data-theme="dark"] .ecosystem-assistant__bubble--success { color: #d6ffe7; background: #1f5738; }
html[data-theme="dark"] .ecosystem-assistant__bubble--error { color: #ffd9d4; background: #612f2c; }

body.auth-pending .ecosystem-assistant,
body.web-auth-visible .ecosystem-assistant { display: none; }

@keyframes assistant-breathe { 50% { transform: translate(-50%, -50%) scale(1.06); opacity: .3; } }
@keyframes assistant-plasma-swirl { to { transform: rotate(360deg); } }
@keyframes assistant-plasma-float { 50% { transform: translate3d(0, -2px, 0) scale(1.025); } }
@keyframes assistant-recording { 50% { transform: scale(.94); } }
@media (max-width: 600px) {
  .ecosystem-assistant__sheet { left: 50%; right: auto; bottom: calc(70px + env(safe-area-inset-bottom)); width: min(440px, calc(100vw - 20px)); border-radius: 26px; padding: 15px; transform: translate(-50%, 24px) scale(.98); }
  .ecosystem-assistant__sheet.is-open { transform: translate(-50%, 0) scale(1); }
}
@media (max-width: 430px) {
  .bottom-nav .ai-nav__mark { width: 36px; height: 36px; flex-basis: 36px; margin-top: -5px; }
  .ecosystem-assistant__modes button { min-height: 54px; padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ecosystem-assistant__orb, .ecosystem-assistant__orb::before,
  .ecosystem-assistant__orb i, .ecosystem-assistant__mic.is-recording,
  .bottom-nav .ai-nav__mark, .bottom-nav .ai-nav__mark::before, .bottom-nav .ai-nav__mark::after { animation: none; }
  .ecosystem-assistant__sheet { transition: none; }
}