/* ===========================================================================
   Mini Inès — the corner watcher and her chat panel.
   Leans on the site's own tokens (--bg, --ink, --ink2, --hair, --sans,
   --mono, --ease) so it inherits the page rather than sitting on top of it.
   =========================================================================== */

#miniWrap{position:fixed;right:clamp(16px,2.2vw,34px);bottom:clamp(16px,2.2vw,30px);z-index:7;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
#miniWrap>*{pointer-events:auto}
#miniWrap.gone{opacity:0;pointer-events:none;transform:translateY(10px)}
#miniWrap{transition:opacity 500ms var(--ease),transform 500ms var(--ease)}
body.handoff #miniWrap{opacity:calc((var(--ho,0) - .5) * 2);transform:none;transition:none}   /* she comes up with the landing */

/* --- the watcher ---------------------------------------------------------- */
#mini{position:relative;border:0;background:none;background-color:transparent;-webkit-appearance:none;appearance:none;padding:0;margin:0;cursor:pointer;
  width:auto;height:clamp(104px,12vh,146px);aspect-ratio:800/1030;border-radius:14px;
  transition:transform 600ms cubic-bezier(.32,.72,0,1),filter 400ms var(--ease)}
/* two prints of the same moment - one on her cream, one keyed onto the work chapter's night.
   They are not dissolved into each other: that would put a grey box on the screen halfway through.
   The screen behind her is split by the dark section's own edge, so each print is shown exactly
   where its backdrop is the truth, and the join lands on a line that is already there. */
#mini .mi-v{position:absolute;inset:0}
#mini .mi-light{position:relative}
#mini .mi-band{-webkit-mask-composite:source-in;mask-composite:intersect}
#mini .mi-dark{-webkit-mask-image:var(--edge),linear-gradient(to bottom,
    transparent calc((var(--ma,200) - 5) * 1%),#000 calc((var(--ma,200) + 5) * 1%),
    #000 calc((var(--mb,300) - 5) * 1%),transparent calc((var(--mb,300) + 5) * 1%));
          mask-image:var(--edge),linear-gradient(to bottom,
    transparent calc((var(--ma,200) - 5) * 1%),#000 calc((var(--ma,200) + 5) * 1%),
    #000 calc((var(--mb,300) - 5) * 1%),transparent calc((var(--mb,300) + 5) * 1%))}
#mini .mi-light{-webkit-mask-image:var(--edge),linear-gradient(to bottom,
    #000 calc((var(--ma,200) - 5) * 1%),transparent calc((var(--ma,200) + 5) * 1%),
    transparent calc((var(--mb,300) - 5) * 1%),#000 calc((var(--mb,300) + 5) * 1%));
          mask-image:var(--edge),linear-gradient(to bottom,
    #000 calc((var(--ma,200) - 5) * 1%),transparent calc((var(--ma,200) + 5) * 1%),
    transparent calc((var(--mb,300) - 5) * 1%),#000 calc((var(--mb,300) + 5) * 1%))}
#mini{--edge:linear-gradient(to bottom,transparent 0,#000 11%,#000 86%,transparent 100%),
              linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%)}
#mini video{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;
  /* she is filmed against a flat backdrop: dissolve the last of the frame away on all four sides */
  -webkit-mask-image:var(--edge);mask-image:var(--edge);
  -webkit-mask-composite:source-in;mask-composite:intersect}
#mini:hover{transform:scale(1.06)}
#mini:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:16px}
#mini .tip{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(6px);
  white-space:nowrap;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:rgba(255,255,255,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.9);border-radius:999px;padding:8px 13px;
  box-shadow:0 10px 26px rgba(19,19,19,.08);opacity:0;pointer-events:none;
  transition:opacity 320ms var(--ease),transform 420ms var(--ease)}
#mini:hover .tip,#mini:focus-visible .tip{opacity:1;transform:translateY(-50%) translateX(0)}
#mini .tip{transition:opacity 320ms var(--ease),transform 420ms var(--ease),background 400ms var(--ease),color 400ms var(--ease),border-color 400ms var(--ease)}
body.miDark #mini .tip{color:#F4EFE7;background:rgba(20,24,32,.62);border-color:rgba(255,255,255,.16);box-shadow:0 10px 26px rgba(0,0,0,.4)}
#miniWrap.open #mini .tip{display:none}

