/* V2 Web Chat Design System CSS */

:root {
  --radius: 0.75rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);

  --background: oklch(1 0 0);
  --canvas: oklch(0.968 0.002 264);
  --foreground: oklch(0.15 0.01 264);

  --card: oklch(1 0 0);
  --card-foreground: oklch(0.129 0.042 264.695);
  
  --primary: #e7000b;
  --primary-foreground: #ffffff;

  --secondary: oklch(0.968 0.007 247.896);
  --secondary-foreground: oklch(0.208 0.042 265.755);

  --muted: oklch(0.968 0.007 247.896);
  --muted-foreground: #272727;

  --accent: oklch(0.968 0.007 247.896);
  --accent-foreground: oklch(0.208 0.042 265.755);

  --success: oklch(0.68 0.16 155);
  --success-foreground: oklch(0.99 0 0);

  --info: oklch(0.6 0.16 255);
  --info-foreground: oklch(0.99 0 0);

  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.984 0.003 247.858);

  --border: oklch(0.929 0.013 255.508);
  --input: oklch(0.929 0.013 255.508);
  --ring: oklch(0.704 0.04 256.788);

  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);

  --shadow-card: 0 1px 2px 0 oklch(0.2 0.02 264 / 0.06), 0 1px 3px 0 oklch(0.2 0.02 264 / 0.04);
}

body, .font-sans, input, button, textarea {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  background-color: var(--canvas);
  color: var(--foreground);
  margin: 0;
  padding: 0;
}

/* Custom Icon Sizes */
.size-4 {
  width: 1.2rem !important;
  height: 1.2rem !important;
}

/* Sidebar specific icon sizing (1.3rem) */
#app-sidebar [data-lucide],
#app-sidebar svg {
  width: 1.3rem !important;
  height: 1.3rem !important;
}

/* Custom Semantic Utility Color Classes */
.bg-canvas { background-color: var(--canvas); }
.bg-background { background-color: var(--background); }
.bg-foreground { background-color: var(--foreground); }
.bg-primary { background-color: var(--primary, #e7000b) !important; color: var(--primary-foreground, #ffffff) !important; }
.bg-secondary { background-color: var(--secondary); color: var(--secondary-foreground); }
.bg-accent { background-color: var(--accent); }
.bg-info { background-color: var(--info); color: var(--info-foreground); }
.bg-success { background-color: var(--success); color: var(--success-foreground); }
.bg-chart-1 { background-color: var(--chart-1); }
.bg-chart-2 { background-color: var(--chart-2); }
.bg-chart-3 { background-color: var(--chart-3); }
.bg-chart-4 { background-color: var(--chart-4); }

.text-foreground { color: var(--foreground); }
.text-muted-foreground { color: #272727 !important; }
.text-info-foreground { color: var(--info-foreground); }
.text-primary-foreground { color: var(--primary-foreground); }
.text-primary { color: var(--primary, #e7000b) !important; }
.text-success { color: var(--success); }
.text-info { color: var(--info); }

.text-xs { font-size: 0.85rem !important; }
.text-sm { font-size: 0.86rem !important; }
.text-sm-tag { font-size: 0.8rem !important; }

.border-border { border-color: var(--border); }
.shadow-card { box-shadow: var(--shadow-card); }

/* Status Badges */
.bg-success-dot { background-color: var(--success); }
.bg-info-dot { background-color: var(--info); }
.bg-muted-dot { background-color: var(--muted-foreground); }

/* Status Pill Soft Colors & Borders */
.status-pill-Active,
.status-pill-Ativo {
  background-color: oklch(0.68 0.16 155 / 0.08) !important;
  border-color: oklch(0.68 0.16 155 / 0.28) !important;
  color: oklch(0.45 0.18 155) !important;
}

.status-pill-Synced,
.status-pill-Sincronizado {
  background-color: oklch(0.6 0.16 255 / 0.08) !important;
  border-color: oklch(0.6 0.16 255 / 0.28) !important;
  color: oklch(0.45 0.18 255) !important;
}

.status-pill-Paused,
.status-pill-Pausado,
.status-pill-Inativo {
  background-color: oklch(0.5 0.01 264 / 0.07) !important;
  border-color: oklch(0.5 0.01 264 / 0.2) !important;
  color: #4b5563 !important;
}

/* Modal overlay fade in / fade out & card zoom in / zoom out */
@keyframes backdropFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes backdropFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.4);
  animation: backdropFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-backdrop.modal-closing {
  animation: backdropFadeOut 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none;
}

@keyframes modalZoomIn {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes modalZoomOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.92);
  }
}

.modal-content-card {
  animation: modalZoomIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-closing .modal-content-card {
  animation: modalZoomOut 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Cor de background das mensagens do suporte em /chat */
.chat-msg-support {
  background-color: #e33838 !important;
}