/* ══════════════════════════════════════════════════════════════════
   Shooting Surplus CRM — Minimalist Modern Theme
   Applied via volume mount to Chatwoot public directory
   ══════════════════════════════════════════════════════════════════ */

/* ── Fonts ───────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Chatwoot Color Variable Overrides ───────────────────────────── */

:root {
  --w-50: #F0F4FF !important;
  --w-100: #E6EDFF !important;
  --w-200: #B3C7FF !important;
  --w-300: #809FFF !important;
  --w-400: #4D7CFF !important;
  --w-500: #0052FF !important;
  --w-600: #003FCC !important;
  --w-700: #003399 !important;
  --w-800: #002266 !important;
  --w-900: #001133 !important;
  --color-woot: #0052FF !important;
}

/* ── Base Typography ─────────────────────────────────────────────── */

body,
.app-wrapper,
.conversation-panel,
.sidebar,
.contact-panel {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* ── Buttons ─────────────────────────────────────────────────────── */

.button.nice,
.button--primary,
.button.success,
button[data-original-title],
.btn-primary,
.action-button {
  background: linear-gradient(135deg, #0052FF, #4D7CFF) !important;
  border-radius: 12px !important;
  border: none !important;
  transition: all 0.2s ease !important;
}

.button.nice:hover,
.button--primary:hover,
.btn-primary:hover {
  box-shadow: 0 4px 14px rgba(0, 82, 255, 0.25) !important;
  transform: translateY(-1px) !important;
}

.button.nice:active,
.button--primary:active {
  transform: scale(0.98) !important;
}

/* Secondary / ghost buttons */
.button.clear,
.button--secondary,
.btn-secondary {
  border-radius: 12px !important;
  transition: all 0.2s ease !important;
}

/* ── Input Fields ────────────────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
textarea,
select {
  font-family: 'Inter', system-ui, sans-serif !important;
  border-radius: 8px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #0052FF !important;
  box-shadow: 0 0 0 3px rgba(0, 82, 255, 0.12) !important;
}

/* ── Cards & Panels ──────────────────────────────────────────────── */

.conversation--card,
.contact--card,
.canned-response--card,
.card {
  border-radius: 12px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.conversation--card:hover,
.contact--card:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07) !important;
}

/* ── Badges & Tags ───────────────────────────────────────────────── */

.label--small,
.badge,
.label,
.conversation--label {
  font-family: 'JetBrains Mono', monospace !important;
  border-radius: 9999px !important;
  letter-spacing: 0.05em !important;
  font-size: 10px !important;
}

/* ── Code & Monospace ────────────────────────────────────────────── */

code,
pre,
.code,
.message-text__wrap code {
  font-family: 'JetBrains Mono', monospace !important;
}

/* ── Chat Bubbles ────────────────────────────────────────────────── */

.agent .chat-bubble,
.agent-bubble {
  border-radius: 12px 12px 12px 4px !important;
}

.customer .chat-bubble,
.user-bubble {
  border-radius: 12px 12px 4px 12px !important;
}

/* ── Scrollbar ───────────────────────────────────────────────────── */

* {
  scrollbar-width: thin !important;
  scrollbar-color: #CBD5E1 transparent !important;
}

*::-webkit-scrollbar {
  width: 6px !important;
}

*::-webkit-scrollbar-track {
  background: transparent !important;
}

*::-webkit-scrollbar-thumb {
  background: #CBD5E1 !important;
  border-radius: 3px !important;
}

/* ── Navigation & Sidebar ────────────────────────────────────────── */

.sidebar .sidebar-menu .menu-item.active,
.secondary-menu .menu-item.active {
  border-radius: 8px !important;
}

/* ── Modal & Dialog ──────────────────────────────────────────────── */

.modal-container,
.modal-content,
.dialog-content {
  border-radius: 16px !important;
}

/* ── Dropdown ────────────────────────────────────────────────────── */

.dropdown-pane,
.dropdown-menu {
  border-radius: 12px !important;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08) !important;
}

/* ── Tooltips ────────────────────────────────────────────────────── */

.tooltip {
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
}

/* ── Email Auto-Expand ───────────────────────────────────────────── */
/* Remove the 400px height limit on email content so messages display
   fully without requiring manual expand clicks.
   Source: Email/Index.vue uses max-h-[400px] + overflow-hidden when
   isExpandable && !isExpanded */

/* Override Tailwind max-h-[400px] on email bubbles */
[data-bubble-name="email"] .max-h-\[400px\] {
  max-height: none !important;
  overflow: visible !important;
}

/* Broader fallback: any direct section child div with max-height */
[data-bubble-name="email"] > section > div {
  max-height: none !important;
  overflow: visible !important;
}

/* Hide the gradient overlay + expand button (no longer needed) */
[data-bubble-name="email"] .absolute.bottom-0.h-40 {
  display: none !important;
}

/* Also target by gradient classes in case class order varies */
[data-bubble-name="email"] .bg-gradient-to-t {
  display: none !important;
}