/* --- the panel ------------------------------------------------------------ */
#miniPanel{width:min(340px,calc(100vw - 40px));max-height:60vh;display:none;flex-direction:column;
  background:var(--bg);color:var(--ink);
  /* an ink blot rather than a box: the corners are uneven on purpose */
  border-radius:26px 26px 8px 26px;
  border:1px solid var(--hair);
  box-shadow:0 30px 70px rgba(19,19,19,.13),0 4px 14px rgba(19,19,19,.05);
  transform-origin:bottom right;opacity:0;transform:scale(.86) translateY(14px);
  transition:opacity 260ms var(--ease),transform 380ms cubic-bezier(.32,.72,0,1);overflow:hidden}
#miniWrap.open #miniPanel{display:flex}
#miniWrap.open.in #miniPanel{opacity:1;transform:none}

.mi-head{display:flex;align-items:center;gap:10px;padding:14px 14px 11px 16px;border-bottom:1px solid var(--hair);flex:none}
.mi-head .mi-name{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.mi-head .mi-dot{width:6px;height:6px;border-radius:50%;background:#B0654F;flex:none}
.mi-x{margin-left:auto;border:0;background:none;cursor:pointer;font:inherit;font-family:var(--mono);font-size:15px;
  line-height:1;color:var(--ink2);padding:6px 8px;border-radius:8px;transition:color 200ms,background 200ms}
.mi-x:hover{color:var(--ink);background:rgba(19,19,19,.05)}
.mi-x:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.mi-log{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:16px;display:flex;flex-direction:column;gap:12px;
  scrollbar-width:thin;scrollbar-color:var(--hair) transparent}
.mi-log::-webkit-scrollbar{width:8px}
.mi-log::-webkit-scrollbar-thumb{background:var(--hair);border-radius:8px}

.mi-row{display:flex;gap:9px;align-items:flex-end;max-width:100%}
.mi-row.me{flex-direction:row-reverse}
.mi-av{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--hair)}
.mi-b{font-size:14px;line-height:1.5;letter-spacing:-.005em;padding:10px 13px;border-radius:16px;max-width:78%;
  overflow-wrap:anywhere}
.mi-row.her .mi-b{background:#fff;border:1px solid var(--hair);border-bottom-left-radius:6px}
.mi-row.me  .mi-b{background:#2E2A26;color:#F7F1E8;border-bottom-right-radius:6px}

.mi-dots{display:inline-flex;gap:4px;padding:3px 0}
.mi-dots i{width:5px;height:5px;border-radius:50%;background:var(--ink2);display:block;animation:mibob 1.3s var(--ease) infinite}
.mi-dots i:nth-child(2){animation-delay:.16s} .mi-dots i:nth-child(3){animation-delay:.32s}
@keyframes mibob{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:.9;transform:translateY(-3px)}}

.mi-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px}
.mi-chips[hidden]{display:none}
.mi-chip{font:inherit;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);background:none;border:1px solid var(--hair);border-radius:999px;padding:8px 12px;cursor:pointer;
  transition:border-color 220ms var(--ease),background 220ms var(--ease)}
.mi-chip:hover{border-color:var(--ink);background:rgba(19,19,19,.03)}
.mi-chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.mi-form{display:flex;gap:8px;align-items:center;padding:11px 12px;border-top:1px solid var(--hair);flex:none;background:var(--bg)}
.mi-in{flex:1;font:inherit;font-size:14px;color:var(--ink);background:#fff;border:1px solid var(--hair);
  border-radius:999px;padding:10px 14px;min-width:0}
.mi-in::placeholder{color:var(--ink2)}
.mi-in:focus{outline:none;border-color:var(--ink)}
.mi-send{border:0;background:#2E2A26;color:#F7F1E8;width:34px;height:34px;border-radius:50%;cursor:pointer;flex:none;
  font-size:15px;line-height:1;transition:opacity 220ms var(--ease),transform 220ms var(--ease)}
.mi-send:hover{transform:translateY(-1px)}
.mi-send:disabled{opacity:.4;cursor:default;transform:none}
.mi-send:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.mi-note{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);
  text-align:center;padding:0 16px 10px}

@media (max-width:640px){
  #miniWrap{right:0;left:0;bottom:0;align-items:flex-end;gap:0}
  #mini{height:84px;margin:0 14px 14px}                       /* still a 44px+ target */
  #miniPanel{width:100vw;max-height:78vh;border-radius:22px 22px 0 0;border-bottom:0}
  #miniWrap.open #mini{display:none}                          /* the sheet owns the screen */
}
@media (prefers-reduced-motion:reduce){
  #mini,#miniPanel,#mini .mi-v{transition:none} .mi-dots i{animation:none}
}