@import "tailwindcss";

/* Constrain the app to the area actually visible inside WP admin
   (viewport minus the admin bar) so inner scroll areas can reach
   their real bottom instead of being clipped under the chrome. */
.kmbp-app-root {
  height: calc(100vh - 32px);
}
@media screen and (max-width: 782px) {
  .kmbp-app-root {
    height: calc(100vh - 46px);
  }
}

.theme-toggle {
  border-color: #e5e7eb;
  background: #ffffff;
  color: #4b5563;
}

.theme-toggle:hover {
  background: #f9fafb;
  color: #4f46e5;
}

.theme-dark .theme-toggle {
  border-color: rgba(71, 85, 105, 0.75);
  background: rgba(15, 23, 42, 0.82);
  color: #cbd5e1;
}

.theme-dark .theme-toggle:hover {
  background: rgba(30, 41, 59, 0.9);
  color: #ffffff;
}

.theme-dark {
  background: #0f172a;
}

.theme-dark .bg-white {
  background-color: #111827;
}

.theme-dark .bg-gray-50 {
  background-color: #0f172a;
}

.theme-dark .bg-indigo-50 {
  background-color: rgba(79, 70, 229, 0.16);
}

.theme-dark .bg-indigo-50\/40 {
  background-color: rgba(79, 70, 229, 0.16);
}

.theme-dark .bg-gray-100 {
  background-color: #1f2937;
}

.theme-dark .bg-amber-50,
.theme-dark .bg-amber-50\/60 {
  background-color: rgba(146, 64, 14, 0.24);
}

.theme-dark .bg-amber-100 {
  background-color: rgba(180, 83, 9, 0.28);
}

.theme-dark .border-gray-50,
.theme-dark .border-gray-100,
.theme-dark .border-gray-200 {
  border-color: #1f2937;
}

.theme-dark .border-amber-100,
.theme-dark .border-amber-200 {
  border-color: rgba(245, 158, 11, 0.28);
}

.theme-dark .text-gray-900,
.theme-dark .text-gray-800,
.theme-dark .text-gray-700,
.theme-dark .text-gray-600 {
  color: #e5e7eb;
}

.theme-dark .text-gray-500,
.theme-dark .text-gray-400 {
  color: #94a3b8;
}

.theme-dark .text-amber-900 {
  color: #fde68a;
}

.theme-dark input,
.theme-dark textarea,
.theme-dark select {
  color: #e5e7eb;
}

.theme-dark input::placeholder,
.theme-dark textarea::placeholder {
  color: #64748b;
}

.theme-dark select,
.theme-dark input,
.theme-dark textarea {
  background-color: #111827;
  border-color: #334155;
}

.theme-dark option {
  background-color: #111827;
}

.theme-dark .hover\:bg-gray-50:hover,
.theme-dark .hover\:bg-gray-100:hover,
.theme-dark .hover\:bg-indigo-50:hover,
.theme-dark .hover\:bg-indigo-50\/40:hover {
  background-color: rgba(30, 41, 59, 0.85);
}

.theme-light .settings-page .text-slate-100,
.theme-light .settings-page .text-slate-200,
.theme-light .settings-page .text-slate-300 {
  color: #111827;
}

.theme-light .settings-page h2.text-white,
.theme-light .settings-page header span.text-white {
  color: #111827;
}

.theme-light .settings-page .text-slate-400,
.theme-light .settings-page .text-slate-500,
.theme-light .settings-page .text-slate-600 {
  color: #64748b;
}

.theme-light .settings-page .bg-slate-950\/80,
.theme-light .settings-page .bg-slate-900,
.theme-light .settings-page .bg-slate-900\/60,
.theme-light .settings-page .bg-slate-800,
.theme-light .settings-page .bg-slate-800\/40,
.theme-light .settings-page .bg-slate-800\/50,
.theme-light .settings-page .bg-slate-800\/60,
.theme-light .settings-page .bg-slate-800\/70 {
  background-color: #ffffff;
}

.theme-light .settings-page .border-slate-800,
.theme-light .settings-page .border-slate-800\/60,
.theme-light .settings-page .border-slate-800\/80,
.theme-light .settings-page .border-slate-700,
.theme-light .settings-page .border-slate-700\/60,
.theme-light .settings-page .border-slate-600\/40 {
  border-color: #e2e8f0;
}

.theme-light .settings-page .bg-blue-500\/8 {
  background-color: rgba(59, 130, 246, 0.08);
}

.theme-light .settings-page .bg-amber-500\/8 {
  background-color: rgba(245, 158, 11, 0.1);
}

