@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');body {
  background: var(--bg-gradient);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  font-family: 'Jost', sans-serif;
  --default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC",
    "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei",
    "Source Han Sans CN", sans-serif;
  --bg-gradient: linear-gradient(135deg, #000000, #1E90FF);
}

.baje-container {
  position: relative;
  background: rgba(0, 0, 0, 0.7);
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
}

.chat-header {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 15px;
  color: white;
  justify-content: space-between;
}

.ai-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: url() center/cover;
  margin-right: 15px;
}

.ai-info {
  flex-grow : 1;
}

.ai-name {
  font-size: 18px;
  font-weight: bold;
}

.ai-status {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.header-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.notification-button {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  transition: background 0.3s ease;
  font-size: 16px;
  position: relative;
}

.notification-button:hover {
  background: #1E90FF;
}

.chat-messages {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px;
  color: white;
}

.message {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  max-width: 80%;
}

.input-section {
  display: flex;
  padding: 15px;
  background: rgba(255, 255, 255, 0.1);
}

.input-field {
  flex-grow: 1;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 20px;
  padding: 10px 15px;
  color: white;
  resize: none;
}

.send-button {
  background: #1E90FF;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  color: white;
  cursor: pointer;
  transition: 0.3s ease;
}

.send-button:hover {
  background: #1873CC;
}

.input-field::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.hamburger-button {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
}

.hamburger-button-span {
  width: 100%;
  height: 3px;
  background: white;
  border-radius: 2px;
  transition: all 0.3s ease;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.hamburger-button-span:nth-child(1) {
  top: 2px;
}

.hamburger-button-span:nth-child(2) {
  top: 8.5px;
}

.hamburger-button-span:nth-child(3) {
  top: 15px;
}

/* Mobile Portrait (320px to 479px) */
@media only screen and (max-width: 479px) {
  .baje-container {
    width: 100%;
    height: 100vh;
    border-radius: 0;
    box-shadow: none;
  }

  .chat-header {
    padding: 8px;
  }

  .ai-avatar {
    width: 35px;
    height: 35px;
    margin-right: 10px;
  }

  .ai-name {
    font-size: 14px;
  }

  .ai-status {
    font-size: 10px;
  }

  .notification-button {
    width: 22px;
    height: 22px;
    font-size: 12px;
  }

  .hamburger-button {
    width: 25px;
    height: 16px;
    margin-left: auto;
  }

  .hamburger-button-span {
    height: 2px;
  }

  .hamburger-button-span:nth-child(1) {
    top: 1px;
  }

  .hamburger-button-span:nth-child(2) {
    top: 7px;
  }

  .hamburger-button-span:nth-child(3) {
    top: 13px;
  }

  .chat-messages {
    padding: 8px;
  }

  .message {
    max-width: 90%;
    padding: 8px;
    font-size: 12px;
    margin-bottom: 10px;
  }

  .input-section {
    padding: 8px;
  }

  .input-field {
    padding: 6px 10px;
    font-size: 12px;
  }

  .send-button {
    width: 30px;
    height: 30px;
    font-size: 14px;
    margin-left: 8px;
  }

  .nav-card {
    width: 100%;
    max-width: 479px;
    right: -479px;
    border-radius: 0;
  }

  .nav-card-open {
    right: 0;
  }

  .nav-item {
    margin: 15px 0;
  }

  .nav-item-a {
    font-size: 18px;
  }
}

/* Mobile Landscape (480px to 767px) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .baje-container {
    width: 100%;
    height: 100vh;
    border-radius: 0;
    box-shadow: none;
  }

  .chat-header {
    padding: 10px;
  }

  .ai-avatar {
    width: 40px;
    height: 40px;
    margin-right: 12px;
  }

  .ai-name {
    font-size: 15px;
  }

  .ai-status {
    font-size: 11px;
  }

  .notification-button {
    width: 24px;
    height: 24px;
    font-size: 13px;
  }

  .hamburger-button {
    width: 26px;
    height: 18px;
    margin-left: auto;
  }

  .hamburger-button-span {
    height: 2.5px;
  }

  .hamburger-button-span:nth-child(1) {
    top: 1.5px;
  }

  .hamburger-button-span:nth-child(2) {
    top: 7.5px;
  }

  .hamburger-button-span:nth-child(3) {
    top: 14px;
  }

  .chat-messages {
    padding: 10px;
  }

  .message {
    max-width: 85%;
    padding: 10px;
    font-size: 13px;
    margin-bottom: 12px;
  }

  .input-section {
    padding: 10px;
  }

  .input-field {
    padding: 7px 12px;
    font-size: 13px;
  }

  .send-button {
    width: 32px;
    height: 32px;
    font-size: 15px;
    margin-left: 8px;
  }

  .nav-card {
    width: 100%;
    max-width: 767px;
    right: -767px;
    border-radius: 0;
  }

  .nav-card-open {
    right: 0;
  }

  .nav-item {
    margin: 16px 0;
  }

  .nav-item-a {
    font-size: 19px;
  }
}

/* Tablet Portrait and Landscape (768px to 1024px) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .baje-container {
    width: 90%;
    max-width: 800px;
    height: 90vh;
    border-radius: 10px;
  }

  .chat-header {
    padding: 12px;
  }

  .ai-avatar {
    width: 45px;
    height: 45px;
    margin-right: 13px;
  }

  .ai-name {
    font-size: 16px;
  }

  .ai-status {
    font-size: 12px;
  }

  .notification-button {
    width: 26px;
    height: 26px;
    font-size: 14px;
  }

  .hamburger-button {
    width: 28px;
    height: 19px;
  }

  .hamburger-button-span {
    height: 2.5px;
  }

  .hamburger-button-span:nth-child(1) {
    top: 1.5px;
  }

  .hamburger-button-span:nth-child(2) {
    top: 8px;
  }

  .hamburger-button-span:nth-child(3) {
    top: 14.5px;
  }

  .chat-messages {
    padding: 15px;
  }

  .message {
    max-width: 85%;
    padding: 12px;
    font-size: 14px;
    margin-bottom: 12px;
  }

  .input-section {
    padding: 12px;
  }

  .input-field {
    padding: 8px 13px;
    font-size: 14px;
  }

  .send-button {
    width: 36px;
    height: 36px;
    font-size: 16px;
    margin-left: 10px;
  }

  .nav-card {
    width: 300px;
    right: -300px;
  }

  .nav-card-open {
    right: 0;
  }

  .nav-item {
    margin: 18px 0;
  }

  .nav-item-a {
    font-size: 20px;
  }
}

/* Laptop/Desktop (1025px to 1280px) */
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
  .baje-container {
    width: 90%;
    max-width: 900px;
    height: 85vh;
    border-radius: 12px;
  }

  .chat-header {
    padding: 14px;
  }

  .ai-avatar {
    width: 48px;
    height: 48px;
    margin-right: 14px;
  }

  .ai-name {
    font-size: 17px;
  }

  .ai-status {
    font-size: 13px;
  }

  .notification-button {
    width: 28px;
    height: 28px;
    font-size: 15px;
  }

  .hamburger-button {
    width: 29px;
    height: 19px;
  }

  .hamburger-button-span {
    height: 2.5px;
  }

  .hamburger-button-span:nth-child(1) {
    top: 1.5px;
  }

  .hamburger-button-span:nth-child(2) {
    top: 8px;
  }

  .hamburger-button-span:nth-child(3) {
    top: 14.5px;
  }

  .chat-messages {
    padding: 18px;
  }

  .message {
    max-width: 80%;
    padding: 13px;
    font-size: 15px;
    margin-bottom: 13px;
  }

  .input-section {
    padding: 14px;
  }

  .input-field {
    padding: 9px 14px;
    font-size: 15px;
  }

  .send-button {
    width: 38px;
    height: 38px;
    font-size: 17px;
    margin-left: 10px;
  }

  .nav-card {
    width: 350px;
    right: -350px;
  }

  .nav-card-open {
    right: 0;
  }

  .nav-item {
    margin: 20px 0;
  }

  .nav-item-a {
    font-size: 21px;
  }
}

/* Desktop (1281px and above) */
@media only screen and (min-width: 1281px) {
  .baje-container {
    width: 700px;
    height: 840px;
    border-radius: 15px;
  }

  .chat-header {
    padding: 15px;
  }

  .ai-avatar {
    width: 50px;
    height: 50px;
    margin-right: 15px;
  }

  .ai-name {
    font-size: 18px;
  }

  .ai-status {
    font-size: 14px;
  }

  .notification-button {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }

  .hamburger-button {
    width: 30px;
    height: 20px;
  }

  .hamburger-button-span {
    height: 3px;
  }

  .hamburger-button-span:nth-child(1) {
    top: 2px;
  }

  .hamburger-button-span:nth-child(2) {
    top: 8.5px;
  }

  .hamburger-button-span:nth-child(3) {
    top: 15px;
  }

  .chat-messages {
    padding: 20px;
  }

  .message {
    max-width: 80%;
    padding: 15px;
    font-size: 16px;
    margin-bottom: 15px;
  }

  .input-section {
    padding: 15px;
  }

  .input-field {
    padding: 10px 15px;
    font-size: 16px;
  }

  .send-button {
    width: 40px;
    height: 40px;
    font-size: 18px;
    margin-left: 10px;
  }

  .nav-card {
    width: 400px;
    right: -400px;
  }

  .nav-card-open {
    right: 0;
  }

  .nav-item {
    margin: 22px 0;
  }

  .nav-item-a {
    font-size: 22px;
  }
}

/* ========== Agent Picker ========== */
.agent-button{
  background: #1E90FF;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: background .2s ease;
  box-shadow: 0 6px 18px rgba(15,23,42,.08);
}
.agent-button:hover{ background:#1873CC; }

.agent-menu{
  position: absolute;
  bottom: 100%;
  right: 0;
  background: rgba(0,0,0,0.90);
  border-radius: 8px;
  padding: 6px;
  min-width: 140px;
  transform-origin: bottom right;
  transform: scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 1000;
}
.agent-menu.open{
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.agent-item{
  width: 100%;
  background: transparent;
  border: none;
  color: #fff;
  padding: 8px 10px;
  text-align: left;
  border-radius: 6px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.agent-item:hover{ background: rgba(255,255,255,0.10); }
.agent-item.active{ outline: 1px solid rgba(255,255,255,0.25); }

@media (max-width: 450px){
  .agent-menu{
    left: 50%;
    right: auto;
    transform: translateX(-50%) scale(1);
  }
}
/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial}}}.collapse{visibility:collapse}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.container{width:100%}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.inline-grid{display:inline-grid}.table{display:table}.flex-shrink,.shrink{flex-shrink:1}.flex-grow{flex-grow:1}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.resize{resize:both}.flex-wrap{flex-wrap:wrap}.border{border-style:var(--tw-border-style);border-width:1px}.uppercase{text-transform:uppercase}.italic{font-style:italic}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.ease-in-out{animation-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{animation-timing-function:cubic-bezier(0,0,.2,1)}.fade-in{--tw-enter-opacity:0}.running{animation-play-state:running}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.chat-messages::-webkit-scrollbar{width:0;height:0}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0))}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}


.variable-proximity {
  font-family: 'Roboto Flex', sans-serif;
}

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