/* Custom Premium Theme for Chatwoot - Inspired by Aura CRM & Modern UI */

:root {
  /* --- Palette Definitions --- */
  --brand-primary: #efff16;
  /* Indigo 500 */
  --brand-primary-hover: #dfc05d;
  /* Indigo 600 */

  /* Light Mode Variables */
  --app-bg: #f3f4f6;
  /* Cool Gray 100 */
  --surface-bg: #ffffff;
  --surface-bg-secondary: #f9fafb;
  --text-main: #000000;
  --text-muted: #000000;
  --border-color: #e5e7eb;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --radius-lg: 16px;
  --radius-md: 12px;
}

/* Dark Mode Variables - Scoped to the dark class added by Chatwoot */
.dark {
  --app-bg: #000000;
  /* Pure Black */
  --surface-bg: #000000;
  /* Slate 800 */
  --surface-bg-secondary: #000000;
  /* Slate 700 */
  --text-main: #f8fafc;
  /* Slate 50 */
  --text-muted: #000000;
  /* Slate 400 */
  --border-color: #2b2c2e;
  /* Slate 700 */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4);
}

/* --- Global Resets & Typography --- */
body {
  background-color: var(--app-bg) !important;
  color: var(--text-main) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* --- Layout Structure --- */

/* Sidebar (Aside) */
aside.bg-n-solid-2,
.sidebar {
  background-color: var(--surface-bg) !important;
  border-right: 1px solid var(--border-color) !important;
}

/* Main Content Area */
#app,
.app-wrapper {
  background-color: var(--app-bg) !important;
}

/* --- Component Styling (Card-like look) --- */

/* Conversation List & Chat Area Panels */
/* We target the main columns to give them a 'floating card' look if possible, 
   or at least clean up their backgrounds */

.bg-white,
.bg-n-solid-1,
.bg-slate-50,
.dark\:bg-slate-900 {
  background-color: var(--surface-bg) !important;
  border-color: var(--border-color) !important;
}

/* Specific fix for the conversation list to look like a panel */
section[class*="conversation-list"],
.conversations-list {
  background-color: var(--surface-bg) !important;
  border-right: 1px solid var(--border-color) !important;
}

/* The Chat Area */
.conversation-panel,
section[class*="conversation-panel"] {
  background-color: var(--surface-bg) !important;
}

/* Floating effect for inner containers if they exist */
.card,
.panel {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--border-color) !important;
}

/* --- Inputs & Form Elements --- */
input,
textarea,
select,
.search-input {
  background-color: var(--surface-bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
  border-radius: 8px !important;
}

input:focus,
textarea:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
  outline: none !important;
}

/* --- Buttons --- */
.button.primary,
button[class*="bg-woot-500"] {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-hover)) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3) !important;
  transition: transform 0.1s ease, box-shadow 0.2s ease !important;
}

.button.primary:hover,
button[class*="bg-woot-500"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(99, 102, 241, 0.4) !important;
}

/* --- Text Colors --- */
h1,
h2,
h3,
h4,
h5,
h6,
.text-slate-900,
.dark\:text-slate-50 {
  color: var(--text-main) !important;
}

p,
span,
.text-slate-600,
.text-slate-500,
.dark\:text-slate-400 {
  color: var(--text-muted) !important;
}


.dark p,
.dark span,
.dark .text-slate-600,
.dark .text-slate-500 {
  color: #fff !important;
}

/* --- Scrollbars --- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* --- Specific Chatwoot Overrides for "Clean" Look --- */

/* Remove harsh borders between chat bubbles if any */
.message-container {
  border: none !important;
}

/* Chat Bubbles */
.message-bubble.is-me {
  background-color: var(--brand-primary) !important;
  color: white !important;
  border-radius: 12px 12px 0 12px !important;
}

.message-bubble.is-other {
  background-color: var(--surface-bg-secondary) !important;
  color: var(--text-main) !important;
  border-radius: 12px 12px 12px 0 !important;
}

/* Sidebar Active Item */
.sidebar-item.active,
a.router-link-active {
  background-color: var(--brand-primary) !important;
  color: #000 !important;
  border-right: 3px solid var(--brand-primary) !important;
}

.sidebar-item.active span,
a.router-link-active span {
  color: #000 !important;
}

/* Hide Chatwoot Branding */
.woot-logo,
a[href*="chatwoot.com"] {
  display: none !important;
}

/* --- Login Page Enhancements --- */

/* Wiggle animation for login errors */
@keyframes wiggle {

  0%,
  100% {
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
}

.animate-wiggle {
  animation: wiggle 0.5s ease-in-out;
}

/* Glassmorphism effect for login card */
.backdrop-blur-xl {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Smooth transitions for all interactive elements */
a,
button,
input,
select,
textarea {
  transition: all 0.2s ease-in-out;
}

/* Enhanced focus states */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #06b6d4;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Login background gradient animation */
@keyframes gradient-shift {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

/* Subtle hover effect on login form */
.bg-white\/80:hover,
.dark\:bg-slate-800\/80:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
  transition: box-shadow 0.3s ease-in-out;
}

/* Theme Switcher Button Styles */
.theme-switcher {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 50;
}