/* ==========================================================================
   KORIX Answer Engine, panel styles.

   Every selector is namespaced .kx- or #kx-root so nothing can leak into the
   theme, and no theme rule can reach in. Tokens are --kx- for the same reason.

   Z INDEX NOTE. The theme footer renders a fixed WhatsApp button at
   z-index 9998. The design doc gives the dock z-index 70, which would put the
   WhatsApp button on top of both the dock and the open panel. The dock sits at
   9999 and the panel above it so the panel is genuinely modal.
   ========================================================================== */

:root{
  --kx-page:      #080806;
  --kx-ground:    #0D0D0B;
  --kx-panel:     #16130B;
  --kx-raised:    #1B1810;
  --kx-raised-2:  #231F15;

  --kx-line:      #2C281C;
  --kx-line-soft: #211D14;
  --kx-line-lift: #332E20;

  --kx-text:      #F7F2E8;
  --kx-muted:     #A79E8D;
  --kx-faint:     #6E6555;

  --kx-amber:      #E8903A;
  --kx-amber-soft: rgba(232,144,58,.11);
  --kx-amber-line: rgba(232,144,58,.30);

  --kx-ok:        #93AC66;
  --kx-warn:      #D9A441;
  --kx-stop:      #CF6448;

  --kx-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --kx-sans:  "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --kx-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --kx-ease: cubic-bezier(.22,1,.36,1);
}

/* ---------- the dock, the primary trigger -------------------------------- */

.kx-dock{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(14px);
  width:min(540px, 100vw - 32px); z-index:9999;
  opacity:0; transition:opacity .5s ease, transform .5s var(--kx-ease);
}
.kx-dock.kx-in{ opacity:1; transform:translateX(-50%) }
body.kx-locked .kx-dock{ opacity:0; transform:translateX(-50%) translateY(16px); pointer-events:none }

.kx-dock-halo{
  position:absolute; inset:-16px -22px; border-radius:999px; pointer-events:none;
  background:radial-gradient(60% 120% at 50% 50%, rgba(232,144,58,.55), transparent 70%);
  filter:blur(22px); opacity:.40; animation:kx-breathe 5.4s ease-in-out infinite;
}
.kx-dock.kx-bloom .kx-dock-halo{
  animation:kx-bloom 1.5s var(--kx-ease) 1, kx-breathe 5.4s ease-in-out infinite 1.5s;
}
@keyframes kx-breathe{ 0%,100%{opacity:.40;transform:scale(.97)} 50%{opacity:.78;transform:scale(1.04)} }
@keyframes kx-bloom{ 0%{opacity:.34;transform:scale(.97)} 35%{opacity:.95;transform:scale(1.14)} 100%{opacity:.4;transform:scale(1)} }

.kx-dock-btn{
  position:relative; width:100%; display:flex; align-items:center; gap:12px;
  background:linear-gradient(180deg,#211C12,#15120A);
  border:1px solid rgba(232,144,58,.36); border-radius:999px;
  padding:9px 10px 9px 18px; cursor:pointer; overflow:hidden;
  font-family:var(--kx-sans); text-align:left;
  transition:transform .18s ease, border-color .18s ease;
}
.kx-dock-btn::after{
  content:""; position:absolute; inset:0; width:40%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(232,144,58,.16), transparent);
  animation:kx-sweep 6.5s ease-in-out infinite;
}
@keyframes kx-sweep{ 0%{transform:translateX(-170%)} 55%,100%{transform:translateX(420%)} }
.kx-dock:hover .kx-dock-btn{ transform:translateY(-2px); border-color:rgba(232,144,58,.62) }
.kx-dock:hover .kx-dock-halo{ opacity:.78 }
.kx-dock-btn:focus-visible{ outline:2px solid var(--kx-amber); outline-offset:3px }

