/* Keep custom CSS small. Compiled Tailwind handles most styling. */
[x-cloak] {
  display: none !important;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: #f8fafc;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

.input {
  width: 100%;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  padding: 0.8rem 1rem;
  font-size: 16px;
  outline: none;
}

.input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-flex;
}

.mobile-safe-bottom {
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

.mobile-card {
  border-radius: 1.5rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}



/* Global admin theme */
.admin-shell.dark {
  color-scheme: dark;
  background: #0f172a !important;
  color: #e5e7eb !important;
}

.admin-shell.dark .bg-white,
.admin-shell.dark .bg-white\/90,
.admin-shell.dark .mobile-card {
  background-color: #111827 !important;
}

.admin-shell.dark .bg-slate-50,
.admin-shell.dark .bg-slate-100 {
  background-color: #1f2937 !important;
}

.admin-shell.dark .bg-slate-950,
.admin-shell.dark .bg-slate-900 {
  background-color: #020617 !important;
}

.admin-shell.dark .text-slate-950,
.admin-shell.dark .text-slate-900,
.admin-shell.dark .text-slate-800,
.admin-shell.dark .text-slate-700,
.admin-shell.dark .text-slate-600 {
  color: #f8fafc !important;
}

.admin-shell.dark .text-slate-500,
.admin-shell.dark .text-slate-400,
.admin-shell.dark .text-slate-300 {
  color: #cbd5e1 !important;
}

.admin-shell.dark .border-slate-100,
.admin-shell.dark .border-slate-200,
.admin-shell.dark .border-slate-300,
.admin-shell.dark .border-gray-100,
.admin-shell.dark .border-gray-200,
.admin-shell.dark .mobile-card {
  border-color: #334155 !important;
}

.admin-shell.dark .shadow-sm,
.admin-shell.dark .shadow-xl,
.admin-shell.dark .shadow-2xl {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32) !important;
}

.admin-shell.dark input,
.admin-shell.dark select,
.admin-shell.dark textarea,
.admin-shell.dark .input {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

.admin-shell.dark input::placeholder,
.admin-shell.dark textarea::placeholder {
  color: #94a3b8 !important;
}

.admin-shell.dark table,
.admin-shell.dark thead,
.admin-shell.dark tbody,
.admin-shell.dark tr,
.admin-shell.dark td,
.admin-shell.dark th {
  border-color: #334155 !important;
}

.admin-shell.dark tr:hover,
.admin-shell.dark .hover\:bg-slate-50:hover,
.admin-shell.dark .hover\:bg-indigo-50:hover {
  background-color: #1e293b !important;
}

.admin-shell.dark .hover\:text-indigo-700:hover {
  color: #a5b4fc !important;
}

.admin-shell.dark .bg-indigo-50 {
  background-color: #312e81 !important;
}

.admin-shell.dark .text-indigo-700,
.admin-shell.dark .text-indigo-600 {
  color: #c7d2fe !important;
}

.admin-shell.dark .border-indigo-100,
.admin-shell.dark .border-indigo-200 {
  border-color: #4338ca !important;
}

.admin-shell.dark .bg-emerald-50 {
  background-color: #052e2b !important;
}

.admin-shell.dark .text-emerald-700,
.admin-shell.dark .text-emerald-800 {
  color: #6ee7b7 !important;
}

.admin-shell.dark .border-emerald-100,
.admin-shell.dark .border-emerald-200 {
  border-color: #047857 !important;
}

.admin-shell.dark .bg-red-50,
.admin-shell.dark .bg-red-100 {
  background-color: #450a0a !important;
}

.admin-shell.dark .text-red-600,
.admin-shell.dark .text-red-700,
.admin-shell.dark .text-red-800 {
  color: #fecaca !important;
}

.admin-shell.dark .border-red-100,
.admin-shell.dark .border-red-200 {
  border-color: #991b1b !important;
}

.admin-shell.dark .bg-yellow-100,
.admin-shell.dark .bg-amber-50,
.admin-shell.dark .bg-amber-100 {
  background-color: #451a03 !important;
}

.admin-shell.dark .text-yellow-800,
.admin-shell.dark .text-amber-700,
.admin-shell.dark .text-amber-800 {
  color: #fde68a !important;
}

.admin-shell.dark .border-yellow-200,
.admin-shell.dark .border-amber-100,
.admin-shell.dark .border-amber-200 {
  border-color: #92400e !important;
}

.admin-shell.dark .bg-blue-50,
.admin-shell.dark .bg-blue-100 {
  background-color: #172554 !important;
}

.admin-shell.dark .text-blue-700,
.admin-shell.dark .text-blue-800 {
  color: #bfdbfe !important;
}

.admin-shell.dark .border-blue-100,
.admin-shell.dark .border-blue-200 {
  border-color: #1d4ed8 !important;
}

.admin-shell.dark .bg-purple-100 {
  background-color: #3b0764 !important;
}

.admin-shell.dark .text-purple-800 {
  color: #e9d5ff !important;
}

.admin-shell.dark .border-purple-200 {
  border-color: #7e22ce !important;
}

.admin-shell.dark .theme-toggle {
  background: #111827 !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

.admin-shell.dark .theme-toggle span:first-child {
  background: #1f2937 !important;
  color: #fde68a !important;
}

/* Chat sizing only; other admin pages keep normal scrolling. */
@media (max-width: 767px) {
  [data-chat-root="true"] {
    height: calc(100dvh - 6rem) !important;
    min-height: 0 !important;
    border-radius: 1.25rem !important;
  }

  [data-chat-root="true"] .message-pane,
  [data-chat-root="true"] footer,
  [data-chat-root="true"] footer > div {
    max-width: 100%;
    min-width: 0;
  }

  [data-chat-root="true"] footer textarea {
    width: 0;
  }
}