.support-fab{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 2000;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(138, 43, 226, 0.45);
  background: rgba(138, 43, 226, 0.22);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  color: #fff;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter: blur(10px);
}
.support-panel{
  position: fixed;
  right: 22px;
  bottom: 90px;
  width: 360px;
  max-width: calc(100vw - 44px);
  height: 520px;
  max-height: calc(100vh - 140px);
  z-index: 2000;
  display:none;
  flex-direction: column;
}
.support-panel.active{ display:flex; }
.support-panel .head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:12px;
  padding: 14px 16px;
}
.support-panel .head .t{
  font-weight: 900;
  letter-spacing: 0.02em;
}
.support-panel .head .x{
  width: 36px; height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color:#fff;
  cursor:pointer;
}
.support-panel .body{
  padding: 14px 16px;
  overflow:auto;
  flex: 1;
}
.support-panel .msg{
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  color:#fff;
  padding: 10px 12px;
  border-radius: 14px;
  margin-bottom: 10px;
}
.support-panel .msg.you{
  border-color: rgba(138,43,226,0.35);
  background: rgba(138,43,226,0.12);
}
.support-panel .meta{
  font-size: 12px;
  opacity: 0.6;
  margin-bottom: 6px;
}
.support-panel .foot{
  padding: 12px 12px;
  display:flex;
  flex-direction: column;
  gap:10px;
  align-items: stretch;
}

.support-panel .row{
  display:flex;
  gap:10px;
  align-items:flex-end;
}

.support-panel .actions{
  display:flex;
  gap:10px;
  align-items:center;
}

.support-panel .empty{
  opacity:.75;
  text-align:center;
  padding: 18px 10px;
}

.support-panel .hint{
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.18);
  border-radius: 14px;
  padding: 10px 12px;
  color: #fff;
}

.support-panel .hint-title{
  font-weight: 900;
  margin-bottom: 6px;
}

.support-panel .hint-text{
  opacity: .75;
  font-size: .9rem;
}

.support-panel .tooltip-wrap{
  position: relative;
  display: inline-flex;
}

.support-panel .tooltip{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 10px);
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  transition: .2s;
  z-index: 5;
}

.support-panel .tooltip-wrap:hover .tooltip{
  opacity: 1;
}

.support-panel .send[disabled]{
  opacity: .5;
  cursor: not-allowed;
}

.support-panel textarea{
  flex:1;
  min-height: 44px;
  max-height: 120px;
  resize:none;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.2);
  color:#fff;
  outline:none;
}
.support-panel .send{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(138, 43, 226, 0.45);
  background: rgba(138, 43, 226, 0.22);
  color:#fff;
  font-weight: 900;
  cursor:pointer;
}
.support-panel .form-row{ display:flex; gap:10px; margin-bottom:10px; }
.support-panel input{
  width:100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.2);
  color:#fff;
  outline:none;
}
.support-rating{
  display:flex;
  gap:8px;
  justify-content:center;
  padding: 10px 0 4px;
}
.support-rating button{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color:#fff;
  cursor:pointer;
  font-weight: 900;
}


/* --- Support page (contacts.html) styles (scoped) --- */
#supportPageChat .support-page{
  width:100%;
}
#supportPageChat .support-page-card{
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.06);
}
#supportPageChat .sp-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:12px;
  margin-bottom: 12px;
}
#supportPageChat .sp-title{
  font-weight: 900;
  letter-spacing: .02em;
}
#supportPageChat .sp-meta{
  opacity: .65;
  font-size: .9rem;
}
#supportPageChat .sp-icon-btn{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: #fff;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
#supportPageChat .sp-main{
  position: relative;
  /* Keep off-canvas drawer above the chat body even on translucent (glass) UI */
  isolation: isolate;
  /* Prevent the drawer from "leaking" outside of the chat card.
     When the card is centered (wide desktop), an off-canvas drawer that
     translates left can still be visible inside the viewport. We clip
     everything to the card bounds so the drawer is fully hidden when closed.
  */
  overflow: hidden;
  border-radius: 16px;
}
#supportPageChat .sp-body{
  height: 360px;
  overflow:auto;
  padding: 12px;
  border-radius: 16px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.06);
  position: relative;
  z-index: 1;
}
#supportPageChat .sp-foot{
  margin-top: 12px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
#supportPageChat .sp-row{
  display:flex;
  gap: 10px;
  align-items:flex-end;
}
#supportPageChat .sp-drawer-overlay{
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 18, 0.62);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: .2s;
  border-radius: 16px;
  z-index: 40;
}
#supportPageChat .sp-drawer{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 320px;
  max-width: 86%;
  transform: translateX(-110%);
  transition: .25s;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(10, 8, 25, 0.985);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 55px rgba(0,0,0,0.55);
  overflow:hidden;
  display:flex;
  flex-direction: column;
  z-index: 50;
  overflow-x: hidden;
}
#supportPageChat .support-page-card.menu-open .sp-drawer{
  transform: translateX(0);
}
#supportPageChat .support-page-card.menu-open .sp-drawer-overlay{
  opacity: 1;
  pointer-events: auto;
}
#supportPageChat .sp-drawer-head{
  padding: 14px 14px 10px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
#supportPageChat .sp-drawer-title{
  font-weight: 900;
}
#supportPageChat .sp-drawer-body{
  padding: 0 14px 12px;
  overflow:auto;
  flex: 1;
  overflow-x: hidden;
}
#supportPageChat .sp-search{
  width:100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.25);
  color: #fff;
  outline:none;
  margin-bottom: 10px;
}
#supportPageChat .sp-ticket-item{
  width:100%;
  text-align:left;
  color: #fff;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  cursor:pointer;
  margin-bottom: 10px;
  overflow: hidden;
}
#supportPageChat .sp-ticket-item:hover{
  border-color: rgba(138,43,226,0.35);
  background: rgba(138,43,226,0.10);
}
#supportPageChat .sp-ticket-meta{
  opacity: .65;
  font-size: 12px;
  margin-bottom: 6px;
}
#supportPageChat .sp-ticket-title{
  font-weight: 800;
  white-space: normal;
  overflow-wrap: anywhere;
}
#supportPageChat .sp-hint{
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.18);
  border-radius: 16px;
  padding: 12px 14px;
}
#supportPageChat .sp-hint b{
  font-weight: 900;
}
#supportPageChat .sp-tooltip-wrap{
  position: relative;
  display: inline-flex;
}
#supportPageChat .sp-tooltip{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 10px);
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  transition: .2s;
}
#supportPageChat .sp-tooltip-wrap:hover .sp-tooltip{
  opacity: 1;
}
@media (max-width: 520px){
  #supportPageChat .sp-body{ height: 420px; }
}

/* Support page secondary buttons */
#supportPageChat .sp-btn-secondary{
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: rgba(255,255,255,0.04) !important;
  color: #fff !important;
}
#supportPageChat .sp-btn-secondary:hover{
  border-color: rgba(138,43,226,0.35) !important;
  background: rgba(138,43,226,0.10) !important;
}
#supportPageChat .sp-btn-secondary:disabled{
  opacity: .55;
  cursor: not-allowed;
}