/* ============================================================
   TrackIQ Heritage Sage theme for the Chatwoot help center.

   LIGHT THEME ONLY. Dark mode is disabled in the head override
   (_portal_head.html.erb forces localStorage.theme = 'light' and
   the appearance switcher is hidden below). The html.dark rules
   here are a safety net: if anything ever re-applies the class,
   the surface stays light rather than half-themed.

   Chatwoot resolves every Tailwind colour utility to
   rgb(var(--slate-N)), so the whole surface is retinted by
   remapping the token scale instead of fighting utility
   specificity. Values are space-separated RGB triplets, the format
   Tailwind's rgb(var(--x) / <alpha>) syntax requires.

   Loaded unlayered, so it outranks Tailwind's @layer base tokens.
   ============================================================ */

:root,
html.light,
html.dark {
  --slate-1:  253 251 250;   /* #FDFBFA App Cream - page background      */
  --slate-2:  247 245 239;   /* #F7F5EF Soft - subtle panels            */
  --slate-3:  243 241 234;   /* #F3F1EA Muted - UI element background   */
  --slate-4:  239 234 227;   /* #EFEAE3 Border subtle - hovered element */
  --slate-5:  230 225 216;   /* #E6E1D8 Border - active element         */
  --slate-6:  222 216 204;   /*         separators                      */
  --slate-7:  211 204 190;   /*         element borders                 */
  --slate-8:  183 170 152;   /* #B7AA98 Mocha Taupe - strong border     */
  --slate-9:  139 143 134;   /* #8B8F86 Muted - solid fill              */
  --slate-10: 119 121 111;   /*         hovered solid                   */
  --slate-11:  88  98  88;   /* #586258 Secondary text  (6.0:1 on cream)*/
  --slate-12:  31  36  32;   /* #1F2420 Ink            (14.5:1 on cream)*/

  --tiq-sage-deep:  #17533F;
  --tiq-sage:       #2F6B56;
  --tiq-sage-pale:  #F1F5EF;
  --tiq-sand:       #C4A574;
  --tiq-border:     #E6E1D8;
}

/* Never let the dark surface classes paint. */
html.dark body,
html.dark #portal,
html.dark .dark\:bg-n-slate-1,
html.dark .dark\:bg-n-slate-2,
html.dark .dark\:bg-slate-900 {
  background-color: rgb(var(--slate-1)) !important;
}

/* Appearance switcher removed - the portal is light-only. */
#sidebar-theme-toggle,
#toggle-appearance,
#toggle-theme-button,
.appearance-menu {
  display: none !important;
}

/* ---------- Article prose ---------- */

/* Links carry the brand rather than Chatwoot's default blue.
   Sage Deep on cream is 9.6:1, comfortably past AA. */
.prose a,
article a,
#article-body a {
  color: var(--tiq-sage-deep);
  text-decoration-color: color-mix(in srgb, var(--tiq-sage-deep) 35%, transparent);
  text-underline-offset: 2px;
}
.prose a:hover,
article a:hover,
#article-body a:hover {
  color: var(--tiq-sage);
  text-decoration-color: currentColor;
}

/* Headings in Sage Deep, semibold - TrackIQ headings are 600, not black. */
.prose :is(h1, h2, h3, h4),
article :is(h1, h2, h3, h4),
/* The title sits outside .prose and carries .text-n-slate-12 (0,1,0),
   so the class is matched here to reach 0,1,3 rather than using !important. */
article > header h1.text-n-slate-12 {
  color: var(--tiq-sage-deep);
  font-weight: 600;
}

/* Callouts use Sage Pale with a Sage Deep rule - the house pattern. */
.prose blockquote,
article blockquote {
  background: var(--tiq-sage-pale);
  border-left: 3px solid var(--tiq-sage-deep);
  border-radius: 8px;
  padding: 12px 16px;
  font-style: normal;
  color: #1F2420;
}

/* Tables: Sage Deep header with cream text, hairline rules. */
.prose table th,
article table th {
  background: var(--tiq-sage-deep);
  color: #FDFBFA;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8em;
}
.prose table td,
article table td { border-color: var(--tiq-border); }
.prose table, article table { font-feature-settings: 'tnum' 1; }

/* Inline code on the warm neutral, not cool grey. */
.prose :not(pre) > code,
article :not(pre) > code {
  background: var(--tiq-sage-pale);
  color: var(--tiq-sage-deep);
  border: 1px solid var(--tiq-border);
  border-radius: 6px;
  padding: 0.1em 0.35em;
  font-weight: 500;
}

