/* The sidekick: Hannah's illustrated avatar in the corner, a handwritten
   nudge above it, and the marketing interview in a panel that grows out
   of it. Loaded on every public page; the interview's own stylesheet
   (audit.css) is added by sidekick.js the first time the panel opens.

   The panel is not a dialog and takes no backdrop on purpose: the page
   behind it stays readable and scrollable. It sits above page content
   and below the mobile menu (z 600). */

.sidekick{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 540;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
}

.sidekick > *{ pointer-events: auto; }

/* ---- the avatar ---- */

.sidekick-avatar{
  position: relative;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--champagne);
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 10px 26px rgba(var(--ink-rgb), .16);
  cursor: pointer;
  overflow: visible;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.sidekick-avatar img{
  display: block;
  width: 60px;
  height: 60px;
  margin: 1px;
  border-radius: 50%;
}

.sidekick-avatar:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(var(--ink-rgb), .2);
}

.sidekick-avatar:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* the awake mark */
.sidekick-dot{
  position: absolute;
  right: -1px;
  bottom: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--champagne);
  border: 2px solid var(--card);
}

/* ---- the handwritten nudge ---- */

.sidekick-note{
  position: relative;
  width: 224px;
  padding: 16px 34px 14px 16px;
  background: var(--card);
  border: 1px solid var(--sand);
  border-radius: 3px;
  box-shadow: 0 12px 30px rgba(var(--ink-rgb), .14);
  transform: rotate(-1.5deg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}

.sidekick-note.is-shown{
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms ease;
}

/* the tape */
.sidekick-note::before{
  content: "";
  position: absolute;
  top: -8px;
  left: 26px;
  width: 46px;
  height: 14px;
  background: rgba(var(--champagne-rgb), .55);
  transform: rotate(-6deg);
}

.sidekick-note-text{
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.15;
  color: var(--clay);
  cursor: pointer;
}

.sidekick-note-text:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.sidekick-note-kicker{
  display: block;
  margin: 8px 0 0;
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clay);
}

.sidekick-note-close{
  position: absolute;
  top: 2px;
  right: 2px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--stone);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.sidekick-note-close:hover{ color: var(--ink); }
.sidekick-note-close:focus-visible{ outline: 2px solid var(--ink); outline-offset: 1px; }

/* the note's own text writes itself in through the site's hand writer;
   unwritten it is clipped to nothing, so the note stays out of the way
   until sidekick.js says it is time */
.sidekick-note-text.hand{
  clip-path: inset(-25% 105% -25% -5%);
  transition: clip-path 1.1s cubic-bezier(.6, 0, .3, 1) .15s;
}
.sidekick-note-text.hand.is-written{
  clip-path: inset(-25% -5% -25% -5%);
}

/* ---- the panel ---- */

.sidekick-panel{
  display: none;
  width: min(380px, calc(100vw - 44px));
  max-height: min(600px, calc(100vh - 120px));
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--champagne);
  border-radius: 3px;
  box-shadow: 0 18px 50px rgba(var(--ink-rgb), .22);
  overflow: hidden;
}

.sidekick-panel.is-open{ display: flex; }

.sidekick-panel-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px 10px 16px;
  border-bottom: 1px solid var(--sand);
  background: var(--card);
}

.sidekick-panel-title{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  color: var(--ink);
}

.sidekick-panel-title small{
  margin-left: 6px;
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
}

.sidekick-panel-close{
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--stone);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.sidekick-panel-close:hover{ color: var(--ink); }
.sidekick-panel-close:focus-visible{ outline: 2px solid var(--ink); outline-offset: 1px; }

.sidekick-panel-scroll{
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0 0 8px;
}

/* the panel's own message when the interview cannot be loaded */
.sidekick-panel-message{
  margin: 0;
  padding: 16px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--clay);
}

.sidekick-panel-message a{ color: var(--ink); text-decoration: underline; }

/* the interview inside the panel: the page's card chrome comes off, the
   panel is the card; the thread grows and the panel scrolls */
.sidekick-panel .audit-chat{ border: 0; border-radius: 0; box-shadow: none; background: var(--card); }
.sidekick-panel .audit-chat::before,
.sidekick-panel .audit-chat::after{ display: none; }
.sidekick-panel .audit-chat-top{ display: none; }
/* inside the panel the thread is not a scroll container, the panel is; audit.css's overflow and overscroll-behavior would otherwise swallow the wheel and the keyboard with nothing to scroll */
.sidekick-panel .audit-thread{ height: auto; min-height: 0; overflow: visible; overscroll-behavior: auto; padding: 18px 16px 8px; }
/* the page's under-chat line has no place in a panel this size */
.sidekick-panel .audit-under-chat{ display: none; }
.sidekick-panel .audit-welcome-heading{ gap: 12px; }
.sidekick-panel .audit-hannah{ width: 78px; }
.sidekick-panel .audit-welcome h2{ font-size: 26px; margin: 8px 0 12px; }
.sidekick-panel .audit-controls{ border-radius: 0; padding: 14px 16px 16px; }
.sidekick-panel .audit-result{ margin: 24px 16px 0; padding-top: 20px; }
.sidekick-panel .audit-result h2{ font-size: 26px; }
.sidekick-panel .audit-capture{ margin: 20px 16px 8px; padding: 18px 16px; }
.sidekick-panel .audit-capture h2{ font-size: 24px; }
.sidekick-panel .audit-fields{ grid-template-columns: 1fr; }
/* the second selector outranks .audit-controls .btn in audit.css, which loads after this file */
.sidekick-panel .btn, .sidekick-panel .audit-controls .btn{ border-radius: 3px; min-height: 44px; font-size: 12px; }
.sidekick-panel button:disabled{ opacity: .6; cursor: wait; }

/* the avatar's dot goes quiet while the panel is open */
html[data-sidekick-open] .sidekick-dot{ display: none; }

/* ---- phones: the panel is a sheet ---- */

@media (max-width: 759px){
  .sidekick{ right: 16px; bottom: 16px; }
  .sidekick-note{ width: 208px; }
  .sidekick-panel{
    position: fixed;
    inset: 0;
    width: auto;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  html[data-sidekick-open] .sidekick-avatar,
  html[data-sidekick-open] .sidekick-note{ display: none; }
}

/* ---- motion ---- */

@media (prefers-reduced-motion: reduce){
  .sidekick-avatar{ transition: none; }
  .sidekick-note, .sidekick-note.is-shown{ transition: none; }
  .sidekick-note-text.hand{ clip-path: none; transition: none; }
}