.ai-chat-widget{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:3000;
}

.ai-chat-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  height:54px;
  padding:0 18px;
  border:none;
  border-radius:999px;
  cursor:pointer;
  font-weight:800;
  letter-spacing:.06em;
  background:var(--accent, #0ea5e9);
  color:#081018;
  box-shadow:0 18px 40px rgba(0,0,0,.25);
}

.ai-chat-panel{
  width:360px;
  max-width:calc(100vw - 24px);
  height:520px;
  margin-top:12px;
  border:1px solid var(--line, rgba(255,255,255,.12));
  border-radius:20px;
  overflow:hidden;
  background:var(--panel, #0d1014);
  box-shadow:0 18px 45px rgba(0,0,0,.35);
  display:flex;
  flex-direction:column;
}

.ai-chat-panel[hidden]{
  display:none !important;
}

.ai-chat-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--line, rgba(255,255,255,.12));
  background:var(--panel2, #0b0f13);
  color:var(--text, #fff);
}

.ai-chat-head button{
  width:38px;
  height:38px;
  border:none;
  border-radius:12px;
  cursor:pointer;
  background:rgba(255,255,255,.06);
  color:var(--text, #fff);
}

.ai-chat-messages{
  flex:1;
  overflow:auto;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ai-msg{
  max-width:85%;
  padding:11px 13px;
  border-radius:14px;
  line-height:1.5;
  font-size:14px;
}

.ai-msg-user{
  align-self:flex-end;
  background:var(--accent, #0ea5e9);
  color:#071018;
}

.ai-msg-bot{
  align-self:flex-start;
  background:rgba(255,255,255,.06);
  color:var(--text, #fff);
  border:1px solid var(--line, rgba(255,255,255,.12));
}

.ai-chat-form{
  display:flex;
  gap:10px;
  padding:14px;
  border-top:1px solid var(--line, rgba(255,255,255,.12));
}

.ai-chat-form input{
  flex:1;
  min-width:0;
  height:46px;
  border:1px solid var(--line, rgba(255,255,255,.12));
  border-radius:14px;
  background:rgba(255,255,255,.04);
  color:var(--text, #fff);
  padding:0 14px;
}

.ai-chat-form button{
  height:46px;
  padding:0 16px;
  border:none;
  border-radius:14px;
  cursor:pointer;
  font-weight:700;
  background:var(--text, #fff);
  color:var(--bg, #000);
}

.ai-suggestions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.ai-suggest{
  border:1px solid var(--line, rgba(255,255,255,.12));
  background:rgba(255,255,255,.04);
  color:var(--text, #fff);
  padding:8px 10px;
  border-radius:12px;
  font-size:12px;
  cursor:pointer;
  transition:all .2s;
}

.ai-suggest:hover{
  border-color:var(--accent, #0ea5e9);
  background:rgba(14,165,233,.08);
}

@media (max-width:640px){
  .ai-chat-widget{
    right:12px;
    left:12px;
    bottom:12px;
  }

  .ai-chat-toggle{
    width:100%;
    justify-content:center;
  }

  .ai-chat-panel{
    width:100%;
    height:70vh;
  }
}