/* CGT Ajans - Customer Service Widget (Premium, minimal) */
:root{
  --cgt-orange:#ff7a18;
  --cgt-orange-2:#ff983f;
  --cgt-ink:#0b1220;
  --cgt-muted:#5b6475;
  --cgt-card:#ffffff;
  --cgt-line:rgba(11,18,32,.10);
  --cgt-shadow:0 18px 50px rgba(11,18,32,.18);
}

.support-widget{position:fixed; right:18px; bottom:18px; z-index:9999; font-family:inherit;}
.support-fab{
  width:56px; height:56px; border-radius:16px;
  background:linear-gradient(135deg,var(--cgt-orange),var(--cgt-orange-2));
  box-shadow:0 14px 30px rgba(255,122,24,.32), 0 10px 22px rgba(11,18,32,.18);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none;
  border:1px solid rgba(255,255,255,.35);
}
.support-fab svg{width:26px;height:26px; fill:#fff;}
.support-badge{
  position:absolute; right:2px; top:-6px;
  background:#fff; color:var(--cgt-ink);
  border:1px solid var(--cgt-line);
  font-size:11px; padding:3px 7px; border-radius:999px;
  box-shadow:0 8px 18px rgba(11,18,32,.12);
}
.support-panel{
  position:absolute; right:0; bottom:68px;
  width:min(360px, calc(100vw - 36px));
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border:1px solid var(--cgt-line);
  border-radius:18px;
  box-shadow:var(--cgt-shadow);
  overflow:hidden;
  transform: translateY(12px);
  opacity:0; pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.support-panel.is-open{opacity:1; transform: translateY(0); pointer-events:auto;}
.support-head{
  display:flex; gap:12px; align-items:center;
  padding:14px 14px 12px 14px;
  border-bottom:1px solid var(--cgt-line);
  background:linear-gradient(180deg, rgba(255,122,24,.10), rgba(255,122,24,0));
}
.support-avatar{
  width:38px; height:38px; border-radius:12px;
  border:1px solid var(--cgt-line);
  background:#fff;
  overflow:hidden;
  flex:0 0 auto;
}
.support-avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.support-meta{min-width:0; flex:1;}
.support-title{font-weight:800; color:var(--cgt-ink); line-height:1.1;}
.support-sub{font-size:12px; color:var(--cgt-muted); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.support-close{
  width:34px; height:34px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  border:1px solid var(--cgt-line);
  background:#fff;
}
.support-close svg{width:18px;height:18px; fill:var(--cgt-ink); opacity:.75;}

.support-body{padding:12px 12px 10px 12px; max-height:360px; overflow:auto;}
.support-row{display:flex; gap:10px; margin:10px 0;}
.support-row.me{justify-content:flex-end;}
.bubble{
  max-width:78%;
  padding:10px 11px;
  border-radius:14px;
  border:1px solid var(--cgt-line);
  font-size:13px;
  color:var(--cgt-ink);
  background:#fff;
  line-height:1.35;
}
.me .bubble{
  background:rgba(255,122,24,.12);
  border-color: rgba(255,122,24,.22);
}
.bubble .time{
  display:block;
  font-size:11px;
  color:var(--cgt-muted);
  margin-top:6px;
}
.support-quick{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:0 12px 10px 12px;
}
.quick-btn{
  border:1px solid var(--cgt-line);
  background:#fff;
  border-radius:999px;
  padding:7px 10px;
  font-size:12px;
  color:var(--cgt-ink);
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.quick-btn:hover{transform: translateY(-1px); border-color: rgba(255,122,24,.35);}
.support-foot{
  padding:10px 12px 12px 12px;
  border-top:1px solid var(--cgt-line);
  display:flex; gap:8px; align-items:center;
  background:#fff;
}
.support-input{
  flex:1;
  border:1px solid var(--cgt-line);
  border-radius:12px;
  padding:10px 10px;
  font-size:13px;
  outline:none;
}
.support-send{
  border:none;
  background: linear-gradient(135deg,var(--cgt-orange),var(--cgt-orange-2));
  color:#fff;
  font-weight:800;
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(255,122,24,.22);
}
.support-note{
  padding:0 12px 12px 12px;
  font-size:11px;
  color:var(--cgt-muted);
}
.support-note a{color:var(--cgt-ink); text-decoration:none; border-bottom:1px dashed rgba(11,18,32,.25);}
@media (max-width:520px){
  .support-widget{right:12px; bottom:12px;}
  .support-panel{bottom:64px;}
}