:root {
  /* Light theme colors */
  --bs-body-bg: #ffffff;
  --bs-body-color: #212529;
  --bs-card-bg: #ffffff;
  --bs-card-border-color: rgba(0, 0, 0, 0.125);
  --bs-navbar-bg: #f8f9fa;
  --bs-sidebar-bg: #343a40;
  --bs-sidebar-color: #ffffff;

  /* Custom colors */
  --ticket-header-bg: #f8f9fa;
  --ticket-border-color: #dee2e6;
  --chat-client-bg: #e3f2fd;
  --chat-admin-bg: #f5f5f5;
  --shadow-color: rgba(0, 0, 0, 0.1);

  /* Status colors */
  --status-ouvert: #0d6efd;
  --status-vu: #17a2b8;
  --status-encours: #ffc107;
  --status-resolu: #198754;
  --status-annule: #6c757d;
}

[data-bs-theme="dark"] {
  /* Dark theme colors */
  --bs-body-bg: #212529;
  --bs-body-color: #dee2e6;
  --bs-card-bg: #2d3238;
  --bs-card-border-color: rgba(255, 255, 255, 0.125);
  --bs-navbar-bg: #343a40;
  --bs-sidebar-bg: #1a1d20;
  --bs-sidebar-color: #dee2e6;

  /* Custom colors */
  --ticket-header-bg: #343a40;
  --ticket-border-color: #495057;
  --chat-client-bg: #1a3a52;
  --chat-admin-bg: #2d3238;
  --shadow-color: rgba(0, 0, 0, 0.3);
}

/* Smooth transitions */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Custom Bootstrap overrides */
.card {
  background-color: var(--bs-card-bg);
  border-color: var(--bs-card-border-color);
  box-shadow: 0 2px 4px var(--shadow-color);
}

.navbar {
  background-color: var(--bs-navbar-bg) !important;
  box-shadow: 0 2px 4px var(--shadow-color);
}

.sidebar {
  background-color: var(--bs-sidebar-bg);
  color: var(--bs-sidebar-color);
  min-height: 100vh;
}

/* Status badges */
.badge-ouvert {
  background-color: var(--status-ouvert);
  color: white;
}

.badge-vu {
  background-color: var(--status-vu);
  color: white;
}

.badge-encours {
  background-color: var(--status-encours);
  color: #000;
}

.badge-resolu {
  background-color: var(--status-resolu);
  color: white;
}

.badge-annule {
  background-color: var(--status-annule);
  color: white;
}

/* Chat messages - Page Client (vue publique) */
.chat-message {
  margin-bottom: 1rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  max-width: 80%;
}

/* Sur la page client: messages client à droite, admin à gauche */
.chat-message.client {
  background-color: var(--chat-client-bg);
  margin-left: auto;
  margin-right: 0;
}

.chat-message.admin {
  background-color: var(--chat-admin-bg);
  margin-right: auto;
  margin-left: 0;
}

/* Chat messages - Page Admin */
.message-bubble {
  margin-bottom: 1rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  max-width: 80%;
}

/* Sur la page admin: messages admin à droite, client à gauche */
.admin-message {
  background-color: var(--chat-admin-bg);
  margin-left: auto;
  margin-right: 0;
}

.client-message {
  background-color: var(--chat-client-bg);
  margin-right: auto;
  margin-left: 0;
}

.chat-message-header {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.chat-message-time {
  font-size: 0.75rem;
  opacity: 0.7;
}

/* Theme toggle button */
.theme-toggle {
  position: relative;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0.5rem;
  border-radius: 0.25rem;
}

.theme-toggle:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

[data-bs-theme="dark"] .theme-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Ticket page specific */
.ticket-header {
  background-color: var(--ticket-header-bg);
  border-bottom: 1px solid var(--ticket-border-color);
  padding: 1.5rem;
}

.ticket-info {
  border: 1px solid var(--ticket-border-color);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

/* Messages container */
#messages-container {
  padding-right: 1rem;
}

/* Message status ticks (WhatsApp-style) */
.message-ticks {
  display: inline-flex;
  align-items: center;
  font-size: 1rem;
  margin-left: 6px;
  vertical-align: middle;
}

.message-ticks i {
  line-height: 1;
  font-size: 1.1rem;
}

/* Single tick - sent */
.tick-sent {
  color: #999;
}

/* Double tick - delivered */
.tick-delivered {
  color: #999;
}

/* Double tick blue/green - read */
.tick-read {
  color: #34b7f1;
}

[data-bs-theme="dark"] .tick-read {
  color: #53bdeb;
}

/* Typing indicator */
.typing-indicator {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background-color: var(--chat-admin-bg);
  border-radius: 0.5rem;
  max-width: 80px;
  margin-bottom: 1rem;
}

.typing-indicator .dot {
  width: 8px;
  height: 8px;
  margin: 0 2px;
  background-color: #999;
  border-radius: 50%;
  animation: typing 1.4s infinite;
}

.typing-indicator .dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator .dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.7;
  }
  30% {
    transform: translateY(-10px);
    opacity: 1;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .chat-message.client,
  .chat-message.admin,
  .admin-message,
  .client-message {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }
}