/* Imported KB screenshots get a hairline + radius so they sit on the
   cream background instead of floating. */
article img {
  border-radius: 10px;
  border: 1px solid var(--tiq-border);
}

#category-block { border-color: var(--tiq-border); }

/* ---------- Header logo ----------
   Chatwoot renders the portal logo as a 32x32 circular avatar
   (w-8 h-8 rounded-full). TrackIQ's standard is that anything under
   ~120px wide takes the {IQ} bug rather than the full lockup, and the
   bug is ~1.4:1 so a circular crop would clip it. Unset the circle,
   size by height, let width follow the native aspect ratio. */
header a img {
  width: auto !important;
  height: 28px !important;
  border-radius: 6px !important;   /* the uploaded mark is square; the circle crop clipped it */
  object-fit: contain;
}


/* ---------- Surfaces ----------
   The layout hardcodes `bg-white` on the body, the topbar and the main
   wrapper, so those three do NOT flow from the --slate token remap.
   TrackIQ's page background is App Cream #FDFBFA - explicitly never pure
   white - with white reserved for raised surfaces. Repaint the page cream
   and keep the sticky header white so it still reads as a surface. */
body,
body.bg-white {
  background-color: #FDFBFA !important;
}

/* Main content wrapper + sidebar sit on the page, not above it. */
body > #portal .bg-white:not(header),
#portal aside {
  background-color: #FDFBFA !important;
}

/* Sticky topbar stays white and separates with a warm hairline
   instead of Chatwoot's cool grey (was rgb(234,234,234)). */
header.sticky {
  background-color: #FFFFFF !important;
  border-bottom-color: var(--tiq-border) !important;
}

/* Category cards read as raised white surfaces on the cream page. */
#category-block {
  background-color: #FFFFFF;
  border: 1px solid var(--tiq-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(31,36,32,0.06);
}

/* Any remaining cool-grey divider picks up the warm border. */
.border-n-weak,
[class*="border-n-weak"] {
  border-color: var(--tiq-border) !important;
}

/* ---------- Embedded video ----------
   Chatwoot's mp4 embed template hardcodes width="640" height="360", which
   leaves a dead column beside the player on a wide article. Override to fill
   the content width and keep the aspect ratio. Also covers the iframe embeds
   (YouTube/Loom/Vimeo), whose wrapper already uses a padding-bottom ratio. */
article video,
.prose video {
  width: 100% !important;
  height: auto !important;
  display: block;
  border-radius: 10px;
  border: 1px solid var(--tiq-border);
  background: #000;
  margin: 1.25rem 0;
}

/* The provider embeds wrap an absolutely-positioned iframe in a ratio box. */
article div[style*="padding-bottom"] iframe,
.prose div[style*="padding-bottom"] iframe {
  border-radius: 10px;
  border: 1px solid var(--tiq-border);
}

/* ==========================================================================
   Knowledge-base chat (portal home page)
   --------------------------------------------------------------------------
   Written as plain CSS rather than Tailwind utilities on purpose: the home page
   ships as a bind-mounted ERB override into the stock chatwoot/chatwoot:*-ce
   image, and that image's Tailwind bundle is already compiled. Any utility class
   not already used somewhere in upstream would simply not exist. Everything here
   is self-contained and keyed off the theme variables above.
   ========================================================================== */

.kbc {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.kbc-inner {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
}

/* ---------- intro state ---------- */

.kbc-intro {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem 1.5rem 4rem;
}

/* The graph-paper wash the old hero carried, kept on the intro only so the
   thread stays calm to read. Masked to an ellipse so the lines fade out rather
   than running into the sidebar border and the composer. */
.kbc-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(23, 83, 63, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(23, 83, 63, 0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 35%, transparent 80%);
  mask-image: radial-gradient(ellipse at 50% 30%, #000 35%, transparent 80%);
}

.kbc-intro > .kbc-inner { position: relative; }

@media (min-width: 768px) {
  .kbc-intro { padding: 2.5rem 3.5rem 4rem; }
}

.kbc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #CDDAD2;
  background: var(--tiq-sage-pale);
  color: var(--tiq-sage-deep);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.kbc-badge::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: #2F7A5A;
}

.kbc-title {
  font-size: 2.25rem;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: rgb(var(--slate-12));
  margin: 1.25rem 0 0;
  max-width: 40rem;
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .kbc-title { font-size: 2.85rem; }
}

.kbc-sub {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgb(var(--slate-11));
  margin: 1rem 0 0;
  max-width: 35rem;
  text-wrap: pretty;
}

/* ---------- composer (shared) ---------- */

.kbc-card {
  margin-top: 1.9rem;
  background: #FFFFFF;
  border: 1px solid var(--tiq-border);
  border-radius: 0.875rem;
  box-shadow: 0 8px 24px rgba(31, 36, 32, 0.06);
  padding: 0.875rem 0.875rem 0.75rem;
}

.kbc-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: none;
  outline: none;
  background: transparent;
  resize: none;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: rgb(var(--slate-12));
  padding: 0.375rem 0.25rem 0.75rem;
}