.theme-light .settings-page .bg-green-500\/8 {
  background-color: rgba(34, 197, 94, 0.1);
}

.theme-light .settings-page .bg-indigo-500\/8 {
  background-color: rgba(99, 102, 241, 0.1);
}

.theme-light .settings-page input,
.theme-light .settings-page textarea,
.theme-light .settings-page select {
  color: #0f172a;
  background-color: #ffffff;
}

.theme-light .settings-page input::placeholder,
.theme-light .settings-page textarea::placeholder {
  color: #94a3b8;
}

.theme-light .settings-page option {
  background-color: #ffffff;
}

.theme-light .settings-page .hover\:bg-slate-800\/50:hover,
.theme-light .settings-page .hover\:bg-slate-800\/60:hover {
  background-color: #f1f5f9;
}

/* Notices, alerts, and status banners — readable on light backgrounds */
.theme-light .settings-page .text-blue-300,
.theme-light .settings-page .text-blue-400 {
  color: #1d4ed8;
}

.theme-light .settings-page .text-amber-300,
.theme-light .settings-page .text-amber-400 {
  color: #b45309;
}

.theme-light .settings-page .text-green-300,
.theme-light .settings-page .text-green-400 {
  color: #166534;
}

.theme-light .settings-page .text-indigo-300,
.theme-light .settings-page .text-indigo-400 {
  color: #4338ca;
}

.theme-light .settings-page .text-red-300,
.theme-light .settings-page .text-red-400 {
  color: #b91c1c;
}

.theme-light .settings-page .text-sky-300 {
  color: #0369a1;
}

.theme-light .settings-page .bg-green-500\/10,
.theme-light .settings-page .bg-green-500\/15 {
  background-color: rgba(22, 163, 74, 0.12);
}

.theme-light .settings-page .bg-red-500\/10 {
  background-color: rgba(220, 38, 38, 0.1);
}

.theme-light .settings-page .border-green-500\/20,
.theme-light .settings-page .border-green-500\/25 {
  border-color: rgba(22, 163, 74, 0.35);
}

.theme-light .settings-page .border-red-500\/20 {
  border-color: rgba(220, 38, 38, 0.35);
}

.theme-light .settings-page .border-blue-500\/30 {
  border-color: rgba(37, 99, 235, 0.35);
}

.theme-light .settings-page .border-amber-500\/30 {
  border-color: rgba(217, 119, 6, 0.35);
}

.theme-light .settings-page .border-green-500\/30 {
  border-color: rgba(22, 163, 74, 0.35);
}

.theme-light .settings-page .border-indigo-500\/30 {
  border-color: rgba(79, 70, 229, 0.35);
}

.theme-light .settings-page strong {
  color: #0f172a;
  font-weight: 600;
}

.theme-light .settings-page em {
  color: #334155;
}

.theme-light .settings-page code {
  color: #4338ca;
  background-color: #f1f5f9;
}

/* Imported email HTML — Tailwind's preflight strips native margins/borders
   from tags like <table>, <ul>, <h1>, so restore sane defaults scoped to
   this wrapper only. Emails are also often wider than the chat bubble
   (fixed-width tables), so allow horizontal scrolling instead of
   overflowing/breaking the layout. */
.kmbp-email-body {
  max-width: 100%;
  overflow-x: auto;
  word-wrap: break-word;
}

.kmbp-email-body img {
  max-width: 100%;
  height: auto;
}

.kmbp-email-body table {
  max-width: 100%;
}

.kmbp-email-body p,
.kmbp-email-body ul,
.kmbp-email-body ol,
.kmbp-email-body blockquote,
.kmbp-email-body h1,
.kmbp-email-body h2,
.kmbp-email-body h3,
.kmbp-email-body h4 {
  margin: 0 0 0.75em;
}

.kmbp-email-body p:last-child,
.kmbp-email-body ul:last-child,
.kmbp-email-body ol:last-child,
.kmbp-email-body table:last-child {
  margin-bottom: 0;
}

.kmbp-email-body ul,
.kmbp-email-body ol {
  padding-left: 1.4em;
}

.kmbp-email-body ul {
  list-style: disc;
}

.kmbp-email-body ol {
  list-style: decimal;
}

.kmbp-email-body a {
  color: #4f46e5;
  text-decoration: underline;
}

.kmbp-email-body blockquote {
  padding-left: 1em;
  border-left: 3px solid #e5e7eb;
  color: #4b5563;
}

.kmbp-email-body hr {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 0.75em 0;
}
