/* =========================================================================
   LucyChat - Theme & Base Styles (theme.css)
   ========================================================================= */

/* Default Light Mode (Authentic WhatsApp Web) */
:root,
[data-theme="light"] {
  --bg-primary: #efeae2;
  --bg-secondary: #f0f2f5;
  --bg-sidebar: #ffffff;
  --bg-card: #f0f2f5;
  --bg-hover: rgba(0, 0, 0, 0.05);
  --text-main: #111b21;
  --text-muted: #667781;
  --accent: #00a884;
  --accent-hover: #008f6f;
  --accent-soft: rgba(0, 168, 132, 0.12);
  --online-green: #25d366;
  --offline-red: #ea4335;
  --border: #e9edef;
  --code-bg: #e2dfd7;

  /* WhatsApp-Style Chat-Blasen (Light Mode) */
  --bubble-out-bg: #d9fdd3;
  --bubble-out-text: #111b21;
  --bubble-in-bg: #ffffff;
  --bubble-in-text: #111b21;
  --chat-pattern-opacity: 0.08;
}

/* Dark Mode (Authentic WhatsApp Web Dark) */
[data-theme="dark"] {
  --bg-primary: #0b141a;
  --bg-secondary: #202c33;
  --bg-sidebar: #111b21;
  --bg-card: #202c33;
  --bg-hover: rgba(255, 255, 255, 0.06);
  --text-main: #e9edef;
  --text-muted: #8696a0;
  --accent: #00a884;
  --accent-hover: #02906f;
  --accent-soft: rgba(0, 168, 132, 0.16);
  --online-green: #25d366;
  --offline-red: #ef4444;
  --border: #222d34;
  --code-bg: #090d15;

  /* WhatsApp-Style Chat-Blasen (Dark Mode) */
  --bubble-out-bg: #005c4b;
  --bubble-out-text: #e9edef;
  --bubble-in-bg: #202c33;
  --bubble-in-text: #e9edef;
  --chat-pattern-opacity: 0.04;
}

html {
  font-size: 15px;
  height: 100vh;
  height: 100dvh;
  min-height: -webkit-fill-available;
  overflow: hidden;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji";
  letter-spacing: normal;
  word-spacing: normal;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-main);
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  overflow: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.2s ease, color 0.2s ease;
}

#appContainer {
  display: none;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
}

/* Große Standalone Emojis */
.msg-large-emoji {
  font-size: 2.2rem !important;
  line-height: 1.25 !important;
  display: inline-block;
  padding: 4px 2px;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

/* Autofill-Harmonisierung */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: var(--text-main) !important;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: var(--text-main);
}

[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] input:-webkit-autofill:active,
[data-theme="dark"] textarea:-webkit-autofill,
[data-theme="dark"] select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-card) inset !important;
  -webkit-text-fill-color: var(--text-main) !important;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: var(--text-main);
}

/* Barrierefreiheit: Tastatur-Fokus */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
}