/* support.css — Customer Live Support (UI-only, mobile-first) */

.support-shell{
  --bg0:#05060a;
  --card:rgba(12,16,28,.78);
  --card2:rgba(10,14,26,.55);
  --stroke:rgba(160,180,255,.14);
  --stroke2:rgba(160,180,255,.10);
  --text:#e9ecff;
  --muted:rgba(233,236,255,.65);
  --accent1:#b54cff;
  --accent2:#33d6ff;
  --r:18px;

  width:100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 12px;
}

.support-card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}

.support-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 12px;
  border-bottom:1px solid var(--stroke2);
}

.support-title{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.support-title .h1{font-weight:900; color:var(--text)}
.support-title .sub{font-size:12px; color:var(--muted)}

.support-status{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}
.support-dot{
  width:10px;height:10px;border-radius:999px;
  background:rgba(255,255,255,.25);
  box-shadow:none;
}
.support-dot.online{
  background:linear-gradient(135deg, var(--accent1), var(--accent2));
  box-shadow:0 0 18px rgba(181,76,255,.35);
}

.support-body{
  display:flex;
  flex-direction:column;
  height: min(72vh, 720px);
  background:var(--card2);
}

.support-messages{
  flex:1;
  overflow:auto;
  padding:14px;
}

.support-empty{
  color:var(--muted);
  font-size:13px;
  padding:14px;
  border:1px dashed rgba(160,180,255,.18);
  border-radius:14px;
  background:rgba(0,0,0,.14);
}

.support-msg{
  max-width:82%;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(160,180,255,.12);
  background:rgba(0,0,0,.20);
  margin:8px 0;
  line-height:1.25;
  color:var(--text);
}
.support-msg.me{
  margin-left:auto;
  border-color:rgba(51,214,255,.18);
  background:rgba(51,214,255,.08);
}
.support-msg.them{
  margin-right:auto;
  border-color:rgba(181,76,255,.18);
  background:rgba(181,76,255,.08);
}
.support-meta{
  font-size:11px;
  color:rgba(233,236,255,.65);
  margin-top:6px;
}

.support-compose{
  display:flex;
  gap:10px;
  padding:12px;
  border-top:1px solid var(--stroke2);
  background:rgba(6,8,14,.75);
  backdrop-filter: blur(10px);
}

.support-compose input{
  flex:1;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.22);
  color:var(--text);
  outline:none;
}

.support-btn{
  padding:10px 14px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
}
.support-btn.primary{
  border-color:rgba(51,214,255,.28);
  background:linear-gradient(135deg, rgba(181,76,255,.28), rgba(51,214,255,.18));
}
.support-btn:disabled{opacity:.45; cursor:not-allowed}


/* Mobile toast for new support messages */
.support-toast{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 14px;
  margin: 0 auto;
  width: fit-content;
  max-width: calc(100% - 24px);
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(17, 24, 39, .94);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 9999;
  pointer-events: none;
}
.support-toast.show{
  opacity: 1;
  transform: translateY(0);
}
#supportDot.notify{
  box-shadow: 0 0 0 6px rgba(59,130,246,.22);
}


/* Nav "NEW" pill (mobile-first) */
.nav-new-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:8px;
  padding: 2px 8px;
  border-radius: 999px;
  background:#ef4444;
  color:#fff;
  font-weight: 900;
  font-size: 11px;
  line-height: 16px;
}