/* Direction: NexaAI — cool paper-white workspace, deep navy rail, electric blue to soft violet */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #e9ebf0;
  --border: #e1e6f0;
  --border-strong: #adb1bb;
  --ink: #0f1a33;
  --muted: #55627f;
  --accent: #2b5cff;
  --accent-hover: #254ed9;
  --accent-ink: #ffffff;
  --accent-text: #1f47d6;
  --accent-strong: #2b5cff;
  --accent-soft: #eaf0ff;
  --accent-border: #9ab1fd;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dae9e4;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #ede3de;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #eedde0;
  --danger-strong: #b91c1c;
  --chart-1: #2b5cff;
  --chart-2: #d341dc;
  --chart-3: #ae0018;
  --chart-4: #a98004;
  --chart-5: #0c6b20;
  --chart-6: #079ca9;

  --font-display: "Sora", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.02em;
  --radius-card: 16px;
  --radius-btn: 10px;
  --radius-input: 10px;
  --card-pad: 20px;
  --shadow-card: 0 1px 2px rgba(15, 26, 51, 0.04), 0 8px 24px -12px rgba(43, 92, 255, 0.12);
  --x-nav: #0a1230;
  --x-nav-2: #121c45;
  --x-on-nav: #e9eeff;
  --x-nav-muted: #9aa7d1;
  --x-violet: #7c5cff;
  --x-c-blue: #2b5cff;
  --x-c-violet: #7c5cff;
  --x-c-emerald: #0f9d76;
  --x-c-slate: #334155;
  --gradient-ai: linear-gradient(135deg, #2b5cff 0%, #7c5cff 100%);
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #030610;
  --surface: #1c1f28;
  --surface-2: #10121c;
  --border: #262931;
  --border-strong: #4f5158;
  --ink: #f5f7fb;
  --muted: #94979d;
  --accent: #2b5cff;
  --accent-hover: #4b74ff;
  --accent-ink: #ffffff;
  --accent-text: #5a80ff;
  --accent-strong: #5a80ff;
  --accent-soft: #0c1945;
  --accent-border: #152d7c;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #07211a;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #2a170e;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #2b0b13;
  --danger-strong: #cd5c5c;
  --chart-1: #2b5cff;
  --chart-2: #d341dc;
  --chart-3: #e9242f;
  --chart-4: #a98004;
  --chart-5: #1a9a33;
  --chart-6: #079ca9;
}

/* NexaAI app shell and widgets */
.nx-side {
  position: fixed; inset: 0 auto 0 0; z-index: 40; width: 16rem;
  display: flex; flex-direction: column; padding: 1.25rem 0.9rem;
  background: linear-gradient(180deg, var(--x-nav) 0%, var(--x-nav-2) 100%);
  color: var(--x-on-nav);
  transform: translateX(-100%); transition: transform 0.2s ease;
}
.nx-side.is-open { transform: none; }
.nx-scrim { display: none; position: fixed; inset: 0; z-index: 30; background: color-mix(in srgb, var(--x-nav) 60%, transparent); }
.nx-scrim.is-open { display: block; }
@media (min-width: 1024px) {
  .nx-side { transform: none; }
  .nx-scrim, .nx-scrim.is-open { display: none; }
}
.nx-brand-mark {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 0.7rem;
  background: var(--gradient-ai); color: var(--x-on-nav);
  box-shadow: 0 0 22px -2px var(--x-violet);
}
.nx-link {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.8rem; border-radius: 0.7rem;
  color: var(--x-nav-muted); font-size: 0.92rem; font-weight: 500; transition: background 0.15s, color 0.15s;
}
.nx-link:hover { background: color-mix(in srgb, var(--x-on-nav) 8%, transparent); color: var(--x-on-nav); }
.nx-link:focus-visible { outline: 2px solid var(--x-violet); outline-offset: 2px; }
.nx-link[aria-current="page"] {
  color: var(--x-on-nav);
  background: linear-gradient(90deg, color-mix(in srgb, var(--x-c-blue) 40%, transparent), color-mix(in srgb, var(--x-violet) 20%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--x-violet) 45%, transparent), 0 0 18px -6px var(--x-violet);
}
.nx-count {
  margin-left: auto; min-width: 1.4rem; padding: 0 0.4rem; border-radius: 999px; text-align: center;
  font-size: 0.72rem; line-height: 1.4rem; background: var(--gradient-ai); color: var(--x-on-nav);
}
.nx-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.nx-stat-icon {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 0.75rem;
  background: var(--accent-soft); color: var(--accent-text);
}
.nx-avatar {
  display: grid; place-items: center; flex: none; width: 2.2rem; height: 2.2rem; border-radius: 999px;
  background: var(--gradient-ai); color: var(--x-on-nav); font-size: 0.78rem; font-weight: 600;
}
.nx-avatar.lg { width: 3.5rem; height: 3.5rem; font-size: 1.1rem; }

