/* =================== SUPPORT CHAT (FULL) =================== */

/* Chat-only vars (kept OUT of styles.css) */
:root{
  --support-chat-modal-height: 560px;
  --support-chat-input-height: 52px;
  --brand: var(--btnIdle, #857BFF);
  --brand-hover: var(--btnActive, #00A3FF);
  --brand-active: rgba(133,123,255,0.92);
  --shadow: 0 16px 36px rgba(0,0,0,0.22);
}

.support-chat-button{
  position:fixed;
  right:28px;
  bottom:28px;
  z-index:2500;
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  padding:0;
  border:0;
  border-radius:50%;
  background-color: var(--brand);
  color:#fff;
  cursor:pointer;
  box-shadow: 0 16px 36px rgba(133,123,255,0.22), inset 0 0 0 1px rgba(255,255,255,0.084);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, filter .2s ease, opacity .2s ease;
  overflow:visible;
}
.support-chat-button:hover{
  background-color: var(--brand-hover);
  transform:translateY(-2px);
  box-shadow: 0 22px 44px rgba(0,163,255,0.30), inset 0 0 0 1px rgba(255,255,255,0.126);
}
.support-chat-button:active{
  background-color: var(--brand-active);
  transform:translateY(0);
  filter:brightness(.94);
}
.support-chat-button:focus-visible{
  outline:3px solid rgba(255,255,255,0.6);
  outline-offset:3px;
}
.support-chat-button.is-hidden{
  opacity:0;
  transform:scale(0.9);
  pointer-events:none;
}
.support-chat-button__icon{
  width:41px;
  height:41px;
  display:block;
  background-color:currentColor;
  -webkit-mask-image: url("./assets/Support.svg");
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-image: url("./assets/Support.svg");
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
  mask-mode: alpha;
}
.support-chat-badge{
  position:absolute;
  top:-2px;
  right:-2px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#ff3b30;
  color:#fff;
  font-size:11px;
  font-weight:700;
  line-height:18px;
  text-align:center;
  box-shadow:0 8px 20px rgba(0,0,0,0.22);
  pointer-events:none;
  user-select:none;
  z-index:2;
}

.support-chat-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  padding:24px;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
  z-index:1590;
}
.support-chat-overlay.is-open{
  opacity:1;
  pointer-events:auto;
}
.support-chat-backdrop{
  position:absolute;
  inset:0;
  background:rgba(5,12,32,0.68);
  backdrop-filter:blur(6px);
}

/* Modal itself */
.support-chat-modal{
  position:relative;
  width:min(420px, 100%);
  height:min(var(--support-chat-modal-height), calc(100dvh - 160px));
  max-height:min(var(--support-chat-modal-height), calc(100dvh - 160px));
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:18px;
  border-radius:22px;
  box-shadow:0 24px 70px rgba(5,12,32,0.6), inset 0 0 0 1px rgba(255,255,255,0.04);
  z-index:1601;

  /* moved from styles.css (chat-only) */
  background:
    linear-gradient(180deg, rgba(10,15,29,.88), rgba(10,15,29,.8)),
    url("./assets/hero-bg2.svg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.support-chat-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.support-chat-status{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  color:#f8fafc;
}
.support-chat-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  box-shadow:0 0 12px rgba(34,197,94,0.45);
  transition:background .2s ease;
}
.support-chat-dot.is-online{ background:#22c55e; }
.support-chat-dot.is-connecting{ background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); }
.support-chat-dot.is-offline{ background:rgba(239,68,68,0.9); box-shadow:0 0 12px rgba(239,68,68,0.4); }

.support-chat-close{
  width:36px;
  height:36px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
  color:#f1f5f9;
  font-size:22px;
  font-weight:600;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background .2s ease;
}
.support-chat-close:hover{ background:rgba(255,255,255,0.12); }
.support-chat-close:focus-visible{ outline:2px solid rgba(255,255,255,0.65); outline-offset:2px; }

.support-chat-body{
  flex:1 1 auto;
  min-height:220px;
  display:flex;
  flex-direction:column;
}

.support-chat-messages{
  flex:1 1 auto;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-right:4px;

  scrollbar-width:thin;
  scrollbar-color: rgba(255,255,255,0.16) transparent;
}
.support-chat-messages::-webkit-scrollbar{ width:6px; background:transparent; }
.support-chat-messages::-webkit-scrollbar-track,
.support-chat-messages::-webkit-scrollbar-track-piece{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.support-chat-messages::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.16);
  border-radius:6px;
  border:0;
}
.support-chat-messages::-webkit-scrollbar-corner{ background:transparent; }
.support-chat-messages::-webkit-scrollbar-button{ width:0; height:0; display:none; }

.support-chat-message{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-width:100%;
  font-size:14px;
}
.support-chat-message--mine{ align-items:flex-end; }
.support-chat-message--agent{ align-items:flex-start; }
.support-chat-message--system{
  align-items:center;
  color:var(--muted);
  font-size:13px;
}

.support-chat-bubble{
  padding:10px 14px;
  border-radius:18px;
  line-height:1.4;
  max-width:85%;
  word-break:break-word;
}
.support-chat-message--mine .support-chat-bubble{
  background-image:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color:#ffffff;
}
.support-chat-message--agent .support-chat-bubble{
  background:rgba(255,255,255,0.08);
  color:var(--text);
  border:1px solid rgba(255,255,255,0.06);
}
.support-chat-meta{
  font-size:11px;
  color:rgba(226,232,240,0.65);
}

.support-chat-wait{
  margin-top:auto;
  padding:12px;
  border-radius:16px;
  background:rgba(58,69,99,0.32);
  color:#e2e8f0;
  font-size:13px;
  line-height:1.5;
}

.support-chat-form{
  display:flex;
  align-items:stretch;
  gap:12px;
}

.support-chat-input{
  flex:1 1 auto;
  min-height:var(--support-chat-input-height);
  max-height:120px;
  padding:12px 16px;
  line-height: calc(var(--support-chat-input-height) - 24px);
  color:var(--text);
  font-family:'Inter', sans-serif;
  font-size:14px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  resize:none;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.support-chat-input::-webkit-scrollbar{ width:0; height:0; display:none; }
.support-chat-input:focus{
  outline:none;
  border-color:rgba(255,255,255,0.2);
  box-shadow:0 0 0 1px rgba(255,255,255,0.12);
}

.support-chat-send{
  flex:0 0 auto;
  align-self:stretch;
  min-height:var(--support-chat-input-height);
  padding:0 16px;
  border:0;
  border-radius:14px;
  font-weight:600;
  color:#ffffff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color: var(--brand);
  box-shadow: var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease, background-color .2s ease, opacity .2s ease;
}
.support-chat-send:disabled{
  cursor:not-allowed;
  opacity:.55;
  box-shadow:none;
}
.support-chat-send:not(:disabled):hover{
  background-color: var(--brand-hover);
  transform:translateY(-1px);
}
.support-chat-send:not(:disabled):active{
  background-color: var(--brand-active);
  transform:translateY(1px);
  filter:brightness(.92);
}

/* Chat-only unified rounding moved from styles.css */
.support-chat-modal .support-chat-input,
.support-chat-modal .support-chat-send{
  border-radius:10px !important;
}