/* ==========================================================================
   HACNEX UI — shared design system
   Loaded on every page (public site, researcher, company, admin, triggered).
   1. Tokens          — one palette for the whole platform
   2. Base polish     — type, focus, selection, scrollbars, form sizing
   3. Components      — buttons, chips, cards, conversation, composer, activity log
   4. Platform fixes  — consistency overrides for legacy page styles
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --hx-bg:          #030711;
  --hx-bg-2:        #050914;
  --hx-surface:     #080e19;
  --hx-surface-2:   #0b1220;
  --hx-surface-3:   #0e1625;
  --hx-line:        rgba(148, 163, 184, .14);
  --hx-line-2:      rgba(148, 163, 184, .24);

  --hx-text:        #f8fafc;
  --hx-text-soft:   #cbd5e1;
  --hx-muted:       #8b98ac;
  --hx-muted-2:     #68758a;

  --hx-red:         #f12d49;
  --hx-red-2:       #ff5068;
  --hx-red-ink:     #c91f39;
  --hx-blue:        #5974ff;
  --hx-green:       #39d98a;
  --hx-yellow:      #f59e0b;
  --hx-violet:      #9c5cff;
  --hx-cyan:        #22d3ee;

  --hx-ring:        rgba(255, 80, 104, .65);
  --hx-radius-sm:   8px;
  --hx-radius:      12px;
  --hx-radius-lg:   16px;
  --hx-shadow:      0 10px 30px rgba(0, 0, 0, .35);
  --hx-font:        'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --hx-mono:        'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* role colours used by the conversation */
  --hx-role-researcher: #8ea0ff;
  --hx-role-company:    #ff7a8c;
  --hx-role-admin:      #5eead4;
}

/* 2. Base polish ------------------------------------------------------------ */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { font-feature-settings: "cv11", "ss01"; }

::selection { background: rgba(241, 45, 73, .38); color: #fff; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--hx-ring);
  outline-offset: 2px;
}

/* inputs never spill out of their cards (fixes sign-in / settings overflow) */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea {
  max-width: 100%;
  box-sizing: border-box;
}
img, video, svg, canvas { max-width: 100%; }
img { height: auto; }
pre, code { font-family: var(--hx-mono); }
pre { overflow-x: auto; }

