/* WhatsApp Design Tokens & Global CSS Variables */
:root {
  /* WhatsApp Primary Colors */
  --wa-teal: #008069;
  --wa-teal-dark: #075e54;
  --wa-teal-light: #128c7e;
  --wa-green: #25d366;
  --wa-green-accent: #00a884;
  --wa-green-badge: #25d366;

  /* Chat Background & Bubbles */
  --wa-bg-app: #eae6df;
  --wa-bg-panel: #ffffff;
  --wa-bg-chat: #efeae2;
  --wa-bubble-out: #d9fdd3;
  --wa-bubble-in: #ffffff;

  /* UI Grays & Borders */
  --wa-header-bg: #f0f2f5;
  --wa-search-bg: #f0f2f5;
  --wa-input-bg: #ffffff;
  --wa-border: #e9edef;
  --wa-border-light: #f2f2f2;
  --wa-hover: #f5f6f6;
  --wa-active-chat: #ebebeb;

  /* Typography Colors */
  --wa-text-primary: #111b21;
  --wa-text-secondary: #667781;
  --wa-text-muted: #8696a0;
  --wa-link: #027eb5;

  /* Status Colors */
  --wa-tick-grey: #8696a0;
  --wa-tick-blue: #53bdeb;
  --wa-online: #25d366;
  --wa-danger: #ea0038;

  /* Shadows */
  --wa-shadow-bubble: 0 1px 0.5px rgba(11, 20, 26, 0.13);
  --wa-shadow-card: 0 2px 5px rgba(11, 20, 26, 0.1);
  --wa-shadow-popup: 0 4px 16px rgba(11, 20, 26, 0.2);

  /* Fonts */
  --wa-font: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}

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

body {
  font-family: var(--wa-font);
  color: var(--wa-text-primary);
  background-color: var(--wa-bg-app);
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  outline: none;
}

input, textarea {
  font-family: inherit;
  outline: none;
  border: none;
}

/* Custom Scrollbar to match WhatsApp Web */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

::-webkit-scrollbar-thumb {
  background: rgba(11, 20, 26, 0.2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(11, 20, 26, 0.35);
}