.nx-s-open, .nx-s-pending, .nx-s-resolved, .nx-s-active, .nx-s-new, .nx-s-inactive {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.6rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.nx-s-open, .nx-s-new { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-text); }
.nx-s-pending { background: color-mix(in srgb, var(--warning) 16%, transparent); color: color-mix(in srgb, var(--warning) 75%, var(--ink)); }
.nx-s-resolved, .nx-s-active { background: color-mix(in srgb, var(--success) 14%, transparent); color: color-mix(in srgb, var(--success) 75%, var(--ink)); }
.nx-s-inactive { background: var(--surface-2); color: var(--muted); }

.nx-conv {
  display: block; width: 100%; text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent; transition: background 0.15s;
}
.nx-conv:hover { background: var(--surface-2); }
.nx-conv:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nx-conv.is-active { background: var(--accent-soft); border-left-color: var(--accent); }

.nx-msgs { overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.9rem; }
.nx-b { max-width: min(34rem, 85%); padding: 0.6rem 0.85rem; border-radius: 1rem; font-size: 0.92rem; line-height: 1.45; }
.nx-b-customer { background: var(--surface-2); border-top-left-radius: 0.3rem; }
.nx-b-bot { background: var(--accent-soft); border: 1px solid var(--accent-border, var(--border)); border-top-right-radius: 0.3rem; }
.nx-b-agent { background: var(--gradient-ai); color: var(--x-on-nav); border-top-right-radius: 0.3rem; }

.nx-track { position: relative; width: 100%; height: 9rem; border-radius: 0.6rem; background: var(--surface-2); overflow: hidden; display: flex; align-items: flex-end; }
.nx-track.sm { height: 4.5rem; }
.nx-bar { width: 100%; border-radius: 0.6rem 0.6rem 0 0; background: var(--gradient-ai); min-height: 4px; }
.nx-meter { height: 0.55rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.nx-meter > span { display: block; height: 100%; border-radius: 999px; background: var(--gradient-ai); }
.nx-donut { width: 9rem; height: 9rem; border-radius: 999px; display: grid; place-items: center; }
.nx-donut > div { width: 6.6rem; height: 6.6rem; border-radius: 999px; background: var(--surface); display: grid; place-items: center; text-align: center; }

.nx-ai-card {
  position: relative; border-radius: var(--radius-card); padding: 1.25rem;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--x-violet) 18%, transparent), 0 12px 32px -16px var(--x-violet);
}

.nx-switch { position: relative; display: inline-block; width: 2.7rem; height: 1.5rem; flex: none; }
.nx-switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.nx-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--border-strong, var(--border)); transition: background 0.15s; }
.nx-switch span::after { content: ""; position: absolute; top: 0.18rem; left: 0.18rem; width: 1.14rem; height: 1.14rem; border-radius: 999px; background: var(--surface); transition: transform 0.15s; }
.nx-switch input:checked + span { background: var(--accent); }
.nx-switch input:checked + span::after { transform: translateX(1.2rem); }
.nx-switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.nx-widget { --w: var(--x-c-blue); }
.nx-widget[data-color="violet"] { --w: var(--x-c-violet); }
.nx-widget[data-color="emerald"] { --w: var(--x-c-emerald); }
.nx-widget[data-color="slate"] { --w: var(--x-c-slate); }
.nx-widget-head { background: linear-gradient(135deg, var(--w), color-mix(in srgb, var(--w) 70%, var(--x-nav))); color: var(--x-on-nav); }
.nx-widget .nx-w-bubble { background: var(--w); color: var(--x-on-nav); }
.nx-widget[data-position="left"] .nx-launch-row { justify-content: flex-start; }
.nx-widget[data-position="right"] .nx-launch-row { justify-content: flex-end; }
.nx-dot { width: 0.55rem; height: 0.55rem; border-radius: 999px; background: var(--success); box-shadow: 0 0 8px var(--success); }
.nx-dot.off { background: var(--muted); box-shadow: none; }

.nx-ok, .nx-err { padding: 0.65rem 0.9rem; border-radius: 0.7rem; font-size: 0.9rem; border: 1px solid; }
.nx-ok { border-color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--surface)); color: color-mix(in srgb, var(--success) 70%, var(--ink)); }
.nx-err { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); color: color-mix(in srgb, var(--danger) 75%, var(--ink)); }

.nx-login-bg {
  background:
    radial-gradient(60rem 30rem at 15% -10%, color-mix(in srgb, var(--x-c-blue) 50%, transparent), transparent 60%),
    radial-gradient(40rem 26rem at 95% 110%, color-mix(in srgb, var(--x-violet) 45%, transparent), transparent 60%),
    var(--x-nav);
}
.htmx-request.nx-fade, .htmx-request .nx-fade { opacity: 0.55; transition: opacity 0.15s; }
.nx-swatch input { position: absolute; opacity: 0; }
.nx-swatch input:checked + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.nx-swatch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .nx-side, .nx-conv, .nx-switch span, .nx-switch span::after { transition: none; } }