.kx-dock-spark{ color:var(--kx-amber); flex-shrink:0; display:grid; place-items:center }
.kx-dock-spark svg{ width:17px; height:17px }
.kx-dock-label{ flex:1; color:var(--kx-muted); font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.kx-dock-short{ display:none }
.kx-dock-kbd{
  font-family:var(--kx-mono); font-size:11px; color:var(--kx-faint);
  border:1px solid var(--kx-line); border-radius:5px; padding:3px 7px; flex-shrink:0;
}
.kx-dock-go{
  width:34px; height:34px; border-radius:50%; background:var(--kx-amber); color:#17130B;
  display:grid; place-items:center; flex-shrink:0;
}
.kx-dock-go svg{ width:15px; height:15px }

@media(max-width:560px){
  /* The theme's WhatsApp button is fixed bottom right, 56px at 28px inset.
     Stacking the dock above it wasted a whole row of screen and read as two
     competing bars. The dock now sits BESIDE it on the same line and takes the
     remaining width, so the pair reads as one row of actions.
     The button's INLINE style says 56px at 28px, but a theme media query
     overrides it to 48px at 16px on mobile. Measured, not assumed.
     Right inset = 16 (WA inset) + 48 (WA width) + 12 (gap) = 76.
     Bottom is set so the two controls share a centre line. */
  .kx-dock{
    left:16px; right:76px; width:auto;
    bottom:calc(14px + env(safe-area-inset-bottom,0px));
    transform:translateY(14px);
  }
  .kx-dock.kx-in{ transform:none }
  body.kx-locked .kx-dock{ transform:translateY(16px) }
  /* Match the WhatsApp button's 48px height so the row reads as one set. */
  .kx-dock-btn{ padding:6px 6px 6px 16px }
  .kx-dock-go{ width:32px; height:32px }
  .kx-dock-go svg{ width:13px; height:13px }
  .kx-dock-spark svg{ width:15px; height:15px }
  .kx-dock-label{ font-size:14.5px }
  .kx-dock-full{ display:none }
  .kx-dock-short{ display:inline }
  .kx-dock-kbd{ display:none }
}

@media(prefers-reduced-motion:reduce){
  .kx-dock, .kx-dock-halo, .kx-dock-btn::after{ animation:none!important; transition:opacity .2s ease }
  .kx-dock-halo{ opacity:.42 }
  .kx-dock-btn::after{ display:none }
}

/* ---------- secondary triggers ------------------------------------------- */

.kx-trigger-nav{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:var(--kx-raised); border:1px solid var(--kx-line); border-radius:999px;
  color:var(--kx-text); font-family:var(--kx-sans); font-size:13.5px; padding:8px 15px;
  transition:border-color .18s ease, background .18s ease;
}
.kx-trigger-nav:hover{ border-color:var(--kx-amber-line); background:var(--kx-raised-2) }
.kx-trigger-nav .kx-dot{ width:6px; height:6px; border-radius:50%; background:var(--kx-ok); box-shadow:0 0 0 3px rgba(147,172,102,.16) }

.kx-trigger-hero{
  display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%;
  cursor:pointer; text-align:left; font-family:var(--kx-sans); font-size:15.5px;
  color:var(--kx-muted); background:var(--kx-raised); border:1px solid var(--kx-line);
  border-radius:14px; padding:17px 20px; transition:border-color .18s ease;
}
.kx-trigger-hero:hover{ border-color:var(--kx-amber-line) }

/* ---------- scrim and panel ---------------------------------------------- */

.kx-overlay{
  position:fixed; inset:0; z-index:10010; opacity:0; pointer-events:none;
  background:rgba(4,4,3,.44); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  transition:opacity .28s ease;
}
.kx-overlay.kx-open{ opacity:1; pointer-events:auto }

.kx-panel{
  position:fixed; inset:26px; z-index:10011; display:flex; overflow:hidden;
  background:var(--kx-panel); border:1px solid var(--kx-line-lift); border-radius:16px;
  box-shadow:0 50px 130px -25px rgba(0,0,0,.95);
  transform:scale(.985) translateY(10px); opacity:0;
  transition:transform .34s var(--kx-ease), opacity .34s var(--kx-ease);
  font-family:var(--kx-sans); color:var(--kx-text);
}
.kx-overlay.kx-open .kx-panel{ transform:none; opacity:1 }
@media(min-width:1400px){ .kx-panel{ inset:34px 76px } }
@media(max-width:720px){ .kx-panel{ inset:0; border-radius:0; border:0 } }
@media(prefers-reduced-motion:reduce){
  .kx-panel{ transition:opacity .2s ease; transform:none }
}
body.kx-locked{ overflow:hidden }

/* ---------- rail ---------------------------------------------------------- */

.kx-rail{
  width:236px; flex-shrink:0; border-right:1px solid var(--kx-line-soft);
  background:rgba(0,0,0,.16); padding:18px 12px; display:flex; flex-direction:column; gap:3px;
  overflow-y:auto;
}
.kx-rail-item{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left; cursor:pointer;
  background:none; border:0; border-radius:9px; padding:9px 11px; text-decoration:none;
  color:var(--kx-muted); font-family:var(--kx-sans); font-size:13.5px;
  transition:background .16s ease, color .16s ease;
}
.kx-rail-item svg{ opacity:.7 }
.kx-rail-link svg{ margin-left:auto; opacity:0; transition:opacity .16s ease }
.kx-rail-link:hover svg{ opacity:.6 }
.kx-rail-item:hover{ background:var(--kx-raised); color:var(--kx-text) }
.kx-rail-item svg{ width:15px; height:15px; flex-shrink:0; opacity:.75 }
.kx-rail-cta{
  display:block; text-decoration:none; margin:9px 0 4px; padding:12px 14px; border-radius:11px;
  background:linear-gradient(180deg,rgba(232,144,58,.16),rgba(232,144,58,.06)),var(--kx-raised);
  border:1px solid var(--kx-amber-line); transition:border-color .16s ease, transform .16s ease;
}
.kx-rail-cta:hover{ border-color:var(--kx-amber); transform:translateY(-1px) }
.kx-rail-cta-row{ display:flex; align-items:center; gap:9px; color:var(--kx-amber); font-size:14px; font-weight:500 }
.kx-rail-cta-sub{ display:block; margin-top:5px; padding-left:24px; color:var(--kx-faint); font-family:var(--kx-mono); font-size:10px }

/* Push Close to the bottom of the rail. */
.kx-rail-foot{ margin-top:auto; padding-top:12px }

.kx-rail-sec{
  font-family:var(--kx-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--kx-faint); padding:18px 11px 8px;
}
.kx-rail-card{
  display:block; width:100%; text-align:left; cursor:pointer; text-decoration:none;
  background:var(--kx-raised); border:1px solid var(--kx-line); border-radius:10px;
  padding:11px 12px; margin-bottom:7px; transition:border-color .18s ease;
}
.kx-rail-card:hover{ border-color:var(--kx-amber-line) }
.kx-rail-card b{ display:block; font-size:13px; font-weight:500; color:var(--kx-text); line-height:1.35 }
.kx-rail-card span{ font-family:var(--kx-mono); font-size:10px; color:var(--kx-faint); display:block; margin-top:5px }
@media(max-width:940px){ .kx-rail{ display:none } }

/* ---------- main, canvas, welcome ---------------------------------------- */

.kx-main{ flex:1; display:flex; flex-direction:column; min-width:0; position:relative }
.kx-close{
  position:absolute; top:14px; right:16px; z-index:3; cursor:pointer;
  width:40px; height:40px; border-radius:9px; display:grid; place-items:center;
  background:none; border:1px solid transparent; color:var(--kx-muted); font-size:26px; line-height:1;
  transition:color .16s ease, border-color .16s ease, background .16s ease;
}
.kx-close:hover{ color:var(--kx-text); border-color:var(--kx-amber-line); background:var(--kx-raised-2) }
.kx-close:focus-visible{ outline:2px solid var(--kx-amber); outline-offset:2px }

/* Mobile only. The rail hides under 940px, taking New question and Close with
   it, so those controls move here. Buttons are 44px tall touch targets. */
.kx-topbar{ display:none }
@media(max-width:940px){
  .kx-topbar{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:10px 12px 10px 16px; border-bottom:1px solid var(--kx-line-soft); flex-shrink:0;
  }
  .kx-close{ display:none }   /* the top bar has its own, bigger, close */
}
.kx-topbar-new{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; cursor:pointer;
  background:var(--kx-raised); border:1px solid var(--kx-line); border-radius:10px;
  color:var(--kx-text); font-family:var(--kx-sans); font-size:14.5px; padding:0 16px;
}
.kx-topbar-new:hover,.kx-topbar-new:active{ border-color:var(--kx-amber-line) }
.kx-topbar-new svg{ width:15px; height:15px; color:var(--kx-amber) }
.kx-topbar-close{
  width:44px; height:44px; flex-shrink:0; cursor:pointer; border-radius:10px;
  display:grid; place-items:center; background:var(--kx-raised); border:1px solid var(--kx-line);
  color:var(--kx-text); font-size:26px; line-height:1;
}
.kx-topbar-close:hover,.kx-topbar-close:active{ border-color:var(--kx-amber-line) }
.kx-topbar-close:focus-visible,.kx-topbar-new:focus-visible{ outline:2px solid var(--kx-amber); outline-offset:2px }

.kx-canvas{ flex:1; overflow-y:auto; padding:0 28px; display:flex; flex-direction:column }
.kx-canvas-in{ max-width:760px; width:100%; margin:0 auto; padding:0 0 26px; flex:1; display:flex; flex-direction:column }

.kx-welcome{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:24px 0 }
.kx-engaged .kx-welcome{ display:none }
.kx-greet{ font-family:var(--kx-serif); font-size:clamp(26px,3.4vw,34px); color:var(--kx-muted); line-height:1.15; margin:0 }
.kx-askline{
  font-family:var(--kx-serif); font-size:clamp(32px,4.6vw,46px); line-height:1.08;
  margin:2px 0 0; letter-spacing:-.01em; text-wrap:balance; font-weight:400;
}
.kx-askline em{ font-style:italic; color:var(--kx-amber) }
.kx-welcome-sub{ color:var(--kx-faint); font-size:14.5px; margin:16px 0 0; max-width:46ch }

.kx-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:11px; margin-top:38px; width:100%; max-width:780px }
.kx-wcard{
  display:flex; flex-direction:column; justify-content:space-between; gap:14px;
  min-height:118px; text-align:left; cursor:pointer;
  background:var(--kx-raised); border:1px solid var(--kx-line); border-radius:12px; padding:15px 16px;
  transition:transform .18s ease, border-color .18s ease;
}
.kx-wcard:hover{ transform:translateY(-2px); border-color:var(--kx-amber-line) }
.kx-wcard:focus-visible{ outline:2px solid var(--kx-amber); outline-offset:2px }
.kx-wcard.kx-a{ background:linear-gradient(158deg,rgba(232,144,58,.20),rgba(232,144,58,.03) 70%),var(--kx-raised); border-color:rgba(232,144,58,.22) }
.kx-wcard.kx-b{ background:linear-gradient(158deg,rgba(147,172,102,.18),rgba(147,172,102,.03) 70%),var(--kx-raised); border-color:rgba(147,172,102,.20) }
.kx-wcard-t{ font-size:14px; line-height:1.35; color:var(--kx-text); flex:1; font-weight:400 }
.kx-wcard-m{ font-family:var(--kx-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--kx-faint) }

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

