:root {
  --bg-main: #060b13;
  --bg-sidebar: #090f1a;
  --bg-panel: #0d1524;
  --bg-card: #121c2e;
  --bg-card-hover: #17243b;
  --bg-card-active: #152745;
  --border-color: #1a273d;
  --text-main: #e2e8f0;
  --text-muted: #8492a6;
  --primary-blue: #0084ff;
  --primary-blue-hover: #0073e6;
  --bubble-in: #141f30;
  --bubble-out: #0084ff;
  --tag-orange-bg: rgba(249, 115, 22, 0.15);
  --tag-orange-text: #fb923c;
  --tag-purple-bg: rgba(168, 85, 247, 0.15);
  --tag-purple-text: #c084fc;
  --tag-green-bg: rgba(34, 197, 94, 0.15);
  --tag-green-text: #4ade80;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: #1e293b transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg-main);
  color: var(--text-main);
  overflow: hidden;
  height: 100vh;
}

/* Base custom styles */
.custom-scroll {
  overflow-y: auto;
}

.truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Animation for incoming message */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-message {
  animation: slideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Chat bubble styling */
.bubble-client {
  background-color: var(--bubble-in);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px 12px 12px 2px;
}

.bubble-operator {
  background-color: var(--bubble-out);
  border-radius: 12px 12px 2px 12px;
}

/* Active chat card indicator */
.chat-card.active {
  background-color: var(--bg-card-active);
  border-left: 3px solid var(--primary-blue);
}