.kbc-input::placeholder { color: rgb(var(--slate-9)); }

.kbc-card-foot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-top: 1px solid #F1EDE6;
  padding-top: 0.7rem;
}

.kbc-hint {
  font-size: 0.72rem;
  color: rgb(var(--slate-9));
}

.kbc-send {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  border-radius: 0.5625rem;
  background: var(--tiq-sage-deep);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.56rem 0.94rem;
  cursor: pointer;
  transition: background 0.15s ease-out;
}

.kbc-send:hover { background: #123F31; }
.kbc-send:disabled { opacity: 0.5; cursor: default; }

.kbc-send svg { width: 0.94rem; height: 0.94rem; }

/* ---------- starters ---------- */

.kbc-label {
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgb(var(--slate-9));
  font-weight: 600;
}

.kbc-starters {
  margin-top: 1.6rem;
}

.kbc-starter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.625rem;
  margin-top: 0.75rem;
}

@media (min-width: 768px) {
  .kbc-starter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.kbc-starter {
  text-align: left;
  border: 1px solid var(--slate-4, #EFEAE3);
  border-color: #EFEAE3;
  background: #FFFFFF;
  border-radius: 0.625rem;
  padding: 0.8rem 0.875rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: inherit;
  transition: border-color 0.15s ease-out, background 0.15s ease-out;
}

.kbc-starter:hover { border-color: #CDDAD2; background: #FBFAF7; }

.kbc-starter-label {
  font-size: 0.84rem;
  font-weight: 500;
  color: rgb(var(--slate-12));
}

.kbc-starter-hint {
  font-size: 0.72rem;
  color: rgb(var(--slate-9));
}

.kbc-foot-links {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: rgb(var(--slate-11));
}

.kbc-foot-links a { font-weight: 500; }
.kbc-sep { color: #C9C3B7; }

/* ---------- thread ---------- */

.kbc-thread {
  flex: 1 1 auto;
  padding: 2.1rem 1.5rem 1.5rem;
}

@media (min-width: 768px) {
  .kbc-thread { padding: 2.1rem 3.5rem 1.5rem; }
}

.kbc-messages {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

@keyframes kbc-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.kbc-msg { animation: kbc-fade 0.28s ease-out both; }

.kbc-user {
  display: flex;
  justify-content: flex-end;
}

.kbc-user-bubble {
  background: var(--tiq-sage-pale);
  color: var(--tiq-sage-deep);
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 0.7rem 0.94rem;
  border-radius: 0.75rem 0.75rem 0.25rem 0.75rem;
  max-width: 78%;
  white-space: pre-line;
}

.kbc-answer { display: flex; gap: 0.875rem; }

.kbc-avatar {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: 0.5rem;
  background: var(--tiq-sage-deep);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kbc-avatar svg { width: 0.875rem; height: 0.875rem; }

.kbc-answer-body { flex: 1 1 auto; min-width: 0; }

.kbc-answer-text {
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgb(var(--slate-12));
  white-space: pre-line;
  text-wrap: pretty;
}

@keyframes kbc-dot {
  0%, 80%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}

.kbc-pending { display: flex; gap: 0.3rem; padding: 0.55rem 0 0.1rem; }

.kbc-pending span {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--tiq-sage-deep);
  animation: kbc-dot 1.2s infinite;
}

.kbc-pending span:nth-child(2) { animation-delay: 0.2s; }
.kbc-pending span:nth-child(3) { animation-delay: 0.4s; }

/* ---------- sources ---------- */

.kbc-sources { margin-top: 1rem; }
.kbc-sources-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.56rem; }

.kbc-source {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  border: 1px solid #EFEAE3;
  border-radius: 0.625rem;
  padding: 0.7rem 0.8rem;
  background: #FFFFFF;
  transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}

.kbc-source:hover {
  border-color: #CDDAD2;
  box-shadow: 0 8px 24px rgba(31, 36, 32, 0.06);
}

.kbc-source-icon {
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  border-radius: 0.44rem;
  background: #FFF7E6;
  color: #D89B35;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kbc-source-icon svg { width: 0.875rem; height: 0.875rem; }

.kbc-source-main { flex: 1 1 auto; min-width: 0; }

.kbc-source-title {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  color: rgb(var(--slate-12));
}

.kbc-source-meta {
  display: block;
  font-size: 0.72rem;
  color: rgb(var(--slate-9));
  margin-top: 0.19rem;
}

.kbc-source-arrow { color: rgb(var(--slate-9)); flex: none; padding-top: 0.25rem; }
.kbc-source-arrow svg { width: 0.875rem; height: 0.875rem; }

/* ---------- follow-ups + feedback ---------- */

.kbc-followups {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.kbc-followup {
  border: 1px solid var(--tiq-border);
  background: #FBFAF7;
  border-radius: 999px;
  padding: 0.375rem 0.8rem;
  font-family: inherit;
  font-size: 0.78rem;
  color: var(--tiq-sage-deep);
  cursor: pointer;
  transition: background 0.15s ease-out, border-color 0.15s ease-out;
}

.kbc-followup:hover { background: var(--tiq-sage-pale); border-color: #CDDAD2; }

.kbc-feedback {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: 1rem;
  font-size: 0.72rem;
  color: rgb(var(--slate-9));
}

.kbc-rate {
  border: 1px solid #EFEAE3;
  background: #FFFFFF;
  border-radius: 0.44rem;
  padding: 0.19rem 0.56rem;
  font-family: inherit;
  font-size: 0.72rem;
  color: rgb(var(--slate-11));
  cursor: pointer;
}

.kbc-rate:hover { border-color: #CDDAD2; color: var(--tiq-sage-deep); }
.kbc-rated { color: #2F7A5A; }

/* ---------- sticky bottom composer ---------- */

.kbc-bottom {
  position: sticky;
  bottom: 0;
  flex: none;
  border-top: 1px solid #EFEAE3;
  background: rgb(var(--slate-1));
  padding: 1rem 1.5rem 1.4rem;
}

@media (min-width: 768px) {
  .kbc-bottom { padding: 1rem 3.5rem 1.4rem; }
}

.kbc-bottom-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #FFFFFF;
  border: 1px solid var(--tiq-border);
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(31, 36, 32, 0.06);
  padding: 0.5rem 0.5rem 0.5rem 0.94rem;
}

.kbc-bottom-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.9rem;
  color: rgb(var(--slate-12));
  padding: 0.44rem 0;
}

.kbc-bottom-input::placeholder { color: rgb(var(--slate-9)); }

.kbc-bottom-send {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border: none;
  border-radius: 0.5625rem;
  background: var(--tiq-sage-deep);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease-out;
}

.kbc-bottom-send:hover { background: #123F31; }
.kbc-bottom-send:disabled { opacity: 0.5; cursor: default; }
.kbc-bottom-send svg { width: 1rem; height: 1rem; }

.kbc-disclaimer {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: 0.625rem;
  font-size: 0.72rem;
  color: rgb(var(--slate-9));
}

.kbc-reset {
  margin-left: auto;
  flex: none;
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.72rem;
  color: var(--tiq-sage-deep);
  cursor: pointer;
  text-decoration: underline;
}

/* ---------- library counter ---------- */

.kbc-library {
  margin-top: 2.2rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid #EFEAE3;
  border-radius: 0.75rem;
  background: #FFFFFF;
  overflow: hidden;
}

@media (min-width: 640px) {
  .kbc-library { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.kbc-stat {
  padding: 0.8rem 1rem 0.9rem;
  border-top: 1px solid #F1EDE6;
  border-left: 1px solid #F1EDE6;
}

/* Only the interior gridlines, so the strip reads as one panel. */
.kbc-stat:nth-child(-n + 2) { border-top: none; }
.kbc-stat:nth-child(2n + 1) { border-left: none; }

@media (min-width: 640px) {
  .kbc-stat { border-top: none; }
  .kbc-stat:nth-child(2n + 1) { border-left: 1px solid #F1EDE6; }
  .kbc-stat:first-child { border-left: none; }
}

.kbc-stat-label {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgb(var(--slate-9));
  font-weight: 600;
}

.kbc-stat-value {
  display: block;
  margin-top: 0.25rem;
  font-size: 1.45rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tiq-sage-deep);
  font-variant-numeric: tabular-nums;
}

.kbc-hidden { display: none !important; }