/* dark scrollbars */
* { scrollbar-width: thin; scrollbar-color: #263247 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1d2738; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #2a3850; background-clip: padding-box; }

/* readable rendered markdown on dark surfaces */
.markdown-body { color: var(--hx-text-soft); background: transparent !important; font-family: var(--hx-font); line-height: 1.7; word-break: break-word; }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body strong { color: var(--hx-text); }
.markdown-body a { color: var(--hx-red-2); }
.markdown-body code { background: rgba(148, 163, 184, .12); color: #f1f5f9; border-radius: 6px; padding: .1em .35em; }
.markdown-body pre { background: #050a14 !important; border: 1px solid var(--hx-line); border-radius: var(--hx-radius); padding: 14px 16px; }
.markdown-body pre code { background: none; padding: 0; }
.markdown-body blockquote { border-left: 3px solid var(--hx-line-2); color: var(--hx-muted); padding-left: 14px; margin-left: 0; }
.markdown-body table { border-collapse: collapse; }
.markdown-body th, .markdown-body td { border: 1px solid var(--hx-line); padding: 6px 10px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* 3. Components ---------------------------------------------------------- */

/* Buttons */
.hx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 18px; border-radius: var(--hx-radius);
  font: 700 14px/1 var(--hx-font); letter-spacing: -.005em; text-decoration: none; cursor: pointer;
  border: 1px solid var(--hx-line-2); background: var(--hx-surface-2); color: var(--hx-text);
  transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.hx-btn:hover { border-color: rgba(148, 163, 184, .4); background: var(--hx-surface-3); }
.hx-btn:active { transform: translateY(1px); }
.hx-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.hx-btn--primary {
  border-color: rgba(255, 80, 104, .5); color: #fff;
  background: linear-gradient(135deg, var(--hx-red), var(--hx-red-ink));
  box-shadow: 0 8px 22px rgba(241, 45, 73, .22);
}
.hx-btn--primary:hover { background: linear-gradient(135deg, var(--hx-red-2), var(--hx-red)); border-color: rgba(255, 80, 104, .7); }

/* Chips */
.hx-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 999px;
  font: 800 10px/1 var(--hx-font); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--hx-line-2); color: var(--hx-muted); background: rgba(148, 163, 184, .06);
}
.hx-chip--researcher { color: var(--hx-role-researcher); border-color: rgba(142, 160, 255, .32); background: rgba(89, 116, 255, .1); }
.hx-chip--company    { color: var(--hx-role-company);    border-color: rgba(255, 122, 140, .32); background: rgba(241, 45, 73, .1); }
.hx-chip--admin      { color: var(--hx-role-admin);      border-color: rgba(94, 234, 212, .3);   background: rgba(20, 184, 166, .1); }
.hx-chip--system     { color: var(--hx-muted); }
.hx-chip--email      { color: #fcd34d; border-color: rgba(252, 211, 77, .3); background: rgba(245, 158, 11, .1); text-transform: none; letter-spacing: 0; font-size: 11px; font-weight: 700; }
.hx-chip--private    { color: #c4b5fd; border-color: rgba(196, 181, 253, .3); background: rgba(156, 92, 255, .1); }

/* Conversation */
.hx-convo {
  font-family: var(--hx-font); color: var(--hx-text);
  background: linear-gradient(180deg, rgba(14, 22, 37, .85), rgba(8, 14, 25, .92));
  border: 1px solid var(--hx-line); border-radius: var(--hx-radius-lg);
  padding: 22px 22px 18px; box-shadow: var(--hx-shadow);
}
.hx-convo__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--hx-line); }
.hx-convo__title { margin: 0; font: 800 18px/1.25 var(--hx-font); letter-spacing: -.02em; color: var(--hx-text); display: flex; align-items: center; gap: 10px; }
.hx-convo__count { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: rgba(241, 45, 73, .14); color: var(--hx-red-2); font-size: 12px; font-weight: 800; }
.hx-convo__sub { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--hx-muted); max-width: 60ch; }
.hx-convo__legend { display: flex; gap: 6px; flex-wrap: wrap; }
.hx-convo__list { list-style: none; margin: 0; padding: 18px 0 4px; display: flex; flex-direction: column; gap: 14px; max-height: 720px; overflow-y: auto; }
.hx-convo__empty { padding: 28px 16px; text-align: center; font-size: 14px; color: var(--hx-muted); border: 1px dashed var(--hx-line-2); border-radius: var(--hx-radius); }
.hx-convo__email-hint { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding-top: 14px; border-top: 1px solid var(--hx-line); font-size: 12.5px; color: var(--hx-muted); }
.hx-convo__email-hint svg { color: #fcd34d; flex-shrink: 0; }

.hx-msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; }
.hx-msg__avatar {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  font: 800 14px/1 var(--hx-font); color: #fff; background: #1e293b; border: 1px solid var(--hx-line-2);
}
.hx-msg--researcher .hx-msg__avatar { background: linear-gradient(135deg, #5974ff, #9c5cff); border-color: transparent; }
.hx-msg--company    .hx-msg__avatar { background: linear-gradient(135deg, #f12d49, #c91f39); border-color: transparent; }
.hx-msg--admin      .hx-msg__avatar { background: linear-gradient(135deg, #14b8a6, #0e7490); border-color: transparent; }
.hx-msg__body {
  min-width: 0; padding: 12px 14px 13px; border-radius: 4px var(--hx-radius) var(--hx-radius) var(--hx-radius);
  background: rgba(15, 23, 42, .72); border: 1px solid var(--hx-line);
}
.hx-msg--researcher .hx-msg__body { border-left: 2px solid rgba(142, 160, 255, .55); }
.hx-msg--company    .hx-msg__body { border-left: 2px solid rgba(255, 122, 140, .55); }
.hx-msg--admin      .hx-msg__body { border-left: 2px solid rgba(94, 234, 212, .5); }
.hx-msg--mine .hx-msg__body { background: rgba(30, 41, 59, .7); }
.hx-msg--new .hx-msg__body { animation: hx-pop .5s ease; }
@keyframes hx-pop { from { box-shadow: 0 0 0 3px rgba(255, 80, 104, .35); } to { box-shadow: 0 0 0 0 rgba(255, 80, 104, 0); } }
.hx-msg__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.hx-msg__author { font-size: 14px; font-weight: 750; color: var(--hx-text); }
.hx-msg__time { margin-left: auto; font-size: 12px; color: var(--hx-muted-2); white-space: nowrap; }
.hx-msg__text { font-size: 14.5px; line-height: 1.65; color: var(--hx-text-soft); white-space: normal; overflow-wrap: anywhere; }

/* Composer */
.hx-composer {
  font-family: var(--hx-font); margin-top: 14px; padding: 16px; border-radius: var(--hx-radius-lg);
  background: var(--hx-surface); border: 1px solid var(--hx-line);
}
.hx-composer__label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 750; color: var(--hx-text); }
.hx-composer__input {
  display: block; width: 100%; min-height: 110px; resize: vertical; padding: 12px 14px;
  font: 400 14.5px/1.6 var(--hx-font); color: var(--hx-text);
  background: #050a14; border: 1px solid var(--hx-line-2); border-radius: var(--hx-radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.hx-composer__input::placeholder { color: var(--hx-muted-2); }
.hx-composer__input:focus { outline: none; border-color: rgba(255, 80, 104, .55); box-shadow: 0 0 0 3px rgba(241, 45, 73, .14); }
.hx-composer__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.hx-composer__note { font-size: 12.5px; color: var(--hx-muted); }
.hx-composer__status { min-height: 18px; margin: 8px 0 0; font-size: 13px; color: var(--hx-muted); }
.hx-composer__status[data-state="ok"] { color: var(--hx-green); }
.hx-composer__status[data-state="error"] { color: var(--hx-red-2); }

/* Collapsible activity log */
.hx-activity { font-family: var(--hx-font); border: 1px solid var(--hx-line); border-radius: var(--hx-radius-lg); background: var(--hx-surface); overflow: hidden; }
.hx-activity__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px;
  cursor: pointer; list-style: none; font-weight: 750; font-size: 15px; color: var(--hx-text); user-select: none;
}
.hx-activity__summary::-webkit-details-marker { display: none; }
.hx-activity__summary::after {
  content: ""; width: 9px; height: 9px; margin-left: 8px; flex-shrink: 0;
  border-right: 2px solid var(--hx-muted); border-bottom: 2px solid var(--hx-muted);
  transform: rotate(45deg) translateY(-3px); transition: transform .2s ease;
}
.hx-activity[open] > .hx-activity__summary::after { transform: rotate(-135deg) translateY(-2px); }
.hx-activity__summary:hover { background: rgba(148, 163, 184, .04); }
.hx-activity__count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--hx-muted); }
.hx-activity__body { padding: 4px 20px 20px; border-top: 1px solid var(--hx-line); max-height: 640px; overflow-y: auto; }

/* Status / payment badges for dark surfaces */
.hx-badge { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid; font-weight: 700; white-space: nowrap; }
.hx-badge--green  { color: #6ee7b7 !important; background: rgba(16, 185, 129, .12); border-color: rgba(52, 211, 153, .32); }
.hx-badge--red    { color: #fda4af !important; background: rgba(241, 45, 73, .12); border-color: rgba(251, 113, 133, .34); }
.hx-badge--orange { color: #fdba74 !important; background: rgba(249, 115, 22, .12); border-color: rgba(251, 146, 60, .32); }
.hx-badge--yellow { color: #fcd34d !important; background: rgba(245, 158, 11, .12); border-color: rgba(251, 191, 36, .32); }
.hx-badge--blue   { color: #a5b4fc !important; background: rgba(89, 116, 255, .12); border-color: rgba(129, 140, 248, .34); }
.hx-badge--violet { color: #c4b5fd !important; background: rgba(156, 92, 255, .12); border-color: rgba(167, 139, 250, .34); }
.hx-badge--cyan   { color: #67e8f9 !important; background: rgba(34, 211, 238, .1);  border-color: rgba(34, 211, 238, .3); }
.hx-badge--slate  { color: #cbd5e1 !important; background: rgba(148, 163, 184, .1); border-color: rgba(148, 163, 184, .28); }

/* Generic card / status pill (available to any page) */
.hx-card { background: var(--hx-surface); border: 1px solid var(--hx-line); border-radius: var(--hx-radius-lg); padding: 22px; box-shadow: var(--hx-shadow); color: var(--hx-text); }
.hx-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font: 700 12.5px/1 var(--hx-font); border: 1px solid var(--hx-line-2); color: var(--hx-text-soft); background: rgba(148, 163, 184, .06); }

@media (max-width: 640px) {
  .hx-convo { padding: 16px 14px 14px; border-radius: var(--hx-radius); }
  .hx-convo__legend { display: none; }
  .hx-msg { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
  .hx-msg__avatar { width: 30px; height: 30px; border-radius: 9px; font-size: 12px; }
  .hx-msg__time { margin-left: 0; width: 100%; }
  .hx-composer__bar .hx-btn { width: 100%; }
  .hx-activity__summary { padding: 14px 16px; }
  .hx-activity__count { display: none; }
}

/* 4. Platform fixes ------------------------------------------------------ */

/* Print: conversation and logs print cleanly */
@media print {
  .hx-composer, .hx-convo__legend { display: none !important; }
  .hx-convo, .hx-activity { box-shadow: none; border-color: #ccc; background: #fff; color: #000; }
  .hx-convo__list, .hx-activity__body { max-height: none; overflow: visible; }
}

/* SVG stat icons on dashboards */
.cd-stat-icon, .rd-stat-icon { display: inline-grid !important; place-items: center; }
.cd-stat-icon svg, .rd-stat-icon svg { display: block; width: 16px; height: 16px; }