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

  html,
  body {
      max-width: 100%;
      overflow-x: hidden
  }

  body {
      font-family: 'Inter', sans-serif
  }

  .font-jakarta {
      font-family: 'Plus Jakarta Sans', sans-serif
  }

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

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

  ::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 3px
  }

  .dark ::-webkit-scrollbar-thumb {
      background: #475569
  }

  svg[class*="lucide"],
  .icon {
      pointer-events: none
  }

  .sidebar-link {
      transition: all .2s;
      position: relative
  }

  .sidebar-link:hover {
      background: rgba(99, 102, 241, .08)
  }

  .sidebar-link.active {
      background: linear-gradient(135deg, rgba(99, 102, 241, .12), rgba(99, 102, 241, .06));
      color: #6366f1;
      font-weight: 600
  }

  .sidebar-link.active::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 60%;
      background: linear-gradient(180deg, #6366f1, #818cf8);
      border-radius: 0 4px 4px 0
  }

  .dark .sidebar-link:hover {
      background: rgba(99, 102, 241, .15)
  }

  .dark .sidebar-link.active {
      background: linear-gradient(135deg, rgba(99, 102, 241, .2), rgba(99, 102, 241, .1))
  }

  .glass {
      background: rgba(255, 255, 255, .75);
      backdrop-filter: blur(20px)
  }

  .dark .glass {
      background: rgba(15, 23, 42, .75)
  }

  .gradient-primary {
      background: linear-gradient(135deg, #6366f1, #818cf8)
  }

  .gradient-accent {
      background: linear-gradient(135deg, #14b8a6, #2dd4bf)
  }

  .gradient-success {
      background: linear-gradient(135deg, #22c55e, #4ade80)
  }

  .gradient-danger {
      background: linear-gradient(135deg, #ef4444, #f87171)
  }

  .avatar-ring {
      box-shadow: 0 0 0 2px rgba(99, 102, 241, .35)
  }

  .pulse-dot {
      animation: pd 2s infinite
  }

  @keyframes pd {

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

      50% {
          opacity: .4;
          transform: scale(1.4)
      }
  }

  .slide-up {
      animation: su .5s ease forwards;
      opacity: 0;
      transform: translateY(16px)
  }

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

  .badge-pulse {
      animation: bp 2s infinite
  }

  @keyframes bp {

      0%,
      100% {
          box-shadow: 0 0 0 0 rgba(239, 68, 68, .45)
      }

      70% {
          box-shadow: 0 0 0 6px rgba(239, 68, 68, 0)
      }
  }

  .toast-container {
      position: fixed;
      top: 14px;
      right: 14px;
      left: 14px;
      z-index: 10000;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
      pointer-events: none
  }

  @media(min-width:640px) {
      .toast-container {
          left: auto;
          right: 20px;
          top: 20px
      }
  }

  .toast {
      pointer-events: auto;
      animation: ti .35s ease;
      max-width: 360px;
      width: 100%
  }

  @keyframes ti {
      from {
          opacity: 0;
          transform: translateX(40px)
      }

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

  .toast.hide {
      animation: toh .35s ease forwards
  }

  @keyframes toh {
      to {
          opacity: 0;
          transform: translateX(40px)
      }
  }

  .dd-enter {
      animation: de .18s ease
  }

  @keyframes de {
      from {
          opacity: 0;
          transform: translateY(-8px) scale(.97)
      }

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

  .modal-content {
      animation: mc .25s ease
  }

  @keyframes mc {
      from {
          opacity: 0;
          transform: scale(.96) translateY(8px)
      }

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

  .conv-item {
      transition: all .15s
  }

  .conv-item:hover {
      background: rgba(99, 102, 241, .05)
  }

  .dark .conv-item:hover {
      background: rgba(99, 102, 241, .1)
  }

  .conv-item.active-conv {
      background: rgba(99, 102, 241, .08);
      border-right: 3px solid #6366f1
  }

  .dark .conv-item.active-conv {
      background: rgba(99, 102, 241, .15)
  }

  .msg-bubble {
      max-width: 75%;
      animation: msgIn .25s ease
  }

  @keyframes msgIn {
      from {
          opacity: 0;
          transform: translateY(8px)
      }

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

  .typing-dots span {
      animation: typDot 1.4s infinite;
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #94a3b8;
      margin: 0 1px
  }

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

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

  @keyframes typDot {

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

      30% {
          transform: translateY(-4px)
      }
  }

  .tab-btn {
      transition: all .2s
  }

  .tab-btn.active {
      background: linear-gradient(135deg, #6366f1, #818cf8);
      color: #fff;
      box-shadow: 0 6px 16px -6px rgba(99, 102, 241, .55)
  }