/* ═══════════════════════════════════════════════════════════
   THAI AI CREATOR — Global Sidebar Component
   ใช้ร่วมกันทุกหน้า แก้ที่นี่ไฟล์เดียว เปลี่ยนทุกหน้า
═══════════════════════════════════════════════════════════ */

:root{
  --gs-bg:#0e0f17;
  --gs-bg-2:#13141d;
  --gs-line:rgba(255,255,255,.07);
  --gs-text:#e4e7ef;
  --gs-muted:rgba(190,198,214,.55);
  --gs-label:rgba(190,198,214,.45);
  --gs-active-1:#6D5EF7;
  --gs-active-2:#20c6ff;
  --gs-active-3:#ff2d82;
  --gs-icon-bg:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  --gs-icon-border:rgba(255,255,255,.10);
  --gs-link-h:46px;
  --gs-radius:13px;
  --gs-width:260px;
}

/* ── Sidebar Container ── */
.gs-sidebar{
  position:fixed;
  left:0;top:var(--top,64px);bottom:0;
  width:var(--gs-width);
  z-index:40;
  background:linear-gradient(180deg,var(--gs-bg) 0%,var(--gs-bg-2) 100%);
  border-right:1px solid var(--gs-line);
  padding:18px 14px 24px;
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.08) transparent;
}
.gs-sidebar::-webkit-scrollbar{width:6px}
.gs-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:999px}

/* ── Brand search-like header ── */
.gs-brand-card{
  display:flex;align-items:center;gap:10px;
  height:42px;padding:0 12px;
  background:#0a0b13;
  border:1px solid var(--gs-line);
  border-radius:11px;
  color:#cfd3dd;
  margin-bottom:18px;
  font-size:13.5px;font-weight:600;
}
.gs-brand-card .gs-brand-logo{
  width:24px;height:24px;border-radius:7px;
  background:linear-gradient(135deg,var(--gs-active-1),var(--gs-active-2));
  display:grid;place-items:center;
  font-size:13px;color:#fff;font-weight:800;
}

/* ── Section label ── */
.gs-label{
  font-size:10.5px;
  letter-spacing:.13em;
  color:var(--gs-label);
  text-transform:uppercase;
  margin:18px 0 8px 6px;
  font-weight:700;
}
.gs-label:first-of-type{margin-top:6px}

/* ── Menu Link ── */
.gs-link{
  position:relative;
  display:flex;align-items:center;gap:12px;
  min-height:var(--gs-link-h);
  padding:0 12px;
  margin-bottom:4px;
  border-radius:var(--gs-radius);
  color:var(--gs-text);
  text-decoration:none;
  font-size:14px;font-weight:600;letter-spacing:-.01em;
  border:1px solid transparent;
  overflow:hidden;
  cursor:pointer;
  isolation:isolate;
  --gs-mx:50%; --gs-my:50%;
  transition:
    background .28s cubic-bezier(.4,0,.2,1),
    transform .28s cubic-bezier(.4,0,.2,1),
    border-color .28s,
    box-shadow .28s;
}

/* ✨ Mouse-following spotlight */
.gs-link::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(circle 90px at var(--gs-mx) var(--gs-my),
    rgba(167,139,250,.28),
    rgba(32,198,255,.12) 30%,
    transparent 60%);
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.gs-link:hover::before{opacity:1}

