/* The Spark assistant as a panel that opens from the nav bar and floats over
   the page's right edge. Closed by default; js/spark-drawer.js opens and
   closes it. The chat contents inside it are styled in spark-chat.css. */

/* The pill in the nav row. The Recipes and Social tabs recolor every .tnav
   pink with :has() (layout-shell.css), which would swallow this one's own
   look, hence the !important. */
.tnav-spark{
  background:linear-gradient(135deg,#ffc9f6,#b1f2f5)!important;
  box-shadow:0 2px 10px rgba(177,242,245,.6)!important;
}
.tnav-spark:hover,.tnav-spark[aria-expanded="true"]{box-shadow:0 3px 12px rgba(28,28,46,.28)!important;}
.tnav-spark .spark-pill-mark{display:inline;margin-right:5px;}

/* Below the nav pills and the guest notice, above the staged-dishes panel
   (200) and the floating arrow button (600), below the auth overlay (8990). */
.spark-drawer{
  display:none;
  position:fixed;
  top:calc(var(--guest-bar-height,0px) + 72px);
  right:16px;
  bottom:16px;
  width:min(340px,calc(100vw - 32px));
  box-sizing:border-box;
  background:var(--yellow);
  border-radius:22px;
  box-shadow:0 10px 30px rgba(28,28,46,.28);
  z-index:650;
  overflow:hidden;
}
.spark-drawer.open{display:block;}
.spark-head{justify-content:space-between;}
.spark-head-title{display:flex;align-items:center;gap:8px;}
.spark-close{
  border:none;
  background:rgba(28,28,46,.08);
  color:#1c1c2e;
  width:28px;height:28px;
  border-radius:50%;
  font-size:16px;
  line-height:1;
  cursor:pointer;
}
.spark-close:hover{background:rgba(28,28,46,.16);}

/* The mobile companion view has no nav bar to open it from. */
body.mobile-mode .spark-drawer,
body.mobile-mode .tnav-spark{display:none!important;}