* {
      margin: 0;
      padding: 0;
      box-sizing: border-box
  }

  body {
      font-family: 'Inter', sans-serif;
      overflow-x: hidden
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
      font-family: 'Outfit', sans-serif
  }

  ::-webkit-scrollbar {
      width: 5px;
      height: 5px
  }

  ::-webkit-scrollbar-track {
      background: transparent
  }

  ::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #0ea5e9, #6366f1);
      border-radius: 10px
  }

  .glass {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.3)
  }

  .dark .glass {
      background: rgba(15, 23, 42, 0.9);
      border: 1px solid rgba(255, 255, 255, 0.1)
  }

  .glass-sidebar {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(30px);
      border-right: 1px solid rgba(0, 0, 0, 0.06)
  }

  .dark .glass-sidebar {
      background: rgba(15, 23, 42, 0.97);
      border-right: 1px solid rgba(255, 255, 255, 0.08)
  }

  .glass-card {
      background: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(15px);
      border: 1px solid rgba(0, 0, 0, 0.04)
  }

  .dark .glass-card {
      background: rgba(30, 41, 59, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.08)
  }

  .gradient-text {
      background: linear-gradient(135deg, #0ea5e9, #6366f1, #8b5cf6);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text
  }

  .card-lift {
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)
  }

  .card-lift:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 35px -10px rgba(0, 0, 0, 0.1)
  }

  .dark .card-lift:hover {
      box-shadow: 0 16px 35px -10px rgba(0, 0, 0, 0.35)
  }

  .btn-ripple {
      position: relative;
      overflow: hidden
  }

  .btn-ripple::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      pointer-events: none;
      background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
      background-repeat: no-repeat;
      background-position: 50%;
      transform: scale(10);
      opacity: 0;
      transition: transform .5s, opacity 1s
  }

  .btn-ripple:active::after {
      transform: scale(0);
      opacity: .3;
      transition: 0s
  }

  .sidebar-link {
      position: relative;
      display: flex;
      align-items: center;
      padding: 10px 16px;
      border-radius: 12px;
      color: #64748b;
      font-size: 14px;
      font-weight: 500;
      transition: all 0.3s;
      gap: 12px;
      text-decoration: none;
      white-space: nowrap
  }

  .sidebar-link:hover {
      background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(99, 102, 241, 0.1));
      color: #0ea5e9;
      transform: translateX(4px)
  }

  .sidebar-link.active {
      background: linear-gradient(135deg, #0ea5e9, #6366f1);
      color: white;
      box-shadow: 0 8px 25px -5px rgba(14, 165, 233, 0.4)
  }

  .sidebar-link.active i {
      color: white
  }

  .sidebar-link i {
      width: 20px;
      text-align: center;
      font-size: 15px;
      flex-shrink: 0
  }

  .dark .sidebar-link {
      color: #94a3b8
  }

  .dark .sidebar-link:hover {
      color: #38bdf8;
      background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(99, 102, 241, 0.15))
  }

  .dark .sidebar-link.active {
      background: linear-gradient(135deg, #0ea5e9, #6366f1);
      color: white
  }

  .sidebar-tooltip {
      position: absolute;
      left: calc(100% + 12px);
      top: 50%;
      transform: translateY(-50%);
      padding: 5px 12px;
      background: #0f172a;
      color: white;
      font-size: 12px;
      font-weight: 500;
      border-radius: 8px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: all 0.3s;
      z-index: 999
  }

  .sidebar-link:hover .sidebar-tooltip {
      opacity: 1
  }

  .sidebar-tooltip::before {
      content: '';
      position: absolute;
      right: 100%;
      top: 50%;
      transform: translateY(-50%);
      border: 5px solid transparent;
      border-right-color: #0f172a
  }

  @keyframes fadeInUp {
      from {
          opacity: 0;
          transform: translateY(30px)
      }

      to {
          opacity: 1;
          transform: translateY(0)
      }
  }

  @keyframes fadeInLeft {
      from {
          opacity: 0;
          transform: translateX(-30px)
      }

      to {
          opacity: 1;
          transform: translateX(0)
      }
  }

  @keyframes fadeInRight {
      from {
          opacity: 0;
          transform: translateX(30px)
      }

      to {
          opacity: 1;
          transform: translateX(0)
      }
  }

  @keyframes scaleIn {
      from {
          opacity: 0;
          transform: scale(0.9)
      }

      to {
          opacity: 1;
          transform: scale(1)
      }
  }

  @keyframes dot-pulse {

      0%,
      100% {
          transform: scale(1);
          opacity: 1
      }

      50% {
          transform: scale(1.5);
          opacity: 0.5
      }
  }

  @keyframes music-bounce {

      0%,
      100% {
          transform: scaleY(1)
      }

      50% {
          transform: scaleY(0.3)
      }
  }

  @keyframes float {

      0%,
      100% {
          transform: translateY(0)
      }

      50% {
          transform: translateY(-8px)
      }
  }

  @keyframes typing {

      0%,
      60%,
      100% {
          transform: translateY(0);
          opacity: 0.5
      }

      30% {
          transform: translateY(-6px);
          opacity: 1
      }
  }

  @keyframes messageIn {
      from {
          opacity: 0;
          transform: translateY(10px) scale(0.95)
      }

      to {
          opacity: 1;
          transform: translateY(0) scale(1)
      }
  }

  @keyframes ring-pulse {
      0% {
          box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6)
      }

      70% {
          box-shadow: 0 0 0 12px rgba(16, 185, 129, 0)
      }

      100% {
          box-shadow: 0 0 0 0 rgba(16, 185, 129, 0)
      }
  }

  .animate-fade-in-up {
      animation: fadeInUp 0.6s ease forwards
  }

  .animate-fade-in-left {
      animation: fadeInLeft 0.6s ease forwards
  }

  .animate-fade-in-right {
      animation: fadeInRight 0.6s ease forwards
  }

  .animate-scale-in {
      animation: scaleIn 0.4s ease forwards
  }

  .animate-float {
      animation: float 3s ease-in-out infinite
  }

  .animate-message {
      animation: messageIn 0.3s ease forwards
  }

  .delay-100 {
      animation-delay: .1s
  }

  .delay-200 {
      animation-delay: .2s
  }

  .delay-300 {
      animation-delay: .3s
  }

  .delay-400 {
      animation-delay: .4s
  }

  .delay-500 {
      animation-delay: .5s
  }

  .delay-600 {
      animation-delay: .6s
  }

  .badge {
      display: inline-flex;
      align-items: center;
      padding: 3px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 600;
      gap: 4px
  }

  .badge-success {
      background: rgba(16, 185, 129, 0.1);
      color: #059669
  }

  .dark .badge-success {
      background: rgba(16, 185, 129, 0.2);
      color: #34d399
  }

  .badge-warning {
      background: rgba(245, 158, 11, 0.1);
      color: #d97706
  }

  .dark .badge-warning {
      background: rgba(245, 158, 11, 0.2);
      color: #fbbf24
  }

  .badge-danger {
      background: rgba(244, 63, 94, 0.1);
      color: #e11d48
  }

  .dark .badge-danger {
      background: rgba(244, 63, 94, 0.2);
      color: #fb7185
  }

  .badge-info {
      background: rgba(14, 165, 233, 0.1);
      color: #0284c7
  }

  .dark .badge-info {
      background: rgba(14, 165, 233, 0.2);
      color: #38bdf8
  }

  .badge-purple {
      background: rgba(139, 92, 246, 0.1);
      color: #7c3aed
  }

  .dark .badge-purple {
      background: rgba(139, 92, 246, 0.2);
      color: #a78bfa
  }

  .notification-dot {
      position: absolute;
      top: -2px;
      right: -2px;
      width: 8px;
      height: 8px;
      background: #ef4444;
      border-radius: 50%;
      border: 2px solid white;
      animation: dot-pulse 2s infinite
  }

  .dark .notification-dot {
      border-color: #0f172a
  }

  .music-wave {
      display: flex;
      align-items: flex-end;
      gap: 2px;
      height: 16px
  }

  .music-bar {
      width: 3px;
      background: linear-gradient(to top, #0ea5e9, #6366f1);
      border-radius: 2px;
      animation: music-bounce 0.8s ease infinite
  }

  .music-bar:nth-child(1) {
      height: 40%
  }

  .music-bar:nth-child(2) {
      height: 70%;
      animation-delay: .1s
  }

  .music-bar:nth-child(3) {
      height: 50%;
      animation-delay: .2s
  }

  .music-bar:nth-child(4) {
      height: 90%;
      animation-delay: .3s
  }

  .music-bar:nth-child(5) {
      height: 60%;
      animation-delay: .4s
  }

  .toast {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 9999;
      padding: 14px 22px;
      border-radius: 12px;
      color: white;
      font-weight: 500;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2)
  }

  .grid {
      min-width: 0
  }

  .grid>* {
      min-width: 0
  }

  main {
      overflow-x: hidden
  }

  .chart-container {
      position: relative;
      width: 100%;
      overflow: hidden
  }

  [id$="Chart"] {
      max-width: 100%;
      overflow: hidden
  }

  .apexcharts-canvas {
      max-width: 100% !important
  }

  .apexcharts-svg {
      overflow: hidden !important
  }

  /* ===== SUPPORT STYLES ===== */
  .support-hero {
      background: linear-gradient(135deg, #0c4a6e 0%, #1e3a5f 30%, #312e81 70%, #1e1b4b 100%);
      position: relative;
      overflow: hidden
  }

  .support-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle at 20% 30%, rgba(14, 165, 233, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 60%, rgba(139, 92, 246, 0.15) 0%, transparent 50%)
  }

  .tab-pill {
      padding: 10px 20px;
      border-radius: 14px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      transition: all 0.3s;
      cursor: pointer;
      border: none;
      background: transparent;
      display: flex;
      align-items: center;
      gap: 8px
  }

  .dark .tab-pill {
      color: #94a3b8
  }

  .tab-pill.active {
      background: linear-gradient(135deg, #0ea5e9, #6366f1);
      color: white;
      box-shadow: 0 6px 15px -4px rgba(14, 165, 233, 0.4)
  }

  .tab-pill:hover:not(.active) {
      background: rgba(14, 165, 233, 0.05);
      color: #0ea5e9
  }

  .chat-message-user {
      background: linear-gradient(135deg, #0ea5e9, #6366f1);
      color: white;
      border-radius: 18px 18px 4px 18px;
      padding: 10px 14px;
      max-width: 75%;
      box-shadow: 0 4px 15px -3px rgba(14, 165, 233, 0.25)
  }

  .chat-message-agent {
      background: #f1f5f9;
      color: #0f172a;
      border-radius: 18px 18px 18px 4px;
      padding: 10px 14px;
      max-width: 75%
  }

  .dark .chat-message-agent {
      background: #334155;
      color: #e2e8f0
  }

  .typing-dots {
      display: inline-flex;
      gap: 3px;
      padding: 12px 16px;
      background: #f1f5f9;
      border-radius: 18px 18px 18px 4px
  }

  .dark .typing-dots {
      background: #334155
  }

  .typing-dots span {
      width: 6px;
      height: 6px;
      background: #94a3b8;
      border-radius: 50%;
      animation: typing 1.4s infinite
  }

  .typing-dots span:nth-child(2) {
      animation-delay: 0.2s
  }

  .typing-dots span:nth-child(3) {
      animation-delay: 0.4s
  }

  .conversation-item {
      padding: 12px;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      gap: 12px;
      border: 2px solid transparent
  }

  .conversation-item:hover {
      background: rgba(14, 165, 233, 0.05)
  }

  .conversation-item.active {
      background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(99, 102, 241, 0.1));
      border-color: rgba(14, 165, 233, 0.3)
  }

  .online-badge {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: #10b981;
      border: 2px solid white;
      animation: ring-pulse 2s infinite
  }

  .dark .online-badge {
      border-color: #1e293b
  }

  .away-badge {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: #f59e0b;
      border: 2px solid white
  }

  .dark .away-badge {
      border-color: #1e293b
  }

  .offline-badge {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: #94a3b8;
      border: 2px solid white
  }

  .dark .offline-badge {
      border-color: #1e293b
  }

  .faq-item {
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      overflow: hidden;
      transition: all 0.3s
  }

  .dark .faq-item {
      border-color: #334155
  }

  .faq-item.open {
      border-color: #0ea5e9;
      background: rgba(14, 165, 233, 0.03)
  }

  .quick-action {
      padding: 16px;
      border-radius: 14px;
      transition: all 0.3s;
      cursor: pointer;
      border: 2px solid transparent;
      text-align: center
  }

  .quick-action:hover {
      transform: translateY(-4px);
      border-color: #0ea5e9
  }

  .ticket-priority-high {
      border-left: 4px solid #ef4444
  }

  .ticket-priority-medium {
      border-left: 4px solid #f59e0b
  }

  .ticket-priority-low {
      border-left: 4px solid #10b981
  }

  @media(max-width:1024px) {
      .sidebar-desktop {
          display: none
      }
  }

  @media(min-width:1025px) {
      .mobile-sidebar-btn {
          display: none
      }
  }