/* ✨ Aurora glow border */
.gs-link::after{
  content:'';position:absolute;inset:-1px;border-radius:inherit;
  background:conic-gradient(from 0deg at var(--gs-mx) var(--gs-my),
    transparent 0deg,
    rgba(167,139,250,.6) 60deg,
    transparent 120deg,
    rgba(32,198,255,.6) 240deg,
    transparent 300deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask-composite:exclude;
  padding:1px;
  opacity:0;
  z-index:0;
  pointer-events:none;
  transition:opacity .4s ease;
}
.gs-link:hover::after{opacity:1;animation:gsAuroraSpin 4s linear infinite}
@keyframes gsAuroraSpin{
  to{filter:hue-rotate(360deg)}
}
.gs-link:hover{
  background:linear-gradient(90deg,
    rgba(109,94,247,.18),
    rgba(32,198,255,.10) 60%,
    rgba(255,45,130,.06));
  border-color:rgba(255,255,255,.08);
  box-shadow:
    inset 3px 0 0 var(--gs-active-2),
    0 6px 22px rgba(0,0,0,.25);
}
.gs-link.active{
  background:linear-gradient(90deg,
    rgba(109,94,247,.28),
    rgba(32,198,255,.14) 55%,
    rgba(255,45,130,.08));
  border-color:rgba(255,255,255,.10);
  box-shadow:
    inset 3px 0 0 var(--gs-active-1),
    0 12px 34px rgba(0,0,0,.32);
}
.gs-link.active::after{
  content:'';position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;
  background:var(--gs-active-2);
  box-shadow:0 0 12px var(--gs-active-2);
  animation:gsActivePulse 1.8s ease-in-out infinite;
}
@keyframes gsActivePulse{
  0%,100%{opacity:.7;transform:translateY(-50%) scale(1)}
  50%{opacity:1;transform:translateY(-50%) scale(1.4)}
}

/* ── Icon wrapper ── */
.gs-ico{
  width:30px;min-width:30px;height:30px;
  display:inline-grid;place-items:center;
  border-radius:9px;
  background:var(--gs-icon-bg);
  border:1px solid var(--gs-icon-border);
  color:#dde2ed;
  transition:
    transform .35s cubic-bezier(.34,1.56,.64,1),
    background .3s,
    color .3s,
    box-shadow .3s;
}
.gs-ico svg{
  width:17px;height:17px;
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}

/* ── Hover: lift + glow ── */
.gs-link:hover .gs-ico{
  background:linear-gradient(135deg,rgba(125,140,255,.20),rgba(255,255,255,.04));
  border-color:rgba(185,195,255,.30);
  color:#fff;
  transform:translateY(-2px) scale(1.08);
  box-shadow:
    0 8px 20px rgba(109,94,247,.35),
    inset 0 1px 0 rgba(255,255,255,.18);
}

/* ── Active state icon ── */
.gs-link.active .gs-ico{
  background:linear-gradient(135deg,var(--gs-active-1),var(--gs-active-2));
  color:#fff;
  border-color:rgba(255,255,255,.22);
  box-shadow:
    0 10px 28px rgba(109,94,247,.55),
    inset 0 1px 0 rgba(255,255,255,.25);
}

/* ───────────────────────────────────────
   🎬 Per-icon Micro-interactions (Hover)
   ─ แต่ละไอคอนเด้งคนละแบบให้ชีวิตชีวา ─
─────────────────────────────────────── */

/* Commerce Studio → cart shake */
.gs-link[data-key="commerce"]:hover .gs-ico svg{
  animation:gsCartShake .65s ease-in-out;
}
@keyframes gsCartShake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-2px) rotate(-4deg)}
  75%{transform:translateX(2px) rotate(4deg)}
}

/* Generated Videos → play pulse */
.gs-link[data-key="generated"]:hover .gs-ico svg{
  animation:gsPlayPulse .8s ease-in-out;
}
@keyframes gsPlayPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.18)}
}

/* Published Videos → chart bounce */
.gs-link[data-key="published"]:hover .gs-ico svg{
  animation:gsChartBounce .7s cubic-bezier(.34,1.56,.64,1);
}
@keyframes gsChartBounce{
  0%{transform:translateY(0)}
  50%{transform:translateY(-3px) scale(1.1)}
  100%{transform:translateY(0)}
}

/* Scheduler → tilt clock */
.gs-link[data-key="scheduler"]:hover .gs-ico svg{
  animation:gsTilt .7s ease-in-out;
}
@keyframes gsTilt{
  0%,100%{transform:rotate(0)}
  30%{transform:rotate(-8deg)}
  60%{transform:rotate(8deg)}
}

