/* ==================================
NEXTEL Chat Widget Theme
================================== */

:root{
--nextel-primary: #00D4FF;
--nextel-dark: #0A1018;
--nextel-dark-2: #0F172A;
--nextel-light: #F8FAFC;
--nextel-border: rgba(0,212,255,0.18);
--nextel-radius: 12px;
--nextel-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

/* Floating Button */
.fx-widget-btn {
position: fixed;
right: 18px;
bottom: 18px;
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--nextel-dark);
display:flex;
align-items:center;
justify-content:center;
z-index:999999;
cursor:pointer;
border:2px solid var(--nextel-primary);
box-shadow: 0 0 20px rgba(0,212,255,0.35);
}

.fx-widget-btn:hover{
transform:scale(1.05);
transition:.3s;
}

/* Chat Window */
.fx-chat-window{
position:fixed;
right:18px;
bottom:90px;
width:370px;
max-width:96vw;
height:550px;
max-height:88vh;
border-radius:16px;
overflow:hidden;
display:flex;
flex-direction:column;
background:#ffffff;
border:1px solid var(--nextel-border);
box-shadow:0 20px 60px rgba(0,0,0,.35);
z-index:999999;
font-family:var(--nextel-font);
}

/* Header */
.fx-header{
display:flex;
gap:12px;
align-items:center;
padding:15px;
background:linear-gradient(
135deg,
var(--nextel-dark),
var(--nextel-dark-2)
);
color:#fff;
border-bottom:1px solid rgba(255,255,255,.08);
}

.fx-header .logo{
width:46px;
height:46px;
border-radius:10px;
background:var(--nextel-primary);
display:flex;
align-items:center;
justify-content:center;
color:#000;
font-weight:700;
font-size:18px;
}

.fx-header .title{
font-size:15px;
font-weight:700;
}

.fx-header .subtitle{
font-size:12px;
color:rgba(255,255,255,.75);
}

/* Messages */
.fx-messages{
flex:1;
overflow-y:auto;
padding:16px;
background:#F8FAFC;
}

/* Visitor Message */
.fx-bubble.visitor{
background:var(--nextel-primary);
color:#000;
margin-left:auto;
border-radius:16px 16px 4px 16px;
padding:10px 14px;
max-width:80%;
font-weight:500;
}

/* Agent Message */
.fx-bubble.agent{
background:#ffffff;
color:#111827;
border:1px solid #E5E7EB;
margin-right:auto;
border-radius:16px 16px 16px 4px;
padding:10px 14px;
max-width:80%;
}

.fx-msg-meta{
font-size:11px;
color:#94A3B8;
margin-top:6px;
}

/* Input */
.fx-input{
display:flex;
gap:10px;
padding:14px;
background:#fff;
border-top:1px solid #E5E7EB;
}

.fx-input input[type="text"]{
flex:1;
padding:12px;
border-radius:10px;
border:1px solid #CBD5E1;
outline:none;
}

.fx-input input[type="text"]:focus{
border-color:var(--nextel-primary);
box-shadow:0 0 0 3px rgba(0,212,255,.15);
}

.fx-input button.send{
background:var(--nextel-primary);
color:#000;
border:none;
border-radius:10px;
padding:12px 18px;
font-weight:700;
cursor:pointer;
}

.fx-input button.send:hover{
opacity:.9;
}


/* small helper */
.fx-small {
  font-size: 12px;
  color: var(--nextel-muted);
}

/* responsive */
@media (max-width:640px) {
  .fx-chat-window {
    right: 10px;
    left: 10px;
    bottom: 80px;
    width: auto;
    height: 76vh;
  }

  .fx-header .subtitle {
    display: none;
  }
}

/* =====================================
   CLOSE BUTTON
===================================== */
.fx-header .fx-close {
  margin-left: auto;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  transition: all .3s ease;
}

.fx-header .fx-close:hover {
  color: var(--nextel-primary);
  transform: rotate(90deg);
}

/* =====================================
   NEXTEL ONLINE BADGE
===================================== */
.fx-online-badge-top {
  position: fixed;
  right: 18px;
  bottom: 82px;

  background: linear-gradient(
    135deg,
    var(--nextel-primary),
    var(--nextel-secondary)
  );

  color: #04111d;
  font-weight: 700;
  font-size: 12px;

  padding: 8px 16px;
  border-radius: 30px;

  box-shadow:
    0 0 15px rgba(0,229,168,.35),
    0 8px 20px rgba(0,194,255,.20);

  z-index: 999999;

  border: 1px solid rgba(255,255,255,.15);

  animation: nextelFloat 3s infinite ease-in-out;
}

/* online pulse dot */
.fx-online-badge-top::before{
  content:'';
  width:8px;
  height:8px;
  border-radius:50%;
  background:#00ff88;
  display:inline-block;
  margin-right:8px;

  box-shadow:
    0 0 0 rgba(0,255,136,.6);

  animation: nextelPulse 1.8s infinite;
}

/* floating animation */
@keyframes nextelFloat {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}

/* pulse animation */
@keyframes nextelPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0,255,136,.6);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0,255,136,0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0,255,136,0);
  }
}

/* =====================================
   EXTRA PREMIUM EFFECTS
===================================== */

.fx-chat-window {
  border: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
}

.fx-header {
  background: linear-gradient(
    135deg,
    #07111F,
    #0D1B2A
  );
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.fx-widget-btn {
  background: linear-gradient(
    135deg,
    var(--nextel-primary),
    var(--nextel-secondary)
  );

  border: none;

  box-shadow:
    0 0 25px rgba(0,229,168,.35),
    0 10px 25px rgba(0,194,255,.25);
}

.fx-widget-btn:hover {
  transform: scale(1.05);
}