/* ===== SUPPORT WIDGET & TICKET SYSTEM ===== */
@keyframes tktPulse{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes tktOnlinePing{0%{transform:scale(1);opacity:.8}70%{transform:scale(2.4);opacity:0}100%{transform:scale(1);opacity:0}}

.tkt-bubble{
  position:fixed;bottom:24px;right:24px;width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--blue-dim));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:1.35rem;cursor:pointer;border:none;
  box-shadow:0 8px 28px rgba(25,98,247,.55),0 0 0 1px rgba(255,255,255,.08) inset;
  z-index:1001;transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.tkt-bubble i{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.tkt-bubble.active{background:rgba(10,14,31,.95);border:1px solid rgba(25,98,247,.3);
  box-shadow:0 8px 28px rgba(0,0,0,.4)}
.tkt-bubble.active i{transform:scale(.8)}
.tkt-bubble:hover{transform:scale(1.1);box-shadow:0 12px 36px rgba(25,98,247,.7)}

/* Panel */
.tkt-panel{
  position:fixed;bottom:92px;right:24px;width:340px;
  height:min(520px,78vh);
  background:rgba(7,10,22,.97);
  border:1px solid rgba(25,98,247,.2);
  border-radius:20px;
  box-shadow:0 32px 80px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04) inset,
             0 0 40px rgba(25,98,247,.06);
  z-index:1000;display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(18px) scale(.95);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .22s,visibility 0s .3s;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.tkt-panel.open{
  transform:translateY(0) scale(1);opacity:1;visibility:visible;pointer-events:all;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .22s,visibility 0s 0s;
}

.tkt-header{
  background:linear-gradient(135deg,rgba(18,85,214,.9) 0%,rgba(25,98,247,.95) 100%);
  padding:16px 18px;display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.08);
  position:relative;overflow:hidden;
}
.tkt-header-left{display:flex;align-items:center;gap:11px}
.tkt-header-avatar{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;
}
.tkt-header-title{font-size:.95rem;font-weight:700;color:#fff;line-height:1.2}
.tkt-header-sub{font-size:.7rem;color:rgba(255,255,255,.72);margin-top:2px;display:flex;align-items:center;gap:5px;}
.tkt-online-dot{
  width:7px;height:7px;border-radius:50%;background:#4ade80;flex-shrink:0;
  box-shadow:0 0 6px rgba(74,222,128,.7);position:relative;display:inline-block;
}
.tkt-online-dot::after{
  content:'';position:absolute;inset:0;border-radius:50%;background:#4ade80;
  animation:tktOnlinePing 2s ease-out infinite;
}
.tkt-close{
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.12);color:#fff;
  width:30px;height:30px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}

.tkt-body{flex:1;padding:16px;display:flex;flex-direction:column;overflow:hidden;gap:0}
.tkt-screen{display:flex;flex-direction:column;gap:10px;flex:1;overflow:hidden}

/* Chat styles */
#tktChatMessages{padding:12px 14px;flex:1;overflow-y:auto;display:flex;flex-direction:column;}
.tkt-chat-bubble-wrap{display:flex;flex-direction:column;max-width:82%;margin-bottom:10px}
.tkt-chat-bubble-wrap.user{align-self:flex-end;align-items:flex-end}
.tkt-chat-bubble-wrap.admin{align-self:flex-start;align-items:flex-start}
.tkt-chat-bubble-text{
  padding:9px 13px;font-size:.84rem;line-height:1.55;
  white-space:pre-wrap;word-break:break-word;
}
.tkt-chat-bubble-wrap.user .tkt-chat-bubble-text{
  background:linear-gradient(135deg,var(--blue),var(--blue-dim));
  border:1px solid rgba(255,255,255,.08);border-radius:16px 16px 3px 16px;
  color:#fff;box-shadow:0 3px 12px rgba(25,98,247,.25);
}
.tkt-chat-bubble-wrap.admin .tkt-chat-bubble-text{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:16px 16px 16px 3px;color:var(--text);
}
.tkt-chat-bubble-time{font-size:.6rem;color:var(--text3);margin-top:3px;padding:0 4px}