/* Gallery → grid pop */
.gs-link[data-key="gallery"]:hover .gs-ico svg{
  animation:gsGridPop .6s ease-out;
}
@keyframes gsGridPop{
  0%{transform:scale(.85)}
  60%{transform:scale(1.18)}
  100%{transform:scale(1)}
}

/* Film Studio → reel spin */
.gs-link[data-key="film"]:hover .gs-ico svg{
  animation:gsReelSpin .9s ease-in-out;
}
@keyframes gsReelSpin{
  0%{transform:rotate(0)}
  100%{transform:rotate(20deg)}
}

/* Music Studio → note dance */
.gs-link[data-key="music"]:hover .gs-ico svg{
  animation:gsNoteDance .7s ease-in-out;
}
@keyframes gsNoteDance{
  0%,100%{transform:translateY(0) rotate(0)}
  25%{transform:translateY(-3px) rotate(-6deg)}
  75%{transform:translateY(-2px) rotate(6deg)}
}

/* Voice → mic vibrate */
.gs-link[data-key="voice"]:hover .gs-ico svg{
  animation:gsMicVibrate .55s linear;
}
@keyframes gsMicVibrate{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-1.5px)}
  40%{transform:translateX(1.5px)}
  60%{transform:translateX(-1px)}
  80%{transform:translateX(1px)}
}

/* Automation → gear rotate */
.gs-link[data-key="automation"]:hover .gs-ico svg{
  animation:gsGearRotate 1.2s linear infinite;
}
@keyframes gsGearRotate{
  to{transform:rotate(360deg)}
}

/* Billing → card flip */
.gs-link[data-key="billing"]:hover .gs-ico svg{
  animation:gsCardFlip .8s ease-in-out;
}
@keyframes gsCardFlip{
  0%,100%{transform:rotateY(0)}
  50%{transform:rotateY(180deg)}
}

/* ── Slide-right text on hover (with subtle shimmer) ── */
.gs-link .gs-label-text{
  position:relative;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  background:linear-gradient(90deg,currentColor 0%,currentColor 50%,currentColor 100%);
  -webkit-background-clip:text;background-clip:text;
}
.gs-link:hover .gs-label-text{
  transform:translateX(4px);
  background:linear-gradient(90deg,#fff 0%,#a78bfa 50%,#20c6ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 100%;
  animation:gsShimmer 2s linear infinite;
}
@keyframes gsShimmer{
  0%{background-position:0 0}
  100%{background-position:200% 0}
}

/* ── Ripple effect on click ── */
.gs-ripple{
  position:absolute;
  width:8px;height:8px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(167,139,250,.8),rgba(32,198,255,.4) 60%,transparent);
  transform:translate(-50%,-50%) scale(0);
  pointer-events:none;
  animation:gsRippleAnim .65s cubic-bezier(.4,0,.2,1) forwards;
  z-index:2;
}
@keyframes gsRippleAnim{
  0%{transform:translate(-50%,-50%) scale(0);opacity:1}
  100%{transform:translate(-50%,-50%) scale(50);opacity:0}
}

