@import "tailwindcss";
@import "@nuxt/ui";

/* WhatsApp Nucleo - Variables de tema */
:root {
  /* WhatsApp colors */
  --wa-green-dark: #075e54;
  --wa-green-light: #25d366;
  --wa-teal: #128c7e;
  --wa-blue: #34b7f1;

  /* UI colors */
  --wa-bg: #111b21;
  --wa-bg-light: #202c33;
  --wa-bg-lighter: #2a3942;
  --wa-surface: #1f2c34;
  --wa-border: #2a3942;
  --wa-text: #e9edef;
  --wa-text-muted: #8696a0;
  --wa-text-dark: #667781;

  /* Message bubbles */
  --wa-bubble-out: #005c4b;
  --wa-bubble-in: #202c33;
}

/* Shell base */
.whatsapp-shell {
  background-color: var(--wa-bg);
  min-height: 100vh;
}

/* Override Nuxt UI dashboard colors */
.whatsapp-shell [class*="UDashboard"] {
  --ui-bg: var(--wa-bg);
}

/* Scrollbar styling */
.whatsapp-shell ::-webkit-scrollbar {
  width: 6px;
}

.whatsapp-shell ::-webkit-scrollbar-track {
  background: var(--wa-bg);
}

.whatsapp-shell ::-webkit-scrollbar-thumb {
  background: var(--wa-border);
  border-radius: 3px;
}

.whatsapp-shell ::-webkit-scrollbar-thumb:hover {
  background: var(--wa-text-muted);
}

/* Status indicators */
.status-connected {
  color: var(--wa-green-light);
}

.status-disconnected {
  color: #f15c6d;
}

.status-connecting {
  color: var(--wa-blue);
}

/* Message bubbles */
.bubble-out {
  background-color: var(--wa-bubble-out);
}

.bubble-in {
  background-color: var(--wa-bubble-in);
}

/* Instance card */
.instance-card {
  background-color: var(--wa-surface);
  border: 1px solid var(--wa-border);
  border-radius: 8px;
  transition: border-color 0.2s;
}

.instance-card:hover {
  border-color: var(--wa-green-dark);
}

/* Loading overlay */
html:not(.nuxt-ready) body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--wa-bg);
  z-index: 9999;
}