
.jay-agent-root,
.jay-agent-root *{box-sizing:border-box}

.jay-agent-root{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:2147483000;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#171717
}

.jay-agent-launcher{
  width:176px;
  height:52px;
  padding:0 17px;
  border:0;
  border-radius:14px;
  background:#fded00;
  color:#171717;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  font:inherit;
  box-shadow:none
}

.jay-agent-launcher span{
  font-size:13px;
  font-weight:800;
  letter-spacing:.03em
}

.jay-agent-launcher b{
  font-size:20px;
  font-weight:500
}

.jay-agent-backdrop{
  position:fixed;
  inset:0;
  background:rgba(12,14,16,.30);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:2147482998
}

.jay-agent-backdrop.is-open{
  opacity:1;
  pointer-events:auto
}

.jay-agent-panel{
  position:absolute;
  right:0;
  bottom:66px;
  width:min(430px,calc(100vw - 28px));
  max-height:min(760px,calc(100vh - 110px));
  background:#fff;
  border:1px solid #e6e6e2;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 28px 80px rgba(0,0,0,.24);
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
  z-index:2147483001
}

.jay-agent-panel.is-open{
  opacity:1;
  transform:none;
  pointer-events:auto
}

.jay-agent-header{
  height:64px;
  padding:0 14px 0 18px;
  background:#17191b;
  display:flex;
  align-items:center;
  justify-content:space-between
}

.jay-agent-brandcopy{
  display:flex;
  flex-direction:column
}

.jay-agent-brandcopy strong{
  color:#fff;
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  line-height:1
}

.jay-agent-brandcopy small{
  margin-top:5px;
  color:rgba(255,255,255,.54);
  font-size:10px
}

.jay-agent-header-actions{
  display:flex;
  gap:7px
}

.jay-agent-header-actions button{
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;
  background:rgba(255,255,255,.05);
  color:#fff;
  font-size:19px;
  cursor:pointer
}

.jay-agent-languagebar{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:6px;
  padding:11px 12px;
  background:#f7f7f4;
  border-bottom:1px solid #e9e9e4
}

.jay-agent-lang{
  min-width:0;
  height:38px;
  padding:0 6px;
  border:1px solid #deded8;
  border-radius:10px;
  background:#fff;
  color:#252525;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  font:inherit;
  font-size:13px;
  font-weight:800;
  cursor:pointer
}

.jay-agent-lang span{
  font-size:9px;
  letter-spacing:.04em
}

.jay-agent-lang.is-active{
  background:#17191b;
  border-color:#17191b;
  color:#fded00
}

.jay-agent-intro{
  padding:22px 20px 16px
}

.jay-agent-kicker{
  display:block;
  margin-bottom:9px;
  color:#8a8a84;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase
}

.jay-agent-intro h2{
  margin:0;
  color:#171717;
  font-size:25px;
  line-height:1.1;
  letter-spacing:-.035em;
  font-weight:780
}

.jay-agent-intro p{
  margin:9px 0 0;
  color:#6d6d68;
  font-size:12px;
  line-height:1.5
}

.jay-agent-quick{
  padding:0 14px 12px
}

.jay-agent-quick.is-hidden{display:none}

.jay-agent-quick button{
  width:100%;
  min-height:48px;
  margin-bottom:7px;
  padding:0 13px;
  border:1px solid #ecece7;
  border-radius:11px;
  background:#fafaf8;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer
}

.jay-agent-quick button:last-child{margin-bottom:0}

.jay-agent-quick strong{
  font-size:12px;
  font-weight:750
}

.jay-agent-quick span{
  color:#8f8f89;
  font-size:16px
}

.jay-agent-messages{
  height:230px;
  overflow:auto;
  padding:16px;
  background:#f6f6f3;
  border-top:1px solid #ecece8
}

.jay-agent-msg{
  display:flex;
  margin-bottom:10px
}

.jay-agent-msg.user{
  justify-content:flex-end
}

.jay-agent-bubble{
  max-width:86%;
  padding:11px 13px;
  border:1px solid #e4e4df;
  border-radius:12px;
  background:#fff;
  color:#292927;
  font-size:12.5px;
  line-height:1.5;
  white-space:pre-wrap
}

.jay-agent-msg.user .jay-agent-bubble{
  background:#17191b;
  border-color:#17191b;
  color:#fff
}

.jay-agent-typing{
  display:flex;
  align-items:center;
  gap:4px
}

.jay-agent-typing span{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#8f8f89;
  animation:jaydot 1.1s infinite ease-in-out
}

.jay-agent-typing span:nth-child(2){animation-delay:.14s}
.jay-agent-typing span:nth-child(3){animation-delay:.28s}

@keyframes jaydot{
  0%,60%,100%{opacity:.35;transform:translateY(0)}
  30%{opacity:1;transform:translateY(-2px)}
}

.jay-agent-form{
  display:flex;
  gap:8px;
  padding:11px 13px 8px;
  background:#fff;
  border-top:1px solid #ecece8
}

.jay-agent-form textarea{
  flex:1;
  min-height:48px;
  max-height:110px;
  resize:none;
  border:1px solid #dcdcd7;
  border-radius:11px;
  padding:13px;
  outline:0;
  color:#222;
  font:inherit;
  font-size:12.5px
}

.jay-agent-form textarea:focus{
  border-color:#b8b8b1;
  box-shadow:0 0 0 3px rgba(253,237,0,.10)
}

.jay-agent-form button{
  width:48px;
  height:48px;
  border:0;
  border-radius:11px;
  background:#fded00;
  color:#151515;
  font-size:20px;
  cursor:pointer
}

.jay-agent-footer{
  padding:0 12px 11px;
  text-align:center;
  color:#9a9a95;
  background:#fff;
  font-size:9px
}

@media(max-width:600px){
  html.jay-agent-open,
  html.jay-agent-open body{
    overflow:hidden!important
  }

  .jay-agent-root{
    right:12px;
    bottom:calc(14px + env(safe-area-inset-bottom))
  }

  .jay-agent-launcher{
    width:176px;
    height:52px;
    border-radius:14px
  }

  .jay-agent-panel{
    position:fixed;
    left:8px;
    right:8px;
    bottom:calc(8px + env(safe-area-inset-bottom));
    width:auto;
    max-height:90dvh;
    border-radius:20px
  }

  .jay-agent-header{
    min-height:64px
  }

  .jay-agent-languagebar{
    grid-template-columns:repeat(3,1fr);
    gap:7px;
    padding:10px 12px
  }

  .jay-agent-lang{
    height:42px;
    font-size:15px
  }

  .jay-agent-lang span{
    font-size:10px
  }

  .jay-agent-intro{
    padding:18px 16px 14px
  }

  .jay-agent-kicker{
    font-size:10px
  }

  .jay-agent-intro h2{
    font-size:27px
  }

  .jay-agent-intro p{
    font-size:14px;
    line-height:1.5
  }

  .jay-agent-quick{
    padding:0 10px 9px
  }

  .jay-agent-quick button{
    min-height:58px
  }

  .jay-agent-quick strong{
    font-size:14px
  }

  .jay-agent-messages{
    height:29dvh;
    min-height:210px;
    max-height:290px;
    padding:14px 12px 8px
  }

  .jay-agent-bubble{
    max-width:90%;
    padding:13px 14px;
    font-size:14.5px;
    line-height:1.52
  }

  .jay-agent-form{
    padding:10px 10px 8px
  }

  .jay-agent-form textarea{
    min-height:50px;
    font-size:15px
  }

  .jay-agent-form button{
    width:50px;
    height:50px
  }

  .jay-agent-footer{
    font-size:9px
  }
}
