.elementor-33577 .elementor-element.elementor-element-83b66f0{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--flex-wrap:wrap;--padding-top:5rem;--padding-bottom:5rem;--padding-left:0rem;--padding-right:0rem;}.elementor-33577 .elementor-element.elementor-element-83b66f0:not(.elementor-motion-effects-element-type-background), .elementor-33577 .elementor-element.elementor-element-83b66f0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-text );}.elementor-33577 .elementor-element.elementor-element-717fc37{padding:0rem 15rem 0rem 15rem;text-align:center;}.elementor-33577 .elementor-element.elementor-element-717fc37 .elementor-heading-title{font-size:3rem;font-weight:900;color:var( --e-global-color-bd47e29 );}.elementor-33577 .elementor-element.elementor-element-23cfa9a{padding:0rem 15rem 0rem 15rem;text-align:center;color:var( --e-global-color-bd47e29 );}.elementor-33577 .elementor-element.elementor-element-37884ec{width:100%;max-width:100%;}.elementor-33577 .elementor-element.elementor-element-665f04e{width:100%;max-width:100%;}.elementor-33577 .elementor-element.elementor-element-8e0b51b.elementor-element{--align-self:flex-start;}.elementor-33577 .elementor-element.elementor-element-7918052{width:100%;max-width:100%;--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-33577 .elementor-element.elementor-element-7918052 .elementor-icon-list-icon i{color:var( --e-global-color-bd47e29 );transition:color 0.3s;}.elementor-33577 .elementor-element.elementor-element-7918052 .elementor-icon-list-icon svg{fill:var( --e-global-color-bd47e29 );transition:fill 0.3s;}.elementor-33577 .elementor-element.elementor-element-7918052 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-33577 .elementor-element.elementor-element-7918052 .elementor-icon-list-item > a{font-size:0.75rem;}.elementor-33577 .elementor-element.elementor-element-7918052 .elementor-icon-list-text{color:var( --e-global-color-bd47e29 );transition:color 0.3s;}.elementor-33577 .elementor-element.elementor-element-c98bf85{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(max-width:1024px){.elementor-33577 .elementor-element.elementor-element-83b66f0{--padding-top:3rem;--padding-bottom:3rem;--padding-left:2rem;--padding-right:2rem;}.elementor-33577 .elementor-element.elementor-element-717fc37{padding:0rem 0rem 0rem 0rem;}.elementor-33577 .elementor-element.elementor-element-23cfa9a{padding:0rem 2rem 0rem 0rem;}}@media(max-width:767px){.elementor-33577 .elementor-element.elementor-element-83b66f0{--justify-content:flex-start;--padding-top:3rem;--padding-bottom:3rem;--padding-left:1rem;--padding-right:1rem;}.elementor-33577 .elementor-element.elementor-element-717fc37{text-align:start;}.elementor-33577 .elementor-element.elementor-element-717fc37 .elementor-heading-title{font-size:2rem;}.elementor-33577 .elementor-element.elementor-element-23cfa9a{text-align:start;}}/* Start custom CSS for html, class: .elementor-element-37884ec *//* ==========================================================================
   Vesper Copilot Widget — Cleaned CSS
   - Based on the attached styles1 (6).css
   - Removed font-family / font shorthand
   - Removed duplicate rules
   - Reordered logically
   - Preserves layout & styling
   ========================================================================== */


/* --------------------------------------------------------------------------
   1) Root / Theme Variables + Base Container
   -------------------------------------------------------------------------- */
.vsp-copilot{
  --vsp-purple:#4F46E5;

  --vsp-navy-0:#05091d;
  --vsp-navy-1:#070f2c;
  --vsp-navy-2:#0a1742;
  --vsp-navy-3:#0e2156;

  --vsp-text:#E9ECFF;
  --vsp-muted: rgba(233,236,255,.74);

  --vsp-border: rgba(208,216,230,.16);
  --vsp-shadow: 0 16px 40px rgba(0,0,0,.28);

  --vsp-shell-grad:
    radial-gradient(1200px 520px at 12% 18%, rgba(79,70,229,.22), transparent 62%),
    radial-gradient(900px 520px at 86% 30%, rgba(90,195,255,.12), transparent 62%),
    radial-gradient(900px 520px at 50% 110%, rgba(79,70,229,.10), transparent 58%),
    linear-gradient(180deg, rgba(10,23,66,.90), rgba(5,9,29,.96));

  --vsp-card-grad:
    radial-gradient(900px 340px at 14% 0%, rgba(79,70,229,.18), transparent 62%),
    radial-gradient(700px 320px at 100% 12%, rgba(90,195,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(14,33,86,.55), rgba(7,15,44,.65));

  --vsp-stream-grad:
    radial-gradient(900px 360px at 10% 0%, rgba(79,70,229,.16), transparent 65%),
    radial-gradient(700px 360px at 92% 16%, rgba(90,195,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(10,23,66,.72), rgba(7,15,44,.70));

  color:var(--vsp-text);
  max-width:100%;
  overflow:hidden;
}


/* --------------------------------------------------------------------------
   2) Shell + Main Layout Containers
   -------------------------------------------------------------------------- */
.vsp-copilot .vsp-shell{
  background: var(--vsp-shell-grad);
  border:1px solid var(--vsp-border);
  border-radius:8px;
  box-shadow: var(--vsp-shadow);
  padding:14px;
  position:relative;
  isolation:isolate;
}

.vsp-copilot .vsp-shell::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:4px;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 34%);
  mask: linear-gradient(#000, transparent 55%);
  opacity:.7;
}

.vsp-copilot .vsp-main{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}

.vsp-copilot .vsp-sidecard{
  background: var(--vsp-card-grad);
  border:1px solid var(--vsp-border);
  border-radius:4px;
  padding:12px;
}


/* --------------------------------------------------------------------------
   3) Section Titles / Hint Text
   -------------------------------------------------------------------------- */
.vsp-copilot .vsp-title{
  margin:0;
  font-size:.95rem;
  letter-spacing:.2px;
  color:#fff;
  font-weight:760;
}

.vsp-copilot .vsp-hint{
  margin:4px 0 10px;
  font-size:.78rem;
  color: rgba(233,236,255,.62);
}


/* --------------------------------------------------------------------------
   4) Suggested Prompts (Roles)
   - Mobile rail by default
   - Desktop becomes vertical list (media query later)
   -------------------------------------------------------------------------- */
.vsp-copilot .vsp-roles--rail{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom:8px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: rgba(233,236,255,.28) rgba(255,255,255,.06);
  scrollbar-width: thin;
}

/* Scrollbar styling — rail */
.vsp-copilot .vsp-roles--rail::-webkit-scrollbar{ height:10px; }
.vsp-copilot .vsp-roles--rail::-webkit-scrollbar-track{
  background: rgba(255,255,255,.06);
  border-radius:999px;
}
.vsp-copilot .vsp-roles--rail::-webkit-scrollbar-thumb{
  background: rgba(233,236,255,.22);
  border-radius:999px;
  border:2px solid rgba(255,255,255,.06);
}
.vsp-copilot .vsp-roles--rail::-webkit-scrollbar-thumb:hover{
  background: rgba(233,236,255,.32);
}

/* Prompt pill cards (shared for mobile + desktop) */
.vsp-copilot .vsp-role{
  flex:0 0 auto;
  padding:10px 12px;
  border-radius:4px;
  border:1px solid rgba(208,216,230,.16);
  background: rgba(255,255,255,.03);
  color: rgba(233,236,255,.80);
  text-decoration:none;
  font-weight:650;
  font-size:.9rem;
  transition: background .12s ease, border-color .12s ease, transform .12s ease, color .12s ease, box-shadow .12s ease;
  scroll-snap-align:start;

  /* Added in your file for prompt layout (kept) */
  display:flex;
  flex-direction:column;
  gap:10px;
  line-height:1.25;
  white-space:normal;
}

.vsp-copilot .vsp-role:hover{
  background: rgba(79,70,229,.12);
  border-color: rgba(79,70,229,.45);
  transform: translateY(-1px);
  color:#fff;
  box-shadow: 0 10px 20px rgba(79,70,229,.14);
}

.vsp-copilot .vsp-role.is-active{
  background: rgba(79,70,229,.20);
  border-color: rgba(79,70,229,.55);
  color:#fff;
}

/* Pill label + prompt text (these classes exist in HTML) */
.vsp-copilot .vsp-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

.vsp-copilot .vsp-prompt{
  font-size: 15px;
  line-height: 1.25;
  font-weight: 600;
  color: rgba(255,255,255,.86);
}

.vsp-copilot .vsp-role.is-active .vsp-pill{
  background: rgba(127, 110, 255, .35);
  box-shadow: inset 0 0 0 1px rgba(127, 110, 255, .55);
}

.vsp-copilot .vsp-role.is-active .vsp-prompt{
  color: rgba(255,255,255,.92);
}


/* --------------------------------------------------------------------------
   5) Stream (Chat Window) + Placeholder
   -------------------------------------------------------------------------- */
.vsp-copilot .vsp-stream{
  background: var(--vsp-stream-grad);
  border:1px solid var(--vsp-border);
  border-radius:4px;
  padding:12px;
  height:360px;
  overflow:auto;
  scrollbar-gutter: stable both-edges;
  scrollbar-color: rgba(233,236,255,.26) rgba(255,255,255,.06);
  scrollbar-width: thin;
}

/* Stream scrollbar styling */
.vsp-copilot .vsp-stream::-webkit-scrollbar{ width:10px; }
.vsp-copilot .vsp-stream::-webkit-scrollbar-track{
  background: rgba(255,255,255,.06);
  border-radius:999px;
}
.vsp-copilot .vsp-stream::-webkit-scrollbar-thumb{
  background: rgba(233,236,255,.22);
  border-radius:999px;
  border:2px solid rgba(255,255,255,.06);
}
.vsp-copilot .vsp-stream::-webkit-scrollbar-thumb:hover{
  background: rgba(233,236,255,.32);
}

.vsp-copilot .vsp-placeholder{
  border:1px dashed rgba(208,216,230,.22);
  color:var(--vsp-muted);
  border-radius:4px;
  padding:12px;
  background: rgba(255,255,255,.02);
}


/* --------------------------------------------------------------------------
   6) Messages
   -------------------------------------------------------------------------- */
.vsp-copilot .vsp-msg{
  max-width:78%;
  padding:10px 12px;
  border-radius:4px;
  font-size:.95rem;
  line-height:1.45;
  margin:10px 0;
  word-wrap:break-word;
  animation:vsp-pop .16s ease-out;
}

/* User bubble */
.vsp-copilot .vsp-msg--user{
  margin-left:auto;
  color:#fff;
  background:
    radial-gradient(600px 240px at 10% 0%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, rgba(79,70,229,1), rgba(79,70,229,.70));
  box-shadow: 0 10px 26px rgba(79,70,229,.18);
  border:1px solid rgba(255,255,255,.08);
}

/* Bot bubble */
.vsp-copilot .vsp-msg--bot{
  margin-right:auto;
  color:var(--vsp-text);
  background:
    radial-gradient(700px 240px at 0% 0%, rgba(90,195,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border:1px solid rgba(208,216,230,.16);
  backdrop-filter: blur(6px);
}

/* Bot formatting */
.vsp-copilot .vsp-msg--bot p{ margin:.55rem 0; }
.vsp-copilot .vsp-msg--bot strong{ color:#fff; }
.vsp-copilot .vsp-msg--bot ul,
.vsp-copilot .vsp-msg--bot ol{
  margin:.35rem 0 .7rem;
  padding-left:1.1rem;
}
.vsp-copilot .vsp-msg--bot li{
  margin:.22rem 0;
  color:var(--vsp-muted);
}


/* --------------------------------------------------------------------------
   7) Composer (Input + Send)
   -------------------------------------------------------------------------- */
.vsp-copilot .vsp-composer{
  display:flex;
  gap:10px;
  align-items:center;
}

.vsp-copilot .vsp-input{
  flex:1;
  height:44px;
  border-radius:4px;
  border:1px solid rgba(208,216,230,.16);
  background:
    radial-gradient(700px 220px at 8% 0%, rgba(90,195,255,.08), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  color:var(--vsp-text);
  padding:0 12px;
  outline:none;
}

.vsp-copilot .vsp-input::placeholder{
  color: rgba(233,236,255,.55);
}

.vsp-copilot .vsp-send{
  height:44px;
  padding:0 16px;
  border-radius:4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff !important;
  text-decoration:none;
  font-weight:700;
  background:
    radial-gradient(600px 260px at 20% 0%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, rgba(79,70,229,1), rgba(79,70,229,.72));
  border:1px solid rgba(255,255,255,.12);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

.vsp-copilot .vsp-send:hover{
  filter: brightness(1.08);
  transform: translateY(-1px);
  color:#fff !important;
  box-shadow: 0 12px 26px rgba(79,70,229,.22);
}


/* --------------------------------------------------------------------------
   8) Footnote
   -------------------------------------------------------------------------- */
.vsp-copilot .vsp-footnote{
  text-align:center;
  color: rgba(233,236,255,.62);
  font-size:.78rem;
}


/* --------------------------------------------------------------------------
   9) Typing Indicator + Animations
   -------------------------------------------------------------------------- */
.vsp-copilot .vsp-typing{
  display:inline-flex;
  align-items:center;
  gap:.22rem;
}

.vsp-copilot .vsp-typing span{
  width:.34rem;
  height:.34rem;
  border-radius:50%;
  background: rgba(233,236,255,.85);
  opacity:.24;
  animation:vsp-blink 1.05s infinite;
}

.vsp-copilot .vsp-typing span:nth-child(2){ animation-delay:.15s; }
.vsp-copilot .vsp-typing span:nth-child(3){ animation-delay:.3s; }

@keyframes vsp-pop{
  from{ transform:translateY(4px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}

@keyframes vsp-blink{
  0%,80%,100%{ opacity:.20; }
  40%{ opacity:.95; }
}


/* --------------------------------------------------------------------------
   10) Purple Question Bar (top) — kept as in file
   -------------------------------------------------------------------------- */
.vsp-copilot .vsp-q{
  min-height: 0 !important;
  padding: 14px 18px !important;
  display: flex;
  align-items: center;
  line-height: 1.25;
}

.vsp-copilot .vsp-q p,
.vsp-copilot .vsp-q span,
.vsp-copilot .vsp-q div{
  margin: 0;
}


/* --------------------------------------------------------------------------
   11) Desktop Layout — right column prompt list
   -------------------------------------------------------------------------- */
@media (min-width: 52.01rem){
  .vsp-copilot .vsp-main{
    display:grid;
    grid-template-columns: minmax(0,1fr) 320px;
    gap:14px;
    align-items:start;
  }

  .vsp-copilot .vsp-side--inline{ grid-column:2; grid-row:1 / span 4; }
  .vsp-copilot .vsp-stream{ grid-column:1; grid-row:1; height:380px; }
  .vsp-copilot .vsp-composer{ grid-column:1; grid-row:2; }
  .vsp-copilot .vsp-footnote{ grid-column:1; grid-row:3; }

  .vsp-copilot .vsp-roles--rail{
    display:grid;
    overflow:visible;
    padding-bottom:0;
    scroll-snap-type:none;
  }

  .vsp-copilot .vsp-role{
    border-radius:4px;
    padding:12px 12px;
  }
}


/* --------------------------------------------------------------------------
   12) Message Header (You / Vesper)
   -------------------------------------------------------------------------- */
:root{
  --vsp-avatar-vesper: url("https://vespertool.com/wp-content/uploads/favicon-vesper-tool.svg");
}

.vsp-copilot .vsp-msghead{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 0 0 10px 0;
  font-size: 13px;
  opacity: .9;
}

.vsp-copilot .vsp-avatar{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  flex: 0 0 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

.vsp-copilot .vsp-avatar--vesper{
  background-image: var(--vsp-avatar-vesper);
  background-repeat:no-repeat;
  background-position:center;
  background-size: 14px 14px;
}

/* Make the "You" badge a proper pill */
.vsp-copilot .vsp-avatar--you{
  width: auto;
  padding: 0 12px;
  border-radius: 999px;
  height: 22px;
  flex: 0 0 auto;

  font-weight: 700;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  background: rgba(127, 110, 255, .35);
  box-shadow: inset 0 0 0 1px rgba(127, 110, 255, .45);
}

.vsp-copilot .vsp-who{
  font-weight: 600;
  color: rgba(255,255,255,.92);
}

.vsp-copilot .vsp-who small{
  font-weight: 500;
  opacity: .7;
  margin-left: 6px;
}

.vsp-copilot .vsp-msg--user p{
  margin: 0; /* no extra top/bottom margin inside purple bubble */
}/* End custom CSS */