.tkt-chat-input-row{
  flex-shrink:0;padding:8px 12px 12px;
  border-top:1px solid rgba(25,98,247,.08);
  position:relative;
}
.tkt-chat-input-box{
  display:flex;flex-direction:column;width:100%;
  background:rgba(255,255,255,.04); border:1.5px solid rgba(255,255,255,.1);
  border-radius:16px;overflow:hidden;
}
.tkt-chat-textarea{
  width:100%;background:transparent;border:none;padding:12px 14px 8px;
  color:var(--text);font-size:.85rem;font-family:'Jost',sans-serif;outline:none;resize:none;
}
.tkt-chat-send{
  background:linear-gradient(135deg,var(--blue),var(--blue-dim));border:none;color:#fff;
  width:32px;height:32px;border-radius:10px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}

.tkt-field label{font-size:.7rem;font-weight:700;color:var(--text2);text-transform:uppercase;margin-bottom:5px;display:block;}
.tkt-field input{
  width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:10px 13px;color:var(--text);outline:none;
}
.tkt-submit{
  background:linear-gradient(135deg,var(--blue),var(--blue-dim));
  border:none;color:#fff;padding:12px;border-radius:12px;cursor:pointer;font-weight:700;
}
.tkt-err{font-size:.76rem;color:#f87171;margin-bottom:5px;}

/* My Tickets */
.tkt-my-item{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-radius:14px;margin-bottom:10px;padding:12px;cursor:pointer;position:relative;
}
.tkt-my-subject{font-size:.88rem;font-weight:700;color:#fff;margin-bottom:3px}
.tkt-my-meta{font-size:.68rem;color:var(--text2)}
.tkt-status-pill{font-size:.6rem;font-weight:800;padding:3px 9px;border-radius:50px;text-transform:uppercase;}

@media(max-width:768px){
  .tkt-panel{width:calc(100vw - 40px);right:20px;bottom:80px;}
  .tkt-bubble{bottom:20px;right:20px;width:54px;height:54px;}
}

/* Social Support Buttons */
.tkt-social-row {
  display: flex; gap: 8px; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid rgba(255,255,255,.05);
}
.tkt-social-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px; border-radius: 12px; font-size: 0.74rem; font-weight: 700;
  text-decoration: none; transition: all 0.25s ease;
  border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03);
  color: var(--text2);
}
.tkt-social-btn i { font-size: 0.95rem; }
.tkt-social-btn.ds:hover { background: rgba(88,101,242,0.15); border-color: rgba(88,101,242,0.4); color: #7289da; transform: translateY(-2px); }
.tkt-social-btn.tg:hover { background: rgba(34,158,217,0.15); border-color: rgba(34,158,217,0.4); color: #229ed9; transform: translateY(-2px); }

/* Mobile Persistent Socials Styling */
.tkt-mobile-socials {
  display: none;
  padding: 12px 16px;
  background: rgba(10,14,31,0.98);
  border-top: 1px solid rgba(25,98,247,0.15);
  gap: 10px;
}
.tkt-ms-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; border-radius: 12px; font-size: 0.8rem; font-weight: 800;
  text-decoration: none; color: #fff;
  transition: all 0.2s ease;
}
.tkt-ms-btn.ds { background: linear-gradient(135deg, #5865F2, #4752C4); box-shadow: 0 4px 12px rgba(88,101,242,0.3); }
.tkt-ms-btn.tg { background: linear-gradient(135deg, #24A1DE, #1C82B6); box-shadow: 0 4px 12px rgba(36,161,222,0.3); }
.tkt-ms-btn:active { transform: scale(0.96); opacity: 0.9; }

@media (max-width: 768px) {
  .tkt-mobile-socials { display: flex; }
}