/* ── Badge (NEW/PRO) ── */
.gs-badge{
  margin-left:auto;
  font-size:9.5px;font-weight:700;
  padding:3px 7px;border-radius:999px;
  letter-spacing:.05em;
  transition:transform .3s;
}
.gs-badge.new{background:linear-gradient(135deg,#22c55e,#10b981);color:#fff}
.gs-badge.pro{background:linear-gradient(135deg,#f59e0b,#f97316);color:#fff}
.gs-badge.beta{background:rgba(167,139,250,.2);color:#a78bfa;border:1px solid rgba(167,139,250,.4)}
.gs-link:hover .gs-badge{transform:scale(1.08)}

/* ── Credits / User Card ── */
.gs-card{
  margin-top:14px;
  padding:14px;
  border:1px solid var(--gs-line);
  background:#171820;
  border-radius:13px;
  font-size:13px;color:var(--gs-text);
  transition:transform .25s, box-shadow .25s;
}
.gs-card:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(0,0,0,.3)}
.gs-card small{color:var(--gs-muted);display:block;margin-top:3px;font-size:11.5px}
.gs-card.credit{
  background:linear-gradient(135deg,rgba(109,94,247,.18),rgba(32,198,255,.06));
  border-color:rgba(109,94,247,.35);
}
.gs-card.credit b{color:#a78bfa;font-size:16px}

/* ────────────────────────────────────────────
   📱 Responsive: Desktop Collapse + Mobile Drawer
──────────────────────────────────────────── */

/* Sidebar transition */
.gs-sidebar{
  transition:width .35s cubic-bezier(.4,0,.2,1),
             transform .35s cubic-bezier(.4,0,.2,1),
             padding .35s ease;
}

/* ── Desktop Collapsed (รองรับทั้ง .gs-collapsed ใหม่ และ .sidebar-collapsed เดิม) ── */
@media(min-width:1201px){
  body.gs-collapsed .gs-sidebar,
  body.sidebar-collapsed .gs-sidebar{
    width:78px;
    padding:16px 8px;
  }
  body.gs-collapsed .gs-brand-card span,
  body.gs-collapsed .gs-label,
  body.gs-collapsed .gs-link .gs-label-text,
  body.gs-collapsed .gs-link .gs-badge,
  body.gs-collapsed .gs-card,
  body.sidebar-collapsed .gs-brand-card span,
  body.sidebar-collapsed .gs-label,
  body.sidebar-collapsed .gs-link .gs-label-text,
  body.sidebar-collapsed .gs-link .gs-badge,
  body.sidebar-collapsed .gs-card{display:none!important}
  body.gs-collapsed .gs-link,
  body.sidebar-collapsed .gs-link{justify-content:center;padding:0}
  body.gs-collapsed .gs-link.active::after,
  body.sidebar-collapsed .gs-link.active::after{display:none}
  body.gs-collapsed .main,
  body.sidebar-collapsed .main{margin-left:78px}
}

/* ── Tablet (narrow but no toggle yet) ── */
@media(max-width:1200px) and (min-width:901px){
  .gs-sidebar{
    width:78px;
    padding:16px 8px;
  }
  .gs-brand-card span,
  .gs-label,
  .gs-link .gs-label-text,
  .gs-link .gs-badge,
  .gs-card{display:none}
  .gs-link{justify-content:center;padding:0}
  .gs-link.active::after{display:none}
  .main{margin-left:78px}
}

/* ── Mobile (≤900px) — Sidebar เป็น Drawer ── */
@media(max-width:900px){
  .gs-sidebar{
    width:280px;
    transform:translateX(-100%);
    box-shadow:0 0 60px rgba(0,0,0,.6);
    z-index:1000;
  }
  body.gs-mobile-open .gs-sidebar{
    transform:translateX(0);
  }
  /* Backdrop */
  .gs-backdrop{
    position:fixed;inset:0;z-index:999;
    background:rgba(0,0,0,.6);
    backdrop-filter:blur(8px);
    opacity:0;pointer-events:none;
    transition:opacity .3s ease;
  }
  body.gs-mobile-open .gs-backdrop{
    opacity:1;pointer-events:auto;
  }
  /* Main = full width on mobile */
  .main{margin-left:0!important}
  /* Lock body scroll when drawer open */
  body.gs-mobile-open{overflow:hidden}
}

/* ── Close button (X) — visible only on mobile drawer ── */
.gs-close-btn{
  display:none;
  position:absolute;top:14px;right:14px;
  width:36px;height:36px;border-radius:10px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;cursor:pointer;
  align-items:center;justify-content:center;
  transition:all .2s;
}
.gs-close-btn:hover{background:rgba(255,255,255,.14);transform:rotate(90deg)}
.gs-close-btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2}
@media(max-width:900px){
  .gs-close-btn{display:flex}
}