.kx-thread{ display:none; flex-direction:column; gap:26px; padding-top:54px }
.kx-engaged .kx-thread{ display:flex }
.kx-turn{ display:flex; flex-direction:column; gap:12px; animation:kx-rise .4s var(--kx-ease) both }
@keyframes kx-rise{ from{opacity:0;transform:translateY(9px)} to{opacity:1;transform:none} }
.kx-q{
  align-self:flex-end; max-width:80%; background:var(--kx-raised-2); border:1px solid var(--kx-line);
  padding:12px 17px; border-radius:14px 14px 3px 14px; font-size:15.5px; line-height:1.5;
}
.kx-ahead{
  display:flex; align-items:center; gap:9px; font-family:var(--kx-mono); font-size:10.5px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--kx-faint);
}
.kx-avatar{ width:19px; height:19px; border-radius:5px; background:linear-gradient(150deg,var(--kx-amber),#A35A18); flex-shrink:0 }
.kx-abody{ font-size:16px; line-height:1.62 }
.kx-abody p{ margin:0 0 13px }
.kx-abody p:last-child{ margin-bottom:0 }
.kx-abody strong{ font-weight:600; color:#fff }
.kx-caret{
  display:inline-block; width:7px; height:16px; background:var(--kx-amber);
  vertical-align:-2px; margin-left:2px; animation:kx-blink 1s steps(2) infinite;
}
@keyframes kx-blink{ 50%{opacity:0} }
@media(prefers-reduced-motion:reduce){ .kx-caret,.kx-turn{ animation:none } .kx-caret{ display:none } }

.kx-srcs{ display:flex; flex-wrap:wrap; gap:7px; align-items:center }
.kx-srcs-lab{ font-family:var(--kx-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--kx-faint) }
.kx-src{
  font-family:var(--kx-mono); font-size:11.5px; color:var(--kx-muted); text-decoration:none;
  border:1px solid var(--kx-line); border-radius:5px; padding:4px 9px; background:rgba(0,0,0,.2);
  transition:border-color .18s ease;
}
.kx-src:hover{ border-color:var(--kx-amber-line) }
.kx-src b{ color:var(--kx-amber); font-weight:400 }

.kx-next{ border-top:1px solid var(--kx-line-soft); padding-top:16px; margin-top:4px }
.kx-next-lab{ font-family:var(--kx-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--kx-faint); margin-bottom:11px }
.kx-next-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px }
.kx-card{
  display:block; text-decoration:none; background:var(--kx-raised); border:1px solid var(--kx-line);
  border-radius:10px; padding:14px 15px; transition:border-color .18s ease, background .18s ease;
}
.kx-card:hover{ border-color:var(--kx-amber-line); background:var(--kx-raised-2) }
.kx-card-k,.kx-card-t,.kx-card-m{ display:block }
.kx-card-k{ font-family:var(--kx-mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--kx-amber); margin-bottom:7px }
.kx-card-t{ font-size:14.5px; line-height:1.38; color:var(--kx-text) }
.kx-card-m{ font-family:var(--kx-mono); font-size:10.5px; color:var(--kx-faint); margin-top:8px }

/* ---------- error states -------------------------------------------------- */

.kx-retry{ color:var(--kx-muted); font-size:15px; font-style:italic }
.kx-throttle{
  border:1px solid var(--kx-amber-line); border-left:3px solid var(--kx-amber); border-radius:12px;
  background:linear-gradient(180deg,var(--kx-amber-soft),transparent 72%),var(--kx-raised); padding:17px 19px;
}
.kx-throttle b{ color:var(--kx-text); font-weight:500; display:block; margin-bottom:6px; font-size:15.5px }
.kx-throttle p{ margin:0 0 14px; color:var(--kx-muted); font-size:14.5px; line-height:1.5 }
.kx-throttle-cta{ display:flex; gap:10px; flex-wrap:wrap }
.kx-throttle-call,.kx-throttle-wa{
  display:inline-flex; align-items:center; text-decoration:none; font-family:var(--kx-sans);
  font-size:14px; font-weight:500; padding:10px 18px; border-radius:9px;
}
.kx-throttle-call{ background:var(--kx-amber); color:#17130B }
.kx-throttle-call:hover{ transform:translateY(-1px) }
.kx-throttle-wa{ background:#25D366; color:#fff }
.kx-throttle-wa:hover{ transform:translateY(-1px) }

.kx-err{
  border:1px solid var(--kx-line); border-left:3px solid var(--kx-warn); border-radius:10px;
  background:var(--kx-raised); padding:15px 17px; font-size:15px; line-height:1.55; color:var(--kx-muted);
}
.kx-err.kx-err-stop{ border-left-color:var(--kx-stop) }
.kx-err b{ color:var(--kx-text); font-weight:500; display:block; margin-bottom:5px }

/* ---------- capture ------------------------------------------------------- */

.kx-capture{
  background:linear-gradient(180deg,var(--kx-amber-soft),transparent 72%),var(--kx-raised);
  border:1px solid var(--kx-amber-line); border-radius:14px; padding:19px 20px;
}
.kx-capture p{ margin:0 0 14px; font-size:15.5px; line-height:1.5 }
.kx-cap-row{ display:flex; gap:9px; flex-wrap:wrap }
.kx-cap-row input{
  flex:1; min-width:180px; background:rgba(0,0,0,.34); border:1px solid var(--kx-line);
  border-radius:9px; padding:12px 14px; color:var(--kx-text); font-family:var(--kx-sans); font-size:15px;
}
.kx-cap-row input:focus{ border-color:var(--kx-amber-line); outline:none }
.kx-cap-row input.kx-bad{ border-color:var(--kx-stop) }
.kx-cap-row button{
  background:var(--kx-amber); color:#17130B; border:0; border-radius:9px; padding:12px 20px;
  font-family:var(--kx-sans); font-size:14.5px; font-weight:500; cursor:pointer;
}
.kx-cap-row button:disabled{ opacity:.5; cursor:not-allowed }
.kx-cap-note{ font-size:13px; color:var(--kx-stop); margin:9px 0 0 }
.kx-cap-skip{
  background:none; border:0; color:var(--kx-faint); font-family:var(--kx-mono); font-size:11px;
  cursor:pointer; margin-top:11px; padding:0; text-decoration:underline;
}
.kx-cap-skip:hover{ color:var(--kx-muted) }
.kx-done{ display:flex; gap:11px; align-items:flex-start }
.kx-done-tick{ color:var(--kx-ok); flex-shrink:0; margin-top:2px }
.kx-declined{ color:var(--kx-muted); margin:0; font-size:15px }

/* ---------- composer ------------------------------------------------------ */

.kx-composer{ position:relative; flex-shrink:0; padding:0 28px 20px }
.kx-composer::before{
  content:""; position:absolute; left:0; right:0; bottom:100%; height:38px; pointer-events:none;
  background:linear-gradient(transparent, var(--kx-panel));
}
.kx-composer-in{ max-width:760px; margin:0 auto }
.kx-ask{
  display:flex; align-items:center; gap:9px; background:var(--kx-raised);
  border:1px solid var(--kx-line); border-radius:14px; padding:4px 5px 4px 6px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.kx-ask:focus-within{ border-color:var(--kx-amber-line); box-shadow:0 0 0 4px rgba(232,144,58,.07) }
.kx-tools{
  background:none; border:0; cursor:pointer; color:var(--kx-faint); font-family:var(--kx-mono);
  font-size:11px; padding:9px 11px; border-radius:9px; letter-spacing:.06em;
}
.kx-tools:hover{ color:var(--kx-muted); background:var(--kx-raised-2) }
.kx-ask input{
  flex:1; background:none; border:0; outline:none; color:var(--kx-text);
  font-family:var(--kx-sans); font-size:16px; padding:14px 0; min-width:0;
}
.kx-ask input::placeholder{ color:var(--kx-faint) }
.kx-send{
  border:0; cursor:pointer; background:var(--kx-amber); color:#17130B; width:40px; height:40px;
  border-radius:10px; display:grid; place-items:center; flex-shrink:0; transition:transform .15s ease;
}
.kx-send:hover{ transform:translateY(-1px) }
.kx-send:disabled{ opacity:.32; cursor:not-allowed; transform:none }
.kx-send svg{ width:17px; height:17px }
.kx-composer-foot{
  display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:10px;
  font-family:var(--kx-mono); font-size:10.5px; color:var(--kx-faint);
}
.kx-gov-link{ background:none; border:0; color:var(--kx-faint); font-family:var(--kx-mono); font-size:10.5px; cursor:pointer; text-decoration:underline; padding:0 }
.kx-gov-link:hover{ color:var(--kx-muted) }
.kx-foot-cta{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  color:var(--kx-amber); font-family:var(--kx-sans); font-size:13px; font-weight:500;
  padding:6px 12px; border:1px solid var(--kx-amber-line); border-radius:999px;
  transition:border-color .16s ease, background .16s ease;
}
.kx-foot-cta:hover{ border-color:var(--kx-amber); background:var(--kx-amber-soft) }
.kx-foot-cta svg{ transition:transform .16s ease }
.kx-foot-cta:hover svg{ transform:translateX(2px) }
@media(max-width:720px){
  .kx-canvas{ padding:0 18px }
  .kx-thread{ padding-top:20px }
  .kx-composer{ padding:0 18px calc(16px + env(safe-area-inset-bottom,0px)) }
  /* On a short mobile screen the welcome is taller than the canvas. The nested
     flex:1 chain (canvas-in and welcome) locked it to the canvas height, so the
     last card was clipped behind the composer instead of scrolling into reach.
     Let both take natural height so the canvas (overflow-y:auto) scrolls. */
  .kx-canvas-in{ flex:0 0 auto }
  .kx-welcome{ flex:0 0 auto; justify-content:flex-start; padding:20px 0 40px }
  .kx-cards{ margin-top:26px }
  .kx-wcard{ min-height:96px }
}

/* ---------- governance sheet, inside the panel ---------------------------- */

.kx-gov{
  position:absolute; inset:0; z-index:4; display:flex; justify-content:flex-end;
  background:rgba(4,4,3,.5); opacity:0; pointer-events:none; transition:opacity .3s var(--kx-ease);
}
.kx-gov.kx-open{ opacity:1; pointer-events:auto }
.kx-gov-sheet{
  width:min(430px,100%); height:100%; overflow-y:auto; background:var(--kx-panel);
  border-left:1px solid var(--kx-line-lift); padding:26px 26px 34px; position:relative;
  transform:translateX(16px); transition:transform .3s var(--kx-ease);
}
.kx-gov.kx-open .kx-gov-sheet{ transform:none }
.kx-gov-close{ position:absolute; top:16px; right:18px; background:none; border:0; color:var(--kx-faint); font-size:21px; cursor:pointer; line-height:1 }
.kx-gov h3{ font-family:var(--kx-serif); font-size:26px; font-weight:400; margin:0 0 8px }
.kx-gsub{ color:var(--kx-faint); font-size:13.5px; margin:0 0 22px; line-height:1.5 }
.kx-rule{ display:flex; gap:11px; padding:13px 0; border-top:1px solid var(--kx-line-soft); font-size:14px; line-height:1.55; color:var(--kx-muted) }
.kx-rule::before{ content:""; width:6px; height:6px; background:var(--kx-amber); flex-shrink:0; margin-top:7px }
.kx-rule b{ color:var(--kx-text); font-weight:500 }

/* An element hidden with the hidden attribute must still be display:none even
   when its class sets a display value. An author display beats the UA rule. */
#kx-root [hidden], .kx-dock[hidden]{ display:none!important }