/* Grundläggande reset för touch */
* {
    -webkit-tap-highlight-color: transparent;
}

body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Scrollbar anpassning */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: var(--border);
    border-radius: 10px;
}

/* ----------------------------------
   TEMAN
----------------------------------- */

.theme-light {
    --bg: #ffffff;
    --surface: #f3f4f6;
    --surface-hover: #e5e7eb;
    --text: #111827;
    --text-muted: #6b7280;
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-text: #ffffff;
    --border: #d1d5db;
    --message-ai: #f9fafb;
    --message-user: #eff6ff;
}

.theme-dark {
    --bg: #111827;
    --surface: #1f2937;
    --surface-hover: #374151;
    --text: #f9fafb;
    --text-muted: #9ca3af;
    --primary: #3b82f6;
    --primary-hover: #60a5fa;
    --primary-text: #ffffff;
    --border: #374151;
    --message-ai: #1f2937;
    --message-user: #1e3a8a;
}

.theme-synthwave {
    --bg: #2b213a;
    --surface: #1e162b;
    --surface-hover: #3b2d50;
    --text: #f9a8d4;
    --text-muted: #c084fc;
    --primary: #ec4899;
    --primary-hover: #f472b6;
    --primary-text: #ffffff;
    --border: #6b21a8;
    --message-ai: #1e162b;
    --message-user: #831843;
}

.theme-matrix {
    --bg: #000000;
    --surface: #0a0a0a;
    --surface-hover: #141414;
    --text: #00ff41;
    --text-muted: #008f11;
    --primary: #008f11;
    --primary-hover: #00ff41;
    --primary-text: #000000;
    --border: #003b00;
    --message-ai: #0a0a0a;
    --message-user: #002200;
}

.theme-dracula {
    --bg: #282a36;
    --surface: #44475a;
    --surface-hover: #6272a4;
    --text: #f8f8f2;
    --text-muted: #6272a4;
    --primary: #bd93f9;
    --primary-hover: #ff79c6;
    --primary-text: #282a36;
    --border: #6272a4;
    --message-ai: #44475a;
    --message-user: #2b1d42;
}

/* Utilities som mappar mot variablerna */
.bg-custom { background-color: var(--bg); }
.bg-surface { background-color: var(--surface); }
.hover\:bg-surface-hover:hover { background-color: var(--surface-hover); }
.text-custom { color: var(--text); }
.text-muted { color: var(--text-muted); }
.bg-primary { background-color: var(--primary); }
.hover\:bg-primary-hover:hover { background-color: var(--primary-hover); }
.text-primary { color: var(--primary-text); }
.border-custom { border-color: var(--border); }
.msg-ai { background-color: var(--message-ai); border: 1px solid var(--border); }
.msg-user { background-color: var(--message-user); border: 1px solid var(--border); }