/* zeonai website chat: round button with the zeon mark, glass panel above it */
.zc { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60; font-family: var(--sans); }
.zc__fab {
  position: relative; width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: #fff; color: #000; box-shadow: 0 12px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.2);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.zc__fab:hover { transform: scale(1.06); }
.zc__fab > svg { width: 30px; height: auto; }
.zc__tip {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translate(8px, -50%); white-space: nowrap; pointer-events: none;
  background: rgba(16,16,18,.82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #fff;
  font-size: 14px; font-weight: 500; padding: 9px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  opacity: 0; transition: opacity .25s, transform .3s cubic-bezier(.2,.8,.2,1);
}
.zc__tip sup, .zc__head sup { font-size: .6em; }
.zc__fab:hover .zc__tip, .zc.is-hint .zc__tip { opacity: 1; transform: translate(0, -50%); }
.zc.is-open .zc__tip { opacity: 0 !important; }

.zc__panel {
  position: absolute; right: 0; bottom: 72px; width: min(380px, calc(100vw - 32px)); height: min(580px, calc(100svh - 120px));
  display: flex; flex-direction: column; border-radius: 22px; overflow: hidden;
  background: rgba(14,14,16,.86); -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.6);
  animation: zc-in .3s cubic-bezier(.2,.8,.2,1) backwards;
}
@keyframes zc-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.zc__head { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.zc__av { width: 28px; height: 28px; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; }
.zc__av svg { width: 16px; height: auto; }
.zc__head b { font-size: 16px; font-weight: 600; }
.zc__left { margin-left: auto; font-size: 12px; color: var(--text-2); }
.zc__x { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }

.zc__gate { padding: 18px 16px; display: grid; gap: 12px; overflow: auto; }
.zc__gate p { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.5; }
.zc__gate label { display: grid; gap: 6px; font-size: 13px; color: var(--text-2); }
.zc__gate input[name=name], .zc__gate input[name=email] {
  font: inherit; font-size: 15px; color: #fff; background: #0b0b0d; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 10px 12px; outline: none;
}
.zc__gate input:focus { border-color: #fff; }
.zc__consent { grid-template-columns: 18px 1fr !important; align-items: start; gap: 10px !important; font-size: 12.5px !important; line-height: 1.45; }
.zc__consent input { margin: 2px 0 0; accent-color: #fff; }
.zc__consent a { color: #fff; }
.zc__msg { color: #fff !important; font-size: 13px !important; }
.zc__go { font: inherit; font-size: 15px; font-weight: 600; height: 44px; border-radius: 999px; border: 0; background: #fff; color: #000; cursor: pointer; margin-top: 4px; }

.zc__log { flex: 1; min-height: 0; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.zc__m { max-width: 86%; font-size: 14.5px; line-height: 1.45; }
.zc__m p { margin: 0; white-space: pre-wrap; }
.zc__m img { display: block; max-width: 180px; border-radius: 12px; margin-bottom: 6px; }
.zc__m--me { align-self: flex-end; background: #2a2a2e; padding: 9px 12px; border-radius: 16px 16px 5px 16px; }
.zc__m--ai { align-self: flex-start; color: #ececef; }
.zc__m--note { align-self: center; max-width: 100%; text-align: center; font-size: 12.5px; color: var(--text-2); }
.zc__m.is-typing p:empty::before { content: "• • •"; letter-spacing: 2px; color: var(--text-2); animation: zc-dots 1s infinite; }
.zc__m.is-waiting p { color: var(--text-2); font-size: 13px; }
@keyframes zc-dots { 50% { opacity: .35; } }

.zc__bar { flex: none; padding: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.zc__thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.zc__thumbs img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; cursor: pointer; }
.zc__row { display: flex; align-items: flex-end; gap: 8px; }
.zc__add { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; font-size: 20px; cursor: pointer; }
.zc__add.is-off { opacity: .35; pointer-events: none; }
.zc__row textarea { flex: 1; min-width: 0; resize: none; font: inherit; font-size: 15px; color: #fff; background: #0b0b0d; border: 1px solid rgba(255,255,255,.12);
  border-radius: 19px; padding: 9px 14px; max-height: 120px; outline: none; line-height: 1.35; }
.zc__row textarea:focus { border-color: rgba(255,255,255,.4); }
.zc__send { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 0; background: #fff; color: #000; font-size: 18px; font-weight: 700; cursor: pointer; }
@media (max-width: 520px) { .zc__panel { position: fixed; right: 8px; left: 8px; bottom: 84px; width: auto; height: min(560px, calc(100svh - 110px)); } }

/* [hidden] must win over display:flex/grid inside the chat */
.zc [hidden] { display: none !important; }

/* Smaller button that builds up like the nav Download (pop + turn in), desktop only */
.zc__fab { width: 46px; height: 46px; }
.zc__fab > svg { width: 23px; }
.zc__panel { bottom: 60px; }
.zc { opacity: 0; transform: scale(.35) rotate(-25deg); pointer-events: none;
  transition: opacity .3s ease, transform .55s cubic-bezier(.34,1.56,.64,1); transform-origin: 100% 100%; }
.zc.is-in { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 760px) { .zc { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .zc { transition: none; } }

/* Chat as a side panel on the right, full height, sliding in */
.zc__panel {
  position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: min(420px, 100vw); height: auto; border-radius: 0;
  background: rgba(12,12,14,.9); -webkit-backdrop-filter: blur(26px) saturate(140%); backdrop-filter: blur(26px) saturate(140%);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.12), -30px 0 80px rgba(0,0,0,.55);
  animation: zc-side .42s cubic-bezier(.2,.8,.2,1) backwards;
}
@keyframes zc-side { from { transform: translateX(100%); } }
.zc__head { padding: 18px 16px 14px 20px; min-height: 64px; }
.zc__gate, .zc__log { padding-left: 20px; padding-right: 20px; }
.zc__bar { padding: 12px 14px 16px; }
.zc.is-open .zc__fab { opacity: 0; pointer-events: none; transform: scale(.6); }
.zc__fab { transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .2s; }

/* Drop zone */
.zc__drop { position: absolute; inset: 64px 12px 12px; border: 1.5px dashed rgba(255,255,255,.5); border-radius: 18px;
  display: none; place-items: center; background: rgba(0,0,0,.55); font-size: 15px; font-weight: 500; color: #fff; pointer-events: none; }
.zc__panel.is-drop .zc__drop { display: grid; }
@media (max-width: 520px) { .zc__panel { left: 0; width: 100vw; bottom: 0; height: auto; } }
.zc__panel.is-closing { animation: zc-side-out .38s cubic-bezier(.5,0,.75,0) forwards; pointer-events: none; }
@keyframes zc-side-out { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .zc__panel, .zc__panel.is-closing { animation-duration: .01s; } }

/* Wide enough to cover the nav's right column (Download pill) at every window width; nothing peeks out */
.zc__panel { width: min(100vw, clamp(440px, calc((100vw - 1240px) / 2 + 200px), 720px)); background: rgba(12,12,14,.95); }
html.zc-open .nav-cta { opacity: 0 !important; pointer-events: none; transition: opacity .2s; }

/* Formatted answers */
.zc__md { display: grid; gap: 10px; }
.zc__md p { margin: 0; }
.zc__md strong { font-weight: 600; color: #fff; }
.zc__md ol, .zc__md ul { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; }
.zc__md li { padding-left: .2em; }
.zc__md li::marker { color: var(--text-2); font-variant-numeric: tabular-nums; }
.zc__md code { font-size: .92em; background: rgba(255,255,255,.08); padding: 1px 5px; border-radius: 5px; }
.zc__m--ai { max-width: 100%; }
.zc__m.is-typing .zc__md:empty::before { content: "• • •"; letter-spacing: 2px; color: var(--text-2); animation: zc-dots 1s infinite; }
.zc__m.is-waiting .zc__md { color: var(--text-2); font-size: 13px; }

/* Suggested questions under the greeting */
.zc__ideas { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 2px; }
.zc__ideas button {
  font: inherit; font-size: 14px; text-align: left; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px; padding: 8px 12px; cursor: pointer; transition: background .2s, border-color .2s;
}
.zc__ideas button:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }

/* Limit reached: greyed-out input, clickable email */
.zc__bar.is-locked { opacity: .4; pointer-events: none; }
.zc__m--note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* Nudge bubble: clickable, opens the chat */
.zc.is-hint .zc__tip { pointer-events: auto